/* ============================================================
   Mój Budżet — style
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&display=swap');

:root{
  --bg:#F4F5FA; --surface:#FFFFFF; --surface-2:#EEF1F8; --text:#0E1626; --text-muted:#566077;
  --text-faint:#9099AC; --border:#E7EAF2; --brand:#6D5DFB; --brand-2:#9B7BFF;
  --brand-soft:rgba(109,93,251,.12); --pos:#10B981; --pos-soft:rgba(16,185,129,.12);
  --neg:#F43F5E; --neg-soft:rgba(244,63,94,.12); --warn:#E1900B; --warn-soft:rgba(225,144,11,.14);
  --ring-track:#E7EAF2; --shadow:0 8px 30px rgba(20,24,40,.06); --glow:rgba(109,93,251,.16);
}
html.dark{
  --bg:#0A0E18; --surface:#141A28; --surface-2:#1C2436; --text:#EBEFF8; --text-muted:#9BA6BD;
  --text-faint:#69748B; --border:#232C40; --brand:#8B7BFF; --brand-2:#B49BFF;
  --brand-soft:rgba(139,123,255,.16); --pos:#34D399; --pos-soft:rgba(52,211,153,.14);
  --neg:#FB7185; --neg-soft:rgba(251,113,133,.15); --warn:#FBBF24; --warn-soft:rgba(251,191,36,.14);
  --ring-track:#232C40; --shadow:0 10px 34px rgba(0,0,0,.45); --glow:rgba(139,123,255,.20);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{ font-family:inherit; }
svg{ display:block; }
.bl-display{ font-family:'Space Grotesk','Inter',sans-serif; font-feature-settings:"tnum"; }
.bl-icon{ width:1em; height:1em; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }

/* shell */
.bl-app{ position:relative; max-width:460px; margin:0 auto; min-height:100vh; background:var(--bg);
  overflow:hidden; padding-bottom:92px; box-shadow:0 0 0 1px var(--border); }
.bl-glow{ position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:340px; height:340px;
  background:radial-gradient(circle, var(--glow), transparent 70%); pointer-events:none; z-index:0; }

.bl-topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--bg); background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.bl-brand{ display:flex; align-items:center; gap:9px; }
.bl-logo{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 4px 14px var(--glow); }
.bl-logo svg{ width:16px; height:16px; }

.bl-main{ position:relative; z-index:1; padding:16px 16px 8px; animation:bl-fade .35s ease; }
.bl-view{ display:flex; flex-direction:column; gap:14px; }
.bl-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
h1.bl-h1{ font-size:22px; font-weight:700; margin:0; }
.bl-sub{ color:var(--text-faint); font-size:13px; margin:2px 0 0; }

.bl-card{ background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); }
.bl-anim{ animation:bl-up .5s cubic-bezier(.2,.7,.3,1) both; }

.bl-icon-btn{ width:38px; height:38px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); display:grid; place-items:center; cursor:pointer; position:relative; transition:.18s; }
.bl-icon-btn:hover{ color:var(--text); border-color:var(--brand); transform:translateY(-1px); }
.bl-icon-btn svg{ width:18px; height:18px; }
.bl-dot{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--neg); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; line-height:1; }

/* ring */
.bl-ring-wrap{ position:relative; width:188px; height:188px; }
.bl-ring-svg{ transform:rotate(-90deg); }
.bl-ring-prog{ transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1); }
.bl-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.bl-ring-label{ font-size:12px; color:var(--text-faint); letter-spacing:.3px; }
.bl-ring-value{ font-size:27px; font-weight:700; }
.bl-ring-of{ font-size:12px; color:var(--text-muted); }
.bl-chip-row{ display:flex; gap:8px; margin-top:18px; width:100%; }
.bl-statchip{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:10px; border-radius:14px; background:var(--surface-2); }
.bl-statchip-ic{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.bl-statchip-ic svg{ width:15px; height:15px; }
.bl-statchip > div{ min-width:0; overflow:hidden; }
.bl-statchip-l{ font-size:11px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-statchip-v{ font-size:clamp(12.5px,3.3vw,15px); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.bl-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bl-section-title{ font-weight:600; }
.bl-link{ background:none; border:none; color:var(--brand); font-size:13px; font-weight:600; cursor:pointer; }
.bl-badge{ background:var(--warn-soft); color:var(--warn); font-size:11px; font-weight:700; padding:1px 7px; border-radius:8px; }

.bl-reminder{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:13px; }
.bl-reminder-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.bl-reminder-ic svg{ width:15px; height:15px; }
.bl-reminder-main{ flex:1; min-width:0; }
.bl-reminder-t{ font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-reminder-s{ font-size:12px; color:var(--text-faint); }
.bl-amount{ font-size:13px; font-weight:600; }

.bl-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bl-mini-label{ font-size:12px; color:var(--text-faint); display:flex; align-items:center; gap:5px; }
.bl-mini-label svg{ width:13px; height:13px; }
.bl-mini-value{ font-size:18px; font-weight:700; margin-top:3px; }
.bl-month-nav{ display:flex; align-items:center; gap:4px; }
.bl-month-label{ font-size:14px; font-weight:600; min-width:96px; text-align:center; }
.bl-cat-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.bl-cat-ic svg{ width:15px; height:15px; }

.bl-progress{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.bl-progress-fill{ height:100%; border-radius:99px; transition:width 1s cubic-bezier(.2,.7,.3,1); }

.bl-budget-row + .bl-budget-row{ margin-top:14px; }
.bl-budget-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.bl-budget-name{ flex:1; font-size:14px; font-weight:500; }
.bl-budget-nums{ font-size:13px; color:var(--text-muted); }
.bl-over{ font-size:11px; color:var(--neg); margin-top:4px; display:flex; align-items:center; gap:4px; }
.bl-over svg{ width:11px; height:11px; }

.bl-tx{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--border); }
.bl-tx:last-child{ border-bottom:none; }
.bl-tx-main{ flex:1; min-width:0; }
.bl-tx-t{ font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-tx-s{ font-size:12px; color:var(--text-faint); }
.bl-tx-amt{ font-size:14px; font-weight:600; }
.bl-del{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:5px; border-radius:8px; transition:.15s; opacity:.7; }
.bl-del:hover{ color:var(--neg); background:var(--neg-soft); opacity:1; }
.bl-del svg{ width:14px; height:14px; }

.bl-pill-btn{ border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:.15s; white-space:nowrap; }
.bl-pill-btn:hover{ border-color:var(--brand); color:var(--brand); }
.bl-pill-btn svg{ width:13px; height:13px; }
.bl-pill-done{ background:var(--pos-soft); color:var(--pos); border-color:transparent; cursor:default; }

/* donut (conic) */
.bl-donut-wrap{ display:flex; align-items:center; gap:14px; }
.bl-donut{ width:120px; height:120px; border-radius:50%; flex-shrink:0; position:relative; }
.bl-donut::after{ content:""; position:absolute; inset:24px; border-radius:50%; background:var(--surface); }
.bl-legend{ flex:1; display:flex; flex-direction:column; gap:7px; }
.bl-legend-row{ display:flex; align-items:center; gap:8px; font-size:13px; }
.bl-legend-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.bl-legend-name{ flex:1; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-legend-val{ font-weight:600; }

/* tasks */
.bl-task-group + .bl-task-group{ } /* spacing handled by view gap */
.bl-group-title{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.bl-task{ display:flex; align-items:center; gap:11px; padding:9px 0; }
.bl-check{ width:23px; height:23px; border-radius:8px; border:2px solid var(--border); background:transparent;
  display:grid; place-items:center; cursor:pointer; flex-shrink:0; color:#fff; transition:.18s; }
.bl-check:hover{ border-color:var(--brand); }
.bl-check-on{ background:var(--brand); border-color:var(--brand); }
.bl-check svg{ width:13px; height:13px; }
.bl-task-main{ flex:1; min-width:0; }
.bl-task-t{ font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-task-done .bl-task-t{ text-decoration:line-through; color:var(--text-faint); }
.bl-task-due{ font-size:12px; color:var(--text-faint); display:flex; align-items:center; gap:4px; }
.bl-task-due svg{ width:11px; height:11px; }
.bl-prio{ width:7px; height:7px; border-radius:99px; flex-shrink:0; }

/* habits */
.bl-habit-pill{ position:relative; min-width:80px; padding:13px 10px; border-radius:16px; border:1px solid var(--border);
  background:var(--surface-2); display:flex; flex-direction:column; align-items:center; cursor:pointer; transition:.18s; }
.bl-habit-pill:hover{ transform:translateY(-2px); }
.bl-habit-pill svg{ width:18px; height:18px; }
.bl-habit-name{ font-size:12px; margin-top:4px; }
.bl-habit-row{ display:flex; align-items:center; gap:11px; }
.bl-habit-ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.bl-habit-ic svg{ width:19px; height:19px; }
.bl-habit-main{ flex:1; min-width:0; }
.bl-habit-title{ font-size:15px; font-weight:600; }
.bl-habit-streak{ font-size:12px; color:var(--text-faint); display:flex; align-items:center; gap:4px; }
.bl-habit-streak svg{ width:12px; height:12px; }
.bl-today-btn{ width:42px; height:42px; border-radius:13px; border:2px solid var(--border); background:var(--surface-2);
  color:var(--text-muted); display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:.18s; }
.bl-today-btn:hover{ transform:scale(1.05); }
.bl-today-btn svg{ width:18px; height:18px; }
.bl-today-on{ color:#fff; }
.bl-week{ display:flex; justify-content:space-between; margin-top:14px; }
.bl-daycol{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer; padding:0; }
.bl-dow{ font-size:10px; color:var(--text-faint); }
.bl-daydot{ width:28px; height:28px; border-radius:10px; border:2px solid var(--border); background:var(--surface-2);
  display:grid; place-items:center; color:#fff; transition:.18s; }
.bl-daydot svg{ width:12px; height:12px; }
.bl-daydot-today{ border-color:var(--brand); }
.bl-daycol:hover .bl-daydot{ transform:scale(1.08); }

/* nav */
.bl-nav{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:460px; z-index:30;
  display:flex; padding:9px 14px calc(9px + env(safe-area-inset-bottom)); background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(16px); border-top:1px solid var(--border); }
.bl-nav-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; background:none; border:none;
  color:var(--text-faint); cursor:pointer; padding:5px 0; border-radius:12px; transition:.18s; }
.bl-nav-item svg{ width:21px; height:21px; transition:.18s; }
.bl-nav-label{ font-size:10.5px; margin-top:2px; }
.bl-nav-on{ color:var(--brand); }
.bl-nav-on svg{ transform:translateY(-1px); }

/* fab */
.bl-fab{ position:fixed; bottom:80px; left:50%; transform:translateX(150px); z-index:31; width:56px; height:56px; border-radius:18px;
  border:none; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 10px 26px var(--glow); transition:.2s; }
.bl-fab svg{ width:24px; height:24px; }
.bl-fab:hover{ transform:translateX(150px) scale(1.06) rotate(90deg); }
@media (max-width:460px){ .bl-fab{ left:auto; right:18px; transform:none; } .bl-fab:hover{ transform:scale(1.06) rotate(90deg); } }

/* sheet */
.bl-backdrop{ position:fixed; inset:0; z-index:50; background:rgba(8,11,20,.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center; animation:bl-fade .2s ease; }
.bl-sheet{ width:100%; max-width:460px; max-height:88vh; overflow-y:auto; background:var(--surface);
  border-radius:26px 26px 0 0; border:1px solid var(--border); border-bottom:none;
  padding:8px 18px calc(24px + env(safe-area-inset-bottom)); animation:bl-sheetup .32s cubic-bezier(.2,.8,.2,1); }
.bl-sheet-grip{ width:38px; height:4px; border-radius:99px; background:var(--border); margin:6px auto 10px; }
.bl-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bl-sheet-title{ font-size:18px; font-weight:600; }

/* forms */
.bl-form{ display:flex; flex-direction:column; gap:10px; }
.bl-input{ width:100%; padding:12px 14px; border-radius:13px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); font-size:15px; font-family:inherit; outline:none; transition:.15s; }
.bl-input:focus{ border-color:var(--brand); background:var(--surface); }
.bl-input-amount{ font-family:'Space Grotesk'; font-size:30px; font-weight:700; text-align:center; padding:16px; }
.bl-mini-input{ width:74px; padding:3px 7px; border-radius:7px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:12px; }
.bl-field-label{ font-size:12px; font-weight:600; color:var(--text-faint); margin-top:6px; }
select.bl-input{ appearance:none; -webkit-appearance:none; }
.bl-row{ display:flex; gap:8px; }

.bl-btn-primary{ width:100%; padding:13px; border-radius:13px; border:none; color:#fff; font-size:15px; font-weight:600;
  cursor:pointer; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:flex; align-items:center; justify-content:center; gap:7px;
  box-shadow:0 6px 18px var(--glow); transition:.18s; }
.bl-btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.bl-btn-primary svg{ width:16px; height:16px; }
.bl-btn-ghost{ padding:13px; border-radius:13px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-weight:600; cursor:pointer; }
.bl-btn-danger{ width:100%; padding:12px; border-radius:13px; border:1px solid var(--neg-soft); background:var(--neg-soft); color:var(--neg);
  font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:.15s; }
.bl-btn-danger:hover{ background:var(--neg); color:#fff; }
.bl-btn-danger svg{ width:15px; height:15px; }

/* segmented */
.bl-seg{ display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:13px; }
.bl-seg-item{ flex:1; padding:9px 6px; border-radius:10px; border:none; background:transparent; color:var(--text-muted);
  font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.bl-seg-on{ background:var(--surface); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.08); }
html.dark .bl-seg-on{ background:var(--brand); color:#fff; }

/* pickers */
.bl-catgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.bl-catpick{ display:flex; flex-direction:column; align-items:center; padding:11px 4px; border-radius:13px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-muted); cursor:pointer; transition:.15s; }
.bl-catpick:hover{ transform:translateY(-1px); }
.bl-catpick svg{ width:18px; height:18px; }
.bl-catpick-name{ font-size:11px; margin-top:3px; }
.bl-swatches{ display:flex; flex-wrap:wrap; gap:9px; }
.bl-swatch{ width:30px; height:30px; border-radius:9px; border:2px solid transparent; cursor:pointer; transition:.15s; }
.bl-swatch-on{ border-color:var(--text); transform:scale(1.12); }
.bl-iconrow{ display:flex; flex-wrap:wrap; gap:7px; }
.bl-iconpick{ width:40px; height:40px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text-muted); display:grid; place-items:center; cursor:pointer; transition:.15s; }
.bl-iconpick svg{ width:18px; height:18px; }
.bl-iconpick-on{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }

.bl-list-row{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:13px; background:var(--surface-2); }
.bl-list-main{ flex:1; min-width:0; }
.bl-list-t{ font-weight:500; font-size:14px; }
.bl-list-s{ font-size:12px; color:var(--text-faint); }

/* empty */
.bl-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 10px; text-align:center; }
.bl-empty-ic{ width:52px; height:52px; border-radius:16px; background:var(--surface-2); color:var(--text-faint); display:grid; place-items:center; }
.bl-empty-ic svg{ width:26px; height:26px; }
.bl-empty-t{ font-weight:600; color:var(--text); }
.bl-empty-h{ color:var(--text-faint); font-size:13px; }

/* toast */
.bl-toast{ position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(20px); z-index:60;
  background:var(--text); color:var(--bg); font-size:13px; font-weight:600; padding:10px 16px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); opacity:0; transition:.25s; pointer-events:none; max-width:90%; }
.bl-toast-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* loader */
.bl-loader{ display:flex; align-items:center; justify-content:center; height:100vh; }
.bl-spin{ width:34px; height:34px; border-radius:99px; border:3px solid var(--border); border-top-color:var(--brand); animation:bl-spin 1s linear infinite; }

/* keyframes */
@keyframes bl-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes bl-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes bl-sheetup{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes bl-spin{ to{ transform:rotate(360deg); } }
@keyframes bl-pop{ 0%{ transform:scale(0); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
.bl-pop{ animation:bl-pop .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes bl-flame{ 0%,100%{ transform:scale(1) rotate(-3deg); } 50%{ transform:scale(1.15) rotate(3deg); } }
.bl-flame{ animation:bl-flame 1.4s ease-in-out infinite; }

/* ===== dodawanie: wybór typu ===== */
.bl-typegrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.bl-typebtn{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 4px; border-radius:14px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); font-size:11.5px; font-weight:500; cursor:pointer; transition:.15s; }
.bl-typebtn:hover{ transform:translateY(-1px); }
.bl-typebtn svg{ width:18px; height:18px; }
.bl-typebtn-on{ font-weight:600; }

/* ===== dodawanie: klawiatura numeryczna ===== */
.bl-amount-display{ display:flex; align-items:baseline; justify-content:center; gap:7px; padding:12px 0 4px; }
.bl-amount-display .amt{ font-size:42px; font-weight:700; line-height:1; }
.bl-amount-display .cur{ font-size:18px; font-weight:600; color:var(--text-faint); }
.bl-keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 2px; }
.bl-key{ padding:15px 0; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-family:'Space Grotesk','Inter',sans-serif; font-size:21px; font-weight:600; cursor:pointer; transition:.1s; }
.bl-key:hover{ border-color:var(--brand); }
.bl-key:active{ transform:scale(.96); background:var(--brand-soft); }
.bl-key-action{ color:var(--text-muted); font-size:22px; }

/* ===== szybkie chipy (data / nawyki dnia) ===== */
.bl-quickchips{ display:flex; gap:7px; flex-wrap:wrap; }
.bl-chip{ display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
.bl-chip:hover{ border-color:var(--brand); color:var(--brand); }
.bl-chip svg{ width:13px; height:13px; }
.bl-chip-on{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }

/* ===== finanse: podsumowanie z wyraźnym podziałem ===== */
.bl-fin-summary{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.bl-fin-cell{ border-radius:16px; padding:12px 11px; display:flex; flex-direction:column; gap:6px; border:1px solid transparent; min-width:0; }
.bl-fin-cell-top{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; }
.bl-fin-cell-top svg{ width:13px; height:13px; flex-shrink:0; }
.bl-fin-cell-val{ font-size:clamp(13px,3.5vw,16px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-fin-in{ background:var(--pos-soft); }
.bl-fin-in .bl-fin-cell-top, .bl-fin-in .bl-fin-cell-val{ color:var(--pos); }
.bl-fin-out{ background:var(--neg-soft); }
.bl-fin-out .bl-fin-cell-top, .bl-fin-out .bl-fin-cell-val{ color:var(--neg); }
.bl-fin-bal{ background:var(--brand-soft); }
.bl-fin-bal .bl-fin-cell-top{ color:var(--brand); }

/* ===== kalendarz ===== */
.bl-leg{ display:inline-flex; align-items:center; gap:5px; }
.bl-cal-head{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; text-align:center; font-size:11px; font-weight:600; color:var(--text-faint); margin-bottom:7px; }
.bl-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.bl-cal-empty{ aspect-ratio:1; }
.bl-cal-day{ aspect-ratio:1; border-radius:12px; border:1px solid transparent; background:var(--surface-2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; transition:.15s; position:relative; }
.bl-cal-day:hover{ border-color:var(--brand); }
.bl-cal-num{ font-size:13px; font-weight:600; font-family:'Space Grotesk','Inter',sans-serif; color:var(--text); }
.bl-cal-dots{ display:flex; gap:2px; align-items:center; height:6px; }
.bl-cal-dot{ width:5px; height:5px; border-radius:99px; flex-shrink:0; }
.bl-cal-day-today{ border-color:var(--brand); }
.bl-cal-day-sel{ background:var(--brand); border-color:var(--brand); }
.bl-cal-day-sel .bl-cal-num{ color:#fff; }

/* ===== panel dnia ===== */
.bl-day-sec{ margin-top:14px; }
.bl-day-sec-h{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin-bottom:7px; }

/* ===== cele oszczędnościowe ===== */
.bl-goal{ border:1px solid var(--border); border-radius:18px; padding:14px; transition:.2s; }
.bl-goal-top{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.bl-goal-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.bl-goal-ic svg{ width:18px; height:18px; }
.bl-goal-main{ flex:1; min-width:0; }
.bl-goal-name{ font-size:15px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bl-goal-done{ font-size:10.5px; font-weight:700; color:var(--pos); background:var(--pos-soft); padding:2px 7px; border-radius:7px; }
.bl-goal-sub{ font-size:13px; color:var(--text-muted); margin-top:2px; }
.bl-goal-bar{ height:10px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.bl-goal-fill{ height:100%; border-radius:99px; transition:width 1.1s cubic-bezier(.2,.7,.3,1); box-shadow:0 0 12px var(--gc, transparent); }
.bl-goal-foot{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:nowrap; }
.bl-goal-pct{ font-size:17px; font-weight:700; white-space:nowrap; flex-shrink:0; }
.bl-goal-left{ flex:1; min-width:0; font-size:12px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-goal-add{ display:inline-flex; align-items:center; gap:4px; padding:7px 13px; border-radius:10px; border:none; cursor:pointer;
  font-size:13px; font-weight:600; color:#fff; background:var(--gc,var(--brand)); transition:.15s; box-shadow:0 4px 12px var(--glow); }
.bl-goal-add svg{ width:13px; height:13px; }
.bl-goal-add:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.bl-goal-add:active{ transform:scale(.97); }
.bl-contrib-head{ display:flex; align-items:center; gap:11px; padding:12px; border-radius:14px; background:var(--surface-2); margin-bottom:8px; }

/* ===== kategorie w poziomie (dodawanie) ===== */
.bl-catscroll{ display:flex; gap:8px; overflow-x:auto; padding-bottom:5px; scroll-snap-type:x proximity; }
.bl-catscroll::-webkit-scrollbar{ height:0; }
.bl-catscroll .bl-catpick{ min-width:76px; flex-shrink:0; scroll-snap-align:start; }
.bl-chip-amt{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; }

/* ===== premium: animowany gradient marki ===== */
@keyframes bl-grad{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.bl-fab{ background:linear-gradient(120deg,var(--brand),var(--brand-2),var(--brand)); background-size:200% 200%; animation:bl-grad 7s ease infinite; }
.bl-btn-primary{ background:linear-gradient(120deg,var(--brand),var(--brand-2),var(--brand)); background-size:200% 200%; animation:bl-grad 7s ease infinite; }
.bl-logo{ background:linear-gradient(120deg,var(--brand),var(--brand-2),var(--brand)); background-size:200% 200%; animation:bl-grad 8s ease infinite; }
.bl-btn-primary:active{ transform:translateY(0) scale(.985); }
.bl-pill-btn:active{ transform:scale(.96); }

/* ===== premium: wskaźnik aktywnej zakładki ===== */
.bl-nav-item{ position:relative; }
.bl-nav-item svg, .bl-nav-item .bl-nav-label{ position:relative; z-index:1; }
.bl-nav-on::before{ content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:44px; height:27px;
  border-radius:12px; background:var(--brand-soft); z-index:0; animation:bl-fade .25s ease both; }

/* ===== premium: hero na pulpicie ===== */
.bl-hero{ position:relative; overflow:hidden;
  background:linear-gradient(165deg, color-mix(in srgb, var(--brand) 11%, var(--surface)), var(--surface) 62%); }
.bl-hero::before{ content:""; position:absolute; top:-70px; left:50%; transform:translateX(-50%); width:260px; height:260px;
  background:radial-gradient(circle, var(--glow), transparent 70%); animation:bl-pulse 5s ease-in-out infinite; pointer-events:none; z-index:0; }
.bl-hero > *{ position:relative; z-index:1; }
@keyframes bl-pulse{ 0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); } 50%{ opacity:1; transform:translateX(-50%) scale(1.12); } }

/* ===== premium: subtelne stany kart ===== */
.bl-card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* ===== premium: konfetti ===== */
.bl-confetti{ position:fixed; inset:0; pointer-events:none; z-index:80; }
.bl-confetti-p{ position:absolute; top:46%; left:50%; width:9px; height:9px; border-radius:2px; }

.bl-goal-add{ flex-shrink:0; }
.bl-typebtn span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bl-amount, .bl-tx-amt, .bl-budget-nums, .bl-ring-value, .bl-mini-value, .bl-goal-sub{ white-space:nowrap; }
.bl-budget-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}