:root { color-scheme: light dark; --bg:#0f1115; --card:#1a1d24; --fg:#e8eaf0; --mut:#8a90a0;
  --pos:#3fb47c; --neg:#e2606c; --acc:#5b8def; --warn:#d9a44a; }
@media (prefers-color-scheme: light) { :root { --bg:#f5f6f8; --card:#fff; --fg:#1a1d24; --mut:#667; } }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
main { max-width: 640px; margin: 0 auto; padding: 1rem; }
nav { display:flex; gap:.25rem; padding:.5rem; background:var(--card); position:sticky; top:0;
  border-bottom:1px solid #0003; }
nav a { color:var(--fg); text-decoration:none; padding:.5rem .9rem; border-radius:8px; }
nav a:hover { background:#5b8def22; }
nav .logout { margin-left:auto; }
nav button { background:none; border:none; color:var(--mut); cursor:pointer; padding:.5rem; }
h1 { font-size:1.4rem; } h2 { font-size:1.05rem; margin:.2rem 0 .6rem; }
.card { background:var(--card); border-radius:12px; padding:1rem; margin:.8rem 0; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.tile { background:var(--card); border-radius:12px; padding:.8rem; display:flex; flex-direction:column; }
.tile span { font-size:.72rem; color:var(--mut); } .tile strong { font-size:1.05rem; }
.tile.neg strong { color:var(--neg); } .tile.pos strong { color:var(--pos); }
.pos { color:var(--pos); } .neg { color:var(--neg); }
.warn { color:var(--warn); } .muted { color:var(--mut); font-size:.85rem; }
.err { color:var(--neg); } .ok { color:var(--pos); }
.alert { border-left:4px solid var(--warn); }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:.35rem .4rem; border-bottom:1px solid #ffffff14; }
.form { display:flex; flex-direction:column; gap:.8rem; max-width:360px; }
.form label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; color:var(--mut); }
.form input { padding:.6rem; border-radius:8px; border:1px solid #ffffff22; background:var(--bg); color:var(--fg); }
button, .btn { background:var(--acc); color:#fff; border:none; border-radius:8px; padding:.6rem 1rem;
  font-size:.95rem; cursor:pointer; text-decoration:none; display:inline-block; }
.tx { transition: opacity .3s, transform .3s; }
.tx.done { opacity:0; transform: translateX(30px); }
.tx-head { display:flex; justify-content:space-between; gap:.5rem; }
.tx-desc { font-weight:600; font-size:.92rem; }
.tx-amount { white-space:nowrap; font-weight:700; }
.tx-meta { color:var(--mut); font-size:.78rem; margin:.2rem 0 .5rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip { background:#5b8def22; color:var(--fg); border:1px solid #5b8def55; padding:.35rem .7rem;
  border-radius:999px; font-size:.82rem; }
.chip:active { background:var(--acc); }
.cat-input { flex:1; min-width:110px; padding:.35rem .6rem; border-radius:999px;
  border:1px solid #ffffff22; background:var(--bg); color:var(--fg); font-size:.82rem; }
.qr { width:200px; height:200px; image-rendering:pixelated; }

/* ===== viz (paleta validada: light #2a78d6/#eb6834/#1baf7a · dark #3987e5/#d95926/#199e70) ===== */
:root { --viz-1:#3987e5; --viz-2:#d95926; --viz-3:#199e70; }
@media (prefers-color-scheme: light) { :root { --viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; } }
.viz svg { width:100%; height:auto; display:block; }
.viz .bar.v1 rect:not(.hit) { fill:var(--viz-1); }
.viz .bar.v2 rect:not(.hit) { fill:var(--viz-2); }
.viz .line path { fill:none; stroke-width:2; }
.viz .line.v1 path { stroke:var(--viz-1); } .viz .line.v2 path { stroke:var(--viz-2); }
.viz .line.v3 path { stroke:var(--viz-3); }
.viz .hit { fill:transparent; cursor:pointer; }
.viz .bar:hover rect:not(.hit) { opacity:.8; }
.viz .grid { stroke:#88888833; stroke-width:1; }
.viz .axis { stroke:#88888866; stroke-width:1; }
.viz .zero { stroke:#88888899; stroke-width:1; stroke-dasharray:4 3; }
.viz .dlabel { fill:var(--fg); font-size:11px; font-weight:600; }
.viz .rlabel { fill:var(--fg); font-size:12px; }
.viz .alabel, .viz .glabel { fill:var(--mut); font-size:10px; }
.legend { display:flex; gap:1rem; margin-top:.4rem; font-size:.78rem; color:var(--mut); }
.legend .sw { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.35rem; }
.legend .sw.v1 { background:var(--viz-1); } .legend .sw.v2 { background:var(--viz-2); }
.legend .sw.v3 { background:var(--viz-3); }

/* ===== progresso (obra) ===== */
.progress { margin:.7rem 0; }
.ptrack { position:relative; height:14px; border-radius:7px; background:#88888826; overflow:hidden; }
.pfill { height:100%; border-radius:7px; background:var(--viz-1); }
.pmark { position:absolute; top:-2px; width:2px; height:18px; background:var(--warn); }
.plabels { display:flex; justify-content:space-between; font-size:.75rem; color:var(--mut); margin-top:.25rem; }

/* ===== cartões de transação v2 ===== */
.tx-row { display:flex; gap:.7rem; align-items:flex-start; }
.bankchip { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:.8rem; }
.tx-main { flex:1; min-width:0; }
.opbadge { background:#88888822; border-radius:6px; padding:.1rem .45rem; }
.tx-meta { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.tx-meta .hint { color:var(--warn); }
.count { background:var(--acc); color:#fff; border-radius:999px; padding:.1rem .6rem; font-size:.85rem; }
.explain { color:var(--mut); font-size:.82rem; margin:.3rem 0 .8rem; }
th.num, td.num { text-align:right; }
.tiles { grid-template-columns:repeat(2,1fr); }
@media (min-width:520px) { .tiles { grid-template-columns:repeat(4,1fr); } }