/* style.css - strony klienta (wyglad zblizony do PUESC: bialy karton formularza,
   etykiety wielkimi literami, gwiazdka wymagalnosci, szare podpowiedzi) w barwach
   agencji: przyciski i otoczki #409EAD, otoczki pol #D9D9D9, tla szare / #DFEFFF,
   oznaczenia "zalecane" #F6B40A. Motyw jasny/ciemny przez zmienne CSS i data-motyw. */
:root {
  --tlo: #f1f2f8;
  --karton: #ffffff;
  --tekst: #272833;
  --szary: #6b6c7e;
  --linia: #d9d9d9;
  --linia-jasna: #e6e6e6;
  --glowny: #409ead;
  --glowny-hover: #35899a;
  --glowny-tekst: #2e7c8a;      /* ten sam teal, ciemniej - tekst przyciskow z otoczka i linki (kontrast 4.8:1) */
  --na-glownym: #ffffff;        /* tekst na wypelnieniu #409ead */
  --glowny-tlo: #dfefff;
  --naglowek: #000927;
  --naglowek-tekst: #ffffff;
  --pasek: #000927;
  --pasek-tekst: #dbe4ee;
  --ok: #287d3c;
  --ok-tlo: #edf9f0;
  --blad: #da1414;
  --blad-tlo: #feefef;
  --uwaga: #f6b40a;
  --uwaga-tekst: #272833;      /* tekst NA zoltym wypelnieniu (plakietki panelu w admin.css) */
  --zalecane-tekst: #8a6100;   /* tekst oznaczenia "zalecane" na jasnym tle (5.5:1 na bieli) - ta sama barwa przy polu, kafelku i kroku */
  --uwaga-tekst-tlo: #272833;  /* tekst na jasnym tle ostrzezenia (.uwaga-pliku) */
  --uwaga-tlo: #fff7e0;
  --na-ok: #ffffff;           /* tekst na zieleni / czerwieni (znaczniki listy krokow, plakietka braku) */
  --na-bledzie: #ffffff;
  --glowny-cien: rgba(64, 158, 173, 0.25);
  --pole-tlo: #ffffff;
  --tlo-sekcji: #f7f8fb;       /* tlo kart sekcji (pola plikow, wzory): jasniejsze niz tlo strony, nie biale */
  --cien: 0 1px 4px rgba(0, 0, 0, 0.08);
  --promien: 8px;
}
/* motyw ciemny: systemowy (pierwsze malowanie, zanim skrypt odczyta wybor)
   ORAZ jawny wybor uzytkownika (data-motyw) - ten sam zestaw zmiennych */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="light"]) {
    --tlo: #0f141b;
    --karton: #171f29;
    --tekst: #dbe4ee;
    --szary: #8fa3b8;
    --linia: #3a4656;
    --linia-jasna: #223041;
    --glowny: #5fb6c4;
    --glowny-hover: #7cc7d3;
    --glowny-tekst: #7cc7d3;
    --na-glownym: #0f141b;
    --glowny-tlo: #17303a;
    --naglowek: #000927;
    --naglowek-tekst: #eaf2fa;
    --pasek: #000616;
    --pasek-tekst: #b6c6d8;
    --ok: #7fd48a;
    --ok-tlo: #12281a;
    --blad: #ff8b8b;
    --blad-tlo: #33191b;
    --uwaga: #f6b40a;
    --uwaga-tekst: #1a1400;
    --zalecane-tekst: #f0d98a;
    --uwaga-tekst-tlo: #f0d98a;   /* 9.5:1 na #3a2e0a - ostrzezenie o nieczytelnym zdjeciu widoczne w ciemnym motywie */
    --uwaga-tlo: #3a2e0a;
    --na-ok: #0b2411;
    --na-bledzie: #2a0b0d;
    --glowny-cien: rgba(95, 182, 196, 0.25);
    --pole-tlo: #0e141b;
    --tlo-sekcji: #131a22;
    --cien: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
}
:root[data-motyw="dark"] {
  --tlo: #0f141b;
  --karton: #171f29;
  --tekst: #dbe4ee;
  --szary: #8fa3b8;
  --linia: #3a4656;
  --linia-jasna: #223041;
  --glowny: #5fb6c4;
  --glowny-hover: #7cc7d3;
  --glowny-tekst: #7cc7d3;
  --na-glownym: #0f141b;
  --glowny-tlo: #17303a;
  --naglowek: #000927;
  --naglowek-tekst: #eaf2fa;
  --pasek: #000616;
  --pasek-tekst: #b6c6d8;
  --ok: #7fd48a;
  --ok-tlo: #12281a;
  --blad: #ff8b8b;
  --blad-tlo: #33191b;
  --uwaga: #f6b40a;
  --uwaga-tekst: #1a1400;
  --zalecane-tekst: #f0d98a;
  --uwaga-tekst-tlo: #f0d98a;
  --uwaga-tlo: #3a2e0a;
  --na-ok: #0b2411;
  --na-bledzie: #2a0b0d;
  --glowny-cien: rgba(95, 182, 196, 0.25);
  --pole-tlo: #0e141b;
  --tlo-sekcji: #131a22;
  --cien: 0 1px 4px rgba(0, 0, 0, 0.5);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--tlo);
  color: var(--tekst);
  min-height: 100vh;
}
a { color: var(--glowny-tekst); }
button { font: inherit; }

/* pasek gorny: jezyk + motyw */
.pasek {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 12px; background: var(--pasek); color: var(--pasek-tekst); font-size: 12px; min-height: 32px;
}
.pasek-lewo { display: flex; align-items: center; min-width: 0; }
.pasek-marka { font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasek-prawo { display: flex; gap: 4px; }
.pasek-btn {
  background: transparent; color: var(--pasek-tekst); border: 1px solid var(--glowny); border-radius: 4px;
  padding: 2px 8px; cursor: pointer; font-size: 12px; min-height: 26px;
}
.pasek-btn.aktywny { background: var(--glowny); color: var(--na-glownym); font-weight: 700; }
.pasek-btn:hover { background: var(--glowny-cien); }
.pasek-btn.motyw { font-size: 15px; line-height: 1; }

/* naglowek */
.naglowek { background: var(--naglowek); color: var(--naglowek-tekst); padding: 14px 16px; border-bottom: 3px solid var(--glowny); }
.naglowek-wnetrze { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.naglowek h1 { font-size: 19px; margin: 0; font-weight: 600; }
/* link do strony glownej agencji: tylko na komputerze (>= 900 px, jak duzyEkran()); na telefonie naglowek bez linka */
.naglowek .strona-glowna { margin-left: auto; font-size: 13px; color: var(--naglowek-tekst); opacity: 0.85; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.naglowek .strona-glowna:hover, .naglowek .strona-glowna:focus-visible { opacity: 1; outline-color: var(--glowny); }
@media (max-width: 899px) { .naglowek .strona-glowna { display: none; } }

/* uklad */
.uklad { max-width: 1100px; margin: 18px auto 96px; padding: 0 12px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .uklad.z-lista { grid-template-columns: 280px 1fr; margin-bottom: 40px; } }
.karton { background: var(--karton); border: 1px solid var(--linia-jasna); border-radius: var(--promien); box-shadow: var(--cien); padding: 18px 16px 22px; }
@media (min-width: 600px) { .karton { padding: 24px 28px 28px; } }
.karton h2 { margin: 0 0 4px; font-size: 21px; font-weight: 600; overflow-wrap: anywhere; }
.karton h3 { margin: 18px 0 6px; font-size: 16px; }
.opis-kroku { color: var(--szary); font-size: 14px; margin: 0 0 14px; }
.opis-kroku p { margin: 0 0 6px; }
/* naglowki maja WLASNY wiersz na cala szerokosc; plakietki i przyciski ida w osobnym wierszu pod nimi.
   Oznaczenia wymagalnosci = JEDEN system (decyzja uzytkownika 2026-09-19): przy kroku (pod tytulem) i u gory kafelka
   plakietka Z OBWODKA (.odznaka), przy zwyklym polu i checkboxie SAM TEKST (.wymag); barwy wspolne:
   wymagane czerwone, zalecane bursztynowe (obwodka #F6B40A), opcjonalne szare. Bez wypelnien. */
.odznaki { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.odznaka { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--linia); color: var(--szary); background: transparent; vertical-align: middle; }
.odznaka.wymagane { color: var(--blad); border-color: var(--blad); }
.odznaka.zalecane { color: var(--zalecane-tekst); border-color: var(--uwaga); }
.postep { display: flex; align-items: center; gap: 10px; color: var(--szary); font-size: 13px; margin-bottom: 12px; }
.postep-pasek { flex: 1; height: 6px; background: var(--linia-jasna); border-radius: 3px; overflow: hidden; }
.postep-pasek > div { height: 100%; background: var(--glowny); transition: width 0.3s; }

/* lista krokow: na komputerze stala kolumna, na telefonie rozwijana pod naglowkiem "Kroki formularza" */
.kroki-details > summary { list-style: none; cursor: pointer; background: var(--karton); border: 1px solid var(--glowny); border-radius: 6px;
  padding: 10px 14px; font-weight: 600; color: var(--glowny-tekst); min-height: 44px; }
.kroki-details > summary::-webkit-details-marker { display: none; }
.kroki-details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.kroki-lista { list-style: none; margin: 0; padding: 8px; border: 1px solid var(--glowny); border-top: none; border-radius: 0 0 6px 6px; background: var(--karton); }
@media (min-width: 900px) {
  .kroki-details > summary { display: none; }
  .kroki-lista { display: block; position: sticky; top: 12px; padding: 0; border: none; background: transparent; }
}
.kroki-lista li { margin: 0 0 4px; }
.kroki-lista button {
  width: 100%; text-align: left; background: var(--karton); border: 1px solid var(--glowny); border-radius: 6px;
  padding: 8px 10px 8px 34px; color: var(--tekst); cursor: pointer; position: relative; font-size: 13px; line-height: 1.35;
}
.kroki-lista button:hover:not(:disabled) { background: var(--glowny-tlo); }
.kroki-lista button:disabled { cursor: default; opacity: 0.7; }
.kroki-lista button.biezacy { border-color: var(--glowny); background: var(--glowny-tlo); font-weight: 600; }
.kroki-lista button::before {
  content: attr(data-nr); position: absolute; left: 9px; top: 8px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--linia); font-size: 11px; text-align: center; line-height: 16px; color: var(--szary);
}
.kroki-lista button.gotowy::before { content: "\2713"; background: var(--ok); border-color: var(--ok); color: var(--na-ok); }
.kroki-lista button.pominiety::before { content: "\2013"; background: var(--linia); }
.kroki-lista button.brak { border-color: var(--blad); color: var(--blad); }
.kroki-lista button.brak::before { content: "!"; border-color: var(--blad); background: var(--blad); color: var(--na-bledzie); font-weight: 700; }
.kroki-lista button.nie_dotyczy { opacity: 0.5; text-decoration: line-through; }
.kroki-lista .kroki-tytul { font-size: 12px; text-transform: uppercase; color: var(--szary); letter-spacing: 0.05em; margin: 0 0 8px; }

/* pola */
.pole { margin: 0 0 18px; }
.pole label.etykieta, .pole .etykieta { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 5px; overflow-wrap: anywhere; }
.pole .gwiazdka { color: var(--blad); }
.pole .wymag { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--szary); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.pole .wymag.wymagane { color: var(--blad); font-weight: 600; }
.pole .wymag.zalecane { color: var(--zalecane-tekst); font-weight: 600; }
.podpowiedz { color: var(--szary); font-size: 13px; margin: 4px 0 0; }
.podpowiedz p { margin: 0 0 4px; }
.podpowiedz ul { margin: 4px 0; padding-left: 18px; }
.pole input[type="text"], .pole input[type="email"], .pole input[type="tel"], .pole input[type="date"],
.pole input[type="number"], .pole input[type="password"], .pole textarea, .pole select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linia); border-radius: 6px; background: var(--pole-tlo);
  color: var(--tekst); font: inherit; min-height: 44px;
}
.pole textarea { min-height: 110px; resize: vertical; }
.pole input:focus-visible, .pole textarea:focus-visible, .pole select:focus-visible, .przyciski-wyboru button:focus-visible, .btn:focus-visible, .strefa:focus-within, .kroki-details > summary:focus-visible {
  outline: 2px solid var(--glowny); outline-offset: 1px;
}
.pole.blad input, .pole.blad textarea, .pole.blad select, .pole.blad .strefa { border-color: var(--blad); }
.blad-pola { color: var(--blad); font-size: 13px; margin: 5px 0 0; font-weight: 600; }
.pole-checkbox { display: flex; gap: 10px; align-items: flex-start; }
/* checkbox rysowany wlasnie: pusty = biale pole z szara otoczka, zaznaczony = biale pole z teal otoczka i wyraznym
   znakiem (systemowe wypelnienie kolorem zlewalo sie z tlem i nie bylo widac stanu) */
.pole-checkbox input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 2px 0 0; flex: none;
  border: 2px solid var(--szary); border-radius: 4px; background: var(--pole-tlo); display: grid; place-content: center; cursor: pointer; }   /* otoczka >= 3:1 (WCAG 1.4.11) */
.pole-checkbox input::before { content: ""; width: 11px; height: 6px; border-left: 3px solid var(--glowny-tekst); border-bottom: 3px solid var(--glowny-tekst);
  transform: rotate(-45deg) translate(1px, -2px); opacity: 0; }
.pole-checkbox input:checked { border-color: var(--glowny); }
.pole-checkbox input:checked::before { opacity: 1; }
.pole-checkbox input:focus-visible { outline: 2px solid var(--glowny); outline-offset: 2px; }
.pole-checkbox label { font-size: 14.5px; cursor: pointer; }
.przyciski-wyboru { display: flex; flex-wrap: wrap; gap: 8px; }
.przyciski-wyboru button {
  border: 1px solid var(--linia); background: var(--pole-tlo); color: var(--tekst); border-radius: 6px; padding: 9px 14px;
  cursor: pointer; min-height: 44px;
}
.przyciski-wyboru button:hover { border-color: var(--glowny); }
.przyciski-wyboru button.wybrany { border-color: var(--glowny); background: var(--glowny-tlo); color: var(--glowny-tekst); font-weight: 600; }
/* kafelek z tekstem (pole tekst_info, np. procedura i platnosc): zwykly tekst w kafelku, linki wyrozniane,
   akapit bedacy samym linkiem = przycisk (link do zakupu uslugi) */
.tekst-info { font-size: 14px; }
.tekst-info p { margin: 0 0 8px; }
.tekst-info p:last-child { margin-bottom: 0; }
.tekst-info ul { margin: 6px 0 8px; padding-left: 20px; }
.tekst-info a { font-weight: 600; }
.link-przycisk a { display: block; padding: 10px 14px; border: 1px solid var(--glowny); border-radius: 6px; text-decoration: none;
  background: var(--pole-tlo); overflow-wrap: anywhere; }
.link-przycisk a::after { content: "\00a0\2197"; }   /* twarda spacja: strzalka nie spada do osobnego wiersza przy dlugiej etykiecie */
.link-przycisk a:hover { background: var(--glowny-tlo); }
.tresc-info p { margin: 0 0 10px; }
.tresc-info ul { margin: 6px 0 10px; padding-left: 20px; }
.linki-lista { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 8px; }
.linki-lista a {
  display: block; padding: 10px 14px; border: 1px solid var(--glowny); border-radius: 6px; text-decoration: none; font-weight: 600;
  background: var(--karton);
}
.linki-lista a:hover { background: var(--glowny-tlo); }
.pobrania { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.pobrania a { display: block; padding: 8px 12px; border: 1px dashed var(--glowny); border-radius: 6px; background: var(--pole-tlo); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }   /* biale wnetrze na tle sekcji */
.pobrania a:hover { background: var(--glowny-tlo); }
.pobrania a span.nazwa { display: block; color: var(--szary); font-size: 12px; font-weight: 400; margin-top: 2px; }

/* pliki: kazde pole plikow / wzorow to osobny kafelek w kroku */
.pole.karta-pliki { border: 1px solid var(--linia); border-radius: 12px; padding: 14px 14px 16px; background: var(--tlo-sekcji); margin: 0 0 16px; }
.pole.karta-pliki.blad { border-color: var(--blad); }
.pole.karta-pliki label.etykieta, .pole.karta-pliki .etykieta { font-size: 13.5px; }
.pole.karta-pliki .kafelek-naglowek { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 10px; margin: 0 0 5px; }
.pole.karta-pliki .kafelek-naglowek .etykieta { flex: 1 1 220px; margin: 0; }
.strefa { border: 2px dashed var(--linia); border-radius: var(--promien); padding: 14px; text-align: center; background: var(--pole-tlo); transition: border-color 0.15s; }
.strefa.nad { border-color: var(--glowny); background: var(--glowny-tlo); }
.strefa .akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.strefa .upusc { color: var(--szary); font-size: 13px; margin: 8px 0 0; }
.strefa .dozw { color: var(--szary); font-size: 12px; margin: 4px 0 0; }
.strefa input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.lista-plikow { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.lista-plikow li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 7px 10px; border: 1px solid var(--linia); border-radius: 6px; background: var(--karton); font-size: 14px; }
.lista-plikow li.wgrany { background: var(--ok-tlo); border-color: var(--ok); }   /* nasz dokument w tej sekcji */
.lista-plikow li.w-toku { grid-template-columns: auto 1fr; background: var(--glowny-tlo); border-color: var(--glowny); }
.lista-plikow .nazwa { grid-column: 1 / -1; overflow-wrap: anywhere; }
.lista-plikow li.w-toku .nazwa { grid-column: 2; }
.lista-plikow li.w-toku .postep-pliku { grid-column: 1 / -1; }
.lista-plikow .kreci { width: 18px; height: 18px; border: 3px solid var(--linia); border-top-color: var(--glowny); border-radius: 50%; animation: kreci 0.8s linear infinite; }
@keyframes kreci { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lista-plikow .kreci { animation: none; opacity: 0.6; } }   /* bez ruchu: tekst etapu i pasek postepu informuja o pracy */
.lista-plikow .uwaga-pliku { grid-column: 1 / -1; font-size: 12.5px; color: var(--uwaga-tekst-tlo); background: var(--uwaga-tlo); border-left: 3px solid var(--uwaga); padding: 4px 8px; border-radius: 3px; }
.lista-plikow .roz { color: var(--szary); font-size: 12px; white-space: nowrap; }
.lista-plikow .postep-pliku { flex: 1; height: 6px; background: var(--linia-jasna); border-radius: 3px; overflow: hidden; }
.lista-plikow .postep-pliku > div { height: 100%; background: var(--glowny); }
.lista-plikow button { background: var(--karton); border: 1px solid var(--glowny); color: var(--glowny-tekst); border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; min-height: 30px; font-weight: 600; }
.lista-plikow button:hover { color: var(--blad); border-color: var(--blad); }

/* przyciski: KAZDY ma otoczke w kolorze glownym (takze "Powrot", "Anuluj", "Usun") */
.btn { display: inline-block; text-decoration: none; text-align: center; border: 1px solid var(--glowny); background: var(--karton); color: var(--glowny-tekst);
  border-radius: 6px; padding: 10px 18px; cursor: pointer; min-height: 44px; font-weight: 600; line-height: 1.4; }
.btn:hover { background: var(--glowny-tlo); }
.btn.glowny { background: var(--glowny); border-color: var(--glowny); color: var(--na-glownym); }
.btn.glowny:hover { background: var(--glowny-hover); border-color: var(--glowny-hover); }
.btn.cichy { font-weight: 500; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.przyciski {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center;
  background: var(--karton); border-top: 1px solid var(--linia-jasna); margin: 22px -16px -22px; padding: 10px 16px 14px;
}
@media (min-width: 600px) { .przyciski { margin: 26px -28px -28px; padding: 12px 28px 16px; } }
.przyciski .srodek { flex: 1; text-align: center; }
.przyciski .btn { white-space: nowrap; }   /* krotkie teksty przyciskow paska nigdy nie zawijaja sie do drugiego wiersza (PL i EN) */
.przyciski .wyrownaj-prawo { flex: 1; }   /* ten sam text-align:right co logowanie; na flex zajmuje caly pasek */
@media (max-width: 599px) {
  /* pasek przyciskow zawsze widoczny na dole ekranu; scroll-padding pilnuje, zeby
     przewijanie do pola (fokus, walidacja) nie chowalo go pod paskiem */
  html { scroll-padding-bottom: calc(var(--h-paska, 96px) + 16px); }
  .uklad { margin-bottom: calc(var(--h-paska, 96px) + 16px); }
  .przyciski { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 20; box-shadow: 0 -2px 8px rgba(0,0,0,0.12); }
  .przyciski .btn { padding: 10px 12px; }
}
@media (max-width: 360px) {
  /* trzy przyciski paska ("Wstecz" | "Zapisz i wroc" | "Dalej") na najwezszych telefonach w jednym wierszu */
  .przyciski { gap: 6px; }
  .przyciski .btn { padding: 10px 10px; font-size: 14px; }
}
/* wiersz linkow pod paskiem przyciskow ("Wroc do wyboru formularza" | "Wroc do swojego formularza", "Dodaj lub popraw dokumenty"):
   komputer - nizej, wyjustowany do zewnetrznych krawedzi; telefon - kazdy na cala szerokosc, jeden pod drugim */
.powrot-do-wyboru { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 40px 0 0; }
.powrot-do-wyboru .btn { white-space: normal; text-align: center; }
@media (max-width: 599px) {
  .powrot-do-wyboru { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 18px 0 0; }   /* jedna kolumna na cala szerokosc (auto = szerokosc tresci) */
  .powrot-do-wyboru .btn, .wyrownaj-prawo .btn { width: 100%; box-sizing: border-box; }
}

/* kafelki formularzy (strona startowa) */
.kafelki { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin: 14px 0; }
.kafelek { display: block; text-decoration: none; color: var(--tekst); background: var(--karton); border: 1px solid var(--linia);
  border-radius: var(--promien); padding: 16px; box-shadow: var(--cien); }
.kafelek:hover { border-color: var(--glowny); background: var(--glowny-tlo); }
.kafelek h3 { margin: 0 0 6px; font-size: 17px; color: var(--glowny-tekst); }
.kafelek p { margin: 0 0 10px; color: var(--szary); font-size: 14px; }
.kafelek .meta { font-size: 12px; color: var(--szary); }

/* podsumowanie, wyslano */
.info-ok { background: var(--ok-tlo); border-left: 3px solid var(--ok); padding: 10px 14px; border-radius: 4px; margin: 10px 0; }
.info-uwaga { background: var(--uwaga-tlo); border-left: 3px solid var(--uwaga); padding: 10px 14px; border-radius: 4px; margin: 10px 0; }
.info-blad { background: var(--blad-tlo); border-left: 3px solid var(--blad); padding: 10px 14px; border-radius: 4px; margin: 10px 0; }
.info-blad ul { margin: 6px 0 0; padding-left: 18px; }
.podsumowanie-krok { border: 1px solid var(--linia); border-radius: 6px; padding: 10px 12px; margin: 0 0 10px; }
.podsumowanie-krok.niekompletny { border-color: var(--blad); background: var(--blad-tlo); }
.podsumowanie-krok h4.tytul { margin: 0 0 6px; font-size: 17px; overflow-wrap: anywhere; }
.podsumowanie-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.podsumowanie-akcje .btn { font-size: 12px; padding: 4px 10px; min-height: 30px; margin-left: auto; }
.podsumowanie-krok .odznaka.brak { color: var(--na-bledzie); background: var(--blad); border-color: var(--blad); }
/* telefon: etykieta nad wartoscia (jedna kolumna); komputer: dwie kolumny z szeroka etykieta */
.podsumowanie-krok dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px 10px; font-size: 13.5px; }
.podsumowanie-krok dt { color: var(--szary); overflow-wrap: anywhere; }
.podsumowanie-krok dd { margin: 0 0 6px; overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .podsumowanie-krok dl { grid-template-columns: minmax(220px, 45%) 1fr; gap: 4px 12px; }
  .podsumowanie-krok dd { margin: 0; }
}
.podsumowanie-krok dd.brak { color: var(--blad); font-weight: 600; }
.podsumowanie-krok .pomin { color: var(--szary); font-style: italic; font-size: 13.5px; }

/* okno nazwy pliku */
dialog { border: 1px solid var(--glowny); border-radius: var(--promien); background: var(--karton); color: var(--tekst); padding: 20px; max-width: 460px; width: calc(100% - 24px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog h3 { margin: 0 0 6px; }
dialog .pole { margin-bottom: 12px; }
dialog .podglad { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--glowny-tlo); padding: 8px 10px; border-radius: 4px; word-break: break-all; font-size: 13.5px; }
dialog .przyciski-dialog { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
dialog .dlg-lista { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; max-height: 40vh; overflow: auto; }
dialog .dlg-lista:focus-visible { outline: 2px solid var(--glowny); outline-offset: 2px; }   /* lista przewijalna z klawiatury (WCAG 2.1.1) */

/* komunikat (toast) */
.komunikat { position: fixed; left: 12px; right: 12px; top: 40px; z-index: 50; padding: 10px 14px; border-radius: 6px; font-weight: 600;
  background: var(--blad-tlo); color: var(--blad); border: 1px solid var(--blad); opacity: 0; pointer-events: none; transition: opacity 0.2s; max-width: 700px; margin: 0 auto; }
.komunikat.ok { background: var(--ok-tlo); color: var(--ok); border-color: var(--ok); }
.komunikat.uwaga { background: var(--uwaga-tlo); color: var(--tekst); border-color: var(--uwaga); }
.komunikat.widoczny { opacity: 1; pointer-events: none; }   /* toast nie ma klikalnej tresci - nie moze zaslaniac nawigacji pod nim */
.ukryty { display: none !important; }
.wyrownaj-prawo { text-align: right; }
.malo { color: var(--szary); font-size: 13px; }
.ladowanie { color: var(--szary); padding: 30px 0; text-align: center; }