/* ============ Batzen – BOLD Design ============ */
:root{
  --bg:#FFF6E9;
  --ink:#161616;
  --card:#FFFFFF;
  --green:#22C55E;
  --green-soft:#DCFCE7;
  --red:#FF5A5F;
  --red-soft:#FFE4E6;
  --yellow:#FFD93D;
  --yellow-soft:#FFF7C2;
  --purple:#A78BFA;
  --blue:#38BDF8;
  --orange:#FB923C;
  --grey:#9CA3AF;
  --radius:18px;
  --border:3px solid var(--ink);
  --shadow:0 5px 0 var(--ink);
  --shadow-sm:0 3px 0 var(--ink);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  padding-bottom:190px;
  background-image:radial-gradient(rgba(22,22,22,.06) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  max-width:560px;margin:0 auto;
  padding:14px 16px 10px;
  background:var(--bg);
}
.logo{font-size:1.5rem;font-weight:900;letter-spacing:-.5px}
.level-chip{
  font-family:var(--font);font-size:.85rem;font-weight:800;
  background:var(--yellow);border:var(--border);border-radius:999px;
  padding:6px 14px;box-shadow:var(--shadow-sm);cursor:pointer;
}
.level-chip:active{transform:translateY(3px);box-shadow:none}

/* ---------- Layout ---------- */
#main{max-width:560px;margin:0 auto;padding:4px 16px 16px}
.view{display:none;animation:pop .18s ease-out}
.view.active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:16px;
}
.card.green{background:var(--green-soft)}
.card.red{background:var(--red-soft)}
.card.yellow{background:var(--yellow-soft)}
.card h2{font-size:1.05rem;font-weight:900;margin-bottom:10px;letter-spacing:-.3px}
.card .sub{font-size:.85rem;color:#555;font-weight:600}
.big-number{font-size:2.4rem;font-weight:900;letter-spacing:-1px;line-height:1.1}
.big-number small{font-size:1.1rem;font-weight:800}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row2 .card{margin-bottom:16px}

/* ---------- Progressbar ---------- */
.pbar{
  position:relative;height:26px;border:var(--border);border-radius:999px;
  background:#fff;overflow:hidden;margin:10px 0 6px;
}
.pbar .fill{
  height:100%;border-radius:999px 0 0 999px;
  background:var(--green);transition:width .4s ease;
  min-width:0;
}
.pbar .fill.warn{background:var(--orange)}
.pbar .fill.over{background:var(--red)}
.pbar .marker{
  position:absolute;top:-4px;bottom:-4px;width:4px;background:var(--ink);
  border-radius:2px;
}
.pbar-label{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;color:#555}

.goal-pbar{height:20px}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font);font-size:1rem;font-weight:800;
  border:var(--border);border-radius:14px;background:#fff;color:var(--ink);
  padding:12px 18px;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .06s;
}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn.green{background:var(--green);color:#fff}
.btn.red{background:var(--red);color:#fff}
.btn.yellow{background:var(--yellow)}
.btn.block{display:block;width:100%;margin-top:10px}
.btn.small{font-size:.85rem;padding:8px 12px;border-width:2.5px}
.btn.ghost{box-shadow:none;border:2.5px dashed var(--ink);background:transparent}
.btn-row{display:flex;gap:10px;margin-top:12px}
.btn-row .btn{flex:1}

/* ---------- FAB ---------- */
#fab{
  position:fixed;right:calc(50% - 280px + 20px);bottom:96px;z-index:45;
  width:64px;height:64px;border-radius:50%;
  background:var(--green);color:#fff;font-size:2.2rem;font-weight:900;line-height:1;
  border:var(--border);box-shadow:var(--shadow);cursor:pointer;
}
@media(max-width:600px){#fab{right:20px}}
#fab:active{transform:translateY(4px);box-shadow:none}

/* ---------- Tabbar ---------- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-around;gap:4px;
  max-width:560px;margin:0 auto;
  background:#fff;border:var(--border);border-bottom:none;
  border-radius:22px 22px 0 0;
  padding:8px 8px calc(10px + env(safe-area-inset-bottom));
}
.tab{
  font-family:var(--font);flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.68rem;font-weight:800;color:var(--ink);
  background:none;border:none;border-radius:12px;padding:7px 2px;cursor:pointer;
}
.tab span{font-size:1.25rem}
.tab.active{background:var(--yellow);border:2.5px solid var(--ink);box-shadow:0 2.5px 0 var(--ink)}

/* ---------- Listen ---------- */
.day-head{font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:#666;margin:14px 4px 6px}
.entry{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:var(--shadow-sm);padding:10px 14px;margin-bottom:8px;cursor:pointer;
}
.entry:active{transform:translateY(2px);box-shadow:none}
.entry .emoji{font-size:1.4rem}
.entry .mid{flex:1;min-width:0}
.entry .mid .t{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .mid .s{font-size:.75rem;color:#666;font-weight:600}
.entry .amt{font-weight:900;font-size:1rem;white-space:nowrap}

/* ---------- Kategorie-Balken ---------- */
.catbar{margin-bottom:10px}
.catbar .cb-head{display:flex;justify-content:space-between;font-size:.85rem;font-weight:800;margin-bottom:4px}
.catbar .cb-track{height:14px;border:2.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.catbar .cb-fill{height:100%}

/* ---------- Mini-Chart ---------- */
.chart14{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:12px}
.chart14 .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}
.chart14 .bar{width:100%;border:2px solid var(--ink);border-radius:6px 6px 3px 3px;background:var(--orange);min-height:4px}
.chart14 .bar.zero{background:var(--green);height:8px !important;border-radius:6px}
.chart14 .col.today .bar{background:var(--yellow)}
.chart14 .dl{font-size:.55rem;font-weight:800;color:#666}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{
  font-family:var(--font);font-size:.85rem;font-weight:800;
  border:2.5px solid var(--ink);border-radius:999px;background:#fff;
  padding:8px 13px;cursor:pointer;box-shadow:0 2.5px 0 var(--ink);
}
.chip.sel{background:var(--yellow);transform:translateY(2.5px);box-shadow:none}

/* ---------- Formulare ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.field input,.field select{
  font-family:var(--font);width:100%;font-size:1.1rem;font-weight:700;
  border:var(--border);border-radius:14px;padding:12px 14px;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus{outline:3px solid var(--yellow)}
.amount-input{font-size:1.8rem !important;font-weight:900 !important;text-align:center}

/* ---------- Modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:100;background:rgba(22,22,22,.55);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .15s ease-out;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  background:var(--bg);border:var(--border);border-bottom:none;
  border-radius:24px 24px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  animation:slideup .2s ease-out;
}
@keyframes slideup{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.modal h3{font-size:1.3rem;font-weight:900;letter-spacing:-.4px;margin-bottom:14px}
.modal .close-x{
  float:right;font-size:1rem;font-weight:900;background:#fff;border:2.5px solid var(--ink);
  border-radius:50%;width:34px;height:34px;cursor:pointer;box-shadow:0 2.5px 0 var(--ink);
}

/* ---------- Toast ---------- */
#toast-root{position:fixed;bottom:170px;left:0;right:0;z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{
  background:var(--ink);color:#fff;font-weight:800;font-size:.9rem;
  border-radius:999px;padding:10px 18px;border:2.5px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  animation:toastin .25s ease-out;
}
@keyframes toastin{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}

/* ---------- Badges ---------- */
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{
  background:#fff;border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:var(--shadow-sm);padding:10px 6px;text-align:center;
}
.badge .be{font-size:1.7rem}
.badge .bn{font-size:.7rem;font-weight:900;margin-top:3px}
.badge .bd{font-size:.6rem;color:#666;font-weight:600;margin-top:2px}
.badge.locked{opacity:.35;filter:grayscale(1)}

/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);padding:12px;text-align:center}
.stat .sv{font-size:1.4rem;font-weight:900}
.stat .sl{font-size:.68rem;font-weight:800;color:#666;text-transform:uppercase;letter-spacing:.3px}

/* ---------- Diverses ---------- */
.month-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.month-nav .mn-title{font-size:1.2rem;font-weight:900}
.month-nav button{
  font-family:var(--font);width:42px;height:42px;font-size:1.2rem;font-weight:900;background:#fff;
  border:var(--border);border-radius:12px;box-shadow:var(--shadow-sm);cursor:pointer;
}
.month-nav button:active{transform:translateY(3px);box-shadow:none}
.empty{
  text-align:center;padding:26px 14px;color:#666;font-weight:700;font-size:.95rem;
  border:2.5px dashed var(--ink);border-radius:var(--radius);margin-bottom:16px;background:rgba(255,255,255,.5)
}
.empty .ee{font-size:2.4rem;display:block;margin-bottom:8px}
.quote{font-size:1rem;font-weight:800;font-style:italic;line-height:1.45}
.hint{font-size:.78rem;color:#666;font-weight:600;line-height:1.4;margin-top:8px}
.pace-msg{font-weight:800;font-size:.95rem;margin-top:8px}
h1.view-title{font-size:1.6rem;font-weight:900;letter-spacing:-.6px;margin:6px 4px 16px}

#confetti{position:fixed;inset:0;z-index:200;pointer-events:none;display:none}