/* 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: #a08a4a;
  --ciemny: #1c1c1c;
  --blad: #a8352f;
  --blad-tlo: #fbecea;
  --uwaga: #9a6a12;
  --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; --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; --ok-tlo: #1e2b22; --blad-tlo: #33201f; --uwaga: #e4b45c; --blad: #e26a63; --ciemny: #0f1013;
}
:root[data-motyw="ciemny"] .nawigacja a.aktywna { color: #15171c; }
@media (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; }
button.naglowek-link.link { color: #fff; text-decoration: none; }
.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], select {
  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: #fff4d6; 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(--ciemny); }
h2 { color: var(--ciemny); }
.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: #fffaf9; } .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 .kwota { color: var(--atrament-cichy); text-decoration: line-through; }
.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 { color: #6f6f6f; }
.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: #7d7866; letter-spacing: .08em; text-transform: uppercase; }
.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); }
}

/* 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 .stopka { color: #6f6f6f; }
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); }
}

/* Pulpit po zalogowaniu — ciemna nawigacja boczna, jasna tresc, karty z cieniem */
body.zalogowany { background: #f3f2ee; }
@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, #fffdf7 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: #fff8e6; font-size: .9rem; }
:root[data-motyw="ciemny"] .uwaga-biura { background: #3a2f10; }

/* Zywe listy i toasty */
.nowy { animation: wjazd .6s ease; background: #fff8e6; }
@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); transform: translateY(-1px); }
.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, 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; }
@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:not(.bez-animacji) [data-ujaw] { opacity: 0; transform: translateY(14px); }
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, border-color .15s, color .15s; }
.odpowiedz-na .ik { width: .9rem; height: .9rem; }
.wpis-dymek:hover .odpowiedz-na, .reakcje:focus-within .odpowiedz-na { opacity: 1; } @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 .kol-brutto .kwota { color: var(--atrament-cichy); text-decoration: line-through; text-decoration-color: rgba(59,139,90,.5); text-decoration-thickness: 1px; }
@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 { 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; }