@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap');
:root{color-scheme:dark;--bg:#101217;--card:#191d25;--line:#303745;--text:#f0f4fa;--muted:#9aa6b7;--blue:#77c9ff;--blue2:#4d8fff;--pink:#ff8fb8}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Finger Paint',system-ui,sans-serif;min-height:100vh;overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
.card,.section-card,.grouped-column,dialog{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px #0004}
.auth{width:min(440px,92vw);margin:12vh auto;padding:2rem}
.auth h1{margin-top:-2rem;text-align:center}
label{display:grid;gap:.4rem;margin:.9rem 0;color:var(--muted)}
input,select{background:#10141b;color:var(--text);border:1px solid #3a4556;border-radius:10px;padding:.72rem}
.save,.save-more,.cancel,.subtle{border:0;border-radius:10px;padding:.65rem 1rem;color:#08111a}
.save{background:var(--blue)}
.save-more{background:var(--blue2);color:#fff}
.cancel{background:var(--pink)}
.subtle{background:#d7e6f6}
.error{color:#ff94a6}
#dashboard{height:100vh;padding:clamp(.65rem,1.1vw,1.35rem);display:grid;grid-template-rows:auto 1fr;gap:clamp(.7rem,1vw,1rem)}
.topbar{display:grid;grid-template-columns:minmax(300px,1.15fr) minmax(650px,2fr) minmax(190px,.7fr);align-items:center;gap:1.25rem}
.title-block h1{font-size:clamp(1.35rem,2vw,2.25rem);margin:0 0 .25rem}
.month-nav{display:flex;align-items:center;gap:.55rem}
.month-nav h2{font-size:clamp(.85rem,1vw,1.1rem);margin:0}
.loose{background:transparent;color:var(--text);font-size:1.25rem;border:0}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem 1.1rem}
.summary article{min-width:0;display:flex;justify-content:space-between;gap:.45rem}
.summary small{color:var(--blue);font-size:clamp(.55rem,.75vw,.8rem)}
.summary strong{font-size:clamp(.65rem,.8vw,.9rem);white-space:nowrap}
.editable{cursor:pointer}
.top-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}
.status{width:100%;text-align:right;color:var(--muted);font-size:.6rem}
.cards{display:grid;grid-template-columns:1.02fr 1.03fr 1.03fr 1.04fr;gap:.8rem;min-height:0}
.column{display:grid;min-height:0}
.first-column{grid-template-rows:.9fr 1.1fr;gap:.8rem}
.section-card{padding:.65rem;display:grid;grid-template-rows:auto 1fr;min-height:0}
.full-card{height:100%}
.grouped-column{display:grid;grid-template-rows:repeat(3,1fr);min-height:0;overflow:hidden}
.compartment,.credit-half{padding:.65rem;display:grid;grid-template-rows:auto 1fr;min-height:0}
.compartment+.compartment,.credit-half+.credit-half{border-top:1px solid var(--line)}
.credit-card{padding:0;grid-template-rows:1fr 1fr;overflow:hidden}
.section-head{display:flex;align-items:center;gap:.45rem;min-height:2rem}
.section-head h2{font-size:clamp(.72rem,.95vw,1rem);margin:0;flex:1}
.icon{display:inline-block;width:1.6rem;height:1.6rem;border:1px dashed #667286;border-radius:50%;flex:none}
.add,.edit,.delete{border:0;background:transparent;color:var(--blue);padding:.15rem;font-size:1.05rem}
.delete{color:var(--pink)}
.items{overflow:auto;overscroll-behavior:contain;margin-top:.25rem}
.item{display:grid;grid-template-columns:minmax(90px,1fr) minmax(82px,.55fr) minmax(70px,.4fr) repeat(3,auto);align-items:center;gap:.3rem;padding:.38rem .2rem;border-bottom:1px solid #29303b;font-size:clamp(.58rem,.72vw,.78rem)}
.item span small{display:block;color:var(--muted)}
.item time{text-align:center;color:var(--muted);white-space:nowrap}
.item b{text-align:right;white-space:nowrap}
.income-amount{color:var(--blue)}
.expense-amount{color:var(--pink)}
.skip{border:0;background:transparent;color:#ffc857;font-weight:700;padding:.15rem;cursor:pointer}
.food-item{cursor:pointer}
.food-item:hover{background:#ffffff08}
.add-line{border:1px dashed var(--blue);background:transparent;color:var(--blue);border-radius:9px;padding:.45rem .7rem}
.grocery-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;align-items:end;border-bottom:1px solid var(--line);padding:.35rem 0}
.grocery-row label{margin:.3rem 0}
.grocery-row .custom-store{grid-column:1}
.remove-grocery{border:0;background:transparent;color:var(--pink);font-size:1.2rem;padding:.6rem}
.grocery-total{text-align:right;margin-top:.8rem;color:var(--muted)}
dialog{color:var(--text);width:min(520px,92vw);padding:1.4rem}
dialog::backdrop{background:#05070bcc}
.actions{display:flex;gap:.6rem;margin-top:1.2rem}
.negative{color:#ff93a4}
.positive{color:#8ee6b5}
@media(max-width:1250px),(max-height:720px){body{overflow:auto}
#dashboard{height:auto;min-height:100vh}
.topbar{grid-template-columns:1fr}
.summary{grid-template-columns:repeat(3,1fr)}
.top-actions{justify-content:flex-start}
.status{text-align:left}
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.column{height:600px}
}
@media(max-width:700px){.summary,.cards{grid-template-columns:1fr}
.column{height:560px}
.summary article{padding:.25rem}
.topbar{gap:.65rem}
}
/* Kopfbereich: zwei Wertespalten mit je drei Zeilen. */
.topbar{grid-template-columns:minmax(300px,1.1fr) minmax(620px,1.5fr) minmax(100px,.35fr)}
.summary{grid-template-columns:repeat(2,minmax(250px,1fr));gap:.28rem 2rem}
.summary article{gap:.65rem}
.amount-pink{color:var(--pink)}
.amount-orange{color:#ff9f43}
.top-actions{justify-content:center}
.status{text-align:center;font-size:.58rem}
.sync-icon{width:3.25rem;height:3.25rem;border-radius:50%;border:1px dashed #718096;background:#1a202b;box-shadow:0 5px 18px #0005;display:grid;place-items:center}
.sync-icon span{width:1.75rem;height:1.75rem;border-radius:50%;border:2px dashed var(--blue)}
.sync-icon:hover{border-color:var(--blue);transform:translateY(-1px)}
@media(max-width:1250px),(max-height:720px){.summary{grid-template-columns:repeat(2,minmax(230px,1fr))}}
@media(max-width:700px){.summary{grid-template-columns:1fr}}