/* ═══════════════════════════════════════════════════════════════
   FÁBRICA — sistema visual compartilhado (Estúdio + Painel).
   Paleta puxada da landing primelifestylereview: azul-noite + teal.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fundo:       #070b13;
  --fundo-2:     #0b1120;
  --superficie:  #111a2c;
  --superficie-2:#17223a;
  --borda:       #1f2c45;
  --borda-viva:  #2b3d5e;
  --texto:       #e9eef7;
  --suave:       #8b9bb8;
  --marca:       #14e0a8;
  --marca-esc:   #0bbd8b;
  --sky:         #38bdf8;
  --roxo:        #a78bfa;
  --perigo:      #ff6b6b;
  --alerta:      #ffc14d;
  --r:           14px;
  --r-p:         10px;
  --sombra:      0 8px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1000px 600px at 80% -10%, #10305033, transparent 60%),
    radial-gradient(800px 500px at 0% 0%, #14e0a814, transparent 55%),
    var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 1.5rem; letter-spacing: -.02em; }
h2 { font-size: 1.08rem; }
a { color: var(--marca); }
.oculto { display: none !important; }
.suave { color: var(--suave); }

/* ---------- superfícies ---------- */
.cartao {
  background: linear-gradient(180deg, var(--superficie), var(--fundo-2));
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sombra);
}
.dica { color: var(--suave); font-size: .85rem; margin: 6px 0 12px; }

/* ---------- campos ---------- */
label { display: block; font-size: .84rem; color: #b9c6dc; margin: 14px 0 6px; font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"],
input[type="file"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-p);
  border: 1px solid var(--borda-viva);
  background: #0a1020;
  color: var(--texto);
  font-size: .95rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px #14e0a826;
}
textarea { resize: vertical; }
input[type="file"] { padding: 9px; cursor: pointer; }
input[type="file"]::file-selector-button {
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda-viva);
  border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer; font-family: inherit;
}

/* ---------- botões ---------- */
button, .botao {
  font-family: inherit; font-size: .95rem; font-weight: 600;
  border-radius: var(--r-p); border: none; cursor: pointer;
  padding: 12px 18px; color: #04121a;
  background: linear-gradient(135deg, var(--marca), #4ee3c0);
  transition: transform .12s, filter .15s, opacity .15s;
  text-decoration: none; display: inline-block; text-align: center;
}
button:hover:not(:disabled), .botao:hover { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
.botao-largo { display: block; width: 100%; }
.botao-fantasma {
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda-viva);
}
.botao-fantasma:hover { background: #1e2b47; }
.botao-perigo { background: #2a1420; color: #ffb3b3; border: 1px solid #6b2434; }

/* ---------- escolhas (radio/cartão) ---------- */
.escolhas { display: grid; gap: 10px; margin-bottom: 6px; }
.escolhas.duas { grid-template-columns: 1fr 1fr; }
.escolhas.tres { grid-template-columns: 1fr 1fr 1fr; }
.escolha {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--borda-viva); border-radius: var(--r-p);
  padding: 12px 14px; cursor: pointer; background: #0a1020;
  transition: border-color .15s, background .15s;
}
.escolha:hover { border-color: var(--borda-viva); background: #0d1526; }
.escolha input { margin: 3px 0 0; accent-color: var(--marca); flex: none; }
.escolha:has(input:checked) { border-color: var(--marca); background: #14e0a814; }
.escolha b { display: block; font-size: .92rem; font-weight: 600; }
.escolha small { color: var(--suave); font-size: .8rem; }

/* ---------- selos ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 99px;
  letter-spacing: .01em;
}
.selo.ok, .selo.pronto, .selo.ligado { background: #14e0a81f; color: var(--marca); }
.selo.gerando, .selo.pego, .selo.rodando, .selo.gerando_carrossel { background: #ffc14d1f; color: var(--alerta); }
.selo.aguardando_escolha { background: #38bdf81f; color: var(--sky); }
.selo.erro { background: #ff6b6b1f; color: var(--perigo); }
.selo.off, .selo.pendente { background: #8b9bb81f; color: var(--suave); }

/* ---------- avisos ---------- */
.aviso {
  background: #3a2a1226; border: 1px solid #8a5a1f66; color: #ffd699;
  border-radius: var(--r-p); padding: 12px 14px; font-size: .87rem; margin-top: 10px;
}
.erro-caixa {
  background: #3a141426; border: 1px solid #8a1f1f66; color: #ffb3b3;
  border-radius: var(--r-p); padding: 12px 14px; margin-top: 14px; font-size: .88rem;
}
.sucesso-caixa {
  background: #14e0a814; border: 1px solid #14e0a844; color: var(--marca);
  border-radius: var(--r-p); padding: 12px 14px; margin-top: 14px; font-size: .88rem;
}

/* ---------- carregando ---------- */
.girando {
  width: 38px; height: 38px; border: 3px solid var(--borda-viva); border-top-color: var(--marca);
  border-radius: 50%; margin: 0 auto 16px; animation: girar .9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.pulsando { animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* ---------- barra de progresso ---------- */
.trilho { height: 6px; background: #0a1020; border-radius: 99px; overflow: hidden; }
.trilho > i { display: block; height: 100%; background: linear-gradient(90deg, var(--marca), var(--sky)); transition: width .4s ease; }

/* ---------- utilidades ---------- */
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.grade { display: grid; gap: 16px; }
.grade.auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grade.duas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- IA nas caixas de texto ---------- */
.campo-ia { position: relative; }
.campo-ia textarea { padding-bottom: 42px; }
.btn-ia {
  position: absolute; right: 8px; bottom: 8px;
  width: auto; margin: 0; padding: 6px 12px; font-size: .76rem;
  background: #1c1533; color: #c9b6ff; border: 1px solid #43356b; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-ia:hover:not(:disabled) { background: #251c45; filter: none; }

@media (max-width: 720px) {
  .escolhas.duas, .escolhas.tres { grid-template-columns: 1fr; }
}