:root{
    --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    --bg-0: #0B1220;
    --bg-1: #0F172A;
    --surface: rgba(255,255,255,.06);
    --surface-2: rgba(11,18,32,.55);
    --border: rgba(255,255,255,.10);

    --text-0: #FFFFFF;
    --text-1: rgba(255,255,255,.78);
    --text-2: rgba(255,255,255,.65);

    --gold: #D4AF37;
    --gold-ink: #111827;

    --ease: cubic-bezier(.2,.8,.2,1);
}

/* fonte global */
body{
    font-family: var(--font-sans);
}

/* Tema dark aplicado só quando a página tiver .theme-dark */
body.theme-dark{
    background:
        radial-gradient(1000px 520px at 15% 10%, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 55%),
        radial-gradient(900px 500px at 90% 0%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 55%),
        linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
    color: var(--text-0);
    min-height: 100vh;
}
body.theme-dark a{color: rgba(212,175,55,.90)}
body.theme-dark a:hover{color:#fff}

:root{
    --bg:#ffffff;
    --ink:#0b1220;
    --ink2:#111827;
    --muted:#6b7280;
    --muted2:#374151;

    --line:#e5e7eb;

    --brand:#D4AF37;         /* dourado */
    --brandInk:#111827;

    --navy:#0B1220;
    --navy2:#0F172A;

    --r12:12px;
    --r16:16px;
    --r18:18px;

    --shadow1:0 12px 40px rgba(17,24,39,.14);
    --shadow2:0 18px 60px rgba(17,24,39,.18);

    --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tipografia */
h1,h2,h3{letter-spacing:-.4px}
h1{font-size:28px;line-height:1.12;margin:0 0 10px;color:var(--ink)}
h2{font-size:18px;line-height:1.25;margin:0 0 10px;color:var(--ink2)}
h3{font-size:16px;line-height:1.25;margin:0 0 6px;color:var(--ink2)}
p{margin:0 0 10px;line-height:1.75;color:var(--muted2)}
small{color:var(--muted)}

a{color:inherit}
a:hover{opacity:.96}

/* Layout padrão (telas internas) */
.container{max-width:1120px;margin:0 auto;padding:24px 16px}

/* Topbar */
.topbar{
    position:sticky;
    top:0;
    z-index:10;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
}
.topbar__inner{
    max-width:1120px;
    margin:0 auto;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:950;
    color:var(--ink);
}
.brand__mark{
    width:34px;height:34px;
    border-radius:12px;
    background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.35), rgba(212,175,55,.02) 60%),
                linear-gradient(180deg, var(--navy), var(--navy2));
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 30px rgba(17,24,39,.12);
}
.brand__text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}
.brand__name{
    font-size:14px;
    letter-spacing:.2px;
}
.brand__tag{
    font-size:11px;
    font-weight:800;
    color:var(--muted);
}

.nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink2);font-weight:800;font-size:14px}

.linklike{
    background:none;border:0;padding:0;
    cursor:pointer;
    color:var(--ink2);
    font-weight:900;
    font-size:14px;
}

/* Botões */
.btn, .lp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:12px;
    padding:12px 14px;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    font-weight:950;
    font-size:14px;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), filter 220ms var(--ease), background 220ms var(--ease);
}
.btn--sm{padding:9px 12px}
.btn--primary, .lp-btn--primary{
    background:var(--brand);
    border-color:var(--brand);
    color:var(--brandInk);
    box-shadow: var(--shadow1);
}
.btn--primary:hover, .lp-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.02)}
.btn--ghost, .lp-btn--ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--ink2);
}
.btn--ghost:hover, .lp-btn--ghost:hover{background:#f3f4f6;transform:translateY(-2px)}

/* Footer */
.footer{
    border-top:1px solid var(--line);
    margin-top:30px;
    padding:18px 0;
    color:var(--muted);
    background:#fff;
}

/* =========================
   LANDING PAGE
   ========================= */

/* full-bleed (home ocupa tela toda mesmo com <main class="container">) */
.lp-fullbleed{margin-left:-16px;margin-right:-16px}

/* HERO */
.lp-hero{
    position:relative;
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(900px 420px at 15% 10%, rgba(212,175,55,.18) 0%, rgba(212,175,55,0) 60%),
        radial-gradient(800px 420px at 90% 20%, rgba(59,130,246,.12) 0%, rgba(59,130,246,0) 55%),
        linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    overflow:hidden;
}
.lp-hero:before{
    content:"";
    position:absolute;
    inset:-140px auto auto -140px;
    width:320px;height:320px;
    background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.22), rgba(212,175,55,0) 65%);
    filter: blur(6px);
    pointer-events:none;
}
.lp-hero:after{
    content:"";
    position:absolute;
    inset:auto -160px -160px auto;
    width:360px;height:360px;
    background: radial-gradient(circle at 40% 40%, rgba(59,130,246,.18), rgba(59,130,246,0) 65%);
    filter: blur(10px);
    pointer-events:none;
}

.lp-hero__inner{
    max-width:1120px;
    margin:0 auto;
    padding:60px 16px;
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:26px;
    align-items:center;
    position:relative;
}

/* Copy */
.lp-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(15,23,42,.92);
    color:#fff;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:950;
    letter-spacing:.25px;
    box-shadow: 0 10px 30px rgba(2,6,23,.18);
}
.lp-hero h1{
    font-size:48px;
    line-height:1.02;
    margin:14px 0 10px;
    color:var(--ink);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.lp-subtitle{
    font-size:16px;
    line-height:1.8;
    margin:0;
    max-width:64ch;
    color:var(--muted2);
}
.lp-subtitle strong{color:var(--ink2)}

.lp-ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 12px}

/* Prova rápida */
.lp-proof{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:12px;
}
.lp-proof__item{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(229,231,235,.85);
    border-radius:14px;
    padding:10px 12px;
    backdrop-filter: blur(10px);
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.lp-proof__item:hover{transform:translateY(-3px);box-shadow: 0 14px 36px rgba(17,24,39,.10)}
.lp-proof__item strong{display:block;color:var(--ink2);font-size:14px}
.lp-proof__item span{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* Visual / Imagem (corrige tamanho + proporção) */
.lp-hero__visual{position:relative}
.lp-frame{
    background: linear-gradient(180deg, rgba(11,18,32,.98), rgba(15,23,42,.98));
    border-radius:18px;
    padding:14px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow2);
}
.lp-frame img{
    width:100%;
    height:300px;            /* ✅ imagem não fica gigante */
    display:block;
    border-radius:12px;
    background:#0b1220;
    object-fit:cover;        /* ✅ não distorce */
    object-position:center;  /* ✅ recorte central */
}

/* Cards abaixo */
.lp-miniCards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:12px;
}
.lp-miniCard{
    background:rgba(255,255,255,.85);
    border:1px solid rgba(229,231,235,.9);
    border-radius:14px;
    padding:10px 12px;
    backdrop-filter: blur(10px);
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.lp-miniCard:hover{transform:translateY(-3px);box-shadow: 0 14px 36px rgba(17,24,39,.10)}
.lp-miniCard__label{display:block;color:var(--muted);font-size:12px;font-weight:950}
.lp-miniCard__value{display:block;color:var(--ink2);font-weight:950;margin-top:4px}
.lp-visualNote{margin:10px 0 0;color:var(--muted);font-size:12px}

/* Sections */
.lp-container{max-width:1120px;margin:0 auto;padding:0 16px}
.lp-section{padding:42px 0}
.lp-section h2{font-size:28px;line-height:1.14;margin:0 0 16px;color:var(--ink)}
.lp-section--alt{background:#f9fafb;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.lp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lp-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.lp-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.lp-card:hover{transform:translateY(-4px);box-shadow: 0 16px 46px rgba(17,24,39,.12)}
.lp-card p{margin:0;color:var(--muted2)}

/* Steps */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lp-step{
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.lp-step:hover{transform:translateY(-4px);box-shadow: 0 16px 46px rgba(17,24,39,.12)}
.lp-step__num{
    width:34px;height:34px;
    border-radius:10px;
    background:rgba(15,23,42,.92);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:950;
}
.lp-step__text strong{display:block;color:var(--ink2)}
.lp-step__text span{display:block;color:var(--muted);margin-top:2px}

/* CTA box */
.lp-ctaBox{
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(229,231,235,.9);
    border-radius:18px;
    padding:16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(17,24,39,.08);
}
.lp-ctaBox__text h3{margin:0 0 4px;color:var(--ink2)}
.lp-ctaBox__text p{margin:0;color:var(--muted)}
.lp-ctaBox__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Final */
.lp-final{
    padding:42px 0;
    background:linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
    color:#fff;
}
.lp-final__inner{
    max-width:1120px;
    margin:0 auto;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.lp-final h2{margin:0 0 6px;font-size:28px;color:#fff}
.lp-final p{margin:0;color:#cbd5e1}
.lp-final__actions{display:flex;gap:10px;flex-wrap:wrap}
.lp-final .lp-btn--ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.lp-final .lp-btn--ghost:hover{background:rgba(255,255,255,.08)}

/* Animações: fade-up */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lp-hero__copy{animation:fadeUp 520ms var(--ease) both}
.lp-hero__visual{animation:fadeUp 520ms var(--ease) both;animation-delay:120ms}
.lp-card{animation:fadeUp 520ms var(--ease) both}
.lp-card:nth-child(2){animation-delay:70ms}
.lp-card:nth-child(3){animation-delay:140ms}

/* Reduz movimento */
@media (prefers-reduced-motion: reduce){
    .lp-hero__copy,.lp-hero__visual,.lp-card{animation:none}
    .btn,.lp-btn,.lp-card,.lp-step,.lp-proof__item,.lp-miniCard{transition:none}
}

/* Responsivo */
@media (max-width: 980px){
    .lp-hero__inner{grid-template-columns:1fr;padding:40px 16px}
    .lp-hero h1{font-size:34px}
    .lp-proof{grid-template-columns:1fr}
    .lp-grid3{grid-template-columns:1fr}
    .lp-grid2{grid-template-columns:1fr}
    .lp-steps{grid-template-columns:1fr}
    .lp-miniCards{grid-template-columns:1fr}
    .lp-frame img{height:240px}
    .lp-final__inner{flex-direction:column;align-items:flex-start}
}
/* =========================
   AUTH MODAL (HOME)
   ========================= */
.authModal{position:fixed;inset:0;z-index:50;display:none}
.authModal.is-open{display:block}
.authModal__backdrop{
    position:absolute;inset:0;
    background:rgba(2,6,23,.55);
    backdrop-filter: blur(10px);
}
.authModal__panel{
    position:relative;
    width:min(920px, calc(100% - 24px));
    margin: min(8vh, 70px) auto;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(229,231,235,.85);
    border-radius:18px;
    box-shadow: 0 26px 90px rgba(2,6,23,.30);
    backdrop-filter: blur(14px);
    overflow:hidden;
    animation: fadeUp 340ms var(--ease) both;
}
.authModal__close{
    position:absolute;top:10px;right:10px;
    width:38px;height:38px;border-radius:12px;
    border:1px solid rgba(229,231,235,.9);
    background:rgba(255,255,255,.86);
    font-size:22px;font-weight:900;
    cursor:pointer;
}
.authModal__head{padding:18px 18px 10px}
.authModal__title{font-size:18px;font-weight:950;color:var(--ink2);letter-spacing:-.3px}
.authModal__sub{margin-top:4px;color:var(--muted);font-weight:800;font-size:12px}

.authTabs{
    display:flex;gap:8px;
    padding:0 18px 12px;
}
.authTabs__tab{
    border:1px solid rgba(229,231,235,.9);
    background:rgba(255,255,255,.72);
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
    font-weight:950;
    color:var(--ink2);
}
.authTabs__tab.is-active{
    border-color: rgba(212,175,55,.55);
    box-shadow: 0 10px 26px rgba(212,175,55,.12);
}

.authBody{padding:0 18px 18px}
.authPane{display:none}
.authPane.is-active{display:block}

.authForm label{
    display:block;
    margin:10px 0 6px;
    color:var(--muted);
    font-size:12px;
    font-weight:950;
    letter-spacing:.2px;
}
.authForm input{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid rgba(229,231,235,.95);
    background:rgba(255,255,255,.86);
    outline:none;
    transition: box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.authForm input:focus{
    border-color: rgba(17,24,39,.25);
    box-shadow:0 0 0 4px rgba(17,24,39,.08);
}
.authNote{
    margin:10px 0 0;
    font-size:12px;
    color:var(--muted);
    line-height:1.6;
}
/* =========================
   APP THEME (AUTH + DASH)
   ========================= */

.app-shell{
    padding: 36px 0;
    background:
        radial-gradient(1000px 520px at 15% 10%, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 55%),
        radial-gradient(900px 500px at 90% 0%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 55%),
        linear-gradient(180deg, #0B1220 0%, #0F172A 100%);
    min-height: calc(100vh - 120px);
}
.app-shell__inner{
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px;
}
.app-shell--wide .app-shell__inner{
    max-width: 1100px;
}

.auth-card{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
    padding: 18px;
}
.auth-card__top{margin-bottom: 10px}
.auth-title{
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -.4px;
    font-weight: 950;
}
.auth-subtitle{
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.7;
    font-size: 14px;
}

.auth-form label{
    display:block;
    margin: 12px 0 6px;
    color: rgba(255,255,255,.75);
    font-size: 13px;
    font-weight: 800;
}
.auth-form input{
    width:100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,23,42,.55);
    color: #fff;
    outline: none;
    transition: box-shadow 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease), background 220ms var(--ease);
}
.auth-form input::placeholder{color: rgba(255,255,255,.45)}
.auth-form input:focus{
    border-color: rgba(212,175,55,.55);
    box-shadow: 0 0 0 4px rgba(212,175,55,.16);
    transform: translateY(-1px);
}

.auth-links{
    margin-top: 12px;
    display:flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.auth-link{
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
}
.auth-link:hover{color:#fff}

/* Buttons (app theme) */
.btn-app{
    width:100%;
    margin-top: 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius: 14px;
    padding: 12px 14px;
    text-decoration:none;
    border: 1px solid transparent;
    font-weight: 950;
    font-size: 14px;
    cursor:pointer;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), filter 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}
.btn-app--primary{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--gold-ink);
    box-shadow: 0 18px 50px rgba(212,175,55,.18);
}
.btn-app--primary:hover{transform: translateY(-2px); filter: brightness(1.03)}
.btn-app--ghost{
    width:auto;
    margin:0;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color:#fff;
}
.btn-app--ghost:hover{transform: translateY(-2px); background: rgba(255,255,255,.08)}
.btn-app--danger{
    width:auto;
    margin:0;
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.35);
    color: #fff;
}
.btn-app--danger:hover{transform: translateY(-2px); background: rgba(239,68,68,.16)}

/* Header no tema dark */
body.theme-dark .topbar,
body.theme-dark .topbar{
    background: rgba(15,23,42,.35);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
}

body.theme-dark .nav a,
body.theme-dark .nav .linklike{
    color: rgba(255,255,255,.80);
    font-weight: 800;
}

body.theme-dark .nav a:hover,
body.theme-dark .nav .linklike:hover{
    color: #fff;
}

/* Botões do header (aplique as classes nos links) */
.nav-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color:#fff;
    font-weight: 900;
    text-decoration:none;
    transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

/* ✅ AJUSTE PONTUAL: botões do header com mesmo tamanho */
.nav-btn{
    height: 40px;
    min-width: 160px;
    padding: 0 16px;
    box-sizing: border-box;
    white-space: nowrap;
}

.nav-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
}

.nav-btn--primary{
    border-color: rgba(212,175,55,.60);
    background: var(--gold);
    color: var(--gold-ink);
    box-shadow: 0 18px 50px rgba(212,175,55,.18);
}

.nav-btn--primary:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
}

.nav-btn--ghost{
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color:#fff;
}

.nav-btn--ghost:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
}

/* ✅ AJUSTE PONTUAL: menu do header alinhado na mesma altura */
.nav{align-items:center}
.nav a,
.nav .linklike{line-height:40px}

/* Dashboard */
.dash-top{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dash-title{
    margin:0 0 6px;
    font-size: 32px;
    line-height: 1.05;
    color: #fff;
    font-weight: 950;
    letter-spacing: -.4px;
}
.dash-subtitle{
    margin:0;
    color: rgba(255,255,255,.70);
    line-height: 1.7;
}
.dash-link{
    color: rgba(212,175,55,.90);
    font-weight: 900;
    text-decoration: none;
}
.dash-link:hover{color:#fff}
.dash-actions{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap: wrap;
}

/* Panels */
.dash-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 12px;
}
.panel{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0,0,0,.30);
    padding: 16px;
}
.panel--muted{background: rgba(255,255,255,.04)}
.panel__head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:10px;
    margin-bottom: 10px;
}
.panel__title{
    margin:0;
    color:#fff;
    font-size: 16px;
    letter-spacing: -.2px;
}
.panel__badge{
    display:inline-flex;
    align-items:center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,.85);
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(255,255,255,.10);
}
.panel__text{
    margin:0;
    color: rgba(255,255,255,.70);
    line-height: 1.7;
    font-size: 14px;
}

/* KPIs */
.kpi-row{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
}
.kpi{
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(11,18,32,.55);
    padding: 12px;
}
.kpi__label{
    display:block;
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,.68);
}
.kpi__value{
    display:block;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 950;
    color:#fff;
}

/* Accounts list */
.account-list{display:flex;flex-direction:column;gap:10px}
.account-item{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(11,18,32,.55);
}
.account-name{color:#fff;font-weight:950}
.account-meta{
    display:inline-block;
    margin-top: 2px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 900;
}
.account-balance{color:#fff;font-weight:950}

/* Responsivo */
@media (max-width: 980px){
    .dash-grid{grid-template-columns:1fr}
    .kpi-row{grid-template-columns:1fr}
    .dash-title{font-size:28px}
}
/* Dashboard layout */
.app-shell--wide .app-shell__inner{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}

.dash-sidebar{
  position: sticky;
  top: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  padding: 16px;
}

.dash-nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-nav__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255,255,255,.70);
  font-weight: 800;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}

.dash-nav__item:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}

.dash-nav__item.is-active{
  background: var(--gold);
  color: var(--gold-ink);
}

.dash-main{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Filtros */
.dash-filters{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  padding: 16px;
}

.dash-filter-form{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-filter-form label{
  font-weight: 900;
  color: rgba(255,255,255,.75);
}

.dash-filter-form select{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  color: #fff;
}

.dash-filter-form button{
  margin: 0;
}

/* Responsivo */
@media (max-width: 980px){
  .app-shell--wide .app-shell__inner{
    grid-template-columns: 1fr;
  }
  .dash-sidebar{
    position: static;
  }
}
/* Garantir visibilidade do botão Novo Lançamento */
.btn-app.btn-app--primary{
  opacity: 1 !important;
  visibility: visible !important;
  background: #D4AF37 !important; /* fallback direto se var(--gold) não funcionar */
  border-color: #D4AF37 !important;
  color: #111827 !important;
}
/* ===== Sticky footer (preenche a altura total) ===== */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.container{
  flex: 1;
}
/* ===== Footer no tema dark ===== */
body.theme-dark .footer{
  background: rgba(15,23,42,.35);
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}

body.theme-dark .footer a{
  color: rgba(212,175,55,.90);
}
body.theme-dark .footer a:hover{
  color: #fff;
}
/* ===== Garantir que a área interna não fique branca no tema dark ===== */
body.theme-dark main.container{
  background: transparent;
}
/* =========================
   APP GLOBAL (theme-dark)
   ========================= */

body.theme-dark .container{
  color: var(--text-0);
}

/* Inputs no tema dark (global) */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  color: #fff;
  outline: none;
  transition: box-shadow 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease), background 220ms var(--ease);
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{
  color: rgba(255,255,255,.45);
}

/* ✅ AJUSTE PONTUAL: sombreamento + movimento no foco */
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 0 0 4px rgba(212,175,55,.16), 0 18px 50px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* Labels no tema dark */
body.theme-dark label{
  display:block;
  margin: 12px 0 6px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  font-weight: 900;
}

/* Links “linklike” no tema dark */
body.theme-dark .linklike{
  color: rgba(255,255,255,.80);
}
body.theme-dark .linklike:hover{
  color: #fff;
}

/* =========================
   MODAL (Novo Lançamento)
   ========================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.modal.is-open{display:block}

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.62);
  backdrop-filter: blur(10px);
}

.modal__panel{
  position: relative;
  width: min(720px, calc(100% - 24px));
  margin: min(8vh, 70px) auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  box-shadow: 0 26px 90px rgba(2,6,23,.45);
  overflow: hidden;
  animation: fadeUp 340ms var(--ease) both;
}

.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.modal__title{
  margin:0;
  color:#fff;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.2px;
}
.modal__sub{
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 800;
}

.modal__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.55);
  color: #fff;
  font-size: 20px;
  cursor:pointer;
}

.modal__body{padding: 14px 16px 16px}

.modal__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal__grid--full{grid-template-columns: 1fr}

.modal__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 720px){
  .modal__grid{grid-template-columns:1fr}
}
/* Correção do campo de data no tema dark */
body.theme-dark input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 45px; /* Garante altura igual aos outros inputs */
}

/* Deixa o ícone do calendário branco/dourado */
body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(100%) saturate(500%) hue-rotate(10deg);
  cursor: pointer;
  opacity: 0.8;
}

/* Layout dos Gráficos */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.chart-container {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}

.chart-container h3 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

canvas {
  max-width: 100%;
  max-height: 250px;
}

@media (max-width: 768px) {
  .charts-grid { grid-template-columns: 1fr; }
}
/* Linha superior: filtro + resumo */
.dash-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Gráficos */
.charts-section {
  display: flex;
  flex-direction: column;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.chart-container {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}

.chart-container h3 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

canvas {
  max-width: 100%;
  max-height: 250px;
}

/* Correção campo data */
body.theme-dark input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 45px;
  box-sizing: border-box;
}

body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(100%) saturate(500%) hue-rotate(10deg);
  cursor: pointer;
  opacity: 0.8;
}

/* Responsivo */
@media (max-width: 980px) {
  .dash-top-row,
  .dash-bottom-row {
    grid-template-columns: 1fr;
  }
  .charts-grid {
    grid-template-columns: 1fr;
  }
}
/* Layout do Dashboard reorganizado */
.dash-middle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.chart-container {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}

.chart-container h3 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

canvas {
  max-width: 100%;
  max-height: 250px;
}

/* Responsivo */
@media (max-width: 980px) {
  .dash-top-row,
  .dash-middle-row,
  .dash-bottom-row {
    grid-template-columns: 1fr;
  }
}
/* Lista de lançamentos */
.tx-list{display:flex;flex-direction:column;gap:10px}
.tx-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.55);
}
.tx-desc{color:#fff;font-weight:950}
.tx-meta{display:block;margin-top:2px;color:rgba(255,255,255,.65);font-size:12px;font-weight:900}
.tx-amount{font-weight:950;white-space:nowrap}
.tx-amount.is-income{color:#10b981}
.tx-amount.is-expense{color:#ef4444}

/* Select + botão “+ categoria” lado a lado */
.field-row{display:flex;gap:10px;align-items:center}
.field-row select{flex:1}
.field-row__btn{width:auto;margin:0;white-space:nowrap}

/* =========================
   PATCH FINAL (somente efeitos e botões)
   ========================= */

/* ✅ Inputs “mais vivos” no foco (home e geral) */
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  box-shadow: 0 0 0 4px rgba(212,175,55,.16), 0 18px 50px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* ✅ Botões do header com largura/altura iguais (reforço final) */
.nav-btn{
  height: 40px;
  min-width: 160px;
  padding: 0 16px;
}
/* =========================================================
   HOTFIX DEFINITIVO - CONTRASTE + HEADER + INPUTS (theme-dark)
   Cole no FINAL do app.css
   ========================================================= */

/* 1) Tipografia legível no tema dark (corrige h1/h2/h3/p do tema claro) */
body.theme-dark,
body.theme-dark .container{
  color: rgba(255,255,255,.88) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark .dash-title,
body.theme-dark .panel__title{
  color: #fff !important;
}

body.theme-dark p,
body.theme-dark span,
body.theme-dark li,
body.theme-dark small{
  color: rgba(255,255,255,.78) !important;
}

body.theme-dark .brand{
  color:#fff !important;
}

body.theme-dark .brand__tag{
  color: rgba(255,255,255,.65) !important;
}

/* 2) Topbar e links no dark */
body.theme-dark .topbar{
  background: rgba(15,23,42,.35) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}

body.theme-dark .nav a,
body.theme-dark .linklike{
  color: rgba(255,255,255,.84) !important;
}
body.theme-dark .nav a:hover,
body.theme-dark .linklike:hover{
  color: #fff !important;
}

/* 3) Botões do header do mesmo tamanho */
body.theme-dark .nav-btn{
  height: 40px !important;
  min-width: 160px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* 4) Inputs com sombra + movimento (global) */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  color:#fff !important;
  background: rgba(15,23,42,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color: rgba(212,175,55,.55) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,.16), 0 18px 50px rgba(0,0,0,.18) !important;
  transform: translateY(-1px);
  outline: none !important;
}
/* =========================================================
   FIX GRID DESKTOP (evita virar “lista”)
   Cole no FINAL do app.css
   ========================================================= */

/* 1) Dashboard rows: 2 colunas no desktop */
@media (min-width: 981px){
  .dash-top-row,
  .dash-middle-row,
  .dash-bottom-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  /* Se você estiver usando o layout em colunas PF/PJ */
  .dash-cols{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  /* Garante que o wide realmente fica wide */
  .app-shell--wide .app-shell__inner{
    max-width: 1100px !important;
  }
}

/* 2) Mobile: 1 coluna */
@media (max-width: 980px){
  .dash-top-row,
  .dash-middle-row,
  .dash-bottom-row,
  .dash-cols{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   HOME GRID RESTORE + BOTÕES IGUAIS + EFEITOS (Divizzo)
   Cole no FINAL do app.css
   ========================================================= */

/* Garante que a Home não fique “espremida” como mobile */
.home-container{max-width:1100px;margin:0 auto;padding:0 18px}
.home-hero__inner{max-width:1100px;margin:0 auto;padding:0 18px}

/* HERO: 2 colunas no desktop */
.home-hero{padding:34px 0 10px}
.home-hero__inner{
  display:grid !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap:18px !important;
  align-items:center !important;
}

/* Seção com 2 colunas (texto + destaque) */
.home-grid-2{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:16px !important;
  align-items:start !important;
}

/* Cards (3 colunas) */
.home-cards-3{
  display:grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap:16px !important;
}

/* Prova social (2 colunas) */
.home-proof{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:16px !important;
  align-items:start !important;
}

/* FAQ (2 colunas) */
.home-faq__items{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:14px !important;
}

/* Mock KPIs (3 colunas) */
.home-mock__kpis{
  display:grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap:10px !important;
}

/* Mobile: 1 coluna */
@media (max-width: 980px){
  .home-hero__inner{grid-template-columns:1fr !important}
  .home-grid-2{grid-template-columns:1fr !important}
  .home-cards-3{grid-template-columns:1fr !important}
  .home-proof{grid-template-columns:1fr !important}
  .home-faq__items{grid-template-columns:1fr !important}
  .home-mock__kpis{grid-template-columns:1fr !important}
}

/* =========================================================
   HEADER: botões “Entrar” e “Criar conta” iguais
   (sem quebrar o resto)
   ========================================================= */
.nav-btn{
  height:40px !important;
  min-width:160px !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
}

/* Deixa o menu mais “alinhado” na altura */
.nav{align-items:center !important}
.nav a,.nav .linklike{line-height:40px !important}

/* =========================================================
   EFEITO NOS CAMPOS (home + geral no theme-dark)
   ========================================================= */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease) !important;
}

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,.16), 0 18px 50px rgba(0,0,0,.18) !important;
  border-color: rgba(212,175,55,.55) !important;
}

/* Interação leve na Home (cards/boxes) */
.home-card,
.home-scenario,
.home-mock,
.home-faq__item{
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease) !important;
}
.home-card:hover,
.home-scenario:hover,
.home-mock:hover,
.home-faq__item:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.28) !important;
  border-color: rgba(255,255,255,.16) !important;
}
/* =========================================================
   DASHBOARD SPACING PATCH (mais respiro entre grids/panels)
   Cole no FINAL do app.css
   ========================================================= */

/* Espaço entre as “linhas” principais do dashboard */
.dash-main{
  gap: 22px;                  /* antes: 16px */
}

/* Topo (Filtro + Minhas contas) */
.dash-top-row{
  gap: 18px;
  margin-bottom: 6px;
}

/* Colunas PF/PJ */
.dash-cols{
  gap: 18px;
  margin-top: 6px;
}

/* Espaço entre os panels dentro de cada coluna */
.dash-col{
  gap: 18px;
}

/* Panel com mais “respiro interno” (sem mudar visual) */
.panel{
  padding: 18px;              /* antes: 16px */
}

/* Head do panel com um pouco mais de espaço */
.panel__head{
  margin-bottom: 12px;        /* antes: 10px */
}

/* Listas (contas / contas a vencer / lançamentos) com mais ar */
.account-list,
.due-list,
.tx-list{
  gap: 12px;                  /* antes: 10px */
}

/* Itens com um pouco mais de padding */
.account-item,
.due-item,
.tx-item{
  padding: 14px;              /* antes: 12px */
}

/* Mobile: mantém confortável sem exagerar */
@media (max-width: 980px){
  .dash-main{gap: 18px}
  .dash-top-row,
  .dash-cols,
  .dash-col{gap: 14px}
  .panel{padding: 16px}
}
/* =========================================================
   DASHBOARD: quebra/espaço entre blocos (respiro real)
   Cole no FINAL do app.css
   ========================================================= */

/* 1) Espaço garantido entre panels consecutivos (KPIs -> gráfico -> contas a vencer) */
.dash-col > .panel + .panel{
  margin-top: 18px !important;
}

/* 2) Espaço entre blocos principais no dash-main (top-row -> cols etc.) */
.dash-main > * + *{
  margin-top: 18px;
}

/* 3) Se o gráfico estiver “encostando” no título/edges, dá mais respiro interno */
.chart-wrap{
  margin-top: 12px;
  padding: 22px;              /* era 20px em alguns trechos */
}

/* 4) Se o due estiver muito “colado” no head do panel */
.due-mini{
  margin-top: 12px;
}

/* Mobile: um pouco menos */
@media (max-width: 980px){
  .dash-col > .panel + .panel{margin-top: 14px !important;}
  .dash-main > * + *{margin-top: 14px;}
}
/* =========================================================
   DASHBOARD: tipografia + equal height do topo (Filtro x Minhas contas)
   Cole no FINAL do app.css
   ========================================================= */

/* 1) Tipografia do título/subtítulo mais “fina” e maior */
.dash-title{
  font-weight: 700 !important;   /* antes estava 950 */
  font-size: 36px !important;    /* antes ~32 */
  letter-spacing: -.6px;
  line-height: 1.08;
}

.dash-subtitle{
  font-weight: 400 !important;   /* antes mais “grossa” */
  font-size: 16px !important;
  color: rgba(255,255,255,.72) !important;
  margin-top: 6px;
}

/* 2) Top-row: Filtro e Minhas contas com mesma altura */
.dash-top-row{
  align-items: stretch !important; /* estica as colunas iguais */
}

/* Garante que os panels ocupem 100% da altura da célula */
.dash-top-row > .panel{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* O conteúdo do panel pode “crescer” para preencher */
.dash-top-row > .panel .panel__head{
  flex: 0 0 auto;
}
.dash-top-row > .panel form,
.dash-top-row > .panel .account-list{
  flex: 1 1 auto;
}

/* 3) Form do filtro mais “alto” e com layout melhor dentro do card */
.dash-filter-form--inline{
  height: 100%;
  align-content: start;
  gap: 14px;
}

.dash-filter-form__group{
  min-width: 160px;            /* evita quebrar “esquisito” */
}

.dash-filter-form select{
  min-height: 44px;            /* fica alinhado com botões */
}

.dash-filter-form button.btn-app{
  min-height: 44px;
}

/* 4) Se o botão do filtro estiver empurrando tudo, deixa ele “no fim” */
.dash-top-row > .panel form{
  display: flex;
  flex-wrap: wrap;
}
.dash-top-row > .panel form button.btn-app{
  margin-top: auto;            /* joga o botão para o fundo do card */
}

/* Mobile: volta ao natural */
@media (max-width: 980px){
  .dash-title{font-size: 30px !important;}
  .dash-top-row > .panel{height:auto;}
  .dash-top-row > .panel form button.btn-app{margin-top: 0;}
}
/* =========================================================
   DASHBOARD: tipografia + equal height do topo (Filtro x Minhas contas)
   Cole no FINAL do app.css
   ========================================================= */

/* 1) Tipografia do título/subtítulo mais “fina” e maior */
.dash-title{
  font-weight: 700 !important;   /* antes estava 950 */
  font-size: 36px !important;    /* antes ~32 */
  letter-spacing: -.6px;
  line-height: 1.08;
}

.dash-subtitle{
  font-weight: 400 !important;   /* antes mais “grossa” */
  font-size: 16px !important;
  color: rgba(255,255,255,.72) !important;
  margin-top: 6px;
}

/* 2) Top-row: Filtro e Minhas contas com mesma altura */
.dash-top-row{
  align-items: stretch !important; /* estica as colunas iguais */
}

/* Garante que os panels ocupem 100% da altura da célula */
.dash-top-row > .panel{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* O conteúdo do panel pode “crescer” para preencher */
.dash-top-row > .panel .panel__head{
  flex: 0 0 auto;
}
.dash-top-row > .panel form,
.dash-top-row > .panel .account-list{
  flex: 1 1 auto;
}

/* 3) Form do filtro mais “alto” e com layout melhor dentro do card */
.dash-filter-form--inline{
  height: 100%;
  align-content: start;
  gap: 14px;
}

.dash-filter-form__group{
  min-width: 160px;            /* evita quebrar “esquisito” */
}

.dash-filter-form select{
  min-height: 44px;            /* fica alinhado com botões */
}

.dash-filter-form button.btn-app{
  min-height: 44px;
}

/* 4) Se o botão do filtro estiver empurrando tudo, deixa ele “no fim” */
.dash-top-row > .panel form{
  display: flex;
  flex-wrap: wrap;
}
.dash-top-row > .panel form button.btn-app{
  margin-top: auto;            /* joga o botão para o fundo do card */
}

/* Mobile: volta ao natural */
@media (max-width: 980px){
  .dash-title{font-size: 30px !important;}
  .dash-top-row > .panel{height:auto;}
  .dash-top-row > .panel form button.btn-app{margin-top: 0;}
}
/* =========================================================
   Lançamentos: lixeira por item
   ========================================================= */

.tx-item{
  align-items: center;
}

.tx-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.tx-delete{
  margin:0;
}

.tx-trash{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}

.tx-trash:hover{
  transform: translateY(-1px);
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.35);
}
/* =========================================================
   Footer padrão: centralizado em todas as páginas
   ========================================================= */
.footer{
  text-align: center;
}

.footer__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 24px;
  text-align: center;
}

.footer p{
  margin: 0;
  width: 100%;
  text-align: center !important;
  line-height: 1.8;
}
/* =========================================================
   Footer mais discreto (tamanho/contraste/espaçamento)
   ========================================================= */
.footer{
  padding: 18px 0; /* menor que antes */
}

.footer__inner{
  padding: 0 24px;           /* sem “inflar” altura */
}

.footer p{
  font-size: 12.5px !important;   /* mais discreto */
  font-weight: 400;
  opacity: .70;                   /* reduz destaque */
  letter-spacing: .2px;
  line-height: 1.6;
}

/* Links (se houver) mais sutis */
.footer a{
  color: inherit;
  opacity: .85;
  text-decoration: none;
}
.footer a:hover{
  opacity: 1;
  text-decoration: underline;
}
/* Alinhamento e Estilo dos Botões de Assinatura */
.panel__actions--billing {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.panel__actions--billing form {
  margin: 0;
  display: flex;
}

/* Botão Amarelo (Accent) */
.btn-app--accent {
  background-color: #fbbf24; /* Amarelo Vibrante */
  border: 1px solid #fbbf24;
  color: #1f2937;
  font-weight: 600;
  height: 42px; /* Altura fixa para alinhar com o botão ghost */
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-app--accent:hover {
  background-color: #f59e0b;
  border-color: #f59e0b;
}

.btn-app--ghost {
  height: 42px; /* Mesma altura para alinhar */
  display: inline-flex;
  align-items: center;
}
.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  margin-right: 10px;
}
.brand__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  margin-right: 10px;
}
/* =========================================================
   FUNDO EM MOVIMENTO (impactante) — Divizzo
   Cole no FINAL do app.css (não quebra nada)
   ========================================================= */

/* Camada fixa de fundo animado (atrás de tudo) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  
  /* Gradiente cônico animado (gira lentamente) */
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(212,175,55,.55),
    rgba(56,189,248,.50),
    rgba(34,197,94,.45),
    rgba(244,63,94,.35),
    rgba(99,102,241,.55),
    rgba(212,175,55,.55)
  );
  
  filter: blur(60px) saturate(1.25);
  opacity: .75;
  transform: translate3d(0,0,0) scale(1.15);
  animation: bgfxSpin 16s linear infinite;
}

/* Camada 2: auroras (blobs com movimento) */
body::after{
  content: "";
  position: fixed;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  
  background:
    radial-gradient(45% 45% at 15% 25%, rgba(212,175,55,.55) 0%, rgba(212,175,55,0) 60%),
    radial-gradient(40% 40% at 80% 20%, rgba(56,189,248,.45) 0%, rgba(56,189,248,0) 60%),
    radial-gradient(42% 42% at 75% 85%, rgba(34,197,94,.40) 0%, rgba(34,197,94,0) 62%),
    radial-gradient(45% 45% at 20% 85%, rgba(99,102,241,.45) 0%, rgba(99,102,241,0) 62%);
  
  filter: blur(45px);
  opacity: .85;
  transform: translate3d(0,0,0);
  animation: bgfxFloat 10s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* Animações */
@keyframes bgfxSpin{
  from{ transform: translate3d(0,0,0) scale(1.15) rotate(0deg); }
  to  { transform: translate3d(0,0,0) scale(1.15) rotate(360deg); }
}

@keyframes bgfxFloat{
  0%   { transform: translate(-2%, -1%) scale(1.03) rotate(-2deg); }
  50%  { transform: translate(2%, 1%)  scale(1.08) rotate(3deg); }
  100% { transform: translate(-1%, 2%) scale(1.05) rotate(-1deg); }
}

/* Acessibilidade: respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  body::before,
  body::after{ animation: none; }
}
/* =========================================================
   SITE PARALLAX (global) — não mexe no body/theme
   ========================================================= */
.site-parallax{
  position: fixed;
  inset: 0;
  z-index: -5;               /* fica atrás do site inteiro */
  pointer-events: none;
  overflow: hidden;
}

/* Camada A: blobs/aurora (bem visível) */
.site-parallax__layer--a{
  position: absolute;
  inset: -45%;
  background:
    radial-gradient(48% 48% at 18% 25%, rgba(212,175,55,.48) 0%, rgba(212,175,55,0) 62%),
    radial-gradient(46% 46% at 85% 20%, rgba(59,130,246,.30) 0%, rgba(59,130,246,0) 62%),
    radial-gradient(50% 50% at 75% 85%, rgba(16,185,129,.26) 0%, rgba(16,185,129,0) 64%),
    radial-gradient(55% 55% at 22% 85%, rgba(99,102,241,.30) 0%, rgba(99,102,241,0) 66%);
  filter: blur(55px) saturate(1.25);
  opacity: .85;
  transform: translate3d(0,0,0);
}

/* Camada B: conic glow (movimento contínuo leve) */
.site-parallax__layer--b{
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(212,175,55,.35),
    rgba(56,189,248,.25),
    rgba(34,197,94,.22),
    rgba(244,63,94,.18),
    rgba(99,102,241,.28),
    rgba(212,175,55,.35)
  );
  filter: blur(70px) saturate(1.2);
  opacity: .55;
  transform: translate3d(0,0,0) scale(1.08);
  animation: siteParallaxSpin 18s linear infinite;
}

/* Ruído leve */
.site-parallax__noise{
  position: absolute;
  inset: 0;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Sombra/vignette global para manter o dashboard dark (sem “lavar”) */
.site-parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 560px at 50% 10%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.75) 100%);
}

/* Movimento contínuo discreto (opcional, mantém vivo mesmo sem mouse) */
@keyframes siteParallaxSpin{
  from{ transform: translate3d(0,0,0) scale(1.08) rotate(0deg); }
  to  { transform: translate3d(0,0,0) scale(1.08) rotate(360deg); }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .site-parallax__layer--b{ animation: none; }
}
/* Estilos para "Bolhas de Pensamento" (Tooltips) */
.help-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #4b5563; /* cinza escuro */
  color: #e5e7eb; /* cinza claro */
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  position: relative;
  user-select: none;
}

.help-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f2937; /* cinza mais escuro */
  color: #d1d5db; /* cinza claro */
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 10;
  width: max-content;
  max-width: 250px;
  white-space: normal;
  text-align: center;
}

.help-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Estilo para o label do checkbox */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.help-tooltip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color:#E5E7EB;
  font-size:11px;
  font-weight:700;
  cursor:help;
  position:relative;
  user-select:none;
}

.help-tooltip::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:140%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.95);
  color:#E5E7EB;
  border: 1px solid rgba(255,255,255,.14);
  padding:10px 12px;
  border-radius:10px;
  font-size:12px;
  line-height:1.35;
  width:max-content;
  max-width:260px;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index:50;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Tooltips Estilo "Nuvenzinha" (Speech Bubble) */
.help-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2); /* Tom dourado suave */
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #D4AF37;
  font-size: 12px;
  font-weight: 800;
  cursor: help;
  position: relative;
  user-select: none;
  transition: all 0.2s ease;
}

.help-tooltip:hover {
  background: #D4AF37;
  color: #000;
}

/* A Nuvem (Corpo do texto) */
.help-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px); /* Espaço para a setinha */
  transform: translateX(-50%) translateY(10px);
  background: #1e293b; /* Fundo escuro sólido para leitura */
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  width: max-content;
  max-width: 220px; /* Reduzi um pouco para não bater nas bordas do celular */
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  pointer-events: none; /* Não atrapalha o mouse */
}

/* A Setinha da Nuvem */
.help-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(10px);
  border: 6px solid transparent;
  border-top-color: #1e293b; /* Mesma cor da nuvem */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 101;
  pointer-events: none;
}

.help-tooltip:hover::after,
.help-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ✅ CRITICAL: Impede o modal de cortar a nuvem */
.modal__panel, 
.modal__body {
  overflow: visible !important;
}
.help-tooltip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color:#E5E7EB;
  font-size:11px;
  font-weight:700;
  cursor:help;
  position:relative;
  user-select:none;
}

.help-tooltip::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:140%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.95);
  color:#E5E7EB;
  border: 1px solid rgba(255,255,255,.14);
  padding:10px 12px;
  border-radius:10px;
  font-size:12px;
  line-height:1.35;
  width:max-content;
  max-width:260px;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index:50;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.help-tooltip:hover::after{
  opacity:1;
  visibility:visible;
}

.checkbox-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  cursor:pointer;
}

.modal__panel, .modal__body {
  overflow: visible !important;
}
.help-tooltip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color:#E5E7EB;
  font-size:11px;
  font-weight:700;
  cursor:help;
  position:relative;
  user-select:none;
}

.help-tooltip::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:140%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.95);
  color:#E5E7EB;
  border: 1px solid rgba(255,255,255,.14);
  padding:10px 12px;
  border-radius:10px;
  font-size:12px;
  line-height:1.35;
  width:max-content;
  max-width:260px;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index:50;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.help-tooltip:hover::after{
  opacity:1;
  visibility:visible;
}

.checkbox-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  cursor:pointer;
}

.modal__panel, .modal__body {
  overflow: visible !important;
}