:root{
  --bg:#F7F8FA; --card:#FFFFFF; --ink:#1F2430; --ink-2:#6B7280; --border:#E6E8EC;
  --accent:#2E6F6B; --accent-ink:#FFFFFF;
  --green:#3C9F5D; --amber:#E8A33D; --red:#D9534F;
  --pos:#2E7D4F; --neg:#C0392B;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; padding-bottom:76px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 8px;}
h1{font-size:22px;} h2{font-size:18px;} h3{font-size:15px;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:15px;}
.muted{color:var(--ink-2);}
.tiny{font-size:12px;}
.hidden{display:none !important;}

.topbar{position:sticky;top:0;background:var(--bg);z-index:5;padding:14px 16px 6px;display:flex;justify-content:space-between;align-items:center;}
.topbar .brand{font-weight:700;font-size:18px;}
.page{padding:0 16px 16px;max-width:640px;margin:0 auto;}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px;}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);font-weight:600;}

.kpi-row{display:flex;gap:10px;}
.kpi{flex:1;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:center;}
.kpi .val{font-size:19px;font-weight:700;}
.kpi .lbl{font-size:11px;color:var(--ink-2);}
.pos{color:var(--pos);} .neg{color:var(--neg);}

.btn{display:block;width:100%;padding:12px;border-radius:12px;border:none;background:var(--accent);color:var(--accent-ink);font-weight:600;text-align:center;}
.btn.secondary{background:var(--card);color:var(--ink);border:1px solid var(--border);}
.btn.danger{background:var(--red);color:#fff;}
.btn.soft{background:rgba(46,111,107,.1);color:var(--accent);}
.btn.small{width:auto;padding:8px 14px;display:inline-block;}
.link{background:none;border:none;color:var(--accent);font-weight:600;padding:6px;}

.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:4px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--card);}

.grid-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:13px;}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent);}

.ampel-row{display:flex;gap:8px;}
.ampel-btn{flex:1;padding:9px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-size:13px;}
.ampel-btn .swatch{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle;}
.ampel-btn.gruen.active{border-color:var(--green);background:rgba(60,159,93,.12);}
.ampel-btn.gelb.active{border-color:var(--amber);background:rgba(232,163,61,.14);}
.ampel-btn.rot.active{border-color:var(--red);background:rgba(217,83,79,.12);}

.tx-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.tx-row:last-child{border-bottom:none;}
.tx-row .ic{width:34px;height:34px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px;}
.tx-row .mid{flex:1;min-width:0;}
.tx-row .t1{font-weight:600;font-size:14px;}
.tx-row .t2{font-size:12px;color:var(--ink-2);display:flex;gap:6px;align-items:center;}
.tx-row .amt{font-weight:700;font-variant-numeric:tabular-nums;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.pill{background:var(--bg);border-radius:999px;padding:1px 8px;font-size:11px;}

.progress{height:6px;border-radius:999px;background:var(--bg);overflow:hidden;}
.progress > div{height:100%;}

.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--border);
  display:flex;justify-content:space-around;padding:6px 0 max(6px, env(safe-area-inset-bottom));z-index:10;}
.bottom-nav button{background:none;border:none;flex:1;padding:8px 2px;font-size:11px;color:var(--ink-2);}
.bottom-nav button.active{color:var(--accent);font-weight:700;}
.bottom-nav .nav-ic{font-size:19px;display:block;}
.bottom-nav .add{background:var(--accent);color:#fff;border-radius:50%;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:-14px auto 0;box-shadow:0 4px 10px rgba(0,0,0,.15);}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20;display:flex;align-items:flex-end;justify-content:center;}
.modal{background:var(--card);border-radius:18px 18px 0 0;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding:16px;}
.modal .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.iconbtn{background:none;border:none;font-size:18px;padding:4px 8px;}

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:10px;font-size:13px;z-index:30;}

.list-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.list-item:last-child{border-bottom:none;}

.chart-wrap{position:relative;height:220px;}
.chart-wrap.small{height:160px;}

.auth-wrap{max-width:400px;margin:60px auto;padding:0 20px;}
.auth-wrap .card{padding:22px;}
.error-msg{color:var(--red);font-size:13px;margin:6px 0 10px;}
.center{text-align:center;}

.pricebox{display:flex;gap:10px;}
.priceopt{flex:1;border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;cursor:pointer;}
.priceopt.active{border-color:var(--accent);background:rgba(46,111,107,.08);}
.priceopt .p{font-size:20px;font-weight:700;}

@media (max-width:400px){
  .page{padding:0 12px 12px;}
}