/* ========================================================================== MasarPlus Enterprise Dark Mode Engine & System Stylesheet Architecture: Unified 3-Generation Token Bridge + 4-Tier Surface Elevation Trigger: [data-theme="dark"] on Scope: Entire Theme, Tutor LMS Framework, All Inner Templates & Modals ========================================================================== */ /* ========================================================================== 1. UNIFIED 3-GENERATION TOKEN BRIDGE ========================================================================== */ html[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; /* ------------------------------------------------------------------------- Generation 1: LandingBuilder Legacy Variables (frontend.css, homepage.css) ------------------------------------------------------------------------- */ --bg: #0B0F19; --surface: #111827; --ink: #F8FAFC; --ink-soft: #CBD5E1; --muted: #94A3B8; --muted-2: #64748B; --line: #1E293B; --ldb-line: #1E293B; --primary: #00A4B7; --primary-dark: #0099AD; --primary-mid: #00A4B7; --primary-light: #38BDF8; --accent: #FDE68A; --accent-dark: #F59E0B; --mint: #10B981; --mint-light: #064E3B; --gradient-1: linear-gradient(135deg, #00A4B7 0%, #008296 100%); --gradient-2: linear-gradient(135deg, #00A4B7 0%, #F59E0B 100%); --gradient-soft: linear-gradient(135deg, #0D1527 0%, #162032 100%); --shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7); --shadow-lg: 0 24px 60px -15px rgba(0, 0, 0, 0.85); /* ------------------------------------------------------------------------- Generation 2: TokenRegistry Variables (inc/Framework/UI/DesignSystem) ------------------------------------------------------------------------- */ --mp-color-background: #0B0F19; --mp-color-surface: #111827; --mp-color-text-main: #F8FAFC; --mp-color-text-muted: #94A3B8; --mp-color-border: #1E293B; --mp-color-primary: #00A4B7; --mp-color-primary-dark: #008296; --mp-color-secondary: #FDE68A; --mp-color-success: #10B981; --mp-color-danger: #EF4444; --mp-color-warning: #F59E0B; /* ------------------------------------------------------------------------- Generation 3: MasarPlus Modern Design Tokens (tokens.css) ------------------------------------------------------------------------- */ /* 4-Tier Surface Elevation */ --mp-bg-body: #0B0F19; /* Elevation 0: Canvas Base */ --mp-bg-light: #0B0F19; --mp-bg-hero: #0D1527; --mp-bg-dark: #060A12; --mp-surface-light: #111827; /* Elevation 1: Cards & Panels */ --mp-surface-dark: #162032; /* Elevation 2: Inner Containers */ --mp-surface-elevated: #24334A; /* Elevation 3: Modals & Popups */ /* High-Contrast Typography Hierarchy */ --mp-text-dark: #F8FAFC; /* Primary Headings (White 98%) */ --mp-text-body: #CBD5E1; /* High-Legibility Body (Slate 300) */ --mp-text-light: #94A3B8; /* Muted Metadata / Subtitles (Slate 400) */ /* Inverted Gray Scale */ --mp-gray-50: #0D1527; --mp-gray-100: #162032; --mp-gray-200: #1E293B; --mp-gray-300: #2E3D52; --mp-gray-400: #4B5E76; --mp-gray-500: #64748B; --mp-gray-600: #94A3B8; --mp-gray-700: #CBD5E1; --mp-gray-800: #E2E8F0; --mp-gray-900: #F8FAFC; /* Primary & Accent Scales for Dark Mode */ --mp-primary-50: #0A2533; --mp-primary-100: #0E384D; --mp-primary-200: #124F6D; --mp-primary-300: #00788C; --mp-primary-400: #00A4B7; --mp-primary-500: #00A4B7; --mp-primary-600: #0099AD; --mp-primary-700: #008296; --mp-primary-800: #006F80; --mp-primary-900: #041B26; --mp-accent-50: #2A240A; --mp-accent-100: #3D340E; --mp-accent-200: #574A12; --mp-accent-300: #FDE68A; --mp-accent-400: #FCD34D; --mp-accent-500: #F59E0B; /* Borders & Dividers */ --mp-border: #1E293B; --mp-border-light: #162032; /* Elevation Shadows */ --mp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6); --mp-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55); --mp-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.65); --mp-shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.75); --mp-shadow-2xl: 0 25px 60px rgba(0, 0, 0, 0.85); /* Brand Glow Shadows */ --mp-shadow-primary: 0 8px 24px -4px rgba(0, 164, 183, 0.35); --mp-shadow-glow: 0 0 20px 0 rgba(0, 164, 183, 0.25); --mp-shadow-focus: 0 0 0 3px rgba(0, 164, 183, 0.35); /* Semantic Highlights */ --mp-success-50: rgba(16, 185, 129, 0.12); --mp-warning-50: rgba(245, 158, 11, 0.12); --mp-danger-50: rgba(239, 68, 68, 0.12); --mp-info-50: rgba(56, 189, 248, 0.12); } /* ========================================================================== 2. GLOBAL HTML & BODY BASE ========================================================================== */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--mp-bg-body) !important; color: var(--mp-text-body) !important; } /* Base Typography Resets */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--mp-text-dark); } html[data-theme="dark"] p { color: var(--mp-text-body); } html[data-theme="dark"] a { color: var(--mp-primary-400); } html[data-theme="dark"] a:hover { color: var(--mp-primary-300); } html[data-theme="dark"] strong, html[data-theme="dark"] b { color: var(--mp-text-dark); } html[data-theme="dark"] small { color: var(--mp-text-light); } html[data-theme="dark"] code, html[data-theme="dark"] pre { background: var(--mp-gray-100); border-color: var(--mp-border); color: #38BDF8; } html[data-theme="dark"] hr { border-color: var(--mp-border); } /* ========================================================================== 3. HEADER, TOPBAR & NAVIGATION ========================================================================== */ html[data-theme="dark"] .mp-header, html[data-theme="dark"] header.ldb-header, html[data-theme="dark"] .mp-header.mp-backdrop-blur { background-color: rgba(11, 15, 25, 0.88) !important; border-bottom: 1px solid var(--mp-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } /* Top Bar Ticker */ html[data-theme="dark"] .mp-topbar-ticker { background: linear-gradient(90deg, #05080E 0%, #0A1220 50%, #05080E 100%) !important; border-bottom: 1px solid rgba(0, 164, 183, 0.2) !important; color: #E2E8F0 !important; } html[data-theme="dark"] .mp-topbar-ticker__badge-wrap { background: #05080E !important; } html[data-theme="dark"] .mp-topbar-ticker__badge { background: var(--mp-accent-300) !important; color: #0A1628 !important; } html[data-theme="dark"] .mp-topbar-ticker__text { color: #CBD5E1 !important; } html[data-theme="dark"] .mp-topbar-ticker__btn { background: rgba(255, 255, 255, 0.1) !important; color: var(--mp-accent-300) !important; border-color: rgba(253, 230, 138, 0.3) !important; } html[data-theme="dark"] .mp-topbar-ticker__btn:hover { background: var(--mp-accent-300) !important; color: #0A1628 !important; } /* Nav Menu Links */ html[data-theme="dark"] .mp-nav-menu a, html[data-theme="dark"] .nav-links a, html[data-theme="dark"] .mp-header a.mp-nav-link { color: var(--mp-gray-700) !important; } html[data-theme="dark"] .mp-nav-menu a:hover, html[data-theme="dark"] .nav-links a:hover, html[data-theme="dark"] .mp-header a.mp-nav-link:hover { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-nav-menu a.active, html[data-theme="dark"] .nav-links a.active { color: var(--mp-primary-400) !important; } /* User Dropdown & Modals */ html[data-theme="dark"] .mp-user-dropdown-menu, html[data-theme="dark"] .mp-dropdown-menu { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-xl) !important; } html[data-theme="dark"] .mp-dropdown-item { color: var(--mp-gray-700) !important; } html[data-theme="dark"] .mp-dropdown-item:hover { background: rgba(0, 164, 183, 0.12) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-dropdown-item.mp-color-danger { color: #EF4444 !important; } html[data-theme="dark"] .mp-dropdown-item.mp-color-danger:hover { background: rgba(239, 68, 68, 0.12) !important; color: #F87171 !important; } /* Mobile Nav Drawer */ html[data-theme="dark"] .mp-mobile-nav { background: var(--mp-surface-light) !important; border-left: 1px solid var(--mp-border) !important; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8) !important; } html[data-theme="dark"] .mp-mobile-nav a { color: var(--mp-gray-800) !important; border-bottom-color: var(--mp-border-light) !important; } html[data-theme="dark"] .mp-mobile-backdrop { background: rgba(0, 0, 0, 0.8) !important; } /* ========================================================================== 4. MARKETING & HOMEPAGE COMPONENTS ========================================================================== */ html[data-theme="dark"] .mp-hero, html[data-theme="dark"] .mp-home-hero { background: radial-gradient(ellipse at 50% 0%, rgba(0, 164, 183, 0.15) 0%, transparent 75%), linear-gradient(180deg, #0D1527 0%, #0B0F19 100%) !important; } html[data-theme="dark"] .mp-home-hero__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-home-hero__desc { color: var(--mp-text-body) !important; } /* Section Backgrounds */ html[data-theme="dark"] .mp-bg-gray-50, html[data-theme="dark"] .mp-home-testimonials, html[data-theme="dark"] .mp-home-paths, html[data-theme="dark"] section.ldb-section-bg { background: var(--mp-bg-body) !important; } /* Cards & Surfaces */ html[data-theme="dark"] .mp-card, html[data-theme="dark"] .ldb-card, html[data-theme="dark"] .mp-course-card, html[data-theme="dark"] .mp-category-card, html[data-theme="dark"] .mp-testimonial-card, html[data-theme="dark"] .mp-advantage-card, html[data-theme="dark"] .mp-path-card, html[data-theme="dark"] .mp-article-card, html[data-theme="dark"] .mp-home-stats__banner, html[data-theme="dark"] .mp-home-stats { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-md) !important; } html[data-theme="dark"] .mp-category-card:hover, html[data-theme="dark"] .mp-course-card:hover, html[data-theme="dark"] .mp-path-card:hover, html[data-theme="dark"] .mp-article-card:hover { border-color: var(--mp-primary-400) !important; box-shadow: var(--mp-shadow-xl), 0 0 20px rgba(0, 164, 183, 0.15) !important; transform: translateY(-4px); } /* Testimonial Component Details */ html[data-theme="dark"] .mp-testimonial-card__name { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-testimonial-card__role { color: var(--mp-text-light) !important; } html[data-theme="dark"] .mp-testimonial-card__quote { color: var(--mp-text-body) !important; } /* Stats Component */ html[data-theme="dark"] .mp-home-stats__number { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-home-stats__label { color: var(--mp-text-light) !important; } /* FAQ Accordions */ html[data-theme="dark"] .mp-faq-item { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-faq-item[open] { border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-faq-question { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-faq-answer { color: var(--mp-text-body) !important; } /* ========================================================================== 5. FOOTER ========================================================================== */ html[data-theme="dark"] .mp-footer, html[data-theme="dark"] footer.ldb-footer { background-color: #05080E !important; border-top: 1px solid var(--mp-border) !important; color: var(--mp-text-light) !important; } html[data-theme="dark"] .mp-footer__col-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-footer__about, html[data-theme="dark"] .mp-footer__link { color: var(--mp-text-light) !important; } html[data-theme="dark"] .mp-footer__link:hover { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-footer__social-link, html[data-theme="dark"] .mp-footer__back-to-top { background-color: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-gray-600) !important; } html[data-theme="dark"] .mp-footer__social-link:hover, html[data-theme="dark"] .mp-footer__back-to-top:hover { background-color: rgba(0, 164, 183, 0.15) !important; color: var(--mp-primary-400) !important; border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-footer__bottom { border-top-color: var(--mp-border-light) !important; color: var(--mp-gray-500) !important; } /* ========================================================================== 6. TUTOR LMS DASHBOARD (/dashboard) ========================================================================== */ html[data-theme="dark"] .mp-dashboard-wrapper, html[data-theme="dark"] .tutor-dashboard { background-color: var(--mp-bg-body) !important; } html[data-theme="dark"] .mp-dashboard-sidebar, html[data-theme="dark"] .tutor-dashboard-left-menu { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-dashboard-main, html[data-theme="dark"] .tutor-dashboard-content { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } /* Dashboard Nav Items */ html[data-theme="dark"] .mp-dashboard-nav__item, html[data-theme="dark"] .tutor-dashboard-menu-item a { color: var(--mp-gray-600) !important; } html[data-theme="dark"] .mp-dashboard-nav__item:hover, html[data-theme="dark"] .tutor-dashboard-menu-item a:hover { background: rgba(0, 164, 183, 0.1) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-dashboard-nav__item.active, html[data-theme="dark"] .tutor-dashboard-menu-item.active a { background: rgba(0, 164, 183, 0.18) !important; color: var(--mp-primary-400) !important; font-weight: 700; } /* Analytics Cards & Table Overrides */ html[data-theme="dark"] .tutor-analytics-wrapper .tutor-card, html[data-theme="dark"] .mp-dashboard-stat-card, html[data-theme="dark"] .tutor-card { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-sm) !important; } html[data-theme="dark"] .tutor-analytics-wrapper .tutor-table, html[data-theme="dark"] .tutor-table { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-analytics-wrapper .tutor-table thead th, html[data-theme="dark"] .tutor-table thead th { background: var(--mp-surface-dark) !important; color: var(--mp-text-dark) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-analytics-wrapper .tutor-table td, html[data-theme="dark"] .tutor-table tbody td { color: var(--mp-text-body) !important; border-bottom: 1px solid var(--mp-border-light) !important; background: transparent !important; } html[data-theme="dark"] .tutor-table tbody tr:hover td { background: rgba(0, 164, 183, 0.05) !important; } /* Dashboard Modals & Close Button */ html[data-theme="dark"] .tutor-modal-content, html[data-theme="dark"] .mp-modal-content { background: var(--mp-surface-elevated) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-2xl) !important; } html[data-theme="dark"] .mp-modal-close-btn { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-light) !important; } html[data-theme="dark"] .mp-modal-close-btn:hover { background: rgba(239, 68, 68, 0.2) !important; color: #EF4444 !important; border-color: rgba(239, 68, 68, 0.4) !important; } /* Avatar Wrappers */ html[data-theme="dark"] .mp-dashboard-avatar-wrap { border-color: rgba(0, 164, 183, 0.3) !important; background: rgba(0, 164, 183, 0.1) !important; } html[data-theme="dark"] .tutor-dashboard-inline-links a { color: var(--mp-gray-600) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .tutor-dashboard-inline-links a.is-active, html[data-theme="dark"] .tutor-dashboard-inline-links a:hover { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; border-color: var(--mp-primary-400) !important; } /* ========================================================================== 7. SINGLE COURSE PAGE (/courses/...) ========================================================================== */ html[data-theme="dark"] .mp-course-hero { background: linear-gradient(135deg, #0A1220 0%, #111827 100%) !important; } html[data-theme="dark"] .mp-course-hero__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-course-sidebar-card, html[data-theme="dark"] .mp-course-sidebar, html[data-theme="dark"] .tutor-course-entry-box { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-lg) !important; } html[data-theme="dark"] .mp-course-tab-header, html[data-theme="dark"] .mp-tabs-header { background: var(--mp-surface-dark) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-tab-btn { color: var(--mp-gray-600) !important; } html[data-theme="dark"] .mp-tab-btn:hover { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-tab-btn.active { background: var(--mp-surface-light) !important; color: var(--mp-primary-400) !important; border-bottom: 2px solid var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-course-tab-content { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } /* Curriculum Accordion on Single Course */ html[data-theme="dark"] .mp-curriculum-topic, html[data-theme="dark"] .tutor-course-topic { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-course-topic-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-course-lesson { color: var(--mp-text-body) !important; border-bottom-color: var(--mp-border-light) !important; } html[data-theme="dark"] .tutor-course-lesson:hover { background: rgba(0, 164, 183, 0.08) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .tutor-course-lesson.is-completed { color: var(--mp-gray-600) !important; } /* Reviews & Rating bars */ html[data-theme="dark"] .mp-rating-bar__track, html[data-theme="dark"] .tutor-rating-bar-track { background: var(--mp-gray-200) !important; } html[data-theme="dark"] .mp-instructor-card, html[data-theme="dark"] .tutor-instructor-card { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } /* ========================================================================== 8. LEARNING EXPERIENCE & LESSON VIEWER (/lessons/... & quizzes) ========================================================================== */ html[data-theme="dark"] .mp-learning-page, html[data-theme="dark"] .tutor-single-page-top-bar, html[data-theme="dark"] .mp-classroom-header { background: var(--mp-surface-light) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-classroom-course-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-classroom-lesson-current { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-classroom-back-btn, html[data-theme="dark"] .mp-classroom-btn-icon { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-body) !important; } html[data-theme="dark"] .mp-classroom-back-btn:hover, html[data-theme="dark"] .mp-classroom-btn-icon:hover { background: rgba(0, 164, 183, 0.15) !important; border-color: var(--mp-primary-400) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-classroom-progress-pill { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } /* Classroom Sidebar */ html[data-theme="dark"] .tutor-course-single-sidebar-wrapper { background: var(--mp-surface-light) !important; border-left: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-course-single-sidebar-title { background: var(--mp-surface-dark) !important; color: var(--mp-text-dark) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-accordion-item-header { background: var(--mp-surface-dark) !important; color: var(--mp-text-dark) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-accordion-item-header:hover { background: var(--mp-gray-200) !important; } html[data-theme="dark"] .tutor-accordion-item-header.is-active { background: var(--mp-gray-200) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .tutor-course-topic-summary { background: var(--mp-gray-100) !important; color: var(--mp-gray-600) !important; } html[data-theme="dark"] .tutor-course-lesson.active { background: rgba(0, 164, 183, 0.18) !important; color: var(--mp-primary-400) !important; border-inline-start: 3px solid var(--mp-primary-400) !important; } /* Spotlight Navigation & Tabs */ html[data-theme="dark"] .tutor-course-spotlight-nav { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-course-spotlight-nav .tutor-nav-item { color: var(--mp-gray-600) !important; } html[data-theme="dark"] .tutor-course-spotlight-nav .tutor-nav-item.is-active { background: var(--mp-surface-light) !important; color: var(--mp-primary-400) !important; font-weight: 700; } html[data-theme="dark"] .tutor-course-spotlight-tab { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-body) !important; } html[data-theme="dark"] .tutor-course-spotlight-tab h4 { color: var(--mp-text-dark) !important; } /* Attachments & Q&A */ html[data-theme="dark"] .tutor-attachment-item, html[data-theme="dark"] .tutor-q-and-a-item { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-attachment-item:hover, html[data-theme="dark"] .tutor-q-and-a-item:hover { border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .tutor-attachment-name, html[data-theme="dark"] .tutor-q-and-a-author-name { color: var(--mp-text-dark) !important; } /* Next / Prev Navigation Buttons */ html[data-theme="dark"] .mp-nav-btn { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-nav-btn:hover { background: var(--mp-surface-light) !important; border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-nav-btn__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-nav-btn__sub { color: var(--mp-text-light) !important; } html[data-theme="dark"] .mp-nav-btn__icon { background: var(--mp-gray-100) !important; color: var(--mp-primary-400) !important; } /* Quiz Experience */ html[data-theme="dark"] .tutor-quiz-wrap, html[data-theme="dark"] .tutor-quiz-body, html[data-theme="dark"] .tutor-quiz-top { background: var(--mp-surface-light) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .tutor-quiz-question-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-quiz-answer-single, html[data-theme="dark"] .tutor-quiz-answer { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-body) !important; } html[data-theme="dark"] .tutor-quiz-answer-single:hover, html[data-theme="dark"] .tutor-quiz-answer:hover { background: var(--mp-gray-200) !important; border-color: var(--mp-primary-400) !important; } /* ========================================================================== 9. AUTH PAGES & MODALS (/login, /student-registration, wp-login) ========================================================================== */ html[data-theme="dark"] .mp-auth-wrapper, html[data-theme="dark"] .mp-auth-page { background: var(--mp-bg-body) !important; } html[data-theme="dark"] .mp-login-form-panel, html[data-theme="dark"] .mp-student-reg-form-panel, html[data-theme="dark"] .mp-auth-card { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-2xl) !important; } html[data-theme="dark"] .tutor-modal-content-white { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-modal #tutor-login-modal-title, html[data-theme="dark"] .mp-login-title, html[data-theme="dark"] .mp-student-reg-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-modal.tutor-login-modal .tutor-form-label, html[data-theme="dark"] .mp-form-label, html[data-theme="dark"] body.login label { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-modal-close-o { background: var(--mp-surface-dark) !important; color: var(--mp-text-light) !important; } html[data-theme="dark"] .tutor-modal-close-o:hover { background: rgba(239, 68, 68, 0.2) !important; color: #EF4444 !important; } /* WordPress Native Login Box */ html[data-theme="dark"] body.login #lostpasswordform, html[data-theme="dark"] body.login #loginform { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-xl) !important; } html[data-theme="dark"] body.login .mp-login-logo-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] body.login .mp-login-logo-sub { color: var(--mp-text-light) !important; } /* ========================================================================== 10. JOIN AS TRAINER (/join-as-trainer) ========================================================================== */ html[data-theme="dark"] .mp-trainer-counter-card, html[data-theme="dark"] .mp-trainer-feature-card, html[data-theme="dark"] .mp-trainer-step-card, html[data-theme="dark"] .mp-trainer-faq-item, html[data-theme="dark"] .mp-instructor-app-wrapper { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-trainer-counter-val, html[data-theme="dark"] .mp-trainer-feature-title, html[data-theme="dark"] .mp-trainer-step-title, html[data-theme="dark"] .mp-trainer-faq-summary { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-trainer-counter-lbl, html[data-theme="dark"] .mp-trainer-feature-desc, html[data-theme="dark"] .mp-trainer-step-desc, html[data-theme="dark"] .mp-trainer-faq-answer { color: var(--mp-text-body) !important; } html[data-theme="dark"] .mp-cat-checkbox-card { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-cat-checkbox-card:hover, html[data-theme="dark"] .mp-cat-checkbox-card:has(input[type="checkbox"]:checked) { border-color: var(--mp-primary-400) !important; background: rgba(0, 164, 183, 0.1) !important; } /* ========================================================================== 11. PRICING, CART & CHECKOUT ========================================================================== */ html[data-theme="dark"] .mp-pricing-card, html[data-theme="dark"] .mp-checkout-card, html[data-theme="dark"] .mp-invoice-card { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-md) !important; } html[data-theme="dark"] .mp-pricing-card--popular { border-color: var(--mp-primary-400) !important; box-shadow: var(--mp-shadow-primary) !important; } html[data-theme="dark"] .mp-pricing-card__title, html[data-theme="dark"] .mp-pricing-card__price { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-pricing-card__feature { color: var(--mp-text-body) !important; } /* ========================================================================== 12. AI CHAT COMPONENT ========================================================================== */ html[data-theme="dark"] .mp-ai-chat-panel { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-2xl) !important; } html[data-theme="dark"] .mp-ai-chat-header { background: var(--mp-surface-dark) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-ai-chat-body { background: var(--mp-bg-body) !important; } html[data-theme="dark"] .mp-ai-message--bot .mp-ai-bubble { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-body) !important; } html[data-theme="dark"] .mp-ai-chat-form { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-ai-chat-form:focus-within { border-color: var(--mp-primary-400) !important; box-shadow: var(--mp-shadow-focus) !important; } html[data-theme="dark"] .mp-ai-chat-input { color: var(--mp-text-dark) !important; background: transparent !important; } /* ========================================================================== 13. FORMS, INPUTS & CONTROLS ========================================================================== */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .mp-input, html[data-theme="dark"] .mp-form-control, html[data-theme="dark"] .tutor-form-control, html[data-theme="dark"] body.login .input { background-color: var(--mp-surface-dark) !important; border: 1.5px solid var(--mp-border) !important; color: var(--mp-text-dark) !important; box-shadow: none !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] .mp-form-control:focus { border-color: var(--mp-primary-400) !important; background-color: var(--mp-surface-light) !important; box-shadow: var(--mp-shadow-focus) !important; outline: none !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--mp-gray-500) !important; } /* Checkboxes & Radios */ html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: var(--mp-primary-500); } /* ========================================================================== 14. BUTTONS & BADGES ========================================================================== */ html[data-theme="dark"] .mp-btn--outline, html[data-theme="dark"] .tutor-btn-outline-primary { border-color: var(--mp-gray-300) !important; color: var(--mp-gray-800) !important; background: transparent !important; } html[data-theme="dark"] .mp-btn--outline:hover, html[data-theme="dark"] .tutor-btn-outline-primary:hover { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .tutor-btn-ghost { color: var(--mp-gray-600) !important; } html[data-theme="dark"] .tutor-btn-ghost:hover { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; } /* Status Badges */ html[data-theme="dark"] .mp-badge--success, html[data-theme="dark"] .tutor-badge-success { background: rgba(16, 185, 129, 0.15) !important; color: #34D399 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; } html[data-theme="dark"] .mp-badge--warning, html[data-theme="dark"] .tutor-badge-warning { background: rgba(245, 158, 11, 0.15) !important; color: #FBBF24 !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; } html[data-theme="dark"] .mp-badge--danger, html[data-theme="dark"] .tutor-badge-danger { background: rgba(239, 68, 68, 0.15) !important; color: #F87171 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } /* ========================================================================== 15. DARK MODE TOGGLE BUTTON ========================================================================== */ .mp-dark-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--mp-radius-full, 9999px); border: 1.5px solid var(--mp-gray-200); background: transparent; color: var(--mp-gray-600); cursor: pointer; transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; user-select: none; } .mp-dark-toggle:hover { background: var(--mp-gray-100); border-color: var(--mp-primary-400); color: var(--mp-primary-500); transform: scale(1.08) rotate(12deg); } .mp-dark-toggle .mp-dark-toggle__icon { font-size: 19px; line-height: 1; display: inline-block; } /* State switching: Sun in dark mode, Moon in light mode */ .mp-dark-toggle__sun { display: none; } .mp-dark-toggle__moon { display: inline-block; } html[data-theme="dark"] .mp-dark-toggle__sun { display: inline-block; } html[data-theme="dark"] .mp-dark-toggle__moon { display: none; } html[data-theme="dark"] .mp-dark-toggle { border-color: var(--mp-border); color: var(--mp-gray-600); } html[data-theme="dark"] .mp-dark-toggle:hover { background: var(--mp-surface-dark); color: var(--mp-accent-300); border-color: var(--mp-accent-300); transform: scale(1.08) rotate(-12deg); } /* ========================================================================== 16. SCROLLBAR SYSTEM ========================================================================== */ html[data-theme="dark"] { scrollbar-color: var(--mp-gray-300) var(--mp-bg-body); } html[data-theme="dark"] ::-webkit-scrollbar { width: 9px; height: 9px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--mp-bg-body); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--mp-gray-300); border-radius: 9999px; border: 2px solid var(--mp-bg-body); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--mp-gray-400); } /* ========================================================================== 17. TRANSITIONS & NO-FLICKER GUARDS ========================================================================== */ html[data-theme="dark"] body, html[data-theme="dark"] .mp-card, html[data-theme="dark"] .mp-header, html[data-theme="dark"] .mp-footer, html[data-theme="dark"] .tutor-dashboard-content, html[data-theme="dark"] .tutor-dashboard-left-menu { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } /* Never animate heavy transforms or canvases during theme switch */ .reveal, .mp-home-stats__number, video, img, canvas, iframe { transition-property: opacity, transform !important; } /* ========================================================================== 18. SINGLE COURSE PAGE & ENROLLMENT ========================================================================== */ /* Premium Hero Section */ html[data-theme="dark"] .mp-hero-premium { background: linear-gradient(135deg, #07131F 0%, #0C1E2D 100%) !important; border-bottom: 1px solid var(--mp-border); } html[data-theme="dark"] .mp-hero-premium__bg-glow { background: radial-gradient(circle, rgba(0, 164, 183, 0.25) 0%, rgba(11, 15, 25, 0) 70%) !important; opacity: 0.6; } html[data-theme="dark"] .mp-hero-badge--category { background: var(--mp-surface-dark) !important; border-color: var(--mp-border) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-hero-badge--category:hover { background: rgba(0, 164, 183, 0.15) !important; border-color: var(--mp-primary-400) !important; color: var(--mp-primary-300) !important; } html[data-theme="dark"] .mp-hero-badge--rating { background: rgba(245, 158, 11, 0.15) !important; border-color: rgba(245, 158, 11, 0.3) !important; color: #FCD34D !important; } html[data-theme="dark"] .mp-hero-badge--rating .rating-count { color: #FDE68A !important; } html[data-theme="dark"] .mp-hero-actions .mp-btn-action, html[data-theme="dark"] .mp-hero-action-btn { background: var(--mp-surface-dark) !important; border-color: var(--mp-border) !important; color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-hero-actions .mp-btn-action:hover, html[data-theme="dark"] .mp-hero-action-btn:hover { background: var(--mp-surface-elevated) !important; color: var(--mp-primary-400) !important; border-color: var(--mp-primary-400) !important; } /* Sticky Course Navigation Tabs */ html[data-theme="dark"] .mp-premium-tabs-wrapper { background: rgba(11, 15, 25, 0.9) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 1px solid var(--mp-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .mp-premium-nav-link { color: var(--mp-gray-400) !important; } html[data-theme="dark"] .mp-premium-nav-link:hover { color: var(--mp-text-dark) !important; background: var(--mp-surface-dark) !important; } html[data-theme="dark"] .mp-premium-nav-link.is-active { color: var(--mp-primary-400) !important; background: rgba(0, 164, 183, 0.14) !important; } html[data-theme="dark"] .mp-premium-nav-indicator { background-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-premium-tab-container { background: var(--mp-surface-light) !important; box-shadow: 0 0 0 1px var(--mp-border) !important; } /* Course Details Typography & Widgets */ html[data-theme="dark"] .tutor-course-details-content { color: var(--mp-text-body) !important; } html[data-theme="dark"] .tutor-course-details-content h1, html[data-theme="dark"] .tutor-course-details-content h2, html[data-theme="dark"] .tutor-course-details-content h3 { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-course-details-widget { background: var(--mp-surface-dark) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .tutor-course-details-widget-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-course-details-widget-list li { color: var(--mp-text-body) !important; } html[data-theme="dark"] .tutor-course-details-widget-list li::before { background: rgba(0, 164, 183, 0.15) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-course-section-cards { border-block-start-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-section-heading { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-card-item { background: var(--mp-surface-dark) !important; border-color: var(--mp-border) !important; color: var(--mp-text-body) !important; } /* Curriculum Accordion */ html[data-theme="dark"] .mp-curriculum__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-curriculum__header { border-bottom-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-curriculum__item { background: var(--mp-surface-light) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-curriculum__item:hover { border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-curriculum__item-header { background: transparent !important; } html[data-theme="dark"] .mp-curriculum__item-header:hover, html[data-theme="dark"] .mp-curriculum__item-header.is-active { background: var(--mp-surface-dark) !important; border-bottom-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-curriculum__topic-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-curriculum__lesson { border-bottom-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-curriculum__lesson:hover { background: var(--mp-surface-dark) !important; } html[data-theme="dark"] .mp-curriculum__lesson-title, html[data-theme="dark"] .mp-curriculum__lesson-link { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-curriculum__lesson-link:hover { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-curriculum__lesson-icon-wrapper { background: rgba(0, 164, 183, 0.12) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-curriculum__lesson-duration { background: var(--mp-surface-dark) !important; color: var(--mp-gray-400) !important; } html[data-theme="dark"] .mp-badge--expired { background: var(--mp-surface-dark) !important; color: var(--mp-gray-400) !important; } /* Sidebar & Pricing / Tutor Subscription Plans */ html[data-theme="dark"] .mp-premium-sidebar { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-xl) !important; } html[data-theme="dark"] .mp-premium-price__value { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-single-course-sidebar .tutor-card-body:has(.tutor-subscription-plans) { background-color: transparent !important; } html[data-theme="dark"] .tutor-subscription-plans .tutor-color-primary { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-subscription-plans .tutor-course-subscription-options { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; border-radius: var(--mp-radius-lg) !important; } html[data-theme="dark"] .tutor-subscription-plans .tutor-course-subscription-options > label:not(:first-child) { border-top: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-subscription-plans label { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-subscription-plans .tutor-color-black { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-subscription-plans .tutor-color-hints, html[data-theme="dark"] .tutor-subscription-plans .tutor-color-subdued { color: var(--mp-gray-400) !important; } html[data-theme="dark"] .tutor-subscription-plans .tutor-course-subscription-plan { background: var(--mp-surface-light) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .tutor-subscription-plans .tutor-course-subscription-plan .tutor-subscription-price { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-premium-sidebar__meta { background: var(--mp-surface-dark) !important; border-top: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-premium-sidebar__meta-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-premium-meta-icon { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-premium-meta-item { color: var(--mp-text-body) !important; } html[data-theme="dark"] .mp-premium-meta-value { color: var(--mp-text-body) !important; } html[data-theme="dark"] .mp-premium-progress { background: var(--mp-surface-dark) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-premium-progress__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-premium-progress__steps { color: var(--mp-gray-400) !important; } html[data-theme="dark"] .mp-premium-progress__track { background: var(--mp-surface-light) !important; } html[data-theme="dark"] .mp-premium-enrolled-date { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.25) !important; } html[data-theme="dark"] .mp-premium-enrolled-date__label { color: #34D399 !important; } html[data-theme="dark"] .mp-premium-enrolled-date__value { color: #A7F3D0 !important; } /* Instructor Section */ html[data-theme="dark"] .mp-instructors { border-block-start-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-instructors__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-instructor-card { background: var(--mp-surface-light) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-instructor-card:hover { border-color: var(--mp-primary-400) !important; box-shadow: 0 20px 35px -10px rgba(0, 164, 183, 0.2) !important; } html[data-theme="dark"] .mp-instructor-card__name, html[data-theme="dark"] .mp-instructor-card__name a { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-instructor-card__name a:hover { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-instructor-card__bio { color: var(--mp-gray-400) !important; } html[data-theme="dark"] .mp-instructor-card__avatar { border-color: var(--mp-border) !important; } /* Reviews Component */ html[data-theme="dark"] .mp-reviews__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-reviews__summary, html[data-theme="dark"] .mp-review-card { background: var(--mp-surface-light) !important; border-color: var(--mp-border) !important; box-shadow: var(--mp-shadow-sm) !important; } html[data-theme="dark"] .mp-reviews__average-box { border-right-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-reviews__average-score { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-reviews__average-total { color: var(--mp-gray-400) !important; } html[data-theme="dark"] .mp-progress-bar { background: var(--mp-surface-dark) !important; } html[data-theme="dark"] .mp-review-card__author, html[data-theme="dark"] .mp-review-card__author a { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-review-card__comment { color: var(--mp-text-body) !important; } /* Gift Course Modal */ html[data-theme="dark"] .mp-gift-modal-card { background: #162032 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .mp-gift-modal-card h3 { color: #f8fafc !important; } html[data-theme="dark"] .mp-gift-modal-card p { color: #94a3b8 !important; } html[data-theme="dark"] .mp-gift-modal-card .mp-form-label { color: #e2e8f0 !important; } html[data-theme="dark"] .mp-gift-modal-card .mp-form-control { background: #0f172a !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .mp-gift-modal-card #mp-close-gift-modal .material-icons { color: #94a3b8 !important; } html[data-theme="dark"] .mp-gift-modal-card #mp-close-gift-modal:hover .material-icons { color: #f8fafc !important; } /* ========================================================================== 19. CHECKOUT PAGE (SaaS & Tutor LMS) ========================================================================== */ html[data-theme="dark"] .mp-checkout-page, html[data-theme="dark"] .mp-checkout-wrap, html[data-theme="dark"] .tutor-checkout-page { background-color: transparent !important; } /* Checkout Hero Top Card */ html[data-theme="dark"] .mp-checkout-wrap .mp-checkout-hero-inner, html[data-theme="dark"] .mp-checkout-hero, html[data-theme="dark"] .mp-checkout-hero-inner { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-md) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-checkout-hero-title, html[data-theme="dark"] .mp-checkout-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-checkout-hero-sub, html[data-theme="dark"] .mp-checkout-subtitle { color: var(--mp-gray-300) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-security-badge, html[data-theme="dark"] .mp-security-badge { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-gray-300) !important; } /* Checkout Cards */ html[data-theme="dark"] .mp-checkout-wrap .mp-checkout-card, html[data-theme="dark"] .mp-checkout-card, html[data-theme="dark"] .mp-checkout-summary-card { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; box-shadow: var(--mp-shadow-md) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-checkout-card__title, html[data-theme="dark"] .mp-checkout-card__title { color: var(--mp-text-dark) !important; border-bottom: 1px solid var(--mp-border) !important; } /* Form Controls & Labels */ html[data-theme="dark"] .mp-checkout-wrap .tutor-form-label, html[data-theme="dark"] .mp-label, html[data-theme="dark"] .tutor-form-label { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-checkout-wrap .tutor-form-control, html[data-theme="dark"] .mp-checkout-wrap input[type="text"], html[data-theme="dark"] .mp-checkout-wrap input[type="email"], html[data-theme="dark"] .mp-checkout-wrap input[type="tel"], html[data-theme="dark"] .mp-checkout-wrap select, html[data-theme="dark"] .mp-input, html[data-theme="dark"] .tutor-form-control, html[data-theme="dark"] .tutor-checkout-page input[type="text"], html[data-theme="dark"] .tutor-checkout-page input[type="email"], html[data-theme="dark"] .tutor-checkout-page input[type="tel"], html[data-theme="dark"] .tutor-checkout-page select, html[data-theme="dark"] #tutor-checkout-form input[type="text"], html[data-theme="dark"] #tutor-checkout-form input[type="email"], html[data-theme="dark"] #tutor-checkout-form input[type="tel"], html[data-theme="dark"] #tutor-checkout-form select { background-color: var(--mp-surface-dark) !important; border: 1.5px solid var(--mp-border) !important; color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-checkout-wrap .tutor-form-control:focus, html[data-theme="dark"] .mp-checkout-wrap input:focus, html[data-theme="dark"] .mp-checkout-wrap select:focus, html[data-theme="dark"] .mp-input:focus, html[data-theme="dark"] .tutor-form-control:focus, html[data-theme="dark"] .tutor-checkout-page input:focus, html[data-theme="dark"] #tutor-checkout-form input:focus { border-color: var(--mp-primary-400) !important; background-color: var(--mp-surface-light) !important; box-shadow: var(--mp-shadow-focus) !important; } /* Payment Method Cards (Stripe, etc.) */ html[data-theme="dark"] .mp-checkout-wrap .tutor-checkout-payment-item, html[data-theme="dark"] .tutor-checkout-payment-item { background: var(--mp-surface-dark) !important; border: 2px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-checkout-wrap .tutor-checkout-payment-item:hover, html[data-theme="dark"] .tutor-checkout-payment-item:hover { border-color: var(--mp-primary-400) !important; background: var(--mp-surface-light) !important; } html[data-theme="dark"] .mp-checkout-wrap .tutor-checkout-payment-item.is-selected, html[data-theme="dark"] .mp-checkout-wrap .tutor-checkout-payment-item:has(input:checked), html[data-theme="dark"] .tutor-checkout-payment-item.is-selected, html[data-theme="dark"] .tutor-checkout-payment-item:has(input:checked) { border-color: var(--mp-primary-400) !important; background: rgba(0, 164, 183, 0.15) !important; box-shadow: 0 4px 16px rgba(0, 164, 183, 0.25) !important; } html[data-theme="dark"] .mp-checkout-wrap .tutor-payment-item-content, html[data-theme="dark"] .tutor-payment-item-content { color: var(--mp-text-dark) !important; } /* Order Summary Box */ html[data-theme="dark"] .mp-checkout-wrap .mp-summary-course-item, html[data-theme="dark"] .mp-summary-course-item { border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-summary-course-title, html[data-theme="dark"] .mp-checkout-wrap .mp-summary-course-title a, html[data-theme="dark"] .mp-summary-course-title, html[data-theme="dark"] .mp-summary-course-title a { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-summary-row, html[data-theme="dark"] .mp-summary-row { color: var(--mp-gray-300) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-summary-row--total, html[data-theme="dark"] .mp-summary-row--total { color: var(--mp-text-dark) !important; border-top: 2px dashed var(--mp-border) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-summary-total-val, html[data-theme="dark"] .mp-summary-total-val { color: var(--mp-primary-400) !important; } /* Coupon Box */ html[data-theme="dark"] .mp-checkout-wrap .mp-coupon-box, html[data-theme="dark"] .mp-coupon-box { background: var(--mp-surface-dark) !important; border: 1px dashed var(--mp-border) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-coupon-box span, html[data-theme="dark"] .mp-coupon-box span { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-coupon-box input, html[data-theme="dark"] .mp-coupon-box input.mp-input { background-color: var(--mp-bg-body) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-checkout-wrap .mp-coupon-box input::placeholder, html[data-theme="dark"] .mp-coupon-box input.mp-input::placeholder { color: var(--mp-gray-500) !important; } /* Assurance Seal (ضمان أمان الشراء) */ html[data-theme="dark"] .mp-checkout-guarantee, html[data-theme="dark"] .mp-checkout-wrap div:has(> .tutor-icon-verified), html[data-theme="dark"] .mp-checkout-summary-card div[style*="var(--mp-primary-50)"], html[data-theme="dark"] .mp-checkout-summary-card div:has(> .tutor-icon-verified) { background: rgba(0, 164, 183, 0.08) !important; border: 1px solid rgba(0, 164, 183, 0.25) !important; } html[data-theme="dark"] .mp-checkout-guarantee .mp-fw-bold, html[data-theme="dark"] .mp-checkout-summary-card .mp-color-dark { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-checkout-guarantee div, html[data-theme="dark"] .mp-checkout-summary-card .mp-text-muted { color: var(--mp-gray-300) !important; } /* Guest Login Notice */ html[data-theme="dark"] .mp-checkout-wrap .mp-checkout-login-notice { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; } /* Terms and Privacy Checkbox */ html[data-theme="dark"] .mp-checkout-wrap label:has(input[type="checkbox"]), html[data-theme="dark"] .tutor-checkout-page label:has(input[type="checkbox"]) { color: var(--mp-gray-300) !important; } html[data-theme="dark"] .mp-checkout-wrap label:has(input[type="checkbox"]) a, html[data-theme="dark"] .tutor-checkout-page label:has(input[type="checkbox"]) a { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-checkout-wrap input[type="checkbox"] { accent-color: var(--mp-primary-500) !important; } /* ========================================================================== 20. LESSON & CLASSROOM PAGE (LEARNING EXPERIENCE) ========================================================================== */ html[data-theme="dark"] body.single-tutor_lesson, html[data-theme="dark"] body.single-tutor_quiz, html[data-theme="dark"] body.single-tutor_assignments, html[data-theme="dark"] body.single-lesson { background-color: var(--mp-bg-body) !important; color: var(--mp-text-body) !important; } html[data-theme="dark"] .tutor-course-single-content-wrapper { background: var(--mp-bg-body) !important; } html[data-theme="dark"] #tutor-single-entry-content, html[data-theme="dark"] .tutor-quiz-single-entry-wrap { background: var(--mp-bg-body) !important; } /* Classroom Top Bar */ html[data-theme="dark"] .mp-classroom-header, html[data-theme="dark"] .tutor-course-topic-single-header.tutor-single-page-top-bar { background: var(--mp-surface-light) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-classroom-course-title, html[data-theme="dark"] .tutor-course-topic-single-header-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-classroom-lesson-current { color: var(--mp-gray-400) !important; } html[data-theme="dark"] .mp-classroom-progress-pill { background: var(--mp-surface-dark) !important; border-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-progress-stats { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-progress-label { color: var(--mp-gray-400) !important; } /* Curriculum Sidebar */ html[data-theme="dark"] .tutor-course-single-sidebar-wrapper { background: var(--mp-surface-light) !important; border-inline-end: 1px solid var(--mp-border) !important; box-shadow: none !important; } html[data-theme="dark"] .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-track { background: var(--mp-bg-body) !important; } html[data-theme="dark"] .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-thumb { background: var(--mp-gray-300) !important; } html[data-theme="dark"] .tutor-course-single-sidebar-title { background: var(--mp-surface-light) !important; border-bottom: 1px solid var(--mp-border) !important; color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-course-topic { background: var(--mp-surface-light) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-accordion-item-header { background: var(--mp-surface-dark) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-accordion-item-header:hover { background: var(--mp-surface-elevated) !important; } html[data-theme="dark"] .tutor-accordion-item-header.is-active { background: rgba(0, 164, 183, 0.12) !important; border-bottom-color: var(--mp-border) !important; } html[data-theme="dark"] .tutor-course-topic-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-accordion-item-header.is-active .tutor-course-topic-title { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .tutor-course-topic-summary { background: var(--mp-surface-elevated) !important; color: var(--mp-gray-400) !important; } html[data-theme="dark"] .tutor-accordion-item-header.is-active .tutor-course-topic-summary { background: rgba(0, 164, 183, 0.25) !important; color: var(--mp-primary-300) !important; } html[data-theme="dark"] .tutor-course-lesson { border-bottom: 1px solid var(--mp-border) !important; color: var(--mp-gray-400) !important; background: transparent !important; } html[data-theme="dark"] .tutor-course-lesson:hover { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .tutor-course-lesson.is-active, html[data-theme="dark"] .tutor-course-lesson.active { background: rgba(0, 164, 183, 0.15) !important; border-inline-start: 4px solid var(--mp-primary-400) !important; color: var(--mp-primary-300) !important; } html[data-theme="dark"] .tutor-course-lesson.is-completed { color: var(--mp-gray-300) !important; } /* Spotlight Navigation & Tab Card */ html[data-theme="dark"] .tutor-course-spotlight-nav { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-course-spotlight-nav .tutor-nav-link { color: var(--mp-gray-400) !important; } html[data-theme="dark"] .tutor-course-spotlight-nav .tutor-nav-link:hover { color: var(--mp-text-dark) !important; background: rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] .tutor-course-spotlight-nav .tutor-nav-link.is-active { background: var(--mp-surface-light) !important; color: var(--mp-primary-400) !important; box-shadow: var(--mp-shadow-md) !important; } html[data-theme="dark"] .tutor-course-spotlight-tab { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-body) !important; box-shadow: var(--mp-shadow-md) !important; } html[data-theme="dark"] .tutor-course-spotlight-tab h1, html[data-theme="dark"] .tutor-course-spotlight-tab h2, html[data-theme="dark"] .tutor-course-spotlight-tab h3, html[data-theme="dark"] .tutor-course-spotlight-tab h4 { color: var(--mp-text-dark) !important; } /* Attachments */ html[data-theme="dark"] .tutor-attachment-item { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-attachment-item:hover { background: var(--mp-surface-elevated) !important; border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .tutor-attachment-name { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .tutor-attachment-size { color: var(--mp-gray-400) !important; } /* Q&A & Discussion */ html[data-theme="dark"] .tutor-q-and-a-item { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .tutor-q-and-a-item:hover { background: var(--mp-surface-elevated) !important; border-color: var(--mp-gray-400) !important; } html[data-theme="dark"] .tutor-q-and-a-author-name { color: var(--mp-text-dark) !important; } /* Next / Previous Navigation Buttons */ html[data-theme="dark"] .mp-classroom-footer__inner { border-top: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-nav-btn { background: var(--mp-surface-light) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-dark) !important; box-shadow: var(--mp-shadow-sm) !important; } html[data-theme="dark"] .mp-nav-btn:hover { background: var(--mp-surface-dark) !important; border-color: var(--mp-primary-400) !important; box-shadow: var(--mp-shadow-glow) !important; } html[data-theme="dark"] .mp-nav-btn__icon { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-nav-btn:hover .mp-nav-btn__icon { background: var(--mp-primary-500) !important; color: #ffffff !important; } html[data-theme="dark"] .mp-nav-btn__title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-nav-btn:hover .mp-nav-btn__title { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-nav-btn__sub { color: var(--mp-gray-400) !important; } /* Notes Drawer */ html[data-theme="dark"] .mp-notes-drawer { background: var(--mp-surface-light) !important; border-inline-end: 1px solid var(--mp-border) !important; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .mp-notes-drawer-header { background: var(--mp-surface-dark) !important; border-bottom: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-note-item { background: var(--mp-surface-dark) !important; border: 1px solid var(--mp-border) !important; color: var(--mp-text-body) !important; } /* ========================================================================== 21. MEMBERSHIP & PRICING (/membership-pricing/ & Subscription Addon) ========================================================================== */ html[data-theme="dark"] .mp-pricing-page, html[data-theme="dark"] .tutor-membership-pricing-page { background-color: var(--mp-bg-body) !important; } /* Header */ html[data-theme="dark"] .mp-pricing-header h1, html[data-theme="dark"] .tutor-membership-pricing-header h1 { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-pricing-header p, html[data-theme="dark"] .tutor-membership-pricing-header p { color: var(--mp-gray-300) !important; } html[data-theme="dark"] .mp-pricing-header .mp-section-tag { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; border-color: var(--mp-border) !important; } /* Active Membership Banner */ html[data-theme="dark"] .mp-pricing-active-banner { background: #162032 !important; border-color: rgba(0, 146, 166, 0.45) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .mp-pricing-active-banner__title, html[data-theme="dark"] .mp-pricing-active-banner h4 { color: #f8fafc !important; } html[data-theme="dark"] .mp-pricing-active-banner__sub, html[data-theme="dark"] .mp-pricing-active-banner p { color: #94a3b8 !important; } html[data-theme="dark"] .mp-pricing-active-banner__icon { background: rgba(0, 146, 166, 0.25) !important; color: #38bdf8 !important; } html[data-theme="dark"] .mp-pricing-active-banner__plan { background: #0092a6 !important; color: #ffffff !important; } /* Pricing Cards */ html[data-theme="dark"] .mp-pricing-card, html[data-theme="dark"] .tutor-membership-pricing-item-inner, html[data-theme="dark"] .tutor-membership-pricing-item { background: var(--mp-surface-light) !important; border-color: var(--mp-border) !important; box-shadow: var(--mp-shadow-md) !important; } html[data-theme="dark"] .mp-pricing-card:hover, html[data-theme="dark"] .tutor-membership-pricing-item-inner:hover { border-color: var(--mp-primary-400) !important; box-shadow: var(--mp-shadow-glow) !important; } html[data-theme="dark"] .mp-pricing-card.is-featured, html[data-theme="dark"] .tutor-membership-pricing-item.is-featured .tutor-membership-pricing-item-inner { border-color: var(--mp-primary-400) !important; box-shadow: 0 16px 40px rgba(0, 164, 183, 0.2) !important; } html[data-theme="dark"] .mp-pricing-card__header { border-bottom-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-pricing-card__title, html[data-theme="dark"] .tutor-membership-pricing-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-pricing-card__desc, html[data-theme="dark"] .tutor-short-description { color: var(--mp-gray-300) !important; } html[data-theme="dark"] .mp-pricing-card__currency, html[data-theme="dark"] .tutor-pricing-price { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-pricing-card__amount, html[data-theme="dark"] .tutor-pricing-price-amount { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-pricing-card__duration, html[data-theme="dark"] .tutor-pricing-price-duration { color: var(--mp-gray-300) !important; } html[data-theme="dark"] .mp-pricing-card__sale del, html[data-theme="dark"] .tutor-pricing-price-discount { color: var(--mp-gray-500) !important; } html[data-theme="dark"] .mp-pricing-card__sale .mp-badge { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; border: 1px solid var(--mp-border) !important; } /* Features List */ html[data-theme="dark"] .mp-pricing-card__features-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-pricing-card__features li, html[data-theme="dark"] .tutor-pricing-features li { color: var(--mp-text-body) !important; } html[data-theme="dark"] .mp-pricing-card__features li.is-disabled { color: var(--mp-gray-500) !important; } html[data-theme="dark"] .mp-pricing-card__features .material-icons, html[data-theme="dark"] .tutor-feature-icon-active { color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-pricing-card__features li.is-disabled .material-icons, html[data-theme="dark"] .tutor-feature-icon-inactive { color: var(--mp-gray-600) !important; } /* Outline Buttons */ html[data-theme="dark"] .mp-pricing-btn-outline { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-pricing-btn-outline:hover { background: var(--mp-primary-500) !important; color: #ffffff !important; } /* Trust Badges */ html[data-theme="dark"] .mp-pricing-trust { border-top-color: var(--mp-border) !important; border-bottom-color: var(--mp-border) !important; } html[data-theme="dark"] .mp-trust-item .mp-trust-icon { background: var(--mp-surface-dark) !important; color: var(--mp-primary-400) !important; border: 1px solid var(--mp-border) !important; } html[data-theme="dark"] .mp-trust-item h4 { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-trust-item p { color: var(--mp-gray-300) !important; } /* FAQ Accordion */ html[data-theme="dark"] .mp-pricing-faq-title { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-faq-item { background: var(--mp-surface-light) !important; border-color: var(--mp-border) !important; box-shadow: var(--mp-shadow-sm) !important; } html[data-theme="dark"] .mp-faq-item:hover { border-color: var(--mp-primary-400) !important; } html[data-theme="dark"] .mp-faq-question span { color: var(--mp-text-dark) !important; } html[data-theme="dark"] .mp-faq-answer p { color: var(--mp-gray-300) !important; } /* ========================================================================== 26. PUBLIC PROFILE (Instructor & Student) ========================================================================== */ html[data-theme="dark"] .mp-profile-page { background: #0b1120 !important; } html[data-theme="dark"] .mp-profile-header-card { background: #111827 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .mp-profile-avatar-img { border-color: #111827 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .mp-profile-avatar-verified { border-color: #111827 !important; } html[data-theme="dark"] .mp-profile-title { color: #f8fafc !important; } html[data-theme="dark"] .mp-profile-tagline { color: #94a3b8 !important; } html[data-theme="dark"] .mp-profile-social-link { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #cbd5e1 !important; } html[data-theme="dark"] .mp-profile-social-link:hover { background: #0092a6 !important; border-color: #0092a6 !important; color: #ffffff !important; } html[data-theme="dark"] .mp-profile-stat-chip { background: #1e293b !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .mp-profile-stat-chip:hover { border-color: rgba(0, 146, 166, 0.5) !important; } html[data-theme="dark"] .mp-profile-stat-val { color: #f8fafc !important; } html[data-theme="dark"] .mp-profile-stat-label { color: #94a3b8 !important; } html[data-theme="dark"] .mp-profile-courses-title { color: #f8fafc !important; } html[data-theme="dark"] .mp-profile-courses-header { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .mp-profile-bio-card, html[data-theme="dark"] .mp-profile-info-card { background: #111827 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .mp-profile-bio-title, html[data-theme="dark"] .mp-profile-info-title { color: #f8fafc !important; } html[data-theme="dark"] .mp-profile-bio-text { color: #94a3b8 !important; } html[data-theme="dark"] .mp-profile-info-item { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] .mp-profile-info-key { color: #94a3b8 !important; } html[data-theme="dark"] .mp-profile-info-val { color: #f8fafc !important; } html[data-theme="dark"] .mp-empty-card { background: #111827 !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .mp-empty-title { color: #f8fafc !important; } html[data-theme="dark"] .mp-empty-desc { color: #94a3b8 !important; }