/* =====================================================================
   VELTO REFRESH 2026 (v3) — camada visual (não mexe em nenhuma lógica)
   Como usar: salve este arquivo na mesma pasta do app.html e adicione
   <link rel="stylesheet" href="/velto-refresh.css"> logo antes de </body>.
   (Ou cole o conteúdo dentro de um <style> no mesmo lugar.)
   Os gráficos e o botão "Ir para o mês atual" vêm do velto-refresh.js.
   - Fonte: Inter 4 (variável) servida pelo cdnjs, que o CSP já libera;
     Plus Jakarta Sans (/velto-jakarta.woff2, licença OFL) na logo, títulos e números grandes
   - Verde: o verde da logo (#16b489). Texto verde em tom mais escuro (#0a8463)
     para passar no contraste de acessibilidade (WCAG AA)
   - Neutros frios com leve tom marinho + card de saldo marinho com menta
   Para desfazer: é só apagar este bloco.
   ===================================================================== */

/* ---------- 1. Fonte ---------- */
@font-face{font-family:'InterVariable';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.1/variable-latin/InterVariable-subset.woff2') format('woff2')}
@font-face{font-family:'InterVariable';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.1/variable-latin/InterVariable-Italic-subset.woff2') format('woff2')}
/* Apelidos: o CSS e o JS antigos pedem Hanken/Schibsted/Geist, que o CSP bloqueia.
   Estes nomes passam a apontar para a Inter (inclusive nos gráficos do Chart.js). */
@font-face{font-family:'Hanken Grotesk';font-weight:100 900;font-display:swap;
  src:url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.1/variable-latin/InterVariable-subset.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-weight:100 900;font-display:swap;
  src:url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.1/variable-latin/InterVariable-subset.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:100 900;font-display:swap;
  src:url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.1/variable-latin/InterVariable-subset.woff2') format('woff2')}

/* ---------- 2. Tokens ---------- */
html:root{
  --v-font:'InterVariable','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --v-brand:#16b489;            /* verde da logo */
  --v-brand-light:#9af5d4;      /* menta clara da logo */
  --v-brand-ink:#04261d;        /* texto em cima do verde */
  --v-brand-grad:linear-gradient(135deg,#3ad0a3 0%,#16b489 100%);
  --v-navy:#0c1f2c;
  --estilo:#c27c12; --invest:#12a57d; --reserva:#2f6fd6; --alegria:#c64f90;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --gap:16px;
}
:root[data-theme="light"]{
  --bg:#f5f7f8; --surface:#ffffff; --surface-2:#f6f8f9; --surface-3:#edf1f4;
  --line:#e4e9ed; --line-soft:#eef2f5; --border-card:#e6eaee;
  --txt:#0e1a24; --txt-2:#4d5b67; --txt-3:#65727e;
  --mint:#0a8463; --amber:#9c620e; --blue:#2a67c9; --pink:#c2478a; --red:#cf3a4e;
  --accent:#0a8463;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.04);
  --shadow-lg:0 14px 34px -14px rgba(16,24,40,.22);
  --vd-ink:#0e1a24; --vd-ink-2:#4d5b67; --vd-ink-3:#65727e; --vd-line:#e4e9ed; --vd-card:#ffffff;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b1117; --surface:#111922; --surface-2:#16202a; --surface-3:#1d2935;
  --line:#243241; --line-soft:#1b2733; --border-card:#1f2c39;
  --txt:#e8eef3; --txt-2:#a5b2be; --txt-3:#7d8b98;
  --mint:#34d3a4; --amber:#eab25c; --blue:#6ea8ff; --pink:#f28dc0; --red:#ff7b86;
  --estilo:#e0a43c; --invest:#34d3a4; --reserva:#6ea8ff; --alegria:#f28dc0;
  --accent:#34d3a4;
  --shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.28);
  --shadow-lg:0 18px 40px -16px rgba(0,0,0,.6);
  --vd-ink:#e8eef3; --vd-ink-2:#a5b2be; --vd-ink-3:#7d8b98; --vd-line:#243241; --vd-card:#111922;
  color-scheme:dark;
}

/* ---------- 3. Base e tipografia ---------- */
:root body{background:var(--bg);color:var(--txt);font-size:15px;line-height:1.5;letter-spacing:-.006em;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root body,:root body *{font-family:var(--v-font) !important}
::selection{background:color-mix(in srgb,var(--v-brand) 28%,transparent)}
:root #app h1,:root #app h2,:root #app h3,:root #app h4{color:var(--txt);letter-spacing:-.022em}
:root #app h1.ptitle{font-size:30px;font-weight:700;letter-spacing:-.032em;line-height:1.15;margin-bottom:6px}
:root #app .pdesc{font-size:15px;color:var(--txt-2);margin-bottom:24px;max-width:640px}

/* ---------- 4. Header (vidro, largura total) ---------- */
:root #app header.top{
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%);
  background:color-mix(in srgb,var(--bg) 90%,transparent) !important;
  -webkit-backdrop-filter:saturate(1.2) blur(20px); backdrop-filter:saturate(1.2) blur(20px);
  border-bottom:1px solid var(--line) !important; box-shadow:none !important;
}
:root #app .brand .nm{font-weight:700;letter-spacing:-.035em;color:var(--txt)}
:root #app .brand .tg{font-weight:600;letter-spacing:.18em;color:var(--txt-3)}
:root #app .month-nav{border-radius:999px;padding:3px;background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.05)}
:root #app .mn-arrow{height:34px;border-radius:999px;color:var(--txt-2)}
:root #app .mn-arrow:hover{background:var(--surface-3);color:var(--txt)}
:root #app .mn-label{height:34px;border-radius:999px;font-weight:600;letter-spacing:-.01em;color:var(--txt)}
:root #app .mn-label:hover,:root #app .mn-label.mn-open{background:var(--surface-3)}
:root #app .avatar{background:linear-gradient(145deg,#17394d,#0c1f2c);color:var(--v-brand-light);font-weight:650;
  border:1px solid color-mix(in srgb,var(--v-brand) 35%,transparent);
  box-shadow:0 1px 2px rgba(16,24,40,.14),0 0 0 3px color-mix(in srgb,var(--v-brand) 12%,transparent)}
:root #app .user-menu{border-radius:14px;box-shadow:var(--shadow-lg);border-color:var(--line)}

/* Abas: texto limpo + sublinhado verde (o indicador já anima sozinho) */
:root #app nav.tabs{gap:2px;padding-bottom:0}
:root #app nav.tabs button{border-radius:0;color:var(--txt-2);font-weight:550;letter-spacing:-.01em}
:root #app nav.tabs button svg{opacity:.7}
:root #app nav.tabs button:hover{color:var(--txt)}
:root #app nav.tabs button.active{color:var(--txt) !important;font-weight:620}
:root #app nav.tabs button.active svg{color:var(--v-brand);opacity:1}
:root #app .tab-indicator{top:auto;bottom:0;height:2px;background:transparent;border-radius:0;z-index:2}
:root #app .tab-indicator::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--v-brand-grad)}
@media (min-width:761px){
  :root #app .top-bar{padding:16px 0 8px}
  :root #app .brand .nm{font-size:21px}
  :root #app nav.tabs button{padding:12px 14px 14px;font-size:14px}
}

/* ---------- 4b. Seletor de mês (calendário) ---------- */
:root #app .month-nav{gap:2px}
:root #app .mn-arrow{width:34px}
:root #app .mn-label{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
:root #app .mn-label::before,:root #app .mn-label::after{content:"";flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--vr-ico) center/contain no-repeat;mask:var(--vr-ico) center/contain no-repeat}
:root #app .mn-label::before{width:16px;height:16px;color:var(--v-brand);
  --vr-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
:root #app .mn-label::after{width:12px;height:12px;color:var(--txt-3);transition:transform .2s;
  --vr-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
:root #app .mn-label.mn-open::after{transform:rotate(180deg)}
:root #app #monthPop{width:288px;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 24px 48px -16px rgba(16,24,40,.28),0 2px 6px rgba(16,24,40,.06);animation:vrPop .16s cubic-bezier(.2,.8,.3,1)}
@keyframes vrPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
/* o CSS antigo empurrava o cabeçalho do popover 22px para baixo */
:root #app .mp-head{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--line-soft)}
:root #app .mp-head .yr{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--txt)}
:root #app .mp-head button{width:32px;height:32px;border-radius:10px;background:var(--surface-2);color:var(--txt-2);display:inline-flex;align-items:center;justify-content:center}
:root #app .mp-head button:hover{background:var(--surface-3);color:var(--txt)}
:root #app .mp-grid{gap:6px}
:root #app .mp-grid button{position:relative;height:42px;padding:0;border-radius:12px;border:1px solid transparent;background:transparent;
  font-size:14px;font-weight:550;color:var(--txt-2)}
:root #app .mp-grid button:hover{background:var(--surface-2);border-color:var(--line);color:var(--txt)}
:root #app .mp-grid button.cur{background:var(--v-brand-grad);border-color:transparent;color:var(--v-brand-ink);font-weight:700;
  box-shadow:0 6px 14px -8px rgba(22,180,137,.9)}
/* mês de hoje (marcado pelo velto-refresh.js) */
:root #app .mp-grid button.vr-today:not(.cur){color:var(--txt);font-weight:650}
:root #app .mp-grid button.vr-today:not(.cur)::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--v-brand)}
:root #app .vr-mp-foot{display:flex;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
:root #app .vr-mp-today{flex:1;height:36px;border:none;border-radius:10px;background:var(--surface-2);color:var(--txt);
  font-size:13px;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}
:root #app .vr-mp-today:hover{background:color-mix(in srgb,var(--v-brand) 12%,var(--surface));color:var(--mint)}
@media (max-width:520px){:root #app .mn-label::before,:root #app .mn-label::after{display:none}}

/* ---------- 5. Cards ---------- */
:root #app .card,:root #app .goal{background:var(--surface) !important;border:1px solid var(--border-card) !important;
  border-radius:var(--r-lg) !important;box-shadow:var(--shadow) !important}
:root #app .card-h{margin-bottom:16px}
:root #app .card-h h3{font-size:16px;font-weight:650;letter-spacing:-.015em}
:root #app .card-h .sub{font-size:13px;color:var(--txt-3);margin-top:2px}

/* ---------- 6. KPIs ---------- */
:root #app .kpi{background:var(--surface) !important;border:1px solid var(--border-card) !important;
  border-radius:var(--r-lg) !important;box-shadow:var(--shadow) !important}
:root #app .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg) !important;border-color:var(--border-card) !important}
:root #app .kpi::before{display:none !important}
:root #app .kpi .l{display:flex;align-items:center;gap:8px;padding-left:0;font-size:13px;font-weight:550;
  letter-spacing:-.005em;text-transform:none;color:var(--txt-2)}
:root #app .kpi .l::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--ac,var(--v-brand));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac,var(--v-brand)) 16%,transparent)}
:root #app .kpi .v{padding-left:0;font-size:30px;font-weight:650;letter-spacing:-.032em;line-height:1.1;margin:10px 0 4px;color:var(--txt)}
:root #app .kpi .d{padding-left:0;font-size:12.5px;color:var(--txt-3)}
:root #app .bar,:root #app .velto-meta-bar .vmb-track{height:6px;background:var(--surface-3);border-radius:999px}
:root #app .bar .fill{border-radius:999px}
:root #app .velto-meta-bar .vmb-fill.hit{background:var(--v-brand-grad)}
:root #app .velto-meta-bar .vmb-fill.below{background:linear-gradient(90deg,#f2b84b,#e3901f)}
:root #app .vmb-pill,:root #app .vmb-cmp-pill,:root #app .vgc-pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;letter-spacing:0}
:root #app .vmb-pill.hit,:root #app .vmb-cmp-pill.up,:root #app .vgc-pill.down{color:#08714f;background:color-mix(in srgb,var(--v-brand) 13%,transparent)}
:root #app .vmb-pill.below{color:#8a530a;background:color-mix(in srgb,#f0a52c 17%,transparent)}
:root #app .vmb-cmp-pill.down,:root #app .vgc-pill.up{color:#b4323f;background:color-mix(in srgb,var(--red) 10%,transparent)}
:root #app .vmb-detail,:root #app .vmb-cmp-prev,:root #app .vgc-prev{color:var(--txt-3)}

/* ---------- 7. Card de saldo: destaque marinho + menta ---------- */
:root #app #saldoContasCard{
  position:relative;overflow:hidden;isolation:isolate;
  margin:16px 0 !important;padding:22px 24px 10px !important;border-radius:20px !important;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(22,180,137,.34) 0%,rgba(22,180,137,0) 52%),
    radial-gradient(80% 120% at 0% 120%,rgba(154,245,212,.10) 0%,rgba(154,245,212,0) 60%),
    linear-gradient(160deg,#112b3d 0%,#0c1f2c 55%,#09171f 100%) !important;
  border:1px solid rgba(154,245,212,.10) !important;
  box-shadow:0 1px 2px rgba(9,23,31,.25),0 22px 44px -24px rgba(9,23,31,.75) !important;
  color:#eaf3f1;
  --mint:#6ee7c0; --red:#ff9aa5; --txt:#eaf3f1; --txt-2:#c2d2d9; --txt-3:#8fa6b1;
  --surface-3:rgba(255,255,255,.08); --line:rgba(255,255,255,.08);
}
/* marca d'água do "V" da logo */
:root #app #saldoContasCard::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-34px;top:-46px;width:250px;height:250px;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M12 12.5c2.4 0 4.5 1.5 5.3 3.8l4.9 13.6c.5 1.4 2.5 1.4 3 0l6.6-18.2c.8-2.2 2.9-3.7 5.2-3.7h.2c1.6 0 2.7 1.6 2.1 3.1L29.8 38.6c-1 2.6-3.5 4.4-6.3 4.4s-5.3-1.7-6.3-4.4L9.7 15.6C9.1 14 10.3 12.5 12 12.5z' fill='%239af5d4'/%3E%3C/svg%3E") no-repeat center/contain}
:root #app #saldoContasCard > div:first-child{flex-direction:column;align-items:flex-start !important;gap:4px;margin-bottom:14px !important}
:root #app #saldoContasCard > div:first-child > strong{font-size:12px !important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8fa6b1}
:root #app #saldoContasCard > div:first-child > span{gap:10px !important}
:root #app #saldoContasCard > div:first-child > span > span{font-size:28px;font-weight:650 !important;letter-spacing:-.03em;line-height:1.15;color:#fff}
:root #app #saldoContasCard #saldoOcultoBtn{color:#8fa6b1 !important;background:rgba(255,255,255,.06) !important;border-radius:8px !important;padding:6px !important}
:root #app #saldoContasCard #saldoOcultoBtn:hover{color:#eaf3f1 !important;background:rgba(255,255,255,.12) !important}
:root #app #saldoContasCard > div:not(:first-child){margin:0 -10px;padding:12px 10px !important;border-radius:10px;align-items:center !important;
  border-top:1px solid rgba(255,255,255,.07) !important;font-size:14.5px;color:#d5e2e7;transition:background-color .15s}
:root #app #saldoContasCard > div:not(:first-child):hover{background:rgba(255,255,255,.04)}
:root #app #saldoContasCard > div:not(:first-child) > span:first-child{gap:12px !important}
:root #app #saldoContasCard > div:not(:first-child) > span:first-child > svg{width:28px;height:28px;padding:7px;border-radius:9px;background:rgba(255,255,255,.94)}
:root #app #saldoContasCard > div:not(:first-child) > span:last-child{font-weight:600 !important;letter-spacing:-.01em}

/* ---------- 8. Botões ---------- */
:root #app .btn{height:42px;border-radius:12px;font-size:14px;font-weight:600;letter-spacing:-.01em;padding:0 16px}
:root #app .btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:10px}
:root #app .btn.ghost{width:34px;height:34px;padding:0;border-radius:9px}
:root #app .btn:not(.primary):not(.ghost){background:var(--surface);border:1px solid var(--line);color:var(--txt);box-shadow:0 1px 2px rgba(16,24,40,.05)}
:root #app .btn:not(.primary):not(.ghost):hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--txt) 16%,var(--line))}
:root #app .btn.primary{background:var(--v-brand-grad) !important;color:var(--v-brand-ink) !important;border:none !important;font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(4,38,29,.16),0 8px 18px -10px rgba(22,180,137,.9) !important}
:root #app .btn.primary:hover{filter:brightness(1.04) saturate(1.06);transform:translateY(-1px)}
/* "Importar extrato ou recibo" segue o mesmo estilo do botão principal */
:root #app .imp-openbtn{background:var(--v-brand-grad) !important;color:var(--v-brand-ink) !important;border-radius:12px !important;font-weight:650 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(4,38,29,.16),0 8px 18px -10px rgba(22,180,137,.9) !important;transition:filter .15s,transform .15s}
:root #app .imp-openbtn:hover{filter:brightness(1.04) saturate(1.06);transform:translateY(-1px)}
:root #app .btn-icon{border-radius:10px;background:var(--surface);border-color:var(--line)}
/* Painel: "+ Novo lançamento", "+ Receita" e "+ Despesa" na mesma linha */
:root #app #page-painel > div:has(> .btn.primary){display:inline-flex;vertical-align:top;margin:0 8px 8px 0 !important}
:root #app #quickActions{display:inline-flex !important;vertical-align:top;gap:8px !important;margin:0 0 8px !important}
:root #app #quickActions button{height:42px;padding:0 16px !important;border-radius:12px !important;font-size:14px !important;font-weight:600 !important;
  letter-spacing:-.01em;display:inline-flex;align-items:center;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .15s,background-color .15s}
:root #app #quickActions button:nth-child(1){background:color-mix(in srgb,var(--v-brand) 10%,var(--surface)) !important;color:var(--mint) !important;
  border:1px solid color-mix(in srgb,var(--v-brand) 32%,transparent) !important}
:root #app #quickActions button:nth-child(2){background:color-mix(in srgb,var(--red) 6%,var(--surface)) !important;color:var(--red) !important;
  border:1px solid color-mix(in srgb,var(--red) 28%,transparent) !important}
:root #app #quickActions button:hover{transform:translateY(-1px)}
:root[data-theme="light"] #app #quickActions button:nth-child(1){color:#087a5b !important}
:root[data-theme="light"] #app #quickActions button:nth-child(2){color:#c2344a !important}
/* botões "fantasma" (⋮ das listas): sem caixa cinza */
:root #app .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--txt-3)}
:root #app .btn.ghost:hover{background:var(--surface-3);color:var(--txt)}

/* ---------- 8b. Lançamentos ---------- */
/* título e ações (PDF / importar) na mesma linha */
@media (min-width:681px){
  :root #app #page-lancamentos > div:first-child{float:right;margin:2px 0 12px 16px !important}
  :root #app #page-lancamentos > .card{clear:both}
}
/* Receita / Despesa viram dois blocos com ícone */
:root #app #page-lancamentos > .card:has(> div > button[onclick^="openAdd"]){background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important}
:root #app #page-lancamentos button[onclick^="openAdd"]{position:relative;height:62px !important;justify-content:flex-start;padding:0 18px 0 62px;
  border-radius:16px;font-size:0 !important;box-shadow:0 1px 2px rgba(16,24,40,.05) !important;transition:transform .15s,box-shadow .15s}
:root #app #page-lancamentos button[onclick^="openAdd"]:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(16,24,40,.35) !important}
:root #app #page-lancamentos button[onclick^="openAdd"] > span{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
:root #app #page-lancamentos button[onclick^="openAdd"]::before,:root #app #page-lancamentos button[onclick^="openAdd"]::after{content:"";position:absolute;top:50%;transform:translateY(-50%)}
:root #app #page-lancamentos button[onclick^="openAdd"]::before{left:12px;width:38px;height:38px;border-radius:12px}
:root #app #page-lancamentos button[onclick^="openAdd"]::after{left:22px;width:18px;height:18px;background:#fff;
  -webkit-mask:var(--vr-ico) center/contain no-repeat;mask:var(--vr-ico) center/contain no-repeat}
:root #app #page-lancamentos button[onclick="openAdd('receita')"]{background:color-mix(in srgb,var(--v-brand) 9%,var(--surface)) !important;color:var(--mint) !important;
  border:1px solid color-mix(in srgb,var(--v-brand) 28%,transparent) !important;
  --vr-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M17 17H7V7'/%3E%3C/svg%3E")}
:root #app #page-lancamentos button[onclick="openAdd('receita')"]::before{background:var(--v-brand-grad)}
:root #app #page-lancamentos button[onclick="openAdd('despesa')"]{background:color-mix(in srgb,var(--red) 6%,var(--surface)) !important;color:var(--red) !important;
  border:1px solid color-mix(in srgb,var(--red) 26%,transparent) !important;
  --vr-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E")}
:root #app #page-lancamentos button[onclick="openAdd('despesa')"]::before{background:linear-gradient(135deg,#f0707f,#d23c50)}
:root[data-theme="light"] #app #page-lancamentos button[onclick="openAdd('receita')"]{color:#087a5b !important}
:root[data-theme="light"] #app #page-lancamentos button[onclick="openAdd('despesa')"]{color:#c2344a !important}
/* filtros em pílula, busca com lupa */
:root #app #contaFiltroBar{gap:8px !important;margin:0 0 12px !important}
:root #app #contaFiltroBar select,:root #app #contaFiltroBar input,:root #app #contaFiltroBar > button{height:38px;border-radius:999px !important;font-size:13px !important;font-weight:550}
:root #app #contaFiltroBar select{padding:0 32px 0 14px !important;max-width:180px !important;-webkit-appearance:none;appearance:none;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px !important}
:root #app #filtroBuscaInput{padding:0 14px 0 38px !important;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E") no-repeat 14px center/16px !important}
:root #app #contaFiltroBar > button{border:none !important;background:transparent !important;color:var(--txt-3) !important;padding:0 12px !important}
:root #app #contaFiltroBar > button:hover{background:var(--surface-2) !important;color:var(--txt) !important}
/* lista no estilo extrato de banco digital */
:root #app #page-lancamentos table{display:block}
:root #app #page-lancamentos thead{display:none}
:root #app #lancBody{display:block}
:root #app #lancBody tr.lanc-day{display:block}
:root #app #lancBody tr.lanc-day td{display:block;padding:20px 6px 8px !important;border:none !important;font-size:12px !important;font-weight:650 !important;
  letter-spacing:.06em !important;text-transform:uppercase;color:var(--txt-3) !important}
:root #app #lancBody tr.lanc-day:first-child td{padding-top:6px !important}
:root #app #lancBody tr:not(.lanc-day){position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 40px;
  grid-template-areas:"desc amt menu" "cat amt menu";align-items:center;column-gap:12px;padding:10px 4px 10px 62px;border-radius:14px;transition:background-color .15s}
:root #app #lancBody tr:not(.lanc-day):hover{background:var(--surface-2)}
:root #app #lancBody tr:not(.lanc-day) > td{display:block;padding:0 !important;border:none !important;background:none}
:root #app #lancBody tr:not(.lanc-day) > td:nth-child(1){grid-area:cat;display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;min-width:0;
  font-size:12.5px;line-height:1.35;color:var(--txt-3)}
:root #app #lancBody tr:not(.lanc-day) > td:nth-child(2){grid-area:desc;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
  color:var(--txt) !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root #app #lancBody tr:not(.lanc-day) > td:nth-child(2):empty{display:none}
:root #app #lancBody tr:not(.lanc-day):has(> td:nth-child(2):empty) > td:nth-child(1){grid-row:1 / span 2;font-size:15px;font-weight:600;color:var(--txt)}
:root #app #lancBody tr:not(.lanc-day) > td:nth-child(3){grid-area:amt;font-size:15px;font-weight:650;letter-spacing:-.01em;text-align:right}
:root #app #lancBody tr:not(.lanc-day) > td:nth-child(4){grid-area:menu;text-align:right}
:root #app #lancBody .lanc-acc{padding-left:0 !important;margin:0;font-size:12.5px;color:var(--txt-3)}
:root #app #lancBody .lanc-acc::before{content:"·";margin-right:6px}
/* ícone da categoria num quadrado na cor da categoria */
:root #app #lancBody tr:not(.lanc-day) > td:nth-child(1) > span:first-child{position:absolute;left:10px;top:50%;transform:translateY(-50%);margin:0 !important;display:block !important}
:root #app #lancBody tr:not(.lanc-day) > td:nth-child(1) > span:first-child > svg{display:block;width:40px;height:40px;padding:11px;border-radius:13px;
  background:color-mix(in srgb,currentColor 13%,transparent)}
/* despesas em tom neutro, receitas em verde (padrão dos bancos digitais).
   Para voltar com as despesas em vermelho, apague a linha abaixo. */
:root #app #lancBody td.num{--red:var(--txt)}

/* ---------- 9. Formulários ---------- */
:root #app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not(.add-amount-in),
:root #app select,:root #app textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--txt);
  box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .15s,box-shadow .15s}
:root #app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not(.add-amount-in):hover,
:root #app select:hover{border-color:color-mix(in srgb,var(--txt) 18%,var(--line))}
:root #app input:not([type=checkbox]):not([type=radio]):not(.add-amount-in):focus,:root #app select:focus,:root #app textarea:focus{
  outline:none;border-color:var(--v-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--v-brand) 18%,transparent)}
:root #app input::placeholder,:root #app textarea::placeholder{color:var(--txt-3);opacity:.85}
:root #app label.fl{font-size:12.5px;font-weight:550;color:var(--txt-2)}
:root #app .seg:not(.add-seg){background:var(--surface-3);border:none;border-radius:12px;padding:4px}
:root #app .seg:not(.add-seg) button{border-radius:9px;font-weight:600;color:var(--txt-2)}
:root #app .seg:not(.add-seg) button.on{background:var(--surface);color:var(--txt);box-shadow:0 1px 2px rgba(16,24,40,.08),0 1px 1px rgba(16,24,40,.04)}
:root #app .opt{background:var(--surface);border:1px solid var(--line);border-radius:14px}
:root #app .opt:hover{background:var(--surface);border-color:color-mix(in srgb,var(--txt) 18%,var(--line))}
:root #app .opt.on{border-color:color-mix(in srgb,var(--v-brand) 70%,transparent);background:color-mix(in srgb,var(--v-brand) 7%,var(--surface));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v-brand) 14%,transparent)}
:root .switch input:checked+.slider{background:var(--v-brand);border-color:var(--v-brand)}
:root .slider::before,:root .switch input:checked+.slider::before{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* ---------- 10. Listas, tabelas e detalhes ---------- */
:root #app .row-main .t{font-size:14px;font-weight:600}
:root #app .row .amt{font-size:13px;font-weight:500;color:var(--txt-2)}
:root #app .cap{font-size:11.5px;color:var(--txt-3)}
:root #app .dot{width:10px;height:10px;border-radius:50%;box-shadow:none}
:root #app .velto-leg-row{border-bottom-color:var(--line-soft) !important}
:root #app .center-l .v{font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--txt)}
:root #app .center-l .l{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--txt-3)}
/* o tooltip do gráfico passa por cima do valor central (antes ficava por baixo) */
:root #app .chart-wrap > canvas{position:relative;z-index:1}
:root #app .chart-wrap > .center-l{z-index:0}
:root #app .alert-pill{font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:999px}
:root #app th{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--txt-3);border-bottom:1px solid var(--line)}
:root #app td{border-bottom-color:var(--line-soft)}
:root #app tr.lanc-day td{font-size:12.5px;font-weight:650;color:var(--txt-2);letter-spacing:.01em}
:root #app .acct{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:14px}
:root #app .gstat,:root #app .sim-box{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px}
:root #app .tagdone{background:color-mix(in srgb,var(--v-brand) 14%,transparent);color:var(--mint)}
:root #app .empty-state h4{font-size:16px;font-weight:650;letter-spacing:-.015em}
:root #app .empty-state .es-ico{color:color-mix(in srgb,var(--v-brand) 70%,var(--txt-3))}
:root #app footer.foot{border-top-color:var(--line);color:var(--txt-3);font-size:12.5px}

/* ---------- 11. Modais e toast ---------- */
:root #app .modal,:root #app .welcome{border-radius:20px !important;border:1px solid var(--line) !important;
  box-shadow:0 30px 80px -24px rgba(9,23,31,.45) !important}
:root .modal-bg{background:rgba(9,20,28,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root .toast{background:#0c1f2c;color:#eaf3f1;border:1px solid rgba(154,245,212,.14);border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(9,23,31,.55);font-weight:500}
:root .toast.warn{background:#3a1218;color:#ffd5da;border-color:rgba(255,123,134,.35)}

/* ---------- 11b. Modal de novo lançamento ---------- */
:root #app .add-sheet{max-width:440px;border-radius:24px !important;border:1px solid var(--line) !important;
  box-shadow:0 30px 80px -24px rgba(9,23,31,.45) !important}
/* topo claro com um toque da cor do tipo (despesa/receita/transferência) */
:root #app .add-header,:root #app .add-header.tp-rec,:root #app .add-header.tp-transf{
  background:linear-gradient(180deg,color-mix(in srgb,var(--tp) 12%,var(--surface)) 0%,var(--surface) 100%);color:var(--txt);padding:16px 18px 4px}
:root #app .add-header{--tp:var(--red)}
:root #app .add-header.tp-rec{--tp:var(--mint)}
:root #app .add-header.tp-transf{--tp:var(--blue)}
:root #app .add-close{top:16px;right:16px;width:34px;height:34px;background:var(--surface-3);color:var(--txt-2);font-size:19px}
:root #app .add-close:hover{background:color-mix(in srgb,var(--txt) 12%,var(--surface));color:var(--txt)}
:root #app .add-seg{width:calc(100% - 46px);margin:0;padding:4px;border-radius:12px;background:var(--surface-3)}
:root #app .add-seg button{flex:1;padding:8px 0;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--txt-2)}
:root #app .add-seg button.on,:root #app .add-seg button.on.rec,:root #app .add-seg button.on.desp{background:var(--surface);color:var(--tp);
  box-shadow:0 1px 2px rgba(16,24,40,.1),0 1px 1px rgba(16,24,40,.04)}
:root #app .add-amount{margin:16px 0 8px;text-align:center}
:root #app #addVal.add-amount-in{color:var(--tp);text-align:center;font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1.15}
:root #app .add-body{padding:8px 18px 6px}
:root #app .add-body .mfield{margin-bottom:12px}
:root #app .add-body label.fl{margin-bottom:6px}
:root #app .tap-row{height:46px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
:root #app .tap-row:hover{border-color:color-mix(in srgb,var(--txt) 18%,var(--line))}
:root #app .tap-row .tap-row-icon .ico{width:28px;height:28px;padding:6px;border-radius:8px;background:color-mix(in srgb,currentColor 13%,transparent)}
:root #app .cat-pop-list{border-radius:0 0 12px 12px;box-shadow:var(--shadow-lg)}
:root #app .add-rec-toggle{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:14px}
/* teclado numérico com teclas arredondadas */
:root #app .add-keypad{gap:6px;padding:10px 14px 2px;background:transparent;border-top:1px solid var(--line-soft)}
:root #app .add-keypad button{height:44px;padding:0;border-radius:12px;background:var(--surface-2);font-size:20px;font-weight:550;color:var(--txt);
  transition:background-color .12s,transform .08s}
:root #app .add-keypad button:hover{background:var(--surface-3)}
:root #app .add-keypad button:active{transform:scale(.96);background:var(--surface-3)}
:root #app .add-keypad button.add-key-back{color:var(--txt-2)}
/* Correção: em telas baixas o botão "Adicionar" era espremido até ~22px de altura */
:root #app .add-header,:root #app #addSave{flex-shrink:0}
:root #app #addSave{width:calc(100% - 28px) !important;height:50px !important;margin:12px 14px 16px !important;border-radius:14px;font-size:15px}

/* ---------- 12. Tela de login ---------- */
:root #authBtn{background:var(--v-brand-grad);color:var(--v-brand-ink)}
:root #authScreen .auth-card::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v-brand) 85%,transparent),transparent)}
:root #authScreen .auth-orb.a{background:var(--v-brand)}
:root .auth-toggle{color:var(--mint)}

/* ---------- 13. Modo escuro ---------- */
:root[data-theme="dark"] #app header.top{background:color-mix(in srgb,var(--bg) 74%,transparent) !important}
:root[data-theme="dark"] #app .btn:not(.primary):not(.ghost){background:var(--surface-2);box-shadow:none}
:root[data-theme="dark"] #app .month-nav{background:var(--surface-2);box-shadow:none}
:root[data-theme="dark"] #app #saldoContasCard{
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(22,180,137,.30) 0%,rgba(22,180,137,0) 52%),
    linear-gradient(160deg,#143349 0%,#0f2434 60%,#0c1b28 100%) !important;
  border-color:rgba(154,245,212,.16) !important}
:root[data-theme="dark"] #app .vmb-pill.hit,:root[data-theme="dark"] #app .vmb-cmp-pill.up,:root[data-theme="dark"] #app .vgc-pill.down{color:#5fe3b9}
:root[data-theme="dark"] #app .vmb-pill.below{color:#f2c46b}
:root[data-theme="dark"] #app .vmb-cmp-pill.down,:root[data-theme="dark"] #app .vgc-pill.up{color:#ff9aa5}
:root[data-theme="dark"] #app #quickActions button:nth-child(1){background:color-mix(in srgb,var(--v-brand) 14%,var(--surface)) !important}
:root[data-theme="dark"] #app #quickActions button:nth-child(2){background:color-mix(in srgb,var(--red) 10%,var(--surface)) !important}
:root[data-theme="dark"] .toast{background:#16202a;border-color:var(--line)}

/* ---------- 14. Celular ---------- */
@media (max-width:760px){
  :root #app nav.tabs button{padding:10px 12px 12px;font-size:13px}
}
@media (max-width:680px){
  :root #app h1.ptitle{font-size:24px}
  :root #app .kpi .v{font-size:25px}
  :root #app #saldoContasCard{padding:18px 18px 8px !important}
  :root #app #saldoContasCard > div:first-child > span > span{font-size:24px}
  :root #app .add-sheet{border-radius:24px 24px 0 0 !important}
  :root #app .add-header::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;
    background:color-mix(in srgb,var(--txt) 18%,transparent)}
}

/* ---------- 15. Celular: calendário e lançamentos ---------- */
@media (max-width:680px){
  :root #app #page-lancamentos > div:first-child{flex-wrap:wrap}
  :root #app #page-lancamentos > div:first-child > button{flex:1 1 auto;justify-content:center;white-space:nowrap;font-size:13px !important;padding:10px 14px !important}
  :root #app #contaFiltroBar select{flex:1 1 140px;max-width:none !important}
  :root #app #filtroBuscaInput{flex:1 1 100% !important}
}
@media (max-width:520px){
  :root #app .mn-label{padding:0 4px;gap:0}
  :root #app .mn-arrow{width:28px}
}

/* ---------- 16. Fonte da marca: Plus Jakarta Sans (logo, títulos e números grandes) ---------- */
@font-face{font-family:'Velto Display';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/velto-jakarta.woff2') format('woff2')}
html:root{--v-font-display:'Velto Display','InterVariable','Inter',system-ui,-apple-system,sans-serif}
:root #app .brand .nm,:root #app h1.ptitle,:root #app .card-h h3,:root #app .kpi .v,:root #app .center-l .v,
:root #app #saldoContasCard > div:first-child > span > span,:root #authScreen .ab-nm,:root #authScreen h2,
:root .vr-auth-side .vas-brand,:root .vr-auth-side h1{font-family:var(--v-font-display) !important}
:root #app h1.ptitle{letter-spacing:-.03em}
:root #app .kpi .v,:root #app #saldoContasCard > div:first-child > span > span{letter-spacing:-.028em}

/* ---------- 17. Régua dos 4 potes ---------- */
:root #app .vr-strip{margin:4px 0 20px;padding:14px 16px 12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line-soft,var(--line))}
:root #app .vr-strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
:root #app .vr-strip-head span{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
:root #app .vr-strip-head b{font-size:13.5px;font-weight:650;color:var(--txt);letter-spacing:-.01em}
:root #app .vr-strip-bar{display:flex;gap:4px;height:14px}
:root #app .vr-seg{position:relative;flex:var(--w) 1 0;min-width:14px;border-radius:5px;overflow:hidden;
  background:color-mix(in srgb,var(--c) 20%,var(--surface))}
:root #app .vr-seg:first-child{border-radius:999px 5px 5px 999px}
:root #app .vr-seg:last-child{border-radius:5px 999px 999px 5px}
:root #app .vr-seg > i{position:absolute;inset:0 auto 0 0;width:var(--f);background:var(--c);border-radius:inherit;
  transition:width .7s cubic-bezier(.2,.8,.2,1)}
:root #app .vr-seg.over::after{content:"";position:absolute;top:0;right:0;bottom:0;width:4px;background:var(--red)}
:root #app .vr-strip-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px}
:root #app .vr-strip-leg span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2);white-space:nowrap}
:root #app .vr-strip-leg i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
:root #app .vr-strip-leg b{font-weight:650;color:var(--txt)}
:root #app .vr-strip-leg b.over{color:var(--red)}

/* ---------- 18. Mini-gráficos nos cards (últimos 6 meses) ---------- */
:root #app .kpi{position:relative}
:root #app .vr-spark{position:absolute;top:18px;right:18px;width:112px;color:var(--ac,var(--v-brand));pointer-events:auto}
:root #app .vr-spark svg{display:block;width:100%;height:auto;overflow:visible}
:root #app .vr-spark small{display:block;margin-top:3px;text-align:right;font-size:10.5px;font-weight:550;color:var(--txt-3);letter-spacing:.01em}
@media (max-width:680px){:root #app .vr-spark{width:92px;top:16px;right:16px}}

/* ---------- 19. Barra de abas no celular ---------- */
.vr-tabbar,.vr-sheet,.vr-sheet-bg{display:none}
@media (max-width:760px){
  :root body.vr-tb #app nav.tabs{display:none !important}
  :root body.vr-tb #app{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  :root .vr-tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;z-index:93;
    left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:66px;padding:0 6px;border-radius:24px;
    background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid color-mix(in srgb,var(--txt) 9%,transparent);box-shadow:0 14px 34px -14px rgba(12,31,44,.42),0 2px 6px rgba(12,31,44,.06)}
  :root body:has(#app[style*="none"]) .vr-tabbar{display:none}
  :root .vr-tabbar button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    height:54px;border-radius:16px;color:var(--txt-3);font-size:10.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:color .15s}
  :root .vr-tabbar button svg{width:22px;height:22px;flex:none}
  :root .vr-tabbar button.on{color:var(--txt)}
  :root .vr-tabbar button.on svg{color:var(--v-brand)}
  :root .vr-tabbar button:active{transform:scale(.96)}
  :root .vr-tabbar .vr-fab{justify-self:center;width:54px;height:54px;border-radius:19px;gap:0;color:var(--v-brand-ink);
    background:var(--v-brand-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px -8px rgba(22,180,137,.75)}
  :root .vr-tabbar .vr-fab svg{width:26px;height:26px;color:var(--v-brand-ink)}
  :root .vr-sheet-bg{display:block;position:fixed;inset:0;z-index:91;background:rgba(6,14,20,.4);opacity:0;pointer-events:none;transition:opacity .2s}
  :root .vr-sheet{display:block;position:fixed;z-index:92;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));
    padding:8px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);
    opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:opacity .18s,transform .18s}
  :root body.vr-sheet-open .vr-sheet-bg{opacity:1;pointer-events:auto}
  :root body.vr-sheet-open .vr-sheet{opacity:1;transform:none;pointer-events:auto}
  :root body.vr-sheet-open .vr-tabbar [data-more]{color:var(--txt)}
  :root body.vr-sheet-open .vr-tabbar [data-more] svg{color:var(--v-brand)}
  :root .vr-sheet button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:14px 14px;border-radius:14px;
    font-size:15px;font-weight:560;color:var(--txt);cursor:pointer}
  :root .vr-sheet button svg{width:20px;height:20px;color:var(--txt-2);flex:none}
  :root .vr-sheet button.on{background:var(--surface-2)}
  :root .vr-sheet button.on svg{color:var(--v-brand)}
}

/* ---------- 20. Login em duas colunas ---------- */
:root #authScreen .auth-orb,:root #authScreen .auth-grid{display:none}
:root #authScreen{background:radial-gradient(110% 55% at 50% -12%,color-mix(in srgb,var(--v-brand) 14%,transparent),transparent 62%),var(--bg)}
.vr-auth-side{display:none}
@media (max-width:520px){
  :root #authScreen{padding:12px 14px}
  :root #authScreen .auth-card{background:transparent !important;border:none !important;box-shadow:none !important;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:18px 6px}
  :root #authScreen .auth-card::before{display:none}
}
@media (min-width:960px){
  :root #authScreen[style*="flex"]{display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(460px,1fr);padding:0;
    align-items:center;justify-items:center;background:var(--bg)}
  :root #authScreen .vr-auth-side{display:flex;align-self:stretch;justify-self:stretch}
  :root #authScreen .auth-card{width:100%;max-width:400px;padding:28px 8px;background:transparent !important;border:none !important;
    box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
  :root #authScreen .auth-card::before{display:none}
  :root #authScreen .auth-brand{display:none}
  :root #authScreen .auth-card h2{font-size:30px;letter-spacing:-.035em}
}
.vr-auth-side{position:relative;overflow:hidden;flex-direction:column;justify-content:space-between;gap:40px;padding:44px 56px 40px;color:#eaf3f1;
  background:radial-gradient(90% 70% at 100% 0%,rgba(22,180,137,.34),rgba(22,180,137,0) 62%),
             radial-gradient(70% 60% at 0% 100%,rgba(47,111,214,.2),rgba(47,111,214,0) 60%),#0b1d2a}
.vr-auth-side .vas-wm{position:absolute;right:-70px;bottom:-60px;width:420px;height:420px;opacity:.07;pointer-events:none}
.vr-auth-side .vas-brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:700;letter-spacing:-.035em;color:#fff}
.vr-auth-side .vas-brand svg{width:34px;height:34px}
.vr-auth-side .vas-main{position:relative;max-width:520px}
.vr-auth-side .vas-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6ee7c0;margin-bottom:14px}
.vr-auth-side h1{font-size:46px;line-height:1.04;font-weight:750;letter-spacing:-.042em;color:#fff;margin:0 0 16px}
.vr-auth-side .vas-main > p{font-size:16px;line-height:1.55;color:#a9bcc6;margin:0 0 30px;max-width:440px}
.vr-auth-side .vas-card{max-width:460px;padding:18px 18px 15px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.vr-auth-side .vas-card-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:12px;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;color:#8fa6b1}
.vr-auth-side .vas-card-h b{font-size:14px;letter-spacing:-.01em;text-transform:none;color:#fff}
.vr-auth-side .vas-bar{display:flex;gap:4px;height:12px}
.vr-auth-side .vas-bar span{position:relative;flex:var(--w) 1 0;border-radius:4px;overflow:hidden;background:color-mix(in srgb,var(--c) 26%,#0b1d2a)}
.vr-auth-side .vas-bar span:first-child{border-radius:999px 4px 4px 999px}
.vr-auth-side .vas-bar span:last-child{border-radius:4px 999px 999px 4px}
.vr-auth-side .vas-bar span i{position:absolute;inset:0 auto 0 0;width:var(--f);background:var(--c);border-radius:inherit}
.vr-auth-side .vas-leg{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:13px}
.vr-auth-side .vas-leg span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c2d2d9;white-space:nowrap}
.vr-auth-side .vas-leg i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.vr-auth-side .vas-leg b{margin-left:auto;font-weight:650;color:#fff}
.vr-auth-side .vas-foot{position:relative;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:#8fa6b1}
.vr-auth-side .vas-foot span{display:inline-flex;align-items:center;gap:7px}
.vr-auth-side .vas-foot svg{width:15px;height:15px;color:#6ee7c0}

/* ---------- 21. Carregamento: esqueleto do painel no lugar do login piscando ---------- */
#authScreen:not([style]) > *{visibility:hidden}
html[data-vr-boot-timeout] #authScreen:not([style]) > *{visibility:visible}
.vr-boot{position:fixed;inset:0;z-index:301;background:var(--bg);overflow:hidden}
body:has(#authScreen[style]) .vr-boot:not(.force){display:none}
.vr-boot .vb-top{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;border-bottom:1px solid var(--line)}
.vr-boot .vb-wrap{max-width:1200px;margin:0 auto;padding:28px 24px}
.vr-boot .sk{border-radius:8px;background:linear-gradient(90deg,var(--sk1) 0%,var(--sk2) 50%,var(--sk1) 100%);background-size:220% 100%;
  animation:vrShimmer 1.3s ease-in-out infinite}
.vr-boot{--sk1:color-mix(in srgb,var(--txt) 7%,var(--surface));--sk2:color-mix(in srgb,var(--txt) 2.5%,var(--surface))}
.vr-boot .sk.navy{--sk1:#10283a;--sk2:#18384c;border-radius:20px}
.vr-boot .vb-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.vr-boot .vb-card .sk + .sk{margin-top:12px}
.vr-boot .sk.ring{width:150px;height:150px;margin:18px auto 6px;border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 55%,#000 56%);mask:radial-gradient(circle,transparent 55%,#000 56%)}
.vr-boot .vb-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.vr-boot .vb-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:680px){.vr-boot .vb-row{grid-template-columns:1fr}.vr-boot .vb-row2{grid-template-columns:1fr}.vr-boot .vb-wrap{padding:20px 16px}
  .vr-boot .vb-top{padding:0 16px}}
@keyframes vrShimmer{0%{background-position:100% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.vr-boot .sk{animation:none}}

/* ---------- 22. Pequenos acertos ---------- */
/* campo de % dos potes cortava "82.5" */
:root #app .pctchip input{width:76px;padding-left:8px;padding-right:8px;-moz-appearance:textfield}
:root #app .pctchip input::-webkit-inner-spin-button,:root #app .pctchip input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* potes no celular: o valor desce para a linha de baixo em vez de quebrar em duas */
@media (max-width:520px){
  :root #app #potesProgress .row-main .t{flex-wrap:wrap;row-gap:2px}
  :root #app #potesProgress .row-main .t .amt{flex:1 0 100%;text-align:left;font-size:13px;color:var(--txt-2)}
}