:root{
  --tlo:#0f1115; --karta:#171a21; --karta2:#1e222b; --kresk:#2a303c;
  --tekst:#e6e9ef; --slaby:#9aa4b5; --akcent:#4da3ff;
  --dobry:#3ecf8e; --zly:#ff6b6b; --uwaga:#ffb648;
  /* Ciepla barwa przycisku zgloszenia. WLASNE tokeny, a nie samo
     `--uwaga`: to jest kolor TEKSTU i obramowania, wiec musi miec kontrast
     w obu motywach. `#ffb648` czytelne na ciemnym tle robi sie nieczytelne
     na bialym, a przycisk, ktorego nie widac, wlasnie byl zgloszony. */
  --cieply-tlo:#2a2118; --cieply-tekst:#ffb648; --cieply-kresk:#7a5320;
}
@media (prefers-color-scheme: light){
  :root{ --tlo:#f6f7f9; --karta:#fff; --karta2:#f0f2f6; --kresk:#dfe3ea;
         --tekst:#14181f; --slaby:#5f6b7d;
         --cieply-tlo:#fff4e3; --cieply-tekst:#9a5a12;
         --cieply-kresk:#f0c088; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--tlo);color:var(--tekst);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--akcent);text-decoration:none}
a:hover{text-decoration:underline}

header{display:flex;align-items:center;gap:18px;row-gap:4px;flex-wrap:wrap;
  padding:12px 24px;
  background:var(--karta);border-bottom:1px solid var(--kresk);position:sticky;top:0;z-index:9}
/* Bez `gap` — odstęp działałby także MIĘDZY LITERAMI nazwy (flex traktuje
   „Koszt", monetę i „mat" jak trzy równorzędne dzieci) i rozpychał logo
   na trzy osobne kawałki. Powietrze wokół monety daje jej własny margines. */
.logo{font-size:19px;color:var(--tekst);display:inline-flex;align-items:center}
.logo b{color:var(--akcent)}
.logo-znak{display:block;flex:none}
/* Moneta zamiast litery „o": rozmiar w `em`, więc skaluje się razem
   z napisem — w pasku (19 px) i na landingu (30 px) waży w wierszu tyle
   samo co sąsiednie litery, bez ręcznego dobierania pikseli. */
.logo-moneta{width:.74em;height:.74em;margin:0 .01em;flex:none;
  position:relative;top:.01em}
nav{display:flex;gap:6px;flex-wrap:wrap}
/* nowrap w pigułce: przy ciasnym pasku cały guzik schodzi do niższego
   rzędu, zamiast łamać się w środku na dwie linie */
nav a{padding:6px 14px;border-radius:7px;color:var(--slaby);white-space:nowrap}
nav a:hover{background:var(--karta2);text-decoration:none}
nav a.on{background:var(--akcent);color:#fff}
/* Konto dostawcy → pełne konto: jedyna droga z bezpłatnego panelu do produktu,
   więc wyróżniona obwódką, a nie schowana wśród zakładek (23.09.2026). */
nav a.nav-pelne{color:var(--akcent);border:1px solid var(--akcent);margin-left:6px}
nav a.nav-pelne.on{color:#fff}
.pelne-wybor{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 0 18px}
.pelne-wybor .karta{display:flex;flex-direction:column;gap:10px}
.pelne-wybor .karta h2{margin:0}
.pelne-wybor .karta p{margin:0}
.pelne-wybor .karta form{margin-top:auto}
/* ⛔ `flex:1` + `justify-content:flex-end`: prawa część paska ROŚNIE
   w wolne miejsce po nawigacji, żeby pole „Zapytaj" miało z czego brać
   szerokość (zgłoszenie 75, 12.09.2026: „pole zapytaj by mogło być
   szersze!" — stało na sztywnych 340 px przy pustych 400 px obok). */
.stopka{margin-left:auto;flex:1 1 auto;justify-content:flex-end;
  color:var(--slaby);font-size:13px;
  display:flex;align-items:center;gap:6px;min-width:0}
/* długa nazwa firmy (demo ma 54 znaki) nie może rozpychać paska —
   przycinamy z wielokropkiem, pełna nazwa w podpowiedzi (title) */
.stopka .firma-nazwa{max-width:26ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:inline-block}
.stopka .nierwij{white-space:nowrap}

main{max-width:1240px;margin:0 auto;padding:22px}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:26px 0 10px}
.pod{color:var(--slaby);margin:0 0 18px}

.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.karta{background:var(--karta);border:1px solid var(--kresk);border-radius:11px;padding:14px 16px}
/* Kafelek, który JEST odnośnikiem. Bez tego globalna reguła dla `a`
   zabarwiłaby cały kafelek na kolor akcentu i wyglądałby jak obcy element
   wśród sąsiadów. Klikalność pokazujemy obramowaniem przy najechaniu,
   a nie kolorem tekstu. */
a.karta{color:inherit;display:block}
a.karta:hover{border-color:var(--akcent)}

.karta .etykieta{color:var(--slaby);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.karta .liczba{font-size:25px;font-weight:600;margin-top:5px}
.karta .liczba.zly{color:var(--zly)} .karta .liczba.dobry{color:var(--dobry)}
/* ⛔ Trzeci stopień. Bez niego 89 % porównywalności świeciło tak samo
   czerwono jak 12 % — a to są dwie zupełnie różne sytuacje: pierwsza
   znaczy „prawie wszystko da się porównać", druga „narzędzie nie ma
   z czym pracować". Skala dwustopniowa zamienia wskaźnik w alarm, który
   pali się zawsze, więc przestaje się go czytać. */
.karta .liczba.uwaga{color:var(--uwaga)}
/* Pasek pod liczbą: ile z całości. Sama liczba wymaga porównania w głowie
   („235 z 368 to dużo czy mało?"), pasek odpowiada od razu. */
.pasek-udzial{height:4px;border-radius:2px;background:var(--karta2);
  margin-top:7px;overflow:hidden}
.pasek-udzial i{display:block;height:100%;background:var(--dobry)}
.pasek-udzial.uwaga i{background:var(--uwaga)}
.pasek-udzial.zly i{background:var(--zly)}

table{width:100%;border-collapse:collapse;background:var(--karta);
  border:1px solid var(--kresk);border-radius:11px;overflow:hidden}
th{background:var(--karta2);text-align:left;padding:9px 12px;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--slaby);font-weight:600}
td{padding:9px 12px;border-top:1px solid var(--kresk);vertical-align:top}
tr:hover td{background:var(--karta2)}
td.l,th.l{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.male{font-size:12.5px;color:var(--slaby)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}

.plakietka{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11.5px;
  border:1px solid var(--kresk);color:var(--slaby);white-space:nowrap}
.plakietka.wysoka{background:rgba(255,107,107,.14);color:var(--zly);border-color:transparent}
.plakietka.srednia{background:rgba(255,182,72,.14);color:var(--uwaga);border-color:transparent}
.plakietka.ok{background:rgba(62,207,142,.14);color:var(--dobry);border-color:transparent}
/* ⛔ Ostrzeżenie o PIENIĄDZU ponad progiem 15 tys. zł albo o statusie VAT.
   Klasa `zly` nie istniała w ogóle, więc plakietka spadała do domyślnej,
   szarej — a ekran, na który patrzy się PRZED przelewem, pokazywał tę
   samą żółć co przy drobiazgu (Robert 2026-08-26: „te alerty są żółte
   warning, a powinny być czerwone"). Pełne tło, nie 14% — to jest
   różnica między „zerknij" a „nie płać, dopóki nie sprawdzisz". */
.plakietka.zly{background:var(--zly, #e64c4c);color:#fff;
  border-color:transparent;font-weight:600;font-size:12px;padding:2px 9px}
/* „nowy" dostawca — pierwszy zakup w ostatnich 30 dniach. Kolor
   akcentu, NIE ostrzegawczy: nowy dostawca to informacja, nie
   problem. Pomarańcz obok („⚠ biała lista") znaczy tu co innego
   i te dwa znaczenia nie mogą wyglądać tak samo. */
.plakietka.nowy{background:rgba(77,163,255,.14);color:var(--akcent);
  border-color:transparent}

/* Wejście do Abonamentu w pasku konta — obok nazwy firmy i wylogowania,
   a NIE w liście zakładek. Ta ma już czternaście pozycji i każda
   kolejna psuje wszystkie pozostałe; abonament to zresztą sprawa
   KONTA, nie kolejny widok na dane. */
/* Okruszki: gdzie jestem, gdy zakladka nadrzedna swieci sie dla podstrony.
   Jedna linia zamiast domyslania sie z podswietlenia. */
.okruszki{margin:0 0 2px;color:var(--slaby)}
.okruszki a{color:var(--slaby)}
.okruszki a:hover{color:var(--tekst)}
.okruszki .cichy{margin:0 4px;opacity:.6}

/* Menu konta — JEDNA rzecz w prawym rogu zamiast czterech.
   Prawy górny róg to konwencja tożsamości UŻYTKOWNIKA (Gmail, Slack,
   GitHub, banki); lewy — tożsamości PRODUKTU. Problem nigdy nie był
   w stronie, tylko w liczbie rzeczy sklejonych kropkami. */
.konto{position:relative;display:inline-block;margin-left:10px}
.konto-przycisk{display:inline-flex;align-items:center;gap:7px;
  background:var(--karta);border:1px solid var(--kresk);border-radius:8px;
  padding:4px 11px;font-size:13px;color:var(--tekst);cursor:pointer}
.konto-przycisk:hover{background:var(--karta2)}
.konto-strzalka{color:var(--slaby);font-size:11px;line-height:1}
/* ⛔ Menu ma WYSOKI stos: nagłówek jest `sticky` z `z-index:9`, więc bez
   tego lista chowałaby się pod paskiem stanu danych tuż pod nim. */
.konto-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  min-width:236px;background:var(--karta);border:1px solid var(--kresk);
  border-radius:10px;padding:5px 0;text-align:left;
  box-shadow:0 12px 34px rgba(0,0,0,.28)}
.konto-nip{padding:7px 14px;font-size:12px;color:var(--slaby)}
.konto-kreska{height:1px;background:var(--kresk);margin:4px 0}
.konto-pozycja{display:flex;justify-content:space-between;align-items:center;
  gap:16px;width:100%;box-sizing:border-box;padding:8px 14px;font-size:13.5px;
  color:var(--tekst);text-decoration:none;background:none;border:0;
  border-radius:0;text-align:left;cursor:pointer}
.konto-pozycja:hover{background:var(--karta2);text-decoration:none}
.konto-pozycja.on{color:var(--akcent);font-weight:600}
/* ⭐ Dopisek dziedziczy kolor pozycji — patrz lekcja z pigułki Abonamentu:
   klasa niosąca własny kolor wewnątrz kolorowego elementu zawsze z nim
   wygra i zrobi się nieczytelna. */
.konto-dopisek{color:inherit;opacity:.6;font-size:12px;white-space:nowrap}
.konto-wyjscie{color:var(--slaby)}

.pigulka-konto{display:inline-block;padding:3px 10px;border-radius:20px;
  border:1px solid var(--kresk);font-size:12px;color:var(--slaby);
  text-decoration:none;margin-left:8px;white-space:nowrap}
.pigulka-konto:hover{background:var(--karta2);color:var(--tekst)}
.pigulka-konto.on{background:var(--akcent);color:#fff;border-color:transparent}
/* ⛔ `.male` USTAWIA WŁASNY KOLOR (`--slaby`, czyli szary) — a robi to
   bezpośrednio na elemencie, więc bije biel dziedziczoną z niebieskiej
   pigułki. Data „do 09.26" była szara przy 75% krycia na niebieskim tle,
   czyli praktycznie niewidoczna (właściciel 2026-08-27: „ten napis jest
   niewidoczny, daty").
   `inherit` naprawia OBA stany naraz: na cichej pigułce dziedziczy jej
   szarość (bez zmian), na aktywnej — biel. Klasa pomocnicza, która niesie
   kolor, wewnątrz kolorowego tła zawsze będzie z nim walczyć. */
.pigulka-konto .male{color:inherit;opacity:.85;margin-left:3px}

form.szuk{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}

/* Rzad filtrow: wybory i przycisk w jednej linii, na waskim ekranie
   zawijaja sie same. ⛔ Selekty dostaja wspolna szerokosc minimalna, zeby
   „— wszyscy dostawcy —" nie rozpychalo rzedu dwa razy bardziej niz
   sasiad i zeby nie skakaly przy zmianie wyboru. */
.rzad-filtrow{align-items:center}
.rzad-filtrow select{min-width:15rem;max-width:100%}
@media (max-width:560px){ .rzad-filtrow select{min-width:0;flex:1 1 100%} }
input,select,textarea,button{font:inherit;background:var(--karta);color:var(--tekst);
  border:1px solid var(--kresk);border-radius:8px;padding:8px 11px}
/* ⛔ PODPOWIEDŹ MUSI WYGLĄDAĆ INACZEJ NIŻ WPISANY TEKST.
   Do 2026-08-27 arkusz nie miał ANI JEDNEJ reguły dla `::placeholder`,
   więc 52 pola w aplikacji renderowały ją domyślnym stylem przeglądarki —
   ciemną szarością nieodróżnialną od treści. Właściciel: „chociażby już
   było wypełnione (…) czasami mi jest to ciężko rozróżnić".
   Kursywa jest tu ważniejsza od koloru: kolor bywa nieczytelny przy
   słabym kontraście ekranu, a pochylenie widać zawsze. */
input::placeholder,textarea::placeholder{
  color:var(--slaby);opacity:.55;font-style:italic}
/* ⛔ I PRZYGASZAMY JESZCZE MOCNIEJ, GDY KURSOR STOI W POLU. Pierwsza wersja
   (krycie .7) nie wystarczyła — właściciel dalej: „strasznie to nie wygląda
   jak podpowiedź, ale prawie jak wypełniony tekst". Sedno widać na jego
   zrzucie: w polu MIGAŁ KURSOR, a tekst obok kursora czyta się jak treść,
   którą ktoś przed chwilą wpisał. Pole, w którym stoisz, ma wyglądać
   na PUSTE i gotowe do pisania. */
input:focus::placeholder,textarea:focus::placeholder{opacity:.3}
textarea{width:100%;min-height:150px;font-family:ui-monospace,Consolas,monospace;font-size:13.5px}
button{background:var(--akcent);color:#fff;border:0;cursor:pointer;padding:9px 20px;font-weight:600}
button:hover{filter:brightness(1.1)}
/* ⛔ CICHY NIE ZNACZY NIEWIDOCZNY. Zgłoszenie 52 (09.09.2026, ekran
   Towary): „te przyciski są chociaż ukryte, nie uważasz? … może można coś
   CSS podkręcić tutaj?". Wypełnienie `--karta2` na tle karty i obramowanie
   w kolorze KRESKI dawały prostokąt, który czyta się jak wyłączony —
   a to są prawdziwe akcje („Porównuj tylko u tego dostawcy", „Wycisz").
   Obramowanie idzie więc na kolor tekstu pobocznego, a najechanie mówi
   wprost, że to klikalne. Ton zostaje cichy: to nadal NIE jest akcja
   główna i nie ma konkurować z niebieskim „Zapisz". */
button.cichy{background:var(--karta2);color:var(--tekst);
  border:1px solid var(--slaby)}
button.cichy:hover{background:var(--karta);border-color:var(--akcent);
  color:var(--akcent);filter:none}
/* przycisk, który ma wyglądać jak odnośnik w zdaniu — akcja poboczna,
   a nie druga akcja główna obok Zapisz */
button.link-przycisk{background:none;border:0;padding:0;color:var(--akcent);
  font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
button.link-przycisk:hover{filter:none;text-decoration:none}

.wynik{background:var(--karta);border:1px solid var(--kresk);border-radius:11px;
  padding:16px 18px;margin-bottom:14px}
.wynik h3{margin:0 0 3px;font-size:16px}
/* Lista adresatów zapytania (właściciel 08.10.2026: „od razu dać listę i ty
   sobie tylko zaznaczasz, gdzie wysłać”): wiersz = pole wyboru + zwinięty list. */
.wynik.adresat{padding:10px 14px;margin-bottom:8px}
.adresat-wiersz{display:flex;gap:10px;align-items:flex-start}
.adresat-wiersz > .hurtem-etykieta,.adresat-wiersz > .hurtem-puste{display:block;flex:0 0 22px;padding-top:3px;cursor:pointer}
.adresat-wiersz > .hurtem-etykieta input{width:18px;height:18px;cursor:pointer}
.adresat-tresc{flex:1 1 auto;min-width:0;margin-top:0}
.adresat-tresc > summary{list-style:none;color:var(--tekst);font-size:inherit}
.adresat-tresc > summary::-webkit-details-marker{display:none}
.adresat-tresc > summary::before{content:"▸";color:var(--slaby);margin-right:6px;
  display:inline-block;transition:transform .15s}
.adresat-tresc[open] > summary::before{transform:rotate(90deg)}
.adresat-tresc[open] > summary{margin-bottom:8px}
.adresat-nazwa{display:inline;margin:0;font-size:15px}
.adresat-dane{display:block;margin:2px 0 0 18px;overflow-wrap:anywhere}
.wynik .kod{color:var(--slaby);font-size:13px;font-family:ui-monospace,Consolas,monospace}
.werdykt{margin:12px 0;padding:11px 14px;border-radius:9px;background:var(--karta2);
  border-left:3px solid var(--kresk)}
.werdykt.oszczedza{border-left-color:var(--dobry)}
.werdykt.brak{border-left-color:var(--uwaga)}
.werdykt b{font-size:16px}
details{margin-top:9px}
summary{cursor:pointer;color:var(--slaby);font-size:13px}
.pasek{height:5px;background:var(--karta2);border-radius:3px;overflow:hidden;margin:9px 0}
.pasek i{display:block;height:100%;background:var(--akcent);transition:width .4s}
.log{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--slaby);
  max-height:150px;overflow:auto;background:var(--karta2);padding:9px 12px;border-radius:8px}
.puste{color:var(--slaby);padding:26px;text-align:center;background:var(--karta);
  border:1px dashed var(--kresk);border-radius:11px}
/* Pasek komunikatu. `white-space:pre-line` (do 2026-08-19) zamieniał KAŻDE
   złamanie linii z szablonu w widoczny wers — tekst rozpadał się na krótkie
   kawałki i wyglądał na źle sformatowany (uwaga Roberta: „ta czcionka
   i formatowanie jakoś nie pasuje"). Domyślnie łamiemy więc normalnie,
   a zachowanie łamań zostaje dla tych nielicznych miejsc, które ich
   naprawdę potrzebują — klasa `.linie`. */
/* Komunikat wygląda jak reszta aplikacji — karta z kolorową belką z lewej,
   nie pomarańczowa płachta. Wcześniej pole na całą szerokość świeciło tłem
   mocniej niż treść, którą niosło, a czcionka odstawała od reszty
   (uwaga Roberta 2026-08-19: „ten pomarańczowy textbox wygląda średnio,
   czcionka i formatowanie jakoś nie pasuje"). Kolor przenieśliśmy na
   3-punktową belkę: rodzaj komunikatu nadal widać z drugiego końca
   pokoju, ale to treść jest najjaśniejszym elementem. */
.uwagi{background:linear-gradient(rgba(255,182,72,.055),
    rgba(255,182,72,.055)) var(--karta);
  border:1px solid var(--kresk);border-left:3px solid var(--uwaga);
  border-radius:10px;padding:13px 16px;margin:14px 0;font-size:14px;
  line-height:1.6;text-align:left;color:var(--tekst)}
/* ⛔ Trzeci stan wiarygodnosci: prog 15 tys. zl PRZEKROCZONY, a konto
   nie figuruje na bialej liscie. Do 2026-08-25 byly dwa stany, wiec
   faktura na 200 zl i faktura na 66 tys. zl wygladaly tak samo — a to
   dwie zupelnie inne decyzje przed przelewem. Czerwony ma sie roznic
   od zoltego z odleglosci ekranu, bo tak sie ten ekran czyta. */
/* Wiersz faktury zaplaconej na konto SPOZA bialej listy powyzej progu
   15 tys. zl. ⛔ Ostrzezenie o samym koncie klient czytal i nie wiedzial,
   ktorej faktury dotyczy — a decyzja zapada przy konkretnym dokumencie
   (Robert 2026-08-26: "te faktury powinny sie swiecic na czerwono"). */
tr.zly-wiersz td{background:rgba(230,76,76,.075)}
tr.zly-wiersz td:first-child{box-shadow:inset 3px 0 0 var(--zly, #e64c4c)}
.uwagi.grozne{background:linear-gradient(rgba(230,76,76,.075),
    rgba(230,76,76,.075)) var(--karta);
  border-left:3px solid var(--zly, #e64c4c)}
/* Potwierdzenie udanej akcji („Wyciszono cala sprawe (7)") — zielone,
   zeby nie czytalo sie jak ostrzezenie. */
.uwagi.ok{background:linear-gradient(rgba(62,207,142,.075),
    rgba(62,207,142,.075)) var(--karta);
  border-left:3px solid var(--dobry, #3ecf8e)}
.uwagi.linie{white-space:pre-line}
/* Przycisk nieodwracalny. ⛔ Musi wyglądać INACZEJ niż każdy inny w tej
   aplikacji — szary „Zapisz" i szary „Usuń konto i wszystkie dane" obok
   siebie to zaproszenie do pomyłki, której nie da się cofnąć. Czerwień
   jest tu treścią, nie ozdobą. */
button.grozny{background:var(--zly, #e64c4c);border-color:var(--zly, #e64c4c);
  color:#fff;font-weight:600}
button.grozny:hover{background:#c93f3f;border-color:#c93f3f}
.uwagi b{font-weight:600}
.uwagi p{margin:0 0 6px}
.uwagi p:last-child{margin:0}
.uwagi code{white-space:normal}
/* Trzy barwy komunikatu, bo trzy różne wiadomości: „zrobione" (zielony),
   „uważaj" (żółty, domyślny) i „nie wyszło" (czerwony). Jeden żółty na
   wszystko sprawiał, że potwierdzenie zapisu wyglądało jak ostrzeżenie. */
.uwagi.ok{border-color:var(--kresk);border-left-color:var(--dobry);
  background:linear-gradient(rgba(62,207,142,.055),
    rgba(62,207,142,.055)) var(--karta)}
.uwagi.blad{border-color:var(--kresk);border-left-color:var(--zly);
  background:linear-gradient(rgba(255,107,107,.06),
    rgba(255,107,107,.06)) var(--karta)}
/* Pierwszy wiersz komunikatu jest tytułem — dostaje własny rytm, żeby
   „co się stało" dało się przeczytać jednym rzutem oka, a szczegóły
   doczytać niżej. */
.uwagi > b:first-child{display:inline-block;margin-bottom:2px;font-size:14.5px}

/* Dymek: komunikat po akcji, przyklejony do rogu ekranu. Powstał, bo po
   „Wyślij próbny e-mail" strona wracała na górę i wynik lądował poza
   ekranem — baner w treści jest dobry tylko wtedy, gdy patrzysz akurat
   w to miejsce. Dymek widać niezależnie od przewinięcia; znika sam
   (skrypt w app.js), błędy wiszą dłużej niż potwierdzenia. */
.dymek{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:80;max-width:520px;min-width:280px;
  background:linear-gradient(rgba(255,182,72,.055),
    rgba(255,182,72,.055)) var(--karta);
  border:1px solid var(--kresk);border-left:3px solid var(--uwaga);
  border-radius:11px;padding:13px 40px 13px 16px;
  font-size:13.5px;line-height:1.5;box-shadow:0 8px 28px rgba(0,0,0,.35);
  animation:dymek-in .25s ease-out;transition:opacity .4s, transform .4s}
/* lekkie kolorowe tło zamiast samej obwódki — widać rodzaj komunikatu
   z daleka, zanim się przeczyta (życzenie Roberta) */
.dymek.ok{border-color:var(--kresk);border-left-color:var(--dobry);
  background:linear-gradient(rgba(62,207,142,.06),
    rgba(62,207,142,.06)) var(--karta)}
.dymek.blad{border-color:var(--kresk);border-left-color:var(--zly);
  background:linear-gradient(rgba(255,107,107,.06),
    rgba(255,107,107,.06)) var(--karta)}
.dymek.znika{opacity:0;transform:translate(-50%,8px)}
.dymek .dymek-x{position:absolute;top:6px;right:10px;cursor:pointer;
  color:var(--slaby);font-size:16px;line-height:1;background:none;border:0;
  padding:4px}
@keyframes dymek-in{from{opacity:0;transform:translate(-50%,14px)}
  to{opacity:1;transform:translate(-50%,0)}}
/* ⛔ MENU NA TELEFONIE ZJADALO POL EKRANU. Pietnascie pozycji przy
   `flex-wrap:wrap` ukladalo sie w PIEC rzedow — zanim klient zobaczyl
   cokolwiek ze swoich danych, przewijal przez cala nawigacje. Zgloszenie
   wlasciciela 31.08.2026: „wersja na tel poki co slaba, zobacz na pasek
   menu, trzeba to jakos przerobic".

   ⭐ Jeden rzad z przewijaniem w poziomie zamiast pieciu. Menu schodzi
   z ~440 px do ~46 px, a wszystkie pozycje zostaja dostepne machnieciem
   palca — tak dzialaja zakladki w aplikacjach na telefonie, wiec gest
   jest znany.

   ⛔ BEZ ROZWIJANEGO HAMBURGERA. Wymagalby skryptu w tresci, a tego
   zabrania nasze CSP; wersja na `details/summary` chowa CALA nawigacje
   za jednym kliknieciem, wiec klient przestaje widziec, gdzie jest.
   Przewijany pasek pokazuje biezaca zakladke i sasiadow. */
@media (max-width:760px){
  nav{flex-wrap:nowrap;overflow-x:auto;gap:2px;
      /* zapas na cien zanikania po prawej, zeby nie zaslanial ostatniej
         pozycji */
      padding-right:26px;
      scrollbar-width:none;-ms-overflow-style:none;
      /* przewijanie zatrzymuje sie na pozycjach, a nie w pol slowa */
      scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:none;scroll-snap-align:start;padding:8px 12px}

  /* ⛔ Sam przewijany pasek nie mowi, ze cos jest dalej. Bez tego cienia
     klient widzi „Przeglad … Badaj rynek" i uznaje, ze to cale menu. */
  /* ⛔ min-width:0 I flex:1 1 100% — BEZ TEGO CALA TA SEKCJA NIC NIE ROBI.
     Naglowek jest flexem (header{display:flex}), a element flexa domyslnie
     NIE KURCZY SIE ponizej szerokosci swojej tresci (min-width:auto).
     Pasek rozpychal sie wiec do 1303 px przy widoku 485 px, a overflow-x
     nie mial czego przycinac — menu wygladalo tak samo jak przedtem.
     Zmierzone 31.08.2026: rodzic=1303, viewport=485, scrollLeft utknal
     na zerze, bo scrollWidth == clientWidth. */
  .pasek-nawigacji{position:relative;flex:1 1 100%;min-width:0;max-width:100%}
  .pasek-nawigacji::after{content:"";position:absolute;top:0;bottom:0;
    right:0;width:26px;pointer-events:none;
    background:linear-gradient(to right,transparent,var(--tlo))}
}

@media (max-width:760px){
  .dymek{left:12px;right:12px;transform:none;max-width:none;min-width:0}
  .dymek.znika{transform:translateY(8px)}
  @keyframes dymek-in{from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}}
}

/* --- klasy zamiast atrybutów style= ----------------------------------------
   Powód nie jest kosmetyczny: dopóki cokolwiek stoi w `style="…"`, polityka
   CSP musi dopuszczać 'unsafe-inline' dla stylów, a to otwiera furtkę,
   którą CSP ma zamykać. Nazwy są opisowe (`.tekst-waski`, `.odstep-nad`),
   nie utility-owe (`.mt-8`), bo mają mówić PO CO, a nie ILE pikseli. */
.odstep-nad{margin-top:8px}
.odstep-nad-duzy{margin-top:16px}
.odstep-pod{margin-bottom:18px}
.bez-marginesu{margin:0}
.tekst-waski{max-width:62ch}
.tekst-sredni{max-width:74ch}
.luzno{line-height:1.8}
.mocny{font-weight:600}
.klikalne{cursor:pointer}
.pole-szerokie{min-width:280px}
/* Pole hasła stoi w jednym rzędzie z przyciskiem „Zapisz" (zgłoszenie
   nr 30). `flex` z `min-width:0` zamiast `width:100%`: przy szerokim
   ekranie pole zajmuje resztę rzędu, a na telefonie przycisk zjeżdża
   pod spód, zamiast wypychać pole poza kartę. */
.ust-wiersz .rzad > input.pole-haslo{flex:1 1 220px;width:auto;min-width:0;
  max-width:420px}
.pole-pelne{width:100%}
.kreska-poziom{flex:1;border-top:1px solid var(--kresk)}
.rzad{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* ── ZASLONA NA CZAS PRZELICZANIA ──────────────────────────────────────
   „Przeliczenie ubrac w jeden proces […] blokujemy przegladanie apki,
   dajemy duzy kreciolek na srodek ekranu i tyle" (wlasciciel 05.09.2026).
   Sens jest dwojaki: klient nie generuje ruchu po danych, ktore za chwile
   sie zmienia, i WIDZI, ze cos sie dzieje — zamiast ogladac polowe.

   ⛔ `position:fixed` + `inset:0`, nie overlay w tresci: zaslona ma
   przykryc takze pasek zakladek, inaczej klient klika w menu i dostaje
   kolejny ekran z polowa danych. */
.zaslona{position:fixed;inset:0;z-index:900;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb, var(--tlo) 88%, transparent);
  backdrop-filter:blur(3px)}
.zaslona-karta{max-width:34rem;text-align:center;background:var(--karta);
  border:1px solid var(--kresk);border-radius:14px;padding:28px 24px}
.zaslona-karta h2{margin:14px 0 8px}
.zaslona-karta p{margin:6px 0}
/* ⛔ Wyjscie awaryjne jest od PIERWSZEJ sekundy, nie po awarii —
   przygaszone, zeby nie zachecalo, ale obecne, zeby nikt nie utknal. */
.zaslona-wyjscie{margin-top:16px !important;opacity:.62}
.kreciolek{width:54px;height:54px;margin:0 auto;border-radius:50%;
  border:4px solid var(--kresk);border-top-color:var(--akcent);
  animation:kreci 1s linear infinite}
@keyframes kreci{to{transform:rotate(360deg)}}
/* Ruch potrafi szkodzic — przy wylaczonych animacjach zostaje pulsowanie
   samego koloru, bo BRAK jakiegokolwiek sygnalu czytalby sie jak zwis. */
@media (prefers-reduced-motion: reduce){
  .kreciolek{animation:puls 2s ease-in-out infinite}
  @keyframes puls{50%{border-top-color:var(--kresk)}}
}
/* Wiersz JUZ ZAtwierdzony — decyzja zapadla, zostaje mozliwosc cofniecia.
   Zgloszenie wlasciciela ze screena 04.09.2026: „te ktore sa zatwierdzone
   i sa do cofniecia powinny miec chociaz inny odcien". Na ekranie
   „Pokrycie" stoja obok siebie dwie rzeczy o tym samym ksztalcie: to, co
   czeka na decyzje, i to, co juz zrobione — a bez roznicy w tle wygladaja
   identycznie i klient nie wie, czy patrzy na robote do zrobienia, czy na
   swoja wlasna historie.
   ⛔ Rozroznia TLO I LISTWA, nie sam kolor tekstu: przy zalozeniu, ze
   ktos nie odroznia barw, sama zielen niczego by nie powiedziala. */
.rzad.zrobione{background:var(--karta2);border-left:3px solid var(--dobry);
  border-radius:6px;padding:6px 10px}
.rzad.zrobione .male{color:var(--slaby)}
.rzad.zrobione code{color:var(--tekst)}
.rzad-srodek{display:flex;gap:12px;align-items:center;justify-content:center;
  flex-wrap:wrap}
.srodek{text-align:center}
.lamany{white-space:pre-wrap}
.rozdzielacz{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.przyciemnione{opacity:.5}
.log-wysoki{min-height:240px}
.fazy{margin-top:16px;line-height:2}
.faza-znak{font-style:normal;display:inline-block;width:22px}

/* szerokie tabele na telefonie: przewijanie w SWOIM kontenerze, a nie całą
   stroną — inaczej nagłówek i menu uciekają w bok razem z tabelą */
.tabela-szeroka{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela-szeroka > table{min-width:640px}
/* B26/M02 (audyt mobilny 14.09.2026): tabela ZWYKLE wąska, która na telefonie
   potrafi przerosnąć ekran (legenda, „jak liczymy", źródła, dolna tabela
   paliwa). Przewija się w sobie, bez wymuszonej szerokości minimalnej —
   `.tabela-szeroka` z min-width 640 zrobiłaby z dwukolumnowej legendy
   przewijak. ⛔ Nie `body{overflow-x:hidden}` — to chowa treść, nie naprawia. */
.tabela-mobilna{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* M08: pole nigdy nie dziedziczy rozmiaru poniżej 13 px (filtry w `.male`
   miały 11,5 px); na telefonie 16 px, bo iOS powiększa stronę przy fokusie
   pola mniejszego niż 16 px. */
input,select,textarea{font-size:max(13px,1em)}
@media (max-width:760px){
  main{padding:16px 12px}
  table{font-size:13px}
  .karty{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* --- ustawienia: karty zamiast jednej długiej tabeli --- */
.ust-karta{background:var(--karta);border:1px solid var(--kresk);
  border-radius:11px;padding:18px 20px;margin:14px 0}
.ust-karta h2{margin:0 0 4px;font-size:16px}
.ust-karta > .pod{margin:0 0 14px}
.ust-wiersz{display:grid;grid-template-columns:minmax(180px,240px) 1fr;
  gap:14px 20px;align-items:start;padding:12px 0;
  border-top:1px solid var(--kresk)}
.ust-wiersz:first-of-type{border-top:0;padding-top:4px}
.ust-wiersz > div:first-child{font-weight:600;font-size:13.5px}
.ust-wiersz .male{font-weight:400;margin-top:3px}
.ust-wiersz input[type=text],.ust-wiersz input[type=email],
.ust-wiersz input[type=password],.ust-wiersz textarea{width:100%;max-width:420px}
.ust-stopka{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--kresk)}
@media (max-width:700px){
  .ust-wiersz{grid-template-columns:1fr;gap:6px}
}

/* --- uzgodnienia cen: pasek z przyciskiem przyklejony do dołu okna ---
   Lista towarów jednego dostawcy ma u Mawita 240 wierszy (21.09.2026); bez
   tego przycisk „Dalej" był kilka ekranów pod listą. */
.uzg-pasek{position:sticky;bottom:0;z-index:8;display:flex;gap:12px;align-items:center;
  flex-wrap:wrap;margin:16px 0 0;padding:12px 16px;background:var(--karta);
  border:1px solid var(--kresk);border-radius:11px;box-shadow:0 -6px 18px rgba(0,0,0,.07)}
.uzg-pasek button{margin:0}
/* Nazwa towaru z faktury bywa na 120 znaków („NIBE Centrala wewnętrzna BA-SVM
   20-200/6E z wężownicowym…") — bez sufitu rozpycha tabelę na szerokość, a przy
   240 wierszach suwak poziomy jest nie do użycia. */
.nazwa-towaru{max-width:340px}
@media (max-width:900px){ .nazwa-towaru{max-width:220px} }

/* --- historia cen --- */
.iskra{display:block;opacity:.95}
.wykres-kom{padding:4px 12px;width:120px}
table.historia td{vertical-align:middle}
td.wzrost{color:var(--zly);font-weight:600}
td.spadek{color:var(--dobry);font-weight:600}
.wykres{background:var(--karta);border-radius:10px}
.wykres .os{fill:var(--slaby);font-size:11px;
  font-family:ui-monospace,Consolas,monospace}
.wykres circle{cursor:crosshair}
.wykres circle:hover{r:6.5}
.legenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;
  color:var(--slaby);font-size:12.5px}
.legenda i{font-style:normal}
/* ⛔ W trakcie wczytywania ręczne przypisania są zamknięte (decyzja
   właściciela 04.09.2026). Wybieramy je PO ADRESIE FORMULARZA, a nie po
   klasie — dzięki temu nowy formularz w tych rodzinach wpada pod regułę
   sam, bez pamiętania o dopisaniu klasy. Serwer odmawia niezależnie od
   tego arkusza (`blokada_przypisan_przy_wczytywaniu`); to jest ta połowa,
   która oszczędza klientowi kliknięcia w próżnię. */
main.wczytujemy form[action^="/pokrycie/"],
main.wczytujemy form[action^="/grupy/przenies"],
main.wczytujemy form[action^="/grupy/slownik"]{opacity:.45;
  pointer-events:none}

/* Legenda kolumn tabeli: nazwa | co znaczy (zgłoszenie nr 27). Siatka,
   nie flex — hasła mają stać w jednej kolumnie pod sobą, żeby dało się
   po nich przejechać wzrokiem. Na telefonie opis schodzi pod hasło. */
.legenda-kolumn{display:grid;grid-template-columns:max-content 1fr;
  gap:4px 14px;margin:0 0 16px;color:var(--slaby);font-size:12.5px}
.legenda-kolumn dt{font-weight:600;color:var(--tekst)}
.legenda-kolumn dd{margin:0}
@media (max-width:700px){
  .legenda-kolumn{grid-template-columns:1fr;gap:2px}
  .legenda-kolumn dd{margin:0 0 8px}
}
.anomalia{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;
  border-radius:9px;background:var(--karta2);margin-bottom:7px}
.anomalia .ikona{font-size:17px;line-height:1.2}
.anomalia b{font-size:13px}
.kwota-rok{color:var(--uwaga);font-weight:600;white-space:nowrap}
/* ⛔ SYGNAŁ NA KORZYŚĆ KLIENTA NIE MOŻE WYGLĄDAĆ JAK ALARM.
   Zmierzone na koncie właściciela: 84 ze 137 „schodków" to ceny, które
   SPADŁY i tak zostały — a pokazywaliśmy je tym samym znakiem i tym
   samym „wpływ na koszt", co podwyżki. Właściciel: „czerwony alert
   czasami jest mniej istotny niż żółty". Kolor ma mówić, po czyjej
   stronie jest ta zmiana, a nie jakie to zjawisko statystyczne. */
.anomalia.na-plus{background:rgba(62,207,142,.10)}
.anomalia.na-plus .kwota-rok{color:var(--dobry)}

/* --- koszty: przełączniki okresu i grupowania --- */
.okresy{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
/* ⛔ Podzakladki i filtry to NAWIGACJA, nie ozdoba — a licznik w nich
   jest tresci a, nie przypisem. Pierwsza wersja miala 13 px i licznik
   przez `.male` z opacity, wiec „78" przy „Kody z faktur" gubilo sie
   w tle (Robert 2026-08-26: „te zakladki musza byc wieksze, te liczniki
   w nich sa malo widoczne"). Ekran, po ktorym sie NAWIGUJE, ma dawac
   sie kliknac bez celowania. */
/* ⛔ `display` MUSI TU BYĆ. Pigułka to `<a>`, czyli element liniowy —
   a górny i dolny padding elementu liniowego NIE POWIĘKSZA wiersza.
   Dopóki wszystkie mieściły się w jednej linii, nikt tego nie widział;
   na telefonie zawijają się na trzy i nachodziły na siebie (zgłoszenie
   nr 26: „kafelki sterujące tabami nachodzą na siebie", zmierzone na
   375 px: trzy pary zakładek Pokrycia zachodziły na siebie).
   `inline-flex` sprawia, że wysokość pigułki liczy się do wiersza,
   a dolny margines daje odstęp między zawiniętymi rzędami. */
.pigulka{display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:20px;font-size:15px;margin-bottom:6px;
  background:var(--karta);border:1px solid var(--kresk);color:var(--slaby)}
.pigulka:hover{border-color:var(--akcent);color:var(--tekst);text-decoration:none}
.pigulka.on{background:var(--akcent);color:#fff;border-color:var(--akcent);font-weight:600}
/* Licznik: wlasna plakietka w pigulce, nie przygaszony dopisek. */
.pigulka .licz{display:inline-block;margin-left:7px;padding:1px 8px;
  border-radius:12px;font-size:13px;font-weight:600;
  background:var(--kresk);color:var(--tekst)}
.pigulka.on .licz{background:rgba(255,255,255,.28);color:#fff}
.pigulka.zly-filtr .licz{background:var(--zly, #e64c4c);color:#fff}
.pigulka.zly-filtr{border-color:var(--zly, #e64c4c);color:var(--zly, #e64c4c)}
.pigulka.zly-filtr.on{background:var(--zly, #e64c4c);border-color:var(--zly, #e64c4c);color:#fff}
td .pasek{height:7px}
input[type=date]{color-scheme:light dark}

/* --- strony bez nawigacji: logowanie, rejestracja, podłączanie KSeF --- */
main.srodek{max-width:1240px;margin:0 auto;padding:48px 22px}
.waskie{max-width:520px;margin:0 auto}
.waskie h1{font-size:26px;margin:0 0 6px}
.waskie h2{font-size:15px;margin:26px 0 8px}
form.pion{display:flex;flex-direction:column;gap:12px;margin-top:18px}
form.pion label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;
  color:var(--slaby)}
form.pion input{width:100%}
form.pion button{margin-top:6px}
/* zgoda na regulamin: checkbox w linii z tekstem — bez tego reguła
   input{width:100%} rozciąga kratkę na całą szerokość formularza */
form.pion label.zgoda{flex-direction:row;align-items:flex-start;gap:9px;
  color:var(--tekst);cursor:pointer}
form.pion label.zgoda input[type=checkbox]{width:auto;margin-top:2px;
  accent-color:var(--akcent);transform:scale(1.2)}

/* strefa wgrywania plików: kliknij albo przeciągnij */
.drop-pole{display:block;border:2px dashed var(--kresk);border-radius:10px;
  padding:20px 16px;text-align:center;color:var(--slaby);cursor:pointer;
  transition:border-color .15s, background .15s}
.drop-pole:hover{border-color:var(--akcent)}
.drop-pole.nad{border-color:var(--akcent);background:var(--karta2);
  color:var(--tekst)}
.drop-pole input[type=file]{display:none}
.drop-pole .wybrane{display:block;margin-top:6px;color:var(--tekst);
  font-weight:600}

/* sortowanie tabel (sort.js) — strzalka przy aktywnej kolumnie */
table.sortowalna th.sort-dol::after{content:" ↓";color:#888}
table.sortowalna th.sort-gora::after{content:" ↑";color:#888}

/* pola-sekrety (token KSeF): maska bez type=password, zeby menedzer hasel ich nie lapal */
input.sekret{-webkit-text-security:disc}

/* druk widoku faktury: sam dokument, biale tlo, bez chrome aplikacji */
/* ⛔ Margines PAPIERU, nie treści. Do 2026-08-22 nie było go wcale:
   `main` dostawał w druku `margin:0;padding:0`, żeby tabela mogła wziąć
   całą szerokość i nie ucinała się z prawej (zgłoszenie z 19.08) — tylko
   że razem z tym treść dosunęła się do samej krawędzi kartki i faktura
   drukowała się bez marginesów (zgłoszenie z 22.08).

   To są DWIE różne rzeczy i mają dwa różne miejsca: odstęp od krawędzi
   kartki należy do `@page`, a szerokość treści do `main`. Rozdzielone,
   obie rzeczy działają naraz.

   12 mm u góry i na dole, 10 mm po bokach: mieści się w polu drukowalnym
   każdej zwykłej drukarki (typowo 6–7 mm), a faktura zostaje czytelna
   po wpięciu do segregatora. */
/* ⛔ Margines siedzi w DWÓCH miejscach naraz i to jest celowe.

   `@page` respektuje przeglądarka tylko wtedy, gdy w oknie drukowania
   stoi „Marginesy: domyślne". Ustawienie „Brak" — a bywa zapamiętane
   z poprzedniego wydruku i użytkownik o nim nie wie — wycina je do zera
   i faktura wychodzi bez odstępu od krawędzi. Wtedy nie da się jej
   wpiąć do segregatora, a część drukarek utnie skrajną kolumnę.

   Zmierzone w Chrome (headless, ustawienia domyślne): A4 210×297 mm,
   lewy 10,1 mm, prawy 11,6 mm, górny 13,6 mm — czyli sam `@page`
   działa poprawnie. Ale właściciel widział brak marginesów trzy razy
   z rzędu (2026-08-23), więc odstęp dokładamy TAKŻE do treści: przy
   „Brak" ratuje go padding, przy „domyślnych" sumuje się do ok. 16 mm,
   co dalej mieści się na kartce.

   `@page` schodzi z 12/10 na 8 mm właśnie po to, żeby ta suma nie
   urosła za bardzo. */
@page{size:A4;margin:8mm}

@media print{
  /* Druk faktury gubił pozycje i ucinał tabelę z prawej (zgłoszone przez
     Roberta 2026-08-19). Powód: kontenery z własnym przewijaniem
     (`.tabela-szeroka{overflow-x:auto}`, listy z `max-height`) drukują
     TYLKO to, co widać na ekranie — reszta zostaje za krawędzią. Na
     papierze nie ma przewijania, więc wszystkie takie ograniczenia
     zdejmujemy. */
  header, .bez-druku, .szuk, nav, .uwagi, .pasek-import,
  button, .przyciski, form, .stopka, .stopka-start{display:none !important}
  body{background:#fff;color:#000}
  .karta, table, .uwagi{background:#fff;color:#000;border-color:#999}
  a{color:#000;text-decoration:none}
  main, .waskie, .karta-start{max-width:none !important;width:auto !important;
    margin:0 !important;padding:0 !important;box-shadow:none !important;
    min-height:0 !important;display:block !important}
  .tabela-szeroka, .wybrane-lista, .log, .rozmowa{overflow:visible !important;
    max-height:none !important}
  .tabela-szeroka > table, table{min-width:0 !important;width:100% !important;
    font-size:11px}
  /* wiersz nie ma prawa pęknąć w pół między stronami; nagłówek tabeli
     powtarza się na każdej kartce, żeby kolumny dało się czytać */
  tr, .karta{page-break-inside:avoid}
  thead{display:table-header-group}
  td, th{padding:4px 6px !important}
  .karty{display:flex !important;flex-wrap:wrap;gap:8px}
  h1{font-size:18px}
  h2{font-size:14px}
}

/* ── ekrany startowe (logowanie / onboarding) ─────────────────────────── */
body.start{background:
  radial-gradient(1100px 500px at 50% -10%, rgba(77,163,255,.13), transparent 60%),
  var(--tlo)}
body.start main.srodek{max-width:640px;min-height:100vh;display:flex;
  flex-direction:column;justify-content:center;padding:40px 20px}
.logo-start{text-align:center;font-size:30px;font-weight:400;
  letter-spacing:.3px;margin-bottom:22px;display:flex;align-items:center;
  justify-content:center}
.logo-start b{color:var(--akcent)}
.karta-start{background:var(--karta);border:1px solid var(--kresk);
  border-radius:16px;padding:34px 36px;
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25)}
.karta-start .waskie{max-width:none;margin:0}
.stopka-start{text-align:center;color:var(--slaby);font-size:12.5px;
  margin-top:18px}
body.start input,body.start textarea,body.start select{
  padding:11px 13px;border-radius:10px;border:1px solid var(--kresk);
  transition:border-color .15s, box-shadow .15s}
body.start input:focus,body.start textarea:focus{outline:none;
  border-color:var(--akcent);box-shadow:0 0 0 3px rgba(77,163,255,.22)}
body.start form.pion button,body.start form button[type=submit]{
  width:100%;padding:12px;border-radius:10px;font-size:15px;
  background:linear-gradient(180deg,#5cadff,#3b8fe8);
  box-shadow:0 6px 18px rgba(77,163,255,.28)}
body.start details{background:var(--karta2);border:1px solid var(--kresk);
  border-radius:10px;padding:10px 14px;margin-top:10px}
body.start details summary{cursor:pointer}
body.start .log{border-radius:10px}

/* pasek kroków onboardingu */
.kroki{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0 0 20px;font-size:12.5px;color:var(--slaby)}
.kroki .krok{display:flex;align-items:center;gap:7px;white-space:nowrap}
.kroki .krok i{font-style:normal;display:inline-flex;align-items:center;
  justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--karta2);border:1px solid var(--kresk);font-size:11.5px}
.kroki .krok.jest{color:var(--tekst);font-weight:600}
.kroki .krok.jest i{background:var(--akcent);border-color:var(--akcent);color:#fff}
.kroki .krok.byl{color:var(--slaby)}
.kroki .krok.byl i{background:transparent;border-color:var(--dobry);color:var(--dobry)}
.krok-lacze{flex:0 1 34px;height:1px;background:var(--kresk)}
/* ⛔ Na wąskim ekranie zostają same numery. Selektor celuje w KLASĘ,
   a nie w `span` — wcześniej trafiał w znacznik, którego w szablonie nie
   ma, więc reguła nie robiła nic, a wyglądała, jakby robiła.
   ⭐ Bieżący krok zostaje z nazwą: sam numer nie mówi, gdzie się jest. */
@media (max-width:560px){
  .kroki .krok .krok-nazwa{display:none}
  .kroki .krok.jest .krok-nazwa{display:inline}
}

/* pasek stanu danych (Przeglad) */
.pasek-stan{display:flex;gap:12px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--karta);border:1px solid var(--kresk);
  border-radius:12px;padding:12px 16px;margin:0 0 16px}
/* Wariant globalny: pasek stoi tuż pod nawigacją na KAŻDEJ stronie, więc
   nie może wyglądać jak karta z treścią — sam spód, bez ramki i rogów,
   węższy pionowo. */
.pasek-stan.globalny{border:0;border-bottom:1px solid var(--kresk);
  border-radius:0;margin:0;padding:9px 24px;font-size:13.5px;
  background:var(--karta)}
/* Stan zawsze od LEWEJ, przyciski od prawej. `space-between` z trzema
   elementami (plakietka WERSJA TESTOWA, stan, przyciski) wypychało zdanie
   o KSeF na środek paska — właściciel 15.09.2026 rano: „te Dane z KSeF
   musiałyby być wyrównane — czy to przez testowe?”. Tak: konta bez
   plakietki miały stan przy lewej krawędzi, pas testowy nie. Zmierzone
   na prod (1600 px): stan x=306 → x=153 (tuż za plakietką). */
.pasek-stan.globalny .rzad{margin-left:auto}
/* Pasek utraty dostępu do KSeF. Kolor ostrzegawczy, nie błędu: nic się
   nie zepsuło i nic nie zginęło — po prostu od tej chwili nie przychodzi
   nic nowego, dopóki klient nie nada uprawnienia ponownie. */
.pasek-stan.pasek-alarm{background:var(--uwaga);color:#1a1300;
  border-bottom:1px solid rgba(0,0,0,.15);gap:14px;flex-wrap:wrap}
.pasek-stan.pasek-alarm b{color:inherit}
.pasek-stan.pasek-alarm button{background:#1a1300;color:#fff;border:0}

/* ⛔ Wlasna klasa, nie `.zly`. Tamta dziala tylko wewnatrz `.karta .liczba`,
   wiec sam napis zostawal w kolorze linku — czyli „wstrzymane" wygladalo
   jak cos, w co mozna kliknac. Rozszerzenie `.zly` do reguly ogolnej
   pomalowaloby przy okazji link „Stan KSeF" stojacy w tym samym pasku. */
.stan-wstrzymane{color:var(--zly)}

/* Znak kompletu w tabeli Stanu KSeF. Zielony, ale nie krzykliwy —
   to ma byc spokojne potwierdzenie, a nie nagroda. */
.komplet{color:var(--dobry);font-size:15px;font-weight:600}

@media (max-width:760px){ .pasek-stan.globalny{padding:9px 12px} }

.kropka{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--dobry);margin-right:8px;vertical-align:1px;
  box-shadow:0 0 6px rgba(62,207,142,.5)}
.kropka.szara{background:var(--slaby);box-shadow:none}
/* Trzy dodatkowe stany diody — bo „zawsze zielona" nie niesie żadnej
   informacji. Pulsowanie zamiast koloru mówi „pracuję TERAZ": ruch widać
   kątem oka, nie trzeba czytać. */
.kropka.uwaga{background:var(--uwaga);box-shadow:0 0 6px rgba(255,182,72,.5)}
.kropka.zla{background:var(--zly);box-shadow:0 0 6px rgba(255,107,107,.5)}
.kropka.pracuje{background:var(--akcent);box-shadow:0 0 6px rgba(77,163,255,.6);
  animation:tetni 1.4s ease-in-out infinite}
@keyframes tetni{0%,100%{opacity:1}50%{opacity:.35}}

/* kreciolek na przycisku po wyslaniu formularza (czekaj.js) */
button.czeka{position:relative;color:transparent !important;pointer-events:none}
/* Z napisem: pierscien schodzi na lewo i robi mu miejsce, zamiast
   go zaslaniac. Wariant bez napisu (sama ikona) zostaje jak byl. */
button.czeka.czeka-slowo{color:inherit !important;padding-left:30px}
button.czeka.czeka-slowo::after{inset:auto;left:10px;top:50%;margin:-7px 0 0 0}
button.czeka::after{content:"";position:absolute;inset:0;margin:auto;
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:kreciolek .7s linear infinite}
button.cichy.czeka::after{border-color:rgba(154,164,181,.4);
  border-top-color:var(--tekst)}
@keyframes kreciolek{to{transform:rotate(360deg)}}

/* oczko podgladu hasla */
button.oczko{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;box-shadow:none;padding:4px 8px;
  font-size:15px;cursor:pointer;opacity:.6;width:auto}
button.oczko:hover{opacity:1;filter:none}
body.start form.pion button.oczko{width:auto;padding:4px 8px;
  background:transparent;box-shadow:none}

/* ==== Strona startowa (landing) ====================================
   Własny układ, bo `.karta-start` z onboardingu to wąskie pudełko pod
   formularz — landing w nim wyglądał jak pasek na środku pustego ekranu.
   Rytm robią pasma o zmiennym tle na pełnej szerokości; wewnątrz każde
   ma tę samą siatkę `.lp-srodek`, więc treść trzyma jedną oś. */
body.lp{background:var(--tlo)}
.lp-srodek{max-width:1120px;margin:0 auto;padding:0 22px}
.lp-waskie{max-width:780px}

.lp-pasek{position:sticky;top:0;z-index:9;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px 26px;
  background:color-mix(in srgb, var(--tlo) 88%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--kresk)}
.lp-nav{display:flex;align-items:center;gap:22px;font-size:14px}
.lp-nav a{color:var(--slaby)}
.lp-nav a:hover{color:var(--tekst);text-decoration:none}
.lp-zaloguj{color:var(--akcent) !important;font-weight:600}

/* hero: tekst + podgląd produktu obok siebie, na wąskim ekranie jeden pod drugim */
.lp-hero{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;
  align-items:center;max-width:1120px;margin:0 auto;padding:64px 22px 72px;
  background:radial-gradient(900px 420px at 20% -20%,
    rgba(77,163,255,.14), transparent 65%)}
/* `balance` rozkłada wiersze równo, więc nagłówek nie zostawia
   sierotki („czy to za / dużo"); `<br>` dalej wymusza podział zdań. */
.lp-hero h1{font-size:37px;line-height:1.16;margin:0 0 16px;
  letter-spacing:-.4px;text-wrap:balance}
.lp-lead{font-size:16.5px;line-height:1.65;color:var(--slaby);
  max-width:56ch;margin:0 0 26px}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
/* ⛔ PRZYCISKI USTAWIONE W PIONIE MUSZĄ MIEĆ WSPÓLNĄ SZEROKOŚĆ.
   W kolumnie bohatera rząd `flex-wrap` zawijał się tak, że każdy przycisk
   był szeroki NA SWOJĄ TREŚĆ — trzy napisy dawały trzy różne szerokości
   i poszarpaną prawą krawędź. Nikt tego nie zaprojektował, tak wyszło
   z zawijania. Właściciel 2026-08-27: „trzy różne wielkości, robisz to
   ze sztuką UI?".
   Oko czyta pionową listę po lewej krawędzi, ale RÓWNOŚĆ prawej jest
   tym, co odróżnia zestaw od przypadkowej kupki. */
/* Szerokość kolumny z przyciskami. 360 px robiło wąski słupek obok
   szerokiego akapitu nad nim; 420 px zrównuje go wzrokowo z tekstem
   i daje napisom oddech (właściciel 2026-08-27: „te przyciski może
   trochę szersze"). Wyżej niż akapit nie idziemy — przycisk szerszy
   od zdania, które go tłumaczy, wygląda na pomyłkę składu. */
.lp-cta-kolumna{flex-direction:column;align-items:flex-start;
  max-width:420px}
.lp-cta-kolumna .lp-btn{width:100%;box-sizing:border-box;text-align:center}
/* Wysokości też: różny padding i stopień pisma dawały trzy różne wysokości.
   Główny przycisk ZOSTAJE wyraźniejszy — ale przez kolor i cień, nie przez
   przypadkowo większy margines. */
.lp-cta-kolumna .lp-btn{padding:13px 26px;font-size:15px}
.lp-cta-kolumna .lp-btn-mocny{padding:13px 26px;font-size:15px}
/* ⛔ …i ten sam UKŁAD WEWNĘTRZNY. Główny przycisk miał `flex-direction:
   column` (napis + dopisek pod spodem), a ciche renderowały oba w jednej
   linii — „Chcę wykupić dostęp pierwszy miesiąc 299 zł netto". Stąd trzecia
   różnica wysokości i wrażenie, że każdy przycisk jest z innej bajki. */
.lp-cta-kolumna .lp-btn{display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;line-height:1.25}
.lp-cta-kolumna .lp-btn span{font-size:12.5px;font-weight:500;opacity:.85}
.lp-btn{display:inline-block;padding:13px 26px;border-radius:11px;
  font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#5cadff,#3b8fe8);
  box-shadow:0 8px 22px rgba(77,163,255,.3);transition:transform .12s}
.lp-btn:hover{text-decoration:none;transform:translateY(-1px)}
.lp-btn-cichy{background:var(--karta);color:var(--tekst);
  border:1px solid var(--kresk);box-shadow:none}
.lp-drobne{font-size:13px;color:var(--slaby);margin:0}

/* podgląd produktu — „okno" aplikacji z paskiem tytułu */
.lp-okno{background:var(--karta);border:1px solid var(--kresk);
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18)}
.lp-okno-pasek{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--karta2);border-bottom:1px solid var(--kresk);
  font-size:12.5px;color:var(--slaby)}
.lp-okno-pasek i{width:9px;height:9px;border-radius:50%;
  background:var(--kresk);display:inline-block}
.lp-okno-pasek span{margin-left:8px}
.lp-okno-tresc{padding:16px}
.lp-syg{display:flex;gap:12px;align-items:flex-start;padding:12px;
  border:1px solid var(--kresk);border-radius:10px;background:var(--karta2)}
.lp-syg + .lp-syg,.lp-wykres + .lp-syg{margin-top:12px}
.lp-syg b{font-size:14px}
.lp-syg-opis{font-size:12.5px;color:var(--slaby);margin-top:3px}
.lp-wykres{width:100%;height:92px;margin-top:14px}
.lp-os{stroke:var(--kresk);stroke-width:1}
.lp-linia{fill:none;stroke:var(--akcent);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round}
.lp-pkt{fill:var(--akcent);stroke:var(--karta);stroke-width:2}
.lp-pkt-zly{fill:var(--zly)}

/* pasma treści */
.lp-pasmo{background:var(--karta);border-top:1px solid var(--kresk);
  border-bottom:1px solid var(--kresk);padding:56px 0}
.lp-pasmo h2,#funkcje h2,.lp-domkniecie h2{font-size:25px;margin:0 0 28px;
  letter-spacing:-.2px}
#funkcje{padding:64px 0}
.lp-kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lp-krok-nr{width:34px;height:34px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:700;
  background:rgba(77,163,255,.16);color:var(--akcent);margin-bottom:12px}
.lp-krok h3,.lp-kafel h3{font-size:16px;margin:0 0 8px}
.lp-krok p,.lp-kafel p{margin:0;color:var(--slaby);font-size:14px;
  line-height:1.65}
.lp-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-kafel{background:var(--karta);border:1px solid var(--kresk);
  border-radius:12px;padding:20px 22px}
.lp-zasady{margin:0;padding-left:20px;line-height:1.75;color:var(--slaby)}
.lp-zasady li{margin-bottom:12px}
.lp-zasady b{color:var(--tekst)}

.lp-domkniecie{text-align:center;padding:66px 0 72px;
  background:radial-gradient(700px 320px at 50% 120%,
    rgba(77,163,255,.14), transparent 70%)}
.lp-domkniecie .lp-lead{margin:0 auto 26px}
.lp-domkniecie .lp-cta{justify-content:center}

.lp-stopka{border-top:1px solid var(--kresk);padding:22px 0;
  font-size:13px;color:var(--slaby)}
.lp-stopka .lp-srodek{display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

@media (max-width:900px){
  .lp-hero{grid-template-columns:1fr;gap:34px;padding:44px 22px 52px}
  .lp-hero h1{font-size:31px}
  .lp-kroki,.lp-siatka{grid-template-columns:1fr}
  .lp-nav a:not(.lp-zaloguj){display:none}
}

/* Wstecz/naprzód w pasku aplikacji — para strzałek przy logo. Wąskie
   i ciche, bo to nawigacja pomocnicza: ma być pod ręką, nie na wierzchu. */
.nawigacja-hist{display:flex;gap:4px;margin-left:2px}
button.hist{padding:4px 11px;font-size:17px;line-height:1;border-radius:7px;
  color:var(--slaby)}
button.hist:hover{color:var(--tekst);filter:none;background:var(--karta2)}
@media (max-width:700px){ .nawigacja-hist{display:none} }

/* Cennik na landingu. Sekcja ma własne, wyśrodkowane style zamiast
   pożyczonych z hero: `.lp-lead` ma max-width:56ch, więc pod pełną siatką
   robił wąską kolumnę tekstu przy lewej krawędzi (uwaga Roberta
   2026-08-18: „ta sekcja kłuje w oczy"). Kolejność ekranu: ścieżka
   wejścia → progi → jak liczymy → przycisk. */
.lp-srodkowy{text-align:center}
#cennik h2{margin-bottom:10px}
.lp-podtytul{text-align:center;color:var(--slaby);font-size:16px;
  line-height:1.6;max-width:60ch;margin:0 auto 30px}

/* ścieżka wejścia — kroki w kartach, numer w jednej linii z tytułem
   (luzem nad tytułem zostawiały pustą przestrzeń i „rozjeżdżały" rytm) */
.lp-sciezka{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:0 0 34px}
.lp-etap{background:var(--karta);border:1px solid var(--kresk);
  border-radius:14px;padding:20px 22px}
.lp-etap-glowa{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.lp-etap-nr{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  font-weight:700;background:rgba(77,163,255,.16);color:var(--akcent)}
.lp-etap h3{margin:0;font-size:16px}
.lp-etap p{margin:0;color:var(--slaby);font-size:14px;line-height:1.65}

/* progi: pasek z zakresem kosztów + kwota. Karty bez paska wyglądały
   pusto — zakres jest tu tytułem karty, a nie drobnym podpisem. */
.lp-cennik{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  align-items:stretch}
.lp-plan{background:var(--karta);border:1px solid var(--kresk);
  border-radius:14px;overflow:hidden;text-align:center;
  display:flex;flex-direction:column}
.lp-plan-pasek{background:var(--karta2);border-bottom:1px solid var(--kresk);
  padding:12px 14px;font-size:13px;font-weight:600;color:var(--tekst);
  line-height:1.4;min-height:44px;display:flex;align-items:center;
  justify-content:center}
.lp-plan-tresc{padding:20px 18px 22px;display:flex;flex-direction:column;
  gap:8px;flex:1}
.lp-plan h3{margin:0 0 6px;font-size:17px}
.lp-plan-prog{color:var(--slaby);font-size:13px;min-height:20px}
.lp-plan-cena{font-size:31px;font-weight:700;letter-spacing:-.5px}
.lp-plan-cena-txt{font-size:21px;line-height:1.5;margin-top:18px}
.lp-plan-kto{margin:0;color:var(--slaby);font-size:13px;line-height:1.55}
.lp-plan-promo{color:var(--dobry);font-size:12.5px;font-weight:600;
  margin:2px 0 14px}
.lp-plan-btn{margin-top:auto;padding:10px 18px;font-size:14px}
/* (plakietka „najczęściej wybierany" usunięta: stawka wynika z kosztów,
   nikt niczego nie wybiera — sugerowanie wyboru wprowadzałoby w błąd) */
.lp-plan-cena span{font-size:13.5px;font-weight:400;color:var(--slaby)}

/* „jak wyliczamy stawkę" — pas na pełną szerokość zamiast wąskiego
   akapitu; te same trzy punkty co §4 regulaminu */
.lp-jak{margin:26px 0 0;padding:24px 26px;border:1px solid var(--kresk);
  border-radius:14px;background:var(--karta)}
.lp-jak h3{margin:0 0 16px;font-size:16px}
.lp-jak-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lp-jak-siatka b{display:block;margin-bottom:5px;font-size:14px}
.lp-jak-siatka p{margin:0;color:var(--slaby);font-size:13.5px;
  line-height:1.65}
.lp-jak-stopka{margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--kresk);font-size:13px;color:var(--slaby)}
.lp-cta-srodek{justify-content:center;margin:28px 0 14px}

.lp-promo{text-align:center;margin:22px 0 8px;font-size:15px}
@media (max-width:1100px){ .lp-cennik{grid-template-columns:1fr 1fr} }
@media (max-width:900px){
  .lp-sciezka,.lp-jak-siatka{grid-template-columns:1fr}
  .lp-jak{padding:20px}
}
@media (max-width:640px){ .lp-cennik{grid-template-columns:1fr} }

/* landing: logo wyraźniejsze niż w aplikacji (pasek marketingowy to nie
   pasek roboczy) + slogan-pazur pod przyciskami */
.lp-pasek .logo{font-size:25px}
.lp-haslo{font-size:15.5px;font-weight:600;margin:0 0 10px;
  color:var(--tekst)}
.lp-haslo::before{content:"— ";color:var(--akcent)}
#przesiadka{padding-bottom:10px}
/* sekcja przesiadki: pełna szerokość tekstu — wąska kolumna z hero
   zostawiała pustą prawą połowę ekranu */
#przesiadka .lp-lead{max-width:78ch}

/* Wgrywka plików (strona /token): jawny przycisk wyboru — samo klikalne
   pole nic o sobie nie mówiło (uwaga Roberta), lista wybranych plików
   i pasek postępu wysyłki. */
.drop-pole .niby-przycisk{display:inline-block;padding:8px 18px;
  border:1px solid var(--kresk);border-radius:9px;background:var(--karta);
  font-weight:600;box-shadow:0 1px 2px rgba(20,40,80,.08);margin-bottom:6px}
.drop-pole:hover .niby-przycisk{border-color:var(--akcent,#4da3ff)}
.drop-pole .male{display:block;margin-bottom:2px}
.wybrane-lista{list-style:none;margin:8px auto 0;padding:0;font-size:13px;
  color:#456;text-align:left;max-width:62ch;max-height:240px;overflow:auto}
/* Wiersz jako flex: skraca się NAZWA, nie przycisk. Wcześniej cały wiersz
   miał text-overflow:ellipsis, więc długa nazwa pliku (a takie mają skany
   z KSeF: „2025-10-15T10_50_18.666Z-rqu19s.pdf") wypychała „usuń" poza
   obcięcie — zostawał sam wielokropek i wyglądało to na zepsutą funkcję. */
/* Selektory z podniesioną szczegółowością (ul.wybrane-lista > li > button),
   bo u Roberta wiersze renderowały się jako trzy szerokie niebieskie
   przyciski bez nazw plików — czyli reguła bazowa `button{}` wygrywała,
   a układ wiersza w ogóle nie działał. Nie udało mi się tego odtworzyć
   ani z CSS-a, ani z JS-a, więc zamiast zgadywać: zapisujemy wygląd tak,
   żeby żadna ogólniejsza reguła go nie przebiła. */
ul.wybrane-lista > li{display:flex !important;align-items:center;gap:8px;
  padding:4px 0;width:100%}
ul.wybrane-lista > li > .plik-nazwa{flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:left;color:var(--tekst)}
ul.wybrane-lista > li > button.usun-plik{flex:0 0 auto;width:auto !important;
  padding:2px 10px;font-size:12px;font-weight:500;border-radius:7px;
  background:var(--karta2);color:var(--slaby);
  border:1px solid var(--kresk);margin:0}
ul.wybrane-lista > li > button.usun-plik:hover{color:var(--zly);
  border-color:var(--zly)}
.postep-wgrywki{margin:10px 0 2px}
.postep-wgrywki .tor{display:block;height:8px;background:#e8eef7;
  border-radius:5px;overflow:hidden}
.postep-wgrywki i{display:block;height:100%;width:0;
  background:var(--akcent,#4da3ff);transition:width .25s}
.postep-wgrywki span{display:block;margin-top:6px}
/* zbity wariant tabeli — do wąskich kart (goly.html), gdzie zwykłe
   odstępy wypychają ostatnią kolumnę za poziomy suwak; zdejmuje też
   globalne min-width tabel (640px), które w wąskiej karcie wymuszało
   suwak niezależnie od treści */
/* Podsumowanie roku otwiera swoje miesiace. Ma czytac sie jak naglowek
   sekcji, a nie jak kolejny miesiac — stad tlo i kreska nad wierszem;
   bez tego suma roczna wygladalaby jak miesiac o dziwnie duzej kwocie. */
tr.rok-suma td{background:var(--karta2);border-top:2px solid var(--kresk)}
table.zbita{min-width:0}
.zbita th,.zbita td{padding:7px 8px;font-size:13.5px}
/* wyłączony przycisk musi WYGLĄDAĆ na wyłączony (uwaga klienta:
   „wyszarzony, jak nic nie ma") — dotąd disabled był nie do odróżnienia */
button:disabled{opacity:.45;cursor:not-allowed}

/* karta produktu: wiersz historii z ceną >10% nad medianą + wiersz
   faktury wskazany deep-linkiem z tej historii („bajer" Roberta) */
.wiersz-drogi td{background:#fdf0f0}
.wiersz-drogi td:nth-child(5){color:#c62828;font-weight:600}
.podswietlony td{background:#fff3cd}
/* ⛔ CEL SKOKU TEŻ, nie tylko zwykłe wiersze. Reguła celowała wyłącznie
   w `tr[id^="poz-"]`, a kotwica z historii cen prowadzi do `tr#cel` — więc
   jedyny wiersz, DO KTÓREGO NAPRAWDĘ SKACZEMY, chował się pod przyklejonym
   paskiem menu. Objaw: „nacisnąłem i podświetlenia nie widać, muszę
   przewinąć do góry" (właściciel, 02.09.2026).

   96 px to wysokość paska; gdy zawinie się na dwa rzędy (wąskie okno),
   trzeba tu dołożyć — pasek ma `flex-wrap`. */
tr[id^="poz-"], tr#cel{scroll-margin-top:96px}

/* filtry w siatce z podpisami — luźny rządek kontrolek zawijał się
   przypadkowo („chaotyczny", uwaga Roberta); docelowo wzorzec dla
   wszystkich stron z filtrami */
.filtry-siatka{display:grid;gap:10px 12px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin:14px 0 16px}
.filtry-siatka label{display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#66788a}
.filtry-siatka input,.filtry-siatka select{width:100%;font-weight:400;
  letter-spacing:normal;text-transform:none}
.filtr-akcje{display:flex;gap:10px;align-items:center}
/* wariant wąski: sam zakres dat z komponentu okresów nie musi się
   rozciągać na całą szerokość jak pełne filtry */
/* ⛔ `repeat(3, …)` TWARDO ŻĄDAŁO 3×150 px + odstępy = 474 px, więc na
   telefonie (375 px) formularz wystawał 132 px poza ekran i ciągnął za
   sobą CAŁĄ stronę — to była przyczyna „ta strona rozjeżdża się na boki,
   klawisz wyślij jest przycięty z prawej" (zgłoszenie nr 25, zmierzone
   na 375 px: dokument miał 507 px szerokości). `auto-fit` układa tyle
   kolumn, ile się mieści: na komputerze dalej trzy, na telefonie dwie
   albo jedna. Sufit 220 px zostaje, żeby na szerokim ekranie sam zakres
   dat nie rozciągał się na całą kartę. */
.filtry-siatka.waska{grid-template-columns:repeat(auto-fit,minmax(150px,220px));
  justify-content:start}

/* ── Nasze okno modalne ────────────────────────────────────────────────
   Zamiast systemowego confirm() (uwaga Roberta 2026-08-18: „te message
   boxy są słabe, to są chyba systemowe — nie lepiej zrobić nasze ładne
   wycentrowane?"). <dialog> daje za darmo blokadę tła, Esc i pułapkę
   focusu, więc nie piszemy własnego więzienia klawiatury. */
dialog.okno{width:min(560px, calc(100vw - 32px));max-width:none;padding:0;
  border:1px solid var(--kresk);border-radius:16px;background:var(--karta);
  color:var(--tekst);
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.25)}
dialog.okno::backdrop{background:rgba(8,12,20,.62);backdrop-filter:blur(3px)}
.okno-tytul{margin:0;padding:22px 26px 0;font-size:19px;letter-spacing:-.2px}
.okno-tresc{padding:12px 26px 0;font-size:14.5px;line-height:1.7;
  color:var(--slaby);white-space:pre-line}
.okno-akcje{display:flex;justify-content:flex-end;gap:10px;
  padding:22px 26px 22px}
.okno-akcje button{padding:10px 20px;font-size:14.5px;border-radius:10px}
@media (max-width:560px){
  .okno-akcje{flex-direction:column-reverse}
  .okno-akcje button{width:100%}
}

/* Kontrolka wyłączona na koncie pokazowym: wygląda na martwą, ale ZOSTAJE
   klikalna — klik pokazuje, po co ta funkcja w ogóle jest. `disabled` nie
   wysyła zdarzeń, więc gość nie miałby jak się dowiedzieć. */
.demo-off{opacity:.45;filter:grayscale(1);cursor:help;
  box-shadow:none !important}
.demo-off:hover{opacity:.6;transform:none;filter:grayscale(1)}

/* Zaproszenie w nagłówku konta pokazowego — w miejscu, gdzie klient widzi
   „wyloguj". Gość demo nie ma się z czego wylogowywać (jedno konto na
   wszystkich), więc to miejsce ma robić jedyną sensowną rzecz: prowadzić
   do własnego konta. */
.pigulka-cta{display:inline-block;padding:4px 12px;border-radius:20px;
  font-size:12.5px;font-weight:600;color:#fff;background:var(--akcent)}
.pigulka-cta:hover{text-decoration:none;filter:brightness(1.08)}

/* Wynik importu: kreator jest wąski (520 px), ale tabela „co wyszło
   z każdego pliku" ma 7 kolumn i w tej szerokości żyła w poziomym
   scrollu, ze suwakiem na dole strony. Na monitorze miejsce JEST — więc
   ten jeden ekran rozpycha się do 1100 px, a na telefonie wraca do
   zachowania sprzed zmiany. */
.waskie.waskie-wynik{max-width:none}
.waskie.waskie-wynik .plik-kol{max-width:34ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){
  .waskie.waskie-wynik .plik-kol{max-width:22ch}
}

/* Kolumna tekstu w sekcji: wyśrodkowana, o stałej szerokości czytania.
   `.lp-lead` (56ch, z hero) pod pełną szerokością sekcji dosuwał tekst
   do lewej krawędzi i łamał oś strony. */
.lp-kolumna{max-width:70ch;margin:0 auto;color:var(--slaby);font-size:15.5px;
  line-height:1.7}
.lp-kolumna p{margin:0 0 14px}
.lp-kolumna b{color:var(--tekst)}
/* drobny podpis pod przyciskami — też w kolumnie, nie przez całą szerokość */
.lp-drobne.lp-srodkowy{max-width:78ch;margin:0 auto;line-height:1.7}

/* Powrót na stronę główną z ekranów bez paska nawigacji (rejestracja,
   logowanie, potwierdzenie adresu). Wygląda jak odnośnik, ale ma pole
   kliknięcia przycisku — na telefonie sam tekst byłby za mały. */
/* Powrót na stronę główną z ekranów bez paska nawigacji. Pierwsze
   podejście było białym prostokątem z ramką, wiszącym samotnie nad
   wycentrowaną kartą — jedyny lewy element na stronie, w której wszystko
   inne stoi na środku, więc wyglądał jak doklejony (Robert: „kłuje po
   oczach", 2026-08-19). Teraz zwykły odnośnik w kolorze drugoplanowym:
   ma być znaleziony, gdy ktoś go szuka, a nie konkurować z przyciskiem,
   po który ten ekran w ogóle powstał. */
.powrot-start{margin:0 0 12px;text-align:left;font-size:13px}
.powrot-start .cichy-link{color:var(--slaby);text-decoration:none;
  padding:4px 2px}
.powrot-start .cichy-link:hover{color:var(--tekst);text-decoration:underline}

/* Blok wyjaśnienia przed decyzją do podjęcia. Wcześniej takie akapity szły
   klasą .male (12,5 px) i zlewały się w szarą ścianę — a to jest tekst,
   który klient MUSI przeczytać, zanim kliknie. Normalna wielkość pisma,
   węższa kolumna, powietrze między akapitami. */
.wyjasnienie{max-width:78ch;margin:0 0 14px;line-height:1.55}
.wyjasnienie p{margin:0 0 8px}
.wyjasnienie .decyzje{margin:0 0 8px;padding-left:20px}
.wyjasnienie .decyzje li{margin:0 0 5px}

/* Główny przycisk lejka: dwa wiersze — obietnica i próg wejścia. Drugi
   wiersz jest tam po to, żeby „za darmo" nie wymagało wiary na słowo:
   od razu widać ILE i że bez karty. Delikatna poświata zamiast krzyku —
   przycisk ma być pierwszy w kolejności wzroku, nie jedyny. */
.lp-btn-mocny{display:inline-flex;flex-direction:column;align-items:center;
  gap:2px;padding:14px 30px;font-size:16px;line-height:1.25;
  box-shadow:0 10px 28px rgba(77,163,255,.42);
  outline:3px solid rgba(77,163,255,.16);outline-offset:2px}
.lp-btn-mocny span{font-size:12.5px;font-weight:500;opacity:.92}
.lp-btn-mocny:hover{box-shadow:0 12px 32px rgba(77,163,255,.5)}
@media (max-width:640px){.lp-btn-mocny{width:100%}}

/* Wiersz z polem wyboru: kwadrat, tytuł decyzji i zdanie wyjaśniające.
   Wcześniej checkbox stał samotnie nad wyśrodkowanym tekstem i wyglądał
   jak przypadek — a to jest decyzja, którą klient musi zrozumieć, zanim
   kliknie (uwaga Roberta 2026-08-19). Całe pole jest klikalne. */
.pole-wyboru{display:flex;gap:11px;align-items:flex-start;text-align:left;
  max-width:62ch;margin:6px 0 14px;padding:11px 13px;cursor:pointer;
  border:1px solid var(--kresk);border-radius:10px;background:var(--karta2)}
.pole-wyboru:hover{border-color:var(--slaby)}
.pole-wyboru input[type=checkbox]{width:17px;height:17px;margin:1px 0 0;
  flex:0 0 auto;accent-color:var(--akcent);cursor:pointer}
.pole-wyboru .tresc{display:flex;flex-direction:column;gap:3px}
.pole-wyboru .tresc b{font-weight:600;font-size:14px}
.pole-wyboru .tresc .male{line-height:1.45}
.wyrownaj-lewo{text-align:left}

/* Ekran z tabelą wyniku rozpycha CAŁY kontener kreatora. Bez tego
   `.waskie-wynik` z własnym max-width i tak siedział w rodzicu o stałych
   640 px, więc tabela dalej scrollowała się w poziomie. Kolumna „Uwagi"
   dostaje sufit, żeby długie wyjaśnienie nie rozciągało wiersza na pół
   ekranu wysokości. */
body.start main.srodek-szeroki{max-width:1180px}
.waskie-wynik table{min-width:0}
.waskie-wynik td:last-child{max-width:46ch;white-space:normal}
@media (max-width:1000px){
  body.start main.srodek-szeroki{max-width:100%}
}

/* Pasek trwającego zadania — ten sam wygląd co ostrzeżenia, ale z kropką,
   która pulsuje: informacja „coś się dzieje" ma być widoczna kątem oka. */
.pasek-import{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pasek-import::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--akcent);flex:0 0 auto;animation:puls 1.4s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.35}50%{opacity:1}}

/* Dwie drogi na jeden cel: token ALBO pliki. Każda w swojej sekcji, obie
   otwarte — ekran przestaje być jedną ścianą, a klient widzi wybór
   (uwaga Roberta 2026-08-19: „podzieliłbym to na 2 sekcje"). */
/* Dwie drogi do wczytania faktur to JEDNO menu z dwiema pozycjami, a nie
   dwie osobne karty pod sobą. Zwinięta pozycja zajmuje jeden wiersz, więc
   całe okno mieści się bez przewijania — o to była uwaga („scal to
   w jedno menu, trochę za długie to okno", 2026-08-19). Sąsiadujące
   sekcje sklejają się w jeden blok: wspólna ramka, jedna kreska między
   pozycjami. */
.sekcja-drogi{border:1px solid var(--kresk);border-radius:12px;
  padding:0;margin:0 0 14px;background:var(--karta);overflow:hidden}
.sekcja-drogi + .sekcja-drogi{margin-top:-15px;border-top-left-radius:0;
  border-top-right-radius:0;border-top:0}
.sekcja-drogi:has(+ .sekcja-drogi){border-bottom-left-radius:0;
  border-bottom-right-radius:0;margin-bottom:1px}
.sekcja-drogi > summary{cursor:pointer;font-weight:600;font-size:15px;
  list-style:none;display:flex;align-items:center;gap:9px;
  padding:14px 16px;transition:background .12s}
.sekcja-drogi > summary:hover{background:var(--karta2)}

/* ⛔ TYTUL SEKCJI NIE MOZE SIE LAMAC. Naglowek jest flexem, a goly tekst
   w flexie staje sie anonimowym elementem, ktory kurczy sie pierwszy —
   „Polacz KSeF certyfikatem" (najdluzszy z trzech) lamal sie na dwie
   linie, a dwa pozostale nie. Trzy sekcje obok siebie wygladaly wtedy jak
   trzy rozne komponenty. Zgloszenie wlasciciela 31.08.2026: „wyjustowane
   tak jak 2 poprzednie".

   ⭐ Stala szerokosc kolumny tytulu ustawia wszystkie trzy myslniki w tej
   samej pionowej linii — to ona robi wrazenie „rownego", nie samo
   niezawijanie. Ponizej 560 px kolumna znika i naglowek wraca do jednej
   kolumny, bo na telefonie 15 znakow na tytul to za malo. */
/* ⛔ text-align:left JAWNIE — karta ekranu srodkuje tekst, wiec bez tego
   tytul i opis lapia sie na srodek swojej kolumny i "rowne" znika mimo
   dobrego ukladu. */
/* Link, ktory ma wygladac jak przycisk, ale nie udawac glownej akcji.
   Glowna akcja sekcji to "Sprawdz uprawnienia" — przejscie do panelu MF
   jest krokiem PRZED nia i nie moze z nia konkurowac wizualnie. */
a.przycisk-wtorny{display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border:1px solid var(--kresk);border-radius:8px;
  background:var(--karta);color:var(--tekst);text-decoration:none;
  font-size:14px;font-weight:600;transition:background .12s}
a.przycisk-wtorny:hover{background:var(--karta2)}
/* Dwa rownorzedne przejscia obok siebie: panel MF i instrukcja ze zrzutami.
   flex-wrap, bo na telefonie te dwa napisy nie zmieszcza sie w jednej
   linii — a bez zawijania drugi przycisk wychodzi poza ekran i strona
   zaczyna sie przesuwac na boki. */
p.dwa-przyciski{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sekcja-drogi > summary{text-align:left}
.sekcja-drogi > summary > .tytul-drogi{flex:0 0 15.5em;white-space:nowrap}
@media (max-width:560px){
  .sekcja-drogi > summary{flex-wrap:wrap}
  .sekcja-drogi > summary > .tytul-drogi{flex:1 1 100%;white-space:normal}
}

/* Dwa wyjscia z sekcji certyfikatu: czynnosc glowna i droga zapasowa.
   ⛔ Drugie NIE jest przyciskiem tylko z wygladu — to <details>, bo CSP
   zabrania skryptow w tresci, a rozwijanie ma dzialac bez nich. */
.dwa-wyjscia{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px}
.dwa-wyjscia form{margin:0}
.wlasny-cert{flex:1 1 100%}
.wlasny-cert > summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--kresk);
  border-radius:8px;background:transparent;transition:background .12s}
.wlasny-cert > summary:hover{background:var(--karta2)}
.wlasny-cert > summary::-webkit-details-marker{display:none}
.wlasny-cert > summary::before{content:"▸";color:var(--tekst);opacity:.55;
  font-size:15px;line-height:1;transition:transform .15s;display:inline-block}
.wlasny-cert[open] > summary::before{transform:rotate(90deg)}
.sekcja-drogi[open] > summary{border-bottom:1px solid var(--kresk)}
.sekcja-drogi > summary::-webkit-details-marker{display:none}
/* ⛔ TROJKAT MA ZAPRASZAC DO KLIKNIECIA. Przy 11 px byl ledwo widoczna
   kreska obok naglowka — a to on jest jedynym znakiem, ze sekcja sie
   rozwija. Uwaga wlasciciela 01.09.2026: „te trojkaciki do ekspandowania
   powinny byc wieksze". 16 px i mocniejszy kolor: nadal spokojny, ale
   widac go z odleglosci, z ktorej czyta sie naglowek. */
.sekcja-drogi > summary::before{content:"▸";color:var(--tekst);opacity:.55;
  font-size:16px;line-height:1;width:14px;flex:none;
  transition:transform .15s,opacity .12s}
.sekcja-drogi > summary:hover::before{opacity:1}
.sekcja-drogi[open] > summary::before{transform:rotate(90deg)}
.sekcja-drogi > summary .male{font-weight:400}
.sekcja-drogi .tresc-sekcji{padding:14px 16px 16px;text-align:left}

/* Kafelek jednego zapytania ofertowego — zwinięty, rozwijany klikiem.
   Wcześniej każda grupa stała otwarta i po trzech zapytaniach ekranu nie
   dało się przejrzeć. STAN sprawy (ile wysłanych, ile czeka, ile bez
   adresu) zostaje w nagłówku, bo po to się na tę zakładkę wchodzi —
   rozwijanie dotyczy szczegółów, nie odpowiedzi na pytanie „jak stoję". */
.kafelek-zapytania{border:1px solid var(--kresk);border-radius:12px;
  padding:0;margin:14px 0 0;background:var(--karta);overflow:hidden}
.kafelek-zapytania.ok{border-color:var(--dobry)}
.kafelek-zapytania > summary{cursor:pointer;list-style:none;
  display:flex;align-items:flex-start;gap:9px;padding:12px 14px;
  transition:background .12s}
.kafelek-zapytania > summary:hover{background:var(--karta2)}
.kafelek-zapytania[open] > summary{border-bottom:1px solid var(--kresk)}
.kafelek-zapytania > summary::-webkit-details-marker{display:none}
/* Ten sam znak co w sekcjach drog — jedna wielkosc w calej aplikacji,
   zeby „to sie rozwija" wygladalo wszedzie tak samo. */
.kafelek-zapytania > summary::before{content:"▸";color:var(--tekst);
  opacity:.55;font-size:16px;line-height:1;width:14px;flex:none;
  margin-top:2px;transition:transform .15s,opacity .12s}
.kafelek-zapytania > summary:hover::before{opacity:1}
.kafelek-zapytania[open] > summary::before{transform:rotate(90deg)}
.kafelek-zapytania .tresc-kafelka{padding:0 14px 12px}
/* Towary, które poszły do TEJ hurtowni — pod nazwą dostawcy. Nie może
   rozpychać kolumny, bo tabela ma osiem wierszy jeden pod drugim. */
.towary-listu{color:var(--slaby);margin-top:2px;max-width:34em;line-height:1.45}
/* „5 towarów → 8 hurtowni · 3 bez adresata" — jedno zdanie, od którego
   zaczyna się czytanie tego ekranu, więc stoi nad listami, nie pod nimi. */
.podsumowanie-doboru{margin:0 0 10px;font-size:15px}

/* Pasek pracy bez procentów — przesuwający się odcinek. Procent, którego
   nie znamy, byłby wymyślony: jedna faktura schodzi programowo w ułamku
   sekundy, druga idzie modelem i trwa ~10 s. */
.pasek-pracy{height:6px;border-radius:4px;background:var(--karta2);
  overflow:hidden;margin:14px 0 6px}
.pasek-pracy i{display:block;height:100%;width:34%;border-radius:4px;
  background:var(--akcent);animation:plynie 1.6s ease-in-out infinite}
@keyframes plynie{0%{margin-left:-34%}100%{margin-left:100%}}

/* Odznaka z liczbą nieprzeczytanych wiadomości — mała, ale nie do
   przeoczenia. Znika sama, gdy klient wejdzie na zakładkę. */
.odznaka{display:inline-block;min-width:17px;padding:0 5px;border-radius:9px;
  background:var(--akcent);color:#fff;font-size:11px;font-weight:700;
  line-height:17px;text-align:center;vertical-align:1px}
.rozmowa{display:flex;flex-direction:column;gap:10px;max-width:80ch}
.wiad{border:1px solid var(--kresk);border-radius:11px;padding:11px 14px;
  background:var(--karta)}
.wiad.od-nas{border-left:3px solid var(--akcent)}
.wiad .naglowek{color:var(--slaby);margin-bottom:4px}
.wiad .tytul{font-weight:600;margin-bottom:3px}
.wiad .tresc{white-space:pre-wrap;line-height:1.5}

/* Przycisk „coś się dzieje" w pasku — ten sam kształt co reszta, ale
   z kropką, która pulsuje. Ma przyciągać wzrok, nie krzyczeć. */
button.pracuje{background:var(--karta2);color:var(--tekst);
  border:1px solid var(--akcent);display:inline-flex;align-items:center;gap:8px}
button.pracuje::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--akcent);animation:puls 1.4s ease-in-out infinite}

/* Powrót do aplikacji z ekranu dogrywania: wyrównany do lewej krawędzi
   karty, w stylu przycisku drugoplanowego. */
.powrot-app{margin:0 0 14px}
.powrot-app .cichy-przycisk{display:inline-block;padding:8px 16px;
  border:1px solid var(--kresk);border-radius:9px;background:var(--karta);
  color:var(--tekst);text-decoration:none;font-size:14px;font-weight:500}
.powrot-app .cichy-przycisk:hover{border-color:var(--akcent);
  text-decoration:none}

/* Rysunek w instrukcji: pełna szerokość kolumny, ale nie większy niż
   własny rozmiar. Ramka i zaokrąglenie, żeby czytało się jak podgląd
   cudzego ekranu, a nie element naszej strony. */
.rysunek-instrukcja{display:block;width:100%;max-width:560px;height:auto;
  margin:10px 0 4px;border:1px solid var(--kresk);border-radius:10px;
  background:#fff}


/* Cennik ma od 2026-08-19 DWA progi zamiast czterech. Siatka rozciągnięta
   na cztery kolumny zostawiłaby dwie samotne karty przy lewej krawędzi —
   dwie pozycje centrujemy i dajemy im więcej powietrza. */
/* ⛔ Sama zmiana szerokości NIE wystarczyła. `.lp-cennik` ma siatkę
   czterokolumnową z czasów czterech progów, więc dwie karty zajmowały
   dwie kolumny z czterech i ściskały się do ćwiartki pasa, zostawiając
   pustą prawą połowę. Wyglądało to jak niedokończony układ, a nie jak
   cennik. Liczba kolumn musi wynikać z liczby planów. */
.lp-cennik-dwa{grid-template-columns:repeat(2,1fr);
  max-width:720px;margin-left:auto;margin-right:auto}
.lp-pakiet{max-width:720px;margin:14px auto 0;text-align:center;
  line-height:1.6}


/* Pierwsze kroki: lista, która znika krok po kroku. Zrobione zostają na
   liście wyszarzone — człowiek widzi, ile już za nim, a nie tylko ile
   przed nim. */
/* Karta pierwszych kroków ma się WYRÓŻNIAĆ — jest tymczasowa i ma zostać
   odhaczona, więc nie może wyglądać jak kolejny panel z danymi. Kolorowa
   krawędź z lewej plus tło w akcencie: widać ją od razu po wejściu, ale
   nie krzyczy jak ostrzeżenie (uwaga właściciela 2026-08-20). */
.pierwsze-kroki{border-left:4px solid var(--akcent);
  background:linear-gradient(rgba(77,163,255,.06), rgba(77,163,255,.02))}
.pierwsze-kroki .kroki-naglowek{margin:0 0 4px;font-size:19px}
.pierwsze-kroki .kroki-postep{font-size:13px;color:var(--slaby);
  font-weight:400;margin-left:8px}
.pierwsze-kroki .pasek{margin:8px 0 4px}
.pierwsze-kroki .pasek>div{height:100%;background:var(--akcent);
  border-radius:3px;transition:width .3s}
.pierwsze-kroki .kroki-lista{margin:10px 0 0;padding-left:22px;
  display:flex;flex-direction:column;gap:12px}
.pierwsze-kroki .kroki-lista li{line-height:1.5}
.pierwsze-kroki .kroki-lista li.zrobiony{color:var(--slaby)}
.pierwsze-kroki .kroki-lista li.zrobiony b{font-weight:400;
  text-decoration:line-through}
.pierwsze-kroki .kroki-lista .male{margin:2px 0 6px;max-width:70ch}
.pierwsze-kroki button{margin-top:2px}


/* Ekran faktury. Klient ogląda go obok papierowej faktury leżącej na
   biurku, więc ma wyglądać jak kartka, a nie jak kolejny panel aplikacji:
   biała płaszczyzna, oddech dookoła, treść w kolumnie o czytelnej
   szerokości. Bez tego wyglądało to — słowami właściciela — „nawet nie
   przypomina faktury" (2026-08-20). */
/* ⛔ Oddech dookoła treści i SZERSZA kolumna. Właściciel zgłaszał ciasnotę
   trzykrotnie; przy 940 px dziesięć kolumn tabeli dostawało po ~86 px, więc
   kod „ROBEN-ANTRACYT-DACHOWKA-PLUS" łamał się na trzy linie i cała kartka
   wyglądała na ściśniętą — choć sam margines był w porządku. Ciasnota brała
   się z tabeli, nie z marginesu, więc rośnie jedno i drugie. */
.dokument{background:var(--karta);border:1px solid var(--kresk);
  border-radius:12px;padding:44px 52px;max-width:1080px;margin:26px auto 44px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.dokument h1{margin-top:0}
.dokument .karty{margin:18px 0 22px}
.dokument table{width:100%;border-collapse:collapse}
.dokument table th{text-align:left;font-size:12px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--slaby);border-bottom:2px solid var(--kresk);
  padding:8px 10px}
.dokument table td{padding:9px 10px;border-bottom:1px solid var(--kresk)}
.dokument table tr:last-child td{border-bottom:0}

/* Wydruk: sama kartka, bez nawigacji i stopki aplikacji. */
@media print{
  header, .stopka, .pasek-stan, .uwagi, .przyciski{display:none !important}
  /* padding zdejmujemy świadomie — odstęp od krawędzi daje `@page`.
     Podwójny margines (papieru i dokumentu) zjadałby pół kartki. */
  /* ⛔ Padding NIE jest tu zbędny. Gdy w oknie drukowania stoi
     „Marginesy: brak", `@page` nie działa i faktura wychodzi
     przyklejona do krawędzi — właściciel zgłaszał to trzy razy.
     Ten odstęp jest wtedy jedynym, jaki zostaje. */
  .dokument{border:0;box-shadow:none;padding:8mm 7mm;margin:0;
    max-width:none}
  /* ⛔ NASZE kolumny nie idą na papier.
     Na ekranie stoi nagłówek „Odtworzona z danych KSeF · oryginałem jest
     XML w KSeF", więc widać, co jest czyje. Kartka tego kontekstu nie
     niesie: kod w rodzaju ROBEN-ANTRACYT-DACHOWKA-PLUS wygląda wtedy na
     indeks sprzedawcy, którym nie jest — a wydruk pokazany dostawcy albo
     księgowej ma nie zawierać niczego, czego nie ma na fakturze. */
  .nasze{display:none !important}
  /* ⛔ Podświetlenie wiersza to ślad NAWIGACJI — „tu skoczyłeś z karty
     towaru". Na papierze nie ma skąd skoczyć, a żółty wiersz na wydruku
     wygląda, jakby z tą pozycją było coś nie tak: przy fakturze pokazanej
     dostawcy to gotowe nieporozumienie. */
  /* tło siedzi na KOMÓRKACH (`.podswietlony td`), nie na wierszu —
     reguła na samym `tr` niczego by nie nadpisała */
  .podswietlony td{background:none !important}
}

/* Rozbicie po stawkach VAT pod tabelą pozycji. Wąska, dosunięta do prawej:
   to podsumowanie, nie druga tabela pozycji, i ma się tak czytać. */
.rozbicie-vat{width:auto;min-width:min(420px, 100%);margin-left:auto}
.rozbicie-vat caption{text-align:left;color:var(--slaby);padding-bottom:6px}

/* Wiarygodność dostawcy bez zastrzeżeń. Delikatna zieleń, nie krzyk:
   to potwierdzenie, a nie alarm — ekran ogląda się PRZED przelewem
   i decyzja brzmi „można", więc kolor ma ją potwierdzać z odległości. */
.wynik.czysty{border-left:4px solid var(--dobry, #2fa36b);
  background:linear-gradient(rgba(47,163,107,.06), rgba(47,163,107,.02))}

/* kwota policzona przez nas, nie przepisana z dokumentu */
.wyliczone{color:var(--slaby);cursor:help;margin-left:1px}

/* Przełącznik netto/brutto w nagłówku — dwa zrośnięte guziki, wybrany
   podświetlony. Celowo mały i szary: to ustawienie widoku, nie akcja. */
.przelacznik-kwot{display:inline-flex;vertical-align:middle;margin-right:10px;
  border:1px solid var(--kresk);border-radius:6px;overflow:hidden}
.przelacznik-kwot button{background:none;border:0;border-radius:0;
  padding:3px 9px;font-size:12px;color:var(--slaby);cursor:pointer}
.przelacznik-kwot button:hover{color:var(--tekst);background:var(--karta2)}
.przelacznik-kwot button.on{background:var(--akcent);color:#0b1220;
  font-weight:600}
/* R06: ekran, który nie słucha trybu — przełącznik wyłączony i wyblakły,
   z dopiskiem „tu: netto"; świecące „brutto" nad kwotami netto to kłamstwo
   sterowania, nawet gdy etykiety są uczciwe. */
.przelacznik-kwot.nieaktywny{opacity:.55;border-style:dashed}
.przelacznik-kwot.nieaktywny button{cursor:not-allowed}
.przelacznik-kwot.nieaktywny button:hover{background:none;color:var(--slaby)}
.przelacznik-kwot.nieaktywny button.on{background:var(--karta2);color:var(--slaby);font-weight:500}
.przelacznik-kwot.nieaktywny .male{padding:3px 8px 3px 4px;border-left:1px solid var(--kresk)}
/* Druk i widok dokumentu: przełącznik nie ma czego robić na kartce. */
@media print{.przelacznik-kwot{display:none}}

/* Kwota w trybie, którego klient teraz NIE ogląda — widoczna, ale cichsza,
   żeby wzrok trafiał w tę właściwą. Nie chowamy jej: obie na raz to
   wyraźne życzenie („tam gdzie jest miejsce, pokażemy obie wartości"). */
.przygaszone{color:var(--slaby)}
/* Dopisek „netto"/„brutto" przy dużej liczbie w kafelku. */
.jednostka-kwoty{font-size:12px;color:var(--slaby);font-weight:400;
  margin-left:5px;letter-spacing:.2px}

/* Przycisk, który jest JEDYNĄ rzeczą do zrobienia na ekranie — ostatni krok
   rejestracji, potwierdzenie płatności. Ma być widać z drugiego końca
   pokoju, bo alternatywą jest zamknięcie karty i niewrócenie nigdy. */
button.duzy{font-size:16px;padding:13px 30px;font-weight:600;
  border-radius:9px}

/* Zestawienie „to już mają Państwo": dwa wiersze, jeden pod drugim.
   ⛔ Nazwa dostaje CAŁĄ szerokość — w układzie kolumnowym dostawała
   resztkę miejsca i łamała się w pionie po jednym słowie, a
   porównania dwóch nazw nie da się wtedy przeczytać wzrokiem
   (uwaga właściciela 2026-08-23). Kwota i dostawca schodzą do
   drugiej linii — przy dwóch wierszach różnica i tak rzuca się
   w oczy. */
/* ⛔ Porównanie dwóch towarów stoi OBOK SIEBIE, nie w słupku.
   Wcześniej oba wiersze szły jeden pod drugim w wąskiej kolumnie, choć
   obok było pół ekranu wolnego — a porównanie z natury jest zestawieniem
   dwóch rzeczy, więc układ ma to pokazywać (uwaga właściciela 2026-08-25:
   „jest tu sporo obszaru, żeby to ładnie pokazać, a nie taki wąski
   zlepek w jednej kolumnie"). Na wąskim ekranie wraca do słupka. */
.zestawienie-kodu{margin:8px 0 4px;display:grid;
  grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:820px){ .zestawienie-kodu{grid-template-columns:1fr} }
.wiersz-kodu{padding:9px 11px;border:1px solid var(--kresk);
  border-radius:10px;background:var(--karta2)}
.wiersz-kodu + .wiersz-kodu{border-top:1px solid var(--kresk)}

/* Rekomendacja: co MY sugerujemy i dlaczego. Zielona przy komplecie
   przesłanek, neutralna przy częściowych — kolor niesie tu siłę dowodu,
   a nie emocję. */
.rekomendacja{border-left:3px solid var(--kresk);padding:6px 0 6px 10px;
  margin:0 0 8px}
.rekomendacja.mocna{border-left-color:var(--dobry)}
.rekomendacja.mocna b{color:var(--dobry)}
.etykieta-kodu{display:block;margin-bottom:3px;
  color:var(--slaby);font-size:12.5px}
.pod-kodem{margin-top:4px;color:var(--slaby)}

/* Przyciski decyzji w bramce kodów. ⛔ Kod towaru bywa długi
   („CREATON-TITANIA-ANTRACYTOWA-ANGOBA-KOMINEK-DN125-ADAPTERA-
   Z-PRZYLACZEM"), więc wpisany w przycisk rozpychał go na trzy
   linie i cała komórka się rozłaziła (uwaga właściciela
   2026-08-23, dwa razy). Kod idzie do drugiej linii, mniejszym
   krojem — decyzja czyta się z pierwszej. */
.akcje-kodu{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.akcje-kodu button{text-align:left;line-height:1.3}
.akcje-kodu .mono{display:block;font-size:11.5px;opacity:.75;
  word-break:break-all;max-width:34ch}

/* ⛔ Liczba, ktora bez wyjasnienia nic nie znaczy, MUSI wygladac na
   klikalna-do-sprawdzenia. Kropkowane podkreslenie to konwencja „tu jest
   wyjasnienie" starsza niz web (slowniki, encyklopedie) — bez niej
   podpowiedz istnieje, ale nikt nie wie, ze ma najechac myszka.
   Zgloszenie wlasciciela 2026-08-27: „nie wiadomo, co dokladnie znaczy
   ta kwota". Sama podpowiedz nie wystarczy — na dotyku jej nie ma,
   dlatego to samo stoi wypisane w legendzie pod tabela. */
.z-tipem { border-bottom: 1px dotted currentColor; cursor: help; }

/* ⛔ HASLO MASKOWANE STYLEM, NIE TYPEM POLA.
   Zgloszenie wlasciciela 31.08.2026: pole „Haslo do pliku" bylo wypelnione,
   zanim cokolwiek wpisal. Menedzery hasel i przegladarki rozpoznaja pola po
   TYPIE (`type="password"`) i podstawiaja tam haslo DO KONTA — podstawione
   haslo jest zle, certyfikat zostaje odrzucony, a czlowiek szuka przyczyny
   w pliku, bo o podmianie nie ma skad wiedziec. `autocomplete="off"` tego nie
   powstrzymuje: przegladarki swiadomie je ignoruja na polach hasla.

   `text-security` maskuje znaki wizualnie; `-webkit-text-security` jest
   potrzebne dla Chrome i Safari, ktore standardowej wlasciwosci nie znaja. */
.haslo-maskowane {
  -webkit-text-security: disc;
  text-security: disc;
  font-family: inherit;
  letter-spacing: .08em;
}

/* ⛔ WARTOSCI DO PRZEPISANIA DO OBCEGO FORMULARZA.
   Klient przenosi NIP i nazwe z kodem do panelu MF w innej karcie.
   Przepisywanie dziesieciu cyfr z pamieci to gwarantowana literowka,
   a literowka w kodzie znaczy powrot do KSeF i poprawianie nadanego
   uprawnienia — dlatego kazda wartosc ma przycisk „kopiuj". */
/* ⛔ RAMKA „DO PRZEPISANIA" — to nie jest ozdoba, tylko instrukcja
   obslugi OBCEGO formularza. Klient ma te wartosci przeniesc do panelu MF
   w innej karcie; kazda literowka po jego stronie konczy sie powrotem do
   KSeF i poprawianiem nadanego uprawnienia. Dlatego wartosc jest tu
   najwazniejszym elementem: monospace, wiekszy stopien, wlasne tlo,
   zaznaczalna jednym kliknieciem.

   ⛔ Do 31.08.2026 ramka odwolywala sie do `--kreska` i `--tlo-karty`,
   ktorych NIE MA — wiec brala wartosci zapasowe (bialy, jasnoszary)
   i wygladala jak wklejona z innej strony. Uwaga wlasciciela: „ten kopiuj
   przycisk i caly ten ui wyglada srednio". */
.doPrzepisania{margin:16px 0;max-width:62ch;border:1px solid var(--kresk);
  border-radius:12px;background:var(--karta);overflow:hidden}
.doPrzepisania > .naglowek-ramki{display:block;padding:9px 16px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slaby);background:var(--karta2);
  border-bottom:1px solid var(--kresk)}

.wiersz-kopiuj{display:grid;grid-template-columns:8em 1fr auto;
  gap:12px;align-items:center;padding:11px 16px}
.wiersz-kopiuj + .wiersz-kopiuj{border-top:1px solid var(--kresk)}

.wiersz-kopiuj .etykieta-mala{font-size:12px;letter-spacing:.03em;
  color:var(--slaby);font-weight:600}

/* Wartosc: wlasne tlo, zeby bylo widac, dokad siega — przy „Kosztomat.com.pl
   KM-XFPD" granica miedzy nazwa a kodem jest cala trescia komunikatu. */
.wiersz-kopiuj code{font-size:15px;font-weight:600;letter-spacing:.01em;
  color:var(--tekst);background:var(--karta2);border:1px solid var(--kresk);
  border-radius:7px;padding:6px 10px;
  /* ⛔ NIGDY nie lamiemy wartosci w srodku. Przy 9.5em na etykiete
     "Kosztomat.com.pl KM-R48G" rozpadalo sie na "KM-R4" i "8G" —
     a klient PRZEPISUJE to recznie do panelu MF. Zle przepisany kod
     znaczy powrot do KSeF i poprawianie nadanego uprawnienia, wiec
     zamiast lamania wolimy przewijanie w poziomie. */
  white-space:nowrap;overflow-x:auto;
  user-select:all;-webkit-user-select:all}

/* ⛔ Przycisk „kopiuj" ma byc dyskretny, dopoki nie jest potrzebny —
   w tej ramce sa dwa i gdyby krzyczaly, konkurowalyby z „Sprawdz
   uprawnienia", czyli z jedyna czynnoscia w calej sekcji. */
button[data-kopiuj]{flex:none;padding:6px 12px;font-size:12.5px;
  font-weight:600;border:1px solid var(--kresk);border-radius:7px;
  background:transparent;color:var(--slaby);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s}
button[data-kopiuj]:hover{color:var(--tekst);border-color:var(--akcent);
  background:var(--karta2)}
button[data-kopiuj].skopiowane{color:var(--dobry);border-color:var(--dobry);
  background:transparent}
button[data-kopiuj].skopiowane::before{content:"\2713\00a0"}

@media (max-width:520px){
  .wiersz-kopiuj{grid-template-columns:1fr auto;gap:6px 10px}
  .wiersz-kopiuj .etykieta-mala{grid-column:1 / -1}
}
/* ⛔⛔ TU STAŁ OSIEROCONY SELEKTOR `button` — SAM, BEZ NAWIASU.
   Został po edycji, która zgubiła swoją regułę (commit 78a86bc). Dopóki
   był OSTATNIĄ rzeczą w pliku, przeglądarka po cichu wyrzucała niedomkniętą
   regułę i nikomu to nie przeszkadzało. Uśpiona usterka: szkodliwa dopiero
   wtedy, gdy ktoś dopisze coś po niej.

   02.09.2026 dopisałem tu style zgłoszeń — i osierocony `button` wchłonął
   mój komentarz razem z pierwszym selektorem. W przeglądarce reguła
   brzmiała `button .zglos-uwage{position:fixed…}`, czyli „element klasy
   `zglos-uwage` WEWNĄTRZ przycisku". Nie pasowała nigdy, więc przycisk
   „Zgłoś uwagę" dostał `position:static` i wylądował w normalnym przepływie
   na wysokości 28 966 px — na dnie strony, poza zasięgiem wzroku.
   Właściciel: „nie widzę tego przycisku, gdzie on jest?".

   ⛔ Zero błędu w konsoli, zero czerwonego testu, plik poprawny składniowo.
   Pilnuje tego teraz `test_css_selektory.py`.

   Potwierdzenie skopiowania, które ten komentarz kiedyś opisywał, żyje
   w `app.js` (`data-kopiuj` podmienia napis na „Skopiowane ✓") i żadnej
   reguły w arkuszu nie potrzebuje. */

/* ==== Zgłoszenie uwagi =============================================
   Przycisk stoi na KAŻDYM ekranie, bo uwaga rodzi się w chwili napotkania
   problemu — po którą trzeba iść na osobną stronę, nie powstaje wcale.
   Dyskretny, w rogu: to ma być dostępne zawsze, a nie krzyczeć na klienta
   płacącego za narzędzie.

   ⛔ WŁASNE NAZWY KLAS (`zgl-*`), a nie `okno-tresc`/`okno-akcje`.
   Te dwie już istnieją dla okien potwierdzeń i niosą `white-space:pre-line`
   oraz szary tekst — formularz odziedziczyłby jedno i drugie. Kolizja
   w kaskadzie nie daje błędu, tylko cichy bałagan w układzie. */
/* Lekko pomaranczowy — zgloszenie nr 1 od wlasciciela (03.09.2026):
   „przycisk moglby byc np lekko pomaranczowy". Cieply kolor odroznia go od
   calej reszty interfejsu, ktora jest niebiesko-szara, a jednoczesnie nie
   krzyczy jak przycisk akcji. */
.zglos-uwage{
  padding:9px 16px;font-size:13.5px;font-weight:600;border-radius:999px;
  background:var(--cieply-tlo);color:var(--cieply-tekst);
  border:1px solid var(--cieply-kresk);
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.zglos-uwage:hover{border-color:var(--uwaga);filter:brightness(1.06)}
@media print{.zglos-uwage{display:none}}

/* ==== Róg ekranu: asystent + zgłoszenie uwagi (od 24.09.2026) ========
   Jeden pojemnik przyklejony w rogu, przyciski obok siebie — każdy z nich
   może nie istnieć (pokaz nie ma „Zgłoś uwagę”, panel dostawcy nie ma
   asystenta), a drugi zostaje wtedy w samym rogu bez przeliczania odstępów.
   Asystent w kolorze akcentu: to funkcja, po którą klient ma sięgać;
   „Zgłoś uwagę” zostaje ciepła i cicha (zgłoszenie nr 1 właściciela). */
.rog-ekranu{position:fixed;right:16px;bottom:16px;z-index:40;
  display:flex;gap:10px;align-items:center}
.dymek-asystenta{display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;font-size:13.5px;font-weight:600;border-radius:999px;
  border:1px solid transparent;background:var(--akcent);color:#fff;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.dymek-asystenta:hover{filter:brightness(1.08)}
.dymek-asystenta[aria-expanded="true"]{background:var(--karta2);color:var(--tekst);
  border-color:var(--kresk)}
/* Okno NIE jest modalne i nie zasłania środka ekranu: pytanie dotyczy tego,
   na co klient właśnie patrzy, więc tło zostaje widoczne i klikalne. */
.okno-asystenta{position:fixed;right:16px;bottom:68px;z-index:45;
  width:min(31rem,calc(100vw - 32px));max-height:min(76vh,46rem);
  display:flex;flex-direction:column;background:var(--karta);color:var(--tekst);
  border:1px solid var(--kresk);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.okno-asystenta[hidden]{display:none}
.asy-glowa{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--kresk)}
.asy-glowa h2{margin:0;font-size:15px;flex:1}
.asy-zamknij{border:0;background:transparent;font-size:22px;line-height:1;
  cursor:pointer;color:var(--slaby);padding:0 4px}
.asy-zamknij:hover{color:var(--tekst)}
.asy-watek{position:relative;flex:1 1 auto;min-height:120px;overflow-y:auto;padding:12px 14px}
.asy-wymiana{margin:0 0 16px}
.asy-pytanie{width:fit-content;max-width:85%;margin:0 0 8px auto;padding:7px 11px;
  border-radius:12px 12px 3px 12px;background:var(--karta2);font-size:13.5px;
  overflow-wrap:anywhere}
.asy-odpowiedz{font-size:13.5px;line-height:1.5}
.asy-odpowiedz table{font-size:12.5px}
.asy-czeka{color:var(--slaby);font-size:13px}
.asy-przyklady{display:flex;flex-wrap:wrap;gap:6px}
.asy-przyklady form{margin:0}
.asy-przyklady button,.asy-odpowiedz form button{padding:5px 11px;font-size:13px;font-weight:500;
  border-radius:7px;text-align:left}
.asy-pole{display:flex;gap:8px;margin:0;padding:10px 14px;border-top:1px solid var(--kresk)}
.asy-pole input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--kresk);
  border-radius:7px;background:var(--karta);color:var(--tekst);font-size:14px}
.asy-pole input:focus{outline:2px solid var(--akcent);outline-offset:1px}
.asy-stopka{margin:0;padding:0 14px 10px;color:var(--slaby)}
@media (max-width:760px){
  .okno-asystenta{left:8px;right:8px;width:auto;bottom:64px;max-height:78vh}
  /* iOS powiększa stronę przy fokusie pola < 16 px (M08) */
  .asy-pole input{font-size:16px}
}
@media print{.rog-ekranu,.okno-asystenta{display:none}}

.okno-zgloszenia{position:fixed;inset:0;z-index:60;display:flex;
  align-items:center;justify-content:center;padding:20px}
.okno-zgloszenia[hidden]{display:none}
/* Tło PÓŁPRZEZROCZYSTE i pod treścią: okno da się przesunąć, więc widok
   pod spodem ma zostać czytelny — o nim właśnie klient pisze. */
.zgl-tlo{position:absolute;inset:0;background:rgba(8,12,20,.45)}
.zgl-tresc{position:relative;width:min(560px,100%);max-height:88vh;
  overflow:auto;background:var(--karta);border:1px solid var(--kresk);
  border-radius:14px;padding:18px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.zgl-tresc h2{margin:0 0 8px;font-size:17px}
.zgl-tresc textarea{width:100%;margin-top:10px}
.uchwyt{cursor:grab;user-select:none}
body.przesuwam-okno{cursor:grabbing;user-select:none}
body.przesuwam-okno .uchwyt{cursor:grabbing}
.znak-uchwytu{float:right;color:var(--slaby);font-size:14px}
.rodzaje-uwagi{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;
  font-size:13.5px}
.rodzaje-uwagi label{display:inline-flex;align-items:center;gap:6px}
.zgl-akcje{display:flex;align-items:center;gap:10px;margin:14px 0 6px}
.rozpychacz{flex:1}

/* Potwierdzenie przyjęcia — znika samo. Komunikat wymagający kliknięcia
   byłby DRUGĄ przerwą w pracy, a to okno powstało po to, żeby nie było
   pierwszej. */
/* ⛔ TEN PASEK BYL DO PRZEOCZENIA i zostalo to zgloszone (03.09.2026:
   „popraw wielkosc i kolor tego komunikatu na dole, bo mozna go
   przeoczyc"). Byl bladym dymkiem w kolorze karty — czyli w kolorze tla,
   nad ktorym stal. Potwierdzenie, ktorego czlowiek nie zauwazy, jest tym
   samym co jego brak: klika drugi raz albo nie wie, czy uwaga poszla.
   Teraz: pelny kolor, wiekszy tekst i wjazd od dolu, zeby ruch przyciagnal
   wzrok. */
.potwierdzenie-uwagi{position:fixed;left:50%;bottom:26px;z-index:70;
  transform:translateX(-50%);padding:14px 26px;border-radius:12px;
  font-size:15.5px;font-weight:600;letter-spacing:.1px;
  background:var(--dobry);color:#06251a;border:0;
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  animation:potwierdzenie-wjazd .28s ease-out both}
.potwierdzenie-uwagi.zle{background:var(--zly);color:#2b0a0a}
@keyframes potwierdzenie-wjazd{
  from{opacity:0;transform:translate(-50%,16px)}
  to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){
  .potwierdzenie-uwagi{animation:none}}

/* ── Nawigacja w dwóch rzędach (2026-09-03) ───────────────────────────
   Pięć sekcji w nagłówku, pozycje bieżącej sekcji w rzędzie pod nim,
   „Zapytaj" jako pole, Wiadomości jako koperta z licznikiem. */
nav a .odznaka{margin-left:5px;vertical-align:1px}
.drugi-rzad{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:7px 24px;background:var(--karta2);border-bottom:1px solid var(--kresk)}
/* ⛔ Nieaktywne podstrony były szarym tekstem 13,5 px bez obramowania na
   jasnym pasku — czytały się jak podpisy, nie jak zakładki (właściciel,
   07.09.2026: „to jest słabo widoczne"). Pigułka z obramowaniem
   i ciemnym tekstem mówi „to się klika"; aktywna zostaje niebieska. */
.drugi-rzad a{padding:5px 13px;border-radius:20px;color:var(--tekst);
  background:var(--karta);border:1px solid var(--kresk);
  font-size:14px;white-space:nowrap;line-height:1.3}
.drugi-rzad a:hover{color:var(--akcent);border-color:var(--akcent);
  background:var(--karta);text-decoration:none}
.drugi-rzad a.on{background:var(--akcent);color:#fff;border-color:var(--akcent);
  font-weight:600}
/* separator widoki | kategorie — patrz `Pozycja.przerwa` w app/nawigacja.py */
.drugi-rzad .przerwa{display:inline-block;width:1px;height:22px;
  background:var(--kresk);margin:0 6px;flex:none}
.drugi-rzad a .odznaka{margin-left:5px}
.ikona-poczty{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:32px;height:32px;border:1px solid var(--kresk);
  border-radius:7px;color:var(--slaby);font-size:15px;text-decoration:none;flex:none}
.ikona-poczty:hover,.ikona-poczty.on{color:var(--akcent);text-decoration:none;
  border-color:var(--akcent)}
.ikona-poczty .odznaka{position:absolute;top:-7px;right:-8px}
.pole-pytania{min-width:520px}
@media (max-width:760px){.pole-pytania{min-width:0;width:100%;flex:1 1 100%}}
@media (max-width:760px){
  .drugi-rzad{flex-wrap:nowrap;overflow-x:auto;padding:6px 12px;
      scrollbar-width:none;-ms-overflow-style:none}
  .drugi-rzad::-webkit-scrollbar{display:none}
  .drugi-rzad a{flex:none}
}

/* ── Przypięta górna belka: nagłówek + drugi rząd + pasek stanu razem ──
   (2026-09-03). Nagłówek sam nie jest już przypięty — przypięty jest
   pojemnik, żeby cała belka trzymała się góry. Na telefonie przypięty
   zostaje tylko nagłówek: trzy paski zjadłyby pół ekranu. */
.przypiete{position:sticky;top:0;z-index:9;background:var(--karta)}
.przypiete header{position:static}
.przypiete .pasek-stan.globalny{margin:0}
@media (max-width:760px){
  .przypiete{position:static}
  .przypiete header{position:sticky;top:0}
}

/* ==== Dluga tabela dostaje WLASNY obszar przewijania =================
   Zgloszenia nr 11, 15 i 19 (03.09.2026): „dostawcy praktycznie tak dlugo
   sie scrolluja, ze zajmuja caly ekran", „nie lepiej znowu dac jakiejs
   paginacji? liczba bedzie rosla tylko".

   ⭐ WLASNE PRZEWIJANIE, A NIE STRONY — i to jest odpowiedz na jego wlasne
   slowa („zeby te sekcje mozna bylo scrolowac"). Strony przy tabeli, ktora
   sie PRZEGLADA (a nie rozstrzyga wiersz po wierszu), kaza klikac, zeby
   zobaczyc calosc; przewijanie w miejscu zostawia reszte ekranu widoczna
   i nie wymaga zadnego zadania do serwera.

   ⛔ Naglowek MUSI byc przyklejony. Tabela przewijana wewnatrz siebie bez
   przyklejonego naglowka jest gorsza od dlugiej: po trzech obrotach kolka
   nie wiadomo juz, ktora kolumna jest ktora. */
.tabela-przewijana{max-height:62vh;overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--kresk);border-radius:10px}
.tabela-przewijana > table{min-width:640px;margin:0}
.tabela-przewijana thead th,
.tabela-przewijana > table > tr:first-child th{position:sticky;top:0;z-index:2;
  background:var(--karta);box-shadow:0 1px 0 var(--kresk)}
/* Na telefonie ekran jest niski — polowa i tak wystarcza, zeby bylo widac,
   ze pod tabela cos jeszcze jest. */
@media (max-height:700px){.tabela-przewijana{max-height:56vh}}

/* ==== Wiersz rozstrzygniecia (Kolizje i porownywalnosc) ================
   ⛔⛔ DECYZJA O TOZSAMOSCI TOWARU NIE MIESCI SIE W JEDNEJ Z OSMIU KOLUMN.
   Do 07.09.2026 karty „ten sam kod dla dwoch zapisow", „prawie ten sam kod"
   i „taki towar juz macie" siedzialy w komorce „Skad" — okolo 350 px obok
   kolumn „Poz." i „Netto" po kilkanascie znakow. Nazwy lamaly sie slupkiem
   po jednym slowie, a porownuje sie tylko to, co da sie przeczytac obok
   siebie (ta sama uwaga wracala tu trzy razy: 23.08, 04.09, 07.09).

   Teraz kazda pozycja to DWA wiersze: dane w kolumnach + rozstrzygniecie
   na `colspan`. Wiersz drugi nalezy do pierwszego, wiec kreska idzie
   dopiero pod nim. */
/* ⛔⛔ WIERSZ I JEGO PYTANIE TO JEDEN BLOK (B5). Dwa osobne `tr` dostawaly
   osobna zebre i osobny hover, wiec najechanie mysza podswietlalo POL
   pozycji — wygladalo to jak dwie rozne rzeczy, a jest jedna. Tlo, hover
   i krawedz ida na `tbody`, nie na wiersze. */
tbody.pozycja > tr > td{background:transparent}
tbody.pozycja:hover > tr > td{background:var(--karta2)}
tbody.pozycja + tbody.pozycja > tr:first-child > td{
  border-top:1px solid var(--kresk)}
/* ⛔⛔ B3. MENU „inne…" PRZY WIERSZU zamiast trzech kontrolek w każdej
   linii. Przy 25 pozycjach na stronie tabela pokazywała naraz 25 pól
   tekstowych, 25 list wyboru i 50 przycisków — wyglądała jak pulpit
   sterowniczy, a jest listą rzeczy do przejrzenia.

   ⛔ To `<details>`, a nie skrypt: CSP nie puszcza kodu w atrybutach,
   więc menu ma działać samą przeglądarką — tak jak „własny certyfikat"
   i sekcje na ekranie Zapytań. Rozwija się W WIERSZU (nie warstwą nad
   tabelą), bo warstwa musiałaby wystawać poza `<td>` i na wąskim
   ekranie uciekłaby poza kadr. */
td.inne{white-space:nowrap;vertical-align:top}
.menu-wiersza > summary{list-style:none;display:inline-block;
  padding:2px 9px;border:1px solid var(--kresk);border-radius:7px;
  background:var(--karta2);color:var(--slaby);font-size:13px;
  cursor:pointer;-webkit-user-select:none;user-select:none}
.menu-wiersza > summary::-webkit-details-marker{display:none}
.menu-wiersza > summary:hover{color:var(--tekst)}
.menu-wiersza[open] > summary{color:var(--tekst);border-color:var(--akcent)}
.menu-wiersza > .menu-tresc{display:flex;flex-direction:column;gap:8px;
  margin-top:7px;padding:9px 10px;background:var(--karta2);
  border:1px solid var(--kresk);border-radius:9px}
.menu-wiersza > .menu-tresc > form{gap:7px}
/* ⛔⛔ PRZYCISK NA TLE W TYM SAMYM KOLORZE JEST NIEWIDOCZNY (zgłoszenie 52:
   „przyciski «Porównuj tylko u tego dostawcy» niewidoczne").

   To nie jest kwestia gustu, tylko dwie te same wartości: szuflada
   `menu-tresc` ma `background: var(--karta2)` i `button.cichy` ma
   `background: var(--karta2)`. Jedyne, co odróżniało AKCJĘ od TŁA, to
   kreska w kolorze `--slaby` — w jasnym motywie #f0f2f6 na #f0f2f6.

   W szufladzie przyciski dostają więc tło karty, czyli o stopień
   kontrastujące z panelem. Zachowanie bez zmian — to jest poprawka
   widoczności. */
.menu-wiersza > .menu-tresc button.cichy{background:var(--karta);
  border-color:var(--slaby)}
tr.rozstrzygniecie > td{padding-top:0;border-top:0}
.zbita tr.rozstrzygniecie + tr > td{border-top:1px solid var(--kresk)}
tr.rozstrzygniecie .zestawienie-kodu,
tr.rozstrzygniecie > td > div{max-width:none}
/* Tabela z rozstrzygnieciami jest z natury wysoka — dwa wiersze na pozycje.
   Wyzszy sufit znaczy mniej przewijania w przewijaniu, a naglowek i tak
   zostaje przyklejony. */
.tabela-przewijana.rozstrzygnienia{max-height:82vh}
@media (max-height:700px){.tabela-przewijana.rozstrzygnienia{max-height:74vh}}

/* ==== Stronnicowanie grup na ekranie Towary ===========================
   ⛔ Numer BIEZACEJ strony musi byc widoczny bez czytania adresu — inaczej
   po trzech kliknieciach nie wiadomo, gdzie sie jest, a przy osmiu
   stronach to znaczy „zacznij od poczatku". */
.strony{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:6px}
.strony a{padding:1px 6px;border-radius:6px;text-decoration:none}
.strony a:hover{background:var(--karta)}
.strony .ta-strona{padding:1px 6px;border-radius:6px;
  background:var(--akcent);color:#fff}

/* ⛔ WLASNY TOKEN, nie `--uwaga`. `--uwaga` (#ffb648) nie jest przedefiniowane
   dla jasnego motywu i na bialym tle robi sie nieczytelne — ta sama pulapka,
   ktora opisano wyzej przy `--cieply-tekst`. I nie `.zly`: tamta klasa dziala
   tylko wewnatrz `.karta .liczba` (patrz komentarz przy `.stan-wstrzymane`).
   Rozjazd cen na karcie blizniaka nie jest zreszta bledem — to PRZESLANKA,
   ze to dwa rozne towary. */
.roznica-cen{color:var(--cieply-tekst)}

/* ==== Kolejka pytan (Towary > Do potwierdzenia) =======================
   ⛔ JEDNO PYTANIE = JEDEN BLOK. Ekran pokazywal dotad drzewo decyzyjne
   maszyny w kazdym wierszu; tu ma byc widac, gdzie konczy sie jedno
   pytanie, a zaczyna nastepne. Stad wlasna karta, nie wiersz tabeli. */
.pytanie{border:1px solid var(--kresk);border-radius:10px;
  padding:12px 14px;margin:10px 0;background:var(--karta)}
.pytanie .tresc-pytania{font-size:15.5px;line-height:1.45}
.pytanie .pod-pytaniem{margin-top:4px}
/* ⛔ Dwie odpowiedzi tej samej wagi. Wyroznienie jednej robiloby
   z rekomendacji nacisk, a klient ma rozstrzygac, nie zgadywac. */
.pytanie .odpowiedzi{gap:8px;margin-top:10px;flex-wrap:wrap}
.pytanie .odpowiedzi form{margin:0}

/* ==== Zawezenie listy do dostawcy + akcja zbiorcza ====================
   ⛔ 87 ze 107 decyzji na koncie klienta pochodzi od dwunastu dostawcow,
   a jeden robi 29 z nich. Pigulki maja sie zmiescic w jednej linii wzroku
   i zawijac, a nie rozpychac ekranu. */
.pigulki-dostawcow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pigulki-dostawcow .pigulka{font-size:12.5px}
/* Formularz zbiorczy pod tabela grupy — wyrazny, ale nie krzyczacy:
   to jest akcja na tym, co czlowiek sam zaznaczyl. */
.hurt-grupy{gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 18px;
  padding:8px 10px;border:1px solid var(--kresk);border-radius:10px;
  background:var(--karta)}

/* ==== Raport dzienny: lista sekcji do zaznaczenia ======================
   Wlasciciel 2026-09-04: „kilka pozycji do zaznaczenia i uzytkownik tylko
   zaznacza, ktore pozycje maja sie pojawic w raporcie". Kazda pozycja to
   ptaszek + nazwa + jedno zdanie, co to znaczy — bez zdania klient
   zgaduje, czym rozni sie „sygnal" od „drozej niz zwykle". */
.sekcje-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:6px 18px;margin:4px 0 0}
.sekcje-lista label{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;
  align-items:start;padding:6px 8px;border-radius:8px;cursor:pointer}
.sekcje-lista label:hover{background:var(--karta2)}
.sekcje-lista input{margin-top:3px}
.sekcje-lista .male{grid-column:2}
/* ramka z wersja HTML raportu — tyle, ile raport, bez wlasnego przewijania */
.ramka-raportu{width:100%;min-height:520px;border:1px solid var(--kresk);
  border-radius:10px;background:#eef3f9}
.raporty-archiwum td{vertical-align:top}
.raporty-archiwum .stan-ok{color:var(--ok,#1a7f37)}
.raporty-archiwum .stan-blad{color:#c62828}
.raporty-archiwum .stan-czeka{color:var(--cichy,#66788a)}

/* Sygnaly jako SPRAWY: jeden towar = jedna karta (08.09.2026). Naglowek
   niesie tozsamosc towaru i rozpietosc cen, lista pod nim — pojedyncze
   spostrzezenia. Kwota w naglowku to NAJWIEKSZA z nich, nie suma: kwoty
   sygnalow tego samego towaru nakladaja sie na siebie. */
.sprawy{display:grid;gap:14px;margin-bottom:22px}
/* ⛔ KARTA SPRAWY = ZDANIE · LICZBA · AKCJA (Z27, 09.09.2026). Układ
   z czternastoma polami i tą samą kwotą w trzech miejscach właściciel
   ocenił tak: „informacyjnie UI to porażka" — czytelnik składał wniosek
   sam. Teraz każda część karty ma jedno zadanie i swoją wagę wizualną. */
.sprawa{padding:16px 18px}
.sprawa-glowa{display:flex;gap:16px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap}
.sprawa-kto{flex:1 1 420px;min-width:240px}
.sprawa-kto h3{margin:0;font-size:17px;line-height:1.3}
.sprawa-dostawca{margin:2px 0 0;color:var(--slaby)}
.sprawa-dostawca a{color:var(--slaby)}
.sprawa-zdanie{margin:9px 0 0;font-size:16px;line-height:1.45}
/* procent i „od kiedy" w rogu: to jest CO SIĘ STAŁO w dwóch słowach,
   czytane wcześniej niż zdanie — dlatego osobno, nie w akapicie */
.sprawa-chip{flex:0 0 auto;text-align:center;border-radius:10px;
  padding:7px 13px;min-width:96px;background:rgba(255,107,107,.13);
  color:var(--zly)}
.sprawa-chip b{display:block;font-size:20px;line-height:1.15}
.sprawa-chip span{font-size:11.5px;opacity:.9}
/* ⛔ KWOTA Z DZIAŁANIEM. „wyjaśniłbym lepiej, co znaczy te 372,54" —
   więc pod liczbą stoi zdanie po polsku, a pod nim rachunek, z którego
   ona wyszła. Osobne tło, żeby nie zlewała się z cenami w zdaniu. */
.sprawa-pieniadz{display:flex;gap:16px;align-items:center;margin-top:13px;
  padding:11px 15px;border-radius:10px;background:var(--karta2);
  border:1px solid var(--kresk)}
.sprawa-pieniadz .kwota{font-size:26px;font-weight:700;color:var(--dobry);
  white-space:nowrap;line-height:1.1}
.sprawa-pieniadz .co{font-size:14.5px;line-height:1.35}
.sprawa-pieniadz .jak{margin-top:3px;color:var(--slaby)}
.sprawa-akcje{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  margin-top:13px}
.przycisk-glowny,.przycisk-drugi{display:inline-block;padding:9px 15px;
  border-radius:8px;font-size:14px;font-weight:600;line-height:1.2}
.przycisk-glowny{background:var(--akcent);color:#fff}
.przycisk-drugi{color:var(--akcent);border:1px solid var(--kresk)}
.wycisz-sprawe{display:inline-block}
.wycisz-sprawe summary{cursor:pointer;color:var(--slaby);padding:9px 6px;
  font-size:14px;list-style:none}
.wycisz-sprawe[open] summary{color:var(--tekst)}
.wycisz-sprawe form{margin-top:6px;gap:8px;align-items:center}
.wycisz-sprawe input[name=powod]{flex:1 1 220px;max-width:340px}
.sprawa-pod{margin:9px 0 0;line-height:1.4}
.sprawa-dowod{margin-top:11px;border-top:1px dashed var(--kresk);
  padding-top:9px}
.sprawa-dowod summary{cursor:pointer;color:var(--akcent);font-size:13.5px}
.sprawa-lista{margin-top:9px;width:100%}
.sprawa-lista td{vertical-align:top;border-top:1px solid var(--kresk)}
.sprawa-zl{white-space:nowrap;width:1%}
.drobne-sprawy{margin-bottom:22px}
.drobne-sprawy summary{cursor:pointer;color:var(--slaby);font-size:14px}
.drobne-sprawy .sprawy{margin-top:12px}
@media (max-width:760px){
  .sprawa-pieniadz{flex-direction:column;align-items:flex-start;gap:6px}
  .sprawa-chip{align-self:flex-start}
}


/* ==== B26 seria 1 — audyt mobilny „abstra" 14.09.2026 =====================
   M01: pozycje zapytania jako KARTY poniżej 760 px. Tabela miała 801 px
   w 375 px ekranu, ilość zaczynała się przy x≈509 — fokus na ilości
   przesuwał cały dokument o 208 px. Powyżej 760 px tabela zostaje
   (w `.tabela-szeroka`, żeby tablet przewijał ją w sobie). */
.pole-nazwa{width:100%;min-width:220px}
/* Zwijacz pozycji zapytania i skrót do listów (właściciel 07.10.2026:
   „muszę scrollować przez 91 pozycji"). Na telefonie skrót znika — tam
   listy są osobnym etapem (zapytanie-etapy.js). */
.zwijacz-pozycji > summary{font-size:14px;color:var(--tekst);margin:2px 0 10px}
.do-listow{font-size:13px;font-weight:400;margin-left:10px}
.tylko-mobilnie{display:none}
@media (max-width:760px){
  .tylko-mobilnie{display:inline}
  .do-listow{display:none}
  .tabela-szeroka > .pozycje-zapytania{min-width:0}
  .pozycje-zapytania,.pozycje-zapytania tbody,.pozycje-zapytania tr,
  .pozycje-zapytania td{display:block;width:100%;box-sizing:border-box}
  .pozycje-zapytania tr.naglowek-pozycji{display:none}
  .pozycje-zapytania tr{border:1px solid var(--kresk);border-radius:10px;
    padding:10px 12px;margin:0 0 10px;background:var(--karta)}
  .pozycje-zapytania td{padding:4px 0;text-align:left;border:0}
  .pozycje-zapytania td[data-etykieta]::before{content:attr(data-etykieta);
    display:block;font-size:12px;color:var(--slaby);margin-bottom:2px}
  .pozycje-zapytania td.pole-ilosci{display:flex;flex-wrap:wrap;gap:8px;
    align-items:center}
  .pozycje-zapytania td.pole-ilosci::before{flex:1 1 100%}
  .pozycje-zapytania input[name=il]{width:110px}
  .pozycje-zapytania input[name=poz_jm]{width:110px}
  .pozycje-zapytania .pole-nazwa{min-width:0}
  .pozycje-zapytania label.pole-wybor{display:inline-flex;gap:8px;align-items:center;
    min-height:44px;cursor:pointer}
  /* M08: tekst pól 16 px (iOS bez zoomu), ważne kontrolki ~44 px */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{
    font-size:16px;min-height:44px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  button:not(.cichy):not(.konto-przycisk),.btn,input[type=submit]{min-height:44px}
  label{cursor:pointer}
}
/* M03: wykres liczony dla dostępnej szerokości — punkty dostępne dotykiem
   i z klawiatury; opis punktu pod wykresem zamiast samego <title>. */
.wykres circle:focus{outline:none;stroke:var(--akcent);stroke-width:3}
.wykres .dotyk{fill:transparent;stroke:none;cursor:pointer}
.wykres-ramka{margin:0}
.wykres-opis{margin:6px 0 0;padding:8px 12px;border:1px solid var(--kresk);
  border-radius:8px;background:var(--karta);font-size:14px}
.wykres-opis[hidden]{display:none}


/* ==== B26 seria 2 — audyt mobilny „abstra" 14.09.2026 =====================
   M05: zwarty nagłówek na telefonie — trzy cele + „Więcej", stan KSeF w jednej
   linii. Desktop bez zmian (details ukryte, pełne zdanie stanu widoczne). */
.wiecej-menu{display:none}
.stan-krotki{display:none}
@media (max-width:760px){
  nav a.nav-dalsza{display:none}
  .wiecej-menu{display:block;position:relative;flex:none;margin-left:2px}
  .wiecej-menu summary{list-style:none;cursor:pointer;padding:8px 10px;border-radius:8px;
    color:var(--slaby);white-space:nowrap;font-size:14px;min-height:44px;
    display:inline-flex;align-items:center}
  .wiecej-menu summary::-webkit-details-marker{display:none}
  .wiecej-menu[open] summary{background:var(--tlo);color:var(--tekst)}
  .wiecej-menu .lista{position:absolute;right:0;top:100%;z-index:30;min-width:200px;
    background:var(--karta);border:1px solid var(--kresk);border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.28);padding:6px}
  .wiecej-menu .lista a{display:block;padding:11px 12px;border-radius:8px;
    text-decoration:none;color:var(--tekst);min-height:44px;box-sizing:border-box}
  .wiecej-menu .lista a:hover{background:var(--tlo)}
  .stan-pelny{display:none}
  .stan-krotki{display:inline}
  .pasek-stan.globalny{padding:6px 12px;font-size:13px;gap:6px 8px;flex-wrap:wrap}
  .pasek-stan.globalny .stan-tekst{display:inline-flex;align-items:center;gap:6px;
    flex:1 1 100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* przełącznik i przyciski KSeF (Synchronizuj, Dograj faktury) w JEDNYM
     zwartym rzędzie pod skrótem stanu — na koncie z KSeF były to trzy
     wielkie przyciski na dwóch wierszach (telefon właściciela 14.09) */
  .pasek-stan.globalny .rzad{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;
    align-items:center}
  .pasek-stan.globalny .rzad button,.pasek-stan.globalny .rzad .przelacznik-kwot button{
    min-height:32px;padding:4px 10px;font-size:13px}
  .pasek-stan.globalny .rzad form{margin:0}
  /* „Więcej" w TYM SAMYM rzędzie co pasek sekcji: pasek oddaje mu miejsce
     (flex 1 1 0 zamiast 1 1 100%, które spychało details do nowego wiersza) */
  .pasek-nawigacji{flex:1 1 0}
}
/* ==== Zwijane TYLKO na telefonie: `.zwijane-mobilnie` ======================
   <wrapper class="zwijane-mobilnie …">
     <button class="zwijane-guzik">…</button>   ← widoczny tylko poniżej 760 px
     <wrapper class="zwijane-tresc">…</wrapper>  ← desktop: display:contents
   Desktop widzi treść WPROST — wrapper i treść nie mają własnych pudełek,
   więc dzieci wpadają do siatki/rzędu rodzica dokładnie jak przed B26.
   Telefon: blok, treść schowana, klasa `otwarte` (app.js) ją pokazuje.

   ⛔ NIE `<details open>` + `display:contents`. Chrome ≥ 131 (także ten
   z telefonu właściciela) daje treści details WŁASNE pudełko
   (::details-content), więc display:contents na details niczego nie
   spłaszcza: przyciski KSeF stanęły w kolumnie, pasek stanu urósł do
   ~100 px, a pola filtrów wypadły z siatki — na desktopie (Windows,
   właściciel 15.09.2026 ~00:55: „myślałem, że zmiany mobile nie dotykają
   Windowsa"). Sprawdzone w Chromium 152: details{display:contents} →
   B pod A; zwykły span{display:contents} → B obok A. */
.zwijane-mobilnie,.zwijane-mobilnie > .zwijane-tresc{display:contents}
.zwijane-mobilnie > .zwijane-guzik{display:none}
/* ⛔ `.akcje-ksef` (przyciski KSeF w pasku stanu) TEŻ bez własnego pudełka:
   jako zwykły span mieścił dwa blokowe <form>, więc „Synchronizuj” stawało
   nad „Dograj faktury” i pasek rósł do 100 px — to samo, co widział
   właściciel 15.09 ~00:55; zmierzone na prod po 3e8ab6c z wstrzykniętymi
   przyciskami (demo ich nie ma, więc pomiar na demie tego nie łapał).
   Bramka: tests/test_pasek_stanu_jeden_rzad.py. */
.akcje-ksef{display:contents}
/* M06: wyszukiwarka tuż pod tytułem, reszta filtrów w „Filtry (n)". */
@media (max-width:760px){
  main{display:flex;flex-direction:column}
  main > h1{order:-3}
  main > .pod{order:-2}
  main > form.filtry-siatka, main > form.szuk{order:-1;margin-bottom:12px}
  .filtry-wiecej{display:block;grid-column:1/-1}
  .filtry-wiecej > .zwijane-guzik{display:flex;align-items:center;width:100%;
    min-height:44px;padding:0;border:0;background:none;font:inherit;
    font-weight:600;color:var(--akcent);cursor:pointer;text-align:left}
  .filtry-wiecej > .zwijane-guzik::before{content:"▸ ";color:var(--slaby)}
  .filtry-wiecej.otwarte > .zwijane-guzik::before{content:"▾ "}
  .filtry-wiecej > .zwijane-tresc{display:none}
  .filtry-wiecej.otwarte > .zwijane-tresc{display:flex;flex-direction:column;
    gap:8px;margin-top:4px}
  .filtry-wiecej.otwarte > .zwijane-tresc > label{display:flex}
}
/* M07: rekordy jako karty poniżej 760 px — etykiety z nagłówka tabeli
   (app.js przepisuje `th` do `data-etykieta` każdej komórki), akcja w tej
   samej karcie co rekord, długie listy porcjowane (app.js). Desktop: tabela. */
@media (max-width:760px){
  .tabela-szeroka > table.karty-mobilne{min-width:0}
  table.karty-mobilne,table.karty-mobilne tbody,table.karty-mobilne tr,
  table.karty-mobilne td{display:block;width:100%;box-sizing:border-box}
  table.karty-mobilne thead,table.karty-mobilne tr.naglowek-tabeli{display:none}
  table.karty-mobilne tr{border:1px solid var(--kresk);border-radius:10px;
    padding:8px 12px;margin:0 0 8px;background:var(--karta)}
  table.karty-mobilne tr[hidden]{display:none}
  table.karty-mobilne td{padding:3px 0;text-align:left;border:0;display:flex;
    gap:10px;align-items:baseline;flex-wrap:wrap}
  table.karty-mobilne td[data-etykieta]::before{content:attr(data-etykieta);
    flex:0 0 34%;font-size:12px;color:var(--slaby)}
  table.karty-mobilne td:empty{display:none}
  table.karty-mobilne td.l{text-align:left}
  table.karty-mobilne td form{display:inline-block}
  .pokaz-wiecej{width:100%;margin:4px 0 12px}
  /* przewijana ramka z przyklejonym nagłówkiem nie ma sensu dla kart */
  .tabela-przewijana:has(> table.karty-mobilne){max-height:none;overflow:visible;border:0}
  table.karty-mobilne td .iskra{max-width:100%}
  table.karty-mobilne td input[type=checkbox]{margin:0}
}
/* M10: faktura na telefonie — marginesy 12–16 px zamiast ~130, zagnieżdżone
   „kartki" bez własnych ramek; wydruk ma osobne style (bez zmian). */
@media (max-width:760px){
  .dokument{padding:14px 12px;margin:8px 0 24px;border-radius:8px}
  .dokument .karty{margin:12px 0 14px}
  .dokument .karta{padding:10px 12px}
  .dokument h1{font-size:20px}
}
/* M11: „Dlaczego?" — rozwijane uzasadnienie zamiast samego `title` */
details.dlaczego{display:inline-block;margin-left:6px;font-size:12px}
details.dlaczego > summary{cursor:pointer;color:var(--akcent);list-style:none;
  display:inline;text-decoration:underline dotted}
details.dlaczego > summary::-webkit-details-marker{display:none}
details.dlaczego[open] > div{margin-top:4px;max-width:36ch;white-space:normal}
/* M13: kwota z jednostką w jednej linii — liczba i „zł netto" nie rozjeżdżają
   się w dwa wiersze o tej samej wadze; na wąskiej karcie mniejsza liczba. */
.karta .liczba{white-space:nowrap;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.karta .liczba .jednostka-kwoty{white-space:nowrap}
@media (max-width:760px){
  .karta .liczba{font-size:clamp(18px,6vw,25px)}
  .karty{grid-template-columns:1fr 1fr}
  .karta{padding:10px 12px}
}
@media (max-width:400px){ .karty{grid-template-columns:1fr} }

/* ==== B26 seria 3 — M12: zapytanie w trzech etapach (tylko telefon) ======
   Sekcje `.etap` tworzy zapytanie-etapy.js; bez skryptu i na desktopie
   strona jest jednym formularzem jak dotąd. */
@media (max-width:760px){
  .etapy{display:flex;gap:6px;margin:8px 0 12px;position:sticky;top:0;z-index:8;
    background:var(--tlo);padding:6px 0}
  .etap-przycisk{flex:1 1 0;min-height:44px;padding:6px 8px;font-size:13px;
    line-height:1.2;text-align:left;border:1px solid var(--kresk);background:var(--karta);
    color:var(--slaby);border-radius:10px}
  .etap-przycisk .nr{display:inline-block;width:20px;height:20px;border-radius:50%;
    background:var(--kresk);color:var(--tekst);text-align:center;line-height:20px;
    font-weight:600;margin-right:4px}
  .etap-przycisk.on{color:var(--tekst);border-color:var(--akcent)}
  .etap-przycisk.on .nr{background:var(--akcent);color:#fff}
  .etap{display:none}
  .etap.aktywny{display:block}
  .etap-stopka{display:flex;justify-content:space-between;gap:8px;margin:16px 0 24px}
  .etap-stopka button{min-height:44px}
  details.tresc-listu{margin:8px 0}
  details.tresc-listu > summary{cursor:pointer;color:var(--akcent);min-height:44px;
    display:flex;align-items:center}
  details.tresc-listu textarea{width:100%;min-height:220px}
}


/* ==== Menu mobilne v2 (właściciel 15.09.2026: „jedno ładne menu rozwijane") ==
   Poniżej 760 px pasek sekcji, „Więcej" i drugi rząd znikają; jest jedna
   belka „☰ Sekcja › Ekran" rozwijająca pełną mapę ekranów. Desktop: bez zmian. */
.menu-mobilne{display:none}
@media (max-width:760px){
  .pasek-nawigacji,.wiecej-menu,.drugi-rzad{display:none !important}
  .menu-mobilne{display:block;order:99;flex:1 1 100%;margin-top:4px}
  .menu-mobilne > summary{list-style:none;display:flex;align-items:center;gap:10px;
    min-height:44px;padding:6px 10px;border:1px solid var(--kresk);border-radius:10px;
    background:var(--karta);cursor:pointer;font-weight:600;color:var(--tekst)}
  .menu-mobilne > summary::-webkit-details-marker{display:none}
  .menu-mobilne .hamburger{font-size:18px;line-height:1;color:var(--akcent)}
  .menu-mobilne .menu-sciezka{flex:1 1 auto;min-width:0;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .menu-mobilne .menu-strzalka{color:var(--slaby)}
  .menu-mobilne[open] > summary{border-radius:10px 10px 0 0}
  .menu-mobilne[open] .menu-strzalka{transform:rotate(180deg)}
  .menu-lista{border:1px solid var(--kresk);border-top:0;border-radius:0 0 10px 10px;
    background:var(--karta);padding:6px 8px 10px}
  .menu-sekcja{padding:6px 4px;border-top:1px solid var(--kresk)}
  .menu-sekcja:first-child{border-top:0}
  .menu-naglowek{display:block;font-weight:600;padding:8px 6px;color:var(--tekst);
    text-decoration:none;min-height:36px;box-sizing:border-box}
  a.menu-naglowek:hover{color:var(--akcent)}
  .menu-sekcja.on > .menu-naglowek{color:var(--akcent)}
  .menu-podstrony{display:flex;flex-wrap:wrap;gap:6px;padding:0 2px 4px}
  .menu-podstrony a{display:inline-flex;align-items:center;min-height:38px;
    padding:6px 12px;border:1px solid var(--kresk);border-radius:20px;
    background:var(--tlo);color:var(--tekst);text-decoration:none;font-size:14px}
  .menu-podstrony a.on{background:var(--akcent);border-color:var(--akcent);color:#fff}
  .menu-podstrony a .odznaka{margin-left:6px}
  /* karty: dotknięcie nie ma prawa rysować „białego prostokąta" — reguła
     tr:hover td{background} z tabel desktopowych malowała na karcie każdą
     komórkę osobno (zrzut właściciela 15.09, Historia/Sygnały) */
  table.karty-mobilne tr:hover td,table.karty-mobilne tr:active td{background:transparent}
  table.karty-mobilne td.wykres-kom{width:auto;padding:3px 0}
  table.karty-mobilne td.wykres-kom .iskra{margin-left:auto}
}


/* ==== Nagłówek mobilny v3 (właściciel 15.09.2026 00:48) — naglowek-v3 =======
   Trzy zwarte rzędy: [logo małe · Zapytaj · konto] / [☰ Sekcja › Ekran] /
   [● stan KSeF … TEST ⋯]. Koperta znika (licznik wiadomości przy koncie),
   netto/brutto i przyciski KSeF pod „⋯". Desktop bez zmian. */
@media (max-width:760px){
  header{padding:8px 12px 8px;gap:8px;row-gap:6px}
  .logo{font-size:17px;flex:none}
  /* konto w TYM SAMYM rzędzie co logo — kurczy się (nazwa firmy
     z wielokropkiem), zamiast spadać do drugiego wiersza */
  .stopka{flex:1 1 0;min-width:0;margin-left:auto;gap:6px;justify-content:flex-end}
  .ikona-poczty{display:none}
  .konto-przycisk{min-height:36px;padding:4px 8px}
  .stopka .firma-nazwa{max-width:14ch}
  .konto-przycisk .odznaka.tylko-mobilnie{display:inline-block;margin-left:4px}
  .menu-mobilne{margin-top:0}
  /* pasek stanu: jedna linia — skrót stanu (z wielokropkiem), plakietka,
     „⋯"; po dotknięciu „⋯" przełącznik i przyciski KSeF w NOWYM wierszu
     pod spodem, na całą szerokość. `.rzad` i wrapper są display:contents,
     więc przycisk i panel są wprost dziećmi paska (wrap robi resztę). */
  .pasek-stan.globalny{padding:5px 12px;gap:4px 6px;flex-wrap:wrap;align-items:center}
  .pasek-stan.globalny > .odznaka{order:1;flex:none;font-size:10px !important;
    padding:1px 5px !important;letter-spacing:0 !important}
  .pasek-stan.globalny .stan-tekst{order:0;flex:1 1 0;min-width:0}
  .pasek-stan.globalny .rzad,.pasek-stan.globalny .narzedzia-stanu,
  .pasek-stan.globalny .akcje-ksef{display:contents}
  .pasek-stan.globalny .narzedzia-stanu > .zwijane-guzik{order:2;flex:none;
    display:inline-flex;align-items:center;justify-content:center;width:36px;
    height:32px;min-height:0;padding:0;border:1px solid var(--kresk);
    border-radius:8px;background:none;color:var(--tekst);font-size:18px;
    line-height:1;cursor:pointer}
  .pasek-stan.globalny .narzedzia-stanu.otwarte > .zwijane-guzik{color:var(--akcent);
    border-color:var(--akcent)}
  .pasek-stan.globalny .narzedzia-stanu > .zwijane-tresc{display:none}
  .pasek-stan.globalny .narzedzia-stanu.otwarte > .zwijane-tresc{order:3;flex:1 1 100%;
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:2px}
  .pasek-stan.globalny .narzedzia-stanu .zwijane-tresc form{margin:0}
}


/* ==== Strona startowa: hero v4 (właściciel 15/16.09.2026) — hero-v4 =========
   Lewa kolumna w trzech strefach (problem → trzy korzyści → decyzja), prawa —
   kafelek z trzema sprawami na danych przykładowych (`_kafelek.html`,
   `core/kafelek.py`, `static/start.js`). Okno ma STAŁĄ wysokość na desktopie,
   list i faktura wjeżdżają jako nakładka wewnątrz okna, a lewa kolumna
   rozciąga się do tej samej wysokości — nic poza kafelkiem się nie rusza
   (właściciel 15.09: „okienko skacze, przerysowuje całą stronę"). */
:root{--hero-akcent:#83bcff;--hero-zysk:#8fddb4;
  --kf-zly-tlo:rgba(255,107,107,.14);--kf-dobry-tlo:rgba(62,207,142,.14);
  --kf-uwaga-tlo:rgba(255,182,72,.14);--kf-akcent-tlo:rgba(77,163,255,.14)}
@media (prefers-color-scheme: light){ :root{--hero-akcent:#2866b4;--hero-zysk:#1c6b47} }
.lp-hero{max-width:1200px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;
  align-items:stretch;padding:48px 24px 56px}
.hero-lewa{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.hero-nadtytul{display:flex;align-items:center;gap:8px;margin:0 0 18px;text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;font-weight:650;color:var(--slaby)}
.hero-nadtytul > span{width:6px;height:6px;border-radius:50%;background:var(--akcent);
  box-shadow:0 0 0 4px var(--kf-akcent-tlo)}
.lp-hero h1{font-size:38px;line-height:1.14;letter-spacing:-1px;font-weight:700;margin:0 0 18px}
.lp-hero h1 > span{color:var(--hero-akcent)}
.hero-wstep .lp-lead{font-size:15px;line-height:1.8;max-width:none;margin:0}
.hero-etykieta{display:flex;align-items:center;gap:14px;text-transform:uppercase;font-size:10.5px;
  letter-spacing:.1em;color:var(--slaby);font-weight:650;margin:0 0 4px}
.hero-etykieta > span{height:1px;flex:1;background:var(--kresk)}
.hero-wartosci{list-style:none;padding:0;margin:0}
.hero-wartosci li{display:grid;grid-template-columns:40px 1fr 20px;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--kresk)}
.hero-wartosci li:last-child{border-bottom:0;padding-bottom:0}
.hero-ikona{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:var(--kf-akcent-tlo);color:var(--hero-akcent);border:1px solid rgba(77,163,255,.18)}
.hero-ikona svg{width:21px;height:21px}
.hero-wartosci h2{font-size:15px;line-height:1.4;font-weight:650;margin:0 0 5px;letter-spacing:0}
.hero-wartosci p{font-size:12.5px;line-height:1.65;color:var(--slaby);margin:0;max-width:none}
.hero-nr{font-size:10px;font-variant-numeric:tabular-nums;line-height:1.4;color:var(--slaby);
  opacity:.8;padding-top:5px;text-align:right}
.hero-oplacalnosc .hero-ikona{color:var(--hero-zysk);background:var(--kf-dobry-tlo);border-color:rgba(62,207,142,.22)}
.hero-wartosci .hero-przyklad{margin-top:6px;line-height:1.8}
.hero-przyklad strong{font-size:14px;font-weight:650;color:var(--hero-zysk);white-space:nowrap}
.hero-przyklad > span{margin:0 4px;color:var(--slaby)}
.hero-wartosci .hero-dopisek{font-size:10.5px;line-height:1.5;margin-top:4px}
.hero-akcje{padding-top:20px;border-top:1px solid var(--kresk)}
.hero-przyciski{display:grid;grid-template-columns:1.12fr 1fr;gap:12px}
.hero-przyciski .lp-btn{display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:10px;width:auto;text-align:left;padding:13px 16px;min-height:64px;line-height:1.3;font-size:14px}
.hero-przyciski .lp-btn b{display:block;font-weight:650}
.hero-przyciski .lp-btn small{display:block;font-size:11px;font-weight:400;margin-top:3px;opacity:.9}
.hero-przyciski .lp-btn-cichy small{color:var(--slaby)}
.hero-strzalka{font-size:19px;line-height:1;font-weight:400}
.hero-pewnosc{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:11px;color:var(--slaby);margin-top:12px}
.hero-platny{font-size:11.5px;color:var(--slaby);margin:10px 0 0;line-height:1.7}
.hero-platny strong{font-weight:600;color:var(--tekst)}
.hero-platny a{color:var(--hero-akcent);text-decoration:underline;text-underline-offset:3px;margin-left:4px}

/* — okno kafelka — */
.lp-okno.kafelek{position:relative;display:flex;flex-direction:column;height:auto;min-height:690px;min-width:0}
.lp-okno.kafelek .lp-okno-pasek{flex:none}
.lp-okno.kafelek .lp-okno-tresc{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.kf-przyklad{margin-left:auto;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.kf-towary{display:flex;gap:6px;margin:0 0 14px}
.kf-towary button{position:relative;flex:1 1 0;padding:8px 6px 10px;border-radius:9px;border:1px solid var(--kresk);
  background:var(--karta2);color:var(--slaby);font-size:13px;font-weight:600;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.kf-towary button:hover{filter:none;color:var(--tekst)}
.kf-towary button[aria-pressed="true"]{color:var(--tekst);border-color:var(--akcent);background:var(--kf-akcent-tlo)}
.kf-postep{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--akcent);transition:width .1s linear}
.kf-glowa{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kf-kto h3{margin:0 0 2px;font-size:16px;line-height:1.3}
.kf-dostawca{margin:0;font-size:12.5px;color:var(--slaby)}
.kf-zdanie{margin:8px 0 0;font-size:13.5px;line-height:1.5}
.kf-chip{flex:none;text-align:right;padding:8px 12px;border-radius:10px;background:var(--karta2);border:1px solid var(--kresk)}
.kf-chip b{display:block;font-size:20px;line-height:1.1}
.kf-chip.zly b{color:var(--zly)} .kf-chip.dobry b{color:var(--dobry)} .kf-chip.uwaga b{color:var(--uwaga)}
.kf-chip span{font-size:11.5px;color:var(--slaby)}
.kf-wykres{width:100%;height:auto;margin:10px 0 2px;display:block}
.kf-os{stroke:var(--kresk);stroke-width:1}
.kf-baza{stroke:var(--slaby);stroke-width:1;stroke-dasharray:4 4;opacity:.6}
.kf-linia{fill:none;stroke:var(--akcent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.kf-pkt{fill:var(--akcent);stroke:var(--karta);stroke-width:2}
.kf-pkt.zly{fill:var(--zly)} .kf-pkt.dobry{fill:var(--dobry)}
.kf-tekst{font-size:11px;fill:var(--slaby)}
.kf-etykieta{font-size:11.5px;font-weight:700;fill:var(--zly)} .kf-etykieta.dobry{fill:var(--dobry)}
.kf-halo{fill:var(--zly);opacity:.18} .kf-halo.dobry{fill:var(--dobry)}
.kf-faktury{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;margin:8px 0 0;padding-bottom:2px}
.kf-faktury button{flex:1 0 112px;text-align:left;padding:7px 9px;border-radius:9px;border:1px solid var(--kresk);
  background:var(--karta);color:var(--tekst);font-size:12.5px;line-height:1.35;font-weight:400;cursor:pointer}
.kf-faktury button:hover{filter:none;border-color:var(--akcent)}
.kf-faktury button b{display:block;font-size:12px}
.kf-faktury button small{color:var(--slaby)}
.kf-faktury button.zly{border-color:var(--zly);background:var(--kf-zly-tlo)}
.kf-faktury button.dobry{border-color:var(--dobry);background:var(--kf-dobry-tlo)}
.kf-pieniadz{display:flex;gap:14px;align-items:baseline;margin:12px 0 0;padding:10px 12px;border-radius:10px;
  background:var(--karta2);border:1px solid var(--kresk)}
.kf-kwota{font-size:26px;font-weight:600;white-space:nowrap}
.kf-kwota.zly{color:var(--zly)} .kf-kwota.dobry{color:var(--dobry)}
.kf-co{font-size:13.5px} .kf-jak{font-size:12.5px;color:var(--slaby);margin-top:2px}
.kf-rynek{margin:10px 0 0;padding:8px 10px;border-radius:10px;border:1px solid var(--kresk);font-size:13px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kf-akcje{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.kf-glowny{display:inline-block;padding:9px 16px;border-radius:9px;border:0;background:var(--akcent);color:#fff;font-weight:600;cursor:pointer}
.kf-glowny:hover{filter:brightness(1.1);text-decoration:none}
a.kf-link{display:inline-block;color:#fff}
.kf-drugi{padding:9px 14px;border-radius:9px;border:1px solid var(--kresk);background:var(--karta2);color:var(--tekst);
  font-weight:400;cursor:pointer}
.kf-drugi:hover{filter:none;border-color:var(--akcent)}
/* panele: nakładka w oknie (desktop), w toku strony (telefon) */
.kf-panel{position:absolute;left:0;right:0;bottom:0;top:41px;overflow:auto;overscroll-behavior:contain;
  border-top:1px solid var(--kresk);padding:14px 16px 16px;background:var(--karta2);animation:kf-wjazd .28s ease-out}
@keyframes kf-wjazd{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.kf-panel h4{margin:0 0 8px;font-size:13.5px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.kf-panel h4 span{color:var(--slaby);font-weight:500;font-size:12.5px}
.kf-list{white-space:pre-wrap;font-size:13px;line-height:1.55;background:var(--karta);border:1px solid var(--kresk);
  border-radius:9px;padding:12px 14px}
.kf-list b{font-weight:600} .kf-nr{color:var(--akcent)} .kf-kw{color:var(--zly);font-weight:600}
.kf-adresaci{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px;font-size:12.5px}
.kf-adresaci span{padding:2px 9px;border-radius:20px;background:var(--karta);border:1px solid var(--kresk)}
.kf-uwaga{font-size:12px;color:var(--slaby);margin:8px 0 0}
.kf-dok{background:var(--karta);border:1px solid var(--kresk);border-radius:9px;padding:12px 14px;font-size:12.5px}
.kf-dok-naglowek{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.kf-dok table{width:100%;border-collapse:collapse;margin:0}
.kf-dok th,.kf-dok td{text-align:left;padding:5px 6px;border-top:1px solid var(--kresk);font-size:12.5px;background:none}
.kf-dok th{color:var(--slaby);font-weight:500;border-top:0}
.kf-dok td.l,.kf-dok th.l{text-align:right;white-space:nowrap}
.kf-dok tr.kf-podswietlony td{background:var(--kf-uwaga-tlo)}
.kf-dok tr.kf-podswietlony td:first-child{border-left:3px solid var(--uwaga);font-weight:600}
.kf-badany{display:block;font-size:11px;color:var(--slaby);font-weight:400}
.kf-dok tr.kf-wiersz-drogi td.cena{color:var(--zly);font-weight:700}
.kf-dok tr.kf-wiersz-dobry td.cena{color:var(--dobry);font-weight:700}
.kf-suma{text-align:right;margin-top:8px;font-weight:600}
.kf-dok-stopka{font-size:11.5px;color:var(--slaby);margin-top:6px}
.kf-panel .kf-akcje{margin-top:10px}
@media (min-width:901px) and (max-width:1140px){
  .lp-hero{gap:32px}.lp-hero h1{font-size:33px;letter-spacing:-.8px}
  .hero-wartosci li{gap:12px}.hero-wartosci h2{font-size:14px}
  .hero-przyciski .lp-btn{padding:12px 12px;font-size:13px}
}
@media (max-width:900px){
  .lp-hero{grid-template-columns:1fr;gap:22px;padding:28px 16px 36px;max-width:660px}
  .hero-lewa{display:contents}
  .hero-wstep{order:1}.lp-okno.kafelek{order:2;min-height:0}.hero-korzysci{order:3}.hero-akcje{order:4}
  .lp-okno.kafelek .lp-okno-tresc{overflow:visible}
  .kf-panel{position:static;margin:14px -16px -16px;top:auto;animation:none}
  .lp-hero h1{font-size:33px;line-height:1.16;letter-spacing:-.8px;margin-bottom:14px}
  .hero-wstep .lp-lead{font-size:14px;line-height:1.75}
  .hero-akcje{padding-top:18px}.hero-wartosci li{padding:14px 0}
}
@media (max-width:520px){
  .lp-hero{padding:24px 14px 30px;gap:18px}.lp-hero h1{font-size:29px;letter-spacing:-.7px}
  .hero-wartosci li{grid-template-columns:35px 1fr;gap:12px}.hero-ikona{width:35px;height:35px;border-radius:9px}
  .hero-ikona svg{width:19px;height:19px}.hero-nr{display:none}
  .hero-wartosci h2{font-size:14px}.hero-wartosci p{font-size:12px}
  .hero-przyciski{gap:9px}.hero-przyciski .lp-btn{font-size:12.5px;padding:12px 11px;gap:6px;min-height:60px}
  .hero-przyciski .lp-btn small{font-size:10px}.hero-strzalka{font-size:15px}
  .lp-okno.kafelek .lp-okno-tresc{padding:12px}
  .kf-rynek,.kf-akcje .kf-drugi,.kf-dostawca{display:none}
  .kf-zdanie{font-size:13px}
  .kf-faktury button{flex:1 0 31%;padding:7px 8px}
  .kf-faktury button small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .kf-panel{margin:12px -12px -12px;padding:12px}
  .kf-pieniadz{flex-direction:column;gap:4px}.kf-chip b{font-size:17px}
}
@media (prefers-reduced-motion: reduce){ .kf-panel{animation:none} }


/* ==== Poradnik (SEO, 16.09.2026) — artykuły pod /poradnik ==================== */
.artykul-strona{padding:36px 20px 56px}
.artykul{max-width:760px;margin:0 auto;font-size:16.5px;line-height:1.7}
.artykul-nad{font-size:13px;color:var(--slaby);margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em}
.artykul-nad a{color:var(--slaby)}
.artykul h1{font-size:34px;line-height:1.18;letter-spacing:-.5px;margin:0 0 14px;text-wrap:balance}
.artykul-lead{font-size:18px;line-height:1.6;color:var(--slaby);margin:0 0 26px}
.artykul h2{font-size:22px;line-height:1.3;margin:34px 0 10px;letter-spacing:-.2px}
.artykul p{margin:0 0 14px}
.artykul ul,.artykul ol{margin:0 0 16px;padding-left:24px}
.artykul li{margin:0 0 8px}
.artykul code{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--karta2);padding:1px 5px;border-radius:5px}
.artykul .ramka{background:var(--karta2);border:1px solid var(--kresk);border-radius:12px;padding:14px 18px;margin:0 0 18px}
.artykul .ramka p:last-child{margin-bottom:0}
.artykul .wzor{white-space:pre-wrap;font-family:inherit;font-size:15px;line-height:1.6;background:var(--karta);
  border:1px solid var(--kresk);border-left:4px solid var(--akcent);border-radius:10px;padding:16px 18px;margin:0 0 18px}
.artykul .tabela-mobilna{margin:0 0 16px}
.artykul table{width:100%;border-collapse:collapse;font-size:14.5px}
.artykul th,.artykul td{text-align:left;padding:8px 10px;border-top:1px solid var(--kresk);vertical-align:top}
.artykul th{color:var(--slaby);font-weight:500;border-top:0;font-size:13px}
.artykul td.l,.artykul th.l{text-align:right;white-space:nowrap}
.artykul-uwaga{font-size:13.5px;color:var(--slaby);border-top:1px solid var(--kresk);padding-top:12px;margin-top:26px}
.artykul-cta{margin:38px 0 0;padding:22px 24px;border-radius:14px;background:var(--karta);border:1px solid var(--kresk);box-shadow:var(--cien)}
.artykul-cta h2{margin:0 0 8px;font-size:21px}
.artykul-cta p{margin:0 0 14px}
.artykul-cta .lp-cta{margin:0;display:flex;flex-wrap:wrap;gap:10px}
.artykul-cta .lp-btn{width:auto;min-width:0}
.artykul-inne{margin-top:34px}
.artykul-inne h2{font-size:19px;margin:0 0 10px}
.artykul-inne ul{list-style:none;padding:0;margin:0}
.artykul-inne li{padding:10px 0;border-top:1px solid var(--kresk)}
.artykul-inne li span{display:block;font-size:13px;color:var(--slaby)}
.spis-kategoria{margin:26px 0 0}
.spis-kategoria h2{font-size:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--slaby);margin:0 0 6px}
.spis-kategoria ul{list-style:none;padding:0;margin:0}
.spis-kategoria li{padding:14px 0;border-top:1px solid var(--kresk)}
.spis-kategoria li a{font-size:19px;font-weight:600;line-height:1.3}
.spis-kategoria li p{margin:6px 0 4px;color:var(--slaby);font-size:15px}
.spis-kategoria li span{font-size:13px;color:var(--slaby)}
@media (max-width:640px){
  .artykul-strona{padding:24px 16px 40px}
  .artykul{font-size:16px}.artykul h1{font-size:27px}.artykul h2{font-size:20px}
  .artykul-lead{font-size:16.5px}.artykul .wzor{font-size:14px;padding:12px 14px}
}

/* ===== Zgoda na cookies reklamowe (Google Ads, Consent Mode v2) — _zgoda.html ===== */
.zgoda-baner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;
  background:var(--karta);border:1px solid var(--kresk);border-radius:14px;padding:16px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.zgoda-baner[hidden]{display:none}
.zgoda-tresc{flex:1 1 380px;min-width:0}
.zgoda-tresc b{display:block;margin-bottom:4px}
.zgoda-tresc p{margin:0;font-size:13px;line-height:1.45;color:var(--slaby)}
.zgoda-tresc a{color:var(--akcent)}
.zgoda-przyciski{display:flex;gap:10px;flex:0 0 auto}
.zgoda-przyciski .lp-btn{padding:10px 16px;font-size:14px}
@media (max-width:640px){.zgoda-baner{left:8px;right:8px;bottom:8px;padding:14px}
  .zgoda-przyciski{width:100%}.zgoda-przyciski .lp-btn{flex:1 1 0}}

/* ===== Film z demo na stronie głównej (#film) ===== */
.lp-film{padding:52px 22px 8px}
.lp-film-pod{text-align:center;color:var(--slaby);margin:-14px 0 22px;font-size:16px}
.lp-film-odtwarzacz{display:block;width:100%;max-width:960px;aspect-ratio:16/9;height:auto;margin:0 auto;
  border-radius:14px;border:1px solid var(--kresk);background:#000;box-shadow:0 24px 60px rgba(0,0,0,.30)}
.lp-film-dopisek{text-align:center;color:var(--slaby);font-size:14px;margin:14px 0 0}
.lp-film-dopisek a{color:var(--akcent)}