html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --dark: #e2e8f0;
    --light: #0b1220;
    --gray: #64748b;
    --text-main: #cbd5e1;
    --success: #34d399;
    --danger: #f87171;
    --warning-bg: #3f2e14;
    --warning-border: #f59e0b;
    --surface: #151c2c;
    --surface-2: #1e293b;
    --border: #334155;
    --muted: #94a3b8;
}

html[data-theme="dark"] body {
    background-color: var(--light) !important;
    color: var(--dark) !important;
}

html[data-theme="dark"] .container,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .user-panel,
html[data-theme="dark"] .mode-card,
html[data-theme="dark"] .chapter-row,
html[data-theme="dark"] .result-box {
    background: var(--surface) !important;
    color: var(--dark) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .sidebar {
    border-right-color: var(--border) !important;
}

html[data-theme="dark"] .sidebar-header {
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .mode-card p,
html[data-theme="dark"] .chapter-stat,
html[data-theme="dark"] .category-select-label,
html[data-theme="dark"] .mobile-tabs-label,
html[data-theme="dark"] .question-header,
html[data-theme="dark"] p {
    color: var(--muted) !important;
}

html[data-theme="dark"] .mode-card h4,
html[data-theme="dark"] .chapter-name,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .question-text,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
    color: var(--dark) !important;
}

html[data-theme="dark"] .mode-icon {
    background: #1e3a5f !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .category-btn {
    color: var(--text-main) !important;
}

html[data-theme="dark"] .category-btn:hover {
    background: #1e3a5f !important;
}

html[data-theme="dark"] .category-btn .badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--muted) !important;
}

html[data-theme="dark"] .mobile-tab-btn {
    background: var(--surface-2) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .mobile-tab-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-back,
html[data-theme="dark"] .side-nav-arrow {
    background: var(--surface-2) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .btn-back:hover,
html[data-theme="dark"] .side-nav-arrow:hover {
    background: #334155 !important;
}

html[data-theme="dark"] .trial-badge {
    background: #3f2e14 !important;
    border-color: #b45309 !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .chapter-bar {
    background: #1e3a5f !important;
}

html[data-theme="dark"] .chapter-row:hover {
    background: #1e293b !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #0b1220 !important;
    color: var(--dark) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .q-nav-btn {
    background: var(--surface-2) !important;
    color: var(--text-main) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .q-nav-btn.active {
    background: #1e3a5f !important;
}

html[data-theme="dark"] .questions-nav {
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .total-counter-badge {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
}

html[data-theme="dark"] .answer-btn {
    background: var(--surface-2) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .answer-btn:hover {
    background: #243044 !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] .answer-btn.answered {
    background: #1e3a5f !important;
    border-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .answer-btn.correct-clicked {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .answer-btn.wrong-clicked {
    background: #7f1d1d !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .comment-box {
    background: var(--warning-bg) !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .result-stat-row {
    background: var(--surface-2) !important;
}

html[data-theme="dark"] .review-row {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .review-row.ok {
    background: #052e1c !important;
}

html[data-theme="dark"] .review-row.bad {
    background: #3f1515 !important;
}

html[data-theme="dark"] .review-row.skip {
    background: #1e293b !important;
}

html[data-theme="dark"] .review-opt.correct {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .review-opt.wrong {
    background: #7f1d1d !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .review-thumb,
html[data-theme="dark"] .review-thumb.empty {
    background: #0b1220 !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}

html[data-theme="dark"] .btn-hint.hint-off {
    background: #1e3a5f !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .btn-hint.hint-always {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .btn-hint.hint-after {
    background: #431407 !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .alert-error {
    background: #7f1d1d !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .alert-success {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .eye-btn {
    color: var(--muted) !important;
}

html[data-theme="dark"] .resend-timer {
    color: var(--dark) !important;
}

html[data-theme="dark"] #exam-modal > div,
html[data-theme="dark"] #password-modal > div,
html[data-theme="dark"] #marathon-modal > div,
html[data-theme="dark"] #material-dialog > div {
    background: var(--surface) !important;
    color: var(--dark) !important;
}

html[data-theme="dark"] #exam-modal label,
html[data-theme="dark"] #marathon-modal label,
html[data-theme="dark"] #marathon-modal > div > div {
    background-color: transparent;
}

html[data-theme="dark"] #exam-modal [style*="background: #f0f7ff"],
html[data-theme="dark"] #exam-modal [style*="background: #f8fafc"],
html[data-theme="dark"] #marathon-modal [style*="background: #f8fafc"] {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--dark) !important;
}

html[data-theme="dark"] #exam-modal [style*="background: #e2e8f0"],
html[data-theme="dark"] #password-modal [style*="background: #e2e8f0"],
html[data-theme="dark"] #marathon-modal [style*="background: #e2e8f0"] {
    background: #334155 !important;
    color: var(--dark) !important;
}

html[data-theme="dark"] #material-dialog [style*="background: #f8fafc"],
html[data-theme="dark"] #material-dialog [style*="background: white"],
html[data-theme="dark"] #dialog-content-scroll {
    background: var(--surface) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .settings-row {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .lib-group,
html[data-theme="dark"] .result {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .lib-item span.title {
    color: var(--dark) !important;
}
html[data-theme="dark"] .reader-panel,
html[data-theme="dark"] .reader-bar {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-box {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--dark) !important;
}
html[data-theme="dark"] .chip {
    background: var(--surface-2) !important;
    color: var(--dark) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .chip.active {
    background: var(--primary) !important;
    color: #fff !important;
}
html[data-theme="dark"] .btn-ghost {
    background: var(--surface-2) !important;
    color: var(--dark) !important;
}