* {
            font-family: 'Cairo', sans-serif;
        }

        /* Dark Mode Variables */
        :root {
            --bg-primary: #ffffff;
            --bg-secondary: #f9fafb;
            --bg-gradient-start: #faf5ff;
            --bg-gradient-mid: #ffffff;
            --bg-gradient-end: #eff6ff;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --border-color: rgba(255, 255, 255, 0.3);
            --glass-bg: rgba(255, 255, 255, 0.85);
            --glass-border: rgba(255, 255, 255, 0.3);
            --card-shadow: rgba(0, 0, 0, 0.1);
            --header-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
            --footer-overlay: rgba(0, 0, 0, 0.4);
            --hover-bg: #f3f4f6;
            --card-bg: rgba(255, 255, 255, 0.9);
            --input-bg: #ffffff;
            --input-border: #e5e7eb;
            --button-hover: #f3f4f6;
            --success-bg: #ecfdf5;
            --warning-bg: #fffbeb;
            --error-bg: #fef2f2;
            --link-color: #6366f1;
            --link-hover: #4f46e5;
        }

        body.dark-mode {
            --bg-primary: #1a1a2e;
            --bg-secondary: #16213e;
            --bg-gradient-start: #0f1419;
            --bg-gradient-mid: #1a1a2e;
            --bg-gradient-end: #16213e;
            --text-primary: #e4e4e7;
            --text-secondary: #a1a1aa;
            --border-color: rgba(255, 255, 255, 0.1);
            --glass-bg: rgba(26, 26, 46, 0.85);
            --glass-border: rgba(255, 255, 255, 0.1);
            --card-shadow: rgba(0, 0, 0, 0.5);
            --header-bg: linear-gradient(to bottom, rgba(26, 26, 46, 0.95), rgba(26, 26, 46, 0.85));
            --footer-overlay: rgba(0, 0, 0, 0.7);
            --hover-bg: rgba(55, 65, 81, 0.3);
            --card-bg: rgba(26, 26, 46, 0.9);
            --input-bg: rgba(17, 24, 39, 0.8);
            --input-border: rgba(75, 85, 99, 0.4);
            --button-hover: rgba(55, 65, 81, 0.4);
            --success-bg: rgba(6, 78, 59, 0.2);
            --warning-bg: rgba(120, 53, 15, 0.2);
            --error-bg: rgba(127, 29, 29, 0.2);
            --link-color: #818cf8;
            --link-hover: #6366f1;
        }

        body {
            background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
            background-attachment: fixed;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            box-shadow: 0 8px 32px var(--card-shadow);
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px var(--card-shadow);
        }

        .gradient-bg {
            background: linear-gradient(135deg, #0D9394 0%, #0A7273 100%);
        }

        body.dark-mode .gradient-bg {
            background: linear-gradient(135deg, #0D9394 0%, #0A7273 100%);
        }

        .gold-gradient {
            background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
        }

        body.dark-mode .gold-gradient {
            background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
        }

        .header-gradient {
            background: var(--header-bg);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .avatar-card {
            transition: all 0.3s ease;
        }

        .avatar-card:hover {
            transform: scale(1.05);
        }

        .news-card {
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--glass-bg);
        }

        .news-card img {
            transition: transform 0.5s ease;
        }

        .news-card:hover img {
            transform: scale(1.1);
        }

        .category-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        body.dark-mode .category-badge {
            background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .stat-card {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border-right: 4px solid #667eea;
        }

        body.dark-mode .stat-card {
            background: linear-gradient(135deg, rgba(67, 56, 202, 0.2) 0%, rgba(91, 33, 182, 0.2) 100%);
            border-right: 4px solid #4338ca;
        }

        .page-container {
            display: none;
        }

        .page-container.active {
            display: block;
        }

        .parchment-bg {
            background: linear-gradient(to bottom, #f4e8d0, #e8d5b7);
            border: 2px solid #8b7355;
            box-shadow: inset 0 0 20px rgba(139, 115, 85, 0.2);
        }

        body.dark-mode .parchment-bg {
            background: linear-gradient(to bottom, #3d3426, #2d251a);
            border: 2px solid #5a4a37;
        }

        .martyr-section {
            background: linear-gradient(to right, rgba(139, 0, 0, 0.05), rgba(220, 20, 60, 0.05));
            border-top: 3px solid #8b0000;
            border-bottom: 3px solid #8b0000;
        }

        body.dark-mode .martyr-section {
            background: linear-gradient(to right, rgba(139, 0, 0, 0.15), rgba(220, 20, 60, 0.15));
        }

        .search-input {
            border: 2px solid #e5e7eb;
            transition: all 0.3s ease;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .search-input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .tab-button {
            transition: all 0.3s ease;
            color: var(--text-primary);
        }

        .tab-button.active {
            background: #667eea;
            color: white;
        }

        .glass-card-white {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        body.dark-mode .glass-card-white {
            background: rgba(26, 26, 46, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        #carouselTrack {
            padding: 10px 0;
        }

        /* Component Dark Mode Styles */
        body.dark-mode .glass-card {
            background: var(--glass-bg);
            border-color: var(--glass-border);
            box-shadow: 0 8px 32px var(--card-shadow);
        }

        body.dark-mode .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(67, 56, 202, 0.2);
        }

        body.dark-mode .tab-button {
            color: var(--text-primary);
        }

        body.dark-mode .tab-button:hover:not(.active) {
            background: var(--hover-bg);
        }

        body.dark-mode .tab-button.active {
            background: #4338ca;
            color: white;
        }

        /* Form Elements Dark Mode */
        body.dark-mode input,
        body.dark-mode select,
        body.dark-mode textarea {
            background: var(--input-bg);
            border-color: var(--input-border);
            color: var(--text-primary);
        }

        body.dark-mode input:focus,
        body.dark-mode select:focus,
        body.dark-mode textarea:focus {
            border-color: #4338ca;
            box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.2);
        }

        /* Text Colors for Dark Mode */
        body.dark-mode .text-gray-900 {
            color: #f9fafb !important;
        }

        body.dark-mode .text-gray-800 {
            color: var(--text-primary) !important;
        }

        body.dark-mode .text-gray-700 {
            color: #d4d4d8 !important;
        }

        body.dark-mode .text-gray-600 {
            color: var(--text-secondary) !important;
        }

        body.dark-mode .text-gray-500 {
            color: #71717a !important;
        }

        body.dark-mode .text-gray-400 {
            color: #a1a1aa !important;
        }

        body.dark-mode .text-gray-300 {
            color: #d4d4d8 !important;
        }

        body.dark-mode .text-gray-200 {
            color: #e4e4e7 !important;
        }

        body.dark-mode .text-gray-100 {
            color: #f4f4f5 !important;
        }

        /* Background Colors Dark Mode */
        body.dark-mode .bg-purple-50 {
            background: rgba(67, 56, 202, 0.1) !important;
        }

        body.dark-mode .bg-blue-50 {
            background: rgba(59, 130, 246, 0.1) !important;
        }

        body.dark-mode .bg-green-50 {
            background: rgba(16, 185, 129, 0.1) !important;
        }

        body.dark-mode .bg-orange-50 {
            background: rgba(245, 158, 11, 0.1) !important;
        }

        /* Hover Effects Dark Mode */
        body.dark-mode .hover\:bg-purple-100:hover {
            background: rgba(67, 56, 202, 0.2) !important;
        }

        body.dark-mode .hover\:shadow-lg:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important;
        }

        /* Background Colors for Dark Mode */
        body.dark-mode .bg-white {
            background-color: rgba(26, 26, 46, 0.9) !important;
        }

        body.dark-mode .bg-gray-50 {
            background-color: rgba(22, 33, 62, 0.5) !important;
        }

        body.dark-mode .bg-gray-100 {
            background-color: rgba(22, 33, 62, 0.7) !important;
        }

        body.dark-mode .bg-purple-50 {
            background-color: rgba(102, 126, 234, 0.1) !important;
        }

        /* Border Colors for Dark Mode */
        body.dark-mode .border-gray-200 {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        body.dark-mode .border-gray-300 {
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        /* Theme Toggle Icon Animation */
        #themeToggle {
            position: relative;
            overflow: hidden;
        }

        #themeIcon {
            transition: transform 0.5s ease;
        }

        body.dark-mode #themeIcon {
            transform: rotate(180deg);
        }

        /* Smooth transitions for all elements */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        /* Hero Section Dark Mode */
        .hero-overlay {
            background: var(--footer-overlay);
        }

        /* Card hover effects in dark mode */
        body.dark-mode .news-card:hover {
            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
        }

        body.dark-mode .avatar-card:hover {
            filter: brightness(1.2);
        }

        /* Input Focus Dark Mode */
        body.dark-mode input:focus,
        body.dark-mode textarea:focus {
            background-color: rgba(22, 33, 62, 0.8);
            border-color: #667eea;
        }

        /* Footer Dark Mode */
        body.dark-mode footer.gradient-bg {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        }