/* =========================================================
   Woospeak AI V15 — Design System Components
   Foundation classes for progressive migration.
   Existing module CSS can gradually map old selectors to these tokens.
   ========================================================= */

#woospeak-ai-app .ws-ui-button,
#woospeak-ai-app .ws-ui-button-secondary,
#woospeak-ai-app .ws-ui-button-primary{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-space-2);
  padding: 0 var(--ws-space-5);
  border-radius: var(--ws-radius-pill);
  border: 1px solid var(--ws-color-border);
  font-family: var(--ws-font-sans);
  font-weight: var(--ws-font-weight-medium);
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ws-motion-normal) var(--ws-ease-standard),
              border-color var(--ws-motion-normal) var(--ws-ease-standard),
              background var(--ws-motion-normal) var(--ws-ease-standard),
              box-shadow var(--ws-motion-normal) var(--ws-ease-standard),
              color var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-ui-button-primary{
  color: #fff;
  background: var(--ws-gradient-primary);
  border-color: rgba(147,197,253,.42);
  box-shadow: var(--ws-glow-blue);
}

#woospeak-ai-app .ws-ui-button,
#woospeak-ai-app .ws-ui-button-secondary{
  color: var(--ws-color-text-soft);
  background: var(--ws-gradient-field);
  border-color: var(--ws-color-border);
}

#woospeak-ai-app .ws-ui-button:hover,
#woospeak-ai-app .ws-ui-button-secondary:hover,
#woospeak-ai-app .ws-ui-button-primary:hover{
  transform: translateY(-1px);
  border-color: var(--ws-color-border-strong);
  box-shadow: var(--ws-shadow-md);
}

#woospeak-ai-app .ws-ui-button:focus-visible,
#woospeak-ai-app .ws-ui-button-secondary:focus-visible,
#woospeak-ai-app .ws-ui-button-primary:focus-visible{
  outline: none;
  box-shadow: var(--ws-focus-ring), var(--ws-shadow-md);
}

#woospeak-ai-app .ws-ui-card,
#woospeak-ai-app .ws-ui-panel{
  color: var(--ws-color-text);
  background: var(--ws-gradient-surface);
  border: 1px solid var(--ws-color-border);
  border-radius: var(--ws-radius-xl);
  box-shadow: var(--ws-shadow-md);
}

#woospeak-ai-app .ws-ui-card{
  padding: var(--ws-space-6);
}

#woospeak-ai-app .ws-ui-panel{
  padding: var(--ws-space-8);
}

#woospeak-ai-app .ws-ui-input,
#woospeak-ai-app .ws-ui-select,
#woospeak-ai-app .ws-ui-textarea{
  width: 100%;
  min-height: 44px;
  color: var(--ws-color-text);
  background: var(--ws-gradient-field);
  border: 1px solid var(--ws-color-border);
  border-radius: var(--ws-radius-md);
  padding: 0 var(--ws-space-4);
  font-family: var(--ws-font-sans);
  transition: border-color var(--ws-motion-normal) var(--ws-ease-standard),
              box-shadow var(--ws-motion-normal) var(--ws-ease-standard),
              background var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-ui-textarea{
  min-height: 96px;
  padding-block: var(--ws-space-3);
  resize: vertical;
}

#woospeak-ai-app .ws-ui-input:focus,
#woospeak-ai-app .ws-ui-select:focus,
#woospeak-ai-app .ws-ui-textarea:focus{
  outline: none;
  border-color: var(--ws-color-border-strong);
  box-shadow: var(--ws-focus-ring);
}

#woospeak-ai-app .ws-ui-badge,
#woospeak-ai-app .ws-ui-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-space-1);
  color: var(--ws-color-text-soft);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ws-color-border);
  border-radius: var(--ws-radius-pill);
  font-weight: var(--ws-font-weight-medium);
}

#woospeak-ai-app .ws-ui-badge{ padding: 4px 10px; font-size: .78rem; }
#woospeak-ai-app .ws-ui-chip{ padding: 7px 12px; font-size: .86rem; }

#woospeak-ai-app .ws-ui-progress{
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: var(--ws-radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

#woospeak-ai-app .ws-ui-progress > span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ws-gradient-primary);
  box-shadow: var(--ws-glow-blue);
}

/* =========================================================
   V15.0.2 — Component aliases and variants for Chat migration
   These classes are the canonical component API. Legacy chat selectors
   are migrated in woospeak-ai.message.css while preserving markup.
   ========================================================= */

#woospeak-ai-app .ws-ui-button--primary{
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:var(--ws-gradient-primary);
  border-color:rgba(147,197,253,.42);
  box-shadow:var(--ws-glow-blue);
}

#woospeak-ai-app .ws-ui-button--secondary{
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  background:var(--ws-gradient-field);
  border-color:var(--ws-color-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--ws-shadow-sm);
}

#woospeak-ai-app .ws-ui-button--ghost{
  color:var(--ws-color-muted);
  -webkit-text-fill-color:var(--ws-color-muted);
  background:rgba(255,255,255,.045);
  border-color:var(--ws-color-border);
  box-shadow:none;
}

#woospeak-ai-app .ws-ui-button--danger{
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:linear-gradient(135deg,#e11d48,#fb7185);
  border-color:rgba(251,113,133,.42);
  box-shadow:0 0 34px rgba(251,113,133,.22);
}

#woospeak-ai-app .ws-ui-card--interactive{
  transition:transform var(--ws-motion-normal) var(--ws-ease-standard),
             border-color var(--ws-motion-normal) var(--ws-ease-standard),
             box-shadow var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-ui-card--interactive:hover{
  transform:translateY(-2px);
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-lg), var(--ws-glow-blue);
}

#woospeak-ai-app .ws-ui-card--compact{
  padding:var(--ws-space-4);
  border-radius:var(--ws-radius-lg);
}

#woospeak-ai-app .ws-ui-loader{
  display:inline-flex;
  align-items:center;
  gap:var(--ws-space-2);
  color:var(--ws-color-muted);
  font-weight:var(--ws-font-weight-medium);
}

#woospeak-ai-app .ws-ui-loader::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--ws-color-primary);
  box-shadow:0 0 18px rgba(96,165,250,.58);
  animation:wsUiPulse var(--ws-motion-slow) var(--ws-ease-standard) infinite alternate;
}

@keyframes wsUiPulse{
  from{ opacity:.45; transform:scale(.86); }
  to{ opacity:1; transform:scale(1.08); }
}

/* =========================================================
   V15.0.3 — Additional canonical variants used by Simulation
   ========================================================= */
#woospeak-ai-app .ws-ui-icon-button{
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:var(--ws-radius-pill);
  color:var(--ws-color-text-soft);
  background:var(--ws-gradient-field);
  border:1px solid var(--ws-color-border);
  box-shadow:var(--ws-shadow-sm);
  cursor:pointer;
  transition:transform var(--ws-motion-normal) var(--ws-ease-standard),
             border-color var(--ws-motion-normal) var(--ws-ease-standard),
             background var(--ws-motion-normal) var(--ws-ease-standard),
             box-shadow var(--ws-motion-normal) var(--ws-ease-standard),
             color var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-ui-icon-button:hover{
  transform:translateY(-1px);
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-md);
}

#woospeak-ai-app .ws-ui-icon-button.is-active,
#woospeak-ai-app .ws-ui-button.is-active,
#woospeak-ai-app .ws-ui-button-secondary.is-active{
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:var(--ws-gradient-primary);
  border-color:rgba(147,197,253,.42);
  box-shadow:var(--ws-glow-blue);
}

#woospeak-ai-app .ws-ui-choice{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:var(--ws-space-3) var(--ws-space-5);
  border-radius:var(--ws-radius-md);
  color:var(--ws-color-text-soft);
  background:var(--ws-gradient-field);
  border:1px solid var(--ws-color-border);
  box-shadow:var(--ws-shadow-sm);
  cursor:pointer;
  transition:transform var(--ws-motion-normal) var(--ws-ease-standard),
             border-color var(--ws-motion-normal) var(--ws-ease-standard),
             box-shadow var(--ws-motion-normal) var(--ws-ease-standard),
             background var(--ws-motion-normal) var(--ws-ease-standard),
             color var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-ui-choice:hover{
  transform:translateY(-1px);
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-md);
}

#woospeak-ai-app .ws-ui-choice.is-active,
#woospeak-ai-app .ws-ui-choice:has(input:checked){
  color:#fff;
  background:var(--ws-gradient-primary);
  border-color:rgba(147,197,253,.42);
  box-shadow:var(--ws-glow-blue);
}

/* =========================================================
   V15.0.5 — Courses Design System Bridge
   Centralized component rules for Generator + Library + Course Reader.
   Legacy course selectors are mapped here so the visual source of truth
   stays in the Design System instead of module-specific CSS.
   ========================================================= */

#woospeak-ai-app .ws-ui-hero,
#woospeak-ai-app .woospeak-ai-courses-header{
  position:relative;
  overflow:hidden;
  color:var(--ws-color-text);
  background:var(--ws-gradient-surface);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-xl);
  box-shadow:var(--ws-shadow-md);
  padding:var(--ws-space-6);
}

#woospeak-ai-app .ws-ui-hero::before,
#woospeak-ai-app .woospeak-ai-courses-header::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:radial-gradient(480px 180px at 0% 0%, rgba(96,165,250,.18), transparent 64%);
  opacity:.9;
}

#woospeak-ai-app .ws-ui-hero > *,
#woospeak-ai-app .woospeak-ai-courses-header > *{
  position:relative;
  z-index:1;
}

#woospeak-ai-app .woospeak-ai-courses-title,
#woospeak-ai-app .woospeak-ai-courses-library-title,
#woospeak-ai-app .woospeak-ai-courses-card-title,
#woospeak-ai-app .ws-course-section-title,
#woospeak-ai-app .ws-course-subsection-title{
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
}

#woospeak-ai-app .woospeak-ai-courses-intro,
#woospeak-ai-app .woospeak-ai-courses-library-intro,
#woospeak-ai-app .woospeak-ai-course-help,
#woospeak-ai-app .woospeak-ai-course-placeholder,
#woospeak-ai-app .ws-course-muted{
  color:var(--ws-color-muted);
  -webkit-text-fill-color:var(--ws-color-muted);
}

/* Panels / cards */
#woospeak-ai-app .woospeak-ai-course-form,
#woospeak-ai-app .woospeak-ai-courses-card,
#woospeak-ai-app .woospeak-ai-courses-library-card,
#woospeak-ai-app .woospeak-ai-courses-related,
#woospeak-ai-app .ws-course-card,
#woospeak-ai-app .ws-course-card-blue,
#woospeak-ai-app .ws-course-card-yellow,
#woospeak-ai-app .ws-course-card-green,
#woospeak-ai-app .ws-course-card-red,
#woospeak-ai-app .ws-course-card-purple,
#woospeak-ai-app .ws-course-card-voice,
#woospeak-ai-app .ws-course-rule-integrated,
#woospeak-ai-app .ws-course-ai-writing,
#woospeak-ai-app .ws-course-ai-mission-section,
#woospeak-ai-app .ws-course-progress-panel,
#woospeak-ai-app .ws-course-resume-box{
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
  background:var(--ws-gradient-surface);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-xl);
  box-shadow:var(--ws-shadow-md);
}

#woospeak-ai-app .woospeak-ai-course-form,
#woospeak-ai-app .woospeak-ai-courses-card,
#woospeak-ai-app .woospeak-ai-courses-library-card{
  padding:var(--ws-space-6);
}

/* Search / filters */
#woospeak-ai-app .ws-ui-searchbar,
#woospeak-ai-app .woospeak-ai-library-filters{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ws-space-3);
  align-items:flex-end;
  padding:var(--ws-space-4);
  border-radius:var(--ws-radius-lg);
  border:1px solid var(--ws-color-border);
  background:var(--ws-color-card-soft);
  box-shadow:var(--ws-shadow-sm);
}

#woospeak-ai-app .woospeak-ai-course-field label,
#woospeak-ai-app .woospeak-ai-library-filters .woospeak-ai-course-field label{
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  font-weight:var(--ws-font-weight-bold);
}

#woospeak-ai-app .woospeak-ai-course-textarea,
#woospeak-ai-app .woospeak-ai-course-select,
#woospeak-ai-app .woospeak-ai-course-search-input,
#woospeak-ai-app .ws-course-render textarea,
#woospeak-ai-app .ws-course-render input[type="text"],
#woospeak-ai-app .ws-course-ai-textarea,
#woospeak-ai-app .ws-course-ai-large-textarea{
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
  background:var(--ws-gradient-field);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color var(--ws-motion-normal) var(--ws-ease-standard),
             box-shadow var(--ws-motion-normal) var(--ws-ease-standard),
             background var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .woospeak-ai-course-textarea:focus,
#woospeak-ai-app .woospeak-ai-course-select:focus,
#woospeak-ai-app .woospeak-ai-course-search-input:focus,
#woospeak-ai-app .ws-course-render textarea:focus,
#woospeak-ai-app .ws-course-render input[type="text"]:focus,
#woospeak-ai-app .ws-course-ai-textarea:focus,
#woospeak-ai-app .ws-course-ai-large-textarea:focus{
  outline:none;
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-focus-ring);
}

#woospeak-ai-app .woospeak-ai-course-search-input::placeholder,
#woospeak-ai-app .woospeak-ai-course-textarea::placeholder,
#woospeak-ai-app .ws-course-render textarea::placeholder{
  color:var(--ws-color-muted-2);
  -webkit-text-fill-color:var(--ws-color-muted-2);
}

/* Buttons */
#woospeak-ai-app .woospeak-ai-btn,
#woospeak-ai-app .woospeak-ai-btn-secondary,
#woospeak-ai-app .woospeak-ai-course-generate-btn,
#woospeak-ai-app .woospeak-ai-course-open-btn,
#woospeak-ai-app .woospeak-ai-courses-topnav-btn,
#woospeak-ai-app .woospeak-ai-courses-library-reset,
#woospeak-ai-app #ws-library-reset,
#woospeak-ai-app .woospeak-ai-library-pagination button,
#woospeak-ai-app .ws-course-render .ws-btn,
#woospeak-ai-app .ws-course-page .ws-btn,
#woospeak-ai-app .woospeak-ai-course-viewer .ws-btn,
#woospeak-ai-app .ws-course-step-complete-btn,
#woospeak-ai-app .ws-course-ai-start-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ws-space-2);
  padding:0 var(--ws-space-5);
  border-radius:var(--ws-radius-pill);
  border:1px solid var(--ws-color-border);
  font-family:var(--ws-font-sans);
  font-weight:var(--ws-font-weight-medium);
  line-height:1.1;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--ws-motion-normal) var(--ws-ease-standard),
             border-color var(--ws-motion-normal) var(--ws-ease-standard),
             background var(--ws-motion-normal) var(--ws-ease-standard),
             box-shadow var(--ws-motion-normal) var(--ws-ease-standard),
             color var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .woospeak-ai-btn-secondary,
#woospeak-ai-app .woospeak-ai-courses-topnav-btn,
#woospeak-ai-app .woospeak-ai-courses-library-reset,
#woospeak-ai-app #ws-library-reset,
#woospeak-ai-app .woospeak-ai-library-pagination button,
#woospeak-ai-app .ws-course-render .ws-btn:not(.ws-btn-primary):not(.ws-btn-tts),
#woospeak-ai-app .ws-course-page .ws-btn-secondary,
#woospeak-ai-app .woospeak-ai-course-viewer .ws-btn-secondary{
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  background:var(--ws-gradient-field);
  border-color:var(--ws-color-border);
  box-shadow:var(--ws-shadow-sm);
}

#woospeak-ai-app .woospeak-ai-course-generate-btn,
#woospeak-ai-app .woospeak-ai-course-open-btn,
#woospeak-ai-app .woospeak-ai-courses-topnav-btn.is-active,
#woospeak-ai-app .woospeak-ai-library-pagination button.active,
#woospeak-ai-app .ws-course-render .ws-btn-primary,
#woospeak-ai-app .ws-course-render .ws-btn-tts,
#woospeak-ai-app .ws-course-main-tts,
#woospeak-ai-app .ws-course-step-complete-btn,
#woospeak-ai-app .ws-course-render button[type="submit"],
#woospeak-ai-app .ws-course-ai-start-btn{
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:var(--ws-gradient-primary);
  border-color:rgba(147,197,253,.42);
  box-shadow:var(--ws-glow-blue);
}

#woospeak-ai-app .woospeak-ai-btn:hover,
#woospeak-ai-app .woospeak-ai-btn-secondary:hover,
#woospeak-ai-app .woospeak-ai-course-generate-btn:hover,
#woospeak-ai-app .woospeak-ai-course-open-btn:hover,
#woospeak-ai-app .woospeak-ai-courses-topnav-btn:hover,
#woospeak-ai-app .woospeak-ai-courses-library-reset:hover,
#woospeak-ai-app #ws-library-reset:hover,
#woospeak-ai-app .woospeak-ai-library-pagination button:hover,
#woospeak-ai-app .ws-course-render .ws-btn:hover,
#woospeak-ai-app .ws-course-step-complete-btn:hover{
  transform:translateY(-1px);
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-md);
}

/* Course cards / library cards */
#woospeak-ai-app .woospeak-ai-course-thumb,
#woospeak-ai-app .woospeak-ai-course-thumb--premium{
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
  background:var(--ws-gradient-surface);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-xl);
  box-shadow:var(--ws-shadow-md);
  transition:transform var(--ws-motion-normal) var(--ws-ease-standard),
             border-color var(--ws-motion-normal) var(--ws-ease-standard),
             box-shadow var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .woospeak-ai-course-thumb:hover,
#woospeak-ai-app .woospeak-ai-course-thumb--premium:hover{
  transform:translateY(-2px);
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-lg), var(--ws-glow-blue);
}

#woospeak-ai-app .ws-course-card h1,
#woospeak-ai-app .ws-course-card h2,
#woospeak-ai-app .ws-course-card h3,
#woospeak-ai-app .ws-course-card h4,
#woospeak-ai-app .ws-course-ai-title,
#woospeak-ai-app .ws-course-rule h3,
#woospeak-ai-app .ws-course-rule h4{
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
}

/* Course media titles live on image overlays and must keep their media contrast. */
#woospeak-ai-app .woospeak-ai-course-thumb-titlebar,
#woospeak-ai-app .woospeak-ai-course-thumb-titlebar .woospeak-ai-course-thumb-title,
#woospeak-ai-app .woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-title,
#woospeak-ai-app .ws-course-hero .ws-course-title{
  color:var(--ws-legacy-white);
  -webkit-text-fill-color:var(--ws-legacy-white);
}

#woospeak-ai-app .woospeak-ai-course-thumb-meta,
#woospeak-ai-app .woospeak-ai-course-thumb-date,
#woospeak-ai-app .woospeak-ai-course-thumb-topic,
#woospeak-ai-app .woospeak-ai-course-thumb-language,
#woospeak-ai-app .ws-course-card p,
#woospeak-ai-app .ws-course-card li,
#woospeak-ai-app .ws-course-resume-text,
#woospeak-ai-app .ws-course-progress-time{
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
}

#woospeak-ai-app .woospeak-ai-courses-library-count,
#woospeak-ai-app .woospeak-ai-courses-library-results,
#woospeak-ai-app .ws-course-level-badge,
#woospeak-ai-app .ws-course-topic-badge,
#woospeak-ai-app .ws-course-ai-meta-chip,
#woospeak-ai-app .ws-course-render .ws-badge,
#woospeak-ai-app .ws-course-render .ws-pill,
#woospeak-ai-app .ws-course-render .ws-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ws-space-1);
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  background:rgba(255,255,255,.06);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-pill);
  padding:6px 12px;
  font-weight:var(--ws-font-weight-medium);
  box-shadow:none;
}

/* Pedagogical reader blocks */
#woospeak-ai-app .ws-course-inline-block,
#woospeak-ai-app .ws-course-exercise,
#woospeak-ai-app .ws-course-vocab-trainer,
#woospeak-ai-app .ws-course-quick-challenge,
#woospeak-ai-app .ws-course-ai-task,
#woospeak-ai-app .ws-course-ai-correction,
#woospeak-ai-app .ws-course-ai-feedback-box,
#woospeak-ai-app .ws-course-ai-errors,
#woospeak-ai-app .ws-course-flashcard,
#woospeak-ai-app .ws-course-flashcard-front,
#woospeak-ai-app .ws-course-flashcard-back,
#woospeak-ai-app .ws-course-flashcard-deck,
#woospeak-ai-app .ws-course-render [class*="exercise"],
#woospeak-ai-app .ws-course-render [class*="quiz"],
#woospeak-ai-app .ws-course-render [class*="practice"],
#woospeak-ai-app .ws-course-render [class*="criteria"],
#woospeak-ai-app .ws-course-render [class*="feedback"]{
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
  background:var(--ws-color-card-soft);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-lg);
  box-shadow:var(--ws-shadow-sm);
}

#woospeak-ai-app .ws-course-choice,
#woospeak-ai-app .ws-course-render .ws-course-choice,
#woospeak-ai-app .ws-course-render .ws-flash-choice,
#woospeak-ai-app .ws-course-render .ws-quiz-choice,
#woospeak-ai-app .ws-course-render .ws-course-exercise label{
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  background:var(--ws-gradient-field);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-md);
}

#woospeak-ai-app .ws-course-choice:hover,
#woospeak-ai-app .ws-course-render .ws-course-choice:hover,
#woospeak-ai-app .ws-course-render .ws-flash-choice:hover,
#woospeak-ai-app .ws-course-render .ws-quiz-choice:hover,
#woospeak-ai-app .ws-course-render .ws-course-exercise label:hover{
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-sm);
}

#woospeak-ai-app .ws-course-progress,
#woospeak-ai-app .woospeak-ai-course-thumb-progress,
#woospeak-ai-app .ws-course-progress-panel .ws-course-progress{
  overflow:hidden;
  height:10px;
  border-radius:var(--ws-radius-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

#woospeak-ai-app .ws-course-progress-bar,
#woospeak-ai-app .woospeak-ai-course-thumb-progress::before,
#woospeak-ai-app .ws-course-progress-panel .ws-course-progress-bar{
  background:var(--ws-gradient-primary);
  box-shadow:var(--ws-glow-blue);
}

#woospeak-ai-app .woospeak-ai-library-empty{
  color:var(--ws-color-muted);
  -webkit-text-fill-color:var(--ws-color-muted);
  background:var(--ws-color-card-soft);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-xl);
  box-shadow:var(--ws-shadow-sm);
}

@media (max-width: 820px){
  #woospeak-ai-app .woospeak-ai-library-filters{
    flex-direction:column;
    align-items:stretch;
  }
  #woospeak-ai-app .woospeak-ai-course-form,
  #woospeak-ai-app .woospeak-ai-courses-card,
  #woospeak-ai-app .woospeak-ai-courses-library-card,
  #woospeak-ai-app .woospeak-ai-courses-header{
    padding:var(--ws-space-4);
    border-radius:var(--ws-radius-lg);
  }
}

/* =========================================================
   V15.0.6 — Layout primitives used by Dashboard and future pages
   ========================================================= */
#woospeak-ai-app .ws-ui-hero{
  color:var(--ws-color-text);
  background:radial-gradient(900px 260px at 0% 0%, rgba(96,165,250,.16), transparent 56%), var(--ws-gradient-surface);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-xl);
  box-shadow:var(--ws-shadow-lg), var(--ws-glow-violet);
  padding:var(--ws-space-6);
}

#woospeak-ai-app .ws-ui-empty-state{
  text-align:left;
  color:var(--ws-color-text-soft);
}


/* =========================================================
   V15.0.7.9 — Theme switcher component
   Canonical shared UI control for light / dark / auto mode.
   ========================================================= */
#woospeak-ai-app .ws-theme-switcher{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:var(--ws-space-2);
}

#woospeak-ai-app .ws-theme-switcher__button{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border-radius:var(--ws-radius-pill);
  border:1px solid var(--ws-color-border);
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  background:var(--ws-gradient-field);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--ws-shadow-sm);
  font-family:var(--ws-font-sans);
  font-size:.82rem;
  font-weight:var(--ws-font-weight-medium);
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--ws-motion-normal) var(--ws-ease-standard), border-color var(--ws-motion-normal) var(--ws-ease-standard), box-shadow var(--ws-motion-normal) var(--ws-ease-standard), background var(--ws-motion-normal) var(--ws-ease-standard), color var(--ws-motion-normal) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-theme-switcher__button:hover{
  transform:translateY(-1px);
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-md);
}

#woospeak-ai-app .ws-theme-switcher__button:focus-visible{
  outline:none;
  box-shadow:var(--ws-focus-ring), var(--ws-shadow-md);
}

#woospeak-ai-app .ws-theme-switcher__icon{
  font-size:1rem;
  line-height:1;
}

#woospeak-ai-app .ws-theme-switcher__label{
  line-height:1;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */


html[data-ws-theme="auto"] body,
body:has(#woospeak-ai-app[data-theme="auto"]){
  background:var(--ws-gradient-page) !important;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */



/* =========================================================
   V16.0.4 — Woospeak Design System 2.0 / Component unification
   Purpose: stop screen-by-screen visual drift by imposing one light-mode
   component language: fewer greys, fewer nested frames, stronger hierarchy,
   consistent white/ice surfaces, and one accent system.
   ========================================================= */
#woospeak-ai-app{
  --wds-radius-page:32px;
  --wds-radius-card:28px;
  --wds-radius-control:18px;
  --wds-radius-pill:999px;
  --wds-gap-xs:8px;
  --wds-gap-sm:16px;
  --wds-gap-md:24px;
  --wds-gap-lg:32px;
  --wds-gap-xl:48px;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */


#woospeak-ai-app .ws-page-subtitle,
#woospeak-ai-app .woospeak-ai-courses-intro{
  margin:0;
  max-width:68ch;
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  font-size:1rem;
  line-height:1.65;
}

#woospeak-ai-app .ws-card,
#woospeak-ai-app .ws-form,
#woospeak-ai-app .woospeak-ai-course-form,
#woospeak-ai-app .woospeak-ai-courses-card,
#woospeak-ai-app .woospeak-ai-courses-library-card{
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
  background:var(--ws-gradient-surface);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-xl);
  box-shadow:var(--ws-shadow-md);
}

#woospeak-ai-app .ws-form,
#woospeak-ai-app .woospeak-ai-course-form{
  padding:var(--ws-space-6);
}

#woospeak-ai-app .ws-tabbar,
#woospeak-ai-app .woospeak-ai-courses-topnav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ws-space-3);
  align-items:center;
}

#woospeak-ai-app .ws-tab,
#woospeak-ai-app .woospeak-ai-courses-topnav-btn{
  min-height:44px;
  border-radius:var(--ws-radius-pill);
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */


/* =========================================================
   V16.1 — Complete WDS Migration, Sprint 2
   Pedagogical components: right coach card, audio controls, quiz choices,
   feedback and readable generated content. This layer centralizes visual
   primitives without changing pedagogical/business logic.
   ========================================================= */

#woospeak-ai-app{
  --ws-audio-size: 36px;
  --ws-card-section-gap: var(--ws-space-4);
  --ws-card-section-pad: var(--ws-space-4);
  --ws-divider: 1px solid var(--ws-color-border);
}

/* Right-side pedagogical card: one visual language, no nested-frame effect. */
#woospeak-ai-app :where(.woospeak-ai-card, #woospeak-ai-card, #woospeak-ai-card-aside){
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
}

#woospeak-ai-app :where(.woospeak-ai-card-empty, .ws-sim-panel){
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:inherit;
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
}

#woospeak-ai-app :where(.woospeak-ai-card-empty--framed, .woospeak-ai-card-empty.is-framed){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#woospeak-ai-app .woospeak-ai-card-empty-head{
  display:flex;
  align-items:center;
  gap:var(--ws-space-3);
  padding:0 0 var(--ws-space-4);
  margin:0 0 var(--ws-space-4);
  border-bottom:var(--ws-divider);
}

#woospeak-ai-app .woospeak-ai-card-empty-badge{
  inline-size:34px;
  block-size:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--ws-radius-pill);
  background:var(--ws-gradient-primary);
  color:var(--ws-legacy-white);
  -webkit-text-fill-color:var(--ws-legacy-white);
  box-shadow:var(--ws-glow-blue);
  flex:0 0 auto;
}

#woospeak-ai-app .woospeak-ai-card-empty-title{
  font-family:var(--ws-font-sans);
  font-size:1.05rem;
  line-height:1.25;
  font-weight:var(--ws-font-weight-bold);
  letter-spacing:-.015em;
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
}

#woospeak-ai-app .woospeak-ai-card-empty-bar{
  flex:1 1 auto;
  min-width:40px;
  height:1px;
  border-radius:var(--ws-radius-pill);
  background:linear-gradient(90deg,var(--ws-color-border-strong),transparent);
  opacity:.85;
}

#woospeak-ai-app :where(.woospeak-ai-card-empty-section, .ws-sim-prep-section, .ws-sim-live-section){
  padding:var(--ws-card-section-pad) 0;
  border-top:var(--ws-divider);
}

#woospeak-ai-app :where(.woospeak-ai-card-empty-section, .ws-sim-prep-section, .ws-sim-live-section):first-of-type{
  border-top:0;
  padding-top:0;
}

#woospeak-ai-app .woospeak-ai-card-empty-subtitle{
  display:flex;
  align-items:center;
  gap:var(--ws-space-2);
  margin:0 0 var(--ws-space-2);
  font-size:.78rem;
  line-height:1.2;
  font-weight:var(--ws-font-weight-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ws-color-primary);
  -webkit-text-fill-color:var(--ws-color-primary);
}

#woospeak-ai-app .woospeak-ai-card-empty-text{
  margin:0;
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  font-size:.95rem;
  line-height:1.62;
  font-weight:var(--ws-font-weight-regular);
}

#woospeak-ai-app .woospeak-ai-card-empty-text + .woospeak-ai-card-empty-subtitle,
#woospeak-ai-app .woospeak-ai-card-empty-text + .woospeak-ai-card-empty-text{
  margin-top:var(--ws-space-3);
}

#woospeak-ai-app :where(.woospeak-ai-card-empty-list, .ws-sim-list){
  display:grid;
  gap:var(--ws-space-2);
  margin:var(--ws-space-2) 0 0;
  padding:0;
  list-style:none;
}

#woospeak-ai-app :where(.woospeak-ai-card-empty-list li, .ws-sim-list li){
  display:flex;
  gap:var(--ws-space-2);
  align-items:flex-start;
  padding:var(--ws-space-2) 0;
  border-top:var(--ws-divider);
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
}

#woospeak-ai-app :where(.woospeak-ai-card-empty-list li, .ws-sim-list li):first-child{
  border-top:0;
}

/* Audio buttons: compact accent control instead of heavy black controls. */
#woospeak-ai-app :where(
  .woospeak-ai-tts-button,
  .woospeak-ai-audio-button,
  .ws-sim-tts-button,
  .ws-sim-audio-button,
  button[data-ws-sim-tts],
  button[data-ws-audio]
){
  inline-size:var(--ws-audio-size);
  block-size:var(--ws-audio-size);
  min-inline-size:var(--ws-audio-size);
  min-block-size:var(--ws-audio-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:var(--ws-radius-pill);
  border:1px solid var(--ws-color-border-strong);
  background:var(--ws-gradient-primary);
  color:var(--ws-legacy-white);
  -webkit-text-fill-color:var(--ws-legacy-white);
  box-shadow:var(--ws-glow-blue);
  transition:transform var(--ws-motion-fast) var(--ws-ease-standard), box-shadow var(--ws-motion-fast) var(--ws-ease-standard), opacity var(--ws-motion-fast) var(--ws-ease-standard);
}

#woospeak-ai-app :where(
  .woospeak-ai-tts-button,
  .woospeak-ai-audio-button,
  .ws-sim-tts-button,
  .ws-sim-audio-button,
  button[data-ws-sim-tts],
  button[data-ws-audio]
):hover{
  transform:translateY(-1px);
  box-shadow:var(--ws-glow-violet);
}

#woospeak-ai-app :where(
  .woospeak-ai-tts-button,
  .woospeak-ai-audio-button,
  .ws-sim-tts-button,
  .ws-sim-audio-button,
  button[data-ws-sim-tts],
  button[data-ws-audio]
):focus-visible{
  outline:0;
  box-shadow:var(--ws-focus-ring), var(--ws-glow-blue);
}

#woospeak-ai-app .ws-sim-audio-stack{
  display:inline-flex;
  align-items:center;
  gap:var(--ws-space-2);
}

/* Quiz: card choices instead of native-form look. */
#woospeak-ai-app .ws-quiz{
  display:grid;
  gap:var(--ws-space-4);
}

#woospeak-ai-app .ws-quiz-item{
  padding:var(--ws-space-4) 0;
  border-top:var(--ws-divider);
}

#woospeak-ai-app .ws-quiz-item:first-child{
  border-top:0;
  padding-top:0;
}

#woospeak-ai-app .ws-quiz-q{
  margin:0 0 var(--ws-space-3);
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
  font-weight:var(--ws-font-weight-bold);
  line-height:1.45;
}

#woospeak-ai-app .ws-quiz-options{
  display:grid;
  gap:var(--ws-space-2);
}

#woospeak-ai-app .ws-quiz-choice{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--ws-space-3);
  min-height:48px;
  padding:var(--ws-space-3) var(--ws-space-4);
  border:1px solid var(--ws-color-border);
  border-radius:var(--ws-radius-lg);
  background:var(--ws-color-card-soft);
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  box-shadow:var(--ws-shadow-sm);
  cursor:pointer;
  transition:transform var(--ws-motion-fast) var(--ws-ease-standard), border-color var(--ws-motion-fast) var(--ws-ease-standard), background var(--ws-motion-fast) var(--ws-ease-standard), box-shadow var(--ws-motion-fast) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-quiz-choice:hover{
  transform:translateY(-1px);
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-shadow-md);
}

#woospeak-ai-app .ws-quiz-choice input[type='radio'],
#woospeak-ai-app .ws-quiz-choice input[type='checkbox']{
  appearance:none;
  -webkit-appearance:none;
  inline-size:var(--wds-radio-size);
  block-size:var(--wds-radio-size);
  margin:0;
  flex:0 0 var(--wds-radio-size);
  cursor:pointer;
  border:2px solid var(--wds-radio-border);
  background:var(--wds-radio-bg);
  box-shadow:inset 0 0 0 3px var(--wds-radio-bg);
  transition:background var(--ws-motion-fast) var(--ws-ease-standard), border-color var(--ws-motion-fast) var(--ws-ease-standard), box-shadow var(--ws-motion-fast) var(--ws-ease-standard);
}

#woospeak-ai-app .ws-quiz-choice input[type='radio']{
  border-radius:999px;
}

#woospeak-ai-app .ws-quiz-choice input[type='checkbox']{
  border-radius:6px;
}

#woospeak-ai-app .ws-quiz-choice input[type='radio']:checked{
  border-color:var(--wds-radio-selected);
  background:var(--wds-radio-selected);
  box-shadow:inset 0 0 0 4px var(--wds-radio-selected-dot);
}

#woospeak-ai-app .ws-quiz-choice input[type='checkbox']:checked{
  border-color:var(--wds-radio-selected);
  background:var(--wds-radio-selected);
  box-shadow:inset 0 0 0 3px var(--wds-radio-selected);
}

#woospeak-ai-app .ws-quiz-choice:has(input:checked){
  background:var(--wds-choice-selected-bg);
  border-color:var(--wds-border-strong);
  box-shadow:var(--ws-focus-ring);
}

#woospeak-ai-app .ws-quiz-choice span{
  color:inherit;
  -webkit-text-fill-color:inherit;
  font-weight:var(--ws-font-weight-medium);
  line-height:1.35;
}

#woospeak-ai-app .ws-quiz-row{
  display:flex;
  gap:var(--ws-space-2);
  align-items:center;
}

#woospeak-ai-app .ws-quiz-input{
  min-height:48px;
  flex:1 1 auto;
  border-radius:var(--ws-radius-lg);
  border:1px solid var(--ws-color-border);
  background:var(--ws-gradient-field);
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
  padding:0 var(--ws-space-4);
  box-shadow:var(--ws-shadow-sm);
}

#woospeak-ai-app .ws-quiz-input:focus{
  outline:0;
  border-color:var(--ws-color-border-strong);
  box-shadow:var(--ws-focus-ring);
}

#woospeak-ai-app .ws-quiz-check{
  min-height:44px;
  padding:0 var(--ws-space-5);
  border-radius:var(--ws-radius-pill);
  border:1px solid var(--ws-color-border-strong);
  background:var(--ws-gradient-primary);
  color:var(--ws-legacy-white);
  -webkit-text-fill-color:var(--ws-legacy-white);
  font-weight:var(--ws-font-weight-bold);
  box-shadow:var(--ws-glow-blue);
}

#woospeak-ai-app .ws-quiz-feedback{
  margin-top:var(--ws-space-3);
  padding:var(--ws-space-3) var(--ws-space-4);
  border-radius:var(--ws-radius-lg);
  border:1px solid var(--ws-color-border);
  background:var(--ws-color-card-soft);
  color:var(--ws-color-text-soft);
  -webkit-text-fill-color:var(--ws-color-text-soft);
  line-height:1.55;
  font-weight:var(--ws-font-weight-medium);
}

#woospeak-ai-app .ws-quiz-feedback:empty{
  display:none;
}

#woospeak-ai-app .ws-quiz-feedback.is-ok{
  border-color:color-mix(in srgb, var(--ws-color-success) 42%, transparent);
  background:color-mix(in srgb, var(--ws-color-success) 12%, var(--ws-color-card-soft));
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
}

#woospeak-ai-app .ws-quiz-feedback.is-ko{
  border-color:color-mix(in srgb, var(--ws-color-warning) 44%, transparent);
  background:color-mix(in srgb, var(--ws-color-warning) 12%, var(--ws-color-card-soft));
  color:var(--ws-color-text);
  -webkit-text-fill-color:var(--ws-color-text);
}

/* Generated chat content: reduce markdown-heavy visual weight. */
#woospeak-ai-app :where(.woospeak-ai-message, .woospeak-ai-assistant-message, .woospeak-ai-bubble) strong{
  font-weight:var(--ws-font-weight-medium);
}

#woospeak-ai-app :where(.woospeak-ai-message, .woospeak-ai-assistant-message, .woospeak-ai-bubble) :where(ol,ul){
  display:grid;
  gap:var(--ws-space-2);
  padding-left:1.25rem;
  margin:var(--ws-space-3) 0;
}

#woospeak-ai-app :where(.woospeak-ai-message, .woospeak-ai-assistant-message, .woospeak-ai-bubble) :where(li){
  line-height:1.62;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */


@media (max-width: 640px){
  #woospeak-ai-app .ws-quiz-row{
    flex-direction:column;
    align-items:stretch;
  }
  #woospeak-ai-app .ws-quiz-check{
    inline-size:100%;
  }
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */


/* =========================================================
   V17.0.0 — Woospeak Design System complete component layer
   -----------------------------------------------------------------
   This is the canonical layer loaded after legacy CSS during migration.
   It does not create one-off patches: it maps legacy selectors to a
   single component grammar through WDS semantic tokens.

   Contract:
   - same structure for dark and light;
   - dark mode is the reference;
   - light mode changes only semantic tokens;
   - all buttons/cards/choices/flashcards/quiz/course surfaces consume WDS.
   ========================================================= */

#woospeak-ai-app,
html[data-ws-theme] #woospeak-ai-app{
  --wds-radius-panel: var(--ws-radius-xl, 28px);
  --wds-radius-card: var(--ws-radius-lg, 22px);
  --wds-radius-control: var(--ws-radius-pill, 999px);
  --wds-control-height: 44px;
  --wds-control-height-lg: 56px;
  --wds-space-card: var(--ws-space-6, 24px);
  --wds-space-section: var(--ws-space-5, 20px);

  --wds-page: var(--ws-gradient-page);
  --wds-surface-panel: var(--ws-gradient-surface);
  --wds-surface-panel-soft: var(--ws-color-card-soft);
  --wds-surface-card: var(--ws-color-card);
  --wds-surface-control: var(--ws-gradient-field);
  --wds-surface-choice: var(--ws-gradient-field);
  --wds-surface-choice-active: linear-gradient(180deg,var(--ws-color-field-strong),var(--ws-color-card-soft));
  --wds-border-card: var(--ws-color-border);
  --wds-border-strong: var(--ws-color-border-strong);
  --wds-border-soft: color-mix(in srgb, var(--ws-color-border) 65%, transparent);
  --wds-text-strong: var(--ws-color-text);
  --wds-text-body: var(--ws-color-text-soft);
  --wds-text-muted: var(--ws-color-muted);
  --wds-shadow-panel: var(--ws-shadow-md);
  --wds-shadow-control: var(--ws-shadow-sm);
  --wds-focus: var(--ws-focus-ring), var(--ws-shadow-md);
  --wds-hero-overlay: linear-gradient(90deg, rgba(5,10,24,.66), rgba(5,10,24,.30), rgba(5,10,24,.10));

  /* WDS Radio Choice tokens: same geometry in dark/light, token colors only. */
  --wds-radio-size: 18px;
  --wds-radio-border: var(--ws-color-border-strong);
  --wds-radio-bg: var(--ws-color-field);
  --wds-radio-selected: var(--ws-color-primary-strong);
  --wds-radio-selected-dot: var(--ws-color-text-on-primary, #ffffff);
  --wds-choice-hover-bg: color-mix(in srgb, var(--ws-color-primary-strong) 8%, var(--wds-surface-choice));
  --wds-choice-selected-bg: color-mix(in srgb, var(--ws-color-primary-strong) 14%, var(--wds-surface-choice));
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */


/* Global WDS typography and text readability */
#woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer,#woospeak-ai-card,.woospeak-ai-card,.ws-sim-panel),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer,#woospeak-ai-card,.woospeak-ai-card,.ws-sim-panel){
  color: var(--wds-text-body) !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

#woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer,#woospeak-ai-card,.woospeak-ai-card,.ws-sim-panel) :where(h1,h2,h3,h4,h5,strong,b,.ws-card-title,.woospeak-ai-card-empty-title,.ws-course-title,.ws-course-section-title,.ws-course-subsection-title,.ws-course-step-meta,.ws-flash-word,.ws-quiz-q),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer,#woospeak-ai-card,.woospeak-ai-card,.ws-sim-panel) :where(h1,h2,h3,h4,h5,strong,b,.ws-card-title,.woospeak-ai-card-empty-title,.ws-course-title,.ws-course-section-title,.ws-course-subsection-title,.ws-course-step-meta,.ws-flash-word,.ws-quiz-q){
  color: var(--wds-text-strong) !important;
  -webkit-text-fill-color: var(--wds-text-strong) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer,#woospeak-ai-card,.woospeak-ai-card,.ws-sim-panel) :where(p,li,small,.ws-card-helper,.woospeak-ai-card-empty-text,.woospeak-ai-card-empty-hint,.ws-course-muted,.ws-course-help,.ws-flash-question,.ws-course-progress-time),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer,#woospeak-ai-card,.woospeak-ai-card,.ws-sim-panel) :where(p,li,small,.ws-card-helper,.woospeak-ai-card-empty-text,.woospeak-ai-card-empty-hint,.ws-course-muted,.ws-course-help,.ws-flash-question,.ws-course-progress-time){
  color: var(--wds-text-body) !important;
  -webkit-text-fill-color: var(--wds-text-body) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* WDS Panels / Cards: same structure for coach, courses, quiz and flashcards */
#woospeak-ai-app :where(#woospeak-ai-card,.woospeak-ai-card,.woospeak-ai-coach-card,.ws-coach-card,.ws-coach-card-panel,.ws-course-step,.ws-course-card,.ws-question-card,.ws-course-rule,.ws-course-rule-integrated,.ws-course-rule-practice,.ws-course-rule-quiz,.ws-course-ai-writing,.ws-course-ai-mission,.ws-course-ai-mission-section,.ws-course-vocab-trainer,.ws-course-quick-challenge,.ws-course-progress-panel,.ws-course-resume-box,.ws-course-flashcard-deck,.ws-flash-wow),
html[data-ws-theme] #woospeak-ai-app :where(#woospeak-ai-card,.woospeak-ai-card,.woospeak-ai-coach-card,.ws-coach-card,.ws-coach-card-panel,.ws-course-step,.ws-course-card,.ws-question-card,.ws-course-rule,.ws-course-rule-integrated,.ws-course-rule-practice,.ws-course-rule-quiz,.ws-course-ai-writing,.ws-course-ai-mission,.ws-course-ai-mission-section,.ws-course-vocab-trainer,.ws-course-quick-challenge,.ws-course-progress-panel,.ws-course-resume-box,.ws-course-flashcard-deck,.ws-flash-wow){
  background: var(--wds-surface-panel) !important;
  border: 1px solid var(--wds-border-card) !important;
  border-radius: var(--wds-radius-panel) !important;
  box-shadow: var(--wds-shadow-panel) !important;
  color: var(--wds-text-body) !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

/* Right coach card header must keep dark-mode structure in every theme */
#woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-head,.ws-card-head),
html[data-ws-theme] #woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-head,.ws-card-head){
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  width:100% !important;
  min-height:58px !important;
  margin:0 0 var(--wds-space-section) !important;
  padding:10px 18px !important;
  border-radius:var(--wds-radius-card) !important;
  border:1px solid var(--wds-border-card) !important;
  background:var(--wds-surface-control) !important;
  box-shadow:var(--wds-shadow-control) !important;
  text-align:left !important;
}

#woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-icon,.ws-card-icon),
html[data-ws-theme] #woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-icon,.ws-card-icon){
  flex:0 0 42px !important;
  width:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border-radius:50% !important;
  background:var(--ws-gradient-primary) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 12px 30px rgba(37,99,235,.22) !important;
}

#woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-bar),
html[data-ws-theme] #woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-bar){
  display:block !important;
  flex:1 1 auto !important;
  min-width:44px !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(37,99,235,.62),rgba(124,58,237,.24),transparent) !important;
}

/* WDS Buttons: no dark leftovers in light mode, no text collision */
#woospeak-ai-app :where(.woospeak-ai-btn,.woospeak-ai-btn-secondary,.ws-btn,.wds-btn,.ws-quiz-check,.ws-course-step-complete-btn,.ws-course-repeat-btn,.ws-course-retry-btn,.woospeak-ai-course-open-btn,.woospeak-ai-course-generate-btn):not([hidden]),
html[data-ws-theme] #woospeak-ai-app :where(.woospeak-ai-btn,.woospeak-ai-btn-secondary,.ws-btn,.wds-btn,.ws-quiz-check,.ws-course-step-complete-btn,.ws-course-repeat-btn,.ws-course-retry-btn,.woospeak-ai-course-open-btn,.woospeak-ai-course-generate-btn):not([hidden]){
  min-height: var(--wds-control-height) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:none !important;
  padding:0 20px !important;
  border-radius:var(--wds-radius-control) !important;
  border:1px solid var(--wds-border-card) !important;
  background:var(--wds-surface-control) !important;
  color:var(--wds-text-strong) !important;
  -webkit-text-fill-color:var(--wds-text-strong) !important;
  box-shadow:var(--wds-shadow-control) !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  opacity:1 !important;
  text-shadow:none !important;
}

#woospeak-ai-app :where(.woospeak-ai-actions #woospeak-ai-send,.woospeak-ai-actions .woospeak-ai-assessment-trigger,.ws-btn-primary,.wds-btn--primary,.ws-course-main-tts,.ws-course-ai-start-btn,.ws-course-step-complete-btn:not(:disabled)),
html[data-ws-theme] #woospeak-ai-app :where(.woospeak-ai-actions #woospeak-ai-send,.woospeak-ai-actions .woospeak-ai-assessment-trigger,.ws-btn-primary,.wds-btn--primary,.ws-course-main-tts,.ws-course-ai-start-btn,.ws-course-step-complete-btn:not(:disabled)){
  background:var(--ws-gradient-primary) !important;
  border-color:rgba(37,99,235,.32) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 14px 30px rgba(37,99,235,.18) !important;
}

#woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer) :where(.ws-btn-tts,.ws-btn-audio,.woospeak-ai-tts-button,.woospeak-ai-audio-button,.ws-card-speak,.woospeak-ai-line-speak,.woospeak-ai-drill-tts,.woospeak-ai-tts-inline),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer) :where(.ws-btn-tts,.ws-btn-audio,.woospeak-ai-tts-button,.woospeak-ai-audio-button,.ws-card-speak,.woospeak-ai-line-speak,.woospeak-ai-drill-tts,.woospeak-ai-tts-inline){
  min-width:var(--wds-control-height) !important;
  min-height:var(--wds-control-height) !important;
  width:auto !important;
  padding:0 18px !important;
  border-radius:var(--wds-radius-control) !important;
  background:var(--ws-gradient-primary) !important;
  border-color:rgba(37,99,235,.32) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 14px 30px rgba(37,99,235,.18) !important;
}

#woospeak-ai-app :where(.ws-btn-tts)::before,
html[data-ws-theme] #woospeak-ai-app :where(.ws-btn-tts)::before{
  position:static !important;
  margin:0 !important;
  inset:auto !important;
  transform:none !important;
  flex:0 0 auto !important;
}

#woospeak-ai-app :where(.ws-btn:disabled,.ws-quiz-check:disabled,.ws-course-step-complete-btn:disabled),
html[data-ws-theme] #woospeak-ai-app :where(.ws-btn:disabled,.ws-quiz-check:disabled,.ws-course-step-complete-btn:disabled){
  opacity:.52 !important;
  cursor:not-allowed !important;
}

/* Course hero: theme token controls overlay instead of a dark hardcoded veil */
#woospeak-ai-app :where(.ws-course-hero,.ws-course-hero-media),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-hero,.ws-course-hero-media){
  border-radius:var(--wds-radius-panel) !important;
  overflow:hidden !important;
}

#woospeak-ai-app :where(.ws-course-hero)::before,
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-hero)::before{
  background:var(--wds-hero-overlay) !important;
  opacity:1 !important;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */


/* Quiz and Flashcards: a single WDS choice component */
#woospeak-ai-app :where(.ws-quiz-options,.ws-flash-choices),
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-options,.ws-flash-choices){
  display:grid !important;
  gap:12px !important;
}

#woospeak-ai-app :where(.ws-quiz-choice,.ws-flash-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label),
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-flash-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label){
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  min-height:54px !important;
  width:100% !important;
  padding:13px 18px !important;
  border-radius:var(--wds-radius-card) !important;
  border:1px solid var(--wds-border-card) !important;
  background:var(--wds-surface-choice) !important;
  color:var(--wds-text-body) !important;
  -webkit-text-fill-color:var(--wds-text-body) !important;
  box-shadow:var(--wds-shadow-control) !important;
  opacity:1 !important;
  text-shadow:none !important;
}

#woospeak-ai-app :where(.ws-quiz-choice:hover,.ws-flash-choice:hover,.ws-course-choice:hover,.ws-option:hover),
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice:hover,.ws-flash-choice:hover,.ws-course-choice:hover,.ws-option:hover){
  transform:translateY(-1px) !important;
  border-color:var(--wds-border-strong) !important;
  box-shadow:var(--wds-focus) !important;
}

#woospeak-ai-app :where(.ws-quiz-choice:has(input:checked),.ws-flash-choice.is-selected,.ws-flash-choice.is-correct,.ws-course-choice.is-selected,.ws-option.is-selected),
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice:has(input:checked),.ws-flash-choice.is-selected,.ws-flash-choice.is-correct,.ws-course-choice.is-selected,.ws-option.is-selected){
  background:var(--wds-choice-selected-bg) !important;
  border-color:var(--wds-border-strong) !important;
  color:var(--wds-text-strong) !important;
  -webkit-text-fill-color:var(--wds-text-strong) !important;
  box-shadow:var(--wds-focus) !important;
}


#woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) :where(input[type='radio'],input[type='checkbox']),
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) :where(input[type='radio'],input[type='checkbox']){
  appearance:none !important;
  -webkit-appearance:none !important;
  inline-size:var(--wds-radio-size) !important;
  block-size:var(--wds-radio-size) !important;
  min-width:var(--wds-radio-size) !important;
  width:var(--wds-radio-size) !important;
  height:var(--wds-radio-size) !important;
  margin:0 !important;
  flex:0 0 var(--wds-radio-size) !important;
  display:inline-block !important;
  position:relative !important;
  cursor:pointer !important;
  border:2px solid var(--wds-radio-border) !important;
  background:var(--wds-radio-bg) !important;
  background-image:none !important;
  box-shadow:inset 0 0 0 3px var(--wds-radio-bg) !important;
  opacity:1 !important;
  transition:background var(--ws-motion-fast) var(--ws-ease-standard), border-color var(--ws-motion-fast) var(--ws-ease-standard), box-shadow var(--ws-motion-fast) var(--ws-ease-standard), transform var(--ws-motion-fast) var(--ws-ease-standard) !important;
}

#woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) input[type='radio'],
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) input[type='radio']{
  border-radius:999px !important;
}

#woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]):hover input[type='radio'],
#woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]):hover input[type='checkbox'],
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]):hover input[type='radio'],
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]):hover input[type='checkbox']{
  border-color:var(--wds-radio-selected) !important;
}

#woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) input[type='radio']:checked,
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) input[type='radio']:checked{
  border-color:var(--wds-radio-selected) !important;
  background:radial-gradient(circle at center, var(--wds-radio-selected) 0 4px, var(--wds-radio-bg) 4.5px) !important;
  box-shadow:none !important;
}

#woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) input[type='checkbox']:checked,
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]) input[type='checkbox']:checked{
  border-color:var(--wds-radio-selected) !important;
  background:var(--wds-radio-selected) !important;
  box-shadow:inset 0 0 0 3px var(--wds-radio-selected) !important;
}

#woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]):has(input:focus-visible),
html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-choice,.ws-course-choice,.ws-option,label.ws-option,.ws-ex label,.ws-course-exercise label,.ws-choice-option,[data-ws-question-option]):has(input:focus-visible){
  outline:0 !important;
  box-shadow:var(--wds-focus) !important;
}

#woospeak-ai-app :where(.ws-flash-choice span),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-choice span){
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  background:color-mix(in srgb, var(--ws-color-primary-strong) 14%, transparent) !important;
  color:var(--wds-text-strong) !important;
  -webkit-text-fill-color:var(--wds-text-strong) !important;
  font-weight:800 !important;
}

#woospeak-ai-app :where(.ws-flash-topline),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-topline){
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:14px !important;
}

#woospeak-ai-app :where(.ws-flash-pill,.ws-flash-streak,.ws-ui-badge,.ws-ui-chip),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-pill,.ws-flash-streak,.ws-ui-badge,.ws-ui-chip){
  display:inline-flex !important;
  align-items:center !important;
  min-height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  border:1px solid var(--wds-border-card) !important;
  background:var(--wds-surface-control) !important;
  color:var(--wds-text-strong) !important;
  -webkit-text-fill-color:var(--wds-text-strong) !important;
  box-shadow:var(--wds-shadow-control) !important;
  font-weight:800 !important;
}

#woospeak-ai-app :where(.ws-flash-progress,.ws-ui-progress),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-progress,.ws-ui-progress){
  height:10px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:color-mix(in srgb, var(--wds-border-card) 58%, transparent) !important;
  border:0 !important;
}

#woospeak-ai-app :where(.ws-flash-progress span,.ws-ui-progress > span),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-progress span,.ws-ui-progress > span){
  display:block !important;
  height:100% !important;
  border-radius:inherit !important;
  background:var(--ws-gradient-primary) !important;
}

#woospeak-ai-app :where(.ws-flash-face),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-face){
  margin:18px 0 !important;
  padding:22px !important;
  border:1px solid var(--wds-border-card) !important;
  border-radius:var(--wds-radius-card) !important;
  background:var(--wds-surface-control) !important;
  box-shadow:var(--wds-shadow-control) !important;
  text-align:center !important;
}

#woospeak-ai-app :where(.ws-flash-word),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-word){
  font-size:clamp(1.8rem,4vw,3rem) !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:-.04em !important;
}

#woospeak-ai-app :where(.ws-flash-feedback,.ws-quiz-feedback,.ws-course-pronunciation-result),
html[data-ws-theme] #woospeak-ai-app :where(.ws-flash-feedback,.ws-quiz-feedback,.ws-course-pronunciation-result){
  margin-top:14px !important;
  padding:14px 16px !important;
  border-radius:var(--wds-radius-card) !important;
  border:1px solid var(--wds-border-card) !important;
  background:var(--wds-surface-control) !important;
  color:var(--wds-text-body) !important;
  -webkit-text-fill-color:var(--wds-text-body) !important;
  box-shadow:var(--wds-shadow-control) !important;
}

/* Inputs */
#woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer) :where(textarea,input[type="text"],input[type="search"],.ws-input,.ws-ex-input,.ws-course-ai-textarea,.ws-course-ai-large-textarea),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-render,.ws-course-page,.woospeak-ai-course-viewer) :where(textarea,input[type="text"],input[type="search"],.ws-input,.ws-ex-input,.ws-course-ai-textarea,.ws-course-ai-large-textarea){
  background:var(--wds-surface-control) !important;
  border:1px solid var(--wds-border-card) !important;
  border-radius:var(--wds-radius-card) !important;
  box-shadow:var(--wds-shadow-control) !important;
  color:var(--wds-text-strong) !important;
  -webkit-text-fill-color:var(--wds-text-strong) !important;
}

/* Mobile WDS keeps the same components, only the grid changes */
@media (max-width: 720px){
  #woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-head,.ws-card-head),
  html[data-ws-theme] #woospeak-ai-app #woospeak-ai-card :where(.woospeak-ai-card-empty-head,.ws-card-head){
    min-height:54px !important;
    padding:9px 14px !important;
  }
  #woospeak-ai-app :where(.ws-quiz-row,.ws-flash-oral-buttons),
  html[data-ws-theme] #woospeak-ai-app :where(.ws-quiz-row,.ws-flash-oral-buttons){
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #woospeak-ai-app :where(.ws-btn,.ws-quiz-check,.ws-course-step-complete-btn),
  html[data-ws-theme] #woospeak-ai-app :where(.ws-btn,.ws-quiz-check,.ws-course-step-complete-btn){
    width:100% !important;
  }
}

/* =========================================================
   V17.0.1 — WDS canonical normalization
   Purpose: stop screen-by-screen patching. The rules below map legacy markup
   to one component vocabulary (surface / card / button / choice / chip) and
   rely only on semantic tokens defined in woospeak-ai.tokens.css.
   ========================================================= */

#woospeak-ai-app{
  --wds-surface: var(--ws-color-surface);
  --wds-surface-strong: var(--ws-color-surface-strong);
  --wds-card: var(--ws-color-card);
  --wds-card-soft: var(--ws-color-card-soft);
  --wds-field: var(--ws-color-field);
  --wds-border: var(--ws-color-border);
  --wds-border-strong: var(--ws-color-border-strong);
  --wds-text: var(--ws-color-text);
  --wds-text-soft: var(--ws-color-text-soft);
  --wds-muted: var(--ws-color-muted);
  --wds-primary-bg: var(--ws-gradient-primary);
  --wds-secondary-bg: var(--ws-gradient-field);
  --wds-card-bg: var(--ws-gradient-surface);
  --wds-radius-card: var(--ws-radius-xl);
  --wds-radius-control: var(--ws-radius-pill);
  --wds-radius-field: var(--ws-radius-md);
  --wds-shadow-card: var(--ws-shadow-md);
  --wds-shadow-control: var(--ws-shadow-sm);
  --wds-focus: var(--ws-focus-ring);
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */


/* Canonical buttons: all legacy buttons must visually resolve here. */
#woospeak-ai-app :where(
  .ws-ui-button,
  .ws-ui-button-secondary,
  .ws-ui-button-primary,
  .woospeak-ai-btn,
  .woospeak-ai-btn-secondary,
  .woospeak-ai-course-generate-btn,
  .woospeak-ai-course-open-btn,
  .woospeak-ai-courses-topnav-btn,
  .woospeak-ai-courses-library-reset,
  .woospeak-ai-library-pagination button,
  .ws-course-render .ws-btn,
  .ws-course-page .ws-btn,
  .woospeak-ai-course-viewer .ws-btn,
  .ws-course-render button,
  .ws-course-step-complete-btn,
  .ws-course-ai-start-btn,
  .ws-course-repeat-btn,
  .ws-course-retry-btn
):not([hidden]){
  appearance:none !important;
  min-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:10px 18px !important;
  border-radius:var(--wds-radius-control) !important;
  border:1px solid var(--wds-border) !important;
  background:var(--wds-secondary-bg) !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
  box-shadow:var(--wds-shadow-control) !important;
  font-family:var(--ws-font-sans) !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  text-shadow:none !important;
  white-space:nowrap !important;
}

#woospeak-ai-app :where(
  .ws-ui-button-primary,
  .ws-ui-button--primary,
  .woospeak-ai-course-generate-btn,
  .woospeak-ai-course-open-btn,
  .woospeak-ai-courses-topnav-btn.is-active,
  .woospeak-ai-library-pagination button.active,
  .ws-course-render .ws-btn-primary,
  .ws-course-render .ws-btn-tts,
  .ws-learning-audio-btn,
  .ws-course-render .ws-course-main-tts,
  .ws-course-render .ws-course-ai-start-btn,
  .ws-course-render button[type="submit"],
  #woospeak-ai-send,
  .woospeak-ai-assessment-trigger,
  .woospeak-ai-tab.is-active,
  .woospeak-ai-tab[aria-selected="true"],
  .woospeak-ai-tabs button.is-active,
  .woospeak-ai-tabs button[aria-selected="true"]
):not(:disabled){
  background:var(--wds-primary-bg) !important;
  border-color:var(--wds-border-strong) !important;
  color:var(--wds-text-on-primary) !important;
  -webkit-text-fill-color:var(--wds-text-on-primary) !important;
  box-shadow:var(--ws-glow-blue), var(--wds-shadow-control) !important;
}

#woospeak-ai-app :where(button,.ws-btn,.woospeak-ai-btn):disabled,
#woospeak-ai-app :where(.is-disabled,.disabled){
  background:var(--wds-disabled-bg) !important;
  color:var(--wds-disabled-text) !important;
  -webkit-text-fill-color:var(--wds-disabled-text) !important;
  border-color:var(--wds-border) !important;
  box-shadow:none !important;
  opacity:1 !important;
  cursor:not-allowed !important;
}

#woospeak-ai-app :where(button,.ws-btn,.woospeak-ai-btn):focus-visible{
  outline:none !important;
  box-shadow:var(--wds-focus), var(--wds-shadow-control) !important;
}

/* Canonical surfaces/cards for every course block and coach panel. */
#woospeak-ai-app :where(
  .woospeak-ai-card,
  .woospeak-ai-card-inner,
  .woospeak-ai-card-empty--framed,
  .woospeak-ai-coach-card,
  .ws-coach-card,
  .ws-coach-card-panel,
  .woospeak-ai-courses-card,
  .woospeak-ai-courses-library-card,
  .woospeak-ai-courses-related,
  .woospeak-ai-course-form,
  .ws-course-card,
  .ws-course-card-blue,
  .ws-course-card-yellow,
  .ws-course-card-green,
  .ws-course-card-red,
  .ws-course-card-purple,
  .ws-course-card-voice,
  .ws-course-step,
  .ws-course-rule,
  .ws-course-rule-integrated,
  .ws-course-rule-practice,
  .ws-course-rule-quiz,
  .ws-course-ai-mission,
  .ws-course-ai-mission-section,
  .ws-course-progress-panel,
  .ws-course-resume-box,
  .ws-course-vocab-trainer,
  .ws-course-quick-challenge,
  .ws-course-flashcard,
  .ws-course-flashcard-front,
  .ws-course-flashcard-back,
  .ws-course-flashcard-deck,
  .ws-flash-wow,
  .ws-flash-face,
  [data-ws-flash-card="1"]
){
  background:var(--wds-card-bg) !important;
  background-color:var(--wds-card) !important;
  border:1px solid var(--wds-border) !important;
  border-radius:var(--wds-radius-card) !important;
  box-shadow:var(--wds-shadow-card), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:none !important;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */


/* Right coach card: one dark-mode structure, two theme palettes. */
#woospeak-ai-app .woospeak-ai-card-empty--framed{
  padding:22px !important;
  display:grid !important;
  gap:18px !important;
}

#woospeak-ai-app .woospeak-ai-card-empty-head{
  min-height:62px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  padding:10px 16px !important;
  border-radius:22px !important;
  background:var(--wds-secondary-bg) !important;
  border:1px solid var(--wds-border) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--wds-shadow-control) !important;
  text-align:left !important;
}

#woospeak-ai-app .woospeak-ai-card-empty-badge{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:var(--wds-primary-bg) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:var(--ws-glow-violet) !important;
  margin:0 !important;
}

#woospeak-ai-app .woospeak-ai-card-empty-title{
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
  font-weight:900 !important;
  font-size:1.18rem !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}

#woospeak-ai-app .woospeak-ai-card-empty-bar{
  display:block !important;
  flex:1 1 auto !important;
  min-width:70px !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--ws-color-primary),var(--ws-color-violet),transparent) !important;
  opacity:.85 !important;
}

#woospeak-ai-app .woospeak-ai-card-empty-text,
#woospeak-ai-app .woospeak-ai-card-empty-hint,
#woospeak-ai-app .woospeak-ai-card-examples-title,
#woospeak-ai-app .woospeak-ai-card-empty-cefr{
  color:var(--wds-text-soft) !important;
  -webkit-text-fill-color:var(--wds-text-soft) !important;
  text-shadow:none !important;
}

#woospeak-ai-app .woospeak-ai-card-examples-title{
  font-weight:900 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}

#woospeak-ai-app .woospeak-ai-card-suggestions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

#woospeak-ai-app .woospeak-ai-card-suggestion{
  min-height:34px !important;
  padding:7px 13px !important;
  border-radius:var(--wds-radius-control) !important;
  background:var(--wds-secondary-bg) !important;
  border:1px solid var(--wds-border) !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
  box-shadow:var(--wds-shadow-control) !important;
  font-weight:800 !important;
}

/* Course content typography always follows theme tokens. */
#woospeak-ai-app .ws-course-render :where(
  h1,h2,h3,h4,h5,h6,
  .ws-course-title,
  .ws-course-section-title,
  .ws-course-section-subtitle,
  .ws-course-subsection-title,
  .ws-course-subactivity-title,
  .ws-course-ai-title,
  .ws-course-ai-heading,
  .ws-flash-word,
  .ws-flash-question,
  .ws-ex-prompt,
  .ws-course-vocab-word strong
){
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
  text-shadow:none !important;
}

#woospeak-ai-app .ws-course-render :where(p,li,span,small,.ws-course-muted,.ws-course-help,.ws-course-vocab-example,.ws-course-flashcard-example,.ws-course-flashcard-prompt,.ws-course-quick-criteria,.ws-course-repeat-target,.ws-course-quick-inline,.ws-course-result-advice){
  color:var(--wds-text-soft) !important;
  -webkit-text-fill-color:var(--wds-text-soft) !important;
  text-shadow:none !important;
}

#woospeak-ai-app .ws-course-render :where(strong,b){
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
}

/* Choices / quiz / flashcard answers. */
#woospeak-ai-app .ws-course-render :where(
  .ws-option,
  label.ws-option,
  .ws-flash-choice,
  .ws-course-choice,
  .ws-quiz-choice,
  .ws-ex label,
  .ws-course-exercise label
){
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:50px !important;
  padding:12px 16px !important;
  border-radius:16px !important;
  background:var(--wds-choice-bg) !important;
  border:1px solid var(--wds-border) !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-option:hover,.ws-flash-choice:hover,.ws-course-choice:hover,.ws-quiz-choice:hover,.ws-ex label:hover){
  border-color:var(--wds-border-strong) !important;
  box-shadow:var(--wds-shadow-control) !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-option.selected,.ws-option.is-selected,.ws-flash-choice.is-selected,.ws-course-choice.is-selected,.ws-quiz-choice.is-selected),
#woospeak-ai-app .ws-course-render :where(.ws-option:has(input:checked),.ws-course-choice:has(input:checked),.ws-quiz-choice:has(input:checked),label:has(input:checked)){
  background:var(--wds-choice-selected-bg) !important;
  border-color:var(--wds-border-strong) !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
}


#woospeak-ai-app .ws-course-render :where(.ws-option,.ws-course-choice,.ws-quiz-choice,.ws-ex label,.ws-course-exercise label) :where(input[type='radio'],input[type='checkbox']){
  appearance:none !important;
  -webkit-appearance:none !important;
  inline-size:var(--wds-radio-size) !important;
  block-size:var(--wds-radio-size) !important;
  flex:0 0 var(--wds-radio-size) !important;
  margin:0 !important;
  border:2px solid var(--wds-radio-border) !important;
  background:var(--wds-radio-bg) !important;
  box-shadow:inset 0 0 0 3px var(--wds-radio-bg) !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-option,.ws-course-choice,.ws-quiz-choice,.ws-ex label,.ws-course-exercise label) input[type='radio']{
  border-radius:999px !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-option,.ws-course-choice,.ws-quiz-choice,.ws-ex label,.ws-course-exercise label) input[type='radio']:checked{
  border-color:var(--wds-radio-selected) !important;
  background:radial-gradient(circle at center, var(--wds-radio-selected) 0 4px, var(--wds-radio-bg) 4.5px) !important;
  box-shadow:none !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-option.correct,.ws-ex-feedback.success){
  background:linear-gradient(180deg, rgba(16,185,129,.16), rgba(16,185,129,.08)) !important;
  border-color:rgba(16,185,129,.38) !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-option.wrong,.ws-ex-feedback.error){
  background:linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08)) !important;
  border-color:rgba(239,68,68,.38) !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
}

/* Inputs / textareas. */
#woospeak-ai-app .ws-course-render :where(.ws-input,textarea,input[type="text"],input[type="search"],.ws-course-ai-textarea,.ws-course-ai-large-textarea),
#woospeak-ai-app :where(#woospeak-ai-message,.woospeak-ai-input textarea){
  background:var(--wds-secondary-bg) !important;
  border:1px solid var(--wds-border) !important;
  border-radius:18px !important;
  color:var(--wds-text) !important;
  -webkit-text-fill-color:var(--wds-text) !important;
  caret-color:var(--ws-color-primary) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--wds-shadow-control) !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-input::placeholder,textarea::placeholder,input::placeholder),
#woospeak-ai-app :where(#woospeak-ai-message::placeholder,.woospeak-ai-input textarea::placeholder){
  color:var(--wds-muted) !important;
  -webkit-text-fill-color:var(--wds-muted) !important;
  opacity:.85 !important;
}

/* Pills / chips / progress. */
#woospeak-ai-app .ws-course-render :where(.ws-badge,.ws-pill,.ws-chip,.ws-flash-pill,.ws-flash-streak,.ws-course-level-badge,.ws-course-topic-badge,.ws-course-ai-meta-chip,.ws-course-ai-focus-pill,.ws-course-quick-badge),
#woospeak-ai-app :where(.woospeak-ai-card-suggestion,.ws-badge,.ws-profile-summary){
  background:rgba(96,165,250,.10) !important;
  border:1px solid var(--wds-border) !important;
  color:var(--wds-text-soft) !important;
  -webkit-text-fill-color:var(--wds-text-soft) !important;
  box-shadow:none !important;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */


#woospeak-ai-app .ws-course-render :where(.ws-flash-progress,.ws-course-progress,.ws-course-progress-panel .ws-course-progress,.woospeak-ai-course-thumb-progress){
  overflow:hidden !important;
  height:10px !important;
  border-radius:999px !important;
  background:rgba(148,163,184,.16) !important;
  border:1px solid var(--wds-border) !important;
}

#woospeak-ai-app .ws-course-render :where(.ws-course-progress-bar,.ws-flash-progress-bar),
#woospeak-ai-app .woospeak-ai-course-thumb-progress::before{
  background:var(--wds-primary-bg) !important;
  box-shadow:var(--ws-glow-blue) !important;
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */


/* Small screens: retain the same component structure. */
@media (max-width: 820px){
  #woospeak-ai-app .woospeak-ai-card-empty-head{
    min-height:56px !important;
    padding:9px 12px !important;
  }
  #woospeak-ai-app .woospeak-ai-card-empty-title{
    white-space:normal !important;
  }
  #woospeak-ai-app .woospeak-ai-card-empty-bar{
    display:none !important;
  }
}
/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */

/* V17.0.3 removed theme-specific component rule; use tokens only. */



/* =========================================================
   V17.0.3 — CANONICAL COMPONENT BRIDGE
   One structure, one PHP, one JS. These rules apply identically to dark and light;
   differences come only from semantic tokens in woospeak-ai.tokens.css.
   ========================================================= */
#woospeak-ai-app :where(
  #woospeak-ai-card,
  .woospeak-ai-card,
  .woospeak-ai-coach-card,
  .ws-coach-card,
  .ws-coach-card-panel,
  .ws-course-step,
  .ws-course-card,
  .ws-course-card-blue,
  .ws-course-card-yellow,
  .ws-course-card-green,
  .ws-course-card-red,
  .ws-course-card-voice,
  .ws-course-ai-mission,
  .ws-course-ai-mission-section,
  .ws-course-rule,
  .ws-course-rule-integrated,
  .ws-course-rule-practice,
  .ws-course-rule-quiz,
  .ws-course-quick-challenge,
  .ws-course-vocab-trainer,
  .ws-course-progress-panel,
  .ws-course-resume-box,
  .ws-course-flashcard-deck,
  .ws-course-flashcard,
  .ws-course-flashcard-front,
  .ws-course-flashcard-back,
  .ws-flash-wow,
  .ws-question-card,
  .ws-ex,
  .ws-course-exercise,
  .ws-course-ai-writing,
  .ws-course-ai-oral,
  .ws-flash-oral-panel
){
  background: var(--ws-canonical-panel-bg) !important;
  background-color: var(--ws-surface-canonical) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  border-radius: var(--ws-radius-xl) !important;
  box-shadow: var(--ws-shadow-md) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: initial !important;
}

#woospeak-ai-app :where(
  .woospeak-ai-card-title,
  .ws-card-title,
  .ws-fiche-title,
  .ws-coach-card-title,
  .woospeak-ai-fiche-title,
  .ws-course-title,
  .ws-course-section-title,
  .ws-course-section-subtitle,
  .ws-course-subsection-title,
  .ws-course-subactivity-title,
  .ws-course-ai-title,
  .ws-course-ai-heading,
  .ws-course-ai-mission-title,
  .ws-flash-word,
  .ws-flash-question,
  .ws-ex-prompt,
  .ws-course-render h1,
  .ws-course-render h2,
  .ws-course-render h3,
  .ws-course-render h4
){
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
  opacity: 1 !important;
}

#woospeak-ai-app :where(
  .woospeak-ai-muted,
  .woospeak-ai-hint,
  .ws-course-muted,
  .ws-course-progress-time,
  .ws-course-render p,
  .ws-course-render li,
  .ws-course-ai-task,
  .ws-course-ai-summary,
  .ws-course-ai-errors,
  .ws-course-ai-next,
  .ws-course-resume-text,
  .ws-course-flashcard-example,
  .ws-course-flashcard-prompt
){
  color: var(--ws-text-canonical-soft) !important;
  -webkit-text-fill-color: var(--ws-text-canonical-soft) !important;
  opacity: 1 !important;
}

#woospeak-ai-app :where(
  .ws-fiche-section,
  .woospeak-ai-fiche-section,
  .ws-coach-card-section,
  .ws-card-section,
  .ws-course-section-divider,
  .ws-course-step-actions,
  .ws-course-render hr
){
  border-color: var(--ws-border-canonical) !important;
}

#woospeak-ai-app :where(
  .ws-option,
  .ws-flash-choice,
  .ws-course-choice,
  .ws-quiz-choice,
  label.ws-option,
  .ws-ex label,
  .woospeak-ai-chip,
  .ws-ui-chip,
  .ws-card-suggestion,
  .woospeak-ai-card-suggestion
){
  background: var(--ws-canonical-field-bg) !important;
  background-color: var(--ws-field-canonical) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  border-radius: var(--ws-radius-pill) !important;
  color: var(--ws-text-canonical-soft) !important;
  -webkit-text-fill-color: var(--ws-text-canonical-soft) !important;
  box-shadow: var(--ws-shadow-sm) !important;
}

#woospeak-ai-app :where(.ws-option:hover,.ws-flash-choice:hover,.ws-course-choice:hover,.ws-quiz-choice:hover,.ws-ex label:hover,.woospeak-ai-card-suggestion:hover){
  border-color: var(--ws-border-canonical-strong) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
}

#woospeak-ai-app :where(.ws-option.selected,.ws-flash-choice.is-selected,.ws-course-choice.is-selected,.ws-quiz-choice:has(input:checked)){
  background: var(--ws-canonical-primary-bg) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: var(--ws-border-canonical-strong) !important;
}

#woospeak-ai-app :where(.ws-option.correct,.ws-ex-feedback.success){
  background: var(--ws-canonical-success-bg) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
  border-color: rgba(16,185,129,.36) !important;
}

#woospeak-ai-app :where(.ws-option.wrong,.ws-ex-feedback.error){
  background: var(--ws-canonical-danger-bg) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
  border-color: rgba(239,68,68,.36) !important;
}

#woospeak-ai-app :where(
  .ws-input,
  .ws-ui-input,
  .ws-ui-select,
  .ws-ui-textarea,
  .ws-course-ai-textarea,
  .ws-course-ai-large-textarea,
  textarea,
  input[type="text"],
  input[type="search"]
){
  background: var(--ws-canonical-field-bg) !important;
  background-color: var(--ws-field-canonical) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  border-radius: var(--ws-radius-lg) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
  box-shadow: var(--ws-shadow-sm) !important;
}

#woospeak-ai-app :where(.ws-input,.ws-ui-input,.ws-ui-select,.ws-ui-textarea,.ws-course-ai-textarea,.ws-course-ai-large-textarea,textarea,input[type="text"],input[type="search"])::placeholder{
  color: var(--ws-text-canonical-muted) !important;
  -webkit-text-fill-color: var(--ws-text-canonical-muted) !important;
}

#woospeak-ai-app :where(
  button,
  .ws-btn,
  .woospeak-ai-btn,
  .ws-ui-button,
  .ws-ui-button-secondary,
  .ws-course-repeat-btn,
  .ws-course-retry-btn,
  .ws-course-step-complete-btn,
  .ws-course-main-tts,
  .ws-btn-tts,
  .ws-btn-audio,
  .woospeak-ai-tts-button,
  .woospeak-ai-audio-button
){
  border-radius: var(--ws-radius-pill) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  background: var(--ws-canonical-field-bg) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
  box-shadow: var(--ws-shadow-sm) !important;
}

#woospeak-ai-app :where(.ws-ui-button-primary,.woospeak-ai-btn-primary,.ws-btn-primary,.ws-course-ai-start-btn,.ws-course-step-complete-btn){
  background: var(--ws-canonical-primary-bg) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: var(--ws-border-canonical-strong) !important;
}

#woospeak-ai-app :where(button:disabled,.ws-btn:disabled,.woospeak-ai-btn:disabled,.ws-course-step-complete-btn:disabled){
  opacity: .48 !important;
  cursor: not-allowed !important;
}

#woospeak-ai-app :where(.ws-course-hero-media,.ws-course-hero){
  border-radius: var(--ws-radius-xl) !important;
  overflow: hidden !important;
}
#woospeak-ai-app :where(.ws-course-hero-media)::after,
#woospeak-ai-app :where(.ws-course-hero)::after{
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)) !important;
}

/* =========================================================
   V17.0.5 — LIGHT READABILITY CANONICAL RESET
   CSS only. No PHP/JS/HTML changes.
   Purpose: after removing forced dark component blocks, light mode must become
   readable again by applying the same canonical structure with light tokens.
   These rules are only a readability normalization layer for data-theme=light.
   ========================================================= */
html:has(#woospeak-ai-app[data-theme="light"]),
body:has(#woospeak-ai-app[data-theme="light"]){
  background:
    radial-gradient(1100px 520px at 14% 18%, rgba(99,102,241,.10), transparent 55%),
    radial-gradient(900px 460px at 84% 24%, rgba(56,189,248,.10), transparent 55%),
    radial-gradient(1100px 520px at 52% 92%, rgba(37,99,235,.08), transparent 60%),
    linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%) !important;
  background-attachment:fixed !important;
}

#woospeak-ai-app[data-theme="light"]{
  color-scheme: light !important;
  --ws-color-bg-page:#f8fbff;
  --ws-color-bg-page-2:#eef4fb;
  --ws-color-surface:#f3f8ff;
  --ws-color-surface-strong:#ffffff;
  --ws-color-card:#ffffff;
  --ws-color-card-soft:#f6f9ff;
  --ws-color-field:#ffffff;
  --ws-color-field-strong:#ffffff;
  --ws-color-border:rgba(27,63,116,.16);
  --ws-color-border-strong:rgba(37,99,235,.34);
  --ws-color-text:#0f172a;
  --ws-color-text-soft:#243246;
  --ws-color-muted:#627188;
  --ws-color-muted-2:#7a8aa1;
  --ws-gradient-surface:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);
  --ws-gradient-field:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  --ws-gradient-page:
    radial-gradient(920px 540px at 14% -4%, rgba(37,99,235,.12), transparent 64%),
    radial-gradient(800px 560px at 84% 0%, rgba(124,58,237,.10), transparent 62%),
    linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%);
  --ws-shadow-sm:0 8px 22px rgba(15,23,42,.07);
  --ws-shadow-md:0 16px 44px rgba(15,23,42,.10);
  --ws-shadow-lg:0 28px 90px rgba(15,23,42,.14);
  --ws-surface-canonical:var(--ws-color-card);
  --ws-surface-canonical-soft:var(--ws-color-card-soft);
  --ws-surface-canonical-strong:var(--ws-color-surface-strong);
  --ws-field-canonical:var(--ws-color-field);
  --ws-border-canonical:var(--ws-color-border);
  --ws-border-canonical-strong:var(--ws-color-border-strong);
  --ws-text-canonical:var(--ws-color-text);
  --ws-text-canonical-soft:var(--ws-color-text-soft);
  --ws-text-canonical-muted:var(--ws-color-muted);
  --ws-canonical-panel-bg:var(--ws-gradient-surface);
  --ws-canonical-field-bg:var(--ws-gradient-field);
}

#woospeak-ai-app[data-theme="light"],
#woospeak-ai-app[data-theme="light"] :where(p,span,div,label,small,strong,h1,h2,h3,h4,h5,h6,li,td,th){
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:none !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-panel,
  .woospeak-ai-layout,
  .woospeak-ai-chat,
  .woospeak-ai-chat-main,
  .woospeak-ai-conversation,
  .woospeak-ai-thread,
  .woospeak-ai-messages,
  .woospeak-ai-chat-window,
  .woospeak-ai-card,
  .woospeak-ai-card-inner,
  #woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-courses-card,
  .woospeak-ai-courses-header,
  .woospeak-ai-course-form,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-dashboard-inner,
  .woospeak-ai-dashboard-placeholder,
  .woospeak-ai-dash-card,
  .ws-dash-kpi,
  .ws-dash-assessment-kpi,
  .ws-dash-assessment-latest,
  .ws-dash-action-item,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result,
  .ws-step-shell,
  .ws-question-card,
  .ws-card,
  .ws-course-step,
  .ws-course-card,
  .ws-course-card-blue,
  .ws-course-card-yellow,
  .ws-course-card-green,
  .ws-course-card-red,
  .ws-course-card-voice,
  .ws-course-ai-mission,
  .ws-course-ai-mission-section,
  .ws-course-rule,
  .ws-course-rule-integrated,
  .ws-course-rule-practice,
  .ws-course-rule-quiz,
  .ws-course-quick-challenge,
  .ws-course-vocab-trainer,
  .ws-course-progress-panel,
  .ws-course-resume-box,
  .ws-course-flashcard-deck,
  .ws-course-flashcard,
  .ws-course-flashcard-front,
  .ws-course-flashcard-back,
  .ws-flash-wow,
  .ws-ex,
  .ws-course-exercise,
  .ws-course-ai-writing,
  .ws-course-ai-oral,
  .ws-flash-oral-panel
){
  background:var(--ws-gradient-surface) !important;
  background-color:var(--ws-color-card) !important;
  border-color:var(--ws-color-border) !important;
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:initial !important;
  box-shadow:var(--ws-shadow-md) !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat-header,
  .woospeak-ai-conversation-header,
  .woospeak-ai-chat-toolbar,
  .woospeak-ai-card-empty-head,
  .woospeak-ai-card-header,
  .ws-card-head,
  .ws-course-step-actions,
  .woospeak-ai-composer,
  .woospeak-ai-input-wrap
){
  background:var(--ws-gradient-field) !important;
  background-color:var(--ws-color-field) !important;
  border-color:var(--ws-color-border) !important;
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:initial !important;
  box-shadow:var(--ws-shadow-sm) !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-message,
  .woospeak-ai-bubble,
  .woospeak-ai-message-assistant,
  .woospeak-ai-message-user,
  .woospeak-ai-bubble--assistant,
  .woospeak-ai-bubble--user,
  [data-role="assistant"],
  [data-role="user"]
){
  background:var(--ws-gradient-field) !important;
  background-color:var(--ws-color-field) !important;
  border-color:var(--ws-color-border) !important;
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:initial !important;
  box-shadow:var(--ws-shadow-sm) !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-card-suggestion,
  .woospeak-ai-chip,
  .ws-chip,
  .ws-pill,
  .ws-ui-chip,
  .ws-card-suggestion,
  .ws-option,
  .ws-flash-choice,
  .ws-course-choice,
  .ws-quiz-choice,
  label.ws-option,
  .ws-ex label,
  .woospeak-ai-card-suggestion
){
  background:var(--ws-gradient-field) !important;
  background-color:var(--ws-color-field) !important;
  border-color:var(--ws-color-border) !important;
  color:var(--ws-color-text-soft) !important;
  -webkit-text-fill-color:initial !important;
  box-shadow:var(--ws-shadow-sm) !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select,
  .ws-input,
  .ws-ui-input,
  .ws-ui-select,
  .ws-ui-textarea,
  .ws-course-ai-textarea,
  .ws-course-ai-large-textarea
){
  background:var(--ws-gradient-field) !important;
  background-color:var(--ws-color-field) !important;
  border-color:var(--ws-color-border) !important;
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:var(--ws-color-text) !important;
  box-shadow:var(--ws-shadow-sm) !important;
}

#woospeak-ai-app[data-theme="light"] :where(input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],textarea,.ws-input,.ws-ui-input,.ws-ui-textarea)::placeholder{
  color:var(--ws-color-muted) !important;
  -webkit-text-fill-color:var(--ws-color-muted) !important;
  opacity:1 !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  button,
  .ws-btn,
  .woospeak-ai-btn,
  .ws-ui-button,
  .ws-ui-button-secondary,
  .ws-course-repeat-btn,
  .ws-course-retry-btn,
  .ws-course-main-tts,
  .ws-btn-tts,
  .ws-btn-audio,
  .woospeak-ai-tts-button,
  .woospeak-ai-audio-button
){
  background:var(--ws-gradient-field) !important;
  background-color:var(--ws-color-field) !important;
  border-color:var(--ws-color-border) !important;
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:var(--ws-color-text) !important;
  box-shadow:var(--ws-shadow-sm) !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .ws-ui-button-primary,
  .woospeak-ai-btn-primary,
  .ws-btn-primary,
  .ws-course-ai-start-btn,
  .ws-course-step-complete-btn,
  .woospeak-ai-send,
  .woospeak-ai-action-primary,
  button.is-active,
  .ws-learning-audio-btn
){
  background:var(--ws-gradient-primary) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(37,99,235,.45) !important;
}

#woospeak-ai-app[data-theme="light"] :where(button:disabled,.ws-btn:disabled,.woospeak-ai-btn:disabled,.ws-course-step-complete-btn:disabled){
  background:linear-gradient(180deg,#f3f6fb,#e8eef8) !important;
  color:#7a8aa1 !important;
  -webkit-text-fill-color:#7a8aa1 !important;
  opacity:.72 !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-muted,
  .woospeak-ai-hint,
  .woospeak-ai-card p,
  .woospeak-ai-card small,
  .woospeak-ai-card-empty-text,
  .woospeak-ai-dashboard-text,
  .woospeak-ai-dash-muted,
  .ws-dash-kpi-sub,
  .ws-course-muted,
  .ws-course-render p,
  .ws-course-render li,
  .ws-course-ai-task,
  .ws-course-ai-summary,
  .ws-course-ai-errors,
  .ws-course-ai-next,
  .ws-course-resume-text,
  .ws-course-flashcard-example,
  .ws-course-flashcard-prompt
){
  color:var(--ws-color-text-soft) !important;
  -webkit-text-fill-color:initial !important;
  opacity:1 !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-card h2,
  .woospeak-ai-card h3,
  .woospeak-ai-card-empty-title,
  .woospeak-ai-card-examples-title,
  .woospeak-ai-dash-title,
  .ws-dash-hero-name,
  .woospeak-ai-dashboard-title,
  .woospeak-ai-courses-title,
  .ws-assessment-start h1,
  .ws-assessment-screen h1,
  .ws-assessment-screen h2,
  .ws-course-render h1,
  .ws-course-render h2,
  .ws-course-render h3
){
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:initial !important;
  opacity:1 !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-dash-kicker,
  .woospeak-ai-dash-card-title,
  .ws-dash-card-block-title,
  .ws-dash-kpi-label,
  .ws-dash-action-verb,
  .woospeak-ai-card-examples-title
){
  color:#2563eb !important;
  -webkit-text-fill-color:initial !important;
  opacity:1 !important;
}

#woospeak-ai-app[data-theme="light"] :where(.ws-option.selected,.ws-flash-choice.is-selected,.ws-course-choice.is-selected,.ws-quiz-choice:has(input:checked)){
  background:var(--ws-gradient-primary) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(37,99,235,.45) !important;
}

/* =========================================================
   V17.0.6 — LIGHT THEME FINAL POLISH
   CSS-only. PHP/JS/HTML unchanged.
   Scope: visual polish for the light palette after architecture lock.
   ========================================================= */
#woospeak-ai-app[data-theme="light"]{
  --ws-light-page:#eef5ff;
  --ws-light-page-soft:#f7fbff;
  --ws-light-panel:#ffffff;
  --ws-light-panel-soft:#f5f9ff;
  --ws-light-panel-blue:#eef5ff;
  --ws-light-border:rgba(93,120,166,.22);
  --ws-light-border-strong:rgba(68,102,170,.34);
  --ws-light-text:#0f172a;
  --ws-light-text-soft:#26364f;
  --ws-light-muted:#66758f;
  --ws-light-shadow-sm:0 8px 22px rgba(40,60,110,.08);
  --ws-light-shadow-md:0 16px 42px rgba(40,60,110,.12);
  --ws-light-shadow-lg:0 24px 70px rgba(40,60,110,.16);

  --ws-color-surface:rgba(255,255,255,.94);
  --ws-color-surface-strong:#ffffff;
  --ws-color-card:#ffffff;
  --ws-color-card-soft:#f4f8ff;
  --ws-color-field:#ffffff;
  --ws-color-field-strong:#ffffff;
  --ws-color-border:var(--ws-light-border);
  --ws-color-border-strong:var(--ws-light-border-strong);
  --ws-color-text:var(--ws-light-text);
  --ws-color-text-soft:var(--ws-light-text-soft);
  --ws-color-muted:var(--ws-light-muted);
  --ws-color-muted-2:#7b8aa2;
  --ws-gradient-surface:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
  --ws-gradient-field:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  --ws-shadow-sm:var(--ws-light-shadow-sm);
  --ws-shadow-md:var(--ws-light-shadow-md);
  --ws-shadow-lg:var(--ws-light-shadow-lg);
}

/* Light header: same geometry as dark, lighter material */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero.ws-coach-hero{
  background:
    radial-gradient(680px 240px at 13% 8%, rgba(56,113,210,.18), transparent 62%),
    radial-gradient(700px 260px at 83% 10%, rgba(124,58,237,.16), transparent 64%),
    linear-gradient(180deg,rgba(247,250,255,.96),rgba(230,238,251,.92)) !important;
  border-color:rgba(93,120,166,.20) !important;
  box-shadow:0 18px 44px rgba(45,62,102,.13) !important;
  color:var(--ws-light-text) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero::after,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero.ws-coach-hero::after{
  opacity:.35 !important;
}

/* Common light surfaces: keep the dark structure but clean the palette */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-chat-shell,
  .woospeak-ai-chat-main,
  .woospeak-ai-chat-panel,
  .woospeak-ai-card,
  .woospeak-ai-card-panel,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard,
  .woospeak-ai-dashboard-panel,
  .woospeak-ai-dashboard-card,
  .woospeak-ai-dash-card,
  .ws-dashboard-card,
  .ws-course-page,
  .ws-course-render,
  .ws-course-card,
  .ws-course-ai-writing,
  .ws-course-vocab-trainer,
  .ws-course-quick-challenge,
  .ws-course-progress-panel,
  .ws-course-ai-mission,
  .ws-assessment-shell,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-card,
  .ws-assessment-panel
){
  background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%) !important;
  background-color:#ffffff !important;
  border-color:var(--ws-light-border) !important;
  color:var(--ws-light-text) !important;
  -webkit-text-fill-color:initial !important;
  box-shadow:var(--ws-light-shadow-md) !important;
}

/* Keep outer app/background premium but remove the aggressive blue blocks in light mode */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses,
  .woospeak-ai-courses-panel,
  .woospeak-ai-courses-shell,
  .woospeak-ai-courses-view,
  .woospeak-ai-courses-body,
  .ws-courses,
  .ws-courses-shell,
  .ws-courses-view,
  .ws-course-library,
  .ws-course-generator,
  .ws-course-list,
  .ws-course-browser,
  .ws-course-area,
  .ws-course-main
){
  background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%) !important;
  background-color:#ffffff !important;
  color:var(--ws-light-text) !important;
  -webkit-text-fill-color:initial !important;
}

/* Thin premium accent instead of full blue blocks */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-dashboard-panel,
  .woospeak-ai-dash-card,
  .ws-dashboard-card,
  .ws-course-page,
  .ws-course-card,
  .ws-course-library,
  .ws-course-generator,
  .ws-assessment-start,
  .ws-assessment-screen
)::before{
  opacity:.55 !important;
}

/* Course/library filter bars: no dark grey panels in light theme */
#woospeak-ai-app[data-theme="light"] :where(
  .ws-course-filters,
  .ws-course-library-filters,
  .woospeak-ai-courses-filters,
  .ws-courses-filters,
  .ws-course-filter-panel,
  .ws-course-toolbar,
  .ws-course-tabs,
  .woospeak-ai-courses-tabs
){
  background:linear-gradient(180deg,#f7fbff,#eef5ff) !important;
  background-color:#f7fbff !important;
  border-color:var(--ws-light-border) !important;
  color:var(--ws-light-text) !important;
  box-shadow:var(--ws-light-shadow-sm) !important;
}

/* Assessment hero/start: remove ghost white title and dark buttons */
#woospeak-ai-app[data-theme="light"] :where(
  .ws-assessment-start h1,
  .ws-assessment-start h2,
  .ws-assessment-screen h1,
  .ws-assessment-screen h2,
  .woospeak-ai-assessment-title,
  .woospeak-ai-assessment-subtitle
){
  color:var(--ws-light-text) !important;
  -webkit-text-fill-color:var(--ws-light-text) !important;
  text-shadow:none !important;
  opacity:1 !important;
}
#woospeak-ai-app[data-theme="light"] :where(
  .ws-assessment-start p,
  .ws-assessment-screen p,
  .ws-assessment-start span,
  .ws-assessment-screen span,
  .woospeak-ai-assessment-meta,
  .woospeak-ai-assessment-hint
){
  color:var(--ws-light-text-soft) !important;
  -webkit-text-fill-color:initial !important;
  opacity:1 !important;
}
#woospeak-ai-app[data-theme="light"] :where(
  .ws-assessment-start button,
  .ws-assessment-screen button,
  .woospeak-ai-assessment button
):not(.is-active):not(.woospeak-ai-btn-primary):not(.ws-ui-button-primary){
  background:linear-gradient(180deg,#ffffff,#f3f7ff) !important;
  border-color:rgba(93,120,166,.30) !important;
  color:var(--ws-light-text) !important;
  -webkit-text-fill-color:var(--ws-light-text) !important;
  box-shadow:var(--ws-light-shadow-sm) !important;
}

/* Light button system polish */
#woospeak-ai-app[data-theme="light"] :where(
  .ws-btn,
  .woospeak-ai-btn,
  .ws-ui-button,
  .ws-ui-button-secondary,
  .woospeak-ai-card-suggestion,
  .woospeak-ai-chip,
  .ws-chip,
  .ws-pill,
  .ws-course-filter-pill,
  .ws-course-ai-meta-chip
):not(.is-active):not(.ws-ui-button-primary):not(.woospeak-ai-btn-primary):not(.ws-btn-primary){
  background:linear-gradient(180deg,#ffffff,#f4f8ff) !important;
  border-color:rgba(93,120,166,.28) !important;
  color:var(--ws-light-text) !important;
  -webkit-text-fill-color:var(--ws-light-text) !important;
  box-shadow:0 8px 20px rgba(40,60,110,.07) !important;
}
#woospeak-ai-app[data-theme="light"] :where(
  .ws-btn-primary,
  .woospeak-ai-btn-primary,
  .ws-ui-button-primary,
  .woospeak-ai-send,
  .ws-course-step-complete-btn:not(:disabled),
  .ws-course-main-tts,
  .ws-btn-tts,
  .ws-learning-audio-btn
){
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%) !important;
  border-color:rgba(37,99,235,.36) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 12px 26px rgba(76,81,191,.20) !important;
}
#woospeak-ai-app[data-theme="light"] :where(button:disabled,.ws-btn:disabled,.woospeak-ai-btn:disabled,.ws-course-step-complete-btn:disabled){
  background:linear-gradient(180deg,#eef3fb,#e5edf8) !important;
  color:#70809a !important;
  -webkit-text-fill-color:#70809a !important;
  border-color:rgba(93,120,166,.18) !important;
  opacity:.78 !important;
  box-shadow:none !important;
}

/* Forms/selects: same component language as header selectors */
#woospeak-ai-app[data-theme="light"] :where(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select,
  .ws-input,
  .ws-ui-input,
  .ws-ui-select,
  .ws-ui-textarea,
  .ws-course-ai-textarea,
  .ws-course-ai-large-textarea,
  .woospeak-ai-input,
  .woospeak-ai-textarea
){
  background:#ffffff !important;
  border-color:rgba(93,120,166,.26) !important;
  color:var(--ws-light-text) !important;
  -webkit-text-fill-color:var(--ws-light-text) !important;
  box-shadow:0 7px 18px rgba(40,60,110,.06) !important;
}
#woospeak-ai-app[data-theme="light"] :where(input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],textarea,.ws-input,.ws-ui-input,.ws-ui-textarea,.woospeak-ai-input)::placeholder{
  color:#8190aa !important;
  -webkit-text-fill-color:#8190aa !important;
  opacity:1 !important;
}

/* Text contrast final guard */
#woospeak-ai-app[data-theme="light"] :where(
  h1,h2,h3,h4,h5,h6,
  .woospeak-ai-title,
  .woospeak-ai-card-empty-title,
  .woospeak-ai-dashboard-title,
  .woospeak-ai-courses-title,
  .ws-course-title,
  .ws-course-section-title,
  .ws-course-subsection-title,
  .ws-dash-hero-name,
  .ws-dash-card-block-title
){
  color:var(--ws-light-text) !important;
  -webkit-text-fill-color:var(--ws-light-text) !important;
  opacity:1 !important;
  text-shadow:none !important;
}
#woospeak-ai-app[data-theme="light"] :where(
  p,li,label,small,
  .woospeak-ai-muted,
  .woospeak-ai-hint,
  .woospeak-ai-card-empty-text,
  .woospeak-ai-dashboard-text,
  .ws-course-muted,
  .ws-course-render p,
  .ws-course-render li,
  .ws-course-ai-task,
  .ws-course-ai-summary,
  .ws-course-resume-text,
  .ws-course-repeat-target,
  .ws-course-quick-inline
){
  color:var(--ws-light-text-soft) !important;
  -webkit-text-fill-color:initial !important;
  opacity:1 !important;
}

/* Chat right card and message column: reduce remaining heavy shadows */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-card,
  .woospeak-ai-chat-panel,
  .woospeak-ai-messages,
  .woospeak-ai-message,
  .woospeak-ai-bubble,
  .woospeak-ai-card-empty
){
  box-shadow:var(--ws-light-shadow-md) !important;
}

/* Hero course images: keep image readable without hiding the title */
#woospeak-ai-app[data-theme="light"] :where(.ws-course-hero,.ws-course-cover,.ws-course-card-cover,.ws-course-library-card-cover)::after{
  background:linear-gradient(180deg,rgba(15,23,42,.06) 0%,rgba(15,23,42,.24) 58%,rgba(15,23,42,.45) 100%) !important;
  opacity:.72 !important;
}

/* =========================================================
   V17.0.7 — FINAL THEME POLISH / ARCHITECTURE LOCK
   CSS only. PHP/JS/HTML unchanged.
   Dark remains canonical. Light only corrects palette/background tokens.
   ========================================================= */

/* DARK — restore canonical dark readability after light polish rules */
#woospeak-ai-app[data-theme="dark"] .ws-profile-summary,
#woospeak-ai-app[data-theme="auto"] .ws-profile-summary{
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(8,14,27,.92)) !important;
  color:#eaf2ff !important;
  -webkit-text-fill-color:#eaf2ff !important;
  border-color:rgba(147,197,253,.30) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}

#woospeak-ai-app[data-theme="dark"] :where(
  .woospeak-ai-courses-title,
  .woospeak-ai-courses-library-title,
  .woospeak-ai-level-title,
  .woospeak-ai-dashboard-title,
  .woospeak-ai-section-title
),
#woospeak-ai-app[data-theme="auto"] :where(
  .woospeak-ai-courses-title,
  .woospeak-ai-courses-library-title,
  .woospeak-ai-level-title,
  .woospeak-ai-dashboard-title,
  .woospeak-ai-section-title
){
  color:#f8fbff !important;
  background:linear-gradient(180deg,#ffffff 0%,#dbeafe 62%,#93c5fd 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:0 12px 34px rgba(0,0,0,.28) !important;
}

#woospeak-ai-app[data-theme="dark"] :where(
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-card-shell,
  .woospeak-ai-card-panel,
  .woospeak-ai-card-section,
  .woospeak-ai-card-body
),
#woospeak-ai-app[data-theme="auto"] :where(
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-card-shell,
  .woospeak-ai-card-panel,
  .woospeak-ai-card-section,
  .woospeak-ai-card-body
){
  background:var(--ws-gradient-surface) !important;
  background-color:var(--ws-color-card) !important;
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:initial !important;
  border-color:var(--ws-color-border) !important;
  box-shadow:var(--ws-shadow-md) !important;
}

#woospeak-ai-app[data-theme="dark"] :where(
  .woospeak-ai-card-empty-title,
  .woospeak-ai-card-title,
  .woospeak-ai-card h1,
  .woospeak-ai-card h2,
  .woospeak-ai-card h3,
  .woospeak-ai-card h4
),
#woospeak-ai-app[data-theme="auto"] :where(
  .woospeak-ai-card-empty-title,
  .woospeak-ai-card-title,
  .woospeak-ai-card h1,
  .woospeak-ai-card h2,
  .woospeak-ai-card h3,
  .woospeak-ai-card h4
){
  color:var(--ws-color-text) !important;
  -webkit-text-fill-color:var(--ws-color-text) !important;
}

#woospeak-ai-app[data-theme="dark"] :where(
  .woospeak-ai-card-empty-text,
  .woospeak-ai-card-text,
  .woospeak-ai-card p,
  .woospeak-ai-card li,
  .woospeak-ai-card small
),
#woospeak-ai-app[data-theme="auto"] :where(
  .woospeak-ai-card-empty-text,
  .woospeak-ai-card-text,
  .woospeak-ai-card p,
  .woospeak-ai-card li,
  .woospeak-ai-card small
){
  color:var(--ws-color-text-soft) !important;
  -webkit-text-fill-color:initial !important;
}

#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card-suggestion,.ws-badge,.ws-chip,.ws-pill),
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card-suggestion,.ws-badge,.ws-chip,.ws-pill){
  background:rgba(96,165,250,.10) !important;
  border-color:rgba(147,197,253,.24) !important;
  color:var(--ws-color-text-soft) !important;
  -webkit-text-fill-color:var(--ws-color-text-soft) !important;
}

/* LIGHT — remove remaining blue page stage/borders while keeping the same layout */
#woospeak-ai-app[data-theme="light"]{
  --ws-color-bg-page:#f6f8ff;
  --ws-color-bg-page-2:#eef4ff;
  --ws-gradient-page:linear-gradient(180deg,#ffffff 0%,#f6f8ff 52%,#eef4ff 100%);
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-courses-generate-section,
  .woospeak-ai-courses-library-section,
  .woospeak-ai-panel--dashboard,
  #woospeak-ai-level,
  .woospeak-ai-level-inner,
  .woospeak-ai-dashboard-inner,
  .woospeak-ai-dashboard-wrap
){
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%) !important;
  background-color:#ffffff !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-level-inner
){
  box-shadow:0 18px 42px rgba(40,60,110,.08) !important;
}

#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-header,
  .woospeak-ai-course-form,
  .woospeak-ai-courses-card,
  .woospeak-ai-courses-library-card,
  .woospeak-ai-level-placeholder,
  .woospeak-ai-dash-card,
  .woospeak-ai-dashboard-placeholder
){
  background:linear-gradient(180deg,#ffffff,#f7faff) !important;
  background-color:#ffffff !important;
  border-color:rgba(93,120,166,.22) !important;
  box-shadow:0 14px 34px rgba(40,60,110,.08) !important;
}

/* Dashboard CECR pills — readable in both card contexts */
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-dash-level,.woospeak-ai-dash-tag,.ws-dash-assessment-pill){
  background:linear-gradient(180deg,#ffffff,#eef5ff) !important;
  color:#243246 !important;
  -webkit-text-fill-color:#243246 !important;
  border-color:rgba(93,120,166,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 6px 14px rgba(40,60,110,.06) !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-dash-level.is-current,.woospeak-ai-dash-tag.is-recent){
  background:linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(37,99,235,.36) !important;
}

/* Avoid leftover blue edge on page panels in light mode */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-level-inner,
  .woospeak-ai-panel
)::before,
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-level-inner,
  .woospeak-ai-panel
)::after{
  opacity:.18 !important;
}

/* =========================================================
   V17.0.8 — LIGHT BORDER / RADIUS / HEADER MENU POLISH
   CSS only. PHP/JS/HTML unchanged.
   Goal: keep the same canonical structure while making light contours,
   page shells and header tabs visually coherent across Chat, Level,
   Courses and Dashboard.
   ========================================================= */

/* Light theme design tokens for final contour consistency */
#woospeak-ai-app[data-theme="light"]{
  --ws-light-page-bg:#f3f7ff;
  --ws-light-surface:#ffffff;
  --ws-light-surface-soft:#f8fbff;
  --ws-light-panel:#f6f9ff;
  --ws-light-border:rgba(118,143,184,.24);
  --ws-light-border-strong:rgba(95,125,175,.34);
  --ws-light-shadow-soft:0 12px 32px rgba(38,61,105,.075);
  --ws-light-shadow-panel:0 18px 48px rgba(38,61,105,.105);
  --ws-light-shadow-float:0 20px 60px rgba(38,61,105,.16);
  --ws-light-radius-panel:28px;
  --ws-light-radius-card:24px;
}

/* Header menu: remove the heavy grey pill while keeping the exact same tab structure */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(239,246,255,.68)) !important;
  border-color:rgba(116,139,179,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 28px rgba(38,61,105,.10) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tab{
  background:rgba(255,255,255,.54) !important;
  border-color:rgba(116,139,179,.18) !important;
  color:#263247 !important;
  -webkit-text-fill-color:#263247 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tab:hover{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(37,99,235,.25) !important;
  color:#101827 !important;
  -webkit-text-fill-color:#101827 !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tab.is-active{
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(37,99,235,.40) !important;
  box-shadow:0 10px 24px rgba(79,70,229,.28), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tab.is-active::after{
  opacity:.34 !important;
}

/* Global light shells: same rounded logic everywhere, no square/blue remnants */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-panel,
  .woospeak-ai-chat,
  .woospeak-ai-chat-main,
  .woospeak-ai-chat-panel,
  .woospeak-ai-chat-window,
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-level-inner,
  .ws-assessment-shell,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result
){
  border-radius:var(--ws-light-radius-panel) !important;
  border-color:var(--ws-light-border) !important;
  background:linear-gradient(180deg,var(--ws-light-surface) 0%,var(--ws-light-panel) 100%) !important;
  box-shadow:var(--ws-light-shadow-panel) !important;
}

/* Inner cards / form blocks: one visual family across Dashboard, Courses and Evaluation */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-card-shell,
  .woospeak-ai-card-panel,
  .woospeak-ai-card-section,
  .woospeak-ai-courses-header,
  .woospeak-ai-course-form,
  .woospeak-ai-courses-card,
  .woospeak-ai-courses-library-card,
  .woospeak-ai-courses-filter,
  .woospeak-ai-dash-card,
  .woospeak-ai-dashboard-placeholder,
  .ws-assessment-card,
  .ws-assessment-panel,
  .ws-assessment-start-card,
  .ws-course-step,
  .ws-course-card,
  .ws-course-section,
  .ws-course-activity
){
  border-radius:var(--ws-light-radius-card) !important;
  border-color:var(--ws-light-border) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:var(--ws-light-shadow-soft) !important;
}

/* Remove the remaining blue/purple outer stage visible on Courses, Level and Dashboard */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-level-inner,
  .ws-assessment-shell,
  .woospeak-ai-panel--courses,
  .woospeak-ai-panel--dashboard,
  .woospeak-ai-panel--level
)::before,
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-level-inner,
  .ws-assessment-shell,
  .woospeak-ai-panel--courses,
  .woospeak-ai-panel--dashboard,
  .woospeak-ai-panel--level
)::after{
  opacity:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* If the blue stage is on the element itself, neutralize it in light mode only */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-panel--courses,
  .woospeak-ai-panel--dashboard,
  .woospeak-ai-panel--level,
  .woospeak-ai-courses-generate-section,
  .woospeak-ai-courses-library-section,
  .woospeak-ai-courses-viewer-section
){
  background:transparent !important;
  box-shadow:none !important;
}

/* Chat borders: clean card frame, same radius family as the right coach card */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-layout .woospeak-ai-chat{
  overflow:hidden !important;
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-light-radius-panel) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%) !important;
  box-shadow:var(--ws-light-shadow-panel) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-layout .woospeak-ai-chat-log{
  background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%) !important;
  border-color:var(--ws-light-border) !important;
  border-radius:0 0 var(--ws-light-radius-panel) var(--ws-light-radius-panel) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-chat-header,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-chat-toolbar{
  background:linear-gradient(180deg,#ffffff,#f7faff) !important;
  border-color:var(--ws-light-border) !important;
}

/* Right coach card: align frame tone with chat without changing the dark canonical card */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-empty,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card{
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-light-radius-panel) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
  box-shadow:var(--ws-light-shadow-float) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-empty-header,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-header{
  border-radius:20px !important;
  border-color:var(--ws-light-border) !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
}

/* Course / Library small nav: same visual vocabulary as header tabs, not a separate grey style */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-courses-topnav-btn{
  background:linear-gradient(180deg,#ffffff,#f7faff) !important;
  border-color:var(--ws-light-border) !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  box-shadow:0 8px 18px rgba(38,61,105,.07) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-courses-topnav-btn:hover,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-courses-topnav-btn.is-active{
  background:linear-gradient(135deg,#2563eb,#7c3aed) !important;
  border-color:rgba(37,99,235,.36) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 10px 24px rgba(79,70,229,.22) !important;
}

/* Evaluation buttons and pills: lighter outline, readable, same rounded system */
#woospeak-ai-app[data-theme="light"] :where(
  .ws-assessment-start-choice,
  .ws-assessment-choice,
  .ws-assessment-option,
  .ws-answer-choice,
  .woospeak-ai-dash-level,
  .woospeak-ai-dash-tag,
  .ws-dash-assessment-pill
){
  border-radius:999px !important;
  background:linear-gradient(180deg,#ffffff,#f3f8ff) !important;
  border-color:var(--ws-light-border-strong) !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  box-shadow:0 7px 16px rgba(38,61,105,.06) !important;
}
#woospeak-ai-app[data-theme="light"] :where(
  .ws-assessment-start-choice:hover,
  .ws-assessment-choice:hover,
  .ws-assessment-option:hover,
  .ws-answer-choice:hover,
  .woospeak-ai-dash-level.is-current,
  .woospeak-ai-dash-tag.is-recent
){
  background:linear-gradient(135deg,#2563eb,#7c3aed) !important;
  border-color:rgba(37,99,235,.38) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Forms and filters: one consistent border/radius/color family */
#woospeak-ai-app[data-theme="light"] :where(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select,
  .woospeak-ai-input,
  .woospeak-ai-select,
  .woospeak-ai-textarea,
  .woospeak-ai-courses-filter input,
  .woospeak-ai-courses-filter select
){
  border-color:var(--ws-light-border) !important;
  border-radius:18px !important;
  background:#ffffff !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 16px rgba(38,61,105,.045) !important;
}
#woospeak-ai-app[data-theme="light"] :where(input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],textarea)::placeholder{
  color:#8392aa !important;
  -webkit-text-fill-color:#8392aa !important;
}

/* =========================================================
   V17.0.9 — LIGHT STRUCTURE ALIGNMENT / CONTOURS FINAL PASS
   CSS-only. PHP/JS/HTML unchanged.
   Goal: light theme keeps the dark canonical structure, with cleaner borders,
   unified radii, softer shadows and no extra assessment wrapper frame.
   ========================================================= */
#woospeak-ai-app[data-theme="light"]{
  --ws-light-border:rgba(111,137,178,.18);
  --ws-light-border-strong:rgba(88,116,166,.26);
  --ws-light-border-soft:rgba(123,148,188,.12);
  --ws-light-radius-panel:28px;
  --ws-light-radius-card:24px;
  --ws-light-radius-inner:20px;
  --ws-light-shadow-soft:0 10px 26px rgba(38,61,105,.055);
  --ws-light-shadow-panel:0 16px 42px rgba(38,61,105,.085);
  --ws-light-shadow-float:0 18px 48px rgba(38,61,105,.115);
  --ws-light-tabs-bg:linear-gradient(180deg,rgba(255,255,255,.88),rgba(239,245,255,.82));
  --ws-light-tabs-border:rgba(103,128,169,.22);
}

/* Header menu: premium light capsule instead of grey plastic */
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-tabs,.woospeak-ai-nav,.woospeak-ai-main-tabs,.woospeak-ai-hero-tabs){
  background:var(--ws-light-tabs-bg) !important;
  border:1px solid var(--ws-light-tabs-border) !important;
  border-radius:999px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 12px 28px rgba(38,61,105,.085) !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-tab,.woospeak-ai-nav-btn,.woospeak-ai-main-tab){
  border-radius:999px !important;
  border:1px solid rgba(103,128,169,.16) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(245,249,255,.60)) !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  box-shadow:none !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-tab.is-active,.woospeak-ai-nav-btn.is-active,.woospeak-ai-main-tab.is-active,[aria-selected="true"]){
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%) !important;
  border-color:rgba(37,99,235,.34) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 10px 22px rgba(79,70,229,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* One light contour system for all major shells */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-dashboard-panel,
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-courses-shell,
  .woospeak-ai-courses-view,
  .woospeak-ai-level-inner,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result,
  .ws-course-page,
  .ws-course-card
){
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-light-radius-panel) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:var(--ws-light-shadow-panel) !important;
}

/* Assessment: remove the extra visible wrapper frame in light; keep only the canonical inner card */
#woospeak-ai-app[data-theme="light"] .ws-assessment-shell{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}
#woospeak-ai-app[data-theme="light"] .ws-assessment-shell::before,
#woospeak-ai-app[data-theme="light"] .ws-assessment-shell::after{
  display:none !important;
  opacity:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#woospeak-ai-app[data-theme="light"] :where(.ws-assessment-start,.ws-assessment-screen,.ws-assessment-result){
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding:clamp(34px,4vw,64px) !important;
}
#woospeak-ai-app[data-theme="light"] :where(.ws-assessment-start-card,.ws-assessment-card,.ws-assessment-panel){
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-light-radius-card) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(249,252,255,.92)) !important;
  box-shadow:0 12px 30px rgba(38,61,105,.055) !important;
}

/* Inner cards: same radius and border language as dark, just light palette */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-message,
  .woospeak-ai-card-empty-header,
  .woospeak-ai-card-header,
  .woospeak-ai-course-form,
  .woospeak-ai-courses-header,
  .woospeak-ai-library-filters,
  .woospeak-ai-courses-filter,
  .woospeak-ai-dash-card,
  .woospeak-ai-dashboard-placeholder,
  .ws-course-step,
  .ws-course-section,
  .ws-course-activity,
  .ws-course-progress-panel
){
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-light-radius-card) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:var(--ws-light-shadow-soft) !important;
}

/* Chat/right card: reduce the remaining heavy contour and align radii */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-layout .woospeak-ai-chat,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-empty,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card{
  border-color:var(--ws-light-border-strong) !important;
  border-radius:var(--ws-light-radius-panel) !important;
  box-shadow:var(--ws-light-shadow-float) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-layout .woospeak-ai-chat-log{
  border-radius:0 0 var(--ws-light-radius-panel) var(--ws-light-radius-panel) !important;
}

/* Courses/library: filters and cards must not keep the dark grey panel in light */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-library-filters,
#woospeak-ai-app[data-theme="light"] :where(.ws-course-filters,.ws-course-library-filters,.woospeak-ai-courses-filters,.ws-courses-filters,.ws-course-filter-panel){
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
  border-color:var(--ws-light-border) !important;
  box-shadow:var(--ws-light-shadow-soft) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-library-filters .woospeak-ai-course-field label,
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-course-field label,.ws-course-filter-label,.ws-filter-label){
  color:#26364f !important;
  -webkit-text-fill-color:#26364f !important;
  opacity:1 !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-library-filters input,.woospeak-ai-library-filters select,.woospeak-ai-course-field input,.woospeak-ai-course-field select){
  background:#ffffff !important;
  border:1px solid var(--ws-light-border-strong) !important;
  border-radius:18px !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  box-shadow:0 8px 18px rgba(38,61,105,.045) !important;
}

/* Neutralize residual blue/purple frame on light pages without touching dark */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-level-inner,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-panel--courses,
  .woospeak-ai-panel--level,
  .woospeak-ai-panel--dashboard
){
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
}
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-level-inner,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-panel--courses,
  .woospeak-ai-panel--level,
  .woospeak-ai-panel--dashboard
)::before,
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-level-inner,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-panel--courses,
  .woospeak-ai-panel--level,
  .woospeak-ai-panel--dashboard
)::after{
  opacity:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* =========================================================
   V17.0.10 — DESIGN SYSTEM CONTOUR ALIGNMENT
   CSS-only. PHP/JS/HTML untouched.
   Dark remains the canonical geometry; light changes only palette, not structure.
   ========================================================= */
#woospeak-ai-app{
  --ws-ds-radius-panel:28px;
  --ws-ds-radius-card:24px;
  --ws-ds-radius-control:18px;
  --ws-ds-border-width:1px;
}

#woospeak-ai-app[data-theme="light"]{
  --ws-light-border:rgba(106,132,174,.20);
  --ws-light-border-strong:rgba(88,116,166,.28);
  --ws-light-border-soft:rgba(122,148,188,.12);
  --ws-light-surface:#ffffff;
  --ws-light-surface-soft:#f8fbff;
  --ws-light-panel:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  --ws-light-panel-flat:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  --ws-light-shadow-panel:0 18px 46px rgba(38,61,105,.075);
  --ws-light-shadow-card:0 10px 28px rgba(38,61,105,.055);
  --ws-light-shadow-soft:0 6px 18px rgba(38,61,105,.040);
}

/* Canonical panel geometry: same radius/border family everywhere. */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-layout .woospeak-ai-chat,
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-dashboard-panel,
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-courses-shell,
  .woospeak-ai-level-inner,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result
){
  border:var(--ws-ds-border-width) solid var(--ws-light-border) !important;
  border-radius:var(--ws-ds-radius-panel) !important;
  background:var(--ws-light-panel) !important;
  box-shadow:var(--ws-light-shadow-panel) !important;
  outline:0 !important;
}

/* Remove extra visual layers/halos that create double or triple contours in light. */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-level-inner,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result
)::before,
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-level-inner,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result
)::after{
  opacity:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border:0 !important;
}

/* Chat and coach card: one contour only, aligned with dark geometry. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-layout .woospeak-ai-chat,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-empty,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card{
  border-color:var(--ws-light-border-strong) !important;
  box-shadow:var(--ws-light-shadow-panel) !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-chat-header,.woospeak-ai-conversation-header,.woospeak-ai-chat-toolbar){
  border:1px solid var(--ws-light-border) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 8px 20px rgba(38,61,105,.045), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-chat-log{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-message,.woospeak-ai-bubble,.woospeak-ai-message-assistant,.woospeak-ai-message-user){
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-ds-radius-card) !important;
  box-shadow:var(--ws-light-shadow-card) !important;
  background:rgba(255,255,255,.90) !important;
}

/* Coach card header: same component structure, no extra white plate. */
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card-empty-head,.woospeak-ai-card-header,.ws-card-head){
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-ds-radius-card) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:var(--ws-light-shadow-soft) !important;
}

/* Assessment: outer block is the panel; the start-card must not become a second card. */
#woospeak-ai-app[data-theme="light"] .ws-assessment-shell{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
#woospeak-ai-app[data-theme="light"] .ws-assessment-start{
  min-height:300px !important;
  padding:20px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#woospeak-ai-app[data-theme="light"] .ws-assessment-start-card{
  width:100% !important;
  max-width:720px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#woospeak-ai-app[data-theme="light"] .ws-assessment-start-choice{
  border:1px solid var(--ws-light-border-strong) !important;
  border-radius:var(--ws-ds-radius-control) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:var(--ws-light-shadow-soft) !important;
  color:#142033 !important;
  -webkit-text-fill-color:#142033 !important;
}

/* Courses and library: same light contour system, no dark filter island. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-library-filters,
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-course-form,.woospeak-ai-courses-header,.ws-course-step,.ws-course-section,.ws-course-activity){
  border:1px solid var(--ws-light-border) !important;
  border-radius:var(--ws-ds-radius-card) !important;
  background:var(--ws-light-panel-flat) !important;
  box-shadow:var(--ws-light-shadow-card) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-library-filters *{
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-library-filters input,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-library-filters select,
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-course-field input,.woospeak-ai-course-field select,.woospeak-ai-course-field textarea){
  border:1px solid var(--ws-light-border-strong) !important;
  border-radius:var(--ws-ds-radius-control) !important;
  background:#ffffff !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px rgba(38,61,105,.035) !important;
}

/* Header menu: keep dark geometry, light palette, no grey plastic. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs{
  background:rgba(255,255,255,.78) !important;
  border:1px solid var(--ws-light-border) !important;
  border-radius:999px !important;
  box-shadow:0 10px 26px rgba(38,61,105,.07), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs button,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tab{
  border-radius:999px !important;
  border:1px solid rgba(106,132,174,.18) !important;
  background:rgba(255,255,255,.62) !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  box-shadow:none !important;
}
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs button.is-active,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs button[aria-selected="true"],
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tab.is-active,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tab[aria-selected="true"]{
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:rgba(37,99,235,.34) !important;
  box-shadow:0 10px 24px rgba(79,70,229,.20), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Avoid visible blue/purple page-edge frames in light. */
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-courses-wrap,.woospeak-ai-courses-inner,.woospeak-ai-level-inner,.woospeak-ai-dashboard-wrap){
  overflow:hidden !important;
}

/* =========================================================
   V17.0.11 — DESIGN SYSTEM FINAL CONTOUR ALIGNMENT
   CSS-only. PHP/JS/HTML untouched.
   Goal: light uses the exact same contour system as dark:
   one panel, one border, one radius, one soft shadow.
   ========================================================= */
#woospeak-ai-app[data-theme="light"]{
  --ws-ds-contour-radius-xl:28px;
  --ws-ds-contour-radius-lg:24px;
  --ws-ds-contour-radius-md:18px;
  --ws-ds-contour-border:rgba(97,121,161,.22);
  --ws-ds-contour-border-strong:rgba(78,101,145,.30);
  --ws-ds-contour-border-soft:rgba(126,148,183,.14);
  --ws-ds-contour-surface:#ffffff;
  --ws-ds-contour-surface-soft:#f8fbff;
  --ws-ds-contour-panel:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  --ws-ds-contour-control:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  --ws-ds-contour-shadow:0 18px 46px rgba(24,43,77,.075);
  --ws-ds-contour-shadow-soft:0 8px 22px rgba(24,43,77,.055);
  --ws-ds-contour-shadow-subtle:0 4px 12px rgba(24,43,77,.040);
}

/* Global light panel contour: no double borders, no halo stack. */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-layout .woospeak-ai-chat,
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-dashboard-panel,
  .woospeak-ai-level-inner,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result,
  .ws-course-step
){
  border:1px solid var(--ws-ds-contour-border) !important;
  border-radius:var(--ws-ds-contour-radius-xl) !important;
  background:var(--ws-ds-contour-panel) !important;
  box-shadow:var(--ws-ds-contour-shadow) !important;
  outline:0 !important;
}

/* Remove the visual pseudo-layers responsible for double/triple contours in light. */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-dashboard-panel,
  .woospeak-ai-level-inner,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result,
  .ws-course-step
)::before,
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-chat,
  .woospeak-ai-card,
  .woospeak-ai-card-empty,
  .woospeak-ai-dashboard-wrap,
  .woospeak-ai-dashboard-panel,
  .woospeak-ai-level-inner,
  .ws-assessment-start,
  .ws-assessment-screen,
  .ws-assessment-result,
  .ws-course-step
)::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Structural containers must not look like extra cards. */
#woospeak-ai-app[data-theme="light"] :where(
  .woospeak-ai-layout,
  .woospeak-ai-courses-shell,
  .woospeak-ai-courses-wrap,
  .woospeak-ai-courses-inner,
  .woospeak-ai-courses-generate-section,
  .woospeak-ai-courses-library-section,
  .woospeak-ai-courses-viewer-section,
  .ws-assessment-shell,
  .woospeak-ai-dashboard-inner,
  .woospeak-ai-courses-viewer,
  .ws-course-render,
  .ws-course-page,
  .ws-course-content,
  .ws-course-step-content
){
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Chat selector: in light it must be the same capsule geometry, not the dark pill. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-conversations.ws-conversations-compact,
#woospeak-ai-app[data-theme="light"] .ws-conversations-compact-bar,
#woospeak-ai-app[data-theme="light"] .ws-conversation-select,
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-chat-header,.woospeak-ai-conversation-header,.woospeak-ai-chat-toolbar){
  border:1px solid var(--ws-ds-contour-border) !important;
  border-radius:999px !important;
  background:var(--ws-ds-contour-control) !important;
  box-shadow:var(--ws-ds-contour-shadow-soft) !important;
  color:#101b2d !important;
  -webkit-text-fill-color:#101b2d !important;
}
#woospeak-ai-app[data-theme="light"] .ws-conversation-select *{
  color:#101b2d !important;
  -webkit-text-fill-color:#101b2d !important;
}

/* Chat body and coach card: one clean contour, same radius family. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-chat-log,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-thread,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-messages{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-message,.woospeak-ai-bubble,.woospeak-ai-message-assistant,.woospeak-ai-message-user){
  border:1px solid var(--ws-ds-contour-border-soft) !important;
  border-radius:var(--ws-ds-contour-radius-lg) !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:var(--ws-ds-contour-shadow-soft) !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card-empty-head,.woospeak-ai-card-header,.ws-card-head){
  border:1px solid var(--ws-ds-contour-border) !important;
  border-radius:var(--ws-ds-contour-radius-lg) !important;
  background:rgba(255,255,255,.80) !important;
  box-shadow:var(--ws-ds-contour-shadow-subtle) !important;
}

/* Assessment: only the outer section is the card. The start card is content, not a second frame. */
#woospeak-ai-app[data-theme="light"] .ws-assessment-start{
  padding:56px 48px !important;
  min-height:300px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#woospeak-ai-app[data-theme="light"] .ws-assessment-start-card{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  max-width:760px !important;
  margin:0 auto !important;
}
#woospeak-ai-app[data-theme="light"] .ws-assessment-start-choice{
  border:1px solid var(--ws-ds-contour-border-strong) !important;
  border-radius:999px !important;
  background:var(--ws-ds-contour-control) !important;
  box-shadow:var(--ws-ds-contour-shadow-subtle) !important;
  color:#101b2d !important;
  -webkit-text-fill-color:#101b2d !important;
}

/* Courses: remove artificial content rectangles inside lesson cards. */
#woospeak-ai-app[data-theme="light"] :where(
  .ws-course-step p,
  .ws-course-step ul,
  .ws-course-step ol,
  .ws-course-step li,
  .ws-course-step-content p,
  .ws-course-step-content ul,
  .ws-course-step-content ol,
  .ws-course-section p,
  .ws-course-section ul,
  .ws-course-section ol,
  .ws-course-section li,
  .ws-course-body,
  .ws-course-text,
  .ws-course-copy,
  .ws-course-keypoints,
  .ws-course-language-list
){
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
#woospeak-ai-app[data-theme="light"] :where(.ws-course-step h2,.ws-course-step h3,.ws-course-step h4){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-course-hero-title,.ws-course-hero-title,.ws-course-cover-title){
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 3px 14px rgba(0,0,0,.45) !important;
}

/* Library filters: align with the same light input system, no dark island. */
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-library-filters,.woospeak-ai-courses-library-toolbar){
  border:1px solid var(--ws-ds-contour-border) !important;
  border-radius:var(--ws-ds-contour-radius-lg) !important;
  background:var(--ws-ds-contour-panel) !important;
  box-shadow:var(--ws-ds-contour-shadow-soft) !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-library-filters,.woospeak-ai-courses-library-toolbar) label{
  color:#243246 !important;
  -webkit-text-fill-color:#243246 !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-library-filters,.woospeak-ai-courses-library-toolbar) :where(input,select,button){
  border:1px solid var(--ws-ds-contour-border) !important;
  border-radius:var(--ws-ds-contour-radius-md) !important;
  background:var(--ws-ds-contour-control) !important;
  box-shadow:var(--ws-ds-contour-shadow-subtle) !important;
  color:#101b2d !important;
  -webkit-text-fill-color:#101b2d !important;
}

/* Header navigation in light: same capsule system, cleaner than grey plastic. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs{
  border:1px solid rgba(112,132,168,.20) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 12px 30px rgba(24,43,77,.08), inset 0 1px 0 rgba(255,255,255,.90) !important;
  overflow:hidden !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-tabs button,.woospeak-ai-tab){
  border:1px solid rgba(112,132,168,.16) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.68) !important;
  box-shadow:none !important;
  color:#101b2d !important;
  -webkit-text-fill-color:#101b2d !important;
}
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-tabs button.is-active,.woospeak-ai-tabs button[aria-selected="true"],.woospeak-ai-tab.is-active,.woospeak-ai-tab[aria-selected="true"]){
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%) !important;
  border-color:rgba(37,99,235,.35) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 10px 24px rgba(79,70,229,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* =========================================================
   V17.0.12 — CARD CONTOUR + DARK CARD RESTORE
   CSS-only. PHP/JS/HTML untouched.
   Purpose: normalize the right coach-card with the same WDS contour
   system as the message column, and restore dark pedagogical card rules.
   ========================================================= */

/* Light: the right coach card must use the same soft contour family as messages. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-card,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-inner,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-empty,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-empty--framed,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card .ws-card{
  border-color:var(--ws-ds-contour-border-soft) !important;
  outline:0 !important;
  box-shadow:var(--ws-ds-contour-shadow-soft) !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-card,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-card{
  border:1px solid var(--ws-ds-contour-border-soft) !important;
  border-radius:var(--ws-ds-contour-radius-xl) !important;
  background:var(--ws-ds-contour-panel) !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-inner{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-card-empty--framed,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-card .ws-card{
  border:1px solid var(--ws-ds-contour-border-soft) !important;
  border-radius:var(--ws-ds-contour-radius-lg) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,251,255,.96)) !important;
}

#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,.woospeak-ai-card-empty,.woospeak-ai-card-empty--framed,.woospeak-ai-card .ws-card)::before,
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,.woospeak-ai-card-empty,.woospeak-ai-card-empty--framed,.woospeak-ai-card .ws-card)::after{
  content:none !important;
  display:none !important;
}

/* Dark: pedagogical card sections must remain dark, never inherit light cards. */
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card{
  border:1px solid rgba(76,105,145,.32) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(15,28,50,.84),rgba(7,16,32,.96)) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card-inner,
#woospeak-ai-app[data-theme="dark"] #woospeak-ai-card,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card-inner,
#woospeak-ai-app[data-theme="auto"] #woospeak-ai-card{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card{
  border:1px solid rgba(91,125,170,.30) !important;
  border-radius:24px !important;
  background:linear-gradient(180deg,rgba(18,33,57,.92),rgba(8,18,34,.96)) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
  color:#eef6ff !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-head,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-head{
  background:linear-gradient(180deg,rgba(56,80,125,.22),rgba(10,22,41,0)) !important;
  border:0 !important;
  box-shadow:none !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-title,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-title *,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-sec-title,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-sec-title *,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-title,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-title *,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-sec-title,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-sec-title *{
  color:#f8fbff !important;
  -webkit-text-fill-color:#f8fbff !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-helper,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-body,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-body *,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-helper,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-body,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-body *{
  color:rgba(226,236,248,.88) !important;
  -webkit-text-fill-color:initial !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-sec,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-box,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-line,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-micro-objective,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-micro-wrap,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-micro-step,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-sec,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-box,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-line,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-micro-objective,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-micro-wrap,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-micro-step{
  border:1px solid rgba(91,125,170,.28) !important;
  background:linear-gradient(180deg,rgba(24,41,67,.72),rgba(12,26,47,.82)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
  color:rgba(226,236,248,.90) !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-k span,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-k span{
  background:rgba(96,165,250,.12) !important;
  border:1px solid rgba(147,197,253,.22) !important;
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-badge,
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-badge-cefr,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-badge,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-badge-cefr{
  background:rgba(96,165,250,.10) !important;
  border:1px solid rgba(147,197,253,.24) !important;
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
  box-shadow:none !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card .ws-card-sec-bar,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card .ws-card-sec-bar{
  background:linear-gradient(90deg,rgba(96,165,250,.72),rgba(129,140,248,.42)) !important;
}

/* V17.0.13 — Final course media readability.
   These selectors protect media overlays from generic card text rules. */
#woospeak-ai-app .woospeak-ai-course-thumb-media .woospeak-ai-course-thumb-title,
#woospeak-ai-app .woospeak-ai-course-thumb-titlebar .woospeak-ai-course-thumb-title,
#woospeak-ai-app .ws-course-hero .ws-course-title{
  color:var(--ws-legacy-white);
  -webkit-text-fill-color:var(--ws-legacy-white);
  text-shadow:0 2px 16px rgba(15,23,42,.72), 0 1px 2px rgba(15,23,42,.95);
}
#woospeak-ai-app .ws-course-hero .ws-course-level-badge,
#woospeak-ai-app .ws-course-hero .ws-course-topic-badge{
  color:var(--ws-legacy-white);
  -webkit-text-fill-color:var(--ws-legacy-white);
}
#woospeak-ai-app .woospeak-ai-courses-library-count,
#woospeak-ai-app .woospeak-ai-courses-library-results{
  color:#1d4ed8;
  -webkit-text-fill-color:#1d4ed8;
  background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(99,102,241,.12));
  border-color:rgba(59,130,246,.30);
}


/* =========================================================
   V17.0.14 — WDS canonical loading card state
   CSS-only. PHP/JS/HTML untouched.
   Purpose: the right coach card loading state must use one single
   WDS frame only. The loader content is content, not a nested card.
   ========================================================= */

/* Shared loading content: no nested frame, no extra card, no halo. */
#woospeak-ai-app :where(.woospeak-ai-card,.woospeak-ai-card-empty--framed,#woospeak-ai-card) :where(.ws-card-loading,.ws-card-loader-content){
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  text-align:center !important;
}

#woospeak-ai-app :where(.woospeak-ai-card,.woospeak-ai-card-empty--framed,#woospeak-ai-card) :where(.ws-card-loading,.ws-card-loader-content)::before,
#woospeak-ai-app :where(.woospeak-ai-card,.woospeak-ai-card-empty--framed,#woospeak-ai-card) :where(.ws-card-loading,.ws-card-loader-content)::after{
  content:none !important;
  display:none !important;
}

/* Light: one readable coach-card frame, aligned with the message panel contour. */
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed).ws-card-is-loading,
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed).is-loading,
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed):has(.ws-card-loading),
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed):has(.ws-card-loader-content){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:220px !important;
  padding:34px 28px !important;
  border:1px solid var(--ws-ds-contour-border-soft) !important;
  border-radius:var(--ws-ds-contour-radius-xl) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,255,.98)) !important;
  box-shadow:var(--ws-ds-contour-shadow-soft) !important;
  color:#111827 !important;
  -webkit-text-fill-color:initial !important;
}

#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) :where(.ws-card-loading-text,.ws-card-loader-content,.ws-card-loading){
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) .ws-card-loading-icon{
  color:#4f46e5 !important;
  -webkit-text-fill-color:#4f46e5 !important;
  opacity:1 !important;
  filter:none !important;
}

#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) .ws-card-loading-bar{
  width:170px !important;
  height:5px !important;
  margin-top:4px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#dbe6f7 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) .ws-card-loading-progress{
  height:100% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#2563eb,#7c3aed) !important;
}

/* Dark: preserve the dark card system, but keep the loading state single-frame. */
#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed).ws-card-is-loading,
#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed).is-loading,
#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed):has(.ws-card-loading),
#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed):has(.ws-card-loader-content),
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed).ws-card-is-loading,
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed).is-loading,
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed):has(.ws-card-loading),
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed):has(.ws-card-loader-content){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:220px !important;
  padding:34px 28px !important;
  border:1px solid rgba(76,105,145,.32) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(15,28,50,.84),rgba(7,16,32,.96)) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
  color:#f8fbff !important;
}

#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) :where(.ws-card-loading-text,.ws-card-loader-content,.ws-card-loading),
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) :where(.ws-card-loading-text,.ws-card-loader-content,.ws-card-loading){
  color:#f8fbff !important;
  -webkit-text-fill-color:#f8fbff !important;
  opacity:1 !important;
  font-weight:800 !important;
}

#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) .ws-card-loading-bar,
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) .ws-card-loading-bar{
  width:170px !important;
  height:5px !important;
  margin-top:4px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(148,163,184,.28) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) .ws-card-loading-progress,
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-card,#woospeak-ai-card,.woospeak-ai-card-empty--framed) .ws-card-loading-progress{
  height:100% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#60a5fa,#8b5cf6) !important;
}

/* =========================================================
   V17.0.15 — Course media readability canonical rules
   CSS-only. Keeps the same PHP/JS/HTML and restores media contrast
   through the design system instead of ad-hoc component patches.
   ========================================================= */

/* Course hero media: the text is on top of an image, so it must keep
   media-overlay contrast in both light and dark themes. */
#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-title,.ws-course-hero-title),
#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-level-badge,.ws-course-topic-badge){
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:0 3px 18px rgba(2,8,23,.82),0 1px 3px rgba(2,8,23,.98) !important;
  opacity:1 !important;
}

#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-level-badge,.ws-course-topic-badge){
  background:rgba(15,23,42,.38) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  box-shadow:0 10px 24px rgba(2,8,23,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-hero-content,.ws-course-hero-overlay){
  background:linear-gradient(180deg,rgba(2,8,23,0) 0%,rgba(2,8,23,.26) 44%,rgba(2,8,23,.80) 100%) !important;
}

/* Library thumbnails: keep the media/title overlay legible and make the
   card body clean instead of grey-on-grey. */
#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.98)) !important;
  border-color:rgba(189,204,224,.78) !important;
  box-shadow:0 16px 42px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-body{
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%) !important;
  color:#132033 !important;
  -webkit-text-fill-color:initial !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-overlay{
  background:linear-gradient(180deg,rgba(2,8,23,.04) 0%,rgba(2,8,23,.22) 42%,rgba(2,8,23,.88) 100%) !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-titlebar,.woospeak-ai-course-thumb-titlebar .woospeak-ai-course-thumb-title,.woospeak-ai-course-thumb-title){
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:0 3px 18px rgba(2,8,23,.86),0 1px 3px rgba(2,8,23,1) !important;
  opacity:1 !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-meta,.woospeak-ai-course-thumb-date,.woospeak-ai-course-thumb-progress){
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  opacity:1 !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-topic,.woospeak-ai-course-thumb-language){
  background:linear-gradient(180deg,#eef6ff,#e9f1ff) !important;
  border:1px solid rgba(59,130,246,.24) !important;
  color:#1e3a8a !important;
  -webkit-text-fill-color:#1e3a8a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86) !important;
  opacity:1 !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-open-btn{
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,.38) !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-open-btn:hover{
  border-color:rgba(59,130,246,.34) !important;
  box-shadow:0 14px 30px rgba(37,99,235,.14) !important;
}

/* Library count/result chips: no more light-blue text on light-blue chip. */
#woospeak-ai-app :where(.woospeak-ai-courses-library-count,.woospeak-ai-courses-library-results){
  background:linear-gradient(180deg,#ffffff,#eef5ff) !important;
  border:1px solid rgba(59,130,246,.28) !important;
  color:#1e3a8a !important;
  -webkit-text-fill-color:#1e3a8a !important;
  box-shadow:0 10px 24px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
  opacity:1 !important;
}

/* Dark theme keeps the same structure but avoids accidental light-card bleed. */
#woospeak-ai-app[data-theme="dark"] .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium{
  background:linear-gradient(180deg,rgba(15,28,50,.90),rgba(7,16,32,.96)) !important;
  border-color:rgba(76,105,145,.34) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-body,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-body{
  background:linear-gradient(180deg,rgba(15,28,50,.92),rgba(8,17,33,.98)) !important;
  color:#e6eef9 !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-topic,.woospeak-ai-course-thumb-language),
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-topic,.woospeak-ai-course-thumb-language){
  background:rgba(96,165,250,.12) !important;
  border-color:rgba(147,197,253,.24) !important;
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
}

/* =========================================================
   V17.0.16 — LIGHT HEADER LANGUAGE LABELS READABILITY
   CSS only. PHP/JS/HTML unchanged.
   Fix: in light mode, the labels before the language switchers
   ("Votre langue" / "J’apprends") were inheriting a dark-theme
   muted white color and became invisible on the light hero.
   ========================================================= */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-language-switcher-field,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero.ws-coach-hero .ws-language-switcher-field{
  color:#23314a !important;
  opacity:1 !important;
  text-shadow:none !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-language-switcher-field > span,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero.ws-coach-hero .ws-language-switcher-field > span{
  color:#23314a !important;
  -webkit-text-fill-color:#23314a !important;
  opacity:1 !important;
  font-weight:850 !important;
  text-shadow:none !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-coach-name,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .woospeak-ai-hero-title{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  text-shadow:none !important;
}

/* =========================================================
   V17.0.17 — Course media title/chip contrast + step action cleanup
   CSS only. PHP/JS/HTML unchanged.
   Fixes:
   - course hero title and library thumbnail titles must stay readable on media;
   - thumbnail chips must not look grey-on-grey;
   - the step completion area must not create a second large framed block.
   ========================================================= */

/* Media overlays are a special WDS case: content sits on an image,
   therefore it uses media contrast, not page text tokens. */
#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-title,.ws-course-hero-title,h1.ws-course-title),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-title,.ws-course-hero-title,h1.ws-course-title),
#woospeak-ai-app :where(.woospeak-ai-course-thumb-media,.woospeak-ai-course-thumb-titlebar) :where(.woospeak-ai-course-thumb-title,.woospeak-ai-course-card-title),
html[data-ws-theme] #woospeak-ai-app :where(.woospeak-ai-course-thumb-media,.woospeak-ai-course-thumb-titlebar) :where(.woospeak-ai-course-thumb-title,.woospeak-ai-course-card-title),
#woospeak-ai-app .woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-title,
html[data-ws-theme] #woospeak-ai-app .woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-title{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  text-shadow:0 4px 18px rgba(2,8,23,.92),0 1px 3px rgba(2,8,23,1) !important;
  filter:none !important;
}

#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-title,.ws-course-hero-title,h1.ws-course-title){
  position:relative !important;
  z-index:3 !important;
}

#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-level-badge,.ws-course-topic-badge,.ws-course-badge),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-level-badge,.ws-course-topic-badge,.ws-course-badge){
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:rgba(15,23,42,.50) !important;
  border:1px solid rgba(255,255,255,.68) !important;
  box-shadow:0 10px 24px rgba(2,8,23,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
  opacity:1 !important;
  position:relative !important;
  z-index:3 !important;
}

#woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-hero-content,.ws-course-hero-overlay),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-hero,.woospeak-ai-course-hero) :where(.ws-course-hero-content,.ws-course-hero-overlay){
  background:linear-gradient(180deg,rgba(2,8,23,0) 0%,rgba(2,8,23,.30) 40%,rgba(2,8,23,.86) 100%) !important;
  z-index:2 !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-overlay,
html[data-ws-theme] #woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-overlay{
  background:linear-gradient(180deg,rgba(2,8,23,.03) 0%,rgba(2,8,23,.24) 36%,rgba(2,8,23,.90) 100%) !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-body,
html[data-ws-theme] #woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium .woospeak-ai-course-thumb-body{
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%) !important;
  color:#132033 !important;
  -webkit-text-fill-color:initial !important;
  opacity:1 !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-topic,.woospeak-ai-course-thumb-language),
html[data-ws-theme] #woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-topic,.woospeak-ai-course-thumb-language){
  background:linear-gradient(135deg,rgba(37,99,235,.98),rgba(124,58,237,.95)) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 8px 18px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
  opacity:1 !important;
}

#woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-progress,.woospeak-ai-course-thumb-date,.woospeak-ai-course-thumb-meta),
html[data-ws-theme] #woospeak-ai-app .woospeak-ai-course-thumb.woospeak-ai-course-thumb--premium :where(.woospeak-ai-course-thumb-progress,.woospeak-ai-course-thumb-date,.woospeak-ai-course-thumb-meta){
  color:#1f2a44 !important;
  -webkit-text-fill-color:#1f2a44 !important;
  opacity:1 !important;
}

/* Step completion: the action row is only layout + a top divider.
   The visible frame must be the button itself, not a second large card. */
#woospeak-ai-app :where(.ws-course-step-actions),
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-step-actions),
#woospeak-ai-app[data-theme="light"] :where(.ws-course-step-actions),
html[data-ws-theme="light"] #woospeak-ai-app :where(.ws-course-step-actions){
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin-top:18px !important;
  padding:16px 0 0 !important;
  border-top:1px solid var(--ws-color-border,rgba(203,213,225,.70)) !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}

#woospeak-ai-app :where(.ws-course-step-actions)::before,
#woospeak-ai-app :where(.ws-course-step-actions)::after,
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-step-actions)::before,
html[data-ws-theme] #woospeak-ai-app :where(.ws-course-step-actions)::after{
  content:none !important;
  display:none !important;
}

#woospeak-ai-app[data-theme="light"] .ws-course-step-complete-btn:not(:disabled),
html[data-ws-theme="light"] #woospeak-ai-app .ws-course-step-complete-btn:not(:disabled){
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.40) !important;
  background:#ffffff !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}

#woospeak-ai-app[data-theme="light"] .ws-course-step-complete-btn:not(:disabled):hover,
html[data-ws-theme="light"] #woospeak-ai-app .ws-course-step-complete-btn:not(:disabled):hover{
  border-color:rgba(99,102,241,.36) !important;
  box-shadow:0 14px 30px rgba(99,102,241,.14) !important;
}

/* =========================================================
   V17.0.18 — Library counters contrast
   CSS-only. PHP/JS/HTML untouched.
   Purpose: the course/library count chips must be readable in light mode
   while keeping the same WDS pill geometry used in dark mode.
   ========================================================= */
#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-courses-library-count,.woospeak-ai-courses-library-results,#ws-library-count,#ws-library-results-count){
  background:linear-gradient(135deg,#2563eb 0%,#4f46e5 52%,#7c3aed 100%) !important;
  border:1px solid rgba(37,99,235,.52) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  box-shadow:0 14px 30px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.34) !important;
  text-shadow:0 1px 1px rgba(15,23,42,.22) !important;
}

#woospeak-ai-app[data-theme="light"] :where(.woospeak-ai-courses-library-count,.woospeak-ai-courses-library-results,#ws-library-count,#ws-library-results-count) *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

#woospeak-ai-app[data-theme="dark"] :where(.woospeak-ai-courses-library-count,.woospeak-ai-courses-library-results,#ws-library-count,#ws-library-results-count),
#woospeak-ai-app[data-theme="auto"] :where(.woospeak-ai-courses-library-count,.woospeak-ai-courses-library-results,#ws-library-count,#ws-library-results-count){
  background:rgba(37,99,235,.18) !important;
  border:1px solid rgba(96,165,250,.34) !important;
  color:var(--ws-legacy-blue-200) !important;
  -webkit-text-fill-color:var(--ws-legacy-blue-200) !important;
  opacity:1 !important;
  box-shadow:0 0 28px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* =========================================================
   V17.0.20 — WDS Header & Controls Refactor
   Canonical Select + LoadingCard alignment.
   This replaces legacy header/select/loading visuals with shared WDS tokens.
   ========================================================= */

/* WDS Select — one visual system for header switchers and application selects. */
#woospeak-ai-app :where(.ws-language-switcher-field){
  color:var(--wds-control-label) !important;
  -webkit-text-fill-color:var(--wds-control-label) !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
}

#woospeak-ai-app :where(.ws-language-switcher-field > span){
  color:var(--wds-control-label) !important;
  -webkit-text-fill-color:var(--wds-control-label) !important;
  opacity:1 !important;
}

#woospeak-ai-app :where(.ws-language-switcher-select,
  .ws-ui-select,
  .ws-step-form select,
  .woospeak-ai-course-filter select,
  .woospeak-ai-courses-filter select,
  .woospeak-ai-courses-library select,
  .ws-course-filter select,
  .ws-library-filter select){
  appearance:none !important;
  -webkit-appearance:none !important;
  min-height:var(--wds-control-height) !important;
  border-radius:var(--wds-control-radius) !important;
  border:1px solid var(--wds-control-border) !important;
  background:
    linear-gradient(45deg, transparent 50%, var(--wds-control-caret) 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, var(--wds-control-caret) 50%, transparent 50%) right 9px center / 6px 6px no-repeat,
    var(--wds-control-bg) !important;
  color:var(--wds-control-text) !important;
  -webkit-text-fill-color:var(--wds-control-text) !important;
  box-shadow:var(--wds-control-shadow) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  cursor:pointer !important;
  transition:border-color var(--ws-motion-fast) var(--ws-ease-standard),
             box-shadow var(--ws-motion-fast) var(--ws-ease-standard),
             background var(--ws-motion-fast) var(--ws-ease-standard),
             transform var(--ws-motion-fast) var(--ws-ease-standard) !important;
}

#woospeak-ai-app :where(.ws-language-switcher-select:hover,
  .ws-ui-select:hover,
  .ws-step-form select:hover,
  .woospeak-ai-course-filter select:hover,
  .woospeak-ai-courses-filter select:hover,
  .woospeak-ai-courses-library select:hover,
  .ws-course-filter select:hover,
  .ws-library-filter select:hover){
  border-color:var(--wds-control-border-hover) !important;
  transform:translateY(-1px) !important;
}

#woospeak-ai-app :where(.ws-language-switcher-select:focus,
  .ws-language-switcher-select:focus-visible,
  .ws-ui-select:focus,
  .ws-ui-select:focus-visible,
  .ws-step-form select:focus,
  .ws-step-form select:focus-visible,
  .woospeak-ai-course-filter select:focus,
  .woospeak-ai-courses-filter select:focus,
  .woospeak-ai-courses-library select:focus,
  .ws-course-filter select:focus,
  .ws-library-filter select:focus){
  outline:0 !important;
  border-color:var(--wds-control-border-hover) !important;
  box-shadow:var(--wds-control-focus) !important;
}

/* Light mode: header controls must no longer look like copied dark capsules. */
#woospeak-ai-app[data-theme="light"] :where(.ws-language-switcher){
  gap:8px !important;
}

#woospeak-ai-app[data-theme="light"] :where(.ws-language-switcher-field){
  grid-template-columns:minmax(86px,auto) minmax(142px,1fr) !important;
  gap:10px !important;
}

#woospeak-ai-app[data-theme="light"] :where(.ws-language-switcher-select){
  min-width:142px !important;
  max-width:174px !important;
  padding:8px 30px 8px 12px !important;
  background:
    linear-gradient(45deg, transparent 50%, #52627a 50%) right 15px center / 6px 6px no-repeat,
    linear-gradient(135deg, #52627a 50%, transparent 50%) right 10px center / 6px 6px no-repeat,
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
}

/* Dark mode keeps the premium dark visual, but it uses the same WDS Select component. */
#woospeak-ai-app[data-theme="dark"] :where(.ws-language-switcher-select),
#woospeak-ai-app[data-theme="auto"] :where(.ws-language-switcher-select){
  background:
    linear-gradient(45deg, transparent 50%, var(--wds-control-caret) 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, var(--wds-control-caret) 50%, transparent 50%) right 9px center / 6px 6px no-repeat,
    var(--wds-control-bg) !important;
}

/* WDS LoadingCard — one frame only: outer card owns the frame, loader content is content only. */
#woospeak-ai-app :where(.woospeak-ai-card.ws-card-is-loading,
  .woospeak-ai-card.is-loading,
  .woospeak-ai-card:has(.ws-card-loader-content),
  .woospeak-ai-card:has(.ws-card-loading),
  .woospeak-ai-card-empty--framed:has(.ws-card-loading),
  .woospeak-ai-card-empty--framed:has(.ws-card-loader-content)){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:170px !important;
  padding:24px !important;
  border:1px solid var(--ws-color-border) !important;
  border-radius:var(--ws-radius-xl) !important;
  background:var(--ws-gradient-surface) !important;
  box-shadow:var(--ws-shadow-md) !important;
  outline:0 !important;
}

#woospeak-ai-app :where(.woospeak-ai-card.ws-card-is-loading,
  .woospeak-ai-card.is-loading,
  .woospeak-ai-card:has(.ws-card-loader-content),
  .woospeak-ai-card:has(.ws-card-loading),
  .woospeak-ai-card-empty--framed:has(.ws-card-loading),
  .woospeak-ai-card-empty--framed:has(.ws-card-loader-content))::before,
#woospeak-ai-app :where(.woospeak-ai-card.ws-card-is-loading,
  .woospeak-ai-card.is-loading,
  .woospeak-ai-card:has(.ws-card-loader-content),
  .woospeak-ai-card:has(.ws-card-loading),
  .woospeak-ai-card-empty--framed:has(.ws-card-loading),
  .woospeak-ai-card-empty--framed:has(.ws-card-loader-content))::after{
  content:none !important;
  display:none !important;
}

#woospeak-ai-app :where(.ws-card-loader-content,.ws-card-loading){
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:240px !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  gap:12px !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  text-align:center !important;
}

#woospeak-ai-app :where(.ws-card-loader-content,.ws-card-loading)::before,
#woospeak-ai-app :where(.ws-card-loader-content,.ws-card-loading)::after{
  content:none !important;
  display:none !important;
}

#woospeak-ai-app :where(.ws-card-loading-icon){
  font-size:24px !important;
  line-height:1 !important;
  filter:none !important;
}

#woospeak-ai-app :where(.ws-card-loading-text){
  color:var(--wds-loading-text) !important;
  -webkit-text-fill-color:var(--wds-loading-text) !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.35 !important;
  opacity:1 !important;
}

#woospeak-ai-app :where(.ws-card-loading-bar){
  width:150px !important;
  height:5px !important;
  margin:2px auto 0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--wds-loading-track) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

#woospeak-ai-app :where(.ws-card-loading-progress){
  height:100% !important;
  border-radius:999px !important;
  background:var(--wds-loading-progress) !important;
  box-shadow:0 0 18px rgba(96,165,250,.28) !important;
}

@media (max-width:780px){
  #woospeak-ai-app[data-theme="light"] :where(.ws-language-switcher-field){
    grid-template-columns:minmax(74px,auto) minmax(104px,1fr) !important;
    gap:6px !important;
  }
  #woospeak-ai-app[data-theme="light"] :where(.ws-language-switcher-select){
    min-width:104px !important;
    max-width:128px !important;
    min-height:32px !important;
    padding:6px 24px 6px 9px !important;
    font-size:11px !important;
  }
}

/* =========================================================
   V17.0.21 — WDS Select light parity + single loading frame
   Source fix: override legacy high-specificity switcher rules and make
   the loader inner node content-only. Geometry remains shared WDS.
   ========================================================= */

/* Header WDS Select — light mode uses the light select skin, not the dark capsule. */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-language-switcher-field select.ws-language-switcher-select,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select.ws-language-switcher-select,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-source-lang-select,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-target-lang-select{
  appearance:none !important;
  -webkit-appearance:none !important;
  min-width:150px !important;
  min-height:38px !important;
  padding:8px 38px 8px 14px !important;
  border-radius:999px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #52627a 50%),
    linear-gradient(135deg, #52627a 50%, transparent 50%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%, 0 0 !important;
  background-size:6px 6px,6px 6px,100% 100% !important;
  background-repeat:no-repeat !important;
  border:1px solid #d7e3f4 !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  opacity:1 !important;
  font-weight:850 !important;
  text-shadow:none !important;
  box-shadow:0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-language-switcher-field select.ws-language-switcher-select:hover,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-source-lang-select:hover,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-target-lang-select:hover{
  background-image:
    linear-gradient(45deg, transparent 50%, #44536b 50%),
    linear-gradient(135deg, #44536b 50%, transparent 50%),
    linear-gradient(180deg,#ffffff 0%,#eef5ff 100%) !important;
  border-color:#bfd0e8 !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-language-switcher-field select.ws-language-switcher-select:focus,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-language-switcher-field select.ws-language-switcher-select:focus-visible,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-source-lang-select:focus,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-target-lang-select:focus{
  outline:0 !important;
  border-color:#6d63ff !important;
  box-shadow:0 0 0 4px rgba(109,99,255,.16),0 12px 26px rgba(15,23,42,.10) !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero .ws-language-switcher-select option,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-source-lang-select option,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-hero select#woospeak-ai-target-lang-select option{
  background:#ffffff !important;
  color:#172033 !important;
}

/* Coach card loading — outer aside owns the single frame; inner #woospeak-ai-card is content only. */
#woospeak-ai-app .woospeak-ai-card.ws-card-aside-is-loading{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#woospeak-ai-app .woospeak-ai-card.ws-card-aside-is-loading > .woospeak-ai-card-inner#woospeak-ai-card,
#woospeak-ai-app .woospeak-ai-card > .woospeak-ai-card-inner#woospeak-ai-card.ws-card-is-loading,
#woospeak-ai-app .woospeak-ai-card > .woospeak-ai-card-inner#woospeak-ai-card:has(.ws-card-loader-content){
  width:100% !important;
  max-width:260px !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#woospeak-ai-app[data-theme="light"] .woospeak-ai-card.ws-card-aside-is-loading{
  min-height:220px !important;
  padding:34px 28px !important;
  border:1px solid var(--ws-ds-contour-border-soft) !important;
  border-radius:var(--ws-ds-contour-radius-xl) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,255,.98)) !important;
  box-shadow:var(--ws-ds-contour-shadow-soft) !important;
}

#woospeak-ai-app[data-theme="dark"] .woospeak-ai-card.ws-card-aside-is-loading,
#woospeak-ai-app[data-theme="auto"] .woospeak-ai-card.ws-card-aside-is-loading{
  min-height:220px !important;
  padding:34px 28px !important;
  border:1px solid rgba(76,105,145,.32) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(15,28,50,.84),rgba(7,16,32,.96)) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#woospeak-ai-app .woospeak-ai-card.ws-card-aside-is-loading .ws-card-loader-content,
#woospeak-ai-app .woospeak-ai-card.ws-card-aside-is-loading .ws-card-loading{
  width:100% !important;
  max-width:240px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* =========================================================
   V17.0.24 — COURSE AI PANELS / REFRESH AUDIT FIX
   Source of truth: WDS tokens. No fixed grey/white surfaces for AI writing/oral
   criteria cards. Dark remains canonical; light is obtained through variables.
   ========================================================= */
#woospeak-ai-app .ws-course-ai-writing,
#woospeak-ai-app .ws-course-ai-oral-analysis,
#woospeak-ai-app [data-ws-course-ai-writing="1"],
#woospeak-ai-app [data-ws-course-ai-oral="1"],
#woospeak-ai-app [data-ws-course-ai-oral-analysis="1"]{
  background: var(--ws-canonical-panel-bg) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: var(--wds-shadow-card) !important;
}

#woospeak-ai-app .ws-course-ai-writing *,
#woospeak-ai-app .ws-course-ai-oral-analysis *,
#woospeak-ai-app [data-ws-course-ai-writing="1"] *,
#woospeak-ai-app [data-ws-course-ai-oral="1"] *,
#woospeak-ai-app [data-ws-course-ai-oral-analysis="1"] *{
  -webkit-text-fill-color: currentColor;
}

#woospeak-ai-app .ws-course-ai-title,
#woospeak-ai-app .ws-course-ai-heading,
#woospeak-ai-app .ws-course-ai-heading strong,
#woospeak-ai-app .ws-course-ai-writing h3,
#woospeak-ai-app .ws-course-ai-writing h4,
#woospeak-ai-app .ws-course-ai-oral-analysis h3,
#woospeak-ai-app .ws-course-ai-oral-analysis h4{
  color: var(--ws-text-canonical) !important;
}

#woospeak-ai-app .ws-course-ai-task,
#woospeak-ai-app .ws-course-ai-writing p,
#woospeak-ai-app .ws-course-ai-oral-analysis p{
  color: var(--ws-text-canonical-soft) !important;
}

#woospeak-ai-app .ws-course-ai-meta-chip{
  background: var(--ws-surface-canonical-soft) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
}

#woospeak-ai-app .ws-course-ai-criteria-grid > div,
#woospeak-ai-app .ws-course-ai-feedback-grid > div,
#woospeak-ai-app .ws-course-ai-errors,
#woospeak-ai-app .ws-course-ai-correction{
  background: var(--ws-surface-canonical-soft) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  color: var(--ws-text-canonical-soft) !important;
  -webkit-text-fill-color: var(--ws-text-canonical-soft) !important;
  box-shadow: none !important;
}

#woospeak-ai-app .ws-course-ai-criteria-grid strong,
#woospeak-ai-app .ws-course-ai-feedback-grid strong,
#woospeak-ai-app .ws-course-ai-errors strong{
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
}

#woospeak-ai-app .ws-course-ai-criteria-grid li,
#woospeak-ai-app .ws-course-ai-feedback-grid li,
#woospeak-ai-app .ws-course-ai-errors li{
  color: var(--ws-text-canonical-soft) !important;
  -webkit-text-fill-color: var(--ws-text-canonical-soft) !important;
}

#woospeak-ai-app .ws-course-ai-textarea,
#woospeak-ai-app .ws-course-ai-large-textarea,
#woospeak-ai-app [data-ws-course-ai-writing="1"] textarea,
#woospeak-ai-app [data-ws-course-ai-oral="1"] textarea,
#woospeak-ai-app [data-ws-course-ai-oral-analysis="1"] textarea{
  background: var(--ws-canonical-field-bg) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  color: var(--ws-text-canonical) !important;
  -webkit-text-fill-color: var(--ws-text-canonical) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.08) !important;
}

#woospeak-ai-app .ws-course-ai-textarea::placeholder,
#woospeak-ai-app .ws-course-ai-large-textarea::placeholder,
#woospeak-ai-app [data-ws-course-ai-writing="1"] textarea::placeholder,
#woospeak-ai-app [data-ws-course-ai-oral="1"] textarea::placeholder,
#woospeak-ai-app [data-ws-course-ai-oral-analysis="1"] textarea::placeholder{
  color: var(--ws-text-canonical-muted) !important;
  -webkit-text-fill-color: var(--ws-text-canonical-muted) !important;
}

#woospeak-ai-app .ws-course-ai-feedback-box{
  background: var(--ws-surface-canonical-soft) !important;
  border: 1px solid var(--ws-border-canonical) !important;
  color: var(--ws-text-canonical-soft) !important;
  -webkit-text-fill-color: var(--ws-text-canonical-soft) !important;
}

#woospeak-ai-app .ws-course-ai-feedback-box.is-loading{
  background: var(--ws-surface-canonical-soft) !important;
  border-color: var(--ws-border-canonical-strong) !important;
}

/* =========================================================
   V21.5.57 — LIGHT HEADER ACTIVE TAB LABEL CONTRAST
   The selected top navigation tab keeps white text, including its nested
   label, on the existing blue/violet active fill. Inactive tabs and dark
   mode remain unchanged.
   ========================================================= */
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs .woospeak-ai-tab.is-active,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs .woospeak-ai-tab[aria-selected="true"],
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs .woospeak-ai-tab.is-active .ws-tab-label,
#woospeak-ai-app[data-theme="light"] .woospeak-ai-tabs .woospeak-ai-tab[aria-selected="true"] .ws-tab-label {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


/* V21.5.59 — Chat controls, light mode only.
   Active Parler / Converser states own the foreground color for every nested
   label, helper, icon and timer. This corrects the existing component rather
   than adding a late visual override. */
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-recording-lang,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-active-lang,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-mode-active,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-running,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-recording-lang .woospeak-ai-mic-text,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-recording-lang .woospeak-ai-voice-mode-help,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-recording-lang .woospeak-ai-mic-ico,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-recording-lang .woospeak-ai-mic-time,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-active-lang .woospeak-ai-mic-text,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-active-lang .woospeak-ai-voice-mode-help,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-active-lang .woospeak-ai-mic-ico,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-en.is-active-lang .woospeak-ai-mic-time,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-mode-active .woospeak-ai-mic-text,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-mode-active .woospeak-ai-voice-mode-help,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-mode-active .woospeak-ai-mic-ico,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-mode-active .woospeak-ai-mic-time,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-running .woospeak-ai-mic-text,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-running .woospeak-ai-voice-mode-help,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-running .woospeak-ai-mic-ico,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-mic-direct.is-conversation-running .woospeak-ai-mic-time{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

#woospeak-ai-app[data-theme="light"] #woospeak-ai-simulation-trigger,
#woospeak-ai-app[data-theme="light"] #woospeak-ai-simulation-trigger :where(.ws-label,.ws-icon-target){
  color:var(--wds-text-strong,#0f172a) !important;
  -webkit-text-fill-color:var(--wds-text-strong,#0f172a) !important;
}