:root{
  --blue:#059669;
  --out:#E5484D; --accent-rgb:5,150,105; --accent-mid:#047857; --accent-deep:#064E3B;
  --blue-dark:#064E3B;
  --navy:#0F2A44;
  --white:#FFFFFF;
  --card-bg:#F5F8FC;
  --bg-soft:#DCE3EF;
  --gray-100:#E4E9F3;
  --gray-300:#C9D3E4;
  --text-secondary:#5B6B84;
  --text-main:#0F1E38;
  --green:#16A34A;
  --green-bg:#E9F9EF;
  --red:#E5484D;
  --red-bg:#FDECEC;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow:0 4px 16px rgba(15,30,56,0.09);
  --shadow-md:0 8px 24px rgba(15,30,56,0.13);
  --transition-theme: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

[data-theme="dark"]{
  --blue:#10B981;
  --accent-rgb:16,185,129;
  --blue-dark:#052E22;
  --navy:#EAF1FF;
  --white:#151E2E;
  --card-bg:#1B2637;
  --bg-soft:#0A0F1C;
  --gray-100:#243044;
  --gray-300:#33415A;
  --text-secondary:#8CA0BC;
  --text-main:#EAF1FB;
  --green:#22C55E;
  --green-bg:#0F2A1C;
  --red:#F87171;
  --red-bg:#3A1418;
  --shadow:0 4px 16px rgba(0,0,0,0.45);
  --shadow-md:0 10px 28px rgba(0,0,0,0.55);
}
[data-theme="dark"] body{background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 14%, #0A0F1C) 0%, var(--bg-soft) 55%);}
[data-theme="dark"] .card, [data-theme="dark"] .modal-card{border:1px solid rgba(255,255,255,0.06);}
[data-theme="dark"] .btn-primary{box-shadow:0 8px 22px rgba(var(--accent-rgb),0.35);}
[data-theme="dark"] .cat-grid-item, [data-theme="dark"] .cat-mini-btn{border-color:rgba(255,255,255,0.08);}

/* modo claro: fundo com leve profundidade (em vez de cor chapada) e cards com contorno sutil */
body{background:radial-gradient(circle at 50% 0%, #FFFFFF 0%, var(--bg-soft) 65%);}
.card, .modal-card{border:1px solid rgba(15,42,68,0.06);}
.topbar{background:rgba(245,248,252,0.97);}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.btn-primary{box-shadow:0 10px 22px rgba(var(--accent-rgb),0.22);}
.credit-card-item{border:1px solid rgba(15,42,68,0.06);}

*, *::before, *::after{ transition: var(--transition-theme); }

/* barra de rolagem combinando com o tema (em vez da barra branca padrão do navegador) */
*{ scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--gray-300); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--text-secondary); }

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',-apple-system,'Roboto',sans-serif;
  background:var(--bg-soft);
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
}
button, input, select{font-family:inherit;}
a{text-decoration:none; color:inherit;}
.hidden{display:none !important;}

.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg-soft);
  position:relative;
  display:flex;
  flex-direction:column;
}

/* ===================== LOGIN ===================== */
.screen-login{
  display:none;
  min-height:100vh;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:calc(32px + env(safe-area-inset-top)) 28px calc(32px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 6%, #fff) 0%, color-mix(in srgb, var(--blue) 20%, #EAF0F6) 100%);
}
.screen-login.active{display:flex;}
.login-wrap{width:100%; max-width:340px; text-align:center;}
.login-logo{display:flex; flex-direction:column; align-items:center; margin-bottom:28px; position:relative;}
.logo-badge{
  position:relative; z-index:2;
  width:64px; height:64px; border-radius:18px; flex:none;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  box-shadow:0 10px 24px rgba(var(--accent-rgb),0.28);
}
/* antes da fonte Inter carregar o navegador usa a fonte do sistema, que é mais larga —
   isso fazia o "Fluxo" nascer maior e ficar por um instante atrás do ícone acima.
   Travando a altura da linha e usando uma pilha de fallback parecida evita esse pulo. */
.login-logo h1{
  position:relative; z-index:1;
  font-size:30px; line-height:1.2; font-weight:800; color:var(--navy); letter-spacing:-0.5px;
  font-family:Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.login-logo h1 span{color:var(--blue);}
.login-logo p{margin-top:10px; color:var(--text-secondary); font-size:15px; line-height:1.5;}
.login-actions{display:flex; flex-direction:column; gap:12px;}
.google-btn-container{display:flex; justify-content:center; min-height:44px;}
.link-create-account{margin-top:6px; color:var(--blue); font-weight:600; font-size:14px;}
.link-guest{margin-top:2px; background:none; border:0; padding:8px 12px; font:inherit; font-size:14px; font-weight:600; color:var(--text-secondary); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}

.btn{
  border:none; cursor:pointer; border-radius:var(--radius-md);
  padding:14px 18px; font-size:15px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s cubic-bezier(.2,.9,.3,1.4), opacity .15s ease, box-shadow .2s ease, background-color .25s ease;
  width:100%;
  position:relative; overflow:hidden;
}
.btn:active{transform:scale(0.96);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 18px rgba(var(--accent-rgb),0.25);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(var(--accent-rgb),0.35);}
.btn-outline{background:var(--card-bg); color:var(--navy); border:1.5px solid var(--gray-300);}
.btn-outline:hover{transform:translateY(-1px); border-color:var(--blue); color:var(--blue);}
.btn-danger:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(229,72,77,0.3);}
.btn-demo{margin-top:18px;}
.btn-add-inst{margin-top:16px;}
.icon-btn{transition:transform .18s cubic-bezier(.2,.9,.3,1.4), color .18s ease, background-color .18s ease;}
.icon-btn:hover{transform:scale(1.12) rotate(-4deg); color:var(--blue); background:var(--gray-100); border-radius:50%;}
.icon-btn:active{transform:scale(0.9);}
.nav-btn{transition:transform .18s cubic-bezier(.2,.9,.3,1.4), color .2s ease;}
.nav-btn:active{transform:scale(0.9);}
.seg-btn{transition:transform .15s ease, background-color .2s ease, color .2s ease;}
.seg-btn:active{transform:scale(0.95);}

/* ===================== MODAL ===================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,42,68,0.45);
  display:flex; align-items:flex-end; justify-content:center; z-index:100;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.modal-overlay.active{opacity:1; visibility:visible; pointer-events:auto;}
.modal-card{
  background:var(--card-bg); width:100%; max-width:480px;
  border-radius:24px 24px 0 0; padding:22px 20px 28px;
  max-height:85vh; overflow-y:auto;
  transform:translateY(30px); opacity:0;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .22s ease;
}
.modal-overlay.active .modal-card{transform:translateY(0); opacity:1;}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.modal-head h3{font-size:18px; font-weight:700;}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; padding:4px;}
.modal-head .icon-btn{font-size:22px;}
.modal-body label{font-size:13px; font-weight:600; color:var(--text-secondary); display:block; margin:12px 0 6px;}
.modal-body input, .modal-body select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-300); font-size:15px; background:var(--bg-soft);
}
.modal-body .btn{margin-top:20px;}

/* ===================== TOPBAR ===================== */
.main-app{display:none; flex-direction:column; min-height:100vh;}
.main-app.active{display:flex;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top)) 18px 16px; background:var(--card-bg); position:sticky; top:0; z-index:20;
  box-shadow:0 1px 0 var(--gray-100);
}
.topbar-title{font-size:17px; font-weight:700; flex:1; text-align:center;}
.back-btn{position:absolute;}
.avatar-btn{width:36px; height:36px; border-radius:50%; background:var(--gray-100); color:var(--blue-dark);}
.avatar-img{width:36px; height:36px; border-radius:50%; object-fit:cover;}
.topbar-actions{display:flex; align-items:center; gap:8px;}
.theme-toggle-btn{
  width:36px; height:36px; border-radius:50%; background:var(--gray-100); color:var(--blue-dark);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.theme-toggle-btn:active svg{animation:themeSpin .4s ease;}
@keyframes themeSpin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(160deg) scale(.7);}
  100%{transform:rotate(360deg) scale(1);}
}

.content{flex:1; padding:18px 18px 100px; overflow-y:auto;}
.content .screen{display:none;}
.content .screen.active{display:block; animation:screenEnter .42s cubic-bezier(.16,1,.3,1);}
.content .screen.active.swipe-in-left{animation:swipeInLeft .32s cubic-bezier(.16,1,.3,1);}
.content .screen.active.swipe-in-right{animation:swipeInRight .32s cubic-bezier(.16,1,.3,1);}
@keyframes screenEnter{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes swipeInLeft{
  from{opacity:0; transform:translateX(38px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes swipeInRight{
  from{opacity:0; transform:translateX(-38px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes itemPop{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
.tx-row, .bank-row, .cat-row, .bank-chip, .add-inst-item, .legend-row, .plan-row, .plan-cat-group, .meta-row{
  animation:itemPop .32s ease both;
}
@keyframes pulseIn{
  0%{opacity:0; transform:scale(.92);}
  60%{opacity:1; transform:scale(1.02);}
  100%{opacity:1; transform:scale(1);}
}
.card-balance{animation:pulseIn .45s cubic-bezier(.2,.9,.3,1.1);}
.tx-row:nth-child(1), .bank-row:nth-child(1), .cat-row:nth-child(1), .bank-chip:nth-child(1){animation-delay:.02s;}
.tx-row:nth-child(2), .bank-row:nth-child(2), .cat-row:nth-child(2), .bank-chip:nth-child(2){animation-delay:.06s;}
.tx-row:nth-child(3), .bank-row:nth-child(3), .cat-row:nth-child(3), .bank-chip:nth-child(3){animation-delay:.10s;}
.tx-row:nth-child(4), .bank-row:nth-child(4), .cat-row:nth-child(4), .bank-chip:nth-child(4){animation-delay:.14s;}
.tx-row:nth-child(5), .bank-row:nth-child(5), .cat-row:nth-child(5), .bank-chip:nth-child(5){animation-delay:.18s;}
.tx-row:nth-child(n+6), .bank-row:nth-child(n+6), .cat-row:nth-child(n+6), .bank-chip:nth-child(n+6){animation-delay:.20s;}

/* ===================== DASHBOARD ===================== */
.greeting{font-size:22px; font-weight:800; color:var(--navy);}
.subtext{color:var(--text-secondary); font-size:14px; margin-top:4px; margin-bottom:16px;}

.card{
  background:var(--card-bg); border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow); margin-bottom:16px;
  transition:transform .2s ease, box-shadow .2s ease, background-color .25s ease;
}
@media (hover:hover){
  .card:hover, .tx-row:hover, .bank-row:hover, .cat-row:hover, .bank-chip:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }
}
.card-balance{
  background:linear-gradient(135deg,var(--blue) 0%, var(--accent-mid) 60%, var(--accent-deep) 100%);
  color:#fff; box-shadow:0 14px 34px rgba(var(--accent-rgb),0.32);
  position:relative; overflow:hidden; border-radius:20px;
}
.card-balance::before{
  content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px;
  background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.card-balance-top{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1;}
.card-label{font-size:13px; opacity:.92; display:flex; align-items:center; gap:6px; font-weight:600; letter-spacing:.2px;}
.card-balance-value{font-size:36px; font-weight:800; margin-top:10px; letter-spacing:-0.6px; position:relative; z-index:1; text-shadow:0 2px 12px rgba(0,0,0,.15);}
.card-balance-sub{font-size:13px; margin-top:6px; opacity:.85; position:relative; z-index:1;}

.row-cards{display:flex; gap:12px; margin-bottom:16px;}
.card-mini{flex:1; display:flex; flex-direction:column; gap:6px; padding:16px; margin-bottom:0; border-radius:16px;}
.mini-label{font-size:12.5px; color:var(--text-secondary); font-weight:600; display:flex; align-items:center; gap:5px;}
.mini-value{font-size:19px; font-weight:800; color:var(--text-main); letter-spacing:-0.3px;}
.card-green{border-left:3px solid var(--green);}
.card-green .mini-label{color:var(--green);}
.card-green .mini-value{color:var(--green);}
.card-red{border-left:3px solid var(--out);}
.card-red .mini-label{color:var(--out);}
.card-red .mini-value{color:var(--out);}
.card-result{display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.card-result .mini-value{color:var(--blue); font-size:20px;}

.filters-row{display:flex; gap:10px; margin-bottom:18px;}
.filters-row select{
  flex:1; padding:11px 12px; border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-300); background:var(--card-bg); font-size:13.5px; color:var(--text-main); font-weight:500;
}

.section-head{display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px;}
.section-head h3{font-size:15.5px; font-weight:700; color:var(--navy);}
.link-small{color:var(--blue); font-size:13px; font-weight:600;}

.banks-scroll{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px;}
.bank-chip{
  min-width:104px; background:var(--card-bg); border-radius:var(--radius-md);
  padding:12px; box-shadow:var(--shadow); flex-shrink:0;
}
.bank-chip .bank-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; margin-bottom:10px;}
.bank-chip .bank-amount{font-size:13.5px; font-weight:700;}

.donut-legend{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.legend-row{display:flex; align-items:center; justify-content:space-between; font-size:13.5px;}
.legend-left{display:flex; align-items:center; gap:8px;}
.legend-dot{width:9px; height:9px; border-radius:50%;}
.legend-pct{color:var(--text-secondary); font-weight:600;}
#donut-chart{display:block; margin:0 auto;}

/* ===================== BANCOS ===================== */
.banks-list{display:flex; flex-direction:column; gap:10px;}
.bank-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  background:var(--card-bg); border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow);
}
.bank-row .bank-row-left{flex:1 1 180px; min-width:0;}
.bank-row-name, .bank-status{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bank-row-left{display:flex; align-items:center; gap:12px;}
.bank-avatar{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px;}
.bank-row-name{font-weight:700; font-size:14.5px;}
.bank-status{font-size:12.5px; margin-top:2px; display:flex; align-items:center; gap:5px;}
.bank-status.connected{color:var(--green);}
.bank-status.disconnected{color:var(--text-secondary);}
.dot-status{width:6px; height:6px; border-radius:50%; background:currentColor;}
.btn-connect{
  border:1.5px solid var(--blue); color:var(--blue); background:var(--card-bg);
  border-radius:20px; padding:7px 16px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.btn-connect.connected{border-color:var(--gray-300); color:var(--text-secondary);}
.add-inst-item{display:flex; align-items:center; justify-content:space-between; padding:12px 4px; border-bottom:1px solid var(--gray-100);}

/* ===================== TRANSAÇÕES ===================== */
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--card-bg);
  border-radius:var(--radius-md); padding:11px 14px; box-shadow:var(--shadow);
  margin-bottom:14px; color:var(--text-secondary);
}
.search-box input{border:none; outline:none; font-size:14px; flex:1; background:transparent; color:var(--text-main);}

.tx-month-label{font-size:13px; font-weight:700; color:var(--text-secondary); margin:16px 0 8px; text-transform:capitalize;}
.tx-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card-bg); border-radius:var(--radius-md); padding:13px 14px; box-shadow:var(--shadow); margin-bottom:9px; cursor:pointer;
}
.tx-row-left{display:flex; align-items:center; gap:12px;}
.tx-icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; flex-shrink:0;}
.tx-desc{font-weight:700; font-size:14px;}
.tx-meta{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.tx-value{font-weight:700; font-size:14.5px; white-space:nowrap;}
.tx-value.pos{color:var(--green);}
.tx-value.neg{color:var(--out);}
.empty-state{text-align:center; padding:40px 20px; color:var(--text-secondary); font-size:14px;}
.tx-count-label{text-align:center; font-size:12px; color:var(--text-secondary); margin:14px 0 10px;}
#btn-load-more-tx{margin-bottom:10px;}

/* detalhe modal */
.detalhe-value{font-size:30px; font-weight:800; margin-bottom:2px;}
.detalhe-value.pos{color:var(--green);}
.detalhe-value.neg{color:var(--out);}
.detalhe-cat-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--gray-100); color:var(--navy);
  padding:6px 12px; border-radius:20px; font-size:12.5px; font-weight:600; margin:10px 0 18px;
}
.detalhe-info-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--gray-100); font-size:13.5px;}
.detalhe-info-row span:first-child{color:var(--text-secondary);}
.detalhe-info-row span:last-child{font-weight:600;}
.btn-danger{background:var(--red-bg); color:var(--red); margin-top:10px;}

/* ===================== CATEGORIAS ===================== */
.segmented{display:flex; background:var(--gray-100); border-radius:var(--radius-md); padding:4px; margin-bottom:18px;}
.seg-btn{flex:1; border:none; background:transparent; padding:10px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--text-secondary); cursor:pointer;}
.seg-btn.active{background:var(--card-bg); color:var(--blue); box-shadow:var(--shadow);}

.cat-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card-bg); border-radius:var(--radius-md); padding:14px; box-shadow:var(--shadow); margin-bottom:10px;
}
.cat-row-left{display:flex; align-items:center; gap:12px;}
.cat-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px;}
.cat-name{font-weight:700; font-size:14px;}
.cat-pct{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.cat-amount{font-weight:700; font-size:14px;}

.cat-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:6px;}
.cat-grid-item{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 6px; border-radius:var(--radius-sm); border:1.5px solid var(--gray-300); cursor:pointer;
  font-size:12px; font-weight:600; text-align:center;
  transition:transform .15s cubic-bezier(.2,.9,.3,1.4), border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cat-grid-item:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.cat-grid-item:active{transform:scale(0.96);}
.cat-grid-item.selected{border-color:var(--blue); background:#EEF4FF; color:var(--blue);}
[data-theme="dark"] .cat-grid-item.selected{background:rgba(var(--accent-rgb),0.16);}
.cat-grid-item .cat-icon{width:32px; height:32px; font-size:13px;}
.cat-grid-actions{position:absolute; top:4px; right:4px; display:flex; gap:3px; opacity:.85;}
.cat-mini-btn{
  width:20px; height:20px; border-radius:50%; border:none; cursor:pointer;
  background:var(--card-bg); color:var(--text-secondary); font-size:10px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  transition:transform .15s ease, background-color .2s ease, color .2s ease;
}
.cat-mini-btn:hover{transform:scale(1.15); color:var(--blue);}
.cat-mini-btn-danger:hover{color:var(--red);}
.cat-grid-add{border-style:dashed; color:var(--text-secondary);}
.cat-grid-add:hover{border-color:var(--blue); color:var(--blue);}
.cat-icon-add{background:var(--gray-100); color:var(--text-secondary); font-size:18px; font-weight:700;}

/* ===================== RELATÓRIOS ===================== */
.filters-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
.mini-lbl{font-size:12.5px; font-weight:600; color:var(--text-secondary); display:block; margin-bottom:6px;}
.filters-grid select{width:100%; padding:11px 12px; border-radius:var(--radius-sm); border:1.5px solid var(--gray-300); background:var(--card-bg); font-size:13.5px;}
#comp-mes1, #comp-mes2, #comp-tipo{width:100%; padding:12px; border-radius:var(--radius-sm); border:1.5px solid var(--gray-300); background:var(--card-bg); font-size:14px; margin-top:4px;}
.vs-label{text-align:center; font-weight:800; color:var(--text-secondary); margin:10px 0; font-size:13px;}
.bank-line-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--gray-100); font-size:14px;}
.bank-line-row:last-child{border-bottom:none;}
.bank-line-row span:first-child{font-weight:600;}
.bank-line-row span:last-child{font-weight:700; color:var(--navy);}
.comp-line{display:flex; justify-content:space-between; padding:8px 0; font-size:14px;}
.comp-diff{font-weight:800; font-size:17px; margin-top:8px;}
.comp-diff.up{color:var(--out);}
.comp-diff.down{color:var(--green);}

/* ===================== BOTTOM NAV ===================== */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; background:var(--card-bg); display:flex;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px rgba(20,33,61,0.07); z-index:30;
}
.nav-btn{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; color:var(--text-secondary); cursor:pointer;
  transition:color .2s ease, transform .15s ease;
}
.nav-btn:active{transform:scale(.88);}
.nav-btn span{font-size:11px; font-weight:600;}
.nav-btn.active{color:var(--blue);}
.nav-btn.active svg{animation:navPop .38s cubic-bezier(.34,1.56,.64,1);}
@keyframes navPop{
  0%{transform:scale(.7) rotate(-8deg);}
  60%{transform:scale(1.18) rotate(3deg);}
  100%{transform:scale(1) rotate(0);}
}

/* ===================== PROFILE ===================== */
.profile-row{display:flex; align-items:center; gap:14px;}
.avatar-img-lg{width:56px; height:56px; border-radius:50%; object-fit:cover;}
.avatar-icon-lg{width:56px; height:56px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; color:var(--blue-dark);}
.profile-name{font-weight:700; font-size:16px;}
.profile-email{font-size:13px; color:var(--text-secondary);}

/* demo badge */
.demo-badge{
  display:inline-block; background:#FFF4DE; color:#B36B00; font-size:11.5px; font-weight:700;
  padding:5px 10px; border-radius:20px; margin-bottom:14px;
}

/* ===================== FORM ERROR / CHECKBOX ===================== */
.form-error{
  background:var(--red-bg); color:var(--red); font-size:13px; font-weight:600;
  padding:9px 12px; border-radius:var(--radius-sm); margin-top:10px;
}
.checkbox-row{
  display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px;
  color:var(--text-secondary); font-weight:600; cursor:pointer;
}
.checkbox-row input{width:16px; height:16px; accent-color:var(--blue);}

/* ===================== PERFIL — menu estilo print ===================== */
.modal-card-menu .modal-head{align-items:flex-start;}
.modal-card-menu .profile-row{flex:1;}
.profile-menu{display:flex; flex-direction:column; gap:2px;}
.profile-menu-item{
  display:flex; align-items:center; gap:12px; background:none; border:none; cursor:pointer;
  padding:13px 6px; font-size:14.5px; font-weight:600; color:var(--text-main);
  border-radius:var(--radius-sm); text-align:left; width:100%;
}
.profile-menu-item:active{background:var(--gray-100);}
.profile-menu-item.danger{color:var(--red);}
.profile-menu-sep{height:1px; background:var(--gray-100); margin:8px 0;}

/* tx-meta agora também mostra a categoria */
.tx-meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.tx-bank-name{font-size:10.5px; color:var(--text-secondary); font-weight:500;}
.tx-cat-chip{
  display:inline-flex; align-items:center; gap:3px; background:var(--gray-100);
  padding:1px 7px; border-radius:20px; font-size:11px; font-weight:600; color:var(--text-secondary);
}

/* busca + botão de filtrar (Transações) */
.search-row{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.search-row .search-box{margin-bottom:0; flex:1;}
.btn-filter-toggle{flex:none; background:var(--card-bg); box-shadow:var(--shadow);}
.btn-filter-toggle.active{background:var(--blue); color:#fff;}
#tx-filters-wrap{margin-top:0;}

/* card clicável (entradas/saídas no início) */
.card-clickable{cursor:pointer; transition:transform .15s ease;}
.card-clickable:active{transform:scale(.97);}

/* tela de detalhe de entradas/saídas, agrupada por banco */
.es-bank-group{margin-bottom:16px;}
.es-bank-head{display:flex; align-items:center; justify-content:space-between; padding:0 2px 8px;}
.es-bank-name{display:flex; align-items:center; gap:10px; font-weight:700; font-size:13.5px; color:var(--navy);}
.es-bank-name .tx-icon{width:28px; height:28px; font-size:11px; border-radius:8px;}
.es-bank-total{font-weight:700; font-size:13.5px;}
.es-bank-total.pos{color:var(--green);}
.es-bank-total.neg{color:var(--out);}

/* destaque de limites no cartão */
.limit-highlight-row{display:flex; gap:8px; margin-bottom:8px;}
.limit-highlight{flex:1; background:var(--bg-soft); border-radius:var(--radius-sm); padding:8px 10px;}
.limit-highlight-label{display:block; font-size:10.5px; color:var(--text-secondary); font-weight:600; margin-bottom:2px;}
.limit-highlight-value{display:block; font-size:15.5px; font-weight:800; color:var(--navy);}

/* picker de emoji para nova categoria */
.emoji-picker-row{display:flex; flex-direction:column; gap:8px;}
.emoji-picker-row input{font-size:20px; text-align:center;}
.emoji-suggestions{display:flex; flex-wrap:wrap; gap:6px;}
.emoji-suggestions button{
  border:1.5px solid var(--gray-300); background:var(--bg-soft); border-radius:10px;
  font-size:18px; width:38px; height:38px; cursor:pointer;
}
.emoji-suggestions button:hover{border-color:var(--blue);}

/* estado de carregamento simples */
.loading-state{text-align:center; padding:40px 20px; color:var(--text-secondary); font-size:14px;}
.spinner{
  width:26px; height:26px; border-radius:50%; margin:0 auto 12px;
  border:3px solid var(--gray-300); border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================== RESPONSIVO ===================== */
@media (min-width:600px){
  .app{box-shadow:0 0 40px rgba(20,33,61,0.08);}
}
@media (min-width:820px){
  .app{max-width:900px;}
  .content{padding:24px 40px 110px;}
  .row-cards{display:grid; grid-template-columns:1fr 1fr;}
  .filters-grid{grid-template-columns:1fr 1fr 1fr 1fr;}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .bottom-nav{max-width:900px;}
  .screen-dashboard{display:grid; grid-template-columns:1fr 1fr; gap:0 24px;}
  .screen-dashboard .card-balance,
  .screen-dashboard .greeting,
  .screen-dashboard .subtext{grid-column:1 / -1;}
}
@media (max-width:360px){
  .content{padding:14px 12px 96px;}
  .card-balance-value{font-size:26px;}
}



/* ============================================================
   AJUSTES: foco, espaço da barra de baixo, carregamento
   ============================================================ */
.content{padding-bottom:calc(120px + env(safe-area-inset-bottom));}
button:focus:not(:focus-visible), .nav-btn:focus:not(:focus-visible){outline:none;}
.nav-btn:focus-visible, .btn:focus-visible, .btn-connect:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:12px;}

/* carregando: anel suave nos botões e barrinha deslizando no topo */
.ring-spinner{display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:middle; flex:none; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:ringSpin .7s cubic-bezier(.5,.2,.5,.8) infinite;}
@keyframes ringSpin{to{transform:rotate(360deg);}}

.is-loading{opacity:.8; pointer-events:none; cursor:progress;}
.btn-connect.is-loading, .btn.is-loading{display:inline-flex; align-items:center; justify-content:center;}

.top-progress{position:absolute; left:0; right:0; bottom:0; height:2.5px; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.top-progress.show{opacity:1;}
.top-progress i{position:absolute; top:0; bottom:0; left:0; width:40%; border-radius:99px; background:linear-gradient(90deg, transparent, var(--blue), transparent); animation:topSlide 1.1s ease-in-out infinite;}
.top-progress:not(.show) i{animation-play-state:paused;}
@keyframes topSlide{0%{transform:translateX(-100%);} 100%{transform:translateX(260%);}}

/* ============================================================
   MINHAS INSTITUIÇÕES
   ============================================================ */
.inst-conn{background:var(--bg-soft); border-radius:var(--radius-md); padding:14px; margin-bottom:12px; border:1px solid var(--gray-100);}
.inst-conn-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.inst-conn-info{flex:1 1 200px; min-width:0;}
.inst-conn-title{font-size:16px; font-weight:800; color:var(--navy); overflow-wrap:anywhere;}
.inst-conn-info .bank-status{margin-top:4px;}
.inst-conn-sub{font-size:12px; color:var(--text-secondary); margin-top:3px;}
.inst-conn-actions{display:flex; gap:8px; align-items:center;}
.btn-connect.danger{border-color:var(--red); color:var(--red);}
.inst-accs{display:flex; flex-direction:column; gap:8px;}
.inst-acc{display:flex; align-items:center; gap:12px; background:var(--card-bg); border-radius:12px; padding:11px 12px; box-shadow:var(--shadow);}
.inst-acc-info{flex:1; min-width:0;}
.inst-acc-name{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.inst-acc-sub{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.inst-acc-value{text-align:right;}
.inst-acc-amount{font-weight:800; font-size:14.5px;}
.inst-acc-label{font-size:11px; color:var(--text-secondary); margin-top:2px;}
.inst-empty{font-size:13px; color:var(--text-secondary); padding:6px 2px;}

/* ============================================================
   CARTÕES DE CRÉDITO
   ============================================================ */
.cards-wrap{margin-bottom:18px;}
.screen-dashboard .cards-wrap{grid-column:1 / -1;}
.credit-card-item{background:var(--card-bg); border-radius:var(--radius-md); box-shadow:var(--shadow); overflow:hidden; margin-bottom:10px; max-width:340px;}
.credit-card-top{padding:12px 14px; color:#fff;}
.credit-card-name{font-size:14.5px; font-weight:800;}
.credit-card-sub{font-size:11px; opacity:.9; margin-top:2px; letter-spacing:.3px;}
.credit-card-body{padding:10px 14px 12px;}
.limit-bar{height:6px; border-radius:5px; background:var(--gray-100); overflow:hidden; margin-bottom:9px;}
.limit-bar > div{height:100%; border-radius:5px; transition:width .4s ease;}
.kv-row{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--gray-100); font-size:12px;}
.kv-row span:first-child{color:var(--text-secondary);}
.kv-row span:last-child{font-weight:600; text-align:right; overflow-wrap:anywhere;}
.card-tx-btn{margin-top:9px; width:100%; padding:9px; font-size:13px;}


/* ============================================================
   FILTRO DE PERÍODO + REVISÃO DE CATEGORIAS
   ============================================================ */
.filters-row.filters-4{display:grid; grid-template-columns:1fr 1fr;}
.filters-row.filters-4 select{min-width:0; width:100%;}
@media (min-width:640px){
  .filters-row.filters-4{grid-template-columns:repeat(4,1fr);}
}

.review-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card-bg); border:1.5px dashed var(--gray-300); border-radius:var(--radius-md);
  padding:8px 12px; margin-bottom:12px; font-size:12px; color:var(--text-main);
}
.review-banner b{color:var(--navy);}
.review-banner button{
  flex:none; border:none; cursor:pointer; background:var(--blue); color:#fff;
  font-weight:600; font-size:11.5px; padding:6px 12px; border-radius:9px;
}

.rev-intro{text-align:center; padding:6px 0 2px;}
.rev-intro .rev-emoji{font-size:38px; line-height:1; margin-bottom:10px;}
.rev-intro p{color:var(--text-secondary); font-size:14px; line-height:1.5; margin-top:8px;}
.rev-intro p strong{color:var(--navy);}
.rev-progress{font-size:12.5px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; display:flex; justify-content:space-between;}
.rev-bar{height:4px; border-radius:4px; background:var(--gray-100); margin-bottom:14px; overflow:hidden;}
.rev-bar i{display:block; height:100%; background:var(--blue); border-radius:4px; transition:width .25s ease;}
.rev-tx{background:var(--bg-soft); border-radius:var(--radius-md); padding:14px; margin-bottom:14px; text-align:center;}
.rev-desc{font-weight:700; font-size:15px; color:var(--navy); overflow-wrap:anywhere;}
.rev-value{font-size:22px; font-weight:800; margin:6px 0 2px;}
.rev-value.pos{color:var(--green, #16A34A);}
.rev-value.neg{color:var(--out);}
.rev-meta{font-size:12px; color:var(--text-secondary);}
.rev-note{font-size:12.5px; color:var(--blue); font-weight:600; margin-bottom:10px; text-align:center;}
.rev-actions{display:flex; gap:10px; margin-top:14px;}
.rev-actions .btn{margin-top:0 !important;}
#rev-grid{max-height:38vh; overflow-y:auto;}

/* ============================================================
   TOAST (aviso não-bloqueante — substitui alert() nos fluxos que
   precisam repintar a tela antes de avisar o usuário, ex: sync do Pluggy)
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(12px);
  max-width:360px; width:calc(100% - 32px);
  background:var(--navy); color:var(--white);
  border-radius:var(--radius-md); padding:12px 16px; font-size:13.5px; line-height:1.45;
  box-shadow:var(--shadow-md); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  white-space:pre-line;
}
[data-theme="dark"] .toast{background:var(--card-bg); border:1px solid rgba(255,255,255,0.1);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.toast-error{background:var(--red);}

/* olho de esconder valores */
.eye-btn{background:rgba(255,255,255,.18); border:none; color:inherit; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.cat-chart-card{padding:18px 16px; margin-bottom:14px;}
#cat-donut{display:block; margin:0 auto; max-width:100%;}
.cat-chart-card .donut-legend{margin-top:16px;}
/* investimentos */
.inv-bank{margin-top:14px; padding:14px 16px;}
.inv-bank-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px;}
.inv-bank-head h3{font-size:15px; margin:0;}
.inv-row{padding:10px 0; border-top:1px solid var(--gray-200,rgba(128,128,128,.18));}
.inv-row-top{display:flex; justify-content:space-between; gap:10px; font-size:14px;}
.inv-name{font-weight:600;} .inv-bal{font-weight:700; white-space:nowrap;}
.inv-muted{font-size:12px; color:var(--text-secondary);}
.inv-ago{margin-top:3px; font-size:12.5px;}
.inv-delta{font-weight:700;} .inv-delta.pos{color:var(--green,#10B981);} .inv-delta.neg{color:var(--out,#EF4444);}

.cat-row[data-cat], .legend-row[data-cat]{cursor:pointer;}
.legend-row[data-cat]{padding:4px 2px; border-radius:8px;}
.cat-row[data-cat]:active, .legend-row[data-cat]:active{opacity:.7;}
.catdet-head{display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:14px;}
.catdet-head .cat-amount{margin-left:auto;}
.catdet-total.neg{color:var(--out,#EF4444);} .catdet-total.pos{color:var(--green,#10B981);}

.add-bank-chip{cursor:pointer; text-align:left; border:1.5px dashed var(--gray-300,#cbd3e1); background:transparent; font:inherit; color:inherit; min-width:96px;}
.add-bank-chip .add-icon{background:var(--gray-100,#EEF2F8)!important; color:var(--blue,#059669)!important; font-size:20px;}
.card-balance .inv-muted{color:rgba(255,255,255,.9);}
.card-balance .inv-delta.pos{color:#7CFFB8;} .card-balance .inv-delta.neg{color:#FFB4B4;}

.has-logo{overflow:hidden; border:1px solid rgba(128,128,128,.2); padding:0;}
.has-logo img{width:70%; height:70%; object-fit:contain; display:block;}
.bank-avatar.sm{width:30px; height:30px; border-radius:8px; font-size:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;}
.inv-bank-title{display:flex; align-items:center; gap:10px;}
.inv-edit-date{cursor:pointer;}

/* ---- login reorganizado ---- */
.login-wrap{max-width:340px;}
.login-logo-img{width:min(220px,62vw); height:auto; border-radius:34px; box-shadow:0 18px 44px rgba(var(--accent-rgb),.35), 0 0 0 1px rgba(var(--accent-rgb),.25);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.login-actions .btn{width:100%;}
.google-btn-container{width:100%; overflow:hidden;}
.login-or{display:flex; align-items:center; gap:12px; color:var(--text-secondary); font-size:12.5px; margin:2px 0;}
.login-or::before,.login-or::after{content:""; flex:1; height:1px; background:var(--gray-300);}
.btn-install{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:12px; border-radius:var(--radius-md); border:1.5px dashed var(--blue); background:transparent; color:var(--blue); font-weight:700; font-size:14px; cursor:pointer;}
.install-hint{margin-top:10px; font-size:12.5px; color:var(--text-secondary); line-height:1.5;}
.hidden.btn-install, .hidden.install-hint{display:none;}

/* ---- correções do modo escuro ---- */
[data-theme="dark"]{color-scheme:dark;}
[data-theme="dark"] .screen-login{background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 20%, #060C14) 0%, #060C14 70%);}
[data-theme="dark"] .topbar{background:rgba(21,30,46,0.92);}
[data-theme="dark"] .bottom-nav{background:var(--card-bg); box-shadow:0 -2px 14px rgba(0,0,0,0.5); border-top:1px solid rgba(255,255,255,0.06);}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.6);}
[data-theme="dark"] .demo-badge{background:#3A2E12; color:#F5C56B;}
[data-theme="dark"] .btn-outline{background:var(--card-bg); color:var(--text-main); border-color:rgba(255,255,255,0.14);}
[data-theme="dark"] .add-bank-chip{border-color:rgba(255,255,255,0.18);}
[data-theme="dark"] .inv-row{border-top-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .login-or::before,[data-theme="dark"] .login-or::after{background:rgba(255,255,255,0.14);}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{color:var(--text-main);}
[data-theme="dark"] input::placeholder{color:var(--text-secondary);}

/* ---- cores e abas nas configurações ---- */
#modal-configuracoes .modal-card{max-height:90vh; overflow-y:auto;}
.cfg-hint{display:block; font-weight:400; font-size:11.5px; color:var(--text-secondary); margin-top:2px;}
.accent-picker{display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 6px;}
.accent-dot{width:34px; height:34px; border-radius:50%; border:3px solid transparent; cursor:pointer; box-shadow:0 0 0 1px rgba(128,128,128,.35);}
.accent-dot.active{border-color:var(--card-bg); box-shadow:0 0 0 3px var(--text-main);}
.nav-editor{list-style:none; padding:0; margin:8px 0 4px; display:flex; flex-direction:column; gap:8px;}
.nav-edit-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--gray-100); color:var(--text-main);}
.nav-edit-item.off{opacity:.5;}
.nav-edit-item.dragging{box-shadow:var(--shadow-md); outline:2px solid var(--blue); opacity:.95;}
.nav-handle{cursor:grab; touch-action:none; font-size:18px; padding:2px 6px; color:var(--text-secondary); user-select:none;}
.nav-edit-name{flex:1; font-size:14px; font-weight:600;}
.nav-eye{background:none; border:none; font-size:18px; cursor:pointer; padding:2px 4px;}
.btn-link-small{background:none; border:none; color:var(--blue); font-weight:600; font-size:13px; padding:6px 0; cursor:pointer;}
/* ---- relatórios simples ---- */
.rel-filters-2{grid-template-columns:1fr 1fr;}
.more-filters{margin:4px 0 14px;}
.more-filters summary{font-size:13px; color:var(--blue); font-weight:600; cursor:pointer; padding:6px 0;}
.rel-frase{font-size:14px; line-height:1.5; color:var(--text-secondary); margin:10px 2px 16px;}
@media (min-width:0){.rel-filters-2{grid-template-columns:1fr 1fr !important;}}

/* ---- correções visuais ---- */
html,body{max-width:100%; overflow-x:hidden;}
.back-btn{left:14px; top:calc(50% + env(safe-area-inset-top) / 2); transform:translateY(-50%);}
.tx-row-left{min-width:0; flex:1; margin-right:10px;}
.tx-row-left > div:last-child{min-width:0;}
.tx-desc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-btn{min-width:0;}
.nav-btn span{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px;}
#cat-donut, #donut-chart{height:auto;}
.cat-row-left{min-width:0;} .cat-name{overflow-wrap:anywhere;}
.legend-left{min-width:0;}
.inv-name, .inv-bank-head h3{overflow-wrap:anywhere;}
.bank-chip .bank-amount{white-space:nowrap;}
/* ---- explicativo ---- */
.screen-hint{font-size:13px; line-height:1.5; color:var(--text-secondary); margin:0 2px 14px;}
.screen-hint b, .subtext b{color:var(--text-main); font-weight:700;}
.credits-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:24px 18px; margin-bottom:16px;}
.credits-logo{width:120px; height:120px; border-radius:26px; box-shadow:0 12px 30px rgba(var(--accent-rgb),.35);}
.credits-card h2{margin:6px 0 0; font-size:22px;}
.credit-line{display:flex; justify-content:space-between; gap:12px; width:100%; padding:10px 0; border-top:1px solid rgba(128,128,128,.18); font-size:13.5px; text-align:left;}
.credit-line span{color:var(--text-secondary);} .credit-line strong{text-align:right;}
.howto{padding:16px 18px 16px 8px;} .howto ol{margin:0; padding-left:26px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; line-height:1.5; color:var(--text-secondary);}
.howto b{color:var(--text-main);}

/* textos explicativos menores */
.screen-hint{font-size:11.5px; line-height:1.45; margin:0 2px 10px; opacity:.9;}
.rel-frase{font-size:12.5px; margin:8px 2px 12px;}
.howto ol{font-size:12.5px; gap:8px;}
.credit-line{font-size:12.5px;}
.cfg-hint{font-size:10.5px;}
.install-hint{font-size:11.5px;}

/* mais correções visuais */
html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;}
body{overscroll-behavior-y:none;}
@media (max-width:520px){ input, select, textarea{font-size:16px !important;} }
.inv-bank-head{flex-wrap:wrap;}
.inv-bank-title{min-width:0; flex:1;}
.credit-line strong{overflow-wrap:anywhere;}
.filters-row select, .filters-grid select{min-width:0; text-overflow:ellipsis;}
.section-head h3{overflow-wrap:anywhere;}
.card{overflow-wrap:anywhere;}
.banks-scroll{-webkit-overflow-scrolling:touch; scrollbar-width:none;}
.banks-scroll::-webkit-scrollbar{display:none;}

/* ---- arrastar abas: animação ---- */
.nav-edit-item{position:relative; transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease; will-change:transform;}
.nav-edit-item.dragging{z-index:5; cursor:grabbing; box-shadow:0 14px 30px rgba(0,0,0,.35); outline:2px solid var(--blue); opacity:1;}
.nav-sep{font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-secondary); padding:8px 4px 0; list-style:none;}
.nav-editor{touch-action:pan-y;}
/* ---- avisos legíveis no modo escuro ---- */
.cfg-hint{font-size:11.5px;}
[data-theme="dark"] .cfg-hint, [data-theme="dark"] .screen-hint, [data-theme="dark"] .install-hint, [data-theme="dark"] .rel-frase, [data-theme="dark"] .howto ol{color:#C3CFE2; opacity:1;}
[data-theme="dark"] .nav-sep{color:#C3CFE2;}
/* ---- cartões centralizados ---- */
#cards-wrap .section-head{justify-content:center; text-align:center;}
#cards-list{display:flex; flex-direction:column; align-items:center;}
.credit-card-item{width:100%; max-width:420px; margin-left:auto; margin-right:auto;}
.credit-card-top{text-align:center;}
.limit-highlight-row{justify-content:center; text-align:center;}
.limit-highlight{text-align:center; flex:1;}


/* ============================================================
   v4 — TELA INICIAL NOVA, AVISOS LEGÍVEIS, EXCLUIR CARTÃO
   (fica no fim do arquivo para valer sobre as regras antigas;
    usa as variáveis de cor, então acompanha a paleta escolhida)
   ============================================================ */

/* ---- avisos (toast): antes, no modo escuro, o texto era azul-escuro em fundo azul-escuro ---- */
.toast{
  bottom:calc(84px + env(safe-area-inset-bottom, 0px)); max-width:400px; z-index:250;
  padding:13px 16px 13px 16px; border-radius:16px; font-size:14px; font-weight:500; line-height:1.45;
  background:#0F2A44; color:#FFFFFF; border:1px solid rgba(255,255,255,.08); border-left:4px solid var(--blue);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.toast.show{pointer-events:auto; cursor:pointer;}
[data-theme="dark"] .toast{background:#28374F; color:#F3F7FD; border:1px solid rgba(255,255,255,.14); border-left:4px solid var(--blue);}
.toast.toast-error{background:#7F1D1D; color:#FFFFFF; border:1px solid rgba(255,255,255,.1); border-left:4px solid #FCA5A5;}
[data-theme="dark"] .toast.toast-error{background:#4C1D24; color:#FFE9EA; border:1px solid rgba(252,165,165,.25); border-left:4px solid #FCA5A5;}

/* ---- início: bloco do saldo ---- */
.hero{
  position:relative; overflow:hidden; border-radius:26px; padding:20px 20px 0; margin-bottom:12px;
  background:color-mix(in srgb, var(--blue) 6%, var(--card-bg));
  border:1px solid rgba(var(--accent-rgb), .2); box-shadow:var(--shadow);
}
[data-theme="dark"] .hero{background:color-mix(in srgb, var(--blue) 10%, var(--card-bg)); border-color:rgba(var(--accent-rgb), .28);}
.hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.hero .greeting{font-size:16px; font-weight:700; color:var(--text-main); letter-spacing:-.2px;}
.hero-sub{font-size:12.5px; color:var(--text-secondary); margin-top:3px;}
.hero-label{font-size:13px; font-weight:600; color:var(--text-secondary); margin-top:22px;}
.hero-value{
  font-size:clamp(38px, 11.5vw, 50px); font-weight:800; letter-spacing:-1.6px; line-height:1.05; margin-top:4px;
  color:var(--text-main); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-value .cur{font-size:.36em; font-weight:700; letter-spacing:0; color:var(--text-secondary); margin-right:.45em; vertical-align:.62em;}
.hero-value .cents{font-size:.5em; font-weight:700; letter-spacing:-.4px; color:var(--text-secondary);}
.hero-flow{display:block; width:calc(100% + 40px); height:70px; margin:8px -20px 0;}
.hero .eye-btn{background:var(--gray-100); color:var(--text-main); width:38px; height:38px; flex:none;}
.hero .eye-btn:active{transform:scale(.92);}

.flow-tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.flow-tile{
  display:flex; align-items:center; gap:10px; min-width:0; padding:14px 12px; border-radius:20px;
  background:var(--card-bg); border:1px solid rgba(128,128,128,.16); cursor:pointer;
  transition:transform .15s ease, border-color .2s ease;
}
.flow-tile:active{transform:scale(.97);}
.flow-tile:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.flow-ico{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;}
.flow-tile.in .flow-ico{background:rgba(34,197,94,.16); color:var(--green);}
.flow-tile.out .flow-ico{background:rgba(229,72,77,.16); color:var(--out);}
.flow-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.flow-tile .mini-label{font-size:12px; color:var(--text-secondary); font-weight:600;}
.flow-tile .mini-value{font-size:16px; font-weight:800; color:var(--text-main); letter-spacing:-.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums;}

.flow-bar{display:flex; gap:3px; height:6px; margin:0 4px 10px;}
.flow-bar span{display:block; height:100%; border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.2,1), opacity .3s;}
.flow-bar #flow-in{background:var(--green);}
.flow-bar #flow-out{background:var(--out);}
.flow-bar.empty span{opacity:.25;}
.flow-hint{margin-bottom:18px;}

.screen-dashboard .filters-row{gap:8px; margin-bottom:22px;}
.screen-dashboard .filters-row select{
  border-radius:999px; padding:10px 30px 10px 14px; font-size:16px; font-weight:500; min-width:0;
  border:1px solid rgba(128,128,128,.24); background-color:var(--card-bg); color:var(--text-main);
  -webkit-appearance:none; appearance:none; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238CA0BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.screen-dashboard .section-head{margin:2px 2px 12px;}
.screen-dashboard .section-head h3{font-size:16px; font-weight:800; letter-spacing:-.2px; color:var(--text-main);}

/* ---- seus bancos ---- */
.screen-dashboard .banks-scroll{gap:10px; margin:0 -18px 26px; padding:2px 18px 8px; scroll-snap-type:x proximity;}
.screen-dashboard .bank-chip{
  min-width:136px; padding:14px; border-radius:20px; box-shadow:none; animation:none; scroll-snap-align:start;
  border:1px solid rgba(128,128,128,.16);
}
.screen-dashboard .bank-chip .bank-icon{width:38px; height:38px; border-radius:11px; margin-bottom:16px;}
.screen-dashboard .bank-chip .bank-amount{font-size:15.5px; font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums;}
.screen-dashboard .add-bank-chip{border:1.5px dashed rgba(128,128,128,.4); background:transparent;}

/* ---- cartões de crédito ---- */
.credit-card-item{border-radius:22px; box-shadow:var(--shadow); border:1px solid rgba(128,128,128,.14);}
.credit-card-top{position:relative; padding:20px 52px 18px; overflow:hidden;}
.credit-card-top::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.14); pointer-events:none;}
.credit-card-top > *{position:relative; z-index:1;}
.credit-card-name{font-size:16px; letter-spacing:-.2px;}
.credit-card-sub{font-size:12px;}
.cc-del{
  position:absolute !important; top:10px; right:10px; z-index:2 !important; width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(0,0,0,.28); color:#fff; display:grid; place-items:center; cursor:pointer;
}
.cc-del:active{transform:scale(.9);} .cc-del:hover{background:rgba(0,0,0,.45);}
.credit-card-body{padding:14px 16px 16px;}
.limit-bar{height:7px;}
.limit-highlight{border-radius:14px; padding:10px 8px;}
.limit-highlight-value{font-variant-numeric:tabular-nums;}
.cc-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px;}
.cc-actions .btn-connect{margin:0; width:100%; padding:10px 8px; border-radius:14px;}
.btn-connect.danger{border-color:var(--out); color:var(--out); background:transparent;}
.acc-del{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(128,128,128,.3); background:transparent; color:var(--text-secondary);
}
.acc-del:hover, .acc-del:active{color:var(--out); border-color:var(--out);}

/* ---- confirmar exclusão ---- */
.del-card-name{font-size:16px; font-weight:800; margin-bottom:8px; overflow-wrap:anywhere;}
.del-card-text{font-size:14px; line-height:1.55; color:var(--text-secondary);}
[data-theme="dark"] .del-card-text{color:#C3CFE2;}
.del-card-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.del-card-actions .btn{margin-top:20px !important;}
.del-card-actions .btn-danger{background:#DC2626; color:#fff; border:none; box-shadow:0 8px 20px rgba(220,38,38,.3);}

/* ---- correções visuais ---- */
@media (hover:none){ .card:hover{transform:none; box-shadow:var(--shadow);} }
.card-balance, .bank-chip, .screen-dashboard .flow-tile{animation:none;}
@media (min-width:820px){
  .screen-dashboard{display:block; max-width:640px; margin:0 auto;}
}
@media (max-width:360px){
  .flow-tiles{grid-template-columns:1fr;}
  .credit-card-top{padding-left:44px; padding-right:44px;}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .ring-spinner{animation-duration:.9s !important; animation-iteration-count:infinite !important;}
  .top-progress i{animation-duration:1.4s !important; animation-iteration-count:infinite !important;}
}

/* ícones da barra de cima legíveis no modo escuro (estavam verde-escuro sobre cinza-escuro) */
[data-theme="dark"] .theme-toggle-btn, [data-theme="dark"] .avatar-btn{color:var(--text-main);}

/* nomes de conta/cartão não ficam mais cortados ("Cartão Ca…") na tela Meus bancos */
.inst-acc-name{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.25;}
.inst-acc-value{flex:none;}


/* ============================================================
   v5 — TODAS AS TELAS NO MESMO VISUAL DA INÍCIO (só cores e cards)
   Fica no fim para valer sobre as regras antigas; usa variáveis
   do tema, então acompanha a cor escolhida e o modo claro/escuro.
   ============================================================ */

/* ícones das caixinhas seguem a cor do tema (antes eram vermelho/verde fixos) */
.flow-tile.in .flow-ico{background:color-mix(in srgb, var(--green) 16%, transparent);}
.flow-tile.out .flow-ico{background:color-mix(in srgb, var(--out) 16%, transparent);}

/* Total investido: mesmo bloco tingido do saldo da Início */
.screen-investimentos .card-balance{
  background:color-mix(in srgb, var(--blue) 6%, var(--card-bg)); color:var(--text-main);
  border:1px solid rgba(var(--accent-rgb), .2); border-radius:26px; padding:20px; box-shadow:var(--shadow);
}
[data-theme="dark"] .screen-investimentos .card-balance{
  background:color-mix(in srgb, var(--blue) 10%, var(--card-bg)); border-color:rgba(var(--accent-rgb), .28);
}
.screen-investimentos .card-balance::before{display:none;}
.screen-investimentos .card-label{color:var(--text-secondary); opacity:1;}
.screen-investimentos .card-balance-value{
  font-size:clamp(34px, 10.5vw, 46px); letter-spacing:-1.4px; line-height:1.05; text-shadow:none; color:var(--text-main);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.screen-investimentos .card-balance-sub{color:var(--text-secondary); opacity:1;}
.screen-investimentos .card-balance .inv-muted{color:var(--text-secondary);}
.screen-investimentos .card-balance .inv-delta.pos{color:var(--green);}
.screen-investimentos .card-balance .inv-delta.neg{color:var(--out);}

/* Relatórios: "Sobrou/Faltou" com o mesmo acabamento das caixinhas */
.screen-relatorios .flow-tiles{margin-bottom:12px;}
.screen-relatorios .card-result{
  border-radius:20px; padding:14px 16px; background:var(--card-bg);
  border:1px solid rgba(128,128,128,.16); box-shadow:none;
}
.screen-relatorios .card-result .mini-label{font-size:12px; font-weight:600; color:var(--text-secondary);}
.screen-relatorios .card-result .mini-value{font-size:18px; font-weight:800; font-variant-numeric:tabular-nums;}

/* listas e blocos de todas as telas: mesma borda suave e raio das caixinhas da Início */
.tx-row, .cat-row, .bank-row{
  border:1px solid rgba(128,128,128,.16); border-radius:18px; box-shadow:0 1px 2px rgba(15,30,56,.04);
}
.card, .inst-conn, .inv-bank, .catdet-head, .credits-card, .howto{
  border:1px solid rgba(128,128,128,.16); border-radius:20px;
}
.card-balance, .hero{border-radius:26px;}
.inst-acc{border:1px solid rgba(128,128,128,.14); box-shadow:none; border-radius:14px;}
.search-box{border:1px solid rgba(128,128,128,.24); border-radius:16px; box-shadow:none;}
.btn-filter-toggle{border:1px solid rgba(128,128,128,.24); box-shadow:none;}
.segmented{border:1px solid rgba(128,128,128,.16);}
.filters-grid select, #comp-mes1, #comp-mes2, #comp-tipo{
  border:1px solid rgba(128,128,128,.24); border-radius:14px; color:var(--text-main); background-color:var(--card-bg);
}
.review-banner{border-style:solid; border-color:rgba(128,128,128,.16); border-radius:16px;}
.tx-row:hover, .cat-row:hover, .bank-row:hover{border-color:rgba(var(--accent-rgb), .35);}
.tx-row:active, .cat-row:active, .bank-row:active, .meta-row:active, .plan-row:active{transform:scale(.985); transition:transform .1s ease;}

/* seleção de categoria e selo de demonstração seguem a cor do tema (antes: azul e amarelo fixos) */
.cat-grid-item.selected{background:rgba(var(--accent-rgb), .10);}
.demo-badge{background:rgba(var(--accent-rgb), .12); color:var(--blue);}
[data-theme="dark"] .demo-badge{background:rgba(var(--accent-rgb), .18); color:var(--blue);}
.screen-relatorios .flow-tile{cursor:default;}
.screen-relatorios .flow-tile:active{transform:none;}

/* ============================================================
   v6 — MARCA, BANCOS E CARTÕES ORGANIZADOS, SEM EMOJIS DE INTERFACE
   (fica no fim do arquivo; usa as variáveis do tema)
   ============================================================ */

/* ---- marca "Fluxo" no topo da Início e dentro do bloco do saldo ---- */
.brand{display:inline-flex; align-items:center; gap:8px; vertical-align:middle;}
.brand-mark{width:26px; height:26px; border-radius:8px; display:block; box-shadow:0 0 0 1px rgba(128,128,128,.22);}
.brand-name{font-size:18px; font-weight:800; letter-spacing:-.4px; color:var(--text-main);}
.hero-brand{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:0 0 6px;}

/* ---- títulos de seção e link "Ver todos" ---- */
.section-head .link-small{display:inline-flex; align-items:center; gap:2px;}
.section-count{font-size:12.5px; font-weight:600; color:var(--text-secondary);}

/* ---- seus bancos: nome em cima, valor embaixo, mesmo tamanho em todos ---- */
.screen-dashboard .bank-chip{display:flex; flex-direction:column; align-items:flex-start; min-width:148px; max-width:190px; text-align:left;}
.screen-dashboard .bank-chip .bank-icon{margin-bottom:14px;}
.bank-chip-name{font-size:12.5px; font-weight:600; color:var(--text-secondary); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:3px;}
.screen-dashboard .bank-chip .bank-amount{font-size:16px; font-weight:800; letter-spacing:-.3px;}
.bank-amount-sub{font-size:12.5px !important; font-weight:600 !important; color:var(--text-secondary); letter-spacing:0 !important;}
.screen-dashboard .add-bank-chip{font:inherit; color:inherit;}
.screen-dashboard .add-bank-chip .add-icon{font-size:20px; font-weight:600;}

/* ---- seus cartões: alinhados à esquerda, largura total, dados em grade ---- */
#cards-wrap .section-head{justify-content:space-between; text-align:left;}
#cards-list{align-items:stretch;}
.credit-card-item{max-width:none; margin-left:0; margin-right:0; margin-bottom:12px;}
.credit-card-top{padding:16px 18px; text-align:left;}
.credit-card-name{color:#fff;}
.credit-card-sub{color:#fff;}
.credit-card-body{padding:16px 18px 18px;}
.limit-bar{margin-bottom:8px;}
.limit-used{font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:14px; font-variant-numeric:tabular-nums;}
.limit-highlight-row{justify-content:stretch; text-align:left; gap:10px; margin-bottom:0;}
.limit-highlight{text-align:left; padding:11px 12px;}
.kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--gray-100);}
.kv-grid .kv-row{display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:0; border:none;}
.kv-grid .kv-row span:first-child{font-size:11.5px; font-weight:600; color:var(--text-secondary);}
.kv-grid .kv-row span:last-child{font-size:14px; font-weight:700; text-align:left; color:var(--text-main); font-variant-numeric:tabular-nums;}
[data-theme="dark"] .kv-grid{border-top-color:rgba(255,255,255,.08);}

/* ---- selo "IA" no lugar do emoji nas categorias sugeridas ---- */
.ai-badge{
  display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.06em; line-height:1.3;
  padding:1px 5px; border-radius:6px; margin-left:4px; vertical-align:1px;
  background:rgba(var(--accent-rgb), .14); color:var(--blue);
}

/* ---- ícones SVG no lugar de ✎ 🗑 ☰ 👁 ---- */
.cat-mini-btn svg{display:block;}
.nav-handle{display:grid; place-items:center; color:var(--text-secondary);}
.nav-eye{display:grid; place-items:center; color:var(--text-main);}
.nav-edit-item.off .nav-eye{color:var(--text-secondary);}

/* ---- revisão de categorias: ícone no lugar do emoji ---- */
.rev-icon{width:56px; height:56px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:rgba(var(--accent-rgb), .12); color:var(--blue);}
.rev-icon.done{background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green);}

/* ---- acabamento geral ---- */
.tx-value, .cat-amount, .inst-acc-amount, .bank-line-row span:last-child, .es-bank-total, .inv-bal{font-variant-numeric:tabular-nums;}
.empty-state{border:1px dashed rgba(128,128,128,.3); border-radius:18px; padding:28px 18px; margin:6px 0 14px;}
.modal-card{position:relative;}
.modal-card::before{content:""; display:block; width:38px; height:4px; border-radius:4px; background:rgba(128,128,128,.35); margin:-10px auto 14px;}
.btn-outline svg{flex:none;}
.btn-filter-toggle.active{background:var(--blue); color:#fff; border-color:transparent;}

/* ============================================================
   v4 — Categorias do mês, Comparar meses, donut, cartão, exclusão
   ============================================================ */
/* navegação de mês */
.month-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.month-label{flex:1; text-align:center; font-weight:800; font-size:16px; letter-spacing:-.2px; text-transform:capitalize; color:var(--text-main);}
.month-arrow{width:40px; height:40px; border-radius:50%; border:1px solid rgba(128,128,128,.24); background:var(--card-bg); color:var(--text-main); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); transition:transform .15s ease, opacity .2s ease;}
.month-arrow:active{transform:scale(.9);}
.month-arrow:disabled{opacity:.35; cursor:default; box-shadow:none; transform:none;}

/* donut */
.donut-wrap{display:flex; justify-content:center; width:100%;}
#cat-donut{display:block; margin:0 auto; max-width:100%;}
.cat-chart-card .donut-legend{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px 8px; margin-top:16px;}
.cat-chart-card .legend-row{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--gray-100); font-size:12.5px; border:1.5px solid transparent; transition:border-color .18s ease, background-color .18s ease;}
.cat-chart-card .legend-row.active{border-color:var(--blue); background:rgba(var(--accent-rgb), .12);}
.legend-name{font-weight:600; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cat-chart-card .legend-dot{width:10px; height:10px; flex:none;}

/* lista de categorias com barrinha */
.cat-row-main{min-width:0; flex:1;}
.cat-row-left{min-width:0; flex:1;}
.cat-bar{height:5px; border-radius:5px; background:var(--gray-100); overflow:hidden; margin:6px 0 4px; max-width:190px;}
.cat-bar i{display:block; height:100%; border-radius:5px; animation:catbar .6s ease both;}
@keyframes catbar{from{width:0 !important;}}
@media (prefers-reduced-motion:reduce){ .cat-bar i{animation:none;} }

/* comparar meses */
.comp-selects{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-bottom:14px;}
.comp-selects select{width:100%; margin:0; padding:12px 10px; border-radius:var(--radius-sm); border:1.5px solid var(--gray-300); background:var(--card-bg); font-size:14px; color:var(--text-main);}
.comp-selects .vs-label{margin:0;}
.comp-diff.good{color:var(--green);} .comp-diff.bad{color:var(--out);}
.comp-diff{font-size:22px; margin-top:0; letter-spacing:-.4px;}
.cmp-bars{display:flex; flex-direction:column; gap:12px; margin:6px 0 4px;}
.cmp-bar-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; text-transform:capitalize;}
.cmp-bar-top b{font-variant-numeric:tabular-nums; text-transform:none;}
.cmp-bar{height:12px; border-radius:8px; background:var(--gray-100); overflow:hidden;}
.cmp-bar i{display:block; height:100%; border-radius:8px; transition:width .5s ease;}
.cmp-bar i.a{background:rgba(var(--accent-rgb), .42);}
.cmp-bar i.b{background:var(--blue);}
.cmp-cats-title{font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); margin:18px 0 6px;}
.cmp-cat{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--gray-100); cursor:pointer;}
.cmp-cat-main{flex:1; min-width:0;}
.cmp-delta{font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--text-secondary); white-space:nowrap;}
.cmp-delta.good{color:var(--green);} .cmp-delta.bad{color:var(--out);}

/* cartão: olho para esconder os dados */
.credit-card-top{padding-right:56px;}
.credit-card-top .cc-eye{position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform .15s ease, background-color .2s ease;}
.credit-card-top .cc-eye:active{transform:scale(.9);}
.credit-card-top .cc-eye svg{display:block;}

/* excluir parecidas */
.del-sim-actions{display:flex; flex-direction:column; gap:8px; margin-top:18px; align-items:stretch; text-align:center;}
.del-sim-actions .btn{margin-top:0 !important;}
.del-sim-actions .btn-danger{background:#DC2626; color:#fff; border:none; box-shadow:0 8px 20px rgba(220,38,38,.3);}
.del-sim-actions .btn-link-small{align-self:center;}

/* nomes bloqueados (configurações) */
.blocked-list{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:8px;}
.blocked-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--gray-100);}
.blocked-name{font-size:13.5px; font-weight:600; min-width:0; overflow-wrap:anywhere;}
.blocked-undo{flex:none; border:1.5px solid var(--blue); color:var(--blue); background:transparent; border-radius:999px; padding:6px 12px; font-weight:700; font-size:12.5px; cursor:pointer;}
.blocked-undo:disabled{opacity:.6;}
.blocked-empty{font-size:13px; color:var(--text-secondary); padding:4px 2px; list-style:none;}

/* ============================================================
   v5 — Planejamento (gastos futuros + metas) e cartão "Ver mais"
   ============================================================ */
.cc-more{width:100%; text-align:center; background:var(--gray-100); color:var(--text-secondary); border:none; border-radius:10px; padding:9px; font-weight:700; font-size:12.5px; cursor:pointer; margin-top:14px;}
.cc-more:active{opacity:.75;}

.plan-summary-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.plan-sum-card{background:var(--card-bg); border-radius:var(--radius-md); padding:16px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; transition:transform .18s ease, box-shadow .18s ease; animation:pulseIn .4s cubic-bezier(.2,.9,.3,1.1) both;}
.plan-sum-card:active{transform:scale(.97);}
.plan-sum-card .mini-label{font-size:12.5px; font-weight:600; color:var(--text-secondary);}
.plan-sum-card .mini-value{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.2px;}
.plan-sum-card.card-green{animation-delay:.02s;}
.plan-sum-card.card-red{animation-delay:.07s;}

.plan-result-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px; border-radius:var(--radius-md); border:1.5px solid var(--gray-200);
  margin-bottom:18px; transition:background .25s ease, border-color .25s ease, transform .25s ease;
  animation:pulseIn .45s cubic-bezier(.2,.9,.3,1.1) both; animation-delay:.12s;
}
.plan-result-label{font-size:13.5px; font-weight:700; color:var(--text-secondary);}
.plan-result-value{font-size:25px; font-weight:800; font-variant-numeric:tabular-nums; transition:color .25s ease;}
.plan-result-banner.card-green{background:var(--green-bg); border-color:var(--green);}
.plan-result-banner.card-green .plan-result-value{color:var(--green);}
.plan-result-banner.card-red{background:var(--red-bg); border-color:var(--out);}
.plan-result-banner.card-red .plan-result-value{color:var(--out);}

.btn-novo-plan{
  display:inline-flex; align-items:center; gap:6px; background:var(--blue); color:#fff;
  font-weight:700; font-size:14px; padding:10px 18px; border:none; border-radius:999px;
  cursor:pointer; box-shadow:0 8px 18px rgba(var(--accent-rgb),0.32);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, filter .16s ease;
}
.btn-novo-plan svg{flex-shrink:0;}
.btn-novo-plan:hover{filter:brightness(1.06); box-shadow:0 10px 22px rgba(var(--accent-rgb),0.4);}
.btn-novo-plan:active{transform:scale(.93);}

.plan-row{position:relative; display:flex; align-items:center; gap:10px; background:var(--card-bg); border-radius:var(--radius-md); padding:12px 14px; box-shadow:var(--shadow); margin-bottom:9px; flex-wrap:wrap; border-left:3px solid transparent; transition:border-color .2s ease, transform .16s ease, box-shadow .16s ease;}
.plan-row:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08);}
.plan-row.paid{border-left-color:var(--green);}
.plan-row-badge{display:flex; align-items:center; gap:4px; background:var(--green-bg); color:var(--green); font-size:11px; font-weight:800; padding:3px 8px; border-radius:20px; letter-spacing:.2px;}
.plan-row-main{flex:1; min-width:120px;}
.plan-row-name{font-weight:700; font-size:14px;}
.plan-row-sub{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.plan-row-value{font-weight:800; font-variant-numeric:tabular-nums; font-size:14px;}
.plan-row-value.pos{color:var(--green);} .plan-row-value.neg{color:var(--out);}
.plan-row-actions{display:flex; align-items:center; gap:6px; width:100%; justify-content:flex-end; margin-top:6px;}
.plan-row-actions .icon-btn{width:32px; height:32px; border-radius:50%; background:var(--gray-100);}

.btn-pay{border:none; background:var(--blue); color:#fff; font-weight:700; font-size:12.5px; padding:9px 16px; border-radius:20px; cursor:pointer; box-shadow:0 6px 16px rgba(var(--accent-rgb),0.3); transition:transform .16s cubic-bezier(.2,.9,.3,1.4), box-shadow .16s ease;}
.btn-pay:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(var(--accent-rgb),0.4);}
.btn-pay:active{transform:scale(0.96);}
.btn-outline{border:1.5px solid var(--gray-300); background:transparent; color:var(--text-secondary); font-weight:700; font-size:12.5px; padding:8px 15px; border-radius:20px; cursor:pointer; transition:border-color .16s ease, color .16s ease, transform .16s ease;}
.btn-outline:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-1px);}

.plan-error{color:var(--out); font-size:13px; margin-top:8px;}

.meta-row{position:relative; display:flex; align-items:center; gap:12px; background:var(--card-bg); border-radius:var(--radius-md); padding:16px 16px 16px 14px; box-shadow:var(--shadow); margin-bottom:12px; transition:transform .16s ease, box-shadow .16s ease; border-left:4px solid var(--cat-color, var(--gray-300));}
.meta-row:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.1);}
.meta-row-set{flex-direction:column; align-items:stretch; cursor:pointer;}
.meta-row-set:hover{box-shadow:0 10px 24px rgba(0,0,0,.12);}
.meta-row-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.meta-row-head{display:flex; align-items:center; gap:12px; min-width:0;}
.meta-row-main{min-width:0; flex:1;}
.meta-row .cat-icon{box-shadow:0 4px 10px rgba(0,0,0,.14); flex-shrink:0;}
.meta-amount{font-weight:800; font-variant-numeric:tabular-nums; font-size:16px; flex-shrink:0;}
.meta-bar{max-width:none; margin:12px 0 8px; height:8px; border-radius:8px; background:color-mix(in srgb, var(--cat-color, var(--gray-300)) 18%, var(--gray-100));}
.meta-bar i{border-radius:8px;}
.meta-status{font-size:12.5px; font-weight:700; color:var(--green); display:inline-flex; align-items:center; gap:5px;}
.meta-status.over{color:var(--out);}
.meta-status::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; flex-shrink:0;}
.cat-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cat-pct{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.meta-sub-toggle{
  display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--cat-color, var(--blue)) 12%, transparent);
  border:none; border-radius:999px; padding:6px 12px 6px 10px; margin-top:8px;
  font-size:11.5px; font-weight:700; color:var(--cat-color, var(--blue)); cursor:pointer; max-width:100%;
}
.meta-sub-toggle svg{transition:transform .2s ease; flex-shrink:0;}
.meta-sub-toggle.open svg{transform:rotate(180deg);}
.meta-sub-list{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.meta-sub-list.open{max-height:600px;}
.meta-sub-row{display:flex; align-items:center; gap:8px; padding:9px 4px 9px 12px; font-size:13px; border-top:1px dashed var(--gray-200);}
.meta-sub-row-name{color:var(--text-secondary); font-weight:600; min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.meta-sub-row-val{font-weight:800; font-variant-numeric:tabular-nums; flex-shrink:0; white-space:nowrap;}

.month-check-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:10px;}
.month-check{border:1.5px solid var(--gray-300); background:transparent; color:var(--text-secondary); font-weight:700; font-size:11.5px; padding:6px 4px; border-radius:10px; cursor:pointer; transition:all .16s ease;}
.month-check:hover{border-color:var(--blue);}
.month-check.active{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 4px 10px rgba(var(--accent-rgb),0.3); animation:itemPop .2s ease both;}
.month-check.is-current{position:relative;}
.month-check.is-current::after{content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--blue);}
.month-check.is-current.active::after{background:#fff;}
.month-check:active{transform:scale(.9);}
.month-check-grid.hidden{display:none;}

.day-check-grid{display:none;} /* legado, mantido oculto por segurança */

.wheel-row{display:flex; gap:8px; margin-top:10px;}
.wheel-wrap{position:relative; flex:1; height:180px; border-radius:14px; background:var(--bg-soft); overflow:hidden;}
.wheel-wrap-wide{flex:1.3;}
.wheel-col{position:absolute; inset:0; overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.wheel-col::-webkit-scrollbar{display:none;}
.wheel-spacer{height:72px;}
.wheel-item{height:36px; display:flex; align-items:center; justify-content:center; font-size:14.5px; font-weight:600; color:var(--text-secondary); scroll-snap-align:center; transition:color .15s ease, font-size .15s ease, font-weight .15s ease; cursor:pointer; user-select:none;}
.wheel-item.active{color:var(--text-main); font-size:18px; font-weight:800;}
.wheel-highlight-line{position:absolute; left:6px; right:6px; top:50%; transform:translateY(-50%); height:36px; border-top:1.5px solid var(--gray-300); border-bottom:1.5px solid var(--gray-300); pointer-events:none; border-radius:8px;}
.wheel-caption-row{display:flex; gap:8px; margin-top:4px;}
.wheel-caption-row span{flex:1; text-align:center; font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.4px;}
.wheel-caption-row span:nth-child(2){flex:1.3;}

.plan-checkbox-row{display:flex; align-items:flex-start; gap:10px; margin-top:16px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text-main);}
.plan-checkbox-row input[type="checkbox"]{width:19px; height:19px; margin-top:1px; accent-color:var(--blue); cursor:pointer; flex-shrink:0;}
.plan-qtd-row{display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 14px; background:var(--bg-soft); border-radius:12px; animation:itemPop .2s ease both;}
.plan-qtd-row.hidden{display:none;}
.plan-qtd-label{font-size:13px; font-weight:600; color:var(--text-secondary);}
.qtd-btn{width:30px; height:30px; border-radius:50%; border:none; background:var(--blue); color:#fff; font-size:17px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s ease, filter .12s ease;}
.qtd-btn:hover{filter:brightness(1.08);}
.qtd-btn:active{transform:scale(.88);}
.qtd-value{font-size:16px; font-weight:800; min-width:22px; text-align:center; font-variant-numeric:tabular-nums;}

.hint-inline{font-size:11.5px; font-weight:600; color:var(--text-secondary);}

.subtitle-add-row{display:flex; gap:8px; margin-top:6px;}
.subtitle-add-row input{margin:0; flex:1;}
.subtitle-add-row .btn-outline{white-space:nowrap; padding:0 14px;}

.plan-cat-group{margin-bottom:14px;}
.plan-cat-head{display:flex; align-items:center; gap:9px; padding:6px 2px; margin-bottom:6px;}
.plan-cat-head .cat-icon{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;}
.plan-cat-name{font-weight:800; font-size:13.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.plan-cat-total{font-size:13.5px; font-variant-numeric:tabular-nums; flex-shrink:0;}

/* ---------- dropdown customizado (categoria / subtítulo) ---------- */
.hidden-native-select{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.cselect{position:relative;}
.cselect-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--gray-300);
  font-size:15px; background:var(--bg-soft); color:var(--text-main); cursor:pointer; text-align:left;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.cselect-trigger:hover{border-color:var(--blue);}
.cselect.open .cselect-trigger{border-color:var(--blue); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15);}
.cselect-current{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.cselect-chevron{flex-shrink:0; color:var(--text-secondary); transition:transform .2s ease;}
.cselect.open .cselect-chevron{transform:rotate(180deg);}
.cselect-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:var(--card-bg); border-radius:var(--radius-md); box-shadow:0 14px 32px rgba(0,0,0,.18);
  border:1px solid var(--gray-200); padding:8px; transform-origin:top center;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.cselect-panel.hidden{display:block;}
.cselect-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.cselect-scroll{max-height:220px; overflow-y:auto;}
.cselect-option{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left; background:none; border:none;
  padding:9px 8px; border-radius:10px; font-size:14px; font-weight:600; color:var(--text-main); cursor:pointer;
  transition:background .12s ease;
}
.cselect-option:hover{background:var(--gray-100);}
.cselect-option.active{background:var(--blue-bg,rgba(var(--accent-rgb),0.1)); color:var(--blue);}
.cselect-option.active svg{margin-left:auto; flex-shrink:0; color:var(--blue);}
.cselect-opt-icon{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;}
.cselect-opt-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cselect-divider{height:1px; background:var(--gray-200); margin:6px 4px;}
.cselect-add-row{display:flex; gap:6px; padding:4px;}
.cselect-add-row input{flex:1; margin:0; padding:9px 10px; border-radius:10px; border:1.5px solid var(--gray-300); font-size:13.5px; background:var(--bg-soft);}
.cselect-add-btn{
  flex-shrink:0; width:36px; height:36px; border-radius:10px; border:none; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:filter .14s ease, transform .14s ease;
}
.cselect-add-btn:hover{filter:brightness(1.08);}
.cselect-add-btn:active{transform:scale(.9);}

/* ---------- transição ao trocar de mês no planejamento ---------- */
.plan-slide{animation:planSlide .38s cubic-bezier(.16,1,.3,1);}
.plan-slide.dir-next{animation-name:planSlideNext;}
.plan-slide.dir-prev{animation-name:planSlidePrev;}
@keyframes planSlide{
  from{opacity:0; transform:translateY(10px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes planSlideNext{
  from{opacity:0; transform:translateX(28px) scale(.98);}
  to{opacity:1; transform:translateX(0) scale(1);}
}
@keyframes planSlidePrev{
  from{opacity:0; transform:translateX(-28px) scale(.98);}
  to{opacity:1; transform:translateX(0) scale(1);}
}

/* ---------- metas por categoria: expandir subtítulos ---------- */
.plan-subtitle-head{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--text-secondary); padding:6px 4px 4px 14px;}
.plan-subtitle-head span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.plan-subtitle-head b{flex-shrink:0; white-space:nowrap;}


/* ============================================================
   ORDENAR POR VALOR, ANIMAÇÕES E PLANEJAMENTO
   ============================================================ */
.sort-row{display:flex; margin:0 0 12px;}
.sort-btn{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px; border:1.5px solid var(--gray-300); background:var(--card-bg); color:var(--text-secondary); font-size:12.5px; font-weight:700; cursor:pointer; transition:transform .16s cubic-bezier(.2,.9,.3,1.4), border-color .2s ease, color .2s ease, background .2s ease;}
.sort-btn svg{animation:sortPop .38s cubic-bezier(.34,1.56,.64,1);}
.sort-btn.active{border-color:var(--blue); color:var(--blue); background:rgba(var(--accent-rgb),.10);}
@keyframes sortPop{from{opacity:0; transform:rotate(-90deg) scale(.6);} to{opacity:1; transform:none;}}
#tx-sort-slot:empty{display:none;}

/* linha do saldo "desenhada" da esquerda para a direita */
#hero-flow.draw{animation:heroReveal 1s cubic-bezier(.2,.8,.2,1) both;}
@keyframes heroReveal{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}

/* efeito ao tocar */
.btn:active, .btn-pay:active, .seg-btn:active, .nav-btn:active, .month-arrow:active, .icon-btn:active, .bank-chip:active, .flow-tile:active, .btn-novo-plan:active{transform:scale(.96); transition:transform .1s ease;}

/* só as primeiras linhas animam na entrada (listas grandes ficavam pesadas) */
.tx-row:nth-child(n+13), .cat-row:nth-child(n+13), .plan-row:nth-child(n+13){animation:none;}

/* ---- Planejamento: um cartão por categoria ---- */
.plan-cat-group{background:var(--card-bg); border-radius:var(--radius-lg); padding:4px 16px 6px; margin-bottom:14px; box-shadow:var(--shadow);}
[data-theme="dark"] .plan-cat-group{border:1px solid rgba(255,255,255,.06);}
.plan-cat-group.plain{padding-top:0;}
.plan-cat-head{padding:12px 0; margin:0; border-bottom:1px solid var(--gray-100);}
.plan-cat-total.pos{color:var(--green);}
.plan-cat-total.neg{color:var(--out);}
.plan-subtitle-head{padding:12px 0 2px; font-size:11.5px; letter-spacing:.2px;}
.plan-subtitle-head span{display:inline-flex; align-items:center; gap:5px; max-width:70%; padding:3px 10px; border-radius:99px; background:rgba(var(--accent-rgb),.12); color:var(--blue);}
.plan-cat-group .plan-row{display:block; background:transparent; box-shadow:none; border-radius:0; margin:0; padding:13px 0; border-left:none; border-top:1px solid var(--gray-100);}
.plan-cat-group .plan-row:hover{transform:none; box-shadow:none;}
.plan-cat-head + .plan-row, .plan-subtitle-head + .plan-row, .plan-cat-group.plain > .plan-row:first-child{border-top:none;}
.plan-row-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.plan-row-name{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:14.5px; font-weight:700;}
.plan-row-badge{display:inline-flex; align-items:center; gap:3px; background:var(--green-bg); color:var(--green); font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:99px;}
.plan-row-value{font-size:14.5px; white-space:nowrap;}
.plan-row-actions{width:auto; justify-content:flex-start; gap:8px; margin-top:10px;}
.btn-pay{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:rgba(var(--accent-rgb),.14); color:var(--blue); box-shadow:none; padding:10px 14px; border-radius:12px; font-size:12.5px;}
.btn-pay:hover{background:var(--blue); color:#fff; box-shadow:none; transform:none;}
.plan-row-actions .btn-outline{flex:1; padding:10px 14px; border-radius:12px; border:1.5px solid var(--gray-300); background:transparent; color:var(--text-secondary); font-weight:700; font-size:12.5px; cursor:pointer;}
.plan-row-actions .icon-btn{width:40px; height:40px; border-radius:12px; background:var(--gray-100);}
.plan-row.paid .plan-row-value{opacity:.75;}

/* ============================================================
   FLUXO 2 — login novo, animações de valores, troca de mês
   ============================================================ */
.content{font-variant-numeric:tabular-nums;}

/* barrinha de carregamento (aparece a cada troca de tela) */
.top-progress{height:2.5px;}
.top-progress i{width:46%; background:linear-gradient(90deg, transparent, var(--blue), transparent);}

/* ---- login: sempre verde escuro, igual à logo (claro ou escuro) ---- */
.screen.screen-login{
  position:relative; overflow-x:hidden; overflow-y:auto; color:#e8fff0;
  background:linear-gradient(200deg, #1b6a3d 0%, #0d4a2b 32%, #06301d 64%, #021a10 100%);
}
.login-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.login-bg .orb{position:absolute; border-radius:50%; filter:blur(54px); opacity:.5; will-change:transform;}
.login-bg .o1{width:300px; height:300px; top:-90px; right:-80px; background:#4ade80; opacity:.30; animation:orbA 18s ease-in-out infinite;}
.login-bg .o2{width:260px; height:260px; bottom:-70px; left:-90px; background:#16a34a; opacity:.35; animation:orbB 21s ease-in-out infinite;}
.login-bg .o3{width:180px; height:180px; top:42%; left:55%; background:#86efac; opacity:.12; animation:orbA 24s ease-in-out infinite reverse;}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-22px,26px) scale(1.08);}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(26px,-22px) scale(1.07);}}
.screen-login .login-wrap{position:relative; z-index:1;}
.screen-login .login-logo{margin-bottom:34px;}

.login-mark-wrap{position:relative; width:128px; height:118px; animation:markIn 1.1s cubic-bezier(.22,1,.36,1) both, markFloat 7s ease-in-out 1.2s infinite;}
.login-mark{position:relative; z-index:2; display:block; width:100%; height:100%; filter:drop-shadow(0 10px 22px rgba(74,222,128,.35));}
.login-halo{position:absolute; z-index:1; left:50%; top:50%; width:190px; height:190px; margin:-95px 0 0 -95px; border-radius:50%; background:radial-gradient(circle, rgba(134,239,172,.42) 0%, rgba(134,239,172,0) 68%); animation:haloPulse 6s ease-in-out infinite;}
.login-shine{position:absolute; inset:0; z-index:3; pointer-events:none;
  -webkit-mask:url(logo-mark.png) center/contain no-repeat; mask:url(logo-mark.png) center/contain no-repeat;
  background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%); background-size:260% 100%; background-position:130% 0;
  animation:shineSweep 7s ease-in-out 2s infinite;}
@keyframes markIn{from{opacity:0; transform:translateY(14px) scale(.94);} to{opacity:1; transform:none;}}
@keyframes markFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);}}
@keyframes haloPulse{0%,100%{transform:scale(.96); opacity:.75;} 50%{transform:scale(1.06); opacity:.95;}}
@keyframes shineSweep{0%{background-position:130% 0;} 55%,100%{background-position:-30% 0;}}

.login-word{display:block; width:150px; height:auto; margin-top:22px; animation:fadeUp 1s cubic-bezier(.22,1,.36,1) .3s both;}
.screen-login .login-tagline{margin-top:12px; font-size:14px; letter-spacing:.3px; color:rgba(220,252,231,.72); animation:fadeUp 1s cubic-bezier(.22,1,.36,1) .45s both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.login-actions > *{animation:fadeUp .9s cubic-bezier(.22,1,.36,1) both;}
.login-actions > *:nth-child(1){animation-delay:.5s;} .login-actions > *:nth-child(2){animation-delay:.58s;}
.login-actions > *:nth-child(3){animation-delay:.66s;} .login-actions > *:nth-child(4){animation-delay:.74s;}
.login-actions > *:nth-child(n+5){animation-delay:.82s;}

.screen-login .login-or{color:rgba(220,252,231,.6);}
.screen-login .login-or::before, .screen-login .login-or::after{background:rgba(220,252,231,.22);}
.screen-login .btn.btn-outline{background:rgba(255,255,255,.08); color:#f0fff5; border:1.5px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:999px;}
.screen-login .btn.btn-outline:active{background:rgba(255,255,255,.16);}
.screen-login .link-create-account{color:#86efac; font-weight:700;}
.screen-login .link-guest{color:rgba(220,252,231,.82);}
.screen-login .link-guest:hover,.screen-login .link-guest:focus-visible{color:#fff;}
.screen-login .btn-install{color:#bbf7d0; border-color:rgba(187,247,208,.55);}
.screen-login .install-hint{color:rgba(220,252,231,.7);}
.screen-login .google-btn-container{border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.28);}

/* ---- troca de mês (Planejamento e Categorias) ---- */
.pm-anim{animation:pmIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0ms);}
@keyframes pmIn{
  from{opacity:0; transform:translateX(var(--dx,14px));}
  to{opacity:1; transform:none;}
}
.month-label.pm-anim{animation-name:pmLabel; animation-duration:.5s;}
@keyframes pmLabel{
  from{opacity:0; transform:translateX(var(--dx,14px));}
  to{opacity:1; transform:none;}
}
.month-arrow.pm-tap{animation:arrowTap .3s ease;}
@keyframes arrowTap{50%{transform:scale(.93);}}


/* ============================================================
   FLUXO 3 — Transações (novo estilo), Créditos discreto, zona de perigo
   ============================================================ */
/* busca e filtro: cápsulas suaves, sem borda pesada */
.screen-transacoes .search-row{gap:10px; margin-bottom:6px;}
.screen-transacoes .search-box{background:var(--gray-100); border:1px solid transparent; border-radius:999px; padding:12px 18px; transition:border-color .2s ease, background-color .2s ease;}
.screen-transacoes .search-box:focus-within{border-color:rgba(var(--accent-rgb),.55); background:var(--card-bg);}
.screen-transacoes .btn-filter-toggle{width:46px; height:46px; border-radius:50%; background:var(--gray-100); border:1px solid transparent; display:grid; place-items:center;}
.screen-transacoes .btn-filter-toggle.active{background:var(--blue); color:#fff;}
.screen-transacoes .screen-hint{margin-bottom:12px;}

/* títulos: mês em destaque, dia discreto */
.screen-transacoes .tx-month-label{font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--text-main); margin:22px 2px 2px; text-transform:capitalize;}
.screen-transacoes .tx-month-label:first-child{margin-top:8px;}
.tx-day-label{font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-secondary); margin:16px 4px 8px;}

/* um cartão contínuo por dia, com linhas finas entre as transações */
.tx-group{background:var(--card-bg); border:1px solid rgba(128,128,128,.14); border-radius:22px; overflow:hidden; box-shadow:0 1px 2px rgba(15,30,56,.04);}
.tx-group .tx-row{background:transparent; border:none; border-radius:0; box-shadow:none; margin:0; padding:13px 16px; gap:10px; animation:txFade .45s ease both; transition:background-color .15s ease;}
.tx-group .tx-row + .tx-row{border-top:1px solid rgba(128,128,128,.13);}
.tx-group .tx-row:hover{background:rgba(var(--accent-rgb),.05); border-color:rgba(128,128,128,.13);}
.tx-group .tx-row + .tx-row:hover{border-top-color:rgba(128,128,128,.13);}
.tx-group .tx-row:active{transform:none; background:rgba(var(--accent-rgb),.09);}
@keyframes txFade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.tx-group .tx-row:nth-child(n+2){animation-delay:.03s;} .tx-group .tx-row:nth-child(n+4){animation-delay:.06s;} .tx-group .tx-row:nth-child(n+7){animation-delay:.09s;}
.tx-group .tx-icon{width:42px; height:42px; border-radius:50%;}
.tx-group .tx-desc{font-size:14.5px; font-weight:650;}
.tx-group .tx-meta{margin-top:4px; gap:8px;}
.tx-group .tx-cat-chip{--c:#64748B; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--text-main); padding:2px 9px; font-weight:600;}
.tx-group .tx-bank-name{font-size:11px; color:var(--text-secondary); opacity:.85;}
.tx-group .tx-value{font-size:14.5px; font-weight:750; letter-spacing:-.2px;}
.tx-group .tx-value.neg{color:var(--text-main);}
.tx-group .tx-value.pos{color:var(--green);}
.screen-transacoes #btn-load-more-tx{width:100%; border-radius:999px; margin-top:4px;}
.screen-transacoes .tx-count-label{margin:16px 0 10px; opacity:.8;}
.screen-transacoes .empty-state{background:var(--gray-100); border-radius:22px; margin-top:14px;}

/* Créditos: logo pequena e discreta */
.credits-logo{width:52px !important; height:52px !important; border-radius:14px !important; box-shadow:0 4px 12px rgba(0,0,0,.16) !important; margin-bottom:6px;}
.credits-card h2{font-size:18px; letter-spacing:-.2px;}

/* zona de perigo (Configurações) */
.danger-zone{margin-top:22px; padding-top:14px; border-top:1px solid rgba(128,128,128,.2);}
.btn-danger-outline{width:100%; margin-top:8px; padding:12px 16px; border-radius:14px; border:1.5px solid rgba(220,38,38,.5); background:transparent; color:#DC2626; font-weight:700; font-size:14px; cursor:pointer; transition:background-color .18s ease, transform .12s ease;}
.btn-danger-outline:hover{background:rgba(220,38,38,.08);}
.btn-danger-outline:active{transform:scale(.98);}
[data-theme="dark"] .btn-danger-outline{color:#F87171; border-color:rgba(248,113,113,.5);}
#btn-confirmar-apagar:disabled{opacity:.4; cursor:not-allowed; box-shadow:none;}


/* ============================================================
   v9 — Entradas/Saídas, Metas (pago x planejado), Investimentos e acabamento geral
   ============================================================ */
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
button, [role="button"]{-webkit-tap-highlight-color:transparent;}

/* ---------- Entradas / Saídas ---------- */
.es-summary{--es-c:var(--green); display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px; border-radius:20px;
  background:var(--card-bg); border:1px solid rgba(128,128,128,.16); box-shadow:0 1px 2px rgba(15,30,56,.04);}
.es-summary.in{--es-c:var(--green);} .es-summary.out{--es-c:var(--out);}
.es-sum-ico{width:40px; height:40px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--es-c); background:color-mix(in srgb, var(--es-c) 14%, transparent);}
.es-sum-body{min-width:0; flex:1;}
.es-sum-label{font-size:11.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary);}
.es-sum-value{font-size:clamp(22px, 6.4vw, 27px); font-weight:800; letter-spacing:-.6px; margin-top:2px; color:var(--text-main); font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.es-sum-sub{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.es-day-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.es-day-total{font-size:12px; font-weight:800; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums;}
.es-day-total.pos{color:var(--green);} .es-day-total.neg{color:var(--text-secondary);}

/* ---------- Metas: pago x planejado ---------- */
.meta-bar{position:relative;}
.meta-bar i{position:absolute; left:0; top:0; bottom:0; display:block; height:auto; animation:none; transition:width .5s ease;}
.meta-bar-plan{background:color-mix(in srgb, var(--cat-color, var(--blue)) 38%, transparent);}
.meta-bar-plan.over{background:color-mix(in srgb, var(--out) 40%, transparent);}
.meta-bar-paid{background:var(--cat-color, var(--blue)); z-index:1;}
.meta-legend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; font-weight:600; color:var(--text-secondary); margin:0 0 6px;}
.meta-legend .dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle;}
.meta-legend .dot.paid{background:var(--cat-color, var(--blue));}
.meta-legend .dot.plan{background:color-mix(in srgb, var(--cat-color, var(--blue)) 38%, transparent);}
.meta-sub-list.open{max-height:2400px;}
.meta-sub-group{border-top:1px dashed var(--gray-300);}
.meta-sub-group:first-child{border-top:none;}
.meta-sub-group .meta-sub-row{border-top:none; padding:10px 4px 4px 4px;}
.meta-sub-check{width:18px; height:18px; border-radius:50%; border:2px solid var(--gray-300); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;}
.meta-sub-check.on{background:var(--green); border-color:var(--green);}
.meta-sub-check.half{border-color:var(--green); background:linear-gradient(90deg, var(--green) 50%, transparent 50%);}
.meta-sub-row-val small{font-size:11px; font-weight:600; color:var(--green);}
.meta-sub-group.done .meta-sub-row-name{text-decoration:line-through; text-decoration-thickness:1.5px; opacity:.7;}
.meta-sub-group.done .meta-sub-row-val{color:var(--green);}
.meta-item{display:flex; align-items:center; gap:8px; padding:3px 4px 3px 30px; font-size:12.5px; color:var(--text-secondary);}
.meta-item-check{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--gray-300); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;}
.meta-item.paid .meta-item-check{background:var(--green); border-color:var(--green);}
.meta-item-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.meta-item.paid .meta-item-name{text-decoration:line-through; opacity:.7;}
.meta-item.paid .meta-item-val{color:var(--green);}
.meta-item-val{font-variant-numeric:tabular-nums; font-weight:700; flex-shrink:0;}
.meta-sub-group{padding-bottom:6px;}

/* ---------- Investimentos ---------- */
.screen-investimentos .card-balance{border-radius:26px; padding:22px 20px;}
.inv-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:12px 0;}
.inv-stats:empty{display:none;}
.inv-stat{background:var(--card-bg); border:1px solid rgba(128,128,128,.14); border-radius:18px; padding:12px 12px 13px; min-width:0;}
.inv-stat span{display:block; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-secondary);}
.inv-stat strong{display:block; margin-top:5px; font-size:clamp(12px, 3.6vw, 15px); font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.inv-stat.up strong{color:var(--green);} .inv-stat.down strong{color:var(--out);}
.inv-split-card{padding:16px; margin-bottom:12px;}
.inv-split-title{font-size:13px; font-weight:800; margin-bottom:12px;}
.inv-split-bar{display:flex; height:12px; border-radius:99px; overflow:hidden; background:var(--gray-100); gap:2px;}
.inv-split-bar i{display:block; height:100%; min-width:4px;}
.inv-split-legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:12px; color:var(--text-secondary);}
.inv-split-legend b{color:var(--text-main); font-weight:800;}
.inv-split-legend .dot, .inv-split-legend i.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle;}
.inv-bank{border-left:4px solid var(--inv-c, var(--blue)); border-radius:22px; padding:16px;}
.inv-bank-total{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums;}
.inv-bank-share{font-size:11.5px; color:var(--text-secondary); margin-top:2px; font-weight:600;}
.inv-row-bar{height:5px; border-radius:5px; background:var(--gray-100); overflow:hidden; margin:8px 0 6px;}
.inv-row-bar i{display:block; height:100%; border-radius:5px;}
.inv-row-meta{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--text-secondary);}
@media (max-width:360px){ .inv-stats{grid-template-columns:1fr 1fr;} }

/* ---------- acabamento geral ---------- */
.card, .tx-group, .es-cat, .inv-stat{transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
.empty-state{border-radius:20px;}
@media (prefers-reduced-motion:reduce){ .meta-bar i, .es-cat-chev{transition:none;} }


/* ============================================================
   v10 — Planejamento (visual novo) e Tutorial
   ============================================================ */
.pl-hero{position:relative; border-radius:24px; padding:18px 18px 16px; margin:4px 0 18px; background:var(--card-bg);
  border:1px solid rgba(128,128,128,.16); box-shadow:var(--shadow);}
.pl-hero-label{display:block; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-secondary);}
.pl-hero-value{display:block; margin-top:4px; font-size:clamp(30px, 9vw, 40px); font-weight:800; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--green);}
.pl-hero.neg .pl-hero-value{color:var(--out);}
.pl-hero-bar{height:8px; border-radius:99px; background:color-mix(in srgb, var(--green) 30%, var(--gray-100)); overflow:hidden; margin:14px 0 12px;}
.pl-hero-bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--out); transition:width .5s ease;}
.pl-hero-bar.over{background:var(--out);}
.pl-hero-bar.over i{background:var(--red-bg);}
.pl-hero-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--text-secondary);}
.pl-hero-stat{display:inline-flex; align-items:center; gap:6px; min-width:0;}
.pl-hero-stat b{color:var(--text-main); font-weight:800; font-variant-numeric:tabular-nums;}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.dot.in{background:var(--green);} .dot.out{background:var(--out);}

.pl-cat{background:var(--card-bg); border:1px solid rgba(128,128,128,.14); border-radius:22px; margin-bottom:12px; overflow:hidden; box-shadow:0 1px 2px rgba(15,30,56,.04); animation:txFade .4s ease both;}
.pl-cat-head{display:flex; align-items:center; gap:10px; padding:14px 16px 10px;}
.pl-cat-ico{width:34px; height:34px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:17px; background:color-mix(in srgb, var(--c) 18%, transparent); flex-shrink:0;}
.pl-cat-name{font-weight:750; font-size:14.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pl-cat-done{font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--gray-100); padding:2px 8px; border-radius:99px; flex-shrink:0;}
.pl-cat-total{font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; flex-shrink:0;}
.pl-item{display:flex; align-items:center; gap:12px; padding:11px 12px 11px 16px; border-top:1px solid rgba(128,128,128,.12);}
.pl-check{width:26px; height:26px; border-radius:50%; border:2px solid var(--gray-300); background:transparent; color:#fff; cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background-color .15s ease, border-color .15s ease, transform .12s ease;}
.pl-check:hover{border-color:var(--green);} .pl-check:active{transform:scale(.88);}
.pl-item.paid .pl-check{background:var(--green); border-color:var(--green);}
.pl-item-main{flex:1; min-width:0;}
.pl-item-name{font-size:14.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pl-item-meta{font-size:11.5px; color:var(--text-secondary); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pl-item-value{font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}
.pl-item-value.pos{color:var(--green);}
.pl-item.paid .pl-item-name{text-decoration:line-through; text-decoration-thickness:1.5px; opacity:.6;}
.pl-item.paid .pl-item-value{color:var(--green); opacity:.85;}
.pl-item-actions{display:flex; gap:2px; flex-shrink:0;}
.pl-ghost{width:30px; height:30px; border-radius:50%; border:none; background:transparent; color:var(--text-secondary); opacity:.6; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:opacity .15s ease, background-color .15s ease;}
.pl-ghost:hover{opacity:1; background:var(--gray-100);}
@media (max-width:380px){ .pl-item{gap:9px; padding-left:12px;} .pl-ghost{width:28px; height:28px;} }

/* ---------- Tutorial ---------- */
.tut-open{width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:10px;}
.tut-card{max-height:90vh; display:flex; flex-direction:column;}
.tut-card .modal-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:20px;}
.tut-tabs{margin:0 20px 6px;}
.tut-slide{text-align:center; padding:6px 4px 2px; animation:txFade .3s ease both;}
.tut-ico{width:72px; height:72px; margin:4px auto 12px; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:34px; background:rgba(var(--accent-rgb),.14);}
.tut-title{margin:0 0 6px; font-size:19px; font-weight:800; letter-spacing:-.3px;}
.tut-text{margin:0 0 14px; font-size:14px; line-height:1.55; color:var(--text-secondary);}
.tut-list{list-style:none; margin:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:8px;}
.tut-list li{position:relative; padding:10px 12px 10px 36px; border-radius:14px; font-size:13.5px; line-height:1.45; background:var(--gray-100);}
.tut-list li::before{content:""; position:absolute; left:13px; top:15px; width:10px; height:10px; border-radius:50%; background:var(--blue);}
.tut-dots{display:flex; justify-content:center; gap:6px; margin:16px 0 12px; flex-wrap:wrap;}
.tut-dot{width:8px; height:8px; padding:0; border:none; border-radius:99px; background:var(--gray-300); cursor:pointer; transition:width .2s ease, background-color .2s ease;}
.tut-dot.on{width:22px; background:var(--blue);}
.tut-nav{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.tut-nav .btn{width:auto; min-width:104px; margin:0;}
.tut-nav .btn[disabled]{opacity:.4; pointer-events:none;}
.tut-count{font-size:12px; font-weight:700; color:var(--text-secondary);}
.tut-sec{background:var(--card-bg); border:1px solid rgba(128,128,128,.16); border-radius:16px; margin-bottom:10px; overflow:hidden;}
.tut-sec summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:13px 14px; font-weight:750; font-size:14.5px;}
.tut-sec summary::-webkit-details-marker{display:none;}
.tut-sec summary::after{content:""; margin-left:auto; width:8px; height:8px; border-right:2.5px solid var(--text-secondary); border-bottom:2.5px solid var(--text-secondary); transform:rotate(45deg); transition:transform .2s ease; flex-shrink:0;}
.tut-sec[open] summary::after{transform:rotate(-135deg);}
.tut-sec-ico{width:30px; height:30px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(var(--accent-rgb),.14); font-size:15px; flex-shrink:0;}
.tut-sec ul{margin:0; padding:0 16px 14px 44px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; line-height:1.5; color:var(--text-secondary);}
[data-theme="dark"] .tut-sec ul, [data-theme="dark"] .tut-text{color:#C3CFE2;}
@media (prefers-reduced-motion:reduce){ .pl-hero-bar i, .tut-dot, .tut-sec summary::after{transition:none;} .tut-slide, .pl-cat{animation:none;} }

/* ===================== CORREÇÕES DE REVISÃO ===================== */
/* --gray-200 era usada em vários lugares (bordas, divisores) mas nunca foi definida: as bordas sumiam */
:root{--gray-200:#D6DEEC;}
[data-theme="dark"]{--gray-200:#2C3950;}

/* primeiro banco da lista colava na borda da tela (o snap alinhava sem o respiro de 18px) */
.screen-dashboard .banks-scroll{scroll-padding-inline:18px;}

/* valores de Entradas/Saídas eram cortados com "..." (ex.: R$ 17.181,...) */
.flow-tile{gap:8px; padding:13px 11px;}
.flow-tile .flow-ico{width:30px; height:30px;}
.flow-tile .mini-value{font-size:clamp(13px, 3.9vw, 16px); overflow:visible; text-overflow:clip;}

/* Investimentos: "R$" ficava sozinho numa linha e o número na outra */
.inv-stat{padding-inline:10px;}
.inv-stat strong{white-space:nowrap; overflow-wrap:normal; font-size:clamp(11px, 3.2vw, 15px); letter-spacing:-.2px;}

/* Metas: textos como "Nada planejado em Setembro..." eram cortados; agora quebram em linhas */
.meta-row .cat-pct{white-space:normal; overflow:visible; text-overflow:clip;}

/* filtro de bancos da tela Início cortava "Todos os bancos" por 1px */
.screen-dashboard .filters-row select{padding:10px 26px 10px 12px;}
.comp-selects select{text-overflow:ellipsis;}

/* altura correta da tela em celulares com barra de endereço dinâmica */
@supports (height:100dvh){
  .app, .screen-login, .main-app{min-height:100dvh;}
}

/* título do topo: sem seleção de texto nem menu de "segurar" (é onde fica o botão escondido do Planejamento) */
#topbar-title{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}

/* links de informação (sobre, artigos, privacidade, contato) na tela de entrada */
.login-legal{margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:12.5px; animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .95s both;}
.login-legal a{color:rgba(220,252,231,.72); text-decoration:underline; text-underline-offset:3px;}
.login-legal a:hover, .login-legal a:focus-visible{color:#bbf7d0;}


/* ============================================================
   LOGIN EM DUAS COLUNAS (computador) e visual da marca FluxoCentral
   ============================================================ */
/* a tela de login ocupa a janela inteira; o app logado continua na coluna estreita */
.app:has(.screen-login.active){max-width:none; background:#021a10;}
.login-layout{position:relative; z-index:1; width:100%; max-width:1120px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:40px;}
.screen-login .login-logo .login-word-text{margin-top:20px; font-size:36px; line-height:1.1; font-weight:800; letter-spacing:-1px; color:#f0fff5; animation:fadeUp 1s cubic-bezier(.22,1,.36,1) .3s both;}
.screen-login .login-logo .login-word-text b{font-weight:500; color:#86efac;}
.login-aside{width:100%; max-width:420px; text-align:left; color:rgba(232,255,240,.86); padding-bottom:12px;}
.la-kicker{font-size:12px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#86efac;}
.la-title{margin:10px 0 12px; font-size:22px; line-height:1.25; font-weight:800; letter-spacing:-.4px; color:#f0fff5;}
.la-text{font-size:14.5px; line-height:1.7; margin-bottom:16px;}
.la-points{display:none; list-style:none; margin:0 0 22px; padding:0;}
.la-points li{position:relative; padding-left:26px; margin-bottom:12px; font-size:15.5px; line-height:1.55;}
.la-points li::before{content:""; position:absolute; left:2px; top:.5em; width:9px; height:9px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.18);}
.la-links{border-top:1px solid rgba(220,252,231,.16); padding-top:18px;}
.la-links-title{font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(220,252,231,.6); margin-bottom:10px;}
.la-links a{display:block; padding:8px 0; font-size:14.5px; color:#d9fbe5; text-decoration:none; border-bottom:1px solid rgba(220,252,231,.08);}
.la-links a:hover,.la-links a:focus-visible{color:#fff; padding-left:4px;}
.la-links a{transition:padding .2s ease, color .2s ease;}
.la-links a.la-all{color:#86efac; font-weight:700; border-bottom:0;}

@media (min-width:960px){
  .screen-login{padding:48px 56px;}
  .login-layout{flex-direction:row; align-items:center; justify-content:space-between; gap:88px;}
  .login-aside{order:1; flex:1; max-width:520px; padding-bottom:0;}
  .login-wrap{order:2; flex:none; width:440px; max-width:440px; padding:44px 40px 32px; border-radius:30px;
    background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border:1px solid rgba(220,252,231,.18); box-shadow:0 30px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);}
  .la-kicker{font-size:13px;}
  .la-title{font-size:clamp(36px,3.6vw,52px); line-height:1.08; letter-spacing:-1.4px; margin:16px 0 20px;}
  .la-text{font-size:18px; line-height:1.7; margin-bottom:28px; max-width:480px;}
  .la-points{display:block;}
  .la-links{max-width:480px;}
  .screen-login .login-logo{margin-bottom:28px;}
  .login-mark-wrap{width:104px; height:96px;}
  .login-halo{width:160px; height:160px; margin:-80px 0 0 -80px;}
}
@media (min-width:960px) and (max-height:760px){
  .login-wrap{padding:30px 36px 24px;}
  .login-mark-wrap{width:84px; height:78px;}
  .la-points{display:none;}
}
@media (max-width:959px){
  .screen-login{justify-content:flex-start; padding-top:calc(44px + env(safe-area-inset-top));}
  .login-wrap{margin:0 auto;}
  .login-aside{margin:0 auto;}
}