/* Contas: a aparência (identidade/design-guide.md, D-17, que substitui o mosaico do Bento da D-07).
   Pouca coisa por tela, um número grande no topo, listas limpas e a barra de abas flutuante.
   Claro e escuro seguem o celular; a pessoa pode fixar um dos dois em Você > Aparência. */

@font-face {
  font-family: "Geist";
  src: url("../fontes/geist.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* ---------- cores: escuro é o padrão; o claro vem do celular ou da escolha ---------- */
:root {
  --fundo: #0b0b0d;
  --bloco: #17171a;
  --bloco-2: #222226;
  --folha: #151518;
  --linha: #26262b;
  --texto: #f5f5f7;
  --apagado: #8e8e96;
  --destaque: #7c5cff;
  --destaque-2: #5b3df0;
  --destaque-tx: #ffffff;
  --entra: #4ade80;
  --ambar: #fbbf24;
  --perigo: #f87171;
  --sombra: none;
  --vidro: rgba(23, 23, 26, .82);
  --borda-vidro: rgba(255, 255, 255, .07);
  --reflexo: linear-gradient(160deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,0) 55%);
  --trilho-anel: rgba(255, 255, 255, .09);
  --barra-sombra: rgba(0, 0, 0, .5);
  /* paleta das categorias (D-08): fundo pastel, ícone no tom escuro do par */
  --coral: #ff8a65;    --coral-tx: #2a0e05;
  --lavanda: #c4b5fd;  --lavanda-tx: #1e1240;
  --menta: #86efac;    --menta-tx: #052e16;
  --amarelo: #fde68a;  --amarelo-tx: #3a2a00;
  --celeste: #7dd3fc;  --celeste-tx: #032a3d;
  --raio: 24px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --fundo: #f3f3f6; --bloco: #ffffff; --bloco-2: #ececf1; --folha: #ffffff; --linha: #ececf0;
    --texto: #0b0b0d; --apagado: #6b6b75; --destaque: #6a4cf5; --destaque-2: #5435e6;
    --entra: #15803d; --perigo: #dc2626; --ambar: #b45309; --vidro: rgba(255, 255, 255, .86);
    --borda-vidro: rgba(15, 15, 30, .05); --reflexo: linear-gradient(transparent, transparent); --trilho-anel: rgba(15, 15, 30, .08); --barra-sombra: rgba(20, 20, 50, .12);
    --sombra: 0 1px 2px rgba(15, 15, 30, .04), 0 10px 28px rgba(15, 15, 30, .06);
    --toast-acao: #b8a8ff;
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --fundo: #f3f3f6; --bloco: #ffffff; --bloco-2: #ececf1; --folha: #ffffff; --linha: #ececf0;
  --texto: #0b0b0d; --apagado: #6b6b75; --destaque: #6a4cf5; --destaque-2: #5435e6;
  --entra: #15803d; --perigo: #dc2626; --ambar: #b45309; --vidro: rgba(255, 255, 255, .86);
    --borda-vidro: rgba(15, 15, 30, .05); --reflexo: linear-gradient(transparent, transparent); --trilho-anel: rgba(15, 15, 30, .08); --barra-sombra: rgba(20, 20, 50, .12);
  --sombra: 0 1px 2px rgba(15, 15, 30, .04), 0 10px 28px rgba(15, 15, 30, .06);
  --toast-acao: #b8a8ff;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
/* Sem zoom no app (pedido de 05/10/2026): o toque duplo não amplia, e a pinça é barrada no app.js. */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { max-width: 460px; min-height: 100%; margin: 0 auto; padding: env(safe-area-inset-top) 0 0; }
.tela { padding: 14px 18px calc(120px + env(safe-area-inset-bottom) + var(--faixa-cookies, 0px)); display: none; }
.tela.ativa { display: block; }

/* ---------- cabeçalho ---------- */
.cabeca { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-bottom: 14px; }
.cabeca .titulo, .cabeca .titulo-botao, .cabeca .ola { flex: 1; min-width: 0; }
.titulo { font-size: clamp(28px, 8.5vw, 34px); font-weight: 700; letter-spacing: -.035em; margin: 0; line-height: 1.1; }
.tela > .titulo { margin-bottom: 14px; }
.titulo-botao { font-size: clamp(28px, 8.5vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.titulo-botao::after { content: " ▾"; font-size: 16px; color: var(--apagado); vertical-align: 4px; }
.sub { color: var(--apagado); margin: 4px 0 16px; }
.ola small { display: block; color: var(--apagado); font-size: 13px; }
.ola b { font-size: 22px; letter-spacing: -.02em; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bloco-2); color: var(--texto); font-weight: 700; font-size: 17px; text-decoration: none;
}
.avatar.grande { width: 58px; height: 58px; font-size: 22px; background: var(--destaque); color: var(--destaque-tx); }
.redondo {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bloco); box-shadow: var(--sombra); font-size: 20px;
}
.redondo svg { width: 21px; height: 21px; }
.setas { display: flex; gap: 8px; }
.voltar { color: var(--apagado); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- o número do mês ---------- */
.heroi {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; width: 100%;
  padding: 22px 22px 20px; border-radius: 28px; text-align: left; color: var(--destaque-tx);
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 46%), linear-gradient(140deg, var(--destaque) 0%, var(--destaque-2) 100%);
  box-shadow: 0 18px 40px -18px rgba(92, 61, 240, .7);
}
.heroi::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; border: 26px solid rgba(255,255,255,.08); }
.heroi small { font-size: 14px; opacity: .85; font-weight: 500; }
.heroi b { font-size: clamp(38px, 12vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; white-space: nowrap; }
.heroi b .cent, .grande .cent { font-size: .5em; letter-spacing: -.02em; }
.heroi .nota { font-size: 13px; opacity: .85; }
.heroi .linha-heroi { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; }
.heroi .linha-heroi span { display: flex; flex-direction: column; }
.heroi .linha-heroi em { font-style: normal; opacity: .75; font-size: 12px; }
.heroi .linha-heroi strong { font-size: 16px; font-weight: 650; }

/* ---------- atalhos redondos ---------- */
.atalhos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px;
  background: var(--bloco); border-radius: var(--raio); padding: 14px 6px 12px; box-shadow: var(--sombra);
}
.atalhos button { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; min-height: 44px; }
.atalhos i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bloco-2); }
.atalhos svg { width: 21px; height: 21px; }

/* ---------- dois cartões lado a lado ---------- */
.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cartao { background: var(--bloco); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; }
.cartao small { color: var(--apagado); font-size: 13px; }
.cartao b { font-size: 24px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; overflow-wrap: anywhere; }
.cartao .nota { color: var(--apagado); font-size: 12px; }
.cartao .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; }
.cartao .ico svg { width: 18px; height: 18px; }

/* ---------- listas ---------- */
.secao-cabeca { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 2px 10px; }
.secao-cabeca h2, .secao { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.secao { margin: 24px 2px 10px; }
.secao-cabeca a { color: var(--destaque); font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.cartao-lista, .dia { background: var(--bloco); border-radius: var(--raio); padding: 4px 16px; box-shadow: var(--sombra); }
.dia { margin-top: 12px; }
.dia h3 { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 500; color: var(--apagado); margin: 12px 0 2px; }
.linha-l { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linha); width: 100%; text-align: left; }
.cartao-lista > .linha-l:first-child, .dia h3 + .linha-l { border-top: 0; }
.linha-l > span:nth-child(2) { min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.linha-l .q { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.linha-l .q svg { width: 19px; height: 19px; }
.linha-l .q:not([class*="cor-"]) { background: var(--bloco-2); color: var(--texto); }
.linha-l .o { display: block; font-size: 12.5px; color: var(--apagado); font-weight: 400; margin-top: 1px; }
.linha-l .v { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.linha-l .v small { display: block; font-size: 12px; color: var(--apagado); font-weight: 500; }
.linha-l .v.entra { color: var(--entra); }
.linha-l.novo { background: var(--bloco-2); margin: 0 -16px; padding: 11px 16px; border-radius: 16px; border-top-color: transparent; }
.linha-l.estatica { cursor: default; }
.tag { display: inline-block; font-size: 10.5px; font-weight: 600; background: var(--bloco-2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; color: var(--apagado); vertical-align: 1px; }
.trilho-cat { grid-column: 2 / 4; height: 5px; border-radius: 999px; background: var(--bloco-2); overflow: hidden; margin-top: -4px; }
.trilho-cat i { display: block; height: 100%; border-radius: 999px; background: var(--destaque); }

/* ---------- vazio ---------- */
.vazio { background: var(--bloco); border-radius: var(--raio); padding: 20px; margin-top: 12px; box-shadow: var(--sombra); }
.vazio p { margin: 0 0 14px; color: var(--apagado); }

/* ---------- botões ---------- */
.pilula { background: var(--bloco); box-shadow: var(--sombra); border-radius: 999px; min-height: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; }
.pilula.clara { background: var(--texto); color: var(--fundo); box-shadow: none; }
.anotar { background: var(--destaque); color: var(--destaque-tx); border-radius: 18px; padding: 16px; min-height: 54px; font-weight: 650; font-size: 16px; flex: none; text-align: center; }
.anotar:disabled { opacity: .4; cursor: default; }
.botao-n { background: var(--bloco-2); border-radius: 18px; padding: 15px; min-height: 52px; font-weight: 650; text-align: center; }
.botao-n.perigo, .opcoes .perigo { color: var(--perigo); }
.ver-todos { display: block; width: 100%; margin-top: 12px; background: var(--bloco); box-shadow: var(--sombra); border-radius: 18px; padding: 15px; font-weight: 600; text-align: center; }
.botoes-linha { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.botoes-linha.fim { margin-top: 26px; justify-content: space-between; align-items: center; }
.botoes-linha.fim .anotar { flex: 1; }

/* ---------- lançamentos ---------- */
.mes-troca { display: flex; align-items: center; justify-content: space-between; background: var(--bloco); box-shadow: var(--sombra); border-radius: 999px; padding: 4px; margin-bottom: 10px; }
.mes-troca button { width: 44px; height: 44px; border-radius: 50%; font-size: 20px; }
.mes-troca span { font-weight: 600; }
.busca { display: flex; align-items: center; gap: 10px; background: var(--bloco); box-shadow: var(--sombra); border-radius: 999px; padding: 0 16px; margin-bottom: 10px; color: var(--apagado); }
.busca svg { width: 19px; height: 19px; flex: none; }
.busca input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 13px 0; font-size: 16px; color: var(--texto); }
.segmento { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bloco-2); border-radius: 14px; padding: 4px; margin-bottom: 10px; }
.segmento button { min-height: 40px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--apagado); text-align: center; }
.segmento button[aria-pressed="true"] { background: var(--bloco); color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { flex: 1; border-radius: 999px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; background: var(--bloco-2); white-space: nowrap; text-align: center; }
.chips button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.chips.rolar { flex-wrap: nowrap; overflow-x: auto; padding: 0 24px 4px 0; margin-bottom: 4px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.chips.rolar::-webkit-scrollbar { display: none; }
.chips.rolar button { flex: none; }
.chips.rolar:empty { display: none; }

/* ---------- mês ---------- */
.resumo-mes b { font-size: 34px; }
.resumo-mes .linha-heroi { display: flex; gap: 22px; margin-top: 6px; }
.resumo-mes .linha-heroi span { display: flex; flex-direction: column; font-size: 16px; font-weight: 650; }
.resumo-mes .linha-heroi em { font-style: normal; font-size: 12px; color: var(--apagado); font-weight: 400; }
.cartao.ano { margin-top: 10px; gap: 10px; }
.barras-ano { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.barras-ano button { flex: 1; height: 100%; display: flex; gap: 3px; align-items: flex-end; border-radius: 8px; }
.barras-ano i { flex: 1; border-radius: 6px 6px 3px 3px; min-height: 3px; }
.barras-ano .e { background: var(--entra); opacity: .55; } .barras-ano .s { background: var(--destaque); opacity: .45; }
.barras-ano button.ativo .e { opacity: 1; } .barras-ano button.ativo .s { opacity: 1; }
.meses-ano { display: flex; gap: 8px; font-size: 11px; color: var(--apagado); }
.meses-ano span { flex: 1; text-align: center; } .meses-ano .ativo { color: var(--texto); font-weight: 700; }
.legenda-ano { display: flex; gap: 14px; font-size: 12px; color: var(--apagado); }
.legenda-ano i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.legenda-ano .cor-menta { background: var(--entra); } .legenda-ano .cor-coral { background: var(--destaque); }
.var { font-size: 12px; font-weight: 600; color: var(--apagado); }

/* ---------- você ---------- */
.perfil { display: flex; align-items: center; gap: 14px; background: var(--bloco); box-shadow: var(--sombra); border-radius: var(--raio); padding: 16px; }
.perfil b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.perfil small { display: block; color: var(--apagado); font-size: 13px; margin-top: 2px; }
.grupo { font-size: 13px; font-weight: 500; color: var(--apagado); margin: 22px 4px 8px; }
.opcoes { background: var(--bloco); box-shadow: var(--sombra); border-radius: var(--raio); padding: 0 16px; }
#opcoes-conta { margin-top: 14px; }
#opcoes-conta:not(:has(button:not([hidden]))) { display: none; }
.opcoes button { position: relative; display: block; width: 100%; text-align: left; font-weight: 550; padding: 14px 28px 14px 0; min-height: 56px; border-top: 1px solid var(--linha); }
.opcoes button:first-child, .opcoes button[hidden] + button:not([hidden]):nth-child(2) { border-top: 0; }
.opcoes button::after { content: "›"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--apagado); font-size: 22px; font-weight: 400; }
.opcoes button small { display: block; font-weight: 400; color: var(--apagado); font-size: 13px; margin-top: 1px; }
.opcoes .valor-op { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--apagado); font-size: 14px; font-weight: 500; }
.rodape-voce, .entrar-rodape { color: var(--apagado); font-size: 12px; margin-top: 22px; text-align: center; }
.rodape-voce a, .entrar-rodape a { color: var(--apagado); display: inline-block; padding: 12px 0; }

/* ---------- folhas que sobem ---------- */
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 89; }
.folha {
  position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 460px; max-height: 92%;
  transform: translate(-50%, 105%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  background: var(--folha); border-radius: 30px 30px 0 0; z-index: 90; /* acima da faixa de cookies (80) */
  padding: 6px 18px 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; touch-action: pan-y;
}
.folha::after { content: ""; display: block; flex: none; height: calc(14px + env(safe-area-inset-bottom)); }
.folha > * { flex-shrink: 0; }
.folha-aberta .veu { opacity: 1; pointer-events: auto; }
.folha.aberta { transform: translate(-50%, 0); }
.folha.arrastando { transition: none; }
:root[data-movimento="parado"] .folha, :root[data-movimento="parado"] .veu { transition: none; }
.alca { width: 40px; height: 5px; border-radius: 3px; background: var(--linha); margin: 0 auto; padding: 10px 0; box-sizing: content-box; background-clip: content-box; cursor: grab; }
.folha h2 { font-size: 14px; font-weight: 500; color: var(--apagado); text-align: center; margin: 0; }
.folha .grande { font-size: 46px; font-weight: 700; letter-spacing: -.045em; text-align: center; line-height: 1.05; }
.tipo { display: grid; grid-template-columns: 1fr 1fr; background: var(--bloco-2); border-radius: 14px; padding: 4px; }
.tipo button { border-radius: 11px; min-height: 44px; font-weight: 600; font-size: 14px; color: var(--apagado); text-align: center; }
.tipo button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.valor { display: flex; justify-content: center; align-items: baseline; gap: 6px; padding: 6px 0; }
.valor span { font-size: 24px; color: var(--apagado); font-weight: 600; }
.valor input { width: 7ch; min-width: 4ch; background: none; border: 0; outline: 0; text-align: left; font-size: 56px; font-weight: 700; letter-spacing: -.045em; padding: 0; caret-color: var(--destaque); }
.valor input::placeholder { color: var(--apagado); opacity: .45; }
.rotulo { font-size: 13px; color: var(--apagado); margin: 0 0 -6px; }
/* Categorias: bolinha com ícone e o nome embaixo, numa faixa que desliza de lado. */
.cats { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 76px; gap: 10px 4px; overflow-x: auto; padding: 4px 2px 6px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; text-align: center; line-height: 1.2; color: var(--apagado); min-height: 44px; }
.cats button .q { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; transition: transform .12s; }
.cats button .q:not([class*="cor-"]) { background: var(--bloco-2); color: var(--texto); }
.cats button .q svg { width: 22px; height: 22px; }
.cats button[aria-pressed="true"] { color: var(--texto); font-weight: 650; }
.cats button[aria-pressed="true"] .q { box-shadow: 0 0 0 2.5px var(--folha), 0 0 0 4.5px var(--texto); }
.descricao, .data-outra { background: var(--bloco-2); border: 0; border-radius: 14px; padding: 13px 16px; outline: 0; font-size: 16px; }
.descricao::placeholder { color: var(--apagado); }
.data-outra { display: none; margin-top: 8px; width: 100%; }
.data-outra.aberta { display: block; }
.sub-chips { margin-top: 8px; }
.sub-chips:empty { display: none; }
.gr2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.folha > .anotar:last-child, #anotar { position: sticky; bottom: 0; z-index: 2; margin-top: 4px; box-shadow: 0 -14px 18px 6px var(--folha); }
div.descricao { line-height: 1.4; }

/* blocos que sobraram do Bento: opções da folha, ficha e começo guiado */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 86px; gap: 10px; }
.bl { position: relative; border-radius: 20px; padding: 13px 15px; background: var(--bloco-2); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; text-align: left; }
.bl small { font-size: 12.5px; font-weight: 500; opacity: .8; overflow-wrap: anywhere; }
.bl b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.bl .nota { font-size: 12px; opacity: .8; }
.bl.largo { grid-column: span 2; }
.gr2 .bl { min-height: 76px; }
.bl.opcao[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--texto); }
.cor-coral { background: var(--coral); color: var(--coral-tx); }
.cor-lavanda { background: var(--lavanda); color: var(--lavanda-tx); }
.cor-menta { background: var(--menta); color: var(--menta-tx); }
.cor-amarelo { background: var(--amarelo); color: var(--amarelo-tx); }
.cor-celeste { background: var(--celeste); color: var(--celeste-tx); }
.cartao-lista .bl, .ficha-lista .bl { background: none; }
.ficha-lista { background: var(--bloco-2); border-radius: 20px; padding: 2px 16px; }
.ficha-lista div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--linha); }
.ficha-lista div:first-child { border-top: 0; }
.ficha-lista span { color: var(--apagado); }
.ficha-lista b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* formulários */
.form-campo { display: grid; gap: 6px; font-size: 13px; color: var(--apagado); }
.form-campo input { background: var(--bloco-2); border: 1.5px solid transparent; border-radius: 14px; padding: 13px 15px; font-size: 16px; outline: 0; color: var(--texto); }
.form-campo input:focus { border-color: var(--destaque); }
.form-erro { color: var(--perigo); font-size: 13px; min-height: 1em; margin: 0; }

/* ---------- contas, cartões e fatura ---------- */
.cartao-bl { border-radius: var(--raio); padding: 18px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; position: relative; overflow: hidden; }
.cartao-bl::after { content: ""; position: absolute; right: -30px; top: -60px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.18); }
.cartao-bl .linha { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; position: relative; z-index: 1; }
.cartao-bl b.n { font-size: 32px; letter-spacing: -.04em; line-height: 1; }
.cartao-bl b.n .cent { font-size: .55em; }
.cartao-bl .trilho { height: 7px; border-radius: 999px; background: rgba(0,0,0,.14); overflow: hidden; }
.cartao-bl .trilho i { display: block; height: 100%; background: currentColor; }
.estado { font-size: 11px; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }

/* ---------- objetivos (D-67): o cartão do cartão de crédito, com o alvo embaixo do número ---------- */
.objetivo small { font-size: 12.5px; opacity: .8; margin-top: -6px; position: relative; z-index: 1; }
#objetivos > .heroi { margin-bottom: 12px; }

/* ---------- comprovante (D-72) ---------- */
.comprovante-img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 20px; background: var(--bloco-2); }
a.botao-n { display: grid; place-items: center; text-decoration: none; color: inherit; }

/* ---------- saldo dia a dia (D-71) ---------- */
.saldo-dia { margin-top: 10px; gap: 8px; }
.saldo-linha { width: 100%; height: 96px; overflow: visible; }
.saldo-linha polyline { fill: none; stroke: var(--destaque); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.saldo-linha .previsto { stroke-dasharray: 5 5; opacity: .7; }
.saldo-linha .zero { stroke: var(--perigo); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.saldo-linha circle { fill: var(--destaque); } .saldo-linha circle.neg { fill: var(--perigo); }
.saldo-eixo { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--apagado); }
.saldo-nota { margin: 0; font-size: 13px; color: var(--apagado); line-height: 1.45; }
.saldo-nota b { color: var(--texto); font-size: 13px; letter-spacing: 0; }
.saldo-nota .aviso-neg { color: var(--perigo); font-weight: 600; }

/* ---------- relatórios (D-70): até 12 barras, mais finas que as 9 do Mês ---------- */
#relatorios .segmento { margin-bottom: 12px; }
#relatorios .cartao.ano { margin-top: 12px; }
.barras-ano.rel { gap: 4px; }
.barras-ano.rel button { gap: 2px; }
#relatorios .linha-l .q:not([class*="cor-"]) svg { width: 18px; height: 18px; }

/* ---------- etiquetas (D-69) ---------- */
.etiquetas-bloco { display: grid; gap: 8px; }
.etiquetas-bloco .chips.rolar { margin-bottom: 0; }
.tag-etiqueta { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); }

/* ---------- importar extrato (D-68): uma linha por lançamento, com a categoria embaixo ---------- */
.imp-conta { margin: 0; font-size: 13px; }
.imp-lista { background: var(--bloco-2); border-radius: 20px; padding: 2px 14px; }
.imp-linha { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linha); }
.imp-linha:first-child { border-top: 0; }
.imp-linha input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--destaque); margin: 0; }
.imp-linha .imp-texto { min-width: 0; font-weight: 550; overflow-wrap: anywhere; font-size: 14.5px; }
.imp-linha .o { display: block; font-size: 12px; color: var(--apagado); font-weight: 400; }
.imp-linha .v { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14.5px; }
.imp-linha .v.entra { color: var(--entra); }
.imp-linha select { grid-column: 2 / 4; min-height: 40px; border-radius: 12px; border: 0; background: var(--bloco); color: var(--texto); padding: 0 10px; font: inherit; font-size: 14px; }
.imp-linha.ja .imp-texto, .imp-linha.ja .v { opacity: .6; }

/* ---------- limites ---------- */
.limite { background: var(--bloco); box-shadow: var(--sombra); border-radius: 20px; padding: 14px 16px; margin-top: 10px; display: grid; gap: 8px; }
.limite .linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.limite .trilho { height: 7px; border-radius: 999px; background: var(--bloco-2); overflow: hidden; }
.limite .trilho i { display: block; height: 100%; border-radius: 999px; }
.limite .acoes { display: flex; gap: 6px; }
.limite .acoes button { flex: 1; background: var(--bloco-2); border-radius: 12px; min-height: 44px; font-size: 13px; font-weight: 600; text-align: center; }
.saudavel .trilho i { background: var(--entra); } .atencao .trilho i { background: #f59e0b; }
.passou .trilho i, .nolimite .trilho i { background: var(--perigo); }
.limite .rot-estado { font-size: 12px; font-weight: 700; }
.saudavel .rot-estado { color: var(--entra); } .atencao .rot-estado { color: #d97706; } .passou .rot-estado, .nolimite .rot-estado { color: var(--perigo); }
.sem-limite { background: var(--bloco); box-shadow: var(--sombra); border-radius: 20px; padding: 2px 16px; }
.sem-limite button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; border-top: 1px solid var(--linha); text-align: left; }
.sem-limite button:first-child { border-top: 0; }
.sem-limite .acao { color: var(--destaque); font-weight: 600; font-size: 13px; }

/* ---------- começo guiado ---------- */
.comecando .app, .comecando .abas { display: none; }
.comeco #comeco-corpo { display: grid; gap: 10px; margin-top: 16px; }
.item-comeco { background: var(--bloco); box-shadow: var(--sombra); border-radius: 18px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.item-comeco button { color: var(--apagado); font-size: 20px; width: 44px; height: 44px; }
.adicionar { border: 1.5px dashed var(--apagado); border-radius: 18px; padding: 14px; text-align: left; color: var(--apagado); font-weight: 600; min-height: 52px; }
.mini-form { display: grid; gap: 8px; background: var(--bloco); box-shadow: var(--sombra); border-radius: 20px; padding: 14px; }
.mini-form .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- aviso rápido ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom) + var(--faixa-cookies, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--texto); color: var(--fundo); border-radius: 16px; padding: 12px 16px; font-weight: 600; font-size: 14px;
  display: flex; gap: 14px; align-items: center; transition: all .2s; z-index: 95; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* o aviso tem a cor invertida do tema: o Desfazer usa o roxo que contrasta com o fundo dele */
.toast button { color: var(--toast-acao, #5435e6); font-weight: 700; padding: 10px 6px; margin: -10px -6px; }

/* ---------- entrar ---------- */
.fora .app, .fora .abas { display: none; }
.entrar { max-width: 460px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 18px calc(40px + var(--faixa-cookies, 0px)); }
.heroi.enfeite { margin-bottom: 28px; }
.entrar .titulo { font-size: 40px; }
.entrar form { display: grid; gap: 12px; margin-top: 18px; }
.campo { display: grid; gap: 6px; font-size: 13px; color: var(--apagado); }
.campo input { background: var(--bloco); box-shadow: var(--sombra); border: 1.5px solid transparent; border-radius: 16px; padding: 14px 16px; font-size: 16px; color: var(--texto); outline: 0; }
.campo input:focus { border-color: var(--destaque); }
.erro { margin: 0; min-height: 1.2em; color: var(--perigo); font-size: 14px; }
.erro.ok { color: var(--entra); }
.entrar-links { display: flex; justify-content: space-between; margin-top: 16px; }
.entrar-links button { color: var(--texto); font-weight: 600; font-size: 14px; min-height: 44px; }

/* ---------- aviso de instalação no iPhone (skill app-no-celular) ---------- */
.aviso-ios { position: fixed; z-index: 15; left: 12px; right: 12px; max-width: 436px; margin: 0 auto;
  bottom: calc(92px + env(safe-area-inset-bottom) + var(--faixa-cookies, 0px));
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 14px 16px;
  background: var(--folha); border: 1px solid var(--linha); border-left: 4px solid var(--destaque); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.aviso-ios p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--apagado); }
.aviso-ios strong { color: var(--texto); }
.aviso-ios__icone { display: inline-flex; vertical-align: -4px; }
.aviso-ios__icone svg { width: 18px; height: 18px; stroke: #0A84FF; stroke-width: 2; }
.aviso-ios__fechar { flex: none; width: 36px; height: 36px; margin: -6px -6px 0 0; color: var(--apagado); font-size: 24px; }
.fora .aviso-ios { bottom: calc(16px + env(safe-area-inset-bottom) + var(--faixa-cookies, 0px)); }

/* ---------- toque ---------- */
button, [role="link"], .linha-l, .abas a { transition: transform .12s ease, opacity .12s ease; }
button:active, [role="link"]:active, .abas a:active { transform: scale(.97); }
.abas .mais:active { transform: translateY(-34px) scale(.93); }
:root[data-movimento="parado"] :is(button:active, [role="link"]:active, .abas a:active) { transform: none; }

/* a faixa de cookies acompanha o tema */
.cookies { --cookies-fundo: var(--folha); --cookies-texto: var(--texto); --cookies-destaque: var(--destaque); --cookies-sobre-destaque: var(--destaque-tx); --cookies-borda: var(--linha); --cookies-contorno: var(--apagado); }
.avatar svg { width: 22px; height: 22px; }

/* ---------- D-19: os efeitos ---------- */
/* Cartões com reflexo de vidro e borda fina (no escuro; no claro, só a sombra). */
.cartao, .cartao-lista, .dia, .atalhos, .opcoes, .perfil, .limite, .sem-limite, .vazio, .busca, .mes-troca, .cat-card {
  background-image: var(--reflexo); border: 1px solid var(--borda-vidro);
}
.cartao .ico { box-shadow: 0 0 18px -4px currentColor; }

/* Gastos por categoria: faixa que desliza, com a bolinha brilhando dentro de um anel. */
.cats-faixa { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; margin: -6px -18px -16px; padding: 10px 18px 26px; scrollbar-width: none; }
.cats-faixa::-webkit-scrollbar { display: none; }
.cat-card {
  flex: none; width: 152px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background-color: var(--bloco); box-shadow: var(--sombra); border-radius: 26px; padding: 16px; text-align: left;
}
.cat-card .nome { font-size: 15px; font-weight: 600; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cat-card b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.cat-card small { color: var(--apagado); font-size: 12.5px; }
.anel { position: relative; width: 60px; height: 60px; display: grid; place-items: center; flex: none; }
.anel::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--trilho-anel) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  filter: drop-shadow(0 0 5px var(--c));
}
.anel .q { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 22px -2px var(--c); }
.anel .q svg { width: 20px; height: 20px; }
.anel .q:not([class*="cor-"]) { background: var(--bloco-2); color: var(--texto); }

/* Barra de abas presa no pé, com o recorte côncavo onde o + fica levantado (D-19). O fundo é o
   ::before, que leva a máscara do recorte; a sombra segue o recorte pelo drop-shadow do pai. */
.abas {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); bottom: var(--faixa-cookies, 0px); transition: bottom .3s ease;
  width: 100%; max-width: 460px; height: calc(70px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
  display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: center;
  filter: drop-shadow(0 -2px 10px var(--barra-sombra));
}
.abas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bloco); border-radius: 26px 26px 0 0;
  -webkit-mask: radial-gradient(circle 40px at 50% 0, transparent 39px, #000 40px);
  mask: radial-gradient(circle 40px at 50% 0, transparent 39px, #000 40px);
}
.abas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 58px; font-size: 11px; font-weight: 500; color: var(--apagado); text-decoration: none; min-width: 0; }
.abas a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abas a.ativa { color: var(--destaque); font-weight: 650; }
.abas a.ativa svg { stroke-width: 2.2; }
:root:not([data-tema="claro"]) .abas a.ativa { color: #a594ff; }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .abas a.ativa { color: var(--destaque); } }
.abas a svg { width: 24px; height: 24px; }
.abas .mais {
  width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; transform: translateY(-34px);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), var(--destaque); color: var(--destaque-tx);
  box-shadow: 0 6px 14px -6px rgba(92, 61, 240, .9), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.abas .mais svg { width: 26px; height: 26px; stroke-width: 2.4; }

/* ---------- D-20: efeitos portados (Não Codei e Spectrum UI) ---------- */
/* O --p do anel é número registrado: assim a transição anima o conic-gradient. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
/* Odômetro: cada dígito é uma janela de uma linha sobre uma fita de 0 a 9. */
.digito { display: inline-block; height: 1.05em; line-height: 1.05; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.fita { display: flex; flex-direction: column; }
.fita span { height: 1.05em; }
/* Confete por cima de tudo, sem pegar o toque. */
canvas.confete { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 120; }
/* Cartão roxo que inclina: um reflexo segue a inclinação. */
.heroi { will-change: transform; }
.heroi::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 70% at var(--gx, 70%) var(--gy, 10%), rgba(255,255,255,.22), rgba(255,255,255,0) 70%); }
.heroi > * { position: relative; z-index: 1; }
.heroi:active { transform: none; }
.cartao b, .cat-card b, .resumo-mes b { line-height: 1.05; }

/* ---------- D-21: o cartão de categoria vivo ---------- */
/* Anel que respira: o brilho em volta pulsa devagar, cada cartão no seu tempo. */
.anel::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 22px 2px var(--c); opacity: .2; animation: respira 4.3s ease-in-out var(--atraso, 0s) infinite; }
@keyframes respira { 0%, 100% { opacity: .15; transform: scale(.97); } 50% { opacity: .7; transform: scale(1.03); } }

/* Luz que segue o dedo, na cor da categoria. */
.cat-card { position: relative; overflow: hidden; isolation: isolate; }
.cat-card::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(160px circle at var(--lx, 50%) var(--ly, 30%), color-mix(in srgb, var(--c) 34%, transparent), transparent 70%); }
.cat-card.aceso::before { opacity: 1; transition-duration: .2s; }

/* Valor escondido brilhando: com o olho fechado, um brilho passa pelo "R$ •••". */
.oculto #heroi b, .oculto .cartao b, .oculto .cat-card b, .oculto .linha-l .v, .oculto .resumo-mes b {
  background: linear-gradient(100deg, var(--texto) 38%, var(--destaque) 50%, var(--texto) 62%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: velado 3.5s linear infinite;
}
.oculto #heroi b { background-image: linear-gradient(100deg, #fff 38%, rgba(255,255,255,.35) 50%, #fff 62%); }
@keyframes velado { from { background-position: 100% 0; } to { background-position: 0 0; } }

:root[data-movimento="parado"] :is(#heroi b, .cartao b, .cat-card b, .linha-l .v, .resumo-mes b) { animation: none !important; }
:root[data-movimento="parado"] .anel::after { animation: none !important; }



.opcoes button:has(.valor-op) small { padding-right: 128px; }

/* ---------- D-27: Gastei em vermelho, Recebi em verde ---------- */
.atalhos [data-lancar="saida"] i { background: color-mix(in srgb, var(--perigo) 18%, transparent); color: var(--perigo); }
.atalhos [data-lancar="entrada"] i { background: color-mix(in srgb, var(--entra) 18%, transparent); color: var(--entra); }
.tipo button[data-tipo="saida"][aria-pressed="true"] { background: var(--perigo); color: #fff; }
.tipo button[data-tipo="entrada"][aria-pressed="true"] { background: var(--entra); color: #052e16; }
:root[data-tema="claro"] .tipo button[data-tipo="entrada"][aria-pressed="true"] { color: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .tipo button[data-tipo="entrada"][aria-pressed="true"] { color: #fff; } }
.atalhos [data-ir="contas"] i { background: color-mix(in srgb, var(--destaque) 18%, transparent); color: var(--destaque); }
:root:not([data-tema="claro"]) .atalhos [data-ir="contas"] i { color: #a594ff; }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .atalhos [data-ir="contas"] i { color: var(--destaque); } }
.atalhos [data-ir="planejamento"] i { background: color-mix(in srgb, var(--ambar) 18%, transparent); color: var(--ambar); }

/* ---------- D-29: a tela de entrar ---------- */
/* Sem o cartão de enfeite; o ícone do app no topo, e Criar conta como botão grande, não link. */
.entrar { display: flex; flex-direction: column; min-height: 100svh; }
.entrar-icone { width: 72px; height: 72px; border-radius: 20px; margin: 12px 0 22px; box-shadow: 0 14px 34px -12px rgba(92, 61, 240, .8); }
.entrar .anotar { margin-top: 4px; }
.ir-lembrar { align-self: center; color: var(--apagado); font-weight: 600; font-size: 14px; min-height: 44px; padding: 0 12px; margin-top: 6px; }
.ou { display: flex; align-items: center; gap: 12px; color: var(--apagado); font-size: 13px; margin: 6px 0 14px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.botao-sec { min-height: 54px; border-radius: 18px; font-weight: 650; font-size: 16px; text-align: center;
  background: var(--texto); color: var(--fundo); box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); }
.entrar-rodape { margin-top: auto; padding-top: 22px; }

/* ---------- D-30: entrar com o Google e ver como funciona ---------- */
.google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 18px; margin-top: 6px;
  background: var(--bloco); border: 1px solid var(--linha); box-shadow: var(--sombra); font-weight: 650; font-size: 16px; }
.google svg { width: 20px; height: 20px; }
#ou-email { margin: 18px 0 2px; }
.experimentar { align-self: center; color: var(--destaque); font-weight: 650; min-height: 48px; padding: 0 12px; margin-top: 10px; }
:root:not([data-tema="claro"]) .experimentar { color: #a594ff; }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .experimentar { color: var(--destaque); } }
.faixa-demo { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: calc(8px + env(safe-area-inset-top)) 18px 8px; background: var(--destaque); color: var(--destaque-tx); font-size: 13px; }
.faixa-demo button { flex: none; background: #fff; color: #2b1a8a; border-radius: 999px; min-height: 36px; padding: 0 14px; font-weight: 700; font-size: 13px; }
.demo .app { padding-top: 0; }

/* ---------- D-33: o Bento, o mascote ---------- */
.mascote { display: block; height: auto; pointer-events: none; user-select: none; }
.mascote-entrar { width: 150px; margin: 4px 0 14px -8px; filter: drop-shadow(0 18px 30px rgba(92, 61, 240, .35)); }
.vazio.com-mascote { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.vazio.com-mascote .mascote { width: 84px; grid-row: span 2; }
.vazio.com-mascote p { margin: 0; color: var(--texto); }
.vazio.com-mascote p b { font-weight: 650; }
.vazio.com-mascote button { justify-self: start; min-height: 44px; padding: 0 18px; font-size: 14px; }
.resumo-mes { position: relative; }
.mascote-canto { position: absolute; right: 12px; top: 10px; width: 92px; }
.festa { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.55); }
.festa-cartao { width: min(340px, 100%); background: var(--folha); border: 1px solid var(--linha); border-radius: 30px; padding: 26px 22px 22px; text-align: center; display: grid; gap: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.festa-cartao .mascote { width: 200px; margin: -70px auto 0; }
.festa-cartao p { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
:root[data-movimento="vivo"] .festa-cartao { animation: festa-entra .5s cubic-bezier(.25,1,.5,1); }
@keyframes festa-entra { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- D-35: a folha de anotar compacta ---------- */
#folha { gap: 10px; }
#folha .rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
#folha .valor { padding: 0; }
#folha .valor input { font-size: 44px; }
#folha .valor span { font-size: 20px; }
#folha .cats { grid-template-rows: auto; grid-auto-columns: 66px; gap: 4px; padding-top: 2px; padding-bottom: 2px; }
#folha .cats button { gap: 4px; font-size: 11px; }
#folha .cats button .q { width: 42px; height: 42px; }
#folha .cats button .q svg { width: 19px; height: 19px; }
#folha .cats button[aria-pressed="true"] .q { box-shadow: 0 0 0 2px var(--folha), 0 0 0 4px var(--texto); }
#folha .chips { gap: 6px; }
#folha .chips button { padding: 0 10px; font-size: 13.5px; }
#folha #bloco-pagamento > p + .chips { margin-top: 0; }
#folha .sub-chips { margin-top: 6px; }
#folha .descricao { padding: 11px 16px; }
#folha .data-outra { margin-top: 6px; }
#bloco-repete { gap: 6px; }
#bloco-repete .bl.opcao { min-height: 44px; padding: 0 14px; border-radius: 999px; flex-direction: row; align-items: center; justify-content: center; gap: 6px; }
#bloco-repete .bl.opcao small { font-size: 13px; opacity: .75; }
#bloco-repete .bl.opcao b { font-size: 13.5px; }
#bloco-repete .bl.opcao .nota { display: none; }
#folha #anotar { min-height: 52px; padding: 14px; }
#bloco-repete .bl.opcao small, #bloco-repete .bl.opcao b { white-space: nowrap; }
#op-parcelas.cor-lavanda small { display: none; }   /* parcelado, o valor já diz tudo: "3x de R$ 15,30" */
#folha .cats { padding-top: 6px; padding-bottom: 4px; }
#folha #anotar { box-shadow: 0 -6px 10px 2px var(--folha); }

/* ---------- D-36: Para confirmar, o QR da nota e a Carteira ---------- */
.captar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.captar button { background: var(--bloco); background-image: var(--reflexo); border: 1px solid var(--borda-vidro); box-shadow: var(--sombra); border-radius: 22px; padding: 14px; text-align: left; font-weight: 650; display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.captar button i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; }
.captar button i svg { width: 20px; height: 20px; }
.captar small { color: var(--apagado); font-weight: 400; font-size: 12.5px; }
.pend { background: var(--bloco); background-image: var(--reflexo); border: 1px solid var(--borda-vidro); box-shadow: var(--sombra); border-radius: 22px; padding: 14px; margin-bottom: 10px; }
.pend-topo { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pend-topo .q { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.pend-topo .q svg { width: 19px; height: 19px; }
.pend-topo > span:nth-child(2) { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pend-topo .o { display: block; color: var(--apagado); font-size: 12.5px; font-weight: 400; }
.pend-topo .v { font-weight: 650; white-space: nowrap; text-align: right; }
.pend-topo .v small { color: var(--ambar); font-size: 12px; font-weight: 600; }
.pend-aviso { margin: 10px 0 0; font-size: 13px; color: var(--ambar); }
.pend-acoes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; margin-top: 12px; }
.pend-acoes button { min-height: 44px; padding: 0 8px; border-radius: 999px; font-size: 14px; }
.qr-visor { position: relative; border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.qr-visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-mira { position: absolute; inset: 18% 24%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.qr-estado { margin: 0; text-align: center; color: var(--apagado); font-size: 14px; }
.passos { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; }
.passos code, .chave-caixa code { font-size: 12.5px; background: var(--bloco-2); border-radius: 6px; padding: 1px 6px; }
.chave-caixa { background: var(--bloco-2); border-radius: 14px; padding: 12px 14px; overflow-wrap: anywhere; }
.chave-caixa code { background: none; padding: 0; font-size: 13px; }
.nota-chave { margin: 0; font-size: 12.5px; color: var(--apagado); }

/* D-37: a Carteira em dois passos */
.passo-facil { background: var(--bloco-2); border-radius: 18px; padding: 14px 16px; }
.passo-facil b { display: block; margin-bottom: 4px; }
.passo-facil p { margin: 0; color: var(--apagado); font-size: 14px; }
.passo-facil p b { display: inline; margin: 0; color: var(--texto); }
.nota-chave code { font-size: 11.5px; overflow-wrap: anywhere; }

/* D-38: o terceiro botão (avisos do banco, só no app Android) ocupa a linha toda */
.captar button:nth-child(3):not([hidden]) { grid-column: span 2; }
a.linha-l { color: inherit; text-decoration: none; }
a.linha-l[hidden] { display: none; }

/* ---------- D-39: sem internet ---------- */
.faixa-fila { position: sticky; top: 0; z-index: 12; padding: calc(8px + env(safe-area-inset-top)) 18px 8px; background: #f59e0b; color: #1f1300; font-size: 13px; }
.tag-fila { background: color-mix(in srgb, var(--ambar) 20%, transparent); color: var(--ambar); }

/* ---------- D-40: o esqueleto da primeira abertura ---------- */
.esqueleto { display: none; padding: 14px 18px; }
.carregando .esqueleto { display: block; }
.carregando .tela { display: none !important; }
.esqueleto i { display: block; background: var(--bloco-2); border-radius: 14px; }
:root[data-movimento="vivo"] .esqueleto i { animation: sk-pulsa 1.4s ease-in-out infinite; }
@keyframes sk-pulsa { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sk-cabeca { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-bottom: 14px; }
.sk-cabeca > span { flex: 1; display: grid; gap: 6px; }
.esqueleto .sk-bola { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.esqueleto .sk-linha { height: 12px; border-radius: 6px; }
.esqueleto .curta { width: 40%; } .esqueleto .media { width: 65%; height: 16px; } .esqueleto .valor { width: 70px; height: 16px; }
.esqueleto .titulo { width: 55%; height: 18px; margin: 24px 2px 12px; }
.esqueleto .sk-heroi { height: 196px; border-radius: 28px; background: color-mix(in srgb, var(--destaque) 30%, var(--bloco-2)); }
.sk-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; padding: 14px 6px; background: var(--bloco); border-radius: var(--raio); }
.esqueleto .sk-atalhos i { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto; }
.sk-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.esqueleto .sk-par i { height: 150px; border-radius: var(--raio); background: var(--bloco); }
.sk-lista { background: var(--bloco); border-radius: var(--raio); padding: 4px 16px; }
.sk-lista > div { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; }
.sk-lista > div > span { display: grid; gap: 6px; }
.esqueleto .sk-lista .sk-bola { width: 42px; height: 42px; }

/* D-41: o resumo do mês que passou */
.resumo-mes-passado .resumo-acoes { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.resumo-mes-passado .resumo-acoes button { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 999px; }
.vazio.com-mascote + .vazio.com-mascote { margin-top: 10px; }

/* D-45: as cinco expressões no mesmo quadrado (o corpo ocupa uns 65% da largura), então todas
   aparecem do mesmo tamanho; as larguras subiram para o Bento continuar do tamanho de antes. */
.mascote-entrar { width: 190px; margin: -10px 0 4px -26px; }
.vazio.com-mascote { grid-template-columns: 104px minmax(0, 1fr); }
.vazio.com-mascote .mascote { width: 104px; margin: -10px -6px; }
.mascote-canto { width: 124px; right: 2px; top: -6px; }
.festa-cartao .mascote { width: 250px; margin: -96px auto -10px; }

/* ---------- D-46: Você personalizável e o Bento em mais lugares ---------- */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.com-bento { background: color-mix(in srgb, var(--destaque) 22%, var(--bloco-2)); }
.avatar img.avatar-bento { width: 150%; height: 150%; margin: -12% 0 0 -25%; object-fit: contain; }
button.perfil { width: 100%; text-align: left; position: relative; }
.perfil > div { flex: 1; min-width: 0; }
.perfil #voce-email { font-size: 13px; color: var(--apagado); overflow-wrap: anywhere; }
.perfil .editar-perfil { color: var(--destaque); font-weight: 600; font-size: 14px; flex: none; }
:root:not([data-tema="claro"]) .perfil .editar-perfil { color: #a594ff; }
.perfil-vista { width: 104px; height: 104px; margin: 0 auto; font-size: 40px; font-weight: 700; border-radius: 50%; display: grid; place-items: center; background: var(--bloco-2); }
.foto-escolher { display: block; text-align: center; cursor: pointer; }
.bento-espia { position: absolute; right: 14px; top: 64px; width: 74px; height: 74px; pointer-events: none; z-index: 1; }
#folha { position: fixed; }
#folha .valor { position: relative; }
.toast-bento { width: 30px; height: 30px; margin: -4px -6px -4px -6px; }
/* D-46, ajuste: o Bento inteiro dentro do círculo, e espiando ao lado do valor, abaixo de Gastei e Recebi */
.avatar img.avatar-bento { width: 136%; height: 136%; margin: -14% 0 0 -18%; max-width: none; }
.bento-espia { top: 124px; right: 12px; width: 64px; height: 64px; }
/* D-48: o Bento inteiro no círculo do avatar, sem cortar o topo nem os braços */
.avatar img.avatar-bento { width: 112%; height: 112%; margin: -4% 0 0 -6%; max-width: none; object-fit: contain; }
/* D-48, ajuste: entre o cortado (136%) e o pequeno (112%) */
.avatar img.avatar-bento { width: 126%; height: 126%; margin: -11% 0 0 -8%; }

/* D-52: o fim do mês no azul ou no vermelho */
.heroi .mascote-heroi { position: absolute; right: 6px; top: 4px; width: 118px; z-index: 1; }
.heroi small { position: relative; z-index: 2; }
.selo-heroi { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 650; vertical-align: 1px; }
.heroi.no-vermelho { background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.2) 0, rgba(255,255,255,0) 46%), linear-gradient(140deg, #ef5350 0%, #b71c1c 100%); box-shadow: 0 18px 40px -18px rgba(183, 28, 28, .75); }
.heroi .linha-heroi { gap: 16px; }
.heroi .linha-heroi strong { font-size: 15px; }
.heroi .mascote-heroi { width: 104px; right: 8px; top: 10px; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.75)) drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.heroi.valor-longo b { font-size: clamp(30px, 9.4vw, 40px); }

/* D-53: o cartão do mês na direção C */
.selo-mes { align-self: flex-start; position: relative; z-index: 2; margin: 2px 0; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.selo-mes.faltou { background: #fecaca; color: #7f1d1d; }
.selo-mes.sobrou { background: #bbf7d0; color: #14532d; }
.mov-mes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; font-weight: 650; position: relative; z-index: 2; }
.mov { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mov svg { width: 16px; height: 16px; stroke-width: 2.6; }
.mov em { font-style: normal; font-weight: 500; opacity: .78; }
.mov.entrou svg { color: #86efac; } .mov.saiu svg { color: #fecaca; }

/* D-54 (opção A): o Bento mora dentro do cartão do mês, grande no canto de baixo, cortado pela
   borda, espiando; o círculo decorativo sai para não brigar com ele. */
#heroi { overflow: hidden; }
#heroi::after { display: none; }
#heroi .mascote-heroi { width: 170px; right: -24px; top: auto; bottom: -46px; filter: drop-shadow(0 -6px 18px rgba(0,0,0,.25)); }
#heroi .mov-mes { max-width: 62%; }
/* D-55: o resumo do Mês com o Bento sem cobrir nada */
.resumo-mes small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: relative; z-index: 2; max-width: 66%; }
.selo-fim { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--entra) 18%, transparent); color: var(--entra); font-size: 12px; font-weight: 650; white-space: nowrap; }
.selo-fim.neg { background: color-mix(in srgb, var(--perigo) 18%, transparent); color: var(--perigo); }
.resumo-mes b, .resumo-mes .linha-heroi { position: relative; z-index: 2; max-width: 66%; }
.resumo-mes .mascote-canto { width: 118px; right: 4px; top: auto; bottom: 0; }
.resumo-mes .linha-heroi { max-width: 100%; }
.resumo-mes .linha-heroi span { white-space: nowrap; }
.resumo-mes .mascote-canto { width: 104px; bottom: auto; top: 30px; }

/* D-56: por quantos meses a conta fixa se repete */
.repete-escolha { display: grid; gap: 8px; }
.repete-escolha .rotulo-visivel { margin: 0; font-size: 13px; color: var(--apagado); }
.repete-escolha .chips button { flex: none; }
/* D-73: os atalhos de parcela numa fileira só, do tamanho do texto */
#parcelas-chips { flex-wrap: nowrap; }
#parcelas-chips button { flex: 1 1 auto; padding: 0 8px; }
.repete-outro { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bloco-2); border-radius: 14px; padding: 6px 6px 6px 16px; font-size: 14px; color: var(--apagado); }
.repete-outro[hidden] { display: none; }
.repete-outro input { width: 80px; min-height: 40px; text-align: center; background: var(--bloco); border: 0; border-radius: 10px; font-size: 16px; font-weight: 650; color: var(--texto); outline: 0; }