/* «Биржа Труда» — компоненты публичной части. Токены — в tokens/*.css. */
* { box-sizing: border-box; }

.page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 16px);
}
/* Экран с липкой кнопкой внизу: без запаса она закрывает конец текста */
.page--sticky { padding-bottom: calc(96px + var(--safe-bottom)); }

/* Иконка Lucide через CSS-mask, перекрашивается в currentColor */
.icon {
  display: inline-block; flex: none; width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--26 { width: 26px; height: 26px; }

/* ===== Мини-хедер: бренд + город ===== */
/* В шапке теперь три вещи: логотип, язык и город. На 360px они в строку не
   помещаются, поэтому логотип занимает всю ширину, а язык с городом становятся
   в ряд под ним: обрезать выбор города ради логотипа нельзя — это первое, что
   человек меняет, а язык нужен тем, кто иначе вообще не поймёт страницу. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 4px;
  min-height: 56px; padding: 4px 8px 4px var(--screen-padding);
  background: var(--surface-card);
}
.topbar__logo { margin-right: auto; }
/* Выбор языка — та же механика, что у города: <details> с обычными ссылками. */
.langpick { position: relative; }
.langpick__btn {
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
  min-height: var(--touch-target); padding: 0 10px;
  border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: var(--font-size-small); font-weight: 600;
  color: var(--text-body); cursor: pointer;
}
.langpick__btn::-webkit-details-marker { display: none; }
.langpick__btn .icon { color: var(--color-primary); }
.langpick[open] .langpick__btn { background: var(--color-primary-50); }
.langpick__panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 21;
  width: max(180px, 44vw); padding: 6px;
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--surface-card); box-shadow: var(--shadow-sticky);
}
.langpick__list { list-style: none; margin: 0; padding: 0; }
.langpick__item {
  display: flex; align-items: center;
  min-height: var(--touch-target); padding: 0 12px;
  border-radius: var(--radius-field); color: var(--text-body);
  text-decoration: none; font-size: var(--font-size-body);
}
.langpick__item--on { background: var(--color-primary-50); font-weight: 700; }
.topbar__logo {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  color: var(--text-body); text-decoration: none;
}
.topbar__logo em { font-style: normal; color: var(--color-primary); }
/* Выбор города: <details> вместо выпадашки на JS — открывается пальцем
   и с клавиатуры даже когда скрипт не загрузился. */
.citypick { position: relative; }
.citypick__btn {
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
  min-height: var(--touch-target); padding: 0 12px;
  border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: var(--font-size-small); font-weight: 600;
  color: var(--text-body); cursor: pointer;
}
.citypick__btn::-webkit-details-marker { display: none; }
.citypick__btn .icon { color: var(--color-primary); }
.citypick__now { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citypick[open] .citypick__btn { background: var(--color-primary-50); }
.citypick[open] .citypick__chev { transform: rotate(180deg); }
.citypick__panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  width: min(320px, calc(100vw - 24px)); padding: 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--surface-card); box-shadow: var(--shadow-sticky);
}
.citypick__search { display: flex; gap: 8px; }
.citypick__input {
  flex: 1; min-width: 0; min-height: var(--control-height-sm); padding: 0 12px;
  border: 2px solid var(--color-border); border-radius: var(--radius-field);
  background: var(--surface-page); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--font-size-small);
}
.citypick__input:focus { outline: none; border-color: var(--color-trust); }
.citypick__find {
  flex: none; min-height: var(--control-height-sm); padding: 0 16px;
  border: none; border-radius: var(--radius-button);
  background: var(--color-trust); color: #FFFFFF; cursor: pointer;
  font-family: var(--font-body); font-size: var(--font-size-small); font-weight: 700;
}
.citypick__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.citypick__item {
  display: flex; align-items: center;
  min-height: var(--touch-target); padding: 0 12px;
  border-radius: var(--radius-field); color: var(--text-body);
  font-size: var(--font-size-small); text-decoration: none;
}
.citypick__item--on { background: var(--color-primary-50); color: var(--color-primary-600); font-weight: 700; }

/* Сообщение под шапкой: «города нет», «вакансия закрыта» и подобное.
   Янтарный фон — атмосфера, не действие: кнопка на экране остаётся одна. */
.notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px var(--screen-padding) 0; padding: 10px 12px;
  border-radius: var(--radius-field);
  font-size: var(--font-size-small); line-height: 1.45;
}
.notice--warn { background: var(--color-amber-50); }
.notice .icon { margin-top: 2px; color: var(--color-primary-600); }

/* Шапка внутреннего экрана: назад + заголовок */
.screen-head { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 8px; }
.screen-head__back {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: none; border-radius: var(--radius-button);
  background: transparent; cursor: pointer; color: var(--text-body); text-decoration: none;
}
.screen-head__title { font-family: var(--font-heading); font-weight: 700; font-size: 19px; }

/* ===== Блок помощника на главной ===== */
.assistant-hero {
  display: flex; align-items: center; gap: 12px;
  margin: 12px var(--screen-padding) 0; padding: 14px;
  border-radius: var(--radius-card); background: var(--color-primary-50);
  text-decoration: none; color: inherit; cursor: pointer;
}
.assistant-hero:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.assistant-hero__avatar {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--color-primary);
  font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-primary-600);
}
.assistant-hero__dot {
  position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--color-cta); border: 2.5px solid #FFFFFF;
}
.assistant-hero__name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 19px; }
.assistant-hero__sub { display: block; font-size: var(--font-size-small); color: var(--text-muted); }
.assistant-hero__chev { color: var(--text-muted); }

/* Чипы профессий (остались на других экранах) */
.chips {
  display: flex; gap: var(--gap-min); overflow-x: auto;
  padding: 12px var(--screen-padding); scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; flex: none;
  min-height: var(--control-height-sm); padding: 0 16px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--font-size-small); font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.chip--selected { border-color: var(--color-primary); background: var(--color-primary-50); color: var(--color-primary-600); }

/* ===== Фильтры витрины: два списка в одну строку ===== */
.filters { display: flex; align-items: flex-end; gap: var(--gap-min); padding: 12px var(--screen-padding) 0; }
.filters__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.filters__label { font-size: var(--font-size-legal); font-weight: 600; color: var(--text-muted); }
.filters__control { position: relative; display: block; }
.filters__select {
  width: 100%; min-height: var(--control-height-sm); padding: 0 36px 0 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-field);
  background: var(--surface-card); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--font-size-small); font-weight: 600;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  text-overflow: ellipsis;
}
.filters__select:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
/* стрелку рисуем сами: у родного select она на дешёвых Android разъезжается */
.filters__chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.filters noscript { display: block; }
.filters__go {
  flex: none; min-height: var(--control-height-sm); padding: 0 16px;
  border: 2px solid var(--color-trust); border-radius: var(--radius-button);
  background: transparent; color: var(--color-trust); cursor: pointer;
  font-family: var(--font-body); font-size: var(--font-size-small); font-weight: 700;
}

/* ===== OfferCard ===== */
.section-title { padding: 8px var(--screen-padding) 0; }
.offer-list { display: flex; flex-direction: column; gap: 12px; padding: 12px var(--screen-padding) 0; }

.offer-card {
  position: relative;
  width: 100%; background: var(--surface-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); overflow: hidden;
  font-family: var(--font-body); color: var(--text-body);
}
/* Карточка в ленте — целиком ссылка на вакансию; кнопка отклика лежит ниже,
   отдельным блоком, поэтому вложенных <a> не возникает.
   Слоя ::after поверх карточки тут нет намеренно: сама ссылка блочная и уже
   накрывает шапку с телом карточки, а лишний слой добавлял только полосу
   вокруг «Откликнуться» — зато перехватывал долгое нажатие и на самой кнопке. */
/* Долгое нажатие по карточке на Android иначе открывает меню ссылки
   («Открыть в новой вкладке», «Копировать») и выделяет текст — человек ждал
   обычного перехода, а получил системную шторку поверх экрана. */
.offer-card__link {
  display: block; color: inherit; text-decoration: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.offer-card__link:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -3px; }
.offer-card__actions { padding: 0 16px 16px; }
.offer-card__brand {
  display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 0 16px; color: #FFFFFF;
  text-decoration: none;
}
.offer-card__brand--dark-text { color: var(--color-text); }
.offer-card__brand-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 19px;
}
/* Логотип работодателя рядом с названием. Логотипы бывают и тёмные, и светлые,
   а фон шапки — произвольный brand_color, поэтому кладём логотип на белую
   подложку: так он читается на любом фоне. object-fit не даёт растянуть.
   Ширина ограничена сильнее высоты: у части компаний логотип — горизонтальная
   надпись (Яндекс.Еда, Onecta, Pampadu), и без потолка она съела бы всю строку,
   не оставив места названию. */
/* Ширину задаём долей, а не пикселями. У горизонтальных логотипов-надписей
   (Яндекс.Еда, Onecta, Pampadu) высоту ограничивает не потолок в 44px, а
   ширина: при 108px «Яндекс.Еда» отрисовывалась высотой 18px и читалась с
   трудом. Доля же растёт вместе с экраном и на узких телефонах сама
   ужимается, оставляя место названию — замер на 375px: под имя остаётся
   162px при самом длинном имени в 154px. */
.offer-card__brand-logo {
  flex: none; max-height: 44px; max-width: 45%; width: auto; object-fit: contain;
  background: #FFFFFF; border-radius: 6px; padding: 5px;
}
/* Белая подложка нужна только под тёмной шапкой: там без неё потеряется тёмный
   логотип. Когда фирменный цвет светлый (это и означает --dark-text: подпись на
   нём пишется тёмной), подложка становится третьим почти белым слоем подряд —
   светлая шапка, белая плашка, собственный светлый фон логотипа, — и читается
   как случайная коробочка вокруг знака. Убираем её и отдаём место рисунку. */
.offer-card__brand--dark-text .offer-card__brand-logo {
  background: none; border-radius: 0; padding: 0;
}
/* Рядом с логотипом название набираем мельче: на экране 375px на двоих остаётся
   около 300px, и в прежних 19px длинные имена вроде «Купер (быв. СберМаркет)»
   обрывались на середине. */
.offer-card__brand-logo + .offer-card__brand-name { font-size: 16px; }
/* снизу 12px, а не 16: столько же, сколько между блоками внутри тела, —
   иначе кнопка отклика отъезжает от карточки дальше, чем была */
.offer-card__body { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; }
.offer-card__role {
  margin: 0; font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.offer-card__income {
  font-family: var(--font-heading); font-size: var(--font-size-income); font-weight: 800;
  line-height: 1.2; color: var(--text-income);
}
.offer-card__income-note { font-size: var(--font-size-legal); color: var(--text-muted); margin-top: 2px; }
.offer-card__conds { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.offer-card__cond { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-small); color: var(--text-muted); }
.offer-card__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-card__badge {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px;
  border-radius: var(--radius-pill); background: var(--color-cta-50); color: var(--color-cta-700);
  font-size: var(--font-size-badge); font-weight: 600; white-space: nowrap;
}
.offer-card__badge--hot { background: var(--color-amber); color: var(--color-text); }
.offer-card__reqs { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.offer-card__reqs-title { font-family: var(--font-heading); font-size: 16px; font-weight: 700; }
.offer-card__req { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-small); }
.offer-card__req .icon { color: var(--text-muted); }

/* ===== Описания на карточке вакансии ===== */
.vacancy-text { padding: 20px var(--screen-padding) 0; }
.vacancy-text__title { margin: 0 0 8px; font-size: var(--font-size-h3); font-weight: var(--weight-heading); }
.vacancy-text p { margin: 0 0 10px; font-size: var(--font-size-small); line-height: 1.6; }
.vacancy-text p:last-child { margin: 0; }

/* ===== Кнопки ===== */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--control-height);
  border: 0; border-radius: var(--radius-button); cursor: pointer;
  font-family: var(--font-body); font-size: 18px; font-weight: 700;
  text-decoration: none;
  transition: background var(--duration-fast), transform var(--duration-fast);
}
.btn:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.btn--cta { background: var(--color-cta); color: #FFFFFF; }
.btn--cta:hover { filter: brightness(0.96); }
.btn--cta:active { background: var(--color-cta-600); transform: translateY(1px); filter: none; }
.btn--cta:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; transform: none; }
.btn--trust { background: var(--color-trust); color: #FFFFFF; }
.btn--trust:active { background: var(--color-trust-600); transform: translateY(1px); }
.btn--ghost {
  min-height: var(--control-height-sm); background: transparent;
  border: 2px solid var(--color-trust); color: var(--color-trust); font-size: 16px;
}
.btn--ghost:active { background: var(--color-trust-50); }

/* ===== TabBar ===== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  background: var(--surface-card); border-top: 1px solid var(--color-border);
  padding-bottom: var(--safe-bottom);
}
.tabbar__inner { display: flex; width: 100%; max-width: 480px; min-height: var(--tabbar-height); }
.tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px; text-decoration: none;
  color: var(--text-muted); font-size: var(--font-size-legal); font-weight: 600; line-height: 1.1;
}
.tabbar__item--active { color: var(--color-primary-600); font-weight: 800; }

/* ===== Захват контакта ===== */
.capture { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--screen-padding); min-height: calc(100vh - 56px); }
.capture__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--font-size-h1); line-height: 1.2; margin: 8px 0 0; }
.capture__sub { font-size: var(--font-size-body); color: var(--text-muted); }
.capture__shield {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--radius-field); background: var(--color-trust-50);
  font-size: var(--font-size-small); line-height: 1.45;
}
.capture__shield .icon { color: var(--color-trust); width: 22px; height: 22px; margin-top: 1px; }
/* Быстрый отклик: номер уже оставляли, показываем только его хвост и одну кнопку */
.capture__known {
  display: flex; gap: 10px; align-items: center; padding: 14px;
  border-radius: var(--radius-field); background: var(--color-trust-50);
  font-size: var(--font-size-body); line-height: 1.45;
}
.capture__known .icon { color: var(--color-trust); width: 22px; height: 22px; flex: none; }
.capture__known b { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* «Другой номер» — обычная ссылка, а не кнопка: это редкий путь, он не должен
   спорить с главным действием на экране */
.capture__other {
  align-self: flex-start; font-size: var(--font-size-small); color: var(--link);
  min-height: 44px; display: inline-flex; align-items: center;
}
.capture__label { display: block; margin-bottom: 8px; font-size: var(--font-size-small); font-weight: 600; }
.capture__field {
  display: flex; align-items: center; gap: 8px; min-height: var(--control-height); padding: 0 16px;
  border: 2px solid var(--color-border); border-radius: var(--radius-field); background: var(--surface-card);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.capture__field:focus-within { border-color: var(--color-trust); box-shadow: 0 0 0 3px var(--color-trust-50); }
.capture--error .capture__field { border-color: var(--color-danger); box-shadow: none; }
.capture__prefix { font-size: 18px; font-weight: 600; }
.capture__field input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--text-body); padding: 0;
}
.capture__field input::placeholder { color: var(--disabled-text); font-weight: 400; }
.capture__error { display: none; margin: 8px 0 0; font-size: var(--font-size-small); color: var(--color-danger); }
.capture--error .capture__error { display: block; }
.capture__consent {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--touch-target); padding: 8px 0; cursor: pointer;
  font-size: var(--font-size-small); line-height: 1.5; color: var(--text-muted);
}
.capture__consent a { color: var(--color-trust); }
.capture__consent input { position: absolute; opacity: 0; width: 28px; height: 28px; }
.capture__box {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  border: 2px solid var(--color-border); background: var(--surface-card);
  transition: background var(--duration-fast);
}
.capture__consent input:checked + .capture__box {
  border: none; background: var(--color-trust);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.capture__consent input:focus-visible + .capture__box { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.capture__offline {
  display: none; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--radius-field); background: var(--color-amber-50); font-size: var(--font-size-small); line-height: 1.45;
}
.capture--offline .capture__offline { display: flex; }
.capture__cta-zone {
  margin-top: auto; position: sticky; bottom: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 0 16px; background: var(--surface-page);
}
.capture--sending .capture__main { opacity: .55; pointer-events: none; }
.capture--sending .capture__cta-zone .btn { background: var(--color-cta-600); cursor: progress; pointer-events: none; }
.capture__why { display: none; margin: 0; font-size: var(--font-size-legal); color: var(--text-muted); text-align: center; }
.btn:disabled ~ .capture__why { display: block; }
.capture__legal { margin: 0; font-size: var(--font-size-legal); color: var(--text-muted); text-align: center; }
.capture__success { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 32px 24px; }
.capture--success .capture__success { display: flex; }
.capture--success .capture__main, .capture--success .capture__cta-zone { display: none; }
/* Знак на экране после отправки номера. Было зелёное «готово» — врало: человека
   ждёт анкета у работодателя. Теперь стрелка в цвете доверия, а когда переход
   действительно начался (класс --going ставит capture.js), круг становится
   вертушкой: на дешёвом Android чужой сайт грузится долго, и человеку надо
   видеть, что страница не умерла. */
.capture__mark {
  width: 72px; height: 72px; border-radius: 50%; box-sizing: border-box;
  background: var(--color-trust-50); color: var(--color-trust);
  display: flex; align-items: center; justify-content: center;
}
.capture__mark .icon { width: 34px; height: 34px; }
.capture__mark--going {
  background: none; border: 4px solid var(--color-trust-50); border-top-color: var(--color-trust);
  animation: bt-spin .8s linear infinite;
}
.capture__mark--going .icon { display: none; }
@media (prefers-reduced-motion: reduce) { .capture__mark--going { animation: none; } }
.capture__success-note { font-size: var(--font-size-small); color: var(--text-muted); }

/* Шаг имени на экране успеха (спек 4.5): мягко, необязательно */
.capture__name-step {
  width: 100%; margin-top: 8px; padding: 16px; text-align: left;
  border-radius: var(--radius-card); background: var(--surface-card);
  border: 1px solid var(--color-border);
}
.capture__name-title { font-size: var(--font-size-small); font-weight: 600; }
.capture__name-sub { font-size: 14px; line-height: 1.45; color: var(--text-muted); margin-top: 2px; }
.capture__name-input {
  width: 100%; box-sizing: border-box; margin-top: 12px; min-height: 52px; padding: 0 16px;
  border-radius: var(--radius-field); border: 2px solid var(--color-border);
  background: var(--surface-page); outline: none;
  font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--text-body);
}
.capture__name-input:focus { border-color: var(--color-trust); box-shadow: 0 0 0 3px var(--color-trust-50); }
.capture__name-actions { display: flex; gap: 10px; margin-top: 12px; }
.capture__name-save {
  flex: 1; min-height: 52px; border: none; border-radius: var(--radius-button);
  background: var(--color-trust); color: #FFFFFF; cursor: pointer;
  font-family: var(--font-body); font-size: 17px; font-weight: 700;
}
.capture__name-save:active { background: var(--color-trust-600); transform: translateY(1px); }
.capture__name-skip {
  flex: none; min-height: 52px; padding: 0 18px; border: none; border-radius: var(--radius-button);
  background: transparent; color: var(--link); cursor: pointer;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
}
.capture__name-done {
  width: 100%; margin-top: 8px; padding: 12px 14px; box-sizing: border-box; text-align: left;
  border-radius: var(--radius-field); background: var(--color-trust-50);
  font-size: var(--font-size-small); line-height: 1.45;
}
/* Запасная ссылка к работодателю. Намеренно неяркая: в обычном случае человека
   уводит скрипт через секунду и ссылку никто не успевает заметить. Она нужна
   только тогда, когда переход не сработал, — и тогда должна быть на виду. */
.capture__fallback {
  display: inline-block; margin-top: 18px; padding: 10px 4px;
  color: var(--text-muted); font-size: var(--font-size-small); text-decoration: underline;
}

/* ===== Кабинет: ApplicationCard + StatusStepper ===== */
.account__greeting { padding: 20px var(--screen-padding) 4px; }
.account__phone { margin-top: 2px; font-size: 14px; color: var(--text-muted); }
.account__section { display: flex; align-items: baseline; gap: 8px; padding: 14px var(--screen-padding) 10px; }
.account__count { font-size: var(--font-size-small); color: var(--text-muted); }
.account__list { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--screen-padding); }
.account__sms { display: flex; align-items: center; gap: 8px; padding: 12px var(--screen-padding) 0; font-size: 14px; color: var(--text-muted); }
.account__sms .icon { color: var(--color-trust); }

.app-card { background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; }
.app-card__brand { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px; text-decoration: none; color: inherit; cursor: pointer; }
.app-card__brand:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -3px; }
.app-card__brand-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-weight: 700; font-size: 16px; }
.app-card__brand-link { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; opacity: .85; }
.app-card__vacancy { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.app-card__role { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.25; }
.app-card__income { margin-top: 2px; font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--text-income); }
.app-card__income small { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-muted); }
.app-card__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }

.stepper { list-style: none; margin: 0; padding: 0; }
.stepper__step { display: flex; gap: 12px; position: relative; padding-bottom: 20px; }
.stepper__step:last-child { padding-bottom: 0; }
.stepper__step:not(:last-child)::after {
  content: ''; position: absolute; left: 15px; top: 32px; bottom: 0;
  width: 3px; border-radius: 2px; background: var(--color-border);
}
.stepper__step--done:not(:last-child)::after { background: var(--color-cta); }
.stepper__dot {
  width: 32px; height: 32px; flex: none; border-radius: 50%; position: relative; z-index: 1;
  border: 2.5px solid var(--color-border); background: var(--surface-card);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: var(--text-muted);
}
.stepper__step--done .stepper__dot { border: 0; background: var(--color-cta); color: #FFFFFF; }
.stepper__step--done .stepper__dot::before {
  content: ''; width: 18px; height: 18px; background: #FFFFFF;
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
.stepper__step--done .stepper__num { display: none; }
.stepper__step--now .stepper__dot { border: 0; background: var(--color-trust); color: #FFFFFF; animation: bt-pulse 2s infinite; }
.stepper__text { padding-top: 3px; min-width: 0; }
.stepper__label { display: block; font-size: 18px; line-height: 1.25; color: var(--text-muted); }
.stepper__step--done .stepper__label { font-weight: 600; color: var(--text-body); }
.stepper__step--now .stepper__label { font-weight: 600; color: var(--color-trust); }
.stepper__note { display: block; margin-top: 2px; font-size: var(--font-size-small); line-height: 1.4; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .stepper__step--now .stepper__dot { animation: none; } }

/* Пустые состояния / ошибки */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 24px 8px; }
.state__icon {
  display: flex; align-items: center; justify-content: center; width: 72px; height: 72px;
  border-radius: 50%; background: var(--surface-section); color: var(--text-muted);
}
.state__icon .icon { width: 32px; height: 32px; }
.state h3 { margin: 0; }
.state p { margin: 0; font-size: var(--font-size-small); color: var(--text-muted); max-width: 300px; }
.state .btn { max-width: 320px; margin-top: 4px; }

/* Кросс-блок кабинета */
.cross { display: flex; flex-direction: column; gap: 8px; padding: 20px var(--screen-padding) 0; }
.cross__title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.cross-card {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px;
  border-radius: var(--radius-field); background: var(--surface-section);
  text-decoration: none; color: inherit; cursor: pointer;
}
.cross-card:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.cross-card__icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; background: var(--surface-card); color: var(--color-primary-600);
}
.cross-card__icon .icon { width: 22px; height: 22px; }
.cross-card__name { display: block; font-size: 16px; font-weight: 600; }
.cross-card__sub { display: block; font-size: 14px; color: var(--text-muted); }
.cross-card__chev { color: var(--text-muted); }

/* Sticky CTA для экрана вакансии */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  background: var(--surface-card); box-shadow: var(--shadow-sticky);
  padding: 10px var(--screen-padding) calc(12px + var(--safe-bottom));
}
.sticky-cta__inner { width: 100%; max-width: 448px; display: flex; flex-direction: column; gap: 8px; }

/* ===== Юридические страницы ===== */
.legal { padding: 8px var(--screen-padding) 32px; font-size: var(--font-size-small); line-height: 1.6; }
.legal__short {
  background: var(--color-trust-50); border-radius: var(--radius-card);
  padding: 14px 16px; margin-bottom: 20px; line-height: 1.5;
}
.legal h2 { font-size: 22px; margin: 0 0 4px; }
.legal h3 { font-size: 17px; margin: 22px 0 6px; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal__meta { color: var(--text-muted); font-size: var(--font-size-legal); margin-bottom: 16px; }
.legal__note {
  margin-top: 24px; padding: 12px 14px; border-radius: var(--radius-field);
  background: var(--color-amber-50); font-size: var(--font-size-legal); line-height: 1.5;
}