/* ============================================ LinguaAI Light Theme — Ocean Blue Activate with [data-theme="light"] on ============================================ */ [data-theme="light"] { /* === Primary Colors (keep brand consistency) === */ --primary: #4361EE; --primary-light: #5B7CFA; --primary-dark: #3451D1; --secondary: #0096C7; --secondary-light: #48CAE4; --accent-coral: #E85D5D; --accent-green: #06D6A0; /* === Backgrounds — Light Ocean === */ --bg-deep: #EBF5FB; --bg-surface: #FFFFFF; --bg-surface-hover: #F0F7FF; --bg-card: rgba(255, 255, 255, 0.85); --bg-input: #F4F9FE; /* === Text — Dark for readability === */ --text-primary: #1A2942; --text-secondary: #4A6280; --text-muted: #8BA3C1; /* === Borders === */ --border-subtle: rgba(67, 97, 238, 0.15); --border-glass: rgba(67, 97, 238, 0.08); /* === Shadows — Softer for light theme === */ --shadow-sm: 0 1px 4px rgba(26, 41, 66, 0.06); --shadow-md: 0 4px 12px rgba(26, 41, 66, 0.08); --shadow-lg: 0 8px 24px rgba(26, 41, 66, 0.1); --shadow-glow-primary: 0 0 16px rgba(67, 97, 238, 0.15); --shadow-glow-secondary: 0 0 16px rgba(0, 150, 199, 0.15); --shadow-elevated: 0 8px 32px rgba(26, 41, 66, 0.1), 0 0 0 1px rgba(67, 97, 238, 0.06); /* === Gradients === */ --gradient-primary: linear-gradient(135deg, #4361EE 0%, #0096C7 100%); --gradient-card: linear-gradient(135deg, rgba(67, 97, 238, 0.04) 0%, rgba(0, 150, 199, 0.02) 100%); --gradient-card-hover: linear-gradient(135deg, rgba(67, 97, 238, 0.08) 0%, rgba(0, 150, 199, 0.04) 100%); --gradient-border: linear-gradient(135deg, rgba(67, 97, 238, 0.25), rgba(0, 150, 199, 0.15), rgba(67, 97, 238, 0.06)); --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(235, 245, 251, 0.9) 100%); /* === Glass (for glassmorphism on light bg) === */ --glass-light: rgba(255, 255, 255, 0.5); --glass-medium: rgba(255, 255, 255, 0.7); --glass-strong: rgba(255, 255, 255, 0.85); } /* === Body background with ocean image === */ [data-theme="light"] body { background-color: #EBF5FB; background-image: url('/images/light-theme-bg.png'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; color: var(--text-primary); } /* === Ensure body content is readable over background === */ [data-theme="light"] body::before { content: ''; position: fixed; inset: 0; background: rgba(235, 245, 251, 0.6); z-index: 0; pointer-events: none; } [data-theme="light"] body > *:not([class*="modal"]):not([class*="toast"]):not([class*="overlay"]):not([class*="popup"]):not(.theme-toggle-btn):not([style*="position"]) { position: relative; z-index: 1; } /* === Sidebar === */ [data-theme="light"] .sidebar, [data-theme="light"] .sidebar-nav { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(20px); border-right: 1px solid rgba(67, 97, 238, 0.1); } [data-theme="light"] .sidebar .nav-link { color: var(--text-secondary); } [data-theme="light"] .sidebar .nav-link:hover, [data-theme="light"] .sidebar .nav-link.active { color: var(--primary); background: rgba(67, 97, 238, 0.08); } [data-theme="light"] .sidebar .sidebar-brand, [data-theme="light"] .sidebar .brand-text { color: var(--text-primary); } /* === Navigation / Top bar === */ [data-theme="light"] .topbar, [data-theme="light"] .navbar, [data-theme="light"] header { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(67, 97, 238, 0.1); } /* === Cards === */ [data-theme="light"] .card, [data-theme="light"] .glass-card, [data-theme="light"] .stat-card, [data-theme="light"] .skill-card, [data-theme="light"] .feature-card, [data-theme="light"] [class*="card"]:not([class*="fl-card"]) { background: rgba(255, 255, 255, 0.88) !important; backdrop-filter: blur(12px); border: 1px solid rgba(67, 97, 238, 0.08); box-shadow: var(--shadow-sm); } /* Floating lesson cards — KEEP dark bg in light theme (inverted) */ [data-theme="light"] .fl-card { background: linear-gradient(145deg, #2d2b6b 0%, #232850 50%, #1c2540 100%) !important; border: 1.5px solid var(--card-color, #6C5CE7) !important; box-shadow: 0 6px 28px rgba(0,0,0,0.25), 0 0 15px rgba(108,92,231,0.15) !important; } [data-theme="light"] .fl-card__close { background: transparent !important; border: none !important; } [data-theme="light"] .fl-card__progress { background: rgba(255,255,255,0.1) !important; border: none !important; } [data-theme="light"] .fl-card__progress-fill { border: none !important; } [data-theme="light"] .card:hover, [data-theme="light"] .glass-card:hover, [data-theme="light"] .skill-card:hover { box-shadow: var(--shadow-md); border-color: rgba(67, 97, 238, 0.15); } /* === Inputs === */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] .form-control { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.15); color: var(--text-primary); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-muted); } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.12); } /* === Buttons === */ [data-theme="light"] .btn-secondary, [data-theme="light"] .btn-outline { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(67, 97, 238, 0.2); color: var(--text-primary); } [data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-outline:hover { background: rgba(67, 97, 238, 0.08); border-color: var(--primary); } /* === Modals & Dialogs === */ [data-theme="light"] .modal-content, [data-theme="light"] .dialog, [data-theme="light"] .popup, [data-theme="light"] [class*="modal"] .modal-body, [data-theme="light"] [class*="dialog"], [data-theme="light"] .payment-modal { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(67, 97, 238, 0.1); box-shadow: var(--shadow-lg); color: var(--text-primary); } [data-theme="light"] .bank-info { background: rgba(67, 97, 238, 0.05) !important; } [data-theme="light"] .bank-info__row span:first-child { color: var(--text-secondary) !important; } [data-theme="light"] .bank-info__row span:last-child { color: var(--text-primary) !important; } [data-theme="light"] .payment-modal .pkg-name { color: var(--primary) !important; } [data-theme="light"] .qr-container { border: 1px solid rgba(67, 97, 238, 0.15) !important; } /* === Chat (Lesson page) === */ [data-theme="light"] .chat-messages { background: rgba(255, 255, 255, 0.5); } [data-theme="light"] .chat-message.ai { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.08); color: var(--text-primary); } [data-theme="light"] .chat-message.user { background: linear-gradient(135deg, #4361EE, #0096C7) !important; color: white; } [data-theme="light"] #chat-input-area { background: rgba(255, 255, 255, 0.92) !important; border-top: 1px solid rgba(67, 97, 238, 0.1); } /* === Pinned Passage (Lesson) === */ [data-theme="light"] #pinned-passage { background: linear-gradient(135deg, #F0F7FF 0%, #E8F4FD 100%) !important; border-bottom: 2px solid rgba(67, 97, 238, 0.2); box-shadow: 0 4px 12px rgba(26, 41, 66, 0.06); } [data-theme="light"] .pinned-header { background: rgba(67, 97, 238, 0.06); } [data-theme="light"] .pinned-header:hover { background: rgba(67, 97, 238, 0.1); } [data-theme="light"] .pinned-header__title { color: var(--primary); } [data-theme="light"] .pinned-body { color: var(--text-primary); } /* === Scrollbar === */ [data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="light"] ::-webkit-scrollbar-track { background: rgba(67, 97, 238, 0.04); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(67, 97, 238, 0.18); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(67, 97, 238, 0.3); } /* === Tables === */ [data-theme="light"] table { background: rgba(255, 255, 255, 0.85); } [data-theme="light"] th { background: rgba(67, 97, 238, 0.06); color: var(--text-primary); } [data-theme="light"] td { color: var(--text-secondary); border-color: rgba(67, 97, 238, 0.08); } [data-theme="light"] tr:hover td { background: rgba(67, 97, 238, 0.03); } /* === Badges & Tags === */ [data-theme="light"] .badge, [data-theme="light"] .tag { border: 1px solid rgba(67, 97, 238, 0.12); } /* === Progress bars (track only, NOT fills!) === */ [data-theme="light"] .progress-bar { background: #CBD5E1 !important; } /* Ensure fills keep their gradient colors */ [data-theme="light"] .progress-bar__fill, [data-theme="light"] [class*="progress-bar__fill"] { background: var(--fill-bg) !important; /* preserve existing gradient */ } [data-theme="light"] .progress-bar__fill--listening { background: linear-gradient(90deg, var(--skill-listening), #5dade2) !important; } [data-theme="light"] .progress-bar__fill--speaking { background: linear-gradient(90deg, var(--skill-speaking), #f39c12) !important; } [data-theme="light"] .progress-bar__fill--reading { background: linear-gradient(90deg, var(--skill-reading), #58d68d) !important; } [data-theme="light"] .progress-bar__fill--writing { background: linear-gradient(90deg, var(--skill-writing), #af7ac5) !important; } [data-theme="light"] .progress-bar__fill--grammar { background: linear-gradient(90deg, var(--skill-grammar), #a569bd) !important; } [data-theme="light"] .progress-bar__fill--vocabulary { background: linear-gradient(90deg, var(--skill-vocabulary), #48c9b0) !important; } [data-theme="light"] .progress-bar__fill--primary { background: linear-gradient(90deg, var(--primary), var(--secondary)) !important; } /* === Links === */ [data-theme="light"] a { color: var(--primary); } [data-theme="light"] a:hover { color: var(--secondary); } /* === Dropdown / Popover === */ [data-theme="light"] .dropdown-menu, [data-theme="light"] .popover { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(67, 97, 238, 0.1); box-shadow: var(--shadow-md); } /* === Wallet bar === */ [data-theme="light"] .wallet-nav, [data-theme="light"] #wallet-status-bar { background: rgba(255, 255, 255, 0.9) !important; border-bottom: 1px solid rgba(67, 97, 238, 0.1); } /* === Lesson sidebar / outline === */ [data-theme="light"] .lesson-outline, [data-theme="light"] .lesson-sidebar, [data-theme="light"] .analysis-panel { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.08); } /* === Speaking recorder area === */ [data-theme="light"] #speaking-recorder-fixed { background: rgba(255, 255, 255, 0.92) !important; border-top: 2px solid rgba(67, 97, 238, 0.15); } /* === Pricing cards === */ [data-theme="light"] .pricing-card { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(67, 97, 238, 0.1); } [data-theme="light"] .pricing-card.featured { border-color: var(--primary); } /* === Assessment / Quiz === */ [data-theme="light"] .quiz-option, [data-theme="light"] .answer-option { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.12); color: var(--text-primary); } [data-theme="light"] .quiz-option:hover, [data-theme="light"] .answer-option:hover { background: rgba(67, 97, 238, 0.06) !important; border-color: var(--primary); } /* === Footer === */ [data-theme="light"] footer { background: rgba(255, 255, 255, 0.92); border-top: 1px solid rgba(67, 97, 238, 0.1); color: var(--text-secondary); } /* === Code blocks === */ [data-theme="light"] code, [data-theme="light"] pre { background: rgba(67, 97, 238, 0.04); color: var(--text-primary); } /* === Tooltip === */ [data-theme="light"] .tooltip { background: rgba(26, 41, 66, 0.92); color: #fff; } /* === Listening player === */ [data-theme="light"] #listening-player-floating { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 2px solid rgba(67, 97, 238, 0.15); box-shadow: 0 4px 12px rgba(26, 41, 66, 0.06); } /* === Chat Area (Lesson page) — FIX: dark bg in light theme === */ [data-theme="light"] .chat-area { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(8px); } [data-theme="light"] .chat-header { background: rgba(255, 255, 255, 0.9) !important; border-bottom: 1px solid rgba(67, 97, 238, 0.1); } [data-theme="light"] .chat-messages, [data-theme="light"] #chat-messages { background: rgba(248, 252, 255, 0.6) !important; } /* === Toast Popups — INVERTED: light theme → nền tối chữ trắng === */ [data-theme="light"] .toast { background: rgba(26, 32, 50, 0.92) !important; color: #fff !important; border: none; box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important; } [data-theme="light"] .toast--success { background: rgba(26, 32, 50, 0.92) !important; border-left: 4px solid #06D6A0; color: #fff !important; } [data-theme="light"] .toast--error { background: rgba(26, 32, 50, 0.92) !important; border-left: 4px solid #E85D5D; color: #fff !important; } [data-theme="light"] .toast--info { background: rgba(26, 32, 50, 0.92) !important; border-left: 4px solid #4361EE; color: #fff !important; } /* === Paywall / Energy Popup — FIX: dark bg → light bg === */ [data-theme="light"] .paywall-overlay { background: rgba(26, 41, 66, 0.35) !important; } [data-theme="light"] .paywall-card { background: rgba(255, 255, 255, 0.97) !important; border: 1px solid rgba(67, 97, 238, 0.12) !important; box-shadow: 0 16px 48px rgba(26, 41, 66, 0.15) !important; color: var(--text-primary) !important; } [data-theme="light"] .paywall-title { color: var(--text-primary) !important; } [data-theme="light"] .paywall-subtitle { color: var(--text-secondary) !important; } [data-theme="light"] .paywall-close { color: var(--text-muted) !important; } [data-theme="light"] .paywall-close:hover { color: var(--text-primary) !important; } [data-theme="light"] .paywall-btn--secondary { background: rgba(67, 97, 238, 0.06) !important; border: 1px solid rgba(67, 97, 238, 0.15) !important; color: var(--text-primary) !important; } [data-theme="light"] .paywall-btn--ghost { color: var(--text-secondary) !important; } /* === Energy Shop overlay — FIX: dark bg → light === */ [data-theme="light"] #energy-shop-overlay > div { background: linear-gradient(145deg, #FFFFFF, #F0F7FF) !important; border: 1px solid rgba(67, 97, 238, 0.15) !important; box-shadow: 0 16px 48px rgba(26, 41, 66, 0.12) !important; } [data-theme="light"] #energy-shop-overlay h3 { color: var(--text-primary) !important; } [data-theme="light"] .energy-pack-btn { background: rgba(255, 255, 255, 0.85) !important; color: var(--text-primary) !important; } [data-theme="light"] .energy-pack-btn div[style*="color:#fff"], [data-theme="light"] .energy-pack-btn div[style*="color: #fff"] { color: var(--text-primary) !important; } /* === Progress Bars — FIX: track much more visible in light theme === */ [data-theme="light"] .progress-bar:not([class*="__fill"]) { background: #CBD5E1 !important; } [data-theme="light"] .energy-bar, [data-theme="light"] .energy-mini__bar { background: #CBD5E1 !important; } [data-theme="light"] .skill-bar-bg { background: #CBD5E1 !important; } /* === Circular Progress === */ [data-theme="light"] .circular-progress { background: rgba(255, 255, 255, 0.9); } /* === Skill bar (profile page) === */ [data-theme="light"] .skill-bar-bg, [data-theme="light"] .progress-bg { background: rgba(67, 97, 238, 0.12) !important; } /* === Wallet tooltip === */ [data-theme="light"] .wallet-tooltip { background: rgba(26, 41, 66, 0.92) !important; color: #fff !important; } /* ==================== THEME TOGGLE BUTTON ==================== */ .theme-toggle-btn { position: fixed; bottom: 24px; right: 24px; z-index: 10000; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(108, 92, 231, 0.3); background: rgba(26, 26, 62, 0.9); backdrop-filter: blur(10px); color: #FFD93D; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .theme-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } [data-theme="light"] .theme-toggle-btn { background: rgba(255, 255, 255, 0.9); border: 2px solid rgba(67, 97, 238, 0.2); color: #4361EE; box-shadow: 0 4px 16px rgba(26, 41, 66, 0.1); } [data-theme="light"] .theme-toggle-btn:hover { box-shadow: 0 6px 20px rgba(26, 41, 66, 0.15); } /* ==================== LESSON CHAT BUBBLES (Light Theme) ==================== */ /* AI chat bubble */ [data-theme="light"] .chat-msg--ai .chat-msg__content { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; color: var(--text-primary) !important; box-shadow: 0 2px 8px rgba(26, 41, 66, 0.06); } [data-theme="light"] .chat-msg--ai .chat-msg__content:hover { box-shadow: 0 4px 16px rgba(26, 41, 66, 0.08) !important; } /* User chat bubble */ [data-theme="light"] .chat-msg--user .chat-msg__content { background: linear-gradient(135deg, #4361EE, #5B7CFA) !important; color: #fff !important; box-shadow: 0 3px 12px rgba(67, 97, 238, 0.2); } /* Chat header */ [data-theme="light"] .chat-header { background: rgba(255, 255, 255, 0.9) !important; border-bottom: 1px solid rgba(67, 97, 238, 0.08) !important; backdrop-filter: blur(10px); } /* Chat input area */ [data-theme="light"] .chat-input-area { background: rgba(255, 255, 255, 0.9) !important; border-top: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Chat messages container */ [data-theme="light"] .chat-messages { background: transparent !important; } /* Typing indicator */ [data-theme="light"] .typing-indicator { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; } /* Chat feedback */ [data-theme="light"] .chat-msg__feedback { background: rgba(67, 97, 238, 0.04) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Quick action buttons */ [data-theme="light"] .quick-action-btn { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; } /* Floating listening player */ [data-theme="light"] #listening-player-floating { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,247,255,0.95)) !important; border-bottom: 2px solid rgba(67, 97, 238, 0.15) !important; box-shadow: 0 4px 20px rgba(26, 41, 66, 0.08) !important; } /* Chat bubble (design-system) */ [data-theme="light"] .chat-bubble--ai { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; } /* ==================== APTIS MODULE (Light Theme) ==================== */ /* Exam timer bar */ [data-theme="light"] .exam-timer { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid rgba(67, 97, 238, 0.1) !important; box-shadow: 0 2px 8px rgba(26, 41, 66, 0.06); } /* Mock header */ [data-theme="light"] .mock-header { background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,247,255,0.98)) !important; border-bottom: 2px solid rgba(67, 97, 238, 0.15) !important; box-shadow: 0 4px 20px rgba(26, 41, 66, 0.06) !important; } [data-theme="light"] .mock-header__skill { color: var(--text-primary) !important; } [data-theme="light"] .mock-header__timer { color: #4361EE !important; } /* Mock intro instructions */ [data-theme="light"] .mock-intro__instructions { background: rgba(67, 97, 238, 0.03) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Exam panel */ [data-theme="light"] .exam-panel { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Question blocks */ [data-theme="light"] .question-block { background: rgba(255, 255, 255, 0.5) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Result bar track */ [data-theme="light"] .result-bar { background: rgba(67, 97, 238, 0.1) !important; } /* Email context */ [data-theme="light"] .email-context { background: rgba(67, 97, 238, 0.03) !important; border-left: 3px solid var(--primary) !important; } /* MCQ option */ [data-theme="light"] .mcq-option { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } [data-theme="light"] .mcq-option:hover { background: rgba(67, 97, 238, 0.05) !important; } [data-theme="light"] .mcq-option.selected { background: rgba(67, 97, 238, 0.08) !important; border-color: #4361EE !important; } /* Sortable items */ [data-theme="light"] .sortable-item { background: rgba(255, 255, 255, 0.6) !important; border: 2px solid rgba(67, 97, 238, 0.1) !important; } /* Aptis secondary button */ [data-theme="light"] .btn-aptis-secondary { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(67, 97, 238, 0.12) !important; } /* Q-input */ [data-theme="light"] .q-input { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(67, 97, 238, 0.12) !important; color: var(--text-primary) !important; } /* Paragraph box */ [data-theme="light"] .paragraph-box { background: rgba(255, 255, 255, 0.5) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Matching select */ [data-theme="light"] .matching-select { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(67, 97, 238, 0.12) !important; color: var(--text-primary) !important; } /* Aptis skill cards */ [data-theme="light"] .aptis-skill-card { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Exam items */ [data-theme="light"] .exam-item { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Sort button */ [data-theme="light"] .sort-btn { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; } /* Cost confirm popup */ [data-theme="light"] .aptis-cost-popup { background: rgba(255, 255, 255, 0.98) !important; } /* ==================== WORKSHOP / GRAMMAR (Light Theme) ==================== */ /* Workshop cards */ [data-theme="light"] .ws-card { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.1); box-shadow: var(--shadow-sm); } [data-theme="light"] .ws-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } /* Grammar topic grid */ [data-theme="light"] .g-topic { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; } [data-theme="light"] .g-topic:hover { border-color: var(--primary) !important; box-shadow: 0 4px 15px rgba(67, 97, 238, 0.12); } /* Lesson block */ [data-theme="light"] .lesson-block { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Formula box */ [data-theme="light"] .formula-box { background: rgba(67, 97, 238, 0.06) !important; border-left: 3px solid var(--primary) !important; color: var(--text-primary) !important; } /* Example rows */ [data-theme="light"] .example-row { border-bottom: 1px solid rgba(67, 97, 238, 0.08) !important; } [data-theme="light"] .example-row .en { color: var(--text-primary) !important; } [data-theme="light"] .example-row .vi { color: var(--text-secondary) !important; } /* Signal tags */ [data-theme="light"] .signal-tag { background: rgba(67, 97, 238, 0.08) !important; color: var(--primary) !important; } /* Mistake card */ [data-theme="light"] .mistake-card { background: rgba(231, 76, 60, 0.06) !important; color: var(--text-primary) !important; border: 1px solid rgba(231, 76, 60, 0.1); } /* Mini quiz box */ [data-theme="light"] .mini-quiz-box { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.12) !important; } /* Quiz option buttons */ [data-theme="light"] .quiz-opt { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.12) !important; color: var(--text-primary) !important; } [data-theme="light"] .quiz-opt:hover:not(:disabled) { border-color: var(--primary) !important; background: rgba(67, 97, 238, 0.06) !important; } [data-theme="light"] .quiz-opt.selected { background: rgba(67, 97, 238, 0.1) !important; border-color: var(--primary) !important; } [data-theme="light"] .quiz-opt.correct { background: rgba(46, 204, 113, 0.12) !important; border-color: #2ecc71 !important; color: #1a8a4a !important; } [data-theme="light"] .quiz-opt.wrong { background: rgba(231, 76, 60, 0.12) !important; border-color: #e74c3c !important; color: #c0392b !important; } /* Workshop input */ [data-theme="light"] .ws-input { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.12) !important; color: var(--text-primary) !important; } [data-theme="light"] .ws-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1) !important; } /* Inline blank (fill-in) */ [data-theme="light"] .inline-blank { border-color: rgba(67, 97, 238, 0.3) !important; background: rgba(67, 97, 238, 0.04) !important; color: var(--text-primary) !important; } [data-theme="light"] .inline-blank:focus { border-color: var(--primary) !important; background: rgba(67, 97, 238, 0.08) !important; } /* Translation question block */ [data-theme="light"] .trans-q { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } /* Vocabulary cards */ [data-theme="light"] .v-card { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.08) !important; } [data-theme="light"] .v-card:hover { border-color: var(--primary) !important; } /* Vocab modal */ [data-theme="light"] #vocab-modal-content { background: rgba(255, 255, 255, 0.98) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; } /* Back button */ [data-theme="light"] .back-btn { color: var(--text-secondary) !important; } [data-theme="light"] .back-btn:hover { color: var(--text-primary) !important; } /* Level tag */ [data-theme="light"] .level-tag { background: rgba(67, 97, 238, 0.1) !important; color: var(--primary) !important; } /* Stat pills */ [data-theme="light"] .stat-pill--new { background: rgba(52, 152, 219, 0.1) !important; } [data-theme="light"] .stat-pill--learn { background: rgba(243, 156, 18, 0.1) !important; } [data-theme="light"] .stat-pill--master { background: rgba(46, 204, 113, 0.1) !important; } /* Assessment banner */ [data-theme="light"] .assessment-banner { background: linear-gradient(135deg, rgba(243, 156, 18, 0.06), rgba(231, 76, 60, 0.06)) !important; border: 1px solid rgba(243, 156, 18, 0.2) !important; color: var(--text-primary) !important; } /* Vocab practice area */ [data-theme="light"] .vocab-practice-area { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(67, 97, 238, 0.1) !important; }