:root{
  --roxo:#5B2A86; --rosa:#E91E63; --bg:#f4f1f8; --card:#fff;
  --texto:#221a33; --suave:#726a86; --linha:#e7e1ef;
  --ok:#2e7d32; --atencao:#e69500; --urgente:#c62828; --azul:#1565c0;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--texto);font-size:12px}

/* topo */
.topbar{background:linear-gradient(135deg,var(--roxo),var(--rosa));color:#fff;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(91,42,134,.25)}
.brand{display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto}
.logo-img{width:38px;height:38px;border-radius:10px;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.topbar h1{font-size:1.12rem;margin:0;line-height:1;letter-spacing:.4px}
.sub{font-size:.7rem;opacity:.9}
.topnav{margin-left:auto;display:flex;gap:7px}
.topnav a{color:#fff;text-decoration:none;font-size:.72rem;font-weight:600;border:1px solid rgba(255,255,255,.55);padding:5px 10px;border-radius:999px;white-space:nowrap}
.abas{display:flex;gap:5px;max-width:1180px;margin:9px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{white-space:nowrap;color:#fff;text-decoration:none;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16)}
.aba.on{background:#fff;color:var(--roxo)}

.container{max-width:1180px;margin:0 auto;padding:13px}
.rodape{text-align:center;font-size:.72rem;color:var(--suave);padding:16px}
.flash{padding:9px 12px;border-radius:10px;font-size:.85rem;margin-bottom:10px}
.flash.ok{background:#eaf5ea;color:var(--ok)} .flash.aviso{background:#fff6e5;color:var(--atencao)} .flash.erro{background:#fdecea;color:var(--urgente)}
h2.pagina-titulo{margin:2px 0;color:var(--roxo);font-size:1.15rem}
.pagina-sub{margin:0 0 12px;color:var(--suave);font-size:.82rem}
.secao-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 10px;flex-wrap:wrap}
.secao-head select,.selano{padding:7px 10px;border:1px solid var(--linha);border-radius:9px;font-size:.85rem;background:#fff}

/* KPI tiles */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:12px}
.stat{background:var(--card);border-radius:12px;padding:10px 9px;text-align:center;box-shadow:0 1px 5px rgba(0,0,0,.05)}
.stat .num{display:block;font-size:1.02rem;font-weight:800;color:var(--roxo);letter-spacing:-.3px}
.stat .lbl{font-size:.62rem;color:var(--suave);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;display:block}
.stat.receber .num{color:var(--azul)} .stat.ok .num{color:var(--ok)} .stat.pagar .num{color:var(--urgente)}
.stat.pos .num{color:var(--ok)} .stat.neg .num{color:var(--urgente)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:12px}
.kpi{background:var(--card);border-radius:11px;padding:9px 11px;box-shadow:0 1px 5px rgba(0,0,0,.05);border-left:4px solid var(--roxo)}
.kpi .lbl{font-size:.64rem;color:var(--suave);text-transform:uppercase;font-weight:700;letter-spacing:.02em}
.kpi .num{font-size:1.02rem;font-weight:800;margin-top:2px}

.destaque{background:var(--card);border-radius:12px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 5px rgba(0,0,0,.05);margin-bottom:12px;border-left:5px solid var(--linha)}
.destaque.pos{border-left-color:var(--ok)} .destaque.neg{border-left-color:var(--urgente)}
.destaque .lbl{font-size:.78rem;color:var(--suave)} .destaque strong{font-size:1.2rem}
.destaque.pos strong{color:var(--ok)} .destaque.neg strong{color:var(--urgente)}

/* atalhos */
.atalhos{display:grid;gap:8px;margin-bottom:12px}
.atalho{display:flex;align-items:center;gap:11px;background:var(--card);border-radius:12px;padding:11px;text-decoration:none;color:var(--texto);box-shadow:0 1px 5px rgba(0,0,0,.05);border-left:4px solid var(--roxo)}
.atalho.receber{border-left-color:var(--azul)} .atalho.pagar{border-left-color:var(--urgente)}
.atalho .ico{font-size:1.3rem}
.atalho span{display:flex;flex-direction:column;font-weight:700}
.atalho em{font-style:normal;font-weight:500;color:var(--suave);font-size:.74rem}

/* cards / forms */
.card-simples{background:var(--card);border-radius:12px;padding:12px;box-shadow:0 1px 5px rgba(0,0,0,.05);margin-bottom:12px}
.bloco-titulo{font-weight:800;color:var(--roxo);margin-bottom:4px;font-size:.92rem}
.dica{color:var(--suave);font-size:.76rem;margin:0 0 10px}
.hint-save{font-size:.72rem;color:var(--suave);margin:0 2px 8px}
.form-add{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-end}
.form-add input,.form-add select{flex:1;min-width:110px;padding:8px 10px;border:1px solid var(--linha);border-radius:9px;font-size:.86rem}
.form-receb{display:flex;flex-direction:column;gap:9px}
.form-receb .linha{display:flex;gap:9px;flex-wrap:wrap} .form-receb .linha.fim{align-items:flex-end}
.form-receb label{display:flex;flex-direction:column;font-size:.66rem;font-weight:700;color:var(--suave);gap:3px;flex:1;min-width:88px;text-transform:uppercase}
.form-receb label.full{flex-basis:100%} .form-receb label.valor{min-width:110px}
.form-receb input,.form-receb select{padding:8px 9px;border:1px solid var(--linha);border-radius:9px;font-size:.84rem;background:#fff;font-weight:500}
.id-campo{display:flex;gap:5px} .id-campo input{flex:1;min-width:0}
.cal-btn{width:40px;flex:0 0 auto;padding:7px 3px;border:1px solid var(--linha);border-radius:9px;background:#fff;color:var(--roxo);cursor:pointer}
.cal-btn::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer}
.status-busca{flex:1;min-width:120px;font-size:.76rem;font-weight:600;color:var(--suave);padding-bottom:9px}
.status-busca.ok{color:var(--ok)} .status-busca.erro{color:var(--urgente)}

/* botões */
.btn{background:var(--roxo);color:#fff;border:none;padding:9px 14px;border-radius:9px;font-size:.85rem;font-weight:700;cursor:pointer}
.btn.ghost{background:#fff;color:var(--roxo);border:1px solid var(--roxo)} .btn:disabled{opacity:.5}
.btn-mini{background:var(--roxo);color:#fff;border:none;padding:8px 11px;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer}
.btn-del{background:#fff;color:var(--urgente);border:1px solid #f0c8c5;padding:5px 8px;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer}

/* listas (receber/pagar simples) */
.lista-rows{display:grid;gap:7px;margin-bottom:12px}
.row-item{display:flex;justify-content:space-between;align-items:center;gap:9px;background:var(--card);border-radius:10px;padding:9px 11px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.row-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.row-main b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.row-main .mut{font-size:.72rem;color:var(--suave)}
.row-edit{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.row-fim{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.val{font-weight:800;font-size:.92rem;white-space:nowrap}
.badge{font-size:.6rem;text-transform:uppercase;font-weight:800;padding:2px 7px;border-radius:999px;width:max-content}
.badge.ok{background:#eaf5ea;color:var(--ok)} .badge.pend{background:#fff6e5;color:var(--atencao)}
.badge.fora{background:#eef2ff;color:var(--azul)} .badge.oficial{background:#f3e8ff;color:#7e22ce}

/* inputs editáveis */
.edit{border:1px solid transparent;border-radius:7px;padding:5px 7px;font-size:.86rem;background:#faf8fd;color:var(--texto);font-family:inherit;font-weight:600;width:100%}
.edit:focus{outline:none;border-color:var(--roxo);background:#fff;box-shadow:0 0 0 3px rgba(91,42,134,.12)}
.edit.money{text-align:right;max-width:120px}
.edit.saving{opacity:.6} .edit.saved{border-color:var(--ok);background:#eaf5ea}
select.edit{background:#faf8fd}

/* tabelas: computadas (.tbl) e matrizes (.matriz) */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border-radius:11px;box-shadow:0 1px 5px rgba(0,0,0,.05);margin-bottom:12px}
table.tbl,table.matriz{border-collapse:collapse;width:100%;font-size:.76rem}
table.matriz{min-width:760px} table.tbl{min-width:560px}
table.tbl th,table.tbl td,table.matriz th,table.matriz td{padding:5px 7px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--linha)}
table.tbl thead th,table.matriz thead th{background:var(--roxo);color:#fff;position:sticky;top:0;font-size:.66rem;text-transform:uppercase;font-weight:700}
th.fix,td.fix{position:sticky;left:0;text-align:left;background:var(--card);z-index:1}
thead th.fix{background:var(--roxo)}
td.fix b{font-size:.8rem} td.fix small{display:block;color:var(--suave);font-weight:500}
table td .edit{max-width:82px;text-align:right;padding:4px 5px;font-size:.78rem}
td.tot,.tot{font-weight:800;color:var(--roxo)}
tr.total td,td.rod{font-weight:800;background:#efe9f6}
tr.total td.fix{background:#efe9f6}
table tbody tr:nth-child(even) td{background:#faf8fd} table tbody tr:nth-child(even) td.fix{background:#faf8fd}
td.futuro,.futuro{color:#b3aec2}
td.pos{color:var(--ok)} td.neg{color:var(--urgente)}
td.ded{color:var(--urgente)} tr.linha-bold td{font-weight:800;background:#f3eefa}
tr.linha-bold td.fix{background:#f3eefa}
.pagar-paga{width:15px;height:15px;accent-color:var(--ok);cursor:pointer;vertical-align:middle}
td.cel-paga{background:#eaf7ec !important}
.cel-pagar{display:flex;gap:3px;align-items:center;justify-content:flex-end}

/* mini gráfico de barras (CSS) */
.bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding:8px 4px;overflow-x:auto;background:var(--card);border-radius:11px;box-shadow:0 1px 5px rgba(0,0,0,.05);margin-bottom:12px}
.bars .grp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:34px;height:100%;justify-content:flex-end}
.bars .cols{display:flex;align-items:flex-end;gap:2px;height:120px}
.bars .col{width:9px;border-radius:3px 3px 0 0;min-height:2px}
.bars .lb{font-size:.6rem;color:var(--suave)}
.legenda{display:flex;gap:12px;flex-wrap:wrap;font-size:.72rem;color:var(--suave);margin:-4px 2px 12px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}

.folha-lista{display:grid;gap:10px}
.folha-card{background:var(--card);border-radius:11px;padding:11px;box-shadow:0 1px 5px rgba(0,0,0,.05)}
.folha-card .cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
.folha-card .cab b{font-size:.9rem} .folha-card .cat{font-size:.64rem;text-transform:uppercase;color:var(--suave);font-weight:700}
.campos{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.campo{display:flex;flex-direction:column;gap:2px}
.campo label{font-size:.6rem;text-transform:uppercase;color:var(--suave);font-weight:700}
.tot-linha{margin-top:7px;text-align:right;font-size:.8rem;color:var(--suave)} .tot-linha b{color:var(--roxo);font-size:.95rem}
.vazio{text-align:center;color:var(--suave);padding:22px}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(30px);background:#221a33;color:#fff;padding:9px 16px;border-radius:999px;font-size:.82rem;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast.ok{background:#2e7d32} .toast.erro{background:#c62828}

/* login / usuários */
body.auth{background:linear-gradient(135deg,var(--roxo),var(--rosa));min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:#fff;border-radius:18px;padding:28px 24px;width:100%;max-width:350px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:10px}
.auth-logo{width:60px;height:60px;border-radius:14px;margin:0 auto 4px;box-shadow:0 3px 9px rgba(0,0,0,.2)}
.auth-card h1{margin:0;font-size:1.3rem;color:var(--roxo)} .auth-sub{color:var(--suave);font-size:.84rem;margin:0 0 6px}
.auth-card input{padding:11px 13px;border:1px solid var(--linha);border-radius:11px;font-size:1rem;width:100%}
.auth-card button{margin-top:4px;padding:11px;border:none;border-radius:11px;background:linear-gradient(135deg,var(--roxo),var(--rosa));color:#fff;font-size:1rem;font-weight:700;cursor:pointer}
.auth-erro{background:#fdecea;color:var(--urgente);padding:8px 11px;border-radius:9px;font-size:.82rem}
.ok-msg{background:#eaf5ea;color:var(--ok);padding:8px 11px;border-radius:9px;font-size:.86rem;margin-bottom:12px}
.form-senha{display:flex;flex-direction:column;gap:9px} .form-senha input{padding:10px 12px;border:1px solid var(--linha);border-radius:10px;font-size:.92rem}
.user-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.user-list li{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:11px;padding:11px 13px;box-shadow:0 1px 5px rgba(0,0,0,.05)}
.user-list em{color:var(--suave);font-style:normal;font-size:.78rem}
.voltar{color:var(--roxo);text-decoration:none;font-weight:600;font-size:.86rem}
.filtros{background:var(--card);border-radius:12px;padding:10px;margin-bottom:11px;box-shadow:0 1px 5px rgba(0,0,0,.05)}
.filtros label{display:block;font-size:.66rem;text-transform:uppercase;color:var(--suave);font-weight:700;margin-bottom:4px}
.filtros select{width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--linha);background:#fff;font-size:.86rem}

@media(min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)} .kpis{grid-template-columns:repeat(4,1fr)}
  .campos{grid-template-columns:repeat(5,1fr)}
}
@media(min-width:900px){
  body{font-size:13.5px}
  .atalhos{grid-template-columns:repeat(2,1fr)} .folha-lista{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(7,1fr)} .campos{grid-template-columns:repeat(9,1fr)}
  table.tbl,table.matriz{font-size:.8rem}
}