/* ============================================================ theme.css — Centralized Light / Dark Theme Rules: theme = "dark" → gets class="dark" theme = "light" → class="dark" is removed ============================================================ */ /* ─── LIGHT (default) ───────────────────────────────────────── */ :root { /* backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f6f8ff; /* text */ --text-primary: #111111; --text-secondary: #666666; /* cards */ --card-bg: #ffffff; /* accent */ --accent: #7b3ff2; } /* ─── DARK ─────────────────────────────────────────────────── NOTE: dashboard.css declares these same nav variables under "body.dark", which never fires because theme.js puts the class on , not . Re-declaring them here under "html.dark" (and "html.dark body") is the minimal fix. ─────────────────────────────────────────────────────────────── */ .dark { --bg-primary: #0f172a; --bg-secondary: #020617; --text-primary: #ffffff; --text-secondary: #cbd5e1; --card-bg: #111827; --accent: #9f6bff; /* ── nav/dropdown variables (mirrors body.dark in dashboard.css) ── */ --nav-bg: #0b1220; --nav-text: #ffffff; --dropdown-bg: #0f172a; --dropdown-text: #ffffff; --dropdown-hover: rgba(255, 255, 255, 0.08); --border-color: rgba(255, 255, 255, 0.1); } /* dashboard.css uses "body.dark" which never matches because the class lives on . Propagate the same variables so any selector in dashboard.css that reads from body still works. */ html.dark body { --nav-bg: #0b1220; --nav-text: #ffffff; --dropdown-bg: #0f172a; --dropdown-text: #ffffff; --dropdown-hover: rgba(255, 255, 255, 0.08); --border-color: rgba(255, 255, 255, 0.1); } /* ============================================================ THEME TOGGLE ICON — global base styles ============================================================ */ #themeToggle { cursor: pointer; font-size: 1.1rem; color: var(--text-secondary); transition: color 0.2s ease, background 0.2s ease; padding: 6px 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #themeToggle:hover { color: var(--accent); background: rgba(123, 63, 242, 0.07); } html.dark #themeToggle { color: #94a3b8; } html.dark #themeToggle:hover { color: #9f6bff; background: rgba(159, 107, 255, 0.1); } /* Navbars that use flex already — ensure toggle stays right */ .navbar>#themeToggle, .topbar>#themeToggle, header>#themeToggle { margin-left: auto; } /* Override for navbars that have nav-right already */ .nav-right #themeToggle { margin-left: 0; } /* ============================================================ DARK-MODE OVERRIDES Only elements that use hardcoded colors in dashboard.css are listed here. Nothing else is touched. ============================================================ */ /* ─── Navbar ─────────────────────────────────────────────── */ html.dark .premium-header { background: #0b1220; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .brand-text { text-decoration: none; } html.dark .brand-text { color: #ffffff; } html.dark .nav-link { color: #cbd5e1; } html.dark .nav-link:hover, html.dark .nav-link.active { color: #9f6bff; } html.dark .nav-link::after { background-color: #9f6bff; } /* ─── Hamburger ──────────────────────────────────────────── */ html.dark .hamburger span { background: #e5e7eb; } /* ─── Dropdown ───────────────────────────────────────────── */ html.dark .dropdown-content { background: #0f172a; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); } html.dark .dropdown-content a { color: #cbd5e1; } html.dark .dropdown-content a:hover { background: rgba(255, 255, 255, 0.08); color: #9f6bff; } /* ─── Hero ───────────────────────────────────────────────── */ html.dark .hero h1 { color: #ffffff; } html.dark .hero p { color: #94a3b8; } html.dark .hero-secondary { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .hero-secondary:hover { background: #273548; border-color: #9f6bff; } /* ─── Program cards ──────────────────────────────────────── */ html.dark .program-card { background: #111827; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } /* ─── Popup ──────────────────────────────────────────────── */ html.dark .popup-box { background: #1e293b; color: #ffffff; } html.dark .popup-box input { background: #0f172a; border-color: #334155; color: #ffffff; } html.dark .popup-box input::placeholder { color: #64748b; } html.dark .close-btn { color: #94a3b8; } /* ============================================================ APPLY PAGE — dark overrides (apply.css hardcoded colors) ============================================================ */ /* ─── Body ───────────────────────────────────────────────── */ html.dark body { background: #0f172a; color: #e2e8f0; } /* ─── Navbar ─────────────────────────────────────────────── */ html.dark .navbar { background: #0b1220; border-color: rgba(255, 255, 255, 0.08); } /* ─── Page heading subtitle ──────────────────────────────── */ html.dark .subtitle { color: #94a3b8; } /* ─── Form card ──────────────────────────────────────────── */ html.dark .form-card { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ─── Inputs, selects, textareas ─────────────────────────── */ html.dark .input-group label { color: #cbd5e1; } html.dark .input-group input, html.dark .input-group select, html.dark .input-group textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .input-group input::placeholder, html.dark .input-group textarea::placeholder { color: #64748b; } html.dark .input-group input:focus, html.dark .input-group select:focus, html.dark .input-group textarea:focus { border-color: #9f6bff; } /* ─── Checkbox label ─────────────────────────────────────── */ html.dark .checkbox-group { color: #94a3b8; } /* ─── Bottom info badges ─────────────────────────────────── */ html.dark .bottom-info { color: #94a3b8; } /* ─── Footer ─────────────────────────────────────────────── */ html.dark .footer { background: #0b1220; border-color: rgba(255, 255, 255, 0.08); } html.dark .footer-content h3 { color: #ffffff; } html.dark .footer-content p { color: #94a3b8; } html.dark .copyright { color: #64748b; border-color: rgba(255, 255, 255, 0.08); } /* ============================================================ BASIC DASHBOARD PAGE — dark overrides (basic_dashboard.css) ============================================================ */ html.dark .brand { color: #a78bfa; } /* ─── Course info cards ───────────────────────────────────── */ html.dark .info-card { background: #1e293b; color: #e2e8f0; } html.dark .info-card h4 { color: #94a3b8; } html.dark .info-card p { color: #ffffff; } /* ─── Syllabus timeline ───────────────────────────────────── */ html.dark .timeline::before { background: #334155; } html.dark .timeline-icon { background: #1e293b; border-color: #334155; color: #94a3b8; } html.dark .timeline-icon.done { background: #3b82f6; border-color: transparent; color: #ffffff; } html.dark .timeline-content { background: #1e293b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } html.dark .module-title { color: #e2e8f0; } /* ─── Instructors card ────────────────────────────────────── */ html.dark .instructors-card { background: #1e293b; } html.dark .section-title { color: #ffffff; } html.dark .instructor-info h4 { color: #f1f5f9; } html.dark .instructor-info p { color: #94a3b8; } /* ─── Batches card ────────────────────────────────────────── */ html.dark .batches-card { background: #1e293b; } html.dark .batch-header h2 { color: #ffffff; } html.dark .batch-item h4 { color: #f1f5f9; } html.dark .batch-item p { color: #94a3b8; } html.dark .divider { background: #334155; } /* Status pills stay readable — just slightly adjust the dark background */ html.dark .status.available { background: #064e3b; color: #6ee7b7; } html.dark .status.filling { background: #450a0a; color: #fca5a5; } /* ============================================================ ADVANCED DASHBOARD PAGE — dark overrides ============================================================ */ html.dark .hero-left h1 { color: #ffffff; } html.dark .hero-left p { color: #94a3b8; } html.dark .badge { background: rgba(159, 107, 255, 0.15); color: #c4b5fd; border-color: rgba(159, 107, 255, 0.3); } html.dark .course-stats { background: var(--bg-secondary); } html.dark .stat-card { background: #1e293b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } html.dark .stat-card h4 { color: #94a3b8; } html.dark .stat-card p { color: #ffffff; } html.dark .syllabus { background: var(--bg-primary); } html.dark .syllabus-title { color: #ffffff; } html.dark .instructors { background: var(--bg-secondary); } html.dark .instructors h2 { color: #ffffff; } html.dark .instructor-list .mentor { border-color: #334155; } html.dark .mentor h4 { color: #f1f5f9; } html.dark .mentor p { color: #94a3b8; } html.dark .schedule { background: var(--bg-primary); } html.dark .schedule h2 { color: #ffffff; } html.dark .schedule-card { background: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border-color: #334155; } html.dark .schedule-info h4 { color: #f1f5f9; } html.dark .schedule-info p { color: #94a3b8; } html.dark .schedule-card button { background: #334155; color: #e2e8f0; border-color: #475569; } html.dark .schedule-card button:hover { background: #9f6bff; color: #ffffff; border-color: #9f6bff; } html.dark .secondary-btn { background: transparent; border-color: #9f6bff; color: #9f6bff; } html.dark .secondary-btn:hover { background: rgba(159, 107, 255, 0.12); } html.dark footer { background: transparent; color: #64748b; border-color: rgba(255, 255, 255, 0.08); } /* ============================================================ INTERMEDIATE DASHBOARD PAGE — dark overrides ============================================================ */ html.dark .hero-content h1 { color: #ffffff; } html.dark .hero-content p { color: #94a3b8; } html.dark .desktop-layout { background: var(--bg-primary); } html.dark .page-wrapper { background: var(--bg-primary); } /* ============================================================ AUTH PAGES (login.html, register.html) — dark overrides ============================================================ */ html.dark .auth-wrapper { background: var(--bg-secondary); } html.dark .auth-card { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } html.dark .auth-card h2 { color: #ffffff; } html.dark .auth-card label { color: #cbd5e1; } html.dark .auth-card input[type="text"], html.dark .auth-card input[type="email"], html.dark .auth-card input[type="password"] { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .auth-card input::placeholder { color: #64748b; } html.dark .auth-card input:focus { border-color: #9f6bff; } html.dark .auth-container { background: var(--bg-secondary); } html.dark .auth-left { background: #111827; } html.dark .auth-left h1 { color: #ffffff; } html.dark .auth-left p { color: #94a3b8; } html.dark .auth-left .stats { color: #94a3b8; } html.dark .auth-right { background: #1e293b; } html.dark .auth-right h2 { color: #ffffff; } html.dark .auth-right label { color: #cbd5e1; } html.dark .auth-right input[type="text"], html.dark .auth-right input[type="email"], html.dark .auth-right input[type="password"] { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .auth-right input::placeholder { color: #64748b; } html.dark .auth-right input:focus { border-color: #9f6bff; } html.dark .auth-right .subtitle { color: #94a3b8; } html.dark .auth-right .switch { color: #94a3b8; } html.dark .auth-right .switch a { color: #9f6bff; } html.dark .auth-right .terms { color: #94a3b8; } html.dark .auth-right .terms a { color: #9f6bff; } html.dark .auth-right .divider { background: transparent; border-color: #334155; color: #64748b; } html.dark .password-box { background: #0f172a; border-color: #334155; } html.dark .toggle { color: #94a3b8; } html.dark .toggle:hover { color: #9f6bff; } html.dark .forgot { color: #9f6bff; } html.dark .switch { color: #94a3b8; } html.dark .switch a { color: #9f6bff; } html.dark .google-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .google-btn:hover { background: #273548; border-color: #9f6bff; } /* ─── OTP Modal ─────────────────────────────────────────── */ html.dark .otp-modal { background: rgba(0, 0, 0, 0.7); } html.dark .otp-box { background: #1e293b; color: #e2e8f0; } html.dark .otp-box h3 { color: #ffffff; } html.dark .otp-subtitle { color: #94a3b8; } html.dark #otpInput { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .otp-close { color: #94a3b8; } html.dark #otpTimer { color: #9f6bff; } /* ─── Forgot Password Modal ─────────────────────────────── */ html.dark .fp-overlay { background: rgba(0, 0, 0, 0.7); } html.dark .fp-modal { background: #1e293b; color: #e2e8f0; } html.dark .fp-modal h2 { color: #ffffff; } html.dark .fp-modal p { color: #94a3b8; } html.dark .fp-modal input { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .fp-close { color: #94a3b8; } html.dark #fp-otp-timer { color: #9f6bff; } html.dark .resend-text { color: #94a3b8; } html.dark .resend-btn { color: #9f6bff; } /* ─── Auth footer links ─────────────────────────────────── */ html.dark footer a { color: #94a3b8; } html.dark footer a:hover { color: #9f6bff; } html.dark .nav-links a { color: #cbd5e1; } html.dark .nav-links a:hover { color: #9f6bff; } html.dark .nav-links .login-btn { border-color: #9f6bff; color: #9f6bff; } /* ============================================================ BLOG PAGE (pages/blog.html) — dark overrides ============================================================ */ html.dark .hero-text { color: #94a3b8; } html.dark .blog-container { background: var(--bg-primary); } html.dark .blog-card { background: #1e293b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } html.dark .blog-card h3 { color: #f1f5f9; } html.dark .blog-card p { color: #94a3b8; } html.dark .blog-card .date { color: #9f6bff; } html.dark .middle-quote { background: #1e293b; color: #e2e8f0; } html.dark .middle-quote.dark { background: #0b1220; color: #e2e8f0; } html.dark .footer-content p { color: #94a3b8; } /* ============================================================ COMMUNITY PAGE (pages/community.html) — dark overrides ============================================================ */ html.dark .features { background: var(--bg-secondary); } html.dark .feature { background: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } html.dark .feature h3 { color: #f1f5f9; } html.dark .feature p { color: #94a3b8; } html.dark .feature-icon { color: #9f6bff; } html.dark .popup .popup-content { background: #1e293b; color: #e2e8f0; } html.dark .popup .popup-content h3 { color: #ffffff; } html.dark .popup .popup-content p { color: #94a3b8; } html.dark .footer-top { color: #94a3b8; } html.dark .footer-top strong { color: #ffffff; } html.dark .footer-links a { color: #94a3b8; } html.dark .footer-links a:hover { color: #9f6bff; } /* ============================================================ DOCUMENTATION PAGE (pages/documentation.html) — dark overrides ============================================================ */ html.dark .site-header { background: #0b1220; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } html.dark .logo-text { color: #ffffff; } html.dark .page-title { color: #cbd5e1; } html.dark .doc-cards-section { background: var(--bg-primary); } html.dark .doc-card { background: #1e293b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } html.dark .doc-card__title { color: #f1f5f9; } html.dark .doc-card__list li { color: #94a3b8; } html.dark .cta-section { background: var(--bg-secondary); } html.dark .cta-section__title { color: #ffffff; } html.dark .cta-section__body { color: #94a3b8; } html.dark .btn--secondary { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .btn--secondary:hover { border-color: #9f6bff; color: #9f6bff; } html.dark .support-ref { background: var(--bg-secondary); } html.dark #support-h1 { color: #ffffff; } html.dark .support-sub { color: #94a3b8; } html.dark #support-start-here { color: #9f6bff; } html.dark .faq-ref { background: #1e293b; border-color: #334155; } html.dark .faq-head { border-color: #334155; } html.dark #faq-h2 { color: #f1f5f9; } html.dark .faq-grid h4 { color: #e2e8f0; } html.dark .faq-grid p { color: #94a3b8; } html.dark .support-cta { background: var(--bg-secondary); } html.dark #support-cta-text { color: #94a3b8; } html.dark .cta-secondary { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .cta-secondary:hover { border-color: #9f6bff; color: #9f6bff; } html.dark .site-footer { background: #0b1220; color: #64748b; border-color: rgba(255, 255, 255, 0.08); } /* ============================================================ TESTIMONIALS PAGE (pages/testimonials.html) — dark overrides ============================================================ */ html.dark .testimonials-ref { background: var(--bg-primary); } html.dark #testimonials-h2 { color: #ffffff; } html.dark #testimonials-subtitle { color: #94a3b8; } html.dark .rating-card { background: #1e293b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } html.dark .rating-left h1 { color: #ffffff; } html.dark .rating-left p { color: #94a3b8; } html.dark .bar { background: #334155; } html.dark .review-pill { background: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } html.dark .review-pill p { color: #94a3b8; } html.dark .share-text { color: #94a3b8; } html.dark .feedback-overlay { background: rgba(0, 0, 0, 0.7); } html.dark .feedback-modal { background: #1e293b; color: #e2e8f0; } html.dark .feedback-modal h3 { color: #ffffff; } html.dark .modal-sub { color: #94a3b8; } html.dark .feedback-modal label { color: #cbd5e1; } html.dark .feedback-modal select, html.dark #feedbackText { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .modal-close { color: #94a3b8; } html.dark .rating-stars span { color: #475569; } html.dark .rating-stars span.active, html.dark .rating-stars span:hover { color: #f59e0b; } /* ============================================================ MODULE PAGE — dark overrides (profile_page.css) ============================================================ */ html.dark .layout { background: var(--bg-secondary); } html.dark .sidebar { background: #0b1220; border-color: rgba(255, 255, 255, 0.08); box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4); } html.dark .sidebar .brand h2 { color: #ffffff; } html.dark .sidebar .brand p { color: #94a3b8; } html.dark .sidebar .menu li { color: #cbd5e1; } html.dark .sidebar .menu li:hover { background: rgba(255, 255, 255, 0.08); color: #9f6bff; } html.dark .main { background: var(--bg-primary); } html.dark .main h1, html.dark #moduleTitle { color: #ffffff; } html.dark .back-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .back-btn:hover { background: #273548; border-color: #9f6bff; color: #9f6bff; } /* ============================================================ ADMIN DASHBOARD — dark overrides (admin_dashboard.css) ============================================================ */ html.dark .sidebar { background: #0b1220; border-color: rgba(255, 255, 255, 0.08); box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5); } html.dark .sidebar .brand h2 { color: #ffffff; } html.dark .sidebar .brand p { color: #94a3b8; } html.dark .sidebar .nav li { color: #cbd5e1; } html.dark .sidebar .nav li:hover, html.dark .sidebar .nav li.active { background: rgba(159, 107, 255, 0.15); color: #9f6bff; } html.dark .sidebar-actions .btn { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .sidebar-actions .btn:hover { border-color: #9f6bff; color: #9f6bff; } html.dark .sidebar-actions .btn.primary { background: #9f6bff; border-color: #9f6bff; color: #ffffff; } html.dark .sidebar-actions .btn.primary:hover { background: #8b5cf6; } html.dark .hamburger { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .hamburger:hover { background: #273548; border-color: #9f6bff; color: #9f6bff; } html.dark .sidebar-overlay { background: rgba(0, 0, 0, 0.6); } html.dark .stat-box, html.dark .dashboard-card, html.dark .admin-card { background: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border-color: #334155; } html.dark .stat-box h3, html.dark .dashboard-card h3, html.dark .admin-card h3 { color: #f1f5f9; } html.dark .stat-box p, html.dark .dashboard-card p, html.dark .admin-card p { color: #94a3b8; } html.dark table { color: #e2e8f0; } html.dark th { background: #0f172a; color: #94a3b8; border-color: #334155; } html.dark td { border-color: #1e293b; } html.dark tr:hover td { background: rgba(255, 255, 255, 0.04); } html.dark .search-bar, html.dark .filter-select, html.dark .admin-input { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .search-bar::placeholder, html.dark .admin-input::placeholder { color: #64748b; } html.dark .search-bar:focus, html.dark .admin-input:focus { border-color: #9f6bff; } html.dark .section-header h2, html.dark .page-heading { color: #ffffff; } html.dark .section-header p { color: #94a3b8; } html.dark .action-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .action-btn:hover { background: #273548; border-color: #9f6bff; color: #9f6bff; } html.dark .action-btn.danger:hover { background: #450a0a; border-color: #ef4444; color: #ef4444; } /* ============================================================ FACULTY DASHBOARD — dark overrides (faculty-dashboard.css) ============================================================ */ html.dark .faculty-profile { background: #0f172a; border-color: rgba(255, 255, 255, 0.08); } html.dark .faculty-info strong { color: #ffffff; } html.dark .faculty-info p { color: #94a3b8; } html.dark .edit-profile-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .edit-profile-btn:hover { background: #273548; border-color: #9f6bff; color: #9f6bff; } html.dark .logout-btn { background: transparent; border-color: rgba(239, 68, 68, 0.4); color: #f87171; } html.dark .logout-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; color: #ef4444; } html.dark .faculty-card, html.dark .report-card, html.dark .student-card { background: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border-color: #334155; } html.dark .faculty-card h3, html.dark .report-card h3, html.dark .student-card h3 { color: #f1f5f9; } html.dark .faculty-card p, html.dark .report-card p, html.dark .student-card p { color: #94a3b8; } html.dark .modal { background: rgba(0, 0, 0, 0.65); } html.dark .modal-content { background: #1e293b; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); border-color: #334155; } html.dark .modal-content h2, html.dark .modal-content h3 { color: #ffffff; } html.dark .form-group label { color: #cbd5e1; } html.dark .form-group input, html.dark .form-group select, html.dark .form-group textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .form-group input:focus, html.dark .form-group select:focus, html.dark .form-group textarea:focus { border-color: #9f6bff; } html.dark .btn-outline { background: transparent; border-color: #334155; color: #e2e8f0; } html.dark .btn-outline:hover { border-color: #9f6bff; color: #9f6bff; } html.dark .btn-primary { background: #9f6bff; color: #ffffff; } html.dark .btn-primary:hover { background: #8b5cf6; } html.dark .modal-actions { border-color: #334155; } /* ============================================================ STUDENT PANEL PAGES — dark overrides Covers: my_courses.html, profile_page.html, timetable.html ============================================================ */ html.dark .topbar { background: #0b1220; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html.dark .signout { background: transparent; border-color: rgba(239, 68, 68, 0.4); color: #f87171; } html.dark .signout:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; color: #ef4444; } html.dark .sidebar .brand h2 { color: #ffffff; } html.dark .sidebar .brand p { color: #94a3b8; } html.dark .sidebar .menu li { color: #cbd5e1; } html.dark .sidebar .menu li:hover, html.dark .sidebar .menu li.active { background: rgba(159, 107, 255, 0.15); color: #9f6bff; } html.dark .sidebar-user { border-color: rgba(255, 255, 255, 0.08); } html.dark .sidebar-user strong { color: #ffffff; } html.dark .sidebar-user span { color: #94a3b8; } html.dark .main>h1 { color: #ffffff; } html.dark .main>p { color: #94a3b8; } html.dark .course-card, html.dark .module-card, html.dark .module-item { background: #1e293b; border-color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } html.dark .course-card h3, html.dark .module-card h3, html.dark .module-item h3 { color: #f1f5f9; } html.dark .course-card p, html.dark .module-card p, html.dark .module-item p { color: #94a3b8; } html.dark .unlock-modal { background: rgba(0, 0, 0, 0.65); } html.dark .unlock-content { background: #1e293b; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); border-color: #334155; } html.dark .unlock-content h3 { color: #ffffff; } html.dark .unlock-content p { color: #94a3b8; } html.dark .unlock-content button { background: #9f6bff; border-color: #9f6bff; color: #ffffff; } html.dark .unlock-content button:hover { background: #8b5cf6; } html.dark .profile-card { background: #1e293b; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } html.dark .profile-banner { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); } html.dark .details h1 { color: #ffffff; } html.dark .details p { color: #94a3b8; } html.dark .details .badge { background: rgba(159, 107, 255, 0.2); color: #c4b5fd; } html.dark .details .meta span { color: #94a3b8; } html.dark .edit-btn { background: #334155; border-color: #475569; color: #e2e8f0; } html.dark .edit-btn:hover { background: #273548; border-color: #9f6bff; color: #9f6bff; } html.dark .content .card { background: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border-color: #334155; } html.dark .content .card h3 { color: #ffffff; border-color: #334155; } html.dark .info label { color: #64748b; } html.dark .info p { color: #e2e8f0; } html.dark .stat { background: #0f172a; border-color: #334155; } html.dark .stat small { color: #64748b; } html.dark .stat h2 { color: #ffffff; } html.dark .bar { background: #334155; } html.dark .progress-head span { color: #94a3b8; } html.dark .progress-head strong { color: #ffffff; } html.dark .scholarship { color: #94a3b8; } html.dark .scholarship .green { color: #34d399; } html.dark .transcript { background: transparent; border-color: #9f6bff; color: #9f6bff; } html.dark .transcript:hover { background: rgba(159, 107, 255, 0.12); } html.dark .modal { background: rgba(0, 0, 0, 0.65); } html.dark .modal-content { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } html.dark .modal-content h3 { color: #ffffff; border-color: #334155; } html.dark .modal-content label { color: #cbd5e1; } html.dark .modal-content input, html.dark .modal-content select, html.dark .modal-content textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; } html.dark .modal-content input:focus, html.dark .modal-content select:focus { border-color: #9f6bff; } html.dark .modal-actions { border-color: #334155; } html.dark .modal-actions button[type="button"] { background: transparent; border: 1px solid #334155; color: #e2e8f0; } html.dark .modal-actions button[type="button"]:hover { border-color: #9f6bff; color: #9f6bff; } html.dark .modal-actions button[type="submit"] { background: #9f6bff; color: #ffffff; } html.dark .modal-actions button[type="submit"]:hover { background: #8b5cf6; } html.dark .main>footer { color: #64748b; background: transparent; border-color: rgba(255, 255, 255, 0.06); }