:root[data-theme="dark"]{
  /* brand */
  --brand-primary:#6BA6FF;
  --brand-primary-strong:#3E7EEB;
  --brand-primary-weak:#9EC4FF;

  /* background layers */
  --bg-base:#191B1F;
  --bg-surface:#2B2E33;
  --bg-surface-2:#343940;
  --bg-overlay:#191B1FCC;
  /* Fundo da landing do app salas e das paginas Calendario/Gravacoes/Trancada:
     usa o mesmo flat dark da UI do LiveKit dentro da sala de reuniao (--lk-bg: #111),
     dando continuidade visual ao entrar numa sala. */
  --bg-salas: #111;

  /* text */
  --text-primary:#F5F7FF;
  --text-secondary:#B9C0D4;
  --text-muted:#8A93A8;
  --text-inverse:#0B0E14;

  /* stroke / borders */
  --stroke-soft:#42464D;
  --stroke-strong:#50555E;
  --focus-color:#6BA6FF;

  /* semantic */
  --success:#43D17E;
  --warning:#F0B849;
  --danger:#FF6B6B;
  --info:#7AD1FF;

  /* radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:999px;

  /* shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 6px 16px rgba(0,0,0,0.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.5);

  /* spacing */
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; --space-2xl:32px;

  /* type */
  --font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  --fs-sm:12px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px;
  --fw-regular:400; --fw-medium:600; --fw-bold:700;
  --lh-tight:1.2; --lh-normal:1.4; --lh-relaxed:1.6;

  /* states */
  --hover-scale:1.04;
  --active-scale:0.98;
  --disabled-opacity:0.5;
  --focus-ring-w:2px;
  --focus-ring-spread:2px;
  --focus-ring-color:#6BA6FF66;

  /* motion */
  --ease-out:cubic-bezier(.22,.95,.32,1);
  --ease-in:cubic-bezier(.45,0,.55,.95);
  --dur-fast:150ms; --dur-med:200ms; --dur-slow:260ms;

  /* ===== Variáveis específicas do módulo cursos ===== */

  /* Cards e containers */
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-bg-hover: rgba(255, 255, 255, 0.1);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-border-hover: rgba(255, 255, 255, 0.2);
  --card-active-bg: rgba(255, 255, 255, 0.18);

  /* Modal */
  --modal-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --modal-header-text: #ffffff;
  --modal-border: rgba(255, 255, 255, 0.1);
  --modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  /* Progress bars */
  --progress-bg: rgba(255, 255, 255, 0.1);
  --progress-fill: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Gradients principais */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  --gradient-danger: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);

  /* Activity icons */
  --activity-icon-gradient: linear-gradient(135deg, #8296ef 0%, #885db3 100%);
  --module-icon-gradient: linear-gradient(135deg, #979797 0%, #272626 100%);
  --status-icon-gradient: linear-gradient(135deg, #6ee7b7 0%, #04870f 100%);
  --progress-pizza-gradient: conic-gradient(#d4cc87 0deg, #d2ad3d var(--progress), rgba(255, 255, 255, 0.2) var(--progress));

  /* Vocab cards */
  --vocab-card-bg: #ffffff;
  --vocab-card-text: #000000;
  --vocab-card-border: transparent;

  /* Audio player */
  --audio-player-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  --audio-player-border: rgba(102, 126, 234, 0.2);

  /* Stat items */
  --stat-item-bg: rgba(255, 255, 255, 0.03);
  --stat-item-bg-hover: rgba(255, 255, 255, 0.08);

  /* Form elements */
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-text: #ffffff;
  --input-placeholder: rgba(255, 255, 255, 0.5);

  /* Spinner */
  --spinner-track: rgba(255, 255, 255, 0.1);
  --spinner-fill: #667eea;

  /* Toggle/Favorite buttons */
  --toggle-btn-bg: rgba(255, 255, 255, 0.08);
  --toggle-btn-bg-hover: rgba(255, 255, 255, 0.15);
  --toggle-btn-color: rgba(255, 255, 255, 0.8);
  --toggle-btn-color-hover: #ffffff;

  /* Memory game */
  --memory-card-back-bg: linear-gradient(135deg, #805ad5 0%, #9f7aea 100%);
  --memory-card-front-bg: linear-gradient(135deg, #2b2b30 0%, #17181c 100%);
  --memory-card-matched-bg: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
  --memory-timer-bg: rgba(128, 90, 213, 0.18);
  --memory-cheer-color: #fbd38d;

  /* Course tabs */
  --course-tab-bg: rgba(255, 255, 255, 0.17);
  --course-tab-border: rgba(255, 255, 255, 0.38);
  --course-tab-text: rgba(255, 255, 255, 0.81);

  /* Loading overlay */
  --loading-overlay-bg: rgba(0, 0, 0, 0.6);

  /* Ditado */
  --ditado-input-bg: #ffffff;
  --ditado-input-border: #cccccc;
  --ditado-input-text: #000000;

  /* Kimchi modal */
  --kimchi-input-bg: #1a1a1a;
  --kimchi-input-border: rgba(255, 255, 255, 0.2);

  /* ===== Nav Header (dark mode) ===== */
  --nav-bg: rgba(18, 18, 18, 0.5);
  --nav-text: #ffffff;
  --nav-border: transparent;
  --nav-hover-bg: rgba(255, 255, 255, 0.1);
  --nav-avatar-bg: rgba(255, 255, 255, 0.08);
  --nav-avatar-ring: rgba(255, 255, 255, 0.08);
  --nav-avatar-ring-hover: rgba(255, 255, 255, 0.25);
  --nav-focus-ring: rgba(255, 255, 255, 0.6);
  --nav-panel-bg: linear-gradient(150deg, #2a2a2a, #3a3a3a);
  --nav-panel-border: rgba(255, 255, 255, 0.16);
  --nav-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --nav-panel-text: #ffffff;
  --nav-panel-text-secondary: rgba(255, 255, 255, 0.75);
  --nav-panel-divider: rgba(255, 255, 255, 0.08);
  --nav-item-hover-bg: rgba(255, 255, 255, 0.18);
  --nav-logout-color: #fca5a5;
  --nav-logout-color-hover: #fee2e2;
  --nav-logout-bg-hover: rgba(220, 38, 38, 0.36);
  --nav-overlay-bg: rgba(0, 0, 0, 0.45);
  --nav-loading-backdrop: rgba(18, 18, 18, 0.65);
  --nav-spinner-track: rgba(255, 255, 255, 0.12);
  --nav-spinner-fill: #667eea;
  --nav-loading-text: rgba(255, 255, 255, 0.85);
}

html{ background:var(--bg-base); color:var(--text-primary); font-family:var(--font-family); }

/* Ajudantes genéricos */
.surface{ background:var(--bg-surface); border:1px solid var(--stroke-soft); box-shadow:var(--shadow-sm); border-radius:var(--radius-lg); }
.surface-2{ background:var(--bg-surface-2); border:1px solid var(--stroke-soft); box-shadow:var(--shadow-md); border-radius:var(--radius-lg); }
.text-secondary{ color:var(--text-secondary); }
.text-muted{ color:var(--text-muted); }
.hr{ height:1px; background:var(--stroke-soft); border:0; }

/* Estado de foco acessível */
:where(button, a, input, textarea, [tabindex]):focus{
  outline:none;
  box-shadow:0 0 0 var(--focus-ring-w) var(--focus-ring-color), 0 0 0 calc(var(--focus-ring-w) + var(--focus-ring-spread)) #00000033;
}

/* Respeitar reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Exemplo de botão padrão */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px; border-radius:var(--radius-md);
  font-weight:var(--fw-medium); font-size:var(--fs-md); line-height:var(--lh-tight);
  border:1px solid var(--stroke-strong); background:var(--bg-surface-2); color:var(--text-primary);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
}
.btn:hover{ transform:scale(var(--hover-scale)); background:linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)), var(--bg-surface-2); }
.btn:active{ transform:scale(var(--active-scale)); }

.btn--primary{
  background:var(--brand-primary); color:var(--text-inverse); border-color:transparent;
}
.btn--primary:hover{ filter:brightness(1.05); }
.btn--primary:active{ filter:brightness(0.98); }

.btn--secondary{
  background:var(--bg-surface);
  color:var(--text-primary);
  border-color:var(--stroke-soft);
}
.btn--secondary:hover{
  background:var(--bg-surface-2);
  border-color:var(--stroke-strong);
  transform:scale(var(--hover-scale));
}
.btn--secondary:active{
  transform:scale(var(--active-scale));
}

.btn--tertiary{
  background:transparent;
  border-color:transparent;
  color:var(--text-secondary);
}
.btn--tertiary:hover{
  background:linear-gradient(0deg, color-mix(in srgb, var(--text-primary) 4%, transparent), color-mix(in srgb, var(--text-primary) 4%, transparent));
  color:var(--text-primary);
  transform:scale(var(--hover-scale));
}
.btn--tertiary:active{
  transform:scale(var(--active-scale));
}

/* Inputs/testareas */
.input, .textarea, .select{
  width:100%; padding:10px 12px; border-radius:var(--radius-md);
  background:var(--bg-surface); color:var(--text-primary);
  border:1px solid var(--stroke-soft); transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder{ color:var(--text-muted); }
.input:hover, .textarea:hover, .select:hover{ border-color:var(--stroke-strong); }

/* Cards / posts */
.card{
  background:var(--bg-surface);
  border:1px solid var(--stroke-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

/* Badges/estados */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:var(--radius-full); font-size:12px; line-height:1; }
.badge--success{ color:#0E3B25; background:linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08)), #43D17E; }
.badge--warning{ color:#3B2A0E; background:#F0B849; }
.badge--danger{ color:#3B0E0E; background:#FF6B6B; }
.badge--info{ color:#0B2333; background:#7AD1FF; }

/* Avatares/contadores */
.avatar{ border-radius:var(--radius-full); border:1px solid var(--stroke-soft); box-shadow:var(--shadow-sm); }

/* Menus / overlays */
.menu, .dropdown, .modal{
  background:var(--bg-surface-2);
  border:1px solid var(--stroke-strong);
  box-shadow:var(--shadow-lg);
  border-radius:var(--radius-lg);
}

/* Estados desabilitados */
.is-disabled{ opacity:var(--disabled-opacity); pointer-events:none; }

/* Modal border-radius */
:root[data-theme="dark"] .modal,
body:not(.light-mode) .modal {
  border-radius: 22px;
}