/*
 * Dark mode. Active when <html data-theme="dark"> (set by the theme switch; "Automático" follows the phone).
 * The component stylesheets are scoped and hard-code light colors, so these overrides use !important
 * and are grouped by role (page, cards, tinted panels, text) instead of by component.
 */
html[data-theme="dark"] {
        color-scheme: dark;
    }html[data-theme="dark"],
html[data-theme="dark"] body {
        background: #12131a !important;
        color: #e6e8f0 !important;
    }html[data-theme="dark"] a,
html[data-theme="dark"] .btn-link { color: #8fb4ff !important; }

    /* ---- web shell (sidebar layout) ---- */html[data-theme="dark"] .page,
html[data-theme="dark"] main,
html[data-theme="dark"] article.content,
html[data-theme="dark"] .content { background: #12131a !important; color: #e6e8f0 !important; }html[data-theme="dark"] .top-row { background: #1a1b24 !important; border-color: #2a2c3a !important; }

    /* ---- app shell ---- */html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-content { background: #12131a !important; }

    /* ---- plain surfaces: cards, boxes, inputs ---- */html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .scenario-card,
html[data-theme="dark"] .tutor-chat-messages,
html[data-theme="dark"] .vocab-list-item,
html[data-theme="dark"] .tutor-chat-composer {
        background: #1a1b24 !important;
        border-color: #2d3042 !important;
        color: #e6e8f0 !important;
    }html[data-theme="dark"] .tutor-chat-composer { box-shadow: 0 -6px 10px -8px rgba(0, 0, 0, 0.6) !important; }html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
        background: #232534 !important;
        color: #e6e8f0 !important;
        border-color: #3a3d52 !important;
    }html[data-theme="dark"] input::placeholder { color: #8b8fa6 !important; }html[data-theme="dark"] button {
        background: #2a2d40 !important;
        color: #e6e8f0 !important;
        border-color: #3f4360 !important;
    }html[data-theme="dark"] button:disabled { opacity: 0.45 !important; }

    /* ---- blue tinted panels ---- */html[data-theme="dark"] .theme-switch,
html[data-theme="dark"] .tutor-chat-action,
html[data-theme="dark"] .tutor-chat-hint-chip,
html[data-theme="dark"] .tutor-chat-word-popup,
html[data-theme="dark"] .tutor-chat-review,
html[data-theme="dark"] .vocab-card,
html[data-theme="dark"] .vocab-nav-button,
html[data-theme="dark"] .progress-panel,
html[data-theme="dark"] .progress-week,
html[data-theme="dark"] .tutor-chat-badge,
html[data-theme="dark"] .progress-badge,
html[data-theme="dark"] .vocab-box {
        background: #1d2540 !important;
        border-color: #34416a !important;
        color: #cfdcff !important;
    }html[data-theme="dark"] .progress-badge-unlocked { background: #3a3220 !important; border-color: #6b5a2a !important; }

    /* ---- warm panels (warnings, feedback, goals) ---- */html[data-theme="dark"] .tutor-chat-feedback,
html[data-theme="dark"] .tutor-chat-summary,
html[data-theme="dark"] .daily-goal,
html[data-theme="dark"] .plan-banner,
html[data-theme="dark"] .scenario-blocked-message,
html[data-theme="dark"] .tutor-chat-pronunciation {
        background: #33291a !important;
        border-color: #5c4a22 !important;
        color: #f1dfb2 !important;
    }

    /* ---- green panels ---- */html[data-theme="dark"] .tutor-chat-objectives,
html[data-theme="dark"] .vocab-overview,
html[data-theme="dark"] .daily-goal-done,
html[data-theme="dark"] .plan-banner-premium {
        background: #16301f !important;
        border-color: #2c5a3a !important;
        color: #cdeed8 !important;
    }

    /* ---- purple panels ---- */html[data-theme="dark"] .tutor-chat-pronounce,
html[data-theme="dark"] .common-mistakes,
html[data-theme="dark"] .scenario-custom {
        background: #2a2145 !important;
        border-color: #4b3b82 !important;
        color: #ddd2ff !important;
    }

    /* ---- text roles ---- */html[data-theme="dark"] .tutor-chat-message-tutor,
html[data-theme="dark"] .tutor-chat-scenario-title { color: #8fb4ff !important; }html[data-theme="dark"] .tutor-chat-message-user { color: #e6e8f0 !important; }html[data-theme="dark"] .tutor-chat-word:hover { background: #26304f !important; }html[data-theme="dark"] .tutor-chat-translation,
html[data-theme="dark"] .tutor-chat-hints-label,
html[data-theme="dark"] .tutor-chat-mic-hint,
html[data-theme="dark"] .progress-label,
html[data-theme="dark"] .scenario-description,
html[data-theme="dark"] .auth-subtitle,
html[data-theme="dark"] .about-tagline,
html[data-theme="dark"] .about-section p,
html[data-theme="dark"] .tutor-chat-word-example,
html[data-theme="dark"] .tutor-chat-word-example span,
html[data-theme="dark"] .vocab-example,
html[data-theme="dark"] .vocab-example span,
html[data-theme="dark"] .vocab-list-example,
html[data-theme="dark"] .vocab-progress,
html[data-theme="dark"] .common-mistakes-explain,
html[data-theme="dark"] .vocab-empty,
html[data-theme="dark"] .vocab-done,
html[data-theme="dark"] .progress-week-label,
html[data-theme="dark"] .progress-week-count,
html[data-theme="dark"] .tutor-chat-pronounce-target,
html[data-theme="dark"] .about-legal {
        color: #aab0c8 !important;
    }html[data-theme="dark"] .tutor-chat-feedback-corrected,
html[data-theme="dark"] .tutor-chat-feedback-mistake,
html[data-theme="dark"] .tutor-chat-summary-explain,
html[data-theme="dark"] .daily-goal-label,
html[data-theme="dark"] .plan-banner span,
html[data-theme="dark"] .tutor-chat-summary strong { color: #f1dfb2 !important; }html[data-theme="dark"] .about-section strong,
html[data-theme="dark"] .progress-week-title,
html[data-theme="dark"] .common-mistakes-count,
html[data-theme="dark"] .vocab-translation { color: #8fb4ff !important; }html[data-theme="dark"] .common-mistakes-right,
html[data-theme="dark"] .vocab-word,
html[data-theme="dark"] .scenario-title { color: #f1f2f8 !important; }html[data-theme="dark"] .tutor-chat-summary-wrong,
html[data-theme="dark"] .tutor-chat-error,
html[data-theme="dark"] .tutor-chat-pronounce-score-low,
html[data-theme="dark"] .tutor-chat-pronounce-recording,
html[data-theme="dark"] .about-error,
html[data-theme="dark"] .auth-error { color: #ff8a98 !important; }html[data-theme="dark"] .tutor-chat-summary-right,
html[data-theme="dark"] .tutor-chat-pronounce-score-great,
html[data-theme="dark"] .tutor-chat-pronounce-score-good { color: #7ee09a !important; }html[data-theme="dark"] .tutor-chat-pronounce-score-ok { color: #ffd37a !important; }html[data-theme="dark"] .auth-switch,
html[data-theme="dark"] .auth-about-link,
html[data-theme="dark"] .auth-about-button,
html[data-theme="dark"] .vocab-slow,
html[data-theme="dark"] .tutor-chat-pronounce-close,
html[data-theme="dark"] .tutor-chat-translate-button {
        background: none !important;
        border: none !important;
        color: #8fb4ff !important;
    }

    /* ---- progress bars & charts ---- */html[data-theme="dark"] .progress-bar,
html[data-theme="dark"] .daily-goal-bar { background: #2a2d40 !important; }html[data-theme="dark"] .progress-week-bar-empty { background: #2a2d40 !important; }html[data-theme="dark"] .progress-week-bar { background: #5f84cf !important; }html[data-theme="dark"] .progress-week-bar-today { background: #8fb4ff !important; }

    /* ---- pronunciation / dictation word chips ---- */html[data-theme="dark"] .tutor-chat-pronounce-word-ok,
html[data-theme="dark"] .vocab-dictation-ok { background: #1d4429 !important; color: #8ff0a8 !important; }html[data-theme="dark"] .tutor-chat-pronounce-word-miss,
html[data-theme="dark"] .vocab-dictation-miss { background: #4a2229 !important; color: #ffadb8 !important; }

    /* ---- danger / primary buttons keep their color ---- */html[data-theme="dark"] .about-delete,
html[data-theme="dark"] .vocab-wrong { background: #b00020 !important; color: #fff !important; border: none !important; }html[data-theme="dark"] .vocab-right { background: #2e7d32 !important; color: #fff !important; border: none !important; }html[data-theme="dark"] .tutor-chat-mic.recording { background: #b00020 !important; color: #fff !important; }html[data-theme="dark"] .tutor-chat-message-tutor .tutor-chat-word { border-bottom-color: #5f84cf !important; }html[data-theme="dark"] .scenario-tag { background: #2a2d40 !important; color: #cfd3e6 !important; }html[data-theme="dark"] .scenario-tag-premium { background: #4a3a14 !important; color: #ffd37a !important; }html[data-theme="dark"] .scenario-done { color: #7ee09a !important; }

html[data-theme="dark"] .level-suggestion-up { background: #16301f !important; border-color: #2c5a3a !important; color: #cdeed8 !important; }
html[data-theme="dark"] .level-suggestion-down { background: #33291a !important; border-color: #5c4a22 !important; color: #f1dfb2 !important; }

html[data-theme="dark"] .placement-option { background: #1d2540 !important; border-color: #34416a !important; color: #e6e8f0 !important; }
html[data-theme="dark"] .placement-result { background: #16301f !important; border-color: #2c5a3a !important; color: #cdeed8 !important; }
html[data-theme="dark"] .placement-result-title, html[data-theme="dark"] .placement-result-level { color: #7ee09a !important; }
html[data-theme="dark"] .placement-note, html[data-theme="dark"] .placement-count { color: #aab0c8 !important; }
html[data-theme="dark"] .placement-chip { background: #1a1b24 !important; border-color: #2c5a3a !important; color: #cdeed8 !important; }
html[data-theme="dark"] .placement-chip-pass { background: #1d4429 !important; }
html[data-theme="dark"] .placement-progress { background: #2a2d40 !important; }
html[data-theme="dark"] .placement-progress-fill { background: #8fb4ff !important; }
html[data-theme="dark"] .placement-primary { background: #2e7d32 !important; color: #fff !important; border: none !important; }
html[data-theme="dark"] .placement-skip { background: none !important; border: none !important; color: #8fb4ff !important; }
html[data-theme="dark"] .placement-nudge { background: #1d2540 !important; border-color: #34416a !important; color: #cfdcff !important; }

html[data-theme="dark"] .lang-chip { background: #1a1b24 !important; border-color: transparent !important; color: #cfd3e6 !important; }
html[data-theme="dark"] .lang-chip-label { color: #aab0c8 !important; }
html[data-theme="dark"] .lang-chip-selected { background: #1d2540 !important; border-color: #6f93ff !important; box-shadow: 0 4px 14px rgba(111, 147, 255, 0.28) !important; }
html[data-theme="dark"] .lang-chip-selected .lang-chip-label { color: #cfdcff !important; }
html[data-theme="dark"] .lang-flag { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; }
html[data-theme="dark"] .scenario-picker-section-title { color: #cfd3e6 !important; }

html[data-theme="dark"] .auth-stage .auth-card { background: rgba(24, 25, 36, 0.85) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; }
html[data-theme="dark"] .auth-flag { background: rgba(32, 34, 52, 0.75) !important; border-color: rgba(150, 150, 200, 0.25) !important; color: #dfe3f5 !important; }
html[data-theme="dark"] .auth-watermark { opacity: 0.14 !important; }
html[data-theme="dark"] .auth-hero-title { color: #f1f3ff !important; }
html[data-theme="dark"] .auth-hero-title span { background: linear-gradient(90deg, #7aa2ff, #b794ff 55%, #ff7ab8) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
html[data-theme="dark"] .path-card { background: linear-gradient(135deg, #181b2e, #211a33) !important; border-color: #2f3350 !important; }
html[data-theme="dark"] .path-node { background: #1a1b24 !important; border-color: #3b4060 !important; }
html[data-theme="dark"] .path-step-done .path-node { background: #2e9b57 !important; border-color: #2e9b57 !important; }
html[data-theme="dark"] .path-step-next .path-node { border-color: #9a6bff !important; }
html[data-theme="dark"] .path-finished { color: #7ee09a !important; }
html[data-theme="dark"] .auth-flag-chosen { background: #1d2540 !important; border-color: #6f93ff !important; box-shadow: 0 4px 14px rgba(111, 147, 255, 0.3) !important; }
html[data-theme="dark"] .tutor-chat-reading { color: #ffd37a !important; }
html[data-theme="dark"] .side-card { background: linear-gradient(135deg, #181b2e, #211a33) !important; border-color: #2f3350 !important; box-shadow: none !important; }
html[data-theme="dark"] .side-phrase { color: #8fb4ff !important; }
html[data-theme="dark"] .side-reading { color: #ffd37a !important; }
html[data-theme="dark"] .side-translation { background: rgba(111, 147, 255, 0.14) !important; }
html[data-theme="dark"] .side-button { color: #cfdcff !important; background: #1d2540 !important; border-color: #34406b !important; }
html[data-theme="dark"] .side-word { background: rgba(111, 147, 255, 0.12) !important; }
html[data-theme="dark"] .home-card { background: rgba(24, 27, 46, 0.85) !important; border-color: #2f3350 !important; box-shadow: none !important; }
html[data-theme="dark"] .home-phrase { color: #8fb4ff !important; }
html[data-theme="dark"] .home-reading { color: #ffd37a !important; }
html[data-theme="dark"] .home-gloss { background: rgba(111, 147, 255, 0.14) !important; }
html[data-theme="dark"] .home-button { color: #cfdcff !important; background: #1d2540 !important; border-color: #34406b !important; }
html[data-theme="dark"] .home-primary { color: #fff !important; background: linear-gradient(90deg, #2563eb, #7c3aed) !important; }
html[data-theme="dark"] .home-notes { color: #e6e8f0 !important; background: #1e1d17 !important; border-color: #4a4325 !important; }
html[data-theme="dark"] .home-watermark { opacity: 0.12 !important; }
html[data-theme="dark"] .history-card { background: #181b2e !important; border-color: #2f3350 !important; }
html[data-theme="dark"] .history-card:hover { background: #1d2540 !important; }
html[data-theme="dark"] .history-messages { border-color: #2f3350 !important; }
html[data-theme="dark"] .history-tutor { color: #8fb4ff !important; }
html[data-theme="dark"] .home-word { background: rgba(111, 147, 255, 0.12) !important; }
html[data-theme="dark"] .reminder { background: #231f12 !important; border-color: #4a4325 !important; }
html[data-theme="dark"] .reminder-time input { color: #e6e8f0 !important; background: #1a1a22 !important; }
html[data-theme="dark"] .chat-watermark { opacity: 0.12 !important; }
html[data-theme="dark"] .auth-notice { color: #7ee09a !important; background: rgba(46, 155, 87, 0.18) !important; }
html[data-theme="dark"] .auth-switch { color: #8fb4ff !important; }
html[data-theme="dark"] .auth-about-link:hover { color: #8fb4ff !important; }