:root{
  --navy:#18233C; --navy-deep:#0F1726; --gold:#B0892F; --plus:#3B6E52;
  --burg:#7B2D3A; --forest:#2C4A3A;
  --paper:#F7F6F2; --white:#FFFFFF; --ink:#23252A; --ink-soft:#5A6273;
  --line:#E6E8EC; --pos:#207A4E; --neg:#A8442C; --red:#C0392B; --warn:#B7791F;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overscroll-behavior-y:none; }
body{
  font-family:"Segoe UI",system-ui,sans-serif; background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; min-height:100%;
}
button, input, select, textarea{ font-family:inherit; }

.wm{ font-family:Georgia,serif; font-weight:700; color:var(--navy-deep); }
.wm .a{ color:var(--plus); }

.pos{ color:var(--pos); } .neg{ color:var(--neg); } .warn{ color:var(--warn); }

.leer{ text-align:center; color:var(--ink-soft); font-size:14px; padding:60px 20px; }

.card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; }
.card h3{ font-family:Georgia,serif; font-size:15px; margin:0 0 10px; color:var(--navy-deep); }

.day{ font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin:14px 4px 6px; }

label{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 6px; }
input[type="text"], input[type="date"], input[type="number"], input[type="tel"], select, textarea{
  width:100%; font:inherit; font-size:16px; padding:13px 14px; border:1px solid var(--line);
  border-radius:11px; background:var(--paper); color:var(--ink);
}
textarea{ resize:vertical; min-height:70px; }

.btn{ font:inherit; font-size:15px; font-weight:700; padding:12px 16px; border:0; border-radius:11px; background:var(--navy); color:#fff; }
.btn:active{ background:var(--navy-deep); }
.btn.ghost{ background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.btn.danger{ background:var(--neg); }
.btn.block{ width:100%; }

/* Modul-Farbtrennung 1:1 aus der Desktop-App: Controlling=Gold, Wiederkehrende
   Zahlungen=Burgund, Versicherungen=Waldgrün. Wird von app.js als Klasse auf
   #view gesetzt (siehe VIEWS[...].accentClass). */
#view.accent-gold .card h3{ color:var(--gold); }
#view.accent-gold .btn:not(.ghost):not(.danger){ background:var(--gold); }
#view.accent-burg .card h3{ color:var(--burg); }
#view.accent-burg .btn:not(.ghost):not(.danger){ background:var(--burg); }
#view.accent-forest .card h3{ color:var(--forest); }
#view.accent-forest .btn:not(.ghost):not(.danger){ background:var(--forest); }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-size:13px; font-weight:600; color:var(--ink); }
.chip.off{ opacity:.4; text-decoration:line-through; }

.toast{ position:fixed; left:50%; bottom:calc(90px + var(--safe-b)); transform:translateX(-50%); background:var(--navy-deep); color:#fff; padding:10px 18px; border-radius:10px; font-size:13.5px; z-index:200; opacity:0; pointer-events:none; transition:opacity .2s ease; max-width:88vw; text-align:center; }
.toast.on{ opacity:1; }