/* robotatut.pl - kabinet pracownika `/konto` (makieta "Moje konto").
   Przedrostek `ko-` (nie `kn-`: ten nalezy do kanalu w moderacji).
   Kolory wylacznie z tokenow gold.css; WYJATEK jest jeden i nazwany:
   napisy lezace NA ZDJECIU oferty maja kolory wpisane wprost i wlasne,
   pelne tlo - zdjecie bywa dowolne, a czytelnosc kwoty nie moze od niego
   zalezec (ta sama zasada, co glowka profilu). */

.ko-blok{margin:26px 0 0}
.ko-h,.panel .ko-h{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font:700 11px var(--f-body);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.ko-h a,.panel .ko-h a{margin-left:auto;font:600 13px var(--f-body);letter-spacing:0;text-transform:none;color:var(--yl);text-decoration:none}
.ko-h a:hover{text-decoration:underline}

/* Ramka z jednym zdaniem i droga dalej (bez fachu, pusto) - nie sciana. */
.ko-rama{display:block;margin:0 0 10px;padding:14px 16px;border:1px solid var(--gline);background:var(--card);
  color:var(--ink);text-decoration:none}
.ko-rama b{display:block;font:700 15px/1.3 var(--f-display);margin:0 0 5px}
.ko-rama span{display:block;font:400 13.5px/1.5 var(--f-body);color:var(--ink2)}

/* DUZA OFERTA */
.ko-reklama{position:absolute;right:10px;top:10px;padding:4px 8px;background:#0B0B0E;color:#D8D2C4;
  font:700 10px var(--f-body);letter-spacing:.14em;text-transform:uppercase}
/* OBWODKA GUZIKA IDZIE Z `--obw`, NIE Z `--gline` - to jest cala roznica
   miedzy czytelnoscia a wygladem (patrz `gold.css`). `--gline` to kreska
   wloskowa pod karta: na kremowej karcie daje 2:1, a w ciemnym motywie
   1.6:1 - czyli granica guzika, ktorej nie widac. Skaner kontrastu zlapal
   to na `/konto` w obu motywach i obu szerokosciach naraz. Podnoszenie
   samego `--gline` byloby zmiana WYGLADU calego portalu pod pretekstem
   dostepnosci; `--obw` jest dokladnie po to i ma 3:1. */
.ko-wiecej{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:8px;padding:8px 12px;
  border:1px solid var(--gline2);font:600 13.5px var(--f-body);color:var(--yl);text-decoration:none;text-align:center}
.ko-wiecej:hover{border-color:var(--gline)}

/* LISTY (zgloszenia, usciski, zapisane oferty) - wiersz jak w makiecie. */
.ko-strona-h{margin:8px 0 14px;font:800 24px/1.1 var(--f-display)}

/* Szuflady wgrywania okladki i zdjecia: zamkniete nie zajmuja miejsca,
   otwiera je skrypt (guzik "Okladka", menu krazka) albo blad wysylki. */
.ko-szuflada:not([open]){display:none}
.ko-szuflada>summary{display:none}

/* MOJE WPISY - zakladki z liczbami i guzik "Napisz wpis". */
/* Zdjecie i film we wpisie na koncie: 172 px na telefonie, 260 na laptopie. */

/* EDYTUJ PROFIL - naglowek z "Zapisz" zawsze na wierzchu (przypiety pod
   gornym paskiem portalu), wiersze z polami zamiast plachty. */

/* USTAWIENIA - przelaczniki, jezyk, motyw, czerwone "Usun konto". */
.panel .ko-h{margin-top:22px}

/* UKLAD KABINETU. Telefon: kolumny znikaja (`display:contents`), a ich
   dzieci staja w jednej kolumnie `.panel` w kolejnosci z makiety.
   Laptop od 1024 px: OSOBNA ROZKLADKA w trzech kolumnach, nie
   rozciagniety telefon. */
.ko-konto>.ko-lewa,.ko-konto>.ko-srodek,.ko-konto>.ko-prawa{display:contents}
.ko-konto #nowe{order:1}
.ko-konto #wpisy{order:3}
.ko-konto .ko-na-koniec{order:4}
.ko-konto .ko-blok{margin-top:6px}
@media (min-width:1024px){
  .panel.ko-konto{max-width:1280px;display:grid;grid-template-columns:330px minmax(0,1fr) 320px;
    gap:34px;align-items:start;padding-left:40px;padding-right:40px}
  .ko-konto>.ko-lewa,.ko-konto>.ko-srodek,.ko-konto>.ko-prawa{display:flex;flex-direction:column;gap:20px;min-width:0}
  .ko-konto .ko-blok{margin-top:0}
}

/* ---------------------------------------------------------------------
   PROFIL PRACOWNIKA - MAKIETA BLOKU 2 (wlasciciel 18.10, regula 235):
   2.1 "zaraz po rejestracji" (`.pr2-swiezy`) i 2.56 "po pol roku"
   (`.pr2-pelny`) to ta sama strona. Liczby i kolory WPROST z makiety
   (generatory gen_prof2.py / gen_1810.py), w zmiennych `--p-*` na `.pr2`
   - dwa motywy, jasny po palecie jasnych plaszek makiety. Krój: Manrope.
   Budzet 480 px nad "Nowe dla Ciebie" (regula 19, 28.09) zszedl razem
   z makieta: glowka 2.1 ma 296 px okladki z imieniem.
--------------------------------------------------------------------- */
/* Zmienne `--p-*` i plakietki stoja w awatar-menu.css - dziela je /konto i /p/. */

/* Glowka: okladka na cala szerokosc telefonu, awatar i imie na jej dole. */
.pr2-gora{order:0;display:flex;flex-direction:column;min-width:0}
.pr2-g{position:relative;display:block;margin:0;padding:0;border:0;overflow:visible}
:root:root .pr2-g{background:none}
.pr2-g:before,.pr2-g:after{content:none}
.pr2-okl{position:relative;margin:0 calc(-1 * var(--bok,16px));overflow:visible}
.pr2-gora>.pr2-g:first-child .pr2-okl{margin-top:calc(-1 * var(--gora,24px))}
.pr2-okl .pokladka{position:absolute;left:0;right:0;top:0;overflow:hidden;z-index:0}
.pr2-okl .pokladka img,.pr2-okl .pokladka video{width:100%;height:100%;object-fit:cover;display:block}
.pr2-okl-mgla{position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.pr2-film{position:absolute;left:14px;top:14px;z-index:3;height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;
  border-radius:10px;background:rgba(9,9,10,0.6);font-size:11.5px;font-weight:800;color:#FFFFFE}
.pr2-id{position:absolute;z-index:2;display:flex}
.pr2-ava-w{position:relative;flex:none}
.phero .pring.pr2-ava{flex:none;position:relative;display:block;padding:0;border:0;overflow:hidden;cursor:pointer;background:var(--p-ava);box-shadow:var(--p-cien)}
.pr2 .pring.pr2-ava .pic{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;overflow:hidden;background:none;box-shadow:none;padding:0}
.pr2 .pr2-ava .pic img,.pr2 .pr2-ava .pic video{width:100%;height:100%;object-fit:cover}
.pr2 .pr2-ava .pic>span{font-weight:800;color:var(--p-zt);letter-spacing:-1px}
.pr2-id-tx{min-width:0;flex:1}
.pr2-imie,.panel h1.pr2-imie{margin:0;font-weight:800;color:var(--p-bialy);overflow-wrap:anywhere}
.pr2-fach{margin:0}
.pr2-fach a{color:inherit;text-decoration:none}
.pr2-rola{font-weight:800}
.pr2-miasto{display:flex;align-items:center;gap:5px;margin:0;font-weight:600;color:var(--p-szary)}
.pr2-miasto .pr2-i{flex:none}
/* 2.1 - swiezy: okladka 210 px, awatar 92 px wychodzi pod nia, imie obok. */
.pr2-swiezy .pr2-okl{height:296px}
.pr2-swiezy .pr2-okl .pokladka{height:210px}
.pr2-swiezy .pr2-okl-mgla{top:96px;height:114px;background:linear-gradient(180deg,rgba(9,9,11,0) 0%,rgba(9,9,11,0.55) 62%,var(--p-tlo) 100%)}
.pr2-swiezy .pr2-id{left:20px;right:18px;top:164px;gap:14px;align-items:flex-start}
.pr2-swiezy .pring.pr2-ava,.pr2-swiezy .pring.pr2-ava .pic{width:92px;height:92px;border-radius:22px !important}
.pr2-swiezy .pr2-ava .pic>span{font-size:36px}
.pr2-swiezy .pr2-id-tx{padding-top:46px}
.pr2-swiezy .pr2-imie{font-size:21px;letter-spacing:-0.5px;line-height:1.1}
.pr2-swiezy .pr2-fach{margin-top:6px;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;font-weight:800;color:var(--p-zl)}
.pr2-swiezy .pr2-miasto{margin-top:5px;font-size:12.5px}
.pr2-swiezy .pr2-chipy{margin-top:6px}
.pr2-swiezy .pr2-szuka{min-height:22px;padding:2px 8px;gap:5px;border-radius:8px;font-size:11.5px}
.pr2-swiezy .pr2-szuka s{width:6px;height:6px;border-radius:3px}

/* 2.56 - pelny: okladka 236 px CZYSTA (20.10, regula wlasciciela 19.10 17:16:
   na okladce nie ma imienia, zawodu ani guzikow - tylko "Okladka" wlasciciela).
   Awatar 88 px w zlotej ramce wchodzi na dolna krawedz okladki, a imie i zawod
   stoja POD nia, obok awatara. Blok `.pr2-id` jest w przeplywie (nie
   absolutny), wiec dlugie imie albo "PRACODAWCA · Firma sp. z o.o." rosnie
   w dol, a nie na zdjecie. */
.pr2-pelny .pr2-okl{padding-top:236px}
.pr2-pelny .pr2-okl .pokladka{height:236px}
.pr2-pelny .pr2-okl-mgla{top:0;height:236px;background:linear-gradient(180deg,rgba(9,9,10,0.2) 0%,rgba(9,9,10,0) 45%,var(--p-tlo) 100%)}
.pr2-pelny .pr2-id{position:relative;margin-top:-46px;padding:0 18px 4px;gap:14px;align-items:flex-start}
.pr2-pelny .pr2-ava-w{padding:3px;border-radius:28px !important;box-shadow:0 12px 30px rgba(0,0,0,0.5)}
/* Zlota ramka awatara (2.56) to OBWODKA, nie zalewa: gradient lezy pod
   kwadratem na pseudo-elemencie, a nie na pudle z trescia (jedna zalewa). */
.pr2-pelny .pr2-ava-w::before{content:"";position:absolute;inset:0;border-radius:28px;background:var(--p-zloto);pointer-events:none}
.pr2-pelny .pr2-ava-w>.pr2-ava{z-index:1}
.pr2-pelny .pring.pr2-ava,.pr2-pelny .pring.pr2-ava .pic{width:88px;height:88px;border-radius:25px !important;box-shadow:none}
.pr2-pelny .pr2-ava .pic>span{font-size:34px}
.pr2-pelny .pr2-id-tx{padding-top:52px}
.pr2-pelny .pr2-imie{font-size:24px;letter-spacing:-0.6px;color:var(--p-bialy);line-height:1.15}
.pr2-pelny .pr2-fach{margin-top:3px;font-size:13px;font-weight:700;color:var(--p-tekst)}
.pr2-pod{padding:6px 2px 0}
.pr2-pelny .pr2-pod .pr2-miasto{font-size:13px;font-weight:700;color:var(--p-a9);gap:6px}
.pr2-pod .pr2-chipy{margin-top:12px}

/* Jeden licznik i guziki (2.1 / 2.56). */
.pr2-guziki{order:1;display:flex;flex-wrap:wrap;gap:6px}
/* 18.10: podpis guzika w jednej linijce - gdy trzy nie mieszcza sie w rzedzie, ostatni schodzi nizej. */
.pr2-g-btn{flex:1 1 auto;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px;height:48px;padding:0 6px;box-sizing:border-box;text-align:center;line-height:1.15;
  border-radius:14px;font:800 14px Manrope,system-ui,sans-serif;background:var(--p-karta2);border:1px solid var(--p-ramka2);
  color:var(--p-guzik);text-decoration:none;cursor:pointer}
.pr2-g-btn .pr2-i{flex:none;color:var(--p-zl)}
.pr2-g-btn.pr2-zloty{background:var(--p-zloto);border:0;color:#15120A;box-shadow:0 8px 22px rgba(217,182,74,0.28)}
.pr2-g-btn.pr2-zloty .pr2-i{color:#15120A}
.pr2-g-kw{flex:none;width:48px;padding:0}
.pr2-g-kw .pr2-i{color:var(--p-guzik)}
/* 2.1: licznik i guziki ciasniej, guziki 46 px i obwodka (rt-licz / rt-guzik). */
.pr2-swiezy .pr2-guziki{gap:10px}
.pr2-swiezy .pr2-g-btn{height:auto;min-height:46px;gap:9px;border-radius:12px;font-size:14.5px;font-weight:700;background:var(--p-karta)}
.pr2-swiezy .pr2-g-btn .pr2-i{color:var(--p-guzik)}


/* 2.56: zakladki i sekcje. */

/* Uklad: telefon - jedna kolumna z odstepem 14 px (makieta 2.1). */
.pr2>.panel{display:flex;flex-direction:column;gap:14px}
/* Tlo strony z makiety (#09090B / #F7F5F1) - jak na /p/. */
.pr2{background:var(--p-tlo)}
.pr2 #wpisy{order:7}
.pr2 .ko-na-koniec{order:8}

@media (min-width:768px){
  .pr2-okl{border-radius:0}
}
@media (min-width:1024px){
  /* 2.1 laptop: okladka na cala szerokosc (360 px), awatar 128 px, dwie kolumny 430 px | reszta. */
  .pr2-swiezy>.panel{--bok:56px;--gora:24px;max-width:none;display:grid;grid-template-columns:430px minmax(0,1fr);gap:26px;align-items:start;
    padding-left:var(--bok);padding-right:var(--bok)}
  .pr2-swiezy .pr2-gora{grid-column:1 / -1}
  .pr2-swiezy .pr2-okl{height:400px}
  .pr2-swiezy .pr2-okl .pokladka{height:296px}
  .pr2-swiezy .pr2-okl-mgla{top:150px;height:146px}
  .pr2-swiezy .pr2-id{left:56px;top:236px;gap:24px}
  .pr2-swiezy .pring.pr2-ava,.pr2-swiezy .pring.pr2-ava .pic{width:128px;height:128px;border-radius:26px !important}
  .pr2-swiezy .pr2-ava .pic>span{font-size:52px}
  .pr2-swiezy .pr2-id-tx{padding-top:66px}
  .pr2-swiezy .pr2-imie{font-size:32px}
  .pr2-swiezy .pr2-fach{margin-top:10px;font-size:11px}
  .pr2-swiezy .pr2-id-tx{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-content:start}
  .pr2-swiezy .pr2-imie,.pr2-swiezy .pr2-fach{grid-column:1 / -1}
  .pr2-swiezy .pr2-miasto{font-size:14px;margin-top:8px}
  .pr2-swiezy .pr2-chipy{margin-top:8px}
  .pr2-swiezy .ko-konto>.ko-lewa,.pr2-swiezy .ko-konto>.ko-srodek{display:flex;flex-direction:column;gap:16px;min-width:0}
  .pr2-swiezy .ko-konto>.ko-lewa{grid-column:1 / -1;grid-row:2}
  /* 2.56 laptop: jedna kolumna 720 px, okladka 720 px nad nia. */
  .pr2-pelny>.panel{--bok:16px;--gora:24px;max-width:752px;display:flex;align-items:stretch;padding-left:var(--bok);padding-right:var(--bok)}
  .pr2-pelny .ko-konto>.ko-lewa,.pr2-pelny .ko-konto>.ko-srodek,.pr2-pelny .ko-konto>.ko-prawa{display:contents}
}

/* ---------------------------------------------------------------------
   ZLOTO NA /konto BEZ ZALEWY (decyzja wlasciciela z 29.09, po zywym
   ekranie). Zalewa jest JEDNA: "Zglos sie" na karcie oferty. Reszta
   zlota to KOLOR: liczby w pasku, naglowki sekcji z cienka kreska pod
   spodem, strzalki. `--gold` jest gradientem, wiec kolor i kreska
   ida z `--yl`. Pilnuje tego ZamekWygladuTest (jedna zalewa na /konto).
--------------------------------------------------------------------- */
.ko-konto .ko-h{color:var(--yl);padding-bottom:8px;border-bottom:1px solid var(--yl)}
/* "Wszystkie ->" ma 44 px pod palcem, a naglowek nie rosnie (ujemny margines). */
.ko-konto .ko-h a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0 -14px auto}
.ko-konto .sts-h{margin:0 0 10px}
.ko-konto .pbp-arr{color:var(--yl)}

/* EDYTUJ PROFIL - JEDEN FORMULARZ, SZESC DZIALOW (233, tablica "Profil",
   regula 183). Telefon: jedna kolumna. Od 1024 px: lewa kolumna 320 px
   (zdjecia, okladka, spis dzialow - przyklejona), prawa - dzialy. Bez
   wewnetrznych pasow przewijania: przewija sie strona. */

/* Spis dzialow - tylko tam, gdzie jest na niego miejsce obok. */

/* Pusty pasek historii (`hidden`) zabieral 18 px + dwa odstepy flexa miedzy glowka a czterema liczbami (20.10). */
.pr2 .sts[hidden]{display:none}

/* JASNY MOTYW, BRAK OKLADKI: gradient mgly byl ciemny (rgba 9,9,11) i na beziu dawal brudna smuge,
   a guzik aparatu szary kwadrat. Pusta okladka dostaje paletowe, jasne tlo. */
:root[data-theme="light"] .pr2-okl.bez .pokladka{background:linear-gradient(165deg,#EFE3BF 0%,#F3EBD3 55%,var(--p-tlo) 100%)}
:root[data-theme="light"] .pr2-okl.bez .pr2-okl-mgla{background:linear-gradient(180deg,rgba(243,237,221,0) 0%,var(--p-tlo) 100%)}

/* B4-02 "Uzupelnij profil · N z 5" (zloty standard bloku 4). */
.pr4-uz{order:3;padding:14px 14px 6px;border-radius:14px;border:1px solid var(--p-ramka2);background:var(--p-karta)}
.pr4-uz-g{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:1.8px;font-weight:800;color:var(--p-szary3)}
.pr4-uz-g b{letter-spacing:0;font-size:12.5px;color:var(--p-zl)}
.pr4-uz-pas{display:flex;gap:4px;margin:10px 0 6px}
.pr4-uz-pas i{flex:1;height:3px;border-radius:2px;background:var(--p-ramka2)}
.pr4-uz-pas i.on{background:var(--p-zloto)}
.pr4-uz-w{display:flex;align-items:center;gap:12px;padding:10px 0;min-height:48px;color:inherit;text-decoration:none}
.pr4-uz-w+.pr4-uz-w{border-top:1px solid var(--p-ramka)}
.pr4-uz-n{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--p-zl);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--p-zl)}
.pr4-uz-ok .pr4-uz-n{background:var(--p-zloto);border:0}
.pr4-uz-n svg{width:16px;height:16px;fill:none;stroke:#15120A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pr4-uz-t{flex:1;min-width:0}
.pr4-uz-t b{display:block;font-size:14.5px;font-weight:800;color:var(--p-guzik)}
.pr4-uz-t small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--p-szary3)}
.pr4-uz-ok .pr4-uz-t b{text-decoration:line-through;color:var(--p-szary3)}
.pr4-uz-s{flex:none;width:16px;height:16px;fill:none;stroke:var(--p-szary3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* B4-10 / B4-11 Edytuj profil (zloty standard bloku 4). */
.pe4-zdj{display:flex;align-items:center;gap:14px;padding:18px 22px 4px}
.pe4-zdj form{margin:0}
.pe4-tw{display:block;cursor:pointer}
.pe4-tw-o{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:14px;overflow:hidden;
  border:1.5px solid var(--e-chip-r);background:var(--e-chip-tlo);color:var(--e-chip-t);font-size:22px;font-weight:800}
.pe4-tw-o img{width:100%;height:100%;object-fit:cover}
.pe4-zdj-t{display:flex;flex-direction:column;gap:2px}
.pe4-zl,.pe4-szary{cursor:pointer;display:inline-flex;align-items:center;min-height:28px;text-decoration:none}
.pe4-zl{font-size:15px;font-weight:800;color:var(--e-akcja)}
.pe4-szary{font-size:13px;font-weight:700;color:var(--e-pod)}
.pe4-dwa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pe4 .e2-nad{text-transform:none}
.pe4-licz{text-align:right}
.pe4-chipy{display:flex;flex-wrap:wrap;gap:8px}
.pe4-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--e-pole-r);
  background:var(--e-pole);color:var(--e-t);font:700 14px Manrope,system-ui,sans-serif;cursor:pointer}
.pe4-chip-d{color:var(--e-akcja);border-color:var(--e-chip-r)}
.pe4-uwaga{margin:18px 22px 0;font-size:13px;line-height:1.5;font-weight:700;color:var(--e-pod)}
.pe4-okno{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--e-ramka);border-radius:14px;background:var(--e-karta);color:var(--e-t)}
.pe4-okno::backdrop{background:rgba(0,0,0,.6)}
.pe4-okno-in{display:flex;flex-direction:column;gap:10px;padding:18px}
.pe4-poziomy{display:flex;flex-direction:column;gap:8px}
.pe4-poz{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:48px;padding:8px 12px;border-radius:12px;border:1px solid var(--e-pole-r);cursor:pointer}
.pe4-poz input{accent-color:#D9B64A;width:18px;height:18px}
.pe4-poz b{font-size:14.5px}
.pe4-poz small{flex-basis:100%;padding-left:28px;font-size:12.5px;color:var(--e-pod)}
@media (max-width:1023px){.pe4 .el-r{display:none !important}}
/* B4-10 laptop: rzad "Anuluj · Edytuj profil · Zapisz" stoi takze od 1024 px. */
@media (min-width:1024px){.el.pe4 .e2-pasek{display:flex;background:transparent;border:0;padding:0}}
/* B4-56 / B4-57 pytania o "Szukam pracy". */
.pr4-pyt{order:2;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--p-ramka2);background:var(--p-karta);margin:0}
.pr4-pyt>b{font-size:16px;font-weight:800;color:var(--p-guzik)}
.pr4-pyt>p{margin:0;font-size:13px;line-height:1.5;font-weight:600;color:var(--p-szary3)}
.pr4-pyt-g{display:flex;gap:8px}
.pr4-pyt-g .pr2-g-btn{flex:1}
.pr4-pyt-o{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--p-ramka2);cursor:pointer}
.pr4-pyt-o input{margin-top:3px;accent-color:#D9B64A;width:18px;height:18px}
.pr4-pyt-o b{display:block;font-size:14.5px;color:var(--p-guzik)}
.pr4-pyt-o small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--p-szary3)}