:root{
    --bg:#f5f7fa;
    --surface:#ffffff;
    --surface-2:#f9fafb;
    --border:#e6e9ef;
    --text:#111827;
    --muted:#6b7280;
    --primary:#4f46e5;
    --primary-600:#4338ca;
    --primary-soft:#eef2ff;
    --in:#10b981;
    --in-soft:#ecfdf5;
    --out:#ef4444;
    --out-soft:#fef2f2;
    --radius:14px;
    --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.04);
    --shadow:0 4px 16px rgba(17,24,39,.06);
    --shadow-lg:0 20px 40px rgba(17,24,39,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:15px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}

/* ---- Layout ---- */
.container-app{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:0 16px;
}
.main-area{padding:20px 16px 90px; display:flex; flex-direction:column; gap:20px}

/* ---- Header ---- */
.app-header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--border);
}
.header-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; height:60px;
}

.header-period{gap:6px;background:var(--surface); border:1px solid var(--border);
    border-radius:999px; padding:4px 6px}
.period-label{font-weight:600; min-width:120px; text-align:center; font-size:13.5px}

.header-actions{display:flex; align-items:center; gap:8px}

.icon-btn{
    width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--muted);
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text)}

.btn-nova, .btn-primary, .btn-outline, .btn-ghost, .btn-danger{
    border:0; border-radius:10px; padding:9px 14px; font-weight:600; font-size:14px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    cursor:pointer; transition:.15s; line-height:1;
}
.btn-nova{background:var(--primary); color:#fff}
.btn-nova:hover{background:var(--primary-600)}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-outline{background:var(--surface); color:var(--text); border:1px solid var(--border)}
.btn-outline:hover{background:var(--surface-2)}
.btn-ghost{background:transparent; color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2); color:var(--text)}
.btn-danger{background:var(--out); color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-primary.btn-lg{padding:12px 18px;font-size:15px}
.btn-primary.btn-sm{padding:6px 10px;font-size:13px}

.user-chip{
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--border); border-radius:999px;
    padding:4px 12px 4px 4px; cursor:pointer; font-weight:600; font-size:13.5px;
}
.user-chip .avatar{
    width:28px;height:28px;border-radius:999px;background:var(--primary-soft); color:var(--primary);
    display:inline-flex; align-items:center; justify-content:center; font-weight:700;
}
.demo-badge{
    display:inline-flex; align-items:center; gap:6px;
    background:#fef3c7; color:#92400e; font-size:12px; font-weight:600;
    padding:5px 10px; border-radius:999px;
}

/* ---- View Switcher (Registros / Contas) ---- */
.view-switcher{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:6px; box-shadow:var(--shadow-sm);
}
.view-btn{
    border:0; background:transparent; border-radius:10px; padding:10px 12px;
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    cursor:pointer; transition:.15s; text-align:left; color:var(--muted);
    font-family:inherit;
}
.view-btn i{ font-size:16px; margin-bottom:2px; color:var(--primary); }
.view-btn span{ font-weight:700; font-size:14px; color:var(--text); display:flex; align-items:center; gap:6px; }
.view-btn small{ font-size:11.5px; color:var(--muted); }
.view-btn:hover{ background:var(--surface-2); }
.view-btn.active{ background:var(--primary); }
.view-btn.active i,
.view-btn.active span,
.view-btn.active small{ color:#fff; }
.view-btn.active i{ opacity:.9; }
.view-btn.active small{ opacity:.8; }
.app-view{ display:flex; flex-direction:column; gap:20px; }

/* ---- KPIs ---- */
.kpis{
    display:grid; grid-template-columns:1fr; gap:12px;
}
@media(min-width:640px){ .kpis{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .kpis{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1100px){ .kpis.kpis-6{grid-template-columns:repeat(6,1fr)} }
.kpis.kpis-contas{ grid-template-columns:1fr; }
@media(min-width:640px){ .kpis.kpis-contas{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .kpis.kpis-contas{grid-template-columns:repeat(4,1fr)} }
.kpi{
    background:var(--surface); border-radius:var(--radius); padding:16px 18px;
    border:1px solid var(--border); box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column; gap:4px;
    transition:.2s;
}
.kpi-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; border:0}
.kpi-primary .kpi-label, .kpi-primary .kpi-hint{color:rgba(255,255,255,.8)}
.kpi-label{font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.02em}
.kpi-value{font-size:22px; font-weight:700; letter-spacing:-.01em}
.kpi-hint{font-size:11.5px; color:var(--muted)}
.text-in{color:var(--in)}
.text-out{color:var(--out)}
.kpi-in .kpi-value{color:var(--in)}
.kpi-out .kpi-value{color:var(--out)}
.kpi-receber .kpi-value{color:var(--in)}
.kpi-pagar .kpi-value{color:var(--out)}

/* ---- Alert cards (Contas) ---- */
.alert-cards{
    display:grid; grid-template-columns:1fr; gap:10px;
}
@media(min-width:640px){ .alert-cards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .alert-cards{grid-template-columns:repeat(3,1fr)} }
.alert-card{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-radius:12px; border:1px solid var(--border);
    background:var(--surface);
}
.alert-card > i{ font-size:22px; flex-shrink:0; }
.alert-body{ display:flex; flex-direction:column; min-width:0; }
.alert-title{ font-size:12.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.02em;}
.alert-val{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.alert-card.alert-vencida{ background:#fef2f2; border-color:#fecaca; }
.alert-card.alert-vencida > i,
.alert-card.alert-vencida .alert-val{ color:#b91c1c; }
.alert-card.alert-hoje{ background:#fff7ed; border-color:#fed7aa; }
.alert-card.alert-hoje > i,
.alert-card.alert-hoje .alert-val{ color:#c2410c; }
.alert-card.alert-proxima{ background:#fffbeb; border-color:#fde68a; }
.alert-card.alert-proxima > i,
.alert-card.alert-proxima .alert-val{ color:#a16207; }
.alert-card.alert-in .alert-val::before{ content:'+ '; }
.alert-card.alert-out .alert-val::before{ content:'− '; }
.alert-empty{
    grid-column:1/-1; padding:18px; border-radius:12px; text-align:center;
    background:var(--in-soft); border:1px solid #a7f3d0; color:#065f46;
    font-weight:600; font-size:14px;
}
.alert-empty i{ margin-right:6px; }

/* ---- Period chips ---- */
.period-bar{display:flex; flex-direction:column; gap:10px}
.period-chips{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.period-chips::-webkit-scrollbar{display:none}
.chip{
    border:1px solid var(--border); background:var(--surface); color:var(--muted);
    padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
    white-space:nowrap; transition:.15s;
}
.chip:hover{background:var(--surface-2); color:var(--text)}
.chip.active{background:var(--primary); color:#fff; border-color:var(--primary)}
.custom-range{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap}
.custom-range .form-control{max-width:160px}

/* ---- Cards ---- */
.card-block{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px; box-shadow:var(--shadow-sm);
}
.block-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; flex-wrap:wrap}
.block-head h2{font-size:15.5px; margin:0; font-weight:700}
.chart-block{padding-bottom:6px}
.chart-wrap{position:relative; width:100%; height:280px}
@media(min-width:768px){ .chart-wrap{height:320px} }

.grid-2{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:768px){ .grid-2{grid-template-columns:1fr 1fr} }

.chart-legend{display:flex; gap:14px; font-size:12.5px; color:var(--muted)}
.chart-legend .dot{display:inline-block; width:9px; height:9px; border-radius:999px; margin-right:5px; vertical-align:middle}
.dot-in{background:var(--in)} .dot-out{background:var(--out)} .dot-bal{background:var(--primary)}

/* ---- Categoria list ---- */
.cat-list{display:flex; flex-direction:column; gap:10px}
.cat-row{display:flex; align-items:center; gap:10px; font-size:14px}
.cat-row .cat-name{flex:1; font-weight:500}
.cat-row .cat-val{font-weight:600; color:var(--muted)}
.cat-bar{height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; width:100%; margin-top:4px}
.cat-bar > span{display:block; height:100%; background:var(--primary); border-radius:999px}
.cat-row.in .cat-bar > span{background:var(--in)}
.cat-row.out .cat-bar > span{background:var(--out)}

/* ---- Mov list ---- */
.block-head-mov{flex-wrap:wrap}
.mov-tools{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.seg{display:inline-flex; background:var(--surface-2); border-radius:999px; padding:3px}
.seg button{
    border:0; background:transparent; color:var(--muted); font-weight:600; font-size:13px;
    padding:6px 12px; border-radius:999px; cursor:pointer; transition:.15s;
}
.seg button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm)}

.search-box{
    position:relative; display:inline-flex; align-items:center;
    background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:0 10px;
    height:36px; min-width:200px;
}
.search-box i{color:var(--muted); margin-right:6px}
.search-box input{border:0; background:transparent; outline:0; font-size:14px; width:100%}

.filtros-avancados{background:var(--surface-2); border-radius:var(--radius-sm); padding:12px; margin-bottom:12px}
.filtros-avancados .form-label{font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px}

.mov-list{display:flex; flex-direction:column}

.mov-item{
    display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center;
    padding:12px 6px; border-bottom:1px solid var(--border); transition:background .15s;
}
.mov-item:hover{background:var(--surface-2)}
.mov-item:last-child{border-bottom:0}

.mov-data{
    background:var(--surface-2); border-radius:10px; text-align:center;
    padding:6px 4px; line-height:1.1; min-width:60px;
}
.mov-data .d{font-weight:700; font-size:16px; display:block}
.mov-data .m{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}

.mov-main{min-width:0}
.mov-desc{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mov-meta{display:flex; gap:8px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; margin-top:2px}
.mov-meta .tag{
    background:var(--surface-2); padding:1px 8px; border-radius:999px;
    white-space:nowrap;
}
.mov-meta .tag.pending{background:#fef3c7; color:#92400e}
.mov-meta .tag.paid{background:var(--in-soft); color:#065f46}
.mov-meta .tag.origem{background:var(--primary-soft); color:#4338ca}
.mov-meta .tag.origem i{ font-size:11px; }

.mov-valor{text-align:right; font-weight:700; font-size:15.5px; white-space:nowrap; letter-spacing:-.01em}
.mov-valor.in{color:var(--in)}
.mov-valor.out{color:var(--out)}

.mov-actions{display:flex; gap:2px; margin-top:2px; justify-content:flex-end; opacity:.4; transition:.15s}
.mov-item:hover .mov-actions{opacity:1}
.mov-actions button{
    width:28px; height:28px; border-radius:8px; border:0; background:transparent;
    color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.mov-actions button:hover{background:var(--surface-2); color:var(--text)}
.mov-actions button.del:hover{background:var(--out-soft); color:var(--out)}

.mov-item.destaque{animation:destaque 1.6s ease-out}
@keyframes destaque{
    0%{background:#fef3c7}
    100%{background:transparent}
}

/* ---- Contas Financeiras list ---- */
.cf-list{display:flex; flex-direction:column}
.cf-item{
    display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
    padding:12px 6px; border-bottom:1px solid var(--border); transition:background .15s;
}
.cf-item:hover{background:var(--surface-2)}
.cf-item:last-child{border-bottom:0}
.cf-item.is-baixada{ opacity:.72; }
.cf-main{ min-width:0; }
.cf-desc{ font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-meta{ display:flex; gap:8px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; margin-top:3px; }
.cf-meta .tag{ background:var(--surface-2); padding:1px 8px; border-radius:999px; white-space:nowrap; }

.cf-valor{ text-align:right; font-weight:700; font-size:15.5px; white-space:nowrap; letter-spacing:-.01em; }
.cf-valor.in{ color:var(--in); }
.cf-valor.out{ color:var(--out); }

.cf-badge{
    display:inline-flex; align-items:center; gap:4px;
    background:var(--surface-2); color:var(--muted);
    padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600;
}
.cf-badge-late{ background:#fee2e2; color:#b91c1c; }
.cf-badge-today{ background:#ffedd5; color:#c2410c; }
.cf-badge-soon{ background:#fef3c7; color:#a16207; }
.cf-badge-ok{ background:var(--in-soft); color:#065f46; }

.cf-actions{ display:flex; gap:2px; opacity:.4; transition:.15s; }
.cf-item:hover .cf-actions{ opacity:1; }
.cf-actions button{
    width:30px; height:30px; border-radius:8px; border:0; background:transparent;
    color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.cf-actions button:hover{ background:var(--surface-2); color:var(--text); }
.cf-actions button.del:hover{ background:var(--out-soft); color:var(--out); }
.cf-actions button.ok:hover{ background:var(--in-soft); color:var(--in); }

.cf-item.skeleton{ height:70px; grid-template-columns:1fr; }
.cf-item.skeleton > div{ height:12px; margin:6px 0; background:linear-gradient(90deg,#eef0f5 25%,#f6f7fb 37%,#eef0f5 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:6px; }

/* empty state */
.empty{
    text-align:center; padding:40px 20px; color:var(--muted);
}
.empty i{font-size:34px; opacity:.4}

/* pagination */
.paginacao{display:flex; gap:4px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.paginacao button{
    min-width:34px;height:34px;border:1px solid var(--border); background:var(--surface);
    border-radius:8px; font-size:13px; cursor:pointer; color:var(--text); font-weight:600;
    padding:0 10px;
}
.paginacao button.active{background:var(--primary); color:#fff; border-color:var(--primary)}
.paginacao button:disabled{opacity:.4; cursor:not-allowed}

/* ---- FAB ---- */
.fab{
    position:fixed; bottom:20px; right:20px; z-index:80;
    width:56px;height:56px;border-radius:50%; border:0;
    background:var(--primary); color:#fff; box-shadow:var(--shadow-lg);
    font-size:22px; display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}
.fab:active{transform:scale(.95)}

/* ---- Modais ---- */
.modal-content{border-radius:var(--radius); border:0; box-shadow:var(--shadow-lg)}
.modal-sheet .modal-content{border-radius:16px}
@media(max-width:576px){
    .modal-sheet .modal-dialog{margin:0; align-items:flex-end; min-height:100%}
    .modal-sheet .modal-content{border-radius:18px 18px 0 0; min-height:60vh}
}
.modal-header h5{font-weight:700}
.form-label{font-size:13px; font-weight:600; color:#374151; margin-bottom:6px}
.form-control, .form-select{border-radius:10px; border-color:var(--border)}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.form-control-lg{padding:11px 14px; font-size:15px}

.tipo-toggle{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px}
.tipo-btn{
    border:1.5px solid var(--border); background:var(--surface); border-radius:12px;
    padding:12px; font-weight:700; cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center; gap:8px; transition:.15s;
    color:var(--muted);
}
.tipo-btn i{font-size:18px}
.tipo-btn.active.tipo-entrada{background:var(--in-soft); border-color:var(--in); color:#065f46}
.tipo-btn.active.tipo-saida{background:var(--out-soft); border-color:var(--out); color:#991b1b}

.confirm-icon{
    width:56px;height:56px;border-radius:50%; background:var(--out-soft); color:var(--out);
    display:inline-flex; align-items:center; justify-content:center; font-size:26px;
}

/* ---- Auth modal ---- */
.nav-auth{display:flex; gap:6px; list-style:none; padding:0; margin:0}
.nav-auth button{
    border:0; background:transparent; font-weight:700; color:var(--muted);
    padding:6px 10px; cursor:pointer; border-radius:8px; font-size:14px;
}
.nav-auth button.active{color:var(--primary); background:var(--primary-soft)}

.auth-aviso{
    display:flex; gap:8px; align-items:flex-start; font-size:13px;
    background:var(--primary-soft); color:#3730a3; border-radius:10px; padding:10px 12px;
    margin-bottom:14px;
}

/* ---- Toaster ---- */
.toaster{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:2000;
    display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast-item{
    background:#111827; color:#fff; font-size:14px; font-weight:500;
    padding:10px 16px; border-radius:10px; box-shadow:var(--shadow-lg);
    display:flex; align-items:center; gap:8px;
    animation:toast-in .25s ease-out;
    max-width:90vw;
}
.toast-item.ok{background:#065f46}
.toast-item.err{background:#991b1b}
@keyframes toast-in{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.toast-item.fadeout{opacity:0; transition:opacity .3s}

/* skeleton */
.skel{background:linear-gradient(90deg,#eef0f5 25%,#f6f7fb 37%,#eef0f5 63%); background-size:400% 100%;
    animation:skel 1.4s ease infinite; border-radius:8px}
@keyframes skel{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.mov-item.skeleton{height:66px}
.mov-item.skeleton > div{height:14px}

@media(max-width:576px){
    .mov-item{grid-template-columns:56px 1fr auto; gap:10px; padding:12px 2px}
    .mov-data{min-width:52px}
    .header-inner{gap:6px}
    .brand-name{display:none}
    .btn-nova{padding:8px 12px}
    .main-area{padding:14px 12px 90px; gap:14px}
    .kpi{padding:14px}
    .card-block{padding:14px}
    .cf-item{ grid-template-columns:1fr auto; gap:10px; }
    .cf-actions{ grid-column:1/-1; justify-content:flex-end; }
    .view-btn small{ display:none; }
}