/* ============================================
   Лендинг курса по вышивке художественной гладью
   Премиальный журнальный стиль (editorial / slow-living)
   Статичная версия — единый styles.css
   ============================================ */

/* --- Плавающая кнопка «Перейти к курсу» (залогиненный на лендинге) --- */
.lk-float-cta { position: fixed; top: 20px; right: 24px; z-index: 90; display: inline-block; background: var(--c-accent); color: var(--c-bg); font-family: var(--f-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.3px; text-decoration: none; padding: 12px 26px; border-radius: 200px; box-shadow: 0 8px 24px rgba(92, 107, 84, 0.3); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.lk-float-cta:hover { background: var(--c-accent-dark); transform: scale(1.03); box-shadow: 0 10px 32px rgba(92, 107, 84, 0.4); }
@media (max-width: 720px) { .lk-float-cta { top: 14px; right: 16px; padding: 10px 20px; font-size: 13px; } }

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1A1A1A;
  background-color: #FDFBF7;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* --- Контейнер --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .container { padding: 0 48px; }
}

/* --- Типографика: заголовки (serif) --- */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
h1 { font-size: clamp(36px, 6vw, 64px); letter-spacing: -1px; line-height: 1.08; }
h2 { font-size: clamp(30px, 4.5vw, 48px); letter-spacing: -0.5px; }
h3 { font-size: clamp(22px, 3vw, 30px); }

/* --- Кнопка-пилюля --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background-color: #5C6B54;
  color: #FDFBF7;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 50px;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 4px 20px rgba(92, 107, 84, 0.25);
}
.btn:hover { transform: scale(1.02); box-shadow: 0 8px 32px rgba(92, 107, 84, 0.35); background-color: #4F5C48; }
.btn:active { transform: scale(1.0); }

/* --- Анимация появления при скролле --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================
   ШАПКА / HERO-СЕКЦИЯ
   ============================================ */
.hero { padding: 60px 0 80px; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 768px) {
  .hero { padding: 80px 0 100px; }
  .hero__grid { grid-template-columns: 1fr 0.65fr; gap: 64px; }
}
@media (min-width: 1024px) {
  .hero { padding: 100px 0 120px; }
  .hero__grid { gap: 80px; }
}
.hero__text { display: flex; flex-direction: column; gap: 24px; }
.hero__subtitle { font-family: 'Inter', sans-serif; font-size: 15px; color: #5C6B54; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.hero__title { color: #1A1A1A; }
.hero__desc { font-size: 17px; line-height: 1.8; color: #4A4A4A; max-width: 520px; }
.hero__image-wrapper { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 768 / 1344; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }
.hero__image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Мобилка: первая картинка — квадрат по центру */
@media (max-width: 767px) {
  .hero__image-wrapper { aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin: 0 auto; justify-self: center; }
}

/* ============================================
   БЛОК-ПЛАШКА УРГЕНТНОСТИ
   ============================================ */
.urgency { border-top: 1px solid rgba(26, 26, 26, 0.12); border-bottom: 1px solid rgba(26, 26, 26, 0.12); padding: 24px 0; text-align: center; }
.urgency__text { font-family: 'Inter', sans-serif; font-size: 14px; color: #6B6B6B; letter-spacing: 0.3px; line-height: 1.8; }
.urgency__accent { color: #5C6B54; font-weight: 600; }

/* ============================================
   ПРОГРАММА КУРСА
   ============================================ */
.program { padding: 100px 0; }
@media (max-width: 767px) { .program { padding: 72px 0; } }
.section-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #5C6B54; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px; }
.section-title { margin-bottom: 48px; color: #1A1A1A; }
.program__layout { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 768px) { .program__layout { grid-template-columns: 1fr 1fr; gap: 64px; } }
.program__cards { display: flex; flex-direction: column; gap: 20px; }
.program-card { display: flex; gap: 20px; padding: 28px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.program-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07); }
.program-card__icon { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(92, 107, 84, 0.08); border-radius: 14px; }
.program-card__icon svg { width: 26px; height: 26px; stroke: #5C6B54; stroke-width: 1.5; fill: none; }
.program-card__content h3 { font-size: 18px; margin-bottom: 6px; color: #1A1A1A; }
.program-card__content p { font-size: 14px; line-height: 1.7; color: #6B6B6B; }
.program__image { border-radius: 24px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06); }
.program__image img { width: 100%; height: 100%; object-fit: cover; }

/* Видео в секции «Программа» — вертикальное (9:16) */
.program__video {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #000;
}
.program__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   БЛОК ПРО МОНЕТИЗАЦИЮ
   ============================================ */
.monetization { padding: 80px 0; }
@media (max-width: 767px) { .monetization { padding: 56px 0; } }
.monetization__inner { background: rgba(92, 107, 84, 0.05); border-radius: 24px; padding: 48px 36px; max-width: 800px; margin: 0 auto; text-align: center; }
@media (min-width: 768px) { .monetization__inner { padding: 64px 56px; } }
.monetization__text { font-size: 17px; line-height: 1.9; color: #4A4A4A; }
.monetization__text strong { color: #1A1A1A; font-weight: 600; }

/* ============================================
   БЛОК «ОБ АВТОРЕ»
   ============================================ */
.author { padding: 100px 0; }
@media (max-width: 767px) { .author { padding: 72px 0; } }
.author__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 768px) { .author__grid { grid-template-columns: 0.45fr 1fr; gap: 64px; } }
@media (min-width: 1024px) { .author__grid { gap: 80px; } }
.author__photo-wrapper { border-radius: 200px; overflow: hidden; aspect-ratio: 864 / 1152; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); max-width: 420px; margin: 0 auto; }
@media (min-width: 768px) { .author__photo-wrapper { margin: 0; } }
.author__photo-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.author__content { display: flex; flex-direction: column; gap: 20px; }
.author__name { font-size: 28px; color: #1A1A1A; margin-bottom: 4px; }
.author__text { font-size: 16px; line-height: 1.85; color: #4A4A4A; }
.author__achievements { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.achievement { padding: 20px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); text-align: center; }
.achievement__number { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 400; color: #5C6B54; line-height: 1.2; }
.achievement__label { font-size: 13px; color: #8A8A8A; margin-top: 4px; letter-spacing: 0.3px; }

/* ============================================
   ТАРИФЫ
   ============================================ */
.pricing { padding: 100px 0; }
@media (max-width: 767px) { .pricing { padding: 72px 0; } }
.pricing__cards { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 860px; margin: 0 auto; }
@media (min-width: 640px) { .pricing__cards { grid-template-columns: 1fr 1fr; gap: 32px; } }
.pricing-card { position: relative; background: #FFFFFF; border-radius: 24px; padding: 40px 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 24px 72px rgba(0, 0, 0, 0.08); }
.pricing-card--featured { background: linear-gradient(135deg, rgba(92, 107, 84, 0.04), rgba(92, 107, 84, 0.01)); border: 1.5px solid rgba(92, 107, 84, 0.2); }
.pricing-card__badge { position: absolute; top: -12px; right: 28px; background: #5C6B54; color: #FDFBF7; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; padding: 6px 16px; border-radius: 50px; letter-spacing: 0.5px; }
.pricing-card__name { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #8A8A8A; letter-spacing: 2px; text-transform: uppercase; }
.pricing-card__price { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: #1A1A1A; line-height: 1.2; }
.pricing-card__price-note { font-family: 'Inter', sans-serif; font-size: 13px; color: #8A8A8A; margin-top: -12px; }
.pricing-card__price-old { font-family: 'Inter', sans-serif; font-size: 18px; color: #A0A0A0; text-decoration: line-through; margin-left: 8px; vertical-align: middle; }
.pricing-card__slots { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.5px; color: #5C6B54; background: rgba(92, 107, 84, 0.1); border-radius: 50px; padding: 6px 14px; margin-top: -8px; }
.pricing-card__features { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pricing-card__feature { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #4A4A4A; line-height: 1.6; }
.pricing-card__feature-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.pricing-card__feature-icon svg { width: 20px; height: 20px; stroke: #5C6B54; stroke-width: 2; fill: none; }
.pricing-card__note { font-size: 12px; color: #A0A0A0; line-height: 1.6; border-top: 1px solid rgba(0, 0, 0, 0.06); padding-top: 16px; margin-top: 4px; }
.pricing-card .btn { width: 100%; margin-top: 4px; }

/* ============================================
   ГАЛЕРЕЯ РАБОТ
   ============================================ */
.gallery { padding: 100px 0; }
@media (max-width: 767px) { .gallery { padding: 72px 0; } }
/* Галерея: ряды разной плотности (3-4-3-2-3-2-3), одна высота ряда */
.gallery__rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gallery__row { display: contents; }
.gallery__row img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.4s ease; }
.gallery__rows--folded [data-gallery-after-fold] { display: none !important; }
@media (min-width: 768px) {
  .gallery__rows { display: block; }
  .gallery__row { display: flex; gap: 20px; margin-bottom: 20px; height: 280px; }
  .gallery__row--tall { height: 420px; }
  .gallery__row .gallery__item { flex: 1 1 0; min-width: 0; }
  .gallery__row img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 1200px) {
  .gallery__row { gap: 24px; margin-bottom: 24px; height: 320px; }
  .gallery__row--tall { height: 480px; }
}
.gallery__item { border-radius: 16px; overflow: hidden; position: relative; background: #EDE9E1; }
@media (min-width: 768px) { .gallery__item { border-radius: 20px; } }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__more { display: block; margin: 28px auto 0; }
.gallery__more[hidden] { display: none; }

/* ============================================
   FAQ (АККОРДЕОН)
   ============================================ */
.faq { padding: 100px 0; }
@media (max-width: 767px) { .faq { padding: 72px 0; } }
.faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #FFFFFF; border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); overflow: hidden; transition: box-shadow 0.3s ease; }
.faq-item:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06); }
.faq-item__button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; text-align: left; font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 500; color: #1A1A1A; line-height: 1.4; gap: 16px; }
.faq-item__arrow { flex-shrink: 0; width: 20px; height: 20px; transition: transform 0.3s ease; }
.faq-item__arrow svg { width: 20px; height: 20px; stroke: #8A8A8A; stroke-width: 2; fill: none; }
.faq-item--open .faq-item__arrow { transform: rotate(180deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-item__answer-inner { padding: 0 28px 22px; font-size: 15px; line-height: 1.8; color: #6B6B6B; }
.faq-item--open .faq-item__answer { max-height: 900px; }

/* --- Тексты из админки («Настройки») --- */
.auth-hint { font-family: var(--f-ui, 'Inter', sans-serif); font-size: 13.5px; line-height: 1.6; color: #6B6B6B; background: rgba(92, 107, 84, 0.06); border-radius: 12px; padding: 14px 16px; margin: 0 0 22px; }
.course__intro { font-size: 15.5px; line-height: 1.7; color: #4A4A4A; margin-bottom: 26px; }
.course__intro p { margin: 0 0 12px; }
.course__intro p:last-child { margin-bottom: 0; }

/* ============================================
   ФУТЕР
   ============================================ */
.footer { border-top: 1px solid rgba(26, 26, 26, 0.08); padding: 32px 0; margin-top: auto; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
@media (min-width: 768px) { .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.footer__copy { font-size: 13px; color: #A0A0A0; }
.footer__link { font-size: 14px; color: #5C6B54; font-weight: 500; transition: opacity 0.3s ease; }
.footer__link:hover { opacity: 0.7; }

/* ============================================
   УТИЛИТЫ И АДАПТИВНОСТЬ
   ============================================ */
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: block; } }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDFBF7; }
::-webkit-scrollbar-thumb { background: #D4D0C8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #B8B4AC; }
::selection { background: rgba(92, 107, 84, 0.15); color: #1A1A1A; }
/* ============================================
   МОДАЛКА ОФОРМЛЕНИЯ (CHECKOUT MODAL)
   ============================================ */
.checkout-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.checkout-modal[hidden] { display: none; }
.checkout-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.55); }
/* Размер карточки: ширина — min(768px, 80vw) («768px или 80vw, что меньше»),
   высота — по содержимому (height: auto), а не по min-height: 80vh: короткая форма
   больше не сидит в огромной пустой коробке. Длинная форма упирается в 90vh
   и скроллится внутри карточки (overflow-y: auto). */
.checkout-modal__card { position: relative; z-index: 1; width: min(768px, 80vw); max-width: min(768px, 80vw); height: auto; max-height: 90vh; max-height: min(90vh, 90dvh); overflow-y: auto; background: #FDFBF7; border-radius: 20px; padding: 36px 32px 32px; box-shadow: 0 24px 64px rgba(26, 26, 26, 0.3); }
.checkout-modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #6B6B6B; background: rgba(26, 26, 26, 0.05); transition: background-color 0.3s ease, color 0.3s ease; }
.checkout-modal__close:hover { background: rgba(26, 26, 26, 0.1); color: #1A1A1A; }
.checkout-modal__close svg { width: 18px; height: 18px; }
.checkout-modal__title { font-size: 28px; color: #1A1A1A; margin-bottom: 6px; }
.checkout-modal__tariff { font-size: 14px; color: #6B6B6B; margin-bottom: 24px; }
.checkout-modal__tariff-name { font-weight: 600; color: #5C6B54; }
/* Форма на всю ширину карточки: поля, кнопка и заголовок с тарифом выровнены
   по одному отступу (padding карточки). Раньше форма была 640px и центрировалась,
   поэтому у заголовка отступ был 32px, а у полей/кнопки — 192px. */
.checkout-modal__form { width: 100%; }
/* Платёжные методы под кнопкой: карточка 359×73 из макета, по центру формы */
.checkout-modal__pay-methods { display: block; width: 100%; max-width: 359px; height: auto; margin: 20px auto 0; }
.checkout-modal__field { margin-bottom: 20px; }
.checkout-modal__field label,
.checkout-modal__label { display: block; font-size: 14px; font-weight: 500; color: #1A1A1A; margin-bottom: 8px; }
.checkout-modal__label em { font-style: normal; font-weight: 400; color: #8A8A8A; }
.checkout-modal__form input[type='tel'],
.checkout-modal__form input[type='text'],
.checkout-modal__form input[type='email'] { width: 100%; padding: 14px 18px; font-family: 'Inter', sans-serif; font-size: 15px; color: #1A1A1A; background: #FFFFFF; border: 1px solid rgba(26, 26, 26, 0.15); border-radius: 12px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.checkout-modal__form input[type='tel']:focus,
.checkout-modal__form input[type='text']:focus,
.checkout-modal__form input[type='email']:focus { outline: none; border-color: #5C6B54; box-shadow: 0 0 0 3px rgba(92, 107, 84, 0.15); }
.checkout-modal__form input[type='email'][readonly] { background: rgba(26, 26, 26, 0.04); color: #6B6B6B; }
.checkout-modal__messengers { display: flex; gap: 12px; }
.checkout-modal__messenger { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(26, 26, 26, 0.2); background: #FFFFFF; color: #1A1A1A; transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.checkout-modal__messenger svg { width: 20px; height: 20px; }
.checkout-modal__messenger:hover { border-color: #5C6B54; color: #5C6B54; }
.checkout-modal__messenger.is-active { border-color: #5C6B54; background: rgba(92, 107, 84, 0.12); color: #5C6B54; }
.checkout-modal__messenger-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.checkout-modal__messenger-field[hidden] { display: none; }
.checkout-modal__messenger-field label { font-size: 13px; margin-bottom: 4px; color: #4A4A4A; }
.checkout-modal__submit { width: 100%; }
.field-error { margin-top: 6px; font-size: 13px; color: #A33A3A; }
.checkout-modal__consents { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.checkout-modal__consent { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #4A4A4A; }
.checkout-modal__checkbox { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkout-modal__checkbox input[type='checkbox'] { margin-top: 3px; accent-color: #5C6B54; }
.checkout-modal__consent-link { color: #5C6B54; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.checkout-modal__consent-link:hover { opacity: 0.7; }

@media (max-width: 480px) {
  .checkout-modal__card { width: 95vw; max-width: 95vw; height: auto; max-height: 90vh; max-height: min(90vh, 90dvh); padding: 28px 20px 24px; }
}

/* ============================================
   ЛИЧНЫЙ КАБИНЕТ / AUTH — ДИЗАЙН-ТОКЕНЫ
   Всё ниже построено на токенах лендинга.
   ============================================ */
:root {
  --c-accent: #5C6B54;
  --c-accent-dark: #4F5C48;
  --c-ink: #1A1A1A;
  --c-text: #4A4A4A;
  --c-secondary: #6B6B6B;
  --c-muted: #8A8A8A;
  --c-faint: #A0A0A0;
  --c-bg: #FDFBF7;
  --c-card: #FFFFFF;
  --c-line: #EDE9E1;
  --c-line-strong: #D4D0C8;
  --c-line-muted: #B8B4AC;
  --c-error: #A33A3A;
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-card: 24px;
  --r-block: 16px;
  --r-small: 12px;
  --r-pill: 50px;
}

/* --- Оболочка ЛК --- */
.lk-body { min-height: 100vh; font-family: var(--f-ui, 'Inter', -apple-system, sans-serif); }
.lk-shell { display: flex; flex-direction: column; flex: 1; min-height: 100vh; background: var(--c-bg); }
.lk-main { flex: 1; width: 100%; }

/* --- Шапка страницы ЛК --- */
.lk-header { padding: 48px 0 40px; border-bottom: 1px solid var(--c-line); }
.lk-header__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .lk-header__inner { padding: 0 48px; } }
.lk-header__label { display: block; font-family: var(--f-ui); font-size: 13px; font-weight: 500; color: var(--c-accent); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; }
.lk-header__title { font-size: clamp(30px, 4vw, 44px); font-weight: 400; color: var(--c-ink); line-height: 1.15; letter-spacing: -0.5px; }

/* ============================================
   НАВБАР ЛК (.lk-nav*)
   ============================================ */
.lk-nav { position: sticky; top: 0; z-index: 50; background: rgba(253, 251, 247, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.lk-nav__bar { }
.lk-nav__inner { max-width: 1200px; margin: 0 auto; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; }
@media (min-width: 768px) { .lk-nav__inner { padding: 0 48px; } }
.lk-nav__left { display: flex; align-items: center; min-width: 0; }
.lk-nav__logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; gap: 1px; flex-shrink: 0; }
.lk-nav__logo-mark { font-family: var(--f-display); font-size: 30px; font-weight: 500; color: var(--c-ink); letter-spacing: 0.2px; }
.lk-nav__logo-sub { font-family: var(--f-ui); font-size: 8px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted); }
.lk-nav__links { display: none; align-items: center; gap: 28px; margin-left: 44px; }
@media (min-width: 768px) { .lk-nav__links { display: flex; } }
.lk-nav__link { position: relative; font-family: var(--f-ui); font-size: 14px; font-weight: 500; color: var(--c-text); padding: 6px 2px; transition: color 0.3s ease; }
.lk-nav__link:hover { color: var(--c-accent); }
.lk-nav__link--active { color: var(--c-accent); }
.lk-nav__link--active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--c-accent); border-radius: 2px; }

.lk-nav__right { display: none; align-items: center; gap: 14px; }
@media (min-width: 768px) { .lk-nav__right { display: flex; } }
.lk-nav__user { position: relative; }
.lk-nav__user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: var(--c-card); border: 1px solid var(--c-line-strong); border-radius: 50px; color: var(--c-ink); transition: border-color 0.3s ease, color 0.3s ease; }
.lk-nav__user-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.lk-nav__user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-ui); font-size: 14px; font-weight: 500; }
.lk-nav__chevron { width: 16px; height: 16px; color: var(--c-muted); flex-shrink: 0; }
.lk-nav__dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 210px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-block); padding: 6px; box-shadow: 0 16px 40px rgba(26, 26, 26, 0.12); }
.lk-nav__dropdown-list { display: flex; flex-direction: column; }
.lk-nav__dropdown-link { display: block; padding: 10px 14px; border-radius: 10px; font-family: var(--f-ui); font-size: 14px; font-weight: 500; color: var(--c-text); transition: background-color 0.3s ease, color 0.3s ease; }
.lk-nav__dropdown-link:hover { background: rgba(92, 107, 84, 0.08); color: var(--c-accent); }

.lk-nav__logout-form { margin: 0; display: flex; }
.lk-nav__logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 18px; background: transparent; border: 1px solid var(--c-line-strong); border-radius: 50px; color: var(--c-secondary); font-family: var(--f-ui); font-size: 14px; font-weight: 500; transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; }
.lk-nav__logout:hover { border-color: var(--c-accent); color: var(--c-accent); background: rgba(92, 107, 84, 0.06); }
.lk-nav__logout-icon { width: 16px; height: 16px; }
.lk-nav__logout--block { width: 100%; }

.lk-nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--c-secondary); transition: background-color 0.3s ease, color 0.3s ease; }
.lk-nav__burger:hover { background: rgba(26, 26, 26, 0.05); color: var(--c-ink); }
@media (min-width: 768px) { .lk-nav__burger { display: none; } }

/* --- Мобильное меню (видимость управляется Alpine: block/hidden) --- */
.lk-nav-mobile { padding: 16px 24px 24px; background: var(--c-bg); border-top: 1px solid var(--c-line); }
.lk-nav-mobile__links { display: flex; flex-direction: column; gap: 2px; }
.lk-nav-mobile__link { display: block; padding: 12px 14px; border-radius: 12px; font-family: var(--f-ui); font-size: 15px; font-weight: 500; color: var(--c-text); transition: background-color 0.3s ease, color 0.3s ease; }
.lk-nav-mobile__link:hover { background: rgba(26, 26, 26, 0.04); color: var(--c-ink); }
.lk-nav-mobile__link--active { color: var(--c-accent); background: rgba(92, 107, 84, 0.08); }
.lk-nav-mobile__user { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.lk-nav-mobile__user-info { padding: 0 14px 12px; }
.lk-nav-mobile__user-name { font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--c-ink); }
.lk-nav-mobile__user-email { font-family: var(--f-ui); font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.lk-nav-mobile__actions { display: flex; flex-direction: column; gap: 8px; }
.lk-nav-mobile__logout-form { margin: 0; }

/* ============================================
   КУРС (.course*) — список уроков
   ============================================ */
.course { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.course__notice { padding: 14px 18px; margin-bottom: 24px; background: rgba(92, 107, 84, 0.08); color: var(--c-accent-dark); border-radius: 14px; font-family: var(--f-ui); font-size: 14px; font-weight: 500; }
.course__progress { margin-bottom: 36px; }
.course__progress .section-label { margin-bottom: 12px; }
.course__progress-track { height: 6px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
.course__progress-fill { height: 100%; background: var(--c-accent); border-radius: 999px; transition: width 0.4s ease; }
.course__progress-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.course__progress-head .section-label { margin-bottom: 0; }
/* Тумблер «Скрыть пройденные» (переключатель = сам чекбокс) */
.course-hide-toggle { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-ui); font-size: 13px; font-weight: 500; color: var(--c-secondary); cursor: pointer; user-select: none; transition: color 0.3s ease; }
.course-hide-toggle:hover { color: var(--c-ink); }
/* ⚠️ Селекторы с ДВУМЯ классами не от хорошей жизни: в vite-бандле Tailwind/Breeze
   вешает на чекбоксы `color:#2563eb` (currentColor) и `appearance:auto` для :checked,
   а его правило `input:where([type=checkbox]):checked:hover` специфичнее одиночного
   класса — при наведении тумблер становился синим. */
.course-hide-toggle .course-hide-toggle__input { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 38px; height: 22px; margin: 0; padding: 0; border: 1px solid var(--c-line-strong); border-radius: 999px; background-color: var(--c-line); background-image: none; color: inherit; box-shadow: none; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; }
.course-hide-toggle .course-hide-toggle__input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: transform 0.25s ease; }
/* Ховер — «чуть темнее», как у кнопок (.btn:hover берёт --c-accent-dark), без синевы. */
.course-hide-toggle .course-hide-toggle__input:hover { background-color: var(--c-line-strong); border-color: var(--c-line-muted); }
.course-hide-toggle .course-hide-toggle__input:checked { appearance: none; -webkit-appearance: none; background-color: var(--c-accent); background-image: none; border-color: var(--c-accent); }
.course-hide-toggle .course-hide-toggle__input:checked::after { transform: translateX(16px); }
.course-hide-toggle .course-hide-toggle__input:checked:hover,
.course-hide-toggle .course-hide-toggle__input:checked:focus,
.course-hide-toggle .course-hide-toggle__input:checked:focus-visible { background-color: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.course-hide-toggle .course-hide-toggle__input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* display:flex у .course-item перебивает UA-правило [hidden] — гасим явно */
.course-item[hidden] { display: none; }
.course__hidden-note { margin: 20px 0 0; font-family: var(--f-ui); font-size: 14px; color: var(--c-muted); }
.course__hidden-note[hidden] { display: none; }
@media (max-width: 480px) { .course__progress-head { flex-direction: column; align-items: flex-start; gap: 8px; } }
.course__list { display: flex; flex-direction: column; gap: 12px; }
/* --- Оплаты (profile/payments) --- */
.pay-list { display: flex; flex-direction: column; gap: 12px; }
.pay-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-block); padding: 20px 24px; }
.pay-card__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pay-card__title { font-family: var(--f-ui); font-size: 16px; font-weight: 500; color: var(--c-ink); }
.pay-card__date { font-family: var(--f-ui); font-size: 14px; color: var(--c-muted); }
.pay-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.pay-card__amount { font-family: var(--f-display); font-size: 26px; font-weight: 500; color: var(--c-accent); line-height: 1.1; }
.pay-card__status { font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-accent); }
.pay-empty { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-block); padding: 48px 40px; text-align: center; }
.pay-empty__title { font-family: var(--f-display); font-size: 34px; font-weight: 400; color: var(--c-ink); margin: 8px 0 12px; line-height: 1.2; }
.pay-empty__text { font-family: var(--f-ui); font-size: 15px; color: var(--c-secondary); line-height: 1.7; max-width: 420px; margin: 0 auto 28px; }
.pay-card--pending { border-style: dashed; }
.pay-card__status--pending { color: var(--c-secondary); }
.pay-card__status--failed { color: var(--c-error); }
.pay-card__receipt { font-family: var(--f-ui); font-size: 13px; font-weight: 500; color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.pay-card__status--refunded { color: var(--c-secondary); background: rgba(92, 107, 84, 0.1); border-radius: 50px; padding: 3px 12px; }
.pay-attempts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.pay-attempts__hint { font-family: var(--f-ui); font-size: 13px; color: var(--c-muted); margin: 0; }
.pay-attempts__hint a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.pay-history { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 480px) { .pay-card { flex-direction: column; align-items: flex-start; padding: 18px 20px; } .pay-card__side { align-items: flex-start; } }

.course-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-block); padding-right: 16px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }

/* --- Неоплаченный доступ (CTA вместо уроков) --- */
.course-locked { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-block); padding: 48px 40px; text-align: center; }
.course-locked__title { font-family: var(--f-display); font-size: 34px; font-weight: 400; color: var(--c-ink); margin: 8px 0 12px; line-height: 1.2; }
.course-locked__text { font-family: var(--f-ui); font-size: 15px; color: var(--c-secondary); line-height: 1.7; max-width: 420px; margin: 0 auto 28px; }
.course-item:hover { border-color: var(--c-accent); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); }
.course-item__main { display: flex; align-items: center; gap: 16px; padding: 18px 16px; flex: 1; min-width: 0; }
.course-item__num { flex-shrink: 0; width: 44px; text-align: center; font-family: var(--f-display); font-size: 28px; font-weight: 400; color: var(--c-accent); line-height: 1.1; }
.course-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.course-item__title { font-family: var(--f-ui); font-size: 16px; font-weight: 500; color: var(--c-ink); }
.course-item__type { font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); }
.course-item__arrow { flex-shrink: 0; width: 20px; height: 20px; color: var(--c-faint); transition: color 0.3s ease, transform 0.3s ease; }
.course-item__arrow svg { width: 20px; height: 20px; }
.course-item:hover .course-item__arrow { color: var(--c-accent); transform: translateX(2px); }
.course-item__done { flex-shrink: 0; padding: 6px 14px; background: rgba(92, 107, 84, 0.1); color: var(--c-accent); border-radius: 50px; font-family: var(--f-ui); font-size: 13px; font-weight: 500; }

/* --- Отметка «урок пройден»: галочка над цифрой --- */
.course-item__num--done { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c-accent); }
.course-item__check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent); color: var(--c-bg); }
.course-item__check svg { width: 13px; height: 13px; }

/* ============================================
   УРОК (.lesson*) — чтение и видео
   ============================================ */
.lesson { padding: 40px 24px 80px; }
.lesson__content { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.lesson__back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--f-ui); font-size: 14px; font-weight: 500; color: var(--c-secondary); transition: color 0.3s ease; }
.lesson__back svg { width: 16px; height: 16px; }
.lesson__back:hover { color: var(--c-accent); }
.lesson__video { aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--c-line); border-radius: var(--r-block); overflow: hidden; }
.lesson__video-player { width: 100%; height: 100%; display: block; object-fit: cover; }
.lesson__body { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-block); padding: 36px 36px; font-family: var(--f-ui); font-size: 16px; line-height: 1.8; color: var(--c-text); }
.lesson__body > *:first-child { margin-top: 0; }
.lesson__body > *:last-child { margin-bottom: 0; }
.lesson__body p { margin: 0 0 16px; }
.lesson__body h1, .lesson__body h2, .lesson__body h3, .lesson__body h4 { color: var(--c-ink); margin: 28px 0 12px; }
.lesson__body h1 { font-size: 30px; }
.lesson__body h2 { font-size: 26px; }
.lesson__body h3 { font-size: 22px; }
.lesson__body h4 { font-size: 19px; font-family: var(--f-ui); font-weight: 600; }
.lesson__body ul, .lesson__body ol { margin: 0 0 16px; padding-left: 22px; }
.lesson__body ul { list-style: disc; }
.lesson__body ol { list-style: decimal; }
.lesson__body li { margin: 4px 0; }
.lesson__body strong { color: var(--c-ink); font-weight: 600; }
.lesson__body em { color: var(--c-ink); }
.lesson__body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.lesson__body a:hover { color: var(--c-accent-dark); }
.lesson__body blockquote { margin: 20px 0; padding: 16px 22px; border-left: 3px solid var(--c-accent); background: rgba(92, 107, 84, 0.05); border-radius: 0 12px 12px 0; color: var(--c-ink); }
.lesson__body img { max-width: 100%; border-radius: 12px; margin: 16px 0; }
.lesson__body code { background: rgba(26, 26, 26, 0.06); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
.lesson__progress-form { display: flex; justify-content: flex-start; margin-top: 4px; }
.lesson__progress-form .btn { min-width: 220px; }

/* Кнопка-ghost (снять отметку) */
.btn--soft { background: transparent; border: 1px solid var(--c-accent); color: var(--c-accent); box-shadow: none; }
.btn--soft:hover { background: rgba(92, 107, 84, 0.07); border-color: var(--c-accent-dark); color: var(--c-accent-dark); box-shadow: none; transform: none; }

/* Навигация пред./след. */
.lesson__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.lesson-pager__item { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-block); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.lesson-pager__item:hover { border-color: var(--c-accent); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05); }
.lesson-pager__item--next { align-items: flex-end; text-align: right; }
.lesson-pager__item--empty { visibility: hidden; }
.lesson-pager__dir { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); }
.lesson-pager__dir svg { width: 14px; height: 14px; }
.lesson-pager__title { font-family: var(--f-ui); font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 1.4; }

/* ============================================
   DONE (.done*) — результат оплаты
   ============================================ */
.done { padding: 56px 24px 80px; }
.done__card { max-width: 560px; margin: 0 auto; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 52px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.done__icon { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(92, 107, 84, 0.1); color: var(--c-accent); margin-bottom: 10px; }
.done__icon svg { width: 30px; height: 30px; stroke-width: 2; }
.done__icon--muted { background: rgba(26, 26, 26, 0.06); color: var(--c-muted); }
.done__title { font-size: 32px; color: var(--c-ink); }
.done__text { font-family: var(--f-ui); font-size: 15px; line-height: 1.7; color: var(--c-secondary); max-width: 380px; }
.done__btn { margin-top: 18px; }

/* ============================================
   АДАПТИВ ЛК (~720px / ~480px)
   ============================================ */
@media (max-width: 720px) {
  .lk-header { padding: 36px 0 28px; }
  .course, .lesson { padding: 32px 20px 64px; }
  .lesson__body { padding: 26px 22px; }
  .lesson__pager { grid-template-columns: 1fr; }
  .done { padding: 40px 20px 64px; }
  .done__card { padding: 40px 28px; }
}
@media (max-width: 480px) {
  .lk-nav__inner { height: 64px; }
  .lk-nav__logo-mark { font-size: 20px; }
  .course-item__num { font-size: 24px; width: 36px; }
  .course-item__main { gap: 12px; padding: 16px 12px; }
  .course-item__done { padding: 5px 10px; font-size: 12px; }
  .lesson__progress-form .btn { width: 100%; min-width: 0; }
}

/* ============================================
   AUTH (.auth*) — вход / регистрация / пароли
   ============================================ */
.auth-page { gap: 32px; }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; line-height: 1.2; }
.auth-logo__mark { font-family: var(--f-display); font-size: 30px; font-weight: 500; color: var(--c-ink); letter-spacing: 0.2px; }
.auth-logo__sub { font-family: var(--f-ui); font-size: 8px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted); }
.auth-card { width: 100%; max-width: 460px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 40px 36px; display: flex; flex-direction: column; gap: 24px; }
.auth-title { font-size: 30px; color: var(--c-ink); text-align: center; }
.auth-intro { font-family: var(--f-ui); font-size: 14px; line-height: 1.7; color: var(--c-secondary); text-align: center; margin: 0; }
.auth-notice { font-family: var(--f-ui); font-size: 14px; font-weight: 500; line-height: 1.6; padding: 12px 16px; border-radius: 12px; background: rgba(92, 107, 84, 0.08); color: var(--c-accent-dark); }
.auth-notice--error { background: rgba(163, 58, 58, 0.08); color: var(--c-error); }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-form__row { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field__label { font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text); }
.auth-field__input { width: 100%; padding: 14px 18px; font-family: var(--f-ui); font-size: 15px; color: var(--c-ink); background: #FFFFFF; border: 1px solid rgba(26, 26, 26, 0.15); border-radius: var(--r-small); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.auth-field__input::placeholder { color: var(--c-faint); }
.auth-field__input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(92, 107, 84, 0.15); }
.auth-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; align-self: flex-start; }
.auth-check__input { width: 16px; height: 16px; accent-color: var(--c-accent); }
.auth-check__text { font-family: var(--f-ui); font-size: 14px; color: var(--c-secondary); }
.auth-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auth-form__submit { width: 100%; }
.auth-form__footer .auth-form__submit { width: auto; }
.auth-link { font-family: var(--f-ui); color: var(--c-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.3s ease; }
.auth-link:hover { opacity: 0.75; }
.auth-link--btn { background: none; border: none; padding: 0; font-size: 14px; cursor: pointer; }
.auth-alt { font-family: var(--f-ui); font-size: 14px; color: var(--c-secondary); text-align: center; margin: 0; }

/* ============================================
   ПРОФИЛЬ (.profile*) — личный кабинет
   ============================================ */
.profile { max-width: 840px; margin: 0 auto; padding: 40px 24px 80px; display: flex; flex-direction: column; gap: 20px; }
.profile-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 36px 32px; }
.profile-card--danger { border-color: rgba(163, 58, 58, 0.35); }
.profile-card__header { margin-bottom: 24px; }
.profile-card__title { font-size: 26px; color: var(--c-ink); }
.profile-card__desc { font-family: var(--f-ui); font-size: 14px; color: var(--c-secondary); margin-top: 8px; line-height: 1.7; }

.profile-form { display: flex; flex-direction: column; gap: 20px; }
.profile-field { display: flex; flex-direction: column; gap: 6px; }
.profile-field__label { font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text); }
.profile-field__input { width: 100%; padding: 14px 18px; font-family: var(--f-ui); font-size: 15px; color: var(--c-ink); background: #FFFFFF; border: 1px solid rgba(26, 26, 26, 0.15); border-radius: var(--r-small); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.profile-field__input::placeholder { color: var(--c-faint); }
.profile-field__input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(92, 107, 84, 0.15); }

.profile-notice { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-small); background: rgba(26, 26, 26, 0.04); font-family: var(--f-ui); font-size: 13px; color: var(--c-secondary); line-height: 1.6; }
.profile-notice__text { margin: 0; }
.profile-notice__link { color: var(--c-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; font-size: inherit; }
.profile-notice__ok { color: var(--c-accent); font-weight: 500; margin: 6px 0 0; }

.profile-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
.profile-actions--end { justify-content: flex-end; }
.profile-saved { font-family: var(--f-ui); font-size: 14px; font-weight: 500; color: var(--c-accent); }

.profile-delete .btn { min-width: 200px; }

.profile-modal { padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.profile-modal__title { font-size: 24px; color: var(--c-ink); }
.profile-modal__desc { font-family: var(--f-ui); font-size: 14px; color: var(--c-secondary); line-height: 1.7; margin: 0; }

/* Кнопка-опасность (удаление) */
.btn--danger { background: transparent; border: 1px solid var(--c-error); color: var(--c-error); box-shadow: none; }
.btn--danger:hover { background: rgba(163, 58, 58, 0.06); border-color: var(--c-error); color: var(--c-error); box-shadow: none; transform: none; }

/* ============================================
   АДАПТИВ AUTH / PROFILE
   ============================================ */
@media (max-width: 720px) {
  .auth-card { padding: 32px 24px; }
  .profile { padding: 32px 20px 64px; }
  .profile-card { padding: 28px 22px; border-radius: var(--r-card-m); }
  .profile-card__title { font-size: 24px; }
  .profile-modal { padding: 28px 22px; }
}
@media (max-width: 480px) {
  .auth-logo__mark { font-size: 26px; }
  .auth-card { border-radius: var(--r-card-m); padding: 28px 20px; }
  .auth-form__footer { flex-direction: column; align-items: stretch; }
  .auth-form__footer .auth-form__submit { width: 100%; }
  .auth-form__footer .auth-link { text-align: center; }
  .profile-actions { flex-direction: column; align-items: stretch; }
  .profile-actions .btn { width: 100%; }
  .profile-delete .btn { width: 100%; min-width: 0; }
}

/* --- Шапка лендинга: навигация + вход/курс --- */
.landing-header { position: sticky; top: 0; z-index: 80; background: rgba(253, 251, 247, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); }
.landing-header__inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; }
@media (min-width: 768px) { .landing-header__inner { padding: 16px 48px; } }
.landing-header__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; text-decoration: none; flex-shrink: 0; }
.landing-header__logo-mark { font-family: var(--f-display); font-size: 30px; font-weight: 500; color: var(--c-ink); letter-spacing: 0.2px; white-space: nowrap; }
.landing-header__logo-sub { font-family: var(--f-ui); font-size: 8px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.landing-header__nav { display: flex; gap: 28px; margin-left: auto; }
.landing-header__link { font-family: var(--f-ui); font-size: 14px; font-weight: 400; color: var(--c-text); text-decoration: none; letter-spacing: 0.3px; transition: color 0.25s ease; }
.landing-header__link:hover { color: var(--c-accent); }
.landing-header__cta { font-family: var(--f-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.3px; text-decoration: none; padding: 10px 24px; border-radius: 200px; background: var(--c-accent); color: var(--c-bg); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; white-space: nowrap; }
.landing-header__cta:hover { background: var(--c-accent-dark); transform: scale(1.03); box-shadow: 0 8px 24px rgba(92, 107, 84, 0.3); }
.landing-header__cta--ghost { background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); }
.landing-header__cta--ghost:hover { background: transparent; border-color: var(--c-accent); color: var(--c-accent); box-shadow: none; }
.landing-header__burger { display: none; }
@media (max-width: 860px) {
  .landing-header__inner { gap: 16px; padding: 12px 16px; }
  .landing-header__nav { display: none; }
  .landing-header__cta { display: none; }
  .landing-header__logo { min-width: 0; }
  .landing-header__logo-mark { font-size: 22px; }
  .landing-header__logo-sub { display: block; font-size: 6.5px; letter-spacing: 1.4px; }
  .landing-header__burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; margin-right: -8px; border: 0; background: transparent; border-radius: 12px; color: var(--c-ink); cursor: pointer; transition: background-color 0.25s ease; }
  .landing-header__burger:hover { background: rgba(26, 26, 26, 0.05); }
}

/* Бургер-меню (мобилка) */
.landing-header__burger-icon { width: 26px; height: 26px; }
.landing-header__burger-icon--close { display: none; }
.landing-header--open .landing-header__burger-icon--open { display: none; }
.landing-header--open .landing-header__burger-icon--close { display: block; }
.landing-header__mobile { border-top: 1px solid var(--c-line); background: var(--c-bg); padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
/* Атрибут hidden должен побеждать display:flex, иначе меню висит всегда */
.landing-header__mobile[hidden] { display: none; }
.landing-header__mobile-link { font-family: var(--f-ui); font-size: 16px; color: var(--c-text); text-decoration: none; padding: 12px 8px; border-radius: 10px; letter-spacing: 0.3px; transition: background-color 0.25s ease, color 0.25s ease; }
.landing-header__mobile-link:hover { background: rgba(92, 107, 84, 0.08); color: var(--c-accent); }
.landing-header__mobile-cta { margin-top: 8px; font-family: var(--f-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.3px; text-decoration: none; text-align: center; padding: 12px 24px; border-radius: 200px; background: var(--c-accent); color: var(--c-bg); transition: background-color 0.3s ease; }
.landing-header__mobile-cta:hover { background: var(--c-accent-dark); }
@media (min-width: 861px) { .landing-header__mobile { display: none; } }


/* Sticky-шапка не должна накрывать заголовки секций при скролле по анкорам */
#program, #author, #tariffs { scroll-margin-top: 76px; }

/* --- Переключатель «Отметить пройденным» (урок ЛК, AJAX) --- */
.lesson__progress { margin: 8px 0 0; }
.lesson-progress-toggle { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-ui); font-size: 15px; font-weight: 500; letter-spacing: 0.3px; padding: 12px 26px 12px 14px; border-radius: 200px; border: 1px solid var(--c-line-strong); background: var(--c-card); color: var(--c-text); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease; }
.lesson-progress-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(92, 107, 84, 0.15); }
.lesson-progress-toggle:active { transform: translateY(0); }
.lesson-progress-toggle__check { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); color: transparent; background: transparent; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease 0.15s, transform 0.3s ease; }
.lesson-progress-toggle__check svg { width: 15px; height: 15px; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.45s ease 0.1s; }
.lesson-progress-toggle--done { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
.lesson-progress-toggle--done:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: var(--c-bg); }
.lesson-progress-toggle--done .lesson-progress-toggle__check { background: rgba(253, 251, 247, 0.18); border-color: transparent; color: var(--c-bg); }
.lesson-progress-toggle--done .lesson-progress-toggle__check svg { stroke-dashoffset: 0; }
.lesson-progress-toggle--busy { opacity: 0.7; pointer-events: none; }
.lesson-progress-toggle--pulse { animation: lessonPulse 0.7s ease; }
@keyframes lessonPulse {
  0% { box-shadow: 0 0 0 0 rgba(92, 107, 84, 0.35); }
  100% { box-shadow: 0 0 0 14px rgba(92, 107, 84, 0); }
}

/* --- Превью уроков: крупная картинка 16:9 слева, номер слева от картинки --- */
.course-item__thumb-wrap { flex-shrink: 0; display: flex; align-items: center; gap: 14px; }
.course-item__main--has-thumb .course-item__num { width: auto; min-width: 44px; }
.course-item__thumb { flex-shrink: 0; width: 356px; height: 200px; border-radius: 16px; overflow: hidden; background: rgba(92, 107, 84, 0.08); }
.course-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) {
  .course-item__main--has-thumb { flex-direction: column; align-items: stretch; }
  .course-item__main--has-thumb .course-item__thumb-wrap { gap: 10px; flex-wrap: wrap; max-width: 100%; }
  .course-item__main--has-thumb .course-item__num { min-width: 36px; font-size: 24px; }
  .course-item__main--has-thumb .course-item__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
  .course-item__main--has-thumb .course-item__arrow { display: none; }
}

/* --- Галерея урока: карусель фото под видео + fancybox --- */
.lesson-gallery { position: relative; margin: 24px 0 0; }
.lesson-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; border-radius: 24px; background: var(--c-card); border: 1px solid var(--c-line); }
.lesson-gallery__track::-webkit-scrollbar { display: none; }
.lesson-gallery__slide { flex: 0 0 100%; scroll-snap-align: center; display: block; }
.lesson-gallery__slide img { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; margin: 0 auto; }
.lesson-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-bg); color: var(--c-text); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease; }
.lesson-gallery__nav svg { width: 20px; height: 20px; }
.lesson-gallery__nav:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
.lesson-gallery__nav--prev { left: 14px; }
.lesson-gallery__nav--next { right: 14px; }
.lesson-gallery__nav[disabled] { opacity: 0.35; pointer-events: none; }
.lesson-gallery__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.lesson-gallery__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--c-line-strong); cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease; }
.lesson-gallery__dot.is-active { background: var(--c-accent); transform: scale(1.3); }
@media (max-width: 480px) {
  .lesson-gallery__nav { width: 36px; height: 36px; }
  .lesson-gallery__nav--prev { left: 8px; }
  .lesson-gallery__nav--next { right: 8px; }
  .lesson-gallery__slide img { max-height: 320px; }
}

/* --- FancyBox: тёмная подложка в тон интерфейса --- */
.fancybox__backdrop { background: rgba(22, 26, 22, 0.92); }
.fancybox__caption { font-family: var(--f-ui); color: rgba(253, 251, 247, 0.85); }

/* --- Плашка куков --- */
.cookie-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 20px; max-width: min(920px, calc(100vw - 32px)); background: #161A16; color: rgba(253, 251, 247, 0.85); font-family: var(--f-ui); border-radius: 16px; padding: 16px 24px; box-shadow: 0 12px 40px rgba(22, 26, 22, 0.35); }
/* Атрибут hidden должен побеждать display:flex выше, иначе плашка не закрывается по «Ок» */
.cookie-bar[hidden] { display: none; }
.cookie-bar__text { margin: 0; font-size: 13.5px; line-height: 1.5; }
.cookie-bar__link { color: rgba(253, 251, 247, 0.95); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__btn { flex-shrink: 0; background: var(--c-accent); color: var(--c-bg); font-family: var(--f-ui); font-size: 14px; font-weight: 500; border: none; cursor: pointer; padding: 10px 28px; border-radius: 200px; transition: background-color 0.3s ease; }
.cookie-bar__btn:hover { background: var(--c-accent-dark); }
@media (max-width: 640px) {
  .cookie-bar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px; bottom: 12px; width: 90vw; max-width: 90vw; }
  .cookie-bar__btn { width: 100%; }
}

/* --- Подарок: кнопка «Подарить» в карточке тарифа и правила в модалке --- */
.pricing-card .btn--soft { margin-top: 8px; }
/* Правила подарка: мягкая плашка, каждая строка — с галочкой в акцентном кружке.
   Раньше это был список с padding-left и ::marker, но без самих точек —
   выглядел как слипшийся абзац. */
.gift-rules { display: grid; gap: 12px; margin: 0 0 24px; padding: 22px 24px; list-style: none; background-color: #F7F5EF; border: 1px solid rgba(92, 107, 84, 0.12); border-radius: 16px; font-family: var(--f-ui); font-size: 15px; line-height: 1.6; color: rgba(22, 26, 22, 0.85); }
.gift-rules li { position: relative; margin: 0; padding-left: 34px; }
.gift-rules li::before { content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background-color: rgba(92, 107, 84, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; }
.gift-rules strong { color: #1A1A1A; font-weight: 600; }
/* Кнопка под плашкой — на всю ширину, как основные кнопки в других модалках */
[data-gift-continue] { width: 100%; }
.gift-form__note { margin: 12px 0 0; font-family: var(--f-ui); font-size: 12.5px; line-height: 1.5; color: rgba(22, 26, 22, 0.6); text-align: center; }
@media (max-width: 480px) {
  .gift-rules { font-size: 14px; gap: 10px; padding: 18px 16px; }
  .gift-rules li { padding-left: 30px; }
  .gift-rules li::before { width: 20px; height: 20px; background-size: 10px 10px; }
}

/* Плашка обратной связи лендинга (flash после редиректа из чекаута):
   фиксируем у верха экрана, ниже sticky-шапки, чтобы её было видно
   и когда человек остался на секции тарифов. */
.landing-flash { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 90; width: min(620px, calc(100vw - 32px)); }
.landing-flash__item { margin: 0; padding: 14px 18px; border-radius: var(--r-small); border: 1px solid var(--c-line-strong); background: rgba(253, 251, 247, 0.97); color: var(--c-accent-dark); font-family: var(--f-ui); font-size: 14px; font-weight: 500; line-height: 1.6; box-shadow: 0 12px 32px rgba(26, 26, 26, 0.14); }
.landing-flash__item--error { border-color: rgba(163, 58, 58, 0.35); color: var(--c-error); }
.landing-flash__item + .landing-flash__item { margin-top: 10px; }
@media (max-width: 768px) { .landing-flash { top: 76px; } }

/* ============================================
   БЛОКИ КУРСА (.course-block*) — группы уроков в ЛК
   ============================================ */
.course-block { display: flex; flex-direction: column; gap: 16px; }
/* display:flex у .course-block перебивает UA-правило [hidden] — гасим явно */
[data-lessons-block][hidden] { display: none; }
/* Межблочные отступы не нужны: табы показывают ровно один блок, зазор даёт .course-tabs */

/* --- Страница урока: возврат «К программе курса» --- */
.lesson__back-row { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; }

/* ============================================
   ТАБЫ БЛОКОВ (.course-tabs*) — переключение блоков в ЛК
   ============================================ */
.course-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.course-tabs__tab { font-family: var(--f-ui); font-size: 14px; font-weight: 500; color: var(--c-muted); background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 8px 18px; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }
.course-tabs__tab:hover { color: var(--c-ink); border-color: var(--c-line-strong); }
.course-tabs__tab--active { color: var(--c-bg); background: var(--c-accent); border-color: var(--c-accent); }
.course-tabs__tab--active:hover { color: var(--c-bg); border-color: var(--c-accent); }
@media (max-width: 480px) {
  .course-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
  .course-tabs__tab { flex: 0 0 auto; }
}

/* Название блока текстом над прогрессом — когда доступен всего один блок
   (роль названия не выполняют табы). Токены/вес как у соседних заголовков ЛК. */
.course-block__title { font-family: var(--f-display); font-size: 22px; font-weight: 400; color: var(--c-ink); line-height: 1.2; margin: 0 0 16px; }
@media (max-width: 480px) {
  .course-block__title { font-size: 20px; margin-bottom: 14px; }
}
/* Тумблер «Скрыть пройденные» — курсовой, видим всегда (если пройденные есть хоть
   в одном блоке): по активному блоку его не прячем. */

/* Надпись вместо карточек, когда все уроки блока пройдены и скрыты тумблером.
   Показывает/прячет course-hide-completed.js; hidden гасим явно — display перебивает UA-правило. */
.course-block__done { margin: 4px 0 0; font-family: var(--f-ui); font-size: 15px; line-height: 1.5; color: var(--c-secondary); background: var(--c-card); border: 1px dashed var(--c-line-strong); border-radius: var(--r-block); padding: 20px 22px; }
[data-block-done][hidden] { display: none; }
@media (max-width: 480px) {
  .course-block__done { padding: 16px 18px; font-size: 14px; }
}

/* Вторая группа тарифов («Блоки отдельно»): отступ вешаем на САМ ЗАГОЛОВОК
   (у .section-title есть только margin-bottom, поэтому он «прилипал» к карточкам
   первой группы). */
.pricing__separate-title { margin-top: 72px; }
@media (max-width: 767px) { .pricing__separate-title { margin-top: 48px; } }

/* «Дополнительный текст» тарифа: между названием и ценой.
   Размер И цвет — как у пунктов «что входит» (.pricing-card__feature): 14px/1.6, --c-text. */
.pricing-card__extra { font-size: 14px; line-height: 1.6; color: var(--c-text); }