/* ==================== UNIVERSAL DEVICE COMPATIBILITY ==================== */
/* Force all elements to use box-sizing border-box */
*, *::before, *::after {
    box-sizing: border-box !important;
}


button, .btn, .calendar-btn, .refresh-btn, .copy-btn {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

/* Force display properties for all interactive elements */
.calendar-btn, .refresh-btn, .copy-btn, .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==================== CSS VARIABLES ==================== */
:root {
    /* Darker Red Palette */
    --color-red: #B91C1C;
    --color-red-dark: #991B1B;
    --color-red-darker: #7F1D1D;
    
    /* Darker Blue Palette */
    --color-blue: #1E3A8A;
    --color-blue-dark: #1E40AF;
    
    /* Button Colors */
    --btn-primary: #F59E0B;     /* Orange */
    --btn-success: #10B981;     /* Green */
    --btn-danger: #EF4444;      /* Red */
    --btn-nav: #3B82F6;         /* Blue */
    
    /* Hover States (10% brighter) */
    --btn-primary-hover: #FBBF24;
    --btn-success-hover: #34D399;
    --btn-danger-hover: #F87171;
    --btn-nav-hover: #60A5FA;
    
    /* Button Text Colors */
    --btn-text-primary: #FFFFFF;
    --btn-text-nav: #3B82F6;
    --btn-text-nav-hover: #FFFFFF;
    --color-blue-darker: #0B3D91;
    
    /* Purple Palette */
    --color-purple: #7C3AED;
    --color-purple-dark: #6D28D9;
    --color-purple-darker: #5B21B6;
    
    /* Green Palette */
    --color-green: #059669;
    --color-green-dark: #047857;
    --color-green-darker: #065F46;
    
    /* Orange Palette */
    --color-orange: #EA580C;
    --color-orange-dark: #DC2626;
    --color-orange-darker: #B91C1C;
    
    /* Text Colors */
    --text-on-dark: #F3F4F6;
    --text-on-light: #1F2937;
    
    /* Additional CSS Variables for Components */
    --card-bg: rgba(255, 255, 255, 0.1);
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.2);
    --text-primary: #F3F4F6;
    --text-secondary: rgba(243, 244, 246, 0.7);
}

/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
}

/* ==================== NEW BUTTON SYSTEM ==================== */
/* Base Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 200ms ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    min-height: 48px;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:focus-visible {
    outline: 2px solid var(--btn-nav);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button Variants */
.btn--primary {
    background-color: var(--btn-primary);
    color: var(--btn-text-primary);
    border-color: var(--btn-primary);
}

.btn--primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

.btn--success {
    background-color: var(--btn-success);
    color: var(--btn-text-primary);
    border-color: var(--btn-success);
}

.btn--success:hover {
    background-color: var(--btn-success-hover);
    border-color: var(--btn-success-hover);
}

.btn--danger {
    background-color: var(--btn-danger);
    color: var(--btn-text-primary);
    border-color: var(--btn-danger);
}

.btn--danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
}

.btn--nav {
    background-color: transparent;
    color: var(--btn-text-nav);
    border-color: var(--btn-nav);
}

.btn--nav:hover {
    background-color: var(--btn-nav);
    color: var(--btn-text-nav-hover);
    border-color: var(--btn-nav);
}

/* Timer Button Styles - RECTANGULAR WITH ROUNDED EDGES */
.timer-mode-btn,
.set-timer-btn,
button.timer-mode-btn,
button.set-timer-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 12px !important; /* Increased for better rounded rectangle */
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    min-width: 120px !important;
    min-height: 44px !important;
    text-align: center !important;
}

.timer-mode-btn:hover,
.set-timer-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
}

.timer-mode-btn:active,
.set-timer-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .btn {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .btn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

/* Loading State */
.btn--loading {
    position: relative;
    color: transparent;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
}

@keyframes btn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==================== THEME COLORS ==================== */
/* Light Theme (Default) */
body[data-theme="light"] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #2c3e50;
}

body[data-theme="light"] .section-card,
body[data-theme="light"] .question-card,
body[data-theme="light"] .question-item {
    background: white;
    color: #2c3e50;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .big-btn {
    background: #3498db;
    color: white;
}

body[data-theme="light"] .big-btn:hover {
    background: #2980b9;
}

/* Light theme button variants */
body[data-theme="light"] .btn--primary {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

body[data-theme="light"] .btn--primary:hover {
    background: #2980b9;
    border-color: #2980b9;
}

body[data-theme="light"] .btn--success {
    background: linear-gradient(135deg, #00ff88, #00cc6a, #00aa55) !important;
    color: white !important;
    border-color: #00aa55 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="light"] .btn--success:hover {
    background: linear-gradient(135deg, #00cc6a, #00aa55, #008844) !important;
    border-color: #008844 !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="light"] .btn--danger {
    background: linear-gradient(135deg, #ff4757, #ff3742, #ff2831) !important;
    color: white !important;
    border-color: #ff2831 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="light"] .btn--danger:hover {
    background: linear-gradient(135deg, #ff3742, #ff2831, #ff1a25) !important;
    border-color: #ff1a25 !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="light"] .btn--nav {
    background: transparent;
    color: #3498db;
    border-color: #3498db;
}

body[data-theme="light"] .btn--nav:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

/* Light theme UI elements */
body[data-theme="light"] .global-search input {
    border-color: #333;
    background: rgba(255, 255, 255, 0.9);
    color: #2c3e50;
}

body[data-theme="light"] .global-search input:focus {
    border-color: #3498db;
    background: white;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
}

body[data-theme="light"] .theme-dropdown-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: #333;
    color: #2c3e50;
}

body[data-theme="light"] .theme-dropdown-btn:hover {
    background: white;
    border-color: #3498db;
}

body[data-theme="light"] .theme-dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    border-color: #333;
    backdrop-filter: blur(20px);
}

body[data-theme="light"] .theme-option {
    color: #2c3e50;
}

body[data-theme="light"] .theme-option:hover {
    background: rgba(52, 152, 219, 0.1);
}

body[data-theme="light"] .theme-option.active {
    background: rgba(52, 152, 219, 0.2);
}

body[data-theme="light"] .mute-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: #333;
    color: #2c3e50;
}

body[data-theme="light"] .mute-btn:hover {
    background: white;
    border-color: #3498db;
}

/* Fix theme selection buttons visibility */
body[data-theme="purple"] .theme-option,
body[data-theme="green"] .theme-option,
body[data-theme="orange"] .theme-option {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="purple"] .theme-option:hover,
body[data-theme="green"] .theme-option:hover,
body[data-theme="orange"] .theme-option:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

body[data-theme="purple"] .theme-option.active,
body[data-theme="green"] .theme-option.active,
body[data-theme="orange"] .theme-option.active {
    background: rgba(255, 255, 255, 0.3) !important;
    font-weight: bold;
}

/* Dark Theme */
body[data-theme="dark"] {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #ecf0f1;
}

body[data-theme="dark"] .section-card,
body[data-theme="dark"] .question-card,
body[data-theme="dark"] .question-item {
    background: #34495e;
    color: #ecf0f1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .big-btn {
    background: #3498db;
    color: white;
}

body[data-theme="dark"] .big-btn:hover {
    background: #2980b9;
}

/* Dark theme button colors to match other themes */
body[data-theme="dark"] .btn--success {
    background: linear-gradient(135deg, #00ff88, #00cc6a, #00aa55) !important;
    color: white !important;
    border-color: #00aa55 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="dark"] .btn--success:hover {
    background: linear-gradient(135deg, #00cc6a, #00aa55, #008844) !important;
    border-color: #008844 !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="dark"] .btn--danger {
    background: linear-gradient(135deg, #ff4757, #ff3742, #ff2831) !important;
    color: white !important;
    border-color: #ff2831 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="dark"] .btn--danger:hover {
    background: linear-gradient(135deg, #ff3742, #ff2831, #ff1a25) !important;
    border-color: #ff1a25 !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Red Theme - More Pronounced */
body[data-theme="red"] {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 25%, #991b1b 50%, #b91c1c 75%, #dc2626 100%);
    color: var(--text-on-dark);
}

body[data-theme="red"] .section-card,
body[data-theme="red"] .question-card,
body[data-theme="red"] .question-item {
    background: rgba(185, 28, 28, 0.2);
    color: var(--text-on-dark);
    box-shadow: 0 8px 32px rgba(185, 28, 28, 0.3);
    border: 2px solid var(--color-red);
    backdrop-filter: blur(20px);
}

body[data-theme="red"] .big-btn {
    background: linear-gradient(135deg, var(--color-red), var(--color-red-dark));
    color: var(--text-on-dark);
    border: 2px solid var(--color-red-darker);
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.4);
}

body[data-theme="red"] .big-btn:hover {
    background: linear-gradient(135deg, var(--color-red-dark), var(--color-red-darker));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(185, 28, 28, 0.5);
}

body[data-theme="red"] .big-btn:active {
    background: var(--color-red-darker);
    transform: translateY(0);
}

/* Red theme button variants */
body[data-theme="red"] .btn--primary {
    background: linear-gradient(135deg, var(--color-red), var(--color-red-dark));
    color: var(--text-on-dark);
    border-color: var(--color-red-darker);
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.4);
}

body[data-theme="red"] .btn--primary:hover {
    background: linear-gradient(135deg, var(--color-red-dark), var(--color-red-darker));
    border-color: var(--color-red-darker);
    box-shadow: 0 6px 20px rgba(185, 28, 28, 0.5);
}

body[data-theme="red"] .btn--success {
    background: linear-gradient(135deg, #00ff88, #00cc6a, #00aa55) !important;
    color: white !important;
    border-color: #00aa55 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="red"] .btn--success:hover {
    background: linear-gradient(135deg, #00cc6a, #00aa55, #008844) !important;
    border-color: #008844 !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="red"] .btn--danger {
    background: linear-gradient(135deg, #ff4757, #ff3742, #ff2831) !important;
    color: white !important;
    border-color: #ff2831 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="red"] .btn--danger:hover {
    background: linear-gradient(135deg, #ff3742, #ff2831, #ff1a25) !important;
    border-color: #ff1a25 !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="red"] .btn--nav {
    background: transparent;
    color: var(--color-red);
    border-color: var(--color-red);
}

body[data-theme="red"] .btn--nav:hover {
    background: var(--color-red);
    color: var(--text-on-dark);
    border-color: var(--color-red);
}

body[data-theme="red"] header h1,
body[data-theme="red"] .section-card h2 {
    color: #fef2f2;
    text-shadow: 0 2px 8px rgba(185, 28, 28, 0.5);
}

/* Blue Theme - More Pronounced */
body[data-theme="blue"] {
    background: linear-gradient(135deg, #0c1220 0%, #1e3a8a 25%, #1e40af 50%, #2563eb 75%, #3b82f6 100%);
    color: var(--text-on-dark);
}

body[data-theme="blue"] .section-card,
body[data-theme="blue"] .question-card,
body[data-theme="blue"] .question-item {
    background: rgba(30, 58, 138, 0.2);
    color: var(--text-on-dark);
    box-shadow: 0 8px 32px rgba(30, 58, 138, 0.3);
    border: 2px solid var(--color-blue);
    backdrop-filter: blur(20px);
}

body[data-theme="blue"] .big-btn {
    background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark));
    color: var(--text-on-dark);
    border: 2px solid var(--color-blue-darker);
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.4);
}

body[data-theme="blue"] .big-btn:hover {
    background: linear-gradient(135deg, var(--color-blue-dark), var(--color-blue-darker));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.5);
}

body[data-theme="blue"] .big-btn:active {
    background: var(--color-blue-darker);
    transform: translateY(0);
}

/* Blue theme button variants */
body[data-theme="blue"] .btn--primary {
    background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark));
    color: var(--text-on-dark);
    border-color: var(--color-blue-darker);
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.4);
}

body[data-theme="blue"] .btn--primary:hover {
    background: linear-gradient(135deg, var(--color-blue-dark), var(--color-blue-darker));
    border-color: var(--color-blue-darker);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.5);
}

body[data-theme="blue"] .btn--success {
    background: linear-gradient(135deg, #00ff88, #00cc6a, #00aa55) !important;
    color: white !important;
    border-color: #00aa55 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="blue"] .btn--success:hover {
    background: linear-gradient(135deg, #00cc6a, #00aa55, #008844) !important;
    border-color: #008844 !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="blue"] .btn--danger {
    background: linear-gradient(135deg, #ff4757, #ff3742, #ff2831) !important;
    color: white !important;
    border-color: #ff2831 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="blue"] .btn--danger:hover {
    background: linear-gradient(135deg, #ff3742, #ff2831, #ff1a25) !important;
    border-color: #ff1a25 !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="blue"] .btn--nav {
    background: transparent;
    color: var(--color-blue);
    border-color: var(--color-blue);
}

body[data-theme="blue"] .btn--nav:hover {
    background: var(--color-blue);
    color: var(--text-on-dark);
    border-color: var(--color-blue);
}

body[data-theme="blue"] header h1,
body[data-theme="blue"] .section-card h2 {
    color: #eff6ff;
    text-shadow: 0 2px 8px rgba(30, 58, 138, 0.5);
}

/* Purple Theme - More Pronounced */
body[data-theme="purple"] {
    background: linear-gradient(135deg, #0f0a1a 0%, #1a0b2e 25%, #2d1b69 50%, #4c1d95 75%, #7c3aed 100%);
}

body[data-theme="purple"] .section-card,
body[data-theme="purple"] .question-card,
body[data-theme="purple"] .question-item {
    background: rgba(124, 58, 237, 0.2);
    border: 2px solid var(--color-purple);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3);
}

body[data-theme="purple"] .big-btn {
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    border: 2px solid var(--color-purple-darker);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

body[data-theme="purple"] .big-btn:hover {
    background: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple-darker));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
}

body[data-theme="purple"] .big-btn:active {
    background: var(--color-purple-darker);
    transform: translateY(0);
}

/* Purple theme button variants */
body[data-theme="purple"] .btn--primary {
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    color: white;
    border-color: var(--color-purple-darker);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

body[data-theme="purple"] .btn--primary:hover {
    background: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple-darker));
    border-color: var(--color-purple-darker);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
}

body[data-theme="purple"] .btn--success {
    background: linear-gradient(135deg, #00ff88, #00cc6a, #00aa55) !important;
    color: white !important;
    border-color: #00aa55 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="purple"] .btn--success:hover {
    background: linear-gradient(135deg, #00cc6a, #00aa55, #008844) !important;
    border-color: #008844 !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="purple"] .btn--danger {
    background: linear-gradient(135deg, #ff4757, #ff3742, #ff2831) !important;
    color: white !important;
    border-color: #ff2831 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="purple"] .btn--danger:hover {
    background: linear-gradient(135deg, #ff3742, #ff2831, #ff1a25) !important;
    border-color: #ff1a25 !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="purple"] .btn--nav {
    background: transparent;
    color: var(--color-purple);
    border-color: var(--color-purple);
}

body[data-theme="purple"] .btn--nav:hover {
    background: var(--color-purple);
    color: white;
    border-color: var(--color-purple);
}

body[data-theme="purple"] header h1,
body[data-theme="purple"] .section-card h2 {
    color: #f3e8ff;
    text-shadow: 0 2px 8px rgba(124, 58, 237, 0.5);
}

/* Green Theme - More Pronounced */
body[data-theme="green"] {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 25%, #065f46 50%, #047857 75%, #059669 100%);
}

body[data-theme="green"] .section-card,
body[data-theme="green"] .question-card,
body[data-theme="green"] .question-item {
    background: rgba(5, 150, 105, 0.2);
    border: 2px solid var(--color-green);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.3);
}

body[data-theme="green"] .big-btn {
    background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
    border: 2px solid var(--color-green-darker);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}

body[data-theme="green"] .big-btn:hover {
    background: linear-gradient(135deg, var(--color-green-dark), var(--color-green-darker));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5);
}

body[data-theme="green"] .big-btn:active {
    background: var(--color-green-darker);
    transform: translateY(0);
}

/* Green theme button variants */
body[data-theme="green"] .btn--primary {
    background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
    color: white;
    border-color: var(--color-green-darker);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}

body[data-theme="green"] .btn--primary:hover {
    background: linear-gradient(135deg, var(--color-green-dark), var(--color-green-darker));
    border-color: var(--color-green-darker);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5);
}

body[data-theme="green"] .btn--success {
    background: linear-gradient(135deg, #00ff88, #00cc6a, #00aa55) !important;
    color: white !important;
    border-color: #00aa55 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="green"] .btn--success:hover {
    background: linear-gradient(135deg, #00cc6a, #00aa55, #008844) !important;
    border-color: #008844 !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="green"] .btn--danger {
    background: linear-gradient(135deg, #ff4757, #ff3742, #ff2831) !important;
    color: white !important;
    border-color: #ff2831 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="green"] .btn--danger:hover {
    background: linear-gradient(135deg, #ff3742, #ff2831, #ff1a25) !important;
    border-color: #ff1a25 !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="green"] .btn--nav {
    background: transparent;
    color: var(--color-green);
    border-color: var(--color-green);
}

body[data-theme="green"] .btn--nav:hover {
    background: var(--color-green);
    color: white;
    border-color: var(--color-green);
}

body[data-theme="green"] header h1,
body[data-theme="green"] .section-card h2 {
    color: #ecfdf5;
    text-shadow: 0 2px 8px rgba(5, 150, 105, 0.5);
}

/* Orange Theme - More Pronounced */
body[data-theme="orange"] {
    background: linear-gradient(135deg, #431407 0%, #7c2d12 25%, #ea580c 50%, #f97316 75%, #fb923c 100%);
}

body[data-theme="orange"] .section-card,
body[data-theme="orange"] .question-card,
body[data-theme="orange"] .question-item {
    background: rgba(234, 88, 12, 0.2);
    border: 2px solid var(--color-orange);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(234, 88, 12, 0.3);
}

body[data-theme="orange"] .big-btn {
    background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    border: 2px solid var(--color-orange-darker);
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.4);
}

body[data-theme="orange"] .big-btn:hover {
    background: linear-gradient(135deg, var(--color-orange-dark), var(--color-orange-darker));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
}

body[data-theme="orange"] .big-btn:active {
    background: var(--color-orange-darker);
    transform: translateY(0);
}

/* Orange theme button variants */
body[data-theme="orange"] .btn--primary {
    background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    color: white;
    border-color: var(--color-orange-darker);
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.4);
}

body[data-theme="orange"] .btn--primary:hover {
    background: linear-gradient(135deg, var(--color-orange-dark), var(--color-orange-darker));
    border-color: var(--color-orange-darker);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
}

body[data-theme="orange"] .btn--success {
    background: linear-gradient(135deg, #00ff88, #00cc6a, #00aa55) !important;
    color: white !important;
    border-color: #00aa55 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="orange"] .btn--success:hover {
    background: linear-gradient(135deg, #00cc6a, #00aa55, #008844) !important;
    border-color: #008844 !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="orange"] .btn--danger {
    background: linear-gradient(135deg, #ff4757, #ff3742, #ff2831) !important;
    color: white !important;
    border-color: #ff2831 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="orange"] .btn--danger:hover {
    background: linear-gradient(135deg, #ff3742, #ff2831, #ff1a25) !important;
    border-color: #ff1a25 !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="orange"] .btn--nav {
    background: transparent;
    color: var(--color-orange);
    border-color: var(--color-orange);
}

body[data-theme="orange"] .btn--nav:hover {
    background: var(--color-orange);
    color: white;
    border-color: var(--color-orange);
}

body[data-theme="orange"] header h1,
body[data-theme="orange"] .section-card h2 {
    color: #fff7ed;
    text-shadow: 0 2px 8px rgba(234, 88, 12, 0.5);
}

/* Header Layout */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    header {
        flex-direction: column;
        gap: 10px;
        padding: 8px;
    }
}

.header-left {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

@media (max-width: 768px) {
    .header-left {
        justify-content: center;
        margin-bottom: 8px;
    }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .header-right {
        gap: 10px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-right {
        gap: 8px;
        justify-content: center;
    }
}

.header-center {
    flex: 1;
    text-align: center;
    width: 100%;
    min-width: 100px;
}

@media (max-width: 768px) {
    .header-center {
        order: -1;
        width: 100%;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .header-center {
        order: -1;
        width: 100%;
        margin-bottom: 6px;
    }
}

.header-center h1 {
    margin: 0;
}

.header-center .subtitle {
    margin: 5px 0 0 0;
}

/* XP Display */
.xp-display {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.level-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.level-badge {
    background: linear-gradient(135deg, #CD7F32, #FFD700);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.level-name {
    font-size: 0.7rem;
    color: var(--text-color);
    opacity: 0.8;
    font-weight: 600;
}

.xp-bar-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
}

.xp-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.xp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    border-radius: 10px;
    transition: width 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.3) 100%);
    animation: xpShine 2s ease-in-out infinite;
}

@keyframes xpShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.xp-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-color);
    opacity: 0.8;
}

.xp-text span {
    font-weight: 600;
}

/* Removed old header style - using new layout below */

h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Animated Subtitle */
.animated-subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2em;
    position: relative;
}

.animated-word {
    position: absolute;
    opacity: 0;
    transform: scale(0.8) translateY(15px) rotateX(90deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
    white-space: nowrap;
    transform-origin: center bottom;
    filter: blur(2px);
}

.animated-word.active {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
    filter: blur(0px);
    animation: smoothGlow 3s ease-in-out infinite;
}

@keyframes smoothGlow {
    0%, 100% {
        text-shadow: 0 0 8px currentColor, 0 0 16px currentColor, 0 0 24px currentColor;
        transform: scale(1) translateY(0) rotateX(0deg);
    }
    25% {
        text-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 36px currentColor;
        transform: scale(1.02) translateY(-2px) rotateX(0deg);
    }
    50% {
        text-shadow: 0 0 16px currentColor, 0 0 32px currentColor, 0 0 48px currentColor;
        transform: scale(1.05) translateY(-3px) rotateX(0deg);
    }
    75% {
        text-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 36px currentColor;
        transform: scale(1.02) translateY(-2px) rotateX(0deg);
    }
}

/* Theme-specific animated word colors - BRIGHT AND VIBRANT */
[data-theme="red"] .animated-word {
    color: #ff6b6b;
    text-shadow: 0 0 15px #ff6b6b, 0 0 30px #ff6b6b, 0 0 45px #ff6b6b;
}

[data-theme="blue"] .animated-word {
    color: #4dabf7;
    text-shadow: 0 0 15px #4dabf7, 0 0 30px #4dabf7, 0 0 45px #4dabf7;
}

[data-theme="purple"] .animated-word {
    color: #9775fa;
    text-shadow: 0 0 15px #9775fa, 0 0 30px #9775fa, 0 0 45px #9775fa;
}

[data-theme="green"] .animated-word {
    color: #51cf66;
    text-shadow: 0 0 15px #51cf66, 0 0 30px #51cf66, 0 0 45px #51cf66;
}

[data-theme="orange"] .animated-word {
    color: #ff922b;
    text-shadow: 0 0 15px #ff922b, 0 0 30px #ff922b, 0 0 45px #ff922b;
}

[data-theme="light"] .animated-word {
    color: #000000;
    text-shadow: 0 0 15px #000000, 0 0 30px #000000, 0 0 45px #000000;
}

[data-theme="dark"] .animated-word {
    color: #ffffff;
    text-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff, 0 0 45px #ffffff;
}

.back-btn {
    position: absolute;
    left: 0;
    top: 0;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    color: var(--text-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.back-btn:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.back-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Theme-specific exit button styling */
body[data-theme="red"] .back-btn {
    background: rgba(185, 28, 28, 0.2);
    border-color: var(--color-red);
    color: #fef2f2;
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.3);
}

body[data-theme="red"] .back-btn:hover {
    background: rgba(185, 28, 28, 0.3);
    border-color: var(--color-red-dark);
    box-shadow: 0 6px 20px rgba(185, 28, 28, 0.4);
}

body[data-theme="blue"] .back-btn {
    background: rgba(30, 58, 138, 0.2);
    border-color: var(--color-blue);
    color: #eff6ff;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.3);
}

body[data-theme="blue"] .back-btn:hover {
    background: rgba(30, 58, 138, 0.3);
    border-color: var(--color-blue-dark);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4);
}

body[data-theme="purple"] .back-btn {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--color-purple);
    color: #f3e8ff;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

body[data-theme="purple"] .back-btn:hover {
    background: rgba(124, 58, 237, 0.3);
    border-color: var(--color-purple-dark);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

body[data-theme="green"] .back-btn {
    background: rgba(5, 150, 105, 0.2);
    border-color: var(--color-green);
    color: #ecfdf5;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
}

body[data-theme="green"] .back-btn:hover {
    background: rgba(5, 150, 105, 0.3);
    border-color: var(--color-green-dark);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
}

body[data-theme="orange"] .back-btn {
    background: rgba(234, 88, 12, 0.2);
    border-color: var(--color-orange);
    color: #fff7ed;
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.3);
}

body[data-theme="orange"] .back-btn:hover {
    background: rgba(234, 88, 12, 0.3);
    border-color: var(--color-orange-dark);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4);
}

/* ==================== THEME DROPDOWN ==================== */
.theme-switcher {
    display: flex;
    align-items: center;
}

.theme-dropdown {
    position: relative;
}

.theme-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

@media (max-width: 480px) {
    .theme-dropdown-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
        gap: 6px;
    }

    .theme-text {
        display: none;
    }

    .theme-emoji {
        font-size: 0.9rem;
    }
}

.theme-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-icon {
    font-size: 1.1rem;
}

.theme-text {
    font-weight: 600;
    font-size: 0.9rem;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.theme-dropdown-btn.active .dropdown-arrow {
    transform: rotate(180deg);
}

.theme-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    min-width: 150px;
    z-index: 1000;
    display: none;
    margin-top: 5px;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.theme-dropdown-menu.show {
    display: block;
}

@media (max-width: 480px) {
    .theme-dropdown-menu {
        position: fixed;
        top: auto;
        right: 10px;
        left: auto;
        min-width: 140px;
        max-height: 60vh;
    }
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-option:last-child {
    border-bottom: none;
}

.theme-option.active {
    background: rgba(30, 58, 138, 0.2);
}

.theme-emoji {
    font-size: 1.1rem;
}

.theme-name {
    font-weight: 600;
    color: var(--text-color);
}

/* ==================== SECTION CARDS ==================== */
.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
}

@media (max-width: 1024px) {
    .sections-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .sections-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
        padding: 0 5px;
    }
}

@media (max-width: 480px) {
    .sections-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 15px;
        padding: 0;
    }
}

.section-card {
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    color: inherit;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .section-card {
        padding: 20px;
        min-height: 100px;
    }
}

@media (max-width: 480px) {
    .section-card {
        padding: 15px;
        min-height: 90px;
    }
}

.section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    width: 100%;
    text-align: center;
}

@media (max-width: 768px) {
    .card-icon {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .card-icon {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }
}

.section-card h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: inherit;
    font-weight: 600;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.section-card p {
    opacity: 0.8;
    font-size: 0.95rem;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .section-card h2 {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }
    
    .section-card p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .section-card h2 {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }
    
    .section-card p {
        font-size: 0.7rem;
    }
}

/* ==================== GLOBAL REVISION ==================== */
.global-revision {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
}

@media (max-width: 768px) {
    .global-revision {
        padding: 20px;
    }

    .global-revision h3 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .global-revision {
        padding: 15px;
    }

    .global-revision h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
}

.section-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .section-checkboxes {
        gap: 10px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .section-checkboxes {
        gap: 8px;
        margin-bottom: 15px;
        justify-content: flex-start;
    }
}

.section-checkboxes label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .section-checkboxes label {
        padding: 12px 16px;
        font-size: 0.95rem;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .section-checkboxes label {
        padding: 10px 12px;
        font-size: 0.75rem;
        gap: 8px;
        flex: 0 0 calc(50% - 4px);
    }
}

.section-checkboxes input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .section-checkboxes input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .section-checkboxes input[type="checkbox"]::after {
        font-size: 12px !important;
    }
}

.section-checkboxes input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-color: #16a34a;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
}

.section-checkboxes input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.section-checkboxes input[type="checkbox"]:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* ==================== BUTTONS ==================== */
.big-btn {
    padding: 24px 48px;
    font-size: 1.4rem;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    min-width: 220px;
    min-height: 60px;
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .big-btn {
        padding: 16px 32px;
        font-size: 1.1rem;
        min-width: 160px;
        min-height: 48px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 480px) {
    .big-btn {
        padding: 14px 28px;
        font-size: 0.9rem;
        min-width: 140px;
        min-height: 44px;
        letter-spacing: 0.3px;
        border-radius: 12px;
    }
}

.big-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.big-btn:hover::before {
    left: 100%;
}

.big-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.big-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.primary-btn {
    /* Themed via body[data-theme] - styles defined in theme sections */
    background: var(--color-primary);
    color: var(--text-on-primary);
}

.secondary-btn {
    background: #f39c12 !important;
    color: white !important;
}

.secondary-btn:hover {
    background: #e67e22 !important;
}

.correct-btn {
    background: #27ae60 !important;
    color: white !important;
}

.correct-btn:hover {
    background: #229954 !important;
}

.wrong-btn {
    background: #e74c3c !important;
    color: white !important;
}

.wrong-btn:hover {
    background: #c0392b !important;
}

.nav-btn {
    background: #3498db !important;
    color: white !important;
}

.nav-btn:hover {
    background: #2980b9 !important;
}

/* ==================== SECTION VIEW ==================== */
.section-actions {
    text-align: center;
    margin-bottom: 30px;
}

.questions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.question-item {
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s;
}

.question-item:hover {
    transform: translateX(5px);
}

.question-item h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.question-item .answer {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    white-space: pre-wrap;
}

.question-item.revealed .answer {
    display: block;
}

/* Mobile Swipe Feedback */
.question-card.swipe-correct {
    animation: swipeCorrect 0.3s ease-out;
}

.question-card.swipe-wrong {
    animation: swipeWrong 0.3s ease-out;
}

.question-card.swipe-skip {
    animation: swipeSkip 0.3s ease-out;
}

@keyframes swipeCorrect {
    0% { transform: translateX(0) scale(1); }
    50% { transform: translateX(20px) scale(1.02); background: rgba(16, 185, 129, 0.2); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes swipeWrong {
    0% { transform: translateX(0) scale(1); }
    50% { transform: translateX(-20px) scale(1.02); background: rgba(239, 68, 68, 0.2); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes swipeSkip {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(10px) scale(0.98); background: rgba(245, 158, 11, 0.2); }
    100% { transform: translateY(0) scale(1); }
}

/* ==================== MOBILE RESPONSIVENESS ==================== */

/* Base responsive design */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    min-width: 320px; /* Minimum width for mobile */
}

/* Header responsive layout */
@media (max-width: 1024px) {
    header {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .header-left,
    .header-center,
    .header-right {
        width: 100%;
        justify-content: center;
    }
    
    .header-center {
        order: 1;
    }
    
    .header-left {
        order: 2;
    }
    
    .header-right {
        order: 3;
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    header {
        padding: 10px;
    }
    
    .header-center h1 {
        font-size: 1.8rem;
    }
    
    .header-center .subtitle {
        font-size: 1rem;
    }
    
    /* XP Display mobile */
    .xp-display {
        flex-direction: column;
        gap: 10px;
        padding: 8px 12px;
        width: 100%;
        max-width: 300px;
    }
    
    .level-info {
        flex-direction: row;
        gap: 15px;
    }
    
    .xp-bar-container {
        min-width: 200px;
    }
    
    /* Search bar mobile */
    .global-search {
        margin-right: 0;
        width: 100%;
        max-width: 250px;
    }
    
    .global-search input {
        width: 100%;
        font-size: 0.9rem;
        padding: 8px 12px;
    }
    
    /* Theme dropdown mobile */
    .theme-dropdown-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    .theme-dropdown-menu {
        right: 0;
        left: auto;
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    /* Very small screens */
    .header-center h1 {
        font-size: 1.5rem;
    }
    
    .header-center .subtitle {
        font-size: 0.9rem;
    }
    
    .xp-display {
        padding: 6px 10px;
    }
    
    .level-badge {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
    
    .level-name {
        font-size: 0.6rem;
    }
    
    .xp-text {
        font-size: 0.7rem;
    }
    
    .global-search input {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
    
    .theme-dropdown-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .theme-text {
        display: none; /* Hide "Themes" text on very small screens */
    }
}

/* Sections grid responsive - DEPRECATED, see new rules above */
/* These have been moved to the base .sections-grid styling */

/* Question cards responsive */
@media (max-width: 768px) {
    .question-card {
        margin: 10px;
        padding: 15px;
    }
    
    .question-content {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .answer {
        font-size: 0.95rem;
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    .question-card {
        margin: 5px;
        padding: 12px;
    }
    
    .question-content {
        font-size: 0.95rem;
    }
    
    .answer {
        font-size: 0.9rem;
    }
}

/* Revision buttons responsive */
@media (max-width: 768px) {
    .revision-buttons {
        flex-direction: column;
        gap: 10px;
        padding: 0 10px;
    }
    
    .revision-buttons button {
        width: 100%;
        min-height: 50px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .revision-buttons {
        padding: 0 5px;
    }
    
    .revision-buttons button {
        min-height: 45px;
        font-size: 0.9rem;
    }
}

/* Progress indicator responsive */
@media (max-width: 768px) {
.progress-indicator {
        margin: 15px 0;
        padding: 0 10px;
    }
    
    .progress-stats {
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .stat {
        font-size: 0.9rem;
        padding: 6px 10px;
    }
    
    .progress-bar-bg {
        height: 10px;
    }
    
    .progress-percentage {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .progress-stats {
        gap: 6px;
    }
    
    .stat {
        font-size: 0.8rem;
        padding: 5px 8px;
    }
    
    .progress-bar-bg {
        height: 8px;
    }
    
    .progress-percentage {
        font-size: 0.8rem;
    }
}

/* Search results responsive */
@media (max-width: 768px) {
    .search-results {
        max-height: 250px;
        font-size: 0.9rem;
    }
    
    .search-result-item {
        padding: 10px 12px;
    }
    
    .search-result-question {
        font-size: 0.85rem;
    }
    
    .search-result-section {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .search-results {
        max-height: 200px;
        font-size: 0.8rem;
    }
    
    .search-result-item {
        padding: 8px 10px;
    }
    
    .search-result-question {
        font-size: 0.8rem;
    }
    
    .search-result-section {
        font-size: 0.7rem;
    }
}

/* Theme dropdown responsive */
@media (max-width: 480px) {
    .theme-dropdown-menu {
        min-width: 120px;
    }
    
    .theme-option {
        padding: 10px 12px;
    }
    
    .theme-emoji {
        font-size: 1rem;
    }
    
    .theme-name {
        font-size: 0.8rem;
    }
}

/* Exit button responsive */
@media (max-width: 768px) {
    .back-btn {
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .back-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
}

/* Loading screen responsive */
@media (max-width: 768px) {
    .loading-content {
        padding: 20px;
    }
    
    .loading-title {
        font-size: 2rem;
    }
    
    .loading-subtitle {
        font-size: 1rem;
    }
    
    .fact-container {
        margin: 20px 0;
        padding: 15px;
    }
    
    .fact-label {
        font-size: 0.9rem;
    }
    
    .fact-text {
        font-size: 0.9rem;
    }
    
    .progress-container {
        margin-top: 20px;
    }
    
    .progress-bar {
        height: 6px;
    }
    
    .progress-text {
        font-size: 1rem;
    }
    
    .loading-status {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .loading-content {
        padding: 15px;
    }
    
    .loading-title {
        font-size: 1.5rem;
    }
    
    .loading-subtitle {
        font-size: 0.9rem;
    }
    
    .fact-container {
        margin: 15px 0;
        padding: 12px;
    }
    
    .fact-label {
        font-size: 0.8rem;
    }
    
    /* Week chart mobile fixes */
    .week-chart {
        gap: 4px;
        height: 180px;
        padding: 10px;
        overflow-x: auto;
        justify-content: flex-start;
}
    
    .fact-text {
        font-size: 0.8rem;
    }
    
    .progress-container {
    margin-top: 15px;
    }
    
    .progress-bar {
        height: 5px;
    }
    
    .progress-text {
        font-size: 0.9rem;
    }
    
    .loading-status {
        font-size: 0.8rem;
    }
}

/* Prevent horizontal overflow */
.page {
    max-width: 100vw;
    overflow-x: hidden;
    display: none;
    margin: 0 auto;
    min-height: calc(100vh - 100px);
    width: 100%;
    flex: 1;
}

.page.active {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .page {
        min-height: calc(100vh - 80px);
    }
}

@media (max-width: 480px) {
    .page {
        min-height: calc(100vh - 60px);
    }
}

.revision-container {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

.question-card {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Mobile/touch devices */
    .big-btn:hover,
    .theme-btn:hover,
    .back-btn:hover {
        transform: none;
    }
    
    .big-btn:active,
    .theme-btn:active,
    .back-btn:active {
        transform: scale(0.98);
    }
}
/* Enhanced Progress Indicator */
.progress-indicator {
    text-align: center;
    margin: 20px 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.progress-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    flex-direction: row;
}

.stat {
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat.timer {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.stat.correct {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.stat.wrong {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat.remaining {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.progress-bar-container {
    margin-top: 10px;
}

.progress-bar-bg {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-blue), var(--color-red));
    border-radius: 20px;
    transition: width 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.3) 100%);
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.progress-percentage {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 8px;
    opacity: 0.8;
}

.revision-container {
    max-width: 800px;
    margin: 0 auto;
}

.question-card {
    padding: 40px;
    border-radius: 16px;
    margin-bottom: 30px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.question-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.bookmark-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 10;
    opacity: 1;
    visibility: visible;
}

.bookmark-btn:active {
    transform: scale(0.9);
    transition: all 0.1s ease;
}

.bookmark-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.bookmark-btn.bookmarked:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), inset 0 0 30px rgba(255, 215, 0, 0.2);
    transform: scale(1.2);
}

.bookmark-btn:not(.bookmarked):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.15);
}

.bookmark-btn.bookmarked .bookmark-icon {
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
    font-size: 32px;
    animation: bookmarkPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

.bookmark-btn:not(.bookmarked) .bookmark-icon {
    font-size: 24px;
    opacity: 0.4;
    color: rgba(255, 255, 255, 0.4);
    text-shadow: none;
    filter: none;
}

.bookmark-btn.bookmarked {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.1);
}

.bookmark-btn:not(.bookmarked) {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

@keyframes bookmarkPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.6);
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
    }
}

/* Ensure bookmark is visible in all themes */
[data-theme] .bookmark-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .bookmark-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

/* Section bookmark buttons */
.bookmark-btn-section {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 10px;
    position: relative;
    z-index: 10;
}

.bookmark-btn-section:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.bookmark-btn-section.bookmarked {
    background: rgba(255, 215, 0, 0.2);
    border-color: #FFD700;
    color: #FFD700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.3);
    font-size: 20px;
    animation: bookmarkPulse 2s ease-in-out infinite;
}

.bookmark-btn-section:not(.bookmarked) {
    font-size: 18px;
    opacity: 0.7;
}

.bookmark-icon {
    transition: all 0.3s ease;
    font-size: 24px;
}

.section-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.8;
    color: inherit;
}

@media (max-width: 768px) {
    .section-stats {
        gap: 2px;
        margin-top: 6px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .section-stats {
        gap: 1px;
        margin-top: 4px;
        font-size: 9px;
    }
}

.question-count {
    font-weight: 600;
    color: inherit;
}

.bookmark-count {
    color: #FFD700;
    font-weight: 500;
}

/* ==================== STATISTICS DASHBOARD ==================== */
.stats-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stats-dashboard.show {
    opacity: 1;
}

.stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.stats-container {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 30px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.stats-header h2 {
    margin: 0;
    font-size: 2rem;
    color: var(--text-primary);
}

.close-stats {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.close-stats:hover {
    color: var(--text-primary);
}

.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-secondary);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-section {
    margin-bottom: 30px;
}

.stats-section h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 1.3rem;
}

/* ==================== WEEKLY PROGRESS BARS ==================== */
.week-progress-bars {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;
    height: 250px;
    padding: 20px 0;
}

.progress-bar-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.progress-bar-outer {
    position: relative;
    width: 60px;
    height: 200px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: end;
}

.progress-bar-inner {
    width: 100%;
    height: 0%;
    transition: height 0.8s ease-out;
    border-radius: 6px;
    position: relative;
}

.progress-bar-inner.low {
    background: linear-gradient(to top, #ef4444, #f87171, #fca5a5);
}

.progress-bar-inner.medium {
    background: linear-gradient(to top, #f59e0b, #fbbf24, #fde047);
}

.progress-bar-inner.high {
    background: linear-gradient(to top, #10b981, #34d399, #6ee7b7);
}

.progress-bar-day {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.progress-bar-count {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 20px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .week-progress-bars {
        gap: 6px;
        height: 200px;
        padding: 15px 10px;
        max-width: 100%;
        overflow-x: auto;
    }
    
    .progress-bar-outer {
        width: 35px;
        height: 160px;
        min-width: 35px;
    }
    
    .progress-bar-day {
        font-size: 0.7rem;
        bottom: 6px;
    }
    
    .progress-bar-count {
        font-size: 0.8rem;
        top: 6px;
        padding: 1px 4px;
        min-width: 16px;
    }
}

@media (max-width: 480px) {
    .week-progress-bars {
        gap: 4px;
        height: 180px;
        padding: 10px 5px;
    }
    
    .progress-bar-outer {
        width: 30px;
        height: 140px;
        min-width: 30px;
    }
    
    .progress-bar-day {
        font-size: 0.65rem;
        bottom: 5px;
    }
    
    .progress-bar-count {
        font-size: 0.7rem;
        top: 5px;
        padding: 1px 3px;
        min-width: 14px;
    }
}

.section-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.section-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.section-name {
    min-width: 100px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.section-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.section-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.section-accuracy {
    min-width: 50px;
    text-align: right;
    font-weight: bold;
    color: var(--text-primary);
}

.section-count {
    min-width: 80px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.achievement-item {
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.achievement-item.unlocked {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
    border-color: #FFD700;
}

.achievement-item.locked {
    background: var(--bg-secondary);
    opacity: 0.5;
}

.achievement-item.unlocked:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.achievement-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.achievement-name {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.achievement-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Achievement Notification */
.achievement-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
    z-index: 10001;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    max-width: 300px;
}

.achievement-notification.show {
    transform: translateX(0);
}

.achievement-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.achievement-content .achievement-icon {
    font-size: 2rem;
    margin: 0;
}

.achievement-text {
    flex: 1;
}

.achievement-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.achievement-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Update Notification */
.update-notification {
    position: fixed;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #1E3A8A, #0B1220);
    color: #FFF;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.3);
    z-index: 10001;
    transform: translateX(-400px);
    transition: transform 0.3s ease;
    max-width: 300px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.update-notification.show {
    transform: translateX(0);
}

.update-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.update-icon {
    font-size: 2rem;
    margin: 0;
}

.update-text {
    flex: 1;
}

.update-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.update-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

.update-btn {
    background: #FFD700;
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.update-btn:hover {
    background: #FFA500;
    transform: scale(1.05);
}

/* Mobile Responsiveness for Stats */
@media (max-width: 768px) {
    .stats-container {
        padding: 20px;
        margin: 10px;
    }
    
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .week-chart {
        gap: 8px;
        height: 200px;
        padding: 15px;
        overflow-x: auto;
    }
    
    
    .section-stat {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .section-name {
        min-width: auto;
        text-align: center;
    }
    
    .achievements-grid {
        grid-template-columns: 1fr;
    }
    
    .achievement-notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

.question-content,
.answer-content {
    font-size: 1.5rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.question-content {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--text-primary);
    position: relative;
    transition: all 0.3s ease;
}

/* Double-click functionality styling - only on top 50% */
.question-card {
    cursor: pointer;
    position: relative;
    /* Mobile-friendly touch improvements */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    touch-action: manipulation;
}

.question-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: scale(1.01);
}

/* Mobile touch feedback */
.question-card:active {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.99);
}

/* Remove visual indicator overlay completely to prevent blocking interaction */
.question-card::before {
    display: none;
}

.answer-content {
    margin-top: 30px;
    padding: 30px;
    border-top: none;
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.1), rgba(59, 130, 246, 0.1));
    border-radius: 15px;
    border: 2px solid rgba(30, 58, 138, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.1);
    position: relative;
    overflow: hidden;
    line-height: 1.8;
    font-size: 1.1rem;
}

.answer-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.8s ease;
}

.answer-content:hover::before {
    left: 100%;
}

/* Make answer text bold and properly styled */
.answer-content p {
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.8;
}

.answer-content strong {
    font-weight: 700;
}

.answer-content em {
    font-style: italic;
    opacity: 0.9;
}

.revision-controls,
.answer-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0;
    max-width: 100%;
    overflow-x: hidden;
}

.revision-controls .big-btn {
    flex: 1;
    min-width: 0;
    max-width: calc(50% - 7.5px);
    font-size: 1rem;
    padding: 16px 12px;
    min-height: 52px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .revision-controls {
        gap: 8px;
        padding: 0 10px;
    }
    
    .revision-controls .big-btn {
        font-size: 0.9rem;
        padding: 14px 8px;
        min-height: 48px;
        max-width: calc(50% - 4px);
        flex-basis: calc(50% - 4px);
    }
}

@media (max-width: 480px) {
    .revision-controls {
        gap: 5px;
        padding: 0 5px;
    }
    
    .revision-controls .big-btn {
        font-size: 0.8rem;
        padding: 12px 6px;
        min-height: 44px;
        max-width: calc(50% - 2.5px);
        flex-basis: calc(50% - 2.5px);
    }
}

@media (max-width: 360px) {
    .revision-controls {
        gap: 3px;
        padding: 0 3px;
    }
    
    .revision-controls .big-btn {
        font-size: 0.75rem;
        padding: 10px 4px;
        min-height: 40px;
        max-width: calc(50% - 1.5px);
        flex-basis: calc(50% - 1.5px);
    }
    
    /* Week chart extra small screens */
    .week-chart {
        gap: 3px;
        height: 160px;
        padding: 8px;
    }
    
}

/* ==================== REVEAL ANSWER BUTTONS ==================== */
.reveal-answer-btn {
    width: 100%;
    max-width: 300px;
    margin: 15px auto 0 auto;
    display: block;
}

@media (max-width: 768px) {
    .reveal-answer-btn {
        max-width: 100%;
        margin: 15px 0 0 0;
        padding: 14px 16px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .reveal-answer-btn {
        padding: 12px 14px;
        font-size: 0.8rem;
    }
}

/* ==================== CODE FORMATTING ==================== */
pre {
    background: rgba(0, 0, 0, 0.1);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 10px 0;
}

code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
}

/* ==================== IMAGES ==================== */
.question-image,
.answer-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    margin: 20px 0;
    display: block;
}

/* ==================== AUDIO ==================== */
audio {
    margin: 15px 0;
    width: 100%;
    max-width: 400px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .sections-grid {
        grid-template-columns: 1fr;
    }

    .big-btn {
        padding: 18px 30px;
        font-size: 1.1rem;
        min-width: 150px;
    }

    .question-content,
    .answer-content {
        font-size: 1.2rem;
    }

    .back-btn {
        position: static;
        margin-bottom: 20px;
        display: block;
        width: 100%;
    }
}

/* ==================== ENHANCED LOADING SCREEN ==================== */
.loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0B1220 0%, #1a1a2e 50%, #16213e 100%);
    z-index: 9999;
    transition: opacity 0.5s ease-out;
    overflow: hidden;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Animated Background */
.loading-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: float 6s ease-in-out infinite;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(30, 58, 138, 0.3) 0%, transparent 70%);
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(185, 28, 28, 0.3) 0%, transparent 70%);
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-20px) scale(1.1); }
}

/* Main Content */
.loading-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 600px;
    width: 90%;
}

.loading-brand {
    margin-bottom: 40px;
}

.loading-title {
    font-size: 3.5rem;
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-on-dark);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.loading-subtitle {
    font-size: 1.3rem;
    color: var(--text-on-dark);
    opacity: 0.9;
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* Did You Know Facts */
.fact-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 40px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fact-label {
    font-size: 1rem;
    color: var(--text-on-dark);
    opacity: 0.8;
    margin-bottom: 15px;
    font-weight: 500;
}

.fact-text {
    font-size: 1.2rem;
    color: var(--text-on-dark);
    line-height: 1.6;
    font-weight: 400;
    animation: factFade 0.5s ease-in-out;
}

@keyframes factFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Enhanced Progress Bar */
.progress-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.progress-bar {
    position: relative;
    height: 12px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.progress-track {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(30, 58, 138, 0.3) 0%, 
        rgba(185, 28, 28, 0.3) 50%, 
        rgba(52, 152, 219, 0.3) 100%);
    border-radius: 20px;
}

.progress-fill {
    position: relative;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-blue), var(--color-red));
    transition: width 100ms ease-out;
    border-radius: 20px;
    overflow: hidden;
}

.progress-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.3) 100%);
    animation: progressGlow 2s ease-in-out infinite;
}

@keyframes progressGlow {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.progress-text {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-on-dark);
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.loading-status {
    font-size: 1.2rem;
    color: var(--text-on-dark);
    opacity: 0.9;
    font-weight: 500;
    text-align: center;
}

.loading-animated-text {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-on-dark);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 16px rgba(255, 255, 255, 0.2);
    animation: smoothLoadingShine 4s ease-in-out infinite;
    display: inline-block;
    position: relative;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loading-animated-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: smoothLoadingGloss 3s ease-in-out infinite;
}

@keyframes smoothLoadingShine {
    0%, 100% {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 16px rgba(255, 255, 255, 0.2);
        transform: scale(1) translateY(0);
    }
    25% {
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.3);
        transform: scale(1.01) translateY(-1px);
    }
    50% {
        text-shadow: 0 0 16px rgba(255, 255, 255, 0.5), 0 0 32px rgba(255, 255, 255, 0.4);
        transform: scale(1.03) translateY(-2px);
    }
    75% {
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.3);
        transform: scale(1.01) translateY(-1px);
    }
}

@keyframes smoothLoadingGloss {
    0% {
        left: -100%;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

/* Static Brain for Reduced Motion */
.static-brain-illustration {
    position: absolute;
    display: none;
    z-index: 5;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.static-brain {
    font-size: 8rem;
    opacity: 0.3;
    animation: staticPulse 3s ease-in-out infinite;
}

@keyframes staticPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

/* Glass Morphism Overlay */
.glass-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    z-index: 1;
}

/* Global Search */
.global-search {
    position: relative;
    margin-right: 15px;
    width: auto;
}

.global-search input {
    width: 250px;
    padding: 10px 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .global-search {
        margin-right: 0;
        width: 100%;
        max-width: 280px;
    }

    .global-search input {
        width: 100%;
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .global-search {
        width: 100%;
        max-width: 100%;
        order: 1;
        margin-top: 8px;
    }

    .global-search input {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}

.global-search input:focus {
    outline: none;
    border-color: var(--color-blue);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(30, 58, 138, 0.3);
}

.global-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    margin-top: 5px;
}

.search-results.show {
    display: block;
}

@media (max-width: 480px) {
    .search-results {
        max-height: 200px;
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: auto;
        width: calc(100% - 20px);
    }
}

.search-result-item {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-question {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.search-result-section {
    font-size: 0.8rem;
    color: var(--color-blue);
    opacity: 0.8;
}

.search-highlight {
    background: rgba(30, 58, 138, 0.3);
    padding: 2px 4px;
    border-radius: 3px;
}

.no-results {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.mute-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

@media (max-width: 480px) {
    .mute-btn {
        padding: 6px 10px;
    }

    .mute-icon {
        font-size: 1rem;
    }
}

.mute-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.mute-btn.muted {
    background: rgba(185, 28, 28, 0.3);
    border-color: rgba(185, 28, 28, 0.5);
}

.mute-icon {
    font-size: 1.2rem;
    display: block;
}

.continue-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.continue-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.continue-btn:active {
    transform: translateY(0);
}

.continue-icon {
    font-size: 1rem;
    display: block;
}

.continue-text {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .gradient-orb {
        animation: none;
        display: none;
    }
    
    .static-brain-illustration {
        display: flex;
    }
    
    .progress-glow {
        animation: none;
    }
    
    .fact-text {
        animation: none;
    }
}

/* Loading Screen Responsive */
@media (max-width: 768px) {
    .loading-title {
        font-size: 2.5rem;
    }
    
    .loading-subtitle {
        font-size: 1.1rem;
    }
    
    .fact-container {
        padding: 20px;
        min-height: 100px;
    }
    
    .fact-text {
        font-size: 1.1rem;
    }
    
    .progress-text {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .loading-title {
        font-size: 2rem;
    }
    
    .loading-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .fact-container {
        padding: 15px;
        min-height: 80px;
    }
    
    .fact-text {
        font-size: 1rem;
    }
    
    .progress-text {
        font-size: 1.3rem;
    }
}

/* Disable scroll when loading */
body[aria-busy="true"] {
    overflow: hidden;
}

/* ==================== AI CHAT INTERFACE REDESIGN ==================== */
/* AI Chat Page Layout */
#aiChatPage {
    display: none;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: var(--bg-primary);
    backdrop-filter: blur(20px);
    margin: 0;
    padding: 0;
}

#aiChatPage.active {
    display: flex;
}

#aiChatPage header {
    background: var(--bg-secondary);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ai-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    height: calc(100vh - 80px);
    background: transparent;
}

.ai-chat-iframe-container {
    flex: 1;
    height: 100%;
    background: white;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

.ai-chat-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 20px 20px;
}

.ai-chat-footer {
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.ai-service-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.ai-service-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.ai-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
}

.ai-chat-header h3 {
    margin: 0;
    color: var(--text-primary, #fff);
    font-size: 1.3rem;
}

.ai-chat-close {
    background: none;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
}

/* AI Chat Messages Area */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
    scroll-behavior: smooth;
}

/* Custom scrollbar for messages */
.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* AI Message Styling - Theme Aware */
.ai-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    margin-bottom: 20px;
    animation: fadeInUp 0.3s ease;
}

.ai-message.user {
    align-self: flex-end;
    margin-left: auto;
}

.ai-message.assistant {
    align-self: flex-start;
    margin-right: auto;
}

/* Message Content - Theme Aware */
.ai-message-content {
    padding: 18px 24px;
    border-radius: 20px;
    line-height: 1.6;
    font-size: 1.1rem;
    word-wrap: break-word;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.ai-message.user .ai-message-content {
    background: var(--btn-primary);
    color: white;
    border-bottom-right-radius: 8px;
}

.ai-message.assistant .ai-message-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 8px;
}

/* Message Timestamp */
.ai-message-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 8px;
    opacity: 0.7;
    text-align: right;
}

.ai-message.user .ai-message-time {
    text-align: right;
}

.ai-message.assistant .ai-message-time {
    text-align: left;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary, rgba(255, 255, 255, 0.7));
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.ai-chat-input-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    background: var(--bg-secondary);
    backdrop-filter: blur(15px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

#aiChatInput {
    flex: 1;
    min-height: 60px;
    max-height: 120px;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 25px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    resize: none;
    outline: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-family: inherit;
}

#aiChatInput:focus {
    border-color: var(--color-blue, #3498db);
    background: var(--bg-primary, rgba(255, 255, 255, 0.15));
}

#aiChatInput::placeholder {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

/* AI Chat Input Area - Theme Aware */
.ai-chat-input-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    background: var(--bg-secondary);
    backdrop-filter: blur(15px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.ai-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

#aiChatInput {
    flex: 1;
    min-height: 60px;
    max-height: 120px;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 25px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.5;
    outline: none;
    resize: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-family: inherit;
}

#aiChatInput:focus {
    border-color: var(--btn-primary);
    background: var(--bg-primary);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

#aiChatInput::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

.ai-send-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--btn-primary);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.ai-send-btn:active {
    transform: scale(0.95);
}

.ai-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* AI Chat Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile Responsiveness for AI Chat */
@media (max-width: 768px) {
    #aiChatPage header {
        padding: 15px;
    }
    
    .ai-chat-messages {
        padding: 15px;
        gap: 15px;
    }
    
    .ai-message {
        max-width: 90%;
    }
    
    .ai-message-content {
        padding: 15px 20px;
        font-size: 1rem;
    }
    
    .ai-chat-input-container {
        padding: 15px;
    }
    
    #aiChatInput {
        min-height: 50px;
        padding: 14px 18px;
        font-size: 1rem;
    }
    
    .ai-send-btn {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .ai-chat-messages {
        padding: 10px;
        gap: 12px;
    }
    
    .ai-message-content {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    .ai-chat-input-container {
        padding: 10px;
    }
    
    #aiChatInput {
        min-height: 45px;
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    .ai-send-btn {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

/* ==================== AI CHAT CODE BLOCK STYLES ==================== */
.ai-message-content pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    position: relative;
    color: var(--text-primary);
}

.ai-message-content code {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Code Copy Button */
.ai-code-copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--btn-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s ease;
    z-index: 10;
}

.ai-code-copy-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}

.ai-code-copy-btn:active {
    transform: scale(0.95);
}

.ai-code-copy-btn.copied {
    background: var(--btn-success);
    opacity: 1;
}

/* Code block container */
.ai-code-block {
    position: relative;
    margin: 15px 0;
}

.ai-code-block pre {
    margin: 0;
    padding-right: 60px; /* Make room for copy button */
}

.ai-message-content ul, .ai-message-content ol {
    margin: 10px 0;
    padding-left: 20px;
}

.ai-message-content li {
    margin: 5px 0;
    line-height: 1.5;
}

.ai-message-content p {
    margin: 10px 0;
}

.ai-message-content strong {
    font-weight: 600;
    color: var(--btn-primary);
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page.active {
    animation: fadeIn 0.3s ease-in-out;
}

/* ==================== AUDIO PLAYER ==================== */
.speaker-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.speaker-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.speaker-btn:active {
    transform: scale(0.95);
}

/* ==================== CODE SNIPPETS BAR ==================== */
.code-snippets-bar {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.snippets-label {
    font-size: 0.9rem;
    opacity: 0.8;
    white-space: nowrap;
}

.snippets-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.snippet-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
    min-width: 40px;
    text-align: center;
}

.snippet-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.snippet-btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive snippets bar */
@media (max-width: 768px) {
    .code-snippets-bar {
        padding: 8px 15px;
        gap: 10px;
    }
    
    .snippets-container {
        gap: 6px;
    }
    
    .snippet-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
        min-width: 35px;
    }
}

@media (max-width: 480px) {
    .code-snippets-bar {
        padding: 6px 10px;
        gap: 8px;
    }
    
    .snippets-label {
        font-size: 0.8rem;
    }
    
    .snippets-container {
        gap: 4px;
    }
    
    .snippet-btn {
        padding: 3px 6px;
        font-size: 0.75rem;
        min-width: 30px;
    }
}

/* ==================== CODE EDITOR ==================== */
.code-editor-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}

.code-editor-container {
    background: #1e1e1e;
    border-radius: 12px;
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    color: #d4d4d4;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.code-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    background: #252526;
    border-radius: 12px 12px 0 0;
}

.code-editor-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.3rem;
}

.editor-controls {
    display: flex;
    gap: 10px;
}

.editor-btn {
    padding: 8px 16px;
    background: var(--color-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.3s;
    font-weight: 500;
}

.editor-btn:hover {
    background: var(--color-blue-dark);
    transform: translateY(-1px);
}

.editor-btn.small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.code-editor-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    background: #1e1e1e;
}

.code-editor-panel {
    display: flex;
    flex-direction: column;
    background: #252526;
    border-radius: 8px;
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #2d2d30;
    border-bottom: 1px solid #3e3e42;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}

.quick-symbols {
    display: flex;
    gap: 4px;
}

.quick-symbols button {
    padding: 4px 8px;
    background: #3e3e42;
    color: #d4d4d4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.quick-symbols button:hover {
    background: #505050;
}

.code-textarea {
    flex: 1;
    padding: 12px;
    background: #1e1e1e;
    color: #d4d4d4;
    border: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    min-height: 200px;
}

.code-textarea:focus {
    background: #252526;
}

.code-preview-section {
    display: flex;
    flex-direction: column;
    background: #252526;
    border-radius: 8px;
    margin: 0 10px 10px 10px;
    overflow: hidden;
    min-height: 300px;
}

.code-preview-iframe {
    flex: 1;
    border: none;
    background: white;
    min-height: 300px;
    width: 100%;
}

.code-editor-btn {
    padding: 10px 20px;
    background: var(--color-blue);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    margin-left: 12px;
    font-weight: 500;
}

.code-editor-btn:hover {
    background: var(--color-blue-dark);
    transform: translateY(-2px);
}

/* ==================== TAG FILTER UI ==================== */
.tag-filter-container {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.tag-filter-header h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    opacity: 0.9;
}

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.tag-chip {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    color: inherit;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.tag-chip:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.tag-chip.active {
    background: var(--color-blue);
    color: white;
    border-color: var(--color-blue-dark);
}

.tag-search {
    margin-top: 15px;
}

.tag-search input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.tag-search input:focus {
    outline: none;
    border-color: var(--color-blue);
    background: rgba(255, 255, 255, 0.2);
}

.tag-search input::placeholder {
    opacity: 0.6;
}

/* Code Editor Responsive */
@media (max-width: 1024px) {
    .code-editor-body {
        grid-template-columns: 1fr;
    }
    
    .code-textarea {
        min-height: 150px;
    }
}

@media (max-width: 768px) {
    .code-editor-modal {
        padding: 10px;
    }
    
    .code-editor-container {
        max-height: 95vh;
    }
    
    .editor-controls {
        flex-wrap: wrap;
    }
    
    .quick-symbols {
        display: none;
    }
}

/* ==================== UTILITIES ==================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

/* Make touch targets larger for iPad */
@media (hover: none) and (pointer: coarse) {
    .big-btn {
        min-height: 64px;
        font-size: 1.5rem;
        padding: 20px 40px;
    }

    .btn {
        min-height: 52px;
        font-size: 16px;
        padding: 18px 36px;
    }

    .section-card {
        padding: 40px;
    }

    .theme-btn {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }
}

/* Bookmark section info styling */
.bookmark-section-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* Language section special styling */
.language-info-box {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.1), rgba(59, 130, 246, 0.1));
    border: 2px solid rgba(30, 58, 138, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.1);
}

.language-translation {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.language-pronunciation {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.9;
}

/* Programming section answer styling - ensure visibility in all themes */
.language-info-box p {
    color: var(--text-primary) !important;
    font-weight: 600;
    line-height: 1.8;
}

/* Ensure ALL language section text is visible in white theme */
[data-theme="light"] .language-info-box {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.03));
    border: 2px solid rgba(0, 0, 0, 0.15);
    color: #1a1a1a !important;
}

[data-theme="light"] .language-info-box * {
    color: #1a1a1a !important;
}

[data-theme="light"] .language-info-box p {
    color: #1a1a1a !important;
}

[data-theme="light"] .language-info-box h3 {
    color: #1a1a1a !important;
}

[data-theme="light"] .language-info-box strong {
    color: #1a1a1a !important;
}

[data-theme="light"] .language-info-box div {
    color: #1a1a1a !important;
}

[data-theme="light"] .language-info-box em {
    color: #1a1a1a !important;
}

[data-theme="light"] .language-info-box span {
    color: #1a1a1a !important;
}

/* Language section specific elements */
[data-theme="light"] .language-translation {
    color: #1a1a1a !important;
}

/* Ensure answer content is visible in white theme */
[data-theme="light"] .answer-content {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .answer-content * {
    color: #1a1a1a !important;
}

[data-theme="light"] .answer-content p {
    color: #1a1a1a !important;
}

[data-theme="light"] .answer-content h3 {
    color: #1a1a1a !important;
}

/* Ensure question content is visible in white theme */
[data-theme="light"] .question-content {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .question-content h3 {
    color: #1a1a1a !important;
}

[data-theme="light"] .question-content p {
    color: #1a1a1a !important;
}

[data-theme="light"] .question-content div {
    color: #1a1a1a !important;
}

[data-theme="light"] .question-content span {
    color: #1a1a1a !important;
}

[data-theme="light"] .question-content strong {
    color: #1a1a1a !important;
}

[data-theme="light"] .question-content em {
    color: #1a1a1a !important;
}

/* Fix white theme visibility in Quick Launch */
[data-theme="light"] .quick-launch-sidebar {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)) !important;
    border-left: 2px solid rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .quick-launch-header {
    color: #ffffff !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .quick-launch-header h3 {
    color: #ffffff !important;
}

[data-theme="light"] .close-sidebar {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)) !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="light"] .quick-launch-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .quick-launch-btn:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)) !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .app-name {
    color: #ffffff !important;
}

[data-theme="light"] .app-icon {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .app-icon::before {
    color: #ffffff !important;
}

/* Fix white theme visibility for search bar and global elements */
[data-theme="light"] .global-search input {
    background: rgba(0, 0, 0, 0.1) !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .global-search input:focus {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3) !important;
}

[data-theme="light"] .global-search input::placeholder {
    color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .search-results {
    background: rgba(0, 0, 0, 0.1) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .search-result-item {
    background: rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .search-result-item:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .search-result-question {
    color: #1a1a1a !important;
}

[data-theme="light"] .search-result-section {
    color: #666666 !important;
}

[data-theme="light"] .search-highlight {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #1a1a1a !important;
}

/* Fix header elements in white theme */
[data-theme="light"] header {
    background: rgba(0, 0, 0, 0.1) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .header-center h1 {
    color: #1a1a1a !important;
}

[data-theme="light"] .header-center .subtitle {
    color: #666666 !important;
}

[data-theme="light"] .btn {
    background: rgba(0, 0, 0, 0.1) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .btn:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .btn--primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn--primary:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
}

/* Fix AI Chat white theme visibility */
[data-theme="light"] .ai-chat-container {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .ai-chat-messages {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .ai-message {
    color: #1a1a1a !important;
}

[data-theme="light"] .ai-message.user {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
}

[data-theme="light"] .ai-message.assistant {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .ai-chat-input-container {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] #aiChatInput {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1a1a !important;
}

[data-theme="light"] #aiChatInput:focus {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="light"] #aiChatInput::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .ai-chat-header {
    background: rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .ai-chat-header h3 {
    color: #1a1a1a !important;
}

[data-theme="light"] .ai-chat-close {
    color: #1a1a1a !important;
}

[data-theme="light"] .ai-chat-close:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #1a1a1a !important;
}

/* Fix wrong/correct buttons in white theme */
[data-theme="light"] .correct-btn {
    background: #27ae60 !important;
    color: #ffffff !important;
    border: 2px solid #27ae60 !important;
}

[data-theme="light"] .correct-btn:hover {
    background: #229954 !important;
    border-color: #229954 !important;
    color: #ffffff !important;
}

[data-theme="light"] .wrong-btn {
    background: #e74c3c !important;
    color: #ffffff !important;
    border: 2px solid #e74c3c !important;
}

[data-theme="light"] .wrong-btn:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #ffffff !important;
}

[data-theme="light"] .nav-btn {
    background: #3498db !important;
    color: #ffffff !important;
    border: 2px solid #3498db !important;
}

[data-theme="light"] .nav-btn:hover {
    background: #2980b9 !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}

/* Theme-specific language box styling */
[data-theme="red"] .language-info-box {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.1), rgba(239, 68, 68, 0.1));
    border-color: rgba(185, 28, 28, 0.3);
    box-shadow: 0 4px 20px rgba(185, 28, 28, 0.1);
}

[data-theme="purple"] .language-info-box {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(147, 51, 234, 0.1));
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
}

[data-theme="green"] .language-info-box {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(16, 185, 129, 0.1));
    border-color: rgba(5, 150, 105, 0.3);
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.1);
}

[data-theme="orange"] .language-info-box {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(249, 115, 22, 0.1));
    border-color: rgba(234, 88, 12, 0.3);
    box-shadow: 0 4px 20px rgba(234, 88, 12, 0.1);
}

/* ==================== QUICK LAUNCH SIDEBAR ==================== */
.quick-launch-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-blue);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-launch-toggle:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.quick-launch-toggle .toggle-icon {
    display: block;
    font-size: 24px;
    font-weight: 300;
}

.quick-launch-sidebar {
    position: fixed;
    top: 0;
    right: -220px;
    height: 100vh;
    width: 200px;
    background: var(--bg-secondary);
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.quick-launch-sidebar.open {
    right: 0;
}

.quick-launch-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quick-launch-header h3 {
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary);
}

.close-sidebar {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.close-sidebar:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.quick-launch-apps {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

.quick-launch-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 25px;
    margin: 8px 0;
    border: 2px solid rgba(102, 126, 234, 0.2);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.05));
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary);
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
}

.quick-launch-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.quick-launch-btn:hover::before {
    left: 100%;
}

.quick-launch-btn:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.15));
    border-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.quick-launch-btn:active {
    transform: translateY(0) scale(0.98);
    transition: all 0.1s ease;
}

.quick-launch-btn .app-icon {
    font-size: 1.3rem;
    width: 28px;
    text-align: center;
}

/* Quick Launch App Icons - Real Brand Logos */
.quick-launch-btn .app-icon.youtube::before {
    content: '';
    background: #FF0000;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.quick-launch-btn .app-icon.youtube::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
}

.quick-launch-btn .app-icon.chatgpt::before {
    content: '';
    background: linear-gradient(135deg, #10A37F, #1a7f64);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.quick-launch-btn .app-icon.chatgpt::after {
    content: 'C';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #ffffff;
    font-weight: 900;
    font-family: 'Arial', sans-serif;
}

.quick-launch-btn .app-icon.gemini::before {
    content: '';
    background: linear-gradient(135deg, #4285F4, #34A853, #FBBC04, #EA4335);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.quick-launch-btn .app-icon.gemini::after {
    content: 'G';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #ffffff;
    font-weight: 900;
    font-family: 'Arial', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.quick-launch-btn .app-icon.w3schools {
    font-size: 1.4rem;
    width: 32px;
    height: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #04AA6D;
    border-radius: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.quick-launch-btn .app-icon.w3schools::before {
    content: 'W';
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-family: 'Arial', sans-serif;
    letter-spacing: 0px;
    line-height: 1;
    white-space: nowrap;
    z-index: 1;
}

.quick-launch-btn:hover .app-icon.w3schools {
    background: #059862;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 15px rgba(4, 170, 109, 0.3);
}

/* Mobile-specific W3Schools text fix */
@media (max-width: 768px) {
    .quick-launch-btn .app-icon.w3schools::before {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .quick-launch-btn .app-icon.w3schools::before {
        font-size: 12px;
    }
}

.quick-launch-btn .app-icon.newtab::before {
    content: '';
    background: linear-gradient(135deg, #4285F4, #34A853, #FBBC04, #EA4335);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.quick-launch-btn .app-icon.newtab::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffffff 0%, #ffffff 15%, transparent 15%);
    box-shadow: 
        /* Horizontal line */
        0 0 0 1px rgba(255, 255, 255, 0.8),
        /* Vertical line */
        0 0 0 1px rgba(255, 255, 255, 0.8),
        /* Inner glow */
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.quick-launch-btn .app-icon.home::before {
    content: '';
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.quick-launch-btn .app-icon.home::after {
    content: '🏠';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.quick-launch-btn .app-icon.askai::before {
    content: '';
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.quick-launch-btn .app-icon.askai::after {
    content: '🤖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.quick-launch-btn .app-icon.adminpanel::before {
    content: '';
    background: linear-gradient(135deg, #6B7280, #374151);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.quick-launch-btn .app-icon.adminpanel::after {
    content: '⚙️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.quick-launch-btn .app-icon:not(.w3schools) {
    font-size: 1.4rem;
    width: 32px;
    height: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quick-launch-btn:hover .app-icon:not(.w3schools) {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.quick-launch-btn .app-name {
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.quick-launch-btn:hover .app-name {
    transform: translateX(3px);
    text-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

/* AI Chat Interface */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    padding: 20px;
    gap: 20px;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-message {
    padding: 15px 20px;
    border-radius: 12px;
    max-width: 80%;
    animation: fadeIn 0.3s ease;
}

.ai-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.ai-message.assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ai-message.loading {
    opacity: 0.6;
}

.ai-chat-input-container {
    display: flex;
    gap: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-chat-input-container .btn {
    padding: 15px 30px;
    white-space: nowrap;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dark mode */
[data-theme="dark"] .quick-launch-sidebar {
    background: #1a1a1a;
}

[data-theme="dark"] .quick-launch-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Light mode */
[data-theme="light"] .quick-launch-sidebar {
    background: #ffffff;
}

[data-theme="light"] .quick-launch-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .quick-launch-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .close-sidebar:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Theme-specific toggle button colors */
[data-theme="red"] .quick-launch-toggle {
    background: var(--color-red);
}

[data-theme="purple"] .quick-launch-toggle {
    background: var(--color-purple);
}

[data-theme="green"] .quick-launch-toggle {
    background: var(--color-green);
}

[data-theme="orange"] .quick-launch-toggle {
    background: var(--color-orange);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .quick-launch-sidebar {
        width: 180px;
        right: -200px;
    }
    
    .quick-launch-toggle {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
}

/* Section label badge in revision mode */
.question-section-label {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 12px;
    background: var(--color-blue);
    color: white;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 10;
    opacity: 1;
    display: block;
}

@media (max-width: 768px) {
    .question-section-label {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 15px;
        display: block;
    margin-bottom: 15px;
    opacity: 0.9;
    z-index: 5;
}

[data-theme="red"] .question-section-label {
    background: var(--color-red);
}

[data-theme="purple"] .question-section-label {
    background: var(--color-purple);
}

[data-theme="green"] .question-section-label {
    background: var(--color-green);
}

[data-theme="orange"] .question-section-label {
    background: var(--color-orange);
}

/* ==================== FLOATING BUBBLES BACKGROUND ==================== */
.floating-bubbles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -10;
    overflow: hidden;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.1));
    animation: bubbleFloat 20s linear infinite;
    opacity: 0.4;
    backdrop-filter: blur(1px);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bubble:nth-child(1) {
    width: 40px;
    height: 40px;
    left: 5%;
    animation-delay: 0s;
    animation-duration: 25s;
}

.bubble:nth-child(2) {
    width: 60px;
    height: 60px;
    left: 15%;
    animation-delay: -3s;
    animation-duration: 30s;
}

.bubble:nth-child(3) {
    width: 30px;
    height: 30px;
    left: 25%;
    animation-delay: -6s;
    animation-duration: 22s;
}

.bubble:nth-child(4) {
    width: 50px;
    height: 50px;
    left: 35%;
    animation-delay: -9s;
    animation-duration: 28s;
}

.bubble:nth-child(5) {
    width: 45px;
    height: 45px;
    left: 45%;
    animation-delay: -12s;
    animation-duration: 26s;
}

.bubble:nth-child(6) {
    width: 35px;
    height: 35px;
    left: 55%;
    animation-delay: -15s;
    animation-duration: 24s;
}

.bubble:nth-child(7) {
    width: 55px;
    height: 55px;
    left: 65%;
    animation-delay: -18s;
    animation-duration: 32s;
}

.bubble:nth-child(8) {
    width: 25px;
    height: 25px;
    left: 75%;
    animation-delay: -21s;
    animation-duration: 20s;
}

.bubble:nth-child(9) {
    width: 65px;
    height: 65px;
    left: 85%;
    animation-delay: -24s;
    animation-duration: 35s;
}

.bubble:nth-child(10) {
    width: 40px;
    height: 40px;
    left: 95%;
    animation-delay: -27s;
    animation-duration: 27s;
}

@keyframes bubbleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
        transform: translateY(95vh) translateX(10px) scale(0.3);
    }
    15% {
        opacity: 0.8;
        transform: translateY(85vh) translateX(15px) scale(0.6);
    }
    85% {
        opacity: 0.8;
        transform: translateY(15vh) translateX(-20px) scale(1);
    }
    95% {
        opacity: 0.8;
        transform: translateY(5vh) translateX(25px) scale(0.8);
    }
    100% {
        transform: translateY(-5vh) translateX(30px) scale(0);
        opacity: 0;
    }
}

/* ==================== NOTES MODAL STYLES ==================== */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    backdrop-filter: blur(5px) !important;
    overflow: hidden !important;
}

/* Force modal to show when display: flex is set inline */
.modal[style*="display: flex"],
.modal[style*="display:flex"] {
    display: flex !important;
}

/* Ensure modal is hidden by default */
.modal:not([style*="display: flex"]):not([style*="display:flex"]) {
    display: none !important;
}

.modal-content {
    background: var(--color-blue-darker);
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    margin: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--border-color);
    transform: translateY(0);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

.modal-header h2, .modal-header h3 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.5rem;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--btn-danger);
    color: white;
}

.modal-body {
    padding: 20px;
    max-height: calc(90vh - 100px);
    overflow-y: auto;
}

.notes-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.notes-search {
    flex: 1;
    max-width: 300px;
}

.notes-search input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
}

.notes-search input:focus {
    outline: none;
    border-color: var(--btn-primary);
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.note-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    transition: all 0.2s ease;
    position: relative;
}

.note-card:hover {
    border-color: var(--btn-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.note-content {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.note-toolbar {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.note-card:hover .note-toolbar {
    opacity: 1;
}

.btn-copy, .btn-edit, .btn-delete {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy {
    background: var(--btn-success);
    color: white;
}

.btn-edit {
    background: var(--btn-primary);
    color: white;
}

.btn-delete {
    background: var(--btn-danger);
    color: white;
}

.btn-copy:hover, .btn-edit:hover, .btn-delete:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.note-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.note-edit-actions .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    min-width: auto;
    flex: 0 0 auto;
}

#noteEditContent {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    min-height: 200px;
}

#noteEditContent:focus {
    outline: none;
    border-color: var(--btn-primary);
}

.notes-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px;
    font-style: italic;
}

.empty-notes {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px;
    font-style: italic;
}

.empty-notes h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

/* Code blocks in notes */
.note-content code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--btn-primary);
}

.note-content pre {
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 10px 0;
    border-left: 4px solid var(--btn-primary);
}

.note-content pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
}

/* ==================== COPY BUTTONS STYLES ==================== */
.question-copy-section, .answer-copy-section {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-copy-question, .btn-copy-answer, .btn-copy-qa {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-copy-question {
    background: var(--btn-primary);
    color: white;
}

.btn-copy-answer {
    background: var(--btn-success);
    color: white;
}

.btn-copy-qa {
    background: var(--btn-nav);
    color: white;
}

.btn-copy-question:hover, .btn-copy-answer:hover, .btn-copy-qa:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-copy-question:active, .btn-copy-answer:active, .btn-copy-qa:active {
    transform: translateY(0);
}

/* ==================== AI MESSAGE FORMATTING ==================== */
.ai-message {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
    max-width: 100%;
    word-wrap: break-word;
}

.ai-message.user {
    background: var(--btn-primary);
    color: white;
    margin-left: 20%;
    text-align: right;
}

.ai-message.assistant {
    background: var(--bg-secondary);
    color: var(--text-primary);
    margin-right: 20%;
    border: 1px solid var(--border-color);
}

.ai-message.loading {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

.ai-paragraph {
    line-height: 1.6;
    margin-bottom: 15px;
    max-width: 72ch;
}

.ai-paragraph:last-child {
    margin-bottom: 0;
}

.ai-codeblock {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    overflow-x: auto;
    font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
    font-size: 0.9em;
    line-height: 1.4;
    border-left: 4px solid var(--btn-primary);
}

.ai-codeblock code {
    background: none;
    padding: 0;
    color: var(--text-primary);
    font-family: inherit;
}

/* Lists in AI messages */
.ai-paragraph ul, .ai-paragraph ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.ai-paragraph li {
    margin-bottom: 5px;
    line-height: 1.6;
}

/* Inline code in AI messages */
.ai-paragraph code:not(.ai-codeblock code) {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
    font-size: 0.9em;
    color: var(--btn-primary);
}

/* Responsive design for AI messages */
@media (max-width: 768px) {
    .ai-message.user {
        margin-left: 10%;
    }
    
    .ai-message.assistant {
        margin-right: 10%;
    }
    
    .ai-paragraph {
        max-width: 100%;
    }
}

/* ==================== CALENDAR BUTTON STYLES ==================== */
.calendar-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: clamp(8px, 2vw, 16px) clamp(12px, 3vw, 24px) !important;
    background: #10B981 !important; /* Fallback green */
    background: var(--btn-success, #10B981) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: clamp(12px, 2.5vw, 16px) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    min-height: clamp(36px, 8vw, 48px) !important;
    min-width: clamp(36px, 8vw, 48px) !important;
}

.calendar-btn:hover {
    background: #34D399 !important; /* Fallback green hover */
    background: var(--btn-success-hover, #34D399) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.calendar-btn:active {
    transform: translateY(0) !important;
}

.calendar-btn:focus {
    outline: 2px solid #10B981 !important;
    outline-offset: 2px !important;
}

/* ==================== MODAL RESPONSIVE STYLES ==================== */
@media (min-width: 1200px) {
    .modal-content {
        max-width: 900px;
        margin: 2rem auto;
    }
}

@media (min-width: 1600px) {
    .modal-content {
        max-width: 1000px;
        margin: 3rem auto;
    }
}

/* Custom scrollbar styling for code editor - More specific */
.code-editor-modal #htmlEditor::-webkit-scrollbar,
.code-editor-modal #cssEditor::-webkit-scrollbar,
.code-editor-modal #jsEditor::-webkit-scrollbar,
.code-editor-container #htmlEditor::-webkit-scrollbar,
.code-editor-container #cssEditor::-webkit-scrollbar,
.code-editor-container #jsEditor::-webkit-scrollbar,
#htmlEditor::-webkit-scrollbar,
#cssEditor::-webkit-scrollbar,
#jsEditor::-webkit-scrollbar,
.code-textarea::-webkit-scrollbar,
.code-editor-panel::-webkit-scrollbar,
.code-editor-body::-webkit-scrollbar,
.code-editor-modal::-webkit-scrollbar {
    height: 30px !important; /* Make horizontal scrollbar even thicker */
    width: 30px !important;  /* Make vertical scrollbar even thicker */
}

.code-editor-modal #htmlEditor::-webkit-scrollbar-track,
.code-editor-modal #cssEditor::-webkit-scrollbar-track,
.code-editor-modal #jsEditor::-webkit-scrollbar-track,
.code-editor-container #htmlEditor::-webkit-scrollbar-track,
.code-editor-container #cssEditor::-webkit-scrollbar-track,
.code-editor-container #jsEditor::-webkit-scrollbar-track,
#htmlEditor::-webkit-scrollbar-track,
#cssEditor::-webkit-scrollbar-track,
#jsEditor::-webkit-scrollbar-track,
.code-textarea::-webkit-scrollbar-track,
.code-editor-panel::-webkit-scrollbar-track,
.code-editor-body::-webkit-scrollbar-track,
.code-editor-modal::-webkit-scrollbar-track {
    background: #2d2d2d !important;
    border-radius: 15px !important;
}

.code-editor-modal #htmlEditor::-webkit-scrollbar-thumb,
.code-editor-modal #cssEditor::-webkit-scrollbar-thumb,
.code-editor-modal #jsEditor::-webkit-scrollbar-thumb,
.code-editor-container #htmlEditor::-webkit-scrollbar-thumb,
.code-editor-container #cssEditor::-webkit-scrollbar-thumb,
.code-editor-container #jsEditor::-webkit-scrollbar-thumb,
#htmlEditor::-webkit-scrollbar-thumb,
#cssEditor::-webkit-scrollbar-thumb,
#jsEditor::-webkit-scrollbar-thumb,
.code-textarea::-webkit-scrollbar-thumb,
.code-editor-panel::-webkit-scrollbar-thumb,
.code-editor-body::-webkit-scrollbar-thumb,
.code-editor-modal::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 15px !important;
    border: 4px solid #2d2d2d !important;
    min-height: 25px !important;
    min-width: 25px !important;
}

.code-editor-modal #htmlEditor::-webkit-scrollbar-thumb:hover,
.code-editor-modal #cssEditor::-webkit-scrollbar-thumb:hover,
.code-editor-modal #jsEditor::-webkit-scrollbar-thumb:hover,
.code-editor-container #htmlEditor::-webkit-scrollbar-thumb:hover,
.code-editor-container #cssEditor::-webkit-scrollbar-thumb:hover,
.code-editor-container #jsEditor::-webkit-scrollbar-thumb:hover,
#htmlEditor::-webkit-scrollbar-thumb:hover,
#cssEditor::-webkit-scrollbar-thumb:hover,
#jsEditor::-webkit-scrollbar-thumb:hover,
.code-textarea::-webkit-scrollbar-thumb:hover,
.code-editor-panel::-webkit-scrollbar-thumb:hover,
.code-editor-body::-webkit-scrollbar-thumb:hover,
.code-editor-modal::-webkit-scrollbar-thumb:hover {
    background: #aaa !important;
}

/* Firefox scrollbar styling - More specific */
.code-editor-modal #htmlEditor,
.code-editor-modal #cssEditor,
.code-editor-modal #jsEditor,
.code-editor-container #htmlEditor,
.code-editor-container #cssEditor,
.code-editor-container #jsEditor,
#htmlEditor,
#cssEditor,
#jsEditor,
.code-textarea,
.code-editor-panel,
.code-editor-body,
.code-editor-modal {
    scrollbar-width: thick !important;
    scrollbar-color: #888 #2d2d2d !important;
}

/* Shake animation for PIN input */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Carousel animation for luxury items */
@keyframes slideShow {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5%); }
    40% { transform: translateX(-10%); }
    60% { transform: translateX(-15%); }
    80% { transform: translateX(-20%); }
    100% { transform: translateX(-25%); }
}

/* ==================== CALENDAR PAGE STYLES ==================== */
#calendarPage {
    display: none !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: #1a1a1a !important; /* Fallback dark background */
    background: var(--bg-primary, #1a1a1a) !important;
    backdrop-filter: blur(20px) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important; /* Fallback white text */
    color: var(--text-primary, #ffffff) !important;
}

#calendarPage.active {
    display: flex !important;
}

.calendar-page-content {
    flex: 1 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    background: transparent !important;
}

/* ==================== NOTES PAGE STYLES ==================== */
#notesPage {
    display: none !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: #1a1a1a !important; /* Fallback dark background */
    background: var(--bg-primary, #1a1a1a) !important;
    backdrop-filter: blur(20px) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important; /* Fallback white text */
    color: var(--text-primary, #ffffff) !important;
}

#notesPage.active {
    display: flex !important;
}

.notes-page-content {
    flex: 1 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    background: transparent !important;
}

/* ==================== CALENDAR MODAL STYLES ==================== */
.calendar-modal .modal-content {
    max-width: 700px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* Safari fallback */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    overflow: hidden;
}

/* Fallback for devices that don't support backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .calendar-modal .modal-content {
        background: rgba(0, 0, 0, 0.8);
    }
}

.calendar-stats {
    display: flex !important;
    justify-content: space-around !important;
    margin-bottom: 25px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    flex-wrap: wrap !important;
}

.stat-item {
    text-align: center !important;
    padding: 10px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    min-width: 100px !important;
}

.stat-label {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 5px !important;
}

.stat-value {
    display: block !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.stat-item:hover::before {
    left: 100%;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    background: linear-gradient(135deg, var(--btn-primary), var(--btn-success));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calendar-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important; /* Safari fallback */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

/* Fallback for devices that don't support backdrop-filter */
@supports not (backdrop-filter: blur(15px)) {
    .calendar-container {
        background: rgba(0, 0, 0, 0.6);
    }
}

.calendar-instructions {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-instructions p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-nav {
    background: linear-gradient(135deg, #F59E0B, #FBBF24) !important; /* Fallback orange gradient */
    background: linear-gradient(135deg, var(--btn-primary, #F59E0B), var(--btn-primary-hover, #FBBF24)) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 45px !important;
    min-height: 45px !important;
}

.calendar-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.calendar-nav:hover::before {
    opacity: 1;
}

.calendar-nav:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.calendar-nav:active {
    transform: scale(1.05);
}

#calendarMonthYear {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--text-primary), var(--btn-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
}

.calendar-day {
    aspect-ratio: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
    color: #ffffff !important; /* Fallback white */
    color: var(--text-primary, #ffffff) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    min-height: 40px !important;
    min-width: 40px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.calendar-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--btn-primary), var(--btn-success));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
}

.calendar-day:hover::before {
    opacity: 0.1;
}

.calendar-day:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.calendar-day:hover {
    background: var(--btn-primary);
    color: white;
    transform: scale(1.05);
}

.calendar-day.visited {
    background: linear-gradient(135deg, var(--btn-success), var(--btn-success-hover));
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    border-color: var(--btn-success);
}

.calendar-day.visited::before {
    opacity: 0;
}

.calendar-day.visited:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
}

.calendar-day.today {
    background: linear-gradient(135deg, var(--btn-primary), var(--btn-primary-hover));
    color: white;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    border: 2px solid var(--btn-primary);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6); }
}

.calendar-day.today::before {
    opacity: 0;
}

.calendar-day.today:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5);
}

.calendar-day.other-month {
    color: var(--text-secondary);
    opacity: 0.4;
    background: rgba(255, 255, 255, 0.02);
}

.calendar-day.other-month:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    transform: scale(1.02);
    opacity: 0.6;
}

.calendar-day.other-month::before {
    opacity: 0;
}

/* Day names header */
.calendar-day-names {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 15px;
    padding: 0 10px;
}

.day-name {
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive calendar */
@media (max-width: 768px) {
    .calendar-modal .modal-content {
        max-width: 95%;
        margin: 10px;
    }
    
    .calendar-stats {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
    }
    
    .stat-label {
        margin-bottom: 0;
        font-size: 1rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .calendar-container {
        padding: 15px;
    }
    
    .calendar-day {
        font-size: 0.85rem;
    }
    
    .calendar-nav {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    #calendarMonthYear {
        font-size: 1.2rem;
    }
}

/* ==================== TIMER STYLES ==================== */
#revisionTimer {
    font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--btn-primary);
    min-width: 80px;
    text-align: center;
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.progress-stats .stat.timer {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==================== REVISION HEADER LAYOUT ==================== */
.revision-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 15px;
    align-items: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0; /* Allow shrinking */
}

.header-center h1 {
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar-container {
    grid-column: 1 / -1;
    width: 100%;
}

/* Fixed width for timer to prevent layout shifts */
.progress-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.progress-stats .stat {
    white-space: nowrap;
    font-size: 0.9rem;
    padding: 4px 8px;
    background: var(--card-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/* Ensure timer doesn't cause layout shifts */
.progress-indicator {
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Responsive design for revision header */
@media (max-width: 768px) {
    .revision-header {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
    }
    
    .header-center {
        order: 1;
    }
    
    .header-left {
        order: 2;
        justify-content: center;
    }
    
    .header-right {
        order: 3;
        justify-content: center;
    }
    
    .progress-bar-container {
        order: 4;
    }
    
    .progress-stats {
        gap: 8px;
    }
    
    .progress-stats .stat {
        font-size: 0.8rem;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {
    .progress-stats {
        gap: 6px;
    }
    
    .progress-stats .stat {
        font-size: 0.75rem;
        padding: 2px 4px;
    }
}

/* ==================== IMPROVED SWIPE GESTURES STYLES ==================== */
.rev-gesture-zone {
    position: relative;
    touch-action: pan-y; /* Allow vertical scrolling but handle horizontal swipes */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.swipe-ghost {
    pointer-events: none;
    z-index: 1000;
    border: none !important; /* Remove any borders */
    outline: none !important; /* Remove any outlines */
}

.swipe-feedback {
    pointer-events: none;
    z-index: 1001;
    border: none !important;
    outline: none !important;
}

/* Prevent unwanted borders during touch interactions */
.question-card:active,
.question-card:focus,
.question-card:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Improve touch responsiveness */
.question-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow interaction with code editor elements */
.question-card .code-editor-modal,
.question-card .code-editor-container,
.question-card .code-editor-body,
.question-card .code-editor-panel,
.question-card .code-textarea,
.question-card .code-editor-btn,
.question-card .editor-btn,
.code-editor-modal,
.code-editor-container,
.code-editor-body,
.code-editor-panel,
.code-textarea,
.code-editor-btn,
.editor-btn,
.revision-container .code-editor-modal,
.revision-container .code-editor-container,
.revision-container .code-editor-body,
.revision-container .code-editor-panel,
.revision-container .code-textarea,
.revision-container .code-editor-btn,
.revision-container .editor-btn {
    touch-action: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    pointer-events: auto !important;
    -webkit-touch-callout: default !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* Add visual hints for swipe gestures */
.revision-container .question-card {
    position: relative;
    overflow: hidden;
}

.revision-container .question-card::before {
    display: none;
}

.revision-container .question-card:hover::before {
    display: none;
}

/* Remove swipe zone border overlay */
.revision-container .question-card::after {
    display: none;
}

.revision-container .question-card:hover::after {
    display: none;
}

/* Swipe hint styling */
.swipe-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.swipe-hint-text {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Hide hint after a few seconds or when user starts swiping */
.question-card.swipe-active .swipe-hint {
    opacity: 0;
}

/* Swipe instruction overlay */
.swipe-instructions {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 100;
    pointer-events: none;
    animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}

/* Mobile-specific swipe styles */
@media (max-width: 768px) {
    .revision-container .question-card {
        min-height: 200px;
    }
    
    .swipe-instructions {
        font-size: 0.8rem;
        padding: 8px 16px;
    }
}

/* ==================== COPY BUTTON STYLES ==================== */
.copy-btn {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: clamp(45px, 10vw, 60px) !important;
    height: clamp(45px, 10vw, 60px) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #F59E0B, #FBBF24) !important; /* Fallback orange gradient */
    background: linear-gradient(135deg, var(--btn-primary, #F59E0B), var(--btn-primary-hover, #FBBF24)) !important;
    color: white !important;
    border: none !important;
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: clamp(45px, 10vw, 60px) !important;
    min-height: clamp(45px, 10vw, 60px) !important;
}

.copy-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4) !important;
}

.copy-btn:active {
    transform: scale(0.95) !important;
}

.copy-btn:focus {
    outline: 2px solid #F59E0B !important;
    outline-offset: 2px !important;
}

/* Hide copy button when not in revision mode */
.copy-btn {
    display: none;
}

/* Show copy button only in revision mode */
#revisionMode.active .copy-btn,
.revision-container .copy-btn {
    display: flex;
}

/* ==================== OFFLINE MODE STYLES ==================== */
.offline-indicator {
    background: var(--btn-danger);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    animation: pulse 2s infinite;
}

.queue-count {
    background: var(--btn-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Low Data Mode */
.low-data-mode * {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
}

.low-data-mode img {
    filter: grayscale(50%) contrast(120%);
}

.low-data-mode .revision-container .question-card::before {
    display: none;
}

/* Update notification */
.update-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Responsive offline indicators */
@media (max-width: 768px) {
    .offline-indicator,
    .queue-count {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
}

/* ==================== SECRET VISION BOARD STYLES ==================== */
.secret-vision-modal .modal-content {
    max-width: 800px;
}

.pin-setup {
    text-align: center;
    padding: 40px 20px;
}

.pin-input-container {
    max-width: 400px;
    margin: 0 auto;
}

.pin-input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pin-input-group input {
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 16px;
}

.pin-input-group input:focus {
    outline: none;
    border-color: var(--btn-primary);
}

.pin-error {
    color: var(--btn-danger);
    font-size: 0.9rem;
    text-align: center;
}

.pin-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

/* Secret Vision Board Content */
.empty-vision-board {
    text-align: center;
    padding: 60px 20px;
}

.vision-board-controls {
    text-align: center;
    padding: 40px 20px;
}

.vision-board-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* Slideshow Styles */
.secret-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

.slideshow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
}

.slideshow-close {
    background: var(--btn-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
}

.slideshow-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.slideshow-btn {
    background: var(--btn-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slideshow-btn:hover {
    background: var(--btn-primary-hover);
    transform: scale(1.1);
}

.slideshow-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.slide {
    text-align: center;
    max-width: 80%;
    max-height: 80%;
}

.affirmation-slide {
    color: white;
}

.affirmation-content h2 {
    font-size: 2.5rem;
    line-height: 1.4;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.image-slide img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.image-placeholder {
    background: var(--bg-secondary);
    padding: 40px;
    border-radius: 10px;
    color: var(--text-primary);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.tag {
    background: var(--btn-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.slideshow-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
}

/* Secret Item Management */
.items-management {
    padding: 20px;
}

.items-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.secret-item-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    transition: all 0.2s ease;
}

.secret-item-card:hover {
    border-color: var(--btn-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.item-content {
    margin-bottom: 15px;
}

.affirmation-preview {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.image-preview {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.item-actions {
    display: flex;
    gap: 10px;
}

.management-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--btn-primary);
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .affirmation-content h2 {
        font-size: 1.8rem;
    }
    
    .slideshow-content {
        padding: 20px;
    }
    
    .items-list {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .vision-board-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ==================== REFRESH BUTTON ==================== */
.refresh-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important; /* Fallback white */
    color: var(--text-color, #ffffff) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 16px) !important;
    cursor: pointer !important;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 8px !important;
    min-height: clamp(36px, 8vw, 48px) !important;
    min-width: clamp(36px, 8vw, 48px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.refresh-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.refresh-btn:active {
    transform: translateY(0) !important;
}

.refresh-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

.refresh-icon {
    font-size: 1.1rem;
    animation: none;
}

.refresh-btn:hover .refresh-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================== DEVICE COMPATIBILITY FIXES ==================== */
/* Ensure all devices display buttons and elements properly */

/* iPad and Tablet specific fixes */
@media (min-width: 768px) and (max-width: 1024px) {
    .calendar-btn, .refresh-btn, .copy-btn {
        min-height: 48px !important;
        min-width: 48px !important;
        font-size: 16px !important;
        padding: 12px 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .calendar-day {
        min-height: 45px !important;
        min-width: 45px !important;
        font-size: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .stat-value {
        font-size: 2rem !important;
    }
    
    /* Ensure calendar page displays properly on tablets */
    #calendarPage.active {
        display: flex !important;
        background: #1a1a1a !important;
        color: #ffffff !important;
    }
    
    /* Ensure notes page displays properly on tablets */
    #notesPage.active {
        display: flex !important;
        background: #1a1a1a !important;
        color: #ffffff !important;
    }
    
    /* Ensure copy button shows in revision mode on tablets */
    #revisionMode.active .copy-btn,
    .revision-container .copy-btn {
        display: flex !important;
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        z-index: 1000 !important;
    }
    
    /* Ensure calendar modal displays properly */
    .calendar-modal {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .calendar-modal .modal-content {
        max-width: 90% !important;
        width: 90% !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
    
    /* Modal styles moved to universal section below */
    
    /* Timer display styles moved to universal section below */
    
    /* Ensure notes page has dark theme on tablets */
    #notesPage,
    #notesPage.active {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #ffffff !important;
    }
    
    #notesPage header,
    #notesPage .notes-page-content,
    #notesPage .notes-toolbar,
    #notesPage .notes-container {
        background: transparent !important;
        color: #ffffff !important;
    }
    
    #notesPage h1,
    #notesPage h2,
    #notesPage h3,
    #notesPage p,
    #notesPage span {
        color: #ffffff !important;
    }
    
}

/* Desktop/Laptop specific fixes - REMOVED PROBLEMATIC OVERRIDES */
/* The original media query was causing styling issues on wide screens */
/* Now using CSS variables and clamp() for responsive sizing instead */

/* Force visibility for all interactive elements */
.calendar-btn, .refresh-btn, .copy-btn, .calendar-nav, .calendar-day {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-flex !important;
}

/* Universal fixes for all screen sizes */
.calendar-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #10B981, #34D399) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

/* Universal modal styles for ALL screen sizes */
.modal[style*="display: flex"],
.modal[style*="display:flex"],
#timerConfigModal[style*="display: flex"],
#timerConfigModal[style*="display:flex"],
#noteEditModal[style*="display: flex"],
#noteEditModal[style*="display:flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 10000 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.modal-content,
#timerConfigModal .modal-content,
#noteEditModal .modal-content {
    background: #2a2a2a !important;
    border-radius: 15px !important;
    width: 90% !important;
    max-width: 800px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    margin: auto !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid #444 !important;
    padding: 30px !important;
    color: white !important;
}

.refresh-btn {
    min-width: clamp(36px, 8vw, 48px) !important;
    min-height: clamp(36px, 8vw, 48px) !important;
}

.copy-btn {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: clamp(45px, 10vw, 60px) !important;
    height: clamp(45px, 10vw, 60px) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
    color: white !important;
    border: none !important;
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: clamp(45px, 10vw, 60px) !important;
    min-height: clamp(45px, 10vw, 60px) !important;
}

/* Ensure pages display properly on all devices */
#calendarPage.active, #notesPage.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Force dark background on notesPage elements */
#notesPage header {
    background: transparent !important;
    color: #ffffff !important;
}

#notesPage .notes-page-content {
    background: transparent !important;
    color: #ffffff !important;
}

#notesPage button {
    color: #ffffff !important;
}

/* Ensure modals display properly on all devices */
.modal[style*="display: flex"],
.modal[style*="display:flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 1000 !important;
    backdrop-filter: blur(5px) !important;
}

/* Ensure proper contrast and visibility */
#calendarPage, #notesPage {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

#calendarPage *, #notesPage * {
    color: inherit !important;
}

/* Specifically target notes page for dark theme */
#notesPage {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

#notesPage h1,
#notesPage h2,
#notesPage h3,
#notesPage p,
#notesPage span,
#notesPage div {
    color: #ffffff !important;
}

/* Force backdrop-filter support */
@supports (backdrop-filter: blur(10px)) {
    .calendar-container, .calendar-stats {
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .calendar-container, .calendar-stats {
        background: rgba(0, 0, 0, 0.7) !important;
    }
}

/* ==================== CHESS BOARD STYLING ==================== */
.chess-board-container {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    aspect-ratio: 1;
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 2px solid var(--text-primary);
    border-radius: 8px;
    overflow: hidden;
}

.chess-square {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.chess-square.light {
    background: #f0d9b5;
}

.chess-square.dark {
    background: #b58863;
}

.chess-square.highlight {
    background: rgba(255, 255, 0, 0.5);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.chess-square.selected {
    background: rgba(0, 255, 0, 0.3);
}

.chess-piece {
    font-size: 2.5rem;
    transition: transform 0.3s ease;
    user-select: none;
}

.chess-piece.moving {
    animation: chessPieceMove 0.5s ease-in-out;
}

@keyframes chessPieceMove {
    0% { transform: scale(1); }
    50% { transform: scale(1.2) translateY(-10px); }
    100% { transform: scale(1); }
}
/* ==================== END CHESS BOARD STYLING ==================== */

/* ==================== TIMER MODE STYLING ==================== */
.stat.timer-mode {
    /* Inherit base stat styling */
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    white-space: nowrap !important;
    
    /* Timer-specific styling */
    background: #3B82F6 !important; /* Blue when disabled */
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    min-width: auto !important;
    height: auto !important;
    text-decoration: none !important;
    list-style: none !important;
}

.stat.timer-mode.enabled {
    background: #EF4444 !important; /* Red when enabled */
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.stat.timer-mode:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.stat.timer-mode.disabled:hover {
    background: #2563EB !important;
}

.stat.timer-mode.enabled:hover {
    background: #DC2626 !important;
}

/* Timer Modal Overlay */
.timer-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 9999 !important;
    backdrop-filter: blur(5px) !important;
}

.timer-countdown {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.timer-label {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 500;
}

@keyframes timerPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
    }
}

/* Timer Config Modal - Force visibility on ALL SCREENS */
#timerConfigModal,
div#timerConfigModal,
#timerConfigModal.modal {
    z-index: 10000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Force timer modal to show when display: flex is set inline */
#timerConfigModal[style*="display: flex"],
#timerConfigModal[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure timer modal is hidden by default */
#timerConfigModal:not([style*="display: flex"]):not([style*="display:flex"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Override any conflicting styles */
#timerConfigModal[style*="display: flex"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 10000 !important;
    align-items: center !important;
    justify-content: center !important;
}

#timerConfigModal .modal-content,
div#timerConfigModal .modal-content,
#timerConfigModal.modal .modal-content {
    max-width: 400px !important;
    width: 90% !important;
    text-align: center !important;
    background: #2a2a2a !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #444 !important;
    transform: scale(0.9) !important;
    transition: transform 0.3s ease !important;
    position: relative !important;
    z-index: 10001 !important;
    margin: auto !important;
    color: white !important;
}

#timerConfigModal[style*="display: flex"] .modal-content,
#timerConfigModal[style*="display:flex"] .modal-content {
    transform: scale(1) !important;
}

#timerConfigModal label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary, white);
}

#timerConfigModal select {
    width: 100% !important;
    padding: 12px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    margin: 10px 0 20px 0 !important;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, white) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2)) !important;
    box-sizing: border-box !important;
}

.modal-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 20px !important;
}

/* Responsive timer modal fixes */
@media (max-width: 768px) {
    #timerConfigModal .modal-content {
        max-width: 90vw !important;
        margin: 20px !important;
        padding: 20px !important;
    }
}

/* Ensure timer modal works on all screen sizes */
@media (min-width: 1920px) {
    #timerConfigModal {
        z-index: 10000 !important;
    }
}

/* ==================== NUCLEAR TIMER DISPLAY - MAXIMUM SPECIFICITY ==================== */
div#questionTimer.question-timer,
#questionTimer,
.question-timer,
div.question-timer {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    background-color: #ef4444 !important;
    color: white !important;
    padding: 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 99999 !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    font-family: 'Inter', sans-serif !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 120px !important;
    min-height: 120px !important;
}

.timer-circle,
div.timer-circle,
.question-timer .timer-circle {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#timerCountdown,
span#timerCountdown,
.timer-circle #timerCountdown {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.question-timer .timer-label,
div.timer-label,
.question-timer div.timer-label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* iPad specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .question-timer {
        position: fixed !important;
        top: 100px !important;
        right: 30px !important;
        padding: 25px !important;
        border-radius: 25px !important;
        background: linear-gradient(135deg, #ef4444, #dc2626) !important;
        color: white !important;
        box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        z-index: 99999 !important;
        border: 3px solid rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        font-family: 'Inter', sans-serif !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .timer-circle {
        width: 70px !important;
        height: 70px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    #timerCountdown {
        font-size: 2.2rem !important;
        font-weight: 900 !important;
        color: white !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    .question-timer .timer-label {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
}

/* ==================== NOTES MODAL STYLING - FORCE ALL SCREENS ==================== */
#noteEditModal,
#noteEditModal.modal,
div#noteEditModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Force modal to be hidden when display: none is set */
#noteEditModal[style*="display: none"],
#noteEditModal.modal[style*="display: none"] {
    display: none !important;
}

#noteEditModal .modal-content,
#noteEditModal.modal .modal-content,
div#noteEditModal .modal-content {
    position: relative !important;
    background: #2a2a2a !important;
    padding: 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border: 1px solid #444 !important;
    transform: none !important;
    color: white !important;
}

.notes-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 9999 !important;
    backdrop-filter: blur(5px) !important;
}

#noteEditModal h2,
#noteEditModal h3 {
    color: var(--text-primary, white) !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
}

#noteEditModal input,
#noteEditModal textarea {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary, white) !important;
    font-size: 1rem !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
}

#noteEditModal input:focus,
#noteEditModal textarea:focus {
    outline: none !important;
    border-color: var(--btn-primary, #667eea) !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

#noteEditModal button {
    padding: 12px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    margin: 5px !important;
}

#noteEditModal button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
}

#noteEditModal button:active {
    transform: translateY(0) !important;
}

#noteEditModal .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

#noteEditModal .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

#noteEditModal .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

/* Responsive notes modal */
@media (max-width: 768px) {
    #noteEditModal .modal-content {
        max-width: 95vw !important;
        padding: 20px !important;
        margin: 10px !important;
    }
}

/* ==================== ARCHIVE SYSTEM STYLING ==================== */

/* Archive Toggle Button - Enhanced */
.archive-toggle-btn {
    grid-column: 1 / -1; /* Span full width */
    padding: 18px 35px;
    margin: 30px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.archive-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.archive-toggle-btn:active {
    transform: translateY(-1px);
    transition: all 0.1s ease;
}

/* Add subtle pulse animation */
.archive-toggle-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.archive-toggle-btn:hover::before {
    width: 100%;
    height: 100%;
}

/* ==================== ENHANCED SECTION CARDS STYLING ==================== */

/* Active Section Cards - More Dynamic and Spaced */
.section-card[data-status="active"] {
    opacity: 1 !important;
    filter: none !important;
    margin-bottom: 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 30px !important;
    border-radius: 16px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.section-card[data-status="active"]:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.section-card[data-status="active"]:active {
    transform: translateY(-4px) scale(1.01) !important;
    transition: all 0.1s ease !important;
}

/* Mobile: Disable animations and ensure visibility */
@media (max-width: 768px) {
    .section-card[data-status="active"] {
        animation: none !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        margin-bottom: 12px !important;
        padding: 20px !important;
    }
    
    .section-card[data-status="active"]:nth-child(1) { animation-delay: 0s !important; }
    .section-card[data-status="active"]:nth-child(2) { animation-delay: 0s !important; }
    .section-card[data-status="active"]:nth-child(3) { animation-delay: 0s !important; }
    .section-card[data-status="active"]:nth-child(4) { animation-delay: 0s !important; }
    .section-card[data-status="active"]:nth-child(5) { animation-delay: 0s !important; }
}

@media (max-width: 480px) {
    .section-card[data-status="active"] {
        animation: none !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        margin-bottom: 10px !important;
        padding: 15px !important;
    }
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Card Content */
.section-card[data-status="active"] .card-icon {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

.section-card[data-status="active"]:hover .card-icon {
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

.section-card[data-status="active"] h2 {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.section-card[data-status="active"] p {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    opacity: 0.8 !important;
}

.section-card[data-status="active"] .section-stats {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 8px !important;
}

.section-card[data-status="active"] .question-count,
.section-card[data-status="active"] .bookmark-count {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(5px) !important;
}

/* Add subtle glow effect */
.section-card[data-status="active"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.section-card[data-status="active"]:hover::before {
    transform: translateX(100%);
}

/* Special Cards (Bookmarked Questions and Study Statistics) */
.section-card[data-status="special"] {
    opacity: 1 !important;
    filter: none !important;
    margin-bottom: 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 30px !important;
    border-radius: 16px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.section-card[data-status="special"]:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.section-card[data-status="special"]:active {
    transform: translateY(-4px) scale(1.01) !important;
    transition: all 0.1s ease !important;
}

.section-card[data-status="special"] .card-icon {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

.section-card[data-status="special"]:hover .card-icon {
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

.section-card[data-status="special"] h2 {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.section-card[data-status="special"] p {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    opacity: 0.8 !important;
}

.section-card[data-status="special"] .section-stats {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 8px !important;
}

.section-card[data-status="special"] .question-count,
.section-card[data-status="special"] .bookmark-count {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(5px) !important;
}

/* ==================== END ENHANCED SECTION CARDS STYLING ==================== */

/* Archived Section Cards */
.section-card[data-status="archived"] {
    opacity: 0.6;
    filter: grayscale(30%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: none; /* Hidden by default */
    transition: all 0.3s ease;
}

.section-card[data-status="archived"]:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-2px);
}

/* Archive Header */
.archive-header {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.archive-header h3 {
    margin: 0 0 10px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    font-weight: 600;
}

.archive-header p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Enhancements for Section Cards */
@media (max-width: 768px) {
    .section-card[data-status="active"] {
        margin-bottom: 16px;
        padding: 20px;
    }
    
    .section-card[data-status="active"]:hover {
        transform: translateY(-4px) scale(1.01);
    }
    
    .section-card[data-status="active"] .card-icon {
        font-size: 2.2rem;
        margin-bottom: 12px;
    }
    
    .section-card[data-status="active"] h2 {
        font-size: 1.2rem;
    }
    
    .section-card[data-status="active"] p {
        font-size: 0.9rem;
    }
    
    .archive-toggle-btn {
        padding: 15px 25px;
        margin: 25px 0;
    font-size: 1rem;
    }
    
    /* Reduce animation delays on mobile for faster feel */
    .section-card[data-status="active"]:nth-child(1) { animation-delay: 0.05s; }
    .section-card[data-status="active"]:nth-child(2) { animation-delay: 0.1s; }
    .section-card[data-status="active"]:nth-child(3) { animation-delay: 0.15s; }
    .section-card[data-status="active"]:nth-child(4) { animation-delay: 0.2s; }
    .section-card[data-status="active"]:nth-child(5) { animation-delay: 0.25s; }
}

/* Checkbox Groups for Global Revision */
.checkbox-group {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.checkbox-group h4 {
    margin: 0 0 10px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 600;
}

.checkbox-group label {
    display: block;
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 8px;
}

/* ==================== END ARCHIVE SYSTEM STYLING ==================== */
.code-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.code-editor-container {
    background: var(--card-bg, rgba(255, 255, 255, 0.1));
    border-radius: 15px;
    width: 95%;
    height: 90%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.code-editor-header {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.code-editor-header h3 {
    margin: 0;
    color: var(--text-primary, white);
    font-size: 1.5rem;
    font-weight: 600;
}

.editor-controls {
    display: flex;
    gap: 10px;
}

.editor-btn {
    background: var(--btn-primary, #F59E0B);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 14px;
}

.editor-btn:hover {
    background: var(--btn-primary-hover, #FBBF24);
    transform: translateY(-1px);
}

.editor-btn.small {
    padding: 6px 12px;
    font-size: 12px;
}

/* Code Editor Tabs */
.code-editor-tabs {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
    padding: 10px 20px;
    display: flex;
    gap: 5px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.editor-tab {
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 14px;
}

.editor-tab.active {
    background: var(--btn-primary, #F59E0B);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.editor-tab:hover:not(.active) {
    background: var(--card-bg-hover, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, white);
}

/* Code Editor Body */
.code-editor-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 60vh;
    padding: 10px;
    flex: 1;
}

.code-editor-panel {
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.code-editor-panel.active {
    border-color: var(--btn-primary, #F59E0B);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.code-editor-panel.expanded {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 10;
}

.panel-header {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.panel-header span {
    font-weight: 600;
    color: var(--text-primary, white);
    font-size: 14px;
}

.expand-btn {
    background: var(--btn-secondary, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, white);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.expand-btn:hover {
    background: var(--btn-secondary-hover, rgba(255, 255, 255, 0.2));
    transform: scale(1.05);
}

/* Code Textareas */
.code-textarea {
    background: var(--bg-primary, #1a1a1a);
    color: var(--text-primary, white);
    border: none;
    padding: 15px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    flex: 1;
    transition: all 0.3s ease;
}

.code-textarea.active {
    background: var(--bg-primary, #1a1a1a);
    border: 2px solid var(--btn-primary, #F59E0B);
}

.code-textarea:focus {
    border-color: var(--btn-primary, #F59E0B);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Syntax highlighting for different languages */
.code-textarea[data-language="html"] {
    color: #e34c26;
}

.code-textarea[data-language="css"] {
    color: #1572b6;
}

.code-textarea[data-language="javascript"] {
    color: #f7df1e;
}

/* Code Snippets Bar */
.code-snippets-bar {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.snippets-label {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-weight: 500;
    font-size: 14px;
}

.snippets-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.snippet-btn {
    background: var(--btn-secondary, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, white);
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
}

.snippet-btn:hover {
    background: var(--btn-secondary-hover, rgba(255, 255, 255, 0.2));
    transform: translateY(-1px);
}

/* Code Preview Section */
.code-preview-section {
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    margin: 10px;
    display: flex;
    flex-direction: column;
    height: 200px;
}

.code-preview-iframe {
    flex: 1;
    border: none;
    background: white;
    border-radius: 0 0 10px 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .code-editor-body {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        height: 50vh;
    }
    
    .code-editor-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .editor-tab {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .snippets-container {
        gap: 5px;
    }
    
    .snippet-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* ==================== END ENHANCED CODE EDITOR STYLING ==================== */
}

/* ==================== FINAL TIMER OVERRIDE - LAST RESORT ==================== */
#questionTimer {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    background: #ef4444 !important;
    color: white !important;
    padding: 20px !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 99999 !important;
    border: 3px solid white !important;
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4) !important;
    font-family: Arial, sans-serif !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    transform: none !important;
    width: 120px !important;
    height: 120px !important;
}

#timerCountdown {
    font-size: 2rem !important;
    font-weight: bold !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
}

.question-timer .timer-label {
    font-size: 0.8rem !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}