/* Современный дизайн образовательной платформы */

:root {
  /* Основная цветовая палитра */
  --color-ivory: #f8f6f0;           /* Слоновая кость - базовый фон */
  --color-blueberry: #2d3561;       /* Черника - акценты */
  --color-wine-berry: #4a3c5a;      /* Винно-черничный - тексты */
  --color-light-berry: #6b5b73;     /* Светлый винно-черничный */
  
  /* Пастельные оттенки */
  --color-pastel-blue: #e8eaf6;     /* Пастельный синий */
  --color-pastel-purple: #f3e5f5;   /* Пастельный фиолетовый */
  --color-pastel-gray: #f5f5f7;     /* Пастельный серый */
  --color-soft-white: #fefefe;      /* Мягкий белый */
  
  /* Дополнительные цвета */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-shadow: rgba(45, 53, 97, 0.1);
  --color-shadow-hover: rgba(45, 53, 97, 0.15);
  
  /* Типографика */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Размеры */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  
  /* Переходы */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-out;
  --transition-slow: 0.35s ease-out;
  
  /* Тени */
  --shadow-sm: 0 2px 8px var(--color-shadow);
  --shadow-md: 0 4px 16px var(--color-shadow);
  --shadow-lg: 0 8px 32px var(--color-shadow);
  --shadow-hover: 0 6px 24px var(--color-shadow-hover);
}

/* Сброс стилей и базовые настройки */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /*
   * Prevent horizontal scrolling on mobile devices.
   * Some off‑screen fixed elements (such as the hidden navigation drawer)
   * can still contribute to the total page width and cause the entire
   * document to scroll sideways. Explicitly hiding horizontal overflow on
   * the root element ensures that any such elements remain clipped and
   * invisible, keeping the layout locked to the viewport width.
   */
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-wine-berry);
  background-color: var(--color-ivory);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* На мобильных устройствах некоторые блоки могут выходить
     за пределы экрана из‑за внутренних отступов. Скрываем
     горизонтальный скролл для всей страницы. */
  overflow-x: hidden;
}

/*
 * Ensure all images scale responsively. Without setting a maximum width,
 * large images can overflow their containers on narrow screens and
 * produce unwanted horizontal scrolling. Using max-width: 100% keeps
 * images within the bounds of their parent and maintains aspect ratio,
 * while display: block removes inline spacing.
 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Декоративный фон для всей страницы.
 * Используем полупрозрачные образовательные мотивы (глобус, линейка, атлас, книга),
 * чтобы создать ощущение масштаба и серьёзности. Все изображения расположены
 * фиксированно и не мешают взаимодействию, поскольку pointer-events отключены.
 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  /* Подключаем изображения-наглядные символы образования (глобус, открытая книга, закрытая книга, карандаш).
     Используем несколько фоновых изображений, расположенных по краям, чтобы они не пересекались. */
  background-image: url('/static/images/background/user-globe.jpg'),
                    url('/static/images/background/user-pencil.jpg'),
                    url('/static/images/background/user-open-book.jpg'),
                    url('/static/images/background/user-closed-book.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  /* Размещаем каждое изображение: глобус — вверху слева, карандаш — вверху справа,
     открытая книга — внизу слева, закрытая книга — внизу справа. Проценты определяют
     смещение от краёв, чтобы элементы не соприкасались. */
  background-position: 10% 15%,
                       85% 20%,
                       10% 80%,
                       85% 85%;
  /* Размеры изображений: адаптированы под общую композицию и пропорции. */
  background-size: 400px, 320px, 360px, 300px;
  /* Общая прозрачность для всех изображений. Значение менее единицы делает
     иллюстрации полупрозрачными и ненавязчивыми. */
  opacity: 0.06;
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  color: var(--color-blueberry);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* Ссылки */
a {
  color: var(--color-blueberry);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-light-berry);
}

/* Шапка сайта */
/* Шапка сайта */
/**
 * Общая шапка сайта состоит из двух уровней: небольшой верхней полосы
 * с контактами и служебными ссылками, а ниже — основного блока с
 * логотипом, названием, слоганом и навигацией. Прикрепляем шапку
 * к верхней части экрана и добавляем размытие, чтобы она выглядела
 * серьёзно и современно.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

/* Верхняя информационная полоса с контактами и служебными ссылками */
.top-bar {
  background: var(--color-blueberry);
  color: var(--color-soft-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 2rem;
  font-size: 0.75rem;
}
.top-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.top-info span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.top-links {
  display: flex;
  gap: 1rem;
}
.top-links a {
  color: var(--color-soft-white);
  font-size: 0.75rem;
  text-decoration: underline;
  transition: color var(--transition-fast);
}
.top-links a:hover {
  color: var(--color-pastel-blue);
}

/* Основная панель навигации */
/* Навигационная панель. По умолчанию элементы располагаются в одну строку,
   чтобы ссылки не переносились на новую строку даже при недостатке места. */
.nav {
  background: linear-gradient(135deg, var(--color-blueberry) 0%, var(--color-wine-berry) 100%);
  max-width: none;
  padding: 0.8rem 2rem;
  display: flex;
  flex-wrap: nowrap;
  /* Размещаем название и кнопки по центру. Используем space-between, чтобы бренд
     и навигационные ссылки распределялись по краям, но были выровнены по центру. */
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Логотип, название и слоган */
.nav-brand-section {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.brand-name {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-soft-white);
  line-height: 1;
}
.brand-tagline {
  font-size: 0.75rem;
  color: var(--color-pastel-gray);
  font-weight: var(--font-weight-medium);
}
.logo-icon {
  font-size: 1.8rem;
  color: var(--color-pastel-blue);
}

/* Горизонтальное расположение названия и слогана для выравнивания с меню */
.brand-text-horizontal {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.brand-text-horizontal .brand-tagline {
  font-size: 0.8rem;
  color: var(--color-pastel-gray);
  font-weight: var(--font-weight-medium);
}

/* Ссылки навигации */
/* Контейнер ссылок навигации. На широких экранах ссылки располагаются
   горизонтально в одну строку. Мы запрещаем перенос элементов на новую
   строку, чтобы меню оставалось однорядным; если ширины не хватает,
   пользователю предлагается переключиться в мобильную навигацию (шторка). */
.nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8rem;
  align-items: center;
  margin-left: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.nav-link {
  color: var(--color-soft-white);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-normal), transform var(--transition-fast);
  position: relative;
  /* Запрещаем сжимать ссылки по ширине и предотвращаем перенос текста, чтобы
     текст не обрезался. Переполненные элементы будут перенесены в шторку
     через JavaScript. */
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity var(--transition-fast);
  border-radius: inherit;
}
.nav-link:hover::before {
  opacity: 1;
}
.nav-link:hover {
  transform: translateY(-2px);
}

/*
 * Когда навигационное меню не помещается по ширине, мы переводим шапку в
 * режим «шторки». В этом режиме навигация раскладывается вертикально и
 * скрывается по умолчанию. Чтобы показать меню, добавляется класс .open
 * на .nav-links. Переключение класса управляется JavaScript.
 */
.nav.collapsed {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.8rem 1rem;
}
.nav.collapsed .brand-tagline {
  /* скрываем слоган рядом с логотипом в режиме шторки, как на мобильных экранах */
  display: none;
}
.nav-links.collapsed {
  display: none;
}
.nav-links.collapsed.open {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Скрываем элементы, которые не помещаются в строку навигации */
.hidden-overflow {
  display: none !important;
}

/* При активном режиме шторки (collapsed) показываем все элементы */
.nav.collapsed .nav-links .hidden-overflow {
  display: block !important;
}

/* Офф‑канвас меню для переполненных ссылок */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 80%;
  height: 100vh;
  background: linear-gradient(135deg, var(--color-blueberry) 0%, var(--color-wine-berry) 100%);
  box-shadow: -4px 0 16px rgba(45, 53, 97, 0.2);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  color: var(--color-soft-white);
  /* Allow vertical scrolling when the drawer content exceeds the viewport height. */
  overflow-y: auto;
  /* Enable smooth scrolling on touch devices and contain overscroll to avoid
     underlying page scrolling when the user reaches the end of the drawer. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /*
   * Disable pointer events on the hidden drawer. When the drawer is
   * translated off‑screen it still technically sits in the viewport and
   * could inadvertently receive touches or contribute to layout. By
   * disabling interactions until the drawer is opened, we prevent
   * accidental swipes and ensure it doesn’t cause focus or scroll
   * issues on mobile devices.
   */
  pointer-events: none;
}
.nav-drawer.open {
  transform: translateX(0);
  /* Re‑enable pointer events when the drawer becomes visible */
  pointer-events: auto;
}
.nav-drawer-close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--color-soft-white);
  font-size: 1.5rem;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: transform var(--transition-fast);
}
.nav-drawer-close:hover {
  transform: scale(1.1);
}
.nav-overflow-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Ensure the overflow list takes up the remaining height of the drawer so that
     the scrollbar appears on this element when needed. */
  flex: 1 1 auto;
  overflow-y: auto;
  /* Smooth scrolling and overscroll containment for nested container */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-overflow-links .nav-link {
  color: var(--color-soft-white);
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nav-overflow-links .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-4px);
}

/* Ссылки, перенесённые из верхней панели в шторку */
.nav-extra-links {
  /* Размещаем элементы вертикально с небольшим отступом снизу */
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-extra-links .nav-link {
  color: var(--color-soft-white);
  font-size: 0.875rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav-extra-links .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-4px);
}

/* Убираем фоновую подложку (::before) у ссылок в дополнительных блоках,
   чтобы под ними не появлялись светлые полосы */
.nav-extra-links .nav-link::before {
  display: none;
}

/* Ссылки в нижней части подвала */
.footer-extras {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.footer-link {
  color: var(--color-soft-white);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  text-decoration: underline;
}

/* Адаптивность для мобильных экранов */
@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 1rem;
    gap: 0.3rem;
  }
  .nav {
    /* На мобильных экранах шапка распределяется по строкам: первая
       содержит логотип и бургер, вторая — раскрытое меню. Для этого
       используем горизонтальное направление и разрешаем перенос строк. */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .nav-links.open {
    display: flex;
  }
  .mobile-menu-toggle {
    display: block;
    background: transparent;
    border: none;
    color: var(--color-soft-white);
    font-size: 1.5rem;
    cursor: pointer;
  }
  .nav-link {
    width: 100%;
    padding: 0.6rem 0.8rem;
  }

  /*
   * На мобильных устройствах вертикальный список ссылок (.nav-links)
   * может быть длиннее высоты экрана. Чтобы меню не «улетало» при
   * прокрутке страницы, ограничиваем высоту списка и разрешаем
   * внутреннюю прокрутку. Значение calc(100vh - 6rem) оставляет
   * место под шапку и отступы (6rem ≈ высота верхнего блока и кнопки).
   */
  .nav-links {
    /* Устанавливаем фиксированную высоту для вертикального меню на мобильных,
       чтобы контент прокручивался внутри этого блока, а не вся страница. */
    height: calc(100vh - 6rem);
    overflow-y: auto;
  }

  /* Устанавливаем порядок элементов, чтобы логотип и бургер располагались
     в первой строке, а навигационные ссылки — во второй. */
  .nav .nav-brand-section {
    order: 1;
  }
  .nav .mobile-menu-toggle {
    order: 2;
    margin-left: auto;
  }
  .nav .nav-links {
    order: 3;
    width: 100%;
  }

  /* Размещаем кнопку меню справа от названия. Используем margin-left:auto
     у самой кнопки, чтобы отодвинуть её к правому краю. */
  .mobile-menu-toggle {
    margin-left: auto;
  }

  /* На мобильных экранах скрываем слоган рядом с логотипом, чтобы
     освободить место в строке навигации. Логотип и название
     остаются видимыми. */
  .brand-tagline {
    display: none;
  }
}



/* Основной контейнер */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Карточки */
.card {
  background: var(--color-soft-white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  border: 1px solid rgba(45, 53, 97, 0.05);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Формы */
.form {
  max-width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-blueberry);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-pastel-gray);
  border-radius: var(--border-radius-md);
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-wine-berry);
  background-color: var(--color-soft-white);
  transition: all var(--transition-normal);
}

/*
 * Кнопки в форме регистрации располагаются рядом на больших экранах и
 * переходят в две строки на мобильных устройствах. Используем
 * flex‑контейнер с переносом и равным распределением по ширине.
 */
.form-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.form-buttons .btn {
  /* По умолчанию каждая кнопка занимает всю строку, чтобы текст
     помещался без переполнения. flex: 1 1 100% означает, что элемент
     может расти и сжиматься, занимая 100% ширины родителя. */
  flex: 1 1 100%;
}
@media (min-width: 480px) {
  /* На экранах шире 480px размещаем кнопки в две колонки. Каждая
     занимает половину доступного пространства за вычетом отступов. */
  .form-buttons .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }
}

/*
 * Раскладка блока «Мой профиль» на панели пользователя. На широких
 * экранах используется двухколоночная сетка: личная информация слева
 * (2fr) и баланс/история операций справа (1fr). На мобильных
 * устройствах (< 768px) сетка превращается в одну колонку, чтобы
 * предотвратить переполнение и «обрезание» текста, как на скриншоте.
 */
.profile-overview-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .profile-overview-grid {
    grid-template-columns: 1fr;
  }
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-blueberry);
  box-shadow: 0 0 0 3px rgba(45, 53, 97, 0.1);
  transform: translateY(-1px);
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-slow);
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-blueberry) 0%, var(--color-wine-berry) 100%);
  color: var(--color-soft-white);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--color-pastel-blue);
  color: var(--color-blueberry);
  border: 2px solid var(--color-blueberry);
}

.btn-secondary:hover {
  background: var(--color-blueberry);
  color: var(--color-soft-white);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--color-blueberry);
  border: 2px solid var(--color-blueberry);
}

.btn-outline:hover {
  background: var(--color-blueberry);
  color: var(--color-soft-white);
}

/* ========================
   Мобильная навигация
   ======================== */

/* Кнопка бургера для маленьких экранов. По умолчанию стилизуем кнопку,
   но не скрываем её — скрытие происходит в медиазапросе для больших экранов.
   Это позволяет корректно переопределить display для мобильной версии. */
.mobile-menu-toggle {
  background: transparent;
  border: none;
  color: var(--color-soft-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: transform var(--transition-fast);
}

.mobile-menu-toggle:hover {
  transform: scale(1.1);
}

/* Скрываем кнопку бургера на экранах шире 768px. На мобильных ширинах
   отображение регулируется медиазапросом (max-width: 768px) выше. */
@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none;
  }
}

/* Удалена дублирующаяся секция мобильной навигации. Основные стили для мобильной версии
   определены в единственном медиазапросе выше. */

/* ========================
   Подвал сайта
   ======================== */
.site-footer {
  background: linear-gradient(135deg, var(--color-blueberry), var(--color-wine-berry));
  color: var(--color-soft-white);
  padding: 2rem 0;
  margin-top: 3rem;
  font-size: 0.875rem;
}

/*
 * На очень узких экранах кнопки в карточках могут не помещаться по ширине
 * и накладываться друг на друга. Для таких случаев раскладываем кнопки
 * вертикально и убираем правый отступ. Применяем только к кнопкам,
 * расположенным непосредственно в карточках, чтобы не повлиять на навигацию.
 */
@media (max-width: 576px) {
  /* На узких экранах делаем все кнопки полноширинными и
     располагаем их вертикально, чтобы они не накладывались друг на друга. */
  .btn {
    display: block;
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 0.75rem;
  }
  /* У последней кнопки убираем отступ снизу */
  .btn:last-child {
    margin-bottom: 0;
  }

  /* Кнопки в карточках новостей: убираем горизонтальные отступы,
     иначе при ширине 100% и margin 1rem слева/справа они выходят
     за пределы карточки и вызывают горизонтальный скролл. */
  .news-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.site-footer a {
  color: var(--color-soft-white);
  text-decoration: underline;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-column {
  flex: 1 1 200px;
}

.footer-column h3 {
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-soft-white);
}

.footer-column p {
  margin-bottom: 0.25rem;
  color: var(--color-pastel-gray);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 1rem;
  padding-top: 1rem;
  text-align: center;
  color: var(--color-pastel-gray);
}

@media (max-width: 768px) {
  .footer-columns {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-column {
    flex: 1 1 auto;
  }
}

/* Сообщения об ошибках */
.error {
  color: var(--color-error);
  background: rgba(244, 67, 54, 0.1);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-sm);
  border-left: 4px solid var(--color-error);
  margin-top: 1rem;
  font-weight: var(--font-weight-medium);
}

.success {
  color: var(--color-success);
  background: rgba(76, 175, 80, 0.1);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-sm);
  border-left: 4px solid var(--color-success);
  margin-top: 1rem;
  font-weight: var(--font-weight-medium);
}

/* Списки курсов и уроков */
.course-list,
.lesson-list {
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.course-list {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.course-item,
.lesson-item {
  background: var(--color-soft-white);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  border: 1px solid rgba(45, 53, 97, 0.05);
  position: relative;
  overflow: hidden;
}

.course-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-blueberry), var(--color-wine-berry));
}

.course-item:hover,
.lesson-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.course-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-blueberry);
  margin-bottom: 0.75rem;
}

.course-description {
  color: var(--color-wine-berry);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--color-light-berry);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-pastel-blue);
  padding: 0.25rem 0.75rem;
  border-radius: var(--border-radius-sm);
}

.progress {
  background: var(--color-pastel-purple);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-md);
  margin-top: 1rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-pastel-gray);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blueberry), var(--color-wine-berry));
  border-radius: 4px;
  transition: width var(--transition-slow);
}

/* Статус записи */
.enroll-status {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  background: rgba(76, 175, 80, 0.1);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm);
  display: inline-block;
  margin-top: 1rem;
}

/* Форма фильтров */
.filter-form {
  background: var(--color-soft-white);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: end;
}

.filter-form .form-group {
  margin-bottom: 0;
}

/* Информация о прогрессе */
.progress-info {
  background: linear-gradient(135deg, var(--color-pastel-blue), var(--color-pastel-purple));
  padding: 1.5rem;
  border-radius: var(--border-radius-lg);
  margin-top: 1.5rem;
  border: 1px solid rgba(45, 53, 97, 0.1);
}

/* Заголовок страницы */
.page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
}

.page-title {
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-blueberry), var(--color-wine-berry));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.25rem;
  color: var(--color-light-berry);
  font-weight: var(--font-weight-regular);
}

/* Адаптивность */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
  
  .nav {
    /* На мобильных экранах навигация располагается в одну строку,
       поэтому оставляем горизонтальное направление и выравниваем
       элементы по краям. */
    padding: 0 1rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-links {
    gap: 0.75rem;
    justify-content: flex-start;
  }

  
  .course-list {
    grid-template-columns: 1fr;
  }
  
  .filter-form {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .container {
    padding: 0.75rem;
  }
  
  .card {
    padding: 1.5rem;
  }
  
  .course-item,
  .lesson-item {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* Анимации загрузки */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Плавное появление элементов */
.course-item,
.lesson-item {
  animation: fadeInUp 0.6s ease-out;
}

.course-item:nth-child(2) { animation-delay: 0.1s; }
.course-item:nth-child(3) { animation-delay: 0.2s; }
.course-item:nth-child(4) { animation-delay: 0.3s; }
.course-item:nth-child(5) { animation-delay: 0.4s; }
.course-item:nth-child(6) { animation-delay: 0.5s; }

/* ----------------------------------------------------- */
/*  Раздел отзывов: стили для карусели и карточек
    Карточки занимают всю ширину контейнера, плавно
    перелистываются через JavaScript.           */
.reviews-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.reviews-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
  gap: 1rem;
}

.review-card {
  flex: 0 0 100%;
  background: var(--color-soft-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* начальное состояние: видимый, но плавное появление активируется анимацией */
}

.review-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

.review-card h3 {
  margin-bottom: 0.25rem;
  color: var(--color-blueberry);
  font-size: 1.125rem;
}

.review-card .review-quote {
  font-size: 0.95rem;
  color: var(--color-light-berry);
  font-style: italic;
  line-height: 1.5;
}

/* Адаптивность: несколько карточек на экране шире 768px */
@media (min-width: 768px) {
  .review-card {
    flex: 0 0 50%;
  }
}
@media (min-width: 992px) {
  .review-card {
    flex: 0 0 33.3333%;
  }
}

/* ----------------------------------------------------- */
/*  Новости: сетка и карточки новостей  */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.news-card {
  background: var(--color-soft-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding-bottom: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px var(--color-shadow-hover);
}

.news-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.news-date {
  font-size: 0.875rem;
  color: var(--color-light-berry);
  margin: 0.75rem 1rem 0.25rem;
}

.news-title {
  font-size: 1rem;
  margin: 0 1rem 0.75rem;
  color: var(--color-blueberry);
  line-height: 1.4;
  flex-grow: 1;
}

.news-btn {
  margin: 0 1rem;
  align-self: flex-start;
}

/* ----------------------------------------------------- */
/*  Рекомендованные курсы: стили */
.recommended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.recommended-card {
  position: relative;
  background: var(--color-soft-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding-bottom: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* По умолчанию карточки сразу видны. Анимацию появления управляет класс fade-in-up */
  /* opacity: 0; -- убрано, чтобы элементы не исчезали, если анимация не сработала */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*
 * Кнопка записи внутри карточки рекомендаций выходит за пределы карточки
 * на мобильных экранах из‑за глобального правила .btn { width:100% }. Здесь
 * переопределяем ширину для кнопок внутри .recommended-card, учитывая
 * горизонтальные отступы (1rem слева и справа), чтобы кнопка всегда
 * помещалась в карточку. Используем !important для перезаписи глобального
 * правила. Также возвращаем margin-left/right, чтобы inline‑стили
 * сохраняли одинаковый отступ.
 */
.recommended-card .btn {
  width: calc(100% - 2rem) !important;
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.recommended-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px var(--color-shadow-hover);
}

.recommended-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: #fff;
  text-transform: uppercase;
  z-index: 2;
}

.badge-popular {
  background: var(--color-blueberry);
}

.badge-recommended {
  background: var(--color-wine-berry);
}

.badge-new {
  background: var(--color-light-berry);
}

/* ----------------------------------------------------- */
/*  Достижения студентов: бегущая строка */
.achievements-ticker-container {
  width: 100%;
  background: var(--color-blueberry);
  color: #fff;
  padding: 0.5rem 0;
  overflow: hidden;
  margin-top: 2rem;
}

.achievements-ticker {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ticker-list {
  display: inline-flex;
  white-space: nowrap;
}

.ticker-item {
  margin-right: 3rem;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

/* ----------------------------------------------------- */
/* Мини-опрос: стили для опроса с кнопками и результатом */
.quiz-section .quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.quiz-section .quiz-options.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.quiz-result {
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}

.quiz-result.active {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.quiz-btn {
  min-width: 150px;
}

/* ----------------------------------------------------- */
/* Ближайшие события: стили списка событий */
.events-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.event-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: var(--border-radius-lg);
  background: var(--color-soft-white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* По умолчанию элементы событий сразу видны. Анимацию появления управляет класс fade-in-up */
  /* opacity: 0; -- убрано, чтобы элементы не исчезали, если анимация не сработала */
}

.event-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px var(--color-shadow-hover);
}

.event-item:hover .event-date {
  background: var(--color-light-berry);
}

.event-date {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-md);
  background: var(--color-blueberry);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-weight: var(--font-weight-bold);
}

.event-day {
  font-size: 1.25rem;
  line-height: 1;
}

.event-month {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.event-info h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--color-blueberry);
}

.event-info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-wine-berry);
}



/* Дополнительные динамичные эффекты */

/* Плавное скрытие/показ шапки */
.site-header {
  transition: transform var(--transition-normal);
}

/* Улучшенные эффекты для карточек */
.course-item,
.lesson-item,
.card {
  transition: all var(--transition-normal);
  will-change: transform, box-shadow;
}

/* Анимация загрузки для прогресс-баров */
.progress-fill {
  transform-origin: left center;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Улучшенные переходы для форм */
.form-group input,
.form-group textarea,
.form-group select {
  transition: all var(--transition-normal);
  will-change: transform, border-color, box-shadow;
}

.form-group label {
  transition: all var(--transition-fast);
  will-change: transform, color, font-weight;
}

/* Анимация для навигационных ссылок */
.nav-link {
  transition: all var(--transition-normal);
  will-change: transform, text-shadow;
}

/* Эффекты для мета-элементов */
.meta-item {
  transition: all var(--transition-fast);
}

.meta-item span:first-child {
  transition: transform var(--transition-fast);
  display: inline-block;
}

/* Пульсация для важных элементов */
@keyframes pulse {
  0% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
  }
  50% { 
    transform: scale(1.02); 
    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0.1);
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* Анимация подпрыгивания */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { 
    transform: translate3d(0,0,0); 
  }
  40%, 43% { 
    transform: translate3d(0,-8px,0); 
  }
  70% { 
    transform: translate3d(0,-4px,0); 
  }
  90% { 
    transform: translate3d(0,-2px,0); 
  }
}

/* Анимация волны для кнопок */
@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Улучшенные состояния кнопок */
.btn {
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-slow);
}

.btn:hover::after {
  animation: wave 0.6s ease-out;
}

/* Анимация появления для статуса */
.enroll-status {
  animation: pulse 2s infinite;
}

/* Эффект параллакса для заголовков */
.page-header {
  will-change: transform;
}

/* Плавные переходы для всех интерактивных элементов */
a, button, input, textarea, select {
  transition: all var(--transition-normal);
}

/* Улучшенные фокус-состояния */
input:focus,
textarea:focus,
select:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-shadow), 0 0 0 3px rgba(45, 53, 97, 0.1);
}

/* Анимация для иконок */
.meta-item:hover span:first-child {
  transform: scale(1.2) rotate(5deg);
}

/* Дополнительные микро-анимации */
.course-title a:hover {
  color: var(--color-wine-berry);
  text-decoration: underline;
  text-decoration-color: var(--color-blueberry);
  text-underline-offset: 4px;
}

/* Анимация загрузки страницы */
@keyframes pageLoad {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: pageLoad 0.5s ease-out;
}

/* Улучшенные тени при наведении */
.course-item:hover,
.lesson-item:hover,
.card:hover {
  box-shadow: 0 12px 40px var(--color-shadow-hover);
}

/* Анимация для прогресс-информации */
.progress-info {
  position: relative;
  overflow: hidden;
}

.progress-info::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* ------------------------------------------------------------------ */
/*                         Welcome overlay styles                    */
/* Полупрозрачный фон, который занимает весь экран для приветственного
   выбора «Пройти обучение» или «Войти в аккаунт». Отображается только
   при первом посещении и скрывается после выбора. */
.welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 53, 97, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Баннер cookie в правом нижнем углу */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--color-blueberry);
  color: var(--color-soft-white);
  padding: 1rem;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 2000;
  display: none; /* скрыт по умолчанию, появляется через JS */
  max-width: 320px;
  font-size: 0.875rem;
}

.cookie-banner .cookie-content p {
  margin: 0;
  line-height: 1.4;
}

.cookie-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
}

.cookie-button.primary {
  background: var(--color-success);
  color: var(--color-soft-white);
}

.cookie-button.secondary {
  background: var(--color-error);
  color: var(--color-soft-white);
}

.cookie-button:hover {
  opacity: 0.9;
}

/* Выделение выбранной карточки роли в онбординге */
.role-card.selected {
  border: 2px solid var(--color-blueberry);
  background-color: var(--color-pastel-purple);
  box-shadow: var(--shadow-md);
}

/* Контейнер модального окна поверх overlay */
.welcome-modal {
  background: var(--color-soft-white);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 90%;
  text-align: center;
  position: relative;
}

/* Заголовок и текст в приветственном модальном окне */
.welcome-modal h2 {
  margin-bottom: 1rem;
  color: var(--color-blueberry);
}
.welcome-modal p {
  margin-bottom: 1.5rem;
  color: var(--color-wine-berry);
}

/* Блок кнопок: на узких экранах вертикальный, на широких горизонтальный */
.welcome-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 480px) {
  .welcome-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

/* Стили кнопок в модальном окне */
.welcome-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-normal), transform var(--transition-fast);
  text-decoration: none;
}
.welcome-button.primary {
  background: var(--color-blueberry);
  color: var(--color-soft-white);
}
.welcome-button.secondary {
  background: var(--color-soft-white);
  color: var(--color-blueberry);
  border: 2px solid var(--color-blueberry);
}
.welcome-button:hover {
  transform: translateY(-2px);
}

/* Кнопка закрытия модального окна */
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-light-berry);
  cursor: pointer;
}

/* ====== Раздел Наука ====== */
/* Сетка карточек для научных проектов */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Компактная кнопка для таблиц (админ) */
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  background: var(--color-blueberry);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background var(--transition-normal);
}
.btn-sm:hover {
  background: var(--color-wine-berry);
}

/* ========================
   Обучение для ролей (guest onboarding training)
   ======================== */
.training-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--color-soft-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.training-section {
  display: none;
}

.training-section h2 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-blueberry);
  font-weight: var(--font-weight-semibold);
}

.training-section p {
  font-size: 1rem;
  color: var(--color-berry);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.training-img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--border-radius-lg);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.training-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

/* =====================
   Чат-ассистент для выбора курса
   ===================== */
.chat-container {
  max-height: 320px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-soft-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-pastel-gray);
}

.chat-message {
  display: inline-block;
  max-width: 80%;
  padding: 0.6rem 0.9rem;
  border-radius: var(--border-radius-lg);
  word-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: background var(--transition-normal);
}
.chat-message.ai {
  align-self: flex-start;
  background: var(--color-pastel-gray);
  color: var(--color-wine-berry);
}
.chat-message.user {
  align-self: flex-end;
  background: var(--color-blueberry);
  color: var(--color-soft-white);
}
.chat-input-container {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  align-items: center;
}
.chat-input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-pastel-gray);
  font-size: 1rem;
  line-height: 1.4;
}
.chat-input:focus {
  outline: none;
  border-color: var(--color-blueberry);
  box-shadow: 0 0 0 3px rgba(45, 53, 97, 0.1);
}
.chat-input-container .btn-primary {
  white-space: nowrap;
}

/* Дополнительные стили для нового чат‑виджета с аватаром */
.message-row {
  display: flex;
  width: 100%;
  gap: 0.6rem;
}
.message-row.ai {
  justify-content: flex-start;
}
.message-row.user {
  justify-content: flex-end;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-image: url('/static/images/background/user-globe.jpg');
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.chat-bubble {
  max-width: 80%;
  padding: 0.6rem 0.9rem;
  border-radius: var(--border-radius-lg);
  word-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: background var(--transition-normal);
}
.chat-bubble.ai {
  background: var(--color-pastel-gray);
  color: var(--color-wine-berry);
}
.chat-bubble.user {
  background: var(--color-blueberry);
  color: var(--color-soft-white);
}

/* Стили для мастера подбора курсов */
.wizard-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wizard-question {
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-blueberry);
}
.wizard-input {
  padding: 0.6rem 0.8rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-pastel-gray);
  font-size: 1rem;
  line-height: 1.4;
}
.wizard-input:focus {
  outline: none;
  border-color: var(--color-blueberry);
  box-shadow: 0 0 0 3px rgba(45, 53, 97, 0.1);
}
.wizard-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}
.wizard-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.wizard-role-btn {
  flex: 1 1 120px;
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius-md);
  background: var(--color-pastel-gray);
  color: var(--color-blueberry);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.wizard-role-btn:hover {
  background: var(--color-light-berry);
  color: var(--color-white);
}
.wizard-role-btn.active {
  background: var(--color-blueberry);
  color: var(--color-soft-white);
}
.recommendation-text {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-wine-berry);
}

/*
 * === Course Finder (Wizard) Section ===
 * Эти стили выделяют секцию «Найди свой курс», добавляют иллюстрацию,
 * улучшают видимость кнопок и оформляют горизонтальный слайдер персональных
 * рекомендаций прямо внутри мастера. Они не конфликтуют с существующими
 * компонентами и не требуют изменений в разметке.
 */

.course-finder-section {
  /*
   * Accent the course finder block so that it stands out on the page. A subtle left border
   * coloured with the primary brand colour guides the visitor's eye to the assistant. We also
   * bump up the shadow slightly and use a gentle gradient to add depth without overwhelming
   * the rest of the layout. The overflow is hidden to ensure that the contained slider and
   * images never bleed outside the rounded corners.
   */
  background: linear-gradient(0deg, var(--color-soft-white) 0%, var(--color-pastel-gray) 100%);
  border: 1px solid var(--color-pastel-gray);
  border-left: 6px solid var(--color-blueberry);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

.course-finder-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.course-finder-image {
  /* Make the illustration more prominent; larger size with aspect ratio preserved. */
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  object-fit: contain;
}

.course-finder-text {
  flex: 1;
}

@media (max-width: 768px) {
  .course-finder-header {
    flex-direction: column;
    text-align: center;
  }
  .course-finder-image {
    width: 140px;
    height: 140px;
  }
  .course-finder-text {
    width: 100%;
  }
}

/* Кнопки для выбора роли в мастере */
.wizard-role-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.wizard-role-btn {
  background: linear-gradient(135deg, var(--color-blueberry), var(--color-wine-berry));
  color: var(--color-soft-white);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-md);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  font-weight: var(--font-weight-medium);
}
.wizard-role-btn:hover,
.wizard-role-btn.active {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--color-shadow-hover);
  opacity: 0.95;
}

/* Вопрос и поле ввода */
.wizard-question {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-blueberry);
}

.wizard-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-pastel-gray);
  border-radius: var(--border-radius-md);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wizard-input:focus {
  outline: none;
  border-color: var(--color-wine-berry);
  box-shadow: 0 0 0 3px rgba(186, 163, 255, 0.2);
}

/* Область кнопок «Назад/Далее» */
.wizard-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}
.wizard-buttons .btn {
  flex: 1 1 0;
  font-weight: var(--font-weight-semibold);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Рекомендации внутри мастера (горизонтальный слайдер) */
.wizard-recommendations {
  margin-top: 2rem;
}
.wizard-recommendations h3 {
  margin-bottom: 0.75rem;
  color: var(--color-blueberry);
  font-weight: var(--font-weight-bold);
}
.recommended-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.5rem 0;
}
.recommended-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  transition: transform 0.5s ease;
}

/*
 * Ensure recommended cards inside the horizontal slider have a fixed basis.
 * Without explicitly setting flex-basis, cards will expand to their content
 * width, which can exceed the viewport on small screens and cause
 * overlapping. By specifying a basis and max-width, we guarantee that
 * only one card (or part of the next card) is visible at a time, making
 * horizontal scrolling smooth. The values scale down on smaller devices.
 */
/*
 * Ensure recommended cards inside the horizontal slider have a fixed width and
 * basis. Without explicitly setting these values, cards expand to fit their
 * content, leading to overlapping on smaller viewports. Here we set both
 * flex-basis and width so that the JavaScript slider calculation (which
 * relies on offsetWidth) returns consistent values. On smaller screens
 * the width is defined as a percentage of the slider container.
 */
.recommended-slider .recommended-card {
  /* Default size for large screens */
  flex: 0 0 280px;
  width: 280px;
}
@media (max-width: 900px) {
  .recommended-slider .recommended-card {
    flex: 0 0 70%;
    width: 70%;
  }
}
@media (max-width: 600px) {
  .recommended-slider .recommended-card {
    flex: 0 0 90%;
    width: 90%;
  }
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-blueberry);
  color: var(--color-soft-white);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
  z-index: 2;
}
.slider-arrow:hover {
  opacity: 1;
}
.slider-arrow.left {
  left: 0;
  transform: translate(-50%, -50%);
}
.slider-arrow.right {
  right: 0;
  transform: translate(50%, -50%);
}

@media (max-width: 600px) {
  .course-finder-image {
    width: 120px;
    height: 120px;
  }
  .slider-arrow {
    width: 32px;
    height: 32px;
  }
}

/*
 * Дополнительные адаптивные правила для мобильных устройств
 *
 * Навигация: когда меню переходит в режим шторки (добавляется класс
 * .collapsed), по умолчанию оно становится вертикальным. Однако в
 * мобильной версии мы хотим, чтобы логотип и бургер‑иконка всегда
 * оставались в одной строке. Поэтому переопределяем направление
 * flex‑контейнера и выравнивание для .nav.collapsed на экранах
 * шириной 768 пикселей и меньше.
 *
 * Кнопки: на узких экранах любые элементы с классом .btn могут
 * переполнить строку и наложиться друг на друга. Чтобы избежать
 * перекрытий, делаем кнопки блоковыми, шириной 100% и разносими
 * их вертикально. Свойства помечены !important для корректного
 * переопределения базовых стилей и инлайн‑отступов.
 */
@media (max-width: 768px) {
  /* Оставляем навигацию горизонтальной даже в состоянии collapsed.
     Включаем flex-wrap, чтобы элементы меню переходили на новую строку. Это
     позволяет заголовку и бургеру занимать первую строку, а
     раскрывающемуся списку ссылок располагаться ниже на второй строке. */
  .nav.collapsed {
    /* Размещаем логотип и бургер в первой строке, а меню ссылок —
       на следующей. Для этого используем горизонтальное направление и
       разрешаем перенос строк. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
  }
  .nav.collapsed .nav-brand-section {
    order: 1;
  }
  .nav.collapsed .mobile-menu-toggle {
    order: 2;
    margin-left: auto;
  }
  .nav.collapsed .nav-links {
    order: 3;
    width: 100%;
  }

  /* Генерализованный стиль для всех кнопок */
  .btn {
    /* На мобильных устройствах кнопки становятся блочными, чтобы
       занимать всю ширину родительского контейнера. Не используем
       !important для display, чтобы inline‑стили (например, display:none)
       могли корректно скрывать элементы, как в форме регистрации. */
    display: block;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0.75rem;
  }
  .btn:last-child {
    margin-bottom: 0;
  }
}