/*
 * Фирменная тема Треста КХМ: яркий оранжевый и свежий голубой
 * заменяют стандартные цвета в neon_kxm.css. Этот файл загружается
 * поверх базовой темы и переопределяет переменные и основные
 * компоненты интерфейса (карточки, кнопки, меню). Для стабильности
 * всё оформлено в собственной таблице.
 */

:root{
  /* тёмная палитра с фирменными акцентами */
  --bg:#0A192F;
  --panel:#071E3D;
  --panel-2:#05264B;
  --text:#ECF1F6;
  --muted:#8FAACA;
  --brand:#FF8C00;
  --accent:#00A4DB;
  --ok:#2ECC71;
  --warn:#F1C40F;
  --bad:#E74C3C;
  --line:rgba(255,255,255,.08);
  --ring:rgba(0,164,219,.55);
  /* дополнительные переменные для карточек и рамок */
  --card-bg:#071E3D;
  --card-border:#073A6D;
  /* Цвета для логотипа (в шапке). Оттенки выбираем так, чтобы
     быть хорошо заметными на тёмном фоне. При желании можно
     подправить эти переменные без затрагивания остальных цветов. */
  /* Цвета логотипа в шапке. Более светлые оттенки делают иконку
     заметнее на тёмном фоне. При необходимости можно ещё усилить
     контраст. */
  /* Обновляем цвета логотипа: вместо холодных оттенков используем
     градиент яркого оранжевого. Так логотип компании будет
     заметнее на фоне анимационного прямоугольника. */
  --logo-start:#ffb347;   /* светло‑оранжевый */
  --logo-end:#ff7f00;     /* насыщенный оранжевый */

  /* --- Типографика ---
     Используем CSS‑переменные для заголовков, чтобы добиться гармонии между
     размером шрифта заголовков и основного текста. Эти значения можно
     легко корректировать для разных устройств. */
  --fs-xl:32px; /* размер для заголовков h1 */
  --fs-lg:26px; /* размер для заголовков h2 */
  --fs-md:20px; /* размер для заголовков h3 */
  /*
   * Дополнительные размеры: переменные для h4/h5 и базового текста.
   * Значения подобраны так, чтобы гармонировать с основными заголовками и
   * обеспечивать достаточный контраст. Вы можете легко изменить эти
   * значения, не нарушая общий масштаб.
   */
  --fs-h4:18px;
  --fs-h5:16px;
  --fs-base:15px;
  --fs-small:14px;

  /* Управление межбуквенным интервалом (letter‑spacing) для различных
     заголовков. Небольшой положительный интервал улучшает читаемость
     крупных заголовков и задаёт характер фирменного стиля. */
  --ls-xl:0.6px;
  --ls-lg:0.5px;
  --ls-md:0.4px;
  --ls-h4:0.3px;
  --ls-h5:0.2px;
}

/* фон страницы с глубокой синей текстурой */
body{
  /*
   * Фон сайта. Чтобы придать всем страницам более глубокий и живой вид,
   * используем несколько больших радиальных градиентов, напоминающих
   * оформление экрана логина. Первый градиент — мягкое голубое свечение в правом
   * верхнем углу; второй — тёплый оранжевый акцент внизу слева. Внутренний
   * линейный градиент плавно переходит между основными оттенками палитры.
   */
  /* Устанавливаем единый шрифт и размеры для всего сайта. В качестве
     базового размера используем переменную --fs-base, которую можно
     изменить глобально. Межстрочный интервал оставляем 1.5 для
     комфортного чтения. */
  font-family:'Inter','Roboto',sans-serif;
  font-size:var(--fs-base);
  line-height:1.5;
  background:
    radial-gradient(1200px 900px at 75% 20%, rgba(16,190,254,.12), transparent 60%),
    radial-gradient(1200px 900px at 20% 80%, rgba(255,140,0,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--panel) 55%, var(--panel-2));
}

/*
 * Дополнительный анимированный фон. Используем псевдоэлемент ::before для тела,
 * чтобы повторить эффект неоновых волн со страницы логина. Этот элемент
 * размещён под контентом (z-index: -1) и не перехватывает события.
 */
body::before{
  content:"";
  position:fixed;
  inset:-4vmax;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1200px 400px at 70% 30%, rgba(16,190,254,.18), transparent 60%),
    radial-gradient(900px 300px at 15% 70%, rgba(30,161,255,.14), transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(16,190,254,.08) 0 10deg, transparent 10deg 20deg);
  filter:blur(20px) saturate(140%);
  animation:flowBg 30s linear infinite;
}
@keyframes flowBg{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(1.5%, -1%, 0) rotate(180deg)}
  100%{transform:translate3d(0,0,0) rotate(360deg)}
}

/*
 * Навигационная панель: увеличиваем высоту и добавляем современный эффект размытия.
 * Изменённые стили перекрывают базовую тему, создавая плавное стеклянное ощущение.
 */
/* Темная стеклянная шапка с переливом */
.kxm-nav{
  position:sticky;
  top:0;
  z-index:1000;

  /* размытие фона и усиление насыщенности */
  backdrop-filter:saturate(200%) blur(16px);

  /* тёмный градиент: от почти чёрно-синего к чуть более светлому и обратно */
  background:linear-gradient(270deg,
      rgba(7,25,50,0.88),      /* глубокий синий, почти чёрный */
      rgba(7,25,50,0.75),      /* чуть светлее — создаёт объём */
      rgba(7,25,50,0.88));     /* возвращаемся к тёмному */
  background-size:400% 400%;
  animation:liquidHeader 20s linear infinite;

  /* тонкая светлая линия и более мощная тень для отделения от контента */
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 20px rgba(0,0,0,.45);
}

/* Анимация для перелива в шапке */
@keyframes liquidHeader{
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}


/* Расширяем контейнер в шапке на всю ширину и убираем auto‑отступы.
   По умолчанию класс .container задаёт max-width:1200px и margin:0 auto,
   что центрирует навигацию. Здесь мы отменяем эти ограничения только
   для навигационной панели: она растягивается на 100%, начинает
   отступать лишь на 16 px от краёв и оставляет больше места под кнопки. */
.kxm-nav .container{
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 56px;
  padding-right: 16px;
}

/* Контейнер для элементов навигации: больше вертикального отступа и расстояния между элементами */
.kxm-nav-inner{
  display:flex;
  align-items:center;
  gap:32px;
  padding:18px 0;
}
/* Логотип: увеличенный размер и яркое неоновое свечение */
/*
 * Лого в шапке. Ранее здесь выводился текст "KXM" с анимацией. Теперь
 * внутри контейнера размещается изображение логотипа (logo.ico), поэтому
 * стили адаптированы: фон-градиент создаёт фирменную подложку, сам
 * логотип отображается как картинка с небольшими скруглениями и
 * дополнительным свечением. Анимация убрана, чтобы не отвлекать.
 */
.kxm-brand .logo{
  /* увеличиваем размер логотипа для лучшей видимости */
  /* увеличиваем размер контейнера логотипа для лучшей видимости */
  width:55px;
  height:55px;
  border-radius:15px;
  /* используем фирменные цвета логотипа вместо оранжевого/синего квадрата */
  background:linear-gradient(135deg,var(--logo-start),var(--logo-end));
  display:flex;
  justify-content:center;
  align-items:center;
  /* усиливаем свечение вокруг логотипа */
  box-shadow:0 0 8px var(--logo-start),0 0 16px var(--logo-end);
  /* добавляем тонкую светлую рамку, чтобы выделить логотип на фоне */
  border:2px solid rgba(255,255,255,.25);
  /* анимация: плавный переход градиента и пульсирование света */
  background-size:200% 200%;
  animation:logoPulse 8s infinite alternate;
  /* без текста нет нужды в размерах шрифта и цвете */
}
/* Сам логотип: вписывается в контейнер и получает мягкую тень */
.kxm-brand .logo img{
  width:50px;
  height:50px;
  border-radius:10px;
  display:block;
  /* мягкое свечение, основанное на цветах логотипа */
  filter: drop-shadow(0 0 2px rgba(255,255,255,.25)) drop-shadow(0 0 6px var(--logo-end));
}
/* Название компании рядом с логотипом */
.kxm-brand div:last-child{
  /* Увеличиваем размер текста для подписи «ИТ‑портал Трест Коксохиммонтаж»
     и используем современный шрифт. Теперь текст крупнее и заметнее
     относительно логотипа. */
  font-size:24px;
  line-height:1.35;
  font-family:'Segoe UI Semibold','Inter',system-ui,sans-serif;
  font-weight:600;
  /* Добавляем неоновое свечение к названию портала. Анимация
     меняет интенсивность тени, создавая эффект мягкого мерцания. */
  text-shadow:0 0 4px var(--brand),0 0 8px var(--accent);
  animation:kxmHeaderGlow 8s infinite ease-in-out;
}
/* Навигационные кнопки — жидкое стекло с переливом */
.kxm-links a{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:14px;
  font-size:15px;
  color:var(--text);
  text-decoration:none;
  /* плавный стеклянный перелив: градиент движется по горизонтали */
  background:linear-gradient(270deg,
      rgba(0,164,219,.28),
      rgba(255,255,255,.08),
      rgba(0,164,219,.28));
  background-size:400% 400%;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 0 12px rgba(0,164,219,.25),
              0 0 20px rgba(0,164,219,.15);
  animation:liquidGlass 8s ease-in-out infinite;
  transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s;
}

.kxm-links a:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 0 16px rgba(0,164,219,.35),
              0 0 28px rgba(0,164,219,.25);
  border-color:var(--brand);
  color:var(--brand);
  text-decoration:none;
}

.kxm-links a.active{
  /* активная кнопка имеет более насыщенный перелив и усиленную тень */
  background:linear-gradient(270deg,
      rgba(0,164,219,.45),
      rgba(255,255,255,.10),
      rgba(0,164,219,.45));
  border-color:var(--brand);
  color:var(--brand);
  box-shadow:inset 0 0 16px rgba(0,164,219,.4),
              0 0 28px rgba(0,164,219,.3);
  outline:none;
}

/* Анимация для стеклянных навигационных кнопок.
   Она плавно сдвигает градиент, создавая эффект "жидкого стекла" с переливом. */
@keyframes liquidGlass{
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}


/*
 * Адаптивные стили для навигации на мобильных устройствах.
 * При уменьшении ширины экрана элементы навигации выстраиваются вертикально,
 * уменьшаются отступы и размеры шрифтов. Это позволяет сохранить компактность шапки
 * и удобство навигации на телефонах и планшетах.
 */
@media (max-width: 768px) {
  /* Меняем направление flex-контейнера на столбец и уменьшаем отступы */
  .kxm-nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }
  /* Логотип и название: немного уменьшаем размеры */
  .kxm-brand .logo {
    width: 55px;
    height: 55px;
    font-size: 16px;
  }
  .kxm-brand div:last-child {
    font-size: 18px;
  }
  /* Ссылки меню: уплотняем и позволяем переноситься на новую строку */
  .kxm-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .kxm-links a {
    padding: 8px 10px;
    font-size: 14px;
  }
}

/* --- Общие стили для элементов select и option на всём портале --- */
select,
option{
  background:var(--panel-2);
  color:var(--text);
}

/* Ссылка "Назад на портал" в форме заявки: увеличенный шрифт и акцентный цвет */
.back-link{
  font-size:18px;
  font-weight:600;
  color:var(--brand);
  text-decoration:none;
  display:inline-block;
  margin-bottom:12px;
}
.back-link:hover{
  text-decoration:underline;
}
select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--ring);
}


/* ---------- Универсальные кнопки ---------- */
/* Класс .btn применяется на различных страницах портала (формы заявок,
   поисковая строка инструкций, фильтры). Здесь мы задаём стеклянный фон,
   плавные анимации и отчётливый контур, чтобы кнопки были более заметны.
   Эти правила переопределяют базовые стили из neon_kxm.css. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .1s,box-shadow .2s;
  backdrop-filter:saturate(150%) blur(6px);
}
.btn:hover{
  /* при наведении не только изменяем цвет, но и слегка увеличиваем кнопку и
     добавляем свечение, создавая эффект "живой" кнопки */
  background:rgba(255,255,255,.16);
  border-color:var(--brand);
  color:var(--brand);
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 6px 18px rgba(0,164,219,.25),0 4px 12px rgba(255,140,0,.2);
  text-decoration:none;
}
.btn:active{
  transform:translateY(1px) scale(0.98);
}

/* Карточки на главной: жидкое стекло с плавным переливом */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:16px;
  border-radius:16px;
  /* стеклянный фон: прозрачный градиент с анимированным переливом */
  background:linear-gradient(270deg,
      rgba(0,164,219,.14),
      rgba(255,255,255,.05),
      rgba(0,164,219,.14));
  background-size:400% 400%;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px) saturate(180%);
  box-shadow:inset 0 0 12px rgba(0,164,219,.15),
              0 4px 16px rgba(0,164,219,.15);
  animation:liquidGlass 20s linear infinite;
  transition:box-shadow .3s,border-color .3s,transform .2s;
}

/* Усиленный эффект наведения для карточек */
.card:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: var(--brand); /* ярко-оранжевый контур */
  /* многослойный box-shadow: внутренняя и внешняя оранжевые тени + мягкий голубой акцент */
  box-shadow:
    inset 0 0 24px rgba(255,140,0,.50),      /* внутреннее оранжевое свечение */
    0 12px 36px rgba(255,140,0,.45),          /* основная оранжевая "аура" вокруг карточки */
    0 8px 28px rgba(0,164,219,.35);           /* лёгкий голубой отблеск для глубины */
}


/* Анимация для стеклянных элементов: используйте один раз, если её ещё нет */
@keyframes liquidGlass{
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* Внутри карточек блок .actions с кнопкой располагаем внизу,
   чтобы все карточки были одинаковой высоты и кнопки выстраивались
   по одной линии. */
.card .actions{
  margin-top:auto;
}

/* метки и теги */
/* Перекраска текста бейджей и тегов на фирменный оранжевый для лучшей читаемости */
.badge,.tag{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,164,219,.1);
  color:var(--brand);
}

/* === Глобальная шкала заголовков ===
   Используем CSS‑переменные для управления размером h1–h3. Это позволяет
   согласованно масштабировать крупные заголовки и основной текст. */
h1{
  font-size:var(--fs-xl);
  margin-top:0.4em;
  margin-bottom:0.6em;
  line-height:1.25;
  /* небольшой межбуквенный интервал и более тяжёлый вес для главного заголовка */
  letter-spacing:var(--ls-xl);
  font-weight:600;
}
h2{
  font-size:var(--fs-lg);
  margin-top:0.3em;
  margin-bottom:0.5em;
  line-height:1.3;
  letter-spacing:var(--ls-lg);
  font-weight:550;
}
h3{
  font-size:var(--fs-md);
  margin-top:0.3em;
  margin-bottom:0.5em;
  line-height:1.35;
  letter-spacing:var(--ls-md);
  font-weight:500;
}

/* Дополнительные заголовки: h4 и h5. Используем переменные размера
   и межбуквенного интервала. Средний вес делает подзаголовки менее
   доминирующими, но хорошо читаемыми. */
h4{
  font-size:var(--fs-h4);
  margin-top:0.3em;
  margin-bottom:0.4em;
  line-height:1.4;
  letter-spacing:var(--ls-h4);
  font-weight:500;
}
h5{
  font-size:var(--fs-h5);
  margin-top:0.3em;
  margin-bottom:0.3em;
  line-height:1.4;
  letter-spacing:var(--ls-h5);
  font-weight:500;
}

/* Параграфы и мелкий текст. Базовый размер управляется переменной
   --fs-base, а для дополнений и подписи используем --fs-small. */
p{
  font-size:var(--fs-base);
  margin-top:0.6em;
  margin-bottom:0.6em;
  line-height:1.5;
}
.small,
small{
  font-size:var(--fs-small);
  line-height:1.5;
  opacity:.85;
}

/* Для экранов шириной до 600px уменьшаем размеры заголовков и базовый
   размер текста, не опуская текст ниже 14px, что сохраняет
   читаемость на мобильных устройствах. */
@media (max-width: 600px){
  :root{
    --fs-xl:26px;
    --fs-lg:22px;
    --fs-md:18px;
    --fs-h4:16px;
    --fs-h5:14px;
    --fs-base:14px;
    --fs-small:13px;
  }
  body{font-size:14px;}
}

/* формы и кнопки */
.input,select,textarea{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
}
.input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px var(--ring);
  border-color:rgba(255,255,255,.12);
}
/* Чтобы варианты в выпадающем списке имели тёмный фон и светлый текст, задаём им фон и цвет */
select option{
  background:var(--panel-2);
  color:var(--text);
}
/* Кнопки: стеклянный эффект. Общий стиль для всех кнопок, в т.ч. ссылок с классом .btn */
.btn,
button,
input[type=button],
input[type=submit],
input[type=reset]{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 14px;
  backdrop-filter:saturate(150%) blur(6px);
  box-shadow:0 4px 8px rgba(0,0,0,.25);
  transition:background .2s, color .2s, transform .15s, box-shadow .2s;
  /* Позволяем кнопкам быть частью таб‑навигации. При фокусе от клавиатуры
     они будут подсвечиваться и слегка увеличиваться. */
  outline:none;
}
.btn:hover,
button:hover,
input[type=button]:hover,
input[type=submit]:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(0,0,0,.3);
  /* плавное увеличение масштаба при наведении для живости интерфейса */
  transform:translateY(-2px) scale(1.02);
}
.btn:active,
button:active,
input[type=button]:active,
input[type=submit]:active{
  transform:translateY(0);
  box-shadow:0 4px 8px rgba(0,0,0,.25);
}

/* Состояние фокуса с клавиатуры: выделяем кнопки и ссылки более
   ярким свечением. Используем :focus-visible, чтобы не мешать
   стандартным кликам мышью. */
.btn:focus-visible,
button:focus-visible,
a.btn:focus-visible{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 0 0 3px var(--brand),0 8px 16px rgba(0,0,0,.35);
}

/* Карточки при фокусе: добавляем тень. Это полезно для
   клавиатурной навигации, когда пользователь перемещается по
   ссылкам, расположенным внутри карточек. */
.card:focus-within{
  box-shadow:0 0 0 2px var(--accent), 0 8px 16px rgba(0,0,0,.35);
}

/* === Доступность ===
   Скрытая ссылка «Пропустить навигацию». Она отображается только при
   фокусе с клавиатуры. Позволяет быстро перейти к основному
   содержимому, минуя меню. */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  padding:8px 12px;
  border-radius:8px;
  background:var(--panel);
  color:var(--text);
  z-index:1000;
  text-decoration:none;
  transition:left .2s ease;
}
.skip-link:focus{
  left:16px;
  top:16px;
  box-shadow:0 0 0 3px var(--accent);
}

/* Кнопка «Наверх» появляется при прокрутке. Круглая кнопка с
   прозрачным фоном и стеклянным эффектом. */
.scroll-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:44px;
  height:44px;
  border-radius:22px;
  background:rgba(0,0,0,.4);
  color:var(--text);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(6px) saturate(150%);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  cursor:pointer;
  font-size:24px;
  display:none;
  align-items:center;
  justify-content:center;
  transition:transform .2s, box-shadow .2s;
}
.scroll-top:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 16px rgba(0,0,0,.4);
}
.scroll-top:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--accent),0 8px 16px rgba(0,0,0,.4);
}
/* Основная кнопка (синие акценты) */
.btn-primary{
  background:rgba(0,164,219,.18);
  border-color:var(--brand);
  color:var(--text);
}
.btn-primary:hover{
  background:rgba(0,164,219,.28);
  box-shadow:0 6px 12px rgba(0,164,219,.35);
}
button:disabled,
input[type=submit]:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.6);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  box-shadow:none;
}
/* Прозрачная кнопка без фона */
.btn-ghost{
  background:transparent;
  color:var(--brand);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn-ghost:hover{
  background:rgba(0,164,219,.1);
  box-shadow:0 0 6px rgba(0,164,219,.25);
}

/* футер */
.footer{
  /* Унифицированный стиль футера: линия сверху, аккуратные отступы, выравнивание текста */
  border-top:1px solid var(--line);
  color:var(--muted);
  padding:16px 0;
  margin-top:32px;
  text-align:center;
  font-size:13px;
}

/* анимация пульсации для логотипа */
@keyframes neonPulse{
  /* Добавляем промежуточные кадры 40% и 60%, чтобы максимальная яркость
     задерживалась, создавая более мягкую пульсацию. */
  0%   { box-shadow:0 0 4px var(--brand),0 0 8px var(--accent); }
  40%  { box-shadow:0 0 8px var(--brand),0 0 16px var(--accent); }
  60%  { box-shadow:0 0 8px var(--brand),0 0 16px var(--accent); }
  100% { box-shadow:0 0 4px var(--brand),0 0 8px var(--accent); }
}

/* Анимация для заголовка портала: плавное изменение яркости свечения */
@keyframes kxmHeaderGlow{
  /* Также добавляем задержку для анимации заголовка, чтобы
     свечение оставалось на максимуме чуть дольше. */
  0%   { text-shadow:0 0 4px var(--brand), 0 0 8px var(--accent); }
  40%  { text-shadow:0 0 8px var(--brand), 0 0 16px var(--accent); }
  60%  { text-shadow:0 0 8px var(--brand), 0 0 16px var(--accent); }
  100% { text-shadow:0 0 4px var(--brand), 0 0 8px var(--accent); }
}

/* Анимация для логотипа: небольшая пульсация и смещение градиента,
   чтобы квадрат выглядел живым. */
@keyframes logoPulse{
  0%   { box-shadow:0 0 6px var(--logo-start),0 0 12px var(--logo-end); background-position:0% 50%; }
  40%  { box-shadow:0 0 12px var(--logo-end),0 0 24px var(--logo-start); background-position:100% 50%; }
  60%  { box-shadow:0 0 12px var(--logo-end),0 0 24px var(--logo-start); background-position:100% 50%; }
  100% { box-shadow:0 0 6px var(--logo-start),0 0 12px var(--logo-end); background-position:0% 50%; }
}

/* ====================== Дополнительные улучшения портала ====================== */

/*
 * Подсветка активного пункта меню
 *
 * Для лучшей ориентации пользователя активная ссылка в навигации
 * окружена мягким светящимся ореолом. Псевдоэлемент ::after создаёт
 * размытую радужную подложку за ссылкой, не влияя на клик по ней.
 */
.kxm-links a.active{
  position:relative;
}
.kxm-links a.active::after{
  content:'';
  position:absolute;
  top:-4px;
  left:-4px;
  right:-4px;
  bottom:-4px;
  z-index:-1;
  /* Центральная часть — фирменный оранжевый, по краям — прозрачность */
  background:radial-gradient(circle,
    rgba(255,140,0,0.45) 0%,
    rgba(255,255,255,0.05) 70%);
  border-radius:16px;
  filter:blur(4px);
}

/* Заголовок праздничного приветствия: радужный перелив внутри текста.
 * Классу .ny-title назначен фон‑градиент, который плавно движется, создавая
 * впечатление свечения. Цвет текста прозрачный, поэтому виден только фон.
 */
.ny-title{
  display:inline-block;
  background:linear-gradient(90deg,#fbbf24,#fb7185,#38bdf8,#4ade80);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:ny-glow 6s linear infinite;
}
@keyframes ny-glow{
  0%  { background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}

/*
 * Заголовок карточек и иконки
 *
 * Карты на главной странице снабжаются шапкой с иконкой. Это помогает
 * быстрее ориентироваться в содержимом блока. Класс .card-head располагает
 * иконку и текст рядом. Сам значок — круг с лёгким свечением. Для
 * конкретных категорий определены собственные цвета.
 */
.card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.card-icon{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  /* базовый фон и лёгкое свечение */
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%),
             var(--panel-2);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 0 12px rgba(0,0,0,0.35),0 0 8px rgba(255,255,255,0.05);
  color:var(--brand);
}
/* Индивидуальные цвета для каждой категории (поддержка, база знаний и т.д.) */
.card-icon-support   { color:#38bdf8; }
.card-icon-knowledge { color:#fb923c; }
.card-icon-monitoring{ color:#f59e0b; }
.card-icon-video     { color:#3b82f6; }
.card-icon-calls     { color:#10b981; }
.card-icon-info      { color:#8b5cf6; }

/*
 * Элемент состояния плеера
 *
 * На странице видеонаблюдения выводится небольшая подпись, показывающая
 * состояние подключения: «Подключение…», «Онлайн», «Нет сигнала» или
 * «Ошибка». Базовый класс определяет позицию и фон, а модификаторы —
 * цвета для конкретных состояний.
 */
.player-state{
  position:absolute;
  right:10px;
  top:10px;
  font-size:12px;
  padding:4px 8px;
  border-radius:10px;
  background:rgba(15,20,25,0.85);
  border:1px solid #1f2833;
  color:var(--text);
  pointer-events:none;
  opacity:0.95;
  z-index:10;
}
.player-state.connecting{
  background:rgba(241,196,15,0.25);
  border-color:#f39c12;
  color:#f1c40f;
}
.player-state.playing{
  background:rgba(46,204,113,0.25);
  border-color:#2ecc71;
  color:#2ecc71;
}
.player-state.offline{
  background:rgba(231,76,60,0.25);
  border-color:#e74c3c;
  color:#e74c3c;
}
.player-state.error{
  background:rgba(231,76,60,0.25);
  border-color:#e74c3c;
  color:#e74c3c;
}

/* --- Новогодний переключатель ---
 *
 * Блок переключателя «Новогодняя тема» находится в правой части
 * навигационной панели. Он состоит из кнопки с иконкой и подписи.
 * Стиль подписи синхронно изменяется из JavaScript, поэтому здесь
 * только базовое оформление.
 */
.ny-switch{
  display:flex;
  align-items:center;
  gap:6px;
}

.ny-switch .ny-label{
  font-size:14px;
  color:var(--text);
  text-transform:none;
  user-select:none;
  transition:opacity .3s;
}

/* ===== Стеклянные кнопки в шапке: светлый центр, свечение только по краям ===== */

#site-header nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 24px;
  margin: 0 6px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;

  color: #f3f7ff;

  /* стеклянный фон: легкий блик сверху + тёмно-синий низ */
  background:
    radial-gradient(circle at 20% 0,
      rgba(255,255,255,0.25) 0,
      rgba(255,255,255,0.08) 28%,
      transparent 60%) ,
    linear-gradient(180deg,
      rgba(33, 71, 138, 0.88),
      rgba(10, 20, 48, 0.98));

  border: 1px solid rgba(155, 195, 255, 0.85);

  /* мягкая внешняя тень, центр не светится */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.75),
    0 8px 22px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(60, 140, 255, 0.35);

  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);

  transition:
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease;
}

/* ховер — чуть ярче по контуру, но фон остаётся тем же */
#site-header nav a:hover:not(.active):not([aria-current="page"]) {
  transform: translateY(-1px);
  color: #ffffff;

  border-color: rgba(190, 220, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.75),
    0 10px 26px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(120, 190, 255, 0.55);
}

/* активная кнопка:
   — тот же стеклянный фон, что и у остальных
   — меняется только цвет контура + внешнее свечение */
#site-header nav a.active,
#site-header nav a[aria-current="page"] {
  color: #fff7e6;                 /* чуть теплый текст */

  /* фон НЕ меняем: оставляем такой же стеклянный, как у всех */
  background:
    radial-gradient(circle at 20% 0,
      rgba(255,255,255,0.25) 0,
      rgba(255,255,255,0.08) 28%,
      transparent 60%) ,
    linear-gradient(180deg,
      rgba(33, 71, 138, 0.88),
      rgba(10, 20, 48, 0.98));

  border-color: rgba(255, 206, 140, 0.98);

  /* тёплый «ореол» только по краям */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 0 20px rgba(255, 195, 120, 0.9),
    0 10px 28px rgba(0, 0, 0, 0.95);
}

/* дополнительное кольцо свечения по контуру активной кнопки — как у логотипа */
#site-header nav a.active::before,
#site-header nav a[aria-current="page"]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(255, 215, 150, 0.98);
  box-shadow:
    0 0 20px rgba(255, 215, 150, 0.95),
    0 0 34px rgba(255, 170, 90, 0.8);
  pointer-events: none;
}

/* чтобы при наведении активная кнопка не прыгала */
#site-header nav a.active:hover,
#site-header nav a[aria-current="page"]:hover {
  transform: translateY(-1px);
}

@media (max-width: 960px) {
  #site-header nav a {
    padding: 7px 18px;
    font-size: 13px;
    margin: 2px 3px;
  }
}