/* В начало style.css добавьте CSS переменные */
:root {
    /* Светлая тема (по умолчанию) */
    --bg-body: linear-gradient(213deg, #d3d8dd7a 0%, #b8bdd50a 100%);
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-card: #ffffff;
    --text-primary: #236b29;
    --text-secondary: #666666;
    --border-color: #e3e3e3;
    --accent-color: #6baf46;
    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --header-bg: #ffffff;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --link-color: #667eea;
}

[data-theme="dark"] {
    /* Темная тема */
    --bg-body: #121212;
    --bg-primary: #121212;
    --bg-secondary: #f5f5f526;
    --bg-card: #242424;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #333333;
    --accent-color: #7bc95f;
    --accent-gradient: linear-gradient(135deg, #7c4dff 0%, #ff4081 100%);
    --header-bg: #1a1a1a;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --link-color: #7c4dff;
}

/* Примените переменные ко всем элементам */
body {
    background: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

header {
    background-color: var(--header-bg);
    border-bottom-color: var(--border-color);
}

.login-form,
.plugin-modal,
.training-header,
.question-container,
.training-modes .mode-card,
.import-card,
.stats-section,
.settings-sidebar,
.sidebar-card,
.drawer-content,
.bottom-drawer,
.tip-card,
.modal-content,
.extension-info {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.completion-content {
    background: var(--bg-card);
}

.stats-section h2,
.instruction-section h2,
.section-title {
    color: var(--text-primary);
}

.login-form input,
.settings-select,
input[type="text"],
input[type="password"],
select,
textarea {
    transition: all 0.3s ease;
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}


.settings-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

a {
    color: var(--link-color);
}

.mobile-app-icon,
.leaderboard-section,
.quick-stat-item,
.settings-features,
.import-card-compact,
.user-profile,
.mode-info,
.stats-grid .stat-item,
.quick-stat {
    background: var(--bg-secondary);
    border-color: var(--bg-secondary);
    color: var(--text-primary);
}

.word-count-badge,
.step,
.dev-install-steps,
.tips-section,
.example-import,
.info-item {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.notification {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--card-shadow);
}

.infinite-completion, .completion-stats,
.settings-group {
    border: 2px solid var(--border-color);
}

.modal-header,
.drawer-header,
.drawer-section {
    border-bottom: 1px solid var(--border-color);
}

/* Кнопка переключения темы */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-card) !important;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

/* Дополнительные стили для темной темы в тренировках */
[data-theme="dark"] .option-btn {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .option-btn:hover:not(:disabled) {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .option-btn.correct {
    background-color: rgba(107, 175, 70, 0.3);
    border-color: #6baf46;
}

[data-theme="dark"] .option-btn.incorrect {
    background-color: rgba(239, 83, 80, 0.3);
    border-color: #ef5350;
}

[data-theme="dark"] #wordDisplay {
    color: var(--text-primary);
}

[data-theme="dark"] .audio-player-container {
    background-color: var(--bg-card);
}

[data-theme="dark"] .key-indicator {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .completion-overlay {
    background-color: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .completion-content {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* Стили для темной темы в инструкции */

[data-theme="dark"] .dev-step,
[data-theme="dark"] .code-block,
[data-theme="dark"] .benefits {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .code-block {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .mode-stat {
    background: #f5f5f526;
}