/* Custom Styles & Overrides */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #FAFAF9;
            color: #1C1917;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23065F46' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        .dark-mode {
            background-color: #0B1120;
            color: #F8FAFC;
            color-scheme: dark;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23EAB308' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* Glassmorphism utility */
        .glass {
            background: rgba(250, 250, 249, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .dark-mode .glass {
            background: rgba(11, 17, 32, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #D6D3D1; border-radius: 4px; }
        .dark-mode ::-webkit-scrollbar-thumb { background: #334155; }
        ::-webkit-scrollbar-thumb:hover { background: #A8A29E; }

        /* Hide Translation Utility */
        .hide-translation .translation-text { display: none; }
        .hide-translation hr.translation-divider { display: none; }

        /* Arabic Text Styling */
        .arabic-text {
            direction: rtl;
            line-height: 2.2;
            font-family: 'Amiri', serif;
        }

        /* Verse Number Marker */
        .verse-marker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAB308' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
            background-size: cover;
            font-size: 0.8rem;
            color: #065F46;
            margin: 0 10px;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
        }
        .dark-mode .verse-marker { color: #FAFAF9; }

        /* Mobile Sidebar transitions (Fixed to top safely) */
        @media (max-width: 768px) {
            #sidebar {
                position: fixed !important;
                top: 0;
                bottom: 0;
                height: 100dvh;
                z-index: 60;
                transition: transform 0.3s ease-in-out;
            }
            [dir="ltr"] #sidebar { transform: translateX(-100%); left: 0; border-right-width: 1px; border-left-width: 0; }
            [dir="rtl"] #sidebar { transform: translateX(100%); right: 0; border-left-width: 1px; border-right-width: 0; }
            [dir="ltr"] #sidebar.open { transform: translateX(0); }
            [dir="rtl"] #sidebar.open { transform: translateX(0); }
        }

        /* Loading Spinner */
        .loader {
            border: 4px solid #f3f3f3; border-top: 4px solid #065F46; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite;
        }
        .dark-mode .loader { border: 4px solid #1E293B; border-top: 4px solid #EAB308; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* Smooth Highlight Animation for Audio Sync */
        .highlight-verse {
            animation: pulse-ring 2s ease-out;
            background-color: rgba(6, 95, 70, 0.05);
            border-color: rgba(6, 95, 70, 0.5);
        }
        .dark-mode .highlight-verse {
            background-color: rgba(234, 179, 8, 0.1);
            border-color: rgba(234, 179, 8, 0.5);
        }
        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(234, 179, 8, 0); }
            100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
        }

        /* Tabs styling */
        .tab-btn.active { border-bottom: 2px solid #065F46; color: #065F46; font-weight: 600; }
        .dark-mode .tab-btn.active { border-bottom: 2px solid #EAB308; color: #EAB308; }

        /* Mobile selection restriction */
        @media (max-width: 768px) {
            body {
                -webkit-user-select: none;
                user-select: none;
            }
            input, select, textarea {
                -webkit-user-select: text;
                user-select: text;
            }
        }