/* PALETA — JEDNA NA CZTERY EKRANY (v724)

   Etap 1 zlecenia portalowego. Do v723 te same nazwy mialy TRZY rozne
   zestawy wartosci: panel, portal (+ekran logowania) i ekran linku.
   Dwanascie tokenow roznilo sie wartoscia, trzy byly drugimi nazwami
   tego samego koloru. Rozjazd nie byl decyzja — byl wynikiem tego, ze
   kazdy ekran powstawal osobno.

   ZRODLEM SA WARTOSCI PANELU. Ten plik jest ich kopia, a nie drugim
   zrodlem prawdy: test-paleta-portalu.js porownuje go z :root
   panelu token po tokenie i czerwieni sie przy pierwszym rozjezdzie.
   Kopia bez licznika rozjechalaby sie przy pierwszej poprawce jednej
   ze stron — ten projekt ma na to dowody przy odmianie (v650)
   i przy skladaniu polskich znakow.

   --tlo GO TU NIE MA I TO JEST DECYZJA, NIE PRZEOCZENIE (D-664).
   Płótno klienta jest o ton glebsze niz płótno panelu:
     klient (portal, logowanie, link)  #f4f1ee — powod z v590: biala
       karta na prawie bialym tle rozni sie o ~2% i znika; zmierzone
       odciecie karty 13,4 punktu jasnosci;
     panel                            #faf8f6 — odciecie 6,6 punktu,
       ledwo nad progiem ~5 z v571; v439 nazwala przyciemnienie plotna
       panelu decyzja odlozona i taka ono zostaje.
   Kazdy ekran deklaruje wiec --tlo u siebie, a straznik zna ten
   jeden wyjatek i liste plikow po obu stronach.

   KOLEJNOSC LADOWANIA: ten plik idzie PRZED stylami strony. Wyjatki
   portalu (--pt-*) i --tlo stoja w :root strony, czyli pozniej,
   wiec nadpisuja go swiadomie.

   KONCE LINII: LF.                                                  */

:root{
  --karta:#fff;
  --tekst:#222127;
  --szary:#56515a;
  --linia:#e4ded6;
  --linia-cicha:rgba(53,40,30,.07);
  --akcent:#6c54d9;
  --tlo2:#eeebe4;
  --akcent-tlo:#f0edfb;
  --na-akcencie:#fff;
  --alarm:#a94747;
  --alarm-tlo:#fef2f2;
  --cien:0 1px 3px rgba(53,56,63,.07);
  --cien-uniesienie:0 1px 2px rgba(53,56,63,.06), 0 4px 12px rgba(53,56,63,.08);
  --cien-uniesienie-mocny:0 2px 4px rgba(53,56,63,.06), 0 14px 32px rgba(53,56,63,.14);
  --tlo3:#f7f3ef;
  --msc-kreska:#c9b9a6;
  --w-trakcie-tlo:#eef4fb;
  --info:#2a66d9;
  --ok:#087b70;
  --ok-tlo:#ecfdf5;
  --pole:#fff;
  --pole-ramka:#d5cabc;
  --o1:4px;
  --o2:8px;
  --o3:12px;
  --o4:16px;
  --o5:20px;
  --o6:24px;
  --o7:32px;
  /* Kolor zaznaczenia rysunku na materiale. Panel i portal mialy go
     w tej samej wartosci i w dwoch osobnych blokach `:root` — to nie
     byl wyjatek portalu, tylko token wspolny stojacy w dwoch
     miejscach. Wspolny kod rysowania (`material.js`) czyta go na
     obu ekranach.                                                */
  --zazn:#ff2d2d;
  /* Przyciemnienie tla pod oknem. Panel mial ten token od dawna,
     portal i ekran linku wpisywaly rgba Z REKI — i kazdy inne.    */
  --naklad:rgba(53,56,63,.45);
  /* KROJ INTERFEJSU. Do v726 stal wpisany z reki w czterech blokach
     `body` i w dwoch wariantach: panel mial `Inter`, portal i ekran
     linku `Roboto`. Pierwszy krok listy jest ten sam, wiec na Apple
     nikt tego nie widzial — a na Androidzie i Windowsie te same
     zdania mialy dwa kroje. Zrodlem jest panel.                  */
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Arial,sans-serif;
}

/* ===== OKNO — JEDEN PRZEPIS NA CZTERY EKRANY (v726) =====

   Komplet okien (`powiadom`, `potwierdz`, `zapytajOTekst`,
   `pokazDoSkopiowania`) mieszka od v724 w `klocki.js` i jest wolany
   z czterech ekranow. Jego WYGLAD musial dojechac razem z nim —
   inaczej okno w portalu bylo by nieostylowana kartka.

   TA NAZWA NALEZY DO MALEGO MODALA, NIE DO PRZEGLADARKI MATERIALU.
   Zmierzone przed zmiana: `.nakladka` i `.okno` staly w trzech plikach
   i nie byly ta sama rzecza — panel 440 px (modal), portal 720 px
   i ekran linku 820 px (PRZEGLADARKA materialu, z przewijaniem).
   Kryterium wlasciciela („czy poprawka w panelu POWINNA dosiegnac
   portalu?") rozstrzyga: poprawka modala nie ma prawa zmieniac rozmiaru
   przegladarki materialu. Przegladarka dostala wiec przedrostek
   `pt-`, a wspolna nazwa zostala przy modalu.

   Wartosci sa KOPIA PANELU, tak samo jak paleta wyzej — panel zostaje
   zrodlem, a straznik porownuje regula po regule.                   */
.nakladka{position:fixed;inset:0;background:var(--naklad);display:flex;
  align-items:center;justify-content:center;z-index:500;padding:20px}
.okno{background:var(--karta);border-radius:20px;padding:var(--o6);max-width:440px;width:100%;
  box-shadow:var(--cien-uniesienie-mocny)}
.okno h3{margin:0 0 12px;font-size:18px}
.okno p{margin:0 0 16px;font-size:14px;color:var(--szary);line-height:1.55}
.okno .btn{margin-right:8px}
.pole{position:relative}
.pole label{display:block;text-transform:uppercase;
  color:var(--szary);margin-bottom:5px}
.kopia-rzad{display:flex;gap:var(--o1);align-items:stretch}
.kopia-rzad input{flex:1 1 auto;min-width:0}
.kopia-rzad .btn{flex:none;white-space:nowrap}
/* Element schowany — jedna nazwa i jedno zachowanie. Portal i ekran
   logowania mialy wlasne kopie, jedna BEZ !important (v726). */
.ukryty{display:none !important}

/* ===== PODLOZE — CZTERY EKRANY STOJA NA TYM SAMYM (v726) =====

   Etap 2 zlecenia portalowego, druga polowa: 26 wspolnych selektorow
   o innej tresci i 6 kopii doslownych, przeniesionych tu z Etapu 1.

   KRYTERIUM WLASCICIELA: „czy poprawka w panelu POWINNA dosiegnac
   portalu?". Jesli tak — regula schodzi TUTAJ i zyje raz. Jesli nie,
   bo pod ta sama nazwa stoi co innego — nazwa u klienta dostaje
   przedrostek `pt-`, a wspolna zostaje przy panelu. Tak wlasnie
   rozstrzygnela sie `.nakladka` (modal) kontra `.pt-nakladka`
   (przegladarka materialu) wyzej.

   Kazdy ekran dalej DOKLADA to, co u niego inne — panel `.karta`
   dostaje `overflow:hidden`, ekran linku wlasny odstep. Dokladanie
   jest jawne i lezy w pliku ekranu; wspolna czesc lezy tutaj.
   Kolejnosc ladowania to gwarantuje: ten plik idzie PIERWSZY.     */
*{box-sizing:border-box}
body{margin:0;background:var(--tlo);color:var(--tekst);font:15px/1.5 var(--font-ui)}

/* KARTA — biala powierzchnia z obwodka i cieniem. Stala w czterech
   plikach w czterech brzmieniach (promien 16 albo 20, obwodka
   `--linia` albo `--linia-cicha`, cien wlasny albo z tokenu).     */
.karta{background:var(--karta);border:1px solid var(--linia-cicha);border-radius:20px;
  box-shadow:var(--cien-uniesienie)}

/* PASEK SRODOWISKA TESTOWEGO (v592) — DOSLOWNIE ten sam pas na
   kazdym ekranie: ma odroznic podglad od produkcji, a pomylka
   kosztuje wpisanie prawdziwych danych do bazy, ktora zniknie przy
   restarcie. Panel dokłada `position:sticky`, klient — srodkowanie. */
#pasek-srodowiska{
  background:repeating-linear-gradient(135deg,#8a4b00 0 14px,#7a4200 14px 28px);
  color:#fff; padding:9px 16px; font-size:13px; line-height:1.45;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
#pasek-srodowiska strong{letter-spacing:.09em; font-weight:700; white-space:nowrap}
#pasek-srodowiska span{opacity:.93}

/* ===== EKRANY KLIENTA — JEDEN PASEK, JEDNA KOLUMNA, JEDNA BRAMKA =====

   To sa reguly, ktore u klienta znacza CO INNEGO niz w panelu, wiec
   maja przedrostek zamiast wspolnej nazwy:
     `header` w panelu ma stala wysokosc `--h-naglowka` i siedzi nad
       warsztatem; u klienta jest paskiem czytania, przyklejonym,
       z cichsza kreska;
     `main` w panelu to blat na 1240 px; u klienta kolumna do
       czytania. Do v725 portal mial 900 px, ekran linku 860, a nikt
       nie umial powiedziec dlaczego — teraz jest jedna liczba.  */
.pt-pasek{
  background:var(--karta); border-bottom:1px solid var(--linia-cicha);
  padding:13px 22px; display:flex; align-items:center; gap:14px;
  box-shadow:0 1px 2px rgba(40,35,30,.03);
  position:sticky; top:0; z-index:20;
}
.pt-kolumna{max-width:900px; margin:0 auto; padding:30px 22px 70px}
/* BEZPIECZNY OBSZAR (v872). Portal deklaruje `viewport-fit=cover`, wiec na
   iOS `env()` przestaje byc zerem: boki za wcieciem aparatu (telefon obrocony),
   dol nad paskiem domowym. `max()` zostawia dotychczasowe odstepy tam, gdzie
   wciecia nie ma — `link.html` (bez `cover`) renderuje sie bajt w bajt tak samo. */
.pt-kolumna{padding-left:max(22px, env(safe-area-inset-left, 0px));
  padding-right:max(22px, env(safe-area-inset-right, 0px));
  padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px))}
/* BRAMKA — waska kolumna na jedna karte: ekran logowania i pole hasla
   przy linku. Dwie strony mialy to samo 420 px w dwoch miejscach. */
.pt-brama{max-width:420px; width:100%; position:relative}
@media (max-width:700px){
  .pt-kolumna{padding:20px max(14px, env(safe-area-inset-right, 0px)) calc(60px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px))}
  .pt-pasek{padding:11px 14px}
}

/* ===== PRZYCISK — JEDEN NA CZTERY EKRANY (v726) =====

   Nie jest to wybor estetyczny: wspolny kod okien z `klocki.js`
   emituje `class="btn"`, `btn pelny` i `btn grozny` na WSZYSTKICH
   czterech ekranach. Dopoki przepis stal tylko w panelu, te same
   okna u klienta rysowaly sie innym przyciskiem — portal mial swoj
   (akcent, promien 8), ekran linku swoj (pigulka, promien 999).
   Wartosci sa panelu, bo panel jest wzorcem.                     */
button{font:inherit;cursor:pointer}
.btn{padding:9px 16px;border:1px solid var(--linia);background:var(--karta);
  color:var(--tekst);border-radius:12px;
  font-weight:500;transition:border-color .15s,box-shadow .15s,transform .06s,background .15s}
.btn:hover{border-color:var(--akcent);box-shadow:var(--cien-uniesienie)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.btn.pelny{background:var(--akcent);color:var(--na-akcencie);border-color:var(--akcent);
  box-shadow:var(--cien-uniesienie)}
.btn.pelny:hover{box-shadow:var(--cien-uniesienie-mocny)}
/* DZIALANIE NISZCZACE — CZERWONE, I KONIECZNIE PO `.pelny` (v461).
   Obie reguly maja te sama sile, wiec wygrywa pozniejsza. Kolejnosc
   w arkuszu jest tu czescia dzialania, nie porzadkiem.           */
.btn.grozny{background:var(--alarm);color:#fff;border-color:var(--alarm)}
.btn.grozny:hover{background:var(--alarm);filter:brightness(.92)}

/* PIGULKA I PUSTY STAN — te same slowa znacza to samo po obu
   stronach, wiec i wygladac maja tak samo.                       */
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;
  background:var(--tlo2);color:var(--tekst);white-space:nowrap}
.pusto{padding:44px;text-align:center;color:var(--szary)}

/* PLAKIETKA STANU MATERIALU (v431: „te same u nas i u klienta").
   Portal wpisywal cztery barwy stanu HEKSAMI — czyli drugi raz to
   samo, co stoi w tokenach, i bez szansy na wspolna poprawke.
   Ksztalt plakietki KAZDA strona dokłada u siebie: panel bierze go
   z reguly zbiorczej etykiet (v722), portal ze swojej — to jest
   dokładka wymieniona z powodu, nie rozjazd.                     */
.mt-status{display:inline-block;line-height:1;white-space:nowrap}
.mt-status.szkic{background:var(--tlo2);color:var(--szary)}
.mt-status.czeka{background:var(--w-trakcie-tlo);color:var(--info)}
.mt-status.ok{background:var(--ok-tlo);color:var(--ok)}
.mt-status.poprawki{background:var(--alarm-tlo);color:var(--alarm)}

/* EKRAN MOWI, GDY PLIK NIE DOCHODZI (v822) — jeden przepis na cztery
   ekrany. Zdanie dla klienta stoi w `klocki.js`; tu jest wylacznie to,
   jak ma wygladac. Blok jest CICHY, nie alarmowy: to nie jest awaria
   po stronie czlowieka, ktory kliknal, i nie ma powodu na niego
   krzyczec. Wysokosc `min-height` bierze sie stad, ze wchodzi
   w miejsce kadru — bez niej okno podskakiwaloby przy pokazaniu. */
.mat-blad{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--o3);min-height:160px;padding:var(--o5);text-align:center;
  background:var(--tlo2);border:1px solid var(--linia-cicha);border-radius:20px}
.mat-blad-zdanie{margin:0;font-weight:600;color:var(--tekst)}
.mat-blad-rada{margin:0;font-size:var(--sz2);color:var(--szary);max-width:38em}
.mat-blad-ponow{padding:var(--o2) var(--o4);border-radius:999px;cursor:pointer;
  border:1px solid var(--linia);background:var(--karta);color:var(--tekst)}

/* DYMEK ROZMOWY + IKONA KOPIOWANIA (v834). Zyje tu, nie w <style> panelu,
   zeby nie rosl licznik "regul starego jezyka" (test-idiom-pol-i-etykiet.js
   zamraza go na 1744 — kazda nowa regula wpisana wprost do index.html
   liczy sie jako dolozenie do starego jezyka, niezaleznie od tego, czy jest
   z nim zwiazana). Dzis uzywa go wylacznie panel (asystent AI nie istnieje
   w portalu ani na ekranie linku), ale to jest ten sam wzorzec migracji,
   co pozostale reguly w tym pliku — nowy kod idzie tu, stary zostaje.

   `.msg-wrap` niesie wyrownanie (lewo/prawo) i szerokosc; `.msg` sama —
   wylacznie tresc. Przycisk kopiowania stoi POZA `.msg`, bo jej
   innerHTML/textContent podmienia sie wielokrotnie w trakcie tury
   (Liczę… -> odpowiedz, blad, Ponow) — zagniezdzony w niej zniklby przy
   pierwszej takiej podmianie. WIDOCZNY ZAWSZE, TAKZE NA DOTYKU (zlecenie
   wprost tego wymaga, zaden `:hover`) — pole dotyku min. 44px liczy sie
   z paddingu, nie z ikony (ikona zostaje 16px).

   `min-width:0` DOPISANE v857: `.msg-wrap` jest flex-dzieckiem
   `.ai-tresc` (column) i bez tego `max-width:78%` nie dziala, gdy
   tresc (`.msg`) jest szersza niz 78% — flex-dziecko domyslnie nie
   kurczy sie ponizej szerokosci wlasnej tresci. Ten sam mechanizm,
   co przy `.ai-wpis textarea` i `.potw table`/`.jb-siatka` (v560). */
.msg-wrap{display:flex;flex-direction:column;gap:4px;max-width:78%;min-width:0}
.msg-wrap.ja{align-self:flex-end;align-items:flex-end}
.msg-wrap.ai{align-self:flex-start;align-items:flex-start}
.msg-kopiuj{display:flex;align-items:center;gap:5px;min-width:44px;min-height:44px;
  padding:6px 10px;border:0;border-radius:8px;background:transparent;
  color:var(--szary);font:inherit;font-size:12px;cursor:pointer}
.msg-kopiuj .ikona{width:16px;height:16px;flex:none}
.msg-kopiuj:hover{background:var(--tlo2);color:var(--tekst)}
.msg-kopiuj:disabled{opacity:.35;cursor:default;pointer-events:none}

/* SORTOWANIE RADARU (v858, wzor Google Drive). Zyje tu, nie w <style>
   panelu, z tego samego powodu co `.msg-wrap` wyzej — test-idiom-pol-i
   -etykiet.js zamraza liczbe regul „starego jezyka" w index.html.
   Dwa przyciski: pole (otwiera `.st-menu` z czterema wyborami — ten sam
   budowniczy co `pokazMenuStatusow`) i kierunek (sama ikona, odwraca sie
   kliknieciem). `.btn` na mobile ma juz `min-height:44px` z globalnej
   reguly „przyciski ogolnie: min touch target 44px" — nic tu nie trzeba
   dopisywac.                                                          */
.rd-sortuj{display:flex;align-items:center;gap:var(--o3);margin:0 0 var(--o3)}
.rd-sortuj .btn{font-size:13px;padding:7px 12px;display:flex;align-items:center;gap:6px}
.rd-sortuj .ikona{width:14px;height:14px;flex:none;transition:transform .12s}
.rd-sortuj .ikona.obr{transform:rotate(180deg)}

/* v858 — TYTUL NA WLASNEJ LINII, PRZYCISKI RAZEM POD NIM (naprawa
   `.rd-pas` z indeksu — zrzut wlasciciela, przycisk „Nowy folder" uciety
   prawa krawedzia telefonu). `h2` bierze cala szerokosc (jedyny sposob,
   zeby DWA przyciski obok siebie mialy gdzie stanac), przyciski dziela
   reszte rzedu po rowno — ten sam wzorzec „schodzi tylko wtedy, gdy
   musi" co przy `.rd-prawo` w index.html: na szerokim ekranie ta regula
   nic nie zmienia, bo `.rd-pas` (flex-wrap:wrap, index.html) sie nie
   zawija.                                                              */
@media (max-width:700px){
  #w-radar .rd-pas h2{flex:1 0 100%}
  #w-radar .rd-pas .btn{flex:1}
  /* v859 — pas „Sortuj" stykal sie z polem szukania: zmierzone przy 390 px
     odstep 0 (szukanie ma inline margin:10px 0 0, sortowanie margin:0 0
     --o3). Odstep z istniejacego tokenu, ten sam co pod pasem sortowania. */
  #w-radar .rd-sortuj{margin-top:var(--o3)}
}

/* OFERTOWANIE (v860, ZLECENIE-OFERTOWANIE.md, zasada B8). Wzor:
   docs/makiety/ofertowanie-prosto.html — rozmowa jak w aplikacji Claude
   na iPhonie, w jezyku wizualnym JOHNY (kolory wylacznie z tokenow, wiec
   oba motywy dzialaja same). Ekran lezy na CALYM kadrze, nad naglowkiem
   aplikacji: wysokosc i przesuniecie z `--ai-kadr-*`, ktore liczy
   `aiGeometria` z visualViewport (lekcja v584: `dvh` nie jest odpowiedzia
   na klawiature). Wyjscie do JOHNY stoi w szufladzie ☰.
   Pasek 56 px, ikony 44×44, pole pisania od 52 px, przyciski w polu
   36×36, dymek wlasciciela do 85% szerokosci, odpowiedz na cala szerokosc.
   Przy 390 px nic nie jest szersze od ekranu: kazdy element flex ma
   `min-width:0`, a dlugie slowa lamie `overflow-wrap:anywhere`.        */
body[data-widok="oferty"]{overflow:hidden}
body[data-widok="oferty"] .btabs,
body[data-widok="oferty"] #ai-fab{display:none}
.of-ekran{position:fixed;left:0;right:0;top:var(--ai-kadr-top, 0px);
  height:var(--ai-kadr-h, 100dvh);z-index:22;background:var(--tlo);
  color:var(--tekst);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top, 0px)}
.of-ekran.ukryty{display:none}
.of-pasek{display:flex;align-items:center;gap:6px;height:56px;flex:none;
  padding:0 var(--o2);background:var(--karta);border-bottom:1px solid var(--linia)}
.of-ik{width:44px;height:44px;border-radius:50%;border:0;background:transparent;
  color:var(--tekst);display:grid;place-items:center;flex:none;cursor:pointer;padding:0}
.of-ik .ikona{width:22px;height:22px}
.of-ik:hover{background:var(--tlo2)}
.of-tytul{flex:1;min-width:0;font-weight:600;font-size:16px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.of-grupa{display:flex;background:var(--tlo2);border-radius:999px;padding:2px;flex:none}
.of-grupa .of-ik{height:40px}
.of-tresc{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding:var(--o3) var(--o4) var(--o4)}
.of-witaj,.of-wiad{max-width:760px;margin:0 auto}
.of-witaj{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:52vh;padding:var(--o5) var(--o3)}
.of-witaj.ukryty{display:none}
.of-pj{border:1px solid var(--linia);border-radius:999px;padding:5px 12px;
  font-size:13px;color:var(--szary);margin-bottom:var(--o4);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-witaj h2{font-size:28px;font-weight:600;margin:0 0 6px;text-wrap:balance}
.of-witaj p{margin:0;color:var(--szary);font-size:15px}
.of-wiad{display:flex;flex-direction:column;gap:var(--o4);padding-bottom:var(--o2)}
.of-ja{align-self:flex-end;max-width:85%;min-width:0;background:var(--akcent);
  color:var(--na-akcencie);border-radius:20px;border-bottom-right-radius:6px;
  padding:10px 14px;font-size:16px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.of-as{align-self:stretch;min-width:0;font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.of-as pre,.of-as code{white-space:pre-wrap;overflow-wrap:anywhere}
.of-czas{font-size:12px;color:var(--szary);margin-top:4px}
.of-ja + .of-czas{align-self:flex-end}
.of-stan{font-size:13px;color:var(--szary);margin-top:6px}
.of-stan.blad{color:var(--alarm)}
.of-pisze{display:inline-flex;gap:4px;padding:6px 0}
.of-pisze i{width:7px;height:7px;border-radius:50%;background:var(--szary);
  animation:ofPisze 1s infinite}
.of-pisze i:nth-child(2){animation-delay:.15s}
.of-pisze i:nth-child(3){animation-delay:.3s}
@keyframes ofPisze{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.of-pisze i{animation:none}}
.of-stopka{flex:none;padding:var(--o2) var(--o3) calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--tlo);border-top:1px solid var(--linia-cicha)}
.of-pole{display:flex;align-items:flex-end;gap:6px;max-width:760px;margin:0 auto;
  min-height:52px;padding:var(--o2);background:var(--pole);
  border:1px solid var(--pole-ramka, var(--linia));border-radius:26px}
.of-pole textarea{flex:1;min-width:0;background:none;border:0;color:var(--tekst);
  font:inherit;font-size:16px;line-height:1.35;padding:8px 4px;resize:none;
  max-height:160px;outline:none}
.of-plus,.of-mik,.of-wyslij{width:36px;height:36px;border-radius:50%;border:0;
  display:grid;place-items:center;flex:none;cursor:pointer;padding:0}
.of-plus{background:var(--tlo2);color:var(--tekst)}
.of-mik{background:transparent;color:var(--szary)}
.of-mik.nagrywa{color:var(--alarm)}
.of-wyslij{background:var(--akcent);color:var(--na-akcencie)}
.of-plus .ikona,.of-mik .ikona,.of-wyslij .ikona{width:18px;height:18px}
.of-plus:disabled,.of-wyslij:disabled{background:var(--tlo2);color:var(--szary);
  opacity:.6;cursor:default}
.of-szuflada,.of-arkusz{position:absolute;inset:0;z-index:5}
.of-szuflada.ukryty,.of-arkusz.ukryty{display:none}
.of-zaslona{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.of-panel{position:absolute;top:0;bottom:0;left:0;width:86%;max-width:330px;
  background:var(--karta);border-right:1px solid var(--linia);display:flex;
  flex-direction:column;gap:var(--o1);
  padding:calc(var(--o3) + env(safe-area-inset-top, 0px)) var(--o3) calc(var(--o3) + env(safe-area-inset-bottom, 0px))}
.of-szukaj{height:44px;border-radius:999px;border:1px solid var(--pole-ramka, var(--linia));
  background:var(--pole);color:var(--tekst);font:inherit;font-size:16px;padding:0 14px;
  width:100%;min-width:0}
.of-nowa-w,.of-wyjscie,.of-opcja,.of-it{display:flex;align-items:center;gap:10px;
  width:100%;min-height:44px;padding:0 var(--o2);border:0;border-radius:12px;
  background:transparent;color:var(--tekst);font:inherit;font-size:15px;
  text-align:left;cursor:pointer}
.of-nowa-w{font-weight:600}
.of-nowa-w .ikona,.of-wyjscie .ikona,.of-opcja .ikona{width:18px;height:18px;flex:none}
.of-nowa-w:hover,.of-wyjscie:hover,.of-opcja:hover,.of-it:hover{background:var(--tlo2)}
.of-lista{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.of-etyk{color:var(--szary);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin:var(--o4) var(--o2) var(--o1)}
.of-it.akt{background:var(--akcent-tlo, var(--tlo2))}
.of-it{min-height:52px}
.of-it-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.of-it .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-it .m{color:var(--szary);font-size:12px;font-variant-numeric:tabular-nums}
.of-it .ikona{width:14px;height:14px;flex:none;color:var(--szary)}
.of-pusto{color:var(--szary);font-size:13px;padding:var(--o2)}
.of-wyjscie{border-top:1px solid var(--linia);border-radius:0;margin-top:var(--o1)}
.of-arkusz-panel{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;
  background:var(--karta);border-radius:20px 20px 0 0;display:flex;flex-direction:column;
  padding:var(--o3) var(--o3) calc(var(--o3) + env(safe-area-inset-bottom, 0px))}
.of-czerwona{color:var(--alarm)}
/* Na komputerze pasek boczny JOHNY zostaje (z-index 40, szerokosc 96 px
   + marginesy = 132 px, ta sama liczba co `body.z-paskiem #app`) —
   Ofertowanie zaczyna sie obok niego, nie pod nim.                   */
@media (min-width:1000px){ body.z-paskiem .of-ekran{left:132px} }

/* ARTEFAKTY (v861, etap 2). Karta w rozmowie i podglad na pelnym ekranie
   jak w Claude. Podglad lezy NAD rozmowa w tym samym kadrze (--ai-kadr-*),
   tresc dokumentu na bialym tle — to jest wydruk oferty, nie ekran JOHNY,
   wiec nie dziedziczy motywu.                                         */
.of-art{display:flex;align-items:center;gap:var(--o3);width:100%;min-height:64px;
  margin:var(--o2) 0 0;padding:var(--o3) 14px;border:1px solid var(--linia);
  border-radius:16px;background:var(--karta);color:var(--tekst);font:inherit;
  text-align:left;cursor:pointer}
.of-art:hover{border-color:var(--akcent)}
.of-art-ik{width:42px;height:38px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--akcent-tlo, var(--tlo2));color:var(--akcent);font-size:11px;font-weight:700}
.of-art-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.of-art-t b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-art-t span{color:var(--szary);font-size:13px}
.of-art .ikona{width:16px;height:16px;flex:none;color:var(--szary)}
.of-podglad{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;background:var(--tlo)}
.of-podglad.ukryty{display:none}
.of-ramka{flex:1;min-height:0;width:100%;border:0;background:#fff}
.of-wersje{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--o1) 0 calc(var(--o2) + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--linia);font-size:14px;color:var(--szary);font-variant-numeric:tabular-nums}
#of-p-wstecz .ikona{transform:rotate(180deg)}
.of-wersje .of-ik:disabled{opacity:.3;cursor:default}

/* ZALACZNIKI I USTAWIENIA PROJEKTU (v862, etap 3). Chip pliku nad polem
   pisania i nad dymkiem wlasciciela; promienie wylacznie ze skali. */
.of-zal{display:flex;flex-wrap:wrap;gap:6px;max-width:760px;margin:0 auto}
.of-zal:not(:empty){margin-bottom:var(--o2)}
.of-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;
  padding:4px 6px 4px 10px;border:1px solid var(--linia);border-radius:999px;
  background:var(--karta);color:var(--tekst);font-size:13px;text-decoration:none}
.of-chip span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-chip .ikona{width:14px;height:14px;flex:none;color:var(--szary)}
.of-chip.blad{border-color:var(--alarm);color:var(--alarm)}
.of-chip.akcent{border-color:var(--akcent);color:var(--akcent);padding-right:10px}
.of-chip-x{width:28px;height:28px;border:0;border-radius:999px;background:transparent;
  color:var(--szary);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.of-m .of-chip{align-self:flex-end;margin-bottom:4px}
.of-przel{margin-left:auto;color:var(--szary);font-size:13px}
.of-opcja[aria-pressed="true"] .of-przel{color:var(--akcent)}
.of-zebatka{display:grid;place-items:center;width:36px;height:36px;flex:none;color:var(--szary)}
.of-zebatka .ikona{width:16px;height:16px}
.of-ustaw-tresc{flex:1;min-height:0;overflow-y:auto;padding:var(--o4);display:flex;flex-direction:column;
  gap:var(--o2);max-width:760px;width:100%;margin:0 auto}
.of-u-pole{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--tekst);background:var(--pole);
  border:1px solid var(--pole-ramka, var(--linia));border-radius:12px;padding:10px 12px}
textarea.of-u-pole{resize:vertical;line-height:1.45}
.of-ustaw-tresc .of-etyk{margin:var(--o3) 0 0}
.of-ustaw-tresc a.n{color:var(--tekst)}

/* KONEKTORY W USTAWIENIACH PROJEKTU (v863) */
.of-kon{display:flex;align-items:center;gap:var(--o3);padding:var(--o2) 0;border-bottom:1px solid var(--linia-cicha)}
.of-kon-t{flex:1;min-width:0;display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.of-kon-t input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--akcent)}
.of-kon-t > span{min-width:0;display:flex;flex-direction:column;gap:2px}
.of-kon-t b{font-weight:600;font-size:15px}
.of-kon-t .m{color:var(--szary);font-size:13px}
.of-kon .btn{flex:none}
/* Linia narzedzia nad odpowiedzia (v865): cicha, rozwijana. */
.of-narz{align-self:flex-start;max-width:85%;margin:0 0 var(--o1);font-size:13px;color:var(--szary)}
.of-narz summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;min-height:24px}
.of-narz summary::-webkit-details-marker{display:none}
.of-narz summary .ikona{width:14px;height:14px;flex:none;color:var(--ok)}
.of-narz.blad summary .ikona{color:var(--alarm)}
.of-narz.pusty summary .ikona{color:var(--szary)}
.of-narz summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-narz summary b{font-weight:600;color:var(--tekst)}
.of-narz-roz{padding:var(--o1) 0 var(--o1) 20px;display:flex;flex-direction:column;gap:var(--o1)}
.of-narz-roz .m{font-weight:600}
.of-narz-roz pre{margin:0;padding:var(--o2);background:var(--tlo2);border-radius:8px;white-space:pre-wrap;word-break:break-word;font-size:12px;max-height:200px;overflow:auto}
/* Status konektora (v864): jedno z trzech slow, kolor niesie stan. */
.of-kon-stan{font-weight:600;margin-right:var(--o1)}
.of-kon-stan.polaczony{color:var(--ok)}
.of-kon-stan.blad{color:var(--alarm)}
.of-kon-stan.brak_dostepu{color:var(--szary)}
.of-kon-klucz{display:flex;gap:var(--o2);flex:none;align-items:center}
.of-kon-klucz input{width:150px;min-width:0;font-size:16px;padding:var(--o2);border:1px solid var(--pole-ramka);border-radius:12px;background:var(--pole);color:var(--tekst)}
@media (max-width:700px){.of-kon{flex-wrap:wrap}.of-kon-klucz{width:100%}.of-kon-klucz input{flex:1}}

/* OFERTOWANIE NA iPHONIE (v871, ZLECENIE-v871.md). Wszystko pod
   `#w-oferty`, bo zmierzona przyczyna krzywych ikon byla w KASKADZIE:
   ogolne `[data-ik]{display:inline-flex}` i `[data-ik] .ikona{17px}`
   stoja w `index.html` PO tym pliku przy tej samej sile selektora,
   wiec wygrywaly z `.of-ik` — ikona 17 px lezala przy lewej krawedzi
   kolka (13,5 px od srodka, pomiar Playwright 390x844). Identyfikator
   w selektorze rozstrzyga to raz, bez `!important`.

   1. Kazdy przycisk ikonowy to kwadrat 40x40 z flex, ikona 20 px na
      srodku; w jednym rzedzie ta sama wysokosc i wspolna linia srodka.
   2. Margines boczny 16 px (`--o4`) albo wciecie systemowe, jesli
      wieksze — `max()` jak przy dolnym pasku aplikacji (`.btabs`). `env()` dziala na
      iOS wylacznie przy `viewport-fit=cover` — od v872 stoi on w znaczniku
      viewport calej aplikacji (w v871 wlaczany tylko na czas Ofertowania).
   3. Ustawienia: dzieci kolumny NIE kurcza sie. Pole instrukcji jako
      element flex w przewijanej kolumnie schodzilo do samego paddingu
      (20 px = „jedna ucieta linia"); teraz min. 8 linii, rosnie, po
      20 liniach przewija sie w srodku (22 px = padding 2x10 + ramka
      2x1, bo `*{box-sizing:border-box}`). „Zapisz" w stopce pod kolumna. */
#w-oferty .of-ik,#w-oferty .of-plus,#w-oferty .of-mik,#w-oferty .of-wyslij{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  gap:0;padding:0;flex:none}
/* Ogolne `button .ikona` dokleja margin-right 6 px, inline-block i
   vertical-align — stad ikona 3 px obok srodka i uciekajaca w pionie. */
#w-oferty .ikona{width:20px;height:20px;flex:none;margin:0;display:block;vertical-align:0}
#w-oferty .of-grupa .of-ik{height:40px}
#w-oferty .of-pasek{padding:0 max(var(--o4), env(safe-area-inset-right, 0px)) 0 max(var(--o4), env(safe-area-inset-left, 0px))}
#w-oferty .of-tresc{padding-left:max(var(--o4), env(safe-area-inset-left, 0px));
  padding-right:max(var(--o4), env(safe-area-inset-right, 0px))}
#w-oferty .of-stopka{padding:var(--o2) max(var(--o4), env(safe-area-inset-right, 0px))
  calc(var(--o2) + env(safe-area-inset-bottom, 0px)) max(var(--o4), env(safe-area-inset-left, 0px))}
#w-oferty .of-pole{min-height:0;padding:var(--o1);align-items:flex-end}
#w-oferty .of-pole textarea{min-height:40px;padding:9px 4px}
#w-oferty .of-panel{padding-left:max(var(--o4), env(safe-area-inset-left, 0px))}
#w-oferty .of-arkusz-panel{padding-left:max(var(--o4), env(safe-area-inset-left, 0px));
  padding-right:max(var(--o4), env(safe-area-inset-right, 0px))}
#w-oferty .of-ustaw-tresc{padding-left:max(var(--o4), env(safe-area-inset-left, 0px));
  padding-right:max(var(--o4), env(safe-area-inset-right, 0px))}
#w-oferty .of-ustaw-tresc > *{flex-shrink:0}
#w-oferty textarea.of-u-pole{resize:none;overflow-y:auto;
  min-height:calc(8 * 1.45em + 22px);max-height:calc(20 * 1.45em + 22px)}
#w-oferty .of-u-stopka{flex:none;background:var(--tlo);border-top:1px solid var(--linia-cicha);
  padding:var(--o2) max(var(--o4), env(safe-area-inset-right, 0px))
  calc(var(--o2) + env(safe-area-inset-bottom, 0px)) max(var(--o4), env(safe-area-inset-left, 0px))}
#w-oferty .of-u-stopka .btn{width:100%;max-width:760px;display:block;margin:0 auto}
#w-oferty .of-u-stopka .btn:disabled{opacity:.5;cursor:default}
/* Checkbox konektora 24x24; pierwsza linia nazwy ma ta sama wysokosc,
   wiec srodki pokrywaja sie przy `align-items:flex-start`.           */
#w-oferty .of-kon-t input{width:24px;height:24px;margin:0}
#w-oferty .of-kon-t b{line-height:24px}
/* Linia narzedzia: ikona 20 px na srodku linii tekstu o tej samej
   wysokosci.                                                         */
#w-oferty .of-narz summary{min-height:24px;line-height:20px}
/* WYBOR MODELU (v874, D-859). Etykieta w polu pisania: krotka nazwa
   i strzalka w dol, w tej samej wysokosci co przyciski obok (40 px).
   Pod odpowiedzia: model, czas, warianty „‹ 1 z 2 ›" i „Sprawdz w…".
   Model bez klucza w arkuszu: wyszarzony, z opisem „Brak klucza".   */
#w-oferty .of-model{flex:none;height:40px;max-width:96px;display:flex;align-items:center;
  gap:var(--o1);padding:0 var(--o2) 0 var(--o3);border:0;border-radius:20px;background:transparent;
  color:var(--szary);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#w-oferty .of-model span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#w-oferty .of-model .ikona{width:14px;height:14px;transform:rotate(90deg)}
#w-oferty .of-pod{display:flex;align-items:center;flex-wrap:wrap;gap:var(--o2);
  margin-top:var(--o1);font-size:12px;color:var(--szary)}
#w-oferty .of-pod .of-czas{margin-top:0}
#w-oferty .of-model-et{font-weight:600;color:var(--tekst)}
#w-oferty .of-warianty{display:inline-flex;align-items:center;gap:var(--o1)}
#w-oferty .of-warianty .of-ik{width:32px;height:32px}
#w-oferty .of-warianty .ikona{width:14px;height:14px}
#w-oferty .of-w-wstecz .ikona{transform:rotate(180deg)}
#w-oferty .of-warianty .of-ik:disabled{opacity:.3;cursor:default}
#w-oferty .of-sprawdz{min-height:32px;padding:0 var(--o3);border:1px solid var(--linia-cicha);
  border-radius:999px;background:transparent;color:var(--szary);font:inherit;font-size:12px;cursor:pointer}
#w-oferty .of-pomin{align-self:flex-start;font-size:12px;color:var(--szary);margin-bottom:var(--o1)}
#w-oferty .of-m-tytul{font-size:13px;font-weight:600;color:var(--szary);padding:var(--o2) var(--o3)}
#w-oferty .of-m-t{display:flex;flex-direction:column;min-width:0;text-align:left}
#w-oferty .of-m-opis{font-size:12px;color:var(--szary);font-weight:400}
#w-oferty .of-m-opcja .ikona{margin-left:auto;color:var(--akcent)}
#w-oferty .of-m-opcja:disabled{opacity:.5;cursor:default}
/* PAMIEC I EKSPORT (v876). Linia „✓ Zapamiętano" jak linia narzedzia
   (ta sama wysokosc, ikona 20 px), z przyciskiem cofniecia po prawej.
   Wiersz faktu: tresc do stukniecia (edycja), pod nia data i rozmowa
   zrodlowa jako link. Arkusz faktu: pole, zakres, dwa przyciski.      */
#w-oferty .of-pam{display:flex;align-items:center;gap:var(--o2);min-height:32px;margin:0 0 var(--o1);
  font-size:13px;color:var(--szary)}
#w-oferty .of-pam .ikona{width:20px;height:20px;flex:none;color:var(--ok)}
#w-oferty .of-pam .t{flex:1;min-width:0;overflow-wrap:anywhere}
#w-oferty .of-pam .t b{font-weight:600;color:var(--tekst)}
#w-oferty .of-pam.cofniete .t{text-decoration:line-through}
#w-oferty .of-pam.cofniete .ikona{color:var(--szary)}
#w-oferty .of-pam-cofnij{flex:none;min-height:32px;padding:0 var(--o3);border:1px solid var(--linia-cicha);
  border-radius:999px;background:transparent;color:var(--tekst);font:inherit;font-size:12px;cursor:pointer}
#w-oferty .of-pam-cofnij:disabled{color:var(--szary);cursor:default}
#w-oferty .of-fakt-w{display:flex;flex-direction:column;gap:var(--o1);padding:var(--o2) 0;
  border-bottom:1px solid var(--linia-cicha)}
#w-oferty .of-fakt-t{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  color:var(--tekst);font:inherit;font-size:15px;line-height:1.45;cursor:pointer;min-height:24px}
#w-oferty .of-fakt-w .m{font-size:12px;color:var(--szary)}
#w-oferty .of-fakt-zr{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--akcent);
  text-decoration:underline;cursor:pointer}
#w-oferty .of-pam-dodaj{align-self:flex-start;margin:var(--o2) 0 var(--o3)}
#w-oferty .of-pam-przel{flex:none;display:flex;align-items:flex-start;gap:var(--o2);padding:var(--o2) 0}
#w-oferty .of-fakt-panel{display:flex;flex-direction:column;gap:var(--o2)}
#w-oferty .of-fakt-panel textarea{min-height:calc(3 * 1.45em + 22px)}
#w-oferty .of-fakt-zakres{display:flex;gap:var(--o4);font-size:15px}
#w-oferty .of-fakt-zakres label{display:flex;align-items:center;gap:var(--o1);min-height:32px}
#w-oferty .of-fakt-guziki{display:flex;gap:var(--o2)}
#w-oferty .of-fakt-guziki .btn{flex:1}
#w-oferty .of-czerwona-t{color:var(--alarm)}
#w-oferty .of-fakt-h{font-size:13px;line-height:1.45;padding:var(--o1) 0;overflow-wrap:anywhere}
#w-oferty .of-fakt-h .m{color:var(--szary);font-size:12px}

/* ===== OFERTOWANIE v877: job w naglowku, archiwum, folder „Oferty" joba ===== */
#w-oferty .of-tytul-w{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
#w-oferty .of-tytul-w .of-tytul{flex:none}
#w-oferty .of-job{border:0;background:transparent;padding:0 2px;color:var(--akcent);font:inherit;font-size:12px;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-height:20px}
#w-oferty .of-filtry{display:flex;gap:var(--o2);align-items:center;flex-wrap:wrap}
#w-oferty .of-kiedy{height:40px;border-radius:999px;border:1px solid var(--pole-ramka, var(--linia));background:var(--pole, var(--karta));
  color:var(--tekst);font:inherit;font-size:16px;padding:0 var(--o3)}
#w-oferty .of-chip{height:40px;border-radius:999px;border:1px solid var(--linia);background:var(--karta);color:var(--tekst);
  font:inherit;font-size:13px;padding:0 var(--o3);cursor:pointer}
#w-oferty .of-chip.akt{background:var(--akcent-tlo, var(--tlo2));border-color:var(--akcent)}
#w-oferty .of-job-panel{display:flex;flex-direction:column;gap:var(--o2);max-height:85vh;overflow-y:auto}
#w-oferty .of-j-lista{display:flex;flex-direction:column;max-height:40vh;overflow-y:auto}
#w-oferty .of-j-klienci{display:flex;flex-direction:column;gap:var(--o2)}
#w-oferty .of-j-k{display:flex;align-items:center;gap:var(--o2);min-height:44px;font-size:15px}
#w-oferty .of-j-k input{width:20px;height:20px;accent-color:var(--akcent)}
.of-wysl{display:inline-flex;align-items:center;height:22px;padding:0 var(--o2);border-radius:999px;
  background:var(--ok-tlo, var(--tlo2));color:var(--ok, var(--tekst));font-size:12px;font-weight:600}
.jm-of{padding:var(--o3) 0;border-top:1px solid var(--linia-cicha, var(--linia))}
.jm-of-g{display:flex;align-items:center;gap:var(--o2);flex-wrap:wrap}
.jm-of-f{display:flex;flex-wrap:wrap;gap:var(--o2);margin-top:var(--o2)}
.jm-of-p{display:inline-flex;align-items:center;gap:var(--o1)}
.jm-of-fmt{font-size:13px;color:var(--szary);padding:0 var(--o2)}
.jm-of-pob{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--tekst)}
.jm-of-pob .ikona{width:20px;height:20px}
.jm-of-okno{width:min(1100px, 96vw);height:92vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.jm-of-pasek{display:flex;align-items:center;justify-content:space-between;gap:var(--o2);padding:var(--o2) var(--o3);
  border-bottom:1px solid var(--linia)}
.jm-of-pasek b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jm-of-ramka{flex:1;width:100%;border:0;background:#fff}
.jm-of-scena{flex:1;display:grid;place-items:center;overflow:auto;background:var(--tlo2)}
.jm-of-scena img{max-width:100%;max-height:100%}

/* ===== OFERTOWANIE v878: biblioteka case studies ===== */
#w-oferty .of-cs{display:flex;flex-direction:column;gap:var(--o2);padding:var(--o3) 0;border-bottom:1px solid var(--linia-cicha, var(--linia))}
#w-oferty .of-cs-t{display:flex;flex-direction:column;gap:2px;min-width:0}
#w-oferty .of-cs-t .m{color:var(--szary);font-size:12px}
#w-oferty .of-cs-g{display:flex;flex-wrap:wrap;gap:var(--o2);align-items:center}
#w-oferty .of-cs-ok{margin-left:auto}
/* Podglad dokumentu otwierany Z Biblioteki albo z Pamieci ma stanac NAD
   nimi (droga v878 zlapala podglad pod biblioteka): oba ekrany schodza
   warstwe nizej niz .of-podglad (4); arkusze (5) dalej nad wszystkim. */
#w-oferty #of-biblioteka,#w-oferty #of-pamiec{z-index:3}

/* v879 — karta zatwierdzenia kwot w rozmowie i zmiany na karcie joba */
.of-prop{display:flex;flex-direction:column;gap:var(--o1);width:100%;margin:var(--o2) 0 0;
  padding:var(--o3) 14px;border:1px solid var(--linia);border-radius:16px;background:var(--karta);color:var(--tekst)}
.of-prop-t{font-size:14px}
.of-prop-l{font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.of-prop-a{display:flex;gap:var(--o2);margin-top:var(--o2)}
.of-prop-a .btn{min-height:40px}
.of-prop-s{color:var(--szary);font-size:12px;margin-top:var(--o1)}
.of-prop[data-stan="anulowana"],.of-prop[data-stan="cofnieta"]{opacity:.75}
.jm-of-zm-w{display:flex;align-items:center;justify-content:space-between;gap:var(--o3);
  padding:var(--o3) var(--o4);border-bottom:1px solid var(--linia-cicha, var(--linia));font-variant-numeric:tabular-nums}
.jm-of-zm-w[data-stan="cofnieta"]{opacity:.7}
.jm-of-zm-w .btn{flex:none;min-height:40px}

/* v880 — detale jak w Claude: pasek pod odpowiedzia (40×40, ikony 20 px),
   bloki kodu i tabel, szara linia pod polem, projekt w naglowku. */
#w-oferty .of-akcje{display:flex;align-items:center;gap:0;margin:var(--o1) 0 0}
#w-oferty .of-akcje .of-ik{width:40px;height:40px;color:var(--szary)}
#w-oferty .of-akcje .of-ik .ikona{width:20px;height:20px}
#w-oferty .of-akcje .of-ik[aria-pressed="true"],#w-oferty .of-akcje .of-ik.of-zrobione{color:var(--akcent)}
#w-oferty .of-ocena-kom{display:flex;flex-direction:column;gap:var(--o2);margin-top:var(--o2)}
#w-oferty .of-ocena-kom textarea{width:100%;font:inherit;font-size:16px;padding:var(--o2) var(--o3);border:1px solid var(--linia);border-radius:16px;background:var(--karta);color:var(--tekst)}
#w-oferty .of-ocena-kom-a{display:flex;gap:var(--o2);justify-content:flex-end}
#w-oferty .of-blok{margin:var(--o2) 0;border:1px solid var(--linia);border-radius:16px;overflow:hidden;background:var(--karta)}
#w-oferty .of-blok-pasek{display:flex;align-items:center;gap:var(--o1);padding:0 var(--o1) 0 var(--o3);border-bottom:1px solid var(--linia-cicha, var(--linia));color:var(--szary);font-size:12px}
#w-oferty .of-blok-pasek span{flex:1;min-width:0}
#w-oferty .of-blok-pasek .of-ik{width:40px;height:40px;color:var(--szary)}
#w-oferty .of-blok-pasek .of-ik .ikona{width:20px;height:20px}
#w-oferty .of-blok-tresc{overflow-x:auto;padding:var(--o3)}
#w-oferty .of-blok-tresc pre{margin:0;font-size:13px;white-space:pre}
#w-oferty .of-blok-tresc table{border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
#w-oferty .of-blok-tresc th,#w-oferty .of-blok-tresc td{padding:var(--o1) var(--o2);border-bottom:1px solid var(--linia-cicha, var(--linia));text-align:left;white-space:nowrap}
.of-pelny-okno{width:min(960px,96vw);max-height:90vh;display:flex;flex-direction:column}
.of-pelny-pasek{display:flex;align-items:center;justify-content:space-between;gap:var(--o2);padding:var(--o2) var(--o6) var(--o2) var(--o3)}
.of-pelny-tresc{overflow:auto;padding:var(--o3)}
.of-pelny-tresc pre{margin:0;font-size:13px}
.of-pelny-tresc table{border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.of-pelny-tresc th,.of-pelny-tresc td{padding:var(--o1) var(--o2);border-bottom:1px solid var(--linia-cicha, var(--linia));text-align:left;white-space:nowrap}
#w-oferty .of-uwaga{text-align:center;color:var(--szary);font-size:12px;margin-top:var(--o1)}
#w-oferty .of-projekt{border:0;background:transparent;padding:0 2px;color:var(--szary);font:inherit;font-size:12px;
  text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#w-oferty .of-p-watek:empty{display:none}
#w-oferty .of-um-w{display:flex;align-items:center;gap:var(--o2);padding:var(--o2) 0;border-bottom:1px solid var(--linia-cicha, var(--linia))}
#w-oferty .of-um-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#w-oferty .of-um-t span{color:var(--szary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#w-oferty #of-umiej input,#w-oferty #of-umiej textarea{width:100%;font:inherit;font-size:16px;padding:var(--o2) var(--o3);border:1px solid var(--linia);border-radius:16px;background:var(--karta);color:var(--tekst);margin-bottom:var(--o2)}
#w-oferty #of-umiej{z-index:3}
/* v882 — DYKTOWANIE (D-867). Pasek nagrywania stoi nad polem pisania,
   w tym samym rytmie co reszta stopki; bez klucza przycisk jest
   wyszarzony (disabled + title „Brak klucza"). */
#w-oferty .of-nagr{display:flex;align-items:center;gap:var(--o2);max-width:760px;margin:0 auto var(--o1);padding:var(--o1) var(--o2);
  border:1px solid var(--linia);border-radius:16px;background:var(--karta)}
#w-oferty .of-nagr.ukryty{display:none}
#w-oferty .of-nagr-fala{flex:1;min-width:0;height:32px;color:var(--alarm)}
#w-oferty .of-nagr-czas{font-variant-numeric:tabular-nums;font-size:12px;color:var(--tekst)}
#w-oferty .of-nagr-czeka{font-size:12px;color:var(--szary);white-space:nowrap}
#w-oferty .of-nagr-czeka:empty{display:none}
#w-oferty .of-nagr-stop{width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;flex:none;cursor:pointer;
  padding:0;background:var(--alarm);color:var(--na-akcencie)}
#w-oferty .of-nagr-stop .ikona{width:18px;height:18px}
#w-oferty .of-mik:disabled,#w-oferty .of-mik.of-mik-brak{opacity:.4;cursor:not-allowed}
#w-oferty .of-mik{touch-action:none}
#w-oferty #of-dykt{z-index:3}
#w-oferty #of-dykt input{width:100%;font:inherit;font-size:16px;padding:var(--o2) var(--o3);border:1px solid var(--linia);border-radius:16px;background:var(--karta);color:var(--tekst);margin-bottom:var(--o2)}
#w-oferty .of-dk-w{display:flex;flex-direction:column;gap:var(--o1);padding:var(--o2) 0;border-bottom:1px solid var(--linia-cicha, var(--linia))}
#w-oferty .of-dk-meta{display:flex;flex-direction:column;gap:2px}
#w-oferty .of-dk-meta span{color:var(--szary);font-size:12px}
#w-oferty .of-dk-tekst{white-space:pre-wrap;overflow-wrap:anywhere}
#w-oferty .of-dk-surowy summary{color:var(--szary);font-size:12px;cursor:pointer}
#w-oferty .of-dk-surowy div{white-space:pre-wrap;color:var(--szary);font-size:12px}
#w-oferty .of-dk-w audio{width:100%}
#w-oferty .of-dk-w .btn{align-self:flex-start}