/* ═══ Estúdio — layout do assistente passo a passo ═══ */

.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: #070b13d9; backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.marca {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.06rem; color: var(--texto); text-decoration: none;
}
.marca b { color: var(--marca); }
.marca-icone {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--marca), var(--sky)); font-size: .95rem;
}
.topo-nav { display: flex; align-items: center; gap: 10px; }
.topo-nav a { color: var(--suave); text-decoration: none; font-size: .88rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.topo-nav a:hover { color: var(--marca); background: #14e0a80f; }
.btn-topo { padding: 8px 14px; font-size: .85rem; }

.palco { max-width: 780px; margin: 0 auto; padding: 26px 18px 140px; }
.entrada { max-width: 420px; margin: 40px auto; }

.faixa-saldo {
  background: linear-gradient(135deg, #14e0a814, #38bdf80f);
  border: 1px solid #14e0a833; border-radius: var(--r);
  padding: 13px 16px; font-size: .88rem; margin-bottom: 18px;
}
.faixa-saldo a { font-weight: 600; }

/* ---------- ferramenta dobrável ---------- */
.ferramenta { padding: 0; margin-bottom: 18px; overflow: hidden; }
.ferramenta summary {
  cursor: pointer; padding: 16px 20px; list-style: none;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-weight: 600;
}
.ferramenta summary::-webkit-details-marker { display: none; }
.ferramenta summary::after { content: '▾'; margin-left: auto; color: var(--suave); }
.ferramenta[open] summary::after { content: '▴'; }
.ferramenta summary small { color: var(--suave); font-weight: 400; font-size: .82rem; }
.ferramenta-corpo { padding: 0 20px 20px; border-top: 1px solid var(--borda); }

/* ---------- trilha de passos ---------- */
.passos {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px;
  overflow-x: auto; scrollbar-width: none;
}
.passos::-webkit-scrollbar { display: none; }
.passos li {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 13px; border-radius: 99px; font-size: .82rem; color: var(--suave);
  border: 1px solid var(--borda); background: var(--fundo-2); cursor: pointer;
  transition: all .18s; white-space: nowrap;
}
.passos li i {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--borda-viva); color: var(--suave); font-style: normal;
  font-size: .72rem; font-weight: 700;
}
.passos li.ativo { color: var(--texto); border-color: var(--marca); background: #14e0a814; }
.passos li.ativo i { background: var(--marca); color: #04121a; }
.passos li.feito i { background: var(--marca-esc); color: #04121a; }
.passos li.feito i::before { content: '✓'; }
.passos li.feito i { font-size: .7rem; }
.passos li.feito span { color: #b9c6dc; }

.passo { margin-bottom: 16px; animation: entra .25s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.obrigatorio, .opcional {
  font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; margin-left: 6px;
  vertical-align: middle;
}
.obrigatorio { background: #ff6b6b1f; color: var(--perigo); }
.opcional { background: #8b9bb81f; color: var(--suave); }

.previa {
  max-width: 130px; border-radius: var(--r-p); margin-top: 12px; display: block;
  border: 1px solid var(--borda-viva);
}

/* As opções de qualidade são montadas pelo app.js sem classe — estilizamos
   pelo seletor pra ficarem iguais aos outros cartões de escolha. */
#qualidades > label {
  display: block; margin: 0; padding: 13px 15px;
  border: 1px solid var(--borda-viva); border-radius: var(--r-p);
  background: #0a1020; cursor: pointer; font-size: .9rem; color: var(--texto);
  transition: border-color .15s, background .15s;
}
#qualidades > label:hover { background: #0d1526; }
#qualidades > label:has(input:checked) { border-color: var(--marca); background: #14e0a814; }
#qualidades > label input { accent-color: var(--marca); margin-right: 8px; }
#qualidades > label strong { font-weight: 600; }
#qualidades > label .dica { display: inline; margin: 0 0 0 4px; }

/* ---------- barra fixa de ação ---------- */
.barra-acao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 22px;
  background: #0b1120e6; backdrop-filter: blur(14px);
  border-top: 1px solid var(--borda);
}
.barra-custo { display: flex; flex-direction: column; line-height: 1.2; }
.barra-custo small { color: var(--suave); font-size: .72rem; }
.barra-custo strong { font-size: .96rem; color: var(--marca); }
.barra-botoes { display: flex; gap: 10px; }
.barra-botoes button { padding: 11px 20px; }

/* ---------- aviso flutuante ---------- */
#aviso-flutuante {
  position: fixed; left: 50%; bottom: 88px; z-index: 40;
  transform: translate(-50%, 14px);
  background: #2a1420; border: 1px solid #8a3a4a; color: #ffc9c9;
  padding: 11px 18px; border-radius: 99px; font-size: .88rem; font-weight: 500;
  box-shadow: 0 8px 26px #0009;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#aviso-flutuante.aparece { opacity: 1; transform: translate(-50%, 0); }

/* ---------- resultado ---------- */
video { width: 100%; border-radius: var(--r-p); margin: 14px 0; background: #000; }
.copiaveis { margin-top: 18px; display: grid; gap: 14px; }
.campo-copiar label { margin-top: 0; }
.campo-copiar .copiar { margin-top: 8px; padding: 8px 16px; font-size: .84rem; }

/* ---------- sugestões do analisador ---------- */
.sugestao {
  border: 1px solid var(--borda); border-radius: var(--r-p); padding: 13px;
  margin-bottom: 10px; background: var(--fundo-2);
}
.btn-usar-sugestao { margin-top: 9px; padding: 7px 14px; font-size: .82rem; }

@media (max-width: 640px) {
  .palco { padding: 18px 14px 150px; }
  .barra-acao { flex-wrap: wrap; }
  .barra-botoes { width: 100%; }
  .barra-botoes button { flex: 1; }
}