*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
body{color:var(--text);-webkit-tap-highlight-color:transparent;transition:background .3s;padding-bottom:env(safe-area-inset-bottom);touch-action:manipulation;}
button{cursor:pointer;border:none;font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:15px;}
.app{display:flex;min-height:100vh;}
#scrollTopZone{display:none;}
.sidebar{width:230px;color:#cfd8e3;display:flex;flex-direction:column;position:fixed;height:100vh;z-index:100;transition:transform .3s;overflow-x:hidden;}
.sidebar .logo{font-size:22px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;}
.brand-mark{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:#fff;font-size:14px;}
.ico i,.ti i,.label-icon i,.type-toggle i,.btn i,.theme-btn i,.install-btn i{width:1.1em;text-align:center;}
.label-icon{display:inline-flex;align-items:center;gap:7px;}
.data-icon{display:inline-flex;align-items:center;justify-content:center;width:1.15em;color:inherit;}
.page-title-row{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}.page-heading{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:1;}.greeting{font-size:17px;color:var(--muted);margin:0;white-space:nowrap;}
.icon-picker-header{display:flex;align-items:center;justify-content:space-between;gap:10px;}.icon-picker-header label{margin:0;}.icon-picker-toggle{padding:5px 8px!important;font-size:12px!important;white-space:nowrap;}.icon-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:8px;}
.icon-picker button{height:38px;border-radius:9px;background:var(--bg);color:var(--muted);font-size:16px;border:2px solid transparent;}
.icon-picker button.sel,.icon-picker button:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,185,142,.08);}
.bank-logo{width:21px;height:21px;object-fit:contain;display:block;filter:none;}.bank-logo-wrap{width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;position:relative;}.icon-picker .bank-logo-wrap{margin:auto;}.bank-fallback{display:none;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:6px;padding:0 3px;color:#fff;font-size:8px;font-weight:800;line-height:1;letter-spacing:-.4px;}
.sidebar .logo .brand-name{display:inline-flex;letter-spacing:-.5px;}
.nav-item{display:flex;align-items:center;gap:12px;background:none;text-align:left;}
.nav-item .ico{font-size:16px;width:22px;text-align:center;}
.nav-item .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px;}
.sidebar-footer{display:flex;flex-direction:column;}
.theme-btn,.install-btn{background:rgba(255,255,255,.08);color:#cfd8e3;border-radius:8px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;}
.install-btn{background:var(--primary);color:#fff;}
.main{flex:1;margin-left:230px;max-width:100%;overflow-anchor:none;}
.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}.topbar-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px;}.topbar-actions-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.sync-indicator{font-size:11px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:5px;margin-top:4px;}.sync-indicator.ok{color:var(--income);}.sync-indicator.wait{color:var(--vault);}.sync-indicator.off{color:var(--muted);}
.desktop-new-tx{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.month-nav{display:flex;align-items:center;gap:6px;}
.month-nav button{background:none;font-size:18px;color:var(--muted);padding:2px 6px;border-radius:6px;}
.month-nav button:hover{background:var(--bg);}
.month-nav .label{text-align:center;text-transform:capitalize;cursor:pointer;color:var(--text);}
.today-btn{color:#fff!important;font-size:14px!important;padding:5px 8px!important;margin-left:8px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:24px;}
.dashboard-balance-row{display:contents;}
.dashboard-balance-nav{display:none;}
.stat .t{color:var(--muted);display:flex;align-items:center;gap:8px;}
.stat .v{margin-top:8px;}
.stat.expense .v{color:var(--expense);}
.stat.balance .v{color:var(--text);} .stat.card .v{color:#f39c12;} .stat.invest .v{color:var(--invest);} .stat.vault .v{color:var(--vault);}
#dashboard .collapse-trigger::after{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f078";font-size:11px;margin-left:auto;color:var(--muted);transition:transform .2s;}
#dashboard .collapsible-widget.collapsed .collapse-trigger::after{transform:rotate(-90deg);}
#dashboard .collapsible-widget .collapse-trigger{cursor:pointer;user-select:none;}#dashboard .collapsible-widget.collapsed>:not(.collapse-trigger){display:none;}
.dash-see-all{display:none;}
.account-statement-panel{display:none;}
.bills-segmented{display:none;}
.tx-inline-filters{display:none;}
.desktop-secondary-action{display:none;}
.hero-card{display:none;}
.split-row{display:none;}
.compare-kpis{display:none;}
#calendarLegend,#calendarUpcomingPanel,#calendarOverduePanel{display:none;}
#reportsPeriodPanel,#reportsKpis{display:none;}
.reports-donut-line{display:none;}
.detail-col{display:none;}
.category-pie-svg{display:none;}
.month-pill{display:none;}
.inv-evo-sub{display:none;}
.global-search-dropdown{display:none;}
.page-sub{display:none;}
.stat-delta{display:none;}
.chart-inline-legend{display:none;}
.amount-visibility{margin-left:auto;background:none;color:var(--muted);padding:2px 3px;font-size:15px;line-height:1;}.amount-visibility:hover{color:var(--primary);}
#dashboard.amounts-hidden #stBalance,#dashboard.amounts-hidden #stIncome,#dashboard.amounts-hidden #stExpense,#dashboard.amounts-hidden #stVault,#dashboard.amounts-hidden #stInvest,#dashboard.amounts-hidden #stNetWorth{color:transparent!important;text-shadow:none;position:relative;user-select:none;}
#dashboard.amounts-hidden #stBalance::after,#dashboard.amounts-hidden #stIncome::after,#dashboard.amounts-hidden #stExpense::after,#dashboard.amounts-hidden #stVault::after,#dashboard.amounts-hidden #stInvest::after,#dashboard.amounts-hidden #stNetWorth::after{content:'••••••';position:absolute;left:0;color:var(--muted);}
.category-switch{margin:0 0 16px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
.panel{margin-bottom:24px;}
.panel h3{margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;}
.tx{display:flex;align-items:center;border-bottom:1px solid var(--border);gap:12px;}
.tx:last-child{border:none;}
.tx .dot{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.tx .info{flex:1;min-width:0;}
.tx .info .desc{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx .info .meta{font-size:12px;color:var(--muted);}
.tx .amt{font-weight:700;font-size:15px;white-space:nowrap;} .tx .amt.out{color:var(--expense);} .tx .amt.tr{color:var(--transfer);}
.tx .act{background:none;color:var(--muted);font-size:14px;opacity:.55;padding:4px;border-radius:6px;}
.tx .act:hover{opacity:1;background:var(--bg);color:var(--primary);}
.tx .act.del:hover{color:var(--danger);}
.day-head{font-size:12px;font-weight:700;color:var(--muted);padding:14px 0 4px;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.5px;}
.day-head .dsum{color:var(--expense);}
.btn{color:#fff;padding:11px 20px;font-size:14px;}
.btn:hover{background:var(--primary-dark);}
.btn-sm{padding:7px 14px;font-size:13px;}
.fab{display:none;}
.icon-btn{background:none;color:var(--muted);font-size:15px;padding:4px 6px;}
.icon-btn:hover{background:var(--bg);color:var(--primary);}
.icon-btn[onclick^="open"]:not(:has(i)),.icon-btn[onclick^="del"]:not(:has(i)),.icon-btn[onclick^="pay"]:not(:has(i)){font-size:0;}
.icon-btn[onclick^="open"]:not(:has(i))::after,.icon-btn[onclick^="del"]:not(:has(i))::after,.icon-btn[onclick^="pay"]:not(:has(i))::after{font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;}
.icon-btn[onclick^="open"]:not(:has(i))::after{content:"\f304";}.icon-btn[onclick^="del"]:not(:has(i))::after{content:"\f2ed";}.icon-btn[onclick^="pay"]:not(:has(i))::after{content:"\f00c";}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);width:250px;} .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;} .grid2{grid-template-columns:1fr;}
  .desktop-new-tx{display:none!important;}
  .fab{position:fixed;border-radius:50%;color:#fff;font-size:30px;align-items:center;justify-content:center;z-index:90;}
}
@media(max-width:600px){
  :root{--mobile-bottom-nav-height:calc(62px + env(safe-area-inset-bottom));}
  .sidebar .nav-item[data-sec="calendar"]{display:none!important;}
  /* Camada de segurança: um fundo fixo que propositalmente "estoura" 10px
     além de cada borda da tela. Se por algum motivo o cálculo do tamanho da
     tela (dvh/vh/altura medida por JS) ficar alguns pixels menor que a tela
     física de verdade nesse aparelho, essa camada garante que nunca sobra
     um pedacinho sem cor por trás — porque ela sempre é maior que a tela,
     nunca menor. Fica atrás de tudo (z-index bem baixo), só decorativa. */
  html.design-lab[data-theme="dark"]::before,
  html.design-lab:not([data-theme="dark"])::before{
    content:'';position:fixed;top:-10px;right:-10px;bottom:-10px;left:-10px;
    z-index:-1;pointer-events:none;background:var(--bg);
  }
  html,body{height:100dvh;height:-webkit-fill-available;height:var(--vh100,100dvh);overflow:hidden;overscroll-behavior:none;}
  body{position:fixed!important;inset:0!important;height:-webkit-fill-available!important;height:var(--vh100,100dvh)!important;}
  .app{position:fixed!important;inset:0!important;height:-webkit-fill-available!important;height:var(--vh100,100dvh)!important;overflow:hidden;}
  .main{height:100dvh;height:var(--vh100,100dvh);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;}
  .sidebar{top:0;bottom:var(--mobile-bottom-nav-height);height:auto;overscroll-behavior:contain;padding-bottom:0;}
  .sidebar-footer{bottom:0;z-index:2;}
  .bottom-nav{height:var(--mobile-bottom-nav-height);padding:8px 0 calc(8px + env(safe-area-inset-bottom));}
  .topbar-actions{width:100%;align-items:flex-end;gap:6px;}.topbar-actions-row{width:100%;justify-content:space-between;}
  .topbar h1{line-height:1.1;}.page-title-row{width:100%;}
  .sync-indicator{font-size:10px;}
  .month-nav{position:relative;gap:2px;flex:1;justify-content:center;}
  .today-btn{display:inline-flex!important;position:absolute;right:7px;align-items:center;justify-content:center;padding:6px 8px!important;margin-left:0;}.today-btn span{display:none;}.btn{padding:10px 14px;}.btn-sm{padding:8px 11px;}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Dashboard: saldo como destaque e os demais indicadores em uma grade equilibrada. */
  #dashboard>.cards{grid-template-columns:repeat(2,minmax(0,1fr));}#dashboard>.cards .stat.balance{grid-column:1/-1;}#dashboard>.cards .stat.balance .t{font-size:12px;}#dashboard>.cards .stat.balance .v{font-size:22px;margin-top:7px;}
  /* Investimentos: o valor líquido ganha destaque sem deixar um card isolado. */
  #investments>.cards{grid-template-columns:repeat(2,minmax(0,1fr));}#investments>.cards .stat .hint{font-size:10px;margin-top:4px;}
  /* Patrimônio: total em destaque e composição em uma grade de leitura rápida. */
  #patrimony>.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px;}#patrimony>.cards .stat{min-height:96px;padding:14px 12px;display:flex;flex-direction:column;justify-content:center;}#patrimony>.cards .stat.balance{grid-column:1/-1;min-height:108px;padding:17px 16px;}#patrimony>.cards .stat.balance .t{font-size:12px;}#patrimony>.cards .stat.balance .v{font-size:24px;margin-top:8px;}#patrimony>.cards .stat:not(.balance) .t{min-height:28px;align-items:flex-start;line-height:1.2;}#patrimony>.cards .stat:not(.balance) .v{font-size:18px;white-space:nowrap;margin-top:7px;letter-spacing:-.25px;}#patrimony>.panel{padding:15px 14px;}#patrimony #patChart{max-height:220px;}#patrimony #patDebtInfo,#patrimony #patChartInfo{font-size:11px;line-height:1.4;}.grid2{gap:14px;margin-bottom:16px;}
  .tx{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;grid-template-areas:"icon info actions" "amount amount amount";align-items:start!important;}.tx .dot{grid-area:icon;font-size:15px;}.tx .info{grid-area:info;min-width:0;}.tx .info .desc{white-space:normal;overflow-wrap:anywhere;line-height:1.3;}.tx .info .meta{margin-top:3px;line-height:1.35;}.tx .amt{grid-area:amount;justify-self:end;text-align:right;}.tx .tx-actions{grid-area:actions;display:flex;justify-content:flex-end;gap:4px;padding:0;border:0;}.tx .act{padding:5px 6px!important;background:var(--bg);font-size:13px;}
  /* Em telas compactas, as datas dos formulários ficam mais equilibradas. */
  .overlay .row2 .field input[type="date"]{width:80%;}
  .overlay .field input[type="date"]{-webkit-text-size-adjust:100%;}
  .icon-picker{grid-template-columns:repeat(7,1fr);}.bottom-nav{transform:translateZ(0);will-change:transform;}.bottom-nav button{min-width:54px;}.fab{bottom:104px;}
  /* Cabeçalho de lançamentos: busca, datas e limpeza sem áreas vazias. */
  .search-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.search-bar .fg{overflow:hidden;}.search-bar .fg:nth-child(2){grid-column:1;}.search-bar .fg:nth-child(3){grid-column:2;}.search-bar input{height:40px;min-width:0;max-width:100%;font-size:13px;}.search-bar input[type="date"]{width:100%;min-width:0;-webkit-min-logical-width:0;padding:8px 5px;font-size:12px;letter-spacing:0;}.search-bar input[type="date"]::-webkit-datetime-edit{padding:0;}.search-bar input[type="date"]::-webkit-calendar-picker-indicator{margin:0;}.search-bar .btn{grid-column:1/-1;justify-self:end;width:auto;height:40px;padding:8px 14px;white-space:nowrap;}.filter-tabs button{letter-spacing:-.15px;}
  /* Ferramentas: dois atalhos por linha em telas compactas. */
  #tools .tool-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;}#tools .tool-card{min-width:0!important;padding:14px 8px;}#tools .tool-card .btn{width:100%;padding:8px 4px;font-size:11px;}
  .bill-row{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;grid-template-areas:"icon info actions" "icon info footer";gap:7px 10px!important;padding:12px 0!important;align-items:start!important;}.bill-row .dot{grid-area:icon;}.bill-row .bn{grid-area:info;flex:none!important;width:auto!important;}.bill-row .bn .t1{line-height:1.28;white-space:normal;overflow-wrap:anywhere;}.bill-row .bn .t2{margin-top:3px;line-height:1.35;}.bill-row .bill-footer{grid-area:footer;display:flex;align-items:flex-end;justify-content:flex-end;min-width:0;align-self:end;}.bill-row .bill-amount{font-size:16px;white-space:nowrap;text-align:right;}.bill-row .bill-status{order:1;}.bill-row .bill-actions{grid-area:actions;display:flex;justify-content:flex-end;gap:3px;padding:0;border:0;}.bill-row .bill-actions .icon-btn{padding:4px 5px!important;background:var(--bg);font-size:12px;}
}
@media(max-width:600px){
  #compare .grid2{gap:10px}#compare .panel{padding:12px}#compare .panel h3{line-height:1.35;margin-bottom:8px}#compare .avg-period{font-size:10px;letter-spacing:0;white-space:nowrap}#compare .cmp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name badge" "values values";gap:5px 8px;padding:10px 0}#compare .cmp-row .cn{grid-area:name;min-width:0;font-size:13px;overflow-wrap:anywhere}#compare .cmp-vals{grid-area:values;text-align:left;font-size:12px}#compare .cmp-badge{grid-area:badge;justify-self:end;padding:3px 7px;font-size:10px;max-width:145px;white-space:normal;text-align:right;line-height:1.25}
  /* Investimentos: leitura compacta e campos equilibrados em telas menores. */
  #investments>.topbar{align-items:center;margin-bottom:14px!important;}#investments>.topbar h3{font-size:15px!important;}#investments>.topbar .btn{padding:8px 10px;font-size:12px;white-space:nowrap;}
  #investments>.cards{gap:9px;margin-bottom:14px;}#investments>.cards .stat{min-height:92px;padding:12px 10px;display:flex;flex-direction:column;justify-content:center;}#investments>.cards .stat .t{min-height:27px;align-items:flex-start;line-height:1.2;}#investments>.cards .stat .v{font-size:17px;letter-spacing:-.25px;white-space:nowrap;}
  #investments>.panel{padding:14px 12px;margin-bottom:14px;}#investments>.panel h3{line-height:1.25;margin-bottom:10px;}#investments>.grid2{gap:12px;margin-bottom:12px;}#investments>.grid2 .panel{padding:13px 10px;margin-bottom:0;}#investments #invChart,#investments #invReturnChart{max-height:190px;}#investments #invTypeChart,#investments #invInstitutionChart{max-height:185px;}
  #investments .inv-card{padding:14px 12px;margin-bottom:11px;border-left-width:3px;}#investments .inv-name{font-size:15px;overflow-wrap:anywhere;}
  /* O ajuste antigo de #invOverlay que vivia aqui (modal com max-height:92dvh)
     era do padrão de modal ancorado que já causou o bug de rolagem travada em
     Nova conta/cartão (dvh não confiável no Safari) — saiu de circulação
     quando a tela ganhou o padrão de página cheia (position:fixed;inset:0),
     mais abaixo neste arquivo. */
}
.menu-btn{display:none;background:none;font-size:24px;color:var(--text);}
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:80;}
.bottom-nav button{background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);} .bottom-nav .ico{font-size:20px;}
.sidebar-backdrop{display:none;}
@media(max-width:900px){.sidebar-backdrop{position:fixed;inset:0;background:rgba(12,18,25,.42);z-index:95;opacity:0;pointer-events:none;}.sidebar-backdrop.show{display:block;opacity:1;pointer-events:auto;}}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
.overlay.open,.overlay.closing{display:flex;}.overlay.open{animation:overlay-in .2s ease-out;}.overlay.open .modal{animation:modal-in .3s var(--fm-motion-spring,cubic-bezier(.22,.9,.32,1.05));}.overlay.closing{animation:overlay-out .18s ease-in forwards;}.overlay.closing .modal{animation:modal-out .18s ease-in forwards;}
.modal{padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;}
.modal h2{font-size:19px;margin-bottom:18px;}
.modal h2.modal-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}.modal h2.modal-title-row .icon-btn{font-size:17px;padding:5px 7px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--border);color:var(--text);}
.field input:focus,.field select:focus{outline:none;border-color:var(--primary);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* "+ Novo lançamento" — achado que NENHUM dos 4 botões candidatos (FAB,
   .desktop-new-tx do topo, .header-quick, o ícone dentro de
   .lancamentos-quickbar) fica visível no computador: todos são escondidos
   de propósito nessa largura por outras regras já existentes. Este é novo,
   só pra essa lacuna, sempre visível a partir de 901px. */
.lancamentos-add-desktop{display:none;}
@media(min-width:901px){.lancamentos-add-desktop{display:inline-flex!important;align-items:center;gap:7px;white-space:nowrap;margin-left:auto;}}
/* Mesma lacuna em Contas a pagar/receber e Recorrentes: o único "+" de cada
   uma vivia dentro de .detail-topbar/.topbar, os dois escondidos no
   computador por regra já existente (html.design-lab .mais-page>.topbar).
   Botão novo, direto no corpo da lista, sempre visível a partir de 901px. */
.mais-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.mais-list-head.mais-list-head-end{justify-content:flex-end;}
.mais-list-add-desktop{display:none;}
@media(min-width:901px){.mais-list-add-desktop{display:inline-flex!important;align-items:center;gap:7px;white-space:nowrap;}}
/* Listas de Preferências/Conexões e de Sistema (Ferramentas) — só existem
   no computador; no celular esses itens já estão nas .mais-nav-list de
   sempre, então os blocos ficam ocultos por padrão aqui (a versão desktop
   reaparece dentro do @media(min-width:901px)). */
.tools-profile-links{display:none;}
.tools-settings-card{display:none;}
/* Reordenar cartões e contas (arrastar e soltar) — mesmo padrão do
   arrastar dos widgets do Dashboard (.dashboard-drag-proxy em app-extras.js):
   o card vira um "proxy" fixo que segue o cursor/dedo, com sombra elevada;
   o lugar de origem fica marcado como buraco (placeholder tracejado)
   enquanto arrasta. */
.entity-drag-proxy{position:fixed!important;z-index:3000!important;margin:0!important;pointer-events:none!important;transform-origin:top left;box-shadow:0 24px 56px rgba(10,23,37,.25),0 8px 22px rgba(10,23,37,.18)!important;cursor:grabbing!important;}
.entity-drag-proxy *{pointer-events:none!important;}
.entity-drag-placeholder{border:1.5px dashed color-mix(in srgb,var(--primary) 55%,var(--app-line))!important;background:color-mix(in srgb,var(--primary) 6%,var(--app-surface-soft))!important;box-shadow:none!important;}
.entity-drag-placeholder>*{visibility:hidden!important;}
.credit-card.card-drop-target,.card-carousel-item.card-drop-target,.account-desktop-card.card-drop-target{outline:2px dashed var(--primary)!important;outline-offset:2px!important;}
/* Categoria em Lançamentos: <select> nativo escondido (continua sendo o
   dono do valor de verdade) por trás de um botão que mostra o ícone da
   categoria escolhida, e uma lista flutuante (#categoryPillDropdown, mesmo
   padrão do #monthPillDropdown) no lugar do dropdown cru do navegador. */
/* Lista customizada — padrão único pra TODO <select> do FinMoney (não só
   categoria): pedido explícito pra tirar o dropdown nativo do navegador de
   qualquer lista do app. Ver enhanceFmSelect()/app-ui.js — cada <select>
   ganha esse visual por cima automaticamente, sem precisar editar cada
   tela uma por uma. */
.fm-select-wrap{position:relative;}
.fm-select-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important;}
.fm-select-trigger{width:100%;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--text);font-size:14px;font-weight:600;text-align:left;cursor:pointer;}
.fm-select-trigger:focus-visible{outline:none;border-color:var(--primary);}
.fm-select-trigger .fm-select-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;color:var(--primary);font-size:14px;}
.fm-select-trigger .fm-select-icon:empty{width:0;}
.fm-select-trigger .fm-select-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fm-select-trigger.is-empty .fm-select-label{color:var(--muted);font-weight:500;}
.fm-select-trigger i.fa-chevron-down{font-size:11px;color:var(--muted);flex:0 0 auto;}
.fm-select-trigger:disabled{opacity:.55;cursor:default;}
.fm-select-dropdown{display:none;position:fixed;z-index:2100;max-height:280px;overflow-y:auto;background:var(--card);border:1px solid var(--app-line,var(--border));border-radius:14px;box-shadow:0 14px 32px rgba(18,20,30,.18);padding:6px;}
.fm-select-dropdown.open{display:block;}
.fm-select-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--text-2,var(--text));background:none;border:0;}
.fm-select-item:hover{background:var(--app-surface-soft,var(--input-bg));}
.fm-select-item.is-selected{color:var(--primary);background:var(--accent-soft,var(--input-bg));}
.fm-select-item .data-icon{width:20px;flex:0 0 auto;text-align:center;color:inherit;}
.fm-select-empty{padding:12px;font-size:13px;color:var(--muted);text-align:center;}
/* Dentro de uma linha compacta (ex.: filtro rápido de Lançamentos) o
   trigger fica pílula, não campo de formulário. */
.tx-inline-select.fm-select-wrap{display:inline-flex;}
.tx-inline-select .fm-select-trigger{width:auto;padding:8px 12px;border-radius:999px;font-size:12.5px;}
.tx-inline-select .fm-select-trigger .fm-select-icon{width:16px;height:16px;font-size:12px;}
/* Ao editar um compromisso, o campo "Repetir por quantos meses" some (não
   faz sentido repetir um que já existe) — sem o par, a Conta ocupa a linha
   inteira em vez de deixar metade vazia. */
#billAccountRepeatRow:has(#billRepeatField.hidden) .bill-account-field{grid-column:1/-1;}
.type-toggle{margin-bottom:16px;flex-wrap:wrap;}
.type-toggle button{flex:1;min-width:80px;}
.type-toggle button.act-in{background:rgba(0,185,142,.12);border-color:var(--income);}
.type-toggle button.act-out{background:rgba(244,54,76,.1);border-color:var(--expense);}
.type-toggle button.act-cc{background:rgba(243,156,18,.12);border-color:#f39c12;}
.type-toggle button.act-tr{background:rgba(52,152,219,.12);border-color:var(--transfer);}
.modal-actions{display:flex;gap:10px;margin-top:20px;}
.modal-actions .btn{flex:1;}
.hidden{display:none!important;}
.hint{font-size:12px;color:var(--muted);margin-top:4px;}
.live-hint{min-height:18px;margin:-4px 0 12px;padding:8px 10px;border-radius:8px;background:var(--bg);color:var(--text);font-size:12px;line-height:1.35;}
.live-hint strong{color:var(--primary);}
.onboarding-overlay{z-index:320;background:rgba(13,22,31,.78);backdrop-filter:blur(5px);}
.onboarding-card{position:relative;width:min(100%,420px);padding:30px 26px 24px;background:var(--card);border-radius:22px;text-align:center;box-shadow:0 20px 55px rgba(0,0,0,.28);}
.onboarding-skip{position:absolute;top:14px;right:15px;background:none;color:var(--muted);font-size:13px;font-weight:700;padding:7px;}
.onboarding-icon{width:66px;height:66px;margin:8px auto 18px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:rgba(0,185,142,.13);color:var(--primary);font-size:29px;}
.onboarding-card h2{font-size:22px;margin:0 34px 10px;}.onboarding-card p{color:var(--muted);font-size:14px;line-height:1.55;min-height:66px;}
.onboarding-bullets{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 4px;}
.onboarding-bullets span{padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:11px;font-weight:700;}
.onboarding-dots{display:flex;justify-content:center;gap:7px;margin:20px 0;}.onboarding-dots span{width:7px;height:7px;border-radius:20px;background:var(--border);transition:.2s;}.onboarding-dots span.active{width:22px;background:var(--primary);}
.onboarding-next{width:100%;padding:13px;font-size:15px;}.onboarding-step{font-size:12px;color:var(--muted);margin-top:12px;}
@media(max-width:600px){.onboarding-overlay{align-items:center;padding:18px;}.onboarding-card{padding:28px 22px 22px;border-radius:20px;}.onboarding-card p{min-height:62px;}.onboarding-icon{margin-top:12px;}}
.cc,.vault-card{padding:18px;margin-bottom:14px;}.cc{--item-color:var(--primary);}.vault-card{--item-color:var(--vault);}
.cc.card-clickable{cursor:pointer;}
.cc .name{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;min-height:25px;}.cc .name .bank-logo-wrap{flex-shrink:0;} .cc .fatura{font-size:22px;font-weight:700;margin:10px 0;} .cc .lim{font-size:12px;}.account-card .lim{margin-top:7px;}.account-card{cursor:default;}.account-card.account-clickable{cursor:pointer;}.account-card .account-name{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;min-height:25px;}
.cc-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.cc-actions .btn{flex:1;min-width:120px;}
.invoice-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px;}.invoice-summary .iv{background:var(--bg);border-radius:10px;padding:10px;}.invoice-summary .iv span{display:block;font-size:11px;color:var(--muted);}.invoice-summary .iv b{display:block;margin-top:4px;font-size:15px;}.invoice-list-title{font-size:13px;color:var(--muted);font-weight:700;margin:14px 0 2px;}.invoice-history{font-size:12px;color:var(--muted);background:var(--bg);border-radius:9px;padding:9px 10px;margin-bottom:3px;}.invoice-history b{color:var(--text);}.sync-indicator.ok i{animation:save-pop .38s ease-out;}@keyframes save-pop{50%{transform:scale(1.28)}}
.invoice-modal{height:min(720px,90vh);display:flex;flex-direction:column;overflow:hidden;}.invoice-modal .field,.invoice-modal .invoice-summary,.invoice-modal .invoice-list-title,.invoice-modal .modal-actions{flex-shrink:0;}.invoice-modal #invoiceList,.invoice-modal #accountStatementList{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;}
@media(max-width:600px){.invoice-summary{gap:7px;}.invoice-summary .iv{padding:9px 7px;}.invoice-summary .iv b{font-size:13px;}.invoice-summary .iv span{font-size:10px;}}
@media(max-width:600px){#accountStatementOverlay .modal,#invoiceOverlay .modal{max-width:none!important;max-height:none!important;padding:18px 15px calc(18px + env(safe-area-inset-bottom));}#accountStatementOverlay .modal h2,#invoiceOverlay .modal h2{z-index:2;}.cc .fatura{margin:9px 0 7px;}.cc .lim{line-height:1.35;}}
.progress{background:rgba(255,255,255,.2);margin-top:8px;}
.progress .fill{background:var(--primary);}
.bar-track{background:var(--bg);margin-top:6px;}
.bar-track .fill{transition:width .4s;}
.section{display:none;} .section.active{display:block;}
.empty{text-align:center;color:var(--muted);padding:40px 0;font-size:14px;}
.pill{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--bg);color:var(--muted);}
.tx .pill{padding:0 2px;background:transparent;box-shadow:none;}
.cat-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.cat-item .em{font-size:20px;} .cat-item .nm{flex:1;font-weight:600;font-size:14px;}
.cat-toggle{background:var(--bg);color:var(--muted);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;transition:.2s;}
.cat-toggle:hover{background:var(--primary);color:#fff;}
.subwrap{overflow:hidden;transition:max-height .3s;}
.subcat{padding-left:34px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;padding-top:6px;padding-bottom:6px;border-bottom:1px dashed var(--border);}
.subcat .nm{flex:1;}
.sub-account-section-label{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);color:var(--muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.sub-account-wrap{margin-top:6px;}
.sub-account-card{margin-bottom:0;}
#desktopVaultSummary.single{grid-template-columns:1fr;}
#desktopVaultSummary.single .iv{text-align:center;}
canvas{max-height:250px;}.cmp-chart-wrap{position:relative;}
.filter-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
/* No computador as abas de tipo (Todos/Receitas/Despesas/Cartão/
   Transferências) passam pra dentro da mesma linha da busca, ao lado de
   "Importar extrato" — em vez de uma linha própria embaixo, que sempre
   deixava sobrar (ou faltar) espaço de um jeito ou de outro. */
@media(min-width:901px){
  html.design-lab #transactions .lancamentos-toolbar .lancamentos-search-row{flex:1 1 auto!important;min-width:0!important;margin:0!important;align-items:flex-end!important;}
  html.design-lab #transactions .lancamentos-toolbar .search-bar{margin:0!important;align-items:flex-end!important;}
  html.design-lab #transactions .lancamentos-toolbar .transactions-filter-tabs{flex:0 0 auto!important;margin:0!important;flex-wrap:nowrap!important;align-items:flex-end!important;}
  /* Os botões de "Todos/Receitas/..." tinham 30px de altura contra os 42px
     do campo de busca e dos ícones ao lado — mesmo com a base alinhada,
     sobrava um vão em branco por cima deles, dando a impressão de estarem
     desalinhados/flutuando mais alto. Igualando a altura, a base bate E o
     preenchimento vertical fica igual ao resto da linha. */
  html.design-lab #transactions .lancamentos-toolbar .transactions-filter-tabs button{min-height:42px!important;height:42px!important;display:inline-flex!important;align-items:center!important;box-sizing:border-box!important;}
  /* "Importar extrato" também vira só ícone no computador — o texto ao lado
     não cabia mais numa linha só com as 5 abas de tipo, e o próprio ícone
     de filtro ao lado já é só ícone (sem rótulo), então fica consistente. */
  html.design-lab #transactions .search-bar .tx-import-statement{flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;gap:0!important;}
  html.design-lab #transactions .search-bar .tx-import-statement span{display:none!important;}
}
.filter-tabs button{padding:7px 16px;border-radius:20px;background:var(--card);color:var(--muted);font-size:13px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.filter-tabs button.active{background:var(--primary);color:#fff;}
.search-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:end;}
.search-bar .fg{flex:1;min-width:140px;}
.search-bar .fg label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px;font-weight:600;}
.search-bar input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--text);}
.advanced-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:-4px 0 16px;}.advanced-filters select,.advanced-filters input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--text);font-size:13px;}.advanced-filters label{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:4px;}
@media(max-width:600px){.advanced-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:-2px;}.advanced-filters select,.advanced-filters input{height:38px;padding:7px;font-size:12px;}.advanced-filters label{font-size:10px;}}
.tx-filter-trigger{height:42px;min-width:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;align-self:end;}.filter-modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:4px;}.filter-modal-actions .btn{flex:1;}
/* Celular: "Filtrar lançamentos" em grupos (mesma leitura de uma lista
   nativa agrupada) em vez de 7 campos soltos numa grade só — sana também o
   campo órfão ("Situação do cartão" sozinho, com um buraco do lado). */
@media(max-width:900px){
  html.design-lab #txFilterOverlay .modal{padding:22px 18px 20px!important;}
  html.design-lab #txFilterOverlay .modal-title-row{font-size:19px!important;margin-bottom:18px!important;}
  html.design-lab #txFilterOverlay .advanced-filters{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0 0 18px!important;}
  html.design-lab #txFilterOverlay .filter-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:14px!important;border-radius:16px!important;background:var(--app-surface-soft)!important;}
  html.design-lab #txFilterOverlay .filter-group.filter-group-1{grid-template-columns:1fr!important;}
  html.design-lab #txFilterOverlay .filter-group label{display:block!important;font-size:12.5px!important;font-weight:700!important;color:var(--muted)!important;margin-bottom:7px!important;}
  html.design-lab #txFilterOverlay .filter-group .fm-select-trigger,
  html.design-lab #txFilterOverlay .filter-group input{height:46px!important;padding:0 12px!important;border:1px solid var(--app-line)!important;border-radius:12px!important;background:var(--card)!important;color:var(--text)!important;font-size:14.5px!important;font-weight:600!important;}
  html.design-lab #txFilterOverlay .filter-group input::placeholder{color:var(--muted)!important;font-weight:500!important;}
  html.design-lab #txFilterOverlay .filter-modal-actions{gap:10px!important;margin-top:2px!important;}
  html.design-lab #txFilterOverlay .filter-modal-actions .btn{height:50px!important;border-radius:14px!important;font-size:15px!important;font-weight:700!important;}
}
/* Correção: sem @media, esse display:none valia pra qualquer largura de
   tela até ser reativado só no mobile (mesma regressão dos outros pontos
   desta seção) — deixava o desktop sem NENHUM filtro em Lançamentos. */
.mp-year{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:700;font-size:17px;}
.mp-year button{background:var(--bg);color:var(--text);width:34px;height:34px;border-radius:8px;font-size:18px;}
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mp-grid button{padding:12px 0;border-radius:9px;background:var(--bg);color:var(--text);font-weight:600;font-size:14px;}
.mp-grid button:hover{background:var(--primary);color:#fff;} .mp-grid button.cur{background:var(--primary);color:#fff;}
.tool-row{display:flex;gap:12px;flex-wrap:wrap;}
.tool-card{flex:1;min-width:180px;padding:18px;text-align:center;}
.tool-card .ti{font-size:30px;margin-bottom:8px;}
@media(min-width:1200px){#tools .tool-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}#tools .tool-card{min-width:0;min-height:156px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:18px 14px;}#tools .tool-card .btn{margin-top:auto;}}
@media(min-width:901px) and (max-width:1199px){#tools .tool-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}#tools .tool-card{min-width:0;}}
.audit-list{max-height:min(54vh,440px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg);}.audit-row{display:flex;gap:10px;align-items:flex-start;padding:11px;border-bottom:1px solid var(--border);}.audit-row:last-child{border-bottom:0;}.audit-row i{color:var(--primary);margin-top:2px;}.audit-row .audit-text{font-size:13px;font-weight:650;}.audit-row .audit-date{font-size:11px;color:var(--muted);margin-top:3px;}
.cloud-version-list{display:grid;gap:9px;max-height:min(48vh,420px);overflow:auto;padding-right:2px;}.cloud-version-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--app-surface-soft);}.cloud-version-row>i{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(7,138,114,.11);color:var(--primary);}.cloud-version-row>span{min-width:0;}.cloud-version-row b{display:block;font-size:12px;}.cloud-version-row small{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.3;}.cloud-version-row .btn{white-space:nowrap;}.cloud-version-empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--border);border-radius:var(--radius-md);}.cloud-version-note{margin:12px 1px 0;color:var(--muted);font-size:11px;line-height:1.4;}
.metric-info{margin-left:3px;padding:1px 4px;background:transparent;color:var(--muted);font-size:12px;line-height:1;}.metric-info:hover{color:var(--primary);}#calendar .calendar-layout{grid-template-columns:minmax(0,1fr) 250px;gap:18px;align-items:start;}#calendar .financial-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;}.calendar-weekday{text-align:center;color:var(--muted);font-size:12px;font-weight:800;padding:4px 0 5px;}.calendar-day{min-height:108px;border:1px solid var(--border);border-radius:11px;padding:9px;background:var(--bg);overflow:hidden;}.calendar-day.today{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);}.calendar-day.empty-day{visibility:hidden;}.calendar-date{font-size:15px;font-weight:800;margin-bottom:7px;line-height:1;}.calendar-event{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.3;margin:4px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.calendar-event.pay{color:var(--expense);}.calendar-event.repeat{color:var(--primary);}.calendar-event.vault{color:var(--warning);}.calendar-event.card{color:var(--transfer);}.calendar-agenda{margin:0;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--bg);}.calendar-agenda h3{font-size:13px;margin-bottom:4px!important;}.calendar-agenda .cmp-row{padding:8px 0;gap:7px;}.calendar-agenda .cn{font-size:12px;line-height:1.25;}.calendar-agenda .cmp-vals{font-size:12px;white-space:nowrap;}.report-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}.report-summary .summary-item{padding:12px;border-radius:10px;background:var(--bg);}.report-summary .summary-item span{display:block;font-size:11px;color:var(--muted);}.report-summary .summary-item b{display:block;margin-top:4px;font-size:16px;}.app-version{margin:14px 0 0;text-align:center;font-size:11px;color:var(--muted);}
@media(max-width:600px){#calendar>.panel{padding:15px 6px;}#calendar .panel>h3{padding:0 8px;font-size:15px;}#calendar .hint{font-size:12px;line-height:1.42;padding:0 8px;}#calendar .calendar-scroll{overflow-x:auto;padding:0 8px 7px;-webkit-overflow-scrolling:touch;}#calendar .financial-calendar{grid-template-columns:repeat(7,86px);width:max-content;min-width:638px;}.calendar-weekday{font-size:11px;padding:5px 0 6px;}.calendar-day{min-height:60px;padding:6px 4px;border-radius:9px;}.calendar-date{font-size:14px;margin-bottom:4px;padding-left:4px;}.calendar-event{justify-content:center;font-size:11px;margin:3px 0;line-height:1;}.calendar-event span{display:none;}.calendar-event i{font-size:11px;}.calendar-agenda{margin:10px 8px 0;padding:10px;}.calendar-agenda .cmp-row{padding:9px 2px;gap:6px;}.calendar-agenda .cn{font-size:12px;min-width:0;}.calendar-agenda .cmp-vals{font-size:12px;white-space:nowrap;}.report-summary{gap:7px;}.report-summary .summary-item{padding:9px 7px;}.report-summary .summary-item b{font-size:13px;}}
@media(max-width:600px){.audit-list{max-height:48vh;}.audit-row{padding:10px;}.audit-row .audit-text{font-size:12px;}#cloudVersionsOverlay .modal{width:calc(100vw - 24px)!important;max-height:82dvh;overflow-y:auto;padding:16px 15px calc(16px + env(safe-area-inset-bottom));}#cloudVersionsOverlay .modal h2{font-size:17px;margin-bottom:10px;}#cloudVersionsOverlay .tool-modal-intro{margin:-2px 0 11px;font-size:11px;line-height:1.4;}#cloudVersionsOverlay .modal-actions{margin:0 0 11px!important;}#cloudVersionsOverlay .modal-actions .btn{width:100%;min-height:40px;justify-content:center;}.cloud-version-row{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:10px;}.cloud-version-row .btn{grid-column:auto;justify-self:end;align-self:center;padding:7px 8px;font-size:10px;}.cloud-version-row>i{width:30px;height:30px;}.cloud-version-list{max-height:34dvh;gap:8px;}.cloud-version-note{margin-top:10px;font-size:10px;}}
.statement-import-note{margin:-2px 0 12px;font-size:12px;line-height:1.45;color:var(--muted);}.statement-import-list{max-height:min(46vh,420px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg);}.statement-import-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 8px;font-size:12px;color:var(--muted);}.statement-import-toolbar label{display:flex;align-items:center;gap:7px;cursor:pointer;}.statement-import-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border-bottom:1px solid var(--border);}.statement-import-row:last-child{border-bottom:0;}.statement-import-row input{width:16px;height:16px;accent-color:var(--primary);}.statement-import-row.is-duplicate{opacity:.56;}.statement-import-desc{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.statement-import-meta{margin-top:2px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.statement-import-value{font-size:13px;font-weight:800;text-align:right;white-space:nowrap;}.statement-import-value.income{color:var(--income);}.statement-import-value.expense{color:var(--expense);}
@media(max-width:600px){#statement-import-page .statement-import-list{max-height:38dvh;}.statement-import-row{grid-template-columns:auto minmax(0,1fr) auto;gap:7px;padding:9px 8px;}.statement-import-desc{font-size:12px;}.statement-import-meta{font-size:10px;}.statement-import-value{font-size:12px;}}
.budget-row{padding:14px 0;border-bottom:1px solid var(--border);}
.budget-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;} .budget-head .nm{font-weight:600;}
.inv-card{border-radius:14px;padding:18px;margin-bottom:14px;border-left:4px solid var(--invest);}
.inv-name{font-weight:700;font-size:16px;}
.vault-card .vn{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;}
.vault-card .vamt{font-size:24px;font-weight:800;margin:8px 0;}
.vault-card .vgoal{font-size:12px;opacity:.9;}
.vault-card .vproj{font-size:12px;background:rgba(255,255,255,.18);border-radius:8px;padding:8px 10px;margin-top:10px;}
.vault-card .vactions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.vault-card .vactions button{flex:1;min-width:90px;background:rgba(255,255,255,.2);padding:8px;border-radius:8px;font-size:12px;font-weight:600;}
@media(max-width:600px){#tools .tool-card .sync-indicator{width:100%;}#tools .tool-card .sync-time{display:none;}#categories>.topbar>div{width:100%;justify-content:space-between;}#categories>.topbar>div .btn:last-child{margin-left:auto;}}
@media(max-width:600px){#recSummary .topbar{width:100%;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;}#recSummary .topbar>div:first-child{min-width:0;}#recSummary .topbar>div:last-child{margin-left:auto;flex:0 0 auto;white-space:nowrap;text-align:right!important;}}
.sync-indicator .sync-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted);box-shadow:0 0 0 3px rgba(138,151,168,.12);}.sync-indicator .sync-label,.sync-indicator .sync-time{display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto;}.sync-indicator.ok .sync-dot{background:var(--income);box-shadow:0 0 0 3px rgba(0,185,142,.14);}.sync-indicator.off .sync-dot{background:#8a97a8;}#tools .tool-card .sync-indicator{display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap;margin:0 0 9px;font-size:10px;}
@media(max-width:600px){.search-bar{display:flex!important;flex-wrap:nowrap!important;align-items:end!important;gap:8px!important;}.search-bar .fg,.search-bar .fg:first-child{display:block!important;grid-column:auto!important;flex:1 1 auto!important;min-width:0!important;}.search-bar .btn.tx-filter-trigger{display:inline-flex!important;grid-column:auto!important;justify-self:auto!important;flex:0 0 42px!important;width:42px!important;height:40px!important;padding:0!important;}}
.drill{background:var(--bg);border-radius:10px;padding:14px;margin-top:12px;}
.drill h4{font-size:14px;margin-bottom:10px;display:flex;justify-content:space-between;}
.drill .srow{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--border);}
.drill .srow:last-child{border:none;}
.alert{border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:14px;display:flex;align-items:center;gap:10px;}
.alert.warn{background:rgba(243,156,18,.12);color:#b9770e;border-left:4px solid #f39c12;}
.alert.danger{background:rgba(244,54,76,.1);color:#c0293c;border-left:4px solid #f4364c;}
.alert.ok{background:rgba(0,185,142,.1);color:#00926f;border-left:4px solid #00b98e;}
.alert.info{background:rgba(52,152,219,.1);color:#2c7bb0;border-left:4px solid #3498db;}
[data-theme="dark"] .alert.warn{color:#f5c26b;} [data-theme="dark"] .alert.danger{color:#f19aa6;} [data-theme="dark"] .alert.ok{color:#5fd6b6;} [data-theme="dark"] .alert.info{color:#7fc0ea;}
/* Central de avisos: discreta e clean — sem o efeito de "anel" ao redor do
   card, sem rótulo "não lida" (só um pontinho antes da data), e itens já
   lidos ficam um pouco mais apagados para o olho ir direto ao que é novo. */
.dashboard-alerts-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;}
.dashboard-alerts-head .tool-modal-intro{margin:0;flex:1;min-width:0;}
.dashboard-alerts-head .btn,html.design-lab .dashboard-alerts-head .btn{flex:0 0 auto;white-space:nowrap;background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;padding:4px 2px!important;min-height:0!important;color:var(--muted)!important;font-size:11.5px!important;font-weight:700!important;}
.dashboard-alerts-head .btn:hover,html.design-lab .dashboard-alerts-head .btn:hover{color:var(--primary)!important;}
#dashAlertsList .alert,#dashAlertsListPage .alert{align-items:center;cursor:pointer;border-left-width:2px;transition:opacity .15s ease;}
#dashAlertsList .alert:not(.unread),#dashAlertsListPage .alert:not(.unread){opacity:.62;}
#dashAlertsList .alert .dashboard-alert-copy,#dashAlertsListPage .alert .dashboard-alert-copy{display:block;flex:1;min-width:0;line-height:1.4;}
.alert-date{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.1px;}
.alert-dot{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:currentColor;}
/* position:relative/absolute em vez de deixar o botão fluir como mais um
   item do grid/flex do card: com 3 filhos (ícone, texto, excluir) num grid
   de só 2 colunas (ver .dashboard-alerts-modal .alert / .dashboard-alert-
   preview .alert), o 3º item "sobrava" pra uma linha nova, caindo embaixo
   do ícone, isolado do texto — corrigido tirando o botão do fluxo. */
.alert{position:relative;}
.alert-delete{position:absolute;top:7px;right:7px;flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:7px;background:transparent;color:var(--muted);opacity:.55;cursor:pointer;font-size:11px;}
.alert-delete:hover{opacity:1;background:rgba(217,74,92,.1);color:var(--expense);}
#dashAlertsList .alert,#dashAlertsListPage .alert,.dashboard-alert-preview .alert{padding-right:36px;}
.cmp-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.cmp-row .cn{flex:1;font-weight:600;font-size:14px;}
.cmp-vals{text-align:right;font-size:13px;}
.cmp-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.cmp-up{background:rgba(244,54,76,.12);color:#f4364c;} .cmp-down{background:rgba(55,123,181,.12);color:#377bb5;} .cmp-eq{background:var(--bg);color:var(--muted);}
.ant-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.ant-row .an{flex:1;} .ant-row .an .t1{font-weight:600;font-size:14px;} .ant-row .an .t2{font-size:12px;color:var(--muted);}
.ant-year{font-weight:700;color:var(--expense);}
.health-bar{background:var(--bg);margin-top:8px;}
.health-bar .fill{transition:width .5s;}
.streaks-active{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.streak-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);}
.streak-row i{color:var(--primary);width:16px;text-align:center;}
.badges-gallery{display:flex;flex-wrap:wrap;gap:8px;}
.badge-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--border);font-size:12px;color:var(--text);max-width:100%;}
.badge-chip i{color:#f39c12;flex-shrink:0;}
.badge-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bill-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.bill-row .bn{flex:1;min-width:0;} .bill-row .bn .t1{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;} .bill-row .bn .bill-desc{min-width:0;overflow-wrap:anywhere;} .bill-row .bn .t2{font-size:12px;color:var(--muted);}
.bill-status{display:inline-flex;align-items:center;vertical-align:middle;font-size:15px;font-weight:700;padding:0 2px;border-radius:0;background:transparent!important;box-shadow:none;}
.bill-status .status-icon{display:none;}.bill-status .status-label{display:inline;font-size:11px;}
@media(max-width:600px){.bill-status .status-label{display:none!important;}.bill-status .status-icon{display:inline-flex!important;}}
.st-pending{background:rgba(243,156,18,.15);color:#c07d0a;} .st-paid{background:rgba(0,185,142,.12);color:#00926f;} .st-late{background:rgba(244,54,76,.12);color:#f4364c;}
[data-theme="dark"] .st-pending{color:#f5c26b;} [data-theme="dark"] .st-paid{color:#5fd6b6;} [data-theme="dark"] .st-late{color:#f19aa6;}
/* Bug real encontrado na auditoria: z-index 600 ficava ATRÁS das janelas
   flutuantes de tela cheia do desktop (.mais-window-modal, z-index 900 —
   Google Agenda, WhatsApp, Central de dados, perfil etc.). Um toast()
   disparado com uma dessas janelas aberta (ex: "WhatsApp desconectado.")
   renderizava escondido atrás do fundo desfocado da janela, invisível até
   fechá-la. */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:min(440px,calc(100vw - 32px));pointer-events:none;}
.toast{box-sizing:border-box;}
.toast i{width:18px;margin-top:1px;flex:0 0 auto;text-align:center;color:var(--primary);}.toast.err i{color:#ff8795;}.toast.info i{color:#8dc7ff;}.toast span{min-width:0;}
.toast.show{opacity:1;transform:none;}.invoice-paid-status{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.16);font-size:12px;font-weight:800}.invoice-paid-status i{color:#73efc9}
/* MICROINTERAÇÕES v9.1 */
/* BUG REAL (achado com 3 prints de telas bem diferentes, todas com o
   título borrado): TODA página (`.section`) entra com esta animação —
   inclusive o título, já que ele é filho da própria `.section` animada,
   não tem como "escapar" da opacidade do pai. Um print tirado durante
   esses 300ms pega o texto ainda semitransparente, misturado com o fundo
   por trás — no olho isso lê como "borrado", mesmo não sendo um blur de
   verdade. Explica por que telas completamente diferentes (lista, modal,
   subpágina) mostravam o mesmo problema em momentos diferentes: não é
   uma característica de UMA tela, é o instante em que o print foi tirado
   em QUALQUER tela. Tirado o esmaecimento (opacity), mantido só o
   deslizar sutil (translateY) — texto sempre 100% opaco, nítido em
   qualquer frame do print. */
.section{animation:fmFade .3s ease}
@keyframes fmFade{from{transform:translateY(6px)}to{transform:none}}
.stat:hover{box-shadow:0 6px 16px rgba(0,0,0,.10)}
.btn:active,.icon-btn:active{transform:scale(.94)}.btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,185,142,.2)}.icon-btn:hover{transform:scale(1.08)}
.tx{transition:background .15s}
.tx:hover{background:var(--bg)}
.nav-item:hover{padding-left:26px}
.fab{transition:transform .15s}
.fab:active{transform:scale(.9)}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}@keyframes overlay-out{to{opacity:0}}@keyframes modal-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes modal-out{to{opacity:0;transform:translateY(10px) scale(.985)}}
.vault-card:hover,.inv-card:hover,.tool-card:hover{transform:translateY(-2px)}
.dash-widget{transition:opacity .3s}
.dcfg{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.dcfg .nm{flex:1;font-size:14px;font-weight:600}
.dcfg .sw{width:44px;height:24px;border-radius:20px;background:var(--border);position:relative;transition:.2s;cursor:pointer;flex-shrink:0}
.dcfg .sw::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.dcfg .sw.on::after{left:23px}
.cmp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px;}.cmp-head h3{margin:0;}
.dashboard-view-switch{display:flex;justify-content:flex-end;margin:0 0 12px;}.dashboard-view-options{flex:0 0 auto;}.dashboard-view-options button.active{background:rgba(0,185,142,.13);}.dashboard-view-options button[data-dashboard-view="projected"].active{background:rgba(243,156,18,.16);}
.dashboard-controls{display:flex;align-items:center;margin-bottom:12px;}.dashboard-controls .dashboard-view-switch{margin:0;}.dashboard-controls #dashCfgBtn{margin:0!important;}
@media(min-width:601px){
  #cards-sec .cc{position:relative;}
  #cards-sec .cc .name{padding-right:260px;}
  #cards-sec .cc-actions{position:absolute;top:14px;right:78px;margin:0;}
  #cards-sec .cc-actions .btn{flex:0 0 auto;min-width:0;padding:8px 12px;font-size:12px;}
  #cards-sec .cc-manage-actions{position:absolute;top:14px;right:14px;display:flex;align-items:center;}
}
@media(min-width:601px){
  #vaults .vault-card{position:relative;}
  #vaults .vault-card .vn{padding-right:270px;}
  #vaults .vault-card .vactions{position:absolute;top:14px;right:78px;margin:0;justify-content:center;flex-wrap:nowrap;}
  #vaults .vault-card .vactions button{flex:0 0 auto;min-width:0;padding:7px 12px;font-size:12px;}
  #vaults .vault-card .vault-manage-actions{position:absolute;top:14px;right:14px;display:flex;align-items:center;}
}
/* Lançamentos e extratos: enquadramento mais compacto e legível em telas menores. */
@media(max-width:600px){
  #transactions .search-bar{margin-bottom:12px!important;}
  .dashboard-view-switch{margin-bottom:10px;}
  .dashboard-controls{margin-bottom:12px;}.dashboard-controls #dashCfgBtn{font-size:11px;}
  /* Filtros em uma faixa única: evita um botão isolado e mantém o cabeçalho equilibrado. */
  #transactions .filter-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:center;overflow:visible!important;gap:4px!important;margin-bottom:14px!important;padding:0!important;}
  #transactions .filter-tabs button,#transactions .filter-tabs button:nth-child(5){min-width:0!important;min-height:34px;grid-column:auto!important;padding:5px 1px!important;font-size:9.5px;letter-spacing:-.35px;white-space:nowrap;}
  #transactions>.panel{padding:8px 12px;margin-bottom:12px;}
  #transactions .day-head{padding:12px 0 6px;font-size:11px;}
  #transactions .tx{grid-template-columns:32px minmax(0,1fr) auto!important;gap:7px 8px!important;padding:11px 0!important;}
  #transactions .tx .dot{width:32px;height:32px;font-size:14px;}
  #transactions .tx .info .desc{font-size:14px;line-height:1.28;}
  #transactions .tx .info .meta{font-size:11px;line-height:1.32;}
  #transactions .tx .tx-actions{gap:3px;}
  #transactions .tx .act{width:27px;height:27px;padding:4px!important;font-size:12px;}
  #transactions .tx .amt{font-size:14px;margin-top:1px;}
  /* Extratos e faturas: ganham área útil extra em telas menores. */
  .invoice-modal{width:100vw!important;height:min(86dvh,720px)!important;max-height:86dvh!important;padding:16px 4px calc(16px + env(safe-area-inset-bottom))!important;}
  .invoice-modal h2{font-size:17px!important;margin-bottom:12px!important;line-height:1.2;}
  .invoice-modal .field{margin-bottom:9px;}
  .invoice-modal .field label{font-size:11px;}
  .invoice-modal .field select{height:40px;font-size:14px;}
  .invoice-modal .invoice-summary{margin-bottom:10px;}
  .invoice-modal .invoice-list-title{margin:10px 0 4px;font-size:12px;}
  .invoice-modal #invoiceList,.invoice-modal #accountStatementList{padding:0 2px 2px 0;}
  .invoice-modal .tx{grid-template-columns:32px minmax(0,1fr) auto!important;gap:7px 8px!important;padding:10px 0!important;}
  .invoice-modal .tx .dot{width:32px;height:32px;font-size:14px;}
  .invoice-modal .tx .info .desc{font-size:13px;line-height:1.28;}
  .invoice-modal .tx .info .meta{font-size:11px;line-height:1.28;}
  .invoice-modal .tx .act{width:27px;height:27px;padding:4px!important;font-size:12px;}
  .invoice-modal .tx .amt{font-size:14px;}
  .invoice-modal .modal-actions{margin-top:12px;gap:8px;}
  .invoice-modal .modal-actions .btn{min-height:42px;}
}
@media(max-width:600px){
  /* Notificações inferiores com leitura mais confortável em telas menores. */
  .toast-wrap{left:12px;right:12px;bottom:calc(var(--mobile-bottom-nav-height) + 12px);transform:none;width:auto;max-width:none;}
  .toast{max-width:none;text-align:left;}
  /* Atalhos levemente mais baixos e centralizados na barra inferior. */
  .bottom-nav{align-items:center;}
}
/* Acesso: bloqueia a interface até a sessão segura ser confirmada pela nuvem. */
.auth-screen{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;overflow:auto;padding:28px;}.auth-screen.hidden{display:none;}.auth-screen.auth-resolving .auth-shell{display:none}.auth-loading{display:none;color:#fff;text-align:center}.auth-screen.auth-resolving .auth-loading{display:grid;justify-items:center;gap:13px}.auth-loading .brand-mark{width:46px;height:46px;font-size:20px;background:var(--primary);box-shadow:0 8px 22px rgba(90,141,225,.3)}.auth-loading strong{font-size:22px}.auth-loading span{font-size:13px;color:rgba(255,255,255,.78)}.auth-shell{width:min(940px,100%);min-height:560px;display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:var(--card);box-shadow:0 24px 72px rgba(0,0,0,.32);}.auth-hero{padding:52px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#173a72,#2f62ab);color:#fff;}.auth-brand{font-size:27px;font-weight:800;display:flex;align-items:center;gap:10px;}.auth-brand .brand-mark{width:38px;height:38px;font-size:17px;}.auth-hero h1{font-size:34px;line-height:1.12;letter-spacing:-1px;margin:48px 0 14px;max-width:410px;}.auth-hero p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.86);max-width:390px;}.auth-benefits{display:grid;gap:12px;margin-top:26px;}.auth-benefits span{display:flex;gap:9px;font-size:13px;font-weight:600;}.auth-benefits i{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.16);}.auth-privacy{font-size:12px;color:rgba(255,255,255,.72);line-height:1.45;}.auth-panel{padding:48px 46px;display:flex;flex-direction:column;justify-content:center;}.auth-panel h2{font-size:26px;letter-spacing:-.5px;margin-bottom:7px;}.auth-panel .auth-sub{color:var(--muted);font-size:14px;line-height:1.45;margin-bottom:24px;}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:var(--bg);border-radius:11px;margin-bottom:20px;}.auth-tabs button{background:transparent;color:var(--muted);padding:9px 8px;border-radius:8px;font-weight:700;font-size:13px;}.auth-tabs button.active{background:var(--card);color:var(--text);box-shadow:0 1px 5px rgba(0,0,0,.12);}.auth-panel .field{margin-bottom:14px;}.auth-panel .field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}.auth-panel input{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--text);outline:none;}.auth-error{min-height:20px;margin:5px 0 10px;font-size:12px;color:var(--danger);line-height:1.4;}.auth-submit{width:100%;padding:13px;font-size:15px;}.auth-forgot{display:block;margin:15px auto 0;background:none;font-size:12px;font-weight:700;}.auth-config{margin-top:18px;padding:10px 12px;border-radius:9px;background:rgba(243,156,18,.11);color:var(--muted);font-size:12px;line-height:1.45;}.auth-local{margin-top:10px;width:100%;font-size:12px;}
@media(max-width:680px){.auth-screen{align-items:stretch;}.auth-shell{min-height:100dvh;border:0;border-radius:0;}.auth-hero{padding:calc(28px + env(safe-area-inset-top)) 26px 28px;}.auth-panel{padding:30px 26px calc(30px + env(safe-area-inset-bottom));}}
/* Design system FinMoney: superfícies mais sóbrias, leitura financeira e foco acessível. */
:root{--primary:#5a8de1;--primary-dark:#4777c8;--danger:#f4364c;--income:#00b98e;--expense:#e45768;--warning:#c98919;--transfer:#4a82df;--invest:#8062d4;--vault:#d99235;--bg:#f4f7ff;--card:#ffffff;--text:#17213d;--muted:#72809b;--border:#e3eaf8;--sidebar:#14212b;--input-bg:#f8faff;--radius-lg:18px;--radius-md:12px;--app-surface:#ffffff;--app-surface-soft:#f5f8ff;--app-line:#e2e9f6;--app-shadow:0 18px 42px rgba(34,61,112,.13);--app-shadow-soft:0 9px 24px rgba(34,61,112,.09);--card-shadow-base:0 1px 4px rgba(0,0,0,.06);}[data-theme="dark"]{--bg:#0a1124;--card:#111a32;--text:#f5f7ff;--muted:#9ca9c3;--border:#273452;--sidebar:#0c141c;--input-bg:#18233e;--app-surface:#111a32;--app-surface-soft:#17233d;--app-line:#2b3958;--app-shadow:0 20px 48px rgba(0,0,0,.32);--app-shadow-soft:0 10px 28px rgba(0,0,0,.24);}/* Vocabulário de tokens do mockup (--positive/--negative/--accent/--text-2/
   --text-3/--surface-sunken e as variantes "-soft") só existia dentro de
   "html.design-lab" escopado a @media(min-width:901px) — pensado só pro
   computador quando foi criado. CSS novo do celular (Relatórios, Caixinhas)
   passou a usar essas mesmas classes/nomes de variável, e sem definição
   nenhuma fora do computador, "var(--positive-soft)" etc. não resolvia pra
   nada (fundo ficava transparente). Mesmos valores do bloco light/dark do
   design-lab, só que sem o media query — aditivo, não muda nada que já
   funcionava (só passa a existir onde antes não existia). */
:root{--positive:#00b98e;--positive-soft:rgba(0,185,142,.10);--negative:#e45768;--negative-soft:rgba(228,87,104,.09);--warning-soft:rgba(201,137,25,.10);--accent:#305bf3;--accent-light:#6fbafc;--accent-dark:#1c3fc7;--accent-soft:rgba(48,91,243,.10);--surface-sunken:#eef1f7;--text-2:#565d6e;--text-3:#6b7280;}
[data-theme="dark"]{--positive-soft:rgba(31,214,168,.16);--negative-soft:rgba(255,122,138,.16);--warning-soft:rgba(226,168,61,.18);--accent-soft:rgba(111,186,252,.18);--surface-sunken:#1a2242;--text-2:#aab2cf;--text-3:#7d86a8;}
body{letter-spacing:-.08px;}.nav-item{width:calc(100% - 20px);border-left:0;}.nav-item.active{border-left:0;}.nav-item:hover{background:rgba(255,255,255,.085);}.sidebar-footer{border-top:1px solid rgba(255,255,255,.08);}.main{padding:28px 34px;}.stat{position:relative;}.stat::before{content:'';position:absolute;left:0;background:var(--primary);}.stat.expense::before{background:var(--expense);}.stat.card::before{background:var(--warning);}.stat.invest::before{background:var(--invest);}.stat.vault::before{background:var(--vault);}.panel h3{letter-spacing:-.25px;}.tx{padding:14px 0;}.tx .dot{border-radius:var(--radius-md);}.bottom-nav{border-top:1px solid var(--border);box-shadow:0 -10px 28px rgba(10,20,30,.09);}.bottom-nav button{font-weight:650;}.bottom-nav button.active .ico{filter:drop-shadow(0 3px 5px rgba(7,138,114,.25));}.sidebar-collapse{margin-left:auto;width:29px;height:29px;border-radius:8px;font-size:13px;}.header-search,.header-quick{height:38px;width:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;}.header-search{border:1px solid var(--border);}.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.quick-action{display:flex;align-items:center;gap:10px;width:100%;padding:13px;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-weight:700;text-align:left;}.quick-action i{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;color:var(--primary);}.quick-action:hover{border-color:var(--primary);background:rgba(7,138,114,.045);}.global-search-result{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:10px;background:var(--bg);color:var(--text);text-align:left;}.global-search-result i{width:25px;color:var(--primary);}.global-search-result small{display:block;color:var(--muted);margin-top:2px;}.auth-password-wrap{position:relative;}.auth-password-wrap input{padding-right:43px;}.auth-password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;color:var(--muted);padding:8px;border-radius:7px;}.auth-remember{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:-2px 0 12px;}.auth-remember input{width:auto!important;accent-color:var(--primary);}.auth-legal{font-size:11px;color:var(--muted);line-height:1.45;margin:14px 0 0;text-align:center;}@media(min-width:901px){body.sidebar-collapsed .sidebar{overflow:visible;}body.sidebar-collapsed .sidebar .logo{justify-content:center;padding-left:8px;padding-right:8px;}body.sidebar-collapsed .sidebar .brand-name,body.sidebar-collapsed .nav-item .badge{display:none;}body.sidebar-collapsed .sidebar-collapse{position:absolute;right:-13px;top:23px;background:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.22);}body.sidebar-collapsed .nav-item{justify-content:center;padding:11px 8px;font-size:0;}body.sidebar-collapsed .nav-item .ico{font-size:17px;width:auto;}body.sidebar-collapsed .sidebar-footer{margin:16px 8px 0;}body.sidebar-collapsed .sidebar-footer button{font-size:0;padding:10px;justify-content:center;}.sidebar-collapse i{transition:transform .2s;}body.sidebar-collapsed .sidebar-collapse i{transform:rotate(180deg);}}@media(max-width:900px){.sidebar-collapse,.header-search{display:none;}.header-quick{width:40px;height:40px;}.quick-grid{grid-template-columns:1fr;}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin:19px 0 14px;}.auth-divider::before,.auth-divider::after{content:'';height:1px;flex:1;background:var(--border);}.auth-providers{display:grid;grid-template-columns:1fr;gap:8px;}.auth-provider{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:9px;min-height:40px;font-size:12px;font-weight:700;}.auth-provider:hover{border-color:var(--primary);color:var(--primary);}.auth-provider .fa-google{color:#4285f4;}
.nav-group-label{font-size:10px;font-weight:800;text-transform:uppercase;}.sidebar-collapsed .nav-group-label{visibility:hidden;height:8px;margin:9px 0 0;}
.profile-hub h3{margin-bottom:16px;}.profile-hub h3 .btn{margin-left:auto;}.profile-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,var(--primary),var(--primary-dark));color:#fff;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;font-size:16px;font-weight:800;}.profile-avatar.large{width:68px;height:68px;font-size:24px;}.profile-edit-photo{display:flex;align-items:center;gap:14px;padding:4px 0 16px;}.profile-photo-remove{display:block;margin:8px 0 6px;background:none;color:var(--danger);font-size:12px;font-weight:700;}.profile-edit-photo .hint{font-size:11px;line-height:1.4;}@media(max-width:600px){.profile-hub h3{gap:8px;}.profile-hub h3 .btn{padding:8px 9px;font-size:11px;}.profile-edit-photo{align-items:flex-start;}}
@media(min-width:901px){body.sidebar-collapsed .sidebar .nav-item{width:calc(100% - 16px);margin:2px 8px;padding:11px 0;display:flex;align-items:center;justify-content:center;gap:0;}body.sidebar-collapsed .sidebar .nav-item .ico{width:100%;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;}body.sidebar-collapsed .sidebar .nav-item .ico i{width:auto;}}
/* Área de rolagem: o último conteúdo sempre fica acima da navegação fixa. */
@media(max-width:600px){.main{padding:14px 14px calc(var(--mobile-bottom-nav-height) + 36px)!important;scroll-padding-bottom:calc(var(--mobile-bottom-nav-height) + 36px);}.main::after{content:'';display:block;height:1px;}}
/* Navegação lateral compacta: todas as áreas permanecem acessíveis sem corte. */
.sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;}.nav-group-label{margin:10px 20px 3px;}.nav-item{min-height:34px;padding:7px 11px;font-size:13px;}.sidebar-footer{margin:10px 14px 0;padding:10px 0 12px;gap:6px;}.theme-btn,.install-btn{min-height:38px;padding:8px;font-size:13px;}
@media(max-width:900px){.sidebar .nav-item{font-size:13px;}.sidebar-footer{margin:8px 12px 0;}.theme-btn,.install-btn{padding:7px;font-size:12px;}}
@media(max-height:720px){.sidebar .nav-group-label{margin-top:5px;margin-bottom:1px;}.sidebar .nav-item{min-height:28px;padding-top:4px;padding-bottom:4px;font-size:12px;}.sidebar-footer{margin-top:5px;padding-top:6px;padding-bottom:7px;}.theme-btn,.install-btn{min-height:32px;padding:6px;font-size:11px;}}
@media(max-height:600px){.sidebar .nav-group-label{display:none;}.sidebar .nav-item{min-height:27px;margin-top:0;margin-bottom:0;}.sidebar-footer{padding-top:5px;}}
/* Os títulos dos grupos não devem desaparecer em aparelhos baixos: o menu já possui rolagem própria. */
@media(max-height:600px){body:not(.sidebar-collapsed) .sidebar .nav-group-label{display:block;margin:4px 16px 1px;font-size:9px;line-height:1.15;}}
/* Autenticação em telas menores: foco no formulário, sem desperdício vertical. */
@media(max-width:680px){.auth-screen{-webkit-overflow-scrolling:touch;}.auth-shell{min-height:100dvh;flex-direction:column;}.auth-hero{padding:calc(18px + env(safe-area-inset-top)) 22px 18px;flex:0 0 auto;}.auth-panel{padding:22px 22px calc(24px + env(safe-area-inset-bottom));justify-content:flex-start;flex:1;}.auth-panel input{font-size:16px;}}
@media(max-width:680px) and (max-height:650px){.auth-hero{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;}.auth-hero h1{font-size:20px;margin:12px 0 0;}.auth-hero p{display:none;}.auth-panel{padding-top:16px;}.auth-panel .auth-sub{display:none;}.auth-tabs{margin-bottom:10px;}.auth-divider{margin:10px 0;}.auth-legal{display:none;}}
@media(min-width:901px){.sidebar-footer{align-self:stretch;}.sidebar-footer .theme-btn,.sidebar-footer .install-btn{width:100%;}}
/* Em telas amplas, a barra lateral é fixa: reserve exatamente o espaço dela na área de conteúdo.
   Assim abrir ou recolher o menu não cria largura extra nem desloca as páginas horizontalmente. */
@media(min-width:901px){
  .main{flex:0 0 calc(100% - 230px);}
  body.sidebar-collapsed .main{flex-basis:calc(100% - 76px);min-width:0;}
  .main .panel,.main .grid2,.main .cards{min-width:0;}
  .main canvas{max-width:100%;}
}
/* Orçamento: informações e ações legíveis, sem apertar os controles em telas menores. */
@media(max-width:600px){
  #budget .topbar{margin-bottom:12px!important;align-items:center;gap:10px;}
  #budget .topbar h3{font-size:17px!important;line-height:1.2;min-width:0;}
  #budget .topbar .btn{flex:0 0 auto;padding:9px 12px;font-size:12px;white-space:nowrap;}
  #budget .panel{padding:10px 12px;}
  #budget .budget-row{margin:0;padding:13px 12px;border:1px solid var(--border);border-radius:13px;background:var(--bg);}
  #budget .budget-head{gap:10px;align-items:flex-start;font-size:14px;}
  #budget .budget-head .nm{display:flex;align-items:center;gap:8px;line-height:1.25;min-width:0;overflow-wrap:anywhere;}
  #budget .bar-track{height:9px;margin-top:11px;border:1px solid var(--border);box-sizing:border-box;background:var(--card);}
  #budget .bar-track .fill{min-height:100%;}
}
@media(min-width:601px){
  #budget .panel{padding:12px 16px;}
  #budget .budget-row{margin:0;padding:15px 16px;border:1px solid var(--border);border-radius:13px;background:var(--bg);}
  #budget .budget-head{gap:14px;align-items:center;}
  #budget .budget-head .nm{display:flex;align-items:center;gap:9px;line-height:1.25;min-width:0;}
  #budget .bar-track{height:9px;margin-top:11px;border:1px solid var(--border);box-sizing:border-box;background:var(--card);}
  #budget .bar-track .fill{min-height:100%;}
}
/* Calendário interativo: a seleção de uma data concentra seus compromissos no painel lateral. */
#calendar .calendar-day{display:block;width:100%;font:inherit;text-align:left;color:var(--text);cursor:pointer;box-shadow:none;}
#calendar .calendar-day.has-events{background:color-mix(in srgb,var(--primary) 5%,var(--bg));}
#calendar .calendar-day:focus-visible{outline:3px solid rgba(7,138,114,.3);outline-offset:2px;}
#calendar .calendar-more{display:inline-flex;margin:3px 0 0;font-size:10px;font-weight:800;color:var(--primary);}
#calendar .calendar-agenda{background:var(--card);box-shadow:0 6px 16px rgba(20,33,43,.04);}
.calendar-agenda-title{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--border);}.calendar-agenda-title span{font-size:11px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.45px;}.calendar-agenda-title span i{color:var(--primary);margin-right:5px;}.calendar-agenda-title strong{text-transform:capitalize;font-size:15px;line-height:1.25;}.calendar-agenda-list{display:grid;gap:3px;margin-top:7px;}.calendar-agenda-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);}.calendar-agenda-item:last-child{border-bottom:0;}.calendar-agenda-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(48,91,243,.1);color:var(--primary);font-size:12px;}.calendar-agenda-item.pay .calendar-agenda-icon{background:rgba(217,74,92,.11);color:var(--expense);}.calendar-agenda-item.receive .calendar-agenda-icon{background:rgba(7,138,114,.11);color:var(--income);}.calendar-agenda-item.vault .calendar-agenda-icon{background:rgba(201,137,25,.12);color:var(--warning);}.calendar-agenda-item.card .calendar-agenda-icon{background:rgba(55,123,181,.12);color:var(--transfer);}.calendar-agenda-copy{min-width:0;font-size:12px;font-weight:750;line-height:1.25;overflow-wrap:anywhere;}.calendar-agenda-copy small{display:block;margin-top:3px;font-size:10px;font-weight:500;color:var(--muted);}.calendar-agenda-item strong{font-size:12px;white-space:nowrap;color:var(--text);}.calendar-agenda-muted{color:var(--muted);}.calendar-agenda-empty{min-height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;color:var(--muted);font-size:12px;line-height:1.4;}.calendar-agenda-empty i{font-size:22px;color:var(--primary);opacity:.8;}.calendar-agenda-empty strong{color:var(--text);font-size:13px;}
@media(max-width:600px){#calendar .calendar-more{margin-left:4px;}#calendar .calendar-agenda-title strong{font-size:16px;}.calendar-agenda-item{grid-template-columns:32px minmax(0,1fr) auto;padding:11px 0;}.calendar-agenda-icon{width:30px;height:30px;}.calendar-agenda-copy{font-size:13px;}.calendar-agenda-item strong{font-size:13px;}.calendar-agenda-empty{min-height:118px;}}
/* O calendário ocupa toda a largura; os detalhes da data selecionada ficam logo abaixo. */
#calendar .calendar-layout{display:block;}
#calendar .calendar-scroll{width:100%;}
#calendar .financial-calendar{gap:10px;}
#calendar .calendar-day{min-height:116px;padding:11px;}
#calendar .calendar-date{font-size:16px;margin-bottom:8px;}
#calendar .calendar-agenda{width:100%;margin-top:16px;padding:16px 18px;}
@media(min-width:601px){
  #calendar .calendar-agenda-title{display:flex;align-items:baseline;gap:9px;padding-bottom:13px;}
  #calendar .calendar-agenda-list{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px;margin-top:12px;}
  #calendar .calendar-agenda-item{min-height:66px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--bg);}
  #calendar .calendar-agenda-item:last-child{border-bottom:1px solid var(--border);}
}
@media(max-width:600px){
  #calendar .calendar-scroll{padding-bottom:8px;}
  #calendar .financial-calendar{gap:6px;}
  #calendar .calendar-day{min-height:66px;padding:6px 4px;}
  #calendar .calendar-date{font-size:14px;margin-bottom:4px;}
}
/* Grade mais compacta: muitos itens rolam dentro do próprio dia, sem empurrar os detalhes para baixo. */
@media(min-width:601px){
  #calendar .financial-calendar{width:min(100%,980px);margin:0 auto;}
  #calendar .calendar-day{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
}
@media(max-width:600px){
  #calendar .calendar-day{height:68px;max-height:68px;overflow-y:auto;scrollbar-width:none;}
  #calendar .calendar-day::-webkit-scrollbar{display:none;}
}
@media(min-width:601px){
  #calendar .financial-calendar{width:min(100%,840px);}
  #calendar .calendar-day{min-height:78px;height:84px;max-height:84px;padding:6px 7px;}
  #calendar .calendar-date{font-size:14px;margin-bottom:3px;}
  #calendar .calendar-event{margin:2px 0;font-size:9px;}
}
/* Perfil e segurança: área de conta clara, confiável e focada em ações importantes. */.profile-identity{min-width:0;}.profile-identity strong{font-size:16px;}.profile-identity>span{display:block;margin-top:3px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.profile-trust{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:11px;font-weight:700;color:var(--income);}.account-security-modal{max-height:90dvh;overflow-y:auto;}.account-security-intro{display:flex;gap:9px;align-items:flex-start;margin:4px 0 14px;padding:11px;border-radius:10px;background:rgba(7,138,114,.09);color:var(--muted);font-size:12px;line-height:1.4;}.account-security-intro>i{color:var(--primary);margin-top:1px;}.account-security-section{padding:13px 0;border-top:1px solid var(--border);}.account-security-title{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px;}.account-security-title>i{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg);color:var(--primary);}.account-security-title strong{display:block;font-size:13px;}.account-security-title small{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--muted);}.account-security-section .field{margin:10px 0;}.account-security-section .btn{width:100%;justify-content:center;}.account-signout .account-security-title>i{color:var(--expense);background:rgba(217,74,92,.1);}.account-security-note{margin-top:2px;font-size:10px;color:var(--muted);line-height:1.4;text-align:center;}.mfa-status{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:11px;font-weight:700;color:var(--muted);}.mfa-status i{color:var(--primary);}.mfa-status.enabled{color:var(--income);}.mfa-status.enabled i{color:var(--income);}.mfa-qr{display:block;width:172px;height:172px;margin:14px auto;padding:9px;border:1px solid var(--border);border-radius:13px;background:#fff;}.mfa-code-input{letter-spacing:5px;text-align:center;font-size:20px;font-weight:800;}.btn-danger{background:var(--expense);color:#fff;}.btn-danger:hover{filter:brightness(.94);}
@media(max-width:600px){.account-security-modal{padding:18px 15px calc(18px + env(safe-area-inset-bottom));}}
/* Camada de produto: superfícies, hierarquia e controles consistentes para uma experiência financeira premium. */
.topbar{padding:0 0 18px;border-bottom:1px solid var(--app-line);}.topbar h1{font-weight:780;}.page-heading{min-width:0;}.greeting{font-weight:650;}
.month-nav{background:var(--app-surface);}.month-nav button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;}.sidebar .logo{border-bottom:1px solid rgba(255,255,255,.075);}.nav-item{font-weight:640;}.sidebar-footer{background:transparent;}
.stat,.panel,.tool-card,.inv-card{background:var(--app-surface);border-color:var(--app-line);box-shadow:var(--app-shadow-soft);}.stat .t{letter-spacing:.05px;}.tool-card .ti{color:var(--primary);}
.btn{min-height:38px;font-weight:750;letter-spacing:-.08px;}.btn-sm{min-height:32px;}.icon-btn{border:1px solid transparent;}.field input,
.field select,
.field textarea{background:var(--app-surface-soft);border-color:var(--app-line);border-radius:10px;}.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(7,138,114,.12);}
.modal{background:var(--app-surface);border:1px solid var(--app-line);}.modal h2{font-weight:780;letter-spacing:-.35px;padding-bottom:13px;border-bottom:1px solid var(--app-line);}.modal-actions{padding-top:4px;}.tx{border-bottom-color:var(--app-line);}.tx .dot{background:var(--app-surface-soft);}.cat-item{border-bottom-color:var(--app-line);}.quick-action{background:var(--app-surface);border-color:var(--app-line);box-shadow:var(--app-shadow-soft);}.quick-action i{background:rgba(7,138,114,.11);}.bottom-nav{background:var(--app-surface);}
@media(min-width:901px){.section.active{max-width:1680px;margin:0 auto;}}
@media(max-width:600px){.topbar{padding-bottom:14px;}.tool-card{padding:15px 12px;}}
/* Acabamentos de alinhamento e densidade para o uso diário. */
.modal h2{display:flex;align-items:center;justify-content:space-between;gap:12px;}.modal h2>.icon-btn{margin-left:auto;flex:0 0 auto;}.modal h2 .label-icon{min-width:0;}
@media(min-width:901px){
  #budget .panel{padding:9px 13px;}
  #calendar .financial-calendar{width:min(100%,1080px);}
}
@media(min-width:901px){
  #calendar .financial-calendar{width:min(100%,1400px);}
  .sidebar-footer .quick-logout{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.045);color:#c8d5de;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;}
}
@media(max-width:900px){.sidebar-footer .quick-logout{display:none!important;}}
/* Personalização e confirmação de saída sem mensagens nativas do navegador. */
.dashboard-controls{gap:6px;}.dashboard-controls #dashCfgSlot{order:1;}.dashboard-controls .dashboard-icon-action{order:2;}.dashboard-controls .dashboard-view-switch{order:3;}.dashboard-controls #dashCfgBtn,.dashboard-icon-action{width:33px;min-width:33px;height:33px;padding:0;display:inline-flex;align-items:center;justify-content:center;}.dashboard-icon-action{position:relative;border:1px solid var(--border);border-radius:50%;background:var(--app-surface-soft);color:var(--muted);font-size:13px;}.dashboard-icon-action:hover{color:var(--primary);border-color:var(--primary);}.dashboard-alert-count{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--bg);border-radius:10px;background:var(--expense);color:#fff;font-size:9px;font-weight:800;line-height:1;}.dashboard-alerts-modal #dashAlertsList{display:grid;gap:8px;}.dashboard-alerts-modal .alert{margin:0;}.dashboard-alerts-modal .empty{margin:6px 0 0;padding:34px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6;}.empty i{display:block;font-size:26px;margin-bottom:10px;opacity:.35;}.dashboard-alerts-modal .tool-modal-intro{margin-bottom:14px;}.dashboard-evolution{overflow:hidden;}.dashboard-evolution h3{display:flex;align-items:center;justify-content:space-between;gap:12px;}.dashboard-evolution h3 .hint{font-size:11px;font-weight:600;white-space:nowrap;}.dashboard-evolution canvas{display:block;margin-top:8px;max-height:280px;}@media(max-width:600px){.dashboard-evolution canvas{max-height:235px;}}
.dcfg{cursor:grab;user-select:none;touch-action:none;}.dcfg:active{cursor:grabbing;}.dcfg.dragging{opacity:.5;border-radius:9px;background:var(--app-surface-soft);}.drag-handle{width:22px;color:var(--muted);text-align:center;}
.dcfg{position:relative;border:1px solid transparent;border-bottom-color:var(--border);border-radius:10px;padding:10px 8px;margin:2px 0;background:transparent;}.dcfg.dragging{transform:scale(.985);border-color:rgba(7,138,114,.28);box-shadow:0 8px 18px rgba(18,35,47,.1);}.dcfg.drop-before::before,.dcfg.drop-after::after{content:'';position:absolute;left:8px;right:8px;height:3px;border-radius:4px;background:var(--primary);box-shadow:0 0 0 3px rgba(7,138,114,.12);}.dcfg.drop-before::before{top:-5px;}.dcfg.drop-after::after{bottom:-5px;}.dcfg.drop-before,.dcfg.drop-after{background:rgba(7,138,114,.045);}.drag-handle{cursor:grab;}.dcfg.dragging .drag-handle{color:var(--primary);}
@media(max-width:600px){.dashboard-controls #dashCfgBtn,.dashboard-icon-action{width:36px;min-width:36px;height:36px;}.dashboard-controls{gap:7px;}}
/* Ação principal sempre disponível, sem ocupar o cabeçalho em telas maiores. */
@media(min-width:901px){
  .desktop-new-tx{display:none!important;}
  .fab{position:fixed;right:30px;bottom:28px;width:58px;height:58px;align-items:center;justify-content:center;color:#fff;font-size:28px;z-index:90;}
}
/* Identidade personalizada na navegação e opções da conta em controles segmentados. */
.sidebar-user-profile{display:flex;align-items:center;gap:8px;flex:1;min-width:0;border-radius:8px;}.sidebar-user-avatar{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;border-radius:10px;background:linear-gradient(145deg,var(--primary),var(--primary-dark));color:#fff;font-size:14px;font-weight:800;}.sidebar-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px!important;color:#fff;min-width:0;}
@media(max-width:600px){.sidebar-user-avatar{width:30px;height:30px;}.sidebar-user-name{font-size:14px!important;}}
/* Janela de conta, avatares e saudação personalizados. */
.profile-avatar-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;}.profile-avatar-options button{height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;background:var(--app-surface-soft);color:var(--muted);font-size:15px;}.profile-avatar-options button.selected{border-color:var(--primary);background:rgba(7,138,114,.12);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);}.profile-hub-info{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--app-surface-soft);}.profile-hub-info .profile-avatar{width:38px;height:38px;font-size:16px;}.profile-hub-info strong{display:block;font-size:13px;}.profile-hub-info small{display:block;margin-top:3px;font-size:11px;color:var(--muted);}.greeting{max-width:46vw;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:600px){.profile-avatar-options{grid-template-columns:repeat(4,minmax(0,1fr));}.profile-avatar-options button{height:39px;}.greeting{max-width:48vw;}.page-heading{min-width:0;}}
/* Central de ferramentas: poucos pontos de entrada, com escolhas detalhadas em janelas próprias. */
.tools-intro{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 15px;}.tools-kicker{display:block;color:var(--primary);font-size:10px;letter-spacing:1px;font-weight:800;}.tools-intro h2{margin:3px 0 3px;font-size:22px;letter-spacing:-.5px;}.tools-intro p{margin:0;color:var(--muted);font-size:13px;}.tool-hub{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}.tool-hub-card{min-width:0!important;min-height:126px!important;display:flex!important;align-items:flex-start!important;gap:11px;padding:16px!important;text-align:left!important;color:var(--text);cursor:pointer;}.tool-hub-card>.ti{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0!important;border-radius:10px;background:rgba(7,138,114,.11);font-size:16px!important;}.tool-hub-copy{min-width:0;flex:1;}.tool-hub-copy b{display:block;font-size:14px;line-height:1.25;}.tool-hub-copy small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.38;}.tool-hub-card>i{margin-top:3px;font-size:11px;color:var(--muted);}.tool-modal-intro{margin:-5px 0 16px;color:var(--muted);font-size:13px;line-height:1.45;}.report-options,.data-option-grid{display:grid;gap:9px;}.data-option-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.data-option-grid>.report-option:last-child:nth-child(odd){grid-column:1/-1;}.report-option{width:100%;display:grid;grid-template-columns:37px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--app-surface-soft);color:var(--text);text-align:left;}.report-option:hover{border-color:var(--primary);background:rgba(7,138,114,.045);}.report-option-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(7,138,114,.11);color:var(--primary);}.report-option b{display:block;font-size:13px;}.report-option small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.32;}.report-option>i{color:var(--expense);font-size:15px;}
@media(max-width:900px){.tool-hub{grid-template-columns:1fr 1fr!important;}.data-option-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.tools-intro{margin-bottom:12px;}.tools-intro h2{font-size:20px;}.tools-intro p{font-size:12px;line-height:1.35;}.tool-hub{gap:9px!important;}.tool-hub-card{min-height:104px!important;padding:13px!important;gap:9px;}.tool-hub-copy b{font-size:13px;}.tool-hub-copy small{font-size:10px;}.report-option{padding:11px;}.tool-modal{padding:18px 14px calc(18px + env(safe-area-inset-bottom));}}
/* Perfil e ferramentas: controles compactos e consistentes. */
.tool-hub-card{position:relative!important;padding-right:55px!important;}.tool-hub-card>i.fa-chevron-right{position:absolute;right:15px;top:50%;width:28px;height:28px;margin:0!important;display:inline-flex;align-items:center;justify-content:center;transform:translateY(-50%);border:1px solid var(--border);border-radius:50%;background:var(--app-surface-soft);color:var(--muted);font-size:11px;}.tool-hub-card:hover>i.fa-chevron-right{border-color:var(--primary);color:var(--primary);}.profile-avatar-colors{display:flex;flex-wrap:wrap;gap:9px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--app-surface-soft);}.profile-avatar-colors button{width:30px;height:30px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--avatar-color);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);}.profile-avatar-colors button.selected{border-color:var(--app-surface);box-shadow:0 0 0 2px var(--avatar-color),inset 0 0 0 1px rgba(255,255,255,.45);}.profile-crop-modal .tool-modal-intro{margin-top:-4px;}.profile-crop-preview{display:flex;justify-content:center;margin:13px 0 17px;}.profile-crop-preview canvas{width:min(280px,100%);height:auto;border:1px solid var(--border);border-radius:16px;background:#15202b;box-shadow:0 10px 24px rgba(0,0,0,.14);}.profile-crop-position{display:grid;grid-template-columns:1fr 1fr;gap:12px;}.profile-crop-modal input[type=range]{accent-color:var(--primary);}.profile-avatar.large img,.profile-avatar img,.sidebar-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}.dashboard-alerts-modal{max-height:min(78dvh,620px)!important;}.dashboard-alerts-modal .tool-modal-intro{padding:10px 12px;border-radius:11px;background:var(--app-surface-soft);border:1px solid var(--app-line);}.dashboard-alerts-modal #dashAlertsList{max-height:48dvh;overflow:auto;padding-right:2px;}.dashboard-alerts-modal .alert{padding:12px 13px;border-radius:var(--radius-md);border-left-width:3px;font-size:13px;line-height:1.42;}@media(max-width:600px){.tool-hub-card>i.fa-chevron-right{right:11px;width:25px;height:25px;}.profile-crop-position{grid-template-columns:1fr;gap:0;}.profile-crop-preview canvas{width:min(270px,100%);}.profile-avatar-colors button{width:31px;height:31px;}.dashboard-alerts-modal{max-height:82dvh!important;}.dashboard-alerts-modal #dashAlertsList{max-height:50dvh;}.dashboard-alerts-modal .alert{font-size:12px;padding:10px 11px;}}
/* Padronização final de controles e uso compacto em telas móveis. */
.category-switch{display:inline-flex!important;grid-template-columns:none!important;gap:0!important;max-width:none!important;padding:3px!important;border:1px solid var(--app-line)!important;border-radius:20px!important;background:var(--app-surface-soft)!important;}.category-switch button{min-width:116px;padding:7px 12px!important;border-radius:16px!important;font-size:12px!important;}.category-switch button.active{background:var(--app-surface)!important;box-shadow:0 2px 7px rgba(18,35,47,.11)!important;}.category-switch button[data-category-view="expense"].active{color:var(--expense)!important;}.category-switch button[data-category-view="income"].active{color:var(--income)!important;}@media(min-width:601px){#categories .category-switch{display:none!important;}}@media(max-width:900px){body.sidebar-collapsed .sidebar .nav-group-label{visibility:visible!important;height:auto!important;margin:8px 16px 2px!important;font-size:10px!important;}.type-toggle{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}.type-toggle button{width:100%!important;min-width:0!important;padding:9px 7px!important;display:flex!important;align-items:center;justify-content:center;gap:6px;font-size:12px!important;}.type-toggle button i{width:auto!important;flex:0 0 auto;}.dashboard-alerts-modal{width:calc(100vw - 20px)!important;max-width:520px!important;padding:18px 14px calc(18px + env(safe-area-inset-bottom))!important;}.dashboard-alerts-modal .tool-modal-intro{font-size:12px;line-height:1.4;}.dashboard-alerts-modal #dashAlertsList{padding-right:0;}.dashboard-alerts-modal .alert i{margin-top:2px;}.category-switch{grid-template-columns:1fr 1fr!important;}.category-switch button{min-width:0!important;padding:9px 8px!important;}}@media(max-width:600px){.type-toggle{margin-bottom:13px!important;}.sidebar .nav-group-label{display:block!important;visibility:visible!important;}.sidebar .nav-group-label:first-of-type{margin-top:9px!important;}}
.dashboard-alerts-modal .alert{display:grid!important;column-gap:9px;}.dashboard-alerts-modal .alert>i{text-align:center;margin:2px 0 0!important;}.dashboard-alert-copy{display:block;min-width:0;overflow-wrap:anywhere;}.dashboard-alert-copy b{font-weight:800;}.dashboard-alerts-modal .alert.danger .dashboard-alert-copy{color:inherit;}@media(max-width:600px){.dashboard-alerts-modal .alert{column-gap:8px;}}
/* Ajustes finais de consistência: busca, receita, menu recolhido e seletor de mês. */
.header-search{color:#fff;border-color:transparent;}
.header-search:hover{color:#fff;filter:brightness(1.05);}
@media(min-width:901px){
  body.sidebar-collapsed .sidebar-footer{display:grid;grid-template-columns:1fr;justify-items:center;margin-left:8px;margin-right:8px;}
  body.sidebar-collapsed .sidebar-footer .theme-btn,
  body.sidebar-collapsed .sidebar-footer .quick-logout{margin:0;padding:0!important;
    display:flex;align-items:center;justify-content:center;gap:0!important;line-height:1;text-align:center;
  }
  body.sidebar-collapsed .sidebar-footer button i{display:block;margin:0;line-height:1;transform:translateX(0);}
  #mpOverlay{align-items:flex-start;justify-content:flex-start;padding:0;background:transparent;pointer-events:none;}
  #mpOverlay .modal{position:fixed;width:340px;max-width:calc(100vw - 32px);max-height:calc(100vh - 28px);overflow:auto;pointer-events:auto;isolation:isolate;}
  #mpOverlay .modal::before{content:'';position:absolute;z-index:-1;top:-7px;left:calc(var(--month-popover-arrow,50%) - 7px);width:14px;height:14px;background:var(--app-surface);border-left:1px solid var(--app-line);border-top:1px solid var(--app-line);transform:rotate(45deg);}
}
/* Dashboard reorganizável em telas amplas: grade estável, cartões proporcionais e arraste direto. */
@media(min-width:901px){
  #dashboard.section.active{display:grid;align-items:start;}
  #dashboard.section:not(.active){display:none;}
  #dashboard>.dashboard-controls{margin:0 0 2px;}
  #dashboard>.dash-widget{position:relative;grid-column:1/-1;min-width:0;margin:0!important;}
  #dashboard>[data-w="w_cards"].cards{margin:0!important;}
  #dashboard .dashboard-evolution canvas{height:380px!important;max-height:380px;}
  #dashboard .dashboard-widget-handle{position:absolute;z-index:4;top:7px;left:50%;width:34px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);color:var(--muted);cursor:grab;opacity:0;transform:translateX(-50%);font-size:10px;transition:opacity .16s ease,color .16s ease,border-color .16s ease;}
  #dashboard .dash-widget:hover>.dashboard-widget-handle,#dashboard .dash-widget:focus-within>.dashboard-widget-handle{opacity:1;}
  #dashboard .dashboard-widget-handle:hover{color:var(--primary);border-color:var(--primary);}
  #dashboard .dashboard-widget-handle:active{cursor:grabbing;}
  /* Arraste direto: o cartão permanece legível e a própria grade indica o encaixe. */
  #dashboard .dash-widget.dashboard-drag-placeholder{position:relative!important;min-height:104px;overflow:hidden!important;border:1.5px dashed color-mix(in srgb,var(--primary) 58%,var(--app-line))!important;border-radius:var(--card-radius,18px)!important;background:color-mix(in srgb,var(--primary) 6%,var(--app-surface-soft))!important;box-shadow:none!important;pointer-events:none;isolation:isolate;}
  #dashboard .dash-widget.dashboard-drag-placeholder>*{visibility:hidden!important;}
  #dashboard .dash-widget.dashboard-drag-placeholder::after{content:'Solte para posicionar';position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px;font-weight:750;letter-spacing:.01em;visibility:visible;}
  .dashboard-drag-proxy{position:fixed!important;z-index:1000!important;margin:0!important;pointer-events:none!important;transform-origin:top left;will-change:transform,width,height;overflow:hidden;box-shadow:0 24px 56px rgba(10,23,37,.25),0 8px 22px rgba(10,23,37,.18)!important;transition:transform 150ms ease-out,width 150ms ease-out,height 150ms ease-out;cursor:grabbing!important;}
  #dashboard .dash-widget.dashboard-drop-target{box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent)!important;}
  #dashboard .dash-widget.dashboard-drop-left,#dashboard .dash-widget.dashboard-drop-right,#dashboard .dash-widget.dashboard-drop-above,#dashboard .dash-widget.dashboard-drop-below{box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 42%,transparent)!important;}
  #dashboard.dashboard-reordering .dash-widget:not(.dashboard-drag-placeholder){will-change:transform;}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){
  .dashboard-drag-proxy{transition:opacity 120ms ease-out!important;transform:none!important;}
  #dashboard .dash-widget.dashboard-drag-placeholder{transition:opacity 120ms ease-out!important;}
}
@media(max-width:900px){#dashboard>.dash-widget{margin:0 0 14px!important;}#dashboard>.dash-widget:last-child{margin-bottom:0!important;}#dashboard>[data-w="w_categories"]{margin-bottom:14px!important;}#dashboard .dashboard-widget-handle{display:none!important;}}
.dcfg-width{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--app-line);border-radius:8px;background:var(--app-surface);color:var(--muted);font-size:12px;}.dcfg-width.wide{color:var(--primary);border-color:var(--primary);background:rgba(7,138,114,.08);}
@media(max-width:680px){.auth-screen{opacity:1;transition:opacity .3s ease;}.auth-screen.auth-leaving{opacity:0;pointer-events:none;}.auth-screen.auth-resolving{display:grid!important;place-items:center;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));overflow:hidden}.auth-screen.auth-resolving .auth-loading{width:min(100%,330px);padding:31px 24px 27px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(12,28,39,.46);box-shadow:0 20px 44px rgba(0,0,0,.2);gap:12px;animation:fmMobileLoaderIn .3s cubic-bezier(.2,.82,.25,1) both}.auth-screen.auth-resolving .auth-loading .brand-mark{width:52px;height:52px;border-radius:15px;font-size:21px;animation:fmSecurePulse 1.45s ease-in-out infinite}.auth-screen.auth-resolving .auth-loading strong{font-size:23px;letter-spacing:-.3px}.auth-screen.auth-resolving .auth-loading span:last-child{font-size:13px;line-height:1.45}.auth-screen.auth-resolving .auth-loading::after{content:'';display:block;width:72px;height:4px;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.22) 0%,#5a8de1 36%,#8ab0ec 50%,#5a8de1 64%,rgba(255,255,255,.22) 100%);background-size:220% 100%;margin-top:5px;animation:fmLoadingSweep 1.2s linear infinite}@keyframes fmMobileLoaderIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes fmSecurePulse{0%,100%{box-shadow:0 8px 22px rgba(90,141,225,.26);transform:scale(1)}50%{box-shadow:0 12px 30px rgba(90,141,225,.46);transform:scale(1.045)}}@keyframes fmLoadingSweep{to{background-position:-220% 0}}}#txOverlay{z-index:260}#deleteTxOverlay{z-index:280}@media(max-width:680px){#transactions .tx-actions .del{display:none}#txList .tx-swipe{position:relative;overflow:hidden;border-radius:var(--radius-md)}#txList .tx-swipe .tx{position:relative;z-index:1;touch-action:pan-y;transition:transform .18s ease}}
/* Experiência móvel: casca independente de aplicativo, sem alterar o desktop. */
@media(max-width:600px){
  :root{--mobile-gutter:16px;--mobile-bottom-nav-height:calc(74px + env(safe-area-inset-bottom));}
  html{background:var(--bg);-webkit-text-size-adjust:100%;}
  body{min-height:100dvh;}
  .app{height:100dvh;min-height:0;background:var(--bg);}
  html.design-lab[data-theme="dark"]{background:var(--bg)!important;}
  html.design-lab[data-theme="dark"] body,
  html.design-lab[data-theme="dark"] .app{background:radial-gradient(circle at 6% 4%,#305bf340,transparent 42%),var(--bg)!important;}
  html.design-lab:not([data-theme="dark"]){background:var(--bg)!important;}
  html.design-lab:not([data-theme="dark"]) body,
  html.design-lab:not([data-theme="dark"]) .app{background:radial-gradient(circle at 6% 4%,#305bf322,transparent 42%),var(--bg)!important;}
  html.design-lab .main>.topbar,
  html.design-lab .desktop-detail-page .detail-topbar,
  html.design-lab .mais-page .detail-topbar,
  html.design-lab .account-action-page .account-action-head{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}
/* Alça de arrastar (mobile): indício visual de que a janela pode ser
   arrastada pra baixo pra fechar, igual ao Instagram. Só aparece em janelas
   que já podem ser fechadas tocando fora delas. Desktop não é afetado. */
@media(max-width:900px){
  .overlay[onclick] .modal{position:relative;touch-action:pan-y;}
  .overlay[onclick] .modal::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:3px;background:var(--border);opacity:.9;pointer-events:none;z-index:3;}
  .overlay[onclick] .modal.modal-dragging{transition:none!important;}
  .main{padding:0 var(--mobile-gutter) calc(var(--mobile-bottom-nav-height) + 28px)!important;scroll-padding-bottom:calc(var(--mobile-bottom-nav-height) + 28px);overflow-x:hidden!important;}
  .main::after{height:0!important;}
  /* Cabeçalho de aplicativo: permanece visível, sem roubar a tela de conteúdo. */
  /* RAIZ DO PROBLEMA: fundo translúcido + backdrop-filter:blur(16px) nesse
     cabeçalho fixo — o "fosco" que ficava aparecendo nos títulos era esse
     vidro fosco de verdade, não um efeito de animação ou posição. Fundo
     agora 100% sólido, sem desfoque nenhum. */
  .main>.topbar{position:sticky;top:0;z-index:72;margin:0 calc(var(--mobile-gutter) * -1) 16px!important;padding:max(54px,calc(28px + env(safe-area-inset-top))) var(--mobile-gutter) 11px;background:var(--bg);border-bottom:1px solid var(--border);gap:8px;}
  .main>.topbar .page-title-row{min-height:34px;gap:10px;}
  .main>.topbar .menu-btn{width:36px;height:36px;align-items:center;justify-content:center;flex:0 0 auto;padding:0;border-radius:10px;background:var(--card);border:1px solid var(--border);font-size:18px;}
  .main>.topbar h1{font-size:22px;letter-spacing:-.45px;}
  .main>.topbar .greeting{margin-left:auto;max-width:48vw;font-size:13px;line-height:1.2;text-align:right;}
  .main>.topbar .topbar-actions{width:100%;gap:0;}
  .main>.topbar .topbar-actions-row{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px;}
  .main>.topbar .header-search,.main>.topbar .header-quick{width:40px;height:40px;border-radius:var(--radius-md);}
  .main>.topbar .header-search{grid-column:1;grid-row:1;}
  .main>.topbar .month-nav{grid-column:2;grid-row:1;width:100%;min-width:0;height:40px;padding:3px 38px;box-shadow:none;border-radius:var(--radius-md);}
  .main>.topbar .month-nav .label{min-width:0;max-width:100%;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .main>.topbar .month-nav button{min-width:30px;padding:4px;font-size:16px;}
  .main>.topbar .today-btn{right:4px!important;width:31px;height:31px;padding:0!important;border-radius:9px!important;}
  .main>.topbar .header-quick{grid-column:3;grid-row:1;}
  /* Conteúdo compacto, com cards táteis e ritmo consistente. */
  .section{padding-bottom:2px;}
  .section>.topbar{margin-bottom:13px!important;gap:9px;align-items:center;}
  .section>.topbar h3{min-width:0;font-size:15px!important;line-height:1.25;}
  .section>.topbar .btn{min-height:38px;flex:0 0 auto;padding:8px 11px;font-size:12px;white-space:nowrap;}
  .cards{gap:11px!important;margin-bottom:14px!important;}
  .stat{min-height:94px;}
  .stat .t{min-height:18px;line-height:1.25;align-items:flex-start;}
  .stat .v{line-height:1.15;margin-top:7px!important;white-space:nowrap;}
  .panel{margin-bottom:14px!important;}
  .panel h3{margin-bottom:12px!important;line-height:1.3;}
  .grid2{gap:14px!important;margin-bottom:14px!important;}
  /* Dashboard ganha hierarquia de app: controles e indicadores ocupam pouco espaço. */
  #dashboard>.dashboard-controls{position:sticky;top:calc(104px + env(safe-area-inset-top));z-index:60;margin:-3px 0 13px;padding:4px 0;background:var(--bg);}
  #dashboard>.cards .stat.balance{min-height:104px;padding:16px!important;}
  #dashboard .grid2{grid-template-columns:1fr!important;}
  #dashboard .grid2 .panel{margin:0!important;}
  /* Listas: espaço de toque, textos legíveis e valores sempre ancorados à direita. */
  .tx{min-height:66px;gap:8px 10px!important;}
  .tx .dot{width:36px!important;height:36px!important;border-radius:11px!important;}
  .tx .info .desc{font-size:14px!important;line-height:1.3;}
  .tx .info .meta{font-size:11px!important;}
  .tx .amt{padding-top:2px;}
  .tx .act,.bill-row .bill-actions .icon-btn{width:30px;min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;}
  .day-head{padding:13px 0 6px;}
  .bill-row{padding:13px 0!important;}
  .bill-row .bill-amount{font-size:15px!important;}
  .cat-item{min-height:54px;padding:10px 0!important;}
  /* Categorias: um pouco menos de espaço entre elas, filtro Despesas/Receitas
     ocupando a largura toda do card, e os dois botões do cabeçalho (expandir
     e adicionar) mais compactos e consistentes entre si. */
  #categories .cat-item{padding:8px 0!important;min-height:auto!important;}
  #categories .subcat{padding-top:5px!important;padding-bottom:5px!important;}
  #categories .mobile-swipe-delete{margin-bottom:6px!important;}
  #categories .detail-actions .btn{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;}
  /* Filtros e botões segmentados sem cortes horizontais. */
  .search-bar{gap:9px!important;margin-bottom:12px!important;}
  .search-bar input{height:44px!important;font-size:16px!important;border-radius:var(--radius-md)!important;}
  .tx-filter-trigger{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border-radius:var(--radius-md)!important;}
  .transactions-filter-tabs{display:flex!important;flex-wrap:wrap;gap:7px!important;margin-bottom:14px!important;}
  .transactions-filter-tabs button{flex:1 0 auto!important;min-width:calc(33.333% - 5px)!important;min-height:37px!important;padding:7px 8px!important;border-radius:11px!important;font-size:11.5px!important;}
  .transactions-filter-tabs button:last-child{min-width:calc(50% - 4px)!important;}
  .type-toggle,.category-switch{border-radius:14px!important;padding:4px!important;}
  .type-toggle button,.category-switch button{min-height:40px!important;border-radius:10px!important;}
  /* Janelas viram folhas de app: título e ações permanecem ao alcance. */
  .overlay{align-items:flex-end!important;padding:0!important;}
  .overlay .modal,html.design-lab .overlay .modal{width:100%!important;max-width:none!important;max-height:min(92dvh,760px)!important;max-height:min(calc(var(--vh100,100dvh) * .92),760px)!important;margin:0!important;padding:18px 16px calc(17px + env(safe-area-inset-bottom))!important;padding-bottom:calc(17px + var(--safe-bottom,env(safe-area-inset-bottom)))!important;border-radius:22px 22px 0 0!important;box-shadow:0 -18px 45px rgba(0,0,0,.18);overscroll-behavior:contain;}
  .overlay .modal h2{position:sticky;top:-18px;z-index:2;margin:0 -16px 15px!important;padding:18px 16px 12px;border-bottom:1px solid var(--border);font-size:18px!important;}
  .overlay .modal h2.modal-title-row .icon-btn{margin-left:auto;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:var(--input-bg);}
  .overlay .field{margin-bottom:12px;}
  .overlay .field label{margin-bottom:6px;font-size:12px;}
  .overlay input:not([type="checkbox"]):not([type="radio"]),.overlay select,.overlay textarea{min-height:44px!important;width:100%;font-size:16px!important;border-radius:11px!important;}
  .overlay textarea{min-height:88px!important;}
  .overlay .field input[type="date"]{height:44px!important;min-height:44px!important;padding:8px 9px!important;font-size:14px!important;}
  .overlay .row2{gap:10px!important;}
  .overlay .row2 .field{min-width:0;}
  .overlay .modal-actions{position:sticky;bottom:calc(-17px - env(safe-area-inset-bottom));z-index:2;margin:14px -16px calc(-17px - env(safe-area-inset-bottom));padding:11px 16px calc(11px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);}
  .overlay .modal-actions .btn{min-height:43px;}
  .icon-picker{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;}
  .icon-picker button{height:42px!important;}
  /* Menu e navegação com área segura e aparência de app instalado. */
  .sidebar{width:min(84vw,310px)!important;bottom:var(--mobile-bottom-nav-height)!important;}
  .sidebar .nav-group-label{margin:13px 16px 5px!important;font-size:9px!important;letter-spacing:1px!important;}
  .sidebar .nav-item{min-height:40px;margin:2px 9px!important;width:calc(100% - 18px)!important;padding:9px 12px!important;border-radius:10px!important;}
  .sidebar-footer{padding:11px 13px 14px!important;}
  .theme-btn,.install-btn{min-height:42px!important;border-radius:11px!important;}
  .bottom-nav{background:color-mix(in srgb,var(--card) 94%,transparent);}
  .bottom-nav button{gap:3px;}
  .fab{right:18px!important;bottom:calc(var(--mobile-bottom-nav-height) + 16px)!important;width:56px!important;height:56px!important;border:3px solid var(--bg);}
  .toast-wrap{left:14px!important;right:14px!important;bottom:calc(var(--mobile-bottom-nav-height) + 16px)!important;width:auto!important;}

  /* Canvas não pode aumentar a página nem vazar dos cards. */
  canvas{display:block;max-width:100%!important;}
  #compare canvas:not(#cmpChart),#investments canvas,#patrimony canvas{max-height:230px!important;}
  #compare #cmpChart{max-height:none!important;}
}
/* Ajustes específicos de navegação e leitura em telefones. */
.dashboard-category-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}.dashboard-category-head h3{margin:0!important;}.category-chart-switch button.active{background:var(--card);}.dashboard-category-subtitle{margin:10px 0 4px;font-size:12px;}.appearance-section{padding:14px 0;border-top:1px solid var(--border);}.appearance-section:first-of-type{padding-top:0;border-top:0;}.appearance-section-title{display:flex;gap:10px;align-items:flex-start;}.appearance-section-title>i{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:10px;background:rgba(48,91,243,.1);color:var(--primary);}.appearance-section-title b{display:block;font-size:13px;}.appearance-section-title small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35;}.appearance-theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px;}.appearance-theme-options button{min-height:58px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--input-bg);color:var(--muted);font-weight:750;font-size:12px;}.appearance-theme-options button.active{border-color:var(--primary);background:rgba(48,91,243,.1);color:var(--primary);box-shadow:inset 0 0 0 1px rgba(48,91,243,.18);}
@media(max-width:600px){
  /* Só o seletor de período permanece fixo ao navegar pelo dashboard. */
  .main>.topbar{position:relative!important;top:auto!important;border-bottom:0!important;}
  .main>.topbar .topbar-actions{display:none!important;}
  .sidebar-footer .theme-btn{display:none!important;}
  #dashboard>.dashboard-controls{position:static!important;top:auto!important;margin:0 0 13px!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  #transactions .transactions-filter-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:8px!important;margin:0 -2px 14px!important;padding:2px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding-left:2px;scroll-behavior:smooth;}
  #transactions .transactions-filter-tabs button{scroll-snap-align:start;}
  #transactions .transactions-filter-tabs::-webkit-scrollbar{display:none;}
  #transactions .transactions-filter-tabs button,#transactions .transactions-filter-tabs button:last-child{flex:0 0 auto!important;min-width:auto!important;min-height:38px!important;padding:7px 13px!important;font-size:12px!important;letter-spacing:0!important;white-space:nowrap;}
  .dashboard-category-chart{padding:15px 12px!important;}
  .dashboard-category-head{align-items:flex-start;gap:8px;}
  .dashboard-category-head h3{font-size:15px!important;padding-top:5px;}
  .category-chart-switch{flex:0 0 auto;}
  .dashboard-category-subtitle{margin:10px 2px 2px;font-size:11px;}
  #categoryPie{max-height:248px!important;}
  .appearance-section{padding:15px 0;}.appearance-theme-options button{min-height:54px;}
}
/* Detalhamento de categorias e leitura por toque. */
.dashboard-category-chart{cursor:pointer;}.dashboard-category-chart .category-chart-switch{cursor:default;}.category-chart-detail-link{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 0;color:var(--muted);font-size:11px;font-weight:700;}.category-chart-detail-link i{color:var(--primary);font-size:10px;}.category-detail-total{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:end;margin:-3px 0 15px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:var(--input-bg);}.category-detail-total span{font-size:12px;color:var(--muted);font-weight:700;}.category-detail-total strong{grid-row:span 2;font-size:21px;letter-spacing:-.5px;color:var(--text);}.category-detail-total small{font-size:11px;color:var(--muted);}.category-detail-list{display:grid;gap:10px;}.category-detail-row{padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--card);}.category-detail-row-head{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;}.category-detail-row-head strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.category-detail-row-head b{font-size:13px;white-space:nowrap;}.category-detail-dot{width:9px;height:9px;border-radius:50%;}.category-detail-progress{height:5px;overflow:hidden;margin:9px 0 5px;border-radius:99px;background:var(--input-bg);}.category-detail-progress span{display:block;height:100%;border-radius:inherit;}.category-detail-share{font-size:10px;color:var(--muted);}.category-detail-subs{display:grid;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border);}.category-detail-subs>div{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;}.category-detail-subs b{color:var(--text);font-size:11px;white-space:nowrap;}
@media(max-width:600px){.dashboard-category-chart{min-height:355px;}.dashboard-category-chart #categoryPie{height:242px!important;max-height:242px!important;margin-top:4px;}.category-chart-detail-link{padding:2px 0 3px;font-size:10.5px;}.category-detail-modal{max-height:90dvh!important;}.category-detail-list{padding-bottom:2px;}.category-detail-row{padding:12px;}.category-detail-row-head strong,.category-detail-row-head b{font-size:13px;}.category-detail-share{font-size:11px;}.category-detail-subs>div{font-size:11.5px;}.category-detail-subs b{font-size:11.5px;}}
/* Exclusão por gesto e controles segmentados consistentes em dispositivos móveis. */
.dashboard-view-options,.category-chart-switch,.category-switch,.type-toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--input-bg);}
.dashboard-view-options button,.category-chart-switch button,.category-switch button,.type-toggle button{min-height:34px;padding:6px 10px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;}
.dashboard-view-options button.active,.category-chart-switch button.active,.category-switch button.active,.type-toggle button.act-in,.type-toggle button.act-out,.type-toggle button.act-cc,.type-toggle button.act-tr{background:color-mix(in srgb,var(--card) 86%,transparent);color:var(--primary);box-shadow:0 1px 4px rgba(18,35,47,.08);}
.dashboard-view-options button[data-dashboard-view="projected"].active,.category-chart-switch button[data-dashboard-category-view="expense"].active,.category-switch button[data-category-view="expense"].active,.type-toggle button.act-out{color:var(--expense);}
.category-chart-switch button[data-dashboard-category-view="income"].active,.category-switch button[data-category-view="income"].active,.type-toggle button.act-in{color:var(--income);}
@media(max-width:600px){
  .mobile-swipe-delete{position:relative;overflow:hidden;margin-bottom:10px;border-radius:15px;}
  .mobile-swipe-delete .cc,.mobile-swipe-delete .vault-card,.mobile-swipe-delete .inv-card,.mobile-swipe-delete .budget-row,.mobile-swipe-delete .bill-row{margin-bottom:0!important;}
  .mobile-swipe-delete .cat-item{margin:0!important;background:var(--card);padding-left:10px!important;padding-right:10px!important;border-radius:13px;}
  .dashboard-view-options,.category-chart-switch,.category-switch,.type-toggle{display:inline-flex!important;grid-template-columns:none!important;gap:2px!important;width:auto!important;max-width:100%!important;padding:3px!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important;background:var(--input-bg)!important;}
  .dashboard-view-options button,.category-chart-switch button,.category-switch button,.type-toggle button{flex:1 1 auto!important;width:auto!important;min-width:0!important;min-height:34px!important;padding:6px 9px!important;border:0!important;border-radius:13px!important;background:transparent!important;color:var(--muted)!important;font-size:10.5px!important;font-weight:700!important;box-shadow:none!important;}
  .dashboard-view-options button.active,.category-chart-switch button.active,.category-switch button.active,.type-toggle button.act-in,.type-toggle button.act-out,.type-toggle button.act-cc,.type-toggle button.act-tr{background:var(--card)!important;color:var(--primary)!important;box-shadow:0 2px 7px rgba(18,35,47,.11)!important;}
  .dashboard-view-options button[data-dashboard-view="projected"].active,.category-chart-switch button[data-dashboard-category-view="expense"].active,.category-switch button[data-category-view="expense"].active,.type-toggle button.act-out{color:var(--expense)!important;}
  .category-chart-switch button[data-dashboard-category-view="income"].active,.category-switch button[data-category-view="income"].active,.type-toggle button.act-in{color:var(--income)!important;}
  .type-toggle{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:4px!important;}
  .type-toggle button{white-space:nowrap!important;}
}
.category-detail-page{max-width:760px;margin:0 auto;}.category-detail-page-top{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-bottom:14px;}.category-detail-page-top h3{margin:0!important;min-width:0;}.category-detail-page>.category-page-controls{margin:0 0 14px;}
@media(min-width:901px){#category-details.category-detail-page{position:relative;}#category-details.category-detail-page>.category-page-controls{position:absolute;top:78px;right:22px;margin:0;z-index:2;}}.category-detail-page-chart{min-height:340px;margin-bottom:16px!important;}.category-detail-page-chart canvas{height:270px!important;max-height:270px!important;}.category-detail-page>.category-detail-total{margin:0 0 14px;}.category-detail-page .category-detail-list{grid-template-columns:1fr;}.category-detail-page .category-detail-row{min-width:0;}.dashboard-quick-widget h3{display:flex;align-items:center;justify-content:space-between;gap:10px;}.dashboard-quick-widget h3 .icon-btn{margin:-4px -4px -4px 0;}.dashboard-quick-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border);font-size:12px;}.dashboard-quick-row:first-child{border-top:0;padding-top:1px;}.dashboard-quick-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.dashboard-quick-row span i,.dashboard-quick-row span .data-icon{margin-right:5px;color:var(--muted);}.dashboard-quick-row small{display:block;margin-top:2px;color:var(--muted);font-size:10px;}.dashboard-quick-row b{white-space:nowrap;font-size:12px;}.dashboard-quick-row b.in{color:var(--income);}.dashboard-quick-row b.out{color:var(--expense);}@media(min-width:901px){#dashboard.section.active{grid-auto-flow:row dense;}#dashboard>.dashboard-controls,#dashboard>[data-w="w_cards"],#dashboard>.dash-widget:not([data-compact="true"]){grid-column:1/-1;}#dashboard>.dash-widget[data-compact="true"]{grid-column:auto;width:100%;min-width:0;align-self:stretch;}.category-detail-page-chart{max-width:none;margin-left:0!important;margin-right:0!important;}.category-detail-page .category-detail-list{grid-template-columns:1fr;}}@media(max-width:600px){#txOverlay .type-toggle{display:grid!important;margin:0 0 16px!important;border-radius:15px!important;}#txOverlay .type-toggle button{font-size:12.5px!important;font-weight:750!important;justify-content:center!important;gap:8px!important;}#txOverlay .type-toggle button i{font-size:13px!important;width:15px!important;}.category-detail-page-top{margin:0 0 12px;padding-top:calc(28px + env(safe-area-inset-top));}.category-detail-page-top .btn{padding-left:0;padding-right:8px;}.category-detail-page-chart{min-height:325px;padding:15px 12px!important;}.category-detail-page-chart canvas{height:235px!important;max-height:235px!important;}.category-detail-page .category-detail-list{grid-template-columns:1fr;gap:9px;}.category-detail-page .category-detail-total{margin-bottom:12px;}}
@media(min-width:601px){#txOverlay .type-toggle{display:grid!important;width:100%!important;gap:6px!important;margin-bottom:16px!important;}#txOverlay .type-toggle button{width:100%!important;min-width:0!important;padding:10px 8px!important;}}@media(max-width:600px){#txOverlay .type-toggle{width:100%!important;padding:0!important;gap:10px!important;border:0!important;background:transparent!important;}#txOverlay .type-toggle button{border:1px solid var(--border)!important;border-radius:var(--radius-md)!important;background:var(--input-bg)!important;box-shadow:none!important;}#txOverlay .type-toggle button.act-in{border-color:color-mix(in srgb,var(--income) 48%,var(--border))!important;background:rgba(0,185,142,.10)!important;}#txOverlay .type-toggle button.act-out{border-color:color-mix(in srgb,var(--expense) 48%,var(--border))!important;background:rgba(244,54,76,.09)!important;}#txOverlay .type-toggle button.act-cc{border-color:rgba(243,156,18,.5)!important;background:rgba(243,156,18,.09)!important;}#txOverlay .type-toggle button.act-tr{border-color:rgba(52,152,219,.5)!important;background:rgba(52,152,219,.09)!important;}}
@media(max-width:600px){#dashboard>.cards{width:auto!important;margin-left:0!important;margin-right:0!important;}#txOverlay .type-toggle button{width:100%!important;min-height:39px!important;padding:6px 8px!important;}.overlay .field input[type="date"]{box-sizing:border-box!important;width:100%!important;height:42px!important;min-height:42px!important;padding:10px 12px!important;font-size:14px!important;line-height:20px!important;-webkit-appearance:none!important;appearance:none!important;}.overlay .field input[type="date"]::-webkit-date-and-time-value{text-align:left;min-height:20px;}.overlay .field input[type="date"]::-webkit-calendar-picker-indicator{margin:0;opacity:.72;}}
/* Os editores de lançamento, caixinha, cartão, conta e investimento voltaram todos a ser apenas janelas (folhas) no mobile, a pedido do usuário — nenhum vira mais página de tela cheia. */
@media(min-width:901px){#dashboard>.cards,#dashboard>.cards .stat{overflow:visible;}.metric-info{position:relative;z-index:5;}}
@media(min-width:901px){#transactions .tx-import-statement{align-self:end;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 13px;white-space:nowrap;}.tx-import-statement i{font-size:14px;}}
@media(min-width:901px){#dashboard>.cards:has(.metric-info:is(:hover,:focus-visible)){position:relative;z-index:70;}#dashboard>.cards .stat:has(.metric-info:is(:hover,:focus-visible)){z-index:71;}#dashboard .dashboard-category-head h3{flex:1;min-width:0;}#dashboard .dashboard-category-head.collapse-trigger::after{margin-left:3px;}}
/* Backup e dados/Segurança e privacidade/Aparência: no desktop passaram a
   ser cards próprios na grade de Ferramentas (junto com Relatórios/Avisos/
   Preferências/Ajuda), então a lista duplicada dentro da janela "Meu
   perfil" fica escondida ali — mas continua no HTML porque é dela que o
   mobile depende (lá o Perfil é uma página cheia, sem essa grade). */
@media(min-width:901px){#profile-page .profile-page-nav-list{display:none!important;}}
@media(min-width:901px){#tools .tool-hub{grid-template-columns:repeat(3,minmax(0,1fr))!important;justify-content:start;}#tools .tool-hub-card{min-height:124px!important;}
  #tools .mais-profile-row{display:flex!important;align-items:center;gap:16px;width:100%;padding:22px 24px;margin:0 0 16px;border:1px solid var(--border);border-radius:22px;background:var(--card);color:var(--text);text-align:left;box-shadow:var(--app-shadow-soft);}
  #tools .mais-profile-row .profile-avatar{flex:0 0 56px;border:0;background:linear-gradient(155deg,var(--primary-dark,#1c3fc7)0%,#6fbafc 100%);color:#fff;}
  #tools .mais-profile-row .profile-identity strong{font-size:16px;}
  #tools .mais-profile-row .profile-identity span{font-size:13px;white-space:normal;}
  #tools .mais-logout-btn.desktop-logout-card{display:flex;max-width:none;margin:16px 0 0;padding:18px 22px;border-radius:20px;background:rgba(228,87,104,.08);border-color:rgba(228,87,104,.22);}
}
@media(max-width:600px){#dashboard .metric-info,#dashboard .amount-visibility{width:30px;min-width:30px;height:30px;margin:-6px -5px -6px 0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;}#dashboard .metric-info{font-size:13px;}#dashboard .amount-visibility{font-size:15px;}}
#dashboard .stat.income::before{background:var(--transfer);}#dashboard .stat.balance.is-positive::before{background:var(--income);}#dashboard .stat.balance.is-negative::before{background:var(--expense);}#dashboard .stat.balance.is-neutral::before{background:var(--muted);}
#fmHoverTooltip{position:fixed;z-index:5000;max-width:min(280px,calc(100vw - 24px));padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card);box-shadow:0 10px 24px rgba(0,0,0,.18);color:var(--text);font:600 12px/1.38 "Segoe UI",sans-serif;text-align:left;pointer-events:none;transform:translateX(-50%);}#fmHoverTooltip.tooltip-wide{min-width:170px;text-align:center;}#fmHoverTooltip::before{content:'';position:absolute;top:-5px;left:50%;width:9px;height:9px;border-top:1px solid var(--border);border-left:1px solid var(--border);background:var(--card);transform:translateX(-50%) rotate(45deg);}#fmHoverTooltip[data-placement="top"]::before{top:auto;bottom:-5px;border-top:0;border-left:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}#fmHoverTooltip[data-placement="right"]{transform:translateY(-50%);}#fmHoverTooltip[data-placement="right"]::before{top:50%;left:-5px;border-top:1px solid var(--border);border-left:1px solid var(--border);border-right:0;border-bottom:0;transform:translateY(-50%) rotate(-45deg);}
/* Controles do dashboard: avisos junto ao mês e ajustes junto à visão financeira. */.dashboard-alert-desktop{flex:0 0 auto;}.dashboard-alert-mobile{display:none!important;flex:0 0 auto;}.dashboard-controls{justify-content:flex-end!important;}.dashboard-controls .dashboard-view-switch{display:flex!important;align-items:center!important;gap:7px!important;margin-left:0!important;}.dashboard-controls #dashCfgSlot{display:flex!important;align-items:center!important;}.dashboard-alert-preview{position:fixed;z-index:4900;width:min(330px,calc(100vw - 32px));max-height:420px;overflow:auto;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:0 16px 38px rgba(12,25,34,.22);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .14s ease,transform .14s ease,visibility .14s;}.dashboard-alert-preview.open{opacity:1;visibility:visible;transform:translateY(0);}.dashboard-alert-preview-title{display:flex;align-items:center;gap:8px;padding:2px 3px 9px;font-size:13px;font-weight:800;}.dashboard-alert-preview-title i{color:var(--primary);}.dashboard-alert-preview-title small{margin-left:auto;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;background:var(--app-surface-soft);color:var(--muted);font-size:10px;}.dashboard-alert-preview .alert{margin:7px 0 0;padding:9px 10px;border-radius:10px;border-left-width:3px;font-size:11px;line-height:1.38;}.dashboard-alert-preview-empty{display:flex;align-items:center;gap:7px;padding:10px 5px 4px;color:var(--muted);font-size:12px;font-weight:650;}.dashboard-alert-preview-empty i{color:var(--income);}@media(min-width:901px){#tools>.tools-intro,#tools>.tool-hub,#tools>.profile-hub,#tools>.app-version{width:100%;margin-left:auto!important;margin-right:auto!important;}#tools>.tool-hub{justify-content:start!important;}.account-security-modal .account-security-section>a.btn{display:flex;width:max-content;margin:10px auto 0;justify-content:center;text-align:center;}.account-security-modal .account-security-section:last-of-type{text-align:center;}}@media(max-width:900px){.dashboard-alert-desktop{display:none!important;}.dashboard-alert-mobile{display:inline-flex!important;width:40px!important;min-width:40px!important;height:40px!important;border-radius:var(--radius-md)!important;}.dashboard-controls{justify-content:flex-end!important;}.dashboard-controls .dashboard-view-switch{gap:6px!important;}.dashboard-alert-preview{display:none!important;}}@media(max-width:600px){.dashboard-controls .dashboard-view-options button{padding:7px 9px!important;font-size:10.5px!important;}.dashboard-controls #dashCfgBtn{width:34px!important;min-width:34px!important;height:34px!important;}.dashboard-view-switch.mobile-collapsed .dashboard-view-options{padding:3px!important;}.dashboard-view-switch.mobile-collapsed .dashboard-view-options button.active::after{font-size:11px;}}
@media(min-width:901px){.overlay .type-toggle{background:transparent!important;border-color:transparent!important;}.overlay .type-toggle button{font-size:11.5px!important;box-shadow:none!important;}.overlay .type-toggle button i{margin-right:1px;}}
/* Contas a pagar/receber e exclusão por gesto: cartões legíveis e ação deliberada. */
@media(max-width:600px){#bills .bill-group{margin-bottom:18px;}#bills .bill-row{position:relative;display:grid!important;}#bills .bill-row .dot{grid-area:icon!important;width:38px!important;height:38px!important;margin-top:1px;}#bills .bill-row .bn{grid-area:info!important;min-width:0!important;width:auto!important;}#bills .bill-row .bn .t1{display:flex!important;align-items:center!important;gap:5px!important;min-width:0;line-height:1.28!important;}#bills .bill-row .bn .bill-desc{overflow-wrap:anywhere;white-space:normal;}#bills .bill-row .bn .t2{margin-top:4px!important;padding-right:0;overflow-wrap:anywhere;}#bills .bill-row .bill-actions{grid-area:actions!important;display:flex!important;}#bills .bill-row .bill-footer{right:12px!important;bottom:11px!important;display:block!important;min-width:0!important;}#bills .bill-row .bill-amount{line-height:1!important;}}
/* Ajustes finais de densidade e gestos em telas móveis. */
@media(min-width:901px){.overlay .type-toggle button{gap:7px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;}.overlay .type-toggle button.act-in{background:rgba(7,138,114,.11)!important;border-color:rgba(7,138,114,.35)!important;}.overlay .type-toggle button.act-out{background:rgba(217,74,92,.10)!important;border-color:rgba(217,74,92,.35)!important;}.overlay .type-toggle button.act-cc{background:rgba(201,137,25,.11)!important;border-color:rgba(201,137,25,.35)!important;}.overlay .type-toggle button.act-tr{background:rgba(55,123,181,.11)!important;border-color:rgba(55,123,181,.35)!important;}}@media(max-width:600px){.mobile-swipe-delete{border:0!important;box-shadow:none!important;background:transparent!important;}.dashboard-view-switch.mobile-collapsed .dashboard-view-options button:not(.active){display:inline-flex!important;width:0!important;min-width:0!important;max-width:0!important;margin:0!important;padding-left:0!important;padding-right:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important;transition:max-width .2s ease,width .2s ease,opacity .14s ease,padding .2s ease!important;}.dashboard-view-switch .dashboard-view-options button{transition:max-width .2s ease,width .2s ease,opacity .14s ease,padding .2s ease!important;}.dashboard-view-switch.mobile-collapsed .dashboard-view-options button.active::after{content:none!important;margin:0!important;}.dashboard-view-switch.mobile-collapsed .dashboard-view-options button.active{display:inline-flex!important;justify-content:center!important;text-align:center!important;padding-inline:12px!important;}.dashboard-view-switch.mobile-collapsed .dashboard-view-options{overflow:hidden!important;}.dashboard-view-switch:not(.mobile-collapsed) .dashboard-view-options button:not(.active){opacity:1!important;max-width:120px!important;pointer-events:auto!important;}#dashboard .stat.balance .t{position:relative!important;padding-right:34px!important;}#dashboard .stat.balance .amount-visibility{position:absolute!important;top:50%!important;right:0!important;transform:translateY(-50%)!important;margin:0!important;}}
/* Acabamento final: sem vazamento de exclusão e alinhamento rigoroso no celular. */
@media(max-width:600px){#txList .tx-swipe{background:transparent!important;border:0!important;box-shadow:none!important;}#dashboard .dashboard-view-options button{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;min-height:34px!important;}.dashboard-view-switch.mobile-collapsed .dashboard-view-options button.active{height:34px!important;padding:0 12px!important;}.account-security-modal .account-security-section>a.btn{display:flex!important;width:max-content!important;margin:10px auto 0!important;justify-content:center!important;text-align:center!important;}.account-security-modal .account-security-section:last-of-type{text-align:center!important;}#tools .tool-hub .tool-hub-copy{text-align:center!important;}#tools .tool-hub .tool-hub-copy small{margin-inline:auto!important;}}
/* Ferramentas e avisos: hierarquia compacta em telas pequenas. */
@media(max-width:600px){#tools .tool-hub-card{min-height:100px!important;padding:12px 38px 11px 12px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;text-align:center!important;}#tools .tool-hub-card>.ti{width:30px!important;height:30px!important;margin:0!important;font-size:14px!important;border-radius:9px!important;}#tools .tool-hub-card .tool-hub-copy{width:100%;text-align:center!important;flex:0!important;}#tools .tool-hub-card .tool-hub-copy b{font-size:11px!important;line-height:1.15!important;}#tools .tool-hub-card .tool-hub-copy small{margin-top:3px!important;font-size:9px!important;line-height:1.22!important;max-width:95px;margin-inline:auto!important;}#tools .tool-hub-card>i.fa-chevron-right{right:9px!important;width:23px!important;height:23px!important;}#dashboard>.dashboard-controls{margin-bottom:8px!important;}}
/* Perfil, segurança e seletores de lançamento: fluxos visualmente separados e consistentes. */
#tools .profile-hub{max-width:1120px;border-color:var(--border);}.account-security-modal .account-security-section:last-of-type{margin-bottom:0;}.overlay .type-toggle{display:grid!important;align-items:stretch!important;width:100%!important;gap:8px!important;margin-bottom:16px!important;padding:4px!important;border-radius:14px!important;}.overlay .type-toggle button{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;width:100%!important;min-height:42px!important;padding:9px 10px!important;border-radius:10px!important;white-space:nowrap!important;}#txOverlay .type-toggle{grid-template-columns:repeat(4,minmax(0,1fr))!important;}#recOverlay .type-toggle{grid-template-columns:repeat(3,minmax(0,1fr))!important;}#billOverlay .type-toggle{grid-template-columns:repeat(2,minmax(0,1fr))!important;}html.design-lab #recOverlay .type-toggle button.hidden{display:none!important;}#recOverlay:has(#rTglIn.hidden) .type-toggle{grid-template-columns:repeat(2,minmax(0,1fr))!important;}@media(max-width:600px){.overlay .type-toggle{gap:6px!important;padding:3px!important;margin-bottom:13px!important;}.overlay .type-toggle button{min-height:36px!important;padding:7px 5px!important;font-size:10.5px!important;gap:4px!important;}#txOverlay .type-toggle{grid-template-columns:repeat(2,minmax(0,1fr))!important;}#recOverlay .type-toggle{grid-template-columns:repeat(3,minmax(0,1fr))!important;}#recOverlay .type-toggle button{font-size:10px!important;padding-inline:4px!important;}}
/* Central de ferramentas: controles configuráveis, sem duplicar informações do perfil. */
.preference-list{display:grid;gap:10px;}.preference-row,.preference-setting{width:100%;display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--app-surface-soft);color:var(--text);text-align:left;}.preference-row{cursor:pointer;}.preference-row:hover{border-color:var(--primary);}.preference-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:10px;background:rgba(7,138,114,.11);color:var(--primary);}.preference-copy,.preference-setting-copy>span:last-child{min-width:0;flex:1;}.preference-copy b,.preference-setting-copy b{display:block;font-size:13px;line-height:1.25;}.preference-copy small,.preference-setting-copy small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35;}.preference-switch{position:relative;width:42px;height:24px;flex:0 0 auto;border-radius:99px;background:var(--border);transition:background .22s ease;}.preference-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .32s cubic-bezier(.34,1.56,.64,1);}.preference-switch.on::after{transform:translateX(18px);}.preference-setting{display:grid;grid-template-columns:minmax(0,1fr) auto;}.preference-setting-copy{display:flex;align-items:center;gap:12px;min-width:0;}.mini-segmented{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);}.mini-segmented button{padding:6px 9px;border:0;border-radius:14px;background:transparent;color:var(--muted);font-size:11px;font-weight:800;}.mini-segmented button.active{background:rgba(7,138,114,.13);color:var(--primary);}.mini-segmented button.projected.active{background:rgba(214,141,42,.14);color:#b96f14;}.help-center-grid{display:grid;gap:9px;}.help-center-grid a{text-decoration:none;}.help-center-grid .report-option>i{color:var(--muted);}.help-center-version{margin:16px 2px 0;color:var(--muted);font-size:11px;text-align:center;}.tool-hub-card:nth-child(4)>.ti{background:rgba(55,123,181,.12);color:#377bb5;}.tool-hub-card:nth-child(5)>.ti{background:rgba(214,141,42,.12);color:#b87913;}.tool-hub-card:nth-child(6)>.ti{background:rgba(130,96,180,.12);color:#7352a4;}.tool-hub-card:nth-child(7)>.ti{background:rgba(75,110,130,.12);color:#526f82;}
/* Cores fixas por id (não por posição): evita que inserir/remover um card da
   grade de Ferramentas troque sem querer a cor dos cards vizinhos via
   :nth-child. Reaproveita as mesmas cores que Preferências/Ajuda já tinham. */
/* No computador o card "Relatórios" some da grade de Ferramentas — já existe
   um item "Relatórios" na barra lateral, com a página completa. No celular
   (sem essa barra lateral) o card continua sendo o único caminho até lá. */
@media(min-width:901px){#reportsToolCard{display:none!important;}}
@media(max-width:600px){.preference-row,.preference-setting{padding:12px 11px;gap:10px;}.preference-icon{width:33px;height:33px;border-radius:9px;}.preference-copy b,.preference-setting-copy b{font-size:12px;}.preference-copy small,.preference-setting-copy small{font-size:10px;}.preference-setting{grid-template-columns:1fr;}.mini-segmented{justify-self:start;}.preference-switch{width:40px;height:23px;}.preference-switch.on::after{transform:translateX(17px);}}
/* Ajustes finais: alertas discretos de compromissos e cards de Ferramentas no mobile */
.bill-alert-dot{display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--expense);box-shadow:0 0 0 3px color-mix(in srgb,var(--expense) 14%,transparent);vertical-align:middle;}
@media(min-width:901px){
  body.sidebar-collapsed .sidebar .nav-item[data-sec="bills"]{position:relative;}
  body.sidebar-collapsed .sidebar .nav-item[data-sec="bills"] #billsBadge:not(.hidden){display:flex!important;position:absolute;top:5px;right:8px;min-width:15px;height:15px;padding:0 3px;align-items:center;justify-content:center;border:2px solid var(--sidebar);border-radius:50px;background:var(--expense);color:#fff;font-size:8px;font-weight:800;line-height:1;}
}
@media(max-width:900px){
  #tools .tool-hub-card{display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-content:center!important;align-items:start!important;min-height:84px!important;padding:12px 40px 12px 12px!important;gap:0 9px!important;text-align:left!important;}
  #tools .tool-hub-card>.ti{grid-column:1;grid-row:1 / span 2;width:30px!important;height:30px!important;margin:0!important;font-size:14px!important;border-radius:9px!important;}
  #tools .tool-hub-card .tool-hub-copy{grid-column:2;grid-row:1 / span 2;width:auto!important;min-width:0!important;text-align:left!important;align-self:center!important;}
  #tools .tool-hub-card .tool-hub-copy b{font-size:11.5px!important;line-height:1.18!important;}
  #tools .tool-hub-card .tool-hub-copy small{max-width:none!important;margin:3px 0 0!important;text-align:left!important;font-size:9.5px!important;line-height:1.22!important;}
}
@media(max-width:600px){.bill-alert-dot{width:7px;height:7px;flex-basis:7px;}}
/* Dashboard e compromissos: informação clara, sem competir com o conteúdo. */
.bill-row{position:relative;}
.bill-row>.bill-alert-dot{position:absolute;z-index:2;left:-6px;top:50%;width:12px;height:12px;transform:translateY(-50%);border:2px solid var(--card);box-sizing:border-box;box-shadow:none;}
.dashboard-greeting{display:none;}
.dashboard-alert-trigger{box-shadow:0 5px 16px rgba(7,138,114,.08);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;}
.dashboard-alert-trigger:hover{border-color:var(--primary);box-shadow:0 7px 18px rgba(7,138,114,.16);transform:translateY(-1px);}
.dashboard-alert-trigger:has(.dashboard-alert-count:not(.hidden)){color:var(--primary);border-color:color-mix(in srgb,var(--primary) 40%,var(--border));background:linear-gradient(145deg,rgba(7,138,114,.12),var(--app-surface-soft));}
.dashboard-alerts-modal h2{padding-bottom:13px;border-bottom:1px solid var(--app-line);}.dashboard-alerts-modal .alert{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;border:1px solid transparent;box-shadow:0 6px 16px rgba(18,35,47,.05);}.dashboard-alerts-modal .alert>i{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(55,123,181,.12);}.dashboard-alerts-modal .alert.danger>i{background:rgba(217,74,92,.13);}.dashboard-alerts-modal .alert.warn>i{background:rgba(201,137,25,.14);}.dashboard-alerts-modal .alert.ok>i{background:rgba(7,138,114,.13);}
@media(min-width:901px){
  .greeting-mobile{display:none!important;}
  #dashboard .dashboard-greeting{display:flex;align-items:center;gap:8px;grid-column:1/-1;margin:3px 0 -7px;color:var(--muted);font-size:15px;font-weight:700;}
  #dashboard .dashboard-greeting i{color:var(--primary);}
  #dashboard .dashboard-greeting-avatar{display:none;}
}
@media(max-width:900px){
  html.design-lab #dashboard .dashboard-greeting{display:flex!important;align-items:center;gap:10px;margin:0 0 18px!important;color:var(--muted);font-size:14px;font-weight:600;}
  html.design-lab #dashboard .dashboard-greeting-text{display:flex!important;flex-direction:column!important;gap:1px;}
  html.design-lab #dashboard .dashboard-greeting-time{font-size:12px!important;font-weight:600!important;color:var(--muted)!important;}
  html.design-lab #dashboard .dashboard-greeting-name{font-size:15px!important;font-weight:800!important;color:var(--text)!important;letter-spacing:.2px;text-transform:uppercase;margin-left:0!important;}
  html.design-lab #dashboard .dashboard-greeting-text i{display:none;}
  html.design-lab #dashboard .dashboard-greeting-avatar{width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:2px solid var(--primary);background:var(--card);color:var(--muted);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:16px;padding:0;margin:0;cursor:pointer;}
  html.design-lab #dashboard .dashboard-greeting-avatar img{width:100%;height:100%;object-fit:cover;}
  html.design-lab body:has(#dashboard.section.active) #pageTitle{display:none!important;}
  #bills .bill-row{overflow:visible!important;}
  .bill-row>.bill-alert-dot{left:-6px;width:12px;height:12px;}
}
/* Início (mobile): saldo em destaque sem cartão, receita/despesa em texto
   simples, guardado/investido saem do topo (continuam em Caixinhas e
   Investimentos) — como no rascunho visual aprovado. Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab #dashboard>.cards{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:flex-start!important;gap:3px 16px!important;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;margin-bottom:20px!important;}
  html.design-lab #dashboard>.cards .stat{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;overflow:visible!important;}
  html.design-lab #dashboard>.cards .stat::before{display:none!important;}
  html.design-lab #dashboard>.cards .stat.balance{flex:0 0 100%!important;text-align:center!important;order:1;}
  html.design-lab #dashboard>.cards .stat.balance .t{display:none!important;}
  html.design-lab #dashboard>.cards .stat.balance .v{font-size:38px!important;font-weight:800!important;letter-spacing:-1px!important;margin-top:0!important;}
  html.design-lab #dashboard>.cards .dashboard-balance-row{display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;}
  html.design-lab #dashboard>.cards .dashboard-balance-nav{display:inline-flex!important;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border:0;background:none;color:var(--muted);font-size:14px;}
  html.design-lab #dashboard>.cards .stat.income{order:2;flex:0 0 auto!important;display:flex!important;align-items:baseline!important;gap:5px;}
  html.design-lab #dashboard>.cards .stat.expense{order:3;flex:0 0 auto!important;display:flex!important;align-items:baseline!important;gap:5px;}
  html.design-lab #dashboard>.cards .stat.income .t,html.design-lab #dashboard>.cards .stat.expense .t{font-size:11.5px!important;color:var(--muted)!important;margin:0!important;}
  html.design-lab #dashboard>.cards .stat.income .t i,html.design-lab #dashboard>.cards .stat.expense .t i,html.design-lab #dashboard>.cards .stat.income .t .metric-info,html.design-lab #dashboard>.cards .stat.expense .t .metric-info{display:none!important;}
  html.design-lab #dashboard>.cards .stat.income .v,html.design-lab #dashboard>.cards .stat.expense .v{font-size:13.5px!important;font-weight:700!important;margin:0!important;}
  html.design-lab #dashboard>.cards .stat.vault,html.design-lab #dashboard>.cards .stat.invest{display:none!important;}
  html.design-lab #dashboard>.cards .stat.networth{display:none!important;}
  /* Os selos de ícone dos KPIs são do desenho do computador; no celular já
     eram invisíveis (o rótulo inteiro é escondido), e agora que eles contêm
     SVG em vez de fonte de ícone, precisam ser escondidos explicitamente. */
  html.design-lab #dashboard>.cards .stat-icon-badge{display:none!important;}
}
/* Gráfico de evolução (mobile): sem cartão, sem grade, flutuando direto no
   fundo — como no rascunho visual (ondas azul/vermelha sobrepostas). */
@media(max-width:900px){
  html.design-lab #dashboard .dashboard-evolution{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 22px!important;}
  html.design-lab #dashboard .dashboard-evolution h3{display:none!important;}
}
/* Saudação + foto (mobile): mais acima, logo abaixo do seletor de mês, antes
   do seletor Atual/Fechamento — como no rascunho visual. Desktop não é
   afetado (a ordem lá é fixada por grid-column/grid-row, não pelo HTML). */
@media(max-width:900px){
  html.design-lab #dashboard.section.active{display:flex!important;flex-direction:column!important;}
  html.design-lab #dashboard>.dashboard-greeting{order:1!important;}
  html.design-lab #dashboard>.dashboard-controls{order:2!important;margin-top:2px!important;}
  html.design-lab #dashboard>.cards{order:3!important;}
  html.design-lab #dashboard>.panel,html.design-lab #dashboard>.dash-widget{order:4;}
}
/* Cartões (mobile): carrossel de miniaturas + um cartão "padrão" em destaque
   embaixo, como no rascunho visual. Desktop continua com a lista de painéis
   completos (um por cartão), sem nenhuma mudança. */
@media(max-width:900px){
  html.design-lab .card-carousel{display:flex!important;gap:12px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:18px;scroll-snap-type:x mandatory;scroll-padding-left:2px;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;}
  html.design-lab .card-carousel::-webkit-scrollbar{display:none;}
  html.design-lab .card-carousel-item{flex:0 0 auto;width:126px;height:92px;border-radius:16px;padding:12px;text-align:left;border:2px solid transparent;box-shadow:none;display:flex;flex-direction:column;justify-content:space-between;opacity:.62;transform:scale(.96);transition:transform .15s ease,opacity .15s ease;scroll-snap-align:start;}
  html.design-lab .card-carousel-item.is-selected{opacity:1;transform:scale(1);border-color:#fff5;}
  /* Mesma alça de arrastar-para-reordenar do computador, aqui sempre visível
     (não dá pra depender de :hover no toque) — canto superior direito do
     card, fora da área de toque do resto do card. */
  html.design-lab .card-carousel-item{position:relative;}
  html.design-lab .card-carousel-item .card-drag-handle{position:absolute;top:6px;right:6px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:10px;cursor:grab;touch-action:none;}
  html.design-lab .card-default-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
}
/* Lançamentos (mobile): busca escondida atrás de um ícone, expandindo ao lado
   da lupa (como se saísse dela) em vez de abrir uma linha nova embaixo.
   Importar extrato sai daqui (continua em Mais > Backup e dados), como no
   rascunho visual. Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab #transactions .lancamentos-search-row{justify-content:flex-end;}
  html.design-lab #transactions .lancamentos-search-row:has(.search-bar.tx-search-expanded){justify-content:flex-start!important;}
  html.design-lab #transactions .lancamentos-quickbar{margin:0!important;transition:gap .2s ease;}
  html.design-lab #transactions .lancamentos-quickbar:has(+ .search-bar.tx-search-expanded){gap:0!important;}
  html.design-lab #transactions .lancamentos-quickbar:has(+ .search-bar.tx-search-expanded) .lancamentos-icon-btn:not(:first-child){width:0!important;min-width:0!important;border-width:0!important;opacity:0;pointer-events:none;overflow:hidden;}
}
@media(max-width:900px){.lancamentos-quickbar,.lancamentos-search-row{display:none;}}
/* Correção: a regra acima (mobile) não tinha contrapartida pro desktop —
   sem nenhum @media, ela ficava valendo pra qualquer largura de tela até
   ser reativada só no mobile via !important, deixando o desktop sem a
   barra de pesquisa/filtros inteira (regressão da rodada do redesenho
   mobile, que pretendia não afetar o desktop). O ícone-só (quickbar) é
   mobile-only por natureza — no desktop, a barra de pesquisa completa já
   fica sempre visível (regra base .search-bar, sem gate de
   tx-search-expanded fora do mobile), então só falta esconder a quickbar. */
@media(min-width:901px){#transactions .lancamentos-quickbar{display:none;}}
@media(max-width:900px){
  html.design-lab #transactions .lancamentos-icon-btn{flex:0 0 auto;transition:width .2s ease,min-width .2s ease,opacity .15s ease,border-width .2s ease;}
  html.design-lab #transactions .search-bar{overflow:hidden;transition:flex-basis .26s cubic-bezier(.2,.8,.3,1),width .26s cubic-bezier(.2,.8,.3,1),opacity .18s ease;}
  html.design-lab #transactions .search-bar.tx-search-expanded{flex:1 1 auto!important;width:auto!important;opacity:1!important;}
  html.design-lab #transactions #txSearchBar .fg{width:100%;margin:0;}
  html.design-lab #transactions #txSearchBar .fg label{display:none!important;}
  html.design-lab #transactions #txSearchBar input{height:38px!important;min-height:38px!important;width:100%;box-sizing:border-box;border-radius:999px!important;border:1px solid var(--app-line)!important;background:var(--card)!important;padding:0 16px!important;font-size:14px!important;}
  html.design-lab #transactions .tx-import-statement,html.design-lab #transactions .tx-filter-trigger{display:none!important;}
  /* O "+" da barra inferior já cobre "novo lançamento" em qualquer tela — o
     botão .lancamentos-icon-btn-add foi removido do HTML (não só escondido
     por CSS, pra não repetir o bug de cascade onde uma regra nova reativava
     o display por engano). */
}
/* Filtros de Lançamentos (mobile): pílulas de verdade, como no rascunho —
   a regra antiga (não design-lab) aplicava 11px de raio, o que ficava
   quadriculado num botão desta altura. Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab #transactions .transactions-filter-tabs button.active{box-shadow:none!important;}
}
/* Botão flutuante de "+" (mobile): removido — Lançamentos e Cartões já têm
   seu próprio botão de adicionar (quickbar / carrossel). Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab .fab{display:none!important;}
}
/* Calculadora flutuante — só no computador (atalho pra somar/conferir
   contas sem sair da tela; no celular o teclado numérico do próprio
   aparelho já cumpre esse papel, e o espaço de tela é mais disputado). */
.calc-fab,.calc-widget{display:none;}
@media(min-width:901px){
  html.design-lab .calc-fab{display:flex!important;position:fixed;right:34px;bottom:34px;width:56px;height:56px;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#5a8de1,#4777c8);color:#fff;font-size:21px;border:0;box-shadow:var(--app-shadow);z-index:88;cursor:pointer;transition:transform .15s ease;}
  html.design-lab .calc-fab:hover{transform:translateY(-2px);}
  html.design-lab .calc-fab:active{transform:scale(.94);}
  html.design-lab .calc-widget{display:block!important;position:fixed;right:34px;bottom:100px;width:280px;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--app-shadow);z-index:89;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.96);transition:opacity .16s ease,transform .16s ease,visibility .16s;}
  html.design-lab .calc-widget.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  html.design-lab .calc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border);font-weight:800;font-size:13.5px;color:var(--text);}
  html.design-lab .calc-head .icon-btn{width:26px;height:26px;min-height:0;flex:0 0 auto;}
  html.design-lab .calc-display{padding:14px 16px 8px;text-align:right;}
  html.design-lab .calc-expr{min-height:15px;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab .calc-value{margin-top:2px;font-size:27px;font-weight:800;letter-spacing:-.4px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab .calc-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:12px 14px 14px;}
  html.design-lab .calc-key{min-height:44px;border:0;border-radius:11px;background:var(--app-surface-soft);color:var(--text);font-size:15px;font-weight:700;cursor:pointer;transition:background .12s ease,transform .1s ease;}
  html.design-lab .calc-key:hover{background:var(--border);}
  html.design-lab .calc-key:active{transform:scale(.93);}
  html.design-lab .calc-key.calc-op{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}
  html.design-lab .calc-key.calc-op-main.active{background:var(--primary)!important;color:#fff!important;}
  html.design-lab .calc-key.calc-zero{grid-column:span 2;}
  html.design-lab .calc-key.calc-equals{background:linear-gradient(145deg,#5a8de1,#4777c8);color:#fff;}
}
/* Lista de lançamentos (mobile): sem "card" de fundo; o valor de cada
   lançamento fica em branco/neutro, só a soma do dia mantém a cor
   (vermelho/azul) — como no rascunho visual. Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab #txListPanel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;}
  html.design-lab #transactions .tx .amt.in,html.design-lab #transactions .tx .amt.out{color:var(--text)!important;}
}
/* Cartões e Contas (mobile): remove o botão "+" do topo — o carrossel já
   tem seu próprio botão de adicionar. Sem "card" de fundo por trás da
   lista/carrossel (mesmo conceito de Cartões). Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab #cards-sec .topbar,
  html.design-lab #accounts .topbar,
  html.design-lab #vaults .topbar,
  html.design-lab #vaults .detail-topbar .detail-actions,
  html.design-lab #accounts .detail-topbar .detail-actions{display:none!important;}
  /* Contas e Caixinhas: sem fundo em nenhum card da página (saldo total,
     card grande da conta/caixinha selecionada) — só o texto, como o resto
     do redesenho "sem card". */
  html.design-lab #accounts .account-total,
  html.design-lab #accounts .cc,
  html.design-lab #vaults .vault-card{background:none!important;border:0!important;box-shadow:none!important;padding:16px 0!important;}
  html.design-lab #accounts .cc::before,
  html.design-lab #vaults .vault-card::before{display:none!important;}
  /* Orçamento: sem fundo nos cards de categoria. */
  html.design-lab #budget .budget-row{background:none!important;border:0!important;border-bottom:1px solid var(--app-line)!important;border-radius:0!important;padding:14px 0!important;}
}
/* Fatura do cartão (mobile): sem "card" de fundo por trás do conteúdo, sem
   os blocos separados de "Ciclo do cartão"/"Limite disponível" (essas
   informações passam a viver só no visual do cartão, no topo da página),
   e seletor de mês + visão Atual/Fechamento no mesmo estilo/lugar da tela
   de início. Desktop não é afetado — a página desktop mantém os 4 blocos
   de resumo e o <select> simples como sempre. */
@media(max-width:900px){
  html.design-lab #card-details .panel,
  html.design-lab #vault-details .panel,
  html.design-lab #account-details .panel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;}
  html.design-lab #desktopAccountList .tx .amt.in,
  html.design-lab #desktopAccountList .tx .amt.out{color:var(--text)!important;}
  html.design-lab #accountStatementSummary .iv,
  html.design-lab #invoiceSummary .iv,
  html.design-lab #desktopAccountSummary .iv,
  html.design-lab #desktopInvoiceSummary .iv,
  html.design-lab #desktopVaultSummary .iv{background:none!important;padding:10px 0!important;text-align:center!important;}
  html.design-lab #accountStatementSummary .iv span,
  html.design-lab #invoiceSummary .iv span,
  html.design-lab #desktopAccountSummary .iv span,
  html.design-lab #desktopInvoiceSummary .iv span,
  html.design-lab #desktopVaultSummary .iv span{display:block!important;}
  html.design-lab #accountStatementSummary .iv b,
  html.design-lab #invoiceSummary .iv b,
  html.design-lab #desktopAccountSummary .iv b,
  html.design-lab #desktopInvoiceSummary .iv b,
  html.design-lab #desktopVaultSummary .iv b{display:block!important;margin:4px auto 0!important;}
  html.design-lab #vaultList>.panel,
  html.design-lab #cardList>.panel{background:none!important;border:0!important;box-shadow:none!important;}
  html.design-lab #bills>.cards .stat,
  html.design-lab #investments>.cards .stat,
  html.design-lab #patrimony>.cards .stat{background:none!important;border:0!important;box-shadow:none!important;}
  #scrollTopZone{display:block!important;position:fixed;top:0;left:0;right:0;height:max(30px,env(safe-area-inset-top));z-index:70;background:transparent;}
  html.design-lab #compare .report-summary .summary-item{background:none!important;border:0!important;box-shadow:none!important;}
  html.design-lab #desktopAccountSummary .iv b,
  html.design-lab #desktopInvoiceSummary .iv b,
  html.design-lab #desktopVaultSummary .iv b{font-size:16px!important;}
  html.design-lab #desktopAccountSummary .iv span,
  html.design-lab #desktopInvoiceSummary .iv span,
  html.design-lab #desktopVaultSummary .iv span{font-size:11.5px!important;}
  html.design-lab #card-details .invoice-summary .iv:nth-child(3),
  html.design-lab #card-details .invoice-summary .iv:nth-child(4){display:none!important;}
  html.design-lab #card-details .cards-month-field{margin:0!important;max-width:none!important;}
  html.design-lab #card-details .cards-month-field label{display:none!important;}
  html.design-lab #desktopCardDetailVisual{display:block!important;margin:0 0 18px;}
  html.design-lab .card-detail-visual{border-radius:20px;padding:18px;box-shadow:0 14px 30px color-mix(in srgb,var(--item-color,var(--primary)) 35%,transparent);color:#fff;}
  html.design-lab .card-detail-visual-top{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;margin-bottom:22px;}
  html.design-lab .card-detail-visual-top span{font-size:20px;opacity:.9;}
  html.design-lab .card-detail-visual-bottom{display:flex;justify-content:space-between;gap:14px;}
  html.design-lab .card-detail-visual-bottom small{display:block;font-size:9.5px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.3px;}
  html.design-lab .card-detail-visual-bottom b{display:block;margin-top:3px;font-size:13px;font-weight:800;}
  html.design-lab .card-detail-visual-bottom>div:last-child{text-align:right;}
}
#desktopCardDetailVisual{display:none;}
.cards-detail-view{display:none;}
/* Cabeçalho da fatura (mês + visão Atual/Fechamento): usado tanto no mobile
   quanto no desktop (renderDesktopCardDetail), mas a pílula do mês
   (ícone+select+seta) só tinha CSS de layout dentro do bloco mobile — no
   desktop ela caía no comportamento padrão de bloco, empilhando os três
   elementos verticalmente em vez de ficar em linha. */
html.design-lab #card-details .cards-detail-controls{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;flex-wrap:wrap;}
html.design-lab #card-details .cards-month-pill{display:inline-flex!important;align-items:center;gap:6px;padding:6px 10px 6px 12px;border:1px solid var(--border);border-radius:99px;background:var(--app-surface-soft);color:var(--text);font-size:11px;font-weight:750;position:relative;}
html.design-lab #card-details .cards-month-pill i:first-child{font-size:10px;color:var(--muted);}
html.design-lab #card-details .cards-month-pill i:last-child{font-size:9px;color:var(--muted);}
html.design-lab #card-details .cards-month-pill select{border:0!important;background:transparent!important;appearance:none;-webkit-appearance:none;color:var(--text)!important;font-size:11px!important;font-weight:750!important;padding:0!important;min-height:auto!important;height:auto!important;width:auto!important;max-width:120px;}
/* Barra inferior (mobile): layout do rascunho — pílula flutuante (não
   encostada nas bordas), só ícones, com um botão "+" central elevado no
   lugar de "Contas" (que passou a viver em Mais). Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab .bottom-nav{
    display:flex!important;grid-template-columns:none!important;
    position:absolute!important;
    left:0!important;right:0!important;margin:0 auto!important;
    bottom:calc(env(safe-area-inset-bottom) - 12px)!important;
    transform:none!important;-webkit-transform:none!important;
    width:min(520px,calc(100% - 32px))!important;height:auto!important;min-height:0!important;
    align-items:center!important;justify-content:space-evenly!important;
    gap:4px!important;padding:8px 12px!important;border-radius:30px!important;
    background:color-mix(in srgb,var(--card) 90%,transparent)!important;-webkit-backdrop-filter:blur(18px)!important;
    will-change:transform!important;
  }
  html.design-lab .bottom-nav button{
    flex:0 0 auto!important;width:46px!important;min-width:46px!important;height:44px!important;min-height:44px!important;
    border-radius:16px!important;transform:none!important;margin:0!important;padding:0!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
    line-height:1!important;box-sizing:border-box!important;overflow:visible!important;
    -webkit-appearance:none!important;appearance:none!important;vertical-align:top!important;
  }
  html.design-lab .bottom-nav button.active{background:none!important;}
  html.design-lab .bottom-nav .ico{position:static!important;display:block!important;width:auto;height:auto;background:none!important;font-size:19px!important;line-height:1!important;color:var(--muted);transition:color 180ms ease-out,transform 280ms var(--fm-motion-spring,cubic-bezier(.22,.9,.32,1.05));}
  html.design-lab .bottom-nav .ico i{display:block!important;line-height:1!important;}
  html.design-lab .bottom-nav button.active .ico{color:var(--primary);animation:fmNavIconPop 280ms var(--fm-motion-spring,cubic-bezier(.22,.9,.32,1.05));}
  @keyframes fmNavIconPop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
  html.design-lab .bottom-nav button.bottom-nav-fab{
    flex:0 0 auto!important;width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;
    margin:0 2px!important;padding:0!important;border-radius:50%!important;border:0!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
    box-shadow:0 4px 12px rgba(48,91,243,.5)!important;
    color:#fff!important;font-size:19px!important;line-height:1!important;box-sizing:border-box!important;overflow:visible!important;
    -webkit-appearance:none!important;appearance:none!important;vertical-align:top!important;
  }
  html.design-lab .bottom-nav button.bottom-nav-fab i{position:static!important;display:block!important;line-height:1!important;}
}
/* Contas a pagar/receber, Orçamento, Recorrentes (mobile): sem "card" de
   fundo na lista — só o card do cabeçalho (resumo do mês) continua com
   fundo, como no resto do redesenho. Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab #billListPanel,
html.design-lab #recListPanel,
html.design-lab #account-security-page .security-page-body,
html.design-lab #data-hub-page>.panel,
html.design-lab #reports-page>.panel,
html.design-lab #notification-settings-page>.panel,
html.design-lab #whatsapp-settings-page>.panel,
html.design-lab #category-details .category-detail-page-chart{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;}
}
/* Cabeçalho das janelas (mobile): o corpo do modal usa --app-surface, mas o
   título usava --card (levemente diferente), criando uma linha visível
   entre os dois. Agora os dois usam a mesma cor. Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab .overlay .modal h2{background:var(--app-surface)!important;}
}
.dashboard-amount-toggle-mobile{display:none;}
/* Início (mobile): o olho de ocultar saldo ficava dentro da linha "Saldo do
   mês", escondida junto com o rótulo — sem outro jeito de acioná-lo no
   mobile. Agora tem seu próprio botão, alinhado com a saudação, no canto
   direito. Desktop não é afetado (o olho original ao lado de "Saldo do
   mês" continua exatamente como sempre). */
@media(max-width:900px){
  html.design-lab #dashboard.section.active{position:relative;}
  html.design-lab #dashboard>.dashboard-amount-toggle-mobile{display:flex!important;position:absolute;top:2px;right:0;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:transparent;border:0;color:var(--muted);font-size:16px;z-index:2;}
  html.design-lab #dashboard>.dashboard-amount-toggle-mobile:active{color:var(--primary);}
}
/* Segurança e privacidade, Backup e dados, Relatórios (mobile): título no
   mesmo lugar/estilo das outras páginas de "Mais" (voltar + h2 no
   cabeçalho), em vez do rótulo pequeno "SUA CONTA"/"FERRAMENTAS" seguido
   de um título só lá embaixo, dentro do card. Desktop não é afetado —
   continua com o rótulo + título como sempre (o novo cabeçalho só existe
   visualmente no mobile, graças à mesma regra que já esconde
   .mais-page>.detail-topbar acima de 900px). */
@media(max-width:900px){
  #account-security-page.mais-page .account-action-head,
  #data-hub-page.mais-page .account-action-head,
  #reports-page.mais-page .account-action-head,
  #notification-settings-page.mais-page .account-action-head,
  #profile-page.mais-page .account-action-head,
  #whatsapp-settings-page.mais-page .account-action-head,
  #pluggy-settings-page.mais-page .account-action-head{display:none!important;}
  #account-security-page .mais-page-inner-title,
  #data-hub-page .mais-page-inner-title,
  #reports-page .mais-page-inner-title,
  #notification-settings-page .mais-page-inner-title,
  #profile-page .mais-page-inner-title,
  #whatsapp-settings-page .mais-page-inner-title,
  #pluggy-settings-page .mais-page-inner-title{display:none!important;}
  #profile-page .panel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;}
  #profile-page .profile-hub-info{color:var(--text);}
  #profile-page .profile-hub-info .profile-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);overflow:hidden;flex:0 0 auto;}
  #profile-page .profile-hub-info strong{display:block;}
  #profile-page .profile-hub-info small{display:block;margin-top:2px;}
  #profile-page .profile-hub-info .chev{margin-left:auto;color:var(--muted);font-size:13px;flex:0 0 auto;}
  #profile-page .profile-page-nav-list{margin:18px 0 4px;}
}
/* Fatura do cartão (mobile): abre com a tela subindo de baixo, como se
   estivesse saindo do carrossel — diferente do slide horizontal usado nas
   outras páginas empurradas. Desktop não é afetado (função só age abaixo
   de 900px). */
@media(max-width:900px){
  @keyframes fmNavPushUp{from{opacity:.85;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
  @keyframes fmNavPopDown{from{opacity:.6;transform:translateY(24%) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
  .section.fm-nav-push-up{animation:fmNavPushUp .32s var(--fm-motion-spring) both;}
  .section.fm-nav-pop-down{animation:fmNavPopDown .32s var(--fm-motion-spring) both;}
}
/* No celular, o aviso fica inteiro e alinhado ao centro do ícone do compromisso. */
.bill-alert-hint{display:none;}
@media(max-width:600px){
  #bills .bill-row>.bill-alert-dot{display:none!important;}
  #bills .bill-alert-hint{display:inline-flex;align-items:center;gap:3px;margin-left:3px;color:var(--expense);font-size:9px;font-weight:750;white-space:nowrap;}
  #bills .bill-alert-hint i{font-size:8px;}
}
/* Ajustes de densidade e alinhamento: dashboard, perfil e segurança. */
@media(min-width:901px){
  #dashboard.section.active>.dashboard-controls{justify-self:end;align-self:center;}
  #dashboard.section.active>.dashboard-greeting{grid-column:1!important;grid-row:1;margin:0!important;align-self:center;font-size:18px!important;line-height:1.25;}
}
/* Balão de avisos no desktop: informativo, discreto e sem abrir modal ao clicar. */
@media(min-width:901px){
  .dashboard-alert-preview{width:min(346px,calc(100vw - 32px));padding:12px;border-color:color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:16px;background:linear-gradient(145deg,var(--card),var(--app-surface-soft));box-shadow:0 18px 42px rgba(4,15,23,.25);}
  .dashboard-alert-preview::before{content:'';position:absolute;top:-6px;right:19px;width:11px;height:11px;border-top:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-left:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));background:var(--card);transform:rotate(45deg);}
  .dashboard-alert-preview-title{position:relative;padding:1px 2px 2px;font-size:14px;}.dashboard-alert-preview-title>span{display:inline-flex;align-items:center;gap:8px;}.dashboard-alert-preview-title i{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(7,138,114,.12);}.dashboard-alert-preview-title small{min-width:23px;height:23px;color:var(--primary);background:rgba(7,138,114,.11);}
  .dashboard-alert-preview-subtitle{padding:3px 3px 8px;color:var(--muted);font-size:11px;line-height:1.35;}
  .dashboard-alert-preview .alert{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;margin:7px 0 0;padding:10px 28px 10px 10px;border:1px solid var(--app-line);border-left-width:3px;border-radius:11px;background:var(--app-surface);font-size:11px;line-height:1.4;}
  .dashboard-alert-preview .alert>i{width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:rgba(55,123,181,.11);}.dashboard-alert-preview .alert.danger>i{background:rgba(217,74,92,.12);}.dashboard-alert-preview .alert.warn>i{background:rgba(201,137,25,.13);}.dashboard-alert-preview .alert.ok>i{background:rgba(7,138,114,.12);}
  .dashboard-alert-preview .alert-delete{top:5px;right:5px;width:20px;height:20px;font-size:9px;}
  .dashboard-alert-preview-empty{margin-top:4px;padding:12px 5px 5px;}
}
/* Perfil e dashboard em telas compactas: menos controles, mais contexto. */
.dashboard-view-mobile{display:none;}
#profileEditOverlay .profile-edit-photo>div:last-child{flex:1;min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;align-items:start;}
#profileEditOverlay .profile-edit-photo label[for="profilePhotoInput"]{margin:0;}
@media(max-width:900px){
  #dashboard .dashboard-view-switch{display:none!important;}
  #dashboard .dashboard-controls{display:flex!important;justify-content:flex-end!important;align-items:center!important;margin:0 0 9px!important;}
  #dashboard .dashboard-view-mobile{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--border);border-radius:17px;background:var(--app-surface-soft);color:var(--primary);font-size:10.5px;font-weight:800;line-height:1;}
  #dashboard .dashboard-view-mobile.projected{color:#b87913;border-color:rgba(201,137,25,.3);background:rgba(201,137,25,.10);}
  #dashboard .dashboard-view-mobile i{font-size:11px;}
}
/* Navegação compacta do dashboard e edição de foto sem ambiguidades. */
#profileEditOverlay .profile-edit-photo{display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px 14px;align-items:start;}
#profileEditOverlay .profile-edit-photo label.btn{display:inline-flex;align-items:center;gap:7px;width:auto;padding:5px 20px;font-size:12.5px;}
#profileEditOverlay .profile-edit-photo>.profile-avatar{grid-column:1;grid-row:1;width:68px;height:68px;}
#profileEditOverlay .profile-edit-photo>div:last-child{display:contents;}
#profileEditOverlay .profile-edit-photo label[for="profilePhotoInput"]{grid-column:2;grid-row:1;justify-self:end;align-self:start;}
#profileEditOverlay .profile-edit-photo .profile-photo-remove{grid-column:1;grid-row:2;justify-self:center;margin:0;white-space:nowrap;}
#profileEditOverlay .profile-edit-photo .hint{margin:0;align-self:start;}
@media(max-width:900px){
  .dashboard-view-mobile{display:none!important;}
}
@media(max-width:600px){
  #profileEditOverlay .profile-edit-photo{grid-template-columns:58px minmax(0,1fr);gap:9px 11px;}
  #profileEditOverlay .profile-edit-photo>.profile-avatar{width:58px;height:58px;font-size:20px;}
  #profileEditOverlay .profile-edit-photo .profile-photo-remove{font-size:10px;}
  #profileEditOverlay .profile-edit-photo .hint{font-size:10px;}
}
/* Seletor compacto de visão no dashboard móvel. */
.dashboard-view-picker{display:grid;gap:9px;}.dashboard-view-picker button{display:grid;grid-template-columns:38px minmax(0,1fr) 24px;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--app-surface-soft);color:var(--text);text-align:left;}.dashboard-view-picker button>i:first-child{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(7,138,114,.11);color:var(--primary);}.dashboard-view-picker button[data-picker-view="projected"]>i:first-child{background:rgba(201,137,25,.12);color:#b87913;}.dashboard-view-picker button span{min-width:0;}.dashboard-view-picker b{display:block;font-size:13px;}.dashboard-view-picker small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.32;}.dashboard-view-picker button>i:last-child{opacity:0;color:var(--primary);font-size:13px;}.dashboard-view-picker button.active{border-color:color-mix(in srgb,var(--primary) 48%,var(--border));background:rgba(7,138,114,.08);}.dashboard-view-picker button[data-picker-view="projected"].active{border-color:rgba(201,137,25,.42);background:rgba(201,137,25,.09);}.dashboard-view-picker button.active>i:last-child{opacity:1;}.dashboard-view-picker button[data-picker-view="projected"].active>i:last-child{color:#b87913;}
#profileEditOverlay .profile-edit-photo .hint{grid-column:1/-1!important;grid-row:3!important;margin-top:-2px!important;}
/* Resumo de compromissos: mesma informação, com menos altura no celular. */
@media(max-width:600px){
  #bills>.cards{gap:9px!important;margin-bottom:12px!important;}
  #bills>.cards .stat{min-height:78px!important;padding:10px 11px!important;}
  #bills>.cards .stat .t{font-size:10.5px!important;line-height:1.2!important;}
  #bills>.cards .stat .v{margin-top:6px!important;font-size:18px!important;line-height:1.08!important;}
}
/* Cabeçalho da barra lateral: foto e recolhimento no mesmo eixo visual. */
@media(min-width:901px){
  .sidebar .logo.sidebar-user{position:relative;display:flex!important;align-items:center!important;}
  .sidebar .logo.sidebar-user .sidebar-user-profile,.sidebar .logo.sidebar-user .sidebar-collapse{align-self:center!important;}
  .sidebar .logo.sidebar-user .sidebar-collapse{display:inline-flex!important;align-items:center!important;justify-content:center!important;margin-top:0!important;margin-bottom:0!important;line-height:1!important;}
  body.sidebar-collapsed .sidebar .logo.sidebar-user .sidebar-collapse{top:50%!important;transform:translateY(-50%);}
  /* No modo recolhido só a foto sobra visível — a área clicável do perfil
     encolhe pro tamanho dela (senão continuaria esticada, competindo com
     o botão de recolher pelo mesmo espaço apertado). */
  body.sidebar-collapsed .sidebar .logo.sidebar-user .sidebar-user-profile{flex:0 0 auto!important;}
}
/* Ajuda rápida: explicações objetivas dentro da central de suporte. */
.help-article{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;margin-top:12px;padding:12px;border:1px solid rgba(7,138,114,.24);border-radius:var(--radius-md);background:rgba(7,138,114,.07);}.help-article>i{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(7,138,114,.14);color:var(--primary);}.help-article b{display:block;font-size:12px;}.help-article small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.42;}@media(max-width:600px){.help-article{padding:11px;}.help-article small{font-size:10.5px;}}
.data-integrity-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;margin:0 0 14px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:var(--app-surface-soft);}.data-integrity-card>.data-integrity-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(7,138,114,.12);color:var(--primary);font-size:16px;}.data-integrity-copy{min-width:0;}.data-integrity-copy b{display:block;font-size:13px;line-height:1.3;}.data-integrity-copy small{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.35;}.data-integrity-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px 14px;padding-top:9px;border-top:1px solid var(--border);color:var(--muted);font-size:11px;line-height:1.35;}.data-integrity-meta span{display:inline-flex;align-items:center;gap:5px;}.data-integrity-meta i{color:var(--primary);font-size:10px;}.data-integrity-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:10px;border-top:1px solid var(--border);}.data-integrity-actions .btn{min-width:0;min-height:40px;padding:8px 9px;white-space:normal;line-height:1.18;text-align:center;}.data-integrity-card.is-pending>.data-integrity-icon,.data-integrity-card.is-local>.data-integrity-icon{background:rgba(223,154,18,.13);color:#ba7a00;}@media(max-width:600px){.data-integrity-card{padding:12px;gap:9px 10px;}.data-integrity-copy b{font-size:14px;}.data-integrity-copy small{font-size:12px;line-height:1.42;}.data-integrity-meta{gap:6px 10px;font-size:10.5px;}.data-integrity-actions{gap:8px;padding-top:11px;}.data-integrity-actions .btn{min-height:44px;font-size:12px;}}
/* Navegação e personalização específicas para telas móveis. */
@media(max-width:600px){.report-builder-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.report-builder-fields>.field:nth-child(-n+2){grid-column:1/-1;}}
.report-builder{margin:16px 0 4px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--app-surface-soft);}.report-builder-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;}.report-builder-head>i{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(7,138,114,.11);color:var(--primary);}.report-builder-head b{display:block;font-size:13px;}.report-builder-head small{display:block;margin-top:2px;color:var(--muted);font-size:10px;}.report-builder-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.report-builder-fields .field{margin:0;}.report-builder-fields label{font-size:11px;}.report-builder-actions{display:flex;justify-content:flex-end;margin-top:12px;}.report-builder-actions .btn{min-height:38px;}.main{overscroll-behavior-x:none;}@media(max-width:900px){html,body,.main{overscroll-behavior-x:none;}.main{touch-action:pan-y;}}@media(max-width:600px){.report-builder{padding:12px;}.report-builder-actions .btn{width:100%;justify-content:center;}}.category-page-controls{display:flex;align-items:center;gap:8px;margin-left:auto;}.category-page-view-switch{margin-left:auto;}@media(max-width:900px){#dashboard #dashCfgSlot{display:none!important;}.sidebar{width:min(72vw,260px)!important;}.category-page-view-switch{display:none!important;}.mobile-pull-refresh{position:fixed;top:calc(env(safe-area-inset-top) + 20px);left:50%;z-index:1400;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--primary) 64%,var(--border));border-radius:99px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:0 10px 26px rgba(8,25,34,.15);color:var(--primary);font-size:11px;font-weight:750;opacity:0;pointer-events:none;transform:translate(-50%,-20px) scale(.94);transition:opacity .18s ease,transform .26s cubic-bezier(.2,.85,.25,1),border-color .18s ease,color .18s ease,box-shadow .18s ease;}.mobile-pull-refresh.visible{opacity:1;transform:translate(-50%,0) scale(1);}.mobile-pull-refresh.ready{color:var(--expense);border-color:var(--expense);box-shadow:0 11px 28px rgba(217,74,92,.19);}.mobile-pull-refresh i{color:var(--primary);transition:transform .22s cubic-bezier(.2,.85,.25,1),color .18s ease;}.mobile-pull-refresh.ready i{color:var(--expense);transform:rotate(180deg);}}@media(max-width:600px){.sidebar-footer{position:static!important;border-top:0!important;box-shadow:none!important;}}
/* Sistema de movimento FinMoney: feedback funcional, sem competir com os dados. */
:root{--fm-motion-micro:150ms;--fm-motion-page:240ms;--fm-motion-layout:250ms;--fm-motion-ease-out:cubic-bezier(.2,.76,.28,1);--fm-motion-ease-in:cubic-bezier(.55,0,1,.45);--fm-motion-spring:cubic-bezier(.22,.9,.32,1.05);--fm-motion-bounce:cubic-bezier(.26,1.1,.38,1.02);}
.section.fm-section-enter{animation:fmSectionEnter var(--fm-motion-page) var(--fm-motion-ease-out) both;}.section.fm-section-enter .panel,.section.fm-section-enter .stat{animation:fmContentReveal 320ms var(--fm-motion-spring) both;}.section.fm-section-enter .panel:nth-of-type(1),.section.fm-section-enter .stat:nth-child(1){animation-delay:0ms;}.section.fm-section-enter .panel:nth-of-type(2),.section.fm-section-enter .stat:nth-child(2){animation-delay:30ms;}.section.fm-section-enter .panel:nth-of-type(3),.section.fm-section-enter .stat:nth-child(3){animation-delay:60ms;}.section.fm-section-enter .panel:nth-of-type(4),.section.fm-section-enter .stat:nth-child(4){animation-delay:90ms;}.section.fm-section-enter .panel:nth-of-type(5),.section.fm-section-enter .stat:nth-child(5){animation-delay:120ms;}.section.fm-section-enter .panel:nth-of-type(6),.section.fm-section-enter .stat:nth-child(6){animation-delay:150ms;}@keyframes fmSectionEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fmContentReveal{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
button,.btn,.icon-btn,.nav-item,.bottom-nav button,.tool-card,.quick-action,.cc.card-clickable,.vault-card,.inv-card,.bill-row{transition:transform 220ms var(--fm-motion-bounce),box-shadow var(--fm-motion-micro) ease-out,border-color var(--fm-motion-micro) ease-out,background-color var(--fm-motion-micro) ease-out,color var(--fm-motion-micro) ease-out,filter var(--fm-motion-micro) ease-out;}
button:active:not(:disabled),.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.nav-item:active,.bottom-nav button:active,.fm-pressing{transform:scale(.95)!important;transition-duration:110ms!important;}
button:disabled,.btn:disabled,[aria-disabled="true"]{cursor:not-allowed!important;opacity:.52!important;filter:saturate(.45);box-shadow:none!important;}
button:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,.nav-item:focus-visible,.bottom-nav button:focus-visible,[role="button"]:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 46%,transparent)!important;outline-offset:3px!important;border-radius:4px;}
@media(hover:hover) and (pointer:fine){.btn:not(:disabled):hover,.icon-btn:not(:disabled):hover,.header-quick:not(:disabled):hover,.header-search:not(:disabled):hover{filter:brightness(1.035);box-shadow:0 7px 16px rgba(15,35,52,.12);}.btn-ghost:not(:disabled):hover,.icon-btn:not(:disabled):hover{border-color:color-mix(in srgb,var(--primary) 44%,var(--border));color:var(--primary);}.tool-card:hover,.quick-action:hover,.cc.card-clickable:hover,.vault-card:hover,.inv-card:hover,.bill-row:hover,.budget-row:hover,.cat-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 34%,var(--border));box-shadow:var(--app-shadow);}.stat:hover,.panel:hover{border-color:color-mix(in srgb,var(--primary) 22%,var(--border));}.stat,#dashboard>.cards .stat,#dashboard>.cards .stat:hover{transform:none!important;}#calendar .calendar-day:not(.selected):hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border));background:color-mix(in srgb,var(--primary) 6%,var(--bg));}.calendar-agenda-item:hover,.vault-history-row:hover,.cmp-row:hover{background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:8px;}}

.fm-list-refresh .tx,.fm-list-refresh .bill-row,.fm-list-refresh .vault-card,.fm-list-refresh .inv-card,.fm-list-refresh .budget-row,.fm-list-refresh .cat-item{animation:fmListEnter 320ms var(--fm-motion-ease-out) both;}
.fm-list-refresh .tx:nth-child(1),.fm-list-refresh .bill-row:nth-child(1),.fm-list-refresh .vault-card:nth-child(1),.fm-list-refresh .inv-card:nth-child(1),.fm-list-refresh .budget-row:nth-child(1),.fm-list-refresh .cat-item:nth-child(1){animation-delay:0ms;}
.fm-list-refresh .tx:nth-child(2),.fm-list-refresh .bill-row:nth-child(2),.fm-list-refresh .vault-card:nth-child(2),.fm-list-refresh .inv-card:nth-child(2),.fm-list-refresh .budget-row:nth-child(2),.fm-list-refresh .cat-item:nth-child(2){animation-delay:22ms;}
.fm-list-refresh .tx:nth-child(3),.fm-list-refresh .bill-row:nth-child(3),.fm-list-refresh .vault-card:nth-child(3),.fm-list-refresh .inv-card:nth-child(3),.fm-list-refresh .budget-row:nth-child(3),.fm-list-refresh .cat-item:nth-child(3){animation-delay:44ms;}
.fm-list-refresh .tx:nth-child(4),.fm-list-refresh .bill-row:nth-child(4),.fm-list-refresh .vault-card:nth-child(4),.fm-list-refresh .inv-card:nth-child(4),.fm-list-refresh .budget-row:nth-child(4),.fm-list-refresh .cat-item:nth-child(4){animation-delay:66ms;}
.fm-list-refresh .tx:nth-child(5),.fm-list-refresh .bill-row:nth-child(5),.fm-list-refresh .vault-card:nth-child(5),.fm-list-refresh .inv-card:nth-child(5),.fm-list-refresh .budget-row:nth-child(5),.fm-list-refresh .cat-item:nth-child(5){animation-delay:88ms;}
.fm-list-refresh .tx:nth-child(6),.fm-list-refresh .bill-row:nth-child(6),.fm-list-refresh .vault-card:nth-child(6),.fm-list-refresh .inv-card:nth-child(6),.fm-list-refresh .budget-row:nth-child(6),.fm-list-refresh .cat-item:nth-child(6){animation-delay:110ms;}
.fm-list-refresh .tx:nth-child(7),.fm-list-refresh .bill-row:nth-child(7),.fm-list-refresh .vault-card:nth-child(7),.fm-list-refresh .inv-card:nth-child(7),.fm-list-refresh .budget-row:nth-child(7),.fm-list-refresh .cat-item:nth-child(7){animation-delay:132ms;}
.fm-list-refresh .tx:nth-child(n+8),.fm-list-refresh .bill-row:nth-child(n+8),.fm-list-refresh .vault-card:nth-child(n+8),.fm-list-refresh .inv-card:nth-child(n+8),.fm-list-refresh .budget-row:nth-child(n+8),.fm-list-refresh .cat-item:nth-child(n+8){animation-delay:150ms;}
@keyframes fmListEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fm-skeleton-loading .stat,.fm-skeleton-loading .panel,.fm-skeleton-loading .tx,.fm-skeleton-loading .bill-row,.fm-skeleton-loading .vault-card,.fm-skeleton-loading .inv-card,.fm-skeleton-loading canvas{position:relative!important;overflow:hidden!important;color:transparent!important;pointer-events:none!important;}.fm-skeleton-loading .stat>*:not(::before),.fm-skeleton-loading .panel>*:not(::before),.fm-skeleton-loading .tx>*,.fm-skeleton-loading .bill-row>*,.fm-skeleton-loading .vault-card>*,.fm-skeleton-loading .inv-card>*{visibility:hidden!important;}.fm-skeleton-loading .stat::after,.fm-skeleton-loading .panel::after,.fm-skeleton-loading .tx::after,.fm-skeleton-loading .bill-row::after,.fm-skeleton-loading .vault-card::after,.fm-skeleton-loading .inv-card::after{content:'';position:absolute;inset:10px;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--border) 36%,transparent) 22%,color-mix(in srgb,var(--card) 80%,#fff) 42%,color-mix(in srgb,var(--border) 36%,transparent) 62%);background-size:220% 100%;animation:fmSkeletonSweep 1.05s linear infinite;}@keyframes fmSkeletonSweep{to{background-position:-220% 0}}
@media(max-width:900px){.btn,.icon-btn,.header-quick,.header-search,.bottom-nav button{min-height:44px;}.icon-btn{min-width:44px;}.fm-touch-active{transform:scale(.93)!important;filter:brightness(.96);}.overlay.open .modal{animation-duration:320ms;}}
@media(prefers-reduced-motion:reduce){.section.fm-section-enter,.section.fm-section-enter .panel,.section.fm-section-enter .stat,.fm-list-refresh .tx,.fm-list-refresh .bill-row,.fm-list-refresh .vault-card,.fm-list-refresh .inv-card,.fm-list-refresh .budget-row,.fm-list-refresh .cat-item{animation:fmReducedFade 120ms ease-out both!important;}@keyframes fmReducedFade{from{opacity:.72}to{opacity:1}}.fm-skeleton-loading .stat::after,.fm-skeleton-loading .panel::after,.fm-skeleton-loading .tx::after,.fm-skeleton-loading .bill-row::after,.fm-skeleton-loading .vault-card::after,.fm-skeleton-loading .inv-card::after{animation:none!important;}}
.fm-skeleton-loading .stat>*,.fm-skeleton-loading .panel>*,.fm-skeleton-loading .tx>*,.fm-skeleton-loading .bill-row>*,.fm-skeleton-loading .vault-card>*,.fm-skeleton-loading .inv-card>*{visibility:hidden!important;}
/* Cores financeiras permanecem semânticas e independentes do tema. */
.account-total{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px;border:1px solid var(--border);color:var(--muted);font-size:12px;}.account-total b{letter-spacing:-.45px;font-variant-numeric:tabular-nums;}.account-manage-actions,.cc-manage-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto;}
.account-total{box-sizing:border-box;width:100%;min-height:74px;align-items:center;padding:16px 18px;border-color:color-mix(in srgb,var(--primary) 24%,var(--app-line));}.account-total span{font-size:13px;font-weight:700;color:var(--muted);}.account-total b{font-size:24px;color:var(--text);}.cc .progress.invoice-progress{height:9px;margin-top:10px;border:1px solid color-mix(in srgb,#00b98e 28%,transparent);background:color-mix(in srgb,#00b98e 12%,var(--app-surface-soft));}.cc .progress.invoice-progress .fill{min-width:3px;box-shadow:0 0 8px color-mix(in srgb,currentColor 25%,transparent);}.desktop-detail-page{max-width:1120px;margin:0 auto;}.desktop-detail-page .detail-topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;}.desktop-detail-page .detail-topbar h2{margin:0;font-size:23px;letter-spacing:-.4px;}.desktop-detail-page .detail-topbar .btn{margin-left:auto;}.desktop-detail-page .invoice-summary{margin-bottom:16px;}.desktop-detail-page .invoice-list-title{margin:18px 0 10px;font-size:15px;font-weight:800;}.desktop-detail-page .detail-history{margin-top:12px;padding:11px 13px;border:1px solid var(--app-line);border-radius:11px;background:var(--app-surface-soft);font-size:12px;color:var(--muted);}.tx-detail-inner-title{display:none;}
@media(max-width:600px){.account-total{min-height:64px;padding:13px 15px;}.account-total b{font-size:21px;}.cc .progress.invoice-progress{height:11px;margin-top:11px;border-radius:8px;}.cc .progress.invoice-progress .fill{border-radius:7px;}}
.progress,.bar-track,.health-bar{height:9px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--app-line));border-radius:8px;background:color-mix(in srgb,var(--primary) 8%,var(--app-surface-soft));box-sizing:border-box;overflow:hidden;}.progress .fill,.bar-track .fill,.health-bar .fill{height:100%;border-radius:7px;box-shadow:0 0 7px color-mix(in srgb,currentColor 20%,transparent);}.vault-card .vactions button{border:1px solid color-mix(in srgb,var(--primary) 35%,var(--app-line));background:color-mix(in srgb,var(--primary) 15%,var(--app-surface-soft));color:var(--text);box-shadow:none;}.vault-card .vactions button:hover{background:color-mix(in srgb,var(--primary) 25%,var(--app-surface-soft));}.vault-card.vault-clickable{cursor:pointer;}.vault-card.vault-clickable:hover{box-shadow:var(--app-shadow);}.vault-history-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--app-line);}.vault-history-row:last-child{border-bottom:0;}.vault-history-row i{width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:color-mix(in srgb,var(--primary) 11%,var(--app-surface-soft));color:var(--primary);}.vault-history-row small{display:block;margin-top:2px;color:var(--muted);}.vault-history-row b.out{color:var(--expense);}@media(max-width:600px){.progress,.bar-track,.health-bar{height:10px;border-radius:8px;}.progress .fill,.bar-track .fill,.health-bar .fill{border-radius:7px;}}
.cc,.vault-card{background:var(--app-surface);color:var(--text);border:1px solid var(--app-line);border-top:3px solid var(--item-color,var(--primary));}.cc .fatura,.account-card .fatura{color:var(--text);}.cc .lim,.account-card .lim{color:var(--muted);opacity:1;}.cc .icon-btn,.vault-card .icon-btn{color:var(--muted)!important;opacity:1!important;}.cc.card-clickable:hover{transform:translateY(-1px);}.cards{gap:14px;}.completion-feedback{position:fixed;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;border-radius:var(--radius-lg);color:var(--text);font-size:12px;font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,-45%) scale(.86);transition:opacity .18s ease,transform .36s cubic-bezier(.2,.9,.25,1);}.completion-feedback i{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--primary);color:#fff;}.completion-feedback.show{opacity:1;transform:translate(-50%,-50%) scale(1);}.completion-feedback.show i{animation:fmCompletionCheck .44s cubic-bezier(.2,.95,.25,1) both;}@keyframes fmCompletionCheck{0%{transform:scale(.45) rotate(-24deg)}65%{transform:scale(1.13) rotate(4deg)}100%{transform:scale(1) rotate(0)}}@media(max-width:600px){.completion-feedback{top:43%;}}@media(prefers-reduced-motion:reduce){.completion-feedback,.completion-feedback.show{transition:none;transform:translate(-50%,-50%);}.completion-feedback.show i{animation:none;}}
.cc,.vault-card{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 11%,var(--app-surface)),var(--app-surface) 58%);}.detail-page-back-icon{display:none;}@media(max-width:600px){#accountStatementOverlay .modal h2,#invoiceOverlay .modal h2{align-items:center;}#accountStatementOverlay .modal h2 .label-icon,#invoiceOverlay .modal h2 .label-icon{font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}#accountStatementOverlay .modal h2 .icon-btn,#invoiceOverlay .modal h2 .icon-btn{margin-left:auto;flex:0 0 auto;background:transparent!important;}#invoiceOverlay .modal-title-row .icon-btn i::after{font-family:"Font Awesome 6 Free";font-weight:900;font-size:15px;}}
.cc,.vault-card{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,var(--app-surface)),var(--app-surface) 68%);}.btn:not(.btn-ghost){background:linear-gradient(135deg,var(--primary),var(--primary-dark));}.detail-page-nav{margin-left:auto;}@media(max-width:600px){#accountStatementOverlay,#invoiceOverlay{padding:0!important;align-items:flex-end!important;}#accountStatementOverlay .modal,#invoiceOverlay .modal{width:100%!important;height:auto!important;max-height:min(92dvh,760px)!important;border-radius:22px 22px 0 0!important;padding:18px 16px calc(17px + env(safe-area-inset-bottom))!important;animation:modal-in .24s cubic-bezier(.22,.8,.25,1)!important;}#accountStatementOverlay .modal h2,#invoiceOverlay .modal h2{min-height:0!important;position:sticky;top:-18px;margin:0 -16px 15px!important;padding:18px 16px 12px;background:var(--card);border-bottom:1px solid var(--border);}.detail-page-back-icon{display:none;}.detail-page-close-icon{display:block;}#invoiceOverlay .modal-title-row .icon-btn i{font-size:inherit;}#invoiceOverlay .modal-title-row .icon-btn i::after{content:none;}}
.mobile-account-access-actions{display:none;}.preference-setting.preference-setting-stack{grid-template-columns:1fr;gap:12px;}.preference-setting-stack .mini-segmented{justify-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}.preference-setting-stack .mini-segmented button{min-height:34px;}.account-card .fatura,.cc .fatura{font-variant-numeric:tabular-nums;}.account-action-page{max-width:680px!important;margin:0 auto;}.account-action-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 16px;}.account-action-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--primary);}.account-action-card{padding:30px;}.account-action-card h2{font-size:23px;letter-spacing:-.5px;margin:14px 0 7px;}.account-action-card>p{max-width:540px;color:var(--muted);line-height:1.52;margin-bottom:24px;}.account-action-icon{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--primary) 14%,var(--app-surface));color:var(--primary);font-size:19px;}.account-action-email{margin:-6px 0 22px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--app-surface-soft);font-size:14px;font-weight:700;color:var(--text);}.account-action-warning{display:flex;align-items:flex-start;gap:9px;margin:-4px 0 22px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--expense) 32%,var(--border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--expense) 7%,var(--app-surface));color:var(--text);font-size:12px;line-height:1.45;}.account-action-warning i{color:var(--expense);margin-top:2px;}@media(max-width:600px){.account-security-modal #accountVerificationSection,.account-security-modal .account-email-section,.account-security-modal .account-password-section,.security-page-body #accountVerificationSection,.security-page-body .account-email-section,.security-page-body .account-password-section{display:none;}.mobile-account-access-actions{display:grid;gap:9px;margin:12px 0;}.mobile-account-access-actions .preference-row{width:100%;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--app-surface-soft);text-align:left;align-items:center;}.mobile-account-access-actions>.preference-row>i{color:var(--muted);font-size:12px;}.account-security-modal #mfaSecuritySection{margin-top:10px;}.account-action-page{padding-top:2px!important;}.account-action-head{margin:2px 0 13px;}.account-action-card{padding:22px 17px;border-radius:16px;}.account-action-card h2{font-size:21px;margin-top:13px;}.account-action-card>p{font-size:13px;margin-bottom:20px;}.account-action-card .modal-actions{margin-top:16px;}.account-action-card .modal-actions .btn{min-height:42px;padding:9px 10px;}#dashboard .cards{gap:10px;}.stat .t{align-items:center;}.stat .v{white-space:nowrap;}.account-card .lim,.cc .lim{font-size:11px;}.account-card .account-name,.cc .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.account-card .fatura,.cc .fatura{letter-spacing:-.45px;}}
/* Relatórios, Avisos e lembretes, Perfil: no desktop voltam a abrir como
   janela flutuante sobre a página atual, em vez de substituir a tela
   inteira — o mobile continua com a página empurrada de sempre (classe
   .mais-window-modal só é adicionada no branch desktop de openReportsModal/
   openNotificationSettings/openProfileHub, nunca junto com .active). */
@media(min-width:901px){
  .account-action-page.mais-window-modal{max-width:none!important;margin:0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;position:fixed;inset:0;z-index:900;padding:30px;background:rgba(6,14,33,.56);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fmModalBackdropIn .18s ease both;}
  .account-action-page.mais-window-modal>.account-action-head{display:none!important;}
  .account-action-page.mais-window-modal>.panel{width:100%;max-width:640px;max-height:min(88vh,760px);overflow:auto;margin:0!important;border-radius:18px;box-shadow:0 30px 70px rgba(6,14,26,.4);animation:fmModalCardIn .2s cubic-bezier(.2,.8,.24,1) both;}
  .account-action-page.mais-window-modal .mais-page-inner-title{display:flex!important;align-items:center;justify-content:space-between;gap:12px;}
  .account-action-page.mais-window-modal .mais-page-inner-title .window-modal-close{flex:0 0 auto;font-size:16px;}
  /* Lançamento clicado numa tabela do computador: janela flutuante (igual
     as outras telas de "Mais"), não mais uma página cheia. #tx-details tem
     DOIS filhos (cabeçalho + corpo) em vez de um .panel só, por isso o
     card fica num wrapper próprio (.tx-detail-modal-card) em vez de mirar
     ">.panel" como o padrão de .account-action-page acima. */
  /* max-width/margin:auto zerados — #tx-details herda "max-width:1120px;
     margin:0 auto" de .desktop-detail-page (pensado pra centralizar a
     página normal), e isso sobrevive mesmo virando position:fixed;inset:0:
     o navegador centraliza a caixa dentro dos 1120/1680px em vez de
     preencher a tela toda, deixando uma faixa sem blur nas telas largas.
     Precisa ser por ID: ".main>.section.desktop-detail-page{max-width:
     1680px!important}" (mais abaixo neste arquivo) tem mais classes na
     seletora e ganhava de ".tx-detail-page.mais-window-modal" mesmo com
     !important dos dois lados. */
  .tx-detail-page.mais-window-modal{display:flex!important;flex-direction:column;align-items:center;justify-content:center;position:fixed;inset:0;z-index:900;padding:30px;background:rgba(6,14,33,.56);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fmModalBackdropIn .18s ease both;}
  #tx-details.mais-window-modal{max-width:none!important;margin:0!important;}
  .tx-detail-page:not(.mais-window-modal) .tx-detail-modal-card{display:contents;}
  .tx-detail-page.mais-window-modal .tx-detail-modal-card{width:100%;max-width:560px;max-height:min(88vh,760px);overflow:auto;border-radius:18px;background:var(--card);box-shadow:0 30px 70px rgba(6,14,26,.4);animation:fmModalCardIn .2s cubic-bezier(.2,.8,.24,1) both;}
  .tx-detail-page.mais-window-modal .tx-detail-modal-card .detail-topbar{display:none!important;}
  .tx-detail-page.mais-window-modal .tx-detail-modal-card .tx-detail-inner-title{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0;}
  .tx-detail-page.mais-window-modal .tx-detail-modal-card .tx-detail-inner-title h2{margin:0;font-size:18px;}
  .tx-detail-page.mais-window-modal .tx-detail-modal-card .tx-detail-inner-title .window-modal-close{flex:0 0 auto;font-size:16px;}
  .tx-detail-page.mais-window-modal .tx-detail-modal-card>#txDetailBody{padding:0 20px 20px;}
  /* A barra lateral, o topo (busca/+/mês/sino) e o botão flutuante "+" são
     fixos e ficam cada um numa camada de composição própria — o blur do
     fundo da janela (backdrop-filter) não alcança esse tipo de camada em
     alguns motores de renderização, deixando os três "vazando" nítidos
     por cima do fundo escurecido. Tentei replicar o mesmo desfoque neles
     via filter, mas isso criava um recorte visível (a borda entre o
     elemento desfocado "na mão" e o fundo desfocado pelo backdrop-filter
     não se mistura — são dois desfoques calculados separadamente). A
     solução que não deixa nenhuma emenda visível é simplesmente esconder
     os três enquanto a janela estiver aberta — o fundo escuro da própria
     janela cobre o espaço deles sem nenhuma quebra. */
  body:has(.mais-window-modal) .sidebar,
  body:has(.mais-window-modal) .main>.topbar,
  body:has(.mais-window-modal) .fab{opacity:0;transition:opacity .18s ease;}
}
@keyframes fmModalBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes fmModalCardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Acesso e páginas de detalhes: composição desktop mais limpa e alinhada. */
@media(min-width:681px){.auth-screen{--card:#172333;--bg:#111b28;--text:#f4f7fb;--muted:#a9b8c8;--border:#2b4058;--input-bg:#111b28;padding:54px 7vw;place-items:stretch;}.auth-shell{width:min(1320px,100%);min-height:620px;margin:auto;grid-template-columns:minmax(0,1.45fr) minmax(390px,.72fr);overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;}.auth-hero{padding:74px 8% 66px;background:transparent;justify-content:center;}.auth-brand{font-size:29px;}.auth-brand .brand-mark{width:48px;height:48px;border-radius:13px;}.auth-hero h1{font-size:32px;letter-spacing:-.8px;margin:32px 0 12px;max-width:430px;}.auth-hero p{max-width:450px;color:#b9c7d7;}.auth-benefits{gap:20px;margin-top:36px;max-width:450px;}.auth-benefits span{gap:13px;font-size:14px;}.auth-benefits i{height:40px;border-radius:var(--radius-md);font-size:16px;}.auth-privacy{position:absolute;bottom:46px;max-width:420px;color:#8395a8;}.auth-panel{align-self:center;min-height:0;margin:0;padding:34px 28px 27px;}.auth-panel h2{color:#fff;text-align:center;font-size:25px;margin-bottom:8px;}.auth-panel .auth-sub{text-align:center;font-size:13px;margin-bottom:22px;}.auth-tabs{background:#202d3d;border:1px solid rgba(255,255,255,.035);margin-bottom:20px;}.auth-tabs button.active{background:#1a2737;color:#fff;box-shadow:none;}.auth-panel input{background:#111a28;border-color:#293b50;color:#f5f8fc;min-height:42px;}.auth-panel input::placeholder{color:#78889b;}.auth-submit{min-height:44px;background:linear-gradient(135deg,var(--primary),#4777c8)!important;box-shadow:none;}.auth-provider{min-height:42px;background:#111a28;border-color:#293b50;color:#eaf0f6;}.auth-provider:hover{background:#172334;border-color:#3b5872;color:#fff;}.auth-divider{margin:18px 0 13px;color:#8395a8;}.auth-legal{color:#8b9bad;}}
@media(min-width:901px){.desktop-detail-page{margin:0;}.desktop-detail-page .detail-topbar{justify-content:flex-start;min-height:46px;margin:0 0 20px;}.desktop-detail-page .detail-topbar>.btn:first-child{margin-left:0;}.desktop-detail-page .detail-topbar h2{margin:0;font-size:24px;}.desktop-detail-page .detail-actions{margin-left:auto;display:flex;align-items:center;gap:9px;}.desktop-detail-page .detail-actions .btn{margin:0;}}
.stat::before,.stat::after{display:none!important;}.stat>*{position:relative;z-index:1;}
/* Cards financeiros permanecem estáveis: o conteúdo continua clicável, sem efeito de elevação. */
.stat,.cc,.account-card,.vault-card,.inv-card{transition:background .2s,color .2s,border-color .2s,box-shadow .2s!important;}.stat:hover,.cc:hover,.account-card:hover,.vault-card:hover,.inv-card:hover{transform:none!important;filter:none!important;}.cc.card-clickable:hover{box-shadow:var(--app-shadow-soft)!important;}.account-card.account-clickable:hover{box-shadow:var(--app-shadow)!important;}
@media(max-width:900px){.mobile-pull-refresh.loading i{animation:fmPullSpin .72s linear infinite;}@keyframes fmPullSpin{to{transform:rotate(360deg);}}.invoice-modal{height:min(92dvh,790px)!important;max-height:92dvh!important;padding-top:16px!important;}.invoice-modal .field select{height:46px!important;min-height:46px!important;}.invoice-modal .invoice-summary .iv{border:0!important;box-shadow:none!important;}.invoice-modal #invoiceList,.invoice-modal #accountStatementList{padding-bottom:8px!important;}}
@media(prefers-reduced-motion:no-preference){button:not(:disabled):active{transform:scale(.975);}.btn:not(:disabled):active{transform:translateY(1px) scale(.98);}.icon-btn:not(:disabled):active{transform:scale(.9);}}
#dashboard>.cards .stat{cursor:default;touch-action:pan-y;-webkit-user-drag:none;transition:none!important;}#dashboard>.cards .stat:hover,#dashboard>.cards .stat:focus,#dashboard>.cards .stat:active{transform:none!important;filter:none!important;box-shadow:0 5px 16px rgba(18,35,48,.045)!important;}.completion-feedback{min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;gap:0!important;}.completion-feedback i{width:52px!important;height:52px!important;font-size:21px!important;box-shadow:0 12px 28px rgba(7,138,114,.32)!important;}.completion-feedback span{display:none!important;}@media(max-width:900px){.completion-feedback{min-width:132px!important;padding:11px 15px!important;border:1px solid color-mix(in srgb,var(--primary) 32%,transparent)!important;border-radius:16px!important;background:color-mix(in srgb,var(--card) 94%,transparent)!important;box-shadow:0 14px 32px rgba(8,22,33,.22)!important;backdrop-filter:blur(12px)!important;gap:9px!important;}.completion-feedback i{width:38px!important;height:38px!important;font-size:1rem!important;}.completion-feedback span{display:block!important;color:var(--text)!important;font-weight:750!important;font-size:.82rem!important;white-space:nowrap!important;}}@media(min-width:901px){.completion-feedback{display:none!important;}}
.tx:has(.amt.in) .dot{background:rgba(55,123,181,.12)!important;}.stat.income .v,#stIncome,.tx .amt.in,.calendar-event.receive,.calendar-agenda-item.receive strong,.vault-history-row b.in{color:var(--income)!important;}@media(min-width:901px){#budget>.topbar{margin-bottom:14px!important;}#budget>.panel{padding:14px!important;}#budget .budget-row{min-height:132px;padding:15px 16px!important;display:flex;flex-direction:column;justify-content:flex-start;border-radius:15px!important;background:var(--app-surface-soft)!important;}#budget .budget-head{align-items:flex-start!important;}#budget .bar-track{margin-top:14px!important;height:8px!important;}}
/* Experiência adaptativa final: área útil de desktop e fluidez de aplicativo no mobile. */
html{scroll-behavior:smooth;}
button,input,select,textarea{font-variant-numeric:tabular-nums;}
.stat .v,
.tx .amt,
.invoice-summary .iv b,
.vault-history-row b,
.cc .lim,
.account-card .lim{font-variant-numeric:tabular-nums;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 42%,transparent);outline-offset:2px;}
@media(min-width:901px){
  .main{min-height:100vh;}
  .main>.topbar{max-width:1760px;min-height:58px;padding-bottom:17px;border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent);}
  .main>.section:not(#dashboard):not(.desktop-detail-page){max-width:1640px;margin-left:auto;margin-right:auto;}
  .main>.section{scroll-margin-top:26px;}
  .month-nav{min-height:44px;}
  .header-search,.header-quick{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .cards{gap:16px;margin-bottom:26px;}
  .stat{min-height:118px;}
  .stat .t{line-height:1.35;}.stat .v{line-height:1.15;margin-top:10px;}
  .panel{margin-bottom:22px;}
  .panel h3{margin-bottom:18px;}
  .grid2{gap:22px;margin-bottom:22px;}
  .tx{min-height:64px;padding:13px 2px;}.tx .act{min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;}
  .overlay{padding:28px;}.overlay .modal{width:min(720px,calc(100vw - 56px));max-height:min(820px,calc(100dvh - 56px));overflow:auto;overscroll-behavior:contain;}
  .overlay .modal:not(.invoice-modal){padding:25px 26px;}
  .overlay .field input,.overlay .field select,.overlay .field textarea{min-height:44px;}
  .overlay .modal-actions{position:sticky;bottom:-25px;margin:22px -26px -25px;padding:14px 26px;background:color-mix(in srgb,var(--card) 94%,transparent);border-top:1px solid var(--app-line);backdrop-filter:blur(12px);}
  .desktop-detail-page{max-width:1640px!important;}
  .desktop-detail-page .detail-topbar{padding-bottom:16px;border-bottom:1px solid var(--app-line);}
}
@media(min-width:901px) and (max-width:1180px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  #dashboard>.cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:900px){
  .main{scrollbar-width:none;}.main::-webkit-scrollbar{display:none;}
  .section{scroll-margin-top:10px;}
  .overlay{overscroll-behavior:contain;}
  .modal{overscroll-behavior:contain;}
}
@media(max-width:600px){
  .main{padding-left:var(--mobile-gutter)!important;padding-right:var(--mobile-gutter)!important;padding-bottom:calc(var(--mobile-bottom-nav-height) + 32px)!important;}
  .section.active{animation:fmSectionIn .2s ease both;}
  @keyframes fmSectionIn{from{transform:translateY(5px)}to{transform:translateY(0)}}
  .main>.topbar{margin-bottom:12px!important;}
  .topbar-actions-row{gap:7px;}
  /* .header-search fica de fora desta regra: ela é escondida no celular
     (max-width:900px, mais acima no arquivo) e esta regra, só por herdar
     "!important", estava revertendo esse esconder e vazando o campo de
     busca (agora um <input> de verdade) pra telas pequenas. */
  .header-quick{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;align-items:center!important;justify-content:center!important;}
  .cards{gap:11px!important;margin-bottom:18px!important;}
  .stat{min-height:92px!important;}
  .stat.balance{min-height:112px!important;padding:16px!important;}
  .stat .t{min-height:20px;line-height:1.25;}.stat .v{line-height:1.12;}
  .filter-tabs{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;overscroll-behavior-x:contain;gap:7px!important;padding:1px 1px 7px!important;margin:0 -1px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch;}
  .filter-tabs::-webkit-scrollbar{display:none;}
  .filter-tabs button,.filter-tabs button:nth-child(5){flex:0 0 auto!important;grid-column:auto!important;min-width:max-content!important;padding:8px 13px!important;font-size:11.5px!important;}
  .tx{min-height:88px;}.tx .dot{width:36px!important;height:36px!important;}.tx .info .meta{font-size:11.5px;}.tx .amt{font-size:15px!important;padding-top:2px;}
  .tx .act{min-width:31px!important;min-height:31px!important;border-radius:9px!important;}
  .modal{max-height:90dvh!important;padding:19px 16px calc(18px + env(safe-area-inset-bottom))!important;}
  .modal h2{font-size:18px!important;line-height:1.25;}.modal h2 .icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;}
  .overlay .field input,.overlay .field select,.overlay .field textarea{min-height:44px!important;font-size:15px!important;}
  .overlay .field label{font-size:12px!important;margin-bottom:6px!important;}
  .modal-actions{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:2;margin:18px -16px calc(-18px - env(safe-area-inset-bottom));padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--card) 95%,transparent);border-top:1px solid var(--app-line);backdrop-filter:blur(14px);}
  .modal-actions .btn{min-height:44px;flex:1;justify-content:center;}
  .cc,.vault-card,.inv-card,.account-card{border-radius:16px!important;}
  .cc .name,.account-card .account-name,.vault-card .vn{font-size:16px!important;}
  .cc .fatura,.account-card .fatura,.vault-card .vamt{font-size:23px!important;line-height:1.15;}
  .bottom-nav button{min-height:52px!important;transform:translateY(4px)!important;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
/* Entrada do produto: transições curtas, sem atrasar o acesso ou a sincronização. */
#appRoot{opacity:0;transition:opacity .28s ease;}
/* Não use transform no contêiner geral: ele descaracteriza elementos fixed, como a barra lateral. */
#appRoot.app-ready{opacity:1;transform:none;}
.auth-screen:not(.auth-resolving) .auth-hero>div,.auth-screen:not(.auth-resolving) .auth-panel{animation:fmAuthEnter .42s cubic-bezier(.2,.82,.25,1) both;}
.auth-screen:not(.auth-resolving) .auth-panel{animation-delay:.05s;}
@keyframes fmAuthEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Rendimento CDI da caixinha: dentro da própria linha .vgoal (não é mais um
   bloco/linha à parte, ver decorateVaultYieldNotes) — só a cor/peso muda
   pra continuar se destacando como um valor positivo. */
.vault-yield-inline{color:var(--income);font-weight:700;}
.vault-yield-inline small{color:var(--muted);font-weight:600;}
@media(prefers-reduced-motion:reduce){#appRoot{opacity:1;transform:none;transition:none;}.auth-screen:not(.auth-resolving) .auth-hero>div,.auth-screen:not(.auth-resolving) .auth-panel{animation:none;}}
/* Navegação e movimento: cada ambiente recebe respostas próprias, sem animar valores financeiros. */
/* BUG REAL: essa é a animação que REALMENTE vale nos títulos de página no
   celular (`.section.active`, mais específica que a `.section` simples lá
   em cima) — a opacidade saindo de .76/.82 (não 1) fazia qualquer print
   tirado durante os 200ms de entrada pegar o título ainda semitransparente,
   misturado com o fundo atrás. Lia como "borrado" mesmo sem ser um blur de
   verdade — e por ser a MESMA animação em toda página do app (Dashboard,
   Relatórios, Assinaturas, etc.), explica o problema aparecer em telas tão
   diferentes entre si, em momentos diferentes. Tirada a opacidade, mantido
   só o leve deslizar (translateY) — texto sempre 100% opaco. */
@keyframes fmDesktopSectionIn{from{transform:translateY(8px)}to{transform:translateY(0)}}
@keyframes fmMobileSectionIn{from{transform:translateY(5px)}to{transform:translateY(0)}}
@media(min-width:901px){
  .section.active{animation:fmDesktopSectionIn .24s cubic-bezier(.2,.8,.24,1) both;}
  .nav-item:hover{padding-left:11px!important;}
  .tool-hub-card,.tool-card,.quick-action,.report-option{transition:transform .2s cubic-bezier(.2,.8,.24,1),background .2s ease,border-color .2s ease,box-shadow .2s ease!important;}
  .tool-hub-card:hover,.tool-card:hover,.quick-action:hover,.report-option:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,35,48,.09);}
  .btn,.icon-btn{transition:transform .16s cubic-bezier(.2,.8,.24,1),box-shadow .2s ease,background .2s ease,border-color .2s ease!important;}
  .btn:active,.icon-btn:active{transform:scale(.975)!important;}
  .stat,.cc,.account-card,.vault-card,.inv-card{transform:none!important;}
  .stat:hover,.cc:hover,.account-card:hover,.vault-card:hover,.inv-card:hover{transform:none!important;}
}
@media(max-width:900px){
  .sidebar{transition:transform .28s cubic-bezier(.2,.82,.24,1)!important;will-change:transform;}
  .sidebar-backdrop{transition:opacity .22s ease!important;}
  .section.active{animation:fmMobileSectionIn .2s cubic-bezier(.2,.8,.24,1) both;}
  .btn,.icon-btn,.bottom-nav button{transition:transform .14s cubic-bezier(.2,.82,.24,1),background .18s ease,color .18s ease,box-shadow .18s ease!important;-webkit-tap-highlight-color:transparent;}
  .btn:active,.icon-btn:active{transform:scale(.965)!important;}
  .bottom-nav button:active .ico{transform:scale(.9);}
  .nav-item,.tool-hub-card,.tool-card,.quick-action,.report-option{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease!important;-webkit-tap-highlight-color:transparent;}
  .nav-item:active,.tool-hub-card:active,.tool-card:active,.quick-action:active,.report-option:active{background:color-mix(in srgb,var(--primary) 9%,var(--app-surface))!important;}
  .stat,.cc,.account-card,.vault-card,.inv-card{transform:none!important;}
}
@media(prefers-reduced-motion:reduce){
  .section.active,.tool-hub-card,.tool-card,.quick-action,.report-option,.sidebar{animation:none!important;transition:none!important;}
}
/* Detalhamento de categorias: leitura confortável e o mesmo seletor do painel no celular. */
@media(max-width:600px){
  .category-detail-page .dashboard-category-subtitle{font-size:13.5px!important;line-height:1.4;}
  .category-detail-page .category-detail-row{padding:13px!important;}
  .category-detail-page .category-detail-row-head strong,.category-detail-page .category-detail-row-head b{font-size:14px!important;}
  .category-detail-page .category-detail-share{font-size:12px!important;}
  .category-detail-page .category-detail-subs>div,.category-detail-page .category-detail-subs b{font-size:12.5px!important;}
}
@media(max-width:600px){
  /* Resumos de conta e fatura: a hierarquia de valores acompanha o restante do aplicativo. */
  .invoice-modal .invoice-summary{gap:8px!important;}
  .invoice-modal .invoice-summary .iv{padding:10px 9px!important;}
  .invoice-modal .invoice-summary .iv span{font-size:12px!important;line-height:1.25;}
  .invoice-modal .invoice-summary .iv b{font-size:16px!important;line-height:1.22;}
  .invoice-modal .invoice-summary .iv b[style]{font-size:14px!important;}
  /* Compromissos usam a mesma leitura leve e compacta da lista de recorrentes. */
  #bills .bill-row{grid-template-columns:38px minmax(0,1fr) auto!important;grid-template-areas:"icon info actions" "icon footer actions"!important;gap:5px 9px!important;min-height:0!important;margin:0!important;padding:11px 0!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
  #bills .mobile-swipe-delete{margin:0!important;border-radius:0!important;background:transparent!important;}
  #bills .bill-row .bn .t1{font-size:14px!important;}
  #bills .bill-row .bn .t2{font-size:11px!important;line-height:1.3!important;}
  #bills .bill-row .bill-footer{position:static!important;grid-area:footer!important;align-self:auto!important;justify-content:flex-start!important;}
  #bills .bill-row .bill-amount{font-size:14px!important;text-align:left!important;}
  #bills .bill-row .bill-actions{gap:3px!important;align-self:center!important;}
  #bills .bill-row .bill-actions .icon-btn{width:36px!important;min-width:36px!important;height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:11px!important;}
  /* Busca, importação e filtros formam uma única linha de ações. */
  #transactions .search-bar .fg input{height:42px!important;min-height:42px!important;box-sizing:border-box;}
  #transactions .search-bar .tx-import-statement,#transactions .search-bar .tx-filter-trigger{display:inline-flex!important;flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:42px!important;align-items:center!important;justify-content:center!important;padding:0!important;box-sizing:border-box;}
  #transactions .search-bar .tx-import-statement span{display:none!important;}
  #transactions .search-bar .tx-import-statement i{margin:0!important;}
  /* A caixinha abre como página nativa, mantendo o retorno e as ações no cabeçalho. */
  #vault-details.desktop-detail-page{max-width:none!important;margin:0!important;}
  #vault-details .detail-topbar{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-bottom:15px!important;padding-bottom:12px!important;border-bottom:1px solid var(--app-line)!important;}
  #vault-details .detail-topbar>.btn:first-child{order:0;margin:0!important;padding-left:0!important;}
  #vault-details .detail-topbar h2{order:1;flex:1 1 auto;margin:0!important;font-size:19px!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #vault-details .detail-actions{order:2;display:flex;gap:7px;margin-left:auto;}
  #vault-details .detail-actions .btn{margin:0!important;min-height:38px;padding:8px 10px;font-size:11px;}
}
@media(min-width:901px){
  #transactions .search-bar .tx-filter-trigger{order:2;}
  #transactions .search-bar .tx-import-statement{order:3;}
}
/* Visual 2: identidade visual principal do FinMoney. O Visual 1 está salvo na tag visual-1 do GitHub. */
html.design-lab{--primary:#305bf3!important;--primary-dark:#1c3fc7!important;--income:#00b98e!important;--expense:#e45768!important;--transfer:#4a82df!important;--invest:#8062d4!important;--vault:#d99235!important;--bg:#f4f7ff!important;--card:#ffffff!important;--text:#17213d!important;--muted:#72809b!important;--border:#e3eaf8!important;--input-bg:#f8faff!important;--app-surface:#ffffff!important;--app-surface-soft:#f5f8ff!important;--app-line:#e2e9f6!important;--app-shadow:0 18px 42px rgba(34,61,112,.13)!important;--app-shadow-soft:0 9px 24px rgba(34,61,112,.09)!important;}
html.design-lab[data-theme="dark"]{--bg:#0a1124!important;--card:#111a32!important;--text:#f5f7ff!important;--muted:#9ca9c3!important;--border:#273452!important;--input-bg:#18233e!important;--app-surface:#111a32!important;--app-surface-soft:#17233d!important;--app-line:#2b3958!important;--app-shadow:0 20px 48px rgba(0,0,0,.32)!important;--app-shadow-soft:0 10px 28px rgba(0,0,0,.24)!important;}
html.design-lab body{background:radial-gradient(circle at 86% -10%,rgba(90,141,225,.18),transparent 29%),radial-gradient(circle at 8% 18%,rgba(131,169,229,.12),transparent 26%),var(--bg)!important;letter-spacing:-.16px;}
html.design-lab .sidebar{background:linear-gradient(180deg,#0f1630 0%,#161f45 100%)!important;border-right:1px solid rgba(255,255,255,.09)!important;box-shadow:10px 0 35px rgba(16,30,66,.18)!important;}
html.design-lab .sidebar .logo{padding:16px 18px 10px!important;border-color:rgba(255,255,255,.12)!important;}
html.design-lab .brand-mark{background:linear-gradient(145deg,#6fbafc,#305bf3)!important;box-shadow:0 8px 18px rgba(48,91,243,.26)!important;}
html.design-lab .nav-group-label{color:#849ac5!important;letter-spacing:1.25px!important;}
html.design-lab .nav-item{margin:3px 10px!important;border-radius:var(--radius-md)!important;color:#b9c8e2!important;transition:background .18s ease,color .18s ease!important;}
/* No computador, com todos os grupos de navegação abertos (nada colapsa),
   16 itens + rótulos de grupo + cabeçalho + rodapé passavam da altura da
   tela em resoluções comuns (900px) — "Sair da conta" ficava sempre a um
   scroll de distância, o que lia como "cortado". Levemente mais compacto
   fecha essa conta sem apertar demais a leitura. */
@media(min-width:901px){
  html.design-lab .sidebar .logo{padding:15px 18px 9px!important;}
  /* "Sair da conta" já vive como card dedicado em Ferramentas — no menu
     lateral do computador fica só o essencial (navegação + tema). */
  html.design-lab .sidebar-footer .quick-logout{display:none!important;}
  html.design-lab .sidebar-footer{gap:5px!important;}
  html.design-lab .theme-btn,html.design-lab .install-btn,html.design-lab .sidebar-footer .quick-logout{min-height:33px!important;padding:7px!important;}
}
html.design-lab .nav-item .ico{color:#aec1df!important;}
html.design-lab .nav-item.active{background:linear-gradient(100deg,rgba(48,91,243,.36),rgba(48,91,243,.14))!important;border-left-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(171,200,240,.14)!important;}
html.design-lab .nav-item.active .ico{color:#c5d8f5!important;}
html.design-lab .sidebar-footer{border-color:rgba(255,255,255,.12)!important;}
html.design-lab .theme-btn,html.design-lab .quick-logout{border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.07)!important;border-radius:var(--radius-md)!important;}
/* A barra lateral era sempre escura, mesmo no tema claro — a única parte do
   app que não seguia o tema (o resto, incluindo a barra inferior do
   celular, já usa var(--card)/var(--text) e por isso já acompanhava). Essas
   regras dão à barra lateral a mesma cara clara que a barra inferior do
   celular já tinha, só ativas quando o tema é claro — no escuro, nada muda. */
html.design-lab[data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff 0%,#eef3fc 100%)!important;border-right:1px solid var(--border)!important;box-shadow:10px 0 35px rgba(16,30,66,.06)!important;}
html.design-lab[data-theme="light"] .sidebar .logo{border-color:var(--border)!important;color:var(--text)!important;}
html.design-lab[data-theme="light"] .sidebar-user-name{color:var(--text)!important;}
html.design-lab[data-theme="light"] .nav-group-label{color:#8493b3!important;}
html.design-lab[data-theme="light"] .nav-item{color:#465379!important;}
html.design-lab[data-theme="light"] .nav-item .ico{color:#5b6b90!important;}
html.design-lab[data-theme="light"] .nav-item.active{background:linear-gradient(100deg,rgba(48,91,243,.16),rgba(48,91,243,.06))!important;color:var(--primary)!important;box-shadow:inset 0 0 0 1px rgba(48,91,243,.16)!important;}
html.design-lab[data-theme="light"] .nav-item.active .ico{color:var(--primary)!important;}
html.design-lab[data-theme="light"] .sidebar-footer{border-color:var(--border)!important;}
html.design-lab[data-theme="light"] .theme-btn,html.design-lab[data-theme="light"] .quick-logout{border:1px solid var(--border)!important;background:var(--app-surface-soft)!important;color:var(--text)!important;}
html.design-lab .main{background:transparent!important;}
html.design-lab .topbar{margin-bottom:30px!important;padding-bottom:17px;border-bottom:1px solid var(--border);}
html.design-lab .topbar h1{font-size:29px!important;letter-spacing:-1px!important;}
html.design-lab .month-nav{padding:5px 7px!important;border:1px solid var(--border)!important;border-radius:15px!important;background:color-mix(in srgb,var(--card) 88%,transparent)!important;box-shadow:0 8px 20px rgba(37,74,138,.07)!important;}
html.design-lab .month-nav .label{min-width:144px!important;font-weight:780!important;}
html.design-lab .today-btn,html.design-lab .header-quick,html.design-lab .desktop-new-tx{border-radius:var(--radius-md)!important;background:linear-gradient(145deg,#5a8de1,#4777c8)!important;box-shadow:0 8px 17px rgba(71,119,200,.2)!important;}
html.design-lab .header-search{border-radius:var(--radius-md)!important;background:var(--card)!important;box-shadow:0 7px 18px rgba(37,74,138,.08)!important;}
/* Botão "+" (ações rápidas) removido do computador a pedido. */
html.design-lab .header-quick{display:none!important;}
html.design-lab .stat,html.design-lab .panel,html.design-lab .tool-card{border:1px solid var(--border)!important;border-radius:22px!important;box-shadow:var(--app-shadow-soft)!important;background:color-mix(in srgb,var(--card) 96%,#eef4ff)!important;}
html.design-lab .stat{padding:19px 20px!important;overflow:hidden!important;}
html.design-lab .stat::before{top:15px!important;bottom:15px!important;width:4px!important;border-radius:0 6px 6px 0!important;opacity:1!important;}
html.design-lab .stat .t{font-size:12px!important;font-weight:750!important;}
html.design-lab .stat .v{font-size:26px!important;font-weight:800!important;letter-spacing:-1px!important;}
html.design-lab .stat.balance .v{font-size:31px!important;}
html.design-lab .panel{padding:22px!important;}
html.design-lab .panel h3{font-size:17px!important;font-weight:800!important;}
html.design-lab .cc,html.design-lab .vault-card{border:1px solid color-mix(in srgb,var(--item-color) 24%,var(--border))!important;border-radius:20px!important;box-shadow:var(--app-shadow-soft)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--item-color) 17%,var(--card)),var(--card) 58%)!important;}
html.design-lab .account-total{border-radius:var(--radius-lg)!important;background:linear-gradient(135deg,rgba(55,123,181,.14),var(--card))!important;}
html.design-lab .progress{height:8px!important;border-radius:99px!important;background:color-mix(in srgb,var(--muted) 16%,transparent)!important;overflow:hidden!important;}
html.design-lab .progress .fill{border-radius:inherit!important;}
html.design-lab .btn{border-radius:var(--radius-md)!important;background:linear-gradient(145deg,#5a8de1,#4777c8)!important;box-shadow:0 7px 16px rgba(71,119,200,.2)!important;}
html.design-lab .btn-ghost{background:var(--app-surface-soft)!important;color:var(--text)!important;border:1px solid var(--border)!important;box-shadow:none!important;}
html.design-lab .icon-btn{border-radius:10px!important;}
html.design-lab input,
html.design-lab select,
html.design-lab textarea{border-color:var(--border)!important;border-radius:13px!important;background:var(--input-bg)!important;}
html.design-lab .overlay{background:rgba(6,14,33,.56)!important;backdrop-filter:blur(8px)!important;}
html.design-lab .modal{border-radius:24px!important;border-color:var(--border)!important;box-shadow:var(--app-shadow)!important;}
html.design-lab .bottom-nav{border-color:var(--border)!important;background:color-mix(in srgb,var(--card) 94%,transparent)!important;backdrop-filter:blur(18px)!important;}
html.design-lab .bottom-nav button.active{color:#2865e5!important;}
html.design-lab .fab{background:linear-gradient(145deg,#5a8de1,#4777c8)!important;box-shadow:0 12px 26px rgba(71,119,200,.28)!important;}
html.design-lab .auth-screen{background:radial-gradient(circle at 12% 16%,rgba(59,130,246,.25),transparent 30%),linear-gradient(135deg,#0a1430,#152c61)!important;}
html.design-lab .auth-panel{border:1px solid rgba(157,190,255,.22)!important;border-radius:26px!important;box-shadow:0 24px 60px rgba(1,8,30,.26)!important;}
@media(min-width:901px){html.design-lab .sidebar{width:248px!important;}html.design-lab .main{margin-left:248px!important;width:calc(100% - 248px)!important;max-width:calc(100% - 248px)!important;padding:34px 42px!important;}html.design-lab body.sidebar-collapsed .sidebar{width:82px!important;}html.design-lab body.sidebar-collapsed .main{margin-left:82px!important;width:calc(100% - 82px)!important;max-width:calc(100% - 82px)!important;}
  /* O botão "+" flutuante fica fixo no canto inferior direito; sem essa
     folga o conteúdo final da página (última linha de uma lista, gráfico
     etc.) fica escondido atrás dele. */
}
/* O cabeçalho do celular já traz a própria folga do topo (28px + barra de
   status). Os 16px de padding do .main somavam por cima só no app instalado
   (no Safari a barra de status não conta). Mesmo recuo que .detail-topbar usa. */
@media(max-width:900px){html.design-lab .main>.topbar{margin-top:-16px!important;}}
/* Dashboard no celular: o cabeçalho só tem a linha do mês/agenda/sino (sem
   título), então os 13px + 19px de folga embaixo dela viravam um vão vazio
   antes da saudação. */
@media(max-width:600px){html.design-lab .main:has(>#dashboard.section.active)>.topbar{padding-bottom:2px!important;margin-bottom:6px!important;}}
@media(max-width:900px){html.design-lab .main{padding:16px 15px calc(80px + env(safe-area-inset-bottom))!important;padding-bottom:calc(80px + var(--safe-bottom,env(safe-area-inset-bottom)))!important;}html.design-lab .topbar{margin-bottom:19px!important;padding-bottom:13px!important;}html.design-lab .month-nav{border-radius:16px!important;}html.design-lab .stat{border-radius:20px!important;padding:15px!important;}html.design-lab .stat.balance .v{font-size:29px!important;}html.design-lab .panel{padding:17px!important;border-radius:20px!important;}html.design-lab .cc,html.design-lab .vault-card{border-radius:17px!important;}}
@media(max-width:600px){
  html.design-lab body{background:radial-gradient(circle at 96% 0,rgba(67,128,255,.17),transparent 25%),var(--bg)!important;}
  html.design-lab .sidebar{background:linear-gradient(180deg,#101a38,#172852)!important;}
  html.design-lab[data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff,#eef3fc)!important;}
  html.design-lab .topbar{gap:10px!important;align-items:center!important;}
  html.design-lab .page-heading{gap:9px!important;}
  html.design-lab .topbar h1{font-size:24px!important;letter-spacing:-.8px!important;}
  html.design-lab .greeting{font-size:12px!important;max-width:48vw;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab .month-nav{min-height:46px!important;padding:5px 6px!important;box-shadow:0 8px 18px rgba(37,74,138,.08)!important;}
  html.design-lab .month-nav .label{min-width:0!important;font-size:14px!important;}
  html.design-lab #dashboard>.cards{gap:10px!important;margin-bottom:15px!important;}
  html.design-lab #dashboard>.cards .stat{min-height:82px!important;padding:14px!important;}
  html.design-lab #dashboard>.cards .stat.balance{min-height:108px!important;padding:16px!important;}
  html.design-lab .stat .t{font-size:11px!important;gap:6px!important;}
  html.design-lab .stat .v{margin-top:7px!important;font-size:21px!important;}
  html.design-lab .stat.balance .v{font-size:29px!important;}
  html.design-lab .panel{margin-bottom:14px!important;padding:16px!important;}
  html.design-lab .panel h3{margin-bottom:13px!important;font-size:16px!important;}
  html.design-lab .cc,html.design-lab .vault-card{padding:15px!important;margin-bottom:12px!important;}
  html.design-lab .cc .fatura,html.design-lab .vault-card .vamt{font-size:22px!important;}
  html.design-lab .tx{padding:12px 0!important;gap:10px!important;}
  html.design-lab .tx .dot{border-radius:var(--radius-md)!important;}
  html.design-lab .tx .info .desc{font-size:13px!important;}
  html.design-lab .fab{width:60px!important;height:60px!important;right:18px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;}
  html.design-lab .type-toggle{border-radius:15px!important;}
}
/* Mobile: o cabeçalho acompanha a rolagem, e a gaveta lateral não desliza na horizontal. */
@media(max-width:900px){
  #sidebar{overflow-x:hidden!important;overscroll-behavior-x:none!important;touch-action:pan-y!important;}
  #sidebar *{touch-action:pan-y!important;}
}
/* Refinamentos consistentes para leitura financeira e uso no celular. */
@media(max-width:600px){
  #recList .cat-item{background:transparent!important;border-radius:0!important;box-shadow:none!important;padding-inline:0!important;}
  #category-details .dashboard-category-subtitle{text-align:center;margin:9px auto 12px!important;font-size:13px!important;line-height:1.4;}
  #recentList .tx{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y;}
  /* Pressionar e segurar não deve abrir o menu do navegador (copiar, pesquisar,
     traduzir) em nenhum lugar do app — toques em botões, listas e gráficos
     continuam funcionando normalmente. Campos de formulário continuam
     selecionáveis, senão o usuário não consegue selecionar o que digitou. */
  body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}
  html.design-lab #investments>.cards .stat .v,
  html.design-lab #patrimony .stat .v,
  html.design-lab #bills .stat .v{font-size:21px!important;}
  .dashboard-alerts-modal .alert{align-items:center!important;}
  .dashboard-alerts-modal .alert>i{margin:0!important;align-self:center!important;}
  #transactions .panel{overflow:hidden;}
  #txList .tx-swipe .tx{border-radius:0!important;}
  html,body,.main{overscroll-behavior-x:none!important;}
}
/* Detalhes de conta e fatura: cabeçalho compacto e alinhado à esquerda no celular. */
@media(max-width:600px){
  #card-details.desktop-detail-page .detail-topbar,
  #account-details.desktop-detail-page .detail-topbar{
    justify-content:flex-start!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
    margin-bottom:14px!important;
  }
  #card-details.desktop-detail-page .detail-topbar>.btn:first-child,
  #account-details.desktop-detail-page .detail-topbar>.btn:first-child{
    flex:0 0 auto!important;
    margin-left:0!important;
    padding:0!important;
    width:26px!important;
    height:26px!important;
    min-height:0!important;
    font-size:0!important;
    white-space:nowrap!important;
    opacity:.5!important;
    color:var(--muted)!important;
  }
  #card-details.desktop-detail-page .detail-topbar>.btn:first-child i,
  #account-details.desktop-detail-page .detail-topbar>.btn:first-child i{
    font-size:14px!important;
  }
  #card-details.desktop-detail-page .detail-topbar h2,
  #account-details.desktop-detail-page .detail-topbar h2{
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
    font-size:17px!important;
    line-height:1.2!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #card-details.desktop-detail-page .detail-topbar h2 .label-icon,
  #account-details.desktop-detail-page .detail-topbar h2 .label-icon{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}
/* Desktop: densidade adaptativa para manter a interface inteira e legível em telas menores. */
@media(min-width:901px){
  :root{--fm-desktop-card-number:clamp(20px,1.25vw,24px);}
  html.design-lab .main{min-width:0!important;overflow-x:clip!important;}
  html.design-lab .main>.section{min-width:0!important;}
  html.design-lab #dashboard>.cards,
  html.design-lab #bills>.cards,
  html.design-lab #investments>.cards,
  html.design-lab #patrimony>.cards{gap:14px!important;}
  html.design-lab #patrimony>.cards{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
  html.design-lab #dashboard>.cards .stat .v,
  html.design-lab #bills>.cards .stat .v,
  html.design-lab #investments>.cards .stat .v,
  html.design-lab #patrimony>.cards .stat .v,
  html.design-lab #compare .report-summary .summary-item b{font-size:var(--fm-desktop-card-number)!important;line-height:1.12!important;letter-spacing:-.65px!important;}
  html.design-lab #dashboard>.cards .stat.balance .v,
  html.design-lab #patrimony>.cards .stat.balance .v{font-size:var(--fm-desktop-card-number)!important;}
  html.design-lab #compare .report-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  html.design-lab #accountList,
  html.design-lab #cardList,
  html.design-lab #vaultList,
  html.design-lab #invList{display:grid!important;gap:16px!important;align-items:start!important;}
  /* Investimentos: cards da mesma linha esticam pra mesma altura (start
     deixava um "degrau" quando um card tem uma linha a mais que os outros,
     ex.: histórico de resgate) — accountList/cardList/vaultList continuam
     com align-items:start de propósito (lá, esticar poderia deixar um vão
     grande quando só um item tem conteúdo extra, ex.: poupança aninhada). */
  html.design-lab #invList,
  html.design-lab #cardList{align-items:stretch!important;}
  html.design-lab #accountList>.panel,
  html.design-lab #accountList>.fm-empty-state,
  html.design-lab #cardList>.panel,
  html.design-lab #vaultList>.panel,
  html.design-lab #invList>.panel{grid-column:1/-1!important;}
  /* #vaultList virou [título "Outras caixinhas" + a fileira de cards], não
     mais cards soltos direto — sem isso os dois viravam "itens" do grid
     genérico acima (repeat(auto-fit,minmax(360px,1fr))) e ficavam lado a
     lado em vez de um embaixo do outro. */
  html.design-lab #vaultList>.vault-others-title,
  html.design-lab #vaultList>.vault-others-grid{grid-column:1/-1!important;}
  html.design-lab #accountList>.cc,
  html.design-lab #cardList>.cc,
  html.design-lab #vaultList>.vault-card,
  html.design-lab #invList>.inv-card{margin-bottom:0!important;}
}
@media(min-width:901px) and (max-width:1180px){
  html.design-lab .sidebar{width:218px!important;}
  html.design-lab .main{margin-left:218px!important;padding:25px 24px 38px!important;}
  html.design-lab body.sidebar-collapsed .sidebar{width:72px!important;}
  html.design-lab body.sidebar-collapsed .main{margin-left:72px!important;}
  html.design-lab .topbar h1{font-size:26px!important;}
  html.design-lab .month-nav .label{min-width:116px!important;}
  html.design-lab .grid2{gap:15px!important;}
}
/* A confirmação de atualização móvel é sempre verde, independente da cor do tema visual. */
@media(max-width:900px){
  .mobile-pull-refresh.loading{color:#00b98e!important;border-color:rgba(0,185,142,.68)!important;box-shadow:0 11px 28px rgba(0,185,142,.2)!important;}
  .mobile-pull-refresh.loading i{color:#00b98e!important;}
  .mobile-edge-gesture-guard{display:block;position:fixed;z-index:5000;top:0;right:0;bottom:0;width:10px;background:transparent;touch-action:none;-webkit-user-select:none;user-select:none;}
  .mobile-edge-gesture-guard-left{right:auto;left:0;}
}
@media(min-width:901px){
  /* Recolhida, a sidebar do design-lab não zerava o texto dos itens (só a
     regra antiga fazia isso) — o texto ficava visível espremido em cima do
     ícone, sobrepondo tudo. font-size:0 no item some com o texto (nó de
     texto solto, sem span próprio) sem afetar o ícone, que recebe seu
     próprio font-size explícito logo abaixo. */
  html.design-lab body.sidebar-collapsed .sidebar .nav-item.nav-item{min-height:37px!important;margin:1px 8px!important;padding:8px 0!important;font-size:0!important;gap:0!important;white-space:nowrap!important;overflow:hidden!important;}
  body.sidebar-collapsed .sidebar .nav-item .ico{font-size:15px!important;}
  html.design-lab body.sidebar-collapsed .sidebar .nav-group-label.nav-group-label{font-size:0!important;height:8px!important;margin:9px 0 0!important;padding:0!important;overflow:hidden!important;}
  html.design-lab body.sidebar-collapsed .sidebar .logo.sidebar-user{padding:12px 8px!important;justify-content:center!important;}
  html.design-lab body.sidebar-collapsed .sidebar .sidebar-user-profile{flex:0 0 auto!important;justify-content:center!important;}
  /* Atual/Fechamento: some do corpo do Dashboard e reaparece dentro da
     barra do topo (movido de lugar via JS, moveDashboardViewSwitchToTopbar),
     só quando o Dashboard é a seção ativa. */
  html.design-lab #dashCfgSlot{display:none!important;}
  /* Título do widget não recolhe mais no computador (ver toggleDashboardWidget) — tira o cursor de "clicável" pra não confundir. */
  html.design-lab #dashboard .collapsible-widget .collapse-trigger{cursor:default!important;}
  /* Sem a animação de "levantar" ao passar o mouse nas linhas de Objetivos
     financeiros — elas não são clicáveis, só mostram progresso. */
  html.design-lab #goalsBox .budget-row:hover{transform:none!important;box-shadow:none!important;border-color:transparent!important;}
  html.design-lab #dashboard>.dashboard-controls{display:none!important;}
  html.design-lab .topbar-actions-row .dashboard-view-switch{display:none!important;order:-1!important;margin:0 4px 0 0!important;height:44px!important;align-items:center!important;}
  html.design-lab .main:has(>#dashboard.section.active) .topbar-actions-row .dashboard-view-switch{display:flex!important;}
  /* Busca de lançamento (campo de busca global do topo) escondida no
     Dashboard — pedido explícito, pra não duplicar a busca que já existe
     na tela Lançamentos. Continua disponível normalmente nas telas onde
     não foi escondida. */
  html.design-lab .main:has(>#dashboard.section.active) .topbar-actions-row .header-search{display:none!important;}
  /* A pílula de mês da barra do topo foi removida a pedido — Cartões,
     Contas a pagar/receber, Calendário, Orçamento e Comparativo ficam só
     com o seletor de mês simples (setas), igual Lançamentos: busca global,
     "+" e sino somem, sobrando o mês ao lado de Exportar/Novo. */
  html.design-lab .main:has(>#cards-sec.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#cards-sec.section.active) .topbar-actions-row .dashboard-alert-trigger,
  html.design-lab .main:has(>#bills.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#bills.section.active) .topbar-actions-row .dashboard-alert-trigger,
  html.design-lab .main:has(>#calendar.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#calendar.section.active) .topbar-actions-row .dashboard-alert-trigger,
  html.design-lab .main:has(>#budget.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#budget.section.active) .topbar-actions-row .dashboard-alert-trigger,
  html.design-lab .main:has(>#compare.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#compare.section.active) .topbar-actions-row .dashboard-alert-trigger{display:none!important;}
  /* Contas e Gastos formiga têm seu próprio "+Novo" no corpo da página —
     a barra do topo fica só com o seletor de mês simples, sem vizinhos
     (busca, "+", sino e os botões de ação somem, já que duplicariam o que
     a própria página já oferece). */
  html.design-lab .main:has(>#accounts.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#accounts.section.active) .topbar-actions-row .header-quick,
  html.design-lab .main:has(>#accounts.section.active) .topbar-actions-row .dashboard-alert-trigger,
  html.design-lab .main:has(>#accounts.section.active) .topbar-actions-row .desktop-secondary-action,
  html.design-lab .main:has(>#accounts.section.active) .topbar-actions-row .desktop-new-tx,
  html.design-lab .main:has(>#ants.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#ants.section.active) .topbar-actions-row .header-quick,
  html.design-lab .main:has(>#ants.section.active) .topbar-actions-row .dashboard-alert-trigger,
  html.design-lab .main:has(>#ants.section.active) .topbar-actions-row .desktop-secondary-action,
  html.design-lab .main:has(>#ants.section.active) .topbar-actions-row .desktop-new-tx{display:none!important;}
  html.design-lab .main:has(>#accounts.section.active) .topbar-actions-row,
  html.design-lab .main:has(>#ants.section.active) .topbar-actions-row{display:flex!important;}
  /* Mesma pílula em Relatórios (dentro do cartão "Período") e no topo do
     Dashboard — antes Relatórios usava o estilo genérico (sem ser pílula
     de verdade), o que fazia parecer que o clique não fazia nada. */
  /* Mesmo padrão visual da pílula "Todos/Receitas/Despesas/..." de
     Lançamentos (.filter-tabs button, styles.css~266): cada opção é uma
     pílula própria (fundo+sombra), sem "trilho" compartilhado por trás — em
     vez do segmented-control anterior (um trilho só, opção ativa só ganhava
     um fundo mais claro dentro dele). Também um pouco mais larga (padding
     maior + gap de 8px entre as pílulas, igual .filter-tabs, em vez de 2px). */
  html.design-lab .topbar-actions-row .dashboard-view-options,
  html.design-lab #reportsPeriodPanel .dashboard-view-options{display:inline-flex!important;align-items:center!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;gap:8px!important;}
  html.design-lab .topbar-actions-row .dashboard-view-options button,
  html.design-lab #reportsPeriodPanel .dashboard-view-options button{height:36px!important;padding:0 20px!important;border-radius:20px!important;font-size:13px!important;font-weight:600!important;color:var(--muted)!important;background:var(--card)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;}
  html.design-lab .topbar-actions-row .dashboard-view-options button.active,
  html.design-lab #reportsPeriodPanel .dashboard-view-options button.active{background:var(--primary)!important;color:#fff!important;}
  html.design-lab .topbar-actions-row .dashboard-view-options button[data-dashboard-view="projected"].active,
  html.design-lab #reportsPeriodPanel .dashboard-view-options button[data-dashboard-view="projected"].active{background:#eab308!important;color:#fff!important;}
  body.sidebar-collapsed .sidebar-footer{gap:7px!important;}
  body.sidebar-collapsed .sidebar-footer .theme-btn,
  body.sidebar-collapsed .sidebar-footer .quick-logout{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;}
  body.sidebar-collapsed .sidebar-footer button i{font-size:13px!important;}
  body.sidebar-collapsed .sidebar-collapse{width:26px!important;height:26px!important;}
  html.design-lab .main>.topbar,
  html.design-lab .main>.section:not(.mais-window-modal){width:min(100%,1680px)!important;margin-left:auto!important;margin-right:auto!important;}
  html.design-lab .main>.section.desktop-detail-page{max-width:1680px!important;}
}
/* Acabamentos exclusivos do desktop: carregamento centralizado, navegação viva e área útil compacta. */
@media(min-width:681px){
  .auth-screen.auth-resolving .auth-loading .brand-mark{margin:0!important;}
  .auth-screen.auth-resolving .auth-loading strong,.auth-screen.auth-resolving .auth-loading span{margin:0!important;line-height:1.25!important;}
  .auth-cookie-notice{position:fixed;z-index:1210;right:28px;bottom:26px;display:grid;gap:12px;width:min(520px,calc(100vw - 56px));padding:14px 15px;border:1px solid rgba(157,190,255,.22);border-radius:16px;background:rgba(18,32,62,.96);box-shadow:0 18px 46px rgba(0,0,0,.28);color:#d9e4f6;font-size:12px;line-height:1.42;animation:fmCookieNoticeIn .28s cubic-bezier(.2,.82,.25,1) both;}
  .auth-cookie-notice.hidden{display:none!important;}
  .auth-cookie-notice>i{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:rgba(55,123,181,.2);color:#8cb7ff;}
  .auth-cookie-notice p{margin:0;}.auth-cookie-notice a{color:#8cb7ff;font-weight:750;}.auth-cookie-notice button{padding:8px 12px;border-radius:9px;background:#377bb5;color:#fff;font-weight:800;font-size:12px;white-space:nowrap;transition:transform .16s ease,background .16s ease;}.auth-cookie-notice button:hover{background:#4c8dca;transform:translateY(-1px);}
  @keyframes fmCookieNoticeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  html.design-lab .sidebar .nav-item{transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease!important;}
  html.design-lab .sidebar .nav-item:hover{transform:translateX(4px);background:rgba(115,156,255,.16)!important;box-shadow:inset 0 0 0 1px rgba(145,182,255,.1);}
  html.design-lab body.sidebar-collapsed .sidebar .nav-item:hover{transform:scale(1.06);}
  html.design-lab .sidebar-footer .theme-btn,html.design-lab .sidebar-footer .quick-logout{transition:transform .18s ease,background .18s ease,border-color .18s ease!important;}
  html.design-lab .sidebar-footer .theme-btn:hover,html.design-lab .sidebar-footer .quick-logout:hover{transform:translateY(-2px);background:rgba(116,158,255,.16)!important;border-color:rgba(145,182,255,.3)!important;}
  html.design-lab body:not(.sidebar-collapsed) .sidebar-footer{padding-bottom:16px!important;}
  html.design-lab #dashboard .dashboard-category-chart #categoryPie{margin-bottom:0;}
}
/* Feedback de saldo e controles: azul mais suave, inspirado em interfaces financeiras de alta legibilidade. */
.live-hint .tx-balance-value{font-variant-numeric:tabular-nums;}.live-hint .tx-balance-value.positive{color:#00a97f!important;}.live-hint .tx-balance-value.negative{color:var(--expense)!important;}
@media(min-width:901px){
  .dashboard-alert-preview{max-height:min(70vh,560px)!important;}
  #dashboard .cards .stat-icon-badge{width:34px;height:34px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-right:2px;font-size:14px;}
  #dashboard .cards .stat.balance .stat-icon-badge{background:rgba(48,91,243,.12);color:var(--primary);}
  #dashboard .cards .stat.income .stat-icon-badge{background:rgba(0,185,142,.12);color:var(--income);}
  #dashboard .cards .stat.expense .stat-icon-badge{background:rgba(228,87,104,.11);color:var(--expense);}
  #dashboard .cards .stat.vault .stat-icon-badge{background:rgba(217,146,53,.14);color:var(--vault);}
  #dashboard .cards .stat.invest .stat-icon-badge{background:rgba(128,98,212,.13);color:var(--invest);}
}
/* Controles de ação: azul calmo, separado das cores financeiras dos dados. */
html.design-lab .sidebar-collapse{background:linear-gradient(145deg,#6fbafc,#305bf3)!important;color:#fff!important;box-shadow:0 6px 14px rgba(48,91,243,.24)!important;}
/* Opção de recolher o menu desativada a pedido — o menu lateral do
   computador agora fica sempre expandido; o botão que recolhia some. */
html.design-lab .sidebar-collapse{display:none!important;}
/* Novo visual desktop — réplica fiel da paleta/tipografia/raios do mockup
   (Claude Design canvas "FinMoney Desktop Redesign"). Igual ao que o
   mobile já recebeu na Fase 1, só que pro computador: tokens de cor,
   tipografia (Space Grotesk + Manrope) e cantos mais arredondados, sempre
   com !important pra vencer a camada design-lab de baixo. Sidebar passa a
   ser sempre azul-marinho (não segue mais o tema claro/escuro no
   desktop — decisão deliberada pra bater com o mockup). Celular não é
   tocado (tudo aqui dentro de min-width:901px). */
@media(min-width:901px){
  html.design-lab,html.design-lab[data-theme="light"],html.design-lab[data-theme="dark"]{
    --bg:#f4f6fb!important;
    --card:#ffffff!important;
    --text:#12141e!important;
    --muted:#6b7280!important;
    --border:rgba(18,20,30,.09)!important;
    --input-bg:#eef1f7!important;
    --app-surface:#ffffff!important;
    --app-surface-soft:#eef1f7!important;
    --app-line:rgba(18,20,30,.07)!important;
    --app-shadow:0 20px 44px rgba(20,30,55,.12),0 1px 2px rgba(20,30,55,.04)!important;
    --app-shadow-soft:0 10px 26px rgba(20,30,55,.08)!important;
    --radius-md:14px!important;
    --radius-lg:24px!important;
    /* Vocabulário de tokens do mockup. O mockup nomeia as cores de outro
       jeito (--positive/--negative/--text-2/--accent...) e o CSS derivado
       dele usa esses nomes; sem estas linhas, `var(--negative)` não resolve
       pra nada — foi o que deixou o botão "Sair da conta" com fundo
       transparente e texto branco (invisível). Só no desktop. */
    --positive:#00b98e!important;
    --positive-soft:rgba(0,185,142,.10)!important;
    --negative:#e45768!important;
    --negative-soft:rgba(228,87,104,.09)!important;
    --warning-soft:rgba(201,137,25,.10)!important;
    --accent:#305bf3!important;
    --accent-light:#6fbafc!important;
    --accent-dark:#1c3fc7!important;
    --accent-soft:rgba(48,91,243,.10)!important;
    --surface-sunken:#eef1f7!important;
    --text-2:#565d6e!important;
    --text-3:#6b7280!important;
  }
  html.design-lab[data-theme="dark"]{
    --bg:#0b1020!important;
    --card:#131a33!important;
    --text:#eef1fb!important;
    --muted:#aab2cf!important;
    --border:rgba(255,255,255,.08)!important;
    --input-bg:#1a2242!important;
    --app-surface:#131a33!important;
    --app-surface-soft:#1a2242!important;
    --app-line:rgba(255,255,255,.06)!important;
    --app-shadow:0 20px 44px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3)!important;
    --app-shadow-soft:0 10px 26px rgba(0,0,0,.4)!important;
    --positive-soft:rgba(31,214,168,.16)!important;
    --negative-soft:rgba(255,122,138,.16)!important;
    --warning-soft:rgba(226,168,61,.18)!important;
    --accent-soft:rgba(111,186,252,.18)!important;
    --surface-sunken:#1a2242!important;
    --text-2:#aab2cf!important;
    --text-3:#7d86a8!important;
  }
  /* O reset universal "*{font-family:Inter}" (styles.css:1) atribui Inter
     DIRETAMENTE a cada elemento — isso conta como "regra que bate" pro
     cascade, então herdar Manrope do body nunca acontecia (uma propriedade
     só herda do pai quando NENHUMA regra bate no próprio elemento). Por
     isso a troca de fonte não aparecia em nada além do <body> em si.
     Aplicando Manrope!important no universal-seletor (html.design-lab *)
     vence o *{font-family:Inter} (sem !important) não importa a
     especificidade, sem precisar tocar no reset global (que o mobile usa). */
  html.design-lab *{font-family:'Manrope',system-ui,sans-serif!important;}
  html.design-lab body{background:var(--bg)!important;letter-spacing:0!important;}
  html.design-lab h1,
html.design-lab h2,
html.design-lab h3,
html.design-lab .topbar h1,
html.design-lab .page-title,
html.design-lab .stat .v,
html.design-lab .month-nav .label,
html.design-lab .brand-name,
html.design-lab .account-total b,
html.design-lab .auth-brand,
html.design-lab .tx .amt,
html.design-lab .cc .fatura,
html.design-lab .account-card .fatura,
html.design-lab .mp-year,
html.design-lab .cmp-badge,
html.design-lab .rp-sub-value,
html.design-lab .chart-legend-value,
html.design-lab .num{font-family:'Space Grotesk',system-ui,sans-serif!important;letter-spacing:-.02em!important;}
  /* FontAwesome usa a própria fonte de ícones — o *{font-family:Manrope}
     acima não pode vencer nela, senão os glifos somem. */
  html.design-lab [class*="fa-"]::before,html.design-lab .fa-solid,html.design-lab .fa-regular,html.design-lab .fa-brands{font-family:"Font Awesome 6 Free","Font Awesome 6 Brands"!important;}

  /* Sidebar sempre azul-marinho, em qualquer tema */
  html.design-lab .sidebar,html.design-lab[data-theme="light"] .sidebar,html.design-lab[data-theme="dark"] .sidebar{
    border-right:0!important;
  }
  html.design-lab .sidebar .logo,html.design-lab[data-theme="light"] .sidebar .logo{border-color:rgba(255,255,255,.1)!important;}
  html.design-lab .nav-item .ico,html.design-lab[data-theme="light"] .nav-item .ico{color:#aec1df!important;}
  html.design-lab .nav-item.active .ico,html.design-lab[data-theme="light"] .nav-item.active .ico{color:#6fbafc!important;}
  html.design-lab .sidebar-footer,html.design-lab[data-theme="light"] .sidebar-footer{border-color:rgba(255,255,255,.1)!important;}
  html.design-lab .theme-btn,html.design-lab .quick-logout,html.design-lab[data-theme="light"] .theme-btn,html.design-lab[data-theme="light"] .quick-logout{border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.06)!important;color:#b9c2e0!important;}

  /* Cards planos, sem o tingimento azulado do color-mix e sem a faixa
     lateral colorida (o mockup usa só o selo de ícone) */
  html.design-lab .stat,html.design-lab .panel,html.design-lab .tool-card{background:var(--card)!important;}
  #dashboard .cards .stat::before{display:none!important;}
  #dashboard .cards .stat{padding-left:20px!important;}

  /* Botões e destaques de ação */
  html.design-lab .btn:not(.btn-ghost):not(.header-search),html.design-lab .today-btn,html.design-lab .header-quick,html.design-lab .desktop-new-tx,html.design-lab .fab{
    background:linear-gradient(150deg,#6fbafc,#305bf3)!important;
    box-shadow:0 10px 22px rgba(48,91,243,.28)!important;
    border-radius:14px!important;
  }
  html.design-lab .sidebar-collapse{background:linear-gradient(150deg,#6fbafc,#305bf3)!important;}

  /* ===== Auditoria de paridade com o mockup — correções literais ===== */
  html.design-lab,html.design-lab[data-theme="light"],html.design-lab[data-theme="dark"]{
    --primary:#305bf3!important;--primary-dark:#1c3fc7!important;
  }

  /* --- Sidebar: cor chapada, sem gradiente/sombra, sempre igual em qualquer tema --- */
  html.design-lab .sidebar,html.design-lab[data-theme="light"] .sidebar,html.design-lab[data-theme="dark"] .sidebar{
    background:#0f1630!important;box-shadow:none!important;padding:16px 0!important;gap:2px!important;display:flex!important;flex-direction:column!important;
  }
  html.design-lab .sidebar .brand{display:flex!important;align-items:center!important;gap:10px!important;padding:6px 16px 22px 16px!important;}
  html.design-lab .sidebar .brand-mark{width:30px;height:30px;flex:0 0 30px;border-radius:9px!important;overflow:hidden!important;background:none!important;box-shadow:none!important;object-fit:cover!important;}
  html.design-lab .sidebar .brand>.brand-name{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;font-size:17px!important;color:#fff!important;letter-spacing:-.01em!important;}
  html.design-lab .sidebar .brand .sidebar-collapse{margin-left:auto!important;width:26px!important;height:26px!important;}
  html.design-lab .nav-item,html.design-lab[data-theme="light"] .nav-item{
    margin:0 10px!important;width:auto!important;padding:10px 12px!important;min-height:0!important;border-radius:12px!important;
    font-size:14px!important;font-weight:600!important;color:#b9c2e0!important;gap:12px!important;
  }
  html.design-lab .nav-item .ico{width:18px!important;font-size:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#aec1df!important;opacity:.9;}
  html.design-lab .nav-item .ico svg{width:18px;height:18px;flex:0 0 auto;}
  html.design-lab .nav-item.active,html.design-lab[data-theme="light"] .nav-item.active{
    background:#161f45!important;box-shadow:none!important;color:#fff!important;
  }
  html.design-lab .nav-item.active .ico{color:#6fbafc!important;}
  html.design-lab .nav-group-label,html.design-lab[data-theme="light"] .nav-group-label{
    margin:0!important;padding:10px 22px 4px 22px!important;font-size:11px!important;font-weight:700!important;
    letter-spacing:.06em!important;color:#6b7597!important;
  }
  html.design-lab .sidebar-spacer{flex:1!important;}
  html.design-lab .sidebar-footer{border:0!important;margin:0 10px!important;padding:8px 0!important;}
  html.design-lab .sidebar .logo.sidebar-user{padding:12px 16px!important;margin-top:4px!important;border-top:1px solid rgba(255,255,255,.08)!important;}
  html.design-lab .sidebar-user-avatar{width:34px!important;height:34px!important;border-radius:12px!important;background:linear-gradient(155deg,#6fbafc,#305bf3)!important;color:#0f1630!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;font-size:13px!important;}
  html.design-lab .sidebar-user-name,html.design-lab[data-theme="light"] .sidebar-user-name{font-size:13px!important;font-weight:700!important;color:#fff!important;}

  /* --- Topbar --- */
  html.design-lab .topbar h1,html.design-lab .page-title{font-size:24px!important;font-weight:700!important;letter-spacing:-.01em!important;}
  html.design-lab .btn:not(.btn-ghost):not(.header-search),html.design-lab .today-btn,html.design-lab .header-quick,html.design-lab .desktop-new-tx{
    padding:10px 16px!important;font-size:13px!important;font-weight:700!important;
  }
  html.design-lab .dashboard-icon-action{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important;}
  html.design-lab .header-search{
    width:440px!important;height:auto!important;justify-content:flex-start!important;gap:8px!important;
    padding:9px 14px!important;border-radius:12px!important;background:var(--app-surface-soft)!important;
    color:var(--muted)!important;border:1px solid var(--app-line)!important;box-shadow:none!important;font-weight:500!important;
  }
  html.design-lab .header-search-input{flex:1!important;min-width:0!important;border:0!important;background:none!important;outline:none!important;font-size:13px!important;color:var(--text)!important;font-weight:500!important;font-family:inherit!important;padding:0!important;}
  html.design-lab .header-search-input::placeholder{color:var(--muted)!important;font-weight:500!important;}
  html.design-lab .global-search-dropdown{display:none;position:fixed!important;z-index:400!important;max-height:360px!important;overflow-y:auto!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:14px!important;box-shadow:0 14px 32px rgba(18,20,30,.18)!important;padding:8px!important;}
  html.design-lab .global-search-dropdown.open{display:block!important;}
  html.design-lab .global-search-dropdown .hint,html.design-lab .global-search-dropdown .empty{padding:14px 10px!important;font-size:12.5px!important;color:var(--text-3)!important;text-align:center!important;}
  html.design-lab .global-search-dropdown .global-search-result{background:none!important;}
  html.design-lab .global-search-dropdown .global-search-result:hover{background:var(--app-surface-soft)!important;}
  html.design-lab .topbar-actions-row{gap:10px!important;}
  /* Mockup: a linha de busca/mês/avisos do topo só existe nas telas com
     lançamentos do período (Dashboard, Lançamentos, Cartões, Contas a
     pagar). Contas/Caixinhas/Investimentos/Patrimônio/Relatórios/
     Categorias/Ferramentas já têm seu próprio botão "+Novo" no corpo da
     página, então escondê-la aqui não tira nenhuma ação de lugar nenhum. */
  html.design-lab .main:has(>#recurring.section.active) .topbar-actions-row,
  html.design-lab .main:has(>#vaults.section.active) .topbar-actions-row,
  html.design-lab .main:has(>#investments.section.active) .topbar-actions-row,
  html.design-lab .main:has(>#patrimony.section.active) .topbar-actions-row,
  html.design-lab .main:has(>#reports-page.section.active) .topbar-actions-row,
  html.design-lab .main:has(>#categories.section.active) .topbar-actions-row,
  html.design-lab .main:has(>#tools.section.active) .topbar-actions-row{display:none!important;}
  /* Lançamentos já tem sua própria busca e pílula de mês dentro da página —
     a busca global, o sino de avisos e a pílula de mês da barra do topo
     ficam escondidos aqui pra não duplicar; o que sobra (seletor de mês +
     Exportar + Novo lançamento) já fica na ordem certa, sem precisar
     reordenar nada. */
  html.design-lab .main:has(>#transactions.section.active) .topbar-actions-row .header-search,
  html.design-lab .main:has(>#transactions.section.active) .topbar-actions-row .dashboard-alert-trigger{display:none!important;}

  /* --- Dashboard: cards planos, sem faixa lateral, tipografia do mockup --- */
  html.design-lab .stat,html.design-lab .panel,html.design-lab .tool-card{box-shadow:none!important;border-color:var(--app-line)!important;}
  html.design-lab .stat .t{text-transform:uppercase!important;letter-spacing:.04em!important;}
  html.design-lab .stat .v{font-size:25px!important;font-weight:600!important;letter-spacing:-.01em!important;}
  html.design-lab .stat.balance .v{font-size:25px!important;}
  html.design-lab h3,html.design-lab .panel h3{font-family:'Manrope',system-ui,sans-serif!important;font-size:15px!important;font-weight:700!important;}
  html.design-lab .tx .dot{border-radius:14px!important;}

  /* --- Ferramentas: card de perfil, grade e cartão de logout --- */
  /* O botão "Editar perfil" precisa ficar visualmente DENTRO do mesmo cartão
     branco do perfil, não como uma pílula cinza solta ao lado — por isso o
     cartão (não a linha do perfil) é quem ganha fundo/borda/raio agora. */
  #tools .tools-profile-card{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:16px!important;padding:20px 22px!important;border:1px solid var(--app-line)!important;border-radius:22px!important;background:var(--card)!important;box-shadow:none!important;}
  #tools .tools-profile-card .mais-profile-row{flex:1!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;width:auto!important;}
  #tools .tools-intro{display:none!important;}
  #tools .mais-profile-row .chev{display:none!important;}
  /* No computador esse botão não navega pra lugar nenhum (handleProfileRowClick
     só faz algo no celular) — vira só um resumo visual: sem cursor de link,
     sem a animação de "apertar" ao clicar, e o clique nem chega a acontecer. */
  html.design-lab #tools .mais-profile-row{pointer-events:none!important;cursor:default!important;}
  #tools .mais-profile-row .profile-avatar{width:56px!important;height:56px!important;border-radius:18px!important;font-size:20px!important;}
  #tools .mais-profile-row .profile-avatar-initials{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:20px;}
  #tools .profile-trust{display:inline-flex!important;background:var(--accent-soft,rgba(48,91,243,.1))!important;color:var(--primary)!important;font-size:11px!important;font-weight:700!important;padding:4px 10px!important;border-radius:10px!important;margin-top:6px!important;width:fit-content!important;}
  #tools .tools-edit-profile-btn{display:flex!important;align-items:center!important;gap:8px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--muted)!important;font-size:13px!important;font-weight:700!important;padding:10px 16px!important;border-radius:14px!important;white-space:nowrap;}
  #tools .section-label{display:block!important;font-size:12px!important;font-weight:700!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.05em!important;margin:4px 0 15px!important;}
  /* Listas de Preferências/Conexões e de Sistema (Backup, Segurança, Ajuda)
     — cards próprios, à parte do card de perfil (pedido explícito), só no
     computador; no celular esses itens continuam nas .mais-nav-list de
     sempre (perfil e #tools), sem duplicar. */
  #tools .tools-settings-card{display:block!important;margin-bottom:16px!important;padding:20px 22px!important;border:1px solid var(--app-line)!important;border-radius:22px!important;background:var(--card)!important;box-shadow:none!important;}
  #tools .tools-profile-links{display:flex!important;flex-direction:column!important;gap:2px!important;margin:0!important;padding:0!important;border:0!important;}
  #tools .tools-profile-links-label{font-size:11px!important;font-weight:700!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.05em!important;margin:10px 0 4px!important;}
  #tools .tools-profile-links-label:first-child{margin-top:0!important;}
  #tools .tools-profile-link{display:flex!important;align-items:center!important;gap:11px!important;width:100%!important;padding:9px 6px!important;border:0!important;border-radius:10px!important;background:none!important;color:var(--text)!important;font-size:13.5px!important;font-weight:600!important;text-align:left!important;}
  #tools .tools-profile-link:hover{background:var(--app-surface-soft)!important;}
  #tools .tools-profile-link .ico{width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:9px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:color-mix(in srgb,var(--ico-color) 16%,transparent)!important;color:var(--ico-color)!important;font-size:13px!important;}
  #tools .tools-profile-link span:not(.ico){flex:1!important;}
  #tools .tools-profile-link .tools-list-copy{display:flex!important;flex-direction:column!important;gap:1px!important;}
  #tools .tools-profile-link .tools-list-copy small{color:var(--muted)!important;font-weight:500!important;font-size:11.5px!important;}
  #tools .tools-profile-link .chev{font-size:11px!important;color:var(--text-3)!important;}

  #tools .tool-hub{gap:16px!important;}
  #tools .tool-hub-card{padding:20px!important;gap:14px!important;padding-right:20px!important;border-radius:20px!important;border-color:var(--app-line)!important;background:var(--card)!important;}
  #tools .tool-hub-card>.ti{width:42px!important;height:42px!important;border-radius:14px!important;font-size:18px!important;}
  #tools .tool-hub-card>i.fa-chevron-right{position:static!important;width:auto!important;height:auto!important;border:0!important;background:none!important;font-size:13px!important;color:var(--muted)!important;margin-left:auto!important;align-self:center!important;}
  #tools .tool-hub-copy small{font-size:12px!important;margin-top:4px!important;line-height:1.5!important;}

  #tools .desktop-logout-card{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;width:100%!important;max-width:none!important;margin:16px 0 0!important;padding:18px 22px!important;border-radius:20px!important;background:rgba(228,87,104,.09)!important;border:1px solid rgba(228,87,104,.18)!important;text-align:left!important;}
  #tools .desktop-logout-card .mobile-logout-content{display:none!important;}
  #tools .desktop-logout-icon{display:inline-flex!important;align-items:center;justify-content:center;width:38px;height:38px;border-radius:13px;background:var(--card);color:var(--negative);font-size:15px;flex:0 0 auto;}
  #tools .desktop-logout-copy{display:flex!important;flex-direction:column;gap:2px;flex:1;min-width:0;}
  #tools .desktop-logout-copy b{font-size:14px;font-weight:700;color:var(--negative);}
  #tools .desktop-logout-copy small{font-size:12px;color:var(--text-2,var(--muted));font-weight:400;}
  #tools .desktop-logout-action{display:inline-flex!important;background:var(--negative);color:#fff;font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:12px;flex:0 0 auto;}

  /* ===== Base compartilhada por TODAS as telas do desktop ===== */

  /* Cabeçalho com subtítulo embaixo do título, como em toda página do mockup. */
  html.design-lab .page-heading{flex-direction:column!important;align-items:flex-start!important;gap:2px!important;}
  html.design-lab .page-sub{display:block!important;font-size:13px!important;font-weight:500!important;color:var(--text-3)!important;letter-spacing:0!important;}
  html.design-lab .page-sub:empty{display:none!important;}

  /* O mockup nunca repete o título da página dentro do conteúdo: cada tela
     tem só o h1 da barra de cima. Estes cabeçalhos internos ("Minhas contas",
     "Meus cartões", "Metas de orçamento"...) duplicavam o título e traziam um
     segundo botão de criar — agora a criação vive no botão primário da barra
     de cima (ver PAGE_ACTIONS em app-ui.js). */
  html.design-lab .mais-page>.topbar{display:none!important;}

  /* --- "Ver todos/todas" nos painéis do dashboard (só existe no desktop) --- */
  .dash-see-all{display:inline-flex!important;align-items:center!important;margin-left:auto!important;font-size:13px!important;font-weight:700!important;color:var(--primary)!important;white-space:nowrap!important;cursor:pointer;}
  .dash-see-all:hover{color:var(--primary-dark)!important;}

  /* --- Linha de KPIs: EXATAMENTE os 4 cartões do mockup ---
     Guardado e Investido saem da linha de cima no computador (continuam em
     Caixinhas e Investimentos) e entram no lugar deles o Patrimônio líquido.
     A regra que escondia os dois existia só em @media(max-width:900px), então
     no desktop os seis continuavam aparecendo. */
  html.design-lab #dashboard>.cards .stat.vault,
  html.design-lab #dashboard>.cards .stat.invest{display:none!important;}
  html.design-lab #dashboard>.cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;}
  /* Medidas e cores do selo exatamente as do mockup. */
  html.design-lab #dashboard>.cards .stat{border-radius:22px!important;padding:20px!important;}
  html.design-lab #dashboard>.cards .stat .t{font-size:12px!important;font-weight:700!important;color:var(--text-3)!important;}
  html.design-lab #dashboard>.cards .stat-icon-badge{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:14px!important;}
  html.design-lab #dashboard>.cards .stat.balance .stat-icon-badge{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #dashboard>.cards .stat.income .stat-icon-badge{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab #dashboard>.cards .stat.expense .stat-icon-badge{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #dashboard>.cards .stat.networth .stat-icon-badge{background:var(--surface-sunken)!important;color:var(--text-2)!important;}
  html.design-lab .stat-icon-badge svg{width:17px;height:17px;display:block;}
  /* A rosca do mockup não tem valor no centro e o anel é um pouco mais fino. */
  html.design-lab #dashboard #categoryPie{display:none!important;}
  html.design-lab #dashboard .category-pie-svg{display:flex!important;align-items:center;justify-content:center;flex:0 0 auto!important;width:132px!important;height:132px!important;}
  html.design-lab #dashboard .category-pie-svg svg{width:100%;height:100%;}

  /* Anatomia do cartão igual ao mockup: rótulo à esquerda, selo de ícone à
     DIREITA, valor embaixo, e a variação vs. mês passado no rodapé. O botão
     (i) não existe no mockup e foi removido; o olho de ocultar valores (só
     existe no cartão "Saldo") fica colado à esquerda do selo/ícone. */
  html.design-lab #dashboard>.cards .stat .t{width:100%!important;gap:8px!important;}
  html.design-lab #dashboard>.cards .stat .t>span:not(.stat-icon-badge){order:1!important;}
  html.design-lab #dashboard>.cards .stat .metric-info{display:none!important;}
  html.design-lab #dashboard>.cards .stat .stat-icon-badge{order:3!important;margin-left:auto!important;margin-right:0!important;}
  html.design-lab #dashboard>.cards .stat .amount-visibility{order:2!important;opacity:1!important;margin-left:auto!important;}
  html.design-lab #dashboard>.cards .stat:has(.amount-visibility) .stat-icon-badge{margin-left:6px!important;}
  html.design-lab #dashboard>.cards .stat-delta{display:flex!important;align-items:center!important;gap:5px!important;margin-top:12px!important;font-size:12px!important;font-weight:700!important;}
  html.design-lab #dashboard>.cards .stat-delta.up{color:var(--positive)!important;}
  html.design-lab #dashboard>.cards .stat-delta.down{color:var(--negative)!important;}
  html.design-lab #dashboard>.cards .stat-delta .muted{color:var(--text-3)!important;font-weight:600!important;}
  html.design-lab #dashboard>.cards .stat-delta:empty{display:none!important;}
  /* As setas de mês dentro do cartão de saldo não existem no mockup. */
  html.design-lab #dashboard>.cards .dashboard-balance-nav{display:none!important;}

  /* --- Esqueleto do dashboard igual ao mockup: banda de 2 colunas ---
     Gráfico largo à esquerda ocupando duas linhas; Categorias e Contas a
     vencer empilhados na coluna estreita à direita; tabela de lançamentos
     em largura total embaixo. Uso `order` (que o grid respeita ao
     posicionar) em vez de depender da ordem salva de cada conta, então isso
     vale também pra quem já tem um layout personalizado. O que o dono
     tiver ligado além desses quatro cai depois, em largura total. */
  /* As duas colunas do mockup são 1.55fr / 1fr. O seletor tem especificidade
     maior de propósito: já existiam DUAS regras conflitantes pro grid do
     dashboard (uma de 12 colunas e outra de 2), e a de 2 vencia — um `span 7`
     ali dentro criava colunas fantasma e embaralhava a página inteira. */
  html.design-lab #dashboard.section.active{grid-template-columns:1.55fr 1fr!important;gap:20px!important;}
  html.design-lab #dashboard.section.active>.dash-widget{order:5;}
  html.design-lab #dashboard.section.active>[data-w="w_cards"]{order:0;grid-column:1/-1!important;}
  /* Faixa do topo: quem está nela é decidido pelo layout (data-band, ver
     placeDashboardNodes em app-extras.js), não pelo id do widget — senão
     arrastar outro widget pro lugar de Categorias/Contas a vencer não tinha
     efeito. Fora da faixa, tudo segue a ordem do layout: largura total ou,
     em par, meia largura. */
  html.design-lab #dashboard.section.active>[data-band="main"]{order:1;grid-column:1!important;grid-row:span 2;align-self:stretch;display:flex;flex-direction:column;}
  html.design-lab #dashboard.section.active>[data-band="side"]{order:2;grid-column:2!important;min-width:0;}
  html.design-lab #dashboard.section.active>[data-w="w_line"] canvas{flex:1;min-height:250px;}
  /* A saudação "Bom dia, Fulano" não existe no mockup (é decoração, não
     tem função) — sai só no computador. Os controles Atual/Fechamento e a
     engrenagem de personalizar são funcionais, então continuam, mas como
     uma tira fina alinhada à direita em vez de uma faixa inteira. */
  html.design-lab #dashboard>.dashboard-greeting{display:none!important;}
  html.design-lab #dashboard.section.active>.dashboard-controls{grid-column:1/-1!important;grid-row:auto!important;display:flex!important;justify-content:flex-end!important;margin:0!important;}

  /* Cabeçalho do cartão do gráfico: título + subtítulo azul empilhados à
     esquerda, legenda de cores no canto direito (o Chart.js deixa de
     desenhar a legenda embaixo — ver renderCharts). */
  html.design-lab #dashboard .dashboard-evolution h3{align-items:flex-start!important;}
  html.design-lab #dashboard .dashboard-evolution h3 .label-icon i{display:none!important;}
  html.design-lab #dashboard .dashboard-evolution h3 .hint{order:3;flex-basis:100%;margin-top:2px!important;color:var(--accent)!important;font-size:12px!important;font-weight:600!important;}
  html.design-lab #dashboard .dashboard-evolution h3{flex-wrap:wrap!important;}
  html.design-lab .chart-inline-legend{display:flex!important;align-items:center!important;gap:18px!important;margin-left:auto!important;}
  html.design-lab .chart-inline-legend span{display:inline-flex!important;align-items:center!important;gap:7px!important;font-size:12px!important;font-weight:600!important;color:var(--text-2)!important;}
  html.design-lab .chart-inline-legend i{width:9px;height:9px;border-radius:4px;flex:0 0 auto;}

  /* O mockup não tem chevron de recolher nem ícone nos títulos dos painéis
     do dashboard — os widgets continuam recolhíveis pelo clique no título. */
  html.design-lab #dashboard .collapse-trigger::after{display:none!important;}
  html.design-lab #dashboard [data-collapse-id="bills"] h3 .label-icon i,
  html.design-lab #dashboard .dashboard-category-head h3 .label-icon i{display:none!important;}
  /* Abas/subtítulo/rodapé do cartão de Categorias não existem no mockup;
     o relatório completo continua acessível clicando no cartão. */
  html.design-lab #dashboard .dashboard-category-chart .category-chart-switch,
  html.design-lab #dashboard .dashboard-category-chart .dashboard-category-subtitle,
  html.design-lab #dashboard .dashboard-category-chart .category-chart-detail-link{display:none!important;}

  /* --- Categorias: legenda ao lado da rosca, como no mockup --- */
  .dashboard-category-body{display:flex!important;align-items:center!important;gap:20px!important;}
  .dashboard-category-body canvas{flex:0 0 auto!important;max-width:150px!important;}
  .dashboard-category-legend{flex:1!important;display:flex!important;flex-direction:column!important;gap:9px!important;min-width:0!important;max-height:190px!important;overflow-y:auto!important;padding-right:4px!important;}
  .dashboard-category-legend .donut-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;font-size:13px!important;}
  .dashboard-category-legend .donut-row-left{display:flex!important;align-items:center!important;gap:8px!important;color:var(--text-2,var(--muted))!important;font-weight:600!important;min-width:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dashboard-category-legend .donut-swatch{width:9px!important;height:9px!important;border-radius:4px!important;flex:0 0 auto!important;}
  .dashboard-category-legend .donut-row-val{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;flex:0 0 auto!important;}

  /* --- Lançamentos recentes: tabela real, como no mockup (só desktop) --- */
  .dashboard-tx-table{width:100%!important;border-collapse:collapse!important;}
  .dashboard-tx-table th{text-align:left;font-size:11px!important;font-weight:700!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.04em!important;padding:12px 4px 16px 4px!important;border-bottom:1px solid var(--app-line)!important;}
  .dashboard-tx-table th:first-child{padding-left:48px!important;}
  .dashboard-tx-table td{padding:13px 4px!important;font-size:13px!important;border-bottom:1px solid var(--app-line)!important;}
  .dashboard-tx-table tr:last-child td{border-bottom:none!important;}
  .dashboard-tx-table .tx-desc-cell{display:flex!important;align-items:center!important;gap:12px!important;}
  .dashboard-tx-table .tx-icon{width:36px!important;height:36px!important;border-radius:13px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 36px!important;font-size:14px!important;}
  .dashboard-tx-table .tx-name{font-weight:700!important;color:var(--text)!important;}
  .dashboard-tx-table .tx-sub{font-size:12px!important;color:var(--muted)!important;margin-top:1px!important;}
  .dashboard-tx-table .cat-pill{display:inline-block;font-size:10.5px!important;font-weight:700!important;padding:4px 9px!important;border-radius:9px!important;background:var(--app-surface-soft)!important;color:var(--text-2,var(--muted))!important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .dashboard-tx-table .amt{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;white-space:nowrap;}
  .dashboard-tx-table .amt.pos{color:var(--income)!important;}
  .dashboard-tx-table .amt.neg{color:var(--text)!important;}

  /* --- Contas a pagar/receber: selo de ícone + status, como no mockup --- */
  .dashboard-bill-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  .dashboard-bill-left{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;}
  .dashboard-bill-icon{width:34px!important;height:34px!important;border-radius:12px!important;background:var(--app-surface-soft)!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important;font-size:13px!important;}
  .dashboard-bill-left b{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  .dashboard-bill-left small{display:block!important;font-size:12px!important;color:var(--muted)!important;margin-top:1px!important;}
  .dashboard-bill-right{text-align:right!important;flex:0 0 auto!important;}
  .dashboard-bill-right b{display:block!important;font-size:13px!important;font-weight:700!important;font-family:'Space Grotesk',system-ui,sans-serif!important;}
  .dashboard-bill-right .status-pill{display:inline-block!important;margin-top:4px!important;font-size:11px!important;font-weight:700!important;padding:3px 9px!important;border-radius:9px!important;}
  .dashboard-bill-right .status-pill.warn{background:var(--warning-soft,rgba(201,137,25,.1))!important;color:var(--warning,#c98919)!important;}
  .dashboard-bill-right .status-pill.ok{background:var(--positive-soft,rgba(0,185,142,.1))!important;color:var(--income)!important;}

  /* ===== Lançamentos ===== */

  /* KPIs: um cartão só, dividido em três colunas por linha vertical. */
  html.design-lab .tx-summary-card{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;padding:6px 22px 4px!important;}
  html.design-lab .tx-summary-item{padding:18px 0!important;min-width:0;}
  html.design-lab .tx-summary-item+.tx-summary-item{border-left:1px solid var(--app-line)!important;padding-left:22px!important;}
  html.design-lab .tx-summary-label{font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:var(--text-3)!important;}
  html.design-lab .tx-summary-value{margin-top:6px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:22px!important;font-weight:600!important;letter-spacing:-.01em!important;color:var(--text)!important;}
  html.design-lab .tx-summary-value.in{color:var(--income)!important;}
  html.design-lab .tx-summary-value.accent{color:var(--primary)!important;}

  /* Barra de filtros como um cartão só: busca + Categoria + período à
     esquerda e o segmentado de tipo à direita, tudo na mesma linha. */
  html.design-lab #transactions .lancamentos-toolbar{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:18px!important;padding:14px 16px!important;margin-bottom:18px!important;flex-wrap:wrap!important;}
  html.design-lab #transactions .lancamentos-search-row{display:flex!important;align-items:center!important;gap:10px!important;flex:1 1 auto!important;min-width:0!important;margin:0!important;}
  html.design-lab #transactions #txSearchBar{align-items:center!important;gap:10px!important;margin:0!important;flex:0 1 auto!important;}
  html.design-lab #transactions #txSearchBar .fg{margin:0!important;flex:0 1 320px!important;min-width:0!important;}
  html.design-lab #transactions #txSearchBar .fg label{display:none!important;}
  html.design-lab #transactions #txSearchBar input{width:100%!important;background:var(--app-surface-soft)!important;border-radius:12px!important;border:1px solid var(--app-line)!important;}
  html.design-lab #transactions .tx-inline-filters{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;}
  html.design-lab .tx-inline-select{position:relative!important;display:inline-flex!important;align-items:center!important;}
  html.design-lab .tx-inline-select select{appearance:none!important;-webkit-appearance:none!important;height:38px!important;min-height:38px!important;padding:0 32px 0 14px!important;border:1px solid var(--app-line)!important;border-radius:12px!important;background:var(--card)!important;color:var(--text-2)!important;font-size:13px!important;font-weight:600!important;cursor:pointer;}
  html.design-lab .tx-inline-select i{position:absolute!important;right:12px!important;pointer-events:none!important;font-size:10px!important;color:var(--muted)!important;}
  html.design-lab #transactions .transactions-filter-tabs{margin-left:auto!important;flex:0 0 auto!important;}
  /* Botão secundário da barra de cima ("Exportar" em Lançamentos). */
  html.design-lab .desktop-secondary-action{display:none!important;}
  html.design-lab .desktop-secondary-action.is-available{display:inline-flex!important;align-items:center!important;gap:8px!important;height:auto!important;padding:10px 16px!important;border:1px solid var(--app-line)!important;border-radius:14px!important;background:var(--card)!important;color:var(--text-2)!important;font-size:13px!important;font-weight:700!important;}
  html.design-lab .desktop-secondary-action.is-available:hover{background:var(--app-surface-soft)!important;}

  /* Abas de tipo: trilho cinza com o ativo em branco (não pílula azul). */
  html.design-lab #transactions .transactions-filter-tabs{background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;border-radius:12px!important;padding:3px!important;gap:2px!important;display:inline-flex!important;width:auto!important;}
  html.design-lab #transactions .transactions-filter-tabs button{min-height:36px!important;height:36px!important;padding:7px 14px!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font-size:12px!important;font-weight:700!important;}
  html.design-lab #transactions .transactions-filter-tabs button.active{background:var(--card)!important;color:var(--text)!important;box-shadow:0 1px 3px rgba(18,20,30,.10)!important;}

  /* Tabela: mesma base do dashboard + coluna de ações que aparece no hover. */
  html.design-lab #txListPanel{border-radius:22px!important;padding:8px 22px 14px!important;}
  html.design-lab .tx-table td{padding:14px 4px!important;}
  html.design-lab .tx-table tbody tr:hover{background:var(--app-surface-soft)!important;}
  html.design-lab .tx-value-cell{text-align:right!important;white-space:nowrap!important;position:relative!important;}
  html.design-lab .tx-value-cell .amt{padding-right:2px!important;}
  /* Linha inteira clicável (abre o lançamento) — sem os botões de
     duplicar/editar/apagar de antes, que agora moram na tela de detalhe. */
  html.design-lab .tx-table-row{cursor:pointer!important;}

  /* Etiqueta de status (também usada em Contas a pagar/receber). */
  html.design-lab .status-tag{display:inline-block!important;font-size:11px!important;font-weight:700!important;padding:4px 10px!important;border-radius:9px!important;white-space:nowrap!important;}
  html.design-lab .status-tag.done{background:var(--positive-soft)!important;color:var(--income)!important;}
  html.design-lab .status-tag.pend{background:var(--warning-soft)!important;color:var(--warning)!important;}
  html.design-lab .status-tag.late{background:var(--negative-soft)!important;color:var(--expense)!important;}

  /* Rodapé da tabela com contagem e paginação. */
  html.design-lab .tx-table-foot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:16px 4px 6px!important;font-size:12px!important;font-weight:600!important;color:var(--text-3)!important;}
  html.design-lab .tx-pager{display:flex!important;align-items:center!important;gap:4px!important;}
  html.design-lab .tx-pager .page-btn{min-width:32px!important;height:32px!important;padding:0 8px!important;border:1px solid var(--app-line)!important;border-radius:9px!important;background:var(--card)!important;color:var(--text-2)!important;font-size:12px!important;font-weight:700!important;cursor:pointer;}
  html.design-lab .tx-pager .page-btn:hover:not(:disabled){background:var(--app-surface-soft)!important;}
  html.design-lab .tx-pager .page-btn.active{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;}
  html.design-lab .tx-pager .page-btn:disabled{opacity:.4!important;cursor:default;}
  html.design-lab .tx-pager .page-btn.gap{color:var(--text-3)!important;letter-spacing:1px;}

  /* ===== Contas ===== */

  /* O cartão-embrulho branco não existe no mockup: as fichas de conta ficam
     soltas no fundo, e a faixa de saldo é um herói azul de largura cheia. */
  html.design-lab #accounts>.panel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;}
  html.design-lab .account-hero{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;margin-bottom:20px!important;padding:26px 28px!important;border-radius:24px!important;background:linear-gradient(135deg,#305bf3,#1c3fc7)!important;color:#fff!important;}
  html.design-lab .account-hero-label{display:block!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab .account-hero-value{display:block!important;margin-top:6px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:34px!important;font-weight:700!important;letter-spacing:-.02em!important;color:#fff!important;}
  html.design-lab .account-hero-stats{display:flex!important;gap:32px!important;flex:0 0 auto!important;}
  html.design-lab .account-hero-stats span{display:block!important;font-size:12px!important;font-weight:600!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab .account-hero-stats b{display:block!important;margin-top:4px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:18px!important;font-weight:600!important;color:#fff!important;}

  /* Ficha de conta: branca e chapada (não o cartão tingido), selo do banco,
     subtítulo, e rodapé com contagem + "Ver extrato". */
  /* O id extra do #accounts é de propósito: mais adiante no arquivo (linha
     ~3120) existe uma regra `auto-fit,minmax(320px,1fr)` com !important pra
     esta mesma lista, e ela vence por vir depois. */
  html.design-lab #accounts #accountList{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;}
  html.design-lab #accountList>.account-desktop-card{position:relative!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;box-shadow:none!important;padding:20px!important;color:var(--text)!important;}
  html.design-lab #accountList>.account-desktop-card.is-selected{border-color:var(--primary)!important;box-shadow:0 0 0 1px var(--primary)!important;}
  /* Mesma alça-no-topo dos cartões, mesma posição (extremo Y, centro X) —
     conta agora também pode ser reordenada por arrastar-e-soltar. */
  html.design-lab .account-desktop-card .card-drag-handle-top{position:absolute!important;z-index:4!important;top:7px!important;left:50%!important;transform:translateX(-50%)!important;width:34px!important;height:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid var(--app-line)!important;border-radius:10px!important;background:var(--app-surface)!important;color:var(--muted)!important;cursor:grab!important;touch-action:none!important;opacity:0!important;transition:opacity .16s ease,color .16s ease,border-color .16s ease!important;font-size:10px!important;}
  html.design-lab .account-desktop-card:hover .card-drag-handle-top,html.design-lab .account-desktop-card:focus-within .card-drag-handle-top{opacity:1!important;}
  html.design-lab .account-desktop-card .card-drag-handle-top:hover{color:var(--primary)!important;border-color:var(--primary)!important;}
  html.design-lab .account-desktop-card .card-drag-handle-top:active{cursor:grabbing!important;}
  html.design-lab .account-desktop-card .account-top{display:flex!important;align-items:flex-start!important;gap:12px!important;}
  html.design-lab .account-desktop-card .account-badge{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:none!important;font-size:19px!important;}
  html.design-lab .account-desktop-card .account-badge img{width:22px;height:22px;border-radius:6px;}
  html.design-lab .account-desktop-card .account-head-copy{flex:1!important;min-width:0!important;}
  html.design-lab .account-desktop-card .account-name{font-size:14px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .account-desktop-card .account-type{font-size:12px!important;color:var(--muted)!important;margin-top:2px!important;}
  html.design-lab .account-desktop-card .fatura{margin:16px 0 0!important;font-size:24px!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab .account-desktop-card .account-foot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-top:14px!important;padding-top:14px!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab .account-desktop-card .account-updated{font-size:12px!important;color:var(--muted)!important;}
  html.design-lab .link-btn{font-size:13px!important;font-weight:700!important;color:var(--primary)!important;cursor:pointer;white-space:nowrap;}
  /* Os 4 botões de gerenciar não aparecem no mockup — ficam no hover. */
  html.design-lab .account-desktop-card .account-manage-actions{opacity:0!important;transition:opacity .15s!important;display:flex!important;gap:2px!important;}
  html.design-lab .account-desktop-card:hover .account-manage-actions,
  html.design-lab .account-desktop-card .account-manage-actions:focus-within{opacity:1!important;}
  html.design-lab .account-desktop-card .account-manage-actions .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:12px!important;}
  html.design-lab .account-desktop-card .account-manage-actions .icon-btn:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}

  /* Extrato em tabela — a metade de baixo da página, que não existia. */
  /* O extrato só aparece depois de clicar numa conta. */
  html.design-lab .account-statement-panel{display:none!important;}
  html.design-lab .account-statement-panel.is-open,
  html.design-lab #accounts>.account-statement-panel.is-open{display:block!important;margin-top:20px!important;border-radius:22px!important;padding:8px 22px 16px!important;background:var(--card)!important;border:1px solid var(--app-line)!important;box-shadow:none!important;}
  html.design-lab .account-statement-table{background:var(--card)!important;}
  html.design-lab .account-statement-head-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  html.design-lab .account-statement-head-row #accountStatementHead{margin:0!important;}
  /* Pílula de mês genérica — reaproveitada em Contas, Lançamentos, Cartões,
     Contas a pagar/receber, Calendário, Orçamento, Comparativo e Gastos
     formiga. O dropdown é um único elemento compartilhado (position:fixed,
     reposicionado por JS em cima da pílula clicada), então não depende de
     nenhum ancestral position:relative por página. */
  html.design-lab .month-pill{display:inline-flex!important;align-items:center!important;gap:8px!important;height:34px!important;padding:0 14px!important;border-radius:999px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--text-2)!important;font-size:12.5px!important;font-weight:600!important;white-space:nowrap;flex:0 0 auto!important;}
  html.design-lab .month-pill i{color:var(--muted)!important;font-size:12px!important;}
  html.design-lab .month-pill-dropdown{display:none;position:fixed!important;z-index:400!important;width:200px!important;max-height:260px!important;overflow-y:auto!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:14px!important;box-shadow:0 14px 32px rgba(18,20,30,.18)!important;padding:6px!important;}
  html.design-lab .month-pill-dropdown.open{display:block!important;}
  html.design-lab .month-pill-item{display:block!important;width:100%!important;text-align:left!important;padding:9px 12px!important;border-radius:9px!important;font-size:12.5px!important;font-weight:600!important;color:var(--text-2)!important;background:none!important;border:0!important;}
  html.design-lab .month-pill-item:hover{background:var(--app-surface-soft)!important;}
  html.design-lab .month-pill-item.is-current{color:var(--primary)!important;font-weight:700!important;background:var(--accent-soft)!important;}
  html.design-lab .account-statement-panel h3{margin:18px 0 4px!important;}
  html.design-lab .account-statement-table td:last-child,
  html.design-lab .account-statement-table th:last-child{color:var(--text)!important;}

  /* ===== Contas a pagar/receber ===== */
  html.design-lab #bills>.cards{gap:16px!important;}
  html.design-lab #bills>.cards .stat .t{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;width:100%!important;}
  html.design-lab #bills>.cards .stat-icon-badge{order:2!important;width:34px!important;height:34px!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;margin:0!important;}
  html.design-lab #bills>.cards .stat.expense .stat-icon-badge{background:var(--negative-soft)!important;color:var(--expense)!important;}
  html.design-lab #bills>.cards .stat.income .stat-icon-badge{background:var(--positive-soft)!important;color:var(--income)!important;}

  /* Barra segmentada Todas | A pagar | A receber no topo do cartão. */
  html.design-lab .bills-segmented{display:inline-flex!important;gap:2px!important;margin:16px 0 6px!important;padding:3px!important;border:1px solid var(--app-line)!important;border-radius:999px!important;background:var(--app-surface-soft)!important;}
  html.design-lab .bills-segmented .seg-item{min-height:34px!important;padding:6px 14px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--muted)!important;font-size:12px!important;font-weight:700!important;cursor:pointer;}
  html.design-lab .bills-segmented .seg-item.active{background:var(--card)!important;color:var(--text)!important;box-shadow:0 1px 3px rgba(18,20,30,.10)!important;}

  /* Cabeçalho de cada grupo de prazo e linha em colunas de largura fixa. */
  html.design-lab #bills .bills-group-label{display:flex!important;align-items:center!important;gap:8px!important;margin:20px 0 2px!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:var(--text-3)!important;}
  html.design-lab #bills .bills-group-label span{display:inline-flex!important;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:7px;background:var(--app-surface-soft)!important;color:var(--text-2)!important;font-size:11px!important;letter-spacing:0!important;}
  html.design-lab #bills .bill-row-desktop{display:flex!important;align-items:center!important;gap:14px!important;padding:14px 0!important;border-top:1px solid var(--app-line)!important;border-bottom:0!important;overflow:visible!important;}
  html.design-lab #bills .bills-group-label+.bill-row-desktop{border-top:0!important;}
  html.design-lab #bills .bill-icon{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--app-surface-soft)!important;color:var(--text-2)!important;font-size:15px!important;}
  html.design-lab #bills .bill-mid{flex:1!important;min-width:0!important;}
  html.design-lab #bills .bill-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab #bills .bill-cat{font-size:12px!important;color:var(--muted)!important;margin-top:1px!important;}
  html.design-lab #bills .bill-due-col{width:130px!important;flex:0 0 130px!important;font-size:12px!important;font-weight:600!important;color:var(--text-2)!important;}
  html.design-lab #bills .bill-row-desktop .status-tag{min-width:84px;text-align:center;}
  html.design-lab #bills .bill-status-col{width:96px!important;flex:0 0 96px!important;}
  html.design-lab #bills .bill-amount-col{width:120px!important;flex:0 0 120px!important;text-align:right!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #bills .bill-row-desktop[data-kind="rec"] .bill-amount-col{color:var(--income)!important;}
  /* Na linha fica só o botão de confirmar; editar/excluir vivem na janela
     que abre ao clicar. */
  html.design-lab #bills .bill-row-desktop{cursor:pointer;}
  html.design-lab #bills .bill-row-desktop:hover{background:var(--app-surface-soft)!important;}
  html.design-lab #bills .bill-row-desktop .bill-actions{display:flex!important;gap:2px!important;flex:0 0 auto!important;width:34px!important;justify-content:flex-end!important;}
  /* Janela do compromisso. */
  html.design-lab .bill-detail-modal{max-width:430px!important;}
  html.design-lab .bill-detail-grid{display:grid!important;gap:2px!important;margin:4px 0 18px!important;}
  html.design-lab .bill-detail-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:11px 0!important;border-bottom:1px solid var(--app-line)!important;font-size:13px!important;}
  html.design-lab .bill-detail-row:last-child{border-bottom:0!important;}
  html.design-lab .bill-detail-row span{color:var(--muted)!important;}
  html.design-lab .bill-detail-row b{color:var(--text)!important;font-weight:700!important;text-align:right!important;}
  html.design-lab .bill-detail-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
  html.design-lab .bill-detail-actions .btn{flex:1 1 auto!important;justify-content:center!important;}
  html.design-lab .bill-detail-delete{color:var(--expense)!important;}
  html.design-lab #billListPanel{border-radius:22px!important;padding:8px 22px 18px!important;}

  /* ===== Orçamento ===== */
  html.design-lab .tx-summary-value.out{color:var(--expense)!important;}
  /* As fichas ficam soltas no fundo, em duas colunas — não dentro de um painel. */
  /* Editar/excluir não aparecem no mockup: ficam no canto, no hover. */

  /* ===== Categorias ===== */
  /* Dois cartões lado a lado; o painel de fora deixa de ser cartão pra não
     virar cartão-dentro-de-cartão. */
  html.design-lab #categories>.panel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;}
  /* minmax(0,1fr), não 1fr: a linha de subcategorias é `nowrap`, então com
     `1fr` a coluna crescia até o min-content do texto mais longo e o cartão
     de Receitas saía da tela. */
  html.design-lab #categories .cat-split{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;align-items:start!important;}
  html.design-lab #categories .cat-card{min-width:0!important;}
  html.design-lab #categories .cat-card{background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;padding:22px!important;box-shadow:none!important;}
  html.design-lab #categories .cat-card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:14px!important;}
  html.design-lab #categories .cat-card-title{display:flex!important;align-items:center!important;gap:10px!important;font-size:15px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #categories .cat-card-badge{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab #categories .cat-card-badge.expense{background:var(--negative-soft)!important;color:var(--expense)!important;}
  html.design-lab #categories .cat-card-badge.income{background:var(--positive-soft)!important;color:var(--income)!important;}
  html.design-lab #categories .cat-card-count{font-size:12px!important;font-weight:600!important;color:var(--muted)!important;}
  /* Linha navegável: selo colorido, nome + subcategorias numa linha, chevron. */
  html.design-lab #categories .cat-item-desktop{display:flex!important;align-items:center!important;gap:14px!important;padding:13px 0!important;border-bottom:0!important;border-top:1px solid var(--app-line)!important;cursor:pointer;}
  html.design-lab #categories .cat-card-head+.cat-item-desktop{border-top:0!important;padding-top:0!important;}
  html.design-lab #categories .cat-item-desktop:hover{background:var(--app-surface-soft)!important;}
  html.design-lab #categories .cat-icon{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;}
  html.design-lab #categories .cat-body{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:1px!important;}
  html.design-lab #categories .cat-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #categories .cat-subs{font-size:11px!important;color:var(--muted)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab #categories .cat-chev{font-size:12px!important;color:var(--muted)!important;flex:0 0 auto!important;}
  html.design-lab #categories .cat-item-desktop .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:12px!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab #categories .cat-item-desktop:hover .icon-btn,
  html.design-lab #categories .cat-item-desktop .icon-btn:focus-visible{opacity:1!important;}
  html.design-lab #categories .cat-item-desktop .icon-btn:hover{color:var(--expense)!important;}
  /* Rodapé "Nova categoria de despesa/receita" em cada cartão. */
  /* ===== Recorrentes =====
     #recSummary é um <div class="panel"> no HTML (diferente de #budgetKpis,
     que já nasce como <div class="cards"> sem estilo próprio) — sem isso
     aqui, o fundo/borda do .panel base ficam por trás do .tx-summary-card
     de dentro e o resultado é um cartão dentro do outro. */
  html.design-lab #recSummary{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
  html.design-lab #recListPanel{border-radius:22px!important;padding:8px 22px 18px!important;}
  html.design-lab .rec-table td{padding:15px 4px!important;}
  html.design-lab .rec-table .day-badge{font-size:12px!important;font-weight:700!important;color:var(--text-2)!important;white-space:nowrap;}
  html.design-lab .rec-table .row-actions{display:flex!important;gap:6px!important;justify-content:flex-end!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab .rec-table tbody tr:hover .row-actions{opacity:1!important;}
  html.design-lab .rec-table .icon-action{width:30px!important;height:30px!important;min-width:30px!important;border:1px solid var(--app-line)!important;border-radius:9px!important;background:var(--card)!important;color:var(--text-3)!important;font-size:12px!important;}
  html.design-lab .rec-table .icon-action:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}
  html.design-lab .rec-table .icon-action.del:hover{color:var(--expense)!important;}

  /* ===== Investimentos ===== */
  /* 4 KPIs (o mockup não mostra Líquido estimado nem Rentabilidade média —
     os dois continuam calculados, só não ficam na linha do topo). */
  html.design-lab #investments>.cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;}
  html.design-lab #investments>.cards .stat .t{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important;}
  html.design-lab #investments>.cards .stat-icon-badge{order:2!important;margin-left:auto!important;width:34px!important;height:34px!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
  html.design-lab #investments>.cards .stat.invest .stat-icon-badge{background:var(--surface-sunken)!important;color:var(--text-2)!important;}
  html.design-lab #investments>.cards .stat.balance .stat-icon-badge{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #investments>.cards .stat.income .stat-icon-badge{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab #investments>.cards .stat.expense .stat-icon-badge{background:var(--warning-soft)!important;color:var(--warning)!important;}

  /* Duas colunas no topo — Alocação por tipo ao lado de Evolução da
     carteira, como no mockup — e o resto (distribuição por instituição,
     rendimentos mês a mês) continua abaixo, em largura total: são dados
     reais que o mockup (só 4 blocos) não chegou a mostrar, então ficam
     disponíveis em vez de sumir. */
  /* .active precisa entrar na regra: sem ela, !important + especificidade de
     id vence o `.section{display:none}` que esconde telas inativas, e a
     tela fica visível por baixo de qualquer outra o tempo todo. */
  html.design-lab #investments.section.active{display:grid!important;grid-template-columns:1fr 1.4fr!important;gap:16px!important;}
  html.design-lab #investments>.cards,html.design-lab #investments>#invSummary{grid-column:1/-1!important;grid-row:1!important;order:0!important;}
  /* Esse mini-cabeçalho ("Meus investimentos" + botão duplicado de
     "+ Investimento") não existe no mockup e, sem posição própria na
     grade, entrava no auto-placement do CSS Grid disputando a mesma
     linha dos dois cartões abaixo — é a causa real deles saírem com
     alturas diferentes mesmo com grid-row igual nos dois. */
  html.design-lab #investments>.topbar{display:none!important;}
  html.design-lab #investments>.grid2{display:contents!important;}
  /* grid-row explícito nos dois cartões — sem isso, o algoritmo de
     auto-placement (que segue a ordem do DOM, não o `order` visual) podia
     jogá-los em linhas diferentes da grade, e aí "height:100%" abaixo não
     tinha uma linha compartilhada pra esticar; por isso as alturas saíam
     diferentes mesmo com o mesmo `align-items:stretch` do grid. */
  html.design-lab #investments .panel:has(#invTypeChart){order:1!important;grid-column:1!important;grid-row:2!important;}
  html.design-lab #investments .panel:has(#invChart){order:2!important;grid-column:2!important;grid-row:2!important;}
  html.design-lab #investments>#invList{order:3!important;grid-column:1/-1!important;grid-row:3!important;}
  /* "Suas posições" (igual ao mockup) fica logo após a dupla tipo+evolução;
     instituição/rendimentos são conteúdo extra, real, que o mockup estático
     não mostra — ficam mais abaixo, com uma legenda deixando claro que é
     um extra, pra não confundir com o que veio da referência. */
  /* "Distribuição por instituição" removido do computador a pedido — some
     só no desktop (mockup não tem esse cartão); o celular continua com ele
     normalmente. */
  html.design-lab #investments .panel:has(#invInstitutionChart){display:none!important;}
  html.design-lab #investments .panel:has(#invReturnChart){order:5!important;grid-column:1/-1!important;position:relative!important;}

  /* Rosca "Alocação por tipo": legenda ao lado (só %, sem o valor em R$),
     igual ao mockup. A de "por instituição" (extra) mantém o layout atual. */
  /* Grid em vez de flex-wrap: o título fica fixo em cima (igual ao card
     "Evolução da carteira" ao lado), e só o anel+legenda — a segunda
     "linha" — centralizam no espaço vertical que sobra. Com flex-wrap
     puro, "align-content:center" centralizava o BLOCO INTEIRO (título
     incluído), descolando o título dos dois cards um do outro. */
  /* "height:100%" aqui (pensado pra esticar esse cartão até a altura do
     "Evolução da carteira" ao lado) tinha o efeito contrário: numa linha
     de grid com altura automática (baseada no conteúdo), uma porcentagem
     sem referência definida faz o track de altura calcular errado — o
     cartão ficava MAIOR que o vizinho em vez de igual. "auto" deixa o
     align-items:stretch padrão do grid (herdado do container pai) igualar
     os dois de verdade. */
  html.design-lab #investments .panel:has(#invTypeChart){display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:auto 1fr!important;gap:18px!important;height:auto!important;}
  /* margin-bottom do <h3> não colapsa com o row-gap do grid (diferente do
     fluxo normal) — os dois somavam (18px de gap + 16/18px de margem),
     empurrando o anel+legenda pra baixo do centro real da linha 2. */
  html.design-lab #investments .panel:has(#invTypeChart)>h3{grid-column:1/-1!important;grid-row:1!important;margin-bottom:0!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>canvas{grid-column:1!important;grid-row:2!important;align-self:center!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>.chart-legend{grid-column:2!important;grid-row:2!important;align-self:center!important;margin-top:0!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>h3{flex:1 0 100%!important;}
  /* ~15% maior (147px → 169px) e ~10% deslocado pra baixo (margin-top),
     pedido explícito — mesmo cutout/cores, só o tamanho e a posição mudam. */
  html.design-lab #investments .panel:has(#invTypeChart)>canvas{flex:0 0 auto!important;max-width:169px!important;max-height:169px!important;margin-top:17px!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:10px!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-row{display:flex!important;align-items:center!important;gap:8px!important;font-size:13px!important;font-weight:600!important;color:var(--text-2)!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-dot{width:9px!important;height:9px!important;border-radius:4px!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-name{flex:1!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-value{display:none!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-pct{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;color:var(--text)!important;}

  html.design-lab #investments .panel:has(#invChart) .hint{margin:0!important;font-size:12px!important;color:var(--text-3)!important;font-weight:600!important;}
  html.design-lab #investments .inv-evo-sub{display:block!important;font-size:12px!important;font-weight:600!important;color:var(--text-3)!important;}
  /* Cartões "Alocação por tipo" e "Evolução da carteira" mais compactos,
     mais perto da proporção do mockup (o gráfico de linha estava esticando
     os dois cartões pra quase o dobro da altura, já que ficam no mesmo
     grid e esticam juntos). */
  html.design-lab #investments .panel:has(#invChart) canvas{max-height:150px!important;}
  html.design-lab #investments .panel:has(#invTypeChart){padding-top:22px!important;padding-bottom:18px!important;}

  /* Tabela "Suas posições". */
  html.design-lab .inv-positions-panel{border-radius:22px!important;padding:8px 22px 14px!important;}
  html.design-lab .inv-position-row:hover{background:var(--app-surface-soft)!important;}
  html.design-lab .inv-positions-add{padding:7px 12px!important;font-size:12px!important;}
  html.design-lab .inv-table td{padding:15px 4px!important;}
  html.design-lab .inv-table .type-pill{display:inline-block!important;font-size:11px!important;font-weight:700!important;padding:5px 11px!important;border-radius:10px!important;background:var(--app-surface-soft)!important;color:var(--text-2)!important;}
  html.design-lab .inv-table .profit-tag{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;}
  html.design-lab .inv-table .profit-tag.pos{color:var(--positive)!important;}
  html.design-lab .inv-table .profit-tag.neg{color:var(--negative)!important;}
  html.design-lab .inv-position-actions{display:flex!important;justify-content:flex-end!important;gap:2px!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab .inv-position-row:hover .inv-position-actions{opacity:1!important;}
  html.design-lab .inv-position-actions .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;font-size:12px!important;color:var(--muted)!important;}
  html.design-lab .inv-position-actions .icon-btn:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}

  /* ===== Patrimônio ===== */
  /* A faixa de 5 KPIs vira o cartão-herói + as duas colunas — os mesmos
     números, só que na estrutura do mockup. */
  html.design-lab #patrimony>.cards{display:none!important;}
  html.design-lab .hero-card{margin-bottom:16px!important;padding:26px 28px!important;border-radius:24px!important;background:linear-gradient(135deg,#305bf3,#1c3fc7)!important;color:#fff!important;}
  html.design-lab #patrimony .hero-card{display:block!important;}
  html.design-lab .hero-label{font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab .hero-value{margin-top:6px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:34px!important;font-weight:700!important;letter-spacing:-.02em!important;}
  html.design-lab .hero-bar{display:flex!important;margin-top:20px!important;height:8px!important;border-radius:5px!important;overflow:hidden!important;background:rgba(255,255,255,.16)!important;}
  html.design-lab .hero-bar-assets{background:var(--accent-light)!important;}
  html.design-lab .hero-bar-liab{background:var(--negative)!important;}
  html.design-lab .hero-legend{display:flex!important;gap:32px!important;margin-top:16px!important;}
  html.design-lab .hero-legend-item{display:flex!important;align-items:center!important;gap:8px!important;}
  html.design-lab .hero-legend-dot{width:9px!important;height:9px!important;border-radius:4px!important;flex:0 0 auto!important;}
  html.design-lab .hero-legend-dot.assets{background:var(--accent-light)!important;}
  html.design-lab .hero-legend-dot.liab{background:var(--negative)!important;}
  html.design-lab .hero-legend-label{font-size:12px!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab .hero-legend-value{margin-top:2px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:14px!important;font-weight:600!important;}

  html.design-lab .split-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;margin-bottom:16px!important;}
  html.design-lab .split-row .card{background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;padding:20px 22px!important;}
  html.design-lab .split-row .card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:6px!important;padding-bottom:14px!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab .split-row .card-title{display:flex!important;align-items:center!important;gap:10px!important;font-size:14px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .split-row .card-title-icon{width:30px!important;height:30px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;}
  html.design-lab .split-row .card-title-icon.assets{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab .split-row .card-title-icon.liab{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab .split-row .card-total{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:16px!important;font-weight:700!important;}
  html.design-lab .split-row .card-total.assets{color:var(--positive)!important;}
  html.design-lab .split-row .card-total.liab{color:var(--negative)!important;}
  html.design-lab .split-row .item-row{display:flex!important;align-items:center!important;gap:12px!important;padding:13px 0!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab .split-row .card-head+.item-row{border-top:0!important;}
  html.design-lab .split-row .item-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:13px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab .split-row .item-body{flex:1!important;min-width:0!important;}
  html.design-lab .split-row .item-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .split-row .item-sub{font-size:12px!important;color:var(--muted)!important;margin-top:1px!important;}
  html.design-lab .split-row .item-amount{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:13px!important;font-weight:700!important;color:var(--text)!important;white-space:nowrap;}

  /* ===== Caixinhas ===== */
  /* Anel de progresso genérico (Caixinhas usa em 2 tamanhos: destaque e
     grade secundária). Feito só em CSS (conic-gradient), sem depender de
     canvas/Chart.js pra um indicador tão simples. */
  .vault-ring{position:relative;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;}
  .vault-ring svg{position:absolute;inset:0;width:100%;height:100%;}
  .vault-ring-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;}
  .vault-ring-icon{font-size:16px;line-height:1;}
  .vault-ring-inner b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:11px;font-weight:800;color:var(--text);line-height:1.1;}
  .vault-ring.vault-ring-done{background:var(--positive);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;}
  html.design-lab #vaults .hero-card .vault-ring-inner b{color:#fff;}
  html.design-lab #vaults .hero-card .vault-ring{width:96px!important;height:96px!important;}
  html.design-lab #vaults .hero-card .vault-ring-inner b{font-size:20px!important;}
  html.design-lab #vaults .hero-card .vault-ring-icon{font-size:26px!important;}

  html.design-lab #vaults .hero-card{display:block!important;padding:26px 30px!important;background:linear-gradient(135deg,var(--sidebar-bg-2,#161f45),var(--sidebar-bg,#0f1630))!important;}
  html.design-lab .vault-hero-inner{position:relative!important;display:flex!important;align-items:center!important;gap:26px!important;}
  html.design-lab .vault-hero-manage-actions{position:absolute!important;top:-10px!important;right:-12px!important;display:flex!important;gap:2px!important;}
  html.design-lab .vault-hero-manage-actions .icon-btn{width:30px!important;height:30px!important;min-width:30px!important;border:0!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:12px!important;}
  html.design-lab .vault-hero-manage-actions .icon-btn:hover{background:rgba(255,255,255,.2)!important;}
  html.design-lab .vault-hero-mid{flex:1!important;min-width:0!important;}
  html.design-lab .vault-hero-label{font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:var(--accent-light)!important;margin-bottom:6px!important;}
  html.design-lab .vault-hero-name{font-size:20px!important;font-weight:800!important;letter-spacing:-.01em!important;}
  html.design-lab .vault-hero-amount{margin-top:6px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:24px!important;font-weight:700!important;}
  html.design-lab .vault-hero-amount span{font-family:inherit!important;font-size:14px!important;font-weight:500!important;opacity:.7!important;}
  html.design-lab .vault-hero-actions{display:flex!important;gap:10px!important;margin-top:16px!important;}
  html.design-lab .vault-hero-actions .btn-ghost{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;}
  html.design-lab .vault-hero-forecast{flex:0 0 auto!important;text-align:right!important;}
  html.design-lab .vault-hero-forecast .vault-hero-label{margin-bottom:8px!important;}
  html.design-lab .vault-hero-forecast-value{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:15px!important;font-weight:700!important;}

  html.design-lab .vault-others-title{margin:22px 0 14px!important;font-size:15px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .vault-others-grid{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:16px!important;padding-bottom:4px!important;}
  html.design-lab .vault-others-grid>*{flex:0 0 calc(33.333% * 1.15 - 16px)!important;}
  html.design-lab .vault-desktop-card{position:relative!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;box-shadow:none!important;padding:22px 16px!important;height:257px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;color:var(--text)!important;cursor:pointer;text-align:center;}
  html.design-lab .vault-desktop-card .vault-ring{width:64px!important;height:64px!important;}
  html.design-lab .vault-desktop-card.is-done .vault-ring-inner{display:none!important;}
  html.design-lab .vault-desktop-card .vault-desktop-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .vault-desktop-card .vault-desktop-amount{font-size:12px!important;color:var(--muted)!important;}
  html.design-lab .vault-desktop-card .vault-desktop-forecast{margin-top:-6px!important;font-size:11px!important;color:var(--text-3)!important;}
  html.design-lab .vault-desktop-card .vault-desktop-yield{margin-top:-4px!important;font-size:11px!important;}
  html.design-lab .vault-hero-yield{margin-top:6px!important;font-size:12.5px!important;}
  html.design-lab .vault-desktop-card .vault-desktop-save-btn{width:100%!important;margin-top:2px!important;padding:7px 10px!important;font-size:12px!important;opacity:0!important;pointer-events:none!important;transition:opacity .15s!important;}
  html.design-lab .vault-desktop-card:hover .vault-desktop-save-btn{opacity:1!important;pointer-events:auto!important;}
  /* Especificidade dobrada de propósito: mais abaixo neste arquivo,
     "#vaultList .vault-card .vault-manage-actions{position:static!important}"
     tem um #id na seletora (pensado pro card antigo de Contas/Cartões) e
     ganhava desta regra mesmo com !important dos dois lados — o
     editar/excluir deste card novo não ficava no canto, virava mais um
     item da linha (position:static). */
  html.design-lab .vault-desktop-card.vault-desktop-card .vault-manage-actions.vault-manage-actions{position:absolute!important;top:10px!important;right:10px!important;display:flex!important;gap:2px!important;opacity:0!important;transition:opacity .15s!important;}
  /* Também precisa da especificidade dobrada — sem isso, a regra de base
     logo acima (dobrada pra ganhar do #vaultList) passou a ganhar DESTA
     regra de hover também, e o hover parava de revelar os botões. */
  html.design-lab .vault-desktop-card.vault-desktop-card:hover .vault-manage-actions.vault-manage-actions{opacity:1!important;}
  html.design-lab .vault-desktop-card .vault-manage-actions .icon-btn{width:26px!important;height:26px!important;min-width:26px!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:11px!important;}
  html.design-lab .vault-desktop-card .vault-manage-actions .icon-btn:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}
  html.design-lab .add-vault-card{border:1.5px dashed var(--border)!important;border-radius:22px!important;padding:20px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;color:var(--text-3)!important;min-height:164px!important;background:none!important;font-size:13px!important;font-weight:700!important;cursor:pointer;}
  /* "+ Criar nova conta/caixinha" com a mesma altura das contas/caixinhas
     de verdade ao lado (a altura natural do botão tracejado não batia com
     a altura real dos cartões — menor em Contas, maior em Caixinhas). */
  html.design-lab #accountList .add-vault-card{height:180px!important;min-height:0!important;}
  html.design-lab .vault-others-grid .add-vault-card{height:257px!important;min-height:0!important;}
  html.design-lab .add-vault-card:hover{border-color:var(--primary)!important;color:var(--primary)!important;}
  html.design-lab .add-vault-card i{font-size:22px!important;}
  html.design-lab #vaultHistoryPanel{margin-top:20px!important;}

  /* ===== Gastos formiga ===== */
  /* O painel de critérios vira uma pílula compacta com os MESMOS campos
     (continuam editáveis) — só perde a moldura de cartão grande. */
  html.design-lab #ants>.detail-topbar+.panel{display:inline-flex!important;align-items:center!important;gap:8px!important;width:auto!important;max-width:none!important;margin:0 0 20px!important;padding:9px 14px!important;border:0!important;border-radius:14px!important;background:var(--app-surface-soft)!important;box-shadow:none!important;}
  html.design-lab #ants>.detail-topbar+.panel::before{content:"\f013";font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px;color:var(--text-3);}
  html.design-lab #ants>.detail-topbar+.panel>h3,
  html.design-lab #ants>.detail-topbar+.panel>.hint{display:none!important;}
  html.design-lab #ants .row2{display:flex!important;align-items:center!important;gap:6px!important;max-width:none!important;}
  html.design-lab #ants .row2 .field{display:flex!important;align-items:center!important;gap:4px!important;margin:0!important;font-size:12.5px!important;font-weight:700!important;color:var(--text-2)!important;}
  html.design-lab #ants .row2 .field label{display:none!important;}
  html.design-lab #ants .row2 .field:first-child::before{content:"Até R$";white-space:nowrap;}
  html.design-lab #ants .row2 .field:last-child::before{content:"· mín.";white-space:nowrap;}
  html.design-lab #ants .row2 .field:last-child::after{content:"x";}
  html.design-lab #ants #antLimit,html.design-lab #ants #antMin{width:34px!important;min-width:34px!important;min-height:0!important;height:20px!important;padding:2px 0!important;border:0!important;background:none!important;font-size:12.5px!important;font-weight:700!important;color:var(--text-2)!important;text-align:center!important;-moz-appearance:textfield!important;-webkit-appearance:none!important;appearance:none!important;}
  html.design-lab #ants #antLimit{width:60px!important;min-width:60px!important;}
  html.design-lab #ants #antLimit::-webkit-outer-spin-button,html.design-lab #ants #antLimit::-webkit-inner-spin-button,
  html.design-lab #ants #antMin::-webkit-outer-spin-button,html.design-lab #ants #antMin::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}
  html.design-lab #ants>.detail-topbar+.panel{flex-wrap:wrap!important;row-gap:4px!important;}

  /* 3 KPIs do mockup (Projeção anual continua calculada, só sai do topo —
     o valor anual de cada padrão já aparece na lista, por item). */
  html.design-lab #ants>.cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;}
  html.design-lab #ants>.cards .stat:has(#antYear){display:none!important;}
  html.design-lab #ants>.cards .stat .t{display:flex!important;align-items:center!important;gap:8px!important;}
  html.design-lab #ants>.cards .stat-icon-badge{width:32px!important;height:32px!important;border-radius:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 32px!important;}
  html.design-lab #ants>.cards .stat.expense:not(.ant-pct-card) .stat-icon-badge{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #ants>.cards .stat.card .stat-icon-badge{background:var(--warning-soft)!important;color:var(--warning)!important;}
  html.design-lab #ants>.cards .ant-pct-card .stat-icon-badge{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #ants>.cards .ant-top-card .stat-icon-badge{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #ants>.cards .hint{margin-top:4px!important;font-size:11.5px!important;color:var(--text-3)!important;}

  /* Cabeçalho do cartão com a contagem à direita. */
  html.design-lab #ants>.cards+.panel{border-radius:22px!important;padding:22px!important;}
  html.design-lab .ant-list-count{font-size:12px!important;color:var(--text-3)!important;font-weight:600!important;}

  /* Linha em grade de 4 colunas, como no mockup. */
  html.design-lab .ant-row-desktop{display:grid!important;grid-template-columns:1fr 120px 130px 100px!important;align-items:center!important;gap:14px!important;padding:14px 0!important;border-top:1px solid var(--app-line)!important;border-bottom:0!important;}
  html.design-lab #antList .ant-row-desktop:first-of-type{border-top:0!important;padding-top:0!important;}
  html.design-lab .ant-row-desktop .ant-desc{display:flex!important;align-items:center!important;gap:12px!important;}
  html.design-lab .ant-row-desktop .ant-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:13px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;}
  html.design-lab .ant-row-desktop .ant-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .ant-row-desktop .ant-cat{font-size:11px!important;color:var(--text-3)!important;margin-top:2px!important;}
  html.design-lab .ant-row-desktop .ant-count{display:inline-flex!important;align-items:center!important;gap:5px!important;background:var(--warning-soft)!important;color:var(--warning)!important;border-radius:10px!important;padding:5px 10px!important;font-size:12px!important;font-weight:700!important;width:fit-content!important;}
  html.design-lab .ant-row-desktop .ant-avg{font-size:12.5px!important;color:var(--text-2)!important;font-weight:600!important;}
  html.design-lab .ant-row-desktop .ant-total{text-align:right!important;font-size:13.5px!important;font-weight:700!important;color:var(--text)!important;}

  /* ===== Comparativo ===== */
  html.design-lab #compare.section.active{display:grid!important;grid-template-columns:1.4fr 1fr!important;gap:16px!important;}
  html.design-lab #compare.section.active>.panel{grid-column:1/-1!important;order:5!important;}
  html.design-lab #compare.section.active>.compare-kpis{grid-column:1/-1!important;order:0!important;}
  html.design-lab #compare.section.active>#cmpByCategoryPanel{order:1!important;grid-column:1!important;}
  html.design-lab #compare.section.active>.panel:has(#opportunityList){order:2!important;grid-column:2!important;}
  html.design-lab #compare.section.active>.panel:has(#reportSummary){order:3!important;}
  html.design-lab #compare.section.active>.panel:has(#avgList){order:4!important;}

  /* KPIs: 3 cartões, ícone-selo à esquerda, delta com seta embaixo. */
  html.design-lab .compare-kpis{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin-bottom:0!important;}
  html.design-lab .compare-kpis .kpi-card{background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:20px!important;padding:18px 20px!important;}
  html.design-lab .compare-kpis .kpi-top{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:10px!important;}
  html.design-lab .compare-kpis .kpi-icon{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab .compare-kpis .kpi-icon.negative{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab .compare-kpis .kpi-icon.positive{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab .compare-kpis .kpi-icon.accent{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab .compare-kpis .kpi-label{font-size:12px!important;color:var(--text-3)!important;font-weight:700!important;}
  html.design-lab .compare-kpis .kpi-value{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:22px!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab .compare-kpis .kpi-delta{font-size:12px!important;font-weight:700!important;margin-top:4px!important;display:flex!important;align-items:center!important;gap:4px!important;}
  html.design-lab .compare-kpis .kpi-delta svg{width:12px;height:12px;}
  html.design-lab .compare-kpis .kpi-delta .negative{color:var(--negative)!important;display:flex;align-items:center;gap:4px;}
  html.design-lab .compare-kpis .kpi-delta .positive{color:var(--positive)!important;display:flex;align-items:center;gap:4px;}
  html.design-lab .compare-kpis .kpi-delta .muted{color:var(--text-3)!important;}
  html.design-lab .compare-kpis .kpi-delta .down svg{transform:rotate(180deg);}

  /* "Por categoria": esconde o gráfico Chart.js e mostra as barras duplas. */
  html.design-lab #cmpByCategoryPanel{border-radius:22px!important;padding:22px!important;}
  html.design-lab #cmpByCategoryPanel .cmp-head{margin-bottom:2px!important;}
  html.design-lab #cmpByCategoryPanel #cmpTitle{font-size:15px!important;}
  html.design-lab #cmpByCategoryPanel .compare-baseline-switch{display:none!important;}
  html.design-lab #cmpByCategoryPanel #cmpSub{display:none!important;}
  html.design-lab #cmpByCategoryPanel .cmp-chart-wrap{display:none!important;}
  html.design-lab .cmp-row-desktop{display:grid!important;grid-template-columns:170px 1fr 110px 70px!important;align-items:center!important;gap:14px!important;padding:13px 8px!important;border-top:1px solid var(--app-line)!important;border-radius:10px!important;}
  /* Mockup do Comparativo não tem os cards "Resumo do período", "Comparação
     com sua média histórica" nem "Variação vs mês anterior" — só os 3 KPIs
     do topo e o comparativo por categoria. */
  html.design-lab #compare>.panel:has(#reportSummary),
  html.design-lab #compare>.panel:has(#avgList),
  html.design-lab #compare>.panel:has(#cmpList){display:none!important;}
  html.design-lab #cmpListDesktop .cmp-row-desktop:first-child{border-top:0!important;padding-top:0!important;}
  html.design-lab .cmp-row-desktop .cmp-cat{display:flex!important;align-items:center!important;gap:10px!important;font-size:13px!important;font-weight:700!important;color:var(--text)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab .cmp-row-desktop .cmp-icon{width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;}
  html.design-lab .cmp-row-desktop .cmp-bars{display:flex!important;flex-direction:column!important;gap:5px!important;}
  html.design-lab .cmp-row-desktop .cmp-bar-track{height:8px!important;border-radius:5px!important;background:var(--app-surface-soft)!important;overflow:hidden!important;}
  html.design-lab .cmp-row-desktop .cmp-bar-fill{height:100%!important;border-radius:5px!important;}
  html.design-lab .cmp-row-desktop .cmp-total{text-align:right!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .cmp-row-desktop .cmp-delta{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;font-size:12px!important;font-weight:700!important;padding:4px 8px!important;border-radius:8px!important;}
  html.design-lab .cmp-row-desktop .cmp-delta.up{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab .cmp-row-desktop .cmp-delta.down{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab .cmp-row-desktop .cmp-delta.eq{background:var(--app-surface-soft)!important;color:var(--text-3)!important;}

  /* "Pontos para revisar": prosa com ícone, no lugar da lista tabular. */
  html.design-lab .panel:has(#opportunityList){border-radius:22px!important;padding:22px!important;}
  html.design-lab .insight-row{display:flex!important;align-items:flex-start!important;gap:12px!important;padding:12px 0!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab #opportunityList .insight-row:first-child{border-top:0!important;padding-top:0!important;}
  html.design-lab .insight-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab .insight-icon.negative{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab .insight-icon.positive{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab .insight-icon.warning{background:var(--warning-soft)!important;color:var(--warning)!important;}
  html.design-lab .insight-icon.info{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab .insight-icon.warn{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab .insight-text{font-size:12.5px!important;color:var(--text-2)!important;line-height:1.5!important;padding-top:6px!important;}

  /* ===== Relatórios ===== */
  /* "Relatórios" deixou de ser um modal pequeno pra virar página cheia —
     esconde o que só fazia sentido no diálogo (cabeçalho com X de fechar)
     e o menu antigo de botões, já substituído pela grade nova. O
     "Relatório personalizado" (período livre + categoria) continua
     disponível embaixo — é uma ferramenta real que o mockup não mostra. */
  /* #reports-page herda a classe .account-action-page (feita pra telas
     estreitas de uma coluna só, tipo "alterar senha") — no computador ela
     limitava a página inteira a 680px, centralizada com sobras enormes de
     espaço vazio nas duas laterais, mesmo a página tendo painéis de 2
     colunas por dentro. Sem efeito no celular (a viewport já é mais
     estreita que 680px). */
  html.design-lab #reports-page.account-action-page{max-width:none!important;margin:0!important;}
  html.design-lab #reports-page>.account-action-head{display:none!important;}
  html.design-lab #reports-page>.panel:last-of-type>.mais-page-inner-title,
  html.design-lab #reports-page>.panel:last-of-type>.tool-modal-intro,
  html.design-lab #reports-page>.panel:last-of-type>.report-options{display:none!important;}
  html.design-lab #reports-page>.panel:last-of-type{border:0!important;box-shadow:none!important;background:none!important;padding:0!important;margin-top:4px!important;}
  html.design-lab #reports-page>.panel:last-of-type .report-builder{display:none!important;}
  html.design-lab #reports-page>.panel:last-of-type{display:none!important;}

  html.design-lab #reportsPeriodPanel{display:block!important;border-radius:22px!important;padding:22px!important;}
  html.design-lab .period-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:16px!important;}
  html.design-lab .period-title{font-size:15px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .period-sub{font-size:12px!important;color:var(--text-3)!important;margin-top:2px!important;}
  html.design-lab .period-head-right{display:flex!important;align-items:center!important;gap:10px!important;}
  html.design-lab .chip-row{display:flex!important;gap:8px!important;flex-wrap:wrap!important;}
  html.design-lab .period-chip{font-size:12px!important;font-weight:700!important;padding:8px 14px!important;border-radius:10px!important;color:var(--text-2)!important;background:var(--app-surface-soft)!important;border:0!important;cursor:pointer;}
  /* Botão "Escolher período" do "Personalizado" — aparece ao lado dos chips
     quando esse chip é escolhido (ver setReportsPeriod), some de novo (via
     .hidden) pros outros períodos. Abre o calendário finmoney (rpOpenCalendar),
     não um <input type=date> nativo. */
  html.design-lab .period-chip.active{background:var(--primary)!important;color:#fff!important;}


  html.design-lab #reportsSplitRow{display:grid!important;grid-template-columns:1.35fr 1fr!important;gap:16px!important;align-items:start!important;}
  html.design-lab .reports-side-col{display:flex!important;flex-direction:column!important;gap:16px!important;}
  html.design-lab #reportsCategoryPanel,html.design-lab #reportsInsightsPanel,html.design-lab #reportsExportPanel{border-radius:22px!important;padding:22px!important;}
  html.design-lab .reports-card-head{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:14px!important;font-size:15px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .reports-card-head i{color:var(--accent);font-size:16px;}

  html.design-lab .cat-type-toggle{display:flex!important;background:var(--app-surface-soft)!important;border-radius:12px!important;padding:3px!important;gap:2px!important;width:fit-content!important;margin-bottom:20px!important;}
  html.design-lab .cat-type-btn{font-size:12px!important;font-weight:700!important;padding:8px 16px!important;border-radius:9px!important;color:var(--text-2)!important;background:none!important;border:0!important;cursor:pointer;}
  html.design-lab .cat-type-btn.active{background:var(--card)!important;color:var(--text)!important;box-shadow:0 1px 2px rgba(18,20,30,.08)!important;}

  html.design-lab .donut-block{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;margin-bottom:22px!important;}
  html.design-lab .donut-center{width:200px!important;height:200px!important;position:relative!important;}
  /* Pedido explícito: o mesmo retângulo de foco que já tinha sido tirado do
     celular também aparecia no computador ao clicar numa fatia (contorno de
     foco padrão do navegador "vazando" pro elemento clicado) — outline:none
     nos 3 níveis porque o foco pode pousar em qualquer um deles dependendo
     do navegador. */
  html.design-lab #reportsCategoryPieSvg{width:200px!important;height:200px!important;display:flex!important;align-items:center!important;justify-content:center!important;outline:none!important;-webkit-tap-highlight-color:transparent!important;}
  /* "Despesas"/"Receitas" que aparecia junto ao valor no centro do anel —
     removido a pedido (o valor de cima já tinha sido tirado numa rodada
     anterior; agora some o rótulo também). */
  html.design-lab #reportsDonutCenterText{display:none!important;}
  /* CORRIGIDO: width:100% num filho de flex sem largura própria (SVG só
     tem viewBox) fazia o navegador calcular uma largura errada (~95px em
     vez de 168px) — o anel ficava "espremido" na horizontal. Tamanho fixo
     em px resolve de vez, já que o cartão sempre mede 168x168. */
  html.design-lab #reportsCategoryPieSvg svg{width:200px!important;height:200px!important;flex:none!important;outline:none!important;-webkit-tap-highlight-color:transparent!important;}
  html.design-lab #reportsCategoryPieSvg svg *{outline:none!important;-webkit-tap-highlight-color:transparent!important;}
  /* O valor já aparece no cartão de indicador "Despesas"/"Receitas" logo
     acima — repetir de novo no centro do anel era redundante. */
  html.design-lab #reportsDonutCenterText .donut-center-value{display:none!important;}
  html.design-lab .reports-donut-tooltip{position:absolute!important;top:0;left:0;z-index:20;display:flex!important;flex-direction:column!important;gap:2px!important;padding:8px 11px!important;border-radius:10px!important;background:var(--sidebar-bg,#0f1630)!important;color:#fff!important;font-size:11.5px!important;font-weight:600!important;white-space:nowrap;pointer-events:none!important;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;box-shadow:0 8px 20px rgba(0,0,0,.22);}
  html.design-lab .reports-donut-tooltip b{font-size:12px!important;font-weight:800!important;}
  html.design-lab .reports-donut-tooltip.is-visible{opacity:1;transform:translateY(0);}
  html.design-lab #reportsCategoryList .cat-row{transition:background .3s ease;border-radius:12px;}
  html.design-lab #reportsCategoryList .cat-row.is-flash{background:var(--accent-soft,rgba(48,91,243,.12));}

  html.design-lab .cat-row{padding:14px 0!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab #reportsCategoryList .cat-row:first-child{border-top:0!important;padding-top:0!important;}
  html.design-lab .cat-row-head{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:10px!important;}
  html.design-lab .cat-row .cat-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab .cat-row .cat-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;flex:1!important;}
  html.design-lab .cat-row .cat-pct{font-size:11px!important;font-weight:700!important;color:var(--text-3)!important;width:32px!important;text-align:right!important;}
  html.design-lab .cat-row .cat-amount{font-size:13px!important;font-weight:700!important;font-family:'Space Grotesk',system-ui,sans-serif!important;width:96px!important;text-align:right!important;color:var(--text)!important;}
  html.design-lab .cat-bar-track{height:6px!important;border-radius:4px!important;background:var(--app-surface-soft)!important;overflow:hidden!important;margin-left:46px!important;}
  html.design-lab .cat-bar-fill{height:100%!important;border-radius:4px!important;}
  html.design-lab .sub-list{margin:10px 0 0 46px!important;display:flex!important;flex-direction:column!important;gap:6px!important;}
  html.design-lab .sub-row{display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:12px!important;color:var(--text-3)!important;}
  html.design-lab .sub-row-name::before{content:"– ";}

  html.design-lab .export-hint{font-size:12px!important;color:var(--text-3)!important;margin:0 0 14px!important;}
  html.design-lab .export-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  html.design-lab .export-btn{display:flex!important;align-items:center!important;gap:12px!important;padding:14px!important;border:1px solid var(--app-line)!important;border-radius:14px!important;background:var(--card)!important;text-align:left!important;cursor:pointer;}
  html.design-lab .export-btn:hover{background:var(--app-surface-soft)!important;}
  html.design-lab .export-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:12px!important;background:var(--accent-soft)!important;color:var(--accent)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab .export-body{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:1px!important;}
  html.design-lab .export-title{font-size:12.5px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .export-desc{font-size:10.5px!important;color:var(--text-3)!important;margin-top:1px!important;line-height:1.3!important;}

  /* ===== Cartões (mestre-detalhe) ===== */
  html.design-lab #cards-sec>#cardsKpis{display:none!important;}
  html.design-lab .cards-master-detail{display:flex!important;align-items:flex-start!important;gap:20px!important;}
  html.design-lab .cards-master-detail #cardList.cards-col{display:flex!important;flex-direction:column!important;gap:16px!important;width:352px!important;flex:0 0 352px!important;}
  html.design-lab .detail-col{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:16px!important;}

  html.design-lab .credit-card{border-radius:24px!important;padding:22px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;height:172px!important;overflow:hidden!important;color:#fff!important;cursor:pointer;}
  html.design-lab .credit-card.selected{outline:2px solid var(--primary)!important;outline-offset:2px!important;}
  html.design-lab .cc-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;}
  html.design-lab .cc-bank-group{display:flex!important;align-items:center!important;gap:9px!important;}
  html.design-lab .bank-badge{width:26px!important;height:26px!important;flex:0 0 26px!important;background:none!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;color:#fff!important;}
  html.design-lab .cc-bank{color:#fff!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;font-size:15px!important;}
  html.design-lab .cc-number{color:rgba(255,255,255,.92)!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:15px!important;letter-spacing:.12em!important;}
  html.design-lab .cc-bottom{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;}
  html.design-lab .cc-label{color:rgba(255,255,255,.6)!important;font-size:9px!important;text-transform:uppercase!important;letter-spacing:.06em!important;font-weight:700!important;margin-bottom:3px!important;}
  html.design-lab .cc-value{color:#fff!important;font-size:12px!important;font-weight:700!important;}
  html.design-lab .cc-manage-actions{display:flex!important;gap:2px!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab .credit-card:hover .cc-manage-actions{opacity:1!important;}
  html.design-lab .cc-manage-actions .icon-btn{width:26px!important;height:26px!important;min-width:26px!important;border:0!important;background:rgba(255,255,255,.18)!important;color:#fff!important;font-size:11px!important;border-radius:8px!important;}
  html.design-lab .cc-manage-actions .icon-btn:hover{background:rgba(255,255,255,.3)!important;}
  html.design-lab .add-card-btn{border:1.5px dashed var(--border)!important;border-radius:18px!important;padding:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;color:var(--text-3)!important;font-size:13px!important;font-weight:700!important;background:none!important;cursor:pointer;}
  html.design-lab .add-card-btn:hover{border-color:var(--primary)!important;color:var(--primary)!important;}
  /* Alça de arrastar-para-reordenar cartões (grade do computador) — some
     junto com o resto de .cc-manage-actions até passar o mouse, mesmo
     padrão de opacidade. */
  /* Alça no topo-centro do cartão (extremo Y, centro X) — pedido explícito,
     em vez de dentro da linha do cabeçalho junto com banco/ícones. Mesma
     posição reaproveitada pelas Contas, ver .account-desktop-card abaixo. */
  html.design-lab .credit-card{position:relative!important;}
  html.design-lab .credit-card .card-drag-handle-top{position:absolute!important;z-index:4!important;top:7px!important;left:50%!important;transform:translateX(-50%)!important;width:34px!important;height:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:10px!important;background:rgba(0,0,0,.28)!important;color:rgba(255,255,255,.85)!important;cursor:grab!important;touch-action:none!important;opacity:0!important;transition:opacity .16s ease,background .16s ease!important;font-size:10px!important;}
  html.design-lab .credit-card:hover .card-drag-handle-top,html.design-lab .credit-card:focus-within .card-drag-handle-top{opacity:1!important;}
  html.design-lab .credit-card .card-drag-handle-top:hover{background:rgba(0,0,0,.4)!important;}
  html.design-lab .credit-card .card-drag-handle-top:active{cursor:grabbing!important;}

  html.design-lab #cardsInvoicePanel,html.design-lab #cardsInvoiceListPanel{border-radius:22px!important;padding:22px!important;}
  html.design-lab .invoice-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  html.design-lab .invoice-head-left{display:flex!important;align-items:center!important;gap:14px!important;min-width:0!important;}
  html.design-lab .invoice-badge{width:46px!important;height:46px!important;flex:0 0 46px!important;background:none!important;font-size:22px!important;}
  html.design-lab .invoice-title{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important;color:var(--text)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab .invoice-sub{font-size:12px!important;color:var(--text-3)!important;margin-top:2px!important;}
  html.design-lab .invoice-status{flex:0 0 auto!important;font-size:11px!important;font-weight:700!important;padding:5px 12px!important;border-radius:10px!important;background:var(--warning-soft)!important;color:var(--warning)!important;}
  html.design-lab .invoice-status.paid{background:var(--positive-soft)!important;color:var(--positive)!important;}

  html.design-lab .invoice-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin-top:22px!important;padding-top:22px!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab .invoice-stat-label{font-size:11px!important;font-weight:700!important;color:var(--text-3)!important;text-transform:uppercase!important;letter-spacing:.04em!important;margin-bottom:8px!important;}
  html.design-lab .invoice-stat-value{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:21px!important;font-weight:600!important;color:var(--text)!important;}

  html.design-lab .limit-bar-wrap{margin-top:20px!important;}
  html.design-lab .limit-bar-top{display:flex!important;justify-content:space-between!important;font-size:12px!important;font-weight:700!important;color:var(--text-2)!important;margin-bottom:8px!important;}
  html.design-lab .limit-bar{height:9px!important;border-radius:5px!important;background:var(--app-surface-soft)!important;overflow:hidden!important;}
  html.design-lab .limit-bar-fill{height:100%!important;background:linear-gradient(90deg,var(--accent-light),var(--primary))!important;border-radius:5px!important;}

  html.design-lab .card-actions{display:flex!important;gap:10px!important;margin-top:22px!important;}
  html.design-lab .btn-pay{flex:1!important;background:linear-gradient(150deg,var(--accent-light),var(--primary))!important;color:#fff!important;font-size:13px!important;font-weight:700!important;padding:12px!important;border-radius:14px!important;text-align:center!important;border:0!important;box-shadow:0 10px 22px rgba(48,91,243,.28)!important;cursor:pointer;}
  html.design-lab .btn-pdf{display:flex!important;align-items:center!important;gap:8px!important;background:var(--card)!important;border:1px solid var(--app-line)!important;color:var(--text)!important;font-size:13px!important;font-weight:700!important;padding:12px 16px!important;border-radius:14px!important;cursor:pointer;}
  html.design-lab .btn-pdf:hover{background:var(--app-surface-soft)!important;}

  html.design-lab .cards-invoice-table td{padding:13px 4px!important;}
  html.design-lab .cards-invoice-table .tx-icon{background:var(--app-surface-soft)!important;color:var(--text-2)!important;width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:12px!important;}

  /* ===== Calendário financeiro ===== */
  /* Calendário à esquerda ocupando as duas linhas; as duas fichas da
     direita (Próximos compromissos / Vencidas) empilhadas numa coluna
     fixa de 360px — mesma proporção do mockup. */
  html.design-lab #calendar.section.active{display:grid!important;grid-template-columns:1fr 360px!important;gap:20px 20px!important;align-items:start!important;}
  html.design-lab #calendarMainPanel{border-radius:22px!important;padding:22px!important;grid-column:1!important;grid-row:1/3!important;}
  html.design-lab #calendarUpcomingPanel,html.design-lab #calendarOverduePanel{display:block!important;border-radius:22px!important;padding:22px!important;}
  html.design-lab #calendarUpcomingPanel{grid-column:2!important;grid-row:1!important;}
  html.design-lab #calendarOverduePanel{grid-column:2!important;grid-row:2!important;margin-top:16px!important;}

  html.design-lab #calendarMainPanel h3{margin-bottom:4px!important;}
  html.design-lab #calendarCardHint{margin-bottom:16px!important;font-size:12px!important;color:var(--text-3)!important;}
  html.design-lab #calendar .financial-calendar{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important;}
  html.design-lab #calendar .calendar-weekday{font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;color:var(--text-3)!important;text-align:center!important;padding:4px 0!important;background:none!important;}
  html.design-lab #calendar .calendar-day{aspect-ratio:1/.58!important;min-height:0!important;height:auto!important;max-height:none!important;border:0!important;border-radius:12px!important;background:var(--app-surface-soft)!important;padding:6px!important;display:flex!important;flex-direction:column!important;gap:3px!important;overflow:visible!important;box-shadow:none!important;}
  html.design-lab #calendar .calendar-day.empty-day{background:none!important;visibility:visible!important;}
  html.design-lab #calendar .calendar-day.today{background:var(--positive-soft)!important;box-shadow:inset 0 0 0 2px var(--positive)!important;}
  html.design-lab #calendar .calendar-day.today .calendar-date{color:var(--positive)!important;font-weight:800!important;}
  html.design-lab #calendar .calendar-date{font-size:12px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #calendar .calendar-event{display:inline-block!important;width:6px!important;height:6px!important;max-width:6px!important;padding:0!important;margin:0 3px 3px 0!important;border-radius:2px!important;background:var(--text-3)!important;overflow:hidden!important;border:0!important;}
  html.design-lab #calendar .calendar-event i,html.design-lab #calendar .calendar-event>span{display:none!important;}
  html.design-lab #calendar .calendar-event.pay{background:var(--negative)!important;}
  html.design-lab #calendar .calendar-event.receive{background:var(--positive)!important;}
  html.design-lab #calendar .calendar-event.repeat{background:var(--warning)!important;}
  html.design-lab #calendar .calendar-event.card{background:var(--text-2)!important;}
  html.design-lab #calendar .calendar-event.vault{background:#5a8de1!important;}
  html.design-lab #calendar .calendar-more{display:none!important;}
  html.design-lab #calendar .calendar-agenda{display:none!important;}
  html.design-lab #calendar .calendar-layout{display:block!important;}

  html.design-lab #calendarLegend{display:flex!important;flex-wrap:wrap!important;gap:16px!important;margin-top:16px!important;}
  html.design-lab .legend-row .legend-item{display:flex!important;align-items:center!important;gap:6px!important;font-size:12px!important;color:var(--text-2)!important;font-weight:600!important;}
  html.design-lab .legend-row .legend-dot{width:8px!important;height:8px!important;border-radius:3px!important;flex:0 0 auto!important;}

  html.design-lab #calendarUpcomingPanel h3,html.design-lab #calendarOverduePanel h3{margin-bottom:4px!important;}
  html.design-lab #calendarUpcomingSub{margin:0 0 14px!important;font-size:12px!important;color:var(--text-3)!important;}
  html.design-lab .agenda-item{display:flex!important;gap:12px!important;padding:12px 0!important;border-top:1px solid var(--app-line)!important;border-radius:10px!important;transition:background-color .2s!important;}
  /* Compromisso correspondente ao dia clicado no calendário (ver
     selectCalendarDay/renderCalendarDesktopExtras) — mesmo azul de destaque
     do dia selecionado na grade (#calendar .calendar-day.selected). */
  html.design-lab .agenda-item.is-selected{background:rgba(90,141,225,.14)!important;box-shadow:inset 0 0 0 1px #5a8de1!important;padding-left:10px!important;padding-right:10px!important;margin:0 -10px!important;}
  html.design-lab #calendarUpcoming .agenda-item:first-child,
  html.design-lab #calendarOverdue .agenda-item:first-child{border-top:0!important;padding-top:0!important;}
  html.design-lab .agenda-date{width:44px!important;flex:0 0 44px!important;text-align:center!important;background:var(--app-surface-soft)!important;border-radius:12px!important;padding:8px 0!important;}
  html.design-lab .agenda-date.late{background:var(--negative-soft)!important;}
  html.design-lab .agenda-date-day{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:16px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .agenda-date.late .agenda-date-day,html.design-lab .agenda-date.late .agenda-date-mon{color:var(--negative)!important;}
  html.design-lab .agenda-date-mon{font-size:9px!important;color:var(--text-3)!important;font-weight:700!important;text-transform:uppercase!important;}
  html.design-lab .agenda-body{flex:1!important;min-width:0!important;}
  html.design-lab .agenda-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab .agenda-time{font-size:12px!important;color:var(--text-3)!important;margin-top:1px!important;}
  html.design-lab .agenda-amount{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;font-size:13px!important;align-self:center!important;white-space:nowrap;}
  html.design-lab .agenda-amount.late{color:var(--negative)!important;}

  html.design-lab .add-cat-row{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;margin-top:14px!important;padding:12px 0 0!important;border:0!important;border-top:1px solid var(--app-line)!important;background:none!important;color:var(--primary)!important;font-size:13px!important;font-weight:700!important;cursor:pointer;text-align:left!important;}
  html.design-lab .add-cat-icon{width:26px;height:26px;flex:0 0 26px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft)!important;color:var(--primary)!important;font-size:11px;}
}
/* Novo visual mobile (Fase 1 — base): paleta aprovada no rascunho visual
   (Design Canvas), com leitura escura (noturno) e clara (dia). Sobrescreve só
   os tokens de cor — todo o resto (raios, sombras, espaçamentos) do
   design-lab já existente continua valendo, só muda de cor. O tema segue o
   mesmo toggle Claro/Noturno que o resto do app já usa (data-theme). Desktop
   não é afetado. */
@media(max-width:900px){
  html.design-lab[data-theme="dark"]{
    --bg:#0b0c10!important;
    --card:#12141e!important;
    --text:#f4f6fb!important;
    --muted:#8b93a7!important;
    --border:#ffffff1f!important;
    --primary:#305bf3!important;
    --primary-dark:#1c3fc7!important;
    --income:#00b98e!important;
    --expense:#e45768!important;
    --input-bg:#ffffff0d!important;
    --app-surface:#161822!important;
    --app-surface-soft:#ffffff0a!important;
    --app-line:#ffffff16!important;
    --app-shadow:0 20px 44px rgba(0,0,0,.5)!important;
    --app-shadow-soft:0 10px 26px rgba(0,0,0,.4)!important;
    --sidebar:#0b0c10!important;
  }
  html.design-lab:not([data-theme="dark"]){
    --bg:#f4f6fb!important;
    --card:#ffffff!important;
    --text:#12141e!important;
    --muted:#6b7280!important;
    --border:#00000014!important;
    --primary:#305bf3!important;
    --primary-dark:#1c3fc7!important;
    --income:#00b98e!important;
    --expense:#e45768!important;
    --input-bg:#f1f3f8!important;
    --app-surface:#ffffff!important;
    --app-surface-soft:#eef1f7!important;
    --app-line:#00000012!important;
    --app-shadow:0 20px 44px rgba(20,30,55,.12)!important;
    --app-shadow-soft:0 10px 26px rgba(20,30,55,.08)!important;
    --sidebar:#ffffff!important;
  }
  html.design-lab body{font-family:'Poppins','Inter',system-ui,sans-serif!important;}
  html.design-lab .btn:not(.btn-ghost),html.design-lab .today-btn,html.design-lab .header-quick,html.design-lab .desktop-new-tx,html.design-lab .fab{background:linear-gradient(150deg,#6fbafc,#305bf3)!important;box-shadow:0 10px 22px rgba(48,91,243,.4)!important;}
  html.design-lab .sidebar-collapse{background:linear-gradient(150deg,#6fbafc,#305bf3)!important;}
  html.design-lab .bottom-nav{background:color-mix(in srgb,var(--card) 90%,transparent)!important;border:1px solid var(--border)!important;box-shadow:var(--app-shadow)!important;}
  html.design-lab .bottom-nav button.active{color:var(--primary)!important;}
  html.design-lab .stat,html.design-lab .panel,html.design-lab .tool-card{background:var(--card)!important;}
}

@media(min-width:901px){
  /* Navegação expandida mais densa, sem reduzir as áreas de clique — com
     16 itens + 3 rótulos de grupo, os espaçamentos "confortáveis" de antes
     estouravam a altura da sidebar em ~130px numa tela de 900px, forçando
     rolagem interna; estes valores foram calculados pra caber sem rolar. */
  html.design-lab body:not(.sidebar-collapsed) .sidebar .nav-item{margin:1px 10px!important;min-height:30px!important;padding:6px 12px!important;}
  html.design-lab body:not(.sidebar-collapsed) .sidebar .nav-group-label{margin-top:6px!important;margin-bottom:2px!important;}
  html.design-lab .sidebar-footer .quick-logout:hover{background:rgba(217,74,92,.14)!important;border-color:rgba(217,74,92,.36)!important;color:#fff!important;}

  /* Seletor de lançamento: quatro opções equilibradas e com estados financeiros claros. */
  #txOverlay .type-toggle button{letter-spacing:-.05px!important;transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease!important;}
  #txOverlay .type-toggle button:hover{background:color-mix(in srgb,var(--card) 76%,transparent)!important;color:var(--text)!important;}
}
/* Estados ligados representam confirmação: verde, também nos controles nativos. */
html.design-lab .dcfg .sw.on,html.design-lab .preference-switch.on{background:#00b98e!important;}
html.design-lab input[type="checkbox"],html.design-lab input[type="radio"]{accent-color:#00b98e!important;}
/* Seleções de data e calendário usam o mesmo azul suave dos controles do produto. */
html.design-lab #calendar .calendar-day.selected{border-color:#5a8de1!important;box-shadow:inset 0 0 0 1px #5a8de1!important;background:rgba(90,141,225,.14)!important;}
/* O dia de hoje continua verde-claro mesmo quando também está selecionado —
   sem isso a regra ".selected" (mais abaixo no arquivo) pintava por cima. */
html.design-lab #calendar .calendar-day.today.selected{background:var(--positive-soft)!important;border-color:var(--positive)!important;box-shadow:inset 0 0 0 2px var(--positive)!important;}
@media(max-width:600px){
  /* Cabeçalho da folha móvel: título e fechar no mesmo eixo vertical. */
  .overlay .modal h2{display:flex!important;align-items:center!important;min-height:56px!important;box-sizing:border-box!important;margin:0 -16px 15px!important;padding:0 16px!important;line-height:1.2!important;}
  .overlay .modal h2.modal-title-row .icon-btn{align-self:center!important;margin-top:0!important;margin-bottom:0!important;}
}
/* Widgets rápidos preservam a mesma escala tipográfica dos objetivos financeiros. */
#dashboard .dashboard-quick-widget .dashboard-quick-row{padding:10px 0!important;font-size:14px!important;}
#dashboard .dashboard-quick-widget .dashboard-quick-row small{margin-top:3px!important;font-size:12px!important;line-height:1.3!important;}
#dashboard .dashboard-quick-widget .dashboard-quick-row b{font-size:14px!important;}
/* Acesso: contraste consistente, preferências claras e leitura alinhada. */
.auth-benefits span{align-items:center!important;min-height:30px;line-height:1.3;}
.auth-benefits i{flex:0 0 22px;align-self:center;}
.auth-screen .auth-legal a,.auth-screen .auth-privacy a{color:#fff!important;text-decoration-color:rgba(255,255,255,.52);text-underline-offset:2px;}
.auth-forgot{color:#fff!important;text-decoration-color:rgba(255,255,255,.52)!important;text-underline-offset:2px;}
.auth-remember input[type="checkbox"]{-webkit-appearance:none!important;appearance:none!important;display:grid!important;place-content:center!important;box-sizing:border-box!important;width:15px!important;min-width:15px!important;max-width:15px!important;height:15px!important;min-height:15px!important;max-height:15px!important;padding:0!important;margin:0!important;border:1px solid rgba(255,255,255,.76)!important;border-radius:4px!important;background:rgba(255,255,255,.12)!important;accent-color:initial!important;cursor:pointer;}
.auth-remember input[type="checkbox"]:checked{background:#fff!important;border-color:#fff!important;}
.auth-remember input[type="checkbox"]:checked::after{content:'✓';color:#4777c8;font-size:11px;font-weight:900;line-height:1;}
.auth-cookie-notice{grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;}
.auth-cookie-actions{grid-column:2;display:flex;justify-content:flex-end;gap:8px;}
.auth-cookie-notice .auth-cookie-actions button{min-height:34px;padding:8px 12px!important;}
.auth-cookie-notice .auth-cookie-actions .auth-cookie-decline{background:transparent!important;border:1px solid rgba(255,255,255,.34)!important;color:#fff!important;box-shadow:none!important;}
.auth-cookie-notice .auth-cookie-actions .auth-cookie-decline:hover{background:rgba(255,255,255,.1)!important;}
@media(max-width:680px){
  .auth-cookie-notice{right:16px!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;left:16px!important;width:auto!important;padding:13px!important;gap:10px!important;border-radius:14px!important;font-size:11px!important;}
  .auth-cookie-notice>i{width:30px!important;height:30px!important;}
  .auth-cookie-actions{grid-column:1 / -1!important;justify-content:stretch!important;}
  .auth-cookie-notice .auth-cookie-actions button{flex:1!important;}
}
@media(min-width:681px){
  .auth-benefits i{width:48px!important;flex-basis:48px!important;}
}
@media(min-width:681px){
  /* Estado de reconhecimento: mensagem e identidade sempre equilibradas no centro da tela. */
  .auth-screen.auth-resolving{place-items:center!important;}
  .auth-screen.auth-resolving .auth-loading{position:fixed!important;inset:0!important;width:auto!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:16px!important;text-align:center!important;}
  .auth-screen.auth-resolving .auth-loading strong{font-size:23px!important;}
  .auth-screen.auth-resolving .auth-loading span{max-width:280px!important;font-size:13px!important;line-height:1.45!important;}
}
/* Acesso FinMoney: composição serena, com profundidade e movimento apenas onde ajuda a orientar. */
.auth-screen:not(.hidden):not(.auth-resolving) .auth-shell{animation:fm-auth-shell-in .58s cubic-bezier(.2,.82,.24,1) both;}
.auth-brand .brand-mark{background:linear-gradient(145deg,#6d9bea,#4777c8)!important;box-shadow:0 10px 24px rgba(71,119,200,.25)!important;}
.auth-hero{position:relative;isolation:isolate;}
.auth-hero::before{content:'';position:absolute;z-index:-1;inset:15% -8% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(111,154,234,.16),transparent 67%);pointer-events:none;}
.auth-benefits span{transition:transform .2s ease,background .2s ease;}
.auth-benefits span:hover{transform:translateX(4px);}
.auth-panel{backdrop-filter:blur(12px);}
.auth-tabs,.auth-provider,.auth-panel input{transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;}
.auth-panel input:focus{box-shadow:0 0 0 3px rgba(90,141,225,.18)!important;border-color:rgba(130,169,238,.68)!important;}
.auth-provider:hover{transform:translateY(-1px);}
.auth-submit{transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;}
.auth-submit:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 22px rgba(71,119,200,.24)!important;}
.auth-loading .brand-mark{animation:fm-auth-brand-pulse 1.8s ease-in-out infinite;}
@keyframes fm-auth-shell-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fm-auth-brand-pulse{0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(90,141,225,.24)}50%{transform:scale(1.045);box-shadow:0 12px 28px rgba(90,141,225,.37)}}
@media(min-width:681px){
  .auth-panel{background:linear-gradient(145deg,rgba(37,53,77,.96),rgba(23,35,54,.97) 72%)!important;}
  .auth-benefits span:nth-child(1){animation:fm-auth-benefit-in .45s .08s both;}.auth-benefits span:nth-child(2){animation:fm-auth-benefit-in .45s .15s both;}.auth-benefits span:nth-child(3){animation:fm-auth-benefit-in .45s .22s both;}
  .auth-benefits i{background:linear-gradient(145deg,rgba(90,141,225,.24),rgba(71,119,200,.11))!important;color:#a8c4ff!important;box-shadow:0 8px 18px rgba(5,13,31,.14);}
}
@keyframes fm-auth-benefit-in{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:680px){
  .auth-screen:not(.hidden):not(.auth-resolving) .auth-shell{animation:fm-auth-mobile-in .38s cubic-bezier(.2,.82,.24,1) both;}
  .auth-submit:active,.auth-provider:active{transform:scale(.985);}
}
@keyframes fm-auth-mobile-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.auth-screen *,.auth-screen *::before,.auth-screen *::after{animation:none!important;transition:none!important;}}
/* Acesso móvel: direto, leve e com a identidade azul do FinMoney. */
@media(max-width:680px){
  .auth-cookie-notice{display:none!important;}
  /* O topo (logo/marca, "Suas finanças organizadas...") é SEMPRE escuro,
     em qualquer tema — decisão visual de propósito. O cartão de login
     embaixo (.auth-panel) foi redesenhado depois pra acompanhar o tema
     claro/escuro de verdade (fundo em `--app-surface`, mais abaixo neste
     arquivo). Só que várias regras do topo E do cartão leem as MESMAS
     variáveis (--text/--muted/--border/--input-bg) — travar todas aqui
     deixava o cartão sempre escuro com texto sempre branco (era o desenho
     antigo, antes do --app-surface); destravar todas deixava o TOPO com
     texto escuro sobre fundo escuro (2ª rodada dessa correção). A solução:
     trava aqui (pro topo), e um pouco abaixo — no `.auth-panel` — essas
     mesmas variáveis são destravadas de novo só dentro do cartão, pra ele
     seguir o tema normalmente sem afetar o topo. */
  html.design-lab .auth-screen{--bg:#0b0c10!important;--card:#12141e!important;--text:#f4f6fb!important;--muted:#8b93a7!important;--primary:#305bf3!important;--primary-dark:#1c3fc7!important;--border:#ffffff1f!important;--input-bg:#ffffff0d!important;background:#0b0c10!important;}
  .auth-hero{border:0!important;}
  .auth-hero h1,.auth-brand{color:#fff!important;text-shadow:0 1px 1px rgba(5,16,39,.22);}
}
/* Cartão de login (.auth-panel): destrava --text/--muted/--border/--input-bg
   de volta pro tema real, só dentro do cartão — o topo (.auth-hero) continua
   travado sempre-escuro pelas regras acima. Sem media query própria: vale
   tanto no celular (max-width:680px, acima) quanto na faixa intermediária
   tipo tablet (681-900px, mais abaixo neste arquivo) — as duas travam essas
   variáveis pro topo, e esta regra destrava de novo só pro cartão nas duas. */
html.design-lab .auth-panel{--text:#17213d!important;--muted:#72809b!important;--border:#e3eaf8!important;--input-bg:#f8faff!important;}
html.design-lab[data-theme="dark"] .auth-panel{--text:#f5f7ff!important;--muted:#9ca9c3!important;--border:#273452!important;--input-bg:#18233e!important;}
/* Acesso móvel: uma composição própria de aplicativo, independente do painel desktop. */
@media(max-width:680px){
  html:has(#authScreen:not(.hidden)),body:has(#authScreen:not(.hidden)){min-height:var(--vh100,100%);height:var(--vh100,100%);background:var(--bg)!important;}
  .auth-screen{display:block!important;min-height:100dvh;min-height:var(--vh100,100dvh);padding:0!important;}
  .auth-shell{display:block!important;width:100%!important;min-height:100dvh!important;background:transparent!important;}
  .auth-hero{position:relative;z-index:0;min-height:252px!important;margin:0!important;padding:calc(22px + env(safe-area-inset-top)) 24px 58px!important;overflow:hidden!important;background:linear-gradient(145deg,#173a72 0%,#2f62ab 100%)!important;}
  .auth-hero::before{inset:auto -80px -126px auto!important;width:260px!important;height:260px!important;background:radial-gradient(circle,rgba(156,194,255,.28),rgba(156,194,255,0) 68%)!important;}
  .auth-hero::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.2;background-image:radial-gradient(rgba(255,255,255,.68) .7px,transparent .8px);background-size:18px 18px;mask-image:linear-gradient(135deg,#000,transparent 74%);pointer-events:none;}
  .auth-brand{gap:9px!important;font-size:21px!important;line-height:1!important;letter-spacing:-.35px!important;}
  .auth-brand .brand-mark{width:34px!important;height:34px!important;border-radius:10px!important;font-size:15px!important;background:linear-gradient(145deg,#78a5ee,#4f7ecd)!important;box-shadow:0 8px 18px rgba(13,37,84,.27)!important;}
  .auth-hero h1{max-width:340px!important;margin:31px 0 9px!important;font-size:27px!important;line-height:1.13!important;letter-spacing:-.7px!important;color:#fff!important;text-shadow:none!important;}
  .auth-hero p{max-width:335px!important;margin:0!important;font-size:13px!important;line-height:1.48!important;color:rgba(239,246,255,.86)!important;}
  .auth-benefits,.auth-privacy{display:none!important;}
  .auth-panel{position:relative;z-index:1;margin:-28px 12px 0!important;padding:25px 20px calc(26px + env(safe-area-inset-bottom))!important;padding-bottom:calc(26px + var(--safe-bottom,env(safe-area-inset-bottom)))!important;background:linear-gradient(180deg,rgba(24,43,71,.98),rgba(15,28,48,.99))!important;backdrop-filter:none!important;}
  .auth-panel h2{margin:0 0 5px!important;font-size:22px!important;line-height:1.2!important;letter-spacing:-.42px!important;color:#fff!important;}
  .auth-panel .auth-sub{margin:0 0 19px!important;font-size:13px!important;line-height:1.42!important;color:#aebfd9!important;}
  .auth-tabs{margin:0 0 17px!important;padding:3px!important;border:1px solid rgba(147,180,235,.14)!important;border-radius:var(--radius-md)!important;background:#101f36!important;}
  .auth-tabs button{min-height:39px!important;padding:8px!important;border-radius:9px!important;font-size:12px!important;color:#a9bbd6!important;}
  .auth-tabs button.active{background:linear-gradient(145deg,#78a5ee,#4f7ecd)!important;color:#fff!important;box-shadow:0 5px 14px rgba(10,31,72,.31)!important;}
  .auth-providers{gap:9px!important;margin:0!important;}
  .auth-provider{min-height:43px!important;border-color:rgba(148,181,236,.27)!important;border-radius:11px!important;background:#101e33!important;color:#f3f7ff!important;font-size:12px!important;}
  .auth-divider{margin:17px 0 15px!important;font-size:11px!important;color:#a8bbd8!important;}
  .auth-divider::before,.auth-divider::after{background:rgba(152,180,223,.18)!important;}
  .auth-panel .field{margin-bottom:13px!important;}
  .auth-panel .field label{margin-bottom:6px!important;font-size:12px!important;font-weight:700!important;color:#c9d8ee!important;}
  .auth-panel input{min-height:45px!important;padding:11px 13px!important;border:1px solid rgba(144,178,232,.27)!important;border-radius:11px!important;background:#101e33!important;color:#f4f8ff!important;box-shadow:none!important;}
  .auth-panel input::placeholder{color:#8196b5!important;}
  .auth-password-toggle{right:7px!important;color:#a9bbd5!important;}
  .auth-remember{min-height:20px!important;margin:1px 0 13px!important;gap:8px!important;font-size:12px!important;color:#b8c8df!important;}
  .auth-remember input[type="checkbox"]{width:15px!important;min-width:15px!important;height:15px!important;min-height:15px!important;}
  .auth-error{margin:1px 0 9px!important;min-height:17px!important;font-size:12px!important;}
  .auth-submit{min-height:46px!important;padding:12px!important;border-radius:11px!important;background:linear-gradient(145deg,#78a5ee,#4f7ecd)!important;font-size:14px!important;box-shadow:0 10px 20px rgba(41,83,150,.28)!important;}
  .auth-forgot{margin:15px auto 0!important;color:#fff!important;font-size:12px!important;}
  .auth-legal{max-width:320px!important;margin:16px auto 0!important;font-size:10px!important;line-height:1.5!important;color:#94a9c6!important;}
  .auth-legal a{color:#fff!important;font-weight:700!important;}
  .auth-config{margin-top:14px!important;}
  #passwordRecoveryOverlay{align-items:stretch!important;padding:0!important;background:#0d1728!important;}
  #passwordRecoveryOverlay .modal{width:100%!important;max-width:none!important;min-height:100dvh!important;margin:0!important;padding:calc(24px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom))!important;border:0!important;border-radius:0!important;background:linear-gradient(160deg,#132b54,#0d1728 56%)!important;box-shadow:none!important;}
  #passwordRecoveryOverlay .modal-title-row{align-items:center!important;margin-bottom:26px!important;font-size:21px!important;color:#fff!important;}
  #passwordRecoveryOverlay .modal-title-row .icon-btn{order:-1!important;width:40px!important;height:40px!important;margin-right:4px!important;border-radius:50%!important;background:rgba(255,255,255,.1)!important;color:#fff!important;}
  #passwordRecoveryOverlay .tool-modal-intro{margin:0 0 26px!important;color:#afc0d8!important;font-size:13px!important;line-height:1.45!important;}
  #passwordRecoveryOverlay .field label{color:#d6e1f1!important;}
  #passwordRecoveryOverlay .field input{min-height:47px!important;border-color:rgba(146,181,238,.3)!important;background:#101e33!important;color:#fff!important;}
  #passwordRecoveryOverlay .modal-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:24px!important;}
  #passwordRecoveryOverlay .modal-actions .btn{min-height:46px!important;justify-content:center!important;}
}
/* O painel móvel acompanha somente o conteúdo: elimina a área vazia abaixo das notas legais. */
@media(max-width:680px){
  /* A composição mobile usa display:block para o fluxo de entrada. Quando a
     autenticação termina, `.hidden` precisa prevalecer para não manter o
     formulário por cima do aplicativo. */
  .auth-screen.hidden{display:none!important;}
  .auth-panel{min-height:0!important;}
  /* O login pode rolar normalmente; isso evita bloquear foco, teclado e MFA. */
  .auth-screen{height:auto!important;min-height:100dvh!important;min-height:var(--vh100,100dvh)!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:auto!important;touch-action:pan-y!important;}
  .auth-shell{height:auto!important;min-height:100dvh!important;min-height:var(--vh100,100dvh)!important;overflow:visible!important;}
  /* O estado de carregamento é exclusivo: nunca exibe o formulário por baixo. */
  .auth-screen.auth-resolving .auth-shell{display:none!important;}
  .auth-panel{padding-bottom:calc(18px + env(safe-area-inset-bottom));padding-bottom:calc(18px + var(--safe-bottom,env(safe-area-inset-bottom)))!important;}
  .auth-legal{display:none!important;}
}
@media(max-width:680px) and (max-height:700px){
  .auth-hero{min-height:202px!important;padding-bottom:43px!important;}
  .auth-hero h1{margin-top:19px!important;font-size:23px!important;}
  .auth-hero p{font-size:12px!important;}
  .auth-panel{padding-top:19px!important;}
  .auth-panel .auth-sub{margin-bottom:12px!important;}
  .auth-tabs{margin-bottom:11px!important;}
  .auth-divider{margin:11px 0!important;}
  .auth-panel .field{margin-bottom:8px!important;}
  .auth-forgot{margin-top:10px!important;}
}
/* Tela de acesso (mobile): mesmo padrão visual do resto do redesenho — fundo
   liso (sem gradiente), cards escuros, azul só como acento nos elementos de
   ação, Poppins. Antes usava a paleta azul antiga (#5a8de1/#4777c8), agora
   segue os mesmos tokens de cor do app (já compatíveis com claro/escuro).
   Desktop não é afetado. */
@media(max-width:900px){
  html.design-lab .auth-screen,
  html.design-lab .auth-shell,
  html.design-lab .auth-hero{background:var(--bg)!important;}
  html.design-lab .auth-screen{font-family:'Poppins','Inter',system-ui,sans-serif!important;}
  html.design-lab .auth-hero{border:0!important;}
  html.design-lab .auth-brand{color:var(--text)!important;}
  html.design-lab .auth-brand .brand-mark,
  html.design-lab .auth-loading .brand-mark{background:linear-gradient(150deg,#6FBAFC,#305BF3)!important;color:#fff!important;}
  html.design-lab .auth-hero h1{color:var(--text)!important;}
  html.design-lab .auth-hero p{color:var(--muted)!important;}
  html.design-lab .auth-benefits span{color:var(--text)!important;}
  html.design-lab .auth-benefits i{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 16%,transparent)!important;}
  html.design-lab .auth-privacy{color:var(--muted)!important;}
  html.design-lab .auth-panel{background:var(--card)!important;border:1px solid var(--border)!important;box-shadow:none!important;}
  html.design-lab #authTitle{color:var(--text)!important;}
  html.design-lab .auth-sub{color:var(--muted)!important;}
  html.design-lab .auth-tabs{background:var(--input-bg)!important;border:1px solid var(--border)!important;}
  html.design-lab .auth-tabs button{color:var(--muted)!important;background:transparent!important;}
  html.design-lab .auth-tabs button.active{color:#fff!important;box-shadow:0 6px 14px rgba(48,91,243,.35)!important;}
  html.design-lab .auth-provider{background:var(--input-bg)!important;border:1px solid var(--border)!important;color:var(--text)!important;}
  html.design-lab .auth-divider{color:var(--muted)!important;}
  html.design-lab .auth-divider::before,
  html.design-lab .auth-divider::after{background:var(--border)!important;}
  html.design-lab .field label{color:var(--muted)!important;}
  html.design-lab .auth-field-ico{color:var(--muted)!important;}
  html.design-lab .auth-panel input{background:var(--input-bg)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:14px!important;}
  html.design-lab .auth-password-toggle{color:var(--muted)!important;}
  html.design-lab .auth-remember{color:var(--muted)!important;}
  html.design-lab .auth-remember input{accent-color:var(--primary)!important;}
  html.design-lab .auth-submit{box-shadow:0 10px 22px rgba(48,91,243,.4)!important;color:#fff!important;}
  html.design-lab .auth-forgot{color:var(--primary)!important;}
  html.design-lab .auth-legal{color:var(--muted)!important;}
  html.design-lab .auth-legal a{color:var(--primary)!important;}
  html.design-lab .auth-cookie-notice{background:var(--card)!important;border:1px solid var(--border)!important;color:var(--text)!important;}
  html.design-lab .auth-cookie-notice a{color:var(--primary)!important;}
  html.design-lab .auth-cookie-actions button:last-child{background:linear-gradient(150deg,#6FBAFC,#305BF3)!important;color:#fff!important;}
}
/* Preenchimento automático (Chrome/Edge/Safari): o navegador pinta o fundo de branco/amarelo
   e troca a cor do texto. Sombra interna na cor do campo + texto na cor do tema. */
html.design-lab input:-webkit-autofill,html.design-lab input:-webkit-autofill:hover{-webkit-text-fill-color:var(--text)!important;caret-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--input-bg) inset!important;box-shadow:0 0 0 1000px var(--input-bg) inset!important;transition:background-color 600000s 0s,color 600000s 0s,border-color .2s!important;}
html.design-lab input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text)!important;-webkit-box-shadow:0 0 0 1000px var(--input-bg) inset,0 0 0 3px rgba(90,141,225,.18)!important;box-shadow:0 0 0 1000px var(--input-bg) inset,0 0 0 3px rgba(90,141,225,.18)!important;}
/* Tipografia de destaque: Sora nos títulos e números grandes, Inter no texto corrido. */
h1,h2,h3,.stat .v,.account-total b,.sidebar .logo .brand-name,.auth-brand{font-family:'Sora','Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
/* Navegação nativa (mobile): telas de detalhe deslizam como uma pilha (avançar da direita, voltar da esquerda). Desktop não é afetado. */
@media(max-width:900px){
  @keyframes fmNavPush{from{opacity:.92;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
  @keyframes fmNavPop{from{opacity:.5;transform:translateX(-26%) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
  .section.fm-nav-push{animation:fmNavPush .32s var(--fm-motion-spring) both;}
  .section.fm-nav-pop{animation:fmNavPop .32s var(--fm-motion-spring) both;}
}
/* Chrome nativo (mobile) — rascunho antigo, substituído pelo bloco
   definitivo em html.design-lab .bottom-nav (mais acima no arquivo).
   Removido: tinha ficado com maior prioridade em algumas propriedades
   por vir depois no arquivo, reintroduzindo um fundo atrás do ícone
   ativo que já tinha sido removido, e brigando com a altura/fonte da
   barra em telas com área segura maior (app instalado no iPhone). */
/* Telas empurradas (mobile): cabeçalho com voltar+título, como uma barra de navegação nativa (rola junto com o conteúdo). Desktop não é afetado. */
@media(max-width:900px){
  .desktop-detail-page .detail-topbar{
    margin:-16px -16px 14px!important;
    padding:calc(env(safe-area-inset-top) + 28px) 16px 12px!important;
    background:color-mix(in srgb,var(--bg) 90%,transparent);
  }
  .account-action-page .account-action-head{
    margin:-16px -16px 12px!important;
    padding:calc(env(safe-area-inset-top) + 28px) 16px 10px!important;
    background:color-mix(in srgb,var(--bg) 90%,transparent);
  }
  /* Setinha discreta em vez do botão "Voltar" cheio: só o ícone, pequeno e
     apagado, colado à esquerda do título — o gesto de arrastar da borda
     continua sendo o jeito principal de voltar, isso aqui é só um indício
     visual sutil. Continua um botão de verdade (clicável) e no desktop
     (sem o gesto) aparece no tamanho normal, com o texto. */
  .desktop-detail-page .detail-topbar>.btn:first-child,
  .account-action-page .account-action-head>.btn:first-child,
  .mais-page .detail-topbar>.btn:first-child,
  .category-detail-page-top>.btn:first-child{
    min-width:0!important;width:26px!important;min-height:0!important;height:26px!important;padding:0!important;margin:0 1px 0 -2px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;opacity:.5!important;font-size:0!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  }
  .desktop-detail-page .detail-topbar>.btn:first-child i,
  .account-action-page .account-action-head>.btn:first-child i,
  .mais-page .detail-topbar>.btn:first-child i,
  .category-detail-page-top>.btn:first-child i{
    font-size:14px!important;
  }
  /* "Sair da conta" não precisa do mesmo peso visual de "Apagar dados" (ação
     bem mais grave) — vermelho discreto (contorno) em vez de preenchido. */
  html.design-lab .account-signout .btn.btn-danger{
    background:transparent!important;background-image:none!important;color:var(--expense)!important;border:1px solid color-mix(in srgb,var(--expense) 32%,transparent)!important;box-shadow:none!important;font-weight:700!important;
  }
  html.design-lab .account-signout .btn.btn-danger:active{background:color-mix(in srgb,var(--expense) 8%,transparent)!important;background-image:none!important;}
}
/* Formulário de acesso (mobile): campos com ícone dentro da pílula, inspirado na referência de app nativo. Desktop não é afetado. */
.auth-field-ico{display:none;}
@media(max-width:680px){
  .auth-panel .field,.auth-panel .auth-password-wrap{position:relative;}
  .auth-field-ico{display:block;position:absolute;left:14px;bottom:14px;font-size:14px;color:#8ea3c9;pointer-events:none;z-index:2;line-height:1;}
  .auth-panel .field input{padding-left:40px!important;}
  .auth-tabs button{transition:background var(--fm-motion-micro) ease,color var(--fm-motion-micro) ease,box-shadow var(--fm-motion-micro) ease;}
}
.mobile-month-pill{display:none;}
/* Mês + avisos (mobile): pílula compacta alinhada ao título, no lugar da saudação. A antiga faixa abaixo do topo não é mais usada. Desktop não é afetado. */
@media(max-width:900px){
  .greeting-mobile{display:none!important;}
  .page-heading{gap:5px!important;}
  .page-heading h1,#pageTitle{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #pageTitle{letter-spacing:-.1px!important;}
  .page-heading .mobile-month-pill{margin-left:auto!important;}
  .page-heading .mobile-month-pill:last-child{margin-right:0;}
  .mobile-month-pill{
    display:inline-flex!important;align-items:center;gap:4px;
    padding:6px 8px!important;border:1px solid var(--border);border-radius:99px;
    background:var(--app-surface-soft);color:var(--text);
    font-size:11px;font-weight:750;white-space:nowrap;flex:0 0 auto;
  }
  .mobile-month-pill i:first-child{font-size:10px;color:var(--muted);}
  .mobile-month-pill i:last-child{display:none;}
  body.dashboard-page .page-heading .dashboard-view-mobile,
  body.category-details-page .page-heading .dashboard-view-mobile,
  .main:has(#cards-sec.section.active) .page-heading .dashboard-view-mobile{
    display:inline-flex!important;align-items:center;justify-content:center;
    border:0!important;background:transparent!important;box-shadow:none!important;
    width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important;
    color:var(--muted)!important;padding:0!important;margin-left:6px!important;font-size:0!important;
  }
  body.dashboard-page .page-heading .dashboard-view-mobile.projected,
  body.category-details-page .page-heading .dashboard-view-mobile.projected,
  .main:has(#cards-sec.section.active) .page-heading .dashboard-view-mobile.projected{color:#b87913!important;}
  body.category-details-page .page-heading .dashboard-view-mobile{margin-left:auto!important;}
  body.dashboard-page .page-heading .dashboard-view-mobile i,
  body.category-details-page .page-heading .dashboard-view-mobile i,
  .main:has(#cards-sec.section.active) .page-heading .dashboard-view-mobile i{font-size:16px!important;}
  .page-heading .dashboard-alert-mobile{
    display:none!important;
  }
  .main:has(#dashboard.section.active) .page-heading .dashboard-alert-mobile{
    display:inline-flex!important;
    border:0!important;background:transparent!important;box-shadow:none!important;
    width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important;
    color:var(--muted)!important;padding:0!important;margin-left:6px!important;
  }
  .main:has(#dashboard.section.active) .page-heading .dashboard-alert-mobile i{font-size:17px!important;}
}
/* Títulos duplicados (mobile): o título já aparece no topo do app — o subtítulo repetido dentro da tela só ocupa espaço. Desktop não é afetado. */
@media(max-width:900px){
  #tools .tools-intro h2,
#bills .topbar h3,
#cards-sec .topbar h3,
#accounts .topbar h3,
#vaults .topbar h3,
#categories .topbar h3,
#budget .topbar h3,
#recurring .topbar h3,
#ants .panel:first-of-type h3,
#calendar h3,
#account-email-page h2,
#account-password-page h2{
    display:none!important;
  }
  #bills .topbar,
  #cards-sec .topbar,
  #accounts .topbar,
  #vaults .topbar,
  #categories .topbar,
  #budget .topbar,
  #recurring .topbar{
    justify-content:flex-end!important;
  }
}
/* Telas sem relação com mês (mobile): esconde a pílula de mês, deixando a tela mais limpa. O sino continua sempre visível. Desktop não é afetado. */
@media(max-width:900px){
  .main:has(#tools.section.active) .mobile-month-pill,
.main:has(#categories.section.active) .mobile-month-pill,
.main:has(#investments.section.active) .mobile-month-pill,
.main:has(#category-details.section.active) .mobile-month-pill,
.main:has(#card-details.section.active) .mobile-month-pill,
.main:has(#account-details.section.active) .mobile-month-pill,
.main:has(#vault-details.section.active) .mobile-month-pill,
.main:has(#account-email-page.section.active) .mobile-month-pill,
.main:has(#account-password-page.section.active) .mobile-month-pill,
.main:has(#alerts-page.section.active) .mobile-month-pill,
.main:has(#reports-sec.section.active) .mobile-month-pill{
    display:none!important;
  }
}
/* Estado vazio padrão (mobile + desktop): ícone + título + texto curto, no lugar de frases soltas. */
.fm-empty-state{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;color:var(--muted);font-size:12px;line-height:1.4;padding:28px 18px;}
.fm-empty-state i{font-size:23px;color:var(--primary);opacity:.75;margin-bottom:2px;}
.fm-empty-state strong{display:block;color:var(--text);font-size:13px;font-weight:750;}
.fm-empty-state span{display:block;margin-top:1px;max-width:280px;}
/* Swipe para apagar (mobile): o cartão mantém sua própria margem entre itens, o que "vaza" para dentro do wrapper (overflow:hidden impede o colapso de margem) e faz a faixa vermelha invadir esse espaço. Zerando a margem do conteúdo — o espaçamento entre itens já vem do wrapper. */
/* "Mais" vira navegação de verdade (mobile): as 10 seções antes só alcançáveis
   pelo menu lateral (bills, calendar, budget, recurring, vaults, investments,
   patrimony, categories, compare, ants) ganham um cabeçalho com voltar+título,
   igual ao das páginas de fatura/extrato/caixinha — mas com uma classe própria
   (.mais-page), não .desktop-detail-page, porque essa carrega regras de
   largura pensadas pro desktop que não queremos aqui (essas seções continuam
   sendo abertas também pela barra lateral no desktop, e não podem mudar de
   layout lá). Todo o bloco abaixo é mobile-only; no desktop esse cabeçalho
   nem aparece — a navegação lá continua sendo só a barra lateral. */
@media(min-width:901px){.mais-page>.detail-topbar{display:none;}}
@media(max-width:900px){
  /* BUG REAL (achado testando a página legal nova, mas afeta TODA página
     "Mais" — WhatsApp, Google Agenda etc., em aparelho sem "notch"/Dynamic
     Island, onde env(safe-area-inset-top) é 0 ou pequeno): #scrollTopZone
     é uma faixa fixed nos primeiros max(30px, safe-area-inset-top) do topo
     (pra "tocar no topo = rolar pra cima"), z-index:70. O padding-top deste
     topbar só somava +12px ao safe-area — nesses aparelhos, o botão
     "Voltar" nascia sobrepondo boa parte dessa faixa, e o toque no topo do
     botão só rolava a tela (não voltava nada). Tentar vencer isso com
     z-index não funciona: o .section pai ganha um transform durante a
     animação de troca de tela (fmAnimatePagePush), e transform sempre cria
     um novo contexto de empilhamento — o z-index do topbar fica preso
     DENTRO dele, nunca chega a competir com a faixa fixa lá fora. A solução
     de verdade é nunca deixar as duas áreas se sobreporem: padding-top de
     pelo menos 30px sempre, não só +12px em cima do safe-area. */
  .mais-page .detail-topbar{display:flex;align-items:center;gap:12px;margin:-16px -16px 14px!important;padding:calc(env(safe-area-inset-top) + 28px) 16px 12px!important;background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--app-line);}
  .mais-page .detail-topbar h2{margin:0;font-size:18px;letter-spacing:-.4px;flex:1;min-width:0;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  .mais-page .detail-topbar>.btn:first-child{margin-left:0!important;flex:0 0 auto;}
  .mais-page .detail-topbar .detail-actions{margin-left:auto;flex:0 0 auto;display:flex;gap:8px;}
  .mais-page .detail-topbar .detail-actions .btn{padding:7px 10px;}
  /* O título já aparece no novo cabeçalho acima — o mini-cabeçalho interno
     que essas seções já tinham (ícone+título+ação) fica só pro desktop, pra
     não duplicar o título no mobile. */
  #bills>.topbar,#vaults>.topbar,#investments>.topbar,#categories>.topbar,#budget>.topbar,#recurring>.topbar{display:none;}
  /* O cabeçalho fixo do app (#pageTitle) mostra o mesmo texto do título da
     página empurrada abaixo dele — sem isso, o título aparece duplicado
     (uma vez no topo do app, outra no cabeçalho da própria página). */
  /* #reports-page é exceção: não tem mais o próprio .detail-topbar (virou
     atalho de primeiro nível, sem botão de voltar) — sem essa exceção o
     cabeçalho global ficava escondido e a tela de Relatórios não sobrava
     NENHUM título visível, com o conteúdo começando colado na barra de
     status do aparelho. */
  body:has(.section.active.mais-page:not(#reports-page)) .main>.topbar,
  body:has(.section.active.account-action-page:not(#reports-page)) .main>.topbar,
  body:has(.section.active.desktop-detail-page) .main>.topbar,
  body:has(.section.active.category-detail-page) .main>.topbar{display:none!important;}
}
/* Aba "Mais" (mobile): lista de navegação de verdade, substituindo o menu
   hambúrguer/gaveta — mesmos grupos que a barra lateral do desktop já usa.
   Some no desktop, onde a navegação continua sendo só a barra lateral. */
@media(min-width:901px){
  .mais-nav-list,.mais-profile-row{display:none!important;}
  .profile-page-nav-list{display:grid!important;gap:8px;margin:18px 0 4px;}
  .profile-page-nav-list .mais-nav-group-label{margin:14px 2px 2px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:1.05px;text-transform:uppercase;}
  .profile-page-nav-list .mais-nav-group-label:first-child{margin-top:0;}
  .profile-page-nav-list .mais-nav-row{display:flex;align-items:center;gap:12px;width:100%;padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--app-surface-soft);color:var(--text);text-align:left;}
  .profile-page-nav-list .mais-nav-row:hover{border-color:var(--primary);}
  .profile-page-nav-list .mais-nav-row .ico{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:10px;background:color-mix(in srgb,var(--ico-color,var(--primary)) 15%,transparent);color:var(--ico-color,var(--primary));font-size:15px;}
  .profile-page-nav-list .mais-nav-row b{flex:1;min-width:0;font-size:13px;font-weight:700;}
  .profile-page-nav-list .mais-nav-row .chev{color:var(--muted);font-size:12px;flex:0 0 auto;}
}
@media(max-width:900px){.desktop-tools-grid,#tools .desktop-tools-grid{display:none!important;}}
@media(max-width:900px){
  .mais-nav-list{display:grid;gap:8px;margin:18px 0 22px;}
  .mais-nav-group-label{margin:14px 2px 2px;color:var(--muted);font-weight:800;letter-spacing:1.05px;text-transform:uppercase;}
  .mais-nav-group-label:first-child{margin-top:0;}
  .mais-nav-row{display:flex;align-items:center;gap:12px;width:100%;padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--app-surface-soft);color:var(--text);text-align:left;}
  .mais-nav-row:active{border-color:var(--primary);}
  .mais-nav-row .ico{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:10px;background:color-mix(in srgb,var(--ico-color,var(--primary)) 15%,transparent);color:var(--ico-color,var(--primary));font-size:15px;}
  .mais-nav-row b{flex:1;min-width:0;font-size:13px;font-weight:700;}
  .mais-nav-row .chev{color:var(--muted);font-size:12px;flex:0 0 auto;}
  .mais-profile-row{display:flex;align-items:center;gap:13px;width:100%;padding:15px;margin-top:16px;border:1px solid var(--border);border-radius:15px;background:var(--app-surface-soft);color:var(--text);text-align:left;}
  .mais-profile-row .profile-avatar{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-size:18px;overflow:hidden;}
  .mais-profile-row .profile-identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
  .mais-profile-row .profile-identity strong{font-size:14px;font-weight:750;}
  .mais-profile-row .profile-identity span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mais-profile-row .profile-trust{display:flex;align-items:center;gap:4px;}
  .mais-profile-row .chev{color:var(--muted);font-size:12px;flex:0 0 auto;}
  .mais-logout-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:13px;border-radius:14px;background:transparent;border:1px solid color-mix(in srgb,var(--expense) 35%,transparent);color:var(--expense);font-size:13px;font-weight:700;}
  .mais-logout-btn .desktop-logout-icon,.mais-logout-btn .desktop-logout-copy,.mais-logout-btn .desktop-logout-action{display:none!important;}
  .mais-logout-btn .mobile-logout-content{white-space:nowrap;}
}
/* "Mais" (mobile): sem o texto de introdução ("Central de controle" +
   parágrafo) — o rascunho visual vai direto do título pra linha de perfil.
   Desktop não é afetado. */
/* Fim do menu hambúrguer/gaveta no mobile: a navegação agora é só a barra
   inferior + a lista de "Mais" acima. Sem outro gatilho pra abrir a gaveta
   (a chamada de initDashboardSidebarSwipe() também foi removida do boot em
   app.js), ela nunca mais aparece. Desktop não é afetado — continua com o
   botão de recolher a barra lateral fixa. */
@media(max-width:900px){
  .main>.topbar .menu-btn,.menu-btn{display:none!important;}
}
/* Animação de botão padrão do app: cresce ao passar o mouse, encolhe e gira
   um pouco ao tocar/clicar. Vale para qualquer botão, em qualquer tela. */
@media(max-width:900px){
  @media(hover:hover) and (pointer:fine){
    button:not(:disabled):hover,.btn:not(:disabled):hover,.icon-btn:not(:disabled):hover{transform:scale(1.2)!important;transition:transform 1s!important;}
  }
  button:not(:disabled):active,.btn:not(:disabled):active,.icon-btn:not(:disabled):active{transform:scale(.9)!important;transition:transform .12s!important;}
}
/* Bloqueio por PIN (mobile only): trava de acesso rápido no aparelho, separada
   do login real do Supabase. Some inteiramente no desktop, mesmo que o
   localStorage tenha um PIN configurado. */
.pin-lock-only-mobile{display:none;}
@media(max-width:900px){.pin-lock-only-mobile{display:flex;}}
.pin-lock-row-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
/* Tela de bloqueio segue o tema escolhido: fundo branco no modo claro,
   preto no escuro (o "sistema" já chega aqui resolvido em data-theme). */
.pin-lock-screen{--pin-bg:#fff;--pin-fg:#111827;--pin-muted:rgba(17,24,39,.62);--pin-dot-border:rgba(17,24,39,.32);--pin-key:rgba(17,24,39,.06);--pin-key-border:rgba(17,24,39,.10);--pin-key-active:rgba(17,24,39,.14);position:fixed;inset:0;z-index:6000;display:none;align-items:center;justify-content:center;padding:28px 24px calc(28px + env(safe-area-inset-bottom)) 24px;background:var(--pin-bg);}
[data-theme="dark"] .pin-lock-screen{--pin-bg:#000;--pin-fg:#fff;--pin-muted:rgba(255,255,255,.72);--pin-dot-border:rgba(255,255,255,.4);--pin-key:rgba(255,255,255,.08);--pin-key-border:rgba(255,255,255,.12);--pin-key-active:rgba(255,255,255,.18);}
.pin-lock-screen.open{display:flex;}
@media(min-width:901px){.pin-lock-screen{display:none!important;}}
.pin-lock-body{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:env(safe-area-inset-top);}
.pin-lock-brand{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:var(--primary);color:#fff;font-size:22px;box-shadow:0 10px 26px rgba(90,141,225,.32);margin-bottom:16px;}
.pin-lock-body h2{color:var(--pin-fg);font-size:22px;letter-spacing:-.4px;margin:0 0 6px;}
.pin-lock-body p{min-height:18px;color:var(--pin-muted);font-size:13px;line-height:1.4;margin:0 0 26px;}
.pin-dots{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:34px;}
.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--pin-dot-border);background:transparent;transition:background .12s ease,border-color .12s ease,transform .12s ease;}
.pin-dot.filled{background:var(--pin-fg);border-color:var(--pin-fg);transform:scale(1.08);}
.pin-dots.pin-shake{animation:pinShake .38s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes pinShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.pin-keypad{display:grid;grid-template-columns:repeat(3,78px);gap:24px;justify-content:center;margin-bottom:22px;}
.pin-keypad button{width:78px;height:78px;border-radius:50%;background:var(--pin-key);border:1px solid var(--pin-key-border);color:var(--pin-fg);font-size:27px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.pin-keypad button:active{background:var(--pin-key-active);}
.pin-keypad .pin-key-backspace{font-size:21px;background:transparent;border-color:transparent;}
.pin-key-spacer{width:78px;height:78px;}
.pin-lock-forgot,.pin-lock-cancel{background:none;color:var(--pin-muted);font-size:13px;font-weight:700;padding:10px;margin-top:6px;}
.pin-lock-forgot:hover,.pin-lock-cancel:hover{color:var(--pin-fg);}
/* Conectar WhatsApp: bloco de vínculo (código de pareamento). */
.whatsapp-link-block{display:flex;flex-direction:column;gap:0;align-items:stretch;}
.whatsapp-link-block .field{width:100%;margin-top:10px;}
.whatsapp-link-block>.account-security-section:first-child{border-top:0;padding-top:0;}
.whatsapp-pairing-result{align-items:stretch!important;margin-top:14px;padding:16px;border:1px solid var(--border)!important;border-radius:var(--radius-md);background:var(--app-surface-soft);}
.whatsapp-pairing-code{align-self:center;margin:4px 0 14px;font-size:34px;font-weight:800;letter-spacing:10px;color:var(--text);font-variant-numeric:tabular-nums;}
#whatsappOpenLink{justify-content:center;background:#25D366!important;color:#fff!important;box-shadow:none!important;}
.whatsapp-pairing-steps{margin:16px 0 0;padding-left:20px;color:var(--muted);font-size:12px;line-height:1.6;}
.whatsapp-pairing-steps li{margin-bottom:4px;}
.whatsapp-pairing-steps li strong{color:var(--text);}
.whatsapp-pairing-waiting{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-size:12px;font-weight:700;}
.whatsapp-pairing-waiting i{font-size:13px;}

/* ===== Página "Relatórios" (aba do menu inferior) ===== */
.rp-panel{margin-bottom:14px;}
.rp-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;}
/* #rpViewToggle mora dentro de .rp-head (ao lado do botão de calendário) pra
   ficar alinhado com ele no computador — no celular, sem espaço pra caber
   os dois na mesma linha, ele quebra pra uma linha própria (flex-basis
   100%), exatamente como já era antes de mudar de lugar no HTML. */
#rpViewToggle{flex:1 1 100%;}
@media(min-width:901px){html.design-lab #rpViewToggle{flex:0 0 auto!important;margin-top:0!important;}}
.rp-head-text{flex:1;min-width:0;}
.rp-head h2{margin:0;}
.rp-sub{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5;}
.rp-cal-btn{flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px;display:grid;place-items:center;cursor:pointer;transition:border-color .18s,background .18s,color .18s;}
.rp-cal-btn.is-active{background:var(--primary);border-color:var(--primary);color:#fff;}
.rp-view{display:flex;gap:4px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 12%,transparent);margin-top:12px;}
.rp-view-btn{flex:1;padding:8px 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .18s,color .18s;}
.rp-view-btn.is-active{background:var(--card);color:var(--text);box-shadow:var(--app-shadow-soft);}
/* O fundo envolve a CATEGORIA INTEIRA (nome + barra + subcategorias), então
   o que separa uma categoria da outra é o próprio cartão — e as
   subcategorias, por estarem dentro dele, se leem como parte daquela
   categoria. As subs são só nome + valor, divididas por uma linha fina: a
   barrinha proporcional era ruído em cima da barra que a categoria já tem. */
.rp-subs{margin-top:10px;padding-top:9px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:7px;}
.rp-sub-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rp-sub-name{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rp-sub-name::before{content:"";flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;}
.rp-sub-value{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;}

/* Calendário de período (modal) */
/* Calendário do "Personalizado" (Relatórios) — pop-up ancorado embaixo do
   botão, não uma janela nova por cima de tudo (pedido explícito). Mesmo
   padrão visual/técnica de posicionamento do .fm-select-dropdown e do
   .month-pill-dropdown (position:fixed, sem backdrop, fecha ao clicar fora
   ou rolar a página). */
.rp-cal-popover{display:none;position:fixed;z-index:2100;width:320px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--app-line,var(--border));border-radius:16px;box-shadow:0 14px 32px rgba(18,20,30,.18);padding:16px;}
.rp-cal-popover.open{display:block;}
.rp-cal-popover-head{font-size:14px;font-weight:800;margin-bottom:2px;}
.rpcal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 10px;}
.rpcal-nav b{font-size:14.5px;font-weight:800;}
.rpcal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;}
.rpcal-week span{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;}
.rpcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.rpcal-day{aspect-ratio:1;border:0;border-radius:11px;background:transparent;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s;}
.rpcal-day.is-empty{pointer-events:none;}
.rpcal-day.is-today{box-shadow:inset 0 0 0 1px var(--border);}
.rpcal-day.is-in{background:color-mix(in srgb,var(--primary) 18%,transparent);border-radius:0;}
.rpcal-day.is-edge{background:var(--primary);color:#fff;font-weight:800;}
.rpcal-actions{display:flex;gap:9px;margin-top:16px;}
.rpcal-actions .btn{flex:1;justify-content:center;}
.rpcal-actions .btn:disabled{opacity:.5;cursor:not-allowed;}
.rp-block-title{margin:0 0 10px;font-size:15px;}
.rp-chips{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.rp-chips::-webkit-scrollbar{display:none;}
.rp-chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.rp-chip:hover{border-color:var(--primary);color:var(--primary);}
.rp-chip.is-active{background:var(--primary);border-color:var(--primary);color:#fff;}
.rp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.rp-kpi{padding:12px;border-radius:var(--radius-md);background:var(--card);border:1px solid var(--border);box-shadow:var(--app-shadow-soft);display:flex;flex-direction:column;gap:6px;min-width:0;}
.rp-kpi-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.rp-kpi b{font-size:15px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere;}
.rp-kpi.is-income .rp-kpi-label{color:var(--income);}
.rp-kpi.is-expense .rp-kpi-label{color:var(--expense);}
.rp-kpi.is-result b.is-negative{color:var(--expense);}
.rp-toggle{display:flex;gap:4px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 12%,transparent);margin-bottom:14px;}
.rp-toggle-btn{flex:1;padding:9px 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:background .18s,color .18s;}
.rp-toggle-btn.is-active{background:var(--card);color:var(--text);box-shadow:var(--app-shadow-soft);}
/* No computador esses dois controles esticavam pra ocupar a largura inteira
   do painel de Relatórios (pensados originalmente pra tela estreita do
   celular) e viravam pílulas enormes. Do tamanho do próprio texto, alinhados
   à esquerda — mesmo princípio dos outros controles segmentados do app. */
@media(min-width:901px){
  html.design-lab .rp-view,html.design-lab .rp-toggle{display:inline-flex!important;width:auto!important;}
  html.design-lab .rp-view-btn,html.design-lab .rp-toggle-btn{flex:0 0 auto!important;padding:8px 22px!important;}
}
.rp-chart-wrap{position:relative;height:230px;margin-bottom:14px;}
/* Pré-visualização do relatório (só computador — no celular a folha de
   compartilhamento do próprio sistema já cumpre esse papel). */
.rp-pdf-preview-modal{width:min(880px,calc(100vw - 56px))!important;max-width:none!important;height:min(90vh,900px);display:flex;flex-direction:column;}
/* O <iframe> agora é criado/destruído em JS (ver rpShowPdfPreview/
   closeRpPdfPreview) em vez de ficar parado no HTML — mesmo escondido, um
   iframe parado no DOM pode deixar uma camada de composição "fantasma" no
   WebKit, que já foi o suspeito nº1 do flash da prévia ao arrastar da
   borda pra voltar de página. Sem o elemento existir fora do momento em
   que está realmente em uso, não sobra nada pra "fantasmar". */
.rp-pdf-preview-frame-wrap{flex:1;min-height:0;width:100%;border-radius:12px;margin-top:10px;overflow:hidden;background:#525659;}
.rp-pdf-preview-frame-wrap iframe{display:block;width:100%;height:100%;border:1px solid var(--border);border-radius:12px;box-sizing:border-box;}
/* iOS não mostra PDF de blob: dentro de iframe de forma confiável (bug
   conhecido do WebKit) — nesse caso o iframe nem entra em cena (ver
   rpShowPdfPreview) e uma versão simulada (HTML, com os mesmos números e
   cores do PDF de verdade) aparece no lugar dele, só pra visualização.
   Compartilhar/baixar continuam entregando o PDF completo de sempre. */
.rp-pdf-preview-sim{flex:1;min-height:0;overflow-y:auto;margin-top:10px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--app-surface-soft);}
.rp-sim-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rp-sim-head i{font-size:22px;color:var(--expense);}
.rp-sim-head b{display:block;font-size:15px;}
.rp-sim-head small{display:block;color:var(--muted);font-size:12px;margin-top:2px;}
.rp-sim-note{margin:0 0 14px;padding:9px 11px;border-radius:9px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--muted);font-size:11.5px;line-height:1.4;}
.rp-sim-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:14px;}
.rp-sim-kpi{padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--border);}
.rp-sim-kpi span{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}
.rp-sim-kpi b{font-size:16px;font-weight:800;}
.rp-sim-cats{display:flex;flex-direction:column;gap:9px;}
.rp-sim-cat{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
.rp-sim-cat:last-child{border-bottom:0;}
.rp-sim-cat-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;}
.rp-sim-cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rp-sim-cat-value{flex:0 0 auto;font-weight:700;}
.rp-sim-cat-pct{flex:0 0 auto;width:38px;text-align:right;color:var(--muted);font-size:11px;}
.rp-sim-empty{margin:0;color:var(--muted);font-size:12.5px;text-align:center;padding:14px 0;}
.rp-pdf-preview-modal .modal-actions{flex:0 0 auto;}
.rp-cat-list{display:flex;flex-direction:column;gap:12px;}
/* Alinhado ao topo: com a lista de subcategorias embaixo, centralizar jogaria
   a bolinha e o % pro meio do bloco, longe do nome da categoria. */
.rp-cat{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:14px;background:color-mix(in srgb,var(--muted) 7%,transparent);}
.rp-cat-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:6px;}
.rp-cat-body{flex:1;min-width:0;}
.rp-cat-top{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px;}
.rp-cat-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rp-cat-top span{flex:0 0 auto;font-weight:700;}
.rp-cat-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden;}
.rp-cat-bar i{display:block;height:100%;border-radius:999px;}
.rp-cat-pct{flex:0 0 auto;width:38px;text-align:right;font-size:12px;font-weight:700;color:var(--muted);margin-top:1px;}
.rp-insights{display:flex;flex-direction:column;gap:10px;}
.rp-insight{display:flex;gap:10px;padding:12px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--muted) 8%,transparent);border-left:3px solid var(--muted);}
.rp-insight p{margin:0;font-size:12.5px;line-height:1.55;}
.rp-insight-ico{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);font-size:12px;color:var(--muted);}
.rp-insight.is-good{border-left-color:var(--income);background:color-mix(in srgb,var(--income) 9%,transparent);}
.rp-insight.is-good .rp-insight-ico{color:var(--income);}
.rp-insight.is-warn{border-left-color:var(--expense);background:color-mix(in srgb,var(--expense) 9%,transparent);}
.rp-insight.is-warn .rp-insight-ico{color:var(--expense);}
.rp-insight.is-neutral{border-left-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);}
.rp-insight.is-neutral .rp-insight-ico{color:var(--primary);}
.rp-exports{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.rp-export{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);color:var(--text);text-align:left;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s;}
.rp-export:hover{border-color:var(--primary);box-shadow:var(--app-shadow-soft);}
.rp-export span{min-width:0;}
.rp-export b{display:block;font-size:13.5px;}
.rp-export small{display:block;color:var(--muted);font-size:11.5px;line-height:1.45;margin-top:2px;}
.rp-export-ico{flex:0 0 auto;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:15px;}
.rp-export>.fa-chevron-right{margin-left:auto;color:var(--muted);font-size:12px;}
@media(min-width:901px){
  .rp-chart-wrap{height:280px;}
  .rp-exports{display:grid;grid-template-columns:1fr 1fr;}
}
/* Em telas estreitas os 3 KPIs continuam lado a lado (empilhar consumia
   quase uma dobra inteira antes do gráfico) — só encolhem tipografia e
   respiro. Abaixo de 330px aí sim viram lista, senão o valor quebra. */
@media(max-width:420px){
  .rp-kpis{gap:7px;}
  .rp-kpi{padding:10px 9px;gap:4px;}
  .rp-kpi-label{font-size:9.5px;gap:4px;}
  .rp-kpi b{font-size:13px;}
}
@media(max-width:330px){
  .rp-kpis{grid-template-columns:1fr;}
  .rp-kpi{flex-direction:row;align-items:center;justify-content:space-between;}
}

/* Linhas que só existem na versão mobile de "Meu perfil" (Preferências
   financeiras e Personalizar dashboard vieram de "Mais" — as duas dizem como
   o app se apresenta pra você, mesma família da Aparência). No computador
   elas continuam onde sempre estiveram, na grade de Ferramentas. */
.profile-nav-mobile-only{display:none!important;}
@media(max-width:900px){.profile-nav-mobile-only{display:flex!important;}}

/* ===== Chaves seletoras de VISÃO padronizadas (mobile) =====
   As chaves que alternam a VISÃO de uma tela (Atual/Fechamento no Dashboard,
   na página de Categorias e nas Preferências; Despesas/Receitas dos gráficos)
   passam a usar o mesmo desenho da página Relatórios: pílula ocupando a
   largura toda, opções de peso igual e a ativa destacada como um cartão.
   Antes cada tela tinha o seu — pílula estreita encostada à direita aqui,
   botão de 11px ali. Ficam DE FORA de propósito, a pedido: os filtros de
   Lançamentos e a chave de tipo do Novo lançamento, que continuam como
   sempre foram. Prefixo html.design-lab porque essa camada (sempre ativa) já
   traz regras próprias com !important pra vários destes — sem o prefixo elas
   venciam por especificidade. Escopo mobile: o computador não muda. */
@media(max-width:900px){
  html.design-lab .rp-toggle,html.design-lab .rp-view,
  html.design-lab .dashboard-view-options,html.design-lab .category-chart-switch,
  html.design-lab .category-switch,html.design-lab .mini-segmented{
    display:grid!important;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    width:100%!important;
    max-width:none!important;
    gap:4px!important;
    padding:4px!important;
    border:0!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--muted) 12%,transparent)!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html.design-lab .rp-toggle>button,html.design-lab .rp-view>button,
  html.design-lab .dashboard-view-options>button,html.design-lab .category-chart-switch>button,
  html.design-lab .category-switch>button,html.design-lab .mini-segmented>button{
    min-width:0!important;
    width:auto!important;
    min-height:38px!important;
    padding:8px 6px!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:var(--muted)!important;
    font-size:12.5px!important;
    font-weight:700!important;
    letter-spacing:normal!important;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:none!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  html.design-lab .rp-toggle>button.is-active,html.design-lab .rp-view>button.is-active,
  html.design-lab .dashboard-view-options>button.active,html.design-lab .category-chart-switch>button.active,
  html.design-lab .category-switch>button.active,html.design-lab .mini-segmented>button.active{
    background:var(--card)!important;
    color:var(--text)!important;
    box-shadow:var(--app-shadow-soft)!important;
  }
}

/* Página de Avisos (sino): no celular o cabeçalho só tinha a seta — o rótulo
   "Voltar" some nessa largura, então a página abria sem título nenhum. O h2
   novo resolve isso no mobile; no computador ele fica escondido porque lá o
   título da página já aparece no cabeçalho do app, e apareceria duas vezes. */
@media(min-width:901px){#alerts-page .alerts-page-title{display:none!important;}}

/* ===== Previsão de saldo (widget do dashboard) =====
   Quatro números no topo, um aviso que muda de tom conforme a gravidade, a
   curva do saldo projetado e os próximos compromissos. O ponto mais baixo do
   período é o único marcado no gráfico — é a informação que a pessoa procura. */
.forecast-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;}
.forecast-kpi{min-width:0;padding:9px 10px;border-radius:12px;background:color-mix(in srgb,var(--muted) 8%,transparent);}
.forecast-kpi span{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:3px;}
.forecast-kpi b{font-size:13.5px;font-weight:800;overflow-wrap:anywhere;}
.forecast-kpi b.is-income{color:var(--income);}
.forecast-kpi b.is-expense{color:var(--expense);}
.forecast-alert{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:12px;margin-bottom:12px;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);}
.forecast-alert i{flex:0 0 auto;margin-top:1px;color:var(--primary);font-size:13px;}
.forecast-alert p{margin:0;font-size:12.5px;line-height:1.45;color:var(--text);}
.forecast-alert.is-good{border-left-color:var(--income);background:color-mix(in srgb,var(--income) 9%,transparent);}
.forecast-alert.is-good i{color:var(--income);}
.forecast-alert.is-warn{border-left-color:#d99235;background:color-mix(in srgb,#d99235 11%,transparent);}
.forecast-alert.is-warn i{color:#d99235;}
.forecast-alert.is-bad{border-left-color:var(--expense);background:color-mix(in srgb,var(--expense) 10%,transparent);}
.forecast-alert.is-bad i{color:var(--expense);}
.forecast-chart-wrap{position:relative;height:190px;margin-bottom:6px;}
.forecast-next{margin-top:6px;}
.forecast-next h4{margin:0 0 6px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.forecast-next-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);}
.forecast-next-row:last-child{border-bottom:0;}
.forecast-next-day{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--muted);min-width:42px;}
.forecast-next-label{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.forecast-next-value{flex:0 0 auto;font-size:12.5px;font-weight:800;}
.forecast-next-value.is-income{color:var(--income);}
.forecast-next-value.is-expense{color:var(--text);}
.forecast-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;color:var(--muted);font-size:12px;line-height:1.45;padding:26px 18px;}
.forecast-empty i{font-size:20px;opacity:.55;}
.forecast-empty strong{color:var(--text);font-size:13px;}
@media(max-width:640px){
  .forecast-kpis{grid-template-columns:1fr 1fr;}
  .forecast-chart-wrap{height:170px;}
}

/* Sugestão de orçamento com base no histórico (modal de meta) */
.budget-suggestion{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--primary) 8%,transparent);border-left:3px solid var(--primary);margin-bottom:4px;}
.budget-suggestion>i{flex:0 0 auto;margin-top:2px;color:var(--primary);}
.budget-suggestion>div{flex:1;min-width:0;}
.budget-suggestion b{display:block;font-size:12.5px;line-height:1.35;}
.budget-suggestion small{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.budget-suggestion .btn{flex:0 0 auto;align-self:center;white-space:nowrap;}
.budget-suggestion.is-empty{border-left-color:var(--border);background:color-mix(in srgb,var(--muted) 8%,transparent);font-size:11.5px;color:var(--muted);line-height:1.4;}
.budget-suggestion.is-empty>i{color:var(--muted);}
.budget-suggestion-warn{display:block;margin-top:5px;font-size:11px;line-height:1.4;color:#d99235;}
@media(max-width:520px){
  .budget-suggestion{flex-wrap:wrap;}
  .budget-suggestion .btn{width:100%;justify-content:center;}
}

/* Assinaturas encontradas (dentro da página Recorrentes) */
.subscription-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);}
.subscription-row:last-of-type{border-bottom:0;}
.subscription-icon{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:14px;}
.subscription-body{flex:1;min-width:0;}
.subscription-body b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.subscription-body small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4;}
.subscription-amount{flex:0 0 auto;font-size:13.5px;font-weight:800;white-space:nowrap;}
.subscription-actions{flex:0 0 auto;display:flex;align-items:center;gap:4px;}
.link-btn{border:0;background:none;padding:0;color:var(--primary);font-size:inherit;font-weight:700;cursor:pointer;text-decoration:underline;}
@media(max-width:560px){
  .subscription-row{flex-wrap:wrap;row-gap:8px;}
  .subscription-amount{margin-left:auto;}
  .subscription-actions{width:100%;justify-content:flex-end;}
}

/* Folha de ações do lançamento (segurar o dedo, no celular) */
.tx-sheet-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--border);}
.tx-sheet-head>div{flex:1;min-width:0;}
.tx-sheet-head b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tx-sheet-head small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
.tx-sheet-emoji{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--muted) 12%,transparent);font-size:15px;}
.tx-sheet-amount{flex:0 0 auto;font-size:15px;font-weight:800;white-space:nowrap;}
.tx-sheet-actions{display:flex;flex-direction:column;gap:8px;}
.tx-sheet-action{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 15px;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:border-color .18s,background .18s;}
.tx-sheet-action i{width:18px;text-align:center;color:var(--muted);font-size:14px;}
.tx-sheet-action:active{background:color-mix(in srgb,var(--primary) 10%,var(--card));}
.tx-sheet-action.is-danger{color:var(--expense);}
.tx-sheet-action.is-danger i{color:var(--expense);}
.tx-sheet-cancel{width:100%;justify-content:center;margin-top:12px;min-height:46px;}

/* No celular, editar/duplicar/excluir/arquivar saem da linha: quem faz esse
   papel é a folha de ações (segurar o item). Os botões continuam no DOM
   porque a folha dispara justamente eles — e no computador seguem visíveis,
   onde não há gesto de segurar. */
@media(max-width:900px){
  [data-row-action]{display:none!important;}
  .tx .tx-actions{display:none!important;}
  .cc .cc-manage-actions:empty,.account-manage-actions:empty{display:none!important;}
}

/* Reserva de emergência (widget do dashboard) */
.reserve-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.reserve-months{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.reserve-months.is-good{color:var(--income);}
.reserve-months.is-ok{color:var(--income);}
.reserve-months.is-warn{color:#d99235;}
.reserve-months.is-bad{color:var(--expense);}
.reserve-months-label{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;}
.reserve-tag{flex:0 0 auto;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;}
.reserve-tag.is-good,.reserve-tag.is-ok{background:color-mix(in srgb,var(--income) 14%,transparent);color:var(--income);}
.reserve-tag.is-warn{background:color-mix(in srgb,#d99235 16%,transparent);color:#d99235;}
.reserve-tag.is-bad{background:color-mix(in srgb,var(--expense) 14%,transparent);color:var(--expense);}
.reserve-bar{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden;}
.reserve-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#6FBAFC,var(--income));transition:width .5s cubic-bezier(.2,.85,.25,1);}
.reserve-bar-mark{position:absolute;top:-2px;width:2px;height:12px;border-radius:2px;background:color-mix(in srgb,var(--text) 45%,transparent);}
.reserve-scale{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:var(--muted);}
.reserve-note{margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--text);}
.reserve-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px;}
.reserve-breakdown>div{min-width:0;padding:8px 9px;border-radius:11px;background:color-mix(in srgb,var(--muted) 8%,transparent);}
.reserve-breakdown span{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:3px;}
.reserve-breakdown b{font-size:12.5px;overflow-wrap:anywhere;}
.reserve-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;color:var(--muted);font-size:12px;line-height:1.45;padding:22px 16px;}
.reserve-empty i{font-size:20px;opacity:.55;}
.reserve-empty strong{color:var(--text);font-size:13px;}
/* Aviso com botão de desfazer */



@media(max-width:640px){
  .reserve-breakdown{grid-template-columns:1fr 1fr;}
}

/* Próximas faturas (widget do dashboard) */
.upcoming-lead{margin:0 0 12px;font-size:12.5px;line-height:1.5;}
.upcoming-months{display:flex;flex-direction:column;gap:9px;}
.upcoming-month{display:flex;align-items:center;gap:10px;}
.upcoming-month-label{flex:0 0 auto;width:52px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:capitalize;}
.upcoming-month-bar{flex:1;min-width:0;height:9px;border-radius:999px;background:color-mix(in srgb,var(--muted) 14%,transparent);overflow:hidden;}
.upcoming-month-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#8062d4,#820ad1);}
.upcoming-month-value{flex:0 0 auto;min-width:82px;text-align:right;font-size:12.5px;font-weight:800;}
.upcoming-note{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;font-size:11px;line-height:1.45;color:var(--muted);}
.upcoming-note i{margin-top:2px;}
.upcoming-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;color:var(--muted);font-size:12px;line-height:1.45;padding:22px 16px;}
.upcoming-empty i{font-size:20px;opacity:.55;}
.upcoming-empty strong{color:var(--text);font-size:13px;}

/* ===== Avisos (toasts) =====
   Redesenhados como cartão: ícone dentro de um círculo na cor do tipo do
   aviso, texto com respiro, cantos maiores e sombra profunda. O aviso com
   ação (Desfazer) mostra quantos segundos restam no próprio botão e uma
   barra que se esvazia na base — antes o aviso simplesmente sumia sem avisar
   que o tempo estava acabando. Vem por último no arquivo pra vencer as
   regras antigas de .toast sem precisar de !important espalhado. */
.toast-wrap{gap:10px;}
.toast{
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  /* Fundo sólido: com transparência dava pra ler o app atrás do aviso, e a
     mensagem competia com o conteúdo da tela. */
  font-size:13px;
  line-height:1.45;
  pointer-events:auto;
}
/* A faixa colorida da esquerda vira um fio inteiro, sem "degrau" no canto. */
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);}
.toast.err::before{background:#ff7183;}
.toast.info::before{background:#6FBAFC;}
.toast-icon{
  flex:0 0 auto;display:grid;place-items:center;
}
.toast .toast-icon i{margin:0;width:auto;color:inherit;}
.toast-text{flex:1;min-width:0;letter-spacing:-.1px;}
.toast-action-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:12px;font-weight:800;cursor:pointer;
  white-space:nowrap;transition:background .18s,border-color .18s;
}
.toast-action-btn:active{transform:scale(.97);}
.toast-countdown{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.toast-progress{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:rgba(255,255,255,.10);}
.toast-progress i{display:block;height:100%;width:100%;background:var(--primary);}
.toast.info .toast-progress i{background:#6FBAFC;}
.toast.err .toast-progress i{background:#ff7183;}
@media(max-width:600px){
  .toast-action-btn{font-size:11.5px;}
}
/* Avisos sempre na frente de qualquer janela: as janelas (.overlay) sobem
   a partir de 2000 a cada abertura (bringModalToFront) e outras telas chegam
   a 5000, então o 950 de antes deixava o aviso atrás do fundo desfocado.
   Só o cadeado do PIN fica por cima: com ele aberto o aviso some. */
.toast-wrap,.completion-feedback{z-index:2147483000!important;}
body:has(#pinLockScreen.open) :is(.toast-wrap,.completion-feedback){visibility:hidden;}

/* Avisos em pílula (v8.195.0, escolhido pelo Tiago): escura no tema claro,
   clara no tema escuro, ícone num círculo colorido e "Desfazer" em botão
   azul. Entra abrindo do ícone para a direita e sai fechando de volta até o
   ícone (toastLeave, app-core.js, espera o fim da animação e recolhe a fila). */
.toast{width:100%;min-height:52px;gap:11px;padding:8px 8px 8px 12px;border:0;border-radius:26px;
  background:#12141e;background-image:none;color:#fff;box-shadow:0 10px 28px rgba(15,23,42,.24);
  opacity:1;transform:none;transition:none;}
.toast:not(.toast-action){padding-right:18px;}
.toast.ok,.toast.err,.toast.info{border-left:0;}
html[data-theme="dark"] .toast{background:#f3f5fb;color:#12141e;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.toast::before,.toast-progress{display:none;}
.toast-icon,.toast.err .toast-icon,.toast.info .toast-icon{width:30px;height:30px;border-radius:50%;background:#00b98e;color:#fff;font-size:13px;}
.toast.err .toast-icon{background:#f4364c;}
.toast.info .toast-icon{background:var(--primary);}
.toast-text{font-weight:600;}
.toast-action-btn{min-height:36px;padding:0 14px;border:0;background:var(--primary);color:#fff;}
.toast-action-btn:hover{background:var(--primary-dark,var(--primary));}
.toast-countdown{background:rgba(255,255,255,.22);}
@media(max-width:600px){
  .toast{padding:8px 8px 8px 12px;border-radius:26px;font-size:12.5px;}
  .toast-icon{width:30px;height:30px;font-size:13px;}
  .toast-action-btn{min-height:36px;padding:0 13px;}
}
.toast.in{animation:fmToastOpen .48s cubic-bezier(.3,1.08,.4,1) .14s both,fmToastRise .2s ease-out both;}
.toast.in>:not(.toast-icon){animation:fmToastTxt .26s ease .32s both;}
.toast.in .toast-icon{animation:fmToastIcon .34s cubic-bezier(.3,1.6,.5,1) both;}
.toast.out{animation:fmToastClose .42s cubic-bezier(.55,0,.7,.4) both;pointer-events:none;}
.toast.out>:not(.toast-icon){animation:fmToastTxtOut .16s ease both;}
.toast.gone{overflow:hidden;transition:height .22s ease,margin .22s ease,padding .22s ease;}
@keyframes fmToastRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes fmToastOpen{from{clip-path:inset(0 calc(100% - 53px) 0 1px round 26px);}to{clip-path:inset(0 0 0 0 round 26px);}}
@keyframes fmToastClose{0%{clip-path:inset(0 0 0 0 round 26px);opacity:1;transform:none;}72%{clip-path:inset(0 calc(100% - 53px) 0 1px round 26px);opacity:1;transform:none;}100%{clip-path:inset(0 calc(100% - 53px) 0 1px round 26px);opacity:0;transform:translateY(8px);}}
@keyframes fmToastTxt{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
@keyframes fmToastTxtOut{to{opacity:0;transform:translateX(-10px);}}
@keyframes fmToastIcon{from{transform:scale(.3);}to{transform:none;}}
.toast-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.toast-icon svg path{stroke-dasharray:1;stroke-dashoffset:0;}
/* Ícone "abrindo": o círculo cresce e o traço se desenha; "fechando": o
   traço se apaga e o círculo some, antes da pílula terminar de fechar. */
.toast.in .toast-icon svg path{animation:fmToastDraw .3s cubic-bezier(.6,0,.3,1) .26s both;}
.toast.in .toast-icon svg path+path{animation-delay:.5s;animation-duration:.12s;}
.toast.in .toast-icon>i{animation:fmToastIris .38s ease .2s both;}
.toast.out .toast-icon{animation:fmToastIconOut .16s ease-in .24s both;}
.toast.out .toast-icon svg path{animation:fmToastUndraw .2s ease-in both;}
.toast.out .toast-icon svg path+path{animation-duration:.08s;}
.toast.out .toast-icon>i{animation:fmToastIrisOut .22s ease-in both;}
@keyframes fmToastDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes fmToastUndraw{from{stroke-dashoffset:0;}to{stroke-dashoffset:1;}}
@keyframes fmToastIris{from{clip-path:circle(0 at 50% 50%);transform:rotate(-40deg);}to{clip-path:circle(75% at 50% 50%);transform:none;}}
@keyframes fmToastIrisOut{from{clip-path:circle(75% at 50% 50%);}to{clip-path:circle(0 at 50% 50%);transform:rotate(40deg);}}
@keyframes fmToastIconOut{to{transform:scale(.3);opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .toast.in,.toast.in>*,.toast.in .toast-icon{animation:fmToastTxt .01s both;}
  .toast.out,.toast.out>*{animation:fmToastTxtOut .15s both;}
  .toast-icon svg path,.toast-icon>i{animation:none!important;}
}

/* Atalho de teclado pra pular a navegação: fica escondido até receber foco
   (primeiro Tab da página), padrão dos apps que se preocupam com quem navega
   sem mouse. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 18px;border-radius:0 0 10px 0;background:var(--primary);color:#fff;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;}

/* Lista que acompanha um gráfico de rosca (investimentos): nome, valor e
   participação de cada fatia. Fica fora do canvas de propósito — a legenda
   do Chart.js é desenhada dentro dele e corta o texto quando não cabe. */
.chart-legend{display:grid;gap:2px;margin-top:12px;}
.chart-legend-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 2px;font-size:12px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);}
.chart-legend-row:last-child{border-bottom:0;}
.chart-legend-dot{width:9px;height:9px;border-radius:50%;}
.chart-legend-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text);}
.chart-legend-value{font-weight:700;color:var(--text);white-space:nowrap;}
.chart-legend-pct{min-width:34px;text-align:right;color:var(--muted);font-size:11px;font-weight:600;}

/* Tela de detalhe de um lançamento (celular): valor em destaque no topo e os
   dados em linhas, no lugar de abrir o formulário de edição direto. */
.tx-detail-hero{padding:18px 4px 20px;}
.tx-detail-kind{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.tx-detail-amount{font-size:32px;font-weight:800;letter-spacing:-.5px;margin-top:6px;line-height:1.1;}
.tx-detail-desc{margin-top:4px;font-size:15px;font-weight:600;color:var(--text);}
.tx-detail-panel{padding:4px 14px;}
.tx-detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);font-size:13px;}
.tx-detail-row:last-child{border-bottom:0;}
.tx-detail-label{color:var(--muted);font-size:12px;font-weight:600;}
.tx-detail-value{font-weight:600;color:var(--text);text-align:right;}
.tx-detail-value i{color:var(--muted);margin-right:2px;}
.tx-detail-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:12px;font-weight:700;}
.tx-detail-history{padding:14px;}
.tx-detail-history-row{display:flex;align-items:flex-start;gap:10px;margin-top:9px;font-size:13px;font-weight:600;}
.tx-detail-history-row small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--muted);}
.tx-detail-actions{display:flex;gap:9px;margin-top:14px;}
.tx-detail-actions .btn{flex:1;justify-content:center;}
.tx-detail-actions .btn-ghost{flex:0 0 auto;padding-left:16px;padding-right:16px;}
.tx-detail-delete{color:var(--expense);border-color:color-mix(in srgb,var(--expense) 32%,var(--border));}


/* ============ REVISÃO DO DESKTOP (2026-09-07) ============ */
@media(min-width:901px){

  /* 1. O botão flutuante é do celular. No computador ele cobria conteúdo no
     canto e repetia duas coisas que já estão na barra de cima. */
  html.design-lab .fab,
  html.design-lab #fab{display:none!important;}

  /* 2. Sobrava um vão de 112px no fim de toda página — espaço reservado pra
     barra de navegação de baixo, que no computador não existe. */
  html.design-lab .main{padding-bottom:44px!important;}

  /* 3. Cards sempre com a mesma largura entre si, redistribuindo o espaço da
     linha — com "auto-fill" sobrava um vão vazio à direita sempre que havia
     menos cards do que cabiam numa linha (ex.: 2 contas numa tela que cabia
     3), porque colunas vazias "fantasmas" continuavam reservando espaço.
     "auto-fit" faz essas colunas vazias colapsarem, e os cards que existem
     esticam pra preencher a linha toda, do mesmo tamanho entre si. */
  html.design-lab #accountList,
  html.design-lab #cardList,
  html.design-lab #vaultList,
  html.design-lab #invList{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important;}
  /* O cartão tem um botão largo ("Pagar / antecipar") ao lado do nome: com
     a coluna mais estreita, um nome de duas palavras quebrava no meio. */
  html.design-lab #cardList{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;}
  /* O card de investimento carrega mais números (aplicado, bruto, líquido,
     rendimento, IR) — abaixo de 400px as colunas de valor se sobrepõem. */
  html.design-lab #invList{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))!important;}
  /* Nome do card na linha de cima, ações na de baixo.

     Os botões de um card (Guardar/Resgatar, Pagar, editar, excluir) são
     posicionados no canto superior direito, e o título reserva o espaço deles
     com um padding-right fixo de 270px. Isso funcionava enquanto o card tinha
     a largura da tela inteira; com a coluna de contexto ao lado, sobravam 60px
     pro nome — "Viagem Japão" quebrava no meio e "Poupança do carro" era
     cortado. No computador os botões voltam pro fluxo normal e caem numa
     segunda linha, então o nome usa a largura inteira do card. */
  html.design-lab #vaultList .vault-card>div:first-child,
  html.design-lab #cardList .cc>div:first-child,
  html.design-lab #accountList .cc>div:first-child{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important;}
  html.design-lab #vaultList .vault-card .vn,
  html.design-lab #cardList .cc .name,
  html.design-lab #accountList .cc .name{flex:1 1 100%!important;min-width:0!important;padding-right:0!important;}
  html.design-lab #vaultList .vault-card .vactions,
html.design-lab #vaultList .vault-card .vault-manage-actions,
html.design-lab #accountList .cc .account-manage-actions{position:static!important;flex:0 0 auto!important;}
  html.design-lab #vaultList .vault-card .vactions{order:2!important;}
  html.design-lab #vaultList .vault-card .vault-manage-actions,
html.design-lab #accountList .cc .account-manage-actions{order:3!important;margin-left:auto!important;}
  /* Orçamento: a grade de cartões brancos (2 colunas, ícone + badge de % +
     barra) é o layout do mockup — mantido só em #budget .budget-row-desktop
     (regra mais acima). Nada a redeclarar aqui. */

  /* 4. Contas a pagar/receber: os dois números do topo viravam duas faixas
     enormes. Agora ficam do tamanho de um cartão de resumo, à esquerda. */
  /* Sem largura máxima: os dois cards esticam pra preencher a linha toda,
     igual ao painel "Despesas a pagar/Receitas a receber" logo abaixo e às
     faixas de KPI de Cartões/Caixinhas — antes ficavam pequenos e colados à
     esquerda, destoando do resto da página, que é sempre largura cheia. */
  html.design-lab #bills>.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;}

  /* 5. Lançamentos usa a mesma largura das outras páginas (max-width:1680px
     do .section.active padrão) — a pedido explícito, em vez do limite mais
     estreito que essa página tinha antes só pra si. */

  /* 6. O nome de uma seção da barra lateral quebrava em duas linhas e
     empurrava o contador pra fora do lugar. */
  html.design-lab .sidebar .nav-item{align-items:center!important;}
  html.design-lab .sidebar .nav-item span{line-height:1.25!important;}
  html.design-lab .sidebar .nav-item .badge{flex:0 0 auto!important;align-self:center!important;margin-left:auto!important;}

}

/* Contas, Cartões, Orçamento e Caixinhas ganharam uma faixa de KPIs no
   cabeçalho (mesmo desenho já usado em Investimentos/Patrimônio: .cards >
   .stat, ver essas seções no HTML) — substituiu uma coluna à direita que
   existia antes; a faixa usa a classe .cards que o app já estiliza pra
   qualquer largura de tela, então não precisa de CSS novo aqui. */

/* No desktop, o gráfico de categorias do Dashboard leva pra Relatórios
   inteiro (não só um detalhamento) — o rótulo abaixo do gráfico muda de
   texto pra refletir isso, e troca "Toque" (mobile) por "Clique" (desktop). */
.category-chart-detail-link-desktop{display:none;}
@media(min-width:901px){.category-chart-detail-link-mobile{display:none;}.category-chart-detail-link-desktop{display:inline;}}

/* Faixas de KPI que existem só no computador (revisão de layout desktop):
   no celular essas páginas já cabiam bem na tela sem elas, e o objetivo
   aqui era usar o espaço vazio que só existe em telas largas. */
#txKpis,
#cardsKpis,
#vaultsKpis{display:none;}
@media(min-width:901px){
  html.design-lab #txKpis,
html.design-lab #cardsKpis,
html.design-lab #vaultsKpis{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;margin-bottom:18px!important;}
}
/* ===== Lançamentos: barra de ferramentas — reforma final =====
   Já existiam 2-3 gerações de CSS pra essa barra (sobras de rodadas
   anteriores) brigando entre si — uma delas deixava ".search-bar" quebrar
   em 2 linhas (flex-wrap:wrap sem largura sobrando), o que empurrava tudo
   fora do lugar. Em vez de caçar cada regra antiga, a barra inteira vira UM
   grid de 2 linhas: campo de busca sozinho em cima, e tudo o mais (filtro,
   exportar, categoria, período, segmentado de tipo) numa segunda linha,
   igual ao print. ".search-bar" e ".lancamentos-search-row" viram
   "display:contents" pra soltar seus filhos direto no grid do toolbar. */
@media(min-width:901px){
  html.design-lab #transactions .lancamentos-toolbar.lancamentos-toolbar{display:grid!important;grid-template-columns:minmax(0,330px) auto auto auto 1fr auto!important;align-items:center!important;column-gap:8px!important;row-gap:0!important;flex-wrap:unset!important;}
  html.design-lab #transactions .lancamentos-search-row.lancamentos-search-row,
  html.design-lab #transactions .search-bar.search-bar,
  html.design-lab #transactions #txSearchBar{display:contents!important;}
  html.design-lab #transactions .search-bar .fg.fg{grid-row:1!important;grid-column:1!important;margin:0!important;width:100%!important;min-width:0!important;}
  html.design-lab #transactions .search-bar .fg.fg input{width:100%!important;min-width:0!important;height:38px!important;border-radius:11px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;padding:0 12px!important;font-size:12.5px!important;}
  html.design-lab #transactions .search-bar .tx-filter-trigger.tx-filter-trigger,
  html.design-lab #transactions .search-bar .tx-import-statement.tx-import-statement{grid-row:1!important;width:38px!important;height:38px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:11px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--text-2)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;}
  html.design-lab #transactions .search-bar .tx-import-statement.tx-import-statement span{display:none!important;}
  html.design-lab #transactions .search-bar .tx-filter-trigger.tx-filter-trigger{grid-column:2!important;}
  html.design-lab #transactions .search-bar .tx-import-statement.tx-import-statement{grid-column:3!important;}
  html.design-lab #transactions .tx-inline-filters.tx-inline-filters{grid-row:1!important;grid-column:4!important;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;}
  html.design-lab #transactions .tx-inline-select.tx-inline-select{display:flex!important;align-items:center!important;gap:6px!important;height:38px!important;padding:0 10px!important;border-radius:11px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--text-2)!important;font-size:12px!important;font-weight:600!important;}
  html.design-lab #transactions .tx-inline-select.tx-inline-select select{background:none!important;border:0!important;font-size:12px!important;font-weight:600!important;color:var(--text-2)!important;padding:0 14px 0 0!important;height:auto!important;max-width:82px!important;text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;}
  html.design-lab #transactions .lancamentos-toolbar.lancamentos-toolbar>.transactions-filter-tabs.transactions-filter-tabs{grid-row:1!important;grid-column:6!important;justify-self:end!important;align-self:center!important;margin:0!important;display:inline-flex!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;border-radius:999px!important;padding:3px!important;gap:2px!important;width:auto!important;flex-wrap:nowrap!important;}
  html.design-lab #transactions .lancamentos-toolbar.lancamentos-toolbar>.transactions-filter-tabs.transactions-filter-tabs button{min-height:30px!important;height:30px!important;padding:0 10px!important;border-radius:999px!important;font-size:10.5px!important;font-weight:700!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;white-space:nowrap;}
  html.design-lab #transactions .lancamentos-toolbar.lancamentos-toolbar>.transactions-filter-tabs.transactions-filter-tabs button.active{background:var(--card)!important;color:var(--text)!important;box-shadow:0 1px 3px rgba(18,20,30,.10)!important;}
  html.design-lab #transactions .lancamentos-quickbar.lancamentos-quickbar{display:none!important;}
  /* Mesmo padrão visual da pílula "Todos/Receitas/Despesas/..." de
     Lançamentos (.transactions-filter-tabs, regra logo acima) — pedido
     explícito: o seletor de tipo (Receita/Despesa/Cartão/Transferência,
     A pagar/A receber) das janelas de novo lançamento, recorrente e
     compromisso usa agora a mesma trilha arredondada + pílula ativa neutra,
     em vez do bloco colorido por tipo de antes. */
  html.design-lab #txOverlay .type-toggle,
  html.design-lab #recOverlay .type-toggle,
  html.design-lab #billOverlay .type-toggle{grid-template-columns:none!important;max-width:100%!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;border-radius:999px!important;padding:3px!important;gap:2px!important;flex-wrap:nowrap!important;}
  html.design-lab #txOverlay .type-toggle button,
  html.design-lab #recOverlay .type-toggle button,
  html.design-lab #billOverlay .type-toggle button{min-width:0!important;height:36px!important;min-height:36px!important;padding:0 16px!important;border-radius:999px!important;border:0!important;background:transparent!important;color:var(--muted)!important;font-size:12px!important;font-weight:700!important;box-shadow:none!important;white-space:nowrap!important;}
  html.design-lab #txOverlay .type-toggle button.act-in,
  html.design-lab #txOverlay .type-toggle button.act-out,
  html.design-lab #txOverlay .type-toggle button.act-cc,
  html.design-lab #txOverlay .type-toggle button.act-tr,
  html.design-lab #recOverlay .type-toggle button.act-in,
  html.design-lab #recOverlay .type-toggle button.act-out,
  html.design-lab #recOverlay .type-toggle button.act-cc,
  html.design-lab #billOverlay .type-toggle button.act-in,
  html.design-lab #billOverlay .type-toggle button.act-out{background:var(--card)!important;color:var(--text)!important;box-shadow:0 1px 3px rgba(18,20,30,.10)!important;border-color:transparent!important;}
}

/* ===== Relatórios no celular =====
   #reports-page sempre teve os elementos novos (KPIs, rosca por categoria,
   insights) escondidos fora do computador — só o menu antigo de exportar
   PDF + "Relatório personalizado" ficava visível no celular. Essas regras
   reativam os mesmos elementos (IDs, então vencem o "display:none" de
   classes compartilhadas como .split-row/.compare-kpis sem precisar
   !important) com um layout em coluna única, do tamanho certo pra tela
   estreita — sem depender de html.design-lab (que só existe pensado pro
   computador nesta seção). */
@media(max-width:900px){
  #reports-page>.panel:last-of-type{display:none;}
  /* Relatórios agora é um atalho de primeiro nível (ícone próprio na barra
     inferior, igual Dashboard/Lançamentos) — não é mais uma sub-tela aberta
     a partir de Ferramentas. O "← Mais" não faz sentido nesse caso (quem
     chega pelo atalho não veio de Ferramentas) — some, sobra só o título
     "Relatórios" já mostrado no cabeçalho fixo do app. */
  #reports-page>.detail-topbar{display:none;}
  /* BUG REAL: sem ".section.active" aqui, o #id sozinho ganha do
     ".section{display:none}" que esconde telas inativas (mesmo problema
     já documentado noutras seções deste arquivo) — Relatórios ficava
     "display:flex" o tempo todo, inclusive fora de Relatórios, aparecendo
     por baixo/recortada em cima de outras telas como Ferramentas. */
  #reports-page.section.active{display:flex;flex-direction:column;}

  /* Período: título+subtítulo compactos, Atual/Fechamento como controle de
     largura total (alvo de toque maior) numa linha própria, chips numa
     ÚNICA linha que rola na horizontal — em vez de quebrar em várias
     linhas e empurrar o resto da tela pra baixo. */
  #reportsPeriodPanel{display:block;border-radius:16px;padding:14px 16px;margin:0;}
  #reportsPeriodPanel .period-head{display:flex;flex-direction:column;}
  #reportsPeriodPanel .period-head>div:first-child{display:flex;align-items:baseline;gap:6px;}
  #reportsPeriodPanel .period-title{font-weight:700;color:var(--text);}
  #reportsPeriodPanel .period-sub{color:var(--text-3);}
  #reportsPeriodPanel .period-head-right{width:100%;}
  #reportsPeriodPanel .dashboard-view-options{display:flex;width:100%;background:var(--app-surface-soft);border:1px solid var(--app-line);border-radius:999px;padding:3px;gap:2px;}
  #reportsPeriodPanel .dashboard-view-options button{flex:1;padding:0;border-radius:999px;color:var(--muted);background:transparent;border:0;}
  #reportsPeriodPanel .dashboard-view-options button.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(18,20,30,.10);}
  #reportsPeriodPanel .dashboard-view-options button[data-dashboard-view="projected"].active{color:#eab308;}
  #reportsPeriodPanel .chip-row{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  #reportsPeriodPanel .chip-row::-webkit-scrollbar{display:none;}
  #reportsPeriodPanel .period-chip{flex:0 0 auto;white-space:nowrap;color:var(--text-2);background:var(--app-surface-soft);border:0;}
  #reportsPeriodPanel .period-chip.active{background:var(--primary);color:#fff;}

  /* Pedido explícito: os filtros de Lançamentos (Todos/Receitas/Despesas/
     Cartão/Transferências) usam o mesmo tamanho/altura das pílulas de
     período de Relatórios acima — precisa do prefixo "html.design-lab"
     pra igualar a especificidade da regra da linha ~1046 (mesmo seletor
     básico, mas já com esse prefixo) e vencer por ordem no arquivo,
     já que um #id sozinho não bate um #id+.classe. Cor/tom também
     igualados ao pedido: mesmo fundo/texto neutro das pílulas de
     Relatórios em repouso, e o MESMO azul sólido (var(--primary)) no
     estado ativo — a linha 1047 usava um gradiente diferente. */


  /* Comparativo: "copie a tela do desktop e aplique ao mobile" — mesmo
     componente compareKpiCard() do Relatórios acima, só que aqui os 3
     cards (Despesas/Receitas lado a lado + Categoria que mais subiu
     ocupando a linha toda) sem o destaque em gradiente, que ali é
     específico do card "Resultado". */
  .compare-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px;}
  .compare-kpis .kpi-card{background:var(--card);border:1px solid var(--app-line);border-radius:16px;padding:14px;}
  .compare-kpis .kpi-card:last-child{grid-column:1/-1;}
  .compare-kpis .kpi-top{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .compare-kpis .kpi-icon{width:28px;height:28px;flex:0 0 28px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;}
  .compare-kpis .kpi-icon.negative{background:var(--negative-soft);color:var(--negative);}
  .compare-kpis .kpi-icon.positive{background:var(--positive-soft);color:var(--positive);}
  .compare-kpis .kpi-icon.accent{background:var(--accent-soft);color:var(--accent);}
  .compare-kpis .kpi-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em;}
  .compare-kpis .kpi-value{font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;font-weight:600;color:var(--text);}
  .compare-kpis .kpi-delta{font-size:11px;font-weight:700;margin-top:4px;display:flex;align-items:center;gap:4px;}
  .compare-kpis .kpi-delta:empty{display:none;}
  .compare-kpis .kpi-delta svg{width:11px;height:11px;flex:none;}
  .compare-kpis .kpi-delta .negative{color:var(--negative);display:flex;align-items:center;gap:4px;}
  .compare-kpis .kpi-delta .positive{color:var(--positive);display:flex;align-items:center;gap:4px;}
  .compare-kpis .kpi-delta .muted{color:var(--text-3);}
  .compare-kpis .kpi-delta .down svg{transform:rotate(180deg);}

  /* Pedido explícito: apagar "Resumo do período", "Comparação com sua
     média histórica" e "Variação vs mês anterior" — mesma decisão já
     tomada pro computador (ver comentário na linha ~2901), agora
     replicada aqui. E o gráfico "Despesas: mês atual vs mês anterior"
     passa a usar o MESMO componente de linhas com barra dupla do
     computador (.cmp-row-desktop, populado incondicionalmente agora em
     app-charts.js) em vez do gráfico Chart.js — só reflui pra 2 linhas
     por categoria porque a largura não cabe as 4 colunas do desktop. */
  #compare>.panel:has(#reportSummary),
  #compare>.panel:has(#avgList),
  #compare>.panel:has(#cmpList){display:none;}
  #cmpByCategoryPanel .cmp-chart-wrap{display:none;}
  #cmpByCategoryPanel #cmpTitle{font-size:14px;}
  #cmpListDesktop .cmp-row-desktop{display:grid;grid-template-columns:1fr auto;grid-template-areas:"cat total" "bars delta";align-items:center;column-gap:10px;row-gap:6px;padding:12px 0;border-top:1px solid var(--app-line);}
  #cmpListDesktop .cmp-row-desktop:first-child{border-top:0;padding-top:0;}
  #cmpListDesktop .cmp-row-desktop .cmp-cat{grid-area:cat;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #cmpListDesktop .cmp-row-desktop .cmp-icon{width:26px;height:26px;flex:0 0 26px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;}
  #cmpListDesktop .cmp-row-desktop .cmp-total{grid-area:total;text-align:right;font-family:'Space Grotesk',system-ui,sans-serif;font-size:12.5px;font-weight:700;color:var(--text);}
  #cmpListDesktop .cmp-row-desktop .cmp-bars{grid-area:bars;display:flex;flex-direction:column;gap:4px;}
  #cmpListDesktop .cmp-row-desktop .cmp-bar-track{height:7px;border-radius:4px;background:var(--app-surface-soft);overflow:hidden;}
  #cmpListDesktop .cmp-row-desktop .cmp-bar-fill{height:100%;border-radius:4px;}
  #cmpListDesktop .cmp-row-desktop .cmp-delta{grid-area:delta;justify-self:end;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;white-space:nowrap;}
  #cmpListDesktop .cmp-row-desktop .cmp-delta.up{background:var(--negative-soft);color:var(--negative);}
  #cmpListDesktop .cmp-row-desktop .cmp-delta.down{background:var(--positive-soft);color:var(--positive);}
  #cmpListDesktop .cmp-row-desktop .cmp-delta.eq{background:var(--app-surface-soft);color:var(--text-3);}
  /* Pedido explícito: tornar o comparativo por categoria interativo ao
     toque — cada linha abre um balão SOBRE a própria linha (não abre
     espaço entre categorias) com só o valor deste mês e do mês
     anterior. Mesma lógica do balão do gráfico de pizza de Relatórios:
     some sozinho depois de um tempo, ou ao tocar de novo/noutra
     linha. */
  #cmpListDesktop .cmp-row-desktop{cursor:pointer;}
  #cmpRowTooltip{position:absolute;top:0;left:0;transform:translate(-50%,-50%);z-index:20;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:10px;background:var(--sidebar-bg,#0f1630);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 8px 20px rgba(0,0,0,.28);}
  #cmpRowTooltip.is-visible{opacity:1;}
  #cmpRowTooltip b{font-size:12px;font-weight:800;}

  #reportsSplitRow{display:flex;flex-direction:column;gap:12px;}
  #reports-page .reports-side-col{display:contents;}
  #reportsCategoryPanel,#reportsInsightsPanel,#reportsExportPanel{border-radius:16px;padding:16px;margin:0;background:var(--card);border:1px solid var(--app-line);order:0;}
  /* Ordem pensada pro que mais importa primeiro: categorias > insights >
     exportar (ação secundária, fica por último). display:contents em
     .reports-side-col deixa os 3 painéis competirem por ordem direto
     dentro de #reportsSplitRow. */
  #reportsInsightsPanel{order:1;}
  #reportsExportPanel{order:2;}
  #reports-page .reports-card-head{display:flex;align-items:center;font-weight:700;color:var(--text);}
  #reports-page .reports-card-head i{color:var(--accent);}

  #reportsCategoryPanel .cat-type-toggle{display:flex;background:var(--app-surface-soft);padding:3px;gap:2px;}
  #reportsCategoryPanel .cat-type-btn{flex:1;color:var(--text-2);background:none;border:0;}
  #reportsCategoryPanel .cat-type-btn.active{background:var(--card);color:var(--text);}

  /* Rosca menor (era 160px) — na tela estreita, a lista embaixo é a parte
     que carrega a informação de verdade; o desenho só precisa dar o
     panorama geral rapidinho, sem brigar por espaço com a lista. */
  #reports-page .donut-block{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin-bottom:14px;}
  /* Pedido explícito: +10% no tamanho (175px→193px) e tirar o retângulo
     de seleção/foco que aparecia ao tocar numa fatia — outline:none nos
     3 níveis (host, svg, cada arco) porque o foco pode pousar em
     qualquer um deles dependendo do navegador. */
  #reportsCategoryPieSvg{width:193px;height:193px;position:relative;display:flex;align-items:center;justify-content:center;outline:none;-webkit-tap-highlight-color:transparent;}
  #reportsCategoryPieSvg svg{width:193px;height:193px;flex:none;outline:none;-webkit-tap-highlight-color:transparent;}
  #reportsCategoryPieSvg svg *{outline:none;-webkit-tap-highlight-color:transparent;}
  #reportsDonutCenterText{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;gap:1px;}
  #reportsDonutCenterText .donut-center-value{font-family:inherit;font-size:14px;font-weight:700;color:var(--text);}
  #reportsDonutCenterText .donut-center-label{font-size:9.5px;font-weight:600;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  /* Balão ao tocar numa fatia — sem mouse pra seguir, positionReportsDonutTooltip
     ancora ele no ângulo médio do próprio arco (ver app-charts.js). O
     transform:translate centraliza o balão EM CIMA do ponto calculado, em
     vez de usá-lo como canto — assim a matemática de ângulo→coordenada não
     precisa se preocupar com a largura do balão. */
  #reportsDonutTooltip{position:absolute;top:0;left:0;transform:translate(-50%,-50%);z-index:20;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:10px;background:var(--sidebar-bg,#0f1630);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 8px 20px rgba(0,0,0,.28);}
  #reportsDonutTooltip.is-visible{opacity:1;}
  #reportsDonutTooltip b{font-size:12px;font-weight:800;}
  /* Pedido explícito: o balão fica por fora do anel, "puxado" por um
     fiozinho até a fatia — ver a nova positionReportsDonutTooltip em
     app-charts.js pra matemática de onde a linha começa/termina. z-index
     um degrau abaixo do balão, pra parecer que a linha "entra" nele. */
  #reportsDonutLine{display:block;position:absolute;top:0;left:0;height:2px;width:0;background:var(--sidebar-bg,#0f1630);transform-origin:0 50%;opacity:0;transition:opacity .15s;pointer-events:none;z-index:19;}
  #reportsDonutLine.is-visible{opacity:1;}
  /* Pontinho que percorre o anel entre uma fatia e outra (ver
     animateReportsDonutMarker em app-charts.js — a rotação em si é
     animada em JS quadro a quadro; aqui só o visual do "carrinho" e o
     bounce de chegada no raio, via transition de r). */
  #reportsDonutMarker{transition:opacity .2s ease;}
  .reports-donut-marker-dot{fill:#fff;stroke:var(--sidebar-bg,#0f1630);stroke-width:2.5;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));transition:r .2s cubic-bezier(.34,1.56,.64,1);}

  /* Piscada da linha ao tocar na fatia correspondente — existia só no
     computador (html.design-lab); sem isto, tocar numa fatia não refletia
     nada na lista abaixo no celular. */
  #reportsCategoryList .cat-row.is-flash{background:var(--accent-soft);border-radius:12px;transition:background .3s ease;}
  #reportsCategoryList .cat-row{padding:12px 0;border-top:1px solid var(--app-line);}
  #reportsCategoryList .cat-row:first-child{border-top:0;padding-top:0;}
  /* Recolher/expandir as subcategorias: a linha inteira do cabeçalho vira o
     toque (alvo maior que só a setinha), que só existe quando há de fato
     alguma subcategoria pra mostrar. Padrão fechado por padrão? Não — pedido
     era "deixar eu recolher OU expandir", então começa aberto (igual sempre
     foi) e cada categoria lembra o que você escolheu enquanto a tela existir. */
  #reports-page .cat-row-head{gap:10px;}
  #reports-page .cat-row-head:has(.cat-row-chevron){cursor:pointer;}
  #reports-page .cat-row .cat-icon{display:flex;align-items:center;justify-content:center;}
  #reports-page .cat-row .cat-name{color:var(--text);flex:1;}
  #reports-page .cat-row .cat-pct{color:var(--text-3);flex:0 0 auto;}
  #reports-page .cat-row .cat-amount{font-weight:700;font-family:inherit;text-align:right;color:var(--text);flex:0 0 auto;}
  #reports-page .cat-row-chevron{flex:0 0 auto;margin-left:2px;color:var(--text-3);transform:rotate(180deg);transition:transform .2s ease;}
  #reports-page .cat-row:not(.is-expanded) .cat-row-chevron{transform:rotate(0deg);}
  #reports-page .cat-bar-track{height:6px;border-radius:4px;background:var(--app-surface-soft);overflow:hidden;}
  #reports-page .cat-bar-fill{height:100%;border-radius:4px;}
  #reports-page .sub-list{display:flex;flex-direction:column;}
  #reports-page .sub-row{display:flex;align-items:center;justify-content:space-between;color:var(--text-3);gap:8px;}
  #reports-page .sub-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #reports-page .sub-row-name::before{content:"– ";}

  /* Insights: não tinha NENHUM estilo fora do computador (a regra existia
     só dentro do bloco html.design-lab) — o ícone aparecia pelado, sem o
     selo colorido, e o texto sem respiro nenhum entre as linhas. Mesma
     estrutura em Relatórios (#reportsInsights) e Comparativo
     (#opportunityList, "Pontos para revisar"). */
  #reportsInsights .insight-row,#opportunityList .insight-row{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--app-line);text-align:left;}
  #reportsInsights .insight-row:first-child,#opportunityList .insight-row:first-child{border-top:0;padding-top:0;}
  #reportsInsights .insight-icon,#opportunityList .insight-icon{width:30px;height:30px;flex:0 0 30px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;}
  #reportsInsights .insight-icon.negative,#reportsInsights .insight-icon.warn,#opportunityList .insight-icon.negative,#opportunityList .insight-icon.warn{background:var(--negative-soft);color:var(--negative);}
  #reportsInsights .insight-icon.positive,#opportunityList .insight-icon.positive{background:var(--positive-soft);color:var(--positive);}
  #reportsInsights .insight-icon.warning,#opportunityList .insight-icon.warning{background:var(--warning-soft);color:var(--warning);}
  #reportsInsights .insight-icon.info,#opportunityList .insight-icon.info{background:var(--accent-soft);color:var(--accent);}
  #reportsInsights .insight-text,#opportunityList .insight-text{font-size:12.5px;color:var(--text-2);line-height:1.5;padding-top:5px;}
  #reportsInsights .insight-text b,#opportunityList .insight-text b{color:var(--text);}

  /* Exportar: 4 botões grandes com descrição (uns 70-80px cada, quase
     300px de tela só pra isso) viravam um grid 2x2 só de ícone+título —
     ação secundária, não precisa do mesmo destaque do resto da página. */
  #reportsExportPanel .export-hint{color:var(--text-3);}
  #reportsExportPanel .export-grid{display:grid;}
  #reportsExportPanel .export-btn{display:flex;}
  #reportsExportPanel .export-btn:active{background:var(--app-surface-soft);}
  #reportsExportPanel .export-icon{background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;}
  #reportsExportPanel .export-title{color:var(--text);line-height:1.25;}
}

/* Ferramentas no celular: o link "Editar perfil" embaixo do cartão de
   perfil e o rótulo "Configurações" acima da lista eram redundantes com o
   próprio cartão (que já abre o mesmo editor ao tocar) — pedido explícito
   pra tirar os dois. Só no celular: no computador ficam como estão. */

/* Caixinhas: editar/excluir do card novo (grade "Outras caixinhas") preso
   em position:static — "#vaultList .vault-card .vault-manage-actions
   {position:static!important}" (mais acima, pensado pro card antigo de
   Contas/Cartões) tem #vaultList na seletora, e nenhuma soma de CLASSES
   bate um #id (é lexicográfico: id vence sempre, não importa quantas
   classes o outro lado tenha — duplicar classes não ia resolver). Repete
   o mesmo #id aqui, no fim do arquivo, pra empatar em especificidade e
   ganhar por ordem de declaração. */
@media(min-width:901px){
  html.design-lab #vaultList .vault-desktop-card .vault-manage-actions{position:absolute!important;top:10px!important;right:10px!important;}
}

/* Rodada 8.141.9 — ajustes finais (desktop) */
/* Listas flutuantes: chegar ao fim do scroll da lista não pode rolar a página. */
.fm-select-dropdown,.rp-cal-popover,html.design-lab .month-pill-dropdown,html.design-lab .global-search-dropdown{overscroll-behavior:contain;}
@media(min-width:901px){
  /* Filtro Categoria: só o retângulo do wrapper (11px); o gatilho interno não tem forma própria. */
  html.design-lab #transactions .tx-inline-select .fm-select-trigger{border:0!important;background:transparent!important;border-radius:0!important;padding:0 2px!important;height:100%!important;}
  /* Seletor de tipo dos modais: pílulas esticadas na largura da janela. */
  html.design-lab #txOverlay .type-toggle,html.design-lab #recOverlay .type-toggle,html.design-lab #billOverlay .type-toggle{display:flex!important;width:100%!important;}
  html.design-lab #txOverlay .type-toggle button,html.design-lab #recOverlay .type-toggle button,html.design-lab #billOverlay .type-toggle button{flex:1 1 0!important;justify-content:center!important;}
  /* Cores: receita/a receber = verde, despesa/a pagar = vermelho (sempre). */
  html.design-lab #txOverlay .type-toggle button#tglIn,html.design-lab #recOverlay .type-toggle button#rTglIn,html.design-lab #billOverlay .type-toggle button#bTglRec{color:var(--income)!important;}
  html.design-lab #txOverlay .type-toggle button#tglOut,html.design-lab #recOverlay .type-toggle button#rTglOut,html.design-lab #billOverlay .type-toggle button#bTglPay{color:var(--expense)!important;}
  html.design-lab #txOverlay .type-toggle button#tglCc.act-cc,html.design-lab #recOverlay .type-toggle button#rTglCc.act-cc{color:#b97800!important;}
  html.design-lab #txOverlay .type-toggle button#tglTr.act-tr{color:#4777c8!important;}
}
@media(min-width:901px){
  html.design-lab #transactions .tx-inline-select.tx-inline-select{min-width:126px!important;}
  html.design-lab #transactions .tx-inline-select .fm-select-trigger{width:100%!important;}
}
@media(min-width:901px){
  html.design-lab #transactions .tx-inline-select .fm-select-trigger,
  html.design-lab #transactions .tx-inline-select .fm-select-trigger:active,
  html.design-lab #transactions .tx-inline-select .fm-select-trigger.fm-pressing{justify-content:flex-start!important;text-align:left!important;transform:none!important;transition:none!important;filter:none!important;}
  html.design-lab #transactions .tx-inline-select .fm-select-label{flex:1 1 auto!important;text-align:left!important;padding-right:18px!important;}
  html.design-lab #transactions .tx-inline-select i{transition:none!important;transform:none!important;animation:none!important;}
}
@media(min-width:901px){html.design-lab #transactions .tx-inline-select .fm-select-icon:empty{display:none!important;}}
/* Filtros de Lançamentos no desktop: pop-up ancorado embaixo do botão, não janela. */
@media(min-width:901px){
  #txFilterOverlay{align-items:flex-start!important;justify-content:flex-start!important;padding:0!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none!important;}
  #txFilterOverlay .modal{position:fixed!important;transform:none!important;animation:none!important;margin:0!important;width:560px!important;max-width:calc(100vw - 16px)!important;max-height:calc(100vh - 24px)!important;overflow-y:auto!important;overscroll-behavior:contain;pointer-events:auto!important;box-shadow:0 14px 32px rgba(18,20,30,.22)!important;}
}
/* Mobile: o calendário do "Personalizado" é uma janela centralizada (o pop-up ancorado é só do desktop). */
@media(max-width:900px){
  .rp-cal-popover{z-index:2100;}
}
/* Mobile: mês da fatura do cartão — só a pílula externa; o gatilho interno não tem forma própria e a seta duplicada some. */
@media(max-width:900px){
  .cards-month-pill .fm-select-trigger{border:0!important;background:transparent!important;border-radius:0!important;padding:8px 4px!important;}
  .cards-month-pill>i.fa-chevron-down{display:none!important;}
}
@media(max-width:900px){
  .card-carousel-item[data-card-id],.card-carousel-item[data-account-id]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  .card-carousel-item .card-drag-handle{display:none!important;}
  .entity-drag-proxy.card-carousel-item{border-radius:16px;}
}
/* Mobile: Google Agenda tinha o título duplicado (barra do topo + título interno) e um "X" sem função aqui. */
@media(max-width:900px){#google-calendar-settings-page .mais-page-inner-title,#gmail-settings-page .mais-page-inner-title{display:none!important;}}
/* Mobile: Patrimônio líquido centralizado na tela. */
@media(max-width:900px){
  #patrimony .stat.balance{text-align:center!important;align-items:center!important;}
  #patrimony .stat.balance .t{justify-content:center!important;}
  #patrimony .stat.balance .v{text-align:center!important;width:100%!important;}
}
/* Mobile: o calendário do "Personalizado" é uma janela nativa do celular (folha que sobe de baixo, com alça e fundo desfocado), igual às demais. */
@media(max-width:900px){
  .rp-cal-popover{top:auto!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;max-width:none!important;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;background:var(--card,#161822);border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:22px 22px 0 0;padding:26px 16px calc(17px + env(safe-area-inset-bottom));box-shadow:0 20px 44px rgba(0,0,0,.5)!important;animation:modal-in .25s ease;}
  .rp-cal-popover::before{content:'';position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:3px;background:rgba(255,255,255,.12);}
  .rp-cal-popover::after{content:'';position:fixed;inset:0;z-index:-1;background:rgba(6,14,33,.56);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
}

@media(max-width:900px){.invoice-modal .invoice-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;}.invoice-modal .invoice-summary .iv span{font-size:10.5px!important;}.invoice-modal .invoice-summary .iv b{font-size:14px!important;}}
@media(max-width:900px){html.design-lab #card-details .cards-detail-view{display:none!important;}html.design-lab #card-details #desktopInvoiceSummary.invoice-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}html.design-lab #card-details #desktopInvoiceSummary .iv{display:block!important;padding:10px 8px!important;}html.design-lab #card-details #desktopInvoiceSummary .iv span{font-size:10.5px!important;line-height:1.25;}html.design-lab #card-details #desktopInvoiceSummary .iv b{font-size:14px!important;}}

/* ===== Celular: cores sólidas (sem degradê), orçamento compacto, data do lançamento fora ===== */
@media(max-width:900px){
  html.design-lab body,html.design-lab[data-theme="dark"] body,html.design-lab[data-theme="light"] body{background:var(--bg)!important;background-image:none!important;}
  html.design-lab .cc,html.design-lab .vault-card,html.design-lab .account-total,html.design-lab .account-hero,html.design-lab .inv-card{background:var(--app-surface)!important;background-image:none!important;}
  html.design-lab .hero-card,html.design-lab #vaults .hero-card{background:#305bf3!important;background-image:none!important;}
  html.design-lab .card-detail-visual{background:var(--item-color,var(--primary))!important;background-image:none!important;}
  html.design-lab .credit-card{background-image:none!important;background-color:var(--item-color,var(--primary))!important;}
  html.design-lab .btn:not(.btn-ghost):not(.header-search),html.design-lab .today-btn,html.design-lab .header-quick,html.design-lab .desktop-new-tx,html.design-lab .fab,html.design-lab .btn-pay,html.design-lab .auth-submit,html.design-lab .auth-tabs button.active{background:#305bf3!important;background-image:none!important;}
  html.design-lab .limit-bar-fill,.reserve-bar i{background:var(--primary)!important;}
  .upcoming-month-bar i{background:#8062d4!important;}

  /* Lançamentos já são separados por dia: a data sai de baixo do título */
  #transactions .tx-date,#card-details .tx-date,#cardsInvoiceList .tx-date,#invoiceList .tx-date,#account-details .tx-date{display:none!important;}

  html.design-lab #appRoot,html.design-lab .app{background:var(--bg)!important;background-image:none!important;}
  html.design-lab .bottom-nav button.bottom-nav-fab,html.design-lab .bottom-nav-fab,html.design-lab .brand-mark,html.design-lab .sidebar-user-avatar{background:#305bf3!important;background-image:none!important;}
  html.design-lab .sidebar,html.design-lab[data-theme="light"] .sidebar{background:var(--app-surface)!important;background-image:none!important;}
  html.design-lab .nav-item.active{background:color-mix(in srgb,#305bf3 22%,transparent)!important;background-image:none!important;}

  /* Orçamento compacto */
  html.design-lab #budget>.topbar{display:none!important;}
}

/* ===== Celular: tipografia de app nativo (um pouco maior) ===== */
@media(max-width:900px){
  html.design-lab .tx .desc{font-size:16px!important;line-height:1.3!important;}
  html.design-lab .tx .amt{font-size:16px!important;}
  html.design-lab .day-head{font-size:13px!important;}
  html.design-lab .btn:not(.btn-sm){font-size:15px!important;}
  html.design-lab input,html.design-lab select,html.design-lab textarea{font-size:16px!important;}
  html.design-lab .field label,html.design-lab label{font-size:13px!important;}
  html.design-lab .pill{font-size:12px!important;}
  html.design-lab .invoice-summary .iv span,html.design-lab #desktopInvoiceSummary .iv span{font-size:12px!important;}
  html.design-lab .bottom-nav button{font-size:12px!important;}
}
@media(max-width:900px){
  html.design-lab .card-carousel-item{background:var(--item-color,var(--primary))!important;background-image:none!important;}
  html.design-lab .cc .lim,html.design-lab .account-card .lim,html.design-lab .profile-trust,html.design-lab .dashboard-greeting-time,html.design-lab .stat .label,html.design-lab .dashboard .label{font-size:13px!important;}
  html.design-lab .mais-nav-group-label{font-size:12px!important;}
  html.design-lab .app-version{font-size:12px!important;}
  html.design-lab #transactions .period-chip{font-size:14px!important;}
  html.design-lab small{font-size:12px!important;}
}

/* ===== Celular: telas copiadas do desktop (Categorias, Investimentos, Patrimônio, Gastos formiga) — gerado das regras desktop, escopado por tela ===== */
@media(max-width:900px){
/* ---- categories ---- */
  html.design-lab #categories>.panel{margin:0!important;}
  html.design-lab #categories .cat-split{align-items:start!important;}
  html.design-lab #categories .cat-card{min-width:0!important;}
  html.design-lab #categories .cat-card{background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;padding:22px!important;box-shadow:none!important;}
  html.design-lab #categories .cat-card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:14px!important;}
  html.design-lab #categories .cat-card-title{display:flex!important;align-items:center!important;gap:10px!important;font-size:15px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #categories .cat-card-badge{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab #categories .cat-card-badge.expense{background:var(--negative-soft)!important;color:var(--expense)!important;}
  html.design-lab #categories .cat-card-badge.income{background:var(--positive-soft)!important;color:var(--income)!important;}
  html.design-lab #categories .cat-card-count{font-size:12px!important;font-weight:600!important;color:var(--muted)!important;}
  html.design-lab #categories .cat-item-desktop{display:flex!important;align-items:center!important;gap:14px!important;padding:13px 0!important;border-bottom:0!important;border-top:1px solid var(--app-line)!important;cursor:pointer;}
  html.design-lab #categories .cat-card-head+.cat-item-desktop{border-top:0!important;padding-top:0!important;}
  html.design-lab #categories .cat-item-desktop:hover{background:var(--app-surface-soft)!important;}
  html.design-lab #categories .cat-icon{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;}
  html.design-lab #categories .cat-body{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:1px!important;}
  html.design-lab #categories .cat-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #categories .cat-subs{font-size:11px!important;color:var(--muted)!important;}
  html.design-lab #categories .cat-chev{font-size:12px!important;color:var(--muted)!important;flex:0 0 auto!important;}
  html.design-lab #categories .cat-item-desktop .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:12px!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab #categories .cat-item-desktop:hover .icon-btn,html.design-lab #categories .cat-item-desktop .icon-btn:focus-visible{opacity:1!important;}
  html.design-lab #categories .cat-item-desktop .icon-btn:hover{color:var(--expense)!important;}
  html.design-lab #categories #recSummary{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
  html.design-lab #categories #recListPanel{border-radius:22px!important;padding:8px 22px 18px!important;}
  html.design-lab #categories .rec-table td{padding:15px 4px!important;}
  html.design-lab #categories .rec-table .day-badge{font-size:12px!important;font-weight:700!important;color:var(--text-2)!important;white-space:nowrap;}
  html.design-lab #categories .rec-table .row-actions{display:flex!important;gap:6px!important;justify-content:flex-end!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab #categories .rec-table tbody tr:hover .row-actions{opacity:1!important;}
  html.design-lab #categories .rec-table .icon-action{width:30px!important;height:30px!important;min-width:30px!important;border:1px solid var(--app-line)!important;border-radius:9px!important;background:var(--card)!important;color:var(--text-3)!important;font-size:12px!important;}
  html.design-lab #categories .rec-table .icon-action:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}
  html.design-lab #categories .rec-table .icon-action.del:hover{color:var(--expense)!important;}
/* ---- investments ---- */
  html.design-lab #investments>.cards .stat .t{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important;}
  html.design-lab #investments>.cards .stat-icon-badge{order:2!important;margin-left:auto!important;}
  html.design-lab #investments>.cards .stat.invest .stat-icon-badge{background:var(--surface-sunken)!important;color:var(--text-2)!important;}
  html.design-lab #investments>.cards .stat.balance .stat-icon-badge{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #investments>.cards .stat.income .stat-icon-badge{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab #investments>.cards .stat.expense .stat-icon-badge{background:var(--warning-soft)!important;color:var(--warning)!important;}
  /* .active precisa entrar na regra: sem ela,!important + especificidade de
     id vence o `.section{display:none}
  ` que esconde telas inativas,e a
     tela fica visível por baixo de qualquer outra o tempo todo. */
  html.design-lab #investments.section.active{display:grid!important;}
  html.design-lab #investments>.cards,html.design-lab #investments>#invSummary{order:0!important;}
  html.design-lab #investments>.topbar{display:none!important;}
  html.design-lab #investments>.grid2{display:contents!important;}
  html.design-lab #investments .panel:has(#invInstitutionChart){display:none!important;}
  html.design-lab #investments .panel:has(#invReturnChart){order:5!important;position:relative!important;}
  html.design-lab #investments .panel:has(#invTypeChart){display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:auto 1fr!important;gap:18px!important;height:auto!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>h3{grid-column:1/-1!important;grid-row:1!important;margin-bottom:0!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>canvas{grid-column:1!important;grid-row:2!important;align-self:center!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>.chart-legend{grid-column:2!important;grid-row:2!important;align-self:center!important;margin-top:0!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>h3{flex:1 0 100%!important;}
  html.design-lab #investments .panel:has(#invTypeChart)>canvas{flex:0 0 auto!important;max-width:169px!important;max-height:169px!important;margin-top:17px!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:10px!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-row{display:flex!important;align-items:center!important;gap:8px!important;font-size:13px!important;font-weight:600!important;color:var(--text-2)!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-dot{width:9px!important;height:9px!important;border-radius:4px!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-name{flex:1!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-value{display:none!important;}
  html.design-lab #investments .panel:has(#invTypeChart) .chart-legend-pct{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #investments .panel:has(#invChart) .hint{margin:0!important;font-size:12px!important;color:var(--text-3)!important;font-weight:600!important;}
  html.design-lab #investments .inv-evo-sub{display:block!important;font-size:12px!important;font-weight:600!important;color:var(--text-3)!important;}
  html.design-lab #investments .panel:has(#invChart) canvas{max-height:150px!important;}
  html.design-lab #investments .panel:has(#invTypeChart){padding-top:22px!important;padding-bottom:18px!important;}
  html.design-lab #investments .inv-positions-panel{border-radius:22px!important;}
  html.design-lab #investments .inv-position-row:hover{background:var(--app-surface-soft)!important;}
  html.design-lab #investments .inv-table .type-pill{display:inline-block!important;font-size:11px!important;font-weight:700!important;padding:5px 11px!important;border-radius:10px!important;background:var(--app-surface-soft)!important;color:var(--text-2)!important;}
  html.design-lab #investments .inv-table .profit-tag{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;}
  html.design-lab #investments .inv-table .profit-tag.pos{color:var(--positive)!important;}
  html.design-lab #investments .inv-table .profit-tag.neg{color:var(--negative)!important;}
  html.design-lab #investments .inv-position-actions{transition:opacity .15s!important;}
  html.design-lab #investments .inv-position-row:hover .inv-position-actions{opacity:1!important;}
  html.design-lab #investments .inv-position-actions .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;font-size:12px!important;color:var(--muted)!important;}
  html.design-lab #investments .inv-position-actions .icon-btn:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}
/* ---- patrimony ---- */
  html.design-lab #patrimony .hero-card{margin-bottom:16px!important;background:linear-gradient(135deg,#305bf3,#1c3fc7)!important;color:#fff!important;}
  html.design-lab #patrimony .hero-card{display:block!important;}
  html.design-lab #patrimony .hero-label{font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab #patrimony .hero-value{margin-top:6px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.02em!important;}
  html.design-lab #patrimony .hero-bar{display:flex!important;margin-top:20px!important;height:8px!important;border-radius:5px!important;overflow:hidden!important;background:rgba(255,255,255,.16)!important;}
  html.design-lab #patrimony .hero-bar-assets{background:var(--accent-light)!important;}
  html.design-lab #patrimony .hero-bar-liab{background:var(--negative)!important;}
  html.design-lab #patrimony .hero-legend{display:flex!important;gap:32px!important;margin-top:16px!important;}
  html.design-lab #patrimony .hero-legend-item{display:flex!important;align-items:center!important;gap:8px!important;}
  html.design-lab #patrimony .hero-legend-dot{width:9px!important;height:9px!important;border-radius:4px!important;flex:0 0 auto!important;}
  html.design-lab #patrimony .hero-legend-dot.assets{background:var(--accent-light)!important;}
  html.design-lab #patrimony .hero-legend-dot.liab{background:var(--negative)!important;}
  html.design-lab #patrimony .hero-legend-label{font-size:12px!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab #patrimony .hero-legend-value{margin-top:2px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:14px!important;font-weight:600!important;}
  html.design-lab #patrimony .split-row{margin-bottom:16px!important;}
  html.design-lab #patrimony .split-row .card{background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;}
  html.design-lab #patrimony .split-row .card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:6px!important;padding-bottom:14px!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab #patrimony .split-row .card-title{display:flex!important;align-items:center!important;gap:10px!important;font-size:14px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #patrimony .split-row .card-title-icon{width:30px!important;height:30px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;}
  html.design-lab #patrimony .split-row .card-title-icon.assets{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab #patrimony .split-row .card-title-icon.liab{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #patrimony .split-row .card-total{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:16px!important;font-weight:700!important;}
  html.design-lab #patrimony .split-row .card-total.assets{color:var(--positive)!important;}
  html.design-lab #patrimony .split-row .card-total.liab{color:var(--negative)!important;}
  html.design-lab #patrimony .split-row .item-row{display:flex!important;align-items:center!important;gap:12px!important;padding:13px 0!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab #patrimony .split-row .card-head+.item-row{border-top:0!important;}
  html.design-lab #patrimony .split-row .item-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:13px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;}
  html.design-lab #patrimony .split-row .item-body{flex:1!important;min-width:0!important;}
  html.design-lab #patrimony .split-row .item-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #patrimony .split-row .item-sub{font-size:12px!important;color:var(--muted)!important;margin-top:1px!important;}
  html.design-lab #patrimony .split-row .item-amount{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:13px!important;font-weight:700!important;color:var(--text)!important;white-space:nowrap;}
/* ---- ants ---- */
  html.design-lab #ants>.detail-topbar+.panel{margin:0 0 20px!important;border:0!important;background:var(--app-surface-soft)!important;box-shadow:none!important;}
  html.design-lab #ants>.detail-topbar+.panel::before{content:"\f013";font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px;color:var(--text-3);}
  html.design-lab #ants>.detail-topbar+.panel>h3,html.design-lab #ants>.detail-topbar+.panel>.hint{display:none!important;}
  html.design-lab #ants .row2{display:flex!important;align-items:center!important;gap:6px!important;max-width:none!important;}
  html.design-lab #ants .row2 .field{display:flex!important;align-items:center!important;gap:4px!important;margin:0!important;font-size:12.5px!important;font-weight:700!important;color:var(--text-2)!important;}
  html.design-lab #ants .row2 .field label{display:none!important;}
  html.design-lab #ants .row2 .field:first-child::before{content:"Até R$";white-space:nowrap;}
  html.design-lab #ants .row2 .field:last-child::before{content:"· mín.";white-space:nowrap;}
  html.design-lab #ants .row2 .field:last-child::after{content:"x";}
  html.design-lab #ants #antLimit,html.design-lab #ants #antMin{width:34px!important;min-width:34px!important;min-height:0!important;height:20px!important;padding:2px 0!important;border:0!important;background:none!important;font-size:12.5px!important;font-weight:700!important;color:var(--text-2)!important;text-align:center!important;-moz-appearance:textfield!important;-webkit-appearance:none!important;appearance:none!important;}
  html.design-lab #ants #antLimit{width:60px!important;min-width:60px!important;}
  html.design-lab #ants #antLimit::-webkit-outer-spin-button,html.design-lab #ants #antLimit::-webkit-inner-spin-button,html.design-lab #ants #antMin::-webkit-outer-spin-button,html.design-lab #ants #antMin::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}
  html.design-lab #ants>.detail-topbar+.panel{row-gap:4px!important;}
  html.design-lab #ants>.cards .stat:has(#antYear){display:none!important;}
  html.design-lab #ants>.cards .stat .t{display:flex!important;align-items:center!important;gap:8px!important;}
  html.design-lab #ants>.cards .stat-icon-badge{width:32px!important;height:32px!important;border-radius:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 32px!important;}
  html.design-lab #ants>.cards .stat.expense:not(.ant-pct-card) .stat-icon-badge{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #ants>.cards .stat.card .stat-icon-badge{background:var(--warning-soft)!important;color:var(--warning)!important;}
  html.design-lab #ants>.cards .ant-pct-card .stat-icon-badge{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #ants>.cards .ant-top-card .stat-icon-badge{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #ants>.cards .hint{margin-top:4px!important;font-size:11.5px!important;color:var(--text-3)!important;}
  html.design-lab #ants>.cards+.panel{border-radius:22px!important;padding:22px!important;}
  html.design-lab #ants .ant-list-count{font-size:12px!important;color:var(--text-3)!important;font-weight:600!important;}
  html.design-lab #ants .ant-row-desktop{display:grid!important;align-items:center!important;padding:14px 0!important;border-top:1px solid var(--app-line)!important;border-bottom:0!important;}
  html.design-lab #ants #antList .ant-row-desktop:first-of-type{border-top:0!important;padding-top:0!important;}
  html.design-lab #ants .ant-row-desktop .ant-desc{display:flex!important;align-items:center!important;gap:12px!important;}
  html.design-lab #ants .ant-row-desktop .ant-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:13px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;}
  html.design-lab #ants .ant-row-desktop .ant-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #ants .ant-row-desktop .ant-cat{font-size:11px!important;color:var(--text-3)!important;margin-top:2px!important;}
  html.design-lab #ants .ant-row-desktop .ant-count{display:inline-flex!important;align-items:center!important;gap:5px!important;background:var(--warning-soft)!important;color:var(--warning)!important;border-radius:10px!important;padding:5px 10px!important;font-size:12px!important;font-weight:700!important;width:fit-content!important;}
  html.design-lab #ants .ant-row-desktop .ant-avg{font-size:12.5px!important;color:var(--text-2)!important;font-weight:600!important;}
  html.design-lab #ants .ant-row-desktop .ant-total{font-size:13.5px!important;font-weight:700!important;color:var(--text)!important;}
}

/* ===== Celular: ajustes de largura das telas copiadas do desktop ===== */
@media(max-width:900px){
  html.design-lab #patrimony>.cards{display:none!important;}
  html.design-lab #patrimony .hero-card{padding:20px!important;border-radius:20px!important;}
  html.design-lab #patrimony .hero-value{font-size:32px!important;}
  html.design-lab #patrimony .split-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
  html.design-lab #patrimony .split-row .card{padding:16px!important;}

  html.design-lab #categories>.topbar .btn-ghost{display:none!important;}
  html.design-lab #categories .cat-split{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;}
  html.design-lab #categories .cat-subs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #categories>.panel{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;}

  html.design-lab #ants>.cards{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  html.design-lab #ants .ant-row-desktop{grid-template-columns:minmax(0,1fr) auto!important;gap:4px 12px!important;}
  html.design-lab #ants .ant-row-desktop .ant-count{grid-column:1;grid-row:2;text-align:left!important;}
  html.design-lab #ants .ant-row-desktop .ant-avg{grid-column:2;grid-row:2;text-align:right!important;}
  html.design-lab #ants .ant-row-desktop .ant-desc{grid-column:1;grid-row:1;}
  html.design-lab #ants .ant-row-desktop .ant-total{grid-column:2;grid-row:1;text-align:right!important;}

  html.design-lab #investments>.cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  html.design-lab #investments .inv-table thead{display:none!important;}
  html.design-lab #investments .inv-table,html.design-lab #investments .inv-table tbody{display:block!important;width:100%!important;}
  html.design-lab #investments .inv-table tr{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px 10px!important;padding:12px 0!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab #investments .inv-table td{display:block!important;padding:0!important;border:0!important;text-align:left!important;min-width:0;}
  html.design-lab #investments .inv-table td:first-child{grid-column:1/-1;}
  html.design-lab #investments .inv-table td:last-child{grid-column:1/-1;}
}

@media(max-width:900px){
  html.design-lab #categories .add-cat-row{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;margin-top:14px!important;padding:12px 0 0!important;border:0!important;border-top:1px solid var(--app-line)!important;background:none!important;color:var(--primary)!important;font-size:13px!important;font-weight:700!important;cursor:pointer;text-align:left!important;}
  html.design-lab #categories .add-cat-icon{width:26px;height:26px;flex:0 0 26px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft)!important;color:var(--primary)!important;font-size:11px;}
  html.design-lab #categories .detail-actions .btn-ghost{display:none!important;}
  html.design-lab #categories .cat-item-desktop .icon-btn{display:none!important;}
}
@media(max-width:900px){
  html.design-lab #investments.section.active{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;}
  html.design-lab #investments>.cards,html.design-lab #investments>#invSummary,html.design-lab #investments .panel:has(#invChart),html.design-lab #investments .panel:has(#invTypeChart),html.design-lab #investments>#invList,html.design-lab #investments .panel:has(#invReturnChart),html.design-lab #investments .panel:has(#invInstitutionChart){grid-column:1!important;grid-row:auto!important;min-width:0!important;}
  html.design-lab #investments .panel:has(#invTypeChart){order:1!important;}
  html.design-lab #investments .panel:has(#invChart){order:2!important;}
  html.design-lab #investments>#invList{order:3!important;}
  html.design-lab #investments .inv-positions-panel{padding:8px 16px 14px!important;}
}
@media(max-width:900px){
  html.design-lab #investments .inv-table .tx-desc-cell{display:flex!important;align-items:center!important;gap:10px!important;}
  html.design-lab #investments .inv-table .tx-icon{flex:0 0 36px!important;width:36px!important;height:36px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  html.design-lab #investments .inv-table td:nth-child(2){grid-column:1!important;grid-row:2!important;}
  html.design-lab #investments .inv-table td:nth-child(3),html.design-lab #investments .inv-table td:nth-child(4),html.design-lab #investments .inv-table td:nth-child(5){grid-row:3!important;}
  html.design-lab #investments .inv-table td:nth-child(6){grid-column:2/-1!important;grid-row:2!important;text-align:right!important;color:var(--muted)!important;font-size:13px!important;}
  html.design-lab #investments .inv-table td:nth-child(6)::before{content:'Liquidez ';}
  html.design-lab #investments .inv-table td:nth-child(3)::before,html.design-lab #investments .inv-table td:nth-child(4)::before,html.design-lab #investments .inv-table td:nth-child(5)::before{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px;}
  html.design-lab #investments .inv-table td:nth-child(3)::before{content:'Aplicado';}
  html.design-lab #investments .inv-table td:nth-child(4)::before{content:'Valor atual';}
  html.design-lab #investments .inv-table td:nth-child(5)::before{content:'Rendimento';}
  html.design-lab #investments .inv-table td:nth-child(7){grid-row:4!important;}
  html.design-lab #investments .inv-position-actions{opacity:1!important;justify-content:flex-end!important;gap:4px!important;}
  html.design-lab #investments .inv-table td.amt{font-size:14px!important;}
}

/* ===== Celular: Recorrentes enxuto ===== */
@media(max-width:900px){
  html.design-lab #recSummary{margin-bottom:12px!important;}
  html.design-lab #recList .rec-amt b.in{color:var(--income);}
  html.design-lab #recList .rec-amt b.out{color:var(--expense);}
  html.design-lab #recList .rec-item{display:flex!important;align-items:center;gap:12px;padding:12px 0!important;}
  html.design-lab #recList .rec-item .em{flex:0 0 36px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--app-surface-soft);font-size:16px;}
  html.design-lab #recList .rec-item .nm{flex:1;min-width:0;display:flex!important;flex-direction:column;gap:2px;}
  html.design-lab #recList .rec-name{font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #recList .rec-meta{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #recList .rec-amt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto;}
  html.design-lab #recList .rec-amt b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;}
  html.design-lab #recList .rec-amt small{font-size:12px!important;color:var(--muted);}
  html.design-lab #recList .rec-item .icon-btn{display:none!important;}
}
@media(max-width:900px){
  html.design-lab #categories .category-switch{display:flex!important;width:100%!important;max-width:none!important;margin:0 0 14px!important;}
  html.design-lab #categories .category-switch button{flex:1!important;}
}
@media(max-width:900px){
  html.design-lab #investments>.cards .stat{align-items:flex-start!important;}
  html.design-lab #investments>.cards .stat-icon-badge{flex:0 0 34px!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:34px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  html.design-lab #investments>.cards .stat .t{min-width:0!important;flex:1 1 auto!important;}
  html.design-lab #investments .inv-positions-panel h3{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;font-size:17px!important;margin:8px 0 4px!important;}
  html.design-lab #investments .inv-positions-add{flex:0 0 auto!important;padding:7px 12px!important;min-height:0!important;height:34px!important;font-size:13px!important;border-radius:10px!important;box-shadow:none!important;}
  html.design-lab #investments .inv-table .tx-name{font-size:15px!important;font-weight:600!important;line-height:1.25!important;}
  html.design-lab #investments .inv-table .tx-sub{font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #ants>.detail-topbar+.panel{width:100%!important;max-width:none!important;box-sizing:border-box!important;}
  html.design-lab #ants>.detail-topbar+.panel .row2{display:flex!important;width:100%!important;gap:8px!important;}
  html.design-lab #ants>.detail-topbar+.panel .row2 .field{flex:1 1 0!important;min-width:0!important;}
}
@media(max-width:900px){
  html.design-lab #ants>.detail-topbar+.panel{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;padding:12px 16px!important;border-radius:16px!important;}
  html.design-lab #ants>.detail-topbar+.panel::before{position:static!important;flex:0 0 auto!important;margin:0!important;}
  html.design-lab #ants>.detail-topbar+.panel .row2{justify-content:space-between!important;align-items:center!important;margin:0!important;}
  html.design-lab #ants>.detail-topbar+.panel .row2 .field{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;margin:0!important;}
}
@media(max-width:900px){
  html.design-lab #ants>.detail-topbar+.panel{flex-wrap:nowrap!important;}
  html.design-lab #ants>.detail-topbar+.panel .row2{max-width:none!important;flex:1 1 0!important;min-width:0!important;}
}

@media(max-width:900px){
  html.design-lab #investments .inv-table td:last-child,html.design-lab #investments .inv-position-actions{display:none!important;}
}

/* ===== Celular: Contas e Cartões copiados do desktop (gerado das regras desktop) ===== */
@media(max-width:900px){
  html.design-lab #accounts>.panel{margin:0!important;}
  html.design-lab #accounts .account-hero{display:flex!important;justify-content:space-between!important;margin-bottom:20px!important;border-radius:24px!important;background:linear-gradient(135deg,#305bf3,#1c3fc7)!important;color:#fff!important;}
  html.design-lab #accounts .account-hero-label{display:block!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab #accounts .account-hero-value{display:block!important;margin-top:6px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.02em!important;color:#fff!important;}
  html.design-lab #accounts .account-hero-stats{flex:0 0 auto!important;}
  html.design-lab #accounts .account-hero-stats span{display:block!important;font-size:12px!important;font-weight:600!important;color:rgba(255,255,255,.72)!important;}
  html.design-lab #accounts .account-hero-stats b{display:block!important;margin-top:4px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:18px!important;font-weight:600!important;color:#fff!important;}
  html.design-lab #accounts #accountList{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  html.design-lab #accounts #accountList>.account-desktop-card{position:relative!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;box-shadow:none!important;padding:20px!important;color:var(--text)!important;}
  html.design-lab #accounts #accountList>.account-desktop-card.is-selected{border-color:var(--primary)!important;box-shadow:0 0 0 1px var(--primary)!important;}
  html.design-lab #accounts .account-desktop-card .card-drag-handle-top{position:absolute!important;z-index:4!important;top:7px!important;left:50%!important;transform:translateX(-50%)!important;width:34px!important;height:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid var(--app-line)!important;border-radius:10px!important;background:var(--app-surface)!important;color:var(--muted)!important;cursor:grab!important;touch-action:none!important;opacity:0!important;transition:opacity .16s ease,color .16s ease,border-color .16s ease!important;font-size:10px!important;}
  html.design-lab #accounts .account-desktop-card:hover .card-drag-handle-top,html.design-lab #accounts .account-desktop-card:focus-within .card-drag-handle-top{opacity:1!important;}
  html.design-lab #accounts .account-desktop-card .card-drag-handle-top:hover{color:var(--primary)!important;border-color:var(--primary)!important;}
  html.design-lab #accounts .account-desktop-card .card-drag-handle-top:active{cursor:grabbing!important;}
  html.design-lab #accounts .account-desktop-card .account-top{display:flex!important;align-items:flex-start!important;gap:12px!important;}
  html.design-lab #accounts .account-desktop-card .account-badge{flex:0 0 42px!important;font-size:19px!important;}
  html.design-lab #accounts .account-desktop-card .account-badge img{border-radius:6px;}
  html.design-lab #accounts .account-desktop-card .account-head-copy{flex:1!important;min-width:0!important;}
  html.design-lab #accounts .account-desktop-card .account-name{font-size:14px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #accounts .account-desktop-card .account-type{font-size:12px!important;color:var(--muted)!important;margin-top:2px!important;}
  html.design-lab #accounts .account-desktop-card .fatura{margin:16px 0 0!important;font-size:24px!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab #accounts .account-desktop-card .account-foot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-top:14px!important;padding-top:14px!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab #accounts .account-desktop-card .account-updated{font-size:12px!important;color:var(--muted)!important;}
  html.design-lab #accounts .link-btn{font-size:13px!important;font-weight:700!important;color:var(--primary)!important;cursor:pointer;white-space:nowrap;}
  html.design-lab #accounts .account-desktop-card .account-manage-actions{opacity:0!important;transition:opacity .15s!important;display:flex!important;gap:2px!important;}
  html.design-lab #accounts .account-desktop-card:hover .account-manage-actions,html.design-lab #accounts .account-desktop-card .account-manage-actions:focus-within{opacity:1!important;}
  html.design-lab #accounts .account-desktop-card .account-manage-actions .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:12px!important;}
  html.design-lab #accounts .account-desktop-card .account-manage-actions .icon-btn:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}
  html.design-lab #accounts .account-statement-panel{display:none!important;}
  html.design-lab #accounts .account-statement-panel.is-open,html.design-lab #accounts>.account-statement-panel.is-open{display:block!important;margin-top:20px!important;border-radius:22px!important;padding:8px 22px 16px!important;background:var(--card)!important;border:1px solid var(--app-line)!important;box-shadow:none!important;}
  html.design-lab #accounts .account-statement-table{background:var(--card)!important;}
  html.design-lab #accounts .account-statement-head-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  html.design-lab #accounts .account-statement-head-row #accountStatementHead{margin:0!important;}
  html.design-lab #accounts .month-pill{display:inline-flex!important;align-items:center!important;gap:8px!important;height:34px!important;padding:0 14px!important;border-radius:999px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--text-2)!important;font-size:12.5px!important;font-weight:600!important;white-space:nowrap;flex:0 0 auto!important;}
  html.design-lab #accounts .month-pill i{color:var(--muted)!important;font-size:12px!important;}
  html.design-lab #accounts .month-pill-dropdown{display:none;position:fixed!important;z-index:400!important;width:200px!important;max-height:260px!important;overflow-y:auto!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:14px!important;box-shadow:0 14px 32px rgba(18,20,30,.18)!important;padding:6px!important;}
  html.design-lab #accounts .month-pill-dropdown.open{display:block!important;}
  html.design-lab #accounts .month-pill-item{display:block!important;width:100%!important;text-align:left!important;padding:9px 12px!important;border-radius:9px!important;font-size:12.5px!important;font-weight:600!important;color:var(--text-2)!important;background:none!important;border:0!important;}
  html.design-lab #accounts .month-pill-item:hover{background:var(--app-surface-soft)!important;}
  html.design-lab #accounts .month-pill-item.is-current{color:var(--primary)!important;font-weight:700!important;background:var(--accent-soft)!important;}
  html.design-lab #accounts .account-statement-panel h3{margin:18px 0 4px!important;}
  html.design-lab #accounts .account-statement-table td:last-child,html.design-lab #accounts .account-statement-table th:last-child{color:var(--text)!important;}
  html.design-lab #accounts .add-vault-card{border:1.5px dashed var(--border)!important;border-radius:22px!important;padding:20px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;color:var(--text-3)!important;min-height:164px!important;background:none!important;font-size:13px!important;font-weight:700!important;cursor:pointer;}
  html.design-lab #accounts #accountList .add-vault-card{height:180px!important;min-height:0!important;}
  html.design-lab #accounts .add-vault-card:hover{border-color:var(--primary)!important;color:var(--primary)!important;}
  html.design-lab #accounts .add-vault-card i{font-size:22px!important;}
  html.design-lab #cards-sec>#cardsKpis{display:none!important;}
  html.design-lab #cards-sec .cards-master-detail{align-items:flex-start!important;gap:20px!important;}
  html.design-lab #cards-sec .cards-master-detail #cardList.cards-col{display:flex!important;flex-direction:column!important;gap:16px!important;width:352px!important;flex:0 0 352px!important;}
  html.design-lab #cards-sec .detail-col{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:16px!important;}
  html.design-lab #cards-sec .credit-card{border-radius:24px!important;padding:22px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;height:172px!important;overflow:hidden!important;color:#fff!important;cursor:pointer;}
  html.design-lab #cards-sec .credit-card.selected{outline:2px solid var(--primary)!important;outline-offset:2px!important;}
  html.design-lab #cards-sec .cc-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;}
  html.design-lab #cards-sec .cc-bank-group{display:flex!important;align-items:center!important;gap:9px!important;}
  html.design-lab #cards-sec .bank-badge{width:26px!important;height:26px!important;flex:0 0 26px!important;background:none!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;color:#fff!important;}
  html.design-lab #cards-sec .cc-bank{color:#fff!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;font-size:15px!important;}
  html.design-lab #cards-sec .cc-number{color:rgba(255,255,255,.92)!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:15px!important;letter-spacing:.12em!important;}
  html.design-lab #cards-sec .cc-bottom{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;}
  html.design-lab #cards-sec .cc-label{color:rgba(255,255,255,.6)!important;font-size:9px!important;text-transform:uppercase!important;letter-spacing:.06em!important;font-weight:700!important;margin-bottom:3px!important;}
  html.design-lab #cards-sec .cc-value{color:#fff!important;font-size:12px!important;font-weight:700!important;}
  html.design-lab #cards-sec .cc-manage-actions{gap:2px!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab #cards-sec .credit-card:hover .cc-manage-actions{opacity:1!important;}
  html.design-lab #cards-sec .cc-manage-actions .icon-btn{width:26px!important;height:26px!important;min-width:26px!important;border:0!important;background:rgba(255,255,255,.18)!important;color:#fff!important;font-size:11px!important;border-radius:8px!important;}
  html.design-lab #cards-sec .cc-manage-actions .icon-btn:hover{background:rgba(255,255,255,.3)!important;}
  html.design-lab #cards-sec .add-card-btn{border:1.5px dashed var(--border)!important;border-radius:18px!important;padding:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;color:var(--text-3)!important;font-size:13px!important;font-weight:700!important;background:none!important;cursor:pointer;}
  html.design-lab #cards-sec .add-card-btn:hover{border-color:var(--primary)!important;color:var(--primary)!important;}
  html.design-lab #cards-sec .credit-card{position:relative!important;}
  html.design-lab #cards-sec .credit-card .card-drag-handle-top{position:absolute!important;z-index:4!important;top:7px!important;left:50%!important;transform:translateX(-50%)!important;width:34px!important;height:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:10px!important;background:rgba(0,0,0,.28)!important;color:rgba(255,255,255,.85)!important;cursor:grab!important;touch-action:none!important;opacity:0!important;transition:opacity .16s ease,background .16s ease!important;font-size:10px!important;}
  html.design-lab #cards-sec .credit-card:hover .card-drag-handle-top,html.design-lab #cards-sec .credit-card:focus-within .card-drag-handle-top{opacity:1!important;}
  html.design-lab #cards-sec .credit-card .card-drag-handle-top:hover{background:rgba(0,0,0,.4)!important;}
  html.design-lab #cards-sec .credit-card .card-drag-handle-top:active{cursor:grabbing!important;}
}
@media(max-width:900px){
  html.design-lab #cards-sec .cards-master-detail{display:block!important;}
  html.design-lab #cards-sec #cardsDetailCol{display:none!important;}
  html.design-lab #cards-sec #cardList{display:flex!important;flex-direction:column!important;gap:12px!important;}
  html.design-lab #cards-sec .credit-card{background:var(--item-color,var(--primary))!important;background-image:none!important;margin:0!important;}
  html.design-lab #cards-sec .cc-manage-actions,html.design-lab #cards-sec .credit-card .card-drag-handle,html.design-lab #accounts .account-manage-actions,html.design-lab #accounts .account-desktop-card .card-drag-handle{display:none!important;}
  html.design-lab #accounts #accountList{display:flex!important;flex-direction:column!important;}
  html.design-lab #accounts .account-hero{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;padding:20px!important;}
  html.design-lab #accounts .account-hero-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;width:100%!important;}
  html.design-lab #accounts .account-hero-value{font-size:30px!important;}
  html.design-lab #accounts>.panel{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;}
  html.design-lab #accounts .account-statement-panel{padding:14px 16px!important;}
  html.design-lab #accounts .account-statement-table thead{display:none!important;}
  html.design-lab #accounts .account-statement-table,html.design-lab #accounts .account-statement-table tbody{display:block!important;width:100%!important;}
  html.design-lab #accounts .account-statement-table tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:2px 12px!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab #accounts .account-statement-table td{display:block!important;min-width:0;}
  html.design-lab #accounts .account-statement-table td:nth-child(1){grid-column:1;grid-row:1;}
  html.design-lab #accounts .account-statement-table td:nth-child(4){grid-column:2;grid-row:1;text-align:right!important;}
  html.design-lab #accounts .account-statement-table td:nth-child(2){grid-column:1;grid-row:2;font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #accounts .account-statement-table td:nth-child(3){display:none!important;}
  html.design-lab #accounts .account-statement-table td:nth-child(5){grid-column:2;grid-row:2;text-align:right!important;}
  html.design-lab #accounts .account-statement-table td:nth-child(5)::before{content:'Saldo ';}
}
@media(max-width:900px){
  html.design-lab #accounts .account-statement-table .tx-desc-cell{display:flex!important;align-items:center!important;gap:10px!important;}
  html.design-lab #accounts .account-statement-table .tx-icon{flex:0 0 34px!important;width:34px!important;height:34px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
}

@media(max-width:900px){
  html.design-lab #accounts .add-card-btn{border:1.5px dashed var(--border)!important;border-radius:18px!important;padding:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;color:var(--text-3)!important;font-size:13px!important;font-weight:700!important;background:none!important;cursor:pointer;}
  html.design-lab #accounts .add-card-btn:hover{border-color:var(--primary)!important;color:var(--primary)!important;}
  html.design-lab #accounts #accountList{gap:12px!important;}
  .cards-detail-mobilebar{display:none;}
  html.design-lab #cards-sec.cards-detail-mode .cards-detail-mobilebar{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
  html.design-lab #cards-sec.cards-detail-mode #cardList,html.design-lab #cards-sec.cards-detail-mode #cardsKpis{display:none!important;}
  html.design-lab #cards-sec.cards-detail-mode #cardsDetailCol{display:flex!important;flex-direction:column;gap:12px;}
  html.design-lab #cards-sec .cards-detail-mobilebar .btn{height:38px;padding:0 12px;font-size:14px!important;}
  .cards-mobile-month{display:flex;align-items:center;gap:6px;background:var(--app-surface);border:1px solid var(--app-line);border-radius:999px;padding:3px;}
  .cards-mobile-month button{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--text);}
  .cards-mobile-month span{min-width:112px;text-align:center;font-size:14px;font-weight:600;}
  html.design-lab #cards-sec .cards-invoice-table thead{display:none!important;}
  html.design-lab #cards-sec .cards-invoice-table,html.design-lab #cards-sec .cards-invoice-table tbody{display:block!important;width:100%!important;}
  html.design-lab #cards-sec .cards-invoice-table tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:2px 12px!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab #cards-sec .cards-invoice-table td{display:block!important;min-width:0;}
  html.design-lab #cards-sec .cards-invoice-table td:nth-child(1){grid-column:1;grid-row:1;}
  html.design-lab #cards-sec .cards-invoice-table td:nth-child(4){grid-column:2;grid-row:1;text-align:right!important;}
  html.design-lab #cards-sec .cards-invoice-table td:nth-child(2){grid-column:1;grid-row:2;}
  html.design-lab #cards-sec .cards-invoice-table td:nth-child(3){grid-column:2;grid-row:2;text-align:right!important;}
  html.design-lab #cards-sec .cards-invoice-table .tx-desc-cell{display:flex!important;align-items:center!important;gap:10px!important;}
  html.design-lab #cards-sec .cards-invoice-table .tx-icon{display:flex!important;align-items:center!important;justify-content:center!important;}
  html.design-lab #cards-sec #cardsInvoicePanel,html.design-lab #cards-sec #cardsInvoiceListPanel{padding:16px!important;}
}

/* ===== Celular: Caixinhas copiadas do desktop (gerado das regras desktop) ===== */
@media(max-width:900px){
  .vault-ring{position:relative;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;}
  .vault-ring svg{position:absolute;inset:0;width:100%;height:100%;}
  .vault-ring-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;}
  .vault-ring-icon{font-size:16px;line-height:1;}
  .vault-ring-inner b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:11px;font-weight:800;color:var(--text);line-height:1.1;}
  .vault-ring.vault-ring-done{background:var(--positive);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;}
  html.design-lab #vaults .hero-card .vault-ring{width:96px!important;height:96px!important;}
  html.design-lab #vaults .hero-card .vault-ring-inner b{font-size:20px!important;}
  html.design-lab #vaults .hero-card .vault-ring-icon{font-size:26px!important;}
  html.design-lab #vaults .hero-card{display:block!important;}
  html.design-lab #vaults .vault-hero-inner{position:relative!important;}
  html.design-lab #vaults .vault-hero-manage-actions{position:absolute!important;top:-10px!important;right:-12px!important;gap:2px!important;}
  html.design-lab #vaults .vault-hero-manage-actions .icon-btn{width:30px!important;height:30px!important;min-width:30px!important;border:0!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:12px!important;}
  html.design-lab #vaults .vault-hero-manage-actions .icon-btn:hover{background:rgba(255,255,255,.2)!important;}
  html.design-lab #vaults .vault-hero-mid{flex:1!important;min-width:0!important;}
  html.design-lab #vaults .vault-hero-label{font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:var(--accent-light)!important;margin-bottom:6px!important;}
  html.design-lab #vaults .vault-hero-name{font-weight:800!important;letter-spacing:-.01em!important;}
  html.design-lab #vaults .vault-hero-amount{margin-top:6px!important;font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;}
  html.design-lab #vaults .vault-hero-amount span{font-family:inherit!important;font-weight:500!important;opacity:.7!important;}
  html.design-lab #vaults .vault-hero-actions{margin-top:16px!important;}
  html.design-lab #vaults .vault-hero-actions .btn-ghost{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;}
  html.design-lab #vaults .vault-hero-forecast{flex:0 0 auto!important;}
  html.design-lab #vaults .vault-hero-forecast .vault-hero-label{margin-bottom:8px!important;}
  html.design-lab #vaults .vault-hero-forecast-value{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;}
  html.design-lab #vaults .vault-others-title{font-weight:700!important;color:var(--text)!important;}
  html.design-lab #vaults .vault-others-grid{flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:4px!important;}
  html.design-lab #vaults .vault-others-grid>*{flex:0 0 calc(33.333% * 1.15 - 16px)!important;}
  html.design-lab #vaults .vault-desktop-card{position:relative!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;box-shadow:none!important;box-sizing:border-box!important;flex-direction:column!important;justify-content:center!important;gap:12px!important;color:var(--text)!important;cursor:pointer;}
  html.design-lab #vaults .vault-desktop-card.is-done .vault-ring-inner{display:none!important;}
  html.design-lab #vaults .vault-desktop-card .vault-desktop-name{font-size:13px!important;font-weight:700!important;color:var(--text)!important;}
  html.design-lab #vaults .vault-desktop-card .vault-desktop-amount{font-size:12px!important;color:var(--muted)!important;}
  html.design-lab #vaults .vault-desktop-card .vault-desktop-forecast{margin-top:-6px!important;font-size:11px!important;color:var(--text-3)!important;}
  html.design-lab #vaults .vault-desktop-card .vault-desktop-yield{margin-top:-4px!important;font-size:11px!important;}
  html.design-lab #vaults .vault-hero-yield{margin-top:6px!important;}
  html.design-lab #vaults .vault-desktop-card .vault-desktop-save-btn{width:100%!important;margin-top:2px!important;padding:7px 10px!important;font-size:12px!important;opacity:0!important;pointer-events:none!important;transition:opacity .15s!important;}
  html.design-lab #vaults .vault-desktop-card:hover .vault-desktop-save-btn{opacity:1!important;pointer-events:auto!important;}
  /* Especificidade dobrada de propósito: mais abaixo neste arquivo,"#vaultList .vault-card .vault-manage-actions{position:static!important}
  "
     tem um #id na seletora (pensado pro card antigo de Contas/Cartões) e
     ganhava desta regra mesmo com !important dos dois lados — o
     editar/excluir deste card novo não ficava no canto,virava mais um
     item da linha (position:static). */
  html.design-lab .vault-desktop-card.vault-desktop-card .vault-manage-actions.vault-manage-actions{position:absolute!important;top:10px!important;right:10px!important;display:flex!important;gap:2px!important;opacity:0!important;transition:opacity .15s!important;}
  html.design-lab #vaults .vault-desktop-card.vault-desktop-card:hover .vault-manage-actions.vault-manage-actions{opacity:1!important;}
  html.design-lab #vaults .vault-desktop-card .vault-manage-actions .icon-btn{width:26px!important;height:26px!important;min-width:26px!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:11px!important;}
  html.design-lab #vaults .vault-desktop-card .vault-manage-actions .icon-btn:hover{background:var(--app-surface-soft)!important;color:var(--text)!important;}
  html.design-lab #vaults .add-vault-card{border:1.5px dashed var(--border)!important;border-radius:22px!important;padding:20px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;color:var(--text-3)!important;min-height:164px!important;background:none!important;font-size:13px!important;font-weight:700!important;cursor:pointer;}
  html.design-lab #vaults .add-vault-card:hover{border-color:var(--primary)!important;color:var(--primary)!important;}
  html.design-lab #vaults .add-vault-card i{font-size:22px!important;}
  html.design-lab #vaultHistoryPanel{margin-top:20px!important;}
  html.design-lab #vaults .hero-card{background:var(--sidebar-bg,#0f1630)!important;background-image:none!important;}
  html.design-lab #vaults .vault-hero-inner{flex-direction:column!important;gap:14px!important;position:relative;}
  html.design-lab #vaults .vault-hero-manage-actions,html.design-lab #vaults .vault-desktop-card .vault-manage-actions{display:none!important;}
  html.design-lab #vaults .vault-others-grid{display:grid!important;}
  html.design-lab #vaults .hero-card{border-radius:22px!important;}
  html.design-lab #vaults .vault-hero-actions{width:100%!important;}
  html.design-lab #vaults .vault-hero-actions .btn{flex:1!important;}
}

@media(max-width:900px){
  html.design-lab #cardsInvoicePanel,html.design-lab #cardsInvoiceListPanel{border-radius:22px!important;padding:22px!important;}
  html.design-lab #cards-sec .invoice-head{display:flex!important;justify-content:space-between!important;gap:12px!important;}
  html.design-lab #cards-sec .invoice-head-left{display:flex!important;align-items:center!important;gap:14px!important;}
  html.design-lab #cards-sec .invoice-badge{font-size:22px!important;}
  html.design-lab #cards-sec .invoice-title{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;color:var(--text)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab #cards-sec .invoice-sub{font-size:12px!important;color:var(--text-3)!important;margin-top:2px!important;}
  html.design-lab #cards-sec .invoice-status{flex:0 0 auto!important;font-size:11px!important;font-weight:700!important;padding:5px 12px!important;border-radius:10px!important;background:var(--warning-soft)!important;color:var(--warning)!important;}
  html.design-lab #cards-sec .invoice-status.paid{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab #cards-sec .invoice-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;border-top:1px solid var(--app-line)!important;}
  html.design-lab #cards-sec .invoice-stat-label{font-weight:700!important;color:var(--text-3)!important;text-transform:uppercase!important;letter-spacing:.04em!important;margin-bottom:8px!important;}
  html.design-lab #cards-sec .invoice-stat-value{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab #cards-sec .limit-bar-wrap{margin-top:20px!important;}
  html.design-lab #cards-sec .limit-bar-top{display:flex!important;justify-content:space-between!important;font-size:12px!important;font-weight:700!important;color:var(--text-2)!important;margin-bottom:8px!important;}
  html.design-lab #cards-sec .limit-bar{height:9px!important;border-radius:5px!important;background:var(--app-surface-soft)!important;overflow:hidden!important;}
  html.design-lab #cards-sec .limit-bar-fill{height:100%!important;background:linear-gradient(90deg,var(--accent-light),var(--primary))!important;border-radius:5px!important;}
  html.design-lab #cards-sec .card-actions{display:flex!important;gap:10px!important;margin-top:22px!important;}
  html.design-lab #cards-sec .btn-pay{flex:1!important;color:#fff!important;font-size:13px!important;font-weight:700!important;padding:12px!important;border-radius:14px!important;text-align:center!important;border:0!important;box-shadow:0 10px 22px rgba(48,91,243,.28)!important;cursor:pointer;}
  html.design-lab #cards-sec .btn-pdf{display:flex!important;align-items:center!important;gap:8px!important;background:var(--card)!important;border:1px solid var(--app-line)!important;color:var(--text)!important;font-size:13px!important;font-weight:700!important;padding:12px 16px!important;border-radius:14px!important;cursor:pointer;}
  html.design-lab #cards-sec .btn-pdf:hover{background:var(--app-surface-soft)!important;}
  html.design-lab #cards-sec .cards-invoice-table .tx-icon{background:var(--app-surface-soft)!important;color:var(--text-2)!important;width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:12px!important;}
  html.design-lab #cards-sec.cards-detail-mode .cards-master-detail #cardList.cards-col{display:none!important;}
  html.design-lab #cards-sec.cards-detail-mode .cards-master-detail #cardsDetailCol{display:flex!important;flex-direction:column;gap:12px;}
}
@media(max-width:900px){
  html.design-lab #cards-sec .invoice-head{flex-wrap:wrap!important;align-items:flex-start!important;}
  html.design-lab #cards-sec .invoice-head-left{flex:1 1 100%!important;min-width:0!important;}
  html.design-lab #cards-sec .invoice-badge{flex:0 0 40px!important;}
  html.design-lab #cards-sec .invoice-title{font-size:16px!important;line-height:1.25!important;}
  html.design-lab #cards-sec .invoice-status{order:2!important;}
  html.design-lab #cards-sec .invoice-stats{margin-top:16px!important;padding-top:16px!important;}
  html.design-lab #cards-sec .invoice-stat-value{font-size:15px!important;white-space:nowrap!important;}
  html.design-lab #cards-sec .invoice-stat-label{font-size:10px!important;line-height:1.2!important;}
}
@media(max-width:900px){html.design-lab #cards-sec .btn-pay{background:#305bf3!important;background-image:none!important;}}
@media(max-width:900px){
  html.design-lab #vaults #vaultsKpis{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important;}
  html.design-lab #vaults #vaultsKpis .stat{padding:12px 10px!important;min-height:0!important;border-radius:14px!important;}
  html.design-lab #vaults #vaultsKpis .stat .t{font-size:11px!important;line-height:1.2!important;}
  html.design-lab #vaults #vaultsKpis .stat .v{font-size:15px!important;margin-top:4px!important;white-space:nowrap;}
}
@media(max-width:900px){
  html.design-lab #vaults .vault-others-grid .add-vault-card{grid-column:1/-1!important;}
}
@media(max-width:900px){
  html.design-lab #account-details .account-statement-table{background:var(--card)!important;}
  html.design-lab #account-details .account-statement-table td:last-child,html.design-lab #account-details .account-statement-table th:last-child{color:var(--text)!important;}
  html.design-lab #account-details .account-statement-table thead{display:none!important;}
  html.design-lab #account-details .account-statement-table,html.design-lab #account-details .account-statement-table tbody{display:block!important;width:100%!important;}
  html.design-lab #account-details .account-statement-table tr{display:grid!important;gap:2px 12px!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab #account-details .account-statement-table td{display:block!important;min-width:0;}
  html.design-lab #account-details .account-statement-table td:nth-child(4){text-align:right!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(2){font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(5){text-align:right!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(5)::before{content:'Saldo ';}
  html.design-lab #account-details .account-statement-table .tx-desc-cell{display:flex!important;align-items:center!important;gap:10px!important;}
  html.design-lab #account-details .account-statement-table .tx-icon{flex:0 0 34px!important;width:34px!important;height:34px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
}
@media(max-width:900px){
  html.design-lab #cards-sec .cards-detail-mobilebar{justify-content:center!important;}
  html.design-lab #cards-sec .cards-mobile-month{width:100%!important;justify-content:space-between!important;}
  html.design-lab #account-details .invoice-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  /* Caixinhas: layout próprio do celular */
  html.design-lab #vaults .vault-hero-inner{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;column-gap:14px!important;align-items:center!important;}
  html.design-lab #vaults .vault-hero-inner .vault-ring{width:72px!important;height:72px!important;grid-column:1;}
  html.design-lab #vaults .vault-hero-inner .vault-ring svg{width:72px!important;height:72px!important;}
  html.design-lab #vaults .vault-hero-mid{grid-column:2;grid-row:1;min-width:0;}
  html.design-lab #vaults .vault-hero-name{font-size:18px!important;line-height:1.2!important;}
  html.design-lab #vaults .vault-hero-amount{font-size:22px!important;}
  html.design-lab #vaults .vault-hero-amount span{font-size:13px!important;}
  html.design-lab #vaults .vault-hero-label{font-size:11px!important;}
  html.design-lab #vaults .vault-hero-yield{grid-column:1/-1;font-size:13px!important;}
  html.design-lab #vaults .vault-hero-actions{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
  html.design-lab #vaults .vault-hero-actions .btn{height:44px!important;padding:0 8px!important;font-size:14px!important;white-space:nowrap;}
  html.design-lab #vaults .vault-hero-forecast{grid-column:1/-1;display:flex!important;align-items:baseline!important;gap:8px!important;text-align:left!important;}
  html.design-lab #vaults .vault-hero-forecast-value{font-size:14px!important;}
  html.design-lab #vaults .hero-card{padding:16px!important;margin-bottom:14px!important;}
  html.design-lab #vaults .vault-others-title{font-size:16px!important;margin:6px 0 10px!important;}
  html.design-lab #vaults .vault-others-grid{grid-template-columns:minmax(0,1fr)!important;gap:8px!important;}
  html.design-lab #vaults .vault-desktop-card{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;column-gap:12px!important;row-gap:2px!important;align-items:center!important;text-align:left!important;min-height:0!important;padding:12px 14px!important;}
  html.design-lab #vaults .vault-desktop-card .vault-ring{width:52px!important;height:52px!important;grid-column:1;margin:0!important;}
  html.design-lab #vaults .vault-desktop-card .vault-ring svg{width:52px!important;height:52px!important;}
  html.design-lab #vaults .vault-desktop-card>*:not(.vault-ring):not(.vault-manage-actions){grid-column:2;text-align:left!important;margin:0!important;}
  html.design-lab #vaults .vault-desktop-name{font-size:16px!important;font-weight:600!important;}
  html.design-lab #vaults .vault-desktop-amount,html.design-lab #vaults .vault-desktop-forecast,html.design-lab #vaults .vault-desktop-yield{font-size:13px!important;}
  html.design-lab #vaults .vault-desktop-save-btn{display:none!important;}
  html.design-lab #vaults .vault-others-grid .add-vault-card{min-height:52px!important;height:52px!important;flex-direction:row!important;gap:8px!important;padding:0!important;}
  html.design-lab #vaults .vault-others-grid .add-vault-card i{margin:0!important;font-size:14px!important;}
  html.design-lab #vaults .vault-others-grid .add-vault-card div{font-size:14px!important;}
}
@media(max-width:900px){
  html.design-lab #vaults .vault-hero-mid{display:contents!important;}
  html.design-lab #vaults .vault-hero-inner .vault-ring{grid-row:1/span 3!important;align-self:center!important;}
  html.design-lab #vaults .vault-hero-mid>.vault-hero-label,html.design-lab #vaults .vault-hero-mid>.vault-hero-name,html.design-lab #vaults .vault-hero-mid>.vault-hero-amount{grid-column:2!important;}
  html.design-lab #vaults .vault-hero-mid>.vault-hero-yield,html.design-lab #vaults .vault-hero-mid>.vault-hero-actions{grid-column:1/-1!important;}
  html.design-lab #vaults .vault-hero-inner{row-gap:6px!important;}
  html.design-lab #vaults .vault-hero-mid>.vault-hero-actions{margin-top:6px!important;}
  html.design-lab #vaults .vault-desktop-card{height:auto!important;align-content:center!important;grid-auto-rows:min-content!important;}
  html.design-lab #vaults .vault-desktop-card .vault-ring{grid-row:1/span 3!important;align-self:center!important;}
}
@media(max-width:900px){
  html.design-lab #account-details>.panel{border-radius:20px!important;}
  html.design-lab #account-details .invoice-summary .iv{background:none!important;padding:4px 0!important;}
}
@media(max-width:900px){
  html.design-lab #vaults .vault-ring{position:relative!important;flex:0 0 auto!important;}
  html.design-lab #vaults .vault-ring .vault-ring-inner{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;line-height:1!important;margin:0!important;padding:0!important;}
  html.design-lab #vaults .vault-ring .vault-ring-icon{position:static!important;font-size:22px!important;line-height:1!important;display:flex!important;align-items:center;justify-content:center;}
  html.design-lab #vaults .vault-ring .vault-ring-icon img,html.design-lab #vaults .vault-ring .vault-ring-icon svg{width:22px!important;height:22px!important;}
  html.design-lab #vaults .vault-ring .vault-ring-inner b{position:static!important;font-size:13px!important;font-weight:700!important;line-height:1!important;}
  html.design-lab #vaults .vault-desktop-card .vault-ring .vault-ring-icon{font-size:16px!important;}
  html.design-lab #vaults .vault-desktop-card .vault-ring .vault-ring-inner b{font-size:10px!important;}
  html.design-lab #vaults .vault-ring.vault-ring-done{display:flex!important;align-items:center;justify-content:center;}
}

/* ===== Celular: fundo branco leve atrás dos logos de banco ===== */
@media(max-width:900px){
  html.design-lab #cards-sec .credit-card .bank-badge,html.design-lab #accounts .account-desktop-card .account-badge,html.design-lab #cards-sec .invoice-badge,html.design-lab #cards-sec .invoice-head .invoice-badge,html.design-lab .card-detail-visual-top>span{background:rgba(255,255,255,.94)!important;border-radius:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;min-width:40px!important;padding:6px!important;box-sizing:border-box!important;overflow:hidden!important;box-shadow:0 1px 3px rgba(0,0,0,.18)!important;}
  html.design-lab #cards-sec .credit-card .bank-badge img,html.design-lab #accounts .account-desktop-card .account-badge img,html.design-lab #cards-sec .invoice-badge img,html.design-lab .card-detail-visual-top>span img{width:100%!important;height:100%!important;object-fit:contain!important;}
  html.design-lab #cards-sec .credit-card .bank-badge i,html.design-lab #accounts .account-desktop-card .account-badge i{color:#305bf3!important;}
}
@media(max-width:900px){html.design-lab .credit-card .bank-badge .data-icon,html.design-lab .account-desktop-card .account-badge .data-icon{color:#17213d!important;}}

/* ===== Desktop: fundo branco leve atrás dos logos de banco ===== */
@media(min-width:901px){
  html.design-lab #cards-sec .credit-card .bank-badge,html.design-lab #accounts .account-desktop-card .account-badge,html.design-lab #cards-sec .invoice-badge{background:rgba(255,255,255,.94)!important;border-radius:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;overflow:hidden!important;box-shadow:0 1px 3px rgba(0,0,0,.18)!important;padding:6px!important;}
  html.design-lab #cards-sec .credit-card .bank-badge img,html.design-lab #accounts .account-desktop-card .account-badge img,html.design-lab #cards-sec .invoice-badge img{width:100%!important;height:100%!important;object-fit:contain!important;}
  html.design-lab #cards-sec .credit-card .bank-badge .data-icon,html.design-lab #accounts .account-desktop-card .account-badge .data-icon{color:#17213d!important;}
}

/* ===== Celular: extratos (contas) e faturas (cartões) no padrão do desktop, adequados ao celular ===== */
@media(max-width:900px){
  html.design-lab #cards-sec .cards-invoice-table .tx-name,html.design-lab #account-details .account-statement-table .tx-name,html.design-lab #accounts .account-statement-table .tx-name{font-size:16px!important;font-weight:600!important;line-height:1.25!important;}
  html.design-lab #cards-sec .cards-invoice-table .tx-sub,html.design-lab #account-details .account-statement-table .tx-sub,html.design-lab #accounts .account-statement-table .tx-sub{font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #cards-sec .cards-invoice-table td:nth-child(4),html.design-lab #account-details .account-statement-table td:nth-child(4),html.design-lab #accounts .account-statement-table td:nth-child(4){font-size:16px!important;font-weight:700!important;font-variant-numeric:tabular-nums;}
  html.design-lab #cards-sec .cards-invoice-table .cat-pill,html.design-lab #account-details .account-statement-table .cat-pill,html.design-lab #accounts .account-statement-table .cat-pill{font-size:12px!important;padding:3px 10px!important;display:inline-block!important;}
  html.design-lab #cards-sec .cards-invoice-table td:nth-child(3),html.design-lab #account-details .account-statement-table td:nth-child(5),html.design-lab #accounts .account-statement-table td:nth-child(5){font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #cards-sec .cards-invoice-table td:nth-child(2),html.design-lab #account-details .account-statement-table td:nth-child(2),html.design-lab #accounts .account-statement-table td:nth-child(2){align-self:center;}
  html.design-lab #cards-sec .tx-table-foot,html.design-lab #account-details .tx-table-foot{font-size:13px!important;}
}

/* ===== Celular: escala tipográfica única (títulos, subtítulos, descritivos) ===== */
@media(max-width:900px){
  html.design-lab .detail-topbar h2,html.design-lab .page-title,html.design-lab .topbar h1,html.design-lab .section>.topbar>h2{font-size:22px!important;font-weight:700!important;line-height:1.2!important;}
  html.design-lab .panel>h3,html.design-lab .panel h3.label-icon,html.design-lab .topbar h3,html.design-lab h3.label-icon,html.design-lab .reports-card-head span,html.design-lab .cat-card-title,html.design-lab .card-head .card-title,html.design-lab .invoice-list-title,html.design-lab .vault-others-title,html.design-lab .inv-positions-panel h3,html.design-lab .panel>h3 .label-icon{font-size:17px!important;font-weight:700!important;line-height:1.25!important;}
  html.design-lab .invoice-sub,
html.design-lab .cat-card-count,
html.design-lab .stat .t,
html.design-lab .tx-summary-label,
html.design-lab .invoice-stat-label,
html.design-lab .account-hero-label,
html.design-lab .vault-hero-label,
html.design-lab .item-sub,
html.design-lab .cat-subs,
html.design-lab .ant-cat,
html.design-lab .tx .meta,
html.design-lab .rec-meta,
html.design-lab .hero-legend-label,
html.design-lab .account-type,
html.design-lab .account-updated,
html.design-lab .vault-desktop-amount,
html.design-lab .vault-desktop-forecast{font-size:13px!important;font-weight:500!important;}
  html.design-lab .hint,
html.design-lab .muted,
html.design-lab .empty,
html.design-lab .detail-sub,
html.design-lab #patChartInfo,
html.design-lab #patDebtInfo,
html.design-lab .inv-evo-sub{font-size:13px!important;line-height:1.4!important;}
  html.design-lab .stat .v,html.design-lab .tx-summary-value,html.design-lab .invoice-stat-value{font-size:18px!important;}
}
@media(max-width:900px){
  html.design-lab #pageTitle,html.design-lab #tools h2,html.design-lab .section>h2{font-size:22px!important;font-weight:700!important;line-height:1.2!important;}
  html.design-lab .cmp-head h3{font-size:17px!important;font-weight:700!important;}
}
@media(max-width:900px){
  html.design-lab #cards-sec .cards-invoice-table td,html.design-lab #account-details .account-statement-table td,html.design-lab #accounts .account-statement-table td{padding:0!important;border:0!important;}
  html.design-lab #cards-sec .cards-invoice-table tr,html.design-lab #account-details .account-statement-table tr,html.design-lab #accounts .account-statement-table tr{align-items:center!important;row-gap:6px!important;padding:12px 0!important;}
  html.design-lab #cards-sec .cards-invoice-table .cat-pill,html.design-lab #account-details .account-statement-table .cat-pill,html.design-lab #accounts .account-statement-table .cat-pill{background:var(--app-surface-soft)!important;color:var(--text-2,var(--muted))!important;border-radius:999px!important;}
}
@media(max-width:900px){
  html.design-lab #account-details .account-statement-table tr{grid-template-columns:auto minmax(0,1fr) auto!important;column-gap:10px!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(1){grid-column:1/3!important;grid-row:1!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(4){grid-column:3!important;grid-row:1!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(2){grid-column:1!important;grid-row:2!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(3){display:block!important;grid-column:2!important;grid-row:2!important;text-align:left!important;font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #account-details .account-statement-table td:nth-child(5){grid-column:3!important;grid-row:2!important;}
}

/* ===== Celular: lançamentos da conta/fatura agrupados por dia, 10 por página ===== */
@media(max-width:900px){
  html.design-lab #account-details>.panel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:12px!important;}
  html.design-lab #account-details #desktopAccountSummary{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-card{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:16px!important;padding:14px!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-top{display:flex!important;flex-direction:row-reverse!important;align-items:center!important;justify-content:space-between!important;margin-bottom:10px!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-icon{width:28px!important;height:28px!important;flex:0 0 28px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-icon.negative{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-icon.positive{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-icon.accent{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-label{font-size:10.5px!important;font-weight:700!important;color:var(--text-3)!important;text-transform:uppercase!important;letter-spacing:.03em!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-value{font-family:'Space Grotesk',system-ui,sans-serif!important;font-size:17px!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab #account-details #desktopAccountSummary .kpi-delta:empty{display:none!important;}
  html.design-lab #account-details #desktopAccountList{border-radius:20px!important;}
  html.design-lab #account-details .invoice-list-title{display:none!important;}
  html.design-lab #account-details #desktopAccountList .empty{padding:14px 0!important;}
  .m-pager-note{margin-top:10px;text-align:center;font-size:13px;color:var(--muted);}
  .m-pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;flex-wrap:nowrap;}
  .m-page-btn{flex:0 1 38px;min-width:30px;height:38px;padding:0 6px;border:1px solid var(--app-line);border-radius:11px;background:var(--app-surface-soft);color:var(--text);font-size:14px;font-weight:600;}
  .m-page-btn.active{background:#305bf3;border-color:#305bf3;color:#fff;}
  .m-page-btn:disabled{opacity:.4;}
  .m-page-btn.gap{color:var(--muted);letter-spacing:1px;}
}

/* ===== Celular: fundo nos cards principais de Investimentos e Recorrentes ===== */
@media(max-width:900px){
  html.design-lab #investments>.cards .stat{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:16px!important;padding:14px!important;box-shadow:none!important;}
  html.design-lab #recSummary{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
}

/* ===== Integrações (WhatsApp, Google Agenda, Sincronização bancária): visual mais profissional ===== */
html.design-lab #whatsapp-settings-page{--int-accent:#25d366;--int-accent-soft:rgba(37,211,102,.15);}
html.design-lab #google-calendar-settings-page{--int-accent:#4285f4;--int-accent-soft:rgba(66,133,244,.16);}
html.design-lab #gmail-settings-page{--int-accent:#ea4335;--int-accent-soft:rgba(234,67,53,.14);}
html.design-lab #pluggy-settings-page{--int-accent:#4a7c93;--int-accent-soft:rgba(74,124,147,.16);}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .panel{padding:22px!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .mais-page-inner-title{display:flex!important;align-items:center!important;gap:14px!important;margin:0 0 6px!important;font-size:21px!important;font-weight:700!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .mais-page-inner-title .label-icon{display:flex!important;align-items:center!important;gap:14px!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .mais-page-inner-title .label-icon>i{width:46px!important;height:46px!important;flex:0 0 46px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:14px;background:var(--int-accent-soft)!important;color:var(--int-accent)!important;font-size:22px!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .tool-modal-intro{font-size:14px!important;line-height:1.55!important;color:var(--muted)!important;margin:0 0 18px!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .whatsapp-link-block{display:flex;flex-direction:column;gap:14px;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .whatsapp-link-block.hidden{display:none!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-security-section{display:flex!important;flex-direction:column!important;gap:14px!important;padding:18px!important;margin:0!important;border:1px solid var(--app-line)!important;border-radius:18px!important;background:var(--app-surface-soft)!important;box-shadow:none!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-security-section.hidden{display:none!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-security-title{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:14px!important;align-items:start!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-security-title>i{width:40px!important;height:40px!important;display:inline-flex!important;align-items:center;justify-content:center;border-radius:12px;background:var(--int-accent-soft)!important;color:var(--int-accent)!important;font-size:18px!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-security-title strong{display:block;font-size:15px!important;font-weight:700!important;line-height:1.3!important;color:var(--text)!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-security-title small{display:block;margin-top:3px;font-size:13px!important;line-height:1.5!important;color:var(--muted)!important;font-weight:400!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .panel .btn:not(.btn-sm){width:100%!important;min-height:46px!important;border-radius:12px!important;font-size:15px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .panel .btn.btn-sm{min-height:40px!important;border-radius:11px!important;font-size:14px!important;align-self:flex-start;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .panel .btn.btn-ghost{background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--text)!important;box-shadow:none!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .field{margin:0!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .field label{font-size:13px!important;font-weight:600!important;color:var(--muted)!important;margin-bottom:6px!important;display:block;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) input,html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) select{min-height:46px!important;border-radius:12px!important;font-size:15px!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-action-warning{display:flex!important;align-items:flex-start!important;gap:12px!important;padding:14px 16px!important;border-radius:14px!important;background:rgba(226,168,61,.12)!important;border:1px solid rgba(226,168,61,.35)!important;color:var(--text)!important;font-size:14px!important;line-height:1.5!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-action-warning>i{color:#e2a83d!important;font-size:18px;margin-top:2px;}
/* Política de Privacidade/Termos de Uso dentro do app (ver app-legal.js) —
   cabeçalhos de seção (h3) e o destaque de contato do conteúdo NÃO herdam
   o estilo de .panel>h3 (pensado só pro título único da página, com botão
   de fechar ao lado). */
html.design-lab #legalPageBody h3{display:block!important;font-size:15px!important;font-weight:700!important;margin:22px 0 8px!important;color:var(--text)!important;}
html.design-lab #legalPageBody h3:first-of-type{margin-top:0!important;}
html.design-lab #legalPageBody p{font-size:14px!important;line-height:1.6!important;color:var(--text-2)!important;margin:0 0 4px!important;}
html.design-lab #legalPageBody .hint{margin:0 0 18px!important;}
html.design-lab #legalPageBody .legal-contact{padding:14px 16px!important;border-radius:14px!important;background:var(--accent-soft)!important;color:var(--accent)!important;font-weight:700!important;font-size:14px!important;margin:12px 0!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .whatsapp-pairing-steps{list-style:none!important;counter-reset:intstep;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:10px;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .whatsapp-pairing-steps li{counter-increment:intstep;position:relative;padding:2px 0 2px 38px!important;font-size:14px!important;line-height:1.5!important;color:var(--text)!important;list-style:none!important;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .whatsapp-pairing-steps li::before{content:counter(intstep);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--int-accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .whatsapp-pairing-steps a{color:var(--int-accent)!important;font-weight:600;}
html.design-lab #whatsapp-settings-page .whatsapp-pairing-code{text-align:center!important;font-size:34px!important;font-weight:700!important;letter-spacing:.32em!important;padding:16px 8px 16px 20px!important;border:1.5px dashed color-mix(in srgb,var(--int-accent) 65%,transparent)!important;border-radius:16px!important;background:var(--int-accent-soft)!important;color:var(--text)!important;font-variant-numeric:tabular-nums;}
html.design-lab #whatsapp-settings-page #whatsappOpenLink{background:#25d366!important;background-image:none!important;color:#fff!important;text-decoration:none!important;box-shadow:0 8px 20px rgba(37,211,102,.28)!important;}
html.design-lab #whatsapp-settings-page .whatsapp-pairing-waiting{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--int-accent-soft);color:var(--int-accent);font-size:13px;font-weight:600;}
html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .whatsapp-link-block>.hint{font-size:13px!important;line-height:1.5!important;}
html.design-lab #pluggy-settings-page #pluggyLinksList>*,html.design-lab #pluggy-settings-page #pluggyInvestmentsList>*{padding:12px 14px!important;margin:0 0 8px!important;border:1px solid var(--app-line)!important;border-radius:14px!important;background:var(--app-surface)!important;font-size:14px!important;}
html.design-lab #pluggy-settings-page #pluggyLinksList{margin-top:0!important;}
@media(max-width:900px){
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .panel{padding:16px!important;}
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .account-security-section{padding:16px!important;}
  html.design-lab #whatsapp-settings-page .whatsapp-pairing-code{font-size:30px!important;letter-spacing:.26em!important;}
}
html.design-lab #whatsapp-settings-page .whatsapp-pairing-code{display:block!important;width:100%!important;box-sizing:border-box!important;}
html.design-lab :is(#googleCalendarConnectedBlock,#gmailConnectedBlock,#whatsappConnectedBlock)>.account-security-section:first-child{border-color:color-mix(in srgb,#00b98e 45%,var(--app-line))!important;background:color-mix(in srgb,#00b98e 8%,var(--app-surface-soft))!important;}
html.design-lab :is(#googleCalendarConnectedBlock,#gmailConnectedBlock,#whatsappConnectedBlock)>.account-security-section:first-child .account-security-title>i{background:rgba(0,185,142,.18)!important;color:#00b98e!important;}
html.design-lab :is(#googleCalendarConnectedBlock,#gmailConnectedBlock,#whatsappConnectedBlock)>.account-security-section:first-child .account-security-title strong::after{content:'Ativo';margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(0,185,142,.18);color:#00b98e;font-size:11px;font-weight:700;vertical-align:middle;}
@media(max-width:900px){
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .mais-page-inner-title{display:none!important;}
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page) .tool-modal-intro:first-of-type{font-size:14px!important;}
}
html.design-lab :is(#whatsappConnectedBlock,#googleCalendarConnectedBlock,#gmailConnectedBlock)>.tool-modal-intro{margin:0!important;padding:16px 18px!important;border:1px solid var(--app-line)!important;border-radius:18px!important;background:var(--app-surface-soft)!important;color:var(--muted)!important;font-size:14px!important;line-height:1.55!important;}
@media(max-width:900px){
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page)>.panel{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;box-shadow:none!important;}
}

/* ===== Celular: menos movimento ao tocar (sem encolher/deslocar itens) ===== */
@media(max-width:900px){
  html.design-lab button:active:not(:disabled),html.design-lab .btn:active:not(:disabled),html.design-lab .icon-btn:active:not(:disabled),html.design-lab .nav-item:active,html.design-lab .bottom-nav button:active,html.design-lab .fab:active,html.design-lab .tool-card:active,html.design-lab .cc:active,html.design-lab .credit-card:active,html.design-lab .vault-card:active{transform:scale(.99)!important;transition-duration:90ms!important;}
  html.design-lab .fm-pressing{transform:none!important;opacity:.88;transition:opacity 90ms!important;}
  html.design-lab .preference-setting,
html.design-lab .preference-setting *,
html.design-lab .tool-card{transition-property:background-color,opacity,border-color!important;}
  html.design-lab .preference-setting:focus,html.design-lab .preference-setting:focus-within,html.design-lab .preference-setting:focus-visible,html.design-lab .preference-setting *:focus,html.design-lab .preference-setting *:focus-visible{outline:none!important;box-shadow:none!important;}
  html.design-lab .preference-setting:active,html.design-lab .preference-setting *:active{transform:none!important;}
}
@media(max-width:900px){
  html.design-lab .preference-row,html.design-lab .preference-row:active,html.design-lab .preference-row.fm-pressing,html.design-lab button.preference-row:active:not(:disabled){transform:none!important;transition:background-color .12s,border-color .12s!important;}
  html.design-lab .preference-row:focus,html.design-lab .preference-row:focus-visible{outline:none!important;box-shadow:none!important;}
  html.design-lab .preference-row:active{background:var(--app-surface-soft)!important;}
  html.design-lab .preference-row .preference-switch,html.design-lab .preference-row .preference-switch::after{transition-duration:.14s!important;}
}

/* ===== Celular: Dashboard mais fluido, organizado e no padrão de app ===== */
@media(max-width:900px){
  html.design-lab #dashboard>.dash-widget,html.design-lab #dashboard>.panel{margin-bottom:12px!important;}
  /* Herói: saldo do mês + receitas/despesas num cartão só */
  html.design-lab #dashboard>.cards.dash-widget{display:grid!important;gap:10px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:24px!important;box-shadow:none!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.balance{grid-column:1/-1!important;background:none!important;border:0!important;box-shadow:none!important;padding:2px 0 6px!important;text-align:center!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.balance::before{content:'Saldo do mês';font-size:13px;font-weight:600;color:var(--muted);margin-bottom:2px;}
  html.design-lab #dashboard>.cards.dash-widget .dashboard-balance-row{justify-content:space-between!important;align-items:center!important;gap:8px!important;}
  html.design-lab #dashboard>.cards.dash-widget #stBalance{font-size:34px!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-.5px;}
  html.design-lab #dashboard>.cards.dash-widget .dashboard-balance-nav{width:34px!important;height:34px!important;border-radius:50%!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.income,html.design-lab #dashboard>.cards.dash-widget>.stat.expense{flex-direction:column!important;gap:4px!important;border-radius:16px!important;min-width:0!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.income .t,html.design-lab #dashboard>.cards.dash-widget>.stat.expense .t{font-size:12px!important;font-weight:600!important;color:var(--muted)!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.income .v,html.design-lab #dashboard>.cards.dash-widget>.stat.expense .v{font-size:18px!important;font-weight:700!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.income .v{color:var(--income)!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.expense .v{color:var(--expense)!important;}
  /* Gráfico de evolução como card */
  html.design-lab #dashboard>.dashboard-evolution{padding:14px 12px 10px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;}
  /* Cartões de seção: cabeçalhos e chips uniformes */
  html.design-lab #dashboard>.panel.dash-widget{border-radius:22px!important;padding:16px!important;}
  html.design-lab #dashboard>.panel.dash-widget>h3{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 12px!important;font-size:17px!important;font-weight:700!important;}
  html.design-lab #dashboard>.panel.dash-widget>h3 .hint{font-size:12px!important;font-weight:600!important;padding:4px 10px;border-radius:999px;background:var(--app-surface-soft);color:var(--muted)!important;}
  /* Toque e rolagem mais suaves */
  html.design-lab #dashboard .dash-widget{transition:none!important;}
  html.design-lab #mainContent{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto;}
  html.design-lab #dashboard .tx{padding-top:12px!important;padding-bottom:12px!important;}
}
@media(max-width:900px){
  html.design-lab #dashboard>.cards.dash-widget>.stat.balance{min-height:0!important;height:auto!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.balance::before{display:none!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.balance .t{display:block!important;text-align:center!important;font-size:13px!important;font-weight:600!important;color:var(--muted)!important;margin:0 0 4px!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.balance .t .stat-icon-badge,html.design-lab #dashboard>.cards.dash-widget>.stat.balance .t .metric-info,html.design-lab #dashboard>.cards.dash-widget>.stat.balance .t .amount-visibility{display:none!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.balance .t #stBalanceLabel{display:inline!important;}
}

/* ===== Celular: Dashboard mais curto e barras no mesmo padrão ===== */
@media(max-width:900px){
  html.design-lab #dashboard>.cards.dash-widget{padding:14px 16px!important;}
  html.design-lab #dashboard .collapse-trigger::after{display:inline-block!important;}
  html.design-lab #dashboard .collapsible-widget .collapse-trigger{cursor:pointer!important;}
  html.design-lab #dashboard .collapsible-widget.collapsed{padding-bottom:16px!important;}
  html.design-lab #dashboard .collapsible-widget.collapsed>h3{margin-bottom:0!important;}
  html.design-lab #dashboard .bar-track,html.design-lab #dashboard .health-bar{height:9px!important;border-radius:999px!important;background:rgba(139,147,167,.14)!important;border:0!important;box-shadow:none!important;overflow:hidden!important;margin:8px 0!important;}
  html.design-lab #dashboard .bar-track .fill,html.design-lab #dashboard .health-bar .fill{height:100%!important;min-height:0!important;border-radius:999px!important;box-shadow:none!important;transition:width .4s ease;}
}
@media(max-width:900px){
  html.design-lab #dashboard .collapsible-widget.collapsed>h3 .hint{display:none!important;}
}
@media(max-width:900px){
  /* Receita e Despesa de volta, sem fundo de card */
  html.design-lab #dashboard>.cards.dash-widget{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.income,html.design-lab #dashboard>.cards.dash-widget>.stat.expense{display:flex!important;background:none!important;border:0!important;box-shadow:none!important;padding:6px 4px 0!important;align-items:center!important;text-align:center!important;}
  html.design-lab #dashboard>.cards.dash-widget>.stat.income .t,html.design-lab #dashboard>.cards.dash-widget>.stat.expense .t{justify-content:center!important;}
  /* Cabeçalho do card ao expandir: título e chip quebram linha em vez de estourar */
  html.design-lab #dashboard .collapsible-widget>h3,html.design-lab #dashboard>.panel.dash-widget>h3{flex-wrap:wrap!important;row-gap:8px!important;}
  html.design-lab #dashboard .collapsible-widget>h3 .label-icon{white-space:normal!important;min-width:0;}
  html.design-lab #dashboard .collapsible-widget>h3 .hint,html.design-lab #dashboard>.panel.dash-widget>h3 .hint{white-space:normal!important;max-width:100%!important;flex:0 1 auto!important;line-height:1.3!important;}
}

/* ===== Celular: selos coloridos nos ícones dos cabeçalhos do Dashboard —
   cada painel tinha só um ícone preto igual ao texto, sem nenhuma hierarquia
   visual. Agora cada um ganha um "badge" circular colorido (mesmo padrão já
   usado nos cards de Relatórios/Comparativo/Extrato de conta), o que ajuda a
   escanear a tela rapidamente e dá mais cara de app nativo. ===== */
@media(max-width:900px){
  html.design-lab #dashboard>.panel.dash-widget>h3 .label-icon>i,
  html.design-lab #dashboard>.collapsible-widget>h3 .label-icon>i,
  html.design-lab #dashboard>.dashboard-evolution>h3 .label-icon>i,
  html.design-lab #dashboard .dashboard-category-chart .dashboard-category-head h3 .label-icon>i{width:26px!important;height:26px!important;flex:0 0 26px!important;border-radius:9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;}
  html.design-lab #dashboard [data-collapse-id="goals"]>h3 .label-icon>i{background:color-mix(in srgb,var(--vault) 15%,transparent)!important;color:var(--vault)!important;}
  html.design-lab #dashboard [data-collapse-id="health"]>h3 .label-icon>i{background:var(--positive-soft)!important;color:var(--positive)!important;}
  html.design-lab #dashboard [data-collapse-id="streaks"]>h3 .label-icon>i{background:var(--warning-soft)!important;color:#c98919!important;}
  html.design-lab #dashboard #dashboardBillsWidget>h3 .label-icon>i{background:var(--negative-soft)!important;color:var(--negative)!important;}
  html.design-lab #dashboard #dashboardRecurringWidget>h3 .label-icon>i{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #dashboard>.dashboard-evolution>h3 .label-icon>i{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #dashboard [data-collapse-id="forecast"]>h3 .label-icon>i{background:color-mix(in srgb,var(--transfer) 15%,transparent)!important;color:var(--transfer)!important;}
  html.design-lab #dashboard [data-collapse-id="reserve"]>h3 .label-icon>i{background:color-mix(in srgb,var(--invest) 15%,transparent)!important;color:var(--invest)!important;}
  html.design-lab #dashboard [data-collapse-id="upcoming"]>h3 .label-icon>i{background:color-mix(in srgb,var(--vault) 15%,transparent)!important;color:var(--vault)!important;}
  html.design-lab #dashboard .dashboard-category-chart .dashboard-category-head h3 .label-icon>i{background:var(--accent-soft)!important;color:var(--accent)!important;}
  html.design-lab #dashboard [data-collapse-id="recent"]>h3 .label-icon>i{background:var(--surface-sunken)!important;color:var(--text-3)!important;}
}

/* ===== Celular: painéis recolhidos mais leves e compactos — Sequências,
   Previsão, Reserva e Próximas faturas já começam recolhidos por padrão
   (ver DASH_MOBILE_DEFAULT_COLLAPSED); com menos preenchimento e sem sombra
   eles leem como uma listinha curta, não quatro cartões pesados empilhados. ===== */
@media(max-width:900px){
  html.design-lab #dashboard>.collapsible-widget.collapsed{padding:13px 16px!important;margin-bottom:8px!important;box-shadow:none!important;}
}

/* ===== Celular: Avisos e lembretes, Ajuda e suporte e Onboarding no padrão de app nativo ===== */
.help-group,.help-group-list{display:contents;}
.help-group-title,.onboarding-back{display:none;}
@media(max-width:900px){
  /* ---------- Avisos e lembretes ---------- */
  html.design-lab #notification-settings-page>.panel{background:none!important;border:0!important;box-shadow:none!important;padding:4px 0 0!important;}
  html.design-lab #notification-settings-page .mais-page-inner-title{display:none!important;}
  html.design-lab #notification-settings-page .tool-modal-intro{padding:0 6px!important;margin:0 0 16px!important;font-size:13px!important;line-height:1.5!important;color:var(--muted)!important;}
  html.design-lab #notification-settings-page .preference-list{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:20px!important;overflow:hidden!important;padding:0!important;margin:0 0 8px!important;display:block!important;}
  html.design-lab #notification-settings-page #notificationPreferenceList{margin-top:16px!important;}
  html.design-lab #notification-settings-page #pushReminderRow{display:flex!important;align-items:center!important;gap:12px!important;padding:14px 16px!important;border:0!important;background:none!important;box-shadow:none!important;}
  html.design-lab #notification-settings-page #pushReminderRow .preference-setting-copy{display:flex!important;align-items:center!important;gap:12px!important;flex:1;min-width:0;}
  html.design-lab #notification-settings-page #pushReminderRow .btn{width:auto!important;flex:0 0 auto;}
  html.design-lab #notification-settings-page #pushReminderHint,html.design-lab #notification-settings-page .preference-list+.hint{padding:0 6px!important;font-size:13px!important;color:var(--muted)!important;}
  /* Dica dentro do cartão: alinhada ao texto da linha de cima (16 + ícone 34 + 12) e com folga embaixo. */
  html.design-lab #notification-settings-page #pushReminderHint{margin:-4px 0 0!important;padding:0 16px 16px 62px!important;line-height:1.45!important;}
  html.design-lab #notification-settings-page #pushReminderHint:empty{display:none!important;}
  html.design-lab #notification-settings-page .preference-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important;display:inline-flex!important;align-items:center;justify-content:center;background:#305bf3!important;color:#fff!important;font-size:16px!important;}
  html.design-lab #notification-settings-page #pushReminderRow .preference-icon{background:#00a87e!important;}
  html.design-lab #notification-settings-page .preference-setting-copy b,html.design-lab #notification-settings-page .preference-copy b{display:block;font-size:16px!important;font-weight:600!important;line-height:1.25!important;color:var(--text)!important;}
  html.design-lab #notification-settings-page .preference-setting-copy small,html.design-lab #notification-settings-page .preference-copy small{display:block;margin-top:2px;font-size:13px!important;line-height:1.35!important;color:var(--muted)!important;}
  html.design-lab #notification-settings-page .preference-row{position:relative;display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;padding:12px 16px!important;min-height:64px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-align:left!important;}
  html.design-lab #notification-settings-page .preference-row+.preference-row::before{content:'';position:absolute;top:0;left:64px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #notification-settings-page .preference-row .preference-copy{flex:1;min-width:0;}
  html.design-lab #notification-settings-page .preference-row:nth-child(2) .preference-icon{background:#00a87e!important;}
  html.design-lab #notification-settings-page .preference-row:nth-child(3) .preference-icon{background:#e2a83d!important;}
  html.design-lab #notification-settings-page .preference-row:nth-child(4) .preference-icon{background:#8062d4!important;}
  html.design-lab #notification-settings-page .preference-row:nth-child(5) .preference-icon{background:#e45768!important;}
  html.design-lab #notification-settings-page .preference-row:nth-child(6) .preference-icon{background:#2fb3d9!important;}
  html.design-lab #notification-settings-page .preference-row:nth-child(7) .preference-icon{background:#f07a3d!important;}
  html.design-lab #notification-settings-page .preference-row:nth-child(8) .preference-icon{background:#6b7a99!important;}
  html.design-lab #notification-settings-page .preference-row .preference-switch{flex:0 0 auto;}

  /* ---------- Ajuda e suporte ---------- */

  /* ---------- Onboarding em tela cheia ---------- */
  html.design-lab #onboardingOverlay{padding:0!important;align-items:stretch!important;background:var(--bg)!important;backdrop-filter:none!important;}
  html.design-lab #onboardingOverlay .onboarding-card{position:relative!important;width:100%!important;max-width:none!important;height:100%!important;min-height:100dvh!important;margin:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;background:var(--bg)!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:center!important;padding:calc(28px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom))!important;}
  html.design-lab #onboardingOverlay .onboarding-dots{order:-2;display:flex!important;gap:5px!important;margin:0 0 6px!important;padding:0!important;justify-content:stretch!important;}
  html.design-lab #onboardingOverlay .onboarding-dots span{flex:1 1 0!important;width:auto!important;height:4px!important;border-radius:2px!important;background:var(--app-line)!important;transform:none!important;}
  html.design-lab #onboardingOverlay .onboarding-skip{order:-1;position:static!important;align-self:flex-end;padding:10px 4px!important;margin:0!important;font-size:15px!important;font-weight:600!important;color:var(--muted)!important;background:none!important;border:0!important;}
  html.design-lab #onboardingOverlay .onboarding-icon{margin:auto auto 0!important;display:flex!important;align-items:center;justify-content:center;background:color-mix(in srgb,#305bf3 16%,var(--app-surface))!important;box-shadow:none!important;}
  html.design-lab #onboardingOverlay .onboarding-card h2{font-size:28px!important;line-height:1.15!important;font-weight:700!important;}
  html.design-lab #onboardingOverlay .onboarding-card p{margin:0!important;min-height:0!important;font-size:16px!important;line-height:1.55!important;color:var(--muted)!important;}
  html.design-lab #onboardingOverlay .onboarding-bullets{display:flex!important;margin:18px 0 0!important;}
  html.design-lab #onboardingOverlay .onboarding-bullets.hidden{display:none!important;}
  html.design-lab #onboardingOverlay .onboarding-bullets span{background:var(--app-surface);border:1px solid var(--app-line);line-height:1.4;color:var(--text);}
  html.design-lab #onboardingOverlay .onboarding-next{margin-top:auto!important;height:54px!important;min-height:54px!important;border-radius:16px!important;font-size:17px!important;font-weight:700!important;width:100%!important;}
  html.design-lab #onboardingOverlay .onboarding-back{display:block!important;margin:8px auto 0!important;padding:10px 16px!important;font-size:15px!important;font-weight:600!important;color:var(--muted)!important;background:none!important;border:0!important;}
  html.design-lab #onboardingOverlay .onboarding-back.is-invisible{visibility:hidden;}
  html.design-lab #onboardingOverlay .onboarding-step{margin-top:2px!important;font-size:12px!important;color:var(--muted)!important;}
}

/* ===== Ajuda e suporte (tela), artigos e "Ver essa tela" do onboarding ===== */
#help-page,#help-article-page{display:none;}
.onboarding-visit{display:none;}
.onboarding-resume{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:310;display:flex;align-items:stretch;background:#305bf3;color:#fff;border-radius:999px;box-shadow:0 10px 28px rgba(20,40,120,.45);overflow:hidden;max-width:calc(100vw - 32px);}
.onboarding-resume button{border:0;background:none;color:#fff;font:inherit;cursor:pointer;}
.onboarding-resume-main{display:flex;align-items:center;gap:10px;padding:12px 8px 12px 18px;font-size:15px;font-weight:700;}
.onboarding-resume-main span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left;}
.onboarding-resume-main small{font-size:11px;font-weight:600;opacity:.8;}
.onboarding-resume-close{padding:0 16px 0 10px;font-size:15px;opacity:.85;}
@media(min-width:901px){.onboarding-resume{bottom:28px;}}
@media(max-width:900px){
  html.design-lab #help-page.active,html.design-lab #help-article-page.active{display:block!important;}
  html.design-lab #help-page,html.design-lab #help-article-page{padding-bottom:24px;}
  /* Ajuda */
  html.design-lab .help-hero{display:flex;align-items:center;gap:14px;padding:16px;margin:4px 0 6px;border-radius:22px;background:var(--app-surface);border:1px solid var(--app-line);}
  html.design-lab .help-hero-icon{width:52px;height:52px;flex:0 0 52px;border-radius:16px;background:#305bf3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;}
  html.design-lab .help-hero b{display:block;color:var(--text);}
  html.design-lab .help-hero small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted);}
  html.design-lab .help-group-title-m{padding:18px 6px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  html.design-lab .help-list{display:flex;flex-direction:column;background:var(--app-surface);border:1px solid var(--app-line);border-radius:20px;overflow:hidden;}
  html.design-lab .help-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;min-height:66px;border:0;background:none;color:var(--text);text-align:left;text-decoration:none;font:inherit;cursor:pointer;}
  html.design-lab .help-row+.help-row::before{content:'';position:absolute;top:0;left:64px;right:0;height:1px;background:var(--app-line);}
  html.design-lab .help-row:active{background:var(--app-surface-soft);}
  html.design-lab .help-row-icon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;}
  html.design-lab .help-row-copy{flex:1;min-width:0;}
  html.design-lab .help-row-copy b{display:block;font-size:16px;font-weight:600;line-height:1.25;}
  html.design-lab .help-row-copy small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted);}
  html.design-lab .help-row>i{flex:0 0 auto;font-size:13px;color:var(--muted);}
  html.design-lab .help-version{margin:22px 0 0;text-align:center;font-size:12px;color:var(--muted);}
  /* Artigo */
  html.design-lab .art-hero{padding:24px 20px;margin:4px 0 12px;border-radius:24px;text-align:center;background:linear-gradient(0deg,var(--app-surface),var(--app-surface));border:1px solid var(--app-line);}
  html.design-lab .art-hero-icon{width:76px;height:76px;margin:0 auto 14px;border-radius:24px;background:var(--art-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;}
  html.design-lab .art-hero h3{margin:0 0 6px;font-weight:700;color:var(--text);}
  html.design-lab .art-hero p{margin:0;line-height:1.5;color:var(--muted);}
  html.design-lab .art-callout,html.design-lab .art-tip{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;font-size:14px;line-height:1.55;}
  html.design-lab .art-callout{background:color-mix(in srgb,#305bf3 14%,var(--app-surface));border:1px solid color-mix(in srgb,#305bf3 35%,var(--app-line));margin-bottom:14px;color:var(--text);}
  html.design-lab .art-callout>i{color:#5a8de1;font-size:18px;margin-top:2px;}
  html.design-lab .art-tip{background:color-mix(in srgb,#e2a83d 12%,var(--app-surface));border:1px solid color-mix(in srgb,#e2a83d 35%,var(--app-line));margin-top:14px;color:var(--text);}
  html.design-lab .art-tip>i{color:#e2a83d;font-size:18px;margin-top:2px;}
  html.design-lab .art-steps{display:flex;flex-direction:column;background:var(--app-surface);border:1px solid var(--app-line);border-radius:22px;overflow:hidden;}
  html.design-lab .art-step{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;}
  html.design-lab .art-step+.art-step::before{content:'';position:absolute;top:0;left:66px;right:0;height:1px;background:var(--app-line);}
  html.design-lab .art-step-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:17px;}
  html.design-lab .art-step b{display:block;font-size:16px;color:var(--text);margin-bottom:3px;}
  html.design-lab .art-step p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);}
  html.design-lab .art-step p b{display:inline;font-size:14px;color:var(--text);margin:0;}
  html.design-lab .art-example{margin-top:14px;padding:16px;border-radius:20px;background:var(--app-surface);border:1px dashed color-mix(in srgb,#00a87e 55%,var(--app-line));}
  html.design-lab .art-example b{display:flex;align-items:center;gap:8px;font-size:15px;color:#00a87e;margin-bottom:6px;}
  html.design-lab .art-example p{margin:0;font-size:14px;line-height:1.6;color:var(--text);}
  html.design-lab .art-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
  html.design-lab .art-action{display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:#305bf3;color:#fff;font:inherit;}
  html.design-lab .art-action:nth-child(n+2){background:var(--app-surface-soft);color:var(--text);border:1px solid var(--app-line);}
  /* Onboarding: botão "Ver essa tela" */
  html.design-lab #onboardingOverlay .onboarding-visit{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 0;padding:12px 20px;border-radius:999px;border:1px solid color-mix(in srgb,#305bf3 55%,var(--app-line));background:color-mix(in srgb,#305bf3 12%,transparent);font:inherit;font-size:15px;font-weight:700;cursor:pointer;}
}
@media(min-width:901px){
  .onboarding-overlay .onboarding-visit{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:none;color:var(--primary);font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
}
.onboarding-resume-main span,.onboarding-resume-main small{white-space:nowrap;}
.onboarding-resume{width:max-content;}

/* ===== Celular: Ferramentas em lista agrupada de app nativo + Onboarding refinado ===== */
.tools-search{display:none;}
.tools-filtered{display:none!important;}
@keyframes onbInR{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes onbInL{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  /* ---------- Ferramentas ---------- */
  html.design-lab #tools .tools-intro,html.design-lab #tools .section-label{display:none!important;}
  html.design-lab #tools .tools-profile-card{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;padding:20px 16px 16px!important;margin:0 0 14px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:24px!important;box-shadow:none!important;}
  html.design-lab #tools .mais-profile-row{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;width:100%!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;text-align:center!important;}
  html.design-lab #tools .mais-profile-row .profile-avatar{width:76px!important;height:76px!important;font-size:30px!important;margin:0!important;}
  html.design-lab #tools .mais-profile-row .profile-identity{display:flex;flex-direction:column;align-items:center;gap:3px;}
  html.design-lab #tools .mais-profile-row .profile-identity strong{font-weight:700!important;}
  html.design-lab #tools .mais-profile-row .profile-identity span{color:var(--muted)!important;}
  html.design-lab #tools .mais-profile-row>i,html.design-lab #tools .mais-profile-row .chev{display:none!important;}
  html.design-lab #tools .tools-edit-profile-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;padding:0 18px!important;border:1px solid var(--app-line)!important;background:var(--app-surface-soft)!important;color:var(--text)!important;box-shadow:none!important;}
  html.design-lab #tools .tools-search{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;margin:0 0 4px;border-radius:14px;background:var(--input-bg);border:1px solid var(--app-line);}
  html.design-lab #tools .tools-search i{color:var(--muted);font-size:15px;}
  html.design-lab #tools .tools-search input{flex:1;min-width:0;height:100%;border:0!important;background:none!important;color:var(--text);font-size:16px;outline:none!important;box-shadow:none!important;padding:0!important;min-height:0!important;}
  html.design-lab #tools .mais-nav-list{display:block!important;padding:0!important;background:none!important;border:0!important;}
  html.design-lab #tools .mais-nav-group-label{padding:22px 8px 8px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #tools .mais-nav-row{position:relative;display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;min-height:58px;margin:0!important;padding:11px 16px!important;background:var(--app-surface)!important;border:0 solid var(--app-line)!important;border-width:0 1px!important;border-radius:0!important;box-shadow:none!important;text-align:left!important;color:var(--text)!important;}
  html.design-lab #tools .mais-nav-row.hidden{display:none!important;}
  html.design-lab #tools .mais-nav-group-label+.mais-nav-row,html.design-lab #tools .mais-nav-group-label+.mais-nav-row.hidden+.mais-nav-row{border-top-width:1px!important;border-radius:20px 20px 0 0!important;}
  html.design-lab #tools .mais-nav-row:has(+.mais-nav-group-label),html.design-lab #tools .mais-nav-row:last-child{border-bottom-width:1px!important;border-radius:0 0 20px 20px!important;}
  html.design-lab #tools .mais-nav-group-label+.mais-nav-row:has(+.mais-nav-group-label),html.design-lab #tools .mais-nav-group-label+.mais-nav-row:last-child{border-radius:20px!important;}
  html.design-lab #tools .mais-nav-row+.mais-nav-row::before{content:'';position:absolute;top:0;left:66px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #tools .mais-nav-row:active{background:var(--app-surface-soft)!important;}
  html.design-lab #tools .mais-nav-row .ico{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:10px!important;display:inline-flex!important;align-items:center;justify-content:center;background:var(--ico-color,#305bf3)!important;color:#fff!important;font-size:16px!important;box-shadow:none!important;}
  html.design-lab #tools .mais-nav-row b{flex:1;font-size:16px!important;font-weight:600!important;text-align:left;}
  html.design-lab #tools .mais-nav-row .chev{font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #tools .mais-logout-btn{margin-top:22px!important;width:100%!important;height:52px!important;border-radius:18px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;color:var(--expense)!important;font-size:16px!important;font-weight:700!important;box-shadow:none!important;display:flex!important;align-items:center;justify-content:center;}
  html.design-lab #tools .mais-logout-btn.hidden{display:none!important;}

  /* ---------- Onboarding refinado ---------- */
  html.design-lab #onboardingOverlay .onboarding-card{--onb-accent:#305bf3;}
  html.design-lab #onboardingOverlay .onboarding-dots span.active{background:var(--onb-accent)!important;}
  html.design-lab #onboardingOverlay .onboarding-icon{width:124px!important;height:124px!important;border-radius:38px!important;background:color-mix(in srgb,var(--onb-accent) 20%,var(--app-surface))!important;color:var(--onb-accent)!important;font-size:54px!important;box-shadow:0 0 0 14px color-mix(in srgb,var(--onb-accent) 9%,transparent),0 0 0 30px color-mix(in srgb,var(--onb-accent) 4%,transparent)!important;margin-top:auto!important;margin-bottom:14px!important;}
  html.design-lab #onboardingOverlay .onboarding-card h2{margin:34px 0 10px!important;}
  html.design-lab #onboardingOverlay .onboarding-bullets{flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px!important;text-align:center!important;margin-top:20px!important;}
  html.design-lab #onboardingOverlay .onboarding-bullets span{padding:8px 14px!important;border-radius:999px!important;font-size:13px!important;font-weight:600;background:color-mix(in srgb,var(--onb-accent) 12%,var(--app-surface))!important;border:1px solid color-mix(in srgb,var(--onb-accent) 30%,var(--app-line))!important;}
  html.design-lab #onboardingOverlay .onboarding-next{background:var(--onb-accent)!important;box-shadow:0 10px 24px color-mix(in srgb,var(--onb-accent) 40%,transparent)!important;}
  html.design-lab #onboardingOverlay .onboarding-visit{color:var(--onb-accent)!important;border-color:color-mix(in srgb,var(--onb-accent) 55%,var(--app-line))!important;background:color-mix(in srgb,var(--onb-accent) 12%,transparent)!important;}
  html.design-lab #onboardingOverlay .onboarding-step{display:none!important;}
  html.design-lab #onboardingOverlay .onboarding-card.onb-fwd .onboarding-icon,html.design-lab #onboardingOverlay .onboarding-card.onb-fwd h2,html.design-lab #onboardingOverlay .onboarding-card.onb-fwd p,html.design-lab #onboardingOverlay .onboarding-card.onb-fwd .onboarding-bullets,html.design-lab #onboardingOverlay .onboarding-card.onb-fwd .onboarding-visit{animation:onbInR .34s cubic-bezier(.2,.8,.3,1) both;}
  html.design-lab #onboardingOverlay .onboarding-card.onb-back .onboarding-icon,html.design-lab #onboardingOverlay .onboarding-card.onb-back h2,html.design-lab #onboardingOverlay .onboarding-card.onb-back p,html.design-lab #onboardingOverlay .onboarding-card.onb-back .onboarding-bullets,html.design-lab #onboardingOverlay .onboarding-card.onb-back .onboarding-visit{animation:onbInL .34s cubic-bezier(.2,.8,.3,1) both;}
}
@media(prefers-reduced-motion:reduce){html.design-lab #onboardingOverlay .onboarding-card *{animation:none!important;}}
html.design-lab #tools .tools-filtered,html.design-lab #tools .mais-nav-row.tools-filtered,html.design-lab #tools .mais-nav-group-label.tools-filtered{display:none!important;}

/* ===== Celular — Meu perfil: páginas subsequentes (Segurança, Backup, E-mail, Senha) ===== */
@media(max-width:900px){
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page){--int-accent:#305bf3;--int-accent-soft:rgba(48,91,243,.16);}
  html.design-lab #account-security-page .account-danger-zone{--int-accent:#e45768;--int-accent-soft:rgba(228,87,104,.16);}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .mais-page-inner-title{align-items:center!important;gap:14px!important;margin:0 0 6px!important;font-size:21px!important;font-weight:700!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .mais-page-inner-title .label-icon{display:flex!important;align-items:center!important;gap:14px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .mais-page-inner-title .label-icon>i{width:46px!important;height:46px!important;flex:0 0 46px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:14px;background:var(--int-accent-soft)!important;color:var(--int-accent)!important;font-size:22px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .tool-modal-intro{font-size:14px!important;line-height:1.55!important;color:var(--muted)!important;margin:0 0 18px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .whatsapp-link-block{display:flex;flex-direction:column;gap:14px;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .whatsapp-link-block.hidden{display:none!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-section{display:flex!important;flex-direction:column!important;gap:14px!important;margin:0!important;border:1px solid var(--app-line)!important;border-radius:18px!important;background:var(--app-surface-soft)!important;box-shadow:none!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-section.hidden{display:none!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-title{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:14px!important;align-items:start!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-title>i{width:40px!important;height:40px!important;display:inline-flex!important;align-items:center;justify-content:center;border-radius:12px;background:var(--int-accent-soft)!important;color:var(--int-accent)!important;font-size:18px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-title strong{display:block;font-size:15px!important;font-weight:700!important;line-height:1.3!important;color:var(--text)!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-title small{display:block;margin-top:3px;font-size:13px!important;line-height:1.5!important;color:var(--muted)!important;font-weight:400!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .panel .btn:not(.btn-sm){width:100%!important;min-height:46px!important;border-radius:12px!important;font-size:15px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .panel .btn.btn-sm{min-height:40px!important;border-radius:11px!important;font-size:14px!important;align-self:flex-start;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .panel .btn.btn-ghost{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;color:var(--text)!important;box-shadow:none!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .field{margin:0!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .field label{font-size:13px!important;font-weight:600!important;color:var(--muted)!important;margin-bottom:6px!important;display:block;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) input,html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) select{min-height:46px!important;border-radius:12px!important;font-size:15px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-action-warning{display:flex!important;align-items:flex-start!important;gap:12px!important;padding:14px 16px!important;border-radius:14px!important;background:rgba(226,168,61,.12)!important;border:1px solid rgba(226,168,61,.35)!important;color:var(--text)!important;font-size:14px!important;line-height:1.5!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-action-warning>i{color:#e2a83d!important;font-size:18px;margin-top:2px;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .whatsapp-pairing-steps{list-style:none!important;counter-reset:intstep;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:10px;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .whatsapp-pairing-steps li{counter-increment:intstep;position:relative;padding:2px 0 2px 38px!important;font-size:14px!important;line-height:1.5!important;color:var(--text)!important;list-style:none!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .whatsapp-pairing-steps li::before{content:counter(intstep);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--int-accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .whatsapp-pairing-steps a{color:var(--int-accent)!important;font-weight:600;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .whatsapp-link-block>.hint{font-size:13px!important;line-height:1.5!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .panel{padding:16px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-section{padding:16px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .mais-page-inner-title{display:none!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .tool-modal-intro:first-of-type{font-size:14px!important;}
  html.design-lab :is(#account-security-page,#data-hub-page,#account-email-page,#account-password-page)>.panel{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;box-shadow:none!important;}
}

/* ===== Celular: Meu perfil (padrão Ferramentas), Sair da conta e janelas do perfil ===== */
@media(max-width:900px){
  /* ---------- Meu perfil ---------- */
  html.design-lab #profile-page>.panel{background:none!important;border:0!important;box-shadow:none!important;padding:4px 0 0!important;}
  html.design-lab #profile-page .mais-page-inner-title{display:none!important;}
  html.design-lab #profile-page .profile-hub-info{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;width:100%!important;padding:22px 16px 18px!important;margin:0 0 14px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:24px!important;box-shadow:none!important;text-align:center!important;position:relative;}
  html.design-lab #profile-page .profile-hub-info .profile-avatar{width:84px!important;height:84px!important;font-size:34px!important;margin:0!important;}
  html.design-lab #profile-page .profile-hub-info strong{display:block;font-weight:700!important;}
  html.design-lab #profile-page .profile-hub-info small{display:block;margin-top:3px;color:var(--muted)!important;}
  html.design-lab #profile-page .profile-hub-info>i,html.design-lab #profile-page .profile-hub-info .chev{position:absolute;right:16px;top:16px;color:var(--muted);font-size:13px;}
  html.design-lab #profile-page .profile-page-nav-list{display:block!important;padding:0!important;background:none!important;border:0!important;}
  html.design-lab #profile-page .mais-nav-row{position:relative;display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;min-height:58px;margin:0!important;padding:11px 16px!important;background:var(--app-surface)!important;border:0 solid var(--app-line)!important;border-width:0 1px!important;border-radius:0!important;box-shadow:none!important;text-align:left!important;color:var(--text)!important;}
  html.design-lab #profile-page .mais-nav-row.hidden{display:none!important;}
  html.design-lab #profile-page .mais-nav-row:first-child{border-top-width:1px!important;border-radius:20px 20px 0 0!important;}
  html.design-lab #profile-page .mais-nav-row:last-child{border-bottom-width:1px!important;border-radius:0 0 20px 20px!important;}
  html.design-lab #profile-page .mais-nav-row+.mais-nav-row::before{content:'';position:absolute;top:0;left:66px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #profile-page .mais-nav-row .ico{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:10px!important;display:inline-flex!important;align-items:center;justify-content:center;background:var(--ico-color,#305bf3)!important;color:#fff!important;font-size:16px!important;box-shadow:none!important;}
  html.design-lab #profile-page .mais-nav-row b{flex:1;font-size:16px!important;font-weight:600!important;text-align:left;}
  html.design-lab #profile-page .mais-nav-row .chev{font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #profile-page .mais-nav-row:active{background:var(--app-surface-soft)!important;}

  /* ---------- Sair da conta: folha de confirmação ---------- */

  /* ---------- Janelas do perfil como folhas nativas ---------- */
}
@media(max-width:900px){
  html.design-lab :is(#account-security-page,#data-hub-page)>.panel{display:flex!important;flex-direction:column!important;gap:12px!important;}
  html.design-lab #account-security-page .account-email-section,html.design-lab #account-security-page #accountVerificationSection,html.design-lab #account-security-page .account-password-section{display:none!important;}
  html.design-lab #account-security-page .mobile-account-access-actions{display:block!important;background:var(--app-surface-soft);border:1px solid var(--app-line);border-radius:18px;overflow:hidden;}
  html.design-lab #account-security-page .mobile-account-access-actions .preference-row{position:relative;display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;padding:12px 16px!important;min-height:62px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-align:left!important;}
  html.design-lab #account-security-page .mobile-account-access-actions .preference-row+.preference-row::before{content:'';position:absolute;top:0;left:64px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #account-security-page .mobile-account-access-actions .preference-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important;display:inline-flex!important;align-items:center;justify-content:center;background:#305bf3!important;color:#fff!important;font-size:16px!important;}
  html.design-lab #account-security-page .mobile-account-access-actions .preference-row+.preference-row .preference-icon{background:#8062d4!important;}
  html.design-lab #account-security-page .mobile-account-access-actions .preference-copy{flex:1;min-width:0;}
  html.design-lab #account-security-page .mobile-account-access-actions b{display:block;font-size:16px!important;font-weight:600!important;}
  html.design-lab #account-security-page .mobile-account-access-actions small{display:block;margin-top:2px;font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #account-security-page .account-security-intro{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,#00a87e 10%,var(--app-surface));border:1px solid color-mix(in srgb,#00a87e 30%,var(--app-line));font-size:13px;line-height:1.5;color:var(--text);margin:0;}
  html.design-lab #account-security-page .account-security-intro>i{color:#00a87e;font-size:18px;}
  html.design-lab #account-security-page .account-security-note{padding:0 6px;font-size:12px;color:var(--muted);text-align:center;}
  html.design-lab #account-security-page .account-danger-zone{border-color:color-mix(in srgb,var(--expense) 40%,var(--app-line))!important;}
}
@media(max-width:900px){
  html.design-lab #data-hub-page .data-option-grid{display:flex!important;flex-direction:column!important;gap:0!important;background:var(--app-surface-soft);border:1px solid var(--app-line);border-radius:20px;overflow:hidden;}
  html.design-lab #data-hub-page .report-option{position:relative;display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;padding:13px 16px!important;min-height:64px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-align:left!important;color:var(--text)!important;}
  html.design-lab #data-hub-page .report-option+.report-option::before{content:'';position:absolute;top:0;left:64px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #data-hub-page .report-option-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:10px!important;display:inline-flex!important;align-items:center;justify-content:center;background:#305bf3!important;color:#fff!important;font-size:16px!important;}
  html.design-lab #data-hub-page .report-option:nth-child(2) .report-option-icon{background:#00a87e!important;}
  html.design-lab #data-hub-page .report-option:nth-child(3) .report-option-icon{background:#8062d4!important;}
  html.design-lab #data-hub-page .report-option:nth-child(4) .report-option-icon{background:#e2a83d!important;}
  html.design-lab #data-hub-page .report-option:nth-child(5) .report-option-icon{background:#6b7a99!important;}
  html.design-lab #data-hub-page .report-option>span:nth-child(2){flex:1;min-width:0;}
  html.design-lab #data-hub-page .report-option b{display:block;font-size:16px!important;font-weight:600!important;}
  html.design-lab #data-hub-page .report-option small{display:block;margin-top:2px;font-size:13px!important;line-height:1.35!important;color:var(--muted)!important;}
  html.design-lab #data-hub-page .data-integrity-card{background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;border-radius:18px!important;padding:14px 16px!important;}
}
@media(max-width:900px){
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#account-security-page,#data-hub-page,#account-email-page,#account-password-page,#notification-settings-page) .btn:disabled,html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#account-security-page,#data-hub-page,#account-email-page,#account-password-page,#notification-settings-page) .btn.btn-ghost:disabled{background:var(--app-surface-soft)!important;background-image:none!important;border:1px solid var(--app-line)!important;color:var(--muted)!important;opacity:.7!important;box-shadow:none!important;}
  html.design-lab :is(#account-email-page,#account-password-page) :is(input,select){background:var(--input-bg)!important;}
}

/* ===== Celular: botões e títulos no MESMO padrão do restante do app ===== */
@media(max-width:900px){
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#account-security-page,#data-hub-page,#account-email-page,#account-password-page,#notification-settings-page) .panel .btn:not(.btn-sm){min-height:43px!important;height:auto!important;border-radius:12px!important;font-size:15px!important;font-weight:750!important;}
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#account-security-page,#data-hub-page,#account-email-page,#account-password-page,#notification-settings-page) .panel .btn.btn-sm{min-height:38px!important;height:auto!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important;}
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#account-security-page,#data-hub-page,#account-email-page,#account-password-page,#notification-settings-page) .panel .btn.btn-ghost,html.design-lab #pinLockSection .btn.btn-ghost{background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--text)!important;}
  html.design-lab #notification-settings-page #pushReminderRow .btn{border-radius:12px!important;min-width:0!important;height:auto!important;min-height:38px!important;padding:8px 16px!important;font-size:14px!important;font-weight:750!important;}
  html.design-lab .art-action{height:auto!important;min-height:43px!important;border-radius:12px!important;font-size:15px!important;font-weight:750!important;}
  html.design-lab #tools .tools-edit-profile-btn{border-radius:12px!important;font-size:14px!important;font-weight:750!important;height:auto!important;min-height:38px!important;}
  /* títulos de itens e seções: mesma escala do app */
  html.design-lab :is(#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#account-security-page,#data-hub-page,#account-email-page,#account-password-page) .account-security-title strong{font-size:16px!important;font-weight:600!important;}
  html.design-lab .art-step b{font-weight:600!important;}
  html.design-lab .help-hero b{font-weight:700!important;}
  /* Sair da conta: modal padrão com mensagem centralizada */
}

/* ===== Celular: janelas viram páginas, Editar perfil, Login e Loading ===== */
@keyframes fmPagePushIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes fmSplashPulse{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
@keyframes fmSplashBar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media(max-width:900px){
  /* ---------- Janelas → páginas de tela cheia ---------- */
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay){align-items:stretch!important;padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;box-shadow:none!important;padding:0 16px calc(28px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay).open .modal{animation:fmPagePushIn .3s cubic-bezier(.2,.8,.3,1) both;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2{position:sticky!important;top:0;z-index:5;display:flex!important;align-items:center!important;gap:10px!important;margin:0 -16px 14px!important;padding:calc(28px + env(safe-area-inset-top)) 16px 12px!important;background:var(--bg)!important;border-bottom:1px solid var(--app-line)!important;font-size:22px!important;font-weight:700!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2 .label-icon>i{display:none!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2 .icon-btn{width:36px!important;height:36px!important;background:none!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2 .icon-btn i{font-size:0!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2 .icon-btn i::before{content:"\f060";font-family:"Font Awesome 6 Free";font-weight:900;font-size:18px;}
  html.design-lab :is(#profileEditOverlay,#dashCfgOverlay) .modal-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;}

  /* ---------- Editar perfil ---------- */
  html.design-lab #profileEditOverlay .profile-edit-photo{display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important;padding:24px 16px 20px!important;margin:0 0 14px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:24px!important;text-align:center;}
  html.design-lab #profileEditOverlay .profile-edit-photo .profile-avatar{width:112px!important;height:112px!important;font-size:46px!important;margin:0!important;box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 14%,transparent);}
  html.design-lab #profileEditOverlay .profile-edit-photo>div:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
  html.design-lab #profileEditOverlay .profile-edit-photo .btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:auto!important;min-height:38px!important;padding:8px 16px!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important;}
  html.design-lab #profileEditOverlay .profile-edit-photo .hint,html.design-lab #profileEditOverlay .profile-edit-photo small,html.design-lab #profileEditOverlay .profile-edit-photo p{width:100%;margin:0!important;font-size:12px!important;color:var(--muted)!important;text-align:center;}
  html.design-lab #profileEditOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:20px;padding:14px 16px 16px;margin:0 0 12px!important;}
  html.design-lab #profileEditOverlay .field>label{display:block;margin:0 0 10px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #profileEditOverlay #profileAvatarOptions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;}
  html.design-lab #profileEditOverlay #profileAvatarOptions button{height:54px!important;border-radius:16px!important;border:1.5px solid transparent!important;background:var(--input-bg)!important;color:var(--text)!important;font-size:20px!important;display:flex!important;align-items:center;justify-content:center;}
  html.design-lab #profileEditOverlay #profileAvatarOptions button.active,html.design-lab #profileEditOverlay #profileAvatarOptions button[aria-pressed="true"],html.design-lab #profileEditOverlay #profileAvatarOptions button.selected{border-color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 16%,var(--input-bg))!important;color:var(--primary)!important;}
  html.design-lab #profileEditOverlay #profileAvatarColors{display:flex!important;flex-wrap:wrap;gap:14px!important;}
  html.design-lab #profileEditOverlay #profileAvatarColors button{width:40px!important;height:40px!important;border-radius:50%!important;background:var(--avatar-color)!important;border:3px solid var(--app-surface)!important;box-shadow:0 0 0 2px transparent;}
  html.design-lab #profileEditOverlay #profileAvatarColors button.active,html.design-lab #profileEditOverlay #profileAvatarColors button[aria-pressed="true"],html.design-lab #profileEditOverlay #profileAvatarColors button.selected{box-shadow:0 0 0 2px var(--avatar-color)!important;}
  html.design-lab #profileEditOverlay #profileEditName{min-height:50px!important;border-radius:14px!important;font-size:16px!important;}
  html.design-lab #profileEditOverlay .hint{padding:0 6px;font-size:13px!important;color:var(--muted)!important;}

  /* ---------- Loading (splash) ---------- */
  html.design-lab .auth-screen.auth-resolving .auth-loading{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--bg)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;z-index:5;}
  html.design-lab .auth-screen.auth-resolving .auth-loading .brand-mark{position:relative;width:96px!important;height:96px!important;border-radius:30px!important;font-size:42px!important;background:#305bf3!important;background-image:none!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(48,91,243,.28)!important;}
  html.design-lab .auth-screen.auth-resolving .auth-loading .brand-mark::before,html.design-lab .auth-screen.auth-resolving .auth-loading .brand-mark::after{content:'';position:absolute;inset:0;border-radius:30px;border:2px solid rgba(48,91,243,.5);animation:fmSplashPulse 2.2s ease-out infinite;}
  html.design-lab .auth-screen.auth-resolving .auth-loading .brand-mark::after{animation-delay:1.1s;}
  html.design-lab .auth-screen.auth-resolving .auth-loading strong{font-size:30px!important;font-weight:700!important;letter-spacing:-.4px;color:var(--text)!important;}
  html.design-lab .auth-screen.auth-resolving .auth-loading #authLoadingMessage{margin-top:8px!important;font-size:14px!important;color:var(--muted)!important;}
  html.design-lab .auth-screen.auth-resolving .auth-loading::after{content:'';left:50%;bottom:calc(64px + env(safe-area-inset-bottom));background:linear-gradient(90deg,transparent 0,transparent 100%),var(--app-line);}
  html.design-lab .auth-screen.auth-resolving .auth-loading::before{content:'';position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));width:44px;height:4px;margin-left:-60px;border-radius:2px;background:#305bf3;z-index:2;animation:fmSplashBar 1.3s ease-in-out infinite;}

  /* ---------- Login ---------- */
  html.design-lab .auth-screen:not(.auth-resolving){background:var(--bg)!important;background-image:none!important;}
  html.design-lab .auth-screen .auth-hero{background:none!important;border:0!important;box-shadow:none!important;min-height:0!important;padding:calc(30px + env(safe-area-inset-top)) 24px 18px!important;text-align:center!important;margin:0!important;}
  html.design-lab .auth-screen .auth-hero::before,html.design-lab .auth-screen .auth-hero::after{display:none!important;}
  html.design-lab .auth-screen .auth-brand{display:flex!important;flex-direction:column!important;align-items:center!important;font-size:22px!important;font-weight:700!important;margin:0 0 14px!important;}
  html.design-lab .auth-screen .auth-brand .brand-mark{background:#305bf3!important;background-image:none!important;color:#fff!important;box-shadow:0 5px 12px rgba(48,91,243,.28)!important;display:flex;align-items:center;justify-content:center;}
  html.design-lab .auth-screen .auth-hero h1{line-height:1.2!important;font-weight:700!important;}
  html.design-lab .auth-screen .auth-hero p{font-size:14px!important;line-height:1.5!important;color:var(--muted)!important;margin:0!important;}
  html.design-lab .auth-screen .auth-benefits,html.design-lab .auth-screen .auth-privacy{display:none!important;}
  html.design-lab .auth-screen .auth-panel{margin:0!important;padding:22px 20px calc(24px + env(safe-area-inset-bottom))!important;background:var(--app-surface)!important;background-image:none!important;border:1px solid var(--app-line)!important;border-bottom:0!important;border-radius:28px 28px 0 0!important;box-shadow:none!important;}
  html.design-lab .auth-screen .auth-panel h2{font-weight:700!important;margin:0 0 4px!important;}
  html.design-lab .auth-screen .auth-sub{font-size:14px!important;color:var(--muted)!important;margin:0 0 16px!important;}
  html.design-lab .auth-screen .auth-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;padding:4px!important;border-radius:14px!important;background:var(--input-bg)!important;border:0!important;}
  html.design-lab .auth-screen .auth-tabs button{border-radius:11px!important;font-size:15px!important;font-weight:700!important;background:none!important;color:var(--muted)!important;border:0!important;box-shadow:none!important;}
  html.design-lab .auth-screen .auth-tabs button.active{background:#305bf3!important;color:#fff!important;}
  html.design-lab .auth-screen .auth-provider{border-radius:14px!important;background:var(--app-surface-soft)!important;border:1px solid var(--app-line)!important;color:var(--text)!important;font-size:15px!important;font-weight:700!important;box-shadow:none!important;}
  html.design-lab .auth-screen .auth-divider{font-size:12px!important;color:var(--muted)!important;}
  html.design-lab .auth-screen .field input{border-radius:14px!important;font-size:16px!important;background:var(--input-bg)!important;}
  html.design-lab .auth-screen .field label{font-size:12px!important;font-weight:700!important;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab .auth-screen .auth-submit{border-radius:15px!important;font-size:17px!important;font-weight:700!important;background:#305bf3!important;background-image:none!important;box-shadow:0 10px 24px rgba(48,91,243,.35)!important;}
  html.design-lab .auth-screen .auth-forgot{display:block;width:100%;font-size:15px!important;font-weight:600!important;color:#5a8de1!important;background:none!important;border:0!important;}
  html.design-lab .auth-screen .auth-legal{margin:12px 0 0!important;font-size:12px!important;line-height:1.5!important;color:var(--muted)!important;text-align:center;}
}
@media(max-width:900px){
  html.design-lab .auth-screen .auth-hero{padding:calc(22px + env(safe-area-inset-top)) 24px 10px!important;}
  html.design-lab .auth-screen .auth-hero p{display:none!important;}
  html.design-lab .auth-screen .auth-brand{margin-bottom:8px!important;gap:8px!important;}
  html.design-lab .auth-screen .auth-brand .brand-mark{width:56px!important;height:56px!important;border-radius:18px!important;font-size:24px!important;}
  html.design-lab .auth-screen .auth-hero h1{font-size:21px!important;margin:0!important;}
  html.design-lab .auth-screen .auth-panel{padding:18px 20px calc(18px + env(safe-area-inset-bottom))!important;}
  html.design-lab .auth-screen .auth-panel h2{font-size:20px!important;}
  html.design-lab .auth-screen .auth-sub{margin-bottom:12px!important;}
  html.design-lab .auth-screen .auth-tabs{margin-bottom:10px!important;}
  html.design-lab .auth-screen .auth-tabs button{height:36px!important;}
  html.design-lab .auth-screen .auth-provider{height:46px!important;}
  html.design-lab .auth-screen .auth-divider{margin:10px 0!important;}
  html.design-lab .auth-screen .field{margin-bottom:10px!important;}
  html.design-lab .auth-screen .field input{min-height:48px!important;}
  html.design-lab .auth-screen .auth-remember{margin:2px 0 8px!important;font-size:13px!important;}
  html.design-lab .auth-screen .auth-submit{height:50px!important;min-height:50px!important;margin-top:4px!important;}
  html.design-lab .auth-screen .auth-forgot{padding:10px 0 2px!important;}
  html.design-lab .auth-screen .auth-legal{margin-top:8px!important;}
}
@media(max-width:900px){
  html.design-lab .auth-screen .auth-shell{display:flex!important;flex-direction:column!important;min-height:100dvh!important;}
  html.design-lab .auth-screen .auth-panel{margin-top:auto!important;}
}
@media(max-width:900px){
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2{flex-direction:row!important;justify-content:flex-start!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2 .icon-btn{order:-1;}
  html.design-lab #profileEditOverlay #profileAvatarColors,html.design-lab #profileEditOverlay #profileAvatarOptions{background:none!important;border:0!important;padding:0!important;}
}
@media(max-width:900px){
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2 .icon-btn{margin:0 4px 0 -8px!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal>h2 .label-icon{margin:0!important;}
}
@media(max-width:900px){
  html.design-lab #profileEditOverlay .profile-edit-photo button:not(.btn){display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;padding:8px 16px!important;border-radius:12px!important;border:1px solid color-mix(in srgb,var(--expense) 45%,var(--app-line))!important;background:none!important;color:var(--expense)!important;font-size:14px!important;font-weight:750!important;}
}
@media(max-width:900px){
  html.design-lab #appearanceOverlay .appearance-section{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:20px!important;padding:16px!important;margin:0 0 12px!important;}
  html.design-lab #appearanceOverlay .appearance-section-title{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  html.design-lab #appearanceOverlay .tool-modal-intro,html.design-lab #financialPreferencesOverlay .tool-modal-intro,html.design-lab #cloudVersionsOverlay .tool-modal-intro{padding:0 4px;font-size:13px!important;color:var(--muted)!important;}
}

/* ===== Celular: Contas a pagar/receber no padrão nativo ===== */
@media(max-width:900px){
  html.design-lab #bills #billListPanel{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;padding:6px 16px 10px!important;box-shadow:none!important;}
  html.design-lab #bills #billList .bill-row{padding:12px 0!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab #bills #billList .bill-row:last-child{border-bottom:0!important;}
}
@media(max-width:900px){html.design-lab #bills .detail-actions .btn{padding:8px 12px!important;font-size:13px!important;}}

/* ===== Celular: rodada de refinamento (perfil, backup, aparência, preferências, dashboard, segurança, e-mail/senha, apagar dados, loading) ===== */
.theme-preview,.appearance-info{display:none;}
@keyframes fmLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes fmSplashBar2{0%{background-position:-70% 0,0 0}100%{background-position:170% 0,0 0}}
@media(max-width:900px){
  /* ---------- Páginas (janelas de tela cheia): sem deslocamento, rodapé fixo ---------- */
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal{transform:none!important;transition:none!important;top:0!important;bottom:0!important;}
  html.design-lab :is(#profileEditOverlay,#appearanceOverlay,#financialPreferencesOverlay,#dashCfgOverlay,#cloudVersionsOverlay) .modal::before{display:none!important;}
  html.design-lab :is(#profileEditOverlay,#dashCfgOverlay) .modal{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;}
  html.design-lab :is(#profileEditOverlay,#dashCfgOverlay) .modal-actions{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:6;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;background:var(--bg)!important;border-top:1px solid var(--app-line)!important;display:flex!important;gap:10px!important;}
  html.design-lab :is(#profileEditOverlay,#dashCfgOverlay) .modal-actions .btn{flex:1!important;}

  /* ---------- Backup e recuperação ---------- */
  html.design-lab #cloudVersionsOverlay .tool-modal-intro{margin:6px 0 14px!important;padding:14px 16px!important;border-radius:18px;background:var(--app-surface);border:1px solid var(--app-line);font-size:14px!important;line-height:1.55!important;color:var(--muted)!important;}
  html.design-lab #cloudVersionsOverlay .modal-actions{margin:0 0 16px!important;padding:0!important;background:none!important;border:0!important;position:static!important;}
  html.design-lab #cloudVersionsOverlay .modal-actions .btn{width:100%!important;}
  html.design-lab #cloudVersionsOverlay .cloud-version-list{display:flex!important;flex-direction:column!important;gap:0!important;background:var(--app-surface);border:1px solid var(--app-line);border-radius:20px;}
  html.design-lab #cloudVersionsOverlay .cloud-version-row{position:relative;display:flex!important;gap:12px!important;padding:14px 16px!important;border:0!important;border-radius:0!important;background:none!important;}
  html.design-lab #cloudVersionsOverlay .cloud-version-row+.cloud-version-row::before{content:'';position:absolute;top:0;left:16px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #cloudVersionsOverlay .cloud-version-row b{display:block;font-size:16px!important;font-weight:600!important;}
  html.design-lab #cloudVersionsOverlay .cloud-version-row small,html.design-lab #cloudVersionsOverlay .cloud-version-row span{font-size:13px!important;color:var(--muted)!important;}
  html.design-lab #cloudVersionsOverlay .cloud-version-empty{padding:28px 16px!important;text-align:center;font-size:14px;color:var(--muted);}
  html.design-lab #cloudVersionsOverlay .cloud-version-note{margin:14px 6px 0!important;font-size:12px!important;line-height:1.5;color:var(--muted)!important;text-align:center;}

  /* ---------- Contas a pagar/receber: título quebra em duas linhas ---------- */
  html.design-lab #bills .detail-topbar h2{white-space:normal!important;font-size:20px!important;line-height:1.15!important;flex:1 1 0;min-width:0;overflow:visible!important;text-overflow:clip!important;}

  /* ---------- Loading: ícone pulsante, barra mais espessa abaixo do ícone ---------- */
  html.design-lab .auth-screen.auth-resolving .auth-shell{display:none!important;}
  html.design-lab .auth-screen.auth-resolving .auth-loading .brand-mark{animation:fmLogoPulse 1.6s ease-in-out infinite!important;margin-bottom:26px!important;}
  html.design-lab .auth-screen.auth-resolving .auth-loading::before{display:none!important;}

  /* ---------- Aparência ---------- */
  html.design-lab #appearanceOverlay .appearance-theme-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
  html.design-lab #appearanceOverlay .appearance-theme-options button{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;padding:10px 8px 12px!important;min-height:0!important;height:auto!important;border-radius:16px!important;border:1.5px solid var(--app-line)!important;background:var(--app-surface-soft)!important;color:var(--text)!important;font-size:13px!important;font-weight:700!important;}
  html.design-lab #appearanceOverlay .appearance-theme-options button>i{display:none!important;}
  html.design-lab #appearanceOverlay .appearance-theme-options button.active,html.design-lab #appearanceOverlay .appearance-theme-options button[aria-pressed="true"]{border-color:#305bf3!important;background:color-mix(in srgb,#305bf3 12%,var(--app-surface-soft))!important;color:#5a8de1!important;}
  html.design-lab #appearanceOverlay .appearance-theme-options button.active::after{content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:6px;right:8px;font-size:15px;color:#305bf3;background:var(--bg);border-radius:50%;}
  html.design-lab #appearanceOverlay .theme-preview{display:flex!important;flex-direction:column;gap:5px;width:100%;height:74px;padding:8px;border-radius:11px;background:#f4f7ff;box-sizing:border-box;}
  html.design-lab #appearanceOverlay .theme-preview em{display:block;height:100%;border-radius:5px;background:#fff;box-shadow:0 0 0 1px rgba(20,30,60,.08);}
  html.design-lab #appearanceOverlay .theme-preview em:first-child{height:14px;flex:0 0 14px;background:#305bf3;}
  html.design-lab #appearanceOverlay [data-appearance-theme="dark"] .theme-preview{background:#0b0c10;}
  html.design-lab #appearanceOverlay [data-appearance-theme="dark"] .theme-preview em{background:#1c1f2c;box-shadow:none;}
  html.design-lab #appearanceOverlay [data-appearance-theme="dark"] .theme-preview em:first-child{background:#305bf3;}
  html.design-lab #appearanceOverlay [data-appearance-theme="system"] .theme-preview{background:linear-gradient(120deg,#f4f7ff 50%,#0b0c10 50%);}
  html.design-lab #appearanceOverlay [data-appearance-theme="system"] .theme-preview em{background:linear-gradient(120deg,#fff 50%,#1c1f2c 50%);box-shadow:none;}
  html.design-lab #appearanceOverlay [data-appearance-theme="system"] .theme-preview em:first-child{background:#305bf3;}
  html.design-lab #appearanceOverlay .appearance-info{display:flex!important;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,#305bf3 12%,var(--app-surface));border:1px solid color-mix(in srgb,#305bf3 30%,var(--app-line));font-size:14px;line-height:1.55;color:var(--muted);}
  html.design-lab #appearanceOverlay .appearance-info>i{color:#5a8de1;font-size:18px;margin-top:2px;}
  html.design-lab #appearanceOverlay .appearance-info b{color:var(--text);}
  html.design-lab #appearanceOverlay .appearance-info span b:first-child{display:block;margin-bottom:2px;}

  /* ---------- Preferências financeiras e Personalizar dashboard ---------- */
  html.design-lab #financialPreferencesOverlay .preference-list{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:20px!important;overflow:hidden!important;padding:0!important;display:block!important;}
  html.design-lab #financialPreferencesOverlay .preference-setting-copy,html.design-lab #financialPreferencesOverlay .preference-row{display:flex!important;align-items:center!important;gap:14px!important;}
  html.design-lab #financialPreferencesOverlay .preference-setting,html.design-lab #financialPreferencesOverlay .preference-row{padding:14px 16px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;width:100%;text-align:left;position:relative;}
  html.design-lab #financialPreferencesOverlay .preference-row::before{content:'';position:absolute;top:0;left:66px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #financialPreferencesOverlay .preference-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:10px!important;display:inline-flex!important;align-items:center;justify-content:center;background:#305bf3!important;color:#fff!important;font-size:16px!important;}
  html.design-lab #financialPreferencesOverlay .preference-row .preference-icon{background:#8062d4!important;}
  html.design-lab #financialPreferencesOverlay b{display:block;font-size:16px!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab #financialPreferencesOverlay small{display:block;margin-top:2px;font-size:13px!important;line-height:1.35!important;color:var(--muted)!important;}
  html.design-lab #financialPreferencesOverlay .preference-setting-stack{display:block!important;}
  html.design-lab #financialPreferencesOverlay .mini-segmented{display:grid!important;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-top:12px;border-radius:14px;background:var(--input-bg);}
  html.design-lab #financialPreferencesOverlay .mini-segmented button{height:38px;border:0;border-radius:11px;background:none;color:var(--muted);font-size:14px;font-weight:700;}
  html.design-lab #dashCfgOverlay .hint{margin:4px 0 14px!important;padding:14px 16px!important;border-radius:18px;background:var(--app-surface);border:1px solid var(--app-line);font-size:14px!important;line-height:1.55!important;color:var(--muted)!important;}
  html.design-lab #dashCfgOverlay #dashCfgList{display:flex;flex-direction:column;background:var(--app-surface);border:1px solid var(--app-line);border-radius:20px;overflow:hidden;}
  html.design-lab #dashCfgOverlay .dcfg{position:relative;display:flex!important;align-items:center!important;gap:14px!important;padding:14px 16px!important;min-height:58px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;}
  html.design-lab #dashCfgOverlay .dcfg+.dcfg::before{content:'';position:absolute;top:0;left:50px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #dashCfgOverlay .dcfg .nm{flex:1;font-size:16px!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab #dashCfgOverlay .dcfg .drag-handle{color:var(--muted);font-size:15px;}

  /* ---------- Segurança: sem "Encerrar sessão" (já existe em Ferramentas) ---------- */
  html.design-lab #account-security-page .account-signout{display:none!important;}

  /* ---------- Alterar e-mail / Alterar senha ---------- */
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:4px 2px 12px!important;margin:0!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-head .btn{height:auto!important;min-height:36px!important;padding:6px 12px 6px 6px!important;border:0!important;background:none!important;color:#5a8de1!important;font-size:16px!important;font-weight:600!important;box-shadow:none!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-kicker{font-size:12px!important;font-weight:700!important;letter-spacing:.08em;color:var(--muted)!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-card{background:none!important;border:0!important;box-shadow:none!important;padding:8px 0 0!important;text-align:center;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-icon{align-self:center;width:84px!important;height:84px!important;border-radius:26px!important;display:flex!important;align-items:center;justify-content:center;background:color-mix(in srgb,#305bf3 18%,var(--app-surface))!important;color:#5a8de1!important;font-size:36px!important;margin:6px 0 16px!important;box-shadow:0 0 0 10px color-mix(in srgb,#305bf3 7%,transparent);}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-card h2{font-weight:700!important;margin:0 0 8px!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-card>p{margin:0 0 22px!important;line-height:1.55!important;color:var(--muted)!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .field{text-align:left;background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:12px 16px 14px;margin:0 0 12px!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .field label{display:block;margin:0 0 6px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .field input{background:none!important;border:0!important;padding:0!important;min-height:30px!important;font-size:17px!important;box-shadow:none!important;}
  html.design-lab #account-password-page .account-action-email{padding:16px!important;margin:0 0 12px!important;border-radius:18px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;font-size:16px!important;font-weight:600!important;word-break:break-all;}
  html.design-lab :is(#account-email-page,#account-password-page) .modal-actions{display:flex!important;flex-direction:column-reverse!important;gap:10px!important;margin:12px 0 0!important;padding:0!important;background:none!important;border:0!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .modal-actions .btn{width:100%!important;}

  /* ---------- Apagar dados financeiros ---------- */
  html.design-lab #accountDeleteDataOverlay .modal>p{text-align:center;font-size:15px!important;line-height:1.55!important;margin:6px 0 16px!important;}
  html.design-lab #accountDeleteDataOverlay .modal>h2 .label-icon>i{color:var(--expense);}
  html.design-lab #accountDeleteDataOverlay .account-action-warning{display:flex!important;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(228,87,104,.12);border:1px solid rgba(228,87,104,.35);color:var(--text);font-size:14px;line-height:1.5;}
  html.design-lab #accountDeleteDataOverlay .account-action-warning>i{color:var(--expense);font-size:20px;margin-top:1px;}
}
@media(max-width:900px){
  html.design-lab #financialPreferencesOverlay .mini-segmented button.active,html.design-lab #financialPreferencesOverlay .mini-segmented button.active.projected{background:#305bf3!important;color:#fff!important;box-shadow:none!important;}
}

/* ===== Celular: Alterar e-mail / Alterar senha como página ===== */
@media(max-width:900px){
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay){align-items:stretch!important;padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;box-shadow:none!important;padding:0 16px calc(28px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay).open .modal{animation:fmPagePushIn .3s cubic-bezier(.2,.8,.3,1) both;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2{position:sticky!important;top:0;z-index:5;display:flex!important;align-items:center!important;gap:10px!important;margin:0 -16px 14px!important;padding:calc(28px + env(safe-area-inset-top)) 16px 12px!important;background:var(--bg)!important;border-bottom:1px solid var(--app-line)!important;font-size:22px!important;font-weight:700!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2 .label-icon>i{display:none!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2 .icon-btn{width:36px!important;height:36px!important;background:none!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2 .icon-btn i{font-size:0!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2 .icon-btn i::before{content:"\f060";font-family:"Font Awesome 6 Free";font-weight:900;font-size:18px;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2{flex-direction:row!important;justify-content:flex-start!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2 .icon-btn{order:-1;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2 .icon-btn{margin:0 4px 0 -8px!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal>h2 .label-icon{margin:0!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal{transform:none!important;transition:none!important;top:0!important;bottom:0!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal::before{display:none!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal-actions{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:6;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;background:var(--bg)!important;border-top:1px solid var(--app-line)!important;display:flex!important;gap:10px!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .modal-actions .btn{flex:1!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .hint{border-radius:18px;font-size:14px!important;line-height:1.55!important;color:var(--muted)!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:12px 16px 14px;margin:0 0 12px!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .field label{display:block;margin:0 0 6px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .field input{background:none!important;border:0!important;padding:0!important;min-height:30px!important;font-size:17px!important;box-shadow:none!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .account-action-email{padding:16px!important;border-radius:18px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;font-size:16px!important;font-weight:600!important;word-break:break-all;}
}

/* ===== Rodada: loading, backup, senha, categoria, preferências, orçamento, caixinhas ===== */
@keyframes fmSplashBar3{0%{background-position:-70% 0}100%{background-position:170% 0}}
html.fm-reduce-motion *,html.fm-reduce-motion *::before,html.fm-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
.pw-hero,.pw-label,.pw-steps,.pw-tips,.pw-meter,.pw-checks,.pw-match{display:none;}
@media(max-width:900px){
  /* Loading: barra volta a animar (declaração !important vencia a animação) */
  html.design-lab .auth-screen.auth-resolving .auth-loading::after{background-color:var(--app-line)!important;background-image:linear-gradient(90deg,transparent 0,#305bf3 35%,#305bf3 65%,transparent 100%)!important;background-repeat:no-repeat!important;background-size:55% 100%!important;background-position:-70% 0;animation:fmSplashBar3 1.3s ease-in-out infinite!important;}

  /* Backup: a lista rola junto com a página */
  html.design-lab #cloudVersionsOverlay .cloud-version-list{max-height:none!important;overflow:visible!important;-webkit-overflow-scrolling:touch;}
  html.design-lab #cloudVersionsOverlay .modal{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;}
  html.design-lab #cloudVersionsOverlay .cloud-version-row>i{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#305bf3;color:#fff;font-size:16px;}
  html.design-lab #cloudVersionsOverlay .cloud-version-row .btn{height:auto!important;min-height:36px!important;padding:6px 14px!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important;}

  /* Caixinha destaque: texto sempre claro sobre o fundo azul-marinho (modo claro incluso) */
  html.design-lab #vaults .hero-card,html.design-lab #vaults .hero-card .vault-hero-name,html.design-lab #vaults .hero-card .vault-hero-amount,html.design-lab #vaults .hero-card .vault-hero-forecast-value,html.design-lab #vaults .hero-card .vault-ring-inner b{color:#fff!important;}
  html.design-lab #vaults .hero-card .vault-hero-amount span,html.design-lab #vaults .hero-card .vault-hero-label{color:rgba(255,255,255,.72)!important;}
  html.design-lab #vaults .hero-card .vault-hero-label{color:#8fb4ff!important;}
  html.design-lab #vaults .hero-card .vault-hero-actions .btn-ghost{color:#fff!important;background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.28)!important;}
  html.design-lab #vaults .hero-card .vault-hero-yield,html.design-lab #vaults .hero-card .vault-hero-yield small{color:#5ee0b8!important;}
  html.design-lab #vaults .hero-card .vault-hero-yield small{color:rgba(255,255,255,.7)!important;}
  html.design-lab #vaults .hero-card .vault-ring-icon{color:#fff!important;}

  /* Orçamento: pílula de mês + "+ Meta" */
  html.design-lab #budget .detail-actions{display:flex!important;align-items:center;gap:8px;}
  html.design-lab #budget .detail-actions .mobile-month-pill{display:inline-flex!important;height:34px;padding:0 10px!important;font-size:13px!important;gap:6px;}

  /* Personalizar dashboard: só a alça arrasta */
  html.design-lab #dashCfgOverlay .dcfg{touch-action:auto;cursor:default;}
  html.design-lab #dashCfgOverlay .dcfg .drag-handle{touch-action:none;cursor:grab;width:36px;height:36px;margin:-8px 0 -8px -10px;display:flex;align-items:center;justify-content:center;flex:0 0 36px;border-radius:10px;-webkit-user-select:none;user-select:none;}
  html.design-lab #dashCfgOverlay .dcfg .drag-handle:active{background:var(--app-surface-soft);color:var(--text);}
  html.design-lab #dashCfgOverlay .dcfg.dragging{background:var(--app-surface-soft)!important;}

  /* Preferências: cabeçalho de grupo e ícones variados */
  html.design-lab #financialPreferencesOverlay .preference-row:nth-of-type(2) .preference-icon{background:#00a87e!important;}
  html.design-lab #financialPreferencesOverlay .preference-row:nth-of-type(3) .preference-icon{background:#e2a83d!important;}
  html.design-lab #financialPreferencesOverlay .preference-row:nth-of-type(4) .preference-icon{background:#2fb3d9!important;}
  html.design-lab #financialPreferencesOverlay .preference-row:nth-of-type(5) .preference-icon{background:#6b7a99!important;}

  /* Alterar senha / Alterar e-mail (link por e-mail) — completas, mesmo padrão */
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-hero{display:flex!important;align-items:center;justify-content:center;width:84px;height:84px;margin:8px auto 16px;border-radius:26px;background:color-mix(in srgb,#305bf3 18%,var(--app-surface));color:#5a8de1;font-size:36px;box-shadow:0 0 0 10px color-mix(in srgb,#305bf3 7%,transparent);}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .hint{text-align:center;background:none!important;border:0!important;padding:0 8px!important;margin:0 0 18px!important;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-label{display:block!important;padding:0 6px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-steps,html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-tips{display:block!important;margin-top:14px;padding:16px;border-radius:20px;background:var(--app-surface);border:1px solid var(--app-line);}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-title{display:block;margin-bottom:12px;font-size:16px;font-weight:700;color:var(--text);}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-steps>div{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-steps>div:last-child{margin-bottom:0;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-steps span{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#305bf3;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-steps p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--muted);}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-steps p b{color:var(--text);}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-tips ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--muted);}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-tips{border-style:dashed;border-color:color-mix(in srgb,#00a87e 45%,var(--app-line));}
  html.design-lab :is(#mobileEmailOverlay,#mobilePasswordOverlay) .pw-tips .pw-title{color:#00a87e;}
  /* Campo de senha com o ícone de olho (mesmo padrão do login) dentro de um
     .field deste overlay */
  html.design-lab #mobileEmailOverlay .field .auth-password-wrap{display:flex!important;align-items:center;gap:8px;}
  html.design-lab #mobileEmailOverlay .field .auth-password-wrap input{flex:1;min-width:0;}
  html.design-lab #mobileEmailOverlay .field .auth-field-ico{display:none;}
  html.design-lab #mobileEmailOverlay .field .auth-password-toggle{flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:16px;padding:4px;}

  /* Criar nova senha (recuperação): medidor de força */
  html.design-lab #passwordRecoveryOverlay .pw-meter{display:flex!important;align-items:center;gap:12px;margin:-4px 2px 10px;}
  html.design-lab #passwordRecoveryOverlay .pw-meter-bar{flex:1;height:8px;border-radius:999px;background:rgba(139,147,167,.16);overflow:hidden;}
  html.design-lab #passwordRecoveryOverlay .pw-meter-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--expense);transition:width .25s,background .25s;}
  html.design-lab #passwordRecoveryOverlay .pw-meter[data-level="2"] i{background:#e2a83d;}
  html.design-lab #passwordRecoveryOverlay .pw-meter[data-level="3"] i{background:#5a8de1;}
  html.design-lab #passwordRecoveryOverlay .pw-meter[data-level="4"] i{background:#00b98e;}
  html.design-lab #passwordRecoveryOverlay .pw-meter span{min-width:92px;text-align:right;font-size:13px;font-weight:700;color:var(--muted);}
  html.design-lab #passwordRecoveryOverlay .pw-checks{display:grid!important;grid-template-columns:1fr;gap:6px;list-style:none;margin:0 2px 14px;padding:0;}
  html.design-lab #passwordRecoveryOverlay .pw-checks li{position:relative;padding-left:26px;font-size:13px;color:var(--muted);}
  html.design-lab #passwordRecoveryOverlay .pw-checks li::before{content:"\f111";font-family:"Font Awesome 6 Free";font-weight:400;position:absolute;left:0;top:0;font-size:14px;color:var(--muted);}
  html.design-lab #passwordRecoveryOverlay .pw-checks li.ok{color:var(--text);}
  html.design-lab #passwordRecoveryOverlay .pw-checks li.ok::before{content:"\f058";font-weight:900;color:#00b98e;}
  html.design-lab #passwordRecoveryOverlay .pw-match{display:block!important;min-height:18px;margin:2px 4px 10px;font-size:13px;font-weight:600;}
  html.design-lab #passwordRecoveryOverlay .pw-match.ok{color:#00b98e;}
  html.design-lab #passwordRecoveryOverlay .pw-match.bad{color:var(--expense);}

  /* Editar categoria como página */
  html.design-lab #catOverlay{align-items:stretch!important;padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html.design-lab #catOverlay .modal{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;box-shadow:none!important;padding:0 16px calc(96px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;transform:none!important;transition:none!important;-webkit-overflow-scrolling:touch;}
  html.design-lab #catOverlay.open .modal{animation:fmPagePushIn .3s cubic-bezier(.2,.8,.3,1) both;}
  html.design-lab #catOverlay .modal::before{display:none!important;}
  html.design-lab #catOverlay .modal>h2{position:sticky!important;top:0;z-index:5;margin:0 -16px 14px!important;padding:calc(28px + env(safe-area-inset-top)) 16px 12px!important;background:var(--bg)!important;border-bottom:1px solid var(--app-line)!important;font-size:22px!important;font-weight:700!important;}
  html.design-lab #catOverlay .modal-actions{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:6;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;background:var(--bg)!important;border-top:1px solid var(--app-line)!important;display:flex!important;gap:10px!important;}
  html.design-lab #catOverlay .modal-actions .btn{flex:1!important;}
  html.design-lab #catOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:20px;padding:14px 16px 16px;margin:0 0 12px!important;}
  html.design-lab #catOverlay .field>label,html.design-lab #catOverlay .icon-picker-header label{display:block;margin:0 0 10px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #catOverlay #catName{min-height:50px!important;border-radius:14px!important;font-size:16px!important;}
  html.design-lab #catOverlay .cat-sub-add{gap:8px;margin-bottom:12px;}
  html.design-lab #catOverlay .cat-sub-add input{flex:1;min-width:0;min-height:46px!important;border-radius:13px!important;font-size:16px!important;}
  html.design-lab #catOverlay .cat-sub-add .btn{flex:0 0 auto;height:46px!important;min-height:46px!important;border-radius:13px!important;white-space:nowrap;}
  html.design-lab #catOverlay .cat-sub-list{overflow:hidden;}
  html.design-lab #catOverlay .cat-sub-row{position:relative;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;}
  html.design-lab #catOverlay .cat-sub-row+.cat-sub-row::before{content:'';position:absolute;top:0;left:14px;right:0;height:1px;background:var(--app-line);}
  html.design-lab #catOverlay .cat-sub-name{flex:1;min-width:0;height:40px;border:0!important;background:none!important;padding:0 4px!important;font-size:16px!important;color:var(--text);box-shadow:none!important;min-height:0!important;}
  html.design-lab #catOverlay .cat-sub-actions{display:flex;align-items:center;gap:2px;}
  html.design-lab #catOverlay .cat-sub-btn{width:34px;height:34px;border:0;border-radius:10px;background:none;color:var(--muted);font-size:13px;}
  html.design-lab #catOverlay .cat-sub-btn:active{background:var(--app-surface);}
  html.design-lab #catOverlay .cat-sub-btn:disabled{opacity:.3;}
  html.design-lab #catOverlay .cat-sub-btn.danger{color:var(--expense);}
  html.design-lab #catOverlay .cat-sub-empty{display:flex;align-items:center;gap:12px;padding:16px;font-size:14px;line-height:1.5;color:var(--muted);}
  html.design-lab #catOverlay .cat-sub-empty i{font-size:20px;color:#5a8de1;}
  html.design-lab #catOverlay .cat-sub-hint{margin:10px 2px 0!important;font-size:12px!important;color:var(--muted)!important;}
}
@media(max-width:900px){
  html.design-lab .auth-screen.auth-resolving .auth-loading::after{position:static!important;order:10;display:block;width:160px!important;height:7px!important;margin:28px 0 0!important;border-radius:4px;overflow:hidden;}
}
@media(max-width:900px){html.design-lab #budget .detail-topbar h2{font-size:19px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;flex:1 1 0;min-width:0;}}

/* Desktop: as setas de mês da fatura são só do celular */
@media(min-width:901px){.cards-detail-mobilebar,.cards-mobile-month{display:none!important;}}

/* ===== Celular: ícone do backup e Editar categoria simplificado ===== */
@media(max-width:900px){
  html.design-lab #cloudVersionsOverlay .cloud-version-row{grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;column-gap:12px!important;}
  html.design-lab #cloudVersionsOverlay .cloud-version-row>:first-child{width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;padding:0!important;margin:0!important;border-radius:14px!important;justify-self:center;align-self:center;display:flex!important;align-items:center;justify-content:center;background:color-mix(in srgb,#305bf3 16%,var(--app-surface))!important;color:#5a8de1!important;font-size:19px!important;line-height:1!important;}
  html.design-lab #cloudVersionsOverlay .cloud-version-row>:first-child i,html.design-lab #cloudVersionsOverlay .cloud-version-row>:first-child svg{font-size:19px!important;line-height:1;}
  html.design-lab #catOverlay .cat-sub-btn:not(.danger){display:none!important;}
  html.design-lab #catOverlay .cat-sub-row{min-height:48px;}
  html.design-lab #catOverlay .cat-sub-name{font-weight:500;}
  html.design-lab #catOverlay .cat-sub-list{background:none;border:0;border-radius:0;}
  html.design-lab #catOverlay .cat-sub-row{border-bottom:1px solid var(--app-line);}
  html.design-lab #catOverlay .cat-sub-row+.cat-sub-row::before{display:none;}
}

/* ===== Celular: lançamentos compactos (valor na mesma linha) ===== */
@media(max-width:900px){
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto!important;align-items:center!important;column-gap:12px!important;padding:12px 0!important;}
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx .dot{grid-column:1;width:40px!important;height:40px!important;border-radius:12px!important;}
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx .info{grid-column:2;min-width:0;}
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx .amt{grid-column:3;white-space:nowrap;text-align:right;font-size:16px!important;font-weight:700!important;align-self:center;}
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx .tx-actions{display:none!important;}
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx .desc,html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-width:900px){
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx{grid-template-areas:none!important;grid-template-rows:auto!important;}
  html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx>.dot,html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx>.info,html.design-lab :is(#transactions,#cardsInvoiceList,#desktopAccountList,#dashboard,#account-details,#invoiceList) .tx>.amt{grid-row:1!important;}
}
/* Nova/Editar categoria: o computador volta a ser exatamente como era antes
   do redesenho do celular (pedido explícito — as mudanças de celular não
   deviam ter afetado o desktop) — <select> comum pra Tipo, textarea comum
   "uma por linha" pra Subcategorias, sem pílulas, sem arrastar, sem selo.
   Só no celular (@media max-width:900px) é que valem as pílulas Despesa/
   Receita e a lista interativa com alça de arrastar e setas. */
.cat-type-seg{display:none;}
html.design-lab #catOverlay .cat-subs-textarea{display:block!important;}
html.design-lab #catOverlay .cat-sub-add,html.design-lab #catOverlay .cat-sub-list,html.design-lab #catOverlay .cat-sub-hint,html.design-lab #catOverlay .cat-subs-count{display:none!important;}
@media(max-width:900px){
  html.design-lab #catOverlay .cat-type-seg{display:grid!important;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--input-bg);margin-top:6px;}
  html.design-lab #catOverlay .cat-type-seg button{height:42px;border:0;border-radius:11px;background:none;color:var(--muted);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;}
  html.design-lab #catOverlay .cat-type-seg button.active[data-type="expense"]{background:var(--expense);color:#fff;}
  html.design-lab #catOverlay .cat-type-seg button.active[data-type="income"]{background:var(--income);color:#fff;}
  html.design-lab #catOverlay .cat-type-field #catType,html.design-lab #catOverlay .cat-type-field .fm-select-wrap,html.design-lab #catOverlay .cat-type-field .fm-select-trigger{display:none!important;}
  html.design-lab #catOverlay .cat-subs-textarea{display:none!important;}
  html.design-lab #catOverlay .cat-sub-add,html.design-lab #catOverlay .cat-sub-list,html.design-lab #catOverlay .cat-sub-hint,html.design-lab #catOverlay .cat-subs-count{display:flex!important;}
  html.design-lab #catOverlay .cat-subs-count{display:inline-flex!important;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:#305bf3;color:#fff;font-size:11px;letter-spacing:0;}
  html.design-lab #catOverlay .cat-sub-list{flex-direction:column;}
  html.design-lab #catOverlay .cat-sub-grip{flex:0 0 34px;width:34px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;border-radius:10px;}
  html.design-lab #catOverlay .cat-sub-grip:active{background:var(--app-surface-soft);color:var(--text);}
  html.design-lab #catOverlay .cat-sub-row.dragging{background:var(--app-surface-soft);border-radius:12px;}
  html.design-lab #catOverlay .cat-sub-row{padding-left:0!important;}
}
.icon-preview{display:none;}
@media(max-width:900px){
  html.design-lab #catOverlay .icon-picker-header{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;margin:0!important;}
  html.design-lab #catOverlay .icon-preview{display:flex!important;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,#305bf3 16%,var(--input-bg));color:#5a8de1;font-size:24px;}
  html.design-lab #catOverlay .icon-picker-header label{flex:1;margin:0!important;line-height:1.2!important;align-self:center!important;font-size:12px!important;}
  html.design-lab #catOverlay .icon-picker-header .icon-picker-toggle{flex:0 0 auto;align-self:center!important;margin:0!important;height:40px!important;min-height:40px!important;padding:0 16px!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important;display:inline-flex!important;align-items:center;gap:8px;}
  html.design-lab #catOverlay #catIconPickWrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--app-line);}
  html.design-lab #catOverlay #catIconPick{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;max-height:280px;overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch;background:none!important;border:0!important;}
  html.design-lab #catOverlay #catIconPick button{aspect-ratio:1/1;width:100%;height:auto;min-height:0;padding:0;border-radius:13px!important;border:1.5px solid transparent!important;background:var(--input-bg)!important;color:var(--text)!important;font-size:19px!important;display:flex!important;align-items:center;justify-content:center;}
  html.design-lab #catOverlay #catIconPick button.sel{border-color:#305bf3!important;background:color-mix(in srgb,#305bf3 18%,var(--input-bg))!important;color:#5a8de1!important;}
  html.design-lab #catOverlay #catIconPick button:active{transform:scale(.94);}
}

/* ===== Celular: Novo lançamento em página de tela cheia, valor em destaque ===== */
@media(max-width:900px){
  html.design-lab #txOverlay{align-items:stretch!important;padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html.design-lab #txOverlay .modal{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;box-shadow:none!important;padding:0 16px calc(100px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;transform:none!important;transition:none!important;flex-direction:column!important;-webkit-overflow-scrolling:touch;}
  html.design-lab #txOverlay .modal::before{display:none!important;}
  html.design-lab #txOverlay .modal>*{flex:0 0 auto;}
  html.design-lab #txOverlay .modal>h2{order:0;position:sticky!important;top:0;z-index:5;padding:calc(28px + env(safe-area-inset-top)) 16px 12px 56px!important;background:var(--bg)!important;border-bottom:1px solid var(--app-line)!important;font-weight:700!important;}

  /* Tipo: 4 blocos com ícone em cima */
  html.design-lab #txOverlay .type-toggle{order:1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;width:100%!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;}
  html.design-lab #txOverlay .type-toggle button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:0!important;padding:8px 2px!important;border-radius:16px!important;border:1.5px solid var(--app-line)!important;background:var(--app-surface)!important;color:var(--muted)!important;font-weight:700!important;box-shadow:none!important;white-space:nowrap;}
  html.design-lab #txOverlay .type-toggle button i{font-size:18px!important;}
  html.design-lab #txOverlay .type-toggle button.act-in{background:color-mix(in srgb,var(--income) 16%,var(--app-surface))!important;border-color:var(--income)!important;color:var(--income)!important;}
  html.design-lab #txOverlay .type-toggle button.act-out{background:color-mix(in srgb,var(--expense) 16%,var(--app-surface))!important;border-color:var(--expense)!important;color:var(--expense)!important;}
  html.design-lab #txOverlay .type-toggle button.act-cc{background:color-mix(in srgb,#e2a83d 16%,var(--app-surface))!important;border-color:#e2a83d!important;color:#e2a83d!important;}
  html.design-lab #txOverlay .type-toggle button.act-tr{background:color-mix(in srgb,#5a8de1 16%,var(--app-surface))!important;border-color:#5a8de1!important;color:#5a8de1!important;}

  /* Valor em destaque */
  html.design-lab #txOverlay .row2:has(#txAmount){display:contents!important;}
  html.design-lab #txOverlay .field:has(#txAmount){order:2;text-align:center;}
  html.design-lab #txOverlay .field:has(#txAmount)>label{text-align:center;}
  html.design-lab #txOverlay #txAmount{text-align:center!important;font-weight:700!important;letter-spacing:-1px;border:0!important;background:none!important;padding:0!important;box-shadow:none!important;color:var(--text);}
  html.design-lab #txOverlay .modal:has(#tglIn.act-in) #txAmount{color:var(--income)!important;}
  html.design-lab #txOverlay .modal:has(#tglOut.act-out) #txAmount{color:var(--expense)!important;}
  html.design-lab #txOverlay #txBalanceHint{color:var(--muted)!important;}

  /* Campos em cartões, na ordem natural de preenchimento */
  html.design-lab #txOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);margin:0!important;}
  html.design-lab #txOverlay .field>label{display:block;margin:0 0 6px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #txOverlay .field :is(input,select,textarea):not(#txAmount){background:none!important;border:0!important;padding:0!important;box-shadow:none!important;}
  html.design-lab #txOverlay .field:has(#txDesc){order:4;}
  html.design-lab #txOverlay #catRow{display:grid!important;}
  html.design-lab #txOverlay #transferFields .row2{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;}
  html.design-lab #txOverlay #installField{display:grid!important;}
  html.design-lab #txOverlay .hidden{display:none!important;}

  /* Rodapé fixo */
  html.design-lab #txOverlay .modal-actions{order:20;position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:6;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;background:var(--bg)!important;border-top:1px solid var(--app-line)!important;display:flex!important;gap:10px!important;}
  html.design-lab #txOverlay .modal-actions .btn{flex:1!important;}
}
@media(max-width:900px){
  html.design-lab #txOverlay .type-toggle button{font-size:11.5px!important;letter-spacing:-.2px;}
}
@media(max-width:900px){
  /* janela (não página): sem seta, título alinhado normal, mais compacta */
  html.design-lab #txOverlay .modal{display:grid!important;grid-auto-rows:min-content;align-content:start;gap:10px!important;animation:none!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;}
  html.design-lab #txOverlay.open .modal{animation:none!important;}
  html.design-lab #txOverlay .modal>*{grid-column:1/-1;}
  html.design-lab #txOverlay .modal>h2{padding:calc(28px + env(safe-area-inset-top)) 16px 12px!important;font-size:20px!important;margin:0 -16px 2px!important;}
  html.design-lab #txOverlay .type-toggle button{height:58px!important;gap:4px!important;}
  html.design-lab #txOverlay .field:has(#txAmount){padding:12px 16px 10px!important;border-radius:20px!important;}
  html.design-lab #txOverlay #txAmount{font-size:38px!important;min-height:50px!important;height:50px;}
  html.design-lab #txOverlay .field{padding:9px 14px 11px!important;border-radius:16px!important;}
  html.design-lab #txOverlay .field>label{margin-bottom:3px!important;font-size:11px!important;}
  html.design-lab #txOverlay .field :is(input,select,textarea):not(#txAmount){font-size:16px!important;min-height:26px!important;}
  html.design-lab #txOverlay .field:has(#txDate){grid-column:1!important;}
  html.design-lab #txOverlay #accountField:not(.hidden),html.design-lab #txOverlay #cardField:not(.hidden){grid-column:2!important;}
  html.design-lab #txOverlay #installField.hidden,html.design-lab #txOverlay #cardField.hidden,html.design-lab #txOverlay #accountField.hidden,html.design-lab #txOverlay #transferFields.hidden,html.design-lab #txOverlay #catRow.hidden{display:none!important;}
  html.design-lab #txOverlay #installField:not(.hidden){display:grid!important;grid-template-columns:1fr 1fr;gap:10px;}
  html.design-lab #txOverlay #catRow{gap:10px!important;}
}
@media(max-width:900px){
  html.design-lab #txOverlay .field:has(#txAmount){grid-column:1/-1!important;}
  html.design-lab #txOverlay .field:has(#txDesc){grid-column:1/-1!important;}
  html.design-lab #txOverlay .field:has(#txDate){order:5!important;}
  html.design-lab #txOverlay #accountField,html.design-lab #txOverlay #cardField{order:5!important;}
  html.design-lab #txOverlay #catRow{order:6!important;}
  html.design-lab #txOverlay #transferFields{order:6!important;}
  html.design-lab #txOverlay #installField{order:7!important;}
}

/* ===== Novo lançamento: layout estável ao trocar o tipo (mesma grade, sem saltos) ===== */
@media(max-width:900px){
  /* mesma altura de dica em todos os tipos (só some o texto, o espaço fica) */
  html.design-lab #txOverlay #txBalanceHint,html.design-lab #txOverlay #txBalanceHint.hidden{display:block!important;order:3;}
  html.design-lab #txOverlay #txBalanceHint.hidden{visibility:hidden;}
  /* transferência usa a mesma grade: Data | Da conta  /  Para a conta | (vazio) */
  html.design-lab #txOverlay #transferFields:not(.hidden),html.design-lab #txOverlay #transferFields:not(.hidden) .row2{display:contents!important;}
  html.design-lab #txOverlay #transferFields .field:first-child{order:5!important;grid-column:2!important;}
  html.design-lab #txOverlay #transferFields .field:last-child{order:6!important;grid-column:1!important;}
  /* todo campo da grade com a mesma altura e o mesmo visual (selects sem caixa interna) */
  html.design-lab #txOverlay .field{min-height:76px;display:flex;flex-direction:column;justify-content:center;}
  html.design-lab #txOverlay .field:has(#txAmount){min-height:0;}
  html.design-lab #txOverlay .fm-select-wrap,html.design-lab #txOverlay .field select{width:100%;}
  html.design-lab #txOverlay .fm-select-trigger{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;min-height:26px!important;height:auto!important;font-size:16px!important;font-weight:600;}
  html.design-lab #txOverlay .fm-select-trigger .fm-select-icon{color:#5a8de1;}
  html.design-lab #txOverlay .field input[type="date"]{font-weight:600;}
  html.design-lab #txOverlay #installField{gap:10px!important;}
}
@media(max-width:900px){
  html.design-lab #txOverlay .modal{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html.design-lab #txOverlay #txBalanceHint,html.design-lab #txOverlay #txBalanceHint.hidden{height:20px!important;min-height:20px!important;line-height:20px!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px!important;}
  html.design-lab #txOverlay .field:not(:has(#txAmount)),html.design-lab #txOverlay #installField .field{height:80px!important;min-height:80px!important;box-sizing:border-box;overflow:hidden;}
  html.design-lab #txOverlay #catRow,html.design-lab #txOverlay #installField{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:900px){
  html.design-lab #txOverlay #installField .field .hint,html.design-lab #txOverlay #txInstallHint{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;font-size:13px!important;font-weight:600!important;color:var(--text)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  html.design-lab #txOverlay #txInstallHint b,html.design-lab #txOverlay #txInstallHint strong{color:#5a8de1;}
}
@media(max-width:900px){
  html.design-lab #txOverlay #txBalanceHint{padding:0!important;margin:0!important;box-sizing:border-box;text-align:center;}
  /* só em Transferência: Data em linha própria e as duas contas lado a lado */
  html.design-lab #txOverlay .modal:has(#tglTr.act-tr) .field:has(#txDate){grid-column:1/-1!important;order:5!important;}
  html.design-lab #txOverlay .modal:has(#tglTr.act-tr) #transferFields .field:first-child{grid-column:1!important;order:6!important;}
  html.design-lab #txOverlay .modal:has(#tglTr.act-tr) #transferFields .field:last-child{grid-column:2!important;order:6!important;}
}
@media(max-width:900px){
  /* fonte dos VALORES dos campos menor (títulos dos campos não mudam) */
  html.design-lab #txOverlay .field:not(:has(#txAmount)):not(:has(#txDesc)) :is(input,select,.fm-select-trigger,.fm-select-label){font-size:14px!important;}
  html.design-lab #txOverlay .field:not(:has(#txAmount)):not(:has(#txDesc)) .fm-select-icon{font-size:14px!important;}
  html.design-lab #txOverlay .field input[type="date"]{font-size:14px!important;}
  html.design-lab #txOverlay #txInstall{font-size:14px!important;font-weight:600;height:26px!important;min-height:26px!important;line-height:26px;padding:0!important;}
  html.design-lab #txOverlay #txInstallHint{font-size:12.5px!important;}
}
@media(max-width:900px){
  /* rótulos sempre na mesma altura; valor logo abaixo */
  html.design-lab #txOverlay .field:not(:has(#txAmount)),html.design-lab #txOverlay #installField .field{justify-content:flex-start!important;padding-top:16px!important;}
  html.design-lab #txOverlay .field:not(:has(#txAmount))>label{margin-bottom:8px!important;line-height:1!important;}
  html.design-lab #txOverlay .field :is(input,select,.fm-select-trigger,.fm-select-wrap){min-height:24px!important;height:24px!important;line-height:24px;}
  html.design-lab #txOverlay #installField .field .hint,html.design-lab #txOverlay #txInstallHint{height:auto!important;line-height:1.25!important;}
  html.design-lab #txOverlay .field:has(#txDesc) input{height:28px!important;}
}

/* ===== Celular: tipografia padronizada em todas as páginas de Ferramentas ===== */
@media(max-width:900px){
  html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .detail-topbar h2,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .modal>h2{font-size:20px!important;font-weight:700!important;}
  html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .mais-nav-row b,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .mais-nav-row b,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .help-row-copy b,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .help-row-copy b,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .preference-copy b,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .preference-copy b,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .preference-setting-copy b,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .preference-setting-copy b,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .report-option b,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .report-option b,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .account-security-title strong,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .account-security-title strong,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .art-step b,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .art-step b,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .appearance-section-title b,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .appearance-section-title b{font-size:15px!important;font-weight:600!important;}
  html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .mais-nav-row small,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .mais-nav-row small,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .help-row-copy small,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .help-row-copy small,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .preference-copy small,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .preference-copy small,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .preference-setting-copy small,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .preference-setting-copy small,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .report-option small,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .report-option small,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .account-security-title small,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .account-security-title small,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .tool-modal-intro,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .tool-modal-intro,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .hint,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .hint,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .art-step p,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .art-step p,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .art-callout,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .art-callout,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .art-tip,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .art-tip,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .art-example p,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .art-example p,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .help-hero small,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .help-hero small,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .pw-steps p,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .pw-steps p,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .pw-tips ul,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .pw-tips ul,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .appearance-info,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .appearance-info,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .account-security-intro,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .account-security-intro,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .data-integrity-card,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .data-integrity-card{font-size:12.5px!important;line-height:1.45!important;}
  html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .mais-nav-group-label,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .mais-nav-group-label,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .help-group-title-m,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .help-group-title-m,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .help-group-title,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .help-group-title,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .pw-label,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .pw-label,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .field>label,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .field>label{font-size:11.5px!important;}
  html.design-lab #tools .mais-profile-row .profile-identity strong,html.design-lab #profile-page .profile-hub-info strong{font-size:20px!important;}
  html.design-lab #tools .mais-profile-row .profile-identity span,html.design-lab #profile-page .profile-hub-info small{font-size:12.5px!important;}
  html.design-lab .help-hero b{font-size:16px!important;}
  html.design-lab .art-hero h3{font-size:20px!important;}
  html.design-lab .art-hero p{font-size:13px!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-card h2{font-size:22px!important;}
  html.design-lab :is(#account-email-page,#account-password-page) .account-action-card>p{font-size:13px!important;}
  html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) .pw-title,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) .pw-title{font-size:15px!important;}
  html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) input,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) input,html.design-lab :is(#tools,#profile-page,#account-security-page,#data-hub-page,#whatsapp-settings-page,#google-calendar-settings-page,#gmail-settings-page,#pluggy-settings-page,#notification-settings-page,#help-page,#help-article-page,#account-email-page,#account-password-page) select,html.design-lab :is(#appearanceOverlay,#financialPreferencesOverlay,#cloudVersionsOverlay,#profileEditOverlay,#mobileEmailOverlay,#mobilePasswordOverlay,#dashCfgOverlay) select{font-size:15px!important;}
}

/* ===== Celular: Nova conta / Editar conta ===== */
.acc-preview,.acc-type-chips{display:none;}
@media(max-width:900px){
  html.design-lab #accOverlay .modal{padding:0 16px calc(96px + env(safe-area-inset-bottom))!important;flex-direction:column!important;gap:12px;}
  html.design-lab #accOverlay .modal>*{flex:0 0 auto;}
  html.design-lab #accOverlay .modal>h2{padding:18px 16px 12px!important;}
  /* prévia ao vivo */
  html.design-lab #accOverlay .acc-preview{--acc-color:#0066b3;display:flex!important;align-items:center;gap:14px;padding:18px;border-radius:22px;background:var(--acc-color);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--acc-color) 28%,transparent);}
  html.design-lab #accOverlay .acc-preview-badge{flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--acc-color);overflow:hidden;padding:7px;box-sizing:border-box;}
  html.design-lab #accOverlay .acc-preview-badge img{width:100%;height:100%;object-fit:contain;}
  html.design-lab #accOverlay .acc-preview-copy{flex:1;min-width:0;}
  html.design-lab #accOverlay .acc-preview-copy b{display:block;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
  html.design-lab #accOverlay .acc-preview-copy small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.8);}
  html.design-lab #accOverlay .acc-preview strong{font-size:17px;font-weight:700;white-space:nowrap;color:#fff;}
  /* campos em cartões */
  html.design-lab #accOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:14px 16px 16px;margin:0!important;}
  html.design-lab #accOverlay .field>label,html.design-lab #accOverlay .icon-picker-header label{display:block;margin:0 0 8px!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #accOverlay #accName{min-height:46px!important;border-radius:13px!important;font-size:16px!important;}
  html.design-lab #accOverlay .acc-balance-field input{min-height:52px!important;border-radius:13px!important;font-size:22px!important;font-weight:700!important;}
  /* tipo em botões */
  html.design-lab #accOverlay .acc-type-chips{display:flex!important;flex-wrap:nowrap!important;gap:8px;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;touch-action:pan-x!important;padding:2px 2px 4px;margin:0 -2px;scrollbar-width:none;}
  html.design-lab #accOverlay .acc-type-chips::-webkit-scrollbar{display:none;}
  html.design-lab #accOverlay .acc-type-chips button{flex:0 0 auto;white-space:nowrap;height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--app-line);background:var(--input-bg);color:var(--muted);font-size:14px;font-weight:700;scroll-snap-align:start;}
  html.design-lab #accOverlay .acc-type-chips button.active{border-color:#305bf3;background:color-mix(in srgb,#305bf3 16%,var(--input-bg));color:#5a8de1;}
  html.design-lab #accOverlay .acc-type-field #accType,html.design-lab #accOverlay .acc-type-field .fm-select-wrap{display:none!important;}
  /* ícone: prévia + alterar */
  html.design-lab #accOverlay .icon-picker-header{display:flex!important;align-items:center!important;gap:14px!important;margin:0!important;}
  html.design-lab #accOverlay .icon-preview{display:flex!important;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.94);color:#305bf3;font-size:24px;overflow:hidden;padding:8px;box-sizing:border-box;}
  html.design-lab #accOverlay .icon-preview img{width:100%;height:100%;object-fit:contain;}
  html.design-lab #accOverlay .icon-picker-header label{flex:1;margin:0!important;align-self:center!important;}
  html.design-lab #accOverlay .icon-picker-header .icon-picker-toggle{flex:0 0 auto;height:40px!important;min-height:40px!important;padding:0 16px!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important;display:inline-flex!important;align-items:center;gap:8px;}
  html.design-lab #accOverlay #accEmojiPickWrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--app-line);}
  html.design-lab #accOverlay #accEmojiPick{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;max-height:280px;overflow-y:auto;background:none!important;border:0!important;padding:2px;}
  html.design-lab #accOverlay #accEmojiPick button{aspect-ratio:1/1;width:100%;height:auto;padding:8px;border-radius:13px!important;border:1.5px solid transparent!important;background:rgba(255,255,255,.94)!important;display:flex!important;align-items:center;justify-content:center;font-size:20px!important;color:#305bf3!important;}
  html.design-lab #accOverlay #accEmojiPick button img{width:100%;height:100%;object-fit:contain;}
  html.design-lab #accOverlay #accEmojiPick button.sel{border-color:#305bf3!important;box-shadow:0 0 0 2px color-mix(in srgb,#305bf3 35%,transparent);}
  /* cores em círculos */
  /* rodapé fixo */
  html.design-lab #accOverlay .modal-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;}
}
@media(max-width:900px){
  html.design-lab #accOverlay .modal{padding-bottom:0!important;}
}

/* ===== Celular: Novo/Editar cartão — prévia ao vivo, sem cor manual ===== */
.cc-preview{display:none;}
@media(max-width:900px){
  html.design-lab #cardOverlay .modal{padding:0 16px calc(96px + env(safe-area-inset-bottom))!important;flex-direction:column!important;gap:12px;}
  html.design-lab #cardOverlay .modal>*{flex:0 0 auto;}
  html.design-lab #cardOverlay .modal>h2{padding:18px 16px 12px!important;}
  html.design-lab #cardOverlay .cc-preview{--cc-color:#820ad1;display:flex!important;align-items:center;gap:14px;padding:18px;border-radius:22px;background:var(--cc-color);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--cc-color) 28%,transparent);}
  html.design-lab #cardOverlay .cc-preview-badge{flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--cc-color);overflow:hidden;padding:7px;box-sizing:border-box;}
  html.design-lab #cardOverlay .cc-preview-badge img{width:100%;height:100%;object-fit:contain;}
  html.design-lab #cardOverlay .cc-preview-copy{flex:1;min-width:0;}
  html.design-lab #cardOverlay .cc-preview-copy b{display:block;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
  html.design-lab #cardOverlay .cc-preview-copy small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.85);}
  html.design-lab #cardOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:14px 16px 16px;margin:0!important;}
  html.design-lab #cardOverlay .field>label,html.design-lab #cardOverlay .icon-picker-header label{display:block;margin:0 0 8px!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #cardOverlay #ccName{min-height:46px!important;border-radius:13px!important;font-size:16px!important;}
  html.design-lab #cardOverlay #ccLimit{min-height:46px!important;border-radius:13px!important;font-size:16px!important;}
  html.design-lab #cardOverlay .row2{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;}
  html.design-lab #cardOverlay .row2 input{min-height:46px!important;border-radius:13px!important;font-size:16px!important;}
  html.design-lab #cardOverlay .icon-picker-header{display:flex!important;align-items:center!important;gap:14px!important;margin:0!important;}
  html.design-lab #cardOverlay .icon-preview{display:flex!important;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.94);color:#305bf3;font-size:24px;overflow:hidden;padding:8px;box-sizing:border-box;border:0;cursor:pointer;}
  html.design-lab #cardOverlay .icon-preview img{width:100%;height:100%;object-fit:contain;}
  html.design-lab #cardOverlay .icon-preview:active{transform:scale(.95);}
  html.design-lab #cardOverlay .icon-picker-header label{flex:1;margin:0!important;align-self:center!important;}
  html.design-lab #cardOverlay .icon-picker-header .icon-picker-toggle{flex:0 0 auto;height:40px!important;min-height:40px!important;padding:0 16px!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important;display:inline-flex!important;align-items:center;gap:8px;}
  html.design-lab #cardOverlay #ccIconPickWrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--app-line);}
  html.design-lab #cardOverlay #ccIconPick{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;max-height:280px;overflow-y:auto;background:none!important;border:0!important;padding:2px;}
  html.design-lab #cardOverlay #ccIconPick button{aspect-ratio:1/1;width:100%;height:auto;padding:8px;border-radius:13px!important;border:1.5px solid transparent!important;background:rgba(255,255,255,.94)!important;display:flex!important;align-items:center;justify-content:center;font-size:20px!important;color:#305bf3!important;}
  html.design-lab #cardOverlay #ccIconPick button img{width:100%;height:100%;object-fit:contain;}
  html.design-lab #cardOverlay #ccIconPick button.sel{border-color:#305bf3!important;box-shadow:0 0 0 2px color-mix(in srgb,#305bf3 35%,transparent);}
  html.design-lab #cardOverlay .modal-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;}
}
/* Trava definitiva: o antigo seletor de cor (agora só existe como <select> nativo escondido) nunca deve reaparecer, mesmo se alguma regra antiga usar !important. */
#accColorPick.hidden,#ccColorPick.hidden{display:none!important;}

/* ===== Nova/Editar conta e cartão: janela ancorada embaixo (mesmo padrão robusto de "Sair da conta"), pra rolar direito no celular ===== */

/* ===== Nova/Editar conta, cartão, caixinha e investimento: MESMO padrão de
   página cheia que já funciona (Editar perfil/categoria) — sem depender de
   dvh, rolagem garantida ===== */
@media(max-width:900px){
  html.design-lab #accOverlay,html.design-lab #cardOverlay,html.design-lab #vaultOverlay,html.design-lab #invOverlay,html.design-lab #recOverlay,html.design-lab #billOverlay,html.design-lab #budgetOverlay{align-items:stretch!important;padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html.design-lab #accOverlay .modal,html.design-lab #cardOverlay .modal,html.design-lab #vaultOverlay .modal,html.design-lab #invOverlay .modal,html.design-lab #recOverlay .modal,html.design-lab #billOverlay .modal,html.design-lab #budgetOverlay .modal{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;box-shadow:none!important;padding:0 16px calc(100px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;touch-action:pan-y!important;transform:none!important;transition:none!important;display:block!important;}
  html.design-lab #accOverlay .modal::before,html.design-lab #cardOverlay .modal::before,html.design-lab #vaultOverlay .modal::before,html.design-lab #invOverlay .modal::before,html.design-lab #recOverlay .modal::before,html.design-lab #billOverlay .modal::before,html.design-lab #budgetOverlay .modal::before{display:none!important;}
  /* BUG REAL: o cabeçalho fixo só pintava fundo sólido até a própria borda —
     os 12px de espaço até o próximo cartão eram uma margem (vazia, sem
     fundo), não parte da caixa do cabeçalho. Ao rolar, o topo arredondado
     (com sombra) do cartão de prévia colorido passava por baixo dessa
     margem e "vazava" por trás do cabeçalho, parecendo borrado. Agora esse
     espaço vira padding (faz parte da própria caixa pintada do cabeçalho),
     então nada por trás consegue aparecer ali. */
  html.design-lab #accOverlay .modal>h2,html.design-lab #cardOverlay .modal>h2,html.design-lab #vaultOverlay .modal>h2,html.design-lab #invOverlay .modal>h2,html.design-lab #recOverlay .modal>h2,html.design-lab #billOverlay .modal>h2,html.design-lab #budgetOverlay .modal>h2{position:sticky!important;top:0;z-index:5;margin:0 -16px 0!important;padding:calc(28px + env(safe-area-inset-top)) 16px 24px!important;background:var(--bg)!important;border-bottom:1px solid var(--app-line)!important;font-size:22px!important;font-weight:700!important;}
  html.design-lab #accOverlay .acc-preview,html.design-lab #cardOverlay .cc-preview,html.design-lab #vaultOverlay .vault-preview,html.design-lab #invOverlay .inv-preview,html.design-lab #recOverlay .rec-preview,html.design-lab #accOverlay .field,html.design-lab #accOverlay .acc-type-field,html.design-lab #cardOverlay .field,html.design-lab #vaultOverlay .field,html.design-lab #invOverlay .field,html.design-lab #recOverlay .field,html.design-lab #recOverlay .type-toggle,html.design-lab #vaultOverlay>h2:not(.modal>h2),html.design-lab #invOverlay>h2:not(.modal>h2),html.design-lab #invOverlay .row2{margin-bottom:12px!important;}
  html.design-lab #accOverlay .modal-actions,html.design-lab #cardOverlay .modal-actions,html.design-lab #vaultOverlay .modal-actions,html.design-lab #invOverlay .modal-actions,html.design-lab #recOverlay .modal-actions,html.design-lab #billOverlay .modal-actions,html.design-lab #budgetOverlay .modal-actions{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:6;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;background:var(--bg)!important;border-top:1px solid var(--app-line)!important;display:flex!important;gap:10px!important;}
  html.design-lab #accOverlay .modal-actions .btn,html.design-lab #cardOverlay .modal-actions .btn,html.design-lab #vaultOverlay .modal-actions .btn,html.design-lab #invOverlay .modal-actions .btn,html.design-lab #recOverlay .modal-actions .btn,html.design-lab #billOverlay .modal-actions .btn,html.design-lab #budgetOverlay .modal-actions .btn{flex:1!important;}
  html.design-lab #vaultOverlay .modal,html.design-lab #invOverlay .modal,html.design-lab #recOverlay .modal{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;}
}

/* ===== Celular: Nova/Editar caixinha e Novo/Editar investimento — prévia ao
   vivo, mesma ideia de Nova conta. Sem escolha manual de cor/ícone (isso era
   do modelo antigo): na caixinha a cor acompanha o ícone escolhido
   (vaultColorForIcon, app-ui.js); no investimento, ícone e cor acompanham o
   Tipo escolhido (invTypeIcon em app-accounts.js, categoryColor em app-budget.js). ===== */
.vault-preview,.inv-preview{display:none;}
@media(max-width:900px){
  html.design-lab #vaultOverlay .vault-preview,html.design-lab #invOverlay .inv-preview{--vault-color:#f39c12;display:flex!important;align-items:center;gap:14px;padding:18px;border-radius:22px;background:var(--vault-color);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--vault-color) 28%,transparent);}
  html.design-lab #vaultOverlay .vault-preview-badge,html.design-lab #invOverlay .inv-preview-badge{flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--vault-color);overflow:hidden;padding:7px;box-sizing:border-box;}
  html.design-lab #vaultOverlay .vault-preview-copy,html.design-lab #invOverlay .inv-preview-copy{flex:1;min-width:0;}
  html.design-lab #vaultOverlay .vault-preview-copy b,html.design-lab #invOverlay .inv-preview-copy b{display:block;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
  html.design-lab #vaultOverlay .vault-preview-copy small,html.design-lab #invOverlay .inv-preview-copy small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.85);}
  html.design-lab #invOverlay .inv-preview strong{font-size:17px;font-weight:700;white-space:nowrap;color:#fff;}
  html.design-lab #vaultOverlay .field,html.design-lab #invOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:14px 16px 16px;}
  html.design-lab #vaultOverlay .field>label,html.design-lab #invOverlay .field>label{display:block;margin:0 0 8px!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #vaultOverlay #vaultName,html.design-lab #vaultOverlay #vaultGoal,html.design-lab #invOverlay .field input,html.design-lab #invOverlay .field select{min-height:46px!important;border-radius:13px!important;font-size:16px!important;}
  html.design-lab #vaultOverlay #vaultGoal{font-size:22px!important;font-weight:700!important;}
  html.design-lab #invOverlay .row2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;align-items:start!important;}
  html.design-lab #invOverlay .row2 .field{margin-bottom:0!important;display:flex!important;flex-direction:column!important;}
  /* Campos lado a lado alinhados de verdade: o rótulo reserva sempre a mesma
     altura (2 linhas, mesmo quando o texto cabe numa só), então os dois
     campos da linha começam exatamente na mesma altura — não depende mais do
     rótulo de cada lado ter o mesmo tamanho de texto. */
  html.design-lab #invOverlay .row2 .field>label{min-height:28px!important;line-height:1.3!important;display:flex!important;align-items:flex-end!important;}
  html.design-lab #vaultOverlay .icon-picker-header{display:flex!important;align-items:center!important;gap:14px!important;margin:0!important;}
  html.design-lab #vaultOverlay .icon-preview{display:flex!important;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:var(--app-surface-soft);color:var(--vault-color,#f39c12);font-size:24px;overflow:hidden;padding:8px;box-sizing:border-box;}
  html.design-lab #vaultOverlay .icon-picker-header label{flex:1;margin:0!important;align-self:center!important;text-transform:none!important;font-size:15px!important;font-weight:600!important;color:var(--text)!important;letter-spacing:0!important;}
  html.design-lab #vaultOverlay .icon-picker-header .icon-picker-toggle{flex:0 0 auto;height:40px!important;min-height:40px!important;padding:0 16px!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important;display:inline-flex!important;align-items:center;gap:8px;}
  html.design-lab #vaultOverlay #vaultIconPickWrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--app-line);}
  html.design-lab #vaultOverlay #vaultIconPick{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;max-height:240px;overflow-y:auto;background:none!important;border:0!important;padding:2px;}
  html.design-lab #vaultOverlay #vaultIconPick button{aspect-ratio:1/1;width:100%;height:auto;padding:8px;border-radius:13px!important;border:1.5px solid var(--app-line)!important;background:var(--app-surface-soft)!important;display:flex!important;align-items:center;justify-content:center;font-size:18px!important;color:var(--text-2)!important;}
  html.design-lab #vaultOverlay #vaultIconPick button.sel{border-color:var(--vault-color,#305bf3)!important;color:var(--vault-color,#305bf3)!important;background:color-mix(in srgb,var(--vault-color,#305bf3) 14%,var(--app-surface-soft))!important;}
}

/* ===== Celular: Nova/Editar assinatura — mesmo padrão de prévia ao vivo de
   Nova conta/caixinha/investimento (updateRecPreview, app-tx-modal.js): cor
   acompanha o tipo (Despesa/Cartão/Receita), campos em cartões, tipo em
   blocos com ícone em cima (mesma ideia do Novo lançamento). ===== */
.rec-preview{display:none;}
@media(max-width:900px){
  html.design-lab #recOverlay .modal{--rec-color:var(--expense);}
  /* Sombra mais curta (era 24px de raio) — a versão grande subia o
     suficiente pra "vazar" por trás do título fixo logo acima quando a
     tela rola, parecendo um borrão colado no cabeçalho. */
  html.design-lab #recOverlay .rec-preview{display:flex!important;align-items:center;gap:14px;padding:18px;border-radius:22px;background:var(--rec-color);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--rec-color) 28%,transparent);}
  html.design-lab #recOverlay .rec-preview-badge{flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--rec-color);overflow:hidden;padding:7px;box-sizing:border-box;}
  html.design-lab #recOverlay .rec-preview-copy{flex:1;min-width:0;}
  html.design-lab #recOverlay .rec-preview-copy b{display:block;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
  html.design-lab #recOverlay .rec-preview-copy small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.85);}
  html.design-lab #recOverlay .rec-preview strong{font-size:17px;font-weight:700;white-space:nowrap;color:#fff;}

  /* Tipo: blocos com ícone em cima, mesma ideia do Novo lançamento */
  html.design-lab #recOverlay .type-toggle{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;}
  html.design-lab #recOverlay:has(#rTglIn.hidden) .type-toggle{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html.design-lab #recOverlay .type-toggle button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;height:68px!important;min-height:0!important;padding:8px 2px!important;border-radius:16px!important;border:1.5px solid var(--app-line)!important;background:var(--app-surface)!important;color:var(--muted)!important;font-size:12px!important;font-weight:700!important;box-shadow:none!important;white-space:nowrap;}
  html.design-lab #recOverlay .type-toggle button i{font-size:18px!important;}
  html.design-lab #recOverlay .type-toggle button.act-in{background:color-mix(in srgb,var(--income) 16%,var(--app-surface))!important;border-color:var(--income)!important;color:var(--income)!important;}
  html.design-lab #recOverlay .type-toggle button.act-out{background:color-mix(in srgb,var(--expense) 16%,var(--app-surface))!important;border-color:var(--expense)!important;color:var(--expense)!important;}
  html.design-lab #recOverlay .type-toggle button.act-cc{background:color-mix(in srgb,#e2a83d 16%,var(--app-surface))!important;border-color:#e2a83d!important;color:#e2a83d!important;}

  /* Campos em cartões, valor em destaque. BUG REAL: o "margin:0" aqui
     zerava o espaço DEPOIS de qualquer campo solto (Descrição, Subcategoria,
     Cartão) — só as duplas dentro de .row2 tinham respiro (12px, vindo da
     margem do próprio .row2), então Descrição colava direto na dupla
     Valor/Dia e Subcategoria colava no Cartão, com espaçamento inconsistente
     entre um cartão e outro. Agora todo cartão (solto ou dentro de .row2)
     usa o mesmo respiro de 16px — só o campo QUE ESTÁ dentro de .row2 fica
     sem margem própria (o .row2 já dá o espaço pra ele). */
  html.design-lab #recOverlay .rec-preview,html.design-lab #recOverlay .type-toggle{margin-bottom:16px!important;}
  html.design-lab #recOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:14px 16px 16px;margin:0 0 16px!important;}
  html.design-lab #recOverlay .field>label{display:block;margin:0 0 8px!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #recOverlay .field :is(input,select){min-height:26px!important;font-size:16px!important;}
  html.design-lab #recOverlay #recDesc{min-height:46px!important;border-radius:13px!important;font-size:16px!important;}
  html.design-lab #recOverlay #recAmount{font-size:22px!important;font-weight:700!important;color:var(--rec-color,var(--expense))!important;}
  html.design-lab #recOverlay .row2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:16px!important;}
  html.design-lab #recOverlay .row2 .field{margin-bottom:0!important;}
  /* Quando o cartão some (tipo Cartão) só sobra Categoria — ocupa a linha toda em vez de deixar buraco */
  html.design-lab #recOverlay .row2:has(#recAccField.hidden) .field:not(.hidden){grid-column:1/-1!important;}
  html.design-lab #recOverlay .modal-actions{margin-top:8px!important;}
}

/* ===== Celular: Novo compromisso e Nova meta de orçamento — mesmo padrão
   da Nova assinatura: prévia ao vivo no topo (updateBillPreview em
   app-bills.js, updateBudPreview em app-category-forms.js), campos em
   cartões, tipo em blocos com ícone em cima. ===== */
.bill-preview,.bud-preview{display:none;}
@media(max-width:900px){
  html.design-lab #billOverlay .modal{--bill-color:var(--expense);}
  html.design-lab #budgetOverlay .modal{--bill-color:#305bf3;}
  html.design-lab :is(#billOverlay .bill-preview,#budgetOverlay .bud-preview){display:flex!important;align-items:center;gap:14px;padding:18px;border-radius:22px;background:var(--bill-color);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--bill-color) 28%,transparent);margin:16px 0!important;}
  html.design-lab :is(.bill-preview-badge,.bud-preview-badge){flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--bill-color);overflow:hidden;padding:7px;box-sizing:border-box;}
  html.design-lab :is(.bill-preview-copy,.bud-preview-copy){flex:1;min-width:0;}
  html.design-lab :is(.bill-preview-copy,.bud-preview-copy) b{display:block;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
  html.design-lab :is(.bill-preview-copy,.bud-preview-copy) small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.85);}
  html.design-lab :is(.bill-preview,.bud-preview) strong{font-size:17px;font-weight:700;white-space:nowrap;color:#fff;}

  html.design-lab #billOverlay .type-toggle{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:none!important;padding:0!important;margin:0 0 16px!important;background:none!important;border:0!important;box-shadow:none!important;}
  html.design-lab #billOverlay .type-toggle button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;height:68px!important;min-height:0!important;padding:8px 2px!important;border-radius:16px!important;border:1.5px solid var(--app-line)!important;background:var(--app-surface)!important;color:var(--muted)!important;font-size:12px!important;font-weight:700!important;box-shadow:none!important;white-space:nowrap;}
  html.design-lab #billOverlay .type-toggle button i{font-size:18px!important;}
  html.design-lab #billOverlay .type-toggle button#bTglPay.act-out{background:color-mix(in srgb,var(--expense) 16%,var(--app-surface))!important;border-color:var(--expense)!important;color:var(--expense)!important;}
  html.design-lab #billOverlay .type-toggle button#bTglRec.act-in{background:color-mix(in srgb,var(--income) 16%,var(--app-surface))!important;border-color:var(--income)!important;color:var(--income)!important;}

  html.design-lab :is(#billOverlay,#budgetOverlay) .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:14px 16px 16px;margin:0 0 16px!important;}
  html.design-lab :is(#billOverlay,#budgetOverlay) .field>label{display:block;margin:0 0 8px!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab :is(#billOverlay,#budgetOverlay) .field :is(input,select){min-height:26px!important;font-size:16px!important;}
  html.design-lab #billOverlay #billDesc{min-height:46px!important;border-radius:13px!important;}
  html.design-lab #billOverlay #billDue{font-size:15px!important;padding-left:10px!important;padding-right:6px!important;min-width:0;width:100%;}
  html.design-lab #billOverlay #billAmount,html.design-lab #budgetOverlay #budAmount{font-size:22px!important;font-weight:700!important;color:var(--bill-color)!important;}
  html.design-lab #billOverlay .row2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:16px!important;}
  html.design-lab #billOverlay .row2 .field{margin-bottom:0!important;}
  /* Editando: "Repetir por quantos meses" some — Conta ocupa a linha toda. */
  html.design-lab #billOverlay .row2:has(#billRepeatField.hidden) .field:not(.hidden){grid-column:1/-1!important;}
  html.design-lab #billOverlay .modal>.hint{margin:0 4px 8px!important;font-size:12.5px!important;line-height:1.45!important;color:var(--muted)!important;}
  html.design-lab #budgetOverlay .budget-suggestion{margin:0 0 8px!important;padding:14px 16px!important;border:1px solid var(--app-line)!important;border-left:3px solid var(--primary)!important;border-radius:18px!important;background:var(--app-surface)!important;}
  html.design-lab #budgetOverlay .budget-suggestion.is-empty{border-left-color:var(--app-line)!important;flex-wrap:nowrap!important;}
  html.design-lab :is(#billOverlay,#budgetOverlay) .modal-actions{margin-top:8px!important;}
}

/* ===== Celular: título de seção "soldado" ao cartão do campo logo abaixo —
   vira o cabeçalho do mesmo cartão (mesmo fundo/borda, cantos de baixo
   retos), sem nenhum espaço entre os dois. Genérico (.modal-section-title),
   reaproveitado em Nova caixinha (Aporte/Rendimento) e Novo investimento
   (Rendimento/Aporte mensal) — mesmo conceito, uma CSS só. */
@media(max-width:900px){
  html.design-lab .overlay .modal-section-title{margin:18px 0 0!important;padding:14px 16px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-bottom:0!important;border-radius:18px 18px 0 0!important;font-size:14px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important;}
  html.design-lab .overlay .modal-section-title .label-icon{display:flex!important;align-items:center!important;gap:9px!important;white-space:nowrap!important;}
  html.design-lab .overlay .modal-section-title .label-icon>i{flex:0 0 18px;width:18px;font-size:14px!important;text-align:center;color:var(--muted)!important;}
  html.design-lab .overlay .modal-section-title+.field{margin-top:0!important;border-top:0!important;border-radius:0 0 18px 18px!important;}
  html.design-lab .overlay .modal-section-title~*:last-child{margin-bottom:0!important;}
  /* Campo com detalhe condicional dentro do próprio cartão (valor+dia, taxa,
     etc.) — em vez de um cartão extra por campo. .hidden precisa ganhar do
     display:flex!important abaixo (mesmo golpe de especificidade já achado
     em #transactions), por isso vem primeiro E com uma classe a mais. */
  html.design-lab .overlay .field-details.hidden{display:none!important;}
  html.design-lab .overlay .field-details{margin-top:14px!important;padding-top:14px!important;border-top:1px solid var(--app-line)!important;display:flex!important;flex-direction:column;gap:12px;}
  html.design-lab .overlay .field-row2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
  html.design-lab .overlay .field-mini label{display:block;margin:0 0 6px!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab .overlay .field-mini input,html.design-lab .overlay .field-mini select{min-height:44px!important;border-radius:12px!important;font-size:15px!important;}
  html.design-lab .overlay .field-details .hint{margin:0!important;padding:0 2px!important;font-size:12.5px!important;line-height:1.45!important;color:var(--muted)!important;}
}

/* ===================================================================
   Celular — Lançamentos: tela reformulada, padrão de app nativo.
   Busca sempre visível, filtro em pílulas roláveis, card-resumo do
   período (mesmo padrão de Orçamento/Contas a pagar) e lista em card.
   =================================================================== */
@media(max-width:900px){
  /* BUG REAL: sem ".active" aqui, o #transactions sozinho (id, !important)
     ganhava de ".section{display:none}" o tempo todo — a tela de Lançamentos
     ficava sempre visível por baixo de qualquer outra seção pra qual a
     pessoa navegasse (Relatórios abrindo "Lançamentos" por cima, toque num
     lançamento parecendo não abrir o detalhe). Mesmo golpe já documentado
     em #reports-page (ver comentário "BUG REAL" mais abaixo neste arquivo). */
  html.design-lab #transactions.active{display:flex!important;flex-direction:column!important;gap:14px!important;}

  /* ---- Barra de ferramentas ---- */
  html.design-lab #transactions .lancamentos-toolbar{display:flex!important;flex-direction:column!important;gap:10px!important;background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;}
  html.design-lab #transactions .lancamentos-search-row{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;margin:0!important;}
  html.design-lab #transactions .lancamentos-quickbar{display:flex!important;gap:8px!important;order:2!important;flex:0 0 auto!important;}
  html.design-lab #transactions .lancamentos-quickbar .lancamentos-icon-btn:first-child{display:none!important;}
  html.design-lab #transactions .lancamentos-icon-btn{width:44px!important;height:44px!important;border-radius:14px!important;border:1px solid var(--app-line)!important;background:var(--app-surface)!important;color:var(--text)!important;display:flex!important;align-items:center;justify-content:center;font-size:15px!important;}
  html.design-lab #transactions .search-bar{order:1!important;flex:1 1 auto!important;display:flex!important;align-items:center!important;gap:0!important;width:auto!important;min-width:0!important;opacity:1!important;margin:0!important;background:none!important;padding:0!important;}
  html.design-lab #transactions .search-bar .fg{flex:1 1 auto!important;width:100%!important;margin:0!important;position:relative;}
  html.design-lab #transactions .search-bar .fg label{position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;color:var(--muted)!important;display:flex!important;align-items:center;gap:0;pointer-events:none;}
  html.design-lab #transactions .search-bar .fg label span,html.design-lab #transactions .search-bar .fg label{font-size:0!important;}
  html.design-lab #transactions .search-bar .fg label i{font-size:15px!important;}
  html.design-lab #transactions .search-bar input{width:100%!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important;border-radius:14px!important;border:1px solid var(--app-line)!important;background:var(--input-bg)!important;padding:0 14px 0 40px!important;font-size:16px!important;}
  html.design-lab #transactions .search-bar .tx-import-statement,html.design-lab #transactions .search-bar .tx-filter-trigger{display:none!important;}
  html.design-lab #transactions .tx-inline-filters,html.design-lab #transactions .lancamentos-add-desktop{display:none!important;}

  /* ---- Filtro por tipo: pílulas roláveis ---- */
  html.design-lab #transactions .transactions-filter-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:8px!important;margin:0!important;padding:1px 1px 2px!important;background:none!important;border:0!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  html.design-lab #transactions .transactions-filter-tabs::-webkit-scrollbar{display:none;}
  html.design-lab #transactions .transactions-filter-tabs button{flex:0 0 auto!important;white-space:nowrap!important;height:38px!important;min-height:38px!important;padding:0 16px!important;border-radius:999px!important;border:1.5px solid var(--app-line)!important;background:var(--input-bg)!important;color:var(--muted)!important;font-size:14px!important;font-weight:700!important;box-shadow:none!important;}
  html.design-lab #transactions .transactions-filter-tabs button.active{border-color:#305bf3!important;background:#305bf3!important;color:#fff!important;}

  /* ---- Card-resumo do período ---- */
  html.design-lab #transactions>.cards{display:block!important;margin:0!important;}
  html.design-lab #transactions .tx-money-summary{background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:20px!important;padding:16px!important;}
  html.design-lab #transactions .tx-money-cols{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
  html.design-lab #transactions .tx-money-cols span{display:block;font-size:12px;font-weight:600;color:var(--muted);}
  html.design-lab #transactions .tx-money-cols b{display:block;margin-top:3px;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);}
  html.design-lab #transactions .tx-money-cols b.in{color:var(--income);}
  html.design-lab #transactions .tx-money-cols b.out{color:var(--expense);}
  html.design-lab #transactions .tx-money-bar{height:7px;margin-top:12px;border-radius:999px;background:var(--app-surface-soft);overflow:hidden;}
  html.design-lab #transactions .tx-money-bar i{display:block;height:100%;border-radius:999px;background:var(--income);}
  html.design-lab #transactions .tx-money-note{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--income);}
  html.design-lab #transactions .tx-money-note.out{color:var(--expense);}
  html.design-lab #transactions .tx-money-note span{font-weight:500;color:var(--muted);}

  /* ---- Lista ---- */
  html.design-lab #transactions>#txListPanel{border-radius:20px!important;margin:0!important;}
  html.design-lab #transactions .day-head{padding:14px 0 6px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.03em;color:var(--muted)!important;}
  html.design-lab #transactions .tx{padding:11px 0!important;border-bottom:1px solid var(--app-line)!important;}
  html.design-lab #transactions .tx:last-child{border-bottom:0!important;}
  html.design-lab #transactions .fm-empty-state{padding:34px 16px!important;}
}

/* ===================================================================
   Celular — Avisos: cartões por aviso (selo de ícone colorido, igual ao
   resto do app), agrupados por dia, em vez da faixa colorida lisa antiga.
   =================================================================== */
@media(max-width:900px){
  html.design-lab #alerts-page .dashboard-alerts-head{padding:2px 2px 4px!important;align-items:flex-start!important;}
  html.design-lab #alerts-page .dashboard-alerts-head .tool-modal-intro{font-size:14px!important;font-weight:600!important;color:var(--text)!important;}
  html.design-lab #alerts-page .dashboard-alerts-head .mark-all-toggle{height:32px!important;padding:0 12px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:700!important;background:var(--app-surface-soft)!important;}
  html.design-lab #alerts-page .day-head{padding:16px 2px 6px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.03em;color:var(--muted)!important;text-transform:uppercase;}
  html.design-lab #alerts-page .day-head:first-of-type{padding-top:2px!important;}
  html.design-lab #alerts-page .notification-card{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;box-sizing:border-box;padding:13px 46px 13px 13px;margin-bottom:9px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface);text-align:left;cursor:pointer;}
  html.design-lab #alerts-page .notification-card.unread{background:var(--app-surface-soft);border-color:color-mix(in srgb,var(--primary) 28%,var(--app-line));}
  html.design-lab #alerts-page .notification-card-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
  html.design-lab #alerts-page .notification-card-body{flex:1;min-width:0;font-size:14px;line-height:1.42;color:var(--text);}
  html.design-lab #alerts-page .notification-card-body b{color:var(--text);}
  /* Pontinho de "não lido" agora mora dentro de .alert-date (mesmo
     componente já usado no balão do sino/computador), lado a lado com a
     data — não é mais um elemento à parte flutuando por cima do texto. */
  html.design-lab #alerts-page .notification-card-body .alert-dot{background:var(--primary)!important;}
  html.design-lab #alerts-page .notification-card-delete{position:absolute;top:11px;right:11px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:12px;}
  html.design-lab #alerts-page .notification-card-delete:active{background:rgba(217,74,92,.14)!important;color:var(--expense)!important;}
  html.design-lab #alerts-page .fm-empty-state{padding:44px 16px!important;}
}

/* ===================================================================
   Celular — Contas a pagar/receber: resumo unificado, filtro por tipo
   (existia só no computador) e status legível em qualquer largura.
   =================================================================== */
@media(max-width:900px){
  /* Resumo: os dois cartões (A pagar/A receber) viram um só, 2 colunas —
     mesma ideia do resumo de Lançamentos. */
  html.design-lab #bills>.cards{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;border-radius:20px!important;padding:16px!important;box-shadow:none!important;margin-bottom:16px!important;}
  html.design-lab #bills>.cards .stat{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;min-height:0!important;}
  html.design-lab #bills>.cards .stat.income{border-left:1px solid var(--app-line)!important;padding-left:16px!important;margin-left:16px!important;}
  html.design-lab #bills>.cards .stat .t{font-size:12px!important;color:var(--muted)!important;}
  html.design-lab #bills>.cards .stat .v{font-size:19px!important;}
  /* Filtro Todas/A pagar/A receber: reaparece no celular (antes só existia
     no computador, embora a função já funcionasse dos dois lados). */
  html.design-lab #bills .bills-segmented{display:inline-flex!important;gap:2px!important;margin:0 0 14px!important;padding:3px!important;border:1px solid var(--app-line)!important;border-radius:999px!important;background:var(--app-surface-soft)!important;width:100%!important;}
  html.design-lab #bills .bills-segmented .seg-item{flex:1!important;min-height:36px!important;padding:6px 10px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--muted)!important;font-size:13px!important;font-weight:700!important;}
  html.design-lab #bills .bills-segmented .seg-item.active{background:var(--card)!important;color:var(--text)!important;box-shadow:0 1px 3px rgba(18,20,30,.10)!important;}
  /* Selo de status: sumia (só o ícone ficava) em telas ≤600px — igual a um
     iPhone comum — e mesmo o ícone não tinha cor nenhuma de fundo. Agora é
     um selo de verdade, com texto, em qualquer largura. */
  html.design-lab #bills .bill-status{display:inline-flex!important;align-items:center;gap:4px;padding:3px 8px!important;border-radius:8px!important;background:var(--app-surface-soft)!important;white-space:nowrap!important;flex:0 0 auto!important;}
  html.design-lab #bills .bill-status .status-label{white-space:nowrap!important;}
  html.design-lab #bills .bn .t1{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important;row-gap:4px!important;}
  html.design-lab #bills .bill-desc{min-width:0;overflow-wrap:break-word;}
  html.design-lab #bills .bill-status .status-label{display:inline!important;font-size:10.5px!important;font-weight:750!important;}
  html.design-lab #bills .bill-status .status-icon{display:inline-flex!important;font-size:9px!important;}
  html.design-lab #bills .bill-status.st-late{background:var(--negative-soft)!important;color:var(--expense)!important;}
  html.design-lab #bills .bill-status.st-pending{background:var(--warning-soft)!important;color:var(--warning)!important;}
  html.design-lab #bills .bill-status.st-paid{background:var(--positive-soft)!important;color:var(--income)!important;}
  /* Botão de "marcar como pago/recebido": ficava com padding assimétrico
     (herdado de .icon-btn genérico), então o traço do check nunca ficava
     centralizado dentro do quadrado — agora é um botão de verdade, com fundo
     próprio e o ícone perfeitamente centralizado. */
  html.design-lab #bills .bill-row .bill-actions .icon-btn{background:var(--app-surface-soft)!important;color:var(--text-2)!important;font-size:15px!important;}
  html.design-lab #bills .bill-row .bill-actions .icon-btn:active{background:var(--app-surface)!important;transform:scale(.93)!important;}
  /* BUG REAL: o display:flex!important acima (mais específico) ganhava do
     "[data-row-action]{display:none!important}" genérico e reexibia Editar/
     Excluir soltos na linha — eles devem continuar só na folha de ações do
     toque longo. Mesmo golpe de especificidade de sempre; corrige com um
     seletor ainda mais específico por cima. */
  html.design-lab #bills .bill-row .bill-actions [data-row-action]{display:none!important;}
}

/* Tela de carregamento (celular) segue o tema escolhido, igual a tela de PIN:
   branca no modo claro, preta no escuro. O tema já chega aplicado antes dela
   aparecer (script no início de FinMoney.html). A tela de login continua com
   o visual escuro próprio. Seletor mais específico que o bloco de acesso
   móvel (html.design-lab .auth-screen), que força tudo pra #0b0c10. */
@media(max-width:900px){
  html.design-lab .auth-screen.auth-resolving{--bg:#fff!important;--text:#111827!important;--muted:rgba(17,24,39,.62)!important;--app-line:rgba(17,24,39,.10)!important;background:#fff!important;}
  html.design-lab[data-theme="dark"] .auth-screen.auth-resolving{--bg:#000!important;--text:#fff!important;--muted:rgba(255,255,255,.72)!important;--app-line:rgba(255,255,255,.14)!important;background:#000!important;}
  /* O fundo do html/body aparece no topo do iPhone (o iOS desfoca a faixa da
     barra de status): precisa ter a mesma cor da tela de carregamento. */
  html.design-lab:has(#authScreen.auth-resolving:not(.hidden)),html.design-lab:has(#authScreen.auth-resolving:not(.hidden)) body{background:#fff!important;}
  html.design-lab[data-theme="dark"]:has(#authScreen.auth-resolving:not(.hidden)),html.design-lab[data-theme="dark"]:has(#authScreen.auth-resolving:not(.hidden)) body{background:#000!important;}
}

/* Logos oficiais das integrações (Google Agenda, Gmail, Open Finance) no
   mesmo padrão dos outros ícones: desenho de uma cor (máscara com o arquivo
   em icons/) sobre o quadrado colorido. A cor vem de currentColor. */
.brand-glyph{display:block;width:1.1em;height:1.1em;background:currentColor;-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat;}

/* Relatórios no celular (v8.160.0, ajustado na v8.160.1): mesma escala das
   outras páginas — título 22px como todas, cards com 16px de recuo, texto
   principal 14-15px, legenda 12-13px, valores 15-18px (medido em Visão geral e
   Lançamentos). A v8.160.0 tinha subido tudo pra 16-34px e o Tiago achou
   grande demais. Mantém o que ele gostou: categorias sem cortar o nome,
   exportação em lista, período alinhado com os cards. Só ≤900px. */
@media(max-width:900px){
  html.design-lab #reports-page.section.active{gap:12px!important;}
  html.design-lab #reports-page .panel{border-radius:20px!important;padding:16px!important;}

  html.design-lab #reports-page #reportsPeriodPanel{padding:0!important;border-radius:0!important;overflow:visible!important;}
  html.design-lab #reportsPeriodPanel .period-head{gap:10px!important;margin-bottom:10px!important;}
  html.design-lab #reportsPeriodPanel .period-title{font-size:14px!important;}
  html.design-lab #reportsPeriodPanel .period-sub{font-size:13px!important;}
  html.design-lab #reportsPeriodPanel .dashboard-view-options button{height:36px!important;font-size:13px!important;font-weight:600!important;}
  html.design-lab #reportsPeriodPanel .chip-row{gap:8px!important;margin:0 -16px!important;padding:0 16px 2px!important;scroll-snap-type:x proximity;scroll-padding:0 16px;}
  html.design-lab #reportsPeriodPanel .period-chip{font-size:14px!important;font-weight:600!important;padding:8px 16px!important;border-radius:999px!important;scroll-snap-align:start;}


  html.design-lab #reportsCategoryPanel .cat-type-toggle{border-radius:12px!important;margin-bottom:14px!important;}
  html.design-lab #reportsCategoryPanel .cat-type-btn{font-size:13px!important;font-weight:600!important;padding:8px!important;border-radius:10px!important;}
  html.design-lab #reports-page .cat-row{padding:12px 0!important;}
  /* Nome da categoria com a linha inteira: valor à direita, % embaixo do nome. */
  html.design-lab #reports-page .cat-row-head{display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;column-gap:12px!important;row-gap:0!important;align-items:center!important;margin-bottom:8px!important;}
  html.design-lab #reports-page .cat-row-head:has(.cat-row-chevron){grid-template-columns:36px minmax(0,1fr) auto 12px!important;}
  html.design-lab #reports-page .cat-row .cat-icon{grid-row:1/3!important;grid-column:1!important;width:36px!important;height:36px!important;flex:none!important;border-radius:12px!important;font-size:15px!important;}
  html.design-lab #reports-page .cat-row .cat-name{grid-row:1!important;grid-column:2!important;font-size:15px!important;font-weight:600!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  html.design-lab #reports-page .cat-row .cat-amount{grid-row:1!important;grid-column:3!important;margin-left:0!important;font-size:15px!important;width:auto!important;white-space:nowrap!important;}
  html.design-lab #reports-page .cat-row .cat-pct{grid-row:2!important;grid-column:2!important;text-align:left!important;font-size:12px!important;font-weight:600!important;width:auto!important;}
  html.design-lab #reports-page .cat-row .cat-pct::after{content:' do total';font-weight:400;}
  html.design-lab #reports-page .cat-row-chevron{grid-row:1/3!important;grid-column:4!important;font-size:12px!important;}
  html.design-lab #reports-page .cat-bar-track{margin-left:48px!important;}
  /* Subcategorias alinhadas com o nome da categoria (48px = ícone + espaço), linhas juntas. */
  html.design-lab #reports-page .sub-list{margin:8px 0 0 48px!important;gap:0!important;}
  html.design-lab #reports-page .sub-row{font-size:13px!important;padding:4px 0!important;}

  html.design-lab #reports-page .reports-card-head{font-size:17px!important;gap:8px!important;margin-bottom:12px!important;}
  html.design-lab #reports-page .reports-card-head i{font-size:16px!important;}
  html.design-lab #reportsInsights .insight-row{gap:12px!important;padding:12px 0!important;}
  html.design-lab #reportsInsights .insight-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:12px!important;font-size:14px!important;}
  html.design-lab #reportsInsights .insight-text{font-size:14px!important;line-height:1.45!important;padding-top:0!important;align-self:center!important;}

  html.design-lab #reportsExportPanel .export-hint{font-size:13px!important;margin:-4px 0 6px!important;}
  html.design-lab #reportsExportPanel .export-grid{grid-template-columns:1fr!important;gap:0!important;}
  html.design-lab #reportsExportPanel .export-btn{flex-direction:row!important;align-items:center!important;gap:12px!important;padding:10px 0!important;border:0!important;border-top:1px solid var(--app-line)!important;border-radius:0!important;background:none!important;text-align:left!important;min-height:56px!important;}
  html.design-lab #reportsExportPanel .export-btn:first-child{border-top:0!important;}
  html.design-lab #reportsExportPanel .export-btn::after{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;font-size:12px;color:var(--text-3);margin-left:auto;padding-left:8px;}
  html.design-lab #reportsExportPanel .export-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:12px!important;font-size:15px!important;margin:0!important;}
  html.design-lab #reportsExportPanel .export-body{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important;}
  html.design-lab #reportsExportPanel .export-title{font-size:14px!important;font-weight:600!important;}
  html.design-lab #reportsExportPanel .export-desc{display:block!important;font-size:12.5px!important;line-height:1.35!important;color:var(--text-3)!important;}
  html.design-lab #reportsExportPanel .export-btn:active{opacity:.6!important;}
}

/* ===== Faturas e contas (Início, logo abaixo do gráfico) — versão A
   (v8.164.0, mockup escolhido pelo Tiago): destaque azul com o que sobra
   depois das faturas, faturas como cartões na cor de cada cartão deslizando
   pro lado, contas com a barrinha da parte de cada uma no total. ===== */
html.design-lab #dashboard .ms-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:18px;padding:16px;background:linear-gradient(135deg,#1d2b6b 0%,#305bf3 100%);color:#fff;}
html.design-lab #dashboard .ms-hero::after{content:'';position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;}
html.design-lab #dashboard .ms-hero.is-short{background:linear-gradient(135deg,#6b1d2b 0%,#e45768 100%);}
html.design-lab #dashboard .ms-hero small{font-size:12px;font-weight:500;opacity:.82;}
html.design-lab #dashboard .ms-hero>b{font-size:28px;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin:2px 0 12px;white-space:nowrap;}
html.design-lab #dashboard .ms-split{display:flex;gap:4px;height:8px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.18);margin-bottom:10px;}
html.design-lab #dashboard .ms-split i{display:block;height:100%;border-radius:99px;}
html.design-lab #dashboard .ms-split i.is-accounts{background:#7ef0cf;}
html.design-lab #dashboard .ms-split i.is-invoices{background:#ffb3bd;}
html.design-lab #dashboard .ms-legend{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;}
html.design-lab #dashboard .ms-legend>span{display:flex;align-items:center;gap:6px;white-space:nowrap;opacity:.94;}
html.design-lab #dashboard .ms-legend>span::before{content:'';width:8px;height:8px;border-radius:50%;flex:0 0 8px;}
html.design-lab #dashboard .ms-legend>span.is-accounts::before{background:#7ef0cf;}
html.design-lab #dashboard .ms-legend>span.is-invoices::before{background:#ffb3bd;}
html.design-lab #dashboard .ms-legend b{font-weight:700;}
html.design-lab #dashboard .ms-group{margin-top:18px;min-width:0;}
html.design-lab #dashboard .ms-group-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 2px 10px;}
html.design-lab #dashboard .ms-group-title span{font-size:13px;font-weight:600;color:var(--muted);}
html.design-lab #dashboard .ms-group-title a{font-size:12px;font-weight:600;color:var(--accent,#305bf3);cursor:pointer;}
html.design-lab #dashboard .ms-cc-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px;scroll-padding:0 16px;}
html.design-lab #dashboard .ms-cc-scroll::-webkit-scrollbar{display:none;}
html.design-lab #dashboard .ms-cc{position:relative;overflow:hidden;flex:0 0 200px;height:118px;display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:stretch!important;padding:12px 14px!important;margin:0!important;border:0!important;border-radius:16px!important;background:linear-gradient(135deg,var(--ms-from),var(--ms-to))!important;color:#fff!important;text-align:left!important;font:inherit!important;box-shadow:none!important;scroll-snap-align:start;cursor:pointer;min-height:0!important;}
html.design-lab #dashboard .ms-cc::after{content:'';position:absolute;right:-30px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;}
html.design-lab #dashboard .ms-cc:active{transform:scale(.98);}
html.design-lab #dashboard .ms-cc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
html.design-lab #dashboard .ms-cc-top b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #dashboard .ms-cc-top em{flex:0 0 auto;font-style:normal;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.22);}
html.design-lab #dashboard .ms-cc-bottom{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;}
html.design-lab #dashboard .ms-cc-bottom b{font-size:20px;font-weight:800;letter-spacing:-.3px;white-space:nowrap;}
html.design-lab #dashboard .ms-cc-bottom small{font-size:11.5px;opacity:.88;white-space:nowrap;}
html.design-lab #dashboard .ms-rows{display:flex;flex-direction:column;gap:10px;}
html.design-lab #dashboard .ms-row{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;padding:0!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-align:left!important;color:var(--text)!important;font:inherit!important;cursor:pointer;min-height:0!important;}
html.design-lab #dashboard .ms-row:active{opacity:.7;}
html.design-lab #dashboard .ms-ico{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;background:color-mix(in srgb,var(--ms-color) 14%,transparent);color:var(--ms-color);overflow:hidden;}
html.design-lab #dashboard .ms-ico .bank-logo{width:22px;height:22px;}
html.design-lab #dashboard .ms-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
html.design-lab #dashboard .ms-main b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #dashboard .ms-share{display:block;height:5px;border-radius:99px;background:var(--app-surface-soft,#f3f5fa);overflow:hidden;}
html.design-lab #dashboard .ms-share i{display:block;height:100%;border-radius:99px;background:var(--ms-color);}
html.design-lab #dashboard .ms-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
html.design-lab #dashboard .ms-side b{font-size:15px;font-weight:700;white-space:nowrap;}
html.design-lab #dashboard .ms-side b.is-negative{color:var(--expense,#e45768);}
html.design-lab #dashboard .ms-side small{font-size:11.5px;color:var(--muted);}
html.design-lab #dashboard .ms-empty{font-size:13px;color:var(--muted);padding:2px 2px 0;}
@media(max-width:900px){
  html.design-lab #dashboard #dashboardMonthSummaryWidget>h3 .label-icon>i{background:var(--accent-soft)!important;color:var(--accent)!important;}
}
@media(min-width:901px){
  html.design-lab #dashboard .ms-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
  html.design-lab #dashboard .ms-hero>b{font-size:32px;}
  html.design-lab #dashboard .ms-cc-scroll{margin:0;padding:0 0 2px;}
  html.design-lab #dashboard [data-w="w_summary"][data-compact="true"] .ms-groups,html.design-lab #dashboard [data-w="w_summary"][data-band="side"] .ms-groups{grid-template-columns:minmax(0,1fr);gap:18px;}
}
@media(max-width:900px){
  html.design-lab #dashboard .dashboard-evolution canvas{height:170px!important;max-height:170px!important;}
}

/* ===== Guardar/Resgatar dinheiro da caixinha: cartão da caixinha, valor em
   destaque e resumo de como ficam caixinha e conta (padrão de Novo lançamento) ===== */
#vaultMoveOverlay .vault-move-preview{--vault-color:#f39c12;display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:14px;border-radius:20px;background:var(--vault-color);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--vault-color) 28%,transparent);}
#vaultMoveOverlay .vault-move-badge{flex:0 0 44px;width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--vault-color);overflow:hidden;padding:7px;box-sizing:border-box;}
#vaultMoveOverlay .vault-move-copy{flex:1;min-width:0;}
#vaultMoveOverlay .vault-move-copy b{display:block;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
#vaultMoveOverlay .vault-move-copy small,#vaultMoveOverlay .vault-move-saved small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.85);}
#vaultMoveOverlay .vault-move-saved{text-align:right;flex:0 0 auto;}
#vaultMoveOverlay .vault-move-saved small{margin:0 0 2px;}
#vaultMoveOverlay .vault-move-saved strong{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;}
#vaultMoveOverlay .vault-move-summary{margin-top:4px;padding:12px 16px;border-radius:16px;border:1px solid var(--app-line,var(--border));background:var(--app-surface,var(--card));}
#vaultMoveOverlay .vault-move-summary.hidden{display:none;}
#vaultMoveOverlay .vault-move-summary-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
#vaultMoveOverlay .vault-move-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;font-size:14.5px;color:var(--text);}
#vaultMoveOverlay .vault-move-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);}
#vaultMoveOverlay .vault-move-row b{font-weight:700;white-space:nowrap;}
#vaultMoveOverlay .vault-move-row.is-warn b,#vaultMoveOverlay .vault-move-warn{color:var(--expense);}
#vaultMoveOverlay .vault-move-warn{font-size:14px;font-weight:600;}
@media(max-width:900px){
  html.design-lab #vaultMoveOverlay{align-items:stretch!important;padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html.design-lab #vaultMoveOverlay .modal{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;box-shadow:none!important;padding:0 16px calc(92px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;transform:none!important;transition:none!important;display:flex!important;flex-direction:column!important;gap:12px!important;animation:none!important;}
  html.design-lab #vaultMoveOverlay .modal::before{display:none!important;}
  html.design-lab #vaultMoveOverlay .modal>*{flex:0 0 auto;margin:0!important;}
  html.design-lab #vaultMoveOverlay .modal>h2{position:sticky!important;top:0;z-index:5;margin:0 -16px 0!important;padding:calc(28px + env(safe-area-inset-top)) 16px 12px!important;background:var(--bg)!important;border-bottom:1px solid var(--app-line)!important;font-size:20px!important;font-weight:700!important;}
  html.design-lab #vaultMoveOverlay .field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:16px;padding:9px 14px 11px;}
  html.design-lab #vaultMoveOverlay .field>label{display:block;margin:0 0 3px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;}
  html.design-lab #vaultMoveOverlay .field :is(input,select):not(#vaultMoveAmount){background:none!important;border:0!important;padding:0!important;min-height:26px!important;font-size:16px!important;box-shadow:none!important;}
  html.design-lab #vaultMoveOverlay .field .fm-select-trigger{background:none!important;border:0!important;padding:0!important;min-height:30px!important;height:auto!important;font-size:16px!important;box-shadow:none!important;}
  html.design-lab #vaultMoveOverlay .vault-move-amount-field{text-align:center;padding:12px 16px 10px!important;border-radius:20px!important;}
  html.design-lab #vaultMoveOverlay .vault-move-amount-field>label{text-align:center;}
  html.design-lab #vaultMoveOverlay #vaultMoveAmount{text-align:center!important;font-size:38px!important;font-weight:700!important;letter-spacing:-1px;min-height:50px!important;height:50px;border:0!important;background:none!important;padding:0!important;box-shadow:none!important;color:var(--text)!important;}
  html.design-lab #vaultMoveOverlay .modal-actions{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:6;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;background:var(--bg)!important;border-top:1px solid var(--app-line)!important;display:flex!important;gap:10px!important;}
  html.design-lab #vaultMoveOverlay .modal-actions .btn{flex:1!important;}
}
/* Confirmar conta a pagar/receber (v8.172.0, igual à apresentação): círculo
   vazio que enche de verde com um leve pulo e desenha o ✓ (confirmBillPay). */
#bills .bill-check,.bill-check{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:26px;min-width:26px;height:26px;padding:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--muted) 60%,transparent);background:transparent;color:#05261b;cursor:pointer;transition:border-color .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent;}
.bill-check:hover{border-color:var(--income);}
.bill-check:active{transform:scale(.92);}
.bill-check-fill{position:absolute;inset:-2px;border-radius:50%;background:var(--income);transform:scale(0);}
.bill-check svg{position:relative;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;}
#bills .bill-check.is-done,#bills .bill-check.is-checking{border-color:transparent;cursor:default;}
.bill-check.is-done .bill-check-fill{transform:scale(1);}
.bill-check.is-done svg{stroke-dashoffset:0;}
.bill-check.is-checking .bill-check-fill{animation:fmBillCheckFill .42s cubic-bezier(.34,1.56,.64,1) forwards;}
.bill-check.is-checking svg{animation:fmBillCheckTick .3s ease-out .16s forwards;}
.bill-check.is-checking::after{content:'';position:absolute;inset:-2px;border-radius:50%;animation:fmBillCheckRing .6s ease-out .1s;}
@keyframes fmBillCheckFill{to{transform:scale(1);}}
@keyframes fmBillCheckTick{to{stroke-dashoffset:0;}}
@keyframes fmBillCheckRing{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--income) 45%,transparent);}to{box-shadow:0 0 0 11px transparent;}}
.bill-row.is-paying .bill-alert-hint,.bill-row.is-paying .bill-alert-dot{opacity:0;transition:opacity .25s ease;}
.fm-status-pop{animation:fmStatusPop .38s cubic-bezier(.34,1.56,.64,1);}
@keyframes fmStatusPop{0%{transform:scale(.7);opacity:.2;}100%{transform:scale(1);opacity:1;}}
@media(prefers-reduced-motion:reduce){.bill-check-fill,.bill-check svg,.bill-check::after,.fm-status-pop{animation:none!important;}}

/* Relatórios: resumo do topo (v8.173.0) — um card só, com o resultado em
   destaque e receitas × despesas em barras na mesma escala. Substitui os
   três .kpi-card antigos (Resultado/Receitas/Despesas). */
html.design-lab #reportsKpis,html.design-lab .fm-sum-wrap{display:block!important;margin:0 0 16px!important;}
@media(max-width:900px){html.design-lab #reportsKpis,html.design-lab .fm-sum-wrap{margin:0 0 12px!important;}}
.fm-sum{background:var(--card);border:1px solid var(--app-line);border-radius:22px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:18px;}
.fm-sum-label{font-size:13px;font-weight:600;color:var(--text-3);}
.fm-sum-value{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.fm-sum-value.is-bad{color:var(--negative);}
.fm-sum-value.is-good{color:var(--text);}
.fm-sum-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;}
.fm-sum-badge i{font-size:11px;}
.fm-sum-badge.is-bad{background:var(--negative-soft);color:var(--negative);}
.fm-sum-badge.is-good{background:var(--positive-soft);color:var(--positive);}
.fm-sum-rows{display:flex;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid var(--app-line);}
.fm-sum-row-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fm-sum-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;}
.fm-sum-row.is-income .fm-sum-dot,.fm-sum-row.is-income .fm-sum-track i{background:var(--positive);}
.fm-sum-row.is-expense .fm-sum-dot,.fm-sum-row.is-expense .fm-sum-track i{background:var(--negative);}
.fm-sum-row.is-accent .fm-sum-dot,.fm-sum-row.is-accent .fm-sum-track i{background:var(--accent);}
.fm-sum-row.is-invest .fm-sum-dot,.fm-sum-row.is-invest .fm-sum-track i{background:var(--invest);}
.fm-sum-row.is-neutral .fm-sum-dot,.fm-sum-row.is-neutral .fm-sum-track i{background:var(--text-3);}
.fm-sum-value.is-neutral{color:var(--text);}
.fm-sum-badge.is-warn{background:var(--warning-soft);color:var(--warning);}
.fm-sum-badge.is-neutral{background:var(--app-surface-soft);color:var(--text-2);}
.fm-sum-row-sub{margin-top:6px;font-size:12px;color:var(--text-3);}
.fm-sum-row-label{font-size:14px;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fm-sum-row-value{margin-left:auto;font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.fm-sum-delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:999px;}
.fm-sum-delta i{font-size:9px;}
.fm-sum-delta.is-good{background:var(--positive-soft);color:var(--positive);}
.fm-sum-delta.is-bad{background:var(--negative-soft);color:var(--negative);}
.fm-sum-delta.is-flat{background:var(--app-surface-soft);color:var(--text-3);}
.fm-sum-track{height:8px;border-radius:999px;background:var(--app-surface-soft);overflow:hidden;}
.fm-sum-track i{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1);}
.fm-sum-foot{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);}
.fm-sum-foot i{font-size:11px;}
@media(min-width:901px){
  .fm-sum{flex-direction:row;align-items:center;gap:32px;padding:22px 26px;}
  .fm-sum-main{flex:0 0 auto;min-width:260px;}
  .fm-sum-value{font-size:34px;}
  .fm-sum-rows{flex:1;min-width:0;padding:0 0 0 32px;border-top:0;border-left:1px solid var(--app-line);}
}
@media(prefers-reduced-motion:reduce){.fm-sum-track i{transition:none;}}

/* Cards de resumo em grade (v8.174.1) — topo de Investimentos. Mesmo
   vocabulário visual do .fm-sum, mas em cards separados. */
.fm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.fm-stat{background:var(--card);border:1px solid var(--app-line);border-radius:20px;padding:14px 14px 13px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.fm-stat-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;min-width:0;}
.fm-stat-icon{width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;}
.fm-stat.is-invest .fm-stat-icon{background:color-mix(in srgb,var(--invest) 13%,transparent);color:var(--invest);}
.fm-stat.is-accent .fm-stat-icon{background:var(--accent-soft);color:var(--accent);}
.fm-stat.is-good .fm-stat-icon{background:var(--positive-soft);color:var(--positive);}
.fm-stat.is-bad .fm-stat-icon{background:var(--negative-soft);color:var(--negative);}
.fm-stat.is-warn .fm-stat-icon{background:var(--warning-soft);color:var(--warning);}
.fm-stat-label{font-size:13px;font-weight:600;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fm-stat-value{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fm-stat-value.is-good{color:var(--positive);}
.fm-stat-value.is-bad{color:var(--negative);}
.fm-stat-sub{font-size:12px;color:var(--text-3);line-height:1.35;}
.fm-stat-pill{display:inline-block;padding:1px 6px;border-radius:999px;font-weight:700;margin-right:2px;}
.fm-stat-pill.is-good{background:var(--positive-soft);color:var(--positive);}
.fm-stat-pill.is-bad{background:var(--negative-soft);color:var(--negative);}
@media(min-width:901px){
  .fm-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
  .fm-stat{padding:18px 20px;border-radius:22px;}
  .fm-stat-value{font-size:24px;}
  .fm-stat-sub{font-size:12.5px;}
}

/* ===== Nova/Editar caixinha e investimento: janela larga do computador (v8.175.0) =====
   Mockup aprovado pelo Tiago: duas colunas — prévia ao vivo à esquerda (.fmx-side)
   e formulário em blocos à direita (.fmx-body). Os mesmos campos servem ao celular,
   que continua com a página cheia: .fmx-desk só existe aqui, .fmx-mob só lá.
   Lógica em app-form-desk.js. */
@media(max-width:900px){
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-desk.fmx-desk{display:none!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-affix{display:contents;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec{display:block;}
  /* a dica do CDI saiu de dentro de #vaultYieldDetails (no computador ela fica embaixo da linha toda) — no celular, mesma cara de antes */
  html.design-lab #vaultOverlay .fmx-modal #vaultYieldHint{margin:12px 2px 0!important;padding:0!important;font-size:12.5px!important;line-height:1.45!important;color:var(--muted)!important;}
}
@media(min-width:901px){
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-mob.fmx-mob,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .vault-preview,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .inv-preview{display:none!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .hidden.hidden{display:none!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .modal.fmx-modal{--fmx-soft:var(--app-surface-soft);--fmx-input:color-mix(in srgb,var(--app-surface-soft) 70%,var(--app-line));--fmx-input-line:color-mix(in srgb,var(--app-line) 80%,var(--muted) 8%);
    width:min(1000px,calc(100vw - 48px))!important;max-width:none!important;height:auto!important;max-height:min(830px,calc(100vh - 40px))!important;padding:0!important;overflow:hidden!important;
    display:grid!important;grid-template-columns:360px minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr) auto!important;border-radius:28px!important;border:1px solid var(--app-line)!important;background:var(--app-surface)!important;box-shadow:0 30px 80px rgba(10,22,60,.35)!important;}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .modal.fmx-modal{--fmx-input:var(--input-bg);box-shadow:0 30px 80px rgba(0,0,0,.6)!important;}
  html.design-lab #invOverlay .modal.fmx-modal{width:min(1080px,calc(100vw - 48px))!important;}
  /* Coluna da prévia */
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-side{--fmx-accent:#d99235;grid-column:1;grid-row:1/-1;display:flex!important;flex-direction:column;gap:18px;min-height:0;overflow-y:auto;padding:28px 28px 24px;border-right:1px solid var(--app-line);background:linear-gradient(165deg,color-mix(in srgb,var(--fmx-accent) 16%,var(--app-surface)) 0%,var(--app-surface) 62%);}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-side{background:linear-gradient(165deg,color-mix(in srgb,var(--fmx-accent) 22%,var(--app-surface)) 0%,var(--app-surface) 62%);}
  html.design-lab #invOverlay .fmx-modal .fmx-side{gap:16px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-icons-box>.fmx-eyebrow,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-types-box>.fmx-eyebrow{margin-bottom:10px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pv{background:var(--app-surface);border:1px solid var(--app-line);border-radius:22px;padding:20px;box-shadow:0 12px 30px rgba(34,61,112,.10);}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pv{background:var(--fmx-soft);box-shadow:none;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pv-head{display:flex;align-items:center;gap:12px;min-width:0;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pv-head>div{min-width:0;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pv-head b{display:block;font-size:16.5px;font-weight:750;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pv-head small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-badge{flex:0 0 46px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:19px;background:var(--fmx-accent);box-shadow:0 8px 18px color-mix(in srgb,var(--fmx-accent) 40%,transparent);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-badge .data-icon{color:#fff!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring-wrap{display:flex;align-items:center;gap:18px;margin-top:18px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring{flex:0 0 96px;width:96px;height:96px;position:relative;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring circle{fill:none;stroke-width:11;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring .fmx-ring-track{stroke:var(--app-line);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring .fmx-ring-bar{stroke-linecap:round;transition:stroke-dasharray .35s ease;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:750;font-size:21px;color:var(--text);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv{display:flex;flex-direction:column;gap:2px;min-width:0;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv small{font-size:12px;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv strong{font-size:22px;font-weight:750;letter-spacing:-.5px;color:var(--text);white-space:nowrap;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv em{font-style:normal;font-size:12.5px;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv-big{margin-top:16px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv-big strong{font-size:28px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-facts{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--app-line);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-facts-loose{margin:0;padding:0;border:0;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-fact{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-fact>i{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--fmx-soft);color:var(--primary);font-size:12px;}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-fact>i{background:var(--app-surface);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-fact b{font-weight:650;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-muted{color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-forecast{border-radius:18px;padding:16px 18px;color:#fff;background:linear-gradient(135deg,#305bf3,#5b8cff);box-shadow:0 14px 28px rgba(48,91,243,.28);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-forecast small{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.8;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-forecast strong{display:block;margin-top:4px;font-size:19px;font-weight:750;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-forecast p{margin-top:3px;font-size:12.5px;opacity:.88;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-icons.is-all{max-height:230px;overflow-y:auto;padding:2px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ic{aspect-ratio:1;min-height:0!important;padding:0!important;border-radius:12px!important;display:grid;place-items:center;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;color:var(--muted)!important;font-size:15px;cursor:pointer;transition:transform .15s ease,background .15s ease;}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ic{background:var(--fmx-soft)!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ic:hover{transform:translateY(-1px);color:var(--text)!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ic .data-icon{color:inherit!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ic.on{background:var(--fmx-accent)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 14px color-mix(in srgb,var(--fmx-accent) 40%,transparent);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-link{all:unset;display:block;margin-top:8px;margin-left:auto;width:max-content;font-size:12px;font-weight:650;color:var(--primary);cursor:pointer;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-link i{font-size:10px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chart{margin-top:14px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chart svg{display:block;width:100%;height:86px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-legend{display:flex;justify-content:space-between;margin-top:4px;font-size:11.5px;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats>div{background:var(--fmx-soft);border-radius:14px;padding:10px 12px;min-width:0;}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats>div{background:var(--app-surface);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats small{display:block;font-size:11.5px;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats b{font-size:16px;font-weight:750;color:var(--text);white-space:nowrap;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats b.is-gain{color:var(--income);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chips{display:flex;flex-wrap:wrap;gap:8px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chip{display:inline-flex;align-items:center;gap:7px;height:32px;min-height:32px!important;padding:0 11px!important;border-radius:12px!important;border:1px solid var(--fmx-input-line)!important;background:var(--app-surface)!important;color:var(--text)!important;font-size:12.5px!important;font-weight:650!important;cursor:pointer;}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chip{background:var(--fmx-soft)!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chip i{font-size:12px;opacity:.75;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chip.on{border-color:var(--primary)!important;color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 9%,var(--app-surface))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chip.on{color:#fff!important;background:color-mix(in srgb,var(--primary) 30%,var(--app-surface))!important;}
  /* Cabeçalho, corpo e rodapé (coluna da direita) */
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal>h2{grid-column:2;grid-row:1;position:relative;display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;margin:0!important;padding:26px 84px 18px 32px!important;border-bottom:1px solid var(--app-line)!important;font-size:22px!important;font-weight:750!important;letter-spacing:-.4px;color:var(--text);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal>h2 .fmx-sub{display:block;font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-close{position:absolute;top:24px;right:32px;width:36px;height:36px;min-height:36px!important;padding:0!important;border-radius:12px!important;border:1px solid var(--app-line)!important;background:var(--app-surface)!important;color:var(--muted)!important;display:grid;place-items:center;font-size:15px;cursor:pointer;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-close:hover{color:var(--text)!important;background:var(--fmx-soft)!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-body{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;padding:18px 32px 14px;display:flex;flex-direction:column;gap:14px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .modal-actions{grid-column:2;grid-row:3;display:flex!important;align-items:center;gap:12px!important;margin:0!important;padding:16px 32px 20px!important;border-top:1px solid var(--app-line)!important;background:var(--app-surface);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .modal-actions .btn{flex:0 0 auto!important;height:46px;min-height:46px!important;padding:0 24px!important;border-radius:14px!important;font-size:14px!important;font-weight:700!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .modal-actions .btn:not(.btn-ghost){padding:0 30px!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sum{flex:1;min-width:0;display:flex!important;align-items:center;gap:9px;font-size:13px;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sum>i{color:var(--primary);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sum.is-ok>i{color:var(--income);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sum b{color:var(--text);font-weight:650;}
  /* Blocos (cartões) do formulário */
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec{border:1px solid var(--app-line);border-radius:20px;padding:16px 18px 18px;background:var(--app-surface);}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec{background:color-mix(in srgb,var(--fmx-soft) 55%,var(--app-surface));}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec>.modal-section-title,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec-title{display:flex!important;align-items:center;gap:10px;margin:0 0 14px!important;padding:0!important;border:0!important;background:none!important;font-size:14.5px!important;font-weight:700!important;letter-spacing:0;color:var(--text)!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .label-icon{display:flex!important;align-items:center;gap:10px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .label-icon>i{flex:0 0 30px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:13px!important;color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 11%,var(--app-surface));margin:0!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec-note{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--muted);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:650;color:var(--income);background:color-mix(in srgb,var(--income) 12%,var(--app-surface));}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field>label,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field-mini label{display:block;margin:0 0 6px!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;min-height:0!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec input,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .fm-select-trigger{height:44px!important;min-height:44px!important;border-radius:13px!important;background:var(--fmx-input)!important;border:1px solid var(--fmx-input-line)!important;font-size:14.5px!important;font-weight:500!important;padding:0 14px!important;color:var(--text)!important;box-shadow:none!important;width:100%;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec input:focus{border-color:var(--primary)!important;background:var(--app-surface)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)!important;outline:none;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-affix{position:relative;display:block;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-affix[data-pre]:not([data-pre=""])::before{content:attr(data-pre);position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:13.5px;font-weight:650;color:var(--muted);pointer-events:none;z-index:1;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-affix[data-pre]:not([data-pre=""]) input{padding-left:42px!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-affix[data-suf]:not([data-suf=""])::after{content:attr(data-suf);position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:650;color:var(--muted);pointer-events:none;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-affix[data-suf]:not([data-suf=""]) input{padding-right:90px!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:6px;padding:5px;border-radius:15px;background:var(--fmx-input);border:1px solid var(--fmx-input-line);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg button{all:unset;box-sizing:border-box;height:38px;padding:0 6px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg button:hover{color:var(--text);}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg button.on{background:var(--app-surface);color:var(--primary);box-shadow:0 3px 10px rgba(34,61,112,.13);}
  html.design-lab[data-theme="dark"] :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg button.on{background:#22305a;color:#fff;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg button:focus-visible,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-chip:focus-visible,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ic:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-hint,html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .hint{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0!important;padding:0!important;font-size:12.5px!important;line-height:1.45!important;color:var(--muted)!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-hint>i{color:var(--primary);margin-top:2px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field-details{margin:12px 0 0!important;padding:0!important;border:0!important;}
  /* Caixinha: Nome + Meta lado a lado; aporte em 3 colunas; rendimento com o % ao lado */
  html.design-lab #vaultOverlay .fmx-modal .fmx-goal-sec{display:grid;grid-template-columns:2fr 1fr;gap:12px;}
  html.design-lab #vaultOverlay .fmx-modal .fmx-goal-sec>.fmx-sec-title{grid-column:1/-1;margin-bottom:2px!important;}
  html.design-lab #vaultOverlay .fmx-modal .fmx-goal-sec>.field:only-of-type,html.design-lab #vaultOverlay .fmx-modal .fmx-goal-sec:has(#vaultGoalSection.hidden)>.field{grid-column:1/-1;}
  html.design-lab #vaultOverlay .fmx-modal #vaultAutoDetails{display:grid!important;grid-template-columns:1.4fr 1fr 1fr;gap:12px;}
  html.design-lab #vaultOverlay .fmx-modal #vaultAutoDetails.hidden{display:none!important;}
  html.design-lab #vaultOverlay .fmx-modal #vaultAutoDetails .field-row2{display:contents!important;}
  html.design-lab #vaultOverlay .fmx-modal .fmx-yield-row{display:grid;grid-template-columns:1fr;gap:12px;align-items:end;}
  html.design-lab #vaultOverlay .fmx-modal .fmx-yield-row:has(#vaultYieldDetails:not(.hidden)){grid-template-columns:1.3fr 1fr;}
  html.design-lab #vaultOverlay .fmx-modal .fmx-yield-row #vaultYieldDetails{margin:0!important;}
  /* Investimento: Dados em 2×2; Rendimento e Prazo lado a lado; Aporte + conta numa faixa só */
  html.design-lab #invOverlay .fmx-modal .fmx-body{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-content:start;padding:16px 28px 12px;}
  html.design-lab #invOverlay .fmx-modal .fmx-sec{padding:14px 16px 16px;}
  html.design-lab #invOverlay .fmx-modal .fmx-sec>.modal-section-title,html.design-lab #invOverlay .fmx-modal .fmx-sec-title{margin-bottom:11px!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-data-sec{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  html.design-lab #invOverlay .fmx-modal .fmx-data-sec>.fmx-sec-title{grid-column:1/-1;margin-bottom:-1px!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-data-sec .row2{display:contents!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-data-sec .row2 .field:not(.fmx-mob){display:block!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-inv-name{order:1;}html.design-lab #invOverlay .fmx-modal .fmx-inv-inst{order:2;}html.design-lab #invOverlay .fmx-modal .fmx-inv-amount{order:3;}html.design-lab #invOverlay .fmx-modal .fmx-inv-date{order:4;}
  html.design-lab #invOverlay .fmx-modal #invYieldSection{grid-column:1/4;}
  html.design-lab #invOverlay .fmx-modal .fmx-term-sec{grid-column:4/7;order:1;}
  html.design-lab #invOverlay .fmx-modal .fmx-term-sec .row2{display:flex!important;flex-direction:column;gap:12px;}
  html.design-lab #invOverlay .fmx-modal .fmx-contrib-sec{grid-column:1/5;order:2;border-right:0;border-radius:20px 0 0 20px;padding-right:12px;}
  html.design-lab #invOverlay .fmx-modal .fmx-contrib-sec .field{display:grid!important;grid-template-columns:1.4fr 1fr;gap:0 12px;align-items:end;}
  html.design-lab #invOverlay .fmx-modal .fmx-contrib-sec .field>label{grid-column:1;grid-row:1;}
  html.design-lab #invOverlay .fmx-modal .fmx-contrib-sec .field>.fmx-affix{grid-column:1;grid-row:2;}
  html.design-lab #invOverlay .fmx-modal #invContribDetails{grid-column:2;grid-row:1/3;margin:0!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-inv-account{grid-column:5/7;order:3;margin:0 0 0 -12px!important;padding:55px 16px 16px 12px!important;border:1px solid var(--app-line)!important;border-left:0!important;border-radius:0 20px 20px 0!important;background:var(--app-surface)!important;}
  html.design-lab[data-theme="dark"] #invOverlay .fmx-modal .fmx-inv-account{background:color-mix(in srgb,var(--fmx-soft) 55%,var(--app-surface))!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-inv-account>label{display:block;margin:0 0 6px!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-inv-account .fm-select-trigger{height:44px!important;min-height:44px!important;border-radius:13px!important;background:var(--fmx-input)!important;border:1px solid var(--fmx-input-line)!important;font-size:14.5px!important;padding:0 14px!important;}
  /* "Opcional" fica no canto direito da faixa inteira (Aporte + conta), como no mockup */
  html.design-lab #invOverlay .fmx-modal .fmx-contrib-sec .fmx-sec-note{display:none!important;}
  html.design-lab #invOverlay .fmx-modal .fmx-inv-account{position:relative;}
  html.design-lab #invOverlay .fmx-modal .fmx-inv-account::before{content:"Opcional";position:absolute;top:22px;right:16px;font-size:12.5px;font-weight:500;color:var(--muted);}
}
/* Computador com tela estreita (notebook pequeno, janela reduzida): prévia mais
   estreita e botões de escolha mais compactos pra caber sem apertar o texto. */
@media(min-width:901px) and (max-width:1180px){
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .modal.fmx-modal{grid-template-columns:290px minmax(0,1fr)!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-side{padding:24px 20px 20px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal>h2{padding:22px 76px 16px 24px!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-close{top:20px;right:24px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-body,html.design-lab #invOverlay .fmx-modal .fmx-body{padding:14px 24px 12px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .modal-actions{padding:14px 24px 18px!important;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg button{font-size:12px;gap:5px;padding:0 4px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-seg button i{display:none;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-ring{flex-basis:80px;width:80px;height:80px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv strong{font-size:19px;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kv-big strong{font-size:24px;}
}
@media(min-width:901px) and (max-width:1180px){
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-legend span:nth-child(2){display:none;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats small{white-space:nowrap;}
  html.design-lab :is(#vaultOverlay,#invOverlay,#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats b{font-size:14px;}
}

/* ===== Novo lançamento, conta, cartão, compromisso, meta, assinatura e categoria:
   janela larga do computador (v8.176.0, mockups aprovados pelo Tiago) =====
   Mesma base da caixinha (acima). Os campos de verdade são movidos para os
   blocos da direita só no computador (fmxMountSlots, app-form-desk.js); o que
   ficou no lugar original (prévias do celular, linhas vazias) some aqui. */
@media(min-width:901px){
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .modal.fmx-modal.fmx-slots>:not(.fmx-side):not(h2):not(.fmx-body):not(.modal-actions){display:none!important;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .modal.fmx-modal{width:min(1080px,calc(100vw - 48px))!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal [data-take]{display:none!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-body>.hidden,html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-side .hidden{display:none!important;}
  /* Grades dos blocos */
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:end;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-grid+.field,html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-grid>.field+.field{margin-top:0!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-g2{grid-template-columns:repeat(2,minmax(0,1fr));}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-g3{grid-template-columns:1.6fr 1fr 1fr;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-g21{grid-template-columns:2fr 1fr;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-grid>*{min-width:0;}
  html.design-lab #txOverlay .fmx-modal #transferFields{grid-column:1/-1;}
  html.design-lab #txOverlay .fmx-modal #transferFields .row2,html.design-lab #txOverlay .fmx-modal #installField{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:0!important;}
  html.design-lab #txOverlay .fmx-modal #installField.hidden{display:none!important;}
  html.design-lab #txOverlay .fmx-modal #installField{grid-template-columns:minmax(0,1fr)!important;}
  html.design-lab #txOverlay .fmx-modal #installField>.field:has(#txInstallHint){display:none!important;}
  html.design-lab #txOverlay .fmx-modal .fmx-tx-cchint{margin:0 0 12px!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field{display:block!important;min-height:0!important;height:auto!important;overflow:visible!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field>label{text-align:left!important;line-height:1.3!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec :is(input,select):not([type="hidden"]){height:44px!important;min-height:44px!important;border-radius:13px!important;background:var(--fmx-input)!important;border:1px solid var(--fmx-input-line)!important;font-size:14.5px!important;font-weight:500!important;padding:0 14px!important;color:var(--text)!important;box-shadow:none!important;width:100%;text-align:left!important;letter-spacing:0!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec :is(input,select):focus{border-color:var(--primary)!important;background:var(--app-surface)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)!important;outline:none;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .fm-select-wrap{width:100%;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .fm-select-trigger{height:44px!important;min-height:44px!important;border-radius:13px!important;background:var(--fmx-input)!important;border:1px solid var(--fmx-input-line)!important;padding:0 14px!important;font-size:14.5px!important;font-weight:500!important;}
  /* R$ antes e "todo mês" depois do valor */
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field:is([data-pre],[data-suf]){position:relative!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field[data-pre]::after{content:attr(data-pre);position:absolute;left:14px;bottom:0;height:44px;display:flex;align-items:center;font-size:13.5px;font-weight:650;color:var(--muted);pointer-events:none;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field[data-pre] input{padding-left:42px!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field[data-suf]::after{content:attr(data-suf);position:absolute;right:14px;bottom:0;height:44px;display:flex;align-items:center;font-size:13px;font-weight:650;color:var(--muted);pointer-events:none;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field[data-suf] input{padding-right:84px!important;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sec .field:has(#budAmount) input{height:52px!important;font-size:18px!important;font-weight:650!important;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sec .field[data-pre]:has(#budAmount)::after{height:52px;}
  /* Botões de tipo: cor do tipo escolhido */
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kinds button.hidden{display:none!important;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kinds button.on.is-in{color:var(--income);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kinds button.on.is-out{color:var(--expense);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kinds button.on.is-cc{color:#b97800;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kinds button.on.is-tr{color:#4777c8;}
  html.design-lab[data-theme="dark"] :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kinds button.on.is-cc{color:#e2a83d;}
  html.design-lab[data-theme="dark"] :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-kinds button.on.is-tr{color:#7ea6ec;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-body>.fmx-kinds{flex:0 0 auto;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-body>.fmx-kinds button{height:42px;font-size:13.5px;}
  /* Categoria em botões + subcategoria em pílulas */
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat{all:unset;box-sizing:border-box;min-width:0;height:44px;border-radius:13px;border:1px solid var(--fmx-input-line);background:var(--fmx-input);display:flex;align-items:center;gap:9px;padding:0 10px;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--fmx-input-line));}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat.on{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--app-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);}
  html.design-lab[data-theme="dark"] :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat.on{color:#8fb0ff;background:color-mix(in srgb,var(--primary) 22%,var(--app-surface));}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat[disabled]:not(.on){opacity:.45;cursor:default;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-ci{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:12px;overflow:hidden;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-ci :is(i,.data-icon){color:#fff!important;font-size:12px!important;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat-more .fmx-ci{background:var(--app-line);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat-more .fmx-ci i{color:var(--muted)!important;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cat-more{color:var(--muted);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay) .fmx-modal .fmx-cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-subs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-subs-label{font-size:12.5px;font-weight:600;color:var(--muted);margin-right:2px;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-sub{all:unset;box-sizing:border-box;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--fmx-input-line);background:var(--app-surface);font-size:12.5px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;cursor:pointer;}
  html.design-lab[data-theme="dark"] :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-sub{background:var(--fmx-soft);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-sub:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  html.design-lab:is(*,[data-theme="dark"]) :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-sub.on{background:var(--primary);border-color:transparent;color:#fff;}
  /* Prévia: valor, quando, impacto */
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-badge :is(img){filter:none;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-badge i{color:#fff!important;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-amt{margin-top:16px;font-size:28px;font-weight:750;letter-spacing:-.6px;color:var(--text);white-space:nowrap;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-amt.is-out{color:var(--expense);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-amt.is-in{color:var(--income);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-amt small{margin-left:3px;font-size:14px;font-weight:600;letter-spacing:0;color:var(--muted);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-when{margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-impact{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--app-line);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-impact .fmx-facts-loose{margin-top:-2px;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-row{display:flex;gap:8px;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--muted);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-row{flex-wrap:wrap;row-gap:2px;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-row>span{white-space:nowrap;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-row>b,html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-row>span+span{margin-left:auto;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-row b{flex:0 0 auto;font-size:13px;font-weight:650;color:var(--text);white-space:nowrap;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-sub{margin-top:6px;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-imp-sub>span{flex:0 0 auto;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-bar{position:relative;height:8px;margin-top:6px;border-radius:99px;background:var(--app-line);overflow:hidden;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--primary);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-bar i.add{background:repeating-linear-gradient(45deg,var(--expense) 0 5px,color-mix(in srgb,var(--expense) 55%,#fff) 5px 10px);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-bar.is-in i.add{background:repeating-linear-gradient(45deg,var(--income) 0 5px,color-mix(in srgb,var(--income) 55%,#fff) 5px 10px);}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-bar.is-warn i:first-child{background:#e8a33d;}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-bar.is-over i:first-child{background:var(--expense);}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-pv-sm{padding:16px 18px;}
  html.design-lab :is(#billOverlay,#debtOverlay,#cardOverlay) .fmx-modal .fmx-pv-sm .fmx-facts{margin-top:12px;}
  html.design-lab :is(#billOverlay,#debtOverlay,#cardOverlay) .fmx-modal .fmx-pv-sm .fmx-facts-loose{margin-top:0;}
  /* Compromisso: calendário e meses da repetição */
  html.design-lab #billOverlay .fmx-modal .fmx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px;text-align:center;font-size:11.5px;}
  html.design-lab #billOverlay .fmx-modal .fmx-cal span{height:26px;display:grid;place-items:center;border-radius:8px;color:var(--text);}
  html.design-lab #billOverlay .fmx-modal .fmx-cal .h{height:20px;font-size:10.5px;font-weight:700;color:var(--muted);}
  html.design-lab #billOverlay .fmx-modal .fmx-cal .m{color:var(--muted);opacity:.45;}
  html.design-lab #billOverlay .fmx-modal .fmx-cal .due{background:var(--expense);color:#fff;font-weight:700;}
  html.design-lab #billOverlay .fmx-modal:has(#bTglRec.act-in) .fmx-cal .due{background:var(--income);}
  html.design-lab #billOverlay .fmx-modal .fmx-cal .today{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);font-weight:700;}
  html.design-lab #billOverlay .fmx-modal .fmx-mths{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
  html.design-lab #billOverlay .fmx-modal .fmx-mths span{padding:4px 9px;border-radius:99px;font-size:11.5px;font-weight:650;color:var(--expense);background:color-mix(in srgb,var(--expense) 12%,var(--app-surface));}
  html.design-lab #billOverlay .fmx-modal:has(#bTglRec.act-in) .fmx-mths span{color:var(--income);background:color-mix(in srgb,var(--income) 12%,var(--app-surface));}
  html.design-lab #billOverlay .fmx-modal .fmx-repeat .fmx-seg button{font-size:12.5px;}
  /* Conta e cartão: cartão desenhado, bancos, ciclo da fatura */
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bankcard{position:relative;overflow:hidden;min-height:186px;padding:20px;border-radius:20px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:12px;box-shadow:0 18px 36px rgba(20,10,60,.24);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bankcard::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.10);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bankcard::before{content:"";position:absolute;right:30px;bottom:-90px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bankcard>*{position:relative;z-index:1;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .bc-top{display:flex;justify-content:space-between;align-items:center;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .bc-logo{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.95);display:grid;place-items:center;font-size:17px;color:var(--fmx-accent);overflow:hidden;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .bc-logo :is(i,.data-icon){color:var(--fmx-accent)!important;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .bc-logo .bank-logo{width:24px;height:24px;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bankcard small{display:block;font-size:12px;opacity:.85;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bankcard strong{display:block;font-size:26px;font-weight:750;letter-spacing:-.5px;white-space:nowrap;}
  html.design-lab #cardOverlay .fmx-modal .fmx-bankcard strong{font-size:21px;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .bc-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #cardOverlay .fmx-modal .bc-chip{width:38px;height:28px;border-radius:7px;background:linear-gradient(135deg,#f3d27a,#c99a2e);}
  html.design-lab #cardOverlay .fmx-modal .bc-num{font-size:14px;letter-spacing:3px;opacity:.9;}
  html.design-lab #cardOverlay .fmx-modal .bc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;min-width:0;}
  html.design-lab #cardOverlay .fmx-modal .bc-foot .bc-name{text-align:right;}
  /* Lista de bancos com busca (v8.197.0): ocupa o resto do painel e rola por dentro; a janela tem altura mínima pra lista caber. */
  html.design-lab :is(#accOverlay,#cardOverlay) .modal.fmx-modal{min-height:min(740px,calc(100vh - 48px));}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-side>*:not(.fmx-banks-box){flex-shrink:0;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-banks-box{flex:1 1 0;min-height:0;display:flex;flex-direction:column;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-banks-box>.fmx-eyebrow{margin-bottom:10px;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-search{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;margin-bottom:8px;border-radius:10px;background:var(--app-surface);border:1px solid var(--app-line);color:var(--muted);font-size:13px;flex-shrink:0;cursor:text;}
  html.design-lab[data-theme="dark"] :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-search{background:var(--input-bg);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-search:focus-within{border-color:var(--primary);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-search input{all:unset!important;flex:1!important;min-width:0!important;height:100%!important;font-size:14px!important;color:var(--text)!important;background:transparent!important;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-search input::placeholder{color:var(--muted);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-banks{display:flex;flex-direction:column;flex:1 1 0;height:0;min-height:172px;overflow-y:auto;padding:0 2px 0 0;scrollbar-width:thin;scrollbar-color:var(--app-line) transparent;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;border-bottom:1px solid var(--app-line);cursor:pointer;color:var(--text);font-size:14px;font-weight:500;flex-shrink:0;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-row:last-child{border-bottom:0;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-row:hover .fmx-bank-nm{color:var(--primary);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:8px;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-row.on{color:var(--primary);font-weight:600;}
  html.design-lab[data-theme="dark"] :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-row.on,html.design-lab[data-theme="dark"] :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-row:hover .fmx-bank-nm{color:#c9d5ff;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-ic{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;background:var(--bk);color:var(--bk-ink);font-size:9px;font-weight:800;letter-spacing:-.2px;}
  html.design-lab[data-theme="dark"] :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-ic{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-ck{font-size:13px;color:var(--primary);}
  html.design-lab[data-theme="dark"] :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-ck{color:#c9d5ff;}
  html.design-lab :is(#accOverlay,#cardOverlay) .fmx-modal .fmx-bank-empty{padding:14px 4px;color:var(--muted);font-size:13px;}
  html.design-lab #accOverlay .fmx-modal .fmx-seg button{font-size:12.5px;}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle{position:relative;height:30px;margin-top:8px;}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle .ln{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:9px;background:var(--app-line);}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle .seg{position:absolute;left:4%;width:92%;top:13px;height:4px;border-radius:9px;background:linear-gradient(90deg,var(--primary),var(--expense));}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle .dot{position:absolute;top:6px;width:18px;height:18px;border-radius:50%;border:3px solid var(--app-surface);transform:translateX(-50%);}
  html.design-lab[data-theme="dark"] #cardOverlay .fmx-modal .fmx-cycle .dot{border-color:var(--fmx-soft);}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle .is-close{left:4%;background:var(--primary);}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle .is-due{left:96%;background:var(--expense);}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle-legend{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);}
  html.design-lab #cardOverlay .fmx-modal .fmx-cycle-legend b{color:var(--text);}
  /* Meta: barras dos últimos meses com a linha do limite, sugestões */
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars{position:relative;display:flex;gap:14px;height:130px;margin-top:18px;padding:0 6px;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars .bt{flex:1;width:100%;position:relative;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars .bt i{position:absolute;left:0;right:0;bottom:0;border-radius:9px 9px 4px 4px;background:color-mix(in srgb,var(--primary) 30%,var(--app-surface));}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars .cur .bt i{background:var(--primary);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars small{height:13px;line-height:13px;font-size:11px;color:var(--muted);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars-area{position:absolute;left:0;right:0;top:0;bottom:19px;pointer-events:none;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars .lim{position:absolute;left:0;right:0;border-top:2px dashed var(--expense);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-bars .lim em{position:absolute;right:0;top:-17px;font-size:10.5px;font-style:normal;font-weight:700;color:var(--expense);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-catgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sugg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sg{all:unset;box-sizing:border-box;padding:10px 12px;border-radius:14px;border:1px solid var(--fmx-input-line);background:var(--app-surface);cursor:pointer;}
  html.design-lab[data-theme="dark"] #budgetOverlay .fmx-modal .fmx-sg{background:var(--fmx-soft);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sg:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--fmx-input-line));}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sg:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sg small{display:block;font-size:11.5px;color:var(--muted);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sg b{font-size:15px;font-weight:750;color:var(--text);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sg.on{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);}
  html.design-lab #budgetOverlay .fmx-modal .fmx-sg.on b{color:var(--primary);}
  /* Categoria: linha de exemplo e subcategorias como etiquetas */
  html.design-lab #catOverlay .fmx-modal .fmx-eyebrow-gap{margin-top:16px;}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--fmx-soft);}
  html.design-lab[data-theme="dark"] #catOverlay .fmx-modal .fmx-rowpv{background:var(--app-surface);}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv>div{min-width:0;}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv .ri{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--fmx-accent);font-size:14px;}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv .ri :is(i,.data-icon){color:#fff!important;}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv b{display:block;font-size:13.5px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv .rv{margin-left:auto;white-space:nowrap;font-size:13.5px;font-weight:700;color:var(--expense);}
  html.design-lab #catOverlay .fmx-modal .fmx-rowpv .rv.is-in{color:var(--income);}
  html.design-lab #catOverlay .fmx-modal .fmx-tags{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;min-height:96px;padding:10px;border-radius:14px;background:var(--fmx-input);border:1px solid var(--fmx-input-line);}
  html.design-lab #catOverlay .fmx-modal #catSubList{display:contents!important;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-empty{display:none!important;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-row{display:inline-flex!important;align-items:center;gap:7px;width:auto!important;height:34px!important;min-height:0!important;margin:0!important;padding:0 6px 0 10px!important;border-radius:10px!important;background:var(--app-surface)!important;border:1px solid var(--app-line)!important;box-shadow:0 2px 6px rgba(34,61,112,.06)!important;}
  html.design-lab[data-theme="dark"] #catOverlay .fmx-modal .cat-sub-row{background:var(--fmx-soft)!important;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-row.dragging{opacity:.6;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-grip{display:grid;place-items:center;color:var(--muted);font-size:11px;opacity:.6;cursor:grab;touch-action:none;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-row input.cat-sub-name{all:unset;box-sizing:content-box;width:var(--fmx-w,80px)!important;min-width:12px;height:30px;font-size:13px;font-weight:600;color:var(--text);cursor:text;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-actions{display:flex!important;gap:0!important;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-btn:not(.danger){display:none!important;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-btn.danger{all:unset;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:10px;cursor:pointer;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-btn.danger:hover{color:var(--expense);background:color-mix(in srgb,var(--expense) 10%,transparent);}
  html.design-lab #catOverlay .fmx-modal .cat-sub-add{flex:1 1 240px;display:flex!important;align-items:center;gap:6px;min-width:200px;margin:0!important;padding:0 6px!important;border:0!important;background:none!important;}
  html.design-lab #catOverlay .fmx-modal .cat-sub-add::before{content:"+";font-size:16px;font-weight:600;color:var(--muted);}
  html.design-lab #catOverlay .fmx-modal .cat-sub-add .btn{display:none!important;}
  html.design-lab #catOverlay .fmx-modal .fmx-sec .cat-sub-add input{all:unset;flex:1;height:34px;font-size:13px;color:var(--text);}
  html.design-lab #catOverlay .fmx-modal .cat-sub-add input::placeholder{color:var(--muted);opacity:.8;}
}
@media(min-width:901px){
  /* ajustes finos: ocultos continuam ocultos, subtítulo sem caixa, botões de escolha da altura dos campos */
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .field.hidden,html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-sec .hidden.hidden{display:none!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal>h2 .fmx-sub{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-grid .field .fmx-seg{padding:3px;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-grid .field .fmx-seg button{height:36px;}
  html.design-lab :is(#txOverlay,#accOverlay,#cardOverlay,#billOverlay,#debtOverlay,#budgetOverlay,#recOverlay,#catOverlay) .fmx-modal .fmx-stats small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-ring span{font-size:19px;}
  html.design-lab #catOverlay .fmx-modal .fmx-sec .cat-sub-row input.cat-sub-name{all:unset!important;box-sizing:content-box!important;width:var(--fmx-w,80px)!important;min-width:12px!important;height:30px!important;line-height:30px!important;font-size:13px!important;font-weight:600!important;color:var(--text)!important;cursor:text!important;}
  html.design-lab #catOverlay .fmx-modal .fmx-sec .cat-sub-add input#catSubInput{all:unset!important;flex:1!important;min-width:0!important;height:34px!important;font-size:13px!important;color:var(--text)!important;}
}
@media(min-width:901px) and (max-width:1180px){
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-g3{grid-template-columns:repeat(2,minmax(0,1fr));}
  html.design-lab :is(#txOverlay,#billOverlay,#debtOverlay,#recOverlay) .fmx-modal .fmx-g3>.field:has(#txDesc,#billDesc,#recDesc){grid-column:1/-1;}
  html.design-lab #budgetOverlay .fmx-modal .fmx-ring span{font-size:16px;}
  html.design-lab #accOverlay .fmx-modal .fmx-seg{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ===== Janelas de Ferramentas no computador (v8.177.0) =====
   Mockups aprovados pelo Tiago: uma janela só (#tdkOverlay) para Perfil,
   Personalizar dashboard, Avisos, Preferências, WhatsApp, Sincronização
   bancária, Google Agenda, Gmail, Backup e dados (+ cópias e histórico),
   Segurança (+ e-mail, senha, apagar dados) e Ajuda. Prévia à esquerda
   (.tdk-side), blocos à direita (.tdk-body), resumo no rodapé (.tdk-foot).
   Só existe no computador; o celular segue com as telas de sempre.
   Lógica em app-tools-desk*.js. */
@media(max-width:900px){html.design-lab #tdkOverlay,#tdkOverlay{display:none!important;}}
@media(min-width:901px){
  html.design-lab #tdkOverlay .tdk-modal{--tdk-soft:var(--app-surface-soft);--tdk-input:color-mix(in srgb,var(--app-surface-soft) 70%,var(--app-line));--tdk-input-line:color-mix(in srgb,var(--app-line) 80%,var(--muted) 8%);--tdk-accent:#305bf3;width:min(1080px,calc(100vw - 48px));height:min(780px,calc(100vh - 40px));display:grid;grid-template-columns:360px minmax(0,1fr);overflow:hidden;border-radius:28px;border:1px solid var(--app-line);background:var(--app-surface);box-shadow:0 30px 80px rgba(10,22,60,.35);color:var(--text);text-align:left;animation:modal-in .3s var(--fm-motion-spring,cubic-bezier(.22,.9,.32,1.05));}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-modal{--tdk-input:var(--input-bg);box-shadow:0 30px 80px rgba(0,0,0,.6);}
  html.design-lab #tdkOverlay button{font:inherit;}
  /* Coluna da prévia */
  html.design-lab #tdkOverlay .tdk-side{display:flex;flex-direction:column;gap:18px;min-height:0;overflow-y:auto;padding:28px 28px 24px;border-right:1px solid var(--app-line);background:linear-gradient(165deg,color-mix(in srgb,var(--tdk-accent) 16%,var(--app-surface)) 0%,var(--app-surface) 62%);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-side{background:linear-gradient(165deg,color-mix(in srgb,var(--tdk-accent) 22%,var(--app-surface)) 0%,var(--app-surface) 62%);}
  html.design-lab #tdkOverlay .tdk-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-mb{margin-bottom:10px;}
  html.design-lab #tdkOverlay .tdk-mt{margin-top:14px;}
  html.design-lab #tdkOverlay .tdk-pv{background:var(--app-surface);border:1px solid var(--app-line);border-radius:22px;padding:20px;box-shadow:0 12px 30px rgba(34,61,112,.10);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-pv{background:var(--tdk-soft);box-shadow:none;}
  html.design-lab #tdkOverlay .tdk-pv-center{padding:26px 20px 22px;text-align:center;}
  html.design-lab #tdkOverlay .tdk-pv-head{display:flex;align-items:center;gap:12px;}
  html.design-lab #tdkOverlay .tdk-pv-head b{display:block;font-size:16px;font-weight:750;}
  html.design-lab #tdkOverlay .tdk-pv-head small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px;}
  html.design-lab #tdkOverlay .tdk-badge{flex:0 0 46px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:19px;background:var(--tdk-accent);box-shadow:0 8px 18px color-mix(in srgb,var(--tdk-accent) 40%,transparent);}
  html.design-lab #tdkOverlay .tdk-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;}
  html.design-lab #tdkOverlay .tdk-note>i{color:var(--primary);}
  html.design-lab #tdkOverlay .tdk-facts{margin-top:16px;border-top:1px dashed var(--app-line);padding-top:14px;display:flex;flex-direction:column;gap:10px;}
  html.design-lab #tdkOverlay .tdk-facts-flat{margin:0;border:0;padding:0;}
  html.design-lab #tdkOverlay .tdk-facts-flat .tdk-fact>i{background:var(--app-surface);box-shadow:0 2px 8px rgba(34,61,112,.08);}
  html.design-lab #tdkOverlay .tdk-fact{display:flex;align-items:center;gap:10px;font-size:13px;}
  html.design-lab #tdkOverlay .tdk-fact>i{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--tdk-soft);color:var(--primary);font-size:12px;}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-fact>i{background:var(--app-surface);}
  html.design-lab #tdkOverlay .tdk-fact b{font-weight:650;}
  html.design-lab #tdkOverlay .tdk-m,html.design-lab #tdkOverlay .tdk-muted{color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-muted{font-size:12.5px;}
  html.design-lab #tdkOverlay .tdk-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
  html.design-lab #tdkOverlay .tdk-stats>div{background:var(--tdk-soft);border-radius:14px;padding:10px 12px;}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-stats>div{background:var(--app-surface);}
  html.design-lab #tdkOverlay .tdk-stats small{display:block;font-size:11.5px;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-stats b{font-size:16px;font-weight:750;}
  /* Coluna principal */
  html.design-lab #tdkOverlay .tdk-main{display:flex;flex-direction:column;min-height:0;min-width:0;}
  html.design-lab #tdkOverlay .tdk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 32px 18px;border-bottom:1px solid var(--app-line);}
  html.design-lab #tdkOverlay .tdk-top h2{margin:0;font-size:22px;font-weight:750;letter-spacing:-.4px;color:var(--text);}
  html.design-lab #tdkOverlay .tdk-top p{margin:3px 0 0;color:var(--muted);font-size:13px;}
  html.design-lab #tdkOverlay .tdk-back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12.5px;font-weight:650;color:var(--primary);}
  html.design-lab #tdkOverlay .tdk-back i{font-size:11px;}
  html.design-lab #tdkOverlay .tdk-x{all:unset;cursor:pointer;flex:0 0 36px;width:36px;height:36px;border-radius:12px;border:1px solid var(--app-line);display:grid;place-items:center;color:var(--muted);font-size:15px;box-sizing:border-box;}
  html.design-lab #tdkOverlay .tdk-x:hover{color:var(--text);background:var(--tdk-soft);}
  html.design-lab #tdkOverlay .tdk-body{flex:1;min-height:0;overflow-y:auto;padding:18px 32px 16px;display:flex;flex-direction:column;gap:14px;}
  html.design-lab #tdkOverlay .tdk-foot{display:flex!important;align-items:center;gap:12px!important;margin:0!important;padding:16px 32px 20px!important;border-top:1px solid var(--app-line)!important;background:var(--app-surface);position:static!important;}
  html.design-lab #tdkOverlay .tdk-sum{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-sum>i{color:var(--primary);}
  html.design-lab #tdkOverlay .tdk-sum.is-ok>i{color:var(--income);}
  html.design-lab #tdkOverlay .tdk-sum b{color:var(--text);font-weight:650;}
  html.design-lab #tdkOverlay .tdk-foot .btn{flex:0 0 auto!important;width:auto!important;height:46px;min-height:46px!important;padding:0 24px!important;border-radius:14px!important;font-size:14px!important;font-weight:700!important;display:inline-flex;align-items:center;gap:8px;}
  html.design-lab #tdkOverlay .tdk-foot .btn:not(.btn-ghost){padding:0 30px!important;}
  html.design-lab #tdkOverlay .tdk-foot .btn:disabled{opacity:.5;cursor:not-allowed;}
  html.design-lab #tdkOverlay .tdk-foot .btn.btn-danger{background:linear-gradient(100deg,#f07a88,#e45768)!important;box-shadow:0 10px 22px rgba(228,87,104,.3)!important;color:#fff!important;border:0!important;}
  html.design-lab #tdkOverlay .tdk-foot .btn.btn-danger:disabled{box-shadow:none!important;}
  /* Blocos */
  html.design-lab #tdkOverlay .tdk-sec{border:1px solid var(--app-line);border-radius:20px;padding:16px 18px 18px;background:var(--app-surface);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-sec{background:color-mix(in srgb,var(--tdk-soft) 55%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  html.design-lab #tdkOverlay .tdk-sec-h b{font-size:14.5px;font-weight:700;}
  html.design-lab #tdkOverlay .tdk-sec-h>small{margin-left:auto;color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:8px;}
  html.design-lab #tdkOverlay .tdk-si{flex:0 0 30px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:13px;color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-sec.danger{border-color:color-mix(in srgb,var(--expense) 28%,var(--app-line));}
  html.design-lab #tdkOverlay .tdk-sec.danger .tdk-si{color:var(--expense);background:color-mix(in srgb,var(--expense) 11%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-in{box-sizing:border-box;width:100%;height:44px!important;min-height:44px!important;border-radius:13px!important;background:var(--tdk-input)!important;border:1px solid var(--tdk-input-line)!important;font-size:14.5px!important;font-weight:500!important;padding:0 14px!important;color:var(--text)!important;box-shadow:none!important;display:flex;align-items:center;gap:8px;outline:none;}
  html.design-lab #tdkOverlay input.tdk-in:focus{border-color:var(--primary)!important;background:var(--app-surface)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)!important;}
  html.design-lab #tdkOverlay .tdk-ro{font-weight:600!important;}
  html.design-lab #tdkOverlay .tdk-ro>i{color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-suf{margin-left:auto;}
  html.design-lab #tdkOverlay .tdk-typed{font-weight:750!important;letter-spacing:1px;}
  html.design-lab #tdkOverlay .tdk-typed.ok{border-color:var(--expense)!important;}
  html.design-lab #tdkOverlay .tdk-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  html.design-lab #tdkOverlay .tdk-g21{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:end;}
  html.design-lab #tdkOverlay .tdk-hint{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-hint>i{color:var(--primary);margin-top:2px;}
  html.design-lab #tdkOverlay .tdk-body>.tdk-hint{margin:0;}
  html.design-lab #tdkOverlay .tdk-lead{margin:0 0 6px;font-size:13px;line-height:1.55;color:var(--text);}
  html.design-lab #tdkOverlay .tdk-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  html.design-lab #tdkOverlay .tdk-link{all:unset;cursor:pointer;color:var(--primary);font-weight:650;}
  html.design-lab #tdkOverlay .tdk-link:hover{text-decoration:underline;}
  html.design-lab #tdkOverlay .tdk-loading{display:flex;align-items:center;gap:10px;padding:18px 4px;color:var(--muted);font-size:13px;}
  html.design-lab #tdkOverlay .tdk-loading i{color:var(--primary);}
  html.design-lab #tdkOverlay .tdk-xs{font-size:10px;}
  html.design-lab #tdkOverlay .tdk-c-primary{color:var(--primary);}
  /* Linhas, chaves e botões pequenos */
  html.design-lab #tdkOverlay .tdk-rows{display:flex;flex-direction:column;}
  html.design-lab #tdkOverlay .tdk-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--app-line);}
  html.design-lab #tdkOverlay .tdk-rows>.tdk-row:first-child{border-top:0;padding-top:2px;}
  html.design-lab #tdkOverlay .tdk-ri{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:14px;color:var(--c,var(--primary));background:color-mix(in srgb,var(--c,var(--primary)) 12%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-rc{flex:1;min-width:0;}
  html.design-lab #tdkOverlay .tdk-rc>b{display:block;font-size:14px;font-weight:650;}
  html.design-lab #tdkOverlay .tdk-rc>small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px;line-height:1.4;}
  html.design-lab #tdkOverlay .tdk-row-btn{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--app-line);}
  html.design-lab #tdkOverlay .tdk-rows>.tdk-row-btn:first-child{border-top:0;}
  html.design-lab #tdkOverlay .tdk-row-btn .tdk-ri{flex-basis:32px;width:32px;height:32px;font-size:13px;}
  html.design-lab #tdkOverlay .tdk-row-btn:hover .tdk-rc>b{color:var(--primary);}
  html.design-lab #tdkOverlay .tdk-go{color:var(--muted);font-size:12px;}
  html.design-lab #tdkOverlay .tdk-val{font-size:14px;white-space:nowrap;}
  html.design-lab #tdkOverlay .tdk-tg{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 44px;width:44px;height:26px;border-radius:99px;background:var(--app-line);position:relative;transition:background .15s ease;}
  html.design-lab #tdkOverlay .tdk-tg::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:left .15s ease;}
  html.design-lab #tdkOverlay .tdk-tg.on{background:var(--income);}
  html.design-lab #tdkOverlay .tdk-tg.on::after{left:21px;}
  html.design-lab #tdkOverlay .tdk-tg:focus-visible,html.design-lab #tdkOverlay .tdk-mini:focus-visible,html.design-lab #tdkOverlay .tdk-tcard:focus-visible,html.design-lab #tdkOverlay .tdk-chip:focus-visible,html.design-lab #tdkOverlay .tdk-vr:focus-visible,html.design-lab #tdkOverlay .tdk-av:focus-visible,html.design-lab #tdkOverlay .tdk-cl:focus-visible,html.design-lab #tdkOverlay .tdk-seg button:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  html.design-lab #tdkOverlay .tdk-mini{all:unset;box-sizing:border-box;cursor:pointer;height:34px;padding:0 14px;border-radius:11px;font-size:13px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--app-line);background:var(--tdk-soft);color:var(--text);white-space:nowrap;}
  html.design-lab #tdkOverlay .tdk-mini:hover:not(:disabled){border-color:color-mix(in srgb,var(--primary) 35%,var(--app-line));}
  html.design-lab #tdkOverlay .tdk-mini:disabled{opacity:.5;cursor:not-allowed;}
  html.design-lab #tdkOverlay .tdk-mini.p{background:var(--primary);color:#fff;border-color:transparent;}
  html.design-lab #tdkOverlay .tdk-mini.d{color:var(--expense);background:color-mix(in srgb,var(--expense) 8%,var(--app-surface));border-color:color-mix(in srgb,var(--expense) 25%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-mini.g{color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--app-surface));border-color:transparent;}
  html.design-lab #tdkOverlay .tdk-mini.wa{background:#25D366;color:#fff;border-color:transparent;height:42px;padding:0 18px;text-decoration:none;}
  html.design-lab #tdkOverlay .tdk-mini.tall{height:44px;}
  html.design-lab #tdkOverlay .tdk-sec-h .tdk-mini{height:30px;}
  html.design-lab #tdkOverlay .tdk-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--income) 12%,var(--app-surface));color:var(--income);white-space:nowrap;}
  html.design-lab #tdkOverlay .tdk-pill.warn{background:color-mix(in srgb,var(--vault) 14%,var(--app-surface));color:#b9761f;}
  html.design-lab #tdkOverlay .tdk-dot-ok{width:8px;height:8px;border-radius:50%;background:var(--income);display:inline-block;margin-left:6px;vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,var(--income) 25%,transparent);}
  html.design-lab #tdkOverlay .tdk-cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  html.design-lab #tdkOverlay .tdk-tcard{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--tdk-input-line);background:var(--tdk-input);border-radius:15px;padding:12px 13px;display:flex;gap:11px;align-items:flex-start;text-align:left;}
  html.design-lab #tdkOverlay .tdk-tcard .tdk-ri{flex-basis:34px;width:34px;height:34px;font-size:13.5px;}
  html.design-lab #tdkOverlay .tdk-tcard .tdk-rc>b{font-size:13.5px;}
  html.design-lab #tdkOverlay .tdk-tcard .tdk-rc>small{font-size:12px;}
  html.design-lab #tdkOverlay .tdk-tcard .tdk-tg{margin-top:4px;}
  html.design-lab #tdkOverlay .tdk-tcard.on{background:var(--app-surface);border-color:color-mix(in srgb,var(--primary) 30%,var(--tdk-input-line));}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-tcard.on{background:var(--tdk-soft);}
  html.design-lab #tdkOverlay .tdk-tcard:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--tdk-input-line));}
  html.design-lab #tdkOverlay .tdk-act .tdk-go{margin-top:10px;}
  html.design-lab #tdkOverlay .tdk-tip{cursor:default;align-items:center;}
  html.design-lab #tdkOverlay .tdk-tip:hover{border-color:var(--tdk-input-line);}
  html.design-lab #tdkOverlay .tdk-status{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--income) 9%,var(--app-surface));border:1px solid color-mix(in srgb,var(--income) 25%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-status.warn{background:color-mix(in srgb,var(--vault) 10%,var(--app-surface));border-color:color-mix(in srgb,var(--vault) 30%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-si2{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--income);color:#fff;font-size:15px;}
  html.design-lab #tdkOverlay .tdk-status.warn .tdk-si2{background:var(--vault);}
  html.design-lab #tdkOverlay .tdk-status.small{padding:12px 14px;}
  html.design-lab #tdkOverlay .tdk-status.small .tdk-si2{flex-basis:32px;width:32px;height:32px;font-size:13px;}
  html.design-lab #tdkOverlay .tdk-status .tdk-line{flex-wrap:nowrap;}
  html.design-lab #tdkOverlay .tdk-chips{display:flex;flex-wrap:wrap;gap:8px;}
  html.design-lab #tdkOverlay .tdk-chip{all:unset;box-sizing:border-box;cursor:pointer;height:36px;padding:0 14px;border-radius:12px;border:1px solid var(--tdk-input-line);background:var(--tdk-input);display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text);}
  html.design-lab #tdkOverlay .tdk-chip>i{font-size:12px;opacity:.75;}
  html.design-lab #tdkOverlay .tdk-chip .tdk-plus{opacity:.5;margin-left:2px;}
  html.design-lab #tdkOverlay .tdk-chip:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--tdk-input-line));}
  html.design-lab #tdkOverlay .tdk-chip.on{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--app-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);}
  html.design-lab #tdkOverlay .tdk-bank{flex:0 0 22px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:10px;overflow:hidden;}
  html.design-lab #tdkOverlay .tdk-bank i{color:#fff;font-size:10px;}
  html.design-lab #tdkOverlay .tdk-bank img{width:100%;height:100%;object-fit:contain;background:#fff;}
  html.design-lab #tdkOverlay .tdk-bank.big{flex-basis:36px;width:36px;height:36px;border-radius:11px;font-size:14px;}
  html.design-lab #tdkOverlay .tdk-bank.big i{font-size:14px;}
  html.design-lab #tdkOverlay .tdk-seg{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:6px;padding:5px;border-radius:15px;background:var(--tdk-input);border:1px solid var(--tdk-input-line);}
  html.design-lab #tdkOverlay .tdk-seg button{all:unset;box-sizing:border-box;cursor:pointer;height:38px;padding:0 6px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;}
  html.design-lab #tdkOverlay .tdk-seg button:hover{color:var(--text);}
  html.design-lab #tdkOverlay .tdk-seg button.on{background:var(--app-surface);color:var(--primary);box-shadow:0 3px 10px rgba(34,61,112,.13);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-seg button.on{background:#22305a;color:#fff;}
  /* Perfil */
  html.design-lab #tdkOverlay .tdk-ava{width:110px;height:110px;margin:6px auto 0;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#fff;font-size:42px;background:var(--tdk-ava);box-shadow:0 16px 32px color-mix(in srgb,var(--tdk-ava) 40%,transparent);}
  html.design-lab #tdkOverlay .tdk-ava img,html.design-lab #tdkOverlay .tdk-sbar-ava img{width:100%;height:100%;object-fit:cover;}
  html.design-lab #tdkOverlay .tdk-ava .profile-avatar-initials{font-size:38px;font-weight:750;}
  html.design-lab #tdkOverlay .tdk-pname{margin-top:14px;font-size:20px;font-weight:750;word-break:break-word;}
  html.design-lab #tdkOverlay .tdk-psub{margin-top:2px;color:var(--muted);font-size:12.5px;}
  html.design-lab #tdkOverlay .tdk-sbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#0e1631;color:#fff;font-weight:700;font-size:13.5px;}
  html.design-lab #tdkOverlay .tdk-sbar-ava{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-size:13px;background:var(--tdk-ava);color:#fff;}
  html.design-lab #tdkOverlay .tdk-sbar-ava .profile-avatar-initials{font-size:12px;}
  html.design-lab #tdkOverlay .tdk-avs{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;}
  html.design-lab #tdkOverlay .tdk-av{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:1;border-radius:13px;border:1px solid var(--tdk-input-line);background:var(--tdk-input);display:grid;place-items:center;color:var(--muted);font-size:16px;}
  html.design-lab #tdkOverlay .tdk-av.on{background:var(--tdk-accent);color:#fff;border-color:transparent;box-shadow:0 0 0 3px var(--app-surface),0 0 0 5px var(--tdk-accent);}
  html.design-lab #tdkOverlay .tdk-cols{display:flex;gap:10px;}
  html.design-lab #tdkOverlay .tdk-cl{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--c);}
  html.design-lab #tdkOverlay .tdk-cl.on{box-shadow:0 0 0 3px var(--app-surface),0 0 0 5px var(--c);}
  /* Personalizar dashboard */
  html.design-lab #tdkOverlay .tdk-dash{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
  html.design-lab #tdkOverlay .tdk-dw{border-radius:12px;background:var(--tdk-soft);border:1px solid var(--app-line);padding:9px 10px;min-height:58px;display:flex;flex-direction:column;gap:6px;min-width:0;}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-dw{background:var(--app-surface);}
  html.design-lab #tdkOverlay .tdk-dw b{font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.design-lab #tdkOverlay .tdk-dw b i{color:var(--primary);font-size:10px;}
  html.design-lab #tdkOverlay .tdk-dw.w{grid-column:span 2;}
  html.design-lab #tdkOverlay .tdk-dw.new{border:2px dashed var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-dw-ln{height:6px;border-radius:9px;background:var(--app-line);}
  html.design-lab #tdkOverlay .tdk-dw-bars{display:flex;align-items:flex-end;gap:4px;height:34px;}
  html.design-lab #tdkOverlay .tdk-dw-bars i{flex:1;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--primary) 35%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-dw-bars i:nth-child(odd){background:color-mix(in srgb,var(--income) 55%,var(--app-surface));}
  html.design-lab #tdkOverlay .tdk-dw-donut{width:34px;height:34px;border-radius:50%;background:conic-gradient(#e4793b 0 35%,#3b82f6 0 58%,#8062d4 0 78%,#00b98e 0);-webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px);}
  html.design-lab #tdkOverlay .tdk-row.dcfg{position:relative;cursor:default;user-select:none;touch-action:auto;margin:0;border-radius:0;border:0;border-top:1px solid var(--app-line);background:none;padding:11px 0;}
  html.design-lab #tdkOverlay .tdk-rows>.tdk-row.dcfg:first-child{border-top:0;}
  html.design-lab #tdkOverlay .tdk-row.dcfg.dragging{opacity:.55;background:var(--tdk-soft);border-radius:12px;}
  html.design-lab #tdkOverlay .tdk-row.dcfg.drop-before::before,html.design-lab #tdkOverlay .tdk-row.dcfg.drop-after::after{content:'';position:absolute;left:0;right:0;height:3px;border-radius:4px;background:var(--primary);}
  html.design-lab #tdkOverlay .tdk-row.dcfg.drop-before::before{top:-2px;}
  html.design-lab #tdkOverlay .tdk-row.dcfg.drop-after::after{bottom:-2px;}
  html.design-lab #tdkOverlay .tdk-grip{width:28px;height:30px;display:grid;place-items:center;color:var(--muted);opacity:.7;font-size:13px;cursor:grab;touch-action:none;border-radius:8px;}
  html.design-lab #tdkOverlay .tdk-grip:hover{opacity:1;background:var(--tdk-soft);}
  /* Avisos */
  html.design-lab #tdkOverlay .tdk-bell{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
  html.design-lab #tdkOverlay .tdk-bn{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border-radius:13px;background:var(--tdk-soft);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-bn{background:var(--app-surface);}
  html.design-lab #tdkOverlay .tdk-bn>i{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:12px;color:#fff;background:var(--c);}
  html.design-lab #tdkOverlay .tdk-bn b{display:block;font-size:12.5px;}
  html.design-lab #tdkOverlay .tdk-bn small{display:block;font-size:12px;color:var(--muted);line-height:1.4;}
  html.design-lab #tdkOverlay .tdk-bn small b{display:inline;color:var(--text);}
  html.design-lab #tdkOverlay .tdk-bn small i{display:none;}
  html.design-lab #tdkOverlay .tdk-bn.off{opacity:.38;}
  /* Preferências */
  html.design-lab #tdkOverlay .tdk-bal{border-radius:20px;padding:20px;color:#fff;background:linear-gradient(135deg,#305bf3,#5b8cff);box-shadow:0 18px 36px rgba(48,91,243,.3);position:relative;overflow:hidden;}
  html.design-lab #tdkOverlay .tdk-bal::after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.1);}
  html.design-lab #tdkOverlay .tdk-bal small{display:block;opacity:.85;font-size:12px;}
  html.design-lab #tdkOverlay .tdk-bal strong{display:block;margin:4px 0 2px;font-size:30px;font-weight:750;letter-spacing:-.5px;}
  html.design-lab #tdkOverlay .tdk-bal-mm{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
  html.design-lab #tdkOverlay .tdk-bal-mm b{display:block;font-size:15px;}
  html.design-lab #tdkOverlay .tdk-bal-tabs{display:inline-flex;background:rgba(255,255,255,.18);border-radius:99px;padding:3px;margin-top:12px;font-size:11.5px;font-weight:700;}
  html.design-lab #tdkOverlay .tdk-bal-tabs span{padding:4px 11px;border-radius:99px;}
  html.design-lab #tdkOverlay .tdk-bal-tabs span.on{background:#fff;color:var(--primary);}
  /* WhatsApp, Agenda, Gmail */
  html.design-lab #tdkOverlay .tdk-chat{border-radius:20px;overflow:hidden;border:1px solid var(--app-line);background:#efe7dc;box-shadow:0 12px 30px rgba(34,61,112,.12);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-chat{background:#0b141a;}
  html.design-lab #tdkOverlay .tdk-chat-h{background:#075e54;color:#fff;display:flex;align-items:center;gap:10px;padding:11px 14px;}
  html.design-lab #tdkOverlay .tdk-chat-a{width:32px;height:32px;border-radius:50%;background:#fff;color:#305bf3;display:grid;place-items:center;font-weight:800;font-size:12px;}
  html.design-lab #tdkOverlay .tdk-chat-h b{display:block;font-size:13.5px;}
  html.design-lab #tdkOverlay .tdk-chat-h small{font-size:11px;opacity:.8;}
  html.design-lab #tdkOverlay .tdk-chat-b{padding:12px;display:flex;flex-direction:column;gap:8px;}
  html.design-lab #tdkOverlay .tdk-bub{max-width:86%;padding:8px 10px;border-radius:10px;font-size:12.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08);}
  html.design-lab #tdkOverlay .tdk-bub.me{align-self:flex-end;background:#d9fdd3;color:#111;}
  html.design-lab #tdkOverlay .tdk-bub.bot{align-self:flex-start;background:#fff;color:#111;}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-bub.me{background:#005c4b;color:#e9edef;}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-bub.bot{background:#202c33;color:#e9edef;}
  html.design-lab #tdkOverlay .tdk-bub em{display:block;font-style:normal;font-size:10px;opacity:.55;text-align:right;margin-top:2px;}
  html.design-lab #tdkOverlay .tdk-code{font-size:38px;font-weight:750;letter-spacing:10px;text-align:center;padding:14px;border-radius:16px;background:var(--tdk-soft);border:1px dashed var(--primary);color:var(--primary);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-code{background:var(--app-surface);}
  html.design-lab #tdkOverlay .tdk-stepper{display:flex;flex-direction:column;gap:12px;}
  html.design-lab #tdkOverlay .tdk-st{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.45;}
  html.design-lab #tdkOverlay .tdk-st b{font-weight:650;}
  html.design-lab #tdkOverlay .tdk-st a{color:var(--primary);}
  html.design-lab #tdkOverlay .tdk-n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--primary) 12%,var(--app-surface));color:var(--primary);}
  html.design-lab #tdkOverlay .tdk-st.done .tdk-n{background:var(--income);color:#fff;}
  html.design-lab #tdkOverlay .tdk-st.cur .tdk-n{background:var(--primary);color:#fff;}
  html.design-lab #tdkOverlay .tdk-m2{display:block;color:var(--muted);font-size:12px;}
  html.design-lab #tdkOverlay .tdk-ex{display:flex;flex-direction:column;gap:8px;}
  html.design-lab #tdkOverlay .tdk-ex span{font-size:13px;padding:9px 12px;border-radius:12px;background:var(--tdk-soft);border:1px dashed var(--app-line);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-ex span{background:var(--app-surface);}
  html.design-lab #tdkOverlay .tdk-ex span i{color:var(--primary);margin-right:7px;}
  html.design-lab #tdkOverlay .tdk-lk{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--app-line);}
  html.design-lab #tdkOverlay .tdk-rows>.tdk-lk:first-child{border-top:0;padding-top:0;}
  html.design-lab #tdkOverlay .tdk-tag{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px;white-space:nowrap;background:color-mix(in srgb,var(--vault) 15%,var(--app-surface));color:#b9761f;}
  html.design-lab #tdkOverlay .tdk-tag.ok{background:color-mix(in srgb,var(--income) 13%,var(--app-surface));color:var(--income);}
  html.design-lab #tdkOverlay .tdk-tag.error{background:color-mix(in srgb,var(--expense) 12%,var(--app-surface));color:var(--expense);}
  html.design-lab #tdkOverlay .tdk-lk .tdk-mini{width:34px;padding:0;}
  html.design-lab #tdkOverlay .tdk-ev{border-radius:16px;background:var(--app-surface);border:1px solid var(--app-line);padding:14px;display:flex;gap:12px;box-shadow:0 10px 24px rgba(34,61,112,.08);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-ev{background:var(--tdk-soft);}
  html.design-lab #tdkOverlay .tdk-ev-d{flex:0 0 50px;border-radius:12px;background:var(--tdk-accent);color:#fff;text-align:center;padding:6px 0;align-self:flex-start;}
  html.design-lab #tdkOverlay .tdk-ev-d small{display:block;font-size:10.5px;font-weight:700;opacity:.9;}
  html.design-lab #tdkOverlay .tdk-ev-d b{font-size:21px;}
  html.design-lab #tdkOverlay .tdk-ev .tdk-rc>small{margin-top:3px;font-size:12px;}
  html.design-lab #tdkOverlay .tdk-mail{border-radius:16px;background:var(--app-surface);border:1px solid var(--app-line);overflow:hidden;box-shadow:0 10px 24px rgba(34,61,112,.08);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-mail{background:var(--tdk-soft);}
  html.design-lab #tdkOverlay .tdk-mail-h{padding:12px 14px;border-bottom:1px solid var(--app-line);font-size:12.5px;display:flex;flex-direction:column;gap:5px;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-mail-h b{color:var(--text);font-weight:600;}
  html.design-lab #tdkOverlay .tdk-mail-b{padding:12px 14px;font-size:12.5px;line-height:1.55;}
  html.design-lab #tdkOverlay .tdk-att{display:flex;width:max-content;gap:7px;align-items:center;margin-top:10px;padding:6px 10px;border-radius:10px;background:var(--tdk-soft);font-size:12px;font-weight:600;}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-att{background:var(--app-surface);}
  html.design-lab #tdkOverlay .tdk-att i{color:#EA4335;}
  /* Backup, cópias e histórico */
  html.design-lab #tdkOverlay .tdk-tl{display:flex;flex-direction:column;margin-top:16px;position:relative;}
  html.design-lab #tdkOverlay .tdk-tl::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--app-line);}
  html.design-lab #tdkOverlay .tdk-ti{display:flex;gap:12px;align-items:flex-start;padding:7px 0;position:relative;}
  html.design-lab #tdkOverlay .tdk-ti>i{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--app-surface);border:2px solid var(--app-line);color:var(--muted);z-index:1;box-sizing:border-box;}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-ti>i{background:var(--tdk-soft);}
  html.design-lab #tdkOverlay .tdk-ti.on>i{background:var(--primary);border-color:var(--primary);color:#fff;}
  html.design-lab #tdkOverlay .tdk-ti b{display:block;font-size:13px;}
  html.design-lab #tdkOverlay .tdk-ti small{font-size:11.5px;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-filt-row{display:flex;align-items:center;gap:10px;}
  html.design-lab #tdkOverlay .tdk-filt{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto;}
  html.design-lab #tdkOverlay .tdk-filt-row .tdk-filt{flex:1;flex-wrap:nowrap;min-width:0;}
  html.design-lab #tdkOverlay .tdk-filt .tdk-mini{height:32px;padding:0 12px;}
  html.design-lab #tdkOverlay .tdk-vlist{display:flex;flex-direction:column;gap:8px;}
  html.design-lab #tdkOverlay .tdk-day{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:10px 0 0;}
  html.design-lab #tdkOverlay .tdk-vlist>.tdk-day:first-child{margin-top:0;}
  html.design-lab #tdkOverlay .tdk-vr{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;border:1px solid var(--tdk-input-line);background:var(--tdk-input);text-align:left;width:100%;}
  html.design-lab #tdkOverlay button.tdk-vr{cursor:pointer;}
  html.design-lab #tdkOverlay button.tdk-vr:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--tdk-input-line));}
  html.design-lab #tdkOverlay .tdk-vr.sel{background:var(--app-surface);border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-vr.sel{background:var(--tdk-soft);}
  html.design-lab #tdkOverlay .tdk-vr .tdk-ri{flex-basis:32px;width:32px;height:32px;border-radius:10px;font-size:13px;}
  html.design-lab #tdkOverlay .tdk-vr .tdk-rc>b{font-size:13.5px;}
  html.design-lab #tdkOverlay .tdk-vr .tdk-rc>small{font-size:12px;}
  html.design-lab #tdkOverlay .tdk-check{color:var(--primary);font-size:18px;}
  html.design-lab #tdkOverlay .tdk-impact{margin-top:14px;border-top:1px dashed var(--app-line);padding-top:14px;display:flex;flex-direction:column;gap:12px;}
  html.design-lab #tdkOverlay .tdk-imp{display:flex;gap:8px;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-imp b{color:var(--text);font-weight:650;font-size:13px;white-space:nowrap;}
  /* Segurança */
  html.design-lab #tdkOverlay .tdk-score{display:flex;align-items:center;gap:16px;}
  html.design-lab #tdkOverlay .tdk-ring{flex:0 0 96px;width:96px;height:96px;position:relative;}
  html.design-lab #tdkOverlay .tdk-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
  html.design-lab #tdkOverlay .tdk-ring circle{fill:none;stroke-width:9;}
  html.design-lab #tdkOverlay .tdk-ring-track{stroke:var(--app-line);}
  html.design-lab #tdkOverlay .tdk-ring-bar{stroke-linecap:round;}
  html.design-lab #tdkOverlay .tdk-ring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:750;font-size:21px;}
  html.design-lab #tdkOverlay .tdk-kv{display:flex;flex-direction:column;gap:2px;}
  html.design-lab #tdkOverlay .tdk-kv small{color:var(--muted);font-size:12px;}
  html.design-lab #tdkOverlay .tdk-kv strong{font-size:22px;font-weight:750;letter-spacing:-.5px;}
  html.design-lab #tdkOverlay .tdk-kv em{font-style:normal;color:var(--muted);font-size:12.5px;}
  html.design-lab #tdkOverlay .tdk-chk{display:flex;flex-direction:column;gap:10px;margin-top:16px;border-top:1px dashed var(--app-line);padding-top:14px;}
  html.design-lab #tdkOverlay .tdk-chk>div{display:flex;gap:10px;align-items:center;font-size:13px;}
  html.design-lab #tdkOverlay .tdk-chk i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;background:var(--income);}
  html.design-lab #tdkOverlay .tdk-chk .no{color:var(--muted);}
  html.design-lab #tdkOverlay .tdk-chk .no i{background:var(--app-line);color:var(--muted);}
  /* Ajuda */
  html.design-lab #tdkOverlay .tdk-search{height:46px;border-radius:14px;background:var(--tdk-input);border:1px solid var(--tdk-input-line);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--muted);flex:0 0 auto;}
  html.design-lab #tdkOverlay .tdk-search:focus-within{border-color:var(--primary);background:var(--app-surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent);}
  html.design-lab #tdkOverlay .tdk-search input{all:unset;flex:1;min-width:0;height:44px;font-size:14px!important;color:var(--text)!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
  html.design-lab #tdkOverlay .tdk-art{border-radius:16px;padding:16px 18px;background:color-mix(in srgb,var(--primary) 6%,var(--app-surface));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--app-line));}
  html.design-lab #tdkOverlay .tdk-art h4{margin:0 0 6px;font-size:15.5px;font-weight:750;}
  html.design-lab #tdkOverlay .tdk-art p{margin:0;font-size:13px;line-height:1.6;color:var(--text);}
  html.design-lab #tdkOverlay .tdk-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
  html.design-lab #tdkOverlay .tdk-cmp>div{background:var(--app-surface);border-radius:12px;padding:10px 12px;border:1px solid var(--app-line);font-size:12px;color:var(--muted);}
  html.design-lab[data-theme="dark"] #tdkOverlay .tdk-cmp>div{background:var(--tdk-soft);}
  html.design-lab #tdkOverlay .tdk-cmp b{display:block;color:var(--text);font-size:15px;}
  html.design-lab #tdkOverlay .tdk-cmp small{display:block;font-size:12px;}
}

/* ===== Janela "Excluir lançamento" (v8.178.0, app-tx-delete.js) ===== */
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-modal{max-width:470px!important;width:100%;overflow-x:hidden!important;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-body{display:flex;flex-direction:column;gap:16px;margin:4px 0 18px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--app-surface-soft);border:1px solid var(--app-line);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-item-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:16px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-item-info b{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-item-info>span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-tags{display:flex;gap:6px;margin-top:4px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-tag{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-item-amt{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-label{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;display:flex;align-items:center;gap:6px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:14px;background:var(--app-surface-soft);border:1px solid var(--app-line);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-seg-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 8px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;font:inherit;text-align:center;min-width:0;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-seg-btn b{font-size:14px;font-weight:700;color:inherit;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-seg-btn span{font-size:12px;opacity:.85;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-seg-btn.on{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(23,33,61,.1);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opts{display:flex;flex-direction:column;gap:8px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--app-line);background:var(--card);color:var(--text);cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,background .15s;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-ico{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:15px;background:var(--app-surface-soft);color:var(--muted);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-txt b{font-size:15px;font-weight:700;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-txt span{font-size:13px;line-height:1.45;color:var(--muted);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-radio{flex:0 0 20px;width:20px;height:20px;margin-top:8px;border-radius:50%;border:2px solid var(--app-line);box-sizing:border-box;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-delete.on{border-color:var(--expense);background:color-mix(in srgb,var(--expense) 6%,var(--card));}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-delete.on .dtx-opt-ico{background:color-mix(in srgb,var(--expense) 14%,transparent);color:var(--expense);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-delete.on .dtx-radio{border:6px solid var(--expense);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-reverse.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card));}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-reverse.on .dtx-opt-ico{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-reverse.on .dtx-radio{border:6px solid var(--primary);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-effect{padding:12px 14px;border-radius:14px;background:var(--app-surface-soft);border:1px dashed var(--app-line);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-effect .dtx-label{margin-bottom:6px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-effect ul{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-effect li{font-size:13.5px;line-height:1.45;color:var(--text);}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .modal-actions{display:flex!important;flex-direction:row!important;gap:10px!important;overflow:visible!important;flex-wrap:nowrap!important;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .modal-actions .btn{flex:1 1 0!important;min-width:0!important;min-height:48px!important;height:auto!important;flex-direction:row!important;gap:8px!important;white-space:nowrap!important;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .modal-actions .dtx-go{flex:1.6 1 0!important;background:var(--expense)!important;border-color:var(--expense)!important;color:#fff!important;box-shadow:0 8px 20px color-mix(in srgb,var(--expense) 30%,transparent)!important;}
html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .modal-actions .dtx-go.dtx-go-reverse{background:var(--primary)!important;border-color:var(--primary)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 30%,transparent)!important;}
@media(max-width:900px){html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-modal{max-height:92vh;overflow-y:auto!important;}html.design-lab :is(#deleteTxOverlay,#txScopeOverlay,#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-opt-txt span{font-size:12.5px;}}
/* "Só esta ou esta e as próximas?" ao editar parcela (v8.179.0, app-tx-scope.js) */
html.design-lab #txScopeOverlay{z-index:2050!important;}
html.design-lab #txScopeOverlay .dtx-modal{max-width:440px!important;}
html.design-lab #txScopeOverlay .tsc-q{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--text);}
html.design-lab #txScopeOverlay .tsc-opt{align-items:center;}
html.design-lab #txScopeOverlay .tsc-opt:hover,html.design-lab #txScopeOverlay .tsc-opt:focus-visible{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card));}
html.design-lab #txScopeOverlay .tsc-opt:hover .dtx-opt-ico{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);}
html.design-lab #txScopeOverlay .tsc-go{color:var(--muted);font-size:13px;}
html.design-lab #txScopeOverlay .dtx-body{margin-bottom:10px;}

/* Ícones discretos ao lado do nome: assinatura e compra que ainda não entrou (v8.180.1) */
html.design-lab .tx-flag{display:inline-flex;align-items:center;margin-left:6px;font-size:11px;color:var(--muted);opacity:.85;vertical-align:1px;cursor:default;}
html.design-lab .tx-flag+.tx-flag{margin-left:5px;}

/* Política de Privacidade e Termos de Uso no computador (v8.181.0, app-tools-desk-e.js) */
@media(min-width:901px){
html.design-lab #tdkOverlay .tdk-accs{border:1px solid var(--app-line);border-radius:18px;background:var(--app-surface);overflow:hidden;}
html.design-lab #tdkOverlay .tdk-acc+.tdk-acc{border-top:1px solid var(--app-line);}
html.design-lab #tdkOverlay .tdk-acc-h{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 18px;}
html.design-lab #tdkOverlay .tdk-acc-h b{flex:1;font-size:14px;font-weight:650;color:var(--text);}
html.design-lab #tdkOverlay .tdk-acc-h i{font-size:12px;color:var(--muted);transition:transform .18s;}
html.design-lab #tdkOverlay .tdk-acc-h:hover b{color:var(--primary);}
html.design-lab #tdkOverlay .tdk-acc-h:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
html.design-lab #tdkOverlay .tdk-acc.on .tdk-acc-h i{transform:rotate(180deg);color:var(--primary);}
html.design-lab #tdkOverlay .tdk-acc.on .tdk-acc-h b{color:var(--primary);}
html.design-lab #tdkOverlay .tdk-legal{padding:0 18px 16px;}
html.design-lab #tdkOverlay .tdk-legal p{margin:0 0 8px;font-size:13.5px;line-height:1.65;color:var(--text-2,var(--text));}
html.design-lab #tdkOverlay .tdk-legal p:last-child{margin-bottom:0;}
html.design-lab #tdkOverlay .tdk-legal strong{font-weight:650;color:var(--text);}
html.design-lab #tdkOverlay .tdk-legal .legal-contact{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--tdk-soft);color:var(--primary);font-weight:600;font-size:13px;}
}

/* ===== Contas compactas no computador (v8.182.0, app-accounts-compact.js) =====
   Lista de contas à esquerda e extrato sempre aberto à direita. O #accounts
   ganha a classe .acc-compact-on só no computador; o .panel que embrulha a
   faixa azul e a lista vira display:contents para os dois entrarem na grade. */
@media(min-width:901px){
html.design-lab #accounts.section.active.acc-compact-on{display:grid!important;grid-template-columns:minmax(340px,440px) minmax(0,1fr)!important;column-gap:20px!important;align-items:start!important;}
html.design-lab #accounts.acc-compact-on>*{grid-column:1/-1;}
html.design-lab #accounts.acc-compact-on>.panel:not(.account-statement-panel){display:contents!important;}
html.design-lab #accounts.acc-compact-on #accountTotalBar{grid-column:1/-1;}
html.design-lab #accounts.acc-compact-on #accountList.acc-compact{grid-column:1!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;background:var(--card)!important;border:1px solid var(--app-line)!important;border-radius:22px!important;padding:18px!important;}
html.design-lab #accounts.acc-compact-on>.account-statement-panel.is-open{grid-column:2!important;margin-top:0!important;}
html.design-lab #accounts.acc-compact-on>.account-statement-panel.is-open h3#accountStatementHead{margin:10px 0 4px!important;}
html.design-lab #accountList.acc-compact .acc-list-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 8px!important;width:100%!important;}
html.design-lab #accountList.acc-compact .acc-list-head h3{margin:0!important;font-size:17px!important;font-weight:700!important;color:var(--text)!important;}
html.design-lab #accountList.acc-compact .acc-add{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--primary);background:var(--accent-soft,rgba(48,91,243,.1));border-radius:10px;padding:7px 12px;display:inline-flex;align-items:center;gap:6px;}
html.design-lab #accountList.acc-compact .acc-row{position:relative;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;cursor:pointer;color:var(--text);transition:background .15s;}
html.design-lab #accountList.acc-compact .acc-row:hover{background:var(--app-surface-soft);}
html.design-lab #accountList.acc-compact .acc-row.is-selected{background:var(--accent-soft,rgba(48,91,243,.1));box-shadow:inset 0 0 0 1.5px var(--primary);}
html.design-lab #accountList.acc-compact .acc-row-badge{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--card);border:1px solid var(--app-line);overflow:hidden;}
html.design-lab #accountList.acc-compact .acc-row-badge img{width:22px;height:22px;border-radius:6px;}
html.design-lab #accountList.acc-compact .acc-row-badge-sm{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:13px;}
html.design-lab #accountList.acc-compact .acc-row-copy{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;}
html.design-lab #accountList.acc-compact .acc-row-copy b{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #accountList.acc-compact .acc-row-copy span{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #accountList.acc-compact .acc-row-val{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;}
html.design-lab #accountList.acc-compact .acc-row-vault{margin-left:22px;padding:7px 12px;}
html.design-lab #accountList.acc-compact .acc-row-vault .acc-row-copy b{font-size:14px;font-weight:500;}
html.design-lab #accountList.acc-compact .acc-row-vault .acc-row-val{font-size:14px;font-weight:600;}
/* Editar/excluir e a alça de arrastar só aparecem passando o mouse. */
html.design-lab #accountList.acc-compact .acc-row-actions{display:flex;gap:2px;width:0;margin-left:-12px;overflow:hidden;opacity:0;transition:opacity .15s;}
html.design-lab #accountList.acc-compact .acc-row:hover .acc-row-actions,html.design-lab #accountList.acc-compact .acc-row-actions:focus-within{width:auto;margin-left:0;opacity:1;}
html.design-lab #accountList.acc-compact .acc-row-actions .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:12px!important;}
html.design-lab #accountList.acc-compact .acc-row-actions .icon-btn:hover{background:var(--card)!important;color:var(--text)!important;}
html.design-lab #accountList.acc-compact .acc-row-drag{position:absolute!important;left:-9px;top:50%;transform:translateY(-50%);width:16px!important;height:26px!important;min-width:0!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:11px!important;opacity:0;cursor:grab;display:flex;align-items:center;justify-content:center;}
html.design-lab #accountList.acc-compact .acc-row:hover .acc-row-drag{opacity:1;}
html.design-lab #accountList.acc-compact .acc-idle{min-width:0;width:100%;box-sizing:border-box;margin-top:8px;padding-top:12px;border-top:1px dashed var(--app-line);display:flex;flex-direction:column;gap:2px;}
html.design-lab #accountList.acc-compact .acc-idle-head{box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;white-space:normal;display:flex;align-items:center;gap:12px;width:100%;border:0;cursor:pointer;font:inherit;text-align:left;padding:10px 12px;border-radius:14px;background:var(--app-surface-soft);color:var(--text);}
html.design-lab #accountList.acc-compact .acc-idle-head .acc-row-copy b{font-size:14px;font-weight:600;}
html.design-lab #accountList.acc-compact .acc-idle-stack{display:flex;flex:none;}
html.design-lab #accountList.acc-compact .acc-idle-stack .acc-row-badge{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:13px;margin-left:-8px;box-shadow:0 0 0 2px var(--app-surface-soft);}
html.design-lab #accountList.acc-compact .acc-idle-stack .acc-row-badge:first-child{margin-left:0;}
html.design-lab #accountList.acc-compact .acc-idle-stack .acc-row-badge img{width:18px;height:18px;}
html.design-lab #accountList.acc-compact .acc-idle-toggle{flex:none;font-size:13px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:5px;}
html.design-lab #accountList.acc-compact .acc-idle-toggle i{font-size:10px;}
html.design-lab #accountList.acc-compact .acc-idle .acc-row{padding:8px 12px;}
html.design-lab #accountList.acc-compact .acc-idle .acc-row-badge{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:13px;}
html.design-lab #accountList.acc-compact .acc-idle .acc-row-copy b{font-size:14px;font-weight:500;}
html.design-lab #accountList.acc-compact .acc-idle .acc-row-val{font-size:14px;font-weight:600;color:var(--muted);}
html.design-lab .account-statement-table tr.is-pending td{opacity:.6;}
html.design-lab .account-statement-table tr.is-pending .tx-flag{opacity:1;}
html.design-lab #accountList.acc-compact .acc-idle-hint{font-size:12px;color:var(--muted);padding:8px 12px 0;}
}
/* Janelas "Excluir conta" e "Excluir cartão" (v8.183.0, app-acc-delete.js) */
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-item-ico{background:var(--dac-color)!important;color:#fff!important;overflow:hidden;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-item-ico .bank-logo-wrap{background:#fff;width:100%;height:100%;display:grid;place-items:center;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-item-ico .bank-logo{width:24px;height:24px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-item-amt small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);text-align:right;margin-bottom:1px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dtx-effect li b{font-weight:700;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-ok{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:14px;background:color-mix(in srgb,var(--income) 9%,var(--card));border:1px solid color-mix(in srgb,var(--income) 30%,transparent);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-ok i{color:var(--income);font-size:16px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-ok span{font-size:13.5px;color:var(--text);line-height:1.4;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-note{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,#f59e0b 10%,var(--card));border:1px solid color-mix(in srgb,#f59e0b 35%,transparent);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-note>i{color:#d97706;font-size:16px;margin-top:2px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-note div{display:flex;flex-direction:column;gap:2px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-note b{font-size:14.5px;color:var(--text);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-note span{font-size:13px;line-height:1.45;color:var(--muted);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-links{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--app-line);overflow:hidden;background:var(--card);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link:hover,html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link:focus-visible{background:var(--app-surface-soft);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link+.dac-link{border-top:1px solid var(--app-line);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link-ico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:14px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link-txt b{font-size:14.5px;font-weight:700;color:var(--text);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link-txt span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-link-go{font-size:13px;font-weight:700;color:var(--primary);white-space:nowrap;display:flex;align-items:center;gap:6px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .modal-actions .dtx-go.dac-go-ok{flex:1 1 0!important;background:var(--primary)!important;border-color:var(--primary)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 30%,transparent)!important;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .modal-actions .btn[hidden]{display:none!important;}
/* Para onde vai o dinheiro (caixinha, aplicar, resgatar) e campos das janelas de investimento (v8.184.0, app-inv-move.js) */
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--app-line);background:var(--card);overflow:hidden;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-row{display:flex;align-items:center;gap:12px;padding:11px 14px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-row+.dac-flow-row{border-top:1px solid var(--app-line);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-ico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:14px;background:var(--dac-color);color:#fff;overflow:hidden;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-ico .bank-logo-wrap{background:#fff;width:100%;height:100%;display:grid;place-items:center;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-ico .bank-logo{width:20px;height:20px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-txt b{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-txt span{font-size:12px;color:var(--muted);white-space:nowrap;}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-row strong{font-size:14.5px;font-weight:700;white-space:nowrap;color:var(--text);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-row strong.neg{color:var(--expense);}
html.design-lab :is(#deleteAccOverlay,#invWithdrawOverlay,#invDepositOverlay) .dac-flow-row strong.pos{color:var(--income);}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-flow-empty{font-size:13px;color:var(--muted);padding:12px 14px;border-radius:14px;border:1px dashed var(--app-line);}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-flow-warn{margin-top:8px;font-size:13px;font-weight:600;color:var(--expense);display:flex;gap:6px;align-items:center;}
html.design-lab #invWithdrawOverlay .dac-inv-tax{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.4;}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-amount-box{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:14px;border:1.5px solid var(--primary);background:var(--card);}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-amount-box>span{font-size:22px;font-weight:700;color:var(--muted);}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-amount-box input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:4px 0!important;height:auto!important;font-size:26px!important;font-weight:800!important;color:var(--text)!important;letter-spacing:-.4px;outline:none;}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-amount-all{flex:none;border:0;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);cursor:pointer;}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-fields{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-field .dtx-label{margin:0;}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-field :is(input,select){width:100%;box-sizing:border-box;min-height:46px;}
@media(max-width:900px){html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .dac-fields{grid-template-columns:1fr;}}
/* Início, card "Faturas e contas": contas sem movimento recolhidas (v8.184.0) */
html.design-lab #dashboard .ms-idle{padding-top:12px;border-top:1px dashed var(--app-line);display:flex;flex-direction:column;gap:10px;}
html.design-lab #dashboard .ms-rows>.ms-idle:first-child{padding-top:0;border-top:0;}
html.design-lab #dashboard .ms-idle-head{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit;text-align:left;color:var(--text);}
html.design-lab #dashboard .ms-idle-stack{display:flex;flex:none;}
html.design-lab #dashboard .ms-idle-stack .ms-ico{flex:0 0 30px;width:30px;height:30px;border-radius:9px;font-size:12px;margin-left:-8px;box-shadow:0 0 0 2px var(--card);background:color-mix(in srgb,var(--ms-color) 14%,var(--card));}
html.design-lab #dashboard .ms-idle-stack .ms-ico:first-child{margin-left:0;}
html.design-lab #dashboard .ms-idle-stack .ms-ico .bank-logo{width:18px;height:18px;}
html.design-lab #dashboard .ms-idle-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
html.design-lab #dashboard .ms-idle-copy b{font-size:14px;font-weight:600;}
html.design-lab #dashboard .ms-idle-copy span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #dashboard .ms-idle-toggle{flex:none;font-size:13px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:5px;}
html.design-lab #dashboard .ms-idle-toggle i{font-size:10px;}
html.design-lab #dashboard .ms-row.is-idle .ms-main b{font-weight:500;color:var(--muted);}
html.design-lab #dashboard .ms-row.is-idle .ms-side b{font-weight:600;color:var(--muted);font-size:14px;}
html.design-lab #dashboard .ms-row.is-idle .ms-ico{flex-basis:32px;width:32px;height:32px;font-size:13px;}
html.design-lab #dashboard .ms-idle-hint{font-size:12px;color:var(--muted);}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .field.dac-field{margin:0!important;}
html.design-lab :is(#invWithdrawOverlay,#invDepositOverlay) .field.dac-field>label.dtx-label{font-size:12.5px!important;font-weight:700!important;color:var(--muted)!important;text-transform:uppercase;letter-spacing:.04em;}

/* Login: volta para a página inicial (index.html, v8.186.0). Só no
   computador — no celular a página inicial não existe (vai direto pro app). */
#authScreen .auth-home{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font-size:14px;font-weight:600;color:var(--muted,#5b6478);text-decoration:none;transition:color .2s;}
#authScreen .auth-home:hover{color:var(--primary,#305bf3);}
#authScreen .auth-home i{font-size:12px;}
@media (max-width:900px){#authScreen .auth-home{display:none;}}

/* ===== Login no computador (v8.187.0) — app-auth-desk.js =====
   Formulário claro à esquerda, painel escuro com ondas à direita.
   Tudo sob #authScreen.lgd-on (classe só posta quando a tela passa de 900px). */
@media (min-width:901px){
  html #authScreen.lgd-on{--lgd-bg:#fff;--lgd-ink:#0f172a;--lgd-muted:#667085;--lgd-faint:#98a2b3;--lgd-line:#e6e9f0;--lgd-field:#fff;--lgd-field-line:#dde2eb;--lgd-link:#305bf3;--lgd-ease:cubic-bezier(.22,1,.36,1);--lgd-io:cubic-bezier(.65,0,.35,1);
    padding:0!important;background:var(--lgd-bg)!important;font-family:Inter,system-ui,sans-serif!important;overflow:hidden!important;}
  html #authScreen.lgd-on:not(.hidden){display:block!important;}
  html #authScreen.lgd-on.hidden{display:none!important;}
  html[data-theme="dark"] #authScreen.lgd-on{--lgd-bg:#111833;--lgd-ink:#eef2fb;--lgd-muted:#9aa6c4;--lgd-faint:#6f7b9c;--lgd-line:#1f2947;--lgd-field:#0d1430;--lgd-field-line:#2a3559;--lgd-link:#8aa4ff;}
  html #authScreen.lgd-on .auth-shell{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;max-width:none!important;height:100vh!important;min-height:0!important;margin:0!important;padding:0!important;gap:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;animation:none!important;}
  html #authScreen.lgd-on.auth-resolving:not(.lgd-busy) .auth-shell{display:none!important;}
  html #authScreen.lgd-on.lgd-busy .auth-loading{display:none!important;}
  /* coluna do formulário */
  html #authScreen.lgd-on .auth-panel{order:1;position:relative;display:flex!important;flex-direction:column;justify-content:center;align-items:center;align-self:stretch!important;height:100vh;margin:0!important;padding:96px 56px 72px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;animation:none!important;color:var(--lgd-ink)!important;}
  html #authScreen.lgd-on .auth-panel>*:not(.lgd-top):not(.lgd-foot){width:360px;max-width:100%;}
  html #authScreen.lgd-on .lgd-top{position:absolute;left:56px;right:56px;top:36px;display:flex;justify-content:space-between;align-items:center;}
  html #authScreen.lgd-on .lgd-logo{display:flex;align-items:center;gap:10px;font:700 18px Inter,sans-serif;color:var(--lgd-ink);}
  html #authScreen.lgd-on .lgd-mark{width:32px;height:32px;border-radius:9px;background:#305bf3;display:grid;place-items:center;color:#fff;font-size:14px;}
  html #authScreen.lgd-on .auth-home{margin:0!important;font-size:14px!important;font-weight:500!important;color:var(--lgd-muted)!important;}
  html #authScreen.lgd-on .auth-home i{transition:transform .3s var(--lgd-ease);}
  html #authScreen.lgd-on .auth-home:hover{color:var(--lgd-ink)!important;}
  html #authScreen.lgd-on .auth-home:hover i{transform:translateX(-3px);}
  html #authScreen.lgd-on .lgd-foot{position:absolute;left:56px;bottom:36px;font-size:12.5px;color:var(--lgd-faint);}
  html #authScreen.lgd-on .lgd-foot a{color:inherit;text-decoration:none;}
  html #authScreen.lgd-on .lgd-foot a:hover{color:var(--lgd-ink);}
  html #authScreen.lgd-on .auth-panel h2{font-family:Sora,Inter,sans-serif!important;font-weight:600!important;font-size:26px!important;letter-spacing:-.02em!important;text-align:left!important;color:var(--lgd-ink)!important;margin:0!important;}
  html #authScreen.lgd-on .auth-panel .auth-sub{text-align:left!important;color:var(--lgd-muted)!important;font-size:15px!important;margin:8px auto 30px!important;}
  html #authScreen.lgd-on .auth-tabs,html #authScreen.lgd-on .auth-legal{display:none!important;}
  html #authScreen.lgd-on .auth-provider{height:46px!important;min-height:46px!important;border-radius:10px!important;border:1px solid var(--lgd-field-line)!important;background:var(--lgd-field)!important;color:var(--lgd-ink)!important;font:500 15px Inter,sans-serif!important;box-shadow:none!important;transition:background .2s,border-color .2s,transform .2s var(--lgd-ease)!important;}
  html #authScreen.lgd-on .auth-provider:hover{transform:none!important;border-color:#c9d1df!important;background:color-mix(in srgb,var(--lgd-field) 94%,#305bf3)!important;}
  html #authScreen.lgd-on .auth-provider:active{transform:scale(.985)!important;}
  html #authScreen.lgd-on .auth-provider i{background:conic-gradient(from -45deg,#ea4335 0 25%,#4285f4 25% 50%,#34a853 50% 75%,#fbbc05 75%);-webkit-background-clip:text;background-clip:text;color:transparent!important;}
  html #authScreen.lgd-on .auth-divider{font-size:13px!important;color:var(--lgd-faint)!important;margin:24px auto!important;gap:14px!important;}
  html #authScreen.lgd-on .auth-divider::after{background:var(--lgd-line)!important;}
  html #authScreen.lgd-on .auth-divider::before{content:'';background:var(--lgd-line)!important;}
  html #authScreen.lgd-on .auth-panel form .field{position:relative;margin:0 0 20px!important;}
  html #authScreen.lgd-on .auth-panel form .field>label{display:inline-block!important;font:500 14px Inter,sans-serif!important;color:var(--lgd-ink)!important;text-transform:none!important;letter-spacing:0!important;margin:0 0 8px!important;}
  html #authScreen.lgd-on .auth-field-ico{display:none!important;}
  html #authScreen.lgd-on .auth-password-wrap{position:relative;}
  html #authScreen.lgd-on .auth-panel input.lgd-input{height:46px!important;min-height:46px!important;padding:0 44px 0 14px!important;border-radius:10px!important;border:1px solid var(--lgd-field-line)!important;background:var(--lgd-field)!important;font:400 15px Inter,sans-serif!important;letter-spacing:0!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:var(--lgd-ink)!important;box-shadow:none!important;transition:border-color .25s,box-shadow .35s var(--lgd-ease)!important;}
  html #authScreen.lgd-on .auth-panel input.lgd-input::placeholder{color:var(--lgd-faint)!important;-webkit-text-fill-color:var(--lgd-faint)!important;transition:opacity .2s;}
  html #authScreen.lgd-on .auth-panel input.lgd-input:focus{border-color:#305bf3!important;box-shadow:0 0 0 4px rgba(48,91,243,.13)!important;}
  html #authScreen.lgd-on .auth-panel input.lgd-input:-webkit-autofill{animation:adAutofill .01s;color:var(--lgd-ink)!important;-webkit-text-fill-color:var(--lgd-ink)!important;-webkit-box-shadow:0 0 0 1000px var(--lgd-field) inset!important;box-shadow:0 0 0 1000px var(--lgd-field) inset!important;transition:background-color 600000s 0s,color 600000s 0s,border-color .25s!important;}
  html #authScreen.lgd-on .auth-panel input.lgd-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--lgd-field) inset,0 0 0 4px rgba(48,91,243,.13)!important;box-shadow:0 0 0 1000px var(--lgd-field) inset,0 0 0 4px rgba(48,91,243,.13)!important;}
  html #authScreen.lgd-on .field.lgd-valid input.lgd-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--lgd-field) inset,0 0 0 4px rgba(20,184,138,.13)!important;box-shadow:0 0 0 1000px var(--lgd-field) inset,0 0 0 4px rgba(20,184,138,.13)!important;}
  /* Preenchido pelo navegador: o texto de verdade aparece e a cópia animada some (o Chrome
     só entrega o valor ao JS depois de um toque, então a cópia podia ficar vazia). */
  html #authScreen.lgd-on .auth-panel input.lgd-input:-webkit-autofill+.lgd-txt{visibility:hidden;}
  html #authScreen.lgd-on .field.lgd-valid input.lgd-input{border-color:#9fe3cb!important;}
  html #authScreen.lgd-on .field.lgd-valid input.lgd-input:focus{border-color:#14b88a!important;box-shadow:0 0 0 4px rgba(20,184,138,.13)!important;}
  html #authScreen.lgd-on .lgd-txt{position:absolute;display:flex;align-items:center;overflow:hidden;pointer-events:none;color:var(--lgd-ink);white-space:pre;z-index:1;}
  html #authScreen.lgd-on .lgd-txt>span{display:inline-block;white-space:pre;}
  html #authScreen.lgd-on .lgd-txt .lgd-ch{display:inline-block;animation:adChIn .32s var(--lgd-ease) both;}
  html #authScreen.lgd-on .lgd-txt .lgd-dot{display:inline-block;animation:adDotIn .38s cubic-bezier(.34,1.8,.5,1) both;}
  html #authScreen.lgd-on .lgd-ok{position:absolute;right:13px;bottom:13px;width:20px;height:20px;border-radius:50%;background:#14b88a;color:#fff;display:grid;place-items:center;font-size:10px;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.7,.5,1);pointer-events:none;z-index:2;}
  html #authScreen.lgd-on .field.lgd-valid .lgd-ok{transform:scale(1);}
  html #authScreen.lgd-on .auth-password-toggle{z-index:2;color:var(--lgd-faint)!important;}
  html #authScreen.lgd-on .auth-forgot{position:absolute;right:0;top:0;margin:0!important;padding:0!important;width:auto!important;font:500 14px Inter,sans-serif!important;color:var(--lgd-link)!important;text-decoration:none!important;background:none!important;}
  html #authScreen.lgd-on .auth-forgot.hidden{display:none!important;}
  html #authScreen.lgd-on .auth-remember{font-size:14px!important;color:var(--lgd-muted)!important;margin:0 0 16px!important;}
  html #authScreen.lgd-on .auth-remember input[type="checkbox"]{width:16px!important;min-width:16px!important;height:16px!important;min-height:16px!important;border-radius:4px!important;border:1px solid var(--lgd-field-line)!important;background:var(--lgd-field)!important;}
  html #authScreen.lgd-on .auth-remember input[type="checkbox"]:checked{background:#305bf3!important;border-color:#305bf3!important;}
  html #authScreen.lgd-on .auth-remember input[type="checkbox"]:checked::after{color:#fff!important;}
  html #authScreen.lgd-on .auth-error{font-size:13px!important;margin:0 0 10px!important;min-height:0!important;}
  /* botão: brilho quando fica pronto, vira círculo carregando, depois ✓ */
  html #authScreen.lgd-on .auth-panel form{display:flex;flex-direction:column;}
  html #authScreen.lgd-on .auth-submit{position:relative;align-self:center;width:100%!important;height:48px!important;min-height:48px!important;padding:0!important;border-radius:10px!important;background:#305bf3!important;color:#fff!important;font:600 15px Inter,sans-serif!important;overflow:hidden;box-shadow:0 10px 24px -14px rgba(48,91,243,.9)!important;filter:none!important;transition:width .55s var(--lgd-io),border-radius .55s var(--lgd-io),background .3s,box-shadow .3s,transform .2s var(--lgd-ease)!important;opacity:1!important;}
  html #authScreen.lgd-on .auth-submit:hover{transform:none!important;box-shadow:0 14px 28px -12px rgba(48,91,243,1)!important;}
  html #authScreen.lgd-on .auth-submit:active{transform:scale(.985)!important;}
  html #authScreen.lgd-on .auth-submit i{display:none!important;}
  html #authScreen.lgd-on .auth-submit::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none;}
  html #authScreen.lgd-on .auth-submit.lgd-ready::after{animation:adShine 1.1s var(--lgd-ease) .1s;}
  html #authScreen.lgd-on .auth-submit::before{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;transition:opacity .2s;}
  html #authScreen.lgd-on .auth-submit.lgd-load{width:48px!important;border-radius:24px!important;color:transparent!important;}
  html #authScreen.lgd-on .auth-submit.lgd-load::before{opacity:1;transition-delay:.25s;animation:adSpin .8s linear infinite;}
  html #authScreen.lgd-on .auth-submit.lgd-done{background:#14b88a!important;box-shadow:0 10px 24px -14px rgba(20,184,138,.9)!important;}
  html #authScreen.lgd-on .auth-submit.lgd-done::before{animation:none;border:0;opacity:1;width:18px;height:10px;margin:-7px 0 0 -9px;border-radius:0;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) scale(0);animation:adTick .4s cubic-bezier(.34,1.7,.5,1) forwards;}
  html #authScreen.lgd-on .lgd-switch{text-align:center;margin:24px auto 0;font-size:14px;color:var(--lgd-muted);}
  html #authScreen.lgd-on .lgd-switch button{font:600 14px Inter,sans-serif;color:var(--lgd-link);background:none;border:0;padding:0;cursor:pointer;}
  html #authScreen.lgd-on .auth-config,html #authScreen.lgd-on .auth-local{width:360px;}
  /* painel da direita: a .auth-hero vira só a moldura da arte */
  html #authScreen.lgd-on .auth-hero{order:2;position:relative;margin:0!important;padding:0!important;min-height:0!important;background:transparent!important;border:0!important;}
  html #authScreen.lgd-on .auth-hero>*:not(.lgd-art){display:none!important;}
  html #authScreen.lgd-on .auth-hero::before,html #authScreen.lgd-on .auth-hero::after{display:none!important;}
  html #authScreen.lgd-on .auth-hero .lgd-art{position:absolute;inset:16px 16px 16px 0;}
  html #authScreen.lgd-on .auth-cookie-notice{left:28px;right:auto;}
  /* entrada em cascata */
  html #authScreen.lgd-on .auth-panel>*{opacity:0;transform:translateY(14px);}
  html #authScreen.lgd-on.lgd-in .auth-panel>*{opacity:1;transform:none;transition:opacity .7s var(--lgd-ease),transform .8s var(--lgd-ease);}
  html #authScreen.lgd-on.lgd-in .auth-panel>*:nth-child(2){transition-delay:.12s}
  html #authScreen.lgd-on.lgd-in .auth-panel>*:nth-child(3){transition-delay:.18s}
  html #authScreen.lgd-on.lgd-in .auth-panel>*:nth-child(4){transition-delay:.22s}
  html #authScreen.lgd-on.lgd-in .auth-panel>*:nth-child(5){transition-delay:.26s}
  html #authScreen.lgd-on.lgd-in .auth-panel>*:nth-child(6){transition-delay:.3s}
  html #authScreen.lgd-on.lgd-in .auth-panel>*:nth-child(7){transition-delay:.36s}
  html #authScreen.lgd-on.lgd-in .auth-panel>*:nth-child(n+8){transition-delay:.44s}
  html #authScreen.lgd-on .lgd-art{clip-path:inset(0 0 0 100% round 24px);}
  html #authScreen.lgd-on.lgd-in .lgd-art{clip-path:inset(0 0 0 0 round 24px);transition:clip-path 1.1s var(--lgd-ease);}
  html #authScreen.lgd-on .lgd-name>div{transform:translateY(105%);}
  html #authScreen.lgd-on.lgd-in .lgd-name>div{transform:none;transition:transform 1.1s var(--lgd-ease) .15s;}
  html #authScreen.lgd-on.lgd-in .lgd-name>div+div{transition-delay:.27s;}
  html #authScreen.lgd-on .lgd-tag{opacity:0;transform:translateY(8px);}
  html #authScreen.lgd-on.lgd-in .lgd-tag{opacity:1;transform:none;transition:opacity .8s var(--lgd-ease) .6s,transform .9s var(--lgd-ease) .6s;}
  /* saída: o formulário some pra esquerda */
  html #authScreen.lgd-on.lgd-exit .auth-panel>*{opacity:0!important;transform:translateX(-24px)!important;transition:opacity .45s var(--lgd-ease),transform .6s var(--lgd-ease)!important;transition-delay:0s!important;}
  html #authScreen.lgd-on.lgd-exit{background:transparent!important;transition:background 0s .9s;}
}
html[data-theme="dark"] #authScreen.lgd-on .lgd-art{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
/* arte (vale dentro do login e da cortina solta no <body>) */
.lgd-art{border-radius:24px;background:#0a0f2c;overflow:hidden;}
.lgd-art svg{position:absolute;inset:0;width:100%;height:100%;}
.lgd-art path{fill:none;stroke:url(#adWaveGrad);stroke-width:1.5;stroke-dasharray:1500;stroke-dashoffset:1500;}
.lgd-name-wrap{position:absolute;left:56px;bottom:110px;overflow:hidden;padding-bottom:16px;}
.lgd-name{font-family:Sora,Inter,sans-serif;font-weight:700;letter-spacing:-.05em;line-height:.86;font-size:clamp(96px,10.4vw,150px);background:linear-gradient(115deg,#305bf3 10%,#7f9cff 50%,#53e0b4 90%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
.lgd-name>div{display:block;}
.lgd-tag{position:absolute;left:60px;bottom:62px;font:500 17px Inter,sans-serif;color:rgba(255,255,255,.72);}
.lgd-center{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:24px;background:#305bf3;display:grid;place-items:center;color:#fff;font-size:36px;opacity:0;transform:scale(.6);box-shadow:0 30px 60px -20px rgba(48,91,243,.9);}
.lgd-curtain{position:fixed;z-index:1400;pointer-events:none;}
.lgd-curtain .lgd-art{position:absolute;inset:0;clip-path:none;}
.lgd-curtain.lgd-grow{left:0!important;top:0!important;width:100vw!important;height:100vh!important;transition:left .95s cubic-bezier(.65,0,.35,1),top .95s cubic-bezier(.65,0,.35,1),width .95s cubic-bezier(.65,0,.35,1),height .95s cubic-bezier(.65,0,.35,1);}
.lgd-curtain.lgd-grow .lgd-art{border-radius:0;transition:border-radius .95s cubic-bezier(.65,0,.35,1);}
.lgd-curtain.lgd-grow .lgd-name-wrap,.lgd-curtain.lgd-grow .lgd-tag{opacity:0;transform:translateY(-14px);transition:opacity .4s,transform .7s cubic-bezier(.22,1,.36,1);}
.lgd-curtain.lgd-grow .lgd-center{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.22,1,.36,1) .45s,transform .8s cubic-bezier(.34,1.5,.5,1) .45s;}
.lgd-curtain.lgd-leave{transform:translateY(-100%);transition:transform 1s cubic-bezier(.65,0,.35,1);}
@keyframes adChIn{from{opacity:0;transform:translateY(7px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes adDotIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes adShine{to{transform:translateX(120%)}}
@keyframes adSpin{to{transform:rotate(360deg)}}
@keyframes adTick{to{transform:rotate(-45deg) scale(1)}}
@keyframes adAutofill{from{opacity:1}to{opacity:1}}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  html #authScreen.lgd-on .auth-panel>*,html #authScreen.lgd-on .lgd-name>div,html #authScreen.lgd-on .lgd-tag{opacity:1!important;transform:none!important;transition:none!important;}
  html #authScreen.lgd-on .lgd-art{clip-path:none!important;}
  html #authScreen.lgd-on .lgd-txt span{animation:none!important;}
}

/* ===== Orçamento (v8.188.0): resumo fixo + lista de metas (app-budget.js, renderBudget) ===== */
html.design-lab #budgetView{margin-top:8px;}
html.design-lab #budgetView .bud-wrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start;}
html.design-lab #budgetView .bud-card{background:var(--card);border:1px solid var(--app-line);border-radius:22px;}
html.design-lab #budgetView .num{font-variant-numeric:tabular-nums;}
html.design-lab #budgetView .bud-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
html.design-lab #budgetView .bud-k.sm{font-size:11px;}
html.design-lab #budgetView .bud-side{padding:24px;position:sticky;top:20px;}
html.design-lab #budgetView .bud-sum{display:flex;align-items:center;gap:20px;margin:18px 0 6px;}
html.design-lab #budgetView .bud-ring{position:relative;flex:none;line-height:0;}
html.design-lab #budgetView .bud-ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
html.design-lab #budgetView .bud-ring b{font:700 26px Sora,Inter,sans-serif;color:var(--text);}
html.design-lab #budgetView .bud-ring small{margin-top:5px;font-size:12px;color:var(--muted);}
html.design-lab #budgetView .bud-big{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.01em;margin-top:2px;}
html.design-lab #budgetView .bud-of{font-size:13.5px;color:var(--muted);margin-top:2px;}
html.design-lab #budgetView .bud-free{margin-top:12px;font-size:14px;font-weight:600;color:var(--income);}
html.design-lab #budgetView .bud-free.over{color:var(--expense);}
html.design-lab #budgetView .bud-hr{height:1px;background:var(--app-line);margin:20px 0;}
html.design-lab #budgetView .bud-pace{font-size:13.5px;line-height:1.5;color:var(--text);}
html.design-lab #budgetView .bud-pace span{color:var(--muted);}
html.design-lab #budgetView .bud-att{display:flex;align-items:center;gap:12px;padding:10px 0;}
html.design-lab #budgetView .bud-att .bud-ico{width:34px;height:34px;border-radius:10px;font-size:14px;}
html.design-lab #budgetView .bud-att .t{flex:1;min-width:0;}
html.design-lab #budgetView .bud-att .t b{display:block;font-size:14px;color:var(--text);}
html.design-lab #budgetView .bud-att .t span{font-size:12.5px;color:var(--muted);}
html.design-lab #budgetView .bud-new{margin-top:18px;width:100%;border:1.5px dashed var(--app-line);background:transparent;border-radius:14px;padding:12px;font:600 14px Inter,sans-serif;color:var(--primary);cursor:pointer;}
html.design-lab #budgetView .bud-new i{margin-right:6px;}
html.design-lab #budgetView .bud-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:16px;}
html.design-lab #budgetView .bud-pill{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:99px;color:var(--income);background:color-mix(in srgb,var(--income) 12%,transparent);}
html.design-lab #budgetView .bud-pill.warn{color:var(--warning);background:color-mix(in srgb,var(--warning) 14%,transparent);}
html.design-lab #budgetView .bud-pill.over{color:var(--expense);background:color-mix(in srgb,var(--expense) 12%,transparent);}
html.design-lab #budgetView .bud-chips{display:flex;gap:6px;}
html.design-lab #budgetView .bud-chips button{border:1px solid var(--app-line);background:var(--card);color:var(--muted);font:600 13px Inter,sans-serif;padding:7px 12px;border-radius:99px;cursor:pointer;}
html.design-lab #budgetView .bud-chips button span{opacity:.7;margin-left:3px;}
html.design-lab #budgetView .bud-chips button.on{background:var(--text);color:var(--card);border-color:var(--text);}
html.design-lab #budgetView .bud-list{padding:8px 0 4px;overflow:hidden;}
html.design-lab #budgetView .bud-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;}
html.design-lab #budgetView .bud-head h3{margin:0;font-size:17px;font-weight:700;color:var(--text);}
html.design-lab #budgetView .bud-subhead{display:flex;justify-content:space-between;align-items:center;padding:0 24px 10px;}
html.design-lab #budgetView .bud-legend{font-size:12.5px;color:var(--muted);}
html.design-lab #budgetView .bud-today-ico{display:inline-block;width:2px;height:12px;background:var(--text);opacity:.55;border-radius:2px;margin-right:8px;vertical-align:-2px;}
html.design-lab #budgetView .bud-row{display:grid;grid-template-columns:40px minmax(0,1.1fr) minmax(0,1.6fr) 150px 20px;gap:18px;align-items:center;padding:16px 24px;border-top:1px solid var(--app-line);cursor:pointer;transition:background .15s;}
html.design-lab #budgetView .bud-row:hover,html.design-lab #budgetView .bud-row.open{background:var(--app-surface-soft);}
html.design-lab #budgetView .bud-name{min-width:0;}
html.design-lab #budgetView .bud-name b{display:block;font-size:15px;font-weight:600;color:var(--text);}
html.design-lab #budgetView .bud-name span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #budgetView .bud-mid .v{font-size:13.5px;color:var(--muted);margin-bottom:9px;}
html.design-lab #budgetView .bud-mid .v b{color:var(--text);font-weight:600;}
html.design-lab #budgetView .bud-bar{position:relative;height:8px;border-radius:99px;background:var(--app-surface-soft);}
html.design-lab #budgetView .bud-row:hover .bud-bar,html.design-lab #budgetView .bud-row.open .bud-bar{background:var(--card);}
html.design-lab #budgetView .bud-bar>i{position:absolute;inset:0 auto 0 0;border-radius:99px;}
html.design-lab #budgetView .bud-today{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:var(--text);opacity:.55;}
html.design-lab #budgetView .bud-end{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
html.design-lab #budgetView .bud-acts{display:none;gap:4px;}
html.design-lab #budgetView .bud-row:hover .bud-acts{display:flex;}
html.design-lab #budgetView .bud-row:hover .bud-end .bud-pill{display:none;}
html.design-lab #budgetView .bud-left{font-size:13.5px;color:var(--muted);white-space:nowrap;}
html.design-lab #budgetView .bud-left b{color:var(--text);font-weight:600;}
html.design-lab #budgetView .bud-left.over{color:var(--expense);font-weight:600;}
html.design-lab #budgetView .bud-chev{color:var(--muted);font-size:12px;}
html.design-lab #budgetView .bud-detail{background:var(--app-surface-soft);padding:2px 24px 22px 82px;}
html.design-lab #budgetView .bud-detail-in{background:var(--card);border:1px solid var(--app-line);border-radius:16px;padding:18px 22px 8px;}
html.design-lab #budgetView .bud-detail h4{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--muted);}
html.design-lab #budgetView .bud-sub{display:grid;grid-template-columns:180px minmax(0,1fr) 120px;gap:20px;align-items:center;padding:10px 0;font-size:14px;color:var(--text);}
html.design-lab #budgetView .bud-sub+.bud-sub{border-top:1px solid var(--app-line);}
html.design-lab #budgetView .bud-sub .b{position:relative;height:6px;border-radius:99px;background:var(--app-surface-soft);}
html.design-lab #budgetView .bud-sub .b i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:color-mix(in srgb,var(--primary) 55%,transparent);}
html.design-lab #budgetView .bud-sub b{text-align:right;font-weight:600;}
html.design-lab #budgetView .bud-links{display:flex;gap:10px;margin-top:14px;}
html.design-lab #budgetView .bud-links button{border:1px solid var(--app-line);background:var(--card);border-radius:10px;padding:8px 14px;font:600 13px Inter,sans-serif;color:var(--text);cursor:pointer;}
html.design-lab #budgetView .bud-links button i{margin-right:6px;}
html.design-lab #budgetView .bud-links button.p{background:var(--primary);border-color:var(--primary);color:#fff;}
html.design-lab #budgetView .bud-none{padding:28px 24px;text-align:center;color:var(--muted);font-size:14px;border-top:1px solid var(--app-line);}
@media(min-width:901px) and (max-width:1240px){
  html.design-lab #budgetView .bud-wrap{grid-template-columns:1fr;}
  html.design-lab #budgetView .bud-side{position:static;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:40px;align-items:start;}
  html.design-lab #budgetView .bud-side-b>.bud-hr:first-child{display:none;}
  html.design-lab #budgetView .bud-row{grid-template-columns:40px minmax(0,1fr) minmax(0,1.4fr) 140px 16px;gap:14px;}
}
/* Celular: resumo em cima, filtros, lista; editar/excluir pelo toque longo */
html.design-lab #budgetView.bud-m .bud-wrap{display:block;}
html.design-lab #budgetView.bud-m .bud-card{border-radius:18px;}
html.design-lab #budgetView.bud-m .bud-side{position:static;padding:16px;margin-bottom:12px;}
html.design-lab #budgetView.bud-m .bud-sum{margin:12px 0 0;gap:16px;}
html.design-lab #budgetView.bud-m .bud-big{font-size:22px;}
html.design-lab #budgetView.bud-m .bud-hr{margin:14px 0;}
html.design-lab #budgetView.bud-m .bud-chips{overflow-x:auto;margin:4px 0 10px;scrollbar-width:none;}
html.design-lab #budgetView.bud-m .bud-chips button{white-space:nowrap;font-size:12.5px;padding:6px 11px;}
html.design-lab #budgetView.bud-m .bud-list{padding:0;}
html.design-lab #budgetView.bud-m .bud-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;row-gap:10px;padding:14px 16px;}
html.design-lab #budgetView.bud-m .bud-row:first-child{border-top:0;}
html.design-lab #budgetView.bud-m .bud-row:hover:not(.open){background:none;}
html.design-lab #budgetView.bud-m .bud-name span{font-size:13px;}
html.design-lab #budgetView.bud-m .bud-mid{grid-column:1/-1;display:flex;flex-direction:column;}
html.design-lab #budgetView.bud-m .bud-mid .bud-left{align-self:flex-end;margin-top:8px;}
html.design-lab #budgetView.bud-m .bud-bar{height:7px;}
html.design-lab #budgetView.bud-m .bud-row:hover .bud-end .bud-pill{display:inline;}
html.design-lab #budgetView.bud-m .bud-detail{padding:0 16px 16px;}
html.design-lab #budgetView.bud-m .bud-detail-in{padding:14px 16px 4px;}
html.design-lab #budgetView.bud-m .bud-sub{grid-template-columns:minmax(0,1fr) auto;gap:12px;}
html.design-lab #budgetView.bud-m .bud-sub .b{display:none;}
html.design-lab #budgetView.bud-m .bud-links button{flex:1;}
html.design-lab #budgetView.bud-m .bud-foot{margin:10px 4px 0;}
html.design-lab #budgetView.bud-m .bud-acts{display:none!important;}

/* ===== Tour de boas-vindas no computador (v8.189.0, app-onboarding-desk.js) ===== */
:root{--obd-ink:#0e1530;--obd-muted:#667089;--obd-line:#e6e9f2;--obd-bg:#fff;--obd-soft:#eef2ff;--obd-blue:#305bf3;--obd-ease:cubic-bezier(.22,1,.36,1);--obd-io:cubic-bezier(.65,0,.35,1);}
html[data-theme="dark"]{--obd-ink:#e8ecf6;--obd-muted:#98a1b8;--obd-line:rgba(255,255,255,.09);--obd-bg:#121a33;--obd-soft:rgba(48,91,243,.18);}
.obd-btn{height:46px;padding:0 26px;border:0;border-radius:10px;background:var(--obd-blue);color:#fff;font:600 15px Inter,sans-serif;cursor:pointer;box-shadow:0 10px 24px -14px rgba(48,91,243,.9);}
.obd-btn:hover{box-shadow:0 14px 28px -12px rgba(48,91,243,1);}
.obd-btn-sm{height:40px;padding:0 20px;font-size:14px;}
.obd-link,.obd-back{background:none;border:0;color:var(--obd-muted);font:600 14px Inter,sans-serif;cursor:pointer;padding:10px 8px;}
.obd-link:hover,.obd-back:hover{color:var(--obd-ink);}
.obd-ic{width:30px;height:30px;border-radius:9px;background:var(--obd-soft);color:var(--obd-blue);display:grid;place-items:center;font-size:13px;flex:0 0 auto;}
.obd-art{position:absolute;}
.obd-art path{fill:none;stroke-width:1.5;stroke-dasharray:1500;stroke-dashoffset:1500;}
/* boas-vindas */
.obd-welcome{position:fixed;inset:0;z-index:1300;background:var(--obd-bg);display:grid;grid-template-columns:minmax(460px,44%) 1fr;font-family:Inter,sans-serif;color:var(--obd-ink);}
.obd-welcome .obd-art{position:relative;margin:16px 16px 16px 0;clip-path:inset(0 0 0 100% round 24px);}
.obd-welcome.obd-in .obd-art{clip-path:inset(0 0 0 0 round 24px);transition:clip-path 1.1s var(--obd-ease);}
.obd-welcome .lgd-name-wrap{left:48px;bottom:96px;}.obd-welcome .lgd-tag{left:52px;bottom:52px;opacity:0;}
.obd-welcome .lgd-name{font-size:clamp(80px,8.6vw,132px);}
.obd-welcome .lgd-name>div{transform:translateY(105%);}
.obd-welcome.obd-in .lgd-name>div{transform:none;transition:transform 1.1s var(--obd-ease) .15s;}
.obd-welcome.obd-in .lgd-name>div+div{transition-delay:.27s;}
.obd-welcome.obd-in .lgd-tag{opacity:1;transition:opacity .8s .6s;}
.obd-wl-panel{display:flex;flex-direction:column;padding:34px 56px 30px;min-height:0;overflow:auto;}
.obd-logo{display:flex;align-items:center;gap:10px;font:700 19px Sora,Inter,sans-serif;letter-spacing:-.02em;}
.obd-mark{width:34px;height:34px;border-radius:10px;background:var(--obd-blue);color:#fff;display:grid;place-items:center;font-size:15px;}
.obd-wl-body{margin:auto 0;max-width:430px;padding:24px 0;}
.obd-wl-body>*{opacity:0;transform:translateY(14px);}
.obd-welcome.obd-in .obd-wl-body>*{opacity:1;transform:none;transition:opacity .7s var(--obd-ease),transform .8s var(--obd-ease);}
.obd-welcome.obd-in .obd-wl-body>*:nth-child(2){transition-delay:.1s;}.obd-welcome.obd-in .obd-wl-body>*:nth-child(3){transition-delay:.18s;}.obd-welcome.obd-in .obd-wl-body>*:nth-child(5){transition-delay:.7s;}
.obd-kicker{font:600 13px Inter,sans-serif;color:var(--obd-blue);margin:0 0 12px;}
.obd-wl-body h1{font:700 34px/1.12 Sora,Inter,sans-serif;letter-spacing:-.035em;margin:0 0 14px;color:var(--obd-ink);}
.obd-lead{font-size:15.5px;line-height:1.6;color:var(--obd-muted);margin:0 0 24px;}
.obd-wl-list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--obd-line);}
.obd-wl-list li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--obd-line);font-size:14.5px;font-weight:600;opacity:0;transform:translateX(-10px);}
.obd-welcome.obd-in .obd-wl-list li{opacity:1;transform:none;transition:opacity .6s var(--obd-ease) var(--d),transform .7s var(--obd-ease) var(--d);}
.obd-wl-list small{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--obd-muted);}
.obd-wl-actions{display:flex;align-items:center;gap:14px;}
.obd-wl-foot{font-size:12.5px;color:var(--obd-muted);margin:0;}
.obd-welcome.obd-out .obd-wl-panel>*{opacity:0;transform:translateX(-24px);transition:opacity .45s,transform .6s var(--obd-ease);}
.obd-welcome.obd-out{background:transparent;transition:background 0s .95s,opacity .5s;}
.obd-curtain .obd-art{position:absolute;inset:0;margin:0;clip-path:none!important;}
/* troca de página durante o tour */
body.obd-touring .section.obd-leaving{opacity:0;transform:translateY(-6px);transition:opacity .16s,transform .16s;}
body.obd-touring .section.obd-entering{opacity:0;transform:translateY(14px);transition:none;}
body.obd-touring .section.active{transition:opacity .45s var(--obd-ease),transform .55s var(--obd-ease);}
.nav-item.obd-press{transform:scale(.97);background:rgba(48,91,243,.28)!important;transition:transform .2s,background .2s;}
/* holofote */
#obdTour{position:fixed;inset:0;z-index:1250;pointer-events:none;font-family:Inter,sans-serif;}
#obdTour .obd-block{position:absolute;inset:0;pointer-events:auto;}
#obdTour .obd-hole{position:absolute;border-radius:16px;box-shadow:0 0 0 2px rgba(127,156,255,.95),0 0 0 9999px rgba(8,12,36,.58);transition:left .7s var(--obd-io),top .7s var(--obd-io),width .7s var(--obd-io),height .7s var(--obd-io);animation:obdFade .5s both;}
#obdTour.obd-nav .obd-hole{border-radius:10px;}
#obdTour .obd-pulse{position:absolute;inset:-2px;border-radius:inherit;border:2px solid #7f9cff;animation:obdPulse 2.2s var(--obd-ease) infinite;}
#obdTour.obd-gone{opacity:0;transition:opacity .45s;}
.obd-demo{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:rgba(10,15,44,.88);color:#fff;font:600 12.5px Inter,sans-serif;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);animation:obdFade .6s .4s both;}
.obd-demo i{color:#53e0b4;}
.obd-card{position:absolute;left:0;top:0;width:360px;box-sizing:border-box;background:var(--obd-bg);border-radius:16px;padding:18px 20px 14px;box-shadow:0 30px 60px -24px rgba(8,12,36,.55),0 0 0 1px var(--obd-line);pointer-events:auto;color:var(--obd-ink);transition:transform .7s var(--obd-io);animation:obdFade .6s var(--obd-ease) both;}
.obd-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.obd-chip{display:inline-flex;align-items:center;gap:7px;font:600 12px Inter,sans-serif;color:var(--obd-blue);background:var(--obd-soft);border-radius:99px;padding:5px 11px;}
.obd-skip{background:none;border:0;color:var(--obd-muted);font:500 12.5px Inter,sans-serif;cursor:pointer;}
.obd-card h3{font:700 19px/1.2 Sora,Inter,sans-serif;letter-spacing:-.025em;margin:0 0 6px;color:var(--obd-ink);}
.obd-card p{font-size:14px;line-height:1.55;color:var(--obd-muted);margin:0;}
.obd-card-body{transition:opacity .25s,transform .35s var(--obd-ease);}
.obd-card.obd-swap .obd-card-body{opacity:0;transform:translateY(6px);}
.obd-prog{display:flex;gap:5px;margin:16px 0 12px;}
.obd-prog span{flex:1;height:4px;border-radius:2px;background:var(--obd-line);overflow:hidden;}
.obd-prog i{display:block;height:100%;width:0;background:var(--obd-blue);border-radius:2px;transition:width .6s var(--obd-ease);}
.obd-card-foot{display:flex;align-items:center;gap:4px;}
.obd-count{font-size:12.5px;color:var(--obd-muted);margin-right:auto;}
/* final */
.obd-done{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;background:rgba(8,12,36,0);transition:background .5s,opacity .5s;font-family:Inter,sans-serif;color:var(--obd-ink);}
.obd-done.obd-in{background:rgba(8,12,36,.55);}
.obd-done.obd-out{opacity:0;}
.obd-done-card{width:620px;max-width:calc(100vw - 48px);background:var(--obd-bg);border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);opacity:0;transform:translateY(24px) scale(.98);transition:opacity .6s var(--obd-ease),transform .8s var(--obd-ease);}
.obd-done.obd-in .obd-done-card{opacity:1;transform:none;}
.obd-done-card .obd-art{position:relative;height:170px;margin:8px 8px 0;border-radius:16px;}
.obd-done-badge{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:20px;background:#14b88a;color:#fff;display:grid;place-items:center;font-size:26px;box-shadow:0 20px 40px -14px rgba(20,184,138,.9);transform:scale(0);transition:transform .7s cubic-bezier(.34,1.6,.5,1) .35s;}
.obd-done.obd-in .obd-done-badge{transform:none;}
.obd-done-in{padding:24px 30px 18px;text-align:center;}
.obd-done-in h2{font:700 26px Sora,Inter,sans-serif;letter-spacing:-.03em;margin:0 0 6px;color:var(--obd-ink);}
.obd-done-in p{color:var(--obd-muted);font-size:14.5px;margin:0 0 20px;}
.obd-done-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
.obd-done-acts button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--obd-line);background:var(--obd-bg);cursor:pointer;font-family:Inter,sans-serif;color:var(--obd-ink);opacity:0;transform:translateY(10px);transition:opacity .5s var(--obd-ease),transform .6s var(--obd-ease),border-color .2s,box-shadow .2s;}
.obd-done-acts button:hover{border-color:var(--obd-blue);box-shadow:0 0 0 3px rgba(48,91,243,.12);}
.obd-done.obd-in .obd-done-acts button{opacity:1;transform:none;}
.obd-done.obd-in .obd-done-acts button:nth-child(1){transition-delay:.45s;}.obd-done.obd-in .obd-done-acts button:nth-child(2){transition-delay:.53s;}.obd-done.obd-in .obd-done-acts button:nth-child(3){transition-delay:.61s;}
.obd-done-acts .obd-ic{margin-bottom:6px;}
.obd-done-acts b{font-size:14px;}.obd-done-acts small{font-size:12.5px;color:var(--obd-muted);line-height:1.35;}
.obd-wa{background:rgba(20,184,138,.14);color:#14a36a;}
/* fim do tour: teste grátis e preço (v8.205.0, obdPlanMarkup) */
.obd-plan{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:12px 14px;border-radius:14px;background:rgba(48,91,243,.08);text-align:left;opacity:0;transform:translateY(10px);transition:opacity .5s var(--obd-ease) .7s,transform .6s var(--obd-ease) .7s;}
.obd-done.obd-in .obd-plan{opacity:1;transform:none;}
.obd-plan-ic{flex:0 0 38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--obd-blue);color:#fff;font-size:15px;}
.obd-plan-txt{flex:1;min-width:0;display:grid;gap:2px;font-family:Inter,sans-serif;}
.obd-plan-txt b{font-size:14px;color:var(--obd-ink);}
.obd-plan-txt small{font-size:12.5px;color:var(--obd-muted);line-height:1.35;}
.obd-plan button{flex:0 0 auto;border:0;border-radius:11px;padding:10px 14px;background:var(--obd-blue);color:#fff;font:600 13px Inter,sans-serif;cursor:pointer;}
@keyframes obdPulse{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.035)}}
@keyframes obdFade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  #obdTour .obd-pulse{animation:none;}
  #obdTour .obd-hole,.obd-card{transition:none;}
  .obd-welcome .obd-art{clip-path:none!important;}
  .obd-welcome .obd-wl-body>*,.obd-welcome .obd-wl-list li,.obd-welcome .lgd-name>div,.obd-welcome .lgd-tag{opacity:1!important;transform:none!important;transition:none!important;}
}

/* Estado vazio com botão de criar (v8.190.0) — só no computador. */
.fm-empty-cta{display:none;}
@media(min-width:901px){
  html.design-lab .fm-empty-state .fm-empty-cta{display:inline-flex!important;align-items:center;gap:8px;margin-top:14px!important;}
  html.design-lab .fm-empty-state .fm-empty-cta i{color:#fff!important;opacity:1!important;font-size:13px!important;margin:0!important;}
  html.design-lab #cards-sec.cards-empty #cardsDetailCol{display:none!important;}
  html.design-lab #cards-sec.cards-empty .cards-master-detail{display:block!important;}
}
/* Estado vazio no celular (v8.192.0): mesmos botões tracejados de quando há dados. */
html.design-lab #vaultsHero:empty{display:none!important;}
@media(min-width:901px){html.design-lab #budgetView .bud-empty-add{display:none!important;}}
@media(max-width:900px){
  html.design-lab #budgetView .fm-empty-state{padding:28px 16px 12px!important;}
  html.design-lab #budgetView .bud-empty-add{width:100%!important;margin-top:24px!important;border:1.5px dashed var(--border)!important;border-radius:18px!important;padding:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;color:var(--text-3)!important;font-size:15px!important;font-weight:700!important;background:none!important;cursor:pointer;}
}

/* ===== Janela única de "Desconectar" (v8.191.0, app-disconnect.js) ===== */
html.design-lab #disconnectOverlay .dcx-modal{position:relative;max-width:460px!important;width:100%;padding:24px 24px 20px!important;border-radius:24px!important;overflow-x:hidden!important;}
html.design-lab #disconnectOverlay .dcx-x{position:absolute;top:20px;right:20px;width:34px;height:34px;min-width:34px;min-height:34px;border-radius:11px;border:1px solid var(--app-line);background:var(--card);color:var(--muted);display:grid;place-items:center;}
html.design-lab #disconnectOverlay .dcx-ico{position:relative;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:var(--dcx-c);background:color-mix(in srgb,var(--dcx-c) 12%,var(--card));}
html.design-lab #disconnectOverlay .dcx-mask{width:26px;height:26px;background:currentColor;-webkit-mask:var(--dcx-src) center/contain no-repeat;mask:var(--dcx-src) center/contain no-repeat;}
html.design-lab #disconnectOverlay .dcx-ico.solid{background:var(--dcx-c);color:#fff;font-size:21px;}
html.design-lab #disconnectOverlay .dcx-ico.letter{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:22px;}
html.design-lab #disconnectOverlay .dcx-ico.solid .bank-logo-wrap{width:100%;height:100%;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden;}
html.design-lab #disconnectOverlay .dcx-ico.solid .bank-logo{width:30px;height:30px;}
html.design-lab #disconnectOverlay .dcx-cut{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border-radius:50%;background:var(--expense);color:#fff;font-size:10.5px;display:grid;place-items:center;border:3px solid var(--card);}
html.design-lab #disconnectOverlay .dcx-title{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.3px;line-height:1.25;color:var(--text);margin:16px 40px 4px 0;}
html.design-lab #disconnectOverlay .dcx-sub{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45;}
html.design-lab #disconnectOverlay .dcx-who{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:14px;background:var(--app-surface-soft);border:1px solid var(--app-line);}
html.design-lab #disconnectOverlay .dcx-who>i{flex:0 0 18px;text-align:center;color:var(--muted);font-size:14px;}
html.design-lab #disconnectOverlay .dcx-who>div{min-width:0;}
html.design-lab #disconnectOverlay .dcx-who b{display:block;font-weight:600;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #disconnectOverlay .dcx-who small{display:block;margin-top:1px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.design-lab #disconnectOverlay .dcx-rows{margin-top:16px;display:flex;flex-direction:column;gap:11px;}
html.design-lab #disconnectOverlay .dcx-row{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:var(--text);}
html.design-lab #disconnectOverlay .dcx-row b{font-weight:700;}
html.design-lab #disconnectOverlay .dcx-k{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;margin-top:-1px;}
html.design-lab #disconnectOverlay .dcx-k.off{background:color-mix(in srgb,var(--expense) 13%,var(--card));color:var(--expense);}
html.design-lab #disconnectOverlay .dcx-k.ok{background:color-mix(in srgb,var(--income) 14%,var(--card));color:var(--income);}
html.design-lab #disconnectOverlay .dcx-k.re{background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);}
html.design-lab #disconnectOverlay .modal-actions{display:flex!important;flex-direction:row!important;gap:10px!important;margin:22px 0 0!important;padding:18px 0 0!important;border-top:1px solid var(--app-line)!important;position:static!important;background:none!important;box-shadow:none!important;}
html.design-lab #disconnectOverlay .modal-actions .btn{display:inline-flex!important;align-items:center!important;flex:1 1 0!important;min-width:0!important;min-height:46px!important;border-radius:14px!important;justify-content:center!important;gap:8px!important;font-weight:600!important;font-size:14.5px!important;white-space:nowrap!important;}
html.design-lab #disconnectOverlay .modal-actions .btn.dcx-go{background:var(--expense)!important;background-image:none!important;color:#fff!important;border:0!important;box-shadow:none!important;}
html.design-lab #disconnectOverlay .modal-actions .btn.dcx-go:hover{filter:brightness(.95);}
html.design-lab #disconnectOverlay .modal-actions .btn.dcx-go:disabled{opacity:.75;}
@media(max-width:900px){
  html.design-lab #disconnectOverlay .dcx-modal{max-width:none!important;padding:26px 20px calc(20px + var(--safe-bottom,env(safe-area-inset-bottom)))!important;border-radius:26px 26px 0 0!important;}
  html.design-lab #disconnectOverlay .dcx-x{display:none;}
  html.design-lab #disconnectOverlay .dcx-ico{margin:0 auto;}
  html.design-lab #disconnectOverlay .dcx-title{text-align:center;margin:16px 0 4px;font-size:19px;}
  html.design-lab #disconnectOverlay .dcx-sub{text-align:center;}
  html.design-lab #disconnectOverlay .dcx-row{font-size:14px;}
  html.design-lab #disconnectOverlay .modal-actions{flex-direction:column-reverse!important;border-top:0!important;padding-top:0!important;}
  html.design-lab #disconnectOverlay .modal-actions .btn{flex:none!important;width:100%!important;min-height:50px!important;}
}
/* Número do bot no "Conectar WhatsApp" (computador e celular). */
.wbn-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--muted);font-size:12px;}
.wbn-or::before,.wbn-or::after{content:"";flex:1;height:1px;background:var(--app-line,var(--border));}
.wbn-row{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:14px;background:var(--app-surface-soft,var(--bg));border:1px solid var(--app-line,var(--border));}
.wbn-ico{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;color:#1aa851;background:color-mix(in srgb,#25d366 14%,var(--card));}
.wbn-txt{min-width:0;flex:1;}
.wbn-txt small{display:block;color:var(--muted);font-size:12px;}
.wbn-txt b{display:block;font-size:16px;font-weight:700;letter-spacing:.2px;color:var(--text);white-space:nowrap;}
.wbn-copy{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:10px;border:1px solid var(--app-line,var(--border));background:var(--card);color:var(--text);font:inherit;font-weight:600;font-size:13px;cursor:pointer;}
.wbn-copy:hover{border-color:var(--primary);color:var(--primary);}
@media(max-width:900px){.wbn-long{display:none;}.wbn{margin-top:4px;}.wbn-ico{display:none;}.wbn-row{padding:10px 10px 10px 14px;}.wbn-txt small{white-space:nowrap;}.wbn-txt b{font-size:15px;}}
.whatsapp-pairing-result .wbn-row{background:var(--card);}
html.design-lab #tdkOverlay .wbn-copy{font:600 13px/1 Inter,system-ui,sans-serif!important;height:36px!important;padding:0 13px!important;border-radius:10px!important;}

/* ===== Tela de carregamento do celular: cartões que se embaralham (v8.196.0) =====
   Só ≤680px. Três cartões caem um sobre o outro e trocam de lugar (ciclo só em CSS, 3,45s);
   na saída o cartão da frente cresce até cobrir a tela (authLoadingZoomOut, app-core.js).
   O computador e a faixa 681-900px continuam com a carteira. */
.ldk-deck{display:none;}
/* As letras do nome são spans: não herdam as regras antigas de .auth-loading span (13px, branco). */
#authScreen .auth-loading strong span{font:inherit!important;color:inherit!important;letter-spacing:inherit!important;line-height:inherit!important;max-width:none!important;margin:0!important;}
@media(max-width:680px){
  html.design-lab #authScreen.auth-resolving .auth-loading .brand-mark,
  html.design-lab #authScreen.auth-resolving .auth-loading::before,
  html.design-lab #authScreen.auth-resolving .auth-loading::after{display:none!important;}
  html.design-lab #authScreen.auth-resolving .ldk-deck{display:block;position:relative;width:150px;height:118px;margin-bottom:34px;}
  .ldk-c{position:absolute;left:0;top:20px;width:150px;height:96px;border-radius:16px;transform-origin:50% 100%;animation:ldkDeal .5s cubic-bezier(.25,1.3,.45,1) both,ldkCycA 3.45s cubic-bezier(.45,0,.3,1) 1s infinite both;}
  .ldk-c::before{content:'';position:absolute;left:16px;top:18px;width:26px;height:19px;border-radius:5px;background:rgba(255,255,255,.35);}
  .ldk-c::after{content:'';position:absolute;left:16px;bottom:16px;width:62px;height:7px;border-radius:4px;background:rgba(255,255,255,.4);}
  .ldk-c1{background:#305bf3;animation-delay:.22s,1s;}
  .ldk-c2{background:#00b98e;animation-name:ldkDeal,ldkCycB;animation-delay:.12s,1s;}
  .ldk-c3{background:#17213d;animation-name:ldkDeal,ldkCycC;animation-delay:.02s,1s;}
  html[data-theme="dark"] .ldk-c3{background:#3a4a6e;}
  html.design-lab #authScreen.auth-resolving .auth-loading strong{display:flex;overflow:hidden;line-height:1.2!important;padding-bottom:2px;}
  #authScreen.auth-resolving .auth-loading strong span{display:inline-block;animation:ldkLetter .5s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i)*35ms + 420ms);}
  #authScreen.auth-resolving #authLoadingMessage{animation:ldkMsg .45s cubic-bezier(.2,.9,.25,1) .55s both;}
  #authScreen.auth-resolving #authLoadingMessage.ldk-swap{animation:ldkMsg .45s cubic-bezier(.2,.9,.25,1) both;}
  .ldk-zoom{position:fixed;z-index:1300;border-radius:16px;pointer-events:none;transition:left .5s cubic-bezier(.7,0,.2,1),top .5s cubic-bezier(.7,0,.2,1),width .5s cubic-bezier(.7,0,.2,1),height .5s cubic-bezier(.7,0,.2,1),border-radius .5s,opacity .35s ease;}
  .ldk-zoom.full{left:0!important;top:0!important;width:100vw!important;height:100vh!important;border-radius:0;}
  .ldk-zoom.fade{opacity:0;}
  #authScreen.ldk-zooming .auth-loading>:not(.ldk-deck){opacity:0;transition:opacity .15s;}
  #authScreen.ldk-zooming .ldk-c{opacity:0;transition:opacity .18s;}
  .pin-lock-screen.open.ldk-pin-in{animation:ldkPinIn .32s ease both;}
}
@keyframes ldkDeal{from{opacity:0;translate:0 -46px;rotate:-8deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes ldkLetter{from{transform:translateY(105%)}to{transform:none}}
@keyframes ldkPinIn{from{opacity:0}to{opacity:1}}
@keyframes ldkMsg{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ldkCycA{0%{transform:none;z-index:3}7.5%{transform:translate(96px,-18px) rotate(14deg);z-index:3}8.5%{transform:translate(96px,-18px) rotate(14deg);z-index:1}18%{transform:translateY(-23px) scale(.84);z-index:1}33.33%{transform:translateY(-23px) scale(.84);z-index:1}45%{transform:translateY(-12px) scale(.92);z-index:2}66.67%{transform:translateY(-12px) scale(.92);z-index:2}78%{transform:none;z-index:3}100%{transform:none;z-index:3}}
@keyframes ldkCycB{0.0%{transform:translateY(-12px) scale(.92);z-index:2}11.33%{transform:none;z-index:3}33.33%{transform:none;z-index:3}40.83%{transform:translate(96px,-18px) rotate(14deg);z-index:3}41.83%{transform:translate(96px,-18px) rotate(14deg);z-index:1}51.33%{transform:translateY(-23px) scale(.84);z-index:1}66.66%{transform:translateY(-23px) scale(.84);z-index:1}78.33%{transform:translateY(-12px) scale(.92);z-index:2}100%{transform:translateY(-12px) scale(.92);z-index:2}}
@keyframes ldkCycC{0.0%{transform:translateY(-23px) scale(.84);z-index:1}11.67%{transform:translateY(-12px) scale(.92);z-index:2}33.34%{transform:translateY(-12px) scale(.92);z-index:2}44.67%{transform:none;z-index:3}66.67%{transform:none;z-index:3}74.17%{transform:translate(96px,-18px) rotate(14deg);z-index:3}75.17%{transform:translate(96px,-18px) rotate(14deg);z-index:1}84.67%{transform:translateY(-23px) scale(.84);z-index:1}100%{transform:translateY(-23px) scale(.84);z-index:1}}
@media(prefers-reduced-motion:reduce){.ldk-c{animation:none!important;}.ldk-c2{transform:translateY(-12px) scale(.92);z-index:2;}.ldk-c3{transform:translateY(-23px) scale(.84);z-index:1;}.ldk-c1{z-index:3;}.ldk-zoom{display:none;}}

/* Relatórios no computador: recolher/expandir subcategorias (v8.197.2).
   As regras de recolher existiam só em @media(max-width:900px); no computador
   o `html.design-lab .sub-list{display:flex!important}` deixava tudo aberto. */
html.design-lab #reports-page .cat-row-head:has(.cat-row-chevron){cursor:pointer;}
html.design-lab #reports-page .cat-row-chevron{flex:0 0 auto;font-size:12px;color:var(--text-3);transform:rotate(180deg);transition:transform .2s ease;}
html.design-lab #reports-page .cat-row:not(.is-expanded) .cat-row-chevron{transform:rotate(0deg);}
html.design-lab #reports-page .cat-row:not(.is-expanded) .sub-list{display:none!important;}

/* ===== Lista de Lançamentos no celular — modelo F (v8.198.0) =====
   Cada dia é um grupo (.txf-group); a linha continua .tx[data-tx-id] (toque e
   toque longo), então os estilos antigos de .tx são zerados aqui. */
@media (max-width:900px){
  html.design-lab #transactions>#txListPanel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-day{display:flex!important;justify-content:space-between;align-items:baseline;padding:16px 4px 8px!important;font-size:13px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:var(--muted)!important;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-day:first-child{padding-top:2px!important;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-day b{font:700 17px Sora,Inter,sans-serif;color:var(--text);margin-right:4px;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-day .dsum{font-size:13px;font-weight:600;color:var(--muted)!important;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-day .dsum.in{color:var(--income)!important;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-group{background:var(--app-surface);border:1px solid var(--app-line);border-radius:20px;overflow:hidden;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .tx.txf-row{position:relative;display:flex!important;grid-template-columns:none!important;grid-template-areas:none!important;gap:12px!important;align-items:center;padding:12px 14px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-height:0!important;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .tx.txf-row:active{background:var(--app-surface-soft)!important;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .tx.txf-row+.tx.txf-row::before{content:"";position:absolute;left:66px;right:0;top:0;height:1px;background:var(--app-line);}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-ic{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);}
  html.design-lab[data-theme="dark"] :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-ic{background:color-mix(in srgb,var(--c) 22%,transparent);}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-badge{position:absolute;right:-4px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--warning);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--app-surface);}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-badge.rec{background:var(--income);}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-nm{font-size:15px;font-weight:600;line-height:1.3;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-sub{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;flex:0 0 auto;max-width:45%;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-amt{font-size:15px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text);}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-amt.in{color:var(--income);}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-amt.tr{color:var(--transfer);}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-src{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-row .tx-actions{display:none!important;}
}
/* Dois selinhos (pendente + mensal) lado a lado no canto do ícone — v8.198.1 */
@media (max-width:900px){
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-badges{position:absolute;right:-8px;bottom:-4px;display:flex;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-badges .txf-badge{position:static;}
  html.design-lab :is(#txList,#accountStatementList,#invoiceList,#desktopAccountList,#desktopInvoiceList,#cardsInvoiceList) .txf-badges .txf-badge+.txf-badge{margin-left:-6px;}
}
/* Ícone de lançamento igual em todas as listas (v8.199.0): círculo na cor da
   categoria + selinhos. Nas tabelas do computador é `.tx-icon.txf-ic`; os
   :not(#_) vencem os .tx-icon antigos com id (#cards-sec, #accounts...). */
html.design-lab :is(.tx-icon,.dot).txf-ic:not(#_):not(#__){position:relative;overflow:visible;border-radius:50%!important;color:var(--c)!important;background:color-mix(in srgb,var(--c) 14%,transparent)!important;}
html.design-lab[data-theme="dark"] .tx-icon.txf-ic:not(#_):not(#__){background:color-mix(in srgb,var(--c) 22%,transparent)!important;}
html.design-lab :is(.tx-icon,.dot).txf-ic .txf-badge{position:absolute;right:-5px;bottom:-4px;width:16px;height:16px;border-radius:50%;background:var(--warning);color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--app-surface);}
html.design-lab :is(.tx-icon,.dot).txf-ic .txf-badge.rec{background:var(--income);}
html.design-lab :is(.tx-icon,.dot).txf-ic .txf-badges{position:absolute;right:-9px;bottom:-4px;display:flex;}
html.design-lab :is(.tx-icon,.dot).txf-ic .txf-badges .txf-badge{position:static;}
html.design-lab :is(.tx-icon,.dot).txf-ic .txf-badges .txf-badge+.txf-badge{margin-left:-5px;}
/* Extrato da conta e fatura no celular com a lista agrupada (v8.199.0): a caixa
   branca de fora sai, como em Lançamentos (senão vira cartão dentro de cartão). */
@media (max-width:900px){
  html.design-lab #account-details #desktopAccountList,html.design-lab #cards-sec #cardsInvoiceListPanel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
  html.design-lab #cards-sec #cardsInvoiceListPanel .reports-card-head{padding:4px 4px 0!important;}
}

/* ===== Regras automáticas de categoria (v8.199.0, app-category-rules.js) ===== */
html.design-lab #categories .cat-col{display:grid;gap:16px;min-width:0;align-content:start;}
html.design-lab #categories .cat-card-badge.crule-badge{background:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important;}
html.design-lab #categories .crule-row .cat-name{overflow-wrap:anywhere;}
html.design-lab #categories .crule-empty{color:var(--muted);font-size:13px;line-height:1.45;padding:6px 0 14px;}
html.design-lab #ruleOverlay .crule-modal{max-width:460px!important;width:100%;}
html.design-lab #ruleOverlay .crule-modal h2{display:flex!important;align-items:center;justify-content:space-between;gap:12px;}
html.design-lab #ruleOverlay .crule-hint{margin-top:2px;font-size:13px;line-height:1.45;}
html.design-lab #ruleOverlay .modal-actions .crule-del{margin-right:auto;color:var(--expense)!important;}
@media(max-width:900px){html.design-lab #ruleOverlay .crule-modal{max-height:92vh;overflow-y:auto!important;}html.design-lab #ruleOverlay .crule-wide{display:none;}html.design-lab #ruleOverlay .modal-actions .crule-del{flex:0 0 52px!important;min-width:52px!important;padding:0!important;}}

/* ===== Comprovante do lançamento (v8.201.0, app-tx-receipt.js) ===== */
#txOverlay .rcp-card{order:60;background:var(--app-surface,var(--card));border:1px solid var(--app-line);border-radius:18px;padding:12px 14px;margin:0}
.rcp-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.rcp-add{display:flex;align-items:center;gap:12px;width:100%;border:1.5px dashed color-mix(in srgb,var(--primary) 45%,transparent);border-radius:14px;padding:12px;color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent);font:inherit;text-align:left;cursor:pointer}
.rcp-add .rcp-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);font-size:17px;flex:0 0 40px}
.rcp-add b,.rcp-file b{display:block;font-size:15px;color:var(--text)}
.rcp-add small,.rcp-file small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;font-weight:500}
.rcp-file{display:flex;align-items:center;gap:12px;cursor:pointer}
.rcp-file .rcp-tx{flex:1;min-width:0}
.rcp-th{width:48px;height:60px;border-radius:10px;background:var(--app-line) center/cover;flex:0 0 48px;border:1px solid var(--app-line);display:grid;place-items:center;color:var(--muted)}
.rcp-th.rcp-pdf,.rcp-big.rcp-pdf{background:color-mix(in srgb,var(--expense) 10%,var(--card));color:var(--expense);font-size:20px}
.rcp-x{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--muted);background:var(--app-soft,rgba(127,127,127,.1));border:0;flex:0 0 36px;cursor:pointer}
.rcp-dsec .rcp-file{border:1px solid var(--app-line);border-radius:14px;padding:10px 12px;background:var(--card)}
.rcp-dsec .rcp-add{padding:14px}
.rcp-dside{margin-top:14px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid var(--app-line);font-size:13px;color:var(--muted)}
.rcp-dside.hidden{display:none}
.rcp-dside .rcp-th{width:38px;height:48px;flex:0 0 38px}
.rcp-dside b{display:block;color:var(--text);font-size:13.5px}
.rcp-det{padding:14px 16px!important}
.rcp-det .rcp-big{display:grid;place-items:center;width:100%;height:190px;border-radius:14px;background:var(--app-line) center 18%/cover;border:1px solid var(--app-line);position:relative;margin-top:8px;cursor:pointer;color:var(--muted);font-size:24px}
.rcp-det .rcp-big>span{position:absolute;right:10px;bottom:10px;background:rgba(15,20,30,.72);color:#fff;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:999px;display:flex;gap:6px;align-items:center}
.rcp-det .rcp-big.rcp-pdf{height:110px;font-size:34px}
.rcp-det .rcp-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;color:var(--muted)}
.rcp-det .rcp-meta a{color:var(--primary);font-weight:600;text-decoration:none;cursor:pointer}
.rcp-view{position:fixed;inset:0;z-index:2147482000;background:#07090d;display:flex;flex-direction:column;color:#fff;font-family:inherit}
.rcp-view .rcp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(28px + env(safe-area-inset-top)) 16px 12px}
.rcp-view .rcp-top b{font-size:16px}.rcp-view .rcp-top small{display:block;font-size:12.5px;color:#9aa3b2;font-weight:500;margin-top:2px}
.rcp-view .rcp-close{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;border:0;flex:0 0 38px;cursor:pointer}
.rcp-view .rcp-img{flex:1;background:center/contain no-repeat;margin:4px 12px}
.rcp-view .rcp-bot{display:flex;gap:10px;padding:14px 16px calc(26px + env(safe-area-inset-bottom));width:min(100%,560px);margin:0 auto;box-sizing:border-box}
.rcp-view .rcp-bot button{flex:1;display:flex;gap:8px;justify-content:center;align-items:center;height:48px;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;border:0;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.rcp-view .rcp-bot button.del{color:#ff7a88}
.rcp-clip{color:var(--muted);font-size:11px;margin-left:5px}
@media(min-width:901px){.rcp-det .rcp-big{height:150px;background-position:center 22%}}

/* ===== Assinatura (#billingOverlay, app-billing.js + app-billing-view.js, v8.205.0) ===== */
#billingOverlay{position:fixed;inset:0;z-index:5500;display:none;align-items:center;justify-content:center;padding:28px 20px;background:rgba(14,22,44,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
#billingOverlay.open{display:flex}
#billingOverlay .bil-card{position:relative;width:100%;max-width:940px;margin:auto;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 70px rgba(14,22,44,.3);overflow:hidden;text-align:left}
#billingOverlay .bil-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 14px 22px;border-bottom:1px solid var(--border)}
#billingOverlay .bil-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
#billingOverlay .bil-brand img{width:26px;height:26px;border-radius:7px}
#billingOverlay .bil-top-link{background:none;border:0;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;padding:6px 4px}
#billingOverlay .bil-grid{display:grid;grid-template-columns:340px minmax(0,1fr)}
#billingOverlay .bil-side{position:relative;isolation:isolate;overflow:hidden;margin:18px 0 18px 18px;padding:24px 22px;border-radius:18px;background:#0a0f2c;color:#fff;display:flex;flex-direction:column;gap:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#billingOverlay .bil-waves{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#billingOverlay .bil-waves path{fill:none;stroke-width:1.5}
#billingOverlay .bil-side-tag{color:#9fb4ff}
#billingOverlay .bil-side-tag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
#billingOverlay .bil-price{display:flex;align-items:baseline;gap:6px;margin-top:-6px}
#billingOverlay .bil-price b{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
#billingOverlay .bil-price span{font-size:14px;opacity:.8}
#billingOverlay .bil-side-sub{margin:-8px 0 0;font-size:14px;line-height:1.45;opacity:.9}
#billingOverlay .bil-feats{list-style:none;margin:2px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.22);display:grid;gap:11px}
#billingOverlay .bil-feats li{display:flex;align-items:center;gap:11px;font-size:14px;line-height:1.3}
#billingOverlay .bil-feats li span{flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(48,91,243,.35);color:#c9d6ff;font-size:13px;backdrop-filter:blur(2px)}
#billingOverlay .bil-methods{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
#billingOverlay .bil-methods>span{width:100%;font-size:12px;opacity:.8;margin-bottom:2px}
#billingOverlay .bil-methods b{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600}
#billingOverlay .bil-safe{margin:0;font-size:12px;line-height:1.45;opacity:.85;display:flex;gap:8px;align-items:flex-start}
#billingOverlay .bil-safe i{margin-top:2px}
#billingOverlay .bil-main{padding:26px 28px 22px;display:flex;flex-direction:column;gap:16px;min-width:0}
#billingOverlay .bil-hero h2{margin:10px 0 6px;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
#billingOverlay .bil-sub{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
#billingOverlay .bil-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3}
#billingOverlay .is-info{color:var(--primary)}#billingOverlay .bil-chip.is-info{background:var(--accent-soft)}
#billingOverlay .is-ok{color:var(--income)}#billingOverlay .bil-chip.is-ok{background:var(--positive-soft)}
#billingOverlay .is-warn{color:var(--warning)}#billingOverlay .bil-chip.is-warn{background:var(--warning-soft)}
#billingOverlay .is-danger{color:var(--expense)}#billingOverlay .bil-chip.is-danger{background:var(--negative-soft)}
#billingOverlay .is-muted{color:var(--muted)}#billingOverlay .bil-chip.is-muted{background:var(--surface-sunken)}
#billingOverlay .bil-trial{padding:14px 16px;border-radius:14px;background:var(--accent-soft)}
#billingOverlay .bil-trial-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
#billingOverlay .bil-trial-top span{color:var(--muted);font-size:13px;white-space:nowrap}
#billingOverlay .bil-bar{height:6px;border-radius:99px;background:rgba(48,91,243,.15);margin:10px 0;overflow:hidden}
#billingOverlay .bil-bar i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
#billingOverlay .bil-trial p{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
#billingOverlay .bil-box{border:1px solid var(--border);border-radius:16px;padding:16px}
#billingOverlay .bil-box h3{margin:0 0 4px;font-size:15px;font-weight:700}
#billingOverlay .bil-label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:10px 0 6px}
#billingOverlay .bil-in{width:100%;box-sizing:border-box;height:46px;border-radius:12px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);padding:0 14px;font-size:16px}
#billingOverlay .bil-in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-soft)}
#billingOverlay .bil-note{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
#billingOverlay .bil-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#billingOverlay .bil-steps li{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;line-height:1.3}
#billingOverlay .bil-steps b{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--primary);font-size:12px}
#billingOverlay .bil-steps small{display:block;color:var(--muted);font-weight:500;font-size:12px;margin-top:2px}
#billingOverlay .bil-rows{padding:4px 16px}
#billingOverlay .bil-rows>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:14px;border-bottom:1px solid var(--border)}
#billingOverlay .bil-rows>div:last-child{border-bottom:0}
#billingOverlay .bil-rows span{color:var(--muted)}
#billingOverlay .bil-rows b{font-weight:600;text-align:right}
#billingOverlay .bil-hist{display:grid;margin-top:6px}
#billingOverlay .bil-hist-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);text-align:left;font:inherit;cursor:default}
#billingOverlay button.bil-hist-row{cursor:pointer}
#billingOverlay .bil-hist-row:last-child{border-bottom:0}
#billingOverlay .bil-hist-ic{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-sunken);font-size:14px}
#billingOverlay .bil-hist-ic.is-ok{background:var(--positive-soft)}#billingOverlay .bil-hist-ic.is-warn{background:var(--warning-soft)}#billingOverlay .bil-hist-ic.is-info{background:var(--accent-soft)}
#billingOverlay .bil-hist-txt{flex:1;min-width:0;display:grid;gap:2px}
#billingOverlay .bil-hist-txt b{font-size:14px;font-weight:600}
#billingOverlay .bil-hist-txt b::first-letter{text-transform:uppercase}
#billingOverlay .bil-hist-row small{font-size:12px;color:var(--muted)}
#billingOverlay .bil-hist-val{display:grid;gap:2px;text-align:right}
#billingOverlay .bil-hist-val b{font-size:14px}
#billingOverlay .bil-hist-val small.is-ok{color:var(--income)}#billingOverlay .bil-hist-val small.is-warn{color:var(--warning)}#billingOverlay .bil-hist-val small.is-info{color:var(--primary)}
#billingOverlay .bil-empty{margin:8px 0 4px;color:var(--muted);font-size:13px}
#billingOverlay .bil-foot{display:grid;gap:10px;margin-top:auto;padding-top:4px}
#billingOverlay .bil-foot .btn{width:100%;justify-content:center;min-height:50px;font-size:15px;font-weight:700;border-radius:14px}
html.design-lab #billingOverlay .bil-cta{background:var(--primary)!important;background-image:none!important;box-shadow:none!important;color:#fff;border-color:transparent}
html.design-lab #billingOverlay .bil-ghost{background:var(--surface-sunken)!important;background-image:none!important;box-shadow:none!important;color:var(--text);border-color:transparent}
html.design-lab #billingOverlay .bil-danger{background:transparent!important;background-image:none!important;box-shadow:none!important;color:var(--expense);border:1px solid color-mix(in srgb,var(--expense) 45%,transparent)}
html.design-lab #billingOverlay .bil-danger:hover{background:var(--negative-soft)!important}
#billingOverlay .bil-cx ul{list-style:none;margin:0;padding:0;display:grid}
#billingOverlay .bil-cx li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
#billingOverlay .bil-cx li:last-child{border-bottom:0}
#billingOverlay .bil-cx li>span:last-child{display:grid;gap:3px}
#billingOverlay .bil-cx b{font-size:14px;font-weight:600}
#billingOverlay .bil-cx small{font-size:13px;color:var(--muted);line-height:1.45}
#billingOverlay .bil-cx-ic{flex:0 0 36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:15px;background:var(--surface-sunken)}
#billingOverlay .bil-cx-ic.is-info{background:var(--accent-soft)}#billingOverlay .bil-cx-ic.is-ok{background:var(--positive-soft)}
#billingOverlay .bil-bar.is-warn{background:var(--warning-soft)}#billingOverlay .bil-bar.is-warn i{background:var(--warning)}
#billingOverlay .bil-tl-top{display:flex;justify-content:space-between;gap:10px;font-size:15px}
#billingOverlay .bil-tl-top span{color:var(--muted);font-size:13px;white-space:nowrap}
#billingOverlay .bil-tl ol{list-style:none;margin:14px 0 0;padding:0;display:grid}
#billingOverlay .bil-tl li{position:relative;display:flex;gap:12px;padding:0 0 16px}
#billingOverlay .bil-tl li:last-child{padding-bottom:0}
#billingOverlay .bil-tl li:not(:last-child)::before{content:'';position:absolute;left:17px;top:38px;bottom:2px;width:2px;background:var(--border)}
#billingOverlay .bil-tl-dot{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:var(--surface-sunken)}
#billingOverlay .bil-tl li.is-info .bil-tl-dot{background:var(--accent-soft);color:var(--primary)}
#billingOverlay .bil-tl li.is-danger .bil-tl-dot{background:var(--negative-soft);color:var(--expense)}
#billingOverlay .bil-tl li.is-muted .bil-tl-dot{color:var(--muted)}
#billingOverlay .bil-tl li>span:last-child{display:grid;gap:2px;padding-top:1px}
#billingOverlay .bil-tl small{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
#billingOverlay .bil-tl li.is-danger small{color:var(--expense)}
#billingOverlay .bil-tl b{font-size:14px;font-weight:600}
#billingOverlay .bil-tl em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.45}
#billingOverlay .bil-links{display:flex;justify-content:center;gap:20px}
#billingOverlay .bil-links button{background:none;border:0;padding:6px 2px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
#billingOverlay .bil-links button.is-danger{color:var(--expense)}
.billing-tool-row .bil-row-tag{margin-left:auto;margin-right:6px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.billing-tool-row .bil-row-tag:empty{display:none}
@media (max-width:900px){
  #billingOverlay .bil-grid{grid-template-columns:minmax(0,1fr)}
  #billingOverlay .bil-side{margin:18px 18px 0}
}
@media (max-width:680px){
  #billingOverlay{align-items:stretch;padding:0;background:var(--bg)}
  #billingOverlay .bil-card{max-width:none;min-height:100%;overflow:visible;border:0;border-radius:0;box-shadow:none;background:var(--bg);display:flex;flex-direction:column}
  #billingOverlay .bil-top{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:0;padding:calc(28px + env(safe-area-inset-top)) 16px 8px}
  #billingOverlay .bil-grid{display:flex;flex-direction:column;flex:1}
  #billingOverlay .bil-main{display:contents}
  #billingOverlay .bil-hero{order:0;padding:6px 16px 0}
  #billingOverlay .bil-hero h2{font-size:22px}
  #billingOverlay .bil-side{order:1;margin:16px 16px 0;padding:18px 16px;gap:12px;border-radius:18px}
  #billingOverlay .bil-price b{font-size:30px}
  #billingOverlay .bil-feats{grid-template-columns:1fr 1fr;gap:10px 8px}
  #billingOverlay .bil-feats li{font-size:13px;gap:8px}
  #billingOverlay .bil-feats li span{flex-basis:26px;height:26px;font-size:12px}
  #billingOverlay .bil-methods>span{display:none}
  #billingOverlay .bil-card.is-member .bil-side{display:none}
  #billingOverlay .bil-trial,#billingOverlay .bil-box,#billingOverlay .bil-steps{order:2;margin:16px 16px 0;background:var(--card)}
  #billingOverlay .bil-trial{background:var(--accent-soft)}
  #billingOverlay .bil-steps{background:none}
  #billingOverlay .bil-foot{order:3;position:sticky;bottom:0;margin-top:auto;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--border)}
  #billingOverlay .bil-foot:not(:has(.btn)){border-top:0}
}
/* ===== Dívidas (v8.202.0, app-debts*.js) ===== */
.dbt-nav-ico{width:18px;text-align:center;font-size:15px}
.dbt-root{display:grid;gap:16px}
.dbt-card{background:var(--card);border:1px solid var(--app-line);border-radius:22px;padding:22px}
.dbt-sum{display:grid;grid-template-columns:1.3fr 1fr 1fr}
.dbt-sum>div{padding:0 22px;border-left:1px solid var(--app-line)}.dbt-sum>div:first-child{padding-left:0;border-left:0}
.dbt-k{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;gap:7px;align-items:center}
.dbt-v{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-top:6px;font-variant-numeric:tabular-nums}
.dbt-v.sm{font-size:22px}.dbt-s{font-size:12.5px;color:var(--muted);margin-top:4px}
.dbt-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--muted) 18%,transparent);overflow:hidden;margin-top:14px}
.dbt-bar i{display:block;height:100%;border-radius:99px;background:var(--primary);transition:width .25s ease}
.dbt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dbt-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--text)}
.dbt-badge{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:var(--negative-soft);color:var(--expense);font-size:14px;flex:0 0 32px}
.dbt-row{display:grid;grid-template-columns:44px minmax(0,1fr) 220px 150px 16px;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--app-line);cursor:pointer}
.dbt-head+.dbt-row{border-top:0}
.dbt-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:17px;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c)}
.dbt-txt{min-width:0}.dbt-nm{display:block;font-weight:700;font-size:15px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dbt-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.dbt-pg .dbt-bar{margin-top:6px;height:6px}.dbt-pg small{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.dbt-r{text-align:right}.dbt-r b{display:block;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}.dbt-r small{font-size:12px;color:var(--muted)}
.dbt-chev{color:var(--muted);font-size:13px}
.dbt-add{display:flex;align-items:center;gap:12px;width:100%;padding:16px 0 0;margin-top:2px;border:0;border-top:1px solid var(--app-line);background:none;color:var(--primary);font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-align:left}
.dbt-add span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,transparent);font-size:12px}
.dbt-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 10px;color:var(--muted);font-size:13.5px;line-height:1.45}
.dbt-empty b{color:var(--text);font-size:15px}.dbt-empty .dbt-badge{width:44px;height:44px;font-size:18px;margin-bottom:4px}
.dbt-note{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.dbt-note i{color:var(--primary);margin-top:3px}
/* detalhe */
html.design-lab #debtDetailOverlay .dbt-win{width:min(900px,94vw)!important;max-width:none!important;max-height:92vh;overflow:auto;padding:26px!important;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start;background:var(--bg)!important}
.dbt-dh{grid-column:1/-1;margin:0!important;display:flex!important;justify-content:space-between;align-items:center;gap:12px;font-size:20px;color:var(--text)}
.dbt-dh small{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:3px}
.dbt-win .dbt-card{padding:18px}
.dbt-lbl{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dbt-hero .dbt-v{font-size:30px}
.dbt-li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--app-line);font-size:14px;color:var(--text)}
.dbt-hero .dbt-li:first-of-type{margin-top:10px}
.dbt-li span{color:var(--muted)}.dbt-li b{font-weight:700;text-align:right}.dbt-li b i{color:var(--muted);margin-right:4px}
.dbt-split{display:flex;height:12px;border-radius:99px;overflow:hidden;margin:12px 0 10px}.dbt-split i{display:block;height:100%}
.dbt-leg{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.dbt-leg>div{display:flex;justify-content:space-between}.dbt-leg b{color:var(--text)}.dbt-leg-gap{margin-top:4px}
.dbt-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.dbt-sim .dbt-in{display:flex;align-items:center;gap:8px;border:1px solid var(--app-line);border-radius:14px;padding:0 14px;height:48px;background:var(--app-surface,transparent);margin:10px 0 12px}
.dbt-sim .dbt-in span{color:var(--muted);font-size:14px;font-weight:600}
html.design-lab .dbt-sim .dbt-in input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;height:auto!important;font-size:18px!important;font-weight:700;color:var(--text)}
.dbt-res{border-radius:14px;padding:12px 14px;background:var(--positive-soft);color:var(--text);font-size:13.5px;line-height:1.5}
.dbt-res b{color:var(--income)}
.dbt-go{width:100%;margin-top:12px}
.dbt-par{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--app-line);font-size:14px;color:var(--text)}
.dbt-lbl+.dbt-par{border-top:0}
.dbt-par .n{font-weight:700;color:var(--muted)}.dbt-par small{display:block;color:var(--muted);font-size:12px}
.dbt-tag{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,#f5a524 16%,transparent);color:#b7791f}
.dbt-tag.ok{background:var(--positive-soft);color:var(--income)}.dbt-tag.fut{background:transparent;color:var(--muted)}.dbt-tag.late{background:var(--negative-soft);color:var(--expense)}
.dbt-acts{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}
.dbt-acts .btn{min-width:140px}.dbt-acts .dbt-del{min-width:0;width:46px;color:var(--expense)}
/* formulário (padrão Novo lançamento) */
@media(max-width:900px){html.design-lab #debtOverlay .dbt-form{width:min(560px,94vw)!important;max-width:none!important;max-height:92vh;overflow:auto;padding:22px 22px 0!important;display:flex;flex-direction:column;gap:10px;background:var(--bg)!important}}
@media(max-width:900px){html.design-lab #debtOverlay .dbt-form>h2{display:flex!important;justify-content:space-between;align-items:center;margin:0 0 4px!important;font-size:22px}}
.dbt-types{display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border:1px solid var(--app-line);border-radius:18px;padding:12px 4px 10px}
.dbt-types button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;letter-spacing:-.01em}
.dbt-types button b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--muted) 12%,transparent);font-size:17px;transition:background .15s ease,box-shadow .15s ease}
.dbt-types button.on{color:var(--primary);font-weight:700}
.dbt-types button.on b{background:var(--primary);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 35%,transparent)}
.dbt-c{background:var(--card);border:1px solid var(--app-line);border-radius:18px;padding:11px 14px 12px;min-width:0}
.dbt-c.hidden{display:none}
.dbt-l{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
html.design-lab #debtOverlay .dbt-c :is(input:not([type=checkbox]),select){width:100%;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;height:auto!important;min-height:0!important;font-size:16px!important;font-weight:600;color:var(--text);border-radius:0!important}
.dbt-big{text-align:center;padding:14px 14px 16px}
html.design-lab #debtOverlay .dbt-big input{text-align:center;font-size:36px!important;font-weight:800;letter-spacing:-.02em}
.dbt-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dbt-steps{display:flex;align-items:center;gap:10px}
.dbt-step{display:flex;align-items:center;gap:6px}
.dbt-step button{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;border:0;background:color-mix(in srgb,var(--muted) 12%,transparent);color:var(--text);font-size:12px;cursor:pointer}
html.design-lab #debtOverlay .dbt-step input{width:44px!important;text-align:center;font-size:18px!important;font-weight:700;-moz-appearance:textfield}
.dbt-step input::-webkit-inner-spin-button,.dbt-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dbt-of{color:var(--muted);font-size:14px;font-weight:500}
.dbt-c .dbt-bar{height:6px;margin-top:10px}
.dbt-cap{font-size:12px;color:var(--muted);margin-top:6px;display:flex;justify-content:space-between}
.dbt-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--muted) 12%,transparent)}
.dbt-seg button{height:34px;border-radius:9px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.dbt-seg button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.dbt-hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4}
.dbt-sw{display:flex;align-items:center;gap:12px;cursor:pointer;margin:0}
.dbt-sw .t{flex:1;min-width:0}.dbt-sw b{display:block;font-size:15px;color:var(--text)}.dbt-sw small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.dbt-sw input{position:absolute;opacity:0;pointer-events:none}
.dbt-tg{width:46px;height:28px;border-radius:99px;background:color-mix(in srgb,var(--muted) 30%,transparent);position:relative;flex:0 0 46px;transition:background .15s ease}
.dbt-tg::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s ease}
.dbt-sw input:checked+.dbt-tg{background:var(--income)}.dbt-sw input:checked+.dbt-tg::after{left:21px}
.dbt-sumbox{display:grid;grid-template-columns:1.35fr 1fr 1fr;padding:12px 4px;background:color-mix(in srgb,var(--primary) 7%,var(--card));border-color:color-mix(in srgb,var(--primary) 22%,var(--app-line))}
.dbt-sumbox>div{padding:0 10px;border-left:1px solid color-mix(in srgb,var(--primary) 18%,var(--app-line))}.dbt-sumbox>div:first-child{border-left:0}
.dbt-sumbox small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.dbt-sumbox b{display:block;white-space:nowrap;font-size:14.5px;margin-top:3px;color:var(--text);font-variant-numeric:tabular-nums}
.dbt-sumbox .dbt-sum-empty{grid-column:1/-1;border:0;font-size:13px;color:var(--muted);padding:0 10px}
.dbt-foot-note{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.45}
@media(max-width:900px){html.design-lab #debtOverlay .dbt-form>.modal-actions{position:sticky;bottom:0;margin:4px -22px 0!important;padding:12px 22px 18px!important;background:var(--bg);border-top:1px solid var(--app-line);display:flex;gap:10px}}
@media(max-width:900px){html.design-lab #debtOverlay .dbt-form>.modal-actions .btn{flex:1}}
@media(max-width:900px){
  .dbt-root{gap:12px}
  .dbt-card{padding:16px;border-radius:20px}
  .dbt-sum{grid-template-columns:1fr 1fr;gap:14px}
  .dbt-sum>div{padding:0;border:0}.dbt-sum>div:first-child{grid-column:1/-1}
  .dbt-v{font-size:30px}.dbt-v.sm{font-size:18px}
  .dbt-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:14px 0}
  .dbt-row .dbt-pg{grid-column:2/-1;grid-row:2}.dbt-row .dbt-chev{display:none}
  .dbt-ic{width:40px;height:40px}
  html.design-lab :is(#debtDetailOverlay,#debtOverlay){align-items:stretch!important;padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html.design-lab #debtDetailOverlay .dbt-win{position:fixed!important;inset:0;width:100%!important;height:100%;max-height:none;border-radius:0!important;grid-template-columns:1fr;padding:calc(28px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))!important;box-shadow:none!important;border:0!important}
  html.design-lab #debtOverlay .dbt-form{position:fixed!important;inset:0;width:100%!important;height:100%;max-height:none;border-radius:0!important;padding:0 16px!important;box-shadow:none!important;border:0!important}
  html.design-lab #debtOverlay .dbt-form>h2{position:sticky;top:0;z-index:3;margin:0 -16px 4px!important;padding:calc(28px + env(safe-area-inset-top)) 16px 12px!important;background:var(--bg);border-bottom:1px solid var(--app-line);font-size:22px}
  html.design-lab #debtOverlay .dbt-fx{display:none!important}
  html.design-lab #debtOverlay .dbt-form>.modal-actions{margin:4px -16px 0!important;padding:12px 16px calc(14px + env(safe-area-inset-bottom))!important}
  .dbt-types{gap:0;padding:12px 2px 10px}.dbt-types button{font-size:11px}
  .dbt-acts .btn{flex:1}
}
html.design-lab #debtOverlay .dbt-c .fm-select-trigger{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;min-height:24px!important;height:auto!important;font-size:16px!important;font-weight:600;width:100%}
html.design-lab #debtOverlay .dbt-c .fm-select-trigger .fm-select-icon{color:#5a8de1}
html.design-lab #debtOverlay .dbt-c.dbt-big input{text-align:center;font-size:36px!important;font-weight:800!important;letter-spacing:-.02em;line-height:1.15!important}
.dbt-win::before,.dbt-form::before{display:none!important}
@media(max-width:900px){
  html.design-lab #debtDetailOverlay .dbt-dh{position:sticky;top:calc(-28px - env(safe-area-inset-top));z-index:3;margin:calc(-28px - env(safe-area-inset-top)) -16px 0!important;padding:calc(28px + env(safe-area-inset-top)) 16px 12px;background:var(--bg);border-bottom:1px solid var(--app-line)}
}
@media(max-width:900px){
  html.design-lab #debtOverlay .dbt-form{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
  html.design-lab #debtOverlay .dbt-form>.modal-actions{position:fixed!important;left:0;right:0;bottom:0;z-index:4;margin:0!important}
}
/* v8.202.1: no iPhone a regra geral das janelas (max-height 92dvh !important) cortava a página das dívidas embaixo */
@media(max-width:900px){
  html.design-lab :is(#debtDetailOverlay .dbt-win,#debtOverlay .dbt-form){position:fixed!important;inset:0!important;height:100%!important;max-height:none!important;margin:0!important;border-radius:0!important;transform:none!important}
  html.design-lab #debtDetailOverlay .dbt-dh{top:0}
}
.dbt-rate-hint{font-size:12px;color:var(--muted);line-height:1.4;padding:0 4px;margin-top:-2px}
@media(max-width:900px){
  html.design-lab #debtDetailOverlay .dbt-win{padding:0 16px calc(24px + env(safe-area-inset-bottom))!important}
  html.design-lab #debtDetailOverlay .dbt-dh{position:sticky!important;top:0!important;margin:0 -16px!important;padding:calc(28px + env(safe-area-inset-top)) 16px 12px!important}
}
/* ===== Nova dívida larga no computador (v8.204.0, app-debts-desk.js) =====
   O resto vem das regras fmx (o #debtOverlay entra nas listas :is junto do #billOverlay). */
@media(max-width:900px){html.design-lab #debtOverlay .fmx-modal .fmx-desk.fmx-desk{display:none!important}}
@media(min-width:901px){
  html.design-lab #debtOverlay .modal.fmx-modal{width:min(1080px,calc(100vw - 48px))!important}
  html.design-lab #debtOverlay .dbk-kinds button{gap:8px}
  html.design-lab #debtOverlay .fmx-modal .fmx-sec .fmx-grid.dbk-g4{display:grid!important;grid-template-columns:150px 150px minmax(0,.7fr) minmax(0,1.3fr)!important;gap:12px!important}
  html.design-lab #debtOverlay .dbk-step{display:flex;align-items:center;height:44px;border-radius:12px;background:var(--fmx-input);border:1px solid var(--fmx-input-line);overflow:hidden}
  html.design-lab #debtOverlay .dbk-step button{width:40px;height:100%;flex:0 0 40px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px}
  html.design-lab #debtOverlay .dbk-step button:hover,html.design-lab #debtOverlay .dbk-step button:focus-visible{color:var(--primary)}
  html.design-lab #debtOverlay .fmx-modal .fmx-sec .field .dbk-step input{flex:1;min-width:0;width:auto!important;border:0!important;background:none!important;box-shadow:none!important;text-align:center;font-size:16px!important;font-weight:700;padding:0!important;height:100%!important;border-radius:0!important;-moz-appearance:textfield}
  html.design-lab #debtOverlay .dbk-step input::-webkit-inner-spin-button,html.design-lab #debtOverlay .dbk-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  html.design-lab #debtOverlay .dbk-note{display:flex;gap:8px;align-items:flex-start;margin:12px 2px 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
  html.design-lab #debtOverlay .dbk-note i{margin-top:2px;color:var(--primary)}
  html.design-lab #debtOverlay .fmx-modal .fmx-sec .field label.dbt-sw{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;height:44px!important;margin:0!important;padding:0 8px 0 14px!important;border-radius:12px;background:var(--fmx-input);border:1px solid var(--fmx-input-line);text-transform:none!important;letter-spacing:0!important;color:var(--text)!important}
  html.design-lab #debtOverlay .fmx-sec .dbt-sw b{font-size:14px;font-weight:600}
  html.design-lab #debtOverlay .fmx-sec .dbt-sw small{display:none}
  html.design-lab #debtOverlay .dbk-per{font-size:15px;font-weight:600;color:var(--muted);margin-left:4px}
  html.design-lab #debtOverlay .dbk-tag{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;color:#0f9d76;background:color-mix(in srgb,#0f9d76 12%,transparent)}
  html.design-lab #debtOverlay .dbk-prog{margin-top:16px}
  html.design-lab #debtOverlay .dbk-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden}
  html.design-lab #debtOverlay .dbk-bar i{display:block;height:100%;border-radius:inherit;background:var(--fmx-accent,var(--primary));transition:width .2s}
  html.design-lab #debtOverlay .dbk-cap{display:flex;justify-content:space-between;margin-top:7px;font-size:12.5px;color:var(--muted)}
  html.design-lab #debtOverlay .dbk-cap b{color:var(--text)}
  html.design-lab #debtOverlay .dbk-empty{font-size:13px;color:var(--muted);line-height:1.45}
  html.design-lab #debtOverlay .fmx-pv-sm .fmx-imp-row{padding:6px 0}
  html.design-lab #debtOverlay .dbk-chart{margin-top:14px;padding-top:12px;border-top:1px solid var(--app-line)}
  html.design-lab #debtOverlay .dbk-ch-head{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px}
  html.design-lab #debtOverlay .dbk-chart svg{display:block;width:100%;height:auto;overflow:visible}
  html.design-lab #debtOverlay .dbk-axis{stroke:var(--app-line);stroke-width:1}
  html.design-lab #debtOverlay .dbk-past{fill:var(--fmx-accent,var(--primary));opacity:.9}
  html.design-lab #debtOverlay .dbk-past-l{fill:none;stroke:var(--fmx-accent,var(--primary));stroke-width:2}
  html.design-lab #debtOverlay .dbk-fut{fill:var(--fmx-accent,var(--primary));opacity:.14}
  html.design-lab #debtOverlay .dbk-fut-l{fill:none;stroke:var(--fmx-accent,var(--primary));stroke-width:2;stroke-dasharray:4 3;opacity:.7}
  html.design-lab #debtOverlay .dbk-now-l{stroke:var(--text);stroke-width:1;stroke-dasharray:2 2;opacity:.5}
  html.design-lab #debtOverlay .dbk-now{fill:var(--app-surface);stroke:var(--fmx-accent,var(--primary));stroke-width:2.5}
  html.design-lab #debtOverlay .dbk-now-t{font-size:10.5px;font-weight:700;fill:var(--text);paint-order:stroke;stroke:var(--app-surface);stroke-width:3.5px;stroke-linejoin:round}
  html.design-lab #debtOverlay .dbk-x{font-size:10px;font-weight:600;fill:var(--muted)}
  html.design-lab #debtOverlay .dbk-leg{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--muted)}
  html.design-lab #debtOverlay .dbk-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--fmx-accent,var(--primary))}
  html.design-lab #debtOverlay .dbk-leg i.f{opacity:.25}
}

/* ===== Relatórios: lista de categorias com barra + janela de subcategorias (v8.208.0) ===== */
html.design-lab #reportsCategoryList .rcl-list{display:flex;flex-direction:column}
html.design-lab #reportsCategoryList .rcl-row{display:flex!important;align-items:center;gap:12px;padding:11px 4px!important;margin:0 -4px;border-top:1px solid var(--app-line)!important;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.design-lab #reportsCategoryList .rcl-row:first-child{border-top:0!important;padding-top:2px!important}
html.design-lab #reportsCategoryList .rcl-row:active{background:var(--app-surface-soft)}
@media(hover:hover){html.design-lab #reportsCategoryList .rcl-row:hover{background:var(--app-surface-soft)}}
html.design-lab .rcl-ic{width:26px;flex:0 0 26px;display:flex;justify-content:center;font-size:18px}
html.design-lab .rcl-ic i{color:inherit!important}
html.design-lab .rcl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
html.design-lab .rcl-top{display:flex;align-items:baseline;gap:10px}
html.design-lab .rcl-name{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.design-lab .rcl-val{font-size:14.5px;font-weight:700;color:var(--text);white-space:nowrap}
html.design-lab .rcl-pct{font-size:12.5px;font-weight:500;color:var(--text-3);min-width:30px;text-align:right}
html.design-lab .rcl-bar{height:7px;border-radius:4px;background:var(--app-surface-soft);overflow:hidden}
html.design-lab .rcl-bar i{display:block;height:100%;border-radius:4px}
html.design-lab .rcl-chev{font-size:11px;color:var(--text-3)}
.rcs-wrap{position:fixed;inset:0;z-index:5200}
.rcs-dim{position:absolute;inset:0;background:rgba(10,15,30,.42);opacity:0;transition:opacity .24s ease}
.rcs-sheet{position:absolute;left:0;right:0;bottom:0;max-height:86dvh;overflow:auto;background:var(--card,#fff);border-radius:22px 22px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.rcs-wrap.open .rcs-dim{opacity:1}
.rcs-wrap.open .rcs-sheet{transform:translateY(0)}
.rcs-grab{width:38px;height:5px;border-radius:3px;background:var(--app-line);margin:0 auto 16px}
.rcs-head{display:flex;align-items:center;gap:12px}
.rcs-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:15px}
.rcs-ic i{color:inherit!important}
.rcs-title{flex:1;min-width:0}
.rcs-name{font-size:17px;font-weight:700;color:var(--text)}
.rcs-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.rcs-x{width:32px;height:32px;flex:0 0 32px;border:0;border-radius:50%;background:var(--app-surface-soft);color:var(--text-3);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer}
.rcs-total{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:16px 0 10px}
.rcs-lbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin:4px 0 2px}
.rcs-list{margin-bottom:16px}
.rcs-it{display:flex;flex-direction:column;gap:7px;padding:10px 0}
.rcs-btn{width:100%;padding:14px;border:0;border-radius:14px;background:var(--primary,#305bf3);color:#fff;font:600 15px inherit;font-family:inherit;cursor:pointer}

/* ===== Tela de carregamento do computador (v8.209.0): o painel de ondas do login =====
   Antes: azul-escura até o app-auth-desk.js pôr .lgd-on, depois fundo branco com o texto
   branco (sumia) e a carteira vazia (Font Awesome ainda baixando). Agora é uma tela só,
   escura nos dois temas, com a carteira em SVG e as ondas (script logo depois do #authScreen).
   Saída: o painel sobe revelando o Início (lddLeave, app-auth-desk.js). Celular não usa nada disso. */
.ldd-waves,.ldd-wallet{display:none;}
@media(min-width:901px){
  html.design-lab #authScreen.auth-resolving:not(.lgd-busy){background:transparent!important;}
  html.design-lab #authScreen.auth-resolving .auth-loading{position:fixed!important;inset:0!important;z-index:5;width:auto!important;height:auto!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#0a0f2c!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;color:#fff!important;overflow:hidden;animation:none!important;}
  html.design-lab #authScreen.auth-resolving .auth-loading::before{display:none!important;}
  html.design-lab #authScreen.auth-resolving .ldd-waves{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .ldd-waves path{fill:none;stroke:url(#lddGrad);stroke-width:1.5;}
  html.design-lab #authScreen.auth-resolving .auth-loading .brand-mark{position:relative;width:84px!important;height:84px!important;margin:0!important;border-radius:24px!important;background:#305bf3!important;background-image:none!important;color:#fff!important;display:grid!important;place-items:center;box-shadow:0 30px 60px -20px rgba(48,91,243,.9)!important;animation:lddPop .8s cubic-bezier(.34,1.5,.5,1) both!important;}
  html.design-lab #authScreen.auth-resolving .auth-loading .brand-mark::before,html.design-lab #authScreen.auth-resolving .auth-loading .brand-mark::after{display:none!important;}
  html.design-lab #authScreen.auth-resolving .auth-loading .brand-mark i{display:none!important;}
  html.design-lab #authScreen.auth-resolving .auth-loading .ldd-wallet{display:block;width:38px;height:38px;fill:currentColor;}
  html.design-lab #authScreen.auth-resolving .auth-loading strong{position:relative;margin:26px 0 0!important;font:700 30px Sora,Inter,sans-serif!important;letter-spacing:-.02em!important;color:#fff!important;line-height:1.2!important;animation:lddUp .6s cubic-bezier(.22,1,.36,1) .2s both;}
  html.design-lab #authScreen.auth-resolving .auth-loading #authLoadingMessage{position:relative;margin:8px 0 0!important;font-size:14px!important;line-height:1.45!important;color:rgba(255,255,255,.66)!important;animation:lddUp .6s cubic-bezier(.22,1,.36,1) .3s both;}
  html.design-lab #authScreen.auth-resolving .auth-loading #authLoadingMessage.ldk-swap{animation:lddUp .45s cubic-bezier(.22,1,.36,1) both;}
  html.design-lab #authScreen.auth-resolving .auth-loading::after{content:''!important;display:block!important;position:relative!important;inset:auto!important;order:10;width:160px!important;height:3px!important;margin:26px 0 0!important;border-radius:4px!important;background:rgba(255,255,255,.12) linear-gradient(90deg,#305bf3,#7f9cff,#53e0b4) no-repeat!important;background-size:40% 100%!important;animation:lddBar 1.25s cubic-bezier(.65,0,.35,1) infinite,lddUp .6s cubic-bezier(.22,1,.36,1) .4s both!important;}
  html.design-lab #authScreen.lgd-busy .auth-loading{display:none!important;}
  html.design-lab #authScreen.ldd-leave .auth-loading{transform:translateY(-100%);transition:transform 1s cubic-bezier(.65,0,.35,1);}
}
@keyframes lddPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes lddUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lddBar{from{background-position:-70% 0}to{background-position:170% 0}}
@media(prefers-reduced-motion:reduce){html.design-lab #authScreen.auth-resolving .auth-loading::after{animation:none!important;}}

/* Relatórios no computador: lista de categorias em colunas alinhadas (v8.209.0, opção A) */
html.design-lab #reportsCategoryList .rdl-list{display:flex;flex-direction:column;gap:4px}
html.design-lab #reportsCategoryList .cat-row.rdl-row{padding:0!important;margin:0!important;border:0!important;border-radius:14px!important;transition:background .2s ease}
html.design-lab #reportsCategoryList .rdl-row:hover,html.design-lab #reportsCategoryList .rdl-row.is-expanded{background:var(--app-surface-soft)}
html.design-lab #reportsCategoryList .rdl-row.is-flash{background:var(--accent-soft,rgba(48,91,243,.12))}
#reportsCategoryList .rdl-head,#reportsCategoryList .rdl-sub{display:grid;grid-template-columns:38px minmax(120px,1fr) minmax(80px,1.1fr) 40px 104px 14px;column-gap:14px;align-items:center}
#reportsCategoryList .rdl-head{padding:10px 12px}
#reportsCategoryList .rdl-head[role=button]{cursor:pointer}
#reportsCategoryList .rdl-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:15px}
#reportsCategoryList .rdl-ic i{color:inherit!important}
#reportsCategoryList .rdl-nm{display:flex;flex-direction:column;min-width:0}
#reportsCategoryList .rdl-nm b{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reportsCategoryList .rdl-nm small{font-size:12px;color:var(--text-3);margin-top:1px}
#reportsCategoryList .rdl-bar{height:8px;border-radius:5px;background:color-mix(in srgb,var(--text-3) 14%,transparent);overflow:hidden}
#reportsCategoryList .rdl-bar i{display:block;height:100%;border-radius:5px;background:var(--c)}
#reportsCategoryList .rdl-bar.sm{height:6px}
#reportsCategoryList .rdl-bar.sm i{background:color-mix(in srgb,var(--c) 70%,transparent)}
#reportsCategoryList .rdl-p{font-size:13px;font-weight:500;color:var(--text-3);text-align:right}
#reportsCategoryList .rdl-v{font-size:15px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap}
#reportsCategoryList .rdl-chev{font-size:12px;color:var(--text-3);transition:transform .2s ease}
#reportsCategoryList .rdl-row.is-expanded .rdl-chev{transform:rotate(180deg)}
#reportsCategoryList .rdl-body{display:none;flex-direction:column;padding:2px 12px 14px 64px}
#reportsCategoryList .rdl-row.is-expanded .rdl-body{display:flex}
#reportsCategoryList .rdl-sub{grid-template-columns:8px minmax(106px,1fr) minmax(80px,1.1fr) 40px 104px 14px;padding:8px 0;border-top:1px solid var(--app-line)}
#reportsCategoryList .rdl-sub:first-child{border-top:0}
#reportsCategoryList .rdl-dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
#reportsCategoryList .rdl-sn{font-size:14px;color:var(--text-2,var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reportsCategoryList .rdl-sp{font-size:12.5px;color:var(--text-3);text-align:right}
#reportsCategoryList .rdl-sv{font-size:14px;font-weight:600;color:var(--text);text-align:right;white-space:nowrap}
#reportsCategoryList .rdl-go{align-self:flex-start;margin-top:10px;padding:0;border:0;background:none;color:var(--primary,#305bf3);font:600 13px/1.4 inherit;font-family:inherit;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
#reportsCategoryList .rdl-go i{font-size:11px;color:inherit!important}