/* ═══════════════════════════════════════════════
   DreamPSYQ · PSYQUANTIC — silêncio visual
   Paleta Alvorada (decidida 22/jul/2026):
   off-white quente + azul profundo como tinta + ouro
   ═══════════════════════════════════════════════ */

:root {
  --fundo: #F5F0E8;          /* off-white quente PSYQUANTIC */
  --fundo-medio: #DFE7EE;    /* superfícies em azul pastel */
  --fundo-claro: #C9D6E0;
  --fundo-glow: #F7EBD2;     /* brilho dourado do amanhecer, no topo */
  --verde-mineral: #7A9E8A;
  --tinta: #131C26;          /* azul quase preto — títulos e texto principal */
  --tinta-suave: #1A2531;    /* texto de corpo — quase preto p/ destacar no fundo claro */
  --acento: #866532;         /* ouro matte, mais escuro pra contraste no off-white */
  --acento-claro: #866532;
  --acento-palido: #6F531F;
  --neutro: #2C343E;         /* subtítulos/labels bem escuros — máximo destaque no claro */

  /* orbe: blobs pastéis, tinta do ícone e sombra */
  --orbe-a: #E8D5A8;
  --orbe-b: #A9C6B4;
  --orbe-c: #B7C7D4;
  --orbe-d: #D4AF78;
  --tinta-orbe: #1C2B3A;
  --sombra-orbe: rgba(28, 43, 58, 0.18);

  --serif: 'Cormorant Garamond', Georgia, serif;  /* títulos e citações — a letra da marca */
  --sans: 'Jost', system-ui, sans-serif;          /* interface */

  /* A letra dos TEXTOS LONGOS (análise, sonho, campo de escrever, diário).
     Vive separada da --serif de propósito: a Cormorant foi desenhada pra
     título, e o que serve a um título de 2rem não serve a cinco parágrafos
     de 17px. Trocar a leitura do app inteiro é mudar estas duas linhas.
     Rodada 1 (29/jul): a leitura virou Jost, a mesma da interface.
     Rodada 2 (3/ago): a leitura é a INTER, decisão do Vicente comparando
     Jost × Literata × Newsreader × Inter no aparelho. O diagnóstico da
     rodada 1 estava errado — a queixa era "serifada e fininha" e trocamos
     a serifa, mas o problema real era letra de TÍTULO usada como letra de
     TEXTO, e a Jost (geométrica derivada da Futura, altura-de-x baixa)
     continua sendo letra de título. A Inter é desenhada para tela e tem
     altura-de-x muito maior: os font-size em rem ficaram os MESMOS de
     propósito, porque a troca de família já faz o texto crescer oticamente.
     Diminuir o corpo aqui seria devolver em px o que se ganhou em desenho.
     A serif segue nos títulos e nas citações — é a letra do ícone e da
     marca. A Jost segue na interface: botões, abas e textos curtos. */
  --leitura: 'Inter', system-ui, sans-serif;
  --leitura-peso: 400;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ⚠️ REGRA DE OURO, aprendida errando DUAS vezes (31/jul: as linhas de cota;
   1/ago: o botão "ativar lembrete"). O `[hidden]` do HTML vale por uma regra
   da folha do navegador — QUALQUER classe nossa com `display:` ganha dele.
   O atributo estava certo nos dois casos; o CSS é que mandava mais, e o
   elemento continuava na tela mostrando o estado errado.
   Isto resolve a família inteira do problema, hoje e no que vier. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 400; /* era 300 — a Jost fina demais no fundo claro cansava a vista */
  /* aurora alvorada (ref. NIX): âmbar, verde mineral e azul névoa se dissolvendo no off-white */
  background:
    radial-gradient(90% 70% at 88% -12%, rgba(226, 172, 88, 0.40) 0%, transparent 58%),
    radial-gradient(75% 60% at -12% 18%, rgba(150, 188, 166, 0.42) 0%, transparent 60%),
    radial-gradient(85% 65% at 112% 88%, rgba(163, 185, 205, 0.45) 0%, transparent 60%),
    radial-gradient(60% 50% at 12% 108%, rgba(226, 200, 142, 0.38) 0%, transparent 62%),
    linear-gradient(160deg, #F9F1DF 0%, var(--fundo) 48%, #EFECE7 100%);
  background-attachment: fixed;
  color: var(--tinta);
  min-height: 100dvh;
  letter-spacing: 0.01em;
}

/* iconografia arquetípica como nuance — mandala (self) e lua como âncoras,
   + 12 glifos das figuras arquetípicas do imaginário coletivo:
   inocente, comum, explorador, sábio, herói, fora-da-lei,
   mago, amante, bobo, cuidador, criador, governante */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg fill='none' stroke='%238F6E3B' stroke-width='1.3'%3E%3Ccircle cx='830' cy='170' r='150' opacity='.5'/%3E%3Ccircle cx='830' cy='170' r='196' stroke-dasharray='2 10' opacity='.4'/%3E%3Cpath d='M200 600 A90 90 0 1 0 200 780 A72 72 0 1 1 200 600' opacity='.5'/%3E%3Cpath d='M520 315 l7 17 17 7 -17 7 -7 17 -7 -17 -17 -7 17 -7 z' opacity='.55'/%3E%3Cg opacity='.55'%3E%3Ccircle cx='150' cy='120' r='16'/%3E%3Ccircle cx='150' cy='120' r='2.5' fill='%238F6E3B' stroke='none'/%3E%3C/g%3E%3Cg opacity='.5'%3E%3Cpath d='M50 832 h36 M50 841 h36 M50 850 h36'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Ccircle cx='120' cy='320' r='18'/%3E%3Cpath d='M120 306 L126 320 L120 334 L114 320 Z'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M840 430 Q870 408 900 430 Q870 452 840 430'/%3E%3Ccircle cx='870' cy='430' r='4.5'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M930 600 V656 M918 614 H942'/%3E%3Ccircle cx='930' cy='662' r='3' fill='%238F6E3B' stroke='none'/%3E%3C/g%3E%3Cpath d='M418 285 A20 20 0 1 1 398 307' opacity='.55'/%3E%3Cpath d='M700 916 V944 M686 930 H714 M690 920 L710 940 M710 920 L690 940' opacity='.55'/%3E%3Cg opacity='.55'%3E%3Ccircle cx='532' cy='720' r='13'/%3E%3Ccircle cx='551' cy='720' r='13'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Ccircle cx='232' cy='696' r='3' fill='%238F6E3B' stroke='none'/%3E%3Ccircle cx='248' cy='686' r='2.5' fill='%238F6E3B' stroke='none'/%3E%3Ccircle cx='264' cy='696' r='3' fill='%238F6E3B' stroke='none'/%3E%3Cpath d='M232 710 Q248 722 264 710'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M300 868 A24 24 0 0 0 348 868 M324 892 V904 M312 906 H336'/%3E%3C/g%3E%3Cpath d='M548 90 a6 6 0 0 1 12 0 a12 12 0 0 1 -24 0 a18 18 0 0 1 36 0' opacity='.55'/%3E%3Cg opacity='.55'%3E%3Cpath d='M460 946 L470 928 L480 940 L490 928 L500 946 Z M460 952 H500'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.22;
}

/* grão de papel sobre a aurora — materialidade e antídoto contra banding */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
}

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

/* ── Estrutura ── */

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 40px) 120px;
}

.screen { display: none; animation: breathe-in 0.6s ease both; }
.screen.active { display: block; }

@keyframes breathe-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Tipografia ── */

.label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--neutro);
}

.label-gold { color: var(--acento); }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.15;
  margin-top: 14px;
}

.subtitle {
  margin-top: 10px;
  color: var(--neutro);
  font-size: 0.95rem;
  font-weight: 400;
}

.screen-header { margin-bottom: 36px; }

/* ── Botão de gravar: o orbe do sonho ── */

.record-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 44px 0 52px;
}

.record-btn {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento-palido) 35%, transparent);
  background: var(--fundo-medio);
  overflow: hidden;
  color: var(--tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 48px var(--sombra-orbe),
              0 0 44px color-mix(in srgb, var(--acento) 18%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.record-btn::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(45% 45% at 30% 35%, color-mix(in srgb, var(--orbe-a) 85%, transparent), transparent 70%),
    radial-gradient(50% 50% at 72% 28%, color-mix(in srgb, var(--orbe-b) 55%, transparent), transparent 70%),
    radial-gradient(55% 55% at 62% 76%, color-mix(in srgb, var(--orbe-c) 60%, transparent), transparent 70%),
    radial-gradient(40% 40% at 24% 72%, color-mix(in srgb, var(--orbe-d) 65%, transparent), transparent 70%);
  filter: blur(16px);
  animation: deriva 14s ease-in-out infinite alternate;
}

@keyframes deriva {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(70deg) scale(1.18); }
}

.record-btn:hover {
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--acento-palido) 60%, transparent);
  box-shadow: 0 22px 56px var(--sombra-orbe),
              0 0 56px color-mix(in srgb, var(--acento) 28%, transparent);
}
.record-btn:active { transform: scale(0.97); }

.record-icon {
  width: 42px;
  height: 42px;
  position: relative;
  color: var(--tinta-orbe);
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--tinta) 35%, transparent));
}

.record-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 18%, transparent);
  animation: pulse 4.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.06); opacity: 0.25; }
}

.record-hint {
  text-align: center;
  color: var(--neutro);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ── Cards ── */

.card {
  border: 1px solid color-mix(in srgb, var(--neutro) 18%, transparent);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
}

.card .label { margin-bottom: 10px; }

.card-text {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  line-height: 1.6;
}

.quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--acento-palido);
}

/* ── Estado vazio ── */

.empty-state {
  text-align: center;
  padding: 70px 24px;
  color: var(--neutro);
  line-height: 1.7;
  font-size: 0.95rem;
}

.empty-mark {
  display: block;
  font-size: 1.3rem;
  color: var(--acento);
  margin-bottom: 18px;
}

/* ── Registro do sonho ── */

.btn-voltar {
  background: none;
  border: none;
  color: var(--neutro);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  cursor: pointer;
  padding: 0 0 18px;
  transition: color 0.25s ease;
}

.btn-voltar:hover { color: var(--tinta); }

.voz-area {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

/* O lápis vive ao lado do microfone, no mesmo tamanho e no mesmo estilo:
   é a hierarquia dizendo que falar e escrever são o mesmo caminho, e não
   um caminho com um desvio. Só o brilho dourado é mais discreto — quem
   escreve já está olhando pro campo de texto logo abaixo. */
.escrever-btn { box-shadow: 0 10px 26px var(--sombra-orbe); }

/* ── Diário: quem já tem leitura, e quem está separado pra sessão ──
   As duas marcas são POSITIVAS de propósito (marcam o que existe, não o que
   falta): um diário que marca ausência vira lista de pendências, e registrar
   sem analisar é uso legítimo. */
.marca-lido { color: var(--acento); font-size: 0.72rem; }
.marca-terapia {
  margin-top: 3px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--acento-palido) 80%, transparent);
}

.levar-area { margin: 8px 0 4px; text-align: center; }
.levar-area .btn-fantasma.escolhido {
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
  color: var(--acento-palido);
}

/* O bloco de nota e o reencontro com ela.
   Fechado é uma linha só: rótulo, resumo e seta. Aberto, o corpo desce. */
.nota-cabeca {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.nota-cabeca .nota-resumo {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--neutro) 85%, transparent);
}
.nota-cabeca .nota-seta {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--acento);
  transition: transform 0.25s ease;
}
.nota-cabeca.aberta .nota-seta { transform: rotate(90deg); }
.nota-corpo { margin-top: 14px; }
/* ⚠️ RESPIRO obrigatório entre o aviso da próxima conversa e o bloco de nota
   (pedido da Bruna em 1º/ago). O `.conversa-fim` não tem margem embaixo e o
   cartão da nota não tinha margem em cima: os dois encostavam e liam como um
   bloco só, quando são duas coisas diferentes ("não dá para falar agora" e
   "escreva o que ficou"). Vale para os dois estados, porque os dois saem do
   mesmo lugar no código: a conversa que se encerrou e a que ainda não abriu. */
.bloco-nota { margin-top: 30px; }
.bloco-nota .campo-sonho { margin-top: 10px; }
.bloco-nota .btn-fantasma { margin-top: 10px; }
.bloco-nota-reencontro { margin-bottom: 18px; }
.bloco-nota-reencontro .btn-fantasma { margin-top: 12px; }

.voz-area .mic-status { flex: 1; min-width: 0; }

.mic-btn {
  flex-shrink: 0;
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento-palido) 35%, transparent);
  background: var(--fundo-medio);
  overflow: hidden;
  color: var(--tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px var(--sombra-orbe),
              0 0 24px color-mix(in srgb, var(--acento) 14%, transparent);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.mic-btn::before,
.orbe-marca::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(45% 45% at 30% 35%, color-mix(in srgb, var(--orbe-a) 80%, transparent), transparent 70%),
    radial-gradient(50% 50% at 72% 28%, color-mix(in srgb, var(--orbe-b) 50%, transparent), transparent 70%),
    radial-gradient(55% 55% at 62% 76%, color-mix(in srgb, var(--orbe-c) 55%, transparent), transparent 70%);
  filter: blur(9px);
  animation: deriva 14s ease-in-out infinite alternate;
}

.mic-btn svg {
  width: 26px;
  height: 26px;
  position: relative;
  color: var(--tinta-orbe);
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--tinta) 35%, transparent));
}

.mic-btn:hover { border-color: color-mix(in srgb, var(--acento-palido) 60%, transparent); }

.mic-btn.ouvindo {
  border-color: var(--acento);
  animation: ouvindo 1.8s ease-in-out infinite;
}

.mic-btn.ouvindo::before { animation-duration: 4s; }

@keyframes ouvindo {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 35%, transparent); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}

.mic-status {
  color: var(--neutro);
  font-size: 0.85rem;
  line-height: 1.6;
}

.mic-status.ativo { color: var(--acento-palido); }

.campo-sonho {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--neutro) 22%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
  color: var(--tinta);
  font-family: var(--leitura);
  font-weight: var(--leitura-peso);
  font-size: 1rem;
  line-height: 1.65;
  padding: 20px 22px;
  resize: vertical;
  outline: none;
  transition: border-color 0.25s ease;
}

/* sem itálico: a Jost não tem um de verdade, e o navegador inventa um
   inclinando a letra reta — sai torto. A cor mais clara já separa o exemplo
   do que a pessoa escreve. */
.campo-sonho::placeholder { color: color-mix(in srgb, var(--neutro) 62%, transparent); }
.campo-sonho:focus { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }

.btn-primario {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 16px;
  border-radius: 999px;
  border: 1px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento-palido);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-primario:hover { background: color-mix(in srgb, var(--acento) 22%, transparent); }
.btn-primario:active { transform: scale(0.98); }

/* ── Diário: lista de sonhos ── */

.sonho-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--neutro) 18%, transparent);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.sonho-item:hover { border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.sonho-item:active { transform: scale(0.99); }

.sonho-item .label { margin-bottom: 8px; }

.sonho-trecho {
  font-family: var(--leitura);
  font-weight: var(--leitura-peso);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* As palavras do sentimento: escolha por toque, mesma linguagem visual das
   polaridades do dossiê. Embrulham em várias linhas conforme a largura. */
.sentimentos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* minúsculas, ao contrário dos outros botões fantasma: são palavras de
   sentimento, não comandos — caixa alta com rastreio largo soaria protocolar,
   e oito delas não caberiam na largura do celular */
.sentimentos .sentimento-btn {
  width: auto;
  margin: 0;
  padding: 9px 16px;
  font-size: 0.86rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
}

.sentimentos .sentimento-btn.escolhido {
  border-color: var(--acento);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, transparent);
}

.sentimentos .sentimento-outra { font-style: italic; }

/* rótulo do texto do sonho — dá nome ao bloco que não tinha nenhum */
.rotulo-sonho { margin-bottom: 12px; }

/* O que a pessoa escreveu antes da análise. Reto e escuro de propósito:
   é a voz dela, não a do app (o itálico dourado é do app). */
.leitura-pessoal {
  font-family: var(--leitura);
  font-weight: var(--leitura-peso);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinta);
}

/* ── Sonho: releitura ── */

.sonho-texto {
  font-family: var(--leitura);
  font-weight: var(--leitura-peso);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--tinta-suave);
  white-space: pre-wrap;
  margin-bottom: 32px;
}

/* ── Análise junguiana ── */

.analise-bloco { margin-top: 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--neutro) 14%, transparent); }
.analise-bloco .label { margin-bottom: 10px; }

.analise-linha {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  line-height: 1.65;
  margin-bottom: 8px;
}

.analise-linha strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tinta);
}

.tom-escala {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neutro) 45%, transparent),
    color-mix(in srgb, var(--acento) 55%, transparent));
  margin: 18px 2px 10px;
}

.tom-ponto {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
}

/* As pontas da régua: são a ESCALA, não valores. Pequenas e apagadas, embaixo
   da linha — nunca no mesmo peso do tom do sonho, senão viram uma lista de
   três palavras onde uma repete. */
.tom-eixo {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--neutro) 62%, transparent);
  letter-spacing: 0.08em;
}

/* O tom DESTE sonho: sozinho, acima da régua. É a resposta. */
.tom-atual {
  display: block;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  color: var(--acento);
}

.analise-pergunta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--acento-palido);
}

.voto-registrado { color: var(--tinta-suave); font-style: italic; }

.disclaimer {
  margin-top: 26px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--neutro) 80%, transparent);
}

.apagar-area { margin-top: 40px; text-align: center; }

.btn-fantasma {
  background: none;
  border: 1px solid color-mix(in srgb, var(--neutro) 30%, transparent);
  border-radius: 999px;
  padding: 12px 24px;
  color: var(--neutro);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.btn-fantasma:hover { color: var(--tinta); border-color: var(--neutro); }

.btn-perigo { border-color: rgba(160, 71, 47, 0.4); color: #A0472F; }
.btn-perigo:hover { color: #7E3623; border-color: #A0472F; }

.confirm-apagar { margin-top: 18px; }
.confirm-apagar .card-text { margin-bottom: 16px; }
.confirm-acoes { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Entrada (login) ── */

.orbe-marca {
  display: block;
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento-palido) 35%, transparent);
  background: var(--fundo-medio);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 10px 26px var(--sombra-orbe),
              0 0 24px color-mix(in srgb, var(--acento) 14%, transparent);
}

/* A orbe da entrada carrega o símbolo PSYQUANTIC (o Q da marca). Fica maior
   pra dar presença, e o gradiente pastel atrás quase para pra não competir. */
.orbe-simbolo-marca {
  width: 124px;          /* v14: o símbolo estava pequeno demais — orbe e Q cresceram */
  height: 124px;
  display: grid;
  place-items: center;
}
.orbe-simbolo-marca::before {
  opacity: 0.45;         /* gradiente pastel recuado — o símbolo é o protagonista */
  filter: blur(14px);
  animation-duration: 22s;
}
.orbe-simbolo {
  position: relative;
  z-index: 1;
  width: 84%;            /* v14: o Q domina a orbe; sobra só o respiro da cauda e dos pontinhos */
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--tinta) 22%, transparent));
}

/* Telas de entrada: cabeçalho centralizado (orbe + marca + "menos ruído").
   A redefinição de senha tem a mesma composição — entra no mesmo eixo. */
#tela-login .screen-header,
#tela-redefinir .screen-header { text-align: center; }
#tela-login .orbe-marca,
#tela-redefinir .orbe-marca { margin-left: auto; margin-right: auto; }

/* Hoje: mesmo eixo da entrada e do Meu perfil (pedido da Bruna, 1º/ago).
   O cabeçalho da Hoje era o único desalinhado da tela toda: marca, saudação
   e pergunta à esquerda, e logo abaixo o botão de gravar no centro. Com os
   três centrados, a coluna inteira passa a ter um eixo só.
   ⚠️ Só o cabeçalho. Os cartões abaixo continuam alinhados à esquerda: texto
   corrido centralizado é difícil de ler. */
#tela-hoje .screen-header { text-align: center; }

/* Meu perfil: mesmo eixo da entrada — símbolo, nome, texto e o sair,
   tudo no centro (pedido da Bruna, v14). */
#tela-voce .screen-header { text-align: center; }
#tela-voce .orbe-marca { margin-left: auto; margin-right: auto; }
#tela-voce .btn-sair-conta { display: block; margin-left: auto; margin-right: auto; }

.login-form { display: flex; flex-direction: column; }

.campo-rotulo {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--neutro);
  margin: 18px 0 8px;
}

.campo-login {
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--neutro) 22%, transparent);
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  outline: none;
  transition: border-color 0.25s ease;
}

.campo-login:focus { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }

/* ── @ do Instagram ──
   O arroba é do app, não do que a pessoa digita: ela escreve só o usuário e
   nunca erra com/sem @. O campo ganha o recuo do próprio arroba. */
.campo-arroba { position: relative; }
.campo-arroba .campo-arroba-marca {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1rem;
  color: color-mix(in srgb, var(--neutro) 70%, transparent);
  pointer-events: none;
}
.campo-arroba .campo-login { padding-left: 36px; }

/* Hora não precisa da largura toda: um campo de 5 caracteres esticado por
   340px parece defeito. O iOS ainda desenha o seletor dele por cima. */
.campo-hora { width: auto; min-width: 140px; }

.campo-linha { display: flex; gap: 14px; }
.campo-grupo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.opcional {
  text-transform: none;
  letter-spacing: 0.05em;
  font-style: italic;
  color: color-mix(in srgb, var(--neutro) 70%, transparent);
}

.login-nota {
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--neutro);
  line-height: 1.65;
}

.login-erro {
  margin-top: 16px;
  font-size: 0.85rem;
  color: #A0472F;
  line-height: 1.6;
}

.btn-criar { margin-top: 12px; align-self: center; }

/* "Esqueci minha senha" — discreto, sem moldura, abaixo do criar conta */
.btn-esqueci {
  margin-top: 12px;
  align-self: center;
  border: none;
  padding: 6px 8px;
  font-size: 0.66rem;
  color: var(--neutro);
}
.btn-esqueci:hover { color: var(--acento); border: none; }

/* Confirmação de que o link de reset foi enviado */
.login-status {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--acento-palido);
}

/* ── Conta (sair) ── */

.header-com-acao { position: relative; }

.btn-sair {
  position: absolute;
  top: 4px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--neutro) 80%, transparent);
  transition: color 0.25s ease;
}

.btn-sair:hover { color: var(--tinta); }

/* ── Prática (Fase 3) ── */

.player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.player-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  background: var(--fundo-medio);
  color: var(--acento-texto, var(--acento));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.player-btn:hover { transform: scale(1.04); border-color: var(--acento); }
.player-btn svg { width: 22px; height: 22px; }

.player-barra {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--neutro) 25%, transparent);
  cursor: pointer;
  overflow: hidden;
}

.player-progresso {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--acento) 60%, #fff));
  transition: width 0.2s linear;
}

.player-tempo {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--neutro);
  min-width: 78px;
  text-align: right;
}

#btn-meditei { margin: 22px 0; }
#btn-meditei:disabled { opacity: 0.75; cursor: default; }

.semana {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 16px;
}

.dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1;
}

.dia-ponto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--neutro) 45%, transparent);
  background: transparent;
  transition: background 0.25s ease;
}

.dia.feito .dia-ponto {
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 8px color-mix(in srgb, var(--acento) 40%, transparent);
}

.dia-letra {
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--neutro);
}

/* ── Jornada (Fase 4) ── */

.grafico-arco {
  width: 100%;
  height: auto;
  margin-top: 14px;
  display: block;
}

.linha-neutra {
  stroke: color-mix(in srgb, var(--neutro) 30%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.linha-arco {
  stroke: var(--acento);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ponto-sonho { fill: var(--fundo-medio); stroke: var(--acento); stroke-width: 1.4; }
.ponto-pratica { fill: var(--verde, #7A9E8A); }

.grafico-legenda {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--neutro);
}

.legenda-pratica { color: var(--verde, #7A9E8A); text-transform: none; letter-spacing: 0.06em; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--tinta);
  background: color-mix(in srgb, var(--fundo-medio) 40%, transparent);
}

.chip em {
  font-style: normal;
  color: var(--neutro);
  margin-left: 6px;
  font-size: 0.68rem;
}

.chip-arq { border-color: color-mix(in srgb, var(--verde, #7A9E8A) 45%, transparent); }

/* chips da jornada são botões: levam pro histórico daquele símbolo */
button.chip { cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
button.chip:hover,
button.chip:focus-visible { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
button.chip-arq:hover,
button.chip-arq:focus-visible { border-color: var(--verde, #7A9E8A); background: color-mix(in srgb, var(--verde, #7A9E8A) 12%, transparent); }

.chip-dica {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--neutro);
  letter-spacing: 0.02em;
}

/* ── Mapa de individuação ─────────────────────────────────────────
   A roda das figuras e o movimento delas no tempo. Silêncio visual:
   ouro só onde a figura já veio, contorno apagado onde ainda não. */

.card-mapa .card-text { margin-top: 2px; }

.mapa-svg {
  width: 100%;
  height: auto;
  margin: 16px 0 4px;
  display: block;
  overflow: visible;
}

.mapa-orbita {
  fill: none;
  stroke: color-mix(in srgb, var(--neutro) 14%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.mapa-fio {
  stroke: var(--acento);
  stroke-width: 1;
  stroke-linecap: round;
}

.mapa-self-halo {
  fill: color-mix(in srgb, var(--acento) 7%, transparent);
  stroke: color-mix(in srgb, var(--acento) 22%, transparent);
  stroke-width: 1;
}

.mapa-ponto {
  fill: var(--acento);
  stroke: color-mix(in srgb, var(--fundo) 70%, transparent);
  stroke-width: 1.2;
}

.mapa-ponto-self { fill: var(--acento-palido); }

.mapa-ponto-ausente {
  fill: none;
  stroke: color-mix(in srgb, var(--neutro) 38%, transparent);
  stroke-width: 1;
}

/* área de toque generosa por cima do ponto — o alvo visível é pequeno */
.mapa-alvo { fill: transparent; }

.mapa-rotulo {
  font-family: var(--sans);
  font-size: 15px;          /* v23: era 12 — pequeno demais no aparelho */
  letter-spacing: 0.03em;   /* menos espaçamento: a letra maior já dá presença */
  fill: var(--tinta-suave);
  /* contorno na cor do fundo: os fios da constelação passam por trás dos
     nomes, e sem isso o texto some em cima da linha */
  stroke: var(--fundo);
  stroke-width: 2.6px;
  paint-order: stroke fill;
}

.mapa-rotulo-self { font-size: 15.5px; letter-spacing: 0.12em; fill: var(--acento-palido); }
.mapa-rotulo-ausente { fill: color-mix(in srgb, var(--neutro) 45%, transparent); }

.mapa-no { cursor: pointer; }
.mapa-no:hover .mapa-ponto,
.mapa-no:focus-visible .mapa-ponto { fill: var(--acento-palido); r: 9; }
.mapa-no:hover .mapa-rotulo,
.mapa-no:focus-visible .mapa-rotulo { fill: var(--acento-palido); }
.mapa-no:focus { outline: none; }
.mapa-no:focus-visible .mapa-alvo {
  stroke: var(--acento);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* ── As faixas: cada figura no tempo ── */

.faixas { margin-top: 16px; }

.faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 0;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.faixa-nome {
  flex: 0 0 88px;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--tinta-suave);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faixa-trilho {
  position: relative;
  flex: 1;
  height: 14px;
  border-bottom: 1px dashed color-mix(in srgb, var(--neutro) 16%, transparent);
}

.faixa-liga {
  position: absolute;
  bottom: -1px;
  height: 1px;
  background: color-mix(in srgb, var(--acento) 45%, transparent);
}

.faixa-ponto {
  position: absolute;
  bottom: -3.5px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--acento);
}

.faixa-n {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--neutro);
  min-width: 14px;
  text-align: right;
}

.faixa:hover .faixa-nome,
.faixa:focus-visible .faixa-nome { color: var(--acento-palido); }
.faixa:hover .faixa-ponto,
.faixa:focus-visible .faixa-ponto { background: var(--acento-palido); }

/* ── O que mudou ── */

.mapa-movimento {
  list-style: none;
  margin-top: 4px;
}

.mapa-movimento li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.mapa-movimento li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.72rem;
  color: var(--acento);
}

.mapa-movimento strong { font-weight: 400; color: var(--acento-palido); }

.mapa-correlacao {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--neutro) 12%, transparent);
}

.mapa-correlacao strong { font-weight: 400; color: var(--acento-palido); }

/* ── Tags na análise: o símbolo e o arquétipo que ele carrega ── */

.tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-right: 6px;
  vertical-align: baseline;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tag-simbolo {
  color: var(--tinta);
  border-color: color-mix(in srgb, var(--acento) 40%, transparent);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
}

.tag-arq {
  color: var(--verde, #7A9E8A);
  border-color: color-mix(in srgb, var(--verde, #7A9E8A) 40%, transparent);
  background: transparent;
}

.tag-simbolo:hover, .tag-simbolo:focus-visible { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 16%, transparent); }
.tag-arq:hover, .tag-arq:focus-visible { border-color: var(--verde, #7A9E8A); background: color-mix(in srgb, var(--verde, #7A9E8A) 12%, transparent); }

.tag-leitura { display: block; margin-top: 6px; }

/* o tom da noite, ao lado da data, na lista de encontros de uma tag */
.tag-tom {
  margin-left: 8px;
  color: var(--verde, #7A9E8A);
  text-transform: none;
  letter-spacing: 0.04em;
  /* Os rótulos de tom viraram linguagem simples e dois deles têm duas palavras
     ("em pedaços"). Sem isto, a etiqueta divide a linha com a data e quebra no
     meio — sai "em" numa linha e "pedaços" na outra. */
  white-space: nowrap;
}

#tag-conteudo .label-gold { margin: 22px 0 10px; }

.tabbar.oculta { display: none; }

/* ── Navegação inferior ── */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* 5 abas: ícones alinhados no topo, rótulo pode quebrar embaixo */
  gap: clamp(2px, 1.4vw, 18px);
  padding: 10px max(10px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--neutro) 15%, transparent);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 7px;
  max-width: 76px;
  background: none;
  border: none;
  color: var(--neutro);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.25s ease;
}

.tab span { line-height: 1.15; text-align: center; }
.tab svg { width: 22px; height: 22px; }

.tab.active { color: var(--acento-claro); }
.tab:hover { color: var(--tinta); }
.tab.active:hover { color: var(--acento-claro); }

/* ── Movimento reduzido ── */

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

/* ═══════════ v5 · alias, interpretação pessoal, série e privacidade ═══════════ */

/* Texto de apoio abaixo de um campo — explica sem pesar */
.campo-ajuda {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--neutro) 85%, transparent);
}

/* Contador do relato: alinhado à direita, discreto, e só nos últimos 300
   caracteres — antes disso seria uma régua na frente de quem está contando um
   sonho. Vira ouro quando o limite chega, sem alarme vermelho. */
.campo-contador {
  margin-top: 6px;
  text-align: right;
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--neutro) 70%, transparent);
}
.campo-contador.no-limite { color: var(--acento); }

/* ⚠️ `.conta-linha` é display:flex, e uma regra de classe VENCE o display:none
   que o atributo `hidden` traz do navegador — as linhas de cota continuavam
   na tela para quem não tem acesso, dizendo "0 de 10" como se fosse castigo.
   Só apareceu no teste; o atributo estava certo, o CSS é que mandava mais. */
/* (o remendo pontual que existia aqui virou a regra global `[hidden]` no topo) */

/* Aviso de leitura simples: a tela dizendo que esta NÃO é a leitura profunda.
   Discreto de propósito — é informação honesta, não erro. */
.aviso-simples { margin-bottom: 16px; }
.aviso-simples p:not(.label) {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--neutro);
}

/* "Antes de eu falar": a leitura da pessoa vem antes da leitura do app */
.bloco-pessoal { margin-top: 22px; }
.bloco-pessoal .card-text { margin-bottom: 12px; }
.campo-curto { font-size: 1rem; }

/* A leitura de série — o que mudou ao longo do tempo */
.bloco-serie {
  border-left: 2px solid color-mix(in srgb, var(--acento) 45%, transparent);
  padding-left: 16px;
}

/* Atalho discreto pra tela de privacidade */
.btn-privacidade {
  margin-top: 26px;
  font-size: 0.8rem;
  opacity: 0.75;
}
.btn-privacidade:hover { opacity: 1; }

/* ═══════════ v6 · tela Você e dossiê ═══════════ */

/* Cartão que é botão — leva pra outra tela */
.card-link {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card-link:hover {
  border-color: color-mix(in srgb, var(--acento-palido) 55%, transparent);
  transform: translateY(-1px);
}
.card-nota {
  margin-top: 12px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--acento);
}

.btn-sair-conta { margin-top: 30px; }

/* Dados da conta (e-mail, nascimento) em Meu perfil */
.conta-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--neutro) 14%, transparent);
  font-size: 0.95rem;
}
.conta-linha:first-of-type { border-top: none; }
.conta-rotulo {
  font-family: var(--sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--neutro);
  flex-shrink: 0;
}
.conta-valor { color: var(--tinta-suave); text-align: right; word-break: break-word; }

/* Cabeçalho do cartão de conta: título + botão editar */
.conta-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.conta-topo .label { margin-bottom: 0; }
.btn-editar {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--acento);
  transition: color 0.2s ease;
}
.btn-editar:hover { color: var(--acento-palido); }

/* E-mail no modo edição: mostrado, mas travado */
.conta-fixo {
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--neutro) 28%, transparent);
  background: color-mix(in srgb, var(--fundo-medio) 18%, transparent);
  color: var(--neutro);
  font-size: 0.95rem;
  word-break: break-word;
}

/* Botões de gênero */
.genero-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.genero-btn { flex: 0 0 auto; }
.genero-btn.escolhido {
  border-color: var(--acento);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, transparent);
}
#conta-edicao .campo-rotulo:first-child { margin-top: 4px; }
#conta-edicao .confirm-acoes { margin-top: 20px; justify-content: flex-start; }
#conta-edicao .btn-primario { margin-top: 0; width: auto; padding: 14px 30px; }

/* Zona de perigo — apagar conta. Discreta, mas inconfundível. */
.card-perigo {
  margin-top: 20px;
  border-color: rgba(160, 71, 47, 0.28);
  background: color-mix(in srgb, #A0472F 5%, transparent);
}
.label-perigo { color: #A0472F; }
/* Só o botão aparece; o texto pesado e a confirmação surgem no clique */
.btn-abrir-excluir { display: block; width: 100%; }
.card-perigo #confirm-excluir .card-text:first-child { margin-top: 4px; }
#confirm-excluir { margin-top: 16px; }
#confirm-excluir .campo-login { margin: 12px 0 0; text-align: center; letter-spacing: 0.3em; text-transform: uppercase; }

/* Formulário de trocar senha — revela abaixo do botão */
.btn-abrir-senha { margin-top: 6px; }
.form-senha { margin-top: 8px; }
.form-senha .campo-rotulo:first-child { margin-top: 14px; }

/* As 4 polaridades junguianas */
.tipo-bloco { margin-top: 22px; }
.tipo-bloco .analise-linha { margin-bottom: 10px; }
.tipo-btn { flex: 1; }
.tipo-btn.escolhido {
  border-color: var(--acento);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, transparent);
}

/* Campos do dossiê respiram mais que os do login */
#tela-dossie .campo-rotulo { margin-top: 22px; }

/* ═══════════ v7 · o orbe da marca vira o orbe da pessoa ═══════════ */

.orbe-perfil {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
}

/* Fica ACIMA do degradê que se move dentro do orbe (o ::before) */
.orbe-inicial {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--tinta-orbe);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--fundo) 65%, transparent);
}

/* ═══════════ v8 · a leitura corrida (o coração da análise) ═══════════ */

.bloco-leitura { margin-top: 4px; }

.analise-paragrafo {
  font-family: var(--leitura);
  font-weight: var(--leitura-peso);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--tinta);
  margin-bottom: 16px;
}
.analise-paragrafo:last-child { margin-bottom: 0; }

/* A primeira frase abre a leitura com um pouco mais de presença */
.bloco-leitura .analise-paragrafo:first-child::first-line {
  letter-spacing: 0.01em;
}

/* Botão trabalhando — desabilitado enquanto a leitura acontece */
.btn-primario:disabled {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}

/* ═══════════ v22 · conversa com uma figura arquetípica ═══════════
   Sem balão de chat: balão é linguagem de mensageiro, e o app inteiro é
   construído em cima de silêncio visual. A fala da figura se separa por um
   FILETE dourado à esquerda (borda, não caixa — o caminho que sobrou depois
   que a cor de fundo foi recusada), e a fala da pessoa por alinhamento e
   respiro. Nenhuma superfície nova, nenhuma cor de fundo. */

#conversa-falas { margin-top: 4px; }

.fala {
  margin-bottom: 22px;
  font-family: var(--leitura);
  font-weight: var(--leitura-peso);
  font-size: 1rem;
  line-height: 1.7;
}

/* A figura: filete dourado à esquerda, texto escuro e legível.
   NÃO usa .quote (itálico dourado) de propósito — aquilo é a voz do app
   comentando, e aqui quem fala é uma figura dos sonhos dela. */
.fala-figura {
  border-left: 2px solid color-mix(in srgb, var(--acento) 55%, transparent);
  padding-left: 18px;
  color: var(--tinta);
}

/* A pessoa: sem borda, recuada e mais leve — some do caminho, como uma
   pergunta feita em voz baixa. */
.fala-pessoa {
  margin-left: auto;
  max-width: 86%;
  text-align: right;
  color: var(--neutro);
  font-size: 0.95rem;
}

/* Quem falou, em cima da primeira fala de cada bloco */
.fala .label { margin-bottom: 6px; }
.fala-pessoa .label { text-align: right; }

/* Enquanto a figura pensa */
.fala-pensando {
  border-left: 2px solid color-mix(in srgb, var(--acento) 30%, transparent);
  padding-left: 18px;
  color: color-mix(in srgb, var(--neutro) 70%, transparent);
  font-style: normal;
}
.fala-pensando span {
  display: inline-block;
  animation: respira 1.6s ease-in-out infinite;
}
@keyframes respira { 0%, 100% { opacity: 0.35 } 50% { opacity: 1 } }

.conversa-escrever { margin-top: 30px; }
.campo-conversa { font-size: 0.98rem; }
.conversa-escrever .btn-primario { margin-top: 14px; }

.conversa-restantes {
  margin-top: 12px;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--neutro) 70%, transparent);
}

/* Fim de conversa / limite: o app avisa sem parecer cobrança de loja */
.conversa-fim {
  margin-top: 26px;
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius: 18px;
  padding: 20px 22px;
  text-align: center;
}
.conversa-fim p { font-size: 0.9rem; color: var(--tinta-suave); line-height: 1.6; }
.conversa-fim .label { margin-bottom: 8px; }

/* Botão que abre a conversa, na tela da figura */
.btn-conversar { margin-top: 4px; }

/* ═══════════════════════════════════════════════
   GUIA DO PRIMEIRO ACESSO
   Overlay, não tela: cobre o app inteiro (inclusive o tabbar, que é fixo e
   sem z-index próprio) e não entra na pilha de navegação.
   O fundo repete o gradiente do body de propósito — o guia é o app falando,
   não uma caixa de sistema por cima dele.
   ═══════════════════════════════════════════════ */

.guia {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) clamp(20px, 5vw, 40px)
           max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background:
    radial-gradient(90% 70% at 88% -12%, rgba(226, 172, 88, 0.40) 0%, transparent 58%),
    radial-gradient(75% 60% at -12% 18%, rgba(150, 188, 166, 0.42) 0%, transparent 60%),
    radial-gradient(85% 65% at 112% 88%, rgba(163, 185, 205, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, #F9F1DF 0%, var(--fundo) 48%, #EFECE7 100%);
}

.guia-caixa {
  width: 100%;
  max-width: 460px;
  margin: auto;   /* centra vertical quando cabe, e deixa rolar quando não cabe */
  animation: breathe-in 0.5s ease both;
}

.guia-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

/* O símbolo do passo. Reaproveita os ícones do tabbar: a pessoa já vê aqui
   o desenho que vai procurar no rodapé depois. */
.guia-figura {
  width: 68px;
  height: 68px;
  margin-bottom: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento-palido) 32%, transparent);
  background: color-mix(in srgb, var(--fundo-medio) 70%, transparent);
  color: var(--acento);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--sombra-orbe) 60%, transparent);
}
.guia-figura svg { width: 30px; height: 30px; }

.guia h1 { margin-top: 12px; }

.guia-texto {
  margin-top: 18px;
  font-family: var(--leitura);
  font-weight: var(--leitura-peso);
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--tinta-suave);
}

.guia-pontos {
  display: flex;
  gap: 8px;
  margin: 40px 0 26px;
}
.guia-pontos i {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--neutro) 22%, transparent);
  transition: background 0.3s ease;
}
.guia-pontos i.aceso { background: var(--acento); }

.guia-acoes { display: grid; gap: 10px; }

/* A chamada do reflexo interior dentro do "Ainda sem leitura". Separada por
   um fio para não colar no aviso do botão: são dois assuntos (quanto demora
   a leitura × o que a deixa melhor). */
.chamada-dossie {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--neutro) 14%, transparent);
}
.chamada-dossie .btn-fantasma { margin-top: 12px; }

/* ═══════════════════════════════════════════════
   SPLASH — a tela de abertura
   Mesma composição da entrada (orbe do Q, marca, lema), para que a passagem
   da splash para o login seja continuidade e não corte.
   ⚠️ Nasce VISÍVEL: é o estado padrão, e o JS só a tira. O contrário
   (nascer escondida e o JS mostrar) devolveria a tela em branco justo quando
   o script demora, que é exatamente o caso que ela existe para cobrir.
   ═══════════════════════════════════════════════ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 80;              /* acima do guia (60) e do tabbar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background:
    radial-gradient(90% 70% at 88% -12%, rgba(226, 172, 88, 0.40) 0%, transparent 58%),
    radial-gradient(75% 60% at -12% 18%, rgba(150, 188, 166, 0.42) 0%, transparent 60%),
    radial-gradient(85% 65% at 112% 88%, rgba(163, 185, 205, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, #F9F1DF 0%, var(--fundo) 48%, #EFECE7 100%);
  transition: opacity 0.42s ease;
}

/* A saída é só opacidade: sem deslocamento, para o conteúdo que já está
   desenhado por baixo não parecer que "chegou empurrando". */
.splash.saindo { opacity: 0; pointer-events: none; }

.splash-orbe {
  margin-bottom: 30px;
  animation: splash-respira 3.2s ease-in-out infinite alternate;
}

.splash-lema {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6.5vw, 2.2rem);
  line-height: 1.2;
  color: var(--tinta);
}

/* Respiro lento, não giro de carregamento. Barra de progresso e spinner
   dizem "espere"; isto diz "chegou". */
@keyframes splash-respira {
  from { transform: scale(1); }
  to   { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-orbe { animation: none; }
}

/* ── As duas saídas do registro (3/ago) ──
   O "guardar e pedir a leitura" tem a mesma largura do primário e fica logo
   abaixo dele, mas de contorno: a hierarquia é o produto. Guardar é a ação de
   todo dia e é ilimitada; a leitura é o recurso contado, e não pode competir
   pelo dedo de quem está com pressa às 7h da manhã. */
.salvar-alternativa { margin-top: 12px; }

.salvar-alternativa .btn-fantasma {
  display: block;
  width: 100%;
  padding: 15px;
}

.salvar-alternativa .campo-ajuda {
  margin-top: 10px;
  text-align: center;
}

/* O explicador do diário, no instante da escolha. Fica logo acima dos dois
   botões, com respiro extra em cima para não colar no bloco anterior.
   Recolhido por padrão: reaproveita o `.nota-cabeca` do bloco de nota da
   conversa, então a linha clicável já se parece com as outras do app. */
.como-funciona { margin-top: 26px; }
/* Sem o resumo no meio, o `.nota-cabeca` precisa empurrar a seta para a
   direita sozinho — senão ela cola no fim do título. */
.como-funciona .nota-cabeca { justify-content: space-between; }
.como-funciona .card-text + .card-text { margin-top: 12px; }