* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    padding: 20px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1, h2, h3 {
    margin-bottom: 15px;
    color: #2c3e50;
}

.nav-tabs {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 30px;
}

.nav-tab {
    background: none;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.nav-tab:hover, .nav-tab:focus {
    background: #f8f9fa;
    outline: 2px solid #3498db;
    outline-offset: -2px;
}

.nav-tab.active {
    border-bottom-color: #3498db;
    color: #3498db;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.section {
    margin-bottom: 30px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #34495e;
}

input, textarea, select, button {
    width: 100%;
    padding: 12px;
    border: 2px solid #bdc3c7;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
}

input:focus, textarea:focus, select:focus, button:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

button {
    background: #3498db;
    color: white;
    border: 2px solid #3498db;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

button:hover {
    background: #2980b9;
    border-color: #2980b9;
}

/* Secondary button style */
.secondary-btn {
    background: transparent;
    color: #6c757d;
    border: 2px solid #bdc3c7;
}

.secondary-btn:hover, .secondary-btn:focus {
    background: #f8f9fa;
    border-color: #3498db;
    color: #3498db;
}

.button-group {
    display: flex;
    gap: 10px;
}

.deck-actions {
    margin-top: 15px;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.keyboard-help {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.keyboard-help h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.keyboard-help ul {
    margin-left: 20px;
}

.keyboard-help li {
    margin-bottom: 5px;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.deck-card {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.2s;
}

.deck-card:hover {
    border-color: #3498db;
    background: #e3f2fd;
}

.deck-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.card-actions {
    display: flex;
    gap: 8px;
}

.card-actions button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
}

/* Card editing state */
.deck-card.editing {
    border-color: #f39c12;
    background: #fef9e7;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);
}

.deck-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.flashcard {
    background: #fff;
    border: 3px solid #3498db;
    border-radius: 8px;
    padding: 30px;
    margin: 20px 0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.flashcard-content {
    font-size: 18px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    width: 100%;
    max-width: 100%;
}

.progress {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #2c3e50;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: #ecf0f1;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    transition: width 0.3s ease;
    width: 0%;
}

/* Help dialog styles (scoped to #help-modal) - ensure backdrop */
#help-modal dialog::backdrop, #help-modal::backdrop { background: rgba(0,0,0,0.5); }
#help-modal .modal-dialog {
    width: 96vw;
    max-width: none;
    height: 92vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 2px solid #3498db;
    display: flex;
    flex-direction: column;
}
#help-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #dee2e6; }
#help-modal .modal-title { margin: 0; font-size: 20px; }
#help-modal .modal-body { padding: 16px 20px 20px; flex: 1 1 auto; overflow: auto; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
#help-modal .modal-body ul, #help-modal .modal-body ol { display: inline-block; text-align: left; margin-left: 0; }
#help-modal .close-btn { width: auto; padding: 8px 12px; background: transparent; color: #2c3e50; border: 2px solid #bdc3c7; }
#help-modal .close-btn:hover { background: #f8f9fa; }

/* Accessible generic modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 90vw); background: #fff; border: 2px solid #3498db; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 1001; padding: 20px; }
.modal-header h2 { margin-bottom: 10px; }
.modal-body { margin-bottom: 15px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
.hidden[aria-hidden="true"] { display: none; }

/* Search Section */
.search-section {
    margin-bottom: 20px;
}

.search-heading {
    font-size: 18px;
    margin-bottom: 12px;
    color: #2c3e50;
}

/* Search and Filter Bar */
.search-filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Search Results Section */
.search-results-section {
    margin-bottom: 30px;
}

.search-results-section h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

.search-input-wrapper {
    flex: 1;
    min-width: 200px;
}

.search-input-wrapper input {
    width: 100%;
}

.filter-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-wrapper select {
    width: auto;
    min-width: 160px;
}

.clear-filters-btn {
    width: auto;
    padding: 10px 16px;
    background: transparent;
    color: #6c757d;
    border: 2px solid #bdc3c7;
    font-size: 14px;
}

.clear-filters-btn:hover, .clear-filters-btn:focus {
    background: #f8f9fa;
    border-color: #3498db;
    color: #3498db;
}

.search-results-info {
    background: #e3f2fd;
    border: 1px solid #3498db;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 20px;
    color: #2c3e50;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-results-info.no-results {
    background: #f8d7da;
    border-color: #e74c3c;
    color: #721c24;
}

/* Custom Category Input */
.custom-category-wrapper {
    margin-top: 10px;
}

.custom-category-wrapper input {
    margin-top: 5px;
}

/* Dark mode for search/filter */
body.dark-mode .search-heading,
body.dark-mode .search-results-section h3 {
    color: var(--text-secondary);
}

body.dark-mode .search-results-section h3 {
    border-bottom-color: var(--accent-color);
}

body.dark-mode .search-filter-bar input,
body.dark-mode .search-filter-bar select {
    background: var(--bg-tertiary);
    border-color: var(--border-input);
    color: var(--text-primary);
}

body.dark-mode .clear-filters-btn {
    color: var(--text-muted);
    border-color: var(--border-input);
}

body.dark-mode .clear-filters-btn:hover,
body.dark-mode .clear-filters-btn:focus {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

body.dark-mode .search-results-info {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

body.dark-mode .search-results-info.no-results {
    background: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* High contrast for search/filter */
body.high-contrast .search-heading,
body.high-contrast .search-results-section h3 {
    color: var(--text-primary);
}

body.high-contrast .search-results-section h3 {
    border-bottom-color: var(--accent-color);
}

body.high-contrast .search-filter-bar input,
body.high-contrast .search-filter-bar select {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-input);
    color: var(--text-primary);
}

body.high-contrast .clear-filters-btn {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

body.high-contrast .search-results-info {
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-color);
    color: var(--text-primary);
}

/* Breadcrumb navigation */
.breadcrumb-nav {
    margin-bottom: 20px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    flex-wrap: wrap;
}

.breadcrumb-item {
    font-size: 16px;
    color: #2c3e50;
    font-weight: 500;
}

.breadcrumb-item[aria-current="page"] {
    color: #6c757d;
}

.breadcrumb-link {
    background: none;
    border: none;
    padding: 4px 8px;
    color: #3498db;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
    width: auto;
    transition: all 0.2s;
}

.breadcrumb-link:hover, .breadcrumb-link:focus {
    color: #2980b9;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 4px;
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: #6c757d;
    font-size: 16px;
    list-style: none;
}

/* Folder actions bar */
.folder-actions-bar {
    margin-bottom: 20px;
}

.folder-actions-bar button {
    width: auto;
    padding: 10px 20px;
}

/* Folder card styles (drill-down UI) */
.folders-section, .my-decks-section, .folder-decks-section, .subfolders-section {
    margin-bottom: 30px;
}

.folders-section h3, .my-decks-section h3, .folder-decks-section h3, .subfolders-section h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;
}

.folder-card {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 15px;
    transition: all 0.2s;
}

.folder-card:hover {
    border-color: #3498db;
    background: #e3f2fd;
}

.folder-card-button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s;
}

.folder-card-button:hover, .folder-card-button:focus {
    background: rgba(52, 152, 219, 0.1);
    border-radius: 4px;
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.folder-card-icon {
    font-size: 48px;
    line-height: 1;
}

.folder-card-content {
    flex: 1;
}

.folder-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.folder-card-count {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.folder-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
}

.folder-actions button {
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
    background: transparent;
    color: #3498db;
    border: 2px solid #3498db;
}

.folder-actions button:hover, .folder-actions button:focus {
    background: #3498db;
    color: white;
}

.my-decks-section .deck-card {
    background: #fff;
}

/* Study/Quiz Mode Overlay */
.mode-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mode-overlay.hidden {
    display: none;
}

.mode-overlay-content {
    width: 100%;
    max-width: 700px;
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 2px solid #3498db;
}

.mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #dee2e6;
}

.mode-header h2 {
    margin: 0;
    color: #2c3e50;
}

.mode-close-btn {
    width: auto;
    padding: 10px 20px;
    background: #e74c3c;
    border-color: #e74c3c;
}

.mode-close-btn:hover, .mode-close-btn:focus {
    background: #c0392b;
    border-color: #c0392b;
}

.study-controls {
    justify-content: center;
    margin-top: 20px;
}

/* Quiz specific styles */
.quiz-question-container {
    margin: 20px 0;
}

.quiz-question {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-option {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-size: 16px;
    width: 100%;
}

.quiz-option:hover, .quiz-option:focus {
    border-color: #3498db;
    background: #e3f2fd;
    outline: none;
}

.quiz-option:focus {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.quiz-option.selected {
    border-color: #3498db;
    background: #e3f2fd;
}

.quiz-option.correct {
    border-color: #27ae60;
    background: #d4edda;
}

.quiz-option.incorrect {
    border-color: #e74c3c;
    background: #f8d7da;
}

.quiz-option.disabled {
    pointer-events: none;
    opacity: 0.8;
}

.quiz-option-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #3498db;
    color: white;
    border-radius: 50%;
    font-weight: 600;
    margin-right: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}

.quiz-option.correct .quiz-option-letter {
    background: #27ae60;
}

.quiz-option.incorrect .quiz-option-letter {
    background: #e74c3c;
}

.quiz-option-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

.quiz-written {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quiz-written input {
    font-size: 18px;
    padding: 15px;
    text-align: center;
}

.quiz-feedback {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.quiz-feedback.correct {
    background: #d4edda;
    border: 2px solid #27ae60;
}

.quiz-feedback.incorrect {
    background: #f8d7da;
    border: 2px solid #e74c3c;
}

#quiz-feedback-text {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.quiz-feedback.correct #quiz-feedback-text {
    color: #27ae60;
}

.quiz-feedback.incorrect #quiz-feedback-text {
    color: #e74c3c;
}

.quiz-correct-answer {
    font-size: 16px;
    color: #555;
    margin-bottom: 15px;
}

#quiz-next-btn {
    width: auto;
    padding: 12px 30px;
}

/* Quiz Results */
.quiz-results-content {
    text-align: center;
}

.quiz-score {
    font-size: 64px;
    font-weight: 700;
    color: #3498db;
    margin: 30px 0 10px;
}

.quiz-score.excellent {
    color: #27ae60;
}

.quiz-score.good {
    color: #3498db;
}

.quiz-score.needs-work {
    color: #f39c12;
}

.quiz-score.poor {
    color: #e74c3c;
}

.quiz-score-breakdown {
    font-size: 18px;
    color: #555;
    margin-bottom: 30px;
}

.quiz-results-actions {
    justify-content: center;
}

#quiz-retry-btn {
    background: #27ae60;
    border-color: #27ae60;
}

#quiz-retry-btn:hover, #quiz-retry-btn:focus {
    background: #219a52;
    border-color: #219a52;
}

/* Settings styles */
.settings-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.settings-section h3 {
    margin-bottom: 15px;
    color: #2c3e50;
    font-size: 18px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.setting-item label {
    margin-bottom: 0;
    font-weight: 500;
}

.setting-item button {
    width: auto;
    padding: 8px 16px;
}

.setting-description {
    color: #6c757d;
    margin-bottom: 15px;
}

/* Deck action menu styles */
.deck-menu-container {
    position: relative;
}

.deck-menu-btn {
    width: auto;
    padding: 8px 12px;
    background: transparent;
    border: 2px solid #bdc3c7;
    color: #2c3e50;
    font-size: 18px;
    line-height: 1;
}

.deck-menu-btn:hover, .deck-menu-btn:focus {
    background: #f8f9fa;
    border-color: #3498db;
}

.deck-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 2px solid #3498db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 100;
    padding: 4px 0;
}

.deck-menu[hidden] {
    display: none;
}

.deck-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: transparent;
    border: none;
    font-size: 15px;
    color: #2c3e50;
    cursor: pointer;
}

.deck-menu-item:hover, .deck-menu-item:focus {
    background: #e3f2fd;
    outline: none;
}

.deck-menu-item:focus {
    background: #3498db;
    color: white;
}

/* Stats Tab Styles */
.stats-period-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.stats-period-btn {
    width: auto;
    padding: 10px 20px;
    background: transparent;
    color: #3498db;
    border: 2px solid #3498db;
    font-weight: 600;
}

.stats-period-btn:hover {
    background: rgba(52, 152, 219, 0.1);
}

.stats-period-btn.active,
.stats-period-btn[aria-pressed="true"] {
    background: #3498db;
    color: white;
}

.deck-menu-separator {
    height: 1px;
    background: #dee2e6;
    margin: 4px 0;
}

.deck-menu-item--danger {
    color: #e74c3c;
}

.deck-menu-item--danger:focus {
    background: #e74c3c;
    color: white;
}

/* Quiz mode selection modal */
.quiz-mode-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-mode-option {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.quiz-mode-option:hover {
    border-color: #3498db;
    background: #e3f2fd;
}

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

.stats-card {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.2s;
}

.stats-card:hover {
    border-color: #3498db;
    background: #e3f2fd;
}

.quiz-mode-option:has(input:checked) {
    border-color: #3498db;
    background: #e3f2fd;
}

.quiz-mode-option:has(input:focus) {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.quiz-mode-option input[type="radio"] {
    width: auto;
    margin-right: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}

.quiz-mode-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-mode-label strong {
    font-size: 16px;
    color: #2c3e50;
}

.quiz-mode-label span {
    font-size: 14px;
    color: #6c757d;
}

/* Disabled button styles */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.stats-card-value {
    font-size: 48px;
    font-weight: 700;
    color: #3498db;
    line-height: 1;
    margin-bottom: 10px;
}

.stats-card-label {
    font-size: 16px;
    color: #6c757d;
    font-weight: 500;
}

.stats-summary {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: #6c757d;
}

.stats-summary p {
    margin: 0;
}

/* ========================================
   Vision Accessibility Settings
   ======================================== */

/* CSS Custom Properties for theming */
:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: white;
    --bg-tertiary: #f8f9fa;
    --text-primary: #333;
    --text-secondary: #2c3e50;
    --text-muted: #6c757d;
    --text-label: #34495e;
    --border-color: #dee2e6;
    --border-input: #bdc3c7;
    --accent-color: #3498db;
    --accent-hover: #2980b9;
    --success-color: #27ae60;
    --success-bg: #d4edda;
    --danger-color: #e74c3c;
    --danger-bg: #f8d7da;
    --warning-color: #f39c12;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --overlay-bg: rgba(255, 255, 255, 0.98);
    --modal-overlay: rgba(0, 0, 0, 0.4);
}

/* Dark Mode */
body.dark-mode {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --text-primary: #e8e8e8;
    --text-secondary: #c9d6df;
    --text-muted: #a0a0a0;
    --text-label: #c9d6df;
    --border-color: #3a3a5c;
    --border-input: #4a4a6a;
    --accent-color: #52b6e8;
    --accent-hover: #7bc8f0;
    --success-color: #4ade80;
    --success-bg: #1a3a2a;
    --danger-color: #f87171;
    --danger-bg: #3a1a1a;
    --warning-color: #fbbf24;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --overlay-bg: rgba(22, 33, 62, 0.98);
    --modal-overlay: rgba(0, 0, 0, 0.6);
}

body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.dark-mode .container {
    background: var(--bg-secondary);
    box-shadow: 0 2px 10px var(--shadow-color);
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
    color: var(--text-secondary);
}

body.dark-mode label {
    color: var(--text-label);
}

body.dark-mode input, body.dark-mode textarea, body.dark-mode select {
    background: var(--bg-tertiary);
    border-color: var(--border-input);
    color: var(--text-primary);
}

body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
    color: var(--text-muted);
}

body.dark-mode button {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

body.dark-mode button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

body.dark-mode .secondary-btn {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-input);
}

body.dark-mode .secondary-btn:hover,
body.dark-mode .secondary-btn:focus {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

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

body.dark-mode .nav-tab:hover, body.dark-mode .nav-tab:focus {
    background: var(--bg-tertiary);
}

body.dark-mode .nav-tab.active {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}

body.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color);
}

body.dark-mode .deck-card, body.dark-mode .folder-card {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

body.dark-mode .deck-card:hover, body.dark-mode .folder-card:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

body.dark-mode .deck-title, body.dark-mode .folder-card-title {
    color: var(--text-secondary);
}

body.dark-mode .folder-card-count {
    color: var(--text-muted);
}

body.dark-mode .flashcard {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
}

body.dark-mode .flashcard-content {
    color: var(--text-primary);
}

body.dark-mode .progress {
    color: var(--text-secondary);
}

body.dark-mode .progress-bar {
    background: var(--bg-tertiary);
}

body.dark-mode .settings-section {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

body.dark-mode .setting-description {
    color: var(--text-muted);
}

body.dark-mode .keyboard-help {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

body.dark-mode .empty-state {
    color: var(--text-muted);
}

body.dark-mode .modal-overlay {
    background: var(--modal-overlay);
}

body.dark-mode .modal, body.dark-mode .mode-overlay-content {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
}

body.dark-mode .mode-overlay {
    background: var(--overlay-bg);
}

body.dark-mode .mode-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .deck-menu {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
}

body.dark-mode .deck-menu-item {
    color: var(--text-primary);
}

body.dark-mode .deck-menu-item:hover, body.dark-mode .deck-menu-item:focus {
    background: var(--bg-tertiary);
}

body.dark-mode .deck-menu-separator {
    background: var(--border-color);
}

body.dark-mode .quiz-question {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

body.dark-mode .quiz-option {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .quiz-option:hover, body.dark-mode .quiz-option:focus {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

body.dark-mode .quiz-feedback.correct {
    background: var(--success-bg);
    border-color: var(--success-color);
}

body.dark-mode .quiz-feedback.incorrect {
    background: var(--danger-bg);
    border-color: var(--danger-color);
}

body.dark-mode .stats-card {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

body.dark-mode .stats-card:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

body.dark-mode .stats-card-value {
    color: var(--accent-color);
}

body.dark-mode .stats-card-label {
    color: var(--text-muted);
}

body.dark-mode .stats-summary {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

body.dark-mode .stats-period-btn {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

body.dark-mode .stats-period-btn:hover {
    background: rgba(82, 182, 232, 0.1);
}

body.dark-mode .breadcrumb-link {
    color: var(--accent-color);
}

body.dark-mode .breadcrumb-link:hover, body.dark-mode .breadcrumb-link:focus {
    color: var(--accent-hover);
}

body.dark-mode .breadcrumb-separator, body.dark-mode .breadcrumb-item[aria-current="page"] {
    color: var(--text-muted);
}

body.dark-mode #help-modal .modal-dialog {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
}

body.dark-mode #help-modal .modal-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode #help-modal .modal-body {
    color: var(--text-primary);
}

body.dark-mode .folder-card-button:hover, body.dark-mode .folder-card-button:focus {
    background: rgba(82, 182, 232, 0.1);
}

body.dark-mode .folder-actions button {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

body.dark-mode .folder-actions button:hover, body.dark-mode .folder-actions button:focus {
    background: var(--accent-color);
    color: var(--bg-secondary);
}

body.dark-mode .deck-menu-btn {
    background: transparent;
    border-color: var(--border-input);
    color: var(--text-primary);
}

body.dark-mode .deck-menu-btn:hover, body.dark-mode .deck-menu-btn:focus {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
}

/* Font Size Classes */
body.font-small {
    font-size: 14px;
}

body.font-small input, body.font-small textarea, body.font-small select, body.font-small button {
    font-size: 14px;
}

body.font-small .nav-tab {
    font-size: 14px;
    padding: 10px 16px;
}

body.font-small .deck-title, body.font-small .folder-card-title {
    font-size: 16px;
}

body.font-small .flashcard-content {
    font-size: 16px;
}

body.font-small .quiz-question {
    font-size: 18px;
}

body.font-small .stats-card-value {
    font-size: 40px;
}

body.font-medium {
    font-size: 16px;
}

body.font-large {
    font-size: 18px;
}

body.font-large input, body.font-large textarea, body.font-large select, body.font-large button {
    font-size: 18px;
    padding: 14px;
}

body.font-large .nav-tab {
    font-size: 18px;
    padding: 14px 24px;
}

body.font-large .deck-title, body.font-large .folder-card-title {
    font-size: 20px;
}

body.font-large .flashcard-content {
    font-size: 20px;
}

body.font-large .quiz-question {
    font-size: 22px;
}

body.font-large .stats-card-value {
    font-size: 56px;
}

body.font-large h1 {
    font-size: 2rem;
}

body.font-large h2 {
    font-size: 1.6rem;
}

body.font-large h3 {
    font-size: 1.3rem;
}

body.font-extra-large {
    font-size: 20px;
}

body.font-extra-large input, body.font-extra-large textarea, body.font-extra-large select, body.font-extra-large button {
    font-size: 20px;
    padding: 16px;
}

body.font-extra-large .nav-tab {
    font-size: 20px;
    padding: 16px 28px;
}

body.font-extra-large .deck-title, body.font-extra-large .folder-card-title {
    font-size: 24px;
}

body.font-extra-large .flashcard-content {
    font-size: 24px;
}

body.font-extra-large .quiz-question {
    font-size: 26px;
}

body.font-extra-large .stats-card-value {
    font-size: 64px;
}

body.font-extra-large h1 {
    font-size: 2.4rem;
}

body.font-extra-large h2 {
    font-size: 1.9rem;
}

body.font-extra-large h3 {
    font-size: 1.5rem;
}

/* High Contrast Mode */
body.high-contrast {
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-tertiary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #cccccc;
    --text-label: #ffffff;
    --border-color: #ffffff;
    --border-input: #ffffff;
    --accent-color: #ffff00;
    --accent-hover: #ffff66;
    --success-color: #00ff00;
    --success-bg: #003300;
    --danger-color: #ff0000;
    --danger-bg: #330000;
    --warning-color: #ffaa00;
    --shadow-color: none;
    --overlay-bg: rgba(0, 0, 0, 0.95);
    --modal-overlay: rgba(0, 0, 0, 0.9);
}

body.high-contrast {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.high-contrast .container {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    box-shadow: none;
}

body.high-contrast h1, body.high-contrast h2, body.high-contrast h3,
body.high-contrast label, body.high-contrast p {
    color: var(--text-primary);
}

body.high-contrast input, body.high-contrast textarea, body.high-contrast select {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-input);
    color: var(--text-primary);
}

body.high-contrast button {
    background: var(--accent-color);
    border: 2px solid var(--accent-color);
    color: #000000;
    font-weight: 700;
}

body.high-contrast button:hover, body.high-contrast button:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

body.high-contrast .secondary-btn {
    background: transparent;
    color: var(--accent-color);
    border-color: var(--accent-color);
}

body.high-contrast .secondary-btn:hover,
body.high-contrast .secondary-btn:focus {
    background: var(--accent-color);
    color: #000000;
}

body.high-contrast .nav-tab {
    color: var(--text-primary);
    border-bottom: 3px solid transparent;
}

body.high-contrast .nav-tab.active {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}

body.high-contrast .nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

body.high-contrast .deck-card, body.high-contrast .folder-card,
body.high-contrast .settings-section, body.high-contrast .stats-card,
body.high-contrast .keyboard-help {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

body.high-contrast .deck-card:hover, body.high-contrast .folder-card:hover,
body.high-contrast .stats-card:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

body.high-contrast .flashcard {
    background: var(--bg-secondary);
    border: 3px solid var(--accent-color);
}

body.high-contrast .modal, body.high-contrast .mode-overlay-content,
body.high-contrast .deck-menu {
    background: var(--bg-secondary);
    border: 2px solid var(--accent-color);
}

body.high-contrast .mode-overlay {
    background: var(--overlay-bg);
}

body.high-contrast .quiz-option {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

body.high-contrast .quiz-option:hover, body.high-contrast .quiz-option:focus {
    border-color: var(--accent-color);
}

body.high-contrast .quiz-option.correct {
    background: var(--success-bg);
    border-color: var(--success-color);
}

body.high-contrast .quiz-option.incorrect {
    background: var(--danger-bg);
    border-color: var(--danger-color);
}

body.high-contrast a, body.high-contrast .breadcrumb-link {
    color: var(--accent-color);
}

body.high-contrast .stats-card-value {
    color: var(--accent-color);
}

body.high-contrast .progress-bar {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

body.high-contrast .progress-fill {
    background: var(--accent-color);
}

body.high-contrast input:focus, body.high-contrast textarea:focus,
body.high-contrast select:focus, body.high-contrast button:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    box-shadow: none;
}

body.high-contrast .folder-actions button,
body.high-contrast .stats-period-btn,
body.high-contrast .deck-menu-btn {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: transparent;
}

body.high-contrast .folder-actions button:hover,
body.high-contrast .folder-actions button:focus,
body.high-contrast .stats-period-btn:hover,
body.high-contrast .stats-period-btn.active {
    background: var(--accent-color);
    color: #000000;
}

/* Reduced Motion */
body.reduced-motion,
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Also respect OS-level reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}