/* ── main.css — reset, tokens, layout raiz ─────────────────────────────── */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --color-primary:  #1A3C2E;
  --color-accent:   #C5A028;
  --color-accent-dk:#a0811e;
  --color-bg:       #FAF8F3;
  --color-surface:  #FFFFFF;
  --color-text:     #2C2C2C;
  --color-muted:    #888888;
  --color-border:   #E2DDD5;
  --color-mark:     #fde047;
  --color-mark-bg:  #fefce8;
  --hero-grad-mid:  #F0EDE4;
  --hero-grad-end:  #E8E4DB;
  --color-hero-ouro:#FFDE4B;
  --header-bg:      rgba(255,255,255,0.97);

  --font-serif: 'EB Garamond', Georgia, serif;
  --font-display: 'Aboreto', 'EB Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  0.75rem;   /* 12px */
  --space-lg:  1rem;      /* 16px */
  --space-xl:  1.5rem;    /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 2.5rem;    /* 40px */

  --radius:  8px;
  --radius-lg: 16px;
  --shadow:  0 2px 16px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.12);

  --max-width-app: 1200px;

  --transition: 0.25s ease;
}


/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

/* ── Transição de entrada/saída entre catecismos ─────────────────────────── */
@keyframes _page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
#app { animation: _page-in 0.35s ease; }

body.page-saindo #app {
  animation: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Acessibilidade ──────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── App shell ───────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Estado inicial — só a hero, página não rola (nada pra rolar ainda) ──── */
#app.estado-inicial #resultados-secao { display: none; }

/* ── Estado de busca — hero continua no topo (com parallax); os resultados
   ficam numa seção de 100dvh logo abaixo, revelada com scroll ao apertar
   Enter. Por dentro, #resultados-secao é idêntica ao app-shell antigo
   (header fixo + #painel-busca flex:1) — só mudou onde ela mora. ────────── */
#app.estado-busca #resultados-secao {
  display: flex;
  flex-direction: column;
  /* Sobe e "invade" a hero um pouco (a sobreposição vem do margin-top
     negativo); a altura cresce na mesma medida pra não sobrar nem faltar
     nada no fim da página. Margem lateral (em vez de padding) encolhe a
     própria caixa — sobra do que está atrás por baixo (hero na faixa da
     sobreposição, o fundo da página dali pra baixo). */
  height: calc(100dvh + 44px);
  margin: -44px clamp(0.75rem, 4vw, 2.5rem) 0;
  background: var(--color-bg);
  box-shadow: 0 -16px 44px rgba(0,0,0,0.28);
  position: relative;
  /* Sem overflow:hidden aqui de propósito — isso quebraria o
     position:sticky do #busca-topo (a caixa com overflow!=visible vira a
     referência do sticky, e essa caixa não tem scroll próprio). O
     arredondamento do topo vem de #busca-topo e #painel-busca terem seus
     próprios cantos arredondados, não de recortar o pai. */
}

/* Já em resultados, o campo de busca vive no header — esconde a fileira de
   ação da hero (senão sobra uma pílula vazia quando o usuário rola de volta
   pro topo). Título, marca e temas continuam como pano de fundo. */
#app.estado-busca #hero-acoes { visibility: hidden; }

/* ── Estado de leitura ───────────────────────────────────────────────────── */
#app.estado-inicial #hero,
#app.estado-busca   #hero { display: flex; }
#app.estado-leitura #hero { display: none; }

#app.estado-leitura {
  height: 100dvh;
  overflow: hidden;
}
#app.estado-leitura #resultados-secao { display: none; }
#app:not(.estado-leitura) #leitor-container { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO — cena fotográfica em tela cheia
   Camadas (z-index): foto → título → recorte da figura → véu → interface.
   O título passa POR TRÁS da figura; é isso que dá profundidade à cena.
   ═══════════════════════════════════════════════════════════════════════ */

/* Base compartilhada com o São Pio X — só o layout de flex/centralização. */
#hero {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-lg) 3rem;
  text-align: center;
  position: relative;
}

/* Especialização do CIC: cena fotográfica em vez do gradiente do São Pio X. */
#hero.hero-foto {
  justify-content: flex-end;
  gap: clamp(1rem, 2.6vh, 1.75rem);
  padding: 0 var(--space-lg) clamp(1.75rem, 5vh, 3rem);
  isolation: isolate;
  overflow: hidden;
  min-height: min(100dvh, 860px);
  background: #1b1712;
}

/* ── Camadas da cena ────────────────────────────────────────────────────── */
/* 9% de sobra em cima/embaixo — dá margem pro parallax (hero-parallax.js)
   deslocar a camada verticalmente sem revelar borda vazia. */
#hero.hero-foto .hero-cena {
  position: absolute;
  top: -9%;
  left: 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 22%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

#hero.hero-foto .hero-cena-fundo  { z-index: 0; }
#hero.hero-foto .hero-cena-figura { z-index: 2; }

/* Véu: escurece o topo (legibilidade do título) e dissolve o pé da foto
   no creme do restante do app. */
#hero.hero-foto .hero-veu {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(20,16,12,0.42) 0%,
      rgba(20,16,12,0.10) 26%,
      rgba(20,16,12,0.00) 42%,
      rgba(20,16,12,0.32) 56%,
      rgba(20,16,12,0.66) 72%,
      rgba(20,16,12,0.86) 88%,
      rgba(20,16,12,0.93) 100%
    );
}

/* ── Título ─────────────────────────────────────────────────────────────── */
#hero.hero-foto h1 {
  position: absolute;
  z-index: 1;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 96vw;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 6.25vw, 7.6rem);
  line-height: 1;
  letter-spacing: -0.085em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
  white-space: nowrap;
}

/* ── Marca ──────────────────────────────────────────────────────────────── */
#hero.hero-foto .logo {
  position: absolute;
  z-index: 4;
  top: clamp(1.75rem, 7vh, 4.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: clamp(58px, 11vh, 110px);
  filter: drop-shadow(0 2px 18px rgba(0,0,0,0.4));
  transition: transform 0.3s ease;
}

#hero.hero-foto .logo:hover {
  transform: translateX(-50%) translateY(-3px);
}

/* ── Selo beta ──────────────────────────────────────────────────────────── */
#hero.hero-foto .badge-beta {
  position: absolute;
  z-index: 4;
  top: clamp(1rem, 3vh, 1.75rem);
  right: clamp(1rem, 3vw, 2rem);
  transform: none;
}

/* ── Linha de ação: PESQUISAR · campo · LER ─────────────────────────────── */
#hero-acoes {
  position: relative;
  z-index: 4;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 3.2vw, 3.3rem);
  width: 100%;
  max-width: 1000px;
  /* Sem margin-top:auto: o justify-content:flex-end da hero já encosta tudo
     no pé, e o auto empurraria sozinho para o topo qualquer item de fluxo
     anterior (o chip de continuar lendo, e o título no mobile). */
}

/* Halo suave por trás da linha de ação — garante contraste dos rótulos
   independentemente do que a foto tiver naquela faixa. */
#hero-acoes::before {
  content: "";
  position: absolute;
  inset: -120% -4%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(52% 46% at 50% 50%, rgba(20,16,12,0.62) 0%, rgba(20,16,12,0.34) 58%, rgba(20,16,12,0) 100%);
}

.hero-rotulo {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.68rem, 1.1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 1px 18px rgba(0,0,0,0.6);
  transition: color var(--transition), text-shadow var(--transition);
}

.hero-rotulo:hover { color: #fff; }

.hero-rotulo-ativo {
  color: var(--color-hero-ouro);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 26px rgba(255,222,75,0.35);
}

/* ── Tagline ────────────────────────────────────────────────────────────── */
#hero.hero-foto .tagline {
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  color: rgba(255,255,255,0.7);
  max-width: 420px;
  margin: 0;
  line-height: 1.55;
  text-shadow: 0 1px 14px rgba(0,0,0,0.6);
}

/* Entrada para o hub de perguntas: um convite na mesma voz da tagline, não
   um botão — a busca continua sendo a ação principal da hero. */
#hero.hero-foto .hero-perguntar {
  margin-top: -0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  font-style: italic;
  color: var(--color-hero-ouro);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,222,75,0.35);
  text-shadow: 0 1px 14px rgba(0,0,0,0.6);
  transition: border-color var(--transition);
}

#hero.hero-foto .hero-perguntar:hover { border-bottom-color: var(--color-hero-ouro); }

/* ── Link discreto entre catecismos (São Pio X) ─────────────────────────── */
.btn-outro-catecismo {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
  margin-top: calc(-1 * var(--space-md));
}
.btn-outro-catecismo:hover { color: var(--color-primary); }

/* ── Continuar lendo ────────────────────────────────────────────────────── */
#continuar-lendo {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  /* Acompanha a largura do campo de busca logo abaixo. */
  max-width: min(100%, 420px);
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  background: rgba(20,16,12,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}

#continuar-lendo:hover {
  background: rgba(20,16,12,0.62);
  border-color: var(--color-hero-ouro);
}

.continuar-lendo-rotulo {
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-hero-ouro);
}

.continuar-lendo-num {
  flex-shrink: 0;
  font-weight: 600;
  opacity: 0.9;
}

/* O trecho é o que cede espaço: some antes de espremer o rótulo e o §. */
.continuar-lendo-trecho {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.72;
}

/* Em busca a hero vira pano de fundo do card de resultados — o chip sairia
   flutuando sobre ele. */
#app.estado-busca #continuar-lendo { display: none; }

#continuar-lendo.oculto { display: none; }

/* ── Rodapé do hero ─────────────────────────────────────────────────────── */
#hero-rodape {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.6vh, 1rem);
  width: 100%;
}

/* ── Hero em telas estreitas ────────────────────────────────────────────── */
@media (max-width: 767px) {
  #hero.hero-foto {
    min-height: 100dvh;
    /* Respiro maior no pé + safe area: no iPhone as pills ficavam quase
       encostando na barra de gestos. */
    padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
  }

  /* Em retrato a foto é cortada na horizontal (é landscape), então a figura
     fica sempre alta no quadro e o rosto ocupa a faixa dos 6%–31%. Não há
     como reposicionar a cena por CSS sem zoom absurdo — logo o título sai do
     absolute e entra no fluxo, empilhado acima do campo, sobre a área que o
     véu já escurece. Ganha legibilidade e preenche o vão morto do meio. */
  #hero.hero-foto h1 {
    position: relative;
    z-index: 4;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(1.75rem, 8.5vw, 2.5rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.4);
  }

  #hero.hero-foto .logo { height: clamp(52px, 8.5vh, 74px); }

  /* Reforça o véu na faixa do título/campo (o gradiente base é calibrado para
     paisagem, onde esse bloco cai mais embaixo). */
  #hero.hero-foto .hero-veu {
    background:
      linear-gradient(to bottom,
        rgba(20,16,12,0.42) 0%,
        rgba(20,16,12,0.10) 24%,
        rgba(20,16,12,0.02) 36%,
        rgba(20,16,12,0.48) 52%,
        rgba(20,16,12,0.78) 66%,
        rgba(20,16,12,0.90) 80%,
        rgba(20,16,12,0.94) 100%
      );
  }

  /* Campo em uma linha; PESQUISAR / LER logo abaixo. (max-width do campo é
     resetado em search.css, que carrega depois e domina a cascata)
     `margin-top: auto` sai: no desktop ele cola a linha de ação no pé e o
     título é absolute; aqui o título está no fluxo logo acima e o auto o
     empurraria sozinho para o topo. Quem alinha é o justify-content da hero. */
  #hero-acoes {
    flex-wrap: wrap;
    /* O campo ocupa a linha inteira (order:-1) e PESQUISAR/LER ficam lado a
       lado na de baixo — 1.75rem deixava os dois rótulos quase colados. */
    gap: 0.65rem 2.75rem;
  }

  .hero-rotulo {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }

  #temas-rapidos { max-width: 100%; }

  /* Em retrato cada pixel de largura conta: a margem lateral do card cai de
     15px para 8px. Ainda sobra a faixa da hero por baixo (é o efeito de card
     flutuante), mas devolve 14px de texto por linha. */
  #app.estado-busca #resultados-secao {
    margin-left: 8px;
    margin-right: 8px;
  }

  /* Sem isso "N resultados (exibindo 200)" quebra em duas linhas e espreme o
     botão de resumo ao lado. Escopado: #contagem-resultados também existe no
     São Pio X, que não tem #resultados-secao nem override próprio. */
  #resultados-secao #contagem-resultados {
    font-size: 0.7rem;
    line-height: 1.3;
  }
}

/* #busca-topo é mostrado/escondido junto com #resultados-secao (seu pai). */

/* Header externo: full-width, sticky */
#busca-topo {
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px rgba(0,0,0,0.07);
  flex-shrink: 0;
}

/* Só no CIC (dentro de #resultados-secao) — fica visível mesmo rolando de
   volta em direção à hero. #busca-topo sozinho também existe no São Pio X,
   que não tem essa seção/scroll, então escopamos pra não afetar lá. */
#resultados-secao #busca-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  border-radius: 6px 6px 0 0;
}

/* Inner wrapper: max-width centrado */
.busca-topo-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  max-width: var(--max-width-app);
  margin: 0 auto;
  width: 100%;
}

/* No CIC, mais discreto — a hero já é o protagonista, a barra aqui é só
   utilidade pra refinar a busca. (São Pio X também usa .busca-topo-inner,
   por isso escopado a #resultados-secao, que só existe no CIC.) */
#resultados-secao .busca-topo-inner {
  gap: var(--space-sm);
  padding: 0.5rem var(--space-lg);
}

.btn-home {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  color: var(--color-muted);
  transition: color var(--transition), background var(--transition);
}

/* No CIC ganha o label "Início" ao lado do ícone — vira uma pílula em vez
   do botão quadrado (que o São Pio X mantém, por isso escopado). */
#resultados-secao .btn-home {
  justify-content: flex-start;
  gap: 0.4rem;
  width: auto;
  height: 30px;
  padding: 0 0.55rem 0 0.45rem;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

#resultados-secao .btn-home svg { flex-shrink: 0; }

.btn-home:hover {
  color: var(--color-primary);
  background: var(--color-bg);
}

/* ── Tema de sugestões rápidas (estado inicial) ──────────────────────────── */
#temas-rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  max-width: 540px;
}

#temas-rapidos button {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-primary);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform 0.15s ease, box-shadow 0.15s ease;
}

#temas-rapidos button:hover {
  background: #FFFFFF;
  border-color: var(--color-accent);
  color: var(--color-accent-dk);
  box-shadow: 0 2px 8px rgba(197,160,40,0.15);
  transform: translateY(-1px);
}

#temas-rapidos button:active {
  transform: scale(0.97);
}

/* Sobre a foto do hero do CIC, os chips ganham vidro escuro. */
#hero.hero-foto #temas-rapidos button {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.28);
}

#hero.hero-foto #temas-rapidos button:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--color-hero-ouro);
  color: #fff;
  box-shadow: 0 2px 14px rgba(255,222,75,0.18);
}

/* ── mark global ─────────────────────────────────────────────────────────── */
mark {
  background: var(--color-mark);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Animações ───────────────────────────────────────────────────────────── */

/* Hero aparece com fade-in */
#hero {
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cards de resultado deslizam ao aparecer */
.grupo-parte {
  animation: fadeIn 0.2s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Transição suave do estado inicial → busca ativa */
#busca-topo {
  transition: box-shadow 0.2s ease;
}

/* ── Prefer reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Sugestão de variante ────────────────────────────────────────────────── */
.sugestao-variante {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.45rem var(--space-lg);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.sugestao-variante.oculto { display: none; }

.sugestao-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.sugestao-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-bg);
}

.sugestao-count {
  font-size: 0.68rem;
  color: var(--color-muted);
}

/* ── Utilitários ─────────────────────────────────────────────────────────── */
.oculto { display: none !important; }

/* ── Frame "app" — borda dourada em telas com espaço ────────────────────── */
@media (min-width: 860px) {
  #app {
    min-height: 100dvh;
  }

  /* Em modo leitura a altura fica travada (imersivo, tela cheia) */
  #app.estado-leitura {
    height: 100dvh;
    min-height: 0;
  }
}

/* ── Badge beta ──────────────────────────────────────────────────────────── */
.badge-beta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hero-ouro);
  background: rgba(20,16,12,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,222,75,0.35);
  border-radius: 100px;
  padding: 0.15rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.4rem;
  position: relative;
  top: -0.15em;
}

/* Mobile: header compacto sem botão de leitura */
@media (max-width: 767px) {
  .busca-topo-inner {
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
}

/* ── Meta mensal ───────────────────────────────────────────────────────────── */
.meta-container {
  text-align: left;
  margin-top: var(--space-lg);
}

.meta-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

.meta-valor strong {
  color: var(--color-primary);
}

.meta-barra {
  height: 6px;
  background: var(--color-border);
  border-radius: 100px;
  overflow: hidden;
}

.meta-progresso {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dk));
  border-radius: 100px;
  min-width: 0;
  transition: width 0.5s ease;
}

/* ── Badge de versão ──────────────────────────────────────────────────────── */
#app-version:empty { display: none; }

/* ── Hint coletor ────────────────────────────────────────────────────────── */
#hint-coletor {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-muted);
  padding: 0.4rem var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

#hint-coletor strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

#toast.visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Badge beta como link */
a.badge-beta {
  text-decoration: none;
  cursor: pointer;
}

a.badge-beta:hover {
  background: rgba(197,160,40,0.22);
  border-color: rgba(197,160,40,0.6);
}