[hidden] { display: none !important }
:root {
  --paper: #f3f6f1; --card: #ffffff; --ink: #0f1d18; --ink-2: #4c5c55; --ink-3: #8a9891; --rule: #dfe6df;
  --note: #0b6e4f; --note-soft: #e1efe8; --in: #0f8a5c; --out: #b4432e; --agent: #9a6b00;
  --c1: #0b6e4f; --c2: #2f8f7a; --c3: #5aa58f; --c4: #8fbfa9; --c5: #c7a24a; --c6: #b4762e; --c7: #9a8c7d; --c8: #6b7d76; --c9: #b8c4be;
  --f-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0c1411; --card: #14201b; --ink: #e8efe9; --ink-2: #a9b8b0; --ink-3: #74857c; --rule: #22312a; --note: #3fbf8f; --note-soft: #173328; --in: #46c991; --out: #e2775f;
    --c1: #3fbf8f; --c2: #34a58a; --c3: #5fb7a0; --c4: #8fcab3; --c5: #d9b45c; --c6: #d08a45; --c7: #a99b8b; --c8: #7f948b; --c9: #4b5c55; color-scheme: dark }
}
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--f-body); font-variant-numeric: tabular-nums }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); flex-wrap: wrap }
.brand { display: flex; gap: 8px; align-items: center; font: 700 19px var(--f-display) }
.leaf { width: 22px; height: 22px; fill: var(--note) }
nav { display: flex; gap: 4px; flex: 1 }
nav button { background: none; color: var(--ink-2); font-weight: 500; padding: 7px 12px }
nav button.on { background: var(--note-soft); color: var(--note); font-weight: 600 }
main { max-width: 980px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 18px }
section { display: grid; gap: 16px; align-content: start }
h1 { font: 700 26px/1.1 var(--f-display); margin: 0; letter-spacing: -.01em }
.head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.head input { flex: 1; min-width: 200px }
.muted { color: var(--ink-3) }
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600 }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 16px; display: grid; gap: 8px; min-width: 0 }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.big { font: 700 28px/1 var(--f-display); letter-spacing: -.02em }
.in { color: var(--in) } .out { color: var(--out) }
.scroll { overflow-x: auto }
#flow { min-width: 520px }
svg text { fill: var(--ink-2); font: 500 11px var(--f-body) }
svg .lbl { fill: var(--ink); font-weight: 600 }
button { font: inherit; border: 0; border-radius: 12px; padding: 10px 16px; cursor: pointer; background: var(--note); color: var(--paper); font-weight: 600 }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule) }
button.sm { padding: 6px 10px }
button.link { background: none; color: var(--ink-2); padding: 0; text-decoration: underline; font-weight: 400 }
button:disabled { opacity: .5; cursor: default }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px }
input, select { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--card); color: var(--ink) }
.list { gap: 0; padding: 4px 16px }
.day { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 12px 0 2px }
.row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule) }
.row:last-child { border-bottom: 0 }
.row .m { min-width: 0; display: grid }
.row .m b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.row .m span { font-size: 12px; color: var(--ink-3) }
.row select { padding: 4px 8px; font-size: 13px; border-radius: 99px; background: var(--note-soft); color: var(--note); border: 0; font-weight: 600 }
.amt { font-weight: 600; text-align: right; min-width: 90px }
.promise { background: var(--note-soft); color: var(--ink-2); border: 0 }
.auth { max-width: 400px; margin: 24px auto; gap: 12px }
.auth label { font-size: 13px; color: var(--ink-2) }
.auth input { width: 100% }
.auth .code { letter-spacing: .45em; font-size: 20px; text-align: center }
.wide { width: 100% }
.google { background: var(--card); color: var(--ink); border: 1px solid var(--rule) }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule) }
.err { color: var(--out); font-size: 13px; min-height: 18px }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-size: 14px }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr } .big { font-size: 24px } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }
.legend { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2) }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px }
.in-sw { background: var(--in) } .out-sw { background: var(--c8) }
.group { display: grid; gap: 0 }
.group .gh { display: flex; justify-content: space-between; padding: 12px 0 4px; font-weight: 600 }
#acct-list { display: grid; gap: 12px }