:root{
  --ground:#eef1f6;--surface:#fff;--surface-2:#f6f8fb;--line:#dde3ec;
  --ink:#15202b;--ink-soft:#5c6b7b;--ink-faint:#8a97a6;
  --cool:#1f66ab;--cool-2:#4d9bd6;--cool-wash:#e8f1fa;--warm:#d9793a;--warm-wash:#fbeee1;
  --good:#2f9469;--good-wash:#e5f3ec;--alert:#c76a2c;--alert-wash:#fbeadd;
  --radius:18px;--radius-sm:11px;--shadow:0 1px 2px rgba(20,32,45,.05),0 10px 30px rgba(20,32,45,.08);
  --font:"SF Pro Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media(prefers-color-scheme:dark){:root{--ground:#0e151d;--surface:#18222e;--surface-2:#141d27;--line:#2a3745;--ink:#eef3f8;--ink-soft:#a4b2c1;--ink-faint:#6f7f8f;--cool:#5aa6e0;--cool-wash:#132636;--warm:#e79a5c;--warm-wash:#2a1e14;--good:#4bb98a;--good-wash:#132a20;--alert:#e2925a;--alert-wash:#2a1e14}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);line-height:1.5}
.view{display:none}.view.on{display:block}
.mark{font-size:1rem}
.brand{display:flex;align-items:center;gap:9px;font-weight:600}
.brand small{display:block;font-weight:500;font-size:.66rem;color:var(--ink-soft)}
.btn{border:0;background:var(--cool);color:#fff;border-radius:var(--radius-sm);padding:12px 18px;font-size:.95rem;font-weight:600;cursor:pointer;width:100%}
.btn:hover{filter:brightness(1.05)}
.ghost{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:8px 14px;font-weight:500;cursor:pointer}
.ghost:hover{color:var(--ink)}
.err{color:#c8483b;font-size:.85rem;margin-top:8px;min-height:1em}

/* login */
.loginwrap{max-width:400px;margin:8vh auto;padding:34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.loginwrap h1{margin:18px 0 2px;font-size:1.5rem}
.loginwrap .sub{color:var(--ink-soft);margin:0 0 20px;font-size:.92rem}
.loginwrap label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:12px}
.loginwrap input{display:block;width:100%;margin-top:5px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);font-size:.95rem}
.loginwrap input:focus{outline:none;border-color:var(--cool)}
.hint{font-size:.75rem;color:var(--ink-faint);margin-top:16px}
.hint code{background:var(--surface-2);padding:1px 5px;border-radius:5px}

/* app shell */
.nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:5}
main{max-width:960px;margin:0 auto;padding:22px 20px 70px}
h2{font-size:1.4rem;margin:0 0 4px}
.muted{color:var(--ink-soft);font-size:.9rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-top:16px}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.stat{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.stat .l{font-size:.78rem;color:var(--ink-soft)}
.stat .v{font-size:1.4rem;font-weight:650;margin-top:4px}
.ok{color:var(--good)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:0 10px 10px}
td{padding:11px 10px;border-top:1px solid var(--line)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}tr.click:hover td{background:var(--surface-2)}
.pill{font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pill.nach{color:var(--alert);background:var(--alert-wash)}
.pill.gut{color:var(--good);background:var(--good-wash)}
.grp{font-weight:600;color:var(--cool);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding-top:14px}
.grp.warm{color:var(--warm)}
.detail{color:var(--ink-faint);font-size:.8rem}
.sum td{font-weight:600;border-top:1.5px solid var(--ink)}
.drop{border:2px dashed color-mix(in srgb,var(--cool) 40%,var(--line));border-radius:var(--radius-sm);padding:20px;text-align:center;color:var(--ink-soft);background:var(--cool-wash);cursor:pointer}
.drop b{display:block;color:var(--ink)}
.back{border:0;background:none;color:var(--cool);cursor:pointer;font-size:.9rem;padding:0;margin-bottom:8px}
.yearbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.yearbar label{font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.yearbar select{margin-left:6px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:.9rem;font-weight:600}
.yearbar select:focus{outline:none;border-color:var(--cool)}
.legal{text-align:center;padding:26px 16px 34px;font-size:.78rem;color:var(--ink-faint)}
.legal a{color:var(--ink-soft);text-decoration:none}
.legal a:hover{color:var(--cool)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--ground);padding:11px 18px;border-radius:999px;font-size:.9rem;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}