*{box-sizing:border-box}
:root{
  color-scheme:light;
  --page:#f9f9f7; --surface:#fcfcfb;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#6e6c66;
  --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834;
  --good:#006300; --bad:#d03b3b;
  /* --accent (não é a cor categórica --s1): usado com texto branco em cima
     (botões, badge), por isso escurecido além do slot 1 do gráfico para
     bater 4.5:1 de contraste com branco — o --s1 do gráfico fica intacto. */
  --accent:#1c5cab;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --page:#0d0d0d; --surface:#1a1a19;
    --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,.10);
    --s1:#3987e5; --s2:#d95926;
    --good:#0ca30c; --bad:#d03b3b;
    --accent:#2f5fa8;
  }
}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

.topbar{border-bottom:1px solid var(--border);background:var(--surface)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;padding-bottom:8px}
h1{font-size:19px;margin:0}
.sub{margin:1px 0 0;font-size:12px;color:var(--ink-2)}
.badge{font-size:11px;border:1px solid var(--border);border-radius:999px;padding:2px 8px;color:var(--ink-2)}

.tabs{display:flex;gap:2px;flex-wrap:wrap;padding-bottom:0;margin-top:4px}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 12px;font:inherit;color:var(--ink-2);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tab .count{display:inline-block;min-width:18px;text-align:center;background:var(--accent);color:#fff;border-radius:999px;font-size:11px;padding:0 5px;margin-left:5px}
.tab .count:empty{display:none}

button{font:inherit;cursor:pointer}
.ghost{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--ink)}
.ghost:hover{border-color:var(--baseline)}
.primary{background:var(--accent);color:#fff;border:1px solid transparent;border-radius:8px;padding:8px 16px;font-weight:600}
.primary:hover{filter:brightness(1.06)}
.primary:disabled{opacity:.5;cursor:default}
.icon{width:32px;height:32px;padding:0;font-size:16px;line-height:1}

main>section{margin:14px 0}
.monthbar{display:flex;align-items:center;gap:8px;margin:16px 0 4px;flex-wrap:wrap}
.monthbar h2{font-size:17px;margin:0 4px;min-width:150px;text-align:center}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.tile .lbl{font-size:12px;color:var(--ink-2)}
.tile .val{font-size:22px;font-weight:600;margin-top:2px}
.tile .obs{font-size:11.5px;color:var(--muted);margin-top:2px}
.pos{color:var(--good)} .neg{color:var(--bad)}
.tile.link{cursor:pointer}
.tile.link:hover{border-color:var(--accent)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.card h2{font-size:15px;margin:0;font-weight:600}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.muted-s{font-size:12px;color:var(--muted);margin:2px 0 0}

.chart svg{display:block}
.chart text{font-family:inherit}
.chart .cat-lbl{font-size:12px;fill:var(--ink-2)}
.chart .val-lbl{font-size:12px;fill:var(--ink-2);font-variant-numeric:tabular-nums}
.hrow:hover .hbar,.hrow:focus .hbar{filter:brightness(1.07)}
.hrow:focus{outline:none}
.hrow:focus-visible .hit{stroke:var(--accent);stroke-width:1.5}
.empty{padding:26px 8px;color:var(--muted);text-align:center;font-size:13px}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:8px 8px;border-bottom:1px solid var(--grid)}
td{padding:8px 8px;border-bottom:1px solid var(--grid);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.empty{border-bottom:none}
.date-td{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.desc-main{font-weight:500}
.desc-sub{font-size:11.5px;color:var(--muted);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

input,select{font:inherit;color:var(--ink);background:var(--page);border:1px solid var(--border);border-radius:8px;padding:7px 9px;min-width:0;max-width:100%}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
select.cat-sel{font-size:12.5px;padding:4px 6px}
label.chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}

.dropzone{border:2px dashed var(--baseline);border-radius:12px;padding:34px 16px;text-align:center;color:var(--ink-2);background:var(--surface);transition:border-color .15s}
.dropzone.ativo{border-color:var(--accent);color:var(--ink)}
.dropzone p{margin:4px 0}
.import-result{margin-top:12px}
.import-result ul{margin:6px 0 0;padding-left:20px}
.aviso{border:1px solid var(--border);border-left:3px solid var(--s2);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--ink-2);background:var(--surface);margin-top:12px}

.rev-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--grid)}
.rev-row:last-child{border-bottom:none}
.rev-info{flex:1 1 220px;min-width:0}
.rev-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.foot{margin:18px 0 30px;font-size:12px;color:var(--muted);text-align:center}

#tooltip{position:fixed;display:none;z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 11px;box-shadow:0 6px 20px rgba(0,0,0,.14);font-size:12.5px;pointer-events:none;max-width:260px}
.tt-title{color:var(--ink-2);font-size:11.5px;margin-bottom:4px}
.tt-row{display:flex;align-items:center;gap:7px;margin-top:2px}
.tt-key{width:10px;height:3px;border-radius:2px;flex:none}
.tt-val{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tt-lbl{color:var(--ink-2)}

@media (max-width:560px){
  .desc-sub{max-width:170px}
  .tile .val{font-size:19px}
  th,td{padding:7px 6px}
}