/* Pulpit klienta JUSTICE — arkusz podstawowy. Bez zewnętrznych czcionek i skryptów (CSP, RODO). */
:root {
  --papier: #f4f5f7;
  --powierzchnia: #ffffff;
  --atrament: #1d2530;
  --atrament-cichy: #5b6572;
  --linia: #d7dce3;
  --akcent: #1c2333;          /* granat marki — akcje, linki */
  --akcent-ciemny: #0f1420;
  --akcent-tlo: #edeae0;      /* kremowy pod złoto */
  --zloto: #c9b26b;
  --zloto-ciemne: #7d6a2e;   /* 1.40.3: bylo #a08a4a — 2,8:1 na kremowym tle (etykiety, kafle ZUS/CIT/ZAL); teraz ok. 4,8:1 */
  --ciemny: #1c1c1c;
  --blad: #a8352f;
  --blad-tlo: #fbecea;
  --uwaga: #7f560b;   /* 1.40.3: ciemniej — kontrast na jasnozoltym tle */
  --promien: 6px;
  --maks: 60rem;
}
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; line-height: 1.5; color: var(--atrament); background: var(--papier);
}
a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akcent-ciemny); }
h1 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .25rem; font-weight: 650; }
h2 { font-size: 1.0625rem; margin: 0 0 .5rem; font-weight: 650; }
p { margin: 0 0 .75rem; max-width: 65ch; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95em; }
.cicho { color: var(--atrament-cichy); }
.drobne { font-size: .875rem; }

/* Motyw ciemny — te same zmienne, inne wartosci */
:root[data-motyw="ciemny"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { color-scheme: dark; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --papier: #15171c; --powierzchnia: #1e2129; --atrament: #e8e6df; --atrament-cichy: #a09d94; --linia: #333744;
    --akcent: #c9b26b; --akcent-ciemny: #e0cc8a; --akcent-tlo: #2a2a22; --zloto-ciemne: #d6c07e; --ok-tlo: #1e2b22; --blad-tlo: #33201f; --uwaga: #e4b45c; --blad: #e26a63; --ciemny: #0f1013;
  }
}
:root[data-motyw="ciemny"] {
  --papier: #15171c; --powierzchnia: #1e2129; --atrament: #e8e6df; --atrament-cichy: #a09d94; --linia: #333744;
  --akcent: #c9b26b; --akcent-ciemny: #e0cc8a; --akcent-tlo: #2a2a22; --zloto-ciemne: #d6c07e; --ok-tlo: #1e2b22; --blad-tlo: #33201f; --uwaga: #e4b45c; --blad: #e26a63; --ciemny: #0f1013;
}
/* 1.40.1: ciemny tekst aktywnej pozycji tylko w dolnym menu telefonu (pelne zlote tlo); w menu bocznym aktywna ma przezroczyste zloto
   i bialy tekst — ta regula (silniejsza przez :root) dawala tam ciemny, ledwo widoczny napis w trybie ciemnym */
@media (max-width: 59.99rem) { :root[data-motyw="ciemny"] .nawigacja a.aktywna { color: #15171c; } }
@media (max-width: 59.99rem) and (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .nawigacja a.aktywna { color: #15171c; } }
:root[data-motyw="ciemny"] .kafel, :root[data-motyw="ciemny"] .wpis.strona-biuro { border-color: #3a3d48; }
:root[data-motyw="ciemny"] a.przycisk, :root[data-motyw="ciemny"] button.glowny { color: #15171c; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) a.przycisk, :root:not([data-motyw="jasny"]) button.glowny { color: #15171c; } }
:root[data-motyw="ciemny"] textarea, :root[data-motyw="ciemny"] input, :root[data-motyw="ciemny"] select { background: var(--powierzchnia); color: var(--atrament); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) textarea, :root:not([data-motyw="jasny"]) input, :root:not([data-motyw="jasny"]) select { background: var(--powierzchnia); color: var(--atrament); } }
.motyw { display: inline-flex; border: 1px solid #444; border-radius: 999px; overflow: hidden; margin-right: .4rem; }
.motyw button { background: transparent; color: #bbb; border: 0; padding: .15rem .5rem; font-size: .85rem; cursor: pointer; line-height: 1.4; }
.motyw button.aktywny { background: var(--zloto); color: #1c1c1c; }
.motyw button:hover { color: #fff; }
.motyw button.aktywny:hover { color: #1c1c1c; }

/* Nagłówek marki */
.naglowek { background: var(--ciemny); border-bottom: 3px solid var(--zloto); color: #fff; }
.naglowek-wnetrze { max-width: 72rem; margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; gap: .9rem; }
.marka img { display: block; height: 35px; width: auto; }
.naglowek-tytul { color: var(--zloto); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
.naglowek-prawa { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.naglowek-prawa .kto { color: #bbb; }
.naglowek-link { color: #fff; font-size: .875rem; text-decoration: none; }
.naglowek-link:hover { color: var(--zloto); }
.naglowek-prawa form { margin: 0; }
.pasek-test { background: #3a2f10; color: var(--zloto); text-align: center; font-size: .8125rem; padding: .2rem; }
@media (max-width: 40rem) { .naglowek-tytul, .naglowek-prawa .kto { display: none; } }

/* Nawigacja: boczna na szerokich, dolna na telefonie */
.nawigacja { display: flex; gap: .25rem; }
.nawigacja a { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; color: var(--atrament); text-decoration: none; border-radius: var(--promien); font-size: .9375rem; }
.nawigacja a:hover { background: var(--akcent-tlo); }
.nawigacja a.aktywna { background: var(--akcent); color: #fff; }
.nawigacja .ikona { width: 1.4rem; text-align: center; color: var(--zloto-ciemne); font-size: 1.05rem; }
.nawigacja a.aktywna .ikona { color: var(--zloto); }
@media (min-width: 60rem) {
  body.zalogowany { display: grid; grid-template-columns: 14rem 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "naglowek naglowek" "nawigacja tresc" "stopka stopka"; }
  body.zalogowany .naglowek { grid-area: naglowek; }
  body.zalogowany .nawigacja { grid-area: nawigacja; flex-direction: column; padding: 1.25rem .75rem; border-right: 1px solid var(--linia); background: var(--powierzchnia); }
  body.zalogowany .tresc { grid-area: tresc; max-width: 84rem; margin: 0; width: 100%; min-width: 0; }
  body.zalogowany .stopka { grid-area: stopka; }
}
@media (max-width: 59.99rem) {
  body.zalogowany .nawigacja { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; background: var(--powierzchnia); border-top: 1px solid var(--linia); justify-content: space-around; padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); overflow-x: auto; }
  body.zalogowany .nawigacja a { flex-direction: column; gap: .1rem; font-size: .7rem; padding: .3rem .5rem; min-width: 3.6rem; }
  body.zalogowany .nawigacja .ikona { font-size: 1.2rem; }
  body.zalogowany .tresc { padding-bottom: 5rem; }
  body.zalogowany .stopka { padding-bottom: 5rem; }
}

/* Treść */
.tresc { flex: 1; width: 100%; max-width: var(--maks); margin: 0 auto; padding: 1.25rem 1rem 2rem; }
body.srodek .tresc { display: grid; place-items: start center; padding-top: 2.5rem; }
.tytul-strony { margin-bottom: 1.25rem; }
.sekcja { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1rem; margin-bottom: .875rem; }
.sekcja p:last-child { margin-bottom: 0; }
.stopka { text-align: center; color: var(--atrament-cichy); font-size: .8125rem; padding: 1rem; }

/* Formularze */
label { display: block; font-weight: 500; margin-bottom: .875rem; }
input[type=email], input[type=password], input[type=text], input[type=search], input[type=date], input[type=number], input[type=tel], input[type=month], input[type=time], select {   /* 1.40.3: + date/number/tel/month/time — byly niestylowane (cienka szara ramka, mala czcionka) */
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--linia); border-radius: var(--promien); background: #fff; color: var(--atrament);
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
input.kod { font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
button { font: inherit; cursor: pointer; }
button.glowny { width: 100%; padding: .7rem 1rem; background: var(--akcent); color: #fff; border: 0; border-radius: var(--promien); font-weight: 600; }
button.glowny:hover { background: var(--akcent-ciemny); }
button.link { background: none; border: 0; padding: 0; color: var(--akcent); text-decoration: underline; text-underline-offset: 2px; }
.ok { background: var(--akcent-tlo); color: var(--akcent-ciemny); border-left: 3px solid var(--akcent); padding: .5rem .75rem; border-radius: 0 var(--promien) var(--promien) 0; }
.link-aktywacyjny { display: block; padding: .6rem .7rem; background: var(--akcent-tlo); border-radius: var(--promien); word-break: break-all; user-select: all; font-size: .9rem; }
.tabela { width: 100%; border-collapse: collapse; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.tabela th, .tabela td { text-align: left; padding: .6rem .75rem; border-top: 1px solid var(--linia); vertical-align: top; }
.tabela th { border-top: 0; font-weight: 600; font-size: .875rem; color: var(--atrament-cichy); }
.tabela form { margin: 0; }
button.drugi { padding: .4rem .7rem; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament); border-radius: var(--promien); font-size: .875rem; }
button.drugi:hover { background: var(--akcent-tlo); }
button.drugi.cichy { border-color: transparent; color: var(--atrament-cichy); }
.tabela td.akcje { display: grid; gap: .35rem; justify-items: start; }
.formularz-wiersz { display: grid; gap: .5rem; grid-template-columns: 1fr; margin-top: 1rem; }
.formularz-wiersz label { margin: 0; }
@media (min-width: 40rem) { .formularz-wiersz { grid-template-columns: 2fr 1fr auto; align-items: end; } }
.blad { background: var(--blad-tlo); color: var(--blad); border-left: 3px solid var(--blad); padding: .5rem .75rem; border-radius: 0 var(--promien) var(--promien) 0; }

/* Logowanie */
.karta-logowania { width: 100%; max-width: 24rem; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1.5rem; }
.karta-logowania.szeroka { max-width: 32rem; }
.karta-logowania h1 { margin-bottom: .25rem; }
.karta-logowania form { margin-top: 1rem; }
.kroki { padding-left: 1.25rem; margin: 0 0 1rem; }
.kroki li { margin-bottom: .6rem; }
.qr { width: 11rem; max-width: 100%; margin: .5rem 0; background: #fff; padding: .25rem; border: 1px solid var(--linia); border-radius: var(--promien); }
.qr svg { display: block; width: 100%; height: auto; }
.sekret { display: block; margin: .4rem 0 .2rem; padding: .5rem .6rem; background: var(--akcent-tlo); border-radius: var(--promien); font-size: 1.05rem; letter-spacing: .06em; word-break: break-all; user-select: all; }

/* Droga dokumentu — jedyny element „graficzny" strony */
.etapy { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; gap: .25rem; counter-reset: etap; }
.etapy li { flex: 1; text-align: center; font-size: .8125rem; color: var(--atrament-cichy); padding-top: .5rem; position: relative; }
.etapy li::before { content: ""; display: block; height: 3px; background: var(--linia); border-radius: 2px; margin-bottom: .4rem; }
.etapy li.zrobiony::before { background: var(--zloto); }
.etapy li.zrobiony { color: var(--atrament); }
.etapy li.odrzucony::before { background: var(--blad); }
.etapy li.odrzucony { color: var(--blad); }

/* Wgrywanie i lista plików */
.wgrywanie { display: grid; gap: .75rem; }
.pole-pliku { display: block; border: 2px dashed var(--linia); border-radius: var(--promien); padding: 1.25rem; text-align: center; background: var(--papier); cursor: pointer; }
.pole-pliku span { display: block; font-weight: 600; margin-bottom: .5rem; }
.pole-pliku input { width: 100%; font: inherit; }
.pole-pliku:hover, .pole-pliku:focus-within { border-color: var(--akcent); }
a.przycisk { display: inline-block; padding: .55rem .9rem; background: var(--akcent); color: #fff; border-radius: var(--promien); font-weight: 600; text-decoration: none; margin-right: .5rem; }
a.przycisk:hover { background: var(--akcent-ciemny); color: #fff; }
.lista-plikow { list-style: none; padding: 0; margin: 0; }
.lista-plikow li + li { border-top: 1px solid var(--linia); }
.lista-plikow a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nazwa stan" "meta stan"; gap: .1rem .75rem; padding: .7rem 0; color: var(--atrament); text-decoration: none; align-items: center; }
.lista-plikow .nazwa { grid-area: nazwa; font-weight: 550; overflow-wrap: anywhere; }
.lista-plikow .meta { grid-area: meta; }
.lista-plikow .stan { grid-area: stan; font-size: .8125rem; padding: .2rem .55rem; border-radius: 999px; background: var(--papier); color: var(--atrament-cichy); white-space: nowrap; }
.lista-plikow li.stan-rozpoznany .stan { background: var(--akcent-tlo); color: var(--akcent-ciemny); }
.lista-plikow li.stan-zaksiegowany .stan { background: var(--akcent); color: #fff; }
.lista-plikow li.stan-pobrany .stan { background: var(--akcent-tlo-jasne); color: var(--uwaga); }
.lista-plikow li.stan-odrzucony .stan { background: var(--blad-tlo); color: var(--blad); }
.lista-plikow a:hover .nazwa { color: var(--akcent-ciemny); }
.dane { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .75rem; }
.dane dt { color: var(--atrament-cichy); font-size: .875rem; }
.dane dd { margin: 0; }
img.podglad { display: block; max-width: 100%; height: auto; border: 1px solid var(--linia); border-radius: var(--promien); }

/* Lista klientów (admin) */
.szukaj { display: flex; gap: .5rem; margin-bottom: 1rem; }
.szukaj input { margin: 0; flex: 1; }
.szukaj button { padding: .6rem .9rem; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament); border-radius: var(--promien); }
.lista-klientow { list-style: none; padding: 0; margin: 0; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.lista-klientow li { display: flex; align-items: center; }
.lista-klientow li + li { border-top: 1px solid var(--linia); }
.lista-klientow li form { flex: 1; }
.lista-klientow a.uzytkownicy { padding: 0 1rem; font-size: .875rem; white-space: nowrap; }
.lista-klientow form { margin: 0; }
.lista-klientow button.wiersz { width: 100%; text-align: left; background: none; border: 0; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .1rem; color: var(--atrament); }
.lista-klientow button.wiersz:hover { background: var(--akcent-tlo); }
.lista-klientow .nazwa { font-weight: 550; }
.lista-klientow li.wybrany { box-shadow: inset 3px 0 0 var(--akcent); }
.lista-klientow li.nieaktywny .nazwa { color: var(--atrament-cichy); }

@media (min-width: 40rem) {
  h1 { font-size: 1.75rem; }
  .tresc { padding: 2rem 1.5rem 3rem; }
  .sekcja { padding: 1.25rem 1.5rem; }
  .etapy li { font-size: .875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  button.glowny, .lista-klientow button.wiersz { transition: background-color .12s ease; }
}

.formularz { display: grid; gap: .25rem; max-width: 40rem; }
.dwie-kolumny { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }
@media (min-width: 40rem) { .dwie-kolumny { grid-template-columns: 3fr 1fr; } }

/* Zakładki, faktury KSeF, decyzje, uprawnienia */
.zakladki { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linia); }
.zakladki a { padding: .5rem .8rem; text-decoration: none; color: var(--atrament-cichy); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.zakladki a.aktywna { color: var(--akcent-ciemny); border-color: var(--akcent); font-weight: 600; }
.lista-faktur { list-style: none; padding: 0; margin: 0; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.lista-faktur li + li { border-top: 1px solid var(--linia); }
.wiersz-faktury { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "numer kwota" "kontrahent kwota" "meta stan"; gap: .1rem .75rem; padding: .7rem 1rem; color: var(--atrament); text-decoration: none; }
.wiersz-faktury .numer { grid-area: numer; font-weight: 600; }
.wiersz-faktury .kontrahent { grid-area: kontrahent; }
.wiersz-faktury .kwota { grid-area: kwota; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wiersz-faktury .meta { grid-area: meta; }
.wiersz-faktury .stan { grid-area: stan; font-size: .8125rem; color: var(--atrament-cichy); text-align: right; }
.lista-faktur li.status-zaksiegowany .stan { color: var(--akcent-ciemny); }
.lista-faktur li.z-decyzja .stan { color: var(--uwaga); font-weight: 600; }
.lista-faktur li.status-usuniety .wiersz-faktury { opacity: .6; }
.decyzja-szybka { padding: 0 1rem .7rem; }
.decyzja-szybka summary { cursor: pointer; color: var(--akcent); font-size: .875rem; }
.formularz-decyzji { display: grid; gap: .5rem; margin-top: .5rem; }
.formularz-decyzji label { margin: 0; font-size: .875rem; }
.formularz-decyzji input[type=text] { margin: .2rem 0 0; }
@media (min-width: 40rem) { .formularz-decyzji { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.uprawnienia { display: grid; gap: .3rem; border: 0; padding: 0; margin: 0 0 .5rem; }
.uprawnienia legend { font-weight: 500; margin-bottom: .3rem; }
.ptaszek { display: flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; font-size: .9375rem; }
.ptaszek input { width: auto; margin: 0; }

/* Faktury */
.siatka-2, .siatka-3 { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }
@media (min-width: 40rem) { .siatka-2 { grid-template-columns: 1fr 1fr; } .siatka-3 { grid-template-columns: 1fr 1fr 1fr; } }
.pozycje input, .pozycje select { margin: 0; padding: .4rem .5rem; font-size: .9375rem; }
.pozycje .w-il { width: 4.5rem; } .pozycje .w-jm { width: 4rem; } .pozycje .w-cena { width: 7rem; }
.pozycje td, .pozycje th { padding: .35rem .3rem; vertical-align: middle; }
.pozycje th.r, .pozycje td.r { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.r, .tabela th.r { text-align: right; font-variant-numeric: tabular-nums; }
.przyciski { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.przyciski form { margin: 0; } .przyciski button.glowny { width: auto; padding: .6rem 1.2rem; }
.akcje-faktury a.przycisk { margin-right: .5rem; }
.lista-faktur li.stan-przyjeta .stan { color: var(--akcent-ciemny); font-weight: 600; }
.lista-faktur li.stan-odrzucona .stan { color: var(--blad); font-weight: 600; }
.lista-faktur li.stan-projekt .numer { color: var(--atrament-cichy); font-style: italic; }
@media (max-width: 40rem) { .pozycje thead { display: none; } .pozycje tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .5rem 0; border-top: 1px solid var(--linia); } .pozycje tbody td:first-child { grid-column: 1 / -1; } .pozycje .w-il, .pozycje .w-jm, .pozycje .w-cena { width: 100%; } .pozycje .n, .pozycje .b { font-size: .875rem; } }
.przycisk-link { display: inline-block; padding: .55rem .9rem; border: 1px solid var(--linia); border-radius: var(--promien); text-decoration: none; color: var(--atrament); background: var(--powierzchnia); }
.ok-tekst { color: var(--akcent-ciemny); } .uwaga-tekst { color: var(--uwaga); font-weight: 600; }
.nip-wiersz { display: flex; gap: .5rem; align-items: center; } .nip-wiersz input { margin-top: .3rem; } .nip-wiersz button { margin-top: .3rem; white-space: nowrap; }

/* Kafle pulpitu */
.kafle { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 50rem) { .kafle { grid-template-columns: repeat(4, 1fr); } }
.kafel { display: flex; flex-direction: column; gap: .15rem; padding: 1rem; background: var(--powierzchnia); border: 1px solid var(--linia); border-top: 3px solid var(--zloto); border-radius: var(--promien); text-decoration: none; color: var(--atrament); }
.kafel:hover { border-color: var(--akcent); border-top-color: var(--zloto); }
.kafel-liczba { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kafel-tytul { font-weight: 600; }
.kafel-opis { font-size: .8125rem; color: var(--atrament-cichy); }
.kafel.uwaga { border-top-color: var(--uwaga); } .kafel.uwaga .kafel-opis { color: var(--uwaga); font-weight: 600; }
.kafel.wylaczony { opacity: .55; pointer-events: none; }
.akcje .przyciski { margin: 0; }
a.przycisk.drugi-przycisk { background: var(--powierzchnia); color: var(--atrament); border: 1px solid var(--linia); }
a.przycisk.drugi-przycisk:hover { background: var(--akcent-tlo); color: var(--atrament); }
h1 { color: var(--tytul); }
h2 { color: var(--tytul); }
.tabela tr.zalegla td { background: var(--blad-tlo); }

/* Dzwonek i zgloszenia */
.dzwonek { position: relative; color: #fff; text-decoration: none; font-size: 1.1rem; padding: .1rem .3rem; border-radius: var(--promien); }
.dzwonek .licznik { position: absolute; top: -.35rem; right: -.45rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--blad); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.dzwonek.aktywny .licznik { animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(168,53,47,.55); } 50% { transform: scale(1.12); box-shadow: 0 0 0 .4rem rgba(168,53,47,0); } }
@media (prefers-reduced-motion: reduce) { .dzwonek.aktywny .licznik { animation: none; } }
.licznik-nav { display: inline-block; min-width: 1.2rem; padding: 0 .35rem; border-radius: 999px; background: var(--blad); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; margin-left: .25rem; }
.lista-zgloszen { list-style: none; padding: 0; margin: 0; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.lista-zgloszen li + li { border-top: 1px solid var(--linia); }
.lista-zgloszen a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "temat stan" "meta stan"; gap: .1rem .75rem; padding: .7rem 1rem; color: var(--atrament); text-decoration: none; }
.lista-zgloszen .temat { grid-area: temat; font-weight: 600; } .lista-zgloszen .meta { grid-area: meta; } .lista-zgloszen .stan { grid-area: stan; font-size: .8125rem; color: var(--atrament-cichy); text-align: right; white-space: nowrap; }
.lista-zgloszen li.nowe { box-shadow: inset 4px 0 0 var(--blad); background: var(--blad-tlo); } .lista-zgloszen li.nowe .stan { color: var(--blad); font-weight: 700; }
.lista-zgloszen li.stan-zamknieta a { opacity: .65; }
.nowe-zgloszenie summary { cursor: pointer; } .nowe-zgloszenie form { margin-top: .75rem; }
textarea { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit; border: 1px solid var(--linia); border-radius: var(--promien); background: #fff; color: var(--atrament); resize: vertical; }
.watek { display: grid; gap: .75rem; }
.wpis { padding: .75rem .9rem; border-radius: var(--promien); border: 1px solid var(--linia); background: var(--papier); max-width: 90%; }
.wpis.strona-biuro { background: var(--akcent-tlo); margin-left: auto; border-color: var(--zloto); }
.wpis.strona-system { background: transparent; border-style: dashed; max-width: 100%; text-align: center; font-size: .875rem; color: var(--atrament-cichy); }
.wpis p { white-space: pre-line; margin: .35rem 0 0; } .wpis header { margin-bottom: 0; }
.zalaczniki { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .875rem; }

/* Podatki */
.podatki-biezace.glowny-kafel { border-top: 3px solid var(--zloto); }
.podatki { list-style: none; padding: 0; margin: 0; }
.podatki li + li { border-top: 1px solid var(--linia); }
.podatki a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nazwa kwota" "termin kwota"; gap: .1rem .75rem; padding: .55rem 0; color: var(--atrament); text-decoration: none; }
.podatki .nazwa { grid-area: nazwa; font-weight: 600; } .podatki .termin { grid-area: termin; }
.podatki .kwota { grid-area: kwota; align-self: center; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.podatki li.niewyliczona .kwota { font-size: .875rem; font-weight: 500; color: var(--atrament-cichy); font-style: italic; }
.podatki li.zalegla .kwota { color: var(--blad); }
.podatki li.zaplacona { background: rgba(59,139,90,.07); } .podatki li.zaplacona .kwota { color: var(--atrament-cichy); }
.podatki-suma { text-align: right; margin: .6rem 0 0; border-top: 2px solid var(--zloto); padding-top: .5rem; }
.filtry { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; margin-bottom: .75rem; } .filtry label { margin: 0; } .filtry select { margin-top: .3rem; }
.podatki li.zwrot .kwota { color: var(--akcent-ciemny); }
:root[data-motyw="ciemny"] .podatki li.zwrot .kwota { color: #7fcf8f; }

/* Ekran logowania */
body.logowanie { background: radial-gradient(120% 80% at 20% 0%, #24262c 0%, #17181c 45%, #101114 100%); min-height: 100vh; }
body.logowanie .naglowek { border-bottom-color: transparent; background: transparent; }
body.logowanie .naglowek-tytul { display: none; }
body.logowanie .pasek-test { background: transparent; color: #8a7a4a; }
body.logowanie .tresc { max-width: none; padding: 1.5rem 1rem 3rem; display: grid; place-items: center; }
body.logowanie .stopka, body.srodek .stopka { color: #8d887a; }
/* 1.20.3: linki stopki na ciemnym tle — jasny kolor, zlote podkreslenie, zloto na hover (dotad: kolor --akcent zlewal sie z tlem) */
body.logowanie .stopka a, body.srodek .stopka a { color: #cfc9b8; text-decoration: underline; text-decoration-color: rgba(201,178,107,.55); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
body.logowanie .stopka a:hover, body.srodek .stopka a:hover, body.logowanie .stopka a:focus-visible, body.srodek .stopka a:focus-visible { color: var(--zloto); text-decoration-color: var(--zloto); }
.logowanie-uklad { width: 100%; max-width: 58rem; display: grid; grid-template-columns: 1fr; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(201,178,107,.25); }
@media (min-width: 52rem) { .logowanie-uklad { grid-template-columns: 1.15fr 1fr; min-height: 34rem; } }
.logowanie-marka { background: linear-gradient(160deg, #1f2026 0%, #141519 100%); color: #e9e4d6; padding: 2.5rem 2.25rem; display: flex; flex-direction: column; gap: 1.25rem; position: relative; }
.logowanie-marka::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--zloto), transparent); }
.logowanie-marka img { width: min(100%, 300px); height: auto; }
.logowanie-haslo { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: .25rem 0 0; color: #fff; }
.logowanie-zalety { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .7rem; font-size: .95rem; color: #cfc9b8; }
.logowanie-zalety li { display: flex; gap: .75rem; align-items: center; }
.logowanie-zalety span { width: 1.9rem; height: 1.9rem; flex: 0 0 1.9rem; display: grid; place-items: center; border: 1px solid rgba(201,178,107,.6); border-radius: 50%; color: var(--zloto); font-size: .9rem; }
.logowanie-stopka { margin-top: auto; font-size: .8rem; color: #a9a494; letter-spacing: .08em; text-transform: uppercase; }
.logowanie-stopka a { color: #d9d3c1; text-decoration: underline; text-decoration-color: rgba(201,178,107,.6); text-underline-offset: 3px; transition: color .2s; }
.logowanie-stopka a:hover { color: var(--zloto); }
.logowanie-karta { background: #fff; color: #1c2333; padding: 2.5rem 2.25rem; display: flex; flex-direction: column; justify-content: center; }
.logowanie-karta h1 { font-size: 1.75rem; margin-bottom: .25rem; color: #1c1c1c; }
.logowanie-karta form { margin-top: 1.25rem; }
.logowanie-karta label { font-size: .875rem; font-weight: 600; color: #3a4050; }
.logowanie-karta input { border: 1px solid #d9d7cf; background: #fafaf7; padding: .75rem .85rem; font-size: 1rem; }
.logowanie-karta input:focus { border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.25); outline: none; background: #fff; }
.logowanie-karta button.glowny { margin-top: .5rem; padding: .85rem; background: #1c1c1c; border: 1px solid #1c1c1c; font-weight: 600; letter-spacing: .02em; }
.logowanie-karta button.glowny:hover { background: #2a2a2a; border-color: var(--zloto); box-shadow: inset 0 -3px 0 var(--zloto); }
.logowanie-pomoc { margin-top: 1.25rem; line-height: 1.5; }
.logowanie-bezp { margin-top: .75rem; color: #8a8a80; }
@media (max-width: 51.99rem) { .logowanie-marka { padding: 1.75rem 1.5rem; } .logowanie-haslo { font-size: 1.2rem; } .logowanie-zalety { display: none; } .logowanie-karta { padding: 1.75rem 1.5rem; } }
:root[data-motyw="ciemny"] .logowanie-karta { background: #1e2129; color: var(--atrament); }
:root[data-motyw="ciemny"] .logowanie-karta h1 { color: #fff; } :root[data-motyw="ciemny"] .logowanie-karta label { color: #cfc9b8; }
:root[data-motyw="ciemny"] .logowanie-karta input { background: #15171c; border-color: #333744; color: var(--atrament); }
:root[data-motyw="ciemny"] .logowanie-karta button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .logowanie-karta { background: #1e2129; color: var(--atrament); }
  :root:not([data-motyw="jasny"]) .logowanie-karta h1 { color: #fff; } :root:not([data-motyw="jasny"]) .logowanie-karta label { color: #cfc9b8; }
  :root:not([data-motyw="jasny"]) .logowanie-karta input { background: #15171c; border-color: #333744; color: var(--atrament); }
  :root:not([data-motyw="jasny"]) .logowanie-karta button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
}

/* 1.21.0: logowanie — poswiata, wejscie, plywajace etykiety, pokaz haslo, Caps Lock, stan "Loguje...", kontakt */
body.logowanie .tresc { position: relative; overflow: hidden; }
.logowanie-poswiata { position: absolute; left: -10rem; top: -12rem; width: 40rem; height: 40rem; border-radius: 50%; background: radial-gradient(circle, rgba(201,178,107,.14), rgba(201,178,107,0) 65%); pointer-events: none; animation: log-dryf 18s ease-in-out infinite alternate; }
@keyframes log-dryf { to { transform: translate(28rem, 16rem); } }
@keyframes log-wejscie { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.logowanie-uklad { position: relative; animation: log-wejscie .7s cubic-bezier(.2,.7,.2,1) backwards; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(201,178,107,.35); border-radius: 18px; }
.logowanie-zalety li { animation: log-wejscie .5s ease backwards; animation-delay: calc(var(--i, 0) * 100ms + 150ms); }
.log-form { display: flex; flex-direction: column; gap: .85rem; margin-top: 1.25rem; }
.log-pole { position: relative; }
.logowanie-karta .log-pole input { width: 100%; box-sizing: border-box; height: 3.4rem; padding: 1.25rem .9rem .35rem 2.75rem; border: 1px solid #d8d0bb; border-radius: 12px; background: #fff; color: #15171c; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.logowanie-karta .log-pole input[name=haslo] { padding-right: 3.25rem; }
.logowanie-karta .log-pole input:focus { outline: none; border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.22); }
.logowanie-karta .log-pole input.zle { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.log-pole label { position: absolute; left: 2.75rem; top: 1.05rem; font-size: 1rem; font-weight: 400; color: #6b6556; pointer-events: none; transition: top .18s, font-size .18s, color .18s; }
.log-pole input:focus + label, .log-pole input:not(:placeholder-shown) + label, .log-pole input:-webkit-autofill + label { top: .45rem; font-size: .72rem; color: #8a742f; letter-spacing: .02em; }
.log-pole-ik { position: absolute; left: .9rem; top: 1.05rem; width: 1.15rem; height: 1.15rem; color: #8a742f; display: flex; }
.log-pole-ik svg, .log-oko svg, .log-caps svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.log-oko { position: absolute; right: .3rem; top: .3rem; width: 2.8rem; height: 2.8rem; padding: .7rem; border: 0; border-radius: 10px; background: transparent; color: #5f5a4c; cursor: pointer; transition: background-color .2s, color .2s; }
.log-oko:hover, .log-oko:focus-visible { background: rgba(201,178,107,.14); color: #15171c; }
.log-oko .log-oko-ukryj, .log-oko.widac .log-oko-pokaz { display: none; } .log-oko.widac .log-oko-ukryj { display: block; }
.log-caps { display: flex; gap: .5rem; align-items: center; margin: 0; font-size: .82rem; color: #7a4a00; background: #faeeda; border-radius: 10px; padding: .5rem .75rem; animation: log-wejscie .25s ease both; }
.log-caps[hidden], .log-blad[hidden] { display: none; }
.log-caps svg { width: 1rem; height: 1rem; flex: none; }
.log-blad { margin: 0; font-size: .85rem; color: #a32d2d; }
.logowanie-karta .log-blad-serwer { border-radius: 10px; }
.logowanie-karta { isolation: isolate; }
.logowanie-karta button.log-przycisk { transform: translateZ(0); backface-visibility: hidden; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .6rem; height: 3.25rem; margin-top: .35rem; border-radius: 12px; font-size: 1rem; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
.logowanie-karta button.log-przycisk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(201,178,107,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; pointer-events: none; }
.logowanie-karta button.log-przycisk:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 12px 28px rgba(201,178,107,.35); background: #1c1c1c; }
.logowanie-karta button.log-przycisk:hover::after { transform: translateX(120%); }
.log-spinner { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--zloto); animation: log-kolo .7s linear infinite; }
@keyframes log-kolo { to { transform: rotate(360deg); } }
.log-przycisk.laduje { pointer-events: none; } .log-przycisk.laduje .log-spinner { display: inline-block; }
.logowanie-pomoc { color: #5f5a4c; font-size: .9rem; }
.logowanie-pomoc a { color: #7a6526; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(201,178,107,.55); text-underline-offset: 3px; white-space: nowrap; } .logowanie-pomoc a:hover { color: #15171c; }
:root[data-motyw="ciemny"] .logowanie-karta .log-pole input { background: #15171c; border-color: #333744; color: var(--atrament); }
:root[data-motyw="ciemny"] .log-pole label { color: #a9a494; } :root[data-motyw="ciemny"] .logowanie-pomoc { color: #a9a494; } :root[data-motyw="ciemny"] .logowanie-pomoc a { color: var(--zloto); } :root[data-motyw="ciemny"] .log-oko { color: #cfc9b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .logowanie-karta .log-pole input { background: #15171c; border-color: #333744; color: var(--atrament); }
  :root:not([data-motyw="jasny"]) .log-pole label { color: #a9a494; } :root:not([data-motyw="jasny"]) .logowanie-pomoc { color: #a9a494; } :root:not([data-motyw="jasny"]) .logowanie-pomoc a { color: var(--zloto); } :root:not([data-motyw="jasny"]) .log-oko { color: #cfc9b8; }
}
:root[data-motyw="ciemny"] .log-pole input:focus + label, :root[data-motyw="ciemny"] .log-pole input:not(:placeholder-shown) + label { color: var(--zloto); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .log-pole input:focus + label, :root:not([data-motyw="jasny"]) .log-pole input:not(:placeholder-shown) + label { color: var(--zloto); } }
@media (prefers-reduced-motion: reduce) { .logowanie-poswiata, .logowanie-uklad, .logowanie-zalety li, .log-caps { animation: none; opacity: 1; } .log-spinner { animation-duration: 1.6s; } .logowanie-karta button.log-przycisk, .logowanie-karta button.log-przycisk::after { transition: none; } }

/* Strony "srodek" (kod 2FA, aktywacja, konfiguracja 2FA, potwierdzenia, bledy) — ten sam motyw co logowanie */
body.srodek { background: radial-gradient(120% 80% at 20% 0%, #24262c 0%, #17181c 45%, #101114 100%); min-height: 100vh; }
body.srodek .naglowek { border-bottom-color: transparent; background: transparent; }
body.srodek .naglowek-tytul { display: none; }
body.srodek .pasek-test { background: transparent; color: #8a7a4a; }

body.srodek .tresc { padding-top: 2rem; padding-bottom: 3rem; }
body.srodek .karta-logowania { background: #fff; color: #1c2333; border: 0; border-top: 4px solid var(--zloto); border-radius: 14px; padding: 2.25rem 2rem; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(201,178,107,.25); }
body.srodek .karta-logowania h1 { font-size: 1.6rem; color: #1c1c1c; }
body.srodek .karta-logowania label { font-size: .875rem; font-weight: 600; color: #3a4050; }
body.srodek .karta-logowania input { border: 1px solid #d9d7cf; background: #fafaf7; padding: .75rem .85rem; font-size: 1rem; }
body.srodek .karta-logowania input[name="kod"], body.srodek .karta-logowania input[inputmode="numeric"] { font-size: 1.6rem; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
body.srodek .karta-logowania input:focus { border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.25); outline: none; background: #fff; }
body.srodek .karta-logowania button.glowny { padding: .85rem; background: #1c1c1c; border: 1px solid #1c1c1c; font-weight: 600; }
body.srodek .karta-logowania button.glowny:hover { background: #2a2a2a; border-color: var(--zloto); box-shadow: inset 0 -3px 0 var(--zloto); }
body.srodek .karta-logowania a { color: #1c1c1c; }
body.srodek .karta-logowania code { background: #f2f0e8; padding: .15rem .4rem; border-radius: 4px; }
:root[data-motyw="ciemny"] body.srodek .karta-logowania, :root[data-motyw="ciemny"] body.srodek .karta-logowania h1 { background: #1e2129; color: var(--atrament); }
:root[data-motyw="ciemny"] body.srodek .karta-logowania label { color: #cfc9b8; }
:root[data-motyw="ciemny"] body.srodek .karta-logowania input { background: #15171c; border-color: #333744; color: var(--atrament); }
:root[data-motyw="ciemny"] body.srodek .karta-logowania button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
:root[data-motyw="ciemny"] body.srodek .karta-logowania a { color: var(--zloto); }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) body.srodek .karta-logowania, :root:not([data-motyw="jasny"]) body.srodek .karta-logowania h1 { background: #1e2129; color: var(--atrament); }
  :root:not([data-motyw="jasny"]) body.srodek .karta-logowania label { color: #cfc9b8; }
  :root:not([data-motyw="jasny"]) body.srodek .karta-logowania input { background: #15171c; border-color: #333744; color: var(--atrament); }
  :root:not([data-motyw="jasny"]) body.srodek .karta-logowania button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
  :root:not([data-motyw="jasny"]) body.srodek .karta-logowania a { color: var(--zloto); }
}

/* 1.21.2: kod 2FA spojny z logowaniem — poswiata, wejscie karty, znak w zlotym kole, kod z 6 kropkami postepu, zegar TOTP, przycisk jak na logowaniu */
body.srodek .tresc { position: relative; overflow: hidden; }
body.srodek .karta-2fa { position: relative; width: 100%; max-width: 27rem; box-sizing: border-box; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(201,178,107,.35); animation: log-wejscie .7s cubic-bezier(.2,.7,.2,1) backwards; isolation: isolate; }
.karta-2fa .znak-2fa { width: 3.25rem; height: 3.25rem; margin: 0 0 1rem; border-radius: 50%; display: grid; place-items: center; color: #15171c; background: linear-gradient(135deg, #e3cf8b, var(--zloto)); box-shadow: 0 0 0 0 rgba(201,178,107,.45); animation: kod-puls 2.6s ease-out 1s infinite; }
.karta-2fa .znak-2fa svg { width: 1.4rem; height: 1.4rem; }
@keyframes kod-puls { 0% { box-shadow: 0 0 0 0 rgba(201,178,107,.45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(201,178,107,0); } }
.karta-2fa h1 { margin-bottom: .35rem; }
.kod-pole { display: flex; flex-direction: column; gap: .45rem; }
.kod-etykieta { font-size: .875rem; font-weight: 600; color: #3a4050; }
body.srodek .karta-2fa input.kod { height: 4rem; border: 1px solid #d8d0bb; border-radius: 12px; background: #fff; font-size: 1.9rem; letter-spacing: .55em; padding: 0 0 0 .55em; text-align: center; font-variant-numeric: tabular-nums; transition: border-color .2s, box-shadow .2s; }
body.srodek .karta-2fa input.kod::placeholder { color: #cfc8b4; }
body.srodek .karta-2fa input.kod:focus { border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.22); }
body.srodek .karta-2fa input.kod.komplet { border-color: #3b8b5a; box-shadow: 0 0 0 3px rgba(59,139,90,.18); }
body.srodek .karta-2fa input.kod.zle { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); animation: kod-drgnij .35s ease; }
@keyframes kod-drgnij { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.kod-kropki { display: flex; justify-content: center; gap: .55rem; }
.kod-kropki i { width: .5rem; height: .5rem; border-radius: 50%; background: #e4ddc9; transition: background-color .2s, transform .25s var(--ruch-krzywa); }
.kod-kropki i.pelna { background: var(--zloto); transform: scale(1.25); }
.kod-zegar { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .82rem; color: #6b6556; }
.kod-zegar[hidden] { display: none; }
.kod-zegar svg { width: 1.35rem; height: 1.35rem; transform: rotate(-90deg); flex: none; }
.kod-zegar-tlo { fill: none; stroke: #e4ddc9; stroke-width: 3.5; }
.kod-zegar-luk { fill: none; stroke: var(--zloto); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.kod-zegar.konczy .kod-zegar-luk { stroke: #c0392b; } .kod-zegar.konczy strong { color: #a32d2d; }
.kod-wroc { margin: .75rem 0 0; }
body.srodek .karta-2fa .kod-wroc a { display: inline-flex; gap: .35rem; align-items: center; color: #5f5a4c; text-decoration: none; transition: color .2s, gap .2s; }
body.srodek .karta-2fa .kod-wroc a:hover { color: #15171c; gap: .55rem; }
body.srodek .karta-2fa .logowanie-pomoc a { color: #7a6526; }
body.srodek .karta-2fa button.log-przycisk { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .6rem; height: 3.25rem; margin-top: .35rem; border-radius: 12px; font-size: 1rem; transform: translateZ(0); backface-visibility: hidden; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
body.srodek .karta-2fa button.log-przycisk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(201,178,107,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; pointer-events: none; }
body.srodek .karta-2fa button.log-przycisk:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 12px 28px rgba(201,178,107,.35); background: #1c1c1c; }
body.srodek .karta-2fa button.log-przycisk:hover::after { transform: translateX(120%); }
:root[data-motyw="ciemny"] body.srodek .karta-2fa input.kod { background: #15171c; border-color: #333744; color: var(--atrament); } :root[data-motyw="ciemny"] .kod-etykieta { color: #cfc9b8; } :root[data-motyw="ciemny"] .kod-zegar, :root[data-motyw="ciemny"] body.srodek .karta-2fa .kod-wroc a { color: #a9a494; } :root[data-motyw="ciemny"] .kod-kropki i, :root[data-motyw="ciemny"] .kod-zegar-tlo { background: #333744; stroke: #333744; } :root[data-motyw="ciemny"] body.srodek .karta-2fa .logowanie-pomoc a { color: var(--zloto); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-2fa input.kod { background: #15171c; border-color: #333744; color: var(--atrament); } :root:not([data-motyw="jasny"]) .kod-etykieta { color: #cfc9b8; } :root:not([data-motyw="jasny"]) .kod-zegar, :root:not([data-motyw="jasny"]) body.srodek .karta-2fa .kod-wroc a { color: #a9a494; } :root:not([data-motyw="jasny"]) .kod-kropki i, :root:not([data-motyw="jasny"]) .kod-zegar-tlo { background: #333744; stroke: #333744; } :root:not([data-motyw="jasny"]) body.srodek .karta-2fa .logowanie-pomoc a { color: var(--zloto); } }
@media (prefers-reduced-motion: reduce) { body.srodek .karta-2fa, .karta-2fa .znak-2fa, body.srodek .karta-2fa input.kod.zle { animation: none; } .kod-zegar-luk, body.srodek .karta-2fa button.log-przycisk, body.srodek .karta-2fa button.log-przycisk::after { transition: none; } }

/* Pulpit po zalogowaniu — ciemna nawigacja boczna, jasna tresc, karty z cieniem */
body.zalogowany { background: var(--papier-app); }
@media (min-width: 60rem) {
  body.zalogowany .nawigacja { background: linear-gradient(180deg, #1f2026 0%, #141519 100%); border-right: 0; padding: 1.5rem .9rem; }
  body.zalogowany .nawigacja a { color: #cfc9b8; padding: .65rem .85rem; }
  body.zalogowany .nawigacja a:hover { background: rgba(255,255,255,.06); color: #fff; }
  body.zalogowany .nawigacja a.aktywna { background: rgba(201,178,107,.14); color: #fff; box-shadow: inset 3px 0 0 var(--zloto); }
  body.zalogowany .nawigacja .ikona { color: var(--zloto); }
  body.zalogowany .tresc { padding: 1.75rem 2rem 3rem; }
}
.sekcja, .kafel, .lista-faktur, .lista-zgloszen, .lista-plikow { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(28,35,51,.05); }
.sekcja { border-radius: 12px; }
.kafel { border-radius: 12px; }
.tytul-strony h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; letter-spacing: .01em; text-transform: none; }
.podatki-biezace.glowny-kafel { background: linear-gradient(180deg, var(--akcent-tlo-jasne) 0%, var(--powierzchnia) 60%); }
.kafel-liczba { color: #1c1c1c; }
a.przycisk, button.glowny { background: #1c1c1c; border: 1px solid #1c1c1c; color: #fff; border-radius: 8px; }
a.przycisk:hover, button.glowny:hover { background: #2a2a2a; border-color: var(--zloto); box-shadow: inset 0 -3px 0 var(--zloto); color: #fff; }
button.drugi, a.przycisk-link, a.przycisk.drugi-przycisk { border-radius: 8px; }
.etapy li::before { border-color: var(--zloto); }
:root[data-motyw="ciemny"] body.zalogowany { background: #111216; }
:root[data-motyw="ciemny"] .kafel-liczba { color: #fff; }
:root[data-motyw="ciemny"] .podatki-biezace.glowny-kafel { background: var(--powierzchnia); }
:root[data-motyw="ciemny"] a.przycisk, :root[data-motyw="ciemny"] button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
:root[data-motyw="ciemny"] a.przycisk:hover, :root[data-motyw="ciemny"] button.glowny:hover { background: #e0cc8a; color: #15171c; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) body.zalogowany { background: #111216; }
  :root:not([data-motyw="jasny"]) .kafel-liczba { color: #fff; }
  :root:not([data-motyw="jasny"]) .podatki-biezace.glowny-kafel { background: var(--powierzchnia); }
  :root:not([data-motyw="jasny"]) a.przycisk, :root:not([data-motyw="jasny"]) button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
  :root:not([data-motyw="jasny"]) a.przycisk:hover, :root:not([data-motyw="jasny"]) button.glowny:hover { background: #e0cc8a; color: #15171c; box-shadow: none; }
}
.znak-2fa { font-size: 2rem; margin: 0 0 .25rem; }
.kafel { position: relative; padding-top: 1.1rem; }
.kafel-ikona { position: absolute; top: .8rem; right: .9rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(201,178,107,.6); color: var(--zloto-ciemne); font-size: .95rem; }
.powitanie p:first-child { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; margin-bottom: .15rem; color: var(--zloto-ciemne); }
.uwaga-biura { display: inline-block; margin-top: .2rem; padding: .25rem .5rem; border-left: 3px solid var(--uwaga); background: var(--akcent-tlo-jasne); font-size: .9rem; }
:root[data-motyw="ciemny"] .uwaga-biura { background: #3a2f10; }

/* Zywe listy i toasty */
.nowy { animation: wjazd .6s ease; background: var(--akcent-tlo-jasne); }
@keyframes wjazd { from { opacity: 0; transform: translateY(-.6rem); } to { opacity: 1; transform: none; } }
.znika { opacity: 0; transition: opacity .35s ease, transform .35s ease; transform: translateX(.5rem); }
.zmiana { animation: mrug 1.2s ease; }
@keyframes mrug { 0% { background: #fff1c2; } 100% { background: transparent; } }
[data-kpi].zmiana { animation: mrug-kpi 1.2s ease; }
@keyframes mrug-kpi { 0% { color: var(--zloto-ciemne); transform: scale(1.06); } 100% { transform: none; } }
.brak-wierszy { padding: 1rem; color: var(--atrament-cichy); }
.podatki-suma-wiersz { border-top: 2px solid var(--zloto) !important; } .podatki-suma-wiersz .podatki-suma { display: block; text-align: right; padding: .5rem 0 0; border: 0; margin: 0; }
#toasty { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 50; display: grid; gap: .5rem; width: min(92vw, 34rem); pointer-events: none; }
.toast { background: #1c1c1c; color: #fff; border-left: 4px solid var(--zloto); padding: .7rem 1rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: .9375rem; opacity: 0; transform: translateY(.6rem); transition: opacity .3s, transform .3s; }
.toast.widoczny { opacity: 1; transform: none; }
@media (max-width: 59.99rem) { #toasty { bottom: 5.5rem; } }
:root[data-motyw="ciemny"] .nowy { background: #3a2f10; } :root[data-motyw="ciemny"] .zmiana { animation: mrug-ciemny 1.2s ease; }
@keyframes mrug-ciemny { 0% { background: #3a2f10; } 100% { background: transparent; } }
.obieg-karta { border-top: 3px solid var(--zloto); }
.obieg-karta.komplet { border-top-color: #2e8b57; }
.obieg-karta.zalegla { border-top-color: var(--blad); background: var(--blad-tlo); }
.obieg-poprzednie { margin-top: .5rem; } .obieg-poprzednie ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* Tabela faktur KSeF */
.filtry-ksef { align-items: end; gap: .6rem 1rem; margin-bottom: 1rem; }
.filtry-ksef label { font-size: .8125rem; color: var(--atrament-cichy); font-weight: 600; }
.filtry-ksef select, .filtry-ksef input[type=search] { margin-top: .3rem; border-radius: 8px; }
.filtry-ksef label.szeroko { flex: 1 1 18rem; } .filtry-ksef input[type=search] { width: 100%; }

.tabela-przewijana { max-width: 100%; overflow-x: auto; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(28,35,51,.06); }
.tabela-ksef { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabela-ksef thead th { position: sticky; top: 0; z-index: 2; background: var(--powierzchnia); border-bottom: 1px solid var(--linia); padding: .7rem .75rem; text-align: left;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--atrament-cichy); white-space: nowrap; }
.tabela-ksef thead th.r { text-align: right; } .tabela-ksef thead th.c { text-align: center; }
.tabela-ksef th.sortowalna a { color: inherit; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
.tabela-ksef th.sortowalna a:hover { color: var(--atrament); }
.tabela-ksef th.sortowana a { color: var(--zloto-ciemne); }
.tabela-ksef .strzalka { font-size: .75rem; }
.tabela-ksef tbody tr { border-top: 1px solid var(--linia); transition: background .15s ease; }
.tabela-ksef tbody tr:hover { background: #faf8f1; }
.tabela-ksef tbody tr.klikalny { cursor: pointer; }
.tabela-ksef tbody tr.klikalny:focus-visible { outline: 2px solid var(--zloto); outline-offset: -2px; }
.tabela-ksef td { padding: .7rem .75rem; vertical-align: middle; }
.tabela-ksef .kol-zazn { width: 2.6rem; text-align: center; padding-right: 0; }
.tabela-ksef .kol-zazn input { width: 1.05rem; height: 1.05rem; accent-color: var(--zloto-ciemne); cursor: pointer; }
.tabela-ksef .kol-data { white-space: nowrap; color: var(--atrament-cichy); font-variant-numeric: tabular-nums; width: 6.5rem; }
.tabela-ksef .kol-numer { max-width: 12rem; }
.tabela-ksef .kol-numer a { color: var(--atrament); text-decoration: none; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-ksef tbody tr:hover .kol-numer a { color: var(--zloto-ciemne); }
.tabela-ksef .kol-kontrahent .nazwa { display: block; line-height: 1.25; }
.tabela-ksef .kol-kontrahent .nip { display: block; font-size: .75rem; color: var(--atrament-cichy); font-variant-numeric: tabular-nums; }
.tabela-ksef .kol-rodzaj { width: 6.5rem; }
.tabela-ksef .kol-brutto { white-space: nowrap; width: 9rem; }
.tabela-ksef .kol-brutto .kwota { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; }
.tabela-ksef .kol-brutto .waluta { color: var(--atrament-cichy); font-size: .75rem; margin-left: .3rem; }
.tabela-ksef .kol-stan { width: 13rem; }
.tabela-ksef .kol-stan .komentarz { display: block; margin-top: .2rem; font-size: .75rem; color: var(--uwaga); }
.tabela-ksef .kol-akcja { width: 7.5rem; text-align: right; position: relative; }
.plakietka { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--akcent-tlo); color: var(--atrament); }
.plakietka.rodzaj-zakup { background: #eef1f6; color: #3a4763; }
.plakietka.rodzaj-sprzedaz { background: #f1efe3; color: #6b5c25; }
.plakietka.st-brak { background: #f3f2ee; color: #6a6a63; }
.plakietka.st-wgrany { background: #eaf2ee; color: #2c6446; }
.plakietka.st-zaksiegowany { background: #e6efe8; color: #1f5136; }
.plakietka.st-usuniety { background: #f2f2f2; color: #8a8a80; }
.plakietka.st-blad { background: var(--blad-tlo); color: var(--blad); }
.plakietka.decyzja { background: #fdf3df; color: #7a5a12; }
.plakietka.decyzja.zla { background: var(--blad-tlo); color: var(--blad); }
.plakietka.decyzja.dobra { background: #eaf2ee; color: #2c6446; }
.tabela-ksef tr.z-decyzja td:first-child { box-shadow: inset 3px 0 0 var(--zloto); }
.tabela-ksef tr.usunieta .kol-numer a, .tabela-ksef tr.usunieta .kol-kontrahent .nazwa, .tabela-ksef tr.usunieta .kol-brutto .kwota { text-decoration: line-through; }
.tabela-ksef tr.usunieta { color: var(--atrament-cichy); }
.tabela-ksef .decyzja-szybka summary { display: inline-block; padding: .3rem .65rem; border: 1px solid var(--linia); border-radius: 8px; font-size: .8125rem; color: var(--atrament-cichy); cursor: pointer; list-style: none; }
.tabela-ksef .decyzja-szybka summary::-webkit-details-marker { display: none; }
.tabela-ksef .decyzja-szybka summary:hover { border-color: var(--zloto); color: var(--atrament); }
.tabela-ksef .decyzja-szybka[open] summary { background: var(--ciemny); color: #fff; border-color: var(--ciemny); }
.tabela-ksef .formularz-decyzji { position: absolute; right: .5rem; z-index: 8; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 10px; padding: .75rem; box-shadow: 0 12px 30px rgba(0,0,0,.18); width: 18rem; margin-top: .35rem; text-align: left; }
.tabela-ksef .akcja-link { font-size: .8125rem; color: var(--atrament-cichy); }
.tabela-ksef tfoot td { border-top: 2px solid var(--zloto); padding: .7rem .75rem; font-size: .875rem; }
.tabela-ksef tfoot .podsumowanie { font-variant-numeric: tabular-nums; }
.tabela-ksef .brak-wierszy td { padding: 1.5rem; text-align: center; color: var(--atrament-cichy); }
@media (max-width: 62rem) {
  .tabela-ksef { font-size: .875rem; } .tabela-ksef td, .tabela-ksef thead th { padding: .55rem .5rem; }
  .tabela-ksef .kol-stan { width: auto; } .tabela-ksef .kol-numer { max-width: 9rem; }
}
.strony { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0; }
.strony a { padding: .4rem .75rem; border: 1px solid var(--linia); border-radius: 8px; text-decoration: none; color: var(--atrament); background: var(--powierzchnia); font-size: .9375rem; }
.strony a:hover { border-color: var(--zloto); }
.strony a.aktywna { background: var(--ciemny); color: #fff; border-color: var(--ciemny); }
.strony a.wylaczony { opacity: .4; pointer-events: none; }
.pasek-zbiorczy { position: sticky; top: 0; z-index: 9; display: flex; gap: .75rem 1rem; align-items: end; flex-wrap: wrap; background: var(--ciemny); color: #fff; padding: .8rem 1.1rem; border-radius: 12px; margin-bottom: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); border-left: 4px solid var(--zloto); }
.pasek-zbiorczy .zb-tytul { font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--zloto); line-height: 1.6; }
.pasek-zbiorczy .zb-tytul strong { font-size: .9375rem; letter-spacing: 0; text-transform: none; color: #fff; }
/* podpowiedz zawsze zajmuje to samo miejsce — pasek nie zmienia wysokosci, zmienia sie tylko tresc (z przenikaniem) */
.pasek-zbiorczy .zb-podpowiedz { font-size: .75rem; color: #8f8a7a; flex-basis: 100%; min-height: 1.1rem; transition: opacity .25s ease, color .25s ease; }
.pasek-zbiorczy .zb-podpowiedz::after { content: "Zaznacz faktury na liście, żeby oznaczyć je razem."; }
.pasek-zbiorczy:not(.pusty) .zb-podpowiedz { color: var(--zloto); }
.pasek-zbiorczy:not(.pusty) .zb-podpowiedz::after { content: "Wybierz powód i potwierdź — decyzje trafią do biura przy najbliższym cyklu."; }
.pasek-zbiorczy button.glowny:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pasek-zbiorczy.pusty select, .pasek-zbiorczy.pusty input[type=text] { opacity: .6; }
.pasek-zbiorczy label { color: #cfc9b8; font-size: .8125rem; margin: 0; } .pasek-zbiorczy .szeroko { flex: 1 1 14rem; }
.pasek-zbiorczy select, .pasek-zbiorczy input { margin-top: .25rem; width: 100%; }
.pasek-zbiorczy button.glowny { width: auto; background: var(--zloto); color: #1c1c1c; border-color: var(--zloto); }
.bez-js { display: none; }
.ukryty { display: none !important; }
:root[data-motyw="ciemny"] .tabela-ksef tbody tr:hover { background: #23262f; }
:root[data-motyw="ciemny"] .plakietka { background: #2a2d36; color: var(--atrament); }
:root[data-motyw="ciemny"] .plakietka.st-wgrany, :root[data-motyw="ciemny"] .plakietka.st-zaksiegowany, :root[data-motyw="ciemny"] .plakietka.decyzja.dobra { background: #1e2b22; color: #7fcf8f; }
:root[data-motyw="ciemny"] .plakietka.decyzja { background: #3a2f10; color: var(--zloto); }
:root[data-motyw="ciemny"] .plakietka.decyzja.zla, :root[data-motyw="ciemny"] .plakietka.st-blad { background: #33201f; color: #e26a63; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .tabela-ksef tbody tr:hover { background: #23262f; }
  :root:not([data-motyw="jasny"]) .plakietka { background: #2a2d36; color: var(--atrament); }
}
.plakietka.st-nie { background: #f3efe4; color: #6b5c25; }
.lista-plikow li.stan-nie_ksiegowany .stan { color: #6b5c25; }
.zmiany-biura { list-style: none; padding: 0; margin: .2rem 0 0; font-size: .9rem; } .zmiany-biura li + li { margin-top: .2rem; } .zmiany-biura .pole { color: var(--atrament-cichy); }

/* Wyciagi */
@media (min-width: 50rem) { .kafle { grid-template-columns: repeat(5, 1fr); } }
.wyjasnienie { border-top: 1px solid var(--linia); padding: .5rem 0; }
.wyjasnienie summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; list-style: none; }
.wyjasnienie summary::-webkit-details-marker { display: none; }
.wyjasnienie .w-data { color: var(--atrament-cichy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wyjasnienie .w-kwota { font-variant-numeric: tabular-nums; white-space: nowrap; } .wyjasnienie .w-kwota.minus { color: var(--blad); }
.wyjasnienie .w-opis { flex: 1 1 14rem; }
.formularz-wyj { margin-top: .5rem; padding: .75rem; background: var(--papier); border-radius: 10px; }
.tabela-ksef tr.w-odrzucony td { background: var(--blad-tlo); }

/* Ikony SVG — spojne z glifami nawigacji */
.ik { width: 1.05em; height: 1.05em; vertical-align: -.18em; display: inline-block; }
.nawigacja .ikona .ik { width: 1.15em; height: 1.15em; }
.kafel-ikona .ik { width: 1.1em; height: 1.1em; vertical-align: middle; }
.dzwonek .ik { width: 1.25em; height: 1.25em; }
.znak-2fa .ik.duzy { width: 2.2rem; height: 2.2rem; color: var(--zloto); }
button .ik, .przycisk .ik { vertical-align: -.2em; margin-right: .2rem; }

/* Strefa wgrywania wyciagow */
.strefa { display: block; position: relative; text-align: center; padding: 2rem 1.25rem 1.5rem; border: 2px dashed var(--zloto); border-radius: 14px; background: #fffdf7; cursor: pointer; transition: background .15s, border-color .15s; margin: 0 0 1rem; }
.strefa:hover, .strefa.nad { background: #fff8e6; border-color: var(--zloto-ciemne); }
.strefa input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.strefa-ikona { display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto .5rem; color: var(--zloto-ciemne); }
.strefa-ikona svg { width: 100%; height: 100%; }
.strefa-tytul { display: block; font-weight: 600; font-size: 1.05rem; }
.strefa-opis { display: block; margin-top: .3rem; max-width: 34rem; margin-left: auto; margin-right: auto; }
.strefa-lista { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: .75rem; }
.strefa-lista .plik { display: inline-block; padding: .25rem .6rem; border-radius: 999px; background: var(--powierzchnia); border: 1px solid var(--linia); font-size: .8125rem; }
.strefa-lista .plik em { color: var(--atrament-cichy); font-style: normal; } .strefa-lista .plik.zly { border-color: var(--blad); color: var(--blad); }
.strefa.ma-pliki { border-style: solid; }
.wyciag-opcje { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.wyciag-opcje > label { margin: 0; min-width: 12rem; } .wyciag-opcje select { margin-top: .3rem; }
.wyciag-opcje .haslo-pdf { flex: 1 1 14rem; } .wyciag-opcje .haslo-pdf summary { cursor: pointer; color: var(--atrament-cichy); padding: .5rem 0; }
.wyciag-opcje .haslo-pdf label { margin: 0; } .wyciag-opcje .haslo-pdf input { margin-top: .3rem; }
.wyciag-opcje button.glowny { width: auto; padding: .7rem 1.4rem; margin: 0; }
:root[data-motyw="ciemny"] .strefa { background: #1e2129; } :root[data-motyw="ciemny"] .strefa:hover, :root[data-motyw="ciemny"] .strefa.nad { background: #262a35; }
.postep { display: block; height: .35rem; background: var(--linia); border-radius: 999px; margin: .3rem auto .15rem; width: 5rem; overflow: hidden; }
.postep span { display: block; height: 100%; background: var(--zloto-ciemne); border-radius: 999px; }
.formularz-wyj label.wyroznione { padding: .4rem; border: 1px dashed var(--zloto); border-radius: 8px; }
.nawigacja .ikona { display: inline-flex; align-items: center; justify-content: center; }
.nawigacja .ikona .ik { width: 1.2em; height: 1.2em; }
.logowanie-zalety span .ik { width: 1em; height: 1em; }

/* Klikalne wiersze i listy — podswietlenie, kursor, bez podkreslen */
tr.klikalny, li[data-url] { cursor: pointer; }
.tabela tbody tr.klikalny:hover, .tabela tr.klikalny:hover { background: var(--akcent-tlo); }
tr.klikalny:focus-visible { outline: 2px solid var(--zloto); outline-offset: -2px; }
.cichy-link, .cichy-link:visited { color: var(--atrament); text-decoration: none; font-weight: 600; }
tr.klikalny:hover .cichy-link { color: var(--zloto-ciemne); }
.podatki a { border-radius: 8px; margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; transition: background .15s; }
.podatki a:hover { background: var(--akcent-tlo); } .podatki a:hover .nazwa { color: var(--zloto-ciemne); }
.lista-faktur a:hover, .lista-zgloszen a:hover, .lista-plikow a:hover { background: var(--akcent-tlo); }
:root[data-motyw="ciemny"] .podatki a:hover, :root[data-motyw="ciemny"] .tabela tr.klikalny:hover { background: #23262f; }

/* Szerokie ekrany: caly uklad (nawigacja + tresc) wysrodkowany, zamiast przyklejony do lewej */
@media (min-width: 110rem) {
  body.zalogowany { grid-template-columns: 1fr 14rem minmax(0, 96rem) 1fr; grid-template-areas: "naglowek naglowek naglowek naglowek" ". nawigacja tresc ." "stopka stopka stopka stopka"; }
  body.zalogowany .tresc { max-width: none; padding-left: 2.5rem; padding-right: 2.5rem; }
  body.zalogowany .nawigacja { border-left: 1px solid var(--linia); }
  body.zalogowany .naglowek-wnetrze { max-width: 110rem; margin: 0 auto; } body.zalogowany .stopka { text-align: center; }
}
@media (min-width: 60rem) and (max-width: 110rem) { body.zalogowany .tresc { max-width: none; padding-right: 2rem; } }

/* Pasek uwagi (operacje do wyjasnienia) */
.pasek-uwagi { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; margin-bottom: 1rem; border-radius: 12px; background: #fdf3df; border: 1px solid #f0dcb0; color: var(--atrament); text-decoration: none; transition: background .15s, transform .15s; }
.pasek-uwagi:hover { background: #fbeccb; transform: translateY(-1px); }
.pasek-uwagi .pu-ikona { color: #9a6b0f; flex: 0 0 auto; } .pasek-uwagi .pu-ikona .ik { width: 1.4rem; height: 1.4rem; }
.pasek-uwagi .pu-tresc { flex: 1 1 auto; display: flex; flex-direction: column; gap: .1rem; }
.pasek-uwagi .pu-akcja { font-weight: 600; color: #9a6b0f; white-space: nowrap; }

/* Tabela wyciagow */
.tabela-wyciagi .kol-plik { font-weight: 600; display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tabela-wyciagi .kol-strzalka { width: 1.5rem; text-align: right; }
.tabela-wyciagi .strzalka-wiersza { color: var(--linia); font-size: 1.4rem; line-height: 1; transition: color .15s, transform .15s; display: inline-block; }
.tabela-wyciagi tr.klikalny:hover .strzalka-wiersza { color: var(--zloto-ciemne); transform: translateX(2px); }
.tabela-wyciagi tr.nieklikalny { cursor: default; }
.tabela-wyciagi .postep { width: 6rem; }
.tabela-wyciagi td .plakietka { margin-top: .25rem; }
.ik-duza { width: 100%; height: 100%; }

/* Rachunki */
.rachunki-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.rachunki-lista li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem .8rem; border: 1px solid var(--linia); border-radius: 10px; background: var(--powierzchnia); font-size: .9375rem; }
.rachunki-lista .r-ikona { color: var(--zloto-ciemne); display: inline-flex; } .rachunki-lista .r-ikona .ik { width: 1.1rem; height: 1.1rem; }
.rachunki-lista .r-nazwa { flex: 1 1 12rem; font-weight: 600; }
.rachunki-lista .r-numer { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; background: transparent; color: var(--atrament-cichy); }

/* Strona wyciagu */
.okruszki { font-size: .875rem; color: var(--atrament-cichy); margin: 0 0 .5rem; } .okruszki a { color: inherit; }
.nw-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; }
.nw-siatka > div { display: flex; flex-direction: column; gap: .2rem; }
.nw-etykieta { font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--atrament-cichy); }
.nw-wartosc { font-size: 1.05rem; font-weight: 600; } .nw-wartosc.kwota { font-variant-numeric: tabular-nums; }
.nw-siatka .plakietka { align-self: flex-start; }
.postep.szeroki { width: 100%; margin: .3rem 0 0; }
.nw-plik { margin: 1rem 0 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.operacje { display: grid; gap: .75rem; }
.operacja { border: 1px solid var(--linia); border-radius: 12px; background: var(--powierzchnia); padding: .9rem 1.1rem; transition: box-shadow .15s; }
.operacja.otwarta { border-left: 4px solid var(--zloto); }
.operacja.odrzucona { border-left-color: var(--blad); }
.operacja.zamknieta { opacity: .75; }
.operacja:hover { box-shadow: 0 6px 20px rgba(28,35,51,.08); }
.op-naglowek { display: grid; grid-template-columns: auto auto 1fr auto; gap: .5rem 1rem; align-items: center; }
.op-data { color: var(--atrament-cichy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-kwota { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem; } .op-kwota.minus { color: var(--blad); } .op-kwota .waluta { font-size: .8rem; color: var(--atrament-cichy); font-weight: 400; }
.op-opis { display: flex; flex-direction: column; min-width: 0; } .op-opis strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-formularz { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--linia); }
.op-pola { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 2fr) minmax(14rem, 1.5fr); gap: .75rem 1rem; }
.op-pola label { display: flex; flex-direction: column; gap: .3rem; margin: 0; font-size: .8125rem; color: var(--atrament-cichy); font-weight: 600; }
.op-pola label > span { line-height: 1.3; } .op-pola input, .op-pola select { margin: 0; }
.op-pola input[type=file] { padding: .35rem; border: 1px dashed var(--linia); border-radius: 8px; background: var(--papier); font-size: .8125rem; }
.op-stopka { display: flex; justify-content: flex-end; margin-top: .75rem; } .op-stopka .glowny { width: auto; padding: .6rem 1.3rem; margin: 0; }
.op-odpowiedz { margin: .5rem 0 0; }
@media (max-width: 50rem) { .op-naglowek { grid-template-columns: auto 1fr; } .op-opis { grid-column: 1 / -1; } .op-pola { grid-template-columns: 1fr; } }
:root[data-motyw="ciemny"] .pasek-uwagi { background: #3a2f10; border-color: #5a4a1a; } :root[data-motyw="ciemny"] .pasek-uwagi:hover { background: #46391a; }

/* Licznik sesji w naglowku */
.licznik-sesji { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); color: #cfc9b8; font: inherit; font-size: .8125rem; font-variant-numeric: tabular-nums; cursor: pointer; margin-right: .5rem; transition: background .2s, color .2s, border-color .2s; }
.licznik-sesji .ik { width: 1rem; height: 1rem; }
.licznik-sesji:hover { background: rgba(255,255,255,.12); color: #fff; }
.licznik-sesji.malo { color: var(--zloto); border-color: rgba(201,168,76,.5); }
.licznik-sesji.krytycznie { color: #fff; background: #8a2f2a; border-color: #b0453f; animation: pulsuj 1s ease-in-out infinite; }
@keyframes pulsuj { 0%, 100% { box-shadow: 0 0 0 0 rgba(176,69,63,.5); } 50% { box-shadow: 0 0 0 6px rgba(176,69,63,0); } }
@media (max-width: 45rem) { .licznik-sesji span { display: none; } .licznik-sesji.malo span, .licznik-sesji.krytycznie span { display: inline; } }

.tabela-wyciagi { table-layout: auto; }
.tabela-wyciagi .kol-numer { max-width: none; }
.tabela-wyciagi .kol-plik { max-width: 16rem; display: block; }
.tabela-wyciagi td.r { white-space: normal; min-width: 11rem; }
.tabela-wyciagi td.r .kwota { white-space: nowrap; }
.tabela-wyciagi td { vertical-align: middle; }
@media (max-width: 62rem) { .tabela-wyciagi .kol-plik { max-width: 10rem; } .tabela-wyciagi td.r { min-width: 8rem; } }
/* Pasek postepu kolejki wgrywania */
.postep-wgrywania { margin-top: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--powierzchnia); }
.postep-wgrywania .pw-tekst { font-weight: 600; margin-bottom: .5rem; }
.postep-wgrywania .pw-pasek { height: .5rem; background: var(--linia); border-radius: 999px; overflow: hidden; }
.postep-wgrywania .pw-pasek span { display: block; height: 100%; width: 0; background: var(--zloto-ciemne); transition: width .3s; }
.postep-wgrywania .pw-drobne { margin-top: .4rem; }

/* KSeF — pasek pracy seryjnej: jasna karta ze zlota krawedzia (zamiast czarnego bloku) */
.pasek-zbiorczy { position: sticky; top: .5rem; z-index: 9; display: flex; gap: .75rem 1.25rem; align-items: end; flex-wrap: wrap; background: var(--powierzchnia); color: var(--atrament); padding: .8rem 1.1rem .7rem; border-radius: 12px; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(28,35,51,.08); border: 1px solid var(--linia); border-left: 4px solid var(--zloto); }
.pasek-zbiorczy .zb-tytul { display: flex; align-items: center; gap: .6rem; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--atrament-cichy); line-height: 1.5; }
.pasek-zbiorczy .zb-tytul strong { font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--atrament); font-variant-numeric: tabular-nums; }
.pasek-zbiorczy .zb-ikona { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--akcent-tlo); color: var(--zloto-ciemne); display: inline-flex; align-items: center; justify-content: center; } .pasek-zbiorczy .zb-ikona .ik { width: 1.1rem; height: 1.1rem; }
.pasek-zbiorczy label { color: var(--atrament-cichy); font-size: .8125rem; margin: 0; font-weight: 600; }
.pasek-zbiorczy select, .pasek-zbiorczy input { margin-top: .25rem; width: 100%; border-radius: 8px; }
.pasek-zbiorczy .zb-przycisk { width: auto; background: var(--ciemny); color: #fff; border-color: var(--ciemny); padding: .65rem 1.2rem; }
.pasek-zbiorczy .zb-przycisk:disabled { background: var(--papier); color: var(--atrament-cichy); border-color: var(--linia); opacity: 1; cursor: not-allowed; box-shadow: none; }
.pasek-zbiorczy .zb-podpowiedz { color: var(--atrament-cichy); }
.pasek-zbiorczy:not(.pusty) .zb-podpowiedz { color: var(--zloto-ciemne); }
.pasek-zbiorczy:not(.pusty) { border-left-color: var(--zloto-ciemne); }
.pasek-zbiorczy.pusty select, .pasek-zbiorczy.pusty input[type=text] { opacity: 1; }
:root[data-motyw="ciemny"] .pasek-zbiorczy .zb-przycisk { background: var(--zloto); color: #1c1c1c; border-color: var(--zloto); }
/* przycisk 'Nie ksieguj' w wierszu: jedna linia, cichy, wyrazny przy najechaniu */
.tabela-ksef .kol-akcja { width: 8.5rem; }
.tabela-ksef .decyzja-szybka summary { white-space: nowrap; padding: .35rem .7rem; border-radius: 999px; font-weight: 600; color: var(--atrament-cichy); background: transparent; border: 1px solid var(--linia); transition: background .15s, color .15s, border-color .15s; }
.tabela-ksef tr:hover .decyzja-szybka summary { border-color: var(--zloto); color: var(--atrament); }
.tabela-ksef .decyzja-szybka summary:hover { background: var(--ciemny); color: #fff; border-color: var(--ciemny); }
.tabela-ksef .decyzja-szybka summary::before { content: "×"; margin-right: .35rem; font-weight: 700; }
.kropka-nowa { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--zloto-ciemne); margin-right: .45rem; vertical-align: middle; box-shadow: 0 0 0 3px var(--akcent-tlo); }
.pole-blok { display: block; margin: .9rem 0 .5rem; } .pole-blok input { display: block; width: 100%; margin-top: .35rem; }
.filtry .pole-przelacznik { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; align-self: end; padding-bottom: .5rem; }
.filtry .pole-przelacznik input { width: auto; margin: 0; }

/* Formularz faktury — uklad dwukolumnowy z panelem podsumowania */
.fak-tytul p { margin-top: .25rem; }
.fak-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; align-items: start; }
.fak-glowna { display: grid; gap: 1.25rem; min-width: 0; }
.fak-bok { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.karta { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 14px; padding: 1.1rem 1.25rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(28,35,51,.05); }
.karta-naglowek { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; }
.karta-naglowek h2 { margin: 0; font-size: 1.05rem; }
.karta-naglowek .karta-akcja { margin-left: auto; width: auto; max-width: 22rem; font-size: .875rem; padding: .4rem .6rem; }
.karta-numer { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ciemny); color: var(--zloto); font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fak-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; }
.fak-siatka .szeroka { grid-column: 1 / -1; }
.fak-pole { display: flex; flex-direction: column; gap: .35rem; margin: 0; font-weight: 400; }
.fak-pole > span:first-child { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--atrament-cichy); }
.fak-pole > span:first-child em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: .3rem; }
.fak-pole input, .fak-pole select { margin: 0; border-radius: 10px; }
.fak-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }
.karta-bok .fak-pole { margin-bottom: .9rem; } .karta-bok .fak-2 .fak-pole { margin-bottom: 0; }
.pole-z-przyciskiem { display: flex; gap: .5rem; } .pole-z-przyciskiem input { flex: 1 1 auto; } .pole-z-przyciskiem button { width: auto; white-space: nowrap; padding: .55rem .8rem; font-size: .8125rem; }
.tabela-przewijana.bez-ramki { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
.tabela-pozycje { width: 100%; border-collapse: collapse; }
.tabela-pozycje th { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--atrament-cichy); text-align: left; padding: 0 .5rem .5rem; border-bottom: 1px solid var(--linia); }
.tabela-pozycje th.r { text-align: right; }
.tabela-pozycje td { padding: .45rem .5rem; vertical-align: middle; border-bottom: 1px solid var(--linia); }
.tabela-pozycje tbody tr:hover { background: var(--akcent-tlo); }
.tabela-pozycje input, .tabela-pozycje select { margin: 0; padding: .5rem .6rem; border-radius: 8px; font-size: .9375rem; }
.tabela-pozycje input.r { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-pozycje .kol-lp { width: 2rem; color: var(--atrament-cichy); font-variant-numeric: tabular-nums; }
.tabela-pozycje .kol-il { width: 5.5rem; } .tabela-pozycje .kol-jm { width: 5rem; } .tabela-pozycje .kol-cena { width: 8rem; } .tabela-pozycje .kol-vat { width: 6rem; } .tabela-pozycje .kol-kw { width: 7rem; } .tabela-pozycje .kol-x { width: 2.2rem; text-align: center; }
.tabela-pozycje .kwota { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-pozycje .b { font-weight: 600; }
.tabela-pozycje .usun-poz { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--atrament-cichy); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; margin: 0; }
.tabela-pozycje tr:hover .usun-poz { border-color: var(--linia); } .tabela-pozycje .usun-poz:hover { background: var(--blad-tlo); color: var(--blad); border-color: var(--blad); }
.fak-pod-tabela { display: flex; align-items: center; gap: .9rem; margin: .8rem 0 1.1rem; } .fak-pod-tabela .drugi { width: auto; margin: 0; }
.karta-suma { background: var(--ciemny); color: #fff; border-color: var(--ciemny); }
.suma-wiersz { display: flex; justify-content: space-between; align-items: baseline; padding: .35rem 0; color: #cfc9b8; font-variant-numeric: tabular-nums; }
.suma-wiersz strong { color: #fff; font-weight: 600; }
.suma-brutto { border-top: 1px solid rgba(255,255,255,.15); margin-top: .35rem; padding-top: .7rem; font-size: 1.05rem; }
.suma-brutto strong { font-size: 1.5rem; color: var(--zloto); } .suma-brutto .waluta { font-size: .9rem; color: #cfc9b8; }
.suma-przyciski { display: grid; gap: .5rem; margin-top: 1rem; }
.suma-przyciski .glowny { background: var(--zloto); color: #1c1c1c; border-color: var(--zloto); margin: 0; }
.suma-przyciski .glowny:disabled { opacity: .45; }
.suma-przyciski .drugi { margin: 0; background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.karta-suma .cicho { color: #9a9585; margin: .8rem 0 0; }
.rachunki-wybor { display: grid; gap: .5rem; }
.rachunek-opcja { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1px solid var(--linia); border-radius: 10px; cursor: pointer; margin: 0; font-weight: 400; transition: border-color .15s, background .15s; }
.rachunek-opcja:hover { border-color: var(--zloto); } .rachunek-opcja.wybrany { border-color: var(--zloto-ciemne); background: var(--akcent-tlo); }
.rachunek-opcja input { width: auto; margin: 0; accent-color: var(--zloto-ciemne); }
.rachunek-opcja .r-ikona { color: var(--zloto-ciemne); display: inline-flex; } .rachunek-opcja .r-ikona .ik { width: 1.1rem; height: 1.1rem; }
.rachunki-wybor .drugi { width: auto; justify-self: start; margin-top: .3rem; }
@media (max-width: 62rem) { .fak-uklad { grid-template-columns: 1fr; } .fak-bok { position: static; } .fak-siatka { grid-template-columns: 1fr; } .karta-naglowek .karta-akcja { max-width: 100%; } }
:root[data-motyw="ciemny"] .karta { background: #1e2129; } :root[data-motyw="ciemny"] .karta-suma { background: #0f1116; }
.rachunek-nowy { border: 1px dashed var(--zloto); border-radius: 10px; padding: .75rem; margin-bottom: .9rem; display: grid; gap: .75rem; }
.rachunek-nowy .fak-2 { margin-bottom: 0; } .rachunek-nowy p { margin: 0; }
.pusta-siatka:empty { display: none; }
.dopisz-rachunek { margin-top: 1rem; } .dopisz-rachunek summary { cursor: pointer; font-weight: 600; }

/* Watek zgloszenia — wspolny wyglad z Pryzmatem */
.sprawa-naglowek { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1.5rem; align-items: start; margin-bottom: 1rem; }
.sn-firma { font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--atrament-cichy); font-weight: 700; }
.sn-tytul { margin: .15rem 0 .3rem; font-size: 1.35rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sn-tytul .plakietka { font-size: .75rem; }
.plakietka.stan-nowa { background: var(--blad-tlo); color: var(--blad); } .plakietka.stan-w_toku { background: #fdf3df; color: #7a5a12; } .plakietka.stan-zamknieta { background: #eceae4; color: #6a6a63; }
.sn-meta a { color: inherit; }
.sn-opiekun { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--papier); }
.sn-opiekun > span:last-child { display: flex; flex-direction: column; }
.sn-przypisz { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: center; } .sn-przypisz select { width: auto; min-width: 14rem; margin: 0; } .sn-przypisz .drugi { width: auto; margin: 0; }
.inicjal { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.inicjal.zloty { background: var(--ciemny); color: var(--zloto); } .inicjal.niebieski { background: #2f4f7f; color: #fff; } .inicjal.pusty { background: var(--linia); color: var(--atrament-cichy); }
.rozmowa { display: flex; flex-direction: column; gap: .9rem; padding: .25rem 0 1rem; }
.wpis-dymek { display: flex; gap: .6rem; align-items: flex-end; max-width: 80%; }
.wpis-dymek.moj { align-self: flex-end; flex-direction: row-reverse; }
.wpis-dymek.strona-biuro:not(.moj), .wpis-dymek.strona-klient.moj { }
.dymek { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 14px; padding: .7rem .9rem .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); min-width: 12rem; }
.wpis-dymek.strona-biuro .dymek { background: #fbf7ec; border-color: #eadfbf; }
.wpis-dymek.moj .dymek { border-bottom-right-radius: 4px; } .wpis-dymek:not(.moj) .dymek { border-bottom-left-radius: 4px; }
.dymek-tresc { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.dymek-stopka { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; flex-wrap: wrap; }
.potwierdzenie { color: var(--atrament-cichy); } .potwierdzenie.odczytane { color: #2c6446; }
.chipy { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--papier); border: 1px solid var(--linia); font-size: .8125rem; text-decoration: none; color: var(--atrament); }
.chip .ik { width: .9rem; height: .9rem; } .chip.pusty { border-color: var(--blad); color: var(--blad); }
.notka-systemowa { align-self: center; display: flex; gap: .6rem; align-items: baseline; font-size: .8125rem; color: var(--atrament-cichy); background: var(--papier); border-radius: 999px; padding: .3rem .9rem; }
.reakcje { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .4rem; }
.reakcja-form { display: inline; margin: 0; }
.pigulka-reakcji, .paleta-reakcji button { border: 1px solid var(--linia); background: var(--powierzchnia); border-radius: 999px; padding: .15rem .55rem; font-size: .875rem; cursor: pointer; margin: 0; width: auto; line-height: 1.4; color: var(--atrament); }
.pigulka-reakcji.moja { border-color: var(--zloto-ciemne); background: var(--akcent-tlo); }
.pigulka-reakcji:hover, .paleta-reakcji button:hover { border-color: var(--zloto); }
.dodaj-reakcje { position: relative; } .dodaj-reakcje summary { list-style: none; cursor: pointer; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px dashed var(--linia); display: inline-flex; align-items: center; justify-content: center; color: var(--atrament-cichy); font-size: .9rem; }
.dodaj-reakcje summary::-webkit-details-marker { display: none; } .dodaj-reakcje summary:hover { border-color: var(--zloto); color: var(--atrament); }
.paleta-reakcji { position: absolute; z-index: 5; display: flex; gap: .25rem; padding: .35rem; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.15); margin-top: .3rem; }
.paleta-reakcji button { border: 0; padding: .2rem .35rem; font-size: 1.05rem; }
.odpowiedz h2 { margin-top: 0; }
.pole-tresc { position: relative; } .pole-tresc textarea { padding-right: 3rem; border-radius: 12px; margin: 0; }
.pole-tresc textarea.blad-pola { border-color: var(--blad); box-shadow: 0 0 0 3px var(--blad-tlo); }
.emoji-picker { position: absolute; right: .5rem; top: .5rem; } .emoji-picker summary { list-style: none; cursor: pointer; font-size: 1.2rem; opacity: .7; } .emoji-picker summary::-webkit-details-marker { display: none; } .emoji-picker summary:hover { opacity: 1; }
.paleta-emoji { position: absolute; right: 0; z-index: 6; display: grid; grid-template-columns: repeat(8, 2rem); gap: .2rem; padding: .4rem; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); margin-top: .3rem; }
.paleta-emoji button { border: 0; background: transparent; font-size: 1.15rem; padding: .2rem; border-radius: 6px; cursor: pointer; width: auto; margin: 0; } .paleta-emoji button:hover { background: var(--akcent-tlo); }
.odpowiedz-pasek { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; } .odpowiedz-pasek .odstep { flex: 1 1 auto; }
.odpowiedz-pasek .glowny, .odpowiedz-pasek .drugi { width: auto; margin: 0; padding: .6rem 1.2rem; }
.odpowiedz-pasek .dolacz { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; margin: 0; } .odpowiedz-pasek .dolacz input { display: none; } .odpowiedz-pasek .dolacz .ik { width: 1em; height: 1em; }
@media (max-width: 50rem) { .wpis-dymek { max-width: 96%; } .sprawa-naglowek { grid-template-columns: 1fr; } }
:root[data-motyw="ciemny"] .wpis-dymek.strona-biuro .dymek { background: #2a2618; border-color: #4a4128; }
:root[data-motyw="ciemny"] .dymek, :root[data-motyw="ciemny"] .paleta-reakcji, :root[data-motyw="ciemny"] .paleta-emoji { background: #1e2129; }

/* Zywy watek: animacja nowych wpisow, 'pisze...', 'odczytali' */
.rozmowa > .nowy { animation: wjazd .35s ease-out; }
@keyframes wjazd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pisze-dymek { display: flex; gap: .6rem; align-items: flex-end; max-width: 60%; margin: -.3rem 0 .6rem; }
.pisze-dymek.strona-biuro { align-self: flex-end; flex-direction: row-reverse; margin-left: auto; }
.pisze-dymek .dymek { color: var(--atrament-cichy); font-size: .875rem; display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.kropki { display: inline-flex; gap: .2rem; margin-left: .15rem; } .kropki i { width: .35rem; height: .35rem; border-radius: 50%; background: var(--atrament-cichy); animation: kropka 1.2s infinite ease-in-out; }
.kropki i:nth-child(2) { animation-delay: .2s; } .kropki i:nth-child(3) { animation-delay: .4s; }
@keyframes kropka { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.odczytali { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; margin: 0 0 1rem; }
.inicjal.maly { width: 1.4rem; height: 1.4rem; font-size: .7rem; cursor: default; }
@media (prefers-reduced-motion: reduce) { .rozmowa > .nowy { animation: none; } .kropki i { animation: none; opacity: .6; } }

/* Animacje watku 1:1 z Pryzmatem 5.4.63–5.4.64 */
.rozmowa > .nowy { animation: wjazd .38s cubic-bezier(.2,.8,.2,1); }
.rozmowa > .nowy .dymek { animation: obwodka 1.5s ease-out; }
@keyframes wjazd { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes obwodka { 0%, 70% { box-shadow: inset 0 0 0 2px var(--zloto), 0 1px 2px rgba(0,0,0,.04); } 100% { box-shadow: 0 1px 2px rgba(0,0,0,.04); } }
.dymek { transition: box-shadow .2s ease, transform .2s ease; }
.wpis-dymek:hover .dymek { box-shadow: 0 8px 22px rgba(28,35,51,.12); } /* 1.52.3: bez translateY — przesuniecie o 1px pod kursorem na krawedzi dymka dawalo petle hover/unhover (miganie) */
.potwierdzenie.odczytane { color: #2f6fd6; }
.pisze-dymek { animation: wjazd .25s ease-out; }
.pisze-dymek .dymek { padding: .55rem .8rem; }
.kropki i { width: 6px; height: 6px; animation: kropka 1.2s infinite ease-in-out; } .kropki i:nth-child(2) { animation-delay: .15s; } .kropki i:nth-child(3) { animation-delay: .3s; }
@keyframes kropka { 0%, 100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
.inicjal.maly { width: 18px; height: 18px; font-size: .65rem; }
/* reakcje */
.pigulka-reakcji.moja { background: #fdf3df; border-color: var(--zloto-ciemne); }
.pigulka-reakcji.podskok { animation: podskok .4s cubic-bezier(.2,.9,.3,1.5); }
@keyframes podskok { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.dodaj-reakcje summary { opacity: 0; transition: opacity .15s .25s, border-color .15s, color .15s; border: 1px dashed var(--linia); width: 1.7rem; height: 1.7rem; }
.dodaj-reakcje summary .ik { width: 1rem; height: 1rem; }
.wpis-dymek:hover .dodaj-reakcje summary, .dodaj-reakcje[open] summary, .reakcje:focus-within .dodaj-reakcje summary { opacity: 1; transition-delay: 0s; }
@media (hover: none) { .dodaj-reakcje summary { opacity: 1; } }
.paleta-reakcji { bottom: 100%; margin: 0 0 .35rem; transform-origin: bottom left; animation: paleta .22s cubic-bezier(.2,.9,.3,1.3); }
@keyframes paleta { from { opacity: 0; transform: scale(.6) translateY(6px); } to { opacity: 1; transform: none; } }
.paleta-reakcji button { animation: kaskada .25s ease-out backwards; animation-delay: calc(var(--i, 0) * 25ms); transition: transform .12s ease; }
@keyframes kaskada { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.paleta-reakcji button:hover { transform: scale(1.45) translateY(-4px); }
/* pasek 12 emoji nad przyciskami */
.pasek-emoji { display: flex; flex-wrap: wrap; gap: .15rem; margin: .45rem 0 0; }
.pasek-emoji button { border: 0; background: transparent; font-size: 1.15rem; padding: .15rem .3rem; border-radius: 6px; cursor: pointer; width: auto; margin: 0; transition: transform .12s, background .12s; }
.pasek-emoji button:hover { background: var(--akcent-tlo); transform: scale(1.25); }
.pole-tresc textarea { padding-right: .8rem; }
/* przycisk 'wysylanie' */
#btn-wyslij .wysylanie { display: none; align-items: center; gap: .4rem; } #btn-wyslij .wysylanie .kropki i { background: currentColor; }
#btn-wyslij.w-toku .etykieta { display: none; } #btn-wyslij.w-toku .wysylanie { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .rozmowa > .nowy, .rozmowa > .nowy .dymek, .pisze-dymek, .pigulka-reakcji.podskok, .paleta-reakcji, .paleta-reakcji button { animation: none; } .dymek, .paleta-reakcji button, .pasek-emoji button { transition: none; } .wpis-dymek:hover .dymek { transform: none; } }

/* Atrybut hidden zawsze wygrywa z display:flex/grid w regulach klas (nauczka: pasek seryjny, dymek 'pisze') */
[hidden] { display: none !important; }

/* ===== Nawigacja boczna — nowoczesna, z grupami i animacjami ===== */
@media (min-width: 60rem) {
  body.zalogowany .nawigacja { background: linear-gradient(180deg, #1c1d23 0%, #121317 100%); padding: 1.25rem .85rem 1rem; gap: .1rem; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
  .nav-grupa { display: flex; flex-direction: column; gap: .15rem; padding: .35rem 0 .55rem; }
  .nav-grupa + .nav-grupa { border-top: 1px solid rgba(255,255,255,.06); }
  .nav-etykieta { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: #6f6b5f; padding: .45rem .85rem .35rem; font-weight: 700; }
  body.zalogowany .nawigacja a { position: relative; color: #b9b4a5; padding: .55rem .75rem .55rem .7rem; border-radius: 10px; transition: background .18s ease, color .18s ease, transform .18s ease; }
  body.zalogowany .nawigacja a::before { content: ""; position: absolute; left: -.85rem; top: 22%; height: 56%; width: 3px; border-radius: 0 3px 3px 0; background: var(--zloto); transform: scaleY(0); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
  body.zalogowany .nawigacja a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
  body.zalogowany .nawigacja a.aktywna { background: linear-gradient(90deg, rgba(201,178,107,.18), rgba(201,178,107,.06)); color: #fff; box-shadow: none; }
  body.zalogowany .nawigacja a.aktywna::before { transform: scaleY(1); }
  body.zalogowany .nawigacja .ikona { width: 2rem; height: 2rem; border-radius: 8px; background: rgba(255,255,255,.04); color: #d6c48a; transition: background .18s ease, color .18s ease, transform .18s ease; }
  body.zalogowany .nawigacja a:hover .ikona { transform: scale(1.06); color: var(--zloto); }
  body.zalogowany .nawigacja a.aktywna .ikona { background: var(--zloto); color: #15171c; }
  body.zalogowany .nawigacja .nav-tekst { font-size: .9rem; letter-spacing: .01em; }
  body.zalogowany .nawigacja .licznik-nav { margin-left: auto; }
  .nav-stopka { margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
  body.zalogowany .nawigacja .nav-uzytkownik { gap: .65rem; padding: .5rem .6rem; }
  body.zalogowany .nawigacja .nav-uzytkownik .inicjal { width: 2rem; height: 2rem; font-size: .85rem; }
  .nav-uzytkownik .nav-tekst { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .nav-uzytkownik .nu-imie { color: #fff; font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-uzytkownik .nu-rola { color: #7f7a6d; font-size: .7rem; }
  body.zalogowany .nawigacja { display: flex; flex-direction: column; min-height: 100%; }
  body.zalogowany { grid-template-columns: 15.5rem 1fr; }
  @media (min-width: 110rem) { body.zalogowany { grid-template-columns: 1fr 15.5rem minmax(0, 96rem) 1fr; } }
}
@media (max-width: 59.99rem) {
  .nav-grupa { display: contents; } .nav-etykieta, .nav-stopka { display: none; }
  body.zalogowany .nawigacja a.aktywna .ikona { color: var(--zloto); }
  body.zalogowany .nawigacja .nav-tekst { font-size: .7rem; }
}

/* ===== Przejscia ekranow (JS: przejscia.js ustawia --d i klase .ujawniony przy wejsciu w ekran) ===== */
:root { --ruch-czas: 560ms; --ruch-krzywa: cubic-bezier(.22,.61,.36,1); --ruch-krok: 70ms; }
html.js.ladowanie:not(.bez-animacji) body.zalogowany .tresc > *:not([data-bez-ujaw]) { opacity: 0; animation: ujaw-awaryjne 0s linear 3s forwards; }   /* tylko strony z przejscia.js (zalogowany) */   /* do czasu oznaczenia przez przejscia.js */
html.js:not(.bez-animacji) [data-ujaw] { opacity: 0; transform: translateY(14px); animation: ujaw-awaryjne 0s linear 3s forwards; }
@keyframes ujaw-awaryjne { to { opacity: 1; transform: none; } }   /* bezpiecznik: po 3 s tresc widoczna nawet gdy JS padl */
html.js:not(.bez-animacji) [data-ujaw].ujawniony { opacity: 1; transform: none; transition: opacity var(--ruch-czas) var(--ruch-krzywa), transform var(--ruch-czas) var(--ruch-krzywa); transition-delay: var(--d, 0ms); }
html.js:not(.bez-animacji) [data-ujaw].ujawniony.bez-opoznienia { transition-delay: 0ms; }
html.ekran-wychodzi .tresc { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.tresc { transition: opacity .2s ease; }
.kafel, .sekcja, .karta { transition: transform .22s var(--ruch-krzywa), box-shadow .22s var(--ruch-krzywa), opacity var(--ruch-czas) var(--ruch-krzywa); }
a.kafel:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(28,35,51,.12); }
button, .przycisk { transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease; }
button:active, .przycisk:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { html [data-ujaw] { opacity: 1 !important; transform: none !important; transition: none !important; } html.ekran-wychodzi .tresc { opacity: 1; transform: none; } }
.tabela-ksef tfoot .suma-waluta { white-space: nowrap; } .tabela-ksef tfoot .suma-waluta .waluta { color: var(--atrament-cichy); font-size: .8rem; }

/* Cytowanie (odpowiedz na wiadomosc) i ZIP */
.odpowiedz-na { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid transparent; background: transparent; color: var(--atrament-cichy); font-size: .8125rem; padding: .15rem .5rem; border-radius: 999px; cursor: pointer; margin: 0; width: auto; opacity: 0; transition: opacity .15s .25s, border-color .15s, color .15s; }
.odpowiedz-na .ik { width: .9rem; height: .9rem; }
.wpis-dymek:hover .odpowiedz-na, .reakcje:focus-within .odpowiedz-na { opacity: 1; transition-delay: 0s; } @media (hover: none) { .odpowiedz-na { opacity: 1; } }
.odpowiedz-na:hover { border-color: var(--zloto); color: var(--atrament); }
.cytat { display: flex; flex-direction: column; gap: .1rem; padding: .35rem .6rem; margin: 0 0 .5rem; border-left: 3px solid var(--zloto); background: rgba(0,0,0,.04); border-radius: 6px; text-decoration: none; color: var(--atrament); font-size: .8125rem; cursor: pointer; transition: background .15s; }
.cytat.strona-klient { border-left-color: #2f4f7f; } .cytat:hover { background: rgba(0,0,0,.07); }
.cytat-autor { font-weight: 600; } .cytat-autor .ik { width: .8rem; height: .8rem; } .cytat-tresc { color: var(--atrament-cichy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34rem; }
.wpis-dymek.cytowany .dymek { box-shadow: inset 0 0 0 2px var(--zloto); }
.wpis-dymek.zg-blysk .dymek { animation: blysk 1.2s ease-out; }
.wpis-dymek.strona-klient.zg-blysk .dymek { animation-name: blysk-nieb; }
@keyframes blysk { 0% { box-shadow: 0 0 0 0 rgba(201,178,107,.9); } 50% { box-shadow: 0 0 0 6px rgba(201,178,107,.35); } 100% { box-shadow: 0 1px 2px rgba(0,0,0,.04); } }
@keyframes blysk-nieb { 0% { box-shadow: 0 0 0 0 rgba(47,79,127,.9); } 50% { box-shadow: 0 0 0 6px rgba(47,79,127,.3); } 100% { box-shadow: 0 1px 2px rgba(0,0,0,.04); } }
.pasek-cytatu { display: flex; align-items: stretch; gap: .6rem; margin-bottom: .5rem; padding: .45rem .6rem .45rem 0; background: var(--papier); border: 1px solid var(--linia); border-radius: 10px; animation: wjazd .22s ease-out; }
.pasek-cytatu .pc-krawedz { width: 4px; border-radius: 10px 0 0 10px; background: #2f4f7f; flex: 0 0 auto; } .pasek-cytatu.strona-biuro .pc-krawedz { background: var(--zloto); }
.pasek-cytatu .pc-tresc { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: .8125rem; }
.pasek-cytatu .pc-skrot { color: var(--atrament-cichy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasek-cytatu .pc-anuluj { border: 0; background: transparent; font-size: 1.2rem; line-height: 1; color: var(--atrament-cichy); cursor: pointer; width: auto; margin: 0; padding: 0 .3rem; } .pasek-cytatu .pc-anuluj:hover { color: var(--blad); }
.pobierz-wszystkie { display: inline-flex; align-items: center; gap: .4rem; margin: .5rem 0 .2rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--zloto); color: var(--atrament); background: var(--powierzchnia); font-size: .8125rem; font-weight: 600; text-decoration: none; transition: background .15s; }
.pobierz-wszystkie .ik { width: .95rem; height: .95rem; color: var(--zloto-ciemne); } .pobierz-wszystkie:hover { background: var(--akcent-tlo); }
.pobierz-wszystkie .pw-pakowanie { display: none; align-items: center; gap: .3rem; } .pobierz-wszystkie .pw-pakowanie .kropki i { background: currentColor; }
.pobierz-wszystkie.pakuje .pw-etykieta { display: none; } .pobierz-wszystkie.pakuje .pw-pakowanie { display: inline-flex; }
.zip-link { color: inherit; } .zip-link .ik { width: .85rem; height: .85rem; }
@media (prefers-reduced-motion: reduce) { .pasek-cytatu, .wpis-dymek.zg-blysk .dymek { animation: none; } }
:root[data-motyw="ciemny"] .cytat { background: rgba(255,255,255,.06); } :root[data-motyw="ciemny"] .cytat:hover { background: rgba(255,255,255,.1); }

/* Pole odpowiedzi w watku — pelna szerokosc, jeden uporzadkowany pasek pod polem */
.odpowiedz .odpowiedz-form { max-width: none; gap: .4rem; }
.odpowiedz .pole-tresc textarea { width: 100%; min-height: 6.5rem; resize: vertical; font-size: 1rem; line-height: 1.5; }
.odpowiedz .odpowiedz-pasek { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--linia); }
.odpowiedz .pasek-emoji { margin: 0; }
.odpowiedz .odpowiedz-pasek .pasek-emoji { flex: 1 1 auto; order: 1; }
.odpowiedz .odpowiedz-pasek .dolacz { order: 0; }
.odpowiedz .odpowiedz-pasek .odstep { display: none; }
.odpowiedz .odpowiedz-pasek .drugi, .odpowiedz .odpowiedz-pasek .glowny { order: 2; }
@media (max-width: 50rem) { .odpowiedz .odpowiedz-pasek .pasek-emoji { flex-basis: 100%; order: 3; } }

/* ===== Godziny pracy zespolu (zgloszenia, klient) — zywy wskaznik, godziny.js ===== */
.godziny-zespolu { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; padding: .45rem .85rem .45rem .7rem; border: 1px solid var(--linia); border-radius: 999px; background: var(--powierzchnia); font-size: .9rem; line-height: 1.3; max-width: 100%; transition: border-color .4s var(--ruch-krzywa), background-color .4s var(--ruch-krzywa); }
.godziny-zespolu .gz-tekst { transition: opacity .18s ease; }
.godziny-zespolu.gz-zmiana .gz-tekst { opacity: 0; }
.godziny-zespolu .gz-szczegol { color: var(--atrament-cichy); }
.gz-kropka { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--zloto-ciemne); position: relative; transition: background-color .4s var(--ruch-krzywa); }
.godziny-zespolu.pracuje .gz-kropka { background: #3b8b5a; }
.godziny-zespolu.pracuje .gz-kropka::after { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; border: 2px solid #3b8b5a; opacity: 0; animation: gz-puls 2.4s var(--ruch-krzywa) infinite; }
.godziny-zespolu.konczy .gz-kropka { background: #3b8b5a; }
.godziny-zespolu.konczy .gz-kropka::after { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; border: 2px solid var(--zloto-ciemne); opacity: 0; animation: gz-puls 1.6s var(--ruch-krzywa) infinite; }
.godziny-zespolu.poza { border-color: var(--zloto); background: var(--akcent-tlo); }
@keyframes gz-puls { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .godziny-zespolu .gz-kropka::after { animation: none; } }
/* Ustawienia -> Godziny pracy */
.dni-tygodnia { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.dni-tygodnia .dzien { position: relative; margin: 0; }
.dni-tygodnia .dzien input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dni-tygodnia .dzien span { display: inline-block; min-width: 3rem; text-align: center; padding: .4rem .6rem; border: 1px solid var(--linia); border-radius: 999px; background: var(--powierzchnia); transition: background-color .25s, border-color .25s, color .25s; }
.dni-tygodnia .dzien input:checked + span { background: var(--akcent); color: #fff; border-color: var(--akcent); }
.dni-tygodnia .dzien input:focus-visible + span { outline: 2px solid var(--zloto); outline-offset: 2px; }

/* ===== KSeF: znacznik "zaplacona" — prywatna notatka klienta (ksef.js) ===== */
.tabela-ksef .kol-zaplata { white-space: nowrap; width: 1%; }
button.zaplata { display: inline-flex; align-items: center; gap: .45rem; margin: 0; width: auto; padding: .25rem .6rem .25rem .3rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--atrament-cichy); cursor: pointer; font: inherit; font-size: .85rem; line-height: 1.2; transition: background-color .25s var(--ruch-krzywa), border-color .25s var(--ruch-krzywa), color .25s var(--ruch-krzywa); }
button.zaplata:disabled { cursor: default; }
button.zaplata .zp-znak { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid var(--linia); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: var(--powierzchnia); transition: background-color .3s var(--ruch-krzywa), border-color .3s var(--ruch-krzywa), color .3s var(--ruch-krzywa), transform .3s var(--ruch-krzywa); }
button.zaplata .zp-znak svg { width: .8rem; height: .8rem; }
button.zaplata:not(:disabled):hover { background: var(--akcent-tlo); border-color: var(--linia); color: var(--atrament); }
button.zaplata:not(:disabled):hover .zp-znak { border-color: var(--zloto-ciemne); }
button.zaplata.jest { color: var(--atrament); }
button.zaplata.jest .zp-znak { background: #3b8b5a; border-color: #3b8b5a; color: #fff; }
button.zaplata .zp-tekst { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
button.zaplata .zp-etykieta { font-weight: 600; }
button.zaplata.jest .zp-etykieta { color: #2f7048; }
button.zaplata .zp-data { font-size: .75rem; color: var(--atrament-cichy); animation: zp-wjazd .35s var(--ruch-krzywa); }
button.zaplata.pop .zp-znak { animation: zp-pop .45s var(--ruch-krzywa); }
button.zaplata.w-toku { opacity: .6; }
button.zaplata.blad .zp-znak { border-color: var(--blad); animation: zp-drz .3s; }
tr.zaplacona > td { background: rgba(59,139,90,.07); transition: background-color .5s var(--ruch-krzywa); }   /* zaplacona = zielone tlo, NIE przekreslenie (przekreslenie = anulowana) */
tr.zaplacona > td:first-child { box-shadow: inset 3px 0 0 rgba(59,139,90,.55); }
tr.zaplacona:hover > td { background: rgba(59,139,90,.11); }
tr.zaplacona .kol-brutto .kwota { color: var(--atrament); }
@keyframes zp-pop { 0% { transform: scale(.7); } 45% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes zp-wjazd { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes zp-drz { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
:root[data-motyw="ciemny"] button.zaplata.jest .zp-etykieta { color: #7fc79a; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) button.zaplata.jest .zp-etykieta { color: #7fc79a; } }


/* ===== Wiele firm: wybor firmy (firma.html) + przelacznik w nawigacji/naglowku ===== */
body.wybor-firmy .nawigacja, body.wybor-firmy .naglowek-link:not(.link), body.wybor-firmy .dzwonek, body.wybor-firmy .naglowek-firma, body.wybor-firmy .hf-firma-wrap, body.wybor-firmy .hf-firma-stala, body.wybor-firmy .hf-konto-link { display: none; }
body.wybor-firmy .tresc { place-items: start center; padding-top: 3rem; }
.firmy-uklad { width: 100%; max-width: 34rem; color: #e9e4d6; }
.firmy-naglowek { text-align: center; margin-bottom: 1.75rem; animation: wjazd .6s var(--ruch-krzywa) both; }
.firmy-naglowek img { width: min(100%, 220px); height: auto; margin-bottom: 1.25rem; }
.firmy-naglowek h1 { color: #fff; font-size: 1.6rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
.firmy-naglowek p { color: #cfc9b8; margin: 0; }
.firmy-lista { display: grid; gap: .75rem; }
.firma-karta { display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: 1rem; width: 100%; margin: 0; text-align: left; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid rgba(201,178,107,.28); background: linear-gradient(160deg, #1f2026 0%, #16171b 100%); color: #e9e4d6; cursor: pointer; font: inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(14px); animation: wjazd .55s var(--ruch-krzywa) forwards; animation-delay: calc(120ms + var(--i, 0) * 80ms);
  transition: transform .25s var(--ruch-krzywa), border-color .25s var(--ruch-krzywa), box-shadow .25s var(--ruch-krzywa), opacity .3s var(--ruch-krzywa); }
.firma-karta:hover, .firma-karta:focus-visible { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,178,107,.35); outline: none; }
.firma-karta.biezaca { border-color: rgba(201,178,107,.6); }
.fk-inicjal { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(201,178,107,.14); color: var(--zloto); font-weight: 700; font-size: 1.15rem; border: 1px solid rgba(201,178,107,.5); }
.fk-tresc { display: flex; flex-direction: column; min-width: 0; }
.fk-nazwa { color: #fff; font-weight: 600; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-meta { color: #a9a494; font-size: .85rem; margin-top: .15rem; }
.fk-meta strong { color: var(--zloto); font-weight: 600; }
.fk-strzalka { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid rgba(201,178,107,.35); display: grid; place-items: center; color: transparent; transition: background-color .25s, color .25s, border-color .25s; }
.fk-strzalka svg { width: .9rem; height: .9rem; }
.firma-karta:hover .fk-strzalka { border-color: var(--zloto); color: var(--zloto); }
.firmy-lista.wybrano .firma-karta { animation: none; pointer-events: none; opacity: .35; transform: scale(.985); }
.firmy-lista.wybrano .firma-karta.wybrana { opacity: 1; transform: scale(1.02); border-color: var(--zloto); box-shadow: 0 0 0 2px var(--zloto), 0 20px 50px rgba(0,0,0,.5); }
.firmy-lista.wybrano .firma-karta.wybrana .fk-strzalka { background: var(--zloto); border-color: var(--zloto); color: #15171c; animation: zp-pop .45s var(--ruch-krzywa); }
.firmy-stopka { text-align: center; margin-top: 1.5rem; color: #8a8a80; font-size: .9rem; animation: wjazd .6s var(--ruch-krzywa) .5s both; }
.firmy-stopka a, .firmy-stopka .link { color: #cfc9b8; }
.firmy-stopka .w-linii { display: inline; }
html.js:not(.bez-animacji) .firmy-uklad [data-ujaw] { opacity: 1; transform: none; }
/* przelacznik firmy w nawigacji i naglowku */
body.zalogowany .nawigacja .nav-firma { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; margin-bottom: .35rem; border-radius: var(--promien); border: 1px solid rgba(201,178,107,.25); color: #cfc9b8; text-decoration: none; transition: border-color .25s, background-color .25s; }
body.zalogowany .nawigacja .nav-firma:hover, body.zalogowany .nawigacja .nav-firma.aktywna { border-color: var(--zloto); background: rgba(201,178,107,.08); }
.nav-firma .nav-tekst { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nav-firma .nf-nazwa { color: #fff; font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-firma .nf-akcja { color: var(--zloto); font-size: .75rem; }
.naglowek-firma { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ===== Biuro: wybor firmy — kafle (klienci.js) ===== */
.klienci-tytul { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.klienci-kpi { display: flex; gap: .5rem; flex-wrap: wrap; }
.klienci-kpi .kk { display: inline-flex; align-items: baseline; gap: .35rem; padding: .35rem .8rem; border: 1px solid var(--linia); border-radius: 999px; background: var(--powierzchnia); font-size: .85rem; color: var(--atrament-cichy); }
.klienci-kpi .kk strong { font-size: 1.05rem; color: var(--atrament); }
.klienci-kpi .kk.uwaga { border-color: var(--zloto); background: var(--akcent-tlo); }
.klienci-kpi .kk.uwaga strong { color: var(--zloto-ciemne); }
.klienci-szukaj { position: relative; align-items: center; }
.klienci-szukaj .ikona-szukaj { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--atrament-cichy); pointer-events: none; display: inline-flex; }
.klienci-szukaj .ikona-szukaj svg { width: 1rem; height: 1rem; }
.klienci-szukaj input[type=search] { padding-left: 2.5rem; }
.klienci-licznik { position: absolute; right: 6.5rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
/* 1.22.0: wybor firmy (biuro) — lista domyslnie / kafle, filtry z licznikami, sortowanie, ostatnio otwierane */
.kl-pasek { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.kl-pasek .klienci-szukaj { flex: 1 1 22rem; margin: 0; }
.klienci-szukaj input[type=search] { padding-right: 9.5rem; }
.kl-skrot { position: absolute; right: 5.9rem; top: 50%; transform: translateY(-50%); font: 600 .75rem/1 var(--mono, ui-monospace, monospace); padding: .2rem .45rem; border: 1px solid var(--linia); border-radius: 6px; color: var(--atrament-cichy); background: var(--powierzchnia); pointer-events: none; }
.klienci-licznik { right: 8rem; }
.kl-sort { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 400; }
.kl-sort select { width: auto; margin: 0; border-radius: 10px; }
.kl-widok { display: inline-flex; border: 1px solid var(--linia); border-radius: 10px; overflow: hidden; background: var(--powierzchnia); }
.kl-widok-btn { width: 2.75rem; height: 2.6rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--atrament-cichy); display: grid; place-items: center; transition: background-color .2s, color .2s; }
.kl-widok-btn svg { width: 1.1rem; height: 1.1rem; }
.kl-widok-btn[aria-pressed="true"] { background: var(--ciemny, #15171c); color: #fff; }
.kl-widok-btn:hover:not([aria-pressed="true"]) { background: var(--akcent-tlo); color: var(--atrament); }
.kl-widok .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kl-filtry { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: .85rem; }
.kl-chipy { display: flex; gap: .45rem; flex-wrap: wrap; }
.kl-chip { height: 2.25rem; margin: 0; padding: 0 .95rem; border-radius: 999px; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament); font-size: .875rem; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ruch-krzywa); }
.kl-chip span { margin-left: .2rem; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.kl-chip:hover { border-color: var(--zloto); transform: translateY(-1px); }
.kl-chip.aktywny { background: var(--ciemny, #15171c); border-color: var(--ciemny, #15171c); color: #fff; }
.kl-ostatnie { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.kl-ostatnie[hidden] { display: none; }
.kl-ostatnie button { height: 2rem; margin: 0; padding: 0 .7rem; border-radius: 8px; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament); font-size: .8rem; font-weight: 600; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: wjazd .35s var(--ruch-krzywa) both; transition: border-color .2s, transform .2s var(--ruch-krzywa); }
.kl-ostatnie button:hover { border-color: var(--zloto); transform: translateY(-1px); }

.kafle-klientow { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; }
.kafel-klienta { position: relative; opacity: 0; transform: translateY(8px); animation: wjazd .45s var(--ruch-krzywa) forwards; animation-delay: calc(min(var(--i, 0), 20) * 30ms); }
.kafel-klienta.ukryty { display: none; }
.kk-wybierz { width: 100%; margin: 0; font: inherit; text-align: left; color: var(--atrament); background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .22s var(--ruch-krzywa), border-color .22s var(--ruch-krzywa), box-shadow .22s var(--ruch-krzywa), opacity .3s var(--ruch-krzywa); }
.kk-wybierz:hover, .kk-wybierz:focus-visible { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 0 0 1px rgba(201,178,107,.35); outline: none; }
.kafel-klienta.biezacy .kk-wybierz { border-color: var(--zloto); background: linear-gradient(180deg, var(--akcent-tlo) 0%, var(--powierzchnia) 70%); }
.kafel-klienta.nieaktywny .kk-wybierz { opacity: .6; }
.kk-awatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; color: var(--zloto-ciemne); background: var(--akcent-tlo); border: 1px solid rgba(201,178,107,.55); transition: transform .3s var(--ruch-krzywa), background-color .3s, color .3s; }
.kk-wybierz:hover .kk-awatar { transform: scale(1.06); }
.kk-tresc { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kk-nazwa { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.kk-meta { color: var(--atrament-cichy); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-baza { opacity: .75; }
.kk-dostep-kol { display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; min-width: 0; }
.kk-konta { display: inline-flex; align-items: center; }
.kk-dostep { color: var(--zloto-ciemne); }
.kk-log { font-size: .85rem; color: var(--atrament); } .kk-log.nigdy { color: var(--atrament-cichy); }
.kk-kropka { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--linia); margin-right: .45rem; flex: none; }
.kk-kropka.zywa { background: #3b8b5a; box-shadow: 0 0 0 3px rgba(59,139,90,.18); }
.kk-kropka.zlota { background: var(--zloto); }
.kk-kropka.szara { background: var(--linia); }
.kk-stan { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; min-width: 0; }
.kk-stan .plakietka.cicha { background: transparent; border: 1px solid var(--linia); color: var(--atrament-cichy); }
.kk-stan .plakietka.uwaga { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
.kk-obecnie { font-size: .72rem; font-weight: 700; color: var(--zloto-ciemne); text-transform: uppercase; letter-spacing: .05em; }
.kk-strzalka { color: var(--atrament-cichy); font-size: 1.1rem; transition: transform .2s var(--ruch-krzywa), color .2s; justify-self: end; }
.kk-wybierz:hover .kk-strzalka { transform: translateX(3px); color: var(--zloto-ciemne); }
.kk-akcja { position: absolute; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: 999px; border: 1px solid transparent; font-size: .78rem; color: var(--atrament-cichy); text-decoration: none; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ruch-krzywa); z-index: 1; }
.kk-akcja svg { width: .95rem; height: .95rem; }
.kk-akcja:hover, .kk-akcja:focus-visible { background: var(--akcent-tlo); border-color: var(--linia); color: var(--atrament); }
.kk-akcja-zaloz { color: #8a5a00; font-weight: 700; border-color: rgba(201,178,107,.55); background: var(--akcent-tlo); }
.kk-akcja-zaloz:hover { transform: translateY(-1px); border-color: var(--zloto); }

/* widok: lista */
.kl-naglowki { display: none; }
.kl-naglowki.widoczne { display: grid; }
.kl-naglowki, .widok-lista .kk-wybierz { grid-template-columns: 2.5rem minmax(0, 1fr) 11.5rem 12rem 12.5rem 1.5rem; column-gap: 1rem; }
.kl-naglowki { margin-top: 1rem; padding: 0 1rem; padding-right: 10.5rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--atrament-cichy); }
.widok-lista .kk-wybierz { display: grid; align-items: center; padding: .75rem 1rem; padding-right: 10.5rem; }
.widok-lista .kk-nazwa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widok-lista .kk-akcja { right: .85rem; top: 50%; transform: translateY(-50%); min-width: 8.6rem; justify-content: center; box-sizing: border-box; }
.widok-lista .kk-akcja-zaloz:hover { transform: translateY(calc(-50% - 1px)); }

/* widok: kafle */
.widok-kafle { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .85rem; }
.widok-kafle .kk-wybierz { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "aw tresc" "stan stan" "dostep dostep" "log log"; gap: .35rem .85rem; padding: 1rem 1rem .85rem; height: 100%; }
.widok-kafle .kk-awatar { grid-area: aw; } .widok-kafle .kk-tresc { grid-area: tresc; } .widok-kafle .kk-stan { grid-area: stan; min-height: 1.4rem; }
.widok-kafle .kk-dostep-kol { grid-area: dostep; margin-top: .3rem; padding-top: .55rem; border-top: 1px dashed var(--linia); padding-right: 6.5rem; }
.widok-kafle .kk-log { grid-area: log; font-size: .8rem; color: var(--atrament-cichy); }
.widok-kafle .kk-strzalka { display: none; }
.widok-kafle .kk-akcja { right: .75rem; bottom: .7rem; }

.klienci-pusto { margin-top: 1rem; }
.kafle-klientow.wybrano .kafel-klienta { animation: none; opacity: .35; transform: scale(.99); transition: opacity .3s var(--ruch-krzywa), transform .3s var(--ruch-krzywa); pointer-events: none; }
.kafle-klientow.wybrano .kafel-klienta.wybrany { opacity: 1; transform: scale(1.015); z-index: 1; }
.kafle-klientow.wybrano .kafel-klienta.wybrany .kk-wybierz { border-color: var(--zloto); box-shadow: 0 0 0 2px var(--zloto), 0 18px 40px rgba(0,0,0,.18); }
.kafle-klientow.wybrano .kafel-klienta.wybrany .kk-awatar { background: var(--zloto); color: #15171c; animation: zp-pop .45s var(--ruch-krzywa); }
@media (max-width: 64rem) {
  .kl-naglowki { display: none !important; }
  .widok-lista .kk-wybierz { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "aw tresc" "aw stan" "dostep dostep" "log log"; row-gap: .3rem; }
  .widok-lista .kk-awatar { grid-area: aw; } .widok-lista .kk-tresc { grid-area: tresc; } .widok-lista .kk-stan { grid-area: stan; }
  .widok-lista .kk-dostep-kol { grid-area: dostep; } .widok-lista .kk-log { grid-area: log; font-size: .8rem; } .widok-lista .kk-strzalka { display: none; }
  .widok-lista .kk-nazwa { white-space: normal; }
}
@media (max-width: 40rem) { .klienci-licznik, .kl-skrot { display: none; } .klienci-szukaj input[type=search] { padding-right: 6rem; } .widok-kafle { grid-template-columns: 1fr; } .kl-ostatnie { width: 100%; } }
:root[data-motyw="ciemny"] .kl-chip.aktywny, :root[data-motyw="ciemny"] .kl-widok-btn[aria-pressed="true"] { background: var(--zloto); border-color: var(--zloto); color: #15171c; }
:root[data-motyw="ciemny"] .kk-akcja-zaloz { color: var(--zloto); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .kl-chip.aktywny, :root:not([data-motyw="jasny"]) .kl-widok-btn[aria-pressed="true"] { background: var(--zloto); border-color: var(--zloto); color: #15171c; } :root:not([data-motyw="jasny"]) .kk-akcja-zaloz { color: var(--zloto); } }
@media (prefers-reduced-motion: reduce) { .kafel-klienta, .kl-ostatnie button { animation: none; opacity: 1; transform: none; } .kk-wybierz, .kl-chip, .kk-akcja, .kk-strzalka, .kk-awatar { transition: none; } }
html.js:not(.bez-animacji) .kafle-klientow[data-ujaw], html.js:not(.bez-animacji) .kafle-klientow > li[data-ujaw] { opacity: 1; transform: none; }


/* ===== Biuro: konta firmy (admin/klient.html, konta.js) ===== */
.klient-tytul { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kt-wstecz { display: inline-block; font-size: .85rem; color: var(--atrament-cichy); text-decoration: none; margin-bottom: .35rem; }
.kt-wstecz:hover { color: var(--zloto-ciemne); }
.klient-tytul h1 { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.kt-awatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; font-weight: 700; color: var(--zloto-ciemne); background: var(--akcent-tlo); border: 1px solid rgba(201,178,107,.55); }
.kt-akcje { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding-top: 1.6rem; }
.kt-akcje form { margin: 0; }
.kt-akcje button { margin: 0; width: auto; }
.sekcja-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sekcja-naglowek h2 { margin-bottom: .5rem; }
.konta-lista { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.konto-karta { display: grid; grid-template-columns: 2.6rem minmax(16rem, 1.5fr) minmax(13rem, 1fr) auto; align-items: center; gap: .85rem; padding: .75rem .9rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia);
  opacity: 0; transform: translateY(8px); animation: wjazd .45s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 50ms); transition: border-color .25s var(--ruch-krzywa), box-shadow .25s var(--ruch-krzywa); }
.konto-karta:hover { border-color: rgba(201,178,107,.6); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.konto-karta.wylaczone { opacity: .6; }
.konto-tresc { display: flex; flex-direction: column; min-width: 0; }
.konto-imie { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-meta { color: var(--atrament-cichy); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-stan { display: flex; flex-direction: column; font-size: .9rem; line-height: 1.3; }
.stan-kropka { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; background: var(--linia); }
.stan-kropka.zielona { background: #3b8b5a; box-shadow: 0 0 0 3px rgba(59,139,90,.16); }
.stan-kropka.zlota { background: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.25); animation: gz-puls-miekki 2.4s ease-in-out infinite; }
.stan-kropka.szara { background: var(--linia); }
@keyframes gz-puls-miekki { 0%, 100% { box-shadow: 0 0 0 3px rgba(201,178,107,.25); } 50% { box-shadow: 0 0 0 6px rgba(201,178,107,.08); } }
.konto-akcje { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.konto-akcje form { margin: 0; }
.konto-akcje button { margin: 0; width: auto; padding: .35rem .7rem; font-size: .85rem; }
.plakietka.zlota { background: var(--akcent-tlo); color: var(--zloto-ciemne); border: 1px solid rgba(201,178,107,.5); }
.plakietka.cicha { background: transparent; border: 1px solid var(--linia); color: var(--atrament-cichy); }
.link-sekcja { border-color: var(--zloto); background: linear-gradient(180deg, var(--akcent-tlo) 0%, var(--powierzchnia) 70%); animation: wjazd .5s var(--ruch-krzywa) both; }
.link-kopia { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.link-kopia code { flex: 1; min-width: 0; word-break: break-all; }
.link-kopia button { width: auto; margin: 0; white-space: nowrap; transition: background-color .25s, color .25s; }
.link-kopia button.ok { background: #3b8b5a; color: #fff; border-color: #3b8b5a; }
/* combobox wyboru konta */
.wybor-konta { position: relative; }
.wk-pole { position: relative; display: block; }
.wk-pole input.wybrano { border-color: #3b8b5a; background: var(--ok-tlo, #eef6f0); font-weight: 600; padding-right: 2.2rem; }
.wk-pole input.pop { animation: zp-pop-lekki .35s var(--ruch-krzywa); }
@keyframes zp-pop-lekki { 0% { transform: scale(.995); } 50% { transform: scale(1.008); } 100% { transform: none; } }
.wk-wyczysc { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; padding: 0; margin: 0; border-radius: 50%; border: none; background: transparent; color: var(--atrament-cichy); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.wk-wyczysc:hover { background: var(--akcent-tlo); color: var(--atrament); }
.wk-lista { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: .25rem 0 0; padding: .3rem; list-style: none; max-height: 18rem; overflow: auto; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: 0 14px 34px rgba(0,0,0,.14); animation: wjazd .2s var(--ruch-krzywa); }
.wk-lista li { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: calc(var(--promien) - 3px); cursor: pointer; font-weight: 400; }
.wk-lista li:hover, .wk-lista li.akt { background: var(--akcent-tlo); }
.wk-lista li[hidden] { display: none; }
.kk-awatar.maly { width: 1.9rem; height: 1.9rem; font-size: .85rem; }
.wk-tresc { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wk-imie { font-weight: 600; }
.wk-meta { color: var(--atrament-cichy); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 60rem) { .konto-karta { grid-template-columns: 2.6rem 1fr; } .konto-stan, .konto-akcje { grid-column: 2; justify-content: flex-start; } }
html.js:not(.bez-animacji) .konta-lista > li[data-ujaw] { opacity: 1; transform: none; }


/* ===== Faktury: korekta przed/po, naruszenia schematu, duplikat (K-114) ===== */
.korekta-podsumowanie { border-left: 4px solid var(--zloto); }
.korekta-podsumowanie.zwrot { border-left-color: #3b8b5a; }
.korekta-podsumowanie.doplata { border-left-color: var(--uwaga, #b8860b); }
.kp-naglowek { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.kp-naglowek h2 { margin-bottom: .1rem; }
.kp-etykieta { display: flex; flex-direction: column; align-items: flex-end; padding: .5rem .9rem; border-radius: var(--promien); background: var(--akcent-tlo); border: 1px solid var(--linia); animation: wjazd .45s var(--ruch-krzywa); }
.kp-et-tekst { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--atrament-cichy); }
.kp-kwota { font-size: 1.35rem; }
.korekta-podsumowanie.zwrot .kp-kwota { color: #2f7048; }
.kp-grupy { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .75rem 0; }
.kp-grupa h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--atrament-cichy); margin: 0 0 .35rem; }
.kp-grupa.przed .tabela { opacity: .8; }
.kp-grupa.przed .tabela td { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); text-decoration-thickness: 1px; }
.kp-grupa .tabela tr.wyzerowana td { color: var(--atrament-cichy); }
.tabela.zwarta td, .tabela.zwarta th { padding: .35rem .5rem; font-size: .9rem; }
.kp-kwoty { max-width: 34rem; }
.kp-kwoty .kp-roznica td { border-top: 2px solid var(--zloto); }
@media (max-width: 48rem) { .kp-grupy { grid-template-columns: 1fr; } }
.kp-live { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .75rem; align-items: center; margin: .75rem 0 .4rem; padding: .7rem .9rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); transition: border-color .3s var(--ruch-krzywa), background-color .3s var(--ruch-krzywa); }
.kp-live-w { display: flex; flex-direction: column; }
.kp-live-et { display: flex; flex-direction: column; align-items: flex-end; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--linia); transition: background-color .3s, border-color .3s; }
.kp-live-et strong { font-size: 1.15rem; }
.kp-live.zwrot { border-color: rgba(59,139,90,.5); }
.kp-live.zwrot .kp-live-et { background: var(--ok-tlo, #eef6f0); border-color: #3b8b5a; color: #2f7048; }
.kp-live.doplata .kp-live-et { background: var(--akcent-tlo); border-color: var(--zloto); }
@media (max-width: 40rem) { .kp-live { grid-template-columns: 1fr 1fr; } }
.bledy-schematu { margin: .5rem 0 1rem; padding: .6rem .9rem; border: 1px solid var(--blad); border-radius: var(--promien); background: var(--blad-tlo, #fdf1f0); animation: wjazd .4s var(--ruch-krzywa); }
.bledy-schematu summary { cursor: pointer; font-weight: 600; }
.bledy-schematu ol { margin: .5rem 0 .25rem 1.2rem; }
.bledy-schematu li { margin: .2rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.blad-blok { margin-bottom: 1rem; }
.blad-blok form { margin: .5rem 0; }
.blad-blok button { width: auto; }


/* ===== Ustawienia (biuro): karty sekcji, przelaczniki, test polaczenia ===== */
.ust-tytul { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ust-skroty { display: flex; gap: .35rem; flex-wrap: wrap; }
.ust-skroty a { padding: .3rem .7rem; border: 1px solid var(--linia); border-radius: 999px; font-size: .82rem; color: var(--atrament-cichy); text-decoration: none; background: var(--powierzchnia); transition: border-color .2s, color .2s, background-color .2s; }
.ust-skroty a:hover { border-color: var(--zloto); color: var(--atrament); background: var(--akcent-tlo); }
.ust-siatka { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 70rem) { .ust-siatka { grid-template-columns: 1fr 1fr; } }
.ust-karta { margin: 0; opacity: 0; transform: translateY(10px); animation: wjazd .5s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 70ms); transition: box-shadow .4s var(--ruch-krzywa), border-color .4s var(--ruch-krzywa); scroll-margin-top: 5rem; }
.ust-karta.podswietlona { border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.35); }
html.js:not(.bez-animacji) .ust-siatka[data-ujaw], html.js:not(.bez-animacji) .ust-karta[data-ujaw] { opacity: 1; transform: none; }
.ust-naglowek { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .75rem; align-items: start; margin-bottom: .75rem; }
.ust-naglowek h2 { margin: 0 0 .15rem; }
.ust-naglowek p { margin: 0; }
.ust-ikona { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; color: var(--zloto-ciemne); background: var(--akcent-tlo); border: 1px solid rgba(201,178,107,.5); }
.ust-ikona svg { width: 1.2rem; height: 1.2rem; }
.ust-stan { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--linia); font-size: .78rem; color: var(--atrament-cichy); white-space: nowrap; }
.ust-stan.ok { border-color: rgba(59,139,90,.45); color: #2f7048; }
.ust-akcje { display: flex; justify-content: flex-end; margin-top: .25rem; }
.ust-akcje button { width: auto; margin: 0; }
.ust-test { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: end; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--linia); }
.ust-test label { margin: 0; }
.ust-test button { width: auto; margin: 0; }
.ust-test-wynik { display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: .4rem .7rem; border-radius: var(--promien); background: var(--papier); transition: background-color .3s; }
.ust-test-wynik.pop { animation: zp-pop-lekki .4s var(--ruch-krzywa); }
.ust-test-wynik .tekst { font-size: .9rem; }
.stan-kropka.czerwona { background: var(--blad); box-shadow: 0 0 0 3px rgba(226,106,99,.18); }
.ust-adres { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--linia); }
.ust-adres-w { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; }
.ust-adres-w code { flex: 1; min-width: 0; word-break: break-all; }
.ust-adres-w button { width: auto; margin: 0; }
.ust-adres-w button.ok { background: #3b8b5a; color: #fff; border-color: #3b8b5a; }
.dwie-kolumny.rowne { grid-template-columns: 1fr 1fr; }
.ust-przelaczniki { display: grid; gap: .35rem; margin-bottom: .75rem; }
/* przelacznik (toggle) zamiast checkboxa */
label.przelacznik { display: flex; align-items: center; gap: .65rem; cursor: pointer; margin: .35rem 0; font-weight: 400; }
label.przelacznik input { position: absolute; opacity: 0; width: 0; height: 0; }
.prz-tor { flex: none; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--linia); position: relative; transition: background-color .25s var(--ruch-krzywa); }
.prz-kulka { position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .25s var(--ruch-krzywa); }
label.przelacznik input:checked + .prz-tor { background: #3b8b5a; }
label.przelacznik input:checked + .prz-tor .prz-kulka { transform: translateX(1rem); }
label.przelacznik input:focus-visible + .prz-tor { outline: 2px solid var(--zloto); outline-offset: 2px; }
button.w-toku { opacity: .7; }


/* ===== Rozliczenia z biurem (I-17): dwie warstwy zaplaty, platnosc zbiorcza ===== */
.rozl-kafle .kafel.online { border-color: var(--zloto); background: linear-gradient(180deg, var(--akcent-tlo) 0%, var(--powierzchnia) 70%); }
.plakietka-stan { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--linia); font-size: .82rem; white-space: nowrap; }
.plakietka-stan.mala { font-size: .75rem; padding: .1rem .5rem; }
.plakietka-stan .stan-kropka { margin-right: 0; }
.plakietka-stan.otwarta .stan-kropka { background: var(--atrament-cichy); }
.plakietka-stan.zalegla { border-color: var(--blad); color: var(--blad); } .plakietka-stan.zalegla .stan-kropka { background: var(--blad); }
.plakietka-stan.ok { border-color: rgba(59,139,90,.5); color: #2f7048; } .plakietka-stan.ok .stan-kropka { background: #3b8b5a; }
.plakietka-stan.online { border-color: var(--zloto); color: var(--zloto-ciemne); background: var(--akcent-tlo); white-space: normal; } .plakietka-stan.online .stan-kropka { background: var(--zloto); animation: gz-puls-miekki 2.4s ease-in-out infinite; }
.plakietka-stan.zwrot { border-color: rgba(59,139,90,.5); color: #2f7048; } .plakietka-stan.zwrot .stan-kropka { background: #3b8b5a; }
.plakietka-stan.cicha { color: var(--atrament-cichy); }
.zwrot-tekst { color: #2f7048; }
.rozl-tabela .kol-zazn { width: 1%; } .rozl-tabela .kol-zazn input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--zloto-ciemne); }
.rozl-tabela tr.zaznaczona td { background: var(--akcent-tlo); }
.rozl-tabela tr.stan-online td { opacity: .85; }
.zaplata-pasek { position: sticky; bottom: .5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .75rem 0 .4rem; padding: .6rem .9rem; border-radius: var(--promien); border: 1px solid var(--linia); background: var(--powierzchnia); box-shadow: 0 8px 24px rgba(0,0,0,.08); transition: border-color .3s var(--ruch-krzywa), box-shadow .3s var(--ruch-krzywa), transform .3s var(--ruch-krzywa); }
.zaplata-pasek.aktywny { border-color: var(--zloto); box-shadow: 0 12px 32px rgba(0,0,0,.14); transform: translateY(-2px); }
.zaplata-pasek button { width: auto; margin: 0; }
.zaplata-pasek .zp-info strong { display: inline-block; }
.zaplata-pasek #zaplata-suma.pop { animation: zp-pop-lekki .35s var(--ruch-krzywa); }


/* ===== Watek zgloszen — dopasowanie 1:1 do arkusza Pryzmata (K-117 A); reszta od 0.24–0.26 ===== */
:root { --nieb: #2f6fd6; }
@keyframes zg-blysk { 0% { box-shadow: 0 0 0 0 var(--zloto); } 30% { box-shadow: 0 0 0 4px var(--zloto); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes zg-blysk-n { 0% { box-shadow: 0 0 0 0 var(--nieb); } 30% { box-shadow: 0 0 0 4px var(--nieb); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes zg-pal { from { opacity: 0; transform: scale(.6) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes zg-pal-e { from { opacity: 0; transform: translateY(6px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes zg-cyt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rozmowa > .nowy .dymek { animation: zg-blysk 1.2s ease-out; }                       /* obwodka 1,2 s (bylo 1,5 s) */
.rozmowa > .nowy.strona-biuro .dymek { animation: zg-blysk-n 1.2s ease-out; }        /* wpis biura: niebieska */
.dodaj-reakcje[open] .paleta-reakcji, .paleta-emoji { animation: zg-pal .22s cubic-bezier(.2,.9,.3,1.3) both; transform-origin: bottom left; }
.dodaj-reakcje[open] .paleta-reakcji button, .paleta-emoji button { animation: zg-pal-e .25s ease both; transition: transform .12s cubic-bezier(.2,.9,.3,1.4), background-color .12s; }
.dodaj-reakcje[open] .paleta-reakcji button:hover, .paleta-emoji button:hover { transform: scale(1.45) translateY(-4px); background: var(--akcent-tlo); }
.paleta-reakcji button:nth-child(1), .paleta-emoji button:nth-child(1) { animation-delay: 0ms; } .paleta-reakcji button:nth-child(2), .paleta-emoji button:nth-child(2) { animation-delay: 25ms; }
.paleta-reakcji button:nth-child(3), .paleta-emoji button:nth-child(3) { animation-delay: 50ms; } .paleta-reakcji button:nth-child(4), .paleta-emoji button:nth-child(4) { animation-delay: 75ms; }
.paleta-reakcji button:nth-child(5), .paleta-emoji button:nth-child(5) { animation-delay: 100ms; } .paleta-reakcji button:nth-child(6), .paleta-emoji button:nth-child(6) { animation-delay: 125ms; }
.paleta-reakcji button:nth-child(7), .paleta-emoji button:nth-child(7) { animation-delay: 150ms; } .paleta-reakcji button:nth-child(8), .paleta-emoji button:nth-child(8) { animation-delay: 175ms; }
.pigulka-reakcji.moja { border-color: var(--zloto); box-shadow: 0 0 0 1px var(--zloto) inset; }
.pigulka-reakcji.podskok { animation: podskok .4s cubic-bezier(.2,.9,.3,1.5); }
.pasek-cytatu:not([hidden]) { animation: zg-cyt .22s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .rozmowa > .nowy .dymek, .dodaj-reakcje[open] .paleta-reakcji, .paleta-emoji, .paleta-reakcji button, .paleta-emoji button, .pigulka-reakcji.podskok, .pasek-cytatu:not([hidden]) { animation: none !important; } .paleta-reakcji button:hover, .paleta-emoji button:hover { transform: none; } }


/* ===== Faktura z KSeF — szczegoly: podglad od razu + karty (ksef_dokument.html) ===== */
.fd-tytul { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.fd-tytul h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fd-rodzaj { font-size: .8rem; vertical-align: middle; }
.fd-ksef code { font-size: .85rem; }
.fd-ksef .link { padding: 0 .2rem; }
.fd-kwota { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.fd-kwota-liczba { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
.fd-kwota-waluta { font-size: .9rem; color: var(--atrament-cichy); margin-bottom: .2rem; }
.fd-uklad { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(19rem, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .fd-uklad { grid-template-columns: 1fr; } }
.fd-karta { opacity: 0; transform: translateY(10px); animation: wjazd .5s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 70ms); margin: 0; }
.fd-podglad { margin: 0; }   /* BEZ animacji: Safari przeladowuje wtyczke PDF, gdy przodek ramki zmienia opacity/transform */
html.js:not(.bez-animacji) .fd-uklad[data-ujaw], html.js:not(.bez-animacji) .fd-karta[data-ujaw], html.js:not(.bez-animacji) .fd-podglad[data-ujaw] { opacity: 1; transform: none; }
.fd-bok { display: flex; flex-direction: column; gap: 1rem; }
.fd-bok .sekcja + .sekcja { margin-top: 0; }
.fd-h { font-size: 1rem; margin: 0 0 .6rem; }
.fd-ramka { position: relative; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); overflow: hidden; min-height: 32rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.fd-ramka iframe { width: 100%; height: min(78vh, 60rem); border: 0; display: block; }
.fd-ramka.gotowa img { opacity: 1; }
.fd-ramka.obraz { min-height: 10rem; }
.fd-ramka img { width: 100%; height: auto; display: block; opacity: 0; transition: opacity .5s var(--ruch-krzywa); }
.fd-ramka.pusta { min-height: 12rem; display: grid; place-items: center; text-align: center; padding: 2rem; }
.fd-ramka.pusta .ik { width: 2rem; height: 2rem; opacity: .5; }
.fd-ladowanie { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--atrament-cichy); background: linear-gradient(110deg, var(--papier) 30%, var(--powierzchnia) 50%, var(--papier) 70%); background-size: 200% 100%; animation: fd-polysk 1.6s linear infinite; }
@keyframes fd-polysk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.fd-ladowanie { transition: opacity .45s var(--ruch-krzywa); z-index: 2; }
.fd-ramka.gotowa .fd-ladowanie { opacity: 0; pointer-events: none; }
.fd-podglad-akcje { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.fd-podglad-akcje .przycisk-link { display: inline-flex; align-items: center; gap: .4rem; }
.fd-podglad-akcje .ik { width: 1rem; height: 1rem; }
.fd-kontrahent { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.fd-dane { margin: 0; }
.fd-droga { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.fd-droga li { position: relative; display: grid; grid-template-columns: 1.2rem 1fr; gap: .6rem; padding: .35rem 0 .7rem; }
.fd-droga li::before { content: ""; position: absolute; left: .55rem; top: 1.2rem; bottom: -.2rem; width: 2px; background: var(--linia); }
.fd-droga li:last-child::before { display: none; }
.fd-droga li div { display: flex; flex-direction: column; gap: .1rem; }
.fd-kropka { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--linia); background: var(--powierzchnia); margin-top: .1rem; z-index: 1; transition: background-color .3s, border-color .3s; }
.fd-droga li.ok .fd-kropka { background: #3b8b5a; border-color: #3b8b5a; box-shadow: 0 0 0 3px rgba(59,139,90,.16); }
.fd-droga li.toku .fd-kropka { border-color: var(--zloto); background: var(--akcent-tlo); animation: gz-puls-miekki 2.4s ease-in-out infinite; }
.fd-droga li.nie .fd-kropka { border-color: var(--blad); background: var(--blad-tlo, #fdf1f0); }
.fd-droga li.ok::before { background: rgba(59,139,90,.45); }
button.zaplata.duza { width: 100%; justify-content: flex-start; padding: .6rem .8rem .6rem .5rem; border: 1px solid var(--linia); font-size: .95rem; }
button.zaplata.duza .zp-znak { width: 1.75rem; height: 1.75rem; }
button.zaplata.duza .zp-znak svg { width: 1rem; height: 1rem; }
button.zaplata.duza.jest { border-color: rgba(59,139,90,.5); background: var(--ok-tlo, #eef6f0); }
.fd-zgloszenie { display: inline-flex; align-items: center; gap: .4rem; }
.fd-zgloszenie .ik { width: 1rem; height: 1rem; }
.fd-nie-ksieguj summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .5rem; list-style: none; }
.fd-nie-ksieguj summary::-webkit-details-marker { display: none; }
.fd-nie-ksieguj summary .ik { width: 1.1rem; height: 1.1rem; color: var(--zloto-ciemne); }
.fd-nie-ksieguj[open] summary { margin-bottom: .5rem; }
.fd-nie-ksieguj .formularz { animation: wjazd .3s var(--ruch-krzywa); }
.fd-decyzja:empty { display: none; }


/* faktura w drodze do KSeF — pasek "czekam" (faktura_zywo.js) */
.fak-zywo { display: inline-flex; align-items: center; gap: .5rem; margin: .75rem 0; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--zloto); background: var(--akcent-tlo); font-size: .9rem; animation: wjazd .4s var(--ruch-krzywa); }
.fak-zywo .stan-kropka.zlota { animation: gz-puls-miekki 2s ease-in-out infinite; }
.fak-zywo.gotowe { border-color: #3b8b5a; } .fak-zywo.gotowe .stan-kropka { background: #3b8b5a; animation: none; }


/* ===== Pomoc: "Jak to dziala" (1.53.0: indeks z wyszukiwarka i grupami, przewodnik = zywa makieta Pulpitu) ===== */
.pom-naglowek { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.pom-naglowek .przycisk-link { display: inline-flex; align-items: center; gap: .4rem; }
.pom-naglowek .przycisk-link .ik { width: 1rem; height: 1rem; }
.pom-szukaj-wrap { margin: .25rem 0 1.25rem; }
.pom-szukaj { display: block; max-width: 36rem; flex: none; }
.pom-szukaj input { height: 3rem; font-size: 1rem; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(28,35,51,.06); transition: box-shadow .2s var(--ruch-krzywa), border-color .2s; }
.pom-szukaj input:focus { border-color: var(--zloto); box-shadow: 0 0 0 4px rgba(201,178,107,.18); outline: none; }
.pom-szukaj-wrap > p { margin: .45rem 0 0; }
.pom-wyniki { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.pom-wynik { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--linia); border-left: 3px solid var(--zloto); border-radius: 12px; background: var(--powierzchnia); color: var(--atrament); text-decoration: none; opacity: 0; animation: wjazd .35s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 35ms); transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
.pom-wynik:hover { transform: translateX(3px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.pom-wynik-gdzie { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--zloto-ciemne); }
.pom-grupa { margin-bottom: 1.5rem; }
.pom-grupa-h { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--atrament-cichy); margin: 0 0 .65rem; display: flex; align-items: center; gap: .6rem; }
.pom-grupa-h::after { content: ""; flex: 1; height: 1px; background: var(--linia); }
.pom-kafle { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .85rem; align-items: stretch; }
.pom-kafle li { display: flex; opacity: 0; transform: translateY(10px); animation: wjazd .5s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
.pom-kafel { position: relative; display: flex; flex-direction: column; gap: .45rem; width: 100%; min-height: 11rem; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--linia); border-radius: 14px; background: var(--powierzchnia); color: var(--atrament); text-decoration: none; overflow: hidden; transition: transform .25s var(--ruch-krzywa), border-color .25s, box-shadow .25s; }
.pom-kafel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--zloto), transparent); transform: scaleX(.25); transform-origin: left; transition: transform .35s var(--ruch-krzywa); }
.pom-kafel:hover, .pom-kafel:focus-visible { transform: translateY(-3px); border-color: var(--zloto); box-shadow: 0 14px 30px rgba(0,0,0,.10); outline: none; }
.pom-kafel:hover::before { transform: scaleX(1); }
.pom-kafel-gora { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.pom-obejrzany { display: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; place-items: center; background: rgba(59,139,90,.14); color: #2f7048; }
.pom-obejrzany .ik { width: .95rem; height: .95rem; }
.pom-kafel.obejrzany .pom-obejrzany { display: grid; animation: zp-pop .45s var(--ruch-krzywa); }
.pom-tytul { font-size: 1.02rem; line-height: 1.25; }
.pom-opis { color: var(--atrament-cichy); font-size: .88rem; line-height: 1.45; }
.pom-postep { display: block; height: 4px; border-radius: 999px; background: var(--linia); overflow: hidden; }
.pom-postep i { display: block; height: 100%; width: 0; background: var(--zloto); border-radius: inherit; transition: width .6s var(--ruch-krzywa); }
.pom-stopka { margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--linia); display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--atrament-cichy); }
.pom-strzalka { color: var(--zloto-ciemne); transition: transform .25s var(--ruch-krzywa); }
.pom-kafel:hover .pom-strzalka { transform: translateX(3px); }
html.js:not(.bez-animacji) .pom-kafle[data-ujaw], html.js:not(.bez-animacji) .pom-kafle > li[data-ujaw], html.js:not(.bez-animacji) .cn-tydzien[data-ujaw], html.js:not(.bez-animacji) .pom-grupa[data-ujaw] { opacity: 1; transform: none; }

/* przewodnik: naglowek, odtwarzacz, spis */
.prz-tytul-strony { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.prz-tytul-strony h1 { display: flex; align-items: center; gap: .65rem; }
.prz-otworz { display: inline-flex; gap: .4rem; align-items: center; }
.prz { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(17rem, 1fr); gap: 1.4rem; align-items: start; margin-bottom: 1.5rem; }
@media (max-width: 70rem) { .prz { grid-template-columns: 1fr; } }
.prz-ekran { position: relative; border-radius: 16px; padding: .75rem; background: linear-gradient(160deg, #23242b 0%, #15171b 100%); border: 1px solid rgba(201,178,107,.32); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.prz-czas { height: 3px; margin: .6rem .25rem 0; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.prz-czas i { display: block; height: 100%; background: var(--zloto); transform-origin: left; transform: scaleX(0); }
.prz-tekst { display: flex; flex-direction: column; gap: .9rem; padding: .25rem 0; }
@media (min-width: 70.01rem) { .prz-tekst { position: sticky; top: calc(var(--naglowek-h, 4rem) + 1rem); } }
.prz-postep { display: flex; gap: .35rem; flex-wrap: wrap; }
.prz-kropka { width: 1.9rem; height: .42rem; border-radius: 999px; border: 0; padding: 0; margin: 0; background: var(--linia); cursor: pointer; transition: background-color .3s, width .3s var(--ruch-krzywa); }
.prz-kropka:hover { background: rgba(201,178,107,.7); }
.prz-kropka.byla { background: rgba(201,178,107,.5); } .prz-kropka.aktywna { background: var(--zloto); width: 3rem; }
.prz-krok.wchodzi { animation: wjazd .4s var(--ruch-krzywa); }
.prz-nr { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--akcent-tlo); color: var(--zloto-ciemne); font-weight: 700; font-size: .8rem; margin-bottom: .55rem; font-variant-numeric: tabular-nums; }
.prz-krok h2 { margin: 0 0 .45rem; font-size: 1.35rem; line-height: 1.25; }
.prz-krok p { font-size: 1.02rem; line-height: 1.6; margin: 0; }
.prz-uwagi { margin: .8rem 0 0; padding: .7rem .9rem .7rem 2rem; border-radius: 12px; background: var(--akcent-tlo); border: 1px solid rgba(201,178,107,.35); font-size: .92rem; line-height: 1.5; }
.prz-uwagi li + li { margin-top: .3rem; }
.prz-uwagi::before { content: "Dobrze wiedzieć"; display: block; margin: 0 0 .35rem -1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zloto-ciemne); }
.prz-nawigacja { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.prz-nawigacja button { width: auto; margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.prz-nawigacja button .ik { width: 1rem; height: 1rem; }
.prz-nawigacja .glowny { margin-left: auto; padding: .55rem 1.1rem; }
.prz-wszystkie h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
.prz-spis { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; counter-reset: none; }
.prz-spis > li { padding: .7rem .5rem .75rem; border-top: 1px dashed var(--linia); }
.prz-spis > li:first-child { border-top: 0; }
.prz-spis a { display: inline-flex; align-items: center; gap: .6rem; color: var(--atrament); text-decoration: none; }
.prz-spis a:hover strong, .prz-spis a.aktywny strong { color: var(--zloto-ciemne); }
.prz-spis-nr { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--linia); font-size: .78rem; font-weight: 700; color: var(--atrament-cichy); transition: background-color .25s, color .25s, border-color .25s; flex: none; }
.prz-spis a.aktywny .prz-spis-nr { background: var(--zloto); border-color: var(--zloto); color: #15171c; }
.prz-spis p { margin: .35rem 0 0 2.2rem; color: var(--atrament-cichy); line-height: 1.55; }
.prz-spis-uwagi { margin: .35rem 0 0 2.2rem; padding-left: 1.1rem; color: var(--atrament-cichy); font-size: .9rem; }
.prz-dalsze { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; margin: 1rem 0 .5rem; }
.prz-sasiad { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--powierzchnia); color: var(--atrament); text-decoration: none; transition: transform .2s var(--ruch-krzywa), border-color .2s; }
.prz-sasiad:hover { border-color: var(--zloto); transform: translateY(-2px); }
.prz-sasiad.prawo { text-align: right; } .prz-sasiad.srodek { text-align: center; }
@media (max-width: 40rem) { .prz-dalsze { grid-template-columns: 1fr; } .prz-sasiad.prawo, .prz-sasiad.srodek { text-align: left; } .prz-nawigacja .glowny { margin-left: 0; } }

/* makieta Pulpitu (mk-*): stala szerokosc 1040 px, skalowana do ramki; wewnatrz prawdziwe klasy komponentow */
.mk-ramka { position: relative; overflow: hidden; border-radius: 10px; background: var(--papier); min-height: 12rem; }
.mk-ekran { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; background: var(--papier-app, var(--papier)); color: var(--atrament); font-size: 15px; overflow: hidden; pointer-events: none; user-select: none; }
.mk-ekran.mk-wejscie { animation: mk-wejscie .45s var(--ruch-krzywa); }
@keyframes mk-wejscie { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
:root[data-motyw="ciemny"] .mk-ekran { background: var(--papier); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .mk-ekran { background: var(--papier); } }
.mk-naglowek { flex: none; height: 58px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--ciemny, #1c1c1c); border-bottom: 3px solid var(--zloto); color: #fff; }
.mk-logo { height: 28px; width: auto; display: block; }
.mk-naglowek-tytul { color: var(--zloto); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.mk-firma { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border: 1px solid rgba(201,178,107,.35); border-radius: 10px; font-size: 12px; }
.mk-firma > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.mk-firma-znak { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--zloto); color: #15171c; font-weight: 700; }
.mk-firma-et { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #cfc9b8; }
.mk-naglowek-prawa { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12px; color: #d8d3c4; }
.mk-sesja { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; }
.mk-sesja-kolko { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--zloto); border-right-color: transparent; }
.mk-ik .ik { width: 18px; height: 18px; display: block; }
.mk-uz { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; }
.mk-uz > span:last-child { display: flex; flex-direction: column; line-height: 1.15; } .mk-uz span span { font-size: 10px; color: #b9b4a5; }
.mk-inicjal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; place-items: center; background: rgba(201,178,107,.18); color: var(--zloto); font-weight: 700; }
.mk-cialo { flex: 1; display: flex; min-height: 0; }
.mk-nav { flex: none; width: 210px; padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; background: linear-gradient(180deg, #1c1d23 0%, #121317 100%); font-size: 13px; }
.mk-nav a { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 9px; color: #b9b4a5; transition: background-color .3s, color .3s; }
.mk-nav a.aktywna { background: linear-gradient(90deg, rgba(201,178,107,.2), rgba(201,178,107,.06)); color: #fff; }
.mk-nav a.aktywna::before { content: ""; position: absolute; left: -10px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--zloto); }
.mk-nav-ik { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.04); color: #d6c48a; flex: none; }
.mk-nav a.aktywna .mk-nav-ik { background: var(--zloto); color: #15171c; }
.mk-nav-ik .ik { width: 15px; height: 15px; }
.mk-nav-et { margin: 9px 8px 3px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #77735f; }
.mk-tresc { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.mk-tresc-w { padding: 20px 26px 30px; transition: transform .8s var(--ruch-krzywa); }
.mk-ramka.waska .mk-nav { display: none; }
.mk-ramka.waska .mk-firma, .mk-ramka.waska .mk-naglowek-tytul, .mk-ramka.waska .mk-sesja, .mk-ramka.waska .mk-uz span span, .mk-ramka.waska .mk-uz strong { display: none; }
.mk-ramka.waska .mk-tresc-w { padding: 16px 16px 24px; }
/* komponenty wewnatrz makiety — tylko dopasowanie rozmiarow; wyglad z prawdziwych klas */
.mk-tytul { margin-bottom: 14px; } .mk-tytul h1 { font-size: 24px; margin: 0 0 4px; } .mk-tytul p { margin: 0; font-size: 13.5px; }
.mk-tresc-w .okruszki { margin: 0 0 6px; font-size: 12.5px; }
.mk-tresc-w > * + * { margin-top: 12px; }
.mk-kafle { display: grid; grid-template-columns: repeat(var(--kol, 4), minmax(0, 1fr)); gap: 10px; margin: 0; }
.mk-ramka.waska .mk-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-kafle .kafel { padding: 12px 13px; min-height: 0; }
.mk-kafle .kafel-liczba { font-size: 24px; } .mk-kafle .kafel-tytul { font-size: 13px; } .mk-kafle .kafel-opis { font-size: 11.5px; }
:root[data-motyw="ciemny"] .mk-kafle .kafel-liczba { color: var(--atrament); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .mk-kafle .kafel-liczba { color: var(--atrament); } }
.mk-przyciski { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .mk-przyciski.prawo { justify-content: flex-end; }
.mk-btn { width: auto; margin: 0; font-size: 13px; transition: transform .15s, box-shadow .2s; }
.mk-glowny { padding: 8px 16px; border: 0; border-radius: 10px; background: var(--akcent); color: #fff; font-weight: 600; }
.mk-zloty { padding: 8px 16px; border: 0; border-radius: 10px; background: var(--zloto); color: #15171c; font-weight: 700; }
.mk-link { padding: 0; border: 0; background: none; color: var(--akcent); text-decoration: underline; }
:root[data-motyw="ciemny"] .mk-glowny { color: #15171c; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .mk-glowny { color: #15171c; } }
.mk-chipy { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-chipy .kl-chip { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 12.5px; transition: background-color .25s, color .25s, border-color .25s; }
.mk-szukaj { width: 240px; }
.mk-zakladki { display: flex; gap: 4px; border-bottom: 1px solid var(--linia); }
.mk-zakl { padding: 7px 12px; font-size: 13px; color: var(--atrament-cichy); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; transition: color .25s, border-color .25s; }
.mk-zakl.aktywna { color: var(--atrament); border-bottom-color: var(--zloto); font-weight: 600; }
.mk-licznik { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--zloto); color: #15171c; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
.mk-h { font-size: 15px; margin: 0 0 8px; }
.mk-tabela-wrap { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 12px; padding: 12px; }
.mk-tabela { font-size: 12.5px; border: 0; }
.mk-tabela th, .mk-tabela td { padding: 7px 9px; } .mk-tabela th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.mk-tabela td.r, .mk-tabela th.r { text-align: right; }
.mk-tabela tr { transition: background-color .35s; }
.mk-tabela tr.mk-zaznaczony, .mk-wiersz.mk-zaznaczony { background: var(--akcent-tlo); }
.mk-tabela .plakietka-stan, .mk-lista .plakietka-stan { font-size: 11px; }
.mk-lista { display: grid; gap: 7px; }
.mk-wiersz { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linia); border-radius: 12px; background: var(--powierzchnia); font-size: 13px; transition: background-color .3s, border-color .3s, transform .2s; }
.mk-w-glowne { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .mk-w-glowne .drobne { font-size: 11.5px; }
.mk-w-prawo { display: flex; align-items: center; gap: 10px; flex: none; }
.mk-kwota { font-variant-numeric: tabular-nums; }
.mk-awatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--akcent-tlo); color: var(--zloto-ciemne); font-weight: 700; flex: none; }
.mk-box { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--linia); display: inline-block; vertical-align: middle; margin-right: 6px; transition: background-color .2s, border-color .2s; flex: none; }
.mk-box.jest { background: var(--zloto); border-color: var(--zloto); box-shadow: inset 0 0 0 2px var(--powierzchnia); }
.mk-karta { padding: 14px 16px; border-radius: 14px; }
.mk-karta-nagl { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .mk-karta-nagl h3 { margin: 0; font-size: 15px; }
.mk-karta-nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--akcent-tlo); color: var(--zloto-ciemne); font-weight: 700; font-size: 12px; }
.mk-siatka-pol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
.mk-pole { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mk-pole.szer { grid-column: 1 / -1; }
.mk-et { font-size: 12px; font-weight: 500; color: var(--atrament-cichy); }
.mk-input { position: relative; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--linia); border-radius: 9px; background: var(--powierzchnia); font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.mk-input.fokus { border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.22); }
.mk-input .mk-wart { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-input .mk-wart.ph { color: var(--atrament-cichy); opacity: .8; }
.mk-input.fokus .mk-wart::after { content: "|"; color: var(--zloto-ciemne); animation: sc-migot 1s steps(2) infinite; }
@keyframes sc-migot { to { opacity: 0; } }
.mk-select::after { content: "▾"; color: var(--atrament-cichy); font-size: 11px; }
.mk-obszar { min-height: 56px; align-items: flex-start; } .mk-obszar .mk-wart { white-space: normal; }
.mk-in-btn { flex: none; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--linia); font-size: 11.5px; background: var(--papier); }
.mk-pod { font-size: 11px; }
.mk-przel { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; }
.mk-przel-tor { width: 34px; height: 20px; border-radius: 999px; background: var(--linia); position: relative; transition: background-color .25s; flex: none; }
.mk-przel-tor::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ruch-krzywa); }
.mk-przel.jest .mk-przel-tor { background: var(--zloto); } .mk-przel.jest .mk-przel-tor::after { transform: translateX(14px); }
.mk-segment { display: inline-flex; border: 1px solid var(--linia); border-radius: 9px; overflow: hidden; width: max-content; }
.mk-seg { padding: 6px 14px; font-size: 12.5px; transition: background-color .25s, color .25s; } .mk-seg.aktywny { background: var(--akcent); color: #fff; }
.mk-wybor { display: grid; grid-template-columns: repeat(var(--kol, 4), minmax(0, 1fr)); gap: 8px; }
.mk-ramka.waska .mk-wybor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-opcja { display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border: 1px solid var(--linia); border-radius: 11px; background: var(--powierzchnia); font-size: 12.5px; transition: border-color .25s, background-color .25s, box-shadow .25s, transform .2s; }
.mk-opcja .drobne { font-size: 11px; line-height: 1.35; } .mk-opcja code { font-size: 10.5px; color: var(--zloto-ciemne); }
.mk-opcja.wybrany { border-color: var(--zloto); background: var(--akcent-tlo); box-shadow: 0 0 0 2px rgba(201,178,107,.35); }
.mk-opcja.wylaczony { opacity: .5; }
.mk-droga { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mk-droga li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; position: relative; }
.mk-droga li + li::before { content: ""; position: absolute; left: 8px; top: -12px; height: 12px; width: 2px; background: var(--linia); }
.mk-droga-t { display: flex; flex-direction: column; gap: 1px; }
.mk-droga-kropka { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linia); background: var(--powierzchnia); flex: none; transition: background-color .35s, border-color .35s, box-shadow .35s; }
.mk-droga li.mk-s-ok .mk-droga-kropka { background: #3b8b5a; border-color: #3b8b5a; box-shadow: 0 0 0 3px rgba(59,139,90,.16); }
.mk-droga li.mk-s-toku .mk-droga-kropka { border-color: var(--zloto); background: var(--akcent-tlo); animation: gz-puls-miekki 2.4s ease-in-out infinite; }
.mk-droga li.mk-s-nie .mk-droga-kropka { background: var(--blad); border-color: var(--blad); }
.mk-droga li:not(.mk-s-ok):not(.mk-s-toku):not(.mk-s-nie) { color: var(--atrament-cichy); }
.mk-strefa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 2px dashed var(--zloto); border-radius: 14px; background: var(--akcent-tlo); text-align: center; font-size: 13px; transition: transform .25s, box-shadow .25s; }
.mk-strefa.nad { transform: scale(1.01); box-shadow: 0 0 0 4px rgba(201,178,107,.2); }
.mk-strefa-ik { width: 34px; height: 42px; border: 2px solid var(--zloto-ciemne); border-radius: 5px; background: var(--powierzchnia); position: relative; }
.mk-strefa-ik::after { content: ""; position: absolute; right: -2px; top: -2px; width: 11px; height: 11px; background: var(--akcent-tlo); border-left: 2px solid var(--zloto-ciemne); border-bottom: 2px solid var(--zloto-ciemne); }
.mk-pliki { width: 100%; display: grid; gap: 6px; margin-top: 6px; }
.mk-plik { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; background: var(--powierzchnia); border: 1px solid var(--linia); font-size: 12px; text-align: left; }
.mk-pasek { width: 120px; height: 6px; border-radius: 999px; background: var(--linia); overflow: hidden; } .mk-pasek i { display: block; height: 100%; width: 0; background: #3b8b5a; }
.mk-plik.mk-wchodzi .mk-pasek i { animation: sc-pasek 1.4s ease-out .2s forwards; }
@keyframes sc-pasek { to { width: 100%; } }
.mk-rozmowa { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--powierzchnia); border: 1px solid var(--linia); }
.mk-dymek-w { display: flex; flex-direction: column; max-width: 76%; } .mk-dymek-w.moj { align-self: flex-end; align-items: flex-end; }
.mk-dymek { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--linia); background: var(--papier); font-size: 13px; line-height: 1.4; }
.mk-dymek-w.moj .mk-dymek { background: var(--akcent-tlo); border-color: rgba(201,178,107,.5); border-bottom-right-radius: 4px; }
.mk-dymek-w.biuro .mk-dymek { border-bottom-left-radius: 4px; background: #fbf7ec; border-color: #eadfbf; }
:root[data-motyw="ciemny"] .mk-dymek-w.biuro .mk-dymek { background: #2a2618; border-color: #4a4128; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .mk-dymek-w.biuro .mk-dymek { background: #2a2618; border-color: #4a4128; } }
.mk-dymek-meta { font-size: 10.5px; }
.mk-cytat { padding: 4px 8px; border-left: 3px solid var(--zloto); border-radius: 4px; background: rgba(201,178,107,.12); font-size: 11.5px; color: var(--atrament-cichy); }
.mk-zal { display: inline-flex; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--linia); background: var(--powierzchnia); font-size: 11.5px; width: max-content; }
.mk-reakcja { margin-top: -6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--zloto); background: var(--powierzchnia); font-size: 11.5px; width: max-content; }
.mk-pisze { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--atrament-cichy); }
.mk-pisze i { width: 5px; height: 5px; border-radius: 50%; background: var(--atrament-cichy); animation: kropka 1.2s infinite; } .mk-pisze i:nth-child(3) { animation-delay: .15s; } .mk-pisze i:nth-child(4) { animation-delay: .3s; }
.mk-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; } .mk-dl dt { color: var(--atrament-cichy); } .mk-dl dd { margin: 0; font-weight: 500; }
.mk-duzo { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.mk-pasek-term { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 14px; overflow: hidden; border: 1px solid var(--linia); background: var(--powierzchnia); }
.mk-seg-term { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-left: 4px solid #3b8b5a; font-size: 13px; } .mk-seg-term + .mk-seg-term { border-top: 0; }
.mk-seg-term.mk-k-uwaga { border-left-color: var(--uwaga); } .mk-seg-term.mk-k-zle { border-left-color: var(--blad); } .mk-seg-term.mk-k-cichy { border-left-color: var(--linia); }
.mk-goly .mk-nav, .mk-goly .mk-firma, .mk-goly .mk-naglowek-prawa { display: none; }
.mk-prac-tylko { display: none !important; } .mk-pracownik .mk-prac-tylko { display: inline-flex !important; } .mk-pracownik .mk-inicjal.mk-prac-tylko { display: grid !important; } .mk-pracownik strong.mk-prac-tylko, .mk-pracownik span.mk-uz > span > span.mk-prac-tylko { display: block !important; } .mk-pracownik .mk-firma-tylko { display: none !important; }   /* 1.57.0 */
.mk-goly .mk-tresc-w { margin: 26px auto 0; padding: 22px 26px; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.08); }
.mk-goly .mk-tresc-w .karta { box-shadow: none; border: 0; padding: 0; }
.mk-wykres { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 6px; }
.mk-mies { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; position: relative; }
.mk-mies em { position: absolute; bottom: -16px; font-style: normal; font-size: 10px; color: var(--atrament-cichy); }
.mk-slupek { width: 40%; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: mk-rosnie .8s var(--ruch-krzywa) both; animation-delay: calc(var(--i, 0) * 60ms); }
.mk-slupek.a { background: var(--zloto); } .mk-slupek.b { background: rgba(28,35,51,.35); }
:root[data-motyw="ciemny"] .mk-slupek.b { background: rgba(232,230,223,.35); }
@keyframes mk-rosnie { from { transform: scaleY(0); } }
.mk-wykres + * { margin-top: 20px; }
.mk-okno-tlo { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(15,16,19,.45); }
.mk-okno { width: 420px; max-width: 90%; box-shadow: 0 30px 70px rgba(0,0,0,.35); } .mk-okno .mk-pole + .mk-pole { margin-top: 8px; } .mk-okno .mk-przyciski { margin-top: 12px; }
.mk-okno-tlo.mk-wchodzi .mk-okno { animation: mk-okno .35s var(--ruch-krzywa); }
@keyframes mk-okno { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.mk-toast { position: absolute; right: 18px; bottom: 18px; z-index: 6; max-width: 360px; padding: 10px 14px; border-radius: 12px; background: #15171c; color: #fff; border-left: 4px solid var(--zloto); font-size: 12.5px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.mk-toast.mk-wchodzi { animation: mk-toast .45s var(--ruch-krzywa); } @keyframes mk-toast { from { opacity: 0; transform: translateY(14px); } }
.mk-siatka { display: grid; gap: 12px; align-items: start; } .mk-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-ramka.waska .mk-siatka { grid-template-columns: 1fr !important; }
.mk-kwoty { display: grid; gap: 6px; } .mk-kw { display: flex; justify-content: space-between; font-size: 13px; } .mk-kw.razem { padding-top: 6px; border-top: 1px dashed var(--linia); font-size: 15px; }
.mk-kwoty.zwrot .mk-kw.razem strong { color: #2f7048; } .mk-kwoty.doplata .mk-kw.razem strong { color: var(--blad); }
.mk-arkusz { position: relative; padding: 16px 18px; border-radius: 6px; background: #fff; color: #1c1c1c; border: 1px solid var(--linia); box-shadow: 0 10px 26px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 8px; min-height: 210px; }
.mk-ark-gora { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #c9b26b; padding-bottom: 6px; } .mk-ark-gora .cicho { color: #6b6b6b; }
.mk-ark-linia { display: block; height: 7px; border-radius: 999px; background: #e7e5df; }
.mk-ark-suma { margin-top: auto; align-self: flex-end; font-weight: 700; font-size: 15px; }
.mk-qr { position: absolute; left: 18px; bottom: 16px; width: 58px; height: 58px; padding: 3px; background: #fff; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .4s var(--ruch-krzywa); }
.mk-qr svg { display: block; }
.mk-qr.jest { opacity: 1; transform: none; }
/* stany animacji */
.mk-ukryty { display: none !important; }
.mk-wchodzi { animation: mk-wchodzi .45s var(--ruch-krzywa); }
@keyframes mk-wchodzi { from { opacity: 0; transform: translateY(10px); } }
tr.mk-wchodzi { animation: mk-wiersz 1.6s var(--ruch-krzywa); } @keyframes mk-wiersz { 0% { opacity: 0; background: rgba(201,178,107,.35); } 30% { opacity: 1; } 100% { background: transparent; } }
.mk-klik { animation: mk-klik .38s var(--ruch-krzywa); }
@keyframes mk-klik { 0% { transform: scale(1); } 40% { transform: scale(.96); box-shadow: 0 0 0 5px rgba(201,178,107,.45); } 100% { transform: scale(1); } }
.mk-blysk { animation: mk-blysk 1.2s ease-out; } @keyframes mk-blysk { 0% { background: rgba(201,178,107,.45); } 100% { background: transparent; } }
.mk-pop { animation: zp-pop .45s var(--ruch-krzywa); }
.mk-kursor { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(.45,.05,.25,1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.mk-kursor::after { content: ""; position: absolute; left: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--zloto); opacity: 0; }
.mk-kursor.klik::after { animation: mk-fala .5s ease-out; } @keyframes mk-fala { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .mk-ekran, .mk-ekran *, .mk-kursor, .prz-krok, .pom-kafle li, .pom-wynik { animation: none !important; transition: none !important; } .pom-kafle li, .pom-wynik { opacity: 1; transform: none; } }
/* co nowego */
.cn-lista { display: flex; flex-direction: column; gap: 1rem; }
.cn-tydzien { opacity: 0; transform: translateY(10px); animation: wjazd .5s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 80ms); margin: 0; }
.cn-naglowek { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; } .cn-naglowek h2 { margin: 0; font-size: 1.05rem; }
.cn-wpis + .cn-wpis { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--linia); }
.cn-data { margin-bottom: .35rem; }
.cn-punkty { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.cn-punkty li { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; align-items: baseline; }
.cn-modul { font-weight: 600; color: var(--zloto-ciemne); }
@media (max-width: 40rem) { .cn-punkty li { grid-template-columns: 1fr; gap: .15rem; } }

.ust-most { margin-bottom: 1rem; }
.ust-most.alarm { border-color: var(--blad); box-shadow: 0 0 0 3px rgba(226,106,99,.18); }

/* Pomoc w nawigacji i naglowku */
.nav-kropka { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--zloto); vertical-align: middle; margin-left: .3rem; box-shadow: 0 0 0 3px rgba(201,178,107,.25); animation: gz-puls-miekki 2.4s ease-in-out infinite; }
.naglowek-pomoc { position: relative; display: inline-flex; align-items: center; }
.naglowek-pomoc .ik { width: 1.2rem; height: 1.2rem; }
.naglowek-pomoc .nav-kropka { position: absolute; top: -.1rem; right: -.35rem; margin: 0; width: .45rem; height: .45rem; }


/* ===== Zgloszenia — lista jako karty rozmow (zywa) ===== */
.zg-pasek { margin: .25rem 0 .6rem; }
.zg-nowe-licznik { color: var(--zloto-ciemne); }
.zg-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.zg-karta { opacity: 0; transform: translateY(8px); animation: wjazd .45s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 40ms); }
html.js:not(.bez-animacji) .zg-lista > li[data-ujaw] { opacity: 1; transform: none; }
.zg-karta > a { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .9rem; align-items: start; padding: .85rem 1rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); color: var(--atrament); text-decoration: none; transition: transform .25s var(--ruch-krzywa), border-color .25s var(--ruch-krzywa), box-shadow .25s var(--ruch-krzywa); }
.zg-karta > a:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.zg-karta.nowe > a { border-left: 4px solid var(--zloto); background: linear-gradient(90deg, var(--akcent-tlo) 0%, var(--powierzchnia) 22%); }
.zg-karta.stan-zamknieta > a { opacity: .8; }
.zg-karta.zmiana > a { animation: zg-blysk 1.2s ease-out; }
.zg-awatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; }
.zg-awatar.biuro { background: #15171c; color: var(--zloto); border: 1px solid rgba(201,178,107,.5); }
.zg-awatar.klient { background: var(--akcent-tlo); color: var(--zloto-ciemne); border: 1px solid rgba(201,178,107,.5); }
.zg-tresc { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.zg-gora { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.zg-temat { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-nr { color: var(--atrament-cichy); font-weight: 500; }
.zg-czas { flex: none; font-size: .8rem; color: var(--atrament-cichy); white-space: nowrap; }
.zg-karta.nowe .zg-czas { color: var(--zloto-ciemne); font-weight: 600; }
.zg-firma { font-size: .85rem; color: var(--atrament-cichy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-skrot { font-size: .9rem; color: var(--atrament); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-karta:not(.nowe) .zg-skrot { color: var(--atrament-cichy); }
.zg-kto { font-weight: 600; }
.zg-dol { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.zg-nowe .stan-kropka { animation: gz-puls-miekki 2.4s ease-in-out infinite; }
.zg-prowadzi { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.zg-strzalka { align-self: center; color: var(--zloto-ciemne); transition: transform .25s var(--ruch-krzywa); }
.zg-karta > a:hover .zg-strzalka { transform: translateX(3px); }
.zg-pusto { display: flex; align-items: center; gap: .9rem; padding: 1.25rem; border: 1px dashed var(--linia); border-radius: var(--promien); color: var(--atrament-cichy); }
.plakietka-stan.zlota { border-color: var(--zloto); color: var(--zloto-ciemne); background: var(--akcent-tlo); } .plakietka-stan.zlota .stan-kropka { background: var(--zloto); }
@media (max-width: 40rem) { .zg-karta > a { grid-template-columns: 2.2rem 1fr; } .zg-strzalka { display: none; } .zg-gora { flex-direction: column; gap: .1rem; } }


/* ===== Faktura z KSeF: "nie ksieguj" w prawej kolumnie + zywe przyciski ===== */
.fd-decyzja { border-left: 4px solid var(--zloto); }
.fd-nie-ksieguj summary { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .7rem; align-items: center; padding: .25rem 0; border-radius: var(--promien); transition: background-color .2s; }
.fd-nie-ksieguj summary:hover { background: var(--akcent-tlo); }
.fd-nk-ikona { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--akcent-tlo); color: var(--zloto-ciemne); border: 1px solid rgba(201,178,107,.5); transition: transform .25s var(--ruch-krzywa); }
.fd-nk-ikona .ik { width: 1.1rem; height: 1.1rem; }
.fd-nie-ksieguj summary:hover .fd-nk-ikona { transform: scale(1.08); }
.fd-nk-tekst { display: flex; flex-direction: column; gap: .1rem; font-weight: 400; }
.fd-nk-strzalka { color: var(--atrament-cichy); transition: transform .25s var(--ruch-krzywa); }
.fd-nie-ksieguj[open] .fd-nk-strzalka { transform: rotate(180deg); }
/* przyciski-akcje na karcie: uniesienie, cien, ruch ikony */
.fd-zgloszenie, .fd-podglad-akcje .przycisk-link { transition: transform .2s var(--ruch-krzywa), box-shadow .2s var(--ruch-krzywa), border-color .2s, background-color .2s; }
.fd-zgloszenie:hover, .fd-podglad-akcje .przycisk-link:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 8px 20px rgba(0,0,0,.10); background: var(--akcent-tlo); }
.fd-zgloszenie:hover .ik { animation: fd-koperta .5s var(--ruch-krzywa); }
@keyframes fd-koperta { 0% { transform: none; } 40% { transform: translateY(-3px) rotate(-8deg); } 100% { transform: none; } }
.fd-zgloszenie:active, .fd-podglad-akcje .przycisk-link:active { transform: translateY(0) scale(.98); }
/* znacznik zaplaty — hover mowi "dziala": zlota obwodka kolka, lekkie uniesienie, kursor */
button.zaplata:not(:disabled) { cursor: pointer; }
button.zaplata.duza:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.10); border-color: var(--zloto); }
button.zaplata:not(:disabled):hover .zp-znak { transform: scale(1.12); border-color: var(--zloto-ciemne); box-shadow: 0 0 0 4px rgba(201,178,107,.25); }
button.zaplata.jest:not(:disabled):hover .zp-znak { box-shadow: 0 0 0 4px rgba(59,139,90,.2); }
button.zaplata:not(:disabled):active .zp-znak { transform: scale(.95); }

/* droga faktury: krok "w toku" czytelny takze bez animacji (RDP, reduced-motion) — zlote pol-kolko + tekst */
.fd-droga li.toku .fd-kropka { background: linear-gradient(90deg, var(--zloto) 50%, var(--akcent-tlo) 50%); border-color: var(--zloto-ciemne); }
.fd-droga li.toku strong::after { content: " · w toku"; color: var(--zloto-ciemne); font-weight: 500; font-size: .8rem; }


/* ===== Dokumenty prawne: strona, brama akceptacji, wydruk ===== */
.dp-uklad { max-width: 56rem; margin: 0 auto; }
body.dokument-publiczny .tresc { color: var(--atrament); }
body.dokument-publiczny .dp-uklad { background: var(--papier); border-radius: 16px; padding: 1.5rem 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); max-width: 60rem; }
.dp-tytul { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.dp-akcje { display: flex; gap: .75rem; align-items: center; } .dp-akcje button { width: auto; margin: 0; }
.dp-tresc { line-height: 1.6; }
.dp-tresc h1 { font-size: 1.35rem; margin: 0 0 .5rem; } .dp-tresc h2 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--linia); color: var(--zloto-ciemne); } .dp-tresc h3 { font-size: .95rem; margin: 1rem 0 .3rem; }
.dp-tresc ol, .dp-tresc ul { padding-left: 1.4rem; } .dp-tresc li { margin: .3rem 0; }
.dp-tresc table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .75rem 0; } .dp-tresc th, .dp-tresc td { border: 1px solid var(--linia); padding: .4rem .55rem; text-align: left; vertical-align: top; } .dp-tresc th { background: var(--akcent-tlo); }
.dp-stopka { text-align: center; margin-top: 1rem; }
/* brama */
body.akceptacja .tresc { place-items: start center; padding-top: 2rem; }
.ak-uklad { width: 100%; max-width: 74rem; color: #e9e4d6; transition: opacity .35s var(--ruch-krzywa), transform .35s var(--ruch-krzywa); }
.ak-uklad.wychodzi { opacity: 0; transform: translateY(-8px); }
.ak-naglowek { text-align: center; margin-bottom: 1.25rem; animation: wjazd .6s var(--ruch-krzywa) both; }
.ak-naglowek img { width: min(100%, 200px); height: auto; margin-bottom: 1rem; }
.ak-naglowek h1 { color: #fff; font-size: 1.6rem; margin: 0 0 .3rem; } .ak-naglowek p { color: #cfc9b8; margin: 0 auto; max-width: 44rem; }
.ak-siatka { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 64rem) { .ak-siatka { grid-template-columns: 1fr; } .ak-karta { position: static !important; } }
.ak-dokumenty { background: var(--papier); color: var(--atrament); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; animation: wjazd .55s var(--ruch-krzywa) .1s both; }
.ak-zakladki { display: flex; gap: .25rem; padding: .6rem .6rem 0; border-bottom: 1px solid var(--linia); background: var(--powierzchnia); }
.ak-zakladka { width: auto; margin: 0; padding: .6rem 1rem; border: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; background: transparent; color: var(--atrament-cichy); font: inherit; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.ak-zakladka:hover { color: var(--atrament); background: var(--akcent-tlo); } .ak-zakladka.aktywna { color: var(--atrament); border-bottom-color: var(--zloto); }
.ak-panel { display: none; } .ak-panel.aktywny { display: block; animation: wjazd .3s var(--ruch-krzywa); }
.ak-pasek-postepu { height: 3px; background: var(--linia); } .ak-pasek-postepu span { display: block; height: 100%; width: 0; background: var(--zloto); transition: width .2s linear; }
.ak-okno { height: min(62vh, 44rem); overflow: auto; padding: 1.25rem 1.5rem; scroll-behavior: smooth; }
.ak-okno:focus-visible { outline: 2px solid var(--zloto); outline-offset: -2px; }
.ak-pod { margin: 0; padding: .6rem 1.5rem; border-top: 1px solid var(--linia); background: var(--powierzchnia); }
.ak-karta { position: sticky; top: 1.5rem; background: linear-gradient(160deg, #1f2026 0%, #16171b 100%); border: 1px solid rgba(201,178,107,.35); border-radius: 16px; padding: 1.25rem 1.35rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: wjazd .55s var(--ruch-krzywa) .2s both; }
.ak-karta p { color: #cfc9b8; }
.ak-krok.ukryty { display: none; }
.ak-zgoda { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; cursor: pointer; color: #e9e4d6; font-weight: 400; margin: 0 0 .9rem; padding: .9rem; border: 1px solid rgba(201,178,107,.3); border-radius: 12px; transition: border-color .25s, background-color .25s; }
.ak-zgoda:hover { border-color: var(--zloto); background: rgba(201,178,107,.06); }
.ak-zgoda input { position: absolute; opacity: 0; width: 0; height: 0; }
.ak-kwadrat { width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 2px solid rgba(201,178,107,.6); display: grid; place-items: center; color: transparent; transition: background-color .25s var(--ruch-krzywa), border-color .25s, color .25s, transform .25s var(--ruch-krzywa); }
.ak-kwadrat .ik { width: 1rem; height: 1rem; }
.ak-zgoda input:checked + .ak-kwadrat { background: var(--zloto); border-color: var(--zloto); color: #15171c; animation: zp-pop .45s var(--ruch-krzywa); }
.ak-zgoda input:focus-visible + .ak-kwadrat { outline: 2px solid var(--zloto); outline-offset: 2px; }
.ak-zgoda strong { color: #fff; }
.ak-info { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; font-size: .9rem; margin: 0 0 1rem; padding: 0 .9rem; }
.ak-info-ikona { width: 1.6rem; height: 1.6rem; border-radius: 6px; display: grid; place-items: center; color: var(--zloto); } .ak-info-ikona .ik { width: 1rem; height: 1rem; }
.ak-dalej { width: 100%; font-size: 1.02rem; padding: .85rem 1rem; transition: transform .2s var(--ruch-krzywa), box-shadow .2s var(--ruch-krzywa), opacity .2s; }
.ak-dalej:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.ak-dalej:disabled { opacity: .45; cursor: not-allowed; }
.ak-czas { text-align: right; }
.ak-wyloguj { margin-top: .6rem; text-align: center; } .ak-wyloguj .link { color: #a9a494; }
body.akceptacja .nawigacja, body.akceptacja .naglowek-link:not(.link), body.akceptacja .dzwonek, body.akceptacja .naglowek-firma, body.akceptacja .naglowek-pomoc, body.akceptacja .hf-firma-wrap, body.akceptacja .hf-firma-stala, body.akceptacja .hf-konto-link { display: none; }


/* ===== Dziennik i wyslane wiadomosci (admin) ===== */
.filtry-dziennik { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin: .5rem 0 .75rem; }
.filtry-dziennik label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--atrament-cichy); }
.filtry-dziennik label.rosnie { flex: 1 1 16rem; } .filtry-dziennik button { width: auto; margin: 0; }
.tabela-dziennik td { vertical-align: top; }
.dz-biuro td:first-child { border-left: 3px solid var(--zloto); }
.dz-uwaga td:first-child { border-left: 3px solid var(--blad); }
.dz-szczegoly summary { cursor: pointer; list-style: none; } .dz-szczegoly pre { font-size: .75rem; max-width: 28rem; white-space: pre-wrap; margin: .3rem 0 0; background: var(--papier); padding: .4rem .6rem; border-radius: 6px; }
/* 1.40.3: usunieta stara regula .strony (space-between) — rozrzucala numery stron KSeF po calej szerokosci */
.poczta-ramka { border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; background: #fff; } .poczta-ramka iframe { width: 100%; height: 40rem; border: 0; display: block; }
.poczta-tekst { white-space: pre-wrap; font-size: .9rem; background: var(--papier); padding: 1rem; border-radius: var(--promien); }

/* pozycje deklaracji: sekcje i podsumowania (1.7.1) */
.tabela-pozycje .poz-sekcja td { background: var(--akcent-tlo); color: var(--zloto-ciemne); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding-top: .55rem; padding-bottom: .45rem; }
.tabela-pozycje .poz-podsumowanie td { font-weight: 700; border-top: 2px solid var(--zloto); }

.dek-akcje { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }


/* ===== Prosby biura (1.10.0) ===== */
.pr-karta { border-left: 4px solid var(--zloto); }
.pr-karta.po-terminie { border-left-color: var(--blad); }
.pr-naglowek { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pr-termin-minal { color: var(--blad); }
.pr-postep { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.pr-pasek { display: inline-block; width: 7rem; height: .45rem; border-radius: 999px; background: var(--linia); overflow: hidden; }
.pr-pasek span { display: block; height: 100%; background: #3b8b5a; transition: width .5s var(--ruch-krzywa); }
.pr-postep.mini .pr-pasek { width: 4rem; }
.pr-skutek { margin: .25rem 0 .75rem; padding: .5rem .75rem; background: var(--akcent-tlo); border-radius: var(--promien); font-size: .92rem; }
.pr-pozycje { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.pr-pozycja { display: grid; grid-template-columns: 1.6rem 1fr; gap: .75rem; padding: .65rem .75rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); opacity: 0; transform: translateY(6px); animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 50ms); }
.pr-kratka { width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 2px solid var(--linia); display: grid; place-items: center; font-weight: 800; color: transparent; transition: background-color .3s, border-color .3s, color .3s; }
.pr-kratka .ik { width: 1rem; height: 1rem; }
.pr-pozycja.stan-dostarczona .pr-kratka { background: var(--akcent-tlo); border-color: var(--zloto); color: var(--zloto-ciemne); }
.pr-pozycja.stan-przyjeta .pr-kratka { background: #3b8b5a; border-color: #3b8b5a; color: #fff; animation: zp-pop .45s var(--ruch-krzywa); }
.pr-pozycja.stan-odrzucona .pr-kratka { border-color: var(--blad); color: var(--blad); }
.pr-pozycja.stan-odrzucona { border-color: rgba(226,106,99,.5); }
.pr-tresc { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pr-linia { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pr-odp { margin: 0; color: var(--atrament-cichy); font-style: italic; }
.pr-uwaga { margin: 0; color: var(--blad); font-size: .9rem; }
.pr-dostarcz summary { cursor: pointer; list-style: none; width: fit-content; } .pr-dostarcz summary::-webkit-details-marker { display: none; }
.pr-form { margin-top: .5rem; padding: .75rem; background: var(--papier); border-radius: var(--promien); }
.pr-form label { margin-bottom: .5rem; }
.pr-biuro { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; } .pr-biuro button { width: auto; margin: 0; } .pr-biuro input { flex: 1 1 14rem; }
.pr-wszystko { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .9rem; } .pr-wszystko button { width: auto; margin: 0; }
.pr-dostarczono { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; }
.pr-adresaci { margin: .6rem 0 0; }
/* pulpit */
.pr-pulpit { border-top: 4px solid var(--zloto); }
.pr-pulpit-naglowek { display: flex; align-items: center; gap: .85rem; margin-bottom: .5rem; } .pr-pulpit-naglowek h2 { margin: 0; }
.ust-ikona.zlota { background: var(--zloto); color: #15171c; }
.pr-pulpit-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.pr-pulpit-wiersz { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: .65rem .85rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); color: var(--atrament); text-decoration: none; transition: transform .25s var(--ruch-krzywa), border-color .25s, box-shadow .25s; }
.pr-pulpit-wiersz:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.pr-pulpit-wiersz.nowe { background: linear-gradient(90deg, var(--akcent-tlo) 0%, var(--powierzchnia) 30%); }
.pr-pulpit-tresc { display: flex; flex-direction: column; gap: .1rem; }
/* formularz biura */
.pn-uklad { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .pn-uklad { grid-template-columns: 1fr; } }
.pn-naglowek { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; } .pn-naglowek .link { margin-left: auto; }
.pn-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 40rem) { .pn-dwa { grid-template-columns: 1fr; } }
.pn-przypomnienia { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center; }
.pn-przypomnienia > .cicho { grid-column: 1; } .pn-przypomnienia > .przelacznik { grid-column: 2; grid-row: 1 / 3; }
.pn-adresaci { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.pn-osoba { color: var(--atrament); border-color: var(--linia); margin: 0; padding: .55rem .7rem; } .pn-osoba strong { color: var(--atrament); }
.pn-osoba:hover { background: var(--akcent-tlo); }
.pn-adresaci li.pn-auto .pn-osoba { border-color: var(--zloto); }
.pn-akcje { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; } .pn-akcje button { width: auto; margin: 0; }
.pn-podglad { position: sticky; top: 1rem; }
.pn-karta-podglad { border: 1px solid var(--linia); border-left: 4px solid var(--zloto); border-radius: var(--promien); padding: .85rem 1rem; background: var(--powierzchnia); display: flex; flex-direction: column; gap: .35rem; }
.pn-karta-podglad ol { margin: .25rem 0 0; padding-left: 1.2rem; }
.pn-klient { display: flex; gap: .5rem; align-items: flex-end; } .pn-klient label { flex: 1; } .pn-klient button { width: auto; margin: 0; }
.zakladka-akcja { margin-left: auto; color: var(--zloto-ciemne); font-weight: 600; }
.pr-obszary { display: flex; gap: .3rem; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.pr-obszary .pigulka { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border: 1px solid var(--linia); border-radius: 999px; font-size: .82rem; }
.pr-obszary .pigulka:has(input:checked) { border-color: var(--zloto); background: var(--akcent-tlo); }
.pr-obszary-etykieta { display: block; margin-top: .5rem; }

.fak-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 40rem) { .fak-dwa { grid-template-columns: 1fr; } }
.fak-pole small { display: block; margin-top: .2rem; }

.blad-blysk { animation: zg-blysk 1.2s ease-out; }

.rozl-rachunek { font-size: 1.05rem; letter-spacing: .04em; }
.ust-podtytul { margin: 1rem 0 .25rem; font-size: .95rem; }


/* ===== KSeF: przyciski akcji w wierszu (1.12.4) — dwa rozne, oba animowane; zadnego "czarny bez napisu" ===== */
.tabela-ksef .kol-akcja { width: 8.5rem; white-space: nowrap; }
.tabela-ksef .kol-stan .plakietka { white-space: normal; line-height: 1.25; }
.tabela-ksef .akcja-pil, .tabela-ksef .decyzja-szybka summary.akcja-pil { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .38rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament-cichy); transition: transform .2s var(--ruch-krzywa), box-shadow .2s, border-color .2s, background-color .2s, color .2s; }
.tabela-ksef .decyzja-szybka summary.akcja-pil::before { content: none; }
.tabela-ksef .akcja-pil .ak-ik { font-weight: 800; line-height: 1; transition: transform .25s var(--ruch-krzywa); }
.tabela-ksef tr:hover .akcja-pil.nk { border-color: var(--atrament-cichy); color: var(--atrament); }
.tabela-ksef .akcja-pil.nk:hover, .tabela-ksef tr:hover .akcja-pil.nk:hover { background: var(--akcent-tlo); border-color: var(--atrament); color: var(--atrament); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.10); }
.tabela-ksef .akcja-pil.nk:hover .ak-ik { transform: rotate(90deg); }
.tabela-ksef .decyzja-szybka[open] summary.akcja-pil { background: var(--ciemny); color: #fff; border-color: var(--ciemny); }
.tabela-ksef .akcja-pil.zg { color: var(--zloto-ciemne); border-color: rgba(201,178,107,.6); }
.tabela-ksef tr:hover .akcja-pil.zg { border-color: var(--zloto); }
.tabela-ksef .akcja-pil.zg:hover, .tabela-ksef tr:hover .akcja-pil.zg:hover { background: var(--akcent-tlo); border-color: var(--zloto-ciemne); color: var(--zloto-ciemne); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(201,178,107,.25); }
.tabela-ksef .akcja-pil.zg:hover .ak-ik { transform: translate(2px, -2px); }
@media (max-width: 64rem) { .tabela-ksef .kol-stan { width: 9rem; } .tabela-ksef .kol-akcja { width: 7.5rem; } .tabela-ksef .akcja-pil, .tabela-ksef .decyzja-szybka summary.akcja-pil { padding: .34rem .6rem; font-size: .78rem; } }


/* ===== KSeF: okno "Nie ksieguj" (1.12.5) — modal, kazda rozdzielczosc, animowane ===== */
.nk-dialog { border: 0; padding: 0; background: transparent; max-width: min(34rem, calc(100vw - 2rem)); width: 100%; }
.nk-dialog::backdrop { background: rgba(21,23,28,.55); backdrop-filter: blur(3px); animation: nk-tlo .2s ease-out; }
.nk-dialog[open] .nk-form { animation: nk-wejscie .28s var(--ruch-krzywa); }
.nk-dialog.zamykanie .nk-form { animation: nk-wyjscie .18s ease-in forwards; }
.nk-dialog.zamykanie::backdrop { animation: nk-tlo .18s ease-in reverse; }
@keyframes nk-wejscie { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nk-wyjscie { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes nk-tlo { from { opacity: 0; } to { opacity: 1; } }
.nk-form { background: var(--powierzchnia); color: var(--atrament); border-radius: 16px; padding: 1.25rem 1.35rem 1.15rem; box-shadow: 0 30px 70px rgba(0,0,0,.35); border-top: 4px solid var(--zloto); }
.nk-naglowek { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .9rem; } .nk-naglowek h2 { margin: 0 0 .2rem; font-size: 1.15rem; } .nk-naglowek p { margin: 0; }
.nk-ikona { flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--akcent-tlo); color: var(--atrament); font-weight: 800; font-size: 1.3rem; }
.nk-faktura { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; padding: .65rem .85rem; border: 1px solid var(--linia); border-left: 3px solid var(--zloto); border-radius: 10px; margin-bottom: .9rem; background: var(--papier); }
.nk-faktura strong { grid-column: 1; } .nk-faktura .cicho { grid-column: 1; font-size: .85rem; } .nk-kwota { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 700; }
.nk-form label { display: block; margin-bottom: .7rem; }
.nk-akcje { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; } .nk-akcje button { width: auto; margin: 0; }
@media (max-width: 40rem) { .nk-dialog { max-width: 100vw; width: 100vw; margin: auto 0 0; } .nk-form { border-radius: 16px 16px 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } .nk-akcje { flex-direction: column-reverse; } .nk-akcje button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .nk-dialog[open] .nk-form, .nk-dialog::backdrop { animation: none; } }


/* ===== Akceptacja dokumentow — poprawki graficzne 1.12.7 (jasny motyw: naglowek na jasnym tle; przycisk zloty) ===== */
body.akceptacja .tresc { padding-top: clamp(1.5rem, 3vh, 3rem); }
.ak-uklad { max-width: min(80rem, 92vw); color: var(--atrament); }
.ak-naglowek h1 { color: var(--atrament); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -.01em; }
.ak-naglowek p { color: var(--atrament-cichy); font-size: clamp(.98rem, .9rem + .25vw, 1.15rem); }
.ak-naglowek img { width: min(100%, clamp(180px, 14vw, 240px)); }
:root[data-motyw="ciemny"] .ak-naglowek h1 { color: #fff; } :root[data-motyw="ciemny"] .ak-naglowek p { color: #cfc9b8; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .ak-naglowek h1 { color: #fff; } :root:not([data-motyw="jasny"]) .ak-naglowek p { color: #cfc9b8; } }
.ak-okno { height: min(64vh, 52rem); font-size: clamp(.95rem, .9rem + .2vw, 1.08rem); line-height: 1.6; }
.ak-karta { padding: clamp(1.25rem, 1rem + .8vw, 1.9rem); }
.ak-karta p { color: #d9d4c4; }
/* przycisk: zloty na ciemnej karcie, z polyskiem i uniesieniem; wylaczony = jasny zarys, czytelny opis stanu */
.ak-dalej { background: linear-gradient(135deg, #e3cf8b 0%, var(--zloto) 55%, #b89d55 100%); color: #15171c; border: 0; font-weight: 700; font-size: clamp(1rem, .95rem + .2vw, 1.12rem); padding: .95rem 1.2rem; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(201,178,107,.25); }
.ak-dalej::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ruch-krzywa); }
.ak-dalej:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(201,178,107,.38); }
.ak-dalej:not(:disabled):hover::after { transform: translateX(120%); }
.ak-dalej:not(:disabled) { animation: ak-puls 1.2s var(--ruch-krzywa) 1; }
@keyframes ak-puls { 0% { box-shadow: 0 0 0 0 rgba(201,178,107,.55); } 100% { box-shadow: 0 10px 26px rgba(201,178,107,.25), 0 0 0 14px rgba(201,178,107,0); } }
.ak-dalej:disabled { background: transparent; color: #cfc9b8; border: 1px dashed rgba(201,178,107,.55); box-shadow: none; opacity: 1; cursor: not-allowed; }
.ak-dalej:disabled::after { display: none; }
.ak-czas { color: #cfc9b8; }
.ak-wyloguj .link { color: #cfc9b8; text-decoration-color: rgba(207,201,184,.5); } .ak-wyloguj .link:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .ak-dalej:not(:disabled) { animation: none; } .ak-dalej::after { display: none; } }

/* 1.12.8: sekcja z otwarta lista podpowiedzi nad sasiadami (warstwy z animacji ujawniania) */
.sekcja.wk-nad { position: relative; z-index: 60; }
.wk-lista { z-index: 70; box-shadow: 0 18px 40px rgba(0,0,0,.18); animation: wk-wejscie .18s var(--ruch-krzywa); }
@keyframes wk-wejscie { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* ===== Faktura klienta — szczegoly w ukladzie jak faktura z KSeF (1.13.0) ===== */
.fak-ramka iframe { background: #fff; }
.fak-ramka { aspect-ratio: 1 / 1.3; min-height: 34rem; }
.fak-akcje { display: flex; flex-direction: column; gap: .5rem; } .fak-akcje form { margin: 0; } .fak-akcje button, .fak-akcje .przycisk-link { width: 100%; margin: 0; justify-content: center; }
.fak-akcje .przycisk-link.glowny { display: inline-flex; align-items: center; gap: .45rem; background: var(--ciemny); color: #fff; padding: .7rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
.fak-akcje .przycisk-link.glowny:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.fak-akcje .przycisk-link.glowny .ik { width: 1rem; height: 1rem; }
/* 1.20.1: "Duplikuj fakture" na karcie — jasna karta ze zlota krawedzia, ikona w zlotym kolku, przeblysk i strzalka na hover (jak "Nowa faktura") */
.fak-akcje .fak-dup { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; width: 100%; padding: .7rem .9rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--powierzchnia); color: var(--atrament); text-decoration: none; text-align: left; transition: transform .22s var(--ruch-krzywa), box-shadow .22s var(--ruch-krzywa), border-color .22s; }
.fak-akcje .fak-dup::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(201,178,107,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ruch-krzywa); pointer-events: none; }
.fak-akcje .fak-dup:hover, .fak-akcje .fak-dup:focus-visible { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 12px 28px rgba(201,178,107,.28); }
.fak-akcje .fak-dup:hover::after { transform: translateX(120%); }
.fak-akcje .fak-dup:active { transform: translateY(0) scale(.99); }
.fak-dup-ik { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, #e3cf8b, var(--zloto)); color: #15171c; flex: none; transition: transform .3s var(--ruch-krzywa); }
.fak-dup-ik svg { width: 1.1rem; height: 1.1rem; }
.fak-akcje .fak-dup:hover .fak-dup-ik { transform: rotate(-8deg) scale(1.06); }
.fak-dup-tresc { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .fak-dup-tresc strong { font-weight: 700; } .fak-dup-tresc .cicho { white-space: normal; line-height: 1.3; }
.fak-akcje .fak-dup .zg-strzalka { transition: transform .2s var(--ruch-krzywa), color .2s; } .fak-akcje .fak-dup:hover .zg-strzalka { transform: translateX(3px); color: var(--zloto-ciemne); }
@media (prefers-reduced-motion: reduce) { .fak-akcje .fak-dup, .fak-akcje .fak-dup::after, .fak-dup-ik { transition: none; } }
.fd-uwagi { margin: .5rem 0 0; }
.fak-pozycje tbody tr { opacity: 0; transform: translateY(6px); animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.fak-pozycje tfoot td { border-top: 2px solid var(--zloto); padding-top: .6rem; }
.fak-korekty { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; } .fak-korekty li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .6rem; border: 1px solid var(--linia); border-radius: var(--promien); }
.fak-potwierdz-pasek { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-left: 4px solid var(--zloto); } .fak-potwierdz-pasek p { margin: 0; } .fak-potwierdz-pasek button { width: auto; margin: 0; }
.plakietka.cicha { background: var(--papier); color: var(--atrament-cichy); border: 1px solid var(--linia); }
@media (prefers-reduced-motion: reduce) { .fak-pozycje tbody tr { animation: none; opacity: 1; transform: none; } }


/* ===== Lista faktur klienta (1.13.1) ===== */
.fl-tytul { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.fl-akcje { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.fl-nowa { display: inline-flex; align-items: center; gap: .45rem; background: var(--ciemny); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; text-decoration: none; font-weight: 600; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
.fl-nowa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); } .fl-nowa .ik { width: 1rem; height: 1rem; }
.fl-pigulki { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.fl-pigulki .akcja-pil { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; padding: .34rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; text-decoration: none; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament-cichy); transition: transform .2s var(--ruch-krzywa), box-shadow .2s, border-color .2s, background-color .2s, color .2s; }
.fl-pigulki .akcja-pil.zg { color: var(--zloto-ciemne); border-color: rgba(201,178,107,.6); } .fl-pigulki .akcja-pil:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.10); background: var(--akcent-tlo); color: var(--atrament); }
.fl-kafle .kafel { opacity: 0; transform: translateY(8px); animation: wjazd .45s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
.kafel.blad-kafel { border-color: rgba(226,106,99,.55); }
.fl-filtry { align-items: end; } .fl-linki { display: inline-flex; gap: 1rem; align-items: center; margin-left: auto; } .fl-linki a { display: inline-flex; align-items: center; gap: .3rem; } .fl-linki .ik { width: .9rem; height: .9rem; }
.fl-lista { background: transparent; border: 0; display: flex; flex-direction: column; gap: .5rem; }
.fl-lista li + li { border-top: 0; }
.fl-lista li { opacity: 0; transform: translateY(6px); animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 40ms + 150ms); }
.fl-karta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "awatar glowne prawo strzalka"; align-items: center; gap: .9rem; padding: .8rem 1rem; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 12px; color: var(--atrament); text-decoration: none; transition: transform .22s var(--ruch-krzywa), box-shadow .22s, border-color .22s; }
.fl-karta:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 12px 28px rgba(0,0,0,.09); }
.fl-karta:hover .zg-strzalka { transform: translateX(3px); color: var(--zloto-ciemne); }
.fl-awatar { grid-area: awatar; } .fl-glowne { grid-area: glowne; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.fl-glowne .numer { font-weight: 700; } .fl-glowne .kontrahent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-prawo { grid-area: prawo; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; } .fl-prawo .kwota { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.fl-prawo .stan { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.fl-karta .zg-strzalka { grid-area: strzalka; transition: transform .2s var(--ruch-krzywa), color .2s; }
.plakietka-stan.toku .stan-kropka { animation: gz-puls-miekki 2.4s ease-in-out infinite; }
.stan-w_kolejce .fl-karta, .stan-wyslana .fl-karta, .stan-offline .fl-karta { border-left: 3px solid var(--zloto); }
.stan-odrzucona .fl-karta { border-left: 3px solid var(--blad); }
.stan-projekt .fl-karta { border-style: dashed; }
.fl-pusto { display: flex; align-items: center; gap: 1rem; } .fl-pusto p { margin: .15rem 0 0; }
@media (max-width: 40rem) { .fl-karta { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "awatar glowne strzalka" "prawo prawo prawo"; } .fl-prawo { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .fl-akcje { align-items: flex-start; } .fl-linki { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .fl-kafle .kafel, .fl-lista li { animation: none; opacity: 1; transform: none; } }

/* 1.13.2: pasek akcji faktur — "Nowa faktura" jako glowny punkt widoku, zlota, pod tytulem; bez czarnego hover */
.fl-pasek { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -.25rem 0 1rem; opacity: 0; transform: translateY(6px); animation: wjazd .45s var(--ruch-krzywa) forwards; }
.fl-pasek .fl-nowa, .fl-pasek .fl-nowa:hover, .fl-pasek .fl-nowa:focus { color: #15171c; }
.fl-pasek .fl-nowa { display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 14px; text-decoration: none; background: linear-gradient(135deg, #e3cf8b 0%, var(--zloto) 55%, #b89d55 100%); box-shadow: 0 10px 26px rgba(201,178,107,.28); border: 0; position: relative; overflow: hidden; transition: transform .22s var(--ruch-krzywa), box-shadow .22s; }
.fl-pasek .fl-nowa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ruch-krzywa); }
.fl-pasek .fl-nowa:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(201,178,107,.4); } .fl-pasek .fl-nowa:hover::after { transform: translateX(120%); }
.fl-pasek .fl-nowa:hover .zg-strzalka { transform: translateX(3px); }
.fl-nowa-ik { width: 2.3rem; height: 2.3rem; border-radius: 10px; background: rgba(21,23,28,.12); display: grid; place-items: center; } .fl-nowa-ik .ik { width: 1.2rem; height: 1.2rem; }
.fl-nowa-tekst { display: flex; flex-direction: column; line-height: 1.15; } .fl-nowa-tekst strong { font-size: 1.05rem; } .fl-nowa-tekst .drobne { opacity: .8; }
.fl-pasek .zg-strzalka { color: #15171c; opacity: .7; transition: transform .2s var(--ruch-krzywa); }
.fl-pasek .fl-pigulki { margin-left: .2rem; } .fl-dane { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; } .fl-dane .ik { width: .9rem; height: .9rem; }
.fl-pasek .akcja-pil { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; padding: .4rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament-cichy); transition: transform .2s var(--ruch-krzywa), box-shadow .2s, border-color .2s, background-color .2s, color .2s; }
.fl-pasek .akcja-pil.zg { color: var(--zloto-ciemne); border-color: rgba(201,178,107,.6); } .fl-pasek .akcja-pil:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.10); background: var(--akcent-tlo); color: var(--atrament); }
@media (max-width: 40rem) { .fl-pasek .fl-nowa { width: 100%; } .fl-dane { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .fl-pasek { animation: none; opacity: 1; transform: none; } .fl-pasek .fl-nowa::after { display: none; } }

/* 1.13.3: kafel klienta — dostep osob z innej firmy (zamiast mylacego "0 kont") */
.kk-dostep { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 999px; background: var(--akcent-tlo); color: var(--zloto-ciemne); font-weight: 600; cursor: help; }
.kk-dostep::before { content: "↗"; font-weight: 800; }


/* ===== Podatki i ZUS — lista i deklaracja (1.13.4) ===== */
.pd-kafle .kafel, .pd-sekcja { opacity: 0; transform: translateY(8px); animation: wjazd .45s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
.pd-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; border: 0; background: transparent; }
.pd-lista li { border: 0; padding: 0; opacity: 0; transform: translateY(6px); animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.pd-lista li.pd-suma { animation: none; opacity: 1; transform: none; padding: .5rem .25rem 0; text-align: right; }
.pd-karta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: .75rem 1rem; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 12px; color: var(--atrament); text-decoration: none; transition: transform .22s var(--ruch-krzywa), box-shadow .22s, border-color .22s; }
.pd-karta:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 12px 28px rgba(0,0,0,.09); } .pd-karta:hover .zg-strzalka { transform: translateX(3px); color: var(--zloto-ciemne); }
.pd-karta .zg-strzalka { transition: transform .2s var(--ruch-krzywa), color .2s; }
.pd-ikona { width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; letter-spacing: .04em; background: var(--akcent-tlo); color: var(--zloto-ciemne); }
.pd-glowne { display: flex; flex-direction: column; gap: .12rem; min-width: 0; } .pd-glowne .nazwa { font-weight: 700; }
.pd-prawo { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; } .pd-prawo .kwota { font-size: 1.15rem; font-weight: 700; white-space: nowrap; } .pd-brak { font-size: .9rem; font-weight: 500; font-style: italic; }
.pd-po { color: var(--blad); }
li.zalegla .pd-karta { border-left: 3px solid var(--blad); } li.zaplacona .pd-karta, li.zwrot .pd-karta { border-left: 3px solid #3b8b5a; } li.zaplacona .pd-karta { background: rgba(59,139,90,.05); } li.niewyliczona .pd-karta { border-style: dashed; } li.otwarta .pd-karta { border-left: 3px solid var(--zloto); }
.pd-pusto { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed var(--linia); border-radius: 12px; } .pd-pusto p { margin: .15rem 0 0; }
.pd-tabela tbody tr { opacity: 0; animation: wjazd .35s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 25ms + 150ms); }
.pd-tabela tr.zaplacona > td { background: rgba(59,139,90,.05); } .pd-tabela .zg-strzalka { color: var(--atrament-cichy); }
.pd-zwrot .fd-kwota-liczba { color: #3b8b5a; }
.pd-pozycje tbody tr, .pd-pozycje tr:not(:first-child) { opacity: 0; animation: wjazd .35s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 20ms + 200ms); }
.pd-pozycje tr.poz-sekcja { animation: none; opacity: 1; }
@media (max-width: 40rem) { .pd-karta { grid-template-columns: auto minmax(0, 1fr) auto; } .pd-prawo { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .pd-kafle .kafel, .pd-sekcja, .pd-lista li, .pd-tabela tbody tr, .pd-pozycje tr { animation: none; opacity: 1; transform: none; } }

/* 1.13.5: karty Podatkow — nadpisanie starych regul .podatki a (grid "nazwa kwota / termin kwota", marginesy ujemne) */
.podatki.pd-lista li + li { border-top: 0; }
.podatki.pd-lista li.zaplacona { background: transparent; }
.podatki.pd-lista .pd-karta { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ikona glowne prawo strzalka"; gap: .9rem; margin: 0; padding: .75rem 1rem; }
.podatki.pd-lista .pd-karta:hover { background: var(--powierzchnia); }
.podatki.pd-lista .pd-ikona { grid-area: ikona; } .podatki.pd-lista .pd-glowne { grid-area: glowne; } .podatki.pd-lista .pd-prawo { grid-area: prawo; } .podatki.pd-lista .zg-strzalka { grid-area: strzalka; }
.podatki.pd-lista .nazwa, .podatki.pd-lista .termin, .podatki.pd-lista .kwota { grid-area: auto; }
.podatki.pd-lista .kwota { font-size: 1.15rem; font-weight: 700; }
.podatki.pd-lista li.niewyliczona .kwota { font-size: 1.15rem; font-weight: 700; font-style: normal; color: var(--atrament); }
.podatki.pd-lista li.zwrot .kwota { color: #3b8b5a; }
.podatki.pd-lista li.pd-suma { border-top: 2px solid var(--zloto) !important; }
@media (max-width: 40rem) { .podatki.pd-lista .pd-karta { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ikona glowne strzalka" "prawo prawo prawo"; } }


/* ===== Strefa wgrywania — wspolna (1.13.6): cala szerokosc, animacje, chipy plikow ===== */
.strefa { width: 100%; box-sizing: border-box; padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem) 1.5rem 1.4rem; border-width: 2px; color: var(--atrament); background: linear-gradient(180deg, var(--akcent-tlo-jasne) 0%, var(--powierzchnia) 100%); transition: background .2s, border-color .2s, transform .2s var(--ruch-krzywa), box-shadow .2s; }
.strefa:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(201,178,107,.14); }
.strefa.nad { background: var(--akcent-tlo); border-color: var(--zloto-ciemne); border-style: solid; transform: scale(1.01); box-shadow: 0 16px 40px rgba(201,178,107,.28); }
.strefa-ikona { width: 3rem; height: 3rem; border-radius: 12px; background: var(--akcent-tlo); display: grid; place-items: center; margin-bottom: .7rem; transition: transform .25s var(--ruch-krzywa); }
.strefa-ikona svg { width: 1.5rem; height: 1.5rem; }
.strefa:hover .strefa-ikona { transform: translateY(-3px); } .strefa.nad .strefa-ikona { animation: strefa-skok .6s var(--ruch-krzywa) infinite alternate; }
@keyframes strefa-skok { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.strefa-tytul { font-size: clamp(1rem, .95rem + .25vw, 1.15rem); }
.strefa-licznik { display: block; margin-top: .6rem; font-weight: 600; color: var(--zloto-ciemne); min-height: 1.2em; }
.strefa.ma-pliki { border-style: solid; background: var(--powierzchnia); }
.strefa-lista .plik { opacity: 0; transform: translateY(4px); animation: wjazd .3s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 30ms); }
.strefa-lista .plik.zly { background: rgba(226,106,99,.08); }
.wgraj-dokumenty .wyciag-opcje { justify-content: space-between; } .wgraj-dokumenty .wyciag-opcje button { width: auto; margin: 0; }
.wgrywanie .glowny:disabled, .formularz button.glowny:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .strefa, .strefa-ikona, .strefa-lista .plik { animation: none !important; transition: none; transform: none !important; opacity: 1; } }

/* 1.14.0: ekran "Polacz sie przez VPN biura" */
.bps-karta { max-width: 38rem; margin: 2rem auto; border-top: 4px solid var(--zloto); animation: nk-wejscie .35s var(--ruch-krzywa); }
.bps-ikona { width: 2.8rem; height: 2.8rem; font-size: 1.3rem; margin-bottom: .6rem; }
.bps-kroki { padding-left: 1.2rem; } .bps-akcje { display: flex; gap: .5rem; align-items: center; } .bps-akcje form { margin: 0; } .bps-akcje button, .bps-akcje a { width: auto; margin: 0; }
.bps-akcje .przycisk-link.glowny { background: var(--ciemny); color: #fff; padding: .6rem 1rem; border-radius: 10px; text-decoration: none; }

/* 1.14.0: Ustawienia -> Dostep kont zespolu */
.db-form { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--linia); }
.db-tryby { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0 .8rem; } @media (max-width: 40rem) { .db-tryby { grid-template-columns: 1fr; } }
.db-tryb { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; border: 1px solid var(--linia); border-radius: 10px; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--ruch-krzywa); }
.db-tryb input { position: absolute; opacity: 0; pointer-events: none; } .db-tryb:hover { transform: translateY(-1px); }
.db-tryb:has(input:checked), .db-tryb.wybrany { border-color: var(--zloto); background: var(--akcent-tlo); }
.db-poza ul { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-direction: column; gap: .25rem; } .db-poza li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }


/* =====================================================================================================
   1.15.0 — POWLOKA APLIKACJI: staly naglowek, menu z lewej przewijane osobno, tresc z wlasnym przewijaniem,
   skalowanie pod duze ekrany (4K), tokeny naglowkow dla trybu ciemnego
   ===================================================================================================== */
:root { --tytul: #15171c; --papier-app: #f3f2ee; --akcent-tlo-jasne: #fffdf7; --naglowek-h: 4.25rem; --menu-w: 15.5rem; --menu-pelne: 15.5rem; --menu-zysk: calc(var(--menu-pelne) - var(--menu-w)); }
:root[data-motyw="ciemny"] { --tytul: #f2efe6; --papier-app: #121317; --akcent-tlo-jasne: #23231c; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { --tytul: #f2efe6; --papier-app: #121317; --akcent-tlo-jasne: #23231c; } }
/* skala: 16 px na laptopie, do 20 px na 4K bez skalowania systemowego — wszystko w rem rosnie razem */
html { font-size: clamp(16px, 0.5rem + 0.45vw, 20px); }
@media (max-width: 59.99rem) { html { font-size: 16px; } }

@media (min-width: 60rem) {
  body.zalogowany { display: grid; grid-template-columns: var(--menu-w) minmax(0, 1fr); grid-template-rows: var(--naglowek-h) 1fr; grid-template-areas: "naglowek naglowek" "nawigacja tresc"; min-height: 100vh; }
  body.zalogowany .naglowek { position: sticky; top: 0; z-index: 30; height: var(--naglowek-h); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
  body.zalogowany .nawigacja { position: sticky; top: var(--naglowek-h); align-self: start; height: calc(100vh - var(--naglowek-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(201,178,107,.35) transparent; padding: 1.25rem .9rem 1.5rem; }
  body.zalogowany .nawigacja::-webkit-scrollbar { width: 6px; } body.zalogowany .nawigacja::-webkit-scrollbar-thumb { background: rgba(201,178,107,.35); border-radius: 3px; }
  body.zalogowany .tresc { grid-area: tresc; max-width: calc(84rem + var(--menu-zysk)); width: 100%; min-width: 0; margin: 0; padding: clamp(1.25rem, 1rem + .8vw, 2.25rem) clamp(1rem, .5rem + 1.5vw, 3rem) 2.5rem; }
  body.zalogowany .stopka { grid-area: tresc; align-self: end; justify-self: stretch; max-width: calc(84rem + var(--menu-zysk)); }
  /* stopka pod trescia, nie pod menu: wlasny wiersz tylko w kolumnie tresci */
  body.zalogowany { grid-template-rows: var(--naglowek-h) 1fr auto; grid-template-areas: "naglowek naglowek" "nawigacja tresc" "nawigacja stopka"; }
  body.zalogowany .stopka { grid-area: stopka; align-self: auto; }
  /* menu: sekcje i pozycje — jasny motyw na ciemnym pasku, aktywna ze zlotym paskiem */
  body.zalogowany .nawigacja a { position: relative; border-radius: 10px; transition: background-color .18s, color .18s, transform .18s var(--ruch-krzywa); }
  body.zalogowany .nawigacja a:hover { transform: translateX(2px); }
  body.zalogowany .nawigacja a.aktywna::before { content: ""; position: absolute; left: -.9rem; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--zloto); }
}
/* bardzo szerokie ekrany: tresc szersza, ale nadal ograniczona; menu odrobine szersze */
@media (min-width: 120rem) { :root { --menu-w: 17rem; --menu-pelne: 17rem; } body.zalogowany .tresc { max-width: calc(100rem + var(--menu-zysk)); } }
@media (min-width: 160rem) { body.zalogowany .tresc { max-width: calc(112rem + var(--menu-zysk)); } }

@media (min-width: 60rem) {
  body.zalogowany .naglowek-wnetrze { max-width: none; height: 100%; padding: 0 1.5rem 0 1.25rem; box-sizing: border-box; }
  body.zalogowany .marka img { height: 2.2rem; }
}

/* 1.15.0: tabele — wyrownanie naglowkow z komorkami, kolumny liczbowe do prawej, wyciagi uporzadkowane */
.tabela th.r, .tabela td.r, .tabela-ksef th.r, .tabela-ksef td.r { text-align: right; }
.tabela th.c, .tabela td.c, .tabela-ksef th.c, .tabela-ksef td.c { text-align: center; }
.tabela-wyciagi th, .tabela-wyciagi td { vertical-align: middle; }
.tabela-wyciagi .kol-data { width: 8.5rem; white-space: nowrap; }
.tabela-wyciagi td.kol-numer { max-width: 18rem; } .tabela-wyciagi .kol-plik { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tabela-wyciagi td.r.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-wyciagi td.c { white-space: nowrap; } .tabela-wyciagi .postep { display: block; margin: .3rem auto 0; }
.tabela-wyciagi th:nth-child(6), .tabela-wyciagi td:nth-child(6) { width: 13rem; }
.tabela .kwota, .tabela-ksef .kwota, .kafel-liczba, .fd-kwota-liczba, .pd-prawo .kwota, .fl-prawo .kwota { font-variant-numeric: tabular-nums; }
/* nagłówki sekcji w trybie ciemnym (h2 z klasa fd-h i naglowki kart) */
.fd-h, .ust-naglowek h2, .kafel-tytul { color: var(--tytul); }

/* 1.15.1: menu przewijane osobno — NAPRAWA: starsza regula min-height:100% rozciagala menu na cala wysokosc kolumny,
   wiec sticky nie mialo do czego sie przykleic (element tak wysoki jak kontener nigdy nie "przylega"). */
@media (min-width: 60rem) {
  body.zalogowany .nawigacja { min-height: 0; max-height: calc(100vh - var(--naglowek-h)); height: calc(100vh - var(--naglowek-h)); position: sticky; top: var(--naglowek-h); align-self: start; }
  body.zalogowany .nawigacja .nav-uzytkownik { margin-top: auto; }
}
/* 1.15.1: tabele — jeden system: naglowek malymi kapitalikami, gutter miedzy kolumnami, liczby tabelaryczne, kolumny wg colgroup */
.tabela-ksef th, .tabela th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--atrament-cichy); font-weight: 700; padding: .6rem .75rem; white-space: nowrap; }
.tabela-ksef td, .tabela td { padding: .7rem .75rem; vertical-align: middle; }
.tabela-wyciagi { table-layout: fixed; width: 100%; }
.tabela-wyciagi col.k-miesiac { width: 9rem; } .tabela-wyciagi col.k-rachunek { width: 15rem; } .tabela-wyciagi col.k-plik { width: auto; } .tabela-wyciagi col.k-saldo { width: 17rem; } .tabela-wyciagi col.k-operacje { width: 9rem; } .tabela-wyciagi col.k-stan { width: 13rem; } .tabela-wyciagi col.k-strzalka { width: 2rem; }
.tabela-wyciagi td { overflow: hidden; }
.tabela-wyciagi td.kol-numer { max-width: none; } .tabela-wyciagi .kol-plik { max-width: 100%; }
.tabela-wyciagi .kol-rachunek-nazwa { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-wyciagi td.r.nowrap { padding-left: 1.25rem; }
@media (max-width: 70rem) { .tabela-wyciagi col.k-rachunek { width: 11rem; } .tabela-wyciagi col.k-saldo { width: 13rem; } .tabela-wyciagi col.k-stan { width: 10rem; } }

/* 1.16.0: znacznik "zaplacona" klienta na deklaracjach (jak w KSeF) */
.pd-karta.klikalny { cursor: pointer; } .pd-karta:focus-visible { outline: 2px solid var(--zloto); outline-offset: 2px; }
.pd-znacznik { display: block; margin-bottom: .1rem; } .pd-znacznik .zaplata-form { margin: 0; }
.pd-lista li.oznaczona .pd-karta { background: rgba(59,139,90,.07); } .pd-lista li.oznaczona .pd-karta:hover { background: rgba(59,139,90,.11); }
.pd-tabela tr.oznaczona > td { background: rgba(59,139,90,.06); }
.pd-tabela .kol-zaplata { white-space: nowrap; } .pd-tabela .kol-zaplata .zaplata-form { margin: 0; }
.pd-oznaczone { display: inline-block; margin-top: .25rem; }
/* 1.16.0: menu na iPadzie — wysokosc wg DYNAMICZNEGO okna (pasek Safari chowa sie/pokazuje); bez tego dol menu byl pod paskiem
   przegladarki, dopoki strona nie przewinela sie i pasek nie znikl */
@media (min-width: 60rem) {
  body.zalogowany .nawigacja { height: calc(100dvh - var(--naglowek-h)); max-height: calc(100dvh - var(--naglowek-h)); -webkit-overflow-scrolling: touch; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}


/* ===== Faktury 1.17.0: krok 0 (rodzaj), przelaczniki, segment uslugi/towary, zal.15 ===== */
.fak-rodzaje { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.fak-rodzaj { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .8rem .9rem; border: 1px solid var(--linia); border-radius: 12px; cursor: pointer; background: var(--powierzchnia); transition: border-color .2s, background-color .2s, transform .2s var(--ruch-krzywa), box-shadow .2s; }
.fak-rodzaj input { position: absolute; opacity: 0; pointer-events: none; }
.fak-rodzaj:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.fak-rodzaj.wybrany { border-color: var(--zloto); background: var(--akcent-tlo); box-shadow: inset 0 0 0 1px var(--zloto); }
.fak-rodzaj.blysk { animation: zg-blysk 1s ease-out; }
.fak-rodzaj.wkrotce { opacity: .55; cursor: not-allowed; border-style: dashed; } .fak-rodzaj.wkrotce:hover { transform: none; box-shadow: none; }
.fak-rodzaj-ik { width: 2.2rem; height: 2.2rem; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .72rem; letter-spacing: .04em; background: var(--akcent-tlo); color: var(--zloto-ciemne); margin-bottom: .3rem; }
.fak-rodzaj.wybrany .fak-rodzaj-ik { background: var(--zloto); color: #15171c; }
.fak-rodzaj code { margin-top: .3rem; color: var(--atrament-cichy); }
.fak-przelacznik { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px dashed var(--linia); }
.fak-rodzaje-dok { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.fak-rodzaje-nab { margin-bottom: 1rem; }
/* 1.20.2: wiersz listy = karta (link) + kolumna akcji obok; "Duplikuj" i "Koryguj" wypelniaja cala wysokosc wiersza (po polowie), z ikona; hover: uniesienie, zloto, przeblysk */
.fl-lista > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: .5rem; }
.fl-lista > li > .fl-karta { min-width: 0; }
.fl-akcje { display: flex; flex-direction: column; gap: .35rem; width: 9.5rem; }
.fl-akcja { position: relative; overflow: hidden; flex: 1 1 0; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: 0 .85rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--powierzchnia); color: var(--atrament); text-decoration: none; white-space: nowrap; font-size: .875rem; font-weight: 600; transition: transform .2s var(--ruch-krzywa), border-color .2s, color .2s, box-shadow .2s; }
.fl-akcja::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(201,178,107,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ruch-krzywa); pointer-events: none; }
.fl-akcja-ik { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--tlo, #f3efe4); color: var(--zloto-ciemne); flex: none; transition: transform .3s var(--ruch-krzywa), background-color .2s, color .2s; }
.fl-akcja-ik svg { width: 1rem; height: 1rem; }
.fl-akcja:hover, .fl-akcja:focus-visible { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 22px rgba(201,178,107,.25); }
.fl-akcja:hover::after { transform: translateX(120%); }
.fl-akcja:hover .fl-akcja-ik { background: linear-gradient(135deg, #e3cf8b, var(--zloto)); color: #15171c; transform: rotate(-8deg) scale(1.06); }
.fl-akcja:active { transform: translateY(0) scale(.98); }
.fl-kor .fl-akcja-ik { color: var(--atrament); }
.pd-zero { white-space: nowrap; }
@media (max-width: 40rem) { .fl-lista > li { grid-template-columns: minmax(0, 1fr); } .fl-akcje { flex-direction: row; width: auto; } .fl-akcja { flex: 1 1 0; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .fl-akcja, .fl-akcja::after, .fl-akcja-ik { transition: none; } }
.fak-podtytul { margin: 0 0 .5rem; } .fak-podtytul-dane { margin-top: .25rem; padding-top: .75rem; border-top: 1px dashed var(--linia); }
.fak-wystawca { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .75rem 0 0; padding: .8rem 1rem; border: 1px solid var(--linia); border-left: 3px solid var(--zloto); border-radius: var(--promien, 12px); background: var(--tlo-karty, transparent); }
.fak-wystawca-tresc { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fak-wystawca-et { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zloto); }
.poza-ksef .fak-rodzaj[data-rodzaj] { opacity: .7; }
.termin-skroty { font-style: normal; } .termin-skroty .termin-dni { padding: 0; font: inherit; color: var(--zloto); }
.kz-skroty .link { padding: 0; font: inherit; } .kz-wartosc { display: flex; flex-direction: column; gap: .25rem; margin: .75rem 0; max-width: 28rem; }
.fak-przelacznik.blysk { animation: zg-blysk 1s ease-out; border-radius: 8px; }
/* I-51 (1.63.0): metoda kasowa — karta ustawien i informacja na formularzu (bez przelacznika per faktura) */
.fak-mk .karta-naglowek { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.fak-mk:has(input[name=metoda_kasowa]:checked) { border-color: color-mix(in srgb, var(--zloto) 55%, var(--linia)); }
.fak-mk-info { border-top: none; background: color-mix(in srgb, var(--zloto) 8%, transparent); border-radius: 8px; padding: .55rem .7rem; margin: .2rem 0 .3rem; animation: info-wjazd .4s ease-out both; }
@media (prefers-reduced-motion: reduce) { .fak-mk-info { animation: none; } }
.fak-pole-etykieta { display: flex; flex-direction: column; gap: .1rem; font-weight: 600; }
.fak-segment { display: inline-flex; border: 1px solid var(--linia); border-radius: 999px; overflow: hidden; }
.fak-segment label { position: relative; } .fak-segment input { position: absolute; opacity: 0; pointer-events: none; }
.fak-segment span { display: inline-block; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; color: var(--atrament-cichy); cursor: pointer; transition: background-color .2s, color .2s; }
.fak-segment input:checked + span { background: var(--ciemny); color: #fff; }
.fak-wskazowka:empty { display: none; }
#sugestia-stawki:empty { display: none; } #sugestia-stawki { flex-basis: 100%; }
#pole-uslugi-towary { flex-wrap: wrap; }
.tabela-pozycje .kol-z15 { width: 3.2rem; text-align: center; font-size: .72rem; } .tabela-pozycje td.blysk { animation: zg-blysk .9s ease-out; }
#pole-zw-podstawa input[hidden] { display: none; } #pole-zw-podstawa select + input { margin-top: .4rem; }

/* 1.17.1: VIES */
.vies-wynik { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .7rem; border: 1px solid var(--linia); border-radius: 10px; background: var(--papier); animation: wjazd .3s var(--ruch-krzywa); }
.vies-wynik[data-stan="ok"] { border-color: rgba(59,139,90,.5); background: rgba(59,139,90,.06); } .vies-wynik[data-stan="zly"] { border-color: rgba(226,106,99,.5); background: var(--blad-tlo); }
input.blysk { animation: zg-blysk .9s ease-out; }


/* ===== Faktury 1.18.0: zaliczka/koncowa, katalog, podglad ===== */
.fak-sekcja-dok.wsuw { animation: wjazd .4s var(--ruch-krzywa); }
.zal-pasek { margin-top: .4rem; } .zal-pasek-tor { position: relative; height: .7rem; border-radius: 999px; background: var(--linia); overflow: hidden; display: flex; }
.zal-pasek-tor span { display: block; height: 100%; transition: width .45s var(--ruch-krzywa); } .zal-pasek-tor .zal-juz { background: #3b8b5a; } .zal-pasek-tor .zal-ta { background: var(--zloto); }
.zal-pasek.przekroczono .zal-pasek-tor .zal-ta { background: var(--blad); } .zal-pasek-opis { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; flex-wrap: wrap; }
input.blad-pole { border-color: var(--blad) !important; box-shadow: 0 0 0 3px rgba(226,106,99,.18); animation: zg-blysk .9s ease-out; }
.kon-tabela { margin-top: .5rem; } .kon-podsum { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .6rem; padding-top: .6rem; border-top: 2px solid var(--zloto); } .kon-pozostalo { margin-left: auto; font-size: 1.05rem; }
#kon-zaliczki.wsuw { animation: wjazd .4s var(--ruch-krzywa); }
.tabela-pozycje tr.blysk td { animation: zg-blysk .9s ease-out; }
.karta-akcja-info { display: block; margin-top: .3rem; } .karta-akcja-info.blysk { animation: zg-blysk 1.2s ease-out; }
/* podglad na zywo */
.pg-arkusz { background: var(--powierzchnia); border: 1px solid var(--linia); border-top: 3px solid var(--zloto); border-radius: 10px; padding: .8rem .9rem; font-size: .8rem; display: flex; flex-direction: column; gap: .55rem; }
.pg-gora { display: flex; justify-content: space-between; align-items: baseline; } .pg-tytul { font-size: .65rem; letter-spacing: .12em; color: var(--zloto-ciemne); font-weight: 700; } .pg-nr { font-weight: 800; }
.pg-strony { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .pg-strony > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .pg-strony b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-et { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--atrament-cichy); font-weight: 700; }
.pg-blok { padding: .4rem .55rem; background: var(--akcent-tlo); border-radius: 6px; display: flex; flex-direction: column; gap: .1rem; }
.pg-poz { width: 100%; border-collapse: collapse; } .pg-poz td { padding: .25rem 0; border-bottom: 1px solid var(--linia); vertical-align: top; } .pg-poz td.r { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-sumy { display: flex; flex-direction: column; gap: .15rem; align-items: flex-end; } .pg-sumy span { display: flex; gap: .6rem; } .pg-razem { font-size: .95rem; padding-top: .3rem; border-top: 2px solid var(--zloto); }
.pg-adnot:empty { display: none; }


/* ===== 1.23.0: naglowek — firma (biuro: przelacznik), licznik sesji z opisem, konto w jednym okienku; menu zwijane ===== */
.naglowek-wnetrze { gap: .85rem; }
.naglowek .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.naglowek-tytul { padding-right: .85rem; border-right: 1px solid rgba(255,255,255,.12); }
.hf-firma-wrap, .hf-uz-wrap { position: relative; }
.hf-firma { display: inline-flex; align-items: center; gap: .6rem; height: 2.55rem; max-width: 26rem; margin: 0; padding: 0 .75rem 0 .35rem; border: 1px solid rgba(201,178,107,.45); border-radius: 12px; background: rgba(201,178,107,.10); color: #fff; font: inherit; cursor: pointer; text-align: left; transition: background-color .2s, border-color .2s, transform .2s var(--ruch-krzywa), box-shadow .2s; }
button.hf-firma:hover, .hf-firma.otwarty { background: rgba(201,178,107,.18); border-color: var(--zloto); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
button.hf-firma:active { transform: scale(.98); }
.hf-firma-stala { border-color: rgba(255,255,255,.12); background: transparent; cursor: default; }
.hf-firma-znak { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 8px; background: var(--zloto); color: #15171c; font-weight: 800; font-size: .85rem; display: grid; place-items: center; transition: transform .3s var(--ruch-krzywa); }
.hf-firma-stala .hf-firma-znak { background: rgba(201,178,107,.2); color: var(--zloto); }
.hf-firma.przelacza .hf-firma-znak { animation: zp-pop .45s var(--ruch-krzywa); }
.hf-firma-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.hf-firma-et { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zloto); }
.hf-firma-nazwa { font-size: .875rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem; }
.hf-strz { color: var(--zloto); font-size: .7rem; transition: transform .25s var(--ruch-krzywa); }
.otwarty .hf-strz { transform: rotate(180deg); }
.naglowek-prawa { gap: .45rem; }
.hf-ikona { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 12px; border: 1px solid transparent; color: #e8e3d3; transition: background-color .2s, border-color .2s, color .2s; }
.hf-ikona:hover { background: rgba(255,255,255,.08); border-color: rgba(201,178,107,.5); color: #fff; }
.hf-ikona .ik { width: 1.25rem; height: 1.25rem; }
.naglowek-pomoc.hf-ikona .nav-kropka { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.dzwonek.hf-ikona .licznik { top: .15rem; right: .1rem; background: var(--zloto); color: #15171c; font-weight: 800; }
.licznik-sesji { gap: .5rem; height: 2.3rem; padding: 0 .75rem 0 .45rem; background: transparent; border-color: rgba(255,255,255,.12); color: #a9a494; font-size: .8rem; transition: background-color .2s, border-color .2s, color .2s; }
.licznik-sesji .ls-kolo { width: 1.3rem; height: 1.3rem; transform: rotate(-90deg); flex: none; }
.ls-tlo { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 4; }
.ls-luk { fill: none; stroke: var(--zloto); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.licznik-sesji #licznik-sesji-czas { font-variant-numeric: tabular-nums; color: #e8e3d3; }
.licznik-sesji .ls-przedluz { display: none; }
.licznik-sesji.malo { color: var(--zloto); border-color: rgba(201,178,107,.55); background: rgba(201,178,107,.08); }
.licznik-sesji.malo .ls-przedluz, .licznik-sesji.krytycznie .ls-przedluz { display: inline; }
.licznik-sesji.krytycznie { color: #ffd9d5; background: rgba(224,108,99,.16); border-color: #e06c63; animation: hf-puls 1.6s ease-out infinite; }
.licznik-sesji.krytycznie .ls-luk { stroke: #e06c63; }
@keyframes hf-puls { 0% { box-shadow: 0 0 0 0 rgba(224,108,99,.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(224,108,99,0); } }
.hf-uz { display: inline-flex; align-items: center; gap: .6rem; height: 2.55rem; margin: 0; padding: 0 .65rem 0 .25rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer; transition: background-color .2s, border-color .2s; }
.hf-uz:hover, .hf-uz.otwarty { background: rgba(255,255,255,.07); border-color: rgba(201,178,107,.55); }
.hf-uz .inicjal { width: 2rem; height: 2rem; font-size: .85rem; }
.hf-uz-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.hf-uz-imie { font-size: .85rem; font-weight: 600; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-uz-rola { font-size: .68rem; color: #a9a494; }
.hf-pop { position: absolute; top: calc(100% + .55rem); z-index: 50; background: var(--powierzchnia); color: var(--atrament); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(201,178,107,.35); padding: .6rem; animation: hf-pop .22s cubic-bezier(.2,.7,.2,1) both; }
.hf-pop[hidden] { display: none; }
@keyframes hf-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.hf-pop-firma { left: 0; width: min(27rem, 90vw); transform-origin: top left; }
.hf-pop-uz { right: 0; width: 17.5rem; transform-origin: top right; display: flex; flex-direction: column; gap: .15rem; }
.hf-pop form { margin: 0; }
.hf-szukaj { position: relative; display: block; margin: 0 0 .35rem; }
.hf-szukaj .ik { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--zloto-ciemne); pointer-events: none; }
.hf-szukaj input { width: 100%; box-sizing: border-box; height: 2.55rem; margin: 0; padding: 0 .75rem 0 2.3rem; border-radius: 10px; }
.hf-lista { display: flex; flex-direction: column; gap: .15rem; max-height: min(60vh, 26rem); overflow-y: auto; }
.hf-et { margin: .5rem .45rem .2rem; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--atrament-cichy); }
.hf-ladowanie, .hf-pusto { margin: .6rem .45rem; font-size: .85rem; color: var(--atrament-cichy); }
.hf-poz { display: flex; align-items: center; gap: .65rem; width: 100%; margin: 0; padding: .45rem .5rem; border: 0; border-radius: 10px; background: transparent; color: var(--atrament); font: inherit; text-align: left; cursor: pointer; animation: wjazd .3s var(--ruch-krzywa) both; transition: background-color .15s; }
.hf-poz:hover, .hf-poz:focus-visible { background: var(--akcent-tlo); outline: none; }
.hf-poz.biezaca { background: var(--akcent-tlo); }
.hf-poz-znak { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 8px; background: var(--akcent-tlo); border: 1px solid rgba(201,178,107,.45); color: var(--zloto-ciemne); font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.hf-poz.biezaca .hf-poz-znak { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
.hf-poz-tekst { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; line-height: 1.25; }
.hf-poz-tekst strong { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-poz-tekst span { font-size: .75rem; color: var(--atrament-cichy); }
.hf-ok { color: #3b8b5a; font-weight: 800; }
.hf-nowe { padding: .1rem .5rem; border-radius: 999px; background: var(--zloto); color: #15171c; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.hf-wszyscy { display: block; margin-top: .35rem; padding: .6rem .5rem .2rem; border-top: 1px solid var(--linia); font-size: .82rem; font-weight: 700; color: var(--zloto-ciemne); text-decoration: none; }
.hf-wszyscy:hover { color: var(--atrament); }
.hf-uz-kto { display: flex; flex-direction: column; padding: .45rem .6rem .65rem; margin-bottom: .2rem; border-bottom: 1px solid var(--linia); }
.hf-uz-kto span { font-size: .75rem; color: var(--atrament-cichy); overflow: hidden; text-overflow: ellipsis; }
.hf-pop-poz { display: flex; align-items: center; gap: .6rem; width: 100%; margin: 0; padding: .55rem .6rem; border: 0; border-radius: 10px; background: transparent; color: var(--atrament); font: inherit; font-size: .9rem; text-decoration: none; text-align: left; cursor: pointer; transition: background-color .15s; }
.hf-pop-poz:hover, .hf-pop-poz:focus-visible { background: var(--akcent-tlo); outline: none; }
.hf-pop-poz .ik { width: 1.05rem; height: 1.05rem; flex: none; }
.hf-pop-motyw { display: flex; align-items: center; justify-content: space-between; padding: .4rem .6rem; font-size: .9rem; }
.hf-pop-motyw .motyw { margin: 0; border-color: var(--linia); }
.hf-pop-motyw .motyw button { color: var(--atrament-cichy); font-size: .75rem; padding: .25rem .6rem; }
.hf-pop-motyw .motyw button:hover { color: var(--atrament); }
.hf-wyloguj { border-top: 1px solid var(--linia); margin-top: .2rem !important; padding-top: .2rem; }
.hf-wyloguj .hf-pop-poz { color: #a32d2d; }
:root[data-motyw="ciemny"] .hf-wyloguj .hf-pop-poz { color: #e26a63; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .hf-wyloguj .hf-pop-poz { color: #e26a63; } }

/* menu: zwijanie (tylko >= 60rem) */
.nav-zwin { display: none; }
@media (min-width: 60rem) {
  body.zalogowany { transition: grid-template-columns .28s cubic-bezier(.2,.7,.2,1); }
  .nav-zwin { display: flex; align-items: center; gap: .65rem; width: 100%; margin: 0; padding: .5rem .7rem; border: 0; border-radius: 10px; background: transparent; color: #8d887a; font: inherit; font-size: .85rem; cursor: pointer; transition: background-color .18s, color .18s; }
  .nav-zwin:hover { background: rgba(255,255,255,.05); color: #fff; }
  .nav-zwin .ikona { width: 2rem; height: 2rem; display: grid; place-items: center; font-size: 1rem; }
  html.menu-zwiniete { --menu-w: 4.75rem; }
  html.menu-zwiniete body.zalogowany .nawigacja { padding-left: .6rem; padding-right: .6rem; overflow-x: hidden; }
  html.menu-zwiniete .nav-etykieta { font-size: 0; height: 1px; padding: 0; margin: .45rem .5rem; background: rgba(255,255,255,.08); }
  html.menu-zwiniete body.zalogowany .nawigacja .nav-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.menu-zwiniete { --menu-zysk: calc(var(--menu-pelne) - 4.75rem); }
  body.zalogowany .tresc, body.zalogowany .stopka { transition: max-width .28s cubic-bezier(.2,.7,.2,1); }
  html.menu-zwiniete body.zalogowany .nawigacja a { justify-content: center; padding-left: .35rem; padding-right: .35rem; }
  html.menu-zwiniete body.zalogowany .nawigacja a:hover { transform: none; }
  html.menu-zwiniete body.zalogowany .nawigacja .licznik-nav { position: absolute; top: .15rem; right: .15rem; min-width: 1rem; height: 1rem; font-size: .6rem; padding: 0 .25rem; }
  html.menu-zwiniete .nav-zwin { justify-content: center; padding-left: .35rem; padding-right: .35rem; }
}
@media (max-width: 59.99rem) {
  .hf-firma-et, .hf-uz-tekst, .hf-uz .hf-strz, .naglowek-tytul { display: none; }
  .hf-firma { height: 2.3rem; max-width: 42vw; } .hf-firma-nazwa { max-width: 32vw; font-size: .8rem; }
  .hf-uz { padding: 0 .25rem; }
  .naglowek-prawa { gap: .2rem; }
  .hf-pop-firma { position: fixed; left: .5rem; right: .5rem; top: 3.6rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .hf-pop, .hf-poz, .licznik-sesji.krytycznie, .hf-firma.przelacza .hf-firma-znak { animation: none; } body.zalogowany, .ls-luk, .hf-strz { transition: none; } }

/* 1.23.1: podpowiedz przy zwinietym menu — po chwili przytrzymania kursora (JS: naglowek.js, element w <body>, bo menu przewija sie i ucina) */
.nav-podpowiedz { position: fixed; z-index: 60; pointer-events: none; padding: .4rem .7rem; border-radius: 8px; background: #15171c; color: #fff; font-size: .82rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(201,178,107,.45); opacity: 0; transform: translate(-4px, -50%); transition: opacity .16s, transform .16s cubic-bezier(.2,.7,.2,1); }
.nav-podpowiedz::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: #15171c; transform: translateY(-50%) rotate(45deg); box-shadow: -1px 1px 0 rgba(201,178,107,.45); }
.nav-podpowiedz.widoczna { opacity: 1; transform: translate(0, -50%); }
.nav-podpowiedz .np-licz { margin-left: .45rem; padding: 0 .4rem; border-radius: 999px; background: var(--zloto); color: #15171c; font-size: .7rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .nav-podpowiedz { transition: none; } }

/* 1.23.2: na czas animacji zwijania/rozwijania menu pasek przewijania menu ukryty (WebKit zostawial go w starym miejscu) */
html.menu-anim body.zalogowany .nawigacja { scrollbar-width: none; }
html.menu-anim body.zalogowany .nawigacja::-webkit-scrollbar { display: none; width: 0; }


/* ===== 1.24.0: Zgloszenia — lista w konwencji Pulpitu ===== */
.zgl-tytul { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.zgl-tytul .godziny-zespolu { margin: 0; }
.zgl-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .85rem; margin: .25rem 0 1rem; padding: .6rem 1.25rem .6rem .6rem; border: 0; border-radius: 14px; background: linear-gradient(135deg, #e3cf8b, var(--zloto)); color: #15171c; font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px rgba(201,178,107,.28); transition: transform .22s var(--ruch-krzywa), box-shadow .22s; }
.zgl-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; pointer-events: none; }
.zgl-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201,178,107,.42); color: #15171c; }
.zgl-cta:hover::after { transform: translateX(120%); }
.zgl-cta-ik { width: 2.4rem; height: 2.4rem; border-radius: 10px; background: rgba(21,23,28,.08); display: grid; place-items: center; flex: none; }
.zgl-cta-ik .ik { width: 1.2rem; height: 1.2rem; }
.zgl-cta-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.zgl-cta-tekst strong { font-size: 1rem; } .zgl-cta-tekst span { font-size: .8rem; }
.zgl-cta-strz { font-size: 1.1rem; transition: transform .2s var(--ruch-krzywa); } .zgl-cta:hover .zgl-cta-strz { transform: translateX(3px); }
.zgl-cta[aria-expanded="true"] .zgl-cta-strz { transform: rotate(90deg); }
.zgl-cta-maly { margin: 0; padding: .45rem 1rem .45rem .45rem; font-weight: 700; }
.zgl-cta-maly .zgl-cta-ik { width: 2rem; height: 2rem; }
.zgl-formularz { background: var(--powierzchnia); border: 1px solid rgba(201,178,107,.55); border-radius: 16px; padding: 1.2rem 1.35rem; margin: 0 0 1.1rem; box-shadow: 0 12px 30px rgba(21,23,28,.06); }
.zgl-formularz[hidden] { display: none; }
.zgl-formularz.wjazd { animation: wjazd .3s var(--ruch-krzywa) both; }
.zgl-formularz h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.zgl-form-dol { display: flex; gap: .85rem; align-items: stretch; flex-wrap: wrap; }
.zgl-pliki { position: relative; flex: 1 1 18rem; display: flex; align-items: center; justify-content: center; margin: 0; padding: .9rem 1rem; border: 1px dashed var(--zloto); border-radius: 12px; background: var(--akcent-tlo); color: var(--zloto-ciemne); font-size: .85rem; font-weight: 500; text-align: center; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ruch-krzywa); }
.zgl-pliki input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zgl-pliki.nad { border-style: solid; transform: scale(1.01); background: rgba(201,178,107,.18); }
.zgl-pliki.ma { border-style: solid; color: var(--atrament); }
.zgl-wyslij { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin: 0; min-width: 11rem; }
.zgl-wyslij.laduje { pointer-events: none; } .zgl-wyslij.laduje .log-spinner { display: inline-block; }
.zgl-kafle { margin-bottom: 1rem; }
.zgl-kafel.zielony { border-top-color: #3b8b5a; } .zgl-kafel.szary { border-top-color: var(--linia); }
.zgl-filtry { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 .75rem; }
.zgl-szukaj { position: relative; flex: 0 1 21rem; margin: 0; }
.zgl-szukaj .ik { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--zloto-ciemne); pointer-events: none; }
.zgl-szukaj input { width: 100%; margin: 0; padding-left: 2.3rem; border-radius: 12px; }
.zgl-szukaj .sr, .zgl-tytul .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zgl-zakladki .zgl-z-licz { margin-left: .25rem; color: var(--atrament-cichy); font-weight: 500; font-variant-numeric: tabular-nums; }
.zgl-lista { background: none; border: 0; box-shadow: none; gap: .5rem; }
.zgl-lista li + li { border-top: 0; }
.zgl-w[hidden] { display: none; }
.zgl-lista .zgl-w > a { display: grid; grid-template-areas: none; grid-template-columns: .65rem 2.5rem minmax(0, 1fr) auto 1.3rem; gap: 1rem; align-items: center; padding: .85rem 1.1rem; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 14px; color: var(--atrament); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .22s var(--ruch-krzywa), border-color .22s, box-shadow .22s, opacity .2s; }
.zgl-lista.zgl-biuro .zgl-w > a { grid-template-columns: .65rem 2.5rem minmax(0, 1fr) 11rem auto 1.3rem; }
.zgl-lista .zgl-w > a:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 24px rgba(0,0,0,.08); background: var(--powierzchnia); }
.zgl-lista .zgl-w.nowe { box-shadow: none; background: none; }
.zgl-lista .zgl-w.nowe > a { border-color: rgba(201,178,107,.7); border-left-width: 1px; background: linear-gradient(90deg, var(--akcent-tlo) 0%, var(--powierzchnia) 35%); }
.zgl-lista .zgl-w.stan-zamknieta > a { opacity: 1; background: transparent; box-shadow: none; }
.zgl-lista .zgl-w.stan-zamknieta .zgl-temat, .zgl-lista .zgl-w.stan-zamknieta .zgl-skrot { color: var(--atrament-cichy); }
.zgl-kropka { width: .65rem; height: .65rem; border-radius: 50%; background: var(--linia); }
.zgl-kropka.zielona { background: #3b8b5a; } .zgl-kropka.szara { background: var(--linia); }
.zgl-kropka.zlota { background: var(--zloto); animation: zgl-puls 1.8s ease-out infinite; }
@keyframes zgl-puls { 0% { box-shadow: 0 0 0 0 rgba(201,178,107,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(201,178,107,0); } }
.zgl-lista .zg-awatar { width: 2.5rem; height: 2.5rem; font-size: .95rem; }
.zgl-srodek { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.zgl-temat-linia { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.zgl-temat-linia .zg-nr { flex: none; }
.zgl-od-biura { flex: none; }
.zgl-temat { font-weight: 650; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zgl-w.nowe .zgl-temat { font-weight: 800; }
.zgl-firma { font-size: .8rem; font-weight: 600; color: var(--zloto-ciemne); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zgl-skrot { font-size: .875rem; color: var(--atrament-cichy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zgl-skrot strong { color: var(--atrament); font-weight: 650; }
.zgl-prosba { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .15rem; }
.zgl-termin { padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--zloto); color: var(--zloto-ciemne); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.zgl-termin.po { border-color: var(--blad); color: var(--blad); }
.zgl-prowadzi { display: flex; align-items: center; gap: .45rem; font-size: .85rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zgl-prowadzi em { color: var(--atrament-cichy); }
.zgl-prawa { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; white-space: nowrap; }
.zgl-czas { font-size: .8rem; color: var(--atrament-cichy); }
.zgl-plakietki { display: flex; gap: .35rem; align-items: center; flex-wrap: nowrap; }
.zgl-pl { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; border: 1px solid var(--linia); font-size: .72rem; font-weight: 650; white-space: nowrap; color: var(--atrament); }
.zgl-pl.nowa { background: var(--zloto); border-color: var(--zloto); color: #15171c; font-weight: 800; }
.zgl-pl.stan-nowa { border-color: rgba(201,178,107,.7); color: var(--zloto-ciemne); }
.zgl-pl.stan-w_toku { border-color: rgba(59,139,90,.45); color: #2f7a4d; }
.zgl-pl.stan-zamknieta { color: var(--atrament-cichy); }
.zgl-liczby { font-size: .75rem; color: var(--atrament-cichy); }
.zgl-lista .zg-strzalka { color: var(--atrament-cichy); font-size: 1.1rem; transition: transform .2s var(--ruch-krzywa), color .2s; }
.zgl-lista .zgl-w > a:hover .zg-strzalka { transform: translateX(3px); color: var(--zloto-ciemne); }
.zgl-pusto-filtr { margin-top: .75rem; }
:root[data-motyw="ciemny"] .zgl-pl.stan-w_toku { color: #7cc79a; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .zgl-pl.stan-w_toku { color: #7cc79a; } }
@media (max-width: 50rem) {
  .zgl-lista .zgl-w > a, .zgl-lista.zgl-biuro .zgl-w > a { grid-template-columns: .65rem 2.3rem minmax(0, 1fr); grid-template-areas: "k a s" ". . p"; row-gap: .45rem; }
  .zgl-lista .zgl-kropka { grid-area: k; } .zgl-lista .zg-awatar { grid-area: a; } .zgl-srodek { grid-area: s; }
  .zgl-prawa { grid-area: p; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; }
  .zgl-prowadzi, .zgl-lista .zg-strzalka { display: none; }
  .zgl-szukaj { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .zgl-kropka.zlota, .zgl-formularz.wjazd { animation: none; } .zgl-cta, .zgl-cta::after, .zgl-lista .zgl-w > a { transition: none; } }
@media (min-width: 50rem) { .zgl-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== 1.25.0: Pulpit — Wymaga Twojej uwagi, dwie kolumny, szybkie akcje, Pierwsze kroki ===== */
.pl-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pl-kto { min-width: 0; }
.pl-akcje { display: flex; gap: .5rem; flex-wrap: wrap; }
.pl-akcja { display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1rem; border-radius: 12px; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament); text-decoration: none; font-size: .9rem; font-weight: 650; white-space: nowrap; transition: transform .2s var(--ruch-krzywa), box-shadow .2s, border-color .2s; }
.pl-akcja .ik { width: 1rem; height: 1rem; }
.pl-akcja:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 22px rgba(201,178,107,.28); color: var(--atrament); }
.pl-akcja.ciemna { background: #15171c; border-color: #15171c; color: #fff; }
.pl-akcja.ciemna:hover { color: #fff; }
:root[data-motyw="ciemny"] .pl-akcja.ciemna { background: var(--zloto); border-color: var(--zloto); color: #15171c; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .pl-akcja.ciemna { background: var(--zloto); border-color: var(--zloto); color: #15171c; } }

.pl-uwaga { margin: 0 0 1.25rem; }
.pl-uwaga-gora { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
.pl-uwaga-gora h2 { margin: 0; font-size: 1.15rem; }
.pl-uwaga-ile { min-width: 1.4rem; height: 1.4rem; padding: 0 .45rem; border-radius: 999px; background: var(--zloto); color: #15171c; font-size: .75rem; font-weight: 800; display: grid; place-items: center; box-sizing: border-box; animation: zgl-puls 1.8s ease-out infinite; }
.pl-uwaga-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.pl-u { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.15rem 1rem 1.35rem; border-radius: 16px; background: var(--powierzchnia); border: 1px solid var(--linia); color: var(--atrament); text-decoration: none; opacity: 0; transform: translateY(10px); animation: wjazd .45s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 60ms + 60ms); transition: transform .22s var(--ruch-krzywa), box-shadow .22s, border-color .22s; }
.pl-u::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--zloto); }
.pl-u.czerwona::before { background: #c0392b; }
.pl-u:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 12px 28px rgba(21,23,28,.08); color: var(--atrament); }
.pl-u-ik { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; background: var(--zloto); color: #15171c; }
.pl-u.czerwona .pl-u-ik { background: #c0392b; color: #fff; }
.pl-u-ik .ik { width: 1.05rem; height: 1.05rem; }
.pl-u-ik.puls { animation: zgl-puls 1.8s ease-out infinite; }
.pl-u.czerwona .pl-u-ik.puls { animation-name: pl-puls-cz; }
@keyframes pl-puls-cz { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(192,57,43,0); } }
.pl-u-et { font-size: .68rem; letter-spacing: .12em; font-weight: 700; color: var(--atrament-cichy); }
.pl-u strong { font-size: 1.02rem; line-height: 1.3; }
.pl-u-op { font-size: .85rem; color: var(--atrament-cichy); line-height: 1.45; }
.pl-u-czerw { color: #a32d2d; font-weight: 700; }
.pl-u-pasek { display: block; width: 100%; }
.pl-u-akcja { margin-top: auto; padding-top: .3rem; font-size: .88rem; font-weight: 700; color: var(--zloto-ciemne); }
.pl-u-strz { display: inline-block; transition: transform .2s var(--ruch-krzywa); } .pl-u:hover .pl-u-strz { transform: translateX(3px); }
.pl-ok { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 1rem 1.15rem; border-radius: 16px; background: var(--powierzchnia); border: 1px solid rgba(59,139,90,.35); color: var(--atrament); }
.pl-ok-ik { width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: #3b8b5a; color: #fff; display: grid; place-items: center; font-weight: 800; }

.pl-dwie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
@media (min-width: 75rem) { .pl-dwie { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.pl-dwie > * { margin: 0 !important; min-width: 0; }
.pl-obieg > .sekcja { margin: 0; }
.pl-wszystkie { font-weight: 600; margin-left: auto; }
/* 1.40.3 NAPRAWA telefon: link plywal (float) w naglowku, zawijal sie pod naglowek, a lista podatkow (flex = nowy kontekst blokowy) zwezala
   sie obok niego do ~140 px — karty podatkow tekst slowo pod slowem, kwota poza karta. Naglowek jako flex, bez float. */
h2:has(> .pl-wszystkie) { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
/* zaplacone (oznaczone przez klienta) nie wygladaja na zalegle — tylko na Pulpicie; strona Podatki bez zmian */
.pl-podatki li.oznaczona .pd-karta, .pl-podatki li.zaplacona .pd-karta { background: rgba(59,139,90,.05); border-left: 3px solid #3b8b5a; }
.pl-podatki li.oznaczona .pd-po, .pl-podatki li.oznaczona .plakietka-stan.blad { display: none; }
.pl-podatki li.oznaczona .kwota, .pl-podatki li.zaplacona .kwota { color: var(--atrament-cichy); }
.pl-kafle { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }

.pl-kroki { margin: 0 0 1.25rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--powierzchnia); border: 1px solid rgba(201,178,107,.55); box-shadow: 0 10px 26px rgba(21,23,28,.05); transition: opacity .28s, transform .28s var(--ruch-krzywa); }
.pl-kroki.znika { opacity: 0; transform: translateY(-8px); }
.pl-kroki[hidden] { display: none; }
.pl-kroki-gora { display: flex; align-items: center; gap: .6rem; }
.pl-kroki-gora h2 { margin: 0; font-size: 1.1rem; }
.pl-kroki-ile { padding: .1rem .6rem; border-radius: 999px; background: var(--akcent-tlo); border: 1px solid var(--zloto); font-size: .75rem; font-weight: 700; color: var(--zloto-ciemne); }
.pl-kroki-ukryj { margin-left: auto; font-size: .85rem; }
.pl-kroki-pasek { height: 6px; margin: .75rem 0; border-radius: 999px; background: var(--linia); overflow: hidden; }
.pl-kroki-pasek span { display: block; height: 100%; background: var(--zloto); border-radius: 999px; transition: width .6s var(--ruch-krzywa); }
.pl-kroki-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .65rem; margin-bottom: .5rem; }
.pl-krok { display: flex; gap: .75rem; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament); text-decoration: none; opacity: 0; animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .2s var(--ruch-krzywa), border-color .2s, box-shadow .2s; }
a.pl-krok:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 22px rgba(0,0,0,.07); color: var(--atrament); }
.pl-krok > span:last-child { display: flex; flex-direction: column; gap: .2rem; }
.pl-krok-nr { width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--akcent-tlo); color: var(--zloto-ciemne); font-weight: 800; display: grid; place-items: center; }
.pl-krok.zrobiony { border-color: rgba(59,139,90,.35); } .pl-krok.zrobiony .pl-krok-nr { background: #3b8b5a; color: #fff; }
.pl-krok-akcja { font-size: .85rem; font-weight: 700; color: var(--zloto-ciemne); } .pl-krok.zrobiony .pl-krok-akcja { color: #2f7a4d; }
@media (prefers-reduced-motion: reduce) { .pl-u, .pl-krok { animation: none; opacity: 1; transform: none; } .pl-uwaga-ile, .pl-u-ik.puls { animation: none; } .pl-u, .pl-akcja, .pl-kroki { transition: none; } }

/* ===== 1.26.0: Dokumenty — lista z danymi rozpoznanego dokumentu, filtry, szukanie ===== */
.dk-gora h2 { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.dk-ile { font-weight: 500; font-size: .95rem; }
.dk-filtry { display: flex; flex-direction: column; gap: .65rem; margin-bottom: .85rem; }
.dk-pola { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.dk-sel { margin: 0; } .dk-sel select { margin: 0; width: auto; min-width: 11rem; border-radius: 12px; }
.dk-szukaj { flex: 1 1 18rem; }
.dk-sel .sr, .dk-szukaj .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dk-lista { display: flex; flex-direction: column; gap: .45rem; }
.dk-lista li + li { border-top: 0; }
.dk-w { opacity: 0; transform: translateY(8px); animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(min(var(--i, 0), 20) * 28ms); }
.dk-w[hidden] { display: none; }
.dk-lista .dk-w > a { display: grid; grid-template-areas: none; grid-template-columns: 5.2rem minmax(0, 1fr) 7.5rem 9.5rem 8.5rem 1.2rem; gap: 1rem; align-items: center; padding: .75rem 1rem; border: 1px solid var(--linia); border-radius: 14px; background: var(--powierzchnia); color: var(--atrament); text-decoration: none;
  transition: transform .22s var(--ruch-krzywa), border-color .22s, box-shadow .22s; }
.dk-lista .dk-w > a:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 24px rgba(0,0,0,.08); background: var(--powierzchnia); }
.dk-rodzaj { justify-self: start; display: inline-flex; align-items: center; justify-content: center; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.dk-rodzaj.zakup { background: #eef1f6; color: #3b4a66; }
.dk-rodzaj.sprzedaz { background: var(--akcent-tlo); color: var(--zloto-ciemne); }
.dk-rodzaj.plik { width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 10px; background: var(--papier-app, #f3f2ee); color: var(--atrament-cichy); }
.dk-rodzaj.plik .ik { width: 1.05rem; height: 1.05rem; }
.dk-srodek { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dk-kontr { font-weight: 650; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-nazwa-pliku { font-weight: 600; }
.dk-wiecej { font-weight: 500; font-size: .8rem; color: var(--zloto-ciemne); }
.dk-meta { font-size: .8rem; color: var(--atrament-cichy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-meta strong { color: var(--atrament); font-weight: 650; }
.dk-plik { opacity: .75; }
.dk-data { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.25; white-space: nowrap; }
.dk-data strong { font-weight: 600; } .dk-data span { font-size: .72rem; color: var(--atrament-cichy); }
.dk-kwota { justify-self: end; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-kwota span { font-size: .75rem; font-weight: 500; color: var(--atrament-cichy); }
.dk-stan-kol { justify-self: end; }
.dk-stan { display: inline-flex; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 650; white-space: nowrap; border: 1px solid var(--linia); color: var(--atrament-cichy); }
.dk-stan-zaksiegowany { background: #15171c; border-color: #15171c; color: #fff; }
.dk-stan-rozpoznany { background: var(--akcent-tlo); border-color: rgba(201,178,107,.6); color: var(--zloto-ciemne); }
.dk-stan-wgrany, .dk-stan-pobrany { border-color: rgba(201,178,107,.6); color: var(--zloto-ciemne); }
.dk-stan-odrzucony { background: var(--blad-tlo); border-color: var(--blad); color: var(--blad); }
.dk-stan-nie_ksiegowany, .dk-stan-usuniety { color: var(--atrament-cichy); }
.dk-stan-usuniety_biuro { color: var(--atrament-cichy); text-decoration: line-through; text-decoration-color: rgba(120,120,120,.6); }   /* 1.58.0 I-45 */
.dk-usuniete-lista { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.dk-usuniete-lista li { padding: .55rem .8rem; border: 1px dashed var(--linia); border-radius: 10px; color: var(--atrament-cichy); }
.dk-usuniete-lista li strong { color: var(--atrament); text-decoration: line-through; text-decoration-color: rgba(120,120,120,.6); }
:root[data-motyw="ciemny"] .dk-stan-zaksiegowany { background: var(--zloto); border-color: var(--zloto); color: #15171c; }
:root[data-motyw="ciemny"] .dk-rodzaj.zakup { background: #232a38; color: #b9c6e0; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .dk-stan-zaksiegowany { background: var(--zloto); border-color: var(--zloto); color: #15171c; } :root:not([data-motyw="jasny"]) .dk-rodzaj.zakup { background: #232a38; color: #b9c6e0; } }
.dk-lista .zg-strzalka { color: var(--atrament-cichy); transition: transform .2s var(--ruch-krzywa), color .2s; }
.dk-lista .dk-w > a:hover .zg-strzalka { transform: translateX(3px); color: var(--zloto-ciemne); }
.dk-pusto { margin-top: .75rem; }
@media (max-width: 56rem) {
  .dk-lista .dk-w > a { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "r s k" "r d t"; row-gap: .3rem; }
  .dk-rodzaj { grid-area: r; align-self: start; } .dk-srodek { grid-area: s; } .dk-kwota { grid-area: k; } .dk-data { grid-area: d; flex-direction: row; gap: .35rem; }
  .dk-stan-kol { grid-area: t; } .dk-lista .zg-strzalka { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dk-w { animation: none; opacity: 1; transform: none; } .dk-lista .dk-w > a { transition: none; } }

/* ===== 1.27.0: jedna konwencja tabel w calym Pulpicie (.tabela i .tabela-ksef) ===== */
.tabela { border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(28,35,51,.05); }
.tabela-przewijana { border-radius: 14px; }
.tabela-przewijana > .tabela { border: 0; border-radius: 0; box-shadow: none; }
.tabela th, .tabela-ksef thead th { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--atrament-cichy); background: var(--papier-app, #f6f4ee); padding: .75rem .85rem; white-space: nowrap; }
.tabela td { padding: .75rem .85rem; vertical-align: middle; }
.tabela tr:first-child > th { border-top: 0; }
.tabela td.r, .tabela th.r, .tabela-ksef td.r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tbody tr:not(:has(th)), .tabela-ksef tbody tr { transition: background-color .15s; }
.tabela tbody tr:not(:has(th)):hover > td, .tabela-ksef tbody tr:hover > td { background: var(--akcent-tlo-jasne, #fffdf7); }
.tabela tbody tr:not(:has(th)):hover > td:first-child, .tabela-ksef tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--zloto); }
.tabela-ksef tbody tr:hover { background: transparent; }
html.js .tabela tbody tr:not(:has(th)), html.js .tabela-ksef tbody tr { animation: tb-wjazd .35s var(--ruch-krzywa) both; animation-delay: calc(min(var(--i, 0), 20) * 22ms); }
@keyframes tb-wjazd { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tabela tr[hidden], .tabela-ksef tr[hidden] { display: none; }
/* kontrahent w tabeli KSeF: najwyzej dwie linie, pelna nazwa w podpowiedzi */
.tabela-ksef .kol-kontrahent .nazwa { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* pasek filtrow nad tabelami (tabela.js) */
.tb-pasek { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.tb-pola { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.tb-sel { margin: 0; } .tb-sel select { margin: 0; width: auto; border-radius: 12px; }
.tb-szukaj { flex: 0 1 18rem; }
.tb-sel .sr, .tb-szukaj .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-ile { font-weight: 500; font-size: .95rem; margin-left: .35rem; }
.tb-data { white-space: nowrap; color: var(--atrament-cichy); font-variant-numeric: tabular-nums; }
.tb-rodzaj { color: var(--atrament-cichy); }
.tb-kwota { font-weight: 700; } .tb-kwota.ujemna { color: #2f7a4d; }
.tb-pdf { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--linia); font-size: .75rem; font-weight: 700; color: var(--atrament); text-decoration: none; transition: border-color .2s, background-color .2s, transform .2s var(--ruch-krzywa); }
.tb-pdf:hover { border-color: var(--zloto); background: var(--akcent-tlo); transform: translateY(-1px); color: var(--atrament); }
.tb-pusto { margin: .75rem 0 0; }
/* Podatki: oznaczone jako zaplacone i zaplacone nie wygladaja na zalegle — wszedzie, nie tylko na Pulpicie (1.25 -> 1.27) */
.pd-lista li.oznaczona .pd-karta, .pd-lista li.zaplacona .pd-karta { background: rgba(59,139,90,.05); border-left: 3px solid #3b8b5a; }
.pd-lista li.oznaczona .pd-po, .pd-lista li.oznaczona .plakietka-stan.blad { display: none; }
.pd-lista li.oznaczona .kwota, .pd-lista li.zaplacona .kwota, .podatki li.oznaczona .kwota { color: var(--atrament-cichy); }
.pd-tabela tr.oznaczona > td { color: var(--atrament-cichy); }
.pd-tabela tr.oznaczona .plakietka-stan.blad { opacity: .55; }
@media print { .tabela tbody tr, .tabela-ksef tbody tr { animation: none !important; opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { html.js .tabela tbody tr:not(:has(th)), html.js .tabela-ksef tbody tr { animation: none; } .tb-pdf { transition: none; } }

/* 1.27.1: dopisek w kaflu "Po terminie" (Podatki) — ile z tego klient oznaczyl jako zaplacone */
.kafel-dopisek { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .75rem; font-weight: 600; color: #2f7a4d; }
.kafel-dopisek::before { content: "✓"; width: 1rem; height: 1rem; flex: none; border-radius: 50%; background: #3b8b5a; color: #fff; font-size: .6rem; display: grid; place-items: center; }

/* ===== 1.28.0: stronicowanie wszystkich list (wspolny pasek) ===== */
.tb-strony { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin: .85rem 0 .25rem; }
.tb-strony-ile { font-size: .85rem; color: var(--atrament-cichy); font-variant-numeric: tabular-nums; }
.tb-strony-nav { margin: 0; gap: .3rem; }
.tb-strony-nav a { min-width: 2.25rem; height: 2.25rem; padding: 0 .55rem; display: inline-grid; place-items: center; border-radius: 10px; font-size: .875rem; font-variant-numeric: tabular-nums; transition: border-color .2s, transform .2s var(--ruch-krzywa), background-color .2s; }
.tb-strony-nav a:hover { transform: translateY(-1px); }
.tb-na-stronie { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 400; }
.tb-na-stronie select { width: auto; margin: 0; border-radius: 10px; padding-top: .3rem; padding-bottom: .3rem; }
.tb-laduje { opacity: .55; transition: opacity .15s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tb-strony-nav a { transition: none; } }

/* 1.28.0: tabela Faktur z KSeF miesci sie w widoku — uklad zalezy od szerokosci KONTENERA (menu rozwiniete/zwiniete, iPad, 4K) */
.tabela-przewijana { container-type: inline-size; container-name: tabela; }
.tabela-ksef .kol-stan { width: auto; }
@container tabela (max-width: 78rem) {
  .tabela-ksef td, .tabela-ksef thead th { padding-left: .5rem; padding-right: .5rem; }
  .tabela-ksef .kol-numer { max-width: 9.5rem; }
  .tabela-ksef .kol-brutto { width: auto; }
  .tabela-ksef .kol-zaplata .zp-tekst, .tabela-ksef th.kol-zaplata .cicho { display: none; }
  .tabela-ksef .kol-akcja { width: auto; }
  .tabela-ksef .kol-akcja .ak-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabela-ksef .kol-akcja .akcja-pil { padding-left: .55rem; padding-right: .55rem; }
}
@container tabela (max-width: 62rem) {
  .tabela-ksef .kol-rodzaj { display: none; }
  .tabela-ksef .kol-data { width: auto; font-size: .82rem; }
  .tabela-ksef .kol-stan .plakietka { white-space: normal; }
}

/* 1.28.0: Pulpit — "Biuro prosi" na samej gorze (osobny kafel, nie w siatce "Wymaga uwagi") */
.pl-prosby { position: relative; overflow: hidden; margin: 0 0 1.25rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: linear-gradient(135deg, #fbf6e6 0%, var(--powierzchnia) 60%); border: 1px solid rgba(201,178,107,.7); box-shadow: 0 12px 30px rgba(201,178,107,.18); animation: wjazd .45s var(--ruch-krzywa) both; }
.pl-prosby::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--zloto); }
:root[data-motyw="ciemny"] .pl-prosby { background: linear-gradient(135deg, #2a2618 0%, var(--powierzchnia) 60%); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .pl-prosby { background: linear-gradient(135deg, #2a2618 0%, var(--powierzchnia) 60%); } }
.pl-prosby-gora { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; }
.pl-prosby-gora h2 { margin: 0; font-size: 1.2rem; }
.pl-prosby-gora p { margin: .1rem 0 0; }
.pl-prosby-ik { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--zloto); color: #15171c; }
.pl-prosby-ik .ik { width: 1.25rem; height: 1.25rem; }
.pl-prosby-ik.puls { animation: zgl-puls 1.8s ease-out infinite; }
.pl-prosby-lista { display: flex; flex-direction: column; gap: .5rem; }
.pl-prosba { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .75rem 1rem; border-radius: 12px; background: var(--powierzchnia); border: 1px solid var(--linia); color: var(--atrament); text-decoration: none; opacity: 0; animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms); transition: transform .2s var(--ruch-krzywa), border-color .2s, box-shadow .2s; }
.pl-prosba:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 22px rgba(0,0,0,.07); color: var(--atrament); }
.pl-prosba.nowa { border-color: rgba(201,178,107,.8); }
.pl-prosba.po { border-color: rgba(192,57,43,.45); }
.pl-prosba-tresc { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pl-prosba-tresc strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-prosba-nowe { color: var(--zloto-ciemne); }
.pl-prosba-postep { display: flex; align-items: center; gap: .5rem; white-space: nowrap; } .pl-prosba-postep .pr-pasek { width: 7rem; }
.pl-prosba-akcja { font-weight: 700; color: var(--zloto-ciemne); white-space: nowrap; }
.pl-prosba:hover .pl-u-strz { transform: translateX(3px); }
@media (max-width: 40rem) { .pl-prosba { grid-template-columns: minmax(0, 1fr) auto; } .pl-prosba-postep { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .pl-prosby, .pl-prosba { animation: none; opacity: 1; } .pl-prosby-ik.puls { animation: none; } .pl-prosba { transition: none; } }

/* ===== 1.29.0: Pulpit uporzadkowany — pasek terminow, sekcje szczegolow, Rozliczenia z JUSTICE ===== */
.pl-pasek { display: grid; grid-template-columns: repeat(var(--seg, 3), minmax(0, 1fr)); margin: 0 0 1.25rem; border-radius: 16px; overflow: hidden; background: var(--powierzchnia); border: 1px solid var(--linia); box-shadow: 0 6px 20px rgba(28,35,51,.05); animation: wjazd .45s var(--ruch-krzywa) both; }
.pl-pasek-a { display: block; color: var(--atrament); text-decoration: none; min-width: 0; }
.pl-pasek-a + .pl-pasek-a { border-left: 1px solid var(--linia); }
.pl-seg { display: flex; align-items: center; gap: .75rem; height: 100%; box-sizing: border-box; padding: .85rem 1.1rem; border-top: 4px solid var(--linia); transition: background-color .2s; }
.pl-pasek-a:hover .pl-seg { background: var(--akcent-tlo-jasne, #fffdf7); }
.pl-seg-ik { width: 2.35rem; height: 2.35rem; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--papier-app, #f3f2ee); color: var(--atrament-cichy); }
.pl-seg-ik .ik { width: 1.1rem; height: 1.1rem; }
.pl-seg-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pl-seg-et { font-size: .66rem; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; color: var(--atrament-cichy); }
.pl-seg-t strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-seg-op { font-size: .8rem; color: var(--atrament-cichy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-seg.ok { border-top-color: #3b8b5a; } .pl-seg.ok .pl-seg-ik { background: #3b8b5a; color: #fff; } .pl-seg.ok strong { color: #2f7a4d; }
.pl-seg.uwaga { border-top-color: var(--zloto); } .pl-seg.uwaga .pl-seg-ik { background: var(--zloto); color: #15171c; }
.pl-seg.zle { border-top-color: #c0392b; background: rgba(192,57,43,.05); } .pl-seg.zle .pl-seg-ik { background: #c0392b; color: #fff; animation: pl-puls-cz 1.8s ease-out infinite; } .pl-seg.zle strong { color: #a32d2d; }
:root[data-motyw="ciemny"] .pl-seg.ok strong { color: #7cc79a; } :root[data-motyw="ciemny"] .pl-seg.zle strong { color: #ef8a82; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .pl-seg.ok strong { color: #7cc79a; } :root:not([data-motyw="jasny"]) .pl-seg.zle strong { color: #ef8a82; } }
@media (max-width: 44rem) { .pl-pasek { grid-template-columns: 1fr; } .pl-pasek-a + .pl-pasek-a { border-left: 0; border-top: 1px solid var(--linia); } .pl-seg { border-top-width: 0; border-left: 4px solid var(--linia); padding: .65rem .9rem; } .pl-seg.ok { border-left-color: #3b8b5a; } .pl-seg.uwaga { border-left-color: var(--zloto); } .pl-seg.zle { border-left-color: #c0392b; } }
.pl-sekcja-et { margin: .35rem 0 .55rem; font-size: .7rem; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; color: var(--zloto-ciemne); }
#pl-podatki, #pl-rozliczenia, #pl-dokumenty { scroll-margin-top: calc(var(--naglowek-h, 4.25rem) + 1rem); }
.pl-rozl { border-top: 3px solid #3b8b5a; }
.pl-rozl:has(.pl-rozl-w.otwarta) { border-top-color: var(--zloto); } .pl-rozl:has(.pl-rozl-w.zla) { border-top-color: #c0392b; }
.pl-rozl-kwota { margin: .25rem 0 .75rem; display: flex; align-items: baseline; gap: .5rem; }
.pl-rozl-kwota strong { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-rozl-w.zla .pl-rozl-kwota strong { color: #a32d2d; }
.pl-rozl-kwota span { color: var(--atrament-cichy); font-size: .9rem; }
.pl-rozl-lista { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.pl-rozl-lista li { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--linia); font-size: .88rem; font-variant-numeric: tabular-nums; }
.pl-rozl-lista li.po { border-color: rgba(192,57,43,.35); } .pl-rozl-lista li.po .pl-rozl-termin { color: #a32d2d; }
.pl-rozl-termin { color: var(--atrament-cichy); }
.pl-rozl-ok { color: #2f7a4d; font-weight: 650; }
.pl-rozl-akcje { display: flex; gap: .5rem; flex-wrap: wrap; }
.pl-rozl-zaplac { flex: 1 1 12rem; display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; border-radius: 12px; background: linear-gradient(135deg, #e3cf8b, var(--zloto)); color: #15171c; font-weight: 800; text-decoration: none; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
.pl-rozl-zaplac:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(201,178,107,.35); color: #15171c; }
.pl-rozl-przelew { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1rem; border-radius: 12px; border: 1px solid var(--linia); color: var(--atrament); text-decoration: none; font-weight: 650; }
.pl-rozl-przelew:hover { border-color: var(--zloto); color: var(--atrament); }
.pl-dwie .pl-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; align-content: start; }
@media (prefers-reduced-motion: reduce) { .pl-pasek { animation: none; } .pl-seg.zle .pl-seg-ik { animation: none; } .pl-rozl-zaplac { transition: none; } }


/* ===== 1.30.0: odzyskiwanie hasla kodem SMS + e-mail — ta sama karta co logowanie (pola, oko, przycisk z logowania) ===== */
body.srodek .karta-reset label { font-size: .875rem; font-weight: 600; color: #3a4050; }
body.srodek .karta-reset input { border: 1px solid #d9d7cf; background: #fafaf7; padding: .75rem .85rem; font-size: 1rem; }
body.srodek .karta-reset input:focus { border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.25); outline: none; background: #fff; }
body.srodek .karta-reset button.glowny { margin-top: .5rem; padding: .85rem; background: #1c1c1c; border: 1px solid #1c1c1c; font-weight: 600; letter-spacing: .02em; }
body.srodek .karta-reset button.glowny:hover { background: #2a2a2a; border-color: var(--zloto); box-shadow: inset 0 -3px 0 var(--zloto); }
@media (max-width: 51.99rem) { .logowanie-marka { padding: 1.75rem 1.5rem; } .logowanie-haslo { font-size: 1.2rem; } .logowanie-zalety { display: none; } body.srodek .karta-reset { padding: 1.75rem 1.5rem; } }
:root[data-motyw="ciemny"] body.srodek .karta-reset { background: #1e2129; color: var(--atrament); }
:root[data-motyw="ciemny"] body.srodek .karta-reset h1 { color: #fff; } :root[data-motyw="ciemny"] body.srodek .karta-reset label { color: #cfc9b8; }
:root[data-motyw="ciemny"] body.srodek .karta-reset input { background: #15171c; border-color: #333744; color: var(--atrament); }
:root[data-motyw="ciemny"] body.srodek .karta-reset button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset { background: #1e2129; color: var(--atrament); } }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset h1 { color: #fff; } :root:not([data-motyw="jasny"]) body.srodek .karta-reset label { color: #cfc9b8; } }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset input { background: #15171c; border-color: #333744; color: var(--atrament); } }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset button.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); } }
body.srodek .karta-reset .log-pole input { width: 100%; box-sizing: border-box; height: 3.4rem; padding: 1.25rem .9rem .35rem 2.75rem; border: 1px solid #d8d0bb; border-radius: 12px; background: #fff; color: #15171c; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
body.srodek .karta-reset .log-pole input[name=haslo] { padding-right: 3.25rem; }
body.srodek .karta-reset .log-pole input:focus { outline: none; border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.22); }
body.srodek .karta-reset .log-pole input.zle { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
body.srodek .karta-reset .log-blad-serwer { border-radius: 10px; }
body.srodek .karta-reset button.log-przycisk { transform: translateZ(0); backface-visibility: hidden; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .6rem; height: 3.25rem; margin-top: .35rem; border-radius: 12px; font-size: 1rem; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
body.srodek .karta-reset button.log-przycisk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(201,178,107,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; pointer-events: none; }
body.srodek .karta-reset button.log-przycisk:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 12px 28px rgba(201,178,107,.35); background: #1c1c1c; }
body.srodek .karta-reset button.log-przycisk:hover::after { transform: translateX(120%); }
:root[data-motyw="ciemny"] body.srodek .karta-reset .log-pole input { background: #15171c; border-color: #333744; color: var(--atrament); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset .log-pole input { background: #15171c; border-color: #333744; color: var(--atrament); } }
@media (prefers-reduced-motion: reduce) { .logowanie-poswiata, .logowanie-uklad, .logowanie-zalety li, .log-caps { animation: none; opacity: 1; } .log-spinner { animation-duration: 1.6s; } body.srodek .karta-reset button.log-przycisk, body.srodek .karta-reset button.log-przycisk::after { transition: none; } }
body.srodek .karta-reset h1 { margin-bottom: .25rem; }
body.srodek .karta-reset form.rs-form { margin-top: 1rem; display: flex; flex-direction: column; gap: .85rem; }
.rs-kroki { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0 0 1.25rem; padding: 0; }
.rs-kroki li { height: 4px; border-radius: 4px; background: #e2dccb; }
.rs-kroki li.gotowy { background: var(--zloto); }
.rs-kroki li.biezacy { background: var(--zloto); animation: rs-puls 1.6s ease-in-out infinite; }
@keyframes rs-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.karta-reset > :not(.rs-kroki) { animation: rs-wjazd .45s var(--ruch-krzywa) backwards; }   /* backwards: po wejściu nie blokuje transform (hover przycisku) */
@keyframes rs-wjazd { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rs-blad { animation: rs-drgnij .4s var(--ruch-krzywa); }
.drgnij { animation: rs-drgnij .4s var(--ruch-krzywa) !important; }
@keyframes rs-drgnij { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.rs-przycisk { position: relative; }
.rs-przycisk .rs-kropki { display: none; gap: .25rem; margin-left: .35rem; }
.rs-przycisk .rs-kropki i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: rs-kropka 1s ease-in-out infinite; }
.rs-przycisk .rs-kropki i:nth-child(2) { animation-delay: .15s; } .rs-przycisk .rs-kropki i:nth-child(3) { animation-delay: .3s; }
@keyframes rs-kropka { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.rs-przycisk.laduje { pointer-events: none; opacity: .85; } .rs-przycisk.laduje .rs-kropki { display: inline-flex; } .rs-przycisk.laduje .log-spinner { display: none; }
.rs-link-przycisk { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 1rem; }
.rs-kanaly { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.rs-kanaly li { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 10px; border: 1px solid rgba(59,139,90,.5); background: rgba(59,139,90,.07); color: #2f6b45; font-size: .9rem; font-weight: 600; animation: rs-wjazd .4s var(--ruch-krzywa) backwards; animation-delay: calc(var(--i, 0) * 120ms + 120ms); }
.rs-kanaly .ik { width: 1.05rem; height: 1.05rem; }
.rs-kod { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem; }
body.srodek .karta-reset .rs-kod input { height: 56px; padding: 0; text-align: center; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid #ddd6c3; border-radius: 10px; background: #fff; color: #1c2333; transition: border-color .15s, box-shadow .15s, transform .15s; }
body.srodek .karta-reset .rs-kod input:focus { outline: none; border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.22); }
body.srodek .karta-reset .rs-kod input.pelne { border-color: var(--zloto); }
.rs-kod.zle input { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.15) !important; }
.rs-sila { height: 5px; border-radius: 5px; background: #efe9da; overflow: hidden; margin-top: -.35rem; }
.rs-sila span { display: block; height: 100%; width: 0; border-radius: 5px; background: #c0392b; transition: width .3s var(--ruch-krzywa), background-color .3s; }
.rs-sila-opis { margin: -.45rem 0 0; color: #6b6556; }
.rs-ponow { margin-top: .85rem; text-align: center; } .rs-ponow p { margin: 0; }
.rs-ponow button.link[disabled] { color: #9a9483; cursor: default; text-decoration: none; }
.rs-sukces { margin: .25rem auto 1rem; width: 84px; height: 84px; }
.rs-sukces-kolo { width: 84px; height: 84px; transform: scale(.4); animation: rs-skok .5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes rs-skok { to { transform: scale(1); } }
.rs-ptaszek { stroke-dasharray: 60; stroke-dashoffset: 60; animation: rs-rysuj .6s ease-out .25s forwards; }
@keyframes rs-rysuj { to { stroke-dashoffset: 0; } }
.konto-telefon { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; } .konto-telefon label { flex: 1 1 16rem; margin: 0; }
@media (max-width: 30rem) { body.srodek .karta-reset { max-width: none; border-radius: 0; } .rs-kod { gap: .3rem; } body.srodek .karta-reset .rs-kod input { height: 50px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .rs-kroki li.biezacy, .karta-reset > :not(.rs-kroki), .rs-blad, .drgnij, .rs-kanaly li, .rs-przycisk .rs-kropki i, .rs-sukces-kolo, .rs-ptaszek { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; } }
/* 1.30.1: telefon konta klienta — edycja przez biuro w karcie klienta */
.konto-telefon-biuro { display: flex; gap: .4rem; align-items: center; margin: .35rem 0 0; }
.konto-telefon-biuro input { margin: 0; width: 13rem; max-width: 100%; height: 2.1rem; padding: 0 .6rem; font-size: .85rem; border-radius: 8px; }
.konto-telefon-biuro button { margin: 0; padding: .3rem .7rem; font-size: .8rem; }

/* 1.30.2: "Nie pamiętam hasła" pod polem hasła (konwencja logowania) i spójny ekran odzyskiwania (karta 2FA + pola logowania) */
.log-zapomnialem { margin: -.35rem 0 0; text-align: right; font-size: .85rem; }
.log-zapomnialem a { position: relative; color: #7a6526; font-weight: 600; text-decoration: none; }
.log-zapomnialem a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: .45; transform: scaleX(.35); transform-origin: right; transition: transform .25s var(--ruch-krzywa), opacity .25s; }
.log-zapomnialem a:hover { color: #15171c; } .log-zapomnialem a:hover::after, .log-zapomnialem a:focus-visible::after { transform: scaleX(1); opacity: .8; }
:root[data-motyw="ciemny"] .log-zapomnialem a { color: var(--zloto); } :root[data-motyw="ciemny"] .log-zapomnialem a:hover { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .log-zapomnialem a { color: var(--zloto); } :root:not([data-motyw="jasny"]) .log-zapomnialem a:hover { color: #fff; } }
body.srodek .karta-reset a.log-przycisk { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 3.25rem; margin-top: 1rem; border-radius: 12px; font-size: 1rem; font-weight: 700; text-decoration: none; background: #15171c; color: #fff; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
body.srodek .karta-reset a.log-przycisk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(201,178,107,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; pointer-events: none; }
body.srodek .karta-reset a.log-przycisk:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 12px 28px rgba(201,178,107,.35); color: #fff; }
body.srodek .karta-reset a.log-przycisk:hover::after { transform: translateX(120%); }
body.srodek .karta-reset .rs-kroki { margin-top: -.25rem; }
.rs-kanaly li { justify-content: flex-start; }
.rs-kanal-ik { width: 1.15rem; height: 1.15rem; flex: none; display: flex; color: #2f6b45; }
.rs-kanal-ik svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-kanal-ok { margin-left: auto; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #3b8b5a; color: #fff; font-size: .7rem; display: grid; place-items: center; }
body.srodek .karta-reset .logowanie-pomoc { margin-top: 1rem; }
:root[data-motyw="ciemny"] body.srodek .karta-reset .rs-kod input { background: #15171c; border-color: #333744; color: var(--atrament); }
:root[data-motyw="ciemny"] .rs-sila, :root[data-motyw="ciemny"] .rs-kroki li:not(.gotowy):not(.biezacy) { background: #333744; }
:root[data-motyw="ciemny"] .rs-kanaly li { color: #7cc79a; background: rgba(59,139,90,.12); } :root[data-motyw="ciemny"] .rs-kanal-ik { color: #7cc79a; }
:root[data-motyw="ciemny"] .rs-sila-opis { color: #a9a494; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset .rs-kod input { background: #15171c; border-color: #333744; color: var(--atrament); } :root:not([data-motyw="jasny"]) .rs-sila, :root:not([data-motyw="jasny"]) .rs-kroki li:not(.gotowy):not(.biezacy) { background: #333744; } :root:not([data-motyw="jasny"]) .rs-kanaly li { color: #7cc79a; background: rgba(59,139,90,.12); } :root:not([data-motyw="jasny"]) .rs-kanal-ik { color: #7cc79a; } :root:not([data-motyw="jasny"]) .rs-sila-opis { color: #a9a494; } }
@media (prefers-reduced-motion: reduce) { .log-zapomnialem a::after, body.srodek .karta-reset a.log-przycisk, body.srodek .karta-reset a.log-przycisk::after { transition: none; } }
/* 1.30.2: ekran odzyskiwania — pływające etykiety dokładnie jak na logowaniu (karta-logowania ma własne label 600) i ikona w złotym kole widoczna */
body.srodek .karta-reset .log-pole label { font-size: 1rem; font-weight: 400; color: #6b6556; margin: 0; }
body.srodek .karta-reset .log-pole input:focus + label, body.srodek .karta-reset .log-pole input:not(:placeholder-shown) + label, body.srodek .karta-reset .log-pole input:-webkit-autofill + label { font-size: .72rem; color: #8a742f; }
:root[data-motyw="ciemny"] body.srodek .karta-reset .log-pole label { color: #a9a494; } :root[data-motyw="ciemny"] body.srodek .karta-reset .log-pole input:focus + label, :root[data-motyw="ciemny"] body.srodek .karta-reset .log-pole input:not(:placeholder-shown) + label { color: var(--zloto); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset .log-pole label { color: #a9a494; } :root:not([data-motyw="jasny"]) body.srodek .karta-reset .log-pole input:focus + label, :root:not([data-motyw="jasny"]) body.srodek .karta-reset .log-pole input:not(:placeholder-shown) + label { color: var(--zloto); } }
.karta-2fa .znak-2fa .ik.duzy { width: 1.4rem; height: 1.4rem; color: #15171c; }
.rs-kanaly { margin-bottom: .35rem; }
body.srodek .karta-reset .rs-blad { margin: .6rem 0 0; }
body.srodek .karta-reset .rs-kod input { letter-spacing: 0; text-indent: 0; }
:root[data-motyw="ciemny"] body.srodek .karta-reset .rs-kod input.pelne, :root[data-motyw="ciemny"] body.srodek .karta-reset .rs-kod input:focus { border-color: var(--zloto); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) body.srodek .karta-reset .rs-kod input.pelne, :root:not([data-motyw="jasny"]) body.srodek .karta-reset .rs-kod input:focus { border-color: var(--zloto); } }

/* 1.30.3: poświata ekranów środkowych (2FA, odzyskiwanie hasła) nie jest już przycinana do prostokąta — rysowana względem okna,
   nie kolumny treści (ta ma overflow: hidden). Karta nad poświatą. */
body.srodek .logowanie-poswiata { position: fixed; left: calc(50% - 44rem); top: calc(40% - 30rem); width: 60rem; height: 60rem; z-index: 0; background: radial-gradient(circle, rgba(201,178,107,.13), rgba(201,178,107,0) 62%); }
body.srodek .karta-logowania { position: relative; z-index: 1; }
/* 1.30.3: w ciemnym motywie przycisk jest złoty — złoty przebłysk i złoty cień były na nim niewidoczne. Jasny przebłysk, jaśniejsze tło i mocniejszy cień
   (logowanie, 2FA, odzyskiwanie hasła — ten sam przycisk). */
:root[data-motyw="ciemny"] body.srodek .karta-2fa .log-przycisk::after, :root[data-motyw="ciemny"] .logowanie-karta button.log-przycisk::after { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); }
:root[data-motyw="ciemny"] body.srodek .karta-2fa .log-przycisk:hover, :root[data-motyw="ciemny"] .logowanie-karta button.log-przycisk:hover { background: #dcc682; color: #15171c; box-shadow: 0 14px 32px rgba(201,178,107,.45), 0 0 0 1px rgba(255,255,255,.25) inset; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) body.srodek .karta-2fa .log-przycisk::after, :root:not([data-motyw="jasny"]) .logowanie-karta button.log-przycisk::after { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); }
  :root:not([data-motyw="jasny"]) body.srodek .karta-2fa .log-przycisk:hover, :root:not([data-motyw="jasny"]) .logowanie-karta button.log-przycisk:hover { background: #dcc682; color: #15171c; box-shadow: 0 14px 32px rgba(201,178,107,.45), 0 0 0 1px rgba(255,255,255,.25) inset; }
}
/* 1.30.3: przycisk logowania / 2FA / odzyskiwania — zmiana tła i koloru też płynna (dotąd przeskakiwała, a w ciemnym motywie hover był niewidoczny) */
.logowanie-karta button.log-przycisk, body.srodek .karta-2fa button.log-przycisk, body.srodek .karta-reset a.log-przycisk { transition: transform .2s var(--ruch-krzywa), box-shadow .25s, background-color .25s, color .25s; }
/* "Nie pamiętam hasła": wyraźniejszy hover — podkreślenie wyrasta od zera, kolor przechodzi płynnie */
.log-zapomnialem a { transition: color .2s; }
.log-zapomnialem a::after { transform: scaleX(0); opacity: .9; }
.log-zapomnialem a:hover::after, .log-zapomnialem a:focus-visible::after { transform: scaleX(1); opacity: .9; }
/* 1.31.0: Ustawienia -> SMS — informacja o tokenie z Pryzmata (I-26) */
.ust-info { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(59,139,90,.08); border: 1px solid rgba(59,139,90,.35); font-size: .88rem; }

/* ===== 1.32.0: załączniki biura w czacie — ikona typu, podgląd obrazu/PDF w nowej karcie, osobne pobranie, miniatury obrazów ===== */
.zal-miniatury { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.zal-mini { display: block; width: 9rem; height: 6.5rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--linia); background: var(--papier); transition: transform .2s var(--ruch-krzywa), box-shadow .2s, border-color .2s; }
.zal-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zal-mini:hover { transform: translateY(-2px); border-color: var(--zloto); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.chip.zal-chip { padding: 0; overflow: hidden; gap: 0; }
.zal-chip .zal-glowny { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem .3rem .4rem; color: inherit; text-decoration: none; }
.zal-chip .zal-pobierz { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; align-self: stretch; border-left: 1px solid var(--linia); color: var(--atrament-cichy); transition: background-color .15s, color .15s; }
.zal-chip .zal-pobierz:hover { background: var(--akcent-tlo); color: var(--zloto-ciemne); }
.zal-chip .zal-pobierz .ik { width: .95rem; height: .95rem; }
.zal-ik { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.15rem; padding: 0 .3rem; border-radius: 5px; font-size: .6rem; font-weight: 800; letter-spacing: .04em; background: var(--linia); color: var(--atrament); }
.zal-chip.typ-pdf .zal-ik { background: #c0392b; color: #fff; }
.zal-chip.typ-obraz .zal-ik { background: #3b8b5a; color: #fff; }
.zal-chip.typ-arkusz .zal-ik { background: #1e7145; color: #fff; }
.zal-chip.typ-doc .zal-ik { background: #2b579a; color: #fff; }
.zal-chip.typ-plik .zal-ik { background: transparent; padding: 0; min-width: 0; }
.zal-chip.typ-plik .zal-ik .ik { width: .9rem; height: .9rem; }
.dymek.strona-biuro .zal-chip { background: var(--powierzchnia); }
@media (prefers-reduced-motion: reduce) { .zal-mini { transition: none; } }

/* 1.33.5: zywe fragmenty Pulpitu — krotkie podswietlenie po odswiezeniu */
[data-opis].zmiana { animation: zywa-blysk 1.2s ease-out; border-radius: 12px; }
@keyframes zywa-blysk { 0% { box-shadow: 0 0 0 0 rgba(201,178,107,.55); } 100% { box-shadow: 0 0 0 10px rgba(201,178,107,0); } }
/* 1.34.2: strona posrednia platnosci Przelewy24 */
.p24-spinner { display: block; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 3px solid rgba(21,23,28,.25); border-top-color: #15171c; animation: p24-obrot .9s linear infinite; }
@keyframes p24-obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p24-spinner { animation: none; } }

/* ===== 1.35.0: faktury w walucie obcej — kurs NBP w formularzu, VAT w PLN ===== */
.fak-kurs { grid-column: 1 / -1; }
.fak-kurs-wiersz { display: flex; gap: .5rem; align-items: center; }
.fak-kurs-wiersz input { flex: 0 1 12rem; margin: 0; font-variant-numeric: tabular-nums; }
.fak-kurs-wiersz button { margin: 0; white-space: nowrap; }
.fak-kurs-info { margin: .35rem 0 0; color: var(--atrament-cichy); }
.fak-kurs-info.ok-tekst { color: #2f7a4d; } .fak-kurs-info.blad-tekst { color: var(--blad); }
.suma-vat-pln { border-top: 1px dashed var(--linia); padding-top: .4rem; margin-top: .25rem; }
.suma-vat-pln small { display: block; font-weight: 400; font-size: .72rem; }
.suma-vat-pln[hidden] { display: none; }
.poz tr.vat-pln td, table.kwoty tr.vat-pln td { font-size: .95em; }

/* ===== 1.37.0: wyszukiwarka kontrahenta z historii + podswietlenie uzupelnionych pol ===== */
.kt-szukaj { position: relative; display: flex; align-items: center; min-width: 18rem; flex: 0 1 24rem; }
.kt-szukaj .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kt-ik { position: absolute; left: .7rem; color: var(--zloto-ciemne); display: flex; pointer-events: none; }
.kt-ik .ik { width: 1rem; height: 1rem; }
.kt-szukaj input { width: 100%; margin: 0; padding-left: 2.2rem; height: 2.4rem; border-radius: 12px; font-size: .9rem; }
.kt-lista { position: absolute; left: 0; right: 0; top: calc(100% + .4rem); z-index: 30; margin: 0; padding: .35rem; list-style: none; background: var(--powierzchnia); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.18), 0 0 0 1px rgba(201,178,107,.4); max-height: 20rem; overflow-y: auto; animation: hf-pop .2s var(--ruch-krzywa) both; }
.kt-lista[hidden] { display: none; }
.kt-lista li[role=option] { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; border-radius: 9px; cursor: pointer; font-size: .9rem; transition: background-color .12s; }
.kt-lista li[role=option]:hover, .kt-lista li[role=option].aktywna { background: var(--akcent-tlo); }
.kt-lista .kt-meta { font-size: .78rem; color: var(--atrament-cichy); }
.kt-lista .kt-pusto { padding: .6rem .65rem; font-size: .85rem; color: var(--atrament-cichy); }
input.uzupelnione, select.uzupelnione, textarea.uzupelnione { animation: kt-uzup 1.5s ease-out; }
@keyframes kt-uzup { 0% { box-shadow: 0 0 0 0 rgba(201,178,107,.7); background-color: rgba(201,178,107,.22); } 100% { box-shadow: 0 0 0 8px rgba(201,178,107,0); background-color: transparent; } }
.sekcja-blysk { animation: zywa-blysk 1.3s ease-out; }
@media (prefers-reduced-motion: reduce) { .kt-lista, input.uzupelnione, select.uzupelnione, .sekcja-blysk { animation: none; } }

/* ===== 1.37.0: "Sprawdz i wystaw" — kompletny przeglad ===== */
body.srodek .karta-logowania.szeroka.pt-karta { max-width: 64rem; }
.pt-naglowek { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pt-nad { margin: 0 0 .2rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto-ciemne); font-weight: 700; }
.pt-naglowek h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.pt-numer { font-weight: 500; color: var(--atrament-cichy); }
.pt-ostrzezenie { display: flex; gap: .6rem; align-items: flex-start; margin: 0; max-width: 26rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.35); color: #8f2c22; font-size: .85rem; line-height: 1.4; }
.pt-wykrzyknik { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #c0392b; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.pt-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pt-blok { padding: 1rem 1.1rem; border-radius: 14px; background: var(--papier); border: 1px solid var(--linia); animation: pt-wjazd .45s var(--ruch-krzywa) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.pt-blok-szeroki { grid-column: 1 / -1; }
.pt-blok h2 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .7rem; font-size: 1rem; }
.pt-zmien { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--zloto-ciemne); text-decoration: none; position: relative; }
.pt-zmien::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ruch-krzywa); }
.pt-zmien:hover::after { transform: scaleX(1); transform-origin: left; }
.pt-dane { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; font-size: .92rem; line-height: 1.45; }
.pt-dane dt { color: var(--atrament-cichy); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding-top: .15rem; }
.pt-dane dd { margin: 0; }
.pt-ok { color: #2f7a4d; font-weight: 700; font-size: .8rem; }
.pt-uwaga { color: #a32d2d; font-weight: 700; }
.pt-iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pt-pozycje th, .pt-pozycje td, .pt-stawki th, .pt-stawki td { padding: .45rem .6rem; font-size: .88rem; }
.pt-sumy { display: flex; justify-content: flex-end; margin-top: .6rem; }
.pt-sumy .pt-stawki { width: auto; min-width: 24rem; }
.pt-stawki tr.razem td { font-weight: 700; border-top: 2px solid var(--zloto); }
.pt-uwagi { margin: 0; white-space: pre-line; font-size: .92rem; }
.pt-przyciski { margin-top: 1.25rem; }
@keyframes pt-wjazd { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 48rem) { .pt-siatka { grid-template-columns: 1fr; } .pt-dane { grid-template-columns: 1fr; gap: .1rem .5rem; } .pt-dane dt { margin-top: .4rem; } .pt-sumy .pt-stawki { width: 100%; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .pt-blok { animation: none; } .pt-zmien::after { transition: none; } }
:root[data-motyw="ciemny"] .pt-ostrzezenie { background: rgba(192,57,43,.18); color: #f3b3ab; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .pt-ostrzezenie { background: rgba(192,57,43,.18); color: #f3b3ab; } }

/* ===== 1.37.1: dopracowanie wyszukiwarki kontrahenta i banera ===== */
.kt-szukaj input { border: 1px solid var(--linia); background: var(--powierzchnia); transition: border-color .2s, box-shadow .2s; }
.kt-szukaj input:focus { outline: none; border-color: var(--zloto); box-shadow: 0 0 0 3px rgba(201,178,107,.25); }
.kt-szukaj input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.kt-lista { padding: .3rem; }
.kt-lista .kt-nagl { padding: .45rem .65rem .3rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto-ciemne); font-weight: 700; }
.kt-lista li[role=option] { flex-direction: row; align-items: center; gap: .7rem; animation: pt-wjazd .25s var(--ruch-krzywa) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.kt-awatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: linear-gradient(135deg, #e6d49b, #c9b26b); color: #15171c; }
.kt-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.kt-tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-tekst mark { background: rgba(201,178,107,.35); color: inherit; border-radius: 3px; padding: 0 1px; }
.kt-rodzaj { flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: .15rem .45rem; border-radius: 999px; border: 1px solid var(--linia); color: var(--atrament-cichy); }
.kt-lista li[role=option].aktywna .kt-awatar, .kt-lista li[role=option]:hover .kt-awatar { box-shadow: 0 0 0 3px rgba(201,178,107,.3); }
.kt-baner { display: flex; align-items: center; gap: .75rem; margin: -.25rem 0 1rem; padding: .65rem .85rem; border-radius: 12px; background: rgba(59,139,90,.08); border: 1px solid rgba(59,139,90,.35); }
.kt-baner[hidden] { display: none; }
.kt-baner.wjazd { animation: kt-baner-wjazd .45s var(--ruch-krzywa); }
@keyframes kt-baner-wjazd { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
.kt-baner-ik { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #3b8b5a; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.kt-baner-tresc { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.kt-baner-tresc strong { font-size: .92rem; }
.kt-cofnij { flex: none; width: auto; margin: 0; padding: .35rem .75rem; font-size: .8rem; background: transparent; border: 1px solid rgba(59,139,90,.45); color: #2f6b45; border-radius: 999px; transition: background-color .15s, color .15s; }
.kt-cofnij:hover { background: #3b8b5a; color: #fff; }
.pole-z-przyciskiem input { min-width: 11rem; }
:root[data-motyw="ciemny"] .kt-baner { background: rgba(59,139,90,.14); } :root[data-motyw="ciemny"] .kt-cofnij { color: #7cc79a; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .kt-baner { background: rgba(59,139,90,.14); } :root:not([data-motyw="jasny"]) .kt-cofnij { color: #7cc79a; } }
@media (prefers-reduced-motion: reduce) { .kt-lista li[role=option], .kt-baner.wjazd { animation: none; } }

/* ===== 1.37.1: "Sprawdz i wystaw" — kwota w naglowku, przyklejony pasek akcji, zywe karty ===== */
.pt-kwota { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .1rem; padding: .8rem 1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(201,178,107,.16), rgba(201,178,107,.04)); border: 1px solid rgba(201,178,107,.45); animation: pt-wjazd .45s var(--ruch-krzywa) backwards; }
.pt-kwota-et { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto-ciemne); font-weight: 700; }
.pt-kwota-liczba { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pt-kwota-liczba span { font-size: 1rem; font-weight: 600; color: var(--atrament-cichy); }
.pt-kwota-pod { font-size: .78rem; color: var(--atrament-cichy); }
.pt-blok { transition: transform .2s var(--ruch-krzywa), box-shadow .2s, border-color .2s; }
.pt-blok:hover { transform: translateY(-2px); border-color: rgba(201,178,107,.55); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.pt-dol { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.25rem -1rem -1rem; padding: .9rem 1rem; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--powierzchnia) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linia); }
.pt-dol .pt-ostrzezenie { max-width: 30rem; padding: .5rem .7rem; font-size: .8rem; }
.pt-dol .pt-przyciski { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pt-dol .pt-vies { flex-basis: 100%; }
.pt-wystaw { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; font-size: 1rem; position: relative; overflow: hidden; transition: transform .2s var(--ruch-krzywa), box-shadow .2s; }
.pt-wystaw::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; pointer-events: none; }
.pt-wystaw:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,178,107,.35); }
.pt-wystaw:hover::after { transform: translateX(120%); }
.pt-wystaw.laduje { pointer-events: none; opacity: .9; }
.pt-wystaw .rs-kropki { display: inline-flex; gap: .25rem; margin-left: .15rem; } .pt-wystaw .rs-kropki i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: rs-kropka 1s ease-in-out infinite; } .pt-wystaw .rs-kropki i:nth-child(2) { animation-delay: .15s; } .pt-wystaw .rs-kropki i:nth-child(3) { animation-delay: .3s; }
@media (max-width: 48rem) { .pt-kwota { align-items: flex-start; text-align: left; width: 100%; } .pt-dol { margin: 1rem -.5rem -.5rem; } .pt-dol .pt-przyciski { width: 100%; } .pt-dol .pt-przyciski form, .pt-wystaw { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .pt-kwota, .pt-blok { animation: none; transition: none; } .pt-blok:hover { transform: none; } }
/* 1.37.1: overflow: clip (zamiast hidden) — przycina tak samo, ale nie tworzy kontenera przewijania, wiec position: sticky (pasek akcji
   "Sprawdz i wystaw") przykleja sie do dolu okna */
body.srodek .tresc { overflow: clip; }
.pt-naglowek > div:first-child { flex: 1 1 22rem; min-width: 0; }
.pt-kwota { flex: 0 0 auto; }
a.pt-zmien, a.pt-zmien:visited { color: var(--zloto-ciemne); }
:root[data-motyw="ciemny"] a.pt-zmien { color: var(--zloto); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) a.pt-zmien { color: var(--zloto); } }
.pt-dol { flex-wrap: nowrap; }
.pt-dol .pt-ostrzezenie { max-width: 24rem; flex: 1 1 18rem; }
.pt-dol .pt-przyciski { flex: 0 0 auto; flex-wrap: nowrap; }
a.pt-zmien, a.pt-zmien:visited { color: #8a742f; }
@media (max-width: 60rem) { .pt-dol { flex-wrap: wrap; } .pt-dol .pt-ostrzezenie { max-width: none; } }
/* telefon: siatka nie rozpycha karty (tabele przewijaja sie w swoich pojemnikach), pasek akcji nad dolnym menu */
.pt-siatka > * { min-width: 0; }
@media (max-width: 59.99rem) { body.zalogowany .pt-dol { bottom: calc(3.9rem + env(safe-area-inset-bottom)); } }
@media (max-width: 48rem) { .pt-kwota-liczba { font-size: 1.6rem; } .pt-dol .pt-ostrzezenie { display: none; } body.srodek .karta-logowania.szeroka.pt-karta { padding: 1.25rem 1rem; } }
.pt-wystaw-kw { white-space: nowrap; }
@media (max-width: 48rem) { .pt-wystaw-kw { display: none; } .pt-dol .pt-przyciski { flex-wrap: nowrap; } .pt-dol .pt-przyciski form { flex: 1; } .pt-dol .przycisk-link { white-space: nowrap; } }

/* ===== 1.38.0: reakcje w czacie — wpadanie z przestrzeleniem i dymek z imieniem ===== */
.pigulka-reakcji.wpada { animation: pr-wpada .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pr-wpada { 0% { transform: scale(.6); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.reakcja-form { position: relative; display: inline-block; }
.pr-dymek { position: absolute; left: 50%; bottom: calc(100% + .35rem); transform: translateX(-50%); white-space: nowrap; padding: .25rem .55rem; border-radius: 8px; background: #15171c; color: #fff; font-size: .72rem; box-shadow: 0 8px 20px rgba(0,0,0,.25); animation: pr-dymek-wjazd .25s var(--ruch-krzywa); pointer-events: none; z-index: 5; }
.pr-dymek::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #15171c; }
.pr-dymek.znika { animation: pr-dymek-znika .35s forwards; }
@keyframes pr-dymek-wjazd { from { opacity: 0; transform: translate(-50%, 4px); } }
@keyframes pr-dymek-znika { to { opacity: 0; transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .pigulka-reakcji.wpada, .pr-dymek { animation: none; } }
/* 1.38.1: pigulki reakcji — wieksze emoji, liczba w cyfrach tabelarycznych, uniesienie przy najechaniu, wcisniecie przy kliknieciu */
.pigulka-reakcji { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; font-size: .85rem; line-height: 1.2; transition: transform .15s var(--ruch-krzywa), border-color .15s, background-color .15s, box-shadow .15s; }
.pigulka-reakcji .pr-emoji { font-size: 1rem; line-height: 1; }
.pigulka-reakcji .pr-ile { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--atrament-cichy); }
.pigulka-reakcji.moja .pr-ile { color: var(--zloto-ciemne); }
.pigulka-reakcji:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.pigulka-reakcji:active { transform: scale(.94); }
:root[data-motyw="ciemny"] .pigulka-reakcji { background: rgba(255,255,255,.04); } :root[data-motyw="ciemny"] .pigulka-reakcji.moja { background: rgba(201,178,107,.18); border-color: var(--zloto); } :root[data-motyw="ciemny"] .pigulka-reakcji.moja .pr-ile { color: var(--zloto); }
.pr-dymek { font-weight: 600; letter-spacing: .01em; }
:root[data-motyw="ciemny"] .pr-dymek { background: #f4efe1; color: #15171c; } :root[data-motyw="ciemny"] .pr-dymek::after { border-top-color: #f4efe1; }
@media (prefers-reduced-motion: reduce) { .pigulka-reakcji:hover, .pigulka-reakcji:active { transform: none; } }
:root[data-motyw="ciemny"] .inicjal.zloty { background: linear-gradient(135deg, #e6d49b, #c9b26b); color: #15171c; }   /* 1.38.1: w ciemnym ciemne kolo znikalo na tle */
/* 1.40.0: powod odrzucenia KSeF na karcie faktury */
/* 1.40.1: odrzucenie przez KSeF — karta alertu w konwencji (ikona w kole, powod jako cytat, akcje) */
.fd-odrzucenie { display: flex; gap: .9rem; align-items: flex-start; margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(192,57,43,.07); border: 1px solid rgba(192,57,43,.35); color: inherit; animation: pt-wjazd .4s var(--ruch-krzywa) backwards; }
.fd-odrz-ik { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: #c0392b; color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 0 0 rgba(192,57,43,.4); animation: fd-odrz-puls 2.4s ease-out 2; }
@keyframes fd-odrz-puls { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 70% { box-shadow: 0 0 0 10px rgba(192,57,43,0); } 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); } }
.fd-odrz-tresc { flex: 1; min-width: 0; }
.fd-odrz-tresc > strong { display: block; color: #a32d2d; font-size: 1.02rem; margin-bottom: .35rem; }
.fd-odrzucenie-powod { margin: 0 0 .7rem; padding: .55rem .75rem; border-left: 3px solid #c0392b; background: var(--powierzchnia); border-radius: 0 8px 8px 0; font-size: .9rem; line-height: 1.45; }
.fd-odrz-et { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #a32d2d; font-weight: 700; margin-bottom: .15rem; }
.fd-odrz-akcje { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.fd-odrz-akcje form { margin: 0; }
:root[data-motyw="ciemny"] .fd-odrzucenie { background: rgba(192,57,43,.14); } :root[data-motyw="ciemny"] .fd-odrz-tresc > strong, :root[data-motyw="ciemny"] .fd-odrz-et { color: #f3b3ab; }
@media (prefers-reduced-motion: reduce) { .fd-odrzucenie, .fd-odrz-ik { animation: none; } }

/* ===== 1.40.3: audyt wizualny calego Pulpitu (Chromium: 1440/1024/390, jasny/ciemny) ===== */
/* korekta faktury: tabela pozycji w pojemniku przewijanym, sensowne minima kolumn (nazwa i stawka VAT byly sciskane do kilku znakow) */
.kor-przewijana { overflow-x: auto; }
.kor-przewijana .pozycje { min-width: 36rem; width: 100%; }
.kor-przewijana .pozycje th, .kor-przewijana .pozycje td { padding-left: .45rem; padding-right: .45rem; }
.kor-przewijana .pozycje input[name=poz_opis] { width: 100%; }
.pozycje input[name=poz_opis] { min-width: 9rem; }
.pozycje select[name=poz_stawka] { min-width: 6rem; }
.pozycje input[name=poz_ilosc] { max-width: 5rem; } .pozycje input[name=poz_jm] { max-width: 4.5rem; } .pozycje input[name=poz_cena] { max-width: 7.5rem; }
/* telefon: w naglowku tylko godlo z logo (calosc 150 px wypychala menu konta poza ekran — konto i wylogowanie byly niedostepne bez przewijania w bok) */
@media (max-width: 40rem) {
  body.zalogowany .marka img { width: 2.2rem; height: 2.2rem; object-fit: cover; object-position: left center; }
  .hf-firma { max-width: 46vw; }
}
.kor-przewijana { max-width: 100%; } .sekcja:has(> .kor-przewijana) { min-width: 0; }
/* wyciagi: kolumna Plik nie moze sie zapasc (nazwa "W…" i ucieta data przy duzych saldach); saldo moze przejsc do dwoch linii */
.tb-wyciagi td.kol-numer, table td.kol-numer:has(.kol-plik) { min-width: 11rem; max-width: 16rem; }
.kol-plik { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wy-saldo { min-width: 9rem; } .wy-saldo .kwota { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
/* KSeF: kropka "nowa" w tej samej linii co numer (wypychala numer do drugiej linii) */
.kol-numer .kropka-nowa { display: inline-block; vertical-align: middle; margin-right: .35rem; }
.tabela-ksef .kol-numer .kropka-nowa + a { display: inline-block; max-width: calc(100% - .9rem); vertical-align: middle; }
/* Moje konto: kropka stanu w jednej linii z opisem (stala nad tekstem) */
.konto-stan-l { display: inline-flex; align-items: center; gap: .4rem; }
/* telefon: naglowki kart formularza — numer nie sciska sie w owal, opis przechodzi pod tytul; kafle rodzajow mieszcza sie w ekranie */
.karta-numer { flex: none; }
@media (max-width: 40rem) {
  .karta-naglowek { flex-wrap: wrap; } .karta-naglowek .karta-akcja { flex-basis: 100%; margin-left: 0; }
  .fak-rodzaje, .fak-rodzaje-dok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fak-krok0, .fak-krok0 * { min-width: 0; }
}
@media (max-width: 40rem) { .pd-prawo { flex-wrap: wrap; row-gap: .35rem; min-width: 0; } .pd-prawo > * { min-width: 0; } }
/* formularz faktury: kolumna glowna nie moze rosnac ponad ekran przez min-content tabeli pozycji (telefon: karty uciete z prawej) */
.fak-glowna { grid-template-columns: minmax(0, 1fr); } .fak-glowna > * { min-width: 0; }
.kor-przewijana .pozycje input[name=poz_ilosc] { width: 4.2rem; } .kor-przewijana .pozycje input[name=poz_jm] { width: 3.6rem; }
.kor-przewijana .pozycje input[name=poz_cena] { width: 6.6rem; } .kor-przewijana .pozycje select[name=poz_stawka] { width: 6.2rem; min-width: 0; }
/* korekta: przy waskiej karcie (tablet / laptop z menu) wiersze pozycji jako siatka 2 linii zamiast poziomego przewijania */
.kor-przewijana { container-type: inline-size; overflow-x: visible; }
@container (max-width: 48rem) {
  .kor-przewijana .pozycje { min-width: 0; }
  .kor-przewijana .pozycje thead { display: none; }
  .kor-przewijana .pozycje tbody tr:not(.wzor) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .4rem .5rem; padding: .6rem 0; border-top: 1px solid var(--linia); align-items: center; }
  .kor-przewijana .pozycje tbody tr:not(.wzor) > td { padding: 0; border: 0; }
  .kor-przewijana .pozycje tbody tr:not(.wzor) > td:first-child { grid-column: 1 / -1; }
  .kor-przewijana .pozycje tbody input, .kor-przewijana .pozycje tbody select { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .kor-przewijana .pozycje td.n::before { content: "netto "; color: var(--atrament-cichy); font-size: .75rem; }
  .kor-przewijana .pozycje td.b::before { content: "brutto "; color: var(--atrament-cichy); font-size: .75rem; }
  .kor-przewijana .pozycje tfoot td { display: block; text-align: right; }
}
@container (max-width: 48rem) {
  .kor-przewijana .pozycje tbody tr:not(.wzor) { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .7rem .6rem; }
  .kor-przewijana .pozycje tbody tr:not(.wzor) > td.n { grid-column: 1 / 3; text-align: left; }
  .kor-przewijana .pozycje tbody tr:not(.wzor) > td.b { grid-column: 3 / 4; text-align: left; }
  .kor-przewijana .pozycje tbody tr:not(.wzor) > td:last-child { grid-column: 4 / 5; justify-self: end; }
  .kor-przewijana .pozycje tfoot td { padding-right: .6rem; }
}
/* karta faktury / deklaracji: kolumny siatki nie rosna ponad ekran (telefon: podglad wystawal ~44 px) */
.fd-uklad > * { min-width: 0; }
@media (max-width: 64rem) { .fd-uklad { grid-template-columns: minmax(0, 1fr); } }
/* Sprawdz i wystaw: dlugi numer rachunku lamie sie na telefonie; "Zmien" zawsze zlote */
.pt-iban { overflow-wrap: anywhere; }
body.srodek .karta-logowania a.pt-zmien { color: #8a742f; }
:root[data-motyw="ciemny"] body.srodek .karta-logowania a.pt-zmien { color: var(--zloto); }

/* etykieta "Wystawca" — zloto na jasnym tle mialo 1,9:1 */
.fak-wystawca-et { color: var(--zloto-ciemne); font-weight: 700; }

/* skroty terminu "7 · 14 · 30 dni" — wyrazniejsze pigulki (blade zloto mialo 2,1:1) */
.termin-skroty .termin-dni { color: var(--zloto-ciemne); font-weight: 700; padding: 0 .3rem; border-radius: 6px; text-decoration: none; }
.termin-skroty .termin-dni:hover { background: var(--akcent-tlo); }
input[type=date] { min-height: 2.6rem; }
/* NAPRAWA: wybor firmy (klient z kilkoma firmami, po zalogowaniu) — body.zalogowany nadpisywal ciemne tlo strony logowania jasnym,
   a tytul i opis sa biale -> w jasnym motywie niewidoczne (kontrast 1,1:1). Tlo jak na logowaniu. */
body.logowanie.zalogowany { background: radial-gradient(120% 80% at 20% 0%, #24262c 0%, #17181c 45%, #101114 100%); }
.tabela td.wy-saldo { white-space: normal; overflow: visible; line-height: 1.35; }
.tabela-ksef.tabela-wyciagi td.wy-saldo { white-space: normal; overflow: visible; text-overflow: clip; }
/* podglad faktury/deklaracji: aspect-ratio 1/1.3 + min-height 34rem wymuszaly szerokosc 418 px (telefon: wystawalo poza ekran) */
.fak-ramka { max-width: 100%; }
@media (max-width: 40rem) { .fak-ramka { aspect-ratio: auto; min-height: 0; height: 72vh; } }
/* zakladki (np. Zgloszenia: Czeka / W toku / Zamkniete) na telefonie przewijaja sie w swoim pasku zamiast poszerzac strone */
@media (max-width: 40rem) { .zakladki, .zgl-zakladki, nav[role=tablist] { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; } }
/* 1.40.3 (regresja z tej samej wersji): pola dat dostaly pelny styl i swoja szerokosc wewnetrzna — siatki formularza nie moga przez nie rosnac */
input[type=date], input[type=number], input[type=tel], input[type=month], input[type=time] { min-width: 0; max-width: 100%; }
.fak-2 > *, .karta-bok, .karta-bok > *, .fak-uklad > * { min-width: 0; }
.kt-szukaj { min-width: min(18rem, 100%); }
code.rozl-rachunek, .fd-bok dd { overflow-wrap: anywhere; min-width: 0; }
.fak-pole input[type=date] { padding: .55rem .5rem; font-size: .95rem; }

/* 1.40.4: pasek zbiorczy KSeF ("Nie ksieguj zaznaczonych") przykleja sie POD naglowkiem (sticky top: 0 / .5rem chowal go pod
   przyklejonym naglowkiem o wysokosci --naglowek-h). Zawsze widoczny przy przewijaniu dlugiej listy; po przyklejeniu — cien i ciemniejsze tlo. */
body.zalogowany .pasek-zbiorczy { top: calc(var(--naglowek-dol, var(--naglowek-h, 4.25rem)) + .5rem); z-index: 20; transition: box-shadow .2s, background-color .2s; }
body.zalogowany .pasek-zbiorczy.przyklejony { box-shadow: 0 14px 34px rgba(0,0,0,.16), 0 0 0 1px rgba(201,178,107,.45); }
@media (max-width: 59.99rem) { body.zalogowany .pasek-zbiorczy { top: .5rem; } }   /* na telefonie naglowek nie jest przyklejony */
@media (min-width: 60rem) { body.zalogowany .nawigacja { top: var(--naglowek-dol, var(--naglowek-h)); max-height: calc(100vh - var(--naglowek-dol, var(--naglowek-h))); height: calc(100vh - var(--naglowek-dol, var(--naglowek-h))); } }
/* 1.41.7 NAPRAWA (iPad Safari): 100vh w Safari = wysokosc BEZ paskow przegladarki, wiec menu bylo wyzsze niz widoczny ekran; na dole strony
   przyklejone menu dosuwalo sie do konca kontenera i jego gora chowala sie pod naglowek. 100dvh = faktycznie widoczna wysokosc. */
@supports (height: 100dvh) {
  @media (min-width: 60rem) { body.zalogowany .nawigacja { max-height: calc(100dvh - var(--naglowek-dol, var(--naglowek-h))); height: calc(100dvh - var(--naglowek-dol, var(--naglowek-h))); overflow-y: auto; overscroll-behavior: contain; } }
}

/* ===== 1.41.0: telefon kontrahenta — kontakt na karcie faktury (tel: / mailto:), pola e-mail + telefon obok siebie w formularzu ===== */
.fd-kontakt { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: .5rem 0 .25rem; }
.fd-kontakt-link { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--linia); background: var(--papier); color: var(--atrament); text-decoration: none; font-size: .85rem; transition: border-color .15s, transform .15s, box-shadow .15s; }
.fd-kontakt-link:hover { border-color: var(--zloto); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.fd-kontakt-ik { color: var(--zloto-ciemne); font-size: .95rem; }
.fak-kontakt { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .fd-kontakt-link { transition: none; } .fd-kontakt-link:hover { transform: none; } }
.fak-kontakt-pod { margin: -.35rem 0 .75rem; }
.fd-kontakt-ik { display: inline-flex; } .fd-kontakt-ik .ik { width: .95rem; height: .95rem; }
/* 1.41.1: ikony z zestawu zamiast znakow/emoji (motyw, ptaszki, tarcza, spinacz) — rozmiary w miejscach, gdzie byl tekst */
.motyw button .ik { width: .95rem; height: .95rem; display: block; }
.ik-odczyt { width: 1rem; height: 1rem; vertical-align: -.2em; }
.pl-krok-nr .ik, .rs-kanal-ok .ik, .kt-baner-ik .ik { width: .85rem; height: .85rem; stroke-width: 2.4; }
.pt-ok .ik, .pl-rozl-ok .ik, .hf-ok .ik { width: .9rem; height: .9rem; vertical-align: -.15em; stroke-width: 2.4; }
.bps-ikona .ik { width: 1.4rem; height: 1.4rem; }
/* kontakt w danych nabywcy: e-mail i telefon na cala szerokosc (pol na pol), podpis pod spodem — nie jako trzecia kolumna */
.fak-kontakt, .fak-kontakt-pod { grid-column: 1 / -1; }
.fak-kontakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 40rem) { .fak-kontakt { grid-template-columns: 1fr; } }
/* formularz faktury: kolumna nazwy pozycji byla sciskana do ~60 px (a stawka VAT ucinana "23°"), bo pozostale kolumny braly szerokosc */
.tabela-pozycje input[name=poz_opis] { min-width: 13rem; }
.tabela-pozycje select[name=poz_stawka] { min-width: 5.6rem; }
.tabela-pozycje input[name=poz_ilosc] { width: 4.5rem; } .tabela-pozycje input[name=poz_jm] { width: 4rem; } .tabela-pozycje input[name=poz_cena] { width: 7rem; }
.tabela-pozycje td.r, .tabela-pozycje th.r { white-space: nowrap; width: 1%; }
.tabela-pozycje input[name=poz_opis] { min-width: 9.5rem; }
.tabela-pozycje input[name=poz_ilosc] { width: 4rem; } .tabela-pozycje input[name=poz_jm] { width: 3.6rem; } .tabela-pozycje input[name=poz_cena] { width: 6.2rem; }
.tabela-pozycje td, .tabela-pozycje th { padding-left: .35rem; padding-right: .35rem; }
.tabela-pozycje input[name=poz_opis] { min-width: 8.5rem; }
/* 1.41.1: pozycje faktury w waskiej karcie (tablet, laptop z menu, telefon) — wiersz jako siatka zamiast sciskania/przewijania:
   1. linia: Lp + nazwa; 2.: ilosc, j.m., cena, VAT, zal. 15; 3.: netto, brutto, usun */
.tabela-przewijana:has(> #pozycje) { container-type: inline-size; }
@container (max-width: 45rem) {
  #pozycje thead { display: none; }
  #pozycje tbody tr:not(.wzor) { display: grid; grid-template-columns: 2rem repeat(4, minmax(0, 1fr)) auto; gap: .4rem .5rem; padding: .7rem .2rem; border-bottom: 1px solid var(--linia); align-items: center; }
  #pozycje tbody tr:not(.wzor) > td { padding: 0; border: 0; width: auto; }
  #pozycje tbody tr:not(.wzor) > td:nth-child(2) { grid-column: 2 / -1; }
  #pozycje tbody tr:not(.wzor) > td:nth-child(3) { grid-column: 2 / 3; }
  #pozycje tbody tr:not(.wzor) > td.c { justify-self: center; }
  #pozycje tbody tr:not(.wzor) > td.n { grid-column: 2 / 4; text-align: left; }
  #pozycje tbody tr:not(.wzor) > td.b { grid-column: 4 / 6; text-align: left; }
  #pozycje tbody input, #pozycje tbody select { width: 100% !important; min-width: 0 !important; }
  #pozycje td.n::before { content: "netto "; color: var(--atrament-cichy); font-size: .75rem; }
  #pozycje td.b::before { content: "brutto "; color: var(--atrament-cichy); font-size: .75rem; }
  #pozycje td.c::before { content: "zał. 15 "; color: var(--atrament-cichy); font-size: .7rem; }
}
@container (max-width: 45rem) {
  #pozycje tbody tr:not(.wzor) { grid-template-columns: 2rem repeat(3, minmax(0, 1fr)); }
  #pozycje tbody tr:not(.wzor) > td:nth-child(3) { grid-column: auto; }
  #pozycje tbody tr:not(.wzor) > td:nth-child(6) { grid-column: 2 / 4; }
  #pozycje tbody tr:not(.wzor) > td.c { grid-column: 4 / 5; }
  #pozycje tbody tr:not(.wzor) > td.n { grid-column: 2 / 3; }
  #pozycje tbody tr:not(.wzor) > td.b { grid-column: 3 / 4; }
  #pozycje tbody tr:not(.wzor) > td:last-child { grid-column: 4 / 5; justify-self: end; }
}
@container (max-width: 45rem) {
  #pozycje tbody tr:not(.wzor) > td:nth-child(3) { grid-column: 2 / 3; } #pozycje tbody tr:not(.wzor) > td:nth-child(4) { grid-column: 3 / 4; } #pozycje tbody tr:not(.wzor) > td:nth-child(5) { grid-column: 4 / 5; }
}

/* ===== 1.41.5: Dane wystawcy — adres do sprawdzenia: pigulka przy adresie + jeden alert z akcja (zamiast dlugiego tekstu w kolumnie i drugiej ramki) ===== */
.nw-flaga { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: rgba(154,106,18,.12); color: var(--uwaga); border: 1px solid rgba(154,106,18,.35); }
.nw-flaga .ik { width: .85rem; height: .85rem; }
.nw-alert { display: flex; gap: .9rem; align-items: flex-start; margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(154,106,18,.07); border: 1px solid rgba(154,106,18,.35); animation: pt-wjazd .4s var(--ruch-krzywa) backwards; }
.nw-alert-ik { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--uwaga); color: #fff; }
.nw-alert-ik .ik { width: 1rem; height: 1rem; }
.nw-alert-tresc { flex: 1; min-width: 0; } .nw-alert-tresc > strong { display: block; color: var(--uwaga); margin-bottom: .25rem; }
.nw-alert-tresc p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.45; }
.nw-alert-tresc .przycisk-link { display: inline-flex; align-items: center; gap: .4rem; }
:root[data-motyw="ciemny"] .nw-alert { background: rgba(228,180,92,.1); } :root[data-motyw="ciemny"] .nw-alert-ik { color: #15171c; }
[data-opis].zmiana { animation: zg-blysk 1.2s ease-out; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .nw-alert { animation: none; } [data-opis].zmiana { animation: none; } }

/* ===== 1.41.6: menu boczne — wyrazniejsze podswietlenie po najechaniu (tylko urzadzenia z kursorem: myszka, gladzik iPada) =====
   Bylo .05 bialego na ciemnym pasku — praktycznie niewidoczne. Teraz: delikatne zlote tlo, jasniejszy tekst, kafelek ikony podswietlony,
   cienki zloty "cien" paska aktywnej pozycji. Aktywna pozycja bez zmian (pelne wyroznienie po kliknieciu). */
@media (any-hover: hover) {
  body.zalogowany .nawigacja a:not(.aktywna):hover { background: rgba(201,178,107,.10); color: #fff; }
  body.zalogowany .nawigacja a:not(.aktywna):hover .ikona { background: rgba(201,178,107,.22); color: var(--zloto); }
  body.zalogowany .nawigacja a:not(.aktywna)::before { content: ""; position: absolute; left: -.9rem; top: 30%; bottom: 30%; width: 3px; border-radius: 3px; background: var(--zloto); opacity: 0; transform: scaleY(.4); transition: opacity .18s, transform .18s var(--ruch-krzywa); }
  body.zalogowany .nawigacja a:not(.aktywna):hover::before { opacity: .45; transform: scaleY(1); }
  body.zalogowany .nawigacja a { transition: background-color .18s, color .18s, transform .18s var(--ruch-krzywa); }
  body.zalogowany .nawigacja a .ikona { transition: background-color .18s, color .18s, transform .18s; }
}
body.zalogowany .nawigacja a:focus-visible { outline: 2px solid var(--zloto); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { body.zalogowany .nawigacja a, body.zalogowany .nawigacja a::before { transition: none; } body.zalogowany .nawigacja a:hover { transform: none; } }

/* 1.41.8: podswietlenie menu takze przez klase html.kursor (ustawiana w naglowek.js przy ruchu myszy/gladzika: pointerType "mouse").
   Safari na iPadzie z gladzikiem nie zawsze spelnia (any-hover: hover) — klasa dziala niezaleznie od zapytan medialnych. */
html.kursor body.zalogowany .nawigacja a:not(.aktywna):hover { background: rgba(201,178,107,.10); color: #fff; }
html.kursor body.zalogowany .nawigacja a:not(.aktywna):hover .ikona { background: rgba(201,178,107,.22); color: var(--zloto); }
html.kursor body.zalogowany .nawigacja a:not(.aktywna)::before { content: ""; position: absolute; left: -.9rem; top: 30%; bottom: 30%; width: 3px; border-radius: 3px; background: var(--zloto); opacity: 0; transform: scaleY(.4); transition: opacity .18s, transform .18s var(--ruch-krzywa); }
html.kursor body.zalogowany .nawigacja a:not(.aktywna):hover::before { opacity: .45; transform: scaleY(1); }
html.kursor body.zalogowany .nawigacja a { transition: background-color .18s, color .18s, transform .18s var(--ruch-krzywa); }
html.kursor body.zalogowany .nawigacja a .ikona { transition: background-color .18s, color .18s, transform .18s; }

/* 1.41.9: to samo podswietlenie dla klasy .naj (ustawianej zdarzeniami wskaznika — niezaleznie od :hover w Safari) */
body.zalogowany .nawigacja a.naj:not(.aktywna) { background: rgba(201,178,107,.10); color: #fff; }
body.zalogowany .nawigacja a.naj:not(.aktywna) .ikona { background: rgba(201,178,107,.22); color: var(--zloto); }
html.kursor body.zalogowany .nawigacja a.naj:not(.aktywna)::before { opacity: .45; transform: scaleY(1); }
/* 1.41.10: wyrazniej (jak w eSZOK — powiekszenie ikony) — 10% zlota na ciemnym pasku bylo za slabe na matowym ekranie iPada */
html.kursor body.zalogowany .nawigacja a:not(.aktywna):hover, html.kursor body.zalogowany .nawigacja a.naj:not(.aktywna) { background: rgba(201,178,107,.16); color: #fff; }
html.kursor body.zalogowany .nawigacja a:not(.aktywna):hover .ikona, html.kursor body.zalogowany .nawigacja a.naj:not(.aktywna) .ikona { background: rgba(201,178,107,.3); color: var(--zloto); transform: scale(1.14); }
body.zalogowany .nawigacja a .ikona { transition: background-color .18s, color .18s, transform .2s var(--ruch-krzywa); }
@media (prefers-reduced-motion: reduce) { body.zalogowany .nawigacja a .ikona { transition: none; } body.zalogowany .nawigacja a:hover .ikona, body.zalogowany .nawigacja a.naj .ikona { transform: none; } }

/* 1.41.11: dotyk palcem NIE podswietla pozycji menu (Safari na iPadzie przy stuknieciu wlacza :hover) — wszystkie warianty
   podswietlenia tylko w trybie kursora (html.kursor) albo przez .naj; bez kursora tlo i ikona jak w spoczynku. */
html:not(.kursor) body.zalogowany .nawigacja a:not(.aktywna):hover { background: transparent; color: #b9b4a5; transform: none; }
html:not(.kursor) body.zalogowany .nawigacja a:not(.aktywna):hover .ikona { background: rgba(255,255,255,.04); color: #d6c48a; transform: none; }
html:not(.kursor) body.zalogowany .nawigacja a:not(.aktywna):hover::before { opacity: 0; }

/* ===== 1.42.0: KASA GOTOWKOWA — krok 1 ===== */
.ks-kasy { margin-bottom: 1rem; }
.ks-flaga { margin: .25rem 0 0; }
.pusta-karta { display: flex; gap: 1rem; align-items: flex-start; }
.pusta-karta .ust-ikona { flex: none; }
.pd-lista li.ks-otwarty .pd-karta { border-left: 3px solid var(--zloto); }
.pd-prawo .przycisk-link.maly { padding: .3rem .6rem; font-size: .8rem; display: inline-flex; align-items: center; gap: .35rem; }
.pd-prawo .przycisk-link.maly .ik { width: .9rem; height: .9rem; }
.plakietka-stan.neutralna { background: var(--akcent-tlo); color: var(--atrament-cichy); }
.ks-flaga { border-radius: 10px; padding: .4rem .7rem; white-space: normal; line-height: 1.35; }
/* ===== 1.42.1: KASA — krok 2 (raport, dowody, formularz) ===== */
.ks-akcje { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.ks-akcje .przycisk-link, .ks-pasek .przycisk-link { display: inline-flex; align-items: center; gap: .4rem; }
.ks-akcje .ik, .ks-pasek .ik { width: 1rem; height: 1rem; }
.ks-bo summary { list-style: none; cursor: pointer; } .ks-bo summary::-webkit-details-marker { display: none; }
.ks-bo-form { margin-top: .75rem; padding: 1rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--powierzchnia); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 36rem; }
.ks-bo-form button, .ks-bo-form p { grid-column: 1 / -1; }
.ks-pasek { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; } .ks-pasek-odstep { flex: 1; } .ks-pasek form { margin: 0; }
.pd-ikona.ks-kp { background: rgba(47,122,77,.14); color: #2f7a4d; } .pd-ikona.ks-kw { background: rgba(168,53,47,.12); color: #a8352f; }
:root[data-motyw="ciemny"] .pd-ikona.ks-kp { color: #7cc79a; } :root[data-motyw="ciemny"] .pd-ikona.ks-kw { color: #f3b3ab; }
.ks-zapisy li.ks-anul .nazwa, .ks-zapisy li.ks-anul .kwota { text-decoration: line-through; color: var(--atrament-cichy); }
.ks-zapisy li.ks-nowy .pd-karta { animation: zg-blysk 2.4s ease-out; box-shadow: 0 0 0 2px var(--zloto); }
.ks-plak { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--zloto); color: var(--zloto-ciemne); vertical-align: middle; } .ks-plak .ik { width: .8rem; height: .8rem; }
.ks-pytanie { margin-top: .5rem; padding: .55rem .75rem; border-left: 3px solid var(--blad); background: var(--blad-tlo); border-radius: 0 8px 8px 0; font-size: .9rem; }
.ks-pytanie strong { display: inline-flex; align-items: center; gap: .3rem; } .ks-pytanie .ik { width: .9rem; height: .9rem; }
.ks-pytanie.cicho { border-left-color: var(--linia); background: var(--akcent-tlo); }
.ks-odp { display: flex; gap: .5rem; margin-top: .5rem; } .ks-odp input { margin: 0; flex: 1; } .ks-odp button { width: auto; margin: 0; }
.ks-wiersz-akcje { display: flex; gap: .4rem; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.ks-anuluj summary { list-style: none; cursor: pointer; } .ks-anuluj summary::-webkit-details-marker { display: none; }
.ks-anuluj-form { margin-top: .5rem; padding: .75rem; border: 1px solid rgba(168,53,47,.35); border-radius: 10px; background: var(--powierzchnia); display: grid; gap: .5rem; min-width: 16rem; text-align: left; }
.ks-anuluj-form input, .ks-anuluj-form button { margin: 0; } .ks-anuluj-form p { margin: 0; }
.ks-dialog .dane { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 1rem 0; } .ks-dialog dd { margin: 0; text-align: right; }
.ks-form-karta .pt-naglowek { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.ks-rodzaj { margin: 0; }
.ks-kwota-wiersz { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(10.5rem, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: end; margin-bottom: .5rem; }
.ks-kwota input { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; padding: .5rem .7rem; }
.ks-po-karta { padding: .7rem .9rem; border-radius: 12px; background: linear-gradient(135deg, rgba(201,178,107,.16), rgba(201,178,107,.04)); border: 1px solid rgba(201,178,107,.45); display: flex; flex-direction: column; gap: .1rem; }
.ks-po-karta .et { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto-ciemne); font-weight: 700; }
.ks-po-karta strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ks-kontrahent { border: 1px solid var(--linia); border-radius: 12px; padding: .75rem 1rem 1rem; margin: 1rem 0; } .ks-kontrahent legend { padding: 0 .4rem; font-weight: 700; }
.ks-typy { margin-bottom: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-form .pt-dol { margin-top: 1.25rem; }
@media (max-width: 40rem) { .ks-kwota-wiersz, .ks-bo-form { grid-template-columns: 1fr; } .ks-typy { grid-template-columns: 1fr; } .ks-pasek .przycisk-link { flex: 1; justify-content: center; } }
body.srodek .karta-logowania.szeroka.ks-form-karta { max-width: 56rem; }
/* kasa — telefon: pasek akcji w jednym rzedzie (KP | KW) + "Zamknij raport" pod spodem; odpowiedz na pytanie: pole nad przyciskiem */
.ks-pasek .przycisk-link, .ks-pasek button { white-space: nowrap; }
@media (max-width: 40rem) {
  .ks-pasek { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .75rem; }
  .ks-pasek-odstep { display: none; }
  .ks-pasek form, .ks-pasek > .plakietka-stan { grid-column: 1 / -1; } .ks-pasek form button { width: 100%; }
  .ks-odp { flex-direction: column; } .ks-odp button { width: 100%; }
  .ks-wiersz-akcje { justify-content: flex-start; }
}
/* kasa: "Nowy KP" jako przycisk glowny (link wygladal jak drugi), przyciski wiersza z odstepem, kwoty KP na zielono */
a.przycisk-link.glowny { background: var(--akcent); color: #fff; border: 1px solid var(--akcent); font-weight: 600; text-decoration: none; padding: .55rem 1rem; border-radius: var(--promien); transition: background-color .15s, transform .15s var(--ruch-krzywa), box-shadow .15s; }
a.przycisk-link.glowny:hover { background: var(--akcent-ciemny); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
:root[data-motyw="ciemny"] a.przycisk-link.glowny { color: #15171c; }
a.przycisk-link.glowny .ik { color: inherit; }
.ks-wiersz-akcje { gap: .4rem; }
.ks-zapisy .kwota.ok-tekst { color: #2f7a4d; } :root[data-motyw="ciemny"] .ks-zapisy .kwota.ok-tekst { color: #7cc79a; }
@media (prefers-reduced-motion: reduce) { a.przycisk-link.glowny:hover { transform: none; } }
.ks-typy .fak-rodzaj-ik .ik { width: 1.05rem; height: 1.05rem; }
.ks-typy input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.ks-typy .fak-rodzaj { position: relative; cursor: pointer; }
.ks-kontrahent .fak-2 { align-items: end; } .ks-kontrahent .fak-pole input { min-height: 2.75rem; }
.ks-form > .fak-pole { margin-top: .9rem; display: block; }
.ks-kontrahent .fak-pole input, .ks-kontrahent .fak-pole select { height: 2.85rem; min-height: 0; box-sizing: border-box; }
/* kafle (caly Pulpit): kwota nie lamie sie na odstepie tysiecy ("8 / 004,56" na telefonie); na telefonie mniejsza czcionka */
.kafel-liczba { white-space: nowrap; }
@media (max-width: 40rem) { .kafle .kafel-liczba { font-size: clamp(1.15rem, 5.4vw, 1.75rem); } }
.ks-anonim { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .2rem; } .ks-anonim input { margin: 0; width: auto; }
.ks-ujecie { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; } .ks-ujecie .ik { width: .8rem; height: .8rem; }
.uz-gosc { display: inline-block; margin-top: .25rem; }
/* 1.43.2: znaczniki odczytu przy ostatnim odczytanym wpisie (kolko z litera pod dymkiem, po stronie dymka) */
/* poza dymkiem, pod nim (jak w Pryzmacie): po stronie dymka, wyrownane do jego krawedzi (pomijajac kolumne inicjalu) */
.odczyt-znaczniki { display: flex; gap: .2rem; margin: -.35rem 0 .5rem; animation: pr-wpada .3s cubic-bezier(.34,1.56,.64,1); }
.odczyt-znaczniki.po-prawej { justify-content: flex-end; padding-right: 3rem; }
.odczyt-znaczniki.po-lewej { justify-content: flex-start; padding-left: 3rem; }
.odczyt-znaczniki .inicjal.maly { box-shadow: 0 0 0 2px var(--papier); }
@media (prefers-reduced-motion: reduce) { .odczyt-znaczniki { animation: none; } }

/* ===== 1.43.3: Użytkownicy — karty osób zamiast tabeli (tabela rozpychala strone na telefonie o 600 px, uprawnienia sciskane) ===== */
.uz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.uz-karta { border: 1px solid var(--linia); border-radius: 14px; background: var(--powierzchnia); padding: 1rem 1.1rem; animation: pt-wjazd .35s var(--ruch-krzywa) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.uz-karta.uz-gosc-karta { border-left: 3px solid var(--zloto); }
.uz-karta.uz-wylaczona { opacity: .65; }
.uz-glowa { display: flex; gap: .85rem; align-items: flex-start; }
.uz-kto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.uz-kto strong { font-size: 1rem; }
.uz-kto .cicho { overflow-wrap: anywhere; }
.uz-plakietki { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.plakietka.uz-gosc { background: rgba(201,178,107,.16); color: var(--zloto-ciemne); border: 1px solid rgba(201,178,107,.45); }
.uz-glowne { margin-top: .1rem; }
.uz-akcje { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; } .uz-akcje form { margin: 0; } .uz-akcje button { width: auto; margin: 0; white-space: nowrap; }
.uz-wszystkie { margin: .6rem 0 0 3.05rem; }
.uz-uprawnienia { margin: .85rem 0 0 3.05rem; }
.uz-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem; }
.uz-upr { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .65rem; border: 1px solid var(--linia); border-radius: 10px; cursor: pointer; font-size: .88rem; line-height: 1.35; transition: border-color .15s, background-color .15s; }
.uz-upr input { margin: .15rem 0 0; width: auto; flex: none; accent-color: var(--zloto-ciemne); }
.uz-upr:hover { border-color: var(--zloto); }
.uz-upr.wl, .uz-upr:has(input:checked) { background: rgba(201,178,107,.12); border-color: rgba(201,178,107,.55); }
.uz-et { margin: .8rem 0 .4rem; }
.uz-zapisz { display: flex; justify-content: flex-end; margin-top: .75rem; } .uz-zapisz button { width: auto; margin: 0; }
@media (max-width: 40rem) {
  .uz-glowa { flex-wrap: wrap; } .uz-akcje { width: 100%; justify-content: flex-start; padding-left: 3.05rem; }
  .uz-uprawnienia, .uz-wszystkie { margin-left: 0; } .uz-siatka { grid-template-columns: 1fr; } .uz-zapisz button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .uz-karta { animation: none; } }
/* 1.44.0: zalaczniki — blokada skanera / w trakcie sprawdzania */
.zal-chip.zal-zagrozenie { border-color: rgba(168,53,47,.45); background: var(--blad-tlo); color: var(--blad); cursor: not-allowed; }
.zal-chip.zal-zagrozenie .zal-glowny { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .35rem; }
.zal-chip.zal-zagrozenie .zal-ik { background: var(--blad); color: #fff; display: inline-grid; place-items: center; }
.zal-chip.zal-zagrozenie .zal-ik .ik { width: .85rem; height: .85rem; }
.zal-chip.zal-zagrozenie .zal-nazwa { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .8; }
.zal-powod { font-size: .75rem; font-weight: 700; }
.zal-skan-et { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--uwaga); font-weight: 600; margin-left: .2rem; }
.zal-skan-et .kropka { width: .45rem; height: .45rem; border-radius: 50%; background: var(--uwaga); animation: zal-puls 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .zal-skan-et .kropka { animation: none; } }
@keyframes zal-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
/* 1.45.4 (audyt graficzny): kontrast w ciemnym motywie
   - "Odswiez" na ekranie spoza sieci: tlo var(--ciemny) + moja regula ciemnego tekstu z 1.42.2 = 1,1:1 (niewidoczny) -> zloty przycisk glowny
   - "oplacona" (Pulpit, rozliczenia) i "Przejdz ›" (pasek uwagi): ciemna zielen/brazy na ciemnym tle 2,8:1 -> jasniejsze odcienie */
:root[data-motyw="ciemny"] .bps-akcje .przycisk-link.glowny { background: var(--zloto); color: #15171c; }
:root[data-motyw="ciemny"] .pl-rozl-ok { color: #7cc79a; }
:root[data-motyw="ciemny"] .pasek-uwagi .pu-akcja { color: #e4b45c; }
/* 1.45.5: przyciski w karcie odrzucenia — jednakowa wielkosc (button.drugi mial mniejsza czcionke niz link) */
.fd-odrz-akcje button, .fd-odrz-akcje .przycisk-link { font-size: .95rem; padding: .6rem 1rem; line-height: 1.2; }
.fd-odrz-akcje form { margin: 0; }

/* ===== 1.47.0 KD1: KADRY I PLACE — kafle, wykres 12 miesiecy (CSS, bez bibliotek), karty list, pozycje, kartoteka, dziennik ===== */
:root { --kd-koszt: var(--akcent); --kd-netto: var(--zloto); }
:root[data-motyw="ciemny"] { --kd-koszt: #9aa3b5; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { --kd-koszt: #9aa3b5; } }
@media (min-width: 50rem) { .kafle.kd-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kafle.kd-kafle .kafel.kd-zuspit { grid-column: span 1; } }
/* 1.50.0 KD1b: 5 kafli (ZUS/PIT); 1.51.0 KD2a: 6 kafli (nieobecni) -> 3 w rzedzie od 50rem, 6 od 96rem */
@media (min-width: 96rem) { .kafle.kd-kafle { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kd-kafle .kafel-etykieta { font-weight: 600; }
.kd-delta { font-weight: 600; color: var(--atrament); }
.kd-zakladki { margin-top: -.25rem; }
/* wykres: 12 kolumn, dwa slupki na miesiac; wysokosc = % maksimum kosztu; animacja wzrostu tylko przy pierwszym wyswietleniu */
.kd-wykres { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; height: 13rem; padding: .25rem 0 0; margin: .25rem 0 0; }
.kd-mies { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; border-radius: 8px; outline: none; }
.kd-mies:hover, .kd-mies:focus-visible { background: var(--akcent-tlo-jasne, #fffdf7); }
.kd-slupki { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: calc(100% - 1.5rem); padding: 0 12%; }
.kd-slupek { flex: 1 1 0; max-width: 1.1rem; height: var(--h, 0%); min-height: 2px; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: kd-rosnie .7s var(--ruch-krzywa, ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.kd-slupek.kd-koszt { background: var(--kd-koszt); } .kd-slupek.kd-netto { background: var(--kd-netto); }
.kd-pusty .kd-slupek { opacity: .35; }
.zmiana .kd-slupek, .kd-wykres.bez-animacji .kd-slupek { animation: none; }
@keyframes kd-rosnie { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.kd-etykieta { display: block; height: 1.5rem; line-height: 1.5rem; text-align: center; font-size: .7rem; color: var(--atrament-cichy); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.kd-dymek { position: absolute; left: 50%; bottom: calc(100% + .35rem); transform: translateX(-50%) translateY(4px); min-width: 15.5rem; padding: .55rem .7rem; border-radius: 10px; background: var(--powierzchnia); border: 1px solid var(--linia);
  box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: .8rem; line-height: 1.45; opacity: 0; pointer-events: none; z-index: 5; transition: opacity .15s, transform .15s; display: grid; gap: .1rem; }
.kd-dymek strong { display: block; margin-bottom: .2rem; } .kd-dymek span { display: flex; justify-content: flex-start; gap: .4rem; align-items: center; white-space: nowrap; } .kd-dymek span b { margin-left: auto; } .kd-dymek b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-mies:hover .kd-dymek, .kd-mies:focus-within .kd-dymek, .kd-mies:focus .kd-dymek { opacity: 1; transform: translateX(-50%) translateY(0); }
.kd-mies:nth-child(-n+3) .kd-dymek { left: 0; transform: translateX(0) translateY(4px); } .kd-mies:nth-child(-n+3):hover .kd-dymek, .kd-mies:nth-child(-n+3):focus .kd-dymek { transform: translateX(0); }
.kd-mies:nth-last-child(-n+3) .kd-dymek { left: auto; right: 0; transform: translateX(0) translateY(4px); } .kd-mies:nth-last-child(-n+3):hover .kd-dymek, .kd-mies:nth-last-child(-n+3):focus .kd-dymek { transform: translateX(0); }
.kd-kropka { display: inline-block; width: .6rem; height: .6rem; border-radius: 3px; margin-right: .3rem; vertical-align: middle; } .kd-kropka.kd-koszt { background: var(--kd-koszt); } .kd-kropka.kd-netto { background: var(--kd-netto); }
.kd-legenda { margin: .5rem 0 0; } .kd-legenda .kd-kropka + .kd-kropka, .kd-legenda .kd-kropka:not(:first-child) { margin-left: .9rem; }
@media (max-width: 40rem) { .kd-wykres { height: 10rem; gap: .15rem; } .kd-etykieta { font-size: .6rem; } .kd-rok { display: none; } .kd-mies:nth-child(even) .kd-etykieta { visibility: hidden; } .kd-dymek { min-width: 13rem; } }
/* karty list plac */
.kd-karta { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 12px; padding: .85rem 1rem 1rem; transition: border-color .22s, box-shadow .22s; }
.kd-karta:hover { border-color: var(--zloto); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.kd-naglowek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.kd-naglowek .nazwa { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.kd-prawo { align-items: flex-end; } .kd-prawo .kwota { font-size: 1.25rem; }
.kd-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem .75rem; margin: .85rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--linia); }
.kd-siatka div { min-width: 0; } .kd-siatka dt { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--atrament-cichy); font-weight: 600; } .kd-siatka dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kd-siatka .kd-glowna dd { color: var(--zloto-ciemne); font-size: 1.05rem; }
.kd-pasek { height: 4px; border-radius: 2px; background: var(--linia); margin-top: .75rem; overflow: hidden; } .kd-pasek span { display: block; height: 100%; width: var(--p, 0%); background: var(--zloto); border-radius: 2px; }
.kd-pasek-opis { margin: .3rem 0 0; }
.kd-prawo { gap: .4rem; } .kd-prawo-kwota { display: flex; flex-direction: column; align-items: flex-end; }
.kd-prawo .przycisk-link.maly, .kd-poz summary.przycisk-link { font-size: .85rem; padding: .35rem .7rem; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; width: auto; }
.kd-poz { margin-top: .75rem; } .kd-poz summary::-webkit-details-marker { display: none; } .kd-poz[open] summary { border-color: var(--zloto); }
.kd-poz-tresc { margin-top: .5rem; }
.kd-dok { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.kd-poz-tabela { border-radius: 10px; box-shadow: none; } .kd-poz-tabela .tabela { font-size: .9rem; } .kd-poz-tabela .kol-akcja { white-space: nowrap; }
.pl-wszystkie a.aktywna { color: var(--zloto-ciemne); text-decoration-color: var(--zloto); }
.kd-netto-kom { color: var(--zloto-ciemne); }
.kd-skladniki summary { cursor: pointer; color: var(--akcent); font-size: .85rem; } .kd-skladniki ul { list-style: none; margin: .35rem 0 0; padding: 0; min-width: 14rem; font-size: .82rem; }
.kd-skladniki li { display: flex; justify-content: space-between; gap: .75rem; padding: .15rem 0; border-top: 1px dashed var(--linia); } .kd-sk-kwota { font-variant-numeric: tabular-nums; white-space: nowrap; } .kd-potracenie { color: var(--blad); }
@media (max-width: 40rem) { .kd-naglowek { grid-template-columns: auto minmax(0, 1fr); } .kd-prawo { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } .kd-prawo-kwota { align-items: flex-start; } .kd-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* kartoteka */
.kd-szukaj { margin-bottom: .75rem; } .kd-szukaj button, .kd-szukaj .przycisk-link { margin: 0; align-self: end; }
.kd-prac td { vertical-align: top; } .kd-nieaktywny td { opacity: .55; }
.kd-po-terminie { color: var(--blad); font-weight: 600; } .kd-wkrotce { color: var(--zloto-ciemne); font-weight: 600; }
.kd-urlop { display: grid; gap: .15rem; min-width: 9rem; } .kd-urlop-pasek { display: block; height: 5px; border-radius: 3px; background: var(--linia); overflow: hidden; } .kd-urlop-pasek span { display: block; height: 100%; width: var(--p, 0%); background: var(--zloto); }
.kd-umowa + .kd-umowa { margin-top: .35rem; }
.kd-dostep td { vertical-align: top; }
@media (prefers-reduced-motion: reduce) { .kd-slupek { animation: none; } }
/* 1.50.0 KD1b: kafel ZUS/PIT na ekranie kadr + formularz zestawienia wynagrodzen */
.kafel.kd-zuspit .kd-zuspit-lista { list-style: none; margin: 0 0 .35rem; padding: 0; display: grid; gap: .3rem; }
.kafel.kd-zuspit .kd-zuspit-lista a { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; font-size: .9375rem; line-height: 1.3; }
.kafel.kd-zuspit .kafel-etykieta { margin-top: auto; }
.kafel.kd-zuspit .kd-zuspit-nazwa { font-weight: 700; } .kafel.kd-zuspit .plakietka-stan .ik { width: .8em; height: .8em; }
.kafel.kd-zuspit.kd-ok { border-top-color: #3b8b5a; } .kafel.kd-zuspit.kd-zlota { border-top-color: var(--zloto); } .kafel.kd-zuspit.kd-zalegla { border-top-color: var(--blad); }
.kafel.kd-zuspit.kd-zalegla .kafel-opis { color: var(--blad); }
.kd-wykres-sekcja h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.kd-zst { margin-left: auto; font-size: .875rem; font-weight: 400; position: relative; } .kd-zst > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); }
.kd-zst > summary::-webkit-details-marker { display: none; } .kd-zst > summary:hover { background: var(--akcent-tlo); } .kd-zst > summary .ik { width: 1em; height: 1em; }
.kd-zst-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .6rem; padding: .7rem .9rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); }
.kd-zst-form label { display: inline-flex; align-items: center; gap: .35rem; color: var(--atrament-cichy); } .kd-zst-form select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: var(--atrament); }
.kd-zst-form button.pierwszy { padding: .4rem .8rem; background: var(--akcent); color: #fff; border: 0; border-radius: var(--promien); font-weight: 600; }
.kd-zst-form .cicho { flex-basis: 100%; }
@media (max-width: 640px) { .kd-zst { margin-left: 0; flex-basis: 100%; } .kd-zst-form label { flex: 1 1 45%; } .kd-zst-form select { flex: 1; } }
@media (max-width: 49.99rem) { .kafle.kd-kafle .kafel.kd-zuspit { grid-column: 1 / -1; } }
.kafel.kd-nieob .kd-l4 { font-size: 1rem; font-weight: 700; color: var(--blad); } .kafel.kd-nieob.kd-zalegla { border-top-color: var(--blad); } .kafel.kd-nieob.kd-zlota { border-top-color: var(--zloto); }
/* 1.51.0 KD2a: zakladka Nieobecnosci */
.kd-nieob-dzis { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 1rem; } .kd-nieob-dzis .kd-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--linia); border-radius: 999px; background: var(--powierzchnia); font-size: .875rem; }
.kd-nieob-dzis .kd-chip .stan-kropka { width: .5rem; height: .5rem; border-radius: 50%; background: var(--zloto); } .kd-nieob-dzis .kd-chip.zalegla .stan-kropka { background: var(--blad); }
.kd-nieob-form { align-items: end; } .kd-nieob-form select { font: inherit; padding: .45rem .5rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: var(--atrament); }
.kd-nieob-tab td { vertical-align: top; } .kd-nieob-tab .kd-zrodlo { white-space: nowrap; } .kd-nieob-tab td.r { text-align: right; white-space: nowrap; }
.kd-nieob-pods { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .4rem 0 .8rem; }
.tytul-strony .kd-aktualizacja { margin-top: .25rem; }
/* 1.52.0 KD2b: wnioski o nieobecnosc */
.licznik-zakladka { display: inline-block; min-width: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--blad); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; vertical-align: 1px; }
.kd-wn-pasek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1rem; }
.kd-wn-pasek a.przycisk { margin-right: 0; }
.kl-chip.pilne:not(.aktywny) { border-color: var(--zloto); }
.konto-pow-kadry { display: grid; gap: .8rem; max-width: 36rem; }
.konto-pow-kadry .pole-grupa { display: grid; gap: .4rem; }
.konto-pow-kadry .radio { display: flex; align-items: center; gap: .55rem; font-weight: 500; cursor: pointer; }
.konto-pow-kadry select { max-width: 20rem; }
.konto-pow-kadry button { justify-self: start; }
.kd-wn-tab tr.kd-wn-nowy { background: color-mix(in srgb, var(--zloto) 9%, transparent); animation: kd-wn-nowy-blysk 1.6s ease-out 1; }   /* tlo na tr: td.akcje jest grid i nie wypelnia wiersza */
.kd-wn-tab tr.kd-wn-nowy td:first-child { box-shadow: inset 3px 0 0 var(--zloto); }
.kd-wn-plakietka-nowy { font-size: .68rem; vertical-align: middle; }
@keyframes kd-wn-nowy-blysk { from { background: color-mix(in srgb, var(--zloto) 28%, transparent); } }
.kd-wn-tab td { vertical-align: top; } .kd-wn-tab td.r { text-align: right; white-space: nowrap; } .kd-wn-uwagi { font-style: italic; }
.kd-wn-po { color: var(--blad); font-weight: 600; }
.kd-wn-akcje { white-space: nowrap; } .kd-wn-akcje form, .kd-wn-akcje details, .kd-wn-akcje > a { display: inline-block; margin: 0 .25rem .25rem 0; vertical-align: top; }
.kd-wn-akcje .kd-zatwierdz { border-color: rgba(59,139,90,.6); color: #2f7048; } .kd-wn-akcje .kd-zatwierdz .ik { width: 1em; height: 1em; vertical-align: -2px; }
:root[data-motyw="ciemny"] .kd-wn-akcje .kd-zatwierdz { color: #7fd09c; }
.kd-odrzuc > summary { list-style: none; cursor: pointer; display: inline-block; padding: .4rem .7rem; border-radius: var(--promien); font-size: .875rem; color: var(--atrament-cichy); }
.kd-odrzuc > summary::-webkit-details-marker { display: none; }
.kd-odrzuc[open] form { display: grid; gap: .4rem; margin-top: .4rem; padding: .6rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); white-space: normal; min-width: 16rem; }
.kd-odrzuc textarea { width: 100%; font: inherit; }
.kd-wn-karta { max-width: 46rem; } .kd-wn-form { display: grid; gap: 1rem; } .kd-wn-form label { display: grid; gap: .35rem; }
.kd-wn-form select, .kd-wn-form input[type=date], .kd-wn-form input[type=number], .kd-wn-form textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: var(--atrament); }
.kd-wn-rodzaje { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.kd-wn-rodzaje legend { font-weight: 600; margin-bottom: .4rem; }
.kd-wn-rodzaj { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .55rem; padding: .6rem .7rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); cursor: pointer; }
.kd-wn-rodzaj:has(input:checked) { border-color: var(--zloto); box-shadow: inset 0 0 0 1px var(--zloto); }
.kd-wn-rodzaj input { margin-top: .2rem; } .kd-wn-rodzaj span { display: grid; gap: .1rem; } .kd-wn-rodzaj small { font-size: .78rem; line-height: 1.3; }
.kd-wn-daty { display: flex; flex-wrap: wrap; gap: .8rem; } .kd-wn-daty label { flex: 1 1 11rem; }
.kd-wn-podglad { padding: .7rem .9rem; border-radius: var(--promien); background: var(--akcent-tlo); }
.kd-wn-liczby { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0; }
.kd-wn-blokady, .kd-wn-ostrz { margin: .4rem 0 0; padding-left: 1.1rem; } .kd-wn-blokady:empty, .kd-wn-ostrz:empty { display: none; }
.kd-wn-blokady li { color: var(--blad); font-weight: 600; } .kd-wn-ostrz li { color: var(--zloto-ciemne); }
:root[data-motyw="ciemny"] .kd-wn-ostrz li { color: var(--zloto); }
.kd-wn-bledy ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.kd-wn-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .kd-wn-przyciski button.glowny { width: auto; padding-inline: 1.4rem; }
.kd-wn-przyciski button[disabled] { opacity: .45; cursor: not-allowed; }
.kafel.kd-nieob .kd-do-akc { margin-top: .45rem; align-self: flex-start; text-decoration: none; }
.uz-pracownik { display: grid; gap: .3rem; margin-top: .6rem; } .uz-pracownik-nowy { margin: .2rem 0 .9rem; } .uz-upr.poza { opacity: .55; cursor: not-allowed; } .uz-pracownik select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: var(--atrament); max-width: 24rem; }
@media (max-width: 640px) { .kd-wn-akcje { white-space: normal; } }
@media (max-width: 40rem) { .kd-zakladki a { white-space: nowrap; padding-inline: .6rem; flex: 0 0 auto; } }   /* 1.52.0: 5 zakladek kadr — przewijany pasek, bez lamania nazw */
/* 1.52.2: filtry kadr bez przeladowania (tabela.js tb-serwer) — jak Dokumenty: wybor = wynik od razu, szukanie z opoznieniem 300 ms */
.kd-filtry { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.kd-filtry .kd-sel { margin: 0; } .kd-filtry .kd-sel select { margin: 0; width: auto; min-width: 12rem; border-radius: 12px; }
.kd-filtry .kd-szukaj-pole { flex: 1 1 18rem; max-width: 30rem; }
.kd-filtry .sr, .kd-lata .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kd-lata { display: inline-flex; margin-left: auto; gap: .35rem; } .kd-lata .kl-chip { height: 1.9rem; padding: 0 .75rem; font-size: .8125rem; }
section.kd-wykres-sekcja + section h2, .pd-sekcja > h2:has(.kd-lata) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#kd-nieob-wyniki, #kd-prac-wyniki, #kd-wn-wyniki, #zywa-kadry-listy { transition: opacity .15s ease; }
.kd-wn-filtry { flex: 1 1 auto; }
@media (max-width: 640px) { .kd-filtry .kd-sel, .kd-filtry .kd-sel select { width: 100%; } .kd-lata { margin-left: 0; } }

/* 1.53.2: odrzucony zalacznik przy wysylce przez fetch */
.zal-odrzucone { margin: 0 0 .6rem; animation: wjazd .35s var(--ruch-krzywa); }
/* 1.53.3: glowny przycisk-link na karcie faktury w ciemnym motywie byl niewidoczny (tlo --ciemny, tekst ciemny) — „Wystaw korektę",
   „Wystaw fakturę z proformy", „Edytuj projekt", „Wystaw fakturę końcową". Zloty jak w pozostalych miejscach ciemnego motywu. */
:root[data-motyw="ciemny"] .fak-akcje .przycisk-link.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .fak-akcje .przycisk-link.glowny, :root:not([data-motyw="jasny"]) .bps-akcje .przycisk-link.glowny { background: var(--zloto); color: #15171c; border-color: var(--zloto); }
  :root:not([data-motyw="jasny"]) a.przycisk-link.glowny { color: #15171c; }
}

/* ===== 1.57.0: Pulpit pracownika (/pracownik) — dane jednej osoby ===== */
.pr-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-kafle .kafel-liczba.pr-tekst { font-size: 1.25rem; line-height: 1.25; padding-top: .35rem; }
.pr-kafle .pr-jedn { font-size: 1rem; font-weight: 600; color: var(--atrament-cichy); }
.pr-czerw { color: var(--blad); font-weight: 600; }
.pr-sekcja h2 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pr-sekcja-gora { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.pr-sekcja-gora h2 { margin: 0; }
.pr-rok .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pr-rok select { height: 2.1rem; padding: 0 .6rem; border-radius: 8px; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--atrament); }
.pr-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .6rem .85rem; border: 1px solid var(--linia); border-radius: 10px; background: var(--tlo); }
.pr-lista .pr-l-g, .pr-lista .pr-l-d { display: flex; flex-direction: column; gap: .15rem; }
.pr-lista .pr-l-d { align-items: flex-end; text-align: right; }
.pr-lista li.pr-w-zlozony { border-left: 3px solid var(--zloto); }
.pr-lista li.pr-w-zatwierdzony, .pr-lista li.pr-w-wpisany { border-left: 3px solid #2f7a4d; }
.pr-lista li.pr-w-odrzucony_klient, .pr-lista li.pr-w-odrzucony_biuro { border-left: 3px solid var(--blad); }
.pr-tab tr.pr-trwa td { background: color-mix(in srgb, var(--zloto) 12%, transparent); }
.pr-tab tr.pr-przyszla td { color: var(--atrament-cichy); }
.pr-stopka { margin-top: .6rem; }
.pr-moduly { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.pr-modul { display: flex; gap: .7rem; align-items: center; padding: .7rem .85rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--tlo); color: var(--atrament); text-decoration: none; opacity: 0; transform: translateY(6px); animation: wjazd .4s var(--ruch-krzywa) forwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.pr-modul:hover { border-color: var(--zloto); }
.pr-modul span:last-child { display: flex; flex-direction: column; }
.pr-modul-ik { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 10px; background: var(--powierzchnia); border: 1px solid var(--linia); color: var(--zloto-ciemne); flex: none; }
.pr-modul-ik .ik { width: 1.1rem; height: 1.1rem; }
@media (max-width: 900px) { .pr-kafle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pr-kafle { grid-template-columns: 1fr; } .pr-lista li { grid-template-columns: 1fr; } .pr-lista .pr-l-d { align-items: flex-start; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .pr-modul { animation: none; opacity: 1; transform: none; } }
/* 1.57.1: bez zakresu Podatki kafel ZUS/PIT znika — 5 kafli: dwa ostatnie dziela drugi rzad (3 kolumny) / piec rownych (szeroki ekran) */
@media (min-width: 50rem) and (max-width: 95.99rem) { .kafle.kd-kafle:not(:has(.kd-zuspit)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kafle.kd-kafle:not(:has(.kd-zuspit)) > .kafel { grid-column: span 2; } .kafle.kd-kafle:not(:has(.kd-zuspit)) > .kafel:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 96rem) { .kafle.kd-kafle:not(:has(.kd-zuspit)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ===== 1.59.0 I-46: "zaktualizowana" — lista plac / deklaracja zmieniona po przekazaniu ===== */
.kd-poprzednio { margin: .35rem 0 0; } .kd-poprzednio s { text-decoration-color: rgba(120,120,120,.6); }
.pd-zakt-info { margin: .35rem 0 0; padding: .55rem .8rem; border: 1px solid rgba(201,178,107,.6); border-left: 3px solid var(--zloto); border-radius: 10px; background: var(--akcent-tlo); font-size: .9rem; line-height: 1.5; }
.pd-zakt-info .plakietka-stan { margin-right: .35rem; vertical-align: middle; }

/* 1.59.1: Pulpit pracownika na telefonie — wyplata jako karta (okres + lista, kwoty z etykieta, kwitek), bez przewijania w bok */
@media (max-width: 600px) {
  .pr-tab thead { display: none; }
  .pr-tab, .pr-tab tbody { display: block; }
  .pr-tab tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .7rem .85rem; border-bottom: 1px solid var(--linia); }
  .pr-tab tr:last-child { border-bottom: 0; }
  .pr-tab td { display: block; padding: 0; border: 0; text-align: left; }
  .pr-tab td:nth-child(1) { grid-column: 1 / -1; }
  .pr-tab td:nth-child(2) { grid-column: 1 / -1; margin-bottom: .2rem; }
  .pr-tab td[data-et]::before { content: attr(data-et); display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--atrament-cichy); }
  .pr-tab td.r { text-align: left; }
  .pr-tab td.akcje { grid-column: 1 / -1; margin-top: .35rem; }
}

/* 1.60.0 (I-47): wyciag poza obiegiem (duplikat / zastapiony) — spokojnie, nie jak blad; info pod naglowkiem; podpowiedz przy wyborze miesiaca */
.tabela-wyciagi tr.w-poza > td { color: var(--atrament-cichy); }
.tabela-wyciagi tr.w-poza .kol-data strong { font-weight: 500; }
.nw-info { margin: .9rem 0 0; padding: .6rem .85rem; display: flex; gap: .5rem; align-items: flex-start; background: var(--akcent-tlo); border-radius: var(--promien); font-size: .92rem; }
.nw-info .ik { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--zloto-ciemne); }
.wy-zajety { margin: -.25rem 0 .5rem; padding: .45rem .7rem; background: var(--akcent-tlo); border-radius: var(--promien); }

/* 1.61.0 (I-48): czesc ewidencyjna JPK_V7K — wiersz informacyjny (bez kwoty), karta w szczegolach */
.pd-lista li.ewidencja .pd-karta { opacity: .85; }
.pd-lista li.ewidencja .pd-ikona { background: var(--linia); color: var(--atrament-cichy); }
.pd-ewid-kwota { display: flex; flex-direction: column; gap: .2rem; max-width: 22rem; text-align: right; }
@media (max-width: 700px) { .pd-ewid-kwota { text-align: left; max-width: none; } }

/* 1.61.1: ramki informacyjne I-47 i podpowiedz przy wgrywaniu wjezdzaja (animowane, zywe); bez ruchu przy prefers-reduced-motion */
.nw-info, .wy-zajety:not([hidden]) { animation: info-wjazd .45s var(--ruch-krzywa, cubic-bezier(.2,.7,.2,1)) both; }
@keyframes info-wjazd { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nw-info, .wy-zajety:not([hidden]) { animation: none; } }

/* 1.62.0 (I-49): suma w walucie obcej (VIU-DO w EUR) — osobna linia pod "Razem do zaplaty", nigdy nie dodawana do zl */
.pd-suma-obca { display: block; margin-top: .2rem; }
.kafel-obca { display: block; margin-top: .3rem; font-size: .75rem; font-weight: 600; color: var(--zloto-ciemne); }