/* ── FONTES ── */
@font-face { font-family:'Mosvita'; src:url('../fonts/mosvita/mosvita-regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Mosvita'; src:url('../fonts/mosvita/mosvita-medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Mosvita'; src:url('../fonts/mosvita/mosvita-bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Mosvita'; src:url('../fonts/mosvita/mosvita-black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }

/* ── TOKENS (mesma paleta do site principal do Maranatha School) ── */
:root {
  --dark:#071C16; --dark2:#0a2a1f; --dark3:#0e3328;
  --teal:#30CFA4; --teal2:#45d4ad; --mint:#F4FFFA;
  --fg:#0B2019; --fg2:#3f5d54; --fg3:#5c7268;
  --border:rgba(7,28,22,0.10); --border2:rgba(7,28,22,0.18);
  --maxw:960px;
  --radius:16px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--dark); color:var(--mint);
  font-family:'Mosvita',sans-serif; font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100svh; overflow-x:hidden;
}
button, input { font-family:inherit; }
a { color:inherit; }
::selection { background:var(--teal); color:var(--dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.bg-glow {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 50% -5%, rgba(48,207,164,0.16) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 0% 30%, rgba(48,207,164,0.08) 0%, transparent 60%);
}

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; position:relative; z-index:1; }

/* ── ÍCONES ── */
.icon { width:18px; height:18px; stroke:currentColor; fill:none; flex-shrink:0; display:inline-block; vertical-align:-3px; }

/* ── TOPO ── */
.topo { padding:30px 0; position:relative; z-index:1; }
.topo__conteudo { display:flex; justify-content:center; }
.topo__logo { height:173px; width:auto; max-width:80vw; }

@media (max-width:480px) {
  .topo { padding:22px 0; }
  .topo__logo { height:140px; }
}

.main-conteudo { padding-bottom:80px; position:relative; z-index:1; }

/* ── TIPOGRAFIA ── */
.kicker { font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; display:block; }
.titulo-xl { font-weight:900; font-size:clamp(28px,5vw,42px); line-height:1.08; letter-spacing:-0.01em; margin-bottom:14px; }
.titulo-lg { font-weight:900; font-size:clamp(24px,4vw,32px); line-height:1.1; letter-spacing:-0.01em; margin-bottom:8px; }
.titulo-md { font-weight:700; font-size:20px; margin-bottom:6px; }
.texto-sub { color:rgba(244,255,250,0.72); font-size:15.5px; margin-bottom:22px; }
.texto-sub--pequeno { font-size:13.5px; margin-bottom:16px; }

/* Badge pill (usado acima de títulos principais) */
.badge-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(48,207,164,0.12); border:1px solid rgba(48,207,164,0.28);
  color:var(--teal2); font-size:12px; font-weight:700; letter-spacing:0.02em;
  padding:6px 14px 6px 12px; border-radius:99px; margin-bottom:14px;
}
.badge-pill .icon { width:14px; height:14px; }

/* ── TELAS (state machine) ── */
.tela { display:none; }
.tela--ativa { display:block; animation:telaIn .5s var(--ease-out); }
@keyframes telaIn { from { opacity:0; transform:translateY(14px) scale(.99); } to { opacity:1; transform:none; } }

/* ── CARTÃO ── */
.cartao {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.08);
  border-radius:var(--radius); padding:36px 28px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cartao--centro { max-width:480px; margin:8vh auto 0; text-align:center; animation:cartaoIn .45s var(--ease-out); }
.cartao--loading { padding:56px 28px; }
@keyframes cartaoIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ── LOGIN ── */
.form-login { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.form-login input {
  background:var(--dark); border:1px solid var(--border2); border-radius:10px;
  padding:14px 16px; color:var(--mint); font-size:15px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.form-login input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(48,207,164,0.14); }
.mensagem-erro { margin-top:16px; color:#ff9d8a; font-size:14px; animation:shakeIn .3s ease; }
@keyframes shakeIn { 0% { opacity:0; transform:translateY(-4px); } 100% { opacity:1; transform:none; } }

.btn-primario {
  background:var(--teal); color:var(--dark); border:none; border-radius:10px;
  padding:14px 20px; font-weight:700; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s, transform .12s var(--ease-out), box-shadow .2s ease;
}
.btn-primario:hover { background:var(--teal2); box-shadow:0 6px 20px rgba(48,207,164,0.28); transform:translateY(-1px); }
.btn-primario:active { transform:scale(0.97) translateY(0); }
.btn-primario:disabled { opacity:0.6; cursor:default; transform:none; box-shadow:none; }

.btn-spinner {
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(7,28,22,0.25); border-top-color:var(--dark);
  display:inline-block; animation:spin .7s linear infinite;
}

.btn-secundario {
  background:transparent; color:var(--mint); border:1px solid var(--border2); border-radius:10px;
  padding:13px 20px; font-weight:600; font-size:14.5px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color .15s, background .15s, transform .12s var(--ease-out);
}
.btn-secundario:hover { border-color:var(--teal); background:rgba(48,207,164,0.06); transform:translateY(-1px); }
.btn-secundario:active { transform:scale(0.97); }

.btn-link { background:none; border:none; color:var(--teal); font-size:14px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; margin-top:18px; display:inline-flex; align-items:center; gap:6px; transition:color .15s, opacity .15s; }
.btn-link:hover { color:var(--teal2); }
.btn-link--pequeno { margin-top:0; font-size:13px; }

.botoes-linha { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* ── QUIZ ── */
.quiz-shell { max-width:560px; margin:0 auto; padding-top:8px; }
.quiz-header { text-align:center; margin-bottom:18px; }
.quiz-progresso { display:flex; align-items:center; gap:12px; margin-bottom:28px; position:sticky; top:0; background:var(--dark); padding:12px 0; z-index:2; }

.quiz-progresso__segmentos { flex:1; display:flex; gap:5px; }
.segmento { flex:1; height:6px; border-radius:99px; background:rgba(244,255,250,0.1); overflow:hidden; position:relative; }
.segmento::after { content:''; position:absolute; inset:0; background:var(--teal); border-radius:99px; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.segmento--ativo::after { transform:scaleX(1); }
.segmento--atual { background:rgba(244,255,250,0.18); }

.quiz-progresso__texto { font-size:13px; color:var(--fg3); font-weight:600; white-space:nowrap; }

.chat-mensagens { display:flex; flex-direction:column; gap:16px; }
.chat-pergunta { display:flex; flex-direction:column; gap:10px; align-items:flex-start; width:100%; animation:msgIn .4s var(--ease-out); }
@keyframes msgIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.chat-bolha { max-width:88%; padding:14px 16px; border-radius:16px; font-size:15px; line-height:1.45; transition:opacity .3s ease, padding .3s ease, font-size .3s ease, transform .3s ease; }
.chat-bolha--pergunta { background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-bottom-left-radius:4px; align-self:flex-start; }
.chat-bolha--resposta { background:var(--teal); color:var(--dark); border-bottom-right-radius:4px; align-self:flex-end; font-weight:600; animation:respostaIn .35s var(--ease-out); }
@keyframes respostaIn { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }

/* Pergunta colapsada: alternativas somem, bolha fica compacta */
.chat-pergunta--compacta .chat-bolha--pergunta { opacity:0.6; font-size:13px; padding:9px 14px; }
.chat-alternativas {
  display:flex; flex-direction:column; gap:8px; width:100%;
  overflow:hidden; opacity:1;
  transition:max-height .35s var(--ease-standard), opacity .25s ease, margin-top .35s ease;
}
.chat-pergunta--compacta .chat-alternativas { margin-top:0; }

.chat-alt {
  text-align:left; background:transparent; border:1px solid var(--border2); color:var(--mint);
  padding:12px 16px; border-radius:12px; font-size:14.5px; cursor:pointer;
  transition:border-color .15s, background .15s, transform .12s ease;
  animation:altIn .35s var(--ease-out) backwards; animation-delay:calc(var(--i, 0) * 50ms);
}
@keyframes altIn { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:none; } }
.chat-alt:hover:not(:disabled) { border-color:var(--teal); background:rgba(48,207,164,0.06); transform:translateX(2px); }
.chat-alt:active:not(:disabled) { transform:scale(0.98); }
.chat-alt:disabled { cursor:default; opacity:0.35; }
.chat-alt--selecionada { border-color:var(--teal); opacity:1 !important; background:rgba(48,207,164,0.12); }

/* ── LOADING ── */
.spinner {
  width:40px; height:40px; margin:0 auto 20px; border-radius:50%;
  border:3px solid rgba(48,207,164,0.2); border-top-color:var(--teal);
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── TRILHA: CABEÇALHO ── */
.trilha-cabecalho { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; padding-top:12px; margin-bottom:24px; }
.trilha-cabecalho__texto { flex:1; min-width:260px; }
.trilha-resumo { font-size:13.5px; color:var(--fg3); margin-bottom:20px; }

/* Stat tiles */
.stat-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:420px; margin-bottom:18px; }
.stat-tile {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-radius:12px;
  padding:12px 10px; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  transition:border-color .2s ease, transform .2s ease;
}
.stat-tile:hover { border-color:rgba(48,207,164,0.35); transform:translateY(-2px); }
.stat-tile__icone { color:var(--teal); }
.stat-tile__icone .icon { width:18px; height:18px; }
.stat-tile__numero { font-size:20px; font-weight:900; line-height:1.1; }
.stat-tile__label { font-size:11px; color:var(--fg3); text-transform:uppercase; letter-spacing:0.04em; }

/* Card de progresso */
.progresso-card {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-radius:14px;
  padding:16px 18px; max-width:420px;
}
.progresso-card__topo { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; font-weight:700; }
.progresso-card__topo span:first-child { display:flex; align-items:center; gap:8px; }
.progresso-card__topo .icon { color:var(--teal); width:16px; height:16px; }

.trilha-progresso { display:flex; align-items:center; gap:10px; }
.trilha-progresso__barra { flex:1; height:8px; background:rgba(244,255,250,0.1); border-radius:99px; overflow:hidden; }
.trilha-progresso__barra span { display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--teal2)); border-radius:99px; transition:width .5s var(--ease-out); }
.trilha-progresso #trilha-progresso-texto, .trilha-progresso span:last-child { font-size:12px; color:var(--fg3); white-space:nowrap; }

.trilha-acoes { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.btn-icone {
  background:var(--dark2); border:1px solid var(--border2); color:var(--mint);
  padding:9px 16px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .15s, background .15s, transform .12s ease; white-space:nowrap;
}
.btn-icone:hover { border-color:var(--teal); background:rgba(48,207,164,0.06); transform:translateY(-1px); }
.btn-icone:active { transform:scale(0.97); }
.btn-icone--igual { width:172px; justify-content:center; }

/* ── TOGGLE VISÃO ── */
.toggle-visao { display:inline-flex; background:var(--dark2); border:1px solid var(--border2); border-radius:10px; padding:4px; margin-bottom:24px; gap:4px; }
.toggle-visao button {
  background:none; border:none; color:var(--fg3); padding:9px 16px; border-radius:7px; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .2s var(--ease-standard), color .2s ease;
}
.toggle-visao__btn--ativo { background:var(--teal) !important; color:var(--dark) !important; }

/* Fade+slide na troca de visão semanal/diária */
.lista-cursos, .missao-do-dia { opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .28s var(--ease-out); }
.lista-cursos.visao--visivel, .missao-do-dia.visao--visivel { opacity:1; transform:none; }

/* ── CURSOS ── */
.semana-bloco { margin-bottom:24px; }
.semana-titulo { font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg3); margin-bottom:10px; }

.curso-card {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-radius:14px; margin-bottom:10px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.curso-card:hover { border-color:rgba(48,207,164,0.25); box-shadow:0 8px 24px rgba(0,0,0,0.22); transform:translateY(-1px); }
.curso-card__header {
  width:100%; display:flex; align-items:center; gap:14px; padding:14px; background:none; border:none;
  color:var(--mint); text-align:left; cursor:pointer;
}
.curso-card__img { width:52px; height:52px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.curso-card__img--placeholder { background:linear-gradient(135deg, var(--teal), var(--dark3)); }
.curso-card__info { flex:1; min-width:0; }
.curso-card__info h4 { font-size:15px; font-weight:700; margin-bottom:3px; }
.curso-card__meta { font-size:12.5px; color:var(--fg3); display:inline-flex; align-items:center; gap:5px; margin-bottom:6px; }
.curso-card__meta .icon { width:13px; height:13px; }
.curso-card__barra { height:5px; background:rgba(244,255,250,0.1); border-radius:99px; overflow:hidden; max-width:220px; }
.curso-card__barra span { display:block; height:100%; background:var(--teal); border-radius:99px; transition:width .4s var(--ease-out); }
.curso-card__chevron { color:var(--fg3); transition:transform .25s var(--ease-out), color .2s ease; flex-shrink:0; }
.curso-card--aberto .curso-card__chevron { transform:rotate(90deg); color:var(--teal); }

.curso-card--em-breve { opacity:0.55; }
.curso-card--em-breve:hover { transform:none; box-shadow:none; }
.badge-em-breve { background:rgba(244,255,250,0.08); color:var(--fg3); font-size:11px; font-weight:700; padding:5px 10px; border-radius:99px; text-transform:uppercase; letter-spacing:0.06em; }

.curso-card__aulas {
  max-height:0; overflow:hidden; padding:0 14px;
  transition:max-height .4s var(--ease-standard), padding .3s ease;
}
.curso-card--aberto .curso-card__aulas { padding:0 14px 14px; border-top:1px solid rgba(244,255,250,0.06); }

.aula-linha { display:flex; align-items:center; gap:10px; padding:12px 6px; margin:0 -6px; border-radius:8px; font-size:14px; cursor:pointer; border-bottom:1px solid rgba(244,255,250,0.04); transition:background .15s ease; }
.aula-linha:last-child { border-bottom:none; }
.aula-linha:active { background:rgba(48,207,164,0.08); }
.aula-linha input { width:17px; height:17px; accent-color:var(--teal); cursor:pointer; flex-shrink:0; transition:transform .15s var(--ease-out); }
.aula-linha input:checked { transform:scale(1.08); }
.aula-linha__nome { flex:1; transition:color .2s ease; }
.aula-linha__duracao { font-size:12px; color:var(--fg3); flex-shrink:0; display:inline-flex; align-items:center; gap:4px; }
.aula-linha--concluida .aula-linha__nome { text-decoration:line-through; color:var(--fg3); }
@keyframes linhaPop { 0% { transform:scale(1); } 45% { transform:scale(1.015); background:rgba(48,207,164,0.08); } 100% { transform:scale(1); } }
.aula-linha--pop { animation:linhaPop .32s ease; border-radius:8px; }

/* ── MISSÃO DO DIA ── */
.missao-do-dia { margin-bottom:24px; }
.missao-card { background:var(--dark2); border:1px solid var(--teal); border-radius:16px; padding:26px; transition:border-color .3s ease; }
.missao-card--completa { border-color:rgba(244,255,250,0.1); text-align:center; }
.missao-card__icone { color:var(--teal); margin-bottom:10px; display:flex; justify-content:center; }
.missao-card__icone .icon { width:34px; height:34px; }
.kicker-mini { font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.kicker-mini .icon { width:14px; height:14px; }
.missao-card h3 { font-size:20px; font-weight:900; margin-bottom:6px; }
.missao-card__curso { font-size:13.5px; color:var(--fg3); margin-bottom:18px; }
.missao-check { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14.5px; font-weight:600; }
.missao-check input { width:19px; height:19px; accent-color:var(--teal); cursor:pointer; transition:transform .15s var(--ease-out); }
.missao-check input:checked { transform:scale(1.08); }

/* Visão diária: stat tiles + jornada semanal (accordion por semana/dia) */
.visao-diaria__stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:24px; }
.stat-tile-lg {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-radius:14px;
  padding:16px; display:flex; align-items:center; gap:12px;
  transition:border-color .2s ease, transform .2s ease;
}
.stat-tile-lg:hover { border-color:rgba(48,207,164,0.3); transform:translateY(-2px); }
.stat-tile-lg__icone {
  width:38px; height:38px; border-radius:10px; background:rgba(48,207,164,0.12); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-tile-lg__texto { display:flex; flex-direction:column; gap:2px; min-width:0; }
.stat-tile-lg__numero { font-size:22px; font-weight:900; line-height:1.1; }
.stat-tile-lg__label { font-size:12px; color:var(--fg3); line-height:1.3; }

.jornada-semanal__topo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.jornada-semanal__topo .btn-link--pequeno { margin-top:0; }

.accordion-semanas { display:flex; flex-direction:column; gap:10px; }
.accordion-semana {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-radius:14px; overflow:hidden;
  transition:border-color .2s ease;
}
.accordion-semana--aberta, .accordion-semana:hover { border-color:rgba(48,207,164,0.22); }
.accordion-semana__header {
  width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:none; border:none; color:var(--mint); text-align:left; cursor:pointer;
}
.accordion-semana__badge {
  background:rgba(48,207,164,0.14); color:var(--teal); font-size:11px; font-weight:800;
  padding:6px 9px; border-radius:8px; letter-spacing:0.03em; flex-shrink:0;
}
.accordion-semana__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.accordion-semana__info strong { font-size:14.5px; font-weight:700; }
.accordion-semana__dias-label { font-size:12px; font-weight:500; color:var(--fg3); }
.accordion-semana__meta { font-size:12px; color:var(--fg3); display:inline-flex; align-items:center; gap:5px; }
.accordion-semana__meta .icon { width:13px; height:13px; }
.accordion-semana__chevron { color:var(--fg3); transition:transform .25s var(--ease-out), color .2s ease; flex-shrink:0; }
.accordion-semana--aberta .accordion-semana__chevron { transform:rotate(90deg); color:var(--teal); }

.accordion-semana__dias {
  max-height:0; overflow:hidden; padding:0 14px;
  display:flex; flex-direction:column; gap:8px;
  transition:max-height .4s var(--ease-standard), padding .3s ease;
}
.accordion-semana--aberta .accordion-semana__dias { padding:0 14px 14px; }

.dia-card {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  background:rgba(244,255,250,0.03); border:1px solid rgba(244,255,250,0.06); border-radius:10px;
  padding:12px 14px; transition:border-color .15s ease, background .15s ease;
}
.dia-card:hover { border-color:rgba(48,207,164,0.3); background:rgba(48,207,164,0.04); }
.dia-card input { width:17px; height:17px; margin-top:2px; accent-color:var(--teal); cursor:pointer; flex-shrink:0; transition:transform .15s var(--ease-out); }
.dia-card input:checked { transform:scale(1.08); }
.dia-card__conteudo { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dia-card__aula { font-size:14px; font-weight:600; transition:color .2s ease; }
.dia-card__meta { font-size:12px; color:var(--fg3); }
.dia-card--concluida .dia-card__aula { text-decoration:line-through; color:var(--fg3); }
.dia-card--pop { animation:linhaPop .32s ease; }

/* ── BÔNUS ── */
.secao-bonus { margin:32px 0; padding-top:24px; border-top:1px solid rgba(244,255,250,0.08); }
.lista-bonus { display:flex; flex-direction:column; gap:8px; }
.bonus-linha { display:flex; justify-content:space-between; gap:12px; background:var(--dark2); border:1px solid rgba(244,255,250,0.06); border-radius:10px; padding:12px 16px; font-size:14px; transition:border-color .15s ease; }
.bonus-linha:hover { border-color:rgba(48,207,164,0.25); }
.bonus-linha__duracao { color:var(--fg3); font-size:12.5px; flex-shrink:0; }

/* ── RECOMENDAÇÕES ── */
.secao-recomendacoes { margin-top:32px; padding-top:24px; border-top:1px solid rgba(244,255,250,0.08); }
.recomendacoes-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-top:14px; }
.recomendacao-card { display:block; background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-radius:12px; overflow:hidden; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.recomendacao-card:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.22); }
.recomendacao-card img, .recomendacao-card__img--placeholder { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.recomendacao-card__img--placeholder { background:linear-gradient(135deg, var(--teal), var(--dark3)); }
.recomendacao-card__nome { display:block; padding:10px 12px; font-size:13.5px; font-weight:600; }

/* ── DASHBOARD ── */
.dashboard-cabecalho { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:28px; padding-top:12px; }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.dashboard-card {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.08); border-radius:14px; padding:22px;
  display:flex; flex-direction:column; animation:cardIn .4s var(--ease-out) backwards; animation-delay:calc(var(--i, 0) * 60ms);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
@keyframes cardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.dashboard-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,0.25); border-color:rgba(48,207,164,0.3); }
.dashboard-card--atual { border-color:var(--teal); }
.dashboard-card__topo { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.dashboard-card__badge { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:rgba(48,207,164,0.12); color:var(--teal); }
.dashboard-card__tempo { font-size:11.5px; color:var(--fg3); }
.dashboard-card h3 { font-size:17px; font-weight:900; margin-bottom:6px; }
.dashboard-card__desc { font-size:13.5px; color:var(--fg3); margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dashboard-card__meta { display:flex; gap:14px; font-size:12.5px; color:var(--fg3); margin-bottom:14px; }
.dashboard-card__meta span { display:inline-flex; align-items:center; gap:5px; }
.dashboard-card__meta .icon { width:14px; height:14px; }
.dashboard-card__barra { height:6px; background:rgba(244,255,250,0.1); border-radius:99px; overflow:hidden; margin-bottom:10px; }
.dashboard-card__barra span { display:block; height:100%; background:var(--teal); transition:width .5s var(--ease-out); }
.dashboard-card p.dashboard-card__pct { font-size:13px; color:var(--fg3); margin-bottom:16px; }
.badge-atual { align-self:flex-start; background:var(--teal); color:var(--dark); font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; }
.dashboard-vazio { color:var(--fg3); grid-column:1/-1; text-align:center; padding:40px 0; }

.btn-pill {
  margin-top:auto; background:var(--teal); color:var(--dark); border:none; border-radius:99px;
  padding:11px 18px; font-weight:700; font-size:13.5px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s ease, transform .12s var(--ease-out), box-shadow .2s ease;
}
.btn-pill:hover { background:var(--teal2); box-shadow:0 6px 18px rgba(48,207,164,0.28); transform:translateY(-1px); }
.btn-pill:active { transform:scale(0.97); }
.btn-pill .icon { width:14px; height:14px; }

/* ── TOAST ── */
.toast-container {
  position:fixed; right:20px; bottom:20px; z-index:100;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  background:var(--dark3); color:var(--mint); border:1px solid rgba(244,255,250,0.1);
  padding:12px 18px; border-radius:99px; font-size:13.5px; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  opacity:0; transform:translateY(10px) scale(.96);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  max-width:min(320px, 80vw);
}
.toast--visivel { opacity:1; transform:none; }
.toast .icon { width:16px; height:16px; flex-shrink:0; }
.toast--sucesso .icon { color:var(--teal); }
.toast--erro { border-color:rgba(255,138,120,0.35); }
.toast--erro .icon { color:#ff9d8a; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:200; background:rgba(7,28,22,0.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .2s ease;
}
/* precisa vir depois da regra acima: [hidden] tem a mesma especificidade de .modal-overlay,
   e sem isso o display:flex do author stylesheet vence o display:none do user-agent,
   deixando uma camada invisível cobrindo a tela inteira mesmo com o atributo hidden presente. */
.modal-overlay[hidden] { display:none; }
.modal-overlay--ativo { opacity:1; }
.modal-cartao {
  background:var(--dark2); border:1px solid rgba(244,255,250,0.1); border-radius:16px;
  padding:28px; max-width:400px; width:100%; text-align:center;
  transform:translateY(12px) scale(.97); transition:transform .25s var(--ease-out);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.modal-overlay--ativo .modal-cartao { transform:none; }
.modal-cartao .titulo-md { margin-bottom:10px; }
.modal-botoes { margin-top:20px; }

/* ── NAVEGAÇÃO RÁPIDA (mobile) ── */
/* Base sempre display:none — a regra que reativa fica presa à media query mobile
   E checa :not([hidden]) explicitamente, pra nunca reproduzir o bug do modal-overlay
   (uma regra de display que ignora o atributo hidden por causa de especificidade). */
.nav-mobile { display:none; }

/* ── RESPONSIVO ── */
@media (max-width:640px) {
  .cartao--centro { margin-top:4vh; padding:28px 20px; }
  .trilha-acoes { align-items:stretch; width:100%; }
  .btn-icone { width:100%; justify-content:center; }
  .trilha-cabecalho { flex-direction:column; }
  .stat-tiles { max-width:none; }
  .progresso-card { max-width:none; }
  .toast-container { left:16px; right:16px; align-items:stretch; bottom:84px; }
  .toast { max-width:none; justify-content:center; }
  .main-conteudo { padding-bottom:88px; }

  .nav-mobile:not([hidden]) {
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    display:flex; gap:2px;
    background:var(--dark2); border-top:1px solid rgba(244,255,250,0.1);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(0,0,0,0.3);
  }
  .nav-mobile__btn {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:none; color:var(--fg3); padding:6px 2px; border-radius:10px;
    font-size:10.5px; font-weight:600; line-height:1.1; cursor:pointer;
    transition:color .15s ease, background .15s ease;
  }
  .nav-mobile__btn:active { background:rgba(48,207,164,0.12); }
  .nav-mobile__btn .icon { color:var(--teal); width:19px; height:19px; }
  .nav-mobile__label { white-space:nowrap; }
}

@media (max-width:400px) {
  .stat-tile__numero { font-size:17px; }
}