/* === Глобальные токены темы =================================== */
:root{
  /* базовые поверхности/текст */
  --bg: #f5f7fb;
  --text: #111827;
  --panel: #ffffff;

  /* карточки/панели */
  --card-bg: #ffffff;
  --card-muted-bg: #f6f7fb;
  --card-border: #e5e7eb;
  --card-text: #111827;
  --card-success-bg: #e8f5ec;

  /* сайдбар/навигация */
  --sidebar: #1f2937;
  --sidebar-sep: #e5e7eb;
  --nav-link: #111827;
  --nav-link-active-bg: #e5e7eb;
  --nav-link-active-text: #111827;

  /* акценты */
  --brand: #2563eb;
  --brand-2: #3b82f6;

  /* служебные */
  --muted: #6b7280;
  --overlay: rgba(0,0,0,.4);

  /* ПРОГРЕСС (универсальные токены) */
  --progress-track: #e5e7eb;
  --progress-fill: #22c55e;
  --progress-glow: rgba(34,197,94,.25);

  /* фокус */
  --focus: #60a5fa;
}

body{
  background: var(--bg);
  color: var(--text);
}

/* ===== ТЁМНАЯ ТЕМА ============================================ */
body.dark-mode{
  --bg: linear-gradient(135deg, #0b1220, #1a2232, #0b1220);
  --text: #f3f4f6;
  --panel: #0f172a;

  --card-bg: #0f172a;
  --card-muted-bg: #101a2d;
  --card-border: #1f2a3b;
  --card-text: #f3f4f6;
  --card-success-bg: #0f291e;

  --sidebar: #0f172a;
  --sidebar-sep: #1f2a3b;
  --nav-link: #cbd5e1;
  --nav-link-active-bg: #1e293b;
  --nav-link-active-text: #ffffff;

  --brand: #3b82f6;
  --brand-2: #60a5fa;

  --muted: #94a3b8;
  --overlay: rgba(0,0,0,.55);

  /* ПРОГРЕСС (тёмные значения) */
  --progress-track: #1f2937;            /* тёмный «трек» */
  --progress-fill: #22c55e;             /* яркая зелёная «заливка» */
  --progress-glow: rgba(34,197,94,.45); /* свечение */
}

/* ===== БАЗОВЫЕ ПАТТЕРНЫ ДЛЯ КОМПОНЕНТОВ ======================= */
.section-wrapper,
.profile-container,
.panel,
.card,
.ls-intro,
.lsn-intro,
.blocks-grid .block-card,
.lesson-sections .section-card{
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
  border: 1px solid var(--card-border) !important;
}

.card.completed,
.lesson-sections .section-card--done,
.lesson-sections .section-card.done{
  background: var(--card-success-bg) !important;
}

.card-button,
.button-primary{
  background: var(--brand-2);
  color:#fff;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .02s ease;
}
.card-button:hover,
.button-primary:hover{ background: var(--brand); }
.card-button:active,
.button-primary:active{ transform: translateY(1px); }

/* ссылки */
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }
body.dark-mode a{ color:#cbd5e1; }
body.dark-mode a:hover{ color:#93c5fd; text-decoration: underline; }

/* фокус (клавиатура) */
:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* мелкие тексты */
.progress-container{ background: var(--panel); color: var(--muted); }
.progress-text{ color: var(--muted); }

/* ===== ГЛОБАЛЬНЫЙ СТИЛЬ ДЛЯ ПРОГРЕСС-БАРОВ ==================== */
/* Работает для всех .progress-container / .progress-bar на сайте */
.progress-container{
  background: var(--progress-track) !important;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.04);
}
.progress-bar{
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #34d399, var(--progress-fill) 35%, #16a34a);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 10px var(--progress-glow);
  transition: width .35s ease;
}
body.dark-mode .progress-container{
  border-color: rgba(255,255,255,.06);
}
body.dark-mode .progress-bar{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 16px var(--progress-glow);
}

/* ===== Служебные улучшения ==================================== */
/* Поддержка «приглушённого» фона карточек */
.card--muted{ background: var(--card-muted-bg); }

/* Слегка более заметный плейсхолдер в дарке */
body.dark-mode ::placeholder{ color:#cbd5e1; opacity:.7; }

/* Скрытые, но доступные для скринридеров элементы */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* === Mobile scroll: только для страниц /lesson/<id> =============== */
@media (max-width: 768px){
  body.page-lesson{
    height: auto;                 /* разрешаем полной странице тянуться */
  }
  body.page-lesson .main{
    overflow-y: auto;             /* включаем прокрутку контента */
    max-height: none;
  }
  /* снимаем возможные жёсткие высоты только на этих экранах */
  body.page-lesson .container,
  body.page-lesson .lsn-intro,
  body.page-lesson .ls-intro,
  body.page-lesson .sections-grid,
  body.page-lesson .section-card,
  body.page-lesson .panel,
  body.page-lesson .card{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* === Универсальные нав-назад кнопки =========================== */
.nav-buttons{
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.btn-nav{
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 14px; border-radius: 10px;
  text-decoration: none; font-weight: 700;
  background: var(--card-muted-bg); color: var(--card-text);
  border: 1px solid var(--card-border);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-nav:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}