:root{
  --dourado:#f8ae00; --teal:#077881; --teal-escuro:#045b62; --azul:#009fe3;
  --tinta:#0d2a2d; --tinta-fraca:#5c7477; --papel:#fff; --areia:#fdf8ef;
  --linha:#e7eceb; --alerta:#b4530a; --alerta-claro:#fdf1e5; --recusa:#8d3030;
  --sombra:0 1px 2px rgba(13,42,45,.06), 0 8px 24px rgba(13,42,45,.06);
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--areia);color:var(--tinta);font:15px/1.55 var(--fonte)}
h1,h2{letter-spacing:-.4px;margin:0 0 8px}
h2{font-size:18px;margin-top:26px}
.ajuda{color:var(--tinta-fraca);font-size:13.5px;margin:0 0 14px}
.recado{font-size:13px;color:var(--teal);min-height:18px;display:block;margin-top:10px}
.recado.erro{color:var(--recusa)}

/* portão de entrada */
.portao{max-width:400px;margin:8vh auto;background:var(--papel);border:1px solid var(--linha);
  border-radius:20px;padding:28px 22px;text-align:center;box-shadow:var(--sombra)}
.portao img{margin-bottom:6px}
.acoes-portao{margin:16px 0 10px}
#forma-entrar{display:grid;gap:10px;margin-top:8px}
#senha{padding:13px 14px;font-size:19px;letter-spacing:3px;text-align:center;text-transform:uppercase;
  border:1px solid var(--linha);border-radius:12px;background:var(--areia);font-family:ui-monospace,monospace}
#senha:focus{outline:2px solid #d6ece9;border-color:var(--teal)}
.lembrar{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tinta-fraca);
  text-align:left;cursor:pointer}
.lembrar input{width:17px;height:17px}

.botao{border:1px solid var(--linha);background:var(--papel);color:var(--tinta);border-radius:999px;
  padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer}
.botao.principal{background:var(--teal);border-color:var(--teal);color:#fff;width:100%}
.botao.pequeno{padding:7px 14px;font-size:13px}
.botao.ativo{background:var(--teal);border-color:var(--teal);color:#fff}
.botao[disabled]{opacity:.55;cursor:default}

/* painel */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  background:var(--papel);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:5}
.marca{display:flex;align-items:center;gap:10px}
.marca span{display:flex;flex-direction:column;line-height:1.15}
.marca small{font-size:11px;color:var(--teal);font-weight:600}
.abas{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;background:var(--papel);
  border-bottom:1px solid var(--linha);position:sticky;top:59px;z-index:4}
main{padding:18px 16px 60px;max-width:1080px;margin:0 auto}

.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px}
.placar div{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:12px 14px}
.placar b{display:block;font-size:23px;color:var(--teal);line-height:1.1}
.placar span{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--tinta-fraca)}

.metas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.meta{background:var(--alerta-claro);border:1px solid #f2ddc4;border-radius:12px;padding:10px 12px;
  font-size:13.5px}
.meta b{display:block;font-size:15px;color:var(--alerta)}
.categorias{display:flex;gap:8px;flex-wrap:wrap}
.categorias span{background:var(--papel);border:1px solid var(--linha);border-radius:999px;
  padding:7px 13px;font-size:13px}
.categorias b{color:var(--teal)}

.filtros{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.filtros input,.filtros select{padding:11px 12px;font-size:16px;border:1px solid var(--linha);
  border-radius:10px;background:var(--papel);width:100%}
.perfis{display:grid;grid-template-columns:1fr;gap:10px}
.perfil{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:13px;
  box-shadow:var(--sombra)}
.perfil .cabeca{display:flex;gap:10px;align-items:center}
.perfil .cabeca img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--areia);
  border:2px solid #ffe0a3;flex:none}
.perfil .nome{font-weight:700;margin:0}
.perfil .arroba{color:var(--tinta-fraca);font-size:13px;text-decoration:none}
.perfil a.arroba{color:var(--teal);font-weight:600}
.perfil .bio{color:var(--tinta-fraca);font-size:13px;margin:6px 0 0;overflow-wrap:anywhere}
.selos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.selos span{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--areia);
  border:1px solid var(--linha);color:var(--tinta-fraca)}
.selos .forte{background:#e6f2f0;border-color:#c7e2dd;color:var(--teal);font-weight:600}
.motivos{font-size:12px;color:var(--tinta-fraca);margin-top:7px}
.decisoes{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.decisoes button{flex:1 1 84px;border-radius:9px;border:1px solid var(--linha);background:var(--papel);
  padding:9px;font-size:13px;font-weight:600;color:var(--tinta-fraca);cursor:pointer}
.decisoes button.on[data-decisao=aprovado]{background:var(--teal);border-color:var(--teal);color:#fff}
.decisoes button.on[data-decisao=recusado]{background:var(--recusa);border-color:var(--recusa);color:#fff}
.decisoes button.on[data-decisao=favorito]{background:#a06a00;border-color:#a06a00;color:#fff}
.paginacao{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px}

.formulario{display:grid;gap:14px}
.campo{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:13px}
.campo label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--tinta-fraca);margin-bottom:6px;font-weight:700}
.campo label.lembrar{display:flex;align-items:center;gap:10px;text-transform:none;
  font-size:14.5px;color:var(--tinta);margin:0;letter-spacing:0}
.campo label.lembrar input{width:18px;height:18px;margin:0;flex:none}
.campo input,.campo textarea{width:100%;border:1px solid var(--linha);border-radius:10px;padding:10px;
  font:15px/1.5 var(--fonte);background:var(--areia);color:var(--tinta)}
.campo textarea{min-height:88px;resize:vertical}
.rodape-forma{position:sticky;bottom:0;background:var(--areia);padding:14px 0;display:flex;
  gap:12px;align-items:center;flex-wrap:wrap}
.rodape-forma .botao{width:auto}

/* a lista carrega sozinha conforme rola, com uma rodinha avisando */
.fim-da-lista{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 0 6px}
.rodinha{width:26px;height:26px;border-radius:50%;border:3px solid var(--linha);
  border-top-color:var(--teal);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
#aviso-fim{margin:0}

@media (min-width:760px){
  .filtros{grid-template-columns:2fr 1fr 1fr}
  .perfis{grid-template-columns:1fr 1fr}
}
@media (min-width:1060px){
  .filtros{grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr}
  /* no computador, três por linha, como pedido */
  .perfis{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){ .rodinha{animation-duration:3s} }


/* galeria das cenas de fundo */
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cena{background:var(--papel);border:1px solid var(--linha);border-radius:14px;overflow:hidden;
  box-shadow:var(--sombra);cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit}
.cena.escolhida{border-color:var(--teal);box-shadow:0 0 0 2px #cfe6e4}
.cena canvas{display:block;width:100%;height:120px;background:
  radial-gradient(120% 90% at 50% 0%, #fff6e0 0%, #fff 65%)}
.cena .info{padding:10px 12px 12px}
.cena b{display:block;font-size:14px}
.cena small{display:block;color:var(--tinta-fraca);font-size:12px;margin-top:3px;line-height:1.35}
.cena .grupo{display:inline-block;margin-top:8px;font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--areia);border:1px solid var(--linha);color:var(--tinta-fraca)}
.cena .usando{display:inline-block;margin-top:8px;margin-left:6px;font-size:11px;padding:2px 8px;
  border-radius:999px;background:var(--teal);color:#fff;font-weight:700}
@media (min-width:900px){ .galeria{grid-template-columns:1fr 1fr 1fr} }
@media (min-width:1200px){ .galeria{grid-template-columns:1fr 1fr 1fr 1fr} }