/* ============================================================
   Capitão Contas — folha de estilo única.

   Arquivo de verdade, com destaque de sintaxe e sem barra invertida
   dobrada. Na v1 isto vivia dentro de uma string de JavaScript.

   Tema: escuro por padrão (é o do mercado), com claro disponível.
   Toda cor mora numa variável — trocar a identidade da loja é
   mexer só no bloco :root.
   ============================================================ */

:root{
  --fundo:        #0d1018;
  --fundo-2:      #141926;
  --fundo-3:      #1c2333;
  --borda:        #263048;
  --texto:        #e8ecf5;
  --texto-2:      #98a3bb;
  --texto-3:      #6b7791;

  --tom:          #4d7cff;
  --tom-forte:    #6b91ff;
  --tom-fundo:    #16203c;
  --ouro:         #f0b429;
  --verde:        #2fbf71;
  --vermelho:     #f0506e;

  --raio:         14px;
  --raio-p:       9px;
  --sombra:       0 4px 20px rgba(0,0,0,.35);
  --largura:      1440px;

  /* Card de categoria. A v1 usava 165px (o padrão do mercado é ~160).
     ATENÇÃO: o "5px a mais que a GGMax" que o Victor pediu nunca foi
     confirmado com medida — o ambiente bloqueia o domínio deles.
     Este número veio da v1, que ele aprovou olhando. */
  --cat-largura:  165px;
}

html[data-tema="claro"]{
  --fundo:   #f4f6fb;
  --fundo-2: #ffffff;
  --fundo-3: #eef1f8;
  --borda:   #d9e0ee;
  --texto:   #131824;
  --texto-2: #56617a;
  --texto-3: #808caa;
  --tom-fundo: #e8effe;
  --sombra:  0 4px 18px rgba(20,30,60,.09);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; line-height:1.25; font-weight:700; letter-spacing:-.015em; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--tom); color:#fff; padding:10px 16px; border-radius:0 0 var(--raio-p) 0;
}
.pular:focus{ left:0; }

:focus-visible{ outline:2px solid var(--tom-forte); outline-offset:2px; }

/* ---------------- TOPO ---------------- */
.topo{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--fundo-2) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);
}
.faixa-topo{
  max-width:var(--largura); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:18px;
}
.marca{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.marca-icone{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg,var(--tom),#8b5cf6);
  box-shadow:0 2px 10px rgba(77,124,255,.4);
}
.marca-texto{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.marca-texto b{ font-weight:800; color:var(--tom-forte); }

.procura{ flex:1; display:flex; max-width:560px; }
.procura input{
  flex:1; min-width:0;
  background:var(--fundo-3); border:1px solid var(--borda); border-right:0;
  color:var(--texto); font-size:14.5px; padding:10px 14px;
  border-radius:var(--raio-p) 0 0 var(--raio-p);
}
.procura input::placeholder{ color:var(--texto-3); }
.procura button{
  background:var(--tom); border:0; color:#fff; padding:0 16px; cursor:pointer;
  border-radius:0 var(--raio-p) var(--raio-p) 0;
}
.procura svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

.acoes{ display:flex; align-items:center; gap:9px; margin-left:auto; }
.btn-tema{
  background:var(--fundo-3); border:1px solid var(--borda); color:var(--texto-2);
  width:38px; height:38px; border-radius:var(--raio-p); cursor:pointer;
  display:grid; place-items:center;
}
.btn-tema svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.btn-tema:hover{ color:var(--texto); }

.menu{
  max-width:var(--largura); margin:0 auto; padding:0 20px 10px;
  display:flex; gap:20px; overflow-x:auto; scrollbar-width:none;
}
.menu::-webkit-scrollbar{ display:none; }
.menu a{ color:var(--texto-2); font-size:14px; white-space:nowrap; padding:4px 0; }
.menu a:hover{ color:var(--texto); }

/* ---------------- BOTÕES ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--raio-p); border:1px solid transparent;
  font-size:14.5px; font-weight:600; cursor:pointer; transition:.15s;
}
.btn-cheio{ background:var(--tom); color:#fff; }
.btn-cheio:hover{ background:var(--tom-forte); }
.btn-linha{ background:transparent; border-color:var(--borda); color:var(--texto); }
.btn-linha:hover{ border-color:var(--tom); color:var(--tom-forte); }
.btn-fraco{ background:var(--fundo-3); color:var(--texto); }

/* ---------------- CAPA ---------------- */
.capa{
  background:
    radial-gradient(900px 300px at 20% -20%, rgba(77,124,255,.22), transparent),
    radial-gradient(700px 260px at 85% -10%, rgba(139,92,246,.18), transparent),
    var(--fundo-2);
  border-bottom:1px solid var(--borda);
}
.capa-dentro{ max-width:var(--largura); margin:0 auto; padding:52px 20px 46px; }
.capa h1{ font-size:clamp(26px,4vw,40px); max-width:20ch; }
.capa p{ color:var(--texto-2); margin:12px 0 0; font-size:16px; }

/* ---------------- BLOCOS ---------------- */
.bloco{ max-width:var(--largura); margin:0 auto; padding:34px 20px 6px; }
.bloco-topo{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.bloco-topo h2{ font-size:20px; }
.ver-mais{ margin-left:auto; color:var(--tom-forte); font-size:14px; font-weight:600; }
.ver-mais:hover{ text-decoration:underline; }
.bloco-fim{ display:flex; justify-content:center; margin-top:18px; }

/* ---------------- CARDS DE CATEGORIA ---------------- */
.cats{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(var(--cat-largura),1fr));
}
/* Em tela larga, as 8 populares ficam numa fileira só, como no
   mercado. A conta fecha em ~165px por card: 1440 de largura,
   menos 40 de respiro, menos 7 vãos de 12, dividido por 8. */
@media (min-width:1180px){
  .cats{ grid-template-columns:repeat(8,1fr); }
}
.cat{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--raio); border:1px solid var(--borda);
  background:var(--fundo-2); aspect-ratio:4/3; transition:.18s;
}
.cat:hover{ transform:translateY(-3px); border-color:var(--tom); box-shadow:var(--sombra); }
.cat-capa{ width:100%; height:100%; object-fit:cover; }
/* Sem capa ainda: bloco neutro. Nada de arte de jogo protegida. */
.cat-vazia{
  width:100%; height:100%;
  background:linear-gradient(140deg,var(--fundo-3),var(--fundo-2));
  display:grid; place-items:center;
}
.cat-vazia span{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--tom),#8b5cf6); opacity:.5;
}
.cat-nome{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px;
  background:linear-gradient(transparent,rgba(6,9,16,.88));
  color:#fff; font-size:14px; font-weight:600;
}

/* ---------------- CARDS DE ANÚNCIO ---------------- */
.anuncios{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.anuncio{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); overflow:hidden; display:flex; flex-direction:column;
  transition:.18s;
}
.anuncio:hover{ transform:translateY(-3px); border-color:var(--tom); box-shadow:var(--sombra); }
.anuncio-foto{ aspect-ratio:16/10; background:var(--fundo-3); }
.anuncio-corpo{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.anuncio-titulo{
  font-size:14px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.anuncio-vendedor{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--texto-2); }
.anuncio-preco{ margin-top:auto; font-size:18px; font-weight:800; letter-spacing:-.02em; }
.anuncio-preco small{ font-size:12px; font-weight:600; color:var(--texto-3); margin-right:3px; }

/* Selo do Capitão. Vem do tipo da conta no banco, não é texto editável. */
.selo{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:var(--tom-fundo); color:var(--tom-forte); border:1px solid var(--tom);
}
.selo-capitao{
  background:linear-gradient(135deg,#f0b429,#ff8a3d); color:#1a1206;
  border-color:transparent;
}

/* ---------------- VAZIO HONESTO ---------------- */
.vazio{
  border:1px dashed var(--borda); border-radius:var(--raio);
  padding:22px; text-align:center; color:var(--texto-2); font-size:14.5px;
  background:var(--fundo-2);
}

/* ---------------- ENCERRAMENTO ---------------- */
.encerra{ max-width:var(--largura); margin:44px auto 0; padding:0 20px; }
.encerra-dentro{
  border:1px solid var(--borda); border-radius:var(--raio);
  background:
    radial-gradient(600px 200px at 15% 0%, rgba(77,124,255,.16), transparent),
    var(--fundo-2);
  padding:36px 30px; text-align:center;
}
.encerra h2{ font-size:22px; }
.encerra p{ color:var(--texto-2); max-width:56ch; margin:12px auto 22px; }

/* ---------------- RODAPÉ ---------------- */
.rodape{ margin-top:56px; border-top:1px solid var(--borda); background:var(--fundo-2); }
.rodape-grade{
  max-width:var(--largura); margin:0 auto; padding:38px 20px 26px;
  /* Quatro colunas desde que entrou a coluna Legal (termos e dados).
     O minmax evita que a primeira, que tem a marca e o lema, esmague
     as outras em tela estreita. */
  display:grid; gap:26px;
  grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr));
}
.rodape-grade h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-3); margin-bottom:10px; }
.rodape-grade a{ display:block; color:var(--texto-2); font-size:14px; padding:3px 0; }
.rodape-grade a:hover{ color:var(--texto); }
.rodape-lema{ color:var(--texto-2); font-size:14px; margin:8px 0 0; max-width:40ch; }
.rodape-fim{
  max-width:var(--largura); margin:0 auto; padding:14px 20px 26px;
  border-top:1px solid var(--borda); color:var(--texto-3); font-size:13px;
}

@media (max-width:820px){
  .rodape-grade{ grid-template-columns:1fr 1fr; }
  .procura{ order:3; flex-basis:100%; max-width:none; }
  .faixa-topo{ flex-wrap:wrap; }
}
@media (max-width:460px){
  .rodape-grade{ grid-template-columns:1fr; }
}

/* Card sem capa: o nome não precisa da faixa escura, porque não tem
   foto embaixo pra dar contraste. Assim o vazio não fica pesado no
   tema claro. Quando o Victor subir a arte, a faixa volta sozinha. */
.cat:has(.cat-vazia) .cat-nome{
  background:none;
  color:var(--texto);
  padding:10px 12px;
}

/* ---------------- ENTRAR / CRIAR CONTA ----------------
   O cartão fica no meio por grid + place-items, e a altura mínima
   desconta o topo. Na v1 este bloco era um popup que nascia no
   canto porque o reset da página zerava a margem automática. */
.porta{
  min-height:calc(100vh - 190px);
  display:grid; place-items:center;
  padding:40px 20px;
}
.porta-cartao{
  width:100%; max-width:400px;
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); box-shadow:var(--sombra);
  padding:8px 26px 24px;
}
.porta-abas{ display:flex; gap:4px; margin:0 -26px 22px; padding:0 26px;
             border-bottom:1px solid var(--borda); }
.porta-aba{
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--texto-2); font:inherit; font-size:15px; font-weight:600;
  padding:14px 4px; margin-bottom:-1px; cursor:pointer;
  flex:1;
}
.porta-aba[aria-selected="true"]{ color:var(--texto); border-bottom-color:var(--tom); }

.porta-form{ display:flex; flex-direction:column; gap:15px; }
/* display:flex passa por cima do atributo hidden do HTML (que só vale
   como display:none de baixa prioridade). Sem esta linha, os dois
   formulários aparecem empilhados na mesma tela. */
.porta-form[hidden]{ display:none; }
.porta-form label{ display:flex; flex-direction:column; gap:6px; }
.porta-form label > span{ font-size:13.5px; font-weight:600; color:var(--texto-2); }
.porta-form input{
  background:var(--fundo-3); border:1px solid var(--borda); color:var(--texto);
  border-radius:var(--raio-p); padding:11px 13px; font:inherit; font-size:15px;
}
.porta-form input:focus{ border-color:var(--tom); }
.porta-form small{ font-size:12.5px; color:var(--texto-3); }
.porta-form .btn{ margin-top:6px; }
.porta-erro{
  margin:0; padding:10px 13px; border-radius:var(--raio-p);
  background:color-mix(in srgb, var(--vermelho) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--vermelho) 45%, transparent);
  color:var(--vermelho); font-size:13.5px;
}
.porta-rodape{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--borda);
  color:var(--texto-3); font-size:13px; text-align:center;
}
.porta-troca{ margin:2px 0 0; text-align:center; font-size:13.5px; color:var(--texto-3); }
.porta-troca a{ color:var(--tom-forte); font-weight:600; }
.porta-troca a:hover{ text-decoration:underline; }

/* ---------------- O POPUP ----------------
   margin:auto é o que mantém ele no meio da tela. Na v1 o reset da
   página zerava essa margem e o popup nascia no canto. */
.modal{
  margin:auto;
  width:min(420px, calc(100vw - 32px));
  padding:0; border:0; background:transparent; overflow:visible;
}
.modal::backdrop{ background:rgba(4,7,14,.72); backdrop-filter:blur(3px); }
.modal .porta-cartao{ max-width:none; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.modal-x{
  position:absolute; top:10px; right:12px; z-index:2;
  background:none; border:0; color:var(--texto-3);
  font-size:26px; line-height:1; cursor:pointer; padding:4px 8px;
}
.modal-x:hover{ color:var(--texto); }
.modal[open]{ animation:sobe .16s ease-out; }
@keyframes sobe{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion: reduce){ .modal[open]{ animation:none; } }

/* ---------------- OLHINHO DA SENHA ---------------- */
.com-olho{ position:relative; display:flex; }
.com-olho input{ flex:1; padding-right:44px !important; }
.olho{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--texto-3);
  width:36px; height:36px; cursor:pointer; display:grid; place-items:center;
}
.olho:hover{ color:var(--texto); }
.olho svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; }

/* ---------------- FORÇA DA SENHA ---------------- */
.forca{ display:flex; align-items:center; gap:9px; margin-top:2px; }
.forca-barra{ flex:1; height:5px; border-radius:99px; background:var(--fundo-3); overflow:hidden; }
.forca-barra i{ display:block; height:100%; width:0; border-radius:99px; transition:.2s; }
.forca-barra .nota-0,.forca-barra .nota-1{ background:var(--vermelho); }
.forca-barra .nota-2{ background:var(--ouro); }
.forca-barra .nota-3{ background:#7bc96f; }
.forca-barra .nota-4{ background:var(--verde); }
.forca-texto{ font-size:12px; color:var(--texto-3); min-width:44px; }

.regras{ list-style:none; padding:0; margin:8px 0 0; display:flex;
  flex-direction:column; gap:4px; }
.regras li{ font-size:12.5px; color:var(--texto-3); padding-left:20px; position:relative; }
.regras li::before{
  content:'○'; position:absolute; left:2px; top:-1px; font-size:13px;
}
.regras li.ok{ color:var(--verde); }
.regras li.ok::before{ content:'✓'; font-weight:700; }

.confere{ font-size:12.5px; }
.confere.certo{ color:var(--verde) !important; }
.confere.errado{ color:var(--vermelho) !important; }

/* ---------------- MIGALHA E SUBTÍTULO ---------------- */
.migalha{
  max-width:var(--largura); margin:0 auto; padding:18px 20px 0;
  color:var(--texto-3); font-size:13px;
}
.migalha a{ color:var(--texto-2); }
.migalha a:hover{ color:var(--tom-forte); }
.sub{ font-size:17px; margin:30px 0 14px; }
.contagem{ margin-left:auto; color:var(--texto-3); font-size:13.5px; }
.aviso-casa{
  background:var(--tom-fundo); border:1px solid var(--tom);
  color:var(--texto); border-radius:var(--raio-p);
  padding:12px 15px; font-size:14px; margin:0 0 18px;
}

/* ---------------- PÁGINA DO ANÚNCIO ---------------- */
.anuncio-pagina{
  max-width:var(--largura); margin:0 auto; padding:16px 20px 10px;
  display:grid; gap:30px; grid-template-columns:minmax(0,1fr) 340px;
  align-items:start;
}
.anuncio-h1{ font-size:24px; margin:14px 0 18px; }
.galeria{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.galeria img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--raio-p); border:1px solid var(--borda);
}
.galeria img:first-child{ grid-column:1/-1; aspect-ratio:16/9; }
.galeria-vazia{
  display:grid; place-items:center; aspect-ratio:16/7; max-height:260px;
  background:var(--fundo-2); border:1px dashed var(--borda);
  border-radius:var(--raio); color:var(--texto-3); font-size:14px;
}
.descricao p{ color:var(--texto-2); margin:0 0 12px; line-height:1.65; }
.ficha{ width:100%; border-collapse:collapse; font-size:14px; }
.ficha th,.ficha td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--borda);
}
.ficha th{ color:var(--texto-2); font-weight:600; width:38%; }

.anuncio-direita{ position:sticky; top:112px; display:flex; flex-direction:column; gap:14px; }
.compra{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:20px; display:flex; flex-direction:column; gap:12px;
}
.compra-preco{ font-size:30px; font-weight:800; letter-spacing:-.03em; }
.compra-preco small{ font-size:15px; font-weight:600; color:var(--texto-3); margin-right:4px; }
.compra-estoque{ color:var(--texto-2); font-size:13.5px; margin-top:-6px; }
.compra-tipo{ color:var(--texto-3); font-size:12.5px; text-align:center; }
.btn-grande{ padding:14px 20px; font-size:15.5px; width:100%; }

.vendedor-caixa{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:16px 18px;
  display:flex; flex-direction:column; gap:5px;
  align-items:flex-start;   /* senão o selo estica na largura toda */
}
.vendedor-caixa .selo{ align-self:flex-start; }
.vendedor-titulo{ color:var(--texto-3); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.vendedor-nome{ font-weight:700; font-size:16px; }
.vendedor-nome:hover{ color:var(--tom-forte); }
.vendedor-nota{ color:var(--texto-2); font-size:13px; }

.confianca{
  background:var(--tom-fundo); border:1px solid var(--tom);
  border-radius:var(--raio); padding:16px 18px;
}
.confianca h3{ font-size:14.5px; margin-bottom:7px; }
.confianca p{ margin:0; color:var(--texto-2); font-size:13.5px; line-height:1.6; }

/* ---------------- PAGINAÇÃO ---------------- */
.paginacao{ display:flex; gap:6px; justify-content:center; margin:26px 0 6px; flex-wrap:wrap; }
.paginacao a,.pag-atual{
  min-width:38px; padding:9px 12px; text-align:center;
  border:1px solid var(--borda); border-radius:var(--raio-p);
  font-size:14px; color:var(--texto-2);
}
.paginacao a:hover{ border-color:var(--tom); color:var(--texto); }
.pag-atual{ background:var(--tom); border-color:var(--tom); color:#fff; font-weight:700; }

/* ---------------- PERFIL ---------------- */
.perfil{ max-width:var(--largura); margin:0 auto; padding:0 20px; }
.perfil-capa{
  height:180px; border-radius:0 0 var(--raio) var(--raio);
  background-size:cover; background-position:center;
}
.perfil-capa-vazia{
  background:linear-gradient(120deg,var(--tom-fundo),var(--fundo-3));
}
.perfil-cabeca{ display:flex; align-items:flex-end; gap:18px; margin-top:-44px; padding:0 6px; }
.perfil-avatar{
  width:92px; height:92px; border-radius:22px; object-fit:cover;
  border:4px solid var(--fundo); background:var(--fundo-3);
}
.perfil-avatar-vazio{
  display:grid; place-items:center; font-size:36px; font-weight:800; color:var(--texto-2);
}
.perfil-quem h1{ font-size:24px; }
.perfil-selos{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.perfil-desde{ color:var(--texto-3); font-size:13px; }
.perfil-sobre{ color:var(--texto-2); margin:16px 6px 0; max-width:70ch; }
.perfil-numeros{
  display:flex; gap:12px; margin:20px 0 0; flex-wrap:wrap;
}
.perfil-numeros div{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio-p); padding:12px 18px; min-width:130px;
}
.perfil-numeros b{ display:block; font-size:20px; }
.perfil-numeros span{ color:var(--texto-3); font-size:12.5px; }

/* Efeitos animados no nome. Lista FECHADA — o banco guarda só a
   escolha, nunca CSS solto. Deixar o usuário escrever estilo é
   deixar ele escrever a página. */
@keyframes brilha{ to{ background-position:200% center; } }
.nome-fogo,.nome-gelo,.nome-ouro,.nome-arco{
  background-size:200% auto; background-clip:text; -webkit-background-clip:text;
  color:transparent; animation:brilha 3s linear infinite;
}
.nome-fogo{ background-image:linear-gradient(90deg,#ff6a3d,#ffd166,#ff6a3d); }
.nome-gelo{ background-image:linear-gradient(90deg,#5ec8ff,#c9f0ff,#5ec8ff); }
.nome-ouro{ background-image:linear-gradient(90deg,#f0b429,#fff3c4,#f0b429); }
.nome-arco{ background-image:linear-gradient(90deg,#ff6a3d,#ffd166,#2fbf71,#4d7cff,#8b5cf6,#ff6a3d); }
@media (prefers-reduced-motion: reduce){
  .nome-fogo,.nome-gelo,.nome-ouro,.nome-arco{ animation:none; }
}

@media (max-width:900px){
  .anuncio-pagina{ grid-template-columns:1fr; }
  .anuncio-direita{ position:static; }
}

/* ---------------- FORMULÁRIOS LONGOS ---------------- */
.bloco-estreito{ max-width:760px; }
.formulario{ display:flex; flex-direction:column; gap:17px; }
.formulario label{ display:flex; flex-direction:column; gap:6px; }
.formulario label > span{ font-size:13.5px; font-weight:600; color:var(--texto-2); }
.formulario input,.formulario select,.formulario textarea{
  background:var(--fundo-3); border:1px solid var(--borda); color:var(--texto);
  border-radius:var(--raio-p); padding:11px 13px; font:inherit; font-size:15px;
  width:100%;
}
.formulario textarea{ resize:vertical; line-height:1.55; }
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{ border-color:var(--tom); }
.formulario small{ font-size:12.5px; color:var(--texto-3); }
.formulario input[type=file]{ padding:9px; background:var(--fundo-2); }
.dupla{ display:grid; gap:17px; grid-template-columns:1fr 1fr; }
.leve{ color:var(--texto-3); font-size:13px; }
.leve a{ color:var(--tom-forte); }

.campos{ border:1px solid var(--borda); border-radius:var(--raio); padding:16px 18px 18px; }
.campos legend{ font-size:13.5px; font-weight:600; color:var(--texto-2); padding:0 6px; }
.campo-linha{ display:grid; gap:10px; grid-template-columns:1fr 1.6fr; margin-bottom:10px; }
#mais-campo{ padding:8px 14px; font-size:13.5px; }

.previa{ display:flex; gap:10px; flex-wrap:wrap; }
.previa-item{ position:relative; width:92px; height:70px; }
.previa-item img{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--raio-p); border:1px solid var(--borda);
}
.previa-item button{
  position:absolute; top:-7px; right:-7px; width:22px; height:22px;
  border-radius:50%; border:0; background:var(--vermelho); color:#fff;
  font-size:15px; line-height:1; cursor:pointer;
}

/* ---------------- MINHA CONTA ---------------- */
.painel-linha{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.painel-linha div{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio-p); padding:12px 18px; min-width:110px;
}
.painel-linha b{ display:block; font-size:20px; }
.painel-linha span{ color:var(--texto-3); font-size:12.5px; }

.meus{ display:flex; flex-direction:column; gap:9px; }
.meu{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio-p); padding:13px 16px;
  display:grid; gap:6px 14px; align-items:center;
  grid-template-columns:1fr auto auto;
}
.meu-quem{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.meu-quem a,.meu-quem span:first-child{ font-weight:600; font-size:14.5px; }
.meu-quem a:hover{ color:var(--tom-forte); }
.meu-cat{ color:var(--texto-3); font-size:12px; }
.meu-preco{ font-weight:700; }
.meu-situacao{
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:var(--fundo-3); color:var(--texto-2); white-space:nowrap;
}
.situacao-ativo{ background:color-mix(in srgb,var(--verde) 18%,transparent); color:var(--verde); }
.situacao-revisao{ background:color-mix(in srgb,var(--ouro) 18%,transparent); color:var(--ouro); }
.situacao-recusado,.situacao-bloqueado{
  background:color-mix(in srgb,var(--vermelho) 16%,transparent); color:var(--vermelho); }
.meu-motivo{
  grid-column:1/-1; margin:2px 0 0; font-size:13px; color:var(--vermelho);
}

@media (max-width:640px){
  .dupla,.campo-linha{ grid-template-columns:1fr; }
  .meu{ grid-template-columns:1fr auto; }
}

/* ---------------- PEDIDO ---------------- */
.pedido-status{
  margin-left:auto; font-size:12.5px; font-weight:700;
  padding:5px 12px; border-radius:99px; background:var(--fundo-3); color:var(--texto-2);
}
.status-pago{ background:color-mix(in srgb,var(--tom) 20%,transparent); color:var(--tom-forte); }
.status-entregue{ background:color-mix(in srgb,var(--verde) 18%,transparent); color:var(--verde); }
.status-cancelado{ background:color-mix(in srgb,var(--vermelho) 15%,transparent); color:var(--vermelho); }
.status-novo{ background:color-mix(in srgb,var(--ouro) 18%,transparent); color:var(--ouro); }

.pedido-linha{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio);
}
.pedido-titulo{ font-weight:600; }
.pedido-titulo:hover{ color:var(--tom-forte); }
.pedido-preco{ margin-left:auto; font-weight:800; font-size:18px; }

.pagar{
  background:var(--fundo-2); border:1px solid var(--tom);
  border-radius:var(--raio); padding:20px; margin-top:16px;
}
.pagar h3{ font-size:16px; margin-bottom:10px; }
.pagar-valor{ font-size:26px; font-weight:800; margin:0 0 14px; }
.pagar-chave{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid var(--borda); font-size:14.5px;
}
.pagar-chave span{ color:var(--texto-3); min-width:110px; }
.pagar-chave b{ font-size:16px; letter-spacing:.01em; }
.pagar-chave .btn{ padding:6px 12px; font-size:13px; margin-left:auto; }
.pagar .leve{ margin:12px 0 0; line-height:1.55; }

.disputa-caixa{
  margin-top:16px; padding:16px 18px; border-radius:var(--raio);
  background:color-mix(in srgb,var(--vermelho) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--vermelho) 40%,transparent);
}
.disputa-caixa h3{ font-size:14.5px; margin-bottom:6px; }
.disputa-caixa p{ margin:0 0 6px; font-size:14px; }
.disputa-form{ margin-top:20px; }

/* ---------------- CARTEIRA ---------------- */
.carteira{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-bottom:18px; }
.carteira-caixa{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:15px 17px;
  display:flex; flex-direction:column; gap:3px;
}
.carteira-caixa span{ color:var(--texto-3); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
.carteira-caixa b{ font-size:22px; letter-spacing:-.02em; }
.carteira-caixa small{ color:var(--texto-3); font-size:12px; }

.linha-caixa{ flex-direction:row !important; align-items:center; gap:9px !important; }
.linha-caixa input{ width:auto !important; }

.extrato{ width:100%; border-collapse:collapse; font-size:13.5px; }
.extrato td{ padding:9px 10px; border-bottom:1px solid var(--borda); vertical-align:top; }
.extrato td:first-child{ color:var(--texto-3); white-space:nowrap; }
.extrato td:nth-child(3){ text-align:right; white-space:nowrap; font-weight:700; }
.extrato .entra{ color:var(--verde); }
.extrato .sai{ color:var(--vermelho); }
.extrato .anulada{ opacity:.5; text-decoration:line-through; }
.extrato .anulada i{ text-decoration:none; font-style:normal; }

/* ---------------- ADMINISTRAÇÃO ---------------- */
.admin-botoes{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.admin-botoes .btn{ padding:7px 12px; font-size:13px; }
.admin-botoes select{
  background:var(--fundo-3); border:1px solid var(--borda); color:var(--texto);
  border-radius:var(--raio-p); padding:7px 10px; font:inherit; font-size:13px;
}
.conta-aviso{
  display:inline-block; min-width:22px; padding:1px 8px; border-radius:99px;
  background:var(--vermelho); color:#fff; font-size:12.5px; font-weight:700;
  vertical-align:middle;
}
.situacao-pedido{ background:color-mix(in srgb,var(--ouro) 18%,transparent); color:var(--ouro); }
.situacao-pago{ background:color-mix(in srgb,var(--verde) 18%,transparent); color:var(--verde); }

/* ---------------- PÁGINAS DE TEXTO ---------------- */
.texto h1{ font-size:28px; margin-bottom:8px; }
.texto h2{ font-size:19px; margin:32px 0 12px; }
.texto h3{ font-size:15.5px; margin-bottom:6px; }
.texto p{ color:var(--texto-2); line-height:1.7; margin:0 0 13px; }
.texto ul{ color:var(--texto-2); line-height:1.7; padding-left:20px; margin:0 0 13px; }
.texto li{ margin-bottom:8px; }
.texto b{ color:var(--texto); }
.chamada{ font-size:17px !important; color:var(--texto) !important; margin-bottom:24px !important; }

.passos{ display:flex; flex-direction:column; gap:14px; margin:18px 0 8px; }
.passo{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:18px 20px;
}
.passo > b{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:15px;
  background:var(--tom); color:#fff;
}
.passo p{ margin:0; font-size:14.5px; }

.alerta{
  background:color-mix(in srgb,var(--ouro) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ouro) 55%,transparent);
  border-radius:var(--raio); padding:18px 20px; margin:6px 0 22px;
}
.alerta h3{ color:var(--ouro); }
.alerta p{ margin-bottom:8px; }
.alerta p:last-child{ margin-bottom:0; }

/* ---------------- AVALIAÇÕES ---------------- */
.estrelas{ color:var(--ouro); letter-spacing:1px; font-size:14px; }
.avaliacoes{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.avaliacao{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:14px 16px;
}
.avaliacao-topo{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.avaliacao-quem{ font-weight:600; font-size:13.5px; }
.avaliacao-quando{ color:var(--texto-3); font-size:12px; margin-left:auto; }
.avaliacao-produto{ display:block; color:var(--tom-forte); font-size:13px; margin-bottom:5px; }
.avaliacao-produto:hover{ text-decoration:underline; }
.avaliacao p{ margin:0; color:var(--texto-2); font-size:14px; line-height:1.55; }

.avaliar{ margin-top:20px; padding:18px 20px;
  background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio); }
.avaliar h3{ font-size:15.5px; margin-bottom:4px; }
.notas{ display:flex; gap:8px; flex-wrap:wrap; }
.nota{ flex-direction:row !important; align-items:center; gap:5px !important; cursor:pointer;
  border:1px solid var(--borda); border-radius:var(--raio-p); padding:7px 11px; }
.nota input{ width:auto !important; }
.nota:has(input:checked){ border-color:var(--tom); background:var(--tom-fundo); }
.avaliacao-feita{ margin-top:18px; padding:16px 18px;
  background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio); }
.avaliacao-feita h3{ font-size:14.5px; margin-bottom:6px; }
.avaliacao-feita p{ color:var(--texto-2); margin:8px 0 0; font-size:14px; }

/* ---------------- BLOG ---------------- */
.posts{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.post{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); overflow:hidden; transition:.18s;
}
.post:hover{ transform:translateY(-3px); border-color:var(--tom); box-shadow:var(--sombra); }
.post img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.post-corpo{ padding:15px 17px; }
.post-corpo h3{ font-size:16px; margin-bottom:7px; }
.post-corpo p{ color:var(--texto-2); font-size:14px; margin:0 0 9px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-quando{ color:var(--texto-3); font-size:12.5px; }

/* ---------------- FÓRUM ---------------- */
.abas{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.abas a{
  padding:8px 14px; border-radius:99px; border:1px solid var(--borda);
  color:var(--texto-2); font-size:13.5px;
}
.abas a:hover{ color:var(--texto); border-color:var(--tom); }
.abas a.ativa{ background:var(--tom); border-color:var(--tom); color:#fff; font-weight:600; }

.resposta{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:16px 18px; margin-bottom:11px;
}
.resposta-primeira{ border-color:var(--tom); }
.resposta-topo{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; }
.resposta p{ color:var(--texto-2); margin:0 0 9px; line-height:1.6; font-size:14.5px; }
.resposta p:last-child{ margin-bottom:0; }

/* ---------------- CATEGORIAS NA ADMINISTRAÇÃO ---------------- */
.cats-admin{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.cat-linha{
  display:grid; gap:14px; align-items:center;
  grid-template-columns:64px 1fr auto auto;
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio-p); padding:9px 13px;
}
.cat-mini{ width:64px; height:44px; border-radius:6px; overflow:hidden;
  border:1px solid var(--borda); }
.cat-mini img{ width:100%; height:100%; object-fit:cover; }
.cat-mini .cat-vazia span{ width:16px; height:16px; border-radius:4px; }
.cat-quem{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cat-quem b{ font-size:14.5px; }
.cat-pop{ font-size:12.5px; color:var(--texto-2); white-space:nowrap; }
.cat-linha .btn{ padding:7px 12px; font-size:13px; cursor:pointer; }
.cat-linha label.btn{ display:inline-flex; }

@media (max-width:700px){
  .cat-linha{ grid-template-columns:52px 1fr; }
  .cat-pop, .cat-linha .admin-botoes{ grid-column:2; }
}

/* ---------------- O SININHO ---------------- */
.sino{
  position:relative; width:38px; height:38px; border-radius:var(--raio-p);
  border:1px solid var(--borda); background:var(--fundo-3); color:var(--texto-2);
  display:grid; place-items:center; flex-shrink:0;
}
.sino:hover{ color:var(--texto); }
.sino svg{ width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sino-conta{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px;
  padding:0 5px; border-radius:99px; background:var(--vermelho); color:#fff;
  font-size:11.5px; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--fundo-2);
}

.avisos{ display:flex; flex-direction:column; gap:8px; }
.aviso{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio-p); padding:13px 16px;
}
a.aviso:hover{ border-color:var(--tom); }
.aviso-novo{ border-left:3px solid var(--tom); background:var(--tom-fundo); }
.aviso-icone{ font-size:17px; line-height:1.3; flex-shrink:0; }
.aviso-texto{ display:flex; flex-direction:column; gap:3px; font-size:14.5px; line-height:1.5; }
.aviso-quando{ color:var(--texto-3); font-size:12.5px; }

/* ---------------- BARRA DE FILTRO ---------------- */
.filtro{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio-p); padding:13px 15px; margin-bottom:18px;
}
.filtro label{ display:flex; flex-direction:column; gap:5px; }
.filtro label > span{ font-size:12px; color:var(--texto-3); text-transform:uppercase;
  letter-spacing:.04em; }
.filtro select,.filtro input{
  background:var(--fundo-3); border:1px solid var(--borda); color:var(--texto);
  border-radius:var(--raio-p); padding:8px 11px; font:inherit; font-size:14px;
}
.filtro input{ width:120px; }
.filtro .btn{ padding:9px 16px; font-size:13.5px; }

@media (max-width:640px){
  .filtro{ gap:10px; }
  .filtro label{ flex:1 1 45%; }
  .filtro input{ width:100%; }
}

/* ---------------- PERGUNTAS ---------------- */
.perguntas{ display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
.pergunta{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:14px 16px;
}
.pergunta-espera{ border-style:dashed; }
.pergunta-topo{ display:flex; align-items:center; gap:9px; font-size:13.5px; margin-bottom:6px; }
.pergunta-texto{ margin:0; font-size:14.5px; line-height:1.55; }
.etiqueta{
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:var(--tom-fundo); color:var(--tom-forte);
}
.resposta-vendedor{
  margin-top:11px; padding:11px 13px; border-radius:var(--raio-p);
  background:var(--fundo-3); border-left:3px solid var(--tom);
}
.resposta-quem{ font-size:11.5px; font-weight:700; color:var(--tom-forte);
  text-transform:uppercase; letter-spacing:.04em; }
.resposta-vendedor p{ margin:5px 0 0; color:var(--texto-2); font-size:14px; line-height:1.55; }

.responder{ margin-top:11px; display:flex; flex-direction:column; gap:9px; }
.responder textarea{
  background:var(--fundo-3); border:1px solid var(--borda); color:var(--texto);
  border-radius:var(--raio-p); padding:10px 12px; font:inherit; font-size:14px;
  resize:vertical; width:100%;
}
.responder-botoes{ display:flex; gap:8px; }
.responder .btn{ padding:8px 15px; font-size:13.5px; }

/* ---------------- TRANCA DO FÓRUM ---------------- */
.chave-geral{
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:var(--raio-p); padding:14px 16px; font-size:15px; font-weight:600;
}

/* A linha de área do fórum não tem miniatura, então não usa a coluna
   de 64px da linha de categoria. */
.cat-linha.area-linha{ grid-template-columns:1fr auto; }
@media (max-width:700px){
  .cat-linha.area-linha{ grid-template-columns:1fr; }
  .area-linha .cat-pop{ grid-column:1; }
}

/* Saldo negativo na carteira. Vermelho de propósito: é dívida, e
   dívida escondida vira briga depois. */
.aviso-forte{
  margin:14px 0 0;
  padding:12px 14px;
  border:1px solid #7a2b2b;
  border-left:4px solid #d94b4b;
  border-radius:10px;
  background:rgba(217,75,75,.08);
}
.aviso-forte b{ display:block; color:#ff9b9b; font-size:15px; margin-bottom:5px; }
.aviso-forte p{ margin:0; color:var(--texto-2); font-size:13.5px; line-height:1.6; }