:root {
            --primary: #1e3d6f;
            --secondary: #2c5aa0;
            --accent: #fefee3;
            --light: #fefee3;
            --dark: #1d3557;
            --text: #2d3748;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --bg-color: #f5f7fa;
            --card-bg: white;
            --header-bg: white;
            --footer-bg: transparent;
            --input-bg: white;
            --table-header-bg: #1e3d6f;
            --table-hover: #f8f9fa;
        }

        .dark-mode {
            --primary: #1486b6;
            --secondary: #6cb5f9;
            --accent: #2d3748;
            --light: #2d3748;
            --dark: #fefee3;
            --text: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            --bg-color: #1a202c;
            --card-bg: #4b5e53;
            --header-bg: #2d3748;
            --footer-bg: transparent;
            --input-bg: #92d6afc9;
            --table-header-bg: #1486b6;
            --table-hover: #4a5568;
        }
        body {
            margin: 0;
            padding: 0;
            background: var(--bg-color);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            /*padding: 20px;*/
            transition: all 0.3s ease;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .theme-toggle, .theme-toggle1 {
            background: var(--primary);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer !important;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
        }
        .theme-toggle:hover, .theme-toggle1:hover {
            transform: translateY(-5%) scale(1.1);
        }
        .header {
            background:var(--card-bg);
            color:var(--secondary);
        }
        .form {
            background:var(--card-bg);
        }
        #reciter-select, #surah-select {
            color:var(--primary);
        }
        #site-title, #site-subtitle {
            color:var(--secondary);
        }
        .surah-card {
            background:var(--card-bg) !important;
            color:var(--secondary) !important;
        }