/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --fundo: #F6F5EF;
  --superficie: #FFFFFF;
  --superficie-2: #EEEDE5;
  --linha: #E2E0D6;
  --tinta: #141A12;
  --tinta-2: #4D5348;
  --tinta-3: #6C7265;
  --marca: #1B7347;
  --marca-forte: #145936;
  --marca-suave: #E8F5E9;
  --sobre-marca: #FFFFFF;
  --acao: #1B7347;
  --acao-forte: #145936;
  --sobre-acao: #FFFFFF;
  --positivo: #1B7347;
  --negativo: #C8410B;
  --negativo-suave: #FCEBDF;
  --alerta: #9A5B00;
  --alerta-suave: #FBF0D5;
  --serie-receita: #1B7347;
  --serie-despesa: #E56A1F;
  --seq-0: #1B7347; --seq-1: #2E6B4F; --seq-2: #5C9478; --seq-3: #8FB8A2; --seq-4: #BFD3C7; --seq-5: #D6D5CC;
  --heroi-a: #185A3F;
  --sombra: 0 2px 6px -1px rgb(20 28 18 / .06), 0 10px 28px -10px rgb(20 28 18 / .12);
  --raio: 18px;
  --raio-p: 12px;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-topo: env(safe-area-inset-top, 0px);
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #10120E;
  --superficie: #191C16;
  --superficie-2: #24281F;
  --linha: #2E3328;
  --tinta: #F2F3EC;
  --tinta-2: #BEC4B5;
  --tinta-3: #969D8C;
  --marca: #2E9E66;
  --marca-forte: #3CB375;
  --marca-suave: #163624;
  --sobre-marca: #FFFFFF;
  --acao: #2E9E66;
  --acao-forte: #3CB375;
  --sobre-acao: #FFFFFF;
  --positivo: #4ADE80;
  --negativo: #FF9A6B;
  --negativo-suave: #3B2315;
  --alerta: #FFC861;
  --alerta-suave: #3A2C12;
  --serie-receita: #3E9E6B;
  --serie-despesa: #D9622E;
  --seq-0: #E4EFDD; --seq-1: #BAD3B3; --seq-2: #90B28C; --seq-3: #6C9069; --seq-4: #4D6C4E; --seq-5: #454A40;
  --heroi-a: #1C543B;
  --sombra: 0 2px 8px -2px rgb(0 0 0 / .4), 0 12px 32px -8px rgb(0 0 0 / .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #10120E;
    --superficie: #191C16;
    --superficie-2: #24281F;
    --linha: #2E3328;
    --tinta: #F2F3EC;
    --tinta-2: #BEC4B5;
    --tinta-3: #969D8C;
    --marca: #B4F03C;
    --marca-forte: #CCF76F;
    --marca-suave: #2A3A1A;
    --sobre-marca: #14240F;
    --acao: #B4F03C;
    --acao-forte: #CCF76F;
    --sobre-acao: #14240F;
    --positivo: #B7DDA0;
    --negativo: #FF9A6B;
    --negativo-suave: #3B2315;
    --alerta: #FFC861;
    --alerta-suave: #3A2C12;
    --serie-receita: #3E9E6B;
    --serie-despesa: #D9622E;
    --seq-0: #E4EFDD; --seq-1: #BAD3B3; --seq-2: #90B28C; --seq-3: #6C9069; --seq-4: #4D6C4E; --seq-5: #454A40;
    --heroi-a: #236145;
    --sombra: 0 1px 2px rgb(0 0 0 / .3);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 15px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p, dl, dd, fieldset { margin: 0; padding: 0; border: 0; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Estrutura ---------- */
.lateral { display: none; }
.corpo { padding: calc(var(--seguro-topo) + 12px) 16px calc(var(--seguro-baixo) + 118px); max-width: 1320px; margin: 0 auto; }

.topo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.topo-movel { display: flex; align-items: center; gap: 12px; }
.ola { flex: 1; font-size: 16px; color: var(--tinta-2); }
.ola strong { color: var(--tinta); font-weight: 700; }
.titulo { display: none; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.topo .topo-novo { display: none; }

.mes { display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; }
.mes-titulo { flex: 1; min-width: 150px; text-align: center; font-weight: 600; font-size: 14px; }
.mes-titulo::first-letter { text-transform: uppercase; }
.mes-hoje { font-size: 13px; font-weight: 600; color: var(--marca); padding: 0 12px; height: 40px; border-radius: 999px; }
.mes .icone-btn { width: 40px; height: 40px; }
.mes-hoje:hover { background: var(--marca-suave); }

.icone-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--tinta-2); flex: none; transition: background .15s; }
.icone-btn:hover { background: var(--superficie-2); }
.icone-btn-sutil { background: var(--superficie-2); }
.icone-btn-sutil:hover { background: var(--linha); }

.avatar-btn { border-radius: 50%; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-g { width: 72px; height: 72px; font-size: 26px; }

.marca { display: flex; align-items: center; gap: 12px; }
.marca strong { display: block; font-size: 16px; }
.marca small { color: var(--tinta-3); font-size: 12px; }
.marca-logo { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: #1E6B4C; }
.sg { display: inline-flex; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.sg b { font-weight: 800; color: #FFFFFF; }
.sg b + b { color: #B4F03C; }
.wm { display: inline-flex; align-items: baseline; white-space: nowrap; font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.wm-1, .wm-2 { display: inline-flex; align-items: baseline; }
.wm-2, .wm-e { color: var(--marca); }
.wm-e { font-family: Fraunces, Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; margin: 0 .26em; overflow: hidden; overflow: clip; overflow-clip-margin: .1em; }
.wm-dobra { display: inline-block; max-width: 6em; overflow: hidden; overflow: clip; }

/* Barra inferior */
.barra {
  position: fixed; inset: auto 12px calc(var(--seguro-baixo) + 10px) 12px; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr 64px 1fr 1fr; align-items: center;
  padding: 6px 8px; border-radius: 24px; box-shadow: 0 12px 30px -14px rgb(30 30 20 / .35);
  background: var(--superficie);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  border: 1px solid var(--linha);
}
.barra-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; color: var(--tinta-3); font-size: 11px; font-weight: 500; border-radius: 12px; }
.barra-item[aria-current="page"] { color: var(--tinta); font-weight: 700; }

/* ---------- Painel ---------- */
.painel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  min-width: 0;
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .22s var(--suave), box-shadow .22s var(--suave), border-color .22s;
}
[data-tema="escuro"] .cartao {
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
@media (hover: hover) {
  .cartao:hover {
    box-shadow: 0 4px 14px -2px rgb(20 28 18 / .08), 0 16px 32px -8px rgb(20 28 18 / .14);
  }
}
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 40px; flex-wrap: wrap; }
.cartao-topo h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.link { color: var(--marca); font-size: 13px; font-weight: 600; padding: 10px 0 10px 10px; transition: opacity .15s; }
.link:hover { opacity: .8; text-decoration: underline; }

.heroi {
  background: linear-gradient(142deg, #185A3F 0%, #114530 50%, #0A2E20 100%);
  color: #fff;
  border-radius: var(--raio);
  padding: 22px;
  min-width: 0;
  box-shadow: 0 14px 34px -10px rgba(15, 60, 40, .45), inset 0 1px 1px rgba(255, 255, 255, .22);
}
.heroi-topo { display: flex; align-items: center; justify-content: space-between; color: #DCEBD7; font-size: 14px; font-weight: 500; min-height: 44px; }
.heroi-olho { color: #DCEBD7; margin-right: -10px; }
.heroi-olho:hover { background: rgb(255 255 255 / .1); }
.heroi-valor { font-size: clamp(34px, 9.5vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.heroi-valor.negativo { color: #FFB08A; }
.heroi-insight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .18);
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: fit-content;
  transition: transform .2s var(--mola), background .2s;
}
.heroi-insight.positivo { background: rgb(34 197 94 / .25); border-color: rgb(34 197 94 / .4); color: #DCFCE7; }
.heroi-insight.atencao { background: rgb(249 115 22 / .25); border-color: rgb(249 115 22 / .4); color: #FFEDD5; }
.insight-seta { font-size: 13px; font-weight: 800; line-height: 1; }
.heroi-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .14); }
.heroi-grade dt { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #DCEBD7; margin-bottom: 2px; }
.heroi-grade dt .i { width: 14px; height: 14px; }
.heroi-grade dd { font-weight: 700; font-size: clamp(13px, 3.6vw, 18px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.contas-total { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.contas-sub { color: var(--tinta-3); font-size: 13px; margin-top: 2px; }
.progresso { height: 8px; border-radius: 999px; background: var(--superficie-2); margin: 12px 0 6px; overflow: hidden; }
.progresso > span { display: block; height: 100%; background: linear-gradient(90deg, var(--marca) 0%, var(--acao) 100%); border-radius: 999px; transition: width .4s cubic-bezier(.2, .8, .2, 1); }

/* Categorias */
.s0 { --c: var(--seq-0); } .s1 { --c: var(--seq-1); } .s2 { --c: var(--seq-2); }
.s3 { --c: var(--seq-3); } .s4 { --c: var(--seq-4); } .s5 { --c: var(--seq-5); }
#categorias { container-type: inline-size; }
.cat-layout { display: flex; flex-direction: column; gap: 14px; }
.rosca { position: relative; width: 190px; width: min(210px, 62cqw); aspect-ratio: 1; margin: 0 auto; flex: none; }
.rosca svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rosca-trilho { fill: none; stroke: var(--superficie-2); stroke-width: 18; }
.rosca-seg { fill: none; stroke: var(--c); stroke-width: 18; stroke-linecap: round; cursor: pointer; transition: opacity .2s, stroke-width .25s var(--mola); }
.rosca.com-foco .rosca-seg:not(.on) { opacity: .28; }
.rosca-seg.on { stroke-width: 23; }
.rosca-centro { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; min-width: 0; }
.rosca-centro small { font-size: 12px; color: var(--tinta-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-centro strong { font-size: 16px; font-size: clamp(15px, 5.2cqw, 19px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-lista { flex: 1; min-width: 0; }
.cat { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px; text-align: left; border-radius: 12px; font-size: 14px; }
.cat.on, .cat:hover { background: var(--superficie-2); }
.cat-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; transition: transform .25s var(--mola); }
.cat.on .cat-ponto { transform: scale(1.4); }
.cat-nome { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cat-valor small { color: var(--tinta-3); font-weight: 500; font-size: 12px; margin-left: 6px; display: inline-block; min-width: 30px; text-align: right; }
@container (min-width: 430px) {
  .cat-layout { flex-direction: row; align-items: center; gap: 20px; }
  .rosca { width: 180px; margin: 0; }
  .rosca-centro strong { font-size: 16px; }
}

/* Evolução */
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--tinta-2); flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }
.leg-r { background: var(--serie-receita); }
.leg-d { background: var(--serie-despesa); }
.evo-area { position: relative; touch-action: pan-y; cursor: crosshair; }
.evo-area svg { display: block; overflow: visible; }
.st-r { stop-color: var(--serie-receita); }
.st-d { stop-color: var(--serie-despesa); }
.evo-grade { stroke: var(--linha); stroke-width: 1; }
.evo-eixo { fill: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.evo-linha { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.evo-linha-r { stroke: var(--serie-receita); }
.evo-linha-d { stroke: var(--serie-despesa); }
.evo-fim { stroke: var(--superficie); stroke-width: 2.5; }
.evo-fim-r { fill: var(--serie-receita); }
.evo-fim-d { fill: var(--serie-despesa); }
.evo-mira { opacity: 0; transition: opacity .15s; }
.mira-on .evo-mira { opacity: 1; }
.evo-mira-linha { stroke: var(--tinta-3); stroke-width: 1; }
.evo-tip { position: absolute; top: 0; left: 0; z-index: 5; display: flex; gap: 10px; align-items: center; background: var(--tinta); color: var(--fundo); font-size: 12px; padding: 6px 10px; border-radius: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transition: opacity .15s, left .12s var(--suave); }
.mira-on .evo-tip { opacity: 1; }
.evo-tip b { text-transform: capitalize; }
.evo-tip span { display: inline-flex; align-items: center; gap: 4px; }
.evo-tip i { width: 8px; height: 8px; border-radius: 2px; }
.evo-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.evo-m { min-height: 40px; font-size: 12px; color: var(--tinta-3); text-transform: capitalize; border-radius: 12px; transition: background .15s, color .15s, transform .18s var(--mola); }
.evo-m:hover { background: var(--superficie-2); color: var(--tinta); }
.evo-m:active { transform: scale(.94); }
.evo-m[aria-current="true"] { color: var(--tinta); font-weight: 700; }

/* Linhas de lançamento */
.linha { display: flex; align-items: center; gap: 2px; border-radius: 12px; transition: background .12s; }
.linha:hover { background: var(--superficie-2); }
.check { width: 44px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; }
.check-bola { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tinta-3); display: flex; align-items: center; justify-content: center; color: transparent; transition: all .15s; }
.check-bola .i { width: 14px; height: 14px; stroke-width: 3; }
.check[aria-pressed="true"] .check-bola { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.linha-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 2px; text-align: left; min-height: 56px; border-radius: 12px; }
.linha-sem-check .linha-main { padding-left: 8px; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--superficie-2); color: var(--tinta-2); }
.linha-txt { flex: 1; min-width: 0; }
.linha-t { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-s { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-3); overflow: hidden; white-space: nowrap; }
.linha-v { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-v.receita { color: var(--positivo); }
.linha-s-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.selo { flex: none; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 6px; line-height: 18px; }
.selo-pendente { background: var(--superficie-2); color: var(--tinta-2); }
.selo-atrasada { background: var(--alerta-suave); color: var(--alerta); }
.linha-pago .linha-t { color: var(--tinta-2); }

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--tinta-3);
  font-size: 14px;
  padding: 32px 16px;
  gap: 6px;
}
.vazio-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-3);
  margin-bottom: 2px;
  transition: transform .25s var(--mola);
}
.vazio-ico .i { width: 22px; height: 22px; stroke-width: 1.8; }
.vazio:hover .vazio-ico { transform: scale(1.08); }
.vazio strong { display: block; color: var(--tinta); font-size: 15px; font-weight: 700; }
.vazio p { color: var(--tinta-3); font-size: 13px; margin: 0; }
.rodape-cartao { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--linha); margin-top: 8px; padding-top: 12px; font-size: 13px; color: var(--tinta-3); }
.rodape-cartao strong { color: var(--tinta); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Telas de lista ---------- */
.lista-tela { display: flex; flex-direction: column; gap: 12px; }
.resumo-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 4px; }
.resumo-lista.um { grid-template-columns: 1fr; }
.resumo-lista > div { padding: 0 10px; min-width: 0; border-left: 1px solid var(--linha); }
.resumo-lista > div:first-child { border-left: 0; }
.resumo-lista p { font-size: 12px; color: var(--tinta-3); }
.resumo-lista strong { display: block; font-size: clamp(12.5px, 3.45vw, 22px); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ferramentas { display: flex; flex-direction: column; gap: 8px; }
.busca { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 48px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; color: var(--tinta-3); }
.busca:focus-within { border-color: var(--marca); }
.busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--tinta); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; background: var(--superficie-2); padding: 3px; border-radius: 12px; }
.seg button { min-height: 42px; padding: 0 16px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); font-weight: 700; box-shadow: 0 1px 3px rgb(30 30 20 / .14); }
.extrato { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 4px 10px 10px; }
.dia { font-size: 12px; font-weight: 700; color: var(--tinta-3); padding: 14px 8px 6px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.dia-nome::first-letter { text-transform: uppercase; }

/* ---------- Botões e campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: 14px; transition: background .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-primario { background: var(--acao); color: var(--sobre-acao); }
.btn-primario:hover:not(:disabled) { background: var(--acao-forte); }
.btn-perigo { background: var(--negativo-suave); color: var(--negativo); }
.btn-sutil { background: var(--superficie-2); }
.btn-cheio { flex: 1; width: 100%; }
.btn-g { min-height: 48px; font-size: 15px; }
.btn-p { min-height: 40px; padding: 0 14px; font-size: 13px; flex: none; }
.btn-sutil:hover:not(:disabled) { background: var(--linha); }
.btn-perigo:hover:not(:disabled) { filter: brightness(.96); }
.folha-acoes .btn { min-height: 48px; }

.campo { display: block; }
.campo > span, .campo > legend { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; padding: 0; }
.campo input, .data-linha input {
  width: 100%; height: 48px; padding: 0 14px; font-size: 16px;
  background: var(--superficie-2); border: 1px solid transparent; border-radius: var(--raio-p); color: var(--tinta); outline: 0;
}
.campo input:focus { border-color: var(--marca); background: var(--superficie); }
.erro-campo { color: var(--negativo); font-size: 13px; margin-top: -8px; }

.folha { border: 0; padding: 0; color: var(--tinta); background: var(--superficie); width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92dvh; overflow: hidden; }
.folha[open] { display: flex; flex-direction: column; animation: subir .24s cubic-bezier(.2, .8, .2, 1); }
.folha::backdrop { background: rgb(15 18 10 / .55); }
.folha form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.folha-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px 20px; flex: none; }
.folha-topo h2 { font-size: 18px; font-weight: 800; }
.folha-corpo { display: flex; flex-direction: column; gap: 16px; padding: 4px 20px 16px; overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.folha-acoes { display: flex; gap: 8px; padding: 12px 20px calc(var(--seguro-baixo) + 14px); border-top: 1px solid var(--linha); flex: none; }
.valor-campo input { width: 100%; text-align: center; border: 0; outline: 0; background: none; font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; padding: 6px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--superficie-2); font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.chips .i { width: 16px; height: 16px; }
.chips input:checked + span { background: var(--tinta); color: var(--fundo); font-weight: 600; }
.chips input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.data-linha { display: flex; gap: 6px; }
.data-linha input { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; text-align: left; }
.data-linha input::-webkit-date-and-time-value { text-align: left; }
.chip-acao { height: 48px; padding: 0 12px; border-radius: var(--raio-p); background: var(--superficie-2); font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.alternar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 600; font-size: 14px; cursor: pointer; position: relative; }
.alternar input { position: absolute; opacity: 0; right: 0; width: 48px; height: 28px; margin: 0; }
.alternar-trilho { width: 48px; height: 28px; border-radius: 999px; background: var(--tinta-3); position: relative; transition: background .15s; }
.alternar-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.alternar input:checked + .alternar-trilho { background: var(--marca); }
.alternar input:checked + .alternar-trilho::after { transform: translateX(20px); }
.alternar input:focus-visible + .alternar-trilho { outline: 2px solid var(--marca); outline-offset: 2px; }

.conta-perfil { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 20px 16px; font-size: 16px; }
.conta-opcoes { padding: 0 12px calc(var(--seguro-baixo) + 14px); }
.opcao { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 12px; border-radius: 12px; font-weight: 500; text-align: left; }
.opcao:hover { background: var(--superficie-2); }
.opcao-perigo { color: var(--negativo); }

.aviso { position: fixed; z-index: 100; left: 16px; right: 16px; bottom: calc(var(--seguro-baixo) + 94px); margin: 0 auto; max-width: 420px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 48px; background: var(--tinta); color: var(--fundo); border-radius: 16px; font-size: 14px; font-weight: 500; animation: subir .2s ease-out; }
.aviso-acao { color: inherit; font-weight: 800; text-decoration: underline; padding: 8px 0 8px 8px; }

.falha { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--negativo-suave); color: var(--negativo); padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-size: 14px; font-weight: 500; }

/* Carregando */
[data-carregando="true"] .sk { color: transparent !important; background: rgb(255 255 255 / .16); border-radius: 8px; width: fit-content; animation: pulsar 1.2s ease-in-out infinite; }

@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
@keyframes pulsar { 50% { opacity: .5; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Login ---------- */
.tela-login {
  background: radial-gradient(circle at 50% 0%, #175a3f 0%, #0d3826 60%, #082318 100%);
  min-height: 100dvh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.login-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  -webkit-filter: blur(85px);
  opacity: 0.38;
  mix-blend-mode: screen;
  will-change: transform;
}
.bg-orb-1 {
  width: min(520px, 85vw);
  height: min(520px, 85vw);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, #B4F03C 0%, rgba(180, 240, 60, 0) 70%);
  animation: flutuar-1 18s ease-in-out infinite alternate;
}
.bg-orb-2 {
  width: min(620px, 95vw);
  height: min(620px, 95vw);
  bottom: 5%;
  right: -12%;
  background: radial-gradient(circle, #2CDA8D 0%, rgba(44, 218, 141, 0) 70%);
  animation: flutuar-2 22s ease-in-out infinite alternate;
}
.bg-orb-3 {
  width: min(460px, 75vw);
  height: min(460px, 75vw);
  top: 35%;
  left: 25%;
  background: radial-gradient(circle, #38ef7d 0%, rgba(56, 239, 125, 0) 70%);
  opacity: 0.22;
  animation: flutuar-3 26s ease-in-out infinite alternate;
}
@keyframes flutuar-1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, 90px) scale(1.18); }
  100% { transform: translate(-40px, 130px) scale(0.92); }
}
@keyframes flutuar-2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-90px, -70px) scale(1.22); }
  100% { transform: translate(-130px, 50px) scale(0.88); }
}
@keyframes flutuar-3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -80px) scale(1.12); }
  100% { transform: translate(-60px, -50px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-orb { animation: none !important; }
}

.login { position: relative; z-index: 2; min-height: 100dvh; min-height: 100svh; display: flex; }
.login-marca { display: none; }
.login-painel { flex: 1; display: flex; align-items: center; justify-content: center; padding: calc(var(--seguro-topo) + 20px) 16px calc(var(--seguro-baixo) + 20px); }
.login-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; background: var(--superficie); border-radius: 28px; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .55); }
.login-form h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.senha-linha { position: relative; }
.senha-linha input { padding-right: 52px; }
.senha-ver { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--tinta-3); border-radius: 10px; }
.senha-ver[aria-pressed="true"] { color: var(--marca); }
.login-caps { font-size: 13px; color: var(--alerta); margin-top: -8px; }
.login-erro { background: var(--negativo-suave); color: var(--negativo); font-size: 14px; font-weight: 500; padding: 12px 14px; border-radius: 12px; }

/* Celulares bem estreitos e dobráveis fechados */
@media (max-width: 359px) {
  .heroi { padding: 14px 16px 16px; }
  .heroi-valor { font-size: clamp(26px, 9vw, 34px); }
  .heroi-grade, .heroi-extra { grid-template-columns: 1fr; gap: 6px; }
  .heroi-grade > div, .heroi-extra > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .heroi-grade dd, .heroi-extra dd { font-size: 14px; }
  .barra { grid-template-columns: 1fr 1fr 56px 1fr 1fr; padding: 6px 4px; inset: auto 6px calc(var(--seguro-baixo) + 6px) 6px; }
  .barra-item { font-size: 10px; }
  .mes-titulo { min-width: 0; font-size: 13px; }
  .corpo { padding-left: 10px; padding-right: 10px; }
  .cartao { padding: 14px; }
  .ico { width: 34px; height: 34px; }
  .linha-main { gap: 8px; }
  .linha-v { font-size: 13px; }
  .check { width: 38px; }
  .folha-corpo { padding-left: 14px; padding-right: 14px; }
  .folha-topo { padding-left: 14px; padding-right: 10px; }
  .folha-acoes { padding-left: 14px; padding-right: 14px; }
  .valor-campo input { font-size: 32px; }
  .limite-valor { width: 104px; }
  .popup { flex-wrap: wrap; }
  .popup-acoes { margin-left: auto; }
  .cartao-topo { gap: 6px; }
  .login-form { padding: 22px 18px; }
  .heroi-grade dt, .heroi-extra dt { flex: 1; min-width: 0; }
  .heroi-grade dd, .heroi-extra dd { flex: none; white-space: nowrap; overflow-wrap: normal; }
  .contas-total { font-size: 20px; }
  .seg button { padding: 0 6px; font-size: 13px; }
  .ferramentas .seg, #seg-repetir, #seg-tema { min-width: 0; }

  .resumo-lista { grid-template-columns: 1fr; gap: 6px; padding: 12px 4px; }
  .resumo-lista > div { display: flex; justify-content: space-between; align-items: baseline; border-left: 0; }
  .resumo-lista strong { font-size: 14px; }
}

/* Celular deitado: mais área útil */
@media (max-height: 480px) and (min-width: 560px) and (orientation: landscape) {
  .barra { padding: 2px 8px; }
  .barra-item { min-height: 40px; flex-direction: row; gap: 6px; }
  .corpo { padding-top: calc(var(--seguro-topo) + 6px); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(var(--seguro-baixo) + 72px); }
  .barra { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
  .folha { max-height: 96dvh; }
  .login-painel { padding-top: 12px; padding-bottom: 12px; }
  .login-form { gap: 10px; padding: 16px 20px; }
}

/* ---------- Telas maiores ---------- */
@media (min-width: 720px) {
  .corpo { padding-left: 24px; padding-right: 24px; }
  .painel { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .s-hero { grid-column: span 12; }
  .s-contas, .s-cat, .s-casal, .s-evo, .s-inv, .s-ult { grid-column: span 6; }
  .cartao { padding: 20px; }
  .heroi { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
  .heroi-grade { margin-top: 20px; }
  .heroi-insight { margin-bottom: 0; }
  .ferramentas { flex-direction: row; }
  .busca { flex: 1; }
  .seg { flex: none; }
  .extrato { padding: 6px 14px 14px; }

  .folha { max-width: 460px; margin: auto; border-radius: 18px; max-height: min(88dvh, 780px); }
  .folha-acoes { padding-bottom: 16px; }
  .conta-opcoes { padding-bottom: 14px; }
}

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
  .barra, .topo-movel { display: none; }
  .lateral { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100dvh; padding: 22px 14px 14px; background: var(--superficie); border-right: 1px solid var(--linha); }
  .lateral .marca { padding: 0 8px; }
  .lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; font-weight: 500; font-size: 14px; color: var(--tinta-2); transition: background .12s; }
  .nav-item:hover { background: var(--superficie-2); }
  .nav-item[aria-current="page"] { color: var(--tinta); font-weight: 700; }
  .conta-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-align: left; font-weight: 600; font-size: 14px; }
  .conta-chip:hover { background: var(--superficie-2); }
  .conta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .corpo { padding: 28px 32px 40px; width: 100%; }
  .topo { flex-direction: row; align-items: center; margin-bottom: 22px; }
  .titulo { display: block; flex: 1; }
  .mes { background: var(--superficie); }
  .mes-titulo { min-width: 170px; flex: none; }
  .topo .topo-novo { display: inline-flex; min-height: 48px; }

  .aviso { bottom: 24px; }
  .login-marca { flex: 1.1; display: flex; flex-direction: column; justify-content: center; padding: 48px; color: #fff; }
  .login-nome { font-size: clamp(30px, 3.2vw, 44px); color: #FFFFFF; }

  .login-frase { font-size: clamp(36px, 4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
}

@media (min-width: 1240px) {
  .s-hero { grid-column: span 7; }
  .s-contas { grid-column: span 5; }
  .s-cat { grid-column: span 6; }
  .s-casal { grid-column: span 6; }
  .s-evo { grid-column: span 6; }
  .s-inv { grid-column: span 6; }
  .s-ult { grid-column: span 6; }
}

/* ---------- Animações ---------- */
:root { --mola: cubic-bezier(.34, 1.56, .64, 1); --suave: cubic-bezier(.2, .8, .2, 1); }

/* Entrada do app e do conteúdo (troca de aba e de mês) */
.app { animation: revelar .45s var(--suave); }
[data-carregando="true"] .cartao { opacity: 0; }
main[data-dir="1"] { --de-x: 28px; --de-y: 0; }
main[data-dir="-1"] { --de-x: -28px; --de-y: 0; }
.entrando .painel > *, .entrando .lista-tela > * { animation: entrar .5s var(--suave) backwards; }
.entrando .painel > :nth-child(2), .entrando .lista-tela > :nth-child(2) { animation-delay: .05s; }
.entrando .painel > :nth-child(3), .entrando .lista-tela > :nth-child(3) { animation-delay: .1s; }
.entrando .painel > :nth-child(4) { animation-delay: .15s; }
.entrando .painel > :nth-child(5) { animation-delay: .2s; }
.entrando .painel > :nth-child(6) { animation-delay: .25s; }

.entrando .extrato > * { animation: entrar .4s var(--suave) backwards; animation-delay: .12s; }
.entrando .extrato > :nth-child(2) { animation-delay: .15s; }
.entrando .extrato > :nth-child(3) { animation-delay: .18s; }
.entrando .extrato > :nth-child(4) { animation-delay: .21s; }
.entrando .extrato > :nth-child(5) { animation-delay: .24s; }
.entrando .extrato > :nth-child(6) { animation-delay: .27s; }
.entrando .extrato > :nth-child(n+7) { animation-delay: .3s; }

/* Gráficos crescem a partir da base */
.entrando .progresso > span { transform-origin: left; animation: crescer-x .8s var(--suave) .15s backwards; }
.entrando .rosca-seg { animation: rosca-girar .85s var(--suave) .15s backwards; }
.entrando .rosca-seg:nth-child(2) { animation-delay: .22s; }
.entrando .rosca-seg:nth-child(3) { animation-delay: .29s; }
.entrando .rosca-seg:nth-child(4) { animation-delay: .36s; }
.entrando .rosca-seg:nth-child(5) { animation-delay: .43s; }
.entrando .rosca-seg:nth-child(6) { animation-delay: .5s; }
.entrando .rosca-centro { animation: entrar .5s var(--suave) .3s backwards; }
.entrando .cat { animation: entrar .4s var(--suave) .2s backwards; }
.entrando .cat:nth-child(2) { animation-delay: .25s; }
.entrando .cat:nth-child(3) { animation-delay: .3s; }
.entrando .cat:nth-child(4) { animation-delay: .35s; }
.entrando .cat:nth-child(5) { animation-delay: .4s; }
.entrando .cat:nth-child(6) { animation-delay: .45s; }
.entrando .evo-linha { animation: tracar 1.15s var(--suave) .15s backwards; }
.entrando .evo-linha-d { animation-delay: .3s; }
.entrando .evo-fill { animation: revelar .7s ease-out .6s backwards; }
.entrando .evo-fim { transform-box: fill-box; transform-origin: center; animation: pop-ponto .4s var(--mola) 1.15s backwards; }

/* Cartão principal: brilho vivo ao fundo */
.heroi { position: relative; overflow: hidden; --px: 0px; --py: 0px; }
.heroi > * { position: relative; }
.heroi::before { content: ""; position: absolute; width: 320px; height: 320px; right: -80px; top: -160px; border-radius: 50%; background: rgb(255 255 255 / .04); translate: var(--px) var(--py); transition: translate .6s var(--suave); animation: orbita 15s ease-in-out infinite alternate; }
.valor-trocando { animation: desfocar .3s var(--suave); }

/* Superfícies e toques */
@media (hover: hover) {
  .nav-item:hover .i { transform: translateX(2px) scale(1.08); }
  .topo-novo:hover .i { transform: rotate(90deg); }
}
.i { transition: transform .3s var(--mola); }
.nav-item[aria-current="page"] .i, .barra-item[aria-current="page"] .i { animation: pulo .45s var(--mola); }
.barra-item, .icone-btn, .seg button, .chips span, .chip-acao, .opcao, .linha-main, .cat, .evo-g { transition: transform .18s var(--mola), background .15s, color .15s; }
.barra-item:active, .icone-btn:active, .chip-acao:active, .opcao:active { transform: scale(.92); }
.linha-main:active, .cat:active, .evo-g:active { transform: scale(.98); }
.seg button[aria-pressed="true"] { animation: pop-suave .28s var(--mola); }
.chips input:checked + span { animation: pop-suave .28s var(--mola); }
.progresso > span { transition: width .6s var(--suave); }

/* Marcar como pago */
.check { position: relative; }
.check:active .check-bola { transform: scale(.85); }
.check.pop .check-bola { animation: pop-check .42s var(--mola); }
.check.pop .check-bola .i { animation: pop-icone .42s var(--mola); }
.check.pop::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--marca); animation: onda .5s var(--suave) forwards; pointer-events: none; }
.confete { position: fixed; width: 8px; height: 8px; border-radius: 2px; z-index: 90; pointer-events: none; }

/* Folhas e avisos */
.folha[open] { animation: subir-folha .38s var(--suave); }
.folha[open]::backdrop { animation: revelar .25s ease-out; }
.folha.fechando { animation: descer-folha .2s ease-in forwards; }
.folha.fechando::backdrop { animation: esconder .2s ease-in forwards; }
.aviso { animation: subir-aviso .36s var(--mola); }
.falha { animation: entrar .3s var(--suave); }
.erro-campo { animation: treme .35s; }

/* Carregando: brilho correndo */
[data-carregando="true"] .sk { background: linear-gradient(100deg, rgb(255 255 255 / .1) 30%, rgb(255 255 255 / .28) 50%, rgb(255 255 255 / .1) 70%); background-size: 200% 100%; animation: brilho-sk 1.1s linear infinite; }

/* Login */
.login-seguro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .15);
  font-size: 12px;
  font-weight: 500;
  color: #DCEBD7;
  width: fit-content;
}
.login-seguro .i { width: 14px; height: 14px; stroke: #A3E635; }

.login-form, .login-marca > * { animation: entrar-login .45s var(--suave) backwards; }
.login-marca > :nth-child(2) { animation-delay: .06s; }
.login-marca > :nth-child(3) { animation-delay: .12s; }
.login-form > * { animation: entrar .35s var(--suave) backwards; }
.login-form > :nth-child(2) { animation-delay: .04s; }
.login-form > :nth-child(3) { animation-delay: .08s; }
.login-form > :nth-child(4) { animation-delay: .12s; }
.login-form > :nth-child(5) { animation-delay: .16s; }
.login-form > :nth-child(n+6) { animation-delay: .2s; }
.login-form.treme { animation: treme .42s; }
.login-form h1 { animation: entrar .35s var(--suave) backwards; }
.campo input { transition: border-color .2s, background .2s, box-shadow .25s; }
.campo input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 22%, transparent); }
.login-erro { animation: entrar .25s var(--suave); }
#btn-entrar { position: relative; overflow: hidden; transition: background .2s, transform .15s, width .3s; }
#btn-entrar.btn-ok { background: var(--acao); animation: pop-suave .4s var(--mola); }
#btn-entrar.btn-ok::before { content: ""; width: 12px; height: 24px; border: solid var(--sobre-acao); border-width: 0 4px 4px 0; transform: rotate(45deg) translate(-2px, -2px); animation: pop-icone .4s var(--mola); }
.transicao { position: fixed; z-index: 90; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--fundo); transform: scale(0); pointer-events: none; }
.transicao.ativa { transition: transform .5s cubic-bezier(.7, 0, .3, 1); transform: scale(90); }

@keyframes revelar { from { opacity: 0; } }
@keyframes esconder { to { opacity: 0; } }
@keyframes sumir { to { opacity: 0; visibility: hidden; } }
@keyframes entrar { from { opacity: 0; transform: translate(var(--de-x, 0), var(--de-y, 16px)) scale(.985); } }
@keyframes entrar-login { from { opacity: 0; transform: translateY(40px) scale(.92); } }
@keyframes crescer-x { from { transform: scaleX(0); } }
@keyframes rosca-girar { from { stroke-dasharray: 0 100; opacity: 0; } }
@keyframes tracar { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes pop-ponto { from { transform: scale(0); } }
@keyframes orbita { to { transform: translate(-130px, 90px) scale(1.2); } }
@keyframes orbita-2 { to { transform: translate(90px, -50px) scale(.85); } }
@keyframes desfocar { from { filter: blur(10px); opacity: .4; } }
@keyframes pulo { 0% { transform: scale(.7); } 60% { transform: scale(1.18) translateY(-2px); } 100% { transform: scale(1); } }
@keyframes pop-suave { from { transform: scale(.9); } }
@keyframes pop-check { 0% { transform: scale(.5); } 100% { transform: scale(1); } }
@keyframes pop-icone { from { transform: scale(0) rotate(-45deg); opacity: 0; } }
@keyframes onda { to { transform: scale(2.3); opacity: 0; } }
@keyframes subir-folha { from { transform: translateY(100%); } }
@keyframes descer-folha { to { transform: translateY(100%); } }
@keyframes subir-aviso { from { transform: translateY(24px) scale(.94); opacity: 0; } }
@keyframes brilho-sk { to { background-position: -200% 0; } }
@keyframes logo-entra { from { opacity: 0; transform: scale(.7); } }
@keyframes fecha-nome { to { max-width: 0; } }
@keyframes fecha-e { to { max-width: 0; margin-left: 0; margin-right: 0; opacity: 0; } }
@keyframes surge-texto { from { opacity: 0; transform: translateY(8px); } }
@keyframes some-texto { to { opacity: 0; transform: scale(.9); } }
@keyframes junta-b { from { opacity: 0; transform: translateX(-24px); } }
@keyframes junta-n { from { opacity: 0; transform: translateX(24px); } }
@keyframes bolha-a { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes bolha-b { to { transform: translate(-12vmax, -12vmax) scale(1.2); } }
@keyframes subir-simbolo { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .08; } 85% { opacity: .05; } 100% { transform: translateY(-130vh) rotate(380deg); opacity: 0; } }
@keyframes flutuar { 50% { transform: translateY(-5px); } }
@keyframes treme { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 50% { transform: translateX(-6px); } }

@media (min-width: 720px) {
  .folha[open] { animation: surgir-dialogo .32s var(--mola); }
  .folha.fechando { animation: sumir-dialogo .16s ease-in forwards; }
}
@keyframes surgir-dialogo { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes sumir-dialogo { to { opacity: 0; transform: scale(.96); } }

/* Saldo: linha extra */
.heroi-extra { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.heroi-extra dt { font-size: 12px; color: #DCEBD7; }
.heroi-extra dd { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Autor, ajuda e formulários novos */
.ico { position: relative; }
.autor {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--linha);
  color: var(--tinta-2);
  font-size: 10px;
  font-weight: 800;
  border: 2px solid var(--superficie);
  box-sizing: content-box;
  transition: transform .2s var(--mola);
}
.autor.autor-b {
  background: #1E6B4C;
  color: #FFFFFF;
}
.autor.autor-n {
  background: #B4F03C;
  color: #0E3524;
}

/* Card: Balanço do Casal */
.s-casal .cartao-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.sub-topo { font-size: 13px; font-weight: 500; color: var(--tinta-3); }
.casal-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.casal-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--superficie-2); }
.casal-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
.casal-avatar.b { background: #1E6B4C; color: #FFFFFF; }
.casal-avatar.n { background: #B4F03C; color: #0E3524; }
.casal-dados { display: flex; flex-direction: column; min-width: 0; }
.casal-nome { font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.casal-valor { font-size: 15px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.casal-pct { font-size: 11.5px; font-weight: 500; color: var(--tinta-3); margin-left: 3px; }

.casal-barra-wrap { position: relative; height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; display: flex; margin-bottom: 12px; }
.casal-barra-b { height: 100%; background: #1E6B4C; transition: width .5s var(--suave); }
.casal-barra-n { height: 100%; background: #B4F03C; transition: width .5s var(--suave); }

.casal-balanco-nota { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--tinta-2); padding: 8px 12px; border-radius: 10px; background: var(--superficie-2); }
.casal-balanco-nota .i { width: 16px; height: 16px; color: var(--marca); flex: none; }
.ajuda { font-size: 13px; color: var(--tinta-3); }
.parcelas-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; font-weight: 500; }
.parcelas-linha input { width: 84px; height: 44px; text-align: center; font-size: 16px; font-weight: 700; background: var(--superficie-2); border: 1px solid transparent; border-radius: var(--raio-p); color: var(--tinta); outline: 0; }
.parcelas-linha input:focus { border-color: var(--marca); }
#repetir-info { margin-top: 8px; }
.serie-opcoes { flex: 1; display: grid; gap: 8px; }
.serie-opcoes p { font-size: 14px; font-weight: 600; }
.limite-linha { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.limite-linha .linha-t { flex: 1; min-width: 0; }
.limite-valor { width: 128px; height: 44px; padding: 0 10px; text-align: right; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--superficie-2); border: 1px solid transparent; border-radius: var(--raio-p); color: var(--tinta); outline: 0; }
.limite-valor:focus { border-color: var(--marca); }
.limite-valor::placeholder { font-weight: 400; color: var(--tinta-3); font-size: 13px; }

/* Barra de limite nas categorias */
.cat { flex-wrap: wrap; }
.cat-limite { flex-basis: 100%; height: 4px; margin: 2px 0 4px 20px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; display: block; }
.cat-limite i { display: block; height: 100%; background: var(--tinta-3); border-radius: 999px; }
.cat-limite.perto i { background: var(--alerta); }
.cat-limite.estourou i { background: var(--negativo); }

/* Deslizar para pagar */
.linha { position: relative; touch-action: pan-y; }
.linha > * { position: relative; z-index: 1; }
.linha::before { content: "Pago"; position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; padding-left: 16px; border-radius: 12px; background: var(--superficie-2); color: var(--tinta-2); font-size: 13px; font-weight: 700; opacity: 0; }
.linha-pago::before { content: "Pendente"; }
.linha.deslizando { overflow: hidden; }
.linha.deslizando::before { opacity: 1; }
.linha.pronto-pagar::before { background: var(--acao); color: var(--sobre-acao); }
.linha.deslizando > * { transform: translateX(var(--d, 0px)); background: var(--superficie); transition: none; }

/* Puxar para atualizar */
html, body { overscroll-behavior-y: contain; }
.puxar { position: fixed; z-index: 40; top: calc(var(--seguro-topo) - 40px); left: 50%; width: 40px; height: 40px; margin-left: -20px; transform: translateY(var(--p, 0px)); opacity: 0; transition: opacity .15s; pointer-events: none; }
.puxar.ativo, .puxar.girando { opacity: 1; }
.puxar .marca-logo { width: 40px; height: 40px; }
.puxar.girando .marca-logo { animation: ic-pulo .8s ease-in-out infinite; }

.alerta .linha-s { white-space: normal; flex-wrap: wrap; }

/* Indicadores que deslizam */
.barra-item, .nav-item { position: relative; z-index: 1; }
.lateral nav { position: relative; }
.barra-ind, .nav-ind { position: absolute; left: 0; top: 0; border-radius: 12px; opacity: 0; transition: transform .42s var(--mola), width .3s var(--suave), height .3s var(--suave), opacity .2s; }
.barra-ind { background: var(--superficie-2); }
.nav-ind { background: var(--superficie-2); }
.barra-ind.pronto, .nav-ind.pronto { opacity: 1; }

/* Topo, sino e tema */
.topo-desk { display: none; }
.sino { position: relative; }
.sino-n { position: absolute; top: 6px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--negativo); color: var(--superficie); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; animation: pop-suave .3s var(--mola); }
.tem-alerta .i-sino { animation: ic-sino 1s ease-in-out 1.4s 3; }
.opcao-tema { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; font-weight: 500; }
#seg-tema button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; font-size: 13px; }
#seg-tema .i { width: 16px; height: 16px; }

/* Pop-ups */
.popups { position: fixed; z-index: 95; top: calc(var(--seguro-topo) + 10px); left: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.popup { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 12px 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 18px 40px -18px rgb(30 30 20 / .45); animation: popup-entra .55s var(--mola); }
.popup.saindo { animation: popup-sai .26s ease-in forwards; }
.popup-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--tinta-2); }
.popup-ico .i { animation: var(--an, none) .8s var(--mola) .35s; }
.popup-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--tinta-2); }
.popup-txt strong { color: var(--tinta); font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-acoes { display: flex; align-items: center; gap: 2px; flex: none; }
.popup-acoes .icone-btn { width: 40px; height: 40px; color: var(--tinta-3); }
.popup-tempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--linha); transform-origin: left; animation: popup-tempo 9s linear forwards; }
.popup:hover .popup-tempo { animation-play-state: paused; }
@keyframes popup-entra { from { transform: translateY(var(--popup-de, -120%)) scale(.92); opacity: 0; } }
@keyframes popup-sai { to { transform: translateX(40px) scale(.96); opacity: 0; } }
@keyframes popup-tempo { to { transform: scaleX(0); } }

.alertas-lista { padding: 0 12px calc(var(--seguro-baixo) + 14px); max-height: 60dvh; overflow-y: auto; }
.alerta { display: flex; align-items: center; gap: 12px; padding: 8px; }
.alerta-atraso .linha-s { color: var(--alerta); font-weight: 600; }

/* Ícones animados */
.i-sino { --an: ic-sino; }
.i-olho, .i-olho-off { --an: ic-piscar; }
.i-sol, .i-refresh, .i-moedas { --an: ic-girar; }
.i-lua { --an: ic-balanca; }
.i-plus { --an: ic-quarto; }
.i-lixo, .i-presente { --an: ic-treme; }
.i-sair, .i-carro, .i-onibus, .i-saida, .i-entrada { --an: ic-andar; }
.i-raio, .i-chama { --an: ic-chama; }
.i-gota, .i-livro, .i-repetir, .i-pata, .i-cadeado, .i-baixar, .i-alvo, .i-grid, .i-trend, .i-carteira, .i-maleta, .i-cartao, .i-casa, .i-caixa, .i-doc, .i-predio, .i-gov, .i-foto, .i-carrinho, .i-bomba, .i-chave, .i-martelo, .i-wifi, .i-cafe, .i-saude, .i-barras, .i-pizza, .i-escudo, .i-mais, .i-busca, .i-check, .i-x { --an: ic-pulo; }

@media (hover: hover) {
  :is(.icone-btn, .opcao, .nav-item, .barra-item, .btn, .linha-main, .chip-acao, .seg button):hover .i { animation: var(--an, none) .7s var(--suave); }
}
:is(.icone-btn, .opcao, .nav-item, .barra-item, .btn, .linha-main):active .i { animation: var(--an, none) .55s var(--suave); }
.chips input:checked + span .i { animation: var(--an, none) .6s var(--suave); }

/* Traços que se desenham */
.nav-item[aria-current="page"] .i > *, .barra-item[aria-current="page"] .i > * { animation: tracar .6s var(--suave); }
.entrando .ico .i > * { animation: tracar .75s var(--suave) .2s backwards; }
.entrando .heroi-grade dt .i > * { animation: tracar .75s var(--suave) .3s backwards; }

@keyframes ic-sino { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-13deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@keyframes ic-piscar { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
@keyframes ic-girar { to { transform: rotate(360deg); } }
@keyframes ic-balanca { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 65% { transform: rotate(12deg); } }
@keyframes ic-quarto { to { transform: rotate(90deg); } }
@keyframes ic-treme { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
@keyframes ic-andar { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@keyframes ic-chama { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.2, .9); } 60% { transform: scale(.92, 1.14); } }
@keyframes ic-pulo { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.12); } 70% { transform: translateY(1px) scale(.96); } }

/* Revelar ao rolar, onde o navegador permite */
@supports (animation-timeline: view()) {
  main:not(.entrando) .painel > .cartao { animation: surgir-rolagem linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@keyframes surgir-rolagem { from { opacity: 0; translate: 0 26px; scale: .97; } }

/* Troca de tema em círculo */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }


@media (min-width: 720px) {
  .popups { top: auto; bottom: 24px; left: auto; right: 20px; width: 390px; --popup-de: 120%; }
}
@media (min-width: 1024px) {
  .topo-desk { display: flex; gap: 4px; }
}

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

@media (forced-colors: active) {
  .progresso > span, .cat-ponto { background: CanvasText; forced-color-adjust: none; }
  .rosca-seg, .evo-linha { stroke: CanvasText; }
  .evo-linha-d { stroke-dasharray: 8 6; }
}

/* A barra de tempo controla quando o pop-up some: não pode acelerar. */
html .popup-tempo { animation-duration: 9s !important; }

/* Fica no fim do arquivo para valer sobre as regras-base dos blocos acima. */
@media (max-width: 359px) {
  .heroi-extra { grid-template-columns: 1fr; gap: 6px; }
  .heroi-extra > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .heroi-extra dt { flex: 1; min-width: 0; }
  .heroi-extra dd { flex: none; font-size: 14px; white-space: nowrap; overflow-wrap: normal; }
  .limite-valor { width: 104px; }
}

/* Atalhos junto ao saldo */
.atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.atalho {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 14px;
  background: rgb(255 255 255 / .15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / .2); box-shadow: 0 4px 12px rgb(0 0 0 / .08);
  color: #fff; font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .18s var(--mola);
}
.atalho:active { transform: scale(.94); }
.atalho:active .i { animation: var(--an, none) .55s var(--suave); }
.atalho .i { width: 16px; height: 16px; }
@media (hover: hover) {
  .atalho:hover { background: rgb(255 255 255 / .24); border-color: rgb(255 255 255 / .35); box-shadow: 0 6px 16px rgb(0 0 0 / .12); }
  .atalho:hover .i { animation: var(--an, none) .7s var(--suave); }
}
@media (min-width: 720px) {
  .atalhos { margin-bottom: 20px; margin-top: 14px; }
}
@media (max-width: 359px) {
  .atalho { font-size: 12px; }
  .atalho .i { display: none; }
}

/* Rótulo longo de Investimento em celulares comuns e estreitos */
@media (max-width: 430px) {
  .barra { grid-template-columns: 1fr 1fr 56px 1fr 1.3fr; }
  .barra-item { font-size: 10.5px; }
  .atalho { font-size: 12px; gap: 4px; }
  .atalho .i { width: 14px; height: 14px; }
}
@media (max-width: 359px) {
  .barra { grid-template-columns: 1fr 1fr 50px 1fr 1.35fr; }
  .barra-item { font-size: 9.5px; }
  .atalho { font-size: 11px; }
}

@media (min-width: 360px) and (max-width: 430px) {
  .heroi-grade { align-items: end; }
  .heroi-grade dt { font-size: 11px; gap: 3px; }
  .heroi-grade dt .i { width: 12px; height: 12px; }
  .atalho { font-size: 11.5px; letter-spacing: -.01em; }
}

/* Coreografia da Marca no Login:
   1. Inicia com Bruno & Nathália
   2. Junta: as letras centrais recolhem e fica "BN"
   3. Vira BN: transforma-se no badge glassmorphism BN com pop elástico
   4. Volta na frente: o badge se ancora à esquerda e "Bruno & Nathália" desdobra à sua frente [BN] Bruno & Nathália
*/
.animacao-bn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  outline: 0;
  width: fit-content;
  position: relative;
  font-size: clamp(22px, 6.8vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  transition: transform .2s var(--mola);
}
.animacao-bn:active { transform: scale(0.97); }

.bn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 48px;
  opacity: 0;
  transform: scale(0.3);
  margin-right: 0;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(135deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .06) 100%);
  border: 0 solid rgb(255 255 255 / .24);
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / .3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex: none;
  pointer-events: none;
  transition: width .45s var(--mola), height .45s var(--mola), opacity .3s ease, transform .45s var(--mola), margin .4s var(--suave), border-width .3s, box-shadow .3s;
}
.bn-badge .sg {
  display: inline-flex;
  align-items: baseline;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.bn-badge .sg b { color: #FFFFFF; font-weight: 800; }
.bn-badge .sg b + b { color: #B4F03C; }

.bn-texto {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  max-width: 18em;
  opacity: 1;
  transform: scale(1);
  transform-origin: left center;
  transition: max-width .55s var(--suave), opacity .35s ease, transform .45s var(--mola), margin .4s var(--suave);
}
.bn-texto .wm-1,
.bn-texto .wm-2 {
  display: inline-flex;
  align-items: baseline;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 800;
}
.bn-texto .wm-1 { color: #FFFFFF; }
.bn-texto .wm-2 { color: #B4F03C; }
.bn-texto .wm-e {
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  margin: 0 .26em;
  color: #B4F03C;
  max-width: 1.2em;
  display: inline-block;
  overflow: hidden;
  transition: max-width .5s cubic-bezier(.65, 0, .2, 1), opacity .35s ease, margin .5s cubic-bezier(.65, 0, .2, 1);
}
.bn-texto .wm-dobra {
  display: inline-block;
  max-width: 6em;
  overflow: hidden;
  transition: max-width .55s cubic-bezier(.65, 0, .2, 1), opacity .4s ease, filter .4s ease;
}

/* Fase 2: Junta Bruno & Nathália em BN */
.animacao-bn.fase-juntando .bn-texto .wm-dobra {
  max-width: 0;
  opacity: 0;
  filter: blur(3px);
}
.animacao-bn.fase-juntando .bn-texto .wm-e {
  max-width: 0;
  margin: 0;
  opacity: 0;
}

/* Fase 2.5: Vira o Badge BN com pop elástico */
.animacao-bn.fase-virou-bn .bn-texto {
  max-width: 0;
  opacity: 0;
  transform: scale(0.6);
  overflow: hidden;
  pointer-events: none;
  margin: 0;
}
.animacao-bn.fase-virou-bn .bn-badge {
  width: 54px;
  height: 54px;
  opacity: 1;
  transform: scale(1.1);
  margin-right: 0;
  border-width: 1px;
  box-shadow: 0 10px 32px -4px rgb(0 0 0 / .35), 0 0 24px rgb(180 240 60 / .25);
  animation: badge-pop .42s cubic-bezier(.34, 1.56, .64, 1);
}

/* Fase 3: Volta Bruno & Nathália na frente (fica [BN] Bruno & Nathália) */
.animacao-bn.fase-final .bn-badge {
  width: 48px;
  height: 48px;
  opacity: 1;
  transform: scale(1);
  margin-right: 12px;
  border-width: 1px;
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / .3);
}
.animacao-bn.fase-final .bn-texto {
  max-width: 18em;
  opacity: 1;
  transform: scale(1);
  overflow: visible;
  pointer-events: auto;
}
.animacao-bn.fase-final .bn-texto .wm-dobra {
  max-width: 6em;
  opacity: 1;
  filter: blur(0);
}
.animacao-bn.fase-final .bn-texto .wm-e {
  max-width: 1.2em;
  margin: 0 .26em;
  opacity: 1;
}

@keyframes badge-pop {
  0% { transform: scale(0.5) rotate(-6deg); opacity: 0; }
  70% { transform: scale(1.18) rotate(0deg); }
  100% { transform: scale(1.1) rotate(0deg); opacity: 1; }
}

@media (min-width: 1024px) {
  .animacao-bn { font-size: clamp(30px, 3.2vw, 44px); }
  .animacao-bn.fase-virou-bn .bn-badge { width: 60px; height: 60px; }
  .animacao-bn.fase-final .bn-badge { width: 52px; height: 52px; margin-right: 14px; }
  .bn-badge .sg { font-size: 24px; }
}

@media (max-width: 359px) {
  .animacao-bn { font-size: 21px; }
  .animacao-bn.fase-final .bn-badge { width: 40px; height: 40px; margin-right: 8px; border-radius: 12px; }
  .bn-badge .sg { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .animacao-bn.fase-juntando .bn-texto .wm-dobra,
  .animacao-bn.fase-virou-bn .bn-texto,
  .animacao-bn.fase-final .bn-texto .wm-dobra { max-width: none !important; opacity: 1 !important; filter: none !important; }
  .animacao-bn.fase-juntando .bn-texto .wm-e,
  .animacao-bn.fase-final .bn-texto .wm-e { max-width: none !important; margin: 0 .26em !important; opacity: 1 !important; }
  .bn-badge { width: 48px !important; height: 48px !important; opacity: 1 !important; transform: none !important; margin-right: 12px !important; border-width: 1px !important; }
  .bn-texto { max-width: none !important; opacity: 1 !important; transform: none !important; }
}

/* Menos ornamento: ícone simples nas linhas e seletor de mês sem cápsula */
.ico { width: 24px; height: 24px; background: none; border-radius: 0; color: var(--tinta-2); }
.autor { right: -7px; bottom: -6px; }
.mes { background: none; border: 0; padding: 0; }

/* Barra inferior presa à borda, como em app nativo */
@media (max-width: 1023px) {
  .barra { inset: auto 0 0 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; background: var(--superficie); padding: 6px max(8px, env(safe-area-inset-right)) calc(var(--seguro-baixo) + 6px) max(8px, env(safe-area-inset-left)); }
  .corpo { padding-bottom: calc(var(--seguro-baixo) + 88px); }
  .aviso { bottom: calc(var(--seguro-baixo) + 78px); }
}

/* Barra só com navegação */
@media (max-width: 1023px) {
  .barra { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .barra-item { font-size: 11px; }
}
@media (max-width: 359px) {
  .barra-item { font-size: 10px; }
}

.lista-tela .lista-novo { width: 100%; min-height: 48px; }
@media (min-width: 1024px) {
  .lista-tela .lista-novo { display: none; }
}

.chip-mais { height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tinta-2); border: 1px solid var(--linha); }
.chip-mais:hover { background: var(--superficie-2); }

/* Login: marca em cima, formulário preso à borda (lado a lado no computador) */
.login { flex-direction: column; min-height: 100dvh; min-height: 100svh; justify-content: space-between; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.login-marca { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; min-height: auto; padding: calc(var(--seguro-topo) + 24px) 24px 20px; color: #FFFFFF; }
.login-nome { font-size: clamp(21px, 7.4vw, 30px); }
.login-tag { margin: 8px 0 0; font-size: 15px; color: #DCEBD7; }
.login-painel { flex: 0 0 auto; width: 100%; display: block; padding: 24px 20px calc(var(--seguro-baixo) + 24px); background: var(--superficie); border-radius: 28px 28px 0 0; animation: subir-painel .4s var(--suave) backwards; }
.login-form { max-width: 420px; margin: 0 auto; padding: 0; background: none; border-radius: 0; box-shadow: none; animation: none; }
.login-form h1 { margin: 0 0 4px; font-size: 24px; }
.login-form .campo input { height: 52px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; }
.login-form .campo input:focus { border-color: var(--marca); }
.senha-ver { top: 4px; }
@keyframes subir-painel { from { transform: translateY(100%); } }

@media (min-width: 1024px) {
  .login { flex-direction: row; }
  .login-marca { flex: 1.15; justify-content: center; min-height: 0; padding: 64px; }
  .login-nome { font-size: clamp(32px, 3.2vw, 46px); }
  .login-tag { font-size: 18px; margin-top: 12px; }
  .login-painel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; border-radius: 0; animation-name: revelar; }
  .login-form { width: 100%; max-width: 360px; }
}

@media (max-height: 480px) and (min-width: 560px) and (orientation: landscape) {
  .login { flex-direction: row; }
  .login-marca { flex: 1; justify-content: center; min-height: 0; padding: 20px max(24px, env(safe-area-inset-left)); }
  .login-painel { flex: 1.2; overflow-y: auto; padding: 16px max(24px, env(safe-area-inset-right)) 16px 24px; border-radius: 0; }
  .login-form { gap: 10px; }
  .login-form .campo input { height: 44px; }
}

/* Frases do casal no login */
.login-casal { margin: 20px 0 0; max-width: 26em; min-height: 2.7em; font-size: 17px; font-weight: 500; line-height: 1.35; color: #FFFFFF; cursor: pointer; transition: opacity .26s, transform .26s var(--suave); }
.login-casal.saindo { opacity: 0; transform: translateY(8px); }
@media (min-width: 1024px) {
  .login-casal { margin-top: 40px; font-size: 24px; letter-spacing: -.01em; }
}
@media (max-height: 480px) and (min-width: 560px) and (orientation: landscape) {
  .login-casal { margin-top: 10px; font-size: 14px; }
}

/* Teclado aberto no celular em pé: a marca encolhe para os campos ficarem à vista */
@media (max-height: 680px) and (max-width: 559px) {
  .login-marca { flex: none; min-height: 0; padding: calc(var(--seguro-topo) + 12px) 20px 10px; }
  .login-tag, .login-casal { display: none; }
  .login-painel { padding: 18px 18px calc(var(--seguro-baixo) + 18px); }
  .login-form { gap: 10px; }
  .login-form h1 { font-size: 20px; }
  .login-form .campo input { height: 44px; }
}