/* ==========================================================================
   kokpit.css — arkusz stylów kokpitu.

   Wyniesiony z bloku <style> w index.html, znak w znak. Powód ten sam, co przy
   auth.js: każdy nowy ekran dokładał kolejną kopię, a przy CSP z `style-src`
   arkusz w pliku jest i tak potrzebny.

   Że to nie jest problem teoretyczny, przyznaje komentarz w samym index.html:
   zmiennej --brass-600 używano tam w czterech miejscach, a zdefiniowana była
   wyłącznie w tablica.html i uzytkownicy.html — te kolory po prostu nie
   działały. Jeden arkusz na wszystkie ekrany usuwa całą tę klasę usterek.

   PRZENIESIONE BEZ DZIELENIA, I TO JEST ŚWIADOME. Reguły dotyczące wyłącznie
   ekranu próśb o kontakt zostają tu razem z resztą. Ręczny podział na „wspólne”
   i „własne” wymagałby oceny przy każdej ze 146 reguł, a pomyłka psuje wygląd
   produkcji — podczas gdy nadmiarowa reguła, która nie ma do czego pasować,
   nie robi nic. Dzięki temu index.html przejdzie na ten plik jedną zmianą:
   skasować blok <style>, dodać <link>. Do zrobienia osobno, ze sprawdzeniem
   przez `node infra/zrzuty.js --kokpit`.

   Uwaga na zmienne: tablica.html ma własny, PEŁNIEJSZY zestaw z docs/tablica-spec.md
   (ADR-020). Ten plik przenosi zestaw z kokpitu i go nie rozstrzyga — ujednolicenie
   obu palet to osobna decyzja, nie skutek uboczny przenosin.
   ========================================================================== */
  @font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-600-latin-ext.woff2") format("woff2");
    font-weight:300 700;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
  @font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-600-latin.woff2") format("woff2");
    font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2212}
  @font-face{font-family:"Inter";src:url("/fonts/Inter-400-latin-ext.woff2") format("woff2");
    font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
  @font-face{font-family:"Inter";src:url("/fonts/Inter-400-latin.woff2") format("woff2");
    font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2212}
  @font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-400-latin.woff2") format("woff2");
    font-weight:400 800;font-display:swap}

  :root{
    --pine:#16302A; --pine-d:#0F241F; --pine-050:#F1F5F3;
    /* --brass-600 bylo uzywane w czterech miejscach tego pliku, ale zdefiniowane
       wylacznie w tablica.html i uzytkownicy.html - te kolory po prostu nie
       dzialaly. Wartosc przepisana stamtad, zeby wszystkie trzy strony kokpitu
       mowily tym samym. */
    --brass:#B67F33; --brass-l:#D2A863; --brass-600:#8F6120;
    --paper:#FAF7F1; --surface:#fff; --ink:#1B211F; --muted:#6B7B75;
    --line:#E4E7E5; --line-s:#CFD6D2;
    --r:14px; --r-sm:9px;
    --ff-d:"Space Grotesk",system-ui,sans-serif;
    --ff-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    --ff-m:"JetBrains Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:var(--ff-b);
    font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .ukryty{display:none !important}

  /* ---------- logowanie ---------- */
  #ekran-log{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--pine)}
  .karta-log{width:100%;max-width:400px;background:var(--surface);border-radius:var(--r);
    padding:38px 34px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
  .znak{display:flex;align-items:center;gap:11px;margin-bottom:26px}
  .znak svg{width:38px;height:38px}
  .znak b{font-family:var(--ff-d);font-size:17px;font-weight:600;letter-spacing:-.01em}
  .znak i{color:var(--brass);font-style:normal}
  .znak span{display:block;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-top:1px}

  label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:14px 0 5px}
  input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line-s);
    border-radius:var(--r-sm);font:inherit;font-size:14.5px;background:var(--surface);color:var(--ink)}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--brass-l);outline-offset:-1px;border-color:var(--brass)}
  button{font:inherit;cursor:pointer;border:0;border-radius:100px;padding:12px 22px;
    background:var(--pine);color:#fff;font-weight:500;font-size:14.5px;transition:background .15s}
  button:hover{background:var(--pine-d)}
  button[disabled]{opacity:.55;cursor:default}
  button.pelna{width:100%;margin-top:22px}
  button.drobna{padding:7px 14px;font-size:13px;background:transparent;color:var(--pine);
    border:1px solid var(--line-s)}
  button.drobna:hover{background:var(--pine-050);border-color:var(--brass)}

  .blad{margin-top:14px;padding:10px 13px;border-radius:var(--r-sm);font-size:13.5px;
    background:#FDF0EE;color:#9B3A2C;border:1px solid #F3D3CD}
  .info{margin-top:14px;padding:10px 13px;border-radius:var(--r-sm);font-size:13.5px;
    background:var(--pine-050);color:var(--pine);border:1px solid var(--line)}

  /* ---------- aplikacja ---------- */
  /* min-width:100% — bez tego naglowek konczyl sie tam, gdzie konczyla sie
     jego tresc, a nie ekran. Przy szerokiej tabeli ponizej wygladalo to tak,
     jakby tlo bylo urwane w polowie strony. */
  header{background:var(--pine);color:#E9F0ED;padding:0 22px;min-width:100%}
  .hdr-in{max-width:1180px;margin:0 auto;height:62px;display:flex;align-items:center;gap:16px}
  .hdr-in .znak b{color:#E9F0ED}
  .hdr-in .znak span{color:rgba(233,240,237,.55)}
  .kto{margin-left:auto;font-size:13.5px;color:rgba(233,240,237,.8)}
  .kto b{font-weight:600;color:#fff}
  header button{background:rgba(255,255,255,.12);padding:8px 16px;font-size:13px}
  header button:hover{background:rgba(255,255,255,.2)}

  main{max-width:1180px;margin:0 auto;padding:30px 22px 60px}
  h1{font-family:var(--ff-d);font-size:26px;font-weight:600;letter-spacing:-.015em}
  .podtytul{color:var(--muted);font-size:14px;margin-top:4px}

  .paski{display:flex;gap:8px;margin:22px 0 18px;flex-wrap:wrap}
  /* Filtry stanu. Tlo butelkowe jak reszta marki, wyroznienie zlota obwodka —
     nie zmiana tla, bo przy szesciu pigulkach obok siebie robi sie niespokojnie.
     Wczesniej byl tu blad: globalna regula button{color:#fff} dawala bialy tekst,
     a .pasek ustawial biale tlo i koloru nie nadpisywal — pigulki wygladaly puste. */
  .pasek{padding:7px 15px;border-radius:100px;border:1.5px solid transparent;
    background:var(--pine);color:#E9F0ED;font-size:13.5px;font-weight:500;
    cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease}
  .pasek:hover{border-color:var(--brass-l);background:var(--pine-d);color:#fff}
  .pasek:focus-visible{outline:none;border-color:var(--brass);
    box-shadow:0 0 0 3px rgba(182,127,51,.25)}
  .pasek.on{background:var(--pine-d);border-color:var(--brass);color:#fff;font-weight:600}
  .pasek .licz{font-family:var(--ff-m);font-size:11.5px;opacity:.75;margin-left:6px}
  .pasek.on .licz{color:var(--brass-l);opacity:1}

  table{width:100%;border-collapse:collapse;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  th{text-align:left;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);padding:13px 15px;border-bottom:1px solid var(--line);font-weight:500}
  td{padding:14px 15px;border-bottom:1px solid var(--line);font-size:14.5px;
    vertical-align:middle}
  tr:last-child td{border-bottom:0}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:var(--pine-050)}
  .mono{font-family:var(--ff-m);font-size:13px}
  /* Znacznik stanu nie moze sie lamac — "W kontakcie" przy waskiej kolumnie
     rozpadalo sie na dwie linie i wychodzilo poza pigulke. */
  .stan{display:inline-flex;align-items:center;justify-content:center;
    white-space:nowrap;padding:4px 11px;border-radius:100px;font-size:12px;
    font-weight:500;font-family:var(--ff-m);letter-spacing:.02em;line-height:1.45}
  .stan.nowe{background:#FDF3E3;color:#8A5D18}
  .stan.w_kontakcie{background:#E8F0FB;color:#2B5590}
  .stan.umowione{background:#E6F3EC;color:#1F6B42}
  .stan.zamkniete{background:#EFF1F0;color:#63706B}

  /* .pill -- ta sama piguleczka co .stan, pod nazwa uzywana w makiecie
     (docs/makieta-kokpit-docelowy.html). Ekrany Klientow i Karty pisane byly
     wprost z makiety i siegaly po `.pill`, ktorego tu NIE BYLO -- wszystkie
     znaczniki renderowaly sie jako goly tekst, bez tla i zaokraglenia.
     Nie wyszlo to na sprawdzeniu, bo jedyny klient na produkcji nie ma ani
     kredytu, ani terminu, wiec ta sciezka ani razu sie nie wykonala.
     Definiujemy obie nazwy zamiast przepisywac makiete: `.stan` zostaje dla
     stanow zgloszenia, `.pill` jest ogolniejsze i tak nazywa to projekt. */
  .pill{display:inline-flex;align-items:center;justify-content:center;
    white-space:nowrap;padding:4px 11px;border-radius:100px;font-size:12px;
    font-weight:500;font-family:var(--ff-m);letter-spacing:.02em;line-height:1.45}
  .pill.nowe{background:#FDF3E3;color:#8A5D18}
  .pill.w_kontakcie,.pill.kontakt{background:#E8F0FB;color:#2B5590}
  .pill.umowione{background:#E6F3EC;color:#1F6B42}
  .pill.zamkniete{background:#EFF1F0;color:#63706B}
  .pill.czynny{background:#E6F3EC;color:#1F6B42}
  .pill.splacony{background:#EFF1F0;color:#63706B}
  .pill.obcy{background:transparent;color:var(--muted);border:1px solid var(--line-s)}
  .pill.wspolny{background:var(--pine-050);color:var(--pine);border:1px solid var(--line-s)}
  .stan.przeksztalcone{background:#EDEBE6;color:#6A5B42}
  .pusto{padding:52px 20px;text-align:center;color:var(--muted);background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r)}

  /* Telefon wciagniety pod nazwisko. Osobna kolumna "Telefon" dawala osma
     kolumne po dolozeniu akcji, a siedem juz raz rozepchalo kokpit na
     telefonie kilkukrotnie ponad szerokosc ekranu. Numer i tak czyta sie
     razem z nazwiskiem, wiec nalezy do tej samej komorki. */
  .osoba b{display:block}
  .osoba i{display:block;font-style:normal;font-family:var(--ff-m);
    font-size:12.5px;color:var(--muted);margin-top:2px}
  /* Oznaczenie zgloszenia powtornego (ADR-032). Zlota obwodka zamiast
     wypelnienia — na liscie stoi obok pigulki stanu i dwie plamy koloru
     w jednym wierszu robia sie halasliwe. */
  .znacznik-teczka{display:inline-block;margin-top:5px;padding:2px 9px;
    border-radius:100px;border:1px solid var(--brass-l);color:#8A5D18;
    background:#FDF8EF;font-family:var(--ff-m);font-size:11px;
    letter-spacing:.02em;white-space:nowrap}

  /* Kolumna akcji. Przycisk musi byc wezszy od globalnego button{} — w
     wierszu tabeli pelnowymiarowa pigulka rozpycha wiersz w pionie. */
  td.kol-akcja{text-align:right;white-space:nowrap}
  .akcja{padding:7px 14px;font-size:13px;background:var(--brass);
    border:1.5px solid var(--brass);border-radius:var(--r-sm);color:#fff}
  .akcja:hover{background:#A06E27;border-color:#A06E27}
  /* Wariant dla zgloszenia powtornego: nie zaklada nic nowego, tylko dopina
     sie do istniejacej teczki — dlatego spokojniejszy, nie wolajacy o klikniecie. */
  .akcja.wtorny{background:transparent;color:var(--pine);border-color:var(--line-s)}
  .akcja.wtorny:hover{background:var(--pine-050);border-color:var(--brass)}

  /* ---------- potwierdzenie konwersji ---------- */
  /* Konwersja jest nieodwracalna (EspoCRM nie ma cofniecia, a rola zespolu
     ma delete=no), wiec przed nia pokazujemy, co dokladnie powstanie. */
  .potw-co{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:14px 16px;margin-top:16px}
  .potw-co h3{font-family:var(--ff-d);font-size:13px;font-weight:600;
    letter-spacing:.02em;color:var(--pine);margin-bottom:8px}
  .potw-co dl{display:grid;grid-template-columns:minmax(0,120px) 1fr;gap:2px 14px}
  .potw-co dt{font-family:var(--ff-m);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);padding-top:4px}
  .potw-co dd{margin:0;font-size:14.5px}
  .potw-co dd.brak{color:var(--muted)}
  .uwaga{margin-top:16px;padding:11px 14px;border-radius:var(--r-sm);font-size:13.5px;
    line-height:1.55;background:#FDF8EF;color:#6A4E1E;border:1px solid var(--brass-l)}
  .uwaga b{font-weight:600}
  @media(max-width:520px){
    .potw-co dl{grid-template-columns:1fr;gap:0}
    .potw-co dt{padding-top:9px}
  }

  /* ---------- szuflada szczegolow ---------- */
  #tlo{position:fixed;inset:0;background:rgba(15,36,31,.45);z-index:10}
  /* Karta otwiera sie na srodku ekranu, nie z boku. Przy czytaniu szczegolow
     sprawy wzrok nie ucieka do krawedzi, a na szerokim monitorze tresc nie
     jest scisnieta w waskim pasku. */
  #szuflada{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(94vw,640px);max-height:88vh;background:var(--paper);border-radius:16px;
    z-index:11;overflow-y:auto;padding:30px 30px 36px;box-shadow:0 30px 80px rgba(0,0,0,.32)}
  @media(max-width:640px){
    .hdr-in{height:auto;min-height:58px;padding:10px 0;gap:10px;flex-wrap:wrap}
    .znak svg{width:32px;height:32px}
    .znak b{font-size:15px}
    .znak span{display:none}
    .kto{width:100%;margin-left:0;order:3;font-size:12.5px}
    #btn-wyloguj{margin-left:auto;padding:8px 14px;font-size:13px}
    main,.uklad main{padding-left:0;padding-right:0}
    header{padding:0 16px}
    .wrap-tresc{padding:0 16px}
  }

  @media(max-width:560px){
    #szuflada{width:100vw;max-height:100vh;height:100%;border-radius:0;
      top:0;left:0;transform:none}
  }

  /* ---------- uklad z panelem sekcji ---------- */
  /* Sekcje to nadrzedny poziom nawigacji. Dzis jest jedna — "Nowe" — ale
     miejsce na kolejne (Sprawy, Wnioski, Zadania) jest juz przygotowane,
     zeby dokladanie ich nie wymagalo przebudowy ukladu. */
  .uklad{max-width:1180px;margin:0 auto;display:grid;
    grid-template-columns:186px minmax(0,1fr);gap:0;align-items:start}
  .nawigacja{padding:30px 0 60px;border-right:1px solid var(--line);
    position:sticky;top:0}
  .nawigacja .grupa{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);padding:0 18px 10px 22px}
  .sekcja{display:block;width:100%;text-align:left;background:transparent;border:0;
    border-left:3px solid transparent;padding:11px 18px 11px 19px;font:inherit;
    font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;border-radius:0;
    transition:background .15s ease,border-color .15s ease,color .15s ease}
  .sekcja:hover{background:var(--pine-050);border-left-color:var(--brass-l)}
  .sekcja:focus-visible{outline:none;border-left-color:var(--brass);
    background:var(--pine-050)}
  .sekcja.on{border-left-color:var(--brass);background:var(--pine-050);
    color:var(--pine);font-weight:600}
  /* Tablica jest osobna strona, nie sekcja tego samego pliku — musi byc
     odnosnikiem, zeby przegladarka wykonala zwykle przejscie i zabrala ze soba
     token z sessionStorage. Wyglada jak pozostale pozycje paska. */
  a.sekcja{text-decoration:none;box-sizing:border-box}
  .sekcja .licz-s{float:right;font-family:var(--ff-m);font-size:11.5px;color:var(--muted)}
  .sekcja.on .licz-s{color:var(--brass-600)}
  .uklad main{padding:30px 0 60px 26px;max-width:none;margin:0}
  /* ---------- telefon: tabela zamienia sie w karty ---------- */
  /* Siedem kolumn na ekranie 390 px rozpychalo cala strone do kilku tysiecy
     pikseli. Zamiast zmuszac do przewijania w bok, kazdy wiersz staje sie
     karta z podpisanymi polami. */
  @media(max-width:760px){
    body{overflow-x:hidden}
    table{display:block;border:0;background:transparent;border-radius:0}
    thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    tbody{display:block}
    tbody tr{display:block;background:var(--surface);border:1px solid var(--line);
      border-radius:var(--r);margin-bottom:12px;padding:6px 16px 12px}
    tbody tr:hover{background:var(--surface)}
    tbody td{display:flex;gap:14px;align-items:baseline;width:auto;
      padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
    tbody tr td:last-child{border-bottom:0}
    tbody td::before{content:attr(data-etykieta);flex:0 0 104px;
      font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--muted);padding-top:3px}
    tbody td:empty{display:none}
    /* Nazwisko jako tytul karty, bez podpisu */
    /* display:block, bo komorka trzyma teraz trzy elementy jeden pod drugim
       (nazwisko, telefon, znacznik teczki) — flex ustawilby je w rzedzie. */
    tbody td.tytul-karty{display:block;border-bottom:1px solid var(--line-s);padding-top:4px}
    tbody td.tytul-karty::before{display:none}
    tbody td.tytul-karty b{font-size:17px;font-family:var(--ff-d)}
    /* Akcja zamyka karte jako pelnej szerokosci przycisk — bez etykiety,
       bo napis na przycisku sam mowi, co zrobi. */
    tbody td.kol-akcja{display:block;text-align:left;border-bottom:0;padding:12px 0 2px}
    tbody td.kol-akcja::before{display:none}
    tbody td.kol-akcja .akcja{width:100%}
    /* Zgloszenie juz przeksztalcone nie ma przycisku — pusta komorka nie moze
       zostawiac po sobie odstepu. Wlasna regula, bo tbody td:empty ma te sama
       wage co reguly wyzej i przegralaby kolejnoscia. */
    tbody td.kol-akcja:empty{display:none}
  }

  @media(max-width:820px){
    .uklad{grid-template-columns:1fr}
    .nawigacja{border-right:0;border-bottom:1px solid var(--line);
      padding:14px 0 0;position:static;display:flex;gap:2px;overflow-x:auto}
    .nawigacja .grupa{display:none}
    .sekcja{width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;
      padding:10px 16px}
    .sekcja.on{border-left:0;border-bottom-color:var(--brass)}
    .sekcja .licz-s{float:none;margin-left:7px}
    .uklad main{padding:22px 0 60px}
  }

  /* ---------- audyt ---------- */
  .audyt-filtry{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
  .audyt-filtry .pole-f{display:flex;flex-direction:column;gap:5px}
  .audyt-filtry label{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted)}
  .audyt-filtry select,.audyt-filtry input{padding:8px 11px;font-size:14px;min-width:150px}
  .audyt-filtry .czysc{background:transparent;color:var(--muted);border:1px solid var(--line-s);
    padding:9px 15px;font-size:13.5px}
  .audyt-filtry .czysc:hover{border-color:var(--brass);color:var(--ink);background:transparent}
  #lista-audyt tbody tr{cursor:pointer}
  #lista-audyt tbody tr:hover{background:var(--pine-050)}
  .zmiana-wiersz{display:grid;grid-template-columns:150px 1fr;gap:4px 16px;
    padding:10px 0;border-top:1px solid var(--line)}
  .zmiana-wiersz:first-of-type{border-top:0}
  .zmiana-wiersz .pole{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);padding-top:3px}
  .bylo{color:var(--muted);text-decoration:line-through;margin-right:8px}
  .jest{color:var(--pine);font-weight:600}
  .strony{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
  .strony button{padding:8px 15px;font-size:13.5px;background:var(--pine);
    border:1.5px solid transparent}
  .strony button:hover:not([disabled]){border-color:var(--brass-l);background:var(--pine-d)}
  .strony button[disabled]{opacity:.4}
  .strony .licznik{font-family:var(--ff-m);font-size:12.5px;color:var(--muted)}
  .audyt-info{background:var(--pine-050);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:14px 16px;margin-bottom:18px;font-size:14px;color:var(--ink);line-height:1.55}
  .audyt-info b{color:var(--pine)}
  .przelacznik{display:flex;align-items:center;gap:12px;margin-bottom:20px;
    padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--surface)}
  .przelacznik .tytul{font-weight:600;font-size:14.5px}
  .przelacznik .opis{font-size:13px;color:var(--muted);margin-top:2px}
  .przelacznik button{margin-left:auto;flex:none;padding:8px 16px;font-size:13.5px}
  .stan-wl{background:var(--pine);color:#F7FAF8;border-color:var(--pine)}
  .stan-wyl{background:transparent;color:var(--muted);border:1px solid var(--line-s)}
  td.akcja-create{color:#2F6B4F;font-weight:600}
  td.akcja-update{color:var(--brass-600)}
  td.akcja-delete{color:#9B3B2E;font-weight:600}
  td.akcja-read{color:var(--muted)}

  /* ---------- zakladki widokow ---------- */
  .zakladki{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
  .zakladka{background:transparent;border:0;border-bottom:2px solid transparent;
    padding:11px 16px;font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);
    cursor:pointer;border-radius:0;transition:color .15s ease,border-color .15s ease}
  .zakladka:hover{color:var(--ink);border-bottom-color:var(--brass-l)}
  .zakladka:focus-visible{outline:none;color:var(--pine);
    box-shadow:inset 0 -3px 0 var(--brass)}
  .zakladka.on{color:var(--pine);border-bottom-color:var(--brass);font-weight:600}
  .zakladka .licz-z{display:inline-block;margin-left:7px;font-family:var(--ff-m);
    font-size:11px;color:var(--muted)}
  .zakladka.on .licz-z{color:var(--brass-600)}
  #szuflada h2{font-family:var(--ff-d);font-size:21px;font-weight:600;padding-right:40px}
  .zamknij{position:absolute;top:20px;right:20px;background:transparent;color:var(--muted);
    border:1px solid var(--line-s);padding:5px 12px;font-size:13px}
  /* Odpowiedzi z ankiety przychodza jako linie "Klucz: wartosc". Sklejone
     w jeden akapit sa nieczytelne — rozkladamy je na siatke. */
  /* Stala szerokosc etykiet. Przy "auto" najdluzsza z nich rozpychala kolumne
     i wartosci uciekaly na prawa krawedz. */
  .odpowiedzi{display:grid;grid-template-columns:minmax(0,132px) 1fr;gap:1px 16px;margin-top:4px}
  .odpowiedzi dt{font-family:var(--ff-m);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);padding:7px 0;line-height:1.4;
    border-top:1px solid var(--line)}
  .odpowiedzi dd{margin:0;padding:6px 0;font-size:14.5px;border-top:1px solid var(--line)}
  .odpowiedzi dt:first-of-type,.odpowiedzi dd:first-of-type{border-top:0}
  .wiadomosc-klienta{margin-top:14px;padding:12px 14px;background:var(--surface);
    border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--r-sm);
    font-size:14.5px;line-height:1.6;white-space:pre-line}
  .wiadomosc-klienta .etykieta{display:block;font-family:var(--ff-m);font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--brass-600);margin-bottom:6px}
  @media(max-width:520px){
    .odpowiedzi{grid-template-columns:1fr;gap:0}
    .odpowiedzi dt{border-top:1px solid var(--line);padding-bottom:0}
    .odpowiedzi dd{border-top:0;padding-top:2px}
  }
  .para{margin-top:16px}
  .para dt{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .para dd{margin-top:3px;font-size:15px}
  .para dd a{color:var(--pine);font-weight:500}
  hr{border:0;border-top:1px solid var(--line);margin:24px 0}