<style>
/* ==============================================
   СТИЛИ ДЛЯ ШАПКИ САЙТА (HEADER)
   ============================================== */

/* Стилизация первой иконки в шапке (чат) - делаем её оранжевой */
.ant-layout-header .flex.align-center.h-100.c-pointer.no-select.p-10.hoverable:first-of-type .ant-btn-circle.bg-gray-3 {
  background-color: #fca355 !important; /* Оранжевый фон */
  color: #ffffff !important; /* Белый цвет иконки */
}

/* Стилизация второй иконки в шапке (уведомления) - делаем её зеленой с белым фоном */
.ant-layout-header .flex.align-center.h-100.c-pointer.no-select.p-10.hoverable:nth-of-type(2) .ant-btn-circle.bg-gray-3 {
  background-color: white !important; /* Белый фон */
  border: 2px solid #4355FF !important; /* Зеленая рамка толщиной 2px */
  color: #4355FF !important; /* Зеленый цвет иконки */
}

/* Стилизация кнопки с баллами в шапке */
.ant-btn-primary.flex.flex-center.bg-blue-1.border-blue-2.h-fit.br-xxs.color-gray-8.p-8.flex.gap-5.fw-500 {
  background-color: white !important; /* Белый фон кнопки */
  border: 2px solid #4355FF !important; /* Зеленая рамка */
  border-radius: 40px !important; /* Очень округлые углы */
  color: #4355FF !important; /* Зеленый цвет текста */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК КУРСОВ И МАТЕРИАЛОВ
   ============================================== */

/* Убираем стандартную стрелку на кнопках курсов */
.material-card-btns .ant-btn-primary.material-card-main-btn .anticon-caret-right {
  display: none !important; /* Полностью скрываем стандартную стрелку */
}

/* Делаем первый span (текст кнопки) относительно позиционированным для добавления иконки */
.material-card-btns .ant-btn-primary.material-card-main-btn span:first-of-type {
  position: relative; /* Относительное позиционирование */
  display: inline-flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
}

/* Добавляем кастомную иконку стрелки после текста кнопки */
.material-card-btns .ant-btn-primary.material-card-main-btn span:first-of-type::after {
  content: ''; /* Пустое содержимое для псевдоэлемента */
  /* SVG иконка стрелки в кружке, закодированная в base64 */
  background-image: url("https://con.xl.ru/lLDQDOKQ20C-M-7k4pEIvQ/images/w_qwD4uiRk6MEFfkkpcRfQ.svg");
  display: inline-block; /* Блочно-строчный элемент */
  width: 20px; /* Ширина псевдоэлемента */
  height: 15px; /* Высота псевдоэлемента */
  background-size: 20px 15px; /* подберите нужный размер */
  background-repeat: no-repeat;
   background-position: center;
  margin-left: 12px; /* Отступ слева от текста */
  vertical-align: middle; /* Выравнивание по центру строки */
}

/* Основные стили для кнопок курсов */
.material-card-btns .ant-btn-primary.material-card-main-btn {
  border-radius: 10px !important; /* Очень округлые углы */
  height: 60px !important; /* Высота кнопки */
  background: #4355FF !important; /* Зеленый фон */
  border-color: #4355FF !important; /* Зеленая рамка */
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 35px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход при наведении */
}

/* Эффект при наведении на кнопку курса */
.material-card-btns .ant-btn-primary.material-card-main-btn:hover {
  background: #3644CC !important; /* Синий фон при наведении */
  border-color: #3644CC !important; /* Синяя рамка при наведении */
box-shadow: 7px 5px 56px -14px #4355FF !important; /* Синяя тень при наведении */
}

.material-card-btns .ant-btn-primary.material-card-main-btn:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 7px 5px 56px -10px #4355FF !important; /* Усиленная синяя тень при нажатии */
}

/* Стили для отключенных кнопок курсов */
.material-card-btns .ant-btn-primary.material-card-main-btn[disabled],
.material-card-btns .ant-btn-primary.material-card-main-btn:disabled {
  color: #fff !important; /* Белый цвет текста */
  opacity: 0.7 !important; /* Полупрозрачность */
}

/* Скрываем иконку у отключенных кнопок */
.material-card-btns .ant-btn-primary.material-card-main-btn[disabled] span:first-of-type::after,
.material-card-btns .ant-btn-primary.material-card-main-btn:disabled span:first-of-type::after {
  display: none !important; /* Полностью скрываем иконку */
}

/* ==============================================
   СТИЛИ ДЛЯ ДОПОЛНИТЕЛЬНЫХ ЗЕЛЕНЫХ КНОПОК
   ============================================== */

/* Стили для кнопок с классом material-card-main-green-btn */
.material-card-btns .ant-btn-default.material-card-main-green-btn {
  border-radius: 10px !important; /* Округлые углы */
  height: 60px !important; /* Высота */
  background: #4355FF !important; /* Зеленый фон */
  border-color: #4355FF !important; /* Зеленая рамка */
  color: #fff !important; /* Белый текст */
  display: flex; /* Flexbox */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 35px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход */
}

/* Эффект наведения для зеленых кнопок */
.material-card-btns .ant-btn-default.material-card-main-green-btn:hover {
  background: #3644CC !important; /* Синяя при наведении */
  border-color: #3644CC !important; /* Синяя рамка при наведении */
box-shadow: 7px 5px 56px -14px #4355FF !important; /* Синяя тень при наведении */
}

.material-card-btns .ant-btn-default.material-card-main-green-btn:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 7px 5px 56px -10px #4355FF !important; /* Усиленная синяя тень при нажатии */
}

/* Отключенные зеленые кнопки */
.material-card-btns .ant-btn-default.material-card-main-green-btn[disabled],
.material-card-btns .ant-btn-default.material-card-main-green-btn:disabled {
  color: #fff !important; /* Белый текст */
  opacity: 0.7 !important; /* Полупрозрачность */
}

/* Добавляем ту же иконку стрелки для зеленых кнопок */
.material-card-btns .ant-btn-default.material-card-main-green-btn span::after {
  content: ''; /* Пустое содержимое */
  /* Та же SVG иконка стрелки */
  background-image: url("https://con.xl.ru/lLDQDOKQ20C-M-7k4pEIvQ/images/w_qwD4uiRk6MEFfkkpcRfQ.svg");
  display: inline-block; /* Блочно-строчный */
  width: 20px; /* Ширина псевдоэлемента */
  height: 15px; /* Высота псевдоэлемента */
  background-size: 20px 15px; /* подберите нужный размер */
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 12px; /* Отступ слева */
  vertical-align: middle; /* Выравнивание по центру */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК (ОБЩИЕ)
   ============================================== */

/* Основные стили для всех карточек материалов */
.shadow-sm.material-card {
  border-radius: 20px !important; /* Округлые углы карточки */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем содержимое за границами */
}

/* Округлые углы только для верхней части изображения в карточке */
.shadow-sm.material-card .material-card-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* Стили для карточек папок курсов */
.material-card[data-testid="course-folder-card"] {
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Тень */
  overflow: hidden; /* Скрываем переполнение */
}

/* Округлые углы для изображений в карточках папок */
.material-card[data-testid="course-folder-card"] .material-card-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* ==============================================
   СТИЛИ ДЛЯ ПРОГРЕСС-БАРОВ
   ============================================== */

/* Цвет заполненной части прогресс-бара - делаем оранжевым */
.material-card-progress .ant-progress-bg, 
.material-card-progress .ant-progress-success-bg {
  background-color: #3644CC !important; /* Оранжевый цвет прогресса */
}

/* Цвет текста текущего шага - делаем зеленым */
.material-card-progress-current-name span {
  color: #4355FF !important; /* Зеленый цвет текста */
}

/* Цвет процентов в прогресс-баре - зеленый */
.material-card-progress .ant-progress-text {
  color: #4355FF !important; /* Зеленый цвет процентов */
}

/* Цвет заголовка "Описание" в карточках библиотеки */
.material-card-content [data-testid="lib-desc"] .fw-600.secondary-text {
  color: #4355FF !important; /* Зеленый цвет заголовка */
}

/* ==============================================
   СТИЛИ ДЛЯ ХЛЕБНЫХ КРОШЕК (BREADCRUMBS)
   ============================================== */

/* Скрываем стандартную иконку дома в хлебных крошках */
.ant-breadcrumb-link .anticon-home svg {
  display: none !important; /* Полностью скрываем SVG иконку */
}

/* Заменяем иконку дома на кастомную */
.ant-breadcrumb-link .anticon-home {
  /* Кастомная SVG иконка стрелки назад в кружке */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1601 11.9999C20.1601 16.5119 16.5121 20.1599 12.0001 20.1599C7.48809 20.1599 3.84009 16.5119 3.84009 11.9999C3.84009 7.48791 7.48809 3.83991 12.0001 3.83991C16.5121 3.83991 20.1601 7.48791 20.1601 11.9999ZM4.80009 11.9999C4.80009 15.9839 8.01609 19.1999 12.0001 19.1999C15.9841 19.1999 19.2001 15.9839 19.2001 11.9999C19.2001 8.01591 15.9841 4.79991 12.0001 4.79991C8.01609 4.79991 4.80009 8.01591 4.80009 11.9999Z' fill='%234355FF'/%3E%3Cpath d='M12.816 8.01601L8.83204 12L12.816 15.984L12.144 16.656L7.48804 12L12.144 7.344L12.816 8.01601Z' fill='%234355FF'/%3E%3Cpath d='M8.15991 12.48V11.52H16.3199V12.48H8.15991Z' fill='%234355FF'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; /* Не повторяем изображение */
  background-position: center !important; /* Центрируем изображение */
  background-size: 34px 34px !important; /* Размер изображения */
  display: inline-block !important; /* Блочно-строчный элемент */
  width: 34px !important; /* Ширина контейнера */
  height: 34px !important; /* Высота контейнера */
  vertical-align: middle !important; /* Выравнивание по центру строки */
}

/* ==============================================
   СТИЛИ ДЛЯ ГОРИЗОНТАЛЬНОГО МЕНЮ
   ============================================== */

/* Цвет активных и наведенных элементов горизонтального меню */
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-active, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-open, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-selected, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item:hover, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-active, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-open, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-selected, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu:hover {
    color: #4355FF !important; /* Синий цвет текста */
}

/* Цвет содержимого пунктов меню при наведении */
.ant-menu-item:hover .ant-menu-title-content {
    color: #4355FF !important; /* Синий цвет при наведении */
}

/* Цвет подчеркивания активных элементов меню */
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-active:after, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-open:after, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-selected:after, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item:hover:after, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-active:after, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-open:after, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-selected:after, 
.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu:hover:after {
    border-bottom: 2px solid #4355FF !important; /* Синее подчеркивание толщиной 2px */
}

/* ==============================================
   СТИЛИ ДЛЯ ПОЛЯ ПОИСКА
   ============================================== */

/* Общий контейнер поля поиска */
.ant-input-group-wrapper {
  border-radius: 15px !important; /* Очень округлые углы */
  height: 59px !important; /* Высота поля */
  border: 1px solid #E6E6E3 !important; /* Светло-серая рамка */
  overflow: hidden !important; /* Скрываем переполнение */
}

/* Обертка для поля ввода */
.ant-input-group-wrapper .ant-input-wrapper {
  height: 100% !important; /* Полная высота */
  background: #E6E6E3 !important; /* Светло-серый фон */
}

/* Контейнер с префиксом и суффиксом */
.ant-input-group-wrapper .ant-input-affix-wrapper {
  height: 100% !important; /* Полная высота */
  background: #E6E6E3 !important; /* Светло-серый фон */
  border: none !important; /* Убираем рамку */
  box-shadow: none !important; /* Убираем тень */
}

/* Само поле ввода */
.ant-input-group-wrapper .ant-input {
  background: #E6E6E3 !important; /* Светло-серый фон */
  height: 100% !important; /* Полная высота */
  border: none !important; /* Убираем рамку */
  color: rgba(39, 2, 54, 0.6) !important; /* Темно-фиолетовый цвет текста с прозрачностью */
}

/* Дополнение к полю ввода (выпадающий список) */
.ant-input-group-wrapper .ant-input-group-addon {
  height: 100% !important; /* Полная высота */
  background: #E6E6E3 !important; /* Светло-серый фон */
  border: none !important; /* Убираем рамку */
  border-left: 1px solid rgba(39, 2, 54, 0.2) !important; /* Левая разделительная линия */
}

/* Выпадающий список */
.ant-input-group-wrapper .ant-select {
  height: 100% !important; /* Полная высота */
  background: #E6E6E3 !important; /* Светло-серый фон */
}

/* Селектор выпадающего списка */
.ant-input-group-wrapper .ant-select-selector {
  height: 100% !important; /* Полная высота */
  display: flex !important; /* Flexbox для выравнивания */
  align-items: center !important; /* Центрирование по вертикали */
  background: #E6E6E3 !important; /* Светло-серый фон */
  border: none !important; /* Убираем рамку */
}

/* Цвет текста в выпадающем списке */
.ant-input-group-wrapper .ant-select-selection-item,
.ant-input-group-wrapper .ant-select-selection-search,
.ant-input-group-wrapper .ant-select-arrow {
  color: rgba(39, 2, 54, 0.6) !important; /* Темно-фиолетовый с прозрачностью */
}

/* Цвет иконок в поле поиска */
.ant-input-group-wrapper .anticon {
  color: rgba(39, 2, 54, 0.6) !important; /* Темно-фиолетовый с прозрачностью */
}

/* Убираем эффекты фокуса для всех элементов поиска */
.ant-input-group-wrapper .ant-input-affix-wrapper:focus,
.ant-input-group-wrapper .ant-input-affix-wrapper-focused,
.ant-input-group-wrapper .ant-input:focus,
.ant-input-group-wrapper .ant-select-focused .ant-select-selector,
.ant-input-group-wrapper .ant-select-open .ant-select-selector {
  box-shadow: none !important; /* Убираем тень при фокусе */
  border-color: transparent !important; /* Прозрачная рамка при фокусе */
}

/* Префикс поля ввода */
.ant-input-group-wrapper .ant-input-prefix {
  background: #E6E6E3 !important; /* Светло-серый фон */
}

/* Дополнительные стили для селекта */
.ant-select.ant-select-single.ant-select-show-arrow {
  background: #E6E6E3 !important; /* Светло-серый фон */
}

/* Цвет плейсхолдера в поле ввода */
.ant-input-group-wrapper .ant-input::placeholder {
  color: rgba(39, 2, 54, 0.6) !important; /* Темно-фиолетовый с прозрачностью */
}

/* Цвет выбранного элемента в выпадающем списке */
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: rgba(67, 85, 255, 1) !important; /* Зеленый фон с прозрачностью */
}



/* ==============================================
   КАСТОМНЫЕ СТИЛИ ДЛЯ БЛОКА С КЛУБОМ
   ============================================== */

/* Отступ сверху для кастомного блока */
.custom-box {
  padding-top: 15px;
}

/* Стили для ссылки внутри кастомного блока */
.custom-box > a {
  display: flex; /* Flexbox */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  gap: 30px; /* Промежуток между элементами */
}

/* Специальные стили для блока без клуба */
.custom-box.no-club > a {
  text-align: center; /* Центрирование текста */
  border: 1px solid #4355FF; /* Зеленая рамка */
  padding: 15px; /* Внутренние отступы */
  border-radius: 10px; /* Округлые углы */
  max-width: 180px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование блока */
}

/* Скрываем изображение в блоке без клуба */
.custom-box.no-club > a > img {
  display: none; /* Полностью скрываем изображение */
}

/* Стили для параграфа в кастомном блоке */
.custom-box > a p {
  margin-bottom: 0; /* Убираем нижний отступ */
  color: #4355FF; /* Зеленый цвет текста */
}

/* Делаем текст заглавными буквами в блоке без клуба */
.custom-box.no-club > a p {
  text-transform: uppercase; /* Все буквы заглавные */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК ЛИЦЕНЗИЙ
   ============================================== */

/* Основные стили карточки лицензии */
.license-card {
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
}

/* Округлые углы для превью лицензии */
.license-card-preview-placeholder,
.license-card-preview-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* Кнопка навигации в карточке лицензии */
.license-card-navigate-button {
  border-radius: 10px !important; /* Округлые углы */
  height: 60px !important; /* Высота кнопки */
  background: #4355FF !important; /* Зеленый фон */
  border-color: #4355FF !important; /* Зеленая рамка */
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 15px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход при наведении */
  color: white !important; /* Белый цвет текста */
}

/* Эффект наведения для кнопки навигации */
.license-card-navigate-button:hover {
  background: #3644CC !important; /* Оранжевый фон при наведении */
  border-color: #3644CC !important; /* Оранжевая рамка при наведении */
  box-shadow: 7px 5px 56px -14px #4355FF !important; /* Синяя тень при наведении */
}

/* Эффект нажатия для кнопки навигации */
.license-card-navigate-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 7px 5px 56px -10px #4355FF !important; /* Усиленная синяя тень при нажатии */
}

/* Позиционирование текста в кнопке навигации */
.license-card-navigate-button span {
  position: relative; /* Относительное позиционирование */
  display: inline-flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
}

/* Добавляем иконку стрелки к кнопке навигации */
.license-card-navigate-button span::after {
  content: ''; /* Пустое содержимое для псевдоэлемента */
  /* SVG иконка стрелки в белом кружке */
  background-image: url("https://con.xl.ru/lLDQDOKQ20C-M-7k4pEIvQ/images/w_qwD4uiRk6MEFfkkpcRfQ.svg");
  display: inline-block; /* Блочно-строчный элемент */
  width: 20px; /* Ширина псевдоэлемента */
  height: 15px; /* Высота псевдоэлемента */
  background-size: 20px 15px; /* подберите нужный размер */
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 12px; /* Отступ слева от текста */
  vertical-align: middle; /* Выравнивание по центру строки */
}

/* Стили для отключенных кнопок навигации */
.license-card-navigate-button[disabled],
.license-card-navigate-button:disabled {
  color: #fff !important; /* Белый цвет текста */
  opacity: 0.7 !important; /* Полупрозрачность */
}

/* Скрываем иконку у отключенных кнопок навигации */
.license-card-navigate-button[disabled] span::after,
.license-card-navigate-button:disabled span::after {
  display: none !important; /* Полностью скрываем иконку */
}

/* Заголовок карточки лицензии */
.license-card-title {
  color: #333 !important; /* Темно-серый цвет */
  font-weight: 500 !important; /* Средняя жирность шрифта */
}

/* Метка активности лицензии */
.license-card-activity-label[data-active="true"] {
  color: #4355FF !important; /* Синий цвет для активных лицензий */
}

/* Цвет успеха в метке активности */
.license-card-activity-label[data-active="true"] .color-success {
  color: #4355FF !important; /* Синий цвет */
}

/* Иконки в карточках лицензий */
.license-card .anticon {
  color: #4355FF !important; /* Синий цвет иконок */
}

/* ==============================================
   СТИЛИ ДЛЯ ПАГИНАЦИИ
   ============================================== */

/* Активная страница в пагинации */
.pagination .ant-pagination-item-active {
  border-color: #4355FF !important; /* Зеленая рамка для активной страницы */
}

/* Ссылка активной страницы */
.pagination .ant-pagination-item-active a {
  color: #4355FF !important; /* Зеленый цвет текста */
}

/* Эффект наведения на кнопки пагинации */
.pagination .ant-btn:hover {
  color: #3644CC !important; /* Оранжевый цвет при наведении */
  border-color: #3644CC !important; /* Оранжевая рамка при наведении */
}

/* ==============================================
   СТИЛИ ДЛЯ ЗАГОЛОВКОВ РАЗДЕЛОВ
   ============================================== */

/* Заголовки в разделах лицензий, подписок и заказов */
#licenses .ant-typography,
#subscriptions .ant-typography,
#orders .ant-typography {
  color: #333 !important; /* Темно-серый цвет */
  margin-bottom: 20px !important; /* Нижний отступ */
}

/* ==============================================
   СТИЛИ ДЛЯ ПЕРЕКЛЮЧАТЕЛЕЙ (SWITCH)
   ============================================== */

/* Включенный переключатель */
.ant-switch.ant-switch-checked {
  background-color: #4355FF !important; /* Зеленый фон */
}

/* Эффект наведения на включенный переключатель */
.ant-switch.ant-switch-checked:hover {
  background-color: #3644CC !important; /* Более темный зеленый при наведении */
}

/* Фокус на включенном переключателе */
.ant-switch.ant-switch-checked:focus {
  box-shadow: 0 0 0 2px rgba(95, 153, 138, 0.2) !important; /* Зеленое свечение при фокусе */
}

/* Анимация клика на переключателе */
.ant-switch.ant-switch-checked .ant-click-animating-node {
  background-color: #4355FF !important; /* Зеленый цвет анимации */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК ПОДПИСОК
   ============================================== */

/* Основные стили карточки подписки */
.subscription-card {
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
}

/* Округлые углы для превью подписки */
.subscription-card-preview-placeholder,
.subscription-card-preview-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* Кнопка оплаты в карточке подписки */
.subscription-card-pay-button {
  border-radius: 10px !important; /* Округлые углы */
  height: 60px !important; /* Высота кнопки */
  background: #4355FF !important; /* Зеленый фон */
  border-color: #4355FF !important; /* Зеленая рамка */
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 15px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход при наведении */
  color: white !important; /* Белый цвет текста */
}

/* Эффект наведения для кнопки оплаты */
.subscription-card-pay-button:hover {
  background: #3644CC !important; /* Синий фон при наведении */
  border-color: #3644CC !important; /* Синяя рамка при наведении */
  box-shadow: 7px 5px 56px -14px #4355FF !important; /* Синяя тень при наведении */
}

/* Эффект нажатия для кнопки оплаты */
.subscription-card-pay-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 7px 5px 56px -10px #4355FF !important; /* Усиленная синяя тень при нажатии */
}

/* Отключенная кнопка оплаты */
.subscription-card-pay-button[disabled],
.subscription-card-pay-button:disabled {
  color: #fff !important; /* Белый цвет текста */
  opacity: 0.7 !important; /* Полупрозрачность */
}

/* Метка активности подписки */
.subscription-card-activity-label[data-active="true"] .color-success {
  color: #4355FF !important; /* Зеленый цвет для активных подписок */
}

/* Заголовок карточки подписки */
.subscription-card-title {
  color: #333 !important; /* Темно-серый цвет */
  font-weight: 500 !important; /* Средняя жирность шрифта */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК ЗАКАЗОВ
   ============================================== */

/* Основные стили карточки заказа */
.order-card {
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
}

/* Округлые углы для превью заказа */
.order-card-preview-placeholder,
.order-card-preview-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* Кнопка оплаты в карточке заказа */
.order-card-pay-button {
  border-radius: 10px !important; /* Округлые углы */
  height: 60px !important; /* Высота кнопки */
  background: #4355FF !important; /* Зеленый фон */
  border-color: #4355FF !important; /* Зеленая рамка */
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 15px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход при наведении */
  color: white !important; /* Белый цвет текста */
}

/* Эффект наведения для кнопки оплаты заказа */
.order-card-pay-button:hover {
  background: #3644CC !important; /* Синий фон при наведении */
  border-color: #3644CC !important; /* Синяя рамка при наведении */
  box-shadow: 7px 5px 56px -14px #4355FF !important; /* Синяя тень при наведении */
}

/* Эффект нажатия для кнопки оплаты заказа */
.order-card-pay-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 7px 5px 56px -10px #4355FF !important; /* Усиленная синяя тень при нажатии */
}

/* Отключенная кнопка оплаты заказа */
.order-card-pay-button[disabled],
.order-card-pay-button:disabled {
  color: #fff !important; /* Белый цвет текста */
  opacity: 0.7 !important; /* Полупрозрачность */
  background: #D9D9D9 !important; /* Серый фон для отключенной кнопки */
  border-color: #BCBCBC !important; /* Серая рамка для отключенной кнопки */
}

/* Метка оплаченного заказа */
.order-card-activity-label[data-paid="true"] .color-success {
  color: #4355FF !important; /* Зеленый цвет для оплаченных заказов */
}

/* Заголовок карточки заказа */
.order-card-title {
  color: #333 !important; /* Темно-серый цвет */
  font-weight: 500 !important; /* Средняя жирность шрифта */
}

/* ==============================================
   СТИЛИ ДЛЯ ТАБЛИЦ БЕЗ ГРАНИЦ СТРОК
   ============================================== */

/* Основной контейнер таблицы с кастомным дизайном */
.ant-table-wrapper._noRowBorder_1ftkt_24 {
  position: relative; /* Относительное позиционирование */
  background-color: rgba(229, 229, 229, 0.5) !important; /* Светло-серый полупрозрачный фон */
  border-radius: 16px !important; /* Округлые углы */
  box-shadow: 0 4px 20px rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  padding: 21px 24px 21px 130px !important; /* Отступы: сверху/снизу 21px, справа 24px, слева 130px для логотипа */
  transition: background-color 0.3s ease !important; /* Плавный переход цвета фона */
  width: 100% !important; /* Полная ширина */
  box-sizing: border-box !important; /* Включаем padding в общую ширину */
}

/* Таблица занимает всю доступную ширину */
.ant-table-wrapper._noRowBorder_1ftkt_24 table {
  width: 100% !important; /* Полная ширина */
  table-layout: fixed !important; /* Фиксированная раскладка таблицы */
}

/* Все вложенные элементы таблицы занимают полную ширину */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-spin-nested-loading,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-spin-container,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-container,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-content {
  width: 100% !important; /* Полная ширина для всех элементов */
}

/* Строка таблицы как flex-контейнер */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-row {
  width: 100% !important; /* Полная ширина */
  display: flex !important; /* Flexbox для расположения ячеек */
  align-items: center !important; /* Центрирование по вертикали */
  justify-content: space-between !important; /* Равномерное распределение */
}

/* Адаптивность для мобильных устройств */
@media screen and (max-width: 768px) {
  .ant-table-wrapper._noRowBorder_1ftkt_24 {
    width: 100% !important; /* Полная ширина */
    overflow: hidden !important; /* Скрываем переполнение */
  }
}

/* Эффект наведения: сохраняем тот же фон */
.ant-table-wrapper._noRowBorder_1ftkt_24:hover {
  background-color: rgba(229, 229, 229, 0.5) !important; /* Тот же цвет при наведении */
}

/* При наведении все вложенные элементы остаются прозрачными */
.ant-table-wrapper._noRowBorder_1ftkt_24:hover .ant-spin-nested-loading,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover .ant-spin-container,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover .ant-table,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover .ant-table-container,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover .ant-table-content,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover .ant-table-row,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover thead,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover tbody,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover tr,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover th,
.ant-table-wrapper._noRowBorder_1ftkt_24:hover td {
  background-color: transparent !important; /* Прозрачный фон для всех элементов */
}

/* Прозрачный фон для всех элементов таблицы */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-spin-nested-loading,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-spin-container,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-container,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-content,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-row,
.ant-table-wrapper._noRowBorder_1ftkt_24 table,
.ant-table-wrapper._noRowBorder_1ftkt_24 colgroup,
.ant-table-wrapper._noRowBorder_1ftkt_24 thead,
.ant-table-wrapper._noRowBorder_1ftkt_24 tbody,
.ant-table-wrapper._noRowBorder_1ftkt_24 tr,
.ant-table-wrapper._noRowBorder_1ftkt_24 th,
.ant-table-wrapper._noRowBorder_1ftkt_24 td {
  background-color: transparent !important; /* Прозрачный фон */
  background-image: none !important; /* Убираем фоновые изображения */
}

/* Логотип слева от таблицы */
.ant-table-wrapper._noRowBorder_1ftkt_24::before {
  content: ""; /* Пустое содержимое для псевдоэлемента */
  position: absolute; /* Абсолютное позиционирование */
  top: 21px; /* Отступ сверху */
  bottom: 21px; /* Отступ снизу */
  left: 24px; /* Отступ слева */
  width: 90px; /* Ширина области логотипа */
  background-image: url("https://con.xl.ru/lLDQDOKQ20C-M-7k4pEIvQ/images/9neNpbGSJUSU9CA-znfdjA.png"); /* Логотип */
  background-position: center; /* Центрирование изображения */
  background-size: contain; /* Изображение помещается полностью */
  background-repeat: no-repeat; /* Не повторяем изображение */
  z-index: 10; /* Высокий z-index для отображения поверх других элементов */
  border-radius: 8px; /* Небольшие округлые углы */
  display: block !important; /* Принудительно показываем элемент */
}

/* Скрываем заголовки таблицы */
.ant-table-wrapper._noRowBorder_1ftkt_24 colgroup,
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-thead {
  display: none !important; /* Полностью скрываем заголовки */
}

/* Строка таблицы как flex-контейнер (дублирование для уверенности) */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-row {
  display: flex !important; /* Flexbox */
  align-items: center !important; /* Центрирование по вертикали */
  justify-content: space-between !important; /* Равномерное распределение */
}

/* Первая ячейка (название) */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(1) {
  flex: 1 1 auto !important; /* Занимает всё доступное пространство */
  font-weight: 600 !important; /* Жирный шрифт */
  font-size: 16px !important; /* Размер шрифта */
  padding: 0 !important; /* Убираем отступы */
  text-transform: uppercase !important; /* Заглавные буквы */
}

/* Вторая ячейка (комиссия) */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(2) {
  display: flex !important; /* Flexbox */
  flex-direction: column !important; /* Вертикальное расположение */
  font-size: 14px !important; /* Размер шрифта */
  color: #333 !important; /* Темно-серый цвет */
  padding: 0 !important; /* Убираем отступы */
  margin-top: 8px !important; /* Верхний отступ */
  margin-right: 8px !important; /* Правый отступ */
}

/* Добавляем текст "Commission" перед содержимым второй ячейки */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(2)::before {
  content: "Commission" !important; /* Текст заголовка */
  font-weight: 400 !important; /* Обычная жирность */
  color: #333 !important; /* Темно-серый цвет */
  margin-bottom: 4px; /* Отступ снизу */
}

/* Стилизация содержимого статистики во второй ячейке */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(2) .ant-statistic-content {
  content: "" !important; /* Пустое содержимое */
  display: block !important; /* Блочный элемент */
  margin-top: 4px !important; /* Верхний отступ */
  color: rgba(0, 0, 0, 0.6) !important; /* Серый цвет с прозрачностью */
}

/* Третья ячейка скрыта */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(3) {
  display: none !important; /* Полностью скрываем третью ячейку */
}

/* Четвертая ячейка (кнопка действия) */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(4) {
  padding: 0 !important; /* Убираем отступы */
  text-align: right !important; /* Выравнивание по правому краю */
}

/* Ссылка в четвертой ячейке стилизована как кнопка */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(4) a {
  display: flex !important; /* Flexbox */
  align-items: center !important; /* Центрирование по вертикали */
  justify-content: center !important; /* Центрирование по горизонтали */
  padding: 8px 16px !important; /* Внутренние отступы */
  background-color: #4355FF !important; /* Зеленый фон */
  color: #fff !important; /* Белый текст */
  border-radius: 20px !important; /* Округлые углы */
  font-size: 12px !important; /* Маленький размер шрифта */
  text-transform: uppercase !important; /* Заглавные буквы */
  white-space: nowrap !important; /* Запрещаем перенос строк */
  transition: background-color 0.3s ease !important; /* Плавный переход фона */
}

/* Эффект наведения на ссылку */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(4) a:hover {
  background-color: #3644CC !important; /* Более темный зеленый при наведении */
}

/* Добавляем иконку после текста ссылки */
.ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(4) a::after {
  content: "" !important; /* Пустое содержимое */
  width: 16px !important; /* Ширина иконки */
  height: 16px !important; /* Высота иконки */
  margin-left: 8px !important; /* Отступ слева */
  background-image: url("https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/_l4WFkGg-U-8xfAHX1_gmA.png") !important; /* Иконка */
  background-position: center !important; /* Центрирование */
  background-size: contain !important; /* Изображение помещается полностью */
  background-repeat: no-repeat !important; /* Не повторяем */
}

/* Мобильные стили для таблицы */
@media screen and (max-width: 768px) {
  /* Основной контейнер на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 {
    padding: 16px!important; /* Уменьшенные отступы */
    margin: 0 auto!important; /* Центрирование */
    width: auto!important; /* Автоширина */
  }
  
  /* Строка таблицы в столбец на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-row {
    display: flex!important; /* Flexbox */
    flex-direction: column!important; /* Вертикальное расположение */
    align-items: center!important; /* Центрирование */
  }
  
  /* Все ячейки на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell {
    display: block!important; /* Блочные элементы */
    width: 100%!important; /* Полная ширина */
    padding: 8px 0!important; /* Вертикальные отступы */
    margin: 0!important; /* Убираем отступы */
    text-align: center!important; /* Центрирование текста */
    box-sizing: border-box!important; /* Включаем padding в ширину */
  }
  
  /* Скрываем логотип на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24::before {
    display: none!important; /* Полностью скрываем */
  }
  
  /* Первая ячейка с логотипом сверху на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(1) {
    position: relative!important; /* Относительное позиционирование */
    padding-top: 140px!important; /* Отступ сверху для логотипа */
  }
  
  /* Логотип для первой ячейки на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(1)::before {
    content: ""!important; /* Пустое содержимое */
    position: absolute!important; /* Абсолютное позиционирование */
    top: 0!important; /* Позиция сверху */
    left: 50%!important; /* Позиция слева - центр */
    transform: translateX(-50%)!important; /* Центрирование по горизонтали */
    width: 120px!important; /* Ширина логотипа */
    height: 120px!important; /* Высота логотипа */
    background: url("https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/eErPZVGSZEiEcrzF-J4vAw.png") center/contain no-repeat!important; /* Логотип */
    border-radius: 8px!important; /* Округлые углы */
  }
  
  /* Содержимое первой ячейки на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(1) > * {
    margin-top: 8px!important; /* Верхний отступ */
    line-height: 1.3!important; /* Высота строки */
  }
  
  /* Заголовок в первой ячейке на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(1) h3 {
    font-size: 18px!important; /* Размер шрифта */
    font-weight: 600!important; /* Жирность */
    text-transform: uppercase!important; /* Заглавные буквы */
    color: #333!important; /* Темно-серый цвет */
  }
  
  /* Параграф в первой ячейке на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(1) p {
    font-size: 14px!important; /* Размер шрифта */
    color: #666!important; /* Серый цвет */
  }
  
  /* Пространство во второй ячейке на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(2) .ant-space.ant-space-horizontal {
    display: flex!important; /* Flexbox */
    width: 100%!important; /* Полная ширина */
    justify-content: center!important; /* Центрирование */
    margin: 0!important; /* Убираем отступы */
    padding: 0!important; /* Убираем внутренние отступы */
  }
  
  /* Элементы пространства на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(2) .ant-space-item {
    margin: 0!important; /* Убираем отступы */
  }
  
  /* Ссылка в третьей ячейке на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(3) a {
    display: inline-block!important; /* Блочно-строчный элемент */
    width: auto!important; /* Автоширина */
    max-width: 100%!important; /* Максимальная ширина */
    margin: 16px auto 0!important; /* Отступы с центрированием */
    padding: 12px 16px!important; /* Внутренние отступы */
    white-space: normal!important; /* Разрешаем перенос строк */
    word-break: break-word!important; /* Разрыв длинных слов */
    text-align: center!important; /* Центрирование текста */
    border-radius: 20px!important; /* Округлые углы */
    background-color: #4355FF !important; /* Зеленый фон */
    color: #fff!important; /* Белый текст */
  }
  
  /* Ссылка в четвертой ячейке на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24 .ant-table-cell:nth-child(4) a {
    display: inline-block !important; /* Блочно-строчный элемент */
    width: auto !important; /* Автоширина */
    max-width: 100% !important; /* Максимальная ширина */
    margin: 16px auto 0 !important; /* Отступы с центрированием */
    padding: 12px 16px !important; /* Внутренние отступы */
    white-space: normal !important; /* Разрешаем перенос строк */
    word-break: break-word !important; /* Разрыв длинных слов */
    text-align: center !important; /* Центрирование текста */
  }
 
  /* Мелкий серый текст в четвертой ячейке на мобильных */
  .ant-table-wrapper._noRowBorder_1ftkt_24
    .ant-table-cell:nth-child(4)
    .fs-10.text-gray-6 {
    display: block !important; /* Блочный элемент */
    width: 100% !important; /* Полная ширина */
    text-align: center !important; /* Центрирование текста */
    margin: 0 auto !important; /* Центрирование блока */
  }
}

/* ==============================================
   СТИЛИ ДЛЯ КНОПОК И КАРТОЧЕК В ПЕРВОМ БЛОКЕ mb-40
   ============================================== */

/* Кнопки по умолчанию в первом блоке */
.mb-40:first-of-type .ant-btn-default {
  border-radius: 10px !important; /* Округлые углы */
  padding: 0 20px !important; /* Внутренние отступы */
  height: 40px !important; /* Высота кнопки */
  transition: all 0.3s ease !important; /* Плавный переход */
}

/* Эффект наведения на кнопки в первом блоке */
.mb-40:first-of-type .ant-btn-default:hover {
  color: #4355FF !important; /* Зеленый цвет текста при наведении */
  border-color: #4355FF !important; /* Зеленая рамка при наведении */
}

/* Карточки в первом блоке */
.mb-40:first-of-type .ant-card.ant-card-bordered {
  border: 1px solid #CCCCCC; /* Серая рамка */
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
  transition: all 0.3s ease !important; /* Плавный переход */
}

/* Содержимое карточек в первом блоке */
.mb-40:first-of-type .ant-card-body {
  background-color: #ffffff !important; /* Белый фон */
  padding: 20px !important; /* Внутренние отступы */
  position: relative !important; /* Относительное позиционирование */
  display: flex !important; /* Flexbox */
  flex-direction: row !important; /* Горизонтальное расположение */
  align-items: center !important; /* Центрирование по вертикали */
  gap: 20px !important; /* Промежуток между элементами */
}

/* Иконка перед содержимым карточки в первом блоке */
.mb-40:first-of-type .ant-card-body::before {
  content: ''; /* Пустое содержимое */
  display: block !important; /* Блочный элемент */
  min-width: 50px !important; /* Минимальная ширина */
  height: 50px !important; /* Высота */
  background-color: #4355FF; /* Зеленый фон */
  border-radius: 10px !important; /* Округлые углы */
  background-repeat: no-repeat !important; /* Не повторяем изображение */
  background-position: center !important; /* Центрирование изображения */
  background-size: 24px !important; /* Размер изображения */
  flex-shrink: 0 !important; /* Не сжимается */
}

/* Статистика в карточках первого блока */
.mb-40:first-of-type .ant-card-body .ant-statistic {
  display: flex !important; /* Flexbox */
  flex-direction: column-reverse !important; /* Обратный порядок (значение сверху, заголовок снизу) */
  flex-grow: 1 !important; /* Занимает всё доступное пространство */
}

/* Заголовок статистики в первом блоке */
.mb-40:first-of-type .ant-statistic-title {
  font-size: 14px !important; /* Размер шрифта */
  color: rgba(0, 0, 0, 0.6) !important; /* Серый цвет с прозрачностью */
  margin-top: 5px !important; /* Верхний отступ */
  margin-bottom: 0 !important; /* Убираем нижний отступ */
}

/* Значение статистики в первом блоке */
.mb-40:first-of-type .ant-statistic-content {
  font-size: 28px !important; /* Крупный размер шрифта */
  font-weight: 600 !important; /* Жирный шрифт */
  color: #333 !important; /* Темно-серый цвет */
  margin-bottom: 0 !important; /* Убираем нижний отступ */
  line-height: 1.2 !important; /* Высота строки */
}

/* Пространство в карточках первого блока */
.mb-40:first-of-type .ant-card-body .ant-space {
  flex-grow: 1 !important; /* Занимает всё доступное пространство */
}

/* Иконки для разных карточек в первом блоке */
/* Первая карточка */
.mb-40:first-of-type .flex.flex-wrap.gap-20 .ant-card:nth-child(1) .ant-card-body::before {
  background-image: url("https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/i8Un577bTUiTWAfC4ukoAA.png");
}

/* Вторая карточка */
.mb-40:first-of-type .flex.flex-wrap.gap-20 .ant-card:nth-child(2) .ant-card-body::before {
  background-image: url("https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/GzHHi1PoX0Gryi7aCy6HDw.png");
}

/* Третья карточка */
.mb-40:first-of-type .flex.flex-wrap.gap-20 .ant-card:nth-child(3) .ant-card-body::before {
  background-image: url("https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/Fk0s08g3eEuqlsXJ1lpaUA.png");
}

/* Четвертая карточка */
.mb-40:first-of-type .flex.flex-wrap.gap-20 .ant-card:nth-child(4) .ant-card-body::before {
  background-image: url("https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/JRAy2l1XU0irEfP98_q7Xw.png");
}

/* Пятая карточка */
.mb-40:first-of-type .flex.flex-wrap.gap-20 .ant-card:nth-child(5) .ant-card-body::before {
  background-image: url("https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/4ETw4mwti0OYkGidlI-v1Q.png");
}

/* Эффект наведения на карточки в первом блоке */
.mb-40:first-of-type .ant-card.ant-card-bordered:hover {
  transform: translateY(-5px); /* Поднимаем карточку на 5px */
  box-shadow: 0 10px 30px 0 rgba(128, 128, 128, 0.2) !important; /* Усиленная тень */
}

/* Заголовок второго уровня в первом блоке */
.mb-40:first-of-type > div > h2.ant-typography {
  font-size: 24px !important; /* Размер шрифта */
  font-weight: 600 !important; /* Жирный шрифт */
  color: #333 !important; /* Темно-серый цвет */
}

/* Убираем иконку ::before для всех остальных блоков mb-40 */
.mb-40:not(:first-of-type) .ant-card-body::before {
  content: none !important; /* Убираем содержимое */
  display: none !important; /* Полностью скрываем */
}

/* Выравнивание содержимого статистики в первом блоке */
.mb-40:first-of-type .ant-statistic-content .ant-space {
  justify-content: flex-start !important; /* Выравнивание по левому краю */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК В ДРУГИХ БЛОКАХ mb-40
   ============================================== */

/* Карточки в блоках после заголовка или после flex-блока */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-card.ant-card-bordered,
.mb-40 h2.ant-typography + .mb-24 .ant-card.ant-card-bordered {
  border: 1px solid #CCCCCC; /* Серая рамка */
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
  transition: all 0.3s ease !important; /* Плавный переход */
}

/* Содержимое карточек в других блоках */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-card-body,
.mb-40 h2.ant-typography + .mb-24 .ant-card-body {
  background-color: #ffffff !important; /* Белый фон */
  padding: 20px !important; /* Внутренние отступы */
  position: relative !important; /* Относительное позиционирование */
  display: flex !important; /* Flexbox */
  flex-direction: row !important; /* Горизонтальное расположение */
  align-items: center !important; /* Центрирование по вертикали */
  gap: 20px !important; /* Промежуток между элементами */
}

/* Иконка перед содержимым в других блоках */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-card-body::before,
.mb-40 h2.ant-typography + .mb-24 .ant-card-body::before {
  content: '' !important; /* Пустое содержимое */
  display: block !important; /* Блочный элемент */
  min-width: 50px !important; /* Минимальная ширина */
  height: 50px !important; /* Высота */
  background-color: #4355FF; /* Зеленый фон */
  border-radius: 10px !important; /* Округлые углы */
  background-repeat: no-repeat !important; /* Не повторяем изображение */
  background-position: center !important; /* Центрирование изображения */
  background-size: 24px !important; /* Размер изображения */
  flex-shrink: 0 !important; /* Не сжимается */
}

/* Статистика в карточках других блоков */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-card-body .ant-statistic,
.mb-40 h2.ant-typography + .mb-24 .ant-card-body .ant-statistic {
  display: flex !important; /* Flexbox */
  flex-direction: column-reverse !important; /* Обратный порядок */
  flex-grow: 1 !important; /* Занимает всё доступное пространство */
}

/* Заголовок статистики в других блоках */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-statistic-title,
.mb-40 h2.ant-typography + .mb-24 .ant-statistic-title {
  font-size: 14px !important; /* Размер шрифта */
  color: rgba(0, 0, 0, 0.6) !important; /* Серый цвет с прозрачностью */
  margin-top: 5px !important; /* Верхний отступ */
  margin-bottom: 0 !important; /* Убираем нижний отступ */
}

/* Значение статистики в других блоках */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-statistic-content,
.mb-40 h2.ant-typography + .mb-24 .ant-statistic-content {
  font-size: 28px !important; /* Крупный размер шрифта */
  font-weight: 600 !important; /* Жирный шрифт */
  color: #333 !important; /* Темно-серый цвет */
  margin-bottom: 0 !important; /* Убираем нижний отступ */
  line-height: 1.2 !important; /* Высота строки */
}

/* Пространство в карточках других блоков */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-card-body .ant-space,
.mb-40 h2.ant-typography + .mb-24 .ant-card-body .ant-space {
  flex-grow: 1 !important; /* Занимает всё доступное пространство */
}

/* Иконки для карточек в других блоках */
/* Первая карточка */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(1) .ant-card-body::before,
.mb-40 h2.ant-typography + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(1) .ant-card-body::before {
  background-image: url('https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/ljvHLfJULkSHMtg40idYYQ.png') !important;
}

/* Вторая карточка */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(2) .ant-card-body::before,
.mb-40 h2.ant-typography + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(2) .ant-card-body::before {
  background-image: url('https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/MIpdtC_dfE-d-pxQE5U9uQ.png') !important;
}

/* Третья карточка */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(3) .ant-card-body::before,
.mb-40 h2.ant-typography + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(3) .ant-card-body::before {
  background-image: url('https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/lj-mObXqJU-58Kt4MJ4NFw.png') !important;
}

/* Четвертая карточка */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(4) .ant-card-body::before,
.mb-40 h2.ant-typography + .mb-24 .flex.flex-wrap.gap-20 .ant-card:nth-child(4) .ant-card-body::before {
  background-image: url('https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/poD7sSCGdU2kLBVCDbMD_A.png') !important;
}

/* Эффект наведения на карточки в других блоках */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-card.ant-card-bordered:hover,
.mb-40 h2.ant-typography + .mb-24 .ant-card.ant-card-bordered:hover {
  transform: translateY(-5px); /* Поднимаем карточку */
  box-shadow: 0 10px 30px 0 rgba(128, 128, 128, 0.2) !important; /* Усиленная тень */
}

/* Правая иконка в карточках других блоков */
.mb-40 .mb-24.flex.gap-10 + .mb-24 ._right_icon_z0nuh_15,
.mb-40 h2.ant-typography + .mb-24 ._right_icon_z0nuh_15 {
  position: absolute; /* Абсолютное позиционирование */
  right: 20px; /* Позиция справа */
  color: #3498db; /* Синий цвет */
}

/* Выравнивание содержимого статистики в других блоках */
.mb-40 .mb-24.flex.gap-10 + .mb-24 .ant-statistic-content .ant-space,
.mb-40 h2.ant-typography + .mb-24 .ant-statistic-content .ant-space {
  justify-content: flex-start !important; /* Выравнивание по левому краю */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК ГЕЙМИФИКАЦИИ
   ============================================== */

/* Основная карточка геймификации */
.ant-card.ant-card-bordered.gamification-card {
  border: 1px solid #CCCCCC !important; /* Серая рамка */
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
  transition: all 0.3s ease !important; /* Плавный переход */
}

/* Карточки статистики в блоке геймификации */
.flex.gap-10.w-100.mt-20 .ant-card.ant-card-bordered.stat_card_1csvf_1 {
  border: 1px solid #CCCCCC !important; /* Серая рамка */
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
  transition: all 0.3s ease !important; /* Плавный переход */
}

/* Содержимое карточек статистики */
.flex.gap-10.w-100.mt-20 .ant-card-body {
  background-color: #ffffff !important; /* Белый фон */
  padding: 20px !important; /* Внутренние отступы */
  position: relative !important; /* Относительное позиционирование */
  display: flex !important; /* Flexbox */
  flex-direction: row !important; /* Горизонтальное расположение */
  align-items: center !important; /* Центрирование по вертикали */
  gap: 20px !important; /* Промежуток между элементами */
}

/* Иконка первой карточки статистики */
.flex.gap-10.w-100.mt-20 .ant-card:first-child .ant-card-body::before {
  content: '' !important; /* Пустое содержимое */
  display: block !important; /* Блочный элемент */
  min-width: 50px !important; /* Минимальная ширина */
  height: 50px !important; /* Высота */
  background-image: url('https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/MooQyUgCZ0CDvUUuH4Dbbw.png') !important; /* Иконка */
  background-repeat: no-repeat !important; /* Не повторяем */
  background-position: center !important; /* Центрирование */
  background-size: contain !important; /* Полное помещение изображения */
  flex-shrink: 0 !important; /* Не сжимается */
}

/* Иконка последней карточки статистики */
.flex.gap-10.w-100.mt-20 .ant-card:last-child .ant-card-body::before {
  content: '' !important; /* Пустое содержимое */
  display: block !important; /* Блочный элемент */
  min-width: 50px !important; /* Минимальная ширина */
  height: 50px !important; /* Высота */
  background-image: url('https://cdn.accelonline.io/WcWfHEjcdk2BCr7W486wPg/images/0x-6k-8sSESyv99E-ul6gA.png') !important; /* Иконка */
  background-repeat: no-repeat !important; /* Не повторяем */
  background-position: center !important; /* Центрирование */
  background-size: contain !important; /* Полное помещение изображения */
  flex-shrink: 0 !important; /* Не сжимается */
}

/* Статистика в карточках геймификации */
.flex.gap-10.w-100.mt-20 .ant-card-body .ant-statistic {
  display: flex !important; /* Flexbox */
  flex-direction: column-reverse !important; /* Обратный порядок */
  flex-grow: 1 !important; /* Занимает всё доступное пространство */
}

/* Заголовок статистики в геймификации */
.flex.gap-10.w-100.mt-20 .ant-statistic-title {
  font-size: 14px !important; /* Размер шрифта */
  color: rgba(0, 0, 0, 0.6) !important; /* Серый цвет с прозрачностью */
  margin-top: 5px !important; /* Верхний отступ */
  margin-bottom: 0 !important; /* Убираем нижний отступ */
}

/* Значение статистики в геймификации */
.flex.gap-10.w-100.mt-20 .ant-statistic-content {
  font-size: 28px !important; /* Крупный размер шрифта */
  font-weight: 600 !important; /* Жирный шрифт */
  color: #333 !important; /* Темно-серый цвет */
  margin-bottom: 0 !important; /* Убираем нижний отступ */
  line-height: 1.2 !important; /* Высота строки */
}

/* Универсальный селектор для всех карточек статистики */
[class*="ant-card"][class*="ant-card-bordered"][class*="stat_card_1csvf_1"] {
  border: 1px solid #CCCCCC !important; /* Серая рамка */
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden !important; /* Скрываем переполнение */
  transition: all 0.3s ease !important; /* Плавный переход */
}

/* Убираем нижний отступ у flex-контейнера с gap */
[class="flex gap-10 w-100 mt-20"] {
  margin-bottom: -20px !important; /* Отрицательный нижний отступ */
}

/* ==============================================
   СТИЛИ ДЛЯ ДОСТИЖЕНИЙ И ПРОДУКТОВ ГЕЙМИФИКАЦИИ
   ============================================== */

/* Контейнер достижения геймификации */
.gamification-achievement {
  background: rgba(229, 229, 229, 0.5) !important; /* Светло-серый полупрозрачный фон */
  border-radius: 20px; /* Округлые углы */
  padding: 15px; /* Внутренние отступы */
  margin-bottom: 10px; /* Нижний отступ */
}

/* Жирный зеленый текст в достижениях (очки, уровень) */
.gamification-achievement .fw-700.color-success.fs-24 {
  color: #4355FF !important; /* Зеленый цвет вместо стандартного color-success */
}

/* Изображение достижения */
.gamification-achievement .gamification-achievement__image {
  border-radius: 10px; /* Небольшие округлые углы */
}

/* Жирный заголовок достижения */
.gamification-achievement .fw-600.color-gray-9 {
  font-weight: 600; /* Жирность шрифта */
  margin-bottom: 5px; /* Нижний отступ */
}

/* Мелкий описательный текст */
.gamification-achievement .fs-12.color-gray-8 {
  opacity: 0.9; /* Небольшая прозрачность */
}

/* Контейнер продукта геймификации */
.gamification-product {
  background: rgba(229, 229, 229, 0.5); /* Светло-серый полупрозрачный фон */
  border-radius: 20px; /* Округлые углы */
  padding: 20px; /* Внутренние отступы */
}

/* Метка остатка продукта */
.gamification-product-card-remain-label {
  border-radius: 10px !important; /* Округлые углы */
}

/* Универсальный класс успеха - зеленый цвет */
.color-success {
  color: #4355FF !important; /* Зеленый цвет вместо стандартного */
}

/* Абсолютное позиционирование справа снизу */
.absolute.r-0.b-0 {
  position: absolute; /* Абсолютное позиционирование */
  right: 0; /* Позиция справа */
  bottom: 0; /* Позиция снизу */
}

/* На больших экранах (от 1100px) позиционируем по центру справа */
@media screen and (min-width: 1100px) {
  .absolute.r-0.b-0 {
    position: absolute; /* Абсолютное позиционирование */
    right: 20px; /* Отступ справа */
    top: 50%; /* Позиция по центру по вертикали */
    transform: translateY(-50%); /* Точное центрирование */
    bottom: auto; /* Убираем привязку к низу */
  }
}

/* Кнопка оплаты продукта геймификации */
.ant-col .gamification-product .gamification-product-card-pay-button.bg-success,
.ant-col .gamification-product .ant-btn[data-testid="pay-btn"] {
  background-color: transparent !important; /* Прозрачный фон по умолчанию */
  border-radius: 10px !important; /* Округлые углы */
}

/* Включенная (не отключенная) кнопка оплаты */
.ant-col .gamification-product .ant-btn[data-testid="pay-btn"]:not([disabled]) {
  background-color: #4355FF !important; /* Зеленый фон для активной кнопки */
}

/* ==============================================
   ЗАКЛЮЧИТЕЛЬНЫЙ КОММЕНТАРИЙ
   ============================================== */

/*
Этот CSS файл содержит кастомизацию для онлайн-школы, включающую:

1. Изменение цветовой схемы на зелено-оранжевую (#4355FF и #3644CC)
2. Стилизацию всех кнопок с округлыми углами и кастомными иконками
3. Модификацию карточек курсов, библиотек и различных разделов
4. Адаптивный дизайн для мобильных устройств
5. Кастомные таблицы с логотипами и специальной разметкой
6. Геймификацию с достижениями и продуктами
7. Замену стандартных иконок на кастомные SVG
8. Эффекты наведения и анимации для улучшения UX

Все стили используют !important для гарантированного применения
поверх стандартных стилей библиотеки Ant Design.
*/




</style>