/* ============================================================
   01. Иконки — СГЕНЕРИРОВАНО tools/icons.py, руками не править
   --bd-i-<имя>          графит — спокойные иконки
   --bd-i-<имя>-primary  фиолетовый — активные
   --bd-i-<имя>-on       белый — на фиолетовых кнопках
   --bd-i-<имя>-gold     золото — декор
   --bd-i-<имя>-success  зелёный — пройдено
   --bd-i-<имя>-cta      тёмный — на салатовой кнопке
   ============================================================ */

:root {
  --bd-i-profile-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228.5%22 r=%223.8%22/%3E%3Cpath d=%22M4.5 20.5c.9-4 3.7-6.3 7.5-6.3s6.6 2.3 7.5 6.3%22/%3E%3C/svg%3E");
  --bd-i-facet-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5l8.5 8.5-8.5 8.5L3.5 12z%22/%3E%3Cpath d=%22M12 3.5v17M3.5 12h17%22 opacity=%22.5%22/%3E%3C/svg%3E");
  --bd-i-play-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M10.2 8.8v6.4l5.3-3.2z%22/%3E%3C/svg%3E");
  --bd-i-star-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.8l2.5 5.2 5.7.7-4.2 3.9 1.1 5.6L12 16.4l-5.1 2.8 1.1-5.6-4.2-3.9 5.7-.7z%22/%3E%3C/svg%3E");
  --bd-i-telegram-primary: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2345226B%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.5 4.5L3.5 11l5.5 2 2 5.8 3-3.8 5 3.8z%22/%3E%3Cpath d=%22M9 13l8-5.5%22/%3E%3C/svg%3E");
  --bd-i-telegram-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.5 4.5L3.5 11l5.5 2 2 5.8 3-3.8 5 3.8z%22/%3E%3Cpath d=%22M9 13l8-5.5%22/%3E%3C/svg%3E");
  --bd-i-help-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M9.7 9.5a2.4 2.4 0 014.6.9c0 1.7-2.3 2-2.3 3.6M12 17h.01%22/%3E%3C/svg%3E");
  --bd-i-headset-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 13.5v-1.5a7.5 7.5 0 0115 0v1.5%22/%3E%3Crect x=%223.5%22 y=%2213%22 width=%224%22 height=%226%22 rx=%221.5%22/%3E%3Crect x=%2216.5%22 y=%2213%22 width=%224%22 height=%226%22 rx=%221.5%22/%3E%3Cpath d=%22M18.5 19c0 1.2-1.5 2-4 2h-1.5%22/%3E%3C/svg%3E");
  --bd-i-calendar-primary: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2345226B%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%225.5%22 width=%2216%22 height=%2214.5%22 rx=%222%22/%3E%3Cpath d=%22M4 10h16M8.5 3.5v4M15.5 3.5v4%22/%3E%3C/svg%3E");
  --bd-i-calendar-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%225.5%22 width=%2216%22 height=%2214.5%22 rx=%222%22/%3E%3Cpath d=%22M4 10h16M8.5 3.5v4M15.5 3.5v4%22/%3E%3C/svg%3E");
  --bd-i-ticket-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16v3.2a1.8 1.8 0 000 3.6V17H4v-3.2a1.8 1.8 0 000-3.6z%22/%3E%3Cpath d=%22M14.5 7.5v1.5M14.5 11.2v1.6M14.5 15v1.5%22/%3E%3C/svg%3E");
  --bd-i-gift-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%229%22 width=%2216%22 height=%224%22 rx=%221%22/%3E%3Cpath d=%22M5.5 13v7h13v-7M12 9v11M12 9c-1.5-3.5-5.5-4-5.5-1.5S10 9 12 9zM12 9c1.5-3.5 5.5-4 5.5-1.5S14 9 12 9z%22/%3E%3C/svg%3E");
  --bd-i-calculator-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225.5%22 y=%223.5%22 width=%2213%22 height=%2217%22 rx=%222%22/%3E%3Cpath d=%22M8.5 7h7v3h-7zM8.7 13.5h.01M12 13.5h.01M15.3 13.5h.01M8.7 17h.01M12 17h.01M15.3 17h.01%22/%3E%3C/svg%3E");
  --bd-i-folder-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 7a1.5 1.5 0 011.5-1.5h4.5l2 2.5H19a1.5 1.5 0 011.5 1.5v8.5A1.5 1.5 0 0119 19.5H5A1.5 1.5 0 013.5 18z%22/%3E%3C/svg%3E");
  --bd-i-mic-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%223.5%22 width=%226%22 height=%2211%22 rx=%223%22/%3E%3Cpath d=%22M5.5 11.5a6.5 6.5 0 0013 0M12 18v2.5%22/%3E%3C/svg%3E");
  --bd-i-compass-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M15.5 8.5l-2 5-5 2 2-5z%22/%3E%3C/svg%3E");
  --bd-i-send-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.5 3.5L3.5 10.5l7 3 3 7z%22/%3E%3Cpath d=%22M10.5 13.5l10-10%22/%3E%3C/svg%3E");
  --bd-i-bolt-primary: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2345226B%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13.5 3.5L5.5 13.5h6l-1 7 8-10h-6z%22/%3E%3C/svg%3E");
}

/* ============================================================
   07. Правая колонка

   Кнопки собраны в конструкторе и помечены классами. На странице
   «Экосистемы» их пятнадцать. Разводим по трём уровням важности —
   по уже стоящим классам, в конструкторе ничего переставлять не нужно:

     .cst-button2  главные действия      → фиолетовая заливка
                   (Нужна помощь, ЛК участника, Квалификационный лист)
     .xst-button   аккаунт и деньги      → белая карточка
                   (Продлить доступ, Бонусы, Калькулятор, Документы)
     .cst-button   разделы и материалы   → строка со стрелкой в кружке
                   (Чаты, Обновления, Подкасты, Навигация, Расписание…)

   Разметка двух видов — h3.xdget-header.with-link и button.xdget-button —
   с инлайн-стилями из конструктора (цвет, фон, шрифт, отступы).
   Отсюда !important.

   Колонки ищем по месту, а не по ширине: левая — первая из двух
   (.xdget-row > .xdget-container:first-child), правая — последняя. Пропорции
   8/4, 9/3 и любые другие в конструкторе дизайн не ломают.
   ============================================================ */

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-button,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) h3.xdget-header.with-link {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin: 0 0 10px !important;
  padding: 12px 16px !important;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-sm) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-transform: none;
  white-space: normal;
  border-radius: var(--bd-radius-sm) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color var(--bd-ease), border-color var(--bd-ease), box-shadow var(--bd-ease);
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-button b {
  font-weight: inherit !important;
}

/* Главные действия */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .cst-button2 {
  justify-content: center;
  text-align: center !important;
  color: var(--bd-on-primary) !important;
  background: var(--bd-primary) !important;
  border: 1px solid var(--bd-primary) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .cst-button2:hover {
  background: var(--bd-primary-hover) !important;
}

/* Аккаунт и деньги */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xst-button {
  justify-content: center;
  text-align: center !important;
  color: var(--bd-text) !important;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line) !important;
  box-shadow: var(--bd-shadow-soft) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xst-button:hover {
  border-color: var(--bd-line-strong) !important;
}

/* Разделы и материалы */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-button[class*="cst-button"]:not(.cst-button2),
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) h3.xdget-header[class*="cst-button"]:not(.cst-button2) {
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px !important;
  padding: 10px 10px 10px 16px !important;
  font-weight: 500 !important;
  color: var(--bd-text) !important;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-button[class*="cst-button"]:not(.cst-button2)::after,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) h3.xdget-header[class*="cst-button"]:not(.cst-button2)::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: var(--bd-surface) var(--bd-i-arrow) center / 14px no-repeat;
  border: 1px solid var(--bd-line-strong);
  border-radius: 50%;
  transition: background-color var(--bd-ease);
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-button[class*="cst-button"]:not(.cst-button2):hover,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) h3.xdget-header[class*="cst-button"]:not(.cst-button2):hover {
  border-color: var(--bd-line-strong) !important;
  box-shadow: var(--bd-shadow-soft) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-button[class*="cst-button"]:not(.cst-button2):hover::after,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) h3.xdget-header[class*="cst-button"]:not(.cst-button2):hover::after {
  background-color: var(--bd-surface-2);
}

/* Обёртки-группы кнопок несут белый фон инлайном */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-div,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-html {
  background: transparent !important;
}

/* ── Разделители, картинки, текстовые вставки ───────────── */

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) hr.xdget-separator {
  margin: 14px 0 !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-image img,
.gc-main-content .xdget-row > .xdget-container:first-child:not(:only-child) > .xdget-image img {
  max-width: 100%;
  border-radius: var(--bd-radius);
}

.gc-main-content .xdget-row > .xdget-container:first-child:not(:only-child) > .xdget-image {
  margin-bottom: var(--bd-gap) !important;
}

/* Бонусный счёт и прочие текстовые вставки между кнопками */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-html .html-content {
  margin: 0 0 10px;
  padding: 12px 16px;
  font-size: var(--bd-fs-sm);
  text-align: center;
  color: var(--bd-text);
  background: var(--bd-surface-2);
  border-radius: var(--bd-radius-sm);
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-html .html-content:empty {
  display: none;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-html .html-content p {
  margin: 0;
  color: inherit;
}

/* ── Цитата ─────────────────────────────────────────────────
   Вставляют сами сотрудники: блок «HTML» в правой колонке любой
   страницы, текст меняют там же, тему трогать не нужно:

     <div class="bd-quote">
       <p class="bd-quote__text">Бухгалтерский бизнес: прибыльно, системно, в кайф</p>
       <p class="bd-quote__author">Екатерина Сидиченко</p>
     </div>
*/

.bd-quote {
  position: relative;
  margin: 18px 0 0;
  padding: 58px 24px 26px;
  overflow: hidden;
  text-align: left;
  color: var(--bd-on-primary);
  background: var(--bd-facet);
  border-radius: var(--bd-radius);
}

.bd-quote::before {
  content: "\201C";
  position: absolute;
  top: 12px;
  left: 22px;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-display);
  font-weight: 800;
  line-height: 1;
  color: var(--bd-cta);
}

/* Грани в углу */
.bd-quote::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -46px;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(191, 168, 240, 0.35);
  border-radius: var(--bd-radius);
  box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.03), 0 0 0 23px rgba(191, 168, 240, 0.15);
  transform: rotate(45deg);
}

.gc-main-content .bd-quote .bd-quote__text {
  position: relative;
  z-index: 1;
  max-width: 260px;
  margin: 0;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bd-on-primary);
}

.gc-main-content .bd-quote .bd-quote__author {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  font-size: var(--bd-fs-sm);
  font-weight: 600;
  color: var(--bd-cta);
}

/* ── Виджеты правой колонки ─────────────────────────────────
   Всё здесь ставят сами сотрудники в конструкторе, порядок в колонке —
   их порядок блоков. Код виджетов — docs/инструкция-для-команды.md.

     блок HTML <div data-bd-widget="progress">  «Ваш прогресс» (path.js)
     виджет «Продление покупки» GetCourse       «Доступ к программе»
     блок HTML .bd-curator / .bd-help / .bd-bonus / .bd-quote / .bd-promo
     контейнер с классом bd-tiles               кнопки внутри — плитками
   ============================================================ */

/* Колонка — контейнер: раскладка плиток зависит от её ширины */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) {
  container: bd-side / inline-size;
}

/* Блоки HTML с виджетами — без серой подложки текстовых вставок */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-html .html-content:has([data-bd-widget], .bd-curator, .bd-promo, .bd-quote, .bd-help, .bd-bonus) {
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
  background: none;
}

[data-bd-widget]:empty {
  display: none;
}

/* Общий вид карточек */
.bd-curator {
  padding: 18px 20px;
  text-align: left;
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  box-shadow: var(--bd-shadow-soft);
}

.bd-progress-host {
  margin-bottom: 14px;
}

/* ── Доступ к программе: виджет GetCourse «Продление покупки» ──
   Разметка GetCourse:
     .user-product-block
       b                       «Доступ к тренингу закончился 319 дней назад»
       .text-muted             «09 Окт — 09 Ноя 2025»
       a.prolong-link          «Продлить доступ» — раскрывает тарифы
       .prolong-offers         label (радио + цена) и div (срок) парами
         button.btn-prolongate «Продлить»
   Виджет виден только той группе, которой его показали в конструкторе,
   и сам знает продукт. src/js/aside.js помечает состояние:
   is-expired — закончился, is-soon — осталось до 14 дней. */

/* У блока в конструкторе свои инлайн-стили (жёлтый фон, по центру,
   Montserrat 18px, красный статус) — отсюда !important */
.gc-main-content .xdget-productTiming {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-body) !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
}

.gc-main-content .xdget-productTiming .user-product-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 !important;
  padding: 18px 20px;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-body) !important;
  text-align: left !important;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius) !important;
  box-shadow: var(--bd-shadow-soft);
}

.gc-main-content .xdget-productTiming .user-product-block::before {
  content: "Доступ к программе";
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-left: 30px;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  line-height: 20px;
  color: var(--bd-text);
  background: var(--bd-i-calendar-primary) left center / 20px no-repeat;
}

.gc-main-content .xdget-productTiming .user-product-block > b {
  font-size: var(--bd-fs-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--bd-text) !important;
}

.gc-main-content .xdget-productTiming .user-product-block.is-expired > b {
  color: var(--bd-warning) !important;
}

.gc-main-content .xdget-productTiming .user-product-block > .text-muted {
  font-size: var(--bd-fs-sm);
  color: var(--bd-text-muted) !important;
}

/* «Продлить доступ» — кнопкой; скоро или уже закончился — салатовой */
.gc-main-content .xdget-productTiming a.prolong-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  margin-top: 12px;
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  color: var(--bd-primary-text) !important;
  text-decoration: none !important;
  background: var(--bd-surface);
  border: 1px solid var(--bd-line-strong) !important;
  border-bottom: 1px solid var(--bd-line-strong) !important;
  border-radius: var(--bd-radius-sm);
}

.gc-main-content .xdget-productTiming a.prolong-link:hover {
  border-color: var(--bd-primary) !important;
}

.gc-main-content .xdget-productTiming .is-soon a.prolong-link,
.gc-main-content .xdget-productTiming .is-expired a.prolong-link {
  color: var(--bd-on-cta) !important;
  background: var(--bd-cta);
  border-color: var(--bd-cta) !important;
}

/* Тарифы продления: в label — радио, название тарифа и цена (span),
   следом div со сроком. Строка: кружок, название, цена справа; срок
   мелко под названием; выбранный тариф подсвечен */
.gc-main-content .xdget-productTiming .prolong-offers {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  overflow: hidden;
  font-size: var(--bd-fs-sm);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-sm);
}

.gc-main-content .xdget-productTiming .prolong-offers.hidden {
  display: none !important;
}

.gc-main-content .xdget-productTiming .prolong-offers > label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  margin: 0;
  padding: 10px 12px 2px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bd-text);
  border-top: 1px solid var(--bd-line);
  cursor: pointer;
}

.gc-main-content .xdget-productTiming .prolong-offers > label:first-child {
  border-top: 0;
}

.gc-main-content .xdget-productTiming .prolong-offers > label > span {
  font-weight: 700;
  white-space: nowrap;
}

.gc-main-content .xdget-productTiming .prolong-offers > label + div {
  padding: 0 12px 10px 40px;
  font-size: var(--bd-fs-xs);
  color: var(--bd-text-muted);
}

.gc-main-content .xdget-productTiming .prolong-offers > label:has(input:checked),
.gc-main-content .xdget-productTiming .prolong-offers > label:has(input:checked) + div {
  background: var(--bd-lavender);
}

.gc-main-content .xdget-productTiming .prolong-offers input[type="radio"] {
  margin: 2px 0 0;
  accent-color: var(--bd-primary);
}

.gc-main-content .xdget-productTiming .btn-prolongate {
  height: 44px;
  margin: 10px 12px 12px;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--bd-on-cta) !important;
  background: var(--bd-cta) !important;
  border: 0 !important;
  border-radius: var(--bd-radius-sm) !important;
  box-shadow: none !important;
}

.gc-main-content .xdget-productTiming .btn-prolongate:hover {
  background: var(--bd-cta-hover) !important;
}

/* Куратор */
.bd-curator__label {
  margin-bottom: 12px;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-body);
  font-weight: 700;
  color: var(--bd-text);
}

.bd-curator__person {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.bd-curator__photo {
  position: relative;
  width: 72px;
  height: 72px;
  background: var(--bd-surface-2) 50% 18% / 170% no-repeat;  /* фото квадратное — приближаем лицо */
  border-radius: 50%;
}

/* «Онлайн» — зелёная точка у фото и пометка у имени, только в часы
   работы по Москве (data-hours у .bd-curator, по умолчанию 8–20;
   класс is-online ставит src/js/aside.js) */
.bd-curator.is-online .bd-curator__photo::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  background: var(--bd-success);
  border: 2px solid var(--bd-surface);
  border-radius: 50%;
}

.bd-curator.is-online .bd-curator__name::after {
  content: "онлайн";
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  vertical-align: 2px;
  color: var(--bd-success-text);
  background: var(--bd-success-bg);
  border-radius: var(--bd-radius-pill);
}

/* Несколько кураторов по графику (обёртка .bd-curators, aside.js):
   видна карточка того, кто сегодня на смене; до работы скрипта — первая */
.bd-curators:not(.is-ready) > .bd-curator:not(:first-child),
.bd-curators.is-ready > .bd-curator:not(.is-duty) {
  display: none;
}

.bd-curators > .bd-curator.is-duty ~ .bd-curator.is-duty {
  margin-top: 10px;
}

.gc-main-content .bd-curator__next {
  margin: 4px 0 0;
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  color: var(--bd-primary-text);
}

.gc-main-content .bd-curator__hours {
  margin: 4px 0 0;
  font-size: var(--bd-fs-xs);
  line-height: 1.35;
  color: var(--bd-text-faint);
}

.gc-main-content .bd-curator__name {
  margin: 0;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-body);
  font-weight: 700;
  line-height: 1.25;
  color: var(--bd-text);
}

.gc-main-content .bd-curator__role {
  margin: 2px 0 0;
  font-size: var(--bd-fs-sm);
  line-height: 1.35;
  color: var(--bd-text-muted);
}

.bd-curator__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.gc-main-content a.bd-curator__btn {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  font-size: var(--bd-fs-sm);
  font-weight: 600;
  color: var(--bd-primary-text) !important;
  text-decoration: none !important;
  background: var(--bd-surface);
  border: 1px solid var(--bd-line-strong);
  border-radius: var(--bd-radius-sm);
}

/* Иконка кнопки: по умолчанию «сообщение», is-telegram — Telegram */
.gc-main-content a.bd-curator__btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--bd-i-messages-primary) center / contain no-repeat;
}

.gc-main-content a.bd-curator__btn.is-telegram::before {
  background-image: var(--bd-i-telegram-primary);
}

.gc-main-content a.bd-curator__btn.is-primary {
  color: var(--bd-on-primary) !important;
  background: var(--bd-primary);
  border-color: var(--bd-primary);
}

.gc-main-content a.bd-curator__btn.is-primary::before {
  background-image: var(--bd-i-messages-on);
}

.gc-main-content a.bd-curator__btn.is-primary.is-telegram::before {
  background-image: var(--bd-i-telegram-on);
}

.gc-main-content a.bd-curator__btn:hover {
  border-color: var(--bd-primary);
}

/* «Нужна помощь?» — блок HTML со ссылкой, или кнопка конструктора
   с классом bd-help (тогда без второй строки) */
.gc-main-content a.bd-help,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-help {
  position: relative;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px !important;
  padding: 16px !important;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-body) !important;
  font-weight: 700 !important;
  text-align: left !important;
  color: var(--bd-text) !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--bd-lavender) 0%, var(--bd-surface) 100%) !important;
  border: 1px solid #E4DAF3 !important;
  border-radius: var(--bd-radius) !important;
  box-shadow: none !important;
}

.gc-main-content a.bd-help::before,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-help::before {
  content: "";
  width: 46px;
  height: 46px;
  background: var(--bd-i-headset-on) center / 22px no-repeat, var(--bd-facet);
  border-radius: 50%;
}

.gc-main-content a.bd-help::after,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-help::after {
  content: "";
  width: 32px;
  height: 32px;
  background: var(--bd-surface) var(--bd-i-arrow-primary) center / 14px no-repeat;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--bd-shadow-soft);
}

.bd-help__body {
  display: grid;
  gap: 2px;
  line-height: 1.35;
}

.bd-help__body b {
  font-family: var(--bd-font-display);
  font-weight: 700;
}

.bd-help__body span {
  font-size: var(--bd-fs-xs);
  font-weight: 400;
  color: var(--bd-text-muted);
}

.gc-main-content a.bd-help:hover::after {
  background-color: var(--bd-lavender);
}

/* Бонусный счёт — блок HTML, сумма — переменной GetCourse в <b> */
.gc-main-content .bd-bonus {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-align: left;
  color: var(--bd-text) !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--bd-lavender) 0%, var(--bd-surface-2) 100%);
  border-radius: var(--bd-radius);
}

.bd-bonus__icon {
  width: 48px;
  height: 48px;
  background: var(--bd-surface) var(--bd-i-crown-primary) center / 24px no-repeat;
  border-radius: 12px;
}

.bd-bonus__body {
  display: grid;
  gap: 2px;
}

.bd-bonus__body span {
  font-size: var(--bd-fs-xs);
  color: var(--bd-text-muted);
}

.bd-bonus__body b {
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-h3);
  font-weight: 800;
  line-height: 1.1;
}

a.bd-bonus::after {
  content: "";
  width: 32px;
  height: 32px;
  background: var(--bd-surface) var(--bd-i-arrow-primary) center / 14px no-repeat;
  border-radius: 50%;
}

/* Баннер со ссылкой (картинка по желанию) */
.gc-main-content a.bd-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  margin-bottom: 14px;
  padding: 22px;
  overflow: hidden;
  color: var(--bd-on-primary) !important;
  text-decoration: none !important;
  background:
    linear-gradient(180deg, rgba(42, 19, 64, 0.15) 0%, rgba(42, 19, 64, 0.85) 100%),
    var(--bd-promo-img, none) center / cover no-repeat,
    var(--bd-facet);
  border-radius: var(--bd-radius);
}

.bd-promo__title {
  margin-top: auto;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.bd-promo__text {
  font-size: var(--bd-fs-sm);
  color: rgba(255, 255, 255, 0.82);
}

.bd-promo__btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 8px 16px;
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  color: var(--bd-on-cta);
  background: var(--bd-cta);
  border-radius: var(--bd-radius-sm);
}

/* ── Плитки: контейнер с классом bd-tiles ──────────────────
   В конструкторе: блок «Контейнер», класс bd-tiles (светлые иконки —
   bd-tiles bd-tiles--light). Внутри — заголовок (блок «Заголовок» без
   ссылки) и кнопки; каждая кнопка становится плиткой. Иконка — класс
   кнопки bd-ic-<имя>, без него — ромб. Свернуть группу — src/js/aside.js. */

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.bd-tiles {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px !important;
  padding: 14px !important;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > hr.xdget-separator {
  display: none !important;
}

/* Заголовок группы */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > .xdget-block.xdget-header:not(.with-link) {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-xs) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em;
  color: var(--bd-text) !important;
  background: none !important;
  border: 0 !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > .xdget-block.xdget-header:not(.with-link)::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--bd-i-bolt-primary) center / contain no-repeat;
}

.bd-tiles__toggle {
  margin-left: auto;
  padding: 2px 0;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bd-primary-text);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Свёрнуто: прячем всё, кроме заголовка группы. Селектор сильнее,
   чем у плитки ниже (там display: flex !important), — иначе плитки
   оставались на месте и «Свернуть» ничего не делал */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles.is-collapsed.is-collapsed > .xdget-block:not(.xdget-header),
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles.is-collapsed.is-collapsed > .xdget-block.xdget-header.with-link,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles.is-collapsed > :not(.xdget-block) {
  display: none !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles.is-collapsed > .xdget-block.xdget-header:not(.with-link) {
  margin: 0 !important;
}

/* Плитка: иконка над подписью, стрелка в углу */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-button, .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-header.with-link {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  min-height: 92px;
  margin: 0 !important;
  padding: 10px 8px !important;
  font-family: var(--bd-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  hyphens: auto;
  overflow-wrap: break-word;
  color: var(--bd-text) !important;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-radius-sm) !important;
  box-shadow: 0 4px 12px -8px rgba(42, 19, 64, 0.25) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-button::before, .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-header.with-link::before {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--bd-tile-i, var(--bd-i-facet-on)) center / 18px no-repeat, var(--bd-facet);
  border-radius: 10px;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles--light .xdget-block.xdget-button::before,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles--light .xdget-block.xdget-header.with-link::before {
  background-color: var(--bd-violet-500);
  background-image: var(--bd-tile-i, var(--bd-i-facet-on));
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-button::after, .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-header.with-link::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 10px;
  width: 12px;
  height: 12px;
  background: var(--bd-i-arrow) center / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0.6;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-button:hover,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-header.with-link:hover {
  border-color: var(--bd-line-strong) !important;
  box-shadow: var(--bd-shadow-soft) !important;
}

/* Одиночная плитка — кнопке класс bd-tile, контейнер не нужен:
   во всю ширину, иконка слева от подписи */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-tile,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-header.with-link.bd-tile {
  position: relative;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  margin: 0 0 14px !important;
  padding: 12px 54px 12px 12px !important;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-sm) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  color: var(--bd-text) !important;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-radius) !important;
  box-shadow: 0 4px 12px -8px rgba(42, 19, 64, 0.25) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-tile::before,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-header.with-link.bd-tile::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--bd-tile-i, var(--bd-i-facet-on)) center / 22px no-repeat, var(--bd-facet);
  border-radius: 12px;
  box-shadow: 0 6px 14px -8px rgba(42, 19, 64, 0.6);
}

/* Стрелка — в круге, как у остальных кнопок колонки */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-tile::after,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-header.with-link.bd-tile::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 30px;
  height: 30px;
  background: var(--bd-surface) var(--bd-i-arrow-primary) center / 14px no-repeat;
  border: 1px solid var(--bd-line-strong);
  border-radius: 50%;
  box-shadow: none;
  opacity: 1;
  transform: translateY(-50%);
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-tile:hover,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-header.with-link.bd-tile:hover {
  border-color: var(--bd-line-strong) !important;
  box-shadow: var(--bd-shadow-soft) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-button.bd-tile:hover::after,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.xdget-header.with-link.bd-tile:hover::after {
  background-color: var(--bd-lavender);
}

/* Нечётная последняя плитка — во всю ширину. Места вдоволь, поэтому
   иконка слева от подписи, шрифт крупнее и без пустого низа */
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > .xdget-block:last-child:nth-child(even) {
  grid-column: 1 / -1;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > .xdget-block.xdget-button:last-child:nth-child(even),
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > .xdget-block.xdget-header.with-link:last-child:nth-child(even) {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 10px 34px 10px 10px !important;
  font-size: var(--bd-fs-sm) !important;
}

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > .xdget-block.xdget-button:last-child:nth-child(even)::after,
.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles > .xdget-block.xdget-header.with-link:last-child:nth-child(even)::after {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

/* Широкая колонка — иконка слева от подписи, как в макете */
@container bd-side (min-width: 420px) {
  .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-button, .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-header.with-link {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px 28px 10px 10px !important;
    font-size: 13px !important;
  }

  .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-button::after, .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .bd-tiles .xdget-block.xdget-header.with-link::after {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Совсем узкая — одна колонка */
@container bd-side (max-width: 240px) {
  .gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-block.bd-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bd-ic-profile { --bd-tile-i: var(--bd-i-profile-on); }
.bd-ic-file { --bd-tile-i: var(--bd-i-file-on); }
.bd-ic-ticket { --bd-tile-i: var(--bd-i-ticket-on); }
.bd-ic-gift { --bd-tile-i: var(--bd-i-gift-on); }
.bd-ic-calculator { --bd-tile-i: var(--bd-i-calculator-on); }
.bd-ic-folder { --bd-tile-i: var(--bd-i-folder-on); }
.bd-ic-messages { --bd-tile-i: var(--bd-i-messages-on); }
.bd-ic-spark { --bd-tile-i: var(--bd-i-spark-on); }
.bd-ic-mic { --bd-tile-i: var(--bd-i-mic-on); }
.bd-ic-compass { --bd-tile-i: var(--bd-i-compass-on); }
.bd-ic-calendar { --bd-tile-i: var(--bd-i-calendar-on); }
.bd-ic-play { --bd-tile-i: var(--bd-i-play-on); }
.bd-ic-star { --bd-tile-i: var(--bd-i-star-on); }
.bd-ic-send { --bd-tile-i: var(--bd-i-send-on); }
.bd-ic-help { --bd-tile-i: var(--bd-i-help-on); }
.bd-ic-telegram { --bd-tile-i: var(--bd-i-telegram-on); }
.bd-ic-teach { --bd-tile-i: var(--bd-i-teach-on); }
.bd-ic-crown { --bd-tile-i: var(--bd-i-crown-on); }

/* ── Чаты тренинга ────────────────────────────────────────
   Только стилями: название, описание и картинку чата задают в его
   настройках в GetCourse. Первый в списке — фиолетовой карточкой,
   остальные — светлыми. Кнопка нарисована, кликается вся карточка. */

.gc-main-content .xdget-row > .xdget-container:last-child:not(:only-child) .xdget-trainingChats .chat-list {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.gc-main-content .xdget-trainingChats .chat-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: 0;
  padding: 18px 18px 72px;
  background: linear-gradient(135deg, var(--bd-lavender) 0%, var(--bd-surface-2) 100%) !important;
  border: 0;
  border-radius: var(--bd-radius);
  box-shadow: none;
}

.gc-main-content .xdget-trainingChats .chat-item:first-child {
  background:
    radial-gradient(circle at 90% 10%, rgba(123, 79, 214, 0.55), transparent 55%),
    var(--bd-facet) !important;
}

.gc-main-content .xdget-trainingChats .training-logo-course,
.gc-main-content .xdget-trainingChats .chatium-icon {
  width: 52px;
  height: 52px;
  margin: 0;
}

.gc-main-content .xdget-trainingChats img {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 18px -8px rgba(42, 19, 64, 0.45);
}

/* Описание из GetCourse — до четырёх строк */
.gc-main-content .xdget-trainingChats .chat-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  padding-right: 40px;
  font-size: var(--bd-fs-xs);
  line-height: 1.45;
  color: var(--bd-text-muted) !important;
}

.gc-main-content .xdget-trainingChats .chat-title {
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-body);
  font-weight: 700;
  line-height: 1.25;
  color: var(--bd-text) !important;
  text-decoration: none !important;
}

/* Ссылка названия растянута на всю карточку */
.gc-main-content .xdget-trainingChats .chat-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gc-main-content .xdget-trainingChats .chat-unread-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 2px 8px;
  font-size: var(--bd-fs-xs);
  font-weight: 700;
  color: var(--bd-on-primary) !important;
  background: var(--bd-primary) !important;
  border-radius: var(--bd-radius-pill);
}

.gc-main-content .xdget-trainingChats .chat-item::after {
  content: "Открыть чат";
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  color: var(--bd-primary-text);
  background: var(--bd-surface) var(--bd-i-arrow-primary) calc(50% + 60px) center / 14px no-repeat;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-sm);
}

.gc-main-content .xdget-trainingChats .chat-item:hover::after {
  background-color: var(--bd-lavender);
}

.gc-main-content .xdget-trainingChats .chat-item:first-child::after {
  content: "Перейти в сообщество";
  background-position: calc(50% + 94px) center;
  border-color: transparent;
}

.gc-main-content .xdget-trainingChats .chat-item:first-child .chat-title {
  color: var(--bd-on-primary) !important;
}

.gc-main-content .xdget-trainingChats .chat-item:first-child .chat-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

.gc-main-content .xdget-trainingChats .chat-item:first-child .chat-unread-badge {
  color: var(--bd-on-cta) !important;
  background: var(--bd-cta) !important;
}

/* ============================================================
   09. Строка поиска (разметка — src/html/search.html)
   Как поле поиска вверху референса.
   ============================================================ */

.bd-search {
  margin: 0 0 var(--bd-gap);
}

/* Подпись нужна скринридерам, визуально поле говорит само за себя */
.bd-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bd-search__row {
  display: flex;
  gap: 8px;
}

.gc-main-content .bd-search__input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 16px 0 48px !important;
  font-size: var(--bd-fs-body) !important;
  color: var(--bd-text) !important;
  background: var(--bd-surface) var(--bd-i-search) 16px center / 20px no-repeat !important;
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-radius) !important;
  box-shadow: var(--bd-shadow-soft) !important;
  transition: border-color var(--bd-ease), box-shadow var(--bd-ease);
}

.gc-main-content .bd-search__input::placeholder {
  color: var(--bd-text-faint);
}

.gc-main-content .bd-search__input:focus {
  border-color: var(--bd-primary) !important;
  box-shadow: var(--bd-focus) !important;
  outline: none;
}

.bd-search__btn {
  flex: none;
  height: 50px;
  padding: 0 22px;
  font-size: var(--bd-fs-body);
  font-weight: 600;
  color: var(--bd-on-primary);
  background: var(--bd-primary);
  border: 0;
  border-radius: var(--bd-radius);
  cursor: pointer;
  transition: background-color var(--bd-ease);
}

.bd-search__btn:hover {
  background: var(--bd-primary-hover);
}

@media (max-width: 480px) {
  .bd-search__btn {
    padding: 0 16px;
  }
}

/* ── Строка поиска вверху страниц обучения (src/js/search.js) ──
   Пользователи не замечали поиск: поле стало ярче — лавандовая рамка,
   фиолетовая лупа и кнопка «Найти». Такой же вид у поиска в шапке
   «Экосистемы». */

.gc-main-content .bd-searchbar {
  display: flex;
  gap: 8px;
  margin: 12px 0 20px;
}

.gc-main-content .bd-searchbar__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 18px 0 52px !important;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-lg) !important;
  color: var(--bd-text) !important;
  background: var(--bd-surface) var(--bd-i-search-primary) 18px center / 22px no-repeat !important;
  border: 2px solid var(--bd-violet-500) !important;   /* яркая рамка — строку видно на любом фоне */
  border-radius: var(--bd-radius-sm) !important;
  box-shadow: 0 4px 14px rgba(69, 34, 107, 0.12) !important;
  transition: border-color var(--bd-ease), box-shadow var(--bd-ease);
}

.gc-main-content .bd-searchbar__input::placeholder {
  color: var(--bd-text-muted);
}

.gc-main-content .bd-searchbar__input:focus {
  border-color: var(--bd-primary) !important;
  box-shadow: var(--bd-focus) !important;
  outline: none;
}

.gc-main-content .bd-searchbar__btn {
  flex: none;
  height: 56px;
  padding: 0 28px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  color: var(--bd-on-cta);
  background: var(--bd-cta);   /* салатовая — поиск должно быть видно сразу */
  border: 0;
  border-radius: var(--bd-radius-sm);
  cursor: pointer;
  transition: background-color var(--bd-ease);
}

.gc-main-content .bd-searchbar__btn:hover {
  background: var(--bd-cta-hover);
}

@media (max-width: 768px) {
  .gc-main-content .bd-searchbar {
    max-width: none;
  }

  .gc-main-content .bd-searchbar__btn {
    display: none;   /* на телефоне ищем по Enter */
  }
}

/* ============================================================
   13. Страница поиска /pl/search/search-lesson

   Грузится в теме аккаунта (другие темы на эту страницу не приходят),
   поэтому все правила — под .sp-page или html.bd-smart-search:
   на остальных страницах и в админке они ничего не задевают.

   Штатная разметка GetCourse (приложение на Vue):
     .sp-page > h1.sp-page-title
              > .sp-search-bar > form.sp-search-form > input.sp-search-field + button.sp-search-btn
              > .sp-not-found / .sp-results (.sp-item-card …)
   Нашу выдачу строит src/js/search.js в .bd-sx, штатную прячем.
   Не отработал скрипт — остаётся штатная выдача, тоже в цветах темы.
   ============================================================ */

html.bd-smart-search body {
  background: var(--bd-bg) !important;
}

.sp-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 0 60px;
  font-family: var(--bd-font) !important;
  color: var(--bd-text);
}

.sp-page .sp-page-title {
  margin: 12px 0 20px !important;
  font-family: var(--bd-font-display) !important;
  font-size: var(--bd-fs-hero) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--bd-text) !important;
}

/* ── Строка поиска ──────────────────────────────────────── */

.sp-page .sp-search-form {
  display: flex !important;
  gap: 8px;
  max-width: none !important;
}

.sp-page .sp-search-input-container {
  flex: 1;
  height: 54px !important;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line-strong) !important;
  border-radius: var(--bd-radius-sm) !important;
  box-shadow: none !important;
}

.sp-page .sp-search-input-container:focus-within {
  border-color: var(--bd-violet-500) !important;
  box-shadow: var(--bd-focus) !important;
}

.sp-page .sp-search-field {
  height: 100% !important;
  font-family: var(--bd-font) !important;
  font-size: var(--bd-fs-body) !important;
  color: var(--bd-text) !important;
  background: transparent !important;
}

.sp-page .sp-search-btn {
  height: 54px !important;
  padding: 0 24px !important;
  font-family: var(--bd-font-display) !important;
  font-size: var(--bd-fs-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  color: var(--bd-on-cta) !important;
  background: var(--bd-cta) !important;
  border: 0 !important;
  border-radius: var(--bd-radius-sm) !important;
}

.sp-page .sp-search-btn:hover {
  background: var(--bd-cta-hover) !important;
}

.sp-page .sp-search-input-help {
  margin-top: 8px !important;
  font-size: var(--bd-fs-sm) !important;
  color: var(--bd-text-faint) !important;
}

/* ── Штатная выдача (если скрипт не отработал) ──────────── */

.sp-page .rd-tab {
  border-radius: var(--bd-radius-pill) !important;
}

.sp-page .rd-tab.active {
  color: var(--bd-on-primary) !important;
  background: var(--bd-primary) !important;
  border-color: var(--bd-primary) !important;
}

.sp-page .sp-item-card {
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-radius) !important;
}

.sp-page .sp-item-title-link {
  font-family: var(--bd-font-display) !important;
  font-weight: 700 !important;
  color: var(--bd-text) !important;
}

.bd-smart-search .sp-page .sp-results,
.bd-smart-search .sp-page .sp-not-found {
  display: none !important;
}

/* ── Наша выдача ────────────────────────────────────────── */

.bd-sx {
  margin-top: 24px;
}

.bd-sx__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.bd-sx__count {
  font-size: var(--bd-fs-sm);
  color: var(--bd-text-muted);
}

.bd-sx__filters {
  display: flex;
  gap: 6px;
}

.gc-main-content .bd-sx__filter,
.bd-sx__filter {
  height: 34px;
  padding: 0 14px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-sm);
  font-weight: 500;
  color: var(--bd-text-muted);
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-pill);
  cursor: pointer;
}

.bd-sx__filter span {
  margin-left: 2px;
  opacity: 0.6;
}

.bd-sx__filter.is-active {
  color: var(--bd-on-primary);
  background: var(--bd-primary);
  border-color: var(--bd-primary);
}

.bd-sx__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gc-main-content .bd-sx__link,
.bd-sx__link {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 60px 16px 20px;
  color: var(--bd-text);
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  text-decoration: none;
  transition: border-color var(--bd-ease), box-shadow var(--bd-ease);
}

.bd-sx__link:hover {
  border-color: var(--bd-line-strong);
  box-shadow: var(--bd-shadow-soft);
}

.bd-sx__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 32px;
  height: 32px;
  background: var(--bd-lavender) var(--bd-i-arrow-primary) center / 15px no-repeat;
  border-radius: 50%;
  transform: translateY(-50%);
}

.bd-sx__type {
  justify-self: start;
  padding: 2px 8px;
  font-size: var(--bd-fs-xs);
  font-weight: 500;
  color: var(--bd-text-muted);
  background: var(--bd-surface-2);
  border-radius: var(--bd-radius-pill);
}

.bd-sx__item.is-training .bd-sx__type {
  color: var(--bd-primary-text);
  background: var(--bd-lavender);
}

.bd-sx__title {
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-lg);
  font-weight: 700;
  line-height: 1.3;
}

.bd-sx__path {
  padding-left: 18px;
  font-size: var(--bd-fs-sm);
  color: var(--bd-text-muted);
  background: var(--bd-i-teach) left center / 13px no-repeat;
}

.bd-sx__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--bd-fs-sm);
  line-height: 1.5;
  color: var(--bd-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bd-sx mark {
  padding: 0 1px;
  color: inherit;
  background: #E6F7A8;
  border-radius: 3px;
}

.bd-sx__loading,
.bd-sx__empty {
  padding: 24px;
  font-size: var(--bd-fs-body);
  color: var(--bd-text-muted);
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
}

.bd-sx__empty-img {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.bd-sx__empty p {
  margin: 0 0 8px;
  color: var(--bd-text);
}

.bd-sx__empty ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 768px) {
  .sp-page {
    padding: 0 16px 40px;
  }

  .sp-page .sp-search-btn {
    padding: 0 16px !important;
  }

  .bd-sx__link {
    padding: 14px 52px 14px 14px;
  }
}


/* ── Панель поиска поверх кабинета (src/js/search.js) ────────
   Системная страница поиска GetCourse не подключает темы, поэтому
   выдача живёт панелью прямо в кабинете: пункт меню «Поиск» и строка
   поиска на страницах открывают её. */

.bd-sxp {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  justify-content: center;
  padding: 64px 20px 24px;
  overflow-y: auto;
  background: var(--bd-overlay);
}

.bd-sxp.is-open {
  display: flex;
}

html.bd-sxp-open,
html.bd-sxp-open body {
  overflow: hidden;
}

.bd-sxp__box {
  width: 100%;
  max-width: 760px;
  height: fit-content;
  padding: var(--bd-pad);
  background: var(--bd-bg);
  border-radius: var(--bd-radius-lg);
  box-shadow: var(--bd-shadow);
}

.bd-sxp__form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--bd-gap);
}

.bd-sxp__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-body);
  color: var(--bd-text);
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-sm);
}

.bd-sxp__input:focus {
  outline: none;
  border-color: var(--bd-line-strong);
  box-shadow: var(--bd-focus);
}

.bd-sxp__find {
  flex: none;
  height: 52px;
  padding: 0 22px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  color: var(--bd-on-cta);
  background: var(--bd-cta);   /* как у строки поиска на страницах */
  border: 0;
  border-radius: var(--bd-radius-sm);
  cursor: pointer;
  transition: background-color var(--bd-ease);
}

.bd-sxp__find:hover {
  background: var(--bd-cta-hover);
}

.bd-sxp__close {
  flex: none;
  width: 52px;
  height: 52px;
  background: var(--bd-surface) var(--bd-i-close) center / 16px no-repeat;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-sm);
  cursor: pointer;
  transition: border-color var(--bd-ease);
}

.bd-sxp__close:hover {
  border-color: var(--bd-line-strong);
}

@media (max-width: 768px) {
  .bd-sxp {
    padding: 0;
  }

  .bd-sxp__box {
    min-height: 100%;
    border-radius: 0;
    padding: 16px;
  }

  .bd-sxp__find {
    display: none;   /* на телефоне ищем по Enter, кнопка съедает строку */
  }
}