@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:300 700;src:url('../assets/fonts/DMSans-Variable.ttf') format('truetype')}
@font-face{font-family:'DM Serif Display';font-style:normal;font-display:swap;font-weight:400;src:url('../assets/fonts/DMSerifDisplay-Regular.ttf') format('truetype')}
@font-face{font-family:'Material Icons Round';font-style:normal;font-display:block;font-weight:400;src:url('../assets/fonts/material-icons-round-latin-400-normal.woff2') format('woff2')}
.material-icons-round{
  font-family:'Material Icons Round';font-weight:normal;font-style:normal;font-size:24px;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;
  direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased
}
:root{
  /* Mutuu — Índigo Elétrico v4 (anexos/mutuu_paletas_v4.html). */
  --electric-canvas:#F5F3FF;
  --electric-ink:#1E1B4B;
  --electric-700:#3730A3;
  --electric-600:#4338CA;
  --electric-100:#E0E7FF;
  --electric-night:#0F0F1A;
  --electric-night-surface:#1A1A2E;
  --electric-night-raised:#252540;
  --electric-400:#818CF8;
  --electric-night-ink:#F5F5F0;
  --expense-day:#C1392B;
  --expense-night:#E07366;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-body:14px;--text-base:16px;
  --text-lg:20px;--text-xl:24px;--text-2xl:32px;--text-display:40px;
  /* Entrelinha por papel: numeros de destaque compactos, texto corrido arejado. */
  --leading-tight:1.1;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.65;
  /* Compensacao optica: quanto maior o corpo, mais fechado o espacamento. */
  --track-display:-.024em;--track-tight:-.014em;--track-label:.06em;
  --font-body:'DM Sans',sans-serif;--font-display:'DM Serif Display',serif;
  --radius-control:8px;--radius-button:12px;--radius-card:16px;
  --radius-panel:20px;--radius-modal:24px;--radius-pill:999px;
  --motion-fast:120ms;--motion-base:200ms;--motion-medium:280ms;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1);
  --z-base:0;--z-raised:10;--z-sticky:30;--z-fab:50;
  --z-drawer:150;--z-modal:200;--z-toast:500;--z-pdf:600;
  --z-tutorial:800;--z-mu:820;--z-tour:850;
  /* Camada de bloqueio, o topo da escala. Estava espalhada em literais (9000, 9500, 9999,
     10000, 99999) que não conversavam com a escala documentada em tokens.md. */
  --z-gate:9000;--z-biometric:9500;--z-login:9800;--z-skip-link:9900;--z-splash:10000;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* background aqui, e nao so no body: antes de o body existir o canvas da pagina fica
   com o fundo padrao da WebView, que e branco. Era um dos piscos da abertura. */
html{font-size:16px;background:var(--bg);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);font-synthesis:none;background:var(--bg);color:var(--fg);min-height:100vh;overflow-x:hidden;line-height:1.5;transition:background-color var(--motion-base) var(--ease-soft),color var(--motion-base) var(--ease-soft);
  /* Safe area para Android WebView com notch / barra de navegação.
     -6px aperta a folga no topo (APK edge-to-edge) sem encostar na barra; no web
     env=0, entao max() mantem 0 (sem mudanca). */
  padding-top:max(0px, env(safe-area-inset-top,0px) - 6px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}

[data-theme="light"]{
  color-scheme:light;
  --surface-canvas:var(--electric-canvas);--surface-raised:#FFFFFF;--surface-overlay:#FFFFFF;
  --surface-sunken:var(--electric-100);--surface-subtle:rgba(224,231,255,.42);--surface-inverse:var(--electric-ink);
  --text-primary:var(--electric-ink);--text-secondary:rgba(30,27,75,.68);--text-tertiary:rgba(30,27,75,.5);--text-on-accent:var(--electric-night-ink);
  --border-subtle:rgba(67,56,202,.09);--border-default:rgba(67,56,202,.16);--border-strong:rgba(67,56,202,.28);
  --interactive-primary:var(--electric-600);--interactive-hover:var(--electric-700);--interactive-active:var(--electric-ink);--focus-ring:rgba(67,56,202,.28);
  --elevation-card:0 1px 1px rgba(30,27,75,.04),0 6px 20px rgba(67,56,202,.06);
  --elevation-raised:0 2px 4px rgba(30,27,75,.05),0 16px 40px rgba(67,56,202,.1);
  --elevation-selected:0 1px 2px rgba(30,27,75,.09),0 10px 22px rgba(67,56,202,.16);
  --bg:var(--surface-canvas);--bg2:var(--surface-subtle);--surface:var(--surface-raised);--surface2:var(--surface-subtle);
  --fg:var(--text-primary);--fg2:var(--text-secondary);--border:var(--border-default);
  --primary:var(--interactive-primary);--primary-light:var(--electric-100);--primary-dark:var(--interactive-hover);--on-primary:var(--text-on-accent);
  --accent:var(--electric-100);--income:var(--electric-600);--income-bg:var(--electric-100);
  --expense:var(--expense-day);--expense-bg:rgba(193,57,43,.1);
  --warning:var(--electric-700);--warning-bg:var(--electric-100);
  --hero-bg:var(--electric-600);--hero-amount:var(--electric-night-ink);--hero-income:var(--electric-night-ink);--hero-expense:var(--electric-night-ink);
  /* Compartimento dentro do hero (os dois mini-cards, os botões de ação). No claro o hero
     é índigo saturado com texto quase branco: clarear separa. No escuro o hero já é escuro
     e o texto é o índigo claro, então clarear APROXIMA os dois - era o que derrubava
     Receitas/Despesas do mês para 4.13-4.27 contra o piso de 4.5. Ver o par no bloco dark. */
  --hero-tint:rgba(255,255,255,.1);--hero-tint-strong:rgba(245,245,240,.14);--hero-tint-hover:rgba(255,255,255,.28);
  --toast-info-bg:var(--electric-ink);--toast-info-fg:var(--electric-night-ink);
  --shadow:rgba(30,27,75,.07);--shadow-md:rgba(30,27,75,.12);--radius:var(--radius-card);--radius-sm:var(--radius-control)
}
[data-theme="dark"]{
  color-scheme:dark;
  --surface-canvas:var(--electric-night);--surface-raised:var(--electric-night-surface);--surface-overlay:var(--electric-night-raised);
  --surface-sunken:var(--electric-night);--surface-subtle:var(--electric-night-raised);--surface-inverse:var(--electric-night-ink);
  --text-primary:var(--electric-night-ink);--text-secondary:rgba(245,245,240,.7);--text-tertiary:rgba(245,245,240,.5);--text-on-accent:var(--electric-night);
  --border-subtle:rgba(129,140,248,.1);--border-default:rgba(129,140,248,.2);--border-strong:rgba(129,140,248,.34);
  --interactive-primary:var(--electric-400);--interactive-hover:var(--electric-100);--interactive-active:var(--electric-600);--focus-ring:rgba(129,140,248,.34);
  --elevation-card:inset 0 1px 0 rgba(245,245,240,.05),0 4px 16px rgba(0,0,0,.24);
  --elevation-raised:inset 0 1px 0 rgba(245,245,240,.08),0 12px 34px rgba(0,0,0,.36);
  --elevation-selected:inset 0 1px 0 rgba(245,245,240,.12),0 8px 20px rgba(0,0,0,.42);
  --bg:var(--surface-canvas);--bg2:var(--surface-sunken);--surface:var(--surface-raised);--surface2:var(--surface-subtle);
  --fg:var(--text-primary);--fg2:var(--text-secondary);--border:var(--border-default);
  --primary:var(--interactive-primary);--primary-light:var(--electric-night-raised);--primary-dark:var(--interactive-hover);--on-primary:var(--text-on-accent);
  --accent:var(--electric-400);--income:var(--electric-400);--income-bg:var(--electric-night-raised);
  /* Tint de despesa ESCURO, não clareado. rgba(224,115,102,.12) era o tint do tema claro
     reaproveitado: sobre a superfície elevada ele subia para rgb(59,46,69) e o próprio
     --expense-night por cima ficava em 4.08, abaixo do piso - no botão "Despesa" e nos dois
     blocos de "AÇÃO IRREVERSÍVEL". Misturado ao fundo noturno, o vermelho continua
     identificando a área e o texto volta a 4.88. */
  --expense:var(--expense-night);--expense-bg:color-mix(in srgb,var(--expense-night) 18%,var(--electric-night));
  --warning:var(--electric-400);--warning-bg:var(--electric-night-raised);
  --hero-bg:var(--electric-night-surface);--hero-amount:var(--electric-400);--hero-income:var(--electric-400);--hero-expense:var(--expense-night);
  /* No escuro o compartimento AFUNDA em vez de subir: tinta de --electric-night sobre a
     superfície do hero. Mantém a separação visual e devolve o contraste (medido: 4.27→6.1
     no índigo, 4.13→5.9 no vermelho de despesa). Superfície escura recua, não clareia -
     é a mesma regra já registrada em tokens.md para controle ativo no escuro. */
  --hero-tint:rgba(15,15,26,.55);--hero-tint-strong:rgba(15,15,26,.5);--hero-tint-hover:rgba(15,15,26,.68);
  --toast-info-bg:var(--electric-night-raised);--toast-info-fg:var(--electric-night-ink);
  --shadow:rgba(15,15,26,.24);--shadow-md:rgba(15,15,26,.38);--radius:var(--radius-card);--radius-sm:var(--radius-control)
}

h1,h2,h3,h4,.page-title,.modal-title{text-wrap:balance}
p,li,dd,.page-subtitle,.empty-sub{text-wrap:pretty}
button,input,select,textarea{font:inherit}
button,a,[role="button"],summary{touch-action:manipulation}
:where(.balance-amount,.balance-mini-val,.stat-value,.finance-overview-balance,.finance-overview-metric strong,.tx-amount,.account-card-balance,.goal-progress-copy strong,.goals-hero-top strong,.finance-summary-value,.goal-achievements-summary strong,.completed-goal-item b,.cashflow-block-values b,.account-detail-row strong,.bar-value,.partner-code){font-variant-numeric:tabular-nums}
/* Compensacao optica dos numeros grandes: sem isso o DM Serif Display abre demais
   acima de 24px e o valor perde a leitura de bloco unico. */
:where(.balance-amount,.stat-value,.finance-overview-balance,.goals-hero-top strong,.account-card-balance,.blocking-overlay-title,.biometric-lock-title,.page-title){letter-spacing:var(--track-display);line-height:var(--leading-tight)}
:where(.modal-title,.finance-summary-value,.goal-progress-copy strong,.goal-achievements-summary strong,.brand-name,.month-selector-trigger #txMonthLabel){letter-spacing:var(--track-tight)}
/* Texto corrido: entrelinha maior que a da interface densa. */
:where(.page-subtitle,.empty-sub,.faq-a,.login-note,.login-legal,.blocking-overlay-copy,.tx-context-note,.account-detail-hint,.ad-unlock-main small){line-height:var(--leading-relaxed)}
/* Rotulos em caixa alta: tracking unico em todo o app. */
:where(.nav-label,.mobile-drawer-title,.faq-section-title,.cashflow-control-label,.goals-eyebrow,.cashflow-block-values small,.cashflow-mobile-view-toggle>span){letter-spacing:var(--track-label);line-height:var(--leading-snug)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:8px;left:8px;z-index:var(--z-skip-link);padding:10px 14px;border-radius:var(--radius-button);background:var(--primary);color:var(--on-primary);font-weight:700;transform:translateY(-160%);transition:transform var(--motion-fast) var(--ease-out)}
.skip-link:focus{transform:translateY(0)}

::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── LAYOUT ── */
.app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
@media(max-width:768px){.app-shell{grid-template-columns:1fr}}

/* ── SIDEBAR ── */
.sidebar{background:color-mix(in srgb,var(--surface) 88%,var(--primary-light));border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:var(--z-raised)}
@media(max-width:768px){
  .sidebar{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;padding:0;border-right:none;border-top:1px solid var(--border-default);background:color-mix(in srgb,var(--surface) 94%,var(--primary-light));z-index:100;padding-bottom:env(safe-area-inset-bottom,0px)}
}
.sidebar-brand{padding:0 20px 20px;border-bottom:1px solid var(--border-subtle);margin-bottom:14px;display:flex;align-items:center;gap:10px}
@media(max-width:768px){.sidebar-brand{display:none}}
.brand-icon{width:38px;height:38px;border-radius:10px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--on-primary);font-size:20px}
.brand-name{font-family:'DM Serif Display',serif;font-size:14px;line-height:1.25;color:var(--fg)}
.brand-name small{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--fg2);font-weight:400;display:block}
.nav-section{padding:0 12px;margin-bottom:8px}
.nav-label{font-size:var(--text-2xs);font-weight:700;color:var(--text-tertiary);text-transform:uppercase;padding:0 10px;margin-bottom:8px}
@media(max-width:768px){.nav-label{display:none}}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:var(--radius-button);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);color:var(--fg2);font-size:14px;font-weight:600;border:none;background:none;width:100%;text-align:left}
.nav-item::before{content:'';position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 var(--radius-pill) var(--radius-pill) 0;background:var(--primary);opacity:0;transform:scaleY(.35);transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.nav-item:hover{background:var(--surface-subtle);color:var(--fg)}
.nav-item.active{background:var(--primary-light);color:var(--primary)}
.nav-item.active::before{opacity:1;transform:scaleY(1)}
.nav-item .material-icons-round{font-size:20px}
@media(max-width:768px){
  .nav-section{padding:0;margin:0;flex:1;display:flex}
  .nav-item{flex-direction:column;gap:2px;padding:8px 2px;font-size:10px;font-weight:700;border-radius:0;justify-content:center;min-height:60px;letter-spacing:.01em}
  .nav-item::before{left:50%;right:auto;top:0;bottom:auto;width:22px;height:3px;border-radius:0 0 var(--radius-pill) var(--radius-pill);transform:translateX(-50%) scaleX(.35)}
  .nav-item.active::before{transform:translateX(-50%) scaleX(1)}
  .nav-item .material-icons-round{font-size:24px}
  .nav-item.active{background:none;color:var(--primary)}
  .nav-item.active .nav-icon-wrap{background:var(--primary-light);border-radius:var(--radius-pill)}
  .nav-icon-wrap{width:44px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:background-color var(--motion-base) var(--ease-out)}
  .nav-item:not(.active) .nav-icon-wrap{background:transparent}
  .nav-item:hover .nav-icon-wrap{background:var(--bg2)}
}

/* Mobile extra menu drawer */
.mobile-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(15,15,26,.58);z-index:var(--z-drawer);backdrop-filter:blur(2px)}
.mobile-drawer{position:fixed;bottom:0;left:0;right:0;background:var(--surface-overlay);border:1px solid var(--border-default);border-bottom:0;border-radius:var(--radius-modal) var(--radius-modal) 0 0;padding:16px 16px calc(80px + env(safe-area-inset-bottom,0px));z-index:calc(var(--z-drawer) + 1);visibility:hidden;transform:translateY(100%);transition:transform var(--motion-medium) var(--ease-out),visibility 0s linear var(--motion-medium);box-shadow:var(--elevation-raised)}
.mobile-drawer.open{visibility:visible;transform:translateY(0);transition-delay:0s}
.mobile-drawer-handle{position:relative;display:block;width:56px;height:44px;padding:0;border:0;background:transparent;margin:0 auto;cursor:pointer}
.mobile-drawer-handle::before{content:'';position:absolute;left:10px;right:10px;top:20px;height:4px;border-radius:2px;background:var(--border)}
.mobile-drawer-title{font-size:var(--text-2xs);font-weight:700;color:var(--fg2);text-transform:uppercase;margin-bottom:12px}
.mobile-drawer-item{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:500;color:var(--fg);border:none;background:none;width:100%;text-align:left;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.mobile-drawer-item:hover{background:var(--bg2)}
.mobile-drawer-item .material-icons-round{font-size:22px;color:var(--fg2)}
/* Pill de status no drawer mobile */
.mobile-sync-pill{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg2);border-radius:var(--radius-sm);margin-bottom:16px;font-size:var(--text-xs);color:var(--fg2);font-weight:500;border:1px solid var(--border)}
.mobile-sync-pill .sync-dot{flex-shrink:0}
/* Badge de status no botão Mais da nav */
.nav-more-badge{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--income);border:2px solid var(--surface);transition:background .3s}
.nav-more-badge.offline{background:var(--warning)}
.nav-more-badge.error{background:var(--expense)}
.nav-more-badge.syncing{animation:pulse 1s infinite}
/* Animação reveal do botão demo */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.sidebar-footer{margin-top:auto;padding:16px 12px 0;border-top:1px solid var(--border)}
@media(max-width:768px){.sidebar-footer{display:none}}
@media(min-width:769px){.mobile-only{display:none!important}}
@media(max-width:768px){.desktop-only{display:none!important}}
.sidebar-user{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;margin-bottom:8px;border:0;border-radius:var(--radius-button);background:transparent;color:var(--fg);font-family:var(--font-body);text-align:left;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out)}
.sidebar-user:hover{background:var(--surface-subtle)}
.sidebar-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--on-primary);font-size:14px;font-weight:700;flex-shrink:0;overflow:hidden}
.sidebar-avatar img{width:100%;height:100%;object-fit:cover}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{font-size:var(--text-body);font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-email{font-size:var(--text-xs);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-user-avatar-button{width:44px;height:44px;padding:0;border:2px solid var(--border-default);border-radius:50%;background:var(--primary);color:var(--on-primary);overflow:hidden;cursor:pointer;flex-shrink:0;box-shadow:0 0 0 2px var(--surface);transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.mobile-user-avatar-button:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
.mobile-user-avatar-button img{width:100%;height:100%;object-fit:cover}
.theme-toggle{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--fg2);border:none;background:none;width:100%;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.theme-toggle:hover{background:var(--bg2);color:var(--fg)}
.sync-indicator{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:11px;color:var(--fg2)}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--income);flex-shrink:0}
.sync-dot.syncing{animation:pulse 1s infinite}
.sync-dot.offline{background:var(--warning)}
.sync-dot.error{background:var(--expense)}

/* -- MAIN -- */
.main{background:var(--bg);overflow-y:auto;min-height:100vh;min-width:0}
@media(max-width:768px){.main{min-height:calc(100vh - 60px);padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}}
/* Tabela larga com scroll horizontal dentro de card arredondado (overflow:hidden).
   No Android WebView esse scroller aninhado forca repaint da tela INTEIRA ao rolar
   (flicker, visivel no Fluxo de Caixa). Isolar numa camada de GPU propria evita o
   repaint global. NAO usar touch-action aqui (trava o scroll vertical). */
.hscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;transform:translateZ(0);backface-visibility:hidden}
.page{display:none;padding:clamp(24px,3vw,36px);max-width:1120px;margin:0 auto}
.page.active{display:block}
.page.active.page-anim{animation:pageFade var(--motion-fast) linear}
@keyframes pageFade{from{opacity:.72}to{opacity:1}}
.page-header{margin-bottom:24px}
.page-title{font-family:var(--font-display);font-size:clamp(26px,2.4vw,32px);font-weight:400;color:var(--fg)}
.page-subtitle{max-width:64ch;font-size:var(--text-body);color:var(--fg2);margin-top:8px}
@media(max-width:768px){.page{padding:20px 16px}.page-title{font-size:22px}}
.no-transition,.no-transition *{transition:none!important}

/* ── LOGIN SCREEN ── */
#loginScreen{position:fixed;inset:0;z-index:var(--z-login);display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.login-card{max-width:440px;width:100%;display:flex;flex-direction:column;border:1px solid var(--border-default);border-radius:var(--radius-modal);overflow:hidden;box-shadow:var(--elevation-raised);max-height:calc(100vh - 48px);overflow-y:auto}
/* ── Hero Índigo Elétrico ── */
.login-hero{flex:0 0 auto;background:var(--primary-light);color:var(--fg);padding:42px 32px 34px;text-align:center;position:relative;overflow:hidden}
.login-hero::before{display:none}
.login-hero::after{display:none}
/* DM Sans 800, o tipo do wordmark no guia de marca. A pilha antiga pedia
   'Helvetica Neue', Arial ANTES de var(--font-body), então este - o maior elemento de
   marca do app - nunca era desenhado na fonte da marca. O tracking virou `em` porque o
   corpo varia de 44px a 92px entre os breakpoints e -2px fixo apertava demais no
   pequeno e de menos no grande; -.031em é a proporção do kit (-1.5 sobre 49). */
.login-hero-logo{font-family:var(--font-body);font-size:54px;font-weight:800;letter-spacing:-.031em;color:var(--primary);line-height:1;margin-bottom:14px;position:relative;z-index:1;cursor:default;user-select:none;-webkit-user-select:none;display:block}
.login-hero-logo .dim{color:var(--fg);opacity:.45}
/* display:flex + width:fit-content (em vez de inline-flex) forca a badge pra propria linha,
   independente da largura do aparelho - caso contrario ela e a logo (ambos inline) so quebram
   linha quando nao cabem lado a lado, dando empilhamento inconsistente entre telas. */
.login-hero-badge{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:11px;font-weight:700;color:var(--primary);letter-spacing:.04em;width:fit-content;margin:0 auto 14px;position:relative;z-index:1}
.login-hero-badge .material-icons-round{font-size:13px}
.login-hero-sub{color:var(--fg2);font-size:14px;line-height:1.6;max-width:300px;margin:0 auto;position:relative;z-index:1}
/* Destaques de marketing - escondidos por padrao (so aparecem no desktop) */
.login-hero-lead,.login-hero-highlights,.login-hero-trust,.login-body-sub{display:none}
/* ── Painel de acesso ── */
.login-body{background:var(--surface-overlay);flex:1;display:flex;flex-direction:column;gap:18px;padding:24px 28px 22px}
/* Features como chips */
.login-features{display:flex;flex-direction:column;gap:6px}
.login-feat{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-button);font-size:13px;color:var(--fg);font-weight:500;line-height:1.35;text-align:left}
.login-feat .material-icons-round{font-size:16px;color:var(--primary);flex-shrink:0}
/* CTA */
.login-cta{display:flex;flex-direction:column}
.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:12px 20px;border:1px solid var(--border-strong);border-radius:var(--radius-button);background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out);box-shadow:0 1px 2px var(--shadow)}
.google-btn:hover{background:var(--surface-subtle);border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
.google-btn:active{background:var(--primary-light)}
.google-btn svg{width:20px;height:20px;flex-shrink:0}
.login-note{font-size:var(--text-xs);color:var(--fg2);margin-top:12px;text-align:center}
/* Badge oficial "Disponível no Google Play" - Android web, CTA principal no lugar
   do login (ver #androidPlayCta no index.html e Platform.os em main.js). */
.play-badge{display:inline-block;border-radius:var(--radius-control);transition:opacity var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.play-badge:hover{opacity:.9;box-shadow:var(--elevation-card)}
.play-badge img{display:block;width:200px;max-width:100%;height:auto;border-radius:8px}
.login-demo-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:10px 16px;border:1px dashed var(--border-strong);border-radius:var(--radius-button);background:transparent;color:var(--fg2);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);margin-top:12px}
.login-demo-btn:hover{background:var(--bg2);color:var(--fg);border-color:var(--fg2)}
.login-demo-btn .material-icons-round{font-size:18px}
/* Footer compacto */
.login-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);text-align:center;display:flex;flex-direction:column;gap:4px}
.login-legal{font-size:var(--text-xs);color:var(--fg2)}
.login-legal a{color:var(--primary);text-decoration:none;font-weight:600}
.login-legal a:hover{text-decoration:underline}
.login-support{font-size:11px;color:var(--fg2)}
.login-support a{color:var(--primary);text-decoration:none}
.login-support a:hover{text-decoration:underline}
.login-copyright{font-size:11px;color:var(--fg2);font-weight:500}
/* Pulse ao autenticar */
@keyframes mutuu-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.95)}}
.login-icon-pulsing{animation:mutuu-pulse .85s ease-in-out infinite}
/* Mobile - tela cheia */
@media(max-width:768px){
  /* overflow-y no proprio overlay = container de rolagem confiavel no mobile.
     align-items:flex-start (nao center) e essencial aqui: um item flex centralizado que
     ultrapassa a altura do container so permite rolar pra ver o excesso de baixo - o excesso
     de CIMA fica preso, cortando badge/logo sem chance de rolar ate eles (bug classico de
     align-items:center + overflow:auto). O .login-card ganha margin:auto pra continuar
     parecendo centralizado quando o conteudo cabe, mas vira topo-alinhado (e 100% rolavel)
     quando o conteudo e mais alto que a tela. */
  #loginScreen{padding:0;align-items:flex-start;justify-content:flex-start;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* 100dvh acompanha a barra de enderecos do navegador (vh fixa empurrava o rodape pra fora).
     min() trava o esticamento em telas muito altas (aparelhos com barra gestual "generosa" tipo
     MIUI/HyperOS variando o env(safe-area-inset-bottom), ou tablets em retrato): sem o teto, o
     .login-footer{margin-top:auto} empurra o rodape bem longe do botao, abrindo um vao enorme.
     Com o teto, o excesso de altura sobra FORA do card (fundo indigo, centralizado pelo
     margin:auto abaixo) em vez de virar espaco morto DENTRO do card. Em aparelhos normais
     (a maioria, com dvh abaixo do teto) o min() nao faz nada - comportamento identico ao de antes.
     margin:auto 0 centraliza verticalmente quando o card cabe no viewport (igual antes) e vira
     0 automaticamente quando o card e mais alto que o viewport - com o pai em align-items:flex-start,
     isso mantem o card 100% rolavel do topo ao rodape em vez de cortar o topo. */
  .login-card{max-width:100%;border-radius:0;box-shadow:none;min-height:min(100vh,820px);min-height:min(100dvh,820px);max-height:none;overflow:visible;margin:auto 0}
  .login-hero{padding:calc(env(safe-area-inset-top,0px) + 48px) 28px 36px}
  /* +44px garante folga para a barra de gestos do Android (inset pode vir 0 na WebView) */
  .login-body{padding:24px 24px calc(env(safe-area-inset-bottom,0px) + 44px)}
}
/* Mobile baixo (navegador) - compacta para caber sem rolar */
@media(max-width:768px) and (max-height:720px){
  .login-hero{padding:calc(env(safe-area-inset-top,0px) + 28px) 28px 26px}
  .login-hero-logo{font-size:44px;margin-bottom:8px}
  .login-hero-sub{font-size:13px;line-height:1.45}
  .login-body{gap:12px}
  .login-feat{padding:8px 13px}
}
/* Desktop - layout split em tela cheia, tratado como pagina de divulgacao do produto.
   Painel esquerdo: pitch de marketing (hero + destaques). Painel direito: features + login. */
@media(min-width:769px){
  #loginScreen{background:var(--bg);padding:0;align-items:stretch;justify-content:stretch}
  .login-card{max-width:none;width:100%;height:100vh;height:100dvh;flex-direction:row;border-radius:0;box-shadow:none;max-height:none;overflow:hidden}
  /* Painel esquerdo (pitch) - coluna alinhada a esquerda, conteudo centrado na vertical */
  .login-hero{flex:1.05 1 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:56px 64px;text-align:left;overflow-y:auto}

  .login-hero::after{display:none}
  .login-hero>*{max-width:500px}
  /* Badge e logo centralizados na parte azul; o resto do conteudo fica alinhado a esquerda */
  .login-hero-badge{font-size:13px;padding:6px 14px;margin-bottom:26px;align-self:center}
  .login-hero-logo{font-size:80px;margin-bottom:30px;align-self:center}
  /* Tagline saiu do hero (vai pro painel branco no desktop) */
  .login-hero-sub{display:none}
  /* Frase de destaque (lead) - finanças pessoais em evidência */
  .login-hero-lead{display:block;color:var(--fg);font-size:24px;font-weight:700;line-height:1.35;letter-spacing:-.02em;margin:0}
  .login-hero-lead .hl-accent{color:var(--primary)}
  /* Destaques de marketing */
  .login-hero-highlights{display:flex;flex-direction:column;gap:22px;margin-top:30px;position:relative;z-index:1}
  /* Tagline no topo do painel branco */
  .login-body-sub{display:block;color:var(--fg2);font-size:14px;line-height:1.6;text-align:center;margin:0}
  .login-hl{display:flex;gap:14px;align-items:flex-start}
  .login-hl>.material-icons-round{font-size:22px;color:var(--primary);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-button);padding:9px;flex-shrink:0;line-height:1}
  .login-hl>div>strong{display:block;color:var(--fg);font-size:14px;font-weight:700;margin-bottom:2px;letter-spacing:-.01em}
  .login-hl>div>span{display:block;color:var(--fg2);font-size:var(--text-body);line-height:var(--leading-normal)}
  .login-hero-trust{display:inline-flex;align-items:center;gap:8px;margin-top:32px;color:var(--fg2);font-size:13px;font-weight:600}
  .login-hero-trust>.material-icons-round{font-size:18px;color:var(--primary)}
  /* Painel direito (login) - conteudo centralizado com largura confortavel */
  .login-body{flex:1 1 0;justify-content:center;align-items:center;gap:20px;padding:48px;overflow-y:auto}
  .login-body>*{width:100%;max-width:400px}
  .login-footer{margin-top:6px}
}
/* Telas largas - aumenta a presenca do pitch sem esticar o painel de login */
@media(min-width:1280px){
  .login-hero{padding:64px 96px}
  .login-hero-logo{font-size:92px}
  .login-hero-lead{font-size:24px}
  .login-hero>*{max-width:520px}
  .login-body-sub{font-size:16px}
  .login-body{padding:48px 80px}
  .login-body>*{max-width:420px}
}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:20px;box-shadow:var(--elevation-card)}
.card+.card{margin-top:16px}
.card-grid>.card{height:100%;box-sizing:border-box;margin-top:0}
.card-grid{display:grid;gap:16px;align-items:stretch}
.card-grid-2{grid-template-columns:1fr 1fr}
.card-grid-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.card-grid-2,.card-grid-3{grid-template-columns:1fr}}

/* ── STAT CARDS ── */
.stat-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:20px;position:relative;overflow:hidden;box-shadow:var(--elevation-card);transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.stat-card:hover{border-color:var(--border-strong);box-shadow:var(--elevation-raised)}
.stat-label{font-size:var(--text-xs);font-weight:600;color:var(--fg2);margin-bottom:8px}
.stat-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400}
.stat-sub{font-size:var(--text-xs);margin-top:8px;color:var(--fg2)}
.stat-icon{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:var(--radius-button);background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:18px}

/* ── BALANCE HERO ── */
.balance-hero{background:var(--hero-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-panel);padding:28px;color:var(--hero-amount);position:relative;overflow:hidden;margin-bottom:16px;box-shadow:var(--elevation-raised)}

/* ── Círculos decorativos do hero: REMOVIDOS em 2026-08-05 ───────────────────
   Eram dois círculos de baixa opacidade sobrepostos ao painel de saldo. Saíram
   a pedido, para deixar a tela inicial mais limpa. A geometria exata fica
   registrada aqui caso se queira restaurá-los:

     .balance-hero::before {
       content:''; position:absolute; pointer-events:none;
       right:-30px; top:-30px;
       width:150px; height:150px; border-radius:50%;
       background:rgba(245,245,240,.07);
     }
     .balance-hero::after {
       content:''; position:absolute; pointer-events:none;
       right:40px; bottom:-50px;
       width:200px; height:200px; border-radius:50%;
       background:rgba(245,245,240,.045);
     }

   Os dois dependiam de `.balance-hero{position:relative;overflow:hidden}`, que
   segue no lugar. Para voltar, basta recolar os dois blocos acima; nada mais
   precisa mudar. O teste que os checava está em
   tests/layout/design-system-electric-indigo.spec.js (assinatura do hero).
   ───────────────────────────────────────────────────────────────────────── */
.balance-label{font-size:var(--text-xs);opacity:.78;margin-bottom:8px}
/* ── Olho de ocultar valores ────────────────────────────────────────────────
   Fica colado no rótulo (padrão dos apps de banco: o olho ao lado do valor que
   ele esconde), e não na linha de ações — por isso o rótulo virou uma linha
   flex. Sem caixa: a aparente tem 24px, mas a área de toque tem 44px pelo
   ::after invisível, o mesmo recurso do "Ajustar" e do "Ver detalhes". O que
   engorda o hero é o min-height da caixa, não o tamanho do alvo. */
.balance-label-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.balance-label-row .balance-label{margin-bottom:0}
.balance-eye{
  position:relative;flex:none;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--hero-amount);opacity:.78;cursor:pointer;
  transition:opacity var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out)
}
.balance-eye::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.balance-eye:hover,.balance-eye[aria-pressed="true"]{opacity:1}
.balance-eye:hover{background:var(--hero-tint-strong)}
.balance-eye .material-icons-round{font-size:18px}
.balance-amount{font-family:var(--font-display);font-size:var(--text-display);font-weight:400;margin-bottom:20px;color:var(--hero-amount)}
.balance-row{display:flex;gap:24px}
.balance-mini{font-size:13px}
.balance-mini-label{opacity:.65;font-size:var(--text-2xs);margin-bottom:4px}
.balance-mini-val{font-weight:600}
#heroIncome{color:var(--hero-income)}
#heroExpense{color:var(--hero-expense)}
.balance-mini-delta{font-size:var(--text-2xs);font-weight:600;opacity:.7;margin-top:3px;line-height:var(--leading-snug);white-space:nowrap}
/* ── Toggle "Ver resumo do mês" (colapsável dos 4 cards) ── */
.month-summary-toggle{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin:-4px 0 16px;padding:8px 12px;background:none;border:none;color:var(--fg2);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--radius-button);transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.month-summary-toggle:hover{background:var(--bg2);color:var(--fg)}
.month-summary-toggle .mst-arrow{font-size:18px;transition:transform .2s ease}
.month-summary-toggle.is-open .mst-arrow{transform:rotate(180deg)}
.balance-actions{position:absolute;bottom:16px;right:16px;display:flex;gap:8px;z-index:1}
.balance-action-btn{background:var(--hero-tint-strong);border:1px solid rgba(245,245,240,.3);color:var(--hero-amount);padding:6px 12px;border-radius:var(--radius-button);font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out);display:flex;align-items:center;gap:4px}
.balance-action-btn:hover{background:var(--hero-tint-hover)}
.balance-action-btn .material-icons-round{font-size:14px}
@media(max-width:480px){.balance-amount{font-size:30px}}

/* ── TX ITEMS ── */
.tx-list{display:flex;flex-direction:column;gap:8px}
.tx-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-button);background:var(--surface);border:1px solid var(--border-subtle);transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.tx-item:hover{background:var(--surface-subtle);border-color:var(--border-default);box-shadow:0 1px 2px var(--shadow)}
.tx-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.tx-info{flex:1;min-width:0}
.tx-desc{font-size:var(--text-body);font-weight:600;color:var(--fg);display:flex;align-items:center;gap:6px;line-height:var(--leading-snug);overflow:hidden;max-width:100%}
/* A descrição quebra linha em vez de virar reticências — a mesma regra que os cards
   agendados já seguiam. Truncada, "Mensalidade do curso de especializ…" e "Almoço no
   restaurante japonês da e…" escondiam justamente o que identifica o lançamento, e em
   360px isso atingia 13 das 15 linhas. */
.tx-desc-name{display:block;flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;text-wrap:pretty}
.tx-inst{font-size:var(--text-2xs);color:var(--fg2);opacity:.8;white-space:nowrap;flex-shrink:0;font-weight:600;background:var(--bg2);padding:2px 6px;border-radius:5px}
.tx-meta{font-size:var(--text-xs);color:var(--fg2);margin-top:3px}
.tx-amount{font-size:var(--text-base);font-weight:600;letter-spacing:var(--track-tight);white-space:nowrap}
.tx-amount.income{color:var(--income)}
.tx-amount.expense{color:var(--expense)}
.tx-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}
.tx-item:hover .tx-actions{opacity:1}
.sched-item:hover .tx-actions{opacity:1}
@media(max-width:768px){.tx-actions{opacity:1}}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-control);display:flex;align-items:center;justify-content:center;border:1px solid transparent;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);background:var(--bg2);color:var(--fg2);font-size:16px}
.icon-btn:hover{background:var(--primary-light);color:var(--primary)}
.icon-btn.danger:hover{background:var(--expense-bg);color:var(--expense)}
.partner-badge{font-size:var(--text-2xs);background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:var(--radius-pill);margin-left:8px;font-weight:600}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 18px;border-radius:var(--radius-button);font-family:var(--font-body);font-size:14px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),opacity var(--motion-fast) linear;white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 1px 2px var(--shadow)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 0 0 3px var(--focus-ring)}
.btn-primary:active{background:var(--interactive-active)}
.btn-secondary{background:var(--surface);color:var(--fg);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--surface-subtle);border-color:var(--border-strong)}
.btn-danger{background:var(--expense-bg);color:var(--expense)}
.btn-danger:hover{background:var(--expense);color:var(--electric-night-ink)}
.btn-ghost{background:transparent;color:var(--fg2)}
.btn-ghost:hover{background:var(--bg2);color:var(--fg)}
.btn-sm{min-height:44px;padding:7px 12px;font-size:13px}
.btn-full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn .material-icons-round{font-size:18px}

/* ── FAB ── */
.fab{position:fixed;bottom:90px;right:24px;width:56px;height:56px;border-radius:18px;background:var(--primary);color:var(--on-primary);border:1px solid color-mix(in srgb,var(--primary) 72%,var(--fg));display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 10px rgba(30,27,75,.18),0 14px 30px rgba(67,56,202,.2);transition:background-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-base) var(--ease-out),opacity var(--motion-base) var(--ease-out);z-index:var(--z-fab);font-size:24px}
@media(hover:hover) and (pointer:fine){.fab:hover{transform:translateY(-2px);background:var(--primary-dark);box-shadow:0 5px 12px rgba(30,27,75,.2),0 18px 34px rgba(67,56,202,.24)}}
.fab:active{transform:scale(.98)}
/* O ícone do FAB é TEXTO (<span class="material-icons-round">add</span>), e segurar
   texto no WebView do Android abre a seleção e o menu de copiar. Com o toque longo
   gravando por voz, segurar virou gesto legítimo, e o menu aparecia por cima dele.
   touch-action:none no mesmo lugar porque o arraste-para-cancelar não pode ser
   interpretado como rolagem da página. */
.fab,.fab *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.fab{touch-action:none}
/* Recolhido enquanto o usuário rola a lista para baixo: parado no canto inferior direito
   o FAB fica exatamente sobre a coluna de valores das transações. Volta ao subir. */
.fab.is-tucked{opacity:0;transform:translateY(80px) scale(.85);pointer-events:none}
@media(min-width:769px){.fab{bottom:24px}}
@media(max-width:768px){.fab{bottom:calc(90px + env(safe-area-inset-bottom,0px))}#fabAccountsMenu{bottom:calc(150px + env(safe-area-inset-bottom,0px))}}

/* ── MODAL ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,15,26,.62);display:flex;align-items:flex-end;justify-content:center;z-index:var(--z-modal);visibility:hidden;opacity:0;pointer-events:none;transition:opacity var(--motion-base) linear,visibility 0s linear var(--motion-base)}
.modal-backdrop.open{visibility:visible;opacity:1;pointer-events:all;transition-delay:0s}
@media(min-width:640px){.modal-backdrop{align-items:center}}
.modal{background:var(--surface-overlay);border:1px solid var(--border-default);border-bottom:0;border-radius:var(--radius-modal) var(--radius-modal) 0 0;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow-y:auto;scrollbar-gutter:stable;transform:translateY(32px);transition:transform var(--motion-medium) var(--ease-out);padding:28px 24px;isolation:isolate;box-shadow:var(--elevation-raised)}
.modal-backdrop.open .modal{transform:translateY(0)}
/* Abaixo de 640px o modal e bottom-sheet (encostado no rodape da tela) - precisa da mesma
   folga pra barra de gestos que .mobile-drawer ja tem, senao botoes/campos no fim do modal
   ficam colados ou embaixo da area de gestos em aparelhos com safe-area-inset-bottom maior. */
@media(max-width:639px){.modal{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
@media(min-width:640px){.modal{border:1px solid var(--border-default);border-radius:var(--radius-modal);transform:translateY(12px) scale(.985)}.modal-backdrop.open .modal{transform:translateY(0) scale(1)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.modal-title{font-family:var(--font-display);font-size:var(--text-xl);line-height:var(--leading-tight)}
.modal-close{width:44px;height:44px;border-radius:var(--radius-button);display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:var(--bg2);color:var(--fg2);cursor:pointer;font-size:18px;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.modal-close:hover{background:var(--border);color:var(--fg)}

/* ── FORMS ── */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:var(--text-sm);font-weight:700;color:var(--fg2);margin-bottom:8px}
.form-input{width:100%;min-height:44px;padding:10px 14px;background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-control);color:var(--fg);font-family:var(--font-body);font-size:14px;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out);outline:none}
.form-input:hover{border-color:var(--border-strong)}
.form-input:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
.form-input::placeholder{color:var(--text-tertiary);opacity:1}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
.value-input-wrap{position:relative}
.value-input-wrap .currency{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--fg2);pointer-events:none}
.value-input-wrap .form-input{padding-left:36px;font-size:18px;font-weight:600}
.type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.type-btn{min-height:44px;padding:10px;border-radius:var(--radius-button);border:1px solid var(--border-default);background:var(--bg2);color:var(--fg2);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);display:flex;align-items:center;justify-content:center;gap:6px}
.type-btn:hover{border-color:var(--primary);color:var(--primary)}
.type-btn.active-income{background:var(--income-bg);border-color:var(--income);color:var(--income)}
.type-btn.active-expense{background:var(--expense-bg);border-color:var(--expense);color:var(--expense)}
.type-btn.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}
.recurrence-pills{display:flex;align-items:stretch;flex-wrap:wrap;gap:6px}
.pill{min-height:44px;padding:6px 12px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:12px;font-weight:700;line-height:1.2;text-align:center;border:1px solid var(--border-default);background:var(--bg2);color:var(--fg2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.pill:hover{border-color:var(--primary);color:var(--primary)}
.pill.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
/* O recuo interno com margem negativa existe para a SOMBRA da categoria escolhida.
   .cat-opt.selected sobe 1px e ganha uma sombra de 22px de desfoque; com
   overflow-y:auto e sem folga, tudo isso era cortado na primeira e na última
   linha, e o topo do botão selecionado aparecia decepado. A margem negativa
   devolve a posição original, então nada se move na tela, e o max-height cresce
   na mesma medida para continuar mostrando a mesma quantidade de categorias. */
.cat-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:224px;overflow-y:auto;padding:12px 6px;margin:-12px -6px}
/* min-height 44px: os chips ficavam em 39,5px, e escolher categoria é o passo obrigatório
   de todo lançamento — é o alvo mais tocado de todo o app. */
.cat-opt{display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg2);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);font-size:13px;font-weight:500;color:var(--fg)}
.cat-opt:hover{border-color:var(--primary)}
.cat-opt.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}

/* ── FILTERS ── */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter-chip{min-height:44px;padding:6px 14px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:12px;font-weight:700;line-height:1.2;text-align:center;border:1px solid var(--border-default);background:var(--surface);color:var(--fg2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.filter-chip:hover{border-color:var(--primary);color:var(--primary)}
.filter-chip.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.search-box{position:relative;flex:1;min-width:200px}
.search-box .material-icons-round{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg2);font-size:18px;pointer-events:none}
.search-box .form-input{min-height:44px;padding-left:40px;padding-top:9px;padding-bottom:9px}

/* ── REPORTS ── */
.period-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--surface-sunken);padding:4px;border:1px solid var(--border-subtle);border-radius:var(--radius-button)}
.period-tab{flex:1;min-height:44px;padding:8px 12px;border-radius:var(--radius-control);border:none;background:none;color:var(--fg2);font-family:var(--font-body);font-size:13px;font-weight:700;line-height:1.2;text-align:center;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.period-tab:hover{color:var(--fg);background:var(--surface-subtle)}
.period-tab.active{background:var(--surface);color:var(--primary);box-shadow:var(--elevation-selected);transform:translateY(-1px)}
/* No escuro a sombra nao separa (sombra escura sobre fundo escuro): a aba ativa
   precisa de um contorno para nao sumir dentro do proprio trilho. */
[data-theme="dark"] .period-tab.active{border:1px solid var(--border-default)}
/* Mesma razao no painel de saldo: o hero e o elemento principal da tela e no
   escuro divide a superficie com os demais cards da paleta. */
[data-theme="dark"] .balance-hero,[data-theme="dark"] .goals-hero{border-color:var(--border-default)}
.pill.active,.filter-chip.active,.type-btn.active,.type-btn.active-income,.type-btn.active-expense,.cat-opt.selected{box-shadow:var(--elevation-selected);transform:translateY(-1px)}
.pill:active,.filter-chip:active,.period-tab:active,.type-btn:active,.cat-opt:active{box-shadow:inset 0 1px 3px var(--shadow-md);transform:translateY(0)}
.bar-chart{display:flex;flex-direction:column;gap:10px}
.bar-row{display:flex;flex-direction:column;gap:4px}
.bar-row-header{display:flex;justify-content:space-between;align-items:baseline}
.bar-label{font-size:var(--text-body);color:var(--fg);display:flex;align-items:center;gap:8px}
.bar-value{font-size:var(--text-body);font-weight:600}
.bar-track{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}
/* Tipo da transação em edição: informa, não é controle — daí sem aparência de botão. */
.tx-type-static{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  border-radius:var(--radius-button);background:var(--bg2);
  font-size:var(--text-body);font-weight:600;color:var(--fg)
}
.tx-type-static .material-icons-round{font-size:18px}
.tx-type-static.is-income .material-icons-round{color:var(--income)}
.tx-type-static.is-expense .material-icons-round{color:var(--expense)}

/* Contexto ao lado da comparação, sem barra: é saldo acumulado, não fluxo do mês, e não
   deve concorrer na mesma escala das barras de receitas e despesas. */
.bar-aside{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle);
  font-size:var(--text-xs);color:var(--fg2)
}
.bar-aside strong{font-size:var(--text-body);color:var(--fg);font-variant-numeric:tabular-nums}
.bar-fill{height:100%;border-radius:4px;transition:width var(--motion-base) var(--ease-out)}
.bar-pct{font-size:var(--text-xs);color:var(--fg2);text-align:right}

/* ── SCHEDULED ── */
.sched-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-button);background:var(--surface);border:1px solid var(--border-subtle);margin-bottom:8px;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.sched-item:hover{background:var(--surface-subtle);border-color:var(--border-default);box-shadow:0 1px 2px var(--shadow)}
.sched-item.inactive{opacity:.5}
.sched-item.paid{opacity:.7;background:var(--income-bg)}
/* Estado de vencimento: borda + selo com texto, sem tingir o card inteiro.
   Tingir o fundo deixava 4 de 5 agendadas vermelhas — quando tudo é urgente, nada é —
   e pintava de vermelho receitas como "Salário mensal +R$ 8.750,00", em que atrasar
   não é perda. O vermelho fica só na despesa vencida; a receita usa o aviso índigo. */
.sched-item.due-soon{border-color:var(--warning)!important}
.sched-item.due-today,.sched-item.overdue{border-color:var(--warning)!important}
.sched-item.due-today.is-expense,.sched-item.overdue.is-expense{border-color:var(--expense)!important}
/* Setas de reordenação. Eram 20×20px empilhadas; lado a lado cabem 44×44 cada sem inflar
   a altura da linha, que é o que empilhá-las com o piso de toque teria custado. */
.reorder-btns{display:flex;flex-shrink:0}
.reorder-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:var(--radius-control);background:none;color:var(--fg2);cursor:pointer
}
.reorder-btn:hover:not(:disabled){background:var(--bg2);color:var(--fg)}
.reorder-btn:disabled{opacity:.25;cursor:default}
.reorder-btn .material-icons-round{font-size:20px}

/* Interruptor de Configurações. Eram <div onclick> de 44×24px: 20px abaixo do piso de
   toque, sem papel, sem estado e sem foco — inalcançáveis por teclado. A pílula continua
   44×24 (a proporção certa para um switch), mas o alvo real é o botão de 44×44 à volta. */
.ui-switch{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:flex-end;
  min-width:44px;min-height:44px;padding:0;border:0;background:none;cursor:pointer
}
.ui-switch-track{
  position:relative;width:44px;height:24px;border-radius:var(--radius-pill);background:var(--border);
  transition:background-color var(--motion-fast) var(--ease-out)
}
.ui-switch[aria-checked="true"] .ui-switch-track{background:var(--primary)}
.ui-switch-thumb{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--electric-night-ink);box-shadow:0 1px 3px var(--shadow-md);
  transition:transform var(--motion-fast) var(--ease-out)
}
.ui-switch[aria-checked="true"] .ui-switch-thumb{transform:translateX(20px)}

/* Selos de estado do Fluxo de Caixa. Eram 7 spans com font-size:9px inline — 2px abaixo
   do piso de legibilidade, em caixa alta e carregando estado. O rótulo é que distingue os
   três; as cores de tint são próximas de propósito, para não criar uma quarta cor de chrome. */
.cf-badge{
  display:inline-flex;align-items:center;padding:1px 6px;border-radius:var(--radius-pill);
  font-size:var(--text-2xs);font-weight:700;line-height:var(--leading-snug);vertical-align:middle
}
.cf-badge.is-efet{background:var(--income-bg);color:var(--income)}
.cf-badge.is-prev{background:var(--warning-bg);color:var(--warning)}
.cf-badge.is-hoje{background:var(--primary-light);color:var(--primary)}
.sched-due-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);
  font-size:var(--text-2xs);font-weight:700;line-height:var(--leading-snug);
  background:var(--warning-bg);color:var(--warning)
}
.sched-item.is-expense .sched-due-badge{background:var(--expense-bg);color:var(--expense)}
/* gap:4px é constraint registrada: o card de agendamento precisa de ritmo curto
   para caber descrição + metadados sem truncar. Ver tests/layout/ux-primary-flows. */
.sched-card-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.sched-card-title{align-items:flex-start;overflow:visible;line-height:1.35}
.sched-item .tx-desc-name{display:block;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:pretty}
.sched-card-footer{display:flex;min-width:0;align-items:flex-end;flex-wrap:wrap;gap:4px 8px}
.sched-meta{display:flex;flex:1 1 120px;min-width:0;align-items:center;flex-wrap:wrap;gap:4px 7px;margin-top:0;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip}
.sched-meta-date,.sched-meta-detail{color:var(--fg2)}
.sched-meta-detail{font-size:var(--text-xs)}
.sched-meta-change{white-space:normal}
.sched-meta .partner-badge{margin-left:0}
.sched-meta .tx-inst,.sched-meta .sched-badge,.sched-meta .partner-badge{flex:0 0 auto;white-space:nowrap}
.sched-card-footer .tx-amount{flex:0 0 auto;margin-left:auto;line-height:1.35}
.sched-status-action{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--income-bg);color:var(--income)}
.sched-status-action .material-icons-round{font-size:18px}
.sched-status-action.is-paid{background:var(--income-bg);color:var(--income)}
.sched-status-action.is-partner{background:var(--bg2);color:var(--fg2);cursor:default}
.sched-badge{font-size:var(--text-2xs);font-weight:600;padding:3px 8px;border-radius:var(--radius-pill)}
.sched-badge.monthly{background:var(--warning-bg);color:var(--warning)}
.sched-badge.weekly{background:var(--primary-light);color:var(--primary)}
.sched-badge.daily{background:var(--expense-bg);color:var(--expense)}
.sched-badge.yearly{background:var(--income-bg);color:var(--income)}
.sched-badge.once{background:var(--bg2);color:var(--fg2)}

/* ── PARTNER ── */
.partner-code{font-family:var(--font-display);font-size:28px;letter-spacing:6px;color:var(--primary);text-align:center;padding:16px;background:var(--primary-light);border-radius:var(--radius-button);border:1px dashed var(--primary);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);user-select:all}
.partner-code:hover{background:var(--primary);color:var(--on-primary)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--income);display:inline-block;margin-right:6px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.sync-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--primary-light);border:1px solid var(--primary);border-radius:var(--radius-sm);font-size:13px;color:var(--primary);font-weight:500}
.sync-banner .material-icons-round{font-size:16px}

/* ── EMPTY ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:var(--fg2);text-align:center;gap:12px}
.empty .material-icons-round{font-size:48px;opacity:.3}
.empty-title{font-size:var(--text-base);font-weight:600;color:var(--fg);letter-spacing:var(--track-tight)}
.empty-sub{font-size:var(--text-body);max-width:44ch}

/* ── TOAST ── */
.toast-container{position:fixed;top:calc(88px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px));z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-button);background:var(--surface-inverse);color:var(--bg);font-size:13px;font-weight:600;box-shadow:var(--elevation-raised);animation:slideInRight var(--motion-base) var(--ease-out);max-width:340px;pointer-events:all}
.toast.success{background:var(--income);color:var(--on-primary)}
.toast.error{background:var(--expense);color:var(--electric-night-ink)}
.toast.info{background:var(--toast-info-bg);color:var(--toast-info-fg)}
/* Recado tranquilo, nao alarme. Os outros toasts sao blocos de cor solida porque
   interrompem de proposito; este usa a mesma superficie e o mesmo peso de texto dos
   cards do app. Nasceu do aviso de modo offline, que abria o app com um retangulo
   quase preto e fazia uma situacao normal — abrir sem internet — parecer falha. */
.toast.soft{
  background:var(--surface);color:var(--fg);border-color:var(--border);
  font-weight:500;box-shadow:var(--elevation-card)
}
.toast.soft .material-icons-round{color:var(--fg2)}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ── MISC ── */
.divider{height:1px;background:var(--border);margin:16px 0}
.text-income{color:var(--income)}
.text-expense{color:var(--expense)}
.text-muted{color:var(--fg2);font-size:var(--text-body)}
.fw-bold{font-weight:700}
.mt-16{margin-top:16px}
.section-title{font-size:var(--text-base);font-weight:700;color:var(--fg);letter-spacing:var(--track-tight);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


.account-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:20px;box-shadow:var(--elevation-card);transition:box-shadow var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out);cursor:default;position:relative;overflow:hidden}
.account-card::before{display:none}
.account-card:hover{border-color:var(--border-strong);box-shadow:var(--elevation-raised)}
.account-card.negative{border-color:var(--expense)!important}
.account-card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.account-card-name{font-size:var(--text-sm);font-weight:700;color:var(--fg2);margin-bottom:6px}
.account-card-balance{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400}
.account-card-type{font-size:var(--text-xs);color:var(--fg2);margin-top:8px;display:flex;align-items:center;gap:6px}
.account-badge{font-size:var(--text-2xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);background:var(--primary-light);color:var(--primary)}
.account-card-footer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--fg2);display:flex;align-items:center;justify-content:space-between}
.transfer-arrow{display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--fg2)}
.cf-row{transition:background .15s}
.cf-row:hover{background:var(--bg2)}
.cf-row td{white-space:nowrap}
#cashflowContent tfoot td{white-space:nowrap}
.cf-preset-btn:hover{background:var(--primary-light)!important;border-color:var(--primary)!important;color:var(--primary)!important}

/* ── SPLASH SCREEN ── */
body.startup-pending #loginScreen,
body.startup-pending #appShell,
body.startup-pending #fabBtn{visibility:hidden!important}
#splashScreen{
  position:fixed;inset:0;background:var(--bg);overflow:hidden;
  /* --z-splash, e não 99999: a escala documentada em tokens.md termina em "bloqueios 9000+",
     e a splash precisa ficar acima do gate de atualização (9000) e do bloqueio biométrico
     (9500) sem sair da escala. */
  z-index:var(--z-splash);
  transition:opacity var(--motion-base) var(--ease-out),visibility var(--motion-base) step-end;
}
#splashScreen.hide{opacity:0;visibility:hidden;pointer-events:none}
/* 40 + 5 + 142 = 187dp. Esta e a UNICA vez que a cena aparece: a etapa nativa e so
   o canvas (ver drawable/splash_no_icon.xml), entao nao ha uma segunda cena com que
   descompassar. Por isso a entrada e um fade proprio, em vez de a arte simplesmente
   surgir junto com o primeiro quadro. */
.splash-core{
  position:absolute;left:50%;top:50%;
  width:142px;height:187px;display:grid;grid-template-rows:40px 142px;
  justify-items:center;gap:5px;transform:translate(-50%,-50%);
  animation:splashCoreIn 420ms var(--ease-out) both;
}
@keyframes splashCoreIn{from{opacity:0;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.splash-brand{
  position:relative;display:block;width:40px;height:40px;border-radius:10px;
  overflow:hidden;box-shadow:var(--elevation-raised);
}
.splash-brand img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.splash-brand::after{
  content:"";position:absolute;inset:-30% auto -30% -18px;width:11px;
  background:rgb(255 255 255/.44);filter:blur(5px);
  transform:translateX(0) skewX(-16deg);
  animation:splashBrandShine 2400ms linear infinite;
}
.splash-visual{width:142px;height:142px;display:grid;place-items:center}
.splash-mascot{
  display:block;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.splash-message{
  position:absolute;left:50%;top:calc(50% + 112px);
  width:min(calc(100% - 48px),360px);display:grid;justify-items:center;gap:16px;
  transform:translateX(-50%);text-align:center;
}
.splash-greeting{
  margin:0;color:var(--fg);font-family:var(--font-display);font-size:var(--text-xl);
  line-height:var(--leading-snug);letter-spacing:var(--track-tight);
  opacity:0;transform:translateY(8px);
}
#splashScreen.is-message-ready .splash-greeting{
  animation:splashGreetingIn var(--motion-base) var(--ease-out) both;
}
.splash-dots{display:flex;gap:6px}
.splash-dots span{
  width:7px;height:7px;border-radius:50%;background:var(--primary);opacity:.3;
  animation:splashDot 1.1s var(--ease-soft) infinite;
}
.splash-dots span:nth-child(2){animation-delay:120ms}
.splash-dots span:nth-child(3){animation-delay:240ms}
@keyframes splashBrandShine{
  0%{opacity:0;transform:translateX(0) skewX(-16deg)}
  4%{opacity:1}
  25%{opacity:1;transform:translateX(72px) skewX(-16deg)}
  26%,100%{opacity:0;transform:translateX(72px) skewX(-16deg)}
}
@keyframes splashGreetingIn{to{opacity:1;transform:none}}
@keyframes splashDot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .splash-brand::after{animation:none!important;opacity:0}
  .splash-mascot,.splash-greeting{animation:none!important;opacity:1;transform:none}
  .splash-core{animation:none!important;opacity:1;transform:translate(-50%,-50%)}
  .splash-dots span{animation-name:splashDot!important;animation-duration:1.1s!important;animation-iteration-count:infinite!important}
}
/* ── FAQ / AJUDA ── */
.faq-section{margin-bottom:24px}
.faq-section-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--text-2xs);color:var(--fg2);text-transform:uppercase;margin-bottom:12px;padding:0 2px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;overflow:hidden;background:var(--surface);transition:border-color .15s}
.faq-item.open{border-color:var(--primary)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 16px;background:none;border:none;cursor:pointer;font-size:var(--text-body);font-weight:600;color:var(--fg);text-align:left;font-family:inherit;line-height:var(--leading-snug)}
.faq-q:hover{background:var(--bg2)}
.faq-icon{font-size:20px!important;color:var(--fg2);flex-shrink:0;transition:transform .2s}
.faq-item.open .faq-icon{transform:rotate(180deg);color:var(--primary)}
.faq-a{display:none;padding:0 16px 16px;font-size:var(--text-body);color:var(--fg2)}
.faq-item.open .faq-a{display:block}
.faq-a strong{color:var(--fg)}
.faq-a code{background:var(--bg2);padding:1px 6px;border-radius:4px;font-size:12px;font-family:monospace}
.faq-a ul{margin:8px 0 8px 18px;padding:0}
.faq-a ul li{margin-bottom:4px}
.faq-highlight{background:var(--primary-light);color:var(--primary);font-weight:700;padding:1px 6px;border-radius:4px;font-size:12px}

/* ── Refinamento premium 2026-07-28 ───────────────────────────────────────
   Camada visual compartilhada. Mantém integralmente a paleta Indigo Electric
   e usa apenas as variáveis dos temas claro/escuro já existentes. */
.page-header{margin-bottom:24px}
.page-header>div:first-child{min-width:0}
/* Retorno de subpágina. Fica acima do cabeçalho, não dentro dele, para que o título e o
   subtítulo mantenham a mesma posição de todas as outras telas. */
.page-back{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:4px;
  color:var(--fg2);font-size:var(--text-xs);font-weight:600;cursor:pointer;text-decoration:none
}
.page-back:hover{color:var(--primary)}
.page-back .material-icons-round{font-size:18px}
.page-subtitle{line-height:1.5}
.card,.account-card,.goal-card,.faq-item{box-shadow:var(--elevation-card)}
.card{transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.card:hover{border-color:var(--border-strong);box-shadow:var(--elevation-raised)}
.page>.card-grid,.page>.card{margin-top:0}
.card[style*="padding:0"],.cashflow-table-card{padding:0}

/* Navegação móvel e menu Mais */
.mobile-drawer{
  max-height:min(82dvh,720px);overflow-y:auto;overscroll-behavior:contain;
  padding:14px 16px calc(76px + env(safe-area-inset-bottom,0px))
}
.mobile-drawer-handle{position:sticky;top:0;z-index:1;margin-bottom:14px}
.mobile-drawer-item{min-height:48px;padding:11px 12px}
.mobile-drawer-item:active{background:var(--primary-light);color:var(--primary)}
.mobile-drawer-item:active .material-icons-round{color:var(--primary)}

/* Seletores de período e filtros */
.month-selector{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;user-select:none}
.month-selector-arrow{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--fg2);cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)
}
.month-selector-arrow:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.month-selector-arrow .material-icons-round{font-size:20px}
.month-selector-trigger{
  position:relative;min-width:190px;height:44px;padding:0 13px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface);display:flex;align-items:center;justify-content:center;
  gap:8px;color:var(--fg);cursor:pointer;overflow:hidden
}
.month-selector-trigger:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.month-selector-trigger>.material-icons-round:first-child{font-size:18px;color:var(--primary)}
.month-selector-trigger #txMonthLabel{font-family:'DM Serif Display',serif;font-size:16px;white-space:nowrap}
.month-selector-chevron{font-size:18px!important;color:var(--fg2)}
.month-selector-trigger input[type="month"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.period-tabs{min-width:0}
.period-tab{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-main-tabs{gap:3px;padding:3px}
.tx-type-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,330px);gap:2px;padding:3px;margin-bottom:14px}
.filter-row{align-items:center}
.search-box{min-width:min(200px,100%)}

/* Resumos financeiros reutilizados em Transações e Balanços */
.finance-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px;align-items:stretch}
.finance-summary-grid.is-single{grid-template-columns:minmax(220px,1fr)}
/* O tipo do resumo e comunicado pela tinta do icone, nao por uma barra colorida
   na borda: a barra e o sinal mais reconhecivel de card generico e disputa
   atencao com o proprio valor. */
.finance-summary-card{
  position:relative;display:flex;align-items:center;gap:12px;
  min-width:0;padding:16px;background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius);box-shadow:var(--elevation-card);overflow:hidden
}
.finance-summary-icon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:var(--primary-light);color:var(--primary)
}
.finance-summary-card.is-expense .finance-summary-icon{background:var(--expense-bg);color:var(--expense)}
.finance-summary-icon .material-icons-round{font-size:20px}
.finance-summary-card>div:last-child{min-width:0}
.finance-summary-value{
  margin-top:4px;font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* Categorias */
.category-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.category-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--elevation-card)
}
.category-panel-header{
  display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface2);
  border-bottom:1px solid var(--border)
}
.category-panel-header>.material-icons-round{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--primary-light);color:var(--income);font-size:19px
}
.category-panel.is-expense .category-panel-header>.material-icons-round{background:var(--expense-bg);color:var(--expense)}
.category-panel-header div{display:flex;flex-direction:column;min-width:0}
.category-panel-header strong{font-size:var(--text-body)}
.category-panel-header small{font-size:var(--text-xs);color:var(--fg2);margin-top:3px}
.category-panel-list{padding:8px 8px 12px}
.category-row{
  display:flex;align-items:center;gap:12px;padding:12px;border:1px solid transparent;
  border-radius:10px;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out);outline:none
}
.category-row+.category-row{margin-top:4px}
.category-row:hover,.category-row:focus-visible{background:var(--bg2);border-color:var(--category-color)}
/* A cor da categoria tinge o fundo e a borda do próprio ícone. Antes era uma faixa de 3px
   só na lateral esquerda, que lia como cor vazando por trás do quadrado — e o brief proíbe
   barra colorida decorativa: o tipo se comunica pela tinta do ícone somada à elevação. */
.category-row-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:19px;
  background:color-mix(in srgb,var(--category-color) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--category-color) 32%,transparent)
}
.category-row-info{display:flex;flex-direction:column;flex:1;min-width:0}
.category-row-info strong{font-size:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-row-info small{font-size:var(--text-2xs);color:var(--fg2);margin-top:3px;line-height:var(--leading-snug)}
.category-row-edit{font-size:16px;color:var(--fg2);opacity:.45}
.category-empty{min-height:150px;padding:24px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--fg2)}
.category-empty>.material-icons-round{font-size:36px;opacity:.35;margin-bottom:12px}
.category-empty strong{font-size:var(--text-body);color:var(--fg)}
.category-empty small{font-size:var(--text-xs);line-height:var(--leading-normal);margin-top:6px;max-width:34ch}
.category-icon-option{
  font-size:22px;width:44px;height:44px;border-radius:10px;border:2px solid var(--border);
  background:var(--bg2);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)
}
.category-icon-option:hover,.category-icon-option.selected{border-color:var(--primary);background:var(--primary-light)}
.category-icon-option.selected{box-shadow:var(--elevation-selected);transform:translateY(-1px)}
.category-color-option{
  width:44px;height:44px;border-radius:10px;background:var(--category-color);
  border:3px solid transparent;cursor:pointer;transition:transform var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)
}
.category-color-option:hover{transform:translateY(-1px)}
.category-color-option.selected{border-color:var(--fg);box-shadow:0 0 0 2px var(--surface),var(--elevation-selected);transform:translateY(-1px)}

/* Parceria: estados explícitos para consistência visual */
.partnership-view{display:flex;flex-direction:column;gap:16px}
.partnership-view>.card,.partnership-view>.sync-banner{margin-bottom:0!important}
.partner-profile-card{border-color:color-mix(in srgb,var(--primary) 26%,var(--border-subtle))}
.partner-code-card{border-color:var(--border-strong)}
.partner-actions{display:flex;gap:10px}
.partner-actions.is-primary{margin-bottom:-4px}
.partner-empty-state{text-align:center;padding:26px 0 12px}
.partner-empty-state>.material-icons-round{font-size:52px;color:var(--primary);opacity:.28}
.partner-empty-state>div{font-size:var(--text-lg);font-weight:700;letter-spacing:var(--track-tight);color:var(--fg);margin-top:12px}
.partner-empty-state p{margin-top:8px;max-width:44ch;margin-inline:auto;line-height:var(--leading-relaxed)}
.partner-step-card{margin-bottom:0!important}
.partner-step-card.is-locked{background:var(--surface2)}
.partnership-view.is-pending .partner-code-card{border-color:var(--primary)}
.partnership-view.is-active .partner-profile-card{box-shadow:var(--elevation-raised)}

/* Fluxo de caixa */
.cashflow-view-tabs{width:fit-content;max-width:100%;margin-bottom:12px}
/* Linha de filtro com rótulo inline. Compartilhada por Fluxo de Caixa e Transações para
   que o mesmo tipo de refinamento tenha a mesma geometria nos dois painéis. */
.cashflow-status-row,.filter-inline-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.filter-inline-row .period-tabs{flex:1;min-width:0;margin-bottom:0}
.cashflow-control-label{font-size:11px;font-weight:700;color:var(--fg2);text-transform:uppercase;letter-spacing:.06em}
.cashflow-status-tabs{width:fit-content;max-width:100%;margin:0;padding:3px;gap:2px}
/* min-height 44px: o alvo de toque real é o <label> inteiro, não o quadrado do checkbox.
   O checkbox nativo desenha 13×13px; subir para 18px o deixa visível e alcançável sem
   transformar o controle num botão desproporcional. */
.cashflow-mode-toggle{
  display:inline-flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:16px;min-height:44px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);
  font-size:12px;color:var(--fg2);cursor:pointer;line-height:1.35
}
.cashflow-mode-toggle input{accent-color:var(--primary);width:18px;height:18px;flex-shrink:0;cursor:pointer}
.cashflow-year-selector{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cashflow-mobile-view-toggle,.cashflow-block-view{display:none}
.cashflow-table-card{overflow:hidden}
.cf-row[style*="var(--primary-light)"]{box-shadow:inset 3px 0 0 var(--primary)}
#cashflowContent .hscroll{overscroll-behavior-x:contain}

/* Modais: respeitam barra de status e área de gestos no Android */
.modal-backdrop{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.modal.modal-tall{max-height:min(92dvh,860px)}
.modal-header{position:relative}

/* Previa da importacao de backup (ver abrirPreviaImportacao em render-dataio.js) */
.import-vazio{padding:16px 4px;text-align:center;color:var(--fg2);font-size:var(--text-sm)}
.import-grupo{border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:12px}
/* min-height 44px: o alvo de toque real e o label inteiro, nao so o quadrado do checkbox,
   mesmo padrao ja usado em .cashflow-mode-toggle. */
.import-grupo-head{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:var(--text-sm);color:var(--fg)}
.import-grupo-head input{accent-color:var(--primary);width:18px;height:18px;flex-shrink:0;cursor:pointer}
.import-grupo-aviso{margin:4px 0 0;padding:8px 10px;background:var(--expense-bg);color:var(--expense);border-radius:var(--radius-control);font-size:var(--text-xs);font-weight:600;line-height:1.4}
.import-grupo summary{margin-top:8px;min-height:44px;display:flex;align-items:center;font-size:var(--text-xs);color:var(--primary);font-weight:700;cursor:pointer}
.import-grupo ul{list-style:none;margin:0;padding:8px 0 0;max-height:180px;overflow-y:auto;border-top:1px solid var(--border)}
.import-grupo li{font-size:var(--text-xs);color:var(--fg2);padding:5px 0;line-height:1.4}

/* Acabamento das demais telas dinâmicas */
#settingsContent>.card{margin-bottom:16px!important}
#settingsContent>.card:last-of-type{margin-bottom:0!important}
#helpContent .faq-section:last-child{margin-bottom:0}
.faq-section{margin-bottom:20px}
.faq-section-title{padding:0 4px}
.faq-item:hover{border-color:var(--primary)}
.account-card,.goal-card{border-color:var(--border-subtle)}
#reportsCatList>.card,#reportsCatList .card{overflow:hidden}

@media(max-width:768px){
  .page{padding:18px 14px}
  .page-header{margin-bottom:20px}
  .page-title{line-height:1.16}
  .page-subtitle{font-size:var(--text-sm)}
  .month-summary-collapsed .month-summary-toggle{margin-bottom:7px}
  .month-summary-collapsed #onboardingChecklist,.month-summary-collapsed #dashUpdateBanner{margin-top:8px}
  .month-selector{gap:6px}
  .month-selector-arrow{width:44px;height:44px;border-radius:11px}
  .month-selector-trigger{min-width:0;flex:1;max-width:220px;height:44px;padding-inline:9px}
  .month-selector-trigger #txMonthLabel{font-size:14px}
  .tx-main-tabs .period-tab{padding:8px 3px;font-size:11px;letter-spacing:-.015em}
  .tx-type-tabs{width:100%}
  .tx-type-tabs .period-tab{padding:7px 6px!important}
  .finance-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .finance-summary-grid .finance-summary-card.is-balance{grid-column:1/-1}
  .finance-summary-grid.is-single{grid-template-columns:1fr}
  .finance-summary-card{padding:12px;gap:10px}
  .finance-summary-icon{width:32px;height:32px;border-radius:9px}
  .finance-summary-value{font-size:16px}
  .category-panels{grid-template-columns:1fr;gap:12px}
  .category-panel-header{padding:14px}
  .category-row-edit{display:none}
  .partner-actions{flex-direction:column;gap:8px}
  .partner-code{font-size:20px!important;letter-spacing:2px!important;padding:14px 10px}
  .cashflow-view-tabs{width:100%}
  /* O rótulo fica na mesma linha das abas: empilhado, custava mais uma faixa de altura
     numa tela que já empilhava cinco blocos de controle antes do primeiro dado. */
  .cashflow-status-row{align-items:center;flex-direction:row;gap:8px}
  .cashflow-status-row .period-tabs{flex:1;min-width:0}
  .cashflow-status-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .cashflow-status-tabs .period-tab{padding:8px 4px;font-size:var(--text-xs)}
  /* "Personalizado" transbordava 3px em 360px. Menos padding lateral resolve sem descer
     abaixo do piso de 11px, que valeria só para as abas de Transações. */
  .cashflow-view-tabs .period-tab{padding-inline:4px;font-size:var(--text-xs)}
  .cashflow-mode-toggle{display:flex;width:100%;align-items:flex-start}
  .cashflow-year-selector{flex-wrap:nowrap;overflow-x:auto;padding:2px 1px 6px;scrollbar-width:none}
  .cashflow-year-selector::-webkit-scrollbar{display:none}
  .cashflow-year-selector>button{flex-shrink:0}
  .cashflow-year-selector>div{flex:0 0 100%}
  .cashflow-mobile-view-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .cashflow-mobile-view-toggle>span{font-size:11px;font-weight:700;color:var(--fg2);text-transform:uppercase;letter-spacing:.05em}
  .cashflow-mobile-view-toggle .period-tabs{width:auto;margin:0;padding:3px;gap:2px}
  .cashflow-mobile-view-toggle .period-tab{display:flex;align-items:center;gap:4px;padding:6px 9px;font-size:11px}
  .cashflow-mobile-view-toggle .material-icons-round{font-size:14px}
  .cashflow-monthly-view .cashflow-table-view,.cashflow-monthly-view .cashflow-block-view{display:none}
  .cashflow-monthly-view.is-blocks .cashflow-block-view{display:grid;gap:8px}
  .cashflow-monthly-view.is-table .cashflow-table-view{display:block}
  .cashflow-month-block{
    width:100%;display:block;padding:12px;border:1px solid var(--border);border-radius:12px;
    background:var(--surface);color:var(--fg);font-family:'DM Sans',sans-serif;text-align:left;
    box-shadow:0 2px 8px var(--shadow)
  }
  button.cashflow-month-block{cursor:pointer}
  .cashflow-month-block.is-current{border-color:var(--primary);box-shadow:inset 3px 0 0 var(--primary),0 2px 8px var(--shadow)}
  .cashflow-month-block.is-empty{opacity:.68;box-shadow:none}
  .cashflow-month-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  .cashflow-month-block-head>strong{font-size:var(--text-body)}
  .cashflow-month-block-head>span{font-size:var(--text-2xs);color:var(--fg2)}
  .cashflow-block-composition{display:flex;align-items:center;gap:4px}
  .cashflow-block-composition>div{margin-top:3px!important;width:78px!important}
  .cashflow-block-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;margin-top:12px}
  .cashflow-block-values>span{display:flex;flex-direction:column;min-width:0;font-size:13px}
  .cashflow-block-values small{font-size:var(--text-2xs);color:var(--fg2);text-transform:uppercase;margin-bottom:4px}
  .cashflow-block-values b{font-family:var(--font-display);font-size:var(--text-base);letter-spacing:var(--track-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cashflow-month-block.is-locked{display:flex;align-items:center;justify-content:space-between;color:var(--fg2);border-style:dashed;box-shadow:none}
  .cashflow-month-block-title{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700}
  .cashflow-month-block-title .material-icons-round{font-size:14px;color:var(--primary)}
  .cashflow-month-block-locked{font-size:11px;color:var(--primary);font-weight:700}
  /* Superficie, e nao --primary-light, atras do bloco de total: o vermelho de despesa sobre
     o tint indigo dava 4.38 no tema claro, abaixo do piso. A borda de 2px em --primary ja
     e o que distingue o total dos meses; o tint por baixo era redundante e custava o
     contraste justamente no numero que fecha o ano. */
  .cashflow-total-block{margin-top:5px;border:2px solid var(--primary);background:var(--surface);box-shadow:none}
  .cashflow-total-block .cashflow-month-block-head>span{color:var(--primary)}
  .tx-item,.sched-item{padding:12px;gap:10px}
  .tx-icon{width:36px;height:36px}
  .tx-amount{font-size:var(--text-body)}
  .fab{right:18px}
}

@media(max-width:360px){
  .page{padding-inline:11px}
  .tx-main-tabs .period-tab{font-size:10px}
  .month-selector-trigger>.material-icons-round:first-child{display:none}
  .finance-summary-card{padding-inline:9px}
  .finance-summary-value{font-size:var(--text-body)}
}

@media(max-width:639px){
  .modal-backdrop{padding-top:max(12px,env(safe-area-inset-top,0px))}
  .modal{
    max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px));
    border-radius:18px 18px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px))
  }
  .modal.modal-tall{max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px))}
  .modal-header{margin-bottom:20px}
}

/* AdMob: desbloqueio recompensado discreto */
.ad-unlock-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--surface);
  box-shadow:var(--elevation-card);margin-bottom:16px
}
.ad-unlock-main{display:flex;align-items:center;gap:12px;min-width:0}
.ad-unlock-main>.material-icons-round{
  font-size:22px;color:var(--primary);background:var(--primary-light);
  border-radius:10px;padding:8px;flex-shrink:0
}
.ad-unlock-main strong{display:block;font-size:var(--text-body);color:var(--fg);line-height:var(--leading-snug)}
.ad-unlock-main small{display:block;font-size:var(--text-xs);color:var(--fg2);margin-top:4px}
.ad-reward-btn{white-space:nowrap;flex-shrink:0}
.category-panels>.ad-unlock-card{grid-column:1/-1}
/* Dentro de uma lista de transações o card precisa respirar dos dois lados, não só embaixo,
   e dispensa a sombra: ele já está sobre a superfície do card que envolve a lista. */
.ad-unlock-inline>.ad-unlock-card{margin:12px 0;box-shadow:none;background:var(--bg)}
.report-feature-lock{text-align:center;padding:24px 16px}
@media(max-width:560px){
  .ad-unlock-card{align-items:stretch;flex-direction:column}
  .ad-reward-btn{width:100%;justify-content:center}
}

/* ── UX mobile-first 2026-08 ───────────────────────────────────────────────
   Camada final dos fluxos recorrentes. Usa os tokens existentes e não altera
   contratos de dados, IDs ou comportamento nativo. */
[hidden]{display:none!important}
:where(button,a,input,select,textarea,[role="button"]):focus-visible{
  outline:3px solid var(--primary);outline-offset:2px
}
button{touch-action:manipulation}
.page-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
/* Ações do cabeçalho (exportar, "Como usar") agrupadas à direita do título. */
.page-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Início: a data e o "Como usar" dividem a mesma linha, que antes sobrava vazia.
   O max-width de 64ch do subtítulo o fazia ocupar a linha toda e jogar o botão para
   baixo — aqui ele encolhe para o tamanho do próprio texto. */
.dash-subtitle-row{display:flex;align-items:center;gap:10px;margin-top:2px}
.dash-subtitle-row .page-subtitle{max-width:none;flex:0 1 auto;margin:0}
.dash-subtitle-row .tut-help-btn{margin-left:auto}
/* Cabeçalho do Início: texto (saudação + data) numa coluna, ícones ao lado ocupando
   a altura das DUAS linhas. É isso que fecha o buraco: com a data como irmã da linha
   do título, ela era obrigada a começar abaixo dos ícones de 44px, embora o título
   tenha só 28px - 21px de vazio medidos a 393px. Centralizado, o bloco de ícones não
   dita mais onde a data começa. */
.dash-header{display:flex;align-items:center;gap:12px}
.dash-header-text{flex:1 1 auto;min-width:0}
/* Ícones do Início mais juntos: devolve largura para a saudação caber em uma linha. */
#page-dashboard .page-header-actions{gap:2px}
.section-count,.goals-section-heading small,.accounts-section-heading small{
  min-width:24px;padding:3px 8px;border-radius:999px;background:var(--bg2);color:var(--fg2);
  font-size:var(--text-2xs);font-weight:700;text-align:center
}

/* Resumo financeiro integrado */
.finance-overview-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr);
  align-items:stretch;gap:20px;margin-bottom:16px;padding:20px;background:var(--surface);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--elevation-card);overflow:hidden
}
.finance-overview-primary{display:flex;flex-direction:column;justify-content:center;min-width:0}
.finance-overview-primary .stat-label{margin:0 0 8px}
.finance-overview-balance{
  font-family:var(--font-display);font-size:var(--text-2xl);color:var(--fg);
  /* Mesmo caso de .account-card-balance: o overflow:hidden que serve ao ellipsis
     horizontal também corta na vertical, e --leading-tight não cabe a linha da serif. */
  line-height:var(--leading-snug);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.finance-overview-status{font-size:var(--text-xs);color:var(--fg2);margin-top:8px}
.finance-overview-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* Alinhado ao topo: com o rótulo podendo ocupar duas linhas, centralizar deixava os dois
   cards da grade com o ícone e o número em alturas diferentes. */
.finance-overview-metric{
  min-width:0;display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--radius-button);background:var(--bg2)
}
.finance-overview-metric>.material-icons-round{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:9px;background:var(--surface);color:var(--primary);font-size:17px
}
.finance-overview-metric.is-income>.material-icons-round{color:var(--income)}
.finance-overview-metric.is-expense>.material-icons-round{color:var(--expense)}
.finance-overview-metric.is-reserve>.material-icons-round{color:var(--warning)}
.finance-overview-metric>div{display:flex;flex-direction:column;min-width:0}
/* O rótulo quebra linha: truncado virava "Em contas separa…", que não diz o que o número é. */
.finance-overview-metric small{font-size:var(--text-2xs);color:var(--fg2);line-height:var(--leading-snug)}
.finance-overview-metric strong{margin-top:3px;font-size:var(--text-body);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Valor longo encolhe em vez de virar "R$ 12.345.6…": o brief proíbe substituir texto
   financeiro essencial por reticências. A classe é posta no render, pela contagem de
   caracteres do valor já formatado - o valor curto não muda de tamanho, que era o defeito
   de tentar resolver isso com clamp de container: numa caixa de ~105px o mínimo vencia
   sempre e TODOS os valores caíam para 11px. */
.finance-overview-metric strong.is-long{font-size:var(--text-xs);letter-spacing:-.01em}
.finance-overview-metric strong.is-xlong{font-size:var(--text-2xs);letter-spacing:-.015em}
.finance-overview-metric.is-income strong{color:var(--income)}
.finance-overview-metric.is-expense strong{color:var(--expense)}
.finance-overview-card.is-single{grid-template-columns:1fr;min-height:86px}
/* Marca d'agua removida: ruido decorativo atras de um valor monetario. */
.finance-overview-watermark{display:none}

/* Menu contextual de itens */
.item-actions-menu{position:relative;flex-shrink:0;align-self:center;z-index:3}
.item-actions-menu.is-open{z-index:35}
.item-actions-menu-trigger{
  width:44px;height:44px;border:0;border-radius:11px;background:transparent;color:var(--fg2);
  display:flex;align-items:center;justify-content:center;cursor:pointer
}
.item-actions-menu-trigger:hover,.item-actions-menu-trigger[aria-expanded="true"]{background:var(--bg2);color:var(--primary)}
.item-actions-menu-trigger .material-icons-round{font-size:20px}
.item-actions-menu-popover{
  position:absolute;top:calc(100% + 4px);right:0;z-index:40;width:max-content;min-width:190px;padding:6px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 14px 34px var(--shadow-md)
}
.item-actions-menu-item{
  width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--fg);
  display:flex;align-items:center;gap:10px;font:600 13px 'DM Sans',sans-serif;text-align:left;cursor:pointer
}
.item-actions-menu-item:hover{background:var(--bg2)}
.item-actions-menu-item .material-icons-round{font-size:18px;color:var(--fg2)}
.item-actions-menu-item.is-danger{color:var(--expense)}
.item-actions-menu-item.is-danger .material-icons-round{color:var(--expense)}
.item-direct-action{
  width:44px;height:44px;flex:0 0 44px;border:0;border-radius:11px;background:var(--bg2);color:var(--fg2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,transform .15s
}
.item-direct-action:hover{transform:translateY(-1px)}
.item-direct-action .material-icons-round{font-size:20px}
/* A lixeira fica neutra em repouso e só assume o vermelho quando o usuário chega nela.
   Vermelha o tempo todo eram 15 alvos destrutivos gritando na primeira tela de Transações,
   competindo com o vermelho que marca despesa nos próprios valores — e Categorias já
   usava a versão neutra da mesma ação. */
.item-direct-action.is-danger:hover,
.item-direct-action.is-danger:focus-visible{background:var(--expense-bg);color:var(--expense)}
.item-direct-action.is-undo{color:var(--primary)}
.item-direct-action.is-undo:hover{background:var(--primary-light)}

/* Início: contexto financeiro antes da atividade recente */
#page-dashboard.active{display:flex;flex-direction:column}
#page-dashboard>.page-header{order:1}
#onboardingChecklist{order:2}
#page-dashboard>.balance-hero{order:3}
#dashPartnerBanner,#dashUpdateBanner,#dashAndroidAppBanner{order:4}
/* O slot precisa de order explícito: #page-dashboard.active é flex e, sem isso, o padrão
   order:0 jogaria o anúncio para antes do cabeçalho, no topo da tela. Vale para TODO
   filho novo deste container: o card da Mu nasceu sem order e foi parar acima do saldo. */
#dashMuCard{order:5}
#monthSummaryCards{order:6}
#dashAdSlot{order:7}
#dashRecentCard{order:8}
#page-dashboard .page-header{margin-bottom:16px}
/* Hero em grade explícita: os botões ocupam a própria célula, ao lado do rótulo.
   Antes eles eram absolutos no canto superior direito e o valor corria POR BAIXO
   deles assim que passava de ~6 dígitos. Com a grade, a colisão é estruturalmente
   impossível: o valor tem a linha inteira, qualquer que seja o tamanho. */
#page-dashboard .balance-hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label actions" "amount amount" "row row";
  align-content:start;column-gap:12px;
  /* Hero mais slim: o ganho vem do espaçamento, não da altura dos botões — abaixo de
     44px eles ficam difíceis de acertar com o polegar. São ~30px a menos no total. */
  padding:20px;margin-bottom:12px;border-radius:var(--radius-panel);min-height:0
}
/* A área "label" da grade passou a ser ocupada pela LINHA (rótulo + olho); o
   rótulo sozinho não é mais filho direto da grade. */
#page-dashboard .balance-label-row{grid-area:label;align-self:center;margin-bottom:0}
#page-dashboard .balance-label{margin-bottom:0}
#page-dashboard .balance-amount{grid-area:amount;font-size:36px;margin:8px 0 14px}
#page-dashboard .balance-row{grid-area:row;gap:12px;max-width:520px}
#page-dashboard .balance-mini{
  flex:1;min-width:0;padding:12px;border-radius:var(--radius-button);background:var(--hero-tint)
}
#page-dashboard .balance-mini-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-dashboard .balance-mini-val{font-size:var(--text-base);letter-spacing:var(--track-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-dashboard .balance-actions{grid-area:actions;position:static;justify-self:end;align-self:center}
/* Achatados: a caixa visual cai para ~30px e o hero encolhe junto, mas a área de toque
   continua com 44px pelo ::after invisível. É o mesmo recurso do "Como usar" — o que
   engordava o hero era o min-height da caixa, não o tamanho aparente do botão. */
#page-dashboard .balance-action-btn{position:relative;min-height:0;padding:5px 10px;border-radius:9px}
#page-dashboard .balance-action-btn::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
#page-dashboard .balance-actions{gap:6px}
#page-dashboard .balance-actions .month-summary-toggle{
  position:relative;width:44px;min-height:0;height:30px;margin:0;padding:0;justify-content:center;
  border:1px solid rgba(245,245,240,.3);background:var(--hero-tint-strong);color:var(--hero-amount);font-size:0
}
#page-dashboard .balance-actions .month-summary-toggle::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
#page-dashboard .balance-actions .month-summary-toggle:hover{background:var(--hero-tint-hover);color:var(--hero-amount)}
#page-dashboard .balance-actions .month-summary-toggle .material-icons-round{font-size:18px}
#page-dashboard #monthSummaryCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px!important}
#page-dashboard #monthSummaryCards .stat-card{min-height:0;padding:0;border-radius:var(--radius-card);box-shadow:var(--elevation-card);overflow:hidden}
#page-dashboard #monthSummaryCards .stat-card:hover{transform:none}

/* ── Cards do resumo: rótulo + valor + símbolo, e nada mais ──────────────────
   Duas linhas fixas. A primeira leva rótulo e ícone; a segunda entrega a largura
   INTEIRA do card ao valor, que é o que some quando o número é grande. Todo o
   resto (composição, contagens, explicação) foi para o modal de detalhe. */
.stat-card-trigger{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label icon" "value value";
  align-items:center;column-gap:8px;row-gap:10px;
  width:100%;min-height:104px;padding:16px;
  border:0;background:transparent;color:var(--fg);font-family:var(--font-body);
  text-align:left;cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-out)
}
.stat-card-trigger:hover{background:var(--surface-subtle)}
.stat-card-trigger:active{background:var(--primary-light)}
.stat-card-trigger .stat-label{grid-area:label;margin:0;min-width:0;line-height:var(--leading-snug)}
.stat-card-trigger .stat-icon{
  grid-area:icon;position:static;width:32px;height:32px;flex-shrink:0;
  border-radius:10px;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center
}
.stat-card-trigger .stat-icon .material-icons-round{font-size:18px}
.stat-card-trigger .stat-value{
  /* padding-right reserva o lugar do símbolo de estado sem depender de :has(),
     que ainda falha em WebView antigo. */
  grid-area:value;display:block;min-width:0;padding-right:20px;
  font-size:var(--text-xl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* Símbolo de estado: acompanha o valor na mesma linha, sem roubar largura dele. */
.stat-flag{display:none}
.stat-card-trigger .stat-value+.stat-flag{
  grid-area:value;justify-self:end;align-self:center;pointer-events:none
}
.stat-flag.is-good,.stat-flag.is-warn{display:flex;align-items:center}
.stat-flag .material-icons-round{font-size:16px}
.stat-flag.is-good .material-icons-round{color:var(--income);opacity:.7}
.stat-flag.is-warn .material-icons-round{color:var(--expense)}
/* ── Modal de detalhe do card ── */
.dash-detail-hero{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.dash-detail-hero-label{font-size:var(--text-xs);font-weight:600;color:var(--fg2)}
.dash-detail-hero-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;line-height:var(--leading-tight);letter-spacing:var(--track-display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dash-detail-status{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--text-sm);font-weight:600}
.dash-detail-status .material-icons-round{font-size:18px}
.dash-detail-status.is-good{color:var(--income)}
.dash-detail-status.is-warn{color:var(--expense)}
.dash-detail-rows{display:flex;flex-direction:column;margin-top:4px}
.dash-detail-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--text-body);color:var(--fg2)}
.dash-detail-row:last-child{border-bottom:0}
.dash-detail-row strong{color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-detail-row strong.is-income{color:var(--income)}
.dash-detail-row strong.is-expense{color:var(--expense)}
.dash-detail-note{margin-top:12px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--fg2);max-width:52ch}
#dashRecentCard{padding:16px;margin-bottom:4px;border-radius:16px}
#dashRecentCard .section-title{margin-bottom:8px;font-size:var(--text-base)}
#dashRecentCard .tx-list{gap:0}
#dashRecentCard .tx-item{padding-inline:4px;border:0;border-radius:0;border-top:1px solid var(--border);box-shadow:none}
#dashRecentCard .tx-item:first-child{border-top:0}
#dashRecentCard .tx-item:hover{box-shadow:none}
#onboardingChecklist>.card{border-color:var(--border-strong)!important;background:var(--surface-subtle)}

/* Transações */
#page-transactions .page-header{margin-bottom:16px}
#page-transactions .page-header>.month-selector{margin-top:10px}
#page-transactions .tx-main-tabs{margin-bottom:14px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
#page-transactions .tx-main-tabs::-webkit-scrollbar{display:none}
#page-transactions .filter-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:1px}
#page-transactions .filter-row::-webkit-scrollbar{display:none}
#page-transactions .filter-chip{min-width:max-content;min-height:44px;padding:8px 16px}
#page-transactions .search-box{min-width:100%;overflow:visible}
#page-transactions input[type="search"]::-webkit-search-cancel-button{cursor:pointer}
.tx-context-note{display:flex;align-items:flex-start;gap:10px;padding:12px;margin-bottom:16px;border:1px solid var(--border);border-radius:var(--radius-button);background:var(--surface);color:var(--fg2);font-size:var(--text-sm)}
.tx-context-note>.material-icons-round{font-size:18px;color:var(--warning);flex-shrink:0}
#page-transactions .finance-overview-card{margin-bottom:14px}
#page-transactions .tx-list,#page-transactions #schedList{gap:8px}
#page-transactions .tx-item{min-height:64px;padding:10px 10px 10px 11px;border-radius:13px}
#page-transactions .sched-item{min-height:0;padding:8px;gap:8px;border-radius:13px}
#page-transactions .tx-item[onclick]:active,#page-transactions .sched-item[onclick]:active{background:var(--primary-light)}
#page-transactions .tx-actions{display:none}
#page-transactions .empty{border:1px dashed var(--border);border-radius:16px;background:var(--surface)}

/* Balanços */
.reports-page-header{margin-bottom:16px}
#page-reports>.period-tabs{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
#page-reports>.period-tabs::-webkit-scrollbar{display:none}
#page-reports>.period-tabs .period-tab{min-width:96px;flex:1 0 auto}
.report-period-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
.period-nav-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--fg2);cursor:pointer
}
.period-nav-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.report-period-current{
  min-width:190px;height:44px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--fg);font-weight:700
}
/* `text-transform:capitalize` capitaliza TODA palavra e escrevia "Agosto De 2026".
   ::first-letter levanta so a inicial do rotulo, preservando a preposicao. */
#reportPeriodLabel::first-letter{text-transform:uppercase}
.report-period-current>.material-icons-round{font-size:18px;color:var(--primary)}
#reportPeriodLabel{font-size:14px;white-space:nowrap}
#page-reports>.card{padding:20px;border-radius:var(--radius-card)}
#page-reports .bar-chart{gap:14px}
#page-reports .bar-row{gap:6px}
#page-reports .bar-track{height:7px}
#page-reports #catChart .bar-row{padding:10px!important;margin:0!important;border:1px solid transparent}
#page-reports #catChart .bar-row:hover{border-color:var(--border)}

/* Contas */
.accounts-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.accounts-toolbar>div:first-child{display:flex;flex-direction:column;min-width:0}
.accounts-toolbar>div:first-child strong{font-size:var(--text-body);color:var(--fg)}
.accounts-toolbar>div:first-child span{margin-top:4px;font-size:var(--text-xs);color:var(--fg2)}
.accounts-toolbar-actions{display:flex;gap:8px;flex-shrink:0}
.accounts-overview{margin-bottom:20px}
.accounts-section-heading,.goals-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:20px 2px 12px;font-size:var(--text-body);font-weight:800;letter-spacing:var(--track-tight);color:var(--fg)}
.accounts-section-heading.is-muted{color:var(--fg2)}
.accounts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* min-width:0 aqui é o elo que faltava. O card é item de GRADE em .accounts-list, e item de
   grade também nasce com min-width:auto: com um nome longo o card inchava para 461px dentro
   de uma trilha de 365px, e todo mundo abaixo dele herdava a largura inflada - por isso o
   ellipsis do nome nunca disparava e a seta de expandir saía da tela. */
.ux-account-card{padding:0;min-width:0;overflow:visible;border-radius:16px;transform:none!important}
.ux-account-card.is-expanded{border-color:var(--primary);box-shadow:var(--elevation-selected);transform:translateY(-1px)!important}
.ux-account-card::before{height:3px;border-radius:16px 16px 0 0}
.account-card-main{position:relative;display:flex;align-items:stretch;min-width:0}
.account-card-toggle{
  flex:1;min-width:0;min-height:102px;padding:16px 6px 14px 16px;border:0;border-radius:16px;background:transparent;
  display:flex;align-items:center;gap:12px;color:var(--fg);font-family:'DM Sans',sans-serif;text-align:left;cursor:pointer
}
.account-card-toggle:hover{background:var(--surface2)}
.ux-account-card .account-card-icon{width:44px;height:44px;margin:0;flex-shrink:0}
.account-card-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.account-card-heading{display:flex;align-items:center;gap:7px;min-width:0}
/* min-width:0 no PRÓPRIO nome, e não só no .account-card-copy. Como item de flex ele nasce
   com min-width:auto e se recusa a encolher abaixo do texto, então o ellipsis nunca era
   acionado: a partir de ~40 caracteres o nome empurrava o crachá e a seta de expandir para
   fora da tela (medido: +28px aos 44 caracteres) e o card ficava impossível de abrir. */
.ux-account-card .account-card-name{margin:0;min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* --leading-tight (1.1 → 26,4px) é menor que a linha real de DM Serif Display em 24px (29px),
   e o overflow:hidden que serve ao ellipsis horizontal ceifava os descendentes do valor:
   o saldo aparecia cortado em todas as contas. --leading-snug (1.3 → 31,2px) cabe. */
.ux-account-card .account-card-balance{margin-top:5px;font-size:24px;line-height:var(--leading-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-card-chevron{font-size:20px;color:var(--fg2);flex-shrink:0}
.account-card-progress{display:flex;flex-direction:column;gap:4px;margin-top:12px;max-width:210px}
.account-card-progress>span{height:4px;border-radius:3px;background:var(--bg2);overflow:hidden}
.account-card-progress i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.account-card-progress small{font-size:var(--text-2xs);color:var(--fg2);line-height:var(--leading-snug)}
.ux-account-card .item-actions-menu{margin-right:5px}
.account-card-details{padding:0 16px 16px;border-top:1px solid var(--border)}
.account-detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;font-size:var(--text-xs);color:var(--fg2)}
.account-detail-row strong{color:var(--fg);white-space:nowrap}
.account-detail-hint{display:flex;align-items:flex-start;gap:8px;padding-top:12px;font-size:var(--text-xs);color:var(--fg2)}
.account-detail-hint>.material-icons-round{font-size:18px;color:var(--warning)}
.account-goals-link{width:100%;min-height:44px;margin-top:12px;padding:8px 0;border:0;border-top:1px solid var(--border);background:transparent;color:var(--primary);display:flex;align-items:center;justify-content:space-between;font:700 12px 'DM Sans',sans-serif;cursor:pointer}
.account-goals-link>span{display:flex;align-items:center;gap:6px}
.account-goals-link .material-icons-round{font-size:18px}
.account-card-static{flex:1;min-height:76px;padding:14px 6px 14px 16px;display:flex;align-items:center;gap:11px}
.accounts-list.is-inactive{opacity:.72}
.account-history-card{margin-top:24px!important;padding:16px}
.account-history-card .tx-list{gap:0}
.account-history-item{padding-inline:4px;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none}
.account-history-item:first-child{border-top:0}

/* Objetivos: progresso, viabilidade e celebração */
.goals-hero{position:relative;padding:24px;margin-bottom:16px;border:1px solid var(--border-strong);border-radius:var(--radius-panel);overflow:hidden;color:var(--hero-amount);background:var(--hero-bg);box-shadow:var(--elevation-raised)}

.goals-hero-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.goals-hero-top>div{display:flex;flex-direction:column;min-width:0}
.goals-eyebrow{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;opacity:.72}
.goals-hero-top strong{margin-top:8px;font:400 var(--text-2xl) var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goals-hero-top p{margin-top:8px;font-size:var(--text-sm);line-height:var(--leading-normal);opacity:.82;max-width:46ch}
.goals-hero-icon{font-size:38px;opacity:.9}
.goals-hero-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.goals-hero-stats>span{display:flex;flex-direction:column;padding:12px;border-radius:var(--radius-button);background:var(--hero-tint)}
.goals-hero-stats strong{font-size:var(--text-base);letter-spacing:var(--track-tight)}
.goals-hero-stats small{margin-top:3px;font-size:var(--text-2xs);opacity:.72;line-height:var(--leading-snug)}
.goals-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 2px 12px}
.goals-toolbar>div{display:flex;flex-direction:column;min-width:0}
.goals-toolbar strong{font-size:var(--text-body)}
.goals-toolbar span{margin-top:4px;font-size:var(--text-xs);color:var(--fg2)}
.goals-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ux-goal-card{padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--elevation-card)}
.ux-goal-card.is-viable{border-color:var(--border-strong);background:var(--surface-subtle);box-shadow:var(--elevation-card)}
.goal-card-head{display:flex;align-items:center;gap:10px;min-width:0}
.goal-card-icon{width:40px;height:40px;border-radius:11px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.goal-card-title{display:flex;flex-direction:column;flex:1;min-width:0}
.goal-card-title strong{font-size:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-card-title small{margin-top:3px;font-size:var(--text-2xs);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-progress-layout{display:flex;align-items:center;gap:16px;margin-top:16px}
.goal-progress-ring{position:relative;width:64px;height:64px;padding:6px;border-radius:50%;background:conic-gradient(var(--goal-progress-color) var(--goal-progress),var(--bg2) 0);flex-shrink:0}
.goal-progress-ring::before{content:'';display:block;width:100%;height:100%;border-radius:50%;background:var(--surface)}
.goal-progress-ring span{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--fg)}
.goal-progress-copy{display:flex;flex-direction:column;min-width:0}
.goal-progress-copy small{font-size:var(--text-2xs);color:var(--fg2)}
.goal-progress-copy strong{margin-top:4px;font:400 var(--text-lg)/var(--leading-tight) var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-progress-copy span{margin-top:6px;font-size:var(--text-2xs);color:var(--fg2);line-height:var(--leading-snug)}
.goal-progress-copy span.is-success{color:var(--income);font-weight:700}
.goal-linear-progress{height:5px;margin-top:16px;border-radius:4px;background:var(--bg2);overflow:hidden}
.goal-linear-progress span{display:block;height:100%;border-radius:inherit}
.goal-card-actions{margin-top:16px}
.goal-combinations{margin-top:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.goal-combinations>summary{min-height:66px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.goal-combinations>summary::-webkit-details-marker{display:none}
.goal-combinations>summary>span:first-child{display:flex;align-items:center;gap:10px}
.goal-combinations>summary>span:first-child>.material-icons-round{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--warning-bg);color:var(--warning);font-size:20px}
.goal-combinations>summary>span>span{display:flex;flex-direction:column}
.goal-combinations>summary strong{font-size:var(--text-body)}
.goal-combinations>summary small{margin-top:3px;font-size:var(--text-xs);color:var(--fg2)}
.goal-details-chevron{font-size:20px;color:var(--fg2);transition:transform .2s}
.goal-combinations[open] .goal-details-chevron{transform:rotate(180deg)}
.goal-combinations>div{padding:0 16px 12px}
.goal-combination-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--fg2)}
.goal-combination-row strong{color:var(--income);white-space:nowrap}
.goals-section-heading.is-achievements{margin-top:24px}
.goal-achievements-summary{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--border-strong);border-radius:var(--radius-card);background:var(--surface-subtle)}
.goal-achievements-summary>.material-icons-round{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:var(--warning-bg);color:var(--warning);font-size:24px}
.goal-achievements-summary>div{display:flex;flex-direction:column;min-width:0}
.goal-achievements-summary small{font-size:var(--text-2xs);color:var(--fg2)}
.goal-achievements-summary strong{font:400 var(--text-xl)/var(--leading-tight) var(--font-display);color:var(--fg)}
.goal-achievements-summary p{margin-top:4px;font-size:var(--text-2xs);color:var(--fg2);line-height:var(--leading-snug)}
.completed-goals-list{margin-top:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--surface);overflow:hidden}
.completed-goal-item{min-height:60px;padding:12px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--border)}
.completed-goal-item:first-child{border-top:0}
.completed-goal-check{width:30px;height:30px;border-radius:50%;background:var(--income-bg);color:var(--income);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.completed-goal-check .material-icons-round{font-size:18px}
.completed-goal-item>span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.completed-goal-item strong{font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.completed-goal-item small{margin-top:3px;font-size:var(--text-2xs);color:var(--fg2)}
.completed-goal-item b{font-size:var(--text-xs);color:var(--fg);white-space:nowrap}
.goals-empty-state{border:1px dashed var(--border);border-radius:18px;background:var(--surface)}

.empty.empty-action{padding:32px 20px}
.empty.empty-action>.btn{margin-top:4px}
.empty.empty-action>.btn .material-icons-round{font-size:18px;opacity:1}

/* Overlays de sistema e promoção: mesma linguagem Índigo Elétrico do app. */
.founder-promo-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--primary-light)}
.founder-promo-icon .material-icons-round{font-size:38px}
.founder-promo-cta{margin-bottom:8px}
.blocking-overlay{position:fixed;inset:0;z-index:var(--z-gate);align-items:center;justify-content:center;padding:24px;background:rgba(15,15,26,.94)}
.blocking-overlay-card{width:100%;max-width:420px;padding:28px 24px;border:1px solid var(--border-strong);border-radius:var(--radius-panel);background:var(--surface-overlay);color:var(--fg);text-align:center;box-shadow:var(--elevation-raised)}
.blocking-overlay-icon{font-size:56px;color:var(--primary)}
.blocking-overlay-title{margin-top:12px;font:400 24px/1.15 var(--font-display);color:var(--fg)}
.blocking-overlay-copy{margin-top:12px;font-size:var(--text-base);color:var(--fg2);max-width:40ch;margin-inline:auto}
.blocking-overlay-action{margin-top:22px}
.biometric-lock-overlay{position:fixed;inset:0;z-index:var(--z-biometric);align-items:center;justify-content:center;padding:24px;background:var(--electric-700)}
.biometric-lock-card{width:100%;max-width:340px;color:var(--electric-night-ink);text-align:center}
.biometric-lock-icon{font-size:64px}
.biometric-lock-title{margin-top:14px;font:400 26px/1.15 var(--font-display)}
.biometric-lock-copy{margin-top:8px;font-size:14px;line-height:1.5;opacity:.82}
.biometric-lock-action{width:100%;min-height:48px;margin-top:26px;padding:12px 18px;border:1px solid var(--electric-100);border-radius:var(--radius-button);background:var(--electric-night-ink);color:var(--electric-700);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.biometric-lock-action:hover{background:var(--electric-100);box-shadow:0 0 0 3px rgba(224,231,255,.28)}
.pdf-report-overlay{position:fixed;inset:0;z-index:var(--z-pdf);flex-direction:column;background:var(--electric-canvas)}
.pdf-report-toolbar{display:flex;align-items:center;gap:8px;min-height:64px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--electric-600);color:var(--electric-night-ink);flex-shrink:0}
.pdf-report-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}
.pdf-report-back,.pdf-report-action{min-width:44px;min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--electric-night-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:700;transition:background-color var(--motion-fast) var(--ease-out)}
.pdf-report-action{background:rgba(245,245,240,.14)}
.pdf-report-back:hover,.pdf-report-action:hover{background:rgba(245,245,240,.24)}
.pdf-report-action .material-icons-round{font-size:18px}
.pdf-report-frame{flex:1;width:100%;border:0;background:var(--electric-canvas)}

@media(max-width:600px){
  .pdf-report-toolbar{gap:4px;padding-inline:8px}
  .pdf-report-action{width:44px;min-width:44px;padding-inline:0;font-size:0}
  .pdf-report-action .material-icons-round{font-size:20px}
}

@media(max-width:768px){
  .main{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  /* O FAB tem uma posição só, em todas as telas: canto inferior direito.
     Antes ele saltava para o topo em Transações, o que fazia a mesma ação principal
     mudar de lugar, de tamanho e de raio conforme a tela. */
  /* Logo acima da nav, não a 148px. Ali no meio da tela o toast cobria linhas da lista;
     o FAB não é mais obstáculo porque ele recolhe assim que a lista rola. */
  .toast-container{top:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));left:12px;right:12px;align-items:center}
  .toast{width:100%;max-width:420px;justify-content:center;animation:toastRise .24s ease}
  .sidebar{box-shadow:var(--elevation-raised)}
  .nav-item{min-height:60px}
  /* 24px, e não 80px: a .main já reserva a altura da nav, então os 80px extras eram
     somados a ela e deixavam 86px de vazio abaixo do último card em TODAS as telas
     (medido a 393x780 no fim da rolagem). Reservavam o FAB, mas nesse ponto ele está
     sempre recolhido - .is-tucked, garantido por initFabScrollTuck() - e em Balanços
     e Fluxo ele nem existe. 24px iguala o fim de tela do desktop, que já estava certo. */
  .page{padding:16px 14px 24px}
  /* Aplicada por updateFabReserve() só quando a tela quase não rola - ali o FAB fica
     parado sobre a última linha e não há como empurrá-la para fora do alcance dele.
     88px = os 78px entre o fim do conteúdo e o topo do FAB, mais uma folga. */
  .page.has-fab-reserve{padding-bottom:88px}
  .page-header{margin-bottom:20px}
  .page-title{font-size:24px}
  .btn-sm{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .modal-close{width:44px;height:44px}
  .finance-overview-card{grid-template-columns:1fr;gap:12px;padding:15px 16px;border-radius:16px}
  .finance-overview-balance{font-size:24px}
  .finance-overview-metric{padding:9px}
  .finance-overview-card.is-single{min-height:78px}
  #page-dashboard .balance-hero{min-height:176px;padding:20px}
  #page-dashboard .balance-amount{font-size:34px;margin-bottom:17px}
  #page-dashboard .balance-actions{top:13px;right:13px}
  #page-dashboard #monthSummaryCards .stat-card-trigger{min-height:96px;padding:14px}
  #page-dashboard #monthSummaryCards .stat-value{font-size:var(--text-lg)}
  #dashRecentCard{padding:14px}
  #page-transactions .tx-main-tabs .period-tab{flex:0 0 auto;min-width:82px;min-height:44px;font-size:11px}
  #page-transactions .tx-type-tabs .period-tab{min-height:44px}
  #page-transactions .tx-item{padding-left:9px}
  /* A categoria é o segundo dado que identifica a linha: "Alimentaç…" / "Investime…"
     não informa. Quebra em vez de truncar, como a descrição logo acima. */
  #page-transactions .tx-item .tx-meta{white-space:normal;overflow-wrap:anywhere}
  #page-transactions .sched-item{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"status info delete";align-items:center;padding:8px;column-gap:8px;row-gap:0}
  #page-transactions .sched-item.is-partner{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"status info"}
  #page-transactions .sched-item>.sched-status-action{grid-area:status}
  #page-transactions .sched-item>.sched-card-info{grid-area:info}
  #page-transactions .sched-item>.item-direct-action{grid-area:delete}
  .reports-export-btn{width:44px;padding:0}
  .reports-export-btn>span:last-child{display:none}
  #page-reports>.period-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  #page-reports>.period-tabs .period-tab{min-width:0;min-height:44px;padding-inline:4px;font-size:11px}
  .report-period-current{flex:1;min-width:0;max-width:220px}
  #page-reports>.card{padding:16px}
  .accounts-toolbar{align-items:stretch;flex-direction:column;margin-bottom:12px}
  .accounts-toolbar-actions{display:grid;grid-template-columns:1fr 1fr}
  .accounts-toolbar-actions .btn{width:100%}
  .accounts-list{grid-template-columns:1fr;gap:8px}
  .account-card-toggle{min-height:92px;padding:13px 4px 12px 13px}
  .ux-account-card .account-card-balance{font-size:22px}
  .account-history-card{padding:14px}
  .goals-grid{grid-template-columns:1fr;gap:9px}
  .goals-hero{padding:20px;border-radius:var(--radius-panel)}
  .goals-hero-top strong{font-size:28px}
  .goals-toolbar{align-items:stretch;flex-direction:column}
  .goals-toolbar .btn{width:100%}
  .ux-goal-card{padding:14px}
}

@keyframes toastRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:390px){
  .page{padding-inline:11px}
  #page-dashboard .balance-hero{padding:16px}
  #page-dashboard .balance-actions{top:12px;right:12px}
  #page-dashboard .balance-action-btn{width:44px;padding:0;justify-content:center;font-size:0}
  #page-dashboard .balance-action-btn .material-icons-round{font-size:18px}
  #page-dashboard .balance-mini{padding:10px}
  #page-dashboard #monthSummaryCards{gap:8px}
  #page-dashboard #monthSummaryCards .stat-card-trigger{min-height:90px;padding:12px;row-gap:8px}
  #page-dashboard #monthSummaryCards .stat-value{font-size:var(--text-base)}
  .finance-overview-metrics{gap:6px}
  .finance-overview-metric{gap:6px;padding:8px 7px}
  .finance-overview-metric>.material-icons-round{width:29px;height:29px;font-size:16px}
  .finance-overview-metric strong{font-size:var(--text-xs)}
  .finance-overview-metric strong.is-long{font-size:var(--text-2xs)}
  .finance-overview-metric strong.is-xlong{font-size:10px}
  .item-actions-menu-popover{position:fixed;left:12px;right:12px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:auto}
  #page-transactions .tx-item,#page-transactions .sched-item{scroll-margin-block:120px}
  .tx-item .tx-icon{width:34px;height:34px}
  .tx-amount{font-size:var(--text-sm)}
  .report-period-current{padding-inline:9px}
  #reportPeriodLabel{font-size:13px}
  .account-card-heading{align-items:flex-start;flex-direction:column;gap:3px}
  .goal-progress-ring{width:58px;height:58px}
  .completed-goal-item b{max-width:88px;overflow:hidden;text-overflow:ellipsis}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* O pulso só altera opacidade e continua comunicando carregamento; a Mu e a mensagem
     permanecem estáticas pela regra específica do bloco da splash. */
  .splash-dots span{animation-duration:1.1s!important;animation-iteration-count:infinite!important}
}

/* Card da missao da semana. Usa os tokens semanticos do design system para
   herdar claro e escuro sem um segundo bloco de cores. */
.mu-mission-card{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-3)}
.mu-mission-head{display:flex;gap:var(--space-3);align-items:center}
.mu-mission-head .mu-character{flex:0 0 44px;width:44px;height:44px}
.mu-mission-copy{flex:1 1 auto}
.mu-mission-copy{min-width:0}
/* text-secondary, nao text-tertiary: em 11px o terciario da 3.22:1 no tema
   light e reprova no piso AA de 4.5. Medido por tests/layout/acabamento-final. */
.mu-mission-kicker{font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-secondary)}
.mu-mission-title{font-size:var(--text-base);font-weight:600;color:var(--text-primary);line-height:var(--leading-snug);margin-top:2px}
.mu-mission-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal);margin:var(--space-1) 0 0}
.mu-mission-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.mu-mission-done{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--interactive-primary)}
.mu-mission-done .material-icons-round{font-size:18px}
.mu-mission-score{display:flex;align-items:center;gap:var(--space-1);flex:0 0 auto;background:none;border:0;padding:var(--space-2);border-radius:var(--radius-button);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;white-space:nowrap}
.mu-mission-score strong{color:var(--text-primary)}
.mu-mission-score:hover{background:var(--surface-subtle)}
.mu-mission-score:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Tela da Mu. */
.mu-page-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-1);padding:var(--space-6) var(--space-4)}
.mu-page-hero .mu-character{width:96px;height:96px;margin-bottom:var(--space-2)}
.mu-page-total{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary);line-height:var(--leading-tight)}
.mu-page-level{font-size:var(--text-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--interactive-primary)}
.mu-page-next{font-size:var(--text-sm);color:var(--text-secondary);margin:var(--space-2) 0 0}
.mu-page-mission .mu-mission-title{margin-top:var(--space-2)}
.mu-mission-reward{font-size:var(--text-sm);color:var(--text-secondary)}
.mu-ledger-list{list-style:none;margin:0;padding:0}
.mu-ledger-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);font-size:var(--text-body);color:var(--text-secondary)}
.mu-ledger-row:last-child{border-bottom:0}
.mu-ledger-row strong{color:var(--interactive-primary);font-variant-numeric:tabular-nums}
.mu-mission-pending{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary)}
.mu-mission-pending .material-icons-round{font-size:18px}

/* ── COMANDO POR VOZ ─────────────────────────────────────────────────────── */

/* Bolha de gravação. Acima do FAB, nunca por cima da barra de navegação. */
#vozBolha {
  position: fixed;
  right: 24px;
  bottom: 150px;
  z-index: 52;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  max-width: calc(100vw - 48px);
  /* Mesmo motivo do FAB: durante a gravação o dedo passa por cima da bolha ao
     arrastar para cancelar, e selecionar o cronômetro atrapalharia o gesto. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.voz-ponto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E5484D;
  animation: vozPulsa 1s ease-in-out infinite;
}
.voz-dica { color: var(--fg2); font-weight: 400; font-size: 12px; }
@keyframes vozPulsa { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .voz-ponto { animation: none } }

/* Faixa da transcrição, dentro do addModal quando ele foi aberto por voz. */
#vozFaixa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  border: 1.5px solid var(--border);
  font-size: 13px;
  color: var(--fg2);
}
#vozOuvi { flex: 1; font-style: italic; overflow-wrap: anywhere; }
.voz-regravar {
  flex: none;
  border: none;
  background: none;
  color: var(--primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  padding: 0 4px;
}
/* Marca de campo que a IA não teve certeza. Vive dentro do <label>, por isso
   precisa desfazer o uppercase e o letter-spacing que .form-label aplica. */
.voz-confira {
  margin-left: 8px;
  color: #E5484D;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Bolha "vai cancelar": o arraste passou do limiar e soltar agora cancela.
   Antes o cancelamento disparava no meio do movimento, sem aviso e sem volta. */
#vozBolha.vai-cancelar {
  border-color: #E5484D;
  color: #E5484D;
}
#vozBolha.vai-cancelar .voz-ponto { background: #E5484D; animation: none; }

/* Seletor de agendamento no empate. Mesma família das outras faixas do modal,
   e só aparece quando a fala casou igual com mais de um pendente. */
#vozEscolha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  border: 1.5px solid var(--primary);
}
.voz-escolha-titulo { font-size: 13px; font-weight: 600; color: var(--fg); }
.voz-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.voz-opcao {
  /* 44px: escolher aqui decide qual conta vai ser debitada, então é alvo de
     toque cheio, não um link apertado. */
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.voz-opcao-novo {
  border-color: var(--border);
  background: transparent;
  color: var(--fg2);
  font-weight: 500;
}