/* ==========================================================================
   Content/ui/profile.css — страница профиля, вариант Б «Обложка и вкладки» (docs/design/profile/variant-b*.html).
   Классы макета vb-* здесь pf-*, компоненты kit.css (.badge, .alert, .m-kv, .btn) — свои pf-* или tsu-btn из accounts.css:
   имена Bootstrap 4 (.badge, .alert, .btn, .row, .col) на сайте заняты. Токены — --tsu-* из accounts.css.
   Подключение: @section styles в Views/Profile/Index.cshtml (после accounts.css и shell.css).
   ========================================================================== */

.pf-page { display: flex; flex-direction: column; gap: 20px; font-size: 14px; line-height: 1.45; }
.pf-page [hidden] { display: none !important; }
.pf-page :where(h1, h2, h3, p, dl, dd, ol, ul, figure) { margin: 0; }
.pf-page dt { font-weight: 400; }
.pf-page label { margin: 0; }
.pf-page a:hover, .pf-page a:focus { text-decoration: none; }
.pf-page form { margin: 0; }
.pf-m, .pf-link.pf-m { display: none; }   /* видно только на телефоне */
.pf-ls { display: none; }                 /* короткая подпись (до 1200 px) */
.pf-min0 { min-width: 0; }
.pf-muted { color: var(--tsu-text-muted); }
.pf-strong { font-weight: 600; }
.pf-t13 { font-size: 13px; }

/* значки из спрайта _ProfileIcons */
.pi { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.pi.s14 { width: 14px; height: 14px; } .pi.s18 { width: 18px; height: 18px; } .pi.s22 { width: 22px; height: 22px; }

/* ---------- бейджи ---------- */
.pf-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: 12px; background: var(--tsu-surface-muted); color: var(--tsu-text-muted); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pf-b-info { background: var(--tsu-primary-soft); color: var(--tsu-primary); }
.pf-b-warning { background: var(--tsu-warning-soft); color: var(--tsu-warning-fg); }
.pf-b-danger { background: var(--tsu-danger-soft); color: var(--tsu-danger-fg); }
.pf-b-success { background: var(--tsu-success-soft); color: var(--tsu-success-fg); }
.pf-b-outline { height: 22px; padding: 0 8px; border: 1px solid var(--tsu-border-strong); background: transparent; color: var(--tsu-text-muted); }

/* ---------- плашки ---------- */
.pf-alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-md); background: var(--tsu-surface); font-size: 14px; line-height: 1.5; }
.pf-alert > .pi:first-child { margin-top: 1px; }
.pf-alert-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-alert-body.g4 { gap: 4px; }
.pf-alert-info { border-color: transparent; background: var(--tsu-primary-soft); }
.pf-alert-info > .pi:first-child { color: var(--tsu-primary); }
.pf-alert-warn { border-color: transparent; background: var(--tsu-warning-soft); }
.pf-alert-warn > .pi:first-child { color: var(--tsu-warning-fg); }
.pf-alert-danger { border-color: transparent; background: var(--tsu-danger-soft); }
.pf-alert-danger > .pi:first-child { color: var(--tsu-danger-fg); }
.pf-alert a { color: var(--tsu-primary); }
.pf-alert a:hover { text-decoration: underline; }
.pf-alert .tsu-btn { white-space: normal; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; text-align: left; }

/* ---------- обложка: полоса 64 px, фото 136 px, ФИО и кнопки в одной строке ---------- */
.pf-cover { position: relative; border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-lg); background: var(--tsu-surface); box-shadow: var(--tsu-shadow-card); }
.pf-band { height: 64px; border-radius: 15px 15px 0 0;
  background:
    radial-gradient(circle at 1px 1px, rgb(0 114 188 / .14) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(110deg, #d6e7f5 0%, #e9f2fa 46%, #f3f7fb 70%, #e2eef8 100%); }
.pf-body { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 0 24px; padding: 0 24px 18px; }
.pf-body.pf-nophoto { grid-template-columns: minmax(0, 1fr); }
.pf-pcol { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; margin-top: -44px; }
.pf-photo { position: relative; flex-shrink: 0; width: 136px; height: 136px; overflow: hidden; border: 4px solid var(--tsu-surface); border-radius: 16px; background: var(--tsu-surface-muted); box-shadow: 0 4px 14px rgb(18 22 31 / .14); }
.pf-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-photo-btn { position: absolute; right: 6px; bottom: 6px; left: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; margin: 0;
  border-radius: 7px; background: rgb(18 22 31 / .62); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pf-photo-btn:hover { background: rgb(18 22 31 / .8); }
.pf-pside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-mini { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-mini > img, .pf-mini > #cropped-avatar { position: static; display: block; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--tsu-border); border-radius: 50%; background: var(--tsu-surface-muted); object-fit: cover; }
.pf-mini-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pf-mini-cap { font-size: 12px; color: var(--tsu-text-muted); }
.pf-link { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; color: var(--tsu-primary); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.pf-link:hover, .pf-page a.pf-link:hover { color: var(--tsu-primary-hover); text-decoration: underline; }

.pf-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 14px; }
.pf-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.pf-name { display: flex; flex: 1 1 300px; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.pf-h1 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; color: var(--tsu-text); }
.pf-acts { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-acts .tsu-btn--outline { border-color: var(--tsu-border-strong); }
.pf-gi { color: var(--tsu-text-muted); }
.pf-gi:hover { background: var(--tsu-surface-muted); color: var(--tsu-text); }
.pf-gi .pi { width: 18px; height: 18px; }
.pf-sub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.pf-fact { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-left: 8px; overflow-wrap: anywhere; }
.pf-sub-row > .pf-fact:first-child { margin-left: 0; }
.pf-fact > .pi { color: var(--tsu-text-subtle); }

/* полоса действий администратора: частые действия на виду, остальное — «Ещё» */
.pf-adm { position: relative; display: flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: 6px; margin-top: 2px; padding: 6px;
  border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-md); background: var(--tsu-surface-muted); }
.pf-adm-l { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tsu-text-subtle); }
.pf-adm-g { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-adm-g > form { display: flex; }
.pf-adm .tsu-btn--outline { border-color: var(--tsu-border-strong); background: var(--tsu-surface); }
.pf-adm .tsu-btn--outline:hover { background: var(--tsu-surface-muted); }
.tsu-btn.pf-warn, .tsu-btn.pf-warn:hover { color: var(--tsu-warning-fg); }
.pf-name .tsu-btn--outline { border-color: var(--tsu-border-strong); }

/* меню «Ещё» */
.pf-dd { position: relative; display: flex; }
.pf-dd > .tsu-btn .pi:last-child { margin-left: -2px; transition: transform .15s ease; }
.pf-dd.is-open > .tsu-btn .pi:last-child { transform: rotate(180deg); }
.pf-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; display: none; flex-direction: column; gap: 1px; width: 344px; padding: 6px;
  border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-md); background: var(--tsu-surface); box-shadow: var(--tsu-shadow-overlay); }
.pf-dd.is-open > .pf-menu { display: flex; }
.pf-menu > form { display: flex; }
.pf-mg { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tsu-text-subtle); }
.pf-mg:first-child { padding-top: 6px; }
.pf-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin: 0; padding: 7px 10px; border: 0; border-radius: var(--tsu-radius-sm); background: none;
  font-family: inherit; font-size: 14px; line-height: 1.4; text-align: left; color: var(--tsu-text); cursor: pointer; }
.pf-mi:hover, .pf-mi:focus { background: var(--tsu-surface-muted); color: var(--tsu-text); }
.pf-mi > .pi { color: var(--tsu-text-muted); }
.pf-hint { margin-left: auto; padding-left: 8px; font-size: 12px; white-space: nowrap; color: var(--tsu-text-subtle); }
.pf-mi.danger, .pf-mi.danger > .pi { color: var(--tsu-danger-fg); }
.pf-mi.danger:hover { background: var(--tsu-danger-soft); color: var(--tsu-danger-fg); }
.pf-hr { flex-shrink: 0; height: 1px; margin: 5px 0; background: var(--tsu-border); }

/* вкладки — нижний край обложки; на телефоне вместо них заголовки-аккордеон */
.pf-tabs { display: flex; gap: 4px; padding: 0 16px; border-top: 1px solid var(--tsu-border); overflow-x: auto; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { display: flex; flex-shrink: 0; align-items: center; gap: 8px; margin: 0; padding: 14px 10px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  font-family: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--tsu-text-muted); cursor: pointer; }
.pf-tab > .pi { color: var(--tsu-text-subtle); }
.pf-tab:hover { color: var(--tsu-text); }
.pf-tab.on { border-bottom-color: var(--tsu-primary); color: var(--tsu-primary); }
.pf-tab.on > .pi { color: var(--tsu-primary); }
.pf-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--tsu-surface-muted); color: var(--tsu-text-muted); font-size: 12px; font-weight: 600; }
.pf-tab.on .pf-n, .pf-acc[aria-expanded="true"] .pf-n { background: var(--tsu-primary-soft); color: var(--tsu-primary); }
.pf-acc { display: none; }
.pf-pane { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ---------- содержимое вкладок ---------- */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; align-items: start; gap: 20px; }
.pf-grid.eq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid.one { grid-template-columns: minmax(0, 1fr); }
.pf-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pf-panel { min-width: 0; border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-md); background: var(--tsu-surface); box-shadow: var(--tsu-shadow-card); }
.pf-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 52px; padding: 10px 20px; border-bottom: 1px solid var(--tsu-border); }
.pf-ph > .pi { color: var(--tsu-text-muted); }
.pf-ph h2, .pf-ph h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tsu-text); }
.pf-meta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--tsu-text-subtle); }
.pf-ph-act { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: auto; }
.pf-ph-act .tsu-btn--outline, .pf-pf .tsu-btn--outline, .pf-a .tsu-btn--outline, .pf-inl .tsu-btn--outline { border-color: var(--tsu-border-strong); }
.pf-ml { margin-left: auto; }
.pf-pb { padding: 16px 20px; }
.pf-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; border-top: 1px solid var(--tsu-border); }
.pf-sec { border-top: 1px solid var(--tsu-border); }
.pf-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 20px 0; }
.pf-sh > .pi { color: var(--tsu-text-muted); }
.pf-sh h3 { font-size: 14px; font-weight: 600; }
.pf-sec > .pf-pb { padding-top: 12px; }
.pf-sec-pad { padding: 12px 20px 16px; }

/* список «подпись — значение»: колонка подписей по самой длинной подписи */
.pf-kv { display: grid; grid-template-columns: minmax(var(--kv-k, 150px), max-content) minmax(0, 1fr); align-items: start; gap: 10px 20px; font-size: 14px; line-height: 1.45; }
.pf-kvw { --kv-k: 228px; }   /* панель с подразделами: одна ширина подписей во всех списках панели */
.pf-kv > dt { color: var(--tsu-text-muted); }
.pf-kv > dd { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.pf-kv > dd.pf-h { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }
.pf-kv > dd.pf-h > span { min-width: 0; }
.pf-kv > dt.pf-f { padding-top: 6px; }
.pf-sub { display: block; font-size: 12px; line-height: 1.45; color: var(--tsu-text-subtle); }
.pf-mono { font-family: var(--tsu-font-mono); font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere; }
.pf-inl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-inl .tsu-input { width: 180px; height: 32px; padding: 0 10px; font-size: 13px; }
.pf-empty { color: var(--tsu-text-subtle); }

/* кнопки-значки в строках */
.pf-ib { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0;
  border: 1px solid transparent; border-radius: var(--tsu-radius-sm); background: transparent; color: var(--tsu-text-muted); cursor: pointer; }
.pf-ib.sm { width: 28px; height: 28px; margin: -4px 0; }
.pf-ib:hover, .pf-ib:focus { background: var(--tsu-surface-muted); color: var(--tsu-text); }
.pf-ib.danger { color: var(--tsu-danger-fg); }
.pf-ib.danger:hover { background: var(--tsu-danger-soft); color: var(--tsu-danger-fg); }
.pf-ib .tsu-icon { width: 16px; height: 16px; }

/* строки с действиями (учётные записи, контакты, инструкции): значок, подпись над значением, действия справа */
.pf-svc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 20px; border-top: 1px solid var(--tsu-border); color: var(--tsu-text); }
.pf-svc:first-child, .pf-ph + .pf-svc { border-top: 0; }
a.pf-svc:hover { background: var(--tsu-surface-muted); color: var(--tsu-text); }
.pf-svc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-tile { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--tsu-radius-sm); background: var(--tsu-primary-soft); color: var(--tsu-primary); }
.pf-tile.mute { background: var(--tsu-surface-muted); color: var(--tsu-text-muted); }
.pf-tile > img { display: block; width: 16px; height: 16px; }
.pf-t { font-size: 13px; line-height: 1.35; color: var(--tsu-text-muted); }
.pf-val { font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; color: var(--tsu-text); }
a.pf-val { color: var(--tsu-primary); }
a.pf-val:hover { text-decoration: underline; }
.pf-val.pf-empty { font-weight: 400; color: var(--tsu-text-subtle); }
.pf-vis { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--tsu-text-subtle); }
.pf-vis.adm { color: var(--tsu-warning-fg); }
.pf-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.pf-a > .pi { color: var(--tsu-text-subtle); }

/* пустое состояние внутри панели */
.pf-es { display: flex; align-items: center; gap: 16px; padding: 20px; }
.pf-es-ic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tsu-primary-soft); color: var(--tsu-primary); }
.pf-es-txt { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; min-width: 0; }
.pf-es0 { padding: 16px 20px; font-size: 14px; color: var(--tsu-text-subtle); }

/* карточка подтверждения */
.pf-ver-b { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.pf-ver ol { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; list-style: decimal; font-size: 14px; line-height: 1.5; }
.pf-col8 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-step { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-md); font-size: 13px; line-height: 1.4; }
.pf-step b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; }
.pf-step-n { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tsu-primary-soft); color: var(--tsu-primary); font-size: 12px; font-weight: 700; }
.pf-step.done .pf-step-n { background: var(--tsu-success-soft); color: var(--tsu-success-fg); }
.pf-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer; }
.pf-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--tsu-primary); }
.pf-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px; border: 1.5px dashed var(--tsu-border-strong); border-radius: var(--tsu-radius-md); background: var(--tsu-bg); }
.pf-drop > .pi { color: var(--tsu-text-muted); }
.pf-drop-txt { display: flex; flex: 1 1 220px; flex-direction: column; gap: 2px; min-width: 0; }
.pf-drop input[type="file"] { max-width: 100%; font-size: 13px; color: var(--tsu-text-muted); }
.pf-drop input[type="file"]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--tsu-border-strong); border-radius: var(--tsu-radius-sm);
  background: var(--tsu-surface); color: var(--tsu-text); font: 600 13px var(--tsu-font-sans); cursor: pointer; }
.pf-files { display: flex; flex-direction: column; border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-md); }
.pf-file { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-top: 1px solid var(--tsu-border); font-size: 14px; }
.pf-file:first-child { border-top: 0; }
.pf-file > .pi { color: var(--tsu-text-muted); }
.pf-file-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.pf-adm-ver { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; gap: 16px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.pf-field textarea.tsu-input { min-height: 76px; font-size: 14px; }
.pf-field .tsu-select { width: 100%; }
.pf-ver-sep { height: 1px; background: var(--tsu-border); }

/* боковые подсказки */
.pf-help p + p { margin-top: 0; }

/* ---------- адаптив ---------- */
@media (max-width: 1199.98px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .pf-lf { display: none; } .pf-ls { display: inline; }
  .pf-adm-l .pf-lt { display: none; }   /* на 1024–1199 у полосы только значок щита, подпись — в title */
}
@media (max-width: 1023.98px) {
  .pf-grid, .pf-grid.eq { grid-template-columns: minmax(0, 1fr); }
  /* кнопки обложки — своей строкой под ФИО, ровной сеткой */
  .pf-head { display: contents; }   /* ФИО → роли и почта → кнопки → полоса администратора */
  .pf-name { flex: 0 1 auto; order: 1; } .pf-sub-row { order: 2; } .pf-acts { order: 3; } .pf-adm { order: 4; }
  .pf-acts.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-acts.two > .tsu-btn { width: 100%; }
  .pf-adm { display: grid; grid-template-columns: minmax(0, 1fr); align-self: stretch; gap: 6px; }
  .pf-adm-l { padding: 2px 4px 0; }
  .pf-adm-l .pf-lt { display: inline; }
  .pf-tabs { padding: 0 8px; }
  .pf-tab { padding: 14px 6px 12px; }
  .pf-adm-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-adm-g > .tsu-btn, .pf-adm-g > form > .tsu-btn, .pf-adm-g > .pf-dd > .tsu-btn { width: 100%; }
  .pf-dd { position: static; }
  .pf-menu { top: calc(100% + 6px); left: 0; width: min(344px, 100%); }
}
@media (max-width: 767.98px) {
  .pf-page { gap: 12px; }
  span.pf-m { display: inline; } .pf-link.pf-m { display: inline-flex; } .pf-d { display: none; }
  .pf-band { height: 48px; }
  .pf-body { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 16px 16px; }
  .pf-pcol { flex-direction: row; align-items: flex-end; gap: 14px; margin-top: -36px; }
  .pf-photo { width: 108px; height: 108px; border-radius: 14px; }
  .pf-photo-btn { display: none; }
  .pf-pside { flex: 1 1 auto; gap: 10px; padding-bottom: 4px; }
  .pf-mini > img { width: 28px; height: 28px; }
  .pf-info { padding-top: 0; }
  .pf-body.pf-nophoto .pf-info { padding-top: 14px; }
  .pf-h1 { font-size: 24px; }
  .pf-sub-row .pf-fact { flex-basis: 100%; margin-left: 0; }
  .pf-acts > .tsu-btn--primary, .pf-acts > .tsu-btn--outline:first-child { flex: 1 1 100%; min-width: 0; height: auto; min-height: 40px; padding: 8px 12px; white-space: normal; text-align: center; }
  .pf-acts > .pf-gi { width: auto; height: 36px; padding: 0 10px; gap: 6px; font-size: 13px; }
  .pf-acts.two > .tsu-btn { flex: initial; padding: 0 10px; }
  .pf-adm-g > .tsu-btn, .pf-adm-g > form > .tsu-btn, .pf-adm-g > .pf-dd > .tsu-btn { height: auto; min-height: 36px; padding: 6px 8px; line-height: 1.25; white-space: normal; text-align: center; }
  .pf-menu { width: 100%; }
  /* вкладки → заголовки разделов друг под другом */
  .pf-tabs { display: none; }
  .pf-acc { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 0 14px 0 16px; border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-md);
    background: var(--tsu-surface); box-shadow: var(--tsu-shadow-card); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; color: var(--tsu-text); cursor: pointer; }
  .pf-acc > .pi:first-child { color: var(--tsu-text-muted); }
  .pf-acc > .pi:last-child { margin-left: auto; color: var(--tsu-text-subtle); transition: transform .15s ease; }
  .pf-acc[aria-expanded="true"] { border-color: #b9d7ee; color: var(--tsu-primary); }
  .pf-acc[aria-expanded="true"] > .pi:first-child { color: var(--tsu-primary); }
  .pf-acc[aria-expanded="true"] > .pi:last-child { transform: rotate(180deg); }
  .pf-pane { gap: 12px; margin-bottom: 8px; }
  .pf-grid, .pf-stack { gap: 12px; }
  .pf-ph { min-height: 48px; padding: 10px 16px; }
  .pf-meta, .pf-ph-act { flex-basis: 100%; margin-left: 0; }
  .pf-pb { padding: 14px 16px; }
  .pf-sh { padding: 12px 16px 0; }
  .pf-sec-pad { padding: 12px 16px 14px; }
  .pf-pf { padding: 12px 16px; }
  .pf-pf > .tsu-btn { width: 100%; height: auto; min-height: 40px; padding: 8px 12px; white-space: normal; }
  .pf-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pf-kv > dt:not(:first-child) { margin-top: 10px; }
  .pf-kv > dt.pf-f { padding-top: 0; }
  .pf-inl .tsu-input { flex: 1 1 140px; width: auto; min-width: 0; }
  .pf-svc { grid-template-columns: 36px minmax(0, 1fr); align-items: start; padding: 12px 16px; }
  .pf-svc > .pf-a { grid-column: 2; justify-content: flex-start; }
  .pf-svc.ic, a.pf-svc { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; }
  .pf-svc.ic > .pf-a, a.pf-svc > .pf-a { grid-column: auto; }
  .pf-mono { font-size: 12px; }
  .pf-es { flex-direction: column; align-items: flex-start; padding: 16px; }
  .pf-es > .tsu-btn { width: 100%; height: auto; min-height: 40px; padding: 8px 12px; white-space: normal; text-align: center; }
  .pf-es0 { padding: 14px 16px; }
  .pf-ver-b { padding: 16px; }
  .pf-steps { grid-template-columns: minmax(0, 1fr); }
  .pf-adm-ver { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 379.98px) {
  .pf-adm-g .tsu-btn > .pi { display: none; }   /* узкий телефон: в кнопках полосы администратора только текст */
}
@media (prefers-reduced-motion: reduce) { .pf-dd > .tsu-btn .pi:last-child, .pf-acc > .pi:last-child { transition: none; } }

/* Пакет Г: карточка «Массив внешних идентификаторов» во вкладке администратора (Views/ExternalIds/_ProfileCard.cshtml). */
.pf-xid { margin-top: 16px; }
.pf-xid-note, .pf-xid-empty, .pf-xid-hint { margin: 0 0 12px; font-size: 13px; color: var(--tsu-text-muted); }
.pf-xid-hint { flex-basis: 100%; margin: 4px 0 0; }
.pf-xid-kind { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--tsu-text); }
.pf-xid-kind:first-of-type { margin-top: 4px; }
.pf-xid-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-xid-row { padding: 10px 12px; border: 1px solid var(--tsu-border); border-radius: var(--tsu-radius-sm); }
.pf-xid-row.is-past { background: var(--tsu-surface-muted); }
.pf-xid-row.is-past .pf-xid-val { color: var(--tsu-text-muted); }
.pf-xid-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.pf-xid-val { min-width: 0; overflow-wrap: anywhere; }
.pf-xid-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 13px; }
.pf-xid-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font-size: 12px; color: var(--tsu-text-subtle); overflow-wrap: anywhere; }
.pf-xid-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.pf-xid-f { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--tsu-text-muted); }
.pf-xid-grow { flex: 1 1 260px; min-width: 0; }
@media (max-width: 639.98px) { .pf-xid-f, .pf-xid-add > .tsu-btn { flex: 1 1 100%; } .pf-xid-link { margin-left: 0; } }

/* История входов (журнал входов, выкладка 30.10.2026): владельцу и администратору. */
.pf-log-note { margin: 0 0 12px; font-size: 13px; color: var(--tsu-text-muted); }
.pf-log-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pf-log-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--tsu-border); min-width: 0; }
.pf-log-row:first-child { padding-top: 0; }
.pf-log-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-log-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.pf-log-time { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pf-log-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--tsu-text-muted); min-width: 0; }
.pf-log-meta > span { overflow-wrap: anywhere; }