/** * Light Theme Variables * * Este arquivo define as variáveis CSS para o modo claro. * Para ativar: adicionar data-theme="light" no elemento * ou adicionar a classe .light-mode no */ :root[data-theme="light"], body.light-mode { /* brand - mantém cores vibrantes, levemente ajustadas para contraste */ --brand-primary: #5B8FE0; --brand-primary-strong: #3A6FC0; --brand-primary-weak: #7BA8F0; /* background layers - tons claros */ --bg-base: #F5F7FA; --bg-surface: #FFFFFF; --bg-surface-2: #F0F2F5; --bg-overlay: #FFFFFFEE; /* text - tons escuros para contraste */ --text-primary: #1A1D24; --text-secondary: #4A5568; --text-muted: #718096; --text-inverse: #FFFFFF; /* stroke / borders - tons suaves */ --stroke-soft: #E2E8F0; --stroke-strong: #CBD5E0; --focus-color: #5B8FE0; /* semantic - cores ajustadas para melhor contraste em fundo claro */ --success: #38A169; --warning: #D69E2E; --danger: #E53E3E; --info: #3182CE; /* shadows - sombras mais sutis para light mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04); /* focus ring para light mode */ --focus-ring-color: rgba(91, 143, 224, 0.4); /* ===== Variáveis específicas do módulo cursos ===== */ /* Cards e containers */ --card-bg: #FFFFFF; --card-bg-hover: #F8FAFC; --card-border: rgba(0, 0, 0, 0.08); --card-border-hover: rgba(0, 0, 0, 0.12); --card-active-bg: rgba(102, 126, 234, 0.08); /* Modal */ --modal-bg: linear-gradient(135deg, #FFFFFF 0%, #F7FAFC 100%); --modal-overlay: rgba(0, 0, 0, 0.5); --modal-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --modal-header-text: #FFFFFF; --modal-border: rgba(0, 0, 0, 0.08); --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Memory game */ --memory-card-back-bg: linear-gradient(135deg, #805ad5 0%, #9f7aea 100%); --memory-card-front-bg: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%); --memory-card-matched-bg: linear-gradient(135deg, #48bb78 0%, #38a169 100%); --memory-timer-bg: rgba(128, 90, 213, 0.12); --memory-cheer-color: #D69E2E; /* Course tabs */ --course-tab-bg: rgba(0, 0, 0, 0.04); --course-tab-border: rgba(0, 0, 0, 0.12); --course-tab-text: #4A5568; /* Loading overlay */ --loading-overlay-bg: rgba(255, 255, 255, 0.8); /* Ditado */ --ditado-input-bg: #FFFFFF; --ditado-input-border: #CBD5E0; --ditado-input-text: #1A1D24; /* Kimchi modal */ --kimchi-input-bg: #FFFFFF; --kimchi-input-border: #E2E8F0; /* ===== Nav Header (light mode) ===== */ --nav-bg: rgba(255, 255, 255, 0.85); --nav-text: #1A1D24; --nav-border: rgba(0, 0, 0, 0.06); --nav-hover-bg: rgba(0, 0, 0, 0.06); --nav-avatar-bg: rgba(0, 0, 0, 0.06); --nav-avatar-ring: rgba(0, 0, 0, 0.08); --nav-avatar-ring-hover: rgba(0, 0, 0, 0.2); --nav-focus-ring: rgba(91, 143, 224, 0.6); --nav-panel-bg: linear-gradient(150deg, #FFFFFF, #F7FAFC); --nav-panel-border: rgba(0, 0, 0, 0.1); --nav-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); --nav-panel-text: #1A1D24; --nav-panel-text-secondary: #4A5568; --nav-panel-divider: rgba(0, 0, 0, 0.08); --nav-item-hover-bg: rgba(0, 0, 0, 0.06); --nav-logout-color: #E53E3E; --nav-logout-color-hover: #C53030; --nav-logout-bg-hover: rgba(229, 62, 62, 0.12); --nav-overlay-bg: rgba(0, 0, 0, 0.3); --nav-loading-backdrop: rgba(255, 255, 255, 0.8); --nav-spinner-track: rgba(0, 0, 0, 0.1); --nav-spinner-fill: #667eea; --nav-loading-text: #1A1D24; /* Progress bars */ --progress-bg: #E2E8F0; --progress-fill: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradients principais (mantidos para consistência de marca) */ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-success: linear-gradient(135deg, #48bb78 0%, #38a169 100%); --gradient-danger: linear-gradient(135deg, #fc8181 0%, #e53e3e 100%); /* Scrollbar */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(0, 0, 0, 0.2); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3); /* Activity icons */ --activity-icon-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --module-icon-gradient: linear-gradient(135deg, #718096 0%, #4A5568 100%); /* Vocab cards - inversão para light mode */ --vocab-card-bg: #FFFFFF; --vocab-card-text: #1A1D24; --vocab-card-border: #E2E8F0; /* Audio player */ --audio-player-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%); --audio-player-border: rgba(102, 126, 234, 0.15); /* Stat items */ --stat-item-bg: rgba(0, 0, 0, 0.02); --stat-item-bg-hover: rgba(0, 0, 0, 0.04); /* Form elements */ --input-bg: #FFFFFF; --input-border: #E2E8F0; --input-text: #1A1D24; --input-placeholder: #A0AEC0; /* Status colors for tasks */ --status-success-bg: linear-gradient(135deg, #C6F6D5 0%, #9AE6B4 100%); --status-success-border: #48bb78; --status-success-text: #22543D; --status-warning-bg: linear-gradient(135deg, #FEFCBF 0%, #FAF089 100%); --status-warning-border: #ECC94B; --status-warning-text: #744210; --status-info-bg: linear-gradient(135deg, #BEE3F8 0%, #90CDF4 100%); --status-info-border: #4299E1; --status-info-text: #2A4365; --status-error-bg: linear-gradient(135deg, #FED7D7 0%, #FEB2B2 100%); --status-error-border: #FC8181; --status-error-text: #742A2A; /* Spinner */ --spinner-track: rgba(0, 0, 0, 0.1); --spinner-fill: #667eea; /* Toggle/Favorite buttons */ --toggle-btn-bg: rgba(0, 0, 0, 0.04); --toggle-btn-bg-hover: rgba(0, 0, 0, 0.08); --toggle-btn-color: rgba(0, 0, 0, 0.6); --toggle-btn-color-hover: rgba(0, 0, 0, 0.8); } /* ===== Overrides específicos para light mode ===== */ body.light-mode, :root[data-theme="light"] body { background-color: var(--bg-base); color: var(--text-primary); } /* Cards */ body.light-mode .item-card, body.light-mode .about-course, body.light-mode .overall-progress-modern, :root[data-theme="light"] .item-card, :root[data-theme="light"] .about-course, :root[data-theme="light"] .overall-progress-modern { background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--shadow-sm); } body.light-mode .item-card:hover, :root[data-theme="light"] .item-card:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); box-shadow: var(--shadow-md); } body.light-mode .item-title, :root[data-theme="light"] .item-title { color: var(--text-primary); } /* Group card expanded border */ body.light-mode .group-card.expanded .group-header, :root[data-theme="light"] .group-card.expanded .group-header { border-bottom-color: var(--stroke-soft); } /* Activity items */ body.light-mode .activities-list .activity-item.active, body.light-mode .activities-list .activity-item:hover, :root[data-theme="light"] .activities-list .activity-item.active, :root[data-theme="light"] .activities-list .activity-item:hover { background: rgba(102, 126, 234, 0.08); } /* Toggle all button */ body.light-mode .toggle-all-btn, :root[data-theme="light"] .toggle-all-btn { color: var(--text-secondary); } /* Module icon */ body.light-mode .module-icon, :root[data-theme="light"] .module-icon { background: var(--module-icon-gradient); } /* Progress title and stats */ body.light-mode .progress-title, :root[data-theme="light"] .progress-title { color: var(--text-primary); } body.light-mode .stat-item, :root[data-theme="light"] .stat-item { background: var(--stat-item-bg); } body.light-mode .stat-item:hover, :root[data-theme="light"] .stat-item:hover { background: var(--stat-item-bg-hover); } body.light-mode .stat-value, :root[data-theme="light"] .stat-value { color: var(--text-primary); } body.light-mode .stat-label, :root[data-theme="light"] .stat-label { color: var(--text-muted); } /* Progress bar */ body.light-mode .progress-bar-modern, :root[data-theme="light"] .progress-bar-modern { background: var(--progress-bg); } /* Modal */ body.light-mode .modal-content, :root[data-theme="light"] .modal-content { background: linear-gradient(135deg, #FFFFFF 0%, #F7FAFC 100%); border-color: var(--card-border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); } body.light-mode .modal, :root[data-theme="light"] .modal { background-color: rgba(0, 0, 0, 0.5); border-radius: 22px; } /* Lesson contents container - ajustes para desktop */ @media (min-width: 1024px) { body.light-mode .lesson-contents, :root[data-theme="light"] .lesson-contents { background: var(--bg-base); border-radius: 24px; padding-left: 20px; } body.light-mode #course-modal .modal-content, :root[data-theme="light"] #course-modal .modal-content { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); border: 1px solid var(--card-border); } } /* Modal body text */ body.light-mode .modal-body, body.light-mode .lesson-body, :root[data-theme="light"] .modal-body, :root[data-theme="light"] .lesson-body { color: var(--text-primary); } /* Form elements in modal - higher specificity to override #course-modal styles */ body.light-mode #course-modal .task-submission-form label, :root[data-theme="light"] #course-modal .task-submission-form label { color: var(--text-primary); } body.light-mode #course-modal .task-submission-form textarea, :root[data-theme="light"] #course-modal .task-submission-form textarea { background: #F0F2F5; border: 1px solid #CBD5E0; color: var(--input-text); } body.light-mode .task-submission-form textarea::placeholder, :root[data-theme="light"] .task-submission-form textarea::placeholder { color: var(--text-muted); } body.light-mode .task-submission-form input[type="file"], :root[data-theme="light"] .task-submission-form input[type="file"] { color: var(--text-primary); } body.light-mode .task-submission-form .file-name-display, :root[data-theme="light"] .task-submission-form .file-name-display { color: var(--text-secondary); } body.light-mode .task-submission-form .audio-controls, :root[data-theme="light"] .task-submission-form .audio-controls { background: var(--bg-surface-2); border-radius: 12px; } /* Task status info boxes - ajustar para light mode */ body.light-mode #course-modal .task-status-info, :root[data-theme="light"] #course-modal .task-status-info { color: var(--text-primary); } /* Task detail content - títulos com inline style precisam de !important */ body.light-mode #course-modal .task-detail-content h4, body.light-mode #course-modal .task-instructions h4, body.light-mode #course-modal .task-description h4, body.light-mode #course-modal .task-content h4, body.light-mode #course-modal .task-user-submission h4, body.light-mode #course-modal .task-feedback h4, :root[data-theme="light"] #course-modal .task-detail-content h4, :root[data-theme="light"] #course-modal .task-instructions h4, :root[data-theme="light"] #course-modal .task-description h4, :root[data-theme="light"] #course-modal .task-content h4, :root[data-theme="light"] #course-modal .task-user-submission h4, :root[data-theme="light"] #course-modal .task-feedback h4 { color: var(--text-primary) !important; } /* Task instructions section - conteúdo */ body.light-mode #course-modal .task-instructions, body.light-mode #course-modal .task-instructions p, body.light-mode #course-modal .task-instructions strong, body.light-mode #course-modal .task-instructions b, :root[data-theme="light"] #course-modal .task-instructions, :root[data-theme="light"] #course-modal .task-instructions p, :root[data-theme="light"] #course-modal .task-instructions strong, :root[data-theme="light"] #course-modal .task-instructions b { color: var(--text-primary); } /* Modal body - all text elements for tasks */ body.light-mode #course-modal .modal-body h3, body.light-mode #course-modal .modal-body h4, body.light-mode #course-modal .modal-body strong, body.light-mode #course-modal .modal-body b, :root[data-theme="light"] #course-modal .modal-body h3, :root[data-theme="light"] #course-modal .modal-body h4, :root[data-theme="light"] #course-modal .modal-body strong, :root[data-theme="light"] #course-modal .modal-body b { color: var(--text-primary); } /* Lesson body - textos gerais dentro do modal */ body.light-mode .lesson-body p, body.light-mode .lesson-body h1, body.light-mode .lesson-body h2, body.light-mode .lesson-body h3, body.light-mode .lesson-body h4, body.light-mode .lesson-body li, body.light-mode .lesson-body span, :root[data-theme="light"] .lesson-body p, :root[data-theme="light"] .lesson-body h1, :root[data-theme="light"] .lesson-body h2, :root[data-theme="light"] .lesson-body h3, :root[data-theme="light"] .lesson-body h4, :root[data-theme="light"] .lesson-body li, :root[data-theme="light"] .lesson-body span { color: var(--text-primary); } body.light-mode .lesson-body a, :root[data-theme="light"] .lesson-body a { color: var(--brand-primary-strong); } /* Ditado result */ body.light-mode .ditado-result, :root[data-theme="light"] .ditado-result { color: var(--text-primary); } /* Memory game timer */ body.light-mode .memory-timer, :root[data-theme="light"] .memory-timer { color: var(--text-primary); } /* Complete lesson wrapper */ body.light-mode .complete-lesson-wrapper, :root[data-theme="light"] .complete-lesson-wrapper { color: var(--text-primary); } /* Close button in modal - needs to stay white on gradient header */ body.light-mode .modal-header .close, :root[data-theme="light"] .modal-header .close { color: white; } /* Favorite toggle */ body.light-mode .favorite-toggle, :root[data-theme="light"] .favorite-toggle { background: var(--toggle-btn-bg); color: var(--toggle-btn-color); } body.light-mode .favorite-toggle:hover, :root[data-theme="light"] .favorite-toggle:hover { background: var(--toggle-btn-bg-hover); color: var(--toggle-btn-color-hover); } /* Focus mode button */ body.light-mode .focus-mode-button, :root[data-theme="light"] .focus-mode-button { color: rgba(255, 255, 255, 0.8); } /* Scrollbars */ body.light-mode .course-contents::-webkit-scrollbar-thumb, body.light-mode .lesson-contents::-webkit-scrollbar-thumb, body.light-mode .modal-body::-webkit-scrollbar-thumb, :root[data-theme="light"] .course-contents::-webkit-scrollbar-thumb, :root[data-theme="light"] .lesson-contents::-webkit-scrollbar-thumb, :root[data-theme="light"] .modal-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } body.light-mode .course-contents, body.light-mode .lesson-contents, body.light-mode .modal-body, :root[data-theme="light"] .course-contents, :root[data-theme="light"] .lesson-contents, :root[data-theme="light"] .modal-body { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* Audio player */ body.light-mode .custom-audio-player, :root[data-theme="light"] .custom-audio-player { background: var(--audio-player-bg); border-color: var(--audio-player-border); } /* Spinner */ body.light-mode .spinner, :root[data-theme="light"] .spinner { border-color: var(--spinner-track); border-top-color: var(--spinner-fill); } /* Material list */ body.light-mode .material-row, :root[data-theme="light"] .material-row { border-bottom-color: var(--stroke-soft); } /* Lesson placeholder */ body.light-mode .lesson-placeholder p, :root[data-theme="light"] .lesson-placeholder p { color: var(--text-muted); } /* Kimchi modal */ body.light-mode #kimchiAddModal.kimchi-inline, :root[data-theme="light"] #kimchiAddModal.kimchi-inline { border-radius: 0; } body.light-mode #kimchiAddModal #kimchiWordsList, body.light-mode .kimchi-inline #kimchiWordsList, :root[data-theme="light"] #kimchiAddModal #kimchiWordsList, :root[data-theme="light"] .kimchi-inline #kimchiWordsList { background: var(--bg-surface-2); border-color: var(--stroke-soft); } body.light-mode #kimchiAddModal #kimchiWordsList label, body.light-mode .kimchi-inline #kimchiWordsList label, :root[data-theme="light"] #kimchiAddModal #kimchiWordsList label, :root[data-theme="light"] .kimchi-inline #kimchiWordsList label { border-bottom-color: var(--stroke-soft); } body.light-mode #kimchiAddModal #kimchiDeckSelect, body.light-mode #kimchiAddModal #newDeckName, body.light-mode .kimchi-inline #kimchiDeckSelect, body.light-mode .kimchi-inline #newDeckName, :root[data-theme="light"] #kimchiAddModal #kimchiDeckSelect, :root[data-theme="light"] #kimchiAddModal #newDeckName, :root[data-theme="light"] .kimchi-inline #kimchiDeckSelect, :root[data-theme="light"] .kimchi-inline #newDeckName { background: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } /* Ditado input */ body.light-mode .ditado-input, :root[data-theme="light"] .ditado-input { background: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } /* Ditado result */ body.light-mode .ditado-result h3, body.light-mode .ditado-result h4, :root[data-theme="light"] .ditado-result h3, :root[data-theme="light"] .ditado-result h4 { color: var(--text-primary) !important; } /* Ditado audio buttons (play / slow motion) */ body.light-mode .ditado-audio, :root[data-theme="light"] .ditado-audio { color: var(--text-primary); } body.light-mode .ditado-audio:hover, :root[data-theme="light"] .ditado-audio:hover { background: rgba(0, 0, 0, 0.06); } body.light-mode .ditado-audio.playing, :root[data-theme="light"] .ditado-audio.playing { color: #FFFFFF; } /* Escrita canvas */ body.light-mode #escrita-container #canvas1, :root[data-theme="light"] #escrita-container #canvas1 { background: #FFFFFF; border-color: var(--stroke-strong); } /* Memory game */ body.light-mode .memory-timer, :root[data-theme="light"] .memory-timer { background: rgba(128, 90, 213, 0.12); color: var(--text-primary); } body.light-mode .memory-restart, :root[data-theme="light"] .memory-restart { background: var(--toggle-btn-bg); border-color: var(--stroke-soft); color: var(--text-primary); } body.light-mode .memory-restart:hover, :root[data-theme="light"] .memory-restart:hover { background: var(--toggle-btn-bg-hover); } body.light-mode .memory-prompt, :root[data-theme="light"] .memory-prompt { color: var(--text-secondary); } body.light-mode .memory-card-front, :root[data-theme="light"] .memory-card-front { background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%); border-color: var(--stroke-soft); } body.light-mode .memory-card-front .memory-text, :root[data-theme="light"] .memory-card-front .memory-text { color: var(--text-primary); } body.light-mode .memory-completion .memory-final-time, :root[data-theme="light"] .memory-completion .memory-final-time { color: var(--text-primary); } /* Course tabs on index */ body.light-mode .course-tab, :root[data-theme="light"] .course-tab { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: var(--text-secondary); } body.light-mode .course-tab.active, :root[data-theme="light"] .course-tab.active { background: var(--gradient-primary); color: white; border-color: transparent; } /* Course card */ body.light-mode .course-card, :root[data-theme="light"] .course-card { background: var(--card-bg); border-color: var(--card-border); } body.light-mode .course-card:hover, :root[data-theme="light"] .course-card:hover { background: var(--card-bg-hover); } body.light-mode .course-title, :root[data-theme="light"] .course-title { color: var(--text-primary); } /* Loading overlay */ body.light-mode .loading-overlay, :root[data-theme="light"] .loading-overlay { background: rgba(255, 255, 255, 0.8); } body.light-mode .loading-text, :root[data-theme="light"] .loading-text { color: var(--text-primary); } /* Quiz styles */ body.light-mode .quiz-header, body.light-mode .question-card, :root[data-theme="light"] .quiz-header, :root[data-theme="light"] .question-card { background: var(--card-bg); border-color: var(--card-border); } body.light-mode .quiz-subtitle, :root[data-theme="light"] .quiz-subtitle { color: var(--text-secondary); } body.light-mode .question-text, :root[data-theme="light"] .question-text { color: var(--text-primary); } /* Filter buttons */ body.light-mode .filter-btn, :root[data-theme="light"] .filter-btn { background-color: var(--bg-surface-2); border-color: var(--stroke-soft); color: var(--text-secondary); } body.light-mode .filter-btn:hover, :root[data-theme="light"] .filter-btn:hover { background-color: var(--bg-surface); border-color: var(--stroke-strong); } body.light-mode .filter-btn.active, :root[data-theme="light"] .filter-btn.active { background: var(--gradient-primary); color: white; } body.light-mode .filter-buttons-section, :root[data-theme="light"] .filter-buttons-section { background: var(--bg-surface-2); } /* Vocab card counter */ body.light-mode .vocab-progress .card-counter, :root[data-theme="light"] .vocab-progress .card-counter { color: var(--text-muted); } /* ======================================== FASE 4: COMPONENTES ESPECÍFICOS ======================================== */ /* Vocab cards - cartão cinza claro com borda, fontes/botões igual modo escuro */ body.light-mode .vocab-card, :root[data-theme="light"] .vocab-card { background: #F0F2F5; color: #000000; box-shadow: var(--shadow-md); border: 1px solid #E2E8F0; } body.light-mode .vocab-card .vocab-front, body.light-mode .vocab-card .vocab-back, :root[data-theme="light"] .vocab-card .vocab-front, :root[data-theme="light"] .vocab-card .vocab-back { color: #000000; } body.light-mode .vocab-card .vocab-korean, body.light-mode .vocab-card .vocab-translation, body.light-mode .vocab-card .frase-word, :root[data-theme="light"] .vocab-card .vocab-korean, :root[data-theme="light"] .vocab-card .vocab-translation, :root[data-theme="light"] .vocab-card .frase-word { color: #000000; } /* Frase tooltip - manter igual modo escuro */ body.light-mode .frase-tooltip, :root[data-theme="light"] .frase-tooltip { background: #333; color: #fff; box-shadow: var(--shadow-md); } body.light-mode .frase-word.highlight, :root[data-theme="light"] .frase-word.highlight { background: rgba(255, 235, 59, 0.4); } /* Vocab navigation buttons */ body.light-mode .vocab-navigation .nav-btn, :root[data-theme="light"] .vocab-navigation .nav-btn { background: var(--bg-surface-2); color: var(--text-primary); border-color: var(--stroke-soft); } body.light-mode .vocab-navigation .nav-btn:hover, :root[data-theme="light"] .vocab-navigation .nav-btn:hover { background: var(--bg-surface); border-color: var(--stroke-strong); } /* Vocab speak button - manter igual modo escuro (amarelo com ícone preto) */ body.light-mode .vocab-card .speak-btn, :root[data-theme="light"] .vocab-card .speak-btn { background-color: #f1c232; color: #000000; } /* Escrita speak button - ícone escuro, ao tocar aplica gradiente roxo com ícone branco */ body.light-mode #escrita-container .speak-btn, :root[data-theme="light"] #escrita-container .speak-btn { background: rgba(0, 0, 0, 0.08); color: #1A1D24; } body.light-mode #escrita-container .speak-btn:hover, :root[data-theme="light"] #escrita-container .speak-btn:hover { background: rgba(0, 0, 0, 0.12); color: #1A1D24; } body.light-mode #escrita-container .speak-btn.playing, :root[data-theme="light"] #escrita-container .speak-btn.playing { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #FFFFFF; } /* Quiz/Provas - Answer buttons */ body.light-mode .answer-button, :root[data-theme="light"] .answer-button { background: var(--bg-surface); border-color: var(--stroke-soft); color: var(--text-primary); } body.light-mode .answer-button:hover, :root[data-theme="light"] .answer-button:hover { background: var(--bg-surface-2); border-color: var(--stroke-strong); } body.light-mode .answer-button.selected, :root[data-theme="light"] .answer-button.selected { background: var(--gradient-primary); border-color: transparent; color: #FFFFFF !important; } body.light-mode .answer-text, :root[data-theme="light"] .answer-text { color: var(--text-primary); } body.light-mode .answer-button.selected .answer-text, :root[data-theme="light"] .answer-button.selected .answer-text { color: #FFFFFF; } body.light-mode .answer-index, :root[data-theme="light"] .answer-index { background: var(--bg-surface-2); color: var(--text-primary); } body.light-mode .answer-button.selected .answer-index, :root[data-theme="light"] .answer-button.selected .answer-index { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; } /* Quiz - Fill answer input */ body.light-mode .fill-answer-container, :root[data-theme="light"] .fill-answer-container { background: var(--bg-surface); border-color: var(--card-border); } body.light-mode .fill-answer-input, :root[data-theme="light"] .fill-answer-input { background: var(--bg-surface-2); border-color: var(--stroke-soft); color: var(--text-primary); } body.light-mode .fill-answer-input:focus, :root[data-theme="light"] .fill-answer-input:focus { border-color: var(--brand-primary); background: var(--bg-surface); } body.light-mode .fill-answer-input::placeholder, :root[data-theme="light"] .fill-answer-input::placeholder { color: var(--text-muted); } body.light-mode .input-help, :root[data-theme="light"] .input-help { color: var(--text-muted); } /* Quiz - Order items (drag sort) */ body.light-mode .order-item, :root[data-theme="light"] .order-item { background: var(--bg-surface); border-color: var(--stroke-soft); } body.light-mode .order-drag-handle, :root[data-theme="light"] .order-drag-handle { background: var(--bg-surface-2); color: var(--text-secondary); } body.light-mode .order-position, :root[data-theme="light"] .order-position { color: var(--brand-primary); } body.light-mode .order-text, :root[data-theme="light"] .order-text { color: var(--text-primary); } body.light-mode .order-placeholder, :root[data-theme="light"] .order-placeholder { border-color: rgba(102, 126, 234, 0.35); background: rgba(102, 126, 234, 0.08); } body.light-mode .order-item-visual, :root[data-theme="light"] .order-item-visual { background: var(--bg-surface); border-color: var(--brand-primary); } body.light-mode .order-result-item, :root[data-theme="light"] .order-result-item { background: var(--bg-surface-2); } body.light-mode .order-result-position, :root[data-theme="light"] .order-result-position { color: var(--brand-primary); } body.light-mode .order-result-text, :root[data-theme="light"] .order-result-text { color: var(--text-primary); } body.light-mode .order-help, body.light-mode .order-empty, :root[data-theme="light"] .order-help, :root[data-theme="light"] .order-empty { color: var(--text-muted); } body.light-mode .order-empty, :root[data-theme="light"] .order-empty { background: var(--bg-surface-2); border-color: var(--stroke-soft); } /* Quiz - Audio choice */ body.light-mode .audio-choice-empty, :root[data-theme="light"] .audio-choice-empty { color: var(--text-muted); } /* Quiz results */ body.light-mode .results-container, body.light-mode .results-title, body.light-mode .result-message, :root[data-theme="light"] .results-container, :root[data-theme="light"] .results-title, :root[data-theme="light"] .result-message { color: var(--text-primary); } body.light-mode .results-percentage, :root[data-theme="light"] .results-percentage { color: var(--text-secondary); } body.light-mode .result-item, :root[data-theme="light"] .result-item { background: var(--bg-surface-2); border-color: var(--stroke-soft); } body.light-mode .result-lottie-message, :root[data-theme="light"] .result-lottie-message { background: var(--bg-surface-2); border-color: var(--stroke-soft); color: var(--text-primary); } /* Quiz modal */ body.light-mode #quiz-modal .modal-content, :root[data-theme="light"] #quiz-modal .modal-content { background: var(--modal-bg) !important; border-color: var(--modal-border) !important; } body.light-mode #quiz-modal .modal-body, :root[data-theme="light"] #quiz-modal .modal-body { color: var(--text-primary) !important; } body.light-mode #quiz-modal .question-text, :root[data-theme="light"] #quiz-modal .question-text { color: var(--text-primary) !important; } body.light-mode #quiz-modal .answer-button, :root[data-theme="light"] #quiz-modal .answer-button { background: var(--bg-surface) !important; border-color: var(--stroke-soft) !important; color: var(--text-primary) !important; } body.light-mode #quiz-modal .answer-button:hover, :root[data-theme="light"] #quiz-modal .answer-button:hover { background: var(--bg-surface-2) !important; border-color: var(--brand-primary) !important; } body.light-mode #quiz-modal .answer-button.selected, :root[data-theme="light"] #quiz-modal .answer-button.selected { background: var(--gradient-primary) !important; color: #FFFFFF !important; } body.light-mode #quiz-modal .results-percentage, :root[data-theme="light"] #quiz-modal .results-percentage { color: var(--text-secondary) !important; } /* Drag words quiz */ body.light-mode .drag-blank, :root[data-theme="light"] .drag-blank { border-color: var(--stroke-soft); background: var(--bg-surface-2); color: var(--text-secondary); } body.light-mode .drag-blank.filled, :root[data-theme="light"] .drag-blank.filled { border-color: rgba(102, 126, 234, 0.5); background: rgba(102, 126, 234, 0.12); color: var(--text-primary); } /* Drag word - ao arrastar deve ter fonte escura */ body.light-mode .drag-word, :root[data-theme="light"] .drag-word { color: #FFFFFF; } body.light-mode .drag-word-clone, body.light-mode .drag-word--dragging, :root[data-theme="light"] .drag-word-clone, :root[data-theme="light"] .drag-word--dragging { color: #FFFFFF; } body.light-mode .drag-blank .drag-word, :root[data-theme="light"] .drag-blank .drag-word { color: var(--text-primary); } body.light-mode .drag-words-empty, :root[data-theme="light"] .drag-words-empty { color: var(--text-muted); border-color: var(--stroke-soft); background: var(--bg-surface-2); } body.light-mode .drag-result-label, :root[data-theme="light"] .drag-result-label { color: var(--text-secondary); } body.light-mode .drag-no-answer, :root[data-theme="light"] .drag-no-answer { color: var(--text-muted); } body.light-mode .drag-result-blank, :root[data-theme="light"] .drag-result-blank { border-color: var(--stroke-soft); } /* Drag reset button - ícone escuro */ body.light-mode .drag-reset-button, body.light-mode .mark-reset-button, :root[data-theme="light"] .drag-reset-button, :root[data-theme="light"] .mark-reset-button { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.12); } body.light-mode .drag-reset-button .material-icons, body.light-mode .mark-reset-button .material-icons, :root[data-theme="light"] .drag-reset-button .material-icons, :root[data-theme="light"] .mark-reset-button .material-icons { color: var(--text-primary); } body.light-mode .drag-reset-button:hover, body.light-mode .mark-reset-button:hover, :root[data-theme="light"] .drag-reset-button:hover, :root[data-theme="light"] .mark-reset-button:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.18); } /* Mark words quiz */ body.light-mode .mark-word:hover, :root[data-theme="light"] .mark-word:hover { background: rgba(102, 126, 234, 0.12); border-color: rgba(102, 126, 234, 0.25); } /* Pronunciation tool */ body.light-mode .pronunciation-tool-modern, :root[data-theme="light"] .pronunciation-tool-modern { background: var(--bg-surface); border-color: var(--card-border); } body.light-mode .pronunciation-word, body.light-mode .pronunciation-romanization, :root[data-theme="light"] .pronunciation-word, :root[data-theme="light"] .pronunciation-romanization { color: var(--text-primary); } body.light-mode .pronunciation-meaning, :root[data-theme="light"] .pronunciation-meaning { color: var(--text-secondary); } /* Escrita (Writing) - canvas com fundo branco e traço escuro */ body.light-mode #escrita-container #canvas1, :root[data-theme="light"] #escrita-container #canvas1 { background: #FFFFFF; border: 2px solid var(--stroke-strong); } /* Canvas effect colors - manter verde/vermelho igual modo escuro */ body.light-mode #escrita-container #canvas1.reffect, :root[data-theme="light"] #escrita-container #canvas1.reffect { border-color: #48bb78; box-shadow: 0 0 20px rgba(72, 187, 120, 0.4); } body.light-mode #escrita-container #canvas1.weffect, :root[data-theme="light"] #escrita-container #canvas1.weffect { border-color: #f56565; box-shadow: 0 0 20px rgba(245, 101, 101, 0.4); } body.light-mode #escrita-container #palavra, :root[data-theme="light"] #escrita-container #palavra { color: var(--text-primary); } body.light-mode .escrita-completion, :root[data-theme="light"] .escrita-completion { color: var(--text-primary); } body.light-mode .escrita-completion .final-title, :root[data-theme="light"] .escrita-completion .final-title { color: var(--text-primary); } /* Hangul write in quiz (provas) */ body.light-mode .hangul-write-container, :root[data-theme="light"] .hangul-write-container { color: var(--text-primary); } body.light-mode .hangul-word, body.light-mode .hangul-definition, :root[data-theme="light"] .hangul-word, :root[data-theme="light"] .hangul-definition { color: var(--text-primary); } body.light-mode .hangul-canvas, :root[data-theme="light"] .hangul-canvas { background: #FFFFFF; border-color: var(--stroke-strong); } body.light-mode .hangul-suggestions, :root[data-theme="light"] .hangul-suggestions { background: var(--bg-surface); border: 1px solid var(--stroke-soft); } body.light-mode .hangul-suggestions li:hover, :root[data-theme="light"] .hangul-suggestions li:hover { background: var(--bg-surface-2); } /* Loading in provas */ body.light-mode .loading, :root[data-theme="light"] .loading { color: var(--text-secondary); } body.light-mode .loading-spinner, :root[data-theme="light"] .loading-spinner { border-color: var(--spinner-track); border-left-color: var(--spinner-fill); } /* Item card on provas list */ body.light-mode .items-list .item-card, :root[data-theme="light"] .items-list .item-card { background: var(--card-bg); border-color: var(--card-border); } body.light-mode .items-list .item-card:hover, :root[data-theme="light"] .items-list .item-card:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); } body.light-mode .items-list .item-title, :root[data-theme="light"] .items-list .item-title { color: var(--text-primary); } body.light-mode .items-list .status-icon, :root[data-theme="light"] .items-list .status-icon { color: var(--text-muted); } /* Modal backdrop and content in provas */ body.light-mode .modal-backdrop, :root[data-theme="light"] .modal-backdrop { background: rgba(0, 0, 0, 0.6); } body.light-mode .custom-modal .modal-content, :root[data-theme="light"] .custom-modal .modal-content { background: var(--modal-bg); border-color: var(--modal-border); } body.light-mode .custom-modal .modal-content h3, body.light-mode .custom-modal .modal-content p, :root[data-theme="light"] .custom-modal .modal-content h3, :root[data-theme="light"] .custom-modal .modal-content p { color: var(--text-primary); } /* Ajustes de layout para light mode */ body.light-mode .lesson-contents, :root[data-theme="light"] .lesson-contents { padding-left: 0; } body.light-mode #course-modal .modal-content, :root[data-theme="light"] #course-modal .modal-content { box-shadow: none; } /* Module icon - número com cor clara */ body.light-mode .module-icon, :root[data-theme="light"] .module-icon { color: #FFFFFF; } /* Progress pizza - área não concluída com tom cinza */ body.light-mode .progress-pizza, :root[data-theme="light"] .progress-pizza { background: conic-gradient( #d4cc87 0deg, #d2ad3d var(--progress), rgba(0, 0, 0, 0.15) var(--progress) ); } /* Pronunciation tool - remover fundo */ body.light-mode .pronunciation-tool-modern, :root[data-theme="light"] .pronunciation-tool-modern { background: transparent !important; border: none !important; } /* Pronunciation buttons (Gravar/Parar/Concluído) - fonte e ícone claros */ body.light-mode .pronunciation-tool-modern .btn-record, body.light-mode .pronunciation-tool-modern .btn-record .btn-text, body.light-mode .pronunciation-tool-modern .btn-record .btn-icon, :root[data-theme="light"] .pronunciation-tool-modern .btn-record, :root[data-theme="light"] .pronunciation-tool-modern .btn-record .btn-text, :root[data-theme="light"] .pronunciation-tool-modern .btn-record .btn-icon { color: #FFFFFF !important; } body.light-mode .pronunciation-tool-modern .btn-record svg, :root[data-theme="light"] .pronunciation-tool-modern .btn-record svg { fill: #FFFFFF !important; } /* Korean sentence clickable phrase - remover hover (light mode e dark mode) */ .korean-sentence.clickable-phrase:hover, body.light-mode .korean-sentence.clickable-phrase:hover, :root[data-theme="light"] .korean-sentence.clickable-phrase:hover, :root[data-theme="dark"] .korean-sentence.clickable-phrase:hover, body:not(.light-mode) .korean-sentence.clickable-phrase:hover { transform: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; border-color: #e2e8f0 !important; } /* ===== Quiz Vocabulário - Light Mode ===== */ body.light-mode .contenthan, :root[data-theme="light"] .contenthan { color: var(--text-primary); } /* Área da pergunta/informação */ body.light-mode .informacao, :root[data-theme="light"] .informacao { background: var(--bg-surface); border-color: var(--card-border); color: var(--text-primary); } /* Botões de escolha */ body.light-mode .btnchoice, :root[data-theme="light"] .btnchoice { background: var(--bg-surface); border: 2px solid var(--card-border); color: var(--text-primary); } body.light-mode .btnchoice:hover:not(.disabled-button):not(.reffect):not(.weffect), :root[data-theme="light"] .btnchoice:hover:not(.disabled-button):not(.reffect):not(.weffect) { border-color: #667eea; background: rgba(102, 126, 234, 0.08); } /* Mensagem de resultado */ body.light-mode #mensagem, :root[data-theme="light"] #mensagem { background: var(--bg-surface); border-color: var(--card-border); color: var(--text-primary); } /* Radio buttons de nível */ body.light-mode .lbl, :root[data-theme="light"] .lbl { color: var(--text-primary); } body.light-mode .lbl.locked, :root[data-theme="light"] .lbl.locked { color: var(--text-muted); } /* Botão de info */ body.light-mode #info, :root[data-theme="light"] #info { color: var(--text-secondary); } /* Modal de informação */ body.light-mode .modalstyle .modal-content, :root[data-theme="light"] .modalstyle .modal-content { background: var(--bg-surface); color: var(--text-primary); } body.light-mode .modalstyle .modal-content p, :root[data-theme="light"] .modalstyle .modal-content p { color: var(--text-primary); } body.light-mode .modalstyle .btn2, :root[data-theme="light"] .modalstyle .btn2 { color: var(--text-secondary); } body.light-mode .modalstyle .btn2:hover, :root[data-theme="light"] .modalstyle .btn2:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-primary); } /* Speak button no quiz */ body.light-mode .speak-btn, :root[data-theme="light"] .speak-btn { color: var(--text-secondary); } body.light-mode .speak-btn:hover, :root[data-theme="light"] .speak-btn:hover { background: rgba(0, 0, 0, 0.05); } /* ===== Escreva Hangul - Light Mode ===== */ /* Palavra e definição */ body.light-mode #palavra, :root[data-theme="light"] #palavra { color: var(--text-primary); } body.light-mode .definicao, :root[data-theme="light"] .definicao { color: var(--text-secondary); } /* Canvas de escrita */ body.light-mode #canvas1, :root[data-theme="light"] #canvas1 { background: #FFFFFF; border: 2px solid var(--card-border); border-radius: 12px; } /* Botões de ação do canvas */ body.light-mode .canvas-actions button, body.light-mode .action-buttons button, :root[data-theme="light"] .canvas-actions button, :root[data-theme="light"] .action-buttons button { background: var(--bg-surface); border-color: var(--card-border); color: var(--text-primary); } body.light-mode .canvas-actions button:hover, body.light-mode .action-buttons button:hover, :root[data-theme="light"] .canvas-actions button:hover, :root[data-theme="light"] .action-buttons button:hover { background: var(--bg-surface-2); }