/* ================= 20K SPRINT ================= */
:root{
  --neon:#ccff00;
  --neon-2:#9dff3c;
  --neon-dim:rgba(204,255,0,.18);
  --red:#ff2f2f;
  --bg:#07080a;
  --bg-2:#0e1013;
  --card:#111418;
  --line:rgba(255,255,255,.08);
  --txt:#f2f5f0;
  --muted:#7d8590;
  --radius:16px;
  --fab-size:58px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(204,255,0,.07), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

.app{
  max-width:760px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 18px);
}
.app[hidden]{display:none}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{
  font-size:13px;font-weight:800;letter-spacing:.22em;color:var(--muted);
}
.brand span{color:var(--neon)}
.icon-btn{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  width:36px;height:36px;border-radius:11px;font-size:16px;cursor:pointer;
  display:grid;place-items:center;transition:.18s;
}
.icon-btn:hover{color:var(--neon);border-color:var(--neon-dim)}

/* ---------- Stage / Balken ---------- */
.stage{margin-bottom:26px}

.current-wrap{text-align:center;margin-bottom:16px}
.current{
  font-size:clamp(40px,13vw,68px);
  font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--neon);
  text-shadow:0 0 28px rgba(204,255,0,.35);
  font-variant-numeric:tabular-nums;
}
.current-sub{margin-top:8px;font-size:13px;color:var(--muted);letter-spacing:.04em}

.bar-row{display:flex;align-items:center;gap:14px}

.endpoint{
  font-size:clamp(26px,8vw,44px);
  font-weight:800;line-height:1;letter-spacing:-.02em;
  color:#3f464e;
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  transition:color .4s, text-shadow .4s;
}
.endpoint.hot{color:var(--neon);text-shadow:0 0 22px rgba(204,255,0,.45)}

.bar{
  position:relative;flex:1 1 auto;height:clamp(44px,13vw,62px);
  background:linear-gradient(180deg,#15181c,#0d0f12);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;overflow:hidden;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.7);
}
.bar-fill{
  position:absolute;inset:2px auto 2px 2px;width:0;
  border-radius:11px;
  background:linear-gradient(90deg,var(--neon-2),var(--neon));
  box-shadow:0 0 24px rgba(204,255,0,.5),0 0 60px rgba(204,255,0,.22);
  transition:width .9s cubic-bezier(.22,1,.36,1);
  min-width:0;
}
.bar-fill::after{
  content:"";position:absolute;inset:0;border-radius:11px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 10px,transparent 10px 22px);
  animation:slide 1.4s linear infinite;opacity:.5;
}
@keyframes slide{to{background-position:44px 0}}
.bar-shine{
  position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 45%);
}

/* ---------- Countdown ---------- */
.countdown{
  margin-top:18px;text-align:center;
  font-weight:800;letter-spacing:.12em;
  color:var(--red);
  text-shadow:0 0 18px rgba(255,47,47,.55);
  font-variant-numeric:tabular-nums;
}
#countdownValue{font-size:clamp(28px,9vw,42px);line-height:1}
.cd-unit{font-size:clamp(12px,3.4vw,15px);margin-left:10px;letter-spacing:.2em}
.blink{animation:blink 1.15s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.18}}
.countdown.final{color:#ff5a3c}
@media (prefers-reduced-motion:reduce){
  .blink{animation:blink-soft 2s ease-in-out infinite}
  @keyframes blink-soft{0%,100%{opacity:1}50%{opacity:.5}}
  .bar-fill::after{animation:none}
}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-title{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.link-btn{background:none;border:none;color:var(--neon);font-size:12px;cursor:pointer;padding:4px;font-weight:600}
.plan-card{border-left:3px solid var(--neon)}
.plan-text{font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.plan-text.empty{color:var(--muted);font-style:italic}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.stat{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:12px 10px;text-align:center;
}
.stat-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.stat-value{font-size:clamp(12.5px,3.6vw,19px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}

/* ---------- Liste ---------- */
.list-section{margin-bottom:10px}
.list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 2px}
.list-count{font-size:11px;color:var(--muted)}
.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.entry{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 14px;
  animation:pop .35s cubic-bezier(.22,1,.36,1);
}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.entry-main{flex:1;min-width:0}
.entry-amount{font-size:17px;font-weight:800;color:var(--neon);font-variant-numeric:tabular-nums}
.entry-meta{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-del{
  background:none;border:none;color:#4d545c;font-size:18px;cursor:pointer;padding:6px 4px;line-height:1;
}
.entry-del:hover{color:var(--red)}
.empty-hint{color:var(--muted);font-size:13px;text-align:center;padding:22px 10px;line-height:1.6}
.empty-hint b{color:var(--neon)}
.bottom-space{height:90px}

/* ---------- FAB ---------- */
.fab{
  position:fixed;right:max(18px,env(safe-area-inset-right));
  bottom:calc(env(safe-area-inset-bottom) + 20px);
  width:var(--fab-size);height:var(--fab-size);border-radius:50%;
  background:linear-gradient(145deg,var(--neon),var(--neon-2));
  color:#0a0c00;border:none;font-size:32px;font-weight:300;line-height:1;
  cursor:pointer;z-index:40;
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(204,255,0,.5),0 8px 26px rgba(204,255,0,.35),0 2px 10px rgba(0,0,0,.6);
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s;
  padding-bottom:3px;
}
.fab:active{transform:scale(.9)}
.fab:hover{box-shadow:0 0 0 1px rgba(204,255,0,.7),0 10px 34px rgba(204,255,0,.5)}

/* ---------- Overlay / Sheets ---------- */
.overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(3,4,6,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .18s ease;
}
.overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:640px){.overlay{align-items:center}}

.sheet{
  width:100%;max-width:460px;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:22px 22px 0 0;
  padding:22px 20px calc(env(safe-area-inset-bottom) + 20px);
  animation:up .26s cubic-bezier(.22,1,.36,1);
}
@media(min-width:640px){.sheet{border-radius:22px;padding-bottom:20px}}
@keyframes up{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.sheet-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);margin-bottom:8px;font-weight:700}
.sheet-title{margin:0 0 18px;font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.sheet-title.question{font-size:19px}
.hl{color:var(--neon)}

.field{display:block;margin-bottom:14px}
.field-label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
input[type=text],input[type=number],input[type=date],input[type=password],textarea{
  width:100%;background:#0a0c0f;border:1px solid var(--line);border-radius:12px;
  padding:14px;color:var(--txt);font-size:17px;font-family:inherit;outline:none;transition:.15s;
}
textarea{resize:vertical;line-height:1.5;font-size:16px}
input:focus,textarea:focus{border-color:var(--neon);box-shadow:0 0 0 3px var(--neon-dim)}
#amountInput{font-size:26px;font-weight:800;letter-spacing:-.01em}

.quick-row{display:flex;gap:8px;margin:-4px 0 16px;flex-wrap:wrap}
.quick{
  flex:1 1 auto;background:#0a0c0f;border:1px solid var(--line);color:var(--muted);
  border-radius:10px;padding:9px 6px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;
}
.quick:hover,.quick:active{border-color:var(--neon);color:var(--neon)}

.sheet-actions{display:flex;gap:10px;margin-top:20px}
.btn{
  flex:1;border-radius:13px;padding:15px;font-size:15px;font-weight:700;
  cursor:pointer;border:1px solid transparent;font-family:inherit;transition:.15s;
}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn.ghost:hover{color:var(--txt);border-color:rgba(255,255,255,.2)}
.btn.neon{background:var(--neon);color:#0a0c00;box-shadow:0 4px 20px rgba(204,255,0,.28)}
.btn.neon:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.hint{font-size:12px;color:var(--muted);margin:-4px 0 0;line-height:1.5}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 92px);
  background:#161a1f;border:1px solid var(--line);color:var(--txt);
  padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:80;
  box-shadow:0 8px 30px rgba(0,0,0,.5);animation:up .2s ease;
  max-width:88vw;text-align:center;
}
.toast[hidden]{display:none}
.toast.good{border-color:var(--neon-dim);color:var(--neon)}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
}
.login-box{width:100%;max-width:340px;text-align:center}
.login-box .brand{font-size:34px;letter-spacing:.1em;margin-bottom:26px;color:var(--txt)}