/* ==================================================== Premium Light Theme — Warm & Refined Applies when is set. ==================================================== */ /* ---- Root Variables Override ---- */ body[data-theme="light"] { --bg-primary: #f3ede7; --bg-secondary: #ffffff; --bg-card: rgba(255, 255, 255, 0.85); --border-color: rgba(0, 0, 0, 0.08); --border-color-glow: rgba(26, 86, 219, 0.25); --text-main: #2d2a24; --text-muted: #8b8580; --neon-cyan: #1a56db; --neon-cyan-glow: rgba(26, 86, 219, 0.08); --neon-blue: #2563eb; --neon-purple: #7c3aed; --neon-purple-glow: rgba(124, 58, 237, 0.08); --success-color: #059669; --success-glow: rgba(5, 150, 105, 0.08); --error-color: #dc2626; --error-glow: rgba(220, 38, 38, 0.08); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --glass-blur: blur(8px); } /* ---- Scrollbar ---- */ body[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12) !important; } body[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan) !important; } /* ---- App Container (background) ---- */ body[data-theme="light"] .app-container { background-image: radial-gradient(circle at 12% 15%, rgba(26, 86, 219, 0.04) 0%, transparent 50%), radial-gradient(circle at 88% 85%, rgba(124, 58, 237, 0.04) 0%, transparent 50%), linear-gradient(180deg, #f3ede7 0%, #faf6f1 100%) !important; } /* ---- App Header ---- */ body[data-theme="light"] .app-header { background: rgba(243, 237, 231, 0.85) !important; border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .logo-text h1 { color: var(--text-main) !important; } body[data-theme="light"] .header-subject-selector .subject-tab { color: var(--text-muted) !important; background: transparent !important; } body[data-theme="light"] .header-subject-selector { background: rgba(255, 255, 255, 0.72) !important; border-color: var(--border-color) !important; } body[data-theme="light"] .header-subject-selector .subject-tab:hover { color: var(--text-main) !important; background: rgba(0, 0, 0, 0.03) !important; } body[data-theme="light"] .header-subject-selector .subject-tab.active { color: #1a56db !important; background: rgba(26, 86, 219, 0.06) !important; border-bottom: 2px solid #1a56db !important; } /* ---- Sidebar ---- */ body[data-theme="light"] .app-sidebar { background: rgba(255, 255, 255, 0.7) !important; border-right: 1px solid var(--border-color) !important; } body[data-theme="light"] .sidebar-progress { background: rgba(0, 0, 0, 0.02) !important; } body[data-theme="light"] .sidebar-title { color: var(--neon-cyan) !important; } body[data-theme="light"] .lesson-nav-item { color: var(--text-muted) !important; } body[data-theme="light"] .lesson-nav-item:hover { background: rgba(0, 0, 0, 0.03) !important; color: var(--text-main) !important; } body[data-theme="light"] .lesson-nav-item.active { background: linear-gradient(90deg, rgba(26, 86, 219, 0.08), rgba(26, 86, 219, 0.02)) !important; color: #1a56db !important; border-left: 3px solid #1a56db !important; box-shadow: inset 4px 0 8px rgba(26, 86, 219, 0.06), 0 0 10px rgba(26, 86, 219, 0.06) !important; text-shadow: none !important; } body[data-theme="light"] .lesson-nav-item.completed { background: rgba(5, 150, 105, 0.03) !important; } body[data-theme="light"] .lesson-nav-item.completed:hover { background: rgba(5, 150, 105, 0.06) !important; } /* ---- Content Cards ---- */ body[data-theme="light"] .content-card { background: var(--bg-card) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important; } body[data-theme="light"] .lesson-header { border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .lesson-badge { background: rgba(124, 58, 237, 0.08) !important; color: var(--neon-purple) !important; border: 1px solid rgba(124, 58, 237, 0.15) !important; } body[data-theme="light"] .lesson-header h2 { color: var(--text-main) !important; } /* ---- Language Tabs ---- */ body[data-theme="light"] .lang-tabs { background: rgba(0, 0, 0, 0.04) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .lang-tab.active { background: rgba(26, 86, 219, 0.08) !important; color: #1a56db !important; } /* ---- Concept Body ---- */ body[data-theme="light"] .concept-body { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; } body[data-theme="light"] .concept-column h4, body[data-theme="light"] .concept-body p, body[data-theme="light"] .concept-body li { color: var(--text-main) !important; } body[data-theme="light"] .concept-body strong { color: var(--neon-cyan) !important; } body[data-theme="light"] .concept-body code { background: rgba(0, 0, 0, 0.04) !important; color: #b45309 !important; } body[data-theme="light"] .concept-body .vocab-highlight { color: #7c3aed !important; } /* ---- Analogy Card ---- */ body[data-theme="light"] .analogy-card { background: rgba(252, 185, 0, 0.04) !important; border: 1px solid rgba(252, 185, 0, 0.15) !important; } body[data-theme="light"] .analogy-card .card-content p { color: var(--text-main) !important; } /* ---- Example Card / Code ---- */ body[data-theme="light"] .example-card { background: #f8f6f4 !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .example-header { background: rgba(0, 0, 0, 0.02) !important; border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .example-card code { color: #b45309 !important; } /* ---- Quiz Section ---- */ body[data-theme="light"] .quiz-section h4 { color: var(--neon-purple) !important; } body[data-theme="light"] .quiz-question { background: rgba(0, 0, 0, 0.02) !important; border-left: 3px solid var(--neon-purple) !important; } body[data-theme="light"] .quiz-option { border: 1px solid var(--border-color) !important; } body[data-theme="light"] .quiz-option:hover { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.15) !important; } body[data-theme="light"] .quiz-option.selected { border-color: var(--neon-purple) !important; background: var(--neon-purple-glow) !important; } body[data-theme="light"] .quiz-submit-btn { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; } body[data-theme="light"] .quiz-feedback.success { background: rgba(5, 150, 105, 0.08) !important; border: 1px solid #059669 !important; color: #059669 !important; } body[data-theme="light"] .quiz-feedback.error { background: rgba(220, 38, 38, 0.08) !important; border: 1px solid #dc2626 !important; color: #dc2626 !important; } /* ---- Playground Section ---- */ body[data-theme="light"] .playground-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important; } /* ---- Execution Results ---- */ body[data-theme="light"] .output-card, body[data-theme="light"] .output-card.maximized { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 4px 18px rgba(45, 42, 36, 0.08) !important; } body[data-theme="light"] .output-header, body[data-theme="light"] .java-output-header, body[data-theme="light"] .python-output-header { background: #f8f5f1 !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; color: var(--text-main) !important; } body[data-theme="light"] .output-body, body[data-theme="light"] .output-placeholder, body[data-theme="light"] .java-output-content, body[data-theme="light"] .python-output-content { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.06) !important; box-shadow: none !important; color: #3f3a34 !important; } body[data-theme="light"] .output-placeholder { color: #918980 !important; } body[data-theme="light"] .result-table { background: #ffffff !important; color: var(--text-main) !important; } body[data-theme="light"] .result-table th { background: #eee9e3 !important; color: #1a56db !important; border-bottom-color: rgba(0, 0, 0, 0.12) !important; } body[data-theme="light"] .result-table td { color: #3f3a34 !important; border-bottom-color: rgba(0, 0, 0, 0.07) !important; } body[data-theme="light"] .result-table tbody tr:nth-child(even) { background: #faf8f5 !important; } body[data-theme="light"] .result-table tbody tr:hover { background: #edf3ff !important; } body[data-theme="light"] .row-count-badge, body[data-theme="light"] .java-sandbox-status, body[data-theme="light"] .python-sandbox-status { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #625b54 !important; } body[data-theme="light"] .java-output-success, body[data-theme="light"] .python-output-success { color: #047857 !important; } body[data-theme="light"] .java-output-error, body[data-theme="light"] .python-output-error { color: #b91c1c !important; } body[data-theme="light"] .maximize-overlay.visible { background: rgba(45, 42, 36, 0.24) !important; } body[data-theme="light"] .schema-header { color: var(--neon-cyan) !important; border-bottom: 1px solid var(--border-color) !important; background: rgba(0, 0, 0, 0.02) !important; } body[data-theme="light"] .schema-header:hover { background: rgba(0, 0, 0, 0.03) !important; } body[data-theme="light"] .schema-tab { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .schema-tab.active { border-color: var(--neon-cyan) !important; color: var(--neon-cyan) !important; background: var(--neon-cyan-glow) !important; } body[data-theme="light"] .schema-table-details { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid var(--border-color) !important; } /* ---- Console ---- */ body[data-theme="light"] .console-header { border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .console-btn { border: 1px solid var(--border-color) !important; } body[data-theme="light"] .playground-task-desc { background: rgba(26, 86, 219, 0.03) !important; border-bottom: 1px solid var(--border-color) !important; } /* ---- Editor Container ---- */ body[data-theme="light"] .editor-container { background: #f8f6f4 !important; } body[data-theme="light"] .line-numbers { background: rgba(0, 0, 0, 0.02) !important; color: rgba(0, 0, 0, 0.25) !important; border-right: 1px solid rgba(0, 0, 0, 0.06) !important; } /* ---- DB Group Tabs ---- */ body[data-theme="light"] .db-group-tabs { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .db-group-tab.active { background: rgba(0, 0, 0, 0.06) !important; color: var(--neon-cyan) !important; } /* ---- Output Section ---- */ body[data-theme="light"] .output-header-tab.active { color: #fff !important; background: linear-gradient(135deg, #2563eb, #1a56db) !important; } body[data-theme="light"] .output-header-tab:hover { color: var(--text-main) !important; } /* ---- Progress ---- */ body[data-theme="light"] .progress-bar-fill { background: linear-gradient(90deg, #2563eb, #1a56db) !important; } /* ---- Header Challenge Button ---- */ body[data-theme="light"] .header-challenge-btn-start { background: rgba(234, 88, 12, 0.06) !important; border: 1px solid rgba(234, 88, 12, 0.15) !important; color: #c2410c !important; } body[data-theme="light"] .header-challenge-btn-start:hover { background: rgba(234, 88, 12, 0.12) !important; } body[data-theme="light"] .challenge-status-text { color: #c2410c !important; } body[data-theme="light"] .challenge-source-tag { background: rgba(124, 58, 237, 0.08) !important; border: 1px solid rgba(124, 58, 237, 0.2) !important; } body[data-theme="light"] .challenge-control-btn { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .challenge-control-btn.stop-btn { background: rgba(220, 38, 38, 0.06) !important; border-color: rgba(220, 38, 38, 0.15) !important; color: #dc2626 !important; } body[data-theme="light"] .challenge-control-btn.stop-btn:hover { background: rgba(220, 38, 38, 0.12) !important; color: #dc2626 !important; } /* ---- Reset Button ---- */ body[data-theme="light"] .reset-all-btn { border: 1px solid var(--border-color) !important; } /* ---- AI Settings Button ---- */ body[data-theme="light"] .ai-settings-btn { border: 1px solid var(--border-color) !important; background: rgba(26, 86, 219, 0.04) !important; color: var(--neon-cyan) !important; } body[data-theme="light"] .ai-settings-btn:hover { background: rgba(26, 86, 219, 0.08) !important; } /* ---- Sub-Header Tabs ---- */ body[data-theme="light"] .sub-header-bar { background: rgba(255, 255, 255, 0.6) !important; border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .sub-header-tab { color: var(--text-muted) !important; background: transparent !important; } body[data-theme="light"] .sub-header-tab.active { color: #1a56db !important; background: rgba(26, 86, 219, 0.06) !important; border-bottom: 2px solid #1a56db !important; } /* ---- CBT Exam Screens ---- */ body[data-theme="light"] .cbt-config-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important; } body[data-theme="light"] .cbt-config-options { background: rgba(0, 0, 0, 0.02) !important; } body[data-theme="light"] .cbt-launch-btn { background: linear-gradient(135deg, #1a56db, #2563eb) !important; } body[data-theme="light"] .cbt-testing-header { background: rgba(255, 255, 255, 0.85) !important; border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .cbt-question-canvas { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .cbt-q-card-header { border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .cbt-navigator-panel { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .cbt-nav-btn { border: 1px solid var(--border-color) !important; } body[data-theme="light"] .cbt-results-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; } body[data-theme="light"] .cbt-results-header { border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .cbt-results-close-btn { border: 1px solid var(--border-color) !important; } body[data-theme="light"] .field-score-progressbar { background: rgba(0, 0, 0, 0.04) !important; } body[data-theme="light"] .cbt-exam-timer-box { background: rgba(220, 38, 38, 0.04) !important; border: 1px solid rgba(220, 38, 38, 0.1) !important; color: #dc2626 !important; } body[data-theme="light"] .cbt-btn-action.submit { background: linear-gradient(135deg, #059669, #10b981) !important; } body[data-theme="light"] .cbt-btn-action.reset { border: 1px solid var(--border-color) !important; } /* ---- Results Table ---- */ body[data-theme="light"] .results-table thead th { background: rgba(0, 0, 0, 0.02) !important; color: var(--text-muted) !important; border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .results-table tbody td { border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important; } /* ---- AI Modal ---- */ body[data-theme="light"] .ai-modal-overlay { background: rgba(0, 0, 0, 0.2) !important; } body[data-theme="light"] .ai-modal-card { background: #ffffff !important; border: 1px solid var(--border-color) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important; } body[data-theme="light"] .ai-modal-header { border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .ai-modal-close-btn { color: var(--text-muted) !important; } body[data-theme="light"] .ai-modal-close-btn:hover { color: var(--text-main) !important; } body[data-theme="light"] .ai-hint-step-box { background: rgba(0, 0, 0, 0.02) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .settings-btn.save { background: #1a56db !important; border: 1px solid #1a56db !important; color: #ffffff !important; } body[data-theme="light"] .settings-btn.save:hover { background: #2563eb !important; border-color: #2563eb !important; } body[data-theme="light"] .password-input-wrapper input { background: #f8f6f4 !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; } body[data-theme="light"] .password-input-wrapper input:focus { border-color: var(--neon-cyan) !important; box-shadow: 0 0 8px rgba(26, 86, 219, 0.12) !important; } body[data-theme="light"] .settings-desc { color: var(--text-muted) !important; } body[data-theme="light"] .settings-input-group label { color: var(--text-main) !important; } body[data-theme="light"] .settings-actions { border-top: 1px solid var(--border-color) !important; } body[data-theme="light"] .settings-btn.cancel { border: 1px solid var(--border-color) !important; } /* ---- Java & Python Flashcards ---- */ body[data-theme="light"] .java-flashcard, body[data-theme="light"] .python-flashcard { background: #ffffff !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .java-flashcard-wrapper, body[data-theme="light"] .python-flashcard-wrapper { background: rgba(0, 0, 0, 0.02) !important; } body[data-theme="light"] .fc-mode-btn.active { background: rgba(124, 58, 237, 0.08) !important; border: 1px solid rgba(124, 58, 237, 0.2) !important; color: #7c3aed !important; } /* ---- Typing Sandbox ---- */ body[data-theme="light"] .typing-header { background: rgba(255, 255, 255, 0.85) !important; border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .typing-text-display { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .typing-translation-card { background: rgba(0, 0, 0, 0.02) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .virtual-keyboard { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .vk-key { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: var(--text-main) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; } body[data-theme="light"] .vk-key.special { background: rgba(0, 0, 0, 0.02) !important; } /* ---- Typing Results ---- */ body[data-theme="light"] .typing-results-card { background: #ffffff !important; } body[data-theme="light"] .typing-results-card .cbt-results-header { border-bottom: 1px solid var(--border-color) !important; } /* ---- Stepper Panel (Java/Python memory stepper) ---- */ body[data-theme="light"] .stepper-panel-controls { background: rgba(0, 0, 0, 0.02) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .stepper-btn { border: 1px solid var(--border-color) !important; } body[data-theme="light"] .stepper-column-stack, body[data-theme="light"] .stepper-column-heap { background: rgba(255, 255, 255, 0.5) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .stepper-variable-card { background: rgba(0, 0, 0, 0.02) !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; } body[data-theme="light"] .stepper-var-name { color: var(--text-main) !important; } body[data-theme="light"] .heap-array-wrapper { background: rgba(0, 0, 0, 0.01) !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; } body[data-theme="light"] .heap-array-slot { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; } body[data-theme="light"] .stepper-mini-console { background: #f8f6f4 !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; } body[data-theme="light"] .stepper-mini-console-content { color: #1a56db !important; } body[data-theme="light"] .heatmap-cell { background: rgba(255, 255, 255, 0.5) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .mistake-item { background: rgba(0, 0, 0, 0.02) !important; border: 1px solid var(--border-color) !important; } body[data-theme="light"] .mistake-item:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(124, 58, 237, 0.2) !important; } /* ---- Coding Exam Config Screen ---- */ body[data-theme="light"] .eq-timer-box { background: rgba(220, 38, 38, 0.04) !important; border: 1px solid rgba(220, 38, 38, 0.1) !important; color: #dc2626 !important; } body[data-theme="light"] .eq-button-run { background: linear-gradient(135deg, #059669, #10b981) !important; } body[data-theme="light"] .eq-button-submit { background: linear-gradient(135deg, #1a56db, #2563eb) !important; } /* ---- CBT Tabs ---- */ body[data-theme="light"] .cbt-tab-btn.active { background: rgba(124, 58, 237, 0.08) !important; border: 1px solid rgba(124, 58, 237, 0.2) !important; color: #7c3aed !important; } /* ---- Anki Buttons ---- */ body[data-theme="light"] .anki-btn.hard { background: linear-gradient(135deg, #dc2626, #991b1b) !important; } body[data-theme="light"] .anki-btn.good { background: linear-gradient(135deg, #2563eb, #1e40af) !important; } body[data-theme="light"] .anki-btn.easy { background: linear-gradient(135deg, #059669, #065f46) !important; } /* ---- AI Variant Card ---- */ body[data-theme="light"] .ai-variant-card { background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(0, 0, 0, 0.04)) !important; border: 1.5px solid rgba(251, 191, 36, 0.2) !important; } body[data-theme="light"] .ai-variant-card p { color: var(--text-main) !important; } /* ---- Theme Toggle Button ---- */ body[data-theme="light"] .theme-toggle-btn { background: rgba(26, 86, 219, 0.06) !important; border: 1px solid rgba(26, 86, 219, 0.15) !important; color: #1a56db !important; } body[data-theme="light"] .theme-toggle-btn:hover { background: rgba(26, 86, 219, 0.12) !important; box-shadow: 0 0 8px rgba(26, 86, 219, 0.15) !important; } body[data-theme="light"] .language-toggle-btn, body[data-theme="light"] .language-popover, body[data-theme="light"] .language-search-wrap, body[data-theme="light"] .language-option { background: #ffffff !important; color: #000000 !important; border-color: #111111 !important; box-shadow: none !important; } body[data-theme="light"] .language-toggle-btn:hover, body[data-theme="light"] .language-toggle-btn[aria-expanded="true"], body[data-theme="light"] .language-option:hover, body[data-theme="light"] .language-option.active { background: #f5f5f5 !important; color: #000000 !important; border-color: #000000 !important; } body[data-theme="light"] .language-popover-head small, body[data-theme="light"] .language-option small, body[data-theme="light"] .language-search-wrap { color: #222222 !important; } /* ---- Typing highlights ---- */ body[data-theme="light"] .typing-char-correct { color: #059669 !important; } body[data-theme="light"] .typing-char-incorrect { color: #dc2626 !important; background: rgba(220, 38, 38, 0.08) !important; } /* ---- CBT Results ---- */ body[data-theme="light"] .cbt-results-total-box { background: rgba(26, 86, 219, 0.04) !important; border: 1px solid rgba(26, 86, 219, 0.1) !important; } body[data-theme="light"] .pass-status-badge.pass { background: rgba(5, 150, 105, 0.08) !important; color: #059669 !important; border: 1px solid rgba(5, 150, 105, 0.15) !important; } body[data-theme="light"] .pass-status-badge.fail { background: rgba(220, 38, 38, 0.08) !important; color: #dc2626 !important; border: 1px solid rgba(220, 38, 38, 0.15) !important; } /* ---- Vocabulary overrides ---- */ body[data-theme="light"] .java-vocab-header, body[data-theme="light"] .python-vocab-header { border-bottom: 1px solid var(--border-color) !important; } body[data-theme="light"] .java-vocab-flip-btn, body[data-theme="light"] .python-vocab-flip-btn { border: 1px solid var(--border-color) !important; } body[data-theme="light"] .java-vocab-nav-btn, body[data-theme="light"] .python-vocab-nav-btn { border: 1px solid var(--border-color) !important; } /* Smooth transitions for all themed elements */ body[data-theme="light"] *, body[data-theme="light"] *::before, body[data-theme="light"] *::after { transition-property: background-color, border-color, box-shadow, color !important; transition-duration: 0.25s !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ==================================================== High Contrast Light Theme Override White background + black text for maximum readability. ==================================================== */ body[data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-card: #ffffff; --border-color: #111111; --border-color-glow: #000000; --text-main: #000000; --text-muted: #111111; --neon-cyan: #000000; --neon-cyan-glow: rgba(0, 0, 0, 0.08); --neon-blue: #000000; --neon-purple: #000000; --neon-purple-glow: rgba(0, 0, 0, 0.08); --success-color: #000000; --success-glow: rgba(0, 0, 0, 0.08); --error-color: #000000; --error-glow: rgba(0, 0, 0, 0.08); background: #ffffff !important; color: #000000 !important; } body[data-theme="light"] *, body[data-theme="light"] *::before, body[data-theme="light"] *::after { color: #000000 !important; text-shadow: none !important; box-shadow: none !important; } body[data-theme="light"] .app-container, body[data-theme="light"] .app-header, body[data-theme="light"] .sub-header-bar, body[data-theme="light"] .app-sidebar, body[data-theme="light"] .lesson-content, body[data-theme="light"] .playground-section, body[data-theme="light"] .content-card, body[data-theme="light"] .playground-card, body[data-theme="light"] .schema-card, body[data-theme="light"] .output-card, body[data-theme="light"] .java-sandbox-card, body[data-theme="light"] .python-sandbox-card, body[data-theme="light"] .cbt-config-card, body[data-theme="light"] .cbt-results-card, body[data-theme="light"] .typing-results-card, body[data-theme="light"] .java-flashcard, body[data-theme="light"] .python-flashcard, body[data-theme="light"] .ai-modal-card, body[data-theme="light"] .ai-variant-card { background: #ffffff !important; background-image: none !important; color: #000000 !important; border-color: #111111 !important; } body[data-theme="light"] .header-subject-selector, body[data-theme="light"] .sub-header-tabs, body[data-theme="light"] .sidebar-progress, body[data-theme="light"] .lessons-nav, body[data-theme="light"] .sidebar-chapter-header, body[data-theme="light"] .lesson-nav-item, body[data-theme="light"] .lesson-nav-item.active, body[data-theme="light"] .concept-body, body[data-theme="light"] .analogy-card, body[data-theme="light"] .example-card, body[data-theme="light"] .example-header, body[data-theme="light"] .quiz-section, body[data-theme="light"] .quiz-question, body[data-theme="light"] .quiz-option, body[data-theme="light"] .quiz-option.selected, body[data-theme="light"] .schema-header, body[data-theme="light"] .console-header, body[data-theme="light"] .playground-task-desc, body[data-theme="light"] .output-header, body[data-theme="light"] .output-body, body[data-theme="light"] .output-placeholder, body[data-theme="light"] .java-output-content, body[data-theme="light"] .python-output-content, body[data-theme="light"] .editor-container, body[data-theme="light"] .line-numbers, body[data-theme="light"] .db-group-tabs, body[data-theme="light"] .db-group-tab, body[data-theme="light"] .db-group-tab.active, body[data-theme="light"] .result-table, body[data-theme="light"] .result-table th, body[data-theme="light"] .result-table td, body[data-theme="light"] .result-table tbody tr, body[data-theme="light"] .cbt-question-canvas, body[data-theme="light"] .cbt-navigator-panel, body[data-theme="light"] .stepper-panel-controls, body[data-theme="light"] .stepper-column-stack, body[data-theme="light"] .stepper-column-heap, body[data-theme="light"] .stepper-variable-card, body[data-theme="light"] .typing-text-display, body[data-theme="light"] .typing-translation-card, body[data-theme="light"] .virtual-keyboard, body[data-theme="light"] .vk-key { background: #ffffff !important; background-image: none !important; color: #000000 !important; border-color: #111111 !important; } body[data-theme="light"] input, body[data-theme="light"] select, body[data-theme="light"] textarea, body[data-theme="light"] code, body[data-theme="light"] pre, body[data-theme="light"] .sql-editor, body[data-theme="light"] #sql-editor, body[data-theme="light"] #java-editor, body[data-theme="light"] #python-editor { background: #ffffff !important; color: #000000 !important; border-color: #111111 !important; caret-color: #000000 !important; } body[data-theme="light"] input::placeholder, body[data-theme="light"] textarea::placeholder { color: #333333 !important; opacity: 1 !important; } body[data-theme="light"] button, body[data-theme="light"] .subject-tab, body[data-theme="light"] .sub-header-tab, body[data-theme="light"] .reset-all-btn, body[data-theme="light"] .theme-toggle-btn, body[data-theme="light"] .header-challenge-btn-start, body[data-theme="light"] .challenge-control-btn, body[data-theme="light"] .copy-example-btn, body[data-theme="light"] .console-btn, body[data-theme="light"] .schema-tab, body[data-theme="light"] .schema-tab.active, body[data-theme="light"] .quiz-submit-btn, body[data-theme="light"] .run-query-btn, body[data-theme="light"] .cbt-launch-btn, body[data-theme="light"] .coding-exam-run-btn, body[data-theme="light"] .eq-button-run, body[data-theme="light"] .eq-button-submit, body[data-theme="light"] .anki-btn, body[data-theme="light"] .settings-btn, body[data-theme="light"] .java-vocab-flip-btn, body[data-theme="light"] .python-vocab-flip-btn, body[data-theme="light"] .java-vocab-nav-btn, body[data-theme="light"] .python-vocab-nav-btn { background: #ffffff !important; background-image: none !important; color: #000000 !important; border: 1px solid #111111 !important; } body[data-theme="light"] button:hover, body[data-theme="light"] .subject-tab:hover, body[data-theme="light"] .sub-header-tab:hover, body[data-theme="light"] .lesson-nav-item:hover, body[data-theme="light"] .quiz-option:hover { background: #f2f2f2 !important; color: #000000 !important; border-color: #000000 !important; } body[data-theme="light"] .subject-tab.active, body[data-theme="light"] .header-subject-selector .subject-tab.active, body[data-theme="light"] #subject-tab-itpass.active, body[data-theme="light"] #subject-tab-java.active, body[data-theme="light"] #subject-tab-python.active, body[data-theme="light"] #subject-tab-sg.active, body[data-theme="light"] .sub-header-tab.active, body[data-theme="light"] .sub-header-bar .sub-header-tab.active, body[data-theme="light"] #sql-sub-header .sub-header-tab.active, body[data-theme="light"] #python-sub-header .sub-header-tab.active, body[data-theme="light"] #java-sub-header .sub-header-tab.active, body[data-theme="light"] #itpass-sub-header .sub-header-tab.active, body[data-theme="light"] #sg-sub-header .sub-header-tab.active, body[data-theme="light"] .lesson-nav-item.active, body[data-theme="light"] .output-header-tab.active, body[data-theme="light"] .cbt-tab-btn.active, body[data-theme="light"] .fc-mode-btn.active { background: #ffffff !important; background-image: none !important; color: #000000 !important; border: 2px solid #000000 !important; } body[data-theme="light"] .subject-tab.active *, body[data-theme="light"] .header-subject-selector .subject-tab.active *, body[data-theme="light"] .sub-header-tab.active *, body[data-theme="light"] #sql-sub-header .sub-header-tab.active * { color: #000000 !important; } body[data-theme="light"] .lesson-badge, body[data-theme="light"] .row-count-badge, body[data-theme="light"] .java-sandbox-status, body[data-theme="light"] .python-sandbox-status, body[data-theme="light"] .challenge-source-tag, body[data-theme="light"] .pass-status-badge, body[data-theme="light"] .cbt-exam-timer-box, body[data-theme="light"] .eq-timer-box { background: #ffffff !important; color: #000000 !important; border: 1px solid #111111 !important; } body[data-theme="light"] .progress-bar-container, body[data-theme="light"] .field-score-progressbar, body[data-theme="light"] .ai-mastery-bar { background: #ffffff !important; border: 1px solid #111111 !important; } body[data-theme="light"] .progress-bar-fill, body[data-theme="light"] .field-score-fill, body[data-theme="light"] .ai-mastery-bar span { background: #000000 !important; background-image: none !important; } body[data-theme="light"] .typing-char-correct, body[data-theme="light"] .typing-char-incorrect, body[data-theme="light"] .quiz-feedback.success, body[data-theme="light"] .quiz-feedback.error, body[data-theme="light"] .java-output-success, body[data-theme="light"] .python-output-success, body[data-theme="light"] .java-output-error, body[data-theme="light"] .python-output-error { background: #ffffff !important; color: #000000 !important; border-color: #111111 !important; } body[data-theme="light"], body[data-theme="light"] .app-container, body[data-theme="light"] .app-body, body[data-theme="light"] main, body[data-theme="light"] section, body[data-theme="light"] article, body[data-theme="light"] aside, body[data-theme="light"] .lesson-content, body[data-theme="light"] .playground-section, body[data-theme="light"] .cbt-testing-body, body[data-theme="light"] .java-sandbox-body, body[data-theme="light"] .python-sandbox-body { background: #ffffff !important; background-image: none !important; color: #000000 !important; } body[data-theme="light"] [style*="background: rgba(0,0,0"], body[data-theme="light"] [style*="background:rgba(0,0,0"], body[data-theme="light"] [style*="background: rgba(0, 0, 0"], body[data-theme="light"] [style*="background:rgba(0, 0, 0"], body[data-theme="light"] [style*="background: #030712"], body[data-theme="light"] [style*="background:#030712"], body[data-theme="light"] [style*="background: #060913"], body[data-theme="light"] [style*="background:#060913"], body[data-theme="light"] [style*="background: #09090b"], body[data-theme="light"] [style*="background:#09090b"], body[data-theme="light"] [style*="background: #121824"], body[data-theme="light"] [style*="background:#121824"] { background: #ffffff !important; background-image: none !important; color: #000000 !important; border-color: #111111 !important; } body[data-theme="light"], body[data-theme="light"] *, body[data-theme="light"] :where(div, header, nav, aside, main, section, article, form, fieldset, details, summary, dialog, table, thead, tbody, tfoot, tr, th, td, ul, ol, li, p, h1, h2, h3, h4, h5, h6, pre, code, textarea, input, select, option, button, label, span) { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-shadow: none !important; box-shadow: none !important; border-color: #111111 !important; } body[data-theme="light"] *::before, body[data-theme="light"] *::after { color: #000000 !important; text-shadow: none !important; box-shadow: none !important; border-color: #111111 !important; } body[data-theme="light"] ::placeholder { color: #333333 !important; opacity: 1 !important; }