html[data-theme="dark"] {
    --bg: #13151a;
    --card: #1c1e26;
    --text: #e4e6ed;
    --muted: #7a7e94;
    --border: #2c2f3a;
    --accent: #6b8aff;
    --accent-light: #1e2340;
    --success: #34d399;
    --success-light: #132a22;
    --warning: #fbbf24;
    --warning-light: #2a2510;
    --danger: #f87171;
    --green: #34d399;
    --green-light: #132a22;
    --blue: #6b8aff;
    --blue-light: #1e2340;
}

[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .top-bar { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--bg); color: var(--text); border-color: var(--border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--bg); color: var(--text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
[data-theme="dark"] .input-group-text { background: var(--accent-light); color: var(--accent); border-color: var(--border); }

[data-theme="dark"] .section,
[data-theme="dark"] .test-card,
[data-theme="dark"] .question-card,
[data-theme="dark"] .score-card,
[data-theme="dark"] .topic-result,
[data-theme="dark"] .history-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .join-card,
[data-theme="dark"] .action-card { background: var(--card); border-color: var(--border); color: var(--text); }

[data-theme="dark"] .topic-block { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .question-block { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .invite-block { background: var(--bg); }
[data-theme="dark"] .info-block { background: var(--accent-light); border-color: rgba(107,138,255,0.15); }
[data-theme="dark"] .info-block pre { background: var(--card); border-color: var(--border); color: var(--text); }

[data-theme="dark"] .btn-action { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-action:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .btn-action-danger:hover { background: #2a1515; border-color: var(--danger); color: var(--danger); }

[data-theme="dark"] .btn-ghost { background: var(--accent-light); border-color: rgba(107,138,255,0.2); color: var(--accent); }
[data-theme="dark"] .btn-ghost:hover { background: var(--accent); color: #fff; }
[data-theme="dark"] .btn-back { background: var(--accent-light); border-color: rgba(107,138,255,0.2); color: var(--accent); }
[data-theme="dark"] .btn-back:hover { background: var(--accent); color: #fff; }
[data-theme="dark"] .btn-outline-custom { border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .btn-outline-custom:hover { border-color: var(--accent); color: var(--accent); }

[data-theme="dark"] .option-btn { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .option-btn:hover:not(:disabled) { background: var(--accent-light); border-color: var(--accent); }
[data-theme="dark"] .option-btn .letter { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .option-btn.correct { background: var(--success-light); border-color: var(--success); }
[data-theme="dark"] .option-btn.correct .letter { background: var(--success); }
[data-theme="dark"] .option-btn.wrong { background: #2a1515; border-color: var(--danger); }
[data-theme="dark"] .option-btn.wrong .letter { background: var(--danger); }

[data-theme="dark"] .page-btn { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .page-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .page-btn.active { background: var(--accent); color: #fff; }

[data-theme="dark"] .progress-track { background: var(--border); }
[data-theme="dark"] .bar { background: var(--border); }

[data-theme="dark"] .tabs { background: var(--bg); }
[data-theme="dark"] .tab { color: var(--muted); }
[data-theme="dark"] .tab.active { background: var(--card); color: var(--text); }

[data-theme="dark"] .tag { background: var(--accent-light); color: var(--accent); }
[data-theme="dark"] .topic-label { background: var(--blue-light); color: var(--blue); }
[data-theme="dark"] .role-badge.teacher { background: var(--accent-light); color: var(--accent); }
[data-theme="dark"] .role-badge.student { background: var(--green-light); color: var(--green); }
[data-theme="dark"] .avatar.teacher { background: var(--accent-light); color: var(--accent); }
[data-theme="dark"] .avatar.student { background: var(--green-light); color: var(--green); }
[data-theme="dark"] .info-row { background: var(--bg); }

[data-theme="dark"] .upload-zone { border-color: var(--border); }
[data-theme="dark"] .upload-zone:hover { border-color: var(--accent); background: var(--accent-light); }
[data-theme="dark"] .upload-zone.has-file { border-color: var(--success); background: var(--success-light); }

[data-theme="dark"] .alert-danger { background: #2a1515; border-color: #3a1f1f; color: var(--danger); }
[data-theme="dark"] .alert-success { background: #132a22; border-color: #1a3a2a; color: var(--success); }

[data-theme="dark"] thead th { border-color: var(--border); color: var(--muted); }
[data-theme="dark"] tbody td { border-color: var(--border); color: var(--text); }

[data-theme="dark"] .score-pill.good { background: var(--success-light); color: var(--success); }
[data-theme="dark"] .score-pill.mid { background: var(--warning-light); color: var(--warning); }
[data-theme="dark"] .score-pill.bad { background: #2a1515; color: var(--danger); }

[data-theme="dark"] .btn-home { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-home:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .btn-logout { border-color: var(--danger); color: var(--danger); }
[data-theme="dark"] .btn-logout:hover { background: var(--danger); color: #fff; }

[data-theme="dark"] .toast-copied { background: var(--card); color: var(--text); }

[data-theme="dark"] .btn-top {
    background: var(--accent-light);
    border-color: rgba(107,138,255,0.35);
    color: var(--accent);
}
[data-theme="dark"] .btn-top:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

[data-theme="dark"] .btn-create,
[data-theme="dark"] .btn-go,
[data-theme="dark"] .btn-retry {
    color: #fff;
}

[data-theme="dark"] .page-header h4,
[data-theme="dark"] .page-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .history-card .title,
[data-theme="dark"] .topic-row .name,
[data-theme="dark"] .student-name,
[data-theme="dark"] .profile-name,
[data-theme="dark"] .verify-title,
[data-theme="dark"] .top-bar .brand {
    color: var(--text);
}

[data-theme="dark"] .welcome p,
[data-theme="dark"] .verify-desc,
[data-theme="dark"] .empty-state p,
[data-theme="dark"] .empty-msg,
[data-theme="dark"] .student-date,
[data-theme="dark"] .history-card .date,
[data-theme="dark"] .history-card .detail,
[data-theme="dark"] .history-card .attempts,
[data-theme="dark"] .topic-row .detail,
[data-theme="dark"] .form-label,
[data-theme="dark"] .pw-rules,
[data-theme="dark"] .info-label,
[data-theme="dark"] .info-row .key,
[data-theme="dark"] .top-bar .user-name,
[data-theme="dark"] .spinner-wrap p {
    color: var(--muted);
}

[data-theme="dark"] .welcome .avatar,
[data-theme="dark"] .action-card .icon-history {
    background: var(--blue-light);
    color: var(--blue);
}

[data-theme="dark"] .history-card:hover,
[data-theme="dark"] .test-card:hover,
[data-theme="dark"] .action-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .topic-row .bar,
[data-theme="dark"] .history-card .bar {
    background: var(--border);
}

[data-theme="dark"] .empty-state .icon {
    color: var(--text);
}

/* Theme toggle button */
.theme-toggle {
    background: none; border: 1px solid var(--border);
    border-radius: 10px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px; transition: all 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); }