/* ========== THEME TOGGLE BUTTON ========== */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(30, 30, 45, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 8px 16px;
    color: #a855f7;
    font-size: 1em;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.theme-toggle:hover {
    opacity: 1;
    background: rgba(30, 30, 45, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(168, 85, 247, 0.2);
}

/* ========== LIGHT THEME ========== */
body.light-theme {
    background: linear-gradient(135deg, #f0f0f5 0%, #e8e8f0 50%, #f5f5fa 100%);
    color: #2d2d3d;
}

body.light-theme::before {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 120, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 120, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 255, 255, 0.08) 0%, transparent 50%);
}

body.light-theme .progress-bar {
    background: rgba(220, 220, 230, 0.5);
}

body.light-theme .stats-panel,
body.light-theme .load-progress-btn button {
    background: rgba(255, 255, 255, 0.85);
    color: #2d2d3d;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

body.light-theme .theme-toggle {
    background: rgba(255, 255, 255, 0.7);
    color: #2d2d3d;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.light-theme .stats-panel:hover,
body.light-theme .load-progress-btn button:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

body.light-theme .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .stats-panel h3 {
    color: #6366f1;
}

body.light-theme .stat-value {
    color: #7c3aed;
    text-shadow: 0 0 10px rgba(124, 58, 237, 0.2);
}

body.light-theme .stat-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme #content {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme h1 {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(99, 102, 241, 0.2);
}

body.light-theme .question {
    color: #2d2d3d;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.light-theme .question strong {
    color: #7c3aed;
}

body.light-theme button {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);
    color: #2d2d3d;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

body.light-theme button:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(124, 58, 237, 0.25) 100%);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.15);
}

body.light-theme .back-link button {
    background: rgba(240, 240, 245, 0.5);
    border-color: rgba(200, 200, 210, 0.5);
}

body.light-theme .back-link button:hover {
    background: rgba(240, 240, 245, 0.8);
    border-color: rgba(200, 200, 210, 0.8);
}

body.light-theme .save-code,
body.light-theme .enhanced-save {
    background: rgba(240, 240, 245, 0.5);
    border: 1px solid rgba(200, 200, 210, 0.3);
}

body.light-theme .save-code:hover,
body.light-theme .enhanced-save:hover {
    background: rgba(240, 240, 245, 0.7);
    border-color: rgba(99, 102, 241, 0.3);
}

body.light-theme .quick-save-btn,
body.light-theme .share-btn {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    color: #2d2d3d !important;
}

body.light-theme .quick-save-btn:hover,
body.light-theme .share-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(124, 58, 237, 0.3) 100%) !important;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2) !important;
}

body.light-theme .save-hint {
    color: rgba(45, 45, 61, 0.6);
}

body.light-theme .error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.15) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

body.light-theme .error h2 {
    color: #dc2626;
}

body.light-theme .copyright {
    color: rgba(45, 45, 61, 0.5);
}

body.light-theme .copyright:hover {
    color: rgba(45, 45, 61, 0.8);
}

body.light-theme .load-modal {
    background: rgba(255, 255, 255, 0.9);
}

body.light-theme .load-modal-content {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme .load-modal-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme .load-modal-header h3 {
    color: #7c3aed;
}

body.light-theme .close-modal {
    color: #6366f1 !important;
}

body.light-theme .close-modal:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}

body.light-theme .load-modal-body p {
    color: #2d2d3d;
}

body.light-theme #load-code-input {
    background: rgba(240, 240, 245, 0.5);
    border: 1px solid rgba(200, 200, 210, 0.3);
    color: #2d2d3d;
}

body.light-theme #load-code-input:focus {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.1);
}

body.light-theme #load-code-input::placeholder {
    color: rgba(45, 45, 61, 0.5);
}

body.light-theme .load-btn {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    color: #2d2d3d !important;
}

body.light-theme .load-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(124, 58, 237, 0.3) 100%) !important;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2) !important;
}

body.light-theme .cancel-btn {
    background: rgba(240, 240, 245, 0.5) !important;
    border: 1px solid rgba(200, 200, 210, 0.3) !important;
    color: #2d2d3d !important;
}

body.light-theme .cancel-btn:hover {
    background: rgba(240, 240, 245, 0.8) !important;
}

body.light-theme .load-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

body.light-theme ::-webkit-scrollbar-track {
    background: rgba(240, 240, 245, 0.5);
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #6366f1, #7c3aed);
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #7c7ff3, #8b5cf6);
}