:root {
  --bg: #0a0a0a;
  --bg-panel: #141414;
  --bg-panel-2: #1c1c1c;
  --red: #d81f26;
  --red-dark: #a11318;
  --white: #f5f5f5;
  --gray: #9a9a9a;
  --border: #2a2a2a;
  --radius: 6px;
  --container: 1180px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--white);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  width: 100%;
  /* Длинные русские слова без пробелов (заголовки типа "ПРОФПЕРЕПОДГОТОВКА") иначе не
     переносятся и вылезают за экран на мобильном — глобальный защитный перенос для ВСЕГО текста */
  overflow-wrap: break-word;
  word-break: break-word;
}

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--white);
  margin: 0 0 .6em;
  overflow-wrap: break-word;
  word-break: break-word;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */
.site-header {
  background: #000;
  border-bottom: 2px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-link:hover { text-decoration: none; opacity: .85; }
.logo-img { width: 48px; height: 48px; }
.logo-text {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: .08em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  flex-wrap: wrap;
}

.nav-group { position: relative; display: flex; align-items: center; }
.nav-top {
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
}
.nav-link {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.nav-link:hover, .nav-top:hover { color: var(--red); text-decoration: none; }

.nav-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 0;
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
/* :hover-раскрытие — только для устройств, которые ДЕЙСТВИТЕЛЬНО поддерживают hover (мышь).
   На тач-экранах :hover после тапа "залипает" и не снимается — список оставался открытым
   ДАЖЕ когда JS корректно убирал класс .open, потому что это правило матчилось само по себе. */
@media (hover: hover) and (pointer: fine) {
  .nav-group:hover .nav-drop { display: block; }
}
.nav-group.open .nav-drop { display: block; }
.nav-drop a {
  display: block;
  padding: 8px 16px;
  color: var(--white);
  font-size: .9rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.nav-drop a:hover { background: var(--bg-panel-2); color: var(--red); text-decoration: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.burger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-link-mobile-only { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .03em;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-accent { background: var(--red); color: #fff; }
.btn-accent:hover { background: var(--red-dark); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); text-decoration: none; }
.btn-sm { padding: 6px 14px; font-size: .8rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #000 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 80px 0 60px;
  text-align: center;
  overflow: hidden;
}

/* Декоративный фон hero: приглушённая эмблема + пара "граф"-линий — чисто для атмосферы,
   не элемент навигации/партнёрства, поэтому aria-hidden и вне потока контента. */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Свечение и сам логотип — РАЗНЫЕ слои (два <img> друг на друге). Это важно: если
   светимость делать через drop-shadow на одном элементе с общим opacity:.1, opacity
   гасит одинаково и лого, и тень — свечения не видно вообще. Поэтому .hero-fx-emblem-glow —
   отдельная размытая (blur) копия картинки с собственной, более высокой прозрачностью,
   лежит ПОД чётким лого и создаёт ореол независимо от того, насколько тусклый сам контур. */
.hero-fx-emblem {
  position: absolute;
  top: 50%;
  width: 260px;
  height: 260px;
  opacity: .12;
}
.hero-fx-emblem-glow {
  opacity: .45;
  filter: blur(16px);
}
.hero-fx-emblem-left {
  left: 120px;
  transform: translateY(-50%) rotate(-50deg);
}
.hero-fx-emblem-right {
  right: 120px;
  transform: translateY(-50%) rotate(50deg);
}
.hero-fx-graph {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 70%;
  opacity: .12;
}
.hero-fx-graph polyline {
  fill: none;
  stroke: var(--red);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hero-fx-graph circle {
  fill: var(--red);
}
.hero .container { position: relative; z-index: 1; }

/* Тот же декор — на странице заявки и контактов. БЕЗ overflow:hidden на самой секции
   (в отличие от .hero) — иначе обрежется абсолютно позиционированный выпадающий список
   "Желаемая специальность", который может выходить за пределы секции. */
.apply-section, .contacts-section { position: relative; }
.apply-section .container, .contacts-section .container { position: relative; z-index: 1; }

/* На «Контактах» карточки «Реквизиты»/«Обратная связь» шире, чем hero, — стандартный
   left/right:120px ставил эмблемы слишком близко к центру, они утыкались в карточки.
   Только для ПК-версии этой страницы (по просьбе пользователя), мобильная раскладка
   (см. @media max-width:700px ниже) не трогается. */
@media (min-width: 701px) {
  .contacts-section .hero-fx-emblem-left { left: 60px; }
  .contacts-section .hero-fx-emblem-right { right: 60px; }
}

/* На «Подать заявку» форма плотная и тёмная (сплошные поля инпутов) — стандартная
   прозрачность .12/.45 эмблемы там тонет почти до полной невидимости (было замечено
   пользователем по скриншоту). Поднимаем видимость именно на этой странице, десктоп и
   мобильная — двойной класс-селектор специфичнее одиночного, поэтому переопределяет
   и базовое правило, и мобильный @media-блок ниже независимо от порядка в файле. */
.apply-section .hero-fx-emblem { opacity: .24; }
.apply-section .hero-fx-emblem-glow { opacity: .7; }

/* Одна эмблема (не пара left/right, как у hero/apply/contacts) для простых текстовых
   страниц без "hero" (Кто мы / Команда / Документы / Отчёты и т.п.) — раньше там вообще
   не было декора. На десктопе стоит слева вверху страницы, лёгким bleed под контейнер
   (как и остальной сайт делает намеренно). На мобильном — по образцу hero: по центру,
   без поворота, позади заголовка. */
.content-fx-section { position: relative; overflow: hidden; }
.content-fx-section .container { position: relative; z-index: 1; }
.content-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.content-fx-emblem {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 190px;
  height: 190px;
  opacity: .14;
  transform: rotate(-18deg);
}
.content-fx-emblem-glow { opacity: .4; filter: blur(14px); }

/* Плейсхолдер поля "Как с Вами связаться" на узких экранах обрезался (не помещалось целиком,
   пропадала последняя буква) — анимированная прокрутка тексту placeholder технически недоступна
   (это не настоящий DOM-узел, к нему нельзя применить CSS-анимацию скролла), поэтому решение —
   просто уменьшить размер шрифта плейсхолдера на мобильном, чтобы текст помещался целиком. */
@media (max-width: 480px) {
  #contact::placeholder { font-size: .82rem; }
}

@media (max-width: 700px) {
  .content-fx-emblem {
    top: 4px;
    left: 50%;
    width: 150px;
    height: 150px;
    opacity: .12;
    transform: translateX(-50%);
  }
  .content-fx-emblem-glow { opacity: .55; filter: blur(18px); }
}

@media (max-width: 700px) {
  /* Раньше эмблема на мобильном стояла с left:-50px, специально "утекая" за левый край
     экрана (уместно на десктопе, где это художественный bleed) — но на узких экранах
     .hero обрезает её overflow:hidden, и логотип выглядит буквально обрезанным напополам.
     Уменьшенный размер + left, посчитанный так, чтобы повёрнутый на 50° квадрат целиком
     помещался внутри контейнера (140px * 1.41 ≈ 197px bbox, left:45px даёт запас с обеих сторон). */
  /* По просьбе пользователя: на мобильном лого больше не "утекает" в угол под углом —
     стоит ровно по центру по горизонтали, без поворота (как щит), позади заголовка,
     верхним краем чуть выше текста, чтобы "голова" арбалета выглядывала над строками. */
  .hero-fx-emblem { width: 230px; height: 230px; top: 116px; opacity: .12; }
  .hero-fx-emblem-left { left: 50%; transform: translate(-50%, -50%); }
  /* Контур на мобильном стоит ровно за текстом заголовка (не в свободном углу, как на
     десктопе) — на тёмном, но не абсолютно чёрном фоне героя сам силуэт при той же
     прозрачности, что на десктопе, тонет визуально. Заметно поднимаем и базовую
     видимость контура, и яркость/растяжку ореола, иначе на телефоне свечения не видно. */
  .hero-fx-emblem-glow { opacity: .8; filter: blur(22px); }
  .hero-fx-emblem-right { display: none; }
  .hero-fx-graph { width: 80%; height: 50%; }
  /* На реальном телефоне (с адресной строкой браузера, ещё не свёрнутой скроллом) кнопки
     "Подать заявку"/"Узнать больше о фонде" оказывались ниже видимой области — весь hero
     был слишком высоким. Сжимаем вертикальные отступы, не трогая сам текст. */
  .hero { padding: 32px 0 24px; }
  .hero h1 { margin: 0 auto .15em; }
  .hero .motto { margin-bottom: .4em; }
  .hero p.lead { margin: 0 auto .8em; }
}
.hero h1 {
  font-size: 2.4rem;
  max-width: 900px;
  margin: 0 auto .3em;
}
.hero .motto {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 1.2em;
  padding: 10px 28px;
  z-index: 0;
}
.hero .motto::before {
  content: '';
  position: absolute;
  inset: -14px -28px;
  background: radial-gradient(ellipse at center, rgba(216,31,38,.22) 0%, rgba(216,31,38,.08) 55%, transparent 80%);
  filter: blur(2px);
  z-index: -1;
  pointer-events: none;
}
.hero p.lead {
  color: var(--gray);
  max-width: 700px;
  margin: 0 auto 2em;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Sections & cards ---------- */
section { padding: 60px 0; }
section.alt { background: var(--bg-panel); }

.grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.grid-3 > * { flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
.grid-2 > * { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .15s;
}
.card:hover { border-color: var(--red); }
.card h3 { font-size: 1.05rem; margin-bottom: .5em; }
.card p { color: var(--gray); margin: 0; }

.news-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: .5em; flex-wrap: wrap; }
.news-card-head h3 { margin-bottom: 0; flex: 1; min-width: 0; }
.news-card-date { margin-left: auto; white-space: nowrap; color: var(--gray); font-size: .78rem; flex-shrink: 0; }
.news-card-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
}

.news-filter-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 32px; }
.news-tab {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--gray);
  font-size: .9rem;
  transition: border-color .15s, color .15s;
}
.news-tab:hover { border-color: var(--red); color: var(--white); text-decoration: none; }
.news-tab-active { border-color: var(--red); color: var(--white); background: var(--bg-panel-2); }

.badge-forum {
  display: inline-block;
  font-size: .72rem;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 2px 8px;
  margin-bottom: .5em;
}

.news-group-line { color: var(--gray); font-size: .85rem; font-weight: 600; margin: -.5em 0 1em; }

.revision-alert {
  display: inline-block;
  text-decoration: none;
  filter: drop-shadow(0 0 4px rgba(255, 153, 0, .8));
  animation: revision-pulse 1.4s ease-in-out infinite;
}
@keyframes revision-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.channel-flag { display: inline-block; margin-left: 6px; font-size: .8rem; vertical-align: middle; }
.channel-flag summary { cursor: pointer; border-radius: 999px; padding: 2px 10px; list-style: none; }
.channel-flag summary::-webkit-details-marker { display: none; }
.channel-flag-pending summary { border: 1.5px solid #e0a600; color: #e0a600; animation: revision-pulse 1.4s ease-in-out infinite; }
.channel-flag-origin summary { border: 1.5px solid #3a8bd8; color: #3a8bd8; }
.channel-flag-changed summary { border: 1.5px solid var(--red); color: var(--red); animation: revision-pulse 1.4s ease-in-out infinite; }
.channel-flag-danger { display: inline-block; margin-left: 6px; font-size: .8rem; vertical-align: middle; border: 1.5px solid var(--red); color: var(--red); border-radius: 999px; padding: 2px 10px; }
tr.history-row-channel-direct { background: rgba(216, 31, 38, .08); }
tr.history-row-channel-direct td:first-child { border-left: 3px solid var(--red); }
.channel-flag-body {
  margin-top: 6px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  max-width: 360px;
  white-space: normal;
}

.partner-logo-box {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.partner-logo-box img { max-width: 160px; max-height: 80px; width: auto; height: auto; object-fit: contain; }

.section-title { text-align: center; margin-bottom: 40px; }

.trust-carousel { display: flex; align-items: center; gap: 12px; }
.trust-viewport { flex: 1; overflow-x: auto; scrollbar-width: none; }
.trust-viewport::-webkit-scrollbar { display: none; }
.trust-track { display: flex; gap: 20px; width: max-content; }
.trust-item {
  flex-shrink: 0;
  width: 220px;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.trust-logo-box { height: 110px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.trust-logo-box img { max-width: 180px; max-height: 110px; width: auto; height: auto; object-fit: contain; }
.trust-item h4 { font-size: .95rem; margin: 0 0 6px; }
.trust-item p { color: var(--gray); font-size: .8rem; margin: 0; }
.trust-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-arrow:hover { border-color: var(--red); color: var(--red); }

@media (max-width: 700px) {
  .trust-arrow { display: none; }
}

.channel-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: center; }
.channel-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 160px;
}
.channel-logo { height: 110px; width: 110px; object-fit: contain; flex-shrink: 0; }
.channel-logo-pair { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 110px; height: 110px; flex-shrink: 0; }
.channel-logo-pair img { height: 51px; width: 110px; object-fit: contain; }
.channel-info { flex: 1; min-width: 0; }
.channel-info h3 { font-size: 1.05rem; margin: 0 0 6px; }
.channel-info p { color: var(--gray); font-size: .85rem; margin: 0 0 12px; }
.channel-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* Основной канал/бот Фонда — выделен размером, плавной градиентной рамкой и её свечением */
.channel-card-featured {
  padding: 26px;
  min-height: 180px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box,
    linear-gradient(120deg, var(--red), #e58a76, var(--red-dark), #e58a76, var(--red)) border-box;
  background-size: 100% 100%, 400% 400%;
  animation: channel-border-flow 9s ease-in-out infinite, channel-border-glow 4s ease-in-out infinite;
}
.channel-card-featured .channel-logo { height: 130px; width: 130px; }
.channel-card-featured .channel-info h3 { font-size: 1.35rem; }
.channel-card-featured .channel-info p { font-size: .92rem; }
@keyframes channel-border-flow {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}
@keyframes channel-border-glow {
  0%, 100% { box-shadow: 0 0 7px 0 rgba(216, 31, 38, .25), 0 0 16px 0 rgba(216, 31, 38, .1); }
  50% { box-shadow: 0 0 14px 2px rgba(216, 31, 38, .45), 0 0 26px 4px rgba(229, 138, 118, .2); }
}
@media (prefers-reduced-motion: reduce) { .channel-card-featured { animation: none; box-shadow: 0 0 12px 1px rgba(216, 31, 38, .3); } }

@media (max-width: 900px) {
  .channel-cards { grid-template-columns: 1fr; }
}

/* ---------- Forms ---------- */
form.box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  max-width: 640px;
  margin: 0 auto;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  background: #0f0f0f;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 16px;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field .error { color: var(--red); font-size: .82rem; margin-top: 4px; }
.field-hint { display: block; color: var(--gray); font-size: .8rem; margin-top: 4px; min-height: 1.2em; }

.specialty-wrap { position: relative; }
.specialty-dropdown {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  z-index: 50;
}
.specialty-dropdown[hidden] { display: none; }
.specialty-option { padding: 10px 14px; font-size: .92rem; cursor: pointer; }
.specialty-option:hover, .specialty-option:active { background: var(--bg-panel-2); color: var(--red); }
.field-checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 6px;
  border-radius: var(--radius);
  transition: background-color .15s, box-shadow .15s;
}
.field-checkbox input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; }
.field-checkbox label { font-weight: 400; font-size: .85rem; color: var(--gray); line-height: 1.5; }
.field-checkbox label p { margin: 0; }
.field-checkbox.field-invalid { background-color: rgba(220, 38, 38, .12); box-shadow: 0 0 0 1px var(--red); }

.consent-warning {
  color: var(--red);
  background: rgba(220, 38, 38, .1);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 600;
  margin: 10px 0 16px;
  text-align: center;
}

.apply-section { padding: 30px 0; }
.apply-section .field { margin-bottom: 12px; }

.apply-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 640px);
  grid-template-areas: "faq form";
  gap: 32px;
  justify-content: center;
  align-items: start;
}
.apply-layout-faq { grid-area: faq; }
.apply-layout-form { grid-area: form; }

@media (max-width: 900px) {
  .apply-layout { grid-template-columns: 1fr; grid-template-areas: "form" "faq"; gap: 24px; }
  .faq-block { position: static; }
}

.faq-block { position: sticky; top: 20px; }
.faq-title { font-size: 1rem; margin: 0 0 12px; }
.faq-item {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.faq-item summary {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--white);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+ '; color: var(--red); font-weight: 800; }
.faq-item[open] summary::before { content: '– '; }
.faq-item p { color: var(--gray); font-size: .84rem; margin: 8px 0 0; }

.phone-input-group {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  transition: box-shadow .15s;
}
.phone-input-group .phone-code {
  width: auto;
  flex: 0 0 80px;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 16px;
  padding: 6px 8px;
}
.phone-input-group .phone-code option { color: #111; background: #fff; }
.phone-input-group .phone-number {
  width: 100%;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--white);
  font-size: 16px;
  padding: 6px 8px;
}
.phone-input-group .phone-number:focus, .phone-input-group .phone-code:focus { outline: none; }
.phone-input-group.field-invalid { box-shadow: 0 0 0 1px var(--red); }

.tracking-code {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .05em;
  background: var(--bg-panel-2);
  border: 2px dashed var(--red);
  padding: 12px 24px;
  border-radius: var(--radius);
  color: var(--red);
}

/* ---------- Status badges ---------- */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
}
.status-new { background: #3a3a00; color: #ffe066; }
.status-sb_check { background: #003a3a; color: #66d9ef; }
.status-approved { background: #0f3a0f; color: #6ee76e; }
.status-rejected { background: #3a0f0f; color: #ff6b6b; }
.status-needs_revision { background: #3a2e00; color: #c9a227; }

/* Подсветка строк в /admin/users — по последнему решению по заявкам этого телефона.
   Приоритет: отказ (красный) > одобрение (зелёный) > отложено (жёлтый) > без подсветки. */
.app-glow-rejected { background: linear-gradient(90deg, rgba(255,107,107,.16), rgba(255,107,107,.03)); box-shadow: inset 3px 0 0 0 #ff6b6b; }
.app-glow-approved { background: linear-gradient(90deg, rgba(110,231,110,.16), rgba(110,231,110,.03)); box-shadow: inset 3px 0 0 0 #6ee76e; }
.app-glow-postponed { background: linear-gradient(90deg, rgba(255,224,102,.18), rgba(255,224,102,.03)); box-shadow: inset 3px 0 0 0 #ffe066; }

/* Тред переписки по заявке на /apply/status (заявитель) */
.status-revision-hint { color: #c9a227; font-size: .88rem; margin: 12px 0; }
.status-thread-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.status-thread-header-row h4 { margin: 0; font-size: .95rem; }
.status-thread { margin: 10px 0; display: flex; flex-direction: column; gap: 10px; }
.status-thread h4 { margin: 0 0 4px; font-size: .95rem; }
.status-thread-item { border-radius: 6px; padding: 10px 12px; font-size: .88rem; }
.status-thread-admin { background: rgba(216, 31, 38, .08); border: 1px solid rgba(216, 31, 38, .25); }
.status-thread-applicant { background: rgba(91, 141, 239, .08); border: 1px solid rgba(91, 141, 239, .25); }
.status-thread-date { color: var(--gray); font-size: .72rem; margin-left: 8px; }
.status-thread-item p { margin: 4px 0 0; white-space: pre-line; }
.status-reply-hint { color: #c9a227; font-size: .8rem; margin: 8px 0 0; }
.status-reply-waiting { color: #2a7a2a; font-size: .9rem; margin-top: 16px; }
.status-reply-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.status-reply-form textarea { width: 100%; font-family: inherit; }
.status-training { background: #1a1a5a; color: #a3a3ff; }
.status-employed { background: var(--red-dark); color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  background: #000;
  border-top: 2px solid var(--red);
  padding: 50px 0 20px;
  margin-top: 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
}
.footer-col h4 { font-size: .9rem; margin-bottom: .8em; }
.footer-col a { display: block; color: var(--gray); font-size: .88rem; margin-bottom: 8px; }
.footer-col a:hover { color: var(--red); text-decoration: none; }
.footer-col p { color: var(--gray); font-size: .85rem; margin: 0 0 6px; }
.footer-logo { width: 60px; height: 60px; margin-bottom: 10px; }
.footer-motto { color: var(--red); font-weight: 700; font-style: italic; }

.footer-col-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; }

.social-icons { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }
.social-icon {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.social-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
a.social-icon:hover { transform: scale(1.08); box-shadow: 0 0 0 3px var(--red); }
.footer-bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--gray);
  font-size: .8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-bottom a { color: var(--gray); }
.footer-bottom a:hover { color: var(--red); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #000;
  border-top: 2px solid var(--red);
  padding: 16px 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 200;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; color: var(--gray); font-size: .85rem; max-width: 700px; }

/* ---------- Admin ---------- */
.admin-wrap { padding: 40px 0; }
/* Маленький вращающийся ключ — фоновая декорация панели, не мешает работе (позади контента,
   pointer-events:none), виден в свободном углу справа сверху на любой странице админки.
   Опущен чуть ниже верхнего края и стал заметнее (выше opacity + подсветка внутри самой 3D-сцены,
   см. admin-wrench-mini.js) — раньше терялся на чёрном фоне. */
.admin-mini-wrench { position: fixed; top: 56px; right: 22px; width: 240px; height: 240px; z-index: 0; opacity: .25; pointer-events: none; }
@media (max-width: 900px) { .admin-mini-wrench { width: 160px; height: 160px; top: 46px; right: 10px; opacity: .2; } }

/* Логотипы-водяные знаки на дашборде — приглушённо, с наклоном, подальше от меню и карточек статистики.
   z-index:0 (не отрицательный!) — отрицательный z-index на fixed-элементе рисуется ПОД обычным
   контентом страницы, а не поверх фона, как казалось — из-за этого лого выглядели перекрытыми.
   Вагнер крутится ОЧЕНЬ медленно (полный оборот за 4 минуты — движение почти незаметно на глаз,
   не мельтешит). ОРКЛаб (силуэт арбалета) плавает медленно и НЕ по правильной синусоиде — две
   независимые волны с разными (не кратными друг другу) периодами по X и Y одновременно дают
   траекторию, которая не выглядит механически зацикленной за разумное время наблюдения. */
.dashboard-watermarks { position: fixed; right: 60px; bottom: 24px; z-index: 0; display: flex; gap: 28px; align-items: flex-end; opacity: .2; filter: grayscale(1); pointer-events: none; }
.dashboard-watermarks img:first-child { height: 170px; width: auto; animation: watermark-spin 240s linear infinite; }
.dashboard-watermarks img:last-child { height: 150px; width: auto; animation: watermark-float-y 13s ease-in-out infinite, watermark-float-x 17s ease-in-out infinite, watermark-float-rot 21s ease-in-out infinite; }
@keyframes watermark-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes watermark-float-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes watermark-float-x { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }
@keyframes watermark-float-rot { 0%, 100% { rotate: 7deg; } 50% { rotate: 2deg; } }
@media (max-width: 900px) { .dashboard-watermarks { display: none; } }
@media (prefers-reduced-motion: reduce) { .dashboard-watermarks img { animation: none; } }

.admin-nav { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-end; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.admin-nav-group { display: flex; flex-direction: column; gap: 8px; }
.admin-nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); font-weight: 600; }
.admin-nav-group-exit { margin-left: auto; }
.admin-menu { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
.admin-menu a {
  padding: 8px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font-size: .85rem;
  white-space: nowrap;
}
.admin-menu a:hover { border-color: var(--red); text-decoration: none; }
.admin-menu a.admin-menu-exit { border-color: rgba(216, 31, 38, .35); color: var(--gray); }
.admin-menu a.admin-menu-exit:hover { color: var(--white); border-color: var(--red); }
table.admin-table { width: 100%; border-collapse: collapse; }
table.admin-table th, table.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: .88rem;
}
/* Тот же класс бага, что уже чинили на «Документах» (см. .docs-req-table ниже) — глобальный
   word-break:break-word ломает КОРОТКИЕ слова посреди буквы в узких ячейках («СТРАНА» → «СТРАН/А»,
   «заявки» → «заявк/и»). Обычный перенос по пробелам работать не перестаёт — просто не рвёт
   отдельное слово посередине. Кнопки/заголовки — вообще без переноса (они однострочные по смыслу). */
table.admin-table th, table.admin-table td { word-break: normal; overflow-wrap: normal; }
table.admin-table th, table.admin-table .btn { white-space: nowrap; }
table.admin-table th { color: var(--gray); text-transform: uppercase; font-size: .75rem; }

/* Ссылки-редиректы — компактные строки-карточки (не тяжёлая таблица с инпутами в каждой ячейке,
   но и не раздутые боксы — важно уместить много ссылок на экране без лишней прокрутки). */
.rlinks-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.rlink-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.rlink-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rlink-code {
  font-family: 'Courier New', monospace;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.rlink-pin {
  font-size: .65rem;
  color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  white-space: nowrap;
}
.rlink-who { font-size: .74rem; color: var(--gray); white-space: nowrap; }
.rlink-stats { margin-left: auto; display: flex; gap: 12px; font-size: .74rem; color: var(--gray); white-space: nowrap; }
.rlink-stats b { color: var(--white); font-size: .85rem; }
.rlink-readonly {
  flex: 1 1 220px;
  font-size: .8rem;
  color: var(--gray);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 9px;
  word-break: break-all;
}
.rlink-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.rlink-form input[type=text] {
  padding: 5px 9px;
  background: #0f0f0f;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--white);
  font-size: .8rem;
}
.rlink-form input[name=code] { width: 90px; flex: 0 0 auto; }
.rlink-form input[name=target_url] { flex: 2 1 200px; min-width: 0; }
.rlink-form input[name=label] { flex: 1 1 140px; min-width: 0; }
.rlink-form input[type=text]:focus { outline: none; border-color: var(--red); }
.rlink-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rlink-archive-toggle { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.rlink-archive-toggle > summary { cursor: pointer; color: var(--gray); font-size: .76rem; }
.rlink-create-box {
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.rlink-create-box[open] { border-style: solid; }
.rlink-create-box > summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.rlink-create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; align-items: end; font-size: .85rem; }

/* Реквизиты на странице «Документы» — глобальный word-break:break-word (см. body в начале
   файла, нужен против длинных слов без пробелов) в узкой карточке ломает даже обычные
   подписи ("ЮРИДИЧЕСКИЙ" → "ЮРИДИЧЕ/СКИЙ") посреди слова. Здесь подписи короткие и должны
   просто не переноситься — колонка сама расширится под самую длинную. */
table.docs-req-table th {
  word-break: normal;
  overflow-wrap: normal;
  padding-right: 20px;
}

/* Колонки страницы «Документы» (СОР + реквизиты) — раньше пропорции 26%/70% сидели
   на инлайн-style, который перебивал мобильный media-query ".grid-2 > *" и колонки
   не стакались на телефоне. Теперь пропорции здесь, media-query ниже их спокойно override-ит. */
.docs-col-cert { flex: 1 1 26%; max-width: 26%; }
.docs-col-req { flex: 1 1 70%; max-width: 70%; }

table.app-table th, table.app-table td { padding: 6px 10px; font-size: .8rem; }

.btn-xs { padding: 3px 8px; font-size: .72rem; }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.app-inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.app-row-compact { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.app-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.app-status-dot[data-status="new"] { background: #8a8a8a; }
.app-status-dot[data-status="sb_check"] {
  background: #ffcc00;
  box-shadow: 0 0 5px 1px rgba(255, 204, 0, .7);
}
.app-status-dot[data-status="postponed"] { background: #5b8def; }
.app-status-dot[data-status="approved"] { background: #3ecf6e; }
.app-status-dot[data-status="needs_revision"] { background: #c9a227; box-shadow: 0 0 5px 1px rgba(201, 162, 39, .7); }

/* Тред комментариев по заявке (админ ↔ заявитель, "На доработку") */
.app-thread-row td { padding: 0 10px 10px; border-top: none; }
.app-thread-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.app-thread-details { flex: 1; min-width: 0; }
.app-thread-row summary { cursor: pointer; color: var(--red); font-size: .8rem; padding: 4px 0; }
.app-thread { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.app-thread-item { border-radius: 6px; padding: 8px 10px; font-size: .82rem; }
.app-thread-admin { background: rgba(216, 31, 38, .08); border: 1px solid rgba(216, 31, 38, .25); }
.app-thread-applicant { background: rgba(91, 141, 239, .08); border: 1px solid rgba(91, 141, 239, .25); }
.app-thread-date { color: var(--gray); font-size: .72rem; margin-left: 8px; }
.app-thread-item p { margin: 4px 0 0; white-space: pre-line; }
.app-thread-empty { color: var(--gray); font-size: .8rem; }
.app-thread-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.app-thread-form textarea { flex: 1; font-family: inherit; }
.app-comment-inline textarea { width: 100%; font-family: inherit; margin-top: 4px; }

th .app-sort-select {
  display: block;
  margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: var(--radius);
  padding: 3px 5px;
  font-size: .7rem;
  text-transform: none;
  font-weight: 400;
}
.app-status-select, .app-reason-select, .app-reason-custom,
.app-reject-template, .app-reject-custom, .app-program-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: var(--radius);
  padding: 3px 5px;
  font-size: .74rem;
  max-width: 120px;
}
.app-reject-inline, .app-program-inline { display: inline-flex; gap: 5px; align-items: center; }
.app-reject-inline[hidden], .app-program-inline[hidden] { display: none; }
.app-status-select { transition: outline .15s, box-shadow .15s; }
.app-status-select.app-status-pending {
  outline: 2px solid #e0a600;
  box-shadow: 0 0 0 3px rgba(224, 166, 0, .2);
}
.app-status-submit.app-status-pending:not(:disabled) {
  background: #e0a600;
  color: #1a1200;
  border-color: #e0a600;
  animation: app-status-pulse 1.4s ease-in-out infinite;
}
@keyframes app-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 166, 0, .5); }
  50% { box-shadow: 0 0 0 5px rgba(224, 166, 0, 0); }
}

.app-closed { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.app-closed-badge {
  color: #ff4d4d;
  font-weight: 700;
  font-size: .74rem;
  background: rgba(255, 77, 77, .1);
  border: 1px solid rgba(255, 77, 77, .4);
  border-radius: var(--radius);
  padding: 2px 6px;
  white-space: nowrap;
}
.app-closed-reason { color: var(--gray); font-size: .74rem; max-width: 200px; }
.app-reason-form { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 4px; }
.app-reason-form[hidden] { display: none; }

.app-section-title { margin-top: 2.2em; font-size: 1.05rem; }
.app-review-title { color: #e0a600; }
.app-section-hint { color: var(--gray); font-size: .82rem; margin-top: -8px; }
.app-flagged-badge {
  color: #e0a600;
  font-size: .7rem;
  border: 1px solid rgba(224, 166, 0, .5);
  border-radius: var(--radius);
  padding: 1px 6px;
  margin-left: 6px;
  white-space: nowrap;
}

.app-sortable-th { cursor: pointer; user-select: none; }
.app-sort-arrow { color: var(--red); font-size: .7rem; }

.app-archive-level { margin-top: 8px; }
.app-archive-level > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
}
.app-archive-level > summary::-webkit-details-marker { display: none; }
.app-archive-level > summary::before { content: '▸ '; color: var(--red); }
.app-archive-level[open] > summary::before { content: '▾ '; }
.app-archive-month, .app-archive-day { margin-left: 16px; }

.faq-admin-group { margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--border); }
.faq-admin-group:first-of-type { margin-top: 1em; border-top: none; padding-top: 0; }
.faq-admin-group-title {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.faq-admin-count {
  font-size: .72rem;
  font-weight: 400;
  color: var(--gray);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
}
.faq-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
}
.faq-admin-item {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.faq-admin-item summary {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--white);
  list-style: none;
}
.faq-admin-item summary::-webkit-details-marker { display: none; }
.faq-admin-item summary::before { content: '▸ '; color: var(--red); font-weight: 800; }
.faq-admin-item[open] summary::before { content: '▾ '; }
.faq-admin-item.faq-admin-add {
  background: transparent;
  border: 1.5px dashed var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.faq-admin-item.faq-admin-add summary {
  color: var(--red);
  font-weight: 700;
  text-align: center;
}
.faq-admin-item.faq-admin-add summary::before { content: ''; }
.faq-admin-item.faq-admin-add[open] { align-items: flex-start; justify-content: flex-start; }
.faq-admin-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.faq-admin-body .field { margin-bottom: 0; }
.faq-admin-actions { display: flex; gap: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 60px); overflow-y: auto; background: #000; flex-direction: column; align-items: stretch; padding: 16px 20px; border-bottom: 2px solid var(--red); z-index: 99; }
  .main-nav.open { display: flex; }
  /* На десктопе .nav-group — горизонтальный флекс (заголовок + выпадашка рядом).
     На мобильном это ломает вёрстку: подменю встаёт СПРАВА от заголовка, а не под ним,
     и отступ "гуляет" от длины текста заголовка. Тут группа — вертикальный блок. */
  .nav-group { display: block; width: 100%; }
  .nav-top { width: 100%; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; }
  .nav-caret { display: inline-block; transition: transform .15s; }
  .nav-group.open .nav-caret { transform: rotate(180deg); }
  .nav-drop { position: static; display: none; border: none; background: none; padding-left: 16px; box-shadow: none; }
  .nav-group.open .nav-drop { display: block; }
  .nav-drop a { padding: 8px 0; }
  .nav-link { display: block; width: 100%; padding: 10px 0; }
  .nav-link-mobile-only { display: block; order: -1; border-bottom: 1px solid var(--border); margin-bottom: 6px; padding-bottom: 10px; }
  .burger { display: block; }
  .header-inner { gap: 8px; padding: 10px 12px; }
  .logo-text { display: none; }
  .header-actions { gap: 6px; }
  .header-actions .btn { padding: 7px 9px; font-size: .68rem; letter-spacing: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 > *, .grid-2 > * { flex-basis: 100%; max-width: 100%; }
  .hero h1 { font-size: 1.8rem; }
  /* Заголовки страниц (не hero) — длинные слова типа "ПРОФПЕРЕПОДГОТОВКА"/"ТРУДОУСТРОЙСТВО"
     в верхнем регистре при обычном размере переносятся уродливо (1-2 буквы на новой строке).
     Меньше шрифт — слово либо влезает целиком, либо переносится не настолько криво. */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  /* Страница «Документы»: на мобильном колонки стекуются в полную ширину (см. .grid-2 > *
     выше) — свидетельство о регистрации после этого может расти намного крупнее старого
     потолка 220px, а реквизиты в узкой карточке выглядели тесно/уродливо крупным шрифтом. */
  .doc-cert-thumb-btn { max-width: 320px; }
  table.docs-req-table th, table.docs-req-table td { font-size: .78rem; padding: 7px 8px; }
  table.docs-req-table th { padding-right: 10px; }
}

/* Узкие экраны (360-400px, самый частый класс Android) — даже 1.8rem/1.6rem недостаточно
   уменьшены для длинных слов вроде "БЛАГОТВОРИТЕЛЬНЫЙ"/"ПРОФПЕРЕПОДГОТОВКА": слово почти
   влезает в строку, но не целиком, и браузер переносит его посимвольно ("БЛАГОТВОРИТЕЛЬН/ЫЙ").
   Меньший шрифт даёт словам однозначно поместиться на строке целиком. */
@media (max-width: 400px) {
  .hero h1 { font-size: 1.5rem; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.1rem; }
}

/* ---------- Галерея новости: миниатюры + лайтбокс по клику ---------- */
.news-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.news-gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.news-gallery-item img,
.news-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s;
}
.news-gallery-item:hover img,
.news-gallery-item:hover video { transform: scale(1.05); }
.news-gallery-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  pointer-events: none;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 30px;
  cursor: zoom-out;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay img,
.lightbox-overlay video {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Миниатюра свидетельства о регистрации на странице «Документы» — клик открывает
   zoom-просмотрщик (см. .doc-zoom-* ниже), не просто увеличенную картинку. */
.doc-cert-thumb-btn {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 10px auto 0;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  position: relative;
  transition: transform .15s ease, filter .15s ease;
}
.doc-cert-thumb-btn:hover,
.doc-cert-thumb-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.doc-cert-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.doc-cert-thumb-hint {
  display: block;
  padding: 6px 4px 0;
  font-size: .78rem;
  color: var(--gray);
  text-align: center;
}

/* Zoom-просмотрщик документа — отдельный от обычного лайтбокса галереи, т.к. тут
   нужен настоящий масштаб (пинч на телефоне, бегунок на ПК), а не просто img в 90vh. */
.doc-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0,0,0,.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 14px;
}
.doc-zoom-overlay[hidden] { display: none; }
.doc-zoom-stage {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 68vh;
  overflow: hidden;
  touch-action: none;
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
}
.doc-zoom-stage img {
  position: absolute;
  top: 50%; left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
}
.doc-zoom-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}
.doc-zoom-icon { flex: 0 0 auto; line-height: 1; }
.doc-zoom-icon-sm { font-size: .85rem; opacity: .6; }
.doc-zoom-icon-lg { font-size: 1.5rem; opacity: .9; }
.doc-zoom-slider {
  flex: 1 1 auto;
  accent-color: var(--red);
  cursor: pointer;
}
.doc-zoom-hint {
  color: var(--gray);
  font-size: .8rem;
  text-align: center;
  max-width: 420px;
  margin: 0;
}

/* Партнёры — компактные поля прямо в строке таблицы (см. views/admin/partners.php) */
.partner-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #0f0f0f;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--white);
  font-size: .82rem;
}
.partner-input:focus { outline: none; border-color: var(--red); }
.partner-input:disabled { opacity: .4; }
.partner-input[type="file"] { padding: 5px 6px; font-size: .75rem; }
.partner-input[type="checkbox"] { width: 18px; height: 18px; padding: 0; }
.partner-input[type="number"] { text-align: center; }

.partner-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--red);
  border-radius: 6px;
  background: #0f0f0f;
  color: var(--white);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.partner-file-btn:hover { background: var(--bg-panel-2); }
/* Строка редактирования (фон var(--bg-panel-2)) обрывалась «в никуда» — стандартный
   border-bottom:1px solid var(--border) (#2a2a2a) технически есть, но на фоне #1c1c1c
   почти не виден (контраст слишком низкий + суб-пиксельная толщина при масштабировании
   браузера). Даём подсвеченной строке собственную видимую рамку в var(--gray). */
.partner-highlight-row td { border-top: 1px solid var(--gray) !important; border-bottom: 1px solid var(--gray) !important; }
.partner-file-btn-label { overflow: hidden; text-overflow: ellipsis; }
.partner-file-btn input[type="file"] { display: none; }
.partner-file-btn.is-disabled { opacity: .4; cursor: default; pointer-events: none; border-color: var(--border); }

/* Подсветка незаполненного обязательного поля при клиентской валидации формы —
   плавный градиентный пульс 10 сек (широкий разброс тени) вместо статичной рамки/нативного tooltip браузера. */
@keyframes field-missing-pulse {
  0%   { box-shadow: 0 0 8px 2px rgba(220,38,38,.85); }
  50%  { box-shadow: 0 0 34px 16px rgba(220,38,38,.15); }
  100% { box-shadow: 0 0 8px 2px rgba(220,38,38,0); }
}
.field-missing-pulse {
  animation: field-missing-pulse 1s ease-out 10;
  border-color: var(--red) !important;
}

/* Плашка «создать новое» — тот же приём (градиентный пульс), но ЗЕЛЁНЫЙ и БЕЗ авто-затухания
   (в отличие от field-missing-pulse это не ошибка, которую надо один раз заметить и забыть —
   это постоянный признак «этой группы/хештега ещё нет на сайте, появится после сохранения»,
   должен быть виден всё время, пока вариант не пересохранён/не устарел). */
@keyframes field-new-pulse {
  0%   { box-shadow: 0 0 8px 2px rgba(34,197,94,.85); }
  50%  { box-shadow: 0 0 22px 10px rgba(34,197,94,.15); }
  100% { box-shadow: 0 0 8px 2px rgba(34,197,94,.85); }
}
.field-new-pulse { animation: field-new-pulse 2s ease-in-out infinite; border-color: #22c55e !important; border-radius: 6px; }
.field-new-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  background: rgba(34,197,94,.18); color: #22c55e; font-size: .72rem; font-weight: 600; vertical-align: middle;
}
.field-new-hint { display: block; margin: 2px 0 0 0; color: var(--gray); font-size: .78rem; }

/* Карточка вакансии в админке (/admin-x/jobs) — вертикальный набор полей, не таблица
   (условия — длинный textarea, в табличную ячейку не помещается адекватно). */
.parts-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; background: var(--bg-panel); }
.parts-card-header { margin-bottom: 8px; overflow: hidden; }
.parts-count { color: var(--gray); font-size: .78rem; margin-left: 8px; }
.parts-count-over { color: #e05; font-weight: bold; }
.parts-dropzone {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px;
  border: 1px dashed var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px;
}
.parts-dropzone-over { border-color: var(--red); background: rgba(216, 31, 38, .06); }
.parts-thumb { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; cursor: grab; border: 1px solid var(--border); flex-shrink: 0; }
.parts-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parts-thumb-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: #0f0f0f; }
.parts-thumb-dragging { opacity: .4; }
.parts-flags { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: .82rem; }
.parts-editor textarea { width: 100%; font-family: inherit; }
.admin-job-row { margin-bottom: 14px; }
.admin-job-field { margin-bottom: 10px; }
.admin-job-field label { display: block; margin-bottom: 4px; font-size: .85rem; color: var(--gray); }
.admin-job-field textarea { width: 100%; font-family: inherit; }
.admin-job-field select { width: 100%; padding: 8px; background: #0f0f0f; color: var(--white); border: 1px solid var(--border); border-radius: 6px; }
.job-channel-fields { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.job-channel-fields label { font-size: .85rem; color: var(--white); margin: 0; }

/* Всплывающая подсказка над незаполненным полем ("* — обязательное поле") */
.field-missing-tip {
  position: absolute;
  z-index: 10000;
  background: var(--red);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
  pointer-events: none;
}

/* Превью специальностей прямо в карточке программы на /programs — чтобы не тыкать в каждую по отдельности */
.program-specialty-note { color: var(--gray); font-size: .82rem; margin: 10px 0 6px; }
.program-specialty-preview { margin: 0 0 14px; padding-left: 18px; font-size: .88rem; }
.program-specialty-preview li { margin-bottom: 2px; }
.program-specialty-preview a, .program-card-details a { color: var(--red); text-decoration: underline; }
.program-specialty-preview a:hover, .program-card-details a:hover { color: var(--red-dark); }

/* Карточки программ на /programs — одинаковая высота, кнопки прижаты к низу, чтобы список
   не растягивал одну карточку сильнее других (см. баг 2026-07-24: карточка "Трудоустройство"
   с 8 пунктами обрезала кнопку "Подать заявку" за пределами экрана). */
.program-card { display: flex; flex-direction: column; }
.program-card-desc { font-size: .85rem; color: var(--gray); margin-bottom: 10px; }
.program-card-actions { margin-top: auto; padding-top: 10px; }
.program-card-actions .btn { display: block; text-align: center; }
/* Подробнее (слева) + Подать заявку (справа) в одну строку — заголовок карточки больше не
   кликабелен сам по себе (пользователь его не замечал), явная кнопка "Подробнее" очевиднее.
   На мобильном узкая кнопка + длинное слово "ПОДРОБНЕЕ" (uppercase) может перенестись на
   вторую строку — без явного flex-центрирования текст внутри кнопки "прилипает" к верху
   (block-элемент с несколькими строками не центрируется по вертикали сам по себе). */
.program-card-actions-row { display: flex; align-items: stretch; gap: 8px; }
.program-card-actions-row .btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}

/* Раскрывающийся список специальностей внутри карточки программы (details/summary) —
   компактнее, чем отдельная кнопка-переход: карточка не растёт, пока пользователь не откроет. */
.program-card-details { margin: 2px 0 10px; font-size: .85rem; }
.program-card-details summary { cursor: pointer; color: var(--red); list-style: none; }
.program-card-details summary::-webkit-details-marker { display: none; }
.program-card-details summary::after { content: ' ▾'; }
.program-card-details[open] summary::after { content: ' ▴'; }
.program-card-details ul { margin: 8px 0 0; padding-left: 18px; color: var(--white); }
.program-card-details li { margin-bottom: 2px; }

.programs-feedback-widget {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.programs-feedback-widget p { margin-bottom: 12px; color: var(--gray); }

/* Блок "Реальные кейсы" — намеренно НЕ похож на FAQ-аккордеон и не .card с красной акцентной
   рамкой (та ассоциируется с "Подать заявку"/CTA) — золотистая рамка как маркер "это факт,
   не вопрос-ответ и не призыв к действию". */
.real-cases-block {
  margin-top: 2em;
  padding: 18px 22px;
  border: 1px solid #c9a227;
  border-radius: var(--radius);
  background: rgba(201, 162, 39, .06);
}
.real-cases-title { margin: 0 0 6px; color: #c9a227; }
.real-cases-subtitle { margin: 0 0 12px; color: var(--gray); font-size: .85rem; }
.real-cases-list { margin: 0; padding-left: 20px; }
.real-cases-list li { margin-bottom: 12px; }
.real-case-meta { font-size: .78rem; color: var(--gray); margin-top: 2px; }
.real-case-meta a { color: #c9a227; }

/* Карточка вакансии (/jobs) — выжимка свёрнута по умолчанию (details/summary), чтобы
   длинный структурированный текст не занимал много места, пока не откроешь. */
.vacancy-card { display: flex; flex-direction: column; }
.vacancy-partner-logo { display: block; max-height: 78px; max-width: 208px; object-fit: contain; margin-top: 10px; }
.vacancy-news-widgets { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.vacancy-news-widget {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); font-size: .82rem; color: var(--white);
}
.vacancy-news-widget:hover { border-color: var(--red); text-decoration: none; }
.vacancy-news-widget-date { color: var(--gray); font-size: .72rem; white-space: nowrap; }
.vacancy-summary { margin-top: 10px; font-size: .92rem; }
.vacancy-summary p { margin: 0 0 12px; }
.vacancy-summary .vacancy-heading { font-weight: 700; color: var(--white); margin-bottom: 6px; }
.vacancy-summary ul { margin: 0 0 12px; padding-left: 20px; }
.vacancy-summary li { margin-bottom: 4px; }
.vacancy-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vacancy-meta-date { color: var(--gray); font-size: .78rem; }

@media (max-width: 640px) {
  .vacancy-meta { flex-direction: column; align-items: flex-start; }
  .vacancy-meta .btn { width: 100%; text-align: center; }
  .real-cases-block, .vacancy-card, .program-card { padding: 14px 16px; }
}