/* ==============================================
   СИСТЕМА БАЛЛОВ И ДОСТИЖЕНИЙ — КОРИЧНЕВАЯ ТЕМА
   Стилизация в том же стиле, что и партнерская программа
   ============================================== */

/* ========== ОСНОВНЫЕ ЦВЕТА ДЛЯ НАСТРОЙКИ ========== */
/* 
ГЛАВНЫЕ ЦВЕТА ТЕМЫ (можете изменить на свои):
- Основной цвет: #8bbc97 (коричневый)
- Цвет при наведении: #459866 (темнее коричневый) 
- Белый цвет текста: #ffffff
- Серый текст: #333333
- Прозрачность: rgba(154,129,107,0.8) - для полупрозрачных элементов
*/

/* ===== ЗАГОЛОВКИ СТРАНИЦЫ ( "Баллы", "Достижения") ===== */
h1.fs-30.fw-600.color-gray-9 {
  color: #093c7a !important; /* ЦВЕТ ЗАГОЛОВКОВ - можете изменить на любой */
  font-weight: 600 !important; /* ЖИРНОСТЬ ТЕКСТА - 600 это полужирный */
  font-size: 30px !important; /* РАЗМЕР ШРИФТА ЗАГОЛОВКОВ - можете увеличить/уменьшить */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important; /* ТЕНЬ ДЛЯ ЛУЧШЕЙ ЧИТАЕМОСТИ */
}

/* ===== ОСНОВНЫЕ КАРТОЧКИ СИСТЕМЫ БАЛЛОВ И ДОСТИЖЕНИЙ ===== */
.ant-card.ant-card-bordered._gamification_card_1u4bb_1,
.ant-card.ant-card-bordered.gamification-card {
  border: 1px solid rgba(154,129,107,0.2) !important; /* РАМКА КАРТОЧКИ - полупрозрачная коричневая */
  border-radius: 20px !important; /* СКРУГЛЕНИЕ УГЛОВ КАРТОЧКИ - чем больше число, тем круглее */
  box-shadow: 0 4px 20px 0 rgba(154,129,107,0.15) !important; /* ТЕНЬ ВОД КАРТОЧКОЙ */
  overflow: hidden !important;
  transition: all 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ ПРИ НАВЕДЕНИИ */
  background-color: #ffffff !important; /* ФОН КАРТОЧКИ - белый */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА ОСНОВНЫЕ КАРТОЧКИ */
.ant-card.ant-card-bordered._gamification_card_1u4bb_1:hover,
.ant-card.ant-card-bordered.gamification-card:hover {
  transform: translateY(-5px) !important; /* ПОДЪЕМ КАРТОЧКИ НА 5 ПИКСЕЛЕЙ ПРИ НАВЕДЕНИИ */
  box-shadow: 0 10px 30px 0 rgba(154,129,107,0.25) !important; /* УВЕЛИЧЕННАЯ ТЕНЬ ПРИ НАВЕДЕНИИ */
  border-color: rgba(154,129,107,0.4) !important; /* БОЛЕЕ ЯРКАЯ РАМКА ПРИ НАВЕДЕНИИ */
}

/* ===== СОДЕРЖИМОЕ ВНУТРИ ОСНОВНЫХ КАРТОЧЕК ===== */
.ant-card.ant-card-bordered._gamification_card_1u4bb_1 .ant-card-body,
.ant-card.ant-card-bordered.gamification-card .ant-card-body {
  background-color: #ffffff !important; /* ФОН ВНУТРИ КАРТОЧКИ */
  padding: 24px !important; /* ВНУТРЕННИЕ ОТСТУПЫ КАРТОЧКИ - расстояние от краев до содержимого */
}

/* ===== ЗАГОЛОВКИ ССЫЛОК В КАРТОЧКАХ ("Показать историю") ===== */
.gamification-card--header a,
.gamification-card--header .color-gray-8 {
  color: #4ca5ce !important; /* ЦВЕТ ССЫЛОК В ЗАГОЛОВКАХ КАРТОЧЕК */
  font-weight: 500 !important; /* ЖИРНОСТЬ ТЕКСТА ССЫЛОК */
  text-decoration: none !important; /* БЕЗ ПОДЧЕРКИВАНИЯ */
  transition: color 0.3s ease !important; /* ПЛАВНЫЙ ПЕРЕХОД ЦВЕТА */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА ССЫЛКИ В ЗАГОЛОВКАХ */
.gamification-card--header a:hover,
.gamification-card--header .color-gray-8:hover {
  color: #0d70ae !important; /* ЦВЕТ ПРИ НАВЕДЕНИИ - темнее основного */
  text-decoration: underline !important; /* ПОДЧЕРКИВАНИЕ ПРИ НАВЕДЕНИИ */
}

/* СТРЕЛОЧКИ В ССЫЛКАХ ЗАГОЛОВКОВ */
.gamification-card--header .anticon-arrow-right {
  color: #4ca5ce !important; /* ЦВЕТ СТРЕЛОЧКИ */
}

/* ===== МАЛЕНЬКИЕ КАРТОЧКИ СО СТАТИСТИКОЙ (текущий баланс, всего набрано) ===== */
.flex.gap-10.w-100.mt-20 .ant-card.ant-card-bordered._stat_card_1csvf_1 {
  border: 1px solid rgba(154,129,107,0.2) !important; /* РАМКА МАЛЕНЬКИХ КАРТОЧЕК */
  border-radius: 20px !important; /* СКРУГЛЕНИЕ УГЛОВ - можете изменить */
  box-shadow: 0 4px 20px 0 rgba(154,129,107,0.15) !important; /* ТЕНЬ ПОД КАРТОЧКАМИ */
  overflow: hidden !important;
  transition: all 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ */
  background-color: #ffffff !important;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА МАЛЕНЬКИЕ КАРТОЧКИ */
.flex.gap-10.w-100.mt-20 .ant-card.ant-card-bordered._stat_card_1csvf_1:hover {
  transform: translateY(-3px) !important; /* НЕБОЛЬШОЙ ПОДЪЕМ ПРИ НАВЕДЕНИИ */
  box-shadow: 0 8px 25px 0 rgba(154,129,107,0.2) !important; /* УВЕЛИЧЕННАЯ ТЕНЬ */
  border-color: rgba(154,129,107,0.4) !important;
}

/* СОДЕРЖИМОЕ МАЛЕНЬКИХ КАРТОЧЕК */
.flex.gap-10.w-100.mt-20 .ant-card-body {
  background-color: #ffffff !important; /* ФОН ВНУТРИ МАЛЕНЬКИХ КАРТОЧЕК */
  padding: 16px !important; /* УМЕНЬШЕННЫЕ ВНУТРЕННИЕ ОТСТУПЫ */
  position: relative !important;
  display: flex !important;
  flex-direction: row !important; /* ГОРИЗОНТАЛЬНОЕ РАСПОЛОЖЕНИЕ: иконка слева, текст справа */
  align-items: center !important;
  gap: 16px !important; /* УМЕНЬШЕННОЕ РАССТОЯНИЕ МЕЖДУ ИКОНКОЙ И ТЕКСТОМ */
  min-height: auto !important; /* АВТОМАТИЧЕСКАЯ ВЫСОТА */
  height: auto !important; /* АВТОМАТИЧЕСКАЯ ВЫСОТА */
}

/* ИКОНКИ В МАЛЕНЬКИХ КАРТОЧКАХ (цветные квадратики слева) */
.flex.gap-10.w-100.mt-20 .ant-card-body::before {
  content: '' !important;
  display: block !important;
  min-width: 50px !important; /* ШИРИНА ИКОНКИ - можете изменить */
  height: 50px !important; /* ВЫСОТА ИКОНКИ - можете изменить */
  background-color: #b2ddf3 !important; /* ФОН ИКОНКИ - ваш основной цвет */
  border-radius: 12px !important; /* СКРУГЛЕНИЕ УГЛОВ ИКОНКИ */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px !important; /* РАЗМЕР КАРТИНКИ ВНУТРИ ИКОНКИ */
  flex-shrink: 0 !important;
}

/* ПЕРВАЯ ИКОНКА - "Текущий баланс" */
.flex.gap-10.w-100.mt-20 .ant-card:first-child .ant-card-body::before {
  background-image: url('https://con.xl.ru/vHpoDZd9nkecUoyS4gkyFA/images/BdTLFdDn50qLzQuItjACmQ.png') !important;
}

/* ВТОРАЯ ИКОНКА - "Всего набрано" */
.flex.gap-10.w-100.mt-20 .ant-card:last-child .ant-card-body::before {
  background-image: url('https://con.xl.ru/vHpoDZd9nkecUoyS4gkyFA/images/kz0BjRBKcUGm9nYbKu3mgw.png') !important;
}

/* СТАТИСТИКА В МАЛЕНЬКИХ КАРТОЧКАХ */
.flex.gap-10.w-100.mt-20 .ant-card-body .ant-statistic {
  display: flex !important;
  flex-direction: column-reverse !important; /* ЦИФРА СВЕРХУ, ПОДПИСЬ СНИЗУ */
  flex-grow: 1 !important;
}

/* ПОДПИСИ ПОД ЦИФРАМИ (например "Текущий баланс") */
.flex.gap-10.w-100.mt-20 .ant-statistic-title {
  font-size: 16px !important; /* РАЗМЕР ШРИФТА ПОДПИСИ - можете изменить */
  color: rgba(69, 152, 102, 0.8) !important; /* ЦВЕТ ПОДПИСИ - полупрозрачный основной цвет */
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  font-weight: 600 !important; /* ЖИРНОСТЬ ПОДПИСИ */
}

/* ЦИФРЫ В МАЛЕНЬКИХ КАРТОЧКАХ (например "50") */
.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;
}

/* ===== АВАТАР ПОЛЬЗОВАТЕЛЯ В ЦЕНТРЕ КАРТОЧКИ ===== */
.ant-avatar.ant-avatar-circle {
  border: 3px solid rgba(69, 152, 102,0.3) !important; /* РАМКА ВОКРУГ АВАТАРА */
  box-shadow: 0 4px 15px rgba(69, 152, 102,0.2) !important; /* ТЕНЬ ПОД АВАТАРОМ */
  transition: all 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА АВАТАР */
.ant-avatar.ant-avatar-circle:hover {
  transform: scale(1.05) !important; /* ЛЕГКОЕ УВЕЛИЧЕНИЕ ПРИ НАВЕДЕНИИ */
  box-shadow: 0 6px 20px rgba(154,129,107,0.3) !important; /* УВЕЛИЧЕННАЯ ТЕНЬ */
}

/* ===== ИМЯ ПОЛЬЗОВАТЕЛЯ ПОД АВАТАРОМ ===== */
.fs-24.fw-600.color-gray-9 {
  color: #459866 !important; /* ЦВЕТ ИМЕНИ ПОЛЬЗОВАТЕЛЯ */
  font-size: 24px !important; /* РАЗМЕР ШРИФТА ИМЕНИ */
  font-weight: 600 !important; /* ЖИРНОСТЬ ИМЕНИ */
  margin-top: 15px !important; /* ОТСТУП СВЕРХУ ОТ АВАТАРА */
  text-align: center !important; /* ЦЕНТРИРОВАНИЕ */
}

/* ===== ДОСТИЖЕНИЯ В СПИСКЕ ===== */
.gamification-achievement {
  background: rgba(227, 237, 237,0.08) !important; /* СВЕТЛО-КОРИЧНЕВЫЙ ФОН ДОСТИЖЕНИЙ */
  border-radius: 20px !important; /* СКРУГЛЕНИЕ УГЛОВ ДОСТИЖЕНИЙ */
  padding: 20px !important; /* ВНУТРЕННИЕ ОТСТУПЫ ДОСТИЖЕНИЙ */
  margin-bottom: 15px !important; /* ОТСТУП МЕЖДУ ДОСТИЖЕНИЯМИ */
  border: 1px solid rgba(154,129,107,0.15) !important; /* ТОНКАЯ РАМКА */
  transition: all 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА ДОСТИЖЕНИЯ */
.gamification-achievement:hover {
  background: rgba(197, 219, 199),0.12) !important; /* ЧУТЬ ТЕМНЕЕ ФОН ПРИ НАВЕДЕНИИ */
  transform: translateX(5px) !important; /* НЕБОЛЬШОЙ СДВИГ ВПРАВО */
  border-color: rgba(154,129,107,0.25) !important; /* ЯРЧЕ РАМКА */
}

/* КАРТИНКИ ДОСТИЖЕНИЙ (значки) */
.gamification-achievement .gamification-achievement__image {
  border-radius: 15px !important; /* СКРУГЛЕНИЕ УГЛОВ ЗНАЧКОВ ДОСТИЖЕНИЙ */
  border: 2px solid rgba(139, 188, 151,0.2) !important; /* РАМКА ВОКРУГ ЗНАЧКА */
  transition: transform 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА ЗНАЧКИ ДОСТИЖЕНИЙ */
.gamification-achievement .gamification-achievement__image:hover {
  transform: scale(1.1) !important; /* УВЕЛИЧЕНИЕ ЗНАЧКА ПРИ НАВЕДЕНИИ */
}

/* НАЗВАНИЯ ДОСТИЖЕНИЙ (например "Ночной Студент") */
.gamification-achievement .fw-600.color-gray-9 {
  font-weight: 600 !important; /* ЖИРНОСТЬ НАЗВАНИЯ */
  margin-bottom: 8px !important; /* ОТСТУП СНИЗУ */
  color: #459866 !important; /* ЦВЕТ НАЗВАНИЯ ДОСТИЖЕНИЯ */
  font-size: 16px !important; /* РАЗМЕР ШРИФТА НАЗВАНИЯ */
}

/* ОПИСАНИЯ ДОСТИЖЕНИЙ (например "За учебу в ночное время") */
.gamification-achievement .fs-12.color-gray-8 {
  opacity: 0.9 !important; /* ПРОЗРАЧНОСТЬ ОПИСАНИЯ */
  color: rgba(69, 152, 102,0.8) !important; /* ЦВЕТ ОПИСАНИЯ */
  font-size: 13px !important; /* РАЗМЕР ШРИФТА ОПИСАНИЯ - чуть больше чем было */
  line-height: 1.4 !important; /* ВЫСОТА СТРОКИ ДЛЯ ЛУЧШЕЙ ЧИТАЕМОСТИ */
}

/* БАЛЛЫ ЗА ДОСТИЖЕНИЯ (например "+25") */
.gamification-achievement .fw-700.color-success.fs-24 {
  color: #69, 152, 102 !important; /* ЦВЕТ БАЛЛОВ ЗА ДОСТИЖЕНИЕ */
  font-size: 28px !important; /* РАЗМЕР ШРИФТА БАЛЛОВ - можете увеличить */
  font-weight: 700 !important; /* ОЧЕНЬ ЖИРНЫЙ ШРИФТ */
  text-shadow: 0 2px 4px rgba(154,129,107,0.3) !important; /* ТЕНЬ ДЛЯ БАЛЛОВ */
}

/* ===== ТАБЛИЦА ЛИДЕРОВ ===== */
/* ТОЛЬКО СКРУГЛЕНИЕ КОНТЕЙНЕРА С ЛИДЕРАМИ */
.gamification-leader {
  /* УБИРАЕМ ВСЕ ДОПОЛНИТЕЛЬНЫЕ СТИЛИ */
}

/* ИМЕНА ЛИДЕРОВ */
.gamification-leader .gamification-leader__title {
  /* УБИРАЕМ СТИЛИЗАЦИЮ ИМЕН */
}

/* БАЛЛЫ ЛИДЕРОВ - ДЕЛАЕМ КОРИЧНЕВЫМИ */
.gamification-leader .gamification-leader__score {
  color: #69, 152, 102 !important; /* КОРИЧНЕВЫЙ ЦВЕТ БАЛЛОВ ЛИДЕРОВ ВМЕСТО ЗЕЛЕНОГО */
}

/* НОМЕРА МЕСТ В ЛЕНТОЧКАХ (1, 2, 3) */
.ant-ribbon {
  /* СТАНДАРТНЫЙ ВИД */
}

.ant-ribbon-corner {
  /* СТАНДАРТНЫЙ ВИД */
}

/* ===== ПРОДУКТЫ (КОГДА ЕСТЬ ТОВАРЫ) ===== */
/* КАРТОЧКИ ОТДЕЛЬНЫХ ПРОДУКТОВ */
.gamification-product {
  background: rgba(139, 188, 151,0.08) !important; /* СВЕТЛО-КОРИЧНЕВЫЙ ФОН КАРТОЧКИ ТОВАРА */
  border-radius: 15px !important; /* УМЕНЬШЕННОЕ СКРУГЛЕНИЕ УГЛОВ */
  padding: 12px 16px !important; /* УМЕНЬШЕННЫЕ ОТСТУПЫ: 12px сверху/снизу, 16px слева/справа */
  margin-bottom: 8px !important; /* МАЛЕНЬКИЙ ОТСТУП МЕЖДУ КАРТОЧКАМИ */
  border: 1px solid rgba(139, 188, 151,0.15) !important; /* ТОНКАЯ РАМКА ВОКРУГ КАРТОЧКИ */
  transition: all 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ */
  position: relative !important; /* ДЛЯ ПОЗИЦИОНИРОВАНИЯ КНОПКИ */
  min-height: auto !important; /* АВТОМАТИЧЕСКАЯ ВЫСОТА */
  height: auto !important; /* АВТОМАТИЧЕСКАЯ ВЫСОТА */
  display: flex !important; /* FLEXBOX ДЛЯ ЛУЧШЕГО КОНТРОЛЯ МАКЕТА */
  align-items: center !important; /* ВЕРТИКАЛЬНОЕ ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА КАРТОЧКИ ТОВАРОВ */
.gamification-product:hover {
  background: rgba(69, 152, 102,0.12) !important; /* ЧУТЬ ТЕМНЕЕ ФОН ПРИ НАВЕДЕНИИ */
  transform: translateY(-3px) !important; /* НЕБОЛЬШОЙ ПОДЪЕМ */
  border-color: rgba(69, 152, 102,0.25) !important; /* ЯРЧЕ РАМКА */
  box-shadow: 0 8px 20px rgba(69, 152, 102,0.15) !important; /* ТЕНЬ ПРИ НАВЕДЕНИИ */
}

/* КАРТИНКИ ТОВАРОВ (квадратные превью) */
.gamification-product__image {
  border-radius: 8px !important; /* УМЕНЬШЕННОЕ СКРУГЛЕНИЕ УГЛОВ */
  border: 1px solid rgba(69, 152, 102,0.2) !important; /* ТОНКАЯ РАМКА */
  transition: transform 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ */
  width: 50px !important; /*  ШИРИНА КАРТИНКИ */
  height: 50px !important; /*  ВЫСОТА КАРТИНКИ */
  object-fit: cover !important; /* ОБРЕЗКА КАРТИНКИ ПО РАЗМЕРУ */
  flex-shrink: 0 !important; /* НЕ СЖИМАТЬ КАРТИНКУ */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА КАРТИНКИ ТОВАРОВ */
.gamification-product__image:hover {
  transform: scale(1.05) !important; /* ЛЕГКОЕ УВЕЛИЧЕНИЕ КАРТИНКИ */
}

/* НАЗВАНИЯ ТОВАРОВ (например "Пример 2") */
.gamification-product .color-gray-9 {
  color: #8bbc97 !important; /* ЦВЕТ НАЗВАНИЯ ТОВАРА */
  font-weight: 600 !important; /* ЖИРНОСТЬ НАЗВАНИЯ */
  font-size: 16px !important; /* КОМПАКТНЫЙ РАЗМЕР ШРИФТА */
  margin-bottom: 2px !important; /* МИНИМАЛЬНЫЙ ОТСТУП СНИЗУ */
  line-height: 1.2 !important; /* УПЛОТНЕННАЯ ВЫСОТА СТРОКИ */
}

/* ОПИСАНИЯ ТОВАРОВ (например "AI Club: ChatGPT") */
.gamification-product .color-gray-7 {
  color: rgba(139, 188, 151,0.7) !important; /* ЦВЕТ ОПИСАНИЯ ТОВАРА */
  font-size: 13px !important; /* РАЗМЕР ШРИФТА */
  margin-bottom: 4px !important; /*  ОТСТУП СНИЗУ */
  line-height: 1.3 !important; /* ВЫСОТА СТРОКИ */
}

/* ЦЕНЫ ТОВАРОВ (например "50 бал.") */
.gamification-product .color-success {
  color: #459866 !important; /* ЦВЕТ ЦЕНЫ ТОВАРА */
  font-weight: 600 !important; /* ЖИРНОСТЬ ЦЕНЫ */
  font-size: 14px !important; /*  РАЗМЕР ШРИФТА */
  line-height: 1.2 !important; /* ВЫСОТА СТРОКИ */
}

/* ===== КНОПКИ "КУПИТЬ" В ТОВАРАХ ===== */
/* АКТИВНАЯ КНОПКА ПОКУПКИ (когда хватает баллов) */
.gamification-product .ant-btn[data-testid="pay-btn"]:not([disabled]),
.gamification-product .gamification-product-card-pay-button:not([disabled]) {
  background-color: #459866 !important; /* ФОН АКТИВНОЙ КНОПКИ ПОКУПКИ */
  color: #ffffff !important; /* ЦВЕТ ТЕКСТА НА КНОПКЕ */
  border: none !important; /* БЕЗ РАМКИ */
  border-radius: 15px !important; /*  КРУГЛЫЕ УГЛЫ */
  padding: 6px 12px !important; /* ОТСТУПЫ */
  font-weight: 600 !important; /* ЖИРНОСТЬ ТЕКСТА НА КНОПКЕ */
  font-size: 12px !important; /* РАЗМЕР ШРИФТА */
  transition: all 0.3s ease !important; /* ПЛАВНОСТЬ АНИМАЦИИ */
  cursor: pointer !important; /* КУРСОР-УКАЗАТЕЛЬ */
  box-shadow: 0 2px 6px rgba(154,129,107,0.3) !important; /* НЕБОЛЬШАЯ ТЕНЬ */
  display: flex !important; /* FLEXBOX ДЛЯ ВЫРАВНИВАНИЯ */
  align-items: center !important; /* ЦЕНТРИРОВАНИЕ ПО ВЕРТИКАЛИ */
  justify-content: center !important; /* ЦЕНТРИРОВАНИЕ ПО ГОРИЗОНТАЛИ */
  min-height: 30px !important; /* ВЫСОТА КНОПКИ */
  width: 80px !important; /* ФИКСИРОВАННАЯ ШИРИНА ВСЕХ КНОПОК */
  max-width: 80px !important; /* МАКСИМАЛЬНАЯ ШИРИНА */
  white-space: nowrap !important; /* БЕЗ ПЕРЕНОСА ТЕКСТА */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ НА АКТИВНУЮ КНОПКУ */
.gamification-product .ant-btn[data-testid="pay-btn"]:not([disabled]):hover,
.gamification-product .gamification-product-card-pay-button:not([disabled]):hover {
  background-color: #3e7353 !important; /* ТЕМНЕЕ ФОН ПРИ НАВЕДЕНИИ */
  transform: translateY(-1px) !important; /* МИНИМАЛЬНЫЙ ПОДЪЕМ */
  box-shadow: 0 4px 10px rgba(154,129,107,0.4) !important; /* УВЕЛИЧЕННАЯ ТЕНЬ */
}

/* НЕАКТИВНАЯ КНОПКА ПОКУПКИ (когда не хватает баллов) */
.gamification-product .ant-btn[data-testid="pay-btn"][disabled],
.gamification-product .ant-popover-disabled-compatible-wrapper .ant-btn[disabled],
.gamification-product .ant-popover-disabled-compatible-wrapper .ant-btn {
  background-color: rgba(139, 188, 151,0.4) !important; /* СВЕТЛАЯ ВЕРСИЯ КОРИЧНЕВОГО ЦВЕТА */
  color: rgba(255,255,255,0.8) !important; /* ЧУТЬ БЛЕКЛЫЙ БЕЛЫЙ ТЕКСТ */
  border: none !important; /* БЕЗ РАМКИ */
  border-radius: 15px !important;
  padding: 6px 12px !important;
  cursor: not-allowed !important; /* КУРСОР "ЗАПРЕЩЕНО" */
  box-shadow: none !important; /* БЕЗ ТЕНИ У НЕАКТИВНОЙ КНОПКИ */
  display: flex !important; /* FLEXBOX ДЛЯ ВЫРАВНИВАНИЯ */
  align-items: center !important; /* ЦЕНТРИРОВАНИЕ ПО ВЕРТИКАЛИ */
  justify-content: center !important; /* ЦЕНТРИРОВАНИЕ ПО ГОРИЗОНТАЛИ */
  min-height: 30px !important; /* КОМПАКТНАЯ ВЫСОТА КНОПКИ */
  width: 80px !important; /* ФИКСИРОВАННАЯ ШИРИНА ВСЕХ КНОПОК */
  max-width: 80px !important; /* МАКСИМАЛЬНАЯ ШИРИНА */
  white-space: nowrap !important; /* БЕЗ ПЕРЕНОСА ТЕКСТА */
  opacity: 0.7 !important; /* ЛЕГКАЯ ПРОЗРАЧНОСТЬ ДЛЯ НЕАКТИВНОГО ВИДА */
}

/* ОБЕРТКА ДЛЯ НЕАКТИВНОЙ КНОПКИ */
.gamification-product .ant-popover-disabled-compatible-wrapper {
  cursor: not-allowed !important; /* КУРСОР "ЗАПРЕЩЕНО" ДЛЯ ВСЕЙ ОБЛАСТИ */
  width: 80px !important; /* ФИКСИРОВАННАЯ ШИРИНА ОБЕРТКИ */
  display: inline-block !important; /* БЛОЧНЫЙ ЭЛЕМЕНТ ДЛЯ ПРАВИЛЬНОГО РАЗМЕРА */
  background: transparent !important; /* ПРОЗРАЧНЫЙ ФОН ОБЕРТКИ */
  border: none !important; /* БЕЗ РАМКИ У ОБЕРТКИ */
  border-radius: 0 !important; /* БЕЗ СКРУГЛЕНИЯ У ОБЕРТКИ */
  padding: 0 !important; /* БЕЗ ОТСТУПОВ У ОБЕРТКИ */
  box-shadow: none !important; /* БЕЗ ТЕНИ У ОБЕРТКИ */
}

/* УБИРАЕМ ВСЕ СТИЛИ С НЕАКТИВНОЙ ОБЕРТКИ */
.gamification-product .ant-popover-disabled-compatible-wrapper.w-100.br-xxs.bg-success.gamification-product-card-pay-button {
  background: transparent !important; /* ПОЛНОСТЬЮ ПРОЗРАЧНЫЙ ФОН */
  background-color: transparent !important; /* УБИРАЕМ ЦВЕТ ФОНА */
  border-radius: 0 !important; /* БЕЗ СКРУГЛЕНИЯ */
  border: none !important; /* БЕЗ РАМКИ */
  box-shadow: none !important; /* БЕЗ ТЕНИ */
  width: 80px !important; /* ФИКСИРОВАННАЯ ШИРИНА */
}

/* ИКОНКА КОРЗИНЫ В КНОПКАХ */
.gamification-product .anticon-shopping-cart {
  margin-right: 4px !important; /* МИНИМАЛЬНЫЙ ОТСТУП ОТ ИКОНКИ */
  font-size: 12px !important; /* МАЛЕНЬКИЙ РАЗМЕР ИКОНКИ */
}

/* ПОЗИЦИОНИРОВАНИЕ КНОПКИ В ПРАВОМ УГЛУ */
.gamification-product .absolute.r-0.b-0 {
  position: absolute !important;
  right: 12px !important; /* ОТСТУП СПРАВА */
  bottom: 12px !important; /* ОТСТУП СНИЗУ */
  width: auto !important; /* АВТОМАТИЧЕСКАЯ ШИРИНА */
}

/* ===== ПРОДУКТЫ (ПУСТОЕ СОСТОЯНИЕ) ===== */
/* ИКОНКА МАГАЗИНА КОГДА НЕТ ПРОДУКТОВ */
.anticon-shop {
  color: rgba(139, 188, 151,0.4) !important; /* ЦВЕТ ИКОНКИ МАГАЗИНА */
  transition: color 0.3s ease !important; /* ПЛАВНОСТЬ ИЗМЕНЕНИЯ ЦВЕТА */
}

/* ТЕКСТ "Продуктов пока нет" */
.fs-16.fw-500 {
  color: rgba(139, 188, 151,0.7) !important; /* ЦВЕТ ТЕКСТА О ПУСТОМ СОСТОЯНИИ */
  font-size: 18px !important; /* РАЗМЕР ШРИФТА  */
}

/* ===== ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ ЭЛЕМЕНТОВ ===== */
/* Все курсоры-указатели получают эффект при наведении */
.c-pointer:hover {
  opacity: 0.8 !important; /* ЛЕГКАЯ ПРОЗРАЧНОСТЬ ПРИ НАВЕДЕНИИ */
  transition: opacity 0.3s ease !important;
}

/* Все ссылки и интерактивные элементы */
a, .hoverable {
  transition: all 0.3s ease !important; /* ПЛАВНЫЕ ПЕРЕХОДЫ ДЛЯ ВСЕХ ССЫЛОК */
}

/* =====================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (ДЛЯ ТЕЛЕФОНОВ И ПЛАНШЕТОВ)
   ===================================================== */
@media screen and (max-width: 768px) {
  /* ЗАГОЛОВКИ НА МОБИЛЬНЫХ */
  h1.fs-30.fw-600.color-gray-9 {
    font-size: 24px !important; /* МЕНЬШЕ РАЗМЕР НА МОБИЛЬНЫХ */
    text-align: center !important; /* ЦЕНТРИРОВАНИЕ НА МОБИЛЬНЫХ */
  }
  
  /* КАРТОЧКИ НА МОБИЛЬНЫХ */
  .ant-card.ant-card-bordered._gamification_card_1u4bb_1 .ant-card-body,
  .ant-card.ant-card-bordered.gamification-card .ant-card-body {
    padding: 16px !important; /* МЕНЬШЕ ОТСТУПЫ НА МОБИЛЬНЫХ */
  }
  
  /* МАЛЕНЬКИЕ КАРТОЧКИ НА МОБИЛЬНЫХ */
  .flex.gap-10.w-100.mt-20 .ant-card-body {
    padding: 16px !important; /* МЕНЬШЕ ОТСТУПЫ */
    gap: 15px !important; /* МЕНЬШЕ РАССТОЯНИЕ МЕЖДУ ЭЛЕМЕНТАМИ */
  }
  
  /* ИКОНКИ НА МОБИЛЬНЫХ */
  .flex.gap-10.w-100.mt-20 .ant-card-body::before {
    min-width: 40px !important; /* МЕНЬШЕ РАЗМЕР ИКОНОК */
    height: 40px !important;
    background-size: 20px !important; /* МЕНЬШЕ РАЗМЕР КАРТИНКИ В ИКОНКЕ */
  }
  
  /* ЦИФРЫ НА МОБИЛЬНЫХ */
  .flex.gap-10.w-100.mt-20 .ant-statistic-content {
    font-size: 24px !important; /* МЕНЬШЕ РАЗМЕР ЦИФР НА МОБИЛЬНЫХ */
  }
  
  /* ПОДПИСИ НА МОБИЛЬНЫХ */
  .flex.gap-10.w-100.mt-20 .ant-statistic-title {
    font-size: 14px !important; /* МЕНЬШЕ РАЗМЕР ПОДПИСЕЙ */
  }
  
  /* ДОСТИЖЕНИЯ НА МОБИЛЬНЫХ */
  .gamification-achievement {
    padding: 15px !important; /* МЕНЬШЕ ОТСТУПЫ */
    margin-bottom: 10px !important; /* МЕНЬШЕ РАССТОЯНИЕ МЕЖДУ ДОСТИЖЕНИЯМИ */
  }
  
  /* ИМЯ ПОЛЬЗОВАТЕЛЯ НА МОБИЛЬНЫХ */
  .fs-24.fw-600.color-gray-9 {
    font-size: 20px !important; /* МЕНЬШЕ РАЗМЕР НА МОБИЛЬНЫХ */
  }
  
  /* ПРОДУКТЫ НА МОБИЛЬНЫХ */
  .gamification-product {
    padding: 12px !important; /* ЕЩЕ МЕНЬШЕ ОТСТУПЫ НА МОБИЛЬНЫХ */
    margin-bottom: 12px !important;
  }
  
  /* КНОПКИ ПОКУПКИ НА МОБИЛЬНЫХ */
  .gamification-product .absolute.r-0.b-0 {
    right: 12px !important; /* МЕНЬШЕ ОТСТУП СПРАВА */
    bottom: 12px !important; /* МЕНЬШЕ ОТСТУП СНИЗУ */
  }
  
  .gamification-product .ant-btn[data-testid="pay-btn"] {
    padding: 6px 12px !important; /* МЕНЬШЕ РАЗМЕР КНОПКИ */
    font-size: 12px !important; /* МЕНЬШЕ ШРИФТ НА КНОПКЕ */
    min-height: 32px !important; /* МЕНЬШЕ ВЫСОТА КНОПКИ */
  }
  
  /* НАЗВАНИЯ ТОВАРОВ НА МОБИЛЬНЫХ */
  .gamification-product .color-gray-9 {
    font-size: 16px !important; /* МЕНЬШЕ РАЗМЕР НАЗВАНИЯ */
  }
  
  /* КАРТИНКИ ТОВАРОВ НА МОБИЛЬНЫХ - ЕЩЕ МЕНЬШЕ */
  .gamification-product__image {
    width: 50px !important; /* МЕНЬШЕ ШИРИНА КАРТИНКИ */
    height: 50px !important; /* МЕНЬШЕ ВЫСОТА КАРТИНКИ */
  }
}

/* =====================================================
   РУКОВОДСТВО ПО ИЗМЕНЕНИЮ ЦВЕТОВ И РАЗМЕРОВ
   ===================================================== */

/*
ОСНОВНЫЕ ПАРАМЕТРЫ ДЛЯ ИЗМЕНЕНИЯ:

1. ЦВЕТА:
   - #9A816B - основной коричневый цвет (замените на свой)
   - #826B59 - цвет при наведении (должен быть темнее основного)
   - #ffffff - белый цвет фона карточек
   - rgba(154,129,107,0.X) - полупрозрачные варианты основного цвета

2. РАЗМЕРЫ ШРИФТОВ:
   - 30px - главные заголовки страниц
   - 24px/28px - большие цифры и имена
   - 16px - обычный текст и названия
   - 13px - мелкий текст и описания

3. СКРУГЛЕНИЯ:
   - 20px - основные карточки
   - 15px - блоки достижений и значки
   - 12px - маленькие элементы

4. ОТСТУПЫ И РАЗМЕРЫ:
   - 24px - внутренние отступы больших карточек
   - 20px - внутренние отступы обычных элементов
   - 50x50px - размер иконок в карточках
   - 15px - расстояния между элементами

5. ЭФФЕКТЫ:
   - translateY(-5px) - подъем при наведении на большие карточки
   - translateY(-3px) - подъем при наведении на маленькие элементы
   - scale(1.05) - увеличение аватара при наведении
   - 0.3s ease - скорость всех анимаций

ЧТОБЫ ИЗМЕНИТЬ ЦВЕТОВУЮ СХЕМУ:
1. Найдите все #9A816B и замените на свой основной цвет
2. Найдите все #826B59 и замените на более темный оттенок вашего цвета  
3. Найдите все rgba(154,129,107,X) и замените первые три числа на RGB вашего цвета

ЧТОБЫ ИЗМЕНИТЬ РАЗМЕРЫ:
1. Найдите нужный размер в пикселях (например, 24px)
2. Замените на желаемый размер
3. Проверьте результат на компьютере и мобильном

ЧТОБЫ ИЗМЕНИТЬ СКРУГЛЕНИЯ:
1. Найдите border-radius со значением в пикселях
2. Увеличьте число для более круглых углов
3. Уменьшите для более острых углов
*/