/* =======================================================================
   cards-actions-tune.css
   Цель: поменять только РАСКЛАДКУ кнопок в карточках РЕЗЮМЕ.
   Высоты/паддинги/стили кнопок не трогаем — оставляем как в cards-fix.css.
   Работает на страницах с .resume-card и/или .card[data-type="resume"].
   ======================================================================= */

/* Контейнер действий: одна линия, равномерное сжатие (по умолчанию >420px) */
.resume-card .card-actions,
.resume-card .card-buttons,
.card[data-type="resume"] .card-actions,
.card[data-type="resume"] .card-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Внутренние элементы тянутся/сжимаются ПРОПОРЦИОНАЛЬНО */
.resume-card .card-actions > *,
.resume-card .card-buttons > *,
.card[data-type="resume"] .card-actions > *,
.card[data-type="resume"] .card-buttons > * {
  flex: 1 1 0;
  min-width: 0; /* разрешаем сжиматься, чтобы ничего не выползало */
}

/* ===== ≤420px: явная схема — invite на всю ширину, ниже contact | favorite */
@media (max-width: 420px) {
  .resume-card .card-actions,
  .resume-card .card-buttons,
  .card[data-type="resume"] .card-actions,
  .card[data-type="resume"] .card-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "invite invite"
      "contact favorite";
    grid-auto-rows: auto;
    gap: 8px;
  }

  /* Пригласить/Отменить/Отозвать — верхняя строка на 100% */
  .resume-card .card-actions [data-action="invite"],
  .resume-card .card-actions [data-action="cancel"],
  .resume-card .card-actions [data-action="withdraw"],
  .resume-card .card-actions [data-action="cancel-invite"],
  .resume-card .card-buttons [data-action="invite"],
  .resume-card .card-buttons [data-action="cancel"],
  .resume-card .card-buttons [data-action="withdraw"],
  .resume-card .card-buttons [data-action="cancel-invite"],
  .card[data-type="resume"] .card-actions [data-action="invite"],
  .card[data-type="resume"] .card-actions [data-action="cancel"],
  .card[data-type="resume"] .card-actions [data-action="withdraw"],
  .card[data-type="resume"] .card-actions [data-action="cancel-invite"],
  .card[data-type="resume"] .card-buttons [data-action="invite"],
  .card[data-type="resume"] .card-buttons [data-action="cancel"],
  .card[data-type="resume"] .card-buttons [data-action="withdraw"],
  .card[data-type="resume"] .card-buttons [data-action="cancel-invite"] {
    grid-area: invite;
  }

  /* Связаться — левая половина второй строки */
  .resume-card .card-actions [data-action="contact"],
  .resume-card .card-buttons [data-action="contact"],
  .card[data-type="resume"] .card-actions [data-action="contact"],
  .card[data-type="resume"] .card-buttons [data-action="contact"] {
    grid-area: contact;
  }

  /* В избранное — правая половина второй строки */
  .resume-card .card-actions .button-favorite,
  .resume-card .card-buttons .button-favorite,
  .card[data-type="resume"] .card-actions .button-favorite,
  .card[data-type="resume"] .card-buttons .button-favorite {
    grid-area: favorite;
  }
}

/* Страховка: ничего не вылезет за границы карточки */
.resume-card,
.card[data-type="resume"] {
  overflow: hidden;
}

/* === VACANCY CARD — кнопки 50/50, адаптив ===
   Целим ровно в тот безымянный <div> с кнопками,
   который лежит внутри .vacancy-extra у карточек вакансий.
   Работает и для старых/новых классов кнопок. */

/* Контейнер кнопок внутри "низа" вакансии — растягиваем на 100% */
.vacancy-card .vacancy-extra > div {
  display: flex !important;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;          /* держим кнопки в одной строке, пока помещаются */
  align-items: stretch;       /* выравниваем высоты кнопок */
  box-sizing: border-box;
}

/* Две кнопки делят строку поровну (50/50) */
.vacancy-card .vacancy-extra > div > .response-btn,
.vacancy-card .vacancy-extra > div > .button-favorite,
.vacancy-card .vacancy-extra > div > .btn-apply,      /* на случай старых шаблонов */
.vacancy-card .vacancy-extra > div > .btn-respond,
.vacancy-card .vacancy-extra > div > .btn-withdraw {
  flex: 1 1 0 !important;     /* ключ: базис 0, значит ширина делится поровну */
  min-width: 0;               /* даём сжиматься */
  overflow: hidden;           /* чтобы текст не вылазил */
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Узкие экраны: если совсем не помещается — перенос в две строки.
   Кнопки останутся одинаковой ширины в своей строке. */
@media (max-width: 420px) {
  .vacancy-card .vacancy-extra > div {
    flex-wrap: wrap !important;
  }
  .vacancy-card .vacancy-extra > div > .response-btn,
  .vacancy-card .vacancy-extra > div > .button-favorite,
  .vacancy-card .vacancy-extra > div > .btn-apply,
  .vacancy-card .vacancy-extra > div > .btn-respond,
  .vacancy-card .vacancy-extra > div > .btn-withdraw {
    flex: 1 1 calc(50% - 4px) !important; /* на переносе делим строку пополам */
  }
}

/* =======================================================================
   RESUME — расширяем текстовую область на мобильных
   Убираем узкую колонку: .card-info на всю ширину, город уходит на новую строку.
   ======================================================================= */
@media (max-width: 480px) {
  /* шапка может переноситься */
  .resume-card .card-header,
  .card[data-type="resume"] .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative; /* остаётся базово */
    gap: 12px;
  }

  /* текстовая колонка занимает всю доступную ширину */
  .resume-card .card-header .card-info,
  .card[data-type="resume"] .card-header .card-info {
    max-width: 100%;      /* снимаем calc(100% - 150px) */
    flex: 1 1 100%;       /* переносим на свою строку при нехватке места */
    min-width: 0;
  }

  /* город больше не абсолютный — падает НИЖЕ текста */
  .resume-card .card-location,
  .card[data-type="resume"] .card-location {
    position: static;     /* снимаем absolute/right/top */
    order: 3;             /* после текста и плюса */
    margin: 4px 0 0 0;
    align-self: flex-start;
    white-space: nowrap;
  }

  /* плюс пусть не сжимает текст, но остаётся в первой строке */
  .resume-card .card-plus,
  .card[data-type="resume"] .card-plus {
    order: 2;
    flex-shrink: 0;
  }

  /* типографика описаний/«доп. инфо» под “Опыт работы” */
  .resume-card .card-description,
  .card[data-type="resume"] .card-description,
  .resume-card .card-availability,
  .card[data-type="resume"] .card-availability,
  .resume-card .card-experience,
  .card[data-type="resume"] .card-experience {
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* немного сжимаем внутренние поля на очень узких экранах */
  @media (max-width: 380px) {
    .resume-card,
    .card[data-type="resume"] {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}

/* =====================================================================
   RESUME — глобальные правки (все размеры): скрыть иконки, выровнять отступы
   ===================================================================== */
.resume-card,
.card[data-type="resume"] {
  /* единые шаги вертикальных интервалов */
  --rc-gap: 10px;     /* между крупными блоками */
  --rc-gap-sm: 6px;   /* между строками текста */
}

/* скрыть “плюсики/галочки” во всех режимах */
.resume-card .green-plus,
.resume-card .card-plus,
.resume-card .status-icon,
.resume-card .card-status,
.card[data-type="resume"] .green-plus,
.card[data-type="resume"] .card-plus,
.card[data-type="resume"] .status-icon,
.card[data-type="resume"] .card-status {
  display: none !important;
}

/* ровные отступы в шапке и тексте — применяются на всех ширинах */
.resume-card .card-header,
.card[data-type="resume"] .card-header {
  margin-bottom: var(--rc-gap);
}

.resume-card .card-description,
.resume-card .card-availability,
.resume-card .card-experience,
.card[data-type="resume"] .card-description,
.card[data-type="resume"] .card-availability,
.card[data-type="resume"] .card-experience {
  margin: var(--rc-gap-sm) 0;    /* одинаковые интервалы между строками */
}

/* “Редактировать” ближе к тексту */
.resume-card .card-actions,
.resume-card .card-buttons,
.card[data-type="resume"] .card-actions,
.card[data-type="resume"] .card-buttons {
  margin-top: var(--rc-gap-sm);
}

/* =====================================================================
   RESUME — глобально: скрыть иконки статусов, выровнять отступы
   ===================================================================== */
.resume-card,
.card[data-type="resume"] {
  --rc-gap: 10px;    /* между крупными блоками */
  --rc-gap-sm: 6px;  /* между строками текста */
}

/* плюс/галочка — скрыть на всех ширинах */
.resume-card .green-plus,
.resume-card .card-plus,
.resume-card .status-icon,
.resume-card .card-status,
.card[data-type="resume"] .green-plus,
.card[data-type="resume"] .card-plus,
.card[data-type="resume"] .status-icon,
.card[data-type="resume"] .card-status {
  display: none !important;
}

/* ровные отступы текста и кнопок — на всех ширинах */
.resume-card .card-header,
.card[data-type="resume"] .card-header {
  margin-bottom: var(--rc-gap);
}
.resume-card .card-description,
.resume-card .card-availability,
.resume-card .card-experience,
.card[data-type="resume"] .card-description,
.card[data-type="resume"] .card-availability,
.card[data-type="resume"] .card-experience {
  margin: var(--rc-gap-sm) 0;
}
.resume-card .card-actions,
.resume-card .card-buttons,
.card[data-type="resume"] .card-actions,
.card[data-type="resume"] .card-buttons {
  margin-top: var(--rc-gap-sm);   /* подтянуть "Редактировать" */
}

/* =====================================================================
   RESUME — мобильные и средние (<= 600px):
   компактная шапка, город сразу под специальностью,
   левый край текста совпадает с краем кнопок
   ===================================================================== */
@media (max-width: 600px) {

  /* Иконку работника на этих ширинах убираем из потока,
     чтобы она не толкала текст вправо (компактность важнее) */
  .resume-card .card-icon,
  .card[data-type="resume"] .card-icon {
    display: none !important;
  }

  /* Шапка = одно­колоночная сетка; все элементы идут строками */
  .resume-card .card-header,
  .card[data-type="resume"] .card-header {
    display: grid;
    grid-template-columns: 1fr;   /* одна колонка = упор в левый край */
    row-gap: 4px;
    column-gap: 0;
    align-items: start;
  }

  /* Делаем так, чтобы дети .card-info стали строками сетки */
  .resume-card .card-info,
  .card[data-type="resume"] .card-info {
    display: contents;
  }

  /* 1-я строка — специальность */
  .resume-card .card-title,
  .card[data-type="resume"] .card-title {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
  }

  /* 2-я строка — город (сразу под заголовком) */
  .resume-card .card-location,
  .card[data-type="resume"] .card-location {
    position: static !important;  /* на всякий случай снимаем absolute */
    grid-row: 2;
    grid-column: 1;
    margin: 0;
    white-space: nowrap;          /* чтобы "Санкт-Петербург" не рвался */
    align-self: start;
  }

  /* Далее — описание, доступность, опыт — каждая на своей строке */
  .resume-card .card-description,
  .card[data-type="resume"] .card-description { grid-row: 3; grid-column: 1; }
  .resume-card .card-availability,
  .card[data-type="resume"] .card-availability { grid-row: 4; grid-column: 1; }
  .resume-card .card-experience,
  .card[data-type="resume"] .card-experience { grid-row: 5; grid-column: 1; }
}

/* candidates.html → вкладка Резюме: одна кнопка = на всю ширину */
#resumeTab .card-actions,
#resumeTab .card-buttons {
  display: flex;
  gap: 8px;
}

#resumeTab .card-actions .card-button,
#resumeTab .card-buttons .card-button {
  flex: 1 1 0;
  min-width: 0;
}

/* Если в блоке действий ровно ОДНА кнопка — растягиваем на 100% */
#resumeTab .card-actions > .card-button:only-child,
#resumeTab .card-buttons > .card-button:only-child {
  flex-basis: 100%;
  width: 100%;
}

/* =========================
   VACANCY — компактная шапка
   Иконка слева; 1-я строка — заголовок, 2-я — город.
   Ниже вся «текстовка» (описание/опыт) идёт от ЛЕВОГО края карточки,
   т.е. шире, чем заголовок/город (под иконкой — без отступа).
   ========================= */

/* Базовая сетка шапки (десктоп/планшет) */
.vacancy-card .card-header,
.card[data-type="vacancy"] .card-header,
.vacancy-card .vacancy-info {
  display: grid;
  grid-template-columns: 28px 1fr auto; /* иконка | текст | (город вправо) */
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
  margin-bottom: 10px;
}

/* Иконка в левой колонке */
.vacancy-card .card-icon,
.vacancy-card .doc-icon,
.card[data-type="vacancy"] .card-icon {
  grid-column: 1;
  grid-row: 1 / 3;      /* занимает место рядом с заголовком и городом */
  width: 24px; height: 24px;
}

/* Заголовок (специальность) — справа от иконки */
.vacancy-card .card-title,
.card[data-type="vacancy"] .card-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

/* Город под заголовком (во 2-й строке) */
.vacancy-card .card-location,
.card[data-type="vacancy"] .card-location {
  position: static !important;
  white-space: nowrap;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: #666;
}

/* -------- ТЕКСТ НИЖЕ ШАПКИ --------
   Вся «текстовка» идёт ОТ ЛЕВОГО КРАЯ карточки,
   т.е. не отстраивается вправо из-за иконки.
   Важно: селекторы шире, т.к. в шаблоне могут быть разные классы. */
.vacancy-card .card-content,
.card[data-type="vacancy"] .card-content,
.vacancy-card .card-body,
.card[data-type="vacancy"] .card-body {
  margin-left: 0 !important; /* на случай наследованных смещений */
}

.vacancy-card .card-description,
.vacancy-card .vacancy-description,
.card[data-type="vacancy"] .card-description,
.card[data-type="vacancy"] .vacancy-description,
.vacancy-card .card-experience,
.vacancy-card .vacancy-experience,
.card[data-type="vacancy"] .card-experience,
.card[data-type="vacancy"] .vacancy-experience {
  margin-left: 0 !important;   /* ключ: убираем отступы под иконку */
  font-size: 14px;
  line-height: 1.4;
  color: #444;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Бейдж «Оплата» — отдельной строкой на всю ширину */
.vacancy-card .salary-badge,
.card[data-type="vacancy"] .salary-badge,
.vacancy-card .vacancy-salary {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0px;
}

/* Нижние кнопки на вакансиях (редактирование/архив) — каждая на своей строке.
   ВАЖНО: это не затрагивает блок отклика в списке кандидатов,
   он живёт в .vacancy-extra > div и уже настроен отдельно. */
.vacancy-card .card-buttons,
.card[data-type="vacancy"] .card-buttons {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  margin-top: 0px;
}

.vacancy-card .card-buttons .card-button,
.card[data-type="vacancy"] .card-buttons .card-button {
  width: 100%;
  min-width: 0;
}

/* Мобильная адаптация: город под заголовок; третья колонка убирается */
@media (max-width: 480px) {
  .vacancy-card .card-header,
  .card[data-type="vacancy"] .card-header,
  .vacancy-card .vacancy-info {
    grid-template-columns: 24px 1fr; /* иконка | текст */
    grid-template-rows: auto auto;   /* 1: заголовок, 2: город */
    column-gap: 10px;
    row-gap: 4px;
  }
  .vacancy-card .card-icon,
  .vacancy-card .doc-icon,
  .card[data-type="vacancy"] .card-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 24px; height: 24px;
  }
  .vacancy-card .card-title,
  .card[data-type="vacancy"] .card-title {
    grid-column: 2; grid-row: 1;
  }
  .vacancy-card .card-location,
  .card[data-type="vacancy"] .card-location {
    grid-column: 2; grid-row: 2;
    margin-top: 0;
  }
  /* Текст ниже — уже от левого края карточки (см. правила выше) */
}

/* ==== VACANCY: убрать плюсики и левую иконку, упростить шапку ==== */

/* 1) Прячем «плюс»/значки статусов в шапке вакансий (НЕ трогаем кнопки снизу) */
.vacancy-card .green-plus,
.vacancy-card .card-plus,
.vacancy-card .status-icon,
.vacancy-card .card-status,
.card[data-type="vacancy"] .green-plus,
.card[data-type="vacancy"] .card-plus,
.card[data-type="vacancy"] .status-icon,
.card[data-type="vacancy"] .card-status {
  display: none !important;
}

/* 2) Полностью убираем левую иконку документа/аватар в шапке */
.vacancy-card .card-icon,
.vacancy-card .doc-icon,
.card[data-type="vacancy"] .card-icon {
  display: none !important;
}

/* 3) Шапка вакансии теперь одна колонка: 
      1-я строка — заголовок (специальность), 2-я — город */
.vacancy-card .card-header,
.card[data-type="vacancy"] .card-header,
.vacancy-card .vacancy-info {
  display: grid;
  grid-template-columns: 1fr;  /* одна колонка */
  row-gap: 6px;
  column-gap: 0;
  align-items: start;
  margin-bottom: 10px;
}

/* Заголовок — первая строка */
.vacancy-card .card-title,
.card[data-type="vacancy"] .card-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

/* Город — вторая строка, обычный поток */
.vacancy-card .card-location,
.card[data-type="vacancy"] .card-location {
  position: static !important;
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  white-space: nowrap;          /* чтобы длинные топонимы не ломались посередине */
  align-self: start;
}

/* 4) Текстовые блоки под шапкой по-прежнему от левого края карточки
      (эти правила уже есть выше, но оставим как страховку) */
.vacancy-card .card-content,
.card[data-type="vacancy"] .card-content,
.vacancy-card .card-body,
.card[data-type="vacancy"] .card-body {
  margin-left: 0 !important;
}
.vacancy-card .card-description,
.vacancy-card .vacancy-description,
.card[data-type="vacancy"] .card-description,
.card[data-type="vacancy"] .vacancy-description,
.vacancy-card .card-experience,
.vacancy-card .vacancy-experience,
.card[data-type="vacancy"] .card-experience,
.card[data-type="vacancy"] .vacancy-experience {
  margin-left: 0 !important;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* =========================
   CABINET: вакансия (те же правки)
   ========================= */

/* Прячем плюс/статусы и левую иконку, как на остальных страницах */
.cabinet-vacancy-card .green-plus,
.cabinet-vacancy-card .card-plus,
.cabinet-vacancy-card .status-icon,
.cabinet-vacancy-card .card-status,
.cabinet-vacancy-card .card-icon,
.cabinet-vacancy-card .doc-icon {
  display: none !important;
}

/* Шапка одной колонкой:
   1-я строка — заголовок (специальность)
   2-я строка — город под заголовком */
.cabinet-vacancy-card .vacancy-info {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;            /* ← интервал между заголовком и городом */
  column-gap: 0;
  align-items: start;
  margin-bottom: 10px;     /* ← отступ НИЖЕ шапки до описания */
}

.cabinet-vacancy-card .vacancy-details { /* контент слева во всю ширину */
  margin: 0;
}

.cabinet-vacancy-card .vacancy-location {
  grid-column: 1;
  grid-row: 2;
  margin: 0;               /* ← при необходимости можно задать margin-top */
  white-space: nowrap;
  align-self: start;
}

/* Описание/опыт — от ЛЕВОГО края карточки, без сдвига вправо */
.cabinet-vacancy-card .vacancy-description,
.cabinet-vacancy-card .vacancy-experience,
.cabinet-vacancy-card .card-description,
.cabinet-vacancy-card .card-experience {
  margin-left: 0 !important;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Бейдж «Оплата» отдельной строкой на всю ширину */
.cabinet-vacancy-card .salary-badge,
.cabinet-vacancy-card .vacancy-salary {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;         /* ← отступ СВЕРХУ от города/описания до бейджа */
}

/* Низ карточки с кнопками (Редактировать/Отправить в архив):
   делаем колонкой, чтоб каждая кнопка была на всю ширину,
   и можно было одинаково регулировать вертикальные интервалы */
.cabinet-vacancy-card .salary-and-edit,
.cabinet-vacancy-card .card-buttons {
  display: grid !important;
  grid-template-columns: 1fr;
  row-gap: 10px;           /* ← интервал между кнопками */
  margin-top: 10px;        /* ← отступ ВЫШЕ блока кнопок от бейджа «Оплата» */
}

.cabinet-vacancy-card .salary-and-edit > *,
.cabinet-vacancy-card .card-buttons > * {
  width: 100%;
  min-width: 0;
}

/* === Resume: 3 равные кнопки + иконка вместо текста "В избранное" на узких === */
@media (max-width: 414px) {
  /* Ряд кнопок – одна строка, ровные доли */
  .resume-card .card-actions,
  .card[data-type="resume"] .card-actions {
    display: flex;
    flex-wrap: nowrap;     /* остаёмся в один ряд */
    gap: 6px;
    align-items: stretch;
  }

  .resume-card .card-actions .card-button,
  .card[data-type="resume"] .card-actions .card-button {
    flex: 1 1 33.333%;     /* поровну: 1/3 каждой */
    min-width: 0;          /* чтобы контент не распирал кнопку */
  }

  /* Кнопка "В избранное": шрифт 0 = скрыть подпись, оставить иконку */
  .resume-card .card-actions .button-favorite,
  .card[data-type="resume"] .card-actions .button-favorite {
    font-size: 0;          /* прячем текст */
    padding-left: 10px;    /* можно поджать/расширить при желании */
    padding-right: 10px;
    line-height: 1;
    text-overflow: clip;   /* на всякий случай */
  }

  /* Если внутри есть отдельный .icon/svg – вернём ему размер */
  .resume-card .card-actions .button-favorite .icon,
  .card[data-type="resume"] .card-actions .button-favorite .icon,
  .resume-card .card-actions .button-favorite svg,
  .card[data-type="resume"] .card-actions .button-favorite svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  /* Фоллбэк: если своей иконки нет, рисуем псевдо-элементом */
  .resume-card .card-actions .button-favorite::before,
  .card[data-type="resume"] .card-actions .button-favorite::before {
    content: "♡";
    font-size: 18px;
    display: inline-block;
    line-height: 1;
  }

  /* Состояние "добавлено в избранное" — делаем сердечко залитым.
     Подхватываем самые типовые классы состояний; лишние не мешают. */
  .resume-card .card-actions .button-favorite.active::before,
  .resume-card .card-actions .button-favorite.is-active::before,
  .resume-card .card-actions .button-favorite.added::before,
  .resume-card .card-actions .button-favorite--remove::before,
  .card[data-type="resume"] .card-actions .button-favorite.active::before,
  .card[data-type="resume"] .card-actions .button-favorite.is-active::before,
  .card[data-type="resume"] .card-actions .button-favorite.added::before,
  .card[data-type="resume"] .card-actions .button-favorite--remove::before {
    content: "❤";
  }
}
/* === /Resume narrow buttons === */

/* =======================================================================
   ГРАНИЦЫ КАРТОЧЕК: ЕДИНЫЕ ПЕРЕМЕННЫЕ + ПРИМЕНЕНИЕ
   Применяется к резюме (.resume-card / [data-type="resume"])
   и вакансиям (.vacancy-card / [data-type="vacancy"] / .cabinet-vacancy-card)
   во всех местах (index, candidates, cabinet, favorites)
   -----------------------------------------------------------------------
   Как настроить:
   --ku-resume-border-color  : цвет рамки резюме
   --ku-vacancy-border-color : цвет рамки вакансий
   --ku-resume-border-width  : толщина рамки резюме
   --ku-vacancy-border-width : толщина рамки вакансий
   ======================================================================= */

:root {
  /* ❗ Поменяй значения под свой бренд */
  --ku-resume-border-color: #07c9bf;   /* светло-серый/холодный для резюме */
  --ku-vacancy-border-color: #ec930c;  /* светло-серый/тёплый для вакансий */

  --ku-resume-border-width: 2px;
  --ku-vacancy-border-width: 2px;

  /* Если где-то рамку рисуют тенью — опционально можно обнулить тени */
  --ku-card-shadow-none: none;
}

/* ===== РЕЗЮМЕ ========================================================= */

/* База для карточек резюме: один набор селекторов на все страницы */
.resume-card,
.card[data-type="resume"] {
  border-style: solid !important;
  border-color: var(--ku-resume-border-color) !important;
  border-width: var(--ku-resume-border-width) !important;
  /* На случай, если «граница» сделана тенью — мягко убираем тени */
  box-shadow: var(--ku-card-shadow-none);
}

/* Иногда border задают на внутренних врапперах — подстрахуемся */
.resume-card .card,
.card[data-type="resume"] .card {
  border-color: var(--ku-resume-border-color) !important;
  border-width: var(--ku-resume-border-width) !important;
  border-style: solid !important;
}

/* ===== ВАКАНСИИ ======================================================= */

/* Основные карточки вакансий (candidates, index) */
.vacancy-card,
.card[data-type="vacancy"],
.card[data-type="task"] {
  border-style: solid !important;
  border-color: var(--ku-vacancy-border-color) !important;
  border-width: var(--ku-vacancy-border-width) !important;
  box-shadow: var(--ku-card-shadow-none);
}

/* Карточки вакансий в Кабинете: в коде встречается отдельный класс */
.cabinet-vacancy-card {
  border-style: solid !important;
  border-color: var(--ku-vacancy-border-color) !important;
  border-width: var(--ku-vacancy-border-width) !important;
  box-shadow: var(--ku-card-shadow-none) !important;
}

/* На случай, если где-то рамка повешена на вложенную .card */
.vacancy-card .card,
.card[data-type="vacancy"] .card,
.card[data-type="task"] .card,
.cabinet-vacancy-card .card {
  border-color: var(--ku-vacancy-border-color) !important;
  border-width: var(--ku-vacancy-border-width) !important;
  border-style: solid !important;
}

/* ===== СЕРВИСНЫЕ ПРАВИЛА (защита от «теней вместо рамок») ============ */
/* Если где-то тени визуально «подменяют» рамку — можно активировать: */
/*
.resume-card,
.card[data-type="resume"],
.vacancy-card,
.card[data-type="vacancy"],
.card[data-type="task"],
.cabinet-vacancy-card {
  box-shadow: none !important;
}
*/

/* =========================
   ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ ВЕРТИКАЛЬНЫХ ОТСТУПОВ
   — РЕЗЮМЕ (rc-*) и ВАКАНСИИ (vc-*)
   Меняй только значения в :root
   ========================= */
:root{
  /* --- РЕЗЮМЕ --- */
  --rc-pad-top:                 12px; /* 1) сверху до специальности */
  --rc-gap-title-city:           6px; /* 2) спец → город (внутри шапки) */
  --rc-gap-city-desc:            8px; /* 3) город → доп. информация */
  --rc-gap-desc-availability:    0px; /* 4) доп. инфо → доступен */
  --rc-gap-availability-exp:     0px; /* 5) доступен → опыт работы */
  --rc-gap-exp-actions:         12px; /* 6) опыт → блок кнопок */
  --rc-pad-bottom:              16px; /* 7) низ (после кнопок) */

  /* --- ВАКАНСИИ --- */
  --vc-pad-top:                 16px; /* 1) сверху до специальности */
  --vc-gap-title-experience:     6px; /* 2) спец → опыт работы */
  --vc-gap-experience-desc:      8px; /* 3) опыт → доп. информация */
  --vc-gap-desc-city:            2px; /* 4) доп. инфо → город */
  --vc-gap-city-salary:         0px; /* 5) город → плашка оплаты */
  --vc-pad-bottom:              16px; /* 6) низ (после кнопок/низа карточки) */
}

/* =========================
   РЕЗЮМЕ: ПРИМЕНЕНИЕ ПЕРЕМЕННЫХ
   Работает для .resume-card и [data-type="resume"] на всех страницах
   ========================= */
.resume-card,
.card[data-type="resume"]{
  padding-top: var(--rc-pad-top) !important;
  padding-bottom: var(--rc-pad-bottom) !important;
}

/* Шапка (заголовок + город): контролируем ЗАЗОР между строками */
.resume-card .card-header,
.card[data-type="resume"] .card-header{
  row-gap: var(--rc-gap-title-city) !important;   /* заголовок → город */
  margin-bottom: var(--rc-gap-city-desc) !important; /* город → доп. инфо */
}

/* Доп. информация → Доступен */
.resume-card .card-description,
.card[data-type="resume"] .card-description{
  margin-top: 0 !important;  /* базу гасим, дальше интервалы задаём явно */
}

/* Доступен: отступ от «доп. информации» */
.resume-card .card-availability,
.card[data-type="resume"] .card-availability{
  margin-top: var(--rc-gap-desc-availability) !important;
}

/* Опыт работы: отступ от «Доступен» */
.resume-card .card-experience,
.card[data-type="resume"] .card-experience{
  margin-top: var(--rc-gap-availability-exp) !important;
}

/* Блок кнопок: отступ от «Опыт работы» */
.resume-card .card-actions,
.resume-card .card-buttons,
.card[data-type="resume"] .card-actions,
.card[data-type="resume"] .card-buttons{
  margin-top: var(--rc-gap-exp-actions) !important;
}

/* =========================
   ВАКАНСИИ: ПРИМЕНЕНИЕ ПЕРЕМЕННЫХ
   Работает для .vacancy-card, [data-type="vacancy"], .card[data-type="task"],
   а также для .cabinet-vacancy-card (кабинет)
   ========================= */
.vacancy-card,
.card[data-type="vacancy"],
.card[data-type="task"],
.cabinet-vacancy-card{
  padding-top: var(--vc-pad-top) !important;
  padding-bottom: var(--vc-pad-bottom) !important;
}

/* Шапка вакансии (спец/город): отступ НИЖЕ шапки = спец → опыт */
.vacancy-card .card-header,
.card[data-type="vacancy"] .card-header,
.vacancy-card .vacancy-info,
.cabinet-vacancy-card .vacancy-info{
  margin-bottom: var(--vc-gap-title-experience) !important;
}

/* Опыт → доп. информация */
.vacancy-card .vacancy-experience,
.vacancy-card .card-experience,
.card[data-type="vacancy"] .vacancy-experience,
.card[data-type="vacancy"] .card-experience,
.cabinet-vacancy-card .vacancy-experience,
.cabinet-vacancy-card .card-experience{
  margin-top: 0 !important;
  /* сам опыт идёт сразу после шапки — отступ вниз не нужен */
}

.vacancy-card .vacancy-description,
.vacancy-card .card-description,
.card[data-type="vacancy"] .vacancy-description,
.card[data-type="vacancy"] .card-description,
.cabinet-vacancy-card .vacancy-description,
.cabinet-vacancy-card .card-description{
  margin-top: var(--vc-gap-experience-desc) !important;  /* опыт → доп. инфо */
}

/* Доп. информация → город.
   Если город остаётся внутри .card-header, этот отступ не сработает — тогда
   зазор регулируется через margin-bottom у .card-header (см. выше). */
.vacancy-card .card-location,
.card[data-type="vacancy"] .card-location,
.cabinet-vacancy-card .vacancy-location{
  margin-top: var(--vc-gap-desc-city) !important;
}

/* Город → плашка оплаты */
.vacancy-card .salary-badge,
.vacancy-card .vacancy-salary,
.card[data-type="vacancy"] .salary-badge,
.card[data-type="vacancy"] .vacancy-salary,
.cabinet-vacancy-card .salary-badge{
  margin-top: var(--vc-gap-city-salary) !important;
}

/* Низ (кнопки редактирования/архива) остаётся как есть —
   нижний зазор регулирует padding-bottom карточки через --vc-pad-bottom */

/* =========================================================
   RESUME: укорачиваем "Отправить в архив" -> "В архив"
   когда две кнопки располагаются 50/50 на узких экранах
   (карточки РЕЗЮМЕ только)
   ========================================================= */
@media (max-width: 420px) {
  /* Целимся в архивную кнопку:
     - как правило, это ПОСЛЕДНЯЯ кнопка в блоке;
     - если есть явные классы/атрибуты — тоже подхватываем. */
  .resume-card .card-buttons > .card-button:last-child,
  .resume-card .card-actions > .card-button:last-child,
  .resume-card .card-buttons > .button-archive,
  .resume-card .card-actions > .button-archive,
  .resume-card .card-buttons > [data-action="archive"],
  .resume-card .card-actions > [data-action="archive"] {
    position: relative;
    font-size: 0 !important;      /* прячем длинный текст без влияния на размеры */
    white-space: nowrap;
  }

  /* Рисуем короткую подпись */
  .resume-card .card-buttons > .card-button:last-child::after,
  .resume-card .card-actions > .card-button:last-child::after,
  .resume-card .card-buttons > .button-archive::after,
  .resume-card .card-actions > .button-archive::after,
  .resume-card .card-buttons > [data-action="archive"]::after,
  .resume-card .card-actions > [data-action="archive"]::after {
    content: "В архив";
    font-size: 14px;               /* подгони при необходимости под общий размер */
    font-weight: 500;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
  }

  /* Если внутри кнопки есть SVG-иконка — добавим небольшой отступ справа */
  .resume-card .card-buttons > .card-button:last-child svg,
  .resume-card .card-actions > .card-button:last-child svg,
  .resume-card .card-buttons > .button-archive svg,
  .resume-card .card-actions > .button-archive svg,
  .resume-card .card-buttons > [data-action="archive"] svg,
  .resume-card .card-actions > [data-action="archive"] svg {
    margin-right: 6px;
  }
}

/* ===================== FIX: "Отменить" в Истории ===================== */
/* 1) На всякий случай гасим любые прежние переименования
      по "последней кнопке" в карточках резюме: */
@media (max-width: 420px) {
  .resume-card .card-actions > .card-button:last-child,
  .resume-card .card-buttons > .card-button:last-child {
    font-size: inherit !important;
  }
  .resume-card .card-actions > .card-button:last-child::after,
  .resume-card .card-buttons > .card-button:last-child::after {
    content: none !important;
  }
}

/* 2) В "Истории откликов и приглашений" всегда показываем "Отменить" */
@media (max-width: 420px) {
  body.cabinet .history [data-type="resume"] .card-actions .btn-cancel,
  body.cabinet .history [data-type="resume"] .card-buttons .btn-cancel,
  body.cabinet .history [data-type="resume"] .card-actions .response-btn--withdraw,
  body.cabinet .history [data-type="resume"] .card-buttons .response-btn--withdraw {
    font-size: inherit !important;
  }
  body.cabinet .history [data-type="resume"] .card-actions .btn-cancel::after,
  body.cabinet .history [data-type="resume"] .card-buttons .btn-cancel::after,
  body.cabinet .history [data-type="resume"] .card-actions .response-btn--withdraw::after,
  body.cabinet .history [data-type="resume"] .card-buttons .response-btn--withdraw::after {
    content: none !important;
  }
}

/* 3) Укорачиваем ТОЛЬКО настоящую архивную кнопку на узких экранах */
@media (max-width: 420px) {
  /* выбираем явные селекторы архивной кнопки */
  .resume-card .card-actions > .button-archive,
  .resume-card .card-buttons > .button-archive,
  .resume-card .card-actions > [data-action="archive"],
  .resume-card .card-buttons > [data-action="archive"] {
    position: relative;
    font-size: 0 !important;         /* скрываем длинный текст */
    white-space: nowrap;
  }
  .resume-card .card-actions > .button-archive::after,
  .resume-card .card-buttons > .button-archive::after,
  .resume-card .card-actions > [data-action="archive"]::after,
  .resume-card .card-buttons > [data-action="archive"]::after {
    content: "В архив";
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
  }
  /* если внутри есть иконка, чуть отступим */
  .resume-card .card-actions > .button-archive svg,
  .resume-card .card-buttons > .button-archive svg,
  .resume-card .card-actions > [data-action="archive"] svg,
  .resume-card .card-buttons > [data-action="archive"] svg {
    margin-right: 6px;
  }
}

/* ========================================================================
   CABINET → История откликов/приглашений
   РЕЗЮМЕ: две кнопки (Связаться + Отменить) ВСЕГДА в одну строку, 50/50
   Опознаём такие карточки по наличию .response-btn--withdraw / [data-action="withdraw"]
   ======================================================================== */

/* Контейнер с кнопками — горизонтальный flex без переноса */
.resume-card:has(.response-btn--withdraw) .card-buttons,
.resume-card:has([data-action="withdraw"]) .card-buttons,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons,
.resume-card:has(.response-btn--withdraw) .card-actions,
.resume-card:has([data-action="withdraw"]) .card-actions,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions {
  display: flex !important;
  flex-direction: row !important;      /* ← ключевой момент: в один РЯД */
  flex-wrap: nowrap !important;         /* не переносить */
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;

  /* отключаем возможную мобильную grid/column-разметку */
  grid-template-areas: unset !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  grid-auto-flow: unset !important;
}

/* Две равные доли — тянем именно ОБЁРТКИ кнопок */
.resume-card:has(.response-btn--withdraw) .card-buttons > *,
.resume-card:has([data-action="withdraw"]) .card-buttons > *,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons > *,
.resume-card:has(.response-btn--withdraw) .card-actions > *,
.resume-card:has([data-action="withdraw"]) .card-actions > *,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Сами кнопки внутри обёрток — на полную ширину обёртки */
.resume-card:has(.response-btn--withdraw) .card-buttons .card-button,
.resume-card:has(.response-btn--withdraw) .card-buttons .btn,
.resume-card:has(.response-btn--withdraw) .card-buttons .response-btn,
.resume-card:has(.response-btn--withdraw) .card-buttons .button-contact,
.resume-card:has(.response-btn--withdraw) .card-buttons a,
.resume-card:has(.response-btn--withdraw) .card-buttons button,
.resume-card:has([data-action="withdraw"]) .card-buttons .card-button,
.resume-card:has([data-action="withdraw"]) .card-buttons .btn,
.resume-card:has([data-action="withdraw"]) .card-buttons .response-btn,
.resume-card:has([data-action="withdraw"]) .card-buttons .button-contact,
.resume-card:has([data-action="withdraw"]) .card-buttons a,
.resume-card:has([data-action="withdraw"]) .card-buttons button,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons .card-button,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons .btn,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons .response-btn,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons .button-contact,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons a,
.resume-card:has([data-action="cancel"][data-response-id]) .card-buttons button,
.resume-card:has(.response-btn--withdraw) .card-actions .card-button,
.resume-card:has(.response-btn--withdraw) .card-actions .btn,
.resume-card:has(.response-btn--withdraw) .card-actions .response-btn,
.resume-card:has(.response-btn--withdraw) .card-actions .button-contact,
.resume-card:has(.response-btn--withdraw) .card-actions a,
.resume-card:has(.response-btn--withdraw) .card-actions button,
.resume-card:has([data-action="withdraw"]) .card-actions .card-button,
.resume-card:has([data-action="withdraw"]) .card-actions .btn,
.resume-card:has([data-action="withdraw"]) .card-actions .response-btn,
.resume-card:has([data-action="withdraw"]) .card-actions .button-contact,
.resume-card:has([data-action="withdraw"]) .card-actions a,
.resume-card:has([data-action="withdraw"]) .card-actions button,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions .card-button,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions .btn,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions .response-btn,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions .button-contact,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions a,
.resume-card:has([data-action="cancel"][data-response-id]) .card-actions button {
  width: 100% !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Tabs (мобайл): во втором табе показываем только "Вакансии"
   Применяется в любых местах, где есть .tabs с двумя .tab
   (кандидаты, создание карточек). JS не трогаем.
   ========================================================= */
@media (max-width: 480px) {
  /* Скрываем оригинальный текст второго таба */
  .tabs .tab:nth-child(2),
  .tabs .tab:nth-child(2) span {
    font-size: 0 !important;          /* прячем надпись полностью */
    letter-spacing: 0 !important;
    white-space: nowrap;
  }

  /* Рисуем короткую подпись */
  .tabs .tab:nth-child(2)::after {
    content: "Вакансии";
    font-size: 16px;                   /* вернуть читаемый размер */
    font-weight: 500;
    line-height: 1;
    color: inherit;                    /* сохраняем цвет (в т.ч. .active) */
    display: inline-block;
    white-space: nowrap;
  }

  /* Если внутри таба есть иконка/svg слева — оставим маленький зазор */
  .tabs .tab:nth-child(2) svg,
  .tabs .tab:nth-child(2) .icon {
    margin-right: 6px;
  }
}

/* INDEX-ONLY • RESUME CARDS • MOBILE
   Две строки кнопок в резюме на главной при любых состояниях */
@media (max-width: 480px) {

  /* Контейнер кнопок → всегда GRID 2x2 */
  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "main main"
      "contact fav" !important;
    gap: 8px !important;

    /* Нейтрализуем прежние flex-хаки */
    flex-wrap: initial !important;
    flex-direction: initial !important;
    align-items: stretch !important;
    justify-content: initial !important;
  }

  /* Верхняя строка целиком: invite/cancel/withdraw */
  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons)
  :is([data-action="invite"], [data-action="cancel"], [data-action="withdraw"], [data-action="cancel-invite"]) {
    grid-area: main !important;
    width: 100% !important;
  }

  /* Нижняя строка: слева — Связаться, справа — Избранное */
  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons) [data-action="contact"] {
    grid-area: contact !important;
  }
  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons) .button-favorite {
    grid-area: fav !important;
  }

  /* Если кнопки завернуты в обёртки — назначим области и им */
  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons) > *:has(:is(
    [data-action="invite"], [data-action="cancel"],
    [data-action="withdraw"], [data-action="cancel-invite"]
  )) { grid-area: main !important; }

  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons) > *:has([data-action="contact"]) {
    grid-area: contact !important;
  }

  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons) > *:has(.button-favorite) {
    grid-area: fav !important;
  }

  /* Сброс наследованных flex-свойств у прямых детей контейнера */
  #specialistsList :is(.resume-card, .card[data-type="resume"])
  :is(.card-actions, .card-buttons) > * {
    flex: initial !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ===================== STICKY HEADER + BACK • ALL PAGES (CSS-only) ===================== */
/* Вставить в КОНЕЦ cards-actions-tune.css */

:root{
  --page-side: 16px;                 /* боковой отступ контента/карточек */
  --header-btn-size: 35px;           /* размер чёрного квадрата */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Липкая шапка на всех внутренних страницах.
   Тянем на 100vw, обнуляем предыдущие паддинги/марджины, задаём чёткую высоту. */
.header-nav,
.page-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;

  /* Полная ширина viewport'а, независимо от контейнера */
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* Высота шапки: safe-area + верхний зазор (= боковому) + 35px квадрат */
  height: calc(var(--safe-top) + var(--page-side) + var(--header-btn-size)) !important;

  /* Переопределяем базовые стили страниц */
  display: grid !important;
  grid-template-rows: calc(var(--safe-top) + var(--page-side)) var(--header-btn-size) !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: center !important;

  padding: 0 var(--page-side) 0 var(--page-side) !important;
  margin-bottom: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Заголовок — по центру и на одной вертикальной оси со стрелкой (во 2-й строке) */
.header-nav .page-title,
.page-header .page-title,
.header-nav h1, .header-nav h2, .header-nav h3,
.page-header h1, .page-header h2, .page-header h3{
  grid-row: 2 !important;
  grid-column: 1 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

/* Чёрный квадрат = сама ссылка .back-button (не внутренний span) */
.header-nav .back-button,
.page-header .back-button{
  grid-row: 2 !important;          /* та же «ось», что и заголовок */
  grid-column: 1 !important;
  justify-self: start !important;  /* прижать к левому внутреннему краю */
  width: var(--header-btn-size) !important;
  height: var(--header-btn-size) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #3071e9 !important;     /* острые углы, без теней */
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;

  /* скрыть возможный текст внутри ссылки */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  user-select: none !important;
  touch-action: manipulation !important;

  /* стрелка — фоном на ВЕСЬ квадрат */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>\
<path fill='%23FFFFFF' d='M330.7 96L288 53.3 96 245.3l192 192L330.7 394 182 245.3 330.7 96z'/>\
</svg>") !important;
}

/* Внутренний <span class="back-arrow"> (на create/candidates) скрываем,
   чтобы он не влиял на размеры/выравнивание */
.page-header .back-button .back-arrow{ display: none !important; }

/* Небольшой «дыхательный» зазор после шапки — если нужен, можно отключить */
.header-nav + *, .page-header + *{ margin-top: 8px; }

/* --- Локальные подстройки, если на отдельных страницах другой боковой отступ ---
   body.create       { --page-side:16px; }
   body.candidates   { --page-side:16px; }
   body.cabinet      { --page-side:16px; }
   body.favorites    { --page-side:16px; }
*/

/* --- Как заменить встроенную стрелку на свой PNG/SVG ---
   Пример override (раскомментируйте строки ниже и укажите путь к файлу):

   .header-nav .back-button,
   .page-header .back-button {
     background-image: url("/img/Стрелка.png");
   }
*/