/* =========================================================
   EMINENTE — Área de membros
   Paleta oficial: #0A1218 / #E6E4D7 / #007B76 / #23ED99
   + #B98D51 (detalhes, discreto).
   Tipografia: IBM Plex Serif (títulos) + Inter (corpo).
   ========================================================= */

/* dark oficial: preto levemente aquecido (estilo Claude Code) */
:root {
  --bg: #141515;
  --bg-soft: #111211;
  --surface: #20201f;
  --surface-2: #272726;
  --line: rgba(250, 249, 245, 0.08);
  --line-strong: rgba(250, 249, 245, 0.17);
  --text: #e6e4d7;
  --text-muted: #a2a89d;
  --text-faint: #67716c;
  --teal: #007b76;
  --accent: #23ed99;
  --accent-soft: rgba(35, 237, 153, 0.1);
  --gold: #b98d51;
  --green: #23ed99;
  --danger: #ff7a6b;
  --danger-soft: rgba(255, 122, 107, 0.12);
  --sidebar-w: 268px;
  --topbar-h: 64px;
  --radius: 14px;
  --radius-sm: 10px;
  --hover: rgba(250, 249, 245, 0.05);
  --track: rgba(250, 249, 245, 0.08);
  --sb: #33312b;
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }


body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--bg); }

/* =========================================================
   QUEBRA DE LINHA EQUILIBRADA
   O navegador distribui as palavras para as linhas ficarem
   com larguras parecidas, em vez de deixar a última curta.

   balance → títulos e textos curtos (o navegador só aplica
             até ~4-6 linhas, então é para blocos pequenos)
   pretty  → texto corrido: sem limite de linhas, evita a
             última linha com uma palavra só (viúva)
   Navegador sem suporte simplesmente ignora.
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.hero-title, .page-title, .section-title, .module-sub-title,
.trilha-mod-title, .lesson-title, .post-title, .card-title,
.aviso-card h3, .modal h3, .cert-nome {
  text-wrap: balance;
}

p, li, figcaption, blockquote,
.desc, .post-body, .td-sub, .admin-hint,
.access-card span, .backend-note span, .lesson-desc {
  text-wrap: pretty;
}

/* textos curtos de apoio: equilibra de verdade as duas ou
   três linhas, que é onde a diferença aparece na tela      */
.hero-desc, .page-sub, .lede, .module-hero .hero-desc,
.aviso-card p, .locked-box span, .admin-empty p,
.module-banner-meta, .instructor-bio, .form-question {
  text-wrap: balance;
}

/* texto cortado por reticências fica de fora: o navegador
   equilibraria contando as linhas escondidas pelo clamp, e
   a primeira linha visível sairia curta sem motivo         */
.lesson-item-desc, .up-next-desc, .prompt-desc,
.chat-result-desc, .card-desc, .aviso-card--seen p {
  text-wrap: normal;
}

/* nenhuma barra de rolagem visível em lugar nenhum do sistema.
   A rolagem continua funcionando por roda, trackpad, teclado e
   pelas setas das fileiras — só o desenho da barra some.       */
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------- Rótulos técnicos (mono) ---------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* subtítulos sem ocre: mesmo tom apagado do kicker padrão */
.kicker--accent { color: var(--text-faint); }

/* =========================================================
   LAYOUT: sidebar fixa + área de conteúdo
   ========================================================= */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  z-index: 50;
}

.brand-row {
  display: flex; align-items: center;
  /* respiro maior entre a logo e o conteúdo da barra */
  padding: 8px 0 34px;
}
.brand {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.brand img { height: 15px; width: auto; display: block; }
.brand img.brand-mini { display: none; height: 22px; }

/* botão de recolher a barra lateral */
.side-collapse {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  color: var(--text-faint);
  transition: color 0.12s, background 0.12s;
}
.side-collapse:hover { color: var(--text); background: var(--hover); }
.side-collapse .mi { font-size: 18px; transition: transform 0.2s; }

/* ---- barra lateral recolhida: só ícones e o símbolo da marca ---- */
body.side-min { --sidebar-w: 76px; }
body.side-min .sidebar { padding: 22px 12px; }
body.side-min .brand-row { flex-direction: column; gap: 12px; padding-bottom: 22px; }
body.side-min .brand { padding: 0; }
body.side-min .side-collapse { margin-left: 0; }
body.side-min .side-collapse .mi { transform: rotate(180deg); }
body.side-min .brand img.brand-full { display: none; }
body.side-min .brand img.brand-mini { display: block; }
/* avatar do perfil sempre 100% redondo no modo recolhido
   (max-width: none anula o img { max-width: 100% } global,
   que espremia a largura e deixava o avatar oval)          */
body.side-min .user-card img,
body.side-min .user-card .avatar-fallback {
  width: 34px; height: 34px;
  max-width: none;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
body.side-min .sidebar-greeting,
body.side-min .sidebar .search-box,
body.side-min .sidebar .quote-card,
body.side-min .sidebar .progress-card,
body.side-min .nav-label,
body.side-min .sidebar .soon,
body.side-min .user-card > div { display: none; }
body.side-min .nav a { justify-content: center; padding: 11px 0; }
body.side-min .nav-dot { position: absolute; top: 4px; right: 8px; }
body.side-min .nav a { position: relative; }
body.side-min .user-card { flex-direction: column; align-items: center; gap: 10px; padding: 10px 6px; }
body.side-min .user-settings + .user-admin { margin-left: 0; }
/* Abaixo de 1100px a barra vira off-canvas e o "recolher" deixa
   de existir. Antes só a largura era devolvida, e o resto do
   estado recolhido continuava valendo: a barra ficava com 268px
   mostrando só ícones centralizados, com um vazio enorme ao lado.
   Aqui o estado é desfeito por inteiro.                         */
@media (max-width: 1100px) {
  .side-collapse { display: none; }
  body.side-min { --sidebar-w: 268px; }
  body.side-min .sidebar { padding: 22px 16px; }
  body.side-min .brand-row { flex-direction: row; gap: 10px; padding-bottom: 18px; }
  body.side-min .brand img.brand-full { display: block; }
  body.side-min .brand img.brand-mini { display: none; }
  body.side-min .sidebar-greeting,
  body.side-min .sidebar .search-box,
  body.side-min .sidebar .quote-card,
  body.side-min .sidebar .progress-card,
  body.side-min .nav-label,
  body.side-min .sidebar .soon,
  body.side-min .user-card > div { display: revert; }
  body.side-min .nav a { justify-content: flex-start; padding: 10px 12px; }
  body.side-min .nav-dot { position: static; }
  body.side-min .user-card { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  body.side-min .user-card img,
  body.side-min .user-card .avatar-fallback { width: 34px; height: 34px; }
}

/* saudação abaixo da logo */
.sidebar-greeting {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 10px 14px;
  margin-top: -10px;
}
.sidebar-greeting strong {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  line-height: 1.25;
}
.sidebar-greeting span { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* busca */
.search-box { position: relative; margin-bottom: 10px; }
.search-input {
  width: 100%;
  padding: 11px 64px 11px 38px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus { border-color: var(--line-strong); }
.search-box svg {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--text-faint); pointer-events: none;
}
.search-kbd {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
  pointer-events: none;
}

/* resultados da busca */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}
.search-results.open { display: block; }
.search-result {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: var(--hover); }
.search-result img { width: 64px; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.search-result-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.search-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.search-empty { padding: 18px 16px; font-size: 13px; color: var(--text-muted); }

/* navegação */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav a:hover { color: var(--text); background: var(--hover); }
.nav a.active { color: var(--text); background: var(--surface-2); }
.nav a.active svg { color: var(--accent); }
.nav .soon {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-faint); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 99px;
}

/* divisória discreta entre grupos do menu */
.nav-divider {
  display: block;
  height: 1px;
  background: var(--line);
  margin: 7px 10px;
}

/* Arauto dentro da navegação */
.nav-arauto .arauto-mark {
  width: 16px; height: 18px;
  background: var(--gold);
  flex-shrink: 0;
  margin-right: 1px;
}
.nav-arauto.active { color: var(--text); background: var(--surface-2); }

/* círculo vermelho: quantidade de conteúdo novo na área */
.nav-dot {
  margin-left: auto;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: #ff5a5a;
  color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.sidebar-spacer { flex: 1; }

/* cartão do usuário */
.user-card {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}
.user-card > div:not(.avatar-fallback) { flex: 1; min-width: 0; }
.user-card img, .user-card .avatar-fallback {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
/* a foto é o acesso ao painel do admin */
.user-avatar-link {
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.15s;
}
.user-avatar-link:hover { box-shadow: 0 0 0 2px var(--bg-soft), 0 0 0 3.5px var(--accent); }
.user-name, .user-plan { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.user-plan { font-size: 11px; color: var(--text-faint); }

/* avatar de iniciais */
.avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px; color: var(--text-muted);
}

/* ---------- Conteúdo ---------- */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
}

.topbar {
  position: sticky; top: 0;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 36px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 40;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-faint); }
.crumbs .here { color: var(--text); }

.content { padding: 28px 36px 80px; }

/* =========================================================
   HOME — hero, banners de módulo e rows estilo Netflix
   ========================================================= */
/* destaque da home: sem caixa/borda — texto à esquerda e um
   player clicável à direita com a aula em que o aluno parou   */
.hero {
  display: flex;
  align-items: center;
  gap: 44px;
  margin: 10px 0 48px;
}
.hero-copy { flex: 1; min-width: 0; }
.hero-player {
  position: relative;
  width: min(46%, 560px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line);
  transition: border-color 0.15s;
}
.hero-player:hover { border-color: var(--line-strong); }
.hero-player img { width: 100%; height: 100%; object-fit: cover; }
.hero-player-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 13, 17, 0.25);
  transition: background 0.15s;
}
.hero-player-play svg {
  width: 26px; height: 26px;
  color: #0a1218;
  background: #e6e4d7;
  border-radius: 50%;
  padding: 15px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s;
}
.hero-player:hover .hero-player-play svg { transform: scale(1.07); }
.hero-player-duration {
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  background: rgba(8, 13, 17, 0.75);
  color: #e6e4d7;
  padding: 3px 8px;
  border-radius: 6px;
}
@media (max-width: 900px) {
  .hero { flex-direction: column-reverse; align-items: stretch; gap: 20px; }
  .hero-player { width: 100%; }
}
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* véu uniforme (sem degradê): só garante a leitura do texto
   quando a capa é uma foto sua                              */
.hero-scrim {
  position: absolute; inset: 0;
  /* 0.72: com a capa clara de blocagem, 0.55 deixava um cinza
     médio em que nenhum texto claro passava no contraste       */
  background: rgba(10, 18, 24, 0.72);
}
.hero-body { position: relative; padding: 40px; max-width: 560px; color: #e6e4d7; }
.hero-body .hero-desc { color: #b6bbaf; }
/* qualquer rótulo dentro do herói fica claro: o fundo é sempre a
   capa escurecida, nunca a superfície do tema                   */
.hero-body .kicker,
.hero-body .kicker--accent { color: rgba(230, 228, 215, 0.75); }
.hero-body .chip { border-color: rgba(230, 228, 215, 0.3); color: #d5d3c6; }
.hero-body .btn-ghost { border-color: rgba(230, 228, 215, 0.35); color: #e6e4d7; }
.hero-body .btn-primary { background: #e6e4d7; color: #0a1218; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 10px 0 12px;
}
.hero-desc { color: var(--text-muted); font-size: 15px; max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; margin-top: 22px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px;
  border-radius: 99px;
  font-weight: 600; font-size: 14px;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn:disabled:hover { filter: none; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-accent { background: var(--accent); color: var(--bg); }
.btn-accent:hover { filter: brightness(1.08); }

/* banner do módulo: as informações da seção vivem dentro dele —
   tag em cima, nome ao centro, aulas/tempo embaixo à esquerda e
   "Ver tudo" embaixo à direita                                  */
.module-banner {
  position: relative;
  display: block;
  height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 18px;
}
.module-banner img { width: 100%; height: 100%; object-fit: cover; }
.module-banner-scrim {
  position: absolute; inset: 0;
  background: rgba(7, 11, 15, 0.5);
}
.module-banner-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 0 20px;
}
/* tag do módulo: borda arredondada, fundo vazado, negrito */
.module-banner-center .kicker {
  color: rgba(236, 233, 223, 0.9);
  font-weight: 700;
  border: 1px solid rgba(236, 233, 223, 0.4);
  border-radius: 99px;
  padding: 4px 14px;
}
.module-banner-center .section-title {
  color: #f4f2e9;
  font-size: 34px;
}
.module-banner-meta {
  position: absolute; left: 20px; bottom: 16px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(236, 233, 223, 0.88);
}
.module-banner-open {
  position: absolute; right: 20px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(236, 233, 223, 0.88);
}
.module-banner-open svg { width: 14px; height: 14px; }
.module-banner:hover .module-banner-open { color: #fff; }

/* página da trilha: aulas agrupadas por módulo */
.trilha-mod-group { margin: 34px auto 0; max-width: 780px; }
.trilha-mod-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
}
.trilha-mod-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.trilha-mod-head .module-sub-open { margin-left: auto; }

/* Início agrupado por trilha: banner da trilha no topo do grupo */
.trilha-section { margin: 42px 0 0; }
/* banner de trilha na mesma altura do banner fixo do topo */
.trilha-banner { height: 480px; }
.module-sub { margin: 26px 0 6px; }
.module-sub-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 12px;
}
.module-sub-info { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.module-sub-info .kicker { flex-shrink: 0; }
.module-sub-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.module-sub-meta { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
/* meta em tags discretas com borda traçada */
.meta-tags { display: inline-flex; gap: 6px; flex-shrink: 0; }
.meta-tag {
  font-size: 11px; font-weight: 500;
  color: var(--text-faint);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}
.module-sub-open {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
}
.module-sub-open:hover { color: var(--text); }
.module-sub-open svg { width: 14px; height: 14px; }

/* row horizontal: sem setas — barra de rolagem fina embaixo,
   visível apenas quando o conteúdo transborda */
.row {
  display: flex; gap: 14px; /* espaçamento fixo — o que não couber vai para as setas */
  overflow-x: auto;
  /* a animação das setas é feita no JS (bindRowArrows) */
  /* sangra o padding direito do .content: em vez de o card ser
     cortado dentro da caixa, a fileira segue até a borda da tela */
  padding: 4px 36px 8px 2px;
  margin-right: -36px;
  /* navegação pelas setas — sem barra deslizante embaixo */
  scrollbar-width: none;
  /* os cards nunca ficam cortados: alinham no início da fileira */
  scroll-snap-type: x proximity;
}
/* barra só com as setas, quando a seção não tem cabeçalho próprio */
.row-bar { display: flex; justify-content: flex-end; margin: 10px 2px -4px; }
.row > * { scroll-snap-align: start; }

/* pôsteres: largura fixa compacta */
.row > .card--poster { flex: 0 0 200px; }

/* card de aula */
.card {
  flex: 0 0 300px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.18s, border-color 0.18s;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.card-thumb { position: relative; display: block; aspect-ratio: 16/9; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-duration {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  background: rgba(7, 13, 17, 0.82);
  color: #e6e4d7; /* o chip é sempre escuro — texto claro nos dois temas */
  padding: 3px 8px; border-radius: 6px;
}
/* concluído: selo branco limpo, sem competir com o conteúdo */
.card-done {
  position: absolute; left: 8px; top: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #141515;
  display: none; align-items: center; justify-content: center;
}
.card-done svg { width: 12px; height: 12px; }
.card.is-done .card-done { display: flex; }
.card-body { padding: 13px 15px 15px; }
.card-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.card-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--text-muted); }

/* =========================================================
   BANNER INSTITUCIONAL DA HOME
   O primeiro bloco da página é a mensagem da escola, em tela
   cheia da coluna. Sem imagem cadastrada, o fundo é o tom
   neutro do sistema — o banner não desaparece.
   ========================================================= */
.showcase {
  position: relative;
  min-height: 480px;
  display: flex; align-items: flex-end;
  margin: 0 0 44px;
  border-radius: var(--radius);
  overflow: hidden;
  /* PROVISÓRIO: cinza escuro de blocagem, no mesmo espírito do
     cinza claro das capas. Sai quando a arte real entrar.      */
  background: #3a3a38;
}
.showcase-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-art ~ .showcase-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 11, 15, 0.86) 0%, rgba(7, 11, 15, 0.55) 46%, rgba(7, 11, 15, 0.28) 100%);
}
.showcase-copy { position: relative; padding: 48px 48px 46px; max-width: 620px; }
.showcase-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  color: #f2f0e6;
  text-wrap: balance;
}

/* atalho para retomar: mora no pé do banner. O rótulo fica fora
   do cartão, logo acima dele.                                  */
.resume-wrap {
  margin-top: 30px;
  max-width: 560px;
}
.resume {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px 12px 12px;
  border-radius: 12px;
  background: rgba(12, 16, 20, 0.62);
  border: 1px solid rgba(230, 228, 215, 0.18);
  backdrop-filter: blur(8px);
  transition: border-color 0.15s, background 0.15s;
}
.resume:hover { border-color: rgba(230, 228, 215, 0.42); background: rgba(12, 16, 20, 0.76); }
.resume-thumb {
  position: relative; display: block;
  width: 120px; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.resume-thumb img { width: 100%; height: 100%; object-fit: cover; }
.resume-time {
  position: absolute; right: 5px; bottom: 5px;
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(7, 13, 17, 0.82); color: #e6e4d7;
  padding: 2px 6px; border-radius: 5px;
}
.resume-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resume-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(242, 240, 230, 0.66);
  margin: 0 0 9px 2px;
}
.resume-mod { font-size: 12px; color: rgba(230, 228, 215, 0.62); }
.resume-title {
  font-size: 15px; font-weight: 600; line-height: 1.35; color: #f2f0e6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.resume-go {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  margin-left: auto;
  border: 1px solid rgba(230, 228, 215, 0.3);
  color: #f2f0e6;
  transition: background 0.15s;
}
.resume:hover .resume-go { background: rgba(230, 228, 215, 0.14); }
.resume-go svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
  .resume-wrap { margin-top: 22px; }
  .resume { gap: 12px; padding: 10px 14px 10px 10px; }
  .resume-thumb { width: 96px; }
  .resume-title { font-size: 14px; }
}
@media (max-width: 760px) {
  .showcase { min-height: 380px; }
  .showcase-copy { padding: 30px 24px 32px; }
}

/* pôster do módulo na vitrine: só a arte da capa, no formato de
   capa de filme. Nome, número e duração ficam no title/aria —
   a informação escrita vive no cabeçalho da trilha e na página
   do módulo, não empilhada em cima da imagem.                  */
.poster-card {
  /* 200 + 24 de cada lado */
  flex: 0 0 248px;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform 0.18s;
}
.poster-card:hover { transform: translateY(-4px); }
.poster {
  position: relative; display: block;
  /* 3:4 daria 267px; +32px em cima e embaixo */
  height: 331px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  /* o backdrop-filter do hover vazava um fio claro nos cantos;
     compor a capa num contexto próprio corta esse resíduo      */
  isolation: isolate;
  transform: translateZ(0);
}
.poster img { width: 100%; height: 100%; object-fit: cover; }

/* ao passar o mouse: o pé da capa escurece e desfoca de baixo
   para cima, revelando a duração numa etiqueta bege e, colada
   na borda inferior, a barra de progresso.                     */
.poster-hover {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
  overflow: hidden;
}
.poster-card:hover .poster-hover,
.poster-card:focus-visible .poster-hover { opacity: 1; }

/* o desfoque some junto com o escurecimento: a máscara faz o
   backdrop-filter perder força conforme sobe                   */
.poster-glass {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(9, 12, 15, 0.9) 0%, rgba(9, 12, 15, 0.55) 40%, rgba(9, 12, 15, 0) 76%);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.55) 40%, transparent 76%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.55) 40%, transparent 76%);
}
.poster-info {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
/* linha de baixo: etiqueta à esquerda, contador à direita */
.poster-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poster-frac {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600;
  color: rgba(242, 240, 230, 0.82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* duração numa etiqueta bege, discreta */
.poster-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(230, 228, 215, 0.92);
  color: #14181c;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  white-space: nowrap;
}
/* barra de progresso dentro da capa, seguindo a margem interna —
   mesma linguagem da barra que aparece ao abrir o módulo        */
.poster-bar {
  display: block; width: 100%;
  height: 6px;
  border-radius: 99px;
  background: rgba(230, 228, 215, 0.18);
  overflow: hidden;
}
.poster-bar span {
  display: block; height: 100%;
  background: #e6e4d7;
  border-radius: 99px;
}
@media (hover: none) { .poster-hover { display: none; } }
/* nome do módulo abaixo da capa, alinhado à esquerda */
.poster-name {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.poster-lock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 13, 17, 0.55);
  color: #e6e4d7;
}
.poster-lock .mi { font-size: 22px; }

.poster-card--locked { pointer-events: none; }
.poster-card--locked .poster-name { color: var(--text-muted); }

.trilha-section { margin-bottom: 40px; }

/* progresso do módulo (chip) */
.chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 10px;
}

/* =========================================================
   PÁGINA DO MÓDULO
   ========================================================= */
.module-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 280px;
  display: flex; align-items: flex-end;
  margin-bottom: 40px;
}
.module-hero .hero-body { max-width: 640px; padding-bottom: 82px; }

/* aulas e tempo: tags discretas, só borda arredondada */
.module-hero-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(230, 228, 215, 0.8);
  border: 1px solid rgba(230, 228, 215, 0.35);
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* progresso do módulo: barra dentro do banner, alinhada para
   baixo com margem interna, e a % preenchida escrita acima    */
.module-hero-progress {
  position: absolute;
  left: 28px; right: 28px; bottom: 18px;
}
.module-hero-progress-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(230, 228, 215, 0.85);
  margin-bottom: 7px;
}
.module-hero-progress-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(230, 228, 215, 0.18);
  overflow: hidden;
}
.module-hero-progress-track span {
  display: block;
  height: 100%;
  background: #e6e4d7;
  border-radius: 99px;
  transition: width 0.4s ease;
}
/* lista de aulas do módulo: mais ao centro e compacta */
.lesson-list { display: flex; flex-direction: column; gap: 8px; max-width: 780px; margin: 0 auto; }
.lesson-item {
  display: flex; gap: 14px; align-items: stretch;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
}
.lesson-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
/* número da aula: numeração simples "1." antes do nome */
.lesson-num {
  color: var(--text-faint);
  margin-right: 7px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lesson-item.is-done .lesson-num { color: var(--text-faint); }

.lesson-thumb { position: relative; flex-shrink: 0; align-self: center; display: block; }
.lesson-item img {
  height: 84px;
  width: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.lesson-item > div { align-self: center; min-width: 0; }
.lesson-item .status { align-self: center; }

/* mobile: linha compacta, sem descrição */
@media (max-width: 640px) {
  /* painel no celular: a barra de ações quebra em vez de empurrar
     a página para o lado                                          */
  .admin-bar { align-items: stretch; }
  .admin-bar-actions { width: 100%; }
  .admin-bar-actions .btn { flex: 1; justify-content: center; }
  .admin-filters .admin-search { min-width: 100%; }
  .admin-filters select { flex: 1; min-width: 140px; }

  .lesson-item { gap: 10px; padding: 10px; }
  .lesson-item img { height: 56px; }
  .lesson-item-desc { display: none; }
  .lesson-item .status { padding-right: 0; }

  /* planilha de conteúdo: a linha quebra e as ações vão para
     baixo, em vez de saírem pela direita                      */
  .sheet-row { flex-wrap: wrap; }
  .sheet-row .sheet-main { flex: 1 1 100%; order: -1; }
  .sheet-row .sheet-cell { font-size: 11px; }
  .sheet-row .td-actions { margin-left: auto; }
  .sheet-row--lesson { padding-left: 16px; }
}
.lesson-item-title { display: flex; align-items: center; font-size: 14.5px; font-weight: 600; }
.lesson-item-desc {
  font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lesson-item-meta { display: flex; gap: 10px; align-items: center; margin-top: 7px; font-size: 12px; color: var(--text-faint); }
/* tempo da aula: discreto no canto inferior direito da thumb */
.lesson-time {
  position: absolute; right: 5px; bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  padding: 1px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.lesson-item .status { margin-left: auto; margin-right: 6px; flex-shrink: 0; }
/* status: círculos do mesmo tamanho — concluída (check verde) e a assistir (play) */
.status-done, .status-play {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
}
.status-done {
  background: #fff;
  color: #141515;
}
.status-play {
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
}
.lesson-item .status .mi { font-size: 16px; vertical-align: 0; }
.lesson-item .status svg { width: 14px; height: 14px; }

/* =========================================================
   PÁGINA DA AULA
   ========================================================= */
.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

.player {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
}
.player iframe, .player video { width: 100%; height: 100%; border: 0; }
.player-placeholder {
  position: absolute; inset: 0;
  background: #0d0e0e;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.player-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.player-play {
  position: relative;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(10, 18, 24, 0.75);
  color: #e6e4d7; /* o player é sempre escuro — ícone claro nos dois temas */
  border: 1px solid rgba(230, 228, 215, 0.25);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform 0.15s, background 0.15s;
}
.player-play:hover { transform: scale(1.06); background: var(--accent); color: #0a1218; }
.player-play svg { width: 26px; height: 26px; margin-left: 3px; }
.player-note { position: relative; font-family: var(--font-mono); font-size: 11px; color: rgba(230, 228, 215, 0.75); letter-spacing: 0.08em; }

.lesson-header { margin-top: 24px; }
.lesson-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 6px;
}
.lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  transition: all 0.15s;
}
.action-btn svg { width: 16px; height: 16px; }
.action-btn:hover { color: var(--text); border-color: var(--text-muted); }
.action-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* concluída: 100% preenchido em cor neutra (segue o tema) */
.action-btn.done { background: var(--text); border-color: var(--text); color: var(--bg); }

/* avaliação por estrelas */
.rating { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.rating-label { font-size: 12px; color: var(--text-faint); margin-right: 6px; }

/* tag da aula: sem caixa alta nem espaçamento largo, tópicos com "/" */
.lesson-tag {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* linha única: professor + ações + avaliação (label acima das estrelas) */
.lesson-meta-row {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.lesson-meta-row .lesson-instructor { margin-top: 0; }
.lesson-meta-row .lesson-actions { margin-top: 0; }
.rating--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-left: 4px;
}
.rating--stacked .rating-label { margin-right: 0; }
.rating-stars { display: flex; align-items: center; gap: 4px; }

/* estrelas aparecem só depois de curtir, com revelação sutil */
.rating--reveal {
  opacity: 0;
  translate: -8px 0;
  scale: 0.94;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.3s ease, scale 0.3s ease;
}
.rating--reveal.show {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  pointer-events: auto;
}

/* concluir a aula fica no canto direito da linha */
.lesson-meta-row .btn-done-right { margin-left: auto; }
.star { padding: 3px; color: var(--text-faint); transition: color 0.1s, transform 0.1s; }
.star svg { width: 20px; height: 20px; }
.star:hover { transform: scale(1.15); }
.star.filled { color: var(--gold); }

/* abas: descrição / comentários / materiais */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 30px 0 22px; }
.tab {
  padding: 10px 18px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab .count {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  margin-left: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel p.desc { color: var(--text-muted); max-width: 70ch; }

/* comentários */
.comment-form { display: flex; gap: 12px; margin-bottom: 26px; }
.comment-form img, .comment-form .avatar-fallback { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-input-wrap { flex: 1; }
.comment-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font: inherit; font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.comment-input:focus { border-color: var(--line-strong); }
.comment-form-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.comment { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.comment img, .comment .avatar-fallback { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-author { font-size: 13.5px; font-weight: 600; }
.comment-time { font-size: 11.5px; color: var(--text-faint); margin-left: 8px; }
.comment-text { font-size: 14px; color: var(--text-muted); margin-top: 4px; white-space: pre-wrap; }

/* materiais */
.material {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  max-width: 480px;
  font-size: 14px; font-weight: 500;
  transition: border-color 0.15s;
}
.material:hover { border-color: var(--line-strong); }
.material svg { width: 18px; height: 18px; color: var(--accent); }

/* botão discreto de download no canto direito da tag de material */
.material-dl {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  margin-left: auto; flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--text-faint);
  background: var(--surface-2);
  transition: color 0.15s, border-color 0.15s;
}
.material-dl .mi, .material-dl svg { font-size: 16px; width: 16px; height: 16px; color: inherit; }
.material:hover .material-dl { color: var(--accent); border-color: var(--line-strong); }

/* cartão do professor / convidado */
.instructor-card {
  display: flex; align-items: center; gap: 18px;
  margin-top: 34px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 640px;
}
.instructor-card img, .instructor-card .avatar-fallback {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.instructor-card .avatar-fallback { font-size: 20px; }
.instructor-role { margin-bottom: 2px; }
.instructor-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.instructor-bio { font-size: 13px; color: var(--text-muted); margin-top: 3px; max-width: 52ch; }
.instructor-ig {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
  padding: 8px 16px; border-radius: 99px;
  transition: all 0.15s;
}
.instructor-ig:hover { color: var(--text); border-color: var(--text-muted); }
.instructor-ig svg { width: 16px; height: 16px; }

/* sidebar de próximas aulas */
/* lista de aulas com scroll próprio, independente do player */
.up-next {
  position: sticky; top: calc(var(--topbar-h) + 8px);
  max-height: calc(100vh - var(--topbar-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
/* barra de rolagem fina e discreta: só aparece ao passar o mouse */

/* desktop: a página da aula não rola — cada coluna tem o próprio
   scroll e a lista lateral fica fixa, como o menu esquerdo */
/* a sala da live (body.live-room) usa exatamente o mesmo
   comportamento da página de aula                              */
@media (min-width: 1101px) {
  body[data-page="lesson"] .main,
  body.live-room .main { display: flex; flex-direction: column; height: 100vh; }
  body[data-page="lesson"] .topbar, body[data-page="lesson"] .alert-stack,
  body.live-room .topbar, body.live-room .alert-stack { flex-shrink: 0; }
  body[data-page="lesson"] .content,
  body.live-room .content { flex: 1; min-height: 0; overflow: hidden; padding-bottom: 0; }
  body[data-page="lesson"] .lesson-layout,
  body.live-room .lesson-layout { height: 100%; align-items: stretch; }
  .lesson-col {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* padding só no topo: nas laterais ele recortava o player e
       abria uma faixa morta entre o vídeo e a barra de rolagem  */
    padding: 2px 0 120px;
  }
  /* coluna direita: progresso e título fixos; só a lista de aulas rola */
  body[data-page="lesson"] .up-next,
  body.live-room .up-next {
    position: static;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 14px;
  }
  /* a lista reserva 6px à direita para a barra de rolagem; o
     cartão de progresso e o título recuam o mesmo tanto por
     fora (margem, não padding) para as bordas baterem          */
  body[data-page="lesson"] .up-next-progress,
  body[data-page="lesson"] .up-next-title,
  body.live-room .up-next-progress,
  body.live-room .up-next-title { flex-shrink: 0; margin-right: 6px; }
  body[data-page="lesson"] .up-next-list,
  body.live-room .up-next-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
  }
}

/* setas das fileiras de aulas (home) — só aparecem com card oculto */
.row-arrows { display: inline-flex; gap: 6px; margin-left: auto; }
.row-arrows[hidden] { display: none; }
/* sem setas visíveis, o "Ver tudo" volta para a direita */
.row-arrows[hidden] + .module-sub-open { margin-left: auto; }
.row-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  transition: color 0.12s, border-color 0.12s;
}
.row-arrow:hover { color: var(--text); border-color: var(--line-strong); }
.row-arrow svg { width: 14px; height: 14px; }
.row-arrow:disabled { opacity: 0.3; pointer-events: none; }
.up-next-title { margin-bottom: 14px; }
.up-next-list { display: flex; flex-direction: column; gap: 10px; }
.up-next-item {
  display: flex; gap: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.up-next-item:hover { background: var(--surface); border-color: var(--line); }
.up-next-item.current { background: var(--surface); border-color: var(--line-strong); }
.up-next-thumb { position: relative; width: 128px; flex-shrink: 0; }
.up-next-thumb img { aspect-ratio: 16/9; object-fit: cover; border-radius: 7px; width: 100%; }
.up-next-thumb .card-duration { right: 5px; bottom: 5px; }
.up-next-thumb .card-done { left: 5px; top: 5px; display: none; }
.up-next-item.is-done .card-done { display: flex; }
.up-next-info { min-width: 0; padding-top: 2px; }
.up-next-kicker { font-size: 10.5px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.up-next-item.current .up-next-kicker { color: var(--accent); }
.up-next-name { font-size: 13px; font-weight: 600; line-height: 1.35; margin-top: 3px; }
/* descrição da aula: aparece até onde o espaço deixa */
.up-next-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* progresso do módulo no topo da coluna (mesmo estilo da sidebar) */
.up-next-progress { margin-bottom: 16px; }

/* =========================================================
   LIVES
   ========================================================= */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--accent);
}
.live-badge .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(35, 237, 153, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(35, 237, 153, 0); }
}
/* o mesmo ponto pulsante no rótulo da próxima live, no banner */
.resume-kicker .pulse {
  display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  margin: -2px 8px 0 0;
  animation: pulse 1.6s infinite;
}
/* barra do arquivo: abas de temporada à esquerda, busca à
   direita — na mesma linha enquanto couber                     */
.live-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 26px; flex-wrap: wrap;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--line);
}
.live-bar .tabs { margin: 0; border-bottom: 0; flex: 1 1 320px; }
.live-bar .section-search {
  margin: 0 0 8px; width: min(300px, 100%); flex: 0 1 300px;
  padding: 8px 16px;
}

/* gravações lado a lado: só a capa dentro do quadro; título e
   data ficam embaixo, fora dela                                */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 30px 18px; }
.live-card { display: flex; flex-direction: column; }
.live-card-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.18s, border-color 0.18s;
}
.live-card:hover .live-card-thumb { transform: translateY(-4px); border-color: var(--line-strong); }
.live-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-card-title {
  margin-top: 12px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.live-card-date { margin-top: 5px; font-size: 12px; color: var(--text-muted); }

/* =========================================================
   LOGIN
   ========================================================= */
.login-shell { display: flex; min-height: 100vh; }
/* transição suave entre as telas de acesso (login → recuperar → criar) */
@media (prefers-reduced-motion: no-preference) {
  .login-shell { animation: login-entrada 0.35s ease both; }
  @keyframes login-entrada { from { opacity: 0 } to { opacity: 1 } }
}
/* a coluna da obra nunca mostra fundo claro — e o respiro em volta da
   imagem fica na MESMA cor do resto da tela, sem faixa destacada */
.login-right { background: var(--bg); }
.login-right img { opacity: 0; }
.login-right img.pronta { opacity: 1; }
.login-left {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px clamp(32px, 7vw, 110px);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
/* grupo de login centralizado: logo, campos e links */
.login-center { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; }
.login-brand { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: 0.01em; margin-bottom: 36px; }
.login-brand sup { font-size: 12px; color: var(--gold); }
.field { position: relative; margin-bottom: 14px; width: 100%; }
.field svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--text-faint); }
.field input {
  width: 100%;
  padding: 15px 16px 15px 46px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 14.5px;
  outline: none;
  transition: border-color 0.15s;
}
.field input:focus { border-color: var(--line-strong); }
.field input::placeholder { color: var(--text-faint); }
/* olho de mostrar/esconder a senha */
.field-eye {
  position: absolute;
  right: 8px; top: 50%;
  translate: 0 -50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-faint);
  transition: color 0.12s, background 0.12s;
}
.field-eye:hover { color: var(--text); background: var(--hover); }
.field-eye .mi { font-size: 19px; }
.field input#login-password { padding-right: 48px; }
#login-form { width: 100%; }
.login-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.login-forgot { font-size: 13.5px; color: var(--text-muted); }
.login-forgot:hover { color: var(--text); }
.login-signup { margin-top: 28px; font-size: 13.5px; color: var(--text-muted); }
.login-signup a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* erro de autenticação (login, criar senha) — some até a primeira falha */
.login-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, #e5484d 14%, transparent);
  border: 1px solid color-mix(in srgb, #e5484d 45%, transparent);
  color: #ff9a9e;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
}

/* aceite de termos na criação de senha */
.login-aceite {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 18px; text-align: left;
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
  cursor: pointer;
}
.login-aceite input { margin-top: 2px; accent-color: var(--accent, #ff5a1f); }
.login-aceite a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* escrita da eminente: centrada na base da coluna, pequena e discreta */
.login-left { position: relative; }
.login-mark {
  position: absolute;
  left: 50%; bottom: 28px;
  translate: -50% 0;
}
.login-mark img { height: 18px; width: auto; }

/* tela de recuperar senha */
#recovery-box { width: 100%; display: flex; flex-direction: column; align-items: center; }
#recovery-form { width: 100%; }
.recovery-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.recovery-sub { color: var(--text-muted); font-size: 14px; line-height: 1.6; max-width: 42ch; margin-bottom: 28px; }
.recovery-sub b { color: var(--text); }
.recovery-check { width: 54px; height: 54px; margin-bottom: 18px; }
.recovery-check .mi { font-size: 26px; }
/* imagem à direita: respiro interno com cantos arredondados */
.login-right { flex: 1.2; position: relative; overflow: hidden; display: none; padding: 24px; }
.login-right img {
  position: absolute; inset: 24px;
  width: calc(100% - 48px); height: calc(100% - 48px);
  object-fit: cover;
  border-radius: var(--radius);
  transition: opacity 0.28s ease;
}
/* crédito do autor: só texto, no canto inferior esquerdo da obra */
.login-credit {
  position: absolute;
  left: 42px; bottom: 40px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
/* barra discreta dentro da imagem: progresso até a próxima obra */
.login-art-progress {
  position: absolute;
  left: 42px; right: 86px; bottom: 62px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.login-art-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
}
/* contador de obras na ponta direita da barra (ex.: 1/5) */
.login-art-count {
  position: absolute;
  right: 42px; bottom: 55px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
@media (min-width: 861px) { .login-right { display: block; } }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1100px) {
  /* telas menores: a página rola normal, com o mesmo respiro no fim da aula */
  body[data-page="lesson"] .content { padding-bottom: 200px; }
  .lesson-layout { grid-template-columns: 1fr; }
  .up-next { position: static; }
}
/* menu mobile: hambúrguer + sidebar off-canvas */
.menu-btn {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-muted);
  flex-shrink: 0;
}
.menu-btn svg { width: 18px; height: 18px; }
.menu-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(4, 8, 11, 0.55);
  z-index: 49;
}

@media (max-width: 860px) {
  .sidebar {
    translate: -105% 0;
    transition: translate 0.25s ease;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  }
  body.menu-open .sidebar { translate: 0 0; }
  body.menu-open .menu-backdrop { display: block; }
  .menu-btn { display: flex; }
  .main { margin-left: 0; }
  .content { padding: 20px 18px 60px; }
  .row { padding-right: 18px; margin-right: -18px; }
  .topbar { padding: 0 18px; gap: 14px; }
  .module-banner, .trilha-banner { height: 380px; }
  .module-banner-center .section-title { font-size: 20px; }
  .instructor-card { flex-wrap: wrap; }
  .instructor-ig { margin-left: 0; }
}

/* foco visível para navegação por teclado */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   HOME — seções de módulo (título organiza, capas só imagem)
   ========================================================= */
.module-section { margin-top: 52px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 14px; flex-wrap: wrap;
}
.section-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; letter-spacing: -0.01em;
}
.section-title a:hover { color: #fff; }
/* tags de aulas e tempo alinhadas junto ao título, à esquerda */
.section-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.section-side { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; }
.section-open {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.section-open svg { width: 14px; height: 14px; }
.section-open:hover { color: var(--text); }


/* capa de aula: apenas imagem */
.card--poster {
  position: relative;
  flex: 0 0 200px;
  aspect-ratio: 3 / 4;
  background: var(--surface);
}
.card--poster img { width: 100%; height: 100%; object-fit: cover; }
.card--poster .card-duration { position: absolute; right: 8px; bottom: 8px; }
.card--poster .card-done { position: absolute; left: 8px; top: 8px; }

/* =========================================================
   PÁGINAS INTERNAS — cabeçalho simples
   ========================================================= */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600; letter-spacing: -0.01em;
  margin-top: 6px;
}
.page-sub { color: var(--text-muted); font-size: 14.5px; margin-top: 6px; max-width: 60ch; }
.mural-head { margin: 8px 0 6px; }
/* frase de apoio e contagem dentro do banner (Cursos, Oficina) */
.showcase-sub {
  margin-top: 14px;
  font-size: 15px; line-height: 1.6;
  color: rgba(242, 240, 230, 0.74);
  max-width: 52ch;
}
.showcase-meta {
  display: inline-block; margin-top: 18px;
  color: rgba(242, 240, 230, 0.7);
  border-color: rgba(230, 228, 215, 0.28);
}
.collection-section { margin-top: 4px; }

/* =========================================================
   MURAL DE AVISOS — blocos estilo Pinterest, cores do sistema
   ========================================================= */
.aviso-tabs { margin-top: 26px; }
.aviso-masonry {
  columns: 3 260px;
  column-gap: 16px;
  margin-top: 24px;
}
.aviso-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  break-inside: avoid;
  margin-bottom: 16px;
  padding: 20px 20px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.aviso-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.aviso-card h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  line-height: 1.25;
  padding-right: 24px;
}
.aviso-card p { font-size: 13.5px; line-height: 1.55; opacity: 0.85; }
.aviso-pin {
  position: absolute; top: 14px; right: 14px;
  opacity: 0.7;
}
.aviso-pin .mi, .aviso-pin svg { font-size: 16px; width: 16px; height: 16px; }
.aviso-timer { align-self: flex-start; margin-top: 4px; }
.aviso-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
.aviso-date {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.6;
}
.aviso-card--seen { opacity: 0.55; }
.aviso-card--seen:hover { opacity: 0.8; }

/* =========================================================
   ADMIN — painel de gestão
   ========================================================= */
.link-btn {
  color: var(--gold); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; margin-left: 6px;
}
.link-btn:hover { color: var(--text); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 26px 0 6px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
}
.stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.admin-hint { color: var(--text-muted); font-size: 13px; margin: -6px 0 14px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-sm svg { width: 14px; height: 14px; }

.admin-select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 13.5px;
  padding: 9px 12px;
  outline: none;
  max-width: 340px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  background: var(--surface);
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-2);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.td-sub { font-size: 12px; color: var(--text-muted); }
.td-actions { text-align: right; white-space: nowrap; }

.tag {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 2px 9px;
}
.tag-ok { color: var(--accent); border-color: rgba(35, 237, 153, 0.35); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.danger:hover { color: #ff7a6b; background: rgba(255, 122, 107, 0.1); }

.color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-strong); }
.color-dot--cream { background: #e6e4d7; }
.color-dot--gold  { background: #b98d51; }
.color-dot--teal  { background: #007b76; }
.color-dot--green { background: #23ed99; }
.color-dot--dark  { background: #101b23; }

/* modal de formulário */
.modal-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 9, 12, 0.72);
  backdrop-filter: blur(5px);
  z-index: 300;
  padding: 20px;
}
.modal {
  width: min(540px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.modal h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 20px; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit; font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--line-strong); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
/* ações separadas: cancelar discreto à esquerda, ação principal à direita */
.modal-actions--split { justify-content: space-between; align-items: center; }
.modal-cancel {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-faint);
  padding: 8px 4px;
  transition: color 0.12s;
}
.modal-cancel:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* botão com ícone à frente, bem assentado */
.btn-icon-lead { gap: 8px; }
.btn-icon-lead .mi { font-size: 18px; vertical-align: 0; }

/* engrenagem de acesso ao admin no cartão do usuário */
.user-admin {
  margin-left: auto;
  color: var(--text-faint);
  padding: 7px;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}
.user-admin:hover { color: var(--text); background: var(--hover); }
.user-admin svg { width: 15px; height: 15px; display: block; }

/* logo no login */
.login-brand img { height: 42px; width: auto; display: block; margin-inline: auto; }

/* =========================================================
   PROGRESSO DO ALUNO (sidebar, acima do perfil)
   ========================================================= */
.progress-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 13px 14px 12px;
  margin-bottom: 8px;
}
.progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.progress-count { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.progress-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.5s ease;
}
.progress-sub { font-size: 11px; color: var(--text-faint); margin-top: 7px; }

/* =========================================================
   TRANSIÇÃO ENTRE ABAS (apenas fade — logo estática)
   ========================================================= */
.page-loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.page-loader.visible { opacity: 1; pointer-events: all; }
.page-loader.instant { transition: none; }
.page-loader img { width: 58px; }

/* =========================================================
   BIBLIOTECA — prompts
   ========================================================= */
.prompt-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 20px; }
.chip-filter { cursor: pointer; transition: all 0.15s; }
.chip-filter:hover { color: var(--text); border-color: var(--line-strong); }
.chip-filter.active { background: var(--text); color: var(--bg); border-color: var(--text); }
/* posts centralizados, sempre em fileiras de 3 */
.prompt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 380px));
  justify-content: center;
  gap: 16px;
}
@media (max-width: 1080px) { .prompt-grid { grid-template-columns: repeat(2, minmax(0, 380px)); } }
@media (max-width: 680px) { .prompt-grid { grid-template-columns: minmax(0, 420px); } }
.prompt-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.18s;
}
.prompt-card:hover { transform: translateY(-3px); }
.prompt-card:hover .prompt-more { color: var(--accent); }
.prompt-cover { height: 128px; background: var(--surface-2); }
.prompt-cover img { width: 100%; height: 100%; object-fit: cover; }
.prompt-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.prompt-card:hover { border-color: var(--line-strong); }
.prompt-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.prompt-desc {
  font-size: 13.5px; line-height: 1.55; color: var(--text-muted); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prompt-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  transition: color 0.15s;
}
.prompt-more svg { width: 13px; height: 13px; }
.prompt-text {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.7;
  color: var(--text-muted);
  white-space: pre-wrap;
  padding: 18px 20px;
  margin: 0;
}

/* leitura estilo blog padrão: coluna centralizada */
.prompt-article { max-width: 720px; margin: 0 auto; }
.article-body { margin-top: 26px; }
.article-body p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.article-files {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 20px;
  transition: color 0.15s;
}
.back-link:hover { color: var(--text); }
.back-link svg { width: 14px; height: 14px; }
.prompt-article-cover {
  height: 190px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 24px;
}
.prompt-article-cover img { width: 100%; height: 100%; object-fit: cover; }
.prompt-full {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.prompt-full-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

/* =========================================================
   TEMA CLARO
   Base creme da marca, texto na cor da base escura.
   O acento vira o teal (#007B76) para manter contraste.
   ========================================================= */
:root[data-theme="light"] {
  --bg: #f4f3ef;
  --bg-soft: #edece7;
  --surface: #faf9f6;
  --surface-2: #ffffff;
  --line: rgba(10, 18, 24, 0.09);
  --line-strong: rgba(10, 18, 24, 0.22);
  --text: #0a1218;
  --text-muted: #4d564f;
  --text-faint: #7d857b;
  --accent: #007b76;
  --accent-soft: rgba(0, 123, 118, 0.1);
  --gold: #946d33;
  --green: #0e9c6b;
  --danger: #c2402f;
  --danger-soft: rgba(194, 64, 47, 0.1);
  --hover: rgba(10, 18, 24, 0.045);
  --track: rgba(10, 18, 24, 0.1);
  --sb: #cfcdc6;
}

/* logos são creme no SVG — inverte para o tema claro */
:root[data-theme="light"] .brand img,
:root[data-theme="light"] .login-brand img,
:root[data-theme="light"] .page-loader img {
  filter: invert(1) hue-rotate(180deg);
}

/* sombras mais suaves no claro; avisos vistos ficam sem sombra */
:root[data-theme="light"] .aviso-card:hover {
  box-shadow: 0 10px 24px rgba(10, 18, 24, 0.14);
}
:root[data-theme="light"] .aviso-card--seen,
:root[data-theme="light"] .aviso-card--seen:hover {
  box-shadow: none;
  transform: none;
}
:root[data-theme="light"] .search-results,
:root[data-theme="light"] .modal {
  box-shadow: 0 24px 60px rgba(10, 18, 24, 0.25);
}

/* botão de alternar tema */
.theme-fab {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 120;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}
.theme-fab:hover { color: var(--text); border-color: var(--text-muted); }
.theme-fab svg { width: 18px; height: 18px; }

/* =========================================================
   FRASE DO DIA (sidebar, acima do progresso)
   ========================================================= */
.quote-card {
  padding: 4px 12px 16px;
  margin-bottom: 4px;
}
.quote-card blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-muted);
  padding-top: 16px;
}
/* aspas discretas acima da frase */
.quote-card blockquote::before {
  content: "\201C";
  position: absolute;
  top: -8px; left: -2px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--text-faint);
  opacity: 0.7;
}
.quote-card figcaption {
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* =========================================================
   COMUNIDADE — selo verificado, menções e perfil
   ========================================================= */

/* selo verde com o ícone (&) da marca */
.verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 5px;
  vertical-align: 0;
  flex-shrink: 0;
}
.verified::before {
  content: "";
  width: 7px; height: 9px;
  background: var(--bg);
  -webkit-mask: url(../img/logo-icon.svg) no-repeat center / contain;
  mask: url(../img/logo-icon.svg) no-repeat center / contain;
}

/* menção dentro de comentários */
.mention { color: var(--accent); font-weight: 600; }
.mention:hover { text-decoration: underline; text-underline-offset: 2px; }

/* autocomplete de menção */
.mention-anchor { position: relative; }
.mention-box {
  position: absolute;
  left: 0; top: calc(100% + 6px);
  width: min(320px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: 90;
  display: none;
}
.mention-box.open { display: block; }
.mention-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.mention-item:last-child { border-bottom: 0; }
.mention-item:hover { background: var(--hover); }
.mention-item img, .mention-item .avatar-fallback {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 11px; flex-shrink: 0;
}
.mention-item-info { min-width: 0; }
.mention-item-name { display: flex; align-items: center; font-size: 13px; font-weight: 600; }
.mention-item-handle { display: block; font-size: 11.5px; color: var(--text-muted); }

/* nome do autor do comentário */
.comment-author:hover { text-decoration: underline; text-underline-offset: 3px; }
.user-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.instructor-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- página de perfil (estilo Instagram) ---------- */
.profile { max-width: 620px; margin: 26px auto 0; }
.profile-head { display: flex; gap: 30px; align-items: flex-start; }
.profile-head img.profile-avatar, .profile-head .profile-avatar {
  width: 112px; height: 112px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  font-size: 34px;
}
.profile-info { min-width: 0; }
.profile-name {
  display: flex; align-items: center;
  font-family: var(--font-display);
  font-size: 27px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.2;
}
.profile-name .verified { width: 19px; height: 19px; margin-left: 8px; }
.profile-name .verified::before { width: 9px; height: 11px; }
.profile-handle { font-size: 14px; color: var(--text-muted); margin-top: 3px; }
.profile-bio { font-size: 14.5px; color: var(--text-muted); line-height: 1.65; margin-top: 14px; max-width: 46ch; }
.profile-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.profile-stats {
  display: flex;
  margin-top: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.profile-stat {
  flex: 1;
  text-align: center;
  padding: 18px 10px 15px;
  border-right: 1px solid var(--line);
}
.profile-stat:last-child { border-right: 0; }
.profile-stat b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.profile-stat span { font-size: 11.5px; color: var(--text-muted); }
.profile-verified-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: 12.5px; color: var(--text-muted);
}
.profile-verified-note .verified { margin-left: 0; }

@media (max-width: 640px) {
  .profile-head { flex-direction: column; gap: 18px; }
}

/* =========================================================
   BUSCA CENTRAL (Ctrl+K) — estilo Spotlight
   ========================================================= */
.spotlight {
  position: fixed; inset: 0;
  display: none;
  /* ancorada no topo: a caixa não muda de posição quando os resultados aparecem */
  align-items: flex-start; justify-content: center;
  padding: 14vh 20px 20px;
  background: rgba(4, 7, 10, 0.8);
  z-index: 400;
}
:root[data-theme="light"] .spotlight { background: rgba(10, 18, 24, 0.78); }
/* com a busca aberta, a página fica travada */
body.no-scroll { overflow: hidden; }
.spotlight.open { display: flex; }
.spotlight-panel {
  width: min(620px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.spotlight-input-row {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}
.spotlight-input-row svg { width: 20px; height: 20px; color: var(--text-faint); flex-shrink: 0; }
.spotlight-input-row input {
  flex: 1;
  background: none; border: 0; outline: none;
  color: var(--text);
  font: inherit; font-size: 17px;
}
.spotlight-input-row input::placeholder { color: var(--text-faint); }
.spotlight-input-row kbd {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 7px;
}
.spotlight-results { max-height: min(420px, 62vh); overflow-y: auto; padding: 8px; }
.spotlight-hint { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.spotlight-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
}
.spotlight-item.active, .spotlight-item:hover { background: var(--hover); }
.spotlight-item-thumb { position: relative; display: block; width: 80px; flex-shrink: 0; }
.spotlight-item img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; }
.spotlight-item-thumb .card-duration { right: 4px; bottom: 4px; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; }
.spotlight-item-info { flex: 1; min-width: 0; }
.spotlight-item-title {
  display: block;
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spotlight-item-meta { display: block; font-size: 11.5px; color: var(--text-muted); }

/* =========================================================
   LIVES — grupos e sala da live
   ========================================================= */
.live-group { margin-top: 40px; }
/* sala da live: o botão de voltar abre a coluna, acima do player */
.live-room .lesson-col > .back-link { margin-bottom: 14px; }

/* =========================================================
   PROFESSOR ABAIXO DO TÍTULO (linha discreta, sem caixa)
   ========================================================= */
.lesson-instructor {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
}
.lesson-instructor img, .lesson-instructor .avatar-fallback {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 13px;
  flex-shrink: 0;
}
.lesson-instructor-info { min-width: 0; }
.lesson-instructor-name {
  display: flex; align-items: center;
  font-size: 14.5px; font-weight: 600;
  line-height: 1.3;
}
.lesson-instructor-handle {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
}
a.lesson-instructor:hover .lesson-instructor-name { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   COMENTÁRIOS EM FIO (respostas agrupadas)
   ========================================================= */
.comment-body { min-width: 0; flex: 1; }
.comment-thread { border-top: 1px solid var(--line); }
.comment-thread .comment { border-top: 0; }
.comment-replies {
  margin-left: 49px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.comment-replies .comment { padding: 4px 0 12px; }
.comment-replies .comment img, .comment-replies .comment .avatar-fallback {
  width: 30px; height: 30px; font-size: 11px;
}
.comment-reply-btn {
  display: inline-block;
  margin-top: 2px;
  font-size: 12px; font-weight: 600;
  color: var(--text-faint);
  transition: color 0.12s;
}
.comment-reply-btn:hover { color: var(--accent); }
.reply-form {
  display: flex; gap: 10px;
  margin: 4px 0 16px 49px;
}
.reply-form img, .reply-form .avatar-fallback {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 11px; flex-shrink: 0;
}
.reply-form .comment-input { min-height: 58px; font-size: 13.5px; }
.reply-form .comment-form-actions { gap: 8px; display: flex; justify-content: flex-end; margin-top: 8px; }

/* =========================================================
   MATERIAL SYMBOLS (ícones do sistema)
   ========================================================= */
.mi {
  font-family: "Material Symbols Outlined";
  font-weight: 300;
  font-style: normal;
  font-size: 1.3em;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.24em;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  font-variation-settings: "opsz" 20;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.nav a .mi { font-size: 20px; }
.search-box .mi {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  font-size: 18px; color: var(--text-faint); pointer-events: none;
}
.spotlight-input-row .mi { font-size: 21px; color: var(--text-faint); flex-shrink: 0; }
.menu-btn .mi { font-size: 20px; }
.player-play .mi { font-size: 32px; }
.btn .mi { font-size: 17px; }
.action-btn .mi { font-size: 17px; }
.icon-btn .mi { font-size: 17px; }
.user-admin .mi { font-size: 17px; }
.star .mi { font-size: 21px; }
.star.filled .mi { font-variation-settings: "FILL" 1, "opsz" 20; }
.card-done .mi { font-size: 13px; font-weight: 600; }
.status-play .mi { font-size: 22px; }
.status-done .mi { font-size: 16px; }
.section-open .mi { font-size: 16px; }
.back-link .mi { font-size: 16px; }
.material .mi { font-size: 18px; color: var(--accent); }
.prompt-more .mi { font-size: 14px; }
.comment-reply-btn .mi { font-size: 14px; }
.crumbs .mi { font-size: 15px; }
.market-services .mi { font-size: 15px; color: var(--accent); }
.view-toggle .mi { font-size: 16px; }
.nav .mi, .btn .mi, .icon-btn .mi { flex-shrink: 0; }

/* =========================================================
   SKELETON de transição (blocos cinzas, < 1s)
   ========================================================= */
.main { position: relative; }
.skeleton-layer {
  position: absolute; inset: 0;
  z-index: 45;
  background: var(--bg);
  padding: calc(var(--topbar-h) + 26px) 36px 40px;
  opacity: 1;
  transition: opacity 0.25s ease;
  overflow: hidden;
}
.skeleton-layer.out { opacity: 0; }
.sk {
  position: relative;
  background: var(--surface-2);
  border-radius: 12px;
  overflow: hidden;
}
.sk::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--hover), transparent);
  animation: skShimmer 1s infinite;
}
@keyframes skShimmer {
  from { translate: -100% 0; }
  to { translate: 100% 0; }
}
.sk-banner { height: 220px; margin-bottom: 28px; }
.sk-line { height: 16px; margin-bottom: 12px; }
.sk-line.w35 { width: 35%; }
.sk-line.w55 { width: 55%; }
.sk-row { display: flex; gap: 14px; margin-top: 22px; }
.sk-card { flex: 0 0 186px; aspect-ratio: 2 / 3; }
@media (max-width: 860px) { .skeleton-layer { padding: calc(var(--topbar-h) + 20px) 18px 30px; } }

/* =========================================================
   MARKETPLACE
   ========================================================= */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.market-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color 0.15s, transform 0.18s;
}
.market-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.market-head { display: flex; align-items: center; gap: 13px; }
.market-head img, .market-head .avatar-fallback {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; font-size: 16px; flex-shrink: 0;
}
.market-id { min-width: 0; }
.market-name { display: flex; align-items: center; font-family: var(--font-display); font-size: 17.5px; font-weight: 600; }
.market-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.market-handle { display: block; font-size: 12px; color: var(--text-faint); }
.market-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.market-services { list-style: none; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.market-services li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.market-price { font-size: 13px; color: var(--text-muted); padding-top: 4px; border-top: 1px solid var(--line); }
.market-price b { color: var(--text); font-weight: 600; }
.market-price.muted { color: var(--text-faint); }
.market-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.market-note {
  margin-top: 34px;
  font-size: 13px;
  color: var(--text-faint);
  max-width: 62ch;
}

/* cabeçalho centralizado com busca (marketplace, biblioteca, materiais) */
.mural-head--center {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.mural-head--center .page-sub { margin-left: auto; margin-right: auto; }
.section-search {
  display: flex; align-items: center; gap: 10px;
  width: min(440px, 100%);
  margin: 20px auto 0;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  cursor: text;
  transition: border-color 0.15s, background 0.15s;
}
.section-search:focus-within { border-color: var(--line-strong); background: var(--surface-2); }
.section-search .mi, .section-search svg { color: var(--text-faint); font-size: 18px; width: 18px; height: 18px; flex-shrink: 0; }
.section-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text);
  font: inherit; font-size: 14px;
}
.section-search input::placeholder { color: var(--text-faint); }
.prompt-filters--center { justify-content: center; }
.market-tabs { justify-content: center; margin-top: 18px; }

/* oportunidades do marketplace */
.opp-bar {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 16px;
}
.opp-hint { color: var(--text-muted); margin: 0; }
.opp-bar .btn { margin-left: auto; flex-shrink: 0; }
.opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.opp-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}
.opp-card:hover { border-color: var(--line-strong); }
.opp-top { display: flex; align-items: center; gap: 10px; }
.opp-top .icon-btn { margin-left: auto; }
.opp-top .td-sub:last-child { margin-left: auto; }
.opp-title { font-family: var(--font-display); font-size: 17px; }
.opp-desc { font-size: 13.5px; color: var(--text-muted); flex: 1; }
.opp-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12.5px; color: var(--text);
}
.opp-meta .mi { font-size: 15px; color: var(--gold); vertical-align: -3px; }
.opp-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.opp-foot .btn { margin-left: auto; }
.opp-author { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.opp-author:hover { color: var(--text); }
.opp-avatar, .avatar-fallback.opp-avatar { width: 24px; height: 24px; font-size: 10px; }

/* editor visual do composer (feed) */
.composer-editor {
  min-height: 88px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  cursor: text;
}
.composer-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}
.composer-editor a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.composer-editor strong, .composer-editor b { font-weight: 700; }
.composer-editor em, .composer-editor i { font-style: italic; }
.profile-market {
  margin-top: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

/* =========================================================
   BOTÃO "VER COMO ALUNO" (provisório)
   ========================================================= */
.view-toggle {
  position: fixed;
  right: 18px; bottom: 70px;
  z-index: 200;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 13px; font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.view-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.view-toggle.on { background: var(--accent); border-color: var(--accent); color: #0a1218; }

/* =========================================================
   FEED (estilo Circle)
   ========================================================= */
.feed { max-width: 680px; margin: 0 auto; }

/* compositor */
.composer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 26px;
}
.composer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.composer-head img, .composer-head .avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.composer-title {
  flex: 1;
  background: none; border: 0; outline: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
}
.composer-title::placeholder { color: var(--text-faint); font-weight: 500; }
.composer-toolbar {
  display: flex; gap: 4px;
  padding: 6px 0 10px;
  border-top: 1px solid var(--line);
}
.composer-text { min-height: 90px; }
.composer-preview { position: relative; margin-top: 12px; }
.composer-preview img { max-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.composer-preview .icon-btn {
  position: absolute; top: 8px; left: 8px;
  background: rgba(8, 14, 18, 0.75);
}
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.composer-hint { font-size: 11.5px; color: var(--text-faint); }
.composer-footer-actions { display: inline-flex; gap: 8px; flex-shrink: 0; }

/* composer compacto (estilo rede social): expande ao clicar */
.composer-open-row {
  display: none;
  align-items: center; gap: 12px;
  width: 100%;
  text-align: left;
}
.composer-open-row img, .composer-open-row .avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; font-size: 13px; flex-shrink: 0;
}
.composer-open-hint {
  flex: 1; min-width: 0;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 13.5px;
  transition: border-color 0.15s, color 0.15s;
}
.composer-open-row:hover .composer-open-hint { border-color: var(--line-strong); color: var(--text-muted); }
.composer-open-ico { color: var(--text-faint); display: flex; }
.composer-open-ico .mi { font-size: 20px; }
.composer--collapsed { padding: 12px 16px; }
.composer--collapsed .composer-open-row { display: flex; }
.composer--collapsed .composer-body { display: none; }

/* abas do feed */
.feed-tabs { margin: 0 0 18px; }

/* estado vazio */
.feed-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.feed-empty .mi { font-size: 34px; color: var(--text-faint); }
.feed-empty p { max-width: 40ch; }

/* post */
.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.post-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.post-head > a img, .post-head > a .avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font-size: 13px; flex-shrink: 0;
}
.post-id { flex: 1; min-width: 0; }
.post-author { display: flex; align-items: center; font-size: 14.5px; font-weight: 600; }
/* o sublinhado do hover fica só no nome — os selos ficam de fora */
.post-author:hover .post-author-name { text-decoration: underline; text-underline-offset: 3px; }
.post-meta { display: block; font-size: 12px; color: var(--text-faint); }
/* data da postagem no canto superior direito */
.post-date {
  align-self: flex-start;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* menu ⋯ de moderação (admin) */
.post-menu { position: relative; }
.post-menu-drop {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  z-index: 20;
  min-width: 190px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.post-menu-drop button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.post-menu-drop button:hover { background: var(--hover); color: var(--text); }
.post-menu-drop .mi { font-size: 16px; }

/* rótulo "Fixado" / "Arquivado" acima do cabeçalho do post */
.post-pinned-note {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.post-pinned-note svg { width: 12px; height: 12px; }
.post-pinned-note .mi { font-size: 14px; }
.post-pinned-note--archived { color: var(--text-faint); }

/* post arquivado (visão do admin) e aviso ao autor */
.post-card--archived { opacity: 0.55; }
.post-card--archived:hover { opacity: 0.8; }
.archived-flag { color: var(--gold); }
.post-archived-note {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.post-archived-note .mi { font-size: 20px; color: var(--gold); margin-top: 1px; }
.post-archived-note strong { display: block; color: var(--text); margin-bottom: 3px; }
.post-title { font-family: var(--font-display); font-size: 23px; font-weight: 600; margin-top: 14px; line-height: 1.25; }
.post-body { margin-top: 8px; }
.post-body p { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); margin-bottom: 10px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body strong { color: var(--text); }
.post-link { color: var(--accent); font-weight: 600; }
.post-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.post-image { margin-top: 14px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.post-image img { width: 100%; max-height: 380px; object-fit: cover; }

/* ações do post */
.post-actions {
  display: flex; gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.post-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.post-action .mi { font-size: 18px; }
.post-action:hover { background: var(--hover); color: var(--text); }
.post-action.liked { color: #ff3040; }
.post-action.liked .mi { font-variation-settings: "FILL" 1, "opsz" 20; }
.post-action[data-post-save] { margin-left: auto; padding: 6px 10px; }
.post-action.saved { color: var(--gold); }
.post-action.saved .mi { font-variation-settings: "FILL" 1, "opsz" 20; }

.private-note {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-faint);
}

/* comentários do post */
.post-comments { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
/* comentário minimalista (estilo Instagram): sem borda nem fundo */
.post-comment { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.post-comment-body { flex: 1; min-width: 0; }
.post-comment--reply { margin-left: 42px; }
.comment-line { font-size: 13.5px; line-height: 1.5; }
.comment-line .comment-author { font-weight: 600; margin-right: 6px; }
.comment-line .comment-author:hover { text-decoration: underline; text-underline-offset: 2px; }
.comment-meta-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.comment-meta-row button {
  font-size: 11.5px; font-weight: 600;
  color: var(--text-faint);
  transition: color 0.12s;
}
.comment-meta-row button:hover { color: var(--text); }
/* coração de curtir o comentário */
.comment-like {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  margin-top: 2px;
  color: var(--text-faint);
  transition: color 0.12s, transform 0.12s;
}
.comment-like .mi { font-size: 15px; }
.comment-like:hover { color: var(--text-muted); transform: scale(1.1); }
.comment-like.liked { color: #ff3040; }
.comment-like.liked .mi { font-variation-settings: "FILL" 1, "opsz" 20; }
/* barra "Respondendo a ..." acima do campo */
.post-reply-bar {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-muted);
}
.post-reply-bar[hidden] { display: none; }
.post-reply-bar button {
  margin-left: auto;
  display: flex;
  color: var(--text-faint);
}
.post-reply-bar button:hover { color: var(--text); }
.post-reply-bar .mi { font-size: 15px; }
/* post fixado pelo admin: destaque sutil em ocre */
.post-card--pinned { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
/* botão de enviar comentário: circular, discreto */
.post-comment-send {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  transition: transform 0.12s, opacity 0.12s;
}
.post-comment-send:hover { transform: scale(1.06); }
.post-comment-send .mi { font-size: 18px; }
.post-comment img, .post-comment .avatar-fallback {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 11px; flex-shrink: 0;
}
.post-comment .comment-text { font-size: 13.5px; margin-top: 2px; }
.post-comment-form { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.post-comment-form img, .post-comment-form .avatar-fallback {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 11px; flex-shrink: 0;
}
.post-comment-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 9px 16px;
  color: var(--text);
  font: inherit; font-size: 13.5px;
  outline: none;
}
.post-comment-input:focus { border-color: var(--line-strong); }

/* tag de marketplace e selo de fixado */
.market-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(35, 237, 153, 0.35);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
  transition: background 0.12s;
}
:root[data-theme="light"] .market-tag { border-color: rgba(0, 123, 118, 0.4); }
.market-tag:hover { background: var(--accent-soft); }
.market-tag .mi { font-size: 13px; }
.pinned-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}
.pinned-flag .mi { font-size: 13px; }

/* seções de posts no perfil */
.profile-section { margin-top: 30px; }
.profile-section > .kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.profile-section > .kicker .mi { font-size: 14px; }
.profile-section .post-card { margin-top: 12px; }

/* =========================================================
   ASSISTENTE (estilo GPT)
   Botão fixo no topo direito abre chat.html em nova aba:
   conversas recentes à esquerda + chat em tela cheia.
   ========================================================= */
/* símbolo (&) da eminente usado pelo Arauto */
.arauto-mark {
  display: block;
  width: 15px; height: 18px;
  background: currentColor;
  -webkit-mask: url(../img/logo-icon.svg) no-repeat center / contain;
  mask: url(../img/logo-icon.svg) no-repeat center / contain;
}

.chat-launcher {
  position: fixed;
  top: 14px; right: 26px;
  z-index: 210;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  border: 1px solid transparent;
  color: #171310;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.chat-launcher .arauto-mark { width: 17px; height: 20px; }
.chat-launcher:hover { filter: brightness(1.08); transform: translateY(-1px); }
.chat-launcher.active { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold); }

/* ações fixas na barra do topo: Avisos, Marketplace e Arauto */
.topbar-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.topbar-action {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  /* fundo circular sutil sempre visível */
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.topbar-action .mi { font-size: 19px; }
.topbar-action:hover { color: var(--text); border-color: var(--line-strong); }
/* aba ativa: neutra, sem cor de destaque */
.topbar-action.active { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }
/* arauto: fundo ocre da marca, com o símbolo claro por cima */
.topbar-arauto { background: var(--gold); border-color: transparent; }
.topbar-arauto .arauto-mark { width: 15px; height: 17px; background: #f4f2e9; }
.topbar-arauto:hover { background: #c99a5c; }
.topbar-arauto.active { background: var(--gold); border-color: var(--line-strong); }
:root[data-theme="light"] .topbar-arauto:hover { background: #a87f42; }
.quick-badge {
  position: absolute;
  top: 1px; right: 0;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: #ff5a5a;
  color: #fff;
  font-size: 9px; font-weight: 700;
  border: 2px solid var(--bg);
}

/* overlay do assistente: cobre a área de conteúdo (o menu fica),
   abrindo/fechando num círculo a partir do ícone do launcher   */
.chat-overlay {
  position: fixed;
  /* abre abaixo do menu superior: os ícones do topo continuam visíveis */
  top: var(--topbar-h); right: 0; bottom: 0;
  left: var(--sidebar-w);
  z-index: 205;
  /* círculo em tom mais claro que o fundo, abrindo com easing suave */
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  clip-path: circle(0px at var(--chat-origin, 24px 50%));
  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.chat-overlay.open {
  clip-path: circle(150% at var(--chat-origin, 24px 50%));
  pointer-events: auto;
}
.chat-overlay .chat-app { height: 100%; background: transparent; }
@media (max-width: 860px) { .chat-overlay { left: 0; } }

/* ---- layout da página do assistente ---- */
.chat-app {
  display: flex;
  height: 100vh; height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

/* coluna esquerda: conversas recentes */
.chat-side {
  width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 12px 14px;
  /* mais clara que a barra lateral fixa da plataforma */
  background: var(--surface-2);
  border-right: 1px solid var(--line);
}
.chat-side-head { display: flex; align-items: center; justify-content: space-between; }
.chat-side-head .brand { padding: 4px 6px 10px; }
.chat-side-head .brand img { height: 14px; }
.chat-side-close { display: none; }

.chat-new-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  transition: background 0.12s, border-color 0.12s;
}
.chat-new-btn:hover { background: var(--hover); border-color: var(--accent); }
.chat-new-btn .mi { font-size: 17px; color: var(--accent); }

.chat-thread-list {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px;
}
.chat-group-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 12px 10px 6px;
}
.chat-thread {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px; color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.chat-thread:hover { background: var(--hover); color: var(--text); }
.chat-thread.active { background: var(--surface-2); color: var(--text); }
.chat-thread-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-del { opacity: 0; width: 26px; height: 26px; flex-shrink: 0; }
.chat-thread-del .mi { font-size: 15px; }
.chat-thread:hover .chat-thread-del { opacity: 1; }
.chat-side-empty { font-size: 12.5px; color: var(--text-faint); padding: 12px 10px; }

.chat-side-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line);
  padding: 12px 8px 0;
}
.chat-side-user {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
  transition: color 0.12s;
}
.chat-side-user:hover { color: var(--text); }
.chat-side-user svg { width: 14px; height: 14px; }
/* "voltar" no canto superior esquerdo do arauto */
.chat-back {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.chat-side-backdrop { display: none; }

/* área principal do chat */
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-main-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-menu-btn { display: none; }
.chat-thread-body {
  width: min(760px, 100%);
  margin-inline: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.chat-main .chat-messages { padding: 28px 22px; }

/* tela inicial (sem conversa aberta) */
.chat-welcome { margin: auto; text-align: center; max-width: 540px; padding: 20px; }
.chat-avatar--big { width: 52px; height: 52px; margin: 0 auto 18px; }
.chat-avatar--big svg { width: 26px; height: 26px; }
.chat-welcome h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.chat-welcome p { color: var(--text-muted); font-size: 14px; margin-top: 8px; }
.chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.chat-suggestion {
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 12.5px; color: var(--text-muted);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.chat-suggestion:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.chat-composer-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-disclaimer { font-size: 11px; color: var(--text-faint); }

.chat-panel-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat-panel-title strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.chat-panel-title span { font-size: 11px; color: var(--text-faint); }

.chat-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: #171310;
  flex-shrink: 0;
}
.chat-avatar .arauto-mark { width: 11px; height: 13px; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.chat-msg--user { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.chat-user-avatar, .avatar-fallback.chat-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  font-size: 11px;
}
.chat-bubble {
  max-width: 84%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.chat-msg--assistant { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg-body { min-width: 0; flex: 1; padding-top: 3px; }
.chat-msg-body p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* aulas sugeridas: cards com destaque — capa grande e descrição */
.chat-results { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.chat-result {
  display: flex; align-items: center; gap: 14px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}
.chat-result:hover { border-color: var(--accent); background: var(--hover); }
.chat-result img {
  width: 148px;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.chat-result-info { min-width: 0; }
.chat-result-title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.chat-result-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
  margin-top: 3px;
}
.chat-result-meta { display: block; font-size: 11px; color: var(--text-faint); margin-top: 5px; }
/* aula já assistida: tag de concluída no card sugerido */
.chat-result-done {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700;
  color: var(--accent);
  border: 1px solid rgba(35, 237, 153, 0.4);
  border-radius: 99px;
  padding: 1px 8px;
  margin-left: 8px;
  vertical-align: 1px;
}
.chat-result-done svg { width: 11px; height: 11px; }
.chat-result-done .mi { font-size: 12px; }

/* status "pensando" antes da resposta */
.chat-thinking { display: inline-flex; align-items: center; gap: 8px; }
.chat-thinking-label {
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
  animation: thinkingPulse 1.4s infinite ease-in-out;
}
@keyframes thinkingPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* indicador de digitação */
.chat-dots { display: inline-flex; gap: 4px; padding: 6px 2px; }
.chat-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
  animation: chatDot 1.1s infinite ease-in-out;
}
.chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatDot {
  0%, 60%, 100% { opacity: 0.3; translate: 0 0; }
  30% { opacity: 1; translate: 0 -3px; }
}

/* composer integrado: caixa única com o botão de enviar dentro */
.chat-composer {
  display: flex; align-items: flex-end; gap: 10px;
  width: min(760px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 6px 6px 6px 16px;
  transition: border-color 0.15s;
}
.chat-composer:focus-within { border-color: var(--line-strong); }
.chat-input {
  flex: 1;
  resize: none;
  max-height: 140px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 8px 8px 8px 0;
  color: var(--text);
  font: inherit; font-size: 13.5px; line-height: 1.5;
  outline: none;
  /* barra de rolagem fina e discreta quando o texto cresce */
  transition: border-color 0.15s;
}
.chat-input::placeholder { color: var(--text-faint); }
.chat-send {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  flex-shrink: 0;
  transition: filter 0.12s, transform 0.12s;
}
.chat-send:hover { filter: brightness(1.08); }
.chat-send:active { transform: scale(0.94); }
.chat-send .mi { font-size: 18px; }

@media (max-width: 640px) {
  .chat-launcher { top: 12px; right: 16px; }
}

/* mobile: lista de conversas vira menu off-canvas */
@media (max-width: 860px) {
  .chat-side {
    position: fixed; inset: 0 auto 0 0;
    z-index: 220;
    translate: -100% 0;
    transition: translate 0.2s ease;
  }
  .chat-app.side-open .chat-side { translate: 0 0; }
  .chat-side-close { display: flex; }
  .chat-menu-btn { display: flex; }
  .chat-side-backdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 215;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .chat-app.side-open .chat-side-backdrop { opacity: 1; pointer-events: all; }
}

/* =========================================================
   ACESSO — dias restantes e vitalício (∞)
   ========================================================= */
.avatar-wrap { position: relative; flex-shrink: 0; }
.lifetime-badge {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--bg);
}
.lifetime-badge .mi { font-size: 16px; font-weight: 600; }

/* selo ∞ junto ao nome — mesmo formato do selo de verificado */
.lifetime-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  margin-left: 5px;
  vertical-align: 0;
  flex-shrink: 0;
}
.lifetime-seal .mi { font-size: 11px; font-weight: 700; }

.access-card {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.access-card > .mi { font-size: 26px; flex-shrink: 0; }
.access-card strong { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.access-card span { font-size: 12.5px; color: var(--text-muted); }
.access-card--lifetime > .mi { color: var(--gold); }
.access-card--lifetime { border-color: rgba(185, 141, 81, 0.45); }
.access-card--lifetime strong { color: var(--gold); }
.access-card--ok > .mi { color: var(--text-muted); }
.access-card--warn > .mi { color: var(--gold); }
.access-card--warn { border-color: rgba(185, 141, 81, 0.45); }
.access-card--warn strong { color: var(--gold); }
.access-card--danger > .mi { color: #ff5a5a; }
.access-card--danger { border-color: rgba(255, 90, 90, 0.4); }
.access-card--danger strong { color: #ff6b6b; }

.tag-warn { color: var(--gold); border-color: rgba(185, 141, 81, 0.45); }
.tag-lifetime { color: var(--gold); border-color: rgba(185, 141, 81, 0.45); }
.tag-danger { color: #ff6b6b; border-color: rgba(255, 90, 90, 0.4); }

/* =========================================================
   ADMIN — detalhes (modal de leitura)
   ========================================================= */
.modal--wide { width: min(640px, 94vw); }
.modal-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head-row h3 { margin-bottom: 0; }
.detail-section { margin-bottom: 22px; }
.detail-section > .kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.detail-section > .kicker .mi { font-size: 14px; }
.detail-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.detail-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.detail-list li .mi { font-size: 15px; color: var(--accent); }
.detail-comment {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.detail-comment p { font-size: 13.5px; color: var(--text); margin-top: 3px; }

/* =========================================================
   FORMULÁRIO — estilo Typeform, tela cheia
   ========================================================= */
.form-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.form-top {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 28px;
}
.form-logo img { height: 13px; width: auto; }
:root[data-theme="light"] .form-logo img { filter: invert(1) hue-rotate(180deg); }
.form-progress {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
.form-progress span {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.4s ease;
}
.form-back {
  position: fixed;
  top: 54px; left: 28px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-faint);
  transition: color 0.12s;
}
.form-back:hover { color: var(--text); }
.form-back .mi { font-size: 15px; }
.form-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px 80px;
}
.form-screen {
  width: min(640px, 100%);
  animation: formIn 0.3s ease;
}
@keyframes formIn {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
.form-counter {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}
.form-counter .mi { font-size: 14px; }
.form-question {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.form-desc { color: var(--text-muted); font-size: 15px; margin-top: 12px; max-width: 54ch; }
.form-input {
  width: 100%;
  margin-top: 26px;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  padding: 10px 2px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 21px;
  outline: none;
  transition: border-color 0.15s;
}
.form-input:focus { border-bottom-color: var(--accent); }
.form-input::placeholder { color: var(--text-faint); }
.form-input--long { resize: none; line-height: 1.5; }
.form-choices { display: flex; flex-direction: column; gap: 9px; margin-top: 26px; max-width: 460px; }
.form-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 15px;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.form-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.form-choice.selected { border-color: var(--accent); background: var(--accent-soft); }
.form-choice-key {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.form-choice.selected .form-choice-key { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.form-nav-row { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.form-hint { font-size: 12px; color: var(--text-faint); }
.form-screen--end { text-align: center; }
.form-screen--end .form-desc { margin-inline: auto; }
.form-screen--end .btn { margin-top: 26px; }
.form-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  margin-bottom: 22px;
}
.form-check .mi { font-size: 32px; font-weight: 600; }

/* abas do admin podem quebrar linha */
.tabs { flex-wrap: wrap; }
.form-back[hidden] { display: none; }

/* =========================================================
   ALERTAS FIXOS DO TOPO
   Barra discreta abaixo da navegação; cor de destaque,
   link opcional e contagem regressiva opcional.
   ========================================================= */
.alert-stack { position: sticky; top: var(--topbar-h); z-index: 39; }
.alert-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 36px;
  font-size: 13px; font-weight: 500;
  /* fundo 100% preenchido e cor do texto definidos inline
     (hexadecimal do admin + contraste automático)          */
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.alert-ico { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.9; }
.alert-text { flex: 1; min-width: 0; }
/* X para dispensar o aviso fixo */
.alert-close {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  color: inherit;
  opacity: 0.65;
  transition: opacity 0.12s, background 0.12s;
}
.alert-close .mi { font-size: 16px; }
.alert-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.alert-timer {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.alert-timer-date {
  opacity: 0.72;
  padding-right: 8px;
  border-right: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.alert-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
  padding: 4px 8px 4px 13px;
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background 0.12s;
}
.alert-link svg { width: 13px; height: 13px; }
.alert-link:hover { background: color-mix(in srgb, currentColor 24%, transparent); }

/* mobile: texto ocupa a primeira linha inteira; timer e link descem */
@media (max-width: 860px) {
  .alert-bar { padding: 8px 18px; flex-wrap: wrap; row-gap: 8px; }
  .alert-text { flex: 1 1 calc(100% - 30px); }
  .alert-timer { margin-left: 29px; }
}

/* =========================================================
   TRILHAS — Trilha > Módulo > Aula > Material
   ========================================================= */
.trilha-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 40px 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.trilha-head:first-child { margin-top: 10px; }
.trilha-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.trilha-head .chip { align-self: center; }

/* gerenciador de trilhas no admin */
.trilha-manager {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.trilha-manager > .kicker { margin-right: 6px; }
.trilha-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 6px 4px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 12.5px; font-weight: 600;
}
.trilha-chip .icon-btn { width: 24px; height: 24px; }
.trilha-chip .icon-btn .mi { font-size: 14px; }

/* miniatura de capa nas tabelas do admin (preview do conteúdo) */
.admin-thumb {
  width: 84px; height: 48px;
  flex-shrink: 0; /* dentro da planilha (flex) a miniatura não pode achatar */
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  display: block;
}
/* mesma proporção 3:4 do pôster que o aluno vê na fileira */
.admin-thumb--poster { width: 44px; height: 59px; }

/* =========================================================
   ADMIN — navegação por setores
   ========================================================= */
/* navegação do painel: barra plana com sublinhado (dois níveis —
   setor em cima, abas do setor embaixo), sem caixas nem pílulas */
.admin-nav { margin: 20px 0 22px; }
.admin-nav-row {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.admin-nav-row--setor { border-bottom-color: var(--line-strong); }
.admin-nav-row--aba { padding-top: 2px; }
.admin-nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.admin-nav-row--aba .admin-nav-btn { padding: 10px 13px; font-size: 13px; }
.admin-nav-btn .mi { font-size: 17px; }
.admin-nav-btn:hover { color: var(--text); }
.admin-nav-btn.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.admin-nav-row--aba .admin-nav-btn.active { color: var(--accent); }

/* =========================================================
   ADMIN — DASHBOARD (ao vivo, acessos e avaliações)
   ========================================================= */
.dash-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.dash-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.dash-card--chart { margin-bottom: 14px; }
.dash-mini-card { margin-bottom: 14px; }
.dash-mini-row { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.dash-mini { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.dash-mini b { font-family: var(--font-display); font-size: 16px; color: var(--text); margin-right: 3px; }
.dash-big {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600;
  line-height: 1.15;
  margin-top: 8px;
}
.dash-sub { font-size: 12px; color: var(--text-muted); }

/* alunos online agora */
.dash-live-row { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.dash-live-row b { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.15; }
.dash-live-label { font-size: 12.5px; color: var(--text-muted); max-width: 90px; line-height: 1.3; }
.dash-live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: dashPulse 1.6s infinite ease-out;
}
@keyframes dashPulse {
  0% { box-shadow: 0 0 0 0 rgba(35, 237, 153, 0.45); }
  70% { box-shadow: 0 0 0 9px rgba(35, 237, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 237, 153, 0); }
}
.dash-online-row { display: flex; align-items: center; margin-top: 12px; }
.dash-online-avatar, .avatar-fallback.dash-online-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface);
  margin-right: -7px;
  font-size: 10px;
}
.dash-online-names { font-size: 11.5px; color: var(--text-muted); margin-left: 14px; }

/* gráfico de barras */
.dash-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-periods { display: flex; gap: 6px; }
.dash-bars {
  display: flex; align-items: flex-end; gap: 5px;
  height: 190px;
  margin-top: 18px;
}
.dash-bar-col {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-width: 0;
}
.dash-bar-col span {
  width: 100%;
  max-width: 46px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--accent), var(--teal));
  opacity: 0.75;
  transition: opacity 0.12s;
}
.dash-bar-col:hover span { opacity: 1; }
.dash-bar-col i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
  height: 13px;
  white-space: nowrap;
}
.dash-bar-col::before {
  content: attr(data-v);
  position: absolute;
  top: -4px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.dash-bar-col:hover::before { opacity: 1; }

/* ranking de aulas mais bem avaliadas */
.dash-ranking { display: flex; flex-direction: column; margin-top: 10px; }
.dash-rank-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.dash-rank-row:last-child { border-bottom: 0; }
.dash-rank-row:hover { background: var(--hover); }
.dash-rank-pos {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--text-faint);
  width: 22px; flex-shrink: 0;
}
.dash-rank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-rank-title {
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-rank-meta { font-size: 11px; color: var(--text-muted); }
.dash-rank-stars { display: inline-flex; gap: 1px; flex-shrink: 0; }
.dash-rank-stars .mi { font-size: 15px; color: var(--text-faint); opacity: 0.45; }
.dash-rank-stars .mi.filled { color: var(--gold); opacity: 1; font-variation-settings: "FILL" 1; }
.dash-rank-avg { font-family: var(--font-display); font-size: 15px; flex-shrink: 0; }
.dash-rank-votes { font-size: 11px; color: var(--text-faint); flex-shrink: 0; width: 86px; text-align: right; }

@media (max-width: 700px) {
  .dash-rank-votes { display: none; }
  .dash-bars { height: 150px; }
}

/* =========================================================
   SUPORTE — botão flutuante e chamados
   ========================================================= */
.support-fab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 200;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 13px; font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: color 0.12s, border-color 0.12s, transform 0.12s;
}
.support-fab .mi { font-size: 17px; }
.support-fab:hover { color: var(--text); border-color: var(--text-muted); transform: translateY(-1px); }

.support-sent { text-align: center; padding: 10px 6px 4px; }
.support-sent .form-check { width: 52px; height: 52px; margin-bottom: 14px; }
.support-sent .form-check .mi { font-size: 26px; }
.support-sent h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; }

/* cartão de chamado (perfil do aluno) */
.ticket-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 12px;
}
.ticket-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-head strong { font-size: 14.5px; }
.ticket-date { font-size: 11.5px; color: var(--text-faint); margin-left: auto; }
.ticket-text { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.ticket-image {
  max-width: 280px;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-top: 10px;
}
.ticket-reply {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ticket-reply-from { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.ticket-reply p { font-size: 13.5px; margin-top: 4px; line-height: 1.6; }
.ticket-waiting { font-size: 12.5px; color: var(--text-faint); margin-top: 10px; font-style: italic; }

/* =========================================================
   PROGRESSO DO MÉTODO — tooltip e certificado
   ========================================================= */
.progress-card { position: relative; }
.progress-tip {
  position: absolute;
  left: 8px; right: 8px;
  bottom: calc(100% + 8px);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity 0.15s ease, translate 0.15s ease;
  z-index: 60;
}
.progress-tip b { color: var(--text); }
.progress-card:hover .progress-tip { opacity: 1; translate: 0 0; }
.progress-cert-btn { width: 100%; justify-content: center; margin-top: 10px; }

.cert-overlay {
  position: fixed; inset: 0;
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 20px;
}
.cert-box { width: min(640px, 100%); }
.certificate {
  background: var(--surface);
  border: 1px solid var(--gold);
  outline: 4px solid var(--surface);
  outline-offset: -10px;
  border-radius: var(--radius);
  padding: 48px 44px 36px;
  text-align: center;
}
.cert-logo { height: 16px; margin: 0 auto 26px; }
:root[data-theme="light"] .cert-logo { filter: invert(1) hue-rotate(180deg); }
.certificate h1 {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 600;
  margin: 14px 0 12px;
}
.certificate p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.certificate p b { color: var(--text); }
.cert-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-muted);
}
.cert-sign { text-align: right; font-family: var(--font-display); font-size: 15px; color: var(--text); }
.cert-sign i { font-family: var(--font-body); font-style: normal; font-size: 11px; color: var(--text-faint); }
.cert-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* impressão: só o certificado sai no papel */
@media print {
  body > *:not(.cert-overlay) { display: none !important; }
  .cert-overlay { position: static; background: none; backdrop-filter: none; padding: 0; }
  .cert-actions { display: none; }
  .certificate { border-color: #b98d51; }
}

/* campo de cor no modal: presets do sistema + hexadecimal livre */
/* campo de imagem: prévia + escolher do computador + endereço */
.img-field { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; }
.img-preview {
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
}
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-preview--vazia { color: var(--text-faint); }
.img-preview--vazia .mi { font-size: 26px; }
.img-preview--carregando { opacity: 0.45; }
.img-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.img-hint { font-size: 11.5px; }
.img-url {
  grid-column: 2;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--text);
  font: inherit; font-size: 13px;
  outline: none;
}
.img-url:focus { border-color: var(--line-strong); }

.color-field { display: flex; align-items: center; gap: 8px; }
.color-swatch {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.1s;
}
.color-swatch:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line-strong); }
.color-field .color-hex {
  flex: 1;
  font-family: var(--font-mono);
}

/* grupo de checkboxes no modal do admin (seções do alerta) */
.check-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.check-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s;
}
.check-item:hover { color: var(--text); }
.check-item input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* picker do modal: busca + lista de opções marcáveis (vínculos da aula) */
.picker { display: flex; flex-direction: column; gap: 8px; }
.picker-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 13px;
}
.picker-search:focus { outline: none; border-color: var(--line-strong); }
.picker-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 150px; overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.picker-empty { margin: 0; }

/* planilha de conteúdo: trilha → módulo → aulas */
.sheet { display: flex; flex-direction: column; gap: 18px; }
.sheet-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.sheet-group-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.sheet-group-head .td-actions { margin-left: auto; }
.sheet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row--mod { cursor: pointer; transition: background 0.12s; }
.sheet-row--mod:hover { background: var(--hover); }
.sheet-caret {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.15s;
}
.sheet-row--mod.open .sheet-caret { transform: rotate(90deg); }
.sheet-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheet-main strong { font-size: 14px; }
.sheet-row .td-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sheet-cell { flex-shrink: 0; }
.sheet-lessons {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}
.sheet-lessons:last-child { border-bottom: 0; }
/* a aula recua menos porque o punho já ocupa a coluna da esquerda */
.sheet-row--lesson { padding-left: 34px; }
.sheet-num {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--text-faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.sheet-empty { padding: 12px 16px; margin: 0; }
.sheet-lessons .sheet-empty { padding-left: 52px; }

/* punho de 6 pontinhos: discreto até o mouse passar pela linha */
.sheet-grip {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 26px; flex-shrink: 0;
  margin-left: -4px;
  color: var(--text-faint);
  opacity: 0.35;
  cursor: grab;
  transition: opacity 0.12s, color 0.12s;
}
.sheet-grip svg { fill: currentColor; }
.sheet-grip:active { cursor: grabbing; }
.sheet-row:hover > .sheet-grip,
.sheet-group-head:hover > .sheet-grip,
.sheet-grip:focus-visible { opacity: 1; color: var(--text-muted); }
.sheet-row.dragging, .sheet-group.dragging { opacity: 0.45; }
/* onde a linha vai cair */
.sheet-row.drop-before, .sheet-group.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.sheet-row.drop-after, .sheet-group.drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* popup do "N vínculos": lista o que está preso na aula */
.link-pop { position: relative; display: inline-block; }
.link-pop-card {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  z-index: 30;
  display: none; flex-direction: column; gap: 5px;
  min-width: 200px; max-width: 300px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  font-size: 12px; line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
  white-space: normal;
}
.link-pop:hover .link-pop-card,
.link-pop:focus-visible .link-pop-card { display: flex; }
.link-pop-item b {
  display: inline-block;
  margin-right: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}

/* aba Alunos: progresso em aulas concluídas */
.progress-cell { display: flex; flex-direction: column; gap: 5px; min-width: 110px; }
.progress-cell-label { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.progress-cell-label b { color: var(--text); }
.progress-cell-track {
  height: 4px; border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.progress-cell-track span {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 99px;
}

/* registro de atividades do aluno (modal de detalhe) */
.activity-list { display: flex; flex-direction: column; margin-top: 8px; max-height: 300px; overflow-y: auto; }
.activity-list--logins { max-height: 180px; }
.activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.activity-row:last-child { border-bottom: 0; }
.activity-icon { color: var(--accent); flex-shrink: 0; display: flex; }
.activity-icon .mi { font-size: 16px; }
.activity-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.activity-type { font-size: 12.5px; font-weight: 600; }
.activity-label {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-at {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- onboarding de primeiro login ---------- */
.onboard-overlay {
  position: fixed; inset: 0;
  z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4, 7, 10, 0.82);
  backdrop-filter: blur(3px);
}
.onboard-card {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  /* no claro, o bege da marca — nunca branco puro */
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 26px 28px 22px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] .onboard-card { background: var(--bg-soft); }
:root[data-theme="light"] .onboard-overlay { background: rgba(10, 18, 24, 0.55); }
:root[data-theme="light"] .onboard-card .form-field input,
:root[data-theme="light"] .onboard-card .form-field select,
:root[data-theme="light"] .onboard-card .form-field textarea { background: var(--surface-2); }

/* escolha de tema: dois cartões com uma amostra do resultado */
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left;
  padding: 14px 15px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}
.theme-opt:hover { border-color: var(--text-muted); }
.theme-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.theme-opt strong { font-size: 14.5px; }
.theme-opt-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.theme-swatch {
  width: 100%; height: 62px;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 8px;
  padding: 12px 11px;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.theme-swatch--dark { background: #141515; border-color: rgba(250, 249, 245, 0.14); }
.theme-swatch--light { background: #f4f3ef; border-color: rgba(10, 18, 24, 0.14); }
.theme-swatch-bar { height: 6px; border-radius: 99px; width: 100%; }
.theme-swatch-bar--curta { width: 58%; }
.theme-swatch--dark .theme-swatch-bar { background: rgba(230, 228, 215, 0.55); }
.theme-swatch--dark .theme-swatch-bar--curta { background: #23ed99; }
.theme-swatch--light .theme-swatch-bar { background: rgba(10, 18, 24, 0.45); }
.theme-swatch--light .theme-swatch-bar--curta { background: #007b76; }
@media (max-width: 480px) { .theme-pick { grid-template-columns: 1fr; } }
.onboard-progress { margin-bottom: 22px; }
.onboard-progress-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.onboard-title { font-family: var(--font-display); font-size: 24px; margin-bottom: 6px; }
.onboard-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
.onboard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 22px;
}
.onboard-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.onboard-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.onboard-chip .mi { font-size: 15px; }
.onboard-chip:hover { border-color: var(--text-muted); color: var(--text); }
.onboard-chip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.onboard-card .form-field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit; font-size: 14px;
  outline: none;
}

/* disponibilidade do @ (onboarding e configurações da conta) */
.handle-status {
  display: block;
  min-height: 15px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
}
.handle-status--checking { color: var(--text-faint); }
.handle-status--free { color: var(--accent); }
.handle-status--taken,
.handle-status--invalid { color: var(--danger); }

/* tour guiado pela plataforma */
.tour-ring {
  position: fixed;
  z-index: 610;
  border: 2px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(4, 7, 10, 0.72);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-card {
  position: fixed;
  z-index: 620;
  width: 340px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-card h3 { font-family: var(--font-display); font-size: 17px; margin: 8px 0 6px; }
.tour-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.tour-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px;
}
.tour-card-btns { display: inline-flex; gap: 8px; }

/* botão temporário de reiniciar o onboarding (acima do modo aluno) */

/* ferramentas de bastidor no cabeçalho do painel — discretas,
   sem competir com as ações reais da tela                     */
.admin-tools { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.admin-tools .link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px;
  color: var(--text-faint);
}
.admin-tools .link-btn:hover { color: var(--text-muted); }
.admin-tools .link-btn .mi { font-size: 15px; }
.admin-tools .link-btn--danger:hover { color: var(--danger); }

/* configurações da conta */
.conta { max-width: 680px; margin: 0 auto; }
.conta-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 18px;
}
.conta-card-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  margin-bottom: 18px;
}
.conta-card-title .mi { font-size: 18px; color: var(--gold); }
.conta-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.conta-avatar-img, .avatar-fallback.conta-avatar-img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; font-size: 22px;
}
.conta-avatar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.conta-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .conta-grid, .conta-grid--3 { grid-template-columns: 1fr; } }
.conta-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin-top: 6px;
}
.conta-feedback { font-size: 12.5px; color: var(--accent); }
.conta-feedback.erro { color: #ff5a5a; }
.conta-card--logout {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.conta-card--logout .conta-card-title { margin-bottom: 6px; }
.user-settings { text-decoration: none; display: flex; }
.user-settings .mi { font-size: 17px; }
/* engrenagem + tema lado a lado, colados à direita */
.user-settings + .user-admin { margin-left: 2px; }

/* páginas legais (termos e privacidade) */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 120px;
  line-height: 1.7;
}

/* topo fixo dos documentos legais: marca à esquerda, alternância
   Termos ↔ Privacidade no centro, voltar ao login à direita */
.legal-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 18px 36px;
  background: color-mix(in srgb, var(--bg, #0c1116) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.legal-brand { display: flex; align-items: center; padding: 6px 0; margin-right: 22px; }
.legal-brand-img { height: 14px; width: auto; display: block; }
/* a arte é creme (feita para fundo escuro) — no tema claro, escurece */
html[data-theme="light"] .legal-brand-img { filter: brightness(0.25); }
.legal-tabs { display: flex; gap: 4px; margin: 0 auto; }
.legal-tabs a {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
}
.legal-tabs a:hover { color: var(--text); background: var(--hover, rgba(255,255,255,0.06)); }
.legal-tabs a.active { color: var(--text); background: var(--hover, rgba(255,255,255,0.09)); }
.legal-topbar .btn { white-space: nowrap; }

/* sumário clicável no topo do documento */
.legal-sumario {
  margin: 26px 0 34px;
  padding: 18px 20px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  background: color-mix(in srgb, var(--text, #fff) 3%, transparent);
}
.legal-sumario .kicker { display: block; margin-bottom: 10px; }
.legal-sumario ol {
  margin: 0; padding: 0;
  list-style: none;
  columns: 2; column-gap: 28px;
}
.legal-sumario li { break-inside: avoid; margin-bottom: 6px; }
.legal .legal-sumario a {
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
}
.legal .legal-sumario a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .legal-sumario ol { columns: 1; }
  .legal-tabs a { padding: 7px 10px; font-size: 12.5px; }
  .legal-topbar { gap: 10px; padding: 12px 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.legal h2 { scroll-margin-top: 84px; }

.legal-back {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
}
.legal-back:hover { color: var(--text); }
/* links legais: sozinhos na base da coluna, centralizados com o conteúdo */
.login-legal {
  position: absolute;
  left: 50%; bottom: 20px;
  translate: -50% 0;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  text-align: center;
  white-space: nowrap;
  opacity: 0.75;
}
.login-legal a { color: var(--text-faint); text-decoration: none; }
.login-legal a:hover { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.legal h1 {
  font-family: var(--font-display);
  font-size: 34px;
  margin: 10px 0 4px;
}
.legal-updated { font-size: 12.5px; color: var(--text-faint); margin-bottom: 28px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 34px 0 10px;
}
.legal p { margin-bottom: 14px; font-size: 14.5px; color: var(--text-muted); }
.legal p strong { color: var(--text); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* dashboard: avisos fixos em vigor */
.dash-fixed-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dash-fixed-row { display: flex; align-items: center; gap: 10px; }
.dash-fixed-text { font-size: 13px; color: var(--text-muted); min-width: 0; }
.dash-fixed-row .tag { margin-left: auto; flex-shrink: 0; }

/* =========================================================
   PAINEL DE GESTÃO — produtos, turmas, e-mails, integrações,
   certificados, relatórios, moderação, configurações
   ========================================================= */

/* barra do topo de cada bloco, com vários botões à direita */
.admin-bar-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.danger-text { color: var(--danger) !important; }
.text-warn { color: var(--gold); }

/* aviso honesto: a tela existe, a execução depende do servidor */
.backend-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 4px;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12.5px; line-height: 1.55;
}
.backend-note .mi { font-size: 17px; color: var(--gold); flex-shrink: 0; }

/* estado vazio dentro de uma aba */
.admin-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 38px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: center;
}
.admin-empty p { color: var(--text-muted); font-size: 13.5px; max-width: 460px; }

/* sub-navegação dentro de uma aba (E-mails) */
.admin-subnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.admin-subnav-btn {
  padding: 9px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.admin-subnav-btn:hover { color: var(--text); }
.admin-subnav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* cartão de formulário (configurações, integrações, certificado) */
.admin-form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
}
.admin-form-card .form-field { margin-bottom: 14px; }
.admin-form-card .modal-actions { margin-top: 4px; }
/* opção única no cartão: ocupa a linha inteira em vez de virar coluna estreita */
.admin-form-card .check-group { grid-template-columns: 1fr; margin-bottom: 14px; }
.admin-form-card .check-item input { flex-shrink: 0; }
.mini-input {
  width: 74px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--text);
  font: inherit; font-size: 13px;
  outline: none;
}
.copy-field { display: flex; gap: 8px; align-items: center; }
.copy-field input { flex: 1; }

/* filtros da base de alunos */
.admin-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.admin-filters select,
.admin-search {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font: inherit; font-size: 13px;
  outline: none;
}
.admin-search { flex: 1; min-width: 220px; }
.admin-search:focus, .admin-filters select:focus { border-color: var(--line-strong); }

/* barra de ações em massa */
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.bulk-bar--off { display: none; }
.th-check { width: 34px; }
.th-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.admin-table tr.row--on { background: var(--accent-soft); }
.tag-soft {
  color: var(--text-muted);
  border-color: var(--line-strong);
  margin-right: 4px;
}
.mono-tag {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text);
}

/* pré-visualização do e-mail e payload do webhook */
.email-preview {
  width: 100%; height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #141515;
}
.payload-box {
  max-height: 380px; overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* status dos registros de DNS do e-mail */
.dns-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.dns-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-muted);
}
.dns-row strong { color: var(--text); min-width: 62px; }
.dns-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--danger);
}
.dns-row--ok .dns-dot { background: var(--accent); }

/* folha do certificado */
.cert-sheet {
  border: 1px solid var(--cert-cor, var(--gold));
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 40px 34px 30px;
  text-align: center;
}
.cert-kicker {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cert-cor, var(--gold));
}
.cert-sheet h2 {
  font-family: var(--font-display);
  font-size: 22px; margin: 12px 0 22px;
  color: var(--text);
}
.cert-nome {
  font-family: var(--font-display);
  font-size: 30px; color: var(--text);
  border-bottom: 1px solid var(--line);
  display: inline-block; padding-bottom: 8px; margin-bottom: 16px;
}
.cert-texto { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 440px; margin: 0 auto; }
.cert-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-top: 34px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-faint);
}

/* ficha do aluno */
.ficha-top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.ficha-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 11px 13px;
}
.ficha-stat > div { margin-top: 6px; font-size: 14px; color: var(--text); }
.nota-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.nota-form textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit; font-size: 13.5px;
  outline: none; resize: vertical;
}
.nota-form .btn { align-self: flex-start; }

/* etiquetas de produto/drip na planilha de conteúdo */
.sheet-cell--tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 240px; }

/* =========================================================
   REFLEXOS NO LADO DO ALUNO
   ========================================================= */

/* conteúdo bloqueado (produto não comprado ou drip) */
.locked-box {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.locked-box .mi { font-size: 24px; color: var(--gold); }
.locked-box strong { display: block; font-size: 15px; margin-bottom: 5px; }
.locked-box span { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.meta-tag--lock { color: var(--gold); display: inline-flex; align-items: center; gap: 5px; }
.meta-tag--lock .mi { font-size: 14px; }
.module-sub--locked .module-sub-title,
.module-section--locked .module-banner { opacity: 0.62; }
.module-section--locked .module-banner { pointer-events: none; }

/* post aguardando aprovação da moderação */
.post-pinned-note--pending { color: var(--gold); }
.post-action--report { margin-left: auto; }
.post-action--report:hover { color: var(--danger); }

/* barra de "entrar como aluno" */
.impersona-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 700;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: var(--gold);
  color: #141515;
  font-size: 13px; font-weight: 500;
}
.impersona-bar .mi { font-size: 18px; }
.impersona-bar strong { font-weight: 700; }
.impersona-bar .btn { margin-left: auto; background: #141515; color: var(--text); }
body.has-impersona-bar { padding-top: 40px; }

/* modo manutenção */
.maintenance {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.maintenance-box {
  max-width: 440px; text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 40px 34px;
}
.maintenance-box h1 { font-family: var(--font-display); font-size: 26px; margin: 12px 0 10px; }
.maintenance-box p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }