/* ==========================================================================
   Studio Xpert — PELE DE PAPEL (17/09/2026)

   Pedido dela: "arruma as outras telas no mesmo visual". A tela Criar ganhou
   cartões de papel bege com borda em tom de papel; o resto do Studio continuava
   branco com borda quase invisível, e parecia outro produto a cada clique.

   ⚠️ Esta folha entra DEPOIS do <style> de cada página, por isso ganha dela sem
   precisar mexer em 10 arquivos. Nada de !important: se alguma tela precisar de
   exceção, ela escreve a regra dela e continua valendo.
   ========================================================================== */

:root{ --bg:#F4F1EA; --card:#F2F0EA; --line:#cfc7b5; }

body{ background:var(--bg); }

/* cartões e painéis: mesmo papel, mesma borda, mesmo canto */
.painel, .card, .card-acao, .cont-card, .caminho, .widget, .nv-fonte, .bloco, .caixa{
  background:#F2F0EA;
  border:1.5px solid #cfc7b5;
  border-radius:16px;
}

/* título de tela com o traço laranja, igual ao das artes */
.wrap > h1, .cabeca h1, main > h1{ letter-spacing:-.4px; margin-bottom:2px; }
.wrap > h1::after, .cabeca h1::after, main > h1::after{
  content:""; display:block; width:70px; height:4px; border-radius:3px;
  background:#FC5412; margin:12px 0 10px;
}

/* botões: canto igual ao dos cartões, verde na ação, claro no secundário */
.btn{ border-radius:12px; }
.btn-primary, .b-ink{ background:#0F7A4F; color:#fff; }
.btn-ghost{ background:#fff; border:1.5px solid #cfc7b5; color:#12241C; }

/* campos de texto: fundo branco sobre o papel, para a escrita ter contraste */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=url], textarea, select{
  background:#fff; border:1.5px solid #e3ded2; border-radius:12px;
}

/* abas e etiquetas */
.badge, .selo{ border-radius:999px; }

/* --------------------------------------------------------------------------
   Listas de dentro (ideias guardadas, pesquisas, sugestões, artes feitas):
   ela pediu "tipo cards também". Aqui NÃO entra arte de fundo — cada item é um
   dado dela, com texto diferente; a mesma ilustração repetida vinte vezes vira
   ruído. O que entra é a mesma pele: papel, borda de papel, canto igual, e o
   botão sempre colado no pé, para os cartões terminarem alinhados.
   -------------------------------------------------------------------------- */
.ideia{
  background:#F2F0EA;
  border:1.5px solid #cfc7b5;
  border-radius:16px;
  padding:16px 18px;
  min-height:160px;
}
.ideia h3{ font-size:15px; letter-spacing:-.2px; }
.ideia .linha{ color:#5C6F66; }
.ideia > div:last-child{ margin-top:auto; }
.ideia .btn{ border-radius:11px; }
.tag{ border-radius:999px; padding:4px 11px; }

/* --------------------------------------------------------------------------
   Barra lateral (17/09) — ela: "o menu está destoando". Era o único bloco
   escuro depois que tudo virou papel. Agora ela é papel também, um tom mais
   fechado que o fundo para ainda se separar, com o item ativo em verde cheio.
   -------------------------------------------------------------------------- */
.lateral{
  background:#EDE9DF;
  color:#12241C;
  border-right:1.5px solid #cfc7b5;
}
.lateral .marca, .lateral .marca-txt{ color:#12241C; }
.lateral .marca-leve{ color:#5C6F66; }
.lateral .marca-x{ color:#0F7A4F; }
.lateral nav a{ color:#39473F; }
.lateral nav a:hover{ background:#E2DCCE; color:#12241C; box-shadow:none; }
.lateral nav a.ativo{ background:#0F7A4F; color:#fff; }
.lateral .sair{ color:#5C6F66; }
.lateral .sair:hover{ color:#0F7A4F; }
.lateral .ia-caixa{ background:#F6F3EA; border:1.5px solid #cfc7b5; color:#39473F; border-radius:14px; }
.lateral .ia-caixa b{ color:#12241C; }
.lateral .conta, .lateral .perfil{ background:#F6F3EA; border:1.5px solid #cfc7b5; border-radius:14px; color:#12241C; }
.lateral .barra{ background:#dcd6c8; }
.lateral .barra i{ background:#0F7A4F; }

/* Cartão da conta no menu (vem do assets/conta-topo.js, que injeta o estilo dele
   em tempo de execução — por isso aqui o seletor precisa ser mais específico que
   o dele, senão o injetado ganha e a letra fica branca no papel claro). */
aside.lateral #hxContaTopo{
  background:#F6F3EA; border:1.5px solid #cfc7b5; color:#12241C; border-radius:14px;
}
aside.lateral #hxContaTopo b{ color:#12241C; }
aside.lateral #hxContaTopo small{ color:#5C6F66; opacity:1; }
aside.lateral #hxTroca{ color:#5C6F66; }
aside.lateral #hxTroca>button{ color:#0F7A4F; opacity:1; }

/* 📱 20/09/2026 — menu do celular embrulha em vez de rolar de lado.
   Eram nove itens numa faixa de rolagem horizontal: em 375px metade ficava fora
   da tela sem nenhum aviso, e a marca era cortada pela borda. Embrulhando, tudo
   aparece — custa duas linhas de altura e devolve o menu inteiro. */
@media(max-width:720px){
  aside.lateral{ flex-wrap:wrap; overflow-x:visible; row-gap:8px; padding:10px 12px 12px; }
  aside.lateral .marca{ flex:1 0 auto; padding:0; }
  aside.lateral nav{ flex-wrap:wrap; gap:5px; width:100%; }
  aside.lateral nav a{ font-size:12.5px; padding:7px 10px; }
  aside.lateral .sair{ margin-left:auto; }
  aside.lateral .ia-caixa, aside.lateral #hxContaTopo{ display:none; }
}
/* --------------------------------------------------------------------------
   21/09/2026 — a OUTRA barra lateral.
   O lateral.js cria `.lateral-lat` nas páginas que só tinham barra de cima; as
   demais trazem `.lateral` escrita à mão. Este arquivo vestia só a segunda, e por
   isso Sugestões, Tráfego, Minhas criações e companhia continuaram escuras depois
   que tudo virou papel. Mesmas cores da `.lateral`, para as duas serem a mesma coisa.
   -------------------------------------------------------------------------- */
.lateral-lat{
  background:#EDE9DF;
  color:#12241C;
  border-right:1.5px solid #cfc7b5;
}
.lateral-lat .marca, .lateral-lat .marca .marca-txt{ color:#12241C; }
.lateral-lat .marca .marca-leve{ color:#5C6F66; }
.lateral-lat .marca .marca-x{ color:#0F7A4F; }
.lateral-lat nav a{ color:#39473F; }
.lateral-lat nav a:hover{ background:#E2DCCE; color:#12241C; box-shadow:none; }
.lateral-lat nav a.ativo{ background:#0F7A4F; color:#fff; }
.lateral-lat .sair{ color:#5C6F66; }
.lateral-lat .sair:hover{ color:#0F7A4F; }
.lateral-lat .ia-caixa{ background:#F6F3EA; border:1.5px solid #cfc7b5; color:#39473F; border-radius:14px; }
.lateral-lat .ia-caixa b{ color:#12241C; }
aside.lateral-lat #hxContaTopo{
  background:#F6F3EA; border:1.5px solid #cfc7b5; color:#12241C; border-radius:14px;
}
aside.lateral-lat #hxContaTopo b{ color:#12241C; }
aside.lateral-lat #hxContaTopo small{ color:#5C6F66; opacity:1; }
aside.lateral-lat #hxTroca{ color:#5C6F66; }
aside.lateral-lat #hxTroca>button{ color:#0F7A4F; opacity:1; }

/* --------------------------------------------------------------------------
   O painel do topo (.hero) era escuro no tema antigo, para contrastar com o fundo
   claro. No papel, bloco escuro é o que destoa. Vestir de papel obriga a trocar o
   texto de dentro junto: as regras antigas pintam o parágrafo de cinza-claro, que
   no creme fica ilegível.
   -------------------------------------------------------------------------- */
.hero{
  background:#EDE9DF;
  color:#12241C;
  border:1.5px solid #cfc7b5;
}
.hero h1, .hero h1 em{ color:#12241C; }
.hero p{ color:#5C6F66; }
.hero .oumais{ color:#5C6F66; }
.hero .oumais a{ color:#0F7A4F; }
.hero input[type=text]::placeholder{ color:#8a968f; }

/* o menu do celular vale para as duas barras */
@media(max-width:720px){
  aside.lateral-lat{ flex-wrap:wrap; overflow-x:visible; row-gap:8px; padding:10px 12px 12px; }
  aside.lateral-lat .marca{ flex:1 0 auto; padding:0; }
  aside.lateral-lat nav{ flex-wrap:wrap; gap:5px; width:100%; }
  aside.lateral-lat nav a{ font-size:12.5px; padding:7px 10px; }
  aside.lateral-lat .sair{ margin-left:auto; }
  aside.lateral-lat .ia-caixa, aside.lateral-lat #hxContaTopo{ display:none; }
}
/* --------------------------------------------------------------------------
   21/09/2026 — a BARRA DE CIMA também é papel.
   Templates, Plano e Criar arte não usam o menu lateral: continuam com a
   `.topbar`, que no tema antigo era escura. Aqui ela recebe a mesma pele do
   menu lateral, para as duas navegações serem a mesma coisa aos olhos.
   O texto de dentro precisa vir junto: as regras antigas pintam os links de
   cinza-claro, que no papel some.
   -------------------------------------------------------------------------- */
.topbar{
  background:#EDE9DF;
  color:#12241C;
  border-bottom:1.5px solid #cfc7b5;
}
.topbar .marca, .topbar .marca-txt{ color:#12241C; }
.topbar .marca-leve{ color:#5C6F66; }
.topbar .marca-x{ color:#0F7A4F; }
.topbar nav a{ color:#39473F; }
.topbar nav a:hover, .topbar nav a.ativo{ color:#12241C; }
.topbar nav a.ativo{ border-bottom:2px solid #0F7A4F; padding-bottom:2px; }
.topbar .sair, .topbar a[href*='sair']{ color:#5C6F66; }
.topbar .sair:hover{ color:#0F7A4F; }
/* o cartão da conta é injetado pelo conta-topo.js: precisa de seletor mais forte */
.topbar #hxContaTopo{ background:#F6F3EA; border:1.5px solid #cfc7b5; color:#12241C; border-radius:14px; }
.topbar #hxContaTopo b{ color:#12241C; }
.topbar #hxContaTopo small{ color:#5C6F66; opacity:1; }
.topbar #hxTroca{ color:#5C6F66; }
.topbar #hxTroca>button{ color:#0F7A4F; opacity:1; }