/* Identidade visual do Criaê — "Tropical Brasileiro" (tucano-toco).
   Laranja-bico na ação, verde-selva no que é grave, dourado no detalhe,
   superfície branco-quente, cantos orgânicos, sombras esverdeadas.
   Plus Jakarta Sans nos títulos, Manrope no corpo. */

:root {
  --laranja: #FF8A00;        /* primária (marca) — bico do tucano, ação */
  --laranja-escuro: #E0740A; /* hover / detalhe */
  --verde: #004B23;          /* verde-selva profundo — fundos graves, tucano */
  --verde-claro: #5A7F2B;    /* verde-folha (marca) */
  --dourado: #FFD100;        /* amarelo-sol (marca) */
  --fundo: #FBF6EC;          /* creme quente — superfície */
  --texto: #1B1E1D;          /* quase-preto (marca) */
  --texto-suave: #5B4137;
  --branco: #FFFFFF;
  --cinza-borda: #E7DFCF;
  --verde-fraco: rgba(90, 127, 43, 0.10);  /* sombra tingida (folha) */
  --verde-selo: rgba(90, 127, 43, 0.14);   /* chip */
  --laranja-claro: #FF9A1A;  /* topo do gradiente laranja */
  --texto-fraco: #8a7a63;    /* rótulo discreto (Sair, valores da conta) */
  --borda-fraca: #f0ece3;    /* divisória sutil (linhas da conta) */
  --creme-aviso: #FFF4E8;    /* fundo de aviso/seleção sobre creme */
}

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

body {
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--texto);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fundo creme com folhagem — arte real da marca, fixa atrás do conteúdo. */
  background-color: var(--fundo);
  background-image: url("img/fundo.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1, h2, .titulo {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- Cabeçalho ---------- */
.topo {
  width: 100%;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

/* Botão "Sair" — canto direito do topo, discreto. Só aparece quando logado. */
.topo-sair {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--texto-fraco);
  cursor: pointer;
  padding: 6px 8px;
}
.topo-sair:hover { text-decoration: underline; }

/* --- Tela de Conta --- */
.conta-cartao {
  background: var(--branco);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}
.conta-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda-fraca);
}
.conta-linha:last-child { border-bottom: none; }
.conta-rotulo { color: var(--texto-fraco); font-size: 0.85rem; }
.conta-valor { font-weight: 600; text-align: right; word-break: break-word; }
.conta-creditos {
  background: var(--laranja);
  color: var(--branco);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  margin-bottom: 18px;
}
.conta-creditos-num { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.conta-creditos-txt { font-size: 0.95rem; opacity: 0.95; }
.conta-embreve {
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.topo-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.topo-marca svg { width: 32px; height: 32px; display: block; }

/* Logo oficial da marca (wordmark "criaê"). */
.topo-logo-img { height: 68px; width: auto; display: block; }

/* ---------- Home: card de boas-vindas com o mascote ---------- */
.card-boas-vindas {
  width: 100%;
  background: var(--branco);
  border-radius: 22px;
  box-shadow: 0 6px 22px var(--verde-fraco);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.mascote-home {
  width: 76px;
  height: 76px;
  object-fit: contain;
  flex: none;
}
.boas-vindas-texto {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--texto);
}

/* ---------- Home: card do perfil profissional (laranja, marca ativa) ---------- */
.card-perfil {
  width: 100%;
  background: linear-gradient(180deg, var(--laranja-claro), var(--laranja));
  border: none;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.28);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.card-perfil-tag {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}
.card-perfil-linha {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Logo da marca num quadrado branco: garante contraste sobre o laranja,
   qualquer que seja a cor do logo. */
.card-perfil-logo {
  width: 54px;
  height: 54px;
  flex: none;
  object-fit: contain;
  background: var(--branco);
  border-radius: 14px;
  padding: 5px;
}
.card-perfil-marca {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--branco);
  line-height: 1.15;
}
.card-perfil-desc {
  font-size: 0.98rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.35;
}
.card-perfil-paleta { display: flex; gap: 8px; }
.card-perfil-paleta:empty { display: none; }
.card-perfil-cor {
  width: 34px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.card-perfil-cta {
  margin-top: 4px;
  align-self: stretch;
  text-align: center;
  background: var(--branco);
  color: var(--laranja);
  font-weight: 800;
  font-size: 1rem;
  border-radius: 999px;
  padding: 12px 16px;
}

/* ---------- Home: carrossel de banners (deslize) ---------- */
.carrossel {
  width: 100%;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.carrossel::-webkit-scrollbar { display: none; }
.banner {
  flex: 0 0 88%;
  scroll-snap-align: center;
  background: var(--branco);
  border: none;
  border-radius: 20px;
  box-shadow: 0 6px 22px var(--verde-fraco);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.banner-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.banner-texto {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.25;
  padding: 12px 14px 0;
}
.banner-cta {
  color: var(--laranja);
  font-weight: 800;
  font-size: 0.98rem;
  padding: 6px 14px 14px;
}

/* ---------- Home: Destaques (atalhos com foto) ---------- */
.destaques-bloco { width: 100%; text-align: left; }
.destaques-titulo {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--texto);
  margin-bottom: 12px;
}
.destaques-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.destaque-card {
  background: var(--branco);
  border: none;
  border-radius: 20px;
  box-shadow: 0 6px 22px var(--verde-fraco);
  padding: 8px 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.destaque-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.destaque-nome {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--texto);
  text-align: center;
}

/* Card em faixa larga (ocupa as duas colunas), com ícone à esquerda e texto à
   direita — para ações que não são "modelo", como os filtros. */
.destaque-card.largo {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
}
.destaque-card.largo .destaque-emoji {
  font-size: 1.9rem;
  width: 54px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--fundo);
}
.destaque-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.destaque-card.largo .destaque-nome { text-align: left; }
.destaque-sub {
  font-size: 0.82rem;
  color: var(--texto-suave);
  line-height: 1.25;
}

.aviso-demo {
  width: calc(100% - 32px);
  max-width: 480px;
  background: var(--creme-aviso);
  border: 1.5px solid var(--dourado);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--laranja-escuro);
  text-align: center;
}

.tela {
  width: 100%;
  max-width: 480px;
  padding: 24px 20px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

h1 {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.ajuda {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--texto-suave);
  line-height: 1.5;
}

/* ---------- Botões (pílula, tátil) ---------- */
.botao {
  width: 100%;
  min-height: 62px;
  border: none;
  border-radius: 20px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

.botao:active { transform: translateY(1px) scale(0.99); }

.botao-principal {
  background: linear-gradient(180deg, var(--laranja-claro), var(--laranja));
  color: var(--branco);
  box-shadow: 0 8px 20px rgba(255, 138, 0, 0.28), 0 2px 4px rgba(27, 30, 29, 0.06);
}

.botao-principal:hover { filter: brightness(1.04); box-shadow: 0 10px 26px rgba(255, 138, 0, 0.34); }
.botao-principal:active { box-shadow: 0 4px 12px rgba(255, 138, 0, 0.24); }


.botao-secundario {
  background: var(--branco);
  color: var(--laranja);
  border: 2px solid var(--laranja);
  box-shadow: 0 4px 14px var(--verde-fraco);
}

.botao-playground {
  background: var(--verde-claro);
  color: var(--branco);
  box-shadow: 0 8px 20px rgba(90, 127, 43, 0.26), 0 2px 4px rgba(27, 30, 29, 0.06);
}
.botao-playground:hover { filter: brightness(1.05); }
.botao-playground:active { box-shadow: 0 4px 12px rgba(90, 127, 43, 0.22); }

/* Home: "Criar com um modelo" em amarelo-sol, texto escuro (mockup). */
#btn-modo-template {
  background: var(--dourado);
  color: var(--texto);
  box-shadow: 0 8px 20px rgba(255, 209, 0, 0.30), 0 2px 4px rgba(27, 30, 29, 0.06);
}
#btn-modo-template:hover { filter: brightness(1.03); }

.botao-texto {
  background: none;
  color: var(--texto-suave);
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 700;
}
.botao-texto:hover { color: var(--laranja); }

.icone { font-size: 1.35rem; }

/* ---------- Fotos e cards ---------- */
.foto {
  width: 100%;
  border-radius: 24px;
  border: 1px solid var(--verde-selo);
  background: var(--branco);
  box-shadow: 0 4px 20px var(--verde-fraco);
  display: block;
}

.grade-fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.grade-fotos:empty { display: none; }

.grade-fotos img:only-child {
  grid-column: 1 / -1;
  aspect-ratio: auto;
}

.grade-fotos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--verde-selo);
}

.rotulo-campo {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--texto-suave);
  width: 100%;
  text-align: left;
  margin-bottom: -8px;
}

.paleta-medida {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Chip da marca (topo) ---------- */
.chip-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--verde-selo);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--verde);
  cursor: pointer;
}

.chip-seta { color: var(--verde-claro); }

/* ---------- Lista de perfis ---------- */
.lista-perfis {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.perfil-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.perfil-escolher {
  flex: 1;
  min-height: 64px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 18px;
  background: var(--branco);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--texto);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-align: left;
  box-shadow: 0 4px 20px var(--verde-fraco);
}

.perfil-escolher.ativa {
  border-color: var(--laranja);
  background: var(--creme-aviso);
}

.perfil-acao {
  min-width: 52px;
  min-height: 52px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 16px;
  background: var(--branco);
  font-size: 1.2rem;
  cursor: pointer;
}

.logo-preview {
  max-width: 200px;
  max-height: 120px;
  align-self: center;
  border: 1px solid var(--verde-selo);
  border-radius: 16px;
  background: var(--branco);
  padding: 10px;
  box-shadow: 0 4px 20px var(--verde-fraco);
}

/* ---------- Assistente ---------- */
.wizard-passo {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--verde-claro);
  letter-spacing: 0.08em;
}

.wizard-corpo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Campos (soft-well) ---------- */
.campo-texto {
  width: 100%;
  min-height: 62px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 16px;
  background: var(--branco);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto);
  padding: 14px 18px;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.campo-texto:focus {
  outline: none;
  border-color: var(--laranja);
}

.grupo-foto-card .campo-texto::placeholder {
  font-size: 0.95rem;
  font-weight: 500;
}

#template-pergunta-campo::placeholder {
  font-size: 0.95rem;
  font-weight: 500;
}

#template-pergunta-multicampo .campo-texto::placeholder {
  font-size: 0.95rem;
  font-weight: 500;
}

.botao-opcao {
  width: 100%;
  min-height: 64px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 18px;
  background: var(--branco);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 20px var(--verde-fraco);
}

.botao-opcao.escolhida {
  border-color: var(--laranja);
  background: var(--creme-aviso);
  color: var(--laranja-escuro);
}

/* Opção com miniatura de estilo (ex.: Cartaz de Impacto): a imagem em cima, o
   rótulo embaixo. A coluna faz a foto ocupar a largura toda do botão. */
.botao-opcao-imagem {
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  min-height: 0;
}
.opcao-miniatura {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.grade-cores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}

/* ---------- Filtros de cor na tela de resultado ---------- */
.filtros-bloco { width: 100%; text-align: left; }
.filtros-tira {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.filtros-tira::-webkit-scrollbar { display: none; }
.filtro-item {
  flex: 0 0 auto;
  width: 78px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.filtro-item img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 14px;
  border: 2.5px solid transparent;
  display: block;
}
.filtro-item.ativo img { border-color: var(--laranja); }
.filtro-item span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-align: center;
  line-height: 1.15;
}
.filtro-item.ativo span { color: var(--laranja); }
.filtro-intensidade { margin-top: 12px; }
.filtro-intensidade input[type="range"] {
  width: 100%;
  accent-color: var(--laranja);
}

/* ---------- Gavetas de filtro (Todos, Filme/Retrô, Aesthetic…) ---------- */
/* Grudam no topo do painel: mesmo rolando até os deslizadores, dá pra trocar de
   gaveta sem voltar. O fundo é sólido pra tirinha passar por baixo escondida. */
.filtros-categorias {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0;
  margin-bottom: 4px;
  background: var(--fundo);
}
.filtros-categorias::-webkit-scrollbar { display: none; }
.filtro-cat {
  flex: 0 0 auto;
  border: 1.5px solid var(--cinza-borda);
  background: var(--branco);
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.filtro-cat.ativa {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--branco);
}

/* ---------- Ajustes na mão (brilho, sombra, contraste…) ---------- */
.ajustes-manuais {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cinza-borda);
}
.ajustes-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.botao-zerar {
  background: var(--laranja);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--branco);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 16px;
}
.ajuste-linha { display: block; margin-bottom: 10px; }
.ajuste-nome {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 2px;
}
.ajuste-nome b { color: var(--laranja); font-variant-numeric: tabular-nums; }
/* O deslizador começa no MEIO (0) e vai pra menos ou pra mais, como em qualquer
   app de edição. O tracinho marca o zero, pra achar o centro de volta no olho. */
.ajuste-slider {
  width: 100%;
  accent-color: var(--laranja);
  background: linear-gradient(var(--cinza-borda), var(--cinza-borda)) no-repeat
    center / 1px 10px;
}
/* `pan-y` = o arrasto pra cima/baixo pertence ao scroll do painel, não à
   barrinha. A barrinha fica com o arrasto horizontal, que é o dela. */
.filtros-bloco input[type="range"] { touch-action: pan-y; }
/* Um respiro à direita das barrinhas: uma faixa livre pra rolar o painel sem
   encostar em controle nenhum, e é onde a barra de rolagem aparece. */
.ajustes-manuais,
.filtro-intensidade { padding-right: 16px; }

/* Rodapé do editor: 2x2. Coluna da esquerda são as ações principais (laranja),
   a da direita são as de sair. Metade da altura dos botões normais, porque aqui
   eles dividem a tela com a foto, o painel E a barra de atalhos. */
.editor-acoes {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* O `min-height: 62px` do botão normal é generoso demais aqui: são QUATRO deles,
   então cada 10px vira 20px roubados do painel. 44px continua um alvo confortável
   pro dedo. */
.editor-acoes .botao {
  margin: 0;
  width: 100%;
  min-height: 44px;
  padding: 9px 6px;
  font-size: 0.82rem;
  border-radius: 14px;
  gap: 7px;
}
/* Ícone menor: no 2x2 ele competia com o texto e engordava a linha à toa. */
.editor-acoes .botao .icone { font-size: 0.95rem; }

/* ---------- Modo editor (filtros): foto fixa em cima, painel rolando ---------- */
/* `--altura-janela` é medida no app.js. O `100dvh` é só a reserva se a medida
   falhar — sozinho ele não serve, porque não encolhe quando o Chrome do Android
   abre a barra de download. */
/* O `min-height: 100vh` do body normal precisa sair aqui: com ele o body ficava
   com a altura da tela CHEIA mesmo depois de a janela encolher, e o conteúdo
   continuava passando por baixo da barra. */
body.editando {
  height: var(--altura-janela, 100dvh);
  min-height: 0;
  overflow: hidden;
}
/* Os botões grandes de cima dão lugar ao 2x2 — só no editor. */
body.editando #btn-salvar,
body.editando #btn-compartilhar,
body.editando #btn-nova { display: none; }
/* Logo continua no topo, só mais enxuto — a foto sobe pra perto dele. */
body.editando .topo { padding: 6px 24px 2px; }
body.editando .topo-logo-img { height: 44px; }
/* A barra de atalhos CONTINUA aqui, como em toda tela do app — o rodapé 2x2 é
   justamente o que abriu espaço pra ela.
   `--altura-barra` é MEDIDA no app (app.js), não chutada: a barra muda de altura
   conforme o celular, por causa da área do gesto embaixo. Chutei 72px antes e ela
   cobriu o Compartilhar e o Voltar. O 110px é só a rede de segurança se a medida
   falhar. */
body.editando #tela-resultado {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 20px calc(var(--altura-barra, 110px) + 10px);
  gap: 8px;
  overflow: hidden;
}
/* `contain` porque a foto da pessoa vem em qualquer proporção: em pé, deitada
   ou quadrada. Cortar pra caber esconderia justo o que ela quer ver. */
body.editando #foto-resultado {
  flex: 0 0 auto;
  max-height: calc(var(--altura-janela, 100dvh) * 0.34);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Só este bloco rola. A foto e os botões ficam parados. */
/* Barra de rolagem VISÍVEL (como no Windows): mostra que dá pra rolar e dá um
   lugar seguro pra puxar, longe das barrinhas de ajuste. */
body.editando #filtros-bloco {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--laranja) transparent;
}
body.editando #filtros-bloco::-webkit-scrollbar { width: 8px; }
body.editando #filtros-bloco::-webkit-scrollbar-thumb {
  background: var(--laranja);
  border-radius: 999px;
}
body.editando .editor-acoes { flex: 0 0 auto; }
body.editando .dica { display: none; }
/* O ruído não é um "delta": vai de 0 pra cima, então não leva o tracinho do meio
   que os outros deslizadores têm. */
.ajuste-do-zero { background: none; }

/* Diquinha discreta abaixo de uma ação (ex.: sob o "Fazer download"). */
.dica {
  margin: -10px 0 2px;
  font-size: 0.86rem;
  color: var(--texto-suave);
  opacity: 0.8;
  text-align: center;
}

/* Legenda curta logo abaixo de um botão (menu de edição da marca). */
.ajuda-botao {
  margin: -6px 0 10px;
  font-size: 0.9rem;
  color: var(--texto-suave);
  text-align: center;
}

/* Miniatura de foto enviada, com botão remover, nas telas de design. */
.foto-miniatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.foto-miniatura img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco);
}

/* Amostra de cor da paleta atual (só leitura). */
.amostra-cor {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1px solid var(--cinza-borda);
}

.botao-cor {
  border: 1.5px solid var(--cinza-borda);
  border-radius: 18px;
  background: var(--branco);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.botao-cor.escolhida {
  border-color: var(--laranja);
  background: var(--creme-aviso);
}

.bolinha-cor {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.10);
}

/* ---------- Cards de texto ---------- */
.caixa-legenda {
  width: 100%;
  background: var(--branco);
  border: 1px solid var(--verde-selo);
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 20px var(--verde-fraco);
}

.texto-legenda {
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
}

.lista-templates {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.template-card {
  width: 100%;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 20px;
  background: var(--branco);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--verde-fraco);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Foto do modelo: sempre QUADRADA e do mesmo tamanho. */
.template-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.template-card-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,92,0,0.14), rgba(0,75,35,0.14));
}

.template-card span {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--texto);
  padding: 2px 4px 6px;
  text-align: center;
}

.doc-img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 8px 32px var(--verde-fraco);
  display: block;
}

/* ---------- Barra fixa inferior (atalhos de sempre) ---------- */
.barra-inferior {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--branco);
  border-top: 1px solid var(--cinza-borda);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 24px rgba(27, 30, 29, 0.10);
  display: flex;
  z-index: 50;
  /* respeita a área do gesto/botões do celular */
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.barra-item {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 16px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--texto-suave);
}
.barra-icone { font-size: 1.25rem; line-height: 1; }
.barra-rotulo {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}
.barra-item.ativa {
  background: var(--laranja);
  color: var(--branco);
}
/* Espaço pro conteúdo não ficar escondido atrás da barra. */
.tela { padding-bottom: 110px; }

/* Mascote na tela de erro — mais acolhedor que um emoji genérico. */
.erro-tucano {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-top: 12px;
  opacity: 0.9;
  filter: drop-shadow(0 10px 12px rgba(27, 30, 29, 0.15));
}

/* ---------- Cabeçalho do modelo (vitrine + nome) no fluxo de template ---------- */
.template-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.template-topo-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--cinza-borda);
  box-shadow: 0 6px 22px var(--verde-fraco);
  display: block;
}
.template-topo-nome {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--texto);
}
/* Modelo ainda sem vitrine → bloco com emoji no lugar da foto. */
.template-topo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  background: linear-gradient(135deg, rgba(255,92,0,0.14), rgba(0,75,35,0.14));
}

/* ---------- Tela de espera animada (tucano no estúdio) ---------- */
.espera-cena {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 20px auto 8px;
}
.espera-tucano {
  width: 200px;
  height: 200px;
  object-fit: contain;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  animation: espera-bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 14px rgba(27, 30, 29, 0.18));
}
@keyframes espera-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50%      { transform: translateX(-50%) translateY(-16px) rotate(2deg); }
}
.espera-brilho {
  position: absolute;
  font-size: 1.6rem;
  opacity: 0;
  animation: espera-twinkle 1.8s ease-in-out infinite;
}
.espera-brilho.b1 { top: 6%;  left: 12%; animation-delay: 0s; }
.espera-brilho.b2 { top: 0%;  right: 16%; font-size: 2rem; animation-delay: 0.6s; }
.espera-brilho.b3 { bottom: 26%; right: 6%; animation-delay: 1.1s; }
@keyframes espera-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.15) rotate(12deg); }
}
/* Flash suave do estúdio pulsando atrás do tucano. */
.espera-flash {
  position: absolute;
  inset: 12% 12% 8% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 0, 0.45), rgba(255, 138, 0, 0) 68%);
  animation: espera-pulse 2.4s ease-in-out infinite;
}
@keyframes espera-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 0.8;  transform: scale(1.08); }
}
/* Barra de carregamento indeterminada. */
.espera-barra {
  width: 220px;
  max-width: 70%;
  height: 8px;
  border-radius: 999px;
  background: var(--verde-selo);
  overflow: hidden;
  position: relative;
}
.espera-barra span {
  position: absolute;
  top: 0;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dourado), var(--laranja));
  animation: espera-carrega 1.3s ease-in-out infinite;
}
@keyframes espera-carrega {
  0%   { left: -45%; }
  100% { left: 105%; }
}
@media (prefers-reduced-motion: reduce) {
  .espera-tucano, .espera-brilho, .espera-flash, .espera-barra span { animation: none; }
  .espera-brilho { opacity: 1; }
}

/* ---------- Suas marcas: cards (layout do Photoshop) ---------- */
.lista-perfis {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.marca-card {
  background: var(--branco);
  border-radius: 20px;
  box-shadow: 0 6px 22px var(--verde-fraco);
  overflow: hidden;
}
.marca-card.ativa { outline: 2.5px solid var(--laranja); }
.marca-topo {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-align: left;
}
.marca-logo {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  object-fit: contain;
  background: var(--fundo);
}
.marca-logo.bolinha { border-radius: 50%; }
.marca-nome {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.15;
}
.marca-acoes {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 0 12px 12px;
}
.marca-ver-editar {
  flex: 1;
  background: var(--fundo);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 14px;
  padding: 12px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--texto-suave);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.marca-excluir {
  flex: none;
  width: 52px;
  background: var(--fundo);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 14px;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ---------- Caixinha de ajuste por texto (tela de identidade) ---------- */
.caixa-ajuste {
  width: 100%;
  background: var(--branco);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.caixa-ajuste h2 {
  font-size: 1.15rem;
  font-weight: 800;
}

.campo-ajuste {
  min-height: 90px;
  text-align: left;
  resize: vertical;
  font-weight: 500;
}

.campo-ajuste::placeholder {
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---------- Slots de foto (com exemplo por baixo do botão) ---------- */
.slots-fotos {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.slot-foto {
  width: 100%;
  background: var(--branco);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 4px 20px var(--verde-fraco);
}

.slot-foto.preenchido {
  border-color: var(--laranja);
}

.slot-foto-selo {
  cursor: default;
  font-size: 0.9rem;
  padding: 7px 16px;
}

.slot-foto-rotulo {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--texto);
}

.slot-foto-dica {
  margin-top: -10px;
  font-size: 1rem;
}

.slot-foto-miniatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.slot-foto-miniatura img {
  width: 130px;
  height: 173px;
  object-fit: cover;
  border-radius: 14px;
  border: 1.5px solid var(--verde-selo);
  background: var(--fundo);
}

.slot-foto-miniatura-legenda {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto-suave);
}

/* ---------- Grupos de foto (templates com `gruposFoto`, ex.: Lifestyle) ---------- */
.grupos-fotos-lista {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.grupo-foto-card {
  width: 100%;
  background: var(--branco);
  border: 1px solid var(--verde-selo);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  box-shadow: 0 4px 20px var(--verde-fraco);
}

.grupo-foto-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--verde);
}

.grupo-foto-slots {
  display: grid;
  /* nº de colunas é definido no JS conforme a quantidade de fotos do grupo */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.grupo-foto-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* O quadro É o botão: foto enviada, exemplo esmaecido ou "+". */
.grupo-foto-quadro {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 16px;
  background: var(--fundo);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grupo-foto-quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Exemplo fica um pouco esmaecido — é ilustração, não é a foto da pessoa. */
.grupo-foto-quadro img.exemplo { opacity: 0.6; }
.grupo-foto-mais {
  font-size: 2rem;
  font-weight: 700;
  color: var(--texto-suave);
  line-height: 1;
}
.grupo-foto-slot.preenchido .grupo-foto-quadro {
  border-color: var(--laranja);
  border-width: 2.5px;
}

.grupo-foto-slot-rotulo {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.2;
}

.grupo-foto-slot-remover {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texto-suave);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.girando {
  font-size: 4rem;
  animation: balancar 1.6s ease-in-out infinite;
}

.icone-grande { font-size: 4rem; }

@keyframes balancar {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* ===== "Edite com Criaê" (criação livre) ===== */
/* A caixa de texto do pedido: 3 linhas de altura, mesma pegada do campo. */
#edl-texto {
  min-height: 84px;
  resize: vertical;
}

/* Três quadradinhos lado a lado pras fotos extras. */
.edl-extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}
.edl-slot {
  aspect-ratio: 1;
  border: 1.5px dashed var(--cinza-borda);
  border-radius: 16px;
  background: var(--branco);
  color: var(--texto-suave);
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.edl-slot.preenchido {
  border-style: solid;
  border-color: var(--verde-selo);
}
.edl-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Rótulo "Imagem N" dentro do slot vazio da Criação Livre. */
.edl-slot-num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--texto-suave);
  pointer-events: none;
}

/* Os quatro formatos em linha, botões compactos. */
.edl-formatos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}
.edl-formato {
  min-height: 52px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 16px;
  background: var(--branco);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  box-shadow: 0 4px 20px var(--verde-fraco);
}
.edl-formato.escolhida {
  border-color: var(--laranja);
  background: var(--creme-aviso);
  color: var(--laranja-escuro);
}
/* O "Formato original" é um botão solto (fora da grade), então preenche a largura. */
#edl-formato-original {
  width: 100%;
}

/* ASSISTENTE DE POST — os três estados (porta, funil, confirmação) moram em
   divs dentro da mesma tela. Um div comum QUEBRA o `gap` do .tela, e era isso
   que deixava os botões colados uns nos outros. Aqui cada estado repete o mesmo
   empilhamento da tela. O .oculto usa !important, então continua vencendo. */
#tela-assistente > div:not(.template-topo) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Opções do funil: EMPILHADAS, uma por linha. A grade de 2 colunas dos formatos
   foi feita para rótulos curtos ("⬛ Quadrado") e espremia frases como
   "Eu atendendo uma cliente" em três linhas minúsculas. */
.asst-opcoes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.asst-opcoes .edl-formato {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  font-size: 1.02rem;
  text-align: center;
}

/* Revisão dos textos: cada pedaço do post numa caixinha editável, com o nome
   em cima, pra pessoa VER e CORRIGIR antes de gerar (e não aprovar no escuro). */
.asst-campo {
  width: 100%;
  text-align: left;
}
.asst-campo label {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 6px;
}
.asst-campo .ajuda {
  text-align: left;
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.oculto { display: none !important; }

/* ---------- Escolha de aparência (tela de conta) ---------- */
/* Classes NOVAS: nada aqui altera nenhuma tela existente. A pessoa escolhe pelo
   olho, na miniatura — nome sozinho não diz nada pra quem não é do ramo. */
.tema-bloco { width: 100%; text-align: left; }
.tema-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.tema-op {
  border: 1.5px solid var(--cinza-borda);
  border-radius: 16px;
  background: var(--branco);
  cursor: pointer;
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tema-op.escolhida { border-color: var(--laranja); border-width: 2.5px; }
.tema-amostra {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 92px;
  border-radius: 10px;
  display: block;
  border: 1px solid var(--cinza-borda);
  /* a barrinha laranja no rodapé imita a barra de atalhos do app */
  background-repeat: no-repeat;
}
.amostra-claro {
  background-color: #FBF6EC;
  background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FF8A00, #FF8A00);
  background-size: 70% 26%, 60% 12%;
  background-position: center 22%, center 84%;
}
.amostra-escuro {
  background-color: #0C0A08;
  background-image:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255,138,0,.55), transparent 70%),
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)),
    linear-gradient(#FF8A00, #FF8A00);
  background-size: 100% 100%, 70% 26%, 60% 12%;
  background-position: center, center 22%, center 84%;
}
.amostra-maquina {
  background-color: #0C0A08;
  background-image:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)),
    linear-gradient(#FF8A00, #FF8A00),
    url("img/fundo-escuro.jpg?v=2");
  background-size: 70% 26%, 60% 12%, cover;
  background-position: center 22%, center 84%, center;
}
.tema-nome {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 800;
  color: var(--texto);
  text-align: center;
  line-height: 1.2;
}
/* `.rotulo-campo` nasce com `margin-bottom: -8px` para colar num campo de texto.
   Aqui embaixo dele vem uma GRADE, e esse -8px puxava as miniaturas por cima da
   palavra "Aparência do app". Anulado só neste bloco. */
.tema-bloco .rotulo-campo { margin-bottom: 10px; }

/* ============================================================================
   TEMA ESCURO — duas peles, uma identidade só.
   `escuro`         → preto quente com poças de luz laranja (só CSS, peso zero)
   `escuro-maquina` → o interior do aparelho por trás do vidro (img/fundo-escuro.jpg)

   As duas compartilham TUDO: cores, vidro, halo, contorno. Muda só o fundo.
   Nada acima desta linha foi tocado — o tema claro é exatamente o que sempre
   foi, e este bloco só entra em ação quando o <html> ganha `data-tema`, o que
   só acontece por escolha da pessoa na tela de conta.
   ============================================================================ */

:root[data-tema="escuro"],
:root[data-tema="escuro-maquina"] {
  --fundo: #0C0A08;          /* preto quente, no lugar do creme */
  --texto: #F5F1EA;          /* branco levemente quente */
  --texto-suave: #C3B6A8;
  --texto-fraco: #8E8175;

  /* --- Os quatro números do vidro, calibrados no celular do dono ---------
     Ficam soltos aqui de propósito: mudar a aparência do app inteiro é trocar
     um destes, não caçar valor espalhado pelas regras. */
  --vidro-alpha: 0;          /* 0 = vidro totalmente limpo (transparência 100%) */
  --fosco: 5px;              /* desfoque do que passa ATRÁS do vidro */
  --luz-dentro: 0.28;        /* o neon vazando para DENTRO do card */
  --halo: 0.46;              /* o brilho que escapa para FORA */

  /* Vidro laranja: o tom quente aparece quando --vidro-alpha sobe de zero. */
  --branco: rgba(72, 33, 6, var(--vidro-alpha));
  --branco-puro: #FFFFFF;             /* branco de verdade, onde ele é obrigatório */
  --cinza-borda: rgba(255, 138, 0, 0.62);
  --borda-fraca: rgba(255, 138, 0, 0.18);
  --creme-aviso: rgba(255, 138, 0, 0.14);
  /* as sombras esverdeadas viram BRILHO laranja — é o que descola o card do fundo */
  --verde-fraco: rgba(255, 138, 0, var(--halo));
  --verde-selo: rgba(255, 138, 0, 0.30);
  --verde: #F5F1EA;          /* era verde-selva em títulos: no escuro, claro */
  --verde-claro: #7FB03A;    /* verde do Playground, clareado pra viver no preto */
}

/* --- 1. Texto que era branco SOBRE laranja continua branco ---------------- */
/* Sem isto, `color: var(--branco)` viraria vidro escuro sobre fundo escuro e
   o texto sumiria. São os sete lugares do app que usam o token como COR. */
:root[data-tema="escuro"] .conta-creditos,
:root[data-tema="escuro"] .card-perfil-marca,
:root[data-tema="escuro"] .botao-principal,
:root[data-tema="escuro"] .botao-playground,
:root[data-tema="escuro"] .filtro-cat.ativa,
:root[data-tema="escuro"] .botao-zerar,
:root[data-tema="escuro"] .barra-item.ativa,
:root[data-tema="escuro-maquina"] .conta-creditos,
:root[data-tema="escuro-maquina"] .card-perfil-marca,
:root[data-tema="escuro-maquina"] .botao-principal,
:root[data-tema="escuro-maquina"] .botao-playground,
:root[data-tema="escuro-maquina"] .filtro-cat.ativa,
:root[data-tema="escuro-maquina"] .botao-zerar,
:root[data-tema="escuro-maquina"] .barra-item.ativa {
  color: var(--branco-puro);
}

/* --- 2. Os fundos que PRECISAM continuar brancos -------------------------- */
/* Atrás do logo do CLIENTE, cuja cor não controlamos: logo preto em PNG
   transparente sobre fundo preto desapareceria. O quadrado branco é o que
   garante contraste, e essa é justamente a razão de ele existir. */
:root[data-tema="escuro"] .card-perfil-logo,
:root[data-tema="escuro"] .logo-preview,
:root[data-tema="escuro"] .marca-logo,
:root[data-tema="escuro-maquina"] .card-perfil-logo,
:root[data-tema="escuro-maquina"] .logo-preview,
:root[data-tema="escuro-maquina"] .marca-logo {
  background: var(--branco-puro);
}

/* --- 3. O fundo da tela --------------------------------------------------- */
/* A folhagem sai (é imagem, variável não recolore). Entra a pele escolhida. */
:root[data-tema="escuro"] body,
:root[data-tema="escuro-maquina"] body {
  background-image: none;
  background-color: var(--fundo);
}

/* PELE 1 — "escuro": poças de luz sobre preto quente. Nenhum arquivo baixado. */
:root[data-tema="escuro"] body::before {
  content: "";
  position: fixed;   /* fixed = NÃO vira item do flex do body */
  inset: -6%;
  z-index: -2;
  background:
    radial-gradient(ellipse 65% 45% at 18% 12%, rgba(255, 138, 0, .30), transparent 66%),
    radial-gradient(ellipse 55% 40% at 88% 38%, rgba(255, 154, 26, .20), transparent 64%),
    radial-gradient(ellipse 75% 45% at 45% 92%, rgba(255, 138, 0, .22), transparent 62%),
    radial-gradient(ellipse 40% 30% at 70% 68%, rgba(255, 209, 0, .10), transparent 70%),
    linear-gradient(165deg, #16110C 0%, #0A0908 55%, #0D0B09 100%);
  animation: tema-deriva 48s ease-in-out infinite alternate;
}

/* PELE 2 — "escuro-maquina": o interior do aparelho. A arte nasce quase preta,
   por isso o `brightness` levanta ela ANTES de o insulfilme escurecer de volta.
   Valores calibrados no preview: desfoque 1.5px, insulfilme 0.40. */
:root[data-tema="escuro-maquina"] body::before {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: -2;
  background-image: url("img/fundo-escuro.jpg?v=2");
  background-size: cover;
  background-position: center;
  filter: blur(1px) saturate(1.05) brightness(1.95);
  animation: tema-deriva 48s ease-in-out infinite alternate;
}
/* O insulfilme: só a pele da máquina precisa dele. */
:root[data-tema="escuro-maquina"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(8, 7, 6, 0.66);
}

/* O "vídeo" sem vídeo: deslize lento, na placa de vídeo, sem dados nem bateria. */
@keyframes tema-deriva {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2%, -2.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-tema="escuro"] body::before,
  :root[data-tema="escuro-maquina"] body::before { animation: none; }
}

/* --- 4. O VIDRO ----------------------------------------------------------- */
/* Translúcido sozinho deixaria o fundo nítido atrás do texto e mataria a
   leitura. O desfoque é o que permite ver o fundo E ler ao mesmo tempo. */
:root[data-tema="escuro"] .conta-cartao,
:root[data-tema="escuro"] .card-boas-vindas,
:root[data-tema="escuro"] .card-perfil,
:root[data-tema="escuro"] .banner,
:root[data-tema="escuro"] .destaque-card,
:root[data-tema="escuro"] .botao-secundario,
:root[data-tema="escuro"] .perfil-escolher,
:root[data-tema="escuro"] .campo-texto,
:root[data-tema="escuro"] .botao-opcao,
:root[data-tema="escuro"] .filtro-cat,
:root[data-tema="escuro"] .botao-cor,
:root[data-tema="escuro"] .caixa-legenda,
:root[data-tema="escuro"] .template-card,
:root[data-tema="escuro"] .barra-inferior,
:root[data-tema="escuro"] .marca-card,
:root[data-tema="escuro"] .caixa-ajuste,
:root[data-tema="escuro"] .slot-foto,
:root[data-tema="escuro"] .grupo-foto-card,
:root[data-tema="escuro"] .edl-formato,
:root[data-tema="escuro-maquina"] .conta-cartao,
:root[data-tema="escuro-maquina"] .card-boas-vindas,
:root[data-tema="escuro-maquina"] .card-perfil,
:root[data-tema="escuro-maquina"] .banner,
:root[data-tema="escuro-maquina"] .destaque-card,
:root[data-tema="escuro-maquina"] .botao-secundario,
:root[data-tema="escuro-maquina"] .perfil-escolher,
:root[data-tema="escuro-maquina"] .campo-texto,
:root[data-tema="escuro-maquina"] .botao-opcao,
:root[data-tema="escuro-maquina"] .filtro-cat,
:root[data-tema="escuro-maquina"] .botao-cor,
:root[data-tema="escuro-maquina"] .caixa-legenda,
:root[data-tema="escuro-maquina"] .template-card,
:root[data-tema="escuro-maquina"] .barra-inferior,
:root[data-tema="escuro-maquina"] .marca-card,
:root[data-tema="escuro-maquina"] .caixa-ajuste,
:root[data-tema="escuro-maquina"] .slot-foto,
:root[data-tema="escuro-maquina"] .grupo-foto-card,
:root[data-tema="escuro-maquina"] .edl-formato {
  -webkit-backdrop-filter: blur(var(--fosco)) saturate(1.1);
  backdrop-filter: blur(var(--fosco)) saturate(1.1);
}

/* O fio de luz no topo do vidro — é ele que dá a impressão de espessura. */
/* A LUZ POR DENTRO é o que diferencia este vidro de um card só translúcido: o
   `inset` joga o brilho laranja para dentro, como se a lâmpada estivesse atrás
   do vidro e não na moldura. Com o vidro totalmente limpo, é ela — mais o
   contorno — que dá corpo ao botão. */
:root[data-tema="escuro"] .card-boas-vindas,
:root[data-tema="escuro"] .card-perfil,
:root[data-tema="escuro"] .marca-card,
:root[data-tema="escuro"] .caixa-legenda,
:root[data-tema="escuro"] .barra-inferior,
:root[data-tema="escuro"] .botao-opcao,
:root[data-tema="escuro"] .botao-secundario,
:root[data-tema="escuro"] .filtro-cat,
:root[data-tema="escuro"] .conta-cartao,
:root[data-tema="escuro"] .caixa-ajuste,
:root[data-tema="escuro"] .slot-foto,
:root[data-tema="escuro"] .grupo-foto-card,
:root[data-tema="escuro"] .perfil-escolher,
:root[data-tema="escuro"] .template-card,
:root[data-tema="escuro"] .edl-formato,
:root[data-tema="escuro-maquina"] .card-boas-vindas,
:root[data-tema="escuro-maquina"] .card-perfil,
:root[data-tema="escuro-maquina"] .marca-card,
:root[data-tema="escuro-maquina"] .caixa-legenda,
:root[data-tema="escuro-maquina"] .barra-inferior,
:root[data-tema="escuro-maquina"] .botao-opcao,
:root[data-tema="escuro-maquina"] .botao-secundario,
:root[data-tema="escuro-maquina"] .filtro-cat,
:root[data-tema="escuro-maquina"] .conta-cartao,
:root[data-tema="escuro-maquina"] .caixa-ajuste,
:root[data-tema="escuro-maquina"] .slot-foto,
:root[data-tema="escuro-maquina"] .grupo-foto-card,
:root[data-tema="escuro-maquina"] .perfil-escolher,
:root[data-tema="escuro-maquina"] .template-card,
:root[data-tema="escuro-maquina"] .edl-formato {
  box-shadow:
    0 0 24px rgba(255, 138, 0, var(--halo)),          /* halo pra fora */
    inset 0 0 34px rgba(255, 138, 0, var(--luz-dentro)), /* A LUZ POR DENTRO */
    inset 0 1px 0 rgba(255, 190, 120, .16);          /* fio de luz quente no topo */
}

/* --- 4-B. Contorno neon em quem NÃO tem borda no claro -------------------- */
/* `.banner` e `.destaque-card` declaram `border: none`; `.conta-cartao`,
   `.card-boas-vindas` e `.marca-card` não declaram borda nenhuma. No claro isso
   é certo (a sombra esverdeada já os separa do creme), mas no escuro eles
   ficavam sem o contorno luminoso e pareciam manchas soltas no fundo. */
:root[data-tema="escuro"] .conta-cartao,
:root[data-tema="escuro"] .card-boas-vindas,
:root[data-tema="escuro"] .banner,
:root[data-tema="escuro"] .destaque-card,
:root[data-tema="escuro"] .marca-card,
:root[data-tema="escuro-maquina"] .conta-cartao,
:root[data-tema="escuro-maquina"] .card-boas-vindas,
:root[data-tema="escuro-maquina"] .banner,
:root[data-tema="escuro-maquina"] .destaque-card,
:root[data-tema="escuro-maquina"] .marca-card {
  border: 1px solid var(--cinza-borda);
}
/* A barra de baixo só tem borda no topo: no escuro ela vira contorno inteiro. */
:root[data-tema="escuro"] .barra-inferior,
:root[data-tema="escuro-maquina"] .barra-inferior {
  border: 1px solid var(--cinza-borda);
  border-bottom: none;
}

/* Os cards com FOTO tinham aqui um vidro próprio, mais fino que o resto. Com o
   vidro geral agora totalmente limpo, aquele valor os deixaria MAIS opacos que
   todo o resto do app — o oposto do que ele existia para fazer. Seguem o vidro
   comum, como todo mundo. */

/* --- 5. O card do perfil troca de papel ----------------------------------- */
/* No claro ele é o bloco LARANJA com o botão branco dentro. No escuro isso se
   inverte: o card vira vidro e quem acende é o botão. Só aparência — mesma
   estrutura, mesmos elementos, mesma ordem. */
:root[data-tema="escuro"] .card-perfil,
:root[data-tema="escuro-maquina"] .card-perfil {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
}
:root[data-tema="escuro"] .card-perfil-tag,
:root[data-tema="escuro-maquina"] .card-perfil-tag { color: var(--texto); }
:root[data-tema="escuro"] .card-perfil-desc,
:root[data-tema="escuro-maquina"] .card-perfil-desc { color: var(--texto-suave); }
:root[data-tema="escuro"] .card-perfil-cta,
:root[data-tema="escuro-maquina"] .card-perfil-cta {
  background: linear-gradient(180deg, var(--laranja-claro), var(--laranja));
  color: var(--branco-puro);
  box-shadow: 0 0 26px rgba(255, 138, 0, .5);
}

/* --- 6. O que acende ------------------------------------------------------ */
:root[data-tema="escuro"] .botao-principal,
:root[data-tema="escuro-maquina"] .botao-principal {
  box-shadow: 0 0 30px rgba(255, 138, 0, .5), 0 4px 14px rgba(0, 0, 0, .45);
}
:root[data-tema="escuro"] .barra-item.ativa,
:root[data-tema="escuro-maquina"] .barra-item.ativa {
  box-shadow: 0 0 24px rgba(255, 138, 0, .5);
}
:root[data-tema="escuro"] .botao-opcao.escolhida,
:root[data-tema="escuro-maquina"] .botao-opcao.escolhida {
  color: #FFC06A;
  box-shadow: 0 0 26px rgba(255, 138, 0, .4);
}
:root[data-tema="escuro"] .filtro-item.ativo img,
:root[data-tema="escuro-maquina"] .filtro-item.ativo img {
  box-shadow: 0 0 16px rgba(255, 138, 0, .55);
}

/* --- 7. Detalhes que não são cor ------------------------------------------ */
/* O LOGOTIPO é preto e desaparecia no fundo escuro. Antes ele era pintado de
   branco por filtro (`brightness(0) invert(1)`), o que apagava JUNTO o amarelo e
   o laranja do acento do "ê". Agora entra a segunda arte — `logo-branco.png`,
   letras claras e acento com as MESMAS cores do tema claro.
   `content: url()` troca a imagem sem tocar no `index.html`, então o tema claro
   segue sendo a simples AUSÊNCIA do `data-tema`. A arte só é baixada por quem
   está no escuro. */
:root[data-tema="escuro"] .topo-logo-img,
:root[data-tema="escuro-maquina"] .topo-logo-img {
  content: url("img/logo-branco.png?v=1");
}
/* O mascote na tela de erro perde a sombra preta (invisível no escuro). */
:root[data-tema="escuro"] .erro-tucano,
:root[data-tema="escuro-maquina"] .erro-tucano {
  filter: drop-shadow(0 10px 14px rgba(255, 138, 0, .25));
}
/* O aviso amarelo do modo demonstração: no escuro o texto tem que clarear. */
:root[data-tema="escuro"] .aviso-demo,
:root[data-tema="escuro-maquina"] .aviso-demo {
  color: var(--dourado);
}

/* ---------- "Meu Estilo": a lista dos estilos que a pessoa já tem ----------
   Nasceu de um teste na tela: reaproveitar `.perfil-linha` deixava o nome
   espremido em duas linhas e os botões colados no rótulo do bloco. Aqui cada
   estilo é um cartão com o nome ocupando o espaço que sobra e os dois botões
   pequenos à direita. */
.me-lista-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 18px;
  background: var(--branco);
}
.me-lista-nome {
  flex: 1;
  text-align: left;
  font-weight: 800;
  color: var(--texto);
}
/* Os botões da linha não são de página inteira: encolhem para caber ao lado. */
.me-lista-linha .botao {
  width: auto;
  margin: 0;
  padding: 8px 12px;
  min-height: 0;
  font-size: 0.95rem;
}
/* O rótulo do bloco precisa de ar: sem isto o primeiro cartão da lista subia
   por cima dele. */
#me-lista { margin-top: 10px; }