:root{--bg:#f6f7f9;--card:#fff;--text:#1d2330;--muted:#667085;--line:#e3e6ec;--accent:#2f5bea;--pos:#17724a;--neg:#b3261e;--inc:#2f5bea;--exp:#e8871e;--warn:#fff4e5}
@media (prefers-color-scheme:dark){:root{--bg:#14171d;--card:#1d222b;--text:#e8ebf1;--muted:#98a2b3;--line:#2d3440;--accent:#7b9bff;--pos:#4cc38a;--neg:#ff8a80;--inc:#7b9bff;--exp:#f2a649;--warn:#3a2f1c}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent)}
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar{max-width:1050px;margin:auto;padding:.6rem 1rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.brand{font-weight:700;margin-right:auto}
nav{display:flex;flex-wrap:wrap;gap:.2rem}
nav a{padding:.35rem .7rem;border-radius:8px;text-decoration:none;color:var(--text)}
nav a:hover{background:var(--bg)}
nav a.on{background:var(--accent);color:#fff}
main{max-width:1050px;margin:1.2rem auto;padding:0 1rem 3rem}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:0 0 .7rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1rem;overflow-x:auto}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:1rem}
.grid .card{margin:0}
.kpi .label{color:var(--muted);font-size:.85rem}
.kpi .value{font-size:1.6rem;font-weight:700}
.pos{color:var(--pos)}.neg{color:var(--neg)}.muted{color:var(--muted)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.8rem;color:var(--muted);font-weight:600}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;max-width:100%}
textarea{width:100%}
button,.btn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:.45rem .9rem;cursor:pointer;text-decoration:none;display:inline-block}
button.ghost,.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button.danger{background:transparent;color:var(--neg);border:1px solid var(--line)}
form.inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end}
form.inline label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);gap:.15rem}
.msg{padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem;border:1px solid var(--line);background:var(--card)}
.msg.error{border-color:var(--neg);color:var(--neg)}.msg.ok{border-color:var(--pos)}
.switch{display:flex;gap:.3rem}
.switch button{background:var(--bg);color:var(--text);border:1px solid var(--line)}
.switch button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
meter,progress{width:100%;height:.8rem}
.row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr minmax(90px,auto);gap:.6rem;align-items:center;padding:.25rem 0}
.tag{font-size:.75rem;padding:.1rem .5rem;border-radius:99px;border:1px solid var(--line)}
.tag.bezahlt{color:var(--pos);border-color:var(--pos)}.tag.offen{color:var(--neg);border-color:var(--neg)}
.legend{display:flex;gap:1rem;font-size:.85rem;color:var(--muted)}
.chart{width:100%;height:auto}
.chart text{fill:var(--muted);font-size:11px}
.chart .base{stroke:var(--line)}
.i{fill:var(--inc)}.e{fill:var(--exp)}
.monthnav{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.login{max-width:380px;margin:12vh auto}
details summary{cursor:pointer;color:var(--accent)}
@media(max-width:640px){.row{grid-template-columns:1fr 1fr}.row progress,.row meter{grid-column:1/-1;order:3}}