:root{
  --tlo:#f6f4ef; --karta:#ffffff; --tekst:#1c1f26; --mute:#6b7280; --linia:#e3e0d8;
  --akcent:#1d3557; --ok:#2a9d8f; --ok-tlo:#e6f4f1; --minus:#c0392b; --uwaga:#e9c46a;
  --r:12px; --gap:12px; --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--tlo:#14161b;--karta:#1e2129;--tekst:#e8e6e1;--mute:#9aa0ab;--linia:#2c303a;--akcent:#8ab4f8;--ok:#5bc0ae;--ok-tlo:#1c2b29;--minus:#e07068}
}
*{box-sizing:border-box}
html{font-family:var(--font);font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tekst);line-height:1.4}
a{color:var(--akcent)}
main{max-width:760px;margin:0 auto;padding:0 12px 60px}
h1{font-size:1.4rem;margin:.6rem 0}
h2{font-size:1.05rem;margin:0 0 .5rem;display:flex;justify-content:space-between;align-items:baseline}
h2 .suma{font-weight:600;color:var(--mute);font-size:.95rem}
small{color:var(--mute)}
.top{position:sticky;top:0;z-index:5;background:var(--akcent);color:#fff;display:flex;align-items:center;gap:8px;padding:8px 12px;overflow-x:auto}
.top .logo{color:#fff;font-weight:700;text-decoration:none;margin-right:6px}
.top nav{display:flex;gap:4px}
.top nav a{color:#fff;text-decoration:none;padding:6px 9px;border-radius:8px;white-space:nowrap;opacity:.9}
.top nav a:hover{background:rgba(255,255,255,.15)}
.dol{text-align:center;color:var(--mute);font-size:.8rem;padding:20px}
.naw-mies{display:flex;align-items:center;justify-content:space-between;margin:10px 0 4px}
.naw-mies a{font-size:1.8rem;text-decoration:none;padding:0 14px;line-height:1}
.naw-mies h1{margin:0;text-transform:capitalize}
.pods{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:12px 14px;margin:8px 0 16px}
.pods .glowna{display:flex;flex-direction:column;align-items:center;padding:4px 0 10px;border-bottom:1px solid var(--linia);margin-bottom:8px}
.pods .glowna .etyk{color:var(--mute);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.pods .glowna strong{font-size:2rem;color:var(--ok)}
.pods .glowna.minus strong{color:var(--minus)}
.pods dl{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:0}
.pods dl div{display:flex;justify-content:space-between;gap:8px}
.pods dt{color:var(--mute)}
.pods dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500}
.pods .wazne dd{color:var(--akcent);font-weight:700}
.blok{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:12px 14px;margin:0 0 14px}
.lista{list-style:none;margin:0;padding:0}
.poz{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linia)}
.poz:first-child{border-top:0}
.poz.ok .nazwa{color:var(--mute);text-decoration:line-through}
.poz .chk{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:2px solid var(--linia);background:transparent;font-size:1.1rem;color:#fff;cursor:pointer}
.poz.ok .chk{background:var(--ok);border-color:var(--ok)}
.poz .opis{flex:1;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.poz .opis small{font-size:.78rem}
.poz .nazwa{font-weight:500;background:transparent;border:0;color:inherit;font:inherit;padding:0;width:100%}
.poz input.nazwa:focus{outline:1px dashed var(--akcent);border-radius:4px}
.poz .kwota{width:96px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;background:transparent;border:0;border-bottom:1px dashed var(--linia);color:inherit;font:inherit;font-weight:600;padding:2px 0}
.poz .kwota.minus,.minus{color:var(--minus)}
.poz .kto{color:var(--mute);font-size:.85rem;min-width:70px}
.poz .usun{border:0;background:transparent;color:var(--mute);font-size:1.3rem;cursor:pointer;padding:0 4px;line-height:1}
.poz .usun:hover{color:var(--minus)}
.rzad{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rzad input,.rzad select{flex:1 1 120px;min-width:0}
.rzad button{flex:0 0 auto}
input,select,button{font:inherit;padding:9px 10px;border-radius:8px;border:1px solid var(--linia);background:var(--tlo);color:var(--tekst)}
button{background:var(--akcent);color:#fff;border-color:var(--akcent);cursor:pointer}
button.usun-tekst{background:transparent;color:var(--minus);border:0;padding:6px 0}
.dodaj summary{cursor:pointer;color:var(--akcent);margin-top:8px;font-size:.9rem}
.siatka{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:8px}
.siatka label{display:flex;flex-direction:column;font-size:.85rem;color:var(--mute);gap:3px}
.siatka label.szeroka,.siatka button{grid-column:1/-1}
.tabelka{display:grid;gap:4px;margin:8px 0}
.tabelka div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--linia);padding:3px 0}
.tabelka dt{color:var(--mute)}.tabelka dd{margin:0;font-variant-numeric:tabular-nums}
.tabelka .wazne dd{font-weight:700;color:var(--akcent)}
.tabela-przewijana{overflow-x:auto}
.tab{border-collapse:collapse;width:100%;font-size:.9rem}
.tab th,.tab td{padding:6px 6px;border-bottom:1px solid var(--linia);text-align:left;white-space:nowrap}
.tab td:nth-child(n+2){font-variant-numeric:tabular-nums}
.tab input{padding:5px 6px;width:100%;min-width:60px}
.tab td.akcje{display:flex;gap:4px}
.wykres{width:100%;height:140px;background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:6px}
.s-wplywy{fill:var(--ok);color:var(--ok)}.s-koszty{fill:var(--akcent);color:var(--akcent)}.os{stroke:var(--linia)}
.legenda{font-size:.85rem;color:var(--mute)}
.karta-kredyt.wygaszony{opacity:.6}
.centrum{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.karta.login{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:24px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px}
.karta.login label{display:flex;flex-direction:column;gap:4px}
.blad{color:var(--minus);font-weight:500}
.info{color:var(--ok);font-weight:500}
@media (max-width:480px){
  .pods dl{grid-template-columns:1fr}
  .siatka{grid-template-columns:1fr}
  .poz .kwota{width:84px}
}