:root{
  --ground:#F4F2ED; --surface:#FFFFFF; --surface-sunk:#EDEAE3;
  --ink:#20242B; --ink-soft:#4A4F58; --muted:#74787F;
  --rule:#DCD7CD; --rule-soft:#E8E4DB;
  --accent:#1D5C56; --accent-soft:#D9E7E4;
  --critical:#A3312A; --critical-soft:#F3DDD9;
  --warn:#96631A; --warn-soft:#F3E6CE;
  --ok:#2C6B4E; --ok-soft:#DCEBE1;
  --on-strong:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#15181D; --surface:#1D2127; --surface-sunk:#22262D;
    --ink:#E6E3DC; --ink-soft:#BBBFC6; --muted:#8F959E;
    --rule:#2E343C; --rule-soft:#262C33;
    --accent:#54AEA2; --accent-soft:#1B3A38;
    --critical:#E2796E; --critical-soft:#3A2220;
    --warn:#D8A155; --warn-soft:#352819;
    --ok:#62B68B; --ok-soft:#1B3128;
    --on-strong:#15181D;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Public Sans",system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px 64px}
.masthead{border-bottom:1.5px solid var(--ink);padding:24px 0 12px;margin-bottom:22px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
h1{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:clamp(28px,6vw,40px);line-height:1.08;margin:0 0 8px}
h2{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
h3{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:22px;margin:0 0 4px}
.stamp,.muted,.note{font-size:13px;color:var(--muted);margin:0}
.note{margin-top:8px}
section{margin-bottom:36px}
.section-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--rule);margin-bottom:12px;padding-bottom:7px}
.section-head h2{border:0;margin:0;padding:0}
.filters{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:var(--ink-soft)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:10px}
.chart-box{position:relative;height:300px;padding:12px}
.chart-box.small{height:240px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px 16px}
.tile .k{font-size:12px;color:var(--muted);margin:0 0 4px}
.tile .v{font-family:"IBM Plex Mono",monospace;font-size:21px;white-space:nowrap;font-weight:500;margin:0;font-variant-numeric:tabular-nums}
.tile .s{font-size:12.5px;color:var(--ink-soft);margin:4px 0 0}
.tile.critical{border-color:var(--critical);background:var(--critical-soft)}
.tile.ok{border-color:var(--ok)}

.dia{margin-bottom:14px}
.dia-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;padding:6px 2px;color:var(--ink-soft);font-weight:600}
.dia-head .saldo{font-family:"IBM Plex Mono",monospace;font-weight:500}
.dia-head.vencido{color:var(--critical)}
.item{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 12px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.item .desc{font-weight:600}
.item .meta{font-size:12.5px;color:var(--muted);grid-column:2}
.item .valor{font-family:"IBM Plex Mono",monospace;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .valor small{display:block;font-size:11.5px;color:var(--muted)}
.item.entrada .valor{color:var(--ok)}
.item.cancelado{opacity:.5}
.acoes{display:flex;gap:6px}
@media (max-width:640px){
  .item{grid-template-columns:auto 1fr auto}
  .acoes{grid-column:1/-1;justify-content:flex-end}
}

.badge{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;border-radius:4px;padding:2px 6px;white-space:nowrap}
.p1{background:var(--critical-soft);color:var(--critical)}
.p2{background:var(--warn-soft);color:var(--warn)}
.p3{background:var(--surface-sunk);color:var(--ink-soft)}
.p4{background:var(--surface-sunk);color:var(--muted)}
.pin{background:var(--ok-soft);color:var(--ok)}
.tag{font-size:11px;border:1px solid var(--rule);border-radius:4px;padding:0 5px;margin-left:6px;color:var(--muted);font-weight:500}
.tag.parcial{border-color:var(--warn);color:var(--warn)}

.contas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.conta{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:12px 14px}
.conta .nome{font-weight:600;display:flex;justify-content:space-between;gap:8px}
.conta .num{font-family:"IBM Plex Mono",monospace;font-size:20px;margin:4px 0 0;font-variant-numeric:tabular-nums}
.conta .num.neg{color:var(--critical)}
.conta .sub{font-size:12px;color:var(--muted)}
.conta button{margin-top:8px}

table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule-soft)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
td.num{font-family:"IBM Plex Mono",monospace;text-align:right;white-space:nowrap}
.table-scroll{overflow-x:auto}

.btn{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--accent);background:var(--accent);color:var(--on-strong);border-radius:6px;padding:6px 12px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.mini{padding:3px 9px;font-size:12px}
select,input{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:6px 8px;width:100%}
.filters select{width:auto}
label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:10px}
label.check{display:flex;gap:6px;align-items:center;margin:0}
label.check input{width:auto}
.filters label{margin:0;display:flex;gap:6px;align-items:center}

dialog{border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink);padding:20px;width:min(480px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
dialog .row.checks{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px}
menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:16px 0 0}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:8px 16px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
#toast.show{opacity:1}

.visoes{display:inline-flex;gap:2px;background:var(--surface-sunk);border:1px solid var(--rule);border-radius:8px;padding:3px;margin:0 0 18px;flex-wrap:wrap}
.visoes button{font:inherit;font-size:14px;font-weight:600;border:0;background:transparent;color:var(--ink-soft);padding:6px 16px;border-radius:6px;cursor:pointer}
.visoes button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ---------- login ---------- */
.login{max-width:380px;margin:12vh auto 0;padding:0 16px}
.login .card{padding:20px}
.login .btn{width:100%;padding:9px;margin-top:4px}
.erro{background:var(--critical-soft);color:var(--critical);border-radius:6px;padding:8px 10px;font-size:13.5px;margin:0 0 12px}

.masthead{position:relative}
.sair{position:absolute;right:0;top:24px}

/* ---------- extrato ---------- */
.sinc{font-size:12.5px;color:var(--muted)}
.sinc.falha{color:var(--critical)}
.tx{display:grid;grid-template-columns:64px 1fr auto;gap:2px 12px;align-items:start;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.tx .quando{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);padding-top:2px}
.tx .desc{font-weight:600;overflow-wrap:anywhere}
.tx .meta{font-size:12.5px;color:var(--muted)}
.tx .valor{font-family:"IBM Plex Mono",monospace;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tx .valor.pos{color:var(--ok)}
.tx .acoes{grid-column:2/-1;flex-wrap:wrap;margin-top:6px}
.tx.conciliada,.tx.ignorada,.tx.anterior{opacity:.62}
.sug{border-style:dashed}
.sug.exata{border-style:solid}
.clip{font-size:12px;text-decoration:none;color:var(--accent);margin-left:6px}
.diferenca{color:var(--warn)}

/* ---------- comprovantes ---------- */
.envio{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin-bottom:10px}
.envio select{width:auto;flex:1 1 220px;min-width:0}
.envio input[type=file]{width:auto;max-width:100%}
.comp{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.comp .meta{font-size:12.5px;color:var(--muted)}
.comp select{width:auto;max-width:100%}
.comp.solto{border-color:var(--warn)}