/* ===== Finanças 2026 — tema profissional (claro + escuro) ===== */
:root {
  --green: #0b3d2e;
  --green-2: #12734d;
  --accent: #15c266;
  --accent-2: #0bd17a;
  --red: #e5484d;
  --amber: #f5a623;
  --blue: #2f7ff0;
  /* lâmina de vidro — TEMA CLARO: acento escuro e sólido (texto branco legível no fundo branco). Segue o tema de cor. */
  --glass-bg: linear-gradient(135deg, var(--green-2), var(--green));
  --glass-ins-bg: linear-gradient(135deg, rgba(47,127,240,.96), rgba(23,99,214,.90));

  --bg: #eef1f0;
  --bg-grad-1: #e9efec;
  --bg-grad-2: #f4f6f5;
  --card: #ffffff;
  --card-2: #f7f9f8;
  --ink: #11201a;
  --muted: #51605a;   /* mais escuro = texto secundário legível no tema claro (era #6b7872, lavado) */
  --line: #e7eae9;
  --shadow: 0 4px 18px rgba(16,40,30,.07);
  --shadow-lg: 0 14px 40px rgba(16,40,30,.16);
  --ring: rgba(21,194,102,.35);

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* ===== TEMAS DE COR (acento) — só trocam a família do acento; fundo/texto vêm do claro/escuro. Legíveis nos dois. ===== */
html.accent-azul    { --green:#0b3a55; --green-2:#1763b8; --accent:#2f8fef; --accent-2:#38b6ff; --ring:rgba(47,143,239,.35); }
html.accent-roxo    { --green:#3a1d63; --green-2:#6d34c4; --accent:#8b5cf6; --accent-2:#a78bfa; --ring:rgba(139,92,246,.35); }
html.accent-rosa    { --green:#5e1440; --green-2:#b02a6f; --accent:#ec4899; --accent-2:#f472b6; --ring:rgba(236,72,153,.35); }
html.accent-laranja { --green:#5a2e00; --green-2:#b25e12; --accent:#f5820a; --accent-2:#ffa63d; --ring:rgba(245,130,10,.35); }
html.accent-ciano   { --green:#0a3d43; --green-2:#128a99; --accent:#14c2d6; --accent-2:#22d3ee; --ring:rgba(20,194,214,.35); }

/* mockup de teste (iphone.html ?frame=1): força as áreas seguras reais do iPhone 14 Pro Max
   pra eu VER no localhost exatamente como fica no celular (no device real continua o env()). */
html.framed { --safe-top: 59px; --safe-bottom: 34px; }

/* ----- MODO ESCURO: automático (segue o sistema) e forçado (theme-dark) ----- */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    --bg: #0b110e;
    --bg-grad-1: #0c130f;
    --bg-grad-2: #0e1713;
    --card: #141d18;
    --card-2: #18221c;
    --ink: #e9f1ec;
    --muted: #8b9a92;
    --line: #23302a;
    --shadow: 0 4px 18px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 44px rgba(0,0,0,.6);
    /* lâmina de vidro — TEMA ESCURO: acento claro e translúcido (segue o tema de cor; fallback verde p/ browser sem color-mix) */
    --glass-bg: linear-gradient(135deg, rgba(21,194,102,.36), rgba(11,209,122,.16));
    --glass-bg: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    --glass-ins-bg: linear-gradient(135deg, rgba(47,127,240,.38), rgba(23,99,214,.18));
  }
}
html.theme-dark {
  --bg: #0b110e;
  --bg-grad-1: #0c130f;
  --bg-grad-2: #0e1713;
  --card: #141d18;
  --card-2: #18221c;
  --ink: #e9f1ec;
  --muted: #8b9a92;
  --line: #23302a;
  --glass-bg: linear-gradient(135deg, rgba(21,194,102,.36), rgba(11,209,122,.16));
  --glass-bg: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  --glass-ins-bg: linear-gradient(135deg, rgba(47,127,240,.38), rgba(23,99,214,.18));
  --shadow: 0 4px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.6);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* App, não documento: nada de selecionar/copiar texto nem menu de contexto do iOS
   (Copiar/Pesquisar/Traduzir) ao tocar e segurar. O toque-longo de apagar é nosso (JS).
   Exceção: campos de digitação, onde a seleção é necessária pra editar. */
html, body, .app, .tabbar, .modal, .menu-drawer, .list, .section-card {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
/* iOS: um <label> (ou ancestral) com user-select:none NÃO deixa o input filho pegar foco ao tocar.
   Como .section-card é user-select:none, formulários embutidos (simulador, metas…) ficavam "mortos".
   Aqui liberamos foco/edição em QUALQUER formulário dentro de card — vale pra agora e pro futuro. */
/* libera o SUBTREE INTEIRO dos formulários embutidos — nenhum ancestral fica com user-select:none
   entre o input e um contexto selecionável (era isso que exigia 2 toques pra focar no iOS). */
.section-card .g-sim, .section-card .g-sim *,
.section-card .meta-form, .section-card .meta-form *,
.section-card .field, .section-card .field * {
  -webkit-user-select: auto; user-select: auto;
}
.section-card input, .section-card textarea {
  -webkit-user-select: text !important; user-select: text !important;   /* o fix do iOS pede 'text' explícito */
  -webkit-touch-callout: default; touch-action: manipulation; pointer-events: auto; cursor: text;
}
.section-card select { -webkit-user-select: auto !important; user-select: auto !important;
  touch-action: manipulation; pointer-events: auto; cursor: pointer; }
.section-card select { cursor: pointer; }
.section-card button, .section-card .meta-edit { touch-action: manipulation; pointer-events: auto; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: clip; }   /* clip (não hidden) p/ NÃO quebrar o position:sticky do header no iOS */
/* iOS/Android (área do home indicator + overscroll): o fundo do html é o que aparece nessa faixa.
   Igualamos à COR DA TABBAR (--card) → no app a faixa some (mesma cor da barra de baixo).
   Segue o tema (claro/escuro) automaticamente. */
html { background: var(--card); min-height: 100%; overscroll-behavior-y: none; transition: background-color .35s ease; }
/* durante a tela de abertura, a faixa fica VERDE-ESCURA (igual o splash) em vez de branca */
html:has(body.splash-on) { background: #05110c; }
/* na tela de CÓDIGO o fundo é o MESMO verde da entrada → ao abrir o teclado, atrás dele aparece
   só o verde (nunca o app). Esconde também o conteúdo do app pra não vazar no vão do teclado (iOS). */
/* COR sólida ANTES do gradiente: a área de overscroll/safe-area do iOS pinta a background-COLOR
   (o gradiente é imagem) — sem a cor sólida, sobra a faixa BRANCA embaixo. */
html:has(body.lock-on) { background: #0b3d2e linear-gradient(160deg, #0b3d2e 0%, #15805a 50%, #0b3d2e 100%); }
body.lock-on { background: #0b3d2e linear-gradient(160deg, #0b3d2e 0%, #15805a 50%, #0b3d2e 100%); }
/* Com QUALQUER pop-up aberto (scroll travado ou comemoração): a tela inteira — inclusive a faixa do
   home indicator — fica ESCURA, igual ao escurecido do backdrop. Some a faixa branca/clara embaixo,
   independente do tema. (regra via :has + reforço por JS em lockScroll, p/ Safari sem :has) */
html:has(body.scroll-locked), html:has(body.party-on) { background: #0a100d; }
/* tela de entrada (landing): a faixa do rodapé/safe-area na MESMA cor do fundo, em qualquer tema */
html:has(body.welcome-on) { background: var(--bg); }
body.lock-on > *:not(#lockScreen):not(#unlockReveal):not(#splash):not(#recModal) { visibility: hidden !important; }
/* Fundo (degradês) numa camada FIXA própria — em vez de background-attachment:fixed no body, que no
   iOS Safari deixa emendas/linhas verticais nas bordas. Cobre a tela toda, sem romper a UI. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 100% -8%, rgba(21,194,102,.10), transparent 58%),
    radial-gradient(800px 500px at -10% 102%, rgba(18,115,77,.08), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 78%, var(--card) 100%);
}
body {
  font-family: var(--font);
  /* coluna que ocupa a tela inteira → o conteúdo preenche igual em TODAS as abas
     (some o buraco preto do Receitas/Débito; a faixa fica consistente) */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background-color: transparent;   /* base sólida fica no <html> (var(--card)); o degradê no ::before fixo */
  color: var(--ink);
  padding-bottom: calc(96px + var(--safe-bottom));   /* espaço pra pílula flutuante (elevada) + FAB */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}
.transitions, body, .section-card, .kpi, .list, .flow-card, .modal-card, .tabbar, .alert-banner, .ver-banner {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* RODAPÉ contínuo p/ a tabbar FLUTUANTE: um degradê com a cor do fundo (var(--card)) que vai do
   sólido embaixo (cobre o vão abaixo da pílula e a área do home indicator) e dissolve o conteúdo
   pra cima — assim o fundo ocupa a tela toda, sem "quebra" nem conteúdo espiando atrás da pílula.
   Fica ATRÁS da pílula (z-45) e ACIMA do conteúdo; some sob splash/lock/modais. */
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(98px + var(--safe-bottom));
  background: linear-gradient(to top, var(--card) calc(56px + var(--safe-bottom)), transparent);
  z-index: 39; pointer-events: none;   /* acima do conteúdo, abaixo do FAB (40)/scroll-top (44)/tabbar (45) */
}
body.splash-on::after, body.lock-on::after, body.scroll-locked::after, body.kbd-open::after { display: none; }   /* teclado aberto: some a faixa do rodapé p/ não driftar e virar "mancha" no meio (#bugfix-raia-teclado) */

/* tabular numbers nos valores monetários */
.value, .amount, .total, .flow-row b, .kpi .value, .cval, .gauge-num { font-variant-numeric: tabular-nums; }

/* ===== Animações ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.fade-in { animation: fadeInUp .42s cubic-bezier(.2,.7,.2,1) both; }
main > * { animation: fadeInUp .42s cubic-bezier(.2,.7,.2,1) both; }
main > *:nth-child(1){animation-delay:.02s} main > *:nth-child(2){animation-delay:.06s}
main > *:nth-child(3){animation-delay:.10s} main > *:nth-child(4){animation-delay:.14s}
main > *:nth-child(5){animation-delay:.18s} main > *:nth-child(6){animation-delay:.22s}
main > *:nth-child(7){animation-delay:.26s} main > *:nth-child(8){animation-delay:.30s}
/* RENDER ESTÁTICO: com #view em no-anim, nada de animação de ENTRADA (fadeInUp/rowIn) → a tela
   atualiza no lugar, sem "piscar", em qualquer ação. As decorativas contínuas (medidor, rosca,
   borda do simulador, sino) usam outros seletores e seguem normais. */
#view.no-anim > *:not(.rv-pane), #view.no-anim .fade-in, #view.no-anim .list .list-row,
#view.no-anim .insight, #view.no-anim .ins-card, #view.no-anim .health-meta { animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, main > * { animation: none !important; transition: none !important; } }
/* transição ao trocar Resumo/Gráficos/Insights — os BLOCOS entram um a um (cascata), fluido; o seletor fica parado */
.rv-pane { animation: none; }   /* base: render normal NÃO desliza nem pisca (vence o `main > *` fadeInUp) */
.rv-stg-item.dir-right { animation: rvStgRight .55s cubic-bezier(.22,.7,.2,1) both; animation-delay: calc(var(--i, 0) * .11s); }
.rv-stg-item.dir-left  { animation: rvStgLeft  .55s cubic-bezier(.22,.7,.2,1) both; animation-delay: calc(var(--i, 0) * .11s); }
@keyframes rvStgRight { from { opacity: 0; transform: translateX(44px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rvStgLeft  { from { opacity: 0; transform: translateX(-44px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rv-stg-item.dir-right, .rv-stg-item.dir-left { animation: none; } }

/* ===== HEADER ===== */
.app-header {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-2) 100%);   /* segue o tema de cor (era hex fixo) */
  color: #fff;
  padding: calc(14px + var(--safe-top)) 18px 14px;
  /* FIXO no topo (sticky quebrava no iOS dentro do body flex-column) → position:fixed é à prova de bug.
     O espaçador (padding-top no body, via JS syncHeaderSpacer) empurra o conteúdo pra baixo do header. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  box-shadow: 0 6px 22px rgba(8,40,28,.28);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.app-header h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.3px; line-height: 36px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* 🔔 sino de alertas no header — aparece balançando quando há conta a pagar; some quando não há */
.bell-btn { position: relative; overflow: visible; }
.bell-btn.hidden { display: none; }
/* a FORMA (botão) NÃO balança — a atenção fica no emoji animado (sino.webp) dentro dele */
.hdr-emoji { width: 23px; height: 23px; display: block; }
@keyframes bellSwing {
  0%, 55%, 100% { transform: rotate(0); }
  60% { transform: rotate(13deg); } 67% { transform: rotate(-10deg); }
  74% { transform: rotate(7deg); } 81% { transform: rotate(-4deg); } 88% { transform: rotate(0); }
}
.bell-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 99px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 14px; text-align: center;
  border: 1.5px solid var(--card); animation: bellPulse 1.6s ease-in-out infinite; }
.bell-btn.warn .bell-badge { background: #c8860b; animation-name: bellPulseWarn; }
@keyframes bellPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 50% { box-shadow: 0 0 0 6px rgba(229,72,77,0); } }
@keyframes bellPulseWarn { 0%,100% { box-shadow: 0 0 0 0 rgba(200,134,11,.55); } 50% { box-shadow: 0 0 0 6px rgba(200,134,11,0); } }
@media (prefers-reduced-motion: reduce) { .bell-btn:not(.hidden) { animation: none; } .bell-badge { animation: none; } }
/* sino "visto" → para de balançar e o badge para de pulsar (mas continua aparecendo com a contagem) */
.bell-btn.seen:not(.hidden) { animation: none; }
.bell-btn.seen .bell-badge { animation: none; }

/* 👤 avatar de perfil no canto do header */
.avatar-btn { position: relative; width: 44px; height: 44px; flex: 0 0 auto; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.25); transition: transform .12s ease; }
.avatar-btn:active { transform: scale(.92); }
.avatar-btn .avatar-img { position: absolute; inset: 0; background-size: cover; background-position: center; display: none; }
.avatar-btn.has-photo .avatar-img { display: block; }
.avatar-btn.has-photo .avatar-ini { display: none; }
.avatar-btn .avatar-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px; }

/* perfil */
/* não ultrapassa a linha do menu de meses (topo) — cabe na tela e o ✕ fica sempre visível */
.prof-card { max-width: 360px; max-height: 92dvh; overflow-y: auto; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ overscroll-behavior: contain; scrollbar-width: none; contain: paint; }   /* contain:paint → recorta o conteúdo ao card no iOS (nada escapa por cima ao rolar) */
.prof-card::-webkit-scrollbar { display: none; }
/* ✕ FIXO no topo do modal (não some ao rolar). float+sticky quebra no iOS → bloco right-align + sticky.
   O título vira um cabeçalho sólido sticky: o conteúdo rola limpo POR BAIXO (sem aparecer atrás do ✕). */
.prof-card .wn-close { position: sticky; top: 13px; z-index: 8; display: block; width: 36px; height: 36px; margin: 0 0 -36px auto; }
.prof-card > h2 { position: sticky; top: 0; z-index: 6; background: var(--card); margin: -22px -18px 0; padding: 22px 44px 14px; border-radius: 18px 18px 0 0; }   /* header opaco (cor do card) */
/* espelha o rodapé Salvar: tampa SÓLIDA acima (cobre o padding do topo → nada vaza por cima) + gradiente suave abaixo (dissolve o conteúdo que rola por baixo). Pega todo o pedaço, sem sombra dura. */
.prof-card > h2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; background: var(--card); pointer-events: none; }
.prof-card > h2::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px; background: linear-gradient(to bottom, var(--card) 0, var(--card) 55%, transparent 100%); pointer-events: none; }
.prof-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 18px; }
.prof-photo { position: relative; width: 108px; height: 108px; border: 0; padding: 0; cursor: pointer; background: none;
  overflow: visible; transition: transform .14s ease; }   /* overflow visível → a câmera NÃO é cortada */
.prof-photo:active { transform: scale(.95); }
.prof-photo .prof-photo-inner { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--card-2);
  box-shadow: 0 0 0 3px var(--accent), 0 8px 22px rgba(0,0,0,.4); }
.prof-photo .prof-photo-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.prof-photo.empty .prof-photo-img { background: linear-gradient(135deg, var(--green-2), var(--green)); }
.prof-photo.empty .prof-photo-inner::after { content: "👤"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.prof-photo .prof-photo-cam { position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--accent); color: #06251a;
  border: 3px solid var(--card); box-shadow: 0 3px 10px rgba(0,0,0,.45); z-index: 2; }   /* destacada, com anel, fora do recorte */
.prof-photo .prof-photo-cam svg { width: 18px; height: 18px; display: block; }   /* ícone SVG = centralizado certinho (sem o emoji torto) */
.prof-photo-acts { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.prof-rm { background: none; border: 0; color: var(--red); font-family: var(--font); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 8px; }
.prof-rm.prof-edit { color: var(--accent-2); }
.prof-photo-acts .prof-rm.hidden { display: none; }
/* tira de avatares predefinidos (Netflix-style) + importar */
.avatar-pick-wrap { margin: -4px 0 14px; }
.avatar-pick-label { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 8px; }
.avatar-row { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.avatar-row::-webkit-scrollbar { display: none; }
.av-opt { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  background-size: cover; background-position: center; background-color: var(--card-2); scroll-snap-align: center; transition: transform .12s ease, border-color .15s ease; }
.av-opt:active { transform: scale(.9); }
.av-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.av-import { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--accent-2);
  background: var(--card-2); border: 2px dashed var(--line); }
/* ⬆️ Voltar ao topo — aparece ao descer, some no topo (canto inferior esquerdo, não bate no +) */
/* canto ESQUERDO (longe do conteúdo central e do + à direita) → não tapa mais títulos de seção */
.scroll-top { position: fixed; left: 16px; right: auto; bottom: calc(112px + var(--safe-bottom)); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.3); z-index: 44; cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.scroll-top svg { width: 22px; height: 22px; }
.scroll-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:active { transform: translateY(0) scale(.9); }
body.kbd-open .scroll-top, body.lock-on .scroll-top, body.splash-on .scroll-top { display: none !important; }
@media (prefers-reduced-motion: reduce) { .scroll-top { transition: opacity .2s ease; } }
/* 🐾 Bichinhos animados (avatar) — SVG inline, cada um com movimento próprio */
.animal-svg { width: 100%; height: 100%; display: block; }
.av-opt { overflow: hidden; }
.av-opt:not(.av-import) { background: transparent; }
.animal-svg .ani-bob { transform-box: fill-box; transform-origin: 50% 82%; animation: aniBob 3s ease-in-out infinite; }
.animal-svg .ani-lid { transform-box: fill-box; transform-origin: 50% 0%; animation: aniBlink 4s ease-in-out infinite; }
.animal-svg .ani-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: aniEar 4s ease-in-out infinite; }
@keyframes aniBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes aniBlink { 0%,92%,100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes aniEar { 0%,86%,100% { transform: rotate(0); } 90% { transform: rotate(-7deg); } 94% { transform: rotate(5deg); } }
@keyframes aniHop { 0%,68%,100% { transform: translateY(0); } 82% { transform: translateY(-7px); } }
@keyframes aniTilt { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes aniWaddle { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-1px); } }
@keyframes aniWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } }
@keyframes aniPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.animal-svg.raposa .ani-bob { animation-duration: 2.8s; }
.animal-svg.gato .ani-bob { animation-duration: 3.4s; }
.animal-svg.golfinho .ani-bob { animation-duration: 3.1s; }
.animal-svg.pintinho .ani-bob { animation-duration: 2.2s; }
.animal-svg.panda .ani-bob { animation: aniPulse 3s ease-in-out infinite; }
.animal-svg.leao .ani-bob { animation: aniWiggle 3.2s ease-in-out infinite; }
.animal-svg.tigre .ani-bob { animation: aniWiggle 2.7s ease-in-out infinite; }
.animal-svg.macaco .ani-bob { animation: aniHop 2.6s ease-in-out infinite; }
.animal-svg.sapo .ani-bob { animation: aniHop 2.3s ease-in-out infinite; }
.animal-svg.coruja .ani-bob { animation: aniTilt 3.6s ease-in-out infinite; }
.animal-svg.unicornio .ani-bob { animation: aniTilt 3.3s ease-in-out infinite; }
.animal-svg.pinguim .ani-bob { animation: aniWaddle 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .animal-svg .ani-bob { animation: none; } }
/* avatar com emoji ANIMADO do Noto (WebP) — preenche o contêiner redondo, com a cor de fundo do animal */
.animal-anim { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: inherit; overflow: hidden; }
.animal-anim .emoji-anim { width: 84%; height: 84%; object-fit: contain; }
/* emoji animado genérico (inline em textos/medalhas) */
.emoji-anim { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.22em; object-fit: contain; }
img.emoji-anim { -webkit-user-select: none; user-select: none; }
/* fallback unicode do animEmoji: escondido até o webp falhar (.on). font-size:1em herda o tamanho do container. */
.emoji-fb { display: none; }
.emoji-fb.on { display: inline-block; font-size: 1em; line-height: 1; font-style: normal; vertical-align: middle; }
/* 🔒 Oferta de senha no 1º acesso (onboarding) */
.onb-pin { display: flex; gap: 10px; margin: 10px 0; }
.onb-pin input { flex: 1; min-width: 0; text-align: center; letter-spacing: 6px; font-size: 20px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink); }
.onb-pin input::placeholder { letter-spacing: normal; font-size: 14px; }
.onb-pin input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.onb-warn { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 10px; }
/* 💑 Conta conjunta: desativar + histórico */
.prof-couple-on { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.btn.couple-off { background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.45); color: #ff8a8d; font-weight: 700; }
.btn.couple-off:active { transform: scale(.98); }
.cd-card { text-align: center; max-width: 380px; }
.cd-card h2 { margin: 8px 0 6px; }
.cd-sub { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.cd-impacts { text-align: left; list-style: none; margin: 0 0 14px; padding: 12px; background: var(--card-2); border-radius: 12px; border: 1px solid var(--line); }
.cd-impacts li { font-size: 12.7px; line-height: 1.5; margin: 7px 0; }
.cd-actions { display: flex; flex-direction: column; gap: 8px; }
.ch-card { text-align: left; max-width: 400px; max-height: calc(100dvh - 132px); overflow-y: auto; scrollbar-width: none; }
.ch-card::-webkit-scrollbar { display: none; }
.ch-card .wn-close { position: sticky; top: 0; float: right; }
.ch-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ch-list li { padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 8px; }
.ch-acao { font-size: 13.5px; font-weight: 700; }
.ch-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ch-empty { color: var(--muted); font-size: 13px; text-align: center; }
/* 🛡️ Modo admin (só o dono) */
.menu-item.mi-admin { background: rgba(120,130,255,.10); border: 1px solid rgba(120,130,255,.35); }
.menu-item.mi-admin b { color: #aab2ff; }
.admin-card { text-align: left; max-width: 380px; }
.admin-card .admin-head { display: flex; align-items: center; gap: 9px; justify-content: center; }
.admin-card .admin-head span { font-size: 26px; }
.admin-card h2 { margin: 6px 0; }
.admin-sub { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 12px; }
.admin-msg { font-size: 12.5px; color: var(--red); text-align: center; min-height: 16px; margin: 6px 0; }
.admin-env { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; font-size: 13px; margin: 4px 0 10px; }
.admin-env b { font-size: 15px; } .admin-env i { font-size: 11.5px; color: var(--muted); font-style: normal; }
.admin-env.env-test { background: rgba(217,148,9,.14); border: 1px solid rgba(217,148,9,.4); }
.admin-env.env-prod { background: rgba(21,194,102,.14); border: 1px solid rgba(21,194,102,.45); }
.admin-env.env-local { background: var(--card-2); border: 1px solid var(--line); }
.admin-ver { font-size: 14px; margin-bottom: 10px; } .admin-ok { color: var(--accent-2); font-size: 12px; }
.admin-cl { background: var(--card-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; max-height: 30vh; overflow-y: auto; }
.admin-cl-t { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.admin-cl ul { margin: 0; padding-left: 18px; } .admin-cl li { font-size: 12.5px; margin: 4px 0; line-height: 1.4; }
.admin-note { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 10px 0; }
/* opção "Atualizar o app" no menu — só aparece quando há atualização; realce verde pulsante */
.menu-item.mi-update { background: linear-gradient(135deg, rgba(21,194,102,.18), rgba(11,209,122,.10)); border: 1px solid rgba(21,194,102,.45); }
.menu-item.mi-update .mi-ic { animation: miUpdPulse 1.6s ease-in-out infinite; }
.menu-item.mi-update b { color: var(--accent-2); }
@keyframes miUpdPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .menu-item.mi-update .mi-ic { animation: none; } }
/* Convidar amigos: item de DESTAQUE no topo do menu (rosa/presente) + emoji animado com bounce + brilho passando. */
.menu-item.mi-conv { background: linear-gradient(135deg, rgba(255,92,141,.20), rgba(124,58,237,.12)); border: 1px solid rgba(255,92,141,.5); position: relative; flex-shrink: 0; clip-path: inset(0 round 14px); }   /* clip-path (não overflow:hidden — este vira scroll-container e o flex-column do menu colapsava o item) recorta a shine ::after */
.menu-item.mi-conv .mi-ic { background: rgba(255,92,141,.16); box-shadow: inset 0 0 0 1px rgba(255,92,141,.4); animation: miConvBounce 2s ease-in-out infinite; }
.menu-item.mi-conv b { color: #ff7aa6; }
.menu-item.mi-conv i { color: #ffa7c4; }
.menu-item.mi-conv::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg); animation: miConvShine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes miConvBounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.12); } }
@keyframes miConvShine { 0% { left: -60%; } 55%,100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .menu-item.mi-conv .mi-ic, .menu-item.mi-conv::after { animation: none; } }
.prof-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.prof-field span { font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: left; padding-left: 13px; }   /* rótulo alinhado com o texto do campo (não centralizado solto) */
.prof-field input { width: 100%; box-sizing: border-box; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--line); text-align: left; -webkit-appearance: none; appearance: none;
  background: var(--card-2); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.3; min-height: 48px; }
/* telefone: +55 FIXO (não editável) + input só DDD/número */
.tel-wrap { display: flex; align-items: stretch; }
.tel-wrap .tel-ddi { display: flex; align-items: center; padding: 0 13px; min-height: 48px; border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; background: var(--card-2); color: var(--ink); font-size: 16px; font-weight: 800; white-space: nowrap; }
.tel-wrap input { flex: 1; width: auto !important; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
/* input[type=date] no iOS vinha mais baixo/torto que o de texto → mesma caixa, mesmo alinhamento */
.prof-field input[type="date"] { display: block; min-height: 48px; position: relative; }
.prof-field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* vazio → mostra "Sua data" (placeholder). Ao escolher, some e mostra a data. O toque abre o calendário normal. */
.prof-field input[type="date"].is-empty { color: transparent; }
.prof-field input[type="date"].is-empty::-webkit-datetime-edit { color: transparent; }
.prof-field input[type="date"].is-empty::before {
  content: "Sua data"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 16px; pointer-events: none;
}
.prof-field input:focus { outline: none; border-color: var(--accent); }
.prof-conj { margin: -2px 0 12px; padding: 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.prof-conj.hidden { display: none; }
.prof-conj-txt { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.prof-pair-status { margin-top: 8px; text-align: center; }
.pair-ok { color: var(--green); font-weight: 800; font-size: 13px; }
.prof-synchelp { width: 100%; margin-top: 8px; }

/* modal "Aviso de vencimento" */
.aviso-card { max-width: 340px; text-align: center; }
.aviso-head { display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: center; margin-bottom: 10px; }
.aviso-head h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.aviso-emoji-img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.aviso-emoji-big { font-size: 34px; line-height: 1; filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.inst-steps { text-align: left; margin: 2px 0 4px; padding-left: 22px; font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.inst-steps li { margin-bottom: 5px; }
.inst-steps li::marker { color: var(--accent); font-weight: 800; }
.aviso-sub { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.aviso-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.aviso-step { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-size: 22px; font-weight: 800; cursor: pointer; font-family: var(--font); line-height: 1; }
.aviso-step:active { transform: scale(.92); }
.aviso-row #avDays { width: 64px; text-align: center; font-size: 22px; font-weight: 800; padding: 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-family: var(--font); }
.aviso-unit { font-size: 13px; color: var(--muted); }
.aviso-card #avApply { width: 100%; }
.aviso-note { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.pair-guide-link { width: 100%; background: none; border: 0; color: var(--accent-2); font-family: var(--font); font-weight: 700; font-size: 13px; cursor: pointer; padding: 8px; text-decoration: underline; }

/* guia "Como sincronizar" */
.sh-card { max-width: 400px; }
.sh-head { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 14px; }
.sh-head span { font-size: 22px; } .sh-head h2 { margin: 0; font-size: 18px; }
.sh-body { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ text-align: left; }
.sh-rules-t, .sh-steps-t, .sh-err-t { text-align: left; }
.sh-rules { background: rgba(21,194,102,.1); border: 1px solid rgba(21,194,102,.28); border-radius: 12px; padding: 12px 12px 12px 4px; margin-bottom: 14px; }
.sh-rules-t { font-weight: 800; font-size: 13.5px; color: var(--ink); padding-left: 8px; margin-bottom: 4px; }
.sh-steps-t, .sh-err-t { font-weight: 800; font-size: 14px; margin: 6px 0 8px; }
.sh-err-t { margin-top: 16px; }
.sh-body ul, .sh-body ol { margin: 0; padding-left: 22px; }
.sh-body li { font-size: 13px; line-height: 1.55; color: var(--muted); margin-bottom: 6px; }
.sh-body li b { color: var(--ink); }
.sh-steps li { margin-bottom: 11px; }
.sh-card #shPair { width: 100%; margin-top: 16px; }
/* botões de ação dentro dos passos do walkthrough da conta conjunta */
.sh-steps .sh-act { display: block; width: 100%; margin: 9px 0 2px; padding: 11px 14px; font-size: 13.5px; }

/* pareamento do casal */
.pair-card { max-width: 360px; }
.pair-body { display: flex; flex-direction: column; gap: 10px; max-height: 66vh; overflow-y: auto; overscroll-behavior: contain; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ }
.pair-intro, .pair-step, .pair-wait, .pair-err { font-size: 13px; color: var(--ink); margin: 2px 0; line-height: 1.45; }
.pair-step b { color: var(--accent-2); }
.pair-wait { color: var(--muted); text-align: center; font-weight: 700; }
.pair-err { color: var(--red); font-weight: 700; }
.pair-role { width: 100%; }
.pair-invite { border-style: dashed; }
.pair-hint { margin-top: 4px; padding: 10px 12px; border-radius: 11px; background: var(--card-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.5; }
/* conta conjunta — já vinculado (anti-fraude): parceiro atual + encerrar */
.pair-lock { text-align: center; }
.pair-lock .pl-ic { font-size: 34px; margin: 2px 0 6px; }
.pair-vinc { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; text-align: left; }
.pair-vinc .pv-nome { font-size: 15px; font-weight: 800; color: var(--ink); }
.pair-vinc .pv-em { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pair-vinc .pv-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pair-qr { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; padding: 10px; min-height: 80px; }
.pair-qr svg { width: 200px; height: 200px; max-width: 60vw; max-height: 60vw; display: block; }
.pair-noqr { color: #333; font-size: 12.5px; text-align: center; padding: 14px; }
.pair-actions { display: flex; gap: 8px; }
.pair-actions .btn { flex: 1; }
.pair-ta { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-family: var(--font); font-size: 13px; word-break: break-all; }
.pair-ta:focus { outline: none; border-color: var(--accent); }
.pair-msg { font-size: 12.5px; color: var(--muted); text-align: center; min-height: 16px; }
.pair-connected { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
.pair-connected p { font-size: 14px; line-height: 1.5; margin: 0; }
.pair-ok-big { font-size: 46px; animation: bellPulse 1.4s ease-in-out infinite; border-radius: 50%; }

/* ❓ "?" contextual */
.help-q { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-left: 6px;
  border-radius: 50%; border: 0; background: var(--card-2); color: var(--muted); font-family: var(--font); font-weight: 800;
  font-size: 12px; line-height: 1; cursor: pointer; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .12s ease, color .2s ease, background .2s ease; }
/* área de toque ampliada (~41px) sem mudar o visual do círculo — alvo confortável no iPhone */
.help-q::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.help-q:active { transform: scale(.82); }
.help-q:hover { color: var(--accent); }
.help-card { max-width: 320px; text-align: center; position: relative; }
.modal.center .modal-card.help-card { animation: helpCardIn .32s cubic-bezier(.2,.9,.25,1.15) both; }   /* +especificidade → vence .modal.center .modal-card{animation:popIn} */
.help-card .help-ic { font-size: 40px; margin-bottom: 8px; display: inline-block; animation: nePop .5s cubic-bezier(.34,1.6,.5,1) both; }
.help-card .help-ic.emoji-anim { width: 46px; height: 46px; }
.help-card h2 { margin: 0 0 10px; }
.help-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0 0 16px; }
.help-card .btn { width: 100%; }
@keyframes helpCardIn { from { opacity: 0; transform: scale(.9) translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal.center .modal-card.help-card { animation: fadeInUp .18s ease both; } }

/* FAQ */
.faq-card { max-width: 410px; }
.faq-head { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 14px; }
.faq-head { line-height: 1; }
.faq-head > * { align-self: center; }
.faq-head span { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; } .faq-head h2 { margin: 0 !important; line-height: 1; }
.faq-head .emoji-anim { width: 26px; height: 26px; }
.faq-head > .fh-ic { width: 26px; height: 26px; flex: 0 0 auto; }
/* qualquer cabeçalho/linha "ícone + texto": emoji animado centralizado com o texto (alinhamento padrão) */
.meta-form-head, .meta-row { align-items: center; }
.meta-form-head { display: flex; }
.meta-form-head b { line-height: 1.1; }
.faq-body { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--card-2); border: 1px solid var(--line); border-radius: 13px; padding: 0 13px; }
.faq-item summary { cursor: pointer; font-weight: 800; font-size: 13.5px; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "⌄"; color: var(--muted); transition: transform .2s ease; font-size: 16px; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item p { margin: 0 0 11px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.faq-item p code { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
.faq-content { padding-bottom: 12px; }
/* botão que leva direto à opção explicada (e faz a borda dela piscar) */
.faq-go { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff;
  border: 0; border-radius: 11px; padding: 9px 14px; font-size: 12.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 12px rgba(31,217,122,.28); transition: transform .12s ease, box-shadow .2s ease; }
.faq-go:active { transform: scale(.96); }

/* Tutorial */
.tut-card { max-width: 340px; text-align: center; }
.tut-ic { font-size: 56px; margin: 4px 0 12px; display: inline-block; }
.tut-ic .tut-ic-img { width: 66px; height: 66px; display: block; }   /* emoji-gif animado em cada passo */
.tut-ic.pop { animation: nePop .45s cubic-bezier(.34,1.6,.5,1) both; }
.tut-card h2 { margin: 0 0 10px; }
.tut-card p { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 18px; min-height: 70px; }
.tut-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.tut-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .25s ease; }
.tut-dots span.on { background: var(--accent); width: 22px; border-radius: 5px; }
.tut-nav { display: flex; gap: 8px; }
.tut-nav .btn { flex: 1; }
.tut-skiplink { background: none; border: 0; color: var(--muted); font-family: var(--font); font-size: 12.5px; margin-top: 12px; cursor: pointer; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .help-card .help-ic, .tut-ic.pop { animation: none; } }

/* recorte circular da foto */
.crop-card { max-width: 360px; }
.crop-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.crop-stage { position: relative; width: 196px; height: 196px; max-width: 54vw; max-height: 54vw; margin: 0 auto 10px;
  border-radius: 50%; overflow: hidden; background: #06251a; touch-action: none; cursor: grab;
  box-shadow: 0 0 0 3px var(--accent), inset 0 0 0 9999px rgba(0,0,0,0); user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-stage #cropImg { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* controles do recorte: zoom e girar — SEMPRE visíveis, um por linha, ícone + barra */
.crop-ctrl { display: flex; align-items: center; gap: 11px; margin: 0 0 9px; }
.crop-ctrl-ic { flex: 0 0 auto; width: 26px; text-align: center; font-size: 16px; opacity: .85; }
.crop-slider { flex: 1 1 auto; width: 100%; min-width: 0; accent-color: var(--accent); }
/* rodapé do crop NÃO é fixo/sticky → sem faixa-gradiente cobrindo a barra de girar e sem scroll */
.modal-card.crop-card > .modal-actions { position: static; margin: 12px 0 0; padding: 0; }

/* painel de notificações */
.modal.center .modal-card.notif-card { max-width: 460px; padding-left: 14px; padding-right: 14px; display: flex; flex-direction: column; max-height: 90dvh; overflow: hidden; }
.notif-head { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 16px; }
.notif-head h2 { margin: 0; }
.notif-bell { font-size: 24px; display: inline-block; transform-origin: 50% 16%; animation: bellSwing 2.6s ease-in-out infinite; }
/* cresce com a quantidade de contas: estica pra cima/baixo até 64vh, aí rola por dentro */
.notif-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11px; min-height: 150px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; /* SÓ o corpo rola; cabeçalho + X + rodapé ficam fixos (o card não rola) */ padding: 2px; }
.modal.center .modal-card.notif-card .modal-actions { flex: 0 0 auto; margin-top: 12px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--muted); padding: 22px 10px; animation: notifIn .4s ease both; }
.notif-empty .ne-ic { font-size: 46px; margin-bottom: 10px; animation: nePop .5s cubic-bezier(.34,1.6,.5,1) both; }
.notif-empty p { margin: 0; font-weight: 800; color: var(--ink); font-size: 15px; line-height: 1.5; }
.notif-empty p span { font-weight: 600; color: var(--muted); font-size: 13px; }
@keyframes nePop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.notif-row { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border-radius: 16px; background: var(--card-2);
  border-left: 4px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.14);
  animation: notifIn .36s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes notifIn { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }
.notif-row.u-red { border-left-color: var(--red); }
.notif-row.u-amber { border-left-color: #d99409; }
.notif-row.u-green { border-left-color: var(--green); }
.notif-row .nr-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(255,255,255,.06); }
.notif-row.u-red .nr-ic { background: rgba(229,72,77,.16); }
.notif-row.u-amber .nr-ic { background: rgba(217,148,9,.16); }
.notif-row.u-green .nr-ic { background: rgba(21,194,102,.16); }
.notif-row .nr-main { flex: 1 1 auto; min-width: 0; text-align: left; }
.notif-row .nr-name { font-weight: 800; font-size: 15.5px; line-height: 1.25; text-align: left; word-break: break-word; }
.notif-row .nr-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; text-align: left; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.notif-row .nr-val { font-weight: 800; font-size: 15px; color: var(--ink); margin-top: 4px; text-align: left; }
.notif-row .vr-pay { flex: 0 0 auto; }
.notif-row .vr-pay.btn { padding: 9px 13px; font-size: 13px; border-radius: 11px; }   /* compacto → sobra espaço pro texto da conta */
@media (prefers-reduced-motion: reduce) { .notif-bell, .notif-row, .notif-empty .ne-ic { animation: none; } }
/* bolinha de "sincronizando" no header — aparece durante o sync e some ao terminar */
.sync-spin { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box;
  border: 2.5px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: syncSpin .7s linear infinite; }
.sync-spin.hidden { display: none; }
@keyframes syncSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sync-spin { animation-duration: 1.5s; } }
.icon-btn {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.10); color: #fff;
  font-size: 17px; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .2s ease; backdrop-filter: blur(4px);
}
.icon-btn:hover { background: rgba(255,255,255,.24); }
.icon-btn:active { transform: scale(.88); }
.icon-btn:disabled { cursor: default; }
/* foco de teclado visível (acessibilidade) — antes não havia indicação de foco */
:where(button, a, [tabindex], input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Onboarding (1ª abertura) ===== */
.onb { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 22px 14px; animation: fadeInUp .2s ease both; }
.onb.hidden { display: none; }
.onb-card { background: var(--card); color: var(--ink); width: 100%; max-width: 400px; border-radius: 22px;
  padding: 24px 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); max-height: 88dvh; overflow-y: auto; }
.onb-logo { display: block; margin: 2px auto 12px; }
.onb-card h2 { font-size: 23px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 6px; text-align: center; }
.onb-sub { font-size: 14.5px; color: var(--muted); line-height: 1.5; text-align: center; margin: 0 0 16px; }
.onb-note { background: var(--card-2); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px;
  font-size: 14px; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; line-height: 1.45; }
.onb-note svg { flex: 0 0 auto; margin-top: 1px; }
.onb .btn { width: 100%; min-height: 48px; margin-top: 10px; }
.onb .btn:first-of-type { margin-top: 0; }
.onb .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.onb-skip { display: block; width: 100%; background: 0; border: 0; color: var(--muted); font-family: var(--font);
  font-size: 13.5px; font-weight: 700; padding: 14px 0 2px; cursor: pointer; text-align: center; }
.onb-tourtitle { font-size: 20px; font-weight: 800; margin: 4px 0 8px; text-align: center; }
.onb-tourtext { font-size: 15px; color: var(--ink); line-height: 1.55; text-align: center; margin: 0 0 18px; opacity: .92; }
.onb-step-ic { display: block; margin: 4px auto 12px; }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.onb-dots { display: flex; gap: 7px; }
.onb-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.onb-dots i.on { background: var(--accent); }
.onb-foot .btn { width: auto; min-height: 44px; margin: 0; padding: 9px 16px; }
.onb-nav { display: flex; gap: 8px; }
/* banner persistente "você está vendo dados de exemplo" */
.seed-banner { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; color: var(--ink); }
.seed-banner b { font-weight: 800; }
.seed-banner .sb-go { min-height: 40px; padding: 8px 13px; border-radius: 10px; background: var(--accent); color: #062018;
  border: 0; font-weight: 800; font-family: var(--font); font-size: 13px; cursor: pointer; white-space: nowrap; }
.seed-banner .sb-go:active { transform: scale(.96); }

/* ===== Menu lateral (☰) ===== */
.header-left { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }   /* título manda no espaço → menos "..." */
/* botões do cabeçalho um pouco menores → sobra largura pro título (ex.: "Débitos do dia a dia") */
.app-header .icon-btn { width: 44px; height: 44px; font-size: 16px; }
/* emoji animado dentro do título (saudação alternando com o nome da página) */
.app-header h1 .title-emoji { width: 22px; height: 22px; vertical-align: -5px; margin-left: 3px; }
.app-header h1 .tw-text, .app-header h1 .tw-emo { display: inline; }
/* cursor piscando (efeito máquina de escrever) — só enquanto digita/apaga */
.app-header h1.typing .tw-text::after { content: "|"; margin-left: 1px; font-weight: 400; opacity: .9; animation: twCaret .6s steps(1) infinite; }
@keyframes twCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .app-header h1.typing .tw-text::after { animation: none; } }

/* ===== Sair do app: cortina verde fechando + bichinho (gif 1x) ===== */
.logout-fx { position: fixed; inset: 0; z-index: 1600; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(72% 58% at 50% 42%, #0e4a36 0%, #08231a 56%, #05110c 100%);
  opacity: 0; transition: opacity .55s ease; }
.logout-fx.go { opacity: 1; }
/* 1) bichinho roda ~3s. 2) ANIM-OUT: o círculo+emoji + nome esmaecem e encolhem juntos (fundo verde fica) */
.logout-fx.anim-out .lf-avatar, .logout-fx.anim-out .lf-name { transform: scale(.72) !important; opacity: 0 !important; transition: transform .55s ease, opacity .5s ease; animation: none !important; }
/* nome do app igual ao da tela de entrada, abaixo do círculo — entra/sai junto com o bichinho */
.logout-fx .lf-name { margin-top: 20px; font-size: 27px; font-weight: 800; letter-spacing: -.4px; color: #eafff4;
  text-align: center; opacity: 0; transform: translateY(10px) scale(.92); animation: lfNameIn .7s cubic-bezier(.2,.8,.2,1) .5s forwards; }
@keyframes lfNameIn { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 55% { opacity: 1; transform: translateY(0) scale(1.04); } 100% { opacity: 1; transform: none; } }
/* 3) FADE-OUT: no fim, o fundo verde sai (revela a entrada esmaecendo) */
.logout-fx.fade-out { opacity: 0; }
.logout-fx .lf-avatar { width: 134px; height: 134px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 18px 54px rgba(0,0,0,.5);
  transform: scale(.55); opacity: 0; animation: lfPop 1s cubic-bezier(.2,.8,.2,1) .3s forwards; }
.logout-fx .lf-avatar .animal-anim, .logout-fx .lf-avatar .animal-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
@keyframes lfPop { 0% { transform: scale(.55); opacity: 0; } 45% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ===== Tela de entrada (landing após sair) ===== */
.welcome-screen { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); padding: calc(18px + var(--safe-top)) 26px calc(18px + var(--safe-bottom));
  opacity: 0; transition: opacity .45s ease; overflow-y: auto; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ }
.welcome-screen.show { opacity: 1; }
.wel-brand { font-size: 27px; font-weight: 800; letter-spacing: -.4px; color: var(--accent); margin: 0 0 16px; flex: 0 0 auto; text-align: center; }
/* botão de ATUALIZAR no login (deslogado) — sempre visível quando há versão nova */
.wel-upd-bar { flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto 14px; display: block; cursor: pointer;
  background: linear-gradient(180deg, var(--green-2, #19d17a) 0%, var(--accent, #15c266) 100%); color: #062a18;
  border: 0; border-radius: 14px; padding: 13px 16px; font-family: var(--font); font-weight: 800; font-size: 15px;
  box-shadow: 0 12px 26px rgba(11,61,46,.45); animation: welUpdPulse 2s ease-in-out infinite; }
.wel-upd-bar:active { transform: scale(.97); }
.wel-upd-bar:disabled { opacity: .7; animation: none; }
@keyframes welUpdPulse { 0%,100% { box-shadow: 0 12px 26px rgba(11,61,46,.45); } 50% { box-shadow: 0 12px 30px rgba(21,194,102,.6); } }
@media (prefers-reduced-motion: reduce) { .wel-upd-bar { animation: none; } }
.wel-inner { width: 100%; max-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.wel-avatar { width: 112px; height: 112px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 14px; flex: 0 0 auto;
  background-size: cover; background-position: center;   /* foto importada */
  box-shadow: 0 0 0 4px rgba(33,194,102,.30), 0 14px 40px rgba(0,0,0,.4); }
/* emoji-gif PERFEITAMENTE centrado no círculo (entrada e saída) */
.wel-avatar .animal-anim, .wel-avatar .animal-svg, .lf-avatar .animal-anim, .lf-avatar .animal-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.wel-avatar .animal-anim .emoji-anim, .lf-avatar .animal-anim .emoji-anim { width: 86%; height: 86%; object-fit: contain; margin: 0; display: block; }
.wel-name { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.wel-sub { font-size: 13px; color: var(--muted); margin: 3px 0 18px; line-height: 1.45; }
.wel-field { display: block; width: 100%; text-align: left; margin-bottom: 11px; }
.wel-field span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; font-weight: 700; }
.wel-field input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; font-size: 16px; background: var(--card-2); color: var(--ink); font-family: var(--font); }
.wel-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.wel-msg { min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 2px 0 8px; text-align: center; }
.wel-msg.bad { color: #ff6b6b; }
/* banner de convite de conta conjunta (aparece quando a pessoa chega pelo link/QR) */
.wel-invite { font-size: 13px; color: var(--ink); line-height: 1.45; text-align: center; margin: 0 0 16px; padding: 11px 14px;
  background: linear-gradient(135deg, rgba(255,92,141,.16), rgba(124,58,237,.12)); border: 1px solid rgba(255,92,141,.42); border-radius: 14px; }
.wel-enter { width: 100%; padding: 15px; border-radius: 16px; font-weight: 800; font-size: 16px; box-shadow: 0 14px 30px rgba(11,61,46,.4); margin-top: 4px; }
.wel-link { width: 100%; background: 0; border: 0; color: var(--accent-2); font-family: var(--font); font-weight: 700; font-size: 13.5px; padding: 12px 0 2px; cursor: pointer; }
.wel-sep { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--muted); font-size: 12px; margin: 14px 0; }
.wel-sep::before, .wel-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wel-new { width: 100%; }
.wel-copy { font-size: 11px; color: var(--muted); line-height: 1.6; padding: 0 24px; margin: 18px 0 0; flex: 0 0 auto; text-align: center; }
.wel-copy a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
.wel-ver { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); opacity: .65; margin: 8px 0 0; letter-spacing: .3px; }
/* botão "Ver planos" no rodapé do login — inline como link */
.wel-plans-link { background: none; border: none; padding: 0; font: inherit; font-size: 11px; font-weight: 700; color: var(--accent-2); cursor: pointer; text-decoration: none; }
.wel-plans-link:active { opacity: .7; }
/* tela de acesso bloqueado/expirado — card centrado, ícone de status */
.wel-inner.wel-blocked { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px 24px 22px; box-shadow: 0 28px 70px rgba(0,0,0,.5); }
.wel-status-ic { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; line-height: 1; margin-bottom: 18px; flex: 0 0 auto; }
.wel-status-ic.warn { background: radial-gradient(circle at 50% 32%, rgba(245,166,35,.22), rgba(245,166,35,.05)); box-shadow: inset 0 0 0 1.5px rgba(245,166,35,.32); }
.wel-status-ic.danger { background: radial-gradient(circle at 50% 32%, rgba(255,107,107,.22), rgba(255,107,107,.05)); box-shadow: inset 0 0 0 1.5px rgba(255,107,107,.34); }
.wel-blocked .wel-sub { margin: 4px 6px 20px; }
.wel-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 16px 0 2px; text-align: center; }
.wel-note a { color: var(--accent-2); font-weight: 700; text-decoration: none; }

/* ===== Banner de trial ===== */
.trial-banner {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #0b6e91, #1a7f5a);
  color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 9px 18px; text-align: center; cursor: pointer;
  gap: 6px; letter-spacing: -.1px;
  transition: opacity .2s;
}
.trial-banner.hidden { display: none; }
.trial-banner:active { opacity: .8; }

/* ===== Modal de planos (só mensal) ===== */
.planos-card { max-width: 440px !important; padding: 24px 20px 20px !important; overflow: hidden; }
.planos-title {
  font-size: 21px; font-weight: 800; text-align: center; margin: 0 0 4px;
  background: linear-gradient(135deg, var(--ink), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: planosTitleIn .38s ease both;
}
.planos-sub { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0 0 16px; animation: planosTitleIn .38s ease .04s both; }
@keyframes planosTitleIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* tabela comparativa dos planos (cabeçalho = plano+preço; linhas = o que cada um tem) — cada coluna com a cor do plano */
.cmp-wrap { margin: 2px 0 14px; overflow-x: auto; animation: planosFadeUp .4s ease .06s both; }
.cmp { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp th, .cmp td { padding: 7px 3px; text-align: center; border-bottom: 1px solid var(--line); transition: background-color .18s ease; }
.cmp thead th { font-weight: 800; color: var(--ink); font-size: 12.5px; }
.cmp .cmp-price td { font-size: 11px; color: var(--muted); font-weight: 700; padding-top: 0; padding-bottom: 9px; border-bottom: 2px solid var(--line); }
.cmp .cmp-f { text-align: left; color: var(--ink); font-size: 11.5px; line-height: 1.25; padding-right: 6px; }
.cmp th.cmp-rec { color: var(--pc, var(--accent-2)); position: relative; }
.cmp th.cmp-rec::after { content: "★"; position: absolute; top: -1px; right: 2px; font-size: 8px; color: var(--pc, var(--accent-2)); }
.cmp .cmp-price td.cmp-rec { color: var(--pc, var(--accent-2)); font-weight: 800; }
.cmp td.cmp-rec { background: color-mix(in srgb, var(--pc, var(--accent-2)) 7%, transparent); }
.cmp td.cmp-focus, .cmp th.cmp-focus { background: color-mix(in srgb, var(--pc, var(--accent-2)) 14%, transparent); }
.cmp-y { color: var(--accent); font-weight: 800; display: inline-block; }
.cmp-x { color: var(--muted); opacity: .55; }
/* pop sutil nos checkmarks ao entrar (stagger por linha) */
.cmp tbody tr { animation: planosRowIn .32s ease both; animation-delay: calc(var(--ri, 0) * 28ms + 60ms); }
.cmp tbody tr .cmp-y { animation: cmpYPop .34s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--ri, 0) * 28ms + 160ms); }
@keyframes planosRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cmpYPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
.planos-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cmp-btn {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px; overflow: hidden;
  border: 1.5px solid var(--pc); border-radius: 14px; background: var(--card-2);
  background: color-mix(in srgb, var(--pc) 13%, var(--card)); color: var(--ink); cursor: pointer;
  font-family: var(--font); text-align: left;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease;
  animation: planosFadeUp .38s ease both; animation-delay: calc(var(--bi, 0) * 60ms + 100ms);
}
@keyframes planosFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cmp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px var(--pc); background: color-mix(in srgb, var(--pc) 20%, var(--card)); }
.cmp-btn:active { transform: translateY(0) scale(.97); }
.cmp-btn.rec {
  margin-top: 16px; padding: 25px 15px 16px;   /* respiro p/ o selo "Mais escolhido" caber DENTRO do card + folga */
  background: color-mix(in srgb, var(--pc) 22%, var(--card));
  box-shadow: inset 0 0 0 2px var(--pc), 0 12px 30px -12px var(--pc);
  animation: planosFadeUp .38s ease both, cmpRecGlow 2.4s ease-in-out .5s infinite;
}
.cmp-btn.rec::before {   /* brilho diagonal que varre o card do Pro (só visual, fica atrás do texto) */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.22) 50%, transparent 68%);
  transform: translateX(-120%); animation: cmpShine 3.4s ease-in-out 1.1s infinite;
}
@keyframes cmpShine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.cmp-btn.rec .cmp-btn-name, .cmp-btn.rec .cmp-btn-preco, .cmp-btn.rec .cmp-btn-cta { position: relative; z-index: 1; }
.cmp-btn.rec .cmp-btn-name { font-size: 16px; }
.cmp-btn.rec .cmp-btn-cta { box-shadow: 0 5px 16px -5px var(--pc); }
.cmp-btn.rec:hover { background: color-mix(in srgb, var(--pc) 28%, var(--card)); box-shadow: inset 0 0 0 2.5px var(--pc), 0 16px 34px -10px var(--pc); }
@keyframes cmpRecGlow {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--pc), 0 12px 30px -12px var(--pc); }
  50%      { box-shadow: inset 0 0 0 3px var(--pc), 0 16px 40px -8px var(--pc); }
}
.cmp-btn-name { font-weight: 800; font-size: 15px; }
.cmp-btn-preco { flex: 1; color: var(--muted); font-size: 12.5px; }
.cmp-btn-cta { position: relative; font-weight: 800; color: #fff; background: var(--pc); padding: 8px 13px; border-radius: 10px; font-size: 13px; white-space: nowrap; transition: transform .15s ease; }
.cmp-btn:hover .cmp-btn-cta { transform: translateX(2px); }
.cmp-btn-badge {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc));
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 3.5px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px -3px var(--pc), inset 0 1px 0 rgba(255,255,255,.4);
  animation: cmpBadgePulse 2.4s ease-in-out .5s infinite;
}
@keyframes cmpBadgePulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.07); } }
/* emoji GIF do plano no cabeçalho da tabela (centralizado sobre o nome) + presente no banner de convite */
.cmp-th-emoji { display: block; width: 15px; height: 15px; margin: 0 auto 2px; object-fit: contain; }
.cmp-th-name { display: block; }
.planos-ref .pr-emoji-img { width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain; align-self: center; margin: 0 auto 2px; }
/* ripple de toque nos botões de plano (puramente visual) */
.plan-ripple {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: color-mix(in srgb, var(--pc) 55%, #fff); opacity: .55; pointer-events: none;
  animation: planRippleOut .5s ease-out forwards;
}
@keyframes planRippleOut { to { width: 260px; height: 260px; margin: -130px 0 0 -130px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .planos-title, .planos-sub, .cmp-wrap, .cmp tbody tr, .cmp tbody tr .cmp-y, .cmp-btn, .cmp-btn.rec, .cmp-btn.rec::before, .cmp-btn-badge, .plan-ripple {
    animation: none !important; transition: none !important;
  }
  .cmp-btn.rec::before { display: none; }
  .cmp-btn:hover, .cmp-btn:active { transform: none; }
}
.plan-card { position: relative; border: 2px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; transition: transform .25s ease, box-shadow .25s ease; animation: planIn .32s ease both; }
/* entrada suave dos cards ao trocar Mensal/Anual */
@keyframes planIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes planInRec { from { opacity: 0; } to { opacity: 1; } }
/* melhor escolha (muda entre Mensal/Anual) — borda viva, glow pulsante e leve destaque */
.plan-rec { transform: scale(1.025); z-index: 1; animation: planGlow 1.9s ease-in-out infinite, planInRec .32s ease both; }
@keyframes planGlow {
  0%, 100% { box-shadow: 0 0 0 1px var(--glow), 0 0 12px -4px var(--glow); }
  50%      { box-shadow: 0 0 0 2px var(--glow), 0 0 26px 0 var(--glow); }
}
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; padding: 4px 13px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: planBadge 1.9s ease-in-out infinite; }
@keyframes planBadge { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
.plan-econ { font-size: 12px; font-weight: 700; margin: -4px 0 11px; }
@media (prefers-reduced-motion: reduce) { .plan-card, .plan-rec, .plan-badge { animation: none; } }
.plan-name { font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.plan-desc { font-size: 13px; color: var(--muted); margin: 0 0 8px; line-height: 1.45; }
.plan-price { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.plan-price-old { color: var(--muted); text-decoration: line-through; font-weight: 700; font-size: 13px; margin-right: 4px; }
.plan-disc-badge { display: inline-block; margin: -6px 0 11px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #06251a; background: var(--accent); }
.plan-btn { width: 100%; border-radius: 13px !important; font-size: 15px !important; }
.planos-safe { font-size: 12px; color: var(--ink); text-align: center; margin: 0 0 8px; line-height: 1.5; background: rgba(21,194,102,.10); border: 1px solid rgba(21,194,102,.28); border-radius: 12px; padding: 9px 12px; }
.planos-note { font-size: 11px; color: var(--muted); text-align: center; margin: 0; line-height: 1.6; }
.planos-note a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
/* popup informativo central (ex.: verifique seu email) */
/* popup de confirmação de conta (signup) — contagem regressiva 3:00 */
.sc-card { padding: 26px 22px 18px !important; }
.sc-ic { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.sc-ic-img { width: 52px; height: 52px; }
.sc-timer { display: inline-block; font-size: 15px; font-weight: 800; color: var(--accent); background: rgba(21,194,102,.14); border: 1px solid rgba(21,194,102,.34); border-radius: 999px; padding: 7px 16px; letter-spacing: .3px; }
.sc-timer.sc-expired { color: #ff8a8a; background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.34); font-weight: 700; }
.sc-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 12px 4px 4px; text-align: center; }
/* botões estáticos (sem barra sticky + sem o gradiente que comia a nota acima) */
.modal-card.sc-card { padding-bottom: 22px !important; }
.modal-card.sc-card > .modal-actions { position: static; margin: 14px 0 0; padding: 0; background: transparent; }
.modal-card.sc-card > .modal-actions .btn { width: 100%; }
.info-card { max-width: 340px !important; text-align: center; padding: 28px 22px 20px !important; }
.info-ic { font-size: 46px; line-height: 1; margin-bottom: 12px; }
.info-title { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--ink); letter-spacing: -.3px; }
.info-msg { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.info-msg b { color: var(--ink); }
.info-ok { width: 100%; }
/* botão "ver senha" (👁) — vale pra qualquer input de senha */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { width: 100%; padding-right: 44px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; margin: 0; color: var(--muted); cursor: pointer; border-radius: 9px; }
.pw-eye:active { transform: translateY(-50%) scale(.9); }
.pw-eye svg { display: block; }

/* ===== Recuperação por pergunta secreta ===== */
.lock-forgot { display: block; width: 100%; margin: 12px auto 0; background: none; border: 0; color: rgba(255,255,255,.82); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.lock-forgot:active { opacity: .6; }
.lock-back { display: block; width: max-content; max-width: 100%; margin: 16px auto 0; padding: 10px 20px; border-radius: 13px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: transform .12s ease, background .2s ease; }
.lock-back:active { transform: scale(.96); background: rgba(255,255,255,.2); }
.rec-q { text-align: center; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.4; margin: 2px 4px 16px; }
.rec-opts { display: flex; flex-direction: column; gap: 9px; }
.rec-opts .rec-opt { width: 100%; text-align: center; padding: 13px 12px; border-radius: 13px; font-weight: 700; }
.rec-opts.shake { animation: recShake .4s ease; }
@keyframes recShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }
.rec-msg { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 22px; margin-top: 10px; font-size: 13px; font-weight: 700; color: #ff6b6b; text-align: center; }
.rec-msg .rec-msg-emoji, .rec-msg .emoji-anim { width: 22px; height: 22px; }
.rec-count { font-size: 40px; font-weight: 800; letter-spacing: -.5px; text-align: center; color: var(--ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.rec-onehint { font-size: 12px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; margin: -4px 0 4px; line-height: 1.45; }
.rec-onehint b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .rec-opts.shake { animation: none; } }
.app-header .header-actions { gap: 5px; }
.menu-btn { font-size: 18px; flex: 0 0 auto; }
.menu-drawer { position: fixed; inset: 0; z-index: 115; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); display: flex; align-items: center; }
.menu-drawer.hidden { display: none; }
/* painel NÃO ocupa a tela toda: flutua na esquerda com folga em cima/embaixo e cantos direitos arredondados */
.menu-panel { width: 86%; max-width: 340px; height: auto;
  max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 32px);
  margin: calc(var(--safe-top) + 16px) 0 calc(var(--safe-bottom) + 16px);
  background: var(--card); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 20px 20px 0; box-shadow: 8px 0 40px rgba(0,0,0,.4);
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column; animation: drawerIn .26s cubic-bezier(.2,.9,.2,1.05) both; }
/* corpo rolável: header fica ESTÁTICO fora daqui (sempre no topo); só isto rola. (sticky-em-flex quebra no iOS) */
.menu-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 9px; padding: 0 15px 16px; scrollbar-width: none; }
/* TRAVA lateral: overflow-y:auto sozinho promove overflow-x pra auto → o menu deslizava na horizontal (cards largos + animação translateX
   de entrada geravam overflow lateral). overflow-x:hidden + touch-action:pan-y prendem o eixo X → só rola na vertical. */
.menu-scroll::-webkit-scrollbar { display: none; }
/* fade no rodapé: dica de que há mais itens abaixo, sem empurrar nada */
.menu-scroll::after { content: ""; position: sticky; bottom: -16px; left: 0; right: 0;
  flex: 0 0 auto; height: 24px; margin-top: -24px; pointer-events: none;
  background: linear-gradient(to top, var(--card), transparent); }
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.menu-head { flex: 0 0 auto; background: var(--card); display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 16px 17px 12px; }   /* ESTÁTICO no topo do painel (fora do .menu-scroll) → nunca some ao rolar; sem depender de sticky (que quebra no iOS em flex) */
.menu-head span { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
.menu-head-actions { display: flex; align-items: center; gap: 8px; }
/* pílula do plano no header (acima da foto do perfil) */
.avatar-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.hdr-plan { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; line-height: 1; padding: 3px 7px; border-radius: 999px;
  white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.hdr-plan.hidden { display: none; }
.hdr-plan.plan-teste    { color: #2a1c02; background: #f5a623; }
.hdr-plan.plan-plus     { color: #04231a; background: #15c266; }
.hdr-plan.plan-pro      { color: #06283a; background: #46b4ea; }
.hdr-plan.plan-ultimate { color: #1c0f3a; background: #b59bf7; }
/* card vermelho do plano no corpo do menu */
.menu-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  margin: 6px 0 10px; padding: 11px 14px; border-radius: 14px; background: rgba(229,72,77,.12);
  border: 1px solid rgba(229,72,77,.42); color: #ff8a8a; font-family: var(--font); cursor: pointer; }
.menu-plan-card.hidden { display: none; }
.menu-plan-card:active { transform: scale(.98); }
.menu-plan-card .mpc-l { font-size: 13.5px; min-width: 0; }
.menu-plan-card .mpc-l b { font-weight: 800; }
.menu-plan-card .mpc-go { font-size: 12.5px; font-weight: 800; opacity: .9; white-space: nowrap; }
.menu-exit { display: inline-flex; align-items: center; gap: 5px; background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.32); color: #ff6b6b; font-family: var(--font); font-weight: 800; font-size: 13px; padding: 7px 11px; border-radius: 10px; cursor: pointer; }
.menu-exit:active { transform: scale(.95); }
/* botão "Atualizar" (puxa a licença da nuvem na hora) — verde do app pra diferenciar do Sair (vermelho) */
.menu-refresh { background: rgba(21,194,102,.16); border-color: rgba(21,194,102,.36); color: #15c266; }
.menu-refresh:disabled { opacity: .6; cursor: default; }
/* itens entram em sequência (cascata) ao abrir o menu + o ícone dá um "pop" */
.menu-drawer:not(.hidden) .menu-item { animation: menuItemIn .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.06s + var(--mi, 0) * .055s); }
@keyframes menuItemIn { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.menu-drawer:not(.hidden) .menu-item .mi-ic { animation: miIcPop .45s cubic-bezier(.34,1.55,.5,1) both; animation-delay: calc(.16s + var(--mi, 0) * .055s); }
@keyframes miIcPop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ .menu-panel, .menu-drawer:not(.hidden) .menu-item, .menu-drawer:not(.hidden) .menu-item .mi-ic { animation: none; } }
.menu-x { background: var(--card-2); border: 1px solid var(--line); color: var(--ink); width: 36px; height: 36px;
  border-radius: 10px; font-size: 15px; cursor: pointer; font-family: var(--font); }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; cursor: pointer; font-family: var(--font);
  color: var(--ink); transition: transform .12s ease, border-color .15s ease, background .15s ease; }
.menu-item:active { transform: scale(.97); background: var(--card); }
.menu-item:hover { border-color: var(--accent); }
.menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.menu-item .mi-ic { font-size: 19px; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }   /* caixa uniforme → ícones alinhados na coluna */
.menu-item.danger .mi-ic { background: rgba(229,103,95,.12); box-shadow: inset 0 0 0 1px rgba(229,103,95,.3); }
.menu-item > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.menu-item b { font-size: 14.5px; font-weight: 800; }
.menu-item i { font-size: 12px; color: var(--muted); font-style: normal; margin-top: 1px; }
.menu-item.danger b { color: #e5675f; }
.menu-foot { margin-top: auto; padding: 12px 6px 2px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.menu-foot-email { color: var(--accent-2); font-weight: 700; word-break: break-all; }

/* ===== Acesso (PIN real / modo teste) ===== */
.lock-hint { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; line-height: 1.4; }
.acc-card { max-width: 400px; }
.acc-card .acc-status { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 6px 0 12px; text-align: left; }
.acc-card .btn { width: 100%; margin-top: 8px; }
.acc-card .field-row { margin-bottom: 4px; }
/* selo "MODO TESTE" — pílula fixa acima da tabbar, só no perfil de teste */
.test-badge { display: none; }
body.test-mode .test-badge { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(86px + var(--safe-bottom));
  z-index: 72; align-items: center; justify-content: space-between; gap: 10px; background: #e0a020; color: #3a2a02;
  border-radius: 14px; padding: 9px 14px; font-weight: 800; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: fadeInUp .25s ease both; }
body.test-mode .test-badge button { background: #3a2a02; color: #ffe7a6; border: 0; font-weight: 800; font-family: var(--font);
  padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 12.5px; }
body.test-mode .test-badge button:active { transform: scale(.96); }

.month-bar { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding: 2px 6px; scrollbar-width: none;
  scroll-behavior: smooth; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  /* esfuma os chips nas duas pontas (em vez de cortar seco) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }
.month-bar::-webkit-scrollbar { display: none; }
.month-chip {
  flex: 0 0 auto; background: rgba(255,255,255,.12); color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.08);
  padding: 11px 15px; border-radius: 20px; font-size: 14px; font-weight: 700; letter-spacing: .2px; scroll-snap-align: center; touch-action: manipulation;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease, box-shadow .25s ease;
}
.month-chip:active { transform: scale(.9); }
.month-chip.active { background: #fff; color: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,.25); transform: scale(1.06); }
.month-chip.ano { background: rgba(255,255,255,.22); }

/* ===== MAIN ===== */
main { padding: 18px 18px 16px; max-width: 640px; width: 100%; margin: 0 auto; flex: 1 0 auto; align-self: center; }
/* quando o botão + está visível, reserva espaço embaixo pra ele NÃO cobrir o último item
   (rolando, o último valor sempre fica acima do +). No Resumo (sem +) não sobra espaço vazio. */
body:has(#fab:not(.hidden)) main { padding-bottom: 178px; }   /* o + flutua até ~166px do fundo: respiro p/ não cobrir o valor do último item */
.header-row, .month-wrap { max-width: 640px; margin-left: auto; margin-right: auto; }
/* faixa de meses + seletor de ano lado a lado */
.month-wrap { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.month-wrap .month-bar { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.year-select {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center;
  color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 20px;
  font-family: var(--font); font-size: 14px; font-weight: 800; letter-spacing: .2px;
  padding: 7px 26px 7px 14px; cursor: pointer; transition: transform .12s ease, background .2s ease;
}
.year-select:active { transform: scale(.94); }
.year-select option { color: #11201a; }

/* Banner de versão */
.ver-banner { max-width: 640px; margin: 12px auto -4px; background: linear-gradient(135deg, rgba(21,194,102,.16), rgba(21,194,102,.06));
  border: 1px solid rgba(21,194,102,.4); color: var(--ink); border-radius: 16px; padding: 12px 14px; font-size: 13px; font-weight: 600; }
.ver-banner b { font-weight: 800; }
.ver-x { float: right; opacity: .55; padding-left: 8px; }

/* ===== Ícone "Novidades" no header (substitui o banner grande) ===== */
.wn-btn { position: relative; }
/* pontinho de destaque — aparece apenas quando o ícone está visível */
.wn-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
  background: var(--accent); border-radius: 50%;
  border: 1.5px solid var(--card); /* anel para destacar sobre qualquer fundo */
  animation: wnDotPulse 1.8s ease-in-out infinite; }
@keyframes wnDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(21,194,102,.6); }
  50%      { box-shadow: 0 0 0 5px rgba(21,194,102,0); }
}
/* a FORMA do botão ✨ NÃO balança/pulsa — a atenção fica no emoji animado (brilho.webp) dentro dele */
.wn-btn:not(.hidden) { border-radius: 50%; }
@keyframes wnIconBob {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes wnRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(21,194,102,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(21,194,102,0); }
}
@media (prefers-reduced-motion: reduce) {
  .wn-dot { animation: none; }
  .wn-btn:not(.hidden) { animation: none; }
}

/* ===== Modal de novidades / changelog ===== */
.wn-card { position: relative; text-align: left; max-width: 400px; }
.wn-close { position: absolute; top: 14px; right: 14px; background: var(--card-2); border: 1px solid var(--line);
  color: var(--muted); border-radius: 50%; width: 32px; height: 32px; font-size: 14px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  font-family: var(--font); cursor: pointer; transition: background .15s ease, transform .12s ease; }
.wn-close:active { transform: scale(.9); }
.wn-header { text-align: center; margin-bottom: 16px; padding-top: 4px; }
/* emoji animado (Noto brilho.webp) no lugar do ✨ estático — ele já anima sozinho */
.wn-spark { width: 64px; height: 64px; display: block; margin: 0 auto 4px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.wn-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 4px; }
.wn-version { font-size: 12.5px; color: var(--accent); font-weight: 700; margin: 0; letter-spacing: .3px; }
.wn-body { max-height: 46dvh; overflow-y: auto; margin-bottom: 4px; }
/* bloco de cada versão no changelog */
.wn-entry { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wn-entry:last-child { border-bottom: 0; }
.wn-entry-ver { font-size: 11.5px; font-weight: 800; color: var(--accent); text-transform: uppercase;
  letter-spacing: .6px; margin: 0 0 6px; }
.wn-entry ul { margin: 0; padding-left: 18px; list-style: none; }
.wn-entry ul li { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.55;
  margin-bottom: 4px; position: relative; }
.wn-entry ul li::before { content: "✓"; position: absolute; left: -17px; color: var(--accent); font-weight: 800; font-size: 12px; top: 1px; }

/* ===== Guia "Adicionar à tela de início" ===== */
.ig-card { position: relative; text-align: center; max-width: 400px; }
.ig-head { margin-bottom: 14px; }
.ig-emoji { font-size: 46px; line-height: 1; margin-bottom: 6px; animation: igBob 2.4s ease-in-out infinite; }
.ig-emoji .ig-emoji-img { width: 56px; height: 56px; display: inline-block; vertical-align: middle; }
@keyframes igBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ig-card h2 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.ig-tabs { display: flex; gap: 8px; background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 14px; }
.ig-tab { flex: 1; border: 0; background: transparent; color: var(--muted); font-family: var(--font); font-weight: 800; font-size: 14px;
  padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.ig-tab.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(21,194,102,.35); }
.ig-body { text-align: left; }
.ig-browser { font-size: 13px; font-weight: 800; color: var(--accent); margin: 0 0 10px; }
.ig-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ig-steps li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ig-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; margin-top: 1px; }
.ig-steps li b { font-weight: 800; }
.ig-note { font-size: 12px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; margin: 12px 0 0; line-height: 1.45; }
.ig-native { margin-top: 14px; width: 100%; }
/* conteúdo curto → rodapé do guia no fluxo normal (sem sticky pra não cobrir o último passo) */
.modal-card.ig-card > .modal-actions { position: static; margin: 18px 0 0; padding: 0; }
.modal-card.ig-card > .modal-actions .btn { width: 100%; }
/* toast pequeno "Atualizado para vX" — substitui o ver-banner grande */
.ver-toast { position: fixed; bottom: calc(90px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(21,194,102,.18), rgba(21,194,102,.08));
  border: 1px solid rgba(21,194,102,.45); color: var(--ink);
  padding: 10px 18px; border-radius: 20px; font-size: 13px; font-weight: 700;
  z-index: 300; white-space: nowrap; animation: toastIn .3s cubic-bezier(.2,.8,.2,1) both;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); }
/* manter os keyframes de ubPulse/ubSpark para retrocompatibilidade (caso algo ainda referencie) */
@keyframes ubPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
@keyframes ubSpark { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } }

/* ===== Tela de bloqueio (PIN) ===== */
.lock { position: fixed; inset: 0; z-index: 1000;
  /* rodapé do gradiente volta a #0b3d2e (= cor de fundo / safe-area) → sem faixa no fim da tela */
  background: var(--green) linear-gradient(160deg, var(--green) 0%, var(--green-2) 50%, var(--green) 100%);   /* segue o tema de cor */
  display: flex; align-items: center; justify-content: center; padding: 24px;
  /* camada de GPU própria → compõe acima da tabbar (que tem translateZ(0)); sem faixa no rodapé */
  transform: translateZ(0); -webkit-transform: translateZ(0); }
/* enquanto a tela de código está aberta, esconde tabbar e + (tela cheia, sem faixa no fim) */
body.lock-on .tabbar, body.lock-on #fab { visibility: hidden; }
/* "Esqueci minha senha": o #recModal é filho do body, e a regra body.lock-on > *:not(#lockScreen)…
   escondia TODOS os filhos do body menos o lock → a janela de recuperação (acertar a pergunta) abria
   INVISÍVEL atrás do lock; só aparecia ao "Voltar ao login" (que remove o lock-on). Mantém o recModal
   VISÍVEL e ACIMA do lock (z 1000), pra abrir na mesma tela do clique. #bugfix-recovery */
body.lock-on > #recModal { visibility: visible !important; z-index: 1300; }

/* ===== Desbloqueio: pré-carga (anel de progresso) → estalo + flash → portas abrem ===== */
.unlock-reveal { position: fixed; inset: 0; z-index: 1500; pointer-events: none; overflow: hidden;
  transform: translateZ(0); -webkit-transform: translateZ(0); }
.unlock-reveal .ur-half { position: absolute; top: 0; bottom: 0; width: 50.6%;
  background: radial-gradient(120% 90% at 50% 38%, var(--green-2) 0%, var(--green) 45%, #06251a 100%);   /* segue o tema de cor (borda escura fixa) */
  transition: transform .76s cubic-bezier(.66,0,.2,1); }
.unlock-reveal .ur-left { left: 0; } .unlock-reveal .ur-right { right: 0; }
.unlock-reveal.go .ur-left { transform: translateX(-100%); }
.unlock-reveal.go .ur-right { transform: translateX(100%); }
/* flash de luz que estoura ao destravar */
.unlock-reveal .ur-burst { position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; z-index: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(21,194,102,.55), rgba(21,194,102,0) 62%); opacity: 0; }
.unlock-reveal.unlocked .ur-burst { animation: urBurst .7s ease-out forwards; }
@keyframes urBurst { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
/* centro: anel de progresso + cadeado + nome + texto */
.unlock-reveal .ur-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity .34s ease, transform .4s ease; }
.unlock-reveal .ur-ring { position: relative; width: 92px; height: 92px; }
.unlock-reveal .ur-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.unlock-reveal .ur-ring-bg { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 5; }
.unlock-reveal .ur-ring-fg { fill: none; stroke: var(--accent-2); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 214; stroke-dashoffset: 214; filter: drop-shadow(0 0 6px rgba(11,209,122,.6)); }
.unlock-reveal.loading .ur-ring-fg { animation: urFill 1.05s cubic-bezier(.4,0,.2,1) forwards; }
.unlock-reveal .ur-lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 42px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); animation: urBreathe 1.4s ease-in-out infinite; }
.unlock-reveal .ur-name { color: #fff; font-weight: 800; font-size: 22px; letter-spacing: .5px; text-shadow: 0 2px 18px rgba(75,210,150,.4); }
.unlock-reveal .ur-txt { color: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 700; letter-spacing: .4px; }
/* ao destravar: cadeado dá um "estalo", anel/texto somem */
.unlock-reveal.unlocked .ur-lock { animation: urUnlock .5s cubic-bezier(.34,1.7,.5,1) forwards; }
.unlock-reveal.unlocked .ur-ring-fg { opacity: 0; transition: opacity .25s ease; }
.unlock-reveal.unlocked .ur-ring-bg { opacity: 0; transition: opacity .25s ease; }
.unlock-reveal.unlocked .ur-txt { opacity: 0; transition: opacity .2s ease; }
/* o centro (anel/cadeado/nome) some POR COMPLETO antes de a cortina abrir — sem vazar */
.unlock-reveal.cleared .ur-center { opacity: 0; transform: translate(-50%, -60%) scale(.95); }
.unlock-reveal.cleared .ur-burst { opacity: 0; transition: opacity .25s ease; }
.unlock-reveal.go .ur-center { opacity: 0; transform: translate(-50%, -64%) scale(.92); }
.unlock-reveal.nofx .ur-half { transition: none; }
@keyframes urFill { to { stroke-dashoffset: 0; } }
@keyframes urBreathe { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.08); } }
@keyframes urUnlock { 0% { transform: translate(-50%,-50%) scale(1) rotate(0); } 40% { transform: translate(-50%,-52%) scale(1.35) rotate(-9deg); } 100% { transform: translate(-50%,-50%) scale(1.12) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .unlock-reveal .ur-lock, .unlock-reveal .ur-ring-fg { animation: none; } }

/* ===== Aviso "ative a tela cheia" (install antigo no iOS) ===== */
.fs-hint { position: fixed; inset: 0; z-index: 1600; background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeInUp .25s ease both; }
.fs-hint-card { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px;
  width: 100%; max-width: 384px; padding: 22px 20px calc(20px + var(--safe-bottom)); box-shadow: var(--shadow-lg);
  text-align: left; max-height: 88vh; overflow-y: auto; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ }
.fs-hint-emoji { font-size: 40px; text-align: center; }
.fs-hint-card h2 { margin: 6px 0 12px; font-size: 19px; font-weight: 800; text-align: center; }
.fs-hint-card p { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; }
.fs-hint-card ol { margin: 0 0 12px; padding-left: 20px; }
.fs-hint-card ol li { font-size: 14px; line-height: 1.6; margin-bottom: 7px; color: var(--ink); }
.fs-hint-card b { font-weight: 800; }
.fs-hint-safe { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px !important; }
.fs-hint-card .btn { width: 100%; margin-top: 4px; }
.lock-box { background: var(--card); color: var(--ink); border-radius: 22px; padding: 30px 22px; width: 100%; max-width: 340px;
  text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.4); animation: popIn .3s ease both; }
.lock-emoji { font-size: 46px; }
.lock-box h2 { margin: 10px 0 18px; font-size: 19px; font-weight: 800; }
.lock-input { width: 100%; padding: 14px; font-size: 22px; text-align: center; letter-spacing: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); color: var(--ink); margin-bottom: 12px; }
.lock-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.lock-msg { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 12px; font-weight: 700; }

/* Pull to refresh */
.ptr { height: 0; opacity: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--green); font-size: 13px; font-weight: 800; transition: height .15s ease, opacity .15s ease; }

/* ===== KPI ===== */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.kpi .label { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.kpi .value { font-size: 21px; font-weight: 800; margin-top: 5px; letter-spacing: -.4px; }
.kpi.big { grid-column: span 2; }
.kpi.big .value { font-size: 30px; }
.pos { color: var(--accent); } .neg { color: var(--red); }

/* ===== Cards / Section ===== */
.section-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.section-card h3 { margin: 0; padding: 15px 16px 9px; font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; }
.chart-wrap { padding: 8px 12px 18px; }

/* ===== Saúde financeira (gauge) ===== */
.health-body { display: flex; align-items: center; gap: 6px; padding: 2px 16px 18px; }
.gauge { flex: 0 0 auto; }
.gauge path { transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1), stroke .35s ease; }
.gauge-num { fill: var(--ink); font-size: 36px; font-weight: 800; }
.gauge-of { fill: var(--muted); font-size: 11px; font-weight: 700; }
.health-meta { flex: 1; text-align: center; }
.health-emoji { font-size: 30px; line-height: 1; }
.health-t { font-size: 19px; font-weight: 800; margin-top: 4px; letter-spacing: -.2px; }
.health-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.health-sub b { color: var(--ink); font-weight: 800; }

/* ===== Insights ===== */
.insights { padding: 6px 16px 14px; }
.insight { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.insight:last-child { border-bottom: 0; }
.insight .ic { font-size: 17px; flex: 0 0 auto; margin-top: 1px; }
.insight b { font-weight: 800; }
.insight.good b { color: var(--accent); }
.insight.bad b { color: var(--red); }
.insight.warn b { color: var(--amber); }
.insight.info b { color: var(--blue); }

/* ===== "Leitura do mês" (narrativa local, visual de destaque) ===== */
.ai-card { border: 1px solid rgba(21,194,102,.34);
  background: linear-gradient(180deg, rgba(21,194,102,.10), transparent 58%), var(--card); }
.ai-badge { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent-2); padding: 13px 16px 0; }
.ai-line { margin: 10px 16px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.ai-line:last-child { margin-bottom: 16px; }   /* mês sem stat: texto não cola na borda de baixo do card */
.ai-stat { margin: 11px 16px 15px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--muted); font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.ai-ic { flex: 0 0 auto; font-size: 18px; line-height: 1.5; }   /* alinha o emoji com a 1ª linha do texto */
.ai-line b { color: var(--ink); font-weight: 800; }
.ai-stat b { font-weight: 800; }

/* ===== LIST ===== */
.list { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.list-row:last-child { border-bottom: 0; }
.list-row:active { background: var(--card-2); }
.list-row .desc { flex: 1; min-width: 0; }
.list-row .desc .name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .desc .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.list-row .amount { font-weight: 800; font-size: 15px; white-space: nowrap; }
.badge { font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 11px; text-transform: uppercase; letter-spacing: .3px; }
.badge.pago, .badge.recebido { background: rgba(21,194,102,.16); color: #0f9a4c; }
.badge.programado { background: rgba(245,166,35,.18); color: #b9760a; }
.badge.vazio { background: var(--card-2); color: var(--muted); }
/* barra de ordenação das listas (Data/Valor/A-Z/Necessário) */
.sort-bar { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; }
.sort-lbl { font-size: 12px; color: var(--muted); font-weight: 700; }
.sort-sel { flex: 1; max-width: 200px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; font-size: 13.5px;
  font-weight: 700; background: var(--card-2); color: var(--ink); font-family: var(--font); cursor: pointer; }
.sort-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ===== Seleção múltipla + apagar em massa ===== */
/* checkbox azul (o "bloquinho" de selecionar) */
.sel-box { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #3b82f6;
  background: transparent; position: relative; transition: background .15s ease, transform .12s ease; }
.sel-box.on { background: #3b82f6; }
.sel-box.on::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 900; }
.list-row.sel-mode { cursor: pointer; }
.list-row.sel-mode:active .sel-box { transform: scale(.88); }
.list-row.sel-on { background: rgba(59,130,246,.12); }
/* barra "Selecionar todos" + dropdown de como selecionar (abaixo do total) */
.sel-bar { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; flex-wrap: wrap;
  animation: fadeInUp .2s ease both; }
.sel-all { display: inline-flex; align-items: center; gap: 8px; background: 0; border: 0; padding: 0;
  font-family: var(--font); font-size: 13.5px; font-weight: 800; color: var(--ink); cursor: pointer; }
.sel-all .sel-box.master { width: 20px; height: 20px; }
.sel-how { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: var(--card-2); color: var(--ink); font-family: var(--font); cursor: pointer; }
.sel-how:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
.sel-count { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-left: auto; }
.sel-cancel { background: var(--card-2); border: 1px solid var(--line); color: var(--ink); font-weight: 800;
  font-size: 12.5px; padding: 7px 13px; border-radius: 10px; cursor: pointer; font-family: var(--font); }
.sel-cancel:active { transform: scale(.96); }
/* (a barra flutuante de apagar foi removida — cobria os últimos itens. Agora o FAB vira 🗑️.) */
/* modal de escopo (este mês / em diante / escolher) */
.bulk-card { text-align: center; }
.bulk-card .bm-opts { display: flex; flex-direction: column; gap: 10px; }
.bm-opt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px;
  cursor: pointer; font-family: var(--font); transition: border-color .15s ease, transform .1s ease; }
.bm-opt:active { transform: scale(.98); }
.bm-opt b { font-size: 15px; color: var(--ink); }
.bm-opt span { font-size: 12px; color: var(--muted); }
.bm-pick { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.bm-pick.hidden { display: none; }
.bm-pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.mg-cell { display: flex; align-items: center; gap: 5px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 6px; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.mg-cell input { accent-color: #3b82f6; }
.bm-pick-go { width: 100%; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border: 0;
  font-weight: 800; font-size: 14px; padding: 12px; border-radius: 12px; cursor: pointer; font-family: var(--font); }
.bm-cancel { margin-top: 14px; background: 0; border: 0; color: var(--muted); font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: var(--font); }
/* Cabeçalho da lista = card "hero" com gradiente, shimmer e animação de entrada */
.list-header { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 15px 18px; border-radius: 18px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  box-shadow: 0 10px 26px rgba(11,61,46,.34); animation: headerIn .5s cubic-bezier(.2,.9,.2,1.12) both; }
.list-header::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
  transform: translateX(-160%); animation: headerShimmer 4s ease-in-out 1s infinite; }
.list-header .total { font-weight: 800; font-size: 21px; letter-spacing: -.4px; color: #fff; position: relative; z-index: 1; }
.list-header .lbl { font-size: 12.5px; color: rgba(255,255,255,.82); font-weight: 600; position: relative; z-index: 1; }
@keyframes headerIn { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes headerShimmer { 0% { transform: translateX(-160%); } 55%, 100% { transform: translateX(160%); } }
.empty { text-align: center; color: var(--muted); padding: 44px 20px; font-size: 14px; }
.empty-rich { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; }
.empty-rich .empty-emoji { width: 58px; height: 58px; }
.empty-rich .empty-txt { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.empty-rich .empty-txt span { font-size: 12.5px; opacity: .8; }
/* dica "centavos automáticos" abaixo dos campos de valor */
.cat-line { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.cat-line:last-child { border-bottom: 0; }
.cat-line .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.cat-line .cname { flex: 1; font-weight: 600; }
.cat-line .cval { font-weight: 800; }
.cat-line i { font-style: normal; color: var(--muted); font-weight: 600; }

/* ===== FAB ===== */
.fab { position: fixed; right: 18px; bottom: calc(108px + var(--safe-bottom)); width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-size: 30px; line-height: 1;
  box-shadow: 0 10px 24px rgba(21,194,102,.5); z-index: 40; transition: transform .14s ease, box-shadow .2s ease, background .22s ease; }
.fab:hover { box-shadow: 0 12px 30px rgba(21,194,102,.6); }
.fab:active { transform: scale(.9); }
.fab.hidden { display: none; }
/* Seleção: o + vira lixeira vermelha NO MESMO LUGAR. Ao apagar/cancelar volta a ser +. */
.fab.trash { background: linear-gradient(135deg, #ff6259, #e5403a); box-shadow: 0 12px 30px rgba(229,64,58,.55); font-size: 26px;
  animation: fabTrashPop .3s cubic-bezier(.34,1.5,.5,1); }
.fab.trash:hover { box-shadow: 0 14px 34px rgba(229,64,58,.62); }
.fab.trash-off { filter: grayscale(.35) brightness(.82); opacity: .65; pointer-events: none; box-shadow: 0 8px 18px rgba(229,64,58,.3); }
@keyframes fabTrashPop { 0% { transform: scale(.55) rotate(-14deg); } 60% { transform: scale(1.14) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .fab.trash { animation: none; } }

/* ===== Balão PIX / Débito (escolha de método no Dia a Dia) ===== */
.method-pop { position: fixed; right: 18px; bottom: calc(158px + var(--safe-bottom)); z-index: 60; width: 234px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 12px;
  transform: translateY(14px) scale(.9); opacity: 0; transform-origin: bottom right;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s ease; }
.method-pop.hidden { display: none; }
.method-pop.show { transform: translateY(0) scale(1); opacity: 1; }
.method-pop::after { content: ""; position: absolute; right: 28px; bottom: -8px; width: 16px; height: 16px; background: var(--card);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.mp-title { font-size: 12px; font-weight: 800; color: var(--muted); margin: 2px 4px 10px; }
.mp-opt { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--line); background: var(--card-2);
  border-radius: 13px; padding: 11px 13px; margin-bottom: 8px; font-family: var(--font); text-align: left; color: var(--ink);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease; }
.mp-opt:last-child { margin-bottom: 0; }
.mp-opt:active { transform: scale(.97); }
.mp-opt.pix:active, .mp-opt.pix:hover { border-color: #19c6b3; box-shadow: 0 0 0 3px rgba(25,198,179,.18); }
.mp-opt.debito:active, .mp-opt.debito:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.mp-ic { font-size: 21px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--card); flex: 0 0 auto; }
.mp-txt { display: flex; flex-direction: column; line-height: 1.2; }
.mp-txt b { font-size: 15px; font-weight: 800; }
.mp-txt i { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }

/* tag de método dentro do form + pílula na lista */
.method-tag { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px;
  padding: 10px 14px; border-radius: 13px; font-weight: 800; font-size: 15px; border: 1px solid var(--line); }
.method-tag.pix { background: rgba(25,198,179,.12); border-color: rgba(25,198,179,.4); color: #19c6b3; }
.method-tag.debito { background: rgba(21,194,102,.12); border-color: rgba(21,194,102,.4); color: var(--accent); }
.met-switch { background: transparent; border: 0; color: var(--muted); font-family: var(--font); font-size: 12px; font-weight: 800; padding: 4px 6px; border-radius: 8px; }
.met-switch:active { transform: scale(.95); }
.met-pill { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.met-pill.pix { background: rgba(25,198,179,.16); color: #19c6b3; }
.met-pill.debito { background: rgba(21,194,102,.16); color: var(--accent); }
select.sel { cursor: pointer; }

/* ===== TABBAR ===== */
/* Fundo SÓLIDO e contínuo até a base (área da home indicator no iPhone vira parte da barra,
   não um bloco escuro destacado). Sem transparência = sem "salto" embaixo. */
/* Barra de navegação FLUTUANTE (pílula), estilo apps modernos (99/iFood/Nubank):
   descolada das bordas, cantos arredondados, elevada — e o item ativo vira uma "pílula" destacada. */
/* iOS 26 "liquid glass": pílula FLUTUANTE, descolada das bordas, elevada, vidro translúcido com blur.
   O conteúdo passa desfocado por trás. color-mix faz o vidro; navegador antigo cai no --card sólido. */
.tabbar { position: fixed; bottom: calc(11px + var(--safe-bottom)); left: 14px; right: 14px; display: flex; z-index: 45;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 74%, transparent);
  border: 1px solid rgba(255,255,255,.16); border-radius: 30px; padding: 7px 8px;
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 14px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; backface-visibility: hidden;
  transition: background-color .35s ease, box-shadow .35s ease, opacity .2s ease; }
#fab { transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
/* Pop-up aberto (scroll travado): a barra de baixo e o + ficam INVISÍVEIS, mas com `visibility`
   (NÃO `display:none`). Por quê: com display:none a barra SAI do render tree e, ao fechar o modal,
   o iOS a recoloca DESANCORADA em aba de lista CURTA (ex.: Débito 1 item) — ela "sobe" e não volta,
   porque o scroll-nudge de re-âncora não tem efeito sem área pra rolar. Com visibility:hidden ela
   permanece no render tree, o position:fixed NUNCA perde a âncora, e ao reaparecer volta EXATAMENTE
   pro lugar (igual às outras abas). Fica invisível e sem toque, então não "ilha" atrás do backdrop. */
body.scroll-locked .tabbar, body.scroll-locked #fab {
  visibility: hidden !important; pointer-events: none !important; }
/* party-on (comemoração) some de vez (display:none) — não tem o problema da aba curta. */
body.party-on .tabbar, body.party-on #fab {
  display: none !important; }
/* ===== Entrada da tab bar (ao abrir o app): pílula sobe + fade, ícones em sequência, vidro depois ===== */
@keyframes tabbarRise { 0% { transform: translateY(130%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.tabbar.tb-enter { animation: tabbarRise .6s cubic-bezier(.2,.85,.25,1) both; }
.tabbar.tb-enter .seg-glass { opacity: 0; }                 /* lâmina some até a hora de deslizar da direita (JS) */
.tabbar.tb-enter .tab { animation: tabItemIn .5s ease both; }
.tabbar.tb-enter .tab:nth-child(2) { animation-delay: .16s; }
.tabbar.tb-enter .tab:nth-child(3) { animation-delay: .24s; }
.tabbar.tb-enter .tab:nth-child(4) { animation-delay: .32s; }
.tabbar.tb-enter .tab:nth-child(5) { animation-delay: .40s; }
.tabbar.tb-enter .tab:nth-child(6) { animation-delay: .48s; }
@keyframes tabItemIn { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
/* Entrada do seletor do topo (Resumo·Gráficos·Insights·Metas) ao abrir o app — mesmo efeito da tabbar */
@keyframes vtRise { 0% { transform: translateY(-14px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
#view .view-toggle.vt-enter { animation: vtRise .5s cubic-bezier(.2,.85,.25,1) both !important; }   /* especificidade p/ vencer o #view.no-anim > * */
.view-toggle.vt-enter .seg-glass { opacity: 0; }                  /* o vidro entra depois, deslizando (JS) */
.view-toggle.vt-enter .vt-btn { animation: tabItemIn .45s ease both; }
.view-toggle.vt-enter .vt-btn:nth-child(2) { animation-delay: .1s; }
.view-toggle.vt-enter .vt-btn:nth-child(3) { animation-delay: .18s; }
.view-toggle.vt-enter .vt-btn:nth-child(4) { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) { .view-toggle.vt-enter, .view-toggle.vt-enter .vt-btn { animation: none; } }
.tab { flex: 1; background: 0; border: 0; padding: 8px 0 7px; border-radius: 15px; margin: 0 1px; font-size: 10.5px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 700; position: relative; z-index: 1;
  transition: color .2s ease, transform .12s ease; }
.tab span { font-size: 21px; display: inline-block; transform-origin: 50% 80%;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), color .2s ease; }
.tab:active { transform: scale(.95); }                       /* feedback tátil ao tocar */
/* aba ativa = texto BRANCO sobre a lâmina de vidro (legível nos dois temas) */
.tab.active { color: #fff; font-weight: 800; }
.tab.active span { transform: translateY(-1px) scale(1.1); animation: tabPop .45s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 3px 7px rgba(31,217,122,.45)); }
@keyframes tabPop {
  0%   { transform: translateY(0)    scale(.94); }
  45%  { transform: translateY(-3px) scale(1.22); }
  100% { transform: translateY(-1px) scale(1.1); }
}

/* ===== Lâmina de vidro (iOS "liquid glass") — indicador que desliza no toggle e na tabbar ===== */
.seg-glass {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(0,0,0,.14), 0 6px 16px rgba(11,61,46,.28);
  -webkit-backdrop-filter: blur(7px) saturate(1.6); backdrop-filter: blur(7px) saturate(1.6);
  will-change: transform, width;
  transition: background .3s ease, box-shadow .3s ease;   /* o SLIDE (transform/width) é feito via Web Animations API */
}
.seg-glass::after {   /* brilho de "vidro" no topo, dá o ar refrativo */
  content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 42%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0)); pointer-events: none;
}
.seg-glass.noanim, .seg-glass.dragging { transition: none !important; }
.seg-glass.glass-ins {
  background: var(--glass-ins-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(0,0,0,.14), 0 6px 16px rgba(23,99,214,.3);
}
.tabbar .seg-glass { border-radius: 22px; }   /* concêntrico com a pílula (raio 30 − folga ~8 = 22) */
/* enquanto arrasta, a opção sob o vidro fica branca (legível sobre o vidro) */
.view-toggle .vt-btn.glass-near, .tabbar .tab.glass-near { color: #fff; }
@media (prefers-reduced-motion: reduce) { .seg-glass { transition: none; } }
/* Teclado aberto: a tabbar SAI do render tree (display:none) → no iOS não tem como driftar/subir
   no scroll. Reaparece ao fechar o teclado. O FAB também some. */
body.kbd-open .tabbar { display: none !important; }
/* teclado aberto / pop-up: o + SOME no lugar (sem deslizar). Senão, ao salvar e o teclado fechar,
   ele "saltava" de baixo pra cima (parecia que o + e a barra se levantavam). Agora só aparece/some. */
body.kbd-open #fab { opacity: 0; pointer-events: none; transform: none; }

/* fundo congelado enquanto um modal está aberto (não rola por trás do bottom-sheet) */
/* position:fixed é aplicado INLINE pelo lockScroll() só quando a página rola (vide #bugfix-debito-raia);
   aqui ficam só os estilos que valem com ou sem o fixed. */
body.scroll-locked { left: 0; right: 0; width: 100%; overflow: hidden; overscroll-behavior: none; }


/* ===== MODAL ===== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 22px 14px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fadeInUp .2s ease both;
  touch-action: none; overscroll-behavior: none; }   /* TODOS os pop-ups no MEIO da tela; backdrop ESCURO p/ o app não "vazar" atrás */
.modal.hidden { display: none; }
.modal-card { background: var(--card); color: var(--ink); width: 100%; max-width: 440px; border-radius: 22px;
  padding: 22px 18px 22px; max-height: 88dvh; overflow-y: auto; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); animation: popIn .24s cubic-bezier(.2,.8,.2,1);
  /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ overscroll-behavior: none; touch-action: pan-y; }   /* centralizado → sem safe-area embaixo (não encosta na borda); pan-y → o card rola por dentro; sem rubber-band vazando */
/* Rodapé de ações FIXO (Cancelar/Salvar sempre visíveis): o conteúdo rola por dentro, o modal nunca
   "vaza" os botões pra fora da tela. Padrão para todas as inclusões (+) e formulários. */
.modal-card > .modal-actions { position: sticky; bottom: 0; z-index: 4; background: var(--card);
  margin: 16px -18px -22px; padding: 14px 18px 0; }   /* rodapé flush no fim do card */
/* dissolve o conteúdo que rola por baixo ANTES de chegar nos botões — sem "vazar" atrás do botão.
   Faixa alta (52px): a base fica SÓLIDA (cor do card) e some pra cima, ocultando o "travessão" de
   informações que aparecia atrás dos botões fixos. Vale p/ todo modal com rodapé fixo. */
.modal-card:not(.alert-card):not(.greet-card):not(.ig-card):not(.crop-card):not(.sc-card) > .modal-actions::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px;
  background: linear-gradient(to top, var(--card) 0, var(--card) 55%, transparent 100%); pointer-events: none; }
/* tampa SÓLIDA abaixo do rodapé: cobre os ~22px de padding do card onde o conteúdo vazava ABAIXO do botão
   (sticky bottom:0 + margin-bottom negativa deixam essa faixa sem fundo). */
.modal-card:not(.alert-card):not(.greet-card):not(.ig-card):not(.crop-card):not(.sc-card) > .modal-actions::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px;
  background: var(--card); pointer-events: none; }

/* Modais altos (Categorias, Emoji): cabeçalho FIXO (título + ✕ sempre visíveis) e só o corpo rola */
.modal-card.sheet-tall { display: flex; flex-direction: column; overflow: hidden; padding-top: 24px; }
.modal-card.sheet-tall .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; margin-bottom: 10px; }
.modal-card.sheet-tall .sheet-head h2 { margin: 0; }
.modal-card.sheet-tall .sheet-head .sheet-x { position: static; top: auto; right: auto; flex: 0 0 auto; }
.modal-card.sheet-tall .modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ overscroll-behavior: contain; scrollbar-width: none; }
.modal-card.sheet-tall .modal-scroll::-webkit-scrollbar { display: none; }
.modal-card.sheet-tall .emoji-grid { flex: 1 1 auto; min-height: 0; max-height: none; }   /* a grade ocupa o resto e rola */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-card h2 { margin: 0 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }

/* botão ✕ dos modais (todos centralizados agora — sem alça de bottom-sheet) */
.modal-card { position: relative; }
.modal-card .sheet-x { position: absolute; top: 14px; right: 14px; left: auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; }
.modal-card .sheet-x:active { transform: scale(.9); }
.modal.closing { animation: fadeOut .25s ease both; }
@keyframes fadeOut { to { opacity: 0; } }

/* ===== Entrada escalonada dos lançamentos (o "dados se montando") ===== */
@keyframes rowIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
#view:not(.no-anim) .list .list-row { animation: rowIn .42s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * .032s); }
@media (prefers-reduced-motion: reduce) { #view .list .list-row { animation: none !important; } }
/* segmentado À vista / Parcelado */
.seg { display: flex; gap: 6px; padding: 4px; margin-bottom: 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 13px; }
.seg-btn { flex: 1; padding: 11px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  font-weight: 800; font-size: 14px; font-family: var(--font); cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.seg-btn.active { background: var(--card); color: var(--accent-2); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.seg-btn.locked { opacity: .5; }
.seg-btn.locked::after { content: " 🔒"; font-size: 11px; }
/* ===== Convidar amigo (janela + copiar) ===== */
.conv-card { max-width: 400px; text-align: center; }
.conv-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.conv-emoji-img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.conv-head h2 { margin: 0; }
.conv-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 4px 0 16px; }
.conv-linkbox { display: flex; gap: 8px; align-items: stretch; }
.conv-linkbox input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); color: var(--ink); font-family: var(--font); font-size: 13px; }
.conv-linkbox .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
.conv-linkbox .btn.ok { background: var(--accent); color: #06251a; }
.conv-hint { font-size: 12px; color: var(--muted); margin-top: 12px; }
.conv-placar { margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); text-align: center; }
.conv-pl-head { font-size: 15px; font-weight: 800; color: var(--ink); }
.conv-pl-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.conv-pl-sub b { color: var(--ink); }
.conv-rules-lnk { background: none; border: 0; color: var(--accent-2); font-weight: 700; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; font-family: var(--font); }
.gn-reset { color: #e0a53a; font-weight: 700; white-space: nowrap; }
/* janela "Como ganhar desconto" (regras de indicação) */
.ganhos-card { max-width: 400px; }
.gn-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px; text-align: center; }
.gn-head h2 { margin: 0; font-size: 19px; line-height: 1.2; }
.gn-emoji-img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.30)); }
.gn-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.gn-sub b, .gn-row b, .gn-ex-grid b { color: var(--ink); }
.gn-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.gn-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink); line-height: 1.45; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-align: left; }
.gn-row .gn-ic { font-size: 17px; flex: 0 0 auto; line-height: 1.3; }
.gn-row.gn-warn { background: rgba(224,165,58,.10); border-color: rgba(224,165,58,.4); }
.gn-ex { background: var(--card-2); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.gn-ex-t { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.gn-ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; }
.gn-ex-grid span { background: var(--card); border-radius: 8px; padding: 5px 8px; text-align: center; }
.gn-ex-grid b { color: var(--accent-2); }
/* banner de convite na tela de Planos */
.planos-ref { background: linear-gradient(135deg, rgba(255,92,141,.14), rgba(124,58,237,.10)); border: 1px solid rgba(255,92,141,.35); border-radius: 14px; padding: 12px 14px; margin: 4px 0 12px; }
.planos-ref .pr-txt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 12px; }
.planos-ref .pr-emoji { font-size: 22px; flex: 0 0 auto; }
.planos-ref .pr-txt b { font-size: 14.5px; color: var(--ink); display: block; }
.planos-ref .pr-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 30ch; margin: 0 auto; text-wrap: balance; }
.planos-ref .pr-txt span b { display: inline; font-size: inherit; color: var(--ink); }   /* negrito do corpo é inline (só o título é block) */
.planos-ref .pr-btns { display: flex; gap: 8px; }
.planos-ref .pr-btns .btn { flex: 1; padding: 10px; font-size: 13px; }
.seg-btn:active { transform: scale(.97); }
/* seg de 3 (À vista / Parcelado / Recorrente): aperta pra caber no iPhone */
.seg3 .seg-btn { padding: 11px 4px; font-size: 13px; }

/* compra recorrente no cartão (por X meses OU meses escolhidos) */
.rec-box { margin: 0 0 14px; }
.rec-box .seg { margin-bottom: 10px; }
.rec-hint { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; }
.month-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 170px; overflow-y: auto; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ overscroll-behavior: contain; padding: 2px; }
.mchip { border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-family: var(--font);
  font-weight: 700; font-size: 12.5px; padding: 8px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.mchip:active { transform: scale(.94); }
.mchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* autocomplete de descrição (sugestões aparecem conforme digita) */
.ac-wrap { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 9; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 232px; overflow-y: auto; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ }
.ac-list.hidden { display: none; }
.ac-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 11px 13px; cursor: pointer; font-family: var(--font); color: var(--ink); }
.ac-item:last-child { border-bottom: 0; }
.ac-item:active { background: var(--card-2); }
.ac-item .ac-d { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item .ac-c { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }

/* observações da compra (textarea) */
.f-obs { width: 100%; resize: none; min-height: 56px; line-height: 1.45; font-family: var(--font); }

/* emoji da meta escolhido à mão (unicode estático, sem webp animado) + botão de escolher */
.meta-emoji-uni { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 30px; }
.meta-prev-btn { position: relative; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; padding: 0; }
.meta-prev-btn:active { transform: scale(.94); }
.meta-prev-edit { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.meta-head-txt { display: flex; flex-direction: column; line-height: 1.2; }
.meta-head-txt i { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
/* 4 dígitos do cartão na lista "Meus cartões" */
.card-last4 { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* ===== Gerenciador de categorias + orçamento ===== */
.cat-total { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.cat-total b { color: var(--ink); font-size: 16px; }
.cat-mgr-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cat-mgr-row:last-of-type { border-bottom: 0; }
.cat-emoji-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); font-size: 22px; line-height: 1; cursor: pointer; }
.cat-emoji-btn:active { transform: scale(.92); }
.cat-name-inp { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card-2); color: var(--ink); font-family: var(--font); font-size: 16px; }
.cat-orc { flex: 0 0 124px; display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--card-2); }   /* largura p/ caber valores altos (R$ 1.500,00) sem espremer */
.cat-orc span { color: var(--muted); font-size: 13px; font-weight: 700; }
.cat-orc-inp { width: 100%; border: 0; background: transparent; color: var(--ink); font-family: var(--font); font-size: 16px; padding: 10px 0; min-width: 0; }
.cat-orc-inp:focus, .cat-name-inp:focus { outline: none; }
.cat-name-inp:focus, .cat-orc:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cat-del { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; }
.cat-del:active { transform: scale(.9); }
/* caixinha dimensionável: Orçado/Realizado em 2 colunas (rótulo em cima, valor embaixo) + chip do % centralizado */
.orc-sum { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; padding: 13px 15px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 13px; }
.orc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.orc-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; }
.orc-col.right { align-items: flex-end; text-align: right; }
.orc-lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.orc-col b { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.orc-col b.neg { color: var(--red); } .orc-col b.pos { color: #0f9a4c; }
.orc-pct-wrap { display: flex; justify-content: center; padding-top: 10px; border-top: 1px solid var(--line); }
.orc-pct { font-size: 12px; font-weight: 800; padding: 3px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); white-space: nowrap; }
.orc-pct.pos { color: #0f9a4c; } .orc-pct.neg { color: var(--red); }
.orc-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; }
.orc-note b { color: var(--ink); }

/* ===== Seletor de emoji (estilo WhatsApp) ===== */
.emoji-search { flex: 0 0 auto; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); color: var(--ink);
  font-family: var(--font); font-size: 16px; }
.emoji-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.emoji-search::placeholder { color: var(--muted); }
.emoji-empty { grid-column: 1 / -1; padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.55; }
.emoji-tabs { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 5px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px;
  scrollbar-width: none; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ touch-action: pan-x; overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--line); }
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  font-size: 20px; line-height: 1; cursor: pointer; opacity: .55; transition: opacity .15s ease, background .15s ease, border-color .15s ease; }
.emoji-tab.active { opacity: 1; border-color: var(--accent); background: var(--card-2); }
.emoji-tab:active { transform: scale(.9); }
.emoji-cat-name { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 8px 2px 8px; text-align: left; }
.emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); align-content: start; gap: 6px; max-height: 52vh; overflow-y: auto;
  /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.emoji-grid::-webkit-scrollbar { display: none; }
.emoji-cell { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--card-2); font-size: 23px; line-height: 1; cursor: pointer; transition: transform .1s ease, background .15s ease; }
.emoji-cell:hover { background: var(--line); }
.emoji-cell:active { transform: scale(.85); }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
/* rótulo de um grupo de botões (segmento) que não é um <label> — mesmo estilo de .field span + "?" ao lado */
.field-label-help { display: flex; align-items: center; margin: 0 0 6px; }
.field-label-help span { font-size: 13px; color: var(--muted); margin: 0; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; font-size: 16px;
  background: var(--card-2); color: var(--ink); font-family: var(--font); transition: border-color .2s ease, box-shadow .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
/* input[type=date] no iOS: o controle nativo impõe altura/centralização próprias e o valor
   saía CENTRALIZADO e fora da caixa. -webkit-appearance:none remove o estilo nativo → vira uma
   caixa idêntica à de texto (mesma altura do "Valor da compra"). O toque ainda abre o calendário. */
.field input[type="date"] {
  -webkit-appearance: none; appearance: none;
  text-align: left; line-height: normal;
  /* o controle de data reserva ~2px a mais de conteúdo que um input de texto → fixa a MESMA
     altura de caixa do "Valor da compra" (border-box: 22px conteúdo + 26 padding + 2 borda). */
  box-sizing: border-box; height: 50px; min-height: 50px;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input[type="date"]::-webkit-datetime-edit { padding: 0; text-align: left; line-height: normal; }
.field input[type="date"]::-webkit-inner-spin-button { display: none; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; width: 18px; height: 18px; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.modal-actions .btn { flex: 1; }
.btn { padding: 14px; border-radius: 13px; border: 0; font-size: 15px; font-weight: 800; font-family: var(--font); letter-spacing: .1px;
  transition: transform .12s ease, filter .2s ease, background .2s ease; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; box-shadow: 0 6px 16px rgba(11,61,46,.28); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--accent); }
.btn.danger { background: rgba(229,72,77,.12); color: var(--red); }
.btn.danger:hover { background: rgba(229,72,77,.18); }
/* modal de confirmação (substitui o confirm() nativo) */
.confirm-card { max-width: 340px; text-align: center; }
.confirm-msg { margin: 4px 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink); font-weight: 600; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; }
.confirm-actions .btn.danger { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(229,72,77,.3); }
/* nota do fluxo de caixa no drill do gráfico de saldo */
.det-flux { margin: 8px 2px 0; font-size: 12px; line-height: 1.45; }
/* ===== Seletor de tema (cards visuais, cores reais do app) ===== */
.theme-card { max-width: 380px; }
.theme-cards { display: flex; gap: 10px; }
/* cor do tema (acento) — Pro+ */
.ac-sep { margin: 18px 0 9px; font-size: 13px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.ac-lock { font-size: 11px; font-weight: 700; color: var(--muted); }
.ac-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ac-row.ac-locked { opacity: .55; }
.ac-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); cursor: pointer; font-family: var(--font); transition: border-color .15s ease, transform .1s ease; }
.ac-opt:active { transform: scale(.96); }
.ac-opt.on { border-color: var(--sw); box-shadow: inset 0 0 0 2px var(--sw); }
.ac-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ac-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.ac-hint { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; }
.ac-hint b { color: var(--ink); }
/* ===== Relatório PDF (usa a impressão do sistema → salvar como PDF) ===== */
#printArea { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.printing { background: #fff !important; }
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block !important; }
  /* cores TÊM que sair na impressão (senão o navegador remove os fundos) */
  #printArea, #printArea * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  #printArea { padding: 11mm 9mm; color: #10231a; font-family: var(--font); }
  .rpt-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid #15c266; padding-bottom: 9px; margin-bottom: 13px; }
  .rpt-brand { font-size: 23px; font-weight: 900; color: #0f7a43; letter-spacing: -.3px; }
  .rpt-logo { font-size: 20px; }
  .rpt-when { font-size: 11px; color: #5b6b63; text-align: right; line-height: 1.45; }
  .rpt-when b { color: #10231a; }
  .rpt-kpis { display: flex; gap: 9px; margin-bottom: 12px; }
  .rpt-kpi { flex: 1; border-radius: 13px; padding: 12px 13px; color: #fff; }
  .rpt-kpi.k-in { background: linear-gradient(135deg, #17c268, #0f9a4c); }
  .rpt-kpi.k-out { background: linear-gradient(135deg, #f0616a, #d23b42); }
  .rpt-kpi.k-net { background: linear-gradient(135deg, #3aa3ff, #2b7fd6); }
  .rpt-kpi-ic { font-size: 18px; }
  .rpt-kpi-lbl { font-size: 11px; font-weight: 700; opacity: .95; margin-top: 3px; }
  .rpt-kpi-val { font-size: 19px; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .rpt-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: #eef2f0; }
  .rpt-bar-seg { color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
  .rpt-bar-seg.s-fix { background: #0f9a4c; }
  .rpt-bar-seg.s-card { background: #d99409; }
  .rpt-bar-seg.s-deb { background: #2b7fd6; }
  .rpt-bar-cap { font-size: 9.5px; color: #5b6b63; margin: 4px 0 13px; text-align: center; }
  .rpt-cols { display: flex; gap: 10px; }
  .rpt-cols .rpt-card { flex: 1; }
  .rpt-card { border: 1px solid #e2e8e5; border-radius: 12px; overflow: hidden; margin-bottom: 11px; }
  .rpt-card-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 7px 11px; color: #fff; }
  .rpt-card-h.g { background: #0f9a4c; }
  .rpt-card-h.r { background: #d23b42; }
  .rpt-card-h.b { background: #2b7fd6; }
  .rpt-card table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .rpt-card td { padding: 6px 11px; border-bottom: 1px solid #eef2f0; }
  .rpt-card tr:last-child td { border-bottom: 0; }
  .rpt-card .rv { text-align: right; font-variant-numeric: tabular-nums; }
  .rpt-card .rv.b { font-weight: 800; }
  .rpt-card .rv.pos { color: #0f9a4c; }
  .rpt-card .rv.neg { color: #c53030; }
  .rpt-card tr.tot td { background: #f6faf8; font-weight: 800; }
  .rpt-ref { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #eafff3, #f1ecff); border: 1px solid #bfe9cf; border-radius: 13px; padding: 12px 14px; }
  .rpt-ref-ic { font-size: 26px; }
  .rpt-ref-txt { flex: 1; }
  .rpt-ref-big { font-size: 15px; font-weight: 900; color: #0f7a43; }
  .rpt-ref-sub { font-size: 11px; color: #5b6b63; margin-top: 2px; line-height: 1.4; }
  .rpt-ref-badge { font-size: 15px; font-weight: 900; color: #fff; background: #17c268; border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
  .rpt-foot { margin-top: 14px; font-size: 9.5px; color: #98a29c; text-align: center; }
}
.th-opt { flex: 1; background: 0; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.th-prev { width: 100%; aspect-ratio: 9/16; border-radius: 14px; border: 2.5px solid var(--line); overflow: hidden; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.16); transition: border-color .18s ease, transform .12s ease; }
.th-opt.on .th-prev { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,217,122,.22), 0 6px 16px rgba(11,61,46,.25); }
.th-opt:active .th-prev { transform: scale(.97); }
.th-prev .th-top { height: 26%; background: linear-gradient(135deg, var(--green-2), var(--green)); }
.th-prev .th-card { position: absolute; left: 12%; right: 12%; top: 36%; padding: 9px 8px 10px; border-radius: 8px; border: 1px solid; }
.th-prev .th-card i { display: block; height: 4px; border-radius: 3px; margin-bottom: 5px; }
.th-prev .th-card i:first-child { width: 70%; } .th-prev .th-card i:nth-child(2) { width: 45%; }
.th-prev .th-card b { display: block; height: 9px; width: 55%; border-radius: 4px; margin-top: 6px; background: var(--accent); }
.th-name { font-size: 13px; font-weight: 700; color: var(--muted); }
.th-opt.on .th-name { color: var(--accent); }
/* ===== Limite do cartão (acompanhamento de uso da fatura) ===== */
.card-block { margin-bottom: 4px; }
.card-lim { padding: 2px 14px 12px; }
.card-lim-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.card-lim-head b { color: var(--ink); }
.card-lim-bar { height: 8px; border-radius: 6px; background: var(--card-2); overflow: hidden; border: 1px solid var(--line); }
.card-lim-fill { height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.card-lim-fill.lim-ok { background: linear-gradient(90deg, var(--green-2), var(--green)); }
.card-lim-fill.lim-warn { background: linear-gradient(90deg, #d98a0b, #f5a623); }
.card-lim-fill.lim-bad { background: linear-gradient(90deg, #c0353a, #e5484d); }
.card-lim-foot { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.card-lim-foot b { color: var(--accent); }
/* ===== Projeção do ano + Medalhas (gamificação) ===== */
.proj-card { border: 1px solid rgba(31,217,122,.28); }
/* respiro lateral do conteúdo das medalhas (o .section-card não tem padding próprio) */
.medals-card > .hint { padding: 0 16px; }
.medal-scroll { padding-left: 14px !important; padding-right: 14px !important; }
/* barra de progresso geral (X de 123) — limpa, com respiro das margens */
.medal-overall { height: 9px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; margin: 0 16px 12px; }
.medal-overall .mo-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .7s cubic-bezier(.2,.8,.2,1); }
/* caixa do MESMO tamanho com SCROLL interno (não cresce a página) */
.medal-scroll { max-height: 300px; overflow-y: auto; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ overscroll-behavior: contain; scrollbar-width: none;
  padding: 4px 2px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%); }
.medal-scroll::-webkit-scrollbar { display: none; }
.medals-card .medal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; grid-auto-rows: 1fr; padding: 6px 2px; }
.medal { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 15px 8px 13px; border-radius: 17px;
  background: var(--card-2); border: 1px solid var(--line); text-align: center; min-height: 122px; transition: transform .15s ease; }
.medal.got { border-color: rgba(245,166,35,.55); background: linear-gradient(160deg, rgba(245,166,35,.15), var(--card-2));
  box-shadow: 0 0 0 1px rgba(245,166,35,.18), 0 6px 16px rgba(245,166,35,.14); }
.medal.got .md-ic { animation: medalPop .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes medalPop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .medal.got .md-ic { animation: none; } }
.medal.locked { opacity: .5; }
.medal.locked .md-ic { filter: grayscale(1); opacity: .6; }
.medal .md-ic { font-size: 28px; width: 38px; height: 38px; line-height: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.medal .md-ic.emoji-anim { width: 38px; height: 38px; vertical-align: middle; }
.medal .md-n { font-size: 11px; font-weight: 800; color: var(--ink); line-height: 1.18; min-height: 2.36em; display: flex; align-items: center; justify-content: center; padding: 0 1px; }
.medal .md-v { font-size: 9.8px; color: var(--muted); font-weight: 600; line-height: 1.2; margin-top: auto; padding: 0 1px; }
/* ===== 🔍 Exploração: widget no menu + coach tip + modal ===== */
.explore-widget, .explore-medal { display: block; width: 100%; text-align: left; background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-bottom: 12px; cursor: pointer; color: var(--ink); font-family: var(--font); transition: transform .12s ease; }
.explore-widget:active, .explore-medal:active { transform: scale(.985); }
.exp-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.exp-head b { color: var(--accent); font-size: 14px; }
.exp-bar { height: 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.exp-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.explore-medal { display: flex; align-items: center; gap: 10px; background: linear-gradient(160deg, rgba(245,166,35,.16), var(--card-2)); border-color: rgba(245,166,35,.5); }
.explore-medal .exp-ic { width: 34px; height: 34px; flex: 0 0 auto; }
.explore-medal span { display: flex; flex-direction: column; }
.explore-medal b { font-size: 13.5px; } .explore-medal i { font-size: 11.5px; color: var(--muted); font-style: normal; }
.coach-tip { position: fixed; left: 14px; right: 14px; bottom: calc(86px + var(--safe-bottom)); z-index: 1400; display: flex; justify-content: center;
  pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
.coach-tip.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.coach-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--accent); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-lg); }
.coach-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.coach-badge { font-size: 10px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 99px; padding: 2px 8px; }
.coach-top b { font-size: 14px; }
.coach-card p { margin: 0 0 9px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.coach-foot { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; } .coach-foot b { color: var(--accent); }
.coach-bar { height: 6px; border-radius: 5px; background: var(--card-2); overflow: hidden; }
.coach-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .5s ease; }
.explore-card { max-width: 420px; }
.explore-lead { font-size: 13px; line-height: 1.5; margin: 0; }
.exp-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; scrollbar-width: none; }
.exp-list::-webkit-scrollbar { display: none; }
.exp-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.exp-item.done { border-color: rgba(31,217,122,.35); }
.exp-item.todo { opacity: .68; }
.exp-mark { flex: 0 0 auto; font-size: 14px; line-height: 1.4; }
.exp-txt { display: flex; flex-direction: column; } .exp-txt b { font-size: 13px; } .exp-txt i { font-size: 11.5px; color: var(--muted); font-style: normal; line-height: 1.4; }
/* ===== Metas (objetivos) — barra estilo Duolingo, emoji animado que se mexe ao digitar ===== */
.metas-card { max-width: 420px; }
/* Metas inline (aba do Resumo): o section-card não tem padding próprio → dá o respiro aqui */
.metas-inline { padding: 16px; }
.metas-inline .faq-head { margin-bottom: 12px; }
.meta-emoji { width: 1.7em; height: 1.7em; }
.meta-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 10px; }
.meta-ic { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.meta-ic .meta-emoji { width: 40px; height: 40px; }
.meta-body { flex: 1; min-width: 0; }
.meta-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.meta-nome { font-weight: 800; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-pct { font-size: 12.5px; font-weight: 800; color: var(--accent); flex: 0 0 auto; }
.meta-bar { height: 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); overflow: hidden; position: relative; }
.meta-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--green-2), var(--green)); position: relative; overflow: hidden;
  transition: width .7s cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 2px 0 rgba(255,255,255,.25); min-width: 0; }
.meta-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: shine 2.4s ease-in-out infinite; }
.meta-fill.done { background: linear-gradient(90deg, #f5a623, #ffce4d); }
.meta-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.meta-edit { flex: 0 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; color: var(--muted); font-size: 15px; }
.meta-edit:active { transform: scale(.92); }
.meta-form { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* toggle (switch iOS) nas Configurações — ex.: ligar/desligar a saudação */
.set-toggle { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 12px 14px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; position: relative; }
.set-toggle-txt { flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.set-toggle-txt small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.set-pro-tag { font-size: 10px; font-weight: 800; color: #06251a; background: var(--accent); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.set-plus-tag { font-size: 10px; font-weight: 800; color: #06251a; background: var(--accent-2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.set-toggle input.switch { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.set-toggle .switch-track { flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,.16); position: relative; transition: background .2s ease; }
.set-toggle .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.34,1.4,.4,1); }
.set-toggle input.switch:checked ~ .switch-track,
.set-toggle.on .switch-track { background: var(--accent); }
.set-toggle input.switch:checked ~ .switch-track::after,
.set-toggle.on .switch-track::after { transform: translateX(20px); }
.set-toggle input.switch:focus-visible ~ .switch-track { box-shadow: 0 0 0 4px var(--ring); }
.set-toggle:active .switch-track::after { width: 26px; }
.meta-form-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.meta-prev { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; }
.meta-prev .meta-emoji { width: 40px; height: 40px; }
.meta-actions { display: flex; gap: 10px; margin-top: 6px; }
.meta-actions .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .meta-fill::after { animation: none; display: none; } }
/* Botões das configurações: largos, centralizados, com ícone alinhado */
.settings-buttons { display: flex; flex-direction: column; gap: 11px; margin: 10px 0 14px; }
.settings-buttons .btn, #notifWrap .btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px; }
#notifWrap .btn { margin: 0; }
#settingsModal .modal-card h2 { text-align: center; }
#settingsModal .field span, #notifWrap .hint { text-align: center; }
#notifWrap > .hint { display: block; }
.hint { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }

/* ===== Pop-up centralizado (contas a vencer) ===== */
.modal.center { align-items: center; padding: 24px; }
.modal.center .modal-card { width: 100%; max-width: 360px; border-radius: 22px; border-bottom: 1px solid var(--line);
  text-align: center; animation: popIn .26s cubic-bezier(.2,.9,.2,1.2) both; }
.alert-emoji { font-size: 42px; line-height: 1; animation: bellRing 1.2s ease-in-out 2; transform-origin: 50% 0; }
@keyframes bellRing { 0%,100% { transform: rotate(0); } 20% { transform: rotate(12deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-4deg); } }
.alert-card h2 { text-align: center; margin: 10px 0 6px; }
.alert-body { text-align: left; margin: 4px 0 8px; }
.alert-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.alert-line:last-child { border-bottom: 0; }
.al-desc { font-weight: 700; font-size: 14.5px; }
.al-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.al-val { font-weight: 800; white-space: nowrap; }
.alert-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--line); font-size: 15px; font-weight: 700; }
.alert-total b { font-size: 19px; color: var(--accent); letter-spacing: -.3px; }
/* pop-up só com a conta mais perto de vencer (nome, sem valor) */
.alert-single { text-align: center; padding: 6px 0 2px; }
.alert-single .al-1st { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.alert-single .al-desc { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.alert-single .al-sub { font-size: 13px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ===== TOAST ===== */
.toast { position: fixed; bottom: calc(96px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 13px 22px; border-radius: 24px; font-size: 14px; font-weight: 700; z-index: 200;
  box-shadow: var(--shadow-lg); max-width: 88%; text-align: center; animation: toastIn .26s cubic-bezier(.2,.8,.2,1) both; }
/* mantém o translateX(-50%) DURANTE a animação (senão o toast desloca pro lado) */
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.hidden { display: none; }

/* ===== Card "Contas a vencer" (prioridade no topo do Resumo) ===== */
.venc-card { padding: 4px 0 6px; border-color: var(--line);
  box-shadow: 0 10px 34px rgba(245,166,35,.10), var(--shadow); position: relative; overflow: hidden; }
.venc-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.venc-bell { font-size: 24px; filter: drop-shadow(0 3px 6px rgba(245,166,35,.35)); animation: bellSwing 2.4s ease-in-out infinite; transform-origin: 50% 12%; }
.venc-htxt { line-height: 1.25; }
.venc-title { font-weight: 800; font-size: 15.5px; letter-spacing: -.2px; }
.venc-meta { font-size: 12px; color: var(--muted); font-weight: 600; }
.venc-meta b { color: var(--amber); font-weight: 800; }
.venc-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); position: relative; overflow: hidden; transition: background .15s ease; }
.venc-row[data-vid] { cursor: pointer; }
.venc-row:active { filter: brightness(1.08); }
/* tint suave que esmaece da esquerda (sombra de cor leve por urgência) */
.venc-row.u-red   { background: linear-gradient(90deg, rgba(229,72,77,.13), transparent 62%); }
.venc-row.u-amber { background: linear-gradient(90deg, rgba(245,166,35,.13), transparent 62%); }
.venc-row.u-green { background: linear-gradient(90deg, rgba(21,194,102,.10), transparent 62%); }
.vr-main { flex: 1; min-width: 0; }
.vr-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* rótulo do mês de origem numa conta ATRASADA de mês anterior (ex.: "· Mai") */
.vr-mes, .nr-mes { font-weight: 700; font-size: 11.5px; color: #ff8f6b; }
.vr-amt { font-weight: 800; font-size: 15px; white-space: nowrap; }
.vr-pay { background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; border: 0; border-radius: 11px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 800; font-family: var(--font); box-shadow: 0 5px 13px rgba(11,61,46,.3); transition: transform .12s ease; }
.vr-pay:active { transform: scale(.93); }

.flow-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 4px 16px 0; margin-bottom: 16px; overflow: hidden; }
.flow-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.flow-row:last-child { border-bottom: 0; }
.flow-row span i { font-style: normal; color: var(--muted); font-size: 11px; display: block; font-weight: 600; }
.flow-row b { font-weight: 800; }
.flow-row.eq { background: var(--card-2); margin: 0 -16px; padding: 12px 16px; }
/* quebra das despesas (Fixas/Cartão/Débitos) logo abaixo da linha "− Despesas" */
.flow-breakdown { padding: 8px 0 10px 14px; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 7px; }
.fb-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.fb-name { color: var(--muted); font-weight: 700; }
.fb-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.fb-val i { font-style: normal; color: var(--muted); font-weight: 700; font-size: 11.5px; margin-left: 4px; }
.flow-row.total { background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; margin: 0 -16px; padding: 16px; border-radius: 0 0 18px 18px; }
.flow-row.total b { font-size: 22px; letter-spacing: -.4px; }
.flow-row.total .pos { color: #7dffb4; } .flow-row.total .neg { color: #ff9a9d; }
.flow-row.total span i { color: rgba(255,255,255,.82); }   /* % na linha verde fica legível */

.orc-total { margin: 2px 16px 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--muted); }
.orc-total b { color: var(--ink); font-size: 16px; }
.orc-total i { font-style: normal; }
.orc-total.neg b { color: var(--red); }
/* Conta na nuvem (login email+senha) */
.cloud-card { max-width: 380px; }
.cloud-ic { font-size: 36px; line-height: 1; text-align: center; }
.cloud-body { margin-top: 6px; }
.cloud-msg { min-height: 20px; margin: 8px 2px 2px; font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.cloud-msg.bad { color: #ff6b6b; }
.cloud-acct { text-align: center; font-size: 14.5px; color: var(--muted); line-height: 1.5; margin: 4px 0 14px; }
.cloud-acct b { color: var(--ink); font-size: 16px; word-break: break-all; }
.cloud-acts { display: flex; flex-direction: column; gap: 10px; }
.cloud-ok { text-align: center; padding: 6px 4px 2px; }
.cloud-ok-ic { font-size: 42px; margin-bottom: 8px; }
.cloud-ok p { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; }
#miCloud span i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }

/* observação da compra em tela cheia (toque no 📝) */
.obs-flag { cursor: pointer; }
.obs-card { max-width: 380px; }
.obs-ic { font-size: 34px; line-height: 1; text-align: center; }
.obs-desc { font-weight: 800; font-size: 15px; color: var(--ink); text-align: center; margin: 0 0 10px; }
.obs-text { white-space: pre-wrap; word-break: break-word; text-align: left; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 15.5px; line-height: 1.55; color: var(--ink); min-height: 92px; max-height: 50vh; overflow-y: auto; }
.pr-block { margin: 14px 0; padding: 0 16px; }
.pr-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.pr-head i { font-style: normal; color: var(--muted); font-weight: 500; }
.pr-bar { height: 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.pr-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 7px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.pr-fill.over { background: linear-gradient(90deg, #ff6b6f, var(--red)); }
.pr-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; font-weight: 600; }

.venc-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 10px; margin-left: 6px; background: var(--card-2); color: var(--muted);
  display: inline-block; transition: box-shadow .3s ease, background .3s ease, color .3s ease; }
/* Cor por proximidade: quanto mais perto, mais "quente". Não é vermelho sangue — é de atenção. */
.venc-badge.d0    { background: rgba(229,72,77,.16); color: #e5484d; animation: vbRed 1.7s ease-in-out infinite; }
.venc-badge.atras { background: rgba(229,72,77,.22); color: #ff5d62; animation: vbRed 1.3s ease-in-out infinite; }
.venc-badge.d1    { background: rgba(245,166,35,.20); color: #cf8400; animation: vbAmber 2.2s ease-in-out infinite; }
.venc-badge.d3    { background: rgba(245,193,35,.18); color: #b9760a; }
.venc-badge.d7    { background: rgba(120,190,60,.16);  color: #5f8f1e; }
.venc-badge.dlong { background: rgba(21,194,102,.14);  color: #1a8f57; }
.venc-badge.hoje  { background: rgba(229,72,77,.16); color: #e5484d; }   /* retrocompat */
.venc-badge.perto { background: rgba(245,166,35,.20); color: #cf8400; }
@keyframes vbRed   { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }  50% { box-shadow: 0 0 0 3px rgba(229,72,77,.18); } }
@keyframes vbAmber { 0%,100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } 50% { box-shadow: 0 0 0 3px rgba(245,166,35,.16); } }
.mini-btn { background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; border: 0; border-radius: 11px; padding: 8px 14px; font-size: 12px; font-weight: 800; transition: transform .12s ease; }
.mini-btn:active { transform: scale(.93); }

.group-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin: 18px 4px 7px; }
.group-head span { color: var(--ink); }
.badge[data-toggle] { cursor: pointer; }
.row-check { display: flex; align-items: center; gap: 10px; flex-direction: row; }
.row-check input { width: auto; }
.row-check span { margin: 0; }

/* ===== Barra de progresso da sincronização ===== */
.sync-prog { position: fixed; left: 0; right: 0; top: 0; z-index: 70; display: flex; justify-content: center;
  padding: calc(10px + var(--safe-top)) 12px 0; pointer-events: none; }
.sync-prog.hidden { display: none; }
.sync-card { width: 100%; max-width: 420px; background: var(--card); color: var(--ink); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 13px 15px; border: 1px solid var(--line); animation: fadeInUp .25s ease both; }
.sync-msg { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 9px; line-height: 1.35; }
.sync-msg small { display: block; font-weight: 600; color: var(--muted); margin-top: 3px; font-size: 12.5px; }
.sync-track { height: 7px; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sync-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 999px; transition: width .35s ease; }
@keyframes syncPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.sync-fill.indet { animation: syncPulse 1s ease-in-out infinite; }


/* ===== Botão atualizar girando ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn.spin { animation: spin .7s linear; }

/* ===== Destaque dos vencimentos ao tocar "ver contas" ===== */
@keyframes focusRing { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.55); } 70% { box-shadow: 0 0 0 14px rgba(245,166,35,0); } 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } }
.focus-pulse { animation: focusRing 1.5s ease-out 2; border-color: var(--amber) !important; }
/* Holofote dos botões "Ir até": escurece tudo em volta do alvo e esvaece em ~3s (destaque) */
.spotlight { position: fixed; z-index: 105; pointer-events: none; border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.62); outline: 2px solid rgba(255,255,255,.45); outline-offset: 0;
  transition: box-shadow 5s cubic-bezier(.22,.61,.21,1), outline-color 5s ease; will-change: box-shadow; }
.spotlight.fade { box-shadow: 0 0 0 9999px rgba(0,0,0,0); outline-color: rgba(255,255,255,0); }
@media (prefers-reduced-motion: reduce) { .spotlight { transition-duration: .8s; } }
@keyframes focusRow { 0%,100% { background: transparent; } 35% { background: rgba(245,166,35,.18); } }
.focus-row { animation: focusRow 1.2s ease-in-out 2; }

/* ===== 🎉 Comemoração de 100% explorado: card central de Parabéns com um party-popper animado ===== */
.party-fx { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
  padding: 26px 18px; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeInUp .25s ease both; }
.party-card { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 22px 22px; max-width: 360px; width: 100%; text-align: center; box-shadow: var(--shadow-lg);
  animation: popIn .3s cubic-bezier(.2,.8,.2,1) both; }
.party-emoji-wrap { display: flex; justify-content: center; }
.party-center { width: 100px; height: 100px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.42));
  transform: scale(.3) rotate(-12deg); opacity: 0; animation: partyPop 1.5s cubic-bezier(.2,.9,.2,1.1) both; }
@keyframes partyPop {
  0%   { opacity: 0; transform: scale(.3)  rotate(-12deg); }
  55%  { opacity: 1; transform: scale(1.14) rotate(4deg); }
  100% { opacity: 1; transform: scale(1)   rotate(0deg); }
}
.party-title { margin: 12px 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.party-sub { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.party-invite { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.party-card .party-ok { width: 100%; }
@media (prefers-reduced-motion: reduce) { .party-center { animation-duration: .8s; } }

/* ===== Simulador "vale a pena comprar?" ===== */
.sim-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sim-clear { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 800; font-family: var(--font); padding: 6px 12px; transition: transform .12s ease, color .2s ease, border-color .2s ease; }
.sim-clear:hover { color: var(--red); border-color: var(--red); }
.sim-clear:active { transform: scale(.92); }
.sim-body { padding: 0 16px 16px; }
.sim-verdict { margin-top: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.45; display: flex; gap: 9px; align-items: flex-start;
  padding: 13px 14px; border-radius: 13px; background: var(--card-2); border: 1px solid var(--line); animation: popIn .22s ease both; }
.sim-verdict.hint { font-weight: 600; color: var(--muted); background: transparent; border: 0; padding: 6px 0 0; }
.sim-verdict .sim-ic { font-size: 19px; }
.sim-verdict.good { background: rgba(21,194,102,.1); border-color: rgba(21,194,102,.4); }
.sim-verdict.good b { color: var(--accent); }
.sim-verdict.warn { background: rgba(245,166,35,.1); border-color: rgba(245,166,35,.45); }
.sim-verdict.warn b { color: var(--amber); }
.sim-verdict.bad { background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.45); }
.sim-verdict.bad b { color: var(--red); }
/* Borda VIVA do veredito: faixa brilhante circulando + transição suave verde↔vermelho */
@property --simang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.sim-verdict.good, .sim-verdict.warn, .sim-verdict.bad {
  position: relative; isolation: isolate;
  transition: background .55s ease, border-color .55s ease, box-shadow .55s ease, color .55s ease;
}
.sim-verdict.good { --glow: #15c266; }
.sim-verdict.warn { --glow: #f5a623; }
.sim-verdict.bad  { --glow: #e5484d; animation: simBadPulse 1.3s ease-in-out infinite; }
@keyframes simBadPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(229,72,77,.55), 0 0 12px rgba(229,72,77,.28); }
  50%     { box-shadow: 0 0 0 2px rgba(229,72,77,.95), 0 0 24px rgba(229,72,77,.55); }
}
.sim-verdict.good::before, .sim-verdict.warn::before, .sim-verdict.bad::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.8px; pointer-events: none;
  background: conic-gradient(from var(--simang), transparent 0deg, var(--glow) 55deg, #ffffff 85deg, var(--glow) 115deg, transparent 170deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: simSpin 2.4s linear infinite;
}
@keyframes simSpin { to { --simang: 360deg; } }

.sim-extra { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-weight: 600; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.sim-extra b { color: var(--ink); font-weight: 800; }
.sim-chart { height: 168px; margin-top: 12px; }
.sim-chart.hidden { display: none; }

/* ===== Animações dos blocos do Resumo ===== */
@keyframes emojiBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.health-emoji { animation: emojiBob 2.8s ease-in-out infinite; }
.health-meta { animation: fadeInUp .5s ease .15s both; }
/* emojis-gif (Noto) no lugar dos estáticos: a FORMA não balança — quem anima é o próprio webp */
.health-emoji { animation: none; }
.health-emoji .emoji-anim { width: 46px; height: 46px; display: block; margin: 0 auto; }
.venc-bell { animation: none !important; }
.venc-bell .emoji-anim { width: 28px; height: 28px; display: block; }
.alert-emoji { animation: none !important; }
.alert-emoji .emoji-anim { width: 56px; height: 56px; display: block; margin: 0 auto; }
.notif-bell { animation: none !important; }
.notif-bell .emoji-anim { width: 24px; height: 24px; display: block; }
.ind-ic { width: 1.15em; height: 1.15em; vertical-align: -.22em; display: inline-block; }
/* Sobra do mês: brilho que passa de tempos em tempos */
.flow-row.total { position: relative; overflow: hidden; }
.flow-row.total::after { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.20), transparent); transform: skewX(-18deg); animation: shine 5.5s ease-in-out infinite; }
@keyframes shine { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }
/* Insights entram em sequência */
.insights .insight { animation: fadeInUp .45s ease both; }
.insights .insight:nth-child(1) { animation-delay: .05s; }
.insights .insight:nth-child(2) { animation-delay: .14s; }
.insights .insight:nth-child(3) { animation-delay: .23s; }
.insights .insight:nth-child(4) { animation-delay: .32s; }

/* ===== Sem barras de scroll (mantém o scroll funcionando) ===== */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===== Meus cartões ===== */
.card-list { padding: 2px 0; }
.card-line { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.card-line:last-child { border-bottom: 0; }
.card-line:active { background: var(--card-2); }
.card-ic { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(11,61,46,.25); }
.card-line .desc { flex: 1; min-width: 0; }
.card-line .name { font-weight: 700; font-size: 15px; }
.card-line .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card-line .sub b { color: var(--ink); font-weight: 800; }
.card-edit { font-size: 12px; color: var(--accent); font-weight: 800; }
.card-add { padding: 12px 16px 16px; }
.card-add .btn { width: 100%; }
.impact-sub { margin-top: 9px; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.45; }
.impact-sub b { color: var(--ink); font-weight: 800; }

/* ===== Subtítulo de seção ===== */
.h3-sub { font-style: normal; font-weight: 600; color: var(--muted); font-size: 11.5px; }

/* ===== Medidor: pulsação suave contínua ===== */
@keyframes gaugePulse { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
.g-arc { animation: gaugePulse 2.6s ease-in-out infinite; }

/* ===== Impacto do lançamento (posso gastar?) ===== */
.impact { margin-top: 6px; padding: 13px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line);
  animation: popIn .2s ease both; }
.impact-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; }
.impact-row b { font-size: 17px; letter-spacing: -.3px; }
.impact.ok .impact-row b { color: var(--accent); }
.impact.bad { background: rgba(229,72,77,.09); border-color: rgba(229,72,77,.45); }
.impact.bad .impact-row b { color: var(--red); }
.impact-warn { margin-top: 9px; font-size: 12.5px; color: var(--red); font-weight: 700; line-height: 1.45; }
.impact-warn b { font-weight: 800; }

/* ===== Splash de abertura ===== */
#splash { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  /* camada de GPU própria → compõe ACIMA da tabbar (que tem translateZ(0)); senão a tabbar pinta por cima no rodapé no iOS (flash) */
  transform: translateZ(0); -webkit-transform: translateZ(0); will-change: opacity, transform; }
/* enquanto o splash está na tela, esconde tabbar e + → zero flash no rodapé na abertura */
body.splash-on .tabbar, body.splash-on #fab { visibility: hidden; }
#splash .splash-bg { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(72% 58% at 50% 38%, #0e4a36 0%, #08231a 56%, #05110c 100%);
  transition: transform .95s cubic-bezier(.76,0,.24,1); }
#splash.gone { opacity: 0; pointer-events: none; transition: opacity .5s ease; }

/* ---- Nome como protagonista (moeda removida) ---- */
#splash .splash-name { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 42px;
  letter-spacing: 1px; text-shadow: 0 2px 24px rgba(75,210,150,.38);
  opacity: 0; animation: splashName .8s cubic-bezier(.2,.9,.2,1.2) .15s both; }
/* halo verde suave respirando atrás do nome */
#splash .splash-name::after { content: ""; position: absolute; inset: -90% -45%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(75,210,150,.30) 0%, transparent 62%); filter: blur(14px);
  animation: splashGlow 2.2s ease-in-out infinite; }
#splash .splash-tag { position: relative; z-index: 1; color: rgba(255,255,255,.62); font-weight: 600; font-size: 13px;
  letter-spacing: .5px; margin-top: 2px; opacity: 0; animation: splashFade .6s ease .65s forwards; }

/* ---- SAÍDA (reveal): cortina verde recua revelando o app ---- */
#splash.reveal { pointer-events: none; }
#splash.reveal .splash-bg { transform: translateY(101%); }
#splash.reveal .splash-name, #splash.reveal .splash-tag { animation: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.6,0,.25,1); opacity: 0; transform: translateY(-26px); }

@keyframes splashName { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes splashFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes splashGlow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.08); } }
/* barra de pré-carga (sutil) na abertura */
/* carregamento em CÍRCULO (spinner) — aparece ~.95s e SOME por completo antes da abertura (não encavala) */
#splash .splash-loader { position: relative; z-index: 1; width: 38px; height: 38px; margin-top: 26px;
  opacity: 0; animation: splashFade .6s ease .95s forwards; }
#splash .splash-loader span { position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.14); border-top-color: rgba(95,225,165,.95);
  animation: splashSpin .8s linear infinite; }
@keyframes splashSpin { to { transform: rotate(360deg); } }
/* ao fechar: o spinner sai PRIMEIRO (encolhe + esvaece), depois é que o app é revelado */
#splash.loading-out .splash-loader { animation: splashLoaderOut .3s ease forwards; }
@keyframes splashLoaderOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.7); } }
#splash.reveal .splash-loader { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #splash .splash-loader span { animation: none; border-top-color: rgba(95,225,165,.6); } }

.hidden { display: none !important; }

/* ============================================================
   v3.9.0 — pop-up de contas, selos por proximidade, multi-ano
   ============================================================ */

/* ----- "Pagar": linha esvaece e a lista encolhe (≤ ~0,7s) ----- */
.list-row { overflow: hidden; }
.list-row.paying, .venc-row.paying { animation: payOut .6s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }
@keyframes payOut {
  0%   { opacity: 1; transform: translateX(0);    max-height: 90px; }
  45%  { opacity: 0; transform: translateX(46px);  max-height: 90px; }
  100% { opacity: 0; transform: translateX(46px);  max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
}

/* ----- Separador de ano na barra de meses (Jan/27 em diante) ----- */
.month-chip.yr { margin-left: 16px; position: relative; }
.month-chip.yr::before { content: ""; position: absolute; left: -9px; top: 18%; height: 64%; width: 2px; border-radius: 2px;
  background: rgba(255,255,255,.28); }

/* ----- Checkbox "necessário" (fica fora da dica de economia) ----- */
.nec-check { align-items: flex-start; padding: 11px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 13px; }
.nec-check input { margin-top: 1px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.nec-check span { font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.4; text-align: left; }

/* ======================== POP-UP de contas ======================== */
/* saída com animação (esvaece + encolhe) */
.modal.center.closing { animation: ovOut .45s ease forwards; }
.modal.center.closing .modal-card { animation: cardOut .42s ease forwards; }
@keyframes ovOut   { to { opacity: 0; } }
@keyframes cardOut { to { opacity: 0; transform: scale(.97); } }

/* a caixa: borda suave girando + permite botões saltarem pra fora */
.alert-card { position: relative; overflow: visible; padding-bottom: 34px; }
.alert-card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--simang), transparent 0deg, rgba(21,194,102,.55) 70deg, rgba(18,199,255,.5) 120deg, transparent 200deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: simSpin 5s linear infinite; opacity: .85;
}
.alert-card > * { position: relative; z-index: 1; }

/* sino: balança sem parar + sombra "3D" pulsando atrás */
.alert-emoji { font-size: 46px; line-height: 1; display: inline-block; position: relative; transform-origin: 50% 8%;
  animation: bellSwing 2.4s ease-in-out infinite; filter: drop-shadow(0 7px 9px rgba(0,0,0,.30)); }
.alert-emoji::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 48px; height: 13px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.30), transparent 70%); border-radius: 50%; z-index: -1;
  animation: bellShadow 2.4s ease-in-out infinite; }
@keyframes bellSwing { 0%,100% { transform: rotate(0); } 14% { transform: rotate(15deg); } 30% { transform: rotate(-12deg); }
  46% { transform: rotate(8deg); } 62% { transform: rotate(-5deg); } 78% { transform: rotate(2deg); } }
@keyframes bellShadow { 0%,100% { transform: translateX(-50%) scaleX(1);   opacity: .5; }
  50% { transform: translateX(-50%) scaleX(.66); opacity: .28; } }

/* botões "saltados" pra fora da caixa, com sombra forte e toque tátil */
.alert-card .modal-actions { margin: 18px 6px -26px; gap: 12px; }
.alert-card .modal-actions .btn { border-radius: 16px; padding: 15px 14px; box-shadow: 0 12px 26px rgba(8,40,28,.30);
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease; }
.alert-card .modal-actions .btn.primary { box-shadow: 0 14px 30px rgba(11,61,46,.45); }
.alert-card .modal-actions .btn.ghost { box-shadow: 0 12px 24px rgba(8,40,28,.16); }
.alert-card .modal-actions .btn:hover { transform: translateY(-2px); }
.alert-card .modal-actions .btn:active { transform: translateY(2px) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .alert-emoji, .alert-emoji::after, .alert-card::before, .venc-badge { animation: none !important; }
}

/* ======================== POP-UP de SAUDAÇÃO (abertura) ======================== */
.greet-card { position: relative; overflow: visible; text-align: center; padding-bottom: 24px; }
.greet-card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--simang), transparent 0deg, rgba(21,194,102,.55) 70deg, rgba(18,199,255,.5) 120deg, transparent 200deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: simSpin 5s linear infinite; opacity: .85;
}
.greet-card > * { position: relative; z-index: 1; }
/* confirmação (ex.: Sair do app) usa greet-card: os botões NÃO devem grudar na borda
   (o greet-card não tem rodapé sticky) → margem normal, com respiro lateral do card. */
.greet-card > .modal-actions { position: static; margin: 16px 0 0; padding: 0; gap: 12px; }
.greet-card > .modal-actions .btn { border-radius: 14px; padding: 14px 12px; }
.greet-emoji { display: block; }
.greet-emoji .emoji-anim { width: 76px; height: 76px; display: block; margin: 2px auto 4px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.32)); }
#greetTitle { text-align: center; margin: 6px 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.greet-card .greet-actions { display: flex; justify-content: center; margin: 22px 0 8px; }
.greet-card .greet-actions .btn {
  min-width: 200px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 16px; padding: 15px 30px; font-weight: 800; cursor: pointer;
  box-shadow: 0 14px 30px rgba(11,61,46,.45);
  transition: transform .12s cubic-bezier(.34,1.4,.4,1), box-shadow .2s ease, filter .2s ease;
}
.greet-card .greet-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(11,61,46,.5); filter: brightness(1.05); }
.greet-card .greet-actions .btn:active { transform: translateY(1px) scale(.97); box-shadow: 0 8px 18px rgba(11,61,46,.4); }
/* badge do contador (3 → 2 → 1) ao lado da escrita, dentro do botão */
.greet-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: rgba(255,255,255,.22); color: #fff; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.greet-count.tick { animation: greetTick .42s cubic-bezier(.34,1.5,.4,1); }
@keyframes greetTick { 0% { transform: scale(.55); opacity: .4; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .greet-count.tick { animation: none; } }
/* SAÍDA: a caixa sobe do meio da tela e vai encolhendo aos poucos pra cima */
.modal.center.greet-out { animation: ovOut .55s ease forwards; }
.modal.center.greet-out .modal-card { animation: greetUp .6s cubic-bezier(.4,0,.2,1) forwards; transform-origin: 50% 0%; }
@keyframes greetUp {
  0%   { opacity: 1; transform: translateY(0)      scale(1);   }
  100% { opacity: 0; transform: translateY(-46vh) scale(.18); }
}
@media (prefers-reduced-motion: reduce) {
  .greet-card::before { animation: none !important; }
  .modal.center.greet-out .modal-card { animation: cardOut .3s ease forwards; }
}

/* ----- Pagar sem "piscar": no próximo render, blocos não re-animam a entrada ----- */
#view.no-anim > *:not(.rv-pane), #view.no-anim .insights .insight { animation: none !important; }

/* ----- Seletor de ano no Resumo (multi-ano) ----- */
.year-pick { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.yr-chip { flex: 0 0 auto; background: var(--card); color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 800; font-family: var(--font); letter-spacing: .2px;
  transition: transform .14s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.yr-chip:active { transform: scale(.94); }
.yr-chip.active { background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(11,61,46,.3); }

/* ----- Selo "necessário" ao lado do valor (✓), deslocando o valor à esquerda sem ocupar muito ----- */
.amt-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex: 0 0 auto; }
.nec-flag { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: rgba(21,194,102,.2);
  color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900;
  box-shadow: 0 0 0 1px rgba(21,194,102,.28) inset; }

/* ===== Aba Gráficos (toggle Resumo/Gráficos + drill-down + insights) ===== */
.view-toggle { position: relative; display: flex; gap: 6px; background: var(--card-2); border: 1px solid var(--line); border-radius: 15px; padding: 5px; margin-bottom: 16px; touch-action: pan-y; }
.vt-btn { position: relative; z-index: 1; flex: 1; padding: 10px 6px; border: 0; border-radius: 11px; background: transparent; color: var(--muted);
  font-family: var(--font); font-size: 13px; font-weight: 800; white-space: nowrap; transition: color .25s ease; }
/* 4 opções (Resumo · Gráficos · Insights · Metas): aperta fonte/espaços pra caber no celular */
.view-toggle.vt-4 { gap: 3px; }
.view-toggle.vt-4 .vt-btn { font-size: 11.5px; padding: 9px 2px; letter-spacing: -.2px; }
.vt-btn.active { color: #fff; }                 /* o "ativo" agora é a lâmina de vidro deslizante */
.vt-btn.locked { opacity: .6; }                 /* Gráficos/Insights sem acesso no plano (🔒 no rótulo) */
/* 💡 Insights — opção em AZUL (destaca dos verdes) */
.vt-ins { color: #4a90ff; }   /* azul um pouco mais forte → melhor contraste no escuro e no claro */
.vt-ins.active { color: #fff; }
/* pulsa (chama atenção) até ser aberta a 1ª vez */
.vt-ins.pulse { animation: vtInsPulse 1.7s ease-in-out infinite; }
@keyframes vtInsPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(47,127,240,.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 7px rgba(47,127,240,0); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .vt-ins.pulse { animation: none; } }

/* respiro horizontal consistente (16px) p/ todo o conteúdo dos cards de gráfico */
.g-card > .hint { padding: 0 16px; margin: 0 0 12px !important; text-align: left; }
.g-card .chart-wrap { padding: 4px 14px 16px; }

/* simulador num painel próprio, separado do gráfico */
.g-sim { margin: 0 16px 14px; padding: 13px 13px 11px; background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  position: relative; z-index: 2; }   /* acima do canvas do gráfico — campos sempre clicáveis */
.g-sim .field-row { align-items: flex-end; }
.g-sim .field { margin: 0; -webkit-user-select: auto; user-select: auto; }   /* iOS: label dentro de .section-card (user-select:none) travava o foco do input */
.g-sim input, .g-sim select {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  touch-action: manipulation; pointer-events: auto; position: relative; z-index: 1;
}
.g-sim select { cursor: pointer; }
.g-sim .sim-clear { margin: 0 !important; align-self: flex-end; width: 48px; height: 48px; padding: 0; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 18px; }

.g-detail { margin-top: 6px; padding: 0 16px; }
.drill-in { animation: drillFade .35s ease; }
@keyframes drillFade { from { opacity: .35; } to { opacity: 1; } }
.det-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; margin: 10px 0 10px; }
.det-head b { color: var(--accent); letter-spacing: -.3px; }
/* Top 5 + caixa rolável (drill-down de despesas/receitas) */
.det-more-hint { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; font-size: 11.5px; font-weight: 800; }
.det-more-hint span { color: var(--ink); letter-spacing: -.2px; }
.det-more-hint em { color: var(--muted); font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.det-more-hint em::after { content: "⌄"; font-size: 15px; line-height: 0; animation: moreBounce 1.4s ease-in-out infinite; }
@keyframes moreBounce { 0%,100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.det-scroll-wrap { position: relative; }
.det-scroll { overflow: visible; }
.det-scroll-wrap.scrollable .det-scroll { max-height: 296px; overflow-y: auto; overflow-x: hidden; /* (sem -webkit-overflow-scrolling: touch → não vaza dos cantos no iOS) */ padding-right: 4px; }
.det-scroll-wrap.scrollable::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--card)); border-radius: 0 0 8px 8px; }
.det-scroll::-webkit-scrollbar { width: 5px; }
.det-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.det-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.det-scroll::-webkit-scrollbar-track { background: transparent; }

.det-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); animation: detIn .42s cubic-bezier(.2,.8,.2,1) both; }
.det-row:last-child { border-bottom: 0; }
@keyframes detIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.det-rank { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--muted); }
.det-rank.top1, .det-rank.top2, .det-rank.top3 { background: transparent; border: 0; font-size: 16px; width: 22px; }
.det-main { flex: 1; min-width: 0; }
.det-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det-nec { color: var(--accent); font-weight: 900; font-size: 11px; }
.det-bar { height: 6px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 5px; }
.det-fill { height: 100%; border-radius: 6px; animation: detGrow .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes detGrow { from { width: 0 !important; } }
.det-val { flex: 0 0 auto; text-align: right; font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.det-cat { display: block; font-size: 10px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.det-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dk { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; animation: detIn .4s ease both; }
.dk span { display: block; font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.dk b { font-size: 16px; letter-spacing: -.3px; }
.dk.big { grid-column: 1 / -1; }
.dk b.pos { color: var(--accent); } .dk b.neg { color: var(--red); }

.g-insights { margin-top: 14px; padding: 0 16px 16px; }
.ins-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; animation: fadeInUp .4s ease both; }
.ins-title { font-weight: 800; font-size: 13.5px; margin-bottom: 8px; }
.ins-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ins-tbl td { padding: 6px 0; border-bottom: 1px dashed var(--line); color: var(--muted); font-weight: 600; }
.ins-tbl tr:last-child td { border-bottom: 0; }
.ins-tbl td:last-child { text-align: right; font-weight: 800; color: var(--ink); }
.ins-narr { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.ins-narr b { font-weight: 800; }
.g-empty { text-align: center; color: var(--muted); padding: 18px; font-size: 13px; }

/* 💳 seção de cartão de crédito nos Gráficos */
.gc-filter { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 16px; padding: 0 16px; }
.gc-filter label { font-size: 12px; color: var(--muted); font-weight: 800; letter-spacing: .2px; }
/* select TEMATIZADO (sem o nativo branco do iOS): caixa escura, seta própria, com folga interna */
.gc-filter .sel, .ritmo-filter .sel {
  width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 40px 13px 14px; font-size: 15px; font-weight: 700; font-family: var(--font); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b9a92' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color .2s ease, box-shadow .2s ease; }
.gc-filter .sel:focus, .ritmo-filter .sel:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47,127,240,.22); }
.gc-intel { margin: 14px 0 6px; padding: 0 16px; }
.gc-intel:empty { display: none; }
.gc-intel-card { padding: 16px; }
.det-row.gc-row { position: relative; cursor: pointer; padding: 10px 24px 10px 6px; border-radius: 12px; transition: background .18s ease, transform .1s ease, box-shadow .18s ease; }
.det-row.gc-row:active { transform: scale(.99); }
.det-row.gc-row.sel { background: rgba(47,127,240,.14); box-shadow: inset 0 0 0 1px rgba(47,127,240,.42); border-bottom-color: transparent; }
.gc-go { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; font-weight: 800; line-height: 1; transition: color .18s ease; }
.det-row.gc-row.sel .gc-go { color: var(--blue); }
.gc-intel-card .ins-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-intel-card .ins-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-back { flex: 0 0 auto; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-family: var(--font); font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 10px; cursor: pointer; transition: transform .1s ease, background .18s ease; }
.gc-back:hover { border-color: var(--blue); }
.gc-back:active { transform: scale(.95); }
.gc-prog-row { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); font-weight: 700; margin: 4px 0 10px; }
.gc-prog-row .gc-prog { flex: 1; height: 8px; margin-top: 0; }


/* ===== Ritmo de gastos (1º gráfico) ===== */
.ritmo-filter { padding: 0 16px; margin: 0 0 12px; }
.ritmo-head { text-align: left; margin: 2px 0 12px; padding: 0 16px; }
.ritmo-big { font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; color: var(--ink); }
.ritmo-big .ritmo-dir { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.ritmo-badge { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 8px; }
.ritmo-badge.up { background: rgba(229,72,77,.16); color: var(--red); }
.ritmo-badge.down { background: rgba(21,194,102,.16); color: var(--accent); }
.ritmo-sub { margin-top: 7px; font-size: 12px; color: var(--muted); }
.ritmo-sub b { color: var(--ink); }
/* resumo do gasto diário (responde ao dedo no gráfico) */
.ritmo-scrub { margin: 6px 16px 14px; padding: 16px 15px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); }
.ritmo-scrub .rs-day { font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.ritmo-scrub .rs-day i { color: var(--muted); font-weight: 600; font-style: normal; font-size: 11.5px; }
/* mesmo padrão da caixinha Orçado×Realizado: rótulo em cima, valor embaixo, com respiro (sem grudar na borda) */
.ritmo-scrub .rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.ritmo-scrub .rs-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ritmo-scrub .rs-lab { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ritmo-scrub .rs-cell b { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ritmo-scrub .rs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }