/* Linguataal Theme System v94
   Central contrast-safe tokens for Light / Soft Warm / Dark / System.
   Loaded after the existing design system so theme tokens are authoritative.
*/
:root,
html[data-lai-theme="light"] {
  color-scheme: light;
  --lai-theme-bg: #f7f8fc;
  --lai-theme-surface: #ffffff;
  --lai-theme-surface-soft: #fbfbfe;
  --lai-theme-surface-elevated: #ffffff;
  --lai-theme-text: #202334;
  --lai-theme-text-soft: #5b6072;
  --lai-theme-text-muted: #697086;
  --lai-theme-border: #e5e7ef;
  --lai-theme-border-strong: #d7dae5;
  --lai-theme-accent: #5e50c9;
  --lai-theme-accent-hover: #4f43ad;
  --lai-theme-accent-contrast: #ffffff;
  --lai-theme-success: #13795b;
  --lai-theme-success-soft: #e8f7f1;
  --lai-theme-warning: #a95f00;
  --lai-theme-warning-soft: #fff4df;
  --lai-theme-danger: #b4232d;
  --lai-theme-danger-soft: #fff0f1;
  --lai-theme-info: #245fbd;
  --lai-theme-info-soft: #edf4ff;
  --lai-theme-focus: 0 0 0 4px rgba(94,80,201,.16);
  --lai-theme-shadow: 0 10px 28px rgba(35,39,60,.07);
}

html[data-lai-theme="soft"] {
  color-scheme: light;
  --lai-theme-bg: #f6f2ec;
  --lai-theme-surface: #fffdf9;
  --lai-theme-surface-soft: #fbf7f1;
  --lai-theme-surface-elevated: #ffffff;
  --lai-theme-text: #27231f;
  --lai-theme-text-soft: #625b52;
  --lai-theme-text-muted: #756d63;
  --lai-theme-border: #e8dfd4;
  --lai-theme-border-strong: #d8ccbe;
  --lai-theme-accent: #6253c7;
  --lai-theme-accent-hover: #5143ad;
  --lai-theme-accent-contrast: #ffffff;
  --lai-theme-success: #1d7358;
  --lai-theme-success-soft: #eaf6f0;
  --lai-theme-warning: #9d5b06;
  --lai-theme-warning-soft: #fff1da;
  --lai-theme-danger: #aa3039;
  --lai-theme-danger-soft: #fff0ef;
  --lai-theme-info: #315da8;
  --lai-theme-info-soft: #eef3fb;
  --lai-theme-focus: 0 0 0 4px rgba(98,83,199,.15);
  --lai-theme-shadow: 0 10px 28px rgba(71,57,43,.08);
}

html[data-lai-theme="dark"] {
  color-scheme: dark;
  --lai-theme-bg: #111522;
  --lai-theme-surface: #181d2a;
  --lai-theme-surface-soft: #1d2331;
  --lai-theme-surface-elevated: #222938;
  --lai-theme-text: #f7f8fc;
  --lai-theme-text-soft: #c4c9d6;
  --lai-theme-text-muted: #a8afbf;
  --lai-theme-border: #31394a;
  --lai-theme-border-strong: #414b60;
  --lai-theme-accent: #8d7cff;
  --lai-theme-accent-hover: #a495ff;
  --lai-theme-accent-contrast: #111522;
  --lai-theme-success: #59d2a5;
  --lai-theme-success-soft: #18382f;
  --lai-theme-warning: #f2b85b;
  --lai-theme-warning-soft: #3b2d17;
  --lai-theme-danger: #ff8790;
  --lai-theme-danger-soft: #3c2026;
  --lai-theme-info: #82b4ff;
  --lai-theme-info-soft: #1b2e4a;
  --lai-theme-focus: 0 0 0 4px rgba(141,124,255,.22);
  --lai-theme-shadow: 0 14px 34px rgba(0,0,0,.28);
}

@media (prefers-color-scheme: dark) {
  html[data-lai-theme="system"] {
    color-scheme: dark;
    --lai-theme-bg: #111522;
    --lai-theme-surface: #181d2a;
    --lai-theme-surface-soft: #1d2331;
    --lai-theme-surface-elevated: #222938;
    --lai-theme-text: #f7f8fc;
    --lai-theme-text-soft: #c4c9d6;
    --lai-theme-text-muted: #a8afbf;
    --lai-theme-border: #31394a;
    --lai-theme-border-strong: #414b60;
    --lai-theme-accent: #8d7cff;
    --lai-theme-accent-hover: #a495ff;
    --lai-theme-accent-contrast: #111522;
    --lai-theme-success: #59d2a5;
    --lai-theme-success-soft: #18382f;
    --lai-theme-warning: #f2b85b;
    --lai-theme-warning-soft: #3b2d17;
    --lai-theme-danger: #ff8790;
    --lai-theme-danger-soft: #3c2026;
    --lai-theme-info: #82b4ff;
    --lai-theme-info-soft: #1b2e4a;
    --lai-theme-focus: 0 0 0 4px rgba(141,124,255,.22);
    --lai-theme-shadow: 0 14px 34px rgba(0,0,0,.28);
  }
}
@media (prefers-color-scheme: light) {
  html[data-lai-theme="system"] {
    color-scheme: light;
    --lai-theme-bg: #f7f8fc;
    --lai-theme-surface: #ffffff;
    --lai-theme-surface-soft: #fbfbfe;
    --lai-theme-surface-elevated: #ffffff;
    --lai-theme-text: #202334;
    --lai-theme-text-soft: #5b6072;
    --lai-theme-text-muted: #697086;
    --lai-theme-border: #e5e7ef;
    --lai-theme-border-strong: #d7dae5;
    --lai-theme-accent: #5e50c9;
    --lai-theme-accent-hover: #4f43ad;
    --lai-theme-accent-contrast: #ffffff;
    --lai-theme-success: #13795b;
    --lai-theme-success-soft: #e8f7f1;
    --lai-theme-warning: #a95f00;
    --lai-theme-warning-soft: #fff4df;
    --lai-theme-danger: #b4232d;
    --lai-theme-danger-soft: #fff0f1;
    --lai-theme-info: #245fbd;
    --lai-theme-info-soft: #edf4ff;
    --lai-theme-focus: 0 0 0 4px rgba(94,80,201,.16);
    --lai-theme-shadow: 0 10px 28px rgba(35,39,60,.07);
  }
}

/* Bridge old/new Linguataal design tokens to one theme source. */
html[data-lai-theme] {
  --lai2-bg: var(--lai-theme-bg);
  --lai2-surface: var(--lai-theme-surface);
  --lai2-surface-soft: var(--lai-theme-surface-soft);
  --lai2-border: var(--lai-theme-border);
  --lai2-border-strong: var(--lai-theme-border-strong);
  --lai2-text: var(--lai-theme-text);
  --lai2-text-soft: var(--lai-theme-text-soft);
  --lai2-text-faint: var(--lai-theme-text-muted);
  --lai2-brand-600: var(--lai-theme-accent);
  --lai2-brand-700: var(--lai-theme-accent-hover);
  --lai2-success: var(--lai-theme-success);
  --lai2-success-soft: var(--lai-theme-success-soft);
  --lai2-warning: var(--lai-theme-warning);
  --lai2-warning-soft: var(--lai-theme-warning-soft);
  --lai2-danger: var(--lai-theme-danger);
  --lai2-danger-soft: var(--lai-theme-danger-soft);
  --lai2-info: var(--lai-theme-info);
  --lai2-info-soft: var(--lai-theme-info-soft);
  --lai2-focus: var(--lai-theme-focus);

  --lai-color-background: var(--lai-theme-bg);
  --lai-color-surface: var(--lai-theme-surface);
  --lai-color-surface-muted: var(--lai-theme-surface-soft);
  --lai-color-text: var(--lai-theme-text);
  --lai-color-text-muted: var(--lai-theme-text-soft);
  --lai-color-border: var(--lai-theme-border);
  --lai-color-primary: var(--lai-theme-accent);
  --lai-color-primary-hover: var(--lai-theme-accent-hover);

  --bg-main: var(--lai-theme-bg);
  --bg-card: var(--lai-theme-surface);
  --text-dark: var(--lai-theme-text);
  --text-muted: var(--lai-theme-text-soft);
  --border-light: var(--lai-theme-border);
  --primary: var(--lai-theme-accent);
  --primary-dark: var(--lai-theme-accent-hover);
}

html[data-lai-theme] body,
html[data-lai-theme] #linguaai-app {
  background: var(--lai-theme-bg) !important;
  color: var(--lai-theme-text) !important;
}
html[data-lai-theme] :where(.linguaai-topbar,.linguaai-sidebar,.linguaai-bottom-nav,.lai-card,.lai2-card,.sp-question-card,.sp-feedback-card,.praatcafe-v2,.pcv2-panel,.chat-container,.mentor-card,.profile-card) {
  color: var(--lai-theme-text);
}
html[data-lai-theme] .linguaai-topbar,
html[data-lai-theme] .linguaai-sidebar,
html[data-lai-theme] .linguaai-bottom-nav {
  background: var(--lai-theme-surface) !important;
  border-color: var(--lai-theme-border) !important;
}
html[data-lai-theme] .linguaai-topbar .topbar-page-title,
html[data-lai-theme] .linguaai-sidebar a,
html[data-lai-theme] .linguaai-bottom-nav a,
html[data-lai-theme] .linguaai-bottom-nav button {
  color: var(--lai-theme-text) !important;
}
html[data-lai-theme] .topbar-badge,
html[data-lai-theme] .topbar-user-menu,
html[data-lai-theme] .user-dropdown-menu {
  background: var(--lai-theme-surface-soft) !important;
  color: var(--lai-theme-text) !important;
  border-color: var(--lai-theme-border) !important;
}

/* Contrast guardrails: helper copy stays readable; disabled remains visibly distinct. */
html[data-lai-theme] :where(.text-muted,.muted,.helper-text,.hint,.sp-hint,.sp-instruction,.lai2-muted,.subtitle,.meta) {
  color: var(--lai-theme-text-soft) !important;
}
html[data-lai-theme] :disabled,
html[data-lai-theme] [aria-disabled="true"],
html[data-lai-theme] .is-disabled {
  opacity: .56;
}
html[data-lai-theme] input,
html[data-lai-theme] textarea,
html[data-lai-theme] select {
  background: var(--lai-theme-surface-elevated) !important;
  color: var(--lai-theme-text) !important;
  border-color: var(--lai-theme-border-strong) !important;
}
html[data-lai-theme] input::placeholder,
html[data-lai-theme] textarea::placeholder { color: var(--lai-theme-text-muted) !important; opacity: 1; }
html[data-lai-theme] :where(input,textarea,select,button,a):focus-visible { outline: none !important; box-shadow: var(--lai-theme-focus) !important; }

/* Pilot modules: Dashboard / Sentence Practice / AI Chat / Praatcafe. */
html[data-lai-theme] :where(#linguaai-dashboard,#linguaai-sentence-practice,#linguaai-chat,#linguaai-praatcafe-v2) :where(.card,.panel,.surface,.section,.sp-stage,.sp-question-card,.sp-feedback-card,.ai-chat-card,.pcv2-card,.pcv2-panel) {
  background-color: var(--lai-theme-surface) !important;
  border-color: var(--lai-theme-border) !important;
  color: var(--lai-theme-text) !important;
}
html[data-lai-theme="dark"] :where(#linguaai-dashboard,#linguaai-sentence-practice,#linguaai-chat,#linguaai-praatcafe-v2) {
  --white: var(--lai-theme-surface);
}
html[data-lai-theme="dark"] :where(#linguaai-dashboard,#linguaai-sentence-practice,#linguaai-chat,#linguaai-praatcafe-v2) :where(h1,h2,h3,h4,h5,h6,strong,.title,.sp-source-text,.sp-question-text) {
  color: var(--lai-theme-text) !important;
}
html[data-lai-theme="dark"] :where(#linguaai-dashboard,#linguaai-sentence-practice,#linguaai-chat,#linguaai-praatcafe-v2) :where(p,small,.description,.subtext,.sp-helper,.sp-instruction) {
  color: var(--lai-theme-text-soft) !important;
}
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-answer-input,
html[data-lai-theme="dark"] #linguaai-sentence-practice textarea {
  background: #202737 !important;
  color: #f7f8fc !important;
}
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-feedback-card.is-correct,
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-feedback-card.correct { background: var(--lai-theme-success-soft) !important; }
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-feedback-card.is-wrong,
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-feedback-card.incorrect { background: var(--lai-theme-danger-soft) !important; }

/* Theme control */
.lai-theme-control { position: relative; display: inline-flex; align-items: center; }
.lai-theme-toggle {
  width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--lai-theme-border); border-radius:11px;
  background:var(--lai-theme-surface-soft); color:var(--lai-theme-text);
  cursor:pointer; transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.lai-theme-toggle:hover { background:var(--lai-theme-surface-elevated); border-color:var(--lai-theme-border-strong); transform:translateY(-1px); }
.lai-theme-menu {
  position:absolute; z-index:9999; top:calc(100% + 8px); right:0; width:210px;
  padding:8px; border:1px solid var(--lai-theme-border); border-radius:14px;
  background:var(--lai-theme-surface-elevated); color:var(--lai-theme-text); box-shadow:var(--lai-theme-shadow);
}
.lai-theme-menu[hidden] { display:none !important; }
.lai-theme-option {
  width:100%; display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 10px;
  border:0; border-radius:10px; background:transparent; color:var(--lai-theme-text);
  text-align:left; cursor:pointer; font:inherit; font-weight:650;
}
.lai-theme-option:hover { background:var(--lai-theme-surface-soft); }
.lai-theme-option[aria-checked="true"] { background:color-mix(in srgb, var(--lai-theme-accent) 13%, transparent); color:var(--lai-theme-text); }
.lai-theme-swatch { width:20px; height:20px; border-radius:7px; border:1px solid var(--lai-theme-border-strong); flex:none; }
.lai-theme-option[data-theme="light"] .lai-theme-swatch { background:linear-gradient(135deg,#fff 50%,#f7f8fc 50%); }
.lai-theme-option[data-theme="soft"] .lai-theme-swatch { background:linear-gradient(135deg,#fffdf9 50%,#f6f2ec 50%); }
.lai-theme-option[data-theme="dark"] .lai-theme-swatch { background:linear-gradient(135deg,#181d2a 50%,#111522 50%); }
.lai-theme-option[data-theme="system"] .lai-theme-swatch { background:linear-gradient(135deg,#fff 0 50%,#181d2a 50% 100%); }
.lai-theme-label { flex:1; }
.lai-theme-check { opacity:0; color:var(--lai-theme-accent); font-weight:900; }
.lai-theme-option[aria-checked="true"] .lai-theme-check { opacity:1; }

@media (max-width: 640px) {
  .lai-theme-toggle { width:34px; height:34px; border-radius:10px; }
  .lai-theme-menu { position:fixed; left:12px; right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); top:auto; width:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lai-theme-toggle { transition:none; }
}

/* ======================================================================
   Linguataal Modern Theme v95
   Internal value remains "dark" for backwards compatibility with v94
   user-meta/localStorage, but the visual language is now deep slate /
   muted indigo rather than near-black. Applied across every module.
   ====================================================================== */
html[data-lai-theme="dark"] {
  color-scheme: dark;
  --lai-theme-bg: #171c2b;
  --lai-theme-bg-deep: #121726;
  --lai-theme-surface: #20263a;
  --lai-theme-surface-soft: #242b41;
  --lai-theme-surface-elevated: #293149;
  --lai-theme-surface-raised: #303852;
  --lai-theme-text: #f7f8fc;
  --lai-theme-text-soft: #cbd2e3;
  --lai-theme-text-muted: #aeb7cc;
  --lai-theme-border: #343d57;
  --lai-theme-border-strong: #46516d;
  --lai-theme-accent: #7c5cff;
  --lai-theme-accent-hover: #9278ff;
  --lai-theme-accent-contrast: #ffffff;
  --lai-theme-success: #63c79a;
  --lai-theme-success-soft: #203d36;
  --lai-theme-warning: #e7b65b;
  --lai-theme-warning-soft: #40351f;
  --lai-theme-danger: #e87575;
  --lai-theme-danger-soft: #42282f;
  --lai-theme-info: #78aef2;
  --lai-theme-info-soft: #223651;
  --lai-theme-focus: 0 0 0 4px rgba(124,92,255,.26);
  --lai-theme-shadow: 0 14px 36px rgba(7,10,20,.22);
  --lai-modern-gradient: linear-gradient(145deg,#171c2b 0%,#1b2134 48%,#1d2440 100%);
  --lai-modern-card-gradient: linear-gradient(145deg,rgba(41,49,73,.98),rgba(32,38,58,.98));
}

/* System-dark uses the same accessible Modern palette. */
@media (prefers-color-scheme: dark) {
  html[data-lai-theme="system"] {
    --lai-theme-bg: #171c2b;
    --lai-theme-bg-deep: #121726;
    --lai-theme-surface: #20263a;
    --lai-theme-surface-soft: #242b41;
    --lai-theme-surface-elevated: #293149;
    --lai-theme-surface-raised: #303852;
    --lai-theme-text: #f7f8fc;
    --lai-theme-text-soft: #cbd2e3;
    --lai-theme-text-muted: #aeb7cc;
    --lai-theme-border: #343d57;
    --lai-theme-border-strong: #46516d;
    --lai-theme-accent: #7c5cff;
    --lai-theme-accent-hover: #9278ff;
    --lai-theme-accent-contrast: #ffffff;
    --lai-theme-success: #63c79a;
    --lai-theme-success-soft: #203d36;
    --lai-theme-warning: #e7b65b;
    --lai-theme-warning-soft: #40351f;
    --lai-theme-danger: #e87575;
    --lai-theme-danger-soft: #42282f;
    --lai-theme-info: #78aef2;
    --lai-theme-info-soft: #223651;
    --lai-theme-focus: 0 0 0 4px rgba(124,92,255,.26);
    --lai-theme-shadow: 0 14px 36px rgba(7,10,20,.22);
    --lai-modern-gradient: linear-gradient(145deg,#171c2b 0%,#1b2134 48%,#1d2440 100%);
    --lai-modern-card-gradient: linear-gradient(145deg,rgba(41,49,73,.98),rgba(32,38,58,.98));
  }
}

/* Global app shell: eliminate the "white void" effect between sidebar/content. */
html[data-lai-theme="dark"] body,
html[data-lai-theme="dark"] #page,
html[data-lai-theme="dark"] #content,
html[data-lai-theme="dark"] #primary,
html[data-lai-theme="dark"] #linguaai-app,
html[data-lai-theme="dark"] .linguaai-app-wrapper,
html[data-lai-theme="dark"] .linguaai-main-container,
html[data-lai-theme="dark"] .linguaai-content {
  background: var(--lai-modern-gradient) !important;
  color: var(--lai-theme-text) !important;
}
html[data-lai-theme="dark"] .linguaai-sidebar {
  background: linear-gradient(180deg,#151a29 0%,#181e30 100%) !important;
  border-color: #2d354c !important;
  box-shadow: 10px 0 30px rgba(7,10,20,.12) !important;
}
html[data-lai-theme="dark"] .linguaai-topbar,
html[data-lai-theme="dark"] .linguaai-bottom-nav {
  background: rgba(32,38,58,.94) !important;
  border-color: var(--lai-theme-border) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* One professional surface language across ALL learning modules. */
html[data-lai-theme="dark"] #linguaai-app :where(
  .card,.panel,.box,.section,.surface,
  [class*="-card"],[class*="-panel"],[class*="-box"],
  .grammar-theory-card,.grammar-completion-card,.grammar-box,
  .story-text-container,.story-context-box,.story-quiz-card,
  .dialogue-control-panel-card,.dialogue-right-card,.dialogue-stage-wrapper,
  .vocab-card-box,.vocab-card-container,.vocab-session-context,.vocab-stats-bar,
  .lai-verb-card,.lv-learning-card,.lv-context-card,.lv-eval-card,.lv-teach-box,
  .knm-main-panel,.knm-topic-card,.knm-theory-card,.knm-keyword-card,.knm-welcome-card,
  .sp-question-card,.sp-feedback-card,.sp-practice-box,.sp-completion-card,.sp-emma-guide-card,
  .chat-card,.chat-box,.chat-input-area,.emma-mode-panel,.emma-mode-card,
  .la-mentor-home,.la-task-card,.la-metric-card,.la-ring-card,.la-coach-box,
  .profile-form-box,.profile-stats-full,.roadmap-day-card,
  .praatcafe-card,.praatcafe-room-card,.praatcafe-meeting-panel,.pcv2-panel,.whiteboard-card,
  .dashboard-card,.progress-card,.review-card,.result-card,.placement-container
) {
  background-color: var(--lai-theme-surface) !important;
  border-color: var(--lai-theme-border) !important;
  color: var(--lai-theme-text) !important;
  box-shadow: 0 10px 28px rgba(7,10,20,.12);
}

/* Elevated / interactive cards get a restrained indigo lift, not neon purple. */
html[data-lai-theme="dark"] #linguaai-app :where(
  .lai-dash-module-card,.lai-mentor-task,.roadmap-day-card,.topic-card,
  .knm-topic-card,.review-item,.rp-choice-card,.scenario-card,.cat-card,.material-card,
  .dialogue-card-body,.video-card,.blog-card,.contact-form-card,.contact-info-card
) {
  background: var(--lai-modern-card-gradient) !important;
  border-color: var(--lai-theme-border) !important;
}
html[data-lai-theme="dark"] #linguaai-app :where(
  .lai-dash-module-card,.lai-mentor-task,.roadmap-day-card,.topic-card,
  .knm-topic-card,.review-item,.rp-choice-card,.scenario-card,.cat-card,.material-card
):hover {
  border-color: #5a4ab1 !important;
  transform: translateY(-1px);
}

/* Typography guardrails. Hardcoded dark copy is overridden only inside the app. */
html[data-lai-theme="dark"] #linguaai-app :where(h1,h2,h3,h4,h5,h6,.title,.heading,.card-title,.section-title,strong,b,label) {
  color: var(--lai-theme-text) !important;
}
html[data-lai-theme="dark"] #linguaai-app :where(p,small,.description,.subtitle,.subtext,.meta,.helper-text,.hint,.muted,.text-muted,.section-subtitle) {
  color: var(--lai-theme-text-soft) !important;
}
html[data-lai-theme="dark"] #linguaai-app a:not(.button):not(.btn):not([class*="btn"]) {
  color: #b9aaff;
}

/* Inputs and answer surfaces remain clearly separated from cards. */
html[data-lai-theme="dark"] #linguaai-app :where(input,textarea,select,.chat-input,.write-box) {
  background: #181e2f !important;
  color: var(--lai-theme-text) !important;
  border-color: #46516d !important;
  caret-color: #b8a8ff;
}
html[data-lai-theme="dark"] #linguaai-app :where(input,textarea,select,.chat-input,.write-box):focus {
  border-color: #8f78ff !important;
  box-shadow: var(--lai-theme-focus) !important;
}

/* Primary actions: consistent contrast. Secondary actions stay visibly active. */
html[data-lai-theme="dark"] #linguaai-app :where(
  .btn-primary,.button-primary,.primary-btn,.sp-check-btn,.chat-send-btn,
  .grammar-start-practice-btn,.knm-next-btn,.knm-gen-btn
) {
  background: linear-gradient(135deg,#6f50df,#7657f4) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(124,92,255,.22);
}
html[data-lai-theme="dark"] #linguaai-app :where(button,.btn,.button):not(.btn-primary):not(.button-primary):not(.primary-btn):not(.sp-check-btn):not(.chat-send-btn) {
  color: var(--lai-theme-text) !important;
}

/* Semantic states preserve meaning and readable copy. */
html[data-lai-theme="dark"] #linguaai-app :where(.success,.is-correct,.correct,.profile-success) {
  color: #baf1d9 !important;
}
html[data-lai-theme="dark"] #linguaai-app :where(.error,.danger,.is-wrong,.incorrect,.grammar-correct) {
  color: #ffc0c0 !important;
}

/* Dashboard/Mentor visual depth inspired by the approved concept without going near-black. */
html[data-lai-theme="dark"] #linguaai-dashboard :where(.lai-dash-hero,.lai-mentor-command,.lai-emma-review-card),
html[data-lai-theme="dark"] #linguaai-app :where(.lai-dash-hero,.lai-mentor-command,.lai-emma-review-card) {
  background: linear-gradient(135deg,#29234e 0%,#252b46 52%,#20263a 100%) !important;
  border: 1px solid #413c69 !important;
  box-shadow: 0 18px 44px rgba(9,11,25,.20);
}

/* Navigation selected state: one calm purple family across desktop/mobile. */
html[data-lai-theme="dark"] :where(.linguaai-sidebar,.linguaai-bottom-nav) :where(a.active,.active > a,.sidebar-item.active,.mobile-bottom-item.active) {
  background: rgba(124,92,255,.18) !important;
  color: #f2efff !important;
  border-color: rgba(145,119,255,.28) !important;
}

/* Theme menu naming/visual treatment. */
html[data-lai-theme="dark"] .lai-theme-menu {
  background: #242b41 !important;
  border-color: #3c4661 !important;
  color: #f7f8fc !important;
  box-shadow: 0 18px 44px rgba(5,8,18,.28);
}
html[data-lai-theme="dark"] .lai-theme-option { color:#e9ecf5 !important; }
html[data-lai-theme="dark"] .lai-theme-option[aria-checked="true"] { background:rgba(124,92,255,.16) !important; }

/* Responsive: preserve the same palette and avoid creating a dark gutter on mobile. */
@media (max-width: 860px) {
  html[data-lai-theme="dark"] #linguaai-app,
  html[data-lai-theme="dark"] .linguaai-app-wrapper,
  html[data-lai-theme="dark"] .linguaai-main-container,
  html[data-lai-theme="dark"] .linguaai-content {
    background: linear-gradient(180deg,#171c2b 0%,#1c2235 100%) !important;
  }
  html[data-lai-theme="dark"] #linguaai-app :where([class*="-card"],[class*="-panel"],.card,.panel) {
    box-shadow: 0 8px 24px rgba(7,10,20,.10);
  }
}

/* ======================================================================
   v97 — Modern Hybrid Surface & Contrast Pass
   Goal: keep the approved dark/slate app shell, make it several tones
   lighter, and use light learning surfaces with guaranteed dark copy.
   Dashboard is aligned with Vocabulary/AI Chat; lost-on-white text fixed.
   ====================================================================== */
html[data-lai-theme="dark"] {
  --lai-modern-shell-bg: #252c40;
  --lai-modern-shell-bg-2: #293149;
  --lai-modern-shell-deep: #20263a;
  --lai-modern-shell-border: #3a435b;
  --lai-modern-light-surface: #ffffff;
  --lai-modern-light-soft: #f7f8fc;
  --lai-modern-light-soft-2: #f1f3f8;
  --lai-modern-light-text: #202534;
  --lai-modern-light-text-soft: #596174;
  --lai-modern-light-text-muted: #747d91;
  --lai-modern-light-border: #e1e5ed;
  --lai-modern-gradient: linear-gradient(145deg,#252c40 0%,#293149 48%,#2b3450 100%);
  --lai-theme-bg: #252c40;
  --lai-theme-bg-deep: #20263a;
}

/* Lighter shell: no near-black gutters. */
html[data-lai-theme="dark"] body,
html[data-lai-theme="dark"] #page,
html[data-lai-theme="dark"] #content,
html[data-lai-theme="dark"] #primary,
html[data-lai-theme="dark"] #linguaai-app,
html[data-lai-theme="dark"] .linguaai-app-wrapper,
html[data-lai-theme="dark"] .linguaai-main-container,
html[data-lai-theme="dark"] .linguaai-content {
  background: var(--lai-modern-gradient) !important;
}
html[data-lai-theme="dark"] .linguaai-sidebar {
  background: linear-gradient(180deg,#20263a 0%,#232b40 100%) !important;
  border-color: #343d55 !important;
  box-shadow: 8px 0 26px rgba(10,14,28,.10) !important;
}
html[data-lai-theme="dark"] .linguaai-topbar,
html[data-lai-theme="dark"] .linguaai-bottom-nav {
  background: rgba(43,51,73,.96) !important;
  border-color: #3c4660 !important;
}
html[data-lai-theme="dark"] .linguaai-topbar .topbar-page-title,
html[data-lai-theme="dark"] .linguaai-topbar :where(.topbar-page-title,strong),
html[data-lai-theme="dark"] .linguaai-sidebar :where(a,button,.sidebar-item) {
  color:#f4f6fb !important;
}
/* Existing dark logo artwork disappears on the slate sidebar; keep it legible. */
html[data-lai-theme="dark"] .linguaai-sidebar :where(.logo img,.linguaai-logo img,img[alt*="LINGUATAAL" i],img[alt*="Linguataal" i]) {
  filter:none !important;
  opacity:.96 !important;
}

/* ---------- Dashboard: align it with the approved light-content modules ---------- */
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 {
  --pilot-ink: var(--lai-modern-light-text) !important;
  --pilot-muted: var(--lai-modern-light-text-soft) !important;
  --pilot-border: var(--lai-modern-light-border) !important;
  --pilot-surface: var(--lai-modern-light-surface) !important;
  --pilot-soft: var(--lai-modern-light-soft) !important;
  color:var(--lai-modern-light-text) !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-hero {
  background: var(--lai-modern-light-surface) !important;
  border:1px solid var(--lai-modern-light-border) !important;
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(12,18,34,.08) !important;
  padding:18px 20px !important;
  margin-bottom:14px !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-hero h1,
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-hero strong {
  color:var(--lai-modern-light-text) !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-hero :where(p,span,small) {
  color:var(--lai-modern-light-text-soft) !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-hero > div > div:last-child > *,
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-ai-usage-pill {
  background:#f7f8fc !important;
  border:1px solid #e1e5ed !important;
  color:#344054 !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-hero > div > div:last-child > * * {
  color:#344054 !important;
}

html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-mentor-command {
  background:linear-gradient(135deg,#ffffff 0%,#faf9ff 100%) !important;
  border:1px solid #dedcf1 !important;
  box-shadow:0 10px 28px rgba(32,37,64,.08) !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-mentor-command :where(h1,h2,h3,h4,strong,b,label) {
  color:#202534 !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-mentor-command :where(p,small,span,.meta,.muted) {
  color:#596174 !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-mentor-task {
  background:#f8f9fc !important;
  border:1px solid #e3e6ee !important;
  box-shadow:none !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-mentor-task :where(strong,b,h3,h4) { color:#2b3142 !important; }
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-mentor-task :where(span,p,small) { color:#687084 !important; opacity:1 !important; }

html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-metric,
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-module-card {
  background:#fff !important;
  border-color:#e1e5ed !important;
  color:#202534 !important;
  box-shadow:0 6px 18px rgba(15,23,42,.055) !important;
}
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-metric :where(strong,h3,h4),
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-module-card :where(strong,h3,h4) { color:#202534 !important; }
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-metric :where(p,small,span),
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-module-card :where(p,small,.description,.meta) { color:#667085 !important; opacity:1 !important; }
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-section-head h2 { color:#f4f6fb !important; }
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-section-head > span { color:#b9c1d3 !important; }

/* Keep the purple daily-target hero as the dashboard's deliberate accent. */
html[data-lai-theme="dark"] #linguaai-app.lai-dashboard-v2 .lai-dash-next-action {
  background:linear-gradient(125deg,#5c55db 0%,#6f5ce8 55%,#7a65ec 100%) !important;
}

/* ---------- White surface contrast contract ----------
   Some legacy modules retain white cards with stronger inline CSS. When that
   happens, light theme copy must win over the generic dark-theme typography. */
html[data-lai-theme="dark"] .lai-emma-v2 > .linguaai-header,
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-panel,
html[data-lai-theme="dark"] .lai-emma-v2 .avatar-card,
html[data-lai-theme="dark"] .lai-emma-v2 .chat-box,
html[data-lai-theme="dark"] #linguaai-vocab-v2 :where(.dashboard-user-bar,.dashboard-card,.cat-card) {
  --lai2-text:#202534;
  --lai2-text-soft:#5f687b;
  --lai2-text-faint:#798297;
  --lai2-surface:#ffffff;
  --lai2-surface-soft:#f7f8fc;
  --lai2-border:#e1e5ed;
  color:#202534 !important;
}
html[data-lai-theme="dark"] .lai-emma-v2 > .linguaai-header :where(h1,h2,h3,strong),
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-panel :where(h1,h2,h3,strong),
html[data-lai-theme="dark"] .lai-emma-v2 .avatar-card :where(h1,h2,h3,strong),
html[data-lai-theme="dark"] .lai-emma-v2 .chat-box :where(h1,h2,h3,strong) {
  color:#202534 !important;
}
html[data-lai-theme="dark"] .lai-emma-v2 > .linguaai-header :where(p,small,span),
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-panel :where(p,small,.emma-mode-copy small),
html[data-lai-theme="dark"] .lai-emma-v2 .avatar-card :where(p,small,span),
html[data-lai-theme="dark"] .lai-emma-v2 .chat-box :where(p,small,span) {
  color:#667085 !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card {
  background:#f8f9fc !important;
  border-color:#dde2eb !important;
  color:#2b3142 !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card :where(strong,.emma-mode-copy strong) { color:#2b3142 !important; opacity:1 !important; }
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card :where(small,.emma-mode-copy small) { color:#667085 !important; opacity:1 !important; }
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card:hover { background:#fff !important; border-color:#b9b4e8 !important; }
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card.active {
  background:#f1efff !important;
  border-color:#b9afff !important;
  color:#5541b8 !important;
}
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card.active :where(strong,.emma-mode-copy strong) { color:#4e3da7 !important; }
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card.active :where(small,.emma-mode-copy small) { color:#665b8e !important; }
/* Disabled should read as unavailable, never as broken/invisible. */
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card:disabled,
html[data-lai-theme="dark"] .lai-emma-v2 .emma-mode-card[aria-disabled="true"] { opacity:.72 !important; }

/* Light cards on vocabulary pages: lock text contrast when generic dark rules leak in. */
html[data-lai-theme="dark"] #linguaai-vocab-v2 :where(.dashboard-user-bar,.dashboard-card,.cat-card) :where(h1,h2,h3,h4,strong,b,label) { color:#202534 !important; }
html[data-lai-theme="dark"] #linguaai-vocab-v2 :where(.dashboard-user-bar,.dashboard-card,.cat-card) :where(p,small,.description,.meta,.muted) { color:#667085 !important; opacity:1 !important; }

/* Slightly softer mobile shell; content remains full-canvas from v96. */
@media (max-width:860px) {
  html[data-lai-theme="dark"] #linguaai-app,
  html[data-lai-theme="dark"] .linguaai-app-wrapper,
  html[data-lai-theme="dark"] .linguaai-main-container,
  html[data-lai-theme="dark"] .linguaai-content {
    background:linear-gradient(180deg,#252c40 0%,#293149 100%) !important;
  }
}

/* ======================================================================
   v98 — Sentence Practice vitality + native-content contrast guardrails
   ====================================================================== */
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-section-header,
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-checkpoint-card,
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-practice-box,
html[data-lai-theme="dark"] #linguaai-sentence-practice .sp-question-card {
  --lai2-text:#202534;
  --lai2-text-soft:#566074;
  --lai2-text-faint:#70798e;
}
#linguaai-sentence-practice .sp-section-header h2,
#linguaai-sentence-practice .sp-checkpoint-title h3,
#linguaai-sentence-practice .sp-checkpoint-title-row h3 {
  color:#202534 !important;
  font-weight:800 !important;
  letter-spacing:-.012em !important;
}
#linguaai-sentence-practice .sp-checkpoint-progress-text {
  color:#667085 !important;
  font-weight:700 !important;
}
#linguaai-sentence-practice .sp-activity-card {
  background:#fff !important;
  border-color:#dfe4ec !important;
  box-shadow:0 3px 10px rgba(31,41,55,.035) !important;
}
#linguaai-sentence-practice .sp-activity-copy strong {
  color:#30384a !important;
  font-weight:760 !important;
}
#linguaai-sentence-practice .sp-activity-copy small {
  color:#687386 !important;
  font-weight:620 !important;
  opacity:1 !important;
}
#linguaai-sentence-practice .sp-activity-card.status-completed {
  background:#f7fcf9 !important;
  border-color:#b9dfcf !important;
}
#linguaai-sentence-practice .sp-activity-card.status-completed .sp-activity-copy strong { color:#225c49 !important; }
#linguaai-sentence-practice .sp-activity-card.status-completed .sp-activity-copy small { color:#527366 !important; }
#linguaai-sentence-practice .sp-activity-card.status-active {
  background:#faf9ff !important;
  border-color:#cfc7f4 !important;
  box-shadow:0 6px 16px rgba(91,75,216,.08) !important;
}
#linguaai-sentence-practice .sp-question-prompt,
#linguaai-sentence-practice .sp-source-text,
#linguaai-sentence-practice #sp-question-text {
  color:#1f2937 !important;
  font-weight:780 !important;
  letter-spacing:-.014em !important;
}
#linguaai-sentence-practice .sp-instruction,
#linguaai-sentence-practice .sp-hint,
#linguaai-sentence-practice .sp-helper,
#linguaai-sentence-practice .sp-answer-help {
  color:#667085 !important;
  opacity:1 !important;
}
#linguaai-sentence-practice .sp-focus-tag {
  color:#5b46cf !important;
  background:#f1efff !important;
  border:1px solid #ded9ff !important;
  font-weight:800 !important;
}
@media (max-width: 560px) {
  #linguaai-sentence-practice .sp-checkpoint-title h3,
  #linguaai-sentence-practice .sp-checkpoint-title-row h3 { font-size:.96rem !important; }
  #linguaai-sentence-practice .sp-activity-copy strong { font-size:.8rem !important; }
  #linguaai-sentence-practice .sp-activity-copy small { font-size:.66rem !important; line-height:1.35 !important; }
}

/* ======================================================================
   v101 — Grammar contrast + KNM route recovery visual guardrails
   ====================================================================== */
html[data-lai-theme="dark"] #linguaai-grammar .grammar-context-contract {
  background:#ffffff !important;
  border-color:#e1e5ed !important;
  color:#344054 !important;
}
html[data-lai-theme="dark"] #linguaai-grammar .grammar-context-contract > span,
html[data-lai-theme="dark"] #linguaai-grammar .grammar-context-contract .grammar-context-note {
  color:#596174 !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] #linguaai-grammar .grammar-context-contract > span:first-child {
  color:#344054 !important;
  font-weight:750 !important;
}
html[data-lai-theme="dark"] #linguaai-grammar .grammar-topic-section > h3,
html[data-lai-theme="dark"] #linguaai-grammar #grammar-topic-section > h3 {
  color:#f7f8fc !important;
  opacity:1 !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}
html[data-lai-theme="dark"] #linguaai-grammar .grammar-topic-section {
  color:#f7f8fc !important;
}
html[data-lai-theme="dark"] .lai-knm-v2 .knm-welcome > h2,
html[data-lai-theme="dark"] .lai-knm-v2 .knm-topic-heading > h3 {
  color:#f7f8fc !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] .lai-knm-v2 .knm-welcome > p {
  color:#cbd2e3 !important;
  opacity:1 !important;
}
@media (max-width: 860px) {
  #linguaai-grammar .grammar-context-contract { gap:6px !important; padding:10px 12px !important; }
  #linguaai-grammar .grammar-topic-section > h3 { font-size:1rem !important; line-height:1.35 !important; }
}


/* ======================================================================
   v104 — Verb learning input contrast regression fix
   White learning surfaces must always use dark form copy, even when the
   outer Modern theme is dark/slate.
   ====================================================================== */
html[data-lai-theme="dark"] .lai-module-verbs :where(.lv-learning-card,.lv-production-shell,.lv-library) :where(input.lv-answer-input,textarea.lv-production,.lv-library-tools input,.lv-library-tools select) {
  background:#ffffff !important;
  color:#202534 !important;
  -webkit-text-fill-color:#202534 !important;
  caret-color:#6541e8 !important;
  border-color:#cfd5e2 !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] .lai-module-verbs :where(.lv-learning-card,.lv-production-shell,.lv-library) :where(input.lv-answer-input,textarea.lv-production,.lv-library-tools input)::placeholder {
  color:#8a93a7 !important;
  -webkit-text-fill-color:#8a93a7 !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] .lai-module-verbs :where(.lv-learning-card,.lv-production-shell) :where(.lv-question,.lv-production-label,.lv-production-help) {
  color:#596174 !important;
  opacity:1 !important;
}
html[data-lai-theme="dark"] .lai-module-verbs :where(.lv-learning-card,.lv-production-shell) :where(input.lv-answer-input,textarea.lv-production):focus {
  border-color:#7657eb !important;
  box-shadow:0 0 0 4px rgba(118,87,235,.14) !important;
}

/* ======================================================================
   v105 — KNM detail heading contrast fix
   Topic/detail section headings live directly on the Modern dark shell,
   while the AI tutor remains a light card and keeps dark copy.
   ====================================================================== */
html[data-lai-theme="dark"] .lai-knm-v2 .knm-tab-content > .knm-section-title {
  color:#f7f8fc !important;
  opacity:1 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.10) !important;
}
html[data-lai-theme="dark"] .lai-knm-v2 .knm-ai-tutor .knm-section-title {
  color:#202534 !important;
  text-shadow:none !important;
}
@media (max-width:860px) {
  html[data-lai-theme="dark"] .lai-knm-v2 .knm-tab-content > .knm-section-title {
    font-size:1.18rem !important;
    line-height:1.35 !important;
  }
}