/* =========================================================================
   Ewidencja Opakowań — arkusz stylów

   Bez zewnętrznych bibliotek i bez kroku budowania: jeden plik, który
   wystarczy podmienić, żeby zmienić wygląd całej aplikacji.

   MOTYW JASNY, ZAWSZE. Wcześniej reagowaliśmy na ustawienie systemu
   (prefers-color-scheme) i użytkownikom z ciemnym systemem aplikacja
   wyświetlała się niemal czarna — czego nie widać, gdy testuje się ją
   na jasnym. Narzędzie do dokumentów ma wyglądać jak dokument: jasno
   i spokojnie, niezależnie od ustawień systemu.
   ========================================================================= */

:root {
  /* Tła */
  --tlo: #f6f5f1;
  --tlo-karta: #ffffff;
  --tlo-delikatne: #faf9f6;

  /* Tekst */
  --tekst: #1b1a17;
  --tekst-sredni: #4a4741;
  --tekst-slaby: #6f6b64;  /* kontrast 4,86:1 na tle — powyżej progu czytelności */

  /* Zieleń — kolor wiodący */
  --akcent: #156b47;
  --akcent-ciemny: #0e5236;
  --akcent-jasny: #e9f4ed;
  --akcent-obwodka: #b9dcc8;

  /* Bursztyn — ostrzeżenia i terminy */
  --ostrzezenie: #8a5300;
  --ostrzezenie-tlo: #fdf5e6;
  --ostrzezenie-obwodka: #f0dcae;

  /* Czerwień — błędy */
  --blad: #a12a24;
  --blad-tlo: #fceceb;
  --blad-obwodka: #f0c4c1;

  /* Linie */
  --ramka: #e6e2da;
  --ramka-mocna: #d3cec3;

  --cien-maly: 0 1px 2px rgba(27, 26, 23, .05);
  --cien: 0 1px 2px rgba(27, 26, 23, .04), 0 6px 20px rgba(27, 26, 23, .06);
  --cien-duzy: 0 2px 4px rgba(27, 26, 23, .05), 0 12px 32px rgba(27, 26, 23, .09);

  --promien: 12px;
  --promien-maly: 8px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--akcent); }
a:hover { color: var(--akcent-ciemny); }

.kontener { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.kontener.waski { max-width: 580px; }

/* --- Nagłówki --------------------------------------------------------- */

h1, h2, h3 { letter-spacing: -.021em; line-height: 1.22; }

h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; margin: 0 0 14px; }
h2 { font-size: 1.45rem; font-weight: 650; margin: 0 0 16px; }
h3 { font-size: 1.06rem; font-weight: 650; margin: 26px 0 8px; }

section { padding: 34px 0; }
section:first-of-type { padding-top: 40px; }

/* Zielona kreska przy nagłówkach sekcji — spina wizualnie całość. */
.panel-tresc section > h2,
main section > h2 {
  position: relative;
  padding-left: 14px;
}

.panel-tresc section > h2::before,
main section > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 3px;
  border-radius: 2px;
  background: var(--akcent);
}

/* --- Pasek górny ------------------------------------------------------ */

.pasek {
  background: var(--tlo-karta);
  border-bottom: 1px solid var(--ramka);
  position: sticky;
  top: 0;
  z-index: 20;
}

.pasek-tresc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.logo {
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--tekst);
}

.pasek nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.pasek nav a {
  color: var(--tekst-sredni);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 500;
}

.pasek nav a:hover { color: var(--akcent); }

.link-panel { color: var(--akcent) !important; font-weight: 650; }

.forma-wyloguj { display: inline; margin: 0; }

.forma-wyloguj button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .94rem;
  font-weight: 500;
  color: var(--tekst-slaby);
  cursor: pointer;
}

.forma-wyloguj button:hover { color: var(--akcent); }

/* --- Hero ------------------------------------------------------------- */

.hero { padding: 64px 0 44px; }
.hero--waski { padding: 44px 0 24px; }
.hero h1 { max-width: 20ch; }

.lead {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--tekst-sredni);
  margin: 0 0 28px;
  max-width: 62ch;
}

.plakietka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ostrzezenie-tlo);
  color: var(--ostrzezenie);
  border: 1px solid var(--ostrzezenie-obwodka);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: .855rem;
  font-weight: 650;
  margin-bottom: 22px;
}

.plakietka::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Karty ------------------------------------------------------------ */

.karta {
  background: var(--tlo-karta);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 26px;
  box-shadow: var(--cien-maly);
  margin-bottom: 20px;
}

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 18px;
}

.karty .karta { margin-bottom: 0; }

/* --- Przyciski -------------------------------------------------------- */

.przycisk {
  display: inline-block;
  background: var(--akcent);
  color: #fff;
  border: 1px solid var(--akcent);
  border-radius: var(--promien-maly);
  padding: 12px 26px;
  font-size: .98rem;
  font-weight: 650;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .13s ease;
}

.przycisk:hover {
  background: var(--akcent-ciemny);
  border-color: var(--akcent-ciemny);
  color: #fff;
}

.przycisk--drugorzedny {
  background: var(--tlo-karta);
  color: var(--akcent);
  border-color: var(--ramka-mocna);
}

.przycisk--drugorzedny:hover {
  background: var(--akcent-jasny);
  color: var(--akcent-ciemny);
  border-color: var(--akcent-obwodka);
}

.przycisk--ostrzegawczy {
  background: var(--tlo-karta);
  color: var(--blad);
  border-color: var(--blad-obwodka);
}

.przycisk--ostrzegawczy:hover { background: var(--blad-tlo); color: var(--blad); }

.przycisk-maly {
  flex-shrink: 0;
  display: inline-block;
  background: var(--akcent-jasny);
  color: var(--akcent);
  border: 1px solid var(--akcent-obwodka);
  border-radius: 7px;
  padding: 5px 14px;
  font-size: .845rem;
  font-weight: 650;
  text-decoration: none;
}

.przycisk-maly:hover { background: var(--akcent); color: #fff; }

/* --- Formularze ------------------------------------------------------- */

.pole { margin-bottom: 20px; }

.pole label { display: block; font-weight: 600; margin-bottom: 7px; font-size: .95rem; }

.pole input[type=number],
.pole input[type=email],
.pole input[type=text],
.pole input[type=password],
.pole input[type=date],
.pole input[type=file],
.pole select,
.pole textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: .97rem;
  color: var(--tekst);
  background: var(--tlo-delikatne);
  border: 1px solid var(--ramka-mocna);
  border-radius: var(--promien-maly);
}

.pole textarea { resize: vertical; }

.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
  background: var(--tlo-karta);
}

.pole .pomoc {
  display: block;
  font-size: .87rem;
  color: var(--tekst-slaby);
  margin-top: 6px;
  line-height: 1.5;
}

.pole--checkbox { display: flex; gap: 11px; align-items: flex-start; }
.pole--checkbox label { font-weight: 400; margin: 0; }
.pole--checkbox input { margin-top: 5px; flex-shrink: 0; }

.pole ul { list-style: none; padding: 0; margin: 6px 0 0; }
.pole ul li { font-size: .87rem; color: var(--tekst-slaby); }

.blad-pola { color: var(--blad); font-size: .89rem; margin-top: 6px; font-weight: 500; }

input[type="radio"], input[type="checkbox"] {
  accent-color: var(--akcent);
  width: 17px;
  height: 17px;
}

.forma-w-linii { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.forma-w-linii .pole { flex: 1 1 210px; }

.siatka-firmy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 18px;
}

.siatka-firmy input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--tekst);
  background: var(--tlo-delikatne);
  border: 1px solid var(--ramka-mocna);
  border-radius: var(--promien-maly);
}

.siatka-firmy input:focus {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
  background: var(--tlo-karta);
}

/* --- Przełącznik trybów ----------------------------------------------- */

.przelacznik {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 5px;
  background: var(--tlo);
  border: 1px solid var(--ramka);
  border-radius: 10px;
}

.przelacznik-opcja {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 500;
  font-size: .94rem;
}

.przelacznik-opcja:has(input:checked) {
  background: var(--tlo-karta);
  box-shadow: var(--cien-maly);
  font-weight: 650;
}

.przelacznik-opcja input { flex-shrink: 0; }

/* --- Wybór roli ------------------------------------------------------- */

.lista-rol { display: grid; gap: 9px; margin-bottom: 14px; }

.opcja-roli {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--ramka-mocna);
  border-radius: var(--promien-maly);
  background: var(--tlo-karta);
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  transition: border-color .13s ease;
}

.opcja-roli:hover { border-color: var(--akcent-obwodka); }

.opcja-roli:has(input:checked) {
  border-color: var(--akcent);
  background: var(--akcent-jasny);
  font-weight: 600;
}

.opcja-roli input { flex-shrink: 0; margin-top: 3px; }

/* --- Wyszukiwarka ----------------------------------------------------- */

.szukajka { position: relative; margin: 4px 0 16px; }

.szukajka input[type="search"] {
  width: 100%;
  padding: 12px 42px 12px 15px;
  font: inherit;
  font-size: .97rem;
  color: var(--tekst);
  background: var(--tlo-delikatne);
  border: 1px solid var(--ramka-mocna);
  border-radius: var(--promien-maly);
  appearance: none;
  -webkit-appearance: none;
}

.szukajka input[type="search"]::-webkit-search-cancel-button { display: none; }

.szukajka input:focus {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
  background: var(--tlo-karta);
}

.szukajka-czysc {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tekst-slaby);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.szukajka-czysc:hover { background: var(--ramka); color: var(--tekst); }
.szukajka-info { margin: -10px 0 14px; }

/* --- Kategorie opakowań ----------------------------------------------- */

details.sekcja-opakowan {
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  margin-bottom: 12px;
  background: var(--tlo-karta);
  overflow: hidden;
}

details.sekcja-opakowan > summary {
  cursor: pointer;
  padding: 15px 17px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 11px;
  list-style: none;
  user-select: none;
}

details.sekcja-opakowan > summary::-webkit-details-marker { display: none; }

details.sekcja-opakowan > summary::before {
  content: "▸";
  color: var(--tekst-slaby);
  font-size: .82rem;
  transition: transform .15s ease;
  display: inline-block;
}

details.sekcja-opakowan[open] > summary::before { transform: rotate(90deg); }
details.sekcja-opakowan > summary:hover { background: var(--tlo-delikatne); }

.sekcja-nazwa { flex: 1; }

.sekcja-licznik {
  font-size: .78rem;
  font-weight: 650;
  color: var(--tekst-slaby);
  background: var(--tlo);
  border: 1px solid var(--ramka);
  border-radius: 999px;
  padding: 2px 10px;
}

.znacznik-jednostkowe {
  font-size: .71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
  border: 1px solid var(--ostrzezenie-obwodka);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

details.sekcja-opakowan .lista-opakowan {
  border: 0;
  border-top: 1px solid var(--ramka);
  border-radius: 0;
  margin: 0;
}

/* --- Lista opakowań --------------------------------------------------- */

.lista-opakowan {
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  overflow: hidden;
  margin-bottom: 22px;
}

.wiersz-opakowania {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--ramka);
  background: var(--tlo-karta);
}

.wiersz-opakowania:last-child { border-bottom: 0; }
.wiersz-opakowania:hover { background: var(--tlo-delikatne); }

.opis-opakowania { min-width: 0; }

.opis-opakowania label {
  display: block;
  font-weight: 550;
  margin: 0;
  font-size: .95rem;
}

.opis-opakowania .waga {
  display: block;
  font-size: .81rem;
  color: var(--tekst-slaby);
  margin-top: 2px;
}

.wejscie-sztuk { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.wejscie-sztuk input {
  width: 112px;
  padding: 9px 12px;
  font: inherit;
  font-size: .95rem;
  text-align: right;
  color: var(--tekst);
  background: var(--tlo-delikatne);
  border: 1px solid var(--ramka-mocna);
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
}

.wejscie-sztuk input:focus {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
  background: var(--tlo-karta);
}

.wejscie-sztuk .jednostka { font-size: .85rem; color: var(--tekst-slaby); width: 26px; }

/* --- Podsumowanie na żywo --------------------------------------------- */

.podsumowanie-live {
  position: sticky;
  bottom: 14px;
  background: var(--tlo-karta);
  border: 1px solid var(--akcent-obwodka);
  border-radius: var(--promien);
  padding: 16px 20px;
  margin: 22px 0;
  box-shadow: var(--cien-duzy);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 5;
}

.podsumowanie-live [data-suma] {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--akcent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.pasek-progu {
  display: block;
  height: 7px;
  background: var(--tlo);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 7px;
}

.pasek-progu-wypelnienie {
  display: block;
  height: 100%;
  width: 0;
  background: var(--akcent);
  border-radius: 99px;
  transition: width .2s ease;
}

.pasek-progu-wypelnienie.ponad-prog { background: var(--ostrzezenie); }

/* --- Wynik ------------------------------------------------------------ */

.wynik-glowny {
  background: linear-gradient(180deg, var(--akcent-jasny), var(--tlo-karta));
  border: 1px solid var(--akcent-obwodka);
  border-radius: var(--promien);
  padding: 34px 28px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: var(--cien-maly);
}

.wynik-kwota {
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: 750;
  letter-spacing: -.035em;
  color: var(--akcent);
  line-height: 1.05;
  display: block;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}

.wynik-etykieta { color: var(--tekst-sredni); font-size: .95rem; }

.wynik-przekreslone {
  text-decoration: line-through;
  color: var(--tekst-slaby);
  font-size: 1.1rem;
}

.cena-odblokowania { font-size: 1.2rem; margin: 20px 0 8px; }

.cena-odblokowania strong {
  color: var(--akcent);
  font-size: 1.55rem;
  letter-spacing: -.02em;
}

/* --- Komunikaty ------------------------------------------------------- */

.komunikat {
  border-radius: var(--promien-maly);
  padding: 14px 17px;
  margin: 16px 0;
  border: 1px solid;
  font-size: .95rem;
}

.komunikat--success, .komunikat--info {
  background: var(--akcent-jasny);
  border-color: var(--akcent-obwodka);
  color: var(--tekst);
}

.komunikat--error {
  background: var(--blad-tlo);
  border-color: var(--blad-obwodka);
  color: var(--tekst);
}

.uwaga {
  background: var(--ostrzezenie-tlo);
  border: 1px solid var(--ostrzezenie-obwodka);
  border-left: 3px solid var(--ostrzezenie);
  border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
  padding: 14px 17px;
  margin: 14px 0;
  font-size: .95rem;
}

.info {
  background: var(--akcent-jasny);
  border: 1px solid var(--akcent-obwodka);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
  padding: 14px 17px;
  margin: 14px 0;
  font-size: .95rem;
}

.info--rola { margin-top: 0; }
.pilne { color: var(--ostrzezenie); font-weight: 650; }

/* --- Tabele ----------------------------------------------------------- */

.tabela-obramowanie {
  overflow-x: auto;
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  margin: 18px 0;
  background: var(--tlo-karta);
}

table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 440px; }

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ramka);
  white-space: nowrap;
}

th {
  font-weight: 650;
  background: var(--tlo-delikatne);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tekst-slaby);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--tlo-delikatne); }

td.liczba, th.liczba { text-align: right; font-variant-numeric: tabular-nums; }
tr.podsumowanie td { font-weight: 700; background: var(--akcent-jasny); }

/* --- Znaczniki stanu -------------------------------------------------- */

.znacznik {
  display: inline-block;
  font-size: .78rem;
  font-weight: 650;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
  border: 1px solid;
}

.znacznik--zbieranie {
  background: var(--tlo);
  color: var(--tekst-slaby);
  border-color: var(--ramka-mocna);
}

.znacznik--gotowy {
  background: var(--akcent-jasny);
  color: var(--akcent);
  border-color: var(--akcent-obwodka);
}

.znacznik--zlozony { background: var(--akcent); color: #fff; border-color: var(--akcent); }

/* --- Listy ------------------------------------------------------------ */

ul.zalety { list-style: none; padding: 0; margin: 0; }

ul.zalety li { padding-left: 30px; position: relative; margin-bottom: 13px; }

ul.zalety li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--akcent);
  font-weight: 700;
}

.lista-zmian { list-style: none; padding: 0; margin: 0; }
.lista-zmian li { padding: 9px 0; border-bottom: 1px solid var(--ramka); }
.lista-zmian li:last-child { border-bottom: 0; }

/* --- Układ panelu ----------------------------------------------------- */

.panel-uklad {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 34px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 0;
  align-items: start;
}

.panel-menu {
  position: sticky;
  top: 90px;
  background: var(--tlo-karta);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 11px;
  box-shadow: var(--cien-maly);
}

.panel-menu nav { display: flex; flex-direction: column; gap: 2px; }

.panel-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: var(--promien-maly);
  text-decoration: none;
  color: var(--tekst-sredni);
  font-size: .95rem;
  font-weight: 500;
}

.panel-menu a:hover { background: var(--tlo-delikatne); color: var(--tekst); }

.panel-menu a.aktywna {
  background: var(--akcent-jasny);
  color: var(--akcent);
  font-weight: 650;
}

.panel-menu .ikona { color: var(--tekst-slaby); font-size: .88rem; width: 14px; }
.panel-menu a.aktywna .ikona { color: var(--akcent); }

.panel-menu-grupa {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--tekst-slaby);
  padding: 16px 13px 6px;
}

.panel-tresc { min-width: 0; }
.panel-tresc section { padding: 30px 0 0; }
.panel-tresc section:first-child { padding-top: 0; }

.okruszki { padding: 0 0 16px; font-size: .88rem; color: var(--tekst-slaby); }
.okruszki a { color: var(--tekst-slaby); }

/* --- Powitanie -------------------------------------------------------- */

.powitanie {
  background: linear-gradient(135deg, var(--akcent-jasny), var(--tlo-karta) 70%);
  border: 1px solid var(--akcent-obwodka);
  border-radius: var(--promien);
  padding: 26px 30px;
  margin-bottom: 24px;
  box-shadow: var(--cien-maly);
}

.powitanie h1 { font-size: 1.62rem; margin: 0 0 6px; }
.powitanie p { color: var(--tekst-sredni); margin: 0; }

/* --- Kafelki ---------------------------------------------------------- */

.kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
}

.kafelek {
  background: var(--tlo-karta);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 22px;
  box-shadow: var(--cien-maly);
  display: flex;
  flex-direction: column;
}

.kafelek h2 {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--tekst-slaby);
  margin: 0 0 4px;
  padding-left: 0;
}

.kafelek h2::before { display: none; }

.kafelek-rok { font-size: .82rem; color: var(--tekst-slaby); margin: 0 0 12px; }

.kafelek-liczba {
  font-size: 2.05rem;
  font-weight: 750;
  letter-spacing: -.035em;
  color: var(--akcent);
  margin: 0 0 8px;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

.kafelek-liczba span { font-size: 1.05rem; font-weight: 650; }
.kafelek-opis { font-size: .865rem; color: var(--tekst-slaby); margin: 10px 0 0; line-height: 1.5; }
.kafelek-pusty { font-size: .89rem; color: var(--tekst-slaby); margin: 8px 0 0; }
.kafelek--zadania { grid-column: span 2; }

.lista-zadan { list-style: none; padding: 0; margin: 8px 0 0; }

.lista-zadan li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ramka);
  font-size: .93rem;
}

.lista-zadan li:last-child { border-bottom: 0; }
.pilne-zadanie > span { font-weight: 650; color: var(--ostrzezenie); }

/* --- Karty terminów --------------------------------------------------- */

.karta--termin { border-left: 3px solid var(--akcent); }

.karta--pilne {
  border-left-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
  border-color: var(--ostrzezenie-obwodka);
}

.karta--pobieranie { margin-top: 28px; border-color: var(--akcent-obwodka); }

/* --- Poradnik --------------------------------------------------------- */

.wpis {
  background: var(--tlo-karta);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 24px 26px;
  margin-bottom: 16px;
  box-shadow: var(--cien-maly);
  transition: border-color .13s ease, box-shadow .13s ease;
}

.wpis:hover { border-color: var(--akcent-obwodka); box-shadow: var(--cien); }

.wpis-tytul { margin: 0 0 8px; font-size: 1.2rem; }
.wpis-tytul a { text-decoration: none; color: var(--tekst); }
.wpis-tytul a:hover { color: var(--akcent); }
.wpis-opis { color: var(--tekst-sredni); margin: 0 0 10px; }
.wpis-meta { font-size: .85rem; color: var(--tekst-slaby); }

.artykul { max-width: 68ch; }

.tresc-artykulu { font-size: 1.04rem; line-height: 1.75; }
.tresc-artykulu h2 { margin-top: 38px; padding-left: 0; }
.tresc-artykulu h2::before { display: none; }
.tresc-artykulu h3 { margin-top: 28px; }
.tresc-artykulu ul, .tresc-artykulu ol { padding-left: 22px; }
.tresc-artykulu li { margin-bottom: 8px; }

.tresc-artykulu table {
  min-width: 0;
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  margin: 20px 0;
}

.tresc-artykulu blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--akcent);
  background: var(--akcent-jasny);
  border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
}

.powiazane { margin-top: 44px; }
.powiazane-lista { list-style: none; padding: 0; margin: 0; }
.powiazane-lista li { padding: 11px 0; border-bottom: 1px solid var(--ramka); }
.powiazane-lista li:last-child { border-bottom: 0; }
.powiazane-opis { display: block; font-size: .875rem; color: var(--tekst-slaby); }

/* --- Stopka ----------------------------------------------------------- */

.stopka {
  border-top: 1px solid var(--ramka);
  margin-top: 64px;
  padding: 32px 0 44px;
  font-size: .885rem;
  color: var(--tekst-slaby);
  background: var(--tlo-karta);
}

.zastrzezenie { max-width: 72ch; }
.stopka-linki a { color: var(--tekst-slaby); }

/* --- Drobiazgi -------------------------------------------------------- */

.maly { font-size: .875rem; color: var(--tekst-slaby); }
.srodek { text-align: center; }
.brak-marginesu-dolu { margin-bottom: 0; }
[hidden] { display: none !important; }

.siatka-pozycji {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 9px 18px;
  align-items: center;
  margin: 10px 0 20px;
}

/* --- Telefony --------------------------------------------------------- */

@media (max-width: 880px) {
  /* minmax(0, 1fr), a nie samo 1fr: domyślnie ścieżka grida nie kurczy się
     poniżej szerokości treści, więc pasek menu z `nowrap` rozpychał całą
     stronę do 1140 px i reszta uciekała poza ekran. */
  .panel-uklad { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .panel-uklad > * { min-width: 0; }
  .panel-menu { position: static; }
  .panel-menu nav { flex-direction: row; flex-wrap: wrap; }
  .panel-menu-grupa { display: none; }
  .kafelek--zadania { grid-column: span 1; }
}

@media (max-width: 540px) {
  .wiersz-opakowania { align-items: flex-start; flex-direction: column; gap: 10px; }
  .wejscie-sztuk { width: 100%; }
  .wejscie-sztuk input { width: 100%; }
  .hero { padding: 40px 0 30px; }
  .karta, .kafelek { padding: 20px; }
}

/* --- Kafelki dokumentów i artykułów na pulpicie --- */

.karta--dokument { border-left: 3px solid var(--akcent); }

.karta--dokument h3 { font-size: 1rem; margin-bottom: 6px; }

.karta--dokument .przycisk { margin-top: 12px; }

.karta--artykul h3 { font-size: 1rem; line-height: 1.35; margin-bottom: 8px; }

.karta--artykul h3 a { text-decoration: none; color: var(--tekst); }

.karta--artykul h3 a:hover { color: var(--akcent); }

/* --- Rysunki w artykułach (SVG generowane w web/grafiki.py) --- */

.rysunek-blok {
  margin: 32px 0;
  padding: 8px 4px 4px;
}

.rysunek {
  display: block;
  width: 100%;
  height: auto;
}

.rysunek-blok figcaption {
  margin-top: 8px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tekst-slaby);
}

/* Kolory rysunków biorą się ze zmiennych motywu, więc tryb ciemny
   działa bez osobnej wersji grafiki. */
.rysunek text { fill: var(--tekst); font-family: inherit; }
.rysunek .r-tekst { font-size: 15px; }
.rysunek .r-maly { font-size: 12.5px; fill: var(--tekst-slaby); }
.rysunek .r-tytul { font-size: 18px; font-weight: 600; }
.rysunek .r-wynik { font-size: 16px; font-weight: 600; fill: var(--akcent); }
.rysunek .r-wynik-ostrzezenie { font-size: 16px; font-weight: 600; fill: var(--ostrzezenie); }

.rysunek .r-slupek { fill: var(--akcent); }
.rysunek .r-slupek-ostrzezenie { fill: var(--ostrzezenie); }
.rysunek .r-prog { stroke: var(--ostrzezenie); stroke-width: 2; stroke-dasharray: 6 5; }
.rysunek .r-linia { stroke: var(--ramka); stroke-width: 1; }
.rysunek .r-os { stroke: var(--ramka); stroke-width: 2; }
.rysunek .r-punkt { fill: var(--akcent); }
.rysunek .r-pasmo { fill: var(--akcent-jasny); }

.rysunek .r-segment { fill: var(--akcent); }
.rysunek .r-segment-1 { opacity: .72; }
.rysunek .r-segment-2 { opacity: .48; }
.rysunek .r-segment-3 { opacity: .28; }

.rysunek .r-tak { font-size: 15px; font-weight: 600; fill: var(--akcent); }
.rysunek .r-nie { font-size: 15px; fill: var(--tekst-slaby); }

.rysunek .r-krok { fill: var(--tlo-karta); stroke: var(--ramka); stroke-width: 1; }
.rysunek .r-krok-wynik { fill: var(--akcent-jasny); stroke: var(--akcent); stroke-width: 1; }
.rysunek .r-strzalka { stroke: var(--tekst-slaby); stroke-width: 1.5; fill: none; }

/* Cały kafelek artykułu jest klikalny.
   Zamiast opakowywać kartę w <a> (co psuje semantykę i czytniki ekranu),
   rozciągamy niewidoczną warstwę nad kartą z prawdziwego linku w tytule.
   Link zostaje jeden, a kliknąć można wszędzie. */

.karta--artykul { position: relative; }

.karta--artykul h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--promien);
}

.karta--artykul:hover {
  border-color: var(--akcent-obwodka);
  box-shadow: var(--cien);
}

.karta--artykul:hover h3 a { color: var(--akcent); }

/* =========================================================================
   Scena 3D — animowane kartony w nagłówku

   Prawdziwe trójwymiarowe przekształcenia CSS (transform-style: preserve-3d),
   bez żadnej biblioteki. Świadomie nie używamy three.js ani podobnych:
   ważą setki kilobajtów, spowalniają pierwsze wyświetlenie i psują wyniki
   Core Web Vitals, a wyszukiwarka jest tu głównym kanałem sprzedaży.
   Całość to kilka kilobajtów CSS i zero JavaScriptu.
   ========================================================================= */

.hero--zdjecie {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 0 52px;
}

.scena {
  position: relative;
  height: 340px;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}

/* --- Główny karton --- */

.pudelko {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  transform-style: preserve-3d;
  animation: obrot 26s linear infinite, unoszenie 6s ease-in-out infinite;
}

.sciana {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(120, 82, 45, .35);
}

/* Tektura: każda ściana ma inny odcień, żeby bryła czytała się jako bryła. */
.sciana--przod  { background: linear-gradient(160deg, #d9b183, #c79c6a); transform: translateZ(75px); }
.sciana--tyl    { background: linear-gradient(160deg, #b98d5e, #a87c4f); transform: rotateY(180deg) translateZ(75px); }
.sciana--prawa  { background: linear-gradient(160deg, #c9a273, #b3885a); transform: rotateY(90deg) translateZ(75px); }
.sciana--lewa   { background: linear-gradient(160deg, #c9a273, #b3885a); transform: rotateY(-90deg) translateZ(75px); }
.sciana--gora   { background: linear-gradient(160deg, #e6c69b, #d4ae7f); transform: rotateX(90deg) translateZ(75px); }
.sciana--dol    { background: linear-gradient(160deg, #9e7346, #8b6339); transform: rotateX(-90deg) translateZ(75px); }

/* Taśma pakowa na przedniej ścianie — detal, który czyni z sześcianu karton. */
.sciana--przod::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 26px;
  margin-left: -13px;
  background: rgba(255, 253, 245, .55);
  border-left: 1px solid rgba(120, 82, 45, .2);
  border-right: 1px solid rgba(120, 82, 45, .2);
}

/* Nadruk na górnej ścianie */
.sciana--gora::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 26px;
  margin-left: -13px;
  background: rgba(255, 253, 245, .4);
}

/* --- Cień i poświata --- */

.scena::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--akcent-jasny) 0%, transparent 68%);
  z-index: -1;
}

.cien-pudelka {
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 150px;
  height: 22px;
  margin-left: -75px;
  background: radial-gradient(ellipse, rgba(27, 26, 23, .17), transparent 70%);
  animation: cien 6s ease-in-out infinite;
}

@keyframes obrot {
  from { transform: rotateX(-16deg) rotateY(0deg); }
  to   { transform: rotateX(-16deg) rotateY(360deg); }
}

@keyframes unoszenie {
  0%, 100% { margin-top: -75px; }
  50%      { margin-top: -92px; }
}

@keyframes cien {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(.82);  opacity: .55; }
}

/* --- Kafelki na stronie głównej z lekką głębią --- */

.karta--efekt {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.karta--efekt:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-duzy);
  border-color: var(--akcent-obwodka);
}

/* --- Liczby na stronie głównej --- */

.liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin: 8px 0 0;
}

.liczba-duza {
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--akcent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.liczba-opis { font-size: .87rem; color: var(--tekst-slaby); margin-top: 2px; }

/* --- Kroki --- */

.kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }

.krok { position: relative; padding-top: 8px; }

.krok-numer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--akcent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 12px;
}

/* --- Szacunek dla ustawień dostępności --- */
/* Część osób ma w systemie wyłączone animacje — dla nich scena stoi. */

@media (prefers-reduced-motion: reduce) {
  .pudelko, .cien-pudelka { animation: none !important; }
  .pudelko { transform: rotateX(-16deg) rotateY(-28deg); }
  .karta--efekt:hover { transform: none; }
}

@media (max-width: 860px) {
  .hero--zdjecie { grid-template-columns: 1fr; gap: 20px; }
  .scena { height: 250px; order: -1; }
}

/* --- Wyłanianie się sekcji przy przewijaniu --- */
/* Klasę `wylon` dokłada skrypt. Bez JavaScriptu treść jest widoczna
   normalnie — nigdy nie chowamy jej w samym CSS. */

.wylon {
  opacity: 0;
  transform: translateY(26px);
}

.wylon--widoczny {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* Kolejne kafelki w rzędzie pojawiają się z niewielkim opóźnieniem,
   dzięki czemu rząd „nabiega” zamiast mrugać naraz. */
.wylon--widoczny:nth-child(2) { transition-delay: .08s; }
.wylon--widoczny:nth-child(3) { transition-delay: .16s; }
.wylon--widoczny:nth-child(4) { transition-delay: .24s; }

.scena { transition: transform .1s linear; }

@media (prefers-reduced-motion: reduce) {
  .wylon, .wylon--widoczny { opacity: 1; transform: none; transition: none; }
  .scena { transform: none !important; }
}

/* --- Cennik --- */

.cennik-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}

.plan { position: relative; margin-bottom: 0; }

.plan--wyrozniony {
  border-color: var(--akcent);
  border-width: 2px;
  box-shadow: var(--cien);
}

.plan-plakietka {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--akcent);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: 4px 13px;
}

.plan-nazwa {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-slaby);
  margin: 4px 0 8px;
}

.plan-cena {
  font-size: 2.6rem;
  font-weight: 750;
  letter-spacing: -.035em;
  color: var(--akcent);
  line-height: 1.05;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.plan-cena span { font-size: 1.3rem; font-weight: 650; }
.plan-opis { font-size: .88rem; color: var(--tekst-slaby); margin: 4px 0 20px; }
.plan ul.zalety { margin-bottom: 22px; }
.plan ul.zalety li { font-size: .92rem; margin-bottom: 10px; }

/* --- Pasek z przykładowym wypełnieniem ------------------------------------
   Pusty kalkulator nie tłumaczy sam siebie. Ten pasek jest zachętą przed
   wypełnieniem i ostrzeżeniem po nim — żeby nikt nie wziął przykładowych
   liczb za własne wyliczenie. */

.pasek-przykladu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--akcent-obwodka);
  border-radius: 12px;
  background: var(--akcent-jasny);
  color: var(--tekst-sredni);
  line-height: 1.5;
}

.pasek-przykladu > div {
  flex: 1 1 320px;
}

.pasek-przykladu strong {
  color: var(--tekst);
}

.pasek-przykladu .przycisk {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Po włączeniu przykładu kolor się zmienia na ostrzegawczy — dane na
   ekranie nie są danymi użytkownika i to musi być widoczne od razu. */
.pasek-przykladu--wlaczony {
  border-color: var(--ostrzezenie-obwodka);
  background: var(--ostrzezenie-tlo);
}

/* --- Zdjęcia otwierające artykuły --- */

.obrazek-otwierajacy {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px 0 8px;
  border-radius: var(--promien);
  /* Miejsce rezerwowane od razu, żeby tekst nie podskakiwał przy ładowaniu. */
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--akcent-jasny);
}

.wpis--z-obrazkiem {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: start;
}

.wpis-miniatura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--akcent-jasny);
}

@media (max-width: 560px) {
  .wpis--z-obrazkiem { grid-template-columns: 1fr; }
  .wpis-miniatura img { aspect-ratio: 16 / 9; }
}

/* ======================================================================
   TELEFONY
   ======================================================================

   Sprzedawca na Allegro pakuje paczki i sprawdza rzeczy z telefonu —
   to nie jest narzędzie, przy którym ktoś siada do biurka. Poniższe
   reguły są ułożone od najpoważniejszego problemu do najdrobniejszego.
*/

/* --- 1. Pola formularza: minimum 16 px --------------------------------
   Safari na iPhonie automatycznie przybliża stronę, gdy użytkownik kliknie
   w pole o czcionce mniejszej niż 16 px — i już jej nie odsuwa. Przy
   kalkulatorze z kilkudziesięcioma polami to oznacza walkę z ekranem przy
   każdym wpisie. To jest najczęstszy błąd responsywności i najbardziej
   irytujący dla użytkownika.
*/

@media (max-width: 880px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* --- 2. Menu panelu jako pasek zakładek -------------------------------
   Domyślnie menu boczne zawija się na telefonie w kilka rzędów i zjada
   600 px, zanim pokaże się jakakolwiek treść. Zamiast tego robimy z niego
   jeden pasek przewijany w poziomie — wzorzec znany z zakładek w aplikacjach.
*/

@media (max-width: 880px) {
  .panel-menu {
    margin: 0 calc(20px * -1);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  .panel-menu nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 4px 20px 10px;
    /* Zatrzymuje pozycje na krawędzi — pasek nie zostaje „w połowie". */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .panel-menu nav::-webkit-scrollbar { display: none; }

  .panel-menu nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 11px 16px;
    border: 1px solid var(--ramka);
    border-radius: 999px;
    background: var(--tlo-karta);
    font-size: .95rem;
  }

  .panel-menu nav a.aktywna {
    border-color: var(--akcent-obwodka);
    background: var(--akcent-jasny);
  }

  /* Ikony w pasku zakładek tylko zabierają miejsce. */
  .panel-menu nav a .ikona { display: none; }
}

/* --- 3. Nagłówek strony ----------------------------------------------
   Nawigacja zawijała się na dwa rzędy i zajmowała 122 px, czyli 15 %
   ekranu, na każdej podstronie. Zwijamy ją w jeden przewijany pasek.
*/

@media (max-width: 880px) {
  .pasek-tresc {
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 6px;
  }

  .logo { font-size: 1.05rem; }

  .pasek-tresc nav {
    width: 100%;
    overflow-x: auto;
    /* white-space nie powstrzymuje zawijania we flexie — potrzebny jest
       flex-wrap, inaczej nawigacja dalej łamie się na dwa rzędy. */
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .pasek-tresc nav::-webkit-scrollbar { display: none; }

  .pasek-tresc nav a,
  .pasek-tresc nav button {
    display: inline-flex;
    align-items: center;
    /* 44 px to minimalny obszar dotyku, przy którym palec trafia pewnie. */
    min-height: 44px;
    padding: 0 10px;
    font-size: .95rem;
  }
}

/* --- 4. Kolejność w sekcji powitalnej ---------------------------------
   Karton 3D był ustawiony PRZED tekstem (order: -1), więc na telefonie
   pierwszą rzeczą po wejściu na stronę było pudełko, a nie zdanie
   mówiące, co ta strona załatwia. Odwracamy: najpierw treść.
*/

@media (max-width: 860px) {
  .scena {
    order: 1;
    height: 200px;
  }
}

/* --- 5. Obszary dotyku ------------------------------------------------ */

@media (max-width: 880px) {
  .przycisk,
  button[type="submit"] {
    min-height: 44px;
  }

  /* Przyciski obok siebie nie mieszczą się w rzędzie — układamy je
     jeden pod drugim i rozciągamy na całą szerokość. */
  .hero-przyciski { flex-direction: column; }

  .hero-przyciski .przycisk,
  .pasek-przykladu .przycisk {
    display: block;
    width: 100%;
    text-align: center;
  }

  .pasek-przykladu .przycisk + .przycisk { margin-top: 10px; }
}

/* --- 6. Tabele przewijane w poziomie ----------------------------------
   Tabela z wyliczeniem ma 6 kolumn i nie zmieści się na żadnym telefonie.
   Kontener już się przewija, ale nic tego nie zapowiada — bez wskazówki
   użytkownik uzna, że brakujące kolumny po prostu nie istnieją.
*/

.tabela-obramowanie {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 880px) {
  .tabela-obramowanie::after {
    content: "Przesuń palcem w bok, żeby zobaczyć resztę kolumn →";
    display: block;
    padding: 8px 12px;
    background: var(--tlo-delikatne);
    border-top: 1px solid var(--ramka);
    color: var(--tekst-slaby);
    font-size: .8rem;
    /* Przyklejone do lewej krawędzi, żeby wskazówkę było widać
       niezależnie od tego, jak daleko tabela jest przewinięta. */
    position: sticky;
    left: 0;
  }

  .tabela-obramowanie table { min-width: 560px; }
}

/* --- 7. Typografia ---------------------------------------------------- */

@media (max-width: 540px) {
  h1 { font-size: 1.9rem; line-height: 1.15; }
  h2 { font-size: 1.35rem; }
  .lead { font-size: 1.02rem; }

  .kontener { padding-left: 18px; padding-right: 18px; }
  .karta, .kafelek { padding: 18px; }

  /* Wynik wyliczenia to najważniejsza liczba na stronie — ma być duża,
     ale nie może wychodzić poza ekran przy kwotach czterocyfrowych. */
  .wynik-kwota { font-size: 2.4rem; word-break: keep-all; }
}

/* --- 8. Dokumenty prawne ---------------------------------------------- */

@media (max-width: 880px) {
  .dokument .lista-danych dt { margin-top: 14px; }
  .dokument .lista-danych dd { margin-left: 0; }
}

/* --- 9. Klauzula informacyjna ----------------------------------------- */

.klauzula {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--ramka);
  border-radius: 10px;
  background: var(--tlo-delikatne);
  font-size: .9rem;
}

.klauzula summary {
  cursor: pointer;
  min-height: 32px;
  color: var(--tekst-sredni);
}

.klauzula-skrot {
  display: block;
  margin-top: 3px;
  color: var(--tekst-slaby);
}

.klauzula-tresc { margin-top: 10px; }

.klauzula-tresc ul {
  margin: 8px 0;
  padding-left: 18px;
  line-height: 1.55;
}

.klauzula-tresc li { margin-bottom: 6px; }

/* --- 10. Strona „Moje dane i prywatność" ------------------------------ */

.lista-danych dt {
  margin-top: 12px;
  font-weight: 600;
  color: var(--tekst);
}

.lista-danych dd {
  margin: 2px 0 0;
  color: var(--tekst-sredni);
}

.karta--ostrzezenie {
  border-color: var(--ostrzezenie-obwodka);
  background: var(--ostrzezenie-tlo);
}

.przycisk--niebezpieczny {
  background: #a5352c;
  border-color: #a5352c;
  color: #fff;
}

.przycisk--niebezpieczny:hover { background: #8c2b23; border-color: #8c2b23; }

.formularz-usuwania { margin-top: 14px; }

.formularz-usuwania input[type="text"] { max-width: 260px; }

/* --- 11. Zgoda przy rejestracji --------------------------------------- */

.etykieta-zgody {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.5;
}

.etykieta-zgody input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.pole--zgoda { margin: 18px 0; }

/* --- 12. Stopka ------------------------------------------------------- */

.stopka-linki--prawne { margin-top: 6px; }

@media (max-width: 540px) {
  .stopka-linki { display: flex; flex-direction: column; gap: 10px; }
  .stopka-linki a { min-height: 32px; }
}


/* Przyciski w sekcji powitalnej. Flex zamiast dwóch elementów inline:
   między nimi w kodzie jest znak nowej linii, który liczy się jako spacja
   i potrafi zepchnąć drugi przycisk do następnego wiersza. */
.hero-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

/* Odnośnik do próbki arkusza — celowo dyskretny, żeby nie konkurował
   z głównym przyciskiem, ale widoczny dokładnie tam, gdzie klient się waha. */
.link-probka {
  font-size: .92rem;
  color: var(--tekst-sredni);
}

/* Wyjście awaryjne przy liście opakowań: „nie ma mojego rozmiaru".
   Wyróżnione tłem, bo w gąszczu piętnastu kategorii zwykły akapit ginie. */
.brak-rozmiaru {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px dashed var(--ramka-mocna);
  border-radius: var(--promien-maly);
  background: var(--tlo-delikatne);
  color: var(--tekst-sredni);
}

/* --- Lejek w statystykach właściciela ---------------------------------- */

.lejek-krok { margin-bottom: 18px; }

.lejek-opis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.lejek-pasek {
  height: 26px;
  border-radius: 6px;
  background: var(--tlo-delikatne);
  border: 1px solid var(--ramka);
  overflow: hidden;
}

.lejek-wypelnienie {
  height: 100%;
  min-width: 2px;
  background: var(--akcent);
  border-radius: 5px 0 0 5px;
}

.lejek-spadek { margin-top: 5px; color: var(--tekst-slaby); }

.kafelek--wyrozniony {
  border-color: var(--ostrzezenie-obwodka);
  background: var(--ostrzezenie-tlo);
}

.kafelek-liczba {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 4px 0 2px;
}

.komunikat--info {
  border: 1px solid var(--akcent-obwodka);
  background: var(--akcent-jasny);
  color: var(--tekst-sredni);
  padding: 14px 16px;
  border-radius: var(--promien-maly);
  margin-bottom: 22px;
  line-height: 1.5;
}