@charset "UTF-8";
/* Modul uzytkownika — wspolna powloka wizualna (prefiks `pf-`).
 *
 * Arkusz jest GLOBALNY (kompiluje sie do wwwroot/css/profile.css, linkowany z App.razor),
 * a nie scoped, i to jest decyzja, nie skrot. Ten sam slownik — karta, wiersz „etykieta:
 * wartosc", pigulka, przycisk, pole formularza — obsluguje CZTERY powierzchnie: profil,
 * uprawnienia, ustawienia uzytkownika i dwa okna (haslo, edycja). Dwa z nich `PopupContainer`
 * PORTALUJE poza DOM strony, wiec arkusz scoped by ich nie dosiegnal, a rozbicie regul po
 * komponentach daloby cztery rozjezdzajace sie kopie tego samego.
 *
 * Wzorzec i wywolanie jak `settings-chrome.scss` — ten sam problem rozwiazany tam wczesniej.
 *
 * ⚠ Zmiana klasy `pf-*` dotyka wszystkich czterech powierzchni naraz.
 */
/* =====================================================================
   Strona
   ===================================================================== */
/* Makieta stawia `height:100%; overflow:auto` na korzeniu, bo we wlasnej powloce nie mial jej
 * kto przewijac. W aplikacji przewija `.layout-item.content` (MainLayout: `overflow:auto`), wiec
 * wlasny kontener przewijania zrobilby tu DRUGI pasek w srodku pierwszego. `min-height` zamiast
 * `height` zostawia przewijanie powloce, a jednoczesnie kaze tlu pokryc cala kolumne. */
.pf {
  min-height: 100%;
  background: var(--bg);
}

.pf-wrap {
  max-width: 1420px;
  margin: 0 auto;
  padding: 16px 22px 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-cols {
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 12px;
  align-items: start;
}

.pf-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Pasek strony (Powrot / tytul / Zapisz) — uprawnienia i ustawienia. */
.pf-ph {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.pf-ph .sp {
  flex: 1;
}
.pf-ph .tt {
  font: 600 13px/1 var(--font-sans);
  color: var(--ink);
}
.pf-ph .sub {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-mute);
}
.pf-ph .div {
  width: 1px;
  height: 18px;
  background: var(--line);
}

/* =====================================================================
   Naglowek profilu
   ===================================================================== */
.pf-hd {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 15px 18px 0;
}

.pf-hd-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}

/* Kropka obecnosci rysowana przez profil, nie przez awatar: potrzebujemy jej takze dla
 * statusu "obecny", a UserAvatarComponent swiadomie go wtedy nie rysuje. */
.pf-av-wrap {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

/* Kafel awatara. W srodku siedzi UserAvatarComponent (zdjecie ACS, skorki, inicjaly), wiec
 * zamiast malowac wlasny gradient — jak robi to makieta — nadajemy jego markupowi ksztalt kafla.
 *
 * Gradient idzie accent -> accent-hov, NIE accent -> accent-ink jak w makiecie: w motywie
 * ciemnym --accent-ink jest JASNIEJSZY od akcentu (oklch .86 vs .68), wiec dolny koniec kafla
 * robil sie prawie bialy i biale inicjaly na nim znikaly. Z tego samego powodu tusz bierze
 * --on-accent (bialy w jasnym, granatowy w ciemnym) — ten sam token, ktorym rzadzi sie
 * przycisk .pf-btn.pri. */
.pf-av {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font: 600 17px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--on-accent, #fff);
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-hov) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.25);
  /* Wnetrza UserAvatarComponent NIE nadpisujemy — komponent dostaje parametr Size i sam
   * skaluje zdjecie, inicjaly i skorke. Wczesniej stalo tu pieciu nadpisan (w tym
   * max-width: 28px !important), ktore przezyly dokladnie do momentu przeniesienia tego
   * arkusza ze scoped do globalnego: wtedy ubyl jeden punkt specyficznosci, reguly komponentu
   * znow wygraly i zdjecie po cichu wrocilo do 28 px w kaflu 56 px. */
}

.pf-av-st {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ok);
  border: 2.5px solid var(--paper);
  z-index: 1;
}
.pf-av-st.remote {
  background: var(--warn);
}
.pf-av-st.absent {
  background: var(--ink-faint);
}

.pf-id {
  min-width: 0;
}
.pf-id h1 {
  margin: 0;
  font: 600 21px/1.15 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.pf-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.pf-tag .id {
  font: 500 11.5px/1 var(--font-mono);
  color: var(--ink-mute);
}
.pf-tag .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.pf-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* =====================================================================
   Przyciski
   ===================================================================== */
.pf-btn {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  color: var(--ink-soft);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.pf-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--ink);
}
.pf-btn.pri {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #fff);
  font-weight: 600;
}
.pf-btn.pri:hover:not(:disabled) {
  background: var(--accent-hov);
  border-color: var(--accent-hov);
  color: var(--on-accent, #fff);
}
.pf-btn.ico {
  padding: 0;
  width: 28px;
  justify-content: center;
}
.pf-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pf-btn svg {
  width: 13px;
  height: 13px;
}
.pf-btn.ico svg {
  width: 14px;
  height: 14px;
}

/* =====================================================================
   Poziom / XP
   ===================================================================== */
.pf-lvl {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0 12px;
  margin-top: 13px;
  border-top: 1px solid var(--line);
}
.pf-lvl .lv {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}
.pf-lvl .lv b {
  font: 600 15px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pf-bar {
  position: relative;
  flex: 1;
  height: 6px;
  min-width: 90px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.pf-bar > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 75%, transparent), var(--accent));
}

.pf-xp {
  font: 500 11.5px/1 var(--font-mono);
  color: var(--ink-mute);
  flex-shrink: 0;
}
.pf-xp b {
  color: var(--ink-soft);
  font-weight: 600;
}
.pf-xp.faint {
  color: var(--ink-faint);
}

.pf-wrap .micro,
.pf-ph .micro,
.pf-dlg .micro {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================================
   Karty
   ===================================================================== */
.pf-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pf-ch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  flex-wrap: wrap;
}
.pf-ch > b {
  font: 600 12.5px/1 var(--font-sans);
  color: var(--ink);
}
.pf-ch .sp {
  flex: 1;
}
.pf-ch .ic {
  color: var(--ink-faint);
  display: inline-flex;
}
.pf-ch .ic svg {
  width: 15px;
  height: 15px;
}

.pf-cb {
  padding: 13px 14px;
}

.pf-cf {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-2);
}
.pf-cf .sp {
  flex: 1;
}

/* Kompletnosc profilu */
.pf-cm {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pf-cm .b {
  position: relative;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.pf-cm .b > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--warn);
  border-radius: 999px;
}

/* =====================================================================
   Lista danych „etykieta: wartosc"
   ===================================================================== */
.pf-grp {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pf-grp + .pf-grp {
  margin-top: 15px;
}
.pf-grp.tight .pf-r {
  grid-template-columns: 132px 1fr;
  gap: 10px;
}

.pf-gh {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  padding-bottom: 7px;
}

.pf-r {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.pf-r:hover {
  background: var(--paper-2);
}
.pf-r + .pf-r {
  box-shadow: inset 0 1px 0 var(--line);
}

.pf-k {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--ink-mute);
}

.pf-v {
  font: 500 12.5px/1.4 var(--font-sans);
  color: var(--ink);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.pf-v.m {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pf-v svg {
  width: 13px;
  height: 13px;
  color: var(--ink-faint);
}

/* Dwie kolumny grup w karcie danych (wariant `two` z makiety). `align-items: start` jest
 * konieczne — bez niego kolumny rozciagaja sie do wspolnej wysokosci i grupa z mniejsza
 * liczba wierszy dostaje pustke rozpychajaca odstepy miedzy nimi. */
.pf-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  align-items: start;
}
.pf-two > div {
  min-width: 0;
}

.pf-empty {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--ink-faint);
}

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* =====================================================================
   KPI
   ===================================================================== */
.pf-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pf-kpi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s;
}
.pf-kpi:hover {
  border-color: var(--line-2);
}
.pf-kpi:disabled {
  cursor: default;
}
.pf-kpi .n {
  font: 600 24px/1 var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pf-kpi .l {
  font: 400 11.5px/1.3 var(--font-sans);
  color: var(--ink-mute);
}
.pf-kpi .d {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--ink-faint);
}

/* =====================================================================
   Kompetencje
   ===================================================================== */
.pf-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.pf-fact {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 11px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pf-fact .l {
  font: 600 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.pf-fact .v {
  font: 600 13px/1.25 var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-fact .s {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--ink-mute);
}

.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  font: 500 11.5px/1 var(--font-sans);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pf-chip svg {
  width: 12px;
  height: 12px;
}
.pf-chip .n {
  font: 600 10px/1 var(--font-mono);
  color: var(--ink-faint);
}
.pf-chip.ok {
  background: var(--ok-soft);
  border-color: color-mix(in oklab, var(--ok) 32%, transparent);
  color: var(--ok-ink);
}
.pf-chip.acc {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--accent-ink);
}
.pf-chip.warn {
  background: var(--warn-soft);
  border-color: color-mix(in oklab, var(--warn) 32%, transparent);
  color: var(--warn-ink);
}
.pf-chip.tiny {
  height: 19px;
  font-size: 10.5px;
}

/* Histogram aktywnosci */
.pf-hist {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 110px;
}
.pf-hist > div {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}
.pf-hist > div:hover i {
  background: var(--accent);
}
.pf-hist > div.now i {
  background: var(--accent);
}
.pf-hist .tr {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}
.pf-hist i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in oklab, var(--accent) 42%, transparent);
  transition: background 0.12s;
}
.pf-hist .v {
  font: 600 10px/1 var(--font-mono);
  color: var(--ink-mute);
}
.pf-hist .m {
  font: 500 9.5px/1 var(--font-mono);
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* =====================================================================
   Os zdarzen
   ===================================================================== */
.pf-ev {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
}
.pf-ev + .pf-ev {
  border-top: 1px solid var(--line);
}
.pf-ev .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-2);
  margin-top: 5px;
}
.pf-ev .d.acc {
  background: var(--accent);
}
.pf-ev .d.ok {
  background: var(--ok);
}
.pf-ev .t {
  font: 400 12.5px/1.4 var(--font-sans);
  color: var(--ink-soft);
  min-width: 0;
  /* Licznik zwinietych powtorzen. Cichy — to metadana wiersza, nie jego tresc. */
}
.pf-ev .t b {
  font-weight: 600;
  color: var(--ink);
}
.pf-ev .t a {
  font-weight: 600;
  color: var(--accent-ink);
}
.pf-ev .t a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.pf-ev .t .x {
  font: 600 10px/1 var(--font-mono);
  color: var(--ink-faint);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 2px 5px;
  white-space: nowrap;
}
.pf-ev .w {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--ink-faint);
  white-space: nowrap;
}

/* =====================================================================
   Mini lista linkow
   ===================================================================== */
.pf-ll {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.pf-li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
}
.pf-li + .pf-li {
  border-top: 1px solid var(--line);
}
.pf-li:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.pf-li .ic {
  color: var(--ink-faint);
  display: inline-flex;
}
.pf-li .ic svg {
  width: 14px;
  height: 14px;
}
.pf-li .sp {
  flex: 1;
}
.pf-li .c {
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-faint);
}
.pf-li > svg {
  width: 13px;
  height: 13px;
  color: var(--ink-faint);
}

/* =====================================================================
   Stany poboczne
   ===================================================================== */
.pf-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  font: 400 11.5px/1.45 var(--font-sans);
  color: var(--accent-ink);
}
.pf-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pf-skel {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--ink-faint);
  padding: 4px 0;
}

.pf-blank {
  padding: 22px 14px;
  text-align: center;
  color: var(--ink-faint);
  font: 400 12px/1.5 var(--font-sans);
}

/* =====================================================================
   Dialogi (haslo, edycja uzytkownika)
   ===================================================================== */
.pf-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: grid;
  place-items: center;
  z-index: 1200;
  padding: 24px;
}

.pf-dlg {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--dialog-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
}

.pf-dh {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.pf-dh > .ic {
  color: var(--ink-faint);
  display: inline-flex;
}
.pf-dh > .ic svg {
  width: 16px;
  height: 16px;
}
.pf-dh .t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pf-dh .t b {
  font: 600 14px/1.2 var(--font-sans);
  color: var(--ink);
}
.pf-dh .t span {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-mute);
}
.pf-dh .sp {
  flex: 1;
}

.pf-db {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
}

.pf-df {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  flex-wrap: wrap;
}
.pf-df .sp {
  flex: 1;
}

/* =====================================================================
   Pola formularza
   ===================================================================== */
/* Tresc okna hostowanego przez `PopupContainer` (haslo, edycja uzytkownika). Chrome — pasek
 * tytulu i przyciski stopki — daje iPopup; tutaj tylko uklad pol. */
.pf-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 4px 2px 2px;
  min-width: 0;
}

/* Zakladki okna edycji przelaczaja sie WIDOCZNOSCIA, nie montowaniem: `@if` odmontowuje pola
 * nieaktywnej zakladki, a wtedy komunikat walidacji dla pola z drugiej zakladki nie ma gdzie sie
 * pokazac — uzytkownik dostaje odrzucony zapis bez wskazania, ktore pole jest zle. Ten sam wybor
 * zapadl w edytorze szablonow e-mail (tam z powodu re-inicjalizacji edytora). */
.pf-tabpane {
  display: none;
}
.pf-tabpane.on {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

/* Kontrolki DevExpressa zostawione dla list z wyszukiwaniem (firma, rola, tagboxy). Nadajemy im
 * szerokosc pola i zdejmujemy wlasny margines, zeby stanely w jednym rzedzie z polami natywnymi.
 * Ciemny motyw tych kontrolek jest juz obsluzony w tokens.css przez blok `:has(.edit, …)`. */
.pf-dx {
  min-width: 0;
}
.pf-dx > * {
  width: 100%;
}

.pf-f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.pf-f > label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 5px;
}
.pf-f .req {
  color: var(--danger);
}

.pf-in {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pf-in:hover {
  border-color: var(--ink-faint);
}
.pf-in:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}
.pf-in.bad {
  border-color: var(--danger);
}
.pf-in input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font: 400 12.5px/1 var(--font-sans);
  /* Przegladarka maluje wlasne tlo autouzupelnienia i pola wylaczonego — bez tego
   * na ciemnym motywie wychodzi jasny prostokat mimo ciemnego computed background. */
  color-scheme: dark light;
  appearance: none;
}
.pf-in input::placeholder {
  color: var(--ink-faint);
}
.pf-in input:disabled {
  color: var(--ink-mute);
  -webkit-text-fill-color: var(--ink-mute);
}
.pf-in.m input {
  font-family: var(--font-mono);
  font-size: 12px;
}
.pf-in .ib {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  display: inline-flex;
  padding: 0;
}
.pf-in .ib:hover {
  color: var(--ink);
}
.pf-in .ib svg {
  width: 14px;
  height: 14px;
}
.pf-in.tall {
  height: auto;
  min-height: 32px;
  padding: 5px 8px;
  flex-wrap: wrap;
}
.pf-in .tok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 21px;
  padding: 0 4px 0 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  font: 500 11.5px/1 var(--font-sans);
  color: var(--accent-ink);
}

.pf-hint {
  font: 400 11px/1.4 var(--font-sans);
  color: var(--ink-faint);
}

.pf-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 14px;
}

.pf-seg {
  display: inline-flex;
  padding: 2px;
  background: var(--paper-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  gap: 2px;
}
.pf-seg button {
  height: 25px;
  padding: 0 13px;
  border: none;
  background: none;
  border-radius: 999px;
  font: 500 11.5px/1 var(--font-sans);
  color: var(--ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Wybor na akcencie, nie na papierze. Makieta dawala tu `--paper` z cieniem, ale
   * w motywie ciemnym `--paper` jest CIEMNIEJSZY od pol formularza (`--paper-2`), a tor
   * przelacznika JASNIEJSZY — aktywna pigulka czytala sie jak wklesniecie, a caly przelacznik
   * jak kolejne pole. Akcent rozstrzyga to bez dwuznacznosci w obu motywach. */
}
.pf-seg button:hover {
  color: var(--ink-soft);
}
.pf-seg button.on {
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  color: var(--accent-ink);
  font-weight: 600;
}
.pf-seg button .n {
  font: 600 10px/1 var(--font-mono);
  opacity: 0.65;
}

/* Sila hasla + reguly */
.pf-str {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Cztery poziomy sily. Kolor niesie klasa na korzeniu, a nie styl inline na kazdym
   * segmencie — inaczej ta sama wartosc siedzialaby w piatym miejscu. Tusz etykiety idzie
   * z rodziny `-ink`, bo pisze po tle papieru, nie po wypelnieniu. */
}
.pf-str .seg {
  display: flex;
  gap: 3px;
  flex: 1;
}
.pf-str .seg i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--paper-3);
  transition: background 0.15s;
}
.pf-str .lb {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink-mute);
}
.pf-str.l0 .seg i.on {
  background: var(--danger);
}
.pf-str.l1 .seg i.on {
  background: var(--warn);
}
.pf-str.l2 .seg i.on {
  background: var(--accent);
}
.pf-str.l3 .seg i.on {
  background: var(--ok);
}
.pf-str.l0 .lb {
  color: var(--danger-ink);
}
.pf-str.l1 .lb {
  color: var(--warn-ink);
}
.pf-str.l2 .lb {
  color: var(--accent-ink);
}
.pf-str.l3 .lb {
  color: var(--ok-ink);
}

.pf-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}

.pf-rule {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 11.5px/1.6 var(--font-sans);
  color: var(--ink-mute);
}
.pf-rule.ok {
  color: var(--ink-soft);
}
.pf-rule .m {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-3);
  color: var(--ink-faint);
  flex-shrink: 0;
}
.pf-rule .m svg {
  width: 9px;
  height: 9px;
}
.pf-rule.ok .m {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.pf-match {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--font-sans);
  white-space: nowrap;
}
.pf-match svg {
  width: 13px;
  height: 13px;
}
.pf-match.ok {
  color: var(--ok-ink);
}
.pf-match.bad {
  color: var(--danger-ink);
}

/* Wybor z listy — zamiennik DxComboBox w oknach i ustawieniach */
.pf-sel {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font: 400 12.5px/1 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.pf-sel:hover {
  border-color: var(--ink-faint);
}
.pf-sel .sp {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-sel.ph {
  color: var(--ink-faint);
}
.pf-sel > svg {
  width: 13px;
  height: 13px;
  color: var(--ink-faint);
  flex-shrink: 0;
}

/* =====================================================================
   Ustawienia uzytkownika — wiersze powiadomien
   ===================================================================== */
.pf-nhead {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 16px;
  align-items: center;
  padding: 8px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.pf-nhead .ch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  text-align: center;
}

.pf-ngh {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pf-ngh b {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.pf-ngh .sp {
  flex: 1;
}

.pf-nrow {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 16px;
  align-items: center;
  padding: 8px 14px;
}
.pf-nrow + .pf-nrow {
  border-top: 1px solid var(--line);
}
.pf-nrow:hover {
  background: var(--paper-2);
}
.pf-nrow .nm {
  font: 500 12.5px/1.4 var(--font-sans);
  color: var(--ink);
}
.pf-nrow .ds {
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--ink-mute);
}
.pf-nrow .ch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  justify-items: center;
}

/* Przelacznik. Wlasny, a nie natywny `<input type=checkbox>`: ten maluje przegladarka i na
 * ciemnym motywie wychodzi jasny kwadrat niezaleznie od `background` — ta sama pulapka, ktora
 * w tym repo byla juz naprawiana dla pol wylaczonych (`color-scheme` + `appearance`). */
.pf-sw {
  position: relative;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper-3);
  cursor: pointer;
  padding: 0;
  transition: background 0.14s, border-color 0.14s;
}
.pf-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: transform 0.14s, background 0.14s;
}
.pf-sw.on {
  background: var(--accent);
  border-color: var(--accent);
}
.pf-sw.on::after {
  transform: translateX(16px);
  background: var(--on-accent, #fff);
}
.pf-sw:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Wlasny checkbox — ten sam powod co wyzej. */
.pf-cb2 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  color: var(--ink-faint);
}
.pf-cb2:hover {
  color: var(--ink-soft);
}
.pf-cb2.on {
  color: var(--accent);
}
.pf-cb2 svg {
  width: 16px;
  height: 16px;
}

.pf-skin {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
.pf-skin .ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-hov) 100%);
  color: var(--on-accent, #fff);
  font: 600 26px/1 var(--font-sans);
}
.pf-skin .ring.on {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--warn);
}
.pf-skin .ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================================
   Uprawnienia
   ===================================================================== */
.pf-strip {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  flex-wrap: wrap;
}
.pf-strip > div {
  padding: 8px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-strip > div + div {
  border-left: 1px solid var(--line);
}
.pf-strip > div.g b {
  color: var(--ok-ink);
}
.pf-strip > div.d b {
  color: var(--danger-ink);
}
.pf-strip b {
  font: 600 17px/1 var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pf-strip span {
  font: 600 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}

.pf-pm {
  display: grid;
  grid-template-columns: 284px 1fr;
  gap: 12px;
  align-items: start;
}

.pf-mods {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  max-height: 620px;
  overflow: auto;
}

.pf-mod {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: 500 12.5px/1.2 var(--font-sans);
  color: var(--ink-soft);
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}
.pf-mod:hover {
  background: var(--paper-2);
}
.pf-mod.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.pf-mod .sp {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-mod .c {
  font: 600 10.5px/1 var(--font-mono);
  color: var(--ink-faint);
}
.pf-mod.on .c {
  color: var(--accent-ink);
}
.pf-mod .mini {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.pf-mod .mini > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--accent);
}

.pf-pr {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
}
.pf-pr + .pf-pr {
  border-top: 1px solid var(--line);
}
.pf-pr:hover {
  background: var(--paper-2);
}
.pf-pr .nm {
  font: 500 12.5px/1.35 var(--font-sans);
  color: var(--ink);
}

.pf-src {
  font: 600 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.pf-tri {
  display: inline-flex;
  padding: 2px;
  background: var(--paper-3);
  border-radius: var(--radius);
  gap: 2px;
}
.pf-tri button {
  height: 22px;
  padding: 0 9px;
  border: none;
  background: none;
  border-radius: calc(var(--radius) - 2px);
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  cursor: pointer;
}
.pf-tri button:hover {
  color: var(--ink);
}
.pf-tri button.on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.pf-tri button.on.g {
  background: var(--ok);
  color: var(--on-accent, #fff);
}
.pf-tri button.on.d {
  background: var(--danger);
  color: var(--on-accent, #fff);
}

.pf-srch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  min-width: 230px;
}
.pf-srch svg {
  width: 13px;
  height: 13px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.pf-srch input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font: 400 12px/1 var(--font-sans);
  color-scheme: dark light;
  appearance: none;
}
.pf-srch input::placeholder {
  color: var(--ink-faint);
}

/* =====================================================================
   Progi
   ===================================================================== */
/* Ponizej ~1180 px prawa kolumna nie miesci juz kafli KPI w trzech torach — stos schodzi
 * pod tresc glowna zamiast sciskac obie kolumny do nieczytelnej szerokosci. */
@media (max-width: 1180px) {
  .pf-cols {
    grid-template-columns: 1fr;
  }
  .pf-pm {
    grid-template-columns: 1fr;
  }
  .pf-mods {
    max-height: 260px;
  }
}
@media (max-width: 720px) {
  .pf-hd-top {
    grid-template-columns: auto 1fr;
  }
  .pf-acts {
    grid-column: 1/-1;
    flex-wrap: wrap;
    padding-bottom: 4px;
  }
  .pf-facts {
    grid-template-columns: 1fr;
  }
  .pf-r {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  /* Dwie kolumny grup nie mieszaja sie juz z etykieta obok wartosci — obie schodza do jednej. */
  .pf-two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pf-two > div + div .pf-grp:first-child {
    margin-top: 15px;
  }
  .pf-grid2,
  .pf-rules {
    grid-template-columns: 1fr;
  }
}
/* =====================================================================
   Ustawienia uzytkownika — dopelnienia
   ===================================================================== */
/* Podglad awatara jest waski i staly, lista powiadomien ma dostac reszte. */
.pf-cols--settings {
  grid-template-columns: 300px 1fr;
}

/* Jedna kolumna kontrolek, nie dwie jak w makiecie: powiadomienie ma w systemie JEDNA flage,
 * nie osobna dla aplikacji i poczty (`NotificationSettingsDTO` to jeden `bool` na zdarzenie).
 * Druga kolumna byla by obietnica kanalu, ktorego nie ma. */
.pf-nrow .ch--single {
  grid-template-columns: 1fr;
}

/* Natywny `<select>` w wierszu ustawien. Renderuje go przegladarka, wiec `color-scheme` jest
 * konieczne — bez niego lista rozwijana wychodzi jasna na ciemnym motywie. */
.pf-sel-native {
  height: 28px;
  max-width: 100%;
  padding: 0 8px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink);
  font: 400 12px/1 var(--font-sans);
  cursor: pointer;
  color-scheme: dark light;
}
.pf-sel-native:hover:not(:disabled) {
  border-color: var(--ink-faint);
}
.pf-sel-native:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pf-sel-native option {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 1180px) {
  .pf-cols--settings {
    grid-template-columns: 1fr;
  }
}
/* =====================================================================
   Uprawnienia — dopelnienia
   ===================================================================== */
/* Rzad narzedzi nad master-detailem: strip statystyk, szukanie, filtry zrodla. */
.pf-toolrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pf-grow {
  flex: 1;
}

/* „Niezapisane" — ostrzezenie, nie blad: nic jeszcze nie poszlo nie tak. */
.pf-dirty {
  color: var(--warn-ink);
}

/* Wybor zestawu do przypiecia. */
.pf-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pf-pick__opt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.pf-pick__opt:hover {
  border-color: var(--accent);
}
.pf-pick__opt b {
  font: 600 12px/1.2 var(--font-sans);
  color: var(--ink);
}
.pf-pick__opt span {
  font: 500 10px/1 var(--font-mono);
  color: var(--ink-faint);
}

/* Krzyzyk „odepnij" wewnatrz pigulki. */
.pf-chip__x {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}
.pf-chip__x:hover {
  opacity: 1;
}
.pf-chip__x svg {
  width: 11px;
  height: 11px;
}

/* Nazwa uprawnienia z przypisem zrodla pod nia — dwa wiersze w jednej komorce siatki. */
.pf-pr .nm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* =====================================================================
   Okna — szerokosc
   ===================================================================== */
/* Podloga szerokosci tresci okna.
 *
 * DWIE liczby musza sie zgadzac z `Width` podanym `PopupContainer`owi w miejscu hostujacym:
 * iPopup daje `.popup__wrapper` `padding: 40px` ORAZ `overflow: hidden`, wiec pole tresci to
 * `Width - 80px`. Podloga wieksza od tego pola nie rozepchnie okna — zostanie PRZYCIETA.
 *
 * Domyslna szerokosc `.popup__wrapper` to 700px, wiec `Width` mniejsze od 700 ZWEZA okno.
 * Dlatego oba okna dostaly wartosci powyzej tego progu: edycja 880px (tresc 800), haslo 760px
 * (tresc 680).
 *
 * `min()` zamiast stalej, zeby na waskim ekranie nadal miescilo sie bez przewijania w poziomie. */
.edit.pf-form {
  min-width: min(792px, 100%);
}

.change_password.pf-form {
  min-width: min(672px, 100%);
}

/* =====================================================================
   Wyszukiwanie w naglowku karty
   ===================================================================== */
/* Wariant `.pf-srch` do postawienia w `.pf-ch` — nizszy i bez sztywnego minimum, zeby nie
 * rozpychal naglowka waskiej kolumny modulow. */
.pf-srch--sm {
  height: 26px;
  min-width: 0;
  flex: 1;
}
.pf-srch--sm input {
  font-size: 11.5px;
}

/* =====================================================================
   Pasek strony przyklejony + wewnetrzne przewijanie list
   ===================================================================== */
/* Pasek z „Powrot" i „Zapisz" zostaje widoczny przy przewijaniu. Przewija `.layout-item.content`
 * (MainLayout: `overflow:auto`), a `.pf` nie ustawia zadnego `overflow`, wiec `sticky` ma wzgledem
 * czego dzialac — gdyby ktos kiedys dolozyl `.pf { overflow }`, przyklejenie przestanie dzialac
 * BEZ zadnego bledu, to pierwsza rzecz do sprawdzenia. */
.pf-ph {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Dlugie listy wierszy przewijaja sie WEWNATRZ karty, zeby naglowek karty i wiersz z opisem
 * kolumn zostaly na miejscu — przy ~20 ustawieniach powiadomien albo 19 uprawnieniach modulu
 * przewijanie calej strony gubilo informacje, ktora kolumna jest ktora.
 *
 * Wysokosc adaptacyjna z podloga: `calc` schodzi z wysokoscia okna, a `max()` nie pozwala
 * liscie zwinac sie do kilku wierszy na niskim ekranie. Pasek przewijania jest granatowy dzieki
 * selektorom POTOMNYM w tokens.css (`body:has(.settings-page) ::-webkit-scrollbar` itd.) —
 * bez nich strona z samych divow dostaje czarny pasek Chromium. */
.pf-nrows {
  max-height: max(280px, 100vh - 330px);
  overflow: auto;
  /* Bez tego dojechanie do konca listy zaczyna przewijac strone pod nia. */
  overscroll-behavior: contain;
}

/* Lista modulow trzyma sie tej samej formuly, zeby obie kolumny konczyly sie na tej samej linii. */
.pf-mods {
  max-height: max(280px, 100vh - 330px);
}

/* Pasek zakladek okna. W makiecie segmentowany przelacznik siedzial w NAGLOWKU dialogu, wiec
 * oddzielala go od pol krawedz naglowka. `PopupContainer` naglowek trzyma sam, wiec strip
 * dostaje wlasny pasek z kreska — inaczej wisi bezposrednio nad pierwsza etykieta i czyta sie
 * jak element formularza, a nie jak przelacznik sekcji.
 *
 * Ujemne marginesy rozciagaja kreske na cala szerokosc tresci okna, mimo ze `.pf-form` ma
 * wlasny padding. */
.pf-formbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -4px -2px 0;
  padding: 0 2px 13px;
  border-bottom: 1px solid var(--line);
}

/* =====================================================================
   Typografia w oknach
   ===================================================================== */
/* Rozmiary bazowe slownika `pf-*` pochodza z makiety projektowanej pod GESTE ekrany: etykieta
 * 10 px, regula 11.5 px, pole 12.5 px. Na liscie uprawnien czy ustawien to sluszne — mieszcza sie
 * dziesiatki wierszy. W oknie o szerokosci 760-880 px nie ma czego oszczedzac, a napisy tej
 * wielkosci sa po prostu za male do czytania.
 *
 * Podwyzka jest ZAKRESOWA do tresci okien (`.pf-form`) — profil, uprawnienia i ustawienia
 * zostaja przy gestych rozmiarach, bo tam dlugie listy musza sie miescic.
 *
 * Wraz z rozmiarem rosna odstepy i wysokosci pol: sam wiekszy tekst w tych samych 32 px
 * wysokosci pola wyglada na wcisniety, a reguly hasla zaczynaja sie zlewac. */
.pf-form {
  /* Reguly hasla — najwazniejszy tekst w tym oknie, bo mowi, czego brakuje. */
}
.pf-form .pf-f > label {
  font-size: 11px;
  letter-spacing: 0.07em;
}
.pf-form .pf-in {
  height: 36px;
}
.pf-form .pf-in input {
  font-size: 13.5px;
}
.pf-form .pf-in.m input {
  font-size: 13px;
}
.pf-form .pf-in .ib svg {
  width: 16px;
  height: 16px;
}
.pf-form .pf-in.tall {
  min-height: 36px;
}
.pf-form .pf-in .tok {
  height: 23px;
  font-size: 12.5px;
}
.pf-form .pf-rules {
  gap: 6px 20px;
}
.pf-form .pf-rule {
  font-size: 13px;
  line-height: 1.45;
  gap: 8px;
}
.pf-form .pf-rule .m {
  width: 16px;
  height: 16px;
}
.pf-form .pf-rule .m svg {
  width: 11px;
  height: 11px;
}
.pf-form .pf-str .seg i {
  height: 5px;
}
.pf-form .pf-str .lb {
  font-size: 11px;
}
.pf-form .pf-match {
  font-size: 12px;
}
.pf-form .pf-hint {
  font-size: 12px;
  line-height: 1.5;
}
.pf-form .pf-seg button {
  height: 28px;
  padding: 0 15px;
  font-size: 12.5px;
}
.pf-form .pf-sel {
  height: 36px;
  font-size: 13.5px;
}