/* =====================================================================
   System wizualny zamowienia.ai
   Wartosci WYLACZNIE z tokenow. Wzorce ukladu: ASARI, iBanKo, Backing.
   ⚠️ Zielony, bursztynowy i czerwony sa ZAREZERWOWANE dla werdyktow.
      Nie wolno ich uzywac do przyciskow ani stanow interfejsu, bo rozmyja
      najwazniejszy sygnal na ekranie.
   ===================================================================== */
:root{
  /* Paleta odwzorowana z Upstream: gleboka zielen morska jako kolor marki,
     bardzo jasne neutralne tlo, atrament z domieszka zieleni zamiast czystej czerni.
     ⚠️ Werdykty zostaja rozroznialne, bo trzymaja sie INNEGO wzorca niz marka:
     plakietka werdyktu jest zawsze BLADA z kolorowym tekstem, a przycisk marki
     zawsze PELNY. Do tego werdykt niesie ikone i slowo, nie sam kolor. */
  /* ⚠️ SZATA 25.09.2026 (viktor.com od klientki, przejrzystosc WhatConverts
     wskazana przez Adama): granat jako kolor tekstu i przyciskow glownych,
     indygo dla odnosnikow i aktywnych pozycji, chlodne jasne tlo, biale karty.
     Poprzednia zielen morska (wzorzec Upstream) zostaje w historii w
     kopie_danych/styl_przed_szata_2509.css. Werdykty bez zmian: zielony,
     bursztynowy i czerwony nadal wolno uzywac WYLACZNIE dla werdyktow. */
  /* ⚠️ SZATA 25.09.2026, WIECZOR: paleta z referencji klientki viktor.com/brand
     („gradient granatowego, przechodzacy w fiolet, ale zamiast finalnego
     pomaranczu jasna czerwien", 15.09.2026). Kremowe tlo, miekka czern,
     granat, fiolet i liliowy; jasna czerwien WYLACZNIE w gradientach
     i poswiatach, bo czerwien na przycisku mylilaby sie z werdyktem
     „nie spelnia". Poprzednie indygo #6748FD to domyslny kolor Tailwinda,
     po ktorym aplikacja wygladala jak kazdy generowany panel. */
  --marka:#6748FD; --marka-600:#5534E6; --marka-500:#947FFF;
  --marka-100:#E7E1FF; --marka-50:#F4F1FF;
  --granat:#150079; --granat-600:#22109A;
  --koral:#FF8A8A;
  --grad-marka:linear-gradient(135deg,#150079 0%,#6748FD 52%,#947FFF 78%,#FF8A8A 100%);
  --spelnia:#15803D; --spelnia-tlo:#E9F7EE;
  --czesciowo:#B45309; --czesciowo-tlo:#FEF6E7;
  --nie:#B91C1C; --nie-tlo:#FDF0F0;
  --uwaga:#C2410C;
  --tlo:#FAF5F1; --karta:#FFF; --obramowanie:#ECE4DD; --obramowanie-2:#F3EDE7;
  --tekst:#1B182A; --tekst-2:#55526A; --tekst-3:#6E6A80;
  --panel:#FFFFFF; --panel-2:#FAF5F1; --panel-tekst:#55526A;
  --r:18px; --r-s:12px;
  --cien:0 1px 2px rgba(27,24,42,.04),0 6px 20px rgba(27,24,42,.05);
  --cien-2:0 22px 60px rgba(27,24,42,.12);
  --szer-panelu:248px;
}
*{box-sizing:border-box;margin:0;padding:0}

/* ⚠️ ATRYBUT `hidden` MUSI WYGRYWAC Z REGULA `display`.
   Przegladarka daje `[hidden]{display:none}` w arkuszu domyslnym, ktory ma
   NAJNIZSZY priorytet, wiec dowolna wlasna regula z `display:` go unieważnia.
   Skutek zmierzony 14.08.2026: `.onboarding-powitanie` ma `display:grid`,
   wiec `powitanie.hidden = true` nie robilo NIC i powitanie wyswietlalo sie
   RAZEM z dymkiem wycieczki przez caly jej czas.
   To jest piaty przypadek tej samej klasy bledu w tym projekcie: regula CSS
   po cichu unieważnia intencje kodu. Jedna linia zamyka go raz na zawsze. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
/* Montserrat hostowany u nas, arkusz kroju w kroje.css.
   Krój zastepczy celowo geometryczny, zeby przed doladowaniem uklad nie skakal. */
body{font-family:'Montserrat',ui-rounded,"SF Pro Rounded","Segoe UI Variable Display",
  "Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.62;letter-spacing:-.002em;
  background:var(--tlo);color:var(--tekst);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
/* Naglowki spokojniejsze: mniejsze, ciasniej trackowane, mniejszy kontrast wagi.
   Krzykliwa typografia jest pierwsza rzecza, po ktorej widac maszynowy szablon. */
h1,h2,h3{letter-spacing:-.018em;line-height:1.34;font-weight:650}
a{color:var(--marka);text-decoration:none}
.tab{font-variant-numeric:tabular-nums}
.cichy{color:var(--tekst-2);font-size:13px}

/* ---------------- Uklad: panel boczny plus tresc ---------------- */
.aplikacja{display:grid;grid-template-columns:var(--szer-panelu) 1fr;min-height:100vh}

.panel{background:var(--panel);color:var(--panel-tekst);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.panel .marka{display:flex;align-items:center;gap:10px;padding:20px 18px;color:#fff;
  font-weight:700;font-size:16px;letter-spacing:-.01em}
.panel .marka img{border-radius:9px}
.panel .marka span{color:var(--marka-500)}

.panel nav{padding:6px 12px;flex:1}
.panel .grupa{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#5B6183;
  padding:18px 11px 6px;font-weight:600}
.panel a.poz{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-s);
  color:var(--panel-tekst);font-size:14px;font-weight:500;transition:background .12s,color .12s}
.panel a.poz i{width:17px;text-align:center;font-size:14px;opacity:.85}
.panel a.poz:hover{background:rgba(255,255,255,.06);color:#fff}
.panel a.poz.teraz{background:var(--marka);color:#fff;box-shadow:0 2px 12px rgba(103,72,253,.35)}
.panel a.poz.teraz i{opacity:1}
.panel .licznik{margin-left:auto;background:rgba(255,255,255,.1);color:#fff;font-size:11px;
  font-weight:600;padding:1px 7px;border-radius:99px}
.panel a.poz.teraz .licznik{background:rgba(255,255,255,.22)}
.panel .stopka{padding:14px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:12px}
.panel .stopka a{color:var(--panel-tekst)}
.panel .stopka a:hover{color:#fff}

/* ---------------- Belka gorna ---------------- */
.tresc{min-width:0;display:flex;flex-direction:column}
.belka{background:var(--karta);border-bottom:1px solid var(--obramowanie);
  padding:0 28px;height:64px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.belka h1{font-size:16px;font-weight:640}
.belka .rozciag{flex:1}
.uzytkownik{display:flex;align-items:center;gap:9px;font-size:13px}
/* Awatar: domyslnie GRAFIKA zastepcza, nie inicjaly na kolorowym kolku.
   Inicjaly czytaja sie jak skrot systemowy, a nie jak profil czlowieka. */
.awatar{width:34px;height:34px;border-radius:50%;flex:0 0 34px;overflow:hidden;
  background:#F1F5F9;border:1px solid var(--obramowanie);display:block}
.awatar img{width:100%;height:100%;object-fit:cover;display:block}
.awatar.maly{width:28px;height:28px;flex:0 0 28px}
main{padding:24px 28px 40px;flex:1}

/* ---------------- Karty i naglowki sekcji ---------------- */
.karta{background:var(--karta);border:1px solid var(--obramowanie);border-radius:var(--r);
  box-shadow:var(--cien)}
.sekcja{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.sekcja h2{font-size:14.5px;font-weight:640}
.sekcja .rozciag{flex:1}

/* ---------------- Baner powitalny ----------------
   ⚠️ JASNY, nie ciemny. Pierwsza wersja byla ciemnym prostokatem z gradientem
   i Adam slusznie zwrocil uwage, ze jest ciezka i odstaje od reszty ekranu,
   ktory jest bialy. Wzorzec ASARI: tekst po lewej, ilustracja po prawej,
   delikatne tlo w kolorze marki. Baner ma witac, a nie przytlaczac. */
.baner{position:relative;border-radius:18px;overflow:hidden;margin-bottom:var(--odstep-2);
  padding:34px 38px;display:flex;align-items:center;gap:32px;
  background:linear-gradient(120deg,#F7F3FF 0%,#EEF1FB 46%,#EEE7FF 100%);
  border:1px solid #CDEBE4}
.baner .tresc-banera{flex:1 1 auto;min-width:0;position:relative;z-index:2}
.baner h1,.baner h2{font-size:22px;font-weight:660;letter-spacing:-.024em;margin-bottom:9px;
  line-height:1.38;color:var(--tekst)}
.baner p{color:var(--tekst-2);font-size:13.5px;line-height:1.65;max-width:62ch}
.baner .odznaka{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid #CDEBE4;color:var(--marka);padding:5px 13px;border-radius:99px;
  font-size:11.5px;font-weight:600;margin-bottom:16px}
/* Odznaka ostrzegawcza w banerze pulpitu: pokazuje sie ZAMIAST
   obietnicy "co godzine", gdy ktores zrodlo milczy. Bursztyn, bo to
   stan wymagajacy uwagi, a nie awaria calego systemu. */
.odznaka.odznaka-uwaga{background:var(--czesciowo-tlo);color:var(--czesciowo);
  border-color:var(--czesciowo)}
.baner .ilustracja{flex:0 0 auto;width:210px;height:auto;position:relative;z-index:2;
  margin:-14px -8px -14px 0}
/* Miekkie plamy w tle, ten sam jezyk co w ilustracjach */
.baner::before{content:"";position:absolute;right:-60px;top:-90px;width:300px;height:300px;
  border-radius:50%;background:radial-gradient(circle,rgba(148,127,255,.16) 0%,transparent 68%)}
.baner::after{content:"";position:absolute;left:-70px;bottom:-110px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(103,72,253,.1) 0%,transparent 70%)}
@media(max-width:820px){
  .baner{flex-direction:column;align-items:flex-start;padding:24px;gap:16px}
  .baner .ilustracja{width:150px;margin:0;align-self:center}
  .baner h1,.baner h2{font-size:19px}
}

/* ---------------- Kafelki liczb (wzorzec Flup, logip, Backing) ---------------- */
.kafelki{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin-bottom:22px}
.kafelek{padding:17px 18px;position:relative;overflow:hidden;
  animation:wjazd .32s cubic-bezier(.2,.7,.3,1) backwards}
.kafelek:nth-child(2){animation-delay:.04s}
.kafelek:nth-child(3){animation-delay:.08s}
.kafelek:nth-child(4){animation-delay:.12s}
.kafelek .ikona{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:15px;margin-bottom:12px;background:var(--marka-50);color:var(--marka)}
.kafelek .etykieta{font-size:11.5px;text-transform:uppercase;letter-spacing:.045em;color:var(--tekst-3);
  font-weight:600}
.kafelek .liczba{font-size:27px;font-weight:680;letter-spacing:-.03em;margin-top:2px;line-height:1.2}
.kafelek .liczba.male{font-size:15px;font-weight:600;color:var(--tekst-2);font-style:italic}
.kafelek .pod{font-size:12px;color:var(--tekst-2);margin-top:4px}
@keyframes wjazd{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------------- Pola formularzy ---------------- */
/* ⚠️ Selektor po TYPACH, nie po jednym typie. Wersja obejmujaca wylacznie
   input[type=text] zostawiala pole hasla z domyslnym wygladem przegladarki. */
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=search],textarea,select{
  font:inherit;padding:9px 12px;border:1px solid var(--obramowanie);border-radius:var(--r-s);
  background:#fff;color:var(--tekst);width:100%;line-height:1.5;
  -webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' stroke='%2398A0B3' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--marka);
  box-shadow:0 0 0 3px var(--marka-100)}
label{display:block;font-size:12.5px;font-weight:600;color:var(--tekst-2);margin-bottom:5px}
.pole{margin-bottom:14px}
.pole .podpowiedz{font-size:11.5px;color:var(--tekst-3);margin-top:4px}
.siatka-pol{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}

/* ---------------- Przyciski ---------------- */
.przycisk{font:inherit;font-weight:600;font-size:14px;padding:9px 16px;border:0;border-radius:var(--r-s);
  background:var(--marka);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background .12s,transform .08s,box-shadow .12s;white-space:nowrap}
.przycisk:hover{background:var(--marka-600);box-shadow:0 3px 12px rgba(103,72,253,.28)}
.przycisk:active{transform:translateY(1px)}
.przycisk.pusty{background:#fff;color:var(--tekst-2);border:1px solid var(--obramowanie);box-shadow:none}
.przycisk.pusty:hover{background:var(--marka-50);color:var(--marka);border-color:var(--marka-100)}
.przycisk.pusty.wlaczony{background:var(--marka-50);color:var(--marka);border-color:var(--marka)}
.przycisk.maly{padding:6px 11px;font-size:12.5px}
.przycisk.groza{color:var(--nie)}
.przycisk.groza:hover{background:var(--nie-tlo);border-color:var(--nie);color:var(--nie)}

/* ---------------- Filtry ---------------- */
.filtry{display:flex;gap:10px;flex-wrap:wrap;padding:14px;margin-bottom:16px;align-items:center}
.filtry input[type=text]{flex:1 1 210px;width:auto;min-width:170px}
.filtry select{flex:0 1 auto;width:auto;min-width:176px}

/* ---------------- Kolko dopasowania ---------------- */
.kolko{width:56px;height:56px;flex:0 0 56px;border-radius:50%;display:grid;place-items:center;
  position:relative;background:conic-gradient(var(--kolor) calc(var(--proc)*1%),#E9ECF4 0)}
.kolko::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--karta)}
.kolko b{position:relative;z-index:1;font-size:14.5px;font-weight:700;color:var(--kolor)}
/* Kolko bez policzonego dopasowania: postepowanie znalezione wyszukiwaniem,
   ktore nie jest jeszcze na liscie dopasowan. Przerywany okrag, bo pelny
   pierscien w kolorze werdyktu znaczylby, ze cos zmierzylismy. */
.kolko-puste{background:none;border:2px dashed var(--obramowanie)}
.kolko-puste::after{display:none}
/* ⚠️ Napis „<30%" zamiast znaku zapytania. Znak zapytania obiecywal
   przeliczenie, ktore dla postepowania ponizej progu nigdy nie nastapi,
   i Adam dwa razy zglosil go jako usterke. Mniejszy krój, bo w malym kolku
   (36 px) cztery znaki przy 16 px wychodzily poza obwod. */
.kolko-puste b{color:var(--tekst-3);font-size:11px;letter-spacing:-.02em}
.kolko.male.kolko-puste b{font-size:9.5px}
/* ⚠️ Kolko liczone BEZ sprawdzenia kwalifikacji. Odpowiedz na pytanie
   klientki: "dlaczego jezeli nie ma wgranego doswiadczenia firmy, liczy
   az 91% dopasowania?". Pelny, gladki pierscien znaczy "sprawdzone";
   ten sam pierscien z przerwami znaczy "policzone z samego przedmiotu".
   ⚠️ Rysujemy je DRUGA WARSTWA TLA, a nie obramowaniem `::before` ani maska.
   `.kolko` nie ma pseudoelementu `::before`, wiec regula na nim bylaby cicho
   nieaktywna (ten projekt zlapal juz szesc takich), a maska na elemencie
   przycielaby TAKZE srodek i cyfre w srodku. Warstwa w kolorze karty
   nakladana na pierscien zostawia oba nietkniete. */
.kolko.kolko-szacunek{
  background:
    repeating-conic-gradient(transparent 0 7deg, var(--karta) 7deg 10deg),
    conic-gradient(var(--kolor) calc(var(--proc)*1%), #E9ECF4 0)}
.kolko.kolko-szacunek b{opacity:.9}
.pod-kolkiem{font-size:10px;color:var(--tekst-3);text-align:center;margin-top:5px;max-width:78px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- Wiersz listy ---------------- */
.wiersz{display:flex;gap:16px;padding:17px 18px;border-bottom:1px solid var(--obramowanie-2);
  transition:background .12s}
.wiersz:last-child{border-bottom:0}
.wiersz:hover{background:#FBF8F5}
.wiersz h3{font-size:14.5px;font-weight:650;line-height:1.4;margin-bottom:5px}
.wiersz h3 a{color:var(--tekst)}
.wiersz h3 a:hover{color:var(--marka)}
.meta{display:flex;flex-wrap:wrap;gap:5px 15px;font-size:12.5px;color:var(--tekst-2);margin-top:5px;
  align-items:center}
.meta i{width:13px;color:var(--tekst-3)}
.pilne{color:var(--uwaga);font-weight:650}

/* ---------------- Plakietki ---------------- */
.plakietka{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:99px;background:#F1F3F8;color:#525C72;white-space:nowrap}
.plakietka.zrodlo{background:var(--marka-50);color:var(--marka)}
.plakietka.rola{background:var(--marka-50);color:var(--marka)}
.plakietka.ok{background:var(--spelnia-tlo);color:var(--spelnia)}
.plakietka.uwaga{background:var(--czesciowo-tlo);color:var(--czesciowo)}
.plakietka.zla{background:var(--nie-tlo);color:var(--nie)}

/* ---------------- Pasek werdyktu ---------------- */
.werdykty{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}
.werdykt{padding:9px 12px;border-radius:var(--r-s);border-left:4px solid;font-size:11.5px;
  font-weight:600;letter-spacing:.02em}
.werdykt b{display:block;font-size:13px;margin-top:2px;letter-spacing:0}
.w-spelnia{background:var(--spelnia-tlo);border-color:var(--spelnia);color:var(--spelnia)}
.w-czesciowo{background:var(--czesciowo-tlo);border-color:var(--czesciowo);color:var(--czesciowo)}
.w-nie{background:var(--nie-tlo);border-color:var(--nie);color:var(--nie)}
/* Stan "brak danych" NIE jest werdyktem, wiec jest szary, nie czerwony. */
.w-brak{background:#FAFBFD;border-color:var(--obramowanie);color:var(--tekst-2);border-left-style:dashed}

/* ---------------- Fakty decyzyjne ---------------- */
.fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:13px;margin:18px 0}
.fakt{padding:15px 16px}
.fakt .ikona{width:34px;height:34px;border-radius:10px;background:var(--marka-50);color:var(--marka);
  display:grid;place-items:center;margin-bottom:10px}
.fakt .etykieta{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tekst-3);
  font-weight:600}
.fakt .wartosc{font-size:19px;font-weight:700;margin-top:3px}
.fakt .wartosc.brak{font-size:13px;font-weight:500;color:var(--tekst-3);font-style:italic}
/* Cytat zrodlowy pod kwota. Trzy linie i wielokropek: pelne zdanie jest
   w podpowiedzi, a karta ma zostac karta, nie akapitem. */
.cytat-faktu{margin-top:6px;font-size:11.5px;line-height:1.45;font-style:italic;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------- Tabela ---------------- */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tekst-3);font-weight:640;padding:12px 16px;border-bottom:1px solid var(--obramowanie);
  background:#FCFDFF}
tbody td{padding:13px 16px;border-bottom:1px solid var(--obramowanie-2);font-size:13.5px;
  vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FBF8F5}
td .glowny{font-weight:600;color:var(--tekst)}
td .drugi{font-size:12px;color:var(--tekst-2);margin-top:2px}
.przewijana{overflow-x:auto}
/* ⚠️ MINIMALNA SZEROKOSC TABELY, NIE TYLKO NA TELEFONIE. Regula
   `.przewijana table{min-width:640px}` siedziala wylacznie w zapytaniu
   medialnym do 820 px, wiec miedzy 820 a szerokoscia naturalna tabeli
   kolumny sie SCISKALY zamiast przewijac: ostatnia, z przyciskiem akcji,
   robila sie nieczytelna i wygladala na ucieta. Zglosil to Adam.
   Tutaj min-width dziala zawsze, a na szerokim ekranie nic nie zmienia,
   bo tabela i tak jest szersza. */
.przewijana table{min-width:720px}

/* ---------------- Paski informacyjne ---------------- */
.pasek{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;
  border-bottom:1px solid var(--obramowanie);font-size:13px;color:var(--tekst-2)}
.uwaga-blok{border-radius:var(--r);padding:13px 16px;margin-bottom:18px;font-size:13px;
  display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.uwaga-blok.info{background:var(--czesciowo-tlo);border:1px solid #FDE68A;color:#8A5A08}
.uwaga-blok.ok{background:var(--spelnia-tlo);border:1px solid #A7F3D0;color:#065F46}
.uwaga-blok i{font-size:15px;margin-top:1px;flex:0 0 auto}

/* ---------------- Stronicowanie ---------------- */
.strony{display:flex;gap:6px;justify-content:center;padding:16px;flex-wrap:wrap}
.strony a,.strony span{padding:7px 13px;border-radius:var(--r-s);border:1px solid var(--obramowanie);
  background:#fff;font-size:13px;color:var(--tekst-2)}
.strony a:hover{border-color:var(--marka);color:var(--marka)}
.strony .teraz{background:var(--marka);color:#fff;border-color:var(--marka);font-weight:600}

/* ---------------- Stan pusty ---------------- */
.pusto{padding:56px 24px;text-align:center;color:var(--tekst-2)}
.pusto img{opacity:.85;margin:0 auto 16px;display:block}
.pusto i{font-size:34px;color:var(--tekst-3);margin-bottom:14px;display:block}
.pusto h3{font-size:15px;font-weight:650;color:var(--tekst);margin-bottom:5px}

/* ---------------- Logowanie ----------------
   Pomysl z ASARI: duze zaokraglone ksztalty w tle, zeby ekran nie byl plaski.
   Wykonanie NASZE: jasne tlo aplikacji, biala karta na tokenach `.karta`,
   zielen morska z DESIGN_SYSTEM.md. Ksztalty sa mocno rozmyte i przezroczyste,
   wiec czytaja sie jak swiatlo w tle, a nie jak nalepki na stronie.
   Czysty CSS, wiec ostre na kazdym ekranie i zero wagi. */
.ekran-logowania{min-height:100vh;display:grid;place-items:center;padding:44px 20px;
  background:var(--tlo);position:relative;overflow:hidden}

/* Tlo. ⚠️ Nie wymyslamy tu nowego jezyka. Bierzemy dokladnie to, czego
   uzywa aplikacja w srodku: gradient i plamy z `.baner` oraz `wzor.jpg`
   z mnozeniem, ten sam co pod `.karta-na-okladce`. Wczesniejsze kapsuly
   byly pomyslem z ASARI i odstawaly od reszty. */
.ekran-logowania{background:var(--tlo)}

/* Miekkie plamy, ten sam jezyk co w `.baner` i w ilustracjach. */
.ksztalty{position:absolute;inset:0;pointer-events:none}
.ksztalty span{position:absolute;border-radius:50%}
.k1{width:520px;height:520px;top:-190px;right:-130px;
  background:radial-gradient(circle,rgba(148,127,255,.16) 0%,transparent 68%)}
.k2{width:460px;height:460px;bottom:-170px;left:-140px;
  background:radial-gradient(circle,rgba(103,72,253,.13) 0%,transparent 70%)}
.k3{width:300px;height:300px;bottom:6%;right:8%;
  background:radial-gradient(circle,rgba(179,163,255,.16) 0%,transparent 70%)}

.logowanie{position:relative;z-index:1;width:100%;max-width:400px}

.logowanie .marka{display:flex;align-items:center;justify-content:center;gap:11px;
  margin-bottom:24px}
.logowanie .marka img{border-radius:10px}
.logowanie .marka b{font-size:21px;font-weight:690;letter-spacing:-.022em;color:var(--tekst)}
.logowanie .marka b span{color:var(--marka)}

.logowanie .karta{padding:36px 34px 32px;box-shadow:0 18px 46px rgba(27,24,42,.08),
  0 2px 6px rgba(27,24,42,.04)}
.logowanie h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.logowanie .wstep{color:var(--tekst-2);font-size:14px;line-height:1.55;margin-bottom:26px}

/* Pole z ikona. Ikona jest dekoracja, nazwe pola niesie widoczna etykieta. */
.logowanie .pole-ikona{margin-bottom:18px}
.logowanie .pole-ikona label{display:block;font-size:13px;font-weight:600;
  color:var(--tekst-2);margin-bottom:7px}
.logowanie .pole-ikona .wnetrze{position:relative}
.logowanie .pole-ikona .wnetrze i{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--tekst-3);font-size:14px;pointer-events:none}
.logowanie .pole-ikona input{width:100%;padding:12px 14px 12px 42px;font:inherit;font-size:15px;
  color:var(--tekst);background:#fff;border:1px solid var(--obramowanie);
  border-radius:var(--r-s);transition:border-color .12s,box-shadow .12s}
.logowanie .pole-ikona input::placeholder{color:var(--tekst-3)}
.logowanie .pole-ikona input:focus{outline:0;border-color:var(--marka);
  box-shadow:0 0 0 3px rgba(103,72,253,.13)}
.logowanie .pole-ikona:focus-within .wnetrze i{color:var(--marka)}

.logowanie .przycisk{width:100%;justify-content:center;margin-top:8px;padding:13px;
  font-size:15px;font-weight:630}

.blad{background:var(--nie-tlo);color:var(--nie);border-radius:var(--r-s);
  padding:12px 14px;font-size:13.5px;line-height:1.5;margin-bottom:20px;
  display:flex;gap:10px;align-items:flex-start}
.blad i{margin-top:2px}

.stopka-logowania{margin-top:20px;text-align:center;font-size:12.5px;
  line-height:1.75;color:var(--tekst-3)}

@media (max-width:640px){
  /* Na telefonie mniej ksztaltow, zeby tlo nie robilo sie jednolita plama. */
  .k1,.k5{display:none}
  .k2{width:360px;height:150px;bottom:-50px;left:32%}
  .k3{width:190px;height:80px}
  .k4{width:150px;height:150px;left:6%}
}

/* Termin nieznany: wyroznienie uwagi, ale NIE kolorem werdyktu, zeby nie
   rozmywac sygnalu SPELNIA / CZESCIOWO / NIE SPELNIA. */
.chip-uwaga{background:#FFF8EC;border-color:#F5DFB8;color:#8A6220}
.chip-uwaga i{color:#B45309}

/* ---------------- Bloczki warunkow ----------------
   Trzeci komponent krytyczny z `frontend.md`: lewy pasek w kolorze werdyktu,
   rozwijany, z cytatem zrodlowym w srodku. To jest odpowiedz na pytanie
   "dlaczego", bez ktorej werdykt jest czarna skrzynka.

   ⚠️ Kolory werdyktow uzywane TUTAJ sa na miejscu, bo to jest wlasnie werdykt.
   Do zwyklych blokow informacyjnych nadal nie wolno ich brac. */
.warunki{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.warunek{border:1px solid var(--obramowanie);border-left:3px solid var(--tekst-3);
  border-radius:var(--r-s);background:#fff;overflow:hidden}
.warunek.w-ok{border-left-color:var(--spelnia)}
.warunek.w-zle{border-left-color:var(--nie)}
.warunek.w-nieznany{border-left-color:var(--czesciowo)}
.warunek summary{display:flex;align-items:center;gap:11px;padding:12px 15px;
  cursor:pointer;font-size:13.5px;line-height:1.5;list-style:none}
.warunek summary::-webkit-details-marker{display:none}
.warunek summary:hover{background:#FAFDFC}
.warunek.w-ok summary i{color:var(--spelnia)}
.warunek.w-zle summary i{color:var(--nie)}
.warunek.w-nieznany summary i{color:var(--czesciowo)}
.warunek .tresc-warunku{flex:1;min-width:0}
.warunek .licznik{flex:0 0 auto;font-size:12px;font-weight:660;color:var(--tekst-2);
  background:var(--tlo);border-radius:99px;padding:3px 10px}
.wnetrze-warunku{padding:0 15px 14px 15px;border-top:1px solid var(--obramowanie-2)}
.wnetrze-warunku .uzasadnienie{font-size:13px;color:var(--tekst-2);
  line-height:1.6;margin:12px 0}
/* Cytat zrodlowy. Wyroznienie jest celowo spokojne: to dowod, nie ozdoba. */
.wnetrze-warunku blockquote{background:var(--tlo);border-left:2px solid var(--obramowanie);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:12px 14px;font-size:12.5px;
  line-height:1.65;color:var(--tekst-2);font-style:italic}
.wnetrze-warunku cite{display:block;margin-top:9px;font-style:normal;font-size:11.5px;
  color:var(--tekst-3)}

/* ---------------- Ekran bledu ----------------
   Wczesniej sklejany w Pythonie, w starej palecie indygo. Teraz szablon
   na tych samych tokenach i z tym samym tlem co logowanie, zeby 404 tez
   wygladalo jak nasz produkt, a nie jak awaria serwera. */
.ekran-bledu{min-height:100vh;display:grid;place-items:center;padding:44px 20px;
  position:relative;overflow:hidden;
  background:var(--tlo)}
.tresc-bledu{position:relative;z-index:1;text-align:center;max-width:460px}
.tresc-bledu img{width:min(240px,60%);height:auto;margin-bottom:8px}
.tresc-bledu .kod{font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--marka);margin-bottom:8px}
.tresc-bledu h1{font-size:26px;font-weight:670;letter-spacing:-.025em;margin-bottom:10px}
.tresc-bledu .opis{color:var(--tekst-2);font-size:14.5px;line-height:1.65;margin-bottom:26px}
.tresc-bledu .akcje{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---------------- Znak slowny ----------------
   Litera "o" zastapiona pierscieniem postepu: ten sam ksztalt co kolko
   dopasowania, czyli komponent numer jeden produktu.

   ⚠️ Pierwsza wersja byla za blada: tekst w kolorze tresci, pierscien przy
   kryciu 0,22. W efekcie znak gubil sie w belce i nie przypominal wzorca.
   Teraz kolory sa TAKIE JAK W ZNAKU: nazwa w zieleni marki, pierscien
   wyrazny, koncowka ".ai" w miecie i pogrubiona. */
.znak-slowny{display:inline-flex;align-items:center;gap:9px;
  font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--tekst);
  white-space:nowrap;line-height:1}
.znak-slowny b{font-weight:700;color:var(--marka);letter-spacing:-.03em}
/* Ilustracja znaku. Tlo ma przezroczyste, wiec na bialej belce "plywa",
   a na ciemnym tle dostaje jasny kafelek: ciemnozielona obwodka lupy
   zniknelaby na ciemnozielonym tle. Ten sam zabieg, co przy znakach
   punktow na ekranie logowania. */
.znak-lupa{width:34px;height:34px;flex:0 0 auto;object-fit:contain;
  border-radius:9px;box-sizing:border-box}

/* Na ciemnym tle znak sie odwraca: nazwa biala, ".ai" miętowe. */
.na-ciemnym .znak-slowny,.znak-slowny.jasny{color:#fff}
.na-ciemnym .znak-slowny b,.znak-slowny.jasny b{color:#B3A3FF}
.na-ciemnym .znak-lupa,.znak-slowny.jasny .znak-lupa{box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* ---------------- Dostepnosc kadry ---------------- */
.kol-dostepnosc{min-width:220px}
.okresy{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.okresy li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tekst-3);
  background:var(--tlo);border-radius:7px;padding:5px 8px}
/* Okres trwajacy DZIS wyrozniony, bo to on decyduje o dzisiejszej dostepnosci. */
.okresy li.trwa{background:#FFF8EC;color:#8A6220}
.okresy li span{flex:1;min-width:0}
.usun-okres{border:0;background:transparent;color:var(--tekst-3);cursor:pointer;
  padding:2px 4px;border-radius:5px;font-size:11px}
.usun-okres:hover{background:rgba(0,0,0,.06);color:var(--nie)}
.dodaj-okres{margin-top:8px}
.dodaj-okres summary{font-size:11.5px;color:var(--marka);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:5px}
.dodaj-okres summary::-webkit-details-marker{display:none}
.dodaj-okres form{margin-top:9px;display:flex;flex-direction:column;gap:7px;
  background:var(--tlo);padding:11px;border-radius:var(--r-s)}
.dodaj-okres label{font-size:11px;color:var(--tekst-2);display:flex;flex-direction:column;gap:3px}
.dodaj-okres input{padding:7px 9px;font-size:12.5px}
.para-dat{display:flex;gap:8px}
.para-dat label{flex:1}

/* ---------------- Zespol przy referencji ---------------- */
.kol-zespol{min-width:220px}
.osoba-w-projekcie{display:inline-flex;align-items:center;gap:5px;margin:0 4px 4px 0}
.osoba-w-projekcie form{display:inline}
.osoba-w-projekcie button{border:0;background:transparent;color:var(--tekst-3);
  cursor:pointer;padding:0 2px;font-size:10px;line-height:1}
.osoba-w-projekcie button:hover{color:var(--nie)}
.kol-zespol .dodaj-okres form{gap:6px}
.kol-zespol select,.kol-zespol input{font-size:12.5px;padding:7px 9px}

/* Podstawa szacunku kosztu: mala, ale ZAWSZE obok liczby.
   Liczba bez uzasadnienia jest czarna skrzynka, czego zakazuje specyfikacja. */
.podstawa-kosztu{font-size:11.5px;line-height:1.5;color:var(--tekst-3);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.podstawa-kosztu.ostrzega{color:#8A6220;display:flex;align-items:flex-start;gap:6px}

/* ---------------- Luki i rekomendacje ----------------
   ⚠️ NIE uzywamy tu kolorow werdyktu (zielony, bursztynowy, czerwony).
   To nie jest ocena, tylko podpowiedz, a rozmycie sygnalu werdyktu
   jest wprost zakazane przez `frontend.md`. */
.luki{margin-top:18px;padding:18px 20px;border-radius:var(--r-s);
  background:var(--marka-50);border:1px solid #CDEBE4}
.luki h4{font-size:14px;font-weight:660;color:var(--marka);margin-bottom:12px;
  display:flex;align-items:center;gap:8px}
.luka{display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  border-top:1px solid rgba(103,72,253,.12)}
.luka:first-of-type{border-top:0;padding-top:0}
.luka p{font-size:13px;line-height:1.62;color:var(--tekst-2);flex:1;min-width:0}
.etykieta-domkniecia{flex:0 0 auto;font-size:11px;font-weight:640;
  background:#fff;color:var(--marka);border-radius:99px;padding:4px 11px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---------------- Podglad importu ---------------- */
.podglad-importu{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.podglad-importu th{text-align:left;font-size:11px;font-weight:660;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tekst-3);padding:8px 10px;
  border-bottom:1px solid var(--obramowanie)}
.podglad-importu td{padding:9px 10px;border-bottom:1px solid var(--obramowanie-2);
  vertical-align:top}
.podglad-importu tr:hover td{background:#FAFDFC}
/* Tabela podgladu bywa szersza niz karta: przewijamy JA, nie cala strone. */
#import-wynik{overflow-x:auto}

/* ---------------- Kreator profilu ---------------- */
.kreator-profilu{padding:0;margin-bottom:var(--odstep-2);overflow:hidden}
.kreator-profilu summary{display:flex;align-items:center;gap:15px;padding:18px 22px;
  cursor:pointer;list-style:none}
.kreator-profilu summary::-webkit-details-marker{display:none}
.kreator-profilu summary:hover{background:#FAFDFC}
.kreator-profilu summary>span:nth-child(2){flex:1;min-width:0;display:flex;
  flex-direction:column;gap:3px;font-size:14px}
.kreator-profilu summary .cichy{font-size:12.5px;line-height:1.55}
.ikona-kreatora{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;
  place-items:center;background:var(--marka-50);color:var(--marka);font-size:15px}
.kreator-profilu .strzalka{color:var(--tekst-3);font-size:12px;transition:transform .18s}
.kreator-profilu[open] .strzalka{transform:rotate(180deg)}
.wnetrze-kreatora{padding:4px 22px 22px;border-top:1px solid var(--obramowanie-2)}

.naglowek-propozycji{font-size:12px;font-weight:660;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tekst-3);margin:20px 0 9px}
.poz-propozycji{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;
  border:1px solid var(--obramowanie);border-radius:var(--r-s);margin-bottom:6px;
  cursor:pointer;font-size:13.5px}
.poz-propozycji:hover{background:#FAFDFC}
.poz-propozycji input{margin-top:2px;accent-color:var(--marka);flex:0 0 auto}
.tresc-propozycji{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tresc-propozycji span{font-size:12.5px;color:var(--tekst-3);line-height:1.5}
/* Pewnosc ponizej 0,7 wyroznona, bo to pole do sprawdzenia przez czlowieka. */
.pewnosc{flex:0 0 auto;font-size:11.5px;font-weight:640;color:var(--marka);
  background:var(--marka-50);border-radius:99px;padding:3px 9px}
.pewnosc.niska{color:#8A6220;background:#FFF8EC}
/* Slowa kluczowe jako plaska siatka: jest ich kilkanascie, wiec lista pionowa
   zajelaby pol ekranu i utrudnila porownanie. */
.propozycje-plaskie{display:flex;flex-wrap:wrap;gap:6px}
.propozycje-plaskie .poz-propozycji{margin:0;padding:7px 11px}
.propozycje-plaskie .tresc-propozycji span{display:none}
.stopka-kreatora{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--obramowanie-2)}
.stopka-kreatora .cichy{font-size:12px;flex:1;min-width:180px}

/* ---------------- Podpowiedzi wyszukiwarki ---------------- */
.szukajka{position:relative}
.podpowiedzi{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--karta);border:1px solid var(--obramowanie);border-radius:12px;
  box-shadow:0 14px 36px rgba(27,24,42,.14);overflow:hidden;list-style:none;
  max-height:340px;overflow-y:auto}
.podpowiedzi li{display:flex;align-items:center;gap:11px;padding:11px 15px;
  cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--obramowanie-2)}
.podpowiedzi li:last-child{border-bottom:0}
.podpowiedzi li>i{color:var(--tekst-3);font-size:12px;flex:0 0 auto}
.podpowiedzi li:hover,.podpowiedzi li.wybrana{background:var(--marka-50)}
.tekst-podpowiedzi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rodzaj-podpowiedzi{flex:0 0 auto;font-size:11px;color:var(--tekst-3);
  background:var(--tlo);border-radius:99px;padding:3px 9px}

/* ---------------- Onboarding ----------------
   Wzorzec z dojrzalych SaaS-ow: przyciemnione tlo, powitanie z ilustracja,
   potem krotka wycieczka podswietlajaca PRAWDZIWE elementy interfejsu.

   ⚠️ Podswietlenie robi CIEN O OGROMNYM ROZMYCIU na samym elemencie, a nie
   cztery nakladki wokol niego. Cztery nakladki rozjezdzaja sie przy kazdym
   przewinieciu i przy zmianie rozmiaru okna, cien trzyma sie elementu sam. */
.onboarding-zaslona{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  padding:24px;background:rgba(27,24,42,.62);backdrop-filter:blur(3px);
  animation:ob-wejscie .28s ease}
/* ⚠️ W TRYBIE WYCIECZKI ZACIEMNIA ZASLONA, a nie cien podswietlonego elementu.
   Wersja z cieniem `0 0 0 9999px` byla przycinana przez pierwszego przodka
   z `overflow` (u nas `.plocho` ma `overflow-y:auto`), wiec przyciemnienie
   koniczylo sie na krawedziach kolumny tresci: pasek nawigacji po lewej
   i margines po prawej zostawaly jasne. Zaslona jest `position:fixed;inset:0`,
   wiec z definicji obejmuje CALY ekran i nikt jej nie przytnie.
   Podswietlony element wychodzi ponad nia dzieki `z-index`. */
.onboarding-zaslona.wycieczka{background:rgba(27,24,42,.66);backdrop-filter:none;
  pointer-events:none}
.onboarding-zaslona.wycieczka .onboarding-dymek{pointer-events:auto}
@keyframes ob-wejscie{from{opacity:0}to{opacity:1}}

.onboarding-powitanie{position:relative;background:var(--karta);border-radius:20px;
  width:min(880px,100%);max-height:92vh;overflow:auto;display:grid;
  grid-template-columns:1fr 1fr;align-items:center;gap:8px;
  box-shadow:0 30px 80px rgba(27,24,42,.34);
  animation:ob-karta .34s cubic-bezier(.2,.7,.3,1)}
@keyframes ob-karta{from{opacity:0;transform:translateY(16px) scale(.98)}
                    to{opacity:1;transform:none}}
.onboarding-powitanie img{width:100%;height:auto;padding:30px 26px;
  background:linear-gradient(150deg,#F7F3FF,#EEE7FF);border-radius:20px 0 0 20px}
.tresc-powitania{padding:34px 38px 34px 12px}
.tresc-powitania .odznaka{display:inline-flex;align-items:center;gap:7px;
  background:var(--marka-50);color:var(--marka);padding:5px 13px;border-radius:99px;
  font-size:11.5px;font-weight:640;margin-bottom:15px}
.tresc-powitania h2{font-size:25px;font-weight:670;letter-spacing:-.028em;
  line-height:1.28;margin-bottom:12px}
.tresc-powitania p{color:var(--tekst-2);font-size:14.5px;line-height:1.68}
.akcje-powitania{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.drobne-powitania{font-size:12px;color:var(--tekst-3);margin-top:16px;
  display:flex;align-items:center;gap:7px}
.zamknij-onboarding{position:absolute;top:14px;right:14px;width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--tekst-2);
  cursor:pointer;display:grid;place-items:center;font-size:14px}
.zamknij-onboarding:hover{background:#fff;color:var(--tekst)}

/* Element pokazywany w danym kroku. `position:relative` jest konieczne,
   zeby `z-index` w ogole zadzialal na elemencie w zwyklym przeplywie. */
.ob-podswietlony{position:relative;z-index:2001;border-radius:12px;
  background:var(--karta);
  box-shadow:0 0 0 3px var(--marka);
  transition:box-shadow .25s ease}
/* ⚠️ BLOKADA PRZEWIJANIA TYLKO PRZY POWITANIU I PODSUMOWANIU.
   Wczesniej obowiazywala takze podczas wycieczki, a wycieczka MUSI przewijac
   strone do podswietlanego elementu. Dwie reguly walczyly ze soba i wygrywala
   blokada: zmierzone na produkcji `scrollY` zostawalo na 5, podczas gdy
   podswietlany element siedzial na wysokosci 1278 px przy oknie 835 px.
   Efekt dla uzytkownika: nacisnal "Pokaz mi, jak to dziala", ekran sie
   przyciemnil i NIC WIECEJ SIE NIE POJAWILO, bo i dymek, i podswietlenie
   byly ponizej widocznego obszaru.
   ⚠️ `overflow:hidden` na `body` przenosi sie na okno widoku, gdy `html`
   ma `visible`, wiec `scrollIntoView` przestaje dzialac, chociaz `scrollTo`
   nadal dziala. Objaw byl przez to mylacy. */
body.ob-otwarty{overflow:hidden}
body.ob-otwarty.ob-wycieczka{overflow:visible}

.onboarding-dymek{position:fixed;z-index:2002;width:min(360px,calc(100vw - 24px));
  background:var(--karta);border-radius:14px;padding:18px 20px 16px;
  box-shadow:0 18px 44px rgba(27,24,42,.34);animation:ob-karta .22s ease}
.postep-wycieczki{font-size:11px;font-weight:660;letter-spacing:.06em;
  text-transform:uppercase;color:var(--marka);margin-bottom:8px}
.onboarding-dymek h3{font-size:16.5px;font-weight:660;letter-spacing:-.02em;
  line-height:1.35;margin-bottom:7px}
.onboarding-dymek p{font-size:13.5px;line-height:1.65;color:var(--tekst-2)}
.stopka-dymka{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:18px}
.nawigacja-dymka{display:flex;gap:8px}
.przycisk.maly{padding:8px 14px;font-size:13px}
.przycisk.cichy-przycisk{background:transparent;color:var(--tekst-2);
  box-shadow:inset 0 0 0 1px var(--obramowanie)}
.przycisk.cichy-przycisk:hover{background:var(--tlo);color:var(--tekst);box-shadow:inset 0 0 0 1px var(--obramowanie)}

/* ---- Lista pierwszych krokow ---- */
.lista-startowa{padding:22px 24px;margin-bottom:var(--odstep-2)}
.gora-listy{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.lista-startowa h3{font-size:16px;font-weight:660;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;margin-bottom:5px}
.lista-startowa h3 i{color:var(--marka)}
.zwin-liste{border:0;background:transparent;color:var(--tekst-3);cursor:pointer;
  font-size:14px;padding:4px 6px;border-radius:7px}
.zwin-liste:hover{background:var(--tlo);color:var(--tekst-2)}
.pasek-postepu{height:7px;background:var(--tlo);border-radius:99px;
  overflow:hidden;margin:16px 0 8px}
.pasek-postepu .wypelnienie{height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--marka),#947FFF);transition:width .4s ease}
.licznik-postepu{font-size:12.5px;color:var(--tekst-2);margin-bottom:16px}
.zadania{list-style:none;display:flex;flex-direction:column;gap:2px}
.zadania li{display:flex;align-items:center;gap:13px;padding:12px 4px;
  border-top:1px solid var(--obramowanie-2)}
.zadania li>i{font-size:16px;color:var(--obramowanie);flex:0 0 auto}
.zadania li.zrobione>i{color:var(--spelnia)}
.zadania li>div{flex:1;min-width:0}
.zadania li b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.zadania li.zrobione b{color:var(--tekst-2);text-decoration:line-through}
.zadania li span{font-size:12.5px;color:var(--tekst-3);line-height:1.5}

@media (max-width:820px){
  /* Na telefonie ilustracja zabralaby cala wysokosc ekranu, wiec znika,
     a karta staje sie jednokolumnowa. */
  .onboarding-powitanie{grid-template-columns:1fr}
  .onboarding-powitanie img{display:none}
  .tresc-powitania{padding:30px 24px 26px}
  .tresc-powitania h2{font-size:21px}
  .akcje-powitania{flex-direction:column;align-items:stretch}
  .zadania li{flex-wrap:wrap}
}

/* ---------------- Urzadzenia mobilne ---------------- */
@media(max-width:960px){
  .aplikacja{grid-template-columns:1fr}
  .panel{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto}
  .panel nav{display:flex;gap:4px;padding:8px}
  .panel .grupa,.panel .stopka,.panel .licznik{display:none}
  .panel a.poz span{display:none}
}
@media(max-width:720px){
  .werdykty{grid-template-columns:1fr}
  .wiersz{flex-direction:column}
  main{padding:16px}
  .belka{padding:0 16px}
}

/* =====================================================================
   Chowane menu boczne
   Stan zapisujemy w pamieci przegladarki i odtwarzamy PRZED pierwszym
   malowaniem (skrypt w <head>), inaczej przy kazdym przejsciu miedzy
   stronami menu mrugaloby na chwile w pelnej szerokosci.
   ===================================================================== */
:root{--szer-panelu-waska:72px}
body.zwiniete .aplikacja{grid-template-columns:var(--szer-panelu-waska) 1fr}
body.zwiniete .panel .marka span,
body.zwiniete .panel .grupa,
body.zwiniete .panel a.poz span,
body.zwiniete .panel .licznik,
body.zwiniete .panel .stopka span{display:none}
body.zwiniete .panel .marka{justify-content:center;padding:20px 0}
body.zwiniete .panel a.poz{justify-content:center;padding:11px 0}
body.zwiniete .panel .stopka{text-align:center;padding:14px 0}
.aplikacja{transition:grid-template-columns .2s cubic-bezier(.2,.7,.3,1)}

.zwijak{width:30px;height:30px;border-radius:8px;border:0;cursor:pointer;flex:0 0 30px;
  background:transparent;color:var(--tekst-3);display:grid;place-items:center;
  transition:background .12s,color .12s}
.zwijak:hover{background:var(--marka-50);color:var(--marka)}
body.zwiniete .zwijak i{transform:rotate(180deg)}
.zwijak i{transition:transform .2s}

/* Podpowiedz przy zwinietym menu: bez niej ikony sa zagadka */
body.zwiniete .panel a.poz{position:relative}
body.zwiniete .panel a.poz::after{content:attr(data-etykieta);position:absolute;left:calc(100% + 10px);
  top:50%;transform:translateY(-50%) scale(.94);background:var(--panel-2);color:#fff;
  padding:5px 10px;border-radius:7px;font-size:12px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s,transform .12s;z-index:40;
  box-shadow:0 4px 14px rgba(0,0,0,.28)}
body.zwiniete .panel a.poz:hover::after{opacity:1;transform:translateY(-50%) scale(1)}

/* =====================================================================
   Zakladki
   ===================================================================== */
.zakladki{display:flex;gap:2px;border-bottom:1px solid var(--obramowanie);margin-bottom:18px;
  overflow-x:auto;scrollbar-width:none}
.zakladki::-webkit-scrollbar{display:none}
.zakladki a{padding:11px 15px;font-size:13.5px;font-weight:560;color:var(--tekst-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  display:flex;align-items:center;gap:7px;transition:color .14s,border-color .14s}
.zakladki a i{font-size:13px;opacity:.7}
.zakladki a:hover{color:var(--tekst)}
.zakladki a.teraz{color:var(--marka);border-bottom-color:var(--marka);font-weight:620}
.zakladki a.teraz i{opacity:1}
.zakladki .liczba{background:var(--obramowanie-2);color:var(--tekst-2);font-size:11px;
  font-weight:600;padding:1px 7px;border-radius:99px}
.zakladki a.teraz .liczba{background:var(--marka-50);color:var(--marka)}

/* =====================================================================
   Wzory: subtelne, generowane, bez plikow
   Siatka kropek na tle strony i delikatny polysk na kartach kluczowych.
   Wzor ma byc ledwo widoczny: ma dawac glebie, a nie zwracac uwage.
   ===================================================================== */
/* Tlo gladkie, bez wzoru: wzorzec stawia na czystosc, a kropki dodawaly szumu. */
.karta{position:relative}

/* Delikatny polysk w naroznikach kafelkow liczb */
.kafelek::before{content:"";position:absolute;top:-40%;right:-14%;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,var(--marka-50) 0%,transparent 68%);
  opacity:.7;pointer-events:none}

/* Siatka linii na banerze USUNIETA: pochodzila z ciemnej wersji, a na jasnym
   tle nadpisywala miekkie plamy i tylko brudzila obraz. */

/* =====================================================================
   Animacje
   Krotkie i stonowane. Ruch ma prowadzic wzrok, a nie bawic.
   ===================================================================== */
main>*{animation:wjazd .3s cubic-bezier(.2,.7,.3,1) backwards}
main>*:nth-child(2){animation-delay:.05s}
main>*:nth-child(3){animation-delay:.09s}
main>*:nth-child(4){animation-delay:.12s}

.wiersz{animation:wjazd .3s cubic-bezier(.2,.7,.3,1) backwards}
.wiersz:nth-child(2){animation-delay:.03s}
.wiersz:nth-child(3){animation-delay:.06s}
.wiersz:nth-child(4){animation-delay:.09s}
.wiersz:nth-child(5){animation-delay:.12s}

.karta,.kafelek{transition:box-shadow .18s,transform .18s,border-color .18s}
.kafelek:hover{box-shadow:var(--cien-2);transform:translateY(-2px);border-color:var(--marka-100)}
.przycisk,.plakietka,.zakladki a,.panel a.poz{will-change:auto}

/* Kolko dopasowania nabiega od zera przy wejsciu na widok */
@property --proc{syntax:'<number>';inherits:false;initial-value:0}
.kolko{animation:nabieg .75s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes nabieg{from{--proc:0}}

/* ⚠️ Uzytkownik, ktory prosil o ograniczenie ruchu, dostaje interfejs bez animacji.
   To wymog dostepnosci, nie preferencja. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* =====================================================================
   UKLAD "UPSTREAM": pelna belka gorna, waski pasek ikon, dwie kolumny
   Wzorzec przeslany przez Adama. Trzy roznice wobec poprzedniej wersji:
     1. belka idzie przez CALA szerokosc, nad paskiem bocznym,
     2. pasek boczny jest WASKI i ikonowy, bez etykiet,
     3. lista i szczegoly stoja OBOK SIEBIE, zgodnie z nasza wlasna regula
        "panel szczegolow wysuwa sie obok listy, nie zastepuje jej".
   ===================================================================== */
:root{--szer-paska:74px; --wys-belki:60px}

.powloka{min-height:100vh;display:flex;flex-direction:column}

/* --- Belka gorna przez cala szerokosc --- */
.belka-gorna{height:var(--wys-belki);background:var(--karta);
  border-bottom:1px solid var(--obramowanie);display:flex;align-items:center;gap:18px;
  padding:0 20px;position:sticky;top:0;z-index:50}
.belka-gorna .marka{display:flex;align-items:center;gap:10px;font-weight:680;font-size:16px;
  color:var(--tekst);letter-spacing:-.015em;flex:0 0 auto}
.belka-gorna .marka img{border-radius:9px}
.belka-gorna .marka span{color:var(--marka)}

/* Wyszukiwarka globalna: srodek belki, jak we wzorcu */
.szukajka{flex:1 1 auto;max-width:520px;position:relative;display:flex;align-items:center}
.szukajka i.lupa{position:absolute;left:13px;color:var(--tekst-3);font-size:13px;pointer-events:none}
.szukajka input{padding-left:35px;background:#F7F8FC;border-color:transparent}
.szukajka input:focus{background:#fff}
.szukajka .zakres{position:absolute;right:6px;font-size:11px;color:var(--tekst-3);
  background:#fff;border:1px solid var(--obramowanie);border-radius:6px;padding:2px 7px}
.belka-gorna .rozciag{flex:1}
.belka-gorna .uzytkownik{flex:0 0 auto}
.dzwonek{position:relative;width:38px;height:38px;border-radius:10px;border:0;background:transparent;
  color:var(--tekst-2);cursor:pointer;display:grid;place-items:center;transition:background .12s}
.dzwonek:hover{background:var(--marka-50);color:var(--marka)}
.dzwonek .kropka{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--uwaga);border:2px solid var(--karta)}

/* --- Korpus: waski pasek ikon plus tresc --- */
.korpus{flex:1;display:grid;grid-template-columns:var(--szer-paska) 1fr;min-height:0}
.pasek{background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 0;position:sticky;top:var(--wys-belki);height:calc(100vh - var(--wys-belki));
  transition:width .2s;
  /* ⚠️ Wlasny kontekst nakladania, WYZSZY niz tresc. Bez tego podpowiedz
     przy ikonie chowala sie pod kartami, bo tresc lezy dalej w dokumencie
     i przy rownej warstwie malowala sie na wierzchu. */
  z-index:40}
.pasek a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:#C7CCE0;font-size:16px;position:relative;transition:background .14s,color .14s}
.pasek a:hover{background:rgba(255,255,255,.08);color:#fff}
.pasek a.teraz{background:#fff;color:var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pasek .rozdziel{width:26px;height:1px;background:rgba(255,255,255,.1);margin:7px 0}
.pasek .doldu{margin-top:auto}
/* Podpowiedz: pasek ikonowy bez niej jest zagadka */
.pasek a::after{content:attr(data-etykieta);position:absolute;left:calc(100% + 9px);top:50%;
  transform:translateY(-50%) scale(.94);background:var(--panel-2);color:#fff;padding:5px 10px;
  border-radius:7px;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;z-index:60;
  transition:opacity .12s,transform .12s;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.pasek a:hover::after{opacity:1;transform:translateY(-50%) scale(1)}
.pasek .licznik{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--uwaga);color:#fff;font-size:9.5px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--panel)}
.pasek a.teraz .licznik{border-color:#fff}

/* ⚠️ Ograniczenie szerokosci jest TUTAJ, a nie na `<main>`. Czesc sekcji
   ekranu przetargu lezy poza znacznikiem `<main>`, wiec regula przypieta
   do niego ich nie obejmowala i karty byly rozciagniete na cala szerokosc
   okna: na ekranie 1900 px linia tekstu miala ponad 200 znakow. */
/* ⚠️ `width:100%` JEST TU KONIECZNE, NIE OZDOBNE. `.plocho` jest elementem
   kolumny flex z `margin:0 auto`, a margines automatyczny wylacza rozciaganie:
   szerokosc liczy sie wtedy z TRESCI, wiec tabela kadry albo tablica lejka
   rozpychala kolumne do 1180 albo 1680 px i strona przewijala sie w poziomie
   na kazdym oknie wezszym niz tresc. Zmierzone 03.09.2026 w ramkach:
   przy 768 px kolumna miala 1180 px (doswiadczenie, kalendarz), 1048 (kadra),
   1238 (lejek); przy 1024 px odpowiednio 1254, 1170, 1336. Poprawka telefoniczna
   z etapu 38 dzialala tylko ponizej 700 px. Z jawna szerokoscia kolumna nigdy
   nie przekracza okna, a szerokie widzety przewijaja sie u siebie
   (`.przewijana` przy tabelach, `.lejek` przy tablicy). */
.plocho{min-width:0;width:100%;overflow-x:hidden;max-width:1240px;margin:0 auto;padding:32px 36px 48px}

/* --- Okladka z karta informacyjna na wierzchu (wzorzec Upstream) --- */
.okladka{position:relative;height:190px;background:var(--panel) center/cover no-repeat;
  display:flex;align-items:flex-start;padding:16px 22px}
.okladka::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,.42) 0%,rgba(15,23,42,.12) 45%,rgba(15,23,42,.5) 100%)}
.okruszki{position:relative;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--tekst-3);
  margin-bottom:10px}
.okruszki a{color:var(--tekst-2);opacity:1}
.okruszki a:hover{opacity:1}
.okruszki i.strzalka{opacity:.55;font-size:10px}

/* Karta wysunieta na okladke, czesciowo poza nia */
.karta-na-okladce{margin:-70px 22px 0;position:relative;z-index:2;padding:18px 20px;
  background:var(--karta);border:1px solid var(--obramowanie);border-radius:var(--r);
  box-shadow:0 8px 28px rgba(15,23,42,.1)}
.karta-na-okladce h1{font-size:18px;font-weight:660;line-height:1.35;margin-bottom:9px}
.karta-na-okladce .fakty-w-linii{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--obramowanie-2);
  margin-top:13px;padding-top:13px}
.karta-na-okladce .fakty-w-linii>div{padding:0 18px;border-right:1px solid var(--obramowanie-2)}
.karta-na-okladce .fakty-w-linii>div:first-child{padding-left:0}
.karta-na-okladce .fakty-w-linii>div:last-child{border-right:0}
.karta-na-okladce .fakty-w-linii .wartosc{font-size:14.5px;font-weight:650}
.karta-na-okladce .fakty-w-linii .etykieta{font-size:11px;color:var(--tekst-3);margin-top:1px}

/* --- Dwie kolumny: lista obok szczegolow --- */
/* ⚠️ Kolumna listy POSZERZONA z 420 na 480 px. Przy 420 px pasek filtrow
   (szukanie, wojewodztwo, sortowanie, prog dopasowania, dwa przyciski
   eksportu) nie miescil sie w jednym wierszu i wychodzil NA PANEL
   SZCZEGOLOW, zaslaniajac tytul przetargu. Sama szerokosc to za malo,
   dlatego `.gora` dostaje ponizej zawijanie. */
/* ⚠️ SZEROKOSC KOLUMNY LISTY. Klientka 31.08.2026: „nie radzę sobie
   z tymi poucinanymi tytułami tak w pierwszym rzucie oka". Tytuly polskich
   postepowan maja regularnie po 150 znakow („ZAPYTANIE OFERTOWE nr
   102/2026/CK/PSON (dalej: Zapytanie) pn. zakup uslugi badawczej..."),
   wiec w kolumnie 360 px dwie linie ucinaly je zawsze. */
.dwie-kolumny{display:grid;grid-template-columns:minmax(420px,560px) 1fr;gap:0;
  /* szata 25.09.2026: lista i panel jako jedna biala karta */
  border:1px solid var(--obramowanie) !important;border-radius:var(--r);overflow:hidden;
  background:var(--karta);box-shadow:var(--cien);
  border-top:1px solid var(--obramowanie);min-height:520px}
.kolumna-listy{border-right:1px solid var(--obramowanie);background:var(--karta);
  display:flex;flex-direction:column;min-width:0;position:relative}
/* ⚠️ ZAWIJANIE JEST TU KONIECZNE. Bez `flex-wrap` kontrolki filtrow nie
   przechodza do drugiego wiersza, tylko wylewaja sie poza kolumne i leza
   na panelu szczegolow. Widoczne golym okiem przy czterech filtrach. */
.kolumna-listy .gora{padding:14px 16px;border-bottom:1px solid var(--obramowanie-2);
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;row-gap:9px}
/* W waskiej kolumnie listy filtry dziela wiersz po polowie. */
.kolumna-listy .gora .lista-wlasna{flex:1 1 46%;min-width:150px}
.kolumna-listy .gora .szukajka{flex:1 1 100%;min-width:0}
.kolumna-listy .gora .eksport-listy{margin-left:0}
/* ⚠️ LISTA SIEGA DO LINII PRAWEJ KOLUMNY. Klientka 24.08.2026: "lista powinna
   sie ciagnac do linii kolumny po prawej, dopiero potem pokazywac 2, 3, 4
   strone". Wczesniej wysokosc byla przycieta na sztywno do wysokosci okna
   (`calc(100vh - 200px)`), wiec przy dlugim panelu szczegolow pod lista
   zostawal pusty pas, a stronicowanie pojawialo sie za wczesnie.
   Teraz obszar listy ROSNIE do wysokosci wiersza siatki, czyli do wysokosci
   panelu obok, a przewija sie dopiero wtedy, gdy pozycji jest wiecej.
   `min-height:0` jest konieczne: bez niego element siatki nie kurczy sie
   ponizej wlasnej zawartosci i przewijanie w ogole nie dziala. */
.kolumna-listy .przewijana{overflow-y:auto;flex:1 1 auto;min-height:0}
.kolumna-szczegolow{background:var(--tlo);padding:22px;min-width:0;overflow-x:hidden}

/* ⚠️ SUWAK CHOWAJACY PANEL SZCZEGOLOW. Klientka 24.08.2026: "brakuje mi
   takiego suwaka, co ukrywa czesc strony, tych szczegolow, bo chcialabym
   sobie na cala szerokosc strony zobaczyc cala liste przetargow dopasowanych
   do profilu". Panel znika, lista zajmuje cala szerokosc i pokazuje wiecej
   kolumn w wierszu. Stan pamietany w przegladarce, per uzytkownik. */
.dwie-kolumny.bez-panelu{grid-template-columns:1fr}
.dwie-kolumny.bez-panelu .kolumna-szczegolow{display:none}
.dwie-kolumny.bez-panelu .kolumna-listy{border-right:0}
.dwie-kolumny.bez-panelu .kolumna-listy .gora .szukajka{flex:1 1 40%}
.dwie-kolumny.bez-panelu .kolumna-listy .gora .lista-wlasna{flex:0 1 auto}
.dwie-kolumny.bez-panelu .mini h4{-webkit-line-clamp:1}
/* ⚠️ UCHWYT NA KRAWEDZI, nie przycisk z napisem. Klientka 14.09.2026: „czy
   zamiast tego butona »cała szerokość« dałoby się zrobić takie strzałki przy
   sidebar?". Kolko ze strzalka siedzi na linii miedzy lista a panelem; gdy
   panel jest schowany, kolumna listy zajmuje cala szerokosc, wiec uchwyt
   przesuwa sie do jej prawej krawedzi (inaczej wypadlby poza ekran). */
.uchwyt-panelu{position:absolute;top:16px;right:-15px;z-index:6;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--obramowanie);background:#fff;color:var(--tekst-2);
  cursor:pointer;display:grid;place-items:center;font-size:12px;padding:0;
  box-shadow:0 2px 8px rgba(15,23,42,.14);transition:color .14s,border-color .14s}
.uchwyt-panelu:hover{color:var(--marka);border-color:var(--marka)}
.dwie-kolumny.bez-panelu .uchwyt-panelu{right:14px}
/* W trybie pelnej szerokosci uchwyt siedzi WEWNATRZ kolumny, wiec pasek
   filtrow dostaje z prawej miejsce na niego (zmierzone na zrzucie: bez tego
   kolko zaslanialo koniec listy sortowania). */
.dwie-kolumny.bez-panelu .kolumna-listy .gora{padding-right:58px}
/* Margines po prawej w trybie pelnej szerokosci: tytuly dochodzily do paska
   przewijania (uwaga klientki 14.09.2026: „nieco zwiększyć margines po prawej"). */
.dwie-kolumny.bez-panelu .mini{padding-right:56px}
/* Dol listy: ostatni wiersz przylegal do krawedzi okna („margines dolny jest
   za nisko"), a pasek stron pokazywal sie dopiero od drugiej strony. */
.kolumna-listy .strony{padding:14px 16px 26px;justify-content:flex-start;align-items:center}
.strony .zakres-stron{margin-right:auto}
.podpowiedz-filtrow{margin:8px 2px 0;line-height:1.5}

/* Skrocony wiersz listy w waskiej kolumnie */
.mini{padding:13px 16px;border-bottom:1px solid var(--obramowanie-2);cursor:pointer;
  display:flex;gap:12px;align-items:flex-start;transition:background .12s;
  border-left:3px solid transparent}
.mini:hover{background:#FBF8F5}
.mini.wybrany{background:var(--marka-50);border-left-color:var(--marka)}
.mini h4{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--tekst);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* ⚠️ W TRYBIE PELNEJ SZEROKOSCI TYTUL NIE JEST UCINANY W OGOLE. Przycisk
   „Cała szerokość" chowa panel szczegolow, wiec miejsca jest az nadto,
   a to wlasnie po to klientka go wlacza: zeby zobaczyc tytuly w calosci. */
.dwie-kolumny.bez-panelu .mini h4{display:block;-webkit-line-clamp:none;overflow:visible}
/* Wynik na karcie lejka. Ten sam spokojny jezyk co adnotacja na liscie. */
.wynik-karty{display:flex;align-items:center;gap:6px;margin-top:7px;padding:4px 8px;
  border-radius:7px;background:var(--tlo);font-size:11.5px;font-weight:600;
  color:var(--tekst-2);line-height:1.4;flex-wrap:wrap}
.wynik-karty i{font-size:10.5px;opacity:.75}
.wynik-karty .cichy{font-weight:500}

/* Blok z wynikiem postepowania na ekranie przetargu. Spokojny, bez koloru
   werdyktu: to informacja o stanie postepowania, a nie ocena naszych szans. */
.blok-wyniku h3{margin:0 0 6px;font-size:15px;display:flex;align-items:center;gap:9px}
.blok-wyniku h3 i{color:var(--tekst-3);font-size:14px}
.meta .wartosc-umowy{color:var(--tekst)}
.meta .wartosc-umowy b{font-weight:600}
.wykonawcy-wyniku{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.wykonawcy-wyniku .wykonawca{padding:10px 12px;border:1px solid var(--obramowanie);
  border-radius:9px;background:var(--tlo);font-size:13px;line-height:1.5}
.wykonawcy-wyniku .wykonawca b{display:block}
.wykonawcy-wyniku .wykonawca span{font-size:12px}

/* Adnotacja o wyniku postepowania. Kolor stonowany, nie werdyktowy:
   ⚠️ zielony, bursztynowy i czerwony sa w tym produkcie ZAREZERWOWANE
   dla werdyktow (`frontend.md`), a informacja „to postepowanie jest juz
   rozstrzygniete" nie jest werdyktem o naszych szansach. */
.adnotacja-wynik{display:inline-flex;align-items:center;gap:6px;margin-top:5px;
  padding:2px 9px;border-radius:99px;background:var(--tlo);color:var(--tekst-2);
  font-size:11.5px;font-weight:600}
.adnotacja-wynik i{font-size:10.5px;opacity:.75}

/* Zdanie o przedmiocie pod tytulem: ciszej niz tytul, ale czytelnie.
   Dwie linie wystarcza, zeby powiedziec, czego dotyczy postepowanie. */
.przedmiot-wiersza{font-size:13px;line-height:1.45;color:var(--tekst-2);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dwie-kolumny.bez-panelu .przedmiot-wiersza{-webkit-line-clamp:3}
.mini .drobne{font-size:11.5px;color:var(--tekst-2);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap}
.kolko.male{width:42px;height:42px;flex:0 0 42px}
.kolko.male::after{inset:4px}
.kolko.male b{font-size:12px}

@media(max-width:1100px){
  .dwie-kolumny{grid-template-columns:1fr}
  .kolumna-listy{border-right:0;border-bottom:1px solid var(--obramowanie)}
  .kolumna-listy .przewijana{max-height:none}
}
@media(max-width:720px){
  /* ⚠️ UKRYWAMY POLE W BELCE GORNEJ, NIE KAZDE POLE WYSZUKIWANIA.
     Regula celowala w klase, a klasa `.szukajka` jest uzyta w DWOCH
     miejscach: w belce (baza.html) i nad lista wynikow (lista.html).
     Efekt: na telefonie znikala CALA wyszukiwarka, czyli glowna funkcja
     produktu, a na waskim ekranie to jedyny sposob dotarcia do przetargu.
     Selektor musi opisywac MIEJSCE, nie sam wyglad. */
  .belka-gorna .szukajka{display:none}
  .okladka{height:150px}
  .karta-na-okladce{margin:-56px 14px 0}
  .karta-na-okladce .fakty-w-linii>div{padding:6px 14px 6px 0;border-right:0}
}

/* Naglowek strony pod belka gorna (ekrany bez okladki) */
.naglowek-strony{padding:20px 24px 0}
.naglowek-strony h1{font-size:19px;font-weight:660}
/* ⚠️ WYJUSTOWANIE TEKSTU POD NAGLOWKIEM. Klientka o ekranie zamowien
   planowanych (24.08.2026): „tekst wyjustujmy na całej długości belki".
   `hyphens:auto` jest tu konieczne: samo justowanie polskiego tekstu bez
   dzielenia wyrazow robi rzeki bialych przerw miedzy dlugimi slowami. */
.naglowek-strony p{text-align:justify;hyphens:auto;max-width:none}
.tylko-szerokie{display:block}

/* =====================================================================
   TELEFON: interfejs ma dzialac w calosci, nie byc scisnieta wersja pulpitu.
   Wzorzec aplikacyjny: pasek nawigacji schodzi NA DOL, w zasieg kciuka,
   a belka gorna zostaje z wyszukiwarka.
   ===================================================================== */
@media(max-width:820px){
  .korpus{grid-template-columns:1fr}
  .pasek{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;width:100%;
    flex-direction:row;justify-content:space-around;padding:6px 4px;gap:0;
    border-top:1px solid rgba(255,255,255,.12);z-index:60;
    padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .pasek .rozdziel,.pasek .doldu{display:none}
  /* ⚠️ `min-width:0` JEST TU KONIECZNE. Element siatki elastycznej domyslnie
     NIE KURCZY sie ponizej szerokosci swojej tresci, wiec trzynascie pozycji
     po 42 px dawalo pasek **546 px przy ekranie 375 px** i to ON rozpychal
     cala strone: tytul przetargu i nazwa zamawiajacego wygladaly na uciete,
     choc winna byla nawigacja. Zmierzone w przegladarce:
     `scrollWidth` 545 przy `clientWidth` 375.
     `overflow-x:auto` jest siatka bezpieczenstwa: gdyby pozycji przybylo,
     przewinie sie SAM PASEK, a nie cala strona. */
  .pasek{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pasek::-webkit-scrollbar{display:none}
  .pasek a{width:auto;flex:1 1 0;min-width:0;max-width:64px;height:44px;border-radius:10px}
  /* Podpowiedzi wylaczone: na dotyku nie ma najechania, a etykieta zaslaniala tresc */
  .pasek a::after{display:none}
  .plocho{padding-bottom:64px}
  .belka-gorna{padding:0 14px;gap:10px}
  /* ⚠️ Na telefonie chowamy SAM NAPIS, nie caly znak. Poprzednia wersja
     celowala w `span`, a `.znak-slowny` TEZ jest spanem wewnatrz `.marka`,
     wiec regula (0,2,1) wygrywala z `.znak-slowny` (0,1,0) i marka znikala
     z belki calkowicie. Szosty raz w tym projekcie waga selektora, nie kolejnosc. */
  .belka-gorna .marka .znak-napis{display:none}
  .tylko-szerokie{display:none}
  .szukajka{max-width:none}
  .szukajka .zakres{display:none}
  main{padding:16px 14px 28px}
  .naglowek-strony{padding:16px 14px 0}
  .naglowek-strony h1{font-size:17px}
  .okladka{height:132px;padding:12px 14px}
  .karta-na-okladce{margin:-48px 14px 0;padding:15px 16px}
  .karta-na-okladce h1{font-size:16px}
  .karta-na-okladce .fakty-w-linii{gap:12px 0}
  .karta-na-okladce .fakty-w-linii>div{flex:1 1 44%;padding:0;border-right:0}
  .zakladki{margin-left:14px !important;margin-right:14px !important}
  .kolumna-szczegolow{padding:16px 14px}
  .kolumna-listy .gora{flex-wrap:wrap}
  .kolumna-listy .gora select{flex:1 1 45% !important}
  .fakty{grid-template-columns:1fr 1fr;gap:10px}
  .fakt{padding:13px}
  .fakt .wartosc{font-size:16px}
  .kafelki{grid-template-columns:1fr 1fr;gap:10px}
  .kafelek{padding:14px}
  .kafelek .liczba{font-size:22px}
  .przewijana table{min-width:640px}
  /* Cel dotykowy minimum 44 piksele: ponizej tego trafienie kciukiem zawodzi */
  .przycisk{min-height:44px}
  .przycisk.maly{min-height:38px}
  input,select,textarea{font-size:16px}  /* ponizej 16px iOS przybliza widok przy dotknieciu */
}
@media(max-width:420px){
  .kafelki,.fakty{grid-template-columns:1fr}
  .werdykty{grid-template-columns:1fr}
}

/* =====================================================================
   PRZESTRZEN
   Uwaga Adama po zestawieniu z Upstream: teksty sie zlewaja, bo odstepy
   sa za male. To jest najczestsza roznica miedzy interfejsem zrobionym
   maszynowo a zaprojektowanym: maszyna optymalizuje gestosc, projektant
   daje treści oddychac. Ponizej jednolite zwiekszenie skali odstepow.
   ===================================================================== */
:root{--odstep:22px; --odstep-2:28px}

body{line-height:1.65}
p{line-height:1.65}

/* --- Wiersz listy: wiecej powietrza miedzy warstwami informacji --- */
.wiersz{padding:22px 24px;gap:20px}
.wiersz h3{font-size:15px;line-height:1.5;margin-bottom:10px}
.meta{gap:8px 20px;margin-top:10px;font-size:13px;line-height:1.6}
.werdykty{gap:14px;margin-top:16px}
.werdykt{padding:13px 15px;line-height:1.5}
.werdykt b{margin-top:5px;font-size:13.5px}
.pod-kolkiem{margin-top:8px}

/* --- Karty i sekcje --- */
.karta{border-radius:16px}
.sekcja{margin:0 0 16px}
.kafelki{gap:18px;margin-bottom:var(--odstep-2)}
.kafelek{padding:22px 22px 20px}
.kafelek .ikona{margin-bottom:16px}
.kafelek .etykieta{line-height:1.5;letter-spacing:.05em}
.kafelek .liczba{margin-top:6px}
.kafelek .pod{margin-top:7px;line-height:1.55}

.fakty{gap:16px;margin:var(--odstep) 0}
.fakt{padding:20px}
.fakt .ikona{margin-bottom:14px}
.fakt .wartosc{margin-top:6px}
.fakt .cichy{margin-top:4px}

/* --- Baner --- */
.baner{padding:32px 34px;margin-bottom:var(--odstep-2)}
.baner h1,.baner h2{margin-bottom:9px;line-height:1.4}
.baner p{line-height:1.65}
.baner .odznaka{margin-bottom:16px;padding:5px 13px}

/* --- Bloki informacyjne --- */
.uwaga-blok{padding:16px 18px;margin-bottom:var(--odstep);gap:13px;line-height:1.6}

/* --- Tabele: wyzsze wiersze --- */
thead th{padding:14px 20px}
tbody td{padding:17px 20px;line-height:1.55}
td .drugi{margin-top:4px}

/* --- Formularze --- */
.pole{margin-bottom:20px}
label{margin-bottom:7px;font-size:13px}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=search],textarea,select{padding:11px 14px}
/* ⚠️ Po hurtowej regule wyzej, inaczej pole wyszukiwania traci lewy margines
   i tekst wchodzi na ikone lupy. Kolejnosc ma tu znaczenie. */
.szukajka input{padding-left:38px}
.szukajka i.lupa{left:15px}
.pole .podpowiedz{margin-top:6px;line-height:1.55}
.siatka-pol{gap:0 20px}
.przycisk{padding:11px 19px}

/* --- Okladka i karta na niej --- */
.okladka{height:210px;padding:20px 28px}
.karta-na-okladce{margin:-74px 28px 0;padding:24px 26px}
.karta-na-okladce h1{margin-bottom:13px;line-height:1.4}
.karta-na-okladce .fakty-w-linii{margin-top:18px;padding-top:18px}
.karta-na-okladce .fakty-w-linii>div{padding:0 24px}
.karta-na-okladce .fakty-w-linii .etykieta{margin-top:3px;line-height:1.5}

/* --- Kolumny --- */
main{padding:28px 28px 48px}
.naglowek-strony{padding:26px 28px 0}
.kolumna-szczegolow{padding:26px}
.mini{padding:16px 18px;gap:14px}
.mini h4{line-height:1.5}
.mini .drobne{margin-top:8px;gap:12px}
.kolumna-listy .gora{padding:16px 18px;gap:11px}

/* --- Zakladki --- */
.zakladki{margin-bottom:22px}
.zakladki a{padding:13px 18px}

/* --- Plakietki: wieksze, czytelniejsze --- */
.plakietka{padding:4px 11px;font-size:11.5px}

/* --- Belka gorna: logo bez zbednej ciasnoty --- */
.belka-gorna{height:64px;padding:0 24px;gap:22px}
.belka-gorna .marka{gap:11px}
.uzytkownik{gap:11px}

@media(max-width:820px){
  main{padding:20px 16px 32px}
  .naglowek-strony{padding:18px 16px 0}
  .wiersz{padding:18px 16px;gap:14px}
  .kafelek{padding:18px}
  .karta-na-okladce{margin:-54px 16px 0;padding:18px}
  .kolumna-szczegolow{padding:18px 16px}
}

/* --- Panel rozwijany (powiadomienia) --- */
.menu-rozwijane{position:relative}
.panel-rozwijany{position:absolute;top:calc(100% + 10px);right:0;width:340px;background:var(--karta);
  border:1px solid var(--obramowanie);border-radius:14px;box-shadow:0 12px 32px rgba(27,24,42,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s,transform .14s,visibility .14s;
  z-index:70;overflow:hidden}
.panel-rozwijany.otwarty{opacity:1;visibility:visible;transform:none}
.panel-rozwijany .gora{padding:14px 18px;border-bottom:1px solid var(--obramowanie-2);
  font-weight:640;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.panel-rozwijany .lista{max-height:min(420px,60vh);overflow-y:auto}
.panel-rozwijany .pozycja{display:flex;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--obramowanie-2);align-items:flex-start;transition:background .12s}
.panel-rozwijany .pozycja:last-child{border-bottom:0}
.panel-rozwijany .pozycja:hover{background:var(--marka-50)}
.panel-rozwijany .pozycja b{display:block;font-size:13px;color:var(--tekst);font-weight:600}
.panel-rozwijany .pozycja .drugi{display:block;font-size:12px;color:var(--tekst-2);margin-top:3px;
  line-height:1.5}
.panel-rozwijany .znak{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;
  place-items:center;background:var(--marka-50);color:var(--marka);font-size:12px}
.panel-rozwijany .znak.pilny{background:var(--czesciowo-tlo);color:var(--czesciowo)}
@media(max-width:820px){.panel-rozwijany{width:min(320px,calc(100vw - 28px));right:-8px}}

/* --- Ilustracje: wspolne zasady --- */
.uwaga-blok img{border-radius:10px}
/* Delikatny wzor pod kartami kluczowych sekcji: daje glebie, nie zwraca uwagi */
/* Szata 25.09.2026: bez wzoru pod karta, czyste biale tlo. */
.karta-na-okladce{background-image:none}
.pusto img{max-width:100%;height:auto}

/* =====================================================================
   WIERSZ PRZETARGU, wersja druga
   Pierwsza miala wielkie szare skrzynki werdyktow, ktore dominowaly nad
   tytulem. Werdykt jest SYGNALEM, nie blokiem tresci, wiec ma zajmowac
   tyle miejsca, ile znaczy. Cala pozycja jest teraz jedna karta z jednym
   obszarem klikalnym, bez konkurencji o uwage.
   ===================================================================== */
.poz-przetarg{position:relative;display:flex;gap:20px;padding:22px 24px;
  border-bottom:1px solid var(--obramowanie-2);transition:background .14s}
.poz-przetarg:last-child{border-bottom:0}
.poz-przetarg:hover{background:#FAFDFC}
/* Obszar klikalny pod cala karta: caly wiersz prowadzi do szczegolow,
   a przycisk gwiazdki lezy nad nim i zachowuje wlasne dzialanie. */
.poz-przetarg .obszar{position:absolute;inset:0;z-index:1}
.poz-przetarg .ocena,.poz-przetarg .rdzen,.poz-przetarg .gwiazdka{position:relative;z-index:2}
.poz-przetarg .ocena{pointer-events:none}
.poz-przetarg .rdzen{flex:1;min-width:0;pointer-events:none}
.poz-przetarg .rdzen h3{font-size:15px;font-weight:640;line-height:1.5;color:var(--tekst);
  letter-spacing:-.012em;margin-bottom:9px}
.poz-przetarg:hover .rdzen h3{color:var(--marka-600)}

/* Kto i gdzie: jedna spokojna linia, bez ikon walczacych o uwage */
.wiersz-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--tekst-2);
  margin-bottom:12px;line-height:1.5}
.wiersz-meta i{margin-right:7px;color:var(--tekst-3);font-size:11.5px}
.wiersz-meta .kto{max-width:56ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Wojewodztwo nie lamie sie w polowie nazwy: "zachodnio" w jednej linii,
   "pomorskie" w drugiej wyglada jak dwa rozne pola. */
.wiersz-meta .gdzie{white-space:nowrap}

/* Odznaki: jednolita rodzina, zamiast trzech roznych stylow jak wczesniej */
.odznaki{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:550;
  padding:5px 11px;border-radius:8px;background:#F4F7F6;color:var(--tekst-2);
  border:1px solid transparent;white-space:nowrap}
.chip i{font-size:10.5px;color:var(--tekst-3)}
.chip em{font-style:normal;color:var(--tekst-3);font-size:11px}
.chip .brak{color:var(--tekst-3);font-style:italic}
.chip-zrodlo{background:var(--marka-50);color:var(--marka-600);font-weight:650;letter-spacing:.03em}
.chip-cichy{background:transparent;border-color:var(--obramowanie);color:var(--tekst-3)}
.chip-pilny{background:var(--czesciowo-tlo);color:var(--czesciowo);border-color:#F5E0BC}
.chip-pilny i,.chip-pilny em{color:var(--czesciowo)}

/* Werdykty: dwie pigulki w jednej linii */
.werdykty-linia{display:flex;flex-wrap:wrap;gap:8px}
.werdykt-pigulka{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  padding:6px 12px;border-radius:8px;line-height:1.4}
.werdykt-pigulka .etyk{font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:9.5px;opacity:.62;padding-right:8px;margin-right:1px;
  border-right:1px solid currentColor}
.werdykt-pigulka i{font-size:11px}
.w-tak{background:var(--spelnia-tlo);color:var(--spelnia)}
.w-czesc{background:var(--czesciowo-tlo);color:var(--czesciowo)}
.w-nie{background:var(--nie-tlo);color:var(--nie)}
/* Stan oczekiwania NIE jest werdyktem, wiec jest neutralny i przerywany */
.w-czeka{background:transparent;color:var(--tekst-3);border:1px dashed var(--obramowanie);
  font-weight:500}

/* Gwiazdka */
.poz-przetarg .gwiazdka button{width:38px;height:38px;border-radius:10px;border:1px solid var(--obramowanie);
  background:#fff;color:var(--tekst-3);cursor:pointer;font-size:14px;
  transition:color .14s,border-color .14s,background .14s}
.poz-przetarg .gwiazdka button:hover{color:var(--czesciowo);border-color:#F5E0BC;background:var(--czesciowo-tlo)}
.poz-przetarg .gwiazdka button.wlaczona{color:var(--czesciowo);border-color:#F5E0BC;
  background:var(--czesciowo-tlo)}

@media(max-width:720px){
  .poz-przetarg{gap:14px;padding:18px 16px}
  .poz-przetarg .rdzen h3{font-size:14px}
  .wiersz-meta .kto{max-width:32ch}
  .werdykt-pigulka .etyk{display:none}
}

/* =====================================================================
   WLASNE LISTY ROZWIJANE
   Natywnej listy systemowej NIE DA SIE ostylowac: przegladarka rysuje ja
   poza dokumentem, wiec na macOS wychodzila ciemna lista z niebieskim
   zaznaczeniem, obca wobec reszty. Budujemy wlasna, ale jako WZBOGACENIE:
   w dokumencie zostaje prawdziwy <select>, tylko wizualnie ukryty, wiec
   formularz dziala tak samo bez skryptu, a czytniki ekranu widza oryginal.
   ===================================================================== */
.lista-wlasna{position:relative;display:inline-flex;flex-direction:column;min-width:0}
.lista-wlasna>select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lista-wlasna .przelacznik{font:inherit;text-align:left;display:flex;align-items:center;gap:10px;
  padding:11px 14px;border:1px solid var(--obramowanie);border-radius:var(--r-s);background:#fff;
  color:var(--tekst);cursor:pointer;width:100%;transition:border-color .12s,box-shadow .12s}
.lista-wlasna .przelacznik:hover{border-color:var(--marka-100)}
.lista-wlasna .przelacznik .wybor{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.lista-wlasna .przelacznik i{color:var(--tekst-3);font-size:11px;transition:transform .16s}
.lista-wlasna[data-otwarta] .przelacznik{border-color:var(--marka);
  box-shadow:0 0 0 3px var(--marka-100)}
.lista-wlasna[data-otwarta] .przelacznik i{transform:rotate(180deg)}

/* ⚠️ `min-width:max-content`, bo `left:0;right:0` zwezalo liste do szerokosci
   POLA. Zmierzone na telefonie: pole 100 px, opcja „Przygotowanie" 121 px,
   czyli nazwa etapu byla ucieta w miejscu, w ktorym uzytkownik ma wybrac
   etap. Gorna granica pilnuje, zeby lista nie wyszla poza ekran. */
.lista-wlasna .opcje{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;
  min-width:max-content;max-width:min(320px,calc(100vw - 34px));
  background:#fff;border:1px solid var(--obramowanie);border-radius:12px;padding:6px;
  box-shadow:0 12px 30px rgba(27,24,42,.14);max-height:280px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .13s,transform .13s,visibility .13s}
.lista-wlasna[data-otwarta] .opcje{opacity:1;visibility:visible;transform:none}
.lista-wlasna .opcja{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  font-size:13.5px;color:var(--tekst);cursor:pointer;line-height:1.45}
.lista-wlasna .opcja:hover,.lista-wlasna .opcja[data-podswietlona]{background:var(--marka-50);
  color:var(--marka-600)}
.lista-wlasna .opcja[aria-selected="true"]{font-weight:640;color:var(--marka)}
.lista-wlasna .opcja i{font-size:11px;width:12px;opacity:0}
.lista-wlasna .opcja[aria-selected="true"] i{opacity:1}
/* W filtrach listy przetargow pola stoja obok siebie w jednej linii */
/* Szerokosc list filtrow. Minimum jest KONIECZNE: bez niego lista zapada
   sie do samej strzalki i uzytkownik nie widzi, co wybiera. */
.filtry .lista-wlasna,.kolumna-listy .gora .lista-wlasna{flex:0 1 auto;min-width:168px}

/* --- Wybór pliku: nasz, nie systemowy --- */
/* Natywnej kontrolki pliku nie da sie ostylowac, wiec ukrywamy ja i klikamy
   przez etykiete. Kontrolka ZOSTAJE w formularzu, wiec wysylka dziala bez skryptu. */
.wybor-pliku{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wybor-pliku input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wybor-pliku label{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--tekst-2);padding:10px 16px;border-radius:var(--r-s);
  border:1px dashed var(--obramowanie);background:#FBFDFC;transition:all .13s}
.wybor-pliku label:hover{border-color:var(--marka);color:var(--marka);background:var(--marka-50)}
.wybor-pliku input[type=file]:focus-visible+label{outline:2px solid var(--marka);outline-offset:2px}
.wybor-pliku .nazwa-pliku{font-size:12.5px;color:var(--tekst-3);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.wybor-pliku .nazwa-pliku.wybrany{color:var(--marka);font-weight:600}

/* Cennik klienta: siatka, zeby siedem pol nie robilo dlugiej kolumny. */
.siatka-stawek{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:14px;margin-bottom:18px}
.siatka-stawek .pole{margin:0}
.siatka-stawek .pole .cichy{display:block;font-size:11.5px;margin:2px 0 5px;font-weight:400}
.z-waluta{position:relative;display:block}
.z-waluta .waluta{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--tekst-3);font-size:13px;pointer-events:none}
.ustawienia .z-waluta input{padding-right:34px}
/* Pozycje nakladu pod kwota szacunku: kazda ma cytat w podpowiedzi. */
.pozycja-nakladu{display:flex;gap:6px;align-items:baseline;line-height:1.55}
.pozycja-nakladu .ile{font-weight:600;color:var(--tekst-2)}
.pozycja-nakladu.ostrzega{color:#8A6220;margin-top:3px}
.conajmniej{font-size:12px;font-weight:500;color:var(--tekst-3);margin-left:6px}

/* Pasek stanu analizy: uzytkownik ma widziec, ze system pracuje.
   Kolory NEUTRALNE, nie werdyktowe: zielony, bursztyn i czerwien sa
   zarezerwowane dla werdyktu i nie wolno ich tu rozmywac. */
.pasek-analizy{background:var(--tlo);border:1px solid var(--obramowanie);border-radius:12px;
  padding:15px 18px;margin-bottom:16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pasek-analizy .kroki{display:flex;align-items:center;gap:0;flex-shrink:0}
.pasek-analizy .krok{display:flex;align-items:center;gap:7px;position:relative;padding-right:19px}
.pasek-analizy .krok:not(:last-child):after{content:"";width:19px;height:2px;
  background:var(--obramowanie);position:absolute;right:0;top:9px}
.pasek-analizy .kropka{width:19px;height:19px;border-radius:50%;border:2px solid var(--obramowanie);
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#fff;flex-shrink:0}
.pasek-analizy .nazwa{font-size:12px;color:var(--tekst-3);white-space:nowrap}
.pasek-analizy .krok.zrobiony .kropka{background:var(--marka);border-color:var(--marka)}
.pasek-analizy .krok.zrobiony .nazwa{color:var(--tekst-2)}
.pasek-analizy .krok.trwa .kropka{border-color:var(--marka);
  animation:puls-analizy 1.6s ease-in-out infinite}
.pasek-analizy .krok.trwa .nazwa{color:var(--marka);font-weight:600}
@keyframes puls-analizy{0%,100%{box-shadow:0 0 0 0 rgba(103,72,253,.34)}
                        50%{box-shadow:0 0 0 6px rgba(103,72,253,0)}}
@media (prefers-reduced-motion:reduce){.pasek-analizy .krok.trwa .kropka{animation:none}}
.pasek-analizy .tresc-analizy{display:flex;flex-direction:column;gap:2px;min-width:200px;flex:1}
.pasek-analizy .tresc-analizy strong{font-size:13.5px}
.pasek-analizy .tresc-analizy .cichy{font-size:12px;line-height:1.5}
/* Stany, ktore nie sa "w toku", nie maja pulsowac: nic sie nie dzieje. */
.pasek-analizy.stan-skany,.pasek-analizy.stan-blad{background:#FBF7F0;border-color:#E8DCC8}
.pasek-analizy.stan-skany .krok.trwa .kropka,
.pasek-analizy.stan-blad .krok.trwa .kropka{animation:none;border-color:#C9A227}
@media(max-width:640px){.pasek-analizy{gap:12px}.pasek-analizy .kroki{width:100%}}

/* --- Analiza poglebiona ------------------------------------------------
   ⚠️ Sprzecznosci w OPZ dostaja NAJMOCNIEJSZY sygnal na tym ekranie, bo to
   jedyna rzecz, ktorej nie ma konkurencja i ktora potrafi zatrzymac decyzje
   o starcie. Kolor bursztynowy, nie czerwony: czerwien nalezy do werdyktu
   "nie spelnia" i mieszanie ich rozmylo by oba sygnaly. */
.sprzecznosci{border:1.5px solid #E0B94D;background:#FFFBF2;border-radius:12px;
  padding:16px 18px;margin-bottom:20px}
.naglowek-sprz{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;
  color:#8A6220;margin-bottom:13px;flex-wrap:wrap}
.znacznik-nowe{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--marka);color:#fff;padding:3px 8px;border-radius:20px}
.sprzecznosc{border-top:1px solid #F0E2C4;padding-top:13px;margin-top:13px}
.sprzecznosc:first-of-type{border-top:0;padding-top:0;margin-top:0}
.znak-regul{display:inline-flex;align-items:center;gap:4px;font-size:10px;
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--marka);
  color:#fff;padding:2px 7px;border-radius:20px;margin-left:7px;vertical-align:middle}
.opis-sprz{font-weight:600;font-size:13.5px;margin-bottom:9px}
.para{display:grid;grid-template-columns:1fr auto 1fr;gap:11px;align-items:center;margin-bottom:9px}
.para .strona{background:#fff;border:1px solid var(--obramowanie);border-radius:9px;
  padding:9px 11px;font-size:12.5px;line-height:1.5}
.para .kontra{color:#C0392B;font-size:15px}
.etykieta-sprz{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tekst-3);margin-bottom:3px}
.fakt-blok{display:flex;gap:7px;align-items:flex-start;background:#fff;
  border:1px solid #E0B94D;border-radius:8px;padding:8px 11px;margin-bottom:8px;
  font-size:12.5px;line-height:1.5;font-weight:600;color:#7A5518}
.dlaczego{font-size:12.5px;line-height:1.6;color:var(--tekst-2);
  border-left:3px solid #E0B94D;padding-left:11px;margin-bottom:8px}
.podtytul{font-size:14px;margin:20px 0 11px}
.rozbieznosc,.ryzyko{border:1px solid var(--obramowanie);border-radius:10px;padding:12px 14px;
  margin-bottom:10px;background:var(--tlo)}
.zagadnienie{font-weight:600;font-size:13px;margin-bottom:8px}
.dwie-strony{display:grid;grid-template-columns:1fr 1fr;gap:11px;font-size:12.5px;line-height:1.5}
.rodzaj-ryzyka{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tekst-3);margin-bottom:5px}
.ryzyko.waga-wysoka{border-left:4px solid #C0392B}
.ryzyko.waga-srednia{border-left:4px solid #E0B94D}
.ryzyko.waga-niska{border-left:4px solid var(--obramowanie)}
.opis-ryzyka{font-size:13px;line-height:1.55}
.sprzecznosc details,.rozbieznosc details,.ryzyko details{margin-top:7px}
.sprzecznosc summary,.rozbieznosc summary,.ryzyko summary{font-size:11.5px;color:var(--tekst-3);
  cursor:pointer}
.sprzecznosc blockquote,.rozbieznosc blockquote,.ryzyko blockquote{margin:7px 0 0;
  padding:9px 12px;background:#fff;border-left:3px solid var(--obramowanie);border-radius:0 7px 7px 0;
  font-size:12px;line-height:1.6;color:var(--tekst-2)}
.czeka-analiza{display:flex;gap:13px;align-items:center;padding:15px 17px;
  background:var(--tlo);border:1px solid var(--obramowanie);border-radius:11px}
.czeka-analiza i{color:var(--marka);font-size:18px}
.czeka-analiza .cichy{display:block;font-size:12.5px;margin-top:2px}
.ostrzezenie-analizy{background:#FFFBF2;border:1px solid #E0B94D;border-radius:9px;
  padding:10px 13px;font-size:12.5px;color:#8A6220;margin-bottom:12px}
@media(max-width:640px){.para,.dwie-strony{grid-template-columns:1fr}
  .para .kontra{transform:rotate(90deg)}}

/* Filtr progu dopasowania: wyglada jak reszta filtrow paska. */
.przelacznik-profilu-ekranu{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.przelacznik-profilu-ekranu select{padding:9px 12px;border:1px solid var(--obramowanie);border-radius:9px;background:var(--karta);min-width:220px}
.wybor-progu{padding:9px 12px;border:1px solid var(--obramowanie);border-radius:9px;
  background:#fff;font-size:13px;color:var(--tekst-2);font-family:inherit;cursor:pointer}
.wybor-progu:focus{outline:2px solid var(--marka);outline-offset:1px}

/* --- Kalendarz terminow ------------------------------------------------- */
.sterowanie-kalendarzem{display:flex;justify-content:space-between;align-items:center;
  gap:15px;flex-wrap:wrap;margin-bottom:15px}
.nawigacja-miesiaca{display:flex;align-items:center;gap:13px}
.nawigacja-miesiaca .miesiac{font-size:16px;font-weight:700;min-width:165px;text-align:center}
/* ⚠️ NAZWA MUSI BYC WLASNA. Pierwsza wersja nazywala to `.strzalka`,
   a taka klasa JUZ ISTNIALA i obsluguje separator w okruszkach nawigacji.
   Skutek: separator ">" miedzy "Pulpit" a "Przetargi" dostal ramke
   32 na 32 piksele i wygladal jak pusty kwadrat na kazdym ekranie.
   Kolizja nazw klas nie wywala niczego, tylko po cichu psuje inny ekran. */
.strzalka-miesiaca{width:32px;height:32px;border:1px solid var(--obramowanie);
  border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--tekst-2);text-decoration:none}
.strzalka-miesiaca:hover{border-color:var(--marka);color:var(--marka)}
.filtry-kalendarza{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.przelacznik{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tekst-2);
  cursor:pointer}
/* ⚠️ `minmax(0,1fr)`, NIE `1fr`. Domyslne `1fr` to `minmax(auto,1fr)`,
   wiec kolumna NIE ZEJDZIE ponizej szerokosci swojej tresci: jeden dlugi
   tytul przetargu rozpychal srode na pol ekranu, a poniedzialek i wtorek
   zwezaly sie do kilkunastu pikseli. Widoczne golym okiem na produkcji. */
.siatka-kalendarza{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--obramowanie);border:1px solid var(--obramowanie);border-radius:10px;overflow:hidden}
.naglowek-dnia{background:var(--tlo);padding:8px 6px;text-align:center;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tekst-3)}
.dzien{background:var(--karta);min-height:96px;padding:6px;min-width:0;overflow:hidden}
.dzien.pusty{background:var(--tlo)}
.dzien.przeszly{background:var(--tlo)}
.dzien.przeszly .numer-dnia{color:var(--tekst-3)}
.dzien.dzis{box-shadow:inset 0 0 0 2px var(--marka)}
.dzien.dzis .numer-dnia{color:var(--marka);font-weight:800}
.numer-dnia{font-size:12px;font-weight:600;color:var(--tekst-2);margin-bottom:5px}
.wpis-terminu{display:flex;gap:5px;align-items:center;font-size:11px;line-height:1.35;
  min-width:0;max-width:100%;
  padding:3px 5px;border-radius:5px;margin-bottom:3px;text-decoration:none;
  background:var(--tlo);border-left:3px solid var(--obramowanie);color:var(--tekst-2)}
.wpis-terminu:hover{background:#EEF6F6}
/* Kolor werdyktu firmy, bo to on decyduje, czy w ogole mozna wystartowac. */
.wpis-terminu.w-spelnia{border-left-color:var(--spelnia)}
.wpis-terminu.w-czesciowo{border-left-color:var(--czesciowo)}
.wpis-terminu.w-nie_spelnia{border-left-color:var(--nie)}
.procent-mini{font-weight:700;font-size:10.5px;flex-shrink:0;font-variant-numeric:tabular-nums}
.tytul-mini{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.wiecej-terminow{font-size:10.5px;color:var(--tekst-3);padding-left:5px}
.lista-najblizszych{display:flex;flex-direction:column;gap:8px}
.najblizszy{display:flex;align-items:center;gap:15px;padding:11px 14px;border:1px solid var(--obramowanie);
  border-radius:10px;text-decoration:none;color:inherit;background:var(--tlo)}
.najblizszy:hover{border-color:var(--marka)}
.odliczanie{display:flex;flex-direction:column;align-items:center;min-width:46px;flex-shrink:0}
.ile-dni{font-size:20px;font-weight:800;line-height:1}
.jednostka{font-size:10.5px;color:var(--tekst-3)}
.najblizszy.pilne .ile-dni{color:var(--nie)}
.tresc-najblizszego{flex:1;min-width:0}
.tytul-najblizszego{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-bottom:2px}
.procent-najblizszego{font-size:16px;font-weight:800;color:var(--marka);flex-shrink:0;
  font-variant-numeric:tabular-nums}
@media(max-width:760px){.siatka-kalendarza{font-size:11px}.dzien{min-height:70px;padding:4px}
  .tytul-mini{display:none}.wpis-terminu{justify-content:center}}

/* Eksport listy: akcja wtorna, wiec nie konkuruje wizualnie z wyszukiwarka. */
.eksport-listy{display:inline-flex;gap:8px;margin-left:auto;flex-shrink:0}
.przycisk-wtorny{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;
  border:1px solid var(--obramowanie);border-radius:9px;background:var(--karta);
  font-size:12.5px;color:var(--tekst-2);text-decoration:none;white-space:nowrap}
.przycisk-wtorny:hover{border-color:var(--marka);color:var(--marka)}

/* --- Alerty waznosci kwalifikacji (specyfikacja M4) ---------------------
   Bursztyn, nie czerwien: to ostrzezenie o terminie, a czerwien nalezy
   do werdyktu "nie spelnia" i mieszanie ich rozmylo by oba sygnaly. */
.alerty-waznosci{border:1.5px solid var(--czesciowo);background:#FEF9F0;
  border-radius:12px;padding:15px 18px;margin-bottom:18px}
.naglowek-alertow{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;
  color:var(--czesciowo);margin-bottom:12px}
.lista-alertow{display:flex;flex-direction:column;gap:7px}
.alert-waznosci{display:flex;align-items:center;gap:14px;background:var(--karta);
  border:1px solid var(--obramowanie);border-radius:9px;padding:9px 12px}
.alert-waznosci.pilny{border-color:var(--czesciowo)}
.alert-waznosci.wygasl{border-color:var(--nie);background:var(--nie-tlo)}
.ile-zostalo{display:flex;flex-direction:column;align-items:center;min-width:52px;flex-shrink:0}
.dni-liczba{font-size:19px;font-weight:800;line-height:1;color:var(--czesciowo)}
.etykieta-wygasl{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--nie);
  letter-spacing:.04em}
.tresc-alertu{display:flex;flex-direction:column;gap:2px;min-width:0}
.tresc-alertu strong{font-size:13.5px}
.tresc-alertu .cichy{font-size:12px}
.stopka-alertow{font-size:12px;margin:12px 0 0;line-height:1.55}

/* --- Zapisane ujecia listy (specyfikacja M3) --------------------------- */
.zapisane-pasek{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  margin:0 0 13px;padding-bottom:11px;border-bottom:1px solid var(--obramowanie)}
.zapisane-ujecie{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--obramowanie);border-radius:20px;font-size:12.5px;
  color:var(--tekst-2);text-decoration:none;background:var(--karta);white-space:nowrap}
.zapisane-ujecie:hover{border-color:var(--marka);color:var(--marka)}
.zapisane-ujecie.aktywne{background:var(--marka-100);border-color:var(--marka);
  color:var(--marka);font-weight:600}
.zapisz-nowe summary{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px dashed var(--obramowanie);border-radius:20px;font-size:12.5px;
  color:var(--tekst-3);cursor:pointer;list-style:none}
.zapisz-nowe summary::-webkit-details-marker{display:none}
.zapisz-nowe summary:hover{border-color:var(--marka);color:var(--marka)}
.zapisz-nowe[open] summary{border-style:solid;border-color:var(--marka);color:var(--marka)}
.formularz-zapisu{display:flex;gap:7px;margin-top:9px;align-items:center}
.formularz-zapisu input[type=text]{padding:7px 11px;border:1px solid var(--obramowanie);
  border-radius:8px;font-size:13px;min-width:235px;font-family:inherit}
.formularz-zapisu input[type=text]:focus{outline:2px solid var(--marka);outline-offset:1px}
@media(max-width:640px){.formularz-zapisu{flex-wrap:wrap}
  .formularz-zapisu input[type=text]{min-width:0;flex:1}}

/* --- Lejek postepowan (specyfikacja M7) ---------------------------------
   Poziome przewijanie zamiast zwijania kolumn: lejek ma pokazywac CALA
   droge postepowania naraz, bo o to w nim chodzi. */
/* ⚠️ Kolumny KURCZA SIE do dostepnego miejsca (`minmax(0,1fr)`), zamiast
   wymuszac 250 px i suwak poziomy. Przy pieciu etapach suwak sprawial, ze
   ostatni etap byl poza ekranem, a tablica wygladala na niedokonczona.
   Suwak zostaje jako zabezpieczenie dopiero przy waskim oknie. */
.lejek{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:14px;padding-bottom:2px;align-items:start}
@media(max-width:1100px){
  .lejek{grid-auto-columns:minmax(230px,1fr);overflow-x:auto;padding-bottom:6px}
}
.kolumna-lejka{min-width:0;background:var(--tlo);border:1px solid var(--obramowanie);
  border-radius:14px;padding:18px;min-height:210px;
  transition:border-color .16s,background .16s}
.kolumna-lejka:hover{border-color:var(--marka-100)}
/* Naglowek kolumny z rysunkiem etapu. Rysunek jest CZESCIA etapu:
   pusta kolumna z samym napisem "brak" wygladala jak niedzialajacy ekran. */
.naglowek-kolumny{display:flex;gap:11px;align-items:center;margin-bottom:15px;
  padding-bottom:13px;border-bottom:1px solid var(--obramowanie-2)}
/* ⚠️ 52 px to bylo za malo: ilustracja czytala sie jako ciemna plama,
   nie jako rysunek. Przy 64 px widac, co przedstawia, a to jedyny powod,
   dla ktorego tam jest. */
.rysunek-etapu{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.tytul-kolumny{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.licznik-kolumny{background:var(--marka-100);color:var(--marka);border-radius:20px;
  padding:1px 8px;font-size:11.5px;font-weight:700}
.opis-kolumny{font-size:11.5px;margin-top:2px}
.karty-lejka{display:flex;flex-direction:column;gap:8px}
/* ⚠️ `backwards`, NIE `both`. Animacja przesuniecia zostawiona na stale
   (`both` trzyma koncowa klatke) robi z KAZDEJ karty osobny kontekst nakladania,
   wiec lista „kto prowadzi” rozwinieta w jednej karcie chowala sie pod nastepna
   karta i nie dalo sie wybrac osoby (zgloszenie Adama, 27.09.2026). Koncowa
   klatka i tak jest stanem spoczynku, wiec nic nie trzeba trzymac. Podniesienie
   karty z otwarta lista chroni tez przez te 0,22 s, gdy animacja jeszcze biegnie. */
.karta-lejka{background:var(--karta);border:1px solid var(--obramowanie);
  border-radius:10px;padding:10px 11px;min-width:0;overflow-wrap:anywhere;
  animation:karta-wjazd .22s ease backwards}
.karta-lejka:has(.lista-wlasna[data-otwarta]){position:relative;z-index:30}
.karta-lejka.pilna{border-color:var(--czesciowo)}
.tytul-karty{display:block;font-size:12.5px;line-height:1.45;font-weight:600;
  color:var(--tekst);text-decoration:none;margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tytul-karty:hover{color:var(--marka)}
.meta-karty{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:6px;
  font-size:11px}
.procent-karty{font-weight:800;color:var(--marka);font-variant-numeric:tabular-nums}
/* ⚠️ OGRANICZONE DO KARTY LEJKA. Pierwsza wersja redefiniowala globalna
   `.plakietka`, ktorej uzywa DWANASCIE szablonow, wiec zmniejszala czcionke
   i wersalikowala plakietki na calej aplikacji. Kolizja nazw klas niczego
   nie wywala, tylko po cichu psuje ekrany, ktorych sie nie dotykalo. */
.karta-lejka .plakietka{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;padding:2px 6px;border-radius:4px}
.karta-lejka .plakietka.w-spelnia{background:var(--spelnia-tlo);color:var(--spelnia)}
.karta-lejka .plakietka.w-czesciowo{background:var(--czesciowo-tlo);color:var(--czesciowo)}
.karta-lejka .plakietka.w-nie_spelnia{background:var(--nie-tlo);color:var(--nie)}
.termin-karty{font-size:11px;color:var(--tekst-3);display:flex;gap:5px;align-items:center;
  margin-bottom:6px}
.termin-karty.pilne{color:var(--czesciowo);font-weight:600}
.termin-karty.po-terminie{color:var(--tekst-3);text-decoration:line-through;text-decoration-color:var(--obramowanie)}
.przypisanie{font-size:11px;color:var(--tekst-3);margin-bottom:7px}
/* ⚠️ STRZALKI ZAMIAST LISTY ROZWIJANEJ. Lista w kafelku o szerokosci
   dwustu pikseli lamala etykiety ("Anal iza") i wysypywala sie poza karte,
   a przy tablicy kanban naturalnym gestem jest przesuniecie o jeden krok. */
.ruch-karty{display:flex;align-items:center;gap:6px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--obramowanie-2)}
.strzalka-etapu{display:flex}
.strzalka-etapu button{width:30px;height:28px;border:1px solid var(--obramowanie);
  border-radius:7px;background:var(--karta);color:var(--tekst-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;
  transition:background .14s,border-color .14s,transform .14s}
.strzalka-etapu button:hover:not(:disabled){border-color:var(--marka);
  color:var(--marka);background:var(--marka-100);transform:translateY(-1px)}
.strzalka-etapu button:active:not(:disabled){transform:translateY(0) scale(.94)}
.strzalka-etapu button:disabled{opacity:.32;cursor:default}
.notatka-skrot{flex:1;display:inline-flex;align-items:center;justify-content:center;
  gap:5px;height:28px;border:1px dashed var(--obramowanie);border-radius:7px;
  color:var(--tekst-3);text-decoration:none;font-size:11px;transition:all .14s}
.notatka-skrot:hover{border-style:solid;border-color:var(--marka);color:var(--marka)}
.ile-notatek{background:var(--marka);color:#fff;border-radius:20px;
  padding:0 5px;font-size:9.5px;font-weight:700;line-height:15px}
/* Karta wjezdza delikatnie: przy przesuwaniu miedzy kolumnami widac,
   ze cos sie stalo, bez przeladowania calego ekranu w oczach. */
@keyframes karta-wjazd{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.karta-lejka{animation:none}
  .strzalka-etapu button:hover:not(:disabled){transform:none}}
.pusta-kolumna{font-size:12px;color:var(--tekst-3);text-align:center;
  padding:34px 12px;border:1px dashed var(--obramowanie);border-radius:11px;
  background:var(--karta)}
.lista-odrzuconych{display:flex;flex-direction:column;gap:7px}
.odrzucony{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;font-size:13px;
  padding:8px 11px;background:var(--tlo);border-radius:8px}
.odrzucony a{color:var(--tekst);text-decoration:none;font-weight:600}
.odrzucony a:hover{color:var(--marka)}
.odrzucony .cichy{font-size:12px}
@media(max-width:760px){.lejek{grid-auto-columns:minmax(205px,1fr)}}

/* --- Prowadzenie postepowania: lejek i notatki -------------------------- */
.wiersz-lejka{margin-bottom:18px}
.wybor-etapu{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.wybor-etapu label{font-size:13px;color:var(--tekst-2);font-weight:600}
.wybor-etapu select{padding:8px 12px;border:1px solid var(--obramowanie);border-radius:9px;
  font-size:13px;font-family:inherit;background:var(--karta);cursor:pointer}
.formularz-notatki{display:flex;gap:9px;align-items:flex-start;margin-bottom:13px}
.formularz-notatki textarea{flex:1;padding:9px 12px;border:1px solid var(--obramowanie);
  border-radius:9px;font-size:13px;font-family:inherit;line-height:1.5;resize:vertical}
.formularz-notatki textarea:focus{outline:2px solid var(--marka);outline-offset:1px}
.lista-notatek{display:flex;flex-direction:column;gap:8px}
.notatka{background:var(--tlo);border:1px solid var(--obramowanie);border-radius:9px;
  padding:10px 13px}
.tresc-notatki{font-size:13px;line-height:1.6;white-space:pre-wrap}
.meta-notatki{font-size:11.5px;margin-top:5px}
@media(max-width:640px){.formularz-notatki{flex-direction:column}
  .formularz-notatki textarea{width:100%}}

/* --- Pasek filtrow: uklad odporny na dokladanie kontrolek ---------------
   ⚠️ Po dolozeniu filtra progu i przyciskow eksportu pasek przestal sie
   miescic: pole szukania sciskalo sie do dwoch liter, a listy rozwijane
   zapadaly do zera szerokosci. Powod: `flex` bez `min-width` pozwala
   elementowi skurczyc sie ponizej wlasnej tresci.
   Naprawa: jawne minima i zawijanie do drugiego wiersza zamiast sciskania. */
.filtry{flex-wrap:wrap;row-gap:9px}
.filtry .szukajka{flex:1 1 235px;min-width:200px}
/* ⚠️ 135px to za malo: wojewodztwo pokazywalo "Cała...", a sortowanie "Do...".
   Lista rozwijana, ktorej etykiety nie widac, jest gorsza od jej braku,
   bo uzytkownik nie wie, co wybiera. */
.filtry .wybor-progu{min-width:180px}
@media(max-width:900px){
  .eksport-listy{margin-left:0;width:100%}
  /* Na waskim ekranie listy dziela wiersz po polowie, ale NADAL maja
     minimum: zapadniete do zera byly nieczytelne wlasnie tutaj. */
  .filtry select,.filtry .wybor-progu,.filtry .lista-wlasna{flex:1 1 46%;min-width:140px}
}

/* Wyjasnienie przy brakujacych polach. ⚠️ Klientka wytknela konkurencji
   puste pola bez wyjasnienia ("Lokalizacja: Brak danych", "Status: Nieznany"),
   wiec u nas kazdy brak MUSI mowic, dlaczego go nie ma i co dalej. */
.termin-z-dokumentacji{font-size:11.5px;line-height:1.5;color:var(--tekst-3);margin-top:7px}
.brak-terminu{font-style:italic;color:var(--tekst-3);font-weight:500}
.drobne{font-size:11.5px;line-height:1.5;margin-top:5px}
/* Kafelki faktow: wyrownanie do gory, zeby krotki napis nie zostawial
   pustego pola na pol ekranu (widoczne przy "do wyciagniecia z dokumentacji"). */
.fakt.karta{align-self:start}

/* --- Ilustracje ---------------------------------------------------------
   Puste stany maja ILUSTRACJE, nie ikone: `frontend.md` wymaga
   "ilustracja, jedno zdanie, jeden przycisk akcji". Ikona w pustym stanie
   wyglada jak brak zasobu, a nie jak zaprojektowany widok. */
.ilustracja-pusto{width:220px;max-width:80%;height:auto;object-fit:contain;margin:0 auto 8px;display:block}
.ilustracja-sekcji{float:right;width:120px;height:120px;object-fit:contain;
  margin:-8px 0 8px 18px;opacity:.92}
@media(max-width:640px){.ilustracja-sekcji{display:none}
  .ilustracja-pusto{width:130px;height:130px}}

/* Wejscie do lejka w panelu bocznym, obok gwiazdki obserwowania. */
.lejek-w-panelu{margin-top:9px}
/* ⚠️ W GLOWCE PANELU przycisk „W analizie" i lista „Analiza" stoja w jednym
   rzedzie i musza miec te sama wysokosc i te sama linie gorna. Klientka
   14.09.2026: „brak równości w pionie". Margines listy lejka jest potrzebny
   tylko wtedy, gdy stoi POD innym elementem, nie obok. */
.glowka-panelu{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap}
.glowka-panelu>form{margin-top:0;flex-shrink:0}
.glowka-panelu .lejek-w-panelu{margin-top:0}
.glowka-panelu .przycisk,.glowka-panelu .lejek-w-panelu select{min-height:40px;box-sizing:border-box;
  display:inline-flex;align-items:center}
.glowka-panelu .lejek-w-panelu select{width:auto;min-width:150px}
.lejek-w-panelu select{width:100%;padding:9px 12px;border:1px solid var(--obramowanie);
  border-radius:9px;font-size:13px;font-family:inherit;background:var(--karta);
  color:var(--tekst-2);cursor:pointer}
.lejek-w-panelu select:focus{outline:2px solid var(--marka);outline-offset:1px}

/* --- Przygotowanie oferty (priorytet 7 klientki) ------------------------ */
.dokumenty-oferty{display:flex;flex-direction:column;gap:9px}
/* Przyciski pod wyborem pliku: "pokaz co odczytam" i wzor do pobrania.
   Wzor stoi OBOK przycisku, a nie pod tabela: wczesniej odnosnik do niego
   byl zagniezdzony w komorce tabeli, w petli po osobach przypisanych do
   projektu, wiec renderowal sie w srodku plakietki i praktycznie nie dalo
   sie go znalezc. */
/* Lista wygasajacych kwalifikacji (wymaganie M4). Trzy kolumny w jednym
   wierszu, zeby dalo sie ja przebiec wzrokiem: kto, co, kiedy. */
.lista-wygasajacych{list-style:none;margin:9px 0 0;padding:0;display:flex;
  flex-direction:column;gap:5px}
.lista-wygasajacych li{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  font-size:12.5px;padding:5px 0;border-top:1px solid var(--obramowanie-2)}
.lista-wygasajacych .kto{font-weight:600;min-width:120px}
.lista-wygasajacych .co{flex:1;min-width:160px;color:var(--tekst-2)}
.lista-wygasajacych .kiedy{color:var(--tekst-2);white-space:nowrap}
.lista-wygasajacych .kiedy.pilne{color:var(--czesciowo);font-weight:600}
.lista-wygasajacych .kiedy.minelo{color:var(--nie);font-weight:600}
/* Dolaczanie dokumentu referencyjnego w komorce tabeli. Pole pliku ukryte,
   klika sie etykiete: natywny `input[type=file]` nie da sie ostylowac,
   a w waskiej komorce wyglada jak awaria ukladu. */
.wgraj-referencje{display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap}
.wgraj-referencje input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.wgraj-referencje label{cursor:pointer;color:var(--marka);white-space:nowrap}
.wgraj-referencje label:hover{text-decoration:underline}
/* Poprawianie referencji rozwijane w komorce, zeby tabela zostala tabela.
   Pola jedno pod drugim, bo w kolumnie nazwy nie ma miejsca na siatke. */
.edytuj-referencje{margin-top:6px}
.edytuj-referencje summary{cursor:pointer;color:var(--marka);list-style:none}
.edytuj-referencje summary::-webkit-details-marker{display:none}
.edytuj-referencje summary:hover{text-decoration:underline}
.edytuj-referencje form{display:flex;flex-direction:column;gap:6px;margin-top:8px;
  padding:10px;border:1px solid var(--obramowanie);border-radius:9px;background:var(--tlo)}
.edytuj-referencje form+form{margin-top:6px;border-color:var(--nie-tlo)}
.edytuj-referencje input{padding:6px 9px;border:1px solid var(--obramowanie);
  border-radius:7px;font-size:12.5px;font-family:inherit;min-width:0}
/* Opis przedmiotu referencji (klientka 24.08.2026: „po samym tytule i metodach
   badawczych, to on będzie błądził"): pole w formularzach i skrot w tabeli. */
.edytuj-referencje textarea{padding:6px 9px;border-radius:7px;font-size:12.5px;
  min-width:0;resize:vertical}
.siatka-pol .pole-szerokie{grid-column:1 / -1}
.opis-referencji{margin-top:3px;max-width:520px;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Uzasadnienie procentu. Ma byc czytelne jednym rzutem oka: co trafilo
   i skad, zeby dalo sie poprawic profil bez pytania nas. */
.powod-dopasowania{margin:16px 0;padding:14px 16px;border:1px solid var(--obramowanie);
  border-radius:11px;background:var(--tlo)}
.powod-dopasowania h4{margin:0 0 9px;font-size:13px;display:flex;align-items:center;gap:8px}
.powod-dopasowania .czym{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.powod-dopasowania .etyk{font-size:11.5px;color:var(--tekst-3);min-width:170px}
.powod-dopasowania p{margin:8px 0 0}
/* Rozwijany blok z pozostalymi filtrami ze specyfikacji M3. Schowany,
   bo belka z dziesiecioma polami przestaje byc belka, a na co dzien
   wystarczaja fraza i wojewodztwo. */
.wiecej-filtrow{flex:1 0 100%;margin-top:4px}
.wiecej-filtrow summary{cursor:pointer;font-size:12.5px;color:var(--marka);
  list-style:none;display:inline-flex;align-items:center;gap:7px;padding:4px 0}
.wiecej-filtrow summary::-webkit-details-marker{display:none}
.wiecej-filtrow summary:hover{text-decoration:underline}
/* ⚠️ SIATKA, NIE ZAWIJANY RZAD (uwagi klientki 28.09.2026: „siatka layoutu się mocno
   rozjechała"): kolumny tej samej szerokosci, etykieta nad polem, pola na cala szerokosc
   komorki; pole wyboru archiwum i przyciski w osobnych wierszach (sekcja 28.09 nizej). */
.pola-filtrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px 16px;align-items:end;
  margin-top:9px;padding:12px;border:1px solid var(--obramowanie);
  border-radius:10px;background:var(--tlo)}
.pola-filtrow label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;
  color:var(--tekst-3);min-width:132px;flex:1 1 132px}
.pola-filtrow input,.pola-filtrow select{padding:7px 10px;border:1px solid var(--obramowanie);
  border-radius:8px;font-size:13px;font-family:inherit;background:#fff;min-width:0}
/* Rozbicie wyniku na komponenty (wymaganie 5.2). Pasek zamiast samej liczby,
   bo `frontend.md` mowi: gesty tekst przegrywa z blokiem, blok z kolorem,
   kolor z liczba. Kolor paska jest MARKOWY, nie werdyktowy: zielen, bursztyn
   i czerwien sa zarezerwowane dla werdyktu i rozmylyby najwazniejszy sygnal. */
/* Wskaznik pewnosci ekstrakcji (wymaganie 2.8). `frontend.md`: pole o niskiej
   pewnosci ma byc oznaczone, a nie wygladac jak pewne. */
.pewnosc-niska{font-size:11px;white-space:nowrap}
.komponenty-wyniku{margin:16px 0;padding:14px 16px;border:1px solid var(--obramowanie);
  border-radius:11px}
.komponenty-wyniku h4{margin:0 0 11px;font-size:13px;display:flex;align-items:center;gap:8px}
.komponent{display:grid;grid-template-columns:190px 1fr 44px;gap:10px;
  align-items:center;margin-bottom:7px}
.komponent .etyk{font-size:12.5px}
.komponent .waga{color:var(--tekst-3);font-size:11px}
/* ⚠️ WLASNA NAZWA, NIE `.pasek`. Ta sama klasa znaczyla w tym arkuszu TRZY
   rozne rzeczy: pasek nawigacji, belke z obramowaniem i pasek postepu
   w tresci, wiec kazda zmiana jednego z nich dotykala pozostalych dwoch.
   ⚠️ SPROSTOWANIE: pierwsza wersja tego komentarza podawala, ze paski
   w tresci mialy przez to 546 px przy ekranie 375 px. To byl ARTEFAKT
   EMULATORA, nie fakt o stronie: emulator telefonu podawal
   `window.innerWidth` 545 przy `clientWidth` 375. Prawdziwa przyczyna
   rozpychania strony byla inna i jest opisana na koncu pliku. */
.komponent .pasek-oceny{height:8px;border-radius:99px;background:var(--obramowanie-2);overflow:hidden}
.komponent .pasek-oceny span{display:block;height:100%;background:var(--marka);border-radius:99px}
/* ⚠️ PASEK SKLADNIKA NIELICZONEGO MA BYC PUSTY, a nie pelny. Wypelnienie
   `span` nie ma ustawionej szerokosci, wiec jako element blokowy zajmuje
   100% rodzica: skladnik „nie liczony" rysowal sie jako PELNY pasek,
   czyli wygladal na sto procent, i to obok napisu „nie liczony".
   Zmierzone na ekranie 31.08.2026, po naprawie wielkiego prostokata:
   jedna usterka zaslaniala druga. */
.komponent .pasek-oceny.pusty{background:repeating-linear-gradient(90deg,
  var(--obramowanie-2) 0 6px, transparent 6px 12px)}
.komponent .pasek-oceny.pusty span{display:none}
.komponent .wart{font-size:13px;font-weight:600;text-align:right}
.komponent .opis{grid-column:1 / -1;margin-top:-4px}
.paski-importu{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.dokument-oferty{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}
/* Potwierdzenie przy dokumencie sprzecznym z wlasnym werdyktem. Pelna
   szerokosc, zeby nie dalo sie go przeoczyc obok przycisku. */
.zgoda-wbrew-werdyktowi{flex:1 0 100%;display:flex;gap:9px;align-items:flex-start;
  padding:10px 12px;border-radius:9px;background:var(--nie-tlo);
  font-size:12px;line-height:1.5;cursor:pointer}
.zgoda-wbrew-werdyktowi input{margin-top:2px;flex-shrink:0}
.cena-oferty{flex:0 0 190px;padding:9px 12px;border:1px solid var(--obramowanie);
  border-radius:9px;font-size:13px;font-family:inherit}
.cena-oferty:focus{outline:2px solid var(--marka);outline-offset:1px}
/* Wybor pelnomocnika konsorcjum (wzor pelnomocnictwa klientki: pelnomocnikiem
   bywa przedstawiciel innej firmy). Ten sam wyglad co pole ceny obok formularza. */
.pelnomocnik-oferty{flex:0 0 270px;max-width:100%;padding:9px 12px;border:1px solid var(--obramowanie);
  border-radius:9px;font-size:13px;font-family:inherit;background:var(--karta);color:var(--tekst)}
@media(max-width:640px){.pelnomocnik-oferty{flex:1 1 100%}}
.przycisk-dokument{flex:1;min-width:230px;display:flex;align-items:center;gap:12px;
  padding:12px 15px;border:1px solid var(--obramowanie);border-radius:10px;
  background:var(--karta);cursor:pointer;font-family:inherit;text-align:left;
  color:var(--tekst);transition:border-color .14s,transform .14s,box-shadow .14s}
.przycisk-dokument:hover{border-color:var(--marka);transform:translateY(-1px);
  box-shadow:0 3px 12px rgba(103,72,253,.1)}
.przycisk-dokument:active{transform:translateY(0)}
.przycisk-dokument>i:first-child{font-size:19px;color:var(--marka);flex-shrink:0}
.przycisk-dokument span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.przycisk-dokument strong{font-size:13.5px;font-weight:600}
.przycisk-dokument em{font-size:11.5px;font-style:normal;color:var(--tekst-3);line-height:1.45}
.przycisk-dokument .pobierz{color:var(--tekst-3);font-size:12px;flex-shrink:0}
.przycisk-dokument:hover .pobierz{color:var(--marka)}
.konsorcjum-oferty{margin-top:15px}
.konsorcjum-oferty summary{font-size:13px;font-weight:600;color:var(--marka);
  cursor:pointer;padding:7px 0}
.brak-danych-oferty{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;
  background:var(--tlo);border:1px dashed var(--obramowanie);border-radius:11px}
.brak-danych-oferty>i{color:var(--marka);font-size:17px;margin-top:2px}
.brak-danych-oferty>div{display:flex;flex-direction:column;gap:3px}
.brak-danych-oferty .cichy{font-size:12.5px;line-height:1.55}
@media(max-width:640px){.cena-oferty{flex:1 1 100%}}

/* Wzor tla pod naglowkiem ekranu. Bardzo lekki: ma dawac glebie,
   nie konkurowac z trescia. Wzorzec z inspiracji przyslanej przez Adama. */
/* Naglowek ekranu z delikatnym wzorem warstwic, wzorzec z inspiracji
   przyslanej przez Adama. Wzor siedzi po PRAWEJ i jest przygaszony:
   ma dawac glebie, a nie konkurowac z naglowkiem. */
.naglowek-strony{position:relative;overflow:hidden;background:var(--karta);
  border:1px solid var(--obramowanie-2);border-radius:16px;
  padding:26px 30px;margin-bottom:24px}
.naglowek-strony>*{position:relative;z-index:1}
.naglowek-strony h1{margin:0 0 4px}
.naglowek-strony p{margin:0;max-width:64ch}

/* Partnerzy konsorcjum w ustawieniach. */
.lista-partnerow{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.partner{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 14px;background:var(--tlo);border:1px solid var(--obramowanie);
  border-radius:10px}
.partner>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.partner .cichy{font-size:12px}
.przycisk-ikona{width:30px;height:30px;border:1px solid var(--obramowanie);
  border-radius:8px;background:var(--karta);color:var(--tekst-3);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.przycisk-ikona:hover{border-color:var(--nie);color:var(--nie)}

/* Ilustracja w kafelku pulpitu zamiast ikony. Ikona w kafelku o tej
   wysokosci gubila sie przy duzej liczbie i byla sama ozdoba; rysunek
   mowi, CZEGO dotyczy liczba, zanim przeczyta sie etykiete. */
.rysunek-kafelka{display:none;width:56px;height:56px;object-fit:contain;margin-bottom:14px;
  display:block}
.kafelek{transition:transform .16s,box-shadow .16s,border-color .16s}
.kafelek:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(103,72,253,.09)}
@media (prefers-reduced-motion:reduce){.kafelek:hover{transform:none}}

/* --- Naglowek sekcji z ilustracja ---------------------------------------
   Wzorzec z inspiracji Upstream: rysunek obok tytulu i jedno zdanie, co
   ta sekcja robi. Sam tytul zmuszal do czytania calej sekcji, zeby
   zrozumiec, po co ona jest. */
.sekcja.z-rysunkiem{display:flex;gap:15px;align-items:center;
  margin:0 0 22px;padding-bottom:0;border-bottom:0}
.sekcja.z-rysunkiem img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.sekcja.z-rysunkiem h2{margin:0 0 3px}
.sekcja.z-rysunkiem .cichy{margin:0;font-size:12.5px;line-height:1.55}
/* Wiecej powietrza miedzy sekcjami ekranu przetargu: przy szesciu blokach
   na jednej stronie gestosc byla glownym zarzutem. */
.kolumna-szczegolow>.karta,main>.karta{margin-bottom:20px}
/* ⚠️ Ostatnia karta w <main> ZACHOWUJE margines: pod <main> stoja kolejne
   karty ekranu przetargu (lejek, oferta, analiza poglebiona), wiec zerowanie
   sklejalo „Zobacz ogłoszenie w źródle" z „Analizą pogłębioną". Klientka
   14.09.2026: „zatracił się odstęp między blokami". */
.kolumna-szczegolow>.karta:last-child{margin-bottom:0}

/* --- Oddech ekranu przetargu --------------------------------------------
   ⚠️ Uwaga Adama, sluszna: karty byly rozciagniete na cala szerokosc okna
   i sklejone ze soba. Na ekranie 1900 px linia tekstu miala ponad 200 znakow,
   czyli dwa razy wiecej niz granica czytelnosci. Wzorzec Upstream trzyma
   tresc w kolumnie o ograniczonej szerokosci, z powietrzem po bokach. */
/* ⚠️ OGRANICZENIE NA `.plocho`, NIE NA `<main>`. Czesc sekcji ekranu
   przetargu (prowadzenie postepowania, przygotuj oferte, analiza poglebiona)
   lezy POZA znacznikiem `<main>`, wiec regula przypieta do niego ich nie
   obejmowala i karty nadal byly rozciagniete na cala szerokosc okna.
   `.plocho` opakowuje CALA tresc ekranu, wiec dziala wszedzie. */
.plocho>.karta,.plocho>main>.karta{margin-bottom:24px;padding:26px 30px}
.plocho>.karta:last-child{margin-bottom:0}
.plocho>main{max-width:none;margin:0;padding:0}
/* Ekrany z ukladem dwukolumnowym maja wlasna szerokosc: ograniczanie jej tutaj
   zwezaloby liste przetargow bez powodu.
   ⚠️ MARGINESY ZOSTAJA (szata 25.09.2026). Wczesniej bylo tu `padding:0`, bo okladka
   ze zdjeciem szla od krawedzi do krawedzi; po jej zdjeciu karta listy dotykala menu
   i prawej krawedzi okna, a klientka 14.09.2026 prosila wlasnie o margines po prawej. */
.plocho:has(>.dwie-kolumny),.plocho:has(>main>.dwie-kolumny){max-width:none}
/* Panel szczegolow w ukladzie dwukolumnowym ma wlasne marginesy, wiec
   ograniczenie szerokosci go NIE dotyczy: tam kolumna jest juz waska. */
.kolumna-szczegolow>.karta{margin-bottom:18px}
@media(max-width:900px){.plocho{padding:16px}
  .plocho>.karta,.plocho>main>.karta{padding:20px 18px;margin-bottom:18px}}

/* =====================================================================
   ⚠️ KLASY, KTORE ISTNIALY W SZABLONACH I NIE ISTNIALY TUTAJ
   Znalezione audytem 14.08.2026. Siodmy raz ta sama klasa bledu: reguly
   nie bylo, wiec element renderowal sie bez stylu, strona zwracala 200
   i wygladala "prawie dobrze". Bramka `sprawdz_style.py` sprawdzala
   zmienne i kolizje nazw, ale NIE sprawdzala, czy uzyta klasa w ogole
   ma definicje. Od tego audytu sprawdza takze to.
   ===================================================================== */

/* Ozdobne pierscienie w tle ekranu logowania i ekranu bledu. Do tej pory
   `<span class="pierscien-tlo p1">` byl pustym elementem bez wymiarow,
   czyli calej warstwy ozdobnej po prostu nie bylo widac. */
.pierscien-tlo{border:1px solid rgba(148,127,255,.20);border-radius:50%}
.p1{width:340px;height:340px;top:12%;left:-90px}
.p2{width:210px;height:210px;bottom:16%;right:12%;
  border-color:rgba(179,163,255,.22)}
.p3{width:520px;height:520px;top:-160px;right:-180px;
  border-color:rgba(103,72,253,.14)}
@media(max-width:820px){ .p1,.p3{display:none} }

/* Pierscien w tle banera pulpitu. Ten sam ksztalt co kolko dopasowania,
   celowo: to jest znak rozpoznawczy produktu. */
.baner .pierscien-tlo{position:absolute;right:-70px;top:-90px;
  width:330px;height:330px;pointer-events:none}

/* Wskaznik liczenia (`_wskaznik.html`). Bez tych regul SVG mial
   domyslne 300x150 px i czarne wypelnienie zamiast pierscienia. */
.wskaznik{display:inline-flex;width:20px;height:20px;vertical-align:-4px}
.wskaznik svg{width:100%;height:100%;animation:obrot 1.1s linear infinite}
.wskaznik .tor{fill:none;stroke:var(--obramowanie);stroke-width:4}
.wskaznik .luk{fill:none;stroke:var(--marka);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:26 100}
@keyframes obrot{to{transform:rotate(360deg)}}

/* Potwierdzenie zapisu obok przycisku w ustawieniach. Wczesniej bylo
   zwyklym tekstem w linii, wiec "zapisano" wygladalo jak czesc etykiety. */
.potwierdzenie{display:inline-flex;align-items:center;gap:5px;margin-left:11px;
  font-size:12.5px;font-weight:600;color:var(--spelnia)}

/* Kontenery pozycji analizy poglebionej. Same pozycje (`.ryzyko`,
   `.rozbieznosc`) byly ostylowane, kontenerow nie bylo, wiec sekcja
   nie miala odstepu od naglowka ani marginesu dolnego. */
.ryzyka,.rozbieznosci{margin:10px 0 18px}

/* =====================================================================
   EKRAN LOGOWANIA W DWOCH KOLUMNACH
   Lewa strona mowi, CO ten produkt robi, prawa wpuszcza do srodka.
   Znaki przy punktach to te same pliki, ktore niesie pulpit, wiec pierwszy
   ekran zapowiada dokladnie to, co uzytkownik zobaczy po zalogowaniu.
   ===================================================================== */
.logowanie-dwie{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,400px);
  align-items:center;gap:64px;width:100%;max-width:1060px}

.okno-produktu{min-width:0;position:relative;
  background:var(--granat) url('/statyczne/grafika/wz_granat.png') center/360px repeat;
  border-radius:20px;padding:44px 44px 40px;overflow:hidden;
  box-shadow:0 24px 60px rgba(27,24,42,.18)}
/* Wzor warstwic, ten sam co pod naglowkami ekranow w aplikacji. */
.okno-produktu>*{position:relative;z-index:1}

.okno-produktu .marka{margin-bottom:26px}
.okno-produktu h2{color:#fff;font-size:30px;font-weight:700;letter-spacing:-.025em;
  line-height:1.28;margin-bottom:11px;max-width:19ch}
.okno-produktu h2 b{color:#B3A3FF;font-weight:700}
.wprowadzenie{color:#E7E1FF;font-size:13.5px;line-height:1.6;max-width:44ch;
  margin-bottom:6px}

/* Ilustracja na jasnym krazku: plik ma biale tlo w srodku ksztaltu,
   wiec na ciemnym panelu potrzebuje wlasnej podkladki, inaczej wyglada
   jak wycinanka. */
/* ⚠️ Jasna KARTA, nie krazek. Wersja z gradientem kolowym obcinala rysunek
   w owal i wygladala jak wycinanka: gora bladla, a lisc u dolu wychodzil
   poza swiatlo. Karta to ten sam jezyk, ktorego uzywa cala aplikacja
   (ilustracje zawsze siedza na jasnym tle), wiec rysunek jest czytelny
   i nie wprowadza nowego ksztaltu na ekran. */
/* ⚠️ Bez `object-fit:cover`. Kadrowanie mialo sens przy PNG z pustym pasem
   u dolu; wektor jest skomponowany na caly obszar, wiec przycinanie tylko
   ucinaloby mu glowe. Wysokosc wynika z proporcji pliku. */
.rysunek-logowania{display:block;width:300px;max-width:100%;height:auto;margin:22px auto 0}

.punkty-produktu{list-style:none;display:flex;flex-direction:column;gap:15px;
  border-top:1px solid rgba(179,163,255,.22);padding-top:20px}
.punkty-produktu li{display:flex;align-items:flex-start;gap:13px}
.punkty-produktu .znaczek{flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(179,163,255,.16);border:1px solid rgba(179,163,255,.30)}
.punkty-produktu .znaczek i{color:#B3A3FF;font-size:15px}
.punkty-produktu b{display:block;color:#fff;font-size:13px;font-weight:640;
  margin-bottom:2px}
.punkty-produktu span{display:block;color:#C7D2FE;font-size:12.5px;line-height:1.5}

/* Znak nad formularzem jest potrzebny TYLKO wtedy, gdy lewa kolumna zniknie:
   w ukladzie dwukolumnowym bylby drugim logo na tym samym ekranie. */
/* ⚠️ Waga selektora, nie kolejnosc. Istniejaca regula `.logowanie .marka`
   ma wage (0,1,1), wiec `.marka-waska` (0,1,0) nie mogla jej nadpisac
   i logo wyswietlalo sie DWA RAZY na tym samym ekranie. */
.logowanie .marka-waska{display:none}

@media(max-width:960px){
  .logowanie-dwie{grid-template-columns:minmax(0,1fr);justify-items:center;gap:0}
  .okno-produktu{display:none}
  .logowanie .marka-waska{display:flex}
}

/* Sekcja Pomoc w ustawieniach: opis po lewej, akcja po prawej. */
.wiersz-pomocy{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:4px}
.wiersz-pomocy b{display:block;font-size:13.5px;margin-bottom:3px}
.wiersz-pomocy p{max-width:62ch;margin:0}

/* Ekran konczacy wycieczke. Do 14.08.2026 wycieczka po prostu ZNIKALA,
   wiec uzytkownik nie wiedzial, czy to koniec, czy cos sie zepsulo.
   Ilustracja `ob_gotowe.png` powstala pod ten ekran i lezala nieuzyta. */
.onboarding-koniec{position:relative;z-index:2001;max-width:430px;margin:auto;
  background:var(--karta);border-radius:20px;padding:34px 34px 30px;text-align:center;
  box-shadow:0 28px 70px rgba(27,24,42,.3)}
.onboarding-koniec img{display:block;margin:0 auto 12px;width:180px;height:auto}
.onboarding-koniec h2{font-size:20px;font-weight:680;letter-spacing:-.022em;
  margin-bottom:9px;line-height:1.3}
.onboarding-koniec p{color:var(--tekst-2);font-size:13.5px;line-height:1.6;
  margin-bottom:20px}

/* Ustawienia: kazda sekcja jest OSOBNA karta, wiec podzial robi sam uklad,
   a nie margines. Wczesniej wszystko siedzialo w jednej karcie i naglowek
   kolejnej sekcji przyklejal sie do przycisku zapisu poprzedniej. */

/* Ikona w menu prowadzaca na ekran biezacego kroku wycieczki.
   ⚠️ Musi wyjsc PONAD zaslone (`z-index:2000`), inaczej zostaje przyciemniona
   razem z reszta paska i uzytkownik jej nie zauwazy. Pasek ma
   `position:sticky`, wiec tworzy wlasny kontekst nakladania: podnosimy
   go razem z pozycja, tak samo jak przy podswietlanych elementach. */
.pasek:has(.ob-wskazany){z-index:2001}
.ob-wskazany{position:relative;z-index:2001;
  box-shadow:0 0 0 3px var(--marka),0 0 0 7px rgba(148,127,255,.28);
  animation:ob-puls 1.6s ease-in-out infinite}
@keyframes ob-puls{
  0%,100%{box-shadow:0 0 0 3px var(--marka),0 0 0 7px rgba(148,127,255,.28)}
  50%    {box-shadow:0 0 0 3px var(--marka),0 0 0 12px rgba(148,127,255,.10)}}

/* Wybor osoby prowadzacej na karcie lejka i kasowanie zapisanego widoku. */
.przypisanie-lejka{margin:8px 0 2px}
.przypisanie-lejka select{width:100%;font-size:11.5px;padding:5px 8px;
  border:1px solid var(--obramowanie);border-radius:8px;background:var(--tlo);
  color:var(--tekst-2)}
.usun-ujecie{display:inline-flex;margin:0 10px 0 -8px}
.usun-ujecie button{border:0;background:none;color:var(--tekst-3);cursor:pointer;
  font-size:11px;padding:2px 4px;border-radius:6px}
.usun-ujecie button:hover{color:var(--nie);background:var(--nie-tlo)}


/* Ekran, ktory potrzebuje calej szerokosci okna (tablica lejka). */
.plocho-szeroka{max-width:1680px}

/* ---------------- Zamowienia planowane ----------------
   Wstepne ogloszenie informacyjne to zapowiedz, nie przetarg: nie ma terminu
   ani wadium, wiec nie da sie go pokazac wierszem listy przetargow, ktory
   jest zbudowany wokol terminu i procentu dopasowania. */
.lista-planowanych{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.pozycja-planowana{padding:16px 18px}
.pozycja-planowana .glowka{display:flex;align-items:flex-start;gap:12px;
  justify-content:space-between}
.pozycja-planowana h2{font-size:15px;line-height:1.45;font-weight:640;margin:0}
.pozycja-planowana h2 a{color:var(--tekst)}
.pozycja-planowana h2 a:hover{color:var(--marka)}
.pozycja-planowana .zrodlo{flex:0 0 auto;background:var(--tlo);color:var(--tekst-2)}
.pozycja-planowana .kody{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* ---------------- Warunki w sekcjach ----------------
   Klientka poprosila o rozdzielenie: "tutaj robimy baton doswiadczenie
   zespolu badawczego, bo tu jest wszystko razem, a to jest cos innego,
   co oceniamy". Wczesniej firma, zespol i finanse lecialy jednym ciagiem. */
.naglowek-warunkow{display:flex;align-items:center;gap:8px;margin:20px 0 10px;
  font-size:13px;font-weight:660;color:var(--tekst-2);text-transform:uppercase;
  letter-spacing:.04em}
.naglowek-warunkow i{color:var(--marka)}
.naglowek-warunkow .ile{margin-left:auto;font-weight:600;color:var(--tekst-3);
  text-transform:none;letter-spacing:0}
/* Wyrazny odstep miedzy sekcjami warunkow (firma, zespol, pozostale wymogi).
   Klientka 24.08.2026 narysowala kreske miedzy warunkami firmy a naglowkiem zespolu:
   „Tu, gdzie kreska, większy widoczny odstęp". Bylo 20 px, jak miedzy bloczkami. */
.warunki + .naglowek-warunkow{margin-top:36px;padding-top:20px;
  border-top:1px solid var(--obramowanie)}

/* Wymaganie finansowe NIE JEST oceniane: stan konta zna tylko wykonawca.
   Stad neutralny, informacyjny wyglad, bez koloru werdyktu. */
.warunek.w-informacja{border-left-color:var(--obramowanie)}
.warunek.w-informacja > summary > i{color:var(--tekst-3)}
.wymagania-informacyjne .warunek{background:var(--tlo)}

.pozostale-warunki{margin-top:16px}
.pozostale-warunki > summary{cursor:pointer;font-size:13px;color:var(--tekst-2);
  padding:8px 0}
.pozostale-warunki > summary:hover{color:var(--marka)}
.luki > summary{cursor:pointer;font-weight:640;font-size:13px;padding:4px 0}
.luki > summary i{color:var(--marka);margin-right:6px}

/* ---------------- Pozycje do wyceny ----------------
   Zastapily kafelek "szacowany koszt realizacji". Klientka: "wyszczegolnij
   wszystkie pozycje budzetowe i eksportuj do Excela (…) ja potem sobie to
   tylko uzupelniam wlasnymi cenami, o moj wlasny know-how". Kwoty nie
   pokazujemy w ogole: mnozenie przez sztywny cennik dawalo liczby
   wziete z powietrza. */
.karta-pozycji .rozwin-pozycje{margin-top:10px}
.karta-pozycji .rozwin-pozycje > summary{cursor:pointer;font-size:13px;
  font-weight:620;color:var(--marka);padding:6px 0}
.karta-pozycji .rozwin-pozycje > summary:hover{text-decoration:underline}
.tabela-pozycji{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.tabela-pozycji th{text-align:left;font-weight:620;color:var(--tekst-2);
  border-bottom:1px solid var(--obramowanie);padding:6px 8px 6px 0;font-size:12px}
.tabela-pozycji td{padding:6px 8px 6px 0;border-bottom:1px solid var(--obramowanie);
  vertical-align:top}
.tabela-pozycji tr:hover td{background:var(--tlo)}
.tabela-pozycji td:nth-child(2){text-align:right;white-space:nowrap;font-weight:620}

/* ---------------- Przelacznik profili branzowych ----------------
   Wiele profili na organizacje: klientka prowadzi rozne galezie firmy
   i nie chce, zeby szkolenia z cyberbezpieczenstwa wchodzily jej
   do profilu badawczego. To jest tez jednostka rozliczeniowa
   u konkurencji, wiec ekran musi je pokazywac jako osobne byty. */
.przelacznik-profili{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
.zakladka-profilu{display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--obramowanie);border-radius:9px;
  background:var(--karta);color:var(--tekst-2);font-size:13px;font-weight:620}
.zakladka-profilu:hover{border-color:var(--marka);color:var(--marka)}
.zakladka-profilu.teraz{background:var(--marka);border-color:var(--marka);color:#fff}
.zakladka-profilu.teraz .ile{background:rgba(255,255,255,.22);color:#fff}
.zakladka-profilu .ile{background:var(--tlo);color:var(--tekst-3);
  padding:1px 7px;border-radius:20px;font-size:11px;font-weight:600}
.zakladka-profilu.dodaj{border-style:dashed;color:var(--tekst-3)}
.zakladka-profilu.dodaj:hover{color:var(--marka)}

.paski-profilu{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.usun-profil{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--obramowanie)}
.przycisk-usun{background:none;border:1px solid var(--obramowanie);
  border-radius:8px;padding:7px 13px;font:inherit;font-size:13px;
  color:var(--tekst-2);cursor:pointer}
.przycisk-usun:hover{border-color:var(--nie);color:var(--nie)}

/* Plakietka profilu przy wierszu listy: pokazuje sie dopiero od drugiego
   profilu, bo przy jednym niczego nie rozroznia. */
.profil-zrodlowy{background:var(--tlo);color:var(--tekst-2);font-weight:600}
.profil-zrodlowy i{margin-right:5px;opacity:.7}

/* ---------------- Szczegoly zamowienia ----------------
   Sekcja przeniesiona przed werdykt na prosbe klientki (24.08.2026):
   najpierw czytam, CZEGO dotyczy zamowienie, potem czy je spelniam. */
.szczegoly-zamowienia .pola-zamowienia{display:grid;
  grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.szczegoly-zamowienia dt{font-size:12px;font-weight:640;color:var(--tekst-2);
  text-transform:uppercase;letter-spacing:.03em;padding-top:3px}
.szczegoly-zamowienia dd{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.szczegoly-zamowienia .kody-cpv .plakietka{display:inline-flex;gap:7px;
  align-items:baseline}
.szczegoly-zamowienia .plakietka.trafiony{background:var(--marka);color:#fff}
.szczegoly-zamowienia .nazwa-cpv{font-weight:500;opacity:.85}
/* Zdanie o przedmiocie i tresc ogloszenia z zakreslaczem slow z profilu
   (spotkanie z klientka 18.09.2026). Tresc w przewijanym polu, zeby dluga
   SWZ nie zepchnela werdyktu pod ekran. */
.szczegoly-zamowienia .przedmiot-zamowienia{display:block;line-height:1.55}
.opis-zamowienia{flex:1 1 100%;min-width:0}
.opis-zamowienia > summary{cursor:pointer;font-size:13px;color:var(--marka);padding:2px 0 6px}
.opis-zamowienia > summary:hover{text-decoration:underline}
.opis-zamowienia .tekst-opisu{white-space:pre-line;max-height:320px;overflow:auto;
  font-size:13px;line-height:1.6;color:var(--tekst-2);padding:12px 14px;
  background:var(--tlo);border:1px solid var(--obramowanie);border-radius:10px;
  overflow-wrap:anywhere}

/* Naglowek ekranu zamowien planowanych: tekst wyjustowany na calej belce,
   o co prosila klientka. */
.naglowek-strony p.cichy{text-align:justify;max-width:none}

/* ---------------- Kryteria oceny ofert ----------------
   Klientka: "zabraklo najwazniejszego, kryteriow oceny oferty (…) zawsze
   ma sie sumowac do 100 pkt lub procent". Belka pokazuje udzial kryterium
   w calosci, zeby od razu bylo widac, czy przetarg wygrywa cena, czy jakosc. */
.kryteria-oceny .kryterium{margin-bottom:14px}
.kryteria-oceny .czesc-kryteriow{font-size:13px;font-weight:700;margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--obramowanie);display:flex;justify-content:space-between;align-items:baseline}
.kryteria-oceny .czesc-kryteriow:first-of-type{margin-top:4px}
.kryteria-oceny .czesc-kryteriow .cichy{font-weight:500;font-size:12px}
.kryteria-oceny .glowka{display:flex;justify-content:space-between;
  align-items:baseline;gap:12px;margin-bottom:5px}
.kryteria-oceny .nazwa{font-weight:620;font-size:14px}
.kryteria-oceny .punkty{font-weight:700;color:var(--marka);white-space:nowrap}
.kryteria-oceny .pasek-oceny{height:9px;background:var(--tlo);border-radius:6px;
  overflow:hidden}
.kryteria-oceny .pasek-oceny span{display:block;height:100%;background:var(--marka);
  border-radius:6px}
.kryteria-oceny .opis{margin-top:5px}
.kryteria-oceny .zrodlo-kryterium > summary{cursor:pointer;font-size:12px;
  color:var(--tekst-3);padding:4px 0}
.kryteria-oceny .zrodlo-kryterium blockquote{margin:4px 0 0;font-size:12px}

/* Adnotacja przy warunkach opisujacych prawdopodobnie ten sam wymog.
   Nie scalamy ich automatycznie: zmierzone, ze duplikatu nie da sie
   odroznic od dwoch roznych rol ani slowami, ani wektorami. */

/* Wzory zamawiajacego: ida PRZED naszymi dokumentami, bo to jego wzor
   obowiazuje. Nasze sa rozwiazaniem na wypadek, gdy zadnego nie dolaczyl. */
.wzory-zamawiajacego{background:var(--tlo);border:1px solid var(--obramowanie);
  border-radius:12px;padding:15px 17px;margin-bottom:18px}
.wzory-zamawiajacego h3{font-size:14.5px;margin:0 0 4px;display:flex;
  align-items:center;gap:8px}
.wzory-zamawiajacego h3 i{color:var(--marka)}
.wzory-zamawiajacego h3 .ile{background:var(--marka);color:#fff;font-size:11.5px;
  border-radius:999px;padding:1px 8px;font-weight:700}
.wzory-zamawiajacego p.cichy{margin:0 0 11px;font-size:12.5px}
.lista-wzorow{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.lista-wzorow a{display:flex;align-items:center;gap:9px;padding:7px 10px;
  background:var(--karta);border:1px solid var(--obramowanie);border-radius:8px;
  color:var(--tekst);text-decoration:none;font-size:13px}
.lista-wzorow a:hover{border-color:var(--marka);color:var(--marka)}
.lista-wzorow a i{color:var(--tekst-3);flex:none}
.lista-wzorow a span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-wzorow a em{font-style:normal;color:var(--tekst-3);font-size:11.5px;
  font-variant-numeric:tabular-nums;flex:none}
.wzory-zamawiajacego .u-zrodla{display:inline-flex;align-items:center;gap:7px;
  margin-top:11px;font-size:12.5px;color:var(--marka);text-decoration:none}
.wzory-zamawiajacego .u-zrodla:hover{text-decoration:underline}
.naglowek-naszych{font-size:14.5px;margin:0 0 3px}

/* Okres, w jakim ma byc zdobyte doswiadczenie, i liczba osob w zespole.
   Oba pola byly w bazie i nie docieraly na ekran. */
.plakietka.okres{background:var(--tlo);color:var(--tekst-2);font-weight:600}
.plakietka.okres i{margin-right:5px;opacity:.7}
.plakietka.zmiana-swz{background:var(--marka-50);color:var(--marka-600);font-weight:600}
.plakietka.zmiana-swz i{margin-right:5px}
.ilu-ludzi{margin:-2px 0 11px;padding:11px 14px;background:var(--tlo);
  border-radius:9px;font-size:13.5px}
.ilu-ludzi>p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.ilu-ludzi i{color:var(--marka);align-self:center}
.ilu-ludzi .czesc-zespolu{margin-top:10px;font-size:13px}
.ilu-ludzi .cichy{font-size:12px;display:block;margin-top:8px}
/* Wylistowanie rol: uzytkownik ma zobaczyc KOGO trzeba miec, bez rozwijania
   kazdego bloczka warunku z osobna. */
.role-zespolu{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:4px}
.role-zespolu li{display:flex;gap:9px;align-items:baseline;font-size:13px}
.role-zespolu .ile-osob{flex:none;min-width:26px;font-weight:700;color:var(--marka)}

/* Komunikat o wygasnietej sesji: informacja, nie blad. */
.blad.informacja{background:var(--tlo);border-color:var(--obramowanie);color:var(--tekst-2)}
.blad.informacja i{color:var(--marka)}

/* Ostrzezenie o zmianie ogloszenia przez zamawiajacego. Uzywa barwy UWAGI,
   nie werdyktu: to informacja o stanie danych, a nie ocena spelniania. */
.ogloszenie-zmienione{display:flex;gap:12px;align-items:flex-start;
  background:var(--czesciowo-tlo);border:1px solid var(--czesciowo);
  border-radius:12px;padding:13px 16px;margin:0 0 18px;font-size:13.5px}
.ogloszenie-zmienione>i{color:var(--czesciowo);font-size:16px;margin-top:2px;flex:none}
.ogloszenie-zmienione strong{display:block;margin-bottom:3px}
.ogloszenie-zmienione span{color:var(--tekst-2)}
.ogloszenie-zmienione a{display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  color:var(--marka);text-decoration:none;font-size:12.5px}
.ogloszenie-zmienione a:hover{text-decoration:underline}

/* Lista dokumentow, ktorych zada zamawiajacy. Idzie PRZED naszymi wzorami,
   bo to jego lista obowiazuje, a brak pozycji bywa podstawa do odrzucenia. */
.wymagane-dokumenty{background:var(--tlo);border:1px solid var(--obramowanie);
  border-radius:12px;padding:15px 17px;margin-bottom:18px}
.wymagane-dokumenty h3{font-size:14.5px;margin:0 0 4px;display:flex;
  align-items:center;gap:8px}
.wymagane-dokumenty h3 i{color:var(--marka)}
.wymagane-dokumenty h3 .ile{background:var(--marka);color:#fff;font-size:11.5px;
  border-radius:999px;padding:1px 8px;font-weight:700}
.wymagane-dokumenty p.cichy{margin:0 0 11px;font-size:12.5px}
.lista-wymaganych{margin:0;padding-left:22px;display:grid;gap:6px}
.lista-wymaganych li{font-size:13px}
.lista-wymaganych li.warunkowy{color:var(--tekst-2)}
.lista-wymaganych summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:7px;
  align-items:center;list-style:revert}
.lista-wymaganych .nazwa-dok{font-weight:500}
.lista-wymaganych .pobierz-wzor{margin-left:auto;font-size:12px;font-weight:600;color:var(--marka);white-space:nowrap;text-decoration:none;padding:2px 8px;border:1px solid var(--obramowanie);border-radius:999px;background:var(--karta)}
.lista-wymaganych .pobierz-wzor:hover{border-color:var(--marka)}
.wymagane-dokumenty .dokumenty-pozniej{margin-top:16px;padding-top:14px;border-top:1px dashed var(--obramowanie)}
.wymagane-dokumenty .dokumenty-pozniej h4{font-size:13.5px;margin:0 0 4px;display:flex;align-items:center;gap:8px;color:var(--tekst-2)}
.wymagane-dokumenty .dokumenty-pozniej h4 i{color:var(--tekst-3)}
.wymagane-dokumenty .dokumenty-pozniej h4 .ile{background:var(--obramowanie);color:var(--tekst);font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px}
.wymagane-dokumenty .dokumenty-pozniej p.cichy{margin:0 0 10px;font-size:12.5px}
.lista-wymaganych blockquote{margin:6px 0 0;padding:8px 11px;background:var(--karta);
  border-left:3px solid var(--obramowanie);border-radius:0 7px 7px 0;
  font-size:12.5px;color:var(--tekst-2)}

/* Wyjasnienie, dlaczego procenty maja pulap. Bez niego uczciwsza liczba
   wyglada jak pogorszenie dopasowania. */
.brak-podstawy{display:flex;gap:12px;align-items:flex-start;background:var(--tlo);
  border:1px solid var(--obramowanie);border-radius:12px;padding:14px 16px;font-size:13.5px}
.brak-podstawy>i{color:var(--marka);font-size:16px;margin-top:2px;flex:none}
.brak-podstawy strong{display:block;margin-bottom:3px}
.brak-podstawy span{color:var(--tekst-2)}
.brak-podstawy .co-zrobic{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}

/* Potwierdzenie ponownego odczytu wartosci i wadium zniknelo razem z przyciskiem (28.09.2026). */

/* Ile ogloszen trafia kazde slowo kluczowe profilu. Slowo z zerem jest
   wyrozniane, bo wyglada na dzialajace, a po cichu zabiera polowe profilu. */
.trafienia-slow{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 6px}
.trafienia-slow .plakietka b{margin-left:5px;color:var(--marka)}
.trafienia-slow .plakietka.martwe{background:var(--nie-tlo);color:var(--nie);
  border-color:var(--nie)}
.trafienia-slow .plakietka.martwe b{color:var(--nie)}
.uwaga-slow{color:var(--nie);display:flex;gap:7px;align-items:flex-start;margin-top:4px}

/* Główka ekranu przetargu: kółko obok tytułu.
   ⚠️ `min-width:260px` na kolumnie tytułu wpisany był w atrybut `style`,
   więc na telefonie nie dało się go poprawić arkuszem i tytuł WYCHODZIŁ POZA
   EKRAN, ucięty z prawej razem z nazwą zamawiającego. Zmierzone na 375 px.
   `min-width:0` jest tu konieczne: element flex domyślnie nie kurczy się
   poniżej szerokości swojej treści, a długi tytuł bez spacji to jedna „treść". */
.glowka-przetargu{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.tytul-przetargu{flex:1 1 260px;min-width:0}
.tytul-przetargu h1{font-size:19px;line-height:1.4;font-weight:650;
  overflow-wrap:anywhere}
@media(max-width:560px){
  .glowka-przetargu{gap:12px}
  .tytul-przetargu{flex-basis:100%}
  .tytul-przetargu h1{font-size:17px}
}

/* ====================== TELEFON: na koncu pliku ======================
   ⚠️ Zapytania medialne o tej samej wadze selektora co reguly bazowe
   MUSZA stac PO nich. Ten blok raz juz nie dzialal, bo lezal w polowie
   arkusza, a `.szczegoly-zamowienia .pola-zamowienia` jest zdefiniowana
   350 linii dalej i nadpisywala go bez slowa ostrzezenia.

   ⚠️ JAK TO MIERZYC. Headless Chrome NIE POTRAFI dac okna 375 px:
   `--window-size=375` oddaje `clientWidth` 500 albo 756, a emulator
   telefonu w panelu przegladarki podaje `innerWidth` 545. Oba pokazuja
   uklad, ktorego uzytkownik nigdy nie zobaczy, i oba raz juz wyslaly mnie
   za falszywym tropem. Prawdziwe 375 px daje dopiero RAMKA `<iframe>`
   o zadanej szerokosci, i tak zmierzone sa wszystkie liczby ponizej.

   Trzy siatki nie potrafily sie zwezyc, bo mialy kolumny o stalej
   szerokosci albo pasek bez zawijania: `.komponent` wymuszal 410 px
   (kolumna etykiety 190 px), `dl.pola-zamowienia` 443 px (kolumna `auto`
   rosla do etykiety „SZACUNKOWA WARTOSC ZAMOWIENIA"), a naglowek warunku
   449 px (cztery plakietki w rzedzie bez zawijania). */
.notatki-w-panelu{margin-top:14px}
.notatki-w-panelu .formularz-notatki{margin-top:8px}
/* ⚠️ Przycisk w kafelku faktow MUSI sie zawijac. `.przycisk` ma `white-space:nowrap`,
   a kafelek w panelu bocznym ma 184 px: "Pobierz kosztorys do Excela" (229 px)
   wychodzil poza karte i poza krawedz okna. Zmierzone w przegladarce Adama
   03.09.2026 (jedyny element wystajacy poza 1470 px na dwoch ekranach). */
.fakt .przycisk{white-space:normal;max-width:100%;box-sizing:border-box;text-align:center;line-height:1.35}
/* Rozwijana lista "Pracuj na tym..." stoi przy prawej krawedzi panelu, wiec jej
   opcje (min-width:max-content) otwieraly sie 31 px poza oknem. Wyrownanie do prawej. */
.lejek-w-panelu .lista-wlasna .opcje{left:auto;right:0}
/* Lista rozwijana przy prawej krawedzi otwiera sie w lewo (klasa nadawana
   skryptem po zmierzeniu, czy opcje wystaja poza okno). */
.lista-wlasna.opcje-w-lewo .opcje{left:auto;right:0}
/* ⚠️ Tabela doswiadczenia miala 1201 px w karcie o 1122 px NA DUZYM EKRANIE
   (zmierzone 03.09.2026 w przegladarce Adama, 1470 px): plakietki technik
   ("IDI i FGI N=46 z przedstawicielami urzedow") maja `white-space:nowrap`,
   wiec kolumna nie mogla sie zwezic, a kolumna "Kto pracowal" byla ucieta.
   W tabelach plakietki sie zawijaja, a nazwa zamowienia dostaje minimum,
   zeby nie byla najwezsza kolumna w wierszu. */
.przewijana table .plakietka{white-space:normal}
.przewijana table th:first-child,.przewijana table td:first-child{min-width:230px}
/* Zakreslacz na slowach kluczowych profilu (spotkanie z klientka 18.09.2026). */
mark.zakreslenie{background:var(--marka-100);color:inherit;padding:0 2px;border-radius:3px}
/* Oznaczenie rodzaju ogloszenia (szacunek, konsultacje rynkowe): prosba klientki z 22.09.2026. */
.plakietka.rodzaj-ogloszenia{background:var(--marka-50);color:var(--marka-600);font-weight:700;font-size:11px;vertical-align:1px;text-transform:uppercase;letter-spacing:.02em}

/* ====================== Odnosniki do zrodla (wymaganie 1.5) ======================
   W naglowku panelu i pelnej strony, nie na dole karty werdyktu, gdzie byly
   praktycznie niewidoczne. Kolor marki, bo to akcja; host obok, zeby bylo
   widac, dokad prowadzi odnosnik, zanim sie go kliknie. */
.odnosniki-zrodla{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:11px}
/* W panelu bocznym: wlasny wiersz pod naglowkiem, przed banerem archiwum i faktami. */
.odnosniki-zrodla.pod-glowka{margin:-4px 0 16px}
/* Etykieta NIE zawija sie w dwie linie; gdy brakuje miejsca, skraca sie nazwa hosta. */
.odnosnik-zrodla{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;max-width:100%;
  border:1px solid var(--marka-100);border-radius:99px;background:var(--marka-50);
  color:var(--marka-600);font-size:12.5px;font-weight:600;line-height:1.4;white-space:nowrap;
  transition:background .12s,border-color .12s}
.odnosnik-zrodla:hover{background:var(--marka-100);border-color:var(--marka)}
.odnosnik-zrodla:focus-visible{outline:2px solid var(--marka);outline-offset:2px}
.odnosnik-zrodla i{font-size:11.5px;flex:0 0 auto}
.tekst-zrodla{flex:0 0 auto}
.host-zrodla{flex:0 1 auto;min-width:0;font-weight:500;font-size:11.5px;color:var(--tekst-2);
  overflow:hidden;text-overflow:ellipsis}

/* ====================== Archiwum w wyszukiwarce (wymaganie 1.6) ======================
   ⚠️ Postepowanie po terminie NIGDY nie moze wygladac na aktywne (wymaganie
   twarde klientki). Plakietka jest ciemna i neutralna: nie marki, bo to nie
   akcja, i nie werdyktowa, bo zielen, bursztyn i czerwien sa zarezerwowane.
   Kolko wyszarzone, termin przekreslony z opisem zamiast liczby dni. */
.plakietka.archiwum{background:var(--tekst-2);color:var(--karta);font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.03em;vertical-align:1px}
.mini.archiwalny h4{color:var(--tekst-2)}
.mini.archiwalny .kolko,.glowka-panelu.archiwalna .kolko,.glowka-przetargu.archiwalna .kolko{
  filter:grayscale(1);opacity:.6}
.termin-minal{color:var(--tekst-3)}
.termin-minal s{text-decoration-color:var(--tekst-3)}
.fakt .wartosc.minal{color:var(--tekst-3);text-decoration:line-through;
  text-decoration-color:var(--obramowanie)}
.baner-archiwum{display:flex;gap:12px;align-items:flex-start;background:var(--tlo);
  border:1px solid var(--obramowanie);border-left:4px solid var(--tekst-2);border-radius:12px;
  padding:13px 16px;margin:0 0 18px;font-size:13.5px}
.baner-archiwum>i{color:var(--tekst-2);font-size:16px;margin-top:2px;flex:none}
.baner-archiwum strong{display:block;margin-bottom:3px}
.baner-archiwum span{color:var(--tekst-2)}
/* Pole wyboru w wyszukiwaniu szczegolowym: w wierszu, nie w kolumnie jak etykiety pol. */
.pola-filtrow label.pole-archiwum{flex:1 0 100%;flex-direction:row;align-items:center;gap:9px;
  font-size:12.5px;color:var(--tekst);cursor:pointer}
.pola-filtrow .pole-archiwum input{width:17px;height:17px;padding:0;margin:0;flex:0 0 auto;
  accent-color:var(--marka);cursor:pointer}

/* ====================== Uwagi z aplikacji (rejestr Z.10 i 2.14) ======================
   Przycisk w belce, okienko i ekran /uwagi. Kolor marki dla akcji; stany uwag
   neutralne i czytelne takze bez koloru (ikona i slowo). */
.zglos-uwage{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;flex:0 0 auto;
  border:1px solid var(--obramowanie);border-radius:9px;background:var(--karta);color:var(--tekst-2);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s}
.zglos-uwage:hover{background:var(--marka-50);color:var(--marka);border-color:var(--marka-100)}
.zglos-uwage:focus-visible{outline:2px solid var(--marka);outline-offset:2px}
.zglos-uwage i{font-size:13px}
.okno-uwagi{border:0;padding:0;margin:auto;border-radius:18px;background:var(--karta);color:var(--tekst);
  width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;box-shadow:var(--cien-2)}
/* ⚠️ Kolor wpisany wprost, nie z tokenu: `::backdrop` w starszych przegladarkach
   nie dziedziczy zmiennych z `:root`, a zmienna dalaby tam przezroczyste tlo. */
.okno-uwagi::backdrop{background:rgba(27,24,42,.55)}
.wnetrze-okna{padding:22px 24px 24px}
.glowka-okna{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.glowka-okna>div{flex:1;min-width:0}
.glowka-okna h2{font-size:17px;font-weight:660;letter-spacing:-.02em;margin-bottom:3px}
.glowka-okna h2 i{color:var(--marka);font-size:15px;margin-right:4px}
.glowka-okna p{font-size:13px;line-height:1.55}
.zamknij-okno{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 10px;
  border:1px solid var(--obramowanie);border-radius:9px;background:var(--karta);color:var(--tekst-2);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.zamknij-okno:hover{background:var(--marka-50);color:var(--marka);border-color:var(--marka-100)}
.formularz-uwagi .pole{margin-bottom:16px}
.formularz-uwagi textarea{resize:vertical;min-height:112px}
.usun-zrzut{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;border:0;background:none;
  color:var(--tekst-2);font:inherit;font-size:12.5px;cursor:pointer}
.usun-zrzut:hover{color:var(--marka)}
.podglad-zrzutu{display:block;max-width:100%;max-height:220px;margin-top:10px;
  border:1px solid var(--obramowanie);border-radius:10px;background:var(--tlo)}
.adres-uwagi{display:flex;gap:7px;align-items:baseline;margin:0 0 14px;overflow-wrap:anywhere}
.adres-uwagi i{color:var(--tekst-3)}
.komunikat-uwagi{margin:0 0 14px;padding:10px 13px;border-radius:10px;background:var(--tlo);
  border:1px solid var(--obramowanie);border-left:3px solid var(--uwaga);color:var(--tekst);
  font-size:13px;line-height:1.5}
.akcje-okna{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Uzytkownicy: dwie akcje w ostatniej kolumnie, z podpisami (ikona nigdy sama). */
.akcje-uzytkownika{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.akcje-uzytkownika form{margin:0}
.sukces-uwagi{text-align:center;padding:4px 0 2px}
.sukces-uwagi>i{display:block;font-size:34px;color:var(--marka);margin:6px auto 12px}
.sukces-uwagi h3{font-size:16px;font-weight:650;margin-bottom:4px}
.sukces-uwagi .akcje-okna{justify-content:center;margin-top:16px}
/* Ekran /uwagi. Odstep od gory przy przewijaniu do formularza: belka jest przyklejona. */
.nowa-uwaga{padding:20px 22px;scroll-margin-top:84px}
.nowa-uwaga .sekcja h2 i{color:var(--marka);font-size:14px;margin-right:4px}
.opis-nowej-uwagi{margin:-4px 0 14px}
.lista-zgloszen{display:flex;flex-direction:column;gap:14px}
.zgloszenie{padding:16px 18px}
.zgloszenie-zamkniete{background:var(--tlo)}
.zgloszenie-glowka{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-bottom:9px}
.stan-zgloszenia{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  border:1px solid transparent;font-size:11.5px;font-weight:650;white-space:nowrap}
.stan-zgloszenia.zgl-nowa{background:var(--marka-50);color:var(--marka-600);border-color:var(--marka-100)}
.stan-zgloszenia.zgl-w-pracy{background:var(--karta);color:var(--tekst);border-color:var(--tekst-3)}
.stan-zgloszenia.zgl-zrobione{background:var(--obramowanie-2);color:var(--tekst-2)}
.autor-zgloszenia i{font-size:11px;margin-right:4px;opacity:.7}
.zgloszenie-tresc{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.6}
.zgloszenie-kontekst{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start;margin-top:12px}
.zgloszenie-ekran{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.zgloszenie-ekran:hover{text-decoration:underline}
.zgloszenie-zrzut{display:inline-flex;flex-direction:column;gap:5px;max-width:100%;
  font-size:12px;color:var(--tekst-2)}
.zgloszenie-zrzut img{display:block;max-width:260px;max-height:170px;object-fit:cover;
  border:1px solid var(--obramowanie);border-radius:9px;background:var(--tlo)}
.zgloszenie-zrzut:hover img{border-color:var(--marka)}
.zgloszenie-akcje{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--obramowanie-2)}
.zmiana-stanu{display:flex;align-items:center;gap:9px}
.zmiana-stanu label{margin:0;font-size:12px}
.zmiana-stanu select{width:auto;min-width:130px}
.zmiana-stanu .lista-wlasna{min-width:140px}
.zmiana-stanu .lista-wlasna .przelacznik{padding:7px 12px;font-size:13px}
.usun-zgloszenie{margin-left:auto}


/* =====================================================================
   SZATA 25.09.2026: WIECEJ ODDECHU, BEZ OZDOBNIKOW
   Adam: „wszystko takie zbite i mało czytelne", „nie AI-owo wyglądająca
   apka", wzorzec przejrzystosci: WhatConverts (biale karty na jasnym tle,
   duze liczby, naglowki w formie pytan). Kolorystyka: viktor.com od klientki
   (granat „kojarzy się z powagą"). Zasady tej warstwy:
     1. tekst krojem systemowym (czytelny w kazdym rozmiarze), naglowki
        i liczby Montserratem (zaokraglony, prosba klientki z 4.08),
     2. zadnych zdjec, gradientow ani ozdobnych plam: to one robily
        wrazenie szablonu z generatora,
     3. menu boczne z PODPISAMI (nasza regula: ikona zawsze z etykieta),
     4. odstepy 24 do 32 px miedzy kartami i wewnatrz nich.
   ===================================================================== */
:root{--szer-paska:236px; --wys-belki:64px; --odstep:24px; --odstep-2:32px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
  Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.6;letter-spacing:0;
  color:var(--tekst);background:var(--tlo)}
h1,h2,h3,h4,.liczba,.znak-napis,.przycisk,.plakietka,.kolko b,.zakladki a{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1,h2,h3{color:var(--tekst);letter-spacing:-.015em;font-weight:700}
a{color:var(--marka)}
a:hover{color:var(--marka-600)}

/* --- Belka gorna: biala, wyzsza, spokojna --- */
.belka-gorna{height:var(--wys-belki);padding:0 28px;gap:22px;border-bottom:1px solid var(--obramowanie);
  box-shadow:none}
.belka-gorna .marka{gap:11px;font-size:17px}
.szukajka input{background:var(--tlo);border:1px solid var(--obramowanie);border-radius:10px;
  height:40px}
.szukajka input:focus{background:#fff;border-color:var(--marka)}
.szukajka input[type=text]{padding-left:38px;padding-right:58px}
.dzwonek:hover{background:var(--tlo);color:var(--tekst)}

/* --- Menu boczne z podpisami --- */
.pasek{background:var(--karta);border-right:1px solid var(--obramowanie);align-items:stretch;
  gap:2px;padding:20px 14px 18px}
.pasek a{width:auto;height:auto;display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-radius:9px;color:var(--tekst-2);font-size:14.5px;font-weight:550;line-height:1.35}
.pasek a i{width:18px;text-align:center;font-size:15px;color:var(--tekst-3);flex:0 0 18px}
.pasek a:hover{background:var(--tlo);color:var(--tekst)}
.pasek a:hover i{color:var(--tekst-2)}
.pasek a.teraz{background:var(--marka-50);color:var(--marka-600);box-shadow:none;font-weight:650}
.pasek a.teraz i{color:var(--marka)}
.pasek a::after{display:none}
.pasek .etykieta-paska{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pasek .licznik{position:static;margin-left:auto;border:0;min-width:24px;height:20px;padding:0 7px;
  border-radius:99px;background:var(--obramowanie-2);color:var(--tekst-2);font-size:11.5px;
  font-weight:650}
.pasek a.teraz .licznik{background:var(--marka-100);color:var(--marka-600)}
.pasek .rozdziel{width:auto;height:1px;background:var(--obramowanie-2);margin:12px 8px}

/* --- Kolumna tresci: szersza i z oddechem --- */

/* --- Naglowki ekranow: tytul i linia, jak we wzorcu --- */
.naglowek-strony{padding:0 0 20px;margin-bottom:28px;background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--obramowanie);overflow:visible}

.naglowek-strony h1{font-size:28px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.naglowek-strony p{margin-top:8px;font-size:15px;color:var(--tekst-2);text-align:left;hyphens:manual}
/* Okladka ze zdjeciem zamieniona na zwykly naglowek: zdjecie w tle bylo
   pierwsza rzecza, po ktorej widac szablon. */
.okladka{height:auto !important;background:none !important;padding:0;display:block}
.okladka::before{display:none}
.okruszki a:hover{color:var(--marka)}
.karta-na-okladce{margin:0 0 28px;padding:24px 28px;box-shadow:var(--cien);border-radius:var(--r)}
.karta-na-okladce h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.karta-na-okladce .fakty-w-linii{margin-top:18px;padding-top:18px}
.karta-na-okladce .fakty-w-linii>div{padding:0 26px}
.karta-na-okladce .fakty-w-linii .wartosc{font-size:22px;font-weight:700;
  font-family:'Montserrat',sans-serif;letter-spacing:-.02em}
.karta-na-okladce .fakty-w-linii .etykieta{font-size:12.5px;margin-top:3px;color:var(--tekst-2)}

/* --- Karty i sekcje --- */
.karta{border-radius:var(--r);border:1px solid var(--obramowanie);box-shadow:var(--cien)}
.karta:hover{box-shadow:var(--cien)}
.sekcja{margin:36px 0 16px}
.sekcja h2{font-size:20px;font-weight:700;letter-spacing:-.015em}
.kafelki{gap:20px;margin-bottom:var(--odstep-2)}
.kafelek{padding:24px 26px}
.kafelek .etykieta{font-size:13px;text-transform:none;letter-spacing:0;color:var(--tekst-2);
  font-weight:600}
.kafelek .liczba{font-size:36px;font-weight:700;letter-spacing:-.03em;margin-top:6px;color:var(--tekst)}
.kafelek .pod{font-size:13px;margin-top:6px}

/* --- Bez ozdobnikow z generatora: plamy, pierscienie, ilustracje w banerach --- */
.baner{background:var(--karta);border:1px solid var(--obramowanie);border-radius:var(--r);
  box-shadow:var(--cien);padding:28px 32px}
.baner::before,.baner::after,.pierscien-tlo,.ksztalty{display:none}
.baner .ilustracja{display:none}
.baner h1,.baner h2{font-size:26px;font-weight:700}
.baner .odznaka{background:var(--tlo);border:1px solid var(--obramowanie);color:var(--tekst-2);
  box-shadow:none}
/* Stan pusty: znak zamiast ilustracji, zdanie i przycisk zostaja. */
/* Stan pusty: ilustracja z zestawu 25.09.2026 (granat i indygo, Higgsfield). */
.pusto img{display:block;width:auto;max-width:min(240px,80%);max-height:190px;height:auto;margin:0 auto 18px;opacity:1}
.pusto h3{font-size:17px}

/* --- Przyciski: granat pelny, drugorzedne biale z obramowaniem --- */
.przycisk{background:var(--granat);border-radius:10px;padding:10px 18px;font-weight:600;
  font-size:14px;letter-spacing:0}
.przycisk:hover{background:var(--granat-600);box-shadow:none;color:#fff}
.przycisk.pusty{background:#fff;color:var(--tekst);border:1px solid var(--obramowanie)}
.przycisk.pusty:hover{background:var(--tlo);color:var(--tekst);border-color:#D3D9E6}
.przycisk.maly{padding:7px 13px;font-size:13px}

/* --- Pola formularzy --- */
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=search],textarea,select{padding:10px 13px;border-radius:10px;
  border-color:#D8DEE9}
label{font-size:13px;color:var(--tekst-2)}
.pole{margin-bottom:18px}

/* --- Zakladki --- */
.zakladki{gap:6px;margin-bottom:24px}
.zakladki a{padding:12px 14px;font-size:14px;font-weight:600}
.zakladki a.teraz{color:var(--marka-600);border-bottom-color:var(--marka)}

/* --- Lista i panel szczegolow --- */
.kolumna-listy .gora{padding:18px 20px;gap:12px}
.mini{padding:18px 20px;gap:14px}
.mini:hover{background:#F8F9FC}
.mini.wybrany{background:var(--marka-50);border-left-color:var(--marka)}
.mini h4{font-size:15px;font-weight:650;line-height:1.45;font-family:-apple-system,
  BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:0}
.mini .drobne{font-size:13px;margin-top:7px;gap:12px}
.kolumna-szczegolow{padding:28px 32px}
.plakietka{font-size:11.5px;padding:3px 9px;letter-spacing:0}

/* --- Tabele --- */
thead th{font-size:12px;letter-spacing:.04em;color:var(--tekst-2);padding:12px 14px}
tbody td{padding:14px}

/* --- Bloki informacyjne --- */
.uwaga-blok{border-radius:var(--r);padding:18px 20px;font-size:14px}

/* --- Pulpit w ukladzie pytan (szata 25.09.2026, wzorzec WhatConverts) --- */
.naglowek-z-akcjami{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap}
.akcje-naglowka{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stan-zrodel{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--tekst-2);background:var(--karta);border:1px solid var(--obramowanie);
  border-radius:99px;padding:7px 14px}
.stan-zrodel i{color:var(--marka)}
.stan-zrodel.uwaga{color:var(--uwaga);border-color:#F4C9B3}
.stan-zrodel.uwaga i{color:var(--uwaga)}
.pulpit-siatka{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;
  margin-bottom:24px}
.pulpit-siatka.trzy{grid-template-columns:repeat(3,minmax(0,1fr))}
.karta-pytanie{padding:28px 30px 0;display:flex;flex-direction:column}
.karta-pytanie h2{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.35;
  margin-bottom:14px}
.duza-liczba{font-family:'Montserrat',sans-serif;font-size:52px;font-weight:700;line-height:1.05;
  letter-spacing:-.035em;color:var(--tekst)}
.liczby-pod{display:flex;gap:22px;flex-wrap:wrap;margin:10px 0 6px;color:var(--tekst-2);font-size:14px}
.liczby-pod b{color:var(--tekst);font-size:15px}
.wykres{margin:18px 0 8px}
.wykres figcaption{font-size:13px;margin-bottom:10px}
.wykres svg{width:100%;height:190px;display:block;overflow:visible}
.wykres rect{fill:var(--marka-100)}
.wykres rect.dzis{fill:var(--marka)}
.wykres .os{stroke:var(--obramowanie);stroke-width:1}
.wykres .etykieta-dnia{font-size:12px;fill:var(--tekst-3);text-anchor:middle}
.wykres .wartosc-slupka{font-size:12px;font-weight:600;fill:var(--tekst-2);text-anchor:middle}
.stopka-karty{display:block;margin:auto -30px 0;padding:16px 30px;border-top:1px solid var(--obramowanie-2);
  text-align:center;font-weight:600;font-size:14px;color:var(--marka)}
.stopka-karty:hover{background:var(--tlo);color:var(--marka-600)}
.stopka-karty i{font-size:12px;margin-left:4px}
.lista-grup{list-style:none;margin:4px 0 20px}
.grupa-zrodel{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--obramowanie-2)}
/* Wiersz jest odnosnikiem wewnatrz <li> (28.09.2026), wiec ostatni to ostatni element listy. */
.lista-grup li:last-child .grupa-zrodel{border-bottom:0}
.znaczek-grupy{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center}
.znaczek-grupy img{width:44px;height:44px;object-fit:contain}
.ikona-pytania{width:36px;height:36px;object-fit:contain;vertical-align:middle;margin:-4px 12px 0 0}
.grupa-zrodel .nazwa{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.grupa-zrodel .nazwa b{font-size:14.5px;font-weight:650}
.grupa-zrodel .nazwa .cichy{font-size:12.5px}
.grupa-zrodel .ile{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:var(--tekst)}
.werdykty-pulpitu{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
.grupa-werdyktow h3{font-size:14px;font-weight:650;margin-bottom:8px;color:var(--tekst-2)}
.slupek{display:grid;grid-template-columns:112px minmax(0,1fr) 34px;align-items:center;gap:10px;
  font-size:13px;margin:6px 0}
.slupek .tor{height:8px;border-radius:99px;background:var(--obramowanie-2);overflow:hidden}
.slupek .tor span{display:block;height:100%;border-radius:99px;background:var(--tekst-3)}
.slupek.sl-spelnia .tor span{background:var(--spelnia)}
.slupek.sl-czesciowo .tor span{background:var(--czesciowo)}
.slupek.sl-nie .tor span{background:var(--nie)}
.slupek.sl-brak .tor span{background:#C3C9D8}
.slupek .ile{text-align:right;font-weight:650;color:var(--tekst)}
.terminy-pulpitu{list-style:none;margin:4px 0 20px;display:flex;flex-direction:column}
.terminy-pulpitu li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:2px;
  padding:12px 0;border-bottom:1px solid var(--obramowanie-2)}
.terminy-pulpitu li:last-child{border-bottom:0}
.terminy-pulpitu .tytul{grid-column:2;font-size:14px;font-weight:600;color:var(--tekst);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.terminy-pulpitu .tytul:hover{color:var(--marka)}
.terminy-pulpitu .kto{grid-column:2;font-size:12.5px;line-height:1.4;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.data-kafel{grid-row:1 / span 2;width:48px;height:52px;border-radius:10px;background:var(--tlo);
  border:1px solid var(--obramowanie);display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1.1}
.data-kafel b{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;color:var(--tekst)}
.data-kafel span{font-size:11.5px;color:var(--tekst-2);text-transform:uppercase;letter-spacing:.04em}
.data-kafel.pilny{border-color:#F4C9B3;background:#FFF6F1}
.data-kafel.pilny b{color:var(--uwaga)}
.do-uzupelnienia{list-style:none;margin:4px 0 20px}
.do-uzupelnienia li{display:flex;align-items:flex-start;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--obramowanie-2)}
.do-uzupelnienia li:last-child{border-bottom:0}
.do-uzupelnienia li>i{font-size:17px;margin-top:2px;color:var(--tekst-3)}
.do-uzupelnienia li.brak>i{color:var(--uwaga)}
.do-uzupelnienia li.zrobione>i{color:var(--marka)}
.do-uzupelnienia li>span{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.do-uzupelnienia li>span b{font-size:14.5px;font-weight:650}
.do-uzupelnienia li>span .cichy{font-size:13px}
.do-uzupelnienia li>a{font-size:13px;font-weight:600;white-space:nowrap}
/* --- Szata: bez rysunkow przy naglowkach sekcji i w blokach informacyjnych.
   Ilustracje w starej zieleni odstawaly od granatu i to one najbardziej
   przypominaly szablon z generatora; naglowek i jedno zdanie wystarcza. --- */
.sekcja.z-rysunkiem>img{display:block;width:44px;height:44px;flex:0 0 44px}
.uwaga-blok>img{display:block;width:44px;height:44px;flex:0 0 44px;margin:-2px 0}

/* --- Zamowienia zagraniczne --- */
.lista-zagranicznych{padding:4px 0}
.pozycja-zagraniczna{display:flex;gap:24px;align-items:flex-start;padding:20px 26px;
  border-bottom:1px solid var(--obramowanie-2)}
.pozycja-zagraniczna:last-child{border-bottom:0}
.pozycja-zagraniczna .tresc-pozycji{flex:1 1 auto;min-width:0}
.pozycja-zagraniczna h2{font-size:16px;font-weight:650;line-height:1.45;margin-bottom:6px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:0}
.pozycja-zagraniczna h2 a{color:var(--tekst)}
.pozycja-zagraniczna h2 a:hover{color:var(--marka)}
.pozycja-zagraniczna .meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.pozycja-zagraniczna .meta i{margin-right:4px;opacity:.7}
.pozycja-zagraniczna .termin-pozycji{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:2px;font-size:14px}
@media(max-width:1180px){
  .pulpit-siatka.trzy{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:900px){
  .pulpit-siatka,.pulpit-siatka.trzy{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:1180px){
  .plocho{padding:28px 24px 40px}
}
/* Srednie ekrany: menu wraca do samych ikon, zeby tresc miala miejsce. */
@media(max-width:1000px) and (min-width:701px){
  :root{--szer-paska:76px}
  .pasek{padding:16px 10px}
  .pasek a{justify-content:center;padding:11px 0}
  .pasek .etykieta-paska{display:none}
  .pasek .licznik{position:absolute;top:3px;right:6px;min-width:16px;height:16px;padding:0 4px;
    font-size:9.5px;background:var(--uwaga);color:#fff}
}

/* =====================================================================
   SZATA 25.09.2026, WIECZOR: stylistyka viktor.com (referencja klientki)
   i uklad WhatConverts (referencja Adama).
   Adam: „taki uklad, co ty jako Claude zawsze robisz” (menu boczne, siatka
   kart z ikonka i duza liczba), „mega zbite i sztuczne”, „smutno”.
   Stad: menu u gory zamiast paska bocznego, kremowe tlo, miekka czern,
   granat, fiolet i liliowy, jasna czerwien tylko w gradientach i poswiatach,
   przyciski w ksztalcie pastylki, duze naglowki z ilustracja.
   ⚠️ Zakres `.szata-v` (klasa na <body>): warstwa wygrywa z poprzednimi
   bez redefinicji tych samych klas, co pilnuje bramka `sprawdz_style.py`.
   Ta sama warstwa ma swoje odpowiedniki w bloku telefonu na koncu pliku.
   ===================================================================== */
.szata-v{font-family:'Montserrat',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:14.5px;line-height:1.6;background:var(--tlo);color:var(--tekst)}
.szata-v h1,.szata-v h2,.szata-v h3,.szata-v h4{color:var(--tekst)}
.szata-v a{color:var(--marka-600)}
.szata-v .powloka{min-height:100vh;display:block;height:auto}
/* ⚠️ `clip`, nie `hidden`: poswiata naglowka wystaje poza kolumne tresci i bez tego
   cala strona dawala sie przewijac w bok; `clip` nie tworzy przewijania i nie psuje
   przyklejonej belki. */
.szata-v .korpus{display:block;height:auto;overflow-x:clip}

/* --- Belka gorna: plywajaca biala belka (viktor.com), menu posrodku (WhatConverts) --- */
.szata-v .belka-gorna{position:sticky;top:12px;z-index:60;margin:12px 20px 0;height:66px;
  display:flex;align-items:center;gap:6px;padding:0 10px 0 20px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);border:1px solid var(--obramowanie);
  border-radius:20px;box-shadow:0 10px 30px rgba(27,24,42,.06)}
.szata-v .belka-gorna .marka{margin-right:14px;flex:0 0 auto;width:auto;padding:0;border:0}
.menu-gorne{display:flex;align-items:center;gap:2px;min-width:0}
.pozycja-menu{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border-radius:999px;font:600 14px/1 'Montserrat',ui-sans-serif,sans-serif;color:var(--tekst-2);
  text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s}
.szata-v .pozycja-menu{color:var(--tekst-2)}
.pozycja-menu>i:first-child{display:none}
.pozycja-menu:hover{background:var(--tlo);color:var(--tekst)}
.szata-v .pozycja-menu.teraz{background:var(--tekst);color:#fff}
.pozycja-menu .licznik{min-width:22px;height:20px;padding:0 7px;border-radius:999px;
  background:var(--marka-50);color:var(--marka-600);font-size:11.5px;font-weight:700;
  display:inline-grid;place-items:center;line-height:1}
.pozycja-menu.teraz .licznik{background:rgba(255,255,255,.2);color:#fff}
.strzalka-menu{font-size:10px;opacity:.65}
.podpis-krotki{display:none}
.menu-grupy{position:relative}
.menu-konta{position:relative;flex:0 0 auto}
.menu-grupy .panel-rozwijany{left:0;right:auto}
.panel-menu{width:auto;min-width:250px;padding:8px}
.pozycja-panelu{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:var(--tekst);font-weight:600;font-size:14px;text-decoration:none}
.szata-v .pozycja-panelu{color:var(--tekst)}
.pozycja-panelu i{width:18px;text-align:center;color:var(--marka)}
.pozycja-panelu:hover{background:var(--tlo)}
.pozycja-panelu.teraz{background:var(--marka-50);color:var(--granat)}
.pozycja-panelu.wyloguj{margin-top:6px;border-top:1px solid var(--obramowanie-2);border-radius:0 0 12px 12px}
.szata-v .panel-rozwijany{border:1px solid var(--obramowanie);border-radius:18px;box-shadow:var(--cien-2)}

.szata-v .belka-gorna .szukajka{flex:0 1 250px;width:250px;margin:0 6px 0 0;max-width:none}
.szata-v .belka-gorna .szukajka input[type=text]{height:40px;border-radius:999px;background:var(--tlo);
  border:1px solid transparent;padding:0 16px 0 38px;font-size:14px;box-shadow:none}
.szata-v .belka-gorna .szukajka input[type=text]:focus{background:#fff;border-color:var(--marka-500);
  box-shadow:0 0 0 4px var(--marka-50)}
.szata-v .belka-gorna .szukajka .lupa{left:15px;color:var(--tekst-3)}
.szata-v .zglos-uwage{height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--obramowanie);
  background:#fff;color:var(--tekst);font-weight:600;font-size:13.5px;display:inline-flex;
  align-items:center;gap:8px;text-decoration:none}
.szata-v .zglos-uwage:hover{border-color:var(--marka-500);color:var(--marka-600)}
.szata-v .dzwonek{width:40px;height:40px;border-radius:999px;background:transparent;border:0;
  color:var(--tekst-2);display:grid;place-items:center;cursor:pointer}
.szata-v .dzwonek:hover{background:var(--tlo);color:var(--tekst)}
.szata-v .uzytkownik{display:flex;align-items:center;gap:8px;height:48px;padding:4px 10px 4px 4px;
  border-radius:999px;border:0;background:none;cursor:pointer;color:var(--tekst);text-align:left;
  font:inherit}
.szata-v .uzytkownik:hover{background:var(--tlo)}
.nazwa-organizacji{display:block;font-weight:600;font-size:13px;line-height:1.25;max-width:210px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rola-konta{display:block;font-size:11.5px;color:var(--tekst-3)}
.glowa-konta{padding:10px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--obramowanie-2)}
.glowa-konta .nazwa-organizacji{max-width:none;white-space:normal;font-size:14px}
.panel-konta{right:0;left:auto}

/* --- Kolumna tresci --- */
.szata-v .plocho{max-width:1320px;margin:0 auto;padding:30px 32px 72px;overflow:visible}
.szata-v .plocho-szeroka{max-width:1680px}
.szata-v .plocho:has(>.dwie-kolumny),.szata-v .plocho:has(>main>.dwie-kolumny){max-width:1600px}

/* --- Naglowek ekranu: duzy tytul, poswiata z palety klientki, ilustracja po prawej --- */
.szata-v .naglowek-strony{position:relative;isolation:isolate;background:none;border:0;border-radius:0;
  box-shadow:none;padding:30px 300px 30px 2px;margin:0 0 22px;min-height:196px;display:flex;
  flex-direction:column;justify-content:center;overflow:visible}
.szata-v .naglowek-strony::before{content:"";position:absolute;z-index:-1;right:-70px;top:-60px;
  width:680px;height:340px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,138,138,.30),rgba(148,127,255,.26) 50%,rgba(250,245,241,0) 100%)}
.szata-v .naglowek-strony::after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:260px;height:196px;background:center/contain no-repeat;pointer-events:none}
.szata-v .naglowek-strony h1{font-size:36px;font-weight:700;letter-spacing:-.028em;line-height:1.15}
.szata-v .naglowek-strony p,.szata-v .naglowek-strony>div>p{font-size:15.5px;color:var(--tekst-2);
  margin-top:10px;max-width:620px;line-height:1.6}
.szata-v .naglowek-strony.naglowek-z-akcjami{flex-direction:row;align-items:center;gap:20px}
.szata-v.ekran-przetargi .naglowek-strony::after,.szata-v.ekran-przetarg .naglowek-strony::after{background-image:url('/statyczne/grafika/h_przetargi.png')}
.szata-v.ekran-obserwowane .naglowek-strony::after{background-image:url('/statyczne/grafika/h_obserwowane.png')}
.szata-v.ekran-planowane .naglowek-strony::after{background-image:url('/statyczne/grafika/h_planowane.png')}
.szata-v.ekran-wyniki .naglowek-strony::after{background-image:url('/statyczne/grafika/h_wyniki.png')}
.szata-v.ekran-zagraniczne .naglowek-strony::after{background-image:url('/statyczne/grafika/h_zagraniczne.png')}
.szata-v.ekran-kalendarz .naglowek-strony::after{background-image:url('/statyczne/grafika/h_kalendarz.png')}
.szata-v.ekran-pipeline .naglowek-strony::after{background-image:url('/statyczne/grafika/h_pipeline.png')}
.szata-v.ekran-profil .naglowek-strony::after{background-image:url('/statyczne/grafika/h_profil.png')}
.szata-v.ekran-doswiadczenie .naglowek-strony::after{background-image:url('/statyczne/grafika/h_doswiadczenie.png')}
.szata-v.ekran-kadra .naglowek-strony::after{background-image:url('/statyczne/grafika/h_kadra.png')}
.szata-v.ekran-uzytkownicy .naglowek-strony::after{background-image:url('/statyczne/grafika/h_uzytkownicy.png')}
.szata-v.ekran-zdarzenia .naglowek-strony::after{background-image:url('/statyczne/grafika/h_zdarzenia.png')}
.szata-v.ekran-uwagi .naglowek-strony::after{background-image:url('/statyczne/grafika/h_uwagi.png')}
.szata-v.ekran-ustawienia .naglowek-strony::after{background-image:url('/statyczne/grafika/h_ustawienia.png')}

/* Naglowek listy: pigulki filtrow i trzy liczby w jednej linii */
.chipy-naglowka{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.szata-v .naglowek-listy .fakty-w-linii{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;
  border:0;padding:0}
.szata-v .naglowek-listy .fakty-w-linii>div{padding:0 28px;border-right:1px solid var(--obramowanie)}
.szata-v .naglowek-listy .fakty-w-linii>div:first-child{padding-left:0}
.szata-v .naglowek-listy .fakty-w-linii>div:last-child{border-right:0}
.szata-v .naglowek-listy .wartosc{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.szata-v .naglowek-listy .etykieta{font-size:12.5px;color:var(--tekst-2);margin-top:4px}

/* --- Baner pulpitu: gradient z referencji klientki (granat, fiolet, jasna czerwien) --- */
.baner-pulpitu{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  align-items:center;gap:28px;margin:4px 0 28px;padding:38px 48px;border-radius:30px;color:#fff;
  background:#150079 url('/statyczne/grafika/wz_viktor.jpg') center/cover no-repeat;
  box-shadow:0 30px 70px rgba(21,0,121,.22)}
.baner-pulpitu .nad-tytulem{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 15px;
  border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  font-size:13px;font-weight:600;color:#fff}
.szata-v .baner-pulpitu h1{color:#fff;font-size:42px;line-height:1.12;font-weight:700;
  letter-spacing:-.03em;margin:20px 0 10px;max-width:640px}
.baner-pulpitu p{color:rgba(255,255,255,.84);font-size:16px}
.akcje-banera{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ilustracja-banera{width:100%;max-width:290px;height:auto;justify-self:end;
  filter:drop-shadow(0 22px 34px rgba(21,0,121,.35))}

/* --- Przyciski: pastylki; glowny w miekkiej czerni z fioletowym swiatlem (viktor.com) --- */
.szata-v .przycisk{border-radius:999px;min-height:42px;padding:10px 20px;background:var(--tekst);color:#fff;
  border:1px solid transparent;font-weight:600;font-size:14px;line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(103,72,253,.16);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}
.szata-v .przycisk:hover{background:radial-gradient(130% 170% at 50% 0%,#6748FD 0%,#22109A 58%,#1B182A 100%);color:#fff}
.szata-v .przycisk.pusty{background:#fff;color:var(--tekst);border-color:var(--obramowanie);box-shadow:none}
.szata-v .przycisk.pusty:hover{background:#fff;border-color:var(--marka-500);color:var(--marka-600)}
.szata-v .przycisk.maly{min-height:34px;padding:7px 14px;font-size:13px}
.szata-v .przycisk.jasny{background:#fff;color:var(--tekst);box-shadow:0 12px 28px rgba(21,0,121,.28)}
.szata-v .przycisk.jasny:hover{background:var(--marka-50);color:var(--granat)}
.szata-v .przycisk.szklany{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.32);
  box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.szata-v .przycisk.szklany:hover{background:rgba(255,255,255,.2);color:#fff}

/* --- Karty i sekcje: wieksze zaokraglenia, cieple linie, wiecej powietrza --- */
.szata-v .karta{border-radius:24px;border:1px solid var(--obramowanie);box-shadow:var(--cien);background:#fff}
.szata-v .plocho>.karta,.szata-v .plocho>main>.karta{padding:30px 34px}
.szata-v .sekcja{margin:40px 0 18px}
.szata-v .sekcja h2{font-size:22px;font-weight:700;letter-spacing:-.02em}

/* Pulpit: karty z pytaniem (WhatConverts) */
.szata-v .pulpit-siatka{gap:24px;margin-bottom:24px}
.szata-v .karta-pytanie{padding:30px 32px 0}
.szata-v .karta-pytanie h2{font-size:19px;font-weight:700;letter-spacing:-.015em;gap:12px}
.szata-v .ikona-pytania{width:44px;height:44px}
.szata-v .duza-liczba{font-size:54px;font-weight:700;letter-spacing:-.035em;color:var(--tekst)}
.szata-v .stopka-karty{border-top:1px solid var(--obramowanie-2);color:var(--marka-600);font-weight:600}
.szata-v .stopka-karty:hover{background:var(--marka-50)}
.szata-v .wykres rect{fill:var(--marka-100)}
.szata-v .wykres rect.dzis{fill:var(--marka)}
.szata-v .znaczek-grupy{background:none}
.szata-v .znaczek-grupy img{width:48px;height:48px}

/* --- Lista i panel --- */
.szata-v .dwie-kolumny{border-radius:26px;border:1px solid var(--obramowanie) !important;box-shadow:var(--cien)}
.szata-v .kolumna-szczegolow{background:#FCFAF8}
.szata-v .mini:hover{background:#FBF8F5}
.szata-v .mini.wybrany{background:var(--marka-50);border-left-color:var(--marka)}
.szata-v .zakladki a.teraz{color:var(--granat);border-color:var(--marka)}

/* --- Pola formularzy --- */
.szata-v input[type=text],.szata-v input[type=password],.szata-v input[type=email],.szata-v input[type=number],
.szata-v input[type=date],.szata-v input[type=search],.szata-v textarea,.szata-v select{border-radius:12px;
  border-color:var(--obramowanie)}
.szata-v input:focus,.szata-v textarea:focus,.szata-v select:focus{border-color:var(--marka-500);
  box-shadow:0 0 0 4px var(--marka-50);outline:0}
.szata-v .plakietka.rola{background:var(--marka-50);color:var(--granat)}

/* --- Ramki informacyjne: bursztyn i zielen zostaja dla werdyktow i ostrzezen,
       informacja i potwierdzenie ida w palecie marki --- */
.szata-v .uwaga-blok{border-radius:18px}
.szata-v .uwaga-blok.info{background:var(--marka-50);border:1px solid var(--marka-100);color:var(--granat)}
.szata-v .uwaga-blok.info>i{color:var(--marka)}
.szata-v .uwaga-blok.ok{background:#fff;border:1px solid var(--obramowanie);color:var(--tekst)}
.szata-v .uwaga-blok.ok>i{color:var(--spelnia)}

/* --- Etykiety zdaniem, nie wersalikami: male etykiety wielkimi literami nad duza
       liczba to jeden z najbardziej rozpoznawalnych znakow generowanego panelu --- */
.szata-v .fakt .etykieta,.szata-v .kafelek .etykieta,.szata-v thead th,.szata-v .szczegoly-zamowienia dt,
.szata-v .naglowek-warunkow{text-transform:none;
  letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--tekst-2)}

/* --- Stany puste: ilustracje z zestawu viktor.com --- */
.szata-v .pusto img{max-width:min(260px,80%);max-height:200px}

/* --- Logowanie i strona bledu: to samo swiatlo i ten sam gradient co pulpit --- */
.szata-v .ekran-logowania,.szata-v .ekran-bledu{background:var(--tlo);position:relative;overflow:hidden}
.szata-v .ekran-logowania::after,.szata-v .ekran-bledu::after{content:"";position:absolute;z-index:0;
  left:50%;top:-180px;width:1100px;height:560px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,138,138,.24),rgba(148,127,255,.22) 50%,rgba(250,245,241,0) 100%)}
.szata-v .logowanie-dwie,.szata-v .tresc-bledu{position:relative;z-index:1}
.szata-v .okno-produktu{background:#150079 url('/statyczne/grafika/wz_viktor.jpg') center/cover no-repeat;
  border-radius:30px;box-shadow:0 30px 70px rgba(21,0,121,.22)}
/* ⚠️ Haslo na fioletowym tle MUSI byc tu, a nie tylko w `.okno-produktu h2`.
   Regula szaty `.szata-v h1,.szata-v h2…{color:var(--tekst)}` ma wieksza wage
   niz `.okno-produktu h2` i stoi nizej, wiec naglowek dostawal miekka czern
   na ciemnym fiolecie: kontrast 1,08 (zgloszenie Adama, 27.09.2026). Osmy raz
   w tym projekcie waga selektora, nie logika. */
.szata-v .okno-produktu h2{color:#fff}
.szata-v .rysunek-logowania{width:320px;filter:drop-shadow(0 22px 34px rgba(21,0,121,.35))}
.szata-v .logowanie .karta{border-radius:26px}
.szata-v .tresc-bledu img{width:min(260px,60%)}

/* --- Srednie ekrany: belka gorna ma sie zmiescic bez zawijania --- */
@media(max-width:1520px){
  .szata-v .belka-gorna .szukajka{flex-basis:180px;width:180px}
}
@media(max-width:1380px){
  .szata-v .tylko-szerokie{display:none}
  .szata-v .zglos-uwage span{display:none}
  .szata-v .zglos-uwage{width:40px;padding:0;justify-content:center}
  .szata-v .belka-gorna .szukajka{flex-basis:160px;width:160px}
}
@media(max-width:1120px){
  .szata-v .zglos-uwage span{display:none}
  .szata-v .zglos-uwage{width:40px;padding:0;justify-content:center}
  .szata-v .belka-gorna .szukajka{display:none}
  .szata-v .naglowek-strony{padding-right:230px}
  .szata-v .naglowek-strony::after{width:210px;height:158px}
  .baner-pulpitu{grid-template-columns:minmax(0,1fr) minmax(0,300px);padding:38px 40px}
}
@media(max-width:900px) and (min-width:701px){
  .pozycja-menu{padding:0 10px;font-size:13.5px}
  .szata-v .belka-gorna .marka{margin-right:6px}
  .szata-v .naglowek-strony{padding-right:0;min-height:0}
  .szata-v .naglowek-strony::after{display:none}
}

/* ⚠️ BELKA GORNA NIE MOZE NACHODZIC NA SIEBIE (26.09.2026). Zmierzone w ramkach
   o szerokosci 720 do 1920 px (emulator klamie o szerokosci): menu potrzebuje
   861 px, wiec od 1280 px w dol wchodzilo na wyszukiwarke, a przy 1024 px „Więcej"
   na „Zgłoś uwagę", dzwonek i awatar. Kolejne progi zabieraja miejsce po kolei:
   podpis „Zgłoś uwagę", napis przy znaku marki, szerokie odstepy pozycji,
   Kalendarz i Lejek (przechodza do „Więcej"), na koniec liczniki. Sprawdzone
   z licznikiem „99+": przy kazdej szerokosci od 701 px zostaje zapas. */
.pozycja-panelu.tylko-waskie{display:none}
@media(max-width:1460px) and (min-width:701px){
  .szata-v .zglos-uwage span{display:none}
  .szata-v .zglos-uwage{width:40px;padding:0;justify-content:center}
}
@media(max-width:1320px) and (min-width:701px){
  .szata-v .belka-gorna .marka .znak-napis{display:none}
  .szata-v .belka-gorna .marka{margin-right:6px}
}
@media(max-width:1060px) and (min-width:701px){
  .pozycja-menu{padding:0 10px}
}
@media(max-width:960px) and (min-width:701px){
  .pozycja-menu.poza-waskim{display:none}
  .pozycja-panelu.tylko-waskie{display:flex}
  .szata-v .pozycja-menu.teraz-waskie{background:var(--tekst);color:#fff}
}
@media(max-width:780px) and (min-width:701px){
  .menu-gorne .pozycja-menu .licznik{display:none}
}

/* =====================================================================
   KODY CPV W PROFILU (wymaganie twarde nr 6 klientki, 26.09.2026):
   plakietki z nazwami ze slownika, pole szukania po opisie z lista
   podpowiedzi, pod spodem reczne pole kodow. Pastylki w palecie szaty
   (fiolet, liliowy, granat). Uklad zawija sie sam, wiec blok telefonu
   niczego tu nie potrzebuje: nazwa lamie sie wewnatrz plakietki, a lista
   ma szerokosc pola szukania. Skrypt: `statyczne/cpv.js`.
   ===================================================================== */
.cpv-kody{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px;padding:0}
.cpv-kod{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:36px;
  padding:7px 14px;border:1px solid var(--marka-100);border-radius:18px;background:var(--marka-50);
  font-size:13px;line-height:1.4;color:var(--tekst)}
.cpv-kod:has(.cpv-usun){padding-right:5px}
.cpv-tekst{min-width:0;overflow-wrap:anywhere}
.cpv-numer{font-weight:700;color:var(--granat);white-space:nowrap;margin-right:4px}
.cpv-kod.cpv-bez-nazwy{background:var(--karta);border-style:dashed;border-color:var(--obramowanie)}
.cpv-bez-nazwy .cpv-nazwa{color:var(--tekst-3);font-style:italic}
.cpv-sam-numer .cpv-nazwa{display:none}
/* Wpis bez osmiu cyfr nie zapisze sie w profilu. Ten sam jezyk co martwe
   slowo kluczowe dwa pola nizej (`.trafienia-slow .plakietka.martwe`). */
.cpv-kod.cpv-niepelny{background:var(--nie-tlo);border-color:var(--nie)}
.cpv-niepelny .cpv-numer,.cpv-niepelny .cpv-nazwa{color:var(--nie)}
/* Nazwa w drodze z serwera: szkielet, nie kolko. */
.cpv-wczytuje .cpv-nazwa{display:inline-block;vertical-align:middle;width:120px;height:9px;
  border-radius:6px;background:var(--marka-100)}
.cpv-usun{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--tekst-3);font-size:12.5px;cursor:pointer}
.cpv-usun:hover{background:var(--karta);color:var(--granat)}
.cpv-usun:focus-visible{outline:2px solid var(--marka);outline-offset:1px}
.cpv-szukaj{position:relative;margin:0 0 10px;scroll-margin-top:84px}
.cpv-szukaj>i{position:absolute;left:16px;top:22px;transform:translateY(-50%);
  color:var(--tekst-3);font-size:13px;pointer-events:none}
.szata-v .cpv-szukaj input[type=text]{height:44px;padding:0 16px 0 42px;border-radius:999px}
.cpv-lista{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;
  list-style:none;max-height:min(360px,60vh);overflow-y:auto;background:var(--karta);
  border:1px solid var(--obramowanie);border-radius:18px;box-shadow:var(--cien-2)}
.cpv-opcja{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:start;
  padding:10px 12px;border-radius:12px;cursor:pointer;font-size:13.5px;line-height:1.45}
.cpv-opcja:hover,.cpv-opcja.cpv-aktywna{background:var(--marka-50)}
.cpv-znak{margin-top:3px;font-size:12px;color:var(--marka);visibility:hidden}
.cpv-opcja[aria-selected=true] .cpv-znak{visibility:visible}
.cpv-stan{font-size:11.5px;font-weight:600;color:var(--marka-600);white-space:nowrap}
.cpv-brak{padding:12px 14px;color:var(--tekst-2);font-size:13px}
/* Komunikat dla czytnika ekranu (liczba podpowiedzi, dodany kod): niewidoczny, ale obecny. */
.cpv-komunikat{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* === SEKCJA 28.09: LISTA I WYSZUKIWARKA (sesja glowna) === */
/* Menu (uwagi klientki 28.09.2026): „Pulpit" tylko na telefonie (na komputerze prowadzi
   tam logo), „Zagraniczne" wyroznione liliowym tlem i ikona globu: „Zastanawiam się czy
   nie zrobić ich w innym kolorze albo tak, aby się wyróżniały". */
.pozycja-menu.tylko-telefon{display:none}
.szata-v .pozycja-menu.wyrozniona{color:var(--marka-600);background:var(--marka-50)}
.pozycja-menu.wyrozniona>i:first-child{display:inline-block;font-size:13px}
.szata-v .pozycja-menu.wyrozniona:hover{background:var(--marka-100);color:var(--granat)}
.szata-v .pozycja-menu.wyrozniona.teraz{background:var(--tekst);color:#fff}

/* Wyszukiwarka w belce: szersza, zeby podpowiedz „Szukaj w bazie N przetargów" miescila
   sie cala (klientka 28.09.2026). Progi jak dla belki (menu nie moze na nia wchodzic). */
.szata-v .belka-gorna .szukajka-belki{flex:0 1 330px;width:330px}
@media(max-width:1520px){.szata-v .belka-gorna .szukajka-belki{flex-basis:290px;width:290px}}
@media(max-width:1380px){.szata-v .belka-gorna .szukajka-belki{flex-basis:230px;width:230px}}
@media(max-width:1120px){.szata-v .belka-gorna .szukajka-belki{display:none}}
/* Podpowiedzi szersze niz pole i do prawej krawedzi (pole stoi przy prawym brzegu),
   tekst sie zawija: pieciokrotne „zak… w tytułach" bylo ucieciem tekstu, nie danymi. */
.szukajka-belki .podpowiedzi{left:auto;right:0;width:min(460px,calc(100vw - 32px))}
.szukajka-belki .tekst-podpowiedzi{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
.podpowiedzi li.grupa-podpowiedzi{cursor:default;padding:9px 15px 5px;font-size:11px;font-weight:600;
  color:var(--tekst-3);background:var(--karta);border-bottom:0;letter-spacing:.02em}
.podpowiedzi li.grupa-podpowiedzi:hover{background:var(--karta)}
.podpowiedzi li.zaawansowane{color:var(--marka-600);font-weight:600}
.podpowiedzi li.zaawansowane>i{color:var(--marka)}
.tekst-podpowiedzi b{font-weight:700;color:var(--tekst)}

/* „zapisz te filtry" rowno z polem wyszukiwania (klientka 28.09.2026: „Należałoby cofnąć
   2 akapity w prawo, aby zaczynało się równo z belką »szukaj w tyt. i opisach«"). */
.kolumna-listy .zapisane-pasek{padding:0 20px 11px}
/* Komunikat o poszerzonym wyszukiwaniu (profil, cala baza, archiwum). */
.poszerzono{display:flex;gap:10px;align-items:flex-start;margin:0 20px 12px;padding:11px 14px;
  border-radius:12px;background:var(--marka-50);color:var(--granat);font-size:13px;line-height:1.5}
.poszerzono>i{margin-top:3px;color:var(--marka)}
/* Fragment opisu z szukanym slowem, gdy tytul go nie zawiera. */
.fragment-szukania{font-size:12.5px;color:var(--tekst-2);line-height:1.5;margin:3px 0 5px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fragment-szukania>i{font-size:9.5px;color:var(--tekst-3);margin-right:5px;vertical-align:2px}
mark.zakreslenie.szukane{background:var(--marka-100);box-shadow:inset 0 -2px 0 var(--marka-500)}

/* Wyszukiwanie szczegolowe: pola na cala szerokosc komorki siatki (`.pola-filtrow`). */
.pola-filtrow label{min-width:0;flex:none}
.pola-filtrow label .lista-wlasna,.pola-filtrow label input[type=text],
.pola-filtrow label input[type=number]{width:100%;min-width:0}
.pola-filtrow label .lista-wlasna .przelacznik{width:100%}
.pola-filtrow label.pole-archiwum,.pola-filtrow .akcje-filtrow{grid-column:1/-1}
.akcje-filtrow{display:flex;gap:10px;flex-wrap:wrap}

/* Wybor liczby pozycji na stronie obok stronicowania („tak zwyczajowo jak na stronach"). */
.strony .rozmiar-strony{display:inline-flex;align-items:center;gap:2px;padding:0;border:0;margin-right:8px}
.strony .rozmiar-strony a,.strony .rozmiar-strony b{padding:4px 8px;border:0;border-radius:8px}
.strony .rozmiar-strony b{background:var(--marka-50);color:var(--granat)}

/* Kolko dopasowania zawsze przerywane (klientka 28.09.2026: „dlaczego 44% jest linia
   przerywana a 40% już linia ciągłą (...) Niech już będzie przerywane"). Podstawa oceny
   zostaje w podpowiedzi po najechaniu. */
.kolko:not(.kolko-puste){
  background:
    repeating-conic-gradient(transparent 0 7deg, var(--karta) 7deg 10deg),
    conic-gradient(var(--kolor) calc(var(--proc)*1%), #E9ECF4 0)}
/* Pulpit, „Jakie to zamówienia?": wiersz prowadzi do listy tego rodzaju. */
a.grupa-zrodel{color:inherit;text-decoration:none}
a.grupa-zrodel:hover .nazwa b{color:var(--marka-600)}
.podpis-karty{margin:-6px 0 4px;font-size:13px}
/* Wyniki postepowan: pole wyszukiwania obok profilu, przyciski wejscia w zamowienie. */
.szukaj-wynikow .szukajka{flex:1 1 320px;max-width:520px}
.odnosniki-wyniku{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
/* === KONIEC SEKCJI 28.09: LISTA I WYSZUKIWARKA === */

/* === SEKCJA 28.09: LEJEK (agent lejka) === */
/* Uwagi klientki 28.09.2026 o lejku: „jak będzie wyglądać widok lejka, gdy tych przetargów
   będzie z 50/100/200”, „podniesiemy nazwy etapów”, archiwum po miesiacu. */

/* Naglowek ekranu nizszy niz na pozostalych ekranach i mniejsza ilustracja: tablica zaczyna
   sie ponad sto pikseli wyzej. Tytul zostaje 36 px, jak wszedzie. */
.szata-v.ekran-pipeline .naglowek-strony.naglowek-lejka{min-height:0;padding:6px 190px 6px 2px;margin:0 0 14px}
.szata-v.ekran-pipeline .naglowek-strony.naglowek-lejka::after{width:132px;height:100px;right:24px}
.szata-v.ekran-pipeline .naglowek-strony.naglowek-lejka::before{width:460px;height:210px;right:-50px;top:-60px}
.szata-v .naglowek-lejka p.stan-lejka{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  margin-top:4px;font-size:14.5px;line-height:1.5}
.kropka-lejka{color:var(--tekst-3)}
.odnosnik-lejka{display:inline-flex;align-items:center;gap:6px;color:var(--marka-600);font-weight:600;
  text-decoration:none;border-radius:6px}
.odnosnik-lejka:hover{color:var(--granat);text-decoration:underline;text-underline-offset:3px}
.odnosnik-lejka i{font-size:12px}
@media(max-width:900px){.szata-v.ekran-pipeline .naglowek-strony.naglowek-lejka{padding-right:0}}

/* Naglowek kolumny zwarty: ikona 32 px, nazwa i licznik w jednej linii obok niej,
   podpis pod nazwa mniejsza czcionka. */
.lejek .kolumna-lejka{padding:12px 12px 14px;min-height:140px}
.lejek .naglowek-kolumny{gap:9px;margin-bottom:10px;padding-bottom:9px}
.lejek .rysunek-etapu{width:32px;height:32px}
.nazwa-etapu{min-width:0}
.lejek .tytul-kolumny{gap:7px;font-size:13.5px;line-height:1.25}
.lejek .opis-kolumny{font-size:11px;margin-top:1px;line-height:1.3}
.lejek .pusta-kolumna{padding:18px 10px}

/* Zwarta karta: tytul (najwyzej trzy linie) i linia terminu. */
.lejek .karta-lejka{padding:9px 11px 10px}
.lejek .tytul-karty{margin-bottom:5px}
.lejek .termin-karty{margin:0;flex-wrap:wrap;gap:2px 5px;line-height:1.35}
.lejek .termin-karty i{font-size:10.5px}
/* Przekreslona sama data, nie opis stanu: „umowa zawarta” przy terminie sprzed miesiaca
   ma byc czytelne. Dekoracji rodzica dziecko nie zdejmie, stad `none` na calej linii. */
.lejek .termin-karty.po-terminie{text-decoration:none}
.lejek .termin-karty.po-terminie .data-karty{text-decoration:line-through;
  text-decoration-color:var(--obramowanie)}
.data-karty{font-variant-numeric:tabular-nums}
.stan-terminu{white-space:normal}
.lejek .stan-terminu.stan-wyniku{color:var(--tekst-2);font-weight:600}
.lejek .stan-wyniku i{font-size:10px;opacity:.75}
.lejek .karta-lejka.karta-po-terminie .tytul-karty{color:var(--tekst-2)}
.lejek .karta-lejka.karta-po-terminie .tytul-karty:hover{color:var(--marka)}

/* Rozwiniecie: metryka i strzalki w pierwszym rzedzie, osoba i notatki w drugim.
   Dwa rzedy zamiast czterech, bo na urzadzeniu z kursorem rozwiniecie przykrywa
   karty ponizej i musi byc nizsze od najnizszej karty (patrz nizej). */
.rozwiniecie-karty{margin-top:8px}
.gora-rozwiniecia{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.lejek .meta-karty{margin:0;flex:1;min-width:0;flex-wrap:nowrap;overflow:hidden}
/* Blok, nie kontener elastyczny: wielokropek dziala tylko na bloku z tekstem. */
.wykonawca-karty{display:block;min-width:0;max-width:100%;font-size:11px;font-weight:600;
  color:var(--tekst-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wykonawca-karty i{font-size:10px;opacity:.75;margin-right:5px}
.lejek .ruch-karty{margin:0;padding:0;border:0;gap:4px;flex-shrink:0}
.lejek .strzalka-etapu button{width:26px;height:22px;font-size:10px}
.dol-rozwiniecia{display:flex;align-items:center;gap:6px;margin-top:5px}
.lejek .przypisanie-lejka{margin:0;flex:1;min-width:0}
.lejek .przypisanie-lejka .lista-wlasna{display:flex;width:100%}
.lejek .przypisanie-lejka .przelacznik{padding:3px 9px;min-height:26px;font-size:12px;border-radius:8px;
  gap:6px;color:var(--tekst-2);background:var(--tlo)}
.lejek .przypisanie-lejka select{font-size:12px;padding:4px 8px}
.osoba-karty{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tekst-2);
  min-height:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osoba-karty i{font-size:11px;color:var(--tekst-3)}
.lejek .notatka-skrot{flex:0 0 36px;height:26px}

/* ⚠️ ZWIJANIE TYLKO TAM, GDZIE JEST KURSOR. Na dotyku nie ma najechania, wiec karta
   zostaje pelna. Rozwiniecie jest WARSTWA NAD kartami ponizej, a nie wstawka
   w kolumnie. Zmierzone 28.09.2026 w Chrome prawdziwymi zdarzeniami myszy (15 kart,
   okno 1440 i 1280 px, przejazdy 120, 300 i 800 px/s w dol i w gore, plus 14 razy
   „spoczynek na karcie, ruch do nastepnej, spoczynek”):
     * wstawka zwijana od razu: tytuly skakaly o 62 px, a w 3 do 4 przypadkach na 14
       kursor po zwinieciu poprzedniej karty ladowal karte za daleko;
     * wstawka zwijana razem z rozwijaniem nastepnej: trafiala 14 na 14, ale tytuly
       przesuwaly sie pod kursorem o 62 do 115 px;
     * warstwa: zero przesuniec, zero pominietych kart, 14 na 14.
   ⚠️ Warstwa przykrywa gore nastepnej karty, wiec MUSI byc nizsza od najnizszej
   karty razem z odstepem. Pierwsza wersja (cztery rzedy, 68 px ponizej karty) zakrywala
   w calosci karte z jednolinijkowym tytulem (59 px plus 8 px odstepu) i kursor wychodzac
   z niej w dol trafial dwie karty nizej. Dzis dwa rzedy (58 px ponizej karty) i zwarta
   karta ma co najmniej 68 px: kursor zawsze trafia w nastepna karte.
   Pojawia sie po 0,18 s spoczynku kursora (przejazd wzrokiem po tytulach niczego
   nie rozwija), a przy skupieniu klawiatura od razu. */
@media (hover:hover){
  .lejek .karta-lejka{position:relative;min-height:68px;
    transition:border-color .12s ease,box-shadow .12s ease,z-index 0s linear .12s}
  .lejek .karta-lejka .rozwiniecie-karty{position:absolute;left:-1px;right:-1px;top:calc(100% - 9px);
    margin:0;padding:6px 11px 7px;background:var(--karta);border:1px solid;border-color:inherit;
    border-top:0;border-radius:0 0 10px 10px;box-shadow:var(--cien-2);
    opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s linear .12s}
  .lejek .karta-lejka:hover,
  .lejek .karta-lejka:has(.lista-wlasna[data-otwarta]){z-index:25;border-color:var(--marka-100);
    box-shadow:var(--cien);
    transition:border-color .14s ease .18s,box-shadow .14s ease .18s,z-index 0s linear .18s}
  .lejek .karta-lejka:hover .rozwiniecie-karty,
  .lejek .karta-lejka:has(.lista-wlasna[data-otwarta]) .rozwiniecie-karty{opacity:1;visibility:visible;
    transition:opacity .14s ease .18s,visibility 0s linear .18s}
  /* Klawiatura: bez zwloki, inaczej Tab przeskoczylby ukryte jeszcze kontrolki. */
  .lejek .karta-lejka:focus-within{z-index:25;border-color:var(--marka-100);box-shadow:var(--cien);transition:none}
  .lejek .karta-lejka:focus-within .rozwiniecie-karty{opacity:1;visibility:visible;transition:none}
  .lejek .karta-lejka.pilna:hover,.lejek .karta-lejka.pilna:focus-within{border-color:var(--czesciowo)}
  /* Karta z otwarta lista „kto prowadzi” nad karta, na ktora wlasnie najechano. */
  .lejek .karta-lejka:has(.lista-wlasna[data-otwarta]){z-index:30}
  /* Ostatnia karta kolumny nie ma nic pod soba, wiec rozwija sie w kolumnie: warstwa
     wystawalaby poza kolumne, a przy przewijanej poziomo tablicy (waskie okno) bylaby
     przycinana razem z lista osob. */
  .lejek .karta-lejka:last-child .rozwiniecie-karty{position:static;margin:0;padding:0;border:0;
    border-radius:0;box-shadow:none;background:none;max-height:0;overflow:hidden;
    transition:opacity .12s ease,visibility 0s linear .12s,max-height 0s linear .12s,margin-top 0s linear .12s}
  .lejek .karta-lejka:last-child:hover .rozwiniecie-karty,
  .lejek .karta-lejka:last-child:has(.lista-wlasna[data-otwarta]) .rozwiniecie-karty{max-height:160px;
    overflow:visible;margin-top:8px;
    transition:opacity .14s ease .18s,visibility 0s linear .18s,max-height 0s linear .18s,margin-top 0s linear .18s}
  .lejek .karta-lejka:last-child:focus-within .rozwiniecie-karty{max-height:160px;overflow:visible;
    margin-top:8px;transition:none}
}
/* Ograniczony ruch: bez wygaszania, zwloka zostaje (to nie ruch, tylko zamiar).
   `!important`, bo reguly najechania maja wieksza wage i ustawiaja wlasny czas przejscia. */
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .lejek .karta-lejka,.lejek .rozwiniecie-karty{transition-duration:0s !important}
}

/* Komunikaty ekranu lejka: przeniesienie do archiwum i przywrocenie. */
.potwierdzenie-lejka{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;
  padding:10px 14px;border-radius:12px;background:var(--marka-50);color:var(--tekst);font-size:13.5px}
.potwierdzenie-lejka i{color:var(--marka);flex-shrink:0}
.potwierdzenie-lejka span{min-width:0}
.potwierdzenie-lejka a{color:var(--marka-600);font-weight:600}
.odrzucone-lejka{padding:20px;margin-top:16px}

/* Archiwum lejka: zwykla tabela, jak historia zdarzen. */
.opis-archiwum{margin:0 0 12px}
.archiwum-lejka a.glowny{display:block;text-decoration:none;line-height:1.45}
.archiwum-lejka a.glowny:hover{color:var(--marka)}
.akcja-archiwum{text-align:right;white-space:nowrap;width:1%}
.akcja-archiwum form{display:inline}
.pusto-archiwum p{margin:4px 0 18px}
/* === KONIEC SEKCJI 28.09: LEJEK === */

/* === SEKCJA 28.09: FIRMA: DOSWIADCZENIE I KADRA (agent firmy) === */
/* Tresc na szerokosc belki, jak lista przetargow (klientka 28.09.2026: „rozjeżdżają nam się
   szerokość belki głównej z tłem »doświadczenia« czy »kadry«. Gdybyśmy to zrobili na szerokość
   belki głównej, to nie byłoby tak ciasno w treści"). Trzy zakladki „Firma" maja te sama
   szerokosc, zeby przejscie miedzy nimi nie skakalo. */
.szata-v.ekran-doswiadczenie .plocho,.szata-v.ekran-kadra .plocho,.szata-v.ekran-profil .plocho{max-width:1600px}
/* Kwota w jednej linii („zmieściłoby się 100 000 zł w jednej linii"). */
.tabela-firmy td.kol-kwota{white-space:nowrap}

/* Przelacznik profilu nad tabela: te same pigulki co na zakladce Profil branzowy. */
.przelacznik-firmy{margin:6px 0 18px}
.przelacznik-firmy .zakladka-profilu i{font-size:12px;opacity:.75}
.przelacznik-firmy .zakladka-profilu.teraz i{opacity:1}

/* Plakietki profili przy pozycji. Pozycja bez profilu: kolor uwagi i przerywana ramka
   jak stan „brak danych", bez czerwieni i bursztynu zarezerwowanych dla werdyktow. */
.profile-pozycji{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.profile-pozycji .plakietka{white-space:normal}
.plakietka.bez-profilu{background:var(--karta);color:var(--uwaga);border:1px dashed var(--uwaga)}
.uwaga-blok.blok-bez-profilu{background:var(--karta);border:1px dashed var(--uwaga);color:var(--tekst)}
.blok-bez-profilu>i{color:var(--uwaga)}
.profil-importu{margin-top:6px}
.profil-importu i{color:var(--marka);margin-right:4px}
/* Przycisk w stanie pustym widoku jednego profilu (bez ikony: `.pusto i` ja powieksza). */
.pusto .pokaz-wszystkie-profile{margin-top:14px}

/* Wybor profili w formularzach: pigulki z polem wyboru, wiele naraz. Pole wyboru
   dostaje wlasne zerowe odstepy, bo `.edytuj-referencje input` stylizuje KAZDE pole. */
.wybor-profili{border:0;margin:0;padding:0;min-width:0}
.wybor-profili legend{padding:0;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--tekst-2)}
.opcje-profili{display:flex;flex-wrap:wrap;gap:8px}
.wybor-profilu{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px;
  border:1px solid var(--obramowanie);border-radius:999px;background:var(--karta);
  font-size:13px;font-weight:600;color:var(--tekst-2);cursor:pointer;line-height:1.3}
.wybor-profilu input[type=checkbox]{margin:0;padding:0;border:0;width:15px;height:15px;
  flex:0 0 auto;accent-color:var(--marka)}
.wybor-profilu:has(input:checked){background:var(--marka-50);border-color:var(--marka-100);color:var(--granat)}
.wybor-profilu:has(input:focus-visible){outline:2px solid var(--marka);outline-offset:2px}
.edytuj-referencje .wybor-profili{margin:4px 0 2px}
.edytuj-referencje .wybor-profili legend{font-size:12px;margin-bottom:5px}
.edytuj-referencje .wybor-profilu{padding:6px 11px;font-size:12px}

/* Formularze „Dodaj osobę" i „Dodaj kwalifikację" symetryczne (klientka 28.09.2026: „brak
   symetryczności w rozkładzie belek"): cztery rowne kolumny, listy wyboru wypelniaja swoja
   kolumne tak jak pola tekstowe. Otoczke `.lista-wlasna` buduje skrypt w baza.html
   (`display:inline-flex`, szerokosc z tresci); jej szerokoscia rzadzi wylacznie CSS. */
.siatka-pol.siatka-firmy{grid-template-columns:repeat(4,minmax(0,1fr))}
.siatka-firmy .pole-podwojne{grid-column:span 2}
.siatka-firmy .pole>.lista-wlasna{display:flex;width:100%}
.siatka-firmy .pole>select{width:100%}
/* „Dodaj referencję": szesc rownych kolumn i kazdy rzad pelny (nazwa 4 + zamawiajacy 2,
   kwota, data i proba po 2, techniki i grupa po 3). Stara siatka „ile sie zmiesci"
   przy tresci na szerokosc belki zostawiala w pierwszym rzedzie cztery puste miejsca. */
.siatka-pol.siatka-referencji{grid-template-columns:repeat(6,minmax(0,1fr))}
.siatka-referencji .szer-2{grid-column:span 2}
.siatka-referencji .szer-3{grid-column:span 3}
.siatka-referencji .szer-4{grid-column:span 4}
@media(max-width:1100px){
  .siatka-pol.siatka-firmy{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Dwie kolumny: nazwa i zamawiajacy, opis, kwota i data, proba i techniki, grupa. */
  .siatka-pol.siatka-referencji{grid-template-columns:repeat(2,minmax(0,1fr))}
  .siatka-referencji .szer-2,.siatka-referencji .szer-3,.siatka-referencji .szer-4{grid-column:span 1}
  .siatka-referencji .pelna-srednio{grid-column:1 / -1}
}
/* === KONIEC SEKCJI 28.09: FIRMA: DOSWIADCZENIE I KADRA === */

/* === SEKCJA 28.09: PYTANIA I TERMINY (agent terminow) === */
/* Kafelki faktow: rowna wysokosc i wiersze wyrownane w calym rzedzie (klientka 28.09.2026:
   „należy zrównać wysokość okienek symetrycznie względem siebie”). Kazdy kafelek ma piec
   wierszy w tej samej kolejnosci (`_fakty.html`: ikona, etykieta, wartosc, dopisek, akcja)
   i dzieli je z sasiadami przez siatke podrzedna, wiec wartosci stoja na jednej wysokosci
   takze wtedy, gdy etykieta „Szacunkowa wartość zamówienia” lamie sie w waskim panelu.
   ⚠️ Odstep miedzy rzedami kafelkow daje MARGINES kafelka, nie odstep siatki: przerwa siatki
   wchodzilaby tez miedzy wiersze wewnatrz kafelka, a przy pustym wierszu (brak cytatu)
   zostawialaby dziure. `.fakt.karta{align-self:start}` z sekcji ilustracji tu przegrywa
   waga selektora, bo kafelki maja sie rozciagac do najwyzszego w rzedzie. */
.szata-v .fakty{row-gap:0;margin-bottom:calc(var(--odstep) - 16px)}
.szata-v .fakty>.fakt.karta{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;
  align-self:stretch;align-content:start;margin-bottom:16px}
.fakt-dopisek{min-width:0}
.fakt-akcja{min-width:0;padding-top:12px}
.fakt-akcja:empty{padding-top:0}

/* Pytania do Zamawiajacego (`_pytania.html`): karta pod kafelkami faktow, w panelu obok
   listy i na pelnej stronie. Zmiana terminu w kolorze marki, nie w bursztynie: zielen,
   bursztyn i czerwien sa zarezerwowane dla werdyktow (`frontend.md`). */
.pytania-zamawiajacego{padding:16px 18px;margin:0 0 20px}
.pytania-glowa{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px}
.pytania-glowa h3{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;
  color:var(--tekst);letter-spacing:-.005em}
.pytania-glowa h3>i{color:var(--marka)}
.pytania-ile{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;
  border-radius:999px;background:var(--marka-50);color:var(--marka-600);font-size:12px;font-weight:700}
.sprawdz-pytania{margin:0}
.zmiany-terminu{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.zmiany-terminu li{display:flex;gap:10px;align-items:flex-start;padding:10px 13px;border-radius:14px;
  background:var(--marka-50);border:1px solid var(--marka-100);color:var(--granat);
  font-size:13.5px;line-height:1.5}
.zmiany-terminu li>i{color:var(--marka);margin-top:3px}
.zmiany-terminu .cichy{white-space:nowrap}
.pisma-zamawiajacego{list-style:none;margin:10px 0 0;padding:0}
/* Pozycja: nazwa pliku w pierwszej linii, data i rodzaj pod nia. Dwie linie zamiast jednej
   zawijanej: w panelu obok listy data zostawala sama w osobnym wierszu przy prawej krawedzi. */
.pisma-zamawiajacego li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 8px;padding:10px 0;
  border-top:1px solid var(--obramowanie-2);font-size:13.5px;line-height:1.45}
.pisma-zamawiajacego li:first-child{border-top:0}
.pisma-zamawiajacego li>i{margin-top:3px;color:var(--tekst-3)}
.tresc-pisma{min-width:0}
.nazwa-pisma{display:block;overflow-wrap:anywhere;color:var(--tekst)}
.meta-pisma{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px}
.nazwa-pisma a{color:var(--marka-600);text-decoration:none}
.nazwa-pisma a:hover{text-decoration:underline}
.nazwa-pisma a:focus-visible{outline:2px solid var(--marka);outline-offset:2px;border-radius:4px}
.rodzaj-pisma{padding:1px 9px;border:1px solid var(--obramowanie);border-radius:999px;background:var(--tlo);
  color:var(--tekst-2);font-size:11.5px;font-weight:600;white-space:nowrap}
.rodzaj-pisma.termin-pisma{border-color:var(--marka-100);background:var(--marka-50);color:var(--marka-600)}
.data-pisma{color:var(--tekst-2);font-size:12px;white-space:nowrap}
.pisma-reszta{margin-top:2px}
.pisma-reszta>summary{padding:6px 0;color:var(--marka-600);font-size:13px;font-weight:600;cursor:pointer}
.pytania-pusto{margin:10px 0 0;font-size:13px}
.pytania-stan{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--obramowanie-2);
  color:var(--tekst-2);font-size:12.5px;line-height:1.5}
.pytania-stan i{margin-right:4px;color:var(--marka)}
/* === KONIEC SEKCJI 28.09: PYTANIA I TERMINY === */

/* === SEKCJA 28.09: ZAPOWIEDZI (agent zapowiedzi) === */
/* Ustawienia ekranu zapowiedzi (profil, porzadek, liczba na stronie) w jednym rzedzie.
   Uwagi klientki 28.09.2026: sortowanie po dacie i strony zamiast sztywnych 200 pozycji. */
.zapowiedzi-sterowanie{gap:10px 12px}
.zapowiedzi-sterowanie label{margin-left:6px}
.zapowiedzi-sterowanie select#sort-zapowiedzi{min-width:230px}
.zapowiedzi-sterowanie select#ile-zapowiedzi{min-width:0;width:auto}
/* Ogloszone w ostatnich dniach: liliowe tlo marki, nie kolor werdyktu (ten jest
   zarezerwowany dla ocen). Waga (0,3,0), bo `.szata-v .karta` ustawia tlo i ramke. */
.karta.zapowiedzi-ogloszone,.szata-v .karta.zapowiedzi-ogloszone{padding:16px 20px;margin:2px 0 20px;
  background:var(--marka-50);border-color:var(--marka-100)}
.zapowiedzi-ogloszone h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;
  font-weight:650;color:var(--tekst)}
.zapowiedzi-ogloszone h3 i{color:var(--marka)}
.zapowiedzi-ogloszone ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.zapowiedzi-ogloszone li{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.45}
.zapowiedzi-ogloszone li a{color:var(--tekst);font-weight:600}
.zapowiedzi-ogloszone li a:hover{color:var(--marka)}
.zapowiedzi-ogloszone details{margin-top:12px}
.zapowiedzi-ogloszone summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--marka)}
.zapowiedzi-ogloszone details ul{margin-top:10px}
.zapowiedzi-licznik{margin:0 0 14px}
/* Okres wszczecia minal, postepowania jeszcze nie ma: stan neutralny, nie ostrzezenie. */
.plakietka.zapowiedz-po-okresie{background:var(--obramowanie-2);color:var(--tekst-2)}
.zapowiedz-grupa{margin:8px 0 0;font-size:12.5px}
.strony.zapowiedzi-strony{justify-content:flex-start;align-items:center;padding:18px 0 8px}
/* === KONIEC SEKCJI 28.09: ZAPOWIEDZI === */

/* === SEKCJA 06.10 WORKFLOW === */
/* Uwagi klientki 06.10.2026 o tablicy (dawniej „lejek”, teraz „Workflow”): wynik w dwoch
   stanach, rezygnacja w archiwum, przeciaganie kart, wybor etapu na ekranie „W analizie”
   oraz rowne bramki na ekranie logowania. Reguly telefonu w bloku telefonu na koncu. */

/* Wynik oferty kolorem werdyktu, bo to tez jest rozstrzygniecie (klientka: „przegrane
   postępowania byłyby na czerwono, a wygrane na zielono”). Obok koloru zawsze ikona
   i slowo, zeby wynik byl czytelny takze bez rozrozniania barw. Rozwiniecie karty
   (warstwa po najechaniu) dostaje to samo tlo, inaczej odstawaloby biala plama. */
.lejek .karta-lejka.wynik-wygrana{border-color:var(--spelnia);background:var(--spelnia-tlo)}
.lejek .karta-lejka.wynik-przegrana{border-color:var(--nie);background:var(--nie-tlo)}
.lejek .karta-lejka.wynik-wygrana .rozwiniecie-karty{background:var(--spelnia-tlo)}
.lejek .karta-lejka.wynik-przegrana .rozwiniecie-karty{background:var(--nie-tlo)}
.znacznik-wyniku{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}
.znacznik-wyniku i{font-size:10px}
.znacznik-wyniku.wygrana{background:var(--spelnia-tlo);color:var(--spelnia)}
.znacznik-wyniku.przegrana{background:var(--nie-tlo);color:var(--nie)}
.lejek .karta-lejka .znacznik-wyniku{background:var(--karta);margin:0 0 5px}

/* Karta „Wynik” bez wskazanego stanu: neutralna, z prosba o wskazanie na zwartej karcie
   (nie w rozwinieciu), bo tu jest cos do zrobienia. */
.wskaz-wynik{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--obramowanie)}
.pytanie-wyniku{flex-basis:100%;font-size:11.5px;font-weight:600;color:var(--tekst-2)}
.wskaz-wynik form{display:flex;flex:1 1 0;min-width:0}
.przycisk-wyniku{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:5px 8px;border:1px solid;border-radius:8px;background:var(--karta);font:inherit;
  font-size:11.5px;font-weight:700;line-height:1.3;cursor:pointer;transition:background .14s}
.przycisk-wyniku i{font-size:10.5px}
.przycisk-wyniku.wygrana{color:var(--spelnia);border-color:var(--spelnia)}
.przycisk-wyniku.wygrana:hover{background:var(--spelnia-tlo)}
.przycisk-wyniku.przegrana{color:var(--nie);border-color:var(--nie)}
.przycisk-wyniku.przegrana:hover{background:var(--nie-tlo)}
.przycisk-wyniku:focus-visible{outline:2px solid var(--marka);outline-offset:2px}

/* Przeciaganie kart (klientka: „czy dużym kosztem jest dodanie ficzera typu drag and drop?”).
   Kursor chwytania tylko tam, gdzie przeciaganie dziala: klase dokleja `workflow.js`
   przy precyzyjnym kursorze. Pola wyniku pokazuja sie dopiero w trakcie przeciagania. */
.lejek.przeciaganie-wlaczone .karta-lejka{cursor:grab}
.lejek.przeciaganie-wlaczone .karta-lejka a,.lejek.przeciaganie-wlaczone .karta-lejka button,
.lejek.przeciaganie-wlaczone .karta-lejka .lista-wlasna{cursor:pointer}
.lejek .karta-lejka.przeciagana{opacity:.45}
.lejek .karta-lejka.zapisywana{opacity:.6;pointer-events:none}
.lejek .kolumna-lejka.cel-aktywny{border-color:var(--marka);background:var(--marka-50);
  box-shadow:inset 0 0 0 1px var(--marka)}
.cele-wyniku{display:none;gap:6px;margin:0 0 8px}
.lejek.przeciaganie .cele-wyniku{display:flex}
.cel-wyniku{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 6px;border:1px dashed;border-radius:10px;background:var(--karta);
  font-size:12px;font-weight:700}
.cel-wyniku i{font-size:11px}
.cel-wyniku.cel-wygrana{color:var(--spelnia);border-color:var(--spelnia)}
.cel-wyniku.cel-przegrana{color:var(--nie);border-color:var(--nie)}
.cel-wyniku.cel-wygrana.cel-aktywny{background:var(--spelnia-tlo);border-style:solid}
.cel-wyniku.cel-przegrana.cel-aktywny{background:var(--nie-tlo);border-style:solid}
.podpowiedz-przeciagania{display:inline-flex;align-items:center;gap:6px;color:var(--tekst-3);font-size:13px}
.podpowiedz-przeciagania i{font-size:11px}
.blad-przeciagania{margin:0 0 14px}

/* Wybor etapu (makro `wybor_etapu`): pole na powod rezygnacji odslaniane przez `workflow.js`,
   zawsze w osobnym wierszu pod lista. */
.powod-rezygnacji{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;flex-basis:100%}
.wybor-workflow .powod-rezygnacji input{flex:1 1 200px;min-width:0;padding:8px 12px;font:inherit;font-size:13px;
  border:1px solid var(--obramowanie);border-radius:var(--r-s);background:var(--karta);color:var(--tekst)}
.wybor-workflow .powod-rezygnacji input:focus{outline:2px solid var(--marka);outline-offset:1px}

/* Ekran „W analizie”: wybor etapu pod kazda pozycja (klientka: „Pytanie czy da się dać tylko
   dla tych wrzuconych do analizy listę rozwijaną z opcją przeniesienia do innego etapu?”).
   Odnosnik wiersza i lista to jedna pozycja: wspolna linia dolna, wspolne tlo przy najechaniu
   i przy wybranej pozycji, lista w linii tytulu (3 px paska, 20 px marginesu, kolko 42 px,
   odstep 14 px). */
.wiersz-analizy{border-bottom:1px solid var(--obramowanie-2);transition:background .12s}
.wiersz-analizy .mini{border-bottom:0;padding-bottom:8px}
.wiersz-analizy .mini:hover,.wiersz-analizy .mini.wybrany{background:transparent}
.wiersz-analizy:hover{background:var(--tlo)}
.wiersz-analizy:has(.mini.wybrany){background:var(--marka-50)}
.wybor-workflow.etap-w-wierszu{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:0 20px 14px 76px;border-left:3px solid transparent}
.wiersz-analizy:has(.mini.wybrany) .etap-w-wierszu{border-left-color:var(--marka)}
.etap-w-wierszu .lista-wlasna{min-width:200px}
.etap-w-wierszu .lista-wlasna .przelacznik{padding:6px 12px;min-height:32px;font-size:12.5px}
.etap-w-wierszu>select{padding:6px 10px;font:inherit;font-size:12.5px;border:1px solid var(--obramowanie);
  border-radius:var(--r-s);background:var(--karta)}
.komunikat-workflow{margin:0 20px 12px}

/* Belka gorna: „Workflow” jest o okolo 26 px dluzszy od „Lejek”. Menu z `min-width:0`
   kurczylo sie ponizej wlasnej tresci i pozycja „Więcej” wchodzila na wyszukiwarke.
   Zmierzone w ramkach od 961 do 1920 px: nachodzenie bylo juz przy „Lejek” (1180, 1461
   i 1536 px, po poszerzeniu wyszukiwarki 28.09), a „Workflow” dokladal 1366 i 1440 px.
   Kurczy sie wiec wyszukiwarka (od 1121 px ma co najmniej okolo 110 px), nie menu. */
@media(min-width:701px){
  .szata-v .menu-gorne{flex-shrink:0}
  .szata-v .belka-gorna .szukajka-belki{min-width:0}
}

/* Ekran logowania: dwie rowne bramki (klientka 06.10.2026: „można by zrównać wielkością te
   bramki. Lewa trochę zmniejszyć, a prawa powiększyć.”). Bylo: lewa 1,05 czesci wolnego
   miejsca (okolo 600 px), prawa sztywne 400 px. Jest: obie po polowie i tej samej wysokosci,
   tresc wysrodkowana w pionie, stopka z odnosnikiem do hasla w karcie (`logowanie.html`).
   Ponizej 961 px zostaje jedna kolumna z samym formularzem, jak dotad. */
@media(min-width:961px){
  .szata-v .logowanie-dwie{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;
    max-width:980px;align-items:stretch}
  .szata-v .logowanie-dwie .okno-produktu{display:flex;flex-direction:column;justify-content:center}
  .szata-v .logowanie-dwie .logowanie{max-width:none;display:flex;flex-direction:column}
  .szata-v .logowanie-dwie .logowanie .karta{flex:1;display:flex;flex-direction:column;
    justify-content:center;padding:44px;border-radius:30px}
}
/* === KONIEC SEKCJI 06.10 WORKFLOW === */

/* === SEKCJA 06.10 KRYTERIA (agent kryteriow) === */
/* Rozpisanie kryterium oceny ofert pod paskiem: podkryteria z punktami albo opis oceny,
   na bezowym tle i drobnym pismem, tak jak tresc ogloszenia w szczegolach zamowienia.
   Klientka 05.10.2026: „na beżowym tle, małymi literkami” zamiast „skąd to wiemy?”.
   Cytaty zostaja w zwinietym dopisku na koncu bloku. */
.kryteria-oceny .rozpisanie-kryterium{margin-top:8px;padding:10px 13px;background:var(--tlo);
  border:1px solid var(--obramowanie);border-radius:10px;font-size:12.5px;line-height:1.55;
  color:var(--tekst-2);overflow-wrap:anywhere}
.kryteria-oceny .rozpisanie-kryterium p{margin:0}
.kryteria-oceny .rozpisanie-kryterium p + p,
.kryteria-oceny .podkryteria + p{margin-top:7px}
.kryteria-oceny .podkryteria{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kryteria-oceny .podkryteria li{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1px 12px;align-items:baseline}
.kryteria-oceny .podkryterium-nazwa{color:var(--tekst)}
.kryteria-oceny .podkryterium-punkty{font-weight:700;color:var(--tekst);white-space:nowrap}
.kryteria-oceny .podkryterium-zasada{grid-column:1 / -1;font-size:12px;color:var(--tekst-3)}
.kryteria-oceny .rozpisane-czesciowo{color:var(--tekst-3)}
.kryteria-oceny .rozpisanie-kryterium .zrodlo-kryterium{margin-top:6px}
.kryteria-oceny .rozpisanie-kryterium .zrodlo-kryterium blockquote{padding:7px 10px;
  background:var(--karta);border-left:3px solid var(--obramowanie);border-radius:0 7px 7px 0}
/* Dopisek przy pelnomocnictwie na liscie dokumentow zamawiajacego (klientka 05.10.2026):
   drobnym pismem, na bezowym tle listy, w osobnym wierszu pod nazwa dokumentu. */
.lista-wymaganych .dopisek-dokumentu{flex-basis:100%;font-size:12px;line-height:1.45;
  color:var(--tekst-3);font-weight:400}
/* === KONIEC SEKCJI 06.10: KRYTERIA === */

/* === SEKCJA 06.10 ZAGRANICZNE === */
/* Zakladka „Zamówienia zagraniczne” (uwagi klientki 06.10.2026 przed konferencja „Rynek
   zamówień U.S. Army w Polsce”): wyszukiwarka na gorze kazdego obszaru z panelem
   zaawansowanym, tytul po polsku z oryginalem pod spodem, flaga kraju, krotkie streszczenie,
   udzielone kontrakty; w panelu szczegolow blok „Czego dotyczy zamówienie”. Reguly telefonu
   w zapytaniu na koncu tej sekcji (inne niz blok telefonu, ktory musi zostac ostatni). */

/* Wyszukiwarka: biale pole na cala szerokosc z przyciskiem. Klientka nie zauwazyla
   poprzedniego pola (jasnoszare na kremowym tle): „musi być wyszukiwarka na górze”. */
.szukaj-zagraniczne{margin:0 0 18px}
.pasek-szukania-zagr{display:flex;gap:10px;align-items:stretch}
.pole-szukania-zagr{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;
  padding:0 18px;min-height:50px;background:var(--karta);border:1px solid var(--obramowanie);
  border-radius:999px;box-shadow:var(--cien);cursor:text}
.pole-szukania-zagr:focus-within{border-color:var(--marka);box-shadow:0 0 0 3px var(--marka-100)}
.pole-szukania-zagr>i{color:var(--tekst-3);font-size:15px}
.pole-szukania-zagr input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:15px;color:var(--tekst);padding:12px 0}
.pasek-szukania-zagr>.przycisk{border-radius:999px;padding:0 26px;min-height:50px}
.szukaj-zagraniczne .wiecej-filtrow{margin-top:10px}
.licznik-zagr{margin:0 0 10px;font-size:13px}
.uwaga-nato{margin:0 0 16px}
.uwaga-nato a,.warunki-zagraniczne a{font-weight:600;white-space:nowrap}
.warunki-zagraniczne{margin:0 0 14px}

/* Pozycja listy: flaga z krajem i rodzaj nad tytulem, tytul po polsku, oryginal mniejszy. */
.znaczniki-zagr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:7px;
  font-size:12.5px}
.miejsce-zagr{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--tekst-2)}
.miejsce-zagr>i{color:var(--marka);font-size:13px}
.plakietka.rodzaj-zagr{background:var(--marka-50);color:var(--granat)}
.oryginal-tytulu{margin:-2px 0 7px;font-size:12.5px;line-height:1.45;color:var(--tekst-3)}
.streszczenie-zagr{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--tekst-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cpv-auto .tab{font-weight:600}
.pozycja-zagraniczna.udzielona .termin-pozycji b{color:var(--granat)}
.dodatek-zagraniczny .przycisk{margin-top:8px;display:inline-flex;align-items:center;gap:8px}

/* Blok „Czego dotyczy zamówienie” w panelu i na stronie postepowania (`_zamowienie.html`). */
.szczegoly-zagraniczne .tytul-pl{font-weight:650;color:var(--tekst)}
.szczegoly-zagraniczne .cpv-auto-dopisek{flex-basis:100%}

/* Flagi: kolory panstw sa trescia, nie kolorem interfejsu, dlatego wpisane wprost (wyjatek od
   zasady tokenow, tak jak na zdjeciu). Prostokat 3:2 z cienka obwodka, zeby biale pola
   (Polska, Niemcy) nie zlewaly sie z karta. Kraj bez rysunku dostaje ikone globu. */
.flaga{display:inline-block;flex:0 0 auto;width:21px;height:14px;border-radius:3px;
  box-shadow:0 0 0 1px var(--obramowanie);background-size:100% 100%;background-repeat:no-repeat}
.flaga-pl{background:linear-gradient(#fff 50%,#DC143C 50%)}
.flaga-ua{background:linear-gradient(#0057B7 50%,#FFD700 50%)}
.flaga-de{background:linear-gradient(#000 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6%)}
.flaga-nl{background:linear-gradient(#AE1C28 33.3%,#fff 33.3% 66.6%,#21468B 66.6%)}
.flaga-lu{background:linear-gradient(#EF3340 33.3%,#fff 33.3% 66.6%,#00A3E0 66.6%)}
.flaga-bg{background:linear-gradient(#fff 33.3%,#00966E 33.3% 66.6%,#D62612 66.6%)}
.flaga-lt{background:linear-gradient(#FDB913 33.3%,#006A44 33.3% 66.6%,#C1272D 66.6%)}
.flaga-ee{background:linear-gradient(#0072CE 33.3%,#000 33.3% 66.6%,#fff 66.6%)}
.flaga-hu{background:linear-gradient(#CD2A3E 33.3%,#fff 33.3% 66.6%,#436F4D 66.6%)}
.flaga-at{background:linear-gradient(#ED2939 33.3%,#fff 33.3% 66.6%,#ED2939 66.6%)}
.flaga-lv{background:linear-gradient(#9E3039 40%,#fff 40% 60%,#9E3039 60%)}
.flaga-be{background:linear-gradient(90deg,#000 33.3%,#FAE042 33.3% 66.6%,#ED2939 66.6%)}
.flaga-it{background:linear-gradient(90deg,#009246 33.3%,#fff 33.3% 66.6%,#CE2B37 66.6%)}
.flaga-fr{background:linear-gradient(90deg,#0055A4 33.3%,#fff 33.3% 66.6%,#EF4135 66.6%)}
.flaga-ro{background:linear-gradient(90deg,#002B7F 33.3%,#FCD116 33.3% 66.6%,#CE1126 66.6%)}
.flaga-ie{background:linear-gradient(90deg,#169B62 33.3%,#fff 33.3% 66.6%,#FF883E 66.6%)}
.flaga-us{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'%3E%3Crect width='21' height='14' fill='%23B22234'/%3E%3Cpath d='M0 1.62h21M0 3.77h21M0 5.92h21M0 8.08h21M0 10.23h21M0 12.38h21' stroke='%23fff' stroke-width='1.08'/%3E%3Crect width='8.4' height='7.54' fill='%233C3B6E'/%3E%3C/svg%3E")}
.flaga-nato{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'%3E%3Crect width='21' height='14' fill='%23004990'/%3E%3Cpath d='M10.5 2.2l1 3.8 3.8 1-3.8 1-1 3.8-1-3.8-3.8-1 3.8-1z' fill='%23fff'/%3E%3C/svg%3E")}
.flaga-ue{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'%3E%3Crect width='21' height='14' fill='%23039'/%3E%3Cg fill='%23FC0'%3E%3Ccircle cx='10.5' cy='3' r='.6'/%3E%3Ccircle cx='12.5' cy='3.54' r='.6'/%3E%3Ccircle cx='13.96' cy='5' r='.6'/%3E%3Ccircle cx='14.5' cy='7' r='.6'/%3E%3Ccircle cx='13.96' cy='9' r='.6'/%3E%3Ccircle cx='12.5' cy='10.46' r='.6'/%3E%3Ccircle cx='10.5' cy='11' r='.6'/%3E%3Ccircle cx='8.5' cy='10.46' r='.6'/%3E%3Ccircle cx='7.04' cy='9' r='.6'/%3E%3Ccircle cx='6.5' cy='7' r='.6'/%3E%3Ccircle cx='7.04' cy='5' r='.6'/%3E%3Ccircle cx='8.5' cy='3.54' r='.6'/%3E%3C/g%3E%3C/svg%3E")}
.flaga-onz{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'%3E%3Crect width='21' height='14' fill='%23009EDB'/%3E%3Ccircle cx='10.5' cy='7' r='3.6' fill='none' stroke='%23fff' stroke-width='.9'/%3E%3Cpath d='M10.5 3.4v7.2M6.9 7h7.2' stroke='%23fff' stroke-width='.6'/%3E%3C/svg%3E")}

@media (max-width: 700px){
  .pasek-szukania-zagr{flex-wrap:wrap}
  .pasek-szukania-zagr>.przycisk{flex:1 1 100%;min-height:44px}
  .pole-szukania-zagr{min-height:46px;padding:0 14px}
  .pozycja-zagraniczna{flex-direction:column;gap:10px;padding:16px}
  .pozycja-zagraniczna .termin-pozycji{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .uwaga-nato a,.warunki-zagraniczne a{white-space:normal}
}
/* === KONIEC SEKCJI 06.10 ZAGRANICZNE === */

/* === SEKCJA 06.10 WARUNKI: warunek do potwierdzenia i reczna decyzja (migracja 105) === */
/* Licznik przy warunku nierozstrzygnietym mowi „2 do potwierdzenia”, a nie „2/1”, ktore
   czytalo sie jak „spelnia” (uwagi klientki z 05.10.2026). Kolor stanu czesciowego, bo
   znak zapytania przy warunku ma ten sam kolor. */
.warunek .licznik.do-potwierdzenia{color:var(--czesciowo);font-weight:600;white-space:nowrap}
.potwierdzenie-warunku{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:10px 0 2px;
  padding:10px 12px;border-radius:12px;background:var(--tlo)}
.potwierdzenie-warunku .pytanie-decyzji{font-size:13px;color:var(--tekst-2);margin-right:auto}
.potwierdzenie-warunku .decyzja-reczna{font-size:13px;color:var(--tekst);margin-right:auto;
  display:inline-flex;align-items:center;gap:6px}
/* === KONIEC SEKCJI 06.10 WARUNKI === */

/* === SEKCJA 06.10 PANEL OPERATORA I DOSTEP TESTOWY === */
/* Panel operatora (`operator.html`): zgloszenia ze strony, organizacje z koncem dostepu
   i uwagi testerow. Stany plakietkami `stan-zgloszenia` z ekranu uwag, nie kolorami
   werdyktow. Klasy z przedrostkiem `op-`. */
/* Ilustracja naglowka jak na pozostalych ekranach (szata 25.09.2026): ludzie, bo panel to osoby. */
.szata-v.ekran-operator .naglowek-strony::after{background-image:url('/statyczne/grafika/h_uzytkownicy.png')}
.op-lista{display:grid;gap:14px}
.op-karta{padding:18px 20px}
.op-zamknieta{opacity:.72}
.op-glowa{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 14px;flex-wrap:wrap}
.op-glowa .drugi{margin-top:3px;line-height:1.7}
.op-opis{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--tekst);white-space:pre-line;
  overflow-wrap:anywhere}
.op-formularz{margin-top:14px}
.op-notatka{display:block}
.op-notatka textarea{width:100%;margin-top:5px}
.op-przyciski{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.op-karta form+form{margin-top:10px}
.op-haslo{font-size:15px;padding:2px 8px;border-radius:8px;background:#fff;
  border:1px solid var(--marka-100);user-select:all;white-space:nowrap}
/* Koniec okresu testowego w menu konta: ta sama linijka co rola, w kolorze marki. */
.rola-konta.dostep-testowy{color:var(--marka-600);font-weight:600}
/* Koszt AI i dodatek zagraniczny w tabeli organizacji (06.10.2026): male formularze w komorce. */
.op-limit{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px}
.op-limit label{font-size:12px;color:var(--tekst-2);white-space:nowrap}
.szata-v .op-limit input[type=text]{width:72px;min-width:0;padding:6px 8px}
.op-przelacz{margin-top:8px}
/* === KONIEC SEKCJI 06.10 PANEL OPERATORA === */

/* === SEKCJA 06.10 STRONA GLOWNA (`strona.html`) === */
/* Strona pod domena zamowienia.ai z formularzem zgloszenia (rozmowa z klientka 06.10.2026).
   Stylistyka viktor.com jak w aplikacji: krem, miekka czern, granat, fiolet, gradient
   z ekranu logowania. Klasy z przedrostkiem `sg-`, zeby nie zderzyc sie z aplikacja. */
.sg{max-width:1180px;margin:0 auto;padding:0 24px 32px}
.sg-belka{display:flex;align-items:center;gap:18px;height:76px}
.sg-marka{display:inline-flex;margin-right:auto}
.sg-menu{display:flex;gap:6px}
.szata-v .sg-menu a{color:var(--tekst-2);font-weight:600;font-size:14px;padding:8px 12px;border-radius:999px}
.szata-v .sg-menu a:hover{background:#fff;color:var(--granat)}
.sg-okladka{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;
  padding:56px;border-radius:32px;color:#fff;
  background:#150079 url('/statyczne/grafika/wz_viktor.jpg') center/cover no-repeat;
  box-shadow:0 30px 70px rgba(21,0,121,.22)}
/* ⚠️ Waga: `.szata-v h1…{color:var(--tekst)}` przebila naglowek na ciemnym tle przy logowaniu
   (kontrast 1,08, 27.09.2026). Tu od razu z `.szata-v`. */
.szata-v .sg-okladka h1{color:#fff;font-size:46px;line-height:1.1;letter-spacing:-.03em;font-weight:700;
  max-width:16ch}
.sg-okladka-tekst{min-width:0}
/* Wyroznienie w hasle bialym kolorem z podkresleniem, nie jasnym fioletem: gorna czesc tla
   jest rozowa, a #B3A3FF mial na niej kontrast okolo 1,5 (zmierzone na podgladzie 06.10.2026). */
.sg-okladka h1 b{color:#fff;font-weight:700;text-decoration:underline;text-decoration-thickness:4px;
  text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.55)}
.sg-wstep{margin-top:18px;font-size:17px;line-height:1.6;color:#E7E1FF;max-width:46ch}
.sg-akcje{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* Dlugi napis przycisku zawija sie na waskim ekranie zamiast rozpychac strone (291 px w podgladzie). */
.szata-v .sg-akcje .przycisk{white-space:normal;max-width:100%;height:auto;line-height:1.3;text-align:left}
.sg-drobne{margin-top:12px;font-size:13px;color:#D9D1FF}
.sg-podglad{display:grid;gap:10px;padding:20px;border-radius:24px;background:#fff;color:var(--tekst);
  box-shadow:0 24px 50px rgba(21,0,121,.28)}
.sg-podglad-podpis{font-size:12px;color:var(--tekst-3);margin-bottom:2px}
.sg-podglad-podpis i{color:var(--marka);margin-right:5px}
/* `min-width:0`: wiersz jest elementem siatki, a ten domyslnie nie kurczy sie ponizej szerokosci
   tresci, wiec na waskim ekranie wystawal poza karte podgladu. */
.sg-wiersz{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;
  border:1px solid var(--obramowanie-2);min-width:0}
/* Podpis „Firma”/„Zespol” w pigulce aplikacja chowa ponizej 720 px; na stronie glownej bez niego
   „spelnia” stoi dwa razy bez wyjasnienia, wiec w podgladzie zostaje zawsze. */
.sg-podglad .werdykt-pigulka .etyk{display:inline}
.sg-wiersz-tresc{min-width:0}
.sg-wiersz-tytul{font-size:14px;font-weight:650;color:var(--tekst);margin-bottom:7px;line-height:1.35}
.sg-licznik{margin:22px auto 0;text-align:center;font-size:15px;color:var(--tekst-2);max-width:70ch}
.sg-licznik b{color:var(--granat);font-size:18px}
.sg-sekcja{margin-top:72px}
.szata-v .sg h2{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin-bottom:20px}
.sg-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sg-kafel{background:#fff;border:1px solid var(--obramowanie);border-radius:22px;padding:24px}
.sg-kafel i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-size:19px;
  color:var(--marka);background:var(--marka-50);margin-bottom:14px}
.sg-kafel h3{font-size:16px;margin-bottom:6px;line-height:1.35}
.sg-kafel p{font-size:14px;line-height:1.6;color:var(--tekst-2)}
.sg-wyroznik{margin-top:72px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;
  align-items:center;padding:40px;border-radius:28px;background:var(--marka-50);border:1px solid var(--marka-100)}
.sg-wyroznik p{font-size:15px;line-height:1.7;color:var(--tekst-2)}
.werdykty.sg-werdykty{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:0}
.sg-zrodla{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.sg-zrodla li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;
  background:#fff;border:1px solid var(--obramowanie);font-size:14.5px;line-height:1.5}
.sg-zrodla i{color:var(--marka);margin-top:3px;width:18px;text-align:center;flex:0 0 18px}
.sg-kroki{list-style:none;counter-reset:krok;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sg-kroki li{counter-increment:krok;position:relative;padding:62px 22px 22px;border-radius:22px;background:#fff;
  border:1px solid var(--obramowanie);color:var(--tekst-2);font-size:14.5px;line-height:1.6}
.sg-kroki li::before{content:counter(krok);position:absolute;left:22px;top:20px;width:30px;height:30px;
  border-radius:50%;display:grid;place-items:center;background:var(--grad-marka);color:#fff;font-weight:700;font-size:14px}
.sg-kroki b{display:block;color:var(--tekst);margin-bottom:4px}
.sg-zgloszenie{margin-top:72px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;
  align-items:start;scroll-margin-top:24px}
.sg-zgloszenie-opis p{font-size:15px;line-height:1.7;color:var(--tekst-2)}
.sg-plusy{list-style:none;margin-top:16px;display:grid;gap:10px}
.sg-plusy li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--tekst)}
.sg-plusy i{color:var(--marka);margin-top:4px}
.szata-v .karta.sg-karta-formularza{padding:28px;border-radius:26px}
.sg-pole{margin-bottom:14px}
.sg-pole input,.sg-pole textarea,.sg-pole select{width:100%}
.sg-pole .lista-wlasna{display:flex;width:100%}
/* Waga: `.szata-v input[type=email]` (0,2,1) przebijala ramke bledu bez `.szata-v`. */
.szata-v .sg-pole-blad input,.szata-v .sg-pole-blad textarea{border-color:var(--nie)}
.sg-blad{color:var(--nie);font-size:12.5px;margin-top:5px}
.sg-opcjonalne{font-weight:400;color:var(--tekst-3)}
.szata-v label.sg-zgoda{display:flex;gap:10px;align-items:flex-start;margin:6px 0 2px;font-size:13.5px;
  font-weight:500;color:var(--tekst);line-height:1.5}
.sg-zgoda input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:var(--marka)}
.szata-v .przycisk.sg-wyslij{width:100%;justify-content:center;margin-top:16px}
.sg-klauzula{margin-top:14px;font-size:11.5px;line-height:1.55;color:var(--tekst-3)}
.sg-ukryte{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sg-dziekujemy{text-align:center;padding:18px 8px}
.sg-dziekujemy img{display:block;margin:0 auto 12px}
.sg-dziekujemy h3{font-size:19px;margin-bottom:6px}
.sg-dziekujemy p{color:var(--tekst-2)}
.sg-stopka{margin-top:64px;padding:22px 0 8px;border-top:1px solid var(--obramowanie);display:flex;
  flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--tekst-3)}
@media(max-width:960px){
  .sg-menu{display:none}
  .sg-okladka{grid-template-columns:minmax(0,1fr);padding:40px 36px;gap:32px}
  .sg-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-wyroznik,.sg-zgloszenie,.sg-kroki{grid-template-columns:minmax(0,1fr)}
}
/* === KONIEC SEKCJI 06.10 STRONA GLOWNA === */

@media(max-width:700px){
  /* --- telefon 06.10: STRONA GLOWNA I PANEL OPERATORA --- */
  .sg{padding:0 16px 28px}
  .sg-belka{height:auto;min-height:64px;padding:10px 0;gap:10px;flex-wrap:wrap}
  .sg-okladka{padding:28px 20px;border-radius:24px}
  .szata-v .sg-okladka h1{font-size:32px}
  .sg-wstep{font-size:15.5px}
  .sg-siatka,.sg-zrodla{grid-template-columns:minmax(0,1fr)}
  .sg-sekcja,.sg-wyroznik,.sg-zgloszenie{margin-top:48px}
  .sg-wyroznik{padding:26px 20px}
  .szata-v .sg h2{font-size:25px}
  .szata-v .karta.sg-karta-formularza{padding:20px 16px}
  .op-karta{padding:16px}
  /* --- telefon 06.10: koniec STRONA GLOWNA I PANEL OPERATORA --- */
  /* --- telefon 06.10: WORKFLOW --- */
  /* Lista etapu pod pozycja w linii tytulu: na telefonie wiersz ma 16 px marginesu. */
  .wybor-workflow.etap-w-wierszu{padding:0 16px 12px 72px}
  .komunikat-workflow{margin:0 16px 12px}
  /* --- telefon 06.10: koniec WORKFLOW --- */
  /* --- telefon 28.09: LISTA I WYSZUKIWARKA --- */
  .pozycja-menu.tylko-telefon{display:flex}
  .kolumna-listy .zapisane-pasek{padding:0 16px 11px}
  .poszerzono{margin:0 16px 12px}
  /* --- telefon 28.09: koniec LISTA I WYSZUKIWARKA --- */
  /* --- telefon 28.09: LEJEK --- */
  /* ⚠️ Regula nizszego naglowka lejka ma wieksza wage niz regula telefonu, wiec poswiata
     (460 px, 50 px poza prawa krawedzia) przewijala na telefonie cala kolumne tresci
     w bok o 34 px (zmierzone w ramce 390 px). Tu wraca szerokosc ekranu. */
  .szata-v.ekran-pipeline .naglowek-strony.naglowek-lejka{padding:12px 0 14px;margin-bottom:12px}
  .szata-v.ekran-pipeline .naglowek-strony.naglowek-lejka::before{width:100%;height:180px;right:0;top:-40px}
  /* Archiwum na telefonie: wiersz jako blok z etykietami, przycisk „Przywróć” na ekranie,
     a nie na koncu tabeli przewijanej w bok. */
  .przewijana.archiwum-lejka table{min-width:0}
  .archiwum-lejka thead{display:none}
  .archiwum-lejka table,.archiwum-lejka tbody,.archiwum-lejka tr{display:block}
  .archiwum-lejka tbody tr{padding:12px 0;border-bottom:1px solid var(--obramowanie-2)}
  .archiwum-lejka tbody tr:last-child{border-bottom:0}
  .przewijana.archiwum-lejka table td{display:block;position:relative;min-width:0;
    padding:3px 16px 3px 136px;border:0}
  .przewijana.archiwum-lejka table td:first-child{padding:0 16px 6px}
  .archiwum-lejka td[data-etykieta]::before{content:attr(data-etykieta);position:absolute;left:16px;top:5px;
    width:112px;color:var(--tekst-3);font-size:12px}
  .przewijana.archiwum-lejka table td.akcja-archiwum{width:auto;text-align:left;padding:8px 16px 0}
  /* --- telefon 28.09: koniec LEJEK --- */
  /* --- telefon 28.09: FIRMA: DOSWIADCZENIE I KADRA --- */
  .siatka-pol.siatka-firmy,.siatka-pol.siatka-referencji{grid-template-columns:minmax(0,1fr)}
  .siatka-firmy .pole-podwojne{grid-column:auto}
  .przelacznik-firmy{margin:4px 0 14px}
  .wybor-profilu{padding:8px 12px}
  /* --- telefon 28.09: koniec FIRMA: DOSWIADCZENIE I KADRA --- */
  /* --- telefon 28.09: PYTANIA I TERMINY --- */
  /* Pytania do Zamawiajacego: przycisk na cala szerokosc pod tytulem. */
  .pytania-zamawiajacego{padding:14px}
  .sprawdz-pytania,.sprawdz-pytania .przycisk{width:100%}
  /* --- telefon 28.09: koniec PYTANIA I TERMINY --- */
  /* --- telefon 28.09: ZAPOWIEDZI --- */
  /* Na telefonie kazda lista wyboru w swoim wierszu, podpis nad nia. */
  .zapowiedzi-sterowanie label{margin:4px 0 0;flex:1 0 100%}
  .zapowiedzi-sterowanie select,.zapowiedzi-sterowanie select#sort-zapowiedzi,
  .zapowiedzi-sterowanie select#ile-zapowiedzi{width:100%;min-width:0}
  .karta.zapowiedzi-ogloszone,.szata-v .karta.zapowiedzi-ogloszone{padding:14px 16px}
  /* --- telefon 28.09: koniec ZAPOWIEDZI --- */
  /* ⚠️ KOLUMNA TRESCI MA SIE MIESCIC W EKRANIE, ZAWSZE. `.plocho` ma
     `margin:0 auto`, a margines automatyczny na elemencie siatki WYLACZA
     rozciaganie do sciezki: element dostaje rozmiar dopasowany do tresci,
     wiec jeden szeroki pasek zakladek albo tabela rozpychala CALA strone
     do 536, 1051, a na doswiadczeniu do 1180 px przy ekranie 375 px.
     Objawem byly uciete tytuly wszedzie indziej, nie w winnym miejscu.
     Na telefonie kolumna jest wiec przypieta do szerokosci ekranu,
     a tresc szersza od niej przewija sie POZIOMO wewnatrz kolumny,
     zamiast byc przycinana (`overflow-x:hidden` zabieralo ja bezpowrotnie). */
  .plocho{margin-left:0;margin-right:0;width:100%;overflow-x:auto}
  .komponent{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px}
  .komponent .etyk{grid-area:1 / 1 / 2 / 2}
  .komponent .wart{grid-area:1 / 2 / 2 / 3}
  .komponent .pasek-oceny{grid-area:2 / 1 / 3 / 3}
  .komponent .opis{grid-area:3 / 1 / 4 / 3;margin-top:0;overflow-wrap:anywhere}
  .szczegoly-zamowienia .pola-zamowienia{grid-template-columns:minmax(0,1fr);gap:3px}
  .szczegoly-zamowienia dt{padding-top:11px}
  .szczegoly-zamowienia dt:first-child{padding-top:0}
  /* ⚠️ Naglowek warunku to pasek bez zawijania, a moze niesc az cztery
     plakietki naraz (odczyt niepewny, podobny warunek, okres, licznik).
     Zmierzone: minimalna szerokosc 449 px przy ekranie 375 px, czyli to
     ON rozpychal cala kolumne tresci. Plakietki maja sie zawijac pod tekst. */
  .warunek summary{flex-wrap:wrap;gap:7px 10px}
  /* Okienko uwagi na telefonie: mniejsze marginesy, zeby pole tekstowe
     i przycisk wysylki zmiescily sie nad klawiatura. */
  .wnetrze-okna{padding:18px 16px 20px}
  .zglos-uwage{padding:0 10px}
  .zgloszenie{padding:14px}
  .zgloszenie-zrzut img{max-width:100%}
  .usun-zgloszenie{margin-left:0}
  .nowa-uwaga{padding:16px}
  /* Odnosniki do zrodla na telefonie: bez nazwy hosta, a etykieta moze sie
     zawinac, zamiast wystawac poza waska kolumne. */
  .odnosnik-zrodla{white-space:normal}
  .host-zrodla{display:none}
  /* Szata 25.09.2026 na telefonie: menu dolne bez podpisow, mniejsze odstepy. */
  .pasek{padding:6px 8px;border-right:0;border-top:1px solid var(--obramowanie)}
  .pasek a{justify-content:center;padding:0;gap:0}
  .pasek .etykieta-paska{display:none}
  .pasek .licznik{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;
    font-size:9.5px;background:var(--uwaga);color:#fff}
  .plocho{padding:20px 16px 88px}
  .naglowek-strony h1,.karta-na-okladce h1{font-size:22px}
  .karta-na-okladce{padding:18px}
  .karta-na-okladce .fakty-w-linii>div{padding:6px 16px 6px 0}
  .kafelek{padding:18px}
  .kafelek .liczba{font-size:28px}
  .mini{padding:14px 16px}
  .kolumna-szczegolow{padding:18px 14px}
  .belka-gorna{padding:0 14px;gap:12px}
  .karta-pytanie{padding:20px 18px 0}
  .stopka-karty{margin:auto -18px 0;padding:14px 18px}
  .duza-liczba{font-size:40px}
  .slupek{grid-template-columns:96px minmax(0,1fr) 30px}

  /* Szata viktor.com na telefonie: belka u gory bez menu, menu na dole ekranu
     z ikona nad podpisem (regula `frontend.md`: ikona nigdy sama). */
  /* ⚠️ Bez rozmycia tla: `backdrop-filter` tworzy blok zawierajacy dla elementow
     przypietych, wiec dolne menu (potomek belki) ladowalo u gory ekranu. */
  .szata-v .belka-gorna{position:sticky;top:0;margin:0;border-radius:0;border-width:0 0 1px;
    height:58px;padding:0 8px 0 14px;box-shadow:none;background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .szata-v .belka-gorna .szukajka{display:none}
  .szata-v .zglos-uwage span{display:none}
  .szata-v .zglos-uwage{width:40px;padding:0;justify-content:center}
  .menu-gorne{position:fixed;left:0;right:0;bottom:0;z-index:70;height:auto;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:#fff;
    border-top:1px solid var(--obramowanie);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
  .pozycja-menu{flex-direction:column;justify-content:center;gap:4px;height:54px;padding:0 2px;
    border-radius:14px;font-size:10.5px;position:relative;width:100%}
  .pozycja-menu>i:first-child{display:block;font-size:17px}
  /* ⚠️ Waga selektora: arkusz ikon (all.min.css) laduje sie PO naszym i jego
     `.fa-solid{display:inline-block}` wygrywal z samym `.strzalka-menu`. */
  .pozycja-menu .strzalka-menu{display:none}
  .szata-v .pozycja-menu.teraz{background:var(--marka-50);color:var(--granat)}
  .pozycja-menu .licznik{position:absolute;top:1px;right:calc(50% - 24px);min-width:17px;height:16px;
    padding:0 4px;font-size:9.5px;background:var(--marka);color:#fff}
  .pozycja-menu:has(.podpis-krotki) .podpis-menu{display:none}
  .podpis-krotki{display:inline}
  .menu-grupy{display:flex}
  .menu-grupy .panel-rozwijany{position:fixed;left:10px;right:10px;top:auto;bottom:80px;width:auto}
  .szata-v .menu-rozwijane:not(.menu-grupy) .panel-rozwijany{position:fixed;left:10px;right:10px;top:64px;width:auto}
  .szata-v .plocho{padding:18px 16px 110px;overflow-x:auto}
  /* Zamkniete listy rozwijane nie moga poszerzac strony (zmierzone: 514 px przy 390). */
  .lista-wlasna:not([data-otwarta]) .opcje{display:none}
  .szata-v .naglowek-strony{padding:12px 0 18px;min-height:0}
  .szata-v .naglowek-strony::after{display:none}
  .szata-v .naglowek-strony::before{width:100%;height:220px;right:0;top:-40px}
  .szata-v .naglowek-strony h1{font-size:26px}
  .baner-pulpitu{grid-template-columns:minmax(0,1fr);padding:28px 22px;border-radius:24px;gap:0}
  .ilustracja-banera{display:none}
  .szata-v .baner-pulpitu h1{font-size:28px}
  .szata-v .naglowek-listy .fakty-w-linii{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .szata-v .naglowek-listy .fakty-w-linii>div,.szata-v .naglowek-listy .fakty-w-linii>div:first-child{padding:0;border-right:0}
  .szata-v .naglowek-listy .wartosc{font-size:22px}
  .szata-v .karta-pytanie{padding:22px 20px 0}
  .szata-v .duza-liczba{font-size:42px}
  .szata-v .plocho>.karta,.szata-v .plocho>main>.karta{padding:20px 18px}
}