:root{
  /* Tema padrão do site é escuro. Sem `color-scheme` certo, controles
     nativos do navegador (dropdown de <select> aberto, date picker etc.)
     renderizam com o tema do SISTEMA OPERACIONAL por padrão, ignorando o
     `background`/`color` customizados do CSS (limitação conhecida do
     Chrome/Edge no Windows) — daí o fundo branco reportado nos selects de
     Gênero/Estado, difícil de enxergar sobre um tema escuro. Por isso
     `body.tema-claro` (mais abaixo) também redefine `color-scheme`. */
  color-scheme: dark;
  --bg: #2D2A33;
  --bg-2: #332E3A;
  --card: #312C36;
  --card-hover: #37313E;
  /* --overlay-tint: canal RGB (sem "rgba(...)") reusado em dezenas de
     `rgba(var(--overlay-tint),X)` espalhados pelo CSS — tudo fundo/borda
     "sutilmente mais claro que o fundo da página" (hover, chips, campos
     de formulário, abas). Um lugar só pra inverter esse sentido no tema
     claro (vira "sutilmente mais escuro que o fundo"), sem precisar achar
     e trocar cada ocorrência individualmente. */
  --overlay-tint: 255,255,255;
  /* --bg-tint: canal RGB equivalente a --bg, usado nos vidros foscos
     (header/barra inferior, `rgba(var(--bg-tint),X) + backdrop-filter`)
     que precisam de um `--bg` translúcido, não sólido. */
  --bg-tint: 45,42,51;
  --line: rgba(var(--overlay-tint),0.08);
  --line-strong: rgba(var(--overlay-tint),0.14);
  --ink: #F3EEF7;
  --ink-soft: #B7ACC4;
  --ink-faint: #7C7188;
  --ember: #E86A3A;
  --ember-soft: rgba(232,106,58,0.14);
  --violet: #8E6FE8;
  --violet-soft: rgba(142,111,232,0.14);
  --ok: #4FBF8B;
  --info: #4FA3E3;
  --info-soft: rgba(79,163,227,0.16);
  --cyan: #22D3EE;
  --cyan-soft: rgba(34,211,238,0.16);
  --amber: #F0B429;
  --amber-soft: rgba(240,180,41,0.16);
  --shadow: 0 24px 60px -24px rgba(0,0,0,0.6);
}

body.tema-claro{
  color-scheme: light;
  --bg: #FBF7F0;
  --bg-2: #F2E9DC;
  /* Card precisa ser um tom MAIS ESCURO que --bg (não mais claro) — sem
     isso um card branco sobre um fundo quase branco (#FBF7F0) não tinha
     contorno visível nenhum, só a borda finíssima de --line pra separar.
     Mesma lógica do tema escuro (onde --card já é mais claro que --bg,
     "pop" pro lado oposto), só que invertida — aqui o fundo é o mais
     claro dos três, --card um degrau abaixo, --card-hover mais um. */
  --card: #F3EAD9;
  --card-hover: #EBDCC2;
  --overlay-tint: 20,15,10;
  --bg-tint: 251,247,240;
  --line: rgba(var(--overlay-tint),0.09);
  --line-strong: rgba(var(--overlay-tint),0.16);
  --ink: #2B2116;
  --ink-soft: #6E5F4E;
  --ink-faint: #9C8C78;
  --ember: #D9572A;
  --ember-soft: rgba(217,87,42,0.10);
  --violet: #7C5FD1;
  --violet-soft: rgba(124,95,209,0.10);
  --ok: #2E9C6B;
  --info: #2C79B8;
  --info-soft: rgba(44,121,184,0.12);
  --cyan: #0E7C93;
  --cyan-soft: rgba(14,124,147,0.12);
  --amber: #B0790A;
  --amber-soft: rgba(176,121,10,0.12);
  --shadow: 0 24px 60px -24px rgba(60,45,30,0.18);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-anchor:none;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Sora', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing:0.04em; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
/* `--wrap-pad` centraliza o valor do padding lateral do `.wrap` — usado
   também pelo breakout de Mensagens (`margin:0 calc(-1 * var(--wrap-pad))`)
   pra sempre compensar o valor CERTO, em vez de um -28px fixo que ficava
   errado assim que o padding mudasse só numa faixa de largura (ver
   @media(max-width:600px) logo abaixo). */
:root{ --wrap-pad: 28px; }
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--wrap-pad); position:relative; z-index:1;}
::selection{ background:var(--ember); color:#1a1420; }

/* bond mark (logo signature) */
.bond{
  width:30px; height:30px; position:relative; flex-shrink:0;
}
.bond span{
  position:absolute; width:18px; height:18px; border-radius:50%;
  border:2.5px solid var(--ink);
  mix-blend-mode:normal;
}
.bond span:first-child{ left:0; top:6px; border-color:var(--ember); }
.bond span:last-child{ right:0; top:6px; border-color:var(--violet); }

/* O atributo [hidden] perde para qualquer regra que fixe `display` no
   elemento (ex: .nav-links{display:flex}) por causa da ordem do cascade —
   isso garante que hidden sempre vença. */
[hidden]{ display:none !important; }

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--bg-tint),0.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* padding lateral em `var(--wrap-pad)` (mesma variável do `.wrap`, ver
   abaixo) — sem isso o cabeçalho ficava preso em 28px fixos mesmo no
   celular, mais "encolhido" que o corpo da página (que já reduz pra 14px
   nessa faixa de largura). `<nav class="bottom-tabs">` (barra inferior)
   também é um `<nav>` e cai nessa mesma regra — corrige os dois de uma vez
   (pedido explícito: cabeçalho e rodapé com a mesma largura do corpo). */
nav{
  max-width:1180px; margin:0 auto; padding:10px var(--wrap-pad);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
}
.logo{ display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700; font-size:1.2rem; }
.nav-links{ display:flex; gap:32px; font-size:0.92rem; font-weight:500; color:var(--ink-soft); justify-self:center; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; gap:12px; align-items:center; justify-self:end; }
/* Logado: a coluna do meio (1fr) ocupa o espaço que sobra entre a logo e
   o bloco "Olá, Nome/Sair", e justify-self:center centraliza o menu bem
   ali no meio — de verdade entre os dois, não só no meio da nav inteira
   (que ficaria puxado pro lado com o lado mais largo). width:95% faz o
   menu ocupar quase todo esse espaço em vez de só o mínimo pro texto das
   abas (antes sobrava bastante vazio dos dois lados em telas largas). */
.header-app-tabs{ margin:0; max-width:none; width:95%; justify-self:center; }
/* #appNavTabs (id) pra garantir que isso vença .app-tabs{max-width:420px}
   (definida mais abaixo no arquivo, pensada pra quando eram só 3-4 abas
   dentro do app-shell) — mesma especificidade de classe, então sem o id
   a regra de baixo ganhava por vir depois e cortava as abas de mais à
   direita (Meu perfil/Interesses ficavam fora da caixa com borda).
   margin-bottom:0 pelo mesmo motivo: .app-tabs{margin-bottom:28px} (mesma
   regra de baixo) também vencia o `margin:0` de .header-app-tabs, deixando
   o cabeçalho ~28px mais alto do que devia sem nenhum motivo visual. */
#appNavTabs{ max-width:none; margin-bottom:0; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:10px;
  font-weight:600; font-size:0.9rem; font-family:'Inter',sans-serif;
  border:1px solid var(--line-strong);
  cursor:pointer; transition:all .18s ease;
  background:transparent; color:var(--ink);
}
.btn-primary{
  background:linear-gradient(135deg, var(--ember), #d5502a);
  border-color:transparent; color:#fff;
  box-shadow:0 8px 20px -8px rgba(232,106,58,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(232,106,58,0.65); }
.btn-ghost:hover{ background:rgba(var(--overlay-tint),0.06); border-color:var(--line-strong); }

/* Botão "Entrar" do cabeçalho — contorno em destaque (laranja/--ember),
   pedido explícito do usuário pra chamar mais atenção do que os outros
   botões "ghost" da nav (ex: "Ver como funciona"). Vem DEPOIS de
   .btn-ghost:hover no arquivo de propósito — mesma especificidade dos
   dois seletores, então a ordem no CSS é o que decide quem vence. */
[data-auth-open="entrar"]{ border:1.5px solid var(--ember); }
[data-auth-open="entrar"]:hover{ background:var(--ember-soft); border-color:var(--ember); }

.btn-carregando{ position:relative; color:transparent !important; pointer-events:none; }
.btn-carregando::after{
  content:''; position:absolute; top:50%; left:50%; width:15px; height:15px;
  margin:-7.5px 0 0 -7.5px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.35); border-top-color:#fff;
  animation:girar-spinner .6s linear infinite;
}
@keyframes girar-spinner{ to{ transform:rotate(360deg); } }
@media(max-width:860px){
  .nav-links{display:none;}
  nav{ display:flex; flex-wrap:wrap; row-gap:10px; justify-content:space-between; }
  .header-app-tabs{ order:3; width:100%; max-width:100%; justify-self:unset; }
  /* Se logo + "Olá/Sair" não couberem lado a lado, o nav-cta quebra pra
     sua própria linha — nesse caso, sendo o único item da linha,
     justify-content:space-between sozinho não empurra ele pra direita
     (não tem "outro item" pra abrir espaço entre os dois). margin-left:auto
     resolve nos dois casos: sempre empurra o nav-cta pro fim da linha
     atual, esteja ele dividindo a linha com a logo ou sozinho numa linha
     própria. */
  .nav-cta{ margin-left:auto; }

  /* Some suavemente (opacidade + altura), não com display:none instantâneo
     — a transição/max-height base (que cobre até 2 linhas de abas +
     margem) já vem do `#appNavTabs` global, ver perto de `.bottom-tabs`. */
  body.procurar-menu-escondido #appNavTabs{ opacity:0; max-height:0; margin-bottom:0; pointer-events:none; }
  .descobrir-toolbar{ position:sticky; z-index:40; background:var(--bg); padding-top:8px; margin-top:-8px; }
}
/* Telas de celular: 6 abas não cabem espremidas (flex:1 força cada uma a
   ficar minúscula e o texto — "Não Deu Match" etc. — se sobrepõe). Em vez
   de espremer OU de rolar horizontalmente escondido (rolagem com scrollbar
   oculta fazia abas "sumirem" sem indicação nenhuma de que havia mais
   itens pra rolar até), a barra de abas agora QUEBRA em mais de uma linha,
   mantendo cada aba com sua largura natural e sempre visível de cara —
   mesma ideia aplicada às sub-abas Posts/Fotos, por segurança, embora só
   tenham 2 itens. */
@media(max-width:600px){
  .app-tabs, .subtabs{
    flex-wrap:wrap; justify-content:center;
  }
  .app-tab, .subtab-btn{ flex:0 0 auto; padding:9px 14px; font-size:0.8rem; }

  /* Pedido explícito: usar ~100% do espaço horizontal no celular — o
     padding lateral fixo de 28px (`.wrap`, usado em toda página incluindo
     o app logado) desperdiça uns 56px de largura útil numa tela de ~390px
     (uns 14% da tela). Reduz pra um respiro mínimo (14px) só nessa faixa
     de largura — mantém alguma margem pra texto/botão não encostar
     literalmente na borda física, mas ganha quase todo o espaço de volta.
     Telas maiores (tablet/desktop) continuam com os 28px normais. */
  :root{ --wrap-pad: 14px; }
}

/* Barra inferior (Início/Notificações/Mensagens) — só aparece logado.
   Mesmo comportamento do cabeçalho do topo: fica FIXA na tela (não rola
   junto com a página), com o conteúdo (cards etc.) passando por baixo dela
   conforme a pessoa rola a página. */
.bottom-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  /* `<nav class="bottom-tabs">` também é um `<nav>` — sem esses 4
     travados aqui, regras do `nav{}` genérico (pensadas pro cabeçalho)
     vazavam pra cá: `gap:16px` (regra base) abria um vão fixo entre CADA
     aba, `flex-wrap:wrap` (media query 860px) fazia a última aba quebrar
     linha sozinha (esticando pra largura toda) assim que a barra ficava
     apertada demais, e `justify-content:space-between` (mesma media query)
     abria ainda mais vão — juntos, "empurravam" a última aba pra fora da
     tela, cortada (pedido explícito: nada pode cortar na barra inferior em
     telas pequenas). */
  display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:0;
  background:rgba(var(--bg-tint),0.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transition:opacity .25s ease, transform .25s ease;
}
/* Quadrado (não círculo, não mais só em volta do ícone) que desliza até
   ENVOLVER O BOTÃO INTEIRO da aba ativa — só a borda laranja marca a
   seleção, sem preenchimento (pedido explícito: o indicador de seleção é
   ESTE elemento, não um contorno fixo direto no ícone). Tamanho SEM valor
   fixo aqui — width/height variam por aba (são `flex:1`, larguras
   diferentes) e ficam a cargo do JS, que mede o botão real a cada troca de
   aba (`moverPilulaBottomTab` em motionUI.js). */
.bottom-tab-indicador{
  position:absolute; top:0; left:0;
  border-radius:12px; border:1.5px solid var(--ember); background:none;
  opacity:0; pointer-events:none;
}
.bottom-tab{
  position:relative; z-index:1;
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px 8px; border:none; background:transparent;
  color:var(--ink-soft); font-family:'Inter',sans-serif; cursor:pointer;
  transition:color .15s ease;
}
.bottom-tab-icon{
  font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  transition:background .15s ease, box-shadow .15s ease;
}
.bottom-tab-label{ font-size:0.66rem; font-weight:600; }
.bottom-tab:hover{ color:var(--ink); }
.bottom-tab.active{ color:var(--ember); }

#appNavTabs{ transition:opacity .25s ease, max-height .25s ease, margin-bottom .25s ease; overflow:hidden; max-height:160px; }
body.abas-escondidas #appNavTabs, body.topo-escondido #appNavTabs{
  opacity:0; max-height:0; margin-bottom:0; pointer-events:none;
}
body.abas-escondidas .bottom-tabs{
  opacity:0; transform:translateY(100%); pointer-events:none;
}
/* Telas do fluxo "Assinar Vibe" (escolher plano + pagar PIX, ambas com
   `data-esconde-abas`): além do menu/barra inferior (acima), o rodapé
   também some (mesmo recolhido, o "+" e o padding do <footer> ainda
   ocupavam espaço) e o conteúdo fica centralizado verticalmente no
   restante da tela — objetivo é focar só no pagamento, sobrando cabeçalho
   + Voltar + o conteúdo da tela. `<header>`/`.app-panel` viram itens flex
   de `body` (o restante da altura vai pro app-panel sem precisar calcular
   a altura exata do cabeçalho em px); os overlays/toasts
   (`position:fixed`) não são afetados por isso. `overflow-y:auto` no
   app-panel é rede de segurança pra telas de conteúdo mais alto que o
   viewport (ex: a lista de planos) ou viewports bem baixos (celular
   deitado) não perderem acesso ao que tem embaixo — a tela de PIX em si
   foi dimensionada (ver `[data-app-view="assinatura-pix"]` mais abaixo)
   pra normalmente nem precisar disso. */
body.abas-escondidas footer{ display:none; }
body.abas-escondidas{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body.abas-escondidas .app-panel{ flex:1; display:flex; align-items:center; overflow-y:auto; padding-bottom:14px; }
body.abas-escondidas .app-panel > .app-shell{ width:100%; }
/* "Assinar Vibe" tem bem mais conteúdo que as outras telas de
   `abas-escondidas` (PIX, checkout) — título + lista de benefícios + cards
   de plano. Com `align-items:center` do bloco acima, quando esse conteúdo
   passa da altura da tela (celular, ou lista de benefícios grande), a
   metade de cima — onde fica o botão "Voltar" — cai numa faixa que a
   rolagem não alcança (scrollTop não vai negativo): a tela trava sem
   "Voltar" visível E sem jeito de rolar até ele (pedido explícito: bug
   notado no celular). `flex-start` só nessa view resolve — rola normal do
   topo pra baixo quando não cabe, mantendo as outras telas centralizadas. */
body.abas-escondidas .app-panel:has([data-app-view="assinatura-planos"].active){ align-items:flex-start; }

/* Mensagens (`topo-escondido`, mantém a barra inferior — diferente de
   `abas-escondidas`, que esconde as duas): o rodapé institucional
   (`<footer>`, links legais etc.) também some, e o `body` vira flex com
   altura TRAVADA em 100dvh — pedido explícito, a tela deve ocupar TODA a
   altura disponível (só cabeçalho + conteúdo + barra inferior), sem dar
   pra rolar a página toda e "vazar" pra baixo. `.mensagens-shell` já
   calcula a própria altura exata pra caber nesse espaço (ver
   `ajustarAlturaMensagens` em mensagens.js), mas só esconder o `<footer>`
   não bastava — sobrava alguns px de folga (padding/margem residual) que
   ainda deixavam a página levemente mais alta que a janela, dando pra
   rolar por baixo. Travar a altura do body em 100dvh com `overflow:hidden`
   fecha esse espaço de vez, igual o padrão já usado em `abas-escondidas`
   — o scroll interno de cada lista (`.conversa-mensagens`,
   `.conversas-lista`) continua funcionando normal, só o body/página
   inteira que não rola mais. */
body.topo-escondido footer{ display:none; }
body.topo-escondido{ display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
/* `.app-panel` normal tem `padding:36px 0 96px` (respiro padrão de toda
   view) — em Mensagens isso sobrava como uma folga vazia entre o fim do
   cabeçalho e o topo da caixa de conversa (36px) e outra faixa vazia
   embaixo, mesmo com `ajustarAlturaMensagens()` (mensagens.js) já
   calculando a altura exata da `.mensagens-shell` pra o espaço restante —
   o padding entrava CONTA daquele espaço "restante" mas não era usado por
   nada. Zera aqui: a caixa de conversa encosta direto no cabeçalho e usa
   100% da altura disponível até a barra inferior, sem nada "sumindo" por
   trás do padding nem sobrando vazio. */
body.topo-escondido .app-panel{ flex:1; min-height:0; overflow:hidden; padding:0; }

/* Setas de rolagem (subir/descer) — flutuam no canto inferior direito, por
   cima do conteúdo mas acima da barra inferior fixa (que ocupa a faixa de
   baixo da tela), pra nunca ficar por baixo dela. */
.scroll-fabs{
  position:fixed; right:16px; bottom:88px; z-index:56;
  display:flex; flex-direction:column; gap:10px;
}
.scroll-fab{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--card); color:var(--ink-soft); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  cursor:pointer; transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.scroll-fab:hover{ color:var(--ink); border-color:var(--ember); transform:translateY(-2px); }
@media(max-width:600px){
  /* No celular a barra inferior é a mesma altura, mas o espaço lateral é
     mais apertado — encosta um pouco mais no canto. */
  .scroll-fabs{ right:10px; bottom:84px; gap:8px; }
  .scroll-fab{ width:38px; height:38px; font-size:1rem; }
}

/* HERO */
.hero{
  position:relative;
  padding:28px 0 21px;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:900px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,106,58,0.28), transparent 60%);
  filter:blur(30px); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; top:-140px; right:-120px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(142,111,232,0.22), transparent 60%);
  filter:blur(30px); pointer-events:none;
}
.hero-inner{ position:relative; text-align:center; max-width:760px; margin:0 auto; }
.age-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 14px; border-radius:999px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); font-size:0.78rem; color:var(--ink-soft);
  margin-bottom:26px;
}
.age-badge b{ color:var(--ink); }
.hero h1{
  font-size:clamp(2.4rem, 5.4vw, 4.2rem); line-height:1.05;
}
.hero h1 .grad{
  background:linear-gradient(100deg, var(--ember), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{
  margin:22px auto 0; font-size:1.12rem; line-height:1.65; color:var(--ink-soft); max-width:560px;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.hero-note{ margin-top:16px; font-size:0.82rem; color:var(--ink-faint); }

.stat-bar{
  margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0;
}
.stat-bar div{ text-align:center; border-right:1px solid var(--line); }
.stat-bar div:last-child{ border-right:none; }
.stat-bar .num{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.9rem; }
.stat-bar .num.ember{ color:var(--ember); }
.stat-bar .num.violet{ color:var(--violet); }
.stat-bar .lbl{ font-size:0.78rem; color:var(--ink-faint); margin-top:4px; }
@media(max-width:760px){
  .stat-bar{ grid-template-columns:repeat(1,1fr); row-gap:24px; }
  .stat-bar div{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:20px; }
  .stat-bar div:last-child{ border-bottom:none; padding-bottom:0; }
}


/* SECTION */
.section{ padding:14px 0; position:relative; }
.section-head{ max-width:640px; margin:0 auto 40px; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:0.76rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ember); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--ember); }
.section-head h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.15; }
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:1.02rem; line-height:1.6; }

/* VALUES */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:30px 26px;
  transition:border-color .2s ease, transform .2s ease;
}
.value-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.value-card .ico{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.value-card:nth-child(3n+1) .ico{ background:var(--ember-soft); }
.value-card:nth-child(3n+2) .ico{ background:var(--violet-soft); }
.value-card:nth-child(3n+3) .ico{ background:rgba(79,191,139,0.14); }
.value-card h3{ font-size:1.12rem; }
.value-card p{ margin-top:10px; color:var(--ink-soft); font-size:0.92rem; line-height:1.6; }
@media(max-width:820px){ .values{grid-template-columns:1fr;} }

/* APP PREVIEW */
.preview{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.preview-copy h2{ font-size:clamp(1.8rem,3vw,2.4rem); }
.preview-copy p{ margin-top:16px; color:var(--ink-soft); line-height:1.65; font-size:1.02rem; max-width:440px; }
.preview-list{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.preview-list li{ display:flex; gap:12px; align-items:flex-start; font-size:0.95rem; }
.preview-list .dot{
  width:22px; height:22px; border-radius:7px; background:var(--ember-soft); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.preview-list .dot svg{ width:12px; height:12px; }
.device-mock{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:18px; box-shadow:var(--shadow);
}
.device-mock .bar{ display:flex; gap:6px; margin-bottom:16px; }
.device-mock .bar span{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.mock-feed-item{
  display:flex; gap:12px; padding:12px; border-radius:12px; background:var(--bg-2); margin-bottom:10px;
}
.mock-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
}
.mock-lines{ flex:1; }
.mock-lines .l1{ width:60%; height:9px; border-radius:4px; background:var(--line-strong); margin-bottom:8px; }
.mock-lines .l2{ width:90%; height:7px; border-radius:4px; background:var(--line); margin-bottom:6px; }
.mock-lines .l3{ width:75%; height:7px; border-radius:4px; background:var(--line); }
.mock-chat-bubble{
  max-width:75%; padding:10px 14px; border-radius:14px; font-size:0.78rem; color:var(--ink-soft); margin-bottom:8px;
}
.mock-chat-bubble.in{ background:var(--bg-2); border:1px solid var(--line); border-bottom-left-radius:4px; }
.mock-chat-bubble.out{ background:var(--ember-soft); border:1px solid rgba(232,106,58,0.25); margin-left:auto; border-bottom-right-radius:4px; color:var(--ink); }
@media(max-width:920px){ .preview{grid-template-columns:1fr;} }

/* SOCIAL PROOF */
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.proof-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  transition:transform .2s ease, border-color .2s ease;
}
.proof-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.proof-blur{
  width:64px; height:64px; border-radius:50%; position:relative; overflow:hidden;
}
.proof-blur::after{
  content:""; position:absolute; inset:0; backdrop-filter:blur(6px);
}
.proof-card .cidade{ font-size:0.9rem; font-weight:600; }
.proof-card .tag{ font-size:0.76rem; color:var(--ink-faint); }
.proof-card .lock{
  margin-top:6px; font-size:0.7rem; color:var(--ember); display:flex; align-items:center; gap:5px;
}
@media(max-width:920px){ .proof-grid{ grid-template-columns:repeat(2,1fr); } }

/* TRUST */
.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* #denuncias tem só 2 cards (não 3) — centraliza o par em vez de deixar
   colado à esquerda com uma coluna vazia sobrando. */
#denuncias .trust{ grid-template-columns:repeat(2, minmax(240px,320px)); justify-content:center; }
@media(max-width:820px){ #denuncias .trust{ grid-template-columns:1fr; } }
.trust-card{ text-align:center; padding:10px; }
.trust-card .ring{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line-strong); background:var(--card);
}
.trust-card h3{ font-size:1.05rem; }
.trust-card p{ margin-top:8px; color:var(--ink-soft); font-size:0.9rem; line-height:1.55; }
@media(max-width:820px){ .trust{ grid-template-columns:1fr; } }

/* FAQ */
.faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 22px;
  display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:0.98rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{
  width:22px; height:22px; flex-shrink:0; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--ink-soft);
  transition:transform .2s ease;
}
.faq-item[open] summary .plus{ transform:rotate(45deg); color:var(--ember); border-color:var(--ember); }
.faq-item p{ padding:0 22px 20px; color:var(--ink-soft); font-size:0.92rem; line-height:1.6; }

/* CIDADES */
.cidades-grid{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:900px; margin:0 auto;
}
.cidade-chip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line); font-size:0.85rem; color:var(--ink-soft);
  transition:all .18s ease;
}
.cidade-chip:hover{ border-color:var(--ember); color:var(--ink); background:var(--ember-soft); }

/* CTA FINAL */
.cta-panel{
  position:relative; border-radius:28px; padding:70px 40px; text-align:center; overflow:hidden;
  background:linear-gradient(135deg, #1c1420, #14101c);
  border:1px solid var(--line);
}
.cta-panel::before{
  content:""; position:absolute; top:-100px; left:50%; transform:translateX(-50%);
  width:600px; height:300px; background:radial-gradient(circle, rgba(232,106,58,0.25), transparent 65%);
  filter:blur(20px);
}
.cta-panel > *{ position:relative; z-index:1; }
.cta-panel h2{ font-size:clamp(1.8rem,3.4vw,2.4rem); }
.cta-panel p{ margin:14px auto 30px; color:var(--ink-soft); max-width:460px; }

/* FOOTER */
footer{ padding:56px 0 40px; border-top:1px solid var(--line); }
/* Logado, a barra inferior fixa (.bottom-tabs) cobre a faixa de baixo da
   tela o tempo todo — sem essa folga extra, o botão "+" do rodapé (que já
   fica logo depois do app-panel no fluxo normal da página) ficava
   escondido atrás dela ao rolar até o fim. Escopado só pra quando a barra
   inferior está realmente visível (deslogado ela é `hidden`, e o rodapé
   institucional não precisa dessa folga). */
body:has(#bottomTabs:not([hidden])) footer{ padding-bottom:96px; }
/* Só existe (e só fica visível) quando logado — o rodapé fica recolhido
   por padrão nesse caso, pra não competir tanto por espaço com o app;
   deslogado, o rodapé institucional sempre aparece inteiro normalmente. */
.footer-toggle{
  display:flex; align-items:center; justify-content:center; margin:0 auto;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--card); color:var(--ink-soft); font-size:1.3rem; line-height:1; cursor:pointer;
}
.footer-toggle:hover{ border-color:var(--ember); color:var(--ink); }
.foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:40px; }
.foot-brand p{ max-width:280px; color:var(--ink-faint); font-size:0.85rem; line-height:1.6; margin-top:14px; }
.foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h4{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:14px; }
.foot-col a{ display:block; font-size:0.9rem; margin-bottom:10px; color:var(--ink-soft); }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{
  padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.78rem; color:var(--ink-faint);
}
.foot-legal{ max-width:640px; }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* NAV - estado logado */
.nav-user{ display:flex; align-items:center; gap:9px; }
.nav-user .who{ font-size:0.82rem; color:var(--ink-soft); }
.nav-user .who b{ color:var(--ink); }
/* Botão "Sair" usa a mesma classe .btn dos CTAs grandes (Criar conta
   grátis etc.) — no cabeçalho, ao lado do menu centralizado, isso ficava
   desproporcional. Reduzido só aqui, sem mexer no .btn geral. */
.nav-user .btn{ padding:6px 14px; font-size:0.78rem; }
/* Contador de não lidas — círculo pequeno sobreposto no canto do ícone da
   barra inferior (o sino do cabeçalho foi removido, por pedido explícito
   — só duplicava a aba Notificações de baixo). Só aparece quando > 0 (o JS
   controla `hidden`); sempre em vermelho/ember pra chamar atenção, igual
   contador de notificação de qualquer app. */
.badge-nao-lidas{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:#f27a6b; color:#fff; border:1.5px solid var(--bg);
  font-family:'Inter',sans-serif; font-size:0.62rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.bottom-tab-icon-wrap{ position:relative; display:inline-flex; }
.bottom-tab-icon-wrap .badge-nao-lidas{ border-color:rgba(var(--bg-tint),0.92); }
.profile-nudge{
  font-size:0.76rem; color:var(--ember); cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}

/* MODAL DE AUTENTICAÇÃO */
.auth-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(8,6,10,0.72); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.auth-overlay.open{ display:flex; }
.auth-modal{
  position:relative; width:100%; max-width:380px;
  background:var(--card); border:1px solid var(--line-strong); border-radius:20px;
  padding:24px 22px 20px; box-shadow:var(--shadow);
  max-height:88vh; overflow-y:auto;
}
.confirm-desc{ font-size:0.92rem; line-height:1.6; color:var(--ink-soft); }
.confirm-actions{ display:flex; gap:10px; margin-top:20px; }
/* Variante empilhada — usada quando tem 3 opções (ex: exata/aproximada/
   cancelar), fica apertado demais numa linha só. */
.confirm-actions-coluna{ flex-direction:column; }
.verificacao-config-bloco{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:14px; border:1px solid var(--line-strong); border-radius:12px;
  font-size:0.86rem; color:var(--ink-soft);
}
.verificacao-selfie-preview{
  display:block; width:120px; height:120px; margin:14px auto 0; border-radius:50%;
  object-fit:cover; border:2px solid var(--ember);
}

.camera-overlay{
  position:fixed; inset:0; z-index:160;
  background:#000; display:flex; align-items:center; justify-content:center;
}
.camera-modal{
  position:relative; width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.camera-modal video{
  width:100%; height:100%; max-height:calc(100% - 96px); object-fit:cover;
  background:#000;
}
.camera-erro{
  position:absolute; top:20px; left:20px; right:20px; text-align:center;
  color:#fff; background:rgba(0,0,0,0.6); border-radius:12px; padding:10px 14px; font-size:0.86rem;
}
.camera-acoes{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; max-width:480px; padding:16px 24px; height:96px; flex-shrink:0;
}
.camera-capturar-btn{
  width:64px; height:64px; border-radius:50%; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; padding:0;
  margin-left:auto; margin-right:auto;
}

/* Lightbox de foto (cards, Minhas fotos, sub-aba Fotos do Perfil) */
.foto-lightbox-overlay{
  position:fixed; inset:0; z-index:150;
  background:rgba(8,6,10,0.9);
  display:none; align-items:center; justify-content:center; padding:40px;
}
.foto-lightbox-overlay.open{ display:flex; }
/* No celular, os 40px de padding de cada lado comem uns 20% da largura da
   tela (a caixa encolhe pra caber dentro do padding — largura é eixo
   principal do flex, "flex-shrink" entra em ação sozinho). Reduz o
   padding aqui pra caixa usar o MAIOR tamanho possível também no celular,
   não só no desktop (que já ganhou um teto bem maior, ver
   `.foto-lightbox-conteudo` acima). */
@media(max-width:600px){
  .foto-lightbox-overlay{ padding:10px; }
}
/* Caixa de tamanho FIXO (pedido explícito) — não muda de acordo com as
   dimensões de cada foto, pra curtir/comentar nunca "pular" de lugar ao
   navegar entre fotos de proporções diferentes no mesmo carrossel. Usa o
   MAIOR tamanho possível em qualquer dispositivo (pedido explícito) — o
   teto em px só existe pra não ficar um quadrado gigante e sem graça em
   monitor ultra-wide, mas em qualquer tela normal (celular a desktop) a
   caixa ocupa quase toda a área disponível dentro do padding do overlay. */
.foto-lightbox-conteudo{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  width:min(94vw, 720px); height:min(92vh, 860px);
}
.foto-lightbox-overlay img{
  width:100%; flex:1; min-height:0; object-fit:contain; background:#000;
  border-radius:12px 12px 0 0; box-shadow:var(--shadow);
  transition:flex-basis .25s ease;
}
/* Painel de comentários aberto: a foto encolhe pra cima (tamanho menor,
   fixo) — sobra espaço pro campo de escrever + a lista, ambos embaixo dela
   (pedido explícito), com a lista rolando dentro do que sobrar. */
.foto-lightbox-conteudo:has(.comentarios-inline:not([hidden])) img{
  flex:0 0 auto; height:38%;
}
.foto-lightbox-legenda{
  flex-shrink:0; width:100%; background:var(--card); border:1px solid var(--line-strong);
  border-top:none; padding:12px 16px;
}
.foto-lightbox-legenda p{ font-size:0.9rem; line-height:1.5; color:var(--ink); white-space:pre-wrap; margin-bottom:4px; }
.foto-lightbox-legenda span{ font-size:0.76rem; color:var(--ink-faint); }
/* Curtir/comentar da foto aberta grande — mesma barrinha `.engajamento` já
   usada nas miniaturas, só que numa caixa sólida (não overlay) embaixo da
   imagem, já que aqui sobra espaço. Vazia (nenhum item com tipo/id, ex: a
   grade de gerenciar fotos em "Meu perfil") não ocupa espaço nenhum. Fica
   sempre no RODAPÉ da caixa (pedido explícito) — `min-height:0` no wrapper
   flex é o que permite o painel de comentários abaixo dela rolar em vez de
   estourar a altura fixa da caixa toda. */
.foto-lightbox-engajamento:empty{ display:none; }
.foto-lightbox-engajamento:not(:empty){
  display:flex; flex-direction:column; min-height:0; flex-shrink:0;
  width:100%; background:var(--card); border:1px solid var(--line-strong);
  border-top:none; padding:8px 16px;
}
.foto-lightbox-conteudo:has(.comentarios-inline:not([hidden])) .foto-lightbox-engajamento{
  flex:1; min-height:0;
}
.foto-lightbox-engajamento .engajamento{ border-top:none; margin-top:0; padding-top:0; flex-shrink:0; }
.foto-lightbox-engajamento .engajamento button{ color:var(--ink-soft); }
.foto-lightbox-engajamento .engajamento button:hover{ color:var(--ink); }
/* Dentro do lightbox: campo de escrever ACIMA da lista de comentários
   (pedido explícito, oposto da ordem padrão em posts/grade de fotos) —
   `column-reverse` inverte a ordem visual sem duplicar o HTML/JS
   compartilhado com o resto do app. Lista rola dentro do espaço que sobrar
   da caixa de altura fixa, sempre do mais recente pro mais antigo. */
.foto-lightbox-engajamento .comentarios-inline{
  display:flex; flex-direction:column-reverse; min-height:0; flex:1;
  margin-top:8px; padding-top:8px;
}
.foto-lightbox-engajamento .comentarios-inline-form{ flex-shrink:0; }
.foto-lightbox-engajamento .comentarios-inline-lista{
  flex:1; min-height:0; max-height:none; margin-bottom:0; margin-top:8px;
}
/* Sem legenda nem barrinha de engajamento: a foto fica com os 4 cantos
   arredondados, já que não tem nenhuma caixa embaixo. Só legenda: a
   barrinha some mas a legenda arredonda embaixo. Só barrinha (mais comum):
   ela é quem arredonda embaixo. Ambas: a legenda (que vem depois) arredonda. */
.foto-lightbox-conteudo:has(.foto-lightbox-legenda[hidden]):has(.foto-lightbox-engajamento:empty) img{ border-radius:12px; }
.foto-lightbox-conteudo:has(.foto-lightbox-legenda[hidden]) .foto-lightbox-engajamento:not(:empty){ border-radius:0 0 12px 12px; }
.foto-lightbox-close{
  position:absolute; top:20px; right:24px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3); background:rgba(0,0,0,0.5); color:#fff;
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
/* Centralizado com margin-top fixo (não transform:translateY) — o toque
   nesse botão dispara a animação de "pressionar" global (motionUI.js), que
   escreve transform inline no elemento durante ~450ms; se a centralização
   também dependesse de transform, esse inline sobrescrevia a translação e a
   seta "pulava" pra baixo até a animação terminar. */
.foto-lightbox-seta{
  position:absolute; top:50%; margin-top:-24px; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3); background:rgba(0,0,0,0.5); color:#fff;
  font-size:1.8rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.foto-lightbox-seta:hover{ background:rgba(0,0,0,0.75); }
.foto-lightbox-prev{ left:16px; }
.foto-lightbox-next{ right:16px; }
@media(max-width:600px){ .foto-lightbox-seta{ width:38px; height:38px; margin-top:-19px; font-size:1.4rem; } .foto-lightbox-prev{ left:6px; } .foto-lightbox-next{ right:6px; } }
.confirm-actions .btn{ flex:1; text-align:center; }
.auth-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft);
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.auth-close:hover{ color:var(--ink); border-color:var(--ink-soft); }
.legal-modal{ max-width:640px; }
.legal-content{ margin-top:14px; font-size:0.88rem; line-height:1.7; color:var(--ink-soft); }
.legal-content h4{ color:var(--ink); font-size:0.95rem; margin:20px 0 6px; }
.legal-content h4:first-child{ margin-top:0; }
.legal-content p{ margin-bottom:10px; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:16px; background:var(--bg-2); border-radius:10px; padding:4px; }
.auth-tabs button{
  flex:1; padding:9px; border:none; border-radius:8px; background:transparent; color:var(--ink-faint);
  font-family:'Inter',sans-serif; font-weight:600; font-size:0.86rem; cursor:pointer; transition:all .15s ease;
}
.auth-tabs button.active{ background:var(--card-hover); color:var(--ink); }
.auth-panel{ display:none; flex-direction:column; gap:10px; }
.auth-panel.active{ display:flex; }
/* O modal de denúncia usa as mesmas classes .auth-panel/.auth-overlay pra
   reaproveitar o visual, mas não deve depender da classe "active" — o
   listener global de auth.js alterna "active" em TODO .auth-panel da
   página (inclusive este) sempre que o modal de login/cadastro troca de
   painel, o que apagaria este por engano. */
#denunciaOverlay .auth-panel{ display:flex; }
.auth-panel h3{ font-size:1.2rem; margin-bottom:2px; }
.auth-panel label{ display:flex; flex-direction:column; gap:6px; font-size:0.82rem; color:var(--ink-soft); font-weight:500; }
.auth-panel input[type="email"],
.auth-panel input[type="password"],
.auth-panel input[type="text"],
.auth-panel input[type="date"],
.auth-panel select,
.auth-panel textarea{
  padding:11px 13px; border-radius:10px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.92rem; font-family:'Inter',sans-serif; resize:vertical;
}
.auth-panel input:focus, .auth-panel select:focus{ outline:2px solid var(--ember); outline-offset:1px; }
.auth-panel select option{ background-color:var(--card); color:var(--ink); }
/* Campo de senha com botão "mostrar/ocultar" (👁) sobreposto — usado em
   login e cadastro (senha + confirmação), pedido explícito. */
.campo-senha{ position:relative; display:flex; }
.campo-senha input{ flex:1; padding-right:42px !important; }
.senha-toggle-btn{
  position:absolute; right:2px; top:50%; margin-top:-17px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; font-size:1rem; line-height:1;
  color:var(--ink-faint); border-radius:8px;
}
.senha-toggle-btn:hover{ color:var(--ink); background:rgba(var(--overlay-tint),0.06); }
.auth-check{ flex-direction:row !important; align-items:flex-start; gap:9px !important; font-size:0.8rem !important; line-height:1.4; }
.auth-check input{ margin-top:3px; accent-color:var(--ember); }
.auth-check a{ color:var(--ember); text-decoration:underline; }
.auth-msg{ font-size:0.82rem; min-height:18px; }
.auth-msg.err{ color:#f27a6b; }
.auth-msg.ok{ color:var(--ok); }
.auth-switch{ margin-top:4px; font-size:0.82rem; color:var(--ink-faint); text-align:center; }
.auth-switch button{ background:none; border:none; color:var(--ember); cursor:pointer; font-weight:600; font-size:0.82rem; }
/* Botões "Entrar" e "Criar conta grátis" um pouco mais discretos que o
   .btn-primary padrão (usado também em CTAs grandes de marketing) — só
   dentro do modal de auth, mesmo tamanho nas duas abas pra ficar
   consistente entre elas (mesmo padrão de escopo já usado em .nav-user
   .btn). */
.auth-btn-compact{ padding:9px 18px; font-size:0.86rem; }
/* Links de Termos/Privacidade, fora da frase do checkbox de aceite,
   logo abaixo do botão de criar conta. */
.auth-legal-links{ margin-top:-2px; font-size:0.74rem; color:var(--ink-faint); text-align:center; }
.auth-legal-links a{ color:var(--ember); text-decoration:underline; }
/* Espaço entre os checkboxes de aceite e "Já tem conta?" reduzido — só no
   cadastro, sem mexer no .auth-msg/.auth-switch usados pelos outros
   formulários do mesmo modal (login, esqueci senha, nova senha), que
   continuam reservando espaço pra evitar pulo de layout ao mostrar erro. */
#formSignup .auth-msg{ min-height:0; }
#formSignup .auth-switch{ margin-top:0; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ===== PAINEL DO APP ===== */
/* padding-bottom folgado de propósito — a barra inferior fixa (.bottom-tabs,
   ~58px de altura) não faz parte do fluxo normal da página (position:fixed),
   então sem essa folga a última linha de cards de qualquer aba ficaria
   escondida atrás dela. */
.app-panel{ padding:36px 0 96px; min-height:70vh; }
/* Procurar: a barra de busca/filtro é uma faixa fina, não um card — o
   respiro padrão de 36px por cima dela sobrava visualmente. Reduzido só
   nessa aba (as outras continuam com o respiro padrão). */
.app-panel:has([data-app-view="descobrir"].active){ padding-top:14px; }
/* Início: mesma ideia — as sub-abas (Seguindo/Para você/Todos) são uma
   faixa fina no topo, igual à barra de busca/filtro do Procurar, então
   ganham o mesmo respiro reduzido em vez do padding padrão da página.
   Publicar (título/heading como 1º elemento) ganha o mesmo respiro. */
.app-panel:has([data-app-view="inicio"].active),
.app-panel:has([data-app-view="publicar"].active){ padding-top:14px; }
/* Notificações: cada item da lista já tem seu PRÓPRIO padding interno
   (14px, ver `.notificacao-item`) — com o respiro de 14px do painel EM
   CIMA disso, sobrava quase 28px de vão vazio até o texto de verdade
   aparecer, sem nada como as sub-abas do Início pra "ocupar" visualmente
   esse espaço (pedido explícito, notado mesmo depois da 1ª redução). Zero
   aqui deixa o próprio card prover o respiro. */
.app-panel:has([data-app-view="notificacoes"].active){ padding-top:0; }
/* Sugestões/Configurações/Meu perfil: o botão "Voltar" é o primeiro
   elemento da página — o respiro padrão de 36px por cima, mais o
   margin-top do próprio botão (herdado de .perfil-pub-voltar, pensado pra
   quando ele fica dentro do cabeçalho do perfil), deixavam um vão grande
   demais até o topo. */
.app-panel:has([data-app-view="sugestoes"].active),
.app-panel:has([data-app-view="configuracoes"].active),
.app-panel:has([data-app-view="perfil"].active),
.app-panel:has([data-app-view="assinatura-historico"].active),
.app-panel:has([data-app-view="assinatura-planos"].active),
.app-panel:has([data-app-view="assinatura-pix"].active),
.app-panel:has([data-app-view="admin-painel"].active),
.app-panel:has([data-app-view="admin-parametros"].active){ padding-top:14px; }
[data-app-view="sugestoes"] > .perfil-pub-voltar,
[data-app-view="configuracoes"] > .perfil-pub-voltar,
[data-app-view="perfil"] > .perfil-pub-voltar,
[data-app-view="assinatura-historico"] > .perfil-pub-voltar,
[data-app-view="assinatura-planos"] > .perfil-pub-voltar,
[data-app-view="assinatura-pix"] > .perfil-pub-voltar,
[data-app-view="admin-painel"] > .perfil-pub-voltar,
[data-app-view="admin-parametros"] > .perfil-pub-voltar{ margin-top:0; margin-bottom:12px; }
.app-shell{ max-width:920px; }
/* `.wrap` (classe global) já é `position:relative; z-index:1`, o que cria
   um contexto de empilhamento próprio — qualquer z-index alto DENTRO dele
   (ex: o painel de comentários flutuante, `.perfil-foto-item`) só compete
   com outras coisas dentro desse mesmo contexto, nunca com elementos FORA
   dele como a barra inferior fixa (`#bottomTabs`, z-index:55) — o "1"
   externo sempre perde pra 55, não importa o z-index interno. Só sobe o
   teto desse contexto SÓ enquanto existe um painel de comentários aberto
   dentro dele (`:has()`) — subir sempre faria TODO o conteúdo do app
   (cards, etc) passar a desenhar por cima da barra inferior o tempo
   todo, não só o painel que precisa disso (bug real visto ao testar:
   cards perto do fim da página bloqueavam clique nos botões da barra). */
.app-shell:has(.comentarios-inline:not([hidden])){ z-index:56; }
.app-tabs{
  display:flex; gap:6px; background:rgba(var(--overlay-tint),0.05); border:1px solid var(--line-strong);
  border-radius:12px; padding:5px; margin-bottom:28px; max-width:420px;
}
.app-tab{
  flex:1; padding:10px; border:1px solid transparent; border-radius:9px;
  background:rgba(var(--overlay-tint),0.04); white-space:nowrap;
  color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:600; font-size:0.86rem; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
/* Abas inativas ganharam um fundo bem sutil (acima) e borda no hover — sem
   isso ficavam só texto solto sobre fundo transparente, sem nenhum
   contorno/relevo de botão; em celular (sem :hover persistente ao toque)
   isso fazia elas parecerem "não clicáveis" mesmo sendo. :active dá o
   feedback visual do toque em si (:hover não aparece em touchscreen). */
.app-tab:hover{ color:var(--ink); border-color:var(--line); }
.app-tab:active{ background:rgba(var(--overlay-tint),0.09); }
.app-tab.active{ background:var(--card); color:var(--ink); box-shadow:0 0 0 1px rgba(232,106,58,0.25); }
.app-tab.active:hover{ border-color:transparent; }
.app-view{ display:none; }
.app-view.active{ display:block; }

.discover-loading, .discover-empty{ grid-column:1 / -1; text-align:center; color:var(--ink-faint); font-size:0.9rem; padding:60px 0; }

/* Barra de busca (por nome) + botão de filtros, no topo da aba Procurar. */
.descobrir-toolbar{ display:flex; gap:10px; margin-bottom:12px; }
.descobrir-busca{
  flex:1; display:flex; align-items:center; gap:6px; min-width:0;
  border:1px solid var(--line-strong); border-radius:10px; background:var(--bg-2); padding:0 4px 0 14px;
}
.descobrir-busca input{
  flex:1; min-width:0; border:none; background:none; color:var(--ink);
  font-family:'Inter',sans-serif; font-size:0.88rem; padding:10px 0;
}
.descobrir-busca input:focus{ outline:none; }
.descobrir-busca-btn{
  border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:1rem;
  width:38px; height:38px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.descobrir-busca-btn:hover{ color:var(--ink); background:rgba(var(--overlay-tint),0.06); }
.descobrir-filtro-btn{ flex-shrink:0; white-space:nowrap; }

/* Tela de filtros — abre dentro da própria aba Procurar, no lugar da
   grade de cards (sem modal). */
.descobrir-filtros{ max-width:480px; margin:0 auto; }
.descobrir-filtros-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.descobrir-filtros-voltar{
  border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:0.88rem;
  display:flex; align-items:center; gap:4px; padding:6px 4px;
}
.descobrir-filtros-voltar:hover{ color:var(--ink); }
.descobrir-filtros-head h3{ font-size:1.05rem; }
.filtro-campo{ display:block; margin-bottom:18px; font-size:0.82rem; color:var(--ink-soft); font-weight:600; }
.filtro-campo .interest-tags{ margin-top:8px; }
.filtro-campo input[type=number], .filtro-campo input[type=text], .filtro-campo select{
  display:block; width:100%; margin-top:8px; padding:10px 14px; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--bg-2); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:0.88rem;
}
.filtro-campo select option{ background-color:var(--card); color:var(--ink); }
.filtro-campo-check{ display:flex; align-items:center; gap:8px; }
.filtro-campo-check input{ accent-color:var(--ember); width:16px; height:16px; flex-shrink:0; }
.filtro-idade-faixa{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.filtro-idade-faixa input{ margin-top:0; text-align:center; }
.filtro-idade-ate{ color:var(--ink-faint); font-weight:400; flex-shrink:0; }
.filtro-distancia-linha{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.filtro-distancia-linha select{ margin-top:0; flex:1; min-width:0; }
.filtro-localizar-btn{ flex-shrink:0; white-space:nowrap; padding:10px 14px; font-size:0.8rem; }
.filtro-distancia-status{
  margin:8px 0 0; font-size:0.74rem; font-weight:400; line-height:1.4; color:var(--ink-faint);
}
.filtro-cidade-campo{ position:relative; }
.filtro-cidade-sugestoes{
  position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:5;
  background:var(--card); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.filtro-cidade-sugestao{
  display:block; width:100%; text-align:left; padding:10px 14px; border:none; background:none;
  color:var(--ink); font-family:'Inter',sans-serif; font-size:0.86rem; cursor:pointer;
}
.filtro-cidade-sugestao:hover{ background:rgba(var(--overlay-tint),0.06); }
.filtro-cidade-dica{ display:block; margin-top:6px; font-size:0.74rem; font-weight:400; color:var(--ink-faint); }
.descobrir-filtros-acoes{ display:flex; gap:10px; margin-top:8px; }
.descobrir-filtros-acoes .btn{ flex:1; }

/* DESCOBRIR — grade de vários cards pequenos em vez de um card por vez */
.discover-stage{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); gap:14px;
}
.discover-card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, opacity .2s ease;
}
.discover-card .photo-area{
  height:140px; display:flex; align-items:center; justify-content:center; position:relative;
  font-family:'Sora',sans-serif; font-weight:700; font-size:2.1rem; color:#fff;
}
.discover-card .photo-area img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.discover-card .report-btn{
  position:absolute; top:8px; left:8px; z-index:2; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3); background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.78rem;
}
.discover-stamp{
  position:absolute; top:14px; z-index:3; padding:4px 10px; border-radius:7px; border:2px solid;
  font-family:'Sora',sans-serif; font-weight:800; font-size:0.72rem; letter-spacing:0.05em;
  text-transform:uppercase; opacity:0; pointer-events:none;
}
.discover-stamp-like{ right:10px; color:var(--ok); border-color:var(--ok); transform:rotate(-10deg); }
.discover-stamp-nope{ left:10px; color:var(--ember); border-color:var(--ember); transform:rotate(10deg); }
/* Card já avaliado (curtido ou não) fica na grade, só marcado — não some
   mais de Procurar (só bloquear tira, feito na página de Perfil). */
.discover-card.curtido, .discover-card.nao-curtido{ opacity:0.82; }
.swipe-btn:disabled{ opacity:0.35; cursor:default; pointer-events:none; }
.discover-card .info{ padding:10px 12px 4px; }
.discover-card .info h4{ font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Selo "Vibe" (assinante ativo) — coroa ao lado do nome, em qualquer
   lugar que mostre nome de alguém (cards, cabeçalho do perfil, feed de
   Início). Tamanho relativo (em) pra acompanhar o tamanho da fonte de
   cada contexto (card menor, cabeçalho maior) sem precisar de uma regra
   por lugar. */
.selo-vibe{ display:inline-block; margin-left:4px; font-size:0.85em; line-height:1; vertical-align:1px; }
.selo-verificado{ display:inline-block; margin-left:4px; font-size:0.8em; line-height:1; vertical-align:1px; }

/* Selo "Conta oficial" (só a conta de sistema Vibe Encontros) — forma de
   escudo via clip-path (sem imagem/ícone externo), gradiente laranja/violeta
   da marca por trás, check branco no meio. Tamanho em `em` (não px fixo)
   pra acompanhar a fonte do contexto, igual os outros dois selos acima. */
.selo-oficial{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05em; height:1.2em; margin-left:4px; vertical-align:-2px;
  background:linear-gradient(135deg, var(--violet) 0%, var(--ember) 100%);
  clip-path:polygon(50% 0%, 100% 16%, 100% 62%, 50% 100%, 0% 62%, 0% 16%);
  box-shadow:0 0 5px rgba(232,106,58,0.55);
  flex:none;
}
.selo-oficial::before{
  content:'✓'; color:#fff; font-size:0.62em; font-weight:900; line-height:1;
}
.selos-perfil{ display:inline-flex; align-items:center; white-space:nowrap; flex:none; }
.discover-card .info span{ display:block; font-size:0.76rem; color:var(--ink-soft); line-height:1.35; }
.discover-card .info span.busca{
  margin-top:2px; font-size:0.72rem; color:var(--ink-faint);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.discover-card .info span.ultima-aparicao{ margin-top:2px; font-size:0.7rem; color:var(--ink-faint); }
.discover-card .card-actions{ display:flex; gap:8px; padding:8px 10px 10px; margin-top:auto; }
/* Variante clicável reaproveitada na aba Curtidas: o card inteiro (fora
   dos botões) abre a visualização do perfil. */
.discover-card.clickable{ cursor:pointer; }
.discover-card.clickable:hover{ border-color:var(--ember); }
.swipe-btn{
  border:1px solid var(--line-strong); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .15s ease;
}
.swipe-btn:hover{ transform:translateY(-2px); }
.swipe-btn.nope, .swipe-btn.descurtir{ color:var(--ember); }
.swipe-btn.like{ color:var(--ok); }
.swipe-btn.bloquear{ color:#f27a6b; }
.swipe-btn.mensagem{ color:var(--violet); }
/* Sem essa classe, ".swipe-btn" (um <button>) fica com o preto padrão do
   navegador pra texto de botão — <button> não herda `color` do body como
   qualquer outro elemento (mesma pegadinha já documentada com `.match-item`
   antes nesse projeto). Ficava praticamente invisível no fundo escuro do
   card. */
.swipe-btn.denunciar{ color:var(--ink-soft); }
.swipe-btn.denunciar:hover{ color:var(--ink); }
.discover-card .card-actions .swipe-btn{ flex:1; height:32px; border-radius:8px; font-size:1rem; }

.discover-card-anuncio{
  border:1.5px solid var(--ember); box-shadow:0 0 0 1px rgba(232,106,58,0.25);
  padding:12px; gap:8px;
}
.discover-card-anuncio .discover-anuncio-autor{ padding:0; }
.discover-card-anuncio .discover-anuncio-texto{ font-size:0.8rem; color:var(--ink-soft); line-height:1.35; margin:0; }
.discover-card-anuncio .discover-anuncio-btn{ width:100%; margin-top:auto; }
.match-toast{
  position:fixed; top:88px; left:50%; transform:translateX(-50%) translateY(-140%);
  background:var(--card); color:var(--ink); border:1px solid var(--line-strong);
  padding:12px 22px; border-radius:999px; font-size:0.88rem; font-weight:600;
  z-index:120; opacity:0; transition:all .35s ease; box-shadow:var(--shadow);
  /* `opacity:0` sozinho NÃO tira o elemento da mira de clique — mesmo
     nunca tendo aparecido ainda (ou já tendo sumido de novo), ele segue
     centralizado no alto da tela recebendo cliques que deviam passar pro
     que está embaixo (ex: abas do menu do topo, quando o texto do último
     match ainda deixou a largura grande). pointer-events:none aqui,
     :auto só junto de `.show`, fecha essa brecha. */
  pointer-events:none;
}
.match-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }

/* MATCHES + CHAT */
.matches-layout{ display:grid; grid-template-columns:260px 1fr; gap:20px; min-height:480px; }
.matches-list{ display:flex; flex-direction:column; gap:8px; }
.match-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); cursor:pointer; text-align:left;
  color:var(--ink); font-family:inherit;
}
.match-item.active{ border-color:var(--ember); background:var(--card-hover); }
.match-item .avatar-chip{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; color:#fff; font-size:0.85rem; }
.match-item .nome{ font-size:0.88rem; font-weight:600; }
.chat-panel{
  border:1px solid var(--line); border-radius:16px; background:var(--card); display:flex; flex-direction:column; min-height:480px;
}
.chat-empty{ margin:auto; color:var(--ink-faint); font-size:0.9rem; text-align:center; padding:20px; }
.chat-thread{ display:flex; flex-direction:column; height:100%; }
.chat-header{
  padding:14px 18px; border-bottom:1px solid var(--line); font-weight:600; font-size:0.95rem;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.chat-header .chat-report-btn{ padding:6px 12px; font-size:0.78rem; font-weight:600; }
.chat-messages{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; max-height:380px; }
.chat-bubble{ max-width:75%; padding:9px 13px; border-radius:14px; font-size:0.86rem; line-height:1.4; }
.chat-bubble.in{ background:var(--bg-2); border:1px solid var(--line); border-bottom-left-radius:4px; align-self:flex-start; }
.chat-bubble.out{ background:var(--ember-soft); border:1px solid rgba(232,106,58,0.25); border-bottom-right-radius:4px; align-self:flex-end; color:var(--ink); }
.chat-input-row{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--line); }
.chat-input-row input{
  flex:1; padding:11px 14px; border-radius:10px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.88rem; font-family:'Inter',sans-serif;
}
@media(max-width:760px){ .matches-layout{ grid-template-columns:1fr; } }

/* PERFIL (aba de exibição, contadores) */
.stats-row{ display:flex; gap:16px; max-width:820px; margin:0 auto; flex-wrap:wrap; }
.stat-tile{
  flex:1; min-width:140px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:22px 16px; background:var(--card); border:1px solid var(--line); border-radius:16px;
  cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
.stat-tile:hover{ border-color:var(--ember); transform:translateY(-2px); }
/* Contadores sem atalho de navegação (Visitas nunca teve; Curtidas/
   Seguindo/Deu Match perdem o atalho quando o perfil exibido não é o
   próprio) — sem cursor de link nem hover, pra não parecer clicável. */
.stat-tile-info{ cursor:default; }
.stat-tile-info:hover{ border-color:var(--line); transform:none; }
.stat-numero{ font-family:'Sora',sans-serif; font-weight:700; font-size:2rem; color:var(--ink); }
.stat-rotulo{ font-size:0.86rem; color:var(--ink-soft); }

/* Agora fica DENTRO do cabeçalho, abaixo dos contadores — não é mais uma
   barra solta acima do card. */
.perfil-pub-voltar{ padding:6px 14px; font-size:0.78rem; margin-top:14px; border:1.5px solid var(--ember); }
.perfil-pub-voltar:hover{ background:var(--ember-soft); border-color:var(--ember); }

/* Cabeçalho do perfil (próprio ou visitado) — mesmo leiaute nos dois casos:
   foto principal, nome+idade, cidade/UF, bio, interesses. Encostado bem
   perto do topo da página (pouco espaço acima), pra aproveitar melhor a
   tela — só nessa view específica, via :has(), sem mexer no respiro das
   outras abas do app. */
.app-panel:has([data-app-view="perfil-publico"].active){ padding-top:10px; }
.perfil-pub-header{
  position:relative;
  display:flex; gap:18px; max-width:820px; margin:0 auto 18px; padding:20px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
}
/* Botões "Sugestões" e "Configurações" — na mesma linha, dentro do fluxo
   normal do card (não mais flutuando por cima de nada), logo abaixo dos
   contadores e antes da bio — igual no navegador e no celular, pedido
   explícito pra nunca mais correr o risco de ficar em cima da foto. Só
   aparecem no PRÓPRIO perfil (controlado em perfilPublico.js, igual o
   botão de editar). */
.perfil-pub-header-acoes{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.perfil-pub-config-btn, .perfil-pub-sugestao-btn{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--line-strong); background:var(--bg-2); border-radius:10px;
  padding:7px 12px; cursor:pointer; color:var(--ink-soft); transition:border-color .15s ease, color .15s ease;
}
.perfil-pub-config-btn:hover, .perfil-pub-sugestao-btn:hover{ border-color:var(--ember); color:var(--ink); }
.perfil-pub-config-icone, .perfil-pub-sugestao-icone{ font-size:0.95rem; line-height:1; }
.perfil-pub-config-label, .perfil-pub-sugestao-label{ font-size:0.78rem; font-weight:600; white-space:nowrap; }
@media(max-width:600px){
  .perfil-pub-header-acoes{ justify-content:center; }
}
.perfil-pub-foto-wrap{ position:relative; flex-shrink:0; }
.perfil-pub-foto{
  position:relative; width:140px; height:140px; flex-shrink:0; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:2.4rem; color:#fff;
}
.perfil-pub-foto img{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
/* Curtir/comentar sobrepostos no rodapé da foto de capa — mesmo padrão de
   `.perfil-foto-item .engajamento` (grade da sub-aba "Fotos"), só que numa
   caixa um pouco menor pra caber nos 140px do cabeçalho. */
.perfil-pub-foto .engajamento{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:5px 6px;
  border-top:none; background:linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  gap:8px;
}
/* No PRÓPRIO perfil, o botão de editar (✎) fica sobreposto no canto
   inferior direito, por fora da foto (-6px) — sem esse respiro, ele tampa
   o botão de comentar da barrinha, que também mora bem nesse canto. */
.perfil-pub-foto-wrap:has(.perfil-pub-editar-btn:not([hidden])) .perfil-pub-foto .engajamento{ right:32px; }
.perfil-pub-foto .engajamento button{ color:#fff; font-size:0.68rem; gap:3px; }
.perfil-pub-foto .engaj-curtir.curtido{ color:#ff8a7a; }
.perfil-pub-foto .engaj-icone{ font-size:0.82rem; }
/* Ícone de editar, só no próprio perfil — sobreposto no canto inferior
   direito da foto (mesmo padrão comum de "editar avatar"), fora do
   elemento da foto em si (que tem o innerHTML reescrito a cada carregamento
   de perfil, então não dá pra colocar o botão DENTRO dele). Leva pra aba
   "Meu perfil" (irParaAba('perfil')), que saiu do menu do topo. */
.perfil-pub-editar-btn{
  position:absolute; bottom:-6px; right:-6px; width:34px; height:34px; border-radius:50%;
  background:var(--ember); color:#fff; border:2px solid var(--bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:1rem; box-shadow:var(--shadow); transition:transform .15s ease;
}
.perfil-pub-editar-btn:hover{ transform:scale(1.08); }
.perfil-pub-info{ min-width:0; width:100%; }
.perfil-pub-info h3{ font-size:1.3rem; margin-bottom:2px; }
/* Mesmo leiaute do bloco ".info" dos cards (gênero, cidade/UF, busca,
   última aparição — cada um em sua própria linha) — reaproveita
   montarInfoCard() com comNome:false, já que o nome aqui já vem à parte
   num <h3> maior. */
.perfil-pub-metadados{ margin-bottom:6px; }
.perfil-pub-metadados span{ display:block; font-size:0.86rem; color:var(--ink-soft); line-height:1.5; }
.perfil-pub-metadados span.busca{ font-size:0.82rem; color:var(--ink-faint); }
.perfil-pub-metadados span.ultima-aparicao{ font-size:0.8rem; color:var(--ink-faint); }
.interest-tag.static{ cursor:default; }
.perfil-pub-sem-dado{ font-size:0.82rem; color:var(--ink-faint); }
/* Contadores dentro do cabeçalho do perfil — mesma info da versão solta
   de antes, só que menor e sem centralizar (fica alinhado com o resto do
   bloco de texto). Vêm logo depois dos metadados (última linha é "última
   aparição"), com a bio embaixo deles. */
.stats-row-compacta{ max-width:none; margin:4px 0 10px; gap:6px; justify-content:flex-start; }
.stats-row-compacta .stat-tile{
  flex:0 1 auto; min-width:72px; padding:8px 10px; border-radius:10px; gap:2px;
}
.stats-row-compacta .stat-numero{ font-size:1.1rem; }
.stats-row-compacta .stat-rotulo{ font-size:0.68rem; }
/* Linha de ações (Denunciar/Descurtir-ou-Curtir/Bloquear), abaixo dos
   contadores — só aparece ao visitar alguém a partir das abas Curtidas ou
   Não Deu Match (ver `origem` em carregarPerfilPublico), nunca no próprio
   perfil nem ao chegar por Procurar/Seguidores. */
.perfil-pub-acoes{ display:flex; gap:8px; margin:4px 0 10px; }
/* Só ícone, sem texto — a descrição (Denunciar/Descurtir/Curtir/Bloquear)
   fica no `title` (tooltip nativo do navegador ao passar o mouse), não
   escrita ao lado do ícone. */
.perfil-pub-acoes .swipe-btn{
  width:38px; height:38px; border-radius:10px; font-size:1.05rem;
}
/* Bio truncada em até 4 linhas, com botão "Ler mais" pra expandir — só
   aparece quando o texto realmente estoura essas 4 linhas (checado via
   JS comparando scrollHeight/clientHeight depois de renderizar). */
.perfil-pub-bio{
  font-size:0.92rem; line-height:1.6; color:var(--ink-soft); margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.perfil-pub-bio.expandido{ -webkit-line-clamp:unset; overflow:visible; }
.btn-ler-mais{
  display:block; background:none; border:none; padding:0; margin-bottom:8px;
  color:var(--ember); font-size:0.82rem; font-weight:600; cursor:pointer;
}
.btn-ler-mais:hover{ text-decoration:underline; }
@media(max-width:600px){
  .perfil-pub-header{ flex-direction:column; align-items:center; text-align:center; padding:14px 10px; gap:10px; }
  .stats-row-compacta{ justify-content:center; }
  .perfil-pub-acoes{ justify-content:center; }
  /* Os 5 contadores (Visualizações/Seguindo/Seguidores/Deu Match/
     Bloqueados) precisam caber numa linha só, mesmo no celular — em vez de
     deixar cada tile no seu tamanho "natural", eles encolhem de forma
     flexível (flex:1, min-width:0) pra sempre dividir a largura disponível
     igualmente. Card com menos padding (16px 10px acima, era 24px) só
     nessa largura, pra sobrar mais espaço horizontal pros tiles. */
  .stats-row-compacta{ flex-wrap:nowrap; gap:3px; width:100%; }
  .stats-row-compacta .stat-tile{ flex:1 1 0; min-width:0; padding:6px 2px; }
  .stats-row-compacta .stat-numero{ font-size:0.9rem; }
  /* Pedido explícito: rótulo sempre numa linha só, nunca quebrado (ex:
     "Visualizações"/"Bloqueados" não podem virar 2 linhas) — precisa caber
     dentro do quadrado. `white-space:nowrap` + fonte pequena o bastante pra
     a palavra mais longa ("Visualizações") caber no tile mais estreito.
     Continua precisando de `max-width:100%` (mesma causa raiz de sempre:
     <span>, item de flex-column com align-items:center, sem isso cresce
     pro tamanho do texto inteiro e estoura o tile). */
  .stats-row-compacta .stat-rotulo{
    font-size:0.48rem; white-space:nowrap; line-height:1.15; max-width:100%; letter-spacing:-0.2px;
  }
}

/* Sub-abas Posts / Fotos, dentro da aba "Perfil". Classes próprias (não
   ".app-tab"/".app-tabs") de propósito — o listener global de clique em
   ".app-tab" (appPanel.js) lia essas abas como se fossem do menu do topo
   e desativava a aba "Perfil" inteira sem querer. */
.subtabs{
  display:flex; gap:6px; background:rgba(var(--overlay-tint),0.05); border:1px solid var(--line-strong);
  border-radius:12px; padding:5px; margin:0 auto 16px; max-width:320px;
}
.subtab-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  flex:1; padding:10px; border:1px solid transparent; border-radius:9px;
  background:rgba(var(--overlay-tint),0.04); white-space:nowrap;
  color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:600; font-size:0.86rem; line-height:1.2; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
/* Cor muda pro laranja da marca no hover (não só o "ink" mais claro de
   antes) — pedido explícito: sem isso, o mouse em cima não deixava claro
   que o botão era clicável, principalmente nas sub-abas de Início. Não
   aplica no botão já ativo (:not(.active)), senão o hover "apaga" o
   destaque de qual sub-aba está selecionada agora. */
.subtab-btn:not(.active):hover{ color:var(--ember); border-color:rgba(232,106,58,0.4); }
/* Sub-abas de Configurações têm rótulos mais longos ("Privacidade e
   visualizações") que não cabiam nos 320px pensados pra Posts/Fotos/
   Vídeos — mais largura e permite quebrar em 2 linhas de botões nas telas
   mais estreitas, em vez de cortar/estourar o texto. */
#configSubtabs{ max-width:560px; flex-wrap:wrap; }
#configSubtabs .subtab-btn{ flex:1 1 auto; min-width:120px; }
/* Sub-abas do Painel Admin (4 rótulos: Visão geral/Parâmetros/Denúncias/
   Usuários) — mesmo problema/mesma solução das de Configurações acima:
   nos 320px padrão, com `white-space:nowrap` no texto, os 4 rótulos não
   cabiam de jeito nenhum — o texto forçava os itens a estourar a largura
   do container, e o contorno (`.subtabs`, border+padding) ficava menor
   que a fileira de itens de verdade, sobrando os últimos pra fora dele. */
.admin-subtabs{ max-width:560px; flex-wrap:wrap; }
.admin-subtabs .subtab-btn{ flex:1 1 auto; min-width:120px; }
.subtab-btn:active{ background:rgba(var(--overlay-tint),0.09); }
.subtab-btn.active{ background:var(--card); color:var(--ink); box-shadow:0 0 0 1px rgba(232,106,58,0.25); }
.subtab-btn.active:hover{ border-color:transparent; }
.tema-toggle-linha{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--line-strong); border-radius:12px;
  padding:12px 16px; margin:0 auto 16px; max-width:560px;
}
.tema-toggle-label{ font-size:0.88rem; font-weight:600; color:var(--ink); }
.tema-toggle-switch{ position:relative; display:inline-flex; cursor:pointer; }
.tema-toggle-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.tema-toggle-track{
  display:block; width:44px; height:24px; border-radius:999px;
  background:var(--line-strong); transition:background .2s ease;
}
.tema-toggle-thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,0.3);
  transition:transform .2s ease;
}
.tema-toggle-switch input:checked + .tema-toggle-track{ background:var(--ember); }
.tema-toggle-switch input:checked + .tema-toggle-track .tema-toggle-thumb{ transform:translateX(20px); }
.tema-toggle-switch input:focus-visible + .tema-toggle-track{ outline:2px solid var(--ember); outline-offset:2px; }
/* Contador de Posts/Fotos/Vídeos, em cada sub-aba — mesmo visual do badge
   de não lidas (círculo pequeno, mesma cor), só que sempre visível (é uma
   contagem total, não um "tem coisa nova"). */
.subtab-badge{
  position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:#f27a6b; color:#fff; border:1.5px solid var(--bg);
  font-family:'Inter',sans-serif; font-size:0.62rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.perfil-pub-subview{ display:none; max-width:820px; margin:0 auto; }
.perfil-pub-subview.active{ display:block; }

.perfil-pub-subview .post-form{ max-width:none; margin-bottom:20px; }
/* Sub-páginas de Configurações — classe PRÓPRIA, não reaproveita
   .perfil-pub-subview: bug real encontrado — irParaSubaba() (perfilPublico.js)
   busca `.perfil-pub-subview` sem escopo (document.querySelectorAll direto),
   então reaproveitar a mesma classe fazia qualquer navegação de sub-aba do
   Perfil (Posts/Fotos/Vídeos) apagar o "active" das sub-páginas de
   Configurações também, por engano. */
.config-subview{ display:none; }
.config-subview.active{ display:block; }
/* Aba "Publicar" (barra inferior) — mesmo formulário de novo post, numa
   tela dedicada e centralizada, só com o bloco de digitar + foto. */
[data-app-view="publicar"]{ max-width:600px; margin:0 auto; }
[data-app-view="publicar"] .post-form{ max-width:none; }
[data-app-view="sugestoes"]{ max-width:600px; margin:0 auto; }
[data-app-view="sugestoes"] .post-form{ max-width:none; }
[data-app-view="configuracoes"]{ max-width:600px; margin:0 auto; }
.config-grupo{
  border:1px solid var(--line-strong); border-radius:12px; padding:14px 16px; margin-bottom:16px;
}
.config-grupo legend{
  padding:0 6px; font-size:0.86rem; font-weight:600; color:var(--ink);
}
.config-opcao{
  display:flex !important; flex-direction:row !important; align-items:center; gap:9px;
  font-size:0.88rem; color:var(--ink-soft); font-weight:500; padding:7px 0; cursor:pointer;
}
.config-opcao input{ accent-color:var(--ember); flex-shrink:0; }
.config-zona-perigo{
  margin-top:28px; padding:16px; border:1px solid rgba(242,122,107,0.35); border-radius:12px;
  background:rgba(242,122,107,0.06);
}
.config-zona-perigo h4{ color:#f27a6b; font-size:0.95rem; margin-bottom:6px; }
.config-zona-perigo > p{ font-size:0.84rem; color:var(--ink-soft); line-height:1.5; margin-bottom:12px; }
.config-btn-perigo{ border-color:#f27a6b; color:#f27a6b; }
.config-btn-perigo:hover{ background:rgba(242,122,107,0.12); }
button.config-btn-perigo.btn-primary{
  background:#f27a6b; border-color:#f27a6b; color:#fff;
}
.config-confirmar-exclusao{ margin-top:12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.config-confirmar-exclusao p{ font-size:0.84rem; color:#f27a6b; font-weight:600; }
/* Sub-página "Assinatura" (dentro de Configurações) e a página de
   "Histórico" que ela abre — mesmo cartão simples de linha rótulo+valor. */
.assinatura-info{
  border:1px solid var(--line-strong); border-radius:12px; padding:4px 16px; margin-bottom:16px;
}
.assinatura-linha{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.assinatura-linha:last-child{ border-bottom:none; }
.assinatura-rotulo{ font-size:0.84rem; color:var(--ink-soft); }
.assinatura-linha > span:last-child{ font-size:0.9rem; font-weight:600; color:var(--ink); text-align:right; }
[data-app-view="assinatura-historico"]{ max-width:600px; margin:0 auto; }
.assinatura-historico-lista{ display:flex; flex-direction:column; gap:10px; }
.assinatura-historico-item{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.assinatura-historico-item .plano{ font-weight:600; color:var(--ink); font-size:0.9rem; }
.assinatura-historico-item .detalhes{ font-size:0.78rem; color:var(--ink-faint); margin-top:2px; }
.assinatura-historico-item .valor{ font-weight:700; color:var(--ink); font-size:0.95rem; white-space:nowrap; }
.assinatura-historico-item .valor.falha{ color:#f27a6b; }

/* Botão "Assinar Vibe" — abaixo do nome, na aba Perfil, só quando ainda
   não existe assinatura (perfilPublico.js decide o hidden). Ember
   sólido pra destacar de verdade, já que é um convite de conversão. */
.assinar-vibe-btn{
  display:inline-flex; align-items:center; gap:6px; margin:6px 0 10px;
  padding:8px 14px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg, var(--ember), #d5502a); color:#fff;
  font-family:'Inter',sans-serif; font-weight:700; font-size:0.82rem;
  box-shadow:0 6px 16px -6px rgba(232,106,58,0.6); transition:transform .15s ease;
}
.assinar-vibe-btn:hover{ transform:translateY(-1px); }

/* Página "Assinar Vibe" — motivos + grade de planos. Elementos reduzidos
   ~15% (texto dos motivos, cards de plano, espaçamentos) pra ficar mais
   compacta — mesmo pedido aplicado também na tela de PIX logo abaixo. */
[data-app-view="assinatura-planos"]{ max-width:760px; margin:0 auto; }
[data-app-view="assinatura-planos"] .publicar-titulo{ margin-bottom:15px; }
.assinatura-motivos{ margin-bottom:20px; display:flex; flex-direction:column; gap:7px; }
.assinatura-motivo{ font-size:0.75rem; color:var(--ink-soft); line-height:1.45; }
/* Tela sem barra de rolagem (`body.abas-escondidas`, ver acima) — em telas
   largas (desktop), 11 motivos empilhados numa coluna só passavam da altura
   da janela e cortavam o botão "Voltar" no topo. 2 colunas corta a altura
   da lista praticamente pela metade sem diminuir a fonte nem esconder
   nenhum item (pedido explícito: caber tudo sem rolar). */
@media(min-width:680px){
  .assinatura-motivos{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
}
.assinatura-planos-grade{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.assinatura-plano-card{
  position:relative; background:var(--card); border:1px solid var(--line-strong); border-radius:16px;
  padding:20px 17px; text-align:center; display:flex; flex-direction:column; gap:5px;
  transition:border-color .15s ease, transform .15s ease;
}
.assinatura-plano-card:hover{ border-color:var(--ember); transform:translateY(-2px); }
.assinatura-plano-card.recomendado{ border-color:var(--ember); box-shadow:0 0 0 1px rgba(232,106,58,0.35); }
.assinatura-plano-selo{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--ember); color:#fff; font-size:0.56rem; font-weight:700;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.assinatura-plano-nome{ font-size:0.73rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; }
.assinatura-plano-preco{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.45rem; color:var(--ink); margin:3px 0; }
.assinatura-plano-preco span{ font-size:0.72rem; font-weight:500; color:var(--ink-faint); }
.assinatura-plano-nota{ font-size:0.63rem; color:var(--ink-faint); margin-bottom:8px; }
.assinatura-plano-btn{ margin-top:auto; padding:9px 18px; font-size:0.8rem; }

/* Página "Pagar com PIX" — QR fictício (canvas desenhado em JS) + copia e
   cola. Dimensionado pra caber numa tela só, sem rolagem (ver também
   `body.abas-escondidas` acima): QR menor (128px, era 220 originalmente —
   reduzido ~15% em cima do ajuste anterior, mesmo pedido de redução
   aplicado também na tela de Planos acima), paddings/margens enxutos e o
   bloco de plano/valor compacto — tudo escopado só a essa view, sem
   afetar `.assinatura-info` da Configurações>Assinatura nem o
   `.publicar-titulo` das outras telas. */
[data-app-view="assinatura-pix"]{ max-width:420px; margin:0 auto; }
[data-app-view="assinatura-pix"] .publicar-titulo{ margin-bottom:8px; }
[data-app-view="assinatura-pix"] .assinatura-info{ margin-bottom:9px; padding:2px 11px; }
[data-app-view="assinatura-pix"] .assinatura-linha{ padding:6px 0; }
.assinatura-pix-qr-wrap{
  display:flex; justify-content:center; padding:6px; background:#fff; border-radius:14px; margin-bottom:7px;
}
.assinatura-pix-qr-wrap canvas{ display:block; border-radius:6px; }
.assinatura-pix-extrato{ font-size:0.62rem; color:var(--ink-faint); text-align:center; margin:0 0 9px; }
.assinatura-pix-copiacola{ display:flex; gap:8px; margin-top:5px; }
.assinatura-pix-copiacola input{
  flex:1; min-width:0; padding:9px 11px; border-radius:10px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.8rem; font-family:'JetBrains Mono',monospace;
}
.assinatura-pix-aguardando{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px;
  font-size:0.8rem; color:var(--ink-soft);
}
.assinatura-pix-spinner{
  width:13px; height:13px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--line-strong); border-top-color:var(--ember);
  animation:girar-spinner .6s linear infinite;
}
.publicar-titulo{ margin-bottom:18px; }
.post-form textarea{ min-height:70px; }

/* Retorno do checkout — tela de "parabéns" logo depois de um pagamento
   confirmado (ver `[data-app-view="checkout-sucesso"]`). Centralizada,
   sem os cards/grade das outras telas de assinatura — é uma tela de
   celebração, não de escolha. */
[data-app-view="checkout-sucesso"]{ max-width:460px; margin:0 auto; }
.checkout-sucesso{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:12px; }
.checkout-sucesso-icone{
  font-size:2.6rem; line-height:1; margin-bottom:10px;
  filter:drop-shadow(0 6px 16px rgba(232,106,58,0.45));
}
.checkout-sucesso-titulo{ font-family:'Sora',sans-serif; font-size:1.25rem; margin-bottom:6px; }
.checkout-sucesso-sub{ font-size:0.86rem; color:var(--ink-soft); margin-bottom:18px; }
.checkout-sucesso-beneficios{
  list-style:none; margin:0 0 24px; padding:0; width:100%;
  display:flex; flex-direction:column; gap:9px;
}
.checkout-sucesso-beneficios li{
  text-align:left; font-size:0.82rem; color:var(--ink-soft); line-height:1.45;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 14px;
}
.checkout-sucesso-continuar{ width:100%; }
.post-form-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.post-form-midia{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.post-form-midia-opcao{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line-strong); font-size:0.78rem; color:var(--ink-soft); cursor:pointer;
  background:none; font-family:'Inter',sans-serif;
}
.post-form-midia-opcao:has(input:not([value=""])){ border-color:var(--ember); color:var(--ink); }
button.post-form-midia-opcao{ border-color:var(--ember); color:var(--ink); }
.post-form-midia-opcao input{ display:none; }
.post-form-midia-opcao-emoji{ display:inline-flex; align-items:center; }
/* No celular, os mesmos botões de mídia do Publicar (foto/vídeo/câmera/
   áudio/localização) viram círculos coloridos só com o emoji — igual aos
   ícones do campo de Mensagens — em vez do "chip" com texto usado no
   desktop, que fica apertado numa tela estreita (pedido explícito). */
@media(max-width:600px){
  .post-form-midia-opcao{
    width:44px; height:44px; padding:0; border-radius:50%; border:none;
    justify-content:center; background:var(--cyan); color:#fff;
    box-shadow:0 0 0 4px var(--cyan-soft);
  }
  .post-form-midia-opcao-emoji{ font-size:1.15rem; line-height:1; }
  .post-form-midia-opcao-label{ display:none; }
  .post-form-midia-opcao-video{ background:var(--ember); box-shadow:0 0 0 4px var(--ember-soft); }
  .post-form-midia-opcao-camera{ background:var(--info); box-shadow:0 0 0 4px var(--info-soft); }
  .post-form-midia-opcao-audio{ background:var(--amber); box-shadow:0 0 0 4px var(--amber-soft); }
  .post-form-midia-opcao-local{ background:var(--violet); box-shadow:0 0 0 4px var(--violet-soft); }
}
/* Nome do arquivo anexado (vídeo) ou miniaturas de pré-visualização (até
   10 fotos, cada uma com botão de remover) — pedido explícito, some de
   novo ao trocar/remover o anexo ou depois de publicar. */
.post-form-midia-preview{
  display:flex; align-items:center; gap:10px; margin:-2px 0 8px; padding:8px 10px;
  border:1px solid var(--line); border-radius:10px; background:rgba(var(--overlay-tint),0.04);
  flex-wrap:wrap;
}
.post-form-midia-preview-nome{
  font-size:0.8rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.post-form-midia-opcao-dica{ font-size:0.68rem; opacity:0.65; font-weight:400; }
.post-form-fotos-preview{ display:flex; flex-wrap:wrap; gap:8px; }
.post-form-foto-chip{ position:relative; width:52px; height:52px; flex-shrink:0; }
.post-form-foto-chip img{ width:100%; height:100%; border-radius:8px; object-fit:cover; display:block; }
.post-form-foto-chip-remover{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  border:none; background:var(--ink); color:#fff; font-size:0.7rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.post-video{ margin-top:10px; border-radius:10px; overflow:hidden; max-height:420px; background:#000; }
.post-video video{ width:100%; max-height:420px; display:block; }
.post-audio{ margin-top:10px; display:flex; align-items:center; gap:10px; }
.post-audio audio{ flex:1; min-width:0; height:36px; }
.post-audio-duracao{ font-size:0.78rem; color:var(--ink-faint); flex-shrink:0; }
.post-form-row input[type="file"]{ max-width:100%; min-width:0; flex:1 1 auto; }
.posts-list{ display:flex; flex-direction:column; gap:10px; }
.post-item{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
}
.post-texto{ font-size:0.92rem; line-height:1.5; color:var(--ink); white-space:pre-wrap; }
.post-foto{ position:relative; margin-top:10px; border-radius:10px; overflow:hidden; max-height:360px; }
.post-foto img{ width:100%; max-height:360px; object-fit:cover; display:block; cursor:pointer; }
.post-foto-contador{
  position:absolute; top:8px; right:8px; padding:2px 8px; border-radius:999px;
  background:rgba(0,0,0,0.6); color:#fff; font-size:0.7rem; font-weight:600; pointer-events:none;
}
/* Post com mais de 1 foto: arrasta pro lado pra passar entre elas sem abrir
   o lightbox (pedido explícito) — scroll nativo com snap em vez de um botão
   pequeno de seta, ruim de acertar no toque do celular. */
.post-foto-scroller{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.post-foto-scroller::-webkit-scrollbar{ display:none; }
.post-foto-scroller img{ flex:0 0 100%; scroll-snap-align:start; }
.post-rodape{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.post-cta-planos{ width:100%; margin-top:10px; }
.post-data{ font-size:0.76rem; color:var(--ink-faint); }
.post-remover{ background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:0.9rem; }
.post-remover:hover{ color:#f27a6b; }

/* Feed da aba "Início" (Seguindo/Para você/Todos) — mesmo cartão de post
   de sempre, só que com o autor identificado no topo (o post do próprio
   perfil não precisa disso, já está óbvio de quem é). */
.inicio-subtabs{ max-width:420px; }
.feed-post-autor{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; border:none; background:none;
  padding:0; cursor:pointer; text-align:left;
}
.feed-post-avatar{
  width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg, var(--ember), var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:0.85rem; color:#fff;
}
.feed-post-avatar img{ width:100%; height:100%; object-fit:cover; }
.feed-post-autor-info{ display:flex; flex-direction:column; min-width:0; }
.feed-post-autor-nome{ font-size:0.9rem; font-weight:600; color:var(--ink); }
.feed-post-autor:hover .feed-post-autor-nome{ color:var(--ember); }
/* Mesmas informações de perfil dos cards de Procurar/Curtidas/Não Deu
   Match (gênero, cidade/UF, busca, última aparição) — reaproveita
   montarInfoCard() com comNome:false, mesmo padrão já usado em
   .perfil-pub-metadados. Bem mais compacto aqui: é só um detalhe no
   cabeçalho do post, não o foco do card. */
.feed-post-autor-detalhes span{ display:block; font-size:0.72rem; color:var(--ink-faint); line-height:1.3; }
.feed-post-autor-detalhes span.busca{ font-size:0.7rem; }
.feed-post-autor-detalhes span.ultima-aparicao{ font-size:0.68rem; }

.feed-post-patrocinado{
  border:1.5px solid var(--ember); box-shadow:0 0 0 1px rgba(232,106,58,0.25);
}
.feed-post-avatar-anuncio{ font-size:1.15rem; background:linear-gradient(135deg, var(--ember), #d5502a); }
.feed-post-patrocinado-selo{
  display:inline-block; margin-top:2px; font-size:0.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--ember); border:1px solid var(--ember); border-radius:999px; padding:1px 7px; width:fit-content;
}
.feed-post-anuncio-lista{ list-style:none; margin:10px 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.feed-post-anuncio-lista li{ font-size:0.78rem; color:var(--ink-soft); line-height:1.4; }
.feed-post-anuncio-btn{ width:100%; margin-top:8px; }

/* Curtir/comentar (com contagem) — usado tanto embaixo de cada post quanto
   sobreposto em cada foto da grade (ver .perfil-foto-item .engajamento
   logo abaixo, que é a mesma estrutura só posicionada diferente). */
.engajamento{ display:flex; gap:14px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.engajamento button{
  display:flex; align-items:center; gap:5px; background:none; border:none;
  color:var(--ink-soft); font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600; cursor:pointer;
}
.engajamento button:hover{ color:var(--ink); }
.engaj-curtir.curtido{ color:#f27a6b; }
.engaj-icone{ font-size:0.95rem; line-height:1; }

.perfil-fotos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.perfil-foto-item{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1; }
.perfil-foto-item img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
/* Sub-aba "Vídeos": mesma grade quadriculada de "Fotos" (.perfil-fotos-grid/
   .perfil-foto-item, reaproveitadas), só que cada célula tem um <video>
   com controles nativos em vez de <img>. */
.perfil-foto-item video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
/* Sobreposto no rodapé da foto (fundo escuro translúcido pra ficar legível
   em cima de qualquer imagem) — diferente do .engajamento normal dos posts,
   que fica numa linha comum embaixo do texto. */
.perfil-foto-item .engajamento{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:6px 8px;
  border-top:none; background:linear-gradient(to top, rgba(0,0,0,0.65), transparent);
}
.perfil-foto-item .engajamento button{ color:#fff; font-size:0.76rem; }
.perfil-foto-item .engaj-curtir.curtido{ color:#ff8a7a; }

/* Comentários inline — bloco de texto que abre ABAIXO da foto/post ao
   clicar em "Comentar" (sem modal). Em posts e na foto aberta grande do
   lightbox, que têm espaço de sobra, é só um bloco normal empurrando o
   resto do conteúdo pra baixo. */
.comentarios-inline{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.comentarios-inline-lista{ max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.comentarios-inline-form{ display:flex; gap:8px; }
.comentarios-inline-texto{
  flex:1; min-width:0; padding:8px 12px; border-radius:20px; border:1px solid var(--line-strong);
  background:var(--bg-2); color:var(--ink); font-family:'Inter',sans-serif; font-size:0.85rem;
}
.comentarios-inline-enviar{
  width:36px; height:36px; border-radius:50%; border:none; background:var(--ember); color:#fff;
  cursor:pointer; font-size:1rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.comentarios-inline-enviar:hover{ filter:brightness(1.08); }

/* Nos itens pequenos/quadrados (grade da sub-aba "Fotos", foto de capa do
   cabeçalho), o painel flutua ABAIXO da caixa em vez de espremer dentro
   dela — a caixa continua do mesmo tamanho quadrado de sempre, só solta o
   overflow:hidden enquanto o painel está aberto (senão ele fica cortado,
   já que sai fisicamente de dentro da caixa). */
.perfil-foto-item:has(.comentarios-inline:not([hidden])),
.perfil-pub-foto:has(.comentarios-inline:not([hidden])){
  overflow:visible; z-index:56;
}
.perfil-foto-item .comentarios-inline,
.perfil-pub-foto .comentarios-inline{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px;
  width:260px; max-width:80vw; background:var(--card); border:1px solid var(--line-strong);
  border-radius:12px; padding:10px; box-shadow:var(--shadow); z-index:56;
}

.comentario-item{ padding-bottom:10px; border-bottom:1px solid var(--line); }
.comentario-item:last-child{ border-bottom:none; padding-bottom:0; }
.comentario-cabecalho{ display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; }
.comentario-autor{ font-size:0.84rem; font-weight:600; color:var(--ink); background:none; border:none; padding:0; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.comentario-autor:hover{ text-decoration:underline; }
.comentario-data{ font-size:0.72rem; color:var(--ink-faint); }
.comentario-texto{ font-size:0.88rem; line-height:1.5; color:var(--ink-soft); }
.comentario-curtir{
  display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:2px 6px; border-radius:8px;
  border:none; background:none; color:var(--ink-faint); font-family:'Inter',sans-serif; font-size:0.76rem; cursor:pointer;
}
.comentario-curtir:hover{ background:rgba(var(--overlay-tint),0.05); }
.comentario-curtir.curtido{ color:#ff8a7a; }
.comentario-curtir-icone{ font-size:0.82rem; line-height:1; }

/* PERFIL / FOTOS */
/* Duas colunas lado a lado (fotos | sobre mim + senha) pra reduzir o
   comprimento da página e ficar centralizado no app-shell, em vez de tudo
   empilhado e o conteúdo (mais estreito que o container) sobrando pra um
   lado só. Empilha de novo (uma coluna) só quando a tela é estreita. */
.profile-edit{ display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:820px; margin:0 auto; align-items:start; }
/* "Meu perfil" (fotos/interesses) ficou só com 1 coluna depois que "Sobre
   mim"/"Alterar senha" mudaram pra dentro de Configurações — sem isso, o
   grid de 2 colunas deixava a única coluna restante espremida na metade
   esquerda, com um vão vazio do lado. */
.profile-edit:has(.profile-col:only-child){ grid-template-columns:1fr; max-width:480px; }
.profile-col .profile-form{ max-width:none; }
/* Item de grid não encolhe abaixo do próprio conteúdo por padrão
   (min-width:auto implícito) — sem isso, no celular a coluna ficava mais
   larga que a tela (~420px numa viewport de 375px) e estourava a página
   inteira, mesmo com .profile-edit já colapsado pra 1 coluna. */
.profile-col{ min-width:0; }
@media(max-width:760px){ .profile-edit{ grid-template-columns:1fr; gap:32px; } }
.profile-edit h3{ font-size:1.1rem; margin-bottom:14px; }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:12px; max-width:420px; margin-bottom:16px; }
.photo-slot{
  aspect-ratio:1; border-radius:14px; overflow:hidden; position:relative; border:1px solid var(--line);
  background:var(--bg-2); display:flex; align-items:center; justify-content:center;
}
.photo-slot img{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
.photo-slot .remove-photo{
  position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:0.75rem; cursor:pointer;
}
.photo-upload-btn{ cursor:pointer; display:inline-flex; }
.foto-perfil-slot{
  width:140px; aspect-ratio:1; border-radius:14px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--bg-2); display:flex; align-items:center;
  justify-content:center; margin-bottom:12px; color:var(--ink-faint); font-size:0.78rem; text-align:center;
}
.foto-perfil-slot img{ width:100%; height:100%; object-fit:cover; }
.foto-perfil-slot .remove-photo{
  position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:0.75rem; cursor:pointer;
}
.interest-tags{ display:flex; flex-wrap:wrap; gap:8px; max-width:520px; margin-bottom:8px; }
.interest-tag{
  padding:8px 15px; border-radius:999px; border:1px solid var(--line-strong); background:var(--card);
  color:var(--ink-soft); font-size:0.82rem; font-family:'Inter',sans-serif; cursor:pointer; transition:all .15s ease;
}
.interest-tag:hover{ border-color:var(--ink-soft); }
.interest-tag.selected{ background:var(--ember-soft); border-color:var(--ember); color:var(--ink); }
.interest-tag:disabled{ opacity:0.6; cursor:default; }
.profile-form{ display:flex; flex-direction:column; gap:14px; max-width:420px; }
.profile-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.82rem; color:var(--ink-soft); font-weight:500; }
.profile-form input, .profile-form textarea, .profile-form select{
  padding:11px 13px; border-radius:10px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.92rem; font-family:'Inter',sans-serif; resize:vertical;
}
.profile-form select option{ background-color:var(--card); color:var(--ink); }

/* NOTIFICAÇÕES */
.notificacoes-lista{ display:flex; flex-direction:column; gap:2px; max-width:640px; margin:0 auto; }
.notificacao-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 16px; border-radius:12px; border:1px solid transparent; background:none;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.notificacao-item:hover{ background:rgba(var(--overlay-tint),0.04); border-color:var(--line); }
.notificacao-item.nao-lida{ background:var(--ember-soft); }
.notificacao-item.nao-lida:hover{ border-color:var(--ember); }
.notificacao-icone{ font-size:1.2rem; flex-shrink:0; }
.notificacao-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.notificacao-mensagem{ font-size:0.88rem; color:var(--ink); line-height:1.4; }
.notificacao-mensagem b{ font-weight:700; }
.notificacao-data{ font-size:0.74rem; color:var(--ink-faint); }

/* MENSAGENS — layout estilo WhatsApp: lista de conversas + conversa ativa
   lado a lado (desktop) ou uma tela por vez com botão de voltar (celular). */
.mensagens-shell{
  display:grid; grid-template-columns:280px 1fr; gap:0; max-width:960px; margin:0 auto;
  height:min(640px, 75vh); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--card);
}
.conversas-lista{ border-right:1px solid var(--line); overflow-y:auto; padding:8px; }
/* `.conversa-item` (abre a conversa) e o botão de excluir da linha são
   IRMÃOS dentro desse wrapper — nunca um <button> dentro do outro. */
.conversa-item-linha{ display:flex; align-items:center; gap:2px; }
.conversa-item{
  display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding:10px; border-radius:10px;
  border:none; background:none; cursor:pointer; text-align:left; transition:background .15s ease;
}
.conversa-item:hover{ background:rgba(var(--overlay-tint),0.04); }
.conversa-item.active{ background:var(--ember-soft); }
.conversa-item-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg, var(--ember), var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:0.9rem; color:#fff;
}
.conversa-item-avatar img{ width:100%; height:100%; object-fit:cover; }
.conversa-item-nome{ flex:1; min-width:0; font-size:0.88rem; color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Contador de mensagens pendentes ao lado do nome, na lista de conversas —
   zera (some) assim que a conversa é aberta. */
.conversa-item-contador{
  flex-shrink:0; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--ember); color:#fff; font-family:'Inter',sans-serif; font-size:0.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
/* Excluir direto da linha da lista (não só de dentro da conversa aberta) —
   mesmo visual (borda+fundo visíveis por padrão, não só no hover) do botão
   de excluir de dentro da conversa, só um pouco menor pra caber na linha. */
.conversa-item-excluir{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; margin-right:4px;
  border:1px solid var(--line-strong); background:var(--bg-2); color:var(--ink-soft);
  cursor:pointer; font-size:0.86rem; display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.conversa-item-excluir:hover{ color:#fff; background:#f27a6b; border-color:#f27a6b; transform:translateY(-1px); }
.conversa-painel{ display:flex; flex-direction:column; min-width:0; height:100%; min-height:0; }
.conversa-vazia{ margin:auto; color:var(--ink-faint); font-size:0.88rem; padding:0 20px; text-align:center; }
.conversa-ativa{ display:flex; flex-direction:column; height:100%; min-height:0; }
.conversa-header{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.conversa-voltar{ display:none; border:none; background:none; color:var(--ink-soft); font-size:1.2rem; cursor:pointer; padding:4px; }
.conversa-avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0; cursor:pointer;
  background:linear-gradient(135deg, var(--ember), var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:0.85rem; color:#fff;
}
.conversa-avatar img{ width:100%; height:100%; object-fit:cover; }
.conversa-nome{ font-size:0.94rem; font-weight:600; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.conversa-nome:hover, .conversa-avatar:hover{ opacity:0.85; }
.conversa-excluir{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--bg-2); color:var(--ink-soft);
  cursor:pointer; font-size:0.92rem; display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.conversa-excluir:hover{ color:#fff; background:#f27a6b; border-color:#f27a6b; transform:translateY(-1px); }
.conversa-mensagens{ flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.msg-bolha{
  max-width:75%; padding:9px 13px; border-radius:14px; font-size:0.88rem; line-height:1.4;
  display:flex; flex-direction:column; gap:2px;
}
.msg-bolha .msg-texto{ color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.msg-bolha .msg-cta-planos{ align-self:flex-start; margin-top:4px; padding:7px 14px; font-size:0.82rem; }
.msg-bolha .msg-hora{ font-size:0.66rem; color:var(--ink-faint); align-self:flex-end; }
/* Confirmação de leitura (✓ enviada / ✓✓ lida pela outra pessoa), só nas
   minhas próprias mensagens — mesma ideia do "check azul" do WhatsApp. */
.msg-status{ margin-left:3px; color:var(--ink-faint); }
.msg-status.lida{ color:var(--ok); }
.msg-bolha.outro{ align-self:flex-start; background:rgba(var(--overlay-tint),0.06); border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg-bolha.minha{ align-self:flex-end; background:var(--ember-soft); border:1px solid var(--ember); border-bottom-right-radius:4px; }
/* Bolha da mensagem de vendas Vibe (intro + botão + lista de benefícios,
   ver mensagens.js) — ocupa a linha TODA em vez do teto de 75% das bolhas
   de texto comum, senão a lista de benefícios fica espremida/quebrando
   estranho dentro de um espaço pensado pra frases curtas. */
.msg-bolha.msg-bolha-anuncio{ max-width:100%; width:100%; }
.msg-bolha.msg-bolha-anuncio .msg-cta-planos{ align-self:stretch; width:100%; text-align:center; }
.conversa-form{ display:flex; flex-direction:column; gap:8px; padding:12px 16px; border-top:1px solid var(--line); flex-shrink:0; }
.conversa-form-linha-texto{ display:flex; gap:8px; }
.conversa-form-linha-midia{ display:flex; gap:8px; }
.conversa-form input{
  flex:1; min-width:0; padding:10px 14px; border-radius:20px; border:1px solid var(--line-strong);
  background:var(--bg-2); color:var(--ink); font-family:'Inter',sans-serif; font-size:0.88rem;
}
.conversa-enviar{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--ember); color:#fff;
  cursor:pointer; font-size:1.05rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.conversa-enviar:hover{ filter:brightness(1.08); }
/* Botão de microfone: círculo cheio e sempre visível ao lado do botão de
   enviar (não some/reaparece com o texto — pedido explícito do usuário,
   os dois ficam lado a lado o tempo todo). Cor própria (âmbar) pra ficar
   claramente diferente do botão de enviar (ember) quando os dois estão
   visíveis juntos, com um leve glow — destaque de verdade, não um ícone
   secundário apagado. */
.conversa-audio-btn{
  width:44px; height:44px; border-radius:50%; border:none; background:var(--amber); color:#fff;
  cursor:pointer; font-size:1.25rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow:0 0 0 4px var(--amber-soft);
}
.conversa-audio-btn:hover{ filter:brightness(1.1); transform:scale(1.06); }
.conversa-audio-btn:active{ transform:scale(0.94); }

/* Botão de anexar foto: mesma linguagem visual do de áudio (círculo cheio,
   sempre visível, com glow) mas em cor própria (--cyan) pra distinguir dos
   outros quando aparecem lado a lado. Câmera, vídeo e localização (abaixo)
   usam a MESMA base, só trocando a cor — antes os 4 eram todos verdes e
   ficavam difíceis de diferenciar rápido (pedido explícito). */
.conversa-foto-btn{
  width:44px; height:44px; border-radius:50%; border:none; background:var(--cyan); color:#fff;
  cursor:pointer; font-size:1.15rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease, filter .15s ease;
  box-shadow:0 0 0 4px var(--cyan-soft);
}
.conversa-foto-btn:hover{ filter:brightness(1.1); transform:scale(1.06); }
.conversa-foto-btn:active{ transform:scale(0.94); }
#conversaCameraBtn{ background:var(--info); box-shadow:0 0 0 4px var(--info-soft); }
#conversaVideoBtn{ background:var(--ember); box-shadow:0 0 0 4px var(--ember-soft); }
#conversaLocalizacaoBtn{ background:var(--violet); box-shadow:0 0 0 4px var(--violet-soft); }

/* Linhas que substituem o campo de texto (`.conversa-form`, escondido via
   [hidden] enquanto qualquer uma destas está ativa) durante a gravação e
   no preview antes de enviar — mesmo padding/border-top do form original,
   pra não pular o layout ao trocar de uma pra outra. */
.conversa-audio-gravando, .conversa-audio-preview{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); flex-shrink:0;
}
/* Mesmo bloco de "gravando áudio" reaproveitado dentro do formulário de post
   (Perfil/Publicar) — aqui não está dentro do shell de conversa, então
   ganha borda/cantos próprios em vez do border-top "encostado". */
.post-form-audio-gravando{ border:1px solid var(--line); border-radius:12px; }
.conversa-audio-ponto{
  width:10px; height:10px; border-radius:50%; background:#f27a6b; flex-shrink:0;
  animation:conversaAudioPulso 1.1s ease-in-out infinite;
}
@keyframes conversaAudioPulso{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.8); }
}
.conversa-audio-tempo{ font-family:'Sora',sans-serif; font-weight:700; color:var(--ink); min-width:38px; }
.conversa-audio-dica{ flex:1; color:var(--ink-soft); font-size:0.85rem; }
.conversa-audio-cancelar, .conversa-audio-parar, .conversa-audio-tocar, .conversa-audio-enviar{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg-2);
  cursor:pointer; font-size:0.95rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.conversa-audio-cancelar{ color:#f27a6b; }
.conversa-audio-cancelar:hover{ background:#f27a6b; color:#fff; border-color:#f27a6b; }
.conversa-audio-parar{ color:var(--ember); border-color:var(--ember); }
.conversa-audio-parar:hover{ background:var(--ember); color:#fff; }
.conversa-audio-preview{ flex:1; }
.conversa-audio-tocar{ color:var(--violet); border-color:var(--violet); }
.conversa-audio-tocar:hover{ background:var(--violet); color:#fff; }
.conversa-audio-enviar{ background:var(--ember); color:#fff; border:none; margin-left:auto; }
.conversa-audio-enviar:hover{ filter:brightness(1.08); }
.conversa-audio-preview .conversa-audio-tempo{ flex:1; }

/* Bolha de mensagem de áudio: player nativo (controls) + duração ao lado,
   sem tentar montar um player custom — mais simples e acessível de graça. */
.msg-bolha.msg-audio audio{ max-width:220px; height:32px; }
.msg-bolha.msg-audio .msg-audio-duracao{ font-size:0.7rem; color:var(--ink-faint); }

/* Preview da foto escolhida antes de enviar — mesma linha/padding das de
   áudio, com a miniatura no lugar do cronômetro. */
.conversa-foto-preview{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); flex-shrink:0;
}
.conversa-foto-preview-img{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid var(--line-strong); }
.conversa-foto-preview-dica{ flex:1; color:var(--ink-soft); font-size:0.85rem; }
.conversa-video-preview-video{ width:80px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid var(--line-strong); background:#000; }
.conversa-localizacao-preview-mapa{ width:60px; height:44px; border-radius:10px; overflow:hidden; flex-shrink:0; border:1px solid var(--line-strong); pointer-events:none; }
.conversa-localizacao-preview-mapa iframe{ width:100%; height:100%; }

/* Bolha de mensagem com foto: sem padding/fundo (a imagem já preenche),
   arredondada igual à bolha de texto. */
.msg-bolha.msg-foto{ padding:4px; background:none; border:none; }
.msg-bolha.msg-foto .msg-foto-img{ max-width:220px; max-height:280px; border-radius:12px; display:block; object-fit:cover; cursor:pointer; }
.msg-bolha.msg-foto .msg-hora{ padding:2px 6px 0; }

/* Bolha de mensagem com vídeo: mesmo espírito da de foto (sem padding/
   fundo, player nativo preenchendo o espaço). */
.msg-bolha.msg-video{ padding:4px; background:none; border:none; }
.msg-bolha.msg-video .msg-video-video{ max-width:240px; max-height:280px; border-radius:12px; display:block; }
.msg-bolha.msg-video .msg-hora{ padding:2px 6px 0; }

/* Mapa pequeno de localização compartilhada (mensagens e posts) — mesmo
   componente nos dois lugares, só muda a largura do contexto em volta. */
.mapa-compartilhado{ border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); }
.mapa-compartilhado iframe{ width:100%; border:none; display:block; }
.mapa-compartilhado-etiqueta{
  display:block; padding:5px 8px; font-size:0.72rem; font-weight:600;
  background:var(--bg-2); color:var(--ink-soft); border-bottom:1px solid var(--line-strong);
}
.mapa-compartilhado-link{
  display:block; text-align:center; padding:6px; font-size:0.76rem;
  background:var(--bg-2); color:var(--ember); text-decoration:none;
}
.mapa-compartilhado-link:hover{ text-decoration:underline; }
.msg-bolha.msg-localizacao{ padding:4px; background:none; border:none; width:220px; max-width:220px; }
.msg-bolha.msg-localizacao .msg-hora{ padding:2px 6px 0; }
.post-localizacao{ margin-top:10px; }

@media(max-width:720px){
  .mensagens-shell{ height:min(600px, 80vh); grid-template-columns:1fr; }
  .conversas-lista{ border-right:none; }
  /* No celular só uma tela por vez: lista OU conversa. `.mostrando-conversa`
     é ligado/desligado pelo JS (abrir uma conversa / botão voltar). */
  .conversa-painel{ display:none; }
  .mensagens-shell:has(.conversa-painel.mostrando-conversa) .conversas-lista{ display:none; }
  .conversa-painel.mostrando-conversa{ display:flex; }
  .conversa-voltar{ display:flex; align-items:center; justify-content:center; }

  /* Pedido explícito: a aba Mensagens usa 100% da largura no celular —
     quebra o padding lateral do `.wrap` (`.app-shell` herda dele, valor em
     `--wrap-pad`, pra sempre compensar certo mesmo que o padding mude por
     faixa de largura — ver @media(max-width:600px) acima) só nessa view,
     e a "caixa" da conversa perde borda/cantos arredondados nas laterais
     pra ficar de ponta a ponta, igual um app de chat de verdade — as
     outras abas continuam com o respiro lateral normal. */
  [data-app-view="mensagens"]{
    margin-left:calc(-1 * var(--wrap-pad)); margin-right:calc(-1 * var(--wrap-pad));
    width:calc(100% + var(--wrap-pad) * 2); max-width:calc(100% + var(--wrap-pad) * 2);
  }
  [data-app-view="mensagens"] .mensagens-shell{ max-width:100%; border-radius:0; border-left:none; border-right:none; }
}

[data-app-view="admin-painel"], [data-app-view="admin-parametros"]{ max-width:900px; margin:0 auto; }
.admin-secao-titulo{ margin-top:28px; margin-bottom:12px; font-size:1rem; }

.admin-grupo h4{ font-size:0.8rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:10px; }
.admin-tiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;
  margin-bottom:24px;
}
.admin-tile{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:4px;
}
.admin-tile-valor{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.5rem; color:var(--ink); }
.admin-tile-label{ font-size:0.74rem; color:var(--ink-faint); }

.admin-secoes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.admin-secao{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.admin-secao h4{ font-size:0.88rem; margin-bottom:12px; }
.admin-secao-larga{ grid-column:1 / -1; }
.admin-grafico{ display:flex; align-items:flex-end; gap:3px; height:110px; }
.admin-grafico-barra{ flex:1; min-width:3px; min-height:2px; border-radius:2px 2px 0 0; transition:opacity .15s; }
.admin-grafico-barra:hover{ opacity:0.65; }
.admin-grafico-eixo{ display:flex; justify-content:space-between; margin-top:6px; font-size:0.68rem; color:var(--ink-faint); }
.admin-periodo-filtro{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.admin-periodo-filtro label{ display:flex; flex-direction:column; gap:4px; font-size:0.78rem; color:var(--ink-soft); font-weight:500; }
.admin-periodo-filtro input[type=date]{
  padding:8px 10px; border-radius:8px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.82rem; font-family:inherit;
}
.admin-periodo-filtro button{ padding:8px 16px; font-size:0.82rem; }
.admin-exportar-btn{ margin-bottom:16px; }

.admin-denuncias-filtro{ margin-bottom:16px; }
.admin-denuncias-filtro label{ font-size:0.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.admin-denuncias-filtro select{
  padding:7px 10px; border-radius:8px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.82rem; font-family:inherit;
}
/* Sem isso, o MENU ABERTO do select (não a caixa fechada) renderiza com
   fundo branco do navegador — `color-scheme` no :root não é suficiente
   sozinho pra isso, precisa do `background-color` explícito em `option`
   (mesmo problema/solução já usados em .auth-panel select/.profile-form
   select, ver comentário no :root no topo do arquivo). */
.admin-denuncias-filtro select option,
.admin-denuncia-situacao option{ background-color:var(--card); color:var(--ink); }
.admin-denuncias-lista{ display:flex; flex-direction:column; gap:10px; }
.admin-denuncia-item{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.admin-denuncia-cabecalho{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.admin-denuncia-quem{ font-size:0.84rem; color:var(--ink); }
.admin-denuncia-situacao{
  padding:5px 9px; border-radius:8px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.76rem; font-family:inherit; flex-shrink:0;
}
.admin-denuncia-motivo{ margin-top:8px; font-size:0.82rem; color:var(--ink-soft); }
.admin-denuncia-detalhes{ margin-top:4px; font-size:0.78rem; color:var(--ink-faint); line-height:1.5; }
.admin-denuncia-data{ margin-top:8px; font-size:0.68rem; color:var(--ink-faint); }

.admin-busca-usuarios{ display:flex; gap:8px; margin-bottom:16px; }
.admin-busca-usuarios input{
  flex:1; min-width:0; padding:9px 12px; border-radius:10px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.85rem; font-family:inherit;
}
.admin-usuarios-lista{ display:flex; flex-direction:column; gap:10px; }
.admin-usuario-item{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.admin-usuario-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.admin-usuario-nome{ font-size:0.88rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.admin-usuario-email{ font-size:0.78rem; color:var(--ink-soft); }
.admin-usuario-meta{ font-size:0.68rem; color:var(--ink-faint); }
.admin-usuario-stats{ font-size:0.72rem; color:var(--ink-soft); }
.admin-usuario-selo-admin{
  font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--violet); border:1px solid var(--violet); border-radius:999px; padding:1px 7px;
}
.admin-usuario-selo-banido{
  font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color:#f27a6b; border:1px solid #f27a6b; border-radius:999px; padding:1px 7px;
}
.admin-usuario-acoes{ display:flex; gap:8px; flex-shrink:0; }
.admin-usuario-acoes .btn{ padding:7px 12px; font-size:0.76rem; }
.admin-barra-linha{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-bottom:8px; font-size:0.78rem; }
.admin-barra-label{ color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; }
.admin-barra-trilha{ height:8px; border-radius:999px; background:rgba(var(--overlay-tint),0.06); overflow:hidden; }
.admin-barra-fill{ height:100%; border-radius:999px; }
.admin-barra-valor{ color:var(--ink-faint); font-variant-numeric:tabular-nums; min-width:22px; text-align:right; }

.admin-parametros-lista{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.admin-parametro-item{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.admin-parametro-cabecalho{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.admin-parametro-cabecalho code{
  font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--ink);
  background:rgba(var(--overlay-tint),0.06); padding:3px 8px; border-radius:6px;
}
.admin-parametro-descricao{ margin-top:8px; font-size:0.78rem; color:var(--ink-faint); line-height:1.5; }
.admin-parametro-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; color:var(--ink-soft); cursor:pointer; flex-shrink:0; }
.admin-parametro-toggle input{ accent-color:var(--ember); width:16px; height:16px; cursor:pointer; }
.admin-parametro-valor{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.admin-parametro-valor-input{
  width:90px; padding:6px 9px; border-radius:8px; border:1px solid var(--line-strong);
  background:rgba(var(--overlay-tint),0.04); color:var(--ink); font-size:0.8rem; font-family:'JetBrains Mono',monospace;
}
.admin-parametro-valor .btn{ padding:6px 12px; font-size:0.76rem; }