html[data-theme="dark"], html[data-theme="dark"] body {
  background-color: #0F0F0F !important;
  color-scheme: dark !important;
}
html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body {
  background-color: #fff !important;
  color-scheme: light !important;
}

@media (max-width: 768px) {
  /* Голубая плашка */
  .bg-surface-blue-2.whitespace-nowrap,
  div.rounded-full.bg-surface-blue-2,
  .inline-flex.rounded-full.bg-surface-blue-2 {
    white-space: normal !important;
    border-radius: 10px !important;
    height: auto !important;
    min-height: 24px !important;
    max-width: 100% !important;
    word-break: break-word !important;
    padding: 6px 12px !important;
    display: block !important;
    text-align: center !important;
  }

  /* Шапка — в колонку: путь сверху на всю ширину, кнопка под ним */
  header.sticky {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: auto !important;
  }

  header.sticky > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  header.sticky > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Снимаем фиксированную h-7 с контейнеров внутри крошек */
  header .h-7 {
    height: auto !important;
    min-height: 28px !important;
  }

  header .flex.min-w-0,
  header .text-ellipsis.whitespace-nowrap {
    flex-wrap: wrap !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    min-width: 0 !important;
    align-items: flex-start !important;
  }

  header a span {
    white-space: normal !important;
    word-break: break-word !important;
  }

  header .text-lg {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  body { overflow-x: hidden !important; }
}

/* Иконки уроков — не сжимать при длинном тексте */
.flex > svg,
.inline-flex > svg {
  flex-shrink: 0 !important;
  min-width: 1rem !important;
}

/* Скрыть число участников курса: блок со счётчиком опознаём по иконке users
   (структура: <div><span><svg.lucide-users-icon> N</span></div>). */
div:has(> span > svg.lucide-users-icon) {
  display: none !important;
}

/* Карточки курсов фиксированной ширины: не растягивать на широком вьюпорте
   (сетка Courses.vue: grid grid-cols-1 gap-8 md:grid-cols-2 ...). ~305px —
   замеренная в консоли 3-колоночная ширина (293px) + запас, т.к. открытая
   консоль отъедала ширину. */
@media (min-width: 768px) {
  .grid.gap-8.md\:grid-cols-2 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 305px), 305px)) !important;
    justify-content: center !important;
  }
}