:root {
  --p: #2f4154; --s: #6f859e; --l: #dde3ea; --bg: #f2f4f7; --card: #e2e7ec;
  --txt: #2f4154; --txt2: #6f859e; --brd: #c8ced4; --ok: #4caf50; --err: #e74c3c;
  --fg1: #2f4154; --fg2: #3f566f;
}
[data-theme="green"] {
  --p: #4D8802; --s: #41B619; --l: #e8f5e0; --bg: #f7faf5; --card: #d9f0c8;
  --txt: #2d5a0f; --txt2: #4a8c2a; --brd: #b8d8a0; --ok: #41B619; --err: #d32f2f;
  --fg1: #4D8802; --fg2: #3a6b00;
}
[data-theme="blue"] {
  --p: #1565C0; --s: #1E88E5; --l: #e3f2fd; --bg: #f5f9ff; --card: #d0e6ff;
  --txt: #0d47a1; --txt2: #1976d2; --brd: #90caf9; --ok: #1E88E5; --err: #e53935;
  --fg1: #1565C0; --fg2: #0d47a1;
}
[data-theme="purple"] {
  --p: #6A1B9A; --s: #8E24AA; --l: #f3e5f5; --bg: #faf5fb; --card: #e1bee7;
  --txt: #4a148c; --txt2: #7b1fa2; --brd: #ce93d8; --ok: #8E24AA; --err: #e53935;
  --fg1: #6A1B9A; --fg2: #4a148c;
}
[data-theme="orange"] {
  --p: #E65100; --s: #F57C00; --l: #fff3e0; --bg: #fffaf5; --card: #ffe0b2;
  --txt: #bf360c; --txt2: #e65100; --brd: #ffcc80; --ok: #F57C00; --err: #c62828;
  --fg1: #E65100; --fg2: #bf360c;
}
body, .main { background: var(--bg) !important; }
.sidebar { background: var(--p) !important; }
.menu-item, .nav-btn { background: var(--l) !important; color: var(--txt) !important; }
.menu-item:hover, .nav-btn:hover, .menu-item.active, .nav-btn.active { background: var(--s) !important; color: #fff !important; }
.topbar { background: var(--p) !important; }
.topbar .logo { background: var(--l) !important; color: var(--txt) !important; }
.topbar .logo:hover { background: var(--s) !important; color: #fff !important; }
.big-box, .panel, .stat-card, .about-card, .auth-box, .modal-content { background: var(--card) !important; border-color: var(--brd) !important; }
.form-input, .form-control, .select-box, .auth-box .input, .auth-box .role-select { background: var(--l) !important; color: var(--txt) !important; }
.form-input:focus { box-shadow: 0 0 0 2px rgba(65, 182, 25, 0.4) !important; }
.btn-save, .btn-primary, .btn-admin.btn-blue, .btn-enroll, .btn-enroll-modal, .file-upload-btn, .edit-btn, .btn-access, .btn-done { background: var(--p) !important; color: #fff !important; }
.btn-save:hover, .btn-primary:hover, .btn-admin.btn-blue:hover, .file-upload-btn:hover, .edit-btn:hover, .btn-access:hover { background: var(--s) !important; color: #fff !important; }
.btn, .topbar .btn, .topbar .icon, .notif-btn { background: var(--s) !important; color: #fff !important; }
.btn:hover, .topbar .btn:hover, .topbar .icon:hover, .notif-btn:hover { background: var(--p) !important; color: #fff !important; }
.btn-danger, .btn-delete, .btn-unenroll, .sidebar .logout-btn, .logout-link { background: var(--err) !important; color: #fff !important; }
.btn-danger:hover, .btn-delete:hover, .btn-unenroll:hover, .logout-link:hover, .sidebar .logout-btn:hover { background: #b71c1c !important; color: #fff !important; }
.btn-back-top, .ghost-btn { background: var(--l) !important; color: var(--txt) !important; }
.btn-back-top:hover, .ghost-btn:hover { background: var(--brd) !important; }
.stat-num, .panel h3, .about-title, .about-card h3, .group-title, .course-title, .member-name, .resource-name, .admin-table th, .modal-header h2, .test-q h4, .auth-box h2, .switch a { color: var(--txt) !important; }
.stat-label, .no-data, .about-subtitle, .student-email, .course-info, .notif-text, .lesson-subtitle, .member-email, .member-role { color: var(--txt2) !important; }
.admin-table th { background: var(--l) !important; }
.admin-table td { border-bottom-color: var(--brd) !important; }
.msg-success, .message.success, .res-ok { background: #d4edda !important; color: #155724 !important; }
.msg-error, .message.error, .res-fail { background: #f8d7da !important; color: #721c24 !important; }
[data-theme="green"] .hero { background: linear-gradient(rgba(77, 136, 2, 0.4), rgba(65, 182, 25, 0.5)), url("img/2.jpg") no-repeat center center !important; }
.wide-box, .card .title { background: var(--card) !important; }
.center-box { background: var(--l) !important; color: var(--txt) !important; }
.center-box:hover { background: var(--brd) !important; }
.lesson-nav { background: var(--card) !important; }
.lesson-btn { background: var(--l) !important; color: var(--txt) !important; }
.lesson-btn:hover { background: var(--brd) !important; }
.lesson-btn.active { background: var(--p) !important; color: #fff !important; }
.theory-card { background: var(--bg) !important; border-color: var(--l) !important; }
.code-block { background: var(--p) !important; color: #4CAF50 !important; }
.lesson-note { background: #eef3f8 !important; border-left-color: var(--p) !important; }
.resource-card { background: var(--card) !important; border-left-color: var(--p) !important; }
.resource-card:hover { background: var(--l) !important; }
.site-footer { background: linear-gradient(90deg, var(--fg1) 0%, var(--fg2) 100%) !important; }
.badge.lang { background: var(--s) !important; }
.filter-btn { background: var(--s) !important; color: #fff !important; }
.filter-btn.active { background: var(--l) !important; color: var(--txt) !important; font-weight: 700 !important; }
.filter-btn:hover { background: var(--p) !important; color: #fff !important; }
.modal-header { border-bottom-color: var(--brd) !important; }
.modal-close { color: var(--s) !important; }
.modal-close:hover { color: var(--err) !important; }
.test-opt:hover { border-color: var(--p) !important; }
.status-approved { background: var(--ok) !important; }
.status-rejected { background: var(--err) !important; }
.notif-dot { box-shadow: 0 0 0 2px var(--s) !important; }
.notif-read-btn { background: var(--p) !important; color: #fff !important; }
.notif-read-btn:hover { background: var(--s) !important; color: #fff !important; }
.btn-create-course { background: var(--ok) !important; color: #fff !important; }
.btn-create-course:hover { background: #388E3C !important; color: #fff !important; }
.theme-switcher { margin-top: 15px; margin-bottom: 15px; }
.theme-label { color: #dde3ea; font-size: 11px; text-transform: uppercase; font-weight: bold; margin-bottom: 8px; text-align: center; letter-spacing: 1px; opacity: 0.8; }
.theme-list { max-height: 130px; overflow-y: auto; background: rgba(0, 0, 0, 0.15); border-radius: 8px; padding: 5px; scrollbar-width: thin; scrollbar-color: #6f859e rgba(0,0,0,0.15); }
.theme-list::-webkit-scrollbar { width: 6px; }
.theme-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 3px; }
.theme-list::-webkit-scrollbar-thumb { background-color: #6f859e; border-radius: 3px; }
.theme-item { padding: 8px 10px; margin: 2px 0; background: #dde3ea; color: #2f4154; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: bold; transition: all 0.2s; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.theme-item:hover { background: #526274; color: #fff; }
.theme-item.active { background: #4caf50; color: #fff; }
.sidebar-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.sidebar-avatar-placeholder { margin: 0 auto 10px; width: 60px; height: 60px; background: #6f859e; border-radius: 50%; }
.sidebar-username { color: #fff; font-weight: bold; font-size: 14px; }
.sidebar-role { color: #95a5a6; font-size: 11px; }
.sidebar-profile-wrap { text-align: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.social-btn { background: var(--p) !important; color: #fff !important; }
.social-btn:hover { background: var(--s) !important; color: #fff !important; }
.back-link { background: var(--p) !important; color: #fff !important; }
.back-link:hover { background: var(--s) !important; color: #fff !important; }
@media (max-width: 768px) {
    .sidebar.active {
        background: var(--p) !important;
    }
    .sidebar.active .nav-btn {
        background: var(--l) !important;
        color: var(--txt) !important;
    }
    .sidebar.active .nav-btn.active {
        background: var(--s) !important;
        color: #fff !important;
    }
}