/* Aponteaí — folha compartilhada por todas as telas.
   Tokens primeiro, componentes depois. Cor nenhuma é escrita direto num
   componente: tudo sai daqui, senão o tema escuro quebra em silêncio. */

/* O atributo `hidden` tem de ganhar de qualquer componente.
   O navegador aplica `[hidden]{display:none}` na folha DELE, e qualquer regra
   nossa vence — foi assim que um `display:grid` num botão manteve o microfone
   desenhado mesmo com `hidden = true`. O sintoma é cruel: o JavaScript está
   certo, o atributo está no elemento, e a tela mostra assim mesmo.
   O arquivo tem !important em três lugares, e cada um vence algo que não é
   nosso: a folha do navegador (aqui), a preferência de menos movimento, e um
   `style` embutido no HTML que classe nenhuma alcança. Nenhum deles existe
   para vencer outra regra deste arquivo — se isso um dia for preciso, o certo
   é acertar a ordem, não subir o peso. */
[hidden]{display:none !important}

:root{
  --paper:#FBFCFD;
  --surface:#F1F4F8;
  --surface-2:#E7ECF3;
  --line:#D8E0EA;
  --line-soft:#E8EDF3;
  --ink:#141922;
  --ink-2:#3D4757;
  --muted:#6B7789;
  --azul:#2C6FDB;
  --azul-forte:#1F58B8;
  --azul-fraco:#E4EDFC;
  --verde:#12805F;
  --verde-fraco:#DEF2EB;
  --ambar:#C88A06;
  --vermelho:#CC4136;
  --vermelho-fraco:#FBE6E4;
  --sombra:0 1px 2px rgba(20,25,34,.05), 0 12px 32px -20px rgba(20,25,34,.3);
  --raio:10px;
  --display:"Bahnschrift","DIN Alternate","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  /* As fontes de emoji entram ANTES da genérica. A ordem importa: `sans-serif`
     é terminal na prática, então emoji listado depois dela nunca é consultado —
     e é assim que 🍽️ ✈️ ❤️ escorregam para o desenho monocromático em vez do
     colorido. A substituição é por caractere, não por texto: o corpo continua
     em Segoe UI e só o emoji cai na fonte de emoji. */
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Android Emoji";
  --texto:"Segoe UI",system-ui,-apple-system,var(--emoji),sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --paper:#0F131A; --surface:#161C25; --surface-2:#1D2531;
    --line:#28323F; --line-soft:#1E2733;
    --ink:#E7EDF5; --ink-2:#BCC7D6; --muted:#8A99AC;
    --azul:#6FA3F7; --azul-forte:#8CB8FF; --azul-fraco:#16243C;
    --verde:#43B792; --verde-fraco:#122B23;
    --ambar:#E5B03F;
    --vermelho:#EE7A6F; --vermelho-fraco:#331A18;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -22px rgba(0,0,0,.9);
  }
}
:root[data-tema="escuro"]{
  --paper:#0F131A; --surface:#161C25; --surface-2:#1D2531;
  --line:#28323F; --line-soft:#1E2733;
  --ink:#E7EDF5; --ink-2:#BCC7D6; --muted:#8A99AC;
  --azul:#6FA3F7; --azul-forte:#8CB8FF; --azul-fraco:#16243C;
  --verde:#43B792; --verde-fraco:#122B23;
  --ambar:#E5B03F;
  --vermelho:#EE7A6F; --vermelho-fraco:#331A18;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -22px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html,body{height:100%}

/* O retângulo cinza que o Android pinta sobre qualquer coisa tocável, ~300ms
   depois do toque. Ele é o que mais denuncia "isto é um site" num aplicativo —
   o estado de toque aqui é dado pelo :active de cada componente, que responde
   na hora e usa a cor do tema. */
a,button,textarea,input,select,label{-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--texto);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ── página de acesso: cartão centralizado ───────────────────────────── */
.acesso{min-height:100%;display:grid;place-items:center;padding:32px 20px}
.cartao{
  width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;
  padding:34px 32px;box-shadow:var(--sombra);
}
/* O logotipo está definido de uma vez só, no fim do arquivo. Aqui ficam apenas
   os tamanhos por contexto — a marca do cartão de acesso é a maior do produto,
   porque ali ela é a única coisa na tela que diz onde a pessoa está. */
/* `flex`, não `inline-flex`: no cartão a marca é um bloco próprio, com o
   subtítulo embaixo. Inline-level deixaria a linha-base do texto governando o
   espaçamento e o respiro sairia diferente do resto do cartão. */
.cartao .marca{display:flex;font-size:clamp(26px, 7vw, 31px);margin-bottom:4px}
.subtitulo{margin:0 0 26px;color:var(--muted);font-size:14.5px}
h1{
  font-family:var(--display);font-stretch:86%;font-weight:700;
  font-size:21px;margin:0 0 6px;color:var(--ink);text-wrap:balance;
}

/* ── campos ──────────────────────────────────────────────────────────── */
.campo{display:block;margin-bottom:16px}
.campo > span{
  display:block;font-size:13px;font-weight:600;color:var(--ink-2);
  margin-bottom:5px;letter-spacing:.01em;
}
.campo input{
  width:100%;padding:11px 13px;font-size:15px;font-family:inherit;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.campo input:focus{
  outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}
.campo input:disabled{opacity:.6;cursor:not-allowed}
.dica{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}

/* ── botões ──────────────────────────────────────────────────────────── */
.botao{
  width:100%;padding:12px 18px;border:0;border-radius:8px;
  background:var(--azul);color:#fff;
  font-family:var(--display);font-stretch:90%;font-size:15.5px;font-weight:600;
  cursor:pointer;transition:background .12s ease;
}
.botao:hover:not(:disabled){background:var(--azul-forte)}
.botao:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.botao:disabled{opacity:.6;cursor:progress}
.botao.secundario{
  background:transparent;color:var(--azul);
  border:1px solid var(--line);
}
.botao.secundario:hover:not(:disabled){background:var(--azul-fraco)}

/* ── mensagens ───────────────────────────────────────────────────────── */
.aviso{
  padding:11px 14px;border-radius:8px;font-size:14px;margin-bottom:18px;
  border-left:3px solid;
}
.aviso.erro{background:var(--vermelho-fraco);border-color:var(--vermelho);color:var(--ink)}
.aviso.bom{background:var(--verde-fraco);border-color:var(--verde);color:var(--ink)}
.aviso.info{background:var(--azul-fraco);border-color:var(--azul);color:var(--ink)}
.aviso a{color:var(--azul);font-weight:600}

.rodape{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--muted);text-align:center;
}
.rodape a{color:var(--azul);text-decoration:none;font-weight:600}
.rodape a:hover,.rodape a:focus-visible{text-decoration:underline}

.centro{text-align:center}
.some{display:none}

/* ── link do e-mail em desenvolvimento ───────────────────────────────── */
.link-dev{
  margin-top:18px;padding:12px 14px;border:1px dashed var(--line);
  border-radius:8px;background:var(--paper);font-size:12.5px;color:var(--muted);
}
.link-dev a{color:var(--azul);word-break:break-all}
.link-dev b{display:block;color:var(--ambar);margin-bottom:4px;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em}

/* ══════════════════════════════════════════════════════════════════════
   CASCA DO APLICATIVO — barra de navegação e área de conteúdo
   ══════════════════════════════════════════════════════════════════════ */
.barra{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.barra-in{
  /* LARGURA CHEIA E UMA LINHA SÓ. O teto de 1000px somado a `flex-wrap:wrap`
     era a causa do menu quebrado: a linha inteira precisava de 1077px e o
     contêiner dava 1000. E quebrava igual numa tela de 1920px, porque o
     limite era do contêiner, não do visor — alargar a janela não ajudava em
     nada. Agora a barra leva só a marca e você, que cabem em qualquer
     largura. */
  max-width:none;margin:0;padding:10px 20px;min-height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.barra .marca{font-size:21px;margin:0;flex:none}
.eu{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);flex:none}
/* A inicial num círculo. Não é enfeite: sem ela o canto direito é um nome
   solto ao lado de um botão, e o par se perde no meio da barra. Com ela o
   bloco vira uma peça só — que é como todo aplicativo profissional resolve
   esse canto. */
.eu-ini{
  width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--azul-fraco);color:var(--azul);
  font-family:var(--display);font-stretch:92%;font-size:13px;font-weight:700;
}
.eu-nome{font-weight:600;color:var(--ink)}
.eu button{
  background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;
  padding:5px 9px;border-radius:6px;
}
.eu button:hover{background:var(--surface);color:var(--vermelho)}

.conteudo{max-width:1000px;margin:0 auto;padding:26px 20px 80px}
.cabeca{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:22px}
.cabeca h1{font-size:26px;margin:0}
.cabeca .sub{color:var(--muted);font-size:14px;margin:2px 0 0}

select.mes{
  font-family:var(--display);font-stretch:92%;font-size:14.5px;font-weight:600;
  padding:8px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;
}
select.mes:focus-visible{outline:2px solid var(--azul);outline-offset:1px}

/* ── blocos ──────────────────────────────────────────────────────────── */
.bloco{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--raio);padding:20px 22px;margin-bottom:16px;
}
.bloco > h2{
  font-family:var(--display);font-stretch:88%;font-size:16px;font-weight:700;
  margin:0 0 16px;color:var(--ink);
}
.grade{display:grid;gap:16px}
.grade.tres{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grade.duas{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Os números do painel são QUATRO quando há recorrência por vencer, e a faixa
   de 200px do `.tres` só deixa três caberem na coluna útil de 766px que sobra
   ao lado da lateral. 168px acomoda os quatro sem apertar o valor, e no
   celular continua caindo para uma coluna. */
.grade.numeros{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}

/* ── números grandes ─────────────────────────────────────────────────── */
.numero{padding:16px 18px;border-radius:var(--raio);background:var(--surface);
  border:1px solid var(--line)}
.numero .rotulo{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:600;margin-bottom:6px}
.numero .valor{font-family:var(--display);font-stretch:86%;font-weight:700;
  font-size:27px;line-height:1.1;font-variant-numeric:tabular-nums}
.numero .nota{font-size:12.5px;color:var(--muted);margin-top:4px}
.positivo{color:var(--verde)} .negativo{color:var(--vermelho)}

/* ── barra de meta ───────────────────────────────────────────────────── */
.meta{margin-bottom:18px}
.meta:last-child{margin-bottom:0}
.meta-topo{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:6px}
.meta-nome{font-family:var(--display);font-stretch:90%;font-weight:600;font-size:14.5px}
.meta-num{font-family:var(--display);font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:none}
.trilho{height:9px;border-radius:5px;background:var(--surface-2);
  overflow:hidden;border:1px solid var(--line-soft)}
.enche{height:100%;border-radius:5px;transition:width .3s ease}
.meta-pe{font-size:13px;margin-top:5px;font-family:var(--display);font-stretch:92%}

.f-azul{color:var(--azul)} .f-ambar{color:var(--ambar)}
.f-laranja{color:var(--laranja,#DB6A1E)} .f-vermelho{color:var(--vermelho)}
.b-azul{background:var(--azul)} .b-ambar{background:var(--ambar)}
.b-laranja{background:var(--laranja,#DB6A1E)} .b-vermelho{background:var(--vermelho)}
:root{--laranja:#DB6A1E}
@media (prefers-color-scheme: dark){:root:not([data-tema="claro"]){--laranja:#EE8B4A}}
:root[data-tema="escuro"]{--laranja:#EE8B4A}

/* ── lista de lançamentos ────────────────────────────────────────────── */
.lista{list-style:none;margin:0;padding:0}
.item{
  display:flex;align-items:center;gap:13px;padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.item:last-child{border-bottom:0}
.pinta{width:34px;height:34px;border-radius:9px;flex:none;display:grid;
  place-items:center;font-size:16px;background:var(--surface-2)}
/* `display:block` nos dois não é detalhe de gosto: são <span>, e span é inline —
   sem isto o nome e o subtítulo correm na mesma linha, colados
   ("Prestação de Serviçotodo mês"). E o `text-overflow:ellipsis` abaixo também
   só vale em caixa de bloco, então o corte com reticências nunca funcionou. */
.item .meio{flex:1;min-width:0;display:block}
.item .desc{display:block;font-weight:600;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .abaixo{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Quem lançou. Escuro no meio de uma linha cinza porque é o que se procura
   quando duas pessoas dividem a conta — e só aparece quando são duas. */
.item .abaixo .quem{color:var(--ink);font-weight:600}
.item .dinheiro{font-family:var(--display);font-stretch:88%;font-weight:700;
  font-size:15px;font-variant-numeric:tabular-nums;flex:none}
.item .acoes{display:flex;gap:2px;flex:none}
.item .acoes button{background:none;border:0;cursor:pointer;color:var(--muted);
  padding:5px 7px;border-radius:6px;font-size:13px}
.item .acoes button:hover{background:var(--surface-2);color:var(--ink)}
.item .acoes button.perigo:hover{background:var(--vermelho-fraco);color:var(--vermelho)}

.vazio{text-align:center;padding:34px 20px;color:var(--muted);font-size:14.5px}
.vazio b{display:block;color:var(--ink);font-family:var(--display);
  font-stretch:88%;font-size:16px;margin-bottom:5px}

/* ── formulário em linha ─────────────────────────────────────────────── */
.formlinha{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:end}
.formlinha .campo{margin:0}
.formlinha .botao{width:auto}
select.entrada, input.entrada{
  width:100%;padding:11px 13px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
}
select.entrada:focus, input.entrada:focus{
  outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}
.segmento{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.segmento button{
  flex:1;padding:10px;border:0;background:var(--paper);color:var(--muted);
  font-family:var(--display);font-stretch:92%;font-size:14px;font-weight:600;cursor:pointer;
}
.segmento button[aria-pressed="true"]{background:var(--azul);color:#fff}

.pilula{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;background:var(--surface-2);color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════════
   CONVERSA — a tela principal do produto
   ══════════════════════════════════════════════════════════════════════ */
.conversa{
  display:flex;flex-direction:column;
  /* `dvh`, não `vh`. No celular a barra de endereço some ao rolar, e `100vh`
     conta a altura COM ela — o composer fica escondido atrás da barra e a
     pessoa não acha o botão de enviar. `dvh` acompanha a altura real.
     A altura da barra de navegação é medida por JS (`--barra-h`), porque no
     mobile ela quebra em mais de uma linha e o 57px fixo de antes deixava a
     conversa maior que a tela. */
  height:calc(100dvh - var(--barra-h, 57px));
  max-width:720px;margin:0 auto;width:100%;
}
.fio{
  flex:1;min-height:0;overflow-y:auto;padding:16px 14px 10px;
  display:flex;flex-direction:column;gap:2px;
  /* Sem isto, rolar além do topo do fio arrasta a PÁGINA junto e no Android
     dispara o "puxar para atualizar" — o gesto de ler o histórico recarregaria
     o app. É a diferença entre parecer aplicativo e parecer página. */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.dia{
  align-self:center;font-family:var(--display);font-stretch:92%;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);
  padding:3px 12px;border-radius:999px;margin:10px 0 2px;
}
.balao{
  max-width:80%;padding:7px 11px 6px;border-radius:16px;
  font-size:15px;line-height:1.42;
  white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 1px 1px rgba(20,25,34,.06);
  /* Entrada curta e discreta. O balão nasce onde vai ficar, só um pouco menor:
     animar posição faria a lista inteira parecer escorregar. */
  animation:balao-entra .16s ease-out;
  transform-origin:bottom;
}
@keyframes balao-entra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* AGRUPAMENTO — o que dá o ritmo de mensageiro.
   Mensagens seguidas da mesma pessoa ficam coladas (2px do gap) e só a ÚLTIMA
   do bloco tem o canto cortado, que é o "rabinho". Sem isso, cinco mensagens
   seguidas viram cinco blocos soltos e a conversa perde o fio. */
.balao.minha{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:5px}
.balao.dele{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  border-bottom-left-radius:5px}
.balao.minha.agrupado{border-bottom-right-radius:16px}
.balao.dele.agrupado{border-bottom-left-radius:16px}
.balao.comeca-bloco{margin-top:8px}

.balao .hora{
  display:block;font-size:10.5px;opacity:.6;margin-top:1px;
  font-variant-numeric:tabular-nums;line-height:1.3;
}
.balao.minha .hora{text-align:right}
.balao.enviando{opacity:.6}
.balao.enviando .hora::after{content:" ·";animation:pulsa 1s infinite}
@keyframes pulsa{50%{opacity:.2}}

/* cartão de lançamento dentro da conversa */
.cartao-lanc{
  align-self:flex-start;max-width:76%;width:100%;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--vermelho);border-radius:10px;padding:11px 14px;
}
.cartao-lanc.receita{border-left-color:var(--verde)}
.cartao-lanc .topo{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cartao-lanc .desc{font-family:var(--display);font-stretch:90%;font-weight:600;font-size:15px}
.cartao-lanc .valor{
  font-family:var(--display);font-stretch:88%;font-weight:700;font-size:16px;
  color:var(--vermelho);font-variant-numeric:tabular-nums;flex:none;
}
.cartao-lanc.receita .valor{color:var(--verde)}
/* Compromisso: mesmo cartão, outro filete. Vermelho e verde já querem dizer
   dinheiro saindo e entrando; azul é o que sobra para dizer "isto não é
   dinheiro, é hora marcada" sem que ninguém precise ler para saber. */
.cartao-lanc.compromisso{border-left-color:var(--azul)}
/* O calendário, do mesmo desenho do item Agenda no menu. `flex:none` para ele
   não encolher quando o título é longo: um ícone espremido a 9px deixa de ser
   reconhecível, e reconhecer sem ler é a única coisa que ele faz. */
/* O ícone do assunto, num disco. O disco existe para o emoji ter uma base:
   solto no meio do texto ele fica com peso e altura imprevisíveis, e cada
   emoji desalinha de um jeito diferente. */
.cartao-lanc .ico-agenda{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  align-self:center;font-size:16px;line-height:1;border-radius:9px;
  background:var(--azul-fraco);
}
.cartao-lanc.compromisso .topo{gap:8px}
.cartao-lanc.compromisso .desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao-lanc.compromisso .valor{color:var(--azul)}
.cartao-lanc .ver-agenda{
  flex:1;font-size:13px;color:var(--azul);text-decoration:none;font-weight:600;
}
.cartao-lanc .ver-agenda:hover{text-decoration:underline}
.cartao-lanc .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.cartao-lanc .troca{display:flex;gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap}
.cartao-lanc select{
  font:inherit;font-size:13px;padding:5px 8px;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
}
/* Lápis e lixeira, em ícone.
   Duas palavras ao lado do seletor de categoria fariam três controles de texto
   competindo na mesma linha, num cartão que ocupa 76% da largura do celular. Os
   dois desenhos dizem o mesmo em 34px, e ninguém precisa aprendê-los. */
.cartao-lanc .lanc-acoes{display:flex;gap:2px;margin-left:auto;flex:none}
.cartao-lanc .icone-acao{
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  background:none;border:0;border-radius:8px;cursor:pointer;color:var(--muted);
  transition:background .12s ease, color .12s ease;
}
.cartao-lanc .icone-acao svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.cartao-lanc .icone-acao:hover{background:var(--surface-2);color:var(--ink)}
.cartao-lanc .icone-acao.perigo:hover{background:var(--vermelho-fraco);color:var(--vermelho)}
.cartao-lanc .icone-acao:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.cartao-lanc .icone-acao:disabled{opacity:.45;cursor:default}
@media (pointer:coarse){
  .cartao-lanc .icone-acao{width:44px;height:44px}
}

/* Apagado: o cartão fica, esmaecido e riscado no valor. Sumir de repente deixa
   um buraco onde havia uma linha, e quem rolar de volta não entende o que
   aconteceu — a mensagem que gerou o lançamento continua ali em cima. */
.cartao-lanc.apagado{opacity:.5;border-left-color:var(--line)}
.cartao-lanc.apagado .valor{text-decoration:line-through}
.cartao-lanc.apagado .desc{text-decoration:line-through}
/* A barra de meta morava aqui, embaixo de cada cartão. Saiu: eram três blocos
   empilhados por gasto — balão, cartão, barra — numa tela onde cabem uns
   quatro. O que ela dizia virou uma frase na resposta, escrita pelo servidor
   com o total já somado (`fraseDaMeta`, em api/msg.js). A barra continua em
   Metas, no Painel e no relatório, que é onde se vai olhar meta de propósito. */

/* barra de digitação */
.digitar{
  border-top:1px solid var(--line);background:var(--paper);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
}
.digitar form{display:flex;gap:8px;align-items:flex-end}

/* A cápsula: um campo só, com a câmera dentro dele. Agrupar o anexo com o texto
   diz que os dois são a MESMA coisa — jeitos de compor a mensagem — e deixa a
   ação de enviar sozinha do outro lado, que é o que ela é. */
.capsula{
  flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:3px 4px 3px 5px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.capsula:focus-within{
  border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 16%, transparent);
}
.digitar textarea{
  flex:1;min-width:0;resize:none;font:inherit;
  /* 16px não é escolha estética: abaixo disso o Safari do iPhone dá zoom ao
     focar o campo, e o layout inteiro desloca de lado. */
  font-size:16px;line-height:1.4;
  padding:9px 8px 9px 2px;max-height:130px;
  color:var(--ink);background:transparent;border:0;outline:none;
}
.digitar textarea::placeholder{color:var(--muted)}

/* Ícones em traço, herdando a cor do texto ao redor: um SVG com currentColor
   acompanha o tema escuro sem nenhuma regra a mais. */
.digitar svg{
  width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.dentro{
  flex:none;width:38px;height:38px;border:0;background:transparent;
  color:var(--muted);border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.dentro:hover{color:var(--azul)}
.dentro:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.dentro:disabled{opacity:.4;cursor:default}

/* O botão único. 46px porque é o alvo principal da tela e o polegar não mira
   com precisão — 44px é o mínimo recomendado de acessibilidade. */
.acao{
  flex:none;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--azul);color:#fff;display:grid;place-items:center;padding:0;
  transition:background .12s ease, transform .12s ease;
}
.acao:hover:not(:disabled){background:var(--azul-forte)}
.acao:active:not(:disabled){transform:scale(.94)}
.acao:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.acao:disabled{opacity:.45;cursor:default}

/* A troca de papel: os dois ícones vivem no HTML e o atributo decide qual
   aparece. Sem criar nem destruir elemento, a troca é instantânea e o botão
   não pisca nem muda de lugar sob o dedo. */
.acao .i-enviar{display:none;fill:currentColor;stroke:none}
.acao[data-modo="enviar"] .i-microfone{display:none}
.acao[data-modo="enviar"] .i-enviar{display:block}
.dica-chat{
  font-size:12px;color:var(--muted);text-align:center;margin:8px 0 0;
}

/* três pontinhos enquanto a IA pensa */
.pensando{
  align-self:flex-start;display:flex;gap:4px;padding:13px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  border-bottom-left-radius:4px;
}
.pensando i{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:pulo 1.3s infinite ease-in-out;
}
.pensando i:nth-child(2){animation-delay:.16s}
.pensando i:nth-child(3){animation-delay:.32s}
@keyframes pulo{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.abertura{
  margin:auto;text-align:center;max-width:400px;padding:24px;color:var(--muted);
}
.abertura b{
  display:block;font-family:var(--display);font-stretch:86%;font-size:19px;
  color:var(--ink);margin-bottom:8px;
}
.abertura .exemplos{
  display:flex;flex-direction:column;gap:7px;margin-top:18px;
}
.abertura .exemplos button{
  font:inherit;font-size:14px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;color:var(--ink-2);
}
.abertura .exemplos button:hover{border-color:var(--azul);color:var(--azul)}

/* O convite de instalar no iPhone.
   Cartão dentro da conversa, no vocabulário dos outros cartões — porque ele
   chega como as outras coisas chegam aqui, depois de um lançamento dar certo.
   Uma janela modal no mesmo instante pediria compromisso antes de entregar
   valor; um cartão espera ser lido. */
.convite{
  align-self:flex-start;max-width:94%;width:100%;margin:8px 0 2px;
  background:var(--azul-fraco);border:1px solid color-mix(in srgb, var(--azul) 35%, transparent);
  border-radius:14px;border-bottom-left-radius:5px;padding:14px 16px;
}
.convite b{
  display:block;font-family:var(--display);font-stretch:88%;font-size:15.5px;
  color:var(--azul);margin-bottom:6px;
}
.convite p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.passos-instalar{
  margin:0 0 12px;padding-left:20px;font-size:13.5px;line-height:1.75;color:var(--ink-2);
}
.passos-instalar b{display:inline;font-family:inherit;font-size:inherit;color:var(--ink);margin:0}
/* O ícone de compartilhar desenhado em traço, e não o emoji: no iPhone a
   pessoa procura ESTE símbolo na barra, e emoji muda de desenho a cada
   sistema — mostrar um diferente do que ela vê seria mandar procurar errado. */
.ico-compartilhar{display:inline-grid;place-items:center;vertical-align:-4px;margin:0 1px}
.ico-compartilhar svg{
  width:17px;height:17px;fill:none;stroke:var(--azul);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.convite-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.convite-acoes .botao{width:auto;padding:10px 18px;font-size:14.5px}
/* Dentro de um bloco de Conta o cartão perde a moldura: o bloco já é a moldura,
   e duas caixas encaixadas viram degrau visual sem significado. */
.bloco .convite{
  max-width:100%;margin:0;padding:0;
  background:transparent;border:0;border-radius:0;
}
.bloco .convite b{color:var(--ink)}
.convite .agora-nao{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:transparent;border:0;padding:4px 0;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.convite .agora-nao:hover{color:var(--ink)}

/* ── a cortina ao abrir ──────────────────────────────────────────────── */
/* CORTINA, não tranca — e a diferença está no comentário do app.js. Ela
   esconde o app de quem pegou o celular por um minuto; não cifra nada.
   z-index acima de tudo (a gaveta é 80): o ponto é justamente não deixar
   nada aparecer atrás. */
.trava{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:24px;
  background:var(--paper);
}
.trava-in{width:100%;max-width:320px;text-align:center}
.trava-in .marca{justify-content:center;margin-bottom:18px;font-size:26px}
.trava-in p{color:var(--muted);font-size:14.5px;margin:0 0 24px}
.trava-sair{
  display:block;width:100%;margin-top:14px;padding:10px;
  background:none;border:0;cursor:pointer;font:inherit;font-size:13.5px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.trava-sair:hover{color:var(--ink)}
body.travado{overflow:hidden}

/* ── quem mais usa a conta ───────────────────────────────────────────── */
.pessoa{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);
}
.pessoa:last-child{border-bottom:0}
.pessoa .quem{flex:1;min-width:0}
.pessoa b{display:block;font-size:14.5px;font-weight:600}
.pessoa .quem span{
  display:block;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pessoa-acoes{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}

/* O interruptor de permissão diz o ESTADO em palavras, não em cor.
   Um botão azul aceso e outro apagado obriga a lembrar qual é qual — e aqui o
   engano custa o extrato de alguém aparecendo para outra pessoa. */
.pessoa-acoes .chave{
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
}
.pessoa-acoes .chave.ligada{
  border-color:var(--azul);background:var(--azul-fraco);color:var(--azul);
}
.pessoa-acoes .chave:hover{border-color:var(--azul)}
.pessoa-acoes .chave:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.pessoa-acoes .tirar{
  font:inherit;font-size:12.5px;cursor:pointer;
  padding:7px 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);
}
.pessoa-acoes .tirar:hover{background:var(--vermelho-fraco);color:var(--vermelho)}
@media (pointer:coarse){
  .pessoa-acoes .chave,.pessoa-acoes .tirar{min-height:40px}
}

/* ── entrar com o rosto ou a digital ─────────────────────────────────── */
/* O "ou" com um filete de cada lado: diz que são dois caminhos para o mesmo
   lugar, e não um passo depois do outro. */
.ou{
  display:flex;align-items:center;gap:12px;
  margin:18px 0;font-size:12.5px;color:var(--muted);
}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line)}
.botao.secundario .ico-rosto{display:inline-grid;place-items:center;vertical-align:-5px;margin-right:7px}
.ico-rosto svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* A lista de aparelhos, em Conta. */
.aparelho{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);
}
.aparelho:last-child{border-bottom:0}
.aparelho .quem{flex:1;min-width:0}
.aparelho b{display:block;font-size:14.5px;font-weight:600}
.aparelho span{display:block;font-size:12.5px;color:var(--muted)}
.aparelho button{
  flex:none;background:none;border:0;cursor:pointer;color:var(--muted);
  font:inherit;font-size:13px;padding:8px 10px;border-radius:7px;
}
.aparelho button:hover{background:var(--vermelho-fraco);color:var(--vermelho)}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — a única página que o mundo vê
   ══════════════════════════════════════════════════════════════════════ */
.publica{max-width:940px;margin:0 auto;padding:0 22px 90px}
/* DUAS LINHAS SEMPRE, e não uma que quebra quando não cabe.
   Uma fita única com marca, três seções e dois botões precisa de ~600px; abaixo
   disso ela quebrava no ponto que sobrasse, e no celular o "Criar conta" caía
   sozinho na borda direita. Separar por função — em cima o que converte,
   embaixo o que navega — resolve em qualquer largura sem consulta de mídia. */
.topo-publico{display:flex;flex-direction:column;gap:10px;padding:18px 0 14px}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topo-publico .marca{font-size:24px;margin:0;flex:none;min-width:0}
.topo-acoes{display:flex;gap:8px;align-items:center;flex:none}
/* As seções rolam de lado se um dia forem muitas, em vez de quebrar linha: a
   altura do cabeçalho fica previsível, e a página não pula ao carregar. A
   barra de rolagem some porque três itens sempre cabem — ela existe só para o
   dia em que não couberem. */
.topo-secoes{
  display:flex;gap:4px;align-items:center;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  /* O RECUO NEGATIVO ALINHA O TEXTO, NÃO A CAIXA. Cada link tem 14px de
     respiro interno, então a palavra "Agenda" começava 14px à direita do "A"
     de Aponteaí — perto o bastante para parecer erro e longe o bastante para
     incomodar. Puxar a fita para trás no mesmo tanto põe as duas primeiras
     letras na mesma vertical. */
  margin-left:-14px;
}
.topo-secoes::-webkit-scrollbar{display:none}
.topo-secoes a{flex:none}
.topo-publico a{
  font-family:var(--display);font-stretch:92%;font-size:15.5px;font-weight:600;
  text-decoration:none;color:var(--ink-2);padding:8px 14px;border-radius:8px;
}
.topo-publico a:hover{background:var(--surface)}
.topo-publico a.destaque{background:var(--azul);color:#fff}
.topo-publico a.destaque:hover{background:var(--azul-forte)}
@media (max-width:520px){
  /* A marca some o selo "beta" e os botões apertam o padding: é o mínimo para
     "Aponteaí", "Entrar" e "Criar conta" caberem numa linha de 360px sem
     nenhum deles virar duas linhas de texto. */
  .topo-publico .marca{font-size:21px}
  .topo-publico .selo-beta{display:none}
  .topo-publico a{padding:7px 11px;font-size:14.5px}
  .topo-acoes{gap:6px}
  .topo-secoes{margin-left:-11px}
}

.heroi{padding:44px 0 20px;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media (max-width:820px){.heroi{grid-template-columns:1fr;gap:34px;padding-top:24px}}
.heroi h1{
  font-family:var(--display);font-stretch:80%;font-weight:700;
  font-size:clamp(36px,5.6vw,60px);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 18px;text-wrap:balance;
}
.heroi h1 em{font-style:normal;color:var(--azul)}
.heroi p.chamada{font-size:18.5px;line-height:1.55;color:var(--ink-2);margin:0 0 26px;max-width:46ch}
.botoes{display:flex;gap:11px;flex-wrap:wrap}
.botoes .botao{width:auto;padding:13px 24px}
.abaixo-botao{font-size:13px;color:var(--muted);margin:12px 0 0}

.secao{padding:56px 0;border-top:1px solid var(--line-soft)}
.secao h2{
  font-family:var(--display);font-stretch:84%;font-weight:700;
  font-size:clamp(25px,3.2vw,32px);margin:0 0 10px;text-wrap:balance;
}
.secao > p.sub{font-size:16px;color:var(--muted);margin:0 0 30px;max-width:56ch}

.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;counter-reset:passo}
.passo{counter-increment:passo}
.passo::before{
  content:counter(passo);
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--azul-fraco);color:var(--azul);
  font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:12px;
}
.passo b{display:block;font-family:var(--display);font-stretch:88%;font-size:17px;margin-bottom:5px}
.passo span{color:var(--ink-2);font-size:15px;line-height:1.55}

.precos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.preco{
  border:1px solid var(--line);border-radius:14px;padding:26px 24px;
  background:var(--surface);display:flex;flex-direction:column;
}
.preco.melhor{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.preco .selo-plano{
  display:inline-block;align-self:flex-start;font-family:var(--display);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--azul);color:#fff;padding:3px 10px;border-radius:999px;margin-bottom:14px;
}
.preco h3{font-family:var(--display);font-stretch:86%;font-size:19px;margin:0 0 4px}
.preco .valor{
  font-family:var(--display);font-stretch:82%;font-weight:700;font-size:38px;
  line-height:1.1;margin:14px 0 2px;
}
.preco .valor small{font-size:15px;font-weight:600;color:var(--muted)}
.preco ul{list-style:none;padding:0;margin:20px 0;flex:1}
.preco li{padding-left:23px;position:relative;margin-bottom:9px;font-size:14.5px;color:var(--ink-2)}
.preco li::before{
  content:"";position:absolute;left:3px;top:.52em;width:9px;height:5px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transform:rotate(-45deg);
}
.preco .botao{width:100%}

.perguntas{display:grid;gap:2px}
.pergunta{padding:17px 0;border-bottom:1px solid var(--line-soft)}
.pergunta:last-child{border-bottom:0}
.pergunta b{display:block;font-family:var(--display);font-stretch:88%;font-size:16px;margin-bottom:6px}
.pergunta span{color:var(--ink-2);font-size:15px;line-height:1.6;display:block;max-width:66ch}

.rodape-publico{
  border-top:1px solid var(--line);margin-top:56px;padding:26px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted);
}
.rodape-publico a{color:var(--muted)}

/* ── áudio e foto ────────────────────────────────────────────────────── */

/* A GRAVAÇÃO POR GESTO
   Segurar grava, soltar envia, arrastar para cima trava, para a esquerda
   descarta. A tira abaixo toma o lugar da cápsula de texto e o botão redondo
   fica onde estava — é ele que está sob o dedo.
   `touch-action:none` não é detalhe: sem isso o arrasto para cima rola a
   página em vez de travar a gravação, e o gesto simplesmente não existe no
   celular, que é onde ele é a razão de ser da tela. */
.acao{
  touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* Enquanto o dedo está no botão a transição de `transform` SAI. Com ela, o
   botão chega 120ms depois do dedo — e esse atraso é exatamente o que faz uma
   interface parecer mole. O que segue o dedo tem de seguir sem intervalo. */
.acao.segurando{
  transition:background .12s ease;
  background:var(--vermelho);
  /* Cresce sob o dedo: o alvo fica maior justamente quando a mão já está lá e
     precisa arrastar sem escorregar para fora. */
  transform:scale(1.14);
  box-shadow:0 0 0 10px color-mix(in srgb, var(--vermelho) 16%, transparent);
}
.acao.segurando:active{transform:scale(1.14)}

.gravando{
  flex:1;min-width:0;height:46px;
  display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:23px;padding:0 14px;
}
.gravando .ponto{
  width:9px;height:9px;border-radius:50%;background:var(--vermelho);flex:none;
  animation:piscar 1.1s infinite;
}
@keyframes piscar{0%,100%{opacity:1}50%{opacity:.25}}
.gravando .tempo{
  font-family:var(--display);font-variant-numeric:tabular-nums;font-size:15px;
  font-weight:600;color:var(--vermelho);flex:none;
}
/* Os últimos dez segundos. O relógio conta de trás e muda de cor: o teto de um
   minuto deixa de ser surpresa e vira aviso — antes ele cortava a frase no meio
   e enviava sozinho, sem nunca ter dito que existia. */
.gravando .tempo.acabando{color:var(--laranja);font-size:13.5px}
.gravando .onda{display:flex;align-items:center;gap:2px;flex:1;min-width:0;height:20px;overflow:hidden}
.gravando .onda i{
  width:3px;border-radius:2px;background:var(--vermelho);opacity:.5;
  transition:height .1s linear;
}
/* A dica de cancelar, do lado do polegar que vai arrastar. Ela desaparece ao
   travar, porque ali o gesto acabou e quem cancela é a lixeira. */
.gravando .arraste{
  display:flex;align-items:center;gap:2px;flex:none;
  font-size:12.5px;color:var(--muted);white-space:nowrap;
  animation:respira 1.8s ease-in-out infinite;
}
.gravando .arraste svg{width:15px;height:15px;stroke-width:2.2}
@keyframes respira{0%,100%{opacity:.5}50%{opacity:1}}
.gravando .lixo{
  display:none;flex:none;width:34px;height:34px;margin-left:-6px;
  border:0;background:transparent;color:var(--vermelho);
  border-radius:50%;cursor:pointer;place-items:center;padding:0;
}
.gravando .lixo svg{width:19px;height:19px}
.gravando .lixo:hover{background:var(--vermelho-fraco)}
.gravando .lixo:focus-visible{outline:2px solid var(--vermelho);outline-offset:1px}
.gravando.travado .lixo{display:grid}
.gravando.travado .arraste{display:none}

/* O TRILHO DA TRAVA — o cadeado que sobe do botão.
   Ancorado ao formulário (right:0, bottom:100%) e não a uma distância em
   pixels: a dica de teclado embaixo existe no desktop e some no celular, então
   qualquer medida fixa erraria num dos dois. */
.digitar form{position:relative}
.trilho-trava{
  position:absolute;right:0;bottom:calc(100% + 9px);z-index:2;
  width:46px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 0 7px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:23px;
  box-shadow:var(--sombra);
  animation:trava-sobe .18s ease-out;
}
.trilho-trava svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trilho-trava .seta{display:grid;place-items:center;animation:sobe 1.5s ease-in-out infinite}
/* Perto de travar, o cadeado acende. É o aviso de que soltar agora NÃO envia —
   sem ele a trava vira surpresa, e surpresa em cima de um áudio já gravado
   custa o áudio. */
.trilho-trava.perto{
  color:var(--azul);border-color:var(--azul);
  background:var(--azul-fraco);
}
.trilho-trava.perto .seta{animation:none;opacity:.35}
@keyframes trava-sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sobe{0%,100%{transform:translateY(2px);opacity:.45}50%{transform:translateY(-2px);opacity:1}}

.balao .anexo{
  display:flex;align-items:center;gap:8px;font-size:13.5px;opacity:.9;
  margin-bottom:4px;
}
.balao .anexo .onda-fixa{display:flex;align-items:center;gap:2px;height:16px}
.balao .anexo .onda-fixa i{width:2px;border-radius:1px;background:currentColor;opacity:.75}
.balao .transcrito{font-style:italic;opacity:.9}
.miniatura{
  display:block;max-width:210px;max-height:170px;border-radius:9px;
  margin-bottom:6px;object-fit:cover;
}
.pilula-origem{
  display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;
  font-weight:600;letter-spacing:.03em;background:var(--surface-2);color:var(--muted);
  margin-left:6px;vertical-align:middle;
}

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

/* ── seletor de ícone ─────────────────────────────────────────────────
   Grade de escolha em vez de digitação. O campo continua sendo o <input>
   (só de leitura) para o formulário seguir funcionando como formulário;
   a grade escreve nele. */
/* A grade nasce FECHADA. Aberta, ela ocupava 230px permanentes com nove grupos
   de emoji — dentro de uma folha, num celular, metade da tela para um campo que
   a maioria deixa em branco. */
.iconoteca-caixa{
  margin-top:8px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);overflow:hidden;
}
.iconoteca-abrir{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  /* 44px de alvo: é um controle de toque, não um rótulo. */
  min-height:44px;padding:0 12px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  list-style:none;   /* Firefox */
}
/* O triângulo padrão do navegador sai: ele aparece à ESQUERDA e em outro
   desenho, e ficariam duas setas dizendo a mesma coisa. */
.iconoteca-abrir::-webkit-details-marker{display:none}
.iconoteca-abrir:hover{background:var(--surface)}
.iconoteca-caixa:focus-within .iconoteca-abrir{outline:2px solid var(--azul);outline-offset:-2px}
.iconoteca-abrir .seta{
  width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s ease;
}
.iconoteca-caixa[open] .iconoteca-abrir .seta{transform:rotate(180deg)}
.iconoteca-caixa[open] .iconoteca-abrir{border-bottom:1px solid var(--line)}

.iconoteca{
  max-height:230px;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 12px;
}
.ico-grupo + .ico-grupo{margin-top:12px}
.ico-titulo{
  display:block;font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.ico-grade{display:flex;flex-wrap:wrap;gap:5px}
.ico{
  width:38px;height:38px;flex:none;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;
  background:var(--surface);font-size:19px;line-height:1;
  font-family:var(--emoji),var(--texto);
  display:grid;place-items:center;padding:0;
}
.ico:hover{border-color:var(--azul)}
.ico:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.ico[aria-pressed="true"]{
  border-color:var(--azul);background:var(--azul-fraco);
  box-shadow:inset 0 0 0 1px var(--azul);
}
.ico-vazio{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════════════
   O LOGOTIPO — símbolo em traço, nome em texto
   O símbolo é o que carrega a identidade, porque traço é igual em todo
   aparelho; a fonte de display não existe no Android e o nome escrito
   nela mudava de forma em cada sistema. Agora o nome é só nome.
   ══════════════════════════════════════════════════════════════════════ */
.marca{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  text-decoration:none;color:var(--ink);
  /* Tamanho fluido: cresce com a tela sem precisar de ponto de corte, e para
     de crescer antes de virar cartaz. */
  font-size:clamp(19px, 4.6vw, 23px);
}
.marca-simbolo{
  flex:none;display:grid;place-items:center;
  width:1.32em;height:1.32em;border-radius:9px;
  background:var(--azul-fraco);
}
.marca-simbolo svg{width:80%;height:80%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ms-pino{stroke:var(--azul);stroke-width:1.7;opacity:.55}
.ms-acento{stroke:var(--azul);stroke-width:2.6}
.marca-nome{
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  line-height:1;white-space:nowrap;
}
.marca-nome i{font-style:normal;color:var(--azul)}
/* A versão estática, nas telas de acesso e na landing: ali a marca é rótulo,
   não caminho de volta — não há para onde voltar antes de entrar. */
.marca-estatica{cursor:default}
.marca:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:6px}

/* ══════════════════════════════════════════════════════════════════════
   A FOLHA — o formulário que abre por botão
   O formulário morava aberto no topo da lista, sempre. Em Lançamentos isso
   custava 320px antes do primeiro lançamento aparecer; em Recorrências,
   quase o visor inteiro de um celular. E ele fica aberto o tempo todo para
   um uso que é ocasional — quem entra na tela quase sempre vem CONFERIR,
   não cadastrar.

   É <dialog>, e não uma div com position:fixed. O elemento nativo entrega
   de graça o que a div exigiria escrever e manter para sempre: prende o
   foco dentro, devolve o foco ao botão que abriu ao fechar, fecha no Esc,
   tira o resto da página da árvore de acessibilidade e pinta o véu no
   ::backdrop. Cada um desses é um defeito que não vamos ter.
   ══════════════════════════════════════════════════════════════════════ */
.folha{
  padding:0;border:0;background:transparent;overflow:visible;
  width:min(560px, calc(100vw - 32px));max-width:none;
  max-height:calc(100dvh - 48px);
  color:var(--ink);
}
.folha::backdrop{
  background:color-mix(in srgb, #0B1017 58%, transparent);
  backdrop-filter:blur(2px);
}
/* O cartão de dentro é quem tem fundo e borda, e o <dialog> fica com padding
   zero. Isso não é gosto: é o que faz `e.target === dialog` significar
   "clicou no véu" e nada mais. Com padding no dialog, a borda dele seria
   área clicável do próprio elemento e fechar-ao-clicar-fora fecharia
   também ao clicar na moldura do formulário. */
.folha-in{
  display:flex;flex-direction:column;max-height:calc(100dvh - 48px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sombra);
}
.folha-topo{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px 13px;border-bottom:1px solid var(--line-soft);
}
.folha-topo h2{
  font-family:var(--display);font-stretch:88%;font-size:16.5px;font-weight:700;
  margin:0;color:var(--ink);
}
.folha-fechar{
  flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;background:transparent;color:var(--muted);
  border-radius:9px;cursor:pointer;font-size:19px;line-height:1;
}
.folha-fechar:hover{background:var(--surface-2);color:var(--ink)}
.folha-fechar:focus-visible{outline:2px solid var(--azul);outline-offset:1px}

/* `min-height:0` é o que faz a rolagem existir.
   Num container flex em coluna, o item nasce com `min-height:auto`, que o
   proíbe de encolher abaixo do próprio conteúdo — e um `overflow-y:auto` que
   nunca encolhe nunca rola. O formulário simplesmente vazaria para fora da
   folha, com o botão de salvar inalcançável num aparelho baixo. */
.folha-corpo{
  flex:1;min-height:0;
  padding:17px 18px 18px;overflow-y:auto;overscroll-behavior:contain;
}
/* O pé destacado: é onde mora o que não se desfaz. Separá-lo do resto do
   formulário é o que impede a mão de escorregar de "Salvar" para "Apagar". */
.folha-pe{
  flex:none;display:flex;justify-content:flex-start;
  padding:12px 18px;border-top:1px solid var(--line-soft);
}
.folha-pe button{
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  color:var(--vermelho);background:transparent;
  border:1px solid color-mix(in srgb, var(--vermelho) 40%, transparent);
  padding:8px 14px;border-radius:8px;
}
.folha-pe button:hover:not(:disabled){background:var(--vermelho-fraco)}
.folha-pe button:focus-visible{outline:2px solid var(--vermelho);outline-offset:1px}

/* O BOTÃO QUE ABRE. Um só elemento no HTML, e é o CSS que decide o que ele é:
   botão no cabeçalho quando há largura, botão flutuante quando não há.
   Flutuante porque numa lista de trinta lançamentos o botão do topo já rolou
   para fora da tela — e voltar ao topo para poder lançar é a fricção que o
   produto inteiro existe para não ter. */
.cabeca-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── baixar: um botão, dois formatos ─────────────────────────────────── */
.menu-baixar{position:relative}
.menu-baixar > summary{
  width:auto;padding:10px 15px;font-size:14.5px;white-space:nowrap;
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;
}
.menu-baixar > summary::-webkit-details-marker{display:none}
.menu-baixar > summary:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.menu-baixar-lista{
  position:absolute;top:calc(100% + 6px);right:0;z-index:30;
  min-width:250px;padding:5px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sombra);
}
.menu-baixar-lista button{
  display:block;width:100%;text-align:left;
  padding:9px 11px;border:0;border-radius:8px;background:transparent;
  font:inherit;color:var(--ink);cursor:pointer;
}
.menu-baixar-lista button:hover{background:var(--surface-2)}
.menu-baixar-lista button:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.menu-baixar-lista b{display:block;font-size:14px;font-weight:600}
.menu-baixar-lista span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
/* No celular o menu encosta na borda direita da tela se o botão estiver lá.
   Ancorar pela esquerda do próprio menu resolve sem medir nada. */
@media (max-width:560px){
  .menu-baixar-lista{right:auto;left:0;min-width:min(250px, calc(100vw - 48px))}
}
.botao.novo{width:auto;padding:10px 17px;font-size:15px;white-space:nowrap}
.botao.novo .mais{font-size:17px;line-height:1;margin-right:2px;font-weight:400}

@media (max-width:820px){
  /* COLA NO TOPO, e não no rodapé.
     A folha nasceu colada embaixo, que é onde o polegar alcança — e é o que
     todo mundo faz. Só que o TECLADO também vem de baixo, e cobria a folha
     inteira: sobrava o título e o × , com todos os campos atrás do teclado. Não
     dava para ver o que se estava digitando.
     O topo é a única faixa da tela que o teclado nunca alcança. Perde-se o
     alcance do polegar para abrir — mas quem abriu já vai digitar, e aí quem
     manda na tela é o teclado, não a mão. */
  .folha{
    width:100%;max-height:88dvh;
    margin:0 0 auto;
  }
  .folha-in{
    max-height:88dvh;border-radius:0 0 18px 18px;border-top:0;
    padding-top:env(safe-area-inset-top);
  }
  .folha[open]{animation:folha-desce .22s cubic-bezier(.22,.9,.28,1)}
  /* A grade tem rolagem própria. Dentro da folha, que também rola, dois
     rolamentos aninhados de 230px numa tela de 568px viram uma briga: o dedo
     nunca sabe qual dos dois vai andar. Encolher a de dentro devolve a rolagem
     da folha para o dedo na maior parte da área. */
  .folha .iconoteca{max-height:168px}

  .botao.novo{
    position:fixed;z-index:50;
    right:max(16px, env(safe-area-inset-right));
    bottom:calc(18px + env(safe-area-inset-bottom));
    border-radius:999px;padding:14px 20px;
    box-shadow:0 8px 22px -8px color-mix(in srgb, var(--azul) 75%, transparent), var(--sombra);
  }
  /* Com a gaveta aberta o botão flutuante ficaria POR CIMA do véu, aceso,
     convidando a um toque que não deveria existir ali. */
  body.gaveta-aberta .botao.novo{display:none}
}
@keyframes folha-desce{from{transform:translateY(-16px)}to{transform:translateY(0)}}

/* Os dois botões da folha nascem menores que 44px porque no desktop 34px é o
   tamanho certo para um "fechar" discreto. Onde se toca com o dedo, não é:
   fechar e apagar são justamente os dois que não podem ser acertados por
   engano nem errados por falta de alvo. O desenho não muda — só a área. */
@media (pointer:coarse){
  .folha-fechar{width:44px;height:44px}
  .folha-pe button{min-height:44px;padding-left:18px;padding-right:18px}
}

/* O fundo não rola sob a folha. O <dialog> modal já bloqueia a interação,
   mas não impede a ROLAGEM da página atrás em vários navegadores — e o
   formulário deslizando sobre uma lista que se move é o efeito que faz a
   tela parecer quebrada. */
body.folha-aberta{overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════
   A GAVETA — navegação do celular
   ══════════════════════════════════════════════════════════════════════ */

/* O filete. Fino de propósito: some quando não é preciso e continua ali
   quando é. A área tocável, porém, é de 44px — o ::before estende o alvo
   sem engordar o desenho, que é o jeito de ter as duas coisas. */
.puxador{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:60;display:none;place-items:center;
  width:14px;height:76px;padding:0;border:0;cursor:grab;
  background:transparent;touch-action:none;
  padding-left:max(0px, env(safe-area-inset-left));
}
.puxador::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:44px;height:96px;   /* alvo de toque, invisível */
}
.puxador .filete{
  width:5px;height:100%;border-radius:0 5px 5px 0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--azul) 55%, transparent),
    var(--azul),
    color-mix(in srgb, var(--azul) 55%, transparent));
  box-shadow:0 0 14px -2px color-mix(in srgb, var(--azul) 65%, transparent);
  transition:width .16s ease, box-shadow .16s ease;
}
.puxador:active .filete,.puxador:hover .filete{
  width:7px;box-shadow:0 0 18px 0 color-mix(in srgb, var(--azul) 75%, transparent);
}
.puxador:focus-visible{outline:2px solid var(--azul);outline-offset:4px;border-radius:4px}

.veu{
  position:fixed;inset:0;z-index:70;display:none;
  /* VÉU LEVA COR LITERAL, sempre. Ver a nota em `.alarme::backdrop`: uma
     camada que cobre a tela inteira é o único lugar onde uma declaração
     descartada não some — vira um bloqueador invisível. */
  background:rgba(11,16,23,.62);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity .24s ease;
}
.veu.arrastando{transition:none}

.gaveta{
  position:fixed;left:0;top:0;bottom:0;z-index:80;display:none;
  width:min(82vw, 300px);
  transform:translateX(-100%);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  border-right:1px solid var(--line);
  box-shadow:24px 0 60px -30px rgba(11,16,23,.6);
  /* A curva sai rápido e chega devagar: é o que dá a sensação de peso leve —
     a gaveta parte na hora e encosta sem batida. */
  transition:transform .28s cubic-bezier(.22,.9,.28,1);
  touch-action:none;overscroll-behavior:contain;
}
.gaveta.arrastando{transition:none}
.gaveta-in{
  height:100%;display:flex;flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top)) 16px
          calc(16px + env(safe-area-inset-bottom))
          calc(16px + env(safe-area-inset-left));
}
.gaveta-topo{padding:0 4px 16px;border-bottom:1px solid var(--line-soft)}
.marca-gaveta{font-size:24px;margin-bottom:14px}
.gaveta-eu b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gaveta-eu span{display:block;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gaveta-eu{margin:0}

.gaveta-links{display:flex;flex-direction:column;gap:2px;padding:14px 0;flex:1;overflow-y:auto}
.gaveta-links a{
  display:flex;align-items:center;gap:12px;
  min-height:48px;padding:0 12px;border-radius:10px;
  color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;
}
.gaveta-links a:hover{background:var(--surface)}
.gaveta-links a[aria-current="page"]{background:var(--azul-fraco);color:var(--azul);font-weight:600}
.g-ico{flex:none;display:grid;place-items:center;width:22px;height:22px;opacity:.85}
.g-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.gaveta-sair{
  flex:none;margin-top:8px;padding:13px;border-radius:10px;
  border:1px solid var(--line);background:transparent;
  color:var(--muted);font:inherit;font-size:14.5px;cursor:pointer;
}
.gaveta-sair:hover{border-color:var(--vermelho);color:var(--vermelho)}

/* ══════════════════════════════════════════════════════════════════════
   O CORTE — 820px, o mesmo que o herói da landing já usava.
   O menu de topo precisa de ~815px para caber numa linha; inventar 840
   seria um número novo para a mesma verdade.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* A barra de topo inteira sai: ela custava até 45% da altura do visor num
     aparelho de 360px, e é sticky — não saía da frente ao rolar. */
  .barra{display:none}
  .puxador{display:grid}
  .veu{display:block}
  .gaveta{display:block}

  body.gaveta-aberta .gaveta{transform:translateX(0)}
  body.gaveta-aberta .veu{opacity:1;pointer-events:auto}
  /* Com a gaveta aberta o fundo não rola sob ela. */
  body.gaveta-aberta{overflow:hidden}

  .conteudo{padding:20px 16px 72px}
  .cabeca h1{font-size:22px}
  .bloco{padding:16px 14px}
  /* O filete mora na borda esquerda, na altura do meio: o conteúdo recua um
     pouco desse lado para nada ficar embaixo dele. */
  .conteudo,.publica{padding-left:max(16px, calc(14px + env(safe-area-inset-left)))}

  /* Balões e cartões podem ocupar mais: 76% de 332px deixava ~130px para a
     descrição depois do valor, que é justamente o texto que importa ler. */
  .balao{max-width:88%}
  .cartao-lanc{max-width:94%}

  /* A dica de teclado não faz sentido onde não há teclado físico. */
  .dica-chat{display:none}
}

/* Alvos de toque nas listas. `padding:5px 7px` com fonte 13px dava ~27px de
   alvo, separados por 2px — e é onde ficam arquivar e apagar. */
@media (pointer:coarse){
  .item .acoes{gap:8px}
  .item .acoes button{min-width:44px;min-height:44px;font-size:15px}
}

/* Quem pediu menos movimento recebe a gaveta sem deslize: ela aparece e some. */
@media (prefers-reduced-motion: reduce){
  .gaveta,.veu{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ÁREA SEGURA
   `viewport-fit=cover` foi ligado nas 14 telas porque sem ele TODO
   env(safe-area-inset-*) vale zero — e o único trecho de safe-area que o
   projeto tinha, no composer da conversa, era código morto.
   Mas o cover não é de graça: ele estende a página para baixo da barra de
   status e do indicador de gesto. Estes recuos são a outra metade do
   conserto; sem eles, arrumar a conversa quebraria as outras treze.
   `max()` e não soma: acima do entalhe o inset é zero e o padding original
   continua valendo, então o desktop não muda em nada.
   ══════════════════════════════════════════════════════════════════════ */
.acesso{
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
  padding-top:max(32px, env(safe-area-inset-top));
  padding-bottom:max(32px, env(safe-area-inset-bottom));
}
.publica{
  padding-left:max(22px, env(safe-area-inset-left));
  padding-right:max(22px, env(safe-area-inset-right));
}
.conteudo{
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
  padding-top:max(26px, env(safe-area-inset-top));
}
.barra-in{padding-top:max(10px, env(safe-area-inset-top))}

/* O formulário em grade e o span 2.
   `.formlinha` é repeat(auto-fit, minmax(150px,1fr)). Em 360px a largura útil
   dentro do bloco resolve para UMA coluna — e aí `grid-column:span 2` obriga o
   navegador a inventar uma segunda coluna, que empurra a linha para fora da
   tela e faz a página rolar de lado. A regra desfaz o span onde ele não cabe;
   está aqui, e não no HTML, porque o `style` embutido de lancamentos.html e
   recorrencias.html não pode ser desfeito por classe. */
@media (max-width:560px){
  .formlinha > [style*="span 2"]{grid-column:span 1 !important}

  /* A LINHA DA LISTA EM DUAS ALTURAS.
     Em uma linha só, a régua não fecha. Num aparelho de 360px sobram 350px
     dentro do bloco, e o ícone (34), os vãos (3×11) e o valor ("− R$ 200.000,00"
     ocupa uns 112px) já levam 179. Com UM botão de 44px restavam 127px para o
     nome e o subtítulo; com o lápis ao lado do pausar, 83px — e "Prestação de
     Serviço" virava "Prest…". O texto que importa era o único que cedia.
     Empilhando, a descrição passa a valer a largura toda menos as ações: perto
     de 220px, quase o triplo. O valor desce para a segunda altura, à direita,
     onde continua alinhado e legível — e ninguém precisa dele em corpo maior
     que a descrição do que foi comprado.
     `display:contents` no .meio dissolve o invólucro e entrega os dois <span>
     de dentro à grade do <li>; sem isso, seria preciso mexer no HTML de quatro
     telas para tirar uma camada que no desktop está certa. */
  .item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "pinta  desc    acoes"
      "pinta  abaixo  dinheiro";
    column-gap:11px;row-gap:1px;align-items:center;
  }
  .item .pinta{grid-area:pinta;align-self:center}
  .item .meio{display:contents}
  .item .desc{grid-area:desc}
  .item .abaixo{grid-area:abaixo}
  .item .dinheiro{grid-area:dinheiro;justify-self:end;align-self:center}
  .item .acoes{grid-area:acoes;justify-self:end}
}

/* ══════════════════════════════════════════════════════════════════════
   A MAQUETE DO HERÓI — a conversa mostrada a quem ainda não é assinante
   As oito classes abaixo estavam no HTML da landing e em NENHUM lugar do
   CSS: a coluna direita do herói era texto empilhado cru, e as treze
   barrinhas da onda de áudio (com altura embutida no style) apareciam
   como uma coluna de nada. Era a primeira impressão de quem vai pagar.
   ══════════════════════════════════════════════════════════════════════ */
.phone{
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:14px;box-shadow:var(--sombra);
}
.phone-head{
  display:flex;align-items:center;gap:10px;
  padding:2px 4px 12px;border-bottom:1px solid var(--line-soft);
}
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--azul);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:16px;
}
.phone-head b{display:block;font-size:14.5px;line-height:1.2}
.phone-head small{display:block;font-size:11.5px;color:var(--muted)}

.thread{display:flex;flex-direction:column;gap:8px;padding:14px 4px 4px}
.bub{
  max-width:86%;padding:9px 12px;border-radius:15px;
  font-size:13.5px;line-height:1.45;
}
.bub.me{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:5px}
.bub.ia{
  align-self:flex-start;background:var(--paper);
  border:1px solid var(--line);border-bottom-left-radius:5px;
}
.bub.ia b{font-weight:700;color:var(--azul)}

/* A onda do áudio: as alturas vêm do style de cada <i> no HTML, então aqui
   só entram largura, cor e alinhamento — mexer na altura pelo CSS apagaria
   o desenho da fala. */
.wave{display:flex;align-items:center;gap:2.5px;height:22px;margin-bottom:5px}
.wave i{width:2.5px;border-radius:2px;background:currentColor;opacity:.75}
.transcr{font-style:italic;opacity:.95}

/* O cartão do lançamento, no mesmo vocabulário do cartão de verdade que
   aparece dentro da conversa. */
.lanc{
  align-self:flex-start;width:86%;
  background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--vermelho);border-radius:10px;padding:9px 12px;
}
.lanc .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.lanc .top b{font-family:var(--display);font-stretch:90%;font-size:14px}
.lanc .val{
  font-family:var(--display);font-stretch:88%;font-weight:700;font-size:14.5px;
  color:var(--vermelho);font-variant-numeric:tabular-nums;flex:none;
}
.lanc .meta{font-size:11.5px;color:var(--muted);margin-top:2px}

@media (max-width:820px){
  .phone{max-width:400px;margin:0 auto;width:100%}
}

/* ══════════════════════════════════════════════════════════════════════
   O RELATÓRIO DENTRO DA CONVERSA
   Nasceu de uma reclamação concreta: pedir um resumo devolvia um paredão
   de texto com nove metas, sete delas em "R$ 0 de R$ 3.500 (0%)". O que
   importava — duas linhas — ficava soterrado pelo que não importava.
   A regra aqui é subtrair: número grande só para o saldo, barra só para
   quem tem gasto, e nome de categoria só quando há valor ao lado.
   ══════════════════════════════════════════════════════════════════════ */
.rel{
  align-self:flex-start;max-width:96%;width:100%;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;border-bottom-left-radius:5px;
  padding:14px 15px;margin-top:2px;
}
.rel-topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:11px;border-bottom:1px solid var(--line-soft);
}
.rel-periodo{
  font-family:var(--display);font-stretch:90%;font-weight:700;font-size:15px;
  color:var(--ink);
}
.rel-n{font-size:11.5px;color:var(--muted);flex:none}

/* Os três números. O saldo é o maior porque é a única resposta que a pessoa
   procura de relance; entrou e saiu explicam o saldo, não competem com ele. */
.rel-numeros{display:flex;gap:14px;padding:12px 0 4px;flex-wrap:wrap}
.rel-num{flex:1;min-width:78px}
.rel-num span{
  display:block;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.rel-num b{
  display:block;font-family:var(--display);font-stretch:88%;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.25;
}
.rel-num.saldo b{font-size:22px}
.rel-num.entrou b{font-size:15px;color:var(--verde)}
.rel-num.saiu b{font-size:15px;color:var(--vermelho)}
.rel-num.saldo.positivo b{color:var(--verde)}
.rel-num.saldo.negativo b{color:var(--vermelho)}

.rel-secao{
  margin-top:15px;padding-top:12px;border-top:1px solid var(--line-soft);
}
.rel-titulo{
  font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;margin-bottom:9px;
}

/* A barra de participação: uma linha por categoria, o nome à esquerda, o
   valor à direita e a barra por baixo dos dois. Escolhida em vez de rosca
   porque em 290px de largura uma rosca com seis fatias vira enfeite — não
   dá para ler qual fatia é qual sem legenda, e legenda é mais poluição. */
.rel-cat{margin-bottom:9px}
.rel-cat:last-child{margin-bottom:0}
.rel-cat-topo{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:13px;margin-bottom:4px;
}
.rel-cat-nome{
  color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rel-cat-val{
  flex:none;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;
}
.rel-cat-pct{color:var(--muted);font-weight:400;margin-left:5px;font-size:12px}

/* MENOS TINTA, MESMA INFORMAÇÃO.
   O relatório tinha seis barras de 7px cheias de cor, mais as das metas com
   trilho e borda — e o balão inteiro virava um bloco pintado, num lugar onde
   tudo em volta é texto. O peso não vinha de mostrar demais, vinha de MARCAR
   demais o pouco que mostra.
   A barra de participação afinou e perdeu saturação: ela só compara tamanhos,
   e para comparar tamanhos o comprimento basta — a cor ali era enfeite. */
.rel-barra{height:4px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.rel-barra i{display:block;height:100%;border-radius:3px;opacity:.5;transition:width .5s ease}

/* As metas usam a MESMA barra do resto do produto (.trilho/.enche), porque a
   cor da faixa já significa algo para quem usa o app — azul tranquilo,
   vermelho estourou. Inventar outra escala aqui obrigaria a reaprender.
   Por isso a meta afina mas NÃO desbota: o comprimento dela é aviso, não
   comparação, e um vermelho de estouro em 50% de opacidade é um aviso que a
   pessoa deixa de ver. O que sai é o trilho e a borda, que não diziam nada. */
.rel .trilho{height:5px;border-radius:3px;border:0}
.rel .enche{border-radius:3px}
.rel .meta-nome{font-size:13.5px}
.rel .meta-pe{font-size:12px;margin-top:4px}
.rel .meta-topo{margin-bottom:5px}
.rel-meta{margin-bottom:9px}
.rel-meta:last-child{margin-bottom:0}

/* ── o gráfico de barras ─────────────────────────────────────────────── */
/* Barras verticais, uma por categoria, lado a lado. SEM meta: quem pede
   gráfico quer ver para onde o dinheiro foi, não quanto falta para um teto.
   O SVG escala com a largura pelo viewBox, então o mesmo desenho serve no
   celular e no desktop sem uma linha de JavaScript para redimensionar. */
.g-caixa{margin:14px 0 4px}
.g-svg{display:block;width:100%;height:auto;overflow:visible}
.g-base{stroke:var(--line);stroke-width:1}
/* `text-anchor` no CSS e não em atributo: são três regras para dezenas de
   elementos, e a folha é o lugar onde isso se diz uma vez. */
.g-svg text{text-anchor:middle;font-family:var(--display);fill:var(--muted)}
.g-valor{font-size:9px;font-weight:600;fill:var(--ink-2);font-variant-numeric:tabular-nums}
.g-icone{font-size:13px;font-family:var(--emoji),var(--texto)}
.g-nome{font-size:8.5px}
.g-total{
  padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--muted);
}

/* ── a planilha, na conversa ─────────────────────────────────────────── */
/* Cartão com o período e um botão. O arquivo não viaja dentro da resposta:
   oitocentas linhas são centenas de kilobytes, e mandá-las junto faria toda
   mensagem pesar por um download que talvez ninguém queira. */
.pl-texto{margin:12px 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.rel .pl-baixar{width:auto;padding:10px 16px;font-size:14.5px}
.ico-baixar{display:inline-grid;place-items:center;vertical-align:-5px;margin-right:7px}
.ico-baixar svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

.rel-zeradas{
  margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5;
}
.rel-vazio{
  padding:16px 0 4px;text-align:center;color:var(--muted);font-size:13.5px;
}

@media (max-width:820px){
  .rel{max-width:100%}
  .rel-num.saldo b{font-size:20px}
}

/* A Operação, no menu de quem tem o papel de suporte.
   Marcada em âmbar para não se confundir com as telas do produto: quem opera
   precisa saber, de relance, que está olhando o serviço e não a própria conta.
   O link é cortesia, não tranca — a rota confere o papel no banco e responde
   404 para quem não tem. */
.menu a.so-suporte{color:var(--ambar)}
.menu a.so-suporte:hover{background:color-mix(in srgb, var(--ambar) 12%, transparent);color:var(--ambar)}
.menu a.so-suporte[aria-current="page"]{
  background:color-mix(in srgb, var(--ambar) 16%, transparent);color:var(--ambar);
}


/* O selo de beta.
   Anda colado à marca porque é parte da identidade agora — um aviso no rodapé
   seria lido por ninguém, e quem confia um número ao produto precisa saber
   antes, não depois. Sai quando BETA virar false em _planos.js. */
.selo-beta{
  align-self:flex-start;flex:none;
  font-family:var(--texto);font-size:.42em;font-weight:700;
  letter-spacing:.08em;text-transform:lowercase;line-height:1;
  color:var(--ambar);background:color-mix(in srgb, var(--ambar) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
  padding:.22em .45em;border-radius:.5em;margin-left:-.15em;margin-top:.15em;
}

.pilula-beta{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ambar);background:color-mix(in srgb, var(--ambar) 14%, transparent);
  padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle;
}

/* A faixa de e-mail não confirmado.
   Fica abaixo da barra, ocupa a largura toda e não pode ser fechada — mas
   também não impede nada. É lembrete, não catraca: a confirmação deixou de
   barrar a entrada porque fazer o acesso depender da ENTREGA de um e-mail
   tranca quem nunca recebe. */
.faixa-email{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:9px 16px;font-size:13.5px;
  color:var(--ink);
  background:color-mix(in srgb, var(--ambar) 13%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
}
.faixa-email button{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--ambar);background:transparent;
  border:1px solid color-mix(in srgb, var(--ambar) 45%, transparent);
  padding:5px 11px;border-radius:7px;
}
.faixa-email button:hover:not(:disabled){background:color-mix(in srgb, var(--ambar) 16%, transparent)}
.faixa-email button:disabled{opacity:.6;cursor:progress}
@media (max-width:820px){
  .faixa-email{font-size:12.5px;padding:8px 12px;gap:8px}
}

/* ── filtro de vários valores, como o do Excel ─────────────────────────
   O botão imita um <select> de propósito: mesma altura, mesma borda, mesma
   seta. Quem olha a linha de filtros não deve precisar aprender que um deles
   é diferente — a diferença aparece ao abrir, não antes.

   A cor só entra quando há filtro ativo. Um filtro esquecido ligado é o
   motivo número um de "sumiu meu lançamento", e a borda azul é o que responde
   essa pergunta antes de ela ser feita. */
.fmulti{position:relative;display:block}
.fmulti-botao{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 13px;font-size:15px;font-family:inherit;color:var(--ink);text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;cursor:pointer;
}
.fmulti-botao:focus-visible{
  outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}
.fmulti.tem-filtro > .fmulti-botao{
  border-color:var(--azul);color:var(--azul);font-weight:600;
  background:color-mix(in srgb, var(--azul) 7%, var(--paper));
}
.fmulti-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmulti-seta{
  width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .15s;
}
.fmulti.aberto .fmulti-seta{transform:rotate(180deg)}

.fmulti-painel{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;max-width:320px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:10px;
}
.fmulti-busca{margin-bottom:8px}
.fmulti-acoes{display:flex;gap:6px;margin-bottom:8px}
.fmulti-acoes button{
  flex:1;padding:6px 8px;font-size:12.5px;font-family:inherit;font-weight:600;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);
  border-radius:6px;cursor:pointer;
}
.fmulti-acoes button:hover{color:var(--azul);border-color:var(--azul)}
.fmulti-lista{max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.fmulti-item{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;
  font-size:14.5px;cursor:pointer;
}
.fmulti-item:hover{background:var(--surface)}
.fmulti-item input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--azul);cursor:pointer}
.fmulti-ico{flex:0 0 auto}
.fmulti-vazio{margin:0;padding:14px 8px;font-size:13.5px;color:var(--muted);text-align:center}

/* No celular o painel não pode nascer colado no botão: o teclado sobe assim
   que a busca ganha foco e cobre justamente a lista que se veio ver. É o
   mesmo problema que a folha resolve, e a solução é a mesma — subir para o
   topo da tela, onde o teclado não alcança.

   O véu é ::before do próprio invólucro: escurece o fundo sem um elemento a
   mais no HTML, e existe para o painel flutuando longe do botão não parecer
   um pedaço solto de tela. */
@media (max-width:560px){
  .fmulti.aberto::before{
    content:"";position:fixed;inset:0;z-index:59;
    /* Literal pelo mesmo motivo de `.veu` e de `.alarme::backdrop`. */
    background:rgba(20,25,34,.42);
  }
  .fmulti-painel{
    position:fixed;top:max(12px, env(safe-area-inset-top));left:12px;right:12px;
    min-width:0;max-width:none;padding:12px;
  }
  .fmulti-lista{max-height:min(48dvh, 340px)}
  .fmulti-item{padding:10px 8px;font-size:15px}
  .fmulti-item input{width:19px;height:19px}
}

/* ── botões de resposta rápida dentro de um cartão ─────────────────────
   Duas perguntas — quando avisar, e como — respondidas num toque, sem sair
   da conversa e sem bloquear nada: o compromisso já nasce com um padrão que
   funciona, e estes botões só mudam o que já está lá.

   Envolvem em linha própria, e não numa rolagem horizontal: três opções
   cabem em qualquer celular, e rolagem escondida é opção que ninguém acha. */
.cartao-lanc .chips{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;
}
.cartao-lanc .chips-rot{
  font-family:var(--display);font-stretch:92%;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  flex:0 0 auto;min-width:44px;
}
.cartao-lanc .chip{
  padding:5px 11px;font-size:12.5px;font-family:inherit;font-weight:600;
  color:var(--muted);background:var(--paper);border:1px solid var(--line);
  border-radius:999px;cursor:pointer;line-height:1.35;
}
.cartao-lanc .chip:hover{color:var(--ink);border-color:var(--muted)}
/* O escolhido é preenchido, não só contornado: contorno sozinho some numa
   fileira de três, e a pessoa perde de vista o que está valendo. */
.cartao-lanc .chip.ativo{
  color:#fff;background:var(--azul);border-color:var(--azul);cursor:default;
}
.cartao-lanc.apagado .chips{display:none}

/* ── o alarme ──────────────────────────────────────────────────────────
   Cobre a tela inteira porque é para isso que serve: um lembrete em modo
   alarme é o que a pessoa marcou dizendo "não me deixe perder isto". Um
   cartãozinho no canto seria a mesma coisa que o modo aviso já faz.

   `position:fixed` com `inset:0` e `dvh`, não `vh`: no celular a barra do
   navegador entra e sai, e `vh` deixaria uma faixa da página aparecendo por
   baixo justamente quando a tela precisa estar inteira coberta. */
/* É um <dialog> com showModal(), e o navegador cuida da top layer e do véu.
   `border:0` e fundo transparente porque o padrão do elemento é uma caixa
   branca com borda — quem desenha o cartão é o filho `.alarme-in`, exatamente
   pela mesma razão que a folha tem `padding:0`. */
.alarme{
  border:0;padding:24px;background:transparent;
  width:100%;max-width:none;height:100%;max-height:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  animation:alarme-entra .18s ease-out;
}
.alarme:not([open]){display:none}
/* `rgba` literal, e NÃO `color-mix`.
   O véu do alarme é a única coisa que faz a camada ser VISÍVEL. Se a função
   não for entendida pelo navegador, a declaração inteira é descartada — e o
   resultado é uma camada transparente cobrindo a tela: a página parece normal
   e nada responde ao toque. Foi assim que a tela travou. Num lugar onde o
   defeito é invisível, o valor tem de ser o mais burro possível. */
.alarme::backdrop{background:rgba(11,14,19,.84)}
@keyframes alarme-entra{from{opacity:0}to{opacity:1}}
.alarme-in{
  width:100%;max-width:360px;text-align:center;
  background:var(--paper);border-radius:18px;padding:30px 26px 24px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.55);
}
.alarme-sino{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;background:var(--azul-fraco);
  animation:alarme-toca 1.1s ease-in-out infinite;
}
.alarme-sino svg{
  width:30px;height:30px;fill:none;stroke:var(--azul);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
/* O sino balança no ritmo do toque. Não é enfeite: é o que faz a tela parecer
   estar tocando mesmo quando o som não pôde sair — e ele não sai quando a
   pessoa nunca tocou na página, que é a regra de autoplay do navegador. */
@keyframes alarme-toca{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-13deg)}
  30%{transform:rotate(11deg)}
  45%{transform:rotate(-8deg)}
  60%{transform:rotate(5deg)}
  75%{transform:rotate(0)}
}
.alarme-titulo{
  margin:0 0 4px;font-family:var(--display);font-stretch:88%;font-weight:700;
  font-size:20px;color:var(--ink);text-wrap:balance;
}
.alarme-corpo{margin:0 0 22px;font-size:14.5px;color:var(--muted)}
.alarme-in .botao + .botao{margin-top:8px}
@media (prefers-reduced-motion:reduce){
  .alarme{animation:none}
  .alarme-sino{animation:none}
}

/* ── escolha do som do alarme ──────────────────────────────────────────
   Cada linha é um <label> inteiro: o alvo de toque é a linha, não o botão de
   rádio de 16px. Num celular, um rádio sozinho é a diferença entre escolher
   de primeira e errar duas vezes.

   O botão de ouvir fica FORA desse alvo, à direita, e cancela o clique — são
   duas intenções diferentes, e juntá-las faria quem só queria comparar os
   cinco sons sair com o último que ouviu. */
.som{
  display:flex;align-items:center;gap:11px;padding:10px 4px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.som:last-child{border-bottom:0}
.som input{width:17px;height:17px;flex:none;accent-color:var(--azul);cursor:pointer}
.som-nome{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink)}
.som-nome span{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.som-ouvir{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  color:var(--azul);background:var(--azul-fraco);border:0;border-radius:50%;
  cursor:pointer;
}
.som-ouvir:hover{filter:brightness(.96)}
.som-ouvir svg{width:15px;height:15px;fill:currentColor;stroke:none}

/* ── os dias da semana de uma série ───────────────────────────────────
   Sete botões redondos numa linha, como todo calendário faz. O rótulo é uma
   letra só porque sete palavras não cabem em 360px — e a ordem D S T Q Q S S
   é a que todo brasileiro lê de cabeça desde a escola, então a inicial
   repetida não confunde: a posição diz qual é.

   `aria-pressed` carrega o estado, e não uma classe: quem usa leitor de tela
   precisa ouvir "marcado", não descobrir pela cor. */
.dias-caixa{display:flex;gap:5px}
.dias-caixa button{
  flex:1;min-width:0;height:36px;font-family:var(--display);font-stretch:92%;
  font-size:13px;font-weight:700;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:50%;cursor:pointer;padding:0;
}
.dias-caixa button:hover{border-color:var(--azul);color:var(--azul)}
.dias-caixa button[aria-pressed="true"]{
  background:var(--azul);border-color:var(--azul);color:#fff;
}

/* ── o cartão do compromisso, compacto ────────────────────────────────
   Três linhas e nada mais: o nome com o ícone do assunto, o dia com a faixa
   de horário, e o pé com a série e o aviso. Tudo que é CONFIGURAÇÃO abre por
   toque, na folha de detalhe — botões de ajuste no cartão custavam três
   linhas em cada compromisso, e a conversa é uma coluna estreita que se rola
   muito. */
.cartao-lanc.compromisso{cursor:pointer}
.cartao-lanc.compromisso:hover{border-color:var(--azul)}
.cartao-lanc .c-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cartao-lanc .c-nome{
  font-family:var(--display);font-stretch:90%;font-weight:700;font-size:15.5px;
  color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cartao-lanc .c-ico{flex:none;font-size:19px;line-height:1.1}
.cartao-lanc .c-quando{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:5px;
}
.cartao-lanc .c-dia{font-size:13.5px;color:var(--azul);font-weight:600}
.cartao-lanc .c-hora{
  font-family:var(--display);font-stretch:88%;font-weight:700;font-size:14.5px;
  color:var(--azul);font-variant-numeric:tabular-nums;flex:none;
}
.cartao-lanc .c-hora i{font-style:normal;opacity:.55;padding:0 1px}
.cartao-lanc .c-pe{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;
  font-size:12px;color:var(--muted);
}
.cartao-lanc .c-serie{
  padding:2px 8px;border-radius:5px;font-weight:600;
  background:var(--azul-fraco);color:var(--azul);
}
.cartao-lanc.apagado .c-quando{color:var(--muted);font-size:12.5px}

/* ── o cartão da agenda consultada ────────────────────────────────────
   "O que eu tenho no dia 19" devolve isto. Cada linha abre a mesma folha de
   detalhe: quem olha a agenda quase sempre olha para MUDAR alguma coisa, e
   uma lista que só mostra faria a pessoa sair da conversa para agir. */
.cartao-agenda{
  align-self:flex-start;max-width:82%;width:100%;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--raio);padding:13px 14px;
}
.ag-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.ag-quando{
  font-family:var(--display);font-stretch:90%;font-weight:700;font-size:14.5px;
  color:var(--ink);
}
.ag-quando::first-letter,.det-quando::first-letter,
.cartao-lanc .c-dia::first-letter{text-transform:uppercase}
.ag-conta{font-size:12px;color:var(--muted);flex:none}
.ag-dia{
  margin:12px 0 5px;font-family:var(--display);font-stretch:92%;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
}
.ag-linha{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 6px;
  background:none;border:0;border-radius:8px;cursor:pointer;text-align:left;
  font-family:inherit;
}
.ag-linha:hover{background:var(--paper)}
.ag-linha.passou{opacity:.5}
.ag-ico{flex:none;font-size:16px;line-height:1}
/* A hora em coluna de largura fixa e fonte tabular: é o que faz 07:30 e 11:40
   ficarem alinhados, e é por ela que se lê uma agenda de relance. */
.ag-hora{
  flex:none;width:42px;font-family:var(--display);font-stretch:88%;font-weight:700;
  font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums;
}
.ag-meio{flex:1;min-width:0}
.ag-meio b{
  display:block;font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-meio span{display:block;font-size:12px;color:var(--muted)}
.ag-alarme{flex:none;font-size:13px}
.ag-vazio{margin:4px 0;font-size:13.5px;color:var(--muted)}
.cartao-agenda .ver-agenda{display:inline-block;margin-top:10px;font-size:13px}

/* ── a folha de detalhe ───────────────────────────────────────────────── */
.det-capa{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}
.det-ico{
  flex:none;width:46px;height:46px;display:grid;place-items:center;
  font-size:23px;line-height:1;border-radius:13px;background:var(--azul-fraco);
}
.det-nome{
  margin:0;font-family:var(--display);font-stretch:88%;font-weight:700;
  font-size:19px;color:var(--ink);text-wrap:balance;
}
.det-quando{margin:3px 0 0;font-size:13.5px;color:var(--azul)}
.det-serie{
  margin:6px 0 0;display:inline-block;padding:2px 9px;border-radius:6px;
  font-size:12.5px;font-weight:600;background:var(--azul-fraco);color:var(--azul);
}
.det-bloco{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--raio);padding:13px 14px;margin-bottom:16px;
}
.det-linha{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:14.5px;
}
.det-linha > span{color:var(--muted)}


/* ══════════════════════════════════════════════════════════════════════
   A COLUNA DA ESQUERDA — navegação do desktop
   ══════════════════════════════════════════════════════════════════════

   NOVE DESTINOS NÃO CABEM NUMA FITA HORIZONTAL. Medido nos rótulos em
   português: os nove somam 762px, e a linha inteira — com a marca e o bloco
   da conta — precisava de 1077px. A barra tinha 1000px. O resultado era o
   menu em duas linhas com "Operação" órfão embaixo, em QUALQUER tamanho de
   tela.

   "Lançamentos" (110px) e "Recorrências" (108px) são parte da causa: um
   desenho calibrado com "Home" e "Billing" estoura ao ser traduzido, e este
   produto é todo em português.

   Em coluna o problema simplesmente não existe — o espaço vertical é o que
   sobra. É o que Stripe, Shopify e Notion fazem, e pela mesma razão: eles
   também têm mais destinos do que cabe numa linha.

   SÓ NO DESKTOP. Abaixo de 820px a barra de topo some e a gaveta assume, e
   aquele caminho continua exatamente como estava. Por isso tudo aqui mora
   dentro da consulta de mídia, e o padrão da coluna é não existir. */
.lateral{display:none}

@media (min-width:821px){
  :root{--lateral-l:214px}

  .lateral{
    display:block;position:fixed;left:0;top:var(--barra-h, 57px);bottom:0;
    width:var(--lateral-l);z-index:30;
    padding:14px 12px;overflow-y:auto;overscroll-behavior:contain;
    background:var(--paper);border-right:1px solid var(--line);
  }
  .lateral-in{display:flex;flex-direction:column;gap:2px;min-height:100%}
  .lateral a{
    display:flex;align-items:center;gap:11px;
    padding:9px 11px;border-radius:8px;text-decoration:none;
    font-family:var(--display);font-stretch:92%;font-size:14.5px;font-weight:600;
    color:var(--muted);
  }
  .lateral a:hover{background:var(--surface);color:var(--ink)}
  .lateral a[aria-current="page"]{background:var(--azul-fraco);color:var(--azul)}
  .lateral a:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
  .lat-ico{flex:none;width:20px;height:20px;display:grid;place-items:center}
  .lat-ico svg{
    width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;
  }

  /* O risco empurra Conta e Operação para o pé da coluna: são as telas de
     ajuste, e separá-las do uso diário é o que faz uma lista de nove itens
     parecer curta. Numa janela baixa o `margin-top:auto` não tem folga para
     consumir e some sozinho — aí o risco volta a ser só um risco, que é o
     desfecho certo, e não um item empurrado para fora da vista. */
  .lateral-risco{
    margin-top:auto;margin-bottom:8px;margin-left:8px;margin-right:8px;
    height:1px;background:var(--line-soft);
  }

  /* A COLUNA DE LEITURA NÃO ENCOLHE, ela só passa a ser centrada no espaço
     que sobra à direita da lateral. Somar a largura da lateral ao
     `max-width` E ao `padding-left` faz exatamente isso: com
     `box-sizing:border-box` a caixa de conteúdo continua com os mesmos
     960px de antes, e a conta do `margin:0 auto` cai certinha no meio do
     espaço livre. Sem isso, a coluna ficaria centrada na tela inteira e
     pareceria empurrada para a direita. */
  .conteudo{
    padding-left:calc(20px + var(--lateral-l));
    max-width:calc(1000px + var(--lateral-l));
  }
  .conversa{
    padding-left:var(--lateral-l);
    max-width:calc(720px + var(--lateral-l));
  }
}


/* ══════════════════════════════════════════════════════════════════════
   A AGENDA NA PÁGINA PÚBLICA
   ══════════════════════════════════════════════════════════════════════

   DOIS QUADROS, e não um. A agenda tem duas caras e as duas precisam ser
   vistas: a régua do dia, que é onde se OLHA, e a conversa, que é por onde
   se MARCA e se PERGUNTA. Mostrar só a régua venderia mais um calendário —
   e calendário todo mundo já tem. O que é novo aqui é falar com ele.

   O prefixo `lp-` isola estas regras do aplicativo. As classes de dentro
   (`.ag-linha`, `.bloco-c`) desenham dado de verdade e mudam com ele;
   estas desenham um retrato parado. Misturar as duas faria uma mexida na
   tela do produto quebrar a propaganda, ou o contrário. */
.lp-agenda{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px}
@media (max-width:760px){.lp-agenda{grid-template-columns:1fr}}
.lp-quadro{margin:0}
.lp-cap{
  margin:0 0 12px;font-family:var(--display);font-stretch:92%;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
}

/* A régua em pixels crus, como a de verdade. Aqui não há dado nem cálculo:
   os dois blocos têm posição escrita à mão, e é justamente por isso que ela
   nunca vai divergir do que o cliente vê depois de entrar. */
.lp-regua{
  display:grid;grid-template-columns:46px 1fr;
  border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;
}
.lp-horas{background:var(--surface);border-right:1px solid var(--line-soft)}
.lp-horas span{
  display:block;height:44px;box-sizing:border-box;padding:3px 7px 0 0;
  text-align:right;font-size:10.5px;color:var(--muted);
  border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums;
}
.lp-horas span:first-child{border-top:0}
.lp-pista{
  position:relative;height:264px;background:var(--paper);
  background-image:repeating-linear-gradient(
    to bottom, var(--line-soft) 0, var(--line-soft) 1px,
    transparent 1px, transparent 44px);
}
.lp-bloco{
  position:absolute;left:4px;right:4px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:4px 8px;border-radius:6px;
  background:var(--azul-fraco);border-left:3px solid var(--azul);color:var(--azul);
}
.lp-bloco b{
  font-size:12.5px;font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lp-bloco i{font-style:normal;font-size:10.5px;opacity:.85}

.lp-fala{max-width:88%;padding:9px 12px;border-radius:13px;font-size:13.5px;margin-bottom:8px}
.lp-fala.me{margin-left:auto;background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.lp-fala.ia{background:var(--surface);color:var(--ink);border-bottom-left-radius:4px}
.lp-lista{
  border:1px solid var(--line-soft);border-radius:10px;
  padding:8px 10px;background:var(--surface);
}
.lp-lista span{
  display:flex;gap:10px;align-items:baseline;padding:5px 2px;
  font-size:13.5px;color:var(--ink);
}
.lp-lista b{
  min-width:42px;font-size:13px;color:var(--azul);
  font-variant-numeric:tabular-nums;font-weight:700;
}
.lp-nota{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}


/* ── a escolha do fundo, no pé da conversa ────────────────────────────
   A linha existe para o botão sobreviver ao celular: `.dica-chat` some
   abaixo de 820px, e o botão pendurado dentro dela sumiria junto. */
.rodape-chat{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
.rodape-chat .dica-chat{margin:0}
.tema-troca{
  display:inline-flex;align-items:center;gap:7px;flex:none;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:5px 12px 5px 9px;
}
.tema-troca:hover{background:var(--surface);color:var(--ink)}
.tema-troca:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.tema-troca svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* Qual ícone aparece sai do JS, pela classe no botão — e não de
   `:root[data-tema]`, que erraria enquanto ninguém tiver escolhido: aí não
   há atributo nenhum e o fundo pode estar escuro por conta do sistema. */
.tema-troca .tema-sol{display:none}
.tema-troca.escuro .tema-sol{display:block}
.tema-troca.escuro .tema-lua{display:none}



/* ── as metas em barras pareadas, no painel ───────────────────────────
   Duas barras coladas por categoria: o que saiu e o teto. Coladas porque a
   comparação que interessa é entre as duas — um espaço no meio faria o olho
   comparar cada uma com as das outras categorias primeiro.

   A escala é comum a todas as metas, então o comprimento também compara
   categorias entre si: a meta de mil reais nasce maior que a de trezentos. */
.mb-lista{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.mb-topo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:7px;
}
.mb-nome{
  font-weight:600;font-size:14.5px;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mb-pct{font-size:12.5px;font-weight:600;flex:none;font-variant-numeric:tabular-nums}

/* 2px entre as duas — coladas, mas não fundidas: sem nenhuma fresta elas
   viram um bloco só e o olho perde a fronteira. */
.mb-par{display:flex;flex-direction:column;gap:2px}
.mb-linha{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px}
.mb-rot{
  font-family:var(--display);font-stretch:92%;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:right;
}
.mb-pista{display:block;height:100%;min-width:0}
.mb-barra{
  display:block;height:15px;border-radius:4px;
  /* A barra cresce a partir da esquerda ao abrir a tela. É a única animação
     do painel, e existe porque o desenho aparece de uma vez com a página:
     sem ela, quem chega não percebe que o comprimento é a informação. */
  animation:mb-cresce .45s cubic-bezier(.22,.9,.28,1);
  transform-origin:left center;
}
.mb-real{box-shadow:inset 0 -1px 0 rgba(0,0,0,.06)}
/* O teto em cinza neutro, e não numa tonalidade da cor da categoria: ele não
   é uma segunda medida da categoria, é a régua. Pintá-lo de laranja claro ao
   lado do laranja do gasto faria duas coisas diferentes parecerem a mesma. */
.mb-teto{background:var(--surface-2);border:1px solid var(--line)}
.mb-val{
  font-size:12.5px;font-weight:600;color:var(--ink);flex:none;
  font-variant-numeric:tabular-nums;
}
.mb-val-teto{color:var(--muted);font-weight:500}
@keyframes mb-cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.mb-barra{animation:none}}

@media (max-width:480px){
  .mb-linha{grid-template-columns:28px 1fr auto;gap:7px}
  .mb-val{font-size:11.5px}
  .mb-rot{font-size:9px}
}

/* ── a casa, na página pública ─────────────────────────────────────────
   Dois quadros: os dois celulares lançando e o extrato único. Separados de
   propósito — o produto aqui não é "vários logins", é o fato de que duas
   entradas viram UMA conta. Mostrar só a conversa deixaria isso implícito, e
   é exatamente a parte que faz alguém convidar o cônjuge. */
.lp-casa{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px}
@media (max-width:760px){.lp-casa{grid-template-columns:1fr}}

.lp-fone + .lp-fone{margin-top:14px}
.lp-quem{
  display:flex;align-items:center;gap:7px;margin-bottom:6px;
  font-size:12.5px;color:var(--muted);
}
.lp-ini{
  width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;
  font-family:var(--display);font-stretch:92%;font-size:11px;font-weight:700;
}
/* Duas cores, e nenhuma delas é a cor de marca: a inicial identifica PESSOA, e
   pintar uma delas de azul faria parecer que ela é a dona e a outra a visita. */
.lp-ini-a{background:var(--azul-fraco);color:var(--azul)}
.lp-ini-f{background:var(--verde-fraco);color:var(--verde)}
/* Duas classes no seletor, e não uma: `.lp-fala.me` já vale por duas, e uma
   regra de peso menor escrita depois não vence — sairiam as duas bolhas azuis,
   que é justamente o que a seção existe para não dizer. */
.lp-fala.lp-fala-f{background:var(--verde)}

.lp-extrato{display:flex;flex-direction:column}
.lp-ext{
  display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:10px;
  padding:9px 2px;border-top:1px solid var(--line-soft);
}
.lp-ext:first-child{border-top:0}
.lp-ext-ico{font-size:17px;line-height:1;text-align:center}
.lp-ext-meio{min-width:0}
.lp-ext-meio b{
  display:block;font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lp-ext-meio span{display:block;font-size:12px;color:var(--muted)}
.lp-ext-val{
  font-size:13.5px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;flex:none;
}
/* O autor em pastilha, e não em texto solto: é a informação que faz a linha
   ser de alguém, e ela precisa ser lida sem competir com o valor. */
.lp-autor{
  flex:none;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
}
@media (max-width:560px){
  .lp-ext{grid-template-columns:24px 1fr auto;gap:8px}
  .lp-autor{grid-column:2;justify-self:start;margin-top:2px}
}

/* ── o painel: para onde foi, em barras verticais ─────────────────────
   O mesmo desenho do gráfico da conversa, de propósito: valor em cima,
   ícone e nome embaixo, escala pela maior categoria. Quem aprendeu a ler um
   bloco do produto lê o outro.

   O teto de largura existe porque o SVG escala junto com o contêiner: sem
   ele, num monitor largo a fonte de 9 unidades vira letreiro ao lado de um
   texto de 14. */
.gb-caixa{max-width:660px;margin:12px auto 16px}
.gb-svg{display:block;width:100%;height:auto;overflow:visible}
.gb-svg text{text-anchor:middle;font-family:var(--display);fill:var(--muted)}
.gb-base{stroke:var(--line);stroke-width:1}
.gb-valor{font-size:9.5px;font-weight:600;fill:var(--ink-2);font-variant-numeric:tabular-nums}
.gb-icone{font-size:14px;font-family:var(--emoji),var(--texto)}
.gb-nome{font-size:9px}
.gb-barra{transition:opacity .15s}
.gb-caixa:hover .gb-barra{opacity:.65}
.gb-caixa .gb-barra:hover{opacity:1}

.gb-legenda{display:flex;flex-direction:column;gap:1px}
.gb-item{
  display:grid;grid-template-columns:10px minmax(0,1fr) auto 38px;align-items:baseline;
  gap:9px;padding:6px 2px;border-top:1px solid var(--line-soft);
}
.gb-item:first-child{border-top:0}
.gb-cor{width:10px;height:10px;border-radius:3px;align-self:center}
.gb-nomeL{
  font-size:14px;color:var(--ink);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gb-val{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gb-pct{font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
/* A linha do total não é mais uma categoria: é a conferência. */
.gb-total{border-top:1px solid var(--line);margin-top:2px}
.gb-total .gb-nomeL,.gb-total .gb-val{font-weight:700}
.gb-vazio{background:none!important}

@media (max-width:480px){
  /* No celular a coluna fica com ~40px: o nome vira reticências e some. O
     ícone continua, e a lista embaixo diz quem é quem. */
  .gb-nome{display:none}
  .gb-icone{font-size:15px}
  .gb-item{grid-template-columns:10px minmax(0,1fr) auto;gap:7px}
  .gb-pct{display:none}
}

/* ── quem movimentou: duas roscas ─────────────────────────────────────── */
.rq-par{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.rq-par{grid-template-columns:1fr;gap:22px}}
.rq-tit{
  margin:0 0 8px;font-family:var(--display);font-stretch:92%;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
}
.rq-caixa{position:relative;max-width:150px;margin:0 auto 10px}
.rq-svg{display:block;width:100%;height:auto}
/* O total no miolo. É o número que a rosca não sabe dizer: as fatias contam a
   divisão, e a pessoa quer saber a divisão DE QUANTO. */
.rq-centro{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--display);font-stretch:90%;font-weight:700;font-size:15px;
  color:var(--ink);
}
.rq-fatia{transition:opacity .15s}
.rq-caixa:hover .rq-fatia{opacity:.75}
.rq-caixa .rq-fatia:hover{opacity:1}
.rq-legenda{display:flex;flex-direction:column;gap:1px}
/* TRÊS COLUNAS, e não quatro. Num bloco de meia largura a quarta coluna
   comia o nome — "Flávia" virava "Flá…", que é justamente a informação que a
   rosca não sabe dar sozinha. O percentual foi para junto do valor. */
.rq-item{
  display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:baseline;
  gap:8px;padding:4px 2px;font-size:13px;
}
.rq-cor{width:9px;height:9px;border-radius:2px;align-self:center}
.rq-nome{color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-val{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rq-pct{
  font-style:normal;color:var(--muted);font-weight:400;font-size:12px;
  margin-left:5px;font-variant-numeric:tabular-nums;
}
.rq-vazio{margin:0;font-size:13px;color:var(--muted)}

/* ── seis meses ───────────────────────────────────────────────────────
   Barras verticais pareadas, a mesma gramática das metas: quem aprendeu a ler
   um bloco do painel lê os outros. */
.ev{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;height:170px;align-items:end}
.ev-mes{display:flex;flex-direction:column;align-items:center;height:100%;gap:6px}
.ev-barras{display:flex;align-items:flex-end;gap:3px;height:100%;width:100%;justify-content:center}
.ev-b{
  display:block;width:38%;max-width:22px;border-radius:4px 4px 0 0;
  animation:ev-sobe .45s cubic-bezier(.22,.9,.28,1);transform-origin:bottom center;
}
/* Sem rótulo em cima da barra: numa coluna de ~50px, "R$ 2,1 mil" é mais
   largo que a coluna e vaza por cima da vizinha. O valor exato mora no cartão
   "SAIU" do topo e no `title` de cada mês; aqui se lê a tendência. */
.ev-mes{cursor:default}
.ev-entrou{background:var(--verde)}
.ev-saiu{background:var(--vermelho)}
.ev-rot{
  font-family:var(--display);font-stretch:92%;font-size:11px;color:var(--muted);
  text-transform:capitalize;
}
/* O mês aberto no seletor fica aceso: sem isso a coluna da direita parece
   "o último", e o painel pode estar mostrando março. */
.ev-agora .ev-rot{color:var(--azul);font-weight:700}
@keyframes ev-sobe{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.ev-b{animation:none}}

.ev-chave{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:12px 0 0;font-size:12px;color:var(--muted);
}
.ev-ch{width:10px;height:10px;border-radius:3px;flex:none;margin-left:8px}
.ev-chave .ev-ch:first-child{margin-left:0}


/* ── consumo-apenas: o que some dentro do aplicativo da loja ───────────
   A política de pagamentos do Google Play proíbe um app da loja de levar a
   pessoa a outro meio de pagamento. A saída oficial é o app de
   "consumo-apenas": entra, usa o que pagou em outro lugar, e não vende nada
   por dentro.

   Esconder por CSS, e não por JavaScript em cada tela, tem uma razão: o que
   for marcado com `.so-fora-da-loja` some ANTES da primeira pintura, sem
   piscar o preço na tela — e um preço que pisca é um preço que o revisor
   pode ver. */
:root[data-loja="play"] .so-fora-da-loja{display:none!important}

/* ── a conversa que se escreve sozinha, no herói ───────────────────────
   O telefone mostrava UMA troca, parada. Quem chega na página tem três
   segundos de atenção, e uma imagem parada gasta os três dizendo o que uma
   frase já disse. A conversa rodando mostra o que nenhum texto mostra: que
   isso é rápido, e que serve para muita coisa diferente.

   A ALTURA É FIXA E O CONTEÚDO CRESCE DE BAIXO PARA CIMA, como num mensageiro
   de verdade. Sem isso a página inteira pularia a cada mensagem nova — e o
   botão "Começar de graça" sairia de debaixo do dedo entre o olhar e o
   toque. */
/* O FIO ROLA, e não se limpa. As mensagens acumulam e a barra de rolagem
   aparece — porque é isso que o produto é. Um carrossel que apaga a tela a
   cada troca diria o contrário: que cada conversa é um episódio solto. */
.thread{
  height:300px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
}
@media (max-width:820px){.thread{height:262px}}
.lp-fio{height:270px;padding:4px 2px}

.demo-fala{
  display:inline-block;white-space:pre-wrap;
}
/* O cursor pisca só enquanto se digita. Um cursor eterno numa mensagem já
   escrita é ruído que o olho persegue. */
.demo-cursor::after{
  content:"";display:inline-block;width:2px;height:1em;margin-left:1px;
  background:currentColor;vertical-align:-2px;animation:demo-pisca 1s steps(2) infinite;
}
@keyframes demo-pisca{50%{opacity:0}}

.demo-entra{animation:demo-sobe .26s cubic-bezier(.22,.9,.28,1)}
@keyframes demo-sobe{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Os três pontinhos enquanto o assistente "pensa". Mesma linguagem do
   aplicativo de verdade — ver `.pensando` acima. */
.demo-pensando{
  align-self:flex-start;display:flex;gap:4px;padding:12px 15px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:16px;border-bottom-left-radius:5px;
}
.demo-pensando i{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:demo-pula 1.1s infinite;
}
.demo-pensando i:nth-child(2){animation-delay:.15s}
.demo-pensando i:nth-child(3){animation-delay:.3s}
@keyframes demo-pula{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* O cartão do compromisso, quando a cena é da agenda. */
.demo-comp{
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--ambar);border-radius:12px;padding:10px 12px;
}
.demo-comp .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.demo-comp b{font-size:14px;color:var(--ink)}
.demo-comp .hora{
  font-family:var(--display);font-stretch:88%;font-weight:700;font-size:13.5px;
  color:var(--ambar);font-variant-numeric:tabular-nums;
}
.demo-comp .meta{font-size:12px;color:var(--muted);margin-top:2px}

.lanc.positivo .val{color:var(--verde)}

@media (prefers-reduced-motion:reduce){
  .demo-entra,.demo-pensando i,.demo-cursor::after{animation:none}
  .demo-cursor::after{display:none}
}

/* ── instalar o aplicativo, na tela de Conta ──────────────────────────
   A lista numerada é a única da tela em que a ordem é informação de verdade:
   no iPhone, tocar em "Adicionar à Tela de Início" antes de abrir o
   Compartilhar não existe como caminho. */
.passo-instalar{
  list-style:none;counter-reset:pi;margin:16px 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.passo-instalar li{
  counter-increment:pi;display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:11px;align-items:start;
}
.passo-instalar li > div{min-width:0}
.passo-instalar li::before{
  content:counter(pi);
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--azul-fraco);color:var(--azul);
  font-family:var(--display);font-stretch:92%;font-size:12.5px;font-weight:700;
}
.passo-instalar b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.passo-instalar span{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.passo-instalar i{font-style:normal;font-weight:700}

.instalado{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:14.5px;color:var(--verde);font-weight:600;
}
.instalado span{
  width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--verde-fraco);font-size:13px;
}

/* ── a foto do comprovante, desenhada ─────────────────────────────────
   Um cupom em CSS, e não uma imagem: o que precisa ser reconhecido aqui é o
   FORMATO de um comprovante, não um comprovante específico — e uma imagem
   seria mais um pedido de rede numa página que vende leveza. */
.demo-bolha-foto{padding:8px 8px 6px}
.demo-cupom{
  width:104px;background:#fff;border-radius:6px;padding:9px 8px;
  display:flex;flex-direction:column;gap:5px;
}
.dc-topo{display:block;height:7px;border-radius:2px;background:#c9d2de}
.dc-l{display:block;height:4px;border-radius:2px;background:#e3e9f1}
.dc-l.curta{width:62%}
.dc-total{
  display:block;margin-top:3px;padding-top:5px;border-top:1px dashed #c9d2de;
  font-family:var(--display);font-stretch:90%;font-weight:700;font-size:11.5px;
  color:#141922;text-align:right;
}
.demo-legenda{display:block;margin-top:5px;font-size:11px;opacity:.8}

/* A agenda consultada, dentro do fio. */
.demo-dia{
  align-self:flex-start;max-width:88%;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:14px;padding:9px 12px;display:flex;flex-direction:column;gap:5px;
}
.dl-linha{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--ink)}
.dl-linha b{
  min-width:42px;color:var(--azul);font-variant-numeric:tabular-nums;
  font-family:var(--display);font-stretch:88%;font-size:12.5px;
}