/* ===========================================================
   CENTURY FUND — system wizualny
   Prawie czarne tło, wolno płynące plamy światła,
   delikatne szkło tylko tam, gdzie ma sens.
   =========================================================== */

:root{
  /* tło */
  --bg:            #050506;
  --panel:         rgba(255,255,255,.026);
  --panel-2:       rgba(255,255,255,.04);
  --panel-solid:   #0c0c11;
  --panel-hi:      rgba(255,255,255,.06);

  /* linie */
  --line:          rgba(255,255,255,.07);
  --line-strong:   rgba(255,255,255,.12);
  --line-soft:     rgba(255,255,255,.045);

  /* typografia */
  --txt:           #eeedea;
  --txt-2:         #a5a5b0;
  --txt-3:         #71717e;
  --txt-4:         #4e4e5a;

  /* akcent — szampański */
  --accent:        #c8a96a;
  --accent-2:      #e0c68c;
  --accent-soft:   rgba(200,169,106,.13);
  --accent-line:   rgba(200,169,106,.34);

  /* znaczenia — celowo przygaszone */
  --ok:            #7fb08a;
  --ok-soft:       rgba(127,176,138,.12);
  --warn:          #c9a45c;
  --warn-soft:     rgba(201,164,92,.12);
  --danger:        #c07a72;
  --danger-soft:   rgba(192,122,114,.12);
  --info:          #7d94b8;
  --info-soft:     rgba(125,148,184,.12);
  --violet:        #9a86c4;
  --violet-soft:   rgba(154,134,196,.12);

  --radius:        16px;
  --radius-sm:     11px;
  --radius-xs:     8px;

  --shadow:        0 1px 0 rgba(255,255,255,.035) inset, 0 20px 50px -30px rgba(0,0,0,.95);
  --ease:          cubic-bezier(.22,.61,.36,1);

  --sidebar:       224px;
  --wrap:          1460px;
  --gap:           16px;
  --pad:           22px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
svg{ width:18px; height:18px; fill:currentColor; display:block; }

::selection{ background:rgba(200,169,106,.26); }

:focus-visible{ outline:1px solid var(--accent-line); outline-offset:2px; border-radius:6px; }

*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.15); background-clip:content-box; }

/* ===========================================================
   TŁO — wielkie, rozmyte, bardzo wolno płynące plamy
   =========================================================== */

.bg{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1400px 900px at 70% -10%, rgba(38,28,64,.5), transparent 60%),
    radial-gradient(1200px 800px at 10% 110%, rgba(20,26,52,.45), transparent 60%),
    var(--bg);
}
.bg__blob{
  position:absolute;
  width:62vw; height:62vw;
  min-width:520px; min-height:520px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
}
.bg__blob--a{
  top:-22vh; left:-12vw;
  background:radial-gradient(circle at 40% 40%, #2a1b48 0%, rgba(42,27,72,0) 68%);
  animation:driftA 38s var(--ease) infinite;
}
.bg__blob--b{
  top:6vh; right:-18vw;
  background:radial-gradient(circle at 50% 50%, #141d3c 0%, rgba(20,29,60,0) 68%);
  animation:driftB 46s var(--ease) infinite;
}
.bg__blob--c{
  bottom:-28vh; left:18vw;
  background:radial-gradient(circle at 50% 50%, #1d1a2c 0%, rgba(29,26,44,0) 70%);
  animation:driftC 52s var(--ease) infinite;
}
.bg__blob--d{
  top:38vh; left:32vw;
  width:40vw; height:40vw; min-width:380px; min-height:380px;
  background:radial-gradient(circle at 50% 50%, rgba(96,72,140,.32) 0%, rgba(96,72,140,0) 70%);
  animation:driftD 44s var(--ease) infinite;
  opacity:.35;
}
.bg__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,.2) 30%, rgba(5,5,6,.7) 100%);
}

@keyframes driftA{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(9vw,7vh,0) scale(1.14); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
@keyframes driftB{
  0%   { transform:translate3d(0,0,0) scale(1.05); }
  50%  { transform:translate3d(-8vw,10vh,0) scale(.92); }
  100% { transform:translate3d(0,0,0) scale(1.05); }
}
@keyframes driftC{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(6vw,-8vh,0) scale(1.12); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
@keyframes driftD{
  0%   { transform:translate3d(0,0,0) scale(1); opacity:.3; }
  50%  { transform:translate3d(-10vw,-6vh,0) scale(1.2); opacity:.45; }
  100% { transform:translate3d(0,0,0) scale(1); opacity:.3; }
}

body.no-bg .bg__blob{ display:none; }
body.no-bg .bg{ background:var(--bg); }
body.no-anim .bg__blob{ animation:none; }

/* ===========================================================
   UKŁAD
   =========================================================== */

.shell{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:100vh;
  max-width:var(--wrap);
  margin:0 auto;
}

.sidebar{
  position:sticky; top:0; align-self:start;
  height:100vh;
  display:flex; flex-direction:column;
  padding:22px 16px;
  border-right:1px solid var(--line);
  background:rgba(8,8,11,.5);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.brand{ display:flex; align-items:baseline; gap:10px; padding:4px 8px 22px; }
.brand__mark{ font-size:14.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; }
.brand__sub{
  font-size:9.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); padding-left:10px; border-left:1px solid var(--line-strong);
}

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav__link{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--radius-xs);
  color:var(--txt-3); font-size:13px; font-weight:500;
  cursor:pointer; border:1px solid transparent;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.nav__link svg{ width:16px; height:16px; opacity:.7; }
.nav__link:hover{ color:var(--txt); background:rgba(255,255,255,.04); }
.nav__link.is-active{
  color:var(--txt); background:rgba(255,255,255,.055);
  border-color:var(--line);
}
.nav__link.is-active svg{ color:var(--accent); opacity:1; }
.nav__count{
  margin-left:auto; font-size:10.5px; color:var(--txt-4);
  font-variant-numeric:tabular-nums;
}

.sidebar__foot{ margin-top:auto; padding-top:18px; }
.mini-fund{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--panel); padding:13px 14px;
  display:flex; flex-direction:column; gap:4px;
}
.mini-fund__label{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-4); }
.mini-fund__value{ font-size:19px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.mini-fund__sub{ font-size:11px; color:var(--txt-4); }
.mini-fund__bar{ height:3px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:6px; }
.mini-fund__fill{ height:100%; background:linear-gradient(90deg,#8c7440,var(--accent)); transition:width .9s var(--ease); }

.main{ display:flex; flex-direction:column; min-width:0; }

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:22px 26px 16px;
  background:linear-gradient(180deg, rgba(5,5,6,.9) 60%, rgba(5,5,6,0));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.topbar__title{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.topbar__sub{ font-size:12px; color:var(--txt-3); margin-top:3px; }
.topbar__right{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.topbar__date{
  font-size:11.5px; letter-spacing:.08em; color:var(--txt-3);
  font-variant-numeric:tabular-nums; margin-right:4px;
}
.btn__plus{ font-size:15px; line-height:1; margin-top:-1px; }

.view{ padding:4px 26px 30px; min-height:60vh; }

.foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px 26px 34px; margin-top:auto;
  border-top:1px solid var(--line-soft);
  font-size:11.5px; color:var(--txt-4);
}

/* ===========================================================
   PODSTAWY
   =========================================================== */

.muted{ color:var(--txt-3); }
.micro{ font-size:11px; letter-spacing:.05em; }
.ta-r{ text-align:right; }
.nowrap{ white-space:nowrap; }
.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3);
}
.hint{ font-size:11.5px; color:var(--txt-4); margin:14px 2px 0; }

.grid{ display:grid; gap:var(--gap); margin-bottom:var(--gap); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--hero{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.grid--split{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.grid--wide-left{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  position:relative;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.panel--plain{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.02); }
.panel__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px; min-height:26px; flex-wrap:wrap;
}
.panel__actions{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; }

/* przyciski */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--radius-xs);
  border:1px solid var(--line-strong);
  background:var(--panel-hi);
  color:var(--txt-2);
  padding:8px 14px;
  font-size:12.5px; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:hover{ background:rgba(255,255,255,.1); color:var(--txt); border-color:rgba(255,255,255,.18); }
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:#15120b; font-weight:600; }
.btn--solid:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#15120b; }
.btn--ghost{ background:transparent; border-color:var(--line); }
.btn--ghost:hover{ background:rgba(255,255,255,.05); }
.btn--danger{ color:var(--danger); border-color:rgba(192,122,114,.3); background:transparent; }
.btn--danger:hover{ background:var(--danger-soft); color:#d69a92; border-color:rgba(192,122,114,.45); }
.btn--sm{ padding:7px 12px; font-size:12px; }
.btn--xs{ padding:5px 10px; font-size:11.5px; }
.btn--block{ width:100%; }
.btn--icon{ padding:8px; width:34px; height:34px; }
.btn--icon.btn--xs{ width:27px; height:27px; padding:0; }
.btn--icon svg{ width:15px; height:15px; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* plakietki */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 9px; border-radius:99px;
  border:1px solid var(--line-strong); color:var(--txt-3);
  background:rgba(255,255,255,.025); white-space:nowrap;
}
.tag--dot::before{
  content:""; width:5px; height:5px; border-radius:99px; background:currentColor;
  animation:pulseDot 2.6s var(--ease) infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
body.no-anim .tag--dot::before{ animation:none; }

.tag--idea{ color:var(--violet); border-color:rgba(154,134,196,.28); background:var(--violet-soft); }
.tag--planned{ color:var(--txt-3); }
.tag--saving{ color:var(--warn); border-color:rgba(201,164,92,.3); background:var(--warn-soft); }
.tag--ready{ color:var(--ok); border-color:rgba(127,176,138,.3); background:var(--ok-soft); }
.tag--ordered{ color:var(--info); border-color:rgba(125,148,184,.3); background:var(--info-soft); }
.tag--bought{ color:var(--txt-3); border-color:var(--line-strong); }
.tag--high{ color:#d3a08d; }
.tag--medium{ color:var(--txt-2); }
.tag--low{ color:var(--txt-4); }
.tag--active{ color:var(--ok); border-color:rgba(127,176,138,.3); background:var(--ok-soft); }
.tag--paused{ color:var(--warn); border-color:rgba(201,164,92,.28); background:var(--warn-soft); }
.tag--done{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.tag--archived{ color:var(--txt-4); }
.tag--main{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.tag--income{ color:var(--ok); border-color:rgba(127,176,138,.3); background:var(--ok-soft); }
.tag--expense{ color:var(--danger); border-color:rgba(192,122,114,.28); background:var(--danger-soft); }
.tag--transfer{ color:var(--violet); border-color:rgba(154,134,196,.28); background:var(--violet-soft); }
.tag--adjustment{ color:var(--txt-3); }
.tag--none{ color:var(--txt-4); }
.tag--have{ color:var(--ok); border-color:rgba(127,176,138,.3); background:var(--ok-soft); }
.tag--installed{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }

/* ===========================================================
   KARTA GŁÓWNA
   =========================================================== */

.panel--hero{ padding:26px; }
.hero__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px; }
.hero__name{ display:flex; align-items:center; gap:10px; }
.hero__icon{ font-size:15px; color:var(--accent); }
.hero__figure{ display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; margin:10px 0 6px; }
.hero__amount{
  font-size:56px; font-weight:600; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#c6c6ce);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__of{ font-size:13.5px; color:var(--txt-3); font-variant-numeric:tabular-nums; }
.hero__of b{ color:var(--txt-2); font-weight:500; }
.hero__pct{
  margin-left:auto; font-size:15px; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.progress{ margin:18px 0 20px; }
.progress__track{
  position:relative; height:10px; border-radius:99px;
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
}
.progress__fill{
  position:absolute; inset:0 auto 0 0; height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#8c7440,var(--accent) 78%,var(--accent-2));
  box-shadow:0 0 22px -4px rgba(200,169,106,.55);
  transition:width 1s var(--ease);
}
.progress__fill::after{
  content:""; position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);
  animation:sheen 4.5s var(--ease) infinite;
}
@keyframes sheen{ 0%{ transform:translateX(-100%) } 55%,100%{ transform:translateX(100%) } }
body.no-anim .progress__fill::after{ animation:none; }

.progress__markers{ position:absolute; inset:0; pointer-events:none; }
.marker{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:2px; height:17px; border-radius:2px;
  background:rgba(255,255,255,.16); pointer-events:auto;
}
.marker.is-reached{ background:rgba(255,255,255,.55); }
.marker::after{
  content:attr(data-label);
  position:absolute; top:-29px; left:50%; transform:translateX(-50%) translateY(3px);
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  color:var(--txt-2); background:#15151c;
  border:1px solid var(--line-strong); border-radius:6px; padding:3px 7px;
  opacity:0; transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.marker:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.progress__meta{
  display:flex; justify-content:space-between; margin-top:9px;
  font-size:11px; color:var(--txt-3); font-variant-numeric:tabular-nums;
}

.stat-row{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line); padding-top:17px; gap:12px;
}
.stat{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.stat__label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-4); }
.stat__value{
  font-size:19px; font-weight:500; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.stat__value--accent{ color:var(--accent); }
.stat__value--danger{ color:var(--danger); }

.milestones{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.ms{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-4); border:1px solid var(--line-soft);
  border-radius:99px; padding:4px 10px;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ms::before{ content:""; width:5px; height:5px; border-radius:99px; background:currentColor; opacity:.5; }
.ms.is-reached{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.ms.is-reached::before{ opacity:1; }

/* ===========================================================
   NASTĘPNY ZAKUP
   =========================================================== */

.panel--next{ display:flex; flex-direction:column; }
.next__name{ font-size:23px; font-weight:600; letter-spacing:-.02em; margin-bottom:3px; overflow-wrap:anywhere; }
.next__price{ font-size:15px; color:var(--accent); font-variant-numeric:tabular-nums; margin-bottom:16px; }
.next__rows{ display:flex; flex-direction:column; margin-bottom:14px; }
.next__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px;
}
.next__row:last-child{ border-bottom:0; }
.next__row span:first-child{ color:var(--txt-3); font-size:12px; }
.next__row b{ font-weight:500; font-variant-numeric:tabular-nums; }
.next__row b.is-missing{ color:var(--danger); }
.next__row b.is-ready{ color:var(--ok); }

.afford{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; border-radius:var(--radius-xs); margin-bottom:14px;
  font-size:12.5px; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--line-strong); color:var(--txt-2);
}
.afford--ready{ color:var(--ok); border-color:rgba(127,176,138,.3); background:var(--ok-soft); }
.afford--missing{ color:var(--danger); border-color:rgba(192,122,114,.25); background:var(--danger-soft); }

.mini-progress{
  height:4px; border-radius:99px; background:rgba(255,255,255,.06);
  overflow:hidden; margin:2px 0 16px;
}
.mini-progress__fill{ height:100%; background:linear-gradient(90deg,#8c7440,var(--accent)); transition:width .9s var(--ease); }
.next__foot{ margin-top:auto; display:flex; gap:8px; }
.next__foot .btn{ flex:1; }

.empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding:20px 0 6px; color:var(--txt-4); font-size:13px;
}
.empty b{ color:var(--txt-2); font-weight:500; display:block; font-size:14px; }

/* ===========================================================
   KARTY PODSUMOWAŃ
   =========================================================== */

.sum{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:15px 16px; display:flex; flex-direction:column; gap:7px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.sum:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.sum__label{ font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--txt-4); }
.sum__value{ font-size:22px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sum__sub{ font-size:11px; color:var(--txt-4); }
.sum--accent .sum__value{ color:var(--accent); }
.sum--ok .sum__value{ color:var(--ok); }
.sum--danger .sum__value{ color:var(--danger); }

/* ===========================================================
   CELE
   =========================================================== */

.goals{ display:grid; gap:12px; }
.goal{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.022);
  padding:16px 17px;
  display:flex; flex-direction:column; gap:11px;
  transition:border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.goal:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.035); }
.goal--main{ border-color:var(--accent-line); background:rgba(200,169,106,.05); }
.goal__top{ display:flex; align-items:flex-start; gap:12px; }
.goal__icon{
  width:34px; height:34px; flex:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  color:var(--accent); font-size:15px;
}
.goal__id{ min-width:0; flex:1; }
.goal__name{ font-size:14.5px; font-weight:600; letter-spacing:.01em; overflow-wrap:anywhere; }
.goal__desc{ font-size:11.5px; color:var(--txt-4); margin-top:2px; overflow-wrap:anywhere; }
.goal__tags{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.goal__figures{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.goal__saved{ font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.goal__target{ font-size:12px; color:var(--txt-3); font-variant-numeric:tabular-nums; }
.goal__pct{ font-size:12px; color:var(--accent); font-variant-numeric:tabular-nums; }
.goal__bar{ height:5px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.goal__fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#8c7440,var(--accent)); transition:width .9s var(--ease); }
.goal__fill--done{ background:linear-gradient(90deg,#5f8a6b,var(--ok)); }
.goal__foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.goal__meta{ font-size:11px; color:var(--txt-4); font-variant-numeric:tabular-nums; }
.goal__actions{ display:flex; gap:5px; }

.alloc-bar{
  display:flex; height:8px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.05); margin-bottom:10px;
}
.alloc-bar__seg{ height:100%; transition:width .8s var(--ease); }
.alloc-legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--txt-3); }
.alloc-legend i{ display:inline-block; width:8px; height:8px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

/* ===========================================================
   TABELE / LISTY
   =========================================================== */

.table{ width:100%; }
.table__head,
.row{ display:grid; align-items:center; gap:12px; padding:11px 10px; }

.table--plan .table__head,
.table--plan .row{ grid-template-columns:22px minmax(0,1fr) 108px 96px 132px 104px; }
.table--ledger .table__head,
.table--ledger .row{ grid-template-columns:96px 104px minmax(0,1fr) 118px 30px; }
.table--hist .table__head,
.table--hist .row{ grid-template-columns:96px minmax(0,1fr) 108px 110px 104px; }

.table__head{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-4);
  border-bottom:1px solid var(--line); padding-bottom:9px;
}
.table__body{ display:flex; flex-direction:column; }
.row{
  border-bottom:1px solid var(--line-soft); border-radius:8px;
  transition:background .16s var(--ease);
}
.row:last-child{ border-bottom:0; }
.row:hover{ background:rgba(255,255,255,.028); }
.row.is-dragging{ opacity:.35; }
.row.is-drop-target{ box-shadow:inset 0 2px 0 var(--accent); }
@keyframes flash{ 0%{ background:rgba(200,169,106,.18) } 100%{ background:transparent } }
.row.is-flash{ animation:flash 1.8s var(--ease); }
@keyframes rowIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
.row--new{ animation:rowIn .34s var(--ease); }

.row__name{ min-width:0; }
.row__title{ font-size:13.5px; font-weight:500; overflow-wrap:anywhere; }
.row__note{ font-size:11px; color:var(--txt-4); margin-top:2px; overflow-wrap:anywhere; }
.row__sub{ font-size:11px; color:var(--txt-4); margin-top:2px; display:flex; gap:7px; flex-wrap:wrap; }
.row__sub .sep{ opacity:.45; }
.row__price{ font-size:13.5px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.row__cat{ font-size:11.5px; color:var(--txt-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row__actions{ display:flex; gap:4px; justify-content:flex-end; }
.row__actions .btn{ opacity:.55; transition:opacity .16s var(--ease); }
.row:hover .row__actions .btn{ opacity:1; }

.drag{
  cursor:grab; color:var(--txt-4); display:flex; align-items:center; justify-content:center;
  height:26px; border-radius:6px; user-select:none;
}
.drag:hover{ color:var(--txt-2); background:rgba(255,255,255,.05); }
.drag:active{ cursor:grabbing; }
.drag svg{ width:14px; height:14px; }

.select{
  appearance:none; -webkit-appearance:none; width:100%;
  padding:6px 24px 6px 10px;
  background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d6d7a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 4px center/16px;
  border:1px solid var(--line-strong); border-radius:7px;
  color:var(--txt-2); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.select:hover{ border-color:rgba(255,255,255,.2); color:var(--txt); }
.select[data-status="SAVING"]{ color:var(--warn); border-color:rgba(201,164,92,.3); }
.select[data-status="READY"]{ color:var(--ok); border-color:rgba(127,176,138,.32); }
.select[data-status="ORDERED"]{ color:var(--info); border-color:rgba(125,148,184,.3); }
.select[data-status="IDEA"]{ color:var(--violet); border-color:rgba(154,134,196,.3); }
.select[data-status="HAVE"], .select[data-status="INSTALLED"]{ color:var(--ok); border-color:rgba(127,176,138,.3); }
.select option{ background:#14141a; color:var(--txt); text-transform:none; letter-spacing:0; }

.amount{ font-variant-numeric:tabular-nums; text-align:right; font-size:13.5px; white-space:nowrap; }
.amount--in{ color:var(--ok); }
.amount--out{ color:var(--danger); }
.amount--neutral{ color:var(--violet); }
.date-cell{ font-size:12px; color:var(--txt-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

.affordable{
  display:inline-block; width:5px; height:5px; border-radius:99px;
  background:var(--ok); margin-left:7px; vertical-align:middle;
  box-shadow:0 0 8px rgba(127,176,138,.6);
}

/* ===========================================================
   KARTY: setup, lista życzeń, workspace
   =========================================================== */

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.card{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.022); padding:15px 16px;
  display:flex; flex-direction:column; gap:8px; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.card:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.04); transform:translateY(-1px); }
.card__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.card__name{ font-size:13.5px; font-weight:600; overflow-wrap:anywhere; }
.card__price{ font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.card__meta{ font-size:11px; color:var(--txt-4); display:flex; gap:7px; flex-wrap:wrap; }
.card__meta .sep{ opacity:.45; }
.card__notes{ font-size:11.5px; color:var(--txt-3); overflow-wrap:anywhere; }
.card__foot{ display:flex; gap:6px; margin-top:auto; padding-top:4px; flex-wrap:wrap; }

.ws-list{ display:flex; flex-direction:column; }
.ws-item{
  display:grid; grid-template-columns:minmax(0,1fr) 150px 60px;
  gap:10px; align-items:center;
  padding:10px; border-bottom:1px solid var(--line-soft); border-radius:8px;
  transition:background .16s var(--ease);
}
.ws-item:last-child{ border-bottom:0; }
.ws-item:hover{ background:rgba(255,255,255,.028); }
.ws-item__name{ font-size:13px; overflow-wrap:anywhere; }
.ws-item__name.is-done{ color:var(--txt-3); }
.ws-item__note{ font-size:11px; color:var(--txt-4); }
.ws-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.ws-count{ font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ws-count small{ font-size:14px; color:var(--txt-3); font-weight:400; }

/* notatki */
.notes{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.note{
  display:flex; align-items:center; gap:10px;
  padding:8px 9px; border-radius:var(--radius-xs);
  transition:background .16s var(--ease);
}
.note:hover{ background:rgba(255,255,255,.035); }
.note__text{ font-size:13px; flex:1; min-width:0; overflow-wrap:anywhere; cursor:pointer; }
.note.is-done .note__text{ color:var(--txt-4); text-decoration:line-through; }
.note__box{
  width:16px; height:16px; flex:none; border-radius:5px;
  border:1px solid var(--line-strong); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:transparent;
  transition:border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.note__box:hover{ border-color:var(--accent-line); }
.note.is-done .note__box{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.note__box svg{ width:11px; height:11px; }
.note__del{ opacity:0; transition:opacity .16s var(--ease); }
.note:hover .note__del{ opacity:.6; }
.note__del:hover{ opacity:1; }

.note-add{ display:flex; gap:8px; }
.note-add .input{ flex:1; }

/* ===========================================================
   WYKRES
   =========================================================== */

.chart{ width:100%; }
.chart__svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart__grid{ stroke:rgba(255,255,255,.06); stroke-width:1; }
.chart__line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart__dot{ fill:var(--accent-2); stroke:rgba(5,5,6,.8); stroke-width:2; }
.chart__ylabel{ fill:var(--txt-4); font-size:10px; text-anchor:end; font-family:var(--font); }
.chart__xlabel{ fill:var(--txt-4); font-size:10px; font-family:var(--font); }
.chart__empty{ padding:36px 0; text-align:center; color:var(--txt-4); font-size:12.5px; }

/* ===========================================================
   FILTRY / WYSZUKIWANIE
   =========================================================== */

.seg{ display:flex; gap:2px; padding:2px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px; flex-wrap:wrap; }
.seg__btn{
  border:0; background:transparent; color:var(--txt-4);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:6px; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.seg__btn:hover{ color:var(--txt-2); }
.seg__btn.is-active{ background:rgba(255,255,255,.08); color:var(--txt); }

.search{ position:relative; display:flex; align-items:center; }
.search svg{ position:absolute; left:10px; width:14px; height:14px; color:var(--txt-4); pointer-events:none; }
.search .input{ padding-left:32px; min-width:180px; }

/* ===========================================================
   FORMULARZE / MODAL
   =========================================================== */

.scrim{
  position:fixed; inset:0; z-index:50;
  background:rgba(3,3,5,.7);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fade .2s var(--ease);
}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
}
@keyframes rise{ from{ opacity:0; transform:translateY(16px) scale(.98) } to{ opacity:1; transform:none } }
.modal__card{
  width:100%; max-width:480px;
  background:linear-gradient(180deg,#121219,#0b0b10);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:0 44px 90px -30px rgba(0,0,0,.95);
  animation:rise .28s var(--ease);
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
}
body.no-anim .modal__card{ animation:none; }
.modal__card--wide{ max-width:620px; }
.modal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 20px 16px; border-bottom:1px solid var(--line);
}
.modal__title{ font-size:15px; font-weight:600; }
.modal__sub{ font-size:12px; color:var(--txt-3); margin-top:4px; }
.modal__body{ padding:20px; overflow-y:auto; }
.modal__foot{
  display:flex; justify-content:flex-end; gap:8px;
  padding:15px 20px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.modal__foot .spacer{ margin-right:auto; }

.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field--confirm{ margin-top:16px; }
.field__label{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-4); }
.field__hint{ font-size:11px; color:var(--txt-4); }
.field__error{ font-size:11px; color:var(--danger); display:none; }
.field.has-error .field__error{ display:block; }
.field.has-error .input{ border-color:rgba(192,122,114,.5); }
.form-heading{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
  padding-top:6px; border-top:1px solid var(--line-soft); margin-top:2px;
}

.input{
  width:100%; padding:10px 12px;
  background:rgba(0,0,0,.35); border:1px solid var(--line-strong);
  border-radius:var(--radius-xs);
  color:var(--txt); font-size:13.5px; font-family:inherit;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.input::placeholder{ color:var(--txt-4); }
.input:hover{ border-color:rgba(255,255,255,.18); }
.input:focus{ outline:none; border-color:var(--accent-line); background:rgba(0,0,0,.5); }
textarea.input{ resize:vertical; min-height:68px; line-height:1.5; }
select.input{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d6d7a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center/18px;
  padding-right:32px;
}
select.input option{ background:#14141a; }
.input--sm{ padding:7px 10px; font-size:12.5px; }
.input--amount{ font-size:21px; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; padding:12px; }
input[type="date"].input{ font-variant-numeric:tabular-nums; }
input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.55); cursor:pointer; }

.field--check{ gap:0; }
.check{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  width:18px; height:18px; flex:none; border-radius:6px;
  border:1px solid var(--line-strong); background:rgba(0,0,0,.35);
  position:relative; transition:background .16s var(--ease), border-color .16s var(--ease);
}
.check__box::after{
  content:""; position:absolute; left:5px; top:1.5px;
  width:5px; height:10px; border:solid #15120b; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .18s var(--ease);
}
.check input:checked + .check__box{ background:var(--accent); border-color:var(--accent); }
.check input:checked + .check__box::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check__box{ outline:1px solid var(--accent-line); outline-offset:2px; }
.check__label{ font-size:13px; }

.chiprow{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  border:1px solid var(--line-strong); background:transparent; color:var(--txt-3);
  border-radius:99px; padding:6px 12px; font-size:11.5px; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.chip:hover{ color:var(--txt); border-color:rgba(255,255,255,.2); }
.chip.is-active{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.chip--icon{ font-size:15px; padding:5px 11px; }

.notice{
  font-size:12px; color:var(--txt-3); line-height:1.55;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:var(--radius-xs); padding:12px 13px;
}
.notice--danger{ color:#d69a92; background:var(--danger-soft); border-color:rgba(192,122,114,.25); }
.notice b{ color:var(--txt); font-weight:500; }

.kv{ display:flex; flex-direction:column; }
.kv__row{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px;
}
.kv__row:last-child{ border-bottom:0; }
.kv__row span{ color:var(--txt-3); }
.kv__row b{ font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; text-align:right; }

/* ustawienia */
.setting{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.setting:last-child{ border-bottom:0; }
.setting__text{ min-width:0; }
.setting__name{ font-size:13.5px; font-weight:500; }
.setting__desc{ font-size:11.5px; color:var(--txt-4); margin-top:2px; }
.setting__control{ flex:none; }

.toggle{
  width:44px; height:25px; border-radius:99px; flex:none;
  background:rgba(255,255,255,.08); border:1px solid var(--line-strong);
  position:relative; cursor:pointer; padding:0;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px;
  width:19px; height:19px; border-radius:99px; background:var(--txt-3);
  transition:transform .22s var(--ease), background .22s var(--ease);
}
.toggle.is-on{ background:var(--accent-soft); border-color:var(--accent-line); }
.toggle.is-on::after{ transform:translateX(19px); background:var(--accent); }

/* ===========================================================
   KAMIEŃ MILOWY
   =========================================================== */

.ms-modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,3,5,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fade .25s var(--ease);
}
.ms-modal.is-out{ opacity:0; transition:opacity .3s var(--ease); }
@keyframes msRise{
  from{ opacity:0; transform:translateY(18px) scale(.96) }
  to{ opacity:1; transform:none }
}
.ms-modal__card{
  position:relative; overflow:hidden;
  width:100%; max-width:340px;
  padding:30px 26px 24px;
  border-radius:20px;
  border:1px solid var(--accent-line);
  background:linear-gradient(180deg,#1b1710,#0c0b0a);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), 0 0 70px -30px rgba(200,169,106,.5);
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  animation:msRise .4s var(--ease);
}
.ms-modal__glow{
  position:absolute; top:-50%; left:50%; transform:translateX(-50%);
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,169,106,.3), transparent 65%);
  filter:blur(24px);
  animation:msGlow 3.4s var(--ease) infinite;
}
@keyframes msGlow{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.ms-modal__spark{ position:absolute; inset:0; pointer-events:none; }
.ms-modal__particle{
  position:absolute; bottom:22%; left:50%;
  width:3px; height:3px; border-radius:50%;
  background:var(--accent-2); opacity:0;
  animation:msParticle 3.2s var(--ease) infinite;
  animation-delay:calc(var(--i) * .26s);
}
@keyframes msParticle{
  0%   { opacity:0; transform:translate(0,0) scale(.6); }
  25%  { opacity:.9; }
  100% { opacity:0; transform:translate(calc((var(--i) - 3.5) * 26px), -110px) scale(1); }
}
.ms-modal__label{
  position:relative; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
}
.ms-modal__value{
  position:relative; font-size:32px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ms-modal__text{ position:relative; font-size:13px; color:var(--txt-2); margin-bottom:14px; }
.ms-modal__card .btn{ position:relative; min-width:110px; }
body.no-anim .ms-modal__card,
body.no-anim .ms-modal__glow,
body.no-anim .ms-modal__particle{ animation:none; }
body.no-anim .ms-modal__particle{ display:none; }

/* ===========================================================
   POWIADOMIENIA
   =========================================================== */

.toasts{
  position:fixed; right:24px; bottom:24px; z-index:70;
  display:flex; flex-direction:column-reverse; gap:10px;
  pointer-events:none; max-width:min(340px, calc(100vw - 48px));
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
.toast{
  position:relative; pointer-events:auto;
  background:linear-gradient(180deg,#14141b,#0d0d12);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.95);
  animation:toastIn .34s var(--ease);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  display:flex; flex-direction:column; gap:3px; cursor:pointer;
}
.toast.is-out{ opacity:0; transform:translateY(6px); }
.toast__label{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-4); }
.toast__text{ font-size:13px; color:var(--txt); }
.toast--ok .toast__label{ color:var(--ok); }
.toast--danger .toast__label{ color:var(--danger); }

/* ===========================================================
   TRYB KOMPAKTOWY
   =========================================================== */

body.compact{ --pad:16px; --gap:12px; --radius:13px; font-size:13px; }
body.compact .hero__amount{ font-size:44px; }
body.compact .panel--hero{ padding:20px; }
body.compact .row{ padding:8px 9px; }
body.compact .topbar{ padding:16px 22px 12px; }
body.compact .view{ padding:2px 22px 24px; }
body.compact .sum__value{ font-size:19px; }
body.compact .goal{ padding:13px 14px; }
body.compact .card{ padding:12px 13px; }
body.compact .next__name{ font-size:20px; }

/* ===========================================================
   RESPONSYWNOŚĆ
   =========================================================== */

@media (max-width:1280px){
  .grid--hero, .grid--split, .grid--wide-left{ grid-template-columns:minmax(0,1fr); }
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:1060px){
  :root{ --sidebar:0px; }
  .shell{ grid-template-columns:minmax(0,1fr); }
  .sidebar{
    position:sticky; top:0; height:auto; z-index:35;
    flex-direction:column; padding:12px 16px 10px;
    border-right:0; border-bottom:1px solid var(--line);
    background:rgba(6,6,9,.88);
  }
  .brand{ padding:2px 2px 12px; }
  .nav{
    flex-direction:row; gap:6px; overflow-x:auto;
    padding-bottom:2px; scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav__link{ padding:7px 12px; white-space:nowrap; border:1px solid var(--line); background:rgba(255,255,255,.03); }
  .nav__link span:not(.nav__count){ font-size:12.5px; }
  .nav__count{ display:none; }
  .sidebar__foot{ display:none; }
  .topbar{ padding:16px 18px 12px; }
  .view{ padding:2px 18px 26px; }
  .foot{ padding:18px 18px 30px; }
}

@media (max-width:820px){
  body{ font-size:13.5px; }
  .topbar{ flex-direction:column; align-items:stretch; gap:12px; }
  .topbar__right{ justify-content:space-between; }
  .topbar__date{ display:none; }
  .topbar__right .btn{ flex:1; }
  .hero__amount{ font-size:40px; }
  .hero__pct{ margin-left:0; }
  .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
  .grid--2, .grid--3{ grid-template-columns:minmax(0,1fr); }
  .cards{ grid-template-columns:minmax(0,1fr); }

  /* tabele → karty */
  .table--plan .table__head,
  .table--ledger .table__head,
  .table--hist .table__head{ display:none; }

  .table--plan .row{
    grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:13px 10px;
    border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px;
  }
  .table--plan .row > .drag{ display:none; }
  .table--plan .row__name{ grid-column:1; }
  .table--plan .row__price{ grid-column:2; text-align:right; }
  .table--plan .row__cat{ grid-column:1; }
  .table--plan .cell--status{ grid-column:1; }
  .table--plan .row__actions{ grid-column:2; }
  .table--plan .row__actions .btn{ opacity:1; }

  .table--ledger .row{ grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:12px 10px; }
  .table--ledger .row > *:nth-child(1){ grid-row:2; grid-column:1; }
  .table--ledger .row > *:nth-child(2){ grid-row:2; grid-column:2; justify-self:end; }
  .table--ledger .row > *:nth-child(3){ grid-row:1; grid-column:1; }
  .table--ledger .row > *:nth-child(4){ grid-row:1; grid-column:2; }
  .table--ledger .row > *:nth-child(5){ display:none; }

  .table--hist .row{ grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:12px 10px; }
  .table--hist .row > *:nth-child(1){ grid-row:2; grid-column:1; }
  .table--hist .row > *:nth-child(2){ grid-row:1; grid-column:1; }
  .table--hist .row > *:nth-child(3){ grid-row:2; grid-column:2; justify-self:end; }
  .table--hist .row > *:nth-child(4){ grid-row:3; grid-column:1; }
  .table--hist .row > *:nth-child(5){ grid-row:1; grid-column:2; justify-self:end; }

  .ws-item{ grid-template-columns:minmax(0,1fr) 128px; }
  .ws-item__actions{ grid-column:2; justify-self:end; }

  .form-grid{ grid-template-columns:minmax(0,1fr); }
  .modal{ padding:12px; align-items:flex-end; }
  .modal__card{ max-height:calc(100vh - 24px); }
  .toasts{ right:14px; left:14px; bottom:14px; max-width:none; }
  .bg__blob{ filter:blur(70px); }
}

@media (max-width:480px){
  .hero__amount{ font-size:34px; }
  .view{ padding:2px 12px 24px; }
  .topbar{ padding:14px 12px 10px; }
  .sidebar{ padding:10px 12px 8px; }
  .foot{ padding:16px 12px 26px; }
  .panel{ padding:16px; }
}

/* ===========================================================
   RUCH
   =========================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .bg__blob{ animation:none !important; }
}

body.no-anim *,
body.no-anim *::before,
body.no-anim *::after{
  transition-duration:.001ms !important;
}

@media print{
  .sidebar,.topbar__right,.row__actions,.seg,.bg{ display:none !important; }
}