/* Anytie Platform — светлая тема на фирменной системе anytie.ru
   Типографика: Unbounded (заголовки/бренд) + Onest (текст)
   Акцент действий: коралловый. Мята/лаванда — только семантика статусов.
   Радиусы: карточки 16px, контролы 12px, чипы pill. */


:root {
  --bg: #F4F4F2;
  --surface: #FFFFFF;
  --surface-2: #FAFAF8;
  --ink: #141416;
  --muted: #6E6E73;
  --faint: #A3A3A8;
  --line: #E7E7E2;
  --line-strong: #D9D9D3;

  --coral: #FF8562;        /* заливки, крупные элементы */
  --coral-deep: #F26B45;   /* hover заливок */
  --coral-text: #C6491E;   /* текстовые ссылки/акценты на белом (AA) */
  --coral-soft: #FFEDE6;
  --coral-on-soft: #B3401A; /* текст на coral-soft, ≥4.5:1 */

  --lav-soft: #EFEDFE;
  --lav-text: #5B4FCF;
  --mint-soft: #E4F9E0;
  --mint-text: #1E7B34;
  --sand-soft: #FFF1D6;
  --sand-text: #8A6034;
  --danger: #C03434;
  --danger-soft: #FBE9E9;

  /* шкала отступов */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* радиусы: контролы, панели, всплывающие слои; чипы — pill */
  --r-ctl: 8px;
  --r-card: 12px;
  --r-pop: 14px;

  /* движение */
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* тени только у всплывающих слоёв */
  --shadow-card: none;
  --shadow-pop: 0 2px 6px rgba(20, 20, 22, .08), 0 16px 40px rgba(20, 20, 22, .12);

  --topbar-h: 56px;
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--coral-text);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/22px 'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Шапка ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  height: var(--topbar-h);
  display: flex;
  align-items: stretch;
  gap: var(--sp-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand img { height: 22px; display: block; }
.brand .brand-tag {
  font: 500 10px/1 'Unbounded', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 10px 4px;
}
.topbar-inner > * { min-width: 0; }
.topbar nav.main-nav { display: flex; gap: 2px; flex: 1 1 auto; align-items: stretch; min-width: 0; }
.topbar nav.main-nav a {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  padding: 0 var(--sp-3);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.topbar nav.main-nav a::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px;
  height: 2px; background: transparent; border-radius: 2px 2px 0 0;
  transition: background var(--dur) var(--ease);
}
.topbar nav.main-nav a:hover { color: var(--ink); }
.topbar nav.main-nav a.active { color: var(--ink); }
.topbar nav.main-nav a.active::after { background: var(--coral); }
.topbar nav.main-nav a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--coral-text); border-radius: 6px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); flex: none; }

/* выпадающие меню без скриптов: <details class="menu"> */
.menu { position: relative; margin: 0; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px; border-radius: var(--r-ctl);
  color: var(--muted); font: 500 14px/1 'Onest', sans-serif;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu-btn:hover, .menu[open] > .menu-btn { background: var(--surface-2); color: var(--ink); }
.menu-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.menu-btn .menu-btn-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-btn .ico-chev { transition: transform var(--dur) var(--ease); }
.menu[open] > .menu-btn .ico-chev { transform: rotate(180deg); }
.menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pop);
  box-shadow: var(--shadow-pop);
  animation: pop-in var(--dur-fast) var(--ease-out);
}
.menu-right .menu-panel { left: auto; right: 0; }
.menu-panel a, .menu-panel .menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; border: 0; background: none;
  color: var(--ink); font: 400 14px/1.3 'Onest', sans-serif; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-panel a:hover, .menu-panel .menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-panel a.active { color: var(--coral-text); font-weight: 500; }
.menu-panel a:focus-visible, .menu-panel .menu-item:focus-visible { outline: none; box-shadow: var(--focus); }
.menu-panel .menu-item.danger { color: var(--danger); }
.menu-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.menu-head b { font-weight: 500; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 0; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.avatar-xs { width: 26px; height: 26px; font-size: 11px; }
.topbar .role-chip { margin: 0; }
.logout-form { display: block; }
.linklike {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--coral-text); cursor: pointer; text-decoration: none;
}
.linklike:hover { text-decoration: underline; }
.nav-badge {
  display: inline-flex; align-items: center; min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: var(--coral-soft); color: var(--coral-on-soft);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.nav-collapsed { display: none; }

main { max-width: 1240px; margin: var(--sp-6) auto 64px; padding: 0 var(--sp-5); }

/* ---------- Типографика ---------- */
h1 {
  font: 500 28px/1.2 'Unbounded', sans-serif;
  letter-spacing: -.015em;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
h2 { font: 600 17px/1.35 'Onest', sans-serif; margin: 18px 0 10px; }
h3 {
  font: 600 12px/1.3 'Onest', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 18px 0 8px;
}
a { color: var(--coral-text); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.danger-text { color: var(--danger); }
.mint-text { color: var(--mint-text); }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.page-head h1 { margin: 0; }
.page-head .page-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.page-head .page-count { color: var(--muted); font: 400 16px/1 'Onest', sans-serif; margin-left: 10px; font-variant-numeric: tabular-nums; }

/* ---------- Карточки ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 22px;
  margin-bottom: var(--sp-4);
}

.alert {
  background: var(--danger-soft);
  border: 1px solid #F1C7C7;
  color: var(--danger);
  padding: 12px 16px;
  border-radius: var(--r-ctl);
  margin-bottom: 20px;
  font-weight: 500;
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--ink);
  font: 500 14px/1.2 'Onest', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--faint); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
  font-weight: 600;
}
.btn.primary:hover { background: var(--coral-deep); border-color: var(--coral-deep); }
.btn.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.btn-quiet:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(20, 20, 22, .25); border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn:focus-visible,
a:focus-visible,
.linklike:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.btn-group .btn:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:focus-visible { position: relative; z-index: 1; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* ---------- Таблицы ---------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow-x: auto;
}
table.list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.list th, table.list td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.list th:first-child, table.list td:first-child { padding-left: 18px; }
table.list th:last-child, table.list td:last-child { padding-right: 18px; }
table.list th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
table.list td { line-height: 1.4; }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list td.center, table.list th.center { text-align: center; }
@media (min-width: 1200px) {
  .table-wrap.is-sticky { overflow: visible; }
  .table-wrap.is-sticky table.list thead th { position: sticky; top: var(--topbar-h); z-index: 2; }
  .table-wrap.is-sticky table.list thead th:first-child { border-top-left-radius: var(--r-card); }
  .table-wrap.is-sticky table.list thead th:last-child { border-top-right-radius: var(--r-card); }
}
table.list tbody tr { transition: background var(--dur-fast) var(--ease); }
table.list tbody tr:hover { background: var(--surface-2); }
table.list tr:last-child td { border-bottom: none; }
table.list tr.inactive td { color: var(--muted); background: var(--surface-2); }
table.list tr.inactive td a.row-title, table.list tr.inactive td a { color: var(--muted); }
table.list td a { font-weight: 500; color: var(--ink); }
table.list td a:hover { color: var(--coral-text); }

/* мини-прогресс набора */
.progress-cell { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.progress-track {
  display: block;
  width: 56px; height: 5px; border-radius: 999px;
  background: var(--line); overflow: hidden; flex: none;
}
.progress-fill {
  display: block;
  height: 100%; border-radius: 999px; background: var(--coral);
  transition: width .3s var(--ease);
}
/* Дискретная ширина шагами 10% — без inline-стилей, дружелюбно к строгому CSP */
.progress-fill.w-0  { width: 0; }
.progress-fill.w-1  { width: 10%; }
.progress-fill.w-2  { width: 20%; }
.progress-fill.w-3  { width: 30%; }
.progress-fill.w-4  { width: 40%; }
.progress-fill.w-5  { width: 50%; }
.progress-fill.w-6  { width: 60%; }
.progress-fill.w-7  { width: 70%; }
.progress-fill.w-8  { width: 80%; }
.progress-fill.w-9  { width: 90%; }
.progress-fill.w-10 { width: 100%; }
.progress-fill.full { background: var(--mint-text); }

/* ---------- Чипы статусов ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 500 12.5px/1.3 'Onest', sans-serif;
  background: #ECECEA;
  color: var(--muted);
  white-space: nowrap;
}
.chip-collecting { background: var(--coral-soft); color: var(--coral-on-soft); }
.chip-selection { background: var(--lav-soft); color: var(--lav-text); }
.chip-confirmed { background: var(--mint-soft); color: var(--mint-text); }
.chip-cancelled { background: var(--danger-soft); color: var(--danger); }

/* ---------- Формы: единая сетка и контролы ---------- */
.form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
.field-hint { margin: -8px 0 14px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.form input, .form select, .form textarea,
.search-form input[type="search"], .sort-label select, .pw-form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  font: 400 15px/1.4 'Onest', sans-serif;
  color: var(--ink);
  background-color: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus,
.search-form input:focus, .sort-label select:focus, .pw-form input:focus {
  outline: none;
  border-color: var(--coral-text);
  box-shadow: 0 0 0 3px rgba(242, 107, 69, .3);
}
.form ::placeholder { color: var(--faint); }
.form input:user-invalid, .form select:user-invalid, .form textarea:user-invalid { border-color: var(--danger); }
.field-error { margin: -8px 0 14px; font-size: 12.5px; color: var(--danger); }

/* Селекты: свой шеврон, одна высота с инпутами */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236E6E73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px !important;
  cursor: pointer;
}
select:hover:not(:disabled) { border-color: var(--ink); }
select:disabled { background-color: var(--surface-2); color: var(--muted); cursor: default; }

/* Сетка строк: поля выровнены по нижней кромке, кнопки — той же высоты */
.form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 14px;
  align-items: end;
}
.form .row > label { min-width: 0; }
.form .row > label > .btn { width: 100%; height: 40px; margin-top: 6px; }

.form label.inline {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 2px 18px 10px 0; color: var(--ink); font-weight: 400; font-size: 14.5px;
}
.form label.inline input { width: auto; height: auto; margin: 0; accent-color: var(--coral-deep); }
.form fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  margin: 0 0 14px;
  padding: 12px 14px 6px;
}
.form fieldset legend { font-size: 13px; font-weight: 500; color: var(--muted); padding: 0 6px; }
.form .actions { display: flex; gap: 10px; margin-top: 20px; }

/* ---------- Доска мероприятия ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.position h2 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.position h2 .muted { font-size: 13.5px; font-weight: 500; }

.person {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: var(--r-ctl);
  transition: background .15s var(--ease);
}
.person:hover { background: var(--surface-2); }
.person + .person { border-top: 1px solid var(--line); }
.avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font: 600 13px/1 'Onest', sans-serif;
  color: rgba(20, 20, 22, .62);
  overflow: hidden;
}
/* фирменные градиенты аватаров — детерминированно по id */
.av-0 { background: linear-gradient(135deg, #FFD9CE, #FF9F80); }
.av-1 { background: linear-gradient(135deg, #DCD6FF, #B0A3F5); }
.av-2 { background: linear-gradient(135deg, #CFF5CB, #8FDD9A); }
.av-3 { background: linear-gradient(135deg, #FFE7B8, #FFC46B); }
.av-4 { background: linear-gradient(135deg, #C9E4FF, #86BBF0); }
.av-5 { background: linear-gradient(135deg, #FFD3E8, #F09CC6); }
.av-6 { background: linear-gradient(135deg, #D8F1EC, #8FD5C7); }
.av-7 { background: linear-gradient(135deg, #EDE3FF, #C6A9F2); }
.person-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 60%; }
.person-meta:empty { display: none; }

/* ---------- Строка человека в карточке роли (macro person_row) ----------
   Скелет фиксирован и не зависит от длины имени:
     [аватар] имя · рейтинг
              чипы (статус первым + необязательные)
              мета (доставка)
              дни (многодневные)
     [панель действий на всю ширину: ячейки равной ширины, всё слева]
   Всё под .person-row — ручные блоки .person в попапах не затронуты. */
.person.person-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);   /* аватар | инфо; minmax(0) режет цепочку min-content */
  gap: 8px 12px;
  align-items: start;
  padding: 12px 10px;
}
.person-row > .avatar { grid-column: 1; }
.person-row > .person-info { grid-column: 2; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* имя — одно на строке (2×14 символов переносится внутри своего блока), рейтинг — колонкой справа */
.person-row .person-id { display: flex; align-items: baseline; gap: 8px; }
.person-row .person-name {
  flex: 0 1 auto; min-width: 0;
  font: 500 15px/1.3 'Onest', sans-serif; color: var(--ink);
  overflow-wrap: anywhere;
}
.person-row .person-name:hover { color: var(--coral-text); }
.person-row .person-rel {
  flex: none; margin-left: auto; white-space: nowrap;
  font-size: 12.5px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums;
}
.person-row .person-rel.is-neg { color: var(--danger); }
/* чипы: статус всегда первый, перенос влево; длинный «занят: …» обрезается, полный текст в title */
.person-row .person-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.person-row .person-chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-row .person-meta { line-height: 1.35; overflow-wrap: anywhere; }
.person-row .day-tags { margin-top: 1px; }
.person-row .day-tag { font-variant-numeric: tabular-nums; }
/* панель действий: одна сетка на обе формы; колонки равной ширины, число считает браузер:
   282px (телефон) → 2, 310px (карточка на 3-колоночной доске) → 3 */
.person-row .person-actions {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px;
}
.person-row .person-actions > form { display: contents; }
.person-row .person-actions .btn {
  min-width: 0; min-height: 32px; padding: 6px 8px; white-space: normal; line-height: 1.15;
  box-shadow: none;
}
/* штрафные действия — красный текст без заливки (заливка на hover); подтверждение остаётся в data-confirm */
/* box-shadow: none выше перебивал кольцо фокуса .btn:focus-visible — возвращаем */
.person-row .person-actions .btn:focus-visible { box-shadow: var(--focus); }
.person-row .person-actions .btn.danger { background: transparent; border-color: var(--line); }
.person-row .person-actions .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
@media (pointer: coarse) {
  .person-row .person-actions .btn { min-height: 40px; }
  .person-row button.day-tag { padding: 4px 9px; }
}
.chip.chip-mini { font-size: 11.5px; padding: 2px 9px; }
/* действия всегда на своей строке — карточки узкие, кнопки не должны теснить имя */
.inline-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1 1 100%; justify-content: flex-end;
}

.danger-zone { border-color: #F1C7C7; }
.danger-zone h2 { color: var(--danger); margin-top: 0; }

details { margin-top: 12px; }
details summary {
  cursor: pointer;
  font-size: 13.5px;
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
details summary::before { content: "▸ "; color: var(--faint); }
details[open] summary::before { content: "▾ "; }
details summary::-webkit-details-marker { display: none; }

.bind-link {
  display: block;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-ctl);
  word-break: break-all;
  font-size: 13px;
  margin: 8px 0;
}

/* поиск + фильтры в базе: единая панель */
.invite-hint { margin: -10px 0 18px; }
.invite-hint .inline { display: inline; }
.staff-controls {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.search-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; max-width: 640px; }
.search-form input[type="search"] { min-width: 220px; }
.search-form input[type="search"] { flex: 1; margin-top: 0; }
.search-form .btn { height: 40px; }
.staff-controls .filter-pills { margin-bottom: 0; }

/* фильтры-пилюли */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-pills a {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-weight: 500;
  font-size: 13.5px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.filter-pills a:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.filter-pills a.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* чекбокс-пилюли: мультивыбор ролей и признаков */
.pill-check { display: inline-flex; cursor: pointer; }
.pill-check input { position: absolute; opacity: 0; pointer-events: none; }
.pill-check span {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-weight: 500;
  font-size: 13.5px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  user-select: none;
}
.pill-check:hover span { color: var(--ink); border-color: var(--ink); }
.pill-check input:checked + span {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
}
.pill-check input:focus-visible + span { outline: none; box-shadow: var(--focus); }
.filter-pills .btn.small { align-self: center; }
.found-line { margin: -8px 0 16px; }
.sort-label {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 13.5px; color: var(--muted); font-weight: 500;
}
.sort-label select { height: 40px; margin-top: 0; width: auto; min-width: 190px; }
.search-form:has(.sort-label) { max-width: 900px; }

/* группы в диалоге «Все фильтры» */
/* дашборд экономики */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 18px;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 6px;
}
.stat-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.stat-value { font-size: 22px; font-weight: 700; }

/* чек-строки (оплата стаффу, деньги от клиента) */
.check-line {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 14px; cursor: pointer;
}
.check-line input { width: 16px; height: 16px; accent-color: var(--coral); margin: 0; }
.pay-list {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 6px 12px; margin: 6px 0 10px;
}
.tool-count.warn { background: var(--danger-soft); color: var(--danger); }
.tool-count.ok { background: var(--mint-soft); color: var(--mint-text); }

.filter-group { margin: 14px 0 4px; }
.filter-group-title {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
#dlg-filters .pos-dialog-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* уведомление об успехе */
.notice {
  background: var(--mint-soft);
  border: 1px solid #BEE9C8;
  color: var(--mint-text);
  padding: 12px 16px;
  border-radius: var(--r-ctl);
  margin-bottom: 20px;
  font-weight: 500;
}

/* строка дней мероприятия */
.day-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.day-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-card);
}
.day-chip-date { font-weight: 600; font-size: 14px; }
.day-chip-cov { font-size: 12px; color: var(--muted); }

/* требования позиции */
.req-line {
  font-size: 13px;
  color: var(--coral-on-soft);
  background: var(--coral-soft);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 6px;
}

/* доступность по дням у человека */
.day-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.day-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--lav-soft); color: var(--lav-text);
}
/* дни участника правит менеджер: кнопки-теги, снятый день — контуром */
.day-tags form { display: contents; }
button.day-tag { border: 1px solid var(--lav-soft); cursor: pointer; font: inherit; font-size: 11px; line-height: 1.5; }
button.day-tag:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 133, 98, .45); }
button.day-tag:hover { filter: brightness(0.95); }
button.day-tag.is-off {
  background: transparent; color: var(--faint); border-color: var(--line);
  text-decoration: line-through;
}
button.day-tag.is-off:hover { color: var(--lav-text); border-color: var(--lav-text); text-decoration: none; }
.chip-busy { background: var(--danger-soft); color: var(--danger); }
.pos-closed { opacity: .7; }
.pos-closed h2 { text-decoration: line-through; }

/* сегментированная рассылка */
.broadcast summary {
  cursor: pointer; font-weight: 600; list-style: none;
}
.broadcast summary::before { content: "▸ "; color: var(--faint); }
.broadcast[open] summary::before { content: "▾ "; }
.broadcast summary::-webkit-details-marker { display: none; }
.broadcast .form { margin-top: 14px; }
.broadcast summary .ico { vertical-align: -3px; margin-right: 4px; }
.inbox-title { margin: 22px 0 10px; }

/* ---------- Профиль (Tinder-style) ---------- */
.profile {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 28px;
  align-items: start;
}
.profile-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--line);
  box-shadow: var(--shadow-pop);
}
.profile-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(20,20,22,.82), rgba(20,20,22,0));
  color: #fff;
}
.profile-hero-overlay h1 { color: #fff; font-size: 24px; margin: 0 0 2px; }
.profile-hero-overlay p { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; }
.profile-badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--danger); color: #fff;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.profile-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.profile-thumb {
  width: 60px; height: 76px; border-radius: 12px; object-fit: cover;
  border: 2px solid transparent; cursor: pointer; background-size: cover; background-position: center;
  padding: 0; background-color: transparent; overflow: hidden;
}
.profile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-thumb.active { border-color: var(--coral); }
.profile-thumb:focus-visible { outline: none; box-shadow: var(--focus); }

.profile-bio { font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.pstat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 12px 8px;
  font-size: 12px; color: var(--muted); text-align: center;
  min-width: 0;
}
.pstat span {
  display: block;
  font: 600 16px/1.15 'Unbounded', sans-serif;
  color: var(--ink);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: #ECECEA; color: var(--muted);
}
.tag-lav { background: var(--lav-soft); color: var(--lav-text); }
.tag-mint { background: var(--mint-soft); color: var(--mint-text); }

.profile-meta-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.profile-meta-row:last-child { border-bottom: none; }
.profile-meta-row > span:first-child {
  color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; min-width: 92px; flex: none;
}

/* медиа в редакторе */
.media-edit-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.media-edit-item { width: 120px; }
.media-thumb {
  width: 120px; height: 150px; border-radius: 12px; object-fit: cover;
  display: block; background: var(--line); background-size: cover; background-position: center;
}
.media-video { position: relative; }
.media-video .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 26px; background: rgba(20,20,22,.32); border-radius: 12px;
}
.media-edit-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.media-edit-actions form { display: block; }
.media-add { margin-top: 8px; }

.role-chip {
  flex: none; white-space: nowrap;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  background: var(--lav-soft); color: var(--lav-text);
  padding: 2px 8px; border-radius: 999px; margin-left: 4px;
}

/* флаги статусов в базе */
.flag { font-weight: 700; }
.flag-ok { color: var(--mint-text); }
.flag-no { color: var(--faint); }

.reminder-templates { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }

/* ---------- Публичная витрина клиента ---------- */
.client-page { background: var(--bg); }
.client-wrap { max-width: 520px; margin: 0 auto; padding: 24px 16px 60px; }
.client-wrap.client-wide { max-width: 980px; }
.client-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.client-head h1 { font-size: 20px; margin: 0; }
/* шапка широкой витрины: логотип, название и даты по центру, по сетке */
.client-head-hero {
  flex-direction: column; text-align: center; gap: 10px;
  padding: 10px 0 6px; margin-bottom: 22px;
}
.client-head-hero h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; }
.client-head-hero .muted { margin: 0; }
.client-hint { text-align: center; margin-bottom: 16px; }
.swipe-deck { position: relative; min-height: 560px; }
.swipe-card {
  display: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-pop);
}
.swipe-card.is-top { display: block; }
.swipe-photo { position: relative; aspect-ratio: 3 / 4; background: var(--line); }
.swipe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swipe-overlay {
  position: absolute; inset: auto 0 0 0; padding: 40px 20px 18px; color: #fff;
  background: linear-gradient(to top, rgba(20,20,22,.82), rgba(20,20,22,0));
}
.swipe-overlay h2 { color: #fff; margin: 0 0 2px; font-size: 24px; }
.swipe-overlay p { margin: 0; color: rgba(255,255,255,.85); }
.swipe-stamp {
  position: absolute; top: 16px; right: 16px; padding: 5px 12px; border-radius: 999px;
  font-weight: 700; font-size: 13px; background: rgba(255,255,255,.9);
}
.swipe-stamp.like { color: var(--mint-text); }
.swipe-stamp.nope { color: var(--danger); }
.swipe-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 4px; }
.swipe-facts span {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--muted);
}
.client-more { display: block; margin: 12px 18px; text-align: center; }
.swipe-actions { display: flex; gap: 16px; justify-content: center; padding: 8px 18px 22px; }
.swipe-btn {
  width: 64px; height: 64px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); font-size: 26px; cursor: pointer;
  box-shadow: var(--shadow-card); transition: transform .15s var(--ease);
}
.swipe-btn:active { transform: scale(.92); }
.swipe-btn.nope { color: var(--danger); }
.swipe-btn.like { color: #fff; background: var(--coral); border-color: var(--coral); }
.swipe-card.fly-like { transform: translateX(60%) rotate(8deg); opacity: 0; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.swipe-card.fly-nope { transform: translateX(-60%) rotate(-8deg); opacity: 0; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.swipe-done { display: none; text-align: center; padding: 60px 20px; }
.swipe-done.is-visible { display: block; }

/* юридические документы */
.legal-wrap { max-width: 760px; }
.legal h2 { margin-top: 22px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; }
.consent-check input { margin-top: 3px; width: auto; accent-color: var(--coral-deep); flex: none; }

/* публичная регистрация */
.join-wrap { max-width: 560px; }
.join-submit { width: 100%; padding: 12px; font-size: 16px; margin-top: 6px; }
.invite-links { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 14px; }
.invite-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.join-done { text-align: center; padding: 40px 28px; }
.join-done h1 { margin: 16px 0 10px; }
.join-tg-btn { margin: 14px 0 6px; font-size: 16px; padding: 12px 24px; }

/* бейдж в навигации */
/* старый .nav-badge удалён: действует правило из блока шапки */

/* входящие */
.inbox-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row.unread { background: var(--coral-soft); margin: 0 -24px; padding: 12px 24px; }
.inbox-meta { display: flex; flex-direction: column; gap: 2px; }
.inbox-text { color: var(--ink); }

/* переписка (чат) */
.chat { margin-top: 20px; }
.chat-thread {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 340px; overflow-y: auto; padding: 4px 2px 12px;
}
.chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.chat-out { align-self: flex-end; align-items: flex-end; }
.chat-in { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 9px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45;
}
.chat-out .chat-bubble { background: var(--coral); color: var(--ink); border-bottom-right-radius: 4px; }
.chat-in .chat-bubble { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-time { font-size: 11px; color: var(--muted); margin-top: 3px; }
.chat-ack {
  display: block; margin-top: 5px; font-size: 11.5px;
  padding-top: 5px; border-top: 1px solid rgba(255,255,255,.35);
}
.chat-in .chat-ack { border-top-color: var(--line); color: var(--muted); }
.chat-ack.ack-done { font-weight: 600; }
.chat-send { margin-top: 12px; }
.chat-send textarea { width: 100%; }
.chat-send-row { align-items: flex-end; }
.chat-send-row label { flex: 1; }

/* документы */
.doc-list { list-style: none; padding: 0; margin: 0 0 14px; }
.doc-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.doc-list li:last-child { border-bottom: none; }
.doc-list .inline { display: inline; margin-left: auto; }

.pos-row-foot { margin-top: 6px; }
.team-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pw-form { display: inline-flex; gap: 6px; align-items: center; }
.pw-form input {
  width: 190px; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--line-strong); border-radius: 8px;
}
/* поле пароля и кнопка «Сгенерировать» стоят одной строкой; в форме
   поле тянется, в узкой строке таблицы — держит свою ширину */
.pw-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form .pw-row { width: 100%; }
/* база поменьше ширины кнопки: при flex-wrap строка переносится раньше,
   чем поле начинает сжиматься, и кнопка уезжала под инпут */
.form .pw-row input { flex: 1 1 150px; min-width: 0; }
.pw-row .btn { flex: none; white-space: nowrap; }

/* языки: галочка и уровень в одну строку, по две пары в ряд */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 18px; }
.lang-row { display: flex; align-items: center; gap: 10px; }
.lang-row label.inline { flex: 1 1 auto; margin: 0; }
.lang-row select { flex: none; width: 165px; font-size: 13px; padding: 4px 8px; }
/* кнопка «рекомендуем» в окне подборки: нажатое состояние заметно */
.btn.is-star { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-text); font-weight: 600; }

/* пустые состояния */
.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
}
.empty p { margin: 0 0 16px; }

/* ---------- Логин ---------- */
.login-page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background:
    radial-gradient(560px 420px at 82% -10%, rgba(198, 189, 254, .35), transparent 65%),
    radial-gradient(640px 480px at -12% 108%, rgba(180, 248, 175, .30), transparent 65%),
    var(--bg);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-pop);
}
.login-card .login-logo { height: 26px; display: block; margin: 0 auto 8px; }
.login-card .login-sub {
  text-align: center;
  font: 500 10.5px/1 'Unbounded', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}
.login-card label { display: block; margin-bottom: 14px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.login-card input {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  font: 400 15px/1.4 'Onest', sans-serif;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login-card input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 133, 98, .25);
}
.login-card button {
  width: 100%; padding: 12px; margin-top: 10px;
  background: var(--coral); color: var(--ink);
  border: none; border-radius: var(--r-ctl);
  font: 500 15px/1.2 'Onest', sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 133, 98, .35);
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.login-card button:hover { background: var(--coral-deep); }
.login-card button:active { transform: translateY(1px) scale(.99); }

/* ---------- Адаптив ---------- */
/* ---------- Позиции мероприятия: карточки + диалог настройки ---------- */
.pos-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.pos-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.pos-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.pos-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pos-card-title { font: 600 16px/1.3 'Onest', sans-serif; }
.pos-card-title.placeholder { color: var(--faint); font-weight: 500; }
.pos-card-rate { font-weight: 600; white-space: nowrap; }
.pos-card-meta { color: var(--muted); font-size: 13.5px; }
.pos-card-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; }
.pos-card-chips .tag { font-size: 12px; padding: 3px 10px; }
.pos-card-actions { display: flex; gap: 8px; margin-top: auto; }
.pos-card-note { color: var(--muted); font-size: 13px; font-style: normal; }

dialog.pos-dialog {
  border: none;
  border-radius: 20px;
  padding: 0;
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 940px);
  box-shadow: var(--shadow-pop);
  /* скролл живёт внутри .pos-dialog-body — углы остаются ровными */
  overflow: hidden;
}
/* попапы с таблицами шире, чтобы колонки не резались */
#dlg-catalog, #dlg-passports { width: min(940px, calc(100vw - 32px)); }
dialog.pos-dialog::backdrop {
  background: rgba(20, 20, 22, .45);
  backdrop-filter: blur(2px);
}
.pos-dialog-body {
  padding: 24px 26px;
  max-height: min(88vh, 940px);
  overflow-y: auto;
  border-radius: 20px;
}
.pos-dialog-body h2 { margin: 0 0 16px; }
.pos-dialog-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
dialog.pos-dialog[open] { animation: dialog-in .22s var(--ease); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ---------- Клиентская витрина: плитка по сегментам ---------- */
.client-section { margin-bottom: 30px; }
.client-section > h2 {
  font: 500 15px/1.3 'Unbounded', sans-serif;
  margin: 0 0 4px;
}
.client-section > .muted { margin: 0 0 14px; }
.cand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.cand-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.cand-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.cand-tile.is-liked { border-color: var(--mint-text); }
.cand-tile.is-disliked { border-color: var(--line); opacity: .55; }
.cand-photo { position: relative; aspect-ratio: 3 / 4; background: var(--line); display: block; }
.cand-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cand-overlay {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; color: #fff;
  background: linear-gradient(to top, rgba(20,20,22,.78), rgba(20,20,22,0));
}
.cand-overlay strong { display: block; font-size: 15px; }
.cand-overlay span { font-size: 12px; color: rgba(255,255,255,.85); }
.cand-stamp {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92); font-size: 15px;
  animation: stamp-in .25s var(--ease);
}
@keyframes stamp-in {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}
/* Панель инструментов доски: компактные кнопки с попапами */
.board-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.tool-count {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 2px;
  border-radius: 999px; background: var(--coral-soft); color: var(--coral-on-soft);
  font-size: 12px; font-weight: 600; text-align: center;
}
.table-scroll { overflow-x: auto; margin: 0 0 12px; border-radius: 12px; }

/* раздел «Шаблоны коммуникации» */
.tpl-group h2 { margin-bottom: 6px; }
.tpl-item { border-top: 1px solid var(--line); padding: 4px 0; }
.tpl-item:first-of-type { border-top: none; }
.tpl-item summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px; cursor: pointer; font-weight: 500;
  list-style: none;
}
.tpl-item summary::-webkit-details-marker { display: none; }
.tpl-item summary::before { content: "▸"; color: var(--muted); transition: transform .18s var(--ease); }
.tpl-item[open] summary::before { transform: rotate(90deg); }
.tpl-sum { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tpl-when { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.tpl-form { padding: 4px 4px 16px 22px; }
.tpl-form textarea { min-height: 120px; }
.tpl-actions { display: flex; gap: 10px; justify-content: flex-end; }
.tpl-form code, .page-head code {
  background: var(--surface-2); padding: 1px 6px; border-radius: 6px;
  font-size: 12.5px;
}
dialog.pos-dialog h3 {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
}

/* Кнопки решения на детальной странице кандидата */
.decide-bar { display: flex; gap: 12px; margin: 6px 0 10px; }
.decide-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font: 500 15px/1.2 'Onest', sans-serif;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
  white-space: nowrap;
}
.decide-btn:active { transform: translateY(1px) scale(.98); }
.decide-btn .decide-ico { font-size: 17px; }
.decide-btn.nope { color: var(--danger); }
.decide-btn.nope:hover { border-color: var(--danger); background: var(--danger-soft); }
.decide-btn.nope.is-active { background: var(--danger-soft); border-color: var(--danger); font-weight: 600; }
.decide-btn.like { color: var(--ink); }
.decide-btn.like:hover { border-color: var(--coral); background: var(--coral-soft); }
.decide-btn.like.is-active {
  background: var(--coral); border-color: var(--coral); color: var(--ink); font-weight: 700;
  box-shadow: 0 2px 10px rgba(255, 133, 98, .4);
}
.profile-thumb { transition: border-color .2s var(--ease), transform .2s var(--ease); }
.profile-thumb:hover { transform: translateY(-2px); }
.profile-video {
  width: 100%; margin-top: 12px; border-radius: 16px;
  background: var(--ink); display: block;
}

.cand-actions { display: flex; }
.cand-actions button {
  flex: 1; border: none; background: var(--surface); font-size: 18px;
  padding: 10px 0; cursor: pointer;
  transition: background .18s var(--ease);
}
.cand-actions button:first-child { border-right: 1px solid var(--line); color: var(--danger); }
.cand-actions button:last-child { color: var(--mint-text); }
.cand-actions button:hover { background: var(--surface-2); }
/* активный выбор подсвечен; повторное нажатие снимает отметку */
.cand-actions button.is-on:first-child { background: var(--danger-soft); font-weight: 700; }
.cand-actions button.is-on:last-child { background: var(--mint-soft); font-weight: 700; }

/* всплывающее подтверждение/ошибка на витрине (UI-01) */
.client-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  background: var(--ink); color: var(--surface);
  padding: 10px 18px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.client-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cand-actions button:active { transform: scale(.95); }

/* ---------- Плавность интерфейса ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; }
  .profile-hero { max-width: 380px; }
}

@media (max-width: 760px) {
  .person.person-row { padding: 10px; }
  main { margin-top: 20px; padding: 0 16px; }
  .form .row { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
  .board { grid-template-columns: 1fr; }
  .person { flex-wrap: wrap; }
  .inline-actions { flex-basis: 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Правки по аудиту (UX-01, UX-02, UI-02) ---------- */
/* Широкое живёт в своих контейнерах (шапка-меню, .table-scroll, .table-wrap).
   Клип на body здесь нельзя: он ломает position:sticky у шапки. */

/* Мобильная шапка: меню в собственной прокрутке, без растяжения страницы */
/* Тесно, но меню ещё помещается — убираем наименее важное: чип роли */
/* ≤ 980px: разделы уходят в выпадающее «Меню», страница не прокручивается вбок */
@media (max-width: 1120px) {
  .topbar-inner { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .topbar nav.main-nav { display: none; }
  .nav-collapsed { display: block; }
  .menu-btn .menu-btn-label { display: none; }
  .menu-btn.account-btn .menu-btn-label { display: none; }
}

/* Диалоги: постоянная кнопка закрытия и липкая панель действий */
.pos-dialog-x {
  position: sticky; top: 0; float: right; margin: -8px -8px 0 12px;
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 15px; cursor: pointer;
  z-index: 3;
}
.pos-dialog-x:hover { color: var(--ink); border-color: var(--ink); }
.pos-dialog-body > .pos-dialog-foot,
.pos-dialog-body form > .pos-dialog-foot {
  position: sticky; bottom: -24px; margin-bottom: -24px;
  background: var(--surface); padding: 12px 0 24px;
  border-top: 1px solid var(--line); z-index: 2;
}

/* ============================================================
   Доска мероприятия — этап, сводка, покрытие смен (DESIGN-01)
   ============================================================ */

/* Иконки: одна семья, наследуют цвет и выравниваются по тексту */
.ico { flex: none; vertical-align: -0.15em; }
.btn .ico { margin-right: -2px; }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13.5px; font-weight: 500;
  margin-bottom: 12px;
}
.back-link:hover { color: var(--ink); text-decoration: none; }

.board-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.board-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.board-head h1 { margin-bottom: 6px; }
.board-head-meta { margin: 0; font-size: 14.5px; }
.board-head-meta .chat-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }

/* --- Этап процесса --- */
.stage-rail {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0 0 20px; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.stage-rail::-webkit-scrollbar { display: none; }
.stage {
  display: flex; align-items: center; gap: 8px;
  padding-right: 14px; margin-right: 14px;
  position: relative; white-space: nowrap;
  color: var(--muted); font-size: 13.5px; font-weight: 500;
}
.stage:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 14px; height: 1px; background: var(--line-strong);
}
.stage-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  font-size: 11.5px; font-weight: 600;
}
.stage.is-done { color: var(--muted); }
.stage.is-done .stage-dot {
  background: var(--mint-soft); border-color: var(--mint-soft); color: var(--mint-text);
}
.stage.is-current { color: var(--ink); font-weight: 600; }
.stage.is-current .stage-dot {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
}
.stage-rail.is-cancelled .stage {
  color: var(--danger); font-weight: 600; padding: 6px 14px;
  background: var(--danger-soft); border-radius: 999px; margin: 0;
}

/* --- Сводка этапа --- */
.board-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.summary-figures {
  display: flex; flex-wrap: wrap; gap: 32px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.figure { display: flex; flex-direction: column; gap: 2px; }
.figure-value {
  font: 600 26px/1.1 'Onest', sans-serif;
  font-variant-numeric: tabular-nums;
}
.figure-of { font-size: 17px; color: var(--muted); font-weight: 500; }
.figure-label { font-size: 12.5px; color: var(--muted); }

.deadline-line {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 14px; font-size: 14px; color: var(--muted);
}
.deadline-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.action-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 14px; }
.btn-quiet {
  background: transparent; border-color: var(--line);
  color: var(--muted); box-shadow: none;
}
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.action-hint { font-size: 13px; color: var(--faint); flex: 1 1 240px; }

.summary-attention {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.attention-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--danger);
}
.summary-attention ul { margin: 8px 0 0; padding-left: 18px; }
.summary-attention li { font-size: 14px; margin-bottom: 4px; }

/* --- Покрытие смен: роль × день --- */
.coverage h2 { margin-top: 0; }
.cov-table { border-collapse: collapse; width: auto; min-width: 100%; }
.cov-table th, .cov-table td {
  padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line);
}
.cov-table thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.cov-table tbody th { font-weight: 500; white-space: nowrap; }
.cov-table tr:last-child th, .cov-table tr:last-child td { border-bottom: none; }
.cov-cell {
  display: inline-block; min-width: 46px; text-align: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cov-cell.is-ok { background: var(--mint-soft); color: var(--mint-text); }
.cov-cell.is-gap { background: var(--danger-soft); color: var(--danger); }

/* --- Визуальная дисциплина (DESIGN-04) --- */
/* Меньше теней: карточке достаточно границы, тень остаётся у попапов */
.card, .table-wrap, .staff-controls, .stat-card { box-shadow: none; }
.board-tools { gap: 8px; margin-bottom: 24px; }
/* Денежные значения — табличные цифры, сумма не рвётся на строки */
.stat-value, .cov-cell, .figure-value,
table.list td:has(.progress-cell) { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .board-head { flex-direction: column; gap: 12px; }
  .board-summary { padding: 16px; }
  .summary-figures { gap: 20px 28px; }
  .figure-value { font-size: 22px; }
  .btn-lg { width: 100%; justify-content: center; }
  .action-hint { flex-basis: 100%; }
}
.cov-day { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
.cov-time { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ============================================================
   Финансы — приоритет расчётов и читаемость сумм (DESIGN-03)
   ============================================================ */
.money-focus {
  display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
  background: var(--danger-soft); border: 1px solid #F1C7C7;
  border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 20px;
}
.money-focus.is-clear { background: var(--mint-soft); border-color: #BEE9C8; }
.focus-item { display: flex; flex-direction: column; gap: 2px; }
.focus-value {
  display: flex; align-items: center; gap: 8px;
  font: 600 26px/1.1 'Onest', sans-serif; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.money-focus.is-clear .focus-value { color: var(--mint-text); font-size: 20px; }
.focus-label { font-size: 13px; color: var(--muted); }
.money-focus .btn { margin-left: auto; }

.money-summary h2 { margin-top: 0; }
.money-row { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 0; }
.money-row > div { display: flex; flex-direction: column; gap: 2px; }
.money-row dt {
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.money-row dd {
  margin: 0; font: 500 17px/1.25 'Onest', sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.money-row .is-key dd { font-weight: 700; font-size: 19px; }

/* Суммы: вправо, табличные цифры, никогда не рвутся на строки */
.money-table td.num, .money-table th.num { text-align: right; }
.money-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-table td.nowrap, .money-table th { white-space: nowrap; }
.money-table tr.is-empty td { color: var(--faint); }
.money-table .progress-track { width: 64px; }
a.chip:hover { text-decoration: none; filter: brightness(.97); }

@media (max-width: 720px) {
  .money-focus { gap: 16px; padding: 16px; }
  .money-focus .btn { margin-left: 0; width: 100%; justify-content: center; }
  .money-row { gap: 12px 24px; }
}

/* ============================================================
   Профиль в кабинете: рабочая идентификация выше фото (DESIGN-02)
   ============================================================ */
.person-head {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 20px;
}
.avatar-lg { width: 56px; height: 56px; font-size: 19px; }
.person-head-main { flex: 1; min-width: 0; }
.person-head-main h1 { font-size: 20px; margin-bottom: 4px; }
.person-head-roles { margin: 0 0 12px; font-size: 14px; }
.person-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.pflag {
  padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.pflag.is-ok { background: var(--mint-soft); border-color: #BEE9C8; color: var(--mint-text); }
.pflag.is-bad { background: var(--danger-soft); border-color: #F1C7C7; color: var(--danger); }
.media-title { margin-top: 0; }

@media (max-width: 720px) {
  .person-head { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .person-head .btn { width: 100%; justify-content: center; }
  .avatar-lg { width: 44px; height: 44px; font-size: 16px; }
}

/* Фоновое автообновление доски: контент на месте, без повторного «подъёма» */
.no-entrance main > * { animation: none !important; }

/* Параметры анкеты — справочные, не равны по важности рабочим флагам */
.profile-stats { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pstat { padding: 10px 12px; }

/* Представления списка мероприятий */
.view-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.view-tabs a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-ctl);
  color: var(--muted); font-weight: 500; font-size: 14px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.view-tabs a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.view-tabs a.active { background: var(--ink); color: var(--surface); }
.view-n {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted);
}
.view-tabs a.active .view-n { background: rgba(255,255,255,.18); color: var(--surface); }
.view-tabs a.has-issue .view-n { background: var(--danger-soft); color: var(--danger); }
.view-tabs a.active.has-issue .view-n { background: rgba(255,255,255,.18); color: var(--surface); }

/* ============================================================
   Редактор шаблонов: понятные подстановки и живое превью
   ============================================================ */
.tpl-form { padding: 8px 4px 18px 22px; }
.tpl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.tpl-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.tpl-edit textarea {
  display: block; width: 100%; min-height: 190px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  font: 400 14px/1.55 'Onest', sans-serif; color: var(--ink);
  background: var(--surface); resize: vertical;
}
.tpl-edit textarea:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 133, 98, .22);
}
.tpl-hint { font-size: 12.5px; color: var(--faint); margin: 8px 0 0; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tpl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--muted); font: 500 12.5px/1.2 'Onest', sans-serif; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tpl-chip:hover { border-color: var(--coral); color: var(--coral-text); background: var(--coral-soft); }
.tpl-chip:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.tpl-preview {
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 14px 16px;
  font-size: 14px; line-height: 1.55; min-height: 190px;
}
.tpl-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 860px) {
  .tpl-cols { grid-template-columns: 1fr; }
  .tpl-form { padding-left: 4px; }
  .tpl-preview { min-height: 0; }
}

/* Каталог клиента: строки-карточки вместо таблицы — читается и на телефоне */
.cand-summary {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  padding: 10px 14px; margin: 0 0 14px;
  background: var(--surface-2); border-radius: var(--r-ctl); font-size: 13.5px;
}
.cand-summary b { font-variant-numeric: tabular-nums; }
.cand-summary .muted { flex-basis: 100%; }
.cand-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.cand-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.cand-row:last-child { border-bottom: none; }
.cand-row.is-reserve { opacity: .72; }
.cand-row-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cand-row-who a { font-weight: 500; color: var(--ink); display: block; }
.cand-row-who a:hover { color: var(--coral-text); }
.cand-row-role { display: block; font-size: 12.5px; color: var(--muted); }
.cand-row-do { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* формы-обёртки прозрачны для сетки: все кнопки — прямые дети flex-контейнера,
   поэтому отступы и мобильное растягивание применяются к каждой */
.cand-row-do form.inline { display: contents; }

@media (max-width: 720px) {
  .cand-row {
    grid-template-columns: 1fr; gap: 10px;
    padding: 14px 4px;
  }
  .cand-row-state, .cand-row-do { justify-content: flex-start; }
  .cand-row-do .btn { flex: 1 1 auto; justify-content: center; }
}


/* ---------- Карточка исполнителя: разделы, история, журнал (пакет 09.09) ---------- */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 18px;
  border-bottom: 1px solid var(--line);
}
.tabs a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--muted); font-weight: 500; font-size: 14px; text-decoration: none;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--coral); }
.tabs .tool-count { margin-left: 2px; }
.tab-panel[hidden] { display: none; }
/* действия с анкетой: одобрить / чёрный список / удалить — одной строкой под шапкой */
.person-actions-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tech-actions { margin-top: 8px; }
.tech-actions summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none; }
.tech-actions summary::before { content: "▸ "; }
.tech-actions[open] summary::before { content: "▾ "; }
.tech-actions summary::-webkit-details-marker { display: none; }
.tech-actions p { margin: 6px 0; }
.nav-badge-warn { background: var(--sand-soft, #FFE7B8); color: #8A6034; }
.chip-wait { background: #FFF1D6; color: #8A6034; }
/* переписка: селект и кнопка в одну линию по нижней кромке, на телефоне — столбиком */
.form .chat-send-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form .chat-send-row label { flex: 1 1 240px; margin: 0; }
.form .chat-send-row .btn { height: 40px; flex: 0 0 auto; margin: 0; }
.person-head .avatar-photo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none;
  cursor: zoom-in; background: var(--line);
}
.person-head-sub { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.score { display: inline-flex; align-items: baseline; gap: 6px; }
.score b { font-variant-numeric: tabular-nums; }
.score-hint { font-size: 12.5px; color: var(--muted); }

.ov-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ov-grid > * { min-width: 0; }
.ov-card h2 { font-size: 16px; margin: 0 0 12px; }
.ov-card .profile-stats { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.ov-card .pstat span { font-size: 13.5px; overflow-wrap: normal; hyphens: auto; }
.ov-card .profile-bio { font-size: 14.5px; margin-bottom: 14px; }
.ov-card .profile-tags { margin-bottom: 0; }
.ov-card h2 .muted { font-weight: 400; font-size: 13px; }
.gap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gap-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.gap-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--faint); }
.gap-list li.tone-bad::before { background: var(--danger); }
.gap-list li.tone-warn::before { background: var(--coral); }

/* строки истории: дата · мероприятие · роль · исход */
.hist { display: flex; flex-direction: column; }
.hist-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 6px 14px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.hist-row:last-child { border-bottom: none; }
.hist-date { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--muted); padding-top: 2px; }
.hist-main { min-width: 0; }
.hist-title { font-weight: 500; overflow-wrap: anywhere; }
.hist-title a { color: var(--ink); }
.hist-title a:hover { color: var(--coral-text); }
.hist-sub { font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.hist-out { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chip-neutral { background: var(--surface-2); color: var(--muted); }
.hist-legacy { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.hist-toggle { display: flex; gap: 6px; margin-bottom: 12px; }
.hist-toggle a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); text-decoration: none; }
.hist-toggle a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* портфолио: компактная лента, большое фото по клику */
.portfolio-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.portfolio-strip button {
  width: 76px; height: 96px; border-radius: 12px; overflow: hidden; padding: 0;
  border: 2px solid transparent; background: var(--line); cursor: zoom-in;
}
.portfolio-strip button.is-primary { border-color: var(--coral); }
.portfolio-strip button:focus-visible { outline: none; box-shadow: var(--focus); }
.portfolio-strip button { position: relative; }
.portfolio-strip img, .portfolio-strip video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.portfolio-strip button.is-video { cursor: pointer; }
.no-photo { font-size: 13.5px; color: var(--muted); }
dialog.lightbox { border: none; border-radius: 16px; padding: 0; background: #111; max-width: min(92vw, 720px); }
dialog.lightbox::backdrop { background: rgba(20,20,22,.7); }
dialog.lightbox img, dialog.lightbox video { display: block; max-width: 100%; max-height: 86vh; object-fit: contain; margin: 0 auto; }
dialog.lightbox figure { margin: 0; min-width: min(92vw, 320px); min-height: 200px; display: grid; place-items: center; }
dialog.lightbox .lightbox-x { position: absolute; top: 10px; right: 10px; z-index: 2; }
dialog.lightbox-gallery { max-width: min(96vw, 900px); overflow: visible; }
dialog.lightbox [hidden] { display: none !important; }   /* hidden сильнее display:block у img/video */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: #111; font-size: 30px; line-height: 44px; padding: 0 0 4px;
}
.lightbox-nav:hover { background: #fff; }
.lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
.lightbox-count { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.8); pointer-events: none; }
@media (max-width: 560px) { .lightbox-nav { width: 38px; height: 38px; line-height: 38px; font-size: 26px; } }

.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.doc-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.doc-row:last-child { border-bottom: none; }
.doc-row .inline { margin-left: auto; }
.doc-row form.inline select { height: 32px; padding: 0 28px 0 10px; font-size: 13px; }

/* журнал изменений */
.chg-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.chg-row:last-child { border-bottom: none; }
.chg-when { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.chg-who { font-size: 12.5px; color: var(--muted); }
.chg-diff { overflow-wrap: anywhere; }
.chg-diff del { color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.chg-diff ins { text-decoration: none; font-weight: 500; }

/* редактор по разделам */
.section-form { position: relative; scroll-margin-top: 90px; }
.section-form h2 { margin: 0 0 4px; }
.section-form .section-hint { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
.save-bar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  margin: 16px -4px 0; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-pop);
}
.save-bar .save-state { margin-right: auto; font-size: 13.5px; color: var(--muted); }
.section-form[data-dirty="1"] .save-bar { border-color: var(--coral); }
.section-form[data-dirty="1"] .save-state::before { content: "● "; color: var(--coral); }
.section-form.is-saved .save-state { color: var(--mint-text); }
.editor-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.editor-nav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); text-decoration: none; }
.editor-nav a:hover { color: var(--ink); border-color: var(--ink); }
.conflict { background: var(--danger-soft); border: 1px solid #F1C7C7; border-radius: var(--r-ctl); padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.conflict ul { margin: 6px 0 0; padding-left: 18px; }
.audience { font-size: 12.5px; color: var(--muted); font-weight: 400; }

@media (max-width: 900px) {
  .ov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hist-row { grid-template-columns: 1fr; gap: 4px; }
  .hist-out { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { padding-top: 8px; }
  .chg-row { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .save-bar { margin: 16px -10px 0; flex-wrap: wrap; }
  .save-bar .save-state { flex-basis: 100%; }
}


/* ---------- Пополнение базы: индикация новых участников ---------- */
.joined-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 14px; margin: 0 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl);
}
.joined-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.joined-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.joined-pill b { font-variant-numeric: tabular-nums; color: var(--ink); }
.joined-pill:hover { border-color: var(--coral); color: var(--coral-text); }
.joined-pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.joined-pill.is-active b { color: #fff; }
.joined-reset { font-size: 13px; color: var(--coral-text); margin-left: auto; }
.joined-since { margin-bottom: 14px; }
.joined-since a { color: var(--coral-text); font-weight: 500; }
.chip-new { background: var(--coral-soft); color: var(--coral-on-soft); font-weight: 600; }
.nav-badge-new { background: var(--mint-soft); color: var(--mint-text); }
.faint-text { color: var(--muted); }

@media (max-width: 640px) {
  .joined-bar { gap: 6px 8px; }
  .joined-title { flex-basis: 100%; }
  .joined-reset { margin-left: 0; }
}


/* ---------- Оценки работы после мероприятия ---------- */
.rate-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.rate-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.1fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.rate-row:last-child { border-bottom: none; }
.rate-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rate-who a { font-weight: 500; color: var(--ink); display: block; }
.rate-who a:hover { color: var(--coral-text); }
.rate-stars { display: flex; gap: 5px; }
.star-opt { position: relative; cursor: pointer; }
.star-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
}
.star-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  font: 600 13px/1 'Onest', sans-serif; color: var(--muted);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.star-opt:hover span { border-color: var(--coral); color: var(--coral-text); }
.star-opt input:checked + span { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.star-opt input:focus-visible + span { outline: none; box-shadow: var(--focus); }
.rate-comment { height: 36px; margin: 0; }
.chip-star { background: var(--coral-soft); color: var(--coral-on-soft); font-weight: 600; }

@media (max-width: 760px) {
  .rate-row { grid-template-columns: 1fr; gap: 10px; }
  .rate-row .btn { justify-self: start; }
}

/* ---------- Донабор ---------- */
.topup-table th[scope="row"] { font-weight: 500; text-align: left; }
.topup-table td, .topup-table th { padding: 8px 10px; }
.form .topup-need { width: 72px; height: 36px; margin: 0; display: inline-block; text-align: center; }

/* ---------- Журнал руководителя ---------- */
.journal td { vertical-align: top; }
.journal .j-details { max-width: 520px; overflow-wrap: anywhere; color: var(--muted); }
.journal tr.j-errors td:first-child { border-left: 3px solid var(--danger); }
.j-trace summary { cursor: pointer; font-size: 12px; color: var(--faint); }
.j-trace pre { font-size: 11px; white-space: pre-wrap; max-height: 260px; overflow: auto; background: var(--surface-2); padding: 8px; border-radius: 8px; }

/* ---------- Сообщения → Рассылки ---------- */
.bc-filters { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bc-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.bc-filters select { height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0 10px; background: var(--surface); }
/* поля дат в фильтрах журнала — в один ряд с выпадашками */
.journal-filters input[type="date"] { height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0 10px; background: var(--surface); font: inherit; }
.journal-filters select:disabled { opacity: .5; }
.bc-list td { vertical-align: top; }
.bc-snippet { max-width: 46ch; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
tr.has-failed td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.bc-meta .kv { margin-bottom: 14px; }
.bc-text { white-space: pre-wrap; font: inherit; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; overflow-wrap: anywhere; }

/* ---------- Оформление клиентской витрины (в форме мероприятия) ----------
   Превью намеренно с фильтром: на витрине поверх картинки лежит затемнение
   (или засветление в светлой теме), и менеджер должен видеть примерно то,
   что увидит клиент, а не исходный файл. */
.showcase-setup {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.showcase-preview {
  margin: 0; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #0B0B0D;
}
.showcase-preview img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  filter: brightness(.62) saturate(.95);
}
.showcase-preview figcaption {
  padding: 8px 12px; font-size: 12px; color: var(--muted); background: var(--surface-2);
}
.showcase-controls { display: grid; gap: 12px; }
.theme-pick {
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px 12px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.theme-pick legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.theme-pick label { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
/* .form input делает поля 100% на 42px — радиокнопкам это не нужно */
.theme-pick input[type="radio"] {
  width: auto; height: auto; margin: 0; padding: 0; accent-color: var(--coral-deep);
}
/* фон витрины из попапа «Клиентская подборка»: превью + загрузка в одну строку */
.catalog-look { margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.catalog-look h3 { margin: 0 0 10px; }
.catalog-look-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; align-items: start; }
.catalog-look-preview {
  margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0B0B0D;
}
.catalog-look-preview img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; filter: brightness(.62) saturate(.95); }
.catalog-look-preview figcaption { padding: 6px 10px; font-size: 12px; color: var(--muted); background: var(--surface-2); }
.catalog-look-form { display: grid; gap: 8px; }
.catalog-look-form .field-hint { margin: 0; }
@media (max-width: 720px) { .catalog-look-row { grid-template-columns: 1fr; } }
/* липкая шапка админки перекрывала заголовок секции при переходе по якорю */
#sec-showcase { scroll-margin-top: 90px; }
@media (max-width: 720px) { .showcase-setup { grid-template-columns: 1fr; } }

/* ============================================================
   КЛИЕНТСКАЯ ВИТРИНА /client/{token}
   Стили сняты с фирменного сайта anytie: чернильный фон #0B0B0D,
   свет #F4F4F2, мята = интерактив, песок = цифры, лаванда = кикеры.

   Главное правило блока: НИЧЕГО не застывает в пикселях.
   Витрину смотрят и на ноутбуке 1280, и на мониторе 2560+, и в браузере,
   отзумленном до 50% (эффективная ширина ~4000). Поэтому размеры, отступы,
   шрифты, высота шапки и бегущей строки заданы через clamp() от vw, а первый
   экран занимает высоту вьюпорта — иначе страница выглядит маркой, приклеенной
   к центру чёрного поля.

   Раскладка: body — колонка на всю высоту экрана, в ней герой (постер)
   и .sc-sheet — матовая «шторка», которая тянется до низа экрана даже когда
   кандидатов всего двое.

   Живёт только под body.sc — админка и анкета остаются светлыми.
   ============================================================ */
body.sc {
  /* ---- тёмная тема (по умолчанию) ----
     Всё, что имеет цвет, ходит только через эти токены: светлая тема ниже
     переопределяет ровно их. Литералов цвета в правилах быть не должно —
     иначе на светлом фоне что-нибудь останется белым по белому. */
  --bg: #0B0B0D;
  --ink: #F4F4F2;
  --muted: rgba(244, 244, 242, .68);
  --faint: rgba(244, 244, 242, .46);
  --mint: #B4F8AF;            /* заливка кнопок — одинаковая в обеих темах */
  --mint-hover: #C9FFC5;
  --on-mint: #0B0B0D;         /* текст поверх мятной заливки: всегда тёмный */
  --accent: #B4F8AF;          /* мятный ТЕКСТ на фоне страницы */
  --sand: #EBD9C4;
  --lav: #C6BDFE;
  --hair: rgba(255, 255, 255, .12);
  --hair-soft: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .24);
  --line-strong: rgba(255, 255, 255, .5);
  --edge: rgba(255, 255, 255, .16);
  --edge-strong: rgba(255, 255, 255, .3);
  --card: #141416;
  --glass: rgba(7, 7, 9, .78);
  --glass-soft: rgba(9, 9, 11, .46);       /* плашка поверх постера */
  --halo: rgba(6, 5, 4, .66);              /* ореол под кнопкой первого экрана */
  --hero-edge: rgba(244, 244, 242, .62);
  --hero-text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
  --hero-btn-shadow: 0 6px 34px rgba(0, 0, 0, .55);
  --menu-bg: rgba(7, 7, 9, .93);
  --toast-bg: rgba(7, 7, 9, .94);
  --handle: rgba(244, 244, 242, .28);
  --stroke: rgba(244, 244, 242, .4);
  --soft-fill: rgba(244, 244, 242, .16);
  --soft-line: rgba(244, 244, 242, .5);
  --sel-edge: rgba(180, 248, 175, .6);
  --sel-glow: rgba(180, 248, 175, .2);
  /* Отметка «берём» — оранжевый акцент агентства (#FF8562 с anytie.ru).
     Мята осталась фирменной для кнопок и бегущей строки, а выбор клиента
     звучит отдельным цветом и не спорит с ней. */
  --pick: #FF8562;
  --pick-text: #FF8562;
  --on-pick: #17110E;
  --pick-edge: rgba(255, 133, 98, .66);
  --pick-glow: rgba(255, 133, 98, .22);
  --sheet-top: rgba(255, 255, 255, .14);
  --sheet-shadow: rgba(0, 0, 0, .45);
  --nav-veil: linear-gradient(180deg, rgba(11, 11, 13, .55), rgba(11, 11, 13, 0));
  --mq-veil: linear-gradient(0deg, rgba(9, 9, 11, .82), rgba(9, 9, 11, .5));
  /* Затемнение поверх фона-картинки. Именно оно делает текст читаемым поверх
     произвольного брендбука, поэтому в светлой теме оно не «слабее», а другое:
     не затемняет, а засветляет. */
  --scrim:
    linear-gradient(180deg, rgba(11, 11, 13, .16) 0%, rgba(11, 11, 13, .26) 26%,
                            rgba(11, 11, 13, .62) 66%, rgba(11, 11, 13, .9) 100%);
  --sc-ease: cubic-bezier(.16, 1, .3, 1);

  /* шкала страницы */
  /* до 1920 ведёт себя как раньше (1560), дальше растёт вместе с экраном:
     на 4000px иначе оставалось по 1200px мёртвого поля с боков */
  --wrap: min(92vw, clamp(1560px, 66vw, 2360px));
  --pad: clamp(20px, 3.2vw, 60px);
  --nav-h: clamp(68px, 4.4vw, 104px);
  --mq-h: clamp(52px, 3.2vw, 84px);

  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(16px, .26vw + 12.7px, 21px);
  line-height: 1.6;
  overflow-x: hidden;
}

body.sc ::selection { background: var(--mint); color: var(--on-mint); }
body.sc a { color: inherit; text-decoration: none; }
body.sc a:hover { text-decoration: none; }
body.sc a:focus-visible {
  box-shadow: none; outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
body.sc h1, body.sc h2, body.sc h3 {
  font-family: 'Unbounded', sans-serif; font-weight: 400; line-height: 1.14; color: var(--ink);
  margin: 0;
}
/* витрина полноэкранная: сбрасываем колонку и «выезд» админского main */
body.sc main { max-width: none; margin: 0; padding: 0; }
body.sc main > * { animation: none; }
/* [hidden] должен побеждать display из классов витрины */
body.sc [hidden] { display: none !important; }
body.sc img, body.sc video { max-width: 100%; }
.sc-wrap {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
}

/* ---------- постер сайта: фиксированный слой под всей страницей ----------
   Именно его размывает «шторка» — иначе матовое стекло нечего размывать. */
.sc-poster {
  position: fixed; inset: 0; z-index: -2;
  display: block; overflow: hidden; pointer-events: none;
}
.sc-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sc::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--scrim);
}

/* ---------- шапка: как на сайте ---------- */
.sc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--nav-h);
  /* по краям — но не дальше колонки контента, иначе на широком экране шапка
     и содержимое читаются как два несвязанных слоя */
  padding-left: max(clamp(16px, 3.2vw, 60px), calc((100% - var(--wrap)) / 2 + var(--pad)));
  padding-right: max(clamp(16px, 3.2vw, 60px), calc((100% - var(--wrap)) / 2 + var(--pad)));
  background: var(--nav-veil);
}
.sc-nav .sc-logo img { height: clamp(30px, 2.1vw, 50px); width: auto; display: block; }
/* Логотип белый, а в светлой теме фон светлый — держим оба файла и
   показываем нужный. Фильтром не обойтись: в знаке есть мятная точка,
   invert() перекрасил бы её в розовую. */
.sc-nav-links { display: flex; align-items: center; gap: clamp(8px, .8vw, 16px); }
.sc-btn-short { display: none; }
.sc-nav-links a:not(.sc-btn) {
  font-size: clamp(14.5px, .62vw, 19px); font-weight: 500; color: var(--muted);
  transition: color .3s var(--sc-ease); white-space: nowrap;
}
.sc-nav-links a:not(.sc-btn):hover { color: var(--ink); }

body.sc .sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: 0; cursor: pointer;
  font-family: 'Onest', sans-serif; font-weight: 500; line-height: 1;
  font-size: clamp(15px, .62vw, 19px);
  padding: clamp(13px, .62vw, 18px) clamp(26px, 1.3vw, 40px);
  white-space: nowrap;
  transition: transform .35s var(--sc-ease), background .35s var(--sc-ease),
              color .35s var(--sc-ease), border-color .35s var(--sc-ease);
}
body.sc .sc-btn:active { transform: scale(.98); }
body.sc .sc-btn-mint { background: var(--mint); color: var(--on-mint); }
body.sc .sc-btn-mint:hover { transform: translateY(-1px); background: var(--mint-hover); color: var(--on-mint); }
body.sc .sc-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--edge-strong); }
body.sc .sc-btn-ghost:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }
body.sc .sc-nav .sc-btn { padding: clamp(11px, .52vw, 15px) clamp(22px, 1.1vw, 34px); }
body.sc .sc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* бургер и полноэкранное меню — как на сайте */
.sc-burger {
  display: none; width: clamp(42px, 2.8vw, 56px); height: clamp(42px, 2.8vw, 56px);
  border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; font-size: clamp(19px, 1.2vw, 24px); line-height: 1; place-items: center;
}
.sc-menu {
  position: fixed; inset: 0; z-index: 55; background: var(--menu-bg);
  -webkit-backdrop-filter: blur(26px) saturate(.8);
  backdrop-filter: blur(26px) saturate(.8);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 0 var(--pad);
  /* visibility, а не только opacity: иначе закрытое меню ловит Tab и фокус
     уходит в невидимые пункты */
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .4s var(--sc-ease), visibility 0s linear .4s;
}
.sc-menu.open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .4s var(--sc-ease), visibility 0s;
}
body.sc.menu-open { overflow: hidden; }
/* при открытом меню бургер (он же ✕) поднимается над шторкой меню,
   а дублирующая кнопка заказа из шапки прячется — она есть в самом меню */
body.sc.menu-open .sc-nav { z-index: 60; background: transparent; }
body.sc.menu-open .sc-nav .sc-btn { display: none; }
body.sc.menu-open .sc-burger { border-color: var(--line-strong); }
.sc-menu a, .sc-menu button.sc-menu-item {
  font-family: 'Unbounded', sans-serif; font-weight: 400;
  font-size: clamp(1.35rem, 6.4vw, 2rem);
  padding: 13px 0; border: 0; border-bottom: 1px solid var(--hair-soft);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--sc-ease), transform .5s var(--sc-ease);
}
.sc-menu.open a, .sc-menu.open button.sc-menu-item { opacity: 1; transform: none; }
.sc-menu.open a:nth-child(2) { transition-delay: .05s; }
.sc-menu.open a:nth-child(3) { transition-delay: .1s; }
.sc-menu.open a:nth-child(4) { transition-delay: .15s; }
body.sc .sc-menu .sc-btn {
  margin-top: 26px; border-bottom: 0; opacity: 0; transition-delay: .2s; align-self: flex-start;
}
body.sc .sc-menu.open .sc-btn { opacity: 1; }

/* ---------- первый экран: занимает вьюпорт целиком ----------
   Без этого на мониторе 2560x1300 постер съедал половину экрана,
   а вторая половина оставалась плоской чёрной пустотой. */
.sc-hero {
  position: relative; flex: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(94vh, 1800px);
  padding: calc(var(--nav-h) + clamp(40px, 7vh, 96px)) 0 clamp(36px, 6vh, 90px);
}
@supports (min-height: 100svh) {
  .sc-hero { min-height: min(94svh, 1800px); }
}
/* На анкете кандидата первый экран короче: клиент пришёл смотреть человека,
   а не постер — фото должно быть видно почти сразу. */
.sc-hero.slim { min-height: min(58vh, 1000px); }
@supports (min-height: 100svh) {
  .sc-hero.slim { min-height: min(58svh, 1000px); }
}
body.sc .kicker {
  font-size: clamp(11.5px, .48vw, 15px); letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; margin-bottom: clamp(14px, 1vw, 22px);
}
body.sc .kicker.lav { color: var(--lav); }
.sc-hero h1 {
  font-size: clamp(2rem, 4.4vw, 6.4rem); letter-spacing: -.015em;
  margin-bottom: clamp(12px, 1vw, 22px); max-width: 20ch;
}
.sc-line {
  color: var(--muted); font-size: clamp(15.5px, .72vw, 22px);
  margin-bottom: clamp(18px, 1.4vw, 30px);
}
.sc-line b { color: var(--sand); font-weight: 400; }
body.sc .sub { color: var(--muted); font-size: clamp(15px, .68vw, 21px); max-width: 54ch; }
body.sc .sub .mint { color: var(--pick-text); }
/* строка, которая живёт только на телефоне: там сводка-плашка убрана,
   а её числа переехали в абзац первого экрана */
.sc-phone-only { display: none; }
/* ---------- сводка подборки: стеклянная плашка с кольцом прогресса ---------- */
.sc-stats {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin-top: clamp(26px, 2.4vw, 52px);
  /* фиксированная доля колонки, а не fit-content: иначе ячейка с кольцом
     раздувается и строка переносится на пустом месте */
  width: min(100%, clamp(520px, 62vw, 980px));
  border: 1px solid var(--hair); border-radius: clamp(16px, 1.2vw, 26px);
  background: var(--glass-soft);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
}
.sc-stat {
  position: relative; min-width: 0;
  flex: 1 1 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(5px, .4vw, 10px);
  padding: clamp(14px, 1.1vw, 26px) clamp(18px, 1.4vw, 34px);
}
/* разделители рисуем псевдоэлементом: у flex-переноса border съезжает */
.sc-stat + .sc-stat::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--hair);
}
.sc-stat b {
  display: block; font-family: 'Unbounded', sans-serif; font-weight: 300; line-height: 1;
  font-size: clamp(1.5rem, 2.2vw, 3.2rem);
  color: var(--sand); font-variant-numeric: tabular-nums;
}
.sc-stat span {
  font-size: clamp(10.5px, .46vw, 13.5px); line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
/* последняя ячейка: кольцо + число «сколько отмечено» */
.sc-stat-go { flex: 1.3 1 0; flex-direction: row; align-items: center; gap: clamp(12px, .9vw, 20px); }
.sc-stat-go .sc-stat-txt { display: flex; flex-direction: column; gap: clamp(4px, .3vw, 8px); min-width: 0; }
.sc-stat-go b { color: var(--pick-text); }
.sc-ring {
  flex: none; width: clamp(38px, 2.8vw, 60px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--pick) calc(var(--p, 0) * 1%), var(--hair) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 56%, #000 58%);
  mask: radial-gradient(farthest-side, transparent 56%, #000 58%);
}
.sc-stat-go.is-done .sc-ring { box-shadow: 0 0 0 1px var(--pick-glow); }

/* ---------- переход на состав ----------
   Первый экран занимает вьюпорт целиком, поэтому без явного приглашения
   не очевидно, что подборка ниже. Кнопка — та же, что на первом экране
   сайта агентства: без заливки, с плотной обводкой и мягким ореолом,
   чтобы читаться прямо поверх фотографии. */
.sc-cue {
  position: relative; display: flex; align-items: center;
  margin-top: clamp(26px, 2.4vw, 52px);
}
body.sc .sc-hero-btn {
  position: relative; z-index: 1;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem); letter-spacing: .01em;
  padding: clamp(16px, 1.05vw, 26px) clamp(32px, 2.5vw, 62px);
  border-color: var(--hero-edge);
  text-shadow: var(--hero-text-shadow);
  box-shadow: var(--hero-btn-shadow);
}
@media (max-width: 760px) {
  .sc-cue { width: 100%; }
  body.sc .sc-hero-btn { width: 100%; justify-content: center; }
  .sc-stats { width: 100%; }
  .sc-stat { flex: 1 1 44%; }
  .sc-stat:nth-child(n+3)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair);
  }
  .sc-stat:nth-child(3)::before { display: none; }
}

/* ---------- мягкое проявление текста первого экрана (soft blur in) ----------
   Текст собирается из размытия, как в заглавиях Apple: каждая буква заголовка
   со своей задержкой, остальные строки — блоками. Прячем ДО анимации только
   если скрипт подключился (html.sc-js), иначе без JS страница осталась бы пустой. */
html.sc-js body.sc [data-reveal], html.sc-js body.sc [data-reveal-chars] { opacity: 0; }
.sc-word { display: inline-block; white-space: nowrap; }
.sc-char { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: reduce) {
  html.sc-js body.sc [data-reveal], html.sc-js body.sc [data-reveal-chars] { opacity: 1; }
}

/* Плавная прокрутка только на витрине: селектор :has ограничивает её
   страницами клиента, админку не трогаем. */
html:has(body.sc) { scroll-behavior: smooth; }
/* иначе верх шторки со скруглением и «ручкой» уезжает под фиксированную шапку */
body.sc #sostav { scroll-margin-top: calc(var(--nav-h) + clamp(10px, 1vw, 24px)); }

/* ---------- шторка: матовое стекло от состава до подвала ----------
   Один слой на всю нижнюю часть: и шва между блоками нет, и на коротких
   подборках она дотягивается до низа экрана (flex: 1). */
.sc-sheet {
  position: relative; z-index: 1;
  flex: 1 1 auto; display: flex; flex-direction: column;
  border-radius: clamp(22px, 2vw, 44px) clamp(22px, 2vw, 44px) 0 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(.86);
  backdrop-filter: blur(22px) saturate(.86);
  box-shadow: 0 -1px 0 var(--sheet-top), 0 -40px 90px var(--sheet-shadow);
}
/* тонкая нить по верхней кромке — «ручка», за которую шторку тянут */
.sc-sheet::before {
  content: ""; position: absolute; left: 50%; top: 13px; transform: translateX(-50%);
  width: clamp(54px, 4vw, 90px); height: 3px; border-radius: 999px;
  background: var(--handle);
}
/* body.sc — обязательно: сброс `body.sc main` иначе перебивает этот padding
   по специфичности (0,1,2 против 0,1,0) и состав прилипает к кромке шторки */
/* соседние карточки при раскрытии расступаются и уезжают за край секции —
   обрезаем их здесь, чтобы страница не получала горизонтальную прокрутку */
/* переход по якорю ставит фокус на саму шторку (tabindex="-1") — браузер
   рисовал поверх неё синюю рамку; клавиатурный фокус-ринг оставляем */
body.sc .sc-glass:focus { outline: none; }
/* iOS подсвечивает тапы синим прямоугольником — на тёмной витрине это мусор */
body.sc { -webkit-tap-highlight-color: transparent; }
body.sc .sc-glass {
  flex: 1 1 auto; overflow-x: hidden;
  padding: clamp(34px, 3.4vw, 76px) 0 clamp(36px, 3vw, 76px);
}
.sc-card[data-shift] { transition: transform .34s var(--sc-ease), opacity .34s var(--sc-ease); }
.sc-role + .sc-role { margin-top: clamp(34px, 4vw, 86px); }
.sc-role-head {
  display: flex; align-items: baseline; gap: clamp(12px, 1vw, 22px);
  margin-bottom: clamp(20px, 1.8vw, 40px); flex-wrap: wrap;
}
.sc-role-head h2 { font-size: clamp(1.5rem, 2.4vw, 3.4rem); letter-spacing: -.015em; }
.sc-role-head span { color: var(--faint); font-size: clamp(13px, .55vw, 17px); }

/* ---------- карточки-раскладушки (по образцу smoothui expandable cards) ----------
   Свёрнутая карточка — портрет во всю площадь: снизу имя, справа две круглые
   кнопки ♥ / ✕. Клик по портрету раскрывает карточку на всю ширину ряда:
   слева портрет, справа — параметры, языки, «Видеовизитка». Без JS портрет
   остаётся ссылкой на страницу анкеты. */
.sc-grid {
  display: grid; gap: clamp(14px, 1.4vw, 30px); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(clamp(214px, 14vw, 330px), 1fr));
}
.sc-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  border-radius: clamp(16px, 1.1vw, 26px); overflow: hidden;
  border: 1px solid var(--hair); background: var(--card);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  transition: border-color .3s var(--sc-ease), box-shadow .3s var(--sc-ease);
}
.sc-card:hover { border-color: var(--line); box-shadow: 0 20px 48px rgba(0, 0, 0, .3); }

.sc-face { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--card); }
body.sc .sc-face-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.sc-face-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block;
  filter: grayscale(1); transition: filter .6s var(--sc-ease), transform .6s var(--sc-ease);
}
.sc-card:hover .sc-face-img, .sc-card.is-open .sc-face-img { filter: grayscale(0); }
.sc-card:hover .sc-face-img { transform: scale(1.03); }
/* читаемость белого текста и кнопок поверх любого портрета */
.sc-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, .24) 40%,
                                       rgba(0, 0, 0, .04) 62%, rgba(0, 0, 0, .12) 100%);
}
/* имя на портрете — внутри ссылки, кнопки решения — поверх, отдельно */
.sc-who {
  position: absolute; z-index: 1; left: clamp(12px, .9vw, 22px); right: clamp(12px, .9vw, 22px);
  bottom: clamp(12px, .9vw, 22px); color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
  padding-right: clamp(104px, 7vw, 140px);
}
.sc-who b {
  display: block; color: #fff; font-weight: 500;
  font-size: clamp(1rem, .78vw, 1.45rem); line-height: 1.15;
}
.sc-who span {
  display: block; margin-top: 3px; color: rgba(255, 255, 255, .82); line-height: 1.35;
  font-size: clamp(.76rem, .56vw, 1rem);
}
.sc-round-row {
  position: absolute; z-index: 2; right: clamp(12px, .9vw, 22px);
  bottom: clamp(12px, .9vw, 22px); display: flex; gap: clamp(8px, .5vw, 12px);
}
body.sc .sc-round {
  width: clamp(44px, 2.9vw, 58px); height: clamp(44px, 2.9vw, 58px); flex: none;
  display: grid; place-items: center; cursor: pointer; border-radius: 999px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .38);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
  transition: transform .2s var(--sc-ease), background .25s var(--sc-ease),
              color .25s var(--sc-ease), border-color .25s var(--sc-ease);
}
body.sc .sc-round svg { width: 46%; height: 46%; }
body.sc .sc-round:hover { transform: scale(1.1); background: rgba(255, 255, 255, .32); }
body.sc .sc-round:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.sc .sc-face-link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
body.sc .sc-round.yes.is-on {
  background: var(--pick); border-color: var(--pick); color: var(--on-pick);
  box-shadow: 0 0 0 4px var(--pick-glow);
}
body.sc .sc-round.no.is-on { background: #F4F4F2; border-color: #F4F4F2; color: #141416; }
.sc-card.is-liked { border-color: var(--pick-edge); box-shadow: 0 0 0 1px var(--pick-glow), 0 18px 42px rgba(0, 0, 0, .28); }
.sc-card.is-liked .sc-face-img { filter: grayscale(0); }
/* гасим только портрет: кнопки должны остаться читаемыми — именно ими
   клиент отменяет случайный «не подходит» */
.sc-card.is-disliked .sc-face-img { opacity: .42; }

/* ---- раскрытая карточка ----
   Растёт ТОЛЬКО вбок и поверх соседей: сетка не перестраивается, высота
   остаётся прежней (её и ширину портрета JS кладёт в --open-h / --face-w),
   сторона выбирается по свободному месту — вправо или влево. */
.sc-card.is-open {
  z-index: 20; justify-self: start;
  width: var(--open-w); height: var(--open-h);
  grid-template-columns: var(--face-w) minmax(0, 1fr);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .42);
}
/* раскрытие влево: портрет остаётся ровно на своём месте (правый край
   карточки прибит к ячейке), а панель выезжает слева от него */
.sc-card.is-open.to-left {
  justify-self: end;
  grid-template-columns: minmax(0, 1fr) var(--face-w);
}
.sc-card.is-open.to-left .sc-face { order: 2; }
.sc-card.is-open.to-left .sc-open { order: 1; }
.sc-card.is-open .sc-face { aspect-ratio: auto; height: 100%; width: var(--face-w); }
.sc-open { min-width: 0; overflow: hidden; }
/* Высота карточки не меняется, поэтому содержимое панели подрезано по месту:
   всё помещается с запасом, полоса прокрутки не нужна (полная анкета — на
   отдельной странице кандидата). */
.sc-open-in {
  height: 100%; overflow: hidden; display: flex; flex-direction: column;
  gap: clamp(6px, .45vw, 11px); padding: clamp(12px, .9vw, 22px);
}
.sc-open-in .kicker { margin: 0; font-size: clamp(10px, .4vw, 12px); letter-spacing: .16em; }
.sc-open-in .sc-bio {
  margin: 0; max-width: 62ch; font-size: clamp(12.5px, .54vw, 15px); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* параметры — компактной сеткой в одну строку, а не крупными плитками */
.sc-open-in .sc-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  margin: 0; gap: clamp(6px, .5vw, 11px) clamp(10px, .8vw, 18px);
  padding: clamp(8px, .6vw, 13px) 0;
}
.sc-open-in .sc-fact b { font-size: clamp(.92rem, .86vw, 1.2rem); margin-bottom: 1px; }
.sc-open-in .sc-fact span { font-size: clamp(9.5px, .4vw, 11.5px); line-height: 1.25; }
/* теги и миниатюры — в одну строку, лишнее просто не показываем */
.sc-open-in .sc-tags { margin: 0; gap: clamp(5px, .4vw, 9px); max-height: 2.4em; overflow: hidden; }
.sc-open-in .sc-tag { padding: clamp(4px, .3vw, 7px) clamp(9px, .6vw, 14px); font-size: clamp(11px, .45vw, 13px); }
.sc-open-in .sc-thumbs { margin: 0; gap: 7px; flex: none; flex-wrap: nowrap; overflow: hidden; }
body.sc .sc-open-in .sc-thumbs button { width: clamp(38px, 2.3vw, 48px); height: clamp(38px, 2.3vw, 48px); flex: none; }
.sc-open-in .sc-open-do { gap: 8px; }
body.sc .sc-open-in .sc-btn { font-size: clamp(12px, .48vw, 14.5px); padding: clamp(8px, .45vw, 12px) clamp(14px, .8vw, 20px); }
.sc-open-do {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: auto; padding-top: clamp(6px, .6vw, 14px);
}
/* ---- видео-визитка играет прямо в карточке ----
   Ролик встаёт поверх портрета, миниатюра со значком «плей» его запускает,
   соседняя миниатюра-фото возвращает портрет. */
.sc-face-vid {
  position: absolute; inset: 0; z-index: 3; background: #000;
  display: grid; place-items: center;
}
.sc-face-vid video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
body.sc .sc-fs {
  position: absolute; top: 10px; right: 10px; z-index: 4; cursor: pointer;
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .46); border: 1px solid rgba(255, 255, 255, .34); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s var(--sc-ease), transform .2s var(--sc-ease);
}
body.sc .sc-fs svg { width: 16px; height: 16px; }
/* пока идёт ролик, имя и кнопки решения уступают место плееру: иначе они
   ложатся поверх его собственных кнопок и спорят с ними */
.sc-card.is-playing .sc-who,
.sc-card.is-playing .sc-round-row { opacity: 0; pointer-events: none; }
.sc-who, .sc-round-row { transition: opacity .25s var(--sc-ease); }
body.sc .sc-fs:hover { background: rgba(0, 0, 0, .72); transform: scale(1.06); }
/* ---- «Рекомендация» на карточке ----
   Наш выбор лучших. Кружок в верхнем углу портрета: заметный, но не спорящий
   с отметками клиента внизу карточки. */
.sc-rec {
  position: absolute; z-index: 2; top: clamp(12px, .9vw, 20px); left: clamp(12px, .9vw, 20px);
  display: inline-flex; align-items: center; gap: 7px; pointer-events: none;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--pick); color: var(--on-pick);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.sc-rec svg { width: 15px; height: 15px; flex: none; }
.sc-rec b {
  font-weight: 600; font-size: clamp(10.5px, .45vw, 12.5px);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
/* на свёрнутой карточке подпись не нужна — хватает звезды */
.sc-card:not(.is-open) .sc-rec { padding: 8px; }
.sc-card:not(.is-open) .sc-rec b { display: none; }
.sc-card.is-playing .sc-rec { opacity: 0; }

/* миниатюра ролика отличается от фотографий только значком «плей» */
body.sc .sc-thumbs button.is-video { position: relative; }
.thumb-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .34); color: #fff; pointer-events: none;
}
.thumb-play svg { width: 42%; height: 42%; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }

/* на узком экране вбок расти некуда — раскрываем вниз.
   Колонкой, а не гридом: с двумя авто-строками браузер делил высоту портрета
   пополам и панель обрезалась. */
@media (max-width: 640px) {
  .sc-card.is-open {
    display: flex; flex-direction: column;
    width: auto; height: auto; justify-self: stretch;
  }
  /* формат портрета не меняем: при 4:3 кадр обрезался по вертикали */
  .sc-card.is-open .sc-face { aspect-ratio: 3 / 4; height: auto; width: auto; flex: none; }
  /* подпись под именем — в одну строку: иначе она обтекает круглые кнопки
     и последняя строка уезжает вбок */
  .sc-who { padding-right: 112px; }
  .sc-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sc-card.is-open .sc-open { flex: 1 1 auto; overflow: visible; }
  /* на телефоне место есть — возвращаем читаемые размеры */
  .sc-open-in {
    height: auto; overflow: visible;
    padding: 16px; gap: 11px;
  }
  .sc-open-in .kicker { font-size: 11px; }
  .sc-open-in .sc-bio { font-size: 14px; line-height: 1.5; -webkit-line-clamp: 5; }
  .sc-open-in .sc-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; padding: 12px 0;
  }
  .sc-open-in .sc-fact b { font-size: 1.05rem; }
  .sc-open-in .sc-fact span { font-size: 11px; }
  .sc-open-in .sc-tags { max-height: none; gap: 8px; }
  .sc-open-in .sc-tag { font-size: 12.5px; padding: 6px 12px; }
  /* галерея — первым делом под портретом: именно ей пользуются,
     пока смотрят фотографии и видео */
  .sc-open-in .sc-thumbs { display: flex; flex-wrap: wrap; gap: 8px; order: -1; margin-bottom: 2px; }
  body.sc .sc-open-in .sc-thumbs button { width: 54px; height: 54px; }
  .sc-open-in .sc-open-do { gap: 10px; }
  body.sc .sc-open-in .sc-btn { flex: 1 1 auto; justify-content: center; font-size: 14px; padding: 12px 16px; }
}
/* на телефоне — одна карточка в ширину: портрет крупный, решение очевидное */
@media (max-width: 640px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-face-img, body.sc .sc-round { transition: none; }
}

/* ---------- анкета кандидата ---------- */
.sc-back {
  display: inline-flex; gap: 8px; align-items: center; color: var(--muted);
  font-size: clamp(14px, .6vw, 18px); margin-bottom: clamp(18px, 1.4vw, 30px);
}
.sc-back:hover { color: var(--accent); }
.sc-person {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(26px, 3.4vw, 72px); align-items: start;
}
.sc-hero-shot {
  border-radius: clamp(14px, 1vw, 22px); overflow: hidden;
  border: 1px solid var(--edge); background: var(--card);
  aspect-ratio: 3 / 4; max-width: min(100%, clamp(480px, 26vw, 760px));
}
.sc-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
body.sc .sc-thumbs button {
  width: clamp(54px, 4vw, 84px); height: clamp(54px, 4vw, 84px); padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden; background: var(--card);
  border: 1px solid var(--line);
}
body.sc .sc-thumbs button.active { border-color: var(--pick-text); }
body.sc .sc-thumbs button:focus-visible { outline: 2px solid var(--pick-text); outline-offset: 2px; }
.sc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.sc-thumbs button.active img { filter: none; }
.sc-bio {
  color: var(--muted); font-size: clamp(15.5px, .7vw, 21px); line-height: 1.65;
  max-width: 54ch; margin-bottom: clamp(22px, 1.8vw, 38px);
}
.sc-facts {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 1.8vw, 34px) clamp(30px, 2.6vw, 60px);
  margin-bottom: clamp(22px, 1.8vw, 38px); padding: clamp(16px, 1.4vw, 28px) 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.sc-fact b {
  display: block; font-family: 'Unbounded', sans-serif; font-weight: 400; line-height: 1;
  font-size: clamp(1.25rem, 1.5vw, 2.1rem); color: var(--sand); margin-bottom: 6px;
}
.sc-fact span { font-size: clamp(12px, .52vw, 16px); color: var(--faint); }
.sc-tags {
  display: flex; flex-wrap: wrap; gap: clamp(8px, .7vw, 14px);
  margin-bottom: clamp(22px, 1.8vw, 38px);
}
.sc-tag {
  padding: clamp(7px, .5vw, 12px) clamp(15px, 1vw, 24px); border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  font-size: clamp(13px, .55vw, 17px);
}
/* Видео у людей чаще вертикальное (снято на телефон). Ограничиваем ВЫСОТОЙ,
   ширину считает браузер по пропорции — иначе портретный ролик 540x960
   растягивался на всю колонку и превращался в блок высотой 1000+ px. */
.sc-videos {
  display: flex; flex-wrap: wrap; gap: clamp(12px, 1vw, 20px);
  margin-bottom: clamp(22px, 1.8vw, 38px);
}
.sc-video {
  display: block; width: auto; max-width: 100%;
  max-height: min(70vh, clamp(460px, 28vw, 820px));
  /* постер-заглушка (портрет 3:4) и сам ролик (часто 9:16) разных пропорций —
     без contain браузер растягивает картинку */
  object-fit: contain;
  border-radius: clamp(12px, 1vw, 20px); border: 1px solid var(--edge);
  background: var(--card);
}
.sc-decide { display: flex; gap: clamp(10px, .9vw, 18px); flex-wrap: wrap; }
body.sc .sc-decide button { flex: 1 1 190px; }
/* border-color через --accent, а не --mint: мята на светлом фоне сливается,
   и нажатая кнопка переставала отличаться от ненажатой */
body.sc .sc-decide .yes.is-active,
body.sc .sc-decide .yes.is-active:hover {
  background: var(--pick); border-color: var(--pick-text); color: var(--on-pick); font-weight: 600;
}
body.sc .sc-decide .no.is-active,
body.sc .sc-decide .no.is-active:hover {
  background: var(--soft-fill); border-color: var(--soft-line); color: var(--ink); font-weight: 600;
}
.sc-saved { margin-top: 14px; font-size: clamp(13.5px, .58vw, 17px); color: var(--pick-text); }

/* ---------- заказ и подвал (внутри шторки) ---------- */
.sc-order { position: relative; flex: none; padding: clamp(40px, 4vw, 96px) 0; }
.sc-order::before {
  content: ""; position: absolute; top: 0; height: 1px;
  left: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  right: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  background: var(--hair-soft);
}
.sc-order .sc-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(24px, 2.4vw, 48px);
}
.sc-order h2 {
  font-size: clamp(1.6rem, 2.6vw, 3.6rem); letter-spacing: -.015em;
  margin-bottom: clamp(10px, .9vw, 20px); max-width: 18ch;
}
.sc-order p { color: var(--muted); font-size: clamp(15px, .68vw, 20px); max-width: 46ch; }
.sc-order-do { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, .8vw, 16px); }
/* место под бегущую строку резервирует сам подвал — тогда матовая панель
   доходит до низа документа, а не обрывается за 56px до него */
.sc-foot { flex: none; padding: clamp(16px, 1.2vw, 28px) 0 calc(var(--mq-h) + clamp(14px, 1vw, 24px)); }
.sc-foot .sc-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 1.2vw, 26px); flex-wrap: wrap;
  border-top: 1px solid var(--hair-soft); padding-top: clamp(14px, 1.2vw, 26px);
}
.sc-foot img { height: clamp(20px, 1.4vw, 32px); width: auto; }
.sc-foot span, .sc-foot a { font-size: clamp(13px, .55vw, 16px); color: var(--faint); }
.sc-foot a:hover { color: var(--ink); }
.sc-empty {
  margin: clamp(40px, 6vw, 120px) auto; max-width: 620px; text-align: center;
  color: var(--muted); border: 1px solid var(--hair);
  border-radius: clamp(16px, 1.4vw, 26px); padding: clamp(34px, 3vw, 60px) clamp(24px, 2vw, 44px);
  font-size: clamp(15px, .68vw, 20px);
}

/* ---------- бегущая строка ролей ---------- */
.sc-mq {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--mq-h);
  display: flex; align-items: center; overflow: hidden;
  background: var(--mq-veil);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hair-soft);
}
.sc-mq-track { display: flex; flex: none; align-items: center; animation: sc-marq 76s linear infinite; will-change: transform; }
@keyframes sc-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* min-width: 100vw — иначе одна копия строки короче экрана и справа
   в части фаз цикла зияет пустота (замерено до 1125px при 2560) */
.sc-mq-seq { display: flex; flex: none; align-items: center; }
/* размеры и плотность — как в строке на сайте агентства */
.sc-mq-seq span {
  font-family: 'Unbounded', sans-serif; font-weight: 400; line-height: 1;
  font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; padding: 0 26px;
  color: transparent; -webkit-text-stroke: 1px var(--stroke);
}
.sc-mq-seq span.hot { color: var(--accent); -webkit-text-stroke: 0; }

body.sc .client-toast {
  background: var(--toast-bg); color: var(--ink);
  border: 1px solid var(--line);
  /* над бегущей строкой, иначе «Выбор сохранён» наезжает на неё */
  bottom: calc(var(--mq-h) + 18px);
  font-size: clamp(14px, .58vw, 17px);
}

/* дистанция цикла привязана к ширине экрана — на широком замедляем,
   иначе строка начинает бежать заметно быстрее */
@media (min-width: 1700px) { .sc-mq-track { animation-duration: 96s; } }
@media (min-width: 2600px) { .sc-mq-track { animation-duration: 132s; } }

@media (max-width: 900px) {
  .sc-person { grid-template-columns: 1fr; }
  .sc-hero-shot { max-width: 420px; }
  .sc-order .sc-wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
  .sc-nav-links a:not(.sc-btn) { display: none; }
  /* мобильный кадр подставляет <source> в шаблоне — здесь только сетка */
  body.sc { --nav-h: 68px; --mq-h: 48px; }
  .sc-sheet { border-radius: 22px 22px 0 0; }
  .sc-mq-seq span { font-size: 13.5px; padding: 0 18px; }
  .sc-video { max-height: 62vh; }
}
@media (max-width: 720px) {
  /* в шапке — логотип и «На сайт»; заказ остаётся в нижнем блоке */
  .sc-btn-long { display: none; }
  .sc-btn-short { display: inline; }
  body.sc .sc-nav .sc-btn-mint { display: none; }
  /* шапка поверх фотографии — плотнее, иначе логотип теряется в кадре */
  body.sc { --nav-veil: linear-gradient(180deg, rgba(11, 11, 13, .82), rgba(11, 11, 13, .34) 68%, rgba(11, 11, 13, 0)); }
  /* читаемый текст прижимаем к низу кадра и усиливаем затемнение под ним */
  body.sc {
    --scrim: linear-gradient(180deg, rgba(11, 11, 13, .12) 0%, rgba(11, 11, 13, .2) 30%,
                             rgba(11, 11, 13, .72) 74%, rgba(11, 11, 13, .96) 100%);
  }
  /* на телефоне плашки-сводки нет совсем: её числа читаются прямо
     в абзаце первого экрана, плашка только занимала бы экран */
  .sc-stats { display: none; }
  .sc-phone-only { display: inline; }
  .sc-order-do { width: 100%; }
  .sc-order-do .sc-btn { flex: 1 1 auto; justify-content: center; }
  /* строка короче: длинный трек на iOS замирает */
  .sc-mq-seq:nth-child(n+3) { display: none; }
  .sc-mq-seq span { font-size: 13.5px; padding: 0 18px; }
  .sc-mq-track { animation-duration: 26s; }
}
@media (max-width: 560px) {
  /* одна карточка в ширину экрана: портрет крупный, решение принимается
     одним движением большого пальца */
  .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sc-facts { gap: 18px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.sc) { scroll-behavior: auto; }
  .sc-scroll { animation: none; }
  .sc-mq-track { animation: none; }
  .sc-card:hover .sc-shot img { transform: none; }
  .sc-menu, .sc-menu a, .sc-menu button.sc-menu-item { transition-duration: .01ms; }
}

/* ---------- Свои дропдауны (вместо системного списка) ----------
   Нативный <select> остаётся в DOM для отправки формы и как запасной вариант
   без JS; поверх него — кнопка и список с теми же пунктами. */
.dd { position: relative; display: block; }
.dd select.dd-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 40px; padding: 0 36px 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236E6E73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.dd-btn:hover { border-color: var(--ink); }
.dd-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.dd.is-open .dd-btn { border-color: var(--coral); }
.dd-btn .dd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 20, 22, .14);
  animation: dd-in .14s var(--ease);
}
.dd-list[hidden] { display: none; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-opt {
  padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.dd-opt:hover, .dd-opt.is-hover { background: var(--surface-2); }
.dd-opt.is-sel { background: var(--coral-soft); color: var(--coral-text); font-weight: 500; }
.dd-opt.is-sel::after { content: "✓"; margin-left: auto; font-size: 12px; }
.dd-opt.is-dis { color: var(--faint); cursor: default; }
.dd.is-small .dd-btn { min-height: 36px; font-size: 13.5px; padding-left: 10px; }
.dd.is-auto { display: inline-block; min-width: 190px; }

/* ---------- Выбор нескольких людей: поиск + чекбоксы (вместо select multiple) ---------- */
.pick { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); overflow: hidden; }
.pick select.pick-native { display: none; }
.pick-search {
  display: block; width: 100%; height: 40px; padding: 0 14px; margin: 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface-2);
  font: inherit; font-size: 14px;
}
.pick-search:focus { outline: none; background: var(--surface); }
.pick-list { max-height: 300px; overflow-y: auto; padding: 6px; }
.pick-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  font-size: 14px; cursor: pointer; margin: 0;
}
.pick-opt:hover { background: var(--surface-2); }
.pick-opt.is-sel { background: var(--coral-soft); }
.pick-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--coral-deep); flex: none; }
.pick-opt .pick-meta { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.pick-opt[hidden] { display: none; }
.pick-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted);
}
.pick-foot .linklike { font-size: 12.5px; }
.pick.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---------- Гармошки: тело анимируется по высоте (JS), стрелка крутится ---------- */
.tpl-item .tpl-form, .broadcast > *:not(summary) { will-change: height; }

/* ---------- Телефон: кнопки не в кучу, а столбиком/сеткой ---------- */
@media (max-width: 760px) {
  .summary-action form, .summary-action { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .summary-action .btn { width: 100%; justify-content: center; }
  .summary-action .action-hint { flex-basis: auto; text-align: center; }
  .board-head-actions { width: 100%; }
  .board-head-actions .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  /* minmax(0, …): кнопка с длинной подписью не растягивает колонку шире экрана */
  .board-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .board-tools .btn { justify-content: center; min-width: 0; white-space: normal; text-align: center; }
  .person-actions-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .person-actions-bar form { display: contents; }
  .person-actions-bar .btn { width: 100%; justify-content: center; }
  .page-head .btn, .page-head form { width: 100%; }
  .page-head .btn { justify-content: center; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  .tabs::-webkit-scrollbar { display: none; }
  .pos-dialog-foot { flex-wrap: wrap; }
  .pos-dialog-foot .btn { flex: 1 1 auto; justify-content: center; }
  .bc-filters label { flex: 1 1 100%; }
  .reminder-templates .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .dd-list { max-height: 50vh; }
}

/* список «кого позвать» внутри .form: снимаем правила формы для label/input */
.form .pick-opt, .pick-opt { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; font-weight: 400; font-size: 14px; }
.form .pick-opt input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; }
.form .pick-search, .pick-search { height: 40px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; box-shadow: none; }
.form .pick-search:focus { box-shadow: none; border-color: var(--line); }
.pick-opt .pick-meta { margin-left: auto; padding-left: 8px; }
/* телефон: рельса статусов и меню прокручиваются вбок, шапка доски — столбиком */
@media (max-width: 760px) {
  .stage-rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  .stage-rail::-webkit-scrollbar { display: none; }
  .stage-rail .stage { flex: none; }
  .board-head { flex-direction: column; }
}

.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 16px 0; }

/* внутренние заметки: переводы строк из текста сохраняем (списки опыта в заметках) */
.notes-text { white-space: pre-line; overflow-wrap: anywhere; margin: 0; line-height: 1.55; }

/* кабинет исполнителя (/me) живёт в me.css; здесь только общие блоки опыта */
/* опыт работы: номер и акценты вёрсткой, записи разделены, длинный список свёрнут */
.exp-list { list-style: none; margin: 0; padding: 0; }
.exp-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.exp-item:last-child { border-bottom: none; }
.exp-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; margin-top: 1px; }
.exp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-title { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.exp-detail { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.exp-sub { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.exp-list[data-collapsible]:not(.is-open) .is-extra { display: none; }
.exp-more { margin-top: 10px; }
.ov-wide { margin-bottom: 14px; }
.ov-wide .portfolio-strip button { width: 92px; height: 118px; }

/* решения по модерации прямо в списке базы */
table.list td.row-actions { white-space: nowrap; width: 1%; }
.row-actions form { display: block; margin: 0 0 4px; }
.row-actions form:last-child { margin-bottom: 0; }
.row-actions .btn.small { min-height: 32px; width: 100%; justify-content: center; }


/* ============================================================
   Система v2 (редизайн 10.2026): вкладки, панель фильтров, применённые фильтры,
   пустые состояния, уведомления
   ============================================================ */
/* вкладки представлений — линия активного состояния, не заливка */
.view-tabs { gap: 2px; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.view-tabs a {
  position: relative; border-radius: 0; padding: 10px 12px; color: var(--muted); font-size: 14.5px;
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.view-tabs a:hover { background: none; color: var(--ink); }
.view-tabs a.active { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--coral); }
.view-tabs a.active .view-n { background: var(--ink); color: var(--surface); }
.view-tabs a.active.has-issue .view-n { background: var(--danger); color: #fff; }
.view-n { font-size: 11.5px; padding: 1px 7px; }
.tabs a { padding: 10px 12px; margin-bottom: 0; border-bottom: 0; transition: box-shadow var(--dur) var(--ease); }
.tabs a.is-active { box-shadow: inset 0 -2px 0 var(--coral); }

/* панель фильтров: одна строка контролов, без большой подложки */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.filter-bar .search { flex: 1 1 260px; display: flex; min-width: 0; }
.filter-bar .search input[type="search"] {
  width: 100%; height: 40px; margin: 0; padding: 0 12px 0 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface);
  font: 400 14.5px/1.4 'Onest', sans-serif; color: var(--ink);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.filter-bar .search input[type="search"]:focus { outline: none; border-color: var(--coral-text); box-shadow: 0 0 0 3px rgba(242, 107, 69, .3); }
.filter-bar .search input::placeholder { color: var(--faint); }
.filter-bar .btn.is-on { border-color: var(--coral); color: var(--ink); background: var(--coral-soft); }
.filter-bar .btn.is-on .count { background: var(--coral-on-soft); }
.filter-bar .btn .count { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.filter-bar .sort-label select { height: 40px; }
/* выпадающий мультивыбор в панели фильтров */
.menu.filter-menu .menu-panel { min-width: 260px; max-height: min(60vh, 460px); overflow-y: auto; padding: 8px; }
.filter-menu .menu-opts { display: flex; flex-direction: column; gap: 2px; }
.filter-menu .menu-opts label {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 14px; color: var(--ink); cursor: pointer; margin: 0; font-weight: 400;
}
.filter-menu .menu-opts label:hover { background: var(--surface-2); }
.filter-menu .menu-opts input { width: 16px; height: 16px; margin: 0; accent-color: var(--coral-deep); flex: none; }
.filter-menu .menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.filter-menu .menu-search { height: 36px; margin: 0 0 6px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 14px; width: 100%; }
.filter-menu .menu-opts label[hidden] { display: none; }
/* применённые фильтры — снимаются по одному */
.applied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--sp-3); }
.applied .applied-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px;
  border-radius: 999px; background: var(--coral-soft); color: var(--coral-on-soft); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background var(--dur-fast) var(--ease);
}
.applied .applied-chip:hover { background: #FFE0D4; text-decoration: none; }
.applied .applied-chip .ico { opacity: .8; }
.applied .applied-reset { font-size: 13px; color: var(--muted); margin-left: 4px; }
.applied .applied-reset:hover { color: var(--ink); }
.result-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 var(--sp-3); color: var(--muted); font-size: 13.5px; }
.result-line b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* уведомления: ровные радиусы */
.notice, .alert { border-radius: var(--r-card); font-weight: 500; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty p { margin: 0 0 16px; }

/* таблица: имя — главная точка чтения */
table.list td .row-title { font-weight: 500; color: var(--ink); }
table.list td .row-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
table.list td a.row-title:hover { color: var(--coral-text); }
.flag { font-weight: 600; font-size: 13px; }
.flag-ok { color: var(--mint-text); }
.flag-no { color: var(--faint); }
.chip-wait { background: var(--sand-soft); color: var(--sand-text); }
.nav-badge-warn { background: var(--sand-soft); color: var(--sand-text); }
.nav-badge-new { background: var(--mint-soft); color: var(--mint-text); }

/* третичный текстовый блок-подсказка под шапкой */
.page-hint { color: var(--muted); font-size: 13.5px; margin: -12px 0 var(--sp-4); }
.page-hint summary { cursor: pointer; display: inline-block; color: var(--muted); }
.page-hint summary:hover { color: var(--ink); }
.page-hint[open] summary { margin-bottom: 6px; }
.page-hint .inline { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .menu-panel, dialog.pos-dialog[open], .dd-list { animation: none !important; }
}

/* база исполнителей: строка пополнения в подзаголовке, таблица */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-sub .joined-pill { height: 26px; padding: 0 10px; margin: 2px 4px 2px 0; font-size: 12.5px; gap: 5px; vertical-align: middle; }
.page-sub .joined-reset { margin-left: 2px; font-size: 12.5px; }
.staff-table th.center, .staff-table td.center { width: 56px; }
.staff-table td.roles-cell { max-width: 260px; color: var(--muted); }
.staff-table td .row-sub .chip { margin-right: 4px; }
.staff-table tbody tr { height: 56px; }
.staff-table tbody td { padding-top: 10px; padding-bottom: 10px; }
.page-head .toolbar { margin: 0; gap: var(--sp-2); }
@media (max-width: 760px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .toolbar { width: 100%; }
  .page-head .btn-group { width: 100%; }
  .page-head .btn-group .btn { flex: 1 1 50%; }
  .page-head .toolbar > .btn { width: 100%; }
  .filter-bar .btn { flex: 1 1 auto; }
  .filter-bar .search { flex-basis: 100%; }
  h1 { font-size: 24px; }
}
/* summary внутри меню — без стандартных и наших «▸» маркеров */
.menu > summary::before, .page-hint > summary::before { content: none !important; }
.menu > summary { display: inline-flex; }
.page-hint > summary::marker { content: "▸ "; color: var(--faint); }
.page-hint > summary::before { content: "▸ " !important; color: var(--faint); }
.page-hint[open] > summary::before { content: "▾ " !important; }
.page-hint > summary::marker { content: ""; }
/* список мероприятий */
.events-table td.date-cell { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.events-table .progress-cell { gap: 8px; }
.events-table .progress-track { width: 64px; height: 6px; }
.events-table .progress-fill { transition: none; }
.events-table td.client-cell { color: var(--muted); max-width: 240px; overflow-wrap: anywhere; }
.events-table tbody tr { height: 56px; }
.filter-bar .reset-link { font-size: 13.5px; color: var(--muted); padding: 0 6px; }
.filter-bar .reset-link:hover { color: var(--ink); }

/* ---------- Карточка мероприятия v2: шапка, покрытие, состав секциями ---------- */
.board-head { align-items: flex-start; margin-bottom: var(--sp-4); }
.board-head h1 { margin-bottom: 6px; }
.board-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); font-size: 14px; }
.board-facts li { display: inline-flex; align-items: center; gap: 6px; }
.board-facts .ico { color: var(--faint); }
.board-facts .chat-link { font-weight: 500; }
.stage-rail { margin-bottom: var(--sp-4); }
.board-summary { margin-bottom: var(--sp-4); padding: 18px 22px; }
.summary-figures { gap: 28px; padding-bottom: 14px; margin-bottom: 14px; }
.figure-value { font-size: 24px; }
.btn-lg { min-height: 44px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.action-hint { color: var(--muted); }
.coverage { padding: 16px 20px; }
.coverage h2 { font-size: 16px; margin-bottom: 10px; }
.coverage h2 .muted { font-weight: 400; font-size: 13px; }
.cov-scroll { margin: 0; }
.cov-table th:first-child, .cov-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.cov-table tbody th { padding-right: 20px; }
.coverage.is-history .cov-cell.is-gap { background: var(--surface-2); color: var(--muted); }
.board-tools { margin-bottom: var(--sp-5); }
.board-tools .btn { min-height: 36px; font-size: 13.5px; }
.lineup-title { margin: 0 0 10px; font-size: 17px; }
.board.lineup { display: block; }
.pos-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: var(--sp-3); }
.pos-section.pos-closed { opacity: 1; }
.pos-section.pos-closed .pos-head h2 { text-decoration: line-through; color: var(--muted); }
.pos-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pos-head h2 { margin: 0; font-size: 16px; display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.pos-count { font-weight: 500; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pos-count.is-gap { color: var(--danger); }
.pos-rate { margin-left: auto; font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-reqs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pos-reqs .tag { font-size: 12px; padding: 3px 9px; }
.pos-note { font-size: 13px; color: var(--muted); }
.pos-group { padding: 4px 18px 8px; }
.pos-group + .pos-group { border-top: 1px solid var(--line); }
.pos-group h3 { margin: 8px 0 2px; }
.pos-group .pos-empty { margin: 6px 0 8px; color: var(--muted); }
.pos-more details { margin-top: 4px; }
.pos-more details summary { font-size: 13px; }
.pos-section .person.person-row { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; padding: 9px 0; margin: 0; border-radius: 0; gap: 6px 12px; }
.pos-section .person.person-row:hover { background: transparent; }
.pos-section .person + .person { border-top: 1px solid var(--line); }
.pos-section .person-row > .avatar { width: 32px; height: 32px; font-size: 11px; }
.pos-section .person-row .person-name { font-size: 14.5px; }
.pos-section .person-row .person-actions { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-self: center; }
.pos-section .person-row .person-actions > form { display: contents; }
.pos-section .person-row .person-actions .btn { min-height: 32px; padding: 0 10px; white-space: nowrap; font-size: 13px; }
.pos-section .person-row .person-actions .btn.danger { border-color: var(--line-strong); }
.pos-section .person-row .person-info { gap: 2px; }
.pos-section details .person { animation: none; }
@media (max-width: 760px) {
  .pos-section .person.person-row { grid-template-columns: 32px minmax(0, 1fr); }
  .pos-section .person-row .person-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
  .pos-head { padding: 12px 14px; }
  .pos-group { padding: 4px 14px 8px; }
  .pos-rate { margin-left: 0; }
}

/* ---------- Форма мероприятия v2: секции, строки дней и ролей, липкое сохранение ---------- */
.form-page { max-width: 960px; margin: 0 auto; }
.form-page .page-head { margin-bottom: var(--sp-4); }
.form-section { padding: 20px 22px 18px; margin-bottom: var(--sp-3); }
.form-section > h2 { margin: 0 0 12px; }
.form-section .section-hint { margin: -6px 0 14px; font-size: 13.5px; color: var(--muted); }
.form .row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form .row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hint-more { display: inline; margin: 0; }
.hint-more summary { display: inline; cursor: pointer; color: var(--coral-text); list-style: none; }
.hint-more summary::before { content: none; }
.hint-more[open] summary { display: block; margin-top: 4px; }
.period-gen { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: end; margin-bottom: 10px; }
.period-gen label { flex: 1 1 160px; }
.period-gen .btn { margin-bottom: 14px; height: 40px; }
.day-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.day-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.day-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 0 12px; align-items: center; }
.day-row label { margin: 0; font-size: 0; }
.day-row label input { margin-top: 0; font-size: 15px; }
.day-row-act { display: flex; justify-content: flex-end; }
.day-row-act .btn { min-height: 40px; padding: 0 8px; color: var(--muted); }
.day-row-act .btn:hover { color: var(--danger); }
.day-row-act-label { display: none; }
.pos-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pos-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border-radius: var(--r-ctl); }
.pos-card:hover { box-shadow: none; border-color: var(--line-strong); }
.pos-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pos-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; justify-content: flex-start; }
.pos-card-title { font-size: 15px; }
.pos-card-meta { font-size: 13.5px; }
.pos-card-rate { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.pos-card-chips:empty, .pos-card-note:empty { display: none; }
.pos-card-actions { flex: none; margin: 0; align-items: center; }
.form-save {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: var(--sp-4) 0 0; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.form-save .action-hint { flex: 1 1 200px; font-size: 13px; }
.form-page .card.danger-zone, .form-page #sec-showcase { margin-top: var(--sp-5); }
@media (max-width: 760px) {
  .form .row.cols-2, .form .row.cols-3 { grid-template-columns: 1fr; }
  .day-head { display: none; }
  .day-row { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .day-row label:first-of-type { grid-column: 1 / -1; }
  .day-row-act { grid-column: 1 / -1; justify-content: flex-start; }
  .day-row-act-label { display: inline; }
  .pos-card { flex-wrap: wrap; }
  .pos-card-actions { width: 100%; justify-content: flex-end; }
  .form-save { position: static; box-shadow: none; }
  .form-save .btn { flex: 1 1 auto; }
}

/* ---------- Профиль у менеджера v2 ---------- */
.person-head { padding: 18px 22px; margin-bottom: var(--sp-4); }
.person-head-main h1 { font-size: 22px; margin-bottom: 4px; }
.person-head-actions { display: flex; gap: 8px; align-items: flex-start; flex: none; }
.menu-more { width: 40px; padding: 0; }
.person-actions-bar { margin-bottom: var(--sp-4); }
.ov-grid-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); }
.ov-card { padding: 18px 20px; margin-bottom: var(--sp-3); }
.ov-card h2 { font-size: 16px; }
.portfolio-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.portfolio-strip button { width: auto; height: auto; aspect-ratio: 3 / 4; border-radius: 10px; }
.ov-wide .portfolio-strip button { width: auto; height: auto; }
.bind-actions { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bind-actions .bind-link { margin: 6px 0 0; }
.kv dd .chip { vertical-align: middle; }
.hist-row { padding: 10px 0; }
@media (max-width: 760px) {
  .person-head-actions { width: 100%; }
  .person-head-actions .btn:first-child { flex: 1; }
  .portfolio-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .ov-grid-wide { grid-template-columns: 1fr; } }

/* правки по ревью доступности и адаптива */
.rate-comment { height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: 400 14px/1.3 'Onest', sans-serif; width: 100%; background: var(--surface); }
.rate-comment:focus { outline: none; box-shadow: var(--focus); }
.filter-bar > .menu { display: flex; }
.filter-bar > .menu > summary { flex: 1 1 auto; justify-content: center; }
.filter-menu .menu-search { position: sticky; top: -8px; z-index: 1; background: var(--surface); }
.filter-menu .menu-foot { position: sticky; bottom: -8px; background: var(--surface); }
.staff-table .row-sub { white-space: normal; }
.staff-table td .row-title, table.list td .row-title { overflow-wrap: anywhere; }
.staff-table th.center, .staff-table td.center { width: auto; }
table.list tr:last-child td:first-child { border-bottom-left-radius: var(--r-card); }
table.list tr:last-child td:last-child { border-bottom-right-radius: var(--r-card); }
.form-page .card > h2:first-child { margin-top: 0; }
@media (pointer: coarse) { .pos-section .person-row .person-actions .btn { min-height: 40px; } }
@media (max-width: 760px) {
  .filter-bar { position: relative; }
  .filter-bar > .menu { position: static; flex: 1 1 auto; }
  .filter-bar .menu-panel { left: 0; right: 0; top: 100%; min-width: 0; }
  .page-head .btn-group .btn { white-space: normal; min-width: 0; }
}
/* ---------- витрина: опыт работы кандидата ---------- */
body.sc .sc-exp { list-style: none; margin: 0 0 clamp(22px, 1.8vw, 38px); padding: 0; counter-reset: exp; max-width: 60ch; }
body.sc .sc-exp li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; padding: clamp(8px, .6vw, 12px) 0; border-top: 1px solid var(--hair); font-size: clamp(14px, .62vw, 18px); line-height: 1.45; }
body.sc .sc-exp li::before { counter-increment: exp; content: counter(exp); grid-row: 1 / span 3; font-family: 'Unbounded', sans-serif; font-size: 12px; color: var(--faint); padding-top: 3px; }
body.sc .sc-exp li b { font-weight: 600; color: var(--sand, inherit); overflow-wrap: anywhere; }
body.sc .sc-exp li span { grid-column: 2; display: block; color: var(--muted); font-size: .92em; overflow-wrap: anywhere; }
body.sc .sc-exp-more, body.sc .sc-exp .sc-exp-rest { color: var(--faint); font-size: 13.5px; margin: -10px 0 clamp(22px, 1.8vw, 38px); display: block; grid-template-columns: 1fr; }
body.sc .sc-exp .sc-exp-rest::before { content: none; }
body.sc .sc-exp.sc-exp-short { margin-bottom: 14px; }
body.sc .sc-exp.sc-exp-short li { font-size: 14px; padding: 6px 0; }

/* ---------- витрина: код доступа ---------- */
body.sc.sc-unlock { min-height: 100vh; }
.sc-unlock-wrap { position: relative; z-index: 2; display: flex; justify-content: center; padding: clamp(40px, 10vh, 120px) 16px 60px; }
.sc-unlock-card { width: min(100%, 460px); padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: rgba(12, 12, 14, .78); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(14px); color: #fff; }
.sc-unlock-card h1 { font: 500 clamp(24px, 2.4vw, 34px)/1.15 'Unbounded', sans-serif; margin: 6px 0 8px; letter-spacing: -.01em; color: #fff; }
.sc-unlock-card .sc-line { color: rgba(255, 255, 255, .72); margin: 0 0 18px; }
.sc-unlock-text { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.sc-unlock-label { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 8px; }
.sc-unlock-input { display: block; width: 100%; height: 56px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; font: 600 24px/1 'Onest', sans-serif; letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.sc-unlock-input:focus { outline: none; border-color: #B6F2A3; box-shadow: 0 0 0 3px rgba(182, 242, 163, .3); }
.sc-unlock-input:disabled { opacity: .5; }
.sc-unlock-hint, .sc-unlock-error { font-size: 13px; margin: 8px 0 16px; color: rgba(255, 255, 255, .6); }
.sc-unlock-error { color: #FFB4A6; }
.sc-unlock-btn { width: 100%; justify-content: center; height: 52px; font-size: 16px; }
.sc-unlock-btn:disabled { opacity: .5; cursor: default; }
.sc-unlock-foot { margin: 18px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
/* окно подборки: ссылка и код */
.share-box { border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); padding: 6px 12px; margin: 8px 0 10px; }
.share-row { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; }
.share-row + .share-row { border-top: 1px solid var(--line); }
.share-label { flex: 0 0 96px; font-size: 12.5px; color: var(--muted); }
.share-value { font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; min-width: 0; }
.share-code { font-size: 18px; font-weight: 600; letter-spacing: .2em; color: var(--ink); }

/* ---------- «Требует внимания» группами ---------- */
.summary-attention ul { margin: 0; padding: 0; list-style: none; }
.att-group { margin-top: 12px; }
.att-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 12px/1.3 'Onest', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.att-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font-size: 11.5px; letter-spacing: 0; }
.att-list { display: flex; flex-direction: column; gap: 6px; }
.att-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 1.45; }
.att-text { overflow-wrap: anywhere; }
.att-names-inline { color: var(--muted); }
.att-names { margin: 0; flex-basis: 100%; }
.att-names summary { display: inline; font-size: 13px; color: var(--coral-text); cursor: pointer; list-style: none; padding: 0; }
.att-names summary::before { content: none; }
.att-names summary::-webkit-details-marker { display: none; }
.att-names ul { margin: 6px 0 2px; padding: 0 0 0 14px; list-style: disc; columns: 2; column-gap: 24px; font-size: 13.5px; color: var(--muted); }
.att-names li { break-inside: avoid; padding: 1px 0; }
.att-act { background: none; border: 0; padding: 0; font: 500 13.5px/1.3 'Onest', sans-serif; color: var(--coral-text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.att-act:hover { text-decoration: underline; }
.att-act:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.att-item .inline { display: inline; }
@media (max-width: 640px) { .att-names ul { columns: 1; } }

/* ---------- диалог оценок: секция на человека ---------- */
#dlg-ratings { width: min(760px, calc(100vw - 32px)); }
.rate-rows { gap: 0; }
.rate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who stars" "comment comment" "send send"; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.rate-row:last-child { border-bottom: none; }
.rate-row .rate-who { grid-area: who; }
.rate-row .rate-stars { grid-area: stars; margin: 0; padding: 0; border: 0; min-width: 0; }
.rate-row .rate-comment-wrap { grid-area: comment; display: block; margin: 0; }
.rate-comment-label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.rate-row .rate-comment { height: 40px; }
.rate-row > .btn { grid-area: send; justify-self: start; min-height: 36px; }
.rate-row .btn.is-loading { min-width: 96px; }
.star-opt span { width: 36px; height: 36px; }
@media (min-width: 761px) {
  .rate-row { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr) auto; grid-template-areas: "who stars comment send"; align-items: end; }
  .rate-row .rate-who { align-self: center; }
  .rate-row .rate-stars { align-self: center; }
  .rate-row > .btn { justify-self: end; margin-bottom: 2px; }
}
@media (max-width: 760px) {
  .rate-row { grid-template-columns: 1fr; grid-template-areas: "who" "stars" "comment" "send"; }
  .rate-row > .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Витрина для клиента v2: компактное вступление, карточки с подписями,
   раскрытие на всю строку, сводка решений, без бегущей строки
   ============================================================ */
body.sc { --mq-h: 0px; }
body.sc .sc-hero, body.sc .sc-hero.slim { min-height: 0; justify-content: flex-start; padding: calc(var(--nav-h) + clamp(22px, 3vh, 40px)) 0 clamp(26px, 3vh, 44px); }
.sc-hero h1 { font-size: clamp(1.8rem, 3.2vw, 3.6rem); margin-bottom: 10px; }
body.sc .sc-hero .kicker { margin-bottom: 10px; }
body.sc .sc-hero .sub { font-size: clamp(14.5px, .6vw, 18px); max-width: 64ch; }
body.sc .sc-hero .sc-line { margin-bottom: 12px; }
body.sc #sostav { scroll-margin-top: var(--nav-h); }
/* сводка решений: липкая полоса над списком */
.sc-sum { position: sticky; top: var(--nav-h); z-index: 5; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hair); margin-top: calc(-1 * clamp(34px, 3.4vw, 76px)); margin-bottom: clamp(22px, 2.4vw, 44px); }
.sc-sum-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 12px 0; font-size: clamp(13.5px, .58vw, 16px); color: var(--muted); }
.sc-sum-item b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-sum-item.ok b { color: var(--pick-text); }
.sc-sum-note { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.sc-role-head { margin-bottom: clamp(14px, 1.4vw, 26px); }
.sc-role-head h2 { font-size: clamp(1.3rem, 1.8vw, 2.2rem); }
/* сетка: три колонки на широком, две на планшете, одна на телефоне */
.sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); }
@media (max-width: 1099px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
/* карточка: фото в цвете, информационная зона под ним */
.sc-card { grid-template-rows: auto auto; box-shadow: none; border-radius: 18px; scroll-margin-top: calc(var(--nav-h) + 60px); }
.sc-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.sc-face-img, .sc-card:hover .sc-face-img, .sc-card.is-open .sc-face-img { filter: none; transform: none; }
.sc-face::after { background: linear-gradient(to top, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 35%); }
.sc-card.is-disliked .sc-face-img { opacity: 1; }
.sc-card.is-disliked { border-color: rgba(255, 255, 255, .22); }
.sc-card.is-liked { border-color: var(--pick-edge); box-shadow: 0 0 0 1px var(--pick-glow); }
.sc-state { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sc-state:empty { display: none; }
.sc-card.is-liked .sc-state { background: var(--pick); color: var(--on-pick); }
.sc-info { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid var(--hair); background: var(--card); }
.sc-info-main { min-width: 0; }
.sc-name { display: block; font-size: clamp(1.05rem, .9vw, 1.3rem); font-weight: 500; color: var(--ink); line-height: 1.2; }
.sc-meta { display: block; margin-top: 4px; color: var(--muted); font-size: clamp(12.5px, .55vw, 14.5px); line-height: 1.4; overflow-wrap: anywhere; }
/* имя и «Подробнее» в одной строке, решения — отдельной: три кнопки в ряд
   не умещаются на 1280 px и телефоне */
.sc-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.sc .sc-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--edge-strong); background: transparent; color: var(--ink); font: 500 14px/1 'Onest', sans-serif; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
body.sc .sc-act svg { width: 16px; height: 16px; flex: none; }
body.sc .sc-act:hover { border-color: var(--accent); color: var(--accent); }
body.sc .sc-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.sc .sc-act.yes.is-on { background: var(--pick); border-color: var(--pick); color: var(--on-pick); font-weight: 600; }
body.sc .sc-act.no.is-on { background: var(--soft-fill); border-color: var(--soft-line); color: var(--ink); font-weight: 600; }
body.sc .sc-act.more { flex: none; min-height: 32px; margin: -5px -8px 0 0; padding: 0 8px; border-color: transparent; color: var(--muted); font-size: 13.5px; }
body.sc .sc-act.more:hover { color: var(--accent); }
.sc-card.is-busy .sc-act[data-decide] { opacity: .6; pointer-events: none; }
/* раскрытая карточка: вся строка сетки, фото слева, подробности справа */
.sc-card.is-open { grid-column: 1 / -1; width: auto; height: auto; justify-self: stretch; grid-template-columns: minmax(240px, 32%) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "face panel" "info panel"; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.sc-card.is-open .sc-face { grid-area: face; aspect-ratio: 3 / 4; height: auto; width: auto; }
.sc-card.is-open .sc-info { grid-area: info; border-top: 1px solid var(--hair); }
.sc-card.is-open .sc-open { grid-area: panel; border-left: 1px solid var(--hair); overflow: visible; }
.sc-card.is-open .sc-open-in { height: auto; overflow: visible; padding: clamp(16px, 1.4vw, 26px); gap: 12px; }
.sc-open-in .sc-bio { font-size: clamp(14px, .6vw, 16px); line-height: 1.55; -webkit-line-clamp: 6; }
.sc-open-in .sc-facts { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 12px 18px; padding: 12px 0; }
.sc-open-in .sc-fact b { font-size: clamp(1rem, .95vw, 1.3rem); }
.sc-open-in .sc-fact span { font-size: 11px; }
.sc-open-in .sc-tags { max-height: none; }
.sc-open-in .sc-thumbs { flex-wrap: wrap; overflow: visible; }
body.sc .sc-open-in .sc-thumbs button { width: 56px; height: 56px; }
.sc-open-in .sc-exp.sc-exp-short { margin: 0 0 4px; }
.sc-open-in .sc-exp.sc-exp-short li { padding: 6px 0; }
body.sc .sc-exp-more { display: inline-block; color: var(--pick-text); font-size: 13.5px; margin: 0 0 6px; }
.sc-open-in .sc-open-do { margin-top: 6px; }
@media (max-width: 640px) {
  .sc-card.is-open { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "face" "info" "panel"; }
  .sc-card.is-open .sc-open { border-left: 0; border-top: 1px solid var(--hair); }
  .sc-sum-note { display: none; }
  .sc-sum-in { gap: 6px 14px; font-size: 13px; }
  /* на телефоне две кнопки решения делят ширину карточки */
  body.sc .sc-act.yes, body.sc .sc-act.no { flex: 1 1 0; }
}
/* шапка над фото — полупрозрачная вуаль; после прокрутки под неё уходит
   контент, и вуаль становится матовой полосой (класс ставит client.js) */
body.sc.is-scrolled:not(.menu-open) .sc-nav { background: var(--glass, rgba(7, 7, 9, .78)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
@media (prefers-reduced-motion: reduce) { body.sc.is-scrolled .sc-nav { backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* номера кадров и маркер видео на миниатюрах */
body.sc .sc-thumbs button { position: relative; }
.sc-thumb-n { position: absolute; left: 4px; bottom: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font: 600 10.5px/18px 'Onest', sans-serif; font-style: normal; text-align: center; pointer-events: none; }
/* страница анкеты: большое фото с листанием и полноразмерным просмотром */
.sc-hero-shot { position: relative; }
body.sc .sc-hero-shot-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
body.sc .sc-hero-shot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.sc-gal-nav { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
body.sc .sc-gal-btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .45); color: #fff; font-size: 28px; line-height: 1; padding: 0 0 3px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.sc .sc-gal-btn:hover { background: rgba(0, 0, 0, .7); }
body.sc .sc-gal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sc-gal-count { padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
body.sc .sc-person { align-items: start; }
.sc-foot { padding-bottom: clamp(16px, 1.2vw, 28px); }
@media (prefers-reduced-motion: reduce) { .sc-sum { backdrop-filter: none; } }

/* база: дата и источник одной строкой, имя не теснится */
.staff-table td.date-cell { white-space: nowrap; }
.staff-table td.date-cell .src-sub { white-space: nowrap; }
.staff-table th:first-child { min-width: 200px; }
/* профиль: «О себе» свёрнуто до шести строк */
.bio-clamp:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ov-card .exp-more { margin-top: 8px; }
.portfolio-strip .tile-n { position: absolute; left: 6px; bottom: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 11px/20px 'Onest', sans-serif; font-style: normal; text-align: center; pointer-events: none; }
.portfolio-strip .tile-main { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 6px; background: var(--coral); color: var(--ink); font: 600 10.5px/1.3 'Onest', sans-serif; font-style: normal; pointer-events: none; }

/* ============================================================
   Окна доски v2: общий каркас, «Клиентская подборка», «Координаторы»,
   «Написать сегменту», дропдауны с поиском
   ============================================================ */
/* каркас: шапка окна не уезжает, скроллится только содержимое; фон страницы
   за открытым окном не прокручивается, ширина разметки при этом не прыгает */
html { scrollbar-gutter: stable; }
body:has(dialog.pos-dialog[open]) { overflow: hidden; }
.pos-dialog-body > h2 {
  position: sticky; top: -24px; z-index: 2;
  margin: -24px -26px 16px; padding: 22px 64px 14px 26px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
dialog.pos-dialog[open]::backdrop { animation: backdrop-in var(--dur-slow) var(--ease); }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  dialog.pos-dialog[open], dialog.pos-dialog[open]::backdrop { animation: none; }
}
/* размеры по задаче: управляющая подборка — широкая, формы — обычные */
#dlg-catalog { width: min(1120px, calc(100vw - 32px)); }
#dlg-coordinators { width: min(760px, calc(100vw - 32px)); }
#dlg-broadcast { width: min(720px, calc(100vw - 32px)); }

/* --- строка поиска по списку внутри окна --- */
.list-search {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--muted);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.list-search:focus-within { border-color: var(--coral); box-shadow: var(--focus); }
.list-search input {
  border: 0; outline: none; background: transparent; min-width: 170px; height: auto; min-height: 0;
  margin: 0; padding: 0; font: 400 13.5px/1.2 'Onest', sans-serif; color: var(--ink);
}

/* --- «Клиентская подборка» --- */
.cat-summary { margin: 0 0 12px; }
.cat-summary .cat-last { flex-basis: 100%; font-size: 12.5px; }
.cat-share { margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cat-share-box { margin: 0; }
.cat-share-do { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.cat-reissue { margin-left: auto; color: var(--muted); }
.cat-share-note { margin: 10px 0 0; }
.cat-share-new { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cat-share-new p { margin: 0; flex: 1 1 320px; }
.cat-how { margin: 8px 0 14px; }
.cat-how-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.cat-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.cat-tab {
  appearance: none; border: 0; background: none; padding: 8px 10px; border-radius: var(--r-ctl);
  color: var(--muted); font: 500 13.5px/1.2 'Onest', sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-tab:hover { color: var(--ink); background: var(--surface-2); }
.cat-tab:focus-visible { outline: none; box-shadow: var(--focus); }
.cat-tab.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--coral); border-radius: var(--r-ctl) var(--r-ctl) 0 0; }
.cat-tab.is-active .view-n { background: var(--ink); color: var(--surface); }
.cat-rows { display: block; margin-bottom: 16px; }
.cat-row {
  display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(130px, .9fr) minmax(80px, .5fr) minmax(0, auto);
  align-items: center; gap: 10px 14px; padding: 10px 6px; min-height: 64px;
  border-bottom: 1px solid var(--line);
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cat-row:hover { background: var(--surface-2); }
.cat-row[hidden] { display: none; }
.cat-row-head { min-height: 0; padding: 4px 6px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.cat-row-head:hover { background: none; }
.cat-row-head .cat-col-do { text-align: right; }
.cat-row.is-reserve { opacity: .72; }
.cat-row.is-off-client .cat-who-text a { color: var(--muted); }
.cat-row.is-busy { opacity: .55; pointer-events: none; }
.cat-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat-who-text { min-width: 0; }
.cat-who-text a { font-weight: 500; color: var(--ink); display: block; line-height: 1.25; overflow-wrap: anywhere; }
.cat-who-text a:hover { color: var(--coral-text); }
.cat-decision { display: flex; flex-wrap: wrap; gap: 4px; }
.cat-place { font-size: 13px; color: var(--muted); }
.cat-do { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.cat-do form.inline { display: contents; }
.cat-toggles { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--line); }
.cat-toggles form.inline { display: contents; }
.cat-tgl { color: var(--muted); }
.cat-tgl.is-off { color: var(--ink); }
.cat-tgl.is-star { background: var(--coral-soft); border-color: transparent; color: var(--coral-on-soft); font-weight: 600; }
.cat-empty { padding: 14px 6px; }
.chip-ghost { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }
@media (max-width: 900px) {
  .cat-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who decision" "place place" "do do"; }
  .cat-who { grid-area: who; }
  .cat-decision { grid-area: decision; justify-content: flex-end; }
  .cat-place { grid-area: place; }
  .cat-do { grid-area: do; justify-content: flex-start; }
  .cat-row-head { display: none; }
  .cat-toggles { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* --- «Координаторы на площадке» --- */
.co-section { margin-top: 18px; }
.co-section:first-of-type { margin-top: 4px; }
.co-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
dialog.pos-dialog h3.co-h, dialog.pos-dialog h3.sg-h {
  margin: 0 0 6px; padding: 0; border: 0; font-size: 14px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.co-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 6px; border-bottom: 1px solid var(--line);
}
.co-row:last-of-type { border-bottom: 0; }
.co-row[hidden] { display: none; }
.co-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-main a { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.co-main a:hover { color: var(--coral-text); }
.co-sub { font-size: 12.5px; color: var(--muted); }
.co-notg { color: var(--coral-on-soft); }
.co-empty { padding: 8px 6px; margin: 0; }
.co-manual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.co-manual label { margin: 0; }
.co-manual .btn { height: 40px; }
@media (max-width: 560px) {
  .co-manual { grid-template-columns: 1fr; }
  .co-manual .btn { width: 100%; justify-content: center; }
}

/* --- «Написать сегменту» --- */
.sg-step { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.sg-step:first-of-type { border-top: 0; padding-top: 0; }
dialog.pos-dialog h3.sg-h { color: var(--ink); margin-bottom: 8px; }
.sg-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; }
.sg-reach { margin: 6px 0 0; min-height: 1.2em; }
.sg-meta { margin: 6px 0 0; }
.sg-form textarea { min-height: 150px; resize: vertical; }
.sg-deadline { transition: opacity var(--dur-fast) var(--ease); }
.sg-deadline.is-na { opacity: .55; }
.sg-foot { align-items: center; }
.sg-target { margin-right: auto; }
.sg-target b { color: var(--ink); font-weight: 500; }
.sg-history { margin: 14px 0 10px; }

/* --- дропдаун: панель со строкой поиска для длинных списков --- */
.dd-panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 20, 22, .14); overflow: hidden;
  animation: dd-in .14s var(--ease);
}
.dd-panel[hidden] { display: none; }
.dd-list { position: static; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.dd-search {
  display: block; width: 100%; box-sizing: border-box; height: auto; min-height: 0; margin: 0;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--surface-2); font: 400 13.5px/1.2 'Onest', sans-serif; color: var(--ink); outline: none;
}
.dd-search:focus { box-shadow: inset 0 -2px 0 var(--coral); }
.dd-none { padding: 10px 12px; color: var(--faint); font-size: 13px; list-style: none; }

/* телефон: окно — полноширинная шторка снизу с учётом безопасной области */
@media (max-width: 720px) {
  dialog.pos-dialog, #dlg-catalog, #dlg-coordinators, #dlg-broadcast {
    width: 100vw; max-width: 100vw; max-height: calc(100dvh - 20px);
    margin: auto 0 0; border-radius: 18px 18px 0 0;
  }
  .pos-dialog-body { max-height: calc(100dvh - 20px); border-radius: 18px 18px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .pos-dialog-body > h2 { top: -20px; margin: -20px -16px 14px; padding: 18px 56px 12px 16px; }
  .pos-dialog-body > .pos-dialog-foot, .pos-dialog-body form > .pos-dialog-foot {
    bottom: calc(-16px - env(safe-area-inset-bottom)); margin-bottom: calc(-16px - env(safe-area-inset-bottom));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .sg-target { flex-basis: 100%; margin: 0 0 4px; }
  .cat-share-do .btn { flex: 1 1 auto; justify-content: center; }
  .cat-reissue { margin-left: 0; flex-basis: 100%; }
}