/* ===== VALORA DESIGN TOKENS (V3) ===== */
:root {
    --bg: #0B0910;            /* near-black premium */
    --bg-elev: #110E18;       /* topbar/sidebar */
    --surface: #16131F;       /* cards */
    --surface-2: #1E1A2A;     /* hover/inset */
    --border: rgba(255,255,255,0.06);
    --border-strong: rgba(255,255,255,0.12);
    --primary: #9D5CFF;
    --primary-bright: #C9A6F0;
    --text: #F4F2FA;
    --text-2: rgba(244,242,250,0.70);
    --text-3: rgba(244,242,250,0.46);
    --pop: #FF5EA8;
    --income: #2FD39A;
    --expense: #FF6B6B;
    --warn: #FFC24B;
    --radius: 16px;
    --radius-sm: 12px;
    --candy: linear-gradient(100deg, #9D5CFF, #FF5EA8);
    --ease-valora: cubic-bezier(.22,1,.36,1);  /* curva-assinatura do movimento Valora */
}

/* ===== BASE ===== */
html, body {
    font-family: 'Inter Tight', 'Figtree', 'Segoe UI', system-ui, Arial, sans-serif;
    letter-spacing: -0.01em;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Efeitos de fundo do tema antigo desativados (visual mais limpo). */
.bg-grid, .bg-glow, .bg-glow-1, .bg-glow-2 { display: none !important; }

/* ===== FOCUS / OUTLINE =====
   Bug: "linhas/contornos brancos ao redor dos títulos" — eram anéis de foco do
   navegador (outline branco = --text) que apareciam ao CLICAR em elementos/containers.
   Suprime o anel no foco por mouse e mantém um anel discreto (roxo) só no teclado (a11y). */
:focus:not(:focus-visible) { outline: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* Cabeçalhos nunca têm contorno/sombra/realce de texto. */
h1, h2, h3, .v-head h1, .v-head h2 { text-shadow: none; -webkit-text-stroke: 0; outline: none; }
/* O FocusOnNavigate dá foco no <h1> da tela ao navegar (acessibilidade). Como o título
   não é interativo, NÃO mostramos o anel roxo de :focus-visible nele — era o "quadro"
   que aparecia em volta do título da tela de login. */
h1:focus, h1:focus-visible, .auth-headline:focus, .auth-headline:focus-visible { outline: none !important; }

/* ===== APP LOGO ===== */
.app-logo-icon {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px; padding: 7px;
    display: flex; align-items: center; justify-content: center;
}
.date-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface); border: 0.5px solid var(--border);
    border-radius: 20px; padding: 4px 12px;
}

/* ===== CARDS (sólidos, sem blur/glow) ===== */
.glass-card {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    transition: border-color 0.2s ease !important;
}
.glass-card:hover { border-color: var(--border-strong) !important; }

/* Textos antes em gradiente agora são sólidos. */
.gradient-text { color: var(--text); }
.gradient-text-green { color: var(--income); }
.gradient-text-red { color: var(--expense); }

/* ===== STAT CARDS ===== */
.stat-card {
    background: var(--surface);
    border-radius: var(--radius); border: 0.5px solid var(--border);
    padding: 18px;
    transition: border-color 0.2s ease;
    cursor: default;
}
.stat-card:hover { border-color: var(--border-strong); }

/* ===== MONTH TABS (compactas, pílula) ===== */
.month-tab {
    background: var(--surface); border: 0.5px solid var(--border);
    border-radius: 999px; padding: 6px 14px; cursor: pointer;
    transition: all 0.15s ease; text-align: center;
}
.month-tab:hover { border-color: var(--border-strong); }
.month-tab.active {
    background: var(--candy); border-color: transparent;
}

/* ===== DRAWER NAV LINKS (item ativo em pílula degradê) ===== */
.mud-nav-link { border-radius: 10px !important; margin: 2px 10px !important; padding: 10px 13px !important; font-weight: 600 !important; color: var(--text-2) !important; transition: all 0.13s ease !important; position: relative; }
.mud-nav-link:hover { background: rgba(255,255,255,0.05) !important; color: var(--text) !important; }
.mud-nav-link.active {
    background: rgba(157,92,255,0.14) !important;
    color: #fff !important;
}
.mud-nav-link.active::before {
    content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--primary);
}
.mud-nav-link.active .mud-nav-link-icon { color: var(--primary-bright) !important; }

/* ===== MUD OVERRIDES ===== */
.mud-paper { background-color: var(--surface); }

.mud-dialog {
    background: var(--surface) !important;
    border: 0.5px solid var(--border-strong) !important;
    border-radius: 20px !important;
}

.mud-input-outlined-border { border-color: var(--border-strong) !important; }

/* Botões "pílula" (cara chiclete). */
.mud-button-root { border-radius: 999px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0; }
.mud-button-filled-primary { background: var(--candy) !important; color: #fff !important; }

.mud-progress-linear { border-radius: 99px !important; }
.mud-chip { font-weight: 500; }
.mud-snackbar { border-radius: 14px !important; }

.transaction-row:hover { background: rgba(255,255,255,0.03); }
.border-bottom-subtle { border-bottom: 0.5px solid var(--border); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* =====================================================================
   V3 — sistema de UI premium (denso, foco em dado, pouco gradiente)
   ===================================================================== */
.v-wrap { max-width: 980px; margin: 0 auto; }

/* Cabeçalho de seção: rótulo forte + ação à direita */
.v-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.v-sec h2 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.v-sec a, .v-sec .v-link { font-size: 0.8rem; color: var(--primary-bright); font-weight: 600; cursor: pointer; }

/* Cartão V3: hairline, denso, sem volume exagerado */
.v-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.v-card.pad { padding: 16px 18px; }
.v-card.hover { transition: border-color .15s ease, background .15s ease; }
.v-card.hover:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* Eyebrow / rótulos miúdos */
.v-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

/* Números grandes (saldo, métricas) — tipografia é o herói */
.v-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-weight: 800; color: var(--text); }
.v-num-xl { font-size: clamp(2.1rem, 6vw, 2.9rem); line-height: 1.05; }
.v-num-lg { font-size: 1.5rem; line-height: 1.1; }

/* Linha de lista densa (Spotify/Inter) */
.v-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.v-row + .v-row { border-top: 1px solid var(--border); }
.v-row .v-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.v-row .v-main { flex: 1; min-width: 0; }
.v-row .v-title { font-weight: 600; font-size: 0.92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-row .v-sub { font-size: 0.74rem; color: var(--text-3); }
.v-row .v-right { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.v-row.clickable { cursor: pointer; transition: background .12s ease; }
.v-row.clickable:hover { background: var(--surface-2); }
.v-chev { color: var(--text-3); font-size: 1.1rem; }

/* Pills / chips de status e categoria */
.v-pill { font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
.v-tag { font-size: 0.64rem; color: var(--text-3); background: rgba(255,255,255,0.05); border-radius: 6px; padding: 2px 7px; }

/* Barra empilhada (distribuição) */
.v-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.05); gap: 2px; }
.v-stack > span { height: 100%; }
.v-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.v-legend > div { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-2); }
.v-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* Ações rápidas compactas (não botões gigantes) */
.v-quick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.v-quick > button { flex: 1; min-width: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; transition: border-color .15s ease, background .15s ease; color: var(--text-2); }
.v-quick > button:hover { border-color: var(--border-strong); background: var(--surface-2); }
.v-quick .mud-icon-root { font-size: 1.25rem; }
.v-quick span { font-size: 0.72rem; font-weight: 600; }

/* Stat inline (rótulo em cima, número embaixo) */
.v-stat .v-eyebrow { display: block; margin-bottom: 3px; }

/* Divisor sutil */
.v-divide { height: 1px; background: var(--border); margin: 0; border: 0; }

/* Grid responsivo genérico */
.v-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .v-grid-2 { grid-template-columns: 1fr; } }

/* ===== AUTH (login/cadastro proprietário — cena centrada com o Anel do Destino) ===== */
.auth-scene {
    min-height: 100vh; padding: 40px 20px;
    display: flex; align-items: flex-start; justify-content: center;
    background: #0B0910;
    background-image:
        radial-gradient(900px 540px at 12% -10%, rgba(157,92,255,0.20), transparent 58%),
        radial-gradient(720px 540px at 108% 6%, rgba(255,94,168,0.12), transparent 56%),
        radial-gradient(700px 700px at 50% 120%, rgba(122,60,224,0.10), transparent 60%);
}
.auth-stage { width: 100%; max-width: 420px; text-align: center; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; }
.auth-wordmark { font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }

/* Anel do Destino — herói da marca, se monta com a curva-assinatura */
.auth-ring-wrap { position: relative; width: 108px; height: 108px; margin: 0 auto 14px; }
.auth-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(#FF6B6B 0 180deg, #FFCB57 180deg 288deg, #3DE0A0 288deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 34px, #000 35px);
            mask: radial-gradient(circle, transparent 0 34px, #000 35px);
    animation: v-ring-assemble .7s var(--ease-valora) both;
}
.anel-destino { width: 100%; height: 100%; display: block; animation: v-ring-assemble .7s var(--ease-valora) both; }
@media (prefers-reduced-motion: reduce) { .anel-destino { animation: none; } }
.auth-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.auth-ring-num { font-size: 18px; font-weight: 800; color: var(--text); }
.auth-ring-sub { font-size: 9.5px; font-weight: 600; color: var(--text-3); margin-top: 3px; letter-spacing: 0.06em; }

.auth-tagline { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--text); }
.auth-tagsub { font-size: 0.9rem; color: var(--text-3); margin: 5px 0 22px; }

.auth-card {
    text-align: left; background: rgba(30,24,48,0.55); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 22px 22px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@media (prefers-reduced-motion: reduce) { .auth-ring { animation: none; } }

/* Segmented Entrar / Criar conta (navega entre as duas telas) */
.auth-seg { display: flex; background: rgba(255,255,255,0.06); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.auth-seg a { flex: 1; text-align: center; padding: 9px 0; font-size: 0.82rem; font-weight: 700; border-radius: 999px; text-decoration: none; color: var(--text-3); transition: background .15s ease, color .15s ease; }
.auth-seg a.on { background: var(--candy); color: #fff; box-shadow: 0 6px 16px rgba(157,92,255,0.30); animation: auth-seg-pop .26s cubic-bezier(.34,1.56,.64,1); }
.auth-seg a:not(.on):hover { color: var(--text-2); }
@keyframes auth-seg-pop { from { transform: scale(.92); } to { transform: scale(1); } }

/* Formulário (reaproveitado pelas telas de auth) */
.auth-form { width: 100%; }
/* Entrada suave ao trocar entre Entrar / Criar conta (cada toca = nova rota) */
.auth-form-body { animation: auth-form-in .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes auth-form-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .auth-form-body { animation: none; }
    .auth-seg a.on { animation: none; }
}
.auth-title { font-size: 1.08rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin: 0 0 3px; }
.auth-sub { color: var(--text-3); font-size: 0.85rem; margin: 0 0 16px; }
.auth-btn-primary {
    width: 100%; margin-top: 18px; border: none; cursor: pointer;
    background: var(--candy); color: #fff; font-weight: 700; font-size: 0.95rem;
    border-radius: 13px; padding: 13px; display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 10px 24px rgba(157,92,255,0.32); transition: filter .15s ease, transform .05s ease;
}
.auth-btn-primary:hover { filter: brightness(1.06); }
.auth-btn-primary:active { transform: translateY(1px); }
.auth-btn-primary:disabled { opacity: 0.7; cursor: default; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-3); font-size: 0.78rem; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.auth-btn-social {
    width: 100%; margin-bottom: 10px; cursor: pointer; background: transparent;
    border: 1px solid var(--border-strong); color: var(--text); font-weight: 600; font-size: 0.9rem;
    border-radius: 13px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.auth-btn-social:hover { border-color: var(--primary); background: rgba(255,255,255,0.04); }
.auth-foot { text-align: center; color: var(--text-3); font-size: 0.85rem; margin-top: 16px; }

/* Reaproveitado por telas simples de auth (recuperação/confirmação) */
.login-wrap { width: 100%; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
@media (max-width: 480px) {
    .auth-scene { padding: 26px 14px; }
    .auth-card { padding: 18px 16px; }
}

/* ===== BOTTOM NAV (mobile) ===== */
.bottom-nav { display: none; }
@media (max-width: 900px) {
    .bottom-nav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1400;
        background: var(--surface); border-top: 0.5px solid var(--border);
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center;
    }
    .mud-main-content { padding-bottom: 86px !important; }
    .v-content { padding-bottom: 92px !important; }
}
.bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255,255,255,0.45); cursor: pointer; font-size: 0.62rem; font-weight: 500; }
.bn-item.active { color: var(--primary-bright); }
.bn-item .mud-icon-root { font-size: 1.3rem; }
.bn-fab {
    width: 48px; height: 48px; border-radius: 50%; background: var(--candy);
    display: flex; align-items: center; justify-content: center; margin-top: -24px;
    box-shadow: 0 6px 16px rgba(157,92,255,0.45); cursor: pointer; flex-shrink: 0;
}

/* ---- Sheet "Mais" do bottom-nav (acesso a Distribuição/Central/Perfil no mobile) ---- */
.v-more-backdrop { position: fixed; inset: 0; z-index: 1450; background: rgba(8,6,14,0.5); }
.v-more-sheet {
    position: fixed; left: 10px; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 1460;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px;
    padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.55); animation: v-notif-pop .14s ease;
}
.v-more-item { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 12px; color: var(--text-2); cursor: pointer; font-weight: 600; font-size: 0.94rem; }
.v-more-item:hover, .v-more-item:active { background: var(--surface-2); color: var(--text); }
.v-more-item .mud-icon-root { font-size: 1.3rem; color: var(--primary-bright); }
.v-more-item + .v-more-item { border-top: 1px solid var(--border); }

/* ===== LEGAL (Privacidade & Termos) — layout premium ===== */
.legal-shell { max-width: 880px; margin: 0 auto; padding: 22px 20px 90px; }
.legal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.legal-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--text); }
.legal-hero { text-align: center; padding: 30px 0 26px; position: relative; }
.legal-eyebrow { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; color: var(--primary-bright); }
.legal-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 12px; line-height: 1.12; color: var(--text); }
.legal-hero h1 span { background: var(--candy); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.legal-hero p { color: var(--text-3); max-width: 540px; margin: 0 auto; font-size: 0.96rem; line-height: 1.6; }
.legal-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.legal-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; }
.legal-chip .mud-icon-root { color: var(--primary-bright); }
.legal-seg { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 5px; width: fit-content; margin: 6px auto 26px; }
.legal-seg button { border: none; background: transparent; color: var(--text-3); font-weight: 700; font-size: 0.9rem; padding: 9px 24px; border-radius: 10px; cursor: pointer; transition: color .15s ease, background .15s ease; }
.legal-seg button.on { background: var(--candy); color: #fff; box-shadow: 0 6px 16px rgba(157,92,255,0.3); }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .legal-grid { grid-template-columns: 1fr; } }
.legal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; transition: border-color .15s ease, transform .15s ease; }
.legal-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.legal-card-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(157,92,255,0.14); border: 1px solid rgba(157,92,255,0.25); margin-bottom: 13px; }
.legal-card-ico .mud-icon-root { color: var(--primary-bright); font-size: 1.3rem; }
.legal-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.legal-card p { font-size: 0.86rem; color: var(--text-2); line-height: 1.55; margin: 0; }
.legal-contact { margin-top: 22px; background: linear-gradient(135deg, rgba(157,92,255,0.12), rgba(255,94,168,0.08)); border: 1px solid rgba(157,92,255,0.25); border-radius: 16px; padding: 20px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.legal-contact > .mud-icon-root { font-size: 1.9rem; color: var(--primary-bright); flex-shrink: 0; }
.legal-back { margin: 30px auto 0; }

/* ===== MODAL de Privacidade & Termos (aberto no cadastro, sem navegar) ===== */
.legal-modal-backdrop { position: fixed; inset: 0; z-index: 3500; background: rgba(8,6,14,0.74); display: flex; align-items: center; justify-content: center; padding: 18px; animation: welcome-fade .2s ease; }
.legal-modal { width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: #181323; border: 1px solid var(--border-strong); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); animation: welcome-pop .25s cubic-bezier(.22,1,.36,1); }
.legal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.legal-modal-head .legal-seg { margin: 0; }
.legal-modal-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.legal-modal-x:hover { color: var(--text); border-color: var(--border-strong); }
.legal-modal-body { padding: 8px 18px 18px; overflow-y: auto; }
.legal-mini { display: flex; gap: 12px; padding: 13px 0; }
.legal-mini + .legal-mini { border-top: 1px solid var(--border); }
.legal-mini-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: rgba(157,92,255,0.14); border: 1px solid rgba(157,92,255,0.25); }
.legal-mini-ico .mud-icon-root { color: var(--primary-bright); font-size: 1.2rem; }
.legal-mini h4 { margin: 0 0 3px; font-size: 0.92rem; font-weight: 700; color: var(--text); }
.legal-mini p { margin: 0; font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }
.legal-modal-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--text-3); text-align: center; }
.legal-modal-foot a { color: var(--primary-bright); }
.legal-link { color: #C9A6F0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.legal-link:hover { color: #fff; }

/* ===== Cadastro compacto (sem scroll) ===== */
.auth-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.auth-fields .full { grid-column: 1 / -1; }
.auth-hint { font-size: 0.7rem; color: var(--text-3); margin: 4px 2px 0; }
.auth-check { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; }
.auth-check > span { font-size: 0.78rem; color: rgba(255,255,255,0.62); line-height: 1.4; margin-top: 9px; }

/* ===== POP-UP DE BOAS-VINDAS ===== */
.welcome-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(8, 6, 14, 0.72);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: welcome-fade 0.25s ease;
}
.welcome-card {
    width: 100%; max-width: 440px; border-radius: 22px; overflow: hidden;
    background: #1E1830; border: 1px solid rgba(157, 92, 255, 0.25);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    animation: welcome-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.welcome-head {
    background: linear-gradient(135deg, #9D5CFF, #7A3CE0 55%, #FF5EA8 130%);
    padding: 26px 26px 22px; text-align: center;
}
.welcome-body { padding: 22px 26px 26px; }
.welcome-benefit {
    display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.7); font-size: 0.86rem; line-height: 1.4;
}
.welcome-benefit span { font-size: 1.25rem; line-height: 1; }
.welcome-benefit b { color: #F3EFFA; font-weight: 700; }
.welcome-thanks {
    background: rgba(157, 92, 255, 0.1); border-radius: 12px; padding: 12px 14px;
    font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); line-height: 1.5; margin: 6px 0 16px;
}
.welcome-thanks b { color: #C9A6F0; }
@keyframes welcome-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcome-pop { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Onboarding: o Anel 50/30/20 (objeto da marca) "ganha vida" no welcome. */
.welcome-ring-wrap { position: relative; width: 104px; height: 104px; margin: 0 auto 2px; }
.welcome-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(#FF6B6B 0 180deg, #FFCB57 180deg 288deg, #3DE0A0 288deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 31px, #000 32px);
            mask: radial-gradient(circle, transparent 0 31px, #000 32px);
    animation: v-ring-assemble .7s var(--ease-valora) both;
}
.welcome-ring-logo { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
    animation: welcome-fade .5s ease .35s both; }
/* Benefícios revelam em sequência (sensação cinematográfica). */
.welcome-benefit { animation: v-rise .45s var(--ease-valora) both; }
.welcome-benefit:nth-of-type(1) { animation-delay: .30s; }
.welcome-benefit:nth-of-type(2) { animation-delay: .42s; }
.welcome-benefit:nth-of-type(3) { animation-delay: .54s; }
.welcome-benefit:nth-of-type(4) { animation-delay: .66s; }
@media (prefers-reduced-motion: reduce) {
    .welcome-ring, .welcome-ring-logo, .welcome-benefit { animation: none; }
}

/* ===== SPLASH / LOADING ===== */
#app-splash {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 26px;
    background: var(--bg); z-index: 2000;
}
.splash-logo {
    position: relative;
    width: 80px; height: 80px; border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    animation: splash-pulse 1.8s ease-in-out infinite;
}
.splash-logo::before {
    content: ''; position: absolute; inset: -12px; border-radius: 30px; z-index: -1;
    background: radial-gradient(circle, rgba(157,92,255,0.55), transparent 70%);
    animation: splash-ring 1.8s ease-in-out infinite;
}
.splash-logo svg { width: 40px; height: 40px; fill: #fff; position: relative; z-index: 1; }
/* Brilho diagonal que varre o logo (novo). */
.splash-logo::after {
    content: ''; position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: splash-shimmer 2.2s ease-in-out infinite;
}
@keyframes splash-shimmer {
    0% { background-position: 150% 0; }
    60%, 100% { background-position: -150% 0; }
}
@keyframes splash-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
/* Etapas do método que acendem em sequência (novo). */
.splash-steps { display: flex; gap: 8px; margin-top: 2px; }
.splash-step {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.3px;
    color: var(--text-3); padding: 4px 10px; border-radius: 99px;
    background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.06);
    opacity: 0.4; animation: splash-step-glow 3.6s ease-in-out infinite;
}
.splash-step:nth-child(1) { animation-delay: 0s; }
.splash-step:nth-child(2) { animation-delay: 1.2s; }
.splash-step:nth-child(3) { animation-delay: 2.4s; }
@keyframes splash-step-glow {
    0%, 75%, 100% { opacity: 0.4; color: var(--text-3); border-color: rgba(255,255,255,0.06); transform: translateY(0); }
    25%, 50% { opacity: 1; color: var(--text); border-color: rgba(157,92,255,0.5); transform: translateY(-2px); }
}
@keyframes splash-ring {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50% { transform: scale(1.3); opacity: 0.85; }
}
.splash-title { font-weight: 800; font-size: 1.7rem; letter-spacing: -0.3px; color: var(--text); line-height: 1.1; }
.splash-sub { font-size: 0.6rem; letter-spacing: 2.5px; color: var(--text-3); margin-top: 6px; }
.splash-bar {
    width: 220px; height: 6px; border-radius: 99px;
    background: rgba(255,255,255,0.08); overflow: hidden;
}
.splash-bar-fill {
    height: 100%; border-radius: 99px;
    width: var(--blazor-load-percentage, 0%);
    background: var(--primary-bright);
    transition: width 0.2s ease-in-out;
}
.splash-message {
    font-size: 0.82rem; color: var(--text-2);
    min-height: 1.2em; transition: opacity 0.4s ease;
}
.splash-percent { font-size: 0.7rem; color: var(--text-3); font-weight: 600; }
.splash-percent:after { content: var(--blazor-load-percentage-text, "0%"); }

#blazor-error-ui { background: var(--surface); border-top: 0.5px solid var(--border-strong); bottom: 0; box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: rgba(255,255,255,0.9); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* =====================================================================
   V4 — Shell premium (rail de ícones estilo Linear/Arc/Stripe) + telas
   ===================================================================== */
:root { --rail-w: 76px; --topbar-h: 68px; }

/* ---- Shell ---- */
.v-shell { min-height: 100vh; background: var(--bg); }
.v-content { margin-left: var(--rail-w); min-height: 100vh; display: flex; flex-direction: column; }
.v-page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 8px 34px 56px; }

/* ---- Rail (sidebar estreita só de ícones) ---- */
.v-rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 1300;
    background: var(--bg-elev); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 0 16px;
}
.v-rail-logo {
    width: 44px; height: 44px; border-radius: 13px; background: transparent;
    display: grid; place-items: center; flex-shrink: 0;
}
.v-rail-logo svg { width: 32px; height: 32px; }
.v-rail-nav { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; width: 100%; }
.v-rail-item {
    position: relative; width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center; cursor: pointer; color: var(--text-3);
    transition: color .15s ease, background .15s ease, box-shadow .2s ease; border: none; background: transparent;
}
.v-rail-item .mud-icon-root { font-size: 1.35rem; }
.v-rail-item:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.v-rail-item.active {
    color: var(--primary-bright); background: rgba(157,92,255,0.16);
    box-shadow: 0 0 0 1px rgba(157,92,255,0.22), 0 8px 22px rgba(157,92,255,0.28);
}
/* indicador lateral do item ativo */
.v-rail-item.active::before {
    content: ''; position: absolute; left: -16px; top: 11px; bottom: 11px; width: 3px;
    border-radius: 0 4px 4px 0; background: var(--candy);
}
/* tooltip no hover (label só aparece ao passar o mouse) */
.v-rail-item[data-label]::after {
    content: attr(data-label); position: absolute; left: 56px; top: 50%; transform: translateY(-50%) translateX(-4px);
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
    font-size: 0.76rem; font-weight: 600; white-space: nowrap; padding: 5px 10px; border-radius: 9px;
    opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 1400;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.v-rail-item:hover[data-label]::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.v-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.v-rail-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(157,92,255,0.18);
    color: var(--primary-bright); display: grid; place-items: center; font-weight: 800; font-size: 0.92rem;
    cursor: pointer; border: 1px solid var(--border); text-decoration: none;
}
.v-rail-avatar:hover { background: rgba(157,92,255,0.3); color: #fff; }

/* ---- Topbar slim ---- */
.v-topbar {
    height: var(--topbar-h); display: flex; align-items: center; gap: 12px;
    padding: 0 34px; position: sticky; top: 0; z-index: 1100;
    background: rgba(11,9,16,0.72); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.v-cur-switch { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; }
.v-cur-switch > div { cursor: pointer; padding: 5px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-3); transition: .12s; }
.v-cur-switch > div.on { background: var(--primary); color: #fff; font-weight: 700; }
.v-icon-btn {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-2); cursor: pointer;
    transition: border-color .15s ease, color .15s ease; position: relative; text-decoration: none;
}
.v-icon-btn:hover { border-color: var(--border-strong); color: var(--text); }
.v-icon-btn .v-dot-badge { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--pop); }

/* ---- Painel de notificações (dropdown do sino) ---- */
.v-notif-wrap { position: relative; }
.v-notif-badge {
    position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--pop); color: #fff; font-size: 0.62rem; font-weight: 800;
    display: grid; place-items: center; border: 2px solid var(--bg-elev);
}
.v-notif-backdrop { position: fixed; inset: 0; z-index: 1490; }
.v-notif-panel {
    position: absolute; top: 50px; right: 0; width: 360px; max-width: 92vw; z-index: 1500;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55); animation: v-notif-pop .14s ease;
}
@keyframes v-notif-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.v-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.v-notif-head span { font-weight: 700; color: var(--text); }
.v-notif-head a { font-size: 0.78rem; color: var(--primary-bright); cursor: pointer; }
.v-notif-list { max-height: 60vh; overflow-y: auto; }
.v-notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.86rem; }
.v-notif-item { display: flex; gap: 11px; align-items: flex-start; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s ease; }
.v-notif-item:hover { background: var(--surface-2); }
.v-notif-item.unread { background: rgba(157,92,255,0.06); }
.v-notif-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.v-notif-title { font-size: 0.86rem; font-weight: 700; color: var(--text); }
.v-notif-msg { font-size: 0.78rem; color: var(--text-2); line-height: 1.35; }
.v-notif-time { font-size: 0.68rem; color: var(--text-3); margin-top: 3px; }
.v-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; }
@media (max-width: 900px) { .v-notif-panel { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; } }

/* ---- Hero da Dashboard ---- */
.v-hero { display: grid; grid-template-columns: minmax(0,1fr) 1.05fr; gap: 0; padding: 0; overflow: hidden; }
.v-hero-left { padding: 26px 28px; }
.v-hero-right { padding: 26px 28px; border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.v-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.v-delta.up { color: var(--income); background: rgba(47,211,154,0.12); }
.v-delta.down { color: var(--expense); background: rgba(255,107,107,0.12); }
.v-hero-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.v-btn { border-radius: 12px; font-weight: 700; font-size: 0.86rem; padding: 10px 18px; cursor: pointer; border: 1px solid var(--border-strong); background: transparent; color: var(--text); display: inline-flex; align-items: center; gap: 7px; transition: .15s; text-decoration: none; }
.v-btn:hover { border-color: var(--primary); }
.v-btn.primary { background: var(--candy); border: none; color: #fff; box-shadow: 0 8px 20px rgba(157,92,255,0.32); }
/* Variantes da biblioteca própria (VButton) */
.v-btn-ghost { border-color: transparent; background: transparent; }
.v-btn-ghost:hover { border-color: transparent; background: rgba(255,255,255,0.06); }
.v-btn-danger { border-color: rgba(255,107,107,0.5); color: var(--expense); }
.v-btn-danger:hover { border-color: var(--expense); background: rgba(255,107,107,0.08); }
.v-btn-success { background: var(--income); border: none; color: #06241A; box-shadow: 0 8px 20px rgba(47,211,154,0.28); }
.v-btn-success:hover { filter: brightness(1.05); }
.v-btn-block { width: 100%; justify-content: center; }
.v-btn:disabled { opacity: 0.6; cursor: default; }
.v-btn .material-icons { font-size: 1.05rem; }
.v-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: v-spin .6s linear infinite; }
@keyframes v-spin { to { transform: rotate(360deg); } }
.v-spark-wrap { position: relative; flex: 1; min-width: 150px; max-width: 280px; }
.v-spark { width: 100%; max-width: 260px; height: auto; display: block; }
.v-spark path.line { fill: none; stroke: var(--primary-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.v-spark path.area { fill: url(#vspark); }
.v-spark-cross { stroke: rgba(255,255,255,0.25); stroke-width: 1; stroke-dasharray: 3 3; }
.v-spark-dot { fill: var(--primary-bright); stroke: var(--bg); stroke-width: 2; }
.v-spark-tip {
    position: absolute; top: -6px; transform: translateX(-50%);
    background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 9px;
    padding: 4px 9px; pointer-events: none; white-space: nowrap; z-index: 3;
    box-shadow: 0 8px 22px rgba(0,0,0,0.5); display: flex; flex-direction: column; line-height: 1.2;
}
.v-spark-tip b { font-size: 0.78rem; color: var(--text); font-variant-numeric: tabular-nums; }
.v-spark-tip span { font-size: 0.62rem; color: var(--text-3); }

/* ---- Anel circular (score / taxa de patrimônio) ---- */
.v-ring { position: relative; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.v-ring::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.v-ring .v-ring-in { position: relative; z-index: 1; text-align: center; line-height: 1.05; }
.v-ring .v-ring-num { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text); }
.v-ring .v-ring-sub { font-size: 0.62rem; color: var(--text-3); font-weight: 600; }

/* ---- Barras do score (ícone + label + trilho + %) ---- */
.v-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.v-bar { display: grid; grid-template-columns: 18px 92px 1fr 42px; align-items: center; gap: 9px; }
.v-bar .v-bar-ico { font-size: 1rem; }
.v-bar .v-bar-label { font-size: 0.8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-bar .v-bar-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.v-bar .v-bar-fill { height: 100%; border-radius: 999px; }
.v-bar .v-bar-val { font-size: 0.78rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* Gráfico de projeção dos cards de meta */
.v-goal-chart { width: 100%; height: 78px; display: block; }

/* ---- Card de meta (estilo app de investimento) ---- */
.v-goal { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; }
.v-goal + .v-goal { border-top: 1px solid var(--border); }
.v-goal-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.2rem; }
.v-goal-main { flex: 1; min-width: 0; }
.v-goal-name { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.v-goal-vals { font-size: 0.76rem; color: var(--text-3); margin: 2px 0 8px; }
.v-goal-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.v-goal-bar > span { display: block; height: 100%; border-radius: 999px; }
.v-goal-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.72rem; }

/* ---- Card "Próxima ação" ---- */
.v-action { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px; }
.v-action-ico { width: 56px; height: 56px; border-radius: 16px; background: rgba(157,92,255,0.16); display: grid; place-items: center; margin-bottom: 4px; }
.v-action .v-num { font-size: 1.7rem; }

/* ---- Banda "Próxima ação" (herói de ação: o app diz o próximo passo) ---- */
.v-next { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 18px;
    background: linear-gradient(120deg, rgba(157,92,255,0.13), rgba(255,94,168,0.06)); }
.v-next-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; }
.v-next-main { flex: 1; min-width: 0; }
.v-next-cta { flex-shrink: 0; }
@media (max-width: 560px) {
    .v-next { flex-wrap: wrap; }
    .v-next-cta { width: 100%; }
    .v-next-cta .v-btn { width: 100%; justify-content: center; }
}

/* ---- Inputs nativos estilizados (des-materializa date/time pickers Material) ---- */
.v-field-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
@media (max-width: 480px) { .v-field-grid { grid-template-columns: 1fr; } }
.v-field-label { display: block; font-size: 0.78rem; color: var(--text-2); font-weight: 600; margin-bottom: 6px; }
.v-field {
    width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: 11px; padding: 10px 12px; color: var(--text); font-size: 0.9rem;
    font-family: inherit; outline: none; color-scheme: dark; box-sizing: border-box;
    transition: border-color .12s ease;
}
.v-field:focus { border-color: var(--primary); }
.v-field::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

/* ---- Categoria como chips tocáveis (des-materializa o MudSelect) ---- */
.cat-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cat-pick-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 11px;
    background: var(--surface-2); border: 1px solid var(--border-strong); cursor: pointer;
    font-size: 0.84rem; font-weight: 600; color: var(--text-2);
    transition: border-color .12s ease, background .12s ease, color .12s ease, transform .06s ease; }
.cat-pick-item:hover { border-color: var(--text-3); }
.cat-pick-item:active { transform: translateY(1px); }
.cat-pick-item .material-icons { font-size: 17px; }

/* ---- Chip de atalho de teclado ---- */
.v-kbd { font-size: 0.72rem; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 9px; font-family: ui-monospace, monospace; }

/* ---- Abas da Central (respiro entre a barra de abas e o conteúdo) ---- */
.v-central-tabs { margin-top: 18px; }
.v-central-tabs .mud-tabs-tabbar { border-radius: 14px; margin-bottom: 20px; }
.v-central-tabs .mud-tabs-panels { padding-top: 2px; }
.v-central-tabs .mud-tab-panel > .v-sec:first-child,
.v-central-tabs .mud-tab-panel > *:first-child { margin-top: 0; }

/* ---- Grids ---- */
.v-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 920px) { .v-grid-3 { grid-template-columns: 1fr; } }

/* ---- Header de página padrão ---- */
.v-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.v-head h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 0; }
.v-head p { color: var(--text-3); font-size: 0.88rem; margin: 2px 0 0; }
.v-monthchip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 14px; }
.v-monthchip .nav-btn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text-3); }
.v-monthchip .nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* ---- Responsivo: some o rail no mobile (bottom-nav assume); topbar fica
   compacta só com o switch de moeda + sair, pra não perder a troca de moeda ---- */
@media (max-width: 900px) {
    .v-rail { display: none; }
    .v-content { margin-left: 0; }
    .v-topbar { padding: 0 16px; gap: 8px; height: 58px; }
    .v-topbar .v-mobile-logo { display: flex; }
    .v-topbar .date-chip, .v-topbar .v-topbar-bell { display: none !important; }
    .v-page { padding: 14px 16px 92px; }
    .v-hero { grid-template-columns: 1fr; }
    .v-hero-right { border-left: none; border-top: 1px solid var(--border); }
}
/* Logo mostrado só na topbar mobile (no desktop o logo vive no rail) */
.v-mobile-logo { display: none; align-items: center; gap: 8px; }
.v-mobile-logo .v-rail-logo { width: 34px; height: 34px; border-radius: 11px; box-shadow: none; }
.v-mobile-logo .v-rail-logo svg { width: 18px; height: 18px; }

/* =====================================================================
   LANÇAMENTOS — resumo, filtros, busca, totais, timeline, modal
   ===================================================================== */
.sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.sum-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.sum-card .v-eyebrow { display: block; margin-bottom: 5px; }
.sum-card .v-num { font-size: 1.25rem; }
@media (max-width: 760px) { .sum-grid { grid-template-columns: 1fr 1fr; } }

.insight-card { display: flex; gap: 13px; align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.insight-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.insight-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.insight-text { font-size: 0.9rem; color: var(--text); line-height: 1.45; }

.tx-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tx-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; }
.tx-seg > div { cursor: pointer; padding: 6px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-3); transition: .12s; white-space: nowrap; }
.tx-seg > div.on { background: var(--candy); color: #fff; font-weight: 700; }

.tx-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 13px; margin-bottom: 10px; }
.tx-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 0.9rem; font-family: inherit; }
.tx-search input::placeholder { color: var(--text-3); }
.tx-search-clear { cursor: pointer; color: var(--text-3); display: grid; place-items: center; }
.tx-search-clear:hover { color: var(--text); }

.tx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
/* Mobile: enxugar Lançamentos — menos blocos antes da lista (sem tocar desktop) */
@media (max-width: 600px) {
    .tx-chips { display: none; }
    .sum-card { padding: 10px 12px; }
    .sum-card .v-num { font-size: 1.05rem; }
    .insight-card { padding: 11px 13px; gap: 10px; }
}
.tx-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; transition: .12s; }
.tx-chip:hover { border-color: var(--border-strong); }
.tx-chip.on { font-weight: 700; }

.tot-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.tot-row { display: flex; align-items: center; gap: 12px; }
.tot-row .tot-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.tot-row .tot-bar > span { display: block; height: 100%; border-radius: 999px; }
.tot-row .tot-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.86rem; color: var(--text); min-width: 92px; text-align: right; }

.cat-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 600; border-radius: 7px; padding: 2px 8px; white-space: nowrap; }
.cat-badge .cat-badge-ico { font-size: 13px !important; }

.tl-group { margin-top: 4px; }
.tl-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 6px; }
.tl-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; transition: background .12s ease; }
.tl-item:hover { background: var(--surface); }
.tl-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.tl-main { flex: 1; min-width: 0; }
.tl-desc { font-weight: 600; font-size: 0.92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tl-time { font-size: 0.72rem; color: var(--text-3); }
.tl-amount { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.98rem; flex-shrink: 0; }
.tl-actions { display: flex; opacity: 0; transition: opacity .12s ease; flex-shrink: 0; }
.tl-item:hover .tl-actions { opacity: 1; }
@media (max-width: 700px) { .tl-actions { opacity: 1; } }

.nl-box { background: linear-gradient(135deg, rgba(157,92,255,0.10), rgba(255,94,168,0.06)); border: 1px solid rgba(157,92,255,0.25); border-radius: 13px; padding: 11px 13px; margin-bottom: 16px; }
.nl-label { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; color: var(--primary-bright); margin-bottom: 7px; }
.nl-row { display: flex; gap: 8px; }
.nl-row input { flex: 1; min-width: 0; background: rgba(0,0,0,0.25); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 0.88rem; font-family: inherit; outline: none; }
.nl-row input::placeholder { color: var(--text-3); }
.nl-btn { border: none; background: var(--candy); color: #fff; font-weight: 700; font-size: 0.84rem; border-radius: 10px; padding: 0 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 92px; }
.nl-btn:disabled { opacity: 0.7; }
.nl-amount .mud-input-slot input { font-size: 1.25rem !important; font-weight: 700 !important; }
/* Chip de confirmação do parser: mostra o que o app entendeu (reforça a "mágica" e a confiança). */
.nl-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px;
    font-size: 0.82rem; color: var(--text-2); animation: nl-chip-in .28s ease both; }
.nl-chip-ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--income); }
.nl-chip-sep { color: var(--text-3); }
.nl-chip-val { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
@keyframes nl-chip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.more-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--primary-bright); font-weight: 600; font-size: 0.86rem; padding: 6px 0; user-select: none; }

/* ===== Skeleton loading (shimmer) ===== */
.sk-wrap { animation: sk-fade .2s ease; }
.sk { background: linear-gradient(90deg, rgba(255,255,255,0.045) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.045) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; border-radius: 12px; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }
.sk-hero { height: 120px; margin-bottom: 14px; }
.sk-grid { display: grid; gap: 12px; margin-bottom: 14px; }
@media (max-width: 760px) { .sk-grid { grid-template-columns: 1fr 1fr !important; } }
.sk-card { height: 86px; }
.sk-row { height: 56px; margin-top: 10px; }

/* ===== Microinterações + profundidade (discretas) ===== */
.sum-card, .insight-card, .legal-card { transition: border-color .15s ease, transform .14s ease, box-shadow .2s ease; }
.sum-card:hover, .insight-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.28); }
.nl-btn { transition: filter .15s ease, transform .06s ease; }
.nl-btn:hover:not(:disabled) { filter: brightness(1.06); }
.nl-btn:active:not(:disabled) { transform: translateY(1px); }
.tx-chip:active, .tx-seg > div:active { transform: translateY(1px); }

/* ===== Profundidade (menos flat, sem neon) ===== */
.v-card, .sum-card { box-shadow: 0 1px 2px rgba(0,0,0,0.22); }
.v-hero { box-shadow: 0 12px 32px rgba(0,0,0,0.34); }
.v-card.hover:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.32); transform: translateY(-1px); }

/* Card de destaque — "Próxima ação" como ação recomendada do Dashboard */
.v-card-accent { position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(157,92,255,0.12), rgba(255,94,168,0.05) 72%), var(--surface);
    border-color: rgba(157,92,255,0.35); box-shadow: 0 12px 32px rgba(157,92,255,0.16); }
.v-card-accent::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--candy); }

/* =====================================================================
   V5 — Atmosfera, profundidade e movimento (premium)
   ===================================================================== */

/* 1) Atmosfera: luz suave atrás de tudo (radiais sobre o fundo base).
   A luz principal usa --mood, que muda sutilmente conforme o Score (ver .mood-*). */
.v-shell, .auth-split {
    background:
        radial-gradient(1000px 680px at 10% -8%, var(--mood, rgba(157,92,255,0.16)), transparent 58%),
        radial-gradient(820px 620px at 102% 4%, rgba(255,94,168,0.10), transparent 54%),
        radial-gradient(760px 760px at 50% 116%, rgba(122,60,224,0.10), transparent 60%),
        var(--bg) !important;
    transition: background 1.4s ease;
}
/* Atmosfera dinâmica: a luz do fundo reage à faixa do Score (sutil, decorativo). */
.v-shell.mood-low  { --mood: rgba(255,160,90,0.15); }  /* atenção — âmbar quente */
.v-shell.mood-mid  { --mood: rgba(157,92,255,0.16); }  /* regular — violeta da marca */
.v-shell.mood-good { --mood: rgba(157,92,255,0.21); }  /* bom — violeta mais presente */
.v-shell.mood-high { --mood: rgba(61,224,160,0.16); }  /* excelente — verde patrimônio */
@media (prefers-reduced-motion: reduce) { .v-shell, .auth-split { transition: none; } }

/* 2) Movimento de entrada: as seções da página revelam com fade + rise escalonado. */
@keyframes v-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.v-page > * { animation: v-rise .45s var(--ease-valora) both; }
.v-page > *:nth-child(1) { animation-delay: .02s; }
.v-page > *:nth-child(2) { animation-delay: .07s; }
.v-page > *:nth-child(3) { animation-delay: .12s; }
.v-page > *:nth-child(4) { animation-delay: .17s; }
.v-page > *:nth-child(5) { animation-delay: .22s; }
.v-page > *:nth-child(n+6) { animation-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .v-page > * { animation: none; } }

/* 3) Signature motion: o Anel (objeto da marca) "se monta" ao abrir a tela —
   um pop sutil com a curva-assinatura, igual em todos os anéis (Distribuição, Score, Patrimônio).
   É o que faz o app parecer um organismo só. */
@keyframes v-ring-assemble {
    0%   { opacity: 0; transform: scale(.9); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { transform: scale(1); }
}
.v-ring, .alloc-ring { animation: v-ring-assemble .6s var(--ease-valora) .12s both; }
@media (prefers-reduced-motion: reduce) { .v-ring, .alloc-ring { animation: none; } }

/* 4) Ritual: as barras de progresso "enchem" da esquerda ao abrir a tela
   (Caixa, Metas, Distribuição/consumo, Score) — a sensação de progresso acontecendo. */
@keyframes v-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.v-goal-bar > span, .v-bar .v-bar-fill { transform-origin: left center; animation: v-bar-grow .85s var(--ease-valora) .2s both; }
@media (prefers-reduced-motion: reduce) { .v-goal-bar > span, .v-bar .v-bar-fill { animation: none; } }

/* 3) Escala tipográfica mais dramática (herói maior, rótulos com mais respiro). */
.v-num-xl { font-size: clamp(2.3rem, 6.5vw, 3.4rem); }
.v-eyebrow { letter-spacing: 0.14em; }

/* 4) Microinterações premium (elevação no hover, brilho no CTA, press com mola). */
.v-card.hover, .sum-card, .v-card-accent, .legal-card, .insight-card, .tl-item, .tx-chip, .v-rail-item, .bn-fab, .v-btn, .v-quick > button {
    transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .15s ease, background .15s ease, filter .15s ease;
}
.v-card.hover:hover, .sum-card:hover, .v-quick > button:hover { transform: translateY(-2px); }
.v-btn.primary:hover, .auth-btn-primary:hover { filter: brightness(1.07); box-shadow: 0 12px 30px rgba(157,92,255,0.38); }
.v-btn:active, .v-quick > button:active, .bn-fab:active { transform: translateY(1px) scale(0.98); }
.bn-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 24px rgba(157,92,255,0.5); }

/* 5) Acabamento "glass": luz fina na borda superior dos cards (luz vindo de cima). */
.v-card, .sum-card, .v-hero, .insight-card { position: relative; }
.v-card::after, .sum-card::after, .v-hero::after, .insight-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 26%);
}

/* 6) Brilho que varre o CTA primário no hover (vivo, sem neon). */
.v-btn.primary, .auth-btn-primary, .nl-btn { position: relative; overflow: hidden; }
.v-btn.primary::after, .auth-btn-primary::after, .nl-btn::after {
    content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.v-btn.primary:hover::after, .auth-btn-primary:hover::after, .nl-btn:hover:not(:disabled)::after {
    opacity: 1; animation: cta-sheen .7s ease;
}
@keyframes cta-sheen { from { left: -70%; } to { left: 130%; } }

/* 7) Des-materializar as abas: MudTabs vira um "segmented control" com pílula deslizante. */
.mud-tabs-tabbar {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: 14px !important; padding: 4px !important; min-height: 0 !important;
    width: max-content !important; max-width: 100% !important;
    overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important;
}
.mud-tabs-tabbar::-webkit-scrollbar { display: none !important; }
.mud-tabs-tabbar-wrapper, .mud-tabs-tabbar-inner, .mud-tabs-tabbar-content {
    min-height: 0 !important; overflow: visible !important; flex-wrap: nowrap !important;
}
/* As setas de scroll do MudTabs não combinam com o segmented control — o scroll é por toque/trackpad. */
.mud-tabs-tabbar .mud-tab-scroll-button, .mud-tabs-tabbar-scrollbutton { display: none !important; }
.mud-tab {
    text-transform: none !important; min-height: 38px !important; height: 38px !important;
    border-radius: 10px !important; margin: 0 1px !important; min-width: 0 !important;
    padding: 0 16px !important; font-weight: 600 !important; font-size: 0.84rem !important;
    color: var(--text-3) !important; opacity: 1 !important; position: relative; z-index: 1;
    transition: color .18s ease;
}
.mud-tab:hover { color: var(--text-2) !important; background: transparent !important; }
.mud-tab.mud-tab-active { color: #fff !important; }
.mud-tab .mud-icon-root { font-size: 1rem !important; }
.mud-tab-slider {
    background: var(--candy) !important; height: 38px !important;
    top: 4px !important; bottom: auto !important; border-radius: 10px !important;
    box-shadow: 0 6px 16px rgba(157,92,255,0.32) !important;
    transition: left .28s cubic-bezier(.22,1,.36,1), width .28s cubic-bezier(.22,1,.36,1) !important;
}
.mud-tabs-panels { padding-top: 18px !important; }

/* 8) Distribuição — anel-assinatura do 50/30/20 (identidade visual do método). */
.alloc-hero { display: flex; align-items: center; gap: 30px; margin-bottom: 16px; flex-wrap: wrap; }
.alloc-ring { width: 152px; height: 152px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; position: relative; box-shadow: 0 12px 34px rgba(0,0,0,0.32); }
.alloc-ring::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: var(--surface); }
.alloc-ring-in { position: relative; z-index: 1; text-align: center; line-height: 1.05; }
.alloc-ring-pct { font-size: 2.1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.alloc-ring-sub { font-size: 0.64rem; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.alloc-legend { flex: 1; min-width: 230px; display: flex; flex-direction: column; gap: 11px; }
.alloc-legend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.alloc-leg { display: flex; align-items: center; gap: 12px; }
.alloc-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.alloc-leg-main { flex: 1; min-width: 0; }
.alloc-leg-top { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.92rem; color: var(--text); }
.alloc-leg-sub { font-size: 0.74rem; color: var(--text-3); }

/* 4) Restrição do gradiente: botões primários comuns ficam monocromáticos (roxo com leve
   profundidade). O degradê "candy" fica reservado aos momentos-assinatura: FAB, CTA do
   login/cadastro, pílula das abas e o anel da Distribuição. Mais sofisticado, menos "fintech 2021". */
.mud-button-filled-primary, .v-btn.primary {
    background: linear-gradient(180deg, #A66BFF, #9D5CFF) !important;
    box-shadow: 0 6px 18px rgba(157,92,255,0.28) !important;
}
.mud-button-filled-primary:hover, .v-btn.primary:hover { filter: brightness(1.06); }

/* 5) Splash cinematográfico: atmosfera + entrada elegante (sobrescreve pulse/shimmer antigos). */
#app-splash { gap: 0 !important; background: radial-gradient(820px 620px at 50% 38%, rgba(157,92,255,0.18), transparent 62%), var(--bg) !important; }
.splash-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.splash-stage .splash-logo { animation: splash-logo-in .7s cubic-bezier(.22,1,.36,1) both, splash-breathe 3.2s ease-in-out .7s infinite !important; }
.splash-stage .splash-logo::after { display: none !important; }
.splash-stage .splash-logo::before { animation: splash-glow 3.2s ease-in-out infinite !important; }
.splash-stage .splash-title { animation: splash-up .6s cubic-bezier(.22,1,.36,1) .18s both; margin-top: 6px; font-size: 1.9rem; }
.splash-stage .splash-sub { animation: splash-up .6s cubic-bezier(.22,1,.36,1) .30s both; }
.splash-stage .splash-bar { animation: splash-up .6s cubic-bezier(.22,1,.36,1) .44s both; margin-top: 8px; height: 4px; width: 200px; }
.splash-stage .splash-percent { animation: splash-up .6s cubic-bezier(.22,1,.36,1) .52s both; }
@keyframes splash-logo-in { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: scale(1); } }
@keyframes splash-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes splash-glow { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: .85; transform: scale(1.15); } }
@keyframes splash-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }