:root{--bg:#f6f8f7;--kaart:#fff;--inkt:#14211d;--stil:#5c6b66;--accent:#0f7a5c;--fout:#b3261e;--rand:#d9e0dd;color:var(--inkt);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#0f1614;--kaart:#18221f;--inkt:#e8efec;--stil:#9fb0aa;--accent:#4fd1a5;--fout:#ff8a80;--rand:#2a3833}}*{box-sizing:border-box}body{background:var(--bg);margin:0}main{max-width:32rem;padding:calc(env(safe-area-inset-top) + 1.5rem) 1rem calc(env(safe-area-inset-bottom) + 1.5rem);margin:0 auto}h1{margin:0;font-size:1.75rem}.lead,.leeg{color:var(--stil)}.status,.log{background:var(--kaart);border:1px solid var(--rand);border-radius:.75rem;margin:1rem 0;padding:.75rem 1rem .75rem 2rem}.status li,.log li{padding:.2rem 0}.log .fout{color:var(--fout)}.knoppen{gap:.5rem;display:grid}button{min-height:3rem;font:inherit;color:var(--bg);background:var(--accent);border:0;border-radius:.75rem;padding:0 1rem;font-weight:600}button.stil{color:var(--stil);border:1px solid var(--rand);background:0 0}button:disabled{opacity:.5}h2{margin:2rem 0 0;font-size:1.2rem}.bank .knoppen{margin-top:1rem}.bank .leeg{margin:0}.formulier{gap:.75rem;margin-top:1rem;display:grid}.formulier label{gap:.3rem;font-weight:600;display:grid}input{min-height:3rem;font:inherit;color:var(--inkt);background:var(--kaart);border:1px solid var(--rand);border-radius:.75rem;padding:0 .85rem;font-weight:400}input:focus{outline:2px solid var(--accent);outline-offset:1px}.hint{color:var(--stil);margin:0;font-size:.9rem}.melding.fout{color:var(--fout);margin:0}button.link{min-height:auto;color:var(--accent);background:0 0;padding:0;font-weight:600}main.met-tabs{padding-bottom:calc(env(safe-area-inset-bottom) + 5rem)}.kaart{background:var(--kaart);border:1px solid var(--rand);border-radius:1rem;gap:.5rem;margin:1rem 0;padding:1rem;display:grid}.kaart p{margin:0}.kaart h2{margin:0;font-size:1.05rem}.kaart.groot{padding:1.25rem}.label{color:var(--stil);font-size:.9rem}.hoofdbedrag{letter-spacing:-.02em;color:var(--accent);font-size:2.5rem;font-weight:700}button.melding-kaart{inline-size:100%;text-align:start;min-height:auto;color:var(--inkt);font-weight:500;display:block}button.gevaar{color:var(--fout)}.potjes{gap:.9rem;margin:0;padding:0;list-style:none;display:grid}.potjes li{grid-template-columns:1fr auto;gap:.3rem .75rem;display:grid}.potjes li>label{grid-column:1/-1}.potjes .naam{font-weight:600}.potjes .balk-voortgang,.potjes .detail{grid-column:1/-1}.detail{color:var(--stil);font-size:.85rem}.balk-voortgang{background:var(--rand);border-radius:1rem;block-size:.5rem;display:block;overflow:hidden}.balk-voortgang>span{background:var(--accent);border-radius:inherit;block-size:100%;display:block}.balk-voortgang.bijna>span{background:#c98a00}.balk-voortgang.op>span{background:var(--fout)}.bedrag{font-variant-numeric:tabular-nums;white-space:nowrap}.bedrag.min{color:var(--fout)}.transacties{gap:.5rem;margin:1rem 0;padding:0;list-style:none;display:grid}.transacties li{background:var(--kaart);border:1px solid var(--rand);border-radius:.75rem;grid-template-columns:1fr auto;gap:.25rem .75rem;padding:.75rem 1rem;display:grid}.transacties li.open{border-color:var(--accent)}.transacties .wie{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.transacties select{min-height:2.5rem;font:inherit;color:var(--inkt);background:var(--bg);border:1px solid var(--rand);border-radius:.5rem;grid-column:1/-1;padding:0 .5rem}.euro{gap:.3rem;font-weight:600;display:grid}.euro-veld{align-items:center;gap:.5rem;display:flex}.euro-veld input{flex:1;min-inline-size:0}.euro.ongeldig input{border-color:var(--fout)}fieldset{border:1px solid var(--rand);border-radius:1rem;gap:.75rem;margin:0;padding:1rem;display:grid}legend{padding:0 .25rem;font-weight:700}.wizard .stap{color:var(--stil);margin:0 0 .5rem}.wizard h1{font-size:1.5rem}.wizard .terug{inline-size:100%;margin-top:.75rem}.keuzes{gap:.5rem;display:grid}.keuzes button{text-align:start;gap:.15rem;padding:.75rem 1rem;display:grid}.keuzes small{opacity:.85;font-weight:400}.tabbalk{padding:.25rem .5rem calc(env(safe-area-inset-bottom) + .25rem);background:var(--kaart);border-top:1px solid var(--rand);grid-template-columns:repeat(5,1fr);display:grid;position:fixed;inset:auto 0 0}.tabbalk button{min-height:3rem;color:var(--stil);background:0 0;font-weight:600}.tabbalk button.actief{color:var(--accent)}.maandkeuze{text-align:center;grid-template-columns:3rem 1fr 3rem;align-items:center;gap:.5rem;font-weight:600;display:grid}.maandkeuze button{padding:0;font-size:1.4rem}.maandkeuze small{color:var(--stil);font-weight:400}.drie{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.getal{font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:700}.rest.min{color:var(--fout)}.rest.plus{color:var(--accent)}.tips{gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.tips li{border-inline-start:4px solid var(--rand);background:var(--bg);border-radius:.25rem;padding:.6rem .75rem}.tips li.goed{border-color:var(--accent)}.tips li.let-op{border-color:#c98a00}.reflectie{gap:.5rem;font-weight:600;display:grid}textarea{font:inherit;color:var(--inkt);background:var(--bg);border:1px solid var(--rand);resize:vertical;border-radius:.75rem;padding:.75rem;font-weight:400}.tabbalk button{padding:0 .25rem;font-size:.85rem}.keuzes.naast{grid-template-columns:1fr 1fr}.keuzes.naast button{text-align:center;justify-content:center}input[type=date]{inline-size:100%}.formulier select{min-height:3rem;font:inherit;color:var(--inkt);background:var(--kaart);border:1px solid var(--rand);border-radius:.75rem;padding:0 .75rem;font-weight:400}button.link.klein{color:var(--fout);justify-self:start;font-size:.85rem}.potjes li.bewerk{border-bottom:1px solid var(--rand);grid-template-columns:1fr;gap:.4rem;padding-bottom:.75rem;display:grid}.potjes li.bewerk:last-child{border-bottom:0;padding-bottom:0}.overschot{color:var(--stil);gap:.25rem;font-size:.85rem;display:grid}.overschot select{min-height:2.25rem;font:inherit;color:var(--inkt);background:var(--bg);border:1px solid var(--rand);border-radius:.5rem;padding:0 .5rem}.herstelcode{letter-spacing:.05em;text-align:center;word-break:break-all;background:var(--kaart);border:2px dashed var(--accent);-webkit-user-select:all;user-select:all;border-radius:.75rem;margin:.5rem 0;padding:1rem;font:600 1.15rem/1.4 ui-monospace,SF Mono,Menlo,Consolas,monospace}input.code{letter-spacing:.05em;text-transform:uppercase;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.slot{align-content:start;gap:.75rem;display:grid}.slot h1{margin-bottom:.25rem}.lijstje{margin:0;padding-left:1.2rem}.vinkje{align-items:center;gap:.6rem;font-weight:600;display:flex}.vinkje input{block-size:1.4rem;inline-size:1.4rem;min-height:auto;accent-color:var(--accent)}:root{--reeks-1:#2a78d6;--reeks-2:#eb6834;--plan:#8a9792}@media (prefers-color-scheme:dark){:root{--reeks-1:#3987e5;--reeks-2:#d95926;--plan:#6f7d78}}.grafiek{gap:.5rem;margin:0;display:grid}.grafiek figcaption{gap:.2rem;display:grid}.grafiek .titel{font-weight:700}.legenda{color:var(--stil);flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.8rem;display:flex}.sleutel{margin-inline-start:.4rem;display:inline-block}.sleutel:first-child{margin-inline-start:0}.sleutel.lijn{border-top:2px solid var(--accent);block-size:0;inline-size:1rem}.sleutel.lijn.plan{border-top:2px dashed var(--plan)}.sleutel.blok{background:var(--accent);border-radius:2px;block-size:.7rem;inline-size:.7rem}.sleutel.blok.reeks-1{background:var(--reeks-1)}.sleutel.blok.reeks-2{background:var(--reeks-2)}.sleutel.streep{background:var(--inkt);block-size:.8rem;inline-size:2px}.grafiek-vlak{position:relative}.grafiek svg{touch-action:pan-y;block-size:auto;inline-size:100%;display:block}.grafiek .raster{stroke:var(--rand);stroke-width:1px}.grafiek .as{fill:var(--stil);font-size:10px}.grafiek .planlijn{stroke:var(--plan);stroke-width:2px;stroke-dasharray:4 4}.grafiek .lijn-accent{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.grafiek .vlak-accent{fill:var(--accent);opacity:.12}.grafiek .punt-accent{fill:var(--accent);stroke:var(--kaart);stroke-width:2px}.grafiek .kruis{stroke:var(--stil);stroke-width:1px}.grafiek .vul-reeks-1{fill:var(--reeks-1)}.grafiek .vul-reeks-2{fill:var(--reeks-2)}.grafiek .waarde-label{fill:var(--inkt);font-size:10px;font-weight:600}.grafiek .raak{fill:#0000}.tooltip{min-inline-size:9rem;color:var(--inkt);background:var(--kaart);border:1px solid var(--rand);pointer-events:none;border-radius:.5rem;gap:.1rem;padding:.5rem .65rem;font-size:.8rem;display:grid;position:absolute;inset-block-start:0;transform:translate(-50%);box-shadow:0 4px 14px #0000001f}.meterlijst{gap:.8rem;margin:0;padding:0;list-style:none;display:grid}.meterlijst li{grid-template-columns:1fr auto;gap:.25rem .75rem;display:grid}.meterlijst .naam{font-weight:600}.meterlijst .waarde{font-variant-numeric:tabular-nums}.meterlijst .meter,.meterlijst .detail,.meterlijst .status-over{grid-column:1/-1}.meter{block-size:.6rem;position:relative}.meter .vulling{background:var(--accent);border-radius:0 4px 4px 0;block-size:100%;display:block}.meter .budgetstreep{background:var(--inkt);inline-size:2px;margin-inline-start:-1px;position:absolute;inset-block:-.2rem}.status-over{color:var(--fout);font-size:.85rem;font-weight:600}details.tabel summary{cursor:pointer;color:var(--stil);font-size:.85rem}details.tabel table{border-collapse:collapse;font-variant-numeric:tabular-nums;inline-size:100%;margin-top:.5rem;font-size:.85rem}details.tabel th,details.tabel td{text-align:end;border-bottom:1px solid var(--rand);padding:.3rem .25rem}details.tabel th:first-child,details.tabel td:first-child{text-align:start}.tabbalk button{justify-items:center;gap:.15rem;padding-top:.35rem;display:grid}.tabbalk svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:1.35rem;inline-size:1.35rem}.kaart.groot{background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--kaart)), var(--kaart) 60%)}.veld-met-hint{gap:.25rem;display:grid}button.gevaar-vol{color:#fff;background:var(--fout)}
