:root{
  --paper:#f7f5f0; --surface:#ffffff; --surface-2:#f0ede5; --ink:#1a2338; --ink-dim:#5b6478;
  --border:#ddd8cb; --teal:#16305c; --teal-2:#2f5c9e; --on-accent:#fdfcf9;
  --green:#1c7a4d; --red:#a3271e; --copper:#b8863a; --shadow:0 2px 10px rgba(20,20,10,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#0d0f14; --surface:#161922; --surface-2:#1d212c; --ink:#eef0f4; --ink-dim:#9aa2b4; --border:#2a2f3d; --teal:#3a63b8; --on-accent:#ffffff; }
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;}
input,select,button{font-family:inherit;font-size:14px;}
.tela{min-height:100vh;}
.card-login{max-width:360px;margin:12vh auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;}
.card-login h1{font-size:22px;margin:0;color:var(--teal);}
.card-login .sub{margin:0;color:var(--ink-dim);font-size:13px;}
.card-login label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-dim);}
.card-login input{padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--paper);color:var(--ink);}
.erro{color:var(--red);font-size:13px;margin:0;}
.btn{padding:9px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;}
.btn.primary{background:var(--teal);border-color:var(--teal);color:var(--on-accent);font-weight:600;}
.btn.small{padding:6px 10px;font-size:13px;}
.btn.ghost{background:transparent;}
.btn.perigo{background:var(--red);border-color:var(--red);color:#fff;}

#tela-app{display:flex;}
.sidebar{width:230px;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px;gap:16px;min-height:100vh;}
.marca{font-weight:700;color:var(--teal);font-size:16px;}
.seletor-empresa{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-dim);}
.seletor-empresa select{padding:7px;border-radius:7px;border:1px solid var(--border);background:var(--paper);color:var(--ink);}
.tabs{display:flex;flex-direction:column;gap:2px;}
.tabs button{text-align:left;background:none;border:none;padding:9px 10px;border-radius:7px;color:var(--ink);cursor:pointer;font-size:14px;}
.tabs button.active{background:var(--teal);color:var(--on-accent);}
.usuario-atual{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-dim);}

main{flex:1;padding:22px 28px;overflow-x:auto;}
.periodo-bar{display:flex;gap:14px;align-items:end;margin-bottom:18px;}
.periodo-bar label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-dim);}
.periodo-bar input{padding:7px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink);}

.kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;min-width:160px;}
.kpi .label{font-size:12px;color:var(--ink-dim);}
.kpi .valor{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:20px;font-weight:600;margin-top:4px;}
.kpi .valor.pos{color:var(--green);}
.kpi .valor.neg{color:var(--red);}

table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;font-size:13px;}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);}
th{background:var(--surface-2);font-weight:600;}
td.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;}
tr.pago{color:var(--green);}
tr.vencido{color:var(--red);}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:50;}
.modal{background:var(--surface);border-radius:12px;padding:22px;min-width:340px;max-width:90vw;box-shadow:var(--shadow);}
.modal h2{margin-top:0;font-size:17px;}
.field{display:flex;flex-direction:column;gap:5px;min-width:0;margin-bottom:10px;}
.field select,.field input{width:100%;min-width:0;padding:7px 9px;border:1px solid var(--border);border-radius:7px;background:var(--paper);color:var(--ink);}
.modal .acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}