:root{
  --bg-0:#05070d;
  --card:#0e1526cc;
  --neon:#00edff;
  --neon-soft:rgba(0,237,255,.35);
  --neon-glow:rgba(0,237,255,.18);
  --indigo:#4a3dfa;
  --indigo-soft:rgba(74,61,250,.4);
  --brand-gradient:linear-gradient(135deg, var(--neon) 0%, var(--indigo) 100%);
  --brand-gradient-soft:linear-gradient(135deg, rgba(0,237,255,.16) 0%, rgba(74,61,250,.16) 100%);
  --cyan:#22d3ee;
  --danger:#fb7185;
  --danger-soft:rgba(251,113,133,.16);
  --good:#34d399;
  --good-soft:rgba(52,211,153,.14);
  --warn:#fbbf24;
  --text-0:#e7edf7;
  --text-1:#a9b4c9;
  --text-2:#6b7794;
  --accent:#0a84ff;
  --accent-hover:#3399ff;
  --accent-active:#0071e3;
  --ease-snap:cubic-bezier(.4,0,.6,1);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(900px 560px at 108% 6%, rgba(74,61,250,.16) 0%, transparent 60%),
    radial-gradient(1200px 700px at 15% -10%, #0d2740 0%, var(--bg-0) 55%),
    var(--bg-0);
  color:var(--text-0);
  font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.vf-shell{ display:flex; min-height:100vh; }
.vf-nav{
  width:220px; flex-shrink:0; padding:20px 12px; border-right:1px solid var(--neon-soft);
  display:flex; flex-direction:column; gap:4px;
  transition:width .32s var(--ease-snap);
}
.vf-brand{
  padding:10px 14px 18px 14px;
  display:flex; align-items:center; justify-content:center;
  transition:padding .3s ease;
}
.vf-brand-logo{ display:block; max-width:100%; width:100%; height:auto; }
.vf-brand-icon{ display:none; width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.vf-nav.collapsed .vf-brand-logo{ display:none; }
.vf-nav.collapsed .vf-brand-icon{ display:block; }
.vf-navbtn{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:var(--text-1); font-size:13.5px; font-weight:500; cursor:pointer; border:1px solid transparent;
  transition:all .18s var(--ease-snap); background:transparent;
}
.vf-navbtn:hover{ color:var(--text-0); background:#ffffff08; }
.vf-navbtn.active{
  color:var(--neon); background:var(--brand-gradient-soft); border-color:var(--neon-soft);
  box-shadow:0 0 18px -4px var(--indigo-soft);
}
.vf-main{ flex:1; padding:26px 32px 60px 32px; min-width:0; }
.vf-h1{ font-family:'Lexend Exa',sans-serif; font-size:23px; font-weight:500; letter-spacing:-.015em; margin:0 0 4px 0; }
.vf-sub{ color:var(--text-2); font-size:13px; margin:0 0 22px 0; }
.vf-link-like{ color:var(--accent); cursor:pointer; font-weight:600; transition:color .2s var(--ease-snap); }
.vf-link-like:hover{ color:var(--accent-hover); }
.vf-link-like.disabled{ color:var(--text-2); cursor:default; pointer-events:none; }
.vf-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.vf-card{
  background:var(--card); border:1px solid var(--neon-soft); border-radius:18px; padding:18px 20px;
  box-shadow:0 0 0 1px #ffffff05 inset, 0 8px 30px -18px var(--neon-glow);
  transition:border-color .2s var(--ease-snap), box-shadow .2s var(--ease-snap), transform .2s var(--ease-snap);
  backdrop-filter:blur(6px); margin-bottom:16px;
}
.vf-card:hover{ border-color:var(--neon); transform:translateY(-2px); box-shadow:0 0 0 1px #ffffff05 inset, 0 14px 34px -14px var(--indigo-soft), 0 0 22px -8px var(--neon-glow); }
.vf-kpi-label{ font-size:11.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.vf-kpi-value{ font-family:'Lexend Exa',sans-serif; font-size:23px; font-weight:600; letter-spacing:-.01em; }
.vf-kpi-value.pos{ color:var(--good); }
.vf-kpi-value.neg{ color:var(--danger); }
.vf-kpi-sub{ font-size:11.5px; color:var(--text-2); margin-top:4px; }
.vf-alert{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:12px;
  background:var(--danger-soft); border:1px solid rgba(251,113,133,.4); margin-bottom:12px;
}
.vf-alert.ok{ background:var(--good-soft); border-color:rgba(52,211,153,.4); }
.vf-alert.info{ background:#00edff1a; border-color:var(--neon-soft); }
.vf-section-title{ font-family:'Lexend Exa',sans-serif; font-size:15px; font-weight:500; letter-spacing:-.01em; margin:26px 0 12px 0; display:flex; align-items:center; gap:8px; }
.vf-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; background:#ffffff05; margin-bottom:6px; transition:background .15s var(--ease-snap); }
.vf-row:hover{ background:#ffffff0a; }
.vf-row-label{ font-size:13px; }
.vf-row-sub{ font-size:11px; color:var(--text-2); }
.vf-row-value{ font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.vf-input, .vf-select{
  background:#050810; border:1px solid #22314a; color:var(--text-0); border-radius:8px;
  padding:8px 10px; font-size:13px; font-family:'Inter',sans-serif; outline:none; width:100%;
  transition:border-color .15s var(--ease-snap), box-shadow .15s var(--ease-snap);
}
.vf-input:focus, .vf-select:focus{ border-color:var(--neon); box-shadow:0 0 0 3px var(--neon-glow); }
.vf-btn{
  display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff;
  border:1px solid transparent; padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background-color .15s var(--ease-snap);
}
.vf-btn:hover{ background:var(--accent-hover); }
.vf-btn:active{ background:var(--accent-active); }
.vf-btn.ghost{ background:transparent; color:var(--text-1); border-color:#2a3752; }
.vf-btn.ghost:hover{ color:var(--text-0); border-color:#3a4a6b; background:#ffffff08; }
.vf-icon-btn{ color:var(--text-2); cursor:pointer; padding:6px; border-radius:8px; transition:all .15s var(--ease-snap); }
.vf-icon-btn:hover{ color:var(--danger); background:var(--danger-soft); }
.vf-icon-btn.edit:hover{ color:var(--neon); background:var(--neon-glow); }
.vf-tabchip{ padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid #22314a; color:var(--text-1); background:#0d1220; transition:all .15s var(--ease-snap); }
.vf-tabchip.active{ border-color:var(--neon); color:var(--neon); background:var(--brand-gradient-soft); }
.vf-badge{ font-size:10.5px; padding:2px 8px; border-radius:999px; font-weight:700; letter-spacing:.03em; }
.vf-badge.good{ background:var(--good-soft); color:var(--good); }
.vf-badge.warn{ background:#fbbf2422; color:var(--warn); }
.vf-badge.bad{ background:var(--danger-soft); color:var(--danger); }
.vf-empty{ color:var(--text-2); font-size:13px; text-align:center; padding:24px; border:1px dashed #22314a; border-radius:12px; }
.vf-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:10px; }
.vf-label{ font-size:11px; color:var(--text-2); margin-bottom:5px; display:block; }
.vf-chart-wrap{ position:relative; width:100%; height:240px; }
.vf-progress{ background:#ffffff0a; border-radius:999px; height:8px; overflow:hidden; }
.vf-progress-fill{ height:100%; border-radius:999px; transition:width .3s var(--ease-snap); }
.vf-gradient-text{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* -------- metric card: KPI com número grande + sparkline + rodapé de estatísticas -------- */
.vf-metric-card{
  border-radius:18px; background:var(--card); border:1px solid var(--neon-soft);
  box-shadow:0 0 0 1px #ffffff05 inset, 0 8px 30px -18px var(--neon-glow);
  backdrop-filter:blur(6px); margin-bottom:16px;
}
.vf-metric-content{ padding:20px 22px 4px; }
.vf-metric-title{ font-size:12px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.vf-metric-headline{ font-family:'Lexend Exa',sans-serif; font-size:32px; font-weight:700; color:var(--text-0); line-height:1.1; }
.vf-metric-trend{ font-size:13px; font-weight:600; margin-top:6px; }
.vf-metric-trend-label{ color:var(--text-2); font-weight:400; margin-left:4px; text-transform:none; }
.vf-metric-chart{ position:relative; height:84px; margin:6px 8px 0; }
.vf-metric-footer{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 22px; border-top:1px solid #ffffff0f; font-size:12px;
}
.vf-metric-stats{ display:flex; gap:7px; color:var(--text-2); }
.vf-metric-stats b{ color:var(--text-1); font-weight:600; }
.vf-metric-stats .dot{ opacity:.4; }

/* -------- borda com gradiente girando (destaque pontual, tipo "card em evidência") -------- */
.vf-shine-border{ position:relative; border-radius:19px; padding:2px; overflow:hidden; isolation:isolate; }
.vf-shine-border::before{
  content:''; position:absolute; inset:-150%; z-index:0;
  background:conic-gradient(from 0deg, var(--neon), var(--indigo), var(--neon));
  animation:vf-shine-spin 4s linear infinite;
}
.vf-shine-inner{ position:relative; z-index:1; border:none; margin-bottom:0!important; height:100%; }
@keyframes vf-shine-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .vf-shine-border::before{ animation:none; } }
.vf-grid-2col{ display:grid; gap:16px; grid-template-columns:1fr 1fr; align-items:start; }
.vf-navlinks{ display:flex; flex-direction:column; gap:4px; }
/* lista com rolagem própria — só vira scroll de verdade abaixo do breakpoint mobile (ver media query) */
.vf-list-scroll{ display:contents; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#22314a; border-radius:8px; }

/* ==================================================================
   MOBILE (celulares) — menu vai pro topo em faixa horizontal rolável,
   quadros que ficavam lado a lado empilham, listas longas (receitas,
   despesas, itens de cartão) ganham rolagem interna própria.
   Tablets/desktop (>680px) mantêm o layout original.
   ================================================================== */
@media (max-width: 680px){
  .vf-shell{ flex-direction:column; }
  .vf-nav{
    width:100% !important; flex-direction:column; gap:0; padding:10px 14px 0 14px;
    border-right:none; border-bottom:1px solid var(--neon-soft);
  }
  .vf-nav.collapsed{ width:100% !important; align-items:stretch; }
  .vf-brand{ justify-content:flex-start; padding:6px 2px 10px 2px; }
  .vf-brand-logo{ display:none; }
  .vf-brand-icon{ display:block; }
  .vf-nav.collapsed .vf-user-info,
  .vf-nav.collapsed .vf-navbtn-label{ opacity:1; max-width:100%; flex:initial; }
  .vf-user-block{ margin-bottom:8px; }
  .vf-nav.collapsed .vf-user-block{ justify-content:flex-start; padding:10px; }
  .vf-nav-toggle{ display:none; }
  .vf-navlinks{
    flex-direction:row; gap:2px; overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; padding-bottom:10px; margin:0 -14px; padding-left:14px; padding-right:14px;
  }
  .vf-nav.collapsed .vf-navbtn,
  .vf-navbtn{ flex-direction:column; gap:3px; padding:8px 12px; width:auto; flex-shrink:0; }
  .vf-navbtn-label{ font-size:10px; white-space:nowrap; }

  .vf-main{ padding:16px; }
  .vf-grid-2col{ grid-template-columns:1fr; }

  /* listas de receitas/despesas/itens de cartão ganham rolagem própria,
     em vez de esticar a página inteira — padrão comum em apps mobile
     pra manter o formulário de adicionar sempre visível logo abaixo */
  .vf-list-scroll{
    display:block; max-height:38vh; overflow-y:auto;
    overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch;
    padding-right:4px; margin-bottom:10px;
  }
}

/* -------- login -------- */
.vf-login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(700px 500px at 50% 15%, rgba(74,61,250,.18) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 85%, rgba(0,237,255,.10) 0%, transparent 55%);
}
.vf-login-card{ width:100%; max-width:380px; text-align:center; }
.vf-login-brand{ display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.vf-login-brand img{ max-width:260px; width:100%; height:auto; }
.vf-login-input{ text-align:center; font-size:16px; letter-spacing:.02em; }
.vf-login-token{ text-align:center; font-size:24px; letter-spacing:8px; font-family:'Lexend Exa',sans-serif; }

/* -------- bloco do usuário no menu -------- */
.vf-user-block{ display:flex; align-items:center; gap:10px; padding:10px; margin:0 0 14px 0; border-radius:12px; background:#ffffff05; transition:padding .3s ease; }
.vf-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1.5px solid var(--neon-soft); flex-shrink:0; }
.vf-avatar-fallback{ width:38px; height:38px; border-radius:50%; background:var(--brand-gradient-soft); border:1.5px solid var(--neon-soft); color:var(--neon); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; font-family:'Lexend Exa',sans-serif; }
.vf-user-info{ min-width:0; flex:1; opacity:1; max-width:160px; overflow:hidden; transition:opacity .2s ease, max-width .3s ease, flex .3s ease; }
.vf-user-name{ font-size:12.5px; font-weight:600; color:var(--text-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vf-user-logout{ font-size:10.5px; color:var(--text-2); cursor:pointer; }
.vf-user-logout:hover{ color:var(--danger); }

/* -------- menu recolhido (só ícones) -------- */
.vf-nav.collapsed{ width:64px; align-items:center; }
.vf-navbtn-label{
  display:inline-block; opacity:1; max-width:160px; overflow:hidden; white-space:nowrap;
  transition:opacity .2s ease, max-width .3s ease;
}
.vf-nav.collapsed .vf-navbtn-label,
.vf-nav.collapsed .vf-user-info { opacity:0; max-width:0; flex:0; }
.vf-nav.collapsed .vf-navbtn{ justify-content:center; padding:10px; width:40px; }
.vf-nav.collapsed .vf-user-block{ justify-content:center; padding:8px; }
.vf-nav.collapsed .vf-brand{ justify-content:center; padding:8px 0 18px 0; }
.vf-nav-toggle{
  align-self:stretch; text-align:center; padding:9px; border-radius:10px; cursor:pointer;
  color:var(--text-2); font-size:15px; border:1px solid #22314a; transition:all .15s var(--ease-snap);
  margin-bottom:14px;
}
.vf-nav-toggle:hover{ color:var(--neon); border-color:var(--neon-soft); background:var(--neon-glow); }
.vf-nav-toggle:active{ transform:scale(.9); }
.vf-nav-toggle-icon{ display:inline-block; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.vf-nav.collapsed .vf-nav-toggle-icon{ transform:rotate(180deg); }

/* -------- usuários -------- */
.vf-photo-upload{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.vf-photo-upload img, .vf-photo-upload .vf-avatar-fallback{ width:56px; height:56px; }

/* -------- linha do tempo da projeção: acordeão por mês -------- */
.vf-mes-row{ border-radius:10px; margin-bottom:6px; overflow:hidden; }
.vf-mes-row-header{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  background:#ffffff05; cursor:pointer; transition:background .15s var(--ease-snap);
}
.vf-mes-row-header:hover{ background:#ffffff0a; }
.vf-mes-row-header .vf-row-label{ flex:1; }
.vf-mes-chevron{ display:inline-block; color:var(--text-2); font-size:11px; transition:transform .2s var(--ease-snap); }
.vf-mes-chevron.open{ transform:rotate(90deg); color:var(--neon); }
.vf-mes-detalhe{ padding:6px 12px 10px 34px; }
.vf-mes-grupo{ margin-top:10px; }
.vf-mes-grupo-header{
  display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700;
  color:var(--text-1); padding-bottom:4px; border-bottom:1px solid #ffffff0f; margin-bottom:4px;
}
.vf-mes-item{ display:flex; justify-content:space-between; padding:4px 0; font-size:12.5px; color:var(--text-1); }
.vf-mes-item span:last-child{ font-variant-numeric:tabular-nums; color:var(--text-0); }

/* -------- onboarding: montagem de perfil (1º login) -------- */
.vf-onb-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(2,4,10,.72); backdrop-filter:blur(4px);
  animation:vf-onb-fade .2s var(--ease-snap);
}
@keyframes vf-onb-fade{ from{ opacity:0; } to{ opacity:1; } }
.vf-onb-card{
  position:relative; width:100%; max-width:440px; background:#141d33; border:1px solid var(--neon-soft);
  border-radius:20px; padding:28px 26px; box-shadow:0 20px 60px -20px rgba(0,0,0,.8), 0 0 0 1px #ffffff0a inset;
}
.vf-onb-card-wide{ max-width:560px; }
.vf-onb-close{ position:absolute; top:16px; right:18px; color:var(--text-2); cursor:pointer; font-size:14px; }
.vf-onb-close:hover{ color:var(--text-0); }
.vf-onb-progress{ font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.vf-onb-titulo{ font-family:'Lexend Exa',sans-serif; font-size:20px; font-weight:500; margin:0 0 8px 0; letter-spacing:-.01em; }
.vf-onb-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.vf-onb-simnao{ display:flex; gap:10px; margin:14px 0 4px; }
.vf-onb-simnao .vf-btn{ flex:1; justify-content:center; }
.vf-onb-seguimento{ margin-top:14px; padding-top:14px; border-top:1px solid #ffffff0f; }
.vf-onb-emoji{ font-size:40px; text-align:center; margin-bottom:6px; }
#onb-cartoes-lista:not(:empty){ margin-bottom:6px; }

/* -------- tour guiado (driver.js) — reskin pro tema escuro do Rumo Certo -------- */
.driver-popover{
  background:var(--card-solid, #0e1526) !important; color:var(--text-0) !important;
  border:1px solid var(--neon-soft) !important; border-radius:14px !important;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7) !important; font-family:'Inter',sans-serif !important;
  max-width:340px !important;
}
.driver-popover-title{ font-family:'Lexend Exa',sans-serif !important; color:var(--text-0) !important; font-size:16px !important; }
.driver-popover-description{ color:var(--text-1) !important; font-size:13px !important; }
.driver-popover-progress-text{ color:var(--text-2) !important; font-size:11px !important; }
.driver-popover-footer button{
  background:var(--brand-gradient) !important; color:#fff !important; text-shadow:none !important;
  border:none !important; border-radius:999px !important; padding:7px 14px !important; font-size:12px !important;
  font-weight:600 !important; text-transform:none !important;
}
.driver-popover-footer .driver-popover-prev-btn,
.driver-popover-footer .driver-popover-close-btn{
  background:transparent !important; color:var(--text-1) !important; border:1px solid #2a3752 !important;
}
.driver-popover-arrow-side-top.driver-popover-arrow{ border-top-color:var(--card-solid, #0e1526) !important; }
.driver-popover-arrow-side-bottom.driver-popover-arrow{ border-bottom-color:var(--card-solid, #0e1526) !important; }
.driver-popover-arrow-side-left.driver-popover-arrow{ border-left-color:var(--card-solid, #0e1526) !important; }
.driver-popover-arrow-side-right.driver-popover-arrow{ border-right-color:var(--card-solid, #0e1526) !important; }