/* 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;

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

  --r-card: 16px;
  --r-ctl: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 1px 2px rgba(20, 20, 22, .04), 0 8px 24px rgba(20, 20, 22, .05);
  --shadow-pop: 0 2px 6px rgba(20, 20, 22, .08), 0 16px 40px rgba(20, 20, 22, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 '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: 20;
}
.topbar-inner {
  /* Шире контентной колонки: разделам нужно больше места, чем тексту страницы */
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.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 {
  display: flex; gap: 6px; flex: 1 1 auto;
  overflow-x: auto; scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-ctl);
  white-space: nowrap;              /* бейдж и подпись не рвутся на строки */
  transition: color .2s var(--ease), background .2s var(--ease);
}
.topbar nav a:hover { color: var(--ink); background: var(--surface-2); }
.topbar nav a.active { color: var(--ink); background: var(--coral-soft); }
.topbar .user {
  color: var(--muted); font-size: 14px;
  display: flex; gap: 12px; align-items: center;
  flex: none; white-space: nowrap;
}
.topbar .user > span { display: inline-flex; align-items: center; gap: 6px; }
.logout-form { display: inline; }
.linklike {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--coral-text); cursor: pointer; text-decoration: none;
}
.linklike:hover { text-decoration: underline; }

main { max-width: 1160px; margin: 32px auto 64px; padding: 0 20px; }

/* ---------- Типографика ---------- */
h1 {
  font: 500 22px/1.3 'Unbounded', sans-serif;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
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-start;
  gap: 16px;
  margin-bottom: 24px;
}

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

.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: 6px;
  padding: 9px 16px;
  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: transform .15s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.primary {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(255, 133, 98, .35);
}
.btn.primary:hover { background: var(--coral-deep); border-color: var(--coral-deep); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.btn.small { padding: 5px 10px; font-size: 13px; border-radius: 10px; }
.btn:focus-visible,
a:focus-visible,
.linklike:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 133, 98, .45);
}

.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);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
table.list th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom-color: var(--line-strong);
}
table.list tbody tr { transition: background .15s 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 { opacity: .45; }
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-block;
  padding: 5px 12px;
  border-radius: 999px;
  font: 500 12.5px/1.2 'Onest', sans-serif;
  background: #ECECEA;
  color: var(--muted);
  white-space: nowrap;
}
.chip-collecting { background: var(--coral-soft); color: var(--coral-text); }
.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: 42px;
  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);
  box-shadow: 0 0 0 3px rgba(255, 133, 98, .22);
}
.form ::placeholder { color: var(--faint); }

/* Селекты: свой шеврон, одна высота с инпутами */
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: 42px; 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: 0 0 0 3px rgba(255, 133, 98, .45); }
.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: 42px; }
.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: all .2s 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: all .2s 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: 2px solid var(--coral); outline-offset: 2px; }
.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: 42px; 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-text);
  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: 2px solid var(--coral); outline-offset: 2px; }

.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: all .18s ease; }
.swipe-card.fly-nope { transform: translateX(-60%) rotate(-8deg); opacity: 0; transition: all .18s 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 {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; flex: none;
  border-radius: 999px; background: var(--coral-text); color: #fff;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* входящие */
.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: #fff; 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(--faint); 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: 130px; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--line-strong); border-radius: 8px;
}

/* пустые состояния */
.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-text);
  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); }

/* ---------- Плавность интерфейса ---------- */
main > * { animation: rise .3s var(--ease) both; }
main > *:nth-child(2) { animation-delay: .04s; }
main > *:nth-child(3) { animation-delay: .08s; }
main > *:nth-child(4) { animation-delay: .12s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.chip, .tag { transition: transform .18s var(--ease); }
table.list tbody tr:hover .chip { transform: scale(1.04); }
details .person, details .doc-list { animation: rise .25s var(--ease) both; }

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

@media (max-width: 760px) {
  .person.person-row { padding: 10px; }
  .topbar-inner { padding: 12px 16px; gap: 14px; flex-wrap: wrap; }
  .topbar nav { order: 3; flex-basis: 100%; }
  main { margin-top: 20px; padding: 0 14px; }
  .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 у шапки. */

/* Мобильная шапка: меню в собственной прокрутке, без растяжения страницы */
/* Тесно, но меню ещё помещается — убираем наименее важное: чип роли */
@media (max-width: 1220px) {
  .topbar-inner { gap: 16px; }
  /* Своя роль пользователю известна — жертвуем чипом, чтобы разделы влезли */
  .topbar .role-chip { display: none; }
}
/* Меню больше не помещается в строку — отдаём ему отдельную строку целиком */
@media (max-width: 1060px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 4px; height: auto; padding: 10px 14px; }
  .topbar nav { order: 3; width: 100%; flex-basis: 100%; }
  .topbar .user { margin-left: auto; }
}

/* Диалоги: постоянная кнопка закрытия и липкая панель действий */
.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(--faint); 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(--faint); 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(--faint); 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: all .18s 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(--faint); 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: 42px; 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(--faint); }

.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-wait { background: var(--lav-soft); color: var(--lav-text); }
.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: 2px solid var(--coral); outline-offset: 2px; }
.portfolio-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-video { width: 100%; max-width: 360px; border-radius: 12px; margin-top: 10px; display: block; background: #000; }
.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 { display: block; max-width: 100%; max-height: 86vh; object-fit: contain; }
dialog.lightbox .lightbox-x { position: absolute; top: 10px; right: 10px; }

.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(--faint); }
.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(--faint); 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: all .18s 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-text); font-weight: 600; }
.nav-badge-new { background: var(--mint-soft); color: var(--mint-text); }
.faint-text { color: var(--faint); }

@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: #fff; }
.star-opt input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.rate-comment { height: 36px; margin: 0; }
.chip-star { background: var(--coral-soft); color: var(--coral-text); 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); }
.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.is-light img { filter: brightness(1.16) saturate(.9); }
.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.is-light img { filter: brightness(1.16) saturate(.9); }
.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);
  --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;
}
/* ---- светлая тема ----
   Ставится в админке под конкретное мероприятие (обычно под светлый брендбук
   клиента). Мята остаётся заливкой кнопок, но мятный ТЕКСТ на светлом фоне
   нечитаем, поэтому --accent становится тёмно-зелёным; песок и лаванда тоже
   темнеют до контрастных. */
body.sc[data-theme="light"] {
  --bg: #F4F4F2;
  --ink: #141416;
  --muted: rgba(20, 20, 22, .72);
  --faint: rgba(20, 20, 22, .66);
  --mint-hover: #A2EF9B;
  --accent: #1C6E36;
  --sand: #8A6034;
  --lav: #4B3BC7;
  --hair: rgba(20, 20, 22, .14);
  --hair-soft: rgba(20, 20, 22, .1);
  --line: rgba(20, 20, 22, .26);
  --line-strong: rgba(20, 20, 22, .48);
  --edge: rgba(20, 20, 22, .16);
  --edge-strong: rgba(20, 20, 22, .32);
  --card: #E4E4E0;
  --glass: rgba(250, 250, 248, .82);
  --glass-soft: rgba(250, 250, 248, .62);
  --halo: rgba(250, 250, 248, .72);
  --hero-edge: rgba(20, 20, 22, .5);
  --hero-text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
  --hero-btn-shadow: 0 6px 28px rgba(20, 20, 22, .18);
  --menu-bg: rgba(250, 250, 248, .95);
  --toast-bg: rgba(252, 252, 250, .96);
  --handle: rgba(20, 20, 22, .4);
  --stroke: rgba(20, 20, 22, .62);
  --soft-fill: rgba(20, 20, 22, .18);
  --soft-line: rgba(20, 20, 22, .44);
  --sel-edge: rgba(38, 120, 60, .7);
  --sel-glow: rgba(38, 120, 60, .18);
  --sheet-top: rgba(20, 20, 22, .46);   /* в светлой теме кромка тёмная: белая по белому не видна */
  --sheet-shadow: rgba(0, 0, 0, .16);
  --nav-veil: linear-gradient(180deg, rgba(244, 244, 242, .72), rgba(244, 244, 242, 0));
  --mq-veil: linear-gradient(0deg, rgba(248, 248, 246, .88), rgba(248, 248, 246, .58));
  --scrim:
    linear-gradient(180deg, rgba(244, 244, 242, .24) 0%, rgba(244, 244, 242, .34) 26%,
                            rgba(244, 244, 242, .7) 66%, rgba(244, 244, 242, .92) 100%);
}

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() перекрасил бы её в розовую. */
body.sc .sc-logo-on-light { display: none; }
body.sc[data-theme="light"] .sc-logo-on-dark { display: none; }
body.sc[data-theme="light"] .sc-logo-on-light { display: block; }
.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(--accent); }
/* ---------- сводка подборки: стеклянная плашка с кольцом прогресса ---------- */
.sc-stats-list { 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(--accent); }
.sc-ring {
  flex: none; width: clamp(38px, 2.8vw, 60px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--mint) 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(--sel-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(--mint); border-color: var(--mint); color: var(--on-mint);
  box-shadow: 0 0 0 4px var(--sel-glow);
}
body.sc .sc-round.no.is-on { background: #F4F4F2; border-color: #F4F4F2; color: #141416; }
.sc-card.is-liked { border-color: var(--sel-edge); box-shadow: 0 0 0 1px var(--sel-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-wrap: nowrap; overflow: hidden; }
/* на узком экране карточка ниже — галерею убираем, она есть на странице анкеты */
@media (max-width: 1150px) { .sc-open-in .sc-thumbs { display: none; } }
.sc-open-in .sc-thumbs button { width: clamp(34px, 2.1vw, 46px); height: clamp(34px, 2.1vw, 46px); 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);
}
body.sc .sc-video-btn { display: inline-flex; align-items: center; gap: 9px; }
.sc-video-btn .sc-ico { width: 15px; height: 15px; }

/* ---- видео-визитка в модальном окне ---- */
.sc-video-modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(92vw, 760px); width: 100%; color: var(--ink);
}
.sc-video-modal::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.sc-video-box {
  position: relative; border-radius: clamp(14px, 1vw, 22px); overflow: hidden;
  border: 1px solid var(--hair); background: var(--card);
  padding: clamp(12px, 1vw, 20px); display: grid; gap: 12px;
}
/* коробка держит размер, ролик вписывается в неё как есть: вертикальные
   визитки не растягиваются, а горизонтальные не прыгают после «плей» */
.sc-video-slot { display: grid; gap: 12px; place-items: center; min-height: min(52vh, 420px); }
.sc-video-box video {
  width: auto; max-width: 100%; max-height: min(72vh, 560px);
  border-radius: 12px; display: block; background: #000;
}
body.sc .sc-video-x {
  position: absolute; top: 12px; right: 12px; z-index: 2; cursor: pointer;
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  backdrop-filter: blur(8px); font-size: 16px;
}
body.sc .sc-video-x:hover { background: rgba(0, 0, 0, .72); }

/* на узком экране вбок расти некуда — раскрываем вниз.
   Колонкой, а не гридом: с двумя авто-строками браузер делил высоту портрета
   пополам и панель обрезалась. */
@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; }
  .sc-open-in .sc-thumbs button { width: 52px; height: 52px; }
  .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(--accent); }
body.sc .sc-thumbs button:focus-visible { outline: 2px solid var(--accent); 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(--mint); border-color: var(--accent); color: var(--on-mint); 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(--accent); }

/* ---------- заказ и подвал (внутри шторки) ---------- */
.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[data-theme="light"] { --nav-veil: linear-gradient(180deg, rgba(244, 244, 242, .9), rgba(244, 244, 242, .4) 68%, rgba(244, 244, 242, 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%);
  }
  body.sc[data-theme="light"] {
    --scrim: linear-gradient(180deg, rgba(244, 244, 242, .18) 0%, rgba(244, 244, 242, .3) 30%,
                             rgba(244, 244, 242, .82) 74%, rgba(244, 244, 242, .97) 100%);
  }
  /* сводка переезжает к составу: в первом экране остаётся только суть */
  .sc-stats-hero { display: none; }
  .sc-stats-list { display: flex; width: 100%; margin: 0 0 clamp(22px, 5vw, 36px); }
  .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: 42px; 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; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 133, 98, .25); }
.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: 42px; 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(--faint); 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; }
  .board-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .board-tools .btn { justify-content: 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: 42px; 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; }
  .topbar nav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .board-head { flex-direction: column; }
}

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