/* ============================================================
   Курсы (/courses)

   Каталог живёт в двух оболочках: в кабинете и на публичном сайте, — поэтому
   стили вынесены отдельным файлом и подключаются обоими макетами.
   ============================================================ */

.cs-intro { max-width: 720px; margin: 0 0 18px; font-size: 15px; font-weight: 500; color: #5A6B7B; line-height: 1.55; text-wrap: pretty; }
.cs-trunc { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-note { font-size: 13.5px; font-weight: 600; color: #93A1B0; }
.cs-error { margin-top: 8px; font-size: 13px; font-weight: 600; color: #C7364B; }
.cs-reset { font-size: 13.5px; font-weight: 700; color: #93A1B0; text-decoration: none; }
.cs-reset:hover { color: #2E90D9; }

/* Публичная оболочка: тот же каталог, но на странице сайта, а не в кабинете. */
.cs-public { background: #F4F6F8; padding: 30px 28px 48px; }
.cs-public__inner { max-width: 1240px; margin: 0 auto; }
.cs-public__head { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.cs-public__title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #1F2E3D; }
.cs-public__head .cs-intro { max-width: 640px; margin: 0; }
.cs-public__back { margin-bottom: 18px; }

.cs-filters { background: #fff; border: 1px solid #E7ECF0; border-radius: 16px; padding: 16px 20px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-search { display: flex; align-items: center; gap: 9px; height: 44px; box-sizing: border-box; background: #F7F9FB; border: 1px solid #E1E8EE; border-radius: 11px; padding: 0 14px; flex: 0 0 280px; max-width: 100%; }
.cs-search__icon { font-size: 20px; color: #93A1B0; flex: 0 0 auto; }
.cs-search__input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: #1F2E3D; width: 100%; padding: 0; }

.cs-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cs-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid #E1E8EE; border-radius: 11px; background: #fff; font-size: 13.5px; font-weight: 700; color: #5A6B7B; text-decoration: none; white-space: nowrap; }
.cs-chip:hover { border-color: #8cc04b; color: #5E8F1B; }
.cs-chip .msi { font-size: 18px; }
.cs-chip--on, .cs-chip--on:hover { background: #8cc04b; border-color: #8cc04b; color: #fff; }

.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: stretch; }

/* Кабинетный каталог: полоса по центру и ровно три карточки в ряд. */
.cs-narrow { max-width: 1080px; margin: 0 auto; }
.cs-narrow .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-card { background: #fff; border: 1px solid #E7ECF0; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.cs-card__cover { flex: 0 0 190px; height: 190px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cs-card__cover-icon .msi { font-size: 52px; }
/* Обложки со старого сайта разной пропорции — вписываем по кадру. */
.cs-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cs-card__name { font-size: 17px; font-weight: 800; color: #1F2E3D; line-height: 1.3; text-decoration: none; text-wrap: pretty; overflow-wrap: anywhere; }
.cs-card__name:hover { color: #2278BE; }
.cs-card__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; max-width: 100%; background: #F4F6F8; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 11px; border-radius: 20px; }
.cs-card__tag .msi { flex: 0 0 auto; font-size: 15px; }
.cs-card__desc { margin: 0; font-size: 13.5px; font-weight: 500; color: #5A6B7B; line-height: 1.55; text-wrap: pretty; }
.cs-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #F1F4F7; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 10px; }
.cs-card__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.cs-price { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-price__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-price__now { font-size: 17px; font-weight: 800; color: #1F2E3D; white-space: nowrap; }
.cs-price__old { font-size: 13.5px; font-weight: 700; color: #A9B4C0; text-decoration: line-through; white-space: nowrap; }
.cs-price__note { font-size: 12px; font-weight: 600; color: #A9B4C0; }

.cs-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; background: #fff; border: 1px solid #E1E8EE; border-radius: 10px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #3A4A59; text-decoration: none; cursor: pointer; white-space: nowrap; }
.cs-btn:hover { border-color: #2E90D9; color: #2278BE; }
.cs-btn .msi { font-size: 18px; }
.cs-btn--buy, .cs-btn--buy:hover { background: #2E90D9; border-color: #2E90D9; color: #fff; box-shadow: 0 10px 20px -12px rgba(46,144,217,0.9); }
.cs-btn--buy:hover { background: #2278BE; border-color: #2278BE; }
.cs-btn--lg { height: 48px; padding: 0 24px; font-size: 14.5px; border-radius: 12px; }
/* Оплата в модалке — зелёная: последний шаг, а не переход к выбору. */
.cs-btn--pay, .cs-btn--pay:hover { background: #8cc04b; border-color: #8cc04b; color: #fff; box-shadow: 0 14px 28px -14px rgba(140,192,75,0.9); }
.cs-btn--pay:hover { background: #7BAE3D; border-color: #7BAE3D; }
/* Купленный курс: «Продолжить» зелёная — доступ уже есть, платить не нужно. */
.cs-btn--go, .cs-btn--go:hover { background: #8cc04b; border-color: #8cc04b; color: #fff; box-shadow: 0 10px 20px -12px rgba(140,192,75,0.9); }
.cs-btn--go:hover { background: #7BAE3D; border-color: #7BAE3D; }

.cs-owned { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 20px; background: rgba(140,192,75,0.12); color: #5E8F1B; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cs-owned .msi { font-size: 18px; }

.cs-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px; background: #fff; border: 1px solid #E7ECF0; border-radius: 16px; }
.cs-empty .msi { font-size: 34px; color: #C3CDD6; }
.cs-empty span { font-size: 14.5px; font-weight: 700; color: #93A1B0; }

.cs-more { display: flex; justify-content: center; margin-top: 18px; }
.cs-more__btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; background: #fff; border: 1px solid #E1E8EE; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: #3A4A59; text-decoration: none; }
.cs-more__btn:hover { border-color: #8cc04b; color: #5E8F1B; }
.cs-more__btn .msi { font-size: 19px; }
/* Пока идёт запрос: кнопка гаснет и второе нажатие не проходит. */
.cs-more__btn.is-busy { pointer-events: none; opacity: 0.55; }
.cs-more__btn.is-busy .msi { animation: cs-more-spin 0.7s linear infinite; }

@keyframes cs-more-spin { to { transform: rotate(360deg); } }

/* ------------------- Страница курса

   Две колонки: слева шапка и оглавление, справа — покупка. Ниже 980px колонки
   складываются в одну и покупка уезжает под оглавление. */

.cs-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cs-page__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cs-page__side { position: sticky; top: 16px; min-width: 0; }

.cs-hero { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #E7ECF0; border-radius: 18px; overflow: hidden; }
.cs-hero__cover { flex: 0 0 170px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* С обложкой колонка шире, а картинка видна целиком — она широкая. */
.cs-hero__cover--photo { flex-basis: 300px; align-items: flex-start; }
.cs-hero__cover--photo .cs-cover__img { height: auto; object-fit: contain; }
.cs-hero__cover .msi { font-size: 60px; }
.cs-hero__body { flex: 1; min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.cs-hero__name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #1F2E3D; line-height: 1.28; text-wrap: pretty; overflow-wrap: anywhere; }
.cs-hero__desc { margin: 0; font-size: 14.5px; font-weight: 500; color: #5A6B7B; line-height: 1.6; text-wrap: pretty; white-space: pre-line; }

.cs-block { background: #fff; border: 1px solid #E7ECF0; border-radius: 16px; }
.cs-block__head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid #EAEEF2; font-size: 15.5px; font-weight: 800; color: #1F2E3D; flex-wrap: wrap; }
.cs-block__head .msi { font-size: 20px; color: #2E90D9; }
.cs-block__body { padding: 20px 22px; display: flex; flex-direction: column; }
.cs-count { display: inline-flex; align-items: center; gap: 5px; background: #F4F6F8; color: #5A6B7B; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 20px; }

/* ------------------- Оглавление курса */

.cs-secs { gap: 10px; }
.cs-sec { border: 1px solid #EAEEF2; border-radius: 13px; background: #F7F9FB; overflow: hidden; }
.cs-sec[open] { background: rgba(46,144,217,0.06); border-color: rgba(46,144,217,0.28); }
.cs-sec__head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.cs-sec__head::-webkit-details-marker { display: none; }
.cs-sec__num { flex: 0 0 34px; height: 34px; border-radius: 10px; background: #F4F6F8; color: #5A6B7B; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; }
.cs-sec[open] .cs-sec__num { background: #E4F0FA; color: #2278BE; }
.cs-sec__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-sec__name { font-size: 15px; font-weight: 800; color: #1F2E3D; line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; }
.cs-sec__meta { font-size: 12.5px; font-weight: 600; color: #93A1B0; }
.cs-sec__arrow { flex: 0 0 auto; font-size: 22px; color: #5A6B7B; }
.cs-sec[open] .cs-sec__arrow { transform: rotate(180deg); }
.cs-sec__list { background: #fff; border-top: 1px solid #EAEEF2; }

.cs-lesson { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 22px; border-bottom: 1px solid #F1F4F7; min-width: 0; }
.cs-lesson:last-child { border-bottom: none; }
/* Курс без разделов — лекции идут одним списком, каждая своей карточкой. */
.cs-lesson--solo { border: 1px solid #EAEEF2; border-radius: 13px; background: #F7F9FB; padding: 14px 16px; }
.cs-lesson__num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; background: #F4F6F8; color: #5A6B7B; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.cs-lesson__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #1F2E3D; line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; }
.cs-lesson__mark { flex: 0 0 auto; font-size: 20px; color: #C3CDD6; }
.cs-lesson__mark--open { color: #5E8F1B; }

/* ------------------- Покупка */

.cs-buy { background: #fff; border: 1px solid #E7ECF0; border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.cs-buy__head { display: flex; flex-direction: column; gap: 3px; }
.cs-buy__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #1F2E3D; }
.cs-buy__price .cs-price__old { font-size: 16px; }
.cs-buy .cs-btn { justify-content: center; }
.cs-form { display: flex; flex-direction: column; gap: 0; }
.cs-form .cs-btn { margin-top: 18px; }

.cs-facts { display: flex; flex-direction: column; gap: 11px; padding-top: 14px; border-top: 1px solid #F1F4F7; }
.cs-facts:first-child { padding-top: 0; border-top: none; }
.cs-fact { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 13.5px; font-weight: 600; color: #5A6B7B; }
.cs-fact .msi { flex: 0 0 auto; font-size: 19px; color: #93A1B0; }
.cs-fact b { margin-left: auto; flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: #1F2E3D; white-space: nowrap; }

.cs-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #93A1B0; margin-bottom: 10px; }
.cs-label--next { margin-top: 22px; }
.cs-note--center { text-align: center; line-height: 1.5; text-wrap: pretty; }

.cs-packets, .cs-methods { display: flex; flex-direction: column; gap: 9px; }
.cs-packet, .cs-method { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border: 1.5px solid #E7ECF0; border-radius: 13px; background: #fff; cursor: pointer; }
.cs-packet input, .cs-method input { position: absolute; opacity: 0; pointer-events: none; }
.cs-packet:has(input:checked), .cs-method:has(input:checked) { border-color: #8cc04b; background: rgba(140,192,75,0.07); }
.cs-packet__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cs-packet__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cs-packet__name { font-size: 14.5px; font-weight: 700; color: #1F2E3D; overflow-wrap: anywhere; }
.cs-packet__period { font-size: 12.5px; font-weight: 700; color: #93A1B0; white-space: nowrap; }
.cs-packet__desc { font-size: 13px; font-weight: 500; color: #5A6B7B; line-height: 1.5; }
.cs-packet__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 16px; font-weight: 800; color: #1F2E3D; }
.cs-packet__check, .cs-method__check { flex: 0 0 auto; font-size: 21px; color: #8cc04b; visibility: hidden; }
.cs-packet:has(input:checked) .cs-packet__check, .cs-method:has(input:checked) .cs-method__check { visibility: visible; }

.cs-method__icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.cs-method__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #1F2E3D; }
.cs-method__soon { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #A9B4C0; text-transform: uppercase; letter-spacing: 0.04em; }
/* Неподключённый шлюз показываем, но выбрать его нельзя. */
.cs-method--off { cursor: not-allowed; opacity: 0.6; }

/* ------------------- Ведение курсов

   Список и форма живут только в кабинете, поэтому опираются на его карточки и
   поля; своё здесь — обложка в строке и строка пакета. */

.ca-thumb { flex: 0 0 56px; width: 56px; height: 40px; border-radius: 8px; overflow: hidden; background: #F1F4F7; display: flex; align-items: center; justify-content: center; color: #93A1B0; }
.ca-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-preview { max-width: 240px; border-radius: 10px; display: block; }

.ca-packet { border: 1px solid #E7ECF0; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: #FBFCFD; }
.ca-packet__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.ca-packet__grid--tr { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.ca-packet__drop { align-self: end; }
.ca-packet__more summary { font-size: 13px; font-weight: 700; color: #5A6B7B; cursor: pointer; }
.ca-packet__more[open] summary { margin-bottom: 10px; }

@media screen and (max-width: 980px) {
    .ca-packet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-packet__grid--tr { grid-template-columns: minmax(0, 1fr); }
}

/* Оглавление курса в кабинете: разделы карточками, лекции строками. */
.cl-list { display: flex; flex-direction: column; }
.cl-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #F1F4F7; min-width: 0; }
.cl-row--empty { color: #93A1B0; font-weight: 600; font-size: 13.5px; justify-content: center; padding: 18px; }
.cl-row__num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; background: #F4F6F8; color: #5A6B7B; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.cl-row__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #1F2E3D; overflow-wrap: anywhere; }
.cl-row__meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; background: #F4F6F8; color: #5A6B7B; font-size: 12px; font-weight: 700; }
.cl-chip .msi { font-size: 15px; }

.cl-item { border: 1px solid #E7ECF0; border-radius: 14px; padding: 14px 16px; background: #FBFCFD; display: flex; flex-direction: column; gap: 10px; }
.cl-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-item__kind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #5A6B7B; white-space: nowrap; }
.cl-item__title { flex: 1 1 220px; min-width: 0; }
.cl-item__order { flex: 0 0 92px; }

/* Состояние подписки в списке продаж. */
.cs-state { font-weight: 700; font-size: 12px; padding: 5px 11px; }
.cs-state--alive { background: rgba(140,192,75,0.16); color: #4C7A18; }
.cs-state--expired { background: #F1F4F7; color: #7C8B99; }
.cs-state--pending { background: rgba(232,163,61,0.16); color: #A8721C; }

/* ------------------- Урок курса

   Плеер и текст слева, оглавление справа. Страница только кабинетная: лекции
   открыты тем, кто оплатил доступ, а гость купить не может. */

.ls-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; row-gap: 10px; }
.ls-head__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-head__course { font-size: 12.5px; font-weight: 700; color: #93A1B0; }
.ls-progress { margin-left: auto; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: 0 0 auto; }
.ls-progress__label { font-size: 12.5px; font-weight: 700; color: #5A6B7B; }
.ls-progress__bar { display: block; width: 150px; height: 7px; border-radius: 5px; background: #EEF1F4; overflow: hidden; }
.ls-progress__bar span { display: block; height: 100%; border-radius: 5px; background: #8cc04b; }

.ls-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.ls-page__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ls-page__side { position: sticky; top: 16px; min-width: 0; }

.ls-video { position: relative; background: #0F1A24; border-radius: 18px; overflow: hidden; }
.ls-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 460px; border: 0; }

.ls-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.ls-body__top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; row-gap: 10px; }
.ls-body__titles { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; flex: 1 1 260px; }
.ls-body__name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #1F2E3D; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; }
.ls-body__desc { margin: 0; font-size: 14.5px; font-weight: 500; color: #5A6B7B; line-height: 1.65; text-wrap: pretty; white-space: pre-line; }

.ls-done { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 42px; padding: 0 16px; border: none; border-radius: 11px; background: #8cc04b; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 12px 24px -14px rgba(140,192,75,0.9); }
.ls-done:hover { background: #7BAE3D; }
.ls-done--on, .ls-done--on:hover { background: rgba(140,192,75,0.16); color: #5E8F1B; border: 1px solid rgba(140,192,75,0.4); box-shadow: none; }
.ls-done .msi { font-size: 19px; }

/* Текст урока перенесён из редактора старого сайта — держим его в рамках. */
.ls-text { font-size: 14.5px; font-weight: 500; color: #3A4A59; line-height: 1.65; overflow-wrap: anywhere; }
.ls-text img, .ls-text iframe, .ls-text video, .ls-text table { max-width: 100%; height: auto; }
.ls-text table { border-collapse: collapse; }
.ls-text td, .ls-text th { border: 1px solid #EAEEF2; padding: 6px 9px; }

.ls-files { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid #F1F4F7; }
.ls-file { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: #F7F9FB; border: 1px solid #EAEEF2; border-radius: 11px; min-width: 0; font-size: 13.5px; font-weight: 700; color: #1F2E3D; text-decoration: none; }
.ls-file:hover { border-color: #2E90D9; color: #2278BE; }
.ls-file .msi { flex: 0 0 auto; font-size: 20px; color: #5A6B7B; }
.ls-file__go { margin-left: auto; color: #93A1B0; }

.ls-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px; padding-top: 14px; border-top: 1px solid #F1F4F7; }
.ls-nav__next { margin-left: auto; }
/* Первый и последний урок: соседа нет, кнопка остаётся на месте, но мертва. */
.cs-btn--off { color: #C3CDD6; cursor: not-allowed; }
.cs-btn--off:hover { border-color: #E1E8EE; color: #C3CDD6; }

.ls-side__head { padding: 20px 22px; border-bottom: 1px solid #F1F4F7; display: flex; flex-direction: column; gap: 4px; }
.ls-side__title { font-size: 16.5px; font-weight: 800; color: #1F2E3D; }
.ls-side__meta { font-size: 12.5px; font-weight: 600; color: #93A1B0; }
.ls-item { text-decoration: none; }
.ls-item:hover { background: #F7F9FB; }
.ls-item--on, .ls-item--on:hover { background: rgba(46,144,217,0.07); box-shadow: inset 3px 0 0 #2E90D9; }
.ls-item--on .cs-lesson__name { font-weight: 800; }
.ls-item__now { color: #2E90D9; }

/* ------------------- Модалка покупки

   Живёт в кабинете (гость покупать не может), поэтому опирается на модалку
   Bootstrap, но её содержимое своё — как в макете. */

.cs-modal .modal-dialog { max-width: 560px; }
.cs-modal__box { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 44px 90px -32px rgba(20,30,40,0.5); }
.cs-modal__head { position: relative; overflow: hidden; padding: 22px 26px 18px; background: linear-gradient(135deg,#2E90D9,#1E6FAC); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* Светлый круг из макета — чистое украшение, кликам мешать не должен. */
.cs-modal__head::after { content: ''; position: absolute; top: -48px; right: 12px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,0.15); pointer-events: none; }
.cs-modal__titles { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-modal__kicker { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); }
.cs-modal__name { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; }
.cs-modal__close { position: relative; z-index: 1; flex: 0 0 auto; padding: 0; background: none; border: none; color: rgba(255,255,255,0.85); cursor: pointer; }
.cs-modal__close:hover { color: #fff; }
.cs-modal__close .msi { font-size: 24px; }
.cs-modal__body { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.cs-modal__group { display: flex; flex-direction: column; }
.cs-modal__foot { display: flex; align-items: center; gap: 10px; }
.cs-modal__foot .cs-btn--buy { flex: 1; justify-content: center; }
.cs-modal__foot .cs-btn[disabled] { background: #EDF1F4; border-color: #EDF1F4; color: #A9B4C0; box-shadow: none; cursor: not-allowed; }

.cs-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; background: #F7F9FB; border: 1px solid #EAEEF2; border-radius: 13px; flex-wrap: wrap; row-gap: 8px; font-size: 14px; font-weight: 700; color: #5A6B7B; }
.cs-total b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #1F2E3D; white-space: nowrap; }

.cs-agree { display: flex; align-items: flex-start; gap: 11px; margin: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: #5A6B7B; line-height: 1.5; text-wrap: pretty; }
.cs-agree input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: #8cc04b; }

.cs-access { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 13px; background: rgba(140,192,75,0.10); color: #2F6B22; font-size: 14.5px; font-weight: 700; }
.cs-access .msi { font-size: 22px; color: #5E8F1B; }

/* На узком экране покупка уезжает под оглавление — иначе колонка в 340px
   съедает половину ширины страницы курса. */
@media screen and (max-width: 980px) {
    /* Трём карточкам в ряд уже тесно — переходим на две. */
    .cs-narrow .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-page, .ls-page { grid-template-columns: minmax(0, 1fr); }
    .cs-page__side, .ls-page__side { position: static; }
    .ls-progress { margin-left: 0; align-items: flex-start; }
}

/* Курсы на телефоне: одна карточка в ряд, обложка ниже, шапка курса в столбик. */
@media screen and (max-width: 720px) {
    .cs-grid, .cs-narrow .cs-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .cs-filters { padding: 14px 16px; }
    .cs-search { flex: 1 1 100%; }
    .cs-card__cover { flex-basis: 160px; height: 160px; }
    .cs-card__cover-icon .msi { font-size: 44px; }
    .cs-card__body { padding: 16px; }
    .cs-card__actions { margin-left: 0; }

    .cs-hero { flex-direction: column; }
    .cs-hero__cover { flex: 0 0 120px; height: 120px; }
    .cs-hero__body { padding: 18px 16px; }
    .cs-hero__name { font-size: 19px; }
    .cs-block__head { padding: 14px 16px; }
    .cs-block__body { padding: 16px; }
    .cs-buy { padding: 18px 16px; }
    .cs-sec__head, .cs-lesson--solo { padding: 12px 14px; }
    .cs-lesson { padding: 11px 14px 11px 16px; }
}