/* ==================================================
   WASPEED MANUAL — Design System
   v1.0.0
   Cobre: lesson, course index, glossário, sidebar
   ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════
   1. VARIÁVEIS CSS (Design Tokens)
   ═══════════════════════════════════════════ */

:root {
  /* Cores base */
  --ws-bg:                hsl(210, 20%, 98%);
  --ws-fg:                hsl(215, 25%, 15%);
  --ws-card:              hsl(0, 0%, 100%);
  --ws-card-fg:           hsl(215, 25%, 15%);

  /* Primária */
  --ws-primary:           hsl(215, 80%, 22%);
  --ws-primary-light:     hsl(215, 60%, 35%);
  --ws-primary-fg:        hsl(0, 0%, 100%);

  /* Secundária */
  --ws-secondary:         hsl(210, 30%, 95%);
  --ws-secondary-fg:      hsl(215, 25%, 15%);

  /* Muted */
  --ws-muted:             hsl(210, 20%, 96%);
  --ws-muted-fg:          hsl(215, 15%, 50%);

  /* Accent */
  --ws-accent:            hsl(215, 70%, 50%);
  --ws-accent-fg:         hsl(0, 0%, 100%);

  /* Border */
  --ws-border:            hsl(214, 25%, 90%);
  --ws-radius:            0.75rem;
  --ws-radius-sm:         0.5rem;
  --ws-radius-lg:         1rem;

  /* Sidebar */
  --ws-sidebar-bg:        hsl(0, 0%, 100%);
  --ws-sidebar-width:     288px;
  --ws-sidebar-border:    hsl(220, 13%, 91%);
  --ws-sidebar-accent:    hsl(215, 80%, 97%);

  /* Sombras */
  --ws-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / .05);
  --ws-shadow:      0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --ws-shadow-md:   0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --ws-shadow-lg:   0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  /* Fonte */
  --ws-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Cores dos módulos */
  --ws-m1:        hsl(215, 80%, 22%);  --ws-m1-bg:  hsl(215, 80%, 95%);  --ws-m1-bd:  hsl(215, 80%, 80%);
  --ws-m2:        hsl(142, 60%, 35%);  --ws-m2-bg:  hsl(142, 60%, 95%);  --ws-m2-bd:  hsl(142, 60%, 80%);
  --ws-m3:        hsl(210, 70%, 40%);  --ws-m3-bg:  hsl(210, 70%, 95%);  --ws-m3-bd:  hsl(210, 70%, 80%);
  --ws-m4:        hsl(0,   65%, 45%);  --ws-m4-bg:  hsl(0,   65%, 95%);  --ws-m4-bd:  hsl(0,   65%, 80%);
  --ws-m5:        hsl(270, 55%, 45%);  --ws-m5-bg:  hsl(270, 55%, 95%);  --ws-m5-bd:  hsl(270, 55%, 80%);
  --ws-m6:        hsl(42,  80%, 45%);  --ws-m6-bg:  hsl(42,  80%, 95%);  --ws-m6-bd:  hsl(42,  80%, 75%);

  /* Transições */
  --ws-transition: all 0.2s ease;
  --ws-transition-slow: all 0.35s ease;
}

/* Modo Escuro */
body.ws-dark {
  --ws-bg:              hsl(215, 30%, 8%);
  --ws-fg:              hsl(210, 20%, 92%);
  --ws-card:            hsl(215, 30%, 12%);
  --ws-card-fg:         hsl(210, 20%, 92%);
  --ws-primary:         hsl(215, 70%, 55%);
  --ws-primary-light:   hsl(215, 60%, 65%);
  --ws-secondary:       hsl(215, 25%, 18%);
  --ws-muted:           hsl(215, 25%, 18%);
  --ws-muted-fg:        hsl(215, 15%, 55%);
  --ws-accent:          hsl(215, 65%, 60%);
  --ws-border:          hsl(215, 25%, 20%);
  --ws-sidebar-bg:      hsl(220, 15%, 13%);
  --ws-sidebar-border:  hsl(220, 15%, 20%);
  --ws-sidebar-accent:  hsl(220, 15%, 18%);
  --ws-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / .2);
  --ws-shadow:      0 1px 3px 0 rgb(0 0 0 / .3), 0 1px 2px -1px rgb(0 0 0 / .2);
  --ws-shadow-md:   0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .2);
  --ws-shadow-lg:   0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .2);
}

/* ═══════════════════════════════════════════
   2. BASE — Reset para páginas de aula
   ═══════════════════════════════════════════ */

body.single-lesson,
body.single-courses,
body.page-template-waspeed-page {
  font-family: var(--ws-font) !important;
  background-color: var(--ws-bg) !important;
  color: var(--ws-fg) !important;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.single-lesson *,
body.single-courses *,
body.page-template-waspeed-page * {
  box-sizing: border-box;
}

/* Remove estilos escuros antigos do Tutor */
body.single-lesson .tutor-course-spotlight-wrapper,
body.single-lesson .tutor-course-topic-single-body,
body.single-lesson .tutor-tab,
body.single-lesson .tutor-tab-item,
body.single-lesson .tutor-container {
  background: transparent !important;
  color: var(--ws-fg) !important;
}

/* Oculta elementos Tutor que não usamos */
body.single-lesson .tutor-course-spotlight-nav,
body.single-lesson .tutor-nav,
body.single-lesson .tutor-spotlight-mode .tutor-course-spotlight-nav {
  display: none !important;
}

/* ═══════════════════════════════════════════
   3. LAYOUT PRINCIPAL
   ═══════════════════════════════════════════ */

body.single-lesson .tutor-course-single-content-wrapper,
body.single-lesson .tutor-spotlight-mode {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ws-bg) !important;
  gap: 0;
}

/* Sidebar à ESQUERDA */
body.single-lesson .tutor-course-single-sidebar-wrapper {
  order: 1 !important;
  flex: 0 0 var(--ws-sidebar-width) !important;
  width: var(--ws-sidebar-width) !important;
  min-width: var(--ws-sidebar-width) !important;
  max-width: var(--ws-sidebar-width) !important;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  background: var(--ws-sidebar-bg) !important;
  border-right: 1px solid var(--ws-sidebar-border);
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: var(--ws-border) transparent;
}

body.single-lesson .tutor-course-single-sidebar-wrapper::-webkit-scrollbar { width: 4px; }
body.single-lesson .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-thumb { background: var(--ws-border); border-radius: 2px; }

/* Conteúdo à DIREITA */
body.single-lesson #tutor-single-entry-content {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0;
  overflow-x: hidden;
  background: var(--ws-bg) !important;
}

body.single-lesson .tutor-course-topic-single-body {
  max-width: 896px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

/* Oculta header/footer padrão do Tutor */
body.single-lesson .tutor-course-topic-single-header,
body.single-lesson .tutor-spotlight-header {
  display: none !important;
}

/* ═══════════════════════════════════════════
   4. SIDEBAR — Componentes
   ═══════════════════════════════════════════ */

/* Cabeçalho da Sidebar */
.ws-sidebar-header {
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--ws-sidebar-border);
  background: var(--ws-sidebar-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.ws-sidebar-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.ws-sidebar-logo-icon {
  width: 2rem;
  height: 2rem;
  background: var(--ws-primary);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: var(--ws-shadow-sm);
}

.ws-sidebar-logo-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ws-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ws-sidebar-logo-text span {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ws-muted-fg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Progresso geral */
.ws-sidebar-progress {
  margin-bottom: 0.25rem;
}

.ws-sidebar-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--ws-muted-fg);
  margin-bottom: 0.375rem;
}

.ws-sidebar-progress-bar {
  height: 4px;
  background: var(--ws-secondary);
  border-radius: 9999px;
  overflow: hidden;
}

.ws-sidebar-progress-fill {
  height: 100%;
  background: var(--ws-accent);
  border-radius: 9999px;
  transition: width 0.6s ease;
}

/* Controles da sidebar */
.ws-sidebar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--ws-sidebar-border);
}

.ws-sidebar-back-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--ws-muted-fg);
  text-decoration: none;
  transition: var(--ws-transition);
}

.ws-sidebar-back-link:hover { color: var(--ws-accent); text-decoration: none; }

.ws-sidebar-theme-toggle {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: var(--ws-muted);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ws-muted-fg);
  font-size: 0.75rem;
  transition: var(--ws-transition);
  flex-shrink: 0;
}

.ws-sidebar-theme-toggle:hover {
  background: var(--ws-secondary);
  color: var(--ws-fg);
}

/* Conteúdo rolável da sidebar */
.ws-sidebar-nav {
  padding: 0.5rem 0 1rem;
  overflow-y: auto;
}

/* Módulo accordion */
.ws-module {
  border-bottom: 1px solid var(--ws-sidebar-border);
}

.ws-module-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: var(--ws-transition);
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.ws-module-header:hover { background: var(--ws-sidebar-accent); }

.ws-module-header.is-active { background: var(--ws-sidebar-accent); }

.ws-module-emoji {
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.ws-module-info { flex: 1; min-width: 0; }

.ws-module-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ws-fg);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-module-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.ws-module-badge {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ws-module-progress-text {
  font-size: 0.5625rem;
  color: var(--ws-muted-fg);
}

.ws-module-chevron {
  font-size: 0.625rem;
  color: var(--ws-muted-fg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ws-module-header.is-active .ws-module-chevron { transform: rotate(90deg); }

/* Corpo do accordion */
.ws-module-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.ws-module-body.is-open { max-height: 9999px; }

/* Item de aula na sidebar */
.ws-lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  text-decoration: none;
  transition: var(--ws-transition);
  position: relative;
  border-left: 2px solid transparent;
}

.ws-lesson-item:hover { background: var(--ws-muted); text-decoration: none; }

.ws-lesson-item.is-active {
  background: var(--ws-sidebar-accent);
  border-left-color: var(--ws-accent);
}

.ws-lesson-item.is-active .ws-lesson-item-title { color: var(--ws-accent); }

.ws-lesson-status {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  margin-top: 0.125rem;
  transition: var(--ws-transition);
}

/* Status: não iniciada */
.ws-lesson-status.not-started {
  border: 1.5px solid var(--ws-border);
  background: transparent;
  color: transparent;
}

/* Status: concluída */
.ws-lesson-status.completed {
  background: hsl(142, 60%, 45%);
  border-color: hsl(142, 60%, 45%);
  color: white;
  animation: ws-checkmark-pop 0.3s ease;
}

/* Status: atual */
.ws-lesson-status.current {
  background: var(--ws-accent);
  border-color: var(--ws-accent);
  color: white;
}

.ws-lesson-item-info { flex: 1; min-width: 0; }

.ws-lesson-item-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ws-fg);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ws-lesson-item-duration {
  font-size: 0.625rem;
  color: var(--ws-muted-fg);
  margin-top: 0.125rem;
}

/* Rodapé da sidebar */
.ws-sidebar-footer {
  border-top: 1px solid var(--ws-sidebar-border);
  padding: 0.75rem 0;
  margin-top: 0.5rem;
}

.ws-sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--ws-muted-fg);
  text-decoration: none;
  border-radius: 0;
  transition: var(--ws-transition);
}

.ws-sidebar-footer-link:hover {
  background: var(--ws-muted);
  color: var(--ws-fg);
  text-decoration: none;
}

.ws-sidebar-footer-link span.icon { font-size: 1rem; }

/* Usuário */
.ws-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--ws-sidebar-border);
  margin-top: 0.25rem;
}

.ws-sidebar-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ws-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ws-primary);
  overflow: hidden;
  flex-shrink: 0;
}

.ws-sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ws-sidebar-user-info { flex: 1; min-width: 0; }

.ws-sidebar-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ws-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-sidebar-user-role {
  font-size: 0.625rem;
  color: var(--ws-muted-fg);
}

.ws-sidebar-logout {
  font-size: 0.75rem;
  color: var(--ws-muted-fg);
  text-decoration: none;
  transition: var(--ws-transition);
  flex-shrink: 0;
}

.ws-sidebar-logout:hover { color: hsl(0, 65%, 50%); }

/* Hamburger (mobile) */
.ws-hamburger {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ws-radius-sm);
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--ws-fg);
  font-size: 0.875rem;
  transition: var(--ws-transition);
}

.ws-hamburger:hover { background: var(--ws-secondary); }

/* ═══════════════════════════════════════════
   5. HEADER DA AULA
   ═══════════════════════════════════════════ */

.ws-lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  background: var(--ws-card);
  border-bottom: 1px solid var(--ws-border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--ws-shadow-sm);
}

.ws-lesson-header-left { display: flex; align-items: center; gap: 0.75rem; }
.ws-lesson-header-right { display: flex; align-items: center; gap: 0.5rem; }

/* Breadcrumb */
.ws-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.ws-breadcrumb a {
  font-size: 0.75rem;
  color: var(--ws-muted-fg);
  text-decoration: none;
  transition: var(--ws-transition);
}

.ws-breadcrumb a:hover { color: var(--ws-accent); }

.ws-breadcrumb-sep {
  font-size: 0.625rem;
  color: var(--ws-border);
}

.ws-breadcrumb-current {
  font-size: 0.75rem;
  color: var(--ws-fg);
  font-weight: 500;
}

/* Header de progresso inline */
.ws-header-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--ws-muted-fg);
}

.ws-header-progress-bar {
  width: 80px;
  height: 4px;
  background: var(--ws-secondary);
  border-radius: 9999px;
  overflow: hidden;
}

.ws-header-progress-fill {
  height: 100%;
  background: var(--ws-accent);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════
   6. CONTEÚDO PRINCIPAL DA AULA
   ═══════════════════════════════════════════ */

.ws-lesson-content {
  max-width: 896px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  animation: ws-fade-in 0.4s ease;
}

/* Título e badge */
.ws-lesson-title-area {
  margin-bottom: 1.5rem;
}

.ws-lesson-number {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ws-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.ws-lesson-title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--ws-fg);
  line-height: 1.25;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}

.ws-lesson-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ws-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

/* ═══════════════════════════════════════════
   7. BANNER DE VÍDEO
   ═══════════════════════════════════════════ */

.ws-video-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--ws-radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ws-accent) 15%, transparent), color-mix(in srgb, var(--ws-primary) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--ws-accent) 25%, transparent);
  text-decoration: none;
  transition: var(--ws-transition-slow);
  margin-bottom: 1.75rem;
  box-shadow: var(--ws-shadow-sm);
}

.ws-video-banner:hover {
  text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ws-accent) 22%, transparent), color-mix(in srgb, var(--ws-primary) 15%, transparent));
  box-shadow: var(--ws-shadow-md);
  transform: translateY(-1px);
}

.ws-video-play-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--ws-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--ws-shadow-md);
  color: white;
  font-size: 1.25rem;
  animation: ws-pulse 2.5s ease-in-out infinite;
  transition: transform 0.2s ease;
}

.ws-video-banner:hover .ws-video-play-btn { transform: scale(1.08); }

.ws-video-info { flex: 1; min-width: 0; }

.ws-video-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ws-fg);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.ws-video-meta {
  font-size: 0.8125rem;
  color: var(--ws-muted-fg);
  margin: 0;
}

.ws-video-arrow {
  color: var(--ws-accent);
  font-size: 0.875rem;
  flex-shrink: 0;
  opacity: 0.7;
  transition: var(--ws-transition);
}

.ws-video-banner:hover .ws-video-arrow { opacity: 1; transform: translateX(3px); }

/* ═══════════════════════════════════════════
   8. CARDS DE SEÇÃO
   ═══════════════════════════════════════════ */

.ws-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ws-card {
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  overflow: hidden;
  box-shadow: var(--ws-shadow-sm);
  transition: var(--ws-transition);
  animation: ws-fade-in 0.4s ease both;
}

.ws-card:hover { box-shadow: var(--ws-shadow); }

.ws-card-inner {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--ws-accent);
}

.ws-card-inner.tips { border-left-color: hsl(42, 80%, 50%); }
.ws-card-inner.examples { border-left-color: hsl(142, 60%, 40%); }

.ws-card-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.ws-card-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ws-accent) 15%, transparent);
  color: var(--ws-accent);
}

.ws-card-inner.tips .ws-card-icon {
  background: color-mix(in srgb, hsl(42, 80%, 50%) 15%, transparent);
  color: hsl(42, 80%, 45%);
}

.ws-card-inner.examples .ws-card-icon {
  background: color-mix(in srgb, hsl(142, 60%, 40%) 15%, transparent);
  color: hsl(142, 60%, 35%);
}

.ws-card-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ws-accent);
  margin: 0;
}

.ws-card-inner.tips .ws-card-title { color: hsl(42, 80%, 40%); }
.ws-card-inner.examples .ws-card-title { color: hsl(142, 60%, 35%); }

.ws-card-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ws-fg);
}

.ws-card-body p { margin: 0 0 0.75rem; }
.ws-card-body p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   9. STEPS (Como Usar)
   ═══════════════════════════════════════════ */

.ws-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ws-step-item {
  display: flex;
  gap: 0.875rem;
  padding-bottom: 1rem;
  position: relative;
}

.ws-step-item:last-child { padding-bottom: 0; }

.ws-step-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.6875rem;
  top: 1.75rem;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--ws-primary) 20%, transparent);
}

.ws-step-number {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ws-primary) 12%, transparent);
  color: var(--ws-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  outline: 2px solid var(--ws-card);
  outline-offset: 0;
  position: relative;
  z-index: 1;
}

.ws-step-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ws-fg);
  padding-top: 0.125rem;
}

/* ═══════════════════════════════════════════
   10. LISTA DE DICAS
   ═══════════════════════════════════════════ */

.ws-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ws-tip-item {
  display: flex;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ws-fg);
}

.ws-tip-icon { flex-shrink: 0; margin-top: 0.125rem; }

/* ═══════════════════════════════════════════
   11. EXEMPLO PRÁTICO (blockquote)
   ═══════════════════════════════════════════ */

.ws-example-quote {
  margin: 0;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, hsl(142, 60%, 40%) 8%, transparent);
  border-radius: var(--ws-radius-sm);
  border-left: none;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ws-fg);
  font-style: italic;
}

/* ═══════════════════════════════════════════
   12. BOTÃO MARCAR COMO CONCLUÍDA
   ═══════════════════════════════════════════ */

.ws-complete-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ws-border);
  text-align: center;
}

.ws-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 2rem;
  border-radius: var(--ws-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--ws-transition-slow);
  letter-spacing: 0.01em;
}

.ws-complete-btn:not(.is-done) {
  background: hsl(142, 60%, 40%);
  color: white;
  box-shadow: 0 4px 14px color-mix(in srgb, hsl(142, 60%, 40%) 35%, transparent);
}

.ws-complete-btn:not(.is-done):hover {
  background: hsl(142, 60%, 35%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, hsl(142, 60%, 40%) 40%, transparent);
}

.ws-complete-btn.is-done {
  background: var(--ws-secondary);
  color: hsl(142, 60%, 35%);
  cursor: default;
  pointer-events: none;
}

.ws-complete-btn.is-done .ws-complete-btn-icon { animation: ws-checkmark-pop 0.4s ease; }

.ws-complete-btn.is-loading { opacity: 0.7; pointer-events: none; }

.ws-complete-btn-icon { font-size: 1.125rem; }

/* Formulário oculto do Tutor */
.tutor-mark-as-complete-button { display: none !important; }
#tutor-mark-lesson-complete-form { display: none !important; }

/* ═══════════════════════════════════════════
   13. NAVEGAÇÃO PREV/NEXT
   ═══════════════════════════════════════════ */

.ws-lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 2rem;
}

.ws-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--ws-radius);
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  text-decoration: none;
  transition: var(--ws-transition-slow);
  min-width: 0;
  box-shadow: var(--ws-shadow-sm);
}

.ws-nav-btn:hover {
  border-color: var(--ws-accent);
  background: var(--ws-sidebar-accent);
  box-shadow: var(--ws-shadow);
  text-decoration: none;
  transform: translateY(-1px);
}

.ws-nav-btn.prev { justify-content: flex-start; }
.ws-nav-btn.next { justify-content: flex-end; }

.ws-nav-btn.prev:only-child { grid-column: 1 / -1; }
.ws-nav-btn.next:only-child { grid-column: 1 / -1; justify-content: flex-end; }

.ws-nav-btn-arrow {
  color: var(--ws-accent);
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: var(--ws-transition);
}

.ws-nav-btn.prev:hover .ws-nav-btn-arrow { transform: translateX(-3px); }
.ws-nav-btn.next:hover .ws-nav-btn-arrow { transform: translateX(3px); }

.ws-nav-btn-info { flex: 1; min-width: 0; }

.ws-nav-btn-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ws-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.125rem;
}

.ws-nav-btn-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ws-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════
   14. INDEX PAGE — Grid de Módulos
   ═══════════════════════════════════════════ */

.ws-index-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  animation: ws-fade-in 0.4s ease;
}

.ws-index-header {
  margin-bottom: 2.5rem;
}

.ws-index-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ws-fg);
  margin: 0 0 0.5rem;
  letter-spacing: -0.03em;
}

.ws-index-subtitle {
  font-size: 1rem;
  color: var(--ws-muted-fg);
  margin: 0 0 1.25rem;
}

/* Progresso geral */
.ws-index-global-progress {
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: var(--ws-shadow-sm);
  flex-wrap: wrap;
}

.ws-global-progress-stat { text-align: center; }
.ws-global-progress-stat .value { font-size: 1.5rem; font-weight: 800; color: var(--ws-primary); line-height: 1; }
.ws-global-progress-stat .label { font-size: 0.6875rem; color: var(--ws-muted-fg); margin-top: 0.25rem; }

.ws-global-progress-bar-wrap { flex: 1; min-width: 200px; }
.ws-global-progress-bar-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ws-muted-fg); margin-bottom: 0.5rem; }
.ws-global-progress-bar { height: 8px; background: var(--ws-secondary); border-radius: 9999px; overflow: hidden; }
.ws-global-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ws-accent), var(--ws-primary)); border-radius: 9999px; transition: width 0.8s ease; }

/* Grid de módulos */
.ws-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.ws-module-card {
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  box-shadow: var(--ws-shadow-sm);
  transition: var(--ws-transition-slow);
  text-decoration: none;
  display: block;
  animation: ws-fade-in 0.4s ease both;
}

.ws-module-card:hover {
  box-shadow: var(--ws-shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
  border-color: var(--ws-border);
}

.ws-module-card-accent {
  height: 4px;
  background: var(--ws-accent);
}

.ws-module-card-body {
  padding: 1.5rem;
}

.ws-module-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.ws-module-card-emoji {
  font-size: 2rem;
  animation: ws-float 4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.ws-module-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.ws-module-card-count {
  font-size: 0.6875rem;
  color: var(--ws-muted-fg);
}

.ws-module-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ws-fg);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.ws-module-card-desc {
  font-size: 0.875rem;
  color: var(--ws-muted-fg);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.ws-module-card-progress { margin-bottom: 1.25rem; }

.ws-module-card-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--ws-muted-fg);
  margin-bottom: 0.375rem;
}

.ws-module-card-progress-bar { height: 5px; background: var(--ws-secondary); border-radius: 9999px; overflow: hidden; }
.ws-module-card-progress-fill { height: 100%; border-radius: 9999px; transition: width 0.8s ease; }

.ws-module-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: var(--ws-radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--ws-secondary);
  color: var(--ws-fg);
  transition: var(--ws-transition);
  border: 1px solid var(--ws-border);
}

.ws-module-card:hover .ws-module-card-btn {
  background: var(--ws-accent);
  color: white;
  border-color: var(--ws-accent);
}

/* ═══════════════════════════════════════════
   15. GLOSSÁRIO
   ═══════════════════════════════════════════ */

.ws-glossario-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  animation: ws-fade-in 0.4s ease;
}

.ws-glossario-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ws-fg);
  margin: 0 0 0.5rem;
  letter-spacing: -0.03em;
}

.ws-glossario-desc {
  color: var(--ws-muted-fg);
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

.ws-glossario-search {
  position: relative;
  margin-bottom: 2rem;
}

.ws-glossario-search input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  font-size: 0.9375rem;
  font-family: var(--ws-font);
  background: var(--ws-card);
  color: var(--ws-fg);
  transition: var(--ws-transition);
  outline: none;
}

.ws-glossario-search input:focus { border-color: var(--ws-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-accent) 15%, transparent); }

.ws-glossario-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ws-muted-fg);
  font-size: 0.875rem;
  pointer-events: none;
}

.ws-glossario-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ws-glossario-item {
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--ws-shadow-sm);
}

.ws-glossario-term {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ws-primary);
  margin-bottom: 0.375rem;
}

.ws-glossario-def {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ws-fg);
  margin: 0;
}

/* ═══════════════════════════════════════════
   16. ANIMAÇÕES
   ═══════════════════════════════════════════ */

@keyframes ws-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ws-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes ws-checkmark-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ws-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ws-accent) 50%, transparent); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

@keyframes ws-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Delay em cascata para cards */
.ws-cards-grid .ws-card:nth-child(1) { animation-delay: 0ms; }
.ws-cards-grid .ws-card:nth-child(2) { animation-delay: 60ms; }
.ws-cards-grid .ws-card:nth-child(3) { animation-delay: 120ms; }
.ws-cards-grid .ws-card:nth-child(4) { animation-delay: 180ms; }
.ws-cards-grid .ws-card:nth-child(5) { animation-delay: 240ms; }

.ws-modules-grid .ws-module-card:nth-child(1) { animation-delay: 0ms; }
.ws-modules-grid .ws-module-card:nth-child(2) { animation-delay: 80ms; }
.ws-modules-grid .ws-module-card:nth-child(3) { animation-delay: 160ms; }
.ws-modules-grid .ws-module-card:nth-child(4) { animation-delay: 240ms; }
.ws-modules-grid .ws-module-card:nth-child(5) { animation-delay: 320ms; }
.ws-modules-grid .ws-module-card:nth-child(6) { animation-delay: 400ms; }

/* ═══════════════════════════════════════════
   17. DARK MODE — overrides adicionais
   ═══════════════════════════════════════════ */

body.ws-dark .ws-glossario-search input { background: var(--ws-card); color: var(--ws-fg); }
body.ws-dark .ws-nav-btn:hover { background: var(--ws-secondary); }
body.ws-dark .ws-module-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .5); }
body.ws-dark .ws-video-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--ws-accent) 12%, transparent), color-mix(in srgb, var(--ws-primary) 8%, transparent)); }
body.ws-dark .tutor-form-check-circle { border-color: var(--ws-border) !important; }
body.ws-dark .ws-module-header.is-active { background: var(--ws-sidebar-accent); }

/* Scrollbar do conteúdo */
body.ws-dark::-webkit-scrollbar { width: 6px; }
body.ws-dark::-webkit-scrollbar-thumb { background: var(--ws-border); border-radius: 3px; }

/* ═══════════════════════════════════════════
   18. RESPONSIVO
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .ws-hamburger { display: flex; }

  body.single-lesson .tutor-course-single-sidebar-wrapper {
    position: fixed !important;
    left: 0;
    top: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 200;
    box-shadow: var(--ws-shadow-lg);
  }

  body.single-lesson .tutor-course-single-sidebar-wrapper.is-open {
    transform: translateX(0);
    animation: ws-slide-in-left 0.3s ease;
  }

  .ws-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .5);
    z-index: 199;
  }

  .ws-sidebar-overlay.is-visible { display: block; }

  body.single-lesson .tutor-course-topic-single-body {
    padding: 1.5rem 1rem 3rem;
  }

  .ws-lesson-content { padding: 1.5rem 1rem 3rem; }

  .ws-lesson-title { font-size: 1.375rem; }

  .ws-lesson-nav { grid-template-columns: 1fr; }
  .ws-nav-btn.next:only-child { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .ws-modules-grid { grid-template-columns: 1fr; }
  .ws-video-banner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .ws-video-play-btn { width: 3rem; height: 3rem; font-size: 1rem; }
  .ws-index-global-progress { flex-direction: column; gap: 1rem; }
  .ws-lesson-title { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════
   19. TUTOR LMS — Overrides específicos
   ═══════════════════════════════════════════ */

/* Remove overlay DRM que interfere no layout */
body.single-lesson #tutor-lms-overlay {
  display: none !important;
}

/* Completar lição — botão padrão do Tutor (substituído pelo nosso) */
body.single-lesson .tutor-lesson-mark-complete-btn,
body.single-lesson .tutor-btn-complete-lesson,
body.single-lesson #tutor-complete-lesson-review {
  display: none !important;
}

/* Player do Tutor — mostra apenas se houver vídeo embedded */
body.single-lesson .tutor-video-player-wrapper:empty { display: none; }

/* Remove padding extra do wrapper do Tutor */
body.single-lesson .tutor-course-spotlight-tab { padding: 0 !important; }

/* Checkbox de progresso na sidebar */
.tutor-form-check-circle {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem !important;
  height: 1.125rem !important;
  border: 1.5px solid var(--ws-border) !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ws-transition);
  flex-shrink: 0;
}

.tutor-form-check-circle:checked {
  background: hsl(142, 60%, 40%) !important;
  border-color: hsl(142, 60%, 40%) !important;
}

.tutor-form-check-circle:checked::after {
  content: '✓';
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
}

/* Footer Tutor */
body.single-lesson .tutor-course-spotlight-wrapper .tutor-container { padding: 0 !important; }
body.single-lesson .tutor-col-xl-8 { max-width: 100% !important; flex: 0 0 100% !important; }

/* Toast/notificação */
.ws-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: hsl(142, 60%, 35%);
  color: white;
  padding: 0.875rem 1.25rem;
  border-radius: var(--ws-radius);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--ws-shadow-lg);
  z-index: 9999;
  animation: ws-fade-in 0.3s ease, ws-toast-out 0.3s ease 2.7s forwards;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@keyframes ws-toast-out {
  to { opacity: 0; transform: translateY(10px); }
}