/* Rozmiary tekstu, pól i przycisków są zwarte, jak w prostych systemach B2B (tekst 13 px, tabele 12–12,5 px).
   Wygląd wzorowany na horecart.pl: czcionka Raleway (arkusz czcionki.css), jasne waniliowe tło, piaskowe ramki,
   złote przyciski z zaokrąglonymi rogami. Paleta marki HorecArt – w programie używamy wyłącznie tych kolorów. */
:root {
  --grafit: #2D3237;        /* nagłówki, tekst podstawowy, tło nagłówka tabeli */
  --grafit-wyblakly: #41484E; /* tekst pomocniczy, przypisy, stopka */
  --zloty: #D6AC63;         /* akcenty, linie pod nagłówkami */
  --miodowy: #E6C69A;       /* tło wierszy podsumowania */
  --wanilia: #FAF9F6;       /* tło strony */
  --piasek: #F2EFE9;        /* nagłówek, ramki, co drugi wiersz tabeli */
  --bez: #E5DED4;           /* ramki i linie tabel */
  --biel: #FFFFFF;
  /* Treść ma stałą szerokość i stoi na środku okna – tak jak w B2B Stalgast (tam 1170 px) – zamiast rozciągać się
     na cały ekran. Tę samą szerokość mają nagłówek i stopka, żeby logo stało nad lewą krawędzią treści. */
  --szerokosc: 1180px;
}

* { box-sizing: border-box; }
/* „lnum”: cyfry równej wysokości – bez tego Raleway rysuje cyfry nautyczne (3, 4, 5, 7, 9 schodzą pod linię) */
body { margin: 0; background: var(--wanilia); color: var(--grafit); font: 13px/1.45 Raleway, system-ui, sans-serif;
       font-feature-settings: "lnum" 1; }
a { color: var(--grafit); }
small { display: block; color: var(--grafit-wyblakly); font-size: 11px; }
code { background: var(--piasek); padding: 1px 5px; border-radius: 3px; }

/* nagłówek: jasny pas, logo z lewej, odnośniki z prawej */
.gora { background: var(--piasek); border-bottom: 1px solid var(--bez); }
.gora .srodek { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--szerokosc); min-height: 54px;
                margin: 0 auto; padding: 0 20px; }
.gora .marka { display: flex; align-items: center; }
.gora .marka img { display: block; width: auto; height: 34px; }
.gora nav { display: flex; gap: 28px; }
.gora nav a { padding: 5px 0; border-bottom: 2px solid transparent; color: var(--grafit); font-size: 12px; font-weight: 600; text-decoration: none; }
.gora nav a:hover, .gora nav a.aktywna { border-bottom-color: var(--zloty); }

main { max-width: var(--szerokosc); margin: 0 auto; padding: 18px 20px 48px; }
h1 { margin: 4px 0 12px; font-size: 23px; font-weight: 400; letter-spacing: .01em; }
h1 strong { font-weight: 700; }
h2 { margin: 22px 0 8px; font-size: 17px; font-weight: 600; }

/* wyszukiwarka */
.szukaj { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px;
          background: var(--piasek); border-radius: 8px; }
.szukaj input[type=search] { flex: 1 1 320px; font: inherit; font-size: 14.5px; padding: 6px 10px;
          border: 1px solid var(--bez); border-radius: 5px; color: var(--grafit); background: var(--biel); }
.szukaj input[type=search]:focus, .szukaj select:focus { outline: 2px solid var(--zloty); outline-offset: 0; }
.szukaj select { font: inherit; padding: 6px 8px; border: 1px solid var(--bez); border-radius: 5px;
          background: var(--biel); color: var(--grafit); }
.szukaj button { font: inherit; padding: 6px 18px; border: 0; border-radius: 10px; background: var(--zloty);
          color: var(--grafit); font-weight: 700; cursor: pointer; }
.szukaj button:hover { background: var(--grafit); color: var(--biel); }
.haczyk { color: var(--grafit-wyblakly); white-space: nowrap; }

.licznik { color: var(--grafit-wyblakly); margin: 0 0 8px; }
.wybor { margin: 0 0 12px; padding: 9px 12px; background: var(--miodowy); border-radius: 4px; font-weight: 600; }
.pusto { padding: 20px; text-align: center; background: var(--piasek); border-radius: 8px; }
.podpowiedz { color: var(--grafit-wyblakly); max-width: 720px; }

/* tabele */
.tabela { width: 100%; border-collapse: collapse; }
.tabela.waska { width: auto; min-width: 460px; }
.tabela th, .tabela td { padding: 6px 9px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bez); }
.tabela thead th { background: var(--piasek); color: var(--grafit); font-weight: 700; font-size: 11.5px; white-space: nowrap;
                   border-top: 1px solid var(--bez); }
.tabela tbody tr:nth-child(even) { background: var(--piasek); }
.tabela .liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela.pary th { width: 220px; font-weight: 400; color: var(--grafit-wyblakly); }
.tabela.pary tr:nth-child(even) { background: var(--piasek); }

.wyniki .foto { width: 66px; }
.wyniki .foto img { width: 54px; height: 54px; object-fit: contain; background: var(--biel); border: 1px solid var(--bez); border-radius: 4px; display: block; }
.wyniki .kod a { font-weight: 700; white-space: nowrap; }
.wyniki .nazwa { text-decoration: none; font-weight: 600; }
.wyniki .nazwa:hover { text-decoration: underline; }
.wyniki tr.dokladny td { background: var(--biel); box-shadow: inset 0 2px 0 var(--zloty), inset 0 -2px 0 var(--zloty); }
.wyniki tr.wycofany .nazwa { text-decoration: line-through; color: var(--grafit-wyblakly); }
.wewn { color: var(--grafit-wyblakly); }

.brak-foto { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; text-align: center;
             font-size: 10px; line-height: 1.2; color: var(--grafit-wyblakly); background: var(--piasek);
             border: 1px dashed var(--bez); border-radius: 4px; }
.brak-foto.duzy { width: 100%; height: 260px; font-size: 12.5px; }

.znaczek { display: inline-block; margin: 2px 0 0 6px; padding: 1px 7px; font-size: 10.5px; font-weight: 600;
           border: 1px solid var(--grafit-wyblakly); border-radius: 10px; color: var(--grafit-wyblakly); white-space: nowrap; }
.znaczek.zloty { border-color: var(--zloty); background: var(--zloty); color: var(--grafit); margin-left: 0; }
.znaczek.ciemny { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }

/* strona produktu */
.wroc { margin: 0 0 6px; }
.karta { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 28px; align-items: start; }
.zdjecia #duze { width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--bez); border-radius: 6px; background: var(--biel); }
.miniatury { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.miniatury img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--bez); border-radius: 4px; cursor: pointer; background: var(--biel); }
.miniatury img:hover { border-color: var(--zloty); }
.ceny { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.ceny > div { flex: 1 1 200px; padding: 12px 14px; background: var(--piasek); border: 1px solid var(--bez); border-radius: 8px; }
.ceny span { display: block; font-size: 11px; color: var(--grafit-wyblakly); }
.ceny em { font-style: normal; }
.ceny strong { font-size: 17px; color: var(--grafit); }
.ceny .wewn { border-style: dashed; }
.linki a { margin-right: 18px; font-weight: 600; }
.linki small { display: inline; }
.opis { white-space: pre-line; max-width: 860px; margin-top: 0; }
.stopka { margin-top: 36px; padding-top: 10px; border-top: 1px solid var(--bez); color: var(--grafit-wyblakly); font-size: 11px; }

@media (max-width: 760px) {
  .karta { grid-template-columns: 1fr; }
  main { padding: 16px; }
}

/* ---------- oferty ---------- */
button { font: inherit; padding: 5px 11px; border: 1px solid var(--bez); border-radius: 8px; background: var(--biel);
         color: var(--grafit); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--zloty); }
button:disabled { color: var(--bez); cursor: default; }
button.glowny, a.przycisk.glowny, button.nowa, a.przycisk.nastepny {
         padding: 8px 20px; border-color: var(--zloty); border-radius: 10px; background: var(--zloty); color: var(--grafit);
         font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
button.glowny:hover:not(:disabled), a.przycisk.glowny:hover, button.nowa:hover:not(:disabled), a.przycisk.nastepny:hover {
         border-color: var(--grafit); background: var(--grafit); color: var(--biel); }
button.link { border: 0; padding: 0; background: none; color: var(--grafit-wyblakly); font-size: 11px; text-decoration: underline; }
button.maly { padding: 1px 4px; font-size: 10px; margin-top: 3px; }
input, select, textarea { font: inherit; color: var(--grafit); background: var(--biel); border: 1px solid var(--bez);
         border-radius: 5px; padding: 4px 7px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--zloty); outline-offset: 0; }
input.bledne { outline: 2px solid var(--grafit); background: var(--miodowy); }
textarea { width: 100%; resize: vertical; }

.pasek { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pasek h1, .pasek h2 { margin: 0; flex: 0 0 auto; }
.pasek h1 { flex: 1 1 auto; }
.pasek form { margin: 0; }
.pasek.dol { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--bez); }
.tytul { flex: 1 1 320px; font-size: 18px; font-weight: 700; border-width: 0 0 2px; border-color: var(--zloty); border-radius: 0; padding: 4px 2px; }
.stan { color: var(--grafit-wyblakly); font-size: 11px; white-space: nowrap; }
.stan.blad { color: var(--grafit); font-weight: 700; background: var(--miodowy); padding: 4px 8px; border-radius: 4px; white-space: normal; }
.stopka-oferty { color: var(--grafit-wyblakly); font-size: 11px; margin-left: auto; }

.belka { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 14px; background: var(--piasek);
         border: 1px solid var(--bez); border-radius: 6px; }
.belka label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 170px; font-size: 11px; color: var(--grafit-wyblakly); }
.belka label.szerokie { flex: 2 1 340px; }
.belka input { font-size: 13px; }
.klient { margin: 16px 0 0; padding: 0; border: 0; }
.klient legend { font-weight: 700; font-size: 14px; padding: 0 0 5px; margin-bottom: 10px; }
.klient-akcje { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }

.dodawanie { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.pole-kodu { position: relative; flex: 1 1 420px; }
.pole-kodu input { width: 100%; font-size: 14.5px; padding: 9px 12px; }
#podpowiedzi { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 3px; max-height: 460px; overflow-y: auto;
               background: var(--biel); border: 1px solid var(--grafit-wyblakly); border-radius: 4px; box-shadow: 0 6px 18px rgba(45, 50, 55, .18); }
#podpowiedzi ul { list-style: none; margin: 0; padding: 0; }
#podpowiedzi li { display: flex; gap: 10px; align-items: center; padding: 5px 9px; border-bottom: 1px solid var(--bez); cursor: pointer; font-size: 12px; }
#podpowiedzi li:hover, #podpowiedzi li.zaznaczony { background: var(--piasek); }
#podpowiedzi li.dokladny { box-shadow: inset 3px 0 0 var(--zloty); }
#podpowiedzi img, #podpowiedzi .brak-foto { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border: 1px solid var(--bez); border-radius: 4px; }
.opis-podpowiedzi { flex: 1 1 auto; }
.cena-podpowiedzi { white-space: nowrap; font-weight: 600; }
.komunikat { margin: 0; padding: 8px 10px; background: var(--miodowy); font-weight: 600; font-size: 12px; }

.narzedzia { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; color: var(--grafit-wyblakly); font-size: 12px; }
.narzedzia input { width: 60px; text-align: right; }
.narzedzia details { flex: 1 1 360px; }
.narzedzia summary { cursor: pointer; text-decoration: underline; }
.narzedzia details p { margin: 8px 0; }
#raport-wklejania { margin-top: 6px; color: var(--grafit); font-weight: 600; }

#pozycje { overflow-x: auto; }
.pozycje { font-size: 12px; }
.pozycje th, .pozycje td { padding: 7px 6px; }
.pozycje tbody:nth-of-type(even) { background: var(--piasek); }
.pozycje tbody tr:nth-child(even) { background: none; }
.pozycje .lp { width: 44px; color: var(--grafit-wyblakly); white-space: nowrap; }
.pozycje .foto { width: 66px; }
.pozycje .foto img { width: 56px; height: 56px; object-fit: contain; background: var(--biel); border: 1px solid var(--bez); border-radius: 4px; display: block; }
.pozycje .foto .brak-foto { width: 56px; height: 56px; }
.pozycje .produkt { min-width: 230px; }
.pozycje .produkt input { width: 100%; font-weight: 600; }
.pozycje .skad { font-size: 11px; color: var(--grafit-wyblakly); margin-bottom: 3px; }
.pozycje input.liczbowe { width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.pozycje input.kwota { width: 86px; }
.pozycje input.waskie { width: 48px; }
.pozycje .mocne { font-weight: 700; }
.pozycje .opis-wiersz td { border-bottom: 1px solid var(--bez); padding-top: 0; }
.akcje { white-space: nowrap; text-align: right; }

/* sekcje kosztorysu: wiersz z numerem, nazwą i sumą sekcji nad jej pozycjami */
.cel-dodawania { display: flex; gap: 6px 18px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; font-size: 12px;
                 color: var(--grafit-wyblakly); }
.cel-dodawania select { margin-left: 6px; font-weight: 600; }
.pozycje tbody.sekcja { background: var(--wanilia); }
.pozycje tbody.sekcja td { padding-top: 10px; padding-bottom: 10px; vertical-align: middle; border-top: 2px solid var(--zloty); }
.pozycje tbody.sekcja .lp { font-size: 13px; font-weight: 700; color: var(--grafit); }
.pozycje tbody.sekcja input { width: min(100%, 460px); font-size: 13px; font-weight: 700; }
.pozycje tbody.sekcja small { display: inline; margin-left: 10px; }
.nazwa-sekcji { font-size: 13px; }
.pozycje select.przenies { max-width: 180px; margin-left: 10px; padding: 1px 4px; font-size: 11px; color: var(--grafit-wyblakly); }
.akcje form { display: inline; }
.akcje button { padding: 3px 8px; }

.wewn-kol { background-image: linear-gradient(var(--wanilia), var(--wanilia)); border-left: 1px dashed var(--bez); }
thead .wewn-kol { background: var(--bez); }
body.bez-wewn .wewn-kol, body.bez-wewn .wewn-blok { display: none; }

.podsumowanie { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; margin-top: 18px; }
.sumy { border-collapse: collapse; min-width: 340px; border: 1px solid var(--bez); }
.sumy caption { text-align: left; font-weight: 700; padding: 8px 12px; background: var(--grafit); color: var(--biel); }
.sumy th { text-align: left; font-weight: 400; padding: 7px 12px; border-bottom: 1px solid var(--bez); }
.sumy td { text-align: right; padding: 7px 12px; border-bottom: 1px solid var(--bez); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sumy .razem th, .sumy .razem td { background: var(--miodowy); font-weight: 700; }
.sumy.wewn-blok { border-style: dashed; }
.sumy.wewn-blok caption { background: var(--grafit-wyblakly); }
.sumy .uwaga { text-align: left; white-space: normal; font-size: 11px; color: var(--grafit-wyblakly); max-width: 340px; }

/* ---------- dodawanie do oferty z listy produktów, wersja programu ---------- */
.do-oferty-pasek { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                   margin-bottom: 10px; padding: 6px 12px; background: var(--miodowy); border-radius: 6px; font-weight: 600; }
.do-oferty-pasek select { font-weight: 400; max-width: 380px; }
.do-oferty-pasek a { font-weight: 400; }
.do-oferty-pasek .stan { color: var(--grafit); font-weight: 400; white-space: normal; }
.do-oferty-pasek .stan.blad { background: var(--grafit); color: var(--biel); }
td.dodaj { white-space: nowrap; }
.dodaj input.liczbowe { width: 54px; text-align: right; margin-right: 6px; }
.dodaj.duzy { margin: 0 0 18px; }
.dodaj.duzy input.liczbowe { width: 70px; font-size: 14.5px; padding: 6px; }
.dodaj.duzy button { font-size: 14px; padding: 7px 18px; }
.nowa-wersja { margin: 0; padding: 8px 20px; background: var(--miodowy); border-bottom: 2px solid var(--zloty); }
footer.wersja { max-width: var(--szerokosc); margin: 0 auto; padding: 0 20px 24px; color: var(--grafit-wyblakly); font-size: 11px; }

/* ---------- eksport ---------- */
#eksport { margin-top: 26px; }
.belka.kolumny { align-items: center; gap: 8px 20px; margin-bottom: 12px; }
.belka.kolumny label { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; color: var(--grafit); }
a.przycisk { display: inline-block; padding: 5px 12px; border: 1px solid var(--bez); border-radius: 8px; background: var(--biel);
             color: var(--grafit); text-decoration: none; }
a.przycisk:hover { border-color: var(--zloty); }
a.przycisk.wewn-blok { border-style: dashed; }

/* ---------- informacje uzupełniające ---------- */
#informacje { margin-top: 26px; }
#informacje .podpowiedz { margin: 0 0 10px; font-size: 11.5px; }
.informacja { display: flex; gap: 8px; margin-bottom: 6px; }
.informacja .etykieta { flex: 0 0 240px; font-weight: 600; }
.informacja .tresc { flex: 1 1 auto; }
.informacja button { padding: 4px 9px; }

/* =====================================================================
   Tworzenie oferty w dwóch krokach (wzór: prosty koszyk B2B).
   Krok 1 – produkty: tabela z wierszem „Wpisz”, ilością, rabatem i przyciskiem „i”.
   Krok 2 – dane klienta i oferty, informacje uzupełniające, kosztorys.
   Reguły poniżej nadpisują starsze (wyżej) tylko na tych dwóch ekranach.
   ===================================================================== */
main.kreator { padding-top: 12px; }
.okruszki { margin: 0 0 10px; padding: 5px 10px; background: var(--piasek); border-radius: 6px; font-size: 11.5px; color: var(--grafit-wyblakly); }
.okruszki a { color: var(--grafit); text-decoration: none; }
.okruszki a:hover { text-decoration: underline; }
.okruszki span { margin: 0 4px; }
.naglowek-kreatora { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.naglowek-kreatora h1 { margin: 0; font-size: 23px; font-weight: 700; }
.naglowek-kreatora h1 small { display: inline; margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--grafit-wyblakly); }
.kroki { display: flex; gap: 6px; }
.kroki a { padding: 4px 12px; border: 1px solid var(--bez); border-radius: 8px; background: var(--biel); color: var(--grafit-wyblakly); font-size: 12.5px; text-decoration: none; }
.kroki a:hover { border-color: var(--zloty); color: var(--grafit); }
.kroki a.aktywny { border-color: var(--grafit); background: var(--grafit); color: var(--biel); font-weight: 600; }
.naglowek-kreatora .stan { margin-left: auto; }
.kreator #oferta { position: relative; }
.kreator h2 { margin: 0 0 8px; font-size: 19px; font-weight: 400; }

.nazwa-oferty { margin-bottom: 16px; }
.nazwa-oferty label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; }
.nazwa-oferty input { width: min(100%, 460px); padding: 5px 8px; font-size: 14px; }
.kreator .naglowek-czesci { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 4px; }
.kreator .naglowek-czesci h2 { margin: 0 0 6px; }
.kreator .przelacznik { font-size: 12px; }

/* --- tabela produktów --- */
.kreator #pozycje { overflow-x: auto; }
.kreator .pozycje { font-size: 12.5px; }
.kreator .pozycje thead th { padding: 7px 5px; background: var(--piasek); color: var(--grafit); font-size: 11.5px; font-weight: 700; line-height: 1.25;
                             white-space: normal; vertical-align: middle; border-top: 1px solid var(--bez); border-bottom: 1px solid var(--bez); }
.kreator .pozycje tbody, .kreator .pozycje tbody:nth-of-type(even) { background: var(--biel); }
.kreator .pozycje tbody tr:nth-child(even) { background: none; }
.kreator .pozycje td { padding: 5px 5px; vertical-align: middle; border-bottom: 1px solid var(--bez); }
.kreator .pozycje .lp { width: 34px; text-align: center; color: var(--grafit); white-space: nowrap; }
.kreator .pozycje .zaznacz { width: 24px; text-align: center; }
.kreator .pozycje .zaznacz input { width: 14px; height: 14px; accent-color: var(--grafit); vertical-align: middle; }
.kreator .pozycje td.kod { white-space: nowrap; }
.kreator .pozycje td.produkt { min-width: 200px; }
.nazwa-i-info { display: flex; align-items: center; gap: 8px; }
.nazwa-i-info .nazwa { flex: 1 1 auto; }
.nazwa-i-info input { flex: 1 1 auto; min-width: 0; font-weight: 400; }
button.info { flex: 0 0 19px; width: 19px; height: 19px; padding: 0; border: 1px solid var(--grafit-wyblakly); border-radius: 50%; background: var(--biel);
              color: var(--grafit-wyblakly); font-size: 11.5px; font-style: italic; font-weight: 700; line-height: 17px; text-align: center; }
button.info:hover { border-color: var(--zloty); background: var(--zloty); color: var(--grafit); }
.kreator .pozycje input.liczbowe { width: 52px; padding: 4px 5px; text-align: right; font-variant-numeric: tabular-nums; }
.kreator .pozycje input.kwota { width: 74px; }
.kreator .pozycje .mocne { font-weight: 700; }

/* ilość z przyciskami − i +, rabat z doklejonym znakiem % */
.kreator td.ilosc, .kreator td.rabat { white-space: nowrap; }
.licznik { display: inline-flex; align-items: stretch; vertical-align: middle; }
.licznik button { padding: 0 5px; border: 1px solid var(--bez); border-radius: 0; background: var(--wanilia); color: var(--grafit-wyblakly);
                  font-size: 15.5px; font-weight: 600; line-height: 1; }
.licznik button:first-child { border-right: 0; border-radius: 4px 0 0 4px; }
.licznik button:last-child { border-left: 0; border-radius: 0 4px 4px 0; }
.licznik button:hover { background: var(--miodowy); color: var(--grafit); }
.kreator .pozycje .licznik input.liczbowe { width: 34px; padding: 4px 2px; border-radius: 0; text-align: center; }
.kreator td.ilosc .jm { display: inline-block; min-width: 22px; margin-left: 4px; text-align: left; color: var(--grafit-wyblakly); font-size: 11.5px; }
.kreator .pozycje td.rabat input.liczbowe { width: 38px; border-radius: 4px 0 0 4px; vertical-align: middle; }
.kreator td.rabat span { display: inline-block; padding: 4px 5px; border: 1px solid var(--bez); border-left: 0; border-radius: 0 4px 4px 0;
                         background: var(--wanilia); color: var(--grafit-wyblakly); vertical-align: middle; }

.kreator .akcje { white-space: nowrap; text-align: right; }
.kreator .akcje .strzalka { padding: 2px 3px; border-color: transparent; background: transparent; color: var(--grafit-wyblakly); }
.kreator .akcje .strzalka:hover:not(:disabled) { border-color: var(--bez); background: var(--biel); color: var(--grafit); }
.kreator .akcje .strzalka:disabled { color: var(--bez); }
.kreator .akcje .usun { margin-left: 2px; padding: 2px 7px; font-size: 12px; border-color: var(--grafit-wyblakly); background: var(--biel); color: var(--grafit); }
.kreator .akcje .usun:hover { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }

/* kolumny tylko dla handlowca (moja cena zakupu, zysk, marża) – spokojne tło */
.kreator td.wewn-kol { background-image: none; background-color: var(--wanilia); border-left: 0; color: var(--grafit-wyblakly); font-size: 12px; }
.kreator thead th.wewn-kol { background: var(--bez); border-left: 0; }

/* sekcja: miodowy pasek jak w kosztorysie PDF */
.kreator .pozycje tbody.sekcja, .kreator .pozycje tbody.sekcja:nth-of-type(even) { background: var(--miodowy); }
.kreator .pozycje tbody.sekcja td { padding: 5px 8px; border-top: 0; border-bottom: 0; }
.kreator .pozycje tbody.sekcja td.wewn-kol { background-color: transparent; }
.kreator .pozycje tbody.sekcja .lp { font-size: 13px; font-weight: 700; }
.kreator .pozycje tbody.sekcja input { width: min(100%, 460px); padding: 3px 6px; border-color: transparent; background: transparent; font-size: 13px; font-weight: 700; }
.kreator .pozycje tbody.sekcja input:hover, .kreator .pozycje tbody.sekcja input:focus { border-color: var(--grafit-wyblakly); background: var(--biel); }
.kreator .pozycje tbody.sekcja input::placeholder { font-weight: 400; color: var(--grafit-wyblakly); }
.kreator .pozycje tbody.sekcja small { display: inline; margin-left: 10px; color: var(--grafit); }
.kreator .pozycje tbody.sekcja [data-suma-sekcji] { font-weight: 700; }
.kreator .pozycje tbody.sekcja .akcje .strzalka { color: var(--grafit); }
.kreator .pozycje tbody.sekcja .akcje .strzalka:disabled { opacity: .35; }
.kreator .pozycje tbody.sekcja .akcje .usun { background: transparent; }

/* wiersz „Wpisz” na końcu sekcji */
.kreator .pozycje tbody.wpisz td, .kreator .pozycje tbody.wpisz td.wewn-kol { background-color: var(--biel); }
.pole-wpisz label { display: flex; align-items: center; gap: 12px; }
.pole-wpisz label span { font-weight: 700; }
.pole-wpisz input { flex: 1 1 auto; min-width: 0; padding: 4px 8px; }
.kreator #podpowiedzi { right: auto; margin-top: 0; max-width: 92vw; }

/* --- pod tabelą: działania na zaznaczonych, dodatki, podsumowanie --- */
.zaznaczone-akcje { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; }
.zaznaczone-akcje .grupa { display: inline-flex; align-items: center; gap: 8px; }
.zaznaczone-akcje input { width: 64px; text-align: right; }
.pod-tabela { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 36px; flex-wrap: wrap; margin-top: 16px; }
.pod-tabela .dodatki { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; }
details.rozwijane { position: relative; }
details.rozwijane summary { padding: 5px 11px; border: 1px solid var(--bez); border-radius: 8px; background: var(--biel); cursor: pointer; list-style: none; }
details.rozwijane summary::-webkit-details-marker { display: none; }
details.rozwijane summary::after { content: " ▾"; color: var(--zloty); }
details.rozwijane summary:hover, details.rozwijane[open] summary { border-color: var(--zloty); }
details.rozwijane .panel { position: absolute; left: 0; top: 100%; z-index: 6; display: flex; flex-direction: column; gap: 6px; min-width: 220px;
                           margin-top: 4px; padding: 8px; background: var(--biel); border: 1px solid var(--grafit-wyblakly); border-radius: 6px;
                           box-shadow: 0 6px 18px rgba(45, 50, 55, .18); }
details.rozwijane .panel.szeroki { width: 440px; max-width: 90vw; }
details.rozwijane .panel button { text-align: left; }
details.rozwijane .panel p { margin: 0 0 2px; font-size: 11.5px; color: var(--grafit-wyblakly); }
.kreator #podsumowanie { margin-left: auto; min-width: 320px; }
.kreator .sumy { width: 100%; min-width: 0; border: 0; }
.kreator .sumy th { padding: 3px 0; border: 0; text-align: left; font-weight: 400; }
.kreator .sumy td { padding: 3px 0 3px 40px; border: 0; }
.kreator .sumy .razem th, .kreator .sumy .razem td { background: none; font-size: 14px; font-weight: 700; }
.kreator .sumy .drobne th, .kreator .sumy .drobne td, .kreator .sumy tr.wewn-blok th, .kreator .sumy tr.wewn-blok td { color: var(--grafit-wyblakly); }
.kreator .sumy tr.wewn-blok.razem th, .kreator .sumy tr.wewn-blok.razem td { color: var(--grafit); font-size: 13px; }
.kreator .sumy .odstep th, .kreator .sumy .odstep td { padding-top: 14px; }
.kreator .sumy .uwaga { max-width: none; padding: 4px 0; text-align: left; white-space: normal; font-size: 11px; }

/* --- dół ekranu: powrót z lewej, główny przycisk z prawej --- */
.nawigacja-krokow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px;
                    padding-top: 14px; border-top: 1px solid var(--bez); }
.nawigacja-krokow .powrot { color: var(--grafit); font-size: 12.5px; }
.nawigacja-krokow .przyciski { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nawigacja-krokow a.przycisk { padding: 7px 14px; }
.nawigacja-krokow a.przycisk.nastepny { padding: 10px 26px; }
a.przycisk.nastepny { padding: 10px 26px; font-size: 12.5px; }

/* --- okno „i”: zdjęcie z lewej, zakładki z prawej --- */
dialog#szczegoly { width: min(980px, 94vw); max-height: 90vh; padding: 0; border: 1px solid var(--bez); border-radius: 8px; color: var(--grafit);
                   box-shadow: 0 18px 60px rgba(45, 50, 55, .35); }
dialog#szczegoly::backdrop { background: rgba(45, 50, 55, .45); }
.okno { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 22px 26px; }
.okno .zamknij { position: absolute; right: 12px; top: 8px; padding: 2px 8px; border: 0; background: none; color: var(--grafit-wyblakly); font-size: 23px; line-height: 1; }
.okno .zamknij:hover { color: var(--grafit); }
.kreator button:focus-visible, dialog#szczegoly button:focus-visible { outline: 2px solid var(--zloty); outline-offset: 1px; }
.okno-foto { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; align-self: start; }
.okno-foto img { max-width: 100%; max-height: 320px; object-fit: contain; }
.okno-foto .brak-foto { width: 100%; height: 220px; }
.strzalka-foto { position: absolute; top: 50%; transform: translateY(-50%); padding: 0 4px; border: 0; background: none; color: var(--zloty); font-size: 32px; line-height: 1; }
.strzalka-foto.lewa { left: -16px; }
.strzalka-foto.prawa { right: -16px; }
.okno-tresc h3 { margin: 0 30px 4px 0; font-size: 17px; }
.okno-tresc .meta { display: flex; gap: 4px 18px; flex-wrap: wrap; margin: 0 0 14px; font-size: 11.5px; color: var(--grafit-wyblakly); }
.okno-tresc .meta strong { color: var(--grafit); }
.zakladki { display: flex; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--bez); }
.zakladki button { margin-bottom: -1px; padding: 6px 10px; font-size: 12.5px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; background: none; font-weight: 600; }
.zakladki button:hover:not(.aktywna) { border-color: transparent; color: var(--grafit-wyblakly); }
.zakladki button.aktywna { border-color: var(--bez); background: var(--biel); box-shadow: inset 0 2px 0 var(--zloty); }
.panel-okna { max-height: 50vh; overflow-y: auto; font-size: 12.5px; }
.panel-okna .punkty { margin: 0; padding-left: 18px; }
.panel-okna .punkty li { margin-bottom: 4px; }
.panel-okna .punkty li::marker { color: var(--zloty); }
table.parametry { width: 100%; border-collapse: collapse; }
table.parametry th { width: 48%; padding: 5px 16px 5px 0; border-bottom: 1px solid var(--bez); text-align: left; vertical-align: top; font-weight: 400; color: var(--grafit-wyblakly); }
table.parametry td { padding: 5px 0; border-bottom: 1px solid var(--bez); }
.panel-okna .pliki { margin: 0; padding-left: 18px; }
.panel-okna .pusty { margin: 0; color: var(--grafit-wyblakly); }
.panel-okna.edycja label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; font-size: 11px; color: var(--grafit-wyblakly); }
.panel-okna.edycja small { display: inline; }
.panel-okna.edycja .rzad { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.5fr; gap: 10px; }
.panel-okna.edycja input { width: 100%; }
.panel-okna.edycja .podpowiedz { margin: 0; font-size: 11px; max-width: none; }

/* --- krok 2: dwie kolumny pól, informacje, co widać w kosztorysie --- */
.formularz-oferty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 56px; }
.formularz-oferty h3 { margin: 16px 0 8px; font-size: 15.5px; font-weight: 400; }
.formularz-oferty label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; font-size: 11.5px; font-weight: 600; }
.formularz-oferty label input, .formularz-oferty label select, .formularz-oferty label textarea, .formularz-oferty label small { font-weight: 400; }
.formularz-oferty input, .formularz-oferty select, .formularz-oferty textarea { width: 100%; padding: 5px 8px; font-size: 12.5px; }
.formularz-oferty .rzad { display: flex; gap: 14px; }
.formularz-oferty .rzad label { flex: 1 1 0; min-width: 0; }
.formularz-oferty .rzad label.waski { flex: 0 0 34%; }
.formularz-oferty small { display: inline; }
.ramka-pol { margin-bottom: 12px; padding: 11px 13px 3px; background: var(--piasek); border-radius: 8px; }
.kreator #informacje { margin-top: 20px; }
.kreator #informacje .podpowiedz { margin: 0 0 10px; max-width: none; }
.kreator #informacje .pasek { margin: 10px 0 0; }
.ramka-opcji { margin-top: 22px; padding: 13px 16px; background: var(--piasek); border-radius: 8px; }
.kreator .ramka-opcji h2 { margin: 0; font-size: 16px; }
.ramka-opcji .podpowiedz { margin: 2px 0 0; font-size: 11px; max-width: none; }
.naglowek-opcji { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 10px; }
.naglowek-opcji .zaznaczanie { display: flex; gap: 22px; }
.naglowek-opcji .zaznaczanie .link { color: var(--grafit); font-size: 12px; }
.ramka-opcji .kolumny { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 12.5px; }
.ramka-opcji .haczyk { color: var(--grafit); }
.kreator .pasek.dol { margin-top: 20px; }

@media (max-width: 1000px) {
  .formularz-oferty { grid-template-columns: 1fr; }
  .okno { grid-template-columns: 1fr; }
  .kreator #podsumowanie { min-width: 0; width: 100%; }
}

/* =====================================================================
   Lista ofert (wzór: prosta lista B2B): tytuł z przyciskiem „Nowa oferta”,
   ramka filtrów i tabela bez ozdobników z przyciskami w każdym wierszu.
   ===================================================================== */
main.lista-ofert { padding-top: 16px; }
.naglowek-listy { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.naglowek-listy h1 { margin: 0; }
.naglowek-listy form { margin: 0; }

.filtry { margin-bottom: 10px; padding: 13px 16px; background: var(--piasek); border-radius: 8px; }
.filtry .pola { display: grid; grid-template-columns: repeat(4, minmax(0, 200px)); gap: 10px 20px; }
.filtry label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; }
.filtry input { width: 100%; padding: 4px 7px; font-size: 12.5px; }
.filtry .przyciski { display: flex; gap: 8px; margin-top: 10px; }
.filtry button { padding: 5px 16px; background: var(--miodowy); border-color: var(--miodowy); font-weight: 700; }
.filtry button:hover:not(:disabled) { background: var(--zloty); border-color: var(--zloty); }
.filtry a.przycisk { border-color: var(--grafit-wyblakly); }
.filtry a.przycisk:hover { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }

table.oferty { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.oferty th, table.oferty td { padding: 8px 8px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bez); }
/* nagłówki z dwóch słów łamią się na dwie linie – kolumny z datami i liczbami są wtedy tak wąskie jak ich treść */
table.oferty thead th { padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--bez); font-weight: 700; line-height: 1.25;
                        vertical-align: bottom; }
/* „Elementów na stronie” nad przyciskami wiersza – jak w B2B Stalgast */
table.oferty thead th.ile { text-align: left; font-size: 10px; font-weight: 400; color: var(--grafit-wyblakly); white-space: nowrap; }
table.oferty thead th.ile label { display: flex; flex-direction: column; gap: 3px; }
table.oferty thead th.ile select { width: 100%; padding: 2px 4px; font-size: 11.5px; }
.strony { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--grafit-wyblakly); }
.strony a.przycisk { padding: 3px 10px; font-size: 12px; border-color: var(--grafit-wyblakly); }
.strony a.przycisk:hover { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }
table.oferty .liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* wąskie kolumny biorą tyle, ile potrzebują – resztę szerokości dostają nazwa oferty i klient */
table.oferty td.numer, table.oferty td.data, table.oferty td.osoba, table.oferty td.liczba, table.oferty td.akcje { width: 1%; white-space: nowrap; }
table.oferty td.nazwa a.brak { color: var(--grafit-wyblakly); }
table.oferty td.nazwa a { text-decoration: none; }
table.oferty td.nazwa a:hover { text-decoration: underline; }
table.oferty tbody tr:hover { background: var(--piasek); }
table.oferty .akcje a.przycisk, table.oferty .akcje button { margin-left: 3px; padding: 3px 9px; font-size: 12px; border-color: var(--grafit-wyblakly); }
table.oferty .akcje a.przycisk:hover, table.oferty .akcje button:hover { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }
table.oferty .akcje .usun { color: var(--grafit-wyblakly); border-color: var(--bez); }

@media (max-width: 900px) {
  .filtry .pola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- ustawienia: części ustawień jako zakładki pod tytułem --- */
.podmenu { display: flex; gap: 24px; margin: 0 0 12px; border-bottom: 1px solid var(--bez); }
.podmenu a { margin-bottom: -1px; padding: 6px 0; border-bottom: 2px solid transparent; color: var(--grafit-wyblakly); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.podmenu a:hover, .podmenu a.aktywna { border-bottom-color: var(--zloty); color: var(--grafit); }

/* --- produkty spoza bazy (wzór: B2B Stalgast): odnośnik pod tabelą rozwija wiersz do samodzielnego wpisania produktu --- */
.spoza-bazy { margin-top: 10px; }
.spoza-bazy .rozwin { display: block; margin-left: auto; padding: 2px 0; border: 0; background: none; color: var(--grafit); font-size: 12.5px;
                      font-weight: 600; text-decoration: underline; text-decoration-color: var(--zloty); text-underline-offset: 3px; }
.spoza-bazy .rozwin::after { content: " ▾"; color: var(--zloty); }
.spoza-bazy .rozwin[aria-expanded="true"]::after { content: " ▴"; }
.spoza-bazy .rozwin:hover { color: var(--grafit-wyblakly); }
#panel-spoza-bazy { margin-top: 8px; }
#panel-spoza-bazy h2 { margin: 0 0 8px; }
#panel-spoza-bazy .pola { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--biel);
                          border-top: 1px solid var(--bez); border-bottom: 1px solid var(--bez); }
#panel-spoza-bazy .pola.drugie { border-top: 0; background: var(--piasek); }
#panel-spoza-bazy label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; }
#panel-spoza-bazy label input, #panel-spoza-bazy label select { font-size: 12.5px; font-weight: 400; }
#panel-spoza-bazy .wpisz-napis { align-self: flex-end; padding: 0 6px 5px 4px; font-size: 12.5px; font-weight: 700; }
#panel-spoza-bazy .kod input { width: 110px; }
#panel-spoza-bazy .produkt { flex: 1 1 260px; }
#panel-spoza-bazy .produkt input { width: 100%; }
#panel-spoza-bazy .marka input { width: 120px; }
#panel-spoza-bazy .cena input { width: 100px; text-align: right; }
#panel-spoza-bazy .licznik input { width: 40px; padding: 4px 2px; border-radius: 0; text-align: center; }
.z-procentem { display: inline-flex; }
.z-procentem input { width: 44px; border-radius: 5px 0 0 5px; text-align: right; }
.z-procentem span { padding: 4px 6px; border: 1px solid var(--bez); border-left: 0; border-radius: 0 5px 5px 0; background: var(--wanilia);
                    color: var(--grafit-wyblakly); font-weight: 400; }
#panel-spoza-bazy .plik input { max-width: 250px; padding: 3px; background: var(--biel); font-size: 11.5px; }
#panel-spoza-bazy .link { flex: 1 1 220px; }
#panel-spoza-bazy .link input { width: 100%; }
#panel-spoza-bazy .cel select { min-width: 190px; padding: 4px 6px; }
#panel-spoza-bazy button.glowny { padding: 6px 22px; }
#panel-spoza-bazy .podpowiedz { margin: 6px 0 0; max-width: none; font-size: 11px; }
#panel-spoza-bazy .stan { margin-left: 10px; white-space: normal; }

/* okno „i”: własne zdjęcie pozycji, a w pozycjach spoza bazy także kod i marka */
.panel-okna.edycja .rzad.dwa { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.okno-lewa { align-self: start; min-width: 0; }
.zdjecie-pozycji { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 9px 10px; background: var(--piasek); border-radius: 6px; }
.zdjecie-pozycji .etykieta { font-size: 11.5px; font-weight: 700; }
.zdjecie-pozycji label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--grafit-wyblakly); }
.zdjecie-pozycji input { width: 100%; font-size: 11.5px; }
.zdjecie-pozycji input[type=file] { padding: 3px; }
.zdjecie-pozycji button { align-self: flex-start; padding: 3px 9px; font-size: 11.5px; }

/* --- ustawienia: cenniki i rabaty zakupowe --- */
table.ust { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ust.waska { width: auto; min-width: 560px; }
table.ust th, table.ust td { padding: 8px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bez); }
table.ust thead th { border-top: 1px solid var(--bez); font-weight: 700; }
table.ust .liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.ust .akcje form { margin: 0; }
table.ust .akcje button { padding: 4px 11px; border-color: var(--grafit-wyblakly); }
table.ust .akcje button:hover:not(:disabled) { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }
table.ust tr.domyslny td { background: var(--piasek); }
table.ust small.skad { display: inline; margin-left: 8px; }
.podpowiedz.drobna { margin: 8px 0 0; max-width: none; font-size: 11px; }
.komunikat-ust { margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; background: var(--miodowy); font-weight: 600; }
.podglad { margin-top: 18px; padding: 14px 16px; background: var(--piasek); border-radius: 8px; }
.podglad h2 { margin: 0 0 10px; font-size: 16px; }
.podglad h2 small { display: inline; margin-left: 8px; font-size: 11.5px; font-weight: 400; }
.podglad .liczby { display: flex; gap: 10px 32px; flex-wrap: wrap; margin-bottom: 12px; font-size: 11.5px; }
.podglad .liczby strong { display: block; font-size: 18px; line-height: 1.3; }
.podglad .liczby small { font-size: 10.5px; }
.podglad details { margin-bottom: 8px; }
.podglad summary { cursor: pointer; font-weight: 600; }
.podglad details table.ust { margin-top: 6px; background: var(--biel); font-size: 12px; }
.podglad .lista-ust { margin: 6px 0 0; padding-left: 18px; columns: 2; font-size: 12px; }
.podglad pre.raport { margin: 6px 0 0; padding: 10px 12px; overflow-x: auto; background: var(--biel); border-radius: 6px; font-size: 11.5px; line-height: 1.4; }
.podglad .przyciski { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.podglad .przyciski form { margin: 0; }
.podglad .przyciski .stan { margin-left: 6px; white-space: normal; }
section.rabaty h2 { margin: 20px 0 6px; font-size: 16px; }
section.rabaty .z-procentem input { width: 56px; }
section.rabaty .podpowiedz .z-procentem { vertical-align: middle; margin: 0 4px; }

/* cennik kolejnego producenta w formacie wspólnym */
section.nowy-cennik { margin-top: 22px; padding: 14px 16px; background: var(--piasek); border-radius: 8px; }
section.nowy-cennik h2 { margin: 0 0 6px; font-size: 16px; }
section.nowy-cennik .podpowiedz { margin: 0 0 10px; max-width: 860px; }
section.nowy-cennik .przyciski { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
section.nowy-cennik form { margin: 0; }
section.nowy-cennik a.przycisk { border-color: var(--grafit-wyblakly); }
section.nowy-cennik a.przycisk:hover { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }
table.ust td small { display: block; }
.uwagi-ust { margin: 0 0 12px; padding: 8px 12px 8px 28px; background: var(--miodowy); border-radius: 6px; font-size: 12px; }
.komunikat-ust strong { font-weight: 700; }
.podglad .komunikat-ust { font-weight: 400; }

/* ---------- konta: nagłówek, logowanie, użytkownicy ---------- */
.gora .prawa { display: flex; align-items: center; gap: 28px; }
.gora .konto { display: flex; align-items: center; gap: 10px; padding-left: 28px; border-left: 1px solid var(--bez); font-size: 12px; }
.gora .konto a { color: var(--grafit-wyblakly); text-decoration: none; }
.gora .konto a:hover { color: var(--grafit); text-decoration: underline; }
.gora .konto form { margin: 0; }
.gora .konto button { padding: 3px 10px; font-size: 11.5px; border-color: var(--grafit-wyblakly); }
.gora .konto button:hover { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }

/* okno logowania i zmiany hasła: wąska ramka na środku strony */
.okno-konta { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin: 44px auto 0; padding: 22px 24px 20px;
              background: var(--piasek); border-radius: 8px; }
.okno-konta.szersze { max-width: 420px; }
.okno-konta h1 { margin: 0 0 2px; }
.okno-konta .podpowiedz, .okno-konta .komunikat-ust { margin: 0; }
.okno-konta label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; }
.okno-konta label small { display: inline; font-weight: 400; }
.okno-konta input { width: 100%; padding: 6px 8px; font-size: 13px; }
.okno-konta button.glowny { align-self: flex-start; margin-top: 4px; }
.pod-oknem { max-width: 340px; margin: 10px auto 0; padding: 0 24px; }

/* lista kont w Ustawieniach */
table.ust.konta th, table.ust.konta td:first-child { white-space: nowrap; }   /* rozwinięte „Zmień” nie łamie nazwisk */
table.ust.konta tr.zablokowane td { color: var(--grafit-wyblakly); }
table.ust.konta td.akcje { width: 1%; white-space: nowrap; text-align: right; }
table.ust.konta details { display: inline-block; text-align: left; }
table.ust.konta summary { display: inline-block; padding: 4px 11px; border: 1px solid var(--grafit-wyblakly); border-radius: 8px;
                          background: var(--biel); cursor: pointer; list-style: none; }
table.ust.konta summary::-webkit-details-marker { display: none; }
table.ust.konta summary:hover, table.ust.konta details[open] summary { border-color: var(--grafit); background: var(--grafit); color: var(--biel); }
table.ust.konta details form { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
table.ust.konta details label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; }
table.ust.konta details input { width: 190px; }
section.nowe-konto .pola { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 10px 20px; margin-bottom: 10px; }
section.nowe-konto .pola label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; }
section.nowe-konto .pola input { width: 100%; }
section.nowe-konto .haczyk { display: block; margin-bottom: 12px; color: var(--grafit); }