:root {
            --bg-base: #0A0B0F; --bg-surface: rgba(255, 255, 255, 0.035);
            --bg-surface-elevated: rgba(255, 255, 255, 0.06); --bg-surface-hover: rgba(255, 255, 255, 0.095);
            --bg-surface-active: rgba(255, 255, 255, 0.14); --text-primary: #FAF9F6;
            --text-secondary: #9B9CA7; --text-muted: #646570;
            --accent-gold: #DFBF95; --accent-gold-light: #F2DDC2; --accent-gold-dark: #A3845C;
            --border-glass: rgba(255, 255, 255, 0.08); --border-glass-active: rgba(255, 255, 255, 0.24);
            --border-gold: rgba(223, 191, 149, 0.22); --glass-blur: blur(28px) saturate(190%);
            --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
            --radius-pill: 9999px; --radius-card: 28px; --radius-sm: 18px;
            --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
            --transition-theme: background 0.3s var(--ease-apple), color 0.3s var(--ease-apple);
        }

        [data-theme="light"] {
            --bg-base: #F7F6F2; --bg-surface: rgba(0, 0, 0, 0.035);
            --bg-surface-elevated: rgba(0, 0, 0, 0.055); --bg-surface-hover: rgba(0, 0, 0, 0.08);
            --bg-surface-active: rgba(0, 0, 0, 0.12); --text-primary: #15161A;
            --text-secondary: #585963; --text-muted: #8E8F9A;
            --accent-gold: #9C743D; --accent-gold-light: #BA8E4E; --accent-gold-dark: #7A5524;
            --border-glass: rgba(0, 0, 0, 0.08); --border-glass-active: rgba(0, 0, 0, 0.22);
            --border-gold: rgba(156, 116, 61, 0.25);
            --glass-blur: blur(24px) saturate(180%);
            --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
        /* ── Universal Scrollbar Suppression (All Browsers, Devices, Platforms & Webs) ── */
        html, body, *, *::before, *::after {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            scrollbar-color: transparent transparent !important;
        }
        ::-webkit-scrollbar,
        *::-webkit-scrollbar,
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
            -webkit-appearance: none !important;
        }
        ::-webkit-scrollbar-thumb,
        *::-webkit-scrollbar-thumb,
        html::-webkit-scrollbar-thumb,
        body::-webkit-scrollbar-thumb {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-track,
        *::-webkit-scrollbar-track,
        html::-webkit-scrollbar-track,
        body::-webkit-scrollbar-track {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-corner,
        *::-webkit-scrollbar-corner,
        html::-webkit-scrollbar-corner,
        body::-webkit-scrollbar-corner {
            display: none !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-button,
        *::-webkit-scrollbar-button,
        html::-webkit-scrollbar-button,
        body::-webkit-scrollbar-button {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }

        html {
            scroll-padding-top: 76px;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            width: 100%;
        }
        @media all and (display-mode: standalone), (display-mode: fullscreen), (pointer: coarse), (hover: none), (max-width: 1024px) {
            html, body, *, *::before, *::after {
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-y: none;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }
            ::-webkit-scrollbar,
            *::-webkit-scrollbar,
            html::-webkit-scrollbar,
            body::-webkit-scrollbar {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
                background: transparent !important;
                -webkit-appearance: none !important;
            }
        }
        html.pwa-standalone, body.pwa-standalone,
        html.touch-screen-device, body.touch-screen-device,
        .pwa-standalone *, .touch-screen-device * {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }
        html.pwa-standalone *::-webkit-scrollbar,
        html.touch-screen-device *::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
        @media (max-width: 767px) {
            html {
                scroll-padding-top: 58px;
            }
        }
        html, body {
            width: 100%;
            max-width: 100%;
        }
        body {
            overflow-x: hidden;
            position: relative;
        }
        .section-pane {
            display: none !important;
            scroll-margin-top: 76px;
        }
        .section-pane.active {
            display: block !important;
            opacity: 1;
            animation: smoothSectionFade 0.25s ease-out;
        }
        @keyframes smoothSectionFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .section-pane.active { animation: none !important; }
        }
        .memorial-site-footer,
        .memorial-editorial-footer {
            scroll-margin-top: 76px;
        }
        body.quran-modal-active .top-navbar-sticky,
        body.quran-modal-active #iosModal,
        body.quran-modal-active .mobile-nav-drawer,
        body:has(#quranReaderModal.active) .top-navbar-sticky,
        body:has(#quranReaderModal.active) #iosModal,
        body:has(#quranReaderModal.active) .mobile-nav-drawer {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        .viewport-reveal {
            opacity: 0;
            transition: opacity 0.35s var(--ease-apple);
        }
        .viewport-reveal.is-visible {
            opacity: 1;
        }
        @media (prefers-reduced-motion: reduce) {
            .viewport-reveal {
                opacity: 1 !important;
                transition: none !important;
            }
        }
        /* ── Self-Hosted Core Webfonts (Offline & PWA Consistency) ── */
        @font-face {
            font-family: 'Noto Kufi Arabic';
            src: url('/fonts/noto-kufi-arabic.woff2') format('woff2');
            font-weight: 400 700;
            font-style: normal;
            font-display: block;
            unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
        }
        @font-face {
            font-family: 'Noto Kufi Arabic';
            src: url('/fonts/noto-kufi-latin.woff2') format('woff2');
            font-weight: 400 700;
            font-style: normal;
            font-display: block;
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Amiri';
            src: url('/fonts/amiri-regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: block;
            unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
        }
        @font-face {
            font-family: 'Aref Ruqaa';
            src: url('/fonts/aref-ruqaa-bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: block;
            unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
        }
        @font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('/fonts/plus-jakarta-sans.woff2') format('woff2');
            font-weight: 400 800;
            font-style: normal;
            font-display: block;
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        body {
            font-family: 'Noto Kufi Arabic', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            background-color: var(--bg-base);
            color: var(--text-primary);
            direction: inherit;
            min-height: 100vh;
            overflow-x: clip;
            letter-spacing: -0.1px;
            transition: var(--transition-theme);
        }

        html[dir="ltr"] body {
            direction: ltr;
            text-align: left;
        }
        html[dir="rtl"] body {
            direction: rtl;
            text-align: right;
        }

        /* Classical Roman/Monument Calligraphic Typography for Noor Sherif in English & French */
        html[dir="ltr"] .brand-name, html[lang="en"] .brand-name, html[lang="fr"] .brand-name,
        html[dir="ltr"] .mobile-brand-name, html[lang="en"] .mobile-brand-name, html[lang="fr"] .mobile-brand-name,
        html[dir="ltr"] .portal-hero-title, html[lang="en"] .portal-hero-title, html[lang="fr"] .portal-hero-title {
            font-family: 'Cinzel Decorative', 'Marcellus', 'Cinzel', serif !important;
            letter-spacing: 0.5px;
            font-weight: 700;
        }
        html[dir="ltr"] .mobile-brand-name, html[lang="en"] .mobile-brand-name, html[lang="fr"] .mobile-brand-name {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
            font-size: clamp(0.90rem, 3.2vw, 1.02rem) !important;
            letter-spacing: 0.2px;
        }

        /* ── Floating VisionOS Island Navbar ── */
        .top-navbar-sticky {
            position: sticky;
            top: 0;
            z-index: 1000;
            margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 10px 20px;
            pointer-events: none;
            background: rgba(10, 11, 15, 0.55);
            backdrop-filter: blur(28px) saturate(190%);
            -webkit-backdrop-filter: blur(28px) saturate(190%);
            border-bottom: 1px solid var(--border-glass);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        [data-theme="light"] .top-navbar-sticky {
            background: rgba(247, 246, 242, 0.68) !important;
            border-bottom: 1px solid var(--border-glass) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
        }
        .navbar-island, .navbar-spatial-container {
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(12px, 1.8vw, 24px);
            pointer-events: auto;
            box-sizing: border-box;
        }

        /* Brand Discrete Clean Typography (Zero pill border, zero card container) */
        .nav-brand-pill {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 4px 6px;
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            transition: opacity 0.2s var(--ease-apple);
        }
        .nav-brand-pill:hover {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            opacity: 0.85;
        }
        .nav-brand-pill .brand-link { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; color: var(--text-primary); }
        .brand-logo-img { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; border: 1.5px solid rgba(223, 191, 149, 0.45); box-shadow: 0 0 10px rgba(223, 191, 149, 0.25); flex-shrink: 0; transition: transform 0.25s ease; }
        .brand-link:hover .brand-logo-img { transform: scale(1.08); border-color: #DFBF95; }
        .brand-badge { display: inline-block; white-space: nowrap; flex-shrink: 0; font-size: 0.72rem; color: var(--accent-gold); font-weight: 600; letter-spacing: 0.4px; line-height: 1.4; }
        .brand-name {
            display: inline-block;
            white-space: nowrap;
            flex-shrink: 0;
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: 1.45rem;
            font-weight: 700;
            line-height: 1.6;
            padding: 0 2px;
            overflow: visible;
            color: var(--text-primary);
            text-shadow: 0 0 16px rgba(223, 191, 149, 0.45);
            letter-spacing: 0.5px;
        }

        /* Optical icon-text vertical centering */
        .section-title svg,
        .card-title svg,
        .islamic-card-title svg,
        .notif-card-title svg,
        .tool-title svg,
        .dua-title svg {
            display: inline-flex;
            align-self: center;
            vertical-align: middle;
            flex-shrink: 0;
            margin-inline-end: 8px;
        }
        .dropdown-chevron,
        .nav-svg-icon,
        .pill-svg-icon {
            display: inline-flex;
            align-self: center;
            vertical-align: middle;
            flex-shrink: 0;
        }
        

        /* Nav Categories: LIQUID GLASS PILLS & DROPDOWNS */
        .nav-categories {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            overflow: visible;
            max-width: 100%;
            padding: 2px 0;
            flex: 1 1 auto;
        }

        [dir="ltr"] .nav-tab {
            padding: 7px 12px;
            font-size: 0.82rem;
            gap: 5px;
            letter-spacing: -0.01em;
        }
        [dir="ltr"] .brand-name {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
            font-size: 1.18rem !important;
            letter-spacing: -0.02em;
        }
        [dir="ltr"] .brand-badge {
            letter-spacing: 0.8px;
            font-size: 0.68rem;
        }

        .nav-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            box-shadow: var(--glass-specular);
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.22s var(--ease-apple);
            font-family: inherit;
            flex-shrink: 0;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .nav-tab:hover { background: var(--bg-surface-elevated); color: var(--text-primary); border-color: var(--border-glass-active); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); }
        .nav-tab:active { transform: scale(0.96); }
        .nav-tab.active { background: var(--bg-surface-active); color: #FFFFFF; border-color: var(--border-glass-active); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25); font-weight: 600; }
        [data-theme="light"] .nav-tab.active { color: var(--text-primary); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1); }

        /* VisionOS Desktop Nav Dropdowns */
        .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
        .nav-dropdown-trigger { gap: 6px; }
        .nav-dropdown.active .nav-dropdown-trigger { background: var(--bg-surface-active); color: #FFFFFF; border-color: var(--border-glass-active); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25); font-weight: 600; }
        [data-theme="light"] .nav-dropdown.active .nav-dropdown-trigger { color: var(--text-primary); }

        /* ── Global Modal Body Scroll Lock ── */
        body.modal-open, html.modal-open {
            overflow: hidden !important;
            overscroll-behavior: none !important;
        }
        .nav-dropdown-menu {
            position: absolute;
            top: calc(100% + 10px);
            inset-inline-start: 0;
            min-width: 275px;
            background: rgba(12, 16, 24, 0.95);
            backdrop-filter: blur(50px) saturate(220%) brightness(0.85);
            -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(0.85);
            border: none !important;
            border-radius: 18px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px) scale(0.96);
            transition: opacity 0.2s var(--ease-apple), transform 0.2s var(--ease-apple), visibility 0.2s;
            z-index: 2000000;
            pointer-events: none;
        }
        .nav-dropdown-menu::before {
            content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; background: transparent; pointer-events: none;
        }
        @media (hover: hover) and (pointer: fine) {
            .nav-dropdown:hover .nav-dropdown-menu::before { pointer-events: auto; }
            .nav-dropdown:hover .nav-dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
                pointer-events: auto;
            }
            .nav-dropdown:hover .dropdown-chevron { transform: rotate(180deg); }
        }
        .nav-dropdown.open .nav-dropdown-menu::before { pointer-events: auto; }
        .nav-dropdown.open .nav-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .nav-dropdown.open .dropdown-chevron { transform: rotate(180deg); }
        [data-theme="light"] .nav-dropdown-menu {
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(50px) saturate(220%);
            -webkit-backdrop-filter: blur(50px) saturate(220%);
            border: none !important;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
        }
        .nav-dropdown-item {
            width: 100%; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 9px 12px;
            display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); cursor: pointer;
            font-family: inherit; text-align: start; transition: all 0.18s var(--ease-apple);
        }
        .nav-dropdown-item:hover { background: var(--bg-surface-elevated); border-color: var(--border-glass-active); transform: translateX(-2px); }
        [dir="ltr"] .nav-dropdown-item:hover { transform: translateX(2px); }
        .nav-dropdown-item.active { background: var(--bg-surface-active); border-color: var(--border-glass-active); color: #FFFFFF; font-weight: 600; }
        [data-theme="light"] .nav-dropdown-item.active { color: var(--text-primary); }
        .dropdown-item-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 9px;
            background: var(--bg-surface);
            color: var(--accent-gold);
            flex-shrink: 0;
            transition: all 0.2s var(--ease-apple);
        }
        .dropdown-item-icon svg { display: block; width: 16px; height: 16px; margin: auto; }
        .nav-dropdown-item:hover .dropdown-item-icon { background: var(--bg-surface-elevated); transform: scale(1.06); }
        .dropdown-item-text { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
        .dropdown-item-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
        .dropdown-item-desc { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.2; }

        /* Utilities Discrete Pills */
        .nav-utilities { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; direction: ltr; }
        .btn-utility-icon {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            box-shadow: var(--glass-specular);
            color: var(--text-secondary);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.22s var(--ease-apple);
            flex-shrink: 0;
            padding: 0;
        }
        .btn-utility-icon:hover { background: var(--bg-surface-elevated); color: var(--text-primary); border-color: var(--border-glass-active); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
        .btn-utility-icon:active { transform: scale(0.94); }
        .btn-utility-icon svg { display: block; margin: auto; flex-shrink: 0; }
        .nav-svg-icon { stroke: currentColor; display: inline-block; vertical-align: middle; flex-shrink: 0; }

        .btn-utility-action {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            box-shadow: var(--glass-specular);
            color: var(--accent-gold);
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.22s var(--ease-apple);
            flex-shrink: 0;
        }
        .btn-utility-action svg { display: inline-flex; align-self: center; flex-shrink: 0; }
        .btn-utility-action:hover {
            background: var(--bg-surface-elevated);
            border-color: var(--border-glass-active);
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
            transform: translateY(-1px);
        }
        .btn-utility-action:active { transform: scale(0.96); }

        /* VisionOS Language Dropdown Menu */
        .lang-menu-wrapper { position: relative; display: inline-block; }
        .lang-menu-trigger { cursor: pointer; gap: 6px; }
        .dropdown-chevron { transition: transform 0.2s var(--ease-apple); }
        .lang-menu-trigger[aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }
        .lang-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            inset-inline-end: 0;
            min-width: 160px;
            background: rgba(12, 16, 24, 0.95);
            backdrop-filter: blur(50px) saturate(220%) brightness(0.85);
            -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(0.85);
            border: none !important;
            border-radius: 18px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            opacity: 0;
            transform: translateY(-8px) scale(0.96);
            pointer-events: none;
            transition: opacity 0.22s var(--ease-apple), transform 0.22s var(--ease-apple);
            z-index: 2000;
        }
        [data-theme="light"] .lang-dropdown-menu {
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(50px) saturate(220%);
            -webkit-backdrop-filter: blur(50px) saturate(220%);
            border: none !important;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
        }
        .lang-dropdown-menu.active {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .lang-menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 0.82rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.18s var(--ease-apple);
            border: none;
            background: transparent;
            width: 100%;
            text-align: start;
            font-family: inherit;
        }
        .lang-menu-item:hover {
            background: var(--bg-surface-elevated);
            color: var(--text-primary);
        }
        .lang-menu-item.active {
            background: rgba(223, 191, 149, 0.15);
            color: var(--accent-gold);
            font-weight: 600;
        }
        .lang-check-icon { font-size: 0.76rem; }
        .lang-item-name { font-size: 0.84rem; }
        .lang-item-sub { font-size: 0.68rem; color: var(--text-muted); }

        /* Theme Toggle Moon/Sun Animation */
        .theme-toggle-icon-wrap { position: relative; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
        .theme-icon-moon, .theme-icon-sun { position: absolute; top: 0; left: 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; will-change: transform, opacity; }
        .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
        .theme-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
        [data-theme="light"] .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
        [data-theme="light"] .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }

        /* Responsive Navbar Utilities */
        @media (max-width: 1280px) {
            .btn-utility-action span { display: none; }
            .btn-utility-action { padding: 8px 10px; }
        }

        .mobile-nav-drawer {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 10000060 !important;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s var(--ease-apple);
        }
        .mobile-nav-drawer.active {
            opacity: 1;
            pointer-events: auto;
        }
        .mobile-drawer-sheet {
            background: rgba(10, 12, 17, 0.72);
            backdrop-filter: blur(40px) saturate(200%);
            -webkit-backdrop-filter: blur(40px) saturate(200%);
            border-top: 1px solid var(--border-glass);
            border-radius: 32px 32px 0 0;
            padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
            transform: translateY(100%);
            transition: transform 0.35s var(--ease-apple);
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-height: 85vh;
            overflow-y: auto;
        }
        .mobile-nav-drawer.active .mobile-drawer-sheet {
            transform: translateY(0);
        }
        .mobile-drawer-handle {
            width: 36px;
            height: 4px;
            background: var(--border-glass-active);
            border-radius: 2px;
            margin: 0 auto 8px;
        }
        .mobile-drawer-links {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .mobile-drawer-tab {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-radius: 16px;
            background: var(--bg-surface);
            color: var(--text-primary);
            font-size: 0.95rem;
            font-weight: 500;
            text-decoration: none;
            border: 1px solid var(--border-glass);
            cursor: pointer;
            transition: all 0.2s var(--ease-apple);
            font-family: inherit;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .mobile-drawer-tab:active { transform: scale(0.97); }
        .mobile-drawer-tab.active {
            background: var(--bg-surface-active);
            color: var(--accent-gold);
            border-color: var(--border-gold);
            font-weight: 600;
        }

        @media (max-width: 767px) {
            body { padding-bottom: 0; }
        }
        

        /* ── Scroll Progress Indicator (Golden Line) ── */
        .scroll-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-gold-dark, #8C531B), var(--accent-gold, #DFBF95), var(--accent-gold-light, #F7E5D0));
            z-index: 100000;
            transform-origin: 100% 50%;
            transform: scaleX(0);
            pointer-events: none;
            box-shadow: 0 0 10px rgba(223, 191, 149, 0.7);
            will-change: transform;
        }
        [dir="ltr"] .scroll-progress-bar, [lang="en"] .scroll-progress-bar, [lang="fr"] .scroll-progress-bar {
            transform-origin: 0% 50%;
        }
        @media (max-width: 768px) {
            .scroll-progress-bar {
                display: block !important;
                top: 0 !important;
                height: 2.5px !important;
                z-index: 100000 !important;
            }
        }
        @media (prefers-reduced-motion: no-preference) {
            @supports (animation-timeline: scroll()) {
                .scroll-progress-bar {
                    animation: scrollProgressGrow auto linear;
                    animation-timeline: scroll();
                }
            }
        }
        @keyframes scrollProgressGrow {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        /* ── Platform Main Container (95% fluid, max 1780px) ── */
        .main-container {
            width: 95%;
            max-width: 1780px;
            margin: 0 auto;
            padding: 16px 0 clamp(28px, 4vw, 54px);
            position: relative;
            z-index: 1;
            box-sizing: border-box;
        }

        /* Tablet & Compact Laptop Mode Layout Adjustments (768px - 1240px) */
        @media (min-width: 768px) and (max-width: 1240px) {
            .top-navbar-sticky { top: 12px; width: 96%; padding: 8px 14px; }
            .main-container { padding-top: 16px; }
            .navbar-island {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr auto;
                row-gap: 8px;
            }
            .nav-brand-pill { grid-column: 1; grid-row: 1; justify-self: start; }
            .nav-utilities { grid-column: 2; grid-row: 1; justify-self: end; }
            .nav-categories {
                grid-column: 1 / -1;
                grid-row: 2;
                width: 100%;
                overflow-x: auto;
                padding-bottom: 2px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                justify-content: flex-start;
            }
            .nav-categories::-webkit-scrollbar { display: none; }
        }

        /* ── Page Viewport Architecture (Discrete Dedicated Pages, Not One Big Page) ── */
        .section-pane {
            display: none !important;
            opacity: 0;
            margin-bottom: clamp(32px, 5vw, 64px);
            position: relative;
            width: 100%;
            box-sizing: border-box;
            padding: 0;
        }
        .section-pane.active {
            display: block !important;
            opacity: 1;
            animation: smoothSectionFade 0.25s ease-out;
        }
        @keyframes smoothSectionFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .section-pane.active { animation: none !important; }
        }

        .section-pane {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            content-visibility: auto;
            contain-intrinsic-size: 1px 800px;
        }
        .section-pane.active, #pane-home {
            content-visibility: visible;
        }
        #pane-duas, #pane-videos, #pane-prayers, #pane-guides, #pane-quran, #pane-biography {
            max-width: 1240px;
            width: 100%;
            margin: 0 auto;
        }
        #pane-quran {
            padding-top: clamp(16px, 2.5vw, 36px);
            scroll-margin-top: 96px;
        }
        #pane-biography {
            scroll-margin-top: 80px;
        }
        .section-header-editorial { max-width: 960px; margin: 0 auto 36px; text-align: center; }

        /* ── Memorial Hero (Clean, Zero Glow, Zero Text Shadow) ── */
        .memorial-hero-wrap {
            text-align: center;
            padding: clamp(56px, 8vw, 96px) 20px clamp(40px, 5vw, 64px);
            position: relative;
        }
        .hero-basmalah {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: clamp(1.3rem, 2.4vw, 1.8rem);
            color: var(--accent-gold);
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }
        .hero-dedication-label {
            font-size: clamp(0.85rem, 1.4vw, 1rem);
            color: var(--text-secondary);
            margin-bottom: clamp(24px, 3.5vw, 36px) !important;
            font-weight: 500;
            letter-spacing: 0.5px;
            line-height: 1.8 !important;
        }
        .hero-memorial-name {
            font-family: 'Aref Ruqaa', 'Amiri', serif !important;
            font-size: clamp(2.8rem, 6.8vw, 4.8rem) !important;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 1.65 !important;
            margin-top: 8px !important;
            margin-bottom: clamp(20px, 3vw, 32px) !important;
            padding: 12px 24px !important;
            overflow: visible !important;
            letter-spacing: 0.5px;
            display: inline-block;
            max-width: 100%;
            word-wrap: break-word;
            text-shadow: 0 0 16px rgba(223, 191, 149, 0.45), 0 0 32px rgba(223, 191, 149, 0.25);
        }
        [data-theme="light"] .hero-memorial-name {
            color: var(--text-primary);
            text-shadow: none !important;
        }
        html[dir="ltr"] .hero-memorial-name,
        html[lang="en"] .hero-memorial-name,
        html[lang="fr"] .hero-memorial-name {
            font-family: 'Cinzel Decorative', 'Marcellus', 'Cinzel', serif !important;
            letter-spacing: 0.5px;
            font-weight: 700;
        }
        .hero-honorific {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: clamp(1.15rem, 2.2vw, 1.5rem);
            color: var(--accent-gold-light);
            margin-top: 8px;
            margin-bottom: 30px;
            font-weight: 500;
            line-height: 1.8;
            overflow: visible;
        }
        .hero-ayah-pill {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-pill);
            padding: 16px clamp(24px, 4.5vw, 44px);
            display: inline-block;
            max-width: 860px;
            margin: 0 auto;
            transition: border-color 0.25s ease;
        }
        .hero-ayah-pill:hover { border-color: var(--border-glass-active); }
        .hero-ayah-text {
            font-family: 'Amiri', serif;
            font-size: clamp(1.15rem, 2.2vw, 1.48rem);
            color: var(--text-primary);
            line-height: 2;
        }
        .hero-ayah-ref {
            display: block;
            font-size: 0.76rem;
            color: var(--text-muted);
            font-family: 'Noto Kufi Arabic', sans-serif;
            margin-top: 6px;
        }

        /* ── Content Columns (Sebha + Milestones 2-Column Grid) ── */
        .content-columns {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
            gap: 28px;
            align-items: stretch;
            margin-bottom: 44px;
        }
        @media (min-width: 768px) and (max-width: 1024px) {
            .content-columns { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 36px; }
        }
        @media (max-width: 767px) {
            .content-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
        }

        /* ── Universal VisionOS Modal System ── */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            z-index: 10000100 !important; display: none; align-items: center; justify-content: center; padding: 20px;
            pointer-events: none !important;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .modal-overlay.active { display: flex !important; pointer-events: auto !important; animation: modalFadeIn 0.25s var(--ease-apple) forwards; }
        button, a, select, input, .nav-item, .nav-dropdown-item, .btn-action { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
        @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

        .modal-card {
            background: rgba(18, 22, 30, 0.94);
            backdrop-filter: blur(28px) saturate(190%);
            -webkit-backdrop-filter: blur(28px) saturate(190%);
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            padding: 24px;
            max-width: 520px;
            width: 100%;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            color: var(--text-primary);
            position: relative;
            animation: modalSlideUp 0.3s var(--ease-apple) forwards;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        }
        [data-theme="light"] .modal-card {
            background: rgba(255, 255, 255, 0.96);
            border-color: var(--border-glass);
            color: #0F172A;
            box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12);
        }
        @keyframes modalSlideUp { from { transform: translateY(16px) scale(0.98); } to { transform: translateY(0) scale(1); } }
        .modal-title { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: 0.2px; }
        .modal-subtitle { font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.55; }
        .modal-step { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.86rem; color: var(--text-primary); text-align: start; }
        .modal-step-badge { width: 26px; height: 26px; border-radius: 6px; background: var(--bg-surface-elevated); border: 1px solid var(--border-glass); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; flex-shrink: 0; }
        
        /* Native PWA Modal Layout & Segments */
        .pwa-modal-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
        .pwa-install-app-icon { width: 54px; height: 54px; border-radius: 13px; border: 1px solid var(--border-glass); object-fit: contain; flex-shrink: 0; background: var(--bg-surface-elevated); }
        .pwa-modal-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .pwa-modal-brand { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
        .pwa-title { font-size: 1.2rem; margin: 0; }
        .pwa-subtitle { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }
        .pwa-device-segmented-control { display: flex; background: var(--bg-surface-elevated); border: 1px solid var(--border-glass); border-radius: 10px; padding: 3px; gap: 3px; margin: 12px 0 16px; }
        .pwa-device-tab { flex: 1; background: transparent; border: none; color: var(--text-secondary); padding: 7px 10px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: inherit; text-align: center; }
        .pwa-device-tab.active { background: var(--bg-surface-active); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
        [data-theme="light"] .pwa-device-tab.active { background: #FFFFFF; color: #0F172A; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
        .pwa-device-pane { display: none; }
        .pwa-device-pane.active { display: flex; flex-direction: column; gap: 10px; animation: modalFadeIn 0.2s ease; }
        .pwa-step-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.84rem; color: var(--text-primary); line-height: 1.5; }
        .pwa-step-badge { width: 24px; height: 24px; border-radius: 6px; background: var(--bg-surface-elevated); border: 1px solid var(--border-glass); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
        .pwa-step-text { min-width: 0; }
        .step-key-badge { display: inline-block; background: var(--bg-surface-elevated); border: 1px solid var(--border-glass); border-radius: 4px; padding: 0 5px; font-size: 0.75rem; font-weight: 700; }
        .pwa-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
        .btn-close-modal { width: 100%; background: var(--bg-surface-elevated); border: 1px solid var(--border-glass); color: var(--text-primary); padding: 11px 16px; border-radius: 12px; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s ease; text-align: center; }
        .btn-close-modal:hover { background: var(--bg-surface-hover); border-color: var(--border-glass-active); }
        .btn-pwa-direct { flex: 1; background: var(--text-primary); color: var(--bg-base); border: none; padding: 11px 16px; border-radius: 12px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s ease; text-align: center; }
        .fatiha-quran-box { font-family: 'Amiri', serif; font-size: 1.3rem; line-height: 2.3; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-glass); border-radius: 18px; padding: 18px; margin: 14px 0 18px; text-align: justify; }

        /* Reverent Al-Fatiha Dedication Button */
        .btn-recite-fatiha {
            width: 100%;
            min-height: 52px;
            padding: 14px 24px;
            border-radius: 999px;
            background: linear-gradient(135deg, #DFBF95 0%, #C5A880 100%);
            color: #06070A !important;
            font-size: 1.02rem;
            font-weight: 700;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            box-shadow: 0 6px 24px rgba(223, 191, 149, 0.35);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            touch-action: manipulation;
            font-family: inherit;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        .btn-recite-fatiha:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(223, 191, 149, 0.5);
            filter: brightness(1.04);
        }
        .btn-recite-fatiha:active {
            transform: scale(0.98);
        }
        .fatiha-count-badge {
            background: rgba(6, 8, 12, 0.22);
            color: #06070A;
            padding: 2px 10px;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
            margin-inline-start: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        [data-theme="light"] .btn-recite-fatiha {
            background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
            color: #FFFFFF !important;
            box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35);
        }
        [data-theme="light"] .fatiha-count-badge {
            background: rgba(255, 255, 255, 0.3);
            color: #FFFFFF;
        }

        /* Multilingual Language-Matching Display Rules */
        .txt-ar { display: inline !important; }
        .txt-en, .txt-fr { display: none !important; }
        strong.txt-ar { display: inline-block !important; }
        strong.txt-en, strong.txt-fr { display: none !important; }

        html[lang="en"] .txt-ar, html[lang="en"] .txt-fr { display: none !important; }
        html[lang="en"] .txt-en { display: inline !important; }
        html[lang="en"] strong.txt-ar, html[lang="en"] strong.txt-fr { display: none !important; }
        html[lang="en"] strong.txt-en { display: inline-block !important; }

        html[lang="fr"] .txt-ar, html[lang="fr"] .txt-en { display: none !important; }
        html[lang="fr"] .txt-fr { display: inline !important; }
        html[lang="fr"] strong.txt-ar, html[lang="fr"] strong.txt-en { display: none !important; }
        html[lang="fr"] strong.txt-fr { display: inline-block !important; }

        /* LTR Overrides */
        [dir="ltr"] body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        [dir="ltr"] .modal-step,
        [dir="ltr"] .pwa-step-row,
        [dir="ltr"] .footer-verse-ref {
            text-align: left;
        }
        
        

        /* Mobile Dedicated Top Bar & Tabs Strip (< 768px) */
        .mobile-header-bar, .mobile-tabs-strip, .mobile-nav-drawer {
            display: none;
        }

        @media (max-width: 768px) {
            .navbar-island { display: none !important; }
            .top-navbar-sticky {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                max-width: 100vw !important;
                z-index: 99999 !important;
                -webkit-transform: translate3d(0, 0, 0) !important;
                transform: translate3d(0, 0, 0) !important;
                -webkit-backface-visibility: hidden !important;
                backface-visibility: hidden !important;
                will-change: transform;
                transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
                touch-action: pan-y !important;
                box-sizing: border-box;
                padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 6px 0 !important;
                background: rgba(6, 7, 10, 0.78);
                backdrop-filter: blur(28px) saturate(180%);
                -webkit-backdrop-filter: blur(28px) saturate(180%);
                border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
                pointer-events: auto;
                display: flex !important;
                flex-direction: column;
                gap: 5px;
            }
            .main-container {
                padding-top: calc(env(safe-area-inset-top, 0px) + 98px) !important;
            }
            @media all and (display-mode: standalone) {
                .top-navbar-sticky {
                    padding-top: max(48px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
                }
                .main-container {
                    padding-top: max(140px, calc(env(safe-area-inset-top, 0px) + 104px)) !important;
                }
            }
            @supports (-webkit-touch-callout: none) {
                .top-navbar-sticky {
                    padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
                }
            }
            [data-theme="light"] .top-navbar-sticky {
                background: rgba(247, 246, 242, 0.85) !important;
                border-bottom: 1px solid var(--border-glass) !important;
                box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
            }

            .mobile-header-bar {
                display: flex !important;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                min-width: 0;
                box-sizing: border-box;
                padding: 0 max(16px, env(safe-area-inset-right, 16px)) 0 max(16px, env(safe-area-inset-left, 16px)) !important;
                gap: 8px;
            }

            .mobile-brand-link {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                text-decoration: none;
                color: inherit;
                flex: 1 1 auto;
                min-width: 0;
                overflow: visible !important;
                padding: 1px 0;
                background: none !important;
                border: none !important;
                box-shadow: none !important;
                outline: none !important;
                -webkit-tap-highlight-color: transparent;
            }
            .mobile-brand-text {
                display: inline-flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 8px !important;
                min-width: 0;
                overflow: visible !important;
                white-space: nowrap !important;
                background: none !important;
                border: none !important;
                box-shadow: none !important;
            }
            [dir="rtl"] .mobile-brand-text {
                align-items: center;
            }
            .mobile-brand-logo-img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                object-fit: contain;
                border: 1.2px solid rgba(223, 191, 149, 0.4);
                box-shadow: 0 0 8px rgba(223, 191, 149, 0.25);
                flex-shrink: 0;
            }
            .drawer-brand-logo-img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                object-fit: contain;
                border: 1.5px solid rgba(223, 191, 149, 0.45);
                box-shadow: 0 0 10px rgba(223, 191, 149, 0.25);
                flex-shrink: 0;
            }
            /* Clean ongoing charity label on mobile header - exactly like desktop, zero pill box */
            .mobile-brand-sub, .mobile-brand-badge {
                display: inline-block !important;
                padding: 0 !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                border-radius: 0 !important;
                font-size: 0.72rem !important;
                font-weight: 600 !important;
                color: var(--accent-gold, #DFBF95) !important;
                letter-spacing: 0.4px;
                line-height: 1.4 !important;
                margin-bottom: 0 !important;
                white-space: nowrap !important;
                flex-shrink: 0;
                text-shadow: 0 0 10px rgba(223, 191, 149, 0.35);
            }
            [data-theme="light"] .mobile-brand-sub, [data-theme="light"] .mobile-brand-badge {
                background: transparent !important;
                border: none !important;
                color: var(--accent-gold-dark, #8C531B) !important;
                text-shadow: none;
            }
            html[dir="ltr"] .mobile-brand-sub, html[lang="en"] .mobile-brand-sub, html[lang="fr"] .mobile-brand-sub {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
                font-size: 0.65rem !important;
                letter-spacing: 0.6px;
                text-transform: uppercase;
            }
            .mobile-brand-name {
                font-family: 'Aref Ruqaa', 'Amiri', serif;
                font-size: clamp(1.05rem, 3.8vw, 1.25rem);
                font-weight: 700;
                color: var(--text-primary, #FFFFFF);
                line-height: 1.6 !important;
                padding: 0 2px !important;
                text-shadow: 0 0 16px rgba(223, 191, 149, 0.45);
                letter-spacing: 0.5px;
                white-space: nowrap !important;
                overflow: visible !important;
                text-overflow: clip !important;
                display: inline-block;
                flex-shrink: 0;
            }
            [data-theme="light"] .mobile-brand-name { color: #0F172A; text-shadow: none; }

            html[dir="ltr"] .mobile-brand-name, html[lang="en"] .mobile-brand-name, html[lang="fr"] .mobile-brand-name {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
                font-size: clamp(0.92rem, 3.4vw, 1.05rem) !important;
                letter-spacing: 0.2px;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                display: block;
                max-width: 100%;
            }

            .mobile-header-actions {
                display: flex !important;
                align-items: center;
                gap: 5px;
                flex-shrink: 0 !important;
                min-width: max-content !important;
                margin-inline-start: auto;
            }

            @media (max-width: 380px) {
                .btn-mobile-act {
                    width: 32px !important;
                    height: 32px !important;
                    min-width: 32px !important;
                    min-height: 32px !important;
                }
                .mobile-header-actions {
                    gap: 3px !important;
                }
                .mobile-brand-link {
                    max-width: calc(100% - 142px) !important;
                }
            }

            .btn-mobile-act {
                width: 34px;
                height: 34px;
                min-width: 34px;
                min-height: 34px;
                flex-shrink: 0 !important;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.07);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: var(--text-secondary, rgba(255, 255, 255, 0.75));
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                padding: 0;
            }
            .btn-mobile-act:hover {
                background: rgba(255, 255, 255, 0.14);
                color: #DFBF95;
                border-color: rgba(223, 191, 149, 0.3);
            }
            .btn-mobile-act:active {
                transform: scale(0.92);
                background: rgba(255, 255, 255, 0.16);
            }
            .btn-mobile-notif {
                color: #DFBF95;
            }
            .btn-install-mobile {
                color: var(--accent-gold, #DFBF95) !important;
                border-color: rgba(223, 191, 149, 0.3) !important;
            }
            [data-theme="light"] .btn-install-mobile {
                color: #9C743D !important;
                border-color: rgba(156, 116, 61, 0.3) !important;
            }
            .btn-hamburger {
                background: linear-gradient(135deg, #F7E5D0 0%, #DFBF95 100%);
                color: #06070A;
                border-color: #DFBF95;
                box-shadow: 0 2px 10px rgba(223, 191, 149, 0.3);
            }

            [data-theme="light"] .btn-mobile-act {
                background: rgba(0, 0, 0, 0.05) !important;
                border: 1px solid rgba(0, 0, 0, 0.1) !important;
                color: #1E293B !important;
            }
            [data-theme="light"] .btn-mobile-act:hover {
                background: rgba(156, 116, 61, 0.14) !important;
                color: #9C743D !important;
                border-color: rgba(156, 116, 61, 0.35) !important;
            }
            [data-theme="light"] .btn-mobile-act:active {
                background: rgba(156, 116, 61, 0.22) !important;
            }
            [data-theme="light"] .btn-mobile-notif {
                color: #9C743D !important;
            }
            [data-theme="light"] .btn-hamburger {
                background: linear-gradient(135deg, #DFBF95 0%, #BA8E4E 100%) !important;
                color: #06070A !important;
                border-color: #BA8E4E !important;
                box-shadow: 0 2px 10px rgba(156, 116, 61, 0.25) !important;
            }

            /* Horizontal Category Scroll Strip - Full Bleed Edge-to-Edge Across Whole Header with Safe 16px Edge Padding */
            .mobile-tabs-strip {
                display: block !important;
                white-space: nowrap !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                width: 100% !important;
                max-width: 100vw !important;
                box-sizing: border-box !important;
                margin: 0 !important;
                padding: 4px 16px 8px 16px !important;
                scroll-padding-inline: 16px !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
                scrollbar-color: transparent transparent !important;
                overscroll-behavior-x: contain;
                font-size: 0;
            }
            .mobile-tabs-strip::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

            /* Eliminates 300ms mobile touch delay on iOS/Android PWA standalone mode */
            .btn-mobile-act, .mobile-strip-tab, .mobile-drawer-item, .btn-footer-back-to-top {
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
                user-select: none;
                -webkit-user-select: none;
            }

            .mobile-strip-tab {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
                background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.06));
                border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
                border-radius: 9999px;
                color: var(--text-secondary, rgba(255, 255, 255, 0.75));
                font-size: 0.82rem;
                font-weight: 600;
                padding: 6px 14px;
                margin-inline-end: 8px;
                white-space: nowrap;
                cursor: pointer;
                font-family: 'Noto Kufi Arabic', -apple-system, sans-serif;
                transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
                flex-shrink: 0;
            }
            .mobile-strip-tab:last-child {
                margin-inline-end: 0;
            }
            .mobile-strip-tab:active {
                transform: scale(0.95);
            }
            .mobile-strip-tab.active {
                background: var(--accent-gold, #D4AF37);
                color: #06070A;
                border-color: var(--accent-gold, #D4AF37);
            }

            [data-theme="light"] .mobile-strip-tab {
                background: rgba(0, 0, 0, 0.04) !important;
                border: 1px solid rgba(0, 0, 0, 0.09) !important;
                color: #475569 !important;
            }
            [data-theme="light"] .mobile-strip-tab:hover {
                background: rgba(156, 116, 61, 0.12) !important;
                color: #9C743D !important;
            }
            [data-theme="light"] .mobile-strip-tab.active {
                background: #9C743D !important;
                color: #FFFFFF !important;
                border-color: #9C743D !important;
            }
        }

        /* ── Full Mobile Menu Drawer (100dvh Full Screen & Safe-Area Notch Clearance) ── */
        .mobile-nav-drawer {
            position: fixed;
            inset: 0;
            z-index: 10000060 !important;
            display: none;
            pointer-events: none !important;
        }
        .mobile-nav-drawer.active {
            display: block !important;
            pointer-events: auto !important;
        }
        .mobile-drawer-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .mobile-drawer-sheet {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100dvh;
            max-height: 100dvh;
            background: rgba(10, 12, 17, 0.72);
            backdrop-filter: blur(40px) saturate(200%);
            -webkit-backdrop-filter: blur(40px) saturate(200%);
            border: none;
            border-radius: 0;
            padding-top: max(48px, calc(env(safe-area-inset-top, 0px) + 16px));
            padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
            padding-left: max(18px, calc(env(safe-area-inset-left, 0px) + 16px));
            padding-right: max(18px, calc(env(safe-area-inset-right, 0px) + 16px));
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
            overflow: hidden;
            animation: drawerFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 10;
            box-sizing: border-box;
        }
        @media all and (display-mode: standalone) {
            .mobile-drawer-sheet {
                padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 20px)) !important;
            }
        }
        [data-theme="light"] .mobile-drawer-sheet {
            background: rgba(250, 248, 245, 0.75);
            backdrop-filter: blur(40px) saturate(200%);
            -webkit-backdrop-filter: blur(40px) saturate(200%);
        }
        @keyframes drawerFadeIn {
            from { transform: translateY(-16px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .mobile-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
            flex-shrink: 0;
        }
        .drawer-title-group { display: flex; flex-direction: column; gap: 2px; }
        .drawer-title { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.45rem; font-weight: 700; color: var(--text-primary, #FFFFFF); }
        .drawer-subtitle { font-size: 0.8rem; color: var(--accent-gold, #D4AF37); }
        .drawer-close-btn {
            width: 38px; height: 38px; border-radius: 50%;
            background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.08));
            border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12));
            color: var(--text-primary, #FFFFFF);
            display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .drawer-close-btn:active {
            transform: scale(0.92);
            background: rgba(255, 255, 255, 0.16);
        }
        .mobile-drawer-nav {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 8px;
        }
        .mobile-drawer-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.06));
            border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
            color: var(--text-primary, #FFFFFF);
            font-size: 0.92rem;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Noto Kufi Arabic', -apple-system, sans-serif;
            text-align: start;
            transition: all 0.2s ease;
        }
        .mobile-drawer-item.active {
            background: rgba(212, 175, 55, 0.15);
            border-color: var(--border-gold, rgba(212, 175, 55, 0.35));
            color: var(--accent-gold, #D4AF37);
        }
        .drawer-item-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }
        .drawer-item-icon svg {
            display: block;
            margin: auto;
            flex-shrink: 0;
        }
        .mobile-drawer-footer {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
        }
        .drawer-lang-selector {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .drawer-footer-label { font-size: 0.82rem; color: var(--text-secondary, rgba(255, 255, 255, 0.65)); }
        .drawer-lang-pills { display: flex; gap: 6px; }
        .drawer-lang-btn {
            padding: 5px 12px;
            border-radius: 9999px;
            background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.06));
            border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
            color: var(--text-secondary, rgba(255, 255, 255, 0.65));
            font-size: 0.78rem;
            cursor: pointer;
        }
        .drawer-lang-btn.active {
            background: var(--accent-gold, #D4AF37);
            color: #06070A;
            border-color: var(--accent-gold, #D4AF37);
            font-weight: 700;
        }
        .drawer-util-actions { display: flex; gap: 10px; }
        .drawer-act-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px;
            border-radius: 12px;
            background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.06));
            border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
            color: var(--text-primary, #FFFFFF);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
        }

        /* Universal: Remove regular vertical & horizontal scrollbars on ALL devices */
        html, body, *, *::before, *::after {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            scrollbar-color: transparent transparent !important;
        }
        ::-webkit-scrollbar,
        *::-webkit-scrollbar,
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
            -webkit-appearance: none !important;
        }
        ::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-track, *::-webkit-scrollbar-track, html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-corner, *::-webkit-scrollbar-corner, html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
            display: none !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-button, *::-webkit-scrollbar-button, html::-webkit-scrollbar-button, body::-webkit-scrollbar-button {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }
        

        /* ── Islamic Hub Shared Glass Containers ── */
        .islamic-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin: 24px 0 36px; }
        .prayer-hero-container { width: 100%; margin: 24px 0 28px; }
        .qibla-hijri-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
        @media (min-width: 992px) {
            .qibla-hijri-grid { grid-template-columns: 1fr 1fr; }
            .prayer-timeline-grid { grid-template-columns: repeat(6, 1fr) !important; }
        }
        @media (min-width: 640px) and (max-width: 991px) {
            .prayer-timeline-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 639px) {
            .prayer-timeline-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }

        .islamic-card {
            background: rgba(18, 20, 26, 0.72);
            border: 1px solid rgba(223, 191, 149, 0.2);
            border-radius: 24px;
            padding: 24px;
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            transition: background 0.25s ease, box-shadow 0.25s ease;
        }
        @media (hover: hover) {
            .islamic-card:hover {
                background: rgba(16, 20, 29, 0.72);
                box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            }
        }

        .islamic-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .islamic-card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--gold-light, #F7E5D0);
            line-height: 1.2;
        }
        .islamic-card-title svg {
            display: inline-flex;
            align-self: center;
            flex-shrink: 0;
        }

        /* ── Prayer Times & Athan Section ── */
        .prayer-countdown-banner {
            background: var(--bg-surface, rgba(18, 20, 26, 0.75));
            backdrop-filter: var(--glass-blur, blur(24px));
            -webkit-backdrop-filter: var(--glass-blur, blur(24px));
            border: 1px solid var(--border-glass, rgba(223, 191, 149, 0.22));
            box-shadow: var(--glass-specular, inset 0 1px 0 rgba(255, 255, 255, 0.1));
            border-radius: 20px;
            padding: 22px;
            text-align: center;
            margin-bottom: 22px;
        }
        .prayer-countdown-time {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--accent-gold, #DFBF95);
            letter-spacing: 2px;
            margin: 6px 0;
            font-family: 'Plus Jakarta Sans', monospace;
        }

        .prayer-timeline-grid { display: grid; gap: 12px; margin-bottom: 22px; }
        .prayer-pill { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 14px 10px; text-align: center; transition: all 0.25s ease; }
        .prayer-pill.active { background: linear-gradient(135deg, rgba(223, 191, 149, 0.2) 0%, rgba(179, 142, 90, 0.12) 100%); border-color: #DFBF95; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18); transform: scale(1.02); }
        .prayer-pill.prayer-passed { background: rgba(16, 185, 129, 0.07); border-color: rgba(16, 185, 129, 0.38); }
        .prayer-pill.prayer-passed .prayer-name { color: #10B981; }
        .prayer-pill.prayer-passed .prayer-time { color: #A7F3D0; }
        .prayer-name { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary, #9B9CA6); margin-bottom: 4px; }
        .prayer-time { font-size: 1.15rem; font-weight: 700; color: #FFFFFF; }

        .athan-reciters-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 16px;
            padding: 12px 16px;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .athan-play-btn {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(223, 191, 149, 0.25);
            color: var(--text-primary, #FFFFFF);
            border-radius: 12px;
            padding: 8px 16px;
            font-weight: 600;
            font-size: 0.88rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s var(--ease-apple);
        }
        .athan-play-btn:hover {
            background: rgba(223, 191, 149, 0.18);
            border-color: #DFBF95;
            color: #DFBF95;
            transform: translateY(-1px);
        }
        .athan-play-btn:active { transform: scale(0.96); }

        /* ── Precision Qibla Compass Dial (Astronomical Instrument) ── */
        .qibla-compass-wrap {
            position: relative;
            width: 270px;
            height: 270px;
            margin: 24px auto;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(20, 24, 32, 0.95) 0%, rgba(8, 10, 14, 0.98) 75%);
            border: 2px solid rgba(223, 191, 149, 0.35);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
        }
        .qibla-dial-rim {
            position: absolute;
            inset: 6px;
            border-radius: 50%;
            border: 1px dashed rgba(223, 191, 149, 0.2);
            pointer-events: none;
        }
        .qibla-cardinal {
            position: absolute;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--accent-gold, #DFBF95);
            pointer-events: none;
            letter-spacing: 0.5px;
        }
        .qibla-cardinal-n { top: 12px; left: 50%; transform: translateX(-50%); color: #F7E5D0; font-weight: 800; }
        .qibla-cardinal-s { bottom: 12px; left: 50%; transform: translateX(-50%); color: var(--text-secondary); }
        .qibla-cardinal-e { right: 14px; top: 50%; transform: translateY(-50%); }
        .qibla-cardinal-w { left: 14px; top: 50%; transform: translateY(-50%); }

        .qibla-needle {
            position: absolute;
            width: 6px;
            height: 210px;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: center center;
            z-index: 4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
        .qibla-needle-north {
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 92px solid #DFBF95;
            filter: drop-shadow(0 0 6px rgba(223, 191, 149, 0.4));
        }
        .qibla-needle-south {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 70px solid rgba(255, 255, 255, 0.25);
        }
        .qibla-center-hub {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #F7E5D0 0%, #DFBF95 50%, #9B7846 100%);
            border: 2px solid #08090D;
            box-shadow: 0 0 12px rgba(223, 191, 149, 0.5);
            z-index: 6;
            position: absolute;
        }
        .qibla-deg-badge {
            text-align: center;
            margin-top: 14px;
            font-size: 1.15rem;
            font-weight: 700;
            color: #DFBF95;
        }

        /* ── 99 Names of Allah ── */
        .names-filter-box {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .names-input {
            flex: 1;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 14px;
            padding: 12px 16px;
            color: #FFFFFF;
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.2s ease;
        }
        .names-input:focus { border-color: #DFBF95; }
        .names-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
            max-height: 480px;
            overflow-y: auto;
            padding: 6px;
        }
        .name-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(223, 191, 149, 0.18);
            border-radius: 16px;
            padding: 14px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        @media (hover: hover) {
            .name-card:hover {
                background: rgba(223, 191, 149, 0.12);
                border-color: #DFBF95;
                transform: translateY(-2px);
            }
        }
        .name-arabic {
            font-size: 1.25rem;
            font-weight: 800;
            color: #F7E5D0;
            margin-bottom: 4px;
            font-family: 'Noto Kufi Arabic', serif;
        }
        .name-meaning {
            font-size: 0.76rem;
            color: var(--text-secondary, #9B9CA6);
            line-height: 1.3;
        }

        /* ── Islamic Guides (Umrah, Hajj, Women Fiqh) ── */
        .guide-steps-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 18px;
        }
        .guide-step-card {
            background: var(--bg-surface, rgba(18, 20, 26, 0.75));
            border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
            border-radius: 20px;
            padding: 20px 22px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            transition: all 0.25s var(--ease-apple);
        }
        .guide-step-card:hover {
            border-color: rgba(223, 191, 149, 0.3);
            transform: translateY(-2px);
        }
        .guide-step-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .guide-step-num {
            background: rgba(223, 191, 149, 0.14);
            border: 1px solid rgba(223, 191, 149, 0.25);
            color: var(--accent-gold, #DFBF95);
            font-weight: 700;
            font-size: 0.78rem;
            padding: 3px 12px;
            border-radius: 9999px;
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
        .guide-step-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: #FFFFFF;
        }
        .guide-step-desc {
            font-size: 0.92rem;
            color: var(--text-secondary, #B8BAC5);
            line-height: 1.7;
        }
        .guide-dua-box {
            background: rgba(223, 191, 149, 0.07);
            border: 1px solid rgba(223, 191, 149, 0.22);
            border-radius: 14px;
            padding: 14px 16px;
            margin-top: 12px;
            font-size: 1.12rem;
            color: #F7E5D0;
            line-height: 1.8;
            font-family: 'Aref Ruqaa', 'Amiri', serif;
        }

        /* ── Video Sanctuary YouTube Embed ── */
        #memorialVideosCard {
            max-width: 1440px;
            margin: 0 auto 40px auto;
            width: 100%;
            box-sizing: border-box;
        }
        .btn-video-tab {
            padding: 8px 18px;
            border-radius: 999px;
            border: none;
            background: rgba(255, 255, 255, 0.05);
            color: #DFBF95;
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .btn-video-tab:hover,
        .btn-video-tab.active {
            background: linear-gradient(135deg, #DFBF95, #B38E5A) !important;
            color: #0A0C10 !important;
            box-shadow: 0 4px 15px rgba(223, 191, 149, 0.25);
        }
        .videos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
            margin-top: 10px;
            justify-content: center;
        }
        .video-card {
            background: rgba(255, 255, 255, 0.035);
            border: none;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        @media (hover: hover) {
            .video-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
            }
        }
        .video-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            background: #000;
        }
        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        .video-meta {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .video-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: 1.12rem;
            font-weight: 700;
            color: #F7E5D0;
            line-height: 1.5;
        }
        .video-reciter {
            font-size: 0.82rem;
            color: var(--text-secondary, #9B9CA6);
        }
        .video-yt-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.76rem;
            color: var(--accent-gold, #DFBF95);
            text-decoration: none;
            margin-top: 4px;
            align-self: flex-start;
            padding: 3px 10px;
            border-radius: 999px;
            background: rgba(223, 191, 149, 0.08);
            border: 1px solid rgba(223, 191, 149, 0.2);
            transition: all 0.2s ease;
        }
        .video-yt-link:hover {
            background: rgba(223, 191, 149, 0.18);
            color: #FFFFFF;
        }

        /* ── Light Mode System for Islamic Modules ── */
        [data-theme="light"] .islamic-card { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.04), inset 0 1px 0 #FFF !important; }
        [data-theme="light"] .islamic-card-header { border-bottom-color: rgba(0,0,0,0.06) !important; }
        [data-theme="light"] .islamic-card-title { color: #0F172A !important; }
        [data-theme="light"] .prayer-pill { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
        [data-theme="light"] .prayer-pill.active { background: rgba(223,191,149,0.22) !important; border-color: #D97706 !important; }
        [data-theme="light"] .prayer-pill.prayer-passed { background: rgba(16, 185, 129, 0.09) !important; border-color: rgba(16, 185, 129, 0.45) !important; }
        [data-theme="light"] .prayer-pill.prayer-passed .prayer-name { color: #047857 !important; }
        [data-theme="light"] .prayer-pill.prayer-passed .prayer-time { color: #065F46 !important; }
        [data-theme="light"] .prayer-name { color: #64748B !important; }
        [data-theme="light"] .prayer-time { color: #0F172A !important; }
        [data-theme="light"] .qibla-deg-badge { color: #B45309 !important; }
        [data-theme="light"] .qibla-cardinal { color: #64748B !important; }
        [data-theme="light"] .qibla-desktop-note { background: #FEF3C7 !important; border-color: #FDE68A !important; color: #92400E !important; }
        [data-theme="light"] .athan-play-btn { background: #F1F5F9 !important; color: #334155 !important; border-color: #CBD5E1 !important; }
        [data-theme="light"] .athan-play-btn:hover { background: #E2E8F0 !important; color: #0F172A !important; }
        [data-theme="light"] .names-input { background: #FFFFFF !important; border-color: #CBD5E1 !important; color: #0F172A !important; }
        [data-theme="light"] .name-card { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
        [data-theme="light"] .name-arabic { color: #0F172A !important; }
        [data-theme="light"] .name-meaning { color: #64748B !important; }
        [data-theme="light"] .hijri-today-box, [data-theme="light"] .hijri-event-item { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
        [data-theme="light"] .video-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important; }
        [data-theme="light"] #dynamicIslandPrayerBar { background: #FFFFFF !important; border-color: rgba(223, 191, 149, 0.45) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; }
        [data-theme="light"] #dynamicIslandPrayerBar span, [data-theme="light"] #dynamicIslandPrayerBar strong { color: #0F172A !important; }
        [data-theme="light"] #diCityBadge { background: #F1F5F9 !important; color: #334155 !important; border-color: #CBD5E1 !important; }
        [data-theme="light"] #solarBaseTrack { stroke: rgba(0, 0, 0, 0.12) !important; }
        [data-theme="light"] .solar-waypoint circle:first-child { fill: #FFFFFF !important; stroke: #CBD5E1 !important; }
        [data-theme="light"] .solar-waypoint text { fill: #475569 !important; }
        [data-theme="light"] #diCountdownTimer { color: #B45309 !important; }

        /* ── Notifications Center Styles ── */
        .notif-center-title { font-family: 'Amiri', serif; font-size: 2.1rem; font-weight: 700; color: #FFFFFF; margin: 0 0 8px; letter-spacing: -0.02em; }
        .notif-center-subtitle { font-size: 0.92rem; color: #9CA3AF; margin: 0 auto; max-width: 560px; line-height: 1.65; }
        .notif-hero-card { background: linear-gradient(145deg, rgba(22,25,36,0.92) 0%, rgba(11,13,19,0.96) 100%); border: 1px solid rgba(223,191,149,0.25); border-radius: 20px; padding: 26px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
        .notif-card-title { font-size: 1.2rem; font-weight: 700; color: #FFFFFF; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
        .notif-active-text { font-family: 'Amiri', serif; font-size: 1.35rem; line-height: 1.9; color: #E5E7EB; margin-bottom: 20px; padding: 10px 0; }
        .notif-history-box { background: rgba(14,17,24,0.85); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 24px; }
        .notif-history-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 14px 18px; cursor: pointer; transition: background 0.2s ease; display: flex; align-items: flex-start; gap: 14px; }
        .notif-history-item:hover { background: rgba(223,191,149,0.06); }
        .notif-history-title { font-size: 0.9rem; color: #FFFFFF; }
        .notif-history-body { font-size: 0.84rem; color: #D1D5DB; line-height: 1.5; }
        [data-theme="light"] .notif-center-title, [data-theme="light"] .notif-card-title, [data-theme="light"] .notif-history-box h3, [data-theme="light"] .notif-history-title { color: #0F172A !important; }
        [data-theme="light"] .notif-center-subtitle, [data-theme="light"] #notifActiveDate, [data-theme="light"] .notif-history-box div { color: #475569 !important; }
        [data-theme="light"] .notif-hero-card { background: #FFFFFF !important; border: 1px solid rgba(223,191,149,0.4) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important; }
        [data-theme="light"] .notif-active-text { color: #1E293B !important; }
        [data-theme="light"] #notifActiveDate { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
        [data-theme="light"] .notif-history-box { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important; }
        [data-theme="light"] .notif-history-item { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; }
        [data-theme="light"] .notif-history-item:hover { background: #F1F5F9 !important; }
        [data-theme="light"] .notif-history-body { color: #334155 !important; }
        [data-theme="light"] .btn-sched-act-neutral { background: #F1F5F9 !important; color: #1E293B !important; border-color: #CBD5E1 !important; }
        



        /* ── Pure Optical Glass Surface ── */
        .card-panel {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-card);
            padding: clamp(26px, 3.5vw, 40px);
            transition: border-color 0.25s var(--ease-apple), transform 0.25s var(--ease-apple);
            position: relative;
        }
        .card-panel:hover { border-color: var(--border-glass-active); }

        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 26px;
            gap: 16px;
            flex-wrap: wrap;
        }
        .card-title-group { display: flex; flex-direction: column; gap: 4px; }
        .card-eyebrow {
            font-size: 0.74rem;
            font-weight: 600;
            color: var(--accent-gold);
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }
        .card-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.2px;
        }

        .card-audio-controls { display: flex; align-items: center; gap: 8px; }
        .btn-pill-toggle {
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-secondary);
            padding: 7px 14px;
            border-radius: var(--radius-pill);
            font-size: 0.76rem;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s var(--ease-apple);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .btn-pill-toggle svg, .pill-svg-icon {
            display: inline-flex;
            align-self: center;
            flex-shrink: 0;
        }
        .btn-pill-toggle:hover {
            background: var(--bg-surface-hover);
            color: var(--text-primary);
            border-color: var(--border-glass-active);
        }
        .btn-pill-toggle:active { transform: scale(0.96); }
        .btn-pill-toggle.active {
            background: var(--bg-surface-active);
            color: var(--accent-gold);
            border-color: var(--border-gold);
            font-weight: 600;
        }

        /* ── Dhikr Selector Chips (Discrete Liquid Glass) ── */
        .athkar-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 28px;
            justify-content: center;
        }
        .thikr-chip {
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-secondary);
            padding: 8px 18px;
            border-radius: var(--radius-pill);
            font-size: 0.86rem;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s var(--ease-apple);
        }
        .thikr-chip:hover {
            background: var(--bg-surface-hover);
            color: var(--text-primary);
            border-color: var(--border-glass-active);
            transform: translateY(-1px);
        }
        .thikr-chip:active { transform: scale(0.96); }
        .thikr-chip.active {
            background: var(--bg-surface-active);
            border-color: var(--border-glass-active);
            color: #FFFFFF;
            font-weight: 600;
        }
        [data-theme="light"] .thikr-chip.active { color: var(--text-primary); }

        /* ── Celestial Animated Circular Halo Sebha ── */
        .halo-sebha-stage {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin: 10px 0 16px;
        }

        .halo-orb-wrapper {
            position: relative;
            width: 320px;
            height: 320px;
            max-width: 90vw;
            max-height: 90vw;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            user-select: none;
            -webkit-user-select: none;
            cursor: pointer;
            touch-action: manipulation;
        }

        .halo-svg-ring {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
            pointer-events: none;
        }

        .halo-track {
            fill: none;
            stroke: rgba(255, 255, 255, 0.08);
            stroke-width: 3px;
        }
        [data-theme="light"] .halo-track {
            stroke: rgba(0, 0, 0, 0.07);
        }

        .halo-progress {
            fill: none;
            stroke-width: 4px;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.22s var(--ease-apple);
            filter: drop-shadow(0 0 6px rgba(223, 191, 149, 0.5));
        }

        .halo-node-tick {
            fill: rgba(255, 255, 255, 0.22);
            transition: fill 0.25s ease, r 0.25s var(--ease-apple), filter 0.25s ease;
        }
        [data-theme="light"] .halo-node-tick {
            fill: rgba(0, 0, 0, 0.2);
        }

        .halo-node-tick.active {
            fill: #FFD700;
            r: 5px;
            filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.9));
        }

        @keyframes tickPulse {
            0% { transform: scale(1); fill: #FFF7D6; }
            50% { transform: scale(1.35); fill: #FFC837; }
            100% { transform: scale(1); fill: #FFD700; }
        }
        .halo-node-tick.pulse {
            transform-origin: center;
            transform-box: fill-box;
            will-change: transform;
            animation: tickPulse 0.35s ease-out forwards;
        }

        .halo-center-touch {
            width: 230px;
            height: 230px;
            border-radius: 50%;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            box-shadow: var(--glass-specular), 0 12px 32px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            transition: transform 0.2s var(--ease-apple), box-shadow 0.2s ease, border-color 0.2s ease;
            position: relative;
            overflow: hidden;
            z-index: 2;
        }

        .halo-orb-wrapper:hover .halo-center-touch {
            transform: scale(1.02);
            border-color: var(--border-glass-active);
            box-shadow: var(--glass-specular), 0 16px 40px rgba(0, 0, 0, 0.5);
        }

        .halo-orb-wrapper:active .halo-center-touch {
            transform: scale(0.96);
        }

        .halo-dhikr-label {
            font-family: 'Amiri', serif;
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--accent-gold);
            line-height: 1.4;
            max-width: 190px;
            margin-bottom: 6px;
        }

        .halo-count-primary {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 3.4rem;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1;
            letter-spacing: -1.5px;
        }

        .halo-cycle-meta {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 6px;
            letter-spacing: 0.5px;
        }

        .halo-tap-hint {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 14px;
        }

        .halo-ripple {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(223, 191, 149, 0.45) 0%, transparent 70%);
            transform: scale(0);
            animation: haloRippleAnim 0.55s ease-out forwards;
            pointer-events: none;
        }

        @keyframes haloRippleAnim {
            to {
                transform: scale(3.2);
                opacity: 0;
            }
        }


        

        /* ── Museum Timeline Metric Ribbon ── */
        .ticker-ribbon {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: 22px;
            padding: 22px 14px;
            margin-bottom: 22px;
        }
        @media (max-width: 767px) {
            .ticker-ribbon {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 14px 10px;
                padding: 16px 12px;
                border-radius: 18px;
            }
            .ticker-divider { display: none; }
        }
        .ticker-unit { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
        .ticker-number {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            font-weight: 700;
            color: var(--accent-gold);
            line-height: 1.1;
            letter-spacing: -0.5px;
        }
        .ticker-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 500; margin-top: 4px; }
        .ticker-divider { width: 1px; height: 32px; background: var(--border-glass); }

        /* ── Milestone Indicators Grid ── */
        .grid-milestones {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 18px;
        }
        @media (max-width: 767px) {
            .grid-milestones { grid-template-columns: 1fr; gap: 8px; }
        }
        .milestone-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-sm);
            transition: border-color 0.2s ease;
        }
        @media (max-width: 767px) { .milestone-item { padding: 12px 14px; } }
        .milestone-item:hover { border-color: var(--border-glass-active); }
        .milestone-label-group { display: flex; align-items: center; gap: 10px; }
        .milestone-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); }
        .milestone-text { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
        .milestone-val {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        /* ── 3 Perpetual Light Hub Portals ── */
        .memorial-hub-wrap { margin-top: 24px; margin-bottom: 44px; }
        .hub-hadith-banner,
        .hadith-glass-card {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-card);
            text-align: center;
            padding: 32px 24px 26px;
            position: relative;
        }
        .hadith-text {
            font-family: 'Amiri', serif;
            font-size: clamp(1.15rem, 2.2vw, 1.55rem);
            line-height: 2.1;
            color: var(--text-primary);
            max-width: 900px;
            margin: 0 auto 12px;
        }
        .hadith-cite {
            display: inline-block;
            font-size: 0.76rem;
            color: var(--accent-gold);
            background: rgba(223, 191, 149, 0.12);
            border: 1px solid var(--border-gold);
            padding: 4px 14px;
            border-radius: var(--radius-pill);
            font-weight: 600;
        }

        .hub-portals-grid,
        .hub-sections-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            margin-top: 22px;
        }
        @media (min-width: 768px) and (max-width: 1100px) {
            .hub-portals-grid,
            .hub-sections-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
        }
        @media (max-width: 767px) {
            .hub-portals-grid,
            .hub-sections-grid { grid-template-columns: 1fr; gap: 12px; }
        }

        .hub-portal-card {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: 22px;
            padding: 26px 22px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            transition: border-color 0.25s var(--ease-apple), transform 0.25s var(--ease-apple);
            position: relative;
        }
        .hub-portal-card:hover {
            background: var(--bg-surface-elevated);
            border-color: var(--border-glass-active);
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        }
        .portal-eyebrow { font-size: 0.72rem; color: var(--accent-gold); font-weight: 600; letter-spacing: 0.4px; }
        .portal-title { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); }
        .portal-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; flex: 1; }
        .portal-action-link { font-size: 0.8rem; color: var(--accent-gold); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }

        /* ── Interactive Al-Fatiha Station ── */
        .fatiha-station-wrap,
        .fatiha-glass-card {
            margin-top: 24px;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-card);
            padding: clamp(26px, 3.5vw, 36px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }
        .fatiha-station-info { max-width: 600px; }
        .fatiha-station-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: 1.55rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .fatiha-station-desc {
            font-size: 0.86rem;
            color: var(--text-secondary);
            line-height: 1.7;
        }
        .btn-fatiha-gift {
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-gold);
            color: var(--accent-gold);
            padding: 11px 24px;
            border-radius: var(--radius-pill);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.22s var(--ease-apple);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }
        .btn-fatiha-gift:hover {
            background: var(--bg-surface-hover);
            border-color: var(--accent-gold);
        }
        .btn-fatiha-gift:active { transform: scale(0.96); }

        

        /* ── Memorial Site Footer Complete VisionOS Styles ── */
        .memorial-site-footer {
            margin-top: 72px;
            margin-bottom: 0;
            border-top: 1px solid var(--border-glass);
            padding: 56px clamp(16px, 4vw, 48px) calc(32px + env(safe-area-inset-bottom, 0px));
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            opacity: 1 !important;
            visibility: visible !important;
        }
        .footer-inner {
            width: 100%;
            max-width: 1780px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .footer-dedication-card {
            opacity: 1 !important;
            visibility: visible !important;
            text-align: center;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            border-radius: 22px;
            padding: 32px 20px;
            margin-bottom: 40px;
        }
        .footer-emblem-badge {
            display: inline-block;
            font-size: 0.86rem;
            font-weight: 700;
            color: var(--accent-gold);
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }
        .footer-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: clamp(1.6rem, 3.2vw, 2.3rem);
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.3;
            margin-bottom: 12px;
        }
        .footer-quran-verse {
            font-family: 'Amiri', serif;
            font-size: 1.15rem;
            color: var(--accent-gold-light);
            line-height: 1.9;
            max-width: 720px;
            margin: 0 auto;
        }
        .footer-verse-ref {
            display: block;
            font-size: 0.76rem;
            color: var(--text-muted);
            font-family: 'Noto Kufi Arabic', sans-serif;
            margin-top: 4px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 40px;
        }
        @media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
        @media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
        @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 18px; } }
        .footer-col-title { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
        .footer-desc-text { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }
        .footer-prayer-prompt { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.15rem; color: var(--accent-gold); line-height: 1.8; }
        .footer-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
        .footer-nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.83rem; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; }
        .footer-nav-link:hover { color: var(--accent-gold); transform: translateX(-2px); }
        .footer-minimal-icons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
        .btn-minimal-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: none;
        }
        .btn-minimal-icon:hover { transform: translateY(-2px); }
        .btn-min-wa:hover { color: #25D366; border-color: #25D366; background: rgba(37, 211, 102, 0.08); }
        .btn-min-fb:hover { color: #1877F2; border-color: #1877F2; background: rgba(24, 119, 242, 0.08); }
        .btn-min-ig:hover { color: #E1306C; border-color: #E1306C; background: rgba(225, 48, 108, 0.08); }
        .btn-min-share:hover { color: var(--accent-gold); border-color: var(--accent-gold); background: rgba(200, 162, 77, 0.08); }
        .footer-bottom-bar {
            border-top: 1px solid var(--border-glass);
            padding-top: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            font-size: 0.78rem;
            color: var(--text-muted);
        }
        body.has-audio-bar .memorial-site-footer {
            padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
        }
        .btn-footer-back-to-top {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 8px 18px !important;
            border-radius: var(--radius-pill, 9999px) !important;
            background: rgba(223, 191, 149, 0.08) !important;
            border: 1px solid rgba(223, 191, 149, 0.3) !important;
            color: var(--accent-gold, #DFBF95) !important;
            font-size: 0.82rem !important;
            font-weight: 600 !important;
            font-family: inherit !important;
            cursor: pointer !important;
            transition: all 0.25s var(--ease-apple, ease) !important;
            backdrop-filter: var(--glass-blur, blur(16px)) !important;
            -webkit-backdrop-filter: var(--glass-blur, blur(16px)) !important;
            flex-shrink: 0 !important;
            touch-action: manipulation !important;
            -webkit-tap-highlight-color: transparent !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
        }
        .btn-footer-back-to-top:hover {
            background: rgba(223, 191, 149, 0.18) !important;
            border-color: var(--accent-gold, #DFBF95) !important;
            color: #FFFFFF !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 20px rgba(223, 191, 149, 0.25) !important;
        }
        .btn-footer-back-to-top:active {
            transform: translateY(0) scale(0.96) !important;
        }
        @media (max-width: 768px) {
            .memorial-site-footer {
                margin-top: 40px;
                padding: 36px 16px max(36px, calc(env(safe-area-inset-bottom, 0px) + 20px));
            }
        }

        /* ── Light Mode Styles for Footer ── */
        [data-theme="light"] .memorial-site-footer {
            background: #FFFFFF !important;
            border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        }
        [data-theme="light"] .footer-dedication-card {
            background: #F8FAFC !important;
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
        }
        [data-theme="light"] .footer-title, [data-theme="light"] .footer-col-title {
            color: #0F172A !important;
        }
        [data-theme="light"] .footer-desc-text, [data-theme="light"] .footer-nav-link {
            color: #475569 !important;
        }
        [data-theme="light"] .footer-nav-link:hover {
            color: #9C743D !important;
        }
        [data-theme="light"] .btn-minimal-icon {
            background: #F1F5F9 !important;
            border: 1px solid #CBD5E1 !important;
            color: #475569 !important;
        }
        [data-theme="light"] .btn-footer-back-to-top {
            background: #F1F5F9 !important;
            border-color: rgba(140, 83, 27, 0.25) !important;
            color: #8C531B !important;
        }
        [data-theme="light"] .btn-footer-back-to-top:hover {
            background: rgba(140, 83, 27, 0.1) !important;
            color: #5C320A !important;
        }
        [data-theme="light"] .footer-quran-verse {
            color: #7A5524 !important;
        }
        [data-theme="light"] .footer-bottom-bar {
            border-top-color: rgba(0, 0, 0, 0.08) !important;
            color: #64748B !important;
        }
        
        


        /* ── Open Editorial Section Header ── */
        .section-header-editorial {
            margin: 0 auto 32px;
            padding: 20px 0 12px;
            text-align: center;
            position: relative;
            max-width: 960px;
        }
        .editorial-eyebrow {
            font-size: 0.74rem;
            font-weight: 600;
            color: var(--accent-gold);
            letter-spacing: 0.6px;
            text-transform: uppercase;
            display: block;
            margin-bottom: 6px;
            text-align: center;
        }
        .section-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: clamp(2rem, 3.6vw, 2.7rem);
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.35;
            letter-spacing: -0.3px;
            text-align: center;
        }
        .section-subtitle {
            font-size: clamp(0.88rem, 1.4vw, 1.02rem);
            color: var(--text-secondary);
            margin: 6px auto 0;
            max-width: 760px;
            line-height: 1.7;
            text-align: center;
        }

        /* ── Quran Khatmah Sacred Hub ── */
        .khatmah-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin: 24px 0 20px;
        }
        @media (max-width: 680px) { .khatmah-summary-grid { grid-template-columns: 1fr; } }
        .khatmah-stat-cell {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            padding: 20px 16px;
            text-align: center;
        }
        .stat-big-number {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: clamp(2rem, 3.2vw, 2.7rem);
            font-weight: 700;
            color: var(--accent-gold);
            line-height: 1;
        }
        .stat-unit-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            font-weight: 500;
            margin-top: 6px;
        }
        .khatmah-progress-bar-wrap {
            height: 6px;
            background: var(--bg-surface-elevated);
            border-radius: var(--radius-pill);
            overflow: hidden;
            margin-bottom: 28px;
        }
        .khatmah-progress-bar-fill {
            height: 100%;
            background: var(--accent-gold);
            border-radius: var(--radius-pill);
            transition: width 0.45s var(--ease-apple);
        }

        /* 30 Juz Optical Glass Grid */
        .juz-grid-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
            margin-top: 20px;
        }
        @media (min-width: 1025px) and (max-width: 1380px) {
            .juz-grid-container { grid-template-columns: repeat(5, 1fr); }
        }
        @media (min-width: 768px) and (max-width: 1024px) {
            .juz-grid-container { grid-template-columns: repeat(3, 1fr); gap: 14px; }
        }
        @media (max-width: 767px) {
            .juz-grid-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .juz-card { padding: 14px 12px; border-radius: 18px; }
            .juz-title { font-size: 0.88rem; }
            .juz-range { font-size: 0.72rem; }
        }
        .juz-card {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: 22px;
            padding: 20px 18px;
            transition: border-color 0.25s var(--ease-apple), transform 0.25s var(--ease-apple);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .juz-card:hover {
            border-color: var(--border-glass-active);
            transform: translateY(-2px);
        }
        .juz-card.claimed {
            background: rgba(223, 191, 149, 0.08);
            border-color: var(--border-gold);
        }
        .juz-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .juz-number {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.86rem;
            font-weight: 700;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--accent-gold);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .juz-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .juz-range {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-bottom: 10px;
        }
        .juz-status-badge {
            font-size: 0.76rem;
            color: var(--text-secondary);
            margin-bottom: 14px;
            font-weight: 500;
        }
        .juz-actions { display: flex; gap: 8px; }
        .btn-juz-action {
            flex: 1;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: var(--radius-pill);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s var(--ease-apple);
        }
        .btn-juz-action:hover {
            background: var(--bg-surface-hover);
            border-color: var(--border-glass-active);
        }
        .btn-juz-action:active { transform: scale(0.96); }
        .juz-card.claimed .btn-juz-action {
            background: var(--bg-surface-active);
            color: var(--accent-gold);
            border-color: var(--border-gold);
        }
        .juz-read-link {
            text-decoration: none;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--accent-gold);
            padding: 8px 12px;
            border-radius: var(--radius-pill);
            font-size: 0.8rem;
            font-weight: 600;
            transition: all 0.2s var(--ease-apple);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .juz-read-link:hover {
            background: var(--bg-surface-hover);
            border-color: var(--border-glass-active);
        }

        /* ── Athkar Sanctum ── */
        .subnav-toggle-wrap {
            display: flex;
            gap: 8px;
            margin-top: 20px;
            margin-bottom: 22px;
            flex-wrap: wrap;
            align-items: center;
        }
        .subnav-btn {
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-secondary);
            padding: 8px 18px;
            border-radius: var(--radius-pill);
            font-size: 0.86rem;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.22s var(--ease-apple);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .subnav-btn:hover {
            color: var(--text-primary);
            border-color: var(--border-glass-active);
        }
        .subnav-btn.active {
            background: var(--bg-surface-active);
            border-color: var(--border-glass-active);
            color: #FFFFFF;
            font-weight: 600;
        }
        [data-theme="light"] .subnav-btn.active { color: var(--text-primary); }
        .subnav-btn-reset {
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-muted);
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            font-size: 0.8rem;
            cursor: pointer;
            margin-right: auto;
            font-family: inherit;
            transition: all 0.2s var(--ease-apple);
            white-space: nowrap;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .subnav-btn-reset:hover { color: var(--text-primary); border-color: var(--border-glass-active); }

        @media (max-width: 767px) {
            .subnav-toggle-wrap {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding: 4px 6px 12px;
                gap: 8px;
                scrollbar-width: none;
                scroll-snap-type: x mandatory;
            }
            .subnav-toggle-wrap::-webkit-scrollbar { display: none; }
            .subnav-btn {
                padding: 8px 16px;
                font-size: 0.82rem;
                scroll-snap-align: start;
            }
            .subnav-btn-reset {
                padding: 8px 14px;
                font-size: 0.78rem;
                margin-right: 0 !important;
                margin-left: 0 !important;
                scroll-snap-align: start;
            }
        }

        .athkar-list-container {
            display: grid;
            gap: 16px;
            margin-top: 18px;
        }
        @media (min-width: 1100px) {
            .athkar-list-container { grid-template-columns: repeat(2, 1fr); gap: 18px; }
        }
        .thekr-card {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-card);
            padding: 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            transition: border-color 0.25s var(--ease-apple);
        }
        .thekr-card:hover { border-color: var(--border-glass-active); }
        .thekr-content { flex: 1; }
        .thekr-text {
            font-family: 'Amiri', serif;
            font-size: clamp(1.15rem, 1.8vw, 1.35rem);
            line-height: 2.1;
            color: var(--text-primary);
            margin-bottom: 10px;
        }
        .thekr-source {
            font-size: 0.8rem;
            color: var(--accent-gold);
            font-weight: 500;
        }
        .btn-thekr-counter {
            width: 72px;
            height: 72px;
            min-width: 72px;
            min-height: 72px;
            border-radius: 50%;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--accent-gold);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-family: inherit;
            transition: transform 0.15s var(--ease-apple), border-color 0.2s ease, background 0.2s ease;
            flex-shrink: 0;
            align-self: center;
        }
        .btn-thekr-counter:hover { border-color: var(--border-glass-active); }
        .btn-thekr-counter:active { transform: scale(0.92); }
        .btn-thekr-counter.completed {
            color: #FFFFFF;
            background: #10B981;
            border-color: #10B981;
        }
        .counter-val {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 1.45rem;
            font-weight: 700;
            line-height: 1;
        }
        .counter-label { font-size: 0.68rem; margin-top: 2px; font-weight: 500; }

        @media (max-width: 767px) {
            .thekr-card {
                flex-direction: column;
                align-items: stretch;
                text-align: start;
                padding: 20px 18px;
                border-radius: 20px;
                gap: 16px;
            }
            .btn-thekr-counter {
                width: 100%;
                height: 52px;
                min-height: 52px;
                max-height: 52px;
                border-radius: 14px;
                flex-direction: row;
                gap: 10px;
                align-self: stretch;
                margin-top: 6px;
            }
            .counter-val {
                font-size: 1.35rem;
            }
            .counter-label {
                font-size: 0.85rem;
                margin-top: 0;
            }
        }

        

        /* ── Surah Al-Kahf & Friday Sanctuary ── */
        .friday-tools-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        @media (max-width: 768px) { .friday-tools-grid { grid-template-columns: 1fr; } }
        .friday-card-tool {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-card);
            padding: 28px;
            transition: border-color 0.25s var(--ease-apple);
        }
        .friday-card-tool:hover { border-color: var(--border-glass-active); }
        .tool-badge {
            font-size: 0.74rem;
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .tool-title { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.35rem; color: var(--text-primary); margin-bottom: 8px; font-weight: 700; }
        .tool-desc { font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.65; }
        .countdown-badge {
            display: inline-block;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--accent-gold);
            padding: 8px 18px;
            border-radius: var(--radius-pill);
            font-size: 0.84rem;
            font-weight: 600;
        }
        .salawat-counter-box { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
        .salawat-val {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 2.1rem;
            font-weight: 700;
            color: var(--accent-gold);
        }
        .salawat-lbl { font-size: 0.8rem; color: var(--text-muted); }
        .btn-salawat-tap {
            width: 100%;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-primary);
            padding: 12px 18px;
            border-radius: var(--radius-pill);
            font-size: 0.9rem;
            cursor: pointer;
            font-family: inherit;
            font-weight: 600;
            transition: all 0.2s var(--ease-apple);
        }
        .btn-salawat-tap:hover {
            background: var(--bg-surface-hover);
            border-color: var(--border-glass-active);
        }
        .btn-salawat-tap:active { transform: scale(0.97); }

        .quran-reading-card { margin-top: 28px; }
        .quran-card-header { text-align: center; margin-bottom: 24px; }
        .surah-title { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 2.3rem; color: var(--accent-gold); }
        .surah-meta { font-size: 0.84rem; color: var(--text-muted); margin-top: 6px; }
        .bismillah-calligraphy { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.65rem; color: var(--accent-gold); margin-top: 12px; letter-spacing: 0.5px; }
        .quran-text-container {
            font-family: 'Amiri', serif;
            font-size: clamp(1.25rem, 2vw, 1.48rem);
            line-height: 2.35;
            text-align: justify;
            color: var(--text-primary);
            padding: clamp(24px, 4vw, 40px);
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-card);
        }
        .quran-ayah-inline { display: inline; }

        /* ── Duas Compendium ── */
        .duas-list-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
            max-width: 1200px;
            margin: 28px auto 0 auto;
            width: 100%;
            box-sizing: border-box;
        }
        .dua-expanded-card {
            background: rgba(18, 20, 26, 0.78);
            backdrop-filter: blur(28px) saturate(190%);
            -webkit-backdrop-filter: blur(28px) saturate(190%);
            border: 1px solid rgba(223, 191, 149, 0.22);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-card);
            padding: 26px clamp(20px, 3vw, 32px);
            transition: border-color 0.25s var(--ease-apple), box-shadow 0.25s var(--ease-apple);
        }
        .dua-expanded-card:hover {
            border-color: rgba(223, 191, 149, 0.45);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        .dua-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
        .dua-title { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 1.35rem; color: var(--accent-gold); font-weight: 700; letter-spacing: 0.3px; }
        .dua-verified-badge {
            font-size: 0.74rem;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--accent-gold);
            padding: 4px 12px;
            border-radius: var(--radius-pill);
            font-weight: 600;
        }
        .dua-paragraph {
            font-family: 'Amiri', serif;
            font-size: clamp(1.18rem, 1.8vw, 1.4rem);
            line-height: 2.2;
            color: var(--text-primary);
            margin-bottom: 18px;
        }
        .dua-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 16px;
            gap: 14px;
            flex-wrap: wrap;
            border-top: 1px solid var(--border-glass);
        }
        .dua-source-text { font-size: 0.82rem; color: var(--text-muted); }
        .dua-btn-group { display: flex; gap: 8px; }
        .btn-action-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--accent-gold);
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            font-size: 0.8rem;
            cursor: pointer;
            text-decoration: none;
            font-family: inherit;
            font-weight: 600;
            transition: all 0.2s var(--ease-apple);
        }
        .btn-action-icon svg {
            display: inline-flex;
            align-self: center;
            flex-shrink: 0;
        }
        .btn-action-icon:hover {
            background: var(--bg-surface-hover);
            border-color: var(--border-glass-active);
            transform: translateY(-1px);
        }
        .btn-action-icon:active { transform: scale(0.96); }

        /* ── Dedicated Tablet Layouts (768px to 1024px) ── */
        @media (min-width: 768px) and (max-width: 1024px) {
            .hub-sections-grid { grid-template-columns: repeat(2, 1fr); }
            .hub-sections-grid .hub-portal-card:last-child { grid-column: span 2; }
            .duas-list-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 24px auto 0 auto; }
            .friday-tools-grid { grid-template-columns: repeat(2, 1fr); }
            .khatmah-summary-grid { grid-template-columns: repeat(3, 1fr); }
            .thekr-card { padding: 20px; }
        }

        /* ── Dedicated Phone Layouts (< 768px) ── */
        @media (max-width: 767px) {
            .hub-sections-grid { grid-template-columns: 1fr; gap: 14px; }
            .hub-portal-card { padding: 20px 18px; }
            .duas-list-grid { grid-template-columns: 1fr; gap: 16px; margin: 20px auto 0 auto; max-width: 780px; }
            .dua-expanded-card {
                padding: 20px 16px;
            }
            .dua-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .dua-btn-group {
                width: 100%;
                justify-content: flex-end;
            }
            .thekr-card {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
                padding: 18px 16px;
            }
            .thekr-counter-wrap {
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }
            .btn-thekr-counter {
                width: 100% !important;
                height: 52px !important;
                min-height: 52px !important;
                max-height: 52px !important;
                border-radius: 14px !important;
                flex-direction: row !important;
                gap: 10px !important;
                justify-content: center !important;
                align-self: stretch !important;
            }
            .btn-thekr-counter .counter-val {
                font-size: 1.35rem !important;
            }
            .btn-thekr-counter .counter-label {
                font-size: 0.85rem !important;
                margin-top: 0 !important;
            }
            .subnav-toggle-wrap {
                flex-wrap: nowrap;
                overflow-x: auto;
                justify-content: flex-start;
                padding: 4px 6px 12px;
                -webkit-overflow-scrolling: touch;
            }
            .subnav-btn {
                white-space: nowrap;
                flex-shrink: 0;
            }
            .friday-tools-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }
            .khatmah-summary-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .fatiha-glass-card {
                flex-direction: column;
                text-align: center;
                gap: 18px;
            }
            .fatiha-station-info {
                text-align: center;
            }
            .btn-fatiha-gift {
                width: 100%;
                justify-content: center;
            }
            .quran-header-bar {
                flex-direction: column;
                gap: 10px;
            }
            .quran-filter-group {
                width: 100%;
                justify-content: center;
            }
        }

        /* ── Light Mode Duas & Islamic Settings Enhancements ── */
        [data-theme="light"] .dua-expanded-card {
            background: rgba(255, 255, 255, 0.94) !important;
            border-color: rgba(197, 160, 112, 0.3) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        }
        [data-theme="light"] .dua-title {
            color: #8C531B !important;
        }
        [data-theme="light"] .dua-verified-badge {
            background: rgba(223, 191, 149, 0.2) !important;
            border-color: rgba(197, 160, 112, 0.35) !important;
            color: #8C531B !important;
        }
        [data-theme="light"] .dua-paragraph {
            color: #1F2937 !important;
        }
        [data-theme="light"] .dua-source-text {
            color: #6B7280 !important;
        }
        [data-theme="light"] .dua-expanded-card .btn-action-icon {
            background: rgba(255, 255, 255, 0.95) !important;
            border-color: rgba(197, 160, 112, 0.35) !important;
            color: #8C531B !important;
        }

        [data-theme="light"] .islamic-settings-card {
            background: rgba(250, 248, 245, 0.98) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
            color: #111827 !important;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18) !important;
        }
        [data-theme="light"] .islamic-settings-card h3,
        [data-theme="light"] .islamic-settings-title {
            color: #111827 !important;
        }
        [data-theme="light"] .islamic-settings-subtitle {
            color: #4B5563 !important;
        }
        [data-theme="light"] .islamic-settings-card label {
            color: #374151 !important;
        }
        [data-theme="light"] .islamic-settings-card [data-i18n$="_heading"] {
            color: #8C531B !important;
        }
        [data-theme="light"] .islamic-settings-card p {
            color: #4B5563 !important;
        }
        [data-theme="light"] .islamic-settings-card div[style*="background: rgba(255, 255, 255, 0.025)"] {
            background: rgba(255, 255, 255, 0.85) !important;
            border-color: rgba(0, 0, 0, 0.06) !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
        }
        [data-theme="light"] .islamic-settings-card div[style*="background: rgba(0, 0, 0, 0.28)"] {
            background: rgba(0, 0, 0, 0.035) !important;
            border-color: rgba(0, 0, 0, 0.06) !important;
        }
        [data-theme="light"] .settings-muadhin-btn,
        [data-theme="light"] .settings-athan-mode-btn,
        [data-theme="light"] .settings-reminder-chip {
            background: rgba(0, 0, 0, 0.035) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
            color: #1F2937 !important;
        }
        [data-theme="light"] .settings-muadhin-btn.active,
        [data-theme="light"] .settings-athan-mode-btn.active,
        [data-theme="light"] .settings-reminder-chip.active {
            background: rgba(223, 191, 149, 0.25) !important;
            border-color: #C5A070 !important;
            color: #8C531B !important;
        }
        [data-theme="light"] #settingsModalCitySelect,
        [data-theme="light"] #settingsEarlyReminderSelect {
            background: #FFFFFF !important;
            border-color: rgba(0, 0, 0, 0.15) !important;
            color: #111827 !important;
        }
        [data-theme="light"] #settingsModalCitySelect option,
        [data-theme="light"] #settingsEarlyReminderSelect option {
            background: #FFFFFF !important;
            color: #111827 !important;
        }
        [data-theme="light"] #settingsVolumeLabel {
            color: #111827 !important;
        }
        [data-theme="light"] #settingsNotifStatusBadge {
            background: rgba(0, 0, 0, 0.06) !important;
            color: #374151 !important;
        }
        .islamic-settings-close-btn,
        [data-theme="light"] .islamic-settings-close-btn {
            background: none !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            color: var(--text-primary, #FFFFFF) !important;
        }
        [data-theme="light"] .islamic-settings-close-btn {
            color: #374151 !important;
        }
        .islamic-settings-close-btn:hover,
        [data-theme="light"] .islamic-settings-close-btn:hover {
            background: none !important;
            border: none !important;
            opacity: 1 !important;
        }
        [data-theme="light"] .islamic-settings-card div[style*="border-top"] {
            border-top-color: rgba(0, 0, 0, 0.08) !important;
        }
        [data-theme="light"] .islamic-settings-card div[style*="margin-top"] button[onclick*="closeIslamicSettings"] {
            background: rgba(0, 0, 0, 0.05) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
            color: #374151 !important;
        }
        [data-theme="light"] .video-card {
            background: rgba(255, 255, 255, 0.92) !important;
            border: 1px solid var(--border-glass) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
        }
        [data-theme="light"] .video-title {
            color: #0F172A !important;
        }
        [data-theme="light"] .video-reciter {
            color: #475569 !important;
        }
        [data-theme="light"] .btn-video-tab {
            background: rgba(0, 0, 0, 0.04) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
            color: #475569 !important;
        }
        [data-theme="light"] .btn-video-tab.active {
            background: #9C743D !important;
            border-color: #9C743D !important;
            color: #FFFFFF !important;
        }

        /* ── Mobile Settings Modal: Safe-Area & Dynamic Viewport Fix ── */
        @media (max-width: 767px) {
            #islamicSettingsModal {
                align-items: flex-start !important;
                justify-content: center !important;
                padding: max(12px, env(safe-area-inset-top, 12px)) 6px max(12px, env(safe-area-inset-bottom, 12px)) 6px !important;
            }
            .islamic-settings-card {
                height: auto !important;
                max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 12px)) - max(24px, env(safe-area-inset-bottom, 12px))) !important;
                width: 100% !important;
                border-radius: 18px !important;
            }
        }
        
        


        /* ── Quran 114 Surahs Directory & Search ── */
        #pane-quran {
            padding-top: 24px;
        }
        .quran-header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .quran-search-input {
            flex: 1;
            min-width: 240px;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            color: var(--text-primary);
            padding: 12px 18px;
            border-radius: var(--radius-pill);
            font-size: 0.9rem;
            outline: none;
            font-family: inherit;
            transition: border-color 0.2s var(--ease-apple);
        }
        .quran-search-input:focus {
            border-color: var(--border-gold);
            background: var(--bg-surface-elevated);
        }
        .quran-filter-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-surface);
            border: 1px solid var(--border-glass);
            padding: 4px;
            border-radius: var(--radius-pill);
        }
        .quran-filter-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 0.76rem;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: var(--radius-pill);
            cursor: pointer;
            transition: all 0.2s var(--ease-apple);
            font-family: inherit;
        }
        .quran-filter-btn.active {
            background: var(--bg-surface-active);
            color: var(--accent-gold);
            border: 1px solid var(--border-gold);
        }

        /* 114 Surahs Glass Grid */
        .quran-surahs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 14px;
            margin-top: 16px;
        }
        @media (max-width: 767px) {
            .quran-surahs-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }
        .surah-card {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.25s var(--ease-apple);
            cursor: pointer;
            position: relative;
        }
        .surah-card:hover {
            background: var(--bg-surface-elevated);
            border-color: var(--border-glass-active);
            transform: translateY(-2px);
        }
        .surah-card-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .surah-number-badge {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.88rem;
            flex-shrink: 0;
        }
        .surah-meta-block {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .surah-name-ar {
            font-family: 'Amiri', serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
        }
        .surah-sub-meta {
            font-size: 0.74rem;
            color: var(--text-muted);
            display: flex;
            gap: 6px;
        }
        .surah-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .btn-surah-act {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s var(--ease-apple);
        }
        .btn-surah-act:hover {
            color: var(--accent-gold);
            border-color: var(--border-gold);
            background: var(--bg-surface-active);
        }

        /* ── Quran Reading Fullscreen Modal ── */
        .quran-reader-modal {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            max-width: 100vw;
            max-height: 100vh;
            z-index: 999999;
            background: rgba(10, 11, 15, 0.98);
            display: none;
            opacity: 0;
            pointer-events: none !important;
            transition: opacity 0.22s var(--ease-apple);
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            border: none;
        }
        [data-theme="light"] .quran-reader-modal {
            background: rgba(248, 245, 238, 0.98);
        }
        .quran-reader-modal.active {
            display: flex;
            opacity: 1;
            pointer-events: auto !important;
        }
        .quran-reader-sheet {
            width: 100vw;
            max-width: 100vw;
            height: 100vh;
            max-height: 100vh;
            min-height: 100vh;
            background: #0A0B0F;
            border: none;
            border-radius: 0;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        [data-theme="light"] .quran-reader-sheet {
            background: #FAF7EE;
            border: none;
            box-shadow: none;
        }
        .quran-reader-header {
            padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
            border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-surface-elevated, #11151F);
            flex-shrink: 0;
            gap: 12px;
            flex-wrap: wrap;
        }
        [data-theme="light"] .quran-reader-header {
            background: #F1EBE0;
            border-bottom: 1px solid rgba(140, 110, 60, 0.18);
        }
        .quran-reader-title-box {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .quran-reader-surah-switcher {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 3px 6px;
            border-radius: 8px;
        }
        [data-theme="light"] .quran-reader-surah-switcher {
            background: #FFFFFF;
            border-color: rgba(0, 0, 0, 0.1);
        }
        .btn-surah-step {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid transparent;
            background: transparent;
            color: var(--accent-gold, #DFBF95);
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .btn-surah-step:hover {
            background: rgba(223, 191, 149, 0.14);
            border-color: rgba(223, 191, 149, 0.3);
        }
        [data-theme="light"] .btn-surah-step {
            color: #9C743D;
        }
        .modal-surah-picker {
            background: transparent;
            border: none;
            color: var(--text-primary, #FFFFFF);
            font-size: 0.82rem;
            font-weight: 700;
            font-family: inherit;
            padding: 3px 6px;
            cursor: pointer;
            outline: none;
            max-width: 170px;
        }
        .modal-surah-picker option {
            background: #11151F;
            color: #FFFFFF;
        }
        [data-theme="light"] .modal-surah-picker {
            color: #111827;
        }
        [data-theme="light"] .modal-surah-picker option {
            background: #FFFFFF;
            color: #111827;
        }

        /* Responsive 2-Tier Header for Phones and Small Devices */
        @media (max-width: 650px) {
            .quran-reader-header {
                display: grid !important;
                grid-template-columns: 1fr auto !important;
                grid-template-areas:
                    "title actions"
                    "switcher switcher" !important;
                row-gap: 8px !important;
                column-gap: 8px !important;
                padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px !important;
            }
            .quran-reader-title-box {
                grid-area: title !important;
                min-width: 0 !important;
                gap: 8px !important;
            }
            .quran-reader-title-box h3 {
                font-size: 1.15rem !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
            .quran-reader-title-box #modalSurahMeta {
                font-size: 0.7rem !important;
            }
            .quran-reader-actions {
                grid-area: actions !important;
                flex-shrink: 0 !important;
                gap: 6px !important;
            }
            .btn-utility-icon {
                width: 34px !important;
                height: 34px !important;
            }
            .quran-reader-surah-switcher {
                grid-area: switcher !important;
                width: 100% !important;
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                box-sizing: border-box !important;
                padding: 4px 6px !important;
                border-radius: 8px !important;
            }
            .btn-surah-step {
                flex-shrink: 0 !important;
                padding: 5px 8px !important;
                font-size: 0.74rem !important;
            }
            .modal-surah-picker {
                flex: 1 !important;
                max-width: none !important;
                text-align: center !important;
                text-align-last: center !important;
                font-size: 0.82rem !important;
            }
        }
        .quran-reader-body {
            padding: 28px clamp(18px, 4vw, 44px);
            overflow-y: auto;
            flex: 1;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .quran-reader-body::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
        .quran-surah-text-container {
            font-family: 'Amiri', 'Noto Naskh Arabic', serif;
            font-size: clamp(1.3rem, 2.3vw, 1.7rem);
            line-height: 2.5;
            color: var(--text-primary);
            text-align: justify;
            direction: rtl;
        }
        [data-theme="light"] .quran-surah-text-container {
            color: #1A1A1A;
        }
        .ayah-ayah-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-gold);
            font-size: 0.85rem;
            margin: 0 6px;
            font-weight: 700;
            font-family: 'Noto Kufi Arabic', sans-serif;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-gold);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            vertical-align: middle;
        }
        [data-theme="light"] .ayah-ayah-num {
            color: #7A5524;
            background: #EFE6D2;
            border: 1px solid #C8A870;
        }

        

        /* ── Floating Curated Audio Player Dock ── */
        .audio-memorial-dock {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(140%);
            z-index: 10000010;
            width: 90%;
            max-width: 920px;
            background: rgba(14, 16, 22, 0.88);
            backdrop-filter: blur(48px) saturate(210%);
            -webkit-backdrop-filter: blur(48px) saturate(210%);
            border: 1px solid var(--border-glass-active);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
            border-radius: var(--radius-pill);
            padding: 8px 18px;
            display: grid;
            grid-template-columns: 220px 1fr auto;
            align-items: center;
            gap: 16px;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
        }
        [data-theme="light"] .audio-memorial-dock {
            background: rgba(252, 250, 246, 0.94);
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
        }
        .audio-memorial-dock.active {
            transform: translateX(-50%) translateY(0) !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            display: grid !important;
            visibility: visible !important;
            z-index: 10000010 !important;
        }
        body.has-audio-bar {
            padding-bottom: 110px !important;
        }

        /* 1. Track Info Column */
        .audio-dock-info {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            overflow: hidden;
        }
        .audio-reciter-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-gold);
            flex-shrink: 0;
        }
        .audio-meta-wrap {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            overflow: hidden;
        }
        .audio-track-surah {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .audio-track-reciter {
            font-size: 0.72rem;
            color: var(--accent-gold);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 2. Center Controls & Timeline */
        .audio-dock-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 100%;
        }
        .audio-buttons-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn-audio-ctrl {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s var(--ease-apple);
        }
        .btn-audio-ctrl:hover {
            color: var(--text-primary);
            background: var(--bg-surface-elevated);
        }
        .btn-audio-play {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--accent-gold);
            color: #0A0B0F;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
            transition: transform 0.2s var(--ease-apple);
        }
        .btn-audio-play:hover { transform: scale(1.06); }
        .btn-audio-play:active { transform: scale(0.94); }

        .audio-scrubber-row {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            max-width: 320px;
        }
        .audio-time-label {
            font-size: 0.68rem;
            color: var(--text-muted);
            font-family: monospace;
            flex-shrink: 0;
            width: 34px;
            text-align: center;
        }
        .audio-scrub-slider {
            flex: 1;
            height: 4px;
            accent-color: var(--accent-gold);
            cursor: pointer;
            border-radius: 2px;
        }

        /* 3. Reciter Pill & Close Button */
        .audio-dock-options {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .audio-reciter-pill {
            position: relative;
            display: inline-flex;
            align-items: center;
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-pill);
            padding: 4px 10px;
            transition: all 0.2s var(--ease-apple);
        }
        .audio-reciter-pill:hover {
            border-color: var(--border-gold);
        }
        .audio-reciter-select {
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 0.74rem;
            font-weight: 600;
            cursor: pointer;
            outline: none;
            font-family: inherit;
            padding-inline-end: 14px;
        }
        .audio-reciter-select option {
            background: var(--bg-base);
            color: var(--text-primary);
        }
        .audio-chevron {
            position: absolute;
            inset-inline-end: 8px;
            pointer-events: none;
            stroke: var(--text-muted);
        }
        .btn-audio-close {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-surface);
            border: 1px solid var(--border-glass);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .btn-audio-close:hover {
            color: var(--text-primary);
            border-color: var(--border-glass-active);
            background: var(--bg-surface-elevated);
        }
        .btn-audio-download {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-surface);
            border: 1px solid var(--border-glass);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .btn-audio-download:hover {
            color: var(--accent-gold);
            border-color: var(--accent-gold);
            background: var(--bg-surface-elevated);
        }
        .btn-download-surah-offline.downloaded {
            color: var(--accent-emerald) !important;
            border-color: var(--accent-emerald) !important;
            background: rgba(16, 185, 129, 0.12) !important;
        }
        .btn-download-surah-offline.downloading {
            border-color: var(--accent-gold) !important;
            animation: pulse-download 1.4s infinite ease-in-out;
        }
        @keyframes pulse-download {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(0.94); }
        }

        /* Tablet Mode (768px - 1024px) */
        @media (min-width: 768px) and (max-width: 1024px) {
            .audio-memorial-dock {
                width: 92%;
                max-width: 820px;
                grid-template-columns: 180px 1fr auto;
                gap: 12px;
                padding: 8px 14px;
            }
        }

        /* Phone Mode (< 767px) */
        @media (max-width: 767px) {
            .audio-memorial-dock {
                bottom: calc(14px + env(safe-area-inset-bottom, 0px));
                width: calc(100% - 16px);
                max-width: 480px;
                border-radius: 24px;
                padding: 8px 12px;
                grid-template-columns: 1fr auto auto;
                gap: 8px;
                z-index: 10000010 !important;
                box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(223, 191, 149, 0.35);
            }
            .audio-memorial-dock.active {
                transform: translateX(-50%) translateY(0) !important;
                opacity: 1 !important;
                pointer-events: auto !important;
                display: grid !important;
                visibility: visible !important;
                z-index: 10000010 !important;
            }
            .audio-dock-center .audio-scrubber-row,
            .audio-dock-options .audio-reciter-pill {
                display: none;
            }
            .audio-dock-center {
                width: auto;
            }
            .audio-dock-center .audio-buttons-row {
                gap: 6px;
            }
            .audio-dock-center .btn-audio-ctrl {
                display: inline-flex !important;
                width: 32px !important;
                height: 32px !important;
            }
            .btn-audio-play {
                width: 38px !important;
                height: 38px !important;
            }
            .audio-dock-info {
                max-width: 145px;
            }
            .audio-track-surah {
                font-size: 0.82rem !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .audio-track-reciter {
                font-size: 0.7rem !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        
        


        /* ── Juz Reader: Multi-Surah Header & Quick Navigation ── */
        .juz-nav-pills-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            overflow-x: auto;
            padding: 10px 16px;
            background: rgba(11, 19, 32, 0.65);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .juz-nav-pills-bar::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

        .juz-nav-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 600;
            color: rgba(241, 245, 249, 0.82);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            white-space: nowrap;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .juz-nav-pill:hover {
            color: var(--accent-gold, #d4af37);
            background: rgba(212, 175, 55, 0.12);
            border-color: rgba(212, 175, 55, 0.35);
        }

        .juz-surah-block {
            margin-bottom: 48px;
            position: relative;
        }

        .juz-surah-block:last-child {
            margin-bottom: 16px;
        }

        .juz-surah-header-card {
            margin: 24px 0 20px 0;
            padding: 16px 22px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(14, 22, 35, 0.4) 100%);
            border: 1px solid rgba(212, 175, 55, 0.25);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

        .juz-surah-title-meta {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .juz-surah-num-badge {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--accent-gold, #d4af37);
            background: rgba(212, 175, 55, 0.15);
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        .juz-surah-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: #ffffff;
            font-family: var(--font-quran, serif);
        }

        .juz-surah-type-meta {
            font-size: 0.82rem;
            color: rgba(241, 245, 249, 0.65);
            font-weight: 500;
        }

        /* ── Ethereal Immersion and Smooth Flow ── */
        .section-pane {
            scroll-margin-top: 76px;
        }

        /* ── Ambient Multitrack Audio Dropdown & Controls ── */
        .ambient-control-group {
            position: relative;
            display: inline-flex;
            align-items: center;
            border-radius: var(--radius-pill);
            background: var(--bg-surface);
            border: 1px solid var(--border-glass);
            box-shadow: var(--glass-specular);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            transition: all 0.22s var(--ease-apple);
        }

        .ambient-control-group:hover {
            border-color: var(--border-glass-active);
            background: var(--bg-surface-elevated);
        }

        .ambient-control-group .btn-pill-toggle.btn-toggle-ambient {
            border: none;
            background: transparent;
            border-radius: 999px 0 0 999px;
            padding-inline-end: 6px;
        }

        [dir="rtl"] .ambient-control-group .btn-pill-toggle.btn-toggle-ambient {
            border-radius: 0 999px 999px 0;
        }

        .ambient-control-group .btn-pill-toggle.btn-toggle-ambient.active {
            color: var(--accent-gold, #d4af37);
        }

        .btn-ambient-dropdown-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 32px;
            background: transparent;
            border: none;
            border-inline-start: 1px solid var(--border-glass);
            color: rgba(241, 245, 249, 0.7);
            cursor: pointer;
            padding: 0 6px 0 4px;
            border-radius: 0 999px 999px 0;
            transition: all 0.2s ease;
        }

        [dir="rtl"] .btn-ambient-dropdown-trigger {
            border-radius: 999px 0 0 999px;
        }

        .btn-ambient-dropdown-trigger:hover {
            color: var(--accent-gold, #d4af37);
            background: var(--bg-surface-hover);
        }

        .btn-ambient-dropdown-trigger[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }

        .btn-ambient-dropdown-trigger svg {
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        

        /* ── Ameen Button (Vibrant Rose-Red Accent as Before) ── */
        .btn-ameen-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(244, 63, 94, 0.08) !important;
            border: 1px solid rgba(244, 63, 94, 0.28) !important;
            color: #f43f5e !important;
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            font-size: 0.8rem;
            cursor: pointer;
            font-family: inherit;
            font-weight: 600;
            transition: all 0.2s var(--ease-apple);
        }
        .btn-ameen-action:hover {
            background: rgba(244, 63, 94, 0.16) !important;
            border-color: rgba(244, 63, 94, 0.55) !important;
            color: #fb7185 !important;
            transform: translateY(-1px);
        }
        .btn-ameen-action:active {
            transform: scale(0.96);
        }
        .btn-ameen-action.pulse {
            animation: ameenCleanPulse 0.3s var(--ease-apple);
        }
        @keyframes ameenCleanPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }
        .btn-ameen-action .ameen-count {
            display: inline-block;
            padding: 1px 7px;
            border-radius: 999px;
            background: rgba(244, 63, 94, 0.15) !important;
            font-size: 0.74rem;
            font-weight: 700;
            color: #f43f5e !important;
        }
        .btn-ameen-action.voted {
            background: rgba(244, 63, 94, 0.22) !important;
            border-color: rgba(244, 63, 94, 0.8) !important;
            color: #ff3b5c !important;
            box-shadow: 0 0 16px rgba(244, 63, 94, 0.35);
        }
        .btn-ameen-action.voted svg {
            fill: #f43f5e !important;
            stroke: #f43f5e !important;
            transform: scale(1.15);
        }
        .btn-amen-cloud.voted {
            background: rgba(223, 191, 149, 0.24) !important;
            border-color: #DFBF95 !important;
            color: #DFBF95 !important;
            box-shadow: 0 0 16px rgba(223, 191, 149, 0.4);
        }
        .btn-amen-cloud.voted svg {
            fill: #DFBF95 !important;
            stroke: #DFBF95 !important;
            transform: scale(1.15);
        }

        .ambient-menu-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 295px;
            background: #0e1117 !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border: 1px solid rgba(255, 255, 255, 0.16) !important;
            border-radius: 20px;
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
            z-index: 1060;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-8px) scale(0.96);
            transition: all 0.22s var(--ease-apple);
            overflow: hidden;
            text-align: start;
        }

        [data-theme="light"] .ambient-menu-dropdown {
            background: #ffffff !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border: 1px solid rgba(0, 0, 0, 0.15) !important;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
        }

        [dir="rtl"] .ambient-menu-dropdown {
            left: 0;
            right: auto;
        }

        [dir="ltr"] .ambient-menu-dropdown {
            left: auto;
            right: 0;
        }

        .ambient-menu-dropdown.active {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }

        .ambient-menu-header {
            padding: 12px 16px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: #131720 !important;
        }

        [data-theme="light"] .ambient-menu-header {
            border-bottom-color: rgba(0, 0, 0, 0.08);
            background: #f8fafc !important;
        }

        .ambient-menu-title {
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--accent-gold);
        }

        .ambient-options-list {
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .ambient-option-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 14px;
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-primary);
            cursor: pointer;
            width: 100%;
            text-align: start;
            transition: all 0.18s var(--ease-apple);
        }

        .ambient-option-item:hover {
            background: #191e28 !important;
            border-color: rgba(255, 255, 255, 0.14) !important;
        }

        [data-theme="light"] .ambient-option-item:hover {
            background: #f1f5f9 !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
        }

        .ambient-option-item.active {
            background: rgba(212, 175, 55, 0.16) !important;
            border-color: rgba(212, 175, 55, 0.38) !important;
            color: var(--accent-gold);
        }

        [data-theme="light"] .ambient-option-item.active {
            background: rgba(212, 175, 55, 0.12) !important;
            border-color: rgba(212, 175, 55, 0.4) !important;
        }

        .ambient-opt-icon {
            font-size: 1.15rem;
            line-height: 1;
            flex-shrink: 0;
        }

        .ambient-opt-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
            min-width: 0;
        }

        .ambient-opt-name {
            font-size: 0.86rem;
            font-weight: 600;
            color: #ffffff;
        }

        .ambient-option-item.active .ambient-opt-name {
            color: var(--accent-gold, #d4af37);
        }

        .ambient-opt-desc {
            font-size: 0.72rem;
            color: rgba(241, 245, 249, 0.58);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ambient-opt-check {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--accent-gold, #d4af37);
            opacity: 0;
            transform: scale(0.6);
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .ambient-option-item.active .ambient-opt-check {
            opacity: 1;
            transform: scale(1);
        }

        /* ── Mobile Glassmorphic Bottom Sheet (Eliminates Sebha Collision) ── */
        .ambient-mobile-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(4, 7, 12, 0.78);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 10000018;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        .ambient-mobile-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        @media (max-width: 768px) {
            .ambient-menu-dropdown {
                display: none !important;
                position: fixed !important;
                bottom: 0 !important;
                top: auto !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                border-radius: 24px 24px 0 0 !important;
                border: 1px solid var(--border-gold, rgba(223, 191, 149, 0.35)) !important;
                border-bottom: none !important;
                box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.95) !important;
                z-index: 10000020 !important;
                max-height: 75vh !important;
                overflow-y: auto !important;
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
                transform: translateY(100%) !important;
                opacity: 0 !important;
                pointer-events: none !important;
                transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
            }
            .ambient-menu-dropdown.active {
                display: block !important;
                transform: translateY(0) !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }
            .ambient-menu-header {
                position: sticky;
                top: 0;
                z-index: 2;
                padding: 18px 20px 14px !important;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 24px 24px 0 0;
            }
            .ambient-menu-header::before {
                content: '';
                position: absolute;
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                width: 38px;
                height: 4px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 2px;
            }
            [data-theme="light"] .ambient-menu-header::before {
                background: rgba(0, 0, 0, 0.2);
            }
            .ambient-options-list {
                padding: 10px 12px !important;
                gap: 6px !important;
            }
            .ambient-option-item {
                padding: 12px 14px !important;
                border-radius: 14px !important;
            }
            .ambient-opt-desc {
                white-space: normal !important;
            }
        }

        

        /* ── Permissions Onboarding Modal & Re-grant Guide ── */
        .perm-modal-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background: rgba(0, 0, 0, 0.78) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            z-index: 10000008 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px !important;
            box-sizing: border-box !important;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .perm-modal-overlay.active {
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        .perm-card {
            background: rgba(18, 22, 31, 0.96);
            border: 1px solid var(--border-gold, rgba(223, 191, 149, 0.35));
            border-radius: 24px;
            padding: 28px 24px 24px;
            max-width: 440px;
            width: 100%;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85);
            text-align: center;
            box-sizing: border-box;
            transform: scale(0.94) translateY(12px);
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .perm-modal-overlay.active .perm-card {
            transform: scale(1) translateY(0);
        }
        [data-theme="light"] .perm-card {
            background: rgba(255, 255, 255, 0.98);
            border-color: rgba(180, 140, 90, 0.35);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
        }
        .perm-card-icon {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: rgba(223, 191, 149, 0.14);
            border: 1px solid rgba(223, 191, 149, 0.35);
            font-size: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        .perm-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--accent-gold, #dfbf95);
            margin: 0 0 8px;
            line-height: 1.4;
        }
        .perm-subtitle {
            font-size: 0.88rem;
            color: var(--text-secondary, rgba(255, 255, 255, 0.7));
            margin: 0 0 18px;
            line-height: 1.5;
        }
        [data-theme="light"] .perm-subtitle {
            color: rgba(40, 40, 40, 0.75);
        }
        .perm-features-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
            text-align: start;
        }
        .perm-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 12px 14px;
        }
        [data-theme="light"] .perm-feature-item {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
        }
        .perm-feature-icon {
            font-size: 1.25rem;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .perm-feature-text strong {
            display: block;
            font-size: 0.92rem;
            color: var(--text-primary, #ffffff);
            margin-bottom: 2px;
        }
        [data-theme="light"] .perm-feature-text strong {
            color: #111827;
        }
        .perm-feature-text p {
            font-size: 0.8rem;
            color: var(--text-secondary, rgba(255, 255, 255, 0.65));
            margin: 0;
            line-height: 1.45;
        }
        [data-theme="light"] .perm-feature-text p {
            color: #4b5563;
        }
        .perm-regrant-guide {
            background: rgba(217, 119, 6, 0.12);
            border: 1px solid rgba(217, 119, 6, 0.4);
            border-radius: 14px;
            padding: 12px 14px;
            margin-bottom: 16px;
            text-align: start;
        }
        .perm-regrant-badge {
            display: inline-block;
            font-size: 0.84rem;
            font-weight: 700;
            color: #fbbf24;
            margin-bottom: 6px;
        }
        .perm-regrant-text {
            font-size: 0.8rem;
            color: var(--text-secondary, rgba(255, 255, 255, 0.75));
            margin: 0 0 10px;
            line-height: 1.5;
        }
        .btn-perm-recheck {
            width: 100%;
            padding: 8px 12px;
            border-radius: 10px;
            background: rgba(217, 119, 6, 0.22);
            color: #fde68a;
            border: 1px solid rgba(217, 119, 6, 0.5);
            font-size: 0.84rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .btn-perm-recheck:hover {
            background: rgba(217, 119, 6, 0.35);
        }
        .perm-actions {
            display: flex;
            gap: 10px;
            justify-content: stretch;
        }
        .btn-perm-allow {
            flex: 1;
            padding: 13px 18px;
            border-radius: 14px;
            background: linear-gradient(135deg, #dfbf95 0%, #c29d6b 100%);
            color: #0d1117;
            font-size: 0.92rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(223, 191, 149, 0.3);
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .btn-perm-allow:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(223, 191, 149, 0.45);
        }
        .btn-perm-later {
            padding: 13px 20px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-secondary, rgba(255, 255, 255, 0.7));
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.18s ease;
        }
        .btn-perm-later:hover {
            background: rgba(255, 255, 255, 0.12);
        }
        [data-theme="light"] .btn-perm-later {
            background: rgba(0, 0, 0, 0.05);
            border-color: rgba(0, 0, 0, 0.12);
            color: #4b5563;
        }
        @media (max-width: 480px) {
            .perm-card {
                padding: 22px 18px 18px;
                border-radius: 20px;
            }
            .perm-actions {
                flex-direction: column;
            }
            .btn-perm-allow, .btn-perm-later {
                width: 100%;
            }
        }
        
        

        /* ── Memorial Cards Gallery Grid ── */
        .memorial-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
            margin: 28px 0 60px;
        }

        .memorial-card-item {
            background: var(--bg-surface, rgba(16, 18, 24, 0.65));
            backdrop-filter: var(--glass-blur, blur(24px));
            -webkit-backdrop-filter: var(--glass-blur, blur(24px));
            border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
            border-radius: 20px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
        }

        @media (hover: hover) {
            .memorial-card-item:hover {
                background: var(--bg-surface-elevated, rgba(16, 20, 29, 0.72));
                border-color: var(--border-glass-active, rgba(223, 191, 149, 0.25));
                box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }

            .memorial-card-item:hover .card-img {
                transform: scale(1.03);
            }

            .memorial-card-item:hover .card-media-overlay {
                opacity: 1;
                pointer-events: auto;
            }

            .memorial-card-item:hover .btn-zoom-overlay {
                transform: scale(1);
            }
        }

        .card-media-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 14px;
            overflow: hidden;
            background: #08090C;
            cursor: pointer;
        }

        .card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-media-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            opacity: 0;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.25s ease;
        }

        .btn-zoom-overlay {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.3);
            transform: scale(0.9);
            transition: transform 0.2s ease;
        }

        .card-meta-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

        .card-item-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-primary, #FFFFFF);
            margin: 0;
            line-height: 1.35;
        }

        .card-item-caption {
            font-size: 0.84rem;
            color: var(--text-secondary, rgba(255, 255, 255, 0.65));
            line-height: 1.5;
            margin: 0;
            flex: 1;
        }

        .card-item-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .btn-card-action {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-download {
            background: rgba(212, 175, 55, 0.12);
            color: var(--accent-gold, #D4AF37);
            border: 1px solid rgba(212, 175, 55, 0.25);
        }

        .btn-download:hover {
            background: var(--accent-gold, #D4AF37);
            color: #06070A;
        }

        .btn-share {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary, #FFFFFF);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .btn-share:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* ── Full-Screen VisionOS Lightbox Modal ── */
        .card-lightbox-modal {
            position: fixed;
            inset: 0;
            z-index: 10000100 !important;
            display: none;
            pointer-events: none !important;
            align-items: center;
            justify-content: center;
            padding: clamp(10px, 2vw, 20px);
        }

        .card-lightbox-modal.active {
            display: flex !important;
            pointer-events: auto !important;
        }

        .lightbox-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.94);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            cursor: zoom-out;
        }

        /* ── Spiritual Full Post & Message Modal Card ── */
        .lightbox-content-card {
            position: relative;
            z-index: 10;
            max-width: 960px;
            width: 95vw;
            max-height: 90vh;
            background: rgba(11, 14, 20, 0.96);
            backdrop-filter: blur(32px);
            -webkit-backdrop-filter: blur(32px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 32px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(223, 191, 149, 0.15);
            display: flex;
            flex-direction: column;
            animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .lightbox-card-inner {
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            height: 100%;
            max-height: 90vh;
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .lightbox-card-inner {
                grid-template-columns: 1fr;
                overflow-y: auto;
            }
        }

        .lightbox-media-col {
            background: #05070A;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            min-height: 280px;
            max-height: 90vh;
        }

        .lightbox-card-media {
            width: 100%;
            height: 100%;
            max-height: 90vh;
            object-fit: contain;
            display: block;
        }

        @media (max-width: 768px) {
            .lightbox-media-col {
                max-height: 320px;
            }
        }

        .lightbox-info-col {
            padding: clamp(20px, 2.5vw, 32px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-y: auto;
            background: linear-gradient(180deg, rgba(16, 20, 29, 0.8) 0%, rgba(10, 13, 19, 0.95) 100%);
        }

        .lightbox-badge-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .lightbox-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 999px;
            background: rgba(223, 191, 149, 0.14);
            border: 1px solid rgba(223, 191, 149, 0.28);
            color: var(--accent-gold, #DFBF95);
            font-size: 0.76rem;
            font-weight: 700;
        }

        .lightbox-badge-date {
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .lightbox-post-title {
            font-family: 'Aref Ruqaa', 'Amiri', serif;
            font-size: clamp(1.15rem, 1.8vw, 1.45rem);
            color: #FFFFFF;
            margin: 0 0 14px;
            line-height: 1.5;
        }

        .lightbox-text-box {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px;
            padding: 16px 18px;
            margin-bottom: 14px;
            max-height: 280px;
            overflow-y: auto;
        }

        .lightbox-full-message {
            font-family: 'Amiri', serif;
            font-size: clamp(1.05rem, 1.5vw, 1.25rem);
            line-height: 1.9;
            color: #F3F4F6;
            margin: 0;
            white-space: pre-line;
            text-align: start;
        }
        html[dir="ltr"] .lightbox-full-message {
            font-family: var(--font-system, sans-serif);
            line-height: 1.65;
            font-size: clamp(0.95rem, 1.3vw, 1.1rem);
        }

        .lightbox-ref-box {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 0.82rem;
            color: var(--accent-gold, #DFBF95);
            background: rgba(223, 191, 149, 0.06);
            padding: 10px 14px;
            border-radius: 12px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .lightbox-modal-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .btn-lb-act {
            padding: 9px 16px;
            border-radius: 12px;
            font-size: 0.84rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: inherit;
        }

        .btn-lb-amen {
            background: rgba(223, 191, 149, 0.16);
            border: 1px solid #DFBF95;
            color: #DFBF95;
        }

        .btn-lb-amen.voted {
            background: #DFBF95;
            color: #06070A;
        }

        .lb-amen-count {
            background: rgba(0, 0, 0, 0.25);
            padding: 1px 7px;
            border-radius: 999px;
            font-size: 0.78rem;
        }

        .btn-lb-copy, .btn-lb-share {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #E5E7EB;
        }

        .btn-lb-dl {
            background: #FFFFFF;
            color: #06070A;
            border: none;
        }

        .btn-lb-act:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
        }

        /* Sleek Floating Close Button */
        .lightbox-close-btn {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(15, 17, 23, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.2s ease;
        }

        .lightbox-close-btn:hover {
            background: #FFFFFF;
            color: #000000;
            border-color: #FFFFFF;
            transform: scale(1.06);
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: scale(0.97); }
            to { opacity: 1; transform: scale(1); }
        }
        

/* ── Enterprise Performance Optimizations (content-visibility for heavy below-the-fold nodes) ── */
.faq-section, .memorial-gallery-section, .names-grid-container, .guides-container, .videos-grid, .memorial-stories-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ── Light Mode Milestone Prayer Box ── */
[data-theme="light"] .milestone-amen-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 246, 240, 0.96) 100%) !important;
    border: 1px solid rgba(197, 160, 112, 0.32) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] #milestoneFeaturedPrayerText {
    color: #1F2937 !important;
}
[data-theme="light"] .milestone-amen-box [data-i18n="milestone_featured_dua_title"] {
    color: #8C531B !important;
}
[data-theme="light"] .milestone-amen-box .btn-action-icon {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(197, 160, 112, 0.35) !important;
    color: #8C531B !important;
}