:root{
  --bg:#0d0b14;
  --card:#141120;
  --panel:#1a162b;
  --border:#251f38;
  --accent:#7928ca;
  --accent-soft:#3d1b5d;
  --text:#ffffff;
  --on-accent:#ffffff;
  --text-dim:#9d94b8;
}
*{box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin:0;
}

/* ===== Navegação principal do site ===== */
header.topo{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--card);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
}
header.topo .logo{
  font-weight:bold;
  font-size:18px;
  color:var(--accent);
  text-decoration:none;
}
header.topo nav{
  display:flex;
  gap:6px;
}
header.topo nav a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:14px;
  padding:8px 14px;
  border-radius:20px;
}
header.topo nav a:hover{
  color:var(--text);
}
header.topo nav a.ativo{
  color:var(--text);
  background:var(--accent-soft);
}
header.topo .avatar-topo{
  width:34px;
  height:34px;
  border-radius:8px;
  background:var(--panel);
  border:1px solid var(--border);
}

main{
  max-width:1000px;
  margin:0 auto;
  padding:20px 16px 60px;
}

/* ===== Containers genéricos reaproveitados nas páginas ===== */
.card{
  background:var(--card);
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
}
.painel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px;
}

.barra-progresso{
  background:var(--bg);
  height:12px;
  border-radius:6px;
  overflow:hidden;
  margin-bottom:10px;
}
.progresso-enchido{
  background:var(--accent);
  height:100%;
  transition:width 0.3s;
}

button.btn{
  background:var(--accent);
  color:var(--on-accent);
  border:none;
  padding:9px 22px;
  border-radius:20px;
  font-weight:bold;
  cursor:pointer;
  font-size:14px;
}
button.btn.secundario{
  background:var(--panel);
  border:1px solid var(--border);
}

/* ===== Feed (index.html) ===== */
.post{
  margin-bottom:16px;
  padding:16px;
}
.post .cabecalho-post{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.post .mini-avatar{
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--panel);
}
.post .cabecalho-post strong{ font-size:14px; }
.post .cabecalho-post span{ font-size:12px; color:var(--text-dim); display:block; }
.post .midia-post{
  height:220px;
  background:var(--panel);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:13px;
  margin:10px 0;
}
.post .acoes-post{
  display:flex;
  gap:20px;
  color:var(--text-dim);
  font-size:13px;
  align-items:center;
}
.post .acoes-post .botao-engajamento{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.post .acoes-post .botao-engajamento:hover{ color:var(--text); }
.post .acoes-post .botao-engajamento svg{
  width:20px;
  height:20px;
}

/* ===== Perfil (perfil.html) ===== */
.banner{
  height:160px;
  background:linear-gradient(90deg, var(--accent-soft) 0%, var(--accent) 100%);
}
.info-usuario{
  padding:0 20px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:-52px;
}
.avatar{
  width:96px;
  height:96px;
  border-radius:12px;
  border:4px solid var(--card);
  background:var(--border);
  flex-shrink:0;
}
.nome-bloco h1{ margin:8px 0 2px; font-size:20px; }
.nome-bloco span{ color:var(--text-dim); font-size:13px; }

.stats{
  display:flex;
  gap:24px;
  padding:0 20px 16px;
  border-bottom:1px solid var(--border);
}
.stats button{
  background:none;
  border:none;
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  padding:4px 0;
}
.stats button strong{ display:block; font-size:16px; }
.stats button:hover strong, .stats button.ativo strong{ color:var(--accent); }

nav.tabs{
  display:flex;
  gap:4px;
  padding:12px 20px 0;
  overflow-x:auto;
  border-bottom:1px solid var(--border);
}
nav.tabs button{
  background:none;
  border:none;
  color:var(--text-dim);
  padding:10px 16px;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
nav.tabs button.ativo{ color:var(--text); border-bottom:2px solid var(--accent); }
nav.tabs button:hover{ color:var(--text); }

.conteudo{ padding:20px; min-height:220px; }

.grid-fotos, .grid-reels, .grid-colecoes, .grid-loja{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:10px;
}
.grid-fotos{ grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
.grid-reels{ grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
.grid-fotos div, .grid-reels div, .grid-colecoes div, .grid-loja div{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:12px;
}
.grid-fotos div, .grid-reels div{ aspect-ratio:1/1; }
.grid-reels div{ aspect-ratio:9/16; }
.grid-colecoes div{ aspect-ratio:4/3; flex-direction:column; gap:4px; }

.sobre-lista p{ display:flex; gap:10px; color:var(--text-dim); font-size:14px; margin:10px 0; }
.sobre-lista p span{ color:var(--text); }

form.editar-perfil label{ display:block; font-size:13px; color:var(--text-dim); margin:14px 0 6px; }
form.editar-perfil input, form.editar-perfil textarea{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  color:var(--text);
  font-size:14px;
  font-family:inherit;
}

.lista-pessoas div{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.lista-pessoas .mini-avatar{ width:40px; height:40px; border-radius:8px; background:var(--panel); flex-shrink:0; }
.lista-pessoas .info{ flex:1; }
.lista-pessoas .info strong{ display:block; font-size:14px; }
.lista-pessoas .info span{ font-size:12px; color:var(--text-dim); }
.lista-pessoas button{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 14px;
  border-radius:16px;
  font-size:12px;
  cursor:pointer;
}

/* ===== Loja (loja.html) ===== */
.produto-card{ flex-direction:column; padding:10px; gap:6px; text-align:center; }
.produto-card .preco{ color:var(--accent); font-weight:bold; }

/* ===== Reels (reels.html) ===== */
.grid-reels-pagina{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:12px;
}
.grid-reels-pagina div{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  aspect-ratio:9/16;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:12px;
}

.aviso{
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  margin-top:14px;
}

/* ===== Layout de duas colunas do perfil ===== */
.perfil-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:16px;
  align-items:start;
}
@media (max-width:760px){
  .perfil-layout{ grid-template-columns:1fr; }
}

.sidebar-perfil{ display:flex; flex-direction:column; gap:16px; }

/* ===== Painel de missões ===== */
.missoes-painel{ padding:18px; }
.missoes-painel h3{ margin:0 0 16px; font-size:14px; }
.missao-item{ margin-bottom:16px; }
.missao-item:last-child{ margin-bottom:0; }
.missao-item .label-missao{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:6px;
}
.missao-item .barra-progresso{ height:9px; margin-bottom:0; }
.cor-vida{ background:#ff5c8a; }
.cor-exp{ background:#33d9c9; }
.cor-comentarios{ background:#ffb84d; }
.cor-curtidas{ background:var(--accent); }

.premio-missao{
  margin-top:16px;
  border:1px dashed var(--accent);
  border-radius:10px;
  padding:12px;
  text-align:center;
}
.premio-missao .titulo-premio{
  display:block;
  font-size:11px;
  color:var(--accent);
  margin-bottom:6px;
}
.premio-missao .texto-premio{ font-size:13px; }

/* ===== Notificações ===== */
.notificacoes-painel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  font-size:14px;
}
.badge-contador{
  background:var(--accent);
  color:var(--on-accent);
  font-size:11px;
  font-weight:bold;
  padding:2px 7px;
  border-radius:10px;
}

/* ===== Painéis recolhíveis (notificações, mensagens, cupons) ===== */
.painel-colapsavel{ padding:0; }
.painel-colapsavel .cabecalho-colapsavel{
  width:100%;
  background:none;
  border:none;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  font-size:14px;
  cursor:pointer;
  text-align:left;
}
.painel-colapsavel .seta{
  color:var(--text-dim);
  transition:transform 0.2s;
  font-size:12px;
}
.painel-colapsavel.aberto .seta{ transform:rotate(180deg); }
.painel-colapsavel .corpo-colapsavel{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.25s ease;
}
.painel-colapsavel.aberto .corpo-colapsavel{
  max-height:220px;
  overflow-y:auto;
  border-top:1px solid var(--border);
}
.painel-colapsavel .corpo-colapsavel .item-lista{
  padding:10px 16px;
  font-size:13px;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.painel-colapsavel .corpo-colapsavel .item-lista:last-child{ border-bottom:none; }

/* ===== Feed (feed.html) ===== */
.feed-layout{
  display:grid;
  grid-template-columns:230px 1fr 300px;
  gap:16px;
  align-items:start;
}
@media (max-width:980px){
  .feed-layout{ grid-template-columns:1fr; }
}
.coluna-esquerda, .coluna-direita, .coluna-centro{ display:flex; flex-direction:column; gap:16px; }
.titulo-secao{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:1px;
  color:var(--text-dim);
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:16px;
  padding:5px 12px;
  font-size:12px;
  cursor:pointer;
}
.chip:hover{ color:var(--text); }
.chip.ativo{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.bloco{ padding:14px; }
.fandom-linha{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:13px;
}
.fandom-linha .mini-avatar{ width:30px; height:30px; border-radius:8px; background:var(--panel); flex-shrink:0; }
.fandom-linha strong{ flex:1; font-size:13px; }
.fandom-linha button{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:14px;
  padding:4px 12px;
  font-size:11px;
  cursor:pointer;
}

.compositor{ padding:14px; }
.compositor textarea{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  padding:10px 12px;
  font-family:inherit;
  font-size:14px;
  resize:vertical;
}
.compositor .linha-baixo{ display:flex; justify-content:flex-end; margin-top:8px; }

.post .tag-fandom{
  font-size:10px;
  color:#33d9c9;
  border:1px solid #1d6b64;
  border-radius:10px;
  padding:2px 8px;
  margin-left:8px;
}
.vazio-feed{ text-align:center; color:var(--text-dim); font-size:13px; padding:24px; }

/* Barras segmentadas do painel de missões (estilo dos rascunhos) */
.barra-seg{
  background:var(--bg);
  height:10px;
  border-radius:3px;
  overflow:hidden;
}
.barra-seg .enchido{
  height:100%;
  width:0%;
  background:repeating-linear-gradient(90deg, var(--cor) 0 6px, transparent 6px 8px);
  transition:width .3s;
}
.rank-topo{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rank-topo .selo-rank{
  width:34px; height:34px; border-radius:8px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.rank-topo small{ display:block; font-size:10px; letter-spacing:1px; color:var(--text-dim); }
.rank-topo strong{ font-size:18px; }
.premio-missao .titulo-premio{ color:#33d9c9; letter-spacing:1px; font-size:10px; }

/* ===== Anúncios ===== */
.anuncio-banner{
  padding:22px;
  text-align:center;
  border:1px dashed var(--border);
  color:var(--text-dim);
  font-size:13px;
}
.anuncio-banner .selo-anuncio{
  display:inline-block;
  font-size:10px;
  color:var(--text-dim);
  border:1px solid var(--border);
  border-radius:10px;
  padding:2px 8px;
  margin-bottom:8px;
}
.post.patrocinado{ border-color:var(--accent-soft); }
.selo-patrocinado{
  font-size:10px;
  color:var(--accent);
  border:1px solid var(--accent-soft);
  border-radius:10px;
  padding:2px 8px;
  margin-left:8px;
}
.anuncio-lateral{ min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ===== Comunidades (estilo Orkut) ===== */
.grid-comunidades{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.card-comunidade .capa-comunidade{ height:90px; }
.corpo-comunidade{ padding:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.corpo-comunidade a{ color:var(--text); text-decoration:none; }
.corpo-comunidade span{ font-size:12px; color:var(--text-dim); }
.capa-grande{ height:180px; }
.cabecalho-comunidade{ display:flex; gap:14px; align-items:flex-start; padding:0 20px 18px; margin-top:-34px; flex-wrap:wrap; }
.logo-comunidade{ width:78px; height:78px; border-radius:12px; border:4px solid var(--card); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:bold; flex-shrink:0; }
.cabecalho-comunidade .btn{ margin-top:38px; }
.duas-colunas{ display:grid; grid-template-columns:1fr 280px; gap:16px; margin-top:16px; align-items:start; }
@media (max-width:760px){ .duas-colunas{ grid-template-columns:1fr; } }
.topico{ padding:10px 0; border-top:1px solid var(--border); font-size:13px; }
.topico span{ display:block; font-size:11px; color:var(--text-dim); margin-top:2px; }
.grade-membros{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.membro{ text-align:center; font-size:10px; color:var(--text-dim); overflow:hidden; }
.membro .mini-avatar{ width:100%; aspect-ratio:1/1; border-radius:8px; background:var(--panel); margin-bottom:3px; }
.link-comunidades{ display:block; margin-top:10px; font-size:12px; color:var(--accent); text-decoration:none; }
.item-minha-com{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; color:var(--text); text-decoration:none; }
.item-minha-com i{ width:26px; height:26px; border-radius:6px; flex-shrink:0; }
.rank-hash{ color:var(--accent); font-weight:bold; font-size:12px; width:26px; flex-shrink:0; }
.nome-alta{ flex:1; color:var(--text); text-decoration:none; font-size:13px; }
.campo{ width:100%; background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:9px 12px; font-family:inherit; font-size:13px; margin-bottom:8px; }

.aviso-lock{ font-size:12px; color:var(--text-dim); border:1px dashed var(--border); border-radius:8px; padding:10px; margin:0 0 12px; }

/* links legais no rodapé */
.rodape-legal a{ color:var(--text-dim); text-decoration:none; }
.rodape-legal a:hover{ color:var(--text); }

/* ===== Coleções (BoxNerd) e Histórico ===== */
.col-topo{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.col-teste{ font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:6px; background:var(--panel); border:1px dashed var(--border); border-radius:8px; padding:6px 10px; }
.col-teste select{ background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:3px 6px; }
.col-itens{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.col-item{ position:relative; cursor:pointer; text-align:center; }
.col-capa{ aspect-ratio:1/1; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:bold; color:rgba(255,255,255,.85); }
.col-item:hover .col-capa{ border-color:var(--accent); }
.col-item.na-box .col-capa{ opacity:.45; }
.col-nome{ margin-top:6px; background:var(--accent-soft); border-radius:10px; padding:4px 8px; font-size:12px; }
.col-denuncia{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,.55); border:none; color:#fff; border-radius:6px; width:24px; height:24px; cursor:pointer; font-size:12px; }
.col-denuncia:hover{ background:#c0392b; }
.col-progresso{ display:flex; align-items:center; gap:10px; margin:6px 0 14px; font-size:13px; color:var(--text-dim); }
.col-progresso .barra-progresso{ flex:1; }
.col-box{ display:grid; grid-template-columns:1fr 280px; gap:16px; align-items:start; }
@media (max-width:760px){ .col-box{ grid-template-columns:1fr; } }
.col-slots{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
@media (max-width:520px){ .col-slots{ grid-template-columns:repeat(4,1fr); } }
.slot{ aspect-ratio:1/1; border-radius:50%; border:2px solid var(--border); background:var(--panel); cursor:default; color:#fff; font-weight:bold; font-size:18px; padding:0; }
.slot.cheio{ cursor:pointer; border-color:var(--text-dim); }
.slot.sel{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.col-desc{ padding:14px; min-height:120px; }
.col-acoes{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.col-msg{ font-size:12px; color:var(--text-dim); }
.col-galera{ padding:8px 0; border-top:1px solid var(--border); }
.col-galera strong{ display:block; font-size:13px; margin-bottom:6px; }
.col-regras{ margin:0; font-size:13px; line-height:1.6; color:var(--text); }
.hist-linha{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); font-size:13px; }
.hist-linha:first-child{ border-top:none; }
.hist-linha span{ display:block; font-size:11px; color:var(--text-dim); margin-top:2px; }

.linha-upload{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.linha-upload input[type=file]{ font-size:12px; color:var(--text-dim); max-width:100%; }

/* seletor de modo teste (remover antes de publicar) */


/* =====================================================================
   Versão funcional: avisos, janelas, feed, loja e reels
   ===================================================================== */
:root{ --ok:#3fcf8e; --erro:#ff6b7a; --aviso-cor:#f2b84b; }

/* Modo teste (REMOVER antes de publicar) */
.modo-teste{ position:fixed; right:12px; bottom:12px; z-index:50; background:var(--panel); border:1px dashed var(--border); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:6px; align-items:center; max-width:calc(100vw - 24px); }
.modo-teste select{ background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:2px 6px; margin-left:4px; }
.modo-teste button{ background:var(--bg); color:var(--text-dim); border:1px solid var(--border); border-radius:6px; padding:3px 8px; font-size:11px; cursor:pointer; }
.modo-teste button:hover{ color:var(--text); }

/* Avisos e janelas */
#fn-toasts{ position:fixed; left:50%; transform:translateX(-50%); bottom:70px; z-index:200; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 32px); }
.fn-toast{ background:#fff; color:#111; font-size:13px; padding:8px 16px; border-radius:20px; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.fn-sem-rolagem{ overflow:hidden; }
.fn-fundo{ position:fixed; inset:0; background:rgba(5,3,12,.75); z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; }
.fn-janela{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:12px; width:100%; max-width:480px; max-height:calc(100vh - 32px); overflow-y:auto; margin:auto; }
.fn-janela.larga{ max-width:760px; }
.fn-janela.enorme{ max-width:1100px; }
.fn-conteudo{ padding:20px; }
.fn-conteudo h3{ margin:0 0 12px; font-size:18px; }
.fn-fechar{ position:absolute; top:8px; right:10px; background:none; border:none; color:var(--text-dim); font-size:26px; line-height:1; cursor:pointer; z-index:2; }
.fn-fechar:hover{ color:var(--text); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
button:disabled{ opacity:.45; cursor:not-allowed; }
.nota{ font-size:12px; color:var(--text-dim); margin:8px 0; }
.erro-form{ color:var(--erro); font-size:13px; min-height:18px; margin:6px 0; }
.campo-l{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim); margin:0 0 12px; }
.campo-l input, .campo-l select, .campo-l textarea, .qtd input, .cupom-box input, .loja-acoes input, .coment-form input, .compositor select{
  background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:9px 12px; font-size:14px; font-family:inherit; width:100%; min-width:0; }
.duas-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chip-radio, .check-linha, .filtro-linha{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-dim); cursor:pointer; }
.chip-radio{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:5px 12px; }
.check-linha{ margin:6px 0; }
[hidden]{ display:none !important; }

/* Missões: botão de check-in (roxo, igual ao Postar) */
.btn-checkin{ margin-top:8px; padding:7px 18px !important; font-size:13px !important; }
.dica-checkin{ display:block; margin-top:4px; font-size:11px; color:var(--text-dim); }
.quando-notif{ color:var(--text-dim); font-size:11px; margin-left:4px; }
.cupom-linha{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cupom-cod{ font-family:ui-monospace,Consolas,monospace; color:var(--accent); }
.cupom-trancado{ color:var(--text-dim); font-size:12px; }

/* Feed: compositor, mídia, comentários */
.compositor .linha-baixo{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.compositor select{ width:auto; padding:7px 10px; font-size:13px; }
.btn-anexo{ background:var(--panel); border:1px solid var(--border); color:var(--text-dim); border-radius:20px; padding:7px 14px; font-size:13px; cursor:pointer; }
.btn-anexo:hover{ color:var(--text); }
#previa-anexo{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
#previa-anexo .previa{ display:flex; align-items:center; gap:10px; }
#previa-anexo img{ max-height:90px; border-radius:8px; }
.previa-video{ font-size:13px; color:var(--text-dim); }
.midia-foto, .midia-video{ width:100%; max-height:460px; object-fit:contain; background:#000; border-radius:8px; display:block; margin-bottom:10px; }
.botao-engajamento{ background:none; border:none; color:var(--text-dim); font:inherit; font-size:13px; display:flex; align-items:center; gap:6px; cursor:pointer; padding:4px 0; }
.botao-engajamento:hover{ color:var(--text); }
.botao-engajamento.ativo{ color:var(--accent); }
.botao-engajamento.ativo svg{ filter:drop-shadow(0 0 4px var(--accent)); }
.area-comentarios{ margin-top:12px; border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:8px; }
.coment{ font-size:13px; display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.coment strong{ font-size:13px; }
.coment small{ color:var(--text-dim); font-size:11px; }
.coment-antigos{ margin:0; font-size:12px; color:var(--text-dim); }
.coment-form{ display:flex; gap:8px; }

/* Loja */
.loja-topo{ padding:20px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-bottom:16px; }
.loja-sub{ margin:0; font-size:13px; color:var(--text-dim); }
.loja-acoes{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.loja-acoes input{ width:240px; max-width:100%; }
.como-funciona{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; padding:16px 20px; margin-bottom:16px; }
.como-funciona strong{ display:block; font-size:13px; margin-bottom:2px; }
.como-funciona span{ font-size:12px; color:var(--text-dim); }
.abas-loja{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.abas-loja button{ background:none; border:none; border-bottom:2px solid transparent; color:var(--text-dim); padding:10px 14px; font-size:14px; cursor:pointer; }
.abas-loja button:hover{ color:var(--text); }
.abas-loja button.ativo{ color:var(--text); border-bottom-color:var(--accent); }
.filtros{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-bottom:14px; }
.filtro-linha select{ background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:5px 8px; }
.vitrine{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.prod{ background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.prod.prod-pat{ border-color:var(--accent-soft); }
.prod.esgotado .prod-topo{ opacity:.45; }
.prod-topo{ position:relative; }
.prod-arte{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; width:100%; }
.prod-inicial{ font-size:44px; font-weight:bold; color:rgba(255,255,255,.55); }
.fav{ position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; border:none; background:rgba(13,11,20,.7); color:#fff; font-size:17px; cursor:pointer; }
.fav.ativo{ color:#ff5c8a; }
.prod-corpo{ padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.selos{ display:flex; flex-wrap:wrap; gap:4px; }
.selo{ font-size:10px; letter-spacing:.3px; border:1px solid var(--border); color:var(--text-dim); border-radius:10px; padding:2px 8px; white-space:nowrap; }
.selo-of{ color:#33d9c9; border-color:#1d6b64; }
.selo-box{ color:#ffb84d; border-color:#7a5a1f; }
.selo-pat{ color:var(--accent); border-color:var(--accent-soft); }
.selo-esg{ color:var(--erro); border-color:#6b2a32; }
.prod-titulo{ background:none; border:none; color:var(--text); text-align:left; padding:0; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.prod-titulo:hover{ text-decoration:underline; }
.prod-preco{ color:var(--accent); font-weight:bold; font-size:16px; }
.prod-preco.grande{ font-size:24px; }
.prod-meta{ font-size:12px; color:var(--text-dim); margin:0; }
.prod-botoes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; align-items:center; }
.prod-botoes button.btn{ padding:6px 14px; font-size:12px; }
.seu-anuncio{ font-size:12px; color:var(--text-dim); }
.painel-loja{ display:block; }
.linha-titulo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.linha-titulo .titulo-secao{ margin:0; }
.linha-anuncio{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.linha-anuncio:last-child{ border-bottom:none; }
.linha-anuncio .info{ flex:1; min-width:180px; }
.linha-anuncio .info strong{ display:block; font-size:14px; }
.linha-anuncio .info span{ font-size:12px; color:var(--text-dim); }
.mini-arte{ width:56px; flex-shrink:0; border-radius:8px; overflow:hidden; }
.mini-arte .prod-arte{ aspect-ratio:1/1; }
.mini-arte .prod-inicial{ font-size:22px; }
.detalhe{ display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:20px; }
.detalhe-arte{ border-radius:10px; overflow:hidden; }
.detalhe-info h3{ margin:8px 0 4px; }
.qtd{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
.qtd input{ width:64px; padding:6px 8px; }
.cart-linhas{ display:flex; flex-direction:column; }
.cart-linha{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.cart-linha .info{ flex:1; min-width:150px; }
.cart-linha .info strong{ display:block; font-size:14px; }
.cart-linha .info span{ font-size:12px; color:var(--text-dim); }
.qtd-ctl{ display:flex; align-items:center; gap:8px; }
.cart-sub{ min-width:84px; text-align:right; font-size:14px; }
.cupom-box{ display:flex; gap:8px; margin:14px 0 6px; }
.msg-cupom{ font-size:12px; margin:4px 0; }
.msg-cupom.ok{ color:var(--ok); } .msg-cupom.erro{ color:var(--erro); }
.dica-cupom{ font-size:12px; color:var(--text-dim); margin:6px 0; }
.resumo{ margin:14px 0; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.resumo > div{ display:flex; justify-content:space-between; }
.resumo .desc{ color:var(--ok); }
.resumo .total{ font-weight:bold; font-size:18px; border-top:1px solid var(--border); padding-top:8px; }

/* Reels e vídeos */
.reels-topo{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.grade-reels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.reel-card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.reel-card.longo{ grid-column:span 2; }
.reel-abrir{ position:relative; display:block; width:100%; aspect-ratio:9/16; background:#000; border:none; padding:0; cursor:pointer; }
.reel-card.longo .reel-abrir{ aspect-ratio:16/9; }
.reel-abrir video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.tipo-mini{ position:absolute; top:6px; left:6px; background:rgba(13,11,20,.75); color:#fff; font-size:10px; padding:2px 8px; border-radius:10px; }
.duracao{ position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.75); color:#fff; font-size:11px; padding:1px 6px; border-radius:4px; }
.reel-info{ padding:10px; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.reel-info strong{ font-size:13px; word-break:break-word; }
.reel-info span{ font-size:11px; color:var(--text-dim); }
.reel-info .chip{ margin-top:4px; }
.reel-mini{ position:relative; cursor:pointer; overflow:hidden; padding:0; }
.reel-mini video{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.viewer{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; }
.viewer-video video{ width:100%; max-height:70vh; background:#000; border-radius:10px; display:block; }
.viewer-video h3{ margin:12px 0 4px; }
.viewer-chat{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--panel); min-height:320px; max-height:70vh; }
.chat-lista{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin:8px 0 10px; }

@media (max-width:760px){
  .detalhe, .viewer, .duas-col{ grid-template-columns:1fr; }
  .viewer-chat{ max-height:none; min-height:260px; }
  .reel-card.longo{ grid-column:span 1; }
  .loja-acoes input{ width:100%; }
  .cart-sub{ text-align:left; }
}
@media (prefers-reduced-motion:no-preference){
  .fn-toast{ animation:fn-in .2s ease-out; }
  @keyframes fn-in{ from{ opacity:0; transform:translateY(6px); } }
}

.modo-teste summary{ cursor:pointer; list-style:none; font-weight:bold; }
.modo-teste:not([open]){ padding:6px 12px; }
.modo-teste[open]{ flex-direction:row; }
.viewer .acoes-post{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.viewer .botao-engajamento{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:6px 14px; }
.viewer .botao-engajamento.ativo{ border-color:var(--accent); }

/* ===== admin ===== */
.gate-card{ max-width:420px; margin:40px auto; }
.tabela-rolagem{ overflow-x:auto; }
.tabela-adm{ width:100%; border-collapse:collapse; font-size:13px; }
.tabela-adm th{ text-align:left; color:var(--text-dim); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tabela-adm td{ padding:8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tabela-adm tr.oculto{ opacity:.6; }
.dim-s{ font-size:12px; color:var(--text-dim); }
.acoes-linha{ display:flex; gap:6px; flex-wrap:wrap; }
.capa-mini{ width:96px; height:40px; border-radius:8px; flex-shrink:0; background-size:cover; background-position:center; }
.campo-mono{ width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:var(--bg,#0f0c1a); color:inherit; border:1px solid var(--border); border-radius:8px; padding:10px; box-sizing:border-box; }

/* ======================= TEMAS =======================
   normal  = verde e branco (padrão de dia)
   diurno  = preto e branco
   noturno = preto/cinza com verde (padrão à noite, no modo automático) */
:root[data-tema="normal"]{
  --bg:#ffffff; --card:#ffffff; --panel:#f1f8e0; --border:#cfe59a; --accent:#3f9a14; --accent-soft:#dff2b0;
  --text:#14210a; --text-dim:#566846; --on-accent:#ffffff;
  --topo-bg:#b5e61d; --topo-link:#14210a; --topo-ativo-bg:#14210a; --topo-ativo-fg:#b5e61d; --ok:#1f7a3a; --aviso:#8a5a00; --erro:#c0264a;
}
:root[data-tema="diurno"]{
  --bg:#ffffff; --card:#ffffff; --panel:#f2f2f2; --border:#cfcfcf; --accent:#000000; --accent-soft:#e4e4e4;
  --text:#000000; --text-dim:#555555; --on-accent:#ffffff;
  --topo-bg:#ffffff; --topo-link:#000000; --topo-ativo-bg:#000000; --topo-ativo-fg:#ffffff; --ok:#1d5e2e; --aviso:#6b4a00; --erro:#a3122f;
}
:root[data-tema="noturno"]{
  --bg:#0a0a0a; --card:#141414; --panel:#1d1d1d; --border:#2c2c2c; --accent:#b5e61d; --accent-soft:#27350a;
  --text:#f1f1f1; --text-dim:#9ba38c; --on-accent:#0a0a0a;
  --topo-bg:#000000; --topo-link:#d9e6b4; --topo-ativo-bg:#b5e61d; --topo-ativo-fg:#000000; --ok:#6fe39a; --aviso:#f2b84b; --erro:#ff6b7a;
}
header.topo{ background:var(--topo-bg,var(--card)); }
:root[data-tema="normal"] header.topo{ border-bottom-color:#14210a; }
:root[data-tema="diurno"] header.topo{ border-bottom:2px solid #000; }
:root[data-tema="noturno"] header.topo{ border-bottom:2px solid #b5e61d; }
header.topo nav a{ color:var(--topo-link,var(--text-dim)); }
header.topo nav a:hover{ color:var(--topo-ativo-fg,var(--text)); background:var(--topo-ativo-bg,transparent); }
header.topo nav a.ativo{ color:var(--topo-ativo-fg,var(--text)); background:var(--topo-ativo-bg,var(--accent-soft)); }
header.topo .logo{ display:flex; align-items:center; }
header.topo .logo img{ height:34px; width:auto; display:none; }
:root[data-tema="normal"] header.topo .logo img.l-preto,
:root[data-tema="diurno"] header.topo .logo img.l-preto,
:root[data-tema="noturno"] header.topo .logo img.l-verde{ display:block; }
:root:not([data-tema]) header.topo .logo img.l-verde{ display:block; }
.seletor-tema{ background:transparent; color:var(--topo-link); border:1px solid var(--topo-link); border-radius:14px; padding:4px 8px; font-size:12px; margin-right:10px; cursor:pointer; font-family:inherit; }
.seletor-tema option{ color:#000; background:#fff; }
:root[data-tema="normal"] .selo-of, :root[data-tema="diurno"] .selo-of{ color:var(--ok); border-color:var(--ok); }
:root[data-tema="normal"] .nota, :root[data-tema="diurno"] .nota{ color:var(--text-dim); }
:root[data-tema="normal"] .fn-fundo, :root[data-tema="diurno"] .fn-fundo{ background:rgba(20,33,10,.55); }
:root[data-tema="normal"] .fn-toast, :root[data-tema="diurno"] .fn-toast{ background:#14210a; color:#fff; }
:root[data-tema="normal"] button.btn.secundario, :root[data-tema="diurno"] button.btn.secundario{ color:var(--text); }
@media (max-width:760px){ header.topo{ padding:8px 12px; flex-wrap:wrap; gap:6px; } header.topo .logo img{ height:28px; } }

/* ===== cadastro e aviso de cookies ===== */
.aviso-cookies{ position:fixed; left:12px; right:12px; bottom:12px; z-index:200; max-width:760px; margin:0 auto; background:var(--card); color:var(--text); border:2px solid var(--accent); border-radius:12px; padding:14px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.aviso-cookies p{ margin:0; font-size:13px; flex:1; min-width:220px; line-height:1.5; }
.aviso-cookies a{ color:var(--accent); }
.aviso-cookies .btn{ padding:6px 14px; font-size:12px; }
.cadastro-caixa{ max-width:460px; margin:32px auto; }
.cadastro-caixa h1{ margin:0 0 6px; font-size:24px; }
.cadastro-caixa .campo-l input{ width:100%; }
.cadastro-erro{ background:var(--panel); border:1px solid var(--erro,#c0264a); color:var(--erro,#c0264a); border-radius:8px; padding:10px 12px; font-size:14px; margin:10px 0; }
.cadastro-erro[hidden]{ display:none; }
.check-linha a{ color:var(--accent); }
.btn-config{ white-space:nowrap; }
.cadastro-caixa .check-linha{ display:flex; align-items:flex-start; gap:8px; line-height:1.5; margin:10px 0; }
.cadastro-caixa .check-linha input{ flex-shrink:0; margin-top:3px; }
@media (max-width:760px){ .btn-config{ font-size:11px; padding:3px 8px; } }

.selo-dest{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.prod.prod-dest{ border:2px solid var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.anuncio-com-conteudo{ padding:8px; }
.anuncio-link{ display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text); text-decoration:none; width:100%; }
.anuncio-link img{ max-width:100%; height:auto; border-radius:8px; display:block; }
.anuncio-com-conteudo .selo-anuncio{ position:static; margin-bottom:6px; }
.anuncio-topo-loja{ margin:0 0 16px; min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; }

.comp-destinos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.comp-destinos .btn{ padding:10px; }

/* ===== Landing, migalhas, FAQ, CTA fixo ===== */
a.btn-link{ display:inline-block; background:var(--accent); color:var(--on-accent); padding:9px 22px; border-radius:20px; font-weight:bold; font-size:14px; text-decoration:none; }
a.btn-link.secundario{ background:var(--panel); color:var(--text); border:1px solid var(--border); }
a.btn-link.grande{ padding:13px 28px; font-size:16px; }
header.topo a.btn-link{ background:var(--topo-ativo-bg,#000); color:var(--topo-ativo-fg,#fff); padding:7px 16px; }
.landing{ max-width:960px; margin:0 auto; padding:0 16px 40px; }
.hero{ text-align:center; padding:48px 8px 28px; }
.hero h1{ font-size:clamp(28px,5vw,44px); line-height:1.15; margin:0 0 14px; }
.hero .realce{ background:var(--accent-soft); padding:0 8px; border-radius:6px; }
.hero-sub{ font-size:18px; color:var(--text-dim); max-width:640px; margin:0 auto 22px; }
.hero-botoes{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 0 14px; }
.resposta-24h{ color:var(--text-dim); font-size:14px; margin:6px 0 0; }
.n404{ font-size:90px; font-weight:900; margin:0; color:var(--accent); line-height:1; }
.landing h2{ font-size:24px; margin:36px 0 14px; text-align:center; }
.grade-recursos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.grade-recursos .card{ padding:16px; }
.grade-recursos h3{ margin:0 0 6px; font-size:16px; }
.grade-recursos p{ margin:0; color:var(--text-dim); font-size:14px; line-height:1.5; }
.links-internos{ text-align:center; color:var(--text-dim); font-size:14px; margin-top:16px; }
.links-internos a{ color:var(--text); text-decoration:underline; }
.estrelas{ color:var(--accent) !important; font-size:18px !important; letter-spacing:2px; }
.autor{ margin-top:6px !important; font-weight:bold; }
.prova figure{ margin:0; text-align:center; } .prova figure img{ max-width:100%; border-radius:12px; } .prova figcaption{ color:var(--text-dim); font-size:14px; margin-top:6px; }
.prova iframe{ width:100%; height:320px; border:0; border-radius:12px; }
.faq{ max-width:720px; margin:0 auto; }
.faq-item{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:10px; }
.faq-item summary{ cursor:pointer; font-weight:bold; }
.faq-item p{ margin:10px 0 2px; color:var(--text-dim); line-height:1.55; }
.cta-final{ text-align:center; padding:20px 0; }
.migalhas{ font-size:13px; color:var(--text-dim); margin:0 auto 10px; max-width:780px; padding:0 4px; }
.migalhas a{ color:var(--text-dim); text-decoration:underline; }
.migalhas [aria-current]{ color:var(--text); font-weight:bold; }
.cta-fixo{ display:none; }
@media(max-width:700px){
  .cta-fixo{ display:block; position:fixed; left:12px; right:12px; bottom:12px; z-index:900; text-align:center; background:var(--accent); color:var(--on-accent); font-weight:bold; padding:14px; border-radius:28px; text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,.35); }
  .landing{ padding-bottom:90px; }
  .aviso-cookies{ bottom:76px !important; }
}

/* Banner de destaque no topo (arte) */
.landing:has(.banner-destaque){ max-width:none; padding-left:0; padding-right:0; }
.landing:has(.banner-destaque) > section{ max-width:960px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
.landing:has(.banner-destaque) .hero{ padding-top:32px; }
.banner-destaque{ display:block; width:100%; background:#050805; border-bottom:3px solid #b5e61d; line-height:0; overflow:hidden; position:relative; }
.banner-destaque img{ display:block; width:100%; height:auto; max-height:560px; object-fit:cover; transition:transform .6s ease; }
.banner-destaque:hover img{ transform:scale(1.015); }
.banner-destaque:focus-visible{ outline:3px solid #b5e61d; outline-offset:-3px; }
@media (max-width:760px){ .banner-destaque img{ max-height:none; } .landing:has(.banner-destaque) .hero{ padding-top:20px; } }
@media (prefers-reduced-motion:reduce){ .banner-destaque img{ transition:none; } }

.campo-busca-col{ width:260px; max-width:100%; background:var(--panel); border:1px solid var(--border); border-radius:20px; color:var(--text); padding:9px 14px; font-size:14px; font-family:inherit; }
.campo-busca-col:focus{ outline:2px solid var(--accent); }

/* barra de missão: enche com animação e pulsa quando falta pouco */
.progresso-enchido, .barra-seg .enchido{ transition:width .8s ease; }
.dica-quase{ display:block; margin-top:4px; font-size:12px; color:#ffb84d; }
.missao-item.quase .progresso-enchido{ animation:pulsa-quase 1.4s ease-in-out infinite; }
@keyframes pulsa-quase{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.45); } }
@media (prefers-reduced-motion: reduce){ .missao-item.quase .progresso-enchido{ animation:none; } .progresso-enchido, .barra-seg .enchido{ transition:none; } }

/* ===== Selos de perfil: faixa sob a foto (paleta cartucho) ===== */
.avatar-caixa{ position:relative; flex-shrink:0; width:96px; }
.avatar-caixa .avatar{ display:block; }
.avatar-caixa.tem-selo .avatar{ border-radius:12px 12px 0 0; }
.selo-perfil{
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  width:max-content; min-width:100%; height:24px; padding:0 8px; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  border-radius:0 0 12px 12px; border-top:2px solid rgba(255,255,255,.28); cursor:default;
}
.selo-perfil-destaque{ background:#6b3fd1; color:#f1e9ff; }
.selo-perfil-patrocinado{ background:#b45309; color:#fff4e0; }
.selo-perfil-oficial{ background:#c81e3a; color:#ffe8ec; }
.selo-perfil-equipe{ background:#0e8f6b; color:#dffff3; }
.avatar-topo[data-selo]{ border-bottom:3px solid transparent; }
.avatar-topo[data-selo="destaque"]{ border-bottom-color:#6b3fd1; }
.avatar-topo[data-selo="patrocinado"]{ border-bottom-color:#b45309; }
.avatar-topo[data-selo="oficial"]{ border-bottom-color:#c81e3a; }
.avatar-topo[data-selo="equipe"]{ border-bottom-color:#0e8f6b; }
@media (max-width:640px){ .avatar-caixa, .avatar-caixa .avatar{ width:80px; } .avatar-caixa .avatar{ height:80px; } .selo-perfil{ height:22px; font-size:10px; padding:0 6px; } }

/* ===== Conta: botões ENTRAR / CRIAR CONTA / SAIR no topo (assets/auth.js) ===== */
header.topo .topo-conta{ display:flex; gap:6px; align-items:center; margin-left:auto; margin-right:10px; }
header.topo .topo-conta:empty{ display:none; }
.btn-conta{ display:inline-block; text-decoration:none; padding:7px 14px !important; font-size:13px !important; border-radius:20px; font-weight:bold; cursor:pointer; white-space:nowrap; line-height:1.2; }
a.btn-conta{ background:var(--accent); color:var(--on-accent); border:1px solid transparent; }
a.btn-conta.secundario, button.btn-conta.secundario{ background:var(--panel); color:var(--text); border:1px solid var(--border); }
@media (max-width:760px){ header.topo .topo-conta{ margin-right:6px; } .btn-conta{ padding:6px 10px !important; font-size:12px !important; } }

/* ===== Telas de entrar / criar conta / recuperar senha ===== */
.auth-caixa{ max-width:440px; margin:30px auto; }
.auth-caixa h1{ margin:0 0 6px; font-size:24px; }
.auth-caixa .campo-l input{ width:100%; box-sizing:border-box; }
.auth-provedores{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.btn-provedor{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:10px; border-radius:20px; border:1px solid var(--border); background:var(--card); color:var(--text); font-weight:bold; cursor:pointer; font-size:14px; }
.btn-provedor:hover{ border-color:var(--accent); }
.btn-provedor svg{ width:18px; height:18px; }
.auth-sep{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:12px; margin:12px 0; }
.auth-sep::before, .auth-sep::after{ content:""; flex:1; height:1px; background:var(--border); }
.auth-links{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:12px; font-size:13px; }
.auth-links a, .auth-links button.link{ color:var(--accent); background:none; border:none; padding:0; cursor:pointer; font-size:13px; text-decoration:underline; }
.auth-ok{ background:var(--accent-soft); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:10px 0; font-size:14px; }
.auth-aviso-config{ border:2px dashed #e0a800; border-radius:10px; padding:12px; margin:10px 0; font-size:14px; }
.auth-carregando{ text-align:center; color:var(--text-dim); padding:40px 0; }
.qr-2fa{ background:#fff; padding:10px; border-radius:10px; display:inline-block; }
.qr-2fa img{ width:180px; height:180px; display:block; }
.codigo-secreto{ font-family:monospace; word-break:break-all; background:var(--panel); padding:6px 8px; border-radius:6px; font-size:12px; }

/* ===== Painel do dono ===== */
.tabela-dono{ width:100%; border-collapse:collapse; font-size:13px; }
.tabela-dono th, .tabela-dono td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--border); vertical-align:top; }
.tabela-dono th{ color:var(--text-dim); font-weight:normal; font-size:12px; }
.tabela-rolagem{ overflow-x:auto; }
.resumo-dono{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }
.resumo-dono div{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; }
.resumo-dono strong{ display:block; font-size:22px; }
.resumo-dono span{ color:var(--text-dim); font-size:12px; }
.etiqueta-papel{ display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; background:var(--accent-soft); border:1px solid var(--border); }
.etiqueta-bloqueado{ background:#ffd6e0; color:#7a0026; border-color:#ff9ab3; }