/* Lexend z własnego serwera (SIL Open Font License, public/assets/fonts/OFL.txt): bez zasobów z obcych serwerów. */
@font-face {
  font-family: "Lexend";
  src: url("fonts/lexend-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Paynook 2.0: klocki widoku. Odpowiedniki klocków z docs/projekt/narzedzia/plansze/kit.py,
   wartości z tokens.css (kopia docs/projekt/design-system/tokens.css). Kolory danych z kit.py
   (dane-najpierw.md, reguła 3): bez zieleni, żółci i czerwieni, bo te kolory znaczą stan. */
:root {
  --cat-1: #6D5AE6;
  --cat-2: #2A78D6;
  --cat-3: #1F6F8B;
  --cat-4: #5A5470;
  --cat-5: #3B2F9E;
  --bar: #8C86A3;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--violet-ink); }
a:hover { color: var(--violet-ink-hover); }
button, input, select, textarea { font-family: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }
.pn-ikona { flex-shrink: 0; }
.pn-ukryty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* #pn-schowek (komunikat aria-live w uklad.php, patrz testy/V2/Http/PublicTest) ma klasę .pn-ukryty powyżej, bez własnej reguły .pn-schowek */
.tylko-telefon { display: none !important; }

/* układ strony */
.pn-strona { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.pn-glowna { min-width: 0; display: flex; flex-direction: column; }
/* Treść zajmuje całą szerokość obok paska bocznego (prośba właściciela 13.10: szeroki ekran stał w połowie pusty); makiety
   rysowano na 1 180 px, więc węziej niż 1 428 px okna karty stoją jedna pod drugą (.pn-siatka2 niżej). */
.pn-tresc { width: 100%; padding: 28px 40px 56px; display: flex; flex-direction: column; gap: 24px; }

/* pasek boczny (kit.sidebar) */
.pn-pasek-boczny { position: sticky; top: 0; min-height: 100vh; background: var(--surface); border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 16px; }
.pn-logo { display: inline-flex; align-items: center; padding: 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.pn-logo span { color: var(--violet); }
.pn-przelacznik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--track); }
.pn-przelacznik__opcja { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--ink-muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.pn-przelacznik__opcja--aktywna { background: var(--surface); border-color: var(--violet); color: var(--violet-ink); font-weight: 600; }
.pn-szukaj { margin: 0; }
.pn-szukaj__pole { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-10); border: 1px solid var(--line-control); color: var(--ink-muted); font-size: 14px; }
.pn-szukaj__pole input { border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ink); width: 100%; }
.pn-nav { display: flex; flex-direction: column; gap: 2px; }
.pn-nav__pozycja { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-10); color: var(--ink-muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.pn-nav__pozycja--aktywna { background: var(--violet-soft); color: var(--violet-ink); font-weight: 600; }
/* strona czekająca na pierwsze dane (etap 11, O17; makiety Dom-przeglad-bez-danych i Firma-przeglad-bez-danych) */
.pn-nav__pozycja--czeka { color: var(--ink-faint); cursor: default; }
.pn-nav__czeka { margin-left: auto; font-size: 12px; font-weight: 400; }
.pn-nav__sekcje { margin: 4px 0 6px 22px; border-left: 2px solid var(--line-soft); display: flex; flex-direction: column; }
.pn-nav__sekcja { display: block; padding: 5px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-muted); font-size: 14px; text-decoration: none; }
.pn-nav__sekcja--biezaca { border-left-color: var(--violet); color: var(--ink); font-weight: 500; }
.pn-pasek-boczny__dol { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.pn-uzytkownik { display: flex; align-items: center; gap: 10px; padding: 8px 12px 0; margin-top: 6px; border-top: 1px solid var(--line-soft); }
.pn-uzytkownik form { margin: 0; }
.pn-uzytkownik__nazwa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-muted); }
.pn-awatar { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--line-control); font-size: 14px; font-weight: 600; }
.pn-awatar--duzy { width: 44px; height: 44px; font-size: 16px; }
.pn-link-przycisk { min-height: 32px; padding: 0; border: 0; background: none; color: var(--violet-ink); font-size: 14px; font-weight: 500; cursor: pointer; }

/* nagłówek strony (kit.page_header, kit.phone_month) */
.pn-naglowek { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.pn-naglowek__lewa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pn-naglowek__tytuly { display: flex; flex-direction: column; gap: 2px; }
.pn-naglowek__okruszek { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.pn-naglowek__tytul { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.pn-naglowek__stan { align-self: flex-end; padding-bottom: 4px; }
.pn-naglowek__prawa { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-muted); }
.pn-miesiac { display: flex; gap: 6px; align-self: flex-end; }
.pn-przycisk-ikony { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-10); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pn-przycisk-ikony:disabled { color: var(--bar); cursor: default; }
.pn-naglowek-telefonu { display: flex; flex-direction: column; gap: 8px; }
.pn-naglowek-telefonu__gora { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pn-naglowek-telefonu__tytul { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.pn-naglowek-telefonu__stan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pn-naglowek-telefonu__meta { font-size: 13px; color: var(--ink-muted); }

/* telefon: górny pasek i dolna nawigacja (kit.phone_doc) */
.pn-telefon-glowa { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.pn-telefon-glowa__rzad { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pn-telefon-glowa .pn-logo { min-height: 44px; padding: 0; font-size: 20px; }
.pn-telefon-glowa__akcje { display: flex; align-items: center; gap: 8px; }
.pn-telefon-glowa .pn-przelacznik__opcja { min-height: 44px; }
.pn-telefon-glowa .pn-przycisk--glowny { min-height: 44px; padding: 0 16px 0 12px; }
.pn-okragly { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.pn-telefon-dol { position: sticky; bottom: 0; }
.pn-telefon-nawigacja { background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 6px 4px 12px; }
.pn-telefon-nawigacja__pozycja { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; color: var(--ink-muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.pn-telefon-nawigacja__pozycja--aktywna { color: var(--violet-ink); font-weight: 600; }
.pn-telefon-nawigacja__pozycja--czeka { color: var(--ink-faint); gap: 2px; }
.pn-telefon-nawigacja__czeka { font-size: 11px; font-weight: 400; line-height: 1.2; }

/* drobne klocki */
.pn-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 14px; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.pn-chip--ok { background: var(--ok-soft); color: var(--ok); }
.pn-chip--wait { background: var(--wait-soft); color: var(--wait); }
.pn-chip--decide { background: var(--violet-soft); color: var(--violet-ink); }
.pn-chip--optional { background: var(--surface); color: var(--ink-muted); border: 1px dashed var(--line-control); }
.pn-chip--warn { background: var(--warn-soft); color: var(--warn); }
.pn-chip--bad { background: var(--bad-soft); color: var(--bad); }
.pn-chip--info { background: var(--wait-soft); color: var(--ink); }
.pn-chip--tag { background: var(--track); color: var(--ink); }
.pn-porownanie { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.pn-wiecej { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; font-size: 14px; font-weight: 500; color: var(--violet-ink); text-decoration: none; white-space: nowrap; }
/* Odstępy wokół przycisków (zgłoszenie 9.10: „buttony przyklejone”), w skali co 8 px: przycisk nigdy nie styka się z linią,
   ramką ani innym przyciskiem. Dół formularza ma 8 px nad przyciskiem i 16 px pod nim (.pn-formularz), stopka sekcji 8 px
   nad linią i pod nią (.pn-sekcja__stopka), przycisk w wierszu tabeli 4 px marginesu do 4 px wiersza, przyciski obok siebie
   co najmniej 8 px. Przycisk z tagiem button bez ramki przeglądarki. */
.pn-przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; }
button.pn-przycisk { font-family: inherit; cursor: pointer; }
.pn-przycisk--glowny { min-height: 40px; padding: 0 18px; gap: 8px; border: 0; background: var(--violet); color: var(--on-fill); font-size: 15px; font-weight: 600; }
.pn-przycisk--glowny:hover { background: var(--violet-ink); color: var(--on-fill); }
.pn-przycisk--drugi { min-height: 36px; padding: 0 14px; border: 1px solid var(--line-control); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; }
.pn-przycisk--pelny { min-height: 44px; font-size: 16px; }
.pn-meta { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.pn-rachunek { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.pn-rachunek--czesci > span { white-space: nowrap; }
.pn-liczba { font-weight: 500; white-space: nowrap; }
.pn-dwie-linie { display: flex; flex-direction: column; min-width: 0; }
.pn-dwie-linie__glowny { font-size: 15px; font-weight: 500; }
.pn-dwie-linie__pod { font-size: 13px; color: var(--ink-muted); }
.pn-prawa-uwaga { font-size: 14px; color: var(--ink-muted); text-align: right; }

/* wykresy */
.pn-pasek { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--track); }
.pn-pasek__wypelnienie { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.pn-pasek__kreska { position: absolute; top: -4px; width: 2px; height: 16px; border-radius: 1px; background: var(--ink); }
.pn-podzial { display: flex; gap: 2px; height: 10px; border-radius: var(--radius-pill); overflow: hidden; }
.pn-podzial__czesc { display: block; height: 100%; }
.pn-legenda { display: flex; flex-direction: column; }
.pn-legenda__wiersz { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; }
.pn-legenda__znak { width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; }
.pn-legenda__nazwa { flex: 1; color: var(--ink-muted); }
.pn-legenda__wartosc { font-weight: 500; white-space: nowrap; }
.pn-rachunek-wiersze { display: flex; flex-direction: column; }
.pn-rachunek-wiersz { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.pn-rachunek-wiersz > span:last-child { font-weight: 500; white-space: nowrap; color: var(--ink); }
.pn-rachunek-wiersz--suma { border-top: 1px solid var(--line-soft); padding-top: 4px; margin-top: 2px; color: var(--ink); font-weight: 600; }
.pn-rachunek-wiersz--suma > span:last-child { font-weight: 600; }
.pn-slupki { position: relative; display: flex; align-items: flex-end; gap: 6px; }
/* min-width: 0, bo kolumna nie może być szersza niż jej część wykresu: 11 kolumn z datami wychodziło na sąsiedni kafelek (12.10) */
.pn-slupki__kolumna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.pn-slupki__slupek { display: block; width: 100%; max-width: 28px; border-radius: 4px 4px 0 0; background: var(--bar); }
.pn-slupki__slupek--biezacy { background: var(--violet); }
.pn-slupki__podpis { min-height: 16px; font-size: 13px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; }
/* gęsty wykres (Wykresy::gesto): wąskie odstępy, skrajne podpisy przy krawędziach wykresu, nie wycentrowane pod wąską kolumną */
.pn-slupki--gesto { gap: 3px; }
.pn-slupki--gesto .pn-slupki__kolumna:first-child { align-items: flex-start; }
.pn-slupki--gesto .pn-slupki__kolumna:last-child { align-items: flex-end; }
.pn-slupki__kreska { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ink); opacity: 0.55; }

/* kafel, sekcja, tabela, lista spraw */
.pn-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pn-kafel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-16); padding: 24px 24px 12px; display: flex; flex-direction: column; gap: 12px; }
.pn-kafel__glowa { display: flex; flex-direction: column; gap: 4px; }
.pn-kafel__etykieta { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink-muted); }
.pn-kafel__liczba { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.pn-kafel__stopka { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-kafel--pusty { padding-bottom: 24px; }
.pn-szkielet { display: block; width: 60%; height: 28px; border-radius: var(--radius-8); background: var(--track); }
.pn-szkielet--wiersz { width: 100%; height: 12px; }
.pn-szkielet-blok { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 12px; }
/* Stan bez danych (etap 11, O18; szkielet i dom_bez_danych w konto.py): kafel z paskiem zamiast liczby i zdaniem pod nim,
   jedno zdanie odpowiedzi strony pod nagłówkiem, strefa pierwszego wyciągu z krokami z telefonu pod nią. */
.pn-kafel--bez-liczby { padding-bottom: 20px; }
.pn-zdanie-strony { font-size: 15px; line-height: 1.5; color: var(--ink); }
.pn-pierwszy-wyciag { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 8px; }
/* strefa pierwszego wyciągu jak w makiecie Dom-przeglad-bez-danych: ikona w kółku, zdanie tuż pod etykietą */
.pn-pierwszy-wyciag .pn-strefa__pole { gap: 12px; }
.pn-pierwszy-wyciag .pn-strefa__pole > .pn-ikona:first-child { box-sizing: content-box; width: 24px; height: 24px; padding: 12px; border-radius: var(--radius-pill); background: var(--violet-soft); color: var(--violet-ink); }
.pn-pierwszy-wyciag .pn-strefa__opis + .pn-meta, .pn-start .pn-strefa__opis + .pn-meta { margin-top: -10px; }
.pn-sekcja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-16); padding: 24px 24px 16px; display: flex; flex-direction: column; }
.pn-sekcja__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 6px; }
.pn-sekcja__tytul { font-size: 18px; line-height: 1.4; font-weight: 600; }
/* Stopka karty stoi przy jej dolnej krawędzi jak w kafelku: karty w jednym rzędzie mają równą wysokość (13.10), więc w niższej
   wolne miejsce zostaje między treścią a stopką, nie pod nią; 8 px nad linią daje element stojący tuż przed stopką. */
.pn-sekcja__stopka { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.pn-sekcja > :has(+ .pn-sekcja__stopka) { margin-bottom: 8px; }
/* Cel linku z kotwicą mignie obrysem: widać, dokąd zaprowadził link, także gdy strona prawie się nie przewija (9.10) */
.pn-sekcja:target, .pn-kafel:target { animation: pn-cel-kotwicy 1.6s ease-out; }
@keyframes pn-cel-kotwicy { from { box-shadow: 0 0 0 3px var(--violet); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .pn-sekcja:target, .pn-kafel:target { animation: none; box-shadow: 0 0 0 2px var(--violet); }
}
.pn-tabela { display: block; }
.pn-tabela__naglowek, .pn-tabela__wiersz { display: grid; grid-template-columns: var(--kolumny); gap: 12px; }
.pn-tabela__naglowek { padding: 4px 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.pn-tabela__wiersze > li { border-top: 1px solid var(--line-soft); }
.pn-tabela__wiersz { align-items: center; min-height: 40px; padding: 4px 0; font-size: 15px; }
.pn-tabela__wiersz .pn-przycisk, .pn-tabela__wiersz .pn-kopiuj { margin-block: 4px; }
.pn-tabela .pn-formularz { padding: 0; }
.pn-tabela .pn-formularz__dol { padding-top: 0; }
.pn-tabela__wiersz--link { color: var(--ink); text-decoration: none; }
.pn-do-lewej { min-width: 0; text-align: left; }
.pn-do-prawej { min-width: 0; text-align: right; }
.pn-sprawy > li { border-top: 1px solid var(--line-soft); }
.pn-sprawa { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; }
.pn-sprawa__opis { display: flex; flex-direction: column; }
.pn-sprawa__tytul { font-size: 15px; font-weight: 500; }
.pn-sprawa__meta { font-size: 14px; color: var(--ink-muted); }
.pn-sprawa__akcja { display: flex; }
.pn-sprawa__link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--violet-ink); }
/* Dwie karty (albo stosy kart) obok siebie: rząd ma jedną wysokość, bez schodów na dole (uwaga właściciela 13.10); w stosie każda
   karta dostaje równą część wolnego miejsca. Obok siebie tylko od 1 428 px okna (1 180 px treści z paskiem bocznym, jak w makietach);
   węziej jedna pod drugą, bo tabele z kolumnami z makiety nie mieszczą się w węższej karcie (przegląd 8.10). */
.pn-siatka2 { display: grid; grid-template-columns: var(--siatka, minmax(0, 1.45fr) minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1427px) {
  .pn-siatka2 { grid-template-columns: minmax(0, 1fr); }
}
.pn-stos { display: flex; flex-direction: column; gap: 16px; }
.pn-stos > * { flex: 1 1 auto; }
/* Wersja na komputer (div.tylko-komputer z Wspolne::naUrzadzenie) przekazuje wysokość rzędu karcie w środku. */
.pn-siatka2 > .tylko-komputer, .pn-stos > .tylko-komputer { display: flex; flex-direction: column; }
.pn-siatka2 > .tylko-komputer > *, .pn-stos > .tylko-komputer > * { flex: 1 1 auto; }

/* etap 3: znak koloru, wybór miesiąca, grupy „Co zrobiłem”, listy telefonu, cel, różnica „wyraźnie więcej” */
.pn-znak { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; flex-shrink: 0; }
.pn-wybor { display: inline-flex; align-items: center; gap: 8px; }
.pn-wybor__etykieta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-muted); }
.pn-wybor select { font: inherit; font-size: 14px; color: var(--ink); min-height: 32px; padding-block: 0; padding-left: 10px; border-radius: var(--radius-10); border: 1px solid var(--line-control); background-color: var(--surface); }
.pn-js .pn-bez-js { display: none; }
.pn-grupa { padding: 4px 0 12px; }
.pn-grupa + .pn-grupa { border-top: 1px solid var(--line-soft); }
.pn-grupa__glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pn-grupa__tytul { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; font-weight: 600; }
.pn-grupa__liczba { font-weight: 500; color: var(--ink-muted); }
.pn-lista { list-style: none; margin: 0; padding: 0; }
.pn-lista__naglowek { display: flex; justify-content: space-between; padding: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.pn-lista__pozycja { border-top: 1px solid var(--line-soft); }
.pn-lista__wiersz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 44px; padding: 8px 0; color: var(--ink); text-decoration: none; }
.pn-lista__lewo { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pn-lista__teksty, .pn-lista__prawo { display: flex; flex-direction: column; min-width: 0; }
.pn-lista__prawo { align-items: flex-end; flex-shrink: 0; }
.pn-lista__glowny { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pn-lista__pod { font-size: 13px; color: var(--ink-muted); }
.pn-lista__pasek { flex-basis: 100%; }
.pn-cel__wiersz { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin: 0 0 8px; }
.pn-cel__wiersz--meta { font-size: 14px; color: var(--ink-muted); }
.pn-cel__nazwa { font-weight: 500; }
.pn-cel__termin { color: var(--ink-muted); }
.pn-cel__procent { font-weight: 600; color: var(--ink); }
.pn-roznica--wyraznie { font-weight: 600; color: var(--violet-ink); }
.pn-znak-wyniku { display: flex; padding-top: 2px; flex-shrink: 0; }
.pn-znak-wyniku--ok { color: var(--ok); }
.pn-znak-wyniku--bad { color: var(--bad); }
.pn-dalej .pn-przycisk { width: 100%; min-height: 48px; justify-content: center; }

/* Etap 4, Firma: chip daty terminu, kopiowanie do schowka, świeżość danych, ekran faktury */
.pn-data { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; padding: 6px 8px; box-sizing: border-box; border-radius: 10px; background: var(--violet-soft); color: var(--violet-ink); line-height: 1.2; }
.pn-data__dzien { font-size: 13px; font-weight: 500; }
.pn-data__data { font-size: 16px; font-weight: 600; }
.pn-kopiuj { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-control); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.pn-kopiuj--glowny { width: 100%; min-height: 48px; border: 0; background: var(--violet); color: var(--on-fill); font-size: 16px; font-weight: 600; }
.pn-kopiuj[data-skopiowane] { border-color: var(--ok); }
html:not(.pn-js) .pn-kopiuj { display: none; }
.pn-swiezosc { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); }
.pn-swiezosc svg { color: var(--ok); flex-shrink: 0; }
.pn-faktura { display: flex; flex-direction: column; gap: 12px; }
.pn-faktura__gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 13px; color: var(--ink-muted); }
.pn-faktura__kwota { font-size: 28px; line-height: 1.15; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-faktura__kto { font-size: 17px; line-height: 1.4; font-weight: 600; }
.pn-faktura__co { font-weight: 400; color: var(--ink-muted); }
.pn-faktura__termin { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.pn-faktura__linie { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-muted); }
.pn-faktura__linie span:first-child { font-size: 15px; font-weight: 500; color: var(--ink); }
.pn-przelew { list-style: none; margin: 0; padding: 0; }
.pn-przelew__wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pn-przelew__pole { display: flex; flex-direction: column; min-width: 0; }
.pn-przelew__etykieta { font-size: 13px; color: var(--ink-muted); }
.pn-przelew__wartosc { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pn-przelew__wszystko { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }

/* Etap 5, Podatki: puste miejsce na liczbę księgowej, Zamknięcie miesiąca na telefonie, pole „Wklej rozliczenie”. */
.pn-puste { display: inline-block; width: 56px; height: 0; border-bottom: 2px dotted var(--line-control); vertical-align: middle; }
.pn-siatka-sprawdzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; border-top: 1px solid var(--line-soft); padding-top: 2px; }
.pn-siatka-sprawdzen__pozycja { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.3; }
.pn-siatka-sprawdzen__pozycja .pn-ikona { flex-shrink: 0; }
.pn-siatka-sprawdzen__pozycja--ok .pn-ikona { color: var(--ok); }
.pn-siatka-sprawdzen__pozycja--wait .pn-ikona { color: var(--wait); }
.pn-siatka-sprawdzen__pozycja--warn .pn-ikona { color: var(--warn); }
.pn-siatka-sprawdzen__pozycja--bad .pn-ikona { color: var(--bad); }
.pn-siatka-sprawdzen__kropka { width: 14px; height: 14px; border-radius: 50%; background: var(--track); flex-shrink: 0; }
.pn-siatka-sprawdzen__legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0 8px; font-size: 13px; color: var(--ink-muted); }
.pn-siatka-sprawdzen__legenda-pozycja { display: inline-flex; align-items: center; gap: 4px; }
.pn-wklej { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.pn-pole { display: block; width: 100%; min-height: 88px; padding: 10px 14px; border: 1px solid var(--line-control); border-radius: var(--radius-12); background-color: var(--surface); color: var(--ink); font-size: 15px; line-height: 1.5; resize: vertical; }
.pn-pole[aria-invalid="true"] { border-color: var(--bad); }
.pn-wklej__dol { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pn-wklej__dol .pn-przycisk--glowny { border: 0; cursor: pointer; }
.pn-blad { font-size: 14px; color: var(--bad); }
.pn-komunikat { margin-bottom: 8px; padding: 8px 12px; border-radius: var(--radius-10); background: var(--ok-soft); color: var(--ink); font-size: 14px; }

/* Etap 7, Ustawienia: formularz sekcji (pole, zdanie, błąd), sekret bez wartości, skutek przed zapisem */
.pn-formularz { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; padding-bottom: 16px; }
.pn-formularz__pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.pn-formularz__pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* miesiąc jako dwa pola wyboru po polsku (12.10, zamiast type="month" z przeglądarki): miesiąc szerszy, rok węższy */
.pn-pole-miesiac { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.pn-pole-miesiac__miesiac, .pn-pole-miesiac__rok { min-width: 0; }
.pn-formularz__pole--flaga { justify-content: center; }
.pn-formularz__etykieta { font-size: 14px; font-weight: 500; color: var(--ink); }
.pn-formularz__zdanie { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.pn-formularz__sekret { display: flex; align-items: center; gap: 10px; }
.pn-formularz__sekret .pn-pole { flex: 1; }
.pn-formularz__dol { display: flex; justify-content: flex-end; padding-top: 8px; }
.pn-flaga { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ink); cursor: pointer; }
input.pn-pole, select.pn-pole { min-height: 44px; }
/* Wybór z listy (zgłoszenie 9.10: select wyglądał jak pole tekstowe, a w Transakcjach miał strzałkę przeglądarki): w każdym
   select ta sama strzałka, szewron jak ikona „rozwiń”, z dwóch gradientów w tokenie koloru, bez obrazka; tekst kończy się
   przed nią. Tryb wysokiego kontrastu nie rysuje tła, więc tam wraca strzałka systemu. */
select.pn-pole, .pn-wybor select, .pn-filtry__wybor, .pn-ruch__wybor {
  -webkit-appearance: none; appearance: none; padding-right: 40px; text-overflow: ellipsis; cursor: pointer;
  background-image: linear-gradient(45deg, transparent calc(50% - 1px), var(--ink-muted) calc(50% - 1px), var(--ink-muted) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--ink-muted) calc(50% - 1px), var(--ink-muted) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: calc(100% - 23px) 50%, calc(100% - 16px) 50%;
  background-size: 7px 7px;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  select.pn-pole, .pn-wybor select, .pn-filtry__wybor, .pn-ruch__wybor { -webkit-appearance: auto; appearance: auto; }
}
/* Pytanie przed zapisem (zgłoszenie 9.10, zamiast „Pokaż skutek”): w formularzu nad polami, na panelu; tytuł pytaniem,
   liczby teraz i po zmianie, „Zapisz zmianę” i „Anuluj” (powrót bez zapisu). */
.pn-pytanie { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--panel); }
.pn-pytanie__tytul { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.pn-pytanie__dol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 8px; }
.pn-pytanie__anuluj { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; color: var(--violet-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.pn-pytanie__anuluj:hover { color: var(--violet-ink-hover); }
.pn-ustawienia__kredyt + .pn-ustawienia__kredyt { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line-control); }
.pn-ustawienia__podtytul { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.pn-ustawienia__osoba { display: flex; flex-direction: column; gap: 16px; border: 0; padding: 0; margin: 0; }
.pn-ustawienia__osoba + .pn-ustawienia__osoba { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line-control); }
/* Ustawienia · Kredyty (zgłoszenie 9.10): każdy formularz zwinięty w akordeonie, <details> bez JavaScriptu; w nagłówku nazwa
   i dane kredytu jedną linijką, cały nagłówek jest celem dotykowym */
.pn-akordeon + .pn-akordeon { border-top: 1px solid var(--line-soft); }
.pn-akordeon__glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; list-style: none; cursor: pointer; }
.pn-akordeon__glowa::-webkit-details-marker { display: none; }
.pn-akordeon__teksty { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-akordeon__tytul { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.pn-akordeon__glowa:hover .pn-akordeon__tytul { color: var(--violet-ink); }
.pn-akordeon__opis { font-size: 14px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
.pn-akordeon__znak { display: flex; flex-shrink: 0; color: var(--ink-muted); }
.pn-akordeon[open] > .pn-akordeon__glowa .pn-akordeon__znak { transform: rotate(180deg); }
.pn-akordeon__tresc { padding: 4px 0 24px; }
@media (max-width: 899px) {
  .pn-akordeon__glowa { min-height: 52px; }
  .pn-akordeon__opis { font-size: 13px; }
}
/* Dom · Kredyty na telefonie: etykieta wiersza tabeli z kredytami w kolumnach, 13 px jak w makiecie */
.pn-etykieta-wiersza { font-size: 13px; color: var(--ink-muted); }

/* Etap 7, Wgraj wyciąg: strefa upuszczania, całe pole w przerywanej ramce przyjmuje plik bez JavaScriptu. Pod ramką, 16 px
   niżej, rząd z „Wgraj” i zdaniem o telefonie (zgłoszenie 9.10: przycisk leżał na ramce, a zdanie się do niej kleiło). */
.pn-strefa { display: flex; flex-direction: column; gap: 16px; }
.pn-strefa__pole { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 160px; padding: 32px 24px; text-align: center; background: var(--surface); border: 2px dashed var(--violet); border-radius: var(--radius-16); }
.pn-strefa__opis { font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ink); cursor: pointer; }
.pn-strefa__plik { cursor: pointer; max-width: 100%; }
/* ze skryptem pole leży przezroczyste na całej ramce, a nazwy wybranych plików wypisuje skrypt (zgłoszenie 12.10);
   bez skryptu zostaje zwykłe pole przeglądarki z nazwą pliku */
.pn-js .pn-strefa__plik { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.pn-strefa__wybrane { position: relative; z-index: 1; pointer-events: none; min-height: 0; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.pn-strefa__wybrane:empty { display: none; }
.pn-strefa__pole--wybrane { border-style: solid; background: var(--violet-soft); }
.pn-strefa__pole--nad { background: var(--violet-soft); }
.pn-strefa__pole:focus-within { outline: 2px solid var(--violet); outline-offset: 3px; }
.pn-strefa__dol { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

/* Etap 6, Dom: słupki z wartością i dopiskiem, pary słupków (ścieżka celu), różnice do zwykle, pole kwoty (symulator) */
.pn-slupki__wartosc { font-size: 13px; line-height: 14px; font-weight: 500; white-space: nowrap; }
.pn-slupki__notka { font-size: 13px; line-height: 1.2; color: var(--ink-muted); }
.pn-slupki--pary { gap: 12px; }
.pn-slupki--pary.pn-slupki--gesto { gap: 4px; } /* ścieżka celu na 18 miesięcy: para słupków ma 14 px zamiast 7 px na telefonie */
.pn-slupki__para { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; }
.pn-slupki__para .pn-slupki__slupek { max-width: 22px; }
.pn-roznice { position: relative; display: flex; gap: 4px; }
.pn-roznice__kolumna { position: relative; flex: 1; height: 100%; }
.pn-roznice__slupek { position: absolute; left: 0; right: 0; }
.pn-roznice__slupek--gora { border-radius: 3px 3px 0 0; }
.pn-roznice__slupek--dol { border-radius: 0 0 3px 3px; }
.pn-roznice__os { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-control); }
.pn-kwota { display: flex; flex-direction: column; gap: 8px; padding: 0 0 16px; }
.pn-kwota__etykieta { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.pn-kwota__rzad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pn-kwota__pole { position: relative; display: inline-flex; width: 220px; }
.pn-kwota__wartosc { min-height: 48px; padding-right: 48px; text-align: right; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; resize: none; }
.pn-kwota__zl { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 500; color: var(--ink-muted); pointer-events: none; }
.pn-kwota__opis { font-size: 14px; color: var(--ink-muted); }
.pn-kwota .pn-przycisk--drugi { cursor: pointer; }
.pn-chipy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-sciezka { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 8px; }
.pn-sciezka__wykres { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
@media (max-width: 1427px) {
  .pn-sciezka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* Dom · Kredyty na telefonie (przegląd 12.10): etykiety wierszy jak w makiecie, 13 px w kolorze ink-muted, i 8 px między
   kolumnami, bo „Oprocentowanie” w 14 px (112 px) nie mieściło się obok dwóch kolumn kredytów po 100 px */
#kredyty-telefon .pn-tabela__wiersz, #kredyty-telefon .pn-tabela__naglowek { column-gap: 8px; }
#kredyty-telefon .pn-tabela__wiersz > :first-child { font-size: 13px; color: var(--ink-muted); }

/* telefon: poniżej 900 px pasek boczny znika, wchodzą nagłówek i dolna nawigacja (cele dotykowe 44 px) */
@media (max-width: 899px) {
  .pn-strona { grid-template-columns: minmax(0, 1fr); }
  .tylko-komputer { display: none !important; }
  .tylko-telefon { display: revert !important; }
  .pn-sprawa__link.tylko-telefon { display: flex !important; }
  .pn-sprawa.tylko-telefon { display: grid !important; }
  .pn-tresc { padding: 16px 16px 24px; gap: 16px; }
  .pn-tabela__wiersz { font-size: 14px; } /* tabele telefonu z makiet mają 14 px */
  .pn-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pn-kafel { padding: 16px 16px 0; gap: 8px; }
  .pn-kafel--pusty, .pn-kafel--bez-liczby { padding-bottom: 16px; }
  .pn-kafel--bez-liczby .pn-szkielet { height: 22px; }
  .pn-kafel__etykieta { font-size: 13px; }
  .pn-kafel__liczba { font-size: 22px; }
  .pn-porownanie, .pn-chip, .pn-prawa-uwaga { font-size: 13px; }
  .pn-wiecej, .pn-przycisk--drugi, .pn-link-przycisk { min-height: 44px; }
  .pn-drugi form > .pn-przycisk { min-height: 44px; } /* „Włącz” i „Wyłącz” poza dolnym pasem formularza */
  .pn-przycisk-ikony { width: 44px; height: 44px; }
  .pn-sekcja { padding: 16px 16px 4px; }
  .pn-sekcja__stopka { padding-bottom: 4px; } /* z 4 px karty: przycisk w stopce 8 px od jej ramki */
  .pn-kafel__stopka .pn-przycisk { margin-bottom: 8px; } /* kafel telefonu nie ma dolnego odstępu */
  .pn-sekcja__tytul { font-size: 17px; }
  .pn-siatka2 { grid-template-columns: minmax(0, 1fr); }
  .pn-sprawa { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; }
  .pn-sprawa__stan, .pn-sprawa__opis { grid-column: 1; }
  .pn-sprawa__link { grid-column: 2; grid-row: 1 / span 2; }
  .pn-kafel .pn-rachunek-wiersze, .pn-kafel .pn-legenda { display: none; }
  .pn-slupki--gesto .pn-slupki__kolumna:not(:first-child):not(:last-child) .pn-slupki__podpis { visibility: hidden; } /* kafelek telefonu mieści dwie daty */
  select.pn-pole, .pn-wybor select, .pn-filtry__wybor, .pn-ruch__wybor { min-height: 44px; font-size: 16px; }
  .pn-kopiuj:not(.pn-kopiuj--glowny) { min-height: 44px; }
  .pn-pole { font-size: 16px; }
  .pn-wklej__dol { flex-direction: column; align-items: stretch; }
  .pn-wklej__dol .pn-przycisk--glowny { min-height: 44px; }
  .pn-kwota__pole { width: 100%; }
  .pn-kwota__wartosc { min-height: 52px; font-size: 22px; }
  .pn-sciezka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pn-formularz__pola { grid-template-columns: minmax(0, 1fr); }
  .pn-formularz__dol { justify-content: stretch; }
  .pn-formularz__dol .pn-przycisk--glowny { width: 100%; min-height: 48px; }
  /* pytanie: liczba w całej szerokości, pod nią teraz i po zmianie (trzy kolumny nie mieszczą nazwy w 390 px), przyciski jeden pod drugim */
  .pn-pytanie__liczby .pn-tabela__naglowek, .pn-pytanie__liczby .pn-tabela__wiersz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; }
  .pn-pytanie__liczby .pn-tabela__naglowek > :first-child { display: none; }
  .pn-pytanie__liczby .pn-tabela__wiersz > :first-child { grid-column: 1 / -1; }
  .pn-pytanie__dol { flex-direction: column; align-items: stretch; }
  .pn-pytanie__dol .pn-przycisk--glowny { min-height: 48px; }
  .pn-pytanie__anuluj { min-height: 44px; }
  .pn-strefa__pole { min-height: 0; padding: 20px 16px; }
  .pn-strefa__dol { flex-direction: column; align-items: stretch; }
  .pn-strefa__dol .pn-przycisk--glowny { min-height: 48px; }
}

/* Dom · Transakcje (zamiast dom.php, 7.10): filtry do usunięcia, jedna lista ruchów dla komputera i telefonu (na komputerze
   kolumny tabeli, na telefonie opis i kwota, pod nimi dzień, konto i kategoria), poprawka kategorii rozwijana z wiersza */
.pn-filtr { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pn-filtr:hover { border-color: var(--violet); color: var(--violet-ink); }
.pn-filtr__x { font-size: 16px; line-height: 1; color: var(--ink-muted); }
.pn-filtry { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 4px 0 12px; }
.pn-filtry__pole, .pn-ruch__pole { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pn-filtry__etykieta, .pn-ruch__etykieta { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.pn-filtry__wybor, .pn-ruch__wybor { font: inherit; font-size: 14px; color: var(--ink); min-height: 36px; max-width: 100%; padding-block: 0; padding-left: 10px; border: 1px solid var(--line-control); border-radius: var(--radius-10); background-color: var(--surface); }
.pn-filtry .pn-przycisk--drugi, .pn-ruch__popraw .pn-przycisk--drugi { font-family: inherit; cursor: pointer; }
.pn-ruchy__naglowek, .pn-ruch__wiersz { display: grid; grid-template-columns: 48px minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 112px 20px; gap: 12px; }
.pn-ruchy__naglowek { padding: 4px 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.pn-ruchy__pozycja { border-top: 1px solid var(--line-soft); }
.pn-ruchy .pn-komunikat { margin: 8px 0 0; }
.pn-ruch__wiersz { align-items: center; min-height: 44px; padding: 6px 0; font-size: 15px; list-style: none; cursor: pointer; }
.pn-ruch__wiersz::-webkit-details-marker { display: none; }
.pn-ruch__co { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.pn-ruch__opis { font-weight: 500; overflow-wrap: anywhere; }
.pn-ruch__meta { display: contents; }
.pn-ruch__data { grid-column: 1; grid-row: 1; color: var(--ink-muted); }
.pn-ruch__konto { grid-column: 3; grid-row: 1; min-width: 0; }
.pn-ruch__kategoria { grid-column: 4; grid-row: 1; min-width: 0; }
.pn-ruch__kwota { grid-column: 5; grid-row: 1; text-align: right; font-weight: 500; white-space: nowrap; }
.pn-ruch__zl { display: none; }
.pn-ruch__znak { grid-column: 6; grid-row: 1; display: flex; justify-content: flex-end; color: var(--ink-muted); }
.pn-ruch[open] .pn-ruch__znak { transform: rotate(180deg); }
.pn-ruch__popraw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 0 0 12px 60px; padding: 12px 16px; border-radius: var(--radius-12); background: var(--panel); }
.pn-ruch__popraw .pn-flaga { min-height: 36px; font-size: 14px; }

@media (max-width: 899px) {
  .pn-filtr { min-height: 44px; }
  .pn-filtry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .pn-filtry .pn-przycisk--drugi { grid-column: 1 / -1; }
  .pn-ruchy__naglowek { display: none; }
  .pn-ruch__wiersz { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; }
  .pn-ruch__co { grid-column: 1; grid-row: 1; }
  .pn-ruch__kwota { grid-column: 2; grid-row: 1; }
  .pn-ruch__meta { display: block; grid-column: 1; grid-row: 2; font-size: 13px; color: var(--ink-muted); }
  .pn-ruch__konto::before, .pn-ruch__kategoria::before { content: " · "; }
  .pn-ruch__zl { display: inline; }
  .pn-ruch__znak { grid-column: 2; grid-row: 2; }
  .pn-ruch__popraw { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin: 0 0 12px; }
  .pn-ruch__popraw .pn-flaga, .pn-ruch__popraw .pn-przycisk--drugi { min-height: 44px; }
}
/* Szukaj (zamiast szukaj.php): zdanie odpowiedzi z frazą łamie się nawet w długim słowie, pole z przyciskiem pod nim;
   wyniki w tabelach i listach z klocków jak na innych ekranach */
.pn-szukanie-tytul h1 { overflow-wrap: anywhere; }
.pn-szukanie { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.pn-szukanie__etykieta { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.pn-szukanie__rzad { display: flex; gap: 8px; }
.pn-szukanie__rzad .pn-pole { flex: 1; min-width: 0; font-size: 16px; -webkit-appearance: none; appearance: none; }
.pn-szukanie__rzad .pn-przycisk--glowny { min-height: 44px; border: 0; cursor: pointer; }
/* Jak liczę (zamiast legacy/pomoc.php): pojęcie i to, jak je liczę; na komputerze dwie kolumny, na telefonie jedno pod drugim */
.pn-pojecia { margin: 0; }
.pn-pojecia__wiersz { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 2px 24px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pn-pojecia__nazwa { font-size: 15px; line-height: 1.5; font-weight: 600; }
.pn-pojecia__opis { margin: 0; font-size: 15px; line-height: 1.5; }
.pn-pojecia__wzor { display: block; font-weight: 600; }
.pn-pojecia + .pn-meta { padding: 4px 0 10px; }
@media (max-width: 899px) {
  .pn-pojecia__wiersz { grid-template-columns: minmax(0, 1fr); padding: 8px 0; }
}
/* Dopasowania wyciągu, ekran faktury: „Możliwa zapłata” (przelew, którego nie połączyłem sam, z „To ta zapłata”) */
.pn-zaplaty { list-style: none; margin: 0; padding: 0; }
.pn-zaplata { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pn-zaplata__opis { display: flex; flex-direction: column; min-width: 0; }
.pn-zaplata__glowny { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.pn-zaplata__pod { font-size: 13px; color: var(--ink-muted); }
.pn-zaplata__kwota { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-zaplata__formularz { margin: 0; }
.pn-zaplata__formularz .pn-przycisk--drugi { cursor: pointer; }
@media (max-width: 899px) {
  .pn-zaplata { grid-template-columns: minmax(0, 1fr) auto; }
  .pn-zaplata__formularz { grid-column: 1 / -1; }
  .pn-zaplata__formularz .pn-przycisk { width: 100%; min-height: 44px; }
}
/* Logowanie (zamiast login.php, 7.10): jedna karta na środku, bez nawigacji; pola i przycisk z klocków formularza,
   cele dotykowe od 44 px. Wylogowanie w Ustawieniach (telefon nie ma paska bocznego z „Wyloguj”). */
.pn-logowanie { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.pn-logowanie__karta { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-16); }
.pn-logowanie__karta--dokument { max-width: 720px; }
/* Baner bety (etap 15, F14): informacja, nie ostrzeżenie, więc jasny fiolet; jedna linia nad treścią, bez zamykania. */
.pn-baner { background: var(--violet-soft); color: var(--ink); border-bottom: 1px solid var(--line); padding: 8px 40px; font-size: 14px; line-height: 1.4; }
.pn-baner p { margin: 0; }
.pn-baner a { color: var(--violet-ink); font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; }
.pn-baner a:hover { color: var(--violet-ink-hover); }
.pn-baner__data { margin-left: 4px; }
/* Tryb tylko do odczytu (etap 16, P17, P18): baner płatności zamiast banera bety i zdanie z linkiem zamiast formularza plików */
.pn-baner--platnosci { background: var(--warn-soft); }
.pn-baner--platnosci a { margin-left: 4px; }
.pn-czeka { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.pn-czeka p { margin: 0; }
.pn-czeka__tytul { font-weight: 600; }
.pn-stopka { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.pn-stopka__linki { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pn-stopka__linki a { font-size: 14px; font-weight: 500; color: var(--violet-ink); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.pn-stopka__linki a:hover { color: var(--violet-ink-hover); }
.pn-dokument { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; }
.pn-dokument h1, .pn-dokument h2, .pn-dokument h3 { font-weight: 600; line-height: 1.4; }
.pn-dokument h2 { font-size: 18px; padding-top: 10px; }
.pn-dokument h3 { font-size: 16px; }
.pn-dokument ul, .pn-dokument ol { padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.pn-dokument ol { list-style: decimal; }
.pn-dokument ul { list-style: disc; }
.pn-dokument a { color: var(--violet-ink); }
.pn-logowanie__logo { align-self: flex-start; padding: 0; font-size: 24px; }
.pn-logowanie__tytul { font-size: 22px; line-height: 1.4; font-weight: 600; }
.pn-logowanie__zdanie { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.pn-logowanie__komunikat { padding: 10px 14px; border-radius: var(--radius-12); background: var(--violet-soft); color: var(--ink); font-size: 15px; }
.pn-logowanie__komunikat--blad { background: var(--bad-soft); color: var(--bad); font-weight: 500; }
.pn-logowanie .pn-formularz { padding-top: 4px; padding-bottom: 0; }
.pn-logowanie .pn-przycisk--glowny { width: 100%; min-height: 48px; border: 0; font-size: 16px; cursor: pointer; }
.pn-logowanie__linki { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 4px; }
.pn-logowanie__linki a { font-size: 14px; font-weight: 500; color: var(--violet-ink); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
/* bez tej reguły kolor z .pn-logowanie__linki a (ta sama waga co a:hover, później w pliku) przykryłby a:hover */
.pn-logowanie__linki a:hover { color: var(--violet-ink-hover); }
.pn-wyloguj, .pn-wiersz-usun { margin: 0; }
.pn-wyloguj .pn-przycisk, .pn-wiersz-usun .pn-przycisk { cursor: pointer; }
/* Strony konta bez sesji (etap 10) na tej samej karcie: komunikat z ikoną, „Wyślij ponownie”, oko przy haśle (tylko z
   JavaScriptem), zgoda i pole pułapka poza ekranem (L27). */
.pn-logowanie__komunikat .pn-ikona { vertical-align: -3px; }
.pn-logowanie__komunikat--ok { background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.pn-logowanie__ponownie { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding-top: 4px; }
.pn-logowanie .pn-przycisk--drugi { font-family: inherit; cursor: pointer; }
.pn-haslo { position: relative; display: block; }
.pn-haslo .pn-pole { padding-right: 52px; }
.pn-haslo__pokaz { display: none; position: absolute; top: 0; right: 0; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-12); background: transparent; color: var(--ink-muted); cursor: pointer; }
.pn-js .pn-haslo__pokaz { display: flex; }
.pn-haslo__pokaz[aria-pressed="true"] { color: var(--violet-ink); }
.pn-zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.pn-zgoda input { width: 20px; height: 20px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--violet); }
.pn-zgoda a { color: var(--violet-ink); font-weight: 500; }
.pn-pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 899px) {
  .pn-logowanie__karta { padding: 24px 20px; }
  .pn-logowanie__linki a, .pn-stopka__linki a, .pn-baner a, .pn-baner--platnosci a { min-height: 44px; }
  .pn-czeka .pn-przycisk { min-height: 44px; width: 100%; justify-content: center; }
  .pn-baner { padding: 4px 16px; }
  .pn-logowanie .pn-przycisk--drugi { min-height: 44px; }
}
/* Onboarding (etap 11, O10; onboarding_doc, wybor i segment w konto.py): karta 560 px na środku bez paska bocznego, nad nią
   logo i „Wyloguj”. Opcja (.pn-opcja) to duży wybór z kółkiem; zaznaczona ma grubszą ramkę i rozwinięte pola. Segment
   (.pn-segment) to dwa przyciski radia w jednej pigułce. Pola tylko dla jednej albo dwóch osób chowa :has() według wyboru. */
.pn-start { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px 16px 48px; }
.pn-start__glowa { width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pn-start__logo { padding: 0; }
.pn-start__karta { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-16); }
.pn-start__kroki { display: flex; flex-direction: column; gap: 8px; }
.pn-start__pasek { display: flex; gap: 6px; }
.pn-start__odcinek { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--track); }
.pn-start__odcinek--zrobiony { background: var(--violet); }
.pn-start__krok { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.pn-start__tytul { font-size: 24px; line-height: 1.3; font-weight: 600; }
.pn-start__zdanie { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.pn-start__formularz { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.pn-start__opcje { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pn-start__osoby { display: flex; flex-direction: column; gap: 12px; }
.pn-start__formularz:has(input[name="ile"][value="jedna"]:checked) .pn-start__tylko-dwie,
.pn-start__formularz:has(input[name="ile"][value="dwie"]:checked) .pn-start__tylko-jedna { display: none; }
.pn-start__stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.pn-start__wstecz { display: flex; gap: 8px; }
.pn-start__stopka .pn-przycisk--glowny { min-height: 44px; padding: 0 22px; font-family: inherit; font-size: 16px; cursor: pointer; }
.pn-start__stopka .pn-przycisk--drugi { min-height: 44px; }
.pn-opcja { padding: 14px 16px; border: 1px solid var(--line-control); border-radius: var(--radius-12); }
.pn-opcja:has(.pn-opcja__radio:checked) { padding: 13px 15px; border: 2px solid var(--violet); }
.pn-opcja__naglowek { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pn-opcja__radio { width: 20px; height: 20px; flex-shrink: 0; margin: 1px 0 0; accent-color: var(--violet); }
.pn-opcja__tytuly { display: flex; flex-direction: column; gap: 2px; }
.pn-opcja__tytul { font-size: 15px; font-weight: 600; }
.pn-opcja__podpis { font-size: 14px; color: var(--ink-muted); }
.pn-opcja__tresc:not(:empty) { padding: 12px 0 0 30px; }
.pn-js .pn-opcja:not(:has(.pn-opcja__radio:checked)) .pn-opcja__tresc { display: none; }
.pn-segment { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--track); }
.pn-segment__opcja { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 15px; font-weight: 500; cursor: pointer; }
.pn-segment__opcja input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pn-segment__opcja:has(input:checked) { background: var(--surface); border-color: var(--violet); color: var(--violet-ink); font-weight: 600; }
.pn-segment__opcja:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
/* Forma firmy (etap 11, O12; forma_opodatkowania w konto.py): te same opcje w kroku 2 i w Ustawieniach · Firma, gdzie
   zajmują cały wiersz siatki pól. Pod zdaniem „Przy tej formie” rozwijana lista „Co liczę przy każdej formie”. */
.pn-formularz__pola > .pn-opcje { grid-column: 1 / -1; }
.pn-opcja__pola { display: flex; flex-direction: column; gap: 12px; }
.pn-formy { font-size: 14px; }
.pn-formy summary { display: flex; align-items: center; min-height: 32px; color: var(--violet-ink); font-weight: 500; cursor: pointer; }
.pn-formy ul { padding-top: 6px; }
.pn-formy li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.pn-formy__forma { font-weight: 500; }
.pn-formy__co { color: var(--ink-muted); }
/* Etap 13, KSeF w Ustawieniach · Firma (C12, C13; ksef_sekcja w konto.py): część na górze sekcji Firma z tytułem i stanem
   po prawej. Bez połączenia formularz: środowisko i sposób jako segmenty, pod nimi pola tokena albo pliki certyfikatu
   z hasłem; :has() chowa pola i podpis przycisku drugiego sposobu (bez :has widać oba, a liczy się wybór). Połączony KSeF
   to tabela stanu i przyciski „Wymień” i „Usuń”. */
.pn-ksef { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.pn-ksef__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pn-ksef__tytul { font-size: 16px; line-height: 1.4; font-weight: 600; }
.pn-ksef__stan { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-muted); }
.pn-ksef__zdanie { font-size: 15px; line-height: 1.45; }
.pn-ksef__opis { font-size: 13px; color: var(--ink-muted); }
.pn-ksef__uwaga { font-size: 14px; color: var(--warn); }
.pn-ksef__formularz { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.pn-ksef__formularz .pn-formularz__pole { display: flex; flex-direction: column; gap: 6px; }
.pn-ksef__tylko-token, .pn-ksef__tylko-certyfikat { display: flex; flex-direction: column; gap: 14px; }
.pn-ksef__dol .pn-ksef__tylko-token, .pn-ksef__dol .pn-ksef__tylko-certyfikat { display: inline; }
.pn-ksef__formularz:has(input[name="sposob"][value="token"]:checked) .pn-ksef__tylko-certyfikat,
.pn-ksef__formularz:has(input[name="sposob"][value="certyfikat"]:checked) .pn-ksef__tylko-token { display: none; }
.pn-ksef__plik { min-height: 40px; padding: 8px 0; font-family: inherit; font-size: 15px; }
.pn-ksef__dol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pn-ksef__dol .pn-przycisk--glowny { font-family: inherit; cursor: pointer; }
.pn-ksef__zostaw { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; color: var(--violet-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.pn-ksef__przyciski { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.pn-ksef__przyciski form { display: contents; }
.pn-ksef__przyciski button { font-family: inherit; cursor: pointer; }
/* Etap 12, B21: „Co czytam z jakiego banku” pod strefą plików, zwinięte; na telefonie cel dotykowy podsumowania 44 px */
.pn-banki { font-size: 14px; margin-top: 12px; }
.pn-banki summary { display: flex; align-items: center; min-height: 32px; color: var(--violet-ink); font-weight: 500; cursor: pointer; }
.pn-banki[open] summary { margin-bottom: 6px; }
.pn-banki .pn-lista__wiersz { flex-wrap: nowrap; align-items: flex-start; } /* „CSV” z prawej w każdym wierszu, także przy krótkim zdaniu */
.pn-banki .pn-lista__lewo { flex: 1 1 auto; }
/* Krok 3 (etap 11, O13, O16; onboarding_wyciag i onboarding_konta w konto.py): strefa plików w karcie, kroki z telefonu,
   pliki z błędem nad strefą i lista rozpoznanych kont. Wiersz konta: nazwa i saldo w jednej linii, pod nimi podpis, obok
   pole rodzaju; na wąskim ekranie pole spada pod nazwę na całą szerokość. Nazwa kredytu tylko przy spłatach kredytu. */
.pn-start .pn-strefa__pole { gap: 12px; min-height: 0; padding: 28px 20px; }
.pn-start__ikona { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--violet-soft); color: var(--violet-ink); }
.pn-start .pn-strefa__opis, .pn-pierwszy-wyciag .pn-strefa__opis { font-size: 18px; }
.pn-start__telefon { display: flex; flex-direction: column; gap: 6px; }
.pn-start__kroki-telefonu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-muted); }
.pn-start__kroki-telefonu .pn-chip, .pn-start__telefon .pn-meta { font-size: 13px; }
.pn-start__bledy { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 14px; list-style: none; border-radius: var(--radius-12); background: var(--bad-soft); }
.pn-start__blad-plik { font-weight: 500; overflow-wrap: anywhere; }
.pn-start__konta { margin: 0; padding: 0; list-style: none; }
.pn-start__konto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pn-start__konto-opis { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
.pn-start__konto-glowa { display: flex; justify-content: space-between; gap: 12px; }
.pn-start__konto-nazwa { font-size: 15px; font-weight: 600; }
.pn-start__konto-podpis { font-size: 13px; color: var(--ink-muted); }
.pn-start__konto-pola { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pn-start__konto-pola .pn-pole { width: 100%; }
.pn-start__kredyt { display: flex; flex-direction: column; gap: 6px; }
.pn-start__konto-pola:has(option[value="kredyt"]):not(:has(option[value="kredyt"]:checked)) .pn-start__kredyt { display: none; }
/* plik bez numeru rachunku (etap 12, B17): numer i rodzaj tylko przy „Nowe konto” */
.pn-start__pole, .pn-start__nowe { display: flex; flex-direction: column; gap: 6px; }
.pn-start__nowe { gap: 8px; }
.pn-start__konto-pola:has(option[value="nowe"]):not(:has(option[value="nowe"]:checked)) .pn-start__nowe { display: none; }
@media (max-width: 899px) {
  /* karta onboardingu na telefonie jak makieta (Onboarding-*-telefon): ten sam odstęp 28 px i wcięcie pól pod tytułem opcji */
  .pn-start .pn-link-przycisk { min-height: 44px; }
  .pn-glowna .pn-opcja__tresc:not(:empty) { padding-left: 0; }
  .pn-segment__opcja { min-height: 44px; }
  .pn-formy summary { min-height: 44px; }
  .pn-banki summary { min-height: 44px; }
  .pn-ksef__plik, .pn-ksef__zostaw { min-height: 44px; }
  .pn-ksef__dol { flex-direction: column; align-items: stretch; }
  .pn-ksef__dol .pn-przycisk--glowny { min-height: 48px; }
}
/* Etap 12, ekran kolumn (B19): podgląd pliku w karcie przewijanej w poziomie (na telefonie tabela jest szersza niż ekran),
   wartości w jednej linii; opis to pola wyboru na całą szerokość siatki pól. Przełącznik „Kwoty w dwóch kolumnach” chowa
   pole kwoty i pokazuje obciążenia i uznania bez skryptu; przeglądarka bez :has pokazuje wszystkie, a liczy się przełącznik. */
.pn-podglad { overflow-x: auto; }
.pn-podglad .pn-tabela { width: max-content; min-width: 100%; display: grid; grid-template-columns: var(--kolumny); column-gap: 12px; }
/* jedna siatka całej tabeli: kolumny wszystkich wierszy podglądu mają tę samą szerokość co nagłówek */
.pn-podglad .pn-tabela__naglowek, .pn-podglad .pn-tabela__wiersze, .pn-podglad .pn-tabela__wiersze > li,
.pn-podglad .pn-tabela__wiersz { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.pn-podglad .pn-tabela__naglowek > span, .pn-podglad .pn-tabela__wiersz > span { white-space: nowrap; }
.pn-kolumny__opis { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.pn-kolumny__opcje { display: flex; flex-wrap: wrap; gap: 0 24px; }
.pn-kolumny:has(#kolumny-dwie:checked) .pn-kolumny__jedna { display: none; }
.pn-kolumny:not(:has(#kolumny-dwie:checked)) .pn-kolumny__dwie { display: none; }

/* Etap 14, drugi składnik w Ustawieniach · Konto (E13, E14, E17, E21): podsekcja Konta jak KSeF w Firmie. Klucz w grupach
   po 4 znaki z odstępem z CSS (skopiowany klucz bez spacji), kod QR jako SVG ze strony, kody zapasowe w dwóch kolumnach. */
.pn-drugi { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; margin: 16px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.pn-drugi .pn-ustawienia__podtytul { margin-bottom: 0; }
.pn-drugi__stan { font-size: 15px; font-weight: 600; color: var(--ok); }
.pn-drugi__zalecenie { font-size: 15px; line-height: 1.45; font-weight: 500; }
.pn-drugi__qr { width: 200px; max-width: 100%; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.pn-drugi__qr svg { display: block; width: 100%; height: auto; }
.pn-drugi__klucz { display: inline-flex; flex-wrap: wrap; gap: 0 1ch; font-size: 15px; letter-spacing: 0.04em; }
.pn-kody-zapasowe { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 32px; padding-left: 1.6em; font-size: 15px; }
.pn-kody-zapasowe code { letter-spacing: 0.04em; }

/* Ustawienia · Abonament (etap 16, P16): przyciski płatności, każdy z jednym zdaniem pod spodem */
.pn-abonament { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 12px 0 8px; }
.pn-abonament__wybor { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 220px; max-width: 360px; }
.pn-abonament__wybor .pn-przycisk { min-height: 44px; padding: 0 18px; }
@media (max-width: 899px) {
  .pn-abonament__wybor { max-width: none; }
  .pn-abonament__wybor .pn-przycisk { width: 100%; min-height: 48px; }
}