/* ============================================================================
   eAgronom — ПРОДУКТОВЫЙ СЛОЙ.

   ЧТО ЭТО. Единый визуальный язык платформы: сомона, каталог, курс, утоқи
   донишҷӯ, кабинет устода, панель маъмура. До него каждая часть выглядела
   как отдельная работа: сомона — как шаблон с карточками, утоқ — как обычный
   LMS, кабинет устода — как анкета, панель маъмура — как светлая CRM.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВКА fasl.css. fasl.css — слой СЕЗОНА: он
   отвечает на вопрос «что в поле сейчас» и делает это хорошо. За два месяца
   к нему приросли полсотни разделов вида «БЕЛЫХ ПЯТЕН НЕ ОСТАЁТСЯ» — правки
   поверх правок. Разбирать их поштучно значило бы месяц ковыряться в чужих
   решениях; вместо этого продуктовый слой ложится ПОВЕРХ и задаёт то, чего у
   сезонного слоя нет вовсе: типографическую шкалу, три уровня поверхностей,
   геометрию разной величины и единое движение.

   ПОРЯДОК. Идёт последним из стилей — после fasl.css, season-bg.css и
   season-hover.css. Сезонные переменные (--s-acc, --r-card, --s-e) он не
   отменяет, а ИСПОЛЬЗУЕТ: сезон остаётся слоем поверх бренда.

   ГРАНИЦА ОТВЕТСТВЕННОСТИ:

     бренд    — тёмная зелень, кремовая бумага, шрифт, ритм, поверхности;
     сезон    — акцент, свечение, уголки, погода, кривая движения;
     продукт  — иерархия, геометрия, состояния, композиция страниц.

   ЧЕГО ЗДЕСЬ НЕТ И НЕ БУДЕТ: смайликов, случайных градиентов, тени под
   каждым предметом, четырёх одинаковых карточек в ряд.
   ========================================================================= */

/* ============================================================================
   0. ШРИФТ — GOLOS TEXT

   Segoe UI, который стоял здесь раньше, — шрифт операционной системы. На
   Windows сайт выглядел как окно проводника, на телефоне — как чужое
   приложение: у продукта не было СВОЕГО голоса.

   Golos Text выбран не по красоте, а по одному признаку, который решает всё:
   он покрывает таджикские буквы ӯ ҳ ҷ қ ғ ӣ. Проверено рисованием в canvas —
   Manrope, на который я смотрел первым, их НЕ содержит: слова «омӯзиш» и
   «донишҷӯ» разваливались бы на две гарнитуры прямо посреди строки.

   Файлы лежат у нас (site/fonts), не на чужом сервере: страница не должна
   зависеть от доступности Google из Душанбе. Переменное начертание 400–900 —
   один файл на все веса. Кириллица + расширенная кириллица весят 40 КБ.

   Лицензия SIL OFL, файл лицензии рядом — fonts/OFL.txt.
   ========================================================================= */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/golos-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/golos-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/golos-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/golos-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   1. ТОКЕНЫ

   ПАЛИТРА. Семь цветов и ни одного лишнего. Неона нет: поле не светится.

     forest  — тёмная зелень; текст заголовков, тёмные полосы, подвал
     green   — зелень действия; кнопка, ссылка, согласие
     olive   — оливковый; спокойные подписи и линии на тёмном
     cream   — тёплая бумага; фон всей платформы
     white   — мягкий белый; поверхности. НЕ #FFFFFF: чистый белый рядом с
               кремовым выглядит дырой, а не листом
     gold    — приглушённое золото; отличие, награда, сертификат
     ink     — тёмный нейтральный; основной текст

   ФОН НЕ БЕЛЫЙ НИКОГДА. Три ступени бумаги: страница (кремовая), полоса
   раздела (чуть зеленее), поверхность (мягкий белый). Именно эти три и
   создают ощущение бумаги, а не «белого сайта».
   ========================================================================= */
html.fasl {
  /* --- бренд ------------------------------------------------------------ */
  --p-forest: #14301F;
  --p-forest-2: #1E4630;
  --p-green: #2F7A3D;
  --p-green-deep: #245F30;
  --p-olive: #7A8450;
  --p-gold: #C89B3C;

  /* --- бумага ----------------------------------------------------------- */
  --p-page: #F6F2E8;
  --p-band: #EFF0E4;         /* полоса раздела: бумага с зелёным дыханием   */
  --p-surface: #FFFDF9;
  --p-surface-sunk: #FAF7EF; /* утопленная поверхность: поле ввода, ячейка  */

  /* --- текст ------------------------------------------------------------ */
  --p-ink: #1A1F17;
  --p-ink-2: #55604F;
  --p-mute: #69705F;
  --p-ink-invert: #F7F4EA;

  /* --- линии ------------------------------------------------------------ */
  --p-rule: #E5DFCF;
  --p-rule-soft: #EFEADC;
  --p-rule-strong: #D8D0BB;

  /* --- ТЕНИ: три ступени и ни одной больше ------------------------------
     Тень зелёная, а не серая: серая на кремовой бумаге даёт грязь. Оттенок
     один на всю платформу — разные тени у соседних карточек это первый
     признак того, что их делали в разное время.                          */
  --p-lift-1: 0 1px 2px rgba(20, 48, 31, .04);
  --p-lift-2: 0 2px 4px rgba(20, 48, 31, .04), 0 8px 20px rgba(20, 48, 31, .06);
  --p-lift-3: 0 4px 10px rgba(20, 48, 31, .06), 0 20px 48px rgba(20, 48, 31, .10);

  /* --- ДВИЖЕНИЕ ---------------------------------------------------------
     Четыре длительности, одна кривая. Кривая без перелёта: отскок уместен в
     игре, а не там, где человек ищет свой курс.                          */
  --p-micro: 180ms;
  --p-ui: 300ms;
  --p-section: 620ms;
  --p-season: 1200ms;
  --p-ease: cubic-bezier(.22, .61, .24, 1);

  /* --- РИТМ -------------------------------------------------------------
     Шаг восемь. Всё, что не кратно ему, — случайность.                   */
  --p-1: 4px;  --p-2: 8px;  --p-3: 12px; --p-4: 16px;
  --p-5: 24px; --p-6: 32px; --p-7: 48px; --p-8: 64px; --p-9: 96px;

  /* --- ПРЕДЕЛ ШИРИНЫ ----------------------------------------------------
     Строка длиннее 75 знаков не читается, а полоса шире 1240 распадается
     на два несвязанных края.                                             */
  --p-max: 1240px;

  /* ------------------------------------------------------------------------
     ПЕРЕВОД СТАРЫХ ИМЁН НА НОВУЮ ПАЛИТРУ.

     По --f-bg, --f-surface, --f-ink написаны пять тысяч строк fasl.css.
     Переименовывать их значило бы переписать весь слой ради ничего. Вместо
     этого старые имена указывают на новые значения — и вся платформа
     переезжает на новую бумагу одним блоком.
     --------------------------------------------------------------------- */
  --f-bg: var(--p-page);
  --f-surface: var(--p-surface);
  --f-ink: var(--p-ink);
  --f-ink-2: var(--p-ink-2);
  --f-mute: var(--p-mute);
  --f-rule: var(--p-rule);
  --f-foot: var(--p-forest);
  --brand: var(--p-green);
  --brand-deep: var(--p-forest);

  /* ЦВЕТ ГЛАВНОГО ДЕЙСТВИЯ — СЕЗОННЫЙ, И ЭТО РЕШЕНИЕ ВЛАДЕЛЬЦА.

     Слой одно время красил все главные кнопки зеленью бренда: доводом было
     то, что кнопка не должна менять цвет при переходе с сомоны в утоқ.
     Довод отклонён. Перекраска по сезону — давняя задумка площадки, её
     замечают первой, и площадка ею живёт: баҳор #5B8C3E, тобистон #D08A18,
     тирамоҳ #A5522C, зимистон #4A6572.

     Через эти имена идут ВСЕ главные кнопки: разворот, шапка, страница
     курса, три кабинета, чат. Менять цвет действия — здесь, а не в двадцати
     местах. */
  --p-action: var(--s-acc);
  --p-action-deep: var(--s-deep);
  /* Тень берёт тот же тон: иначе под терракотовой кнопкой оставалось
     зелёное свечение. */
  --p-action-sh: 0 1px 2px rgba(20, 48, 31, .12),
                 0 6px 16px color-mix(in srgb, var(--p-action) 26%, transparent);
  --p-action-sh-h: 0 2px 4px rgba(20, 48, 31, .14),
                   0 10px 24px color-mix(in srgb, var(--p-action) 34%, transparent);

  --f-sans: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Кривая и длительность общего движения — тоже на новую систему. Сезонная
     кривая (--s-e) остаётся сезону: она отвечает за погоду и перекраску. */
  --e-out: var(--p-ease);
  --f-fast: var(--p-micro);
  --f-d: var(--p-ui);
  --f-slow: var(--p-section);
  --tm: var(--p-season);
}

/* ============================================================================
   2. ТИПОГРАФИЧЕСКАЯ ШКАЛА

   Семь ступеней, и у каждой своя работа. До этого слоя на странице жили
   размеры 12, 13, 14, 15, 16, 17, 18, 20, 24, 28, 32 — то есть шкалы не было
   вовсе, а был набор случайных чисел.

     display  — одна на страницу. Разворот, и только он
     h1       — заглавие страницы
     h2       — раздел
     h3       — карточка, подраздел
     body     — текст
     meta     — подпись, второстепенное
     micro    — надстрочная метка заглавными

   ТРЕКИНГ СЖИМАЕТСЯ С РОСТОМ КЕГЛЯ. Крупный текст с обычным межбуквенным
   расстоянием выглядит рыхлым; это единственная причина, по которой чужой
   заголовок кажется «профессиональным», а свой — нет.
   ========================================================================= */
html.fasl {
  --t-display: clamp(38px, 5.6vw, 72px);
  --t-h1: clamp(28px, 3.4vw, 44px);
  --t-h2: clamp(22px, 2.2vw, 30px);
  --t-h3: 18px;
  --t-body-lg: 17px;
  --t-body: 15.5px;
  --t-meta: 13.5px;
  --t-micro: 11.5px;
}

html.fasl body {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--p-ink);
  background: var(--p-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ЗАГОЛОВКИ БЫЛИ НАБРАНЫ ШРИФТОМ БЕЗ КИРИЛЛИЦЫ.

   Бандл объявляет `h1..h6 { font-family: Poppins }`, а Poppins содержит
   только латиницу и деванагари. Значит КАЖДЫЙ таджикский заголовок сомоны
   рисовался запасным шрифтом системы — на Windows одним, на телефоне другим,
   и внутри одного слова «имкониятҳои» латинские буквы шли одной гарнитурой,
   а ҳ — другой. Отсюда и ощущение «сделано наспех», которое не объяснить
   ни цветом, ни отступами.

   Ставим свой шрифт всему дереву. Единственное исключение — моноширинный:
   там, где показывают код или номер сертификата, ширина знака значит
   больше, чем гарнитура. */
html.fasl body,
html.fasl h1, html.fasl h2, html.fasl h3,
html.fasl h4, html.fasl h5, html.fasl h6,
html.fasl button, html.fasl input, html.fasl select, html.fasl textarea {
  font-family: var(--f-sans) !important;
}
html.fasl [class*="font-mono"],
html.fasl code, html.fasl pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Заголовки бандла подчиняются шкале. Ловим по классам Tailwind, которыми
   они размечены: своих имён у бандла нет. */
html.fasl h1,
html.fasl [class*="text-4xl"],
html.fasl [class*="text-5xl"] {
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 800;
  color: var(--p-forest);
}
html.fasl h2,
html.fasl [class*="text-2xl"],
html.fasl [class*="text-3xl"] {
  font-size: var(--t-h2);
  line-height: 1.14;
  letter-spacing: -.018em;
  font-weight: 800;
  color: var(--p-forest);
}
html.fasl h3,
html.fasl [class~="text-lg"] {
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -.012em;
  font-weight: 700;
  color: var(--p-forest);
}
html.fasl p,
html.fasl [class~="text-sm"] {
  letter-spacing: -.004em;
}

/* Надстрочная метка. Одна на блок, не больше: когда их шесть на экране,
   страница читается как бланк. */
.p-micro {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-mute);
}

/* Числа — табличные. Иначе столбец процентов «пляшет» на каждой строке. */
html.fasl [class*="tabular"],
.p-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ============================================================================
   3. ТРИ УРОВНЯ ПОВЕРХНОСТЕЙ

   Главная ошибка прежнего вида: КАЖДЫЙ предмет был белой карточкой со
   скруглением и тенью. Двенадцать таких на экране — и ни один не главный.

     Уровень 1 — ПЛОСКАЯ. Только линия и отступ. Для группировки: список,
                 таблица, ряд подписей. Тени нет вовсе.
     Уровень 2 — ПРИПОДНЯТАЯ. Мягкий белый, тонкая рамка, короткая тень.
                 Обычная карточка: курс, урок, человек.
     Уровень 3 — СТЕКЛО. Полупрозрачная бумага с размытием, светлая грань
                 сверху, длинная тень. ОДНА на экран — то, ради чего экран
                 открывали: «идома диҳед», выбранный курс, главное действие.

   Уровень задаётся смыслом, а не вкусом. Если на экране два стекла — одно
   из них лишнее.
   ========================================================================= */
.p-l1 {
  background: transparent;
  border: 1px solid var(--p-rule-soft);
  border-radius: var(--r-3);
  box-shadow: none;
}
.p-l2 {
  background: var(--p-surface);
  border: 1px solid var(--p-rule-soft);
  border-radius: var(--r-card);
  box-shadow: var(--p-lift-2);
}
.p-l3 {
  position: relative;
  background: color-mix(in srgb, var(--p-surface) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--s-acc) 22%, var(--p-rule));
  border-radius: var(--r-4);
  box-shadow: var(--p-lift-3);
}
/* Светлая грань сверху — то, что отличает стекло от просто светлой карточки:
   на настоящем стекле край ловит свет. */
.p-l3::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 30%, rgba(255, 255, 255, .9) 70%, transparent);
  pointer-events: none;
}

/* --- ПЕРЕВОД КАРТОЧЕК БАНДЛА НА ВТОРОЙ УРОВЕНЬ ---------------------------
   Бандл размечает карточки как rounded-2xl + bg-white + border. Прежний слой
   красил их в белый и добавлял тень каждой. Здесь они получают одну общую
   поверхность второго уровня — и перестают спорить друг с другом. */
html.fasl [class*="rounded-2xl"][class*="bg-white"],
html.fasl [class*="rounded-3xl"][class*="bg-white"],
html.fasl [class*="rounded-xl"][class*="bg-white"] {
  background: var(--p-surface) !important;
  border-color: var(--p-rule-soft) !important;
  box-shadow: var(--p-lift-2);
  transition: box-shadow var(--p-ui) var(--p-ease),
              transform var(--p-ui) var(--p-ease),
              border-color var(--p-ui) var(--p-ease);
}

/* Наведение: подъём на два пикселя и следующая ступень тени. Не увеличение,
   не поворот, не дрожь — карточка приподнимается, как лист на столе. */
html.fasl a[class*="rounded-2xl"]:hover,
html.fasl a[class*="rounded-3xl"]:hover,
html.fasl button[class*="rounded-2xl"]:hover,
html.fasl .p-l2:hover,
html.fasl .sb-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--p-lift-3);
  border-color: color-mix(in srgb, var(--s-acc) 28%, var(--p-rule)) !important;
}

/* ============================================================================
   4. КНОПКИ

   Три вида и ни одного больше:

     главная      — плотная зелень бренда, белый текст;
     второстепенная — бумага с рамкой;
     тихая        — только текст со стрелкой.

   Заливка главной — цвет сезона (--p-action). «Ворид шудан» в январе
   серо-синяя, в июле золотая: площадка так и задумана.
   ========================================================================= */
html.fasl .btn-brand,
html.fasl [class*="bg-[#2F7A3D]"],
html.fasl [class*="bg-[#10B981]"]:not([class*="/"]) {
  background: var(--p-action) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-btn);
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: var(--p-action-sh);
  transition: background var(--p-micro) var(--p-ease),
              box-shadow var(--p-ui) var(--p-ease),
              transform var(--p-micro) var(--p-ease);
}
html.fasl .btn-brand:hover,
html.fasl [class*="bg-[#2F7A3D]"]:hover {
  background: var(--p-action-deep) !important;
  box-shadow: var(--p-action-sh-h);
  transform: translateY(-1px);
}
html.fasl .btn-brand:active,
html.fasl [class*="bg-[#2F7A3D]"]:active { transform: translateY(0); }

/* ГЛАВНАЯ КНОПКА БАНДЛА. Приложение размечает кнопки как
   `button[data-slot="button"][data-variant="default"]`, а цвет им задают
   утилиты Tailwind — то изумрудный, то золотой, то сезонный. Из-за этого
   «Гузаштани тест» на странице курса был терракотовым, «Ворид шудан» в
   шапке — зелёным, а «Сабти ном» — светлым: три главных действия трёх
   разных цветов на одной площадке.

   Одно правило на всё приложение: главное действие — цвет сезона. */
html.fasl button[data-slot="button"][data-variant="default"],
html.fasl a[data-slot="button"][data-variant="default"] {
  background: var(--p-action) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  box-shadow: var(--p-action-sh) !important;
  transition: background var(--p-micro) var(--p-ease), transform var(--p-micro) var(--p-ease),
              box-shadow var(--p-ui) var(--p-ease) !important;
}
html.fasl button[data-slot="button"][data-variant="default"]:hover {
  background: var(--p-action-deep) !important;
  transform: translateY(-1px);
}
html.fasl button[data-slot="button"][data-variant="outline"] {
  background: var(--p-surface) !important;
  color: var(--p-forest) !important;
  border: 1px solid var(--p-rule-strong) !important;
  border-radius: var(--r-btn) !important;
}

/* Круглая кнопка чата в углу была изумрудной — цвет не из палитры вовсе.
   Теперь это тёмная зелень бренда: узнаваемо и не спорит с сезоном. */
html.fasl button.fixed.bottom-6.right-6 {
  background: var(--p-forest) !important;
  box-shadow: var(--p-lift-3) !important;
  transition: transform var(--p-ui) var(--p-ease), background var(--p-ui) var(--p-ease);
}
html.fasl button.fixed.bottom-6.right-6:hover {
  background: var(--p-forest-2) !important;
  transform: translateY(-2px);
}

/* ============================================================================
   5. ПЛАШКИ

   Плашек на странице было больше, чем сведений: «Ройгон», «Дар ҷараён»,
   «Нашршуда», «Супорида нашуд» — по три на карточку. Плашка перестаёт
   работать, когда их много: глаз ищет отличие, а видит узор.

   Здесь плашка тихая по умолчанию и громкая только там, где означает
   действие человека, а не свойство предмета.
   ========================================================================= */
html.fasl [class*="rounded-full"][class*="text-[10px]"],
html.fasl [class*="rounded-full"][class*="text-xs"] {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--r-1);
}

/* ============================================================================
   6. ШАПКА И ПОДВАЛ
   ========================================================================= */
/* Марка в шапке телефона: значок и имя. На широком экране её ставит рельса
   слева, здесь — не показываем, чтобы имя не стояло дважды. */
html.fasl .p-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--p-2);
  flex: none;
  color: var(--p-forest) !important;
  text-decoration: none;
}
html.fasl .p-mark img { width: 26px; height: 26px; object-fit: contain; }
html.fasl .p-mark b {
  font-size: var(--t-body);
  font-weight: 800;
  letter-spacing: -.02em;
}
@media (min-width: 1024px) {
  html.fasl .p-mark { display: none; }
}
/* Поле поиска рядом с маркой должно уметь сжиматься: у flex-элемента
   min-width по умолчанию auto, и поле упиралось в свою наименьшую ширину,
   выталкивая себя за край экрана. */
html.fasl header.sticky form { min-width: 0 !important; }
@media (max-width: 480px) {
  html.fasl header.sticky { gap: var(--p-2) !important; }
}
/* Имя прячем только на САМЫХ узких. Сначала порог был 480 — но 390 это
   обычный телефон, а не край: на нём в шапке оставался один значок, и
   платформа переставала называть себя там, где её и открывают чаще всего. */
@media (max-width: 359px) {
  html.fasl .p-mark b { display: none; }
}

html.fasl header.sticky {
  background: color-mix(in srgb, var(--p-page) 86%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--p-rule-soft) !important;
}

/* Подвал: тёмная зелень бренда, а не бурый. Ссылки — оливковые, не белые:
   белый на тёмном в подвале кричит громче, чем содержимое страницы. */
html.fasl footer [class*="bg-["],
html.fasl .site-foot {
  background: var(--p-forest) !important;
}

/* ============================================================================
   7. РАЗВОРОТ САЙТА (hero)

   БЫЛО: снимок во всю ширину, поверх — заголовок обычного размера и две
   маленькие кнопки. Снимок сильный, а сказано на нём тихо: главная мысль
   платформы читалась мельче, чем строка меню.

   СТАЛО: одна крупная мысль, набранная во весь разворот, и один явный шаг.
   Внизу — тонкая полоса настоящих чисел платформы: она даёт вес обещанию,
   не превращая разворот в панель.
   ========================================================================= */
/* Высота разворота. Было 1077 точек — почти полтора экрана ноутбука: чтобы
   увидеть первый курс, человек прокручивал вслепую. Стало восемь десятых
   высоты окна с потолком: видно и мысль, и край следующего раздела —
   страница сама показывает, что она не кончилась. */
html.fasl .hero-full-x {
  min-height: min(80vh, 720px) !important;
  max-height: 820px;
  border-radius: 0 !important;
  margin-top: 0 !important;
}
html.fasl .hero-full-x > .grid,
html.fasl .hero-full-x .hero-video-x,
html.fasl .hero-full-x video {
  min-height: inherit;
}

/* Текстовая колонка: половина ширины на большом экране, но не шире 620 —
   строка длиннее не читается. */
html.fasl .hero-full-x .p-6,
html.fasl .hero-full-x [class*="lg:p-10"] {
  max-width: 640px;
  padding: clamp(24px, 4vw, 56px) !important;
}

html.fasl .hero-title-x,
html.fasl .hero-full-x h1 {
  font-size: clamp(32px, 4.4vw, 58px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 2px 28px rgba(10, 24, 15, .5);
  max-width: 14ch;
  margin-bottom: var(--p-4) !important;
}
html.fasl .hero-sub-x,
html.fasl .hero-full-x p {
  font-size: var(--t-body-lg) !important;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9) !important;
  max-width: 44ch;
  text-shadow: 0 1px 14px rgba(10, 24, 15, .45);
}

/* Кикер сезона поверх снимка: тёмное стекло вместо светлой плашки — светлая
   на светлом кадре исчезала. */
html.fasl .hero-full-x .fasl-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--p-2);
  padding: 7px 14px 7px 12px;
  margin-bottom: var(--p-4);
  border-radius: var(--r-btn);
  background: rgba(10, 24, 15, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff !important;
}
html.fasl .hero-full-x .fasl-kicker b { color: #fff !important; }
html.fasl .hero-full-x .fasl-kicker span { color: rgba(255, 255, 255, .8) !important; }

/* Второстепенная кнопка на снимке — тёмное стекло, а не белая плашка. */
html.fasl .hero-full-x a[class*="bg-white/70"] {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html.fasl .hero-full-x a[class*="bg-white/70"]:hover {
  background: rgba(255, 255, 255, .22) !important;
}
html.fasl .hero-full-x a[class*="rounded-xl"] {
  border-radius: var(--r-btn) !important;
  padding: 14px 24px !important;
  font-size: var(--t-body) !important;
  font-weight: 700;
}

/* ЗАЛИВКУ КНОПКИ РАЗВОРОТА КРАСИТ СЕЗОННЫЙ СЛОЙ, И СВОЕГО ПРАВИЛА ЗДЕСЬ НЕТ
   НАМЕРЕННО.

   Стояла зелень бренда. Осенью «Каталоги курсҳо» переставала быть
   терракотовой, и площадка потеряла то, что на ней замечают первым. Правило
   снято: кнопку снова красит fasl.css цветом сезона. За слоем остаётся
   только наведение — сезонный слой его не описывает. */
html.fasl [code-path^="src/pages/Home.tsx:231:"] > :first-child:hover {
  background: var(--p-action-deep) !important;
  border-color: var(--p-action-deep) !important;
}

/* Затемнение снизу и слева: текст должен читаться на ЛЮБОМ кадре видео, а не
   на удачном. Два направления вместо одного — иначе низ кадра съедает
   кнопки. */
html.fasl .hero-full-x::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10, 24, 15, .78) 0%, rgba(10, 24, 15, .45) 38%, transparent 68%),
    linear-gradient(0deg, rgba(10, 24, 15, .55) 0%, transparent 34%);
  z-index: 1;
}
html.fasl .hero-full-x > * { position: relative; z-index: 2; }

/* ============================================================================
   8. ПОЛОСА РАЗДЕЛА

   Разделы чередуют бумагу: кремовая страница — полоса с зелёным дыханием —
   снова кремовая. Без этого страница читается одним бесконечным листом, и
   разделы в ней теряются.
   ========================================================================= */
.p-band {
  background: var(--p-band);
  border-block: 1px solid var(--p-rule-soft);
}
.p-band-deep {
  background: var(--p-forest);
  color: var(--p-ink-invert);
}
.p-band-deep h2,
.p-band-deep h3 { color: #fff; }
.p-band-deep p { color: rgba(247, 244, 234, .78); }

/* ============================================================================
   8а. ПУТЬ ОТ ЗАПИСИ ДО СЕРТИФИКАТА

   Было: белая карточка с пятью бледными кружками на тонкой нитке — раздел,
   который глаз пропускает. Стало: полоса другой бумаги во всю ширину, шаги
   пронумерованы, нитка сезонная. Это не украшение: человек, впервые попавший
   на сомону, по ней понимает, во что ввязывается.
   ========================================================================= */
html.fasl .fasl-path,
html.fasl .p-steps {
  background: var(--p-band) !important;
  border: 1px solid var(--p-rule-soft) !important;
  border-radius: var(--r-4) !important;
  box-shadow: none !important;
  padding: var(--p-6) var(--p-5) !important;
}
html.fasl .p-steps .p-step-dot {
  background: var(--p-surface);
  border: 1.5px solid color-mix(in srgb, var(--s-acc) 45%, var(--p-rule-strong));
  color: var(--s-acc);
}
html.fasl .p-steps .p-step-dot--done {
  background: var(--s-acc);
  border-color: var(--s-acc);
  color: #fff;
}

/* ============================================================================
   8б. ЧИСЛА ПЛАТФОРМЫ — ОСТАВЛЕНЫ СЕЗОННОМУ СЛОЮ

   Здесь стояла полоса: четыре числа без карточек, с вертикальными линейками
   между ними. Довод был такой — четыре одинаковые плитки в ряд выглядят
   шаблоном.

   Довод отклонён владельцем: «стало слишком некрасиво и скудно». И это
   правда. Полоса не просто снимала карточки — она гасила ВСЁ, что рисует в
   этом месте fasl.css: росток между второй и третьей плиткой, тонкие линии
   от каждого числа к нему и медленно бегущую по линиям искру. Ради воздуха
   я убрал единственное живое место этого раздела.

   Своих правил здесь больше нет. Как выглядят числа платформы, решает
   сезонный слой — он же их и придумал.
   ========================================================================= */

/* ============================================================================
   8в. ЦЕЛИ — АСИММЕТРИЯ 6+3+3

   Было: четыре снимка одинакового размера, четыре подписи одного кегля. Глазу
   не за что зацепиться — он видит ряд, а не смысл.

   Стало: первая цель крупная (половина ширины, полная высота), три
   остальные — малые. Композиция говорит: начни отсюда.
   ========================================================================= */
@media (min-width: 900px) {
  html.fasl .fasl-goal > .grid {
    grid-template-columns: 1.6fr 1fr 1fr !important;
    grid-template-rows: 190px 190px;
    gap: var(--p-4) !important;
  }
  html.fasl .fasl-goal > .grid > :first-child {
    grid-row: span 2;
  }
  html.fasl .fasl-goal > .grid > :nth-child(4) {
    grid-column: 2 / span 2;
  }
}
html.fasl .fasl-goal > .grid > * {
  border-radius: var(--r-card) !important;
  box-shadow: var(--p-lift-2);
  transition: transform var(--p-ui) var(--p-ease), box-shadow var(--p-ui) var(--p-ease);
}
html.fasl .fasl-goal > .grid > *:hover {
  transform: translateY(-2px);
  box-shadow: var(--p-lift-3);
}
/* Крупная карточка выше остальных — иначе «полтора ряда» смотрятся обрубком. */
@media (min-width: 900px) {
  html.fasl .fasl-goal .fasl-fs-card { min-height: 190px !important; }
  html.fasl .fasl-goal > .grid > :first-child { min-height: 396px !important; }
}
/* Затемнение под текстом рисует сезонный слой (.fs-grad) — своего не
   добавляем. Здесь только разворачиваем его: подпись переезжает ВНИЗ, к
   земле, а плотную часть градиента разворачиваем сверху вниз. Читать белый
   текст на светлом небе было нельзя; на тёмной борозде — можно.

   Трогаем ровно два свойства градиента и положение подписи. Слои снимка
   (.fasl-fs, .fs-far, .fs-near) не касаемся вовсе: одно неосторожное
   position:relative на них — и фотография схлопывается в ноль. */
html.fasl .fasl-goal .fs-grad {
  background: linear-gradient(0deg,
    rgba(10, 22, 13, .86) 0%,
    rgba(10, 22, 13, .52) 34%,
    rgba(10, 22, 13, .10) 66%,
    rgba(10, 22, 13, .22) 100%) !important;
}
html.fasl .fasl-goal .fasl-fs-card > p {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: auto;
  padding: var(--p-4) !important;
  font-size: var(--t-meta);
  line-height: 1.45;
}
@media (min-width: 900px) {
  html.fasl .fasl-goal .fasl-fs-card:first-child > p {
    font-size: var(--t-body-lg);
    font-weight: 600;
    padding: var(--p-5) !important;
  }
}

/* ============================================================================
   8г. КАРТОЧКА КУРСА — ГЛАВНЫЙ ПРЕДМЕТ ПЛАТФОРМЫ

   Курс — это то, ради чего сюда приходят, и карточка курса должна быть
   узнаваемым предметом, а не «снимок, название, кнопка».

   Что в ней теперь есть и почему:

     снимок 4:3     — курс узнают по полю, а не по строке;
     плашка раздела — поверх снимка, чтобы не отнимать место у названия;
     название       — второй уровень шкалы, две строки максимум;
     устод          — с точкой-меткой: человек важнее описания;
     мелкие данные  — маводҳо, соат: это то, что решает «влезет ли в неделю»;
     пешрафт        — только у своих курсов, тонкой чертой снизу.
   ========================================================================= */
html.fasl .sb-card,
html.fasl .p-course {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--p-surface) !important;
  border: 1px solid var(--p-rule-soft) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--p-lift-2);
}
html.fasl .sb-card img,
html.fasl .p-course img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  transition: transform var(--p-season) var(--p-ease);
}
html.fasl .sb-card:hover img,
html.fasl .p-course:hover img { transform: scale(1.03); }

/* Плашки внутри карточки: тихие, мелкие, в одну строку. */
html.fasl .sb-card [class*="rounded-full"] {
  font-size: var(--t-micro);
  padding: 3px 9px;
}

/* Полоса чисел в развороте: подпись под обещанием. Тонко, в одну строку,
   тёмным стеклом — числа не должны спорить с заголовком. */
html.fasl .p-hero-figs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p-3) var(--p-4);
  margin-top: var(--p-5);
  padding: 10px 16px;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--r-btn);
  background: rgba(10, 24, 15, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
  font-size: var(--t-meta);
}
html.fasl .p-hero-figs b {
  color: #fff;
  font-weight: 800;
  font-size: var(--t-body-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-right: 3px;
}
html.fasl .p-hero-figs i {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .24);
}
@media (max-width: 560px) {
  html.fasl .p-hero-figs { flex-wrap: wrap; gap: var(--p-2) var(--p-3); }
  html.fasl .p-hero-figs i { display: none; }
}

/* ============================================================================
   8д. РЕКОМЕНДАЦИИ: СЦЕНЫ ВОЗВРАЩЕНЫ, ПОДПИСЬ СТАЛА ВИДНОЙ

   Здесь я гасил «3D-сцены» этих карточек, считая их чужим рендером. Это была
   ошибка, и вот в чём: подписи карточек сомона намеренно красит В БЕЛЫЙ —
   они лежат ПОВЕРХ снимка (fasl.css, .fasl-photo-card > p, color:#FFF
   !important). Снимок я убрал, а белый текст остался: на кремовой карточке
   получилось белое по белому. На боевой сомоне три карточки стояли пустыми.

   Сцены возвращены целиком, вместе с фотографией сертификата.

   ОСТАВАЛАСЬ ВТОРАЯ БЕДА, И ОНА СТАРШЕ МОЕГО СЛОЯ. Из трёх сцен две
   нарисованы тёмным (листва, чёрное стекло), а третья — это настоящий
   снимок золотого сертификата: светлая бумага. Белая подпись «Сертификатҳо»
   ложилась на неё почти без разницы — измерено на месте, 1.53 : 1 при
   норме 4.5. Ореол вокруг букв, о котором говорит комментарий в fasl.css,
   там же и погашен: text-shadow:none !important.

   Возвращать ореол не стал: по светлой бумаге он даёт грязный контур.
   Вместо него — сход снизу карточки, короткий и мягкий, ровно под полосой
   подписи (--cap задаёт её высоту, и у сертификата она своя, 62px). Лист
   сертификата стоит ВЫШЕ этой полосы, поэтому сход не закрывает ни документа,
   ни его QR — он гасит только то поле, по которому идут буквы.
   ========================================================================= */
html.fasl-home .fasl-photo-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Полоса подписи плюс запас на растушёвку. Считать надо от --cap: у
     сертификата подпись в одну строку (62px), у курсов в три (92px), и
     сход обязан накрыть ровно свою. */
  height: calc(var(--cap, 84px) + 44px);
  /* ПЛОТНОСТЬ ДЕРЖИТСЯ ДО ВЕРХА ПОДПИСИ, а не тает к ней. Первый вариант
     таял линейно, и заглавию — оно стоит в самом верху полосы — доставалось
     меньше всего: по золотой бумаге выходило 3.3 : 1 вместо 4.5. Поэтому
     сход держит .74 на всей высоте подписи и растворяется только выше её. */
  background: linear-gradient(
    to top,
    rgba(10, 24, 15, .74) 0,
    rgba(10, 24, 15, .74) calc(var(--cap, 84px) * .86),
    rgba(10, 24, 15, .34) calc(var(--cap, 84px) + 16px),
    rgba(10, 24, 15, 0) 100%);
  /* Подписи лежат на z-index:4 — сход остаётся под ними и над снимком. */
  z-index: 3;
  pointer-events: none;
}
/* На узком экране карточка ниже (fasl.css снимает zoom и держит 142px), а
   полоса подписи остаётся прежней. Запас на растушёвку тут пришлось бы
   отнимать у самого снимка, поэтому он короче: сход накрывает подпись и
   заканчивается сразу над ней. */
@media (max-width: 767px) {
  html.fasl-home .fasl-photo-card::after { height: calc(var(--cap, 84px) + 18px); }
}

/* ============================================================================
   Мелкие данные под названием курса: объём, по которому человек решает,
   влезет ли курс в его неделю. */
html.fasl .p-course-meta {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--p-mute);
  margin: 2px 0 6px;
}

/* ============================================================================
   8ж. ВТОРОЙ ПОДВАЛ В КАБИНЕТАХ — УБРАН

   НАЙДЕНО ПРОВЕРКОЙ, а не на глаз. На /dashboard, /teacher и /admin страница
   заканчивалась ДВУМЯ подвалами подряд: своим (#eag-footer, 289 точек) и
   подвалом сборки (313 точек). Шестьсот точек одинаковых ссылок — это раз.

   Хуже другое. В подвале сборки стоят три ссылки href="#", которые никуда не
   ведут: «Саволҳои маъмул», «Сертификатҳо», «Кӯмак». Наш слой их чинит по
   тексту, но чинит только те, что успел увидеть: React дорисовывает свой
   подвал позже, и до него исправление не доходит. И там же напечатан
   выдуманный номер «+992 00 000 0000» — тот самый, который из своего подвала
   был убран намеренно, как обман.

   На главной подвал сборки — одна строка копирайта в 40 точек, и она не
   мешает; поэтому правило только для трёх кабинетов, по метке роли на body.
   ========================================================================= */
html.fasl body[class*="eag-stud"] footer:not(#eag-footer),
html.fasl body[class*="eag-teach"] footer:not(#eag-footer),
html.fasl body[class*="eag-omor"] footer:not(#eag-footer) {
  display: none !important;
}

/* ============================================================================
   8и. СТРАНИЦА НЕ ЕЗДИТ ВБОК

   Измерено: на десктопе главная прокручивается вправо на 32 точки. Разворот
   сделан «во всю ширину» отрицательными полями по -32 слева и справа, а
   гасит их только body (overflow-x:hidden). Но прокручивается-то не body, а
   html — у него overflow остаётся visible, и scrollLeft честно уезжает.

   Ставим clip, а не hidden, и ставим на html. Разница существенная: hidden
   делает элемент контейнером прокрутки, и тогда ломается position:sticky —
   а на нём держится наша же шапка. clip запрещает прокрутку, не создавая
   контейнера, и шапка остаётся липкой.
   ========================================================================= */
html.fasl {
  overflow-x: clip;
}

/* ============================================================================
   8з. ПАЛЕЦ, А НЕ КУРСОР

   Измерено на экране в 320 точек. Кнопка раскрытия меню — 24×24, марка
   платформы рядом с ней — 26×26, ссылки подвала — 22 точки в высоту. Палец
   взрослого человека накрывает около 45 точек; всё, что меньше, требует
   прицеливаться, а прицеливаться в маршрутке нечем.

   Область нажатия растим отступом, а сам знак не двигаем: отрицательное поле
   возвращает соседям то место, которое отступ у них забрал. Рисунок на
   экране остаётся ровно там, где был, — меняется только то, чего не видно.
   ========================================================================= */
html.fasl header button[class*="lg:hidden"],
html.fasl header .p-mark {
  padding: 10px !important;
  margin: -10px !important;
}
/* Ссылки подвала: 22 точки превращаются в 34. Больше не даём — иначе колонка
   растягивается и подвал начинает занимать пол-экрана телефона. */
html.fasl #eag-footer .eagf-in a {
  padding: 6px 0 !important;
}

/* ============================================================================
   9. ПУСТОЕ, ЗАГРУЗКА, ОШИБКА

   Пустой раздел был бледной рамкой с серой строкой посередине — на экране
   это выглядит как поломка, а не как «пока пусто». Пустое состояние — часть
   оформления: короткое объяснение, ботанический контур и один шаг.
   ========================================================================= */
.p-empty,
#eag-stud-page .void,
#eag-teach-page .none,
#eag-omor-page .om-void {
  display: grid;
  justify-items: center;
  gap: var(--p-3);
  padding: var(--p-7) var(--p-5) !important;
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--s-soft) 55%, transparent), transparent 70%),
    var(--p-surface-sunk) !important;
  border: 1px dashed var(--p-rule-strong) !important;
  border-radius: var(--r-card) !important;
}
.p-empty svg,
#eag-stud-page .void svg,
#eag-omor-page .om-void svg {
  width: 56px;
  height: 56px;
  color: color-mix(in srgb, var(--s-acc) 55%, var(--p-mute));
}
.p-empty b,
#eag-stud-page .void b { font-size: var(--t-h3); color: var(--p-forest); }
.p-empty span,
#eag-stud-page .void p { font-size: var(--t-meta); color: var(--p-ink-2); max-width: 42ch; }

/* ПУСТО НА САМОЙ СОМОНЕ.

   Когда курсов ещё нет, приложение ставит на главной одну строку в бледной
   рамке: «Курсҳо ба зудӣ илова мешаванд». На экране это читается как
   поломка — будто раздел не загрузился.

   Строку оставляем как есть (текст авторский), а вид даём тот же, что у
   пустых мест в кабинетах: утопленная бумага, штриховая рамка и росток над
   надписью. Росток нарисован здесь же — отдельный файл ради одной фигуры
   не нужен. */
html.fasl [code-path^="src/pages/Home.tsx:254:"] > p {
  display: grid;
  justify-items: center;
  gap: var(--p-3);
  padding: var(--p-7) var(--p-5) !important;
  text-align: center;
  font-size: var(--t-body) !important;
  color: var(--p-ink-2) !important;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--s-soft) 55%, transparent), transparent 70%),
    var(--p-surface-sunk) !important;
  border: 1px dashed var(--p-rule-strong) !important;
  border-radius: var(--r-card) !important;
}
html.fasl [code-path^="src/pages/Home.tsx:254:"] > p::before {
  content: "";
  width: 44px;
  height: 44px;
  opacity: .75;
  background: no-repeat center/contain
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%237A8450' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M24 44V20'/%3E%3Cpath d='M24 26c-8 0-13-5-13-12 7 0 13 5 13 12z'/%3E%3Cpath d='M24 22c7 0 12-4 12-11-6 0-12 4-12 11z'/%3E%3C/svg%3E");
}

/* Скелет загрузки: бумага, а не серый прямоугольник. Движение тихое — блик
   идёт полторы секунды, а не мелькает. Классы .sk принадлежат слоям
   кабинетов; правило одно на все. */
.p-skel,
#eag-stud-page .sk,
#eag-teach-page .sk,
#eag-omor-page .sk {
  border-radius: var(--r-3) !important;
  background: linear-gradient(90deg, var(--p-surface-sunk) 0%, color-mix(in srgb, var(--s-soft) 60%, var(--p-surface-sunk)) 50%, var(--p-surface-sunk) 100%) !important;
  background-size: 200% 100% !important;
  animation: p-shimmer 1.5s var(--p-ease) infinite !important;
}
@keyframes p-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

/* ============================================================================
   9а. КАБИНЕТЫ: ОБЩЕЕ ОСНОВАНИЕ

   Три рабочих места — утоқи донишҷӯ, кабинет устода, панель маъмура —
   собраны своими слоями (stud-dash, teach-dash, omor-dash) и у каждого была
   своя палитра, свои скругления и свой шрифт. Отсюда и ощущение трёх разных
   продуктов под одним именем.

   Здесь у них появляется общее основание: одна бумага, один шрифт, одна
   карточка, одна кнопка. РАЗНЫМ остаётся то, что и должно быть разным, —
   состав экрана и то, что на нём главное:

     донишҷӯ  — путь: продолжить, пешрафт, следующий шаг;
     устод    — управление курсом: люди, их движение, переписка;
     маъмур   — работа площадки: числа, события, списки.
   ========================================================================= */
#eag-stud-page,
#eag-teach-page,
#eag-omor-page {
  font-family: var(--f-sans) !important;
  color: var(--p-ink) !important;
  --ink: var(--p-ink);
  --muted: var(--p-ink-2);
  --faint: var(--p-mute);
  --rule: var(--p-rule-soft);
  --rule-2: var(--p-rule-soft);
}

/* Карточка кабинета — вторая ступень поверхности, та же, что на сомоне. */
#eag-stud-page .card,
#eag-teach-page .card,
#eag-omor-page .card {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-rule-soft) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--p-lift-2) !important;
  padding: var(--p-5) var(--p-5) !important;
  transition: transform var(--p-ui) var(--p-ease), box-shadow var(--p-ui) var(--p-ease),
              border-color var(--p-ui) var(--p-ease) !important;
}
#eag-stud-page .card:hover,
#eag-teach-page .card:hover,
#eag-omor-page .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--p-lift-3) !important;
}

/* Заголовок карточки. Заглавными, но тише прежнего: когда таких строк
   двенадцать на экране, они начинают кричать хором. */
#eag-stud-page .card h3,
#eag-teach-page .card h3,
#eag-omor-page .card h3 {
  font-size: var(--t-micro) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: var(--p-mute) !important;
  margin-bottom: var(--p-4) !important;
}
#eag-stud-page .card h3 .sd-ic,
#eag-teach-page .card h3 svg,
#eag-omor-page .card h3 svg {
  color: color-mix(in srgb, var(--s-acc) 70%, var(--p-mute)) !important;
}

/* Кнопка кабинета — цвет сезона, как и на сомоне. */
#eag-stud-page .btn,
#eag-teach-page .btn,
#eag-omor-page .btn {
  background: var(--p-action) !important;
  border-color: var(--p-action) !important;
  color: #fff !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
  font-size: var(--t-meta) !important;
  padding: 12px 20px !important;
  box-shadow: var(--p-action-sh) !important;
  transition: background var(--p-micro) var(--p-ease), transform var(--p-micro) var(--p-ease),
              box-shadow var(--p-ui) var(--p-ease) !important;
}
#eag-stud-page .btn:hover,
#eag-teach-page .btn:hover,
#eag-omor-page .btn:hover {
  background: var(--p-action-deep) !important;
  filter: none !important;
  transform: translateY(-1px);
}
#eag-stud-page .btn.ghost,
#eag-teach-page .btn.ghost,
#eag-omor-page .btn.ghost {
  background: var(--p-surface) !important;
  color: var(--p-forest) !important;
  border-color: var(--p-rule-strong) !important;
  box-shadow: none !important;
}
#eag-stud-page .btn.ghost:hover,
#eag-teach-page .btn.ghost:hover,
#eag-omor-page .btn.ghost:hover {
  background: var(--p-surface-sunk) !important;
  border-color: color-mix(in srgb, var(--s-acc) 40%, var(--p-rule-strong)) !important;
}

/* Плашка: тихая. Громкой она остаётся только там, где означает состояние
   ЧЕЛОВЕКА (тамом шуд, супорида шуд), а не свойство предмета. */
#eag-stud-page .badge,
#eag-teach-page .badge,
#eag-omor-page .badge {
  border-radius: var(--r-1) !important;
  font-size: var(--t-micro) !important;
  letter-spacing: .06em !important;
  background: var(--p-surface-sunk) !important;
  color: var(--p-ink-2) !important;
  border: 1px solid var(--p-rule) !important;
}
#eag-stud-page .badge.mute,
#eag-teach-page .badge.mute,
#eag-omor-page .badge.mute {
  background: transparent !important;
  color: var(--p-mute) !important;
}

/* ============================================================================
   9б. УТОҚИ ДОНИШҶӮ — ПУТЬ ОБУЧЕНИЯ, А НЕ ВИТРИНА ЧИСЕЛ

   Главный вопрос человека, открывающего утоқ: «на чём я остановился». Значит
   карточка «идома диҳед» — единственное СТЕКЛО на экране, и она крупнее
   всего остального. Числа переезжают в полосу: три белые плитки в ряд не
   несут ничего, кроме шума.
   ========================================================================= */
#eag-stud-page .sd-hero {
  border-radius: var(--r-4) !important;
  border-color: var(--p-rule-soft) !important;
  padding: var(--p-7) var(--p-6) !important;
  background:
    radial-gradient(90% 140% at 88% -20%, color-mix(in srgb, var(--s-acc) 16%, transparent), transparent 66%),
    linear-gradient(152deg, var(--s-hero-a) 0%, var(--s-hero-b) 46%, var(--p-surface) 100%) !important;
}
#eag-stud-page .sd-hero h1 {
  font-size: var(--t-h1) !important;
  line-height: 1.06 !important;
  letter-spacing: -.024em !important;
  color: var(--p-forest) !important;
  margin: var(--p-2) 0 var(--p-2) !important;
}
#eag-stud-page .sd-hero .lbl {
  font-size: var(--t-micro) !important;
  letter-spacing: .1em !important;
  color: color-mix(in srgb, var(--s-deep) 62%, var(--p-mute)) !important;
}
#eag-stud-page .sd-hero p { font-size: var(--t-meta) !important; color: var(--p-ink-2) !important; }
#eag-stud-page .sd-hero .ava {
  width: 64px !important; height: 64px !important;
  border-radius: var(--r-3) !important;
  font-size: 20px !important;
}

/* Три числа — полоса, а не три карточки. */
#eag-stud-page .sd-metrics {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  background: var(--p-band) !important;
  border: 1px solid var(--p-rule-soft) !important;
  border-radius: var(--r-4) !important;
  overflow: hidden;
}
#eag-stud-page .metric {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--p-5) var(--p-5) !important;
  position: relative;
}
#eag-stud-page .metric:hover { transform: none !important; }
#eag-stud-page .metric + .metric::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--p-rule);
}
#eag-stud-page .metric .box {
  width: 34px !important; height: 34px !important;
  border-radius: var(--r-1) !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--s-acc) 75%, var(--p-olive)) !important;
}
#eag-stud-page .metric b { font-size: 30px !important; color: var(--p-forest) !important; }
#eag-stud-page .metric span { font-size: var(--t-meta) !important; color: var(--p-ink-2) !important; }

/* НА ТЕЛЕФОНЕ ПОЛОСА СТАНОВИТСЯ СПИСКОМ.

   Три колонки на 390 точках — это «Курсҳо дар ҷараён» в три строки и
   обрезанное третье число. Столбцы здесь не нужны: на телефоне глаз всё
   равно идёт сверху вниз. */
@media (max-width: 700px) {
  #eag-stud-page .sd-metrics { grid-template-columns: 1fr !important; }
  #eag-stud-page .metric {
    display: flex !important;
    align-items: baseline;
    gap: var(--p-3) !important;
    padding: var(--p-3) var(--p-4) !important;
    border-bottom: 1px solid var(--p-rule) !important;
  }
  #eag-stud-page .metric:last-child { border-bottom: 0 !important; }
  #eag-stud-page .metric + .metric::before { content: none; }
  #eag-stud-page .metric .box { display: none !important; }
  #eag-stud-page .metric b { font-size: 22px !important; min-width: 2.2ch; }
  #eag-stud-page .metric span { margin-top: 0 !important; }
  /* Заглавие: кольцо и подпись плотнее — на телефоне высота дороже. */
  #eag-stud-page .sd-hero { padding: var(--p-5) var(--p-4) !important; }
  #eag-stud-page .sd-hero .ring .dial { width: 72px !important; height: 72px !important; }
}

/* ОДНО СТЕКЛО НА ЭКРАН — карточка «идома диҳед». */
#eag-stud-page .sd-row .card:has(.sd-go) {
  background: color-mix(in srgb, var(--p-surface) 84%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--s-acc) 26%, var(--p-rule)) !important;
  box-shadow: var(--p-lift-3) !important;
  padding: var(--p-5) !important;
}
#eag-stud-page .sd-go .pic {
  width: 260px !important;
  border-radius: var(--r-3) !important;
}
#eag-stud-page .sd-go h2 {
  font-size: 24px !important;
  letter-spacing: -.022em !important;
  color: var(--p-forest) !important;
}
@media (max-width: 900px) {
  #eag-stud-page .sd-go .pic { width: 100% !important; height: 168px !important; }
}

/* КАРТОЧКА В КАРТОЧКЕ — САМАЯ ЧАСТАЯ ОШИБКА ЭТОГО ЭКРАНА.

   «Курсҳои ман» — белая карточка, внутри которой лежат ещё три белые
   карточки. Глаз читает это как один предмет с рисунком внутри, а не как
   три курса. Внешняя обёртка становится прозрачной: остаётся заголовок
   раздела и сами курсы — на бумаге страницы, как на сомоне. */
#eag-stud-page .card:has(> .sd-courses),
#eag-teach-page .card:has(> .tc-courses) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#eag-stud-page .card:has(> .sd-courses):hover,
#eag-teach-page .card:has(> .tc-courses):hover { transform: none !important; }
#eag-stud-page .card:has(> .sd-courses) > h3 { margin-bottom: var(--p-3) !important; }

/* Курс в списке своих курсов — тот же предмет, что в каталоге: снимок 4:3,
   название, устод, пешрафт. */
#eag-stud-page .sd-courses > * {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-rule-soft) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--p-lift-2) !important;
  overflow: hidden;
}

/* Полоса пешрафта: тоньше и спокойнее — блик по ней бежал бесконечно и
   тянул глаз к себе с любого места экрана. */
#eag-stud-page .bar,
#eag-teach-page .bar {
  height: 7px !important;
  background: color-mix(in srgb, var(--s-acc) 14%, var(--p-surface-sunk)) !important;
}
#eag-stud-page .bar.shine i::after { animation: none !important; }

/* Быстрые переходы (чат, танзимот) — не карточки с кнопками, а тихие
   строки: это навигация, а не содержимое. Раньше они выглядели ровно так же
   весомо, как «идома диҳед», и спорили с ним за внимание. */
#eag-stud-page .sd-tune .card,
#eag-teach-page .tc-sec {
  background: transparent !important;
  border: 1px solid var(--p-rule) !important;
  box-shadow: none !important;
  padding: var(--p-4) var(--p-5) !important;
}
#eag-stud-page .sd-tune .card:hover,
#eag-teach-page .tc-sec:hover {
  transform: none !important;
  background: var(--p-surface) !important;
  border-color: color-mix(in srgb, var(--s-acc) 30%, var(--p-rule)) !important;
  box-shadow: var(--p-lift-1) !important;
}
#eag-teach-page .tc-sec .deco { opacity: .35; }

/* ============================================================================
   9в. КАБИНЕТ УСТОДА — ЦЕНТР УПРАВЛЕНИЯ КУРСОМ

   БЫЛО: первым и самым крупным предметом на экране стояла анкета устода —
   имя, ихтисос, таҷриба, рассказ о себе. То есть кабинет отвечал на вопрос
   «кто я», хотя устод открывает его с вопросом «что с моими курсами».

   СТАЛО: курсы первыми и крупно, анкета — тихой строкой ниже. Ни одна
   возможность не убрана: правка данных на месте, только больше не занимает
   главный экран.
   ========================================================================= */
#eag-teach-page > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  gap: var(--p-4);
}
#eag-teach-page .tc-cl { order: 1; }
#eag-teach-page .tc-hero { order: 2; }
/* Заголовок «Бахшҳои кабинет» и ряд под ним — вниз, вместе. Разделы кабинета
   это навигация, и она не может стоять выше того, ради чего сюда пришли. */
#eag-teach-page .tc-h { order: 3; margin-top: var(--p-4); }
#eag-teach-page .tc-row { order: 4; }

#eag-teach-page .tc-top h1 {
  font-size: var(--t-h1) !important;
  letter-spacing: -.024em !important;
  color: var(--p-forest) !important;
}
#eag-teach-page .tc-top p { color: var(--p-ink-2) !important; font-size: var(--t-meta) !important; }

/* Анкета — полоса, а не карточка во весь экран. */
#eag-teach-page .tc-hero {
  background: transparent !important;
  border: 1px solid var(--p-rule) !important;
  box-shadow: none !important;
  padding: var(--p-4) var(--p-5) !important;
  align-items: center !important;
}
#eag-teach-page .tc-hero:hover { transform: none !important; box-shadow: none !important; }
#eag-teach-page .tc-hero h2 { font-size: var(--t-h3) !important; }
#eag-teach-page .tc-hero .lbl { font-size: var(--t-micro) !important; letter-spacing: .1em !important; color: var(--p-mute) !important; }
#eag-teach-page .tc-hero .tc-facts { gap: var(--p-4) !important; }
#eag-teach-page .tc-hero .tc-facts span { font-size: var(--t-micro) !important; color: var(--p-mute) !important; }
#eag-teach-page .tc-hero .tc-facts b { font-size: var(--t-meta) !important; color: var(--p-ink) !important; }
#eag-teach-page .tc-hero .pic,
#eag-teach-page .tc-hero .ini { width: 56px !important; height: 56px !important; border-radius: var(--r-2) !important; }

/* Список курсов — главный предмет экрана. */
#eag-teach-page .tc-cl .hd b { font-size: var(--t-h2) !important; color: var(--p-forest) !important; }
#eag-teach-page .tc-cl .hd span { font-size: var(--t-meta) !important; color: var(--p-ink-2) !important; }
/* Строка курса при наведении только подсвечивается — и больше ничего.

   Здесь ездил ЛЕВЫЙ ОТСТУП: при наведении он вырастал, и вся строка —
   значок, название, «0 мавод · 0 донишҷӯ», плашка — уезжала вправо, а при
   уходе мыши возвращалась. Смысла в этом никакого: подсветка уже говорит,
   на чём стоит курсор. А вреда два. Отступ меняет РАЗМЕР, значит браузер
   пересчитывает раскладку на каждом кадре — это самое дорогое, что можно
   попросить у слабой машины. И читаемость: текст, ползающий под курсором,
   мешает его прочесть, а в списке курсов человек как раз читает названия. */
#eag-teach-page .tc-cl .r {
  padding: var(--p-4) var(--p-3) !important;
  border-bottom: 1px solid var(--p-rule-soft) !important;
  transition: background var(--p-micro) var(--p-ease) !important;
}
#eag-teach-page .tc-cl .r:hover {
  background: var(--p-surface-sunk) !important;
}
#eag-teach-page .tc-cl .r .tx b { font-size: var(--t-h3) !important; color: var(--p-forest) !important; }
#eag-teach-page .tc-cl .r .meta { font-size: var(--t-meta) !important; color: var(--p-ink-2) !important; }
#eag-teach-page .tc-cl .r .st {
  font-size: var(--t-micro) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-1) !important;
  padding: 4px 9px !important;
}
#eag-teach-page .tc-cl .r .st.on {
  background: color-mix(in srgb, var(--p-green) 12%, transparent) !important;
  color: var(--p-green-deep) !important;
}
#eag-teach-page .tc-cl .r .st.off {
  background: transparent !important;
  color: var(--p-mute) !important;
  border: 1px solid var(--p-rule) !important;
}

/* ============================================================================
   9г. ПАНЕЛЬ МАЪМУРА — РАБОТА ПЛОЩАДКИ

   Здесь состав уже верный: сводка, события, списки, управление. Правки
   касаются только вида: числа переезжают в полосу, кнопки становятся
   брендовыми, пустые места — частью оформления.
   ========================================================================= */
#eag-omor-page .om-hero {
  border-radius: var(--r-4) !important;
  border-color: var(--p-rule-soft) !important;
  background:
    radial-gradient(90% 140% at 92% -30%, color-mix(in srgb, var(--s-acc) 16%, transparent), transparent 64%),
    linear-gradient(152deg, var(--s-hero-a) 0%, var(--s-hero-b) 48%, var(--p-surface) 100%) !important;
}
#eag-omor-page .om-hero h1 {
  font-size: var(--t-h1) !important;
  letter-spacing: -.024em !important;
  color: var(--p-forest) !important;
}

/* Четыре плитки-счётчика — в полосу. */
#eag-omor-page .om-strip {
  gap: 0 !important;
  background: var(--p-band) !important;
  border: 1px solid var(--p-rule-soft) !important;
  border-radius: var(--r-4) !important;
  overflow: hidden;
}
#eag-omor-page .om-strip > * {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  padding: var(--p-5) !important;
}
#eag-omor-page .om-strip > * + *::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--p-rule);
}
#eag-omor-page .om-strip .val,
#eag-omor-page .om-strip b {
  font-size: clamp(28px, 3vw, 40px) !important;
  color: var(--p-forest) !important;
  letter-spacing: -.03em !important;
}

#eag-omor-page .om-btn.solid {
  background: var(--p-action) !important;
  border-color: var(--p-action) !important;
  color: #fff !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
}
#eag-omor-page .om-btn.solid:hover { background: var(--p-action-deep) !important; }
#eag-omor-page .om-btn.ghost {
  background: var(--p-surface) !important;
  border-color: var(--p-rule-strong) !important;
  color: var(--p-forest) !important;
  border-radius: var(--r-btn) !important;
}

/* Пустое место панели — не серая надпись посреди белого прямоугольника. */
#eag-omor-page .om-void,
#eag-stud-page .void,
#eag-teach-page .none {
  background: var(--p-surface-sunk) !important;
  border: 1px dashed var(--p-rule-strong) !important;
  border-radius: var(--r-3) !important;
  color: var(--p-ink-2) !important;
}

/* ============================================================================
   9д. ЧАТ КУРСА

   Чат — часть курса, а не отдельный мессенджер, и выглядеть он должен как
   часть платформы: та же бумага, те же скругления, та же типографика.
   ========================================================================= */
html.fasl .cc-wrap {
  border-radius: var(--r-card) !important;
  border-color: var(--p-rule-soft) !important;
  background: var(--p-surface) !important;
  box-shadow: var(--p-lift-2) !important;
}
html.fasl .cc-side { background: var(--p-surface-sunk) !important; border-color: var(--p-rule-soft) !important; }
html.fasl .cc-item {
  border-radius: var(--r-2) !important;
  transition: background var(--p-micro) var(--p-ease) !important;
}
html.fasl .cc-item:hover { background: var(--p-band) !important; }
html.fasl .cc-t { font-size: var(--t-meta) !important; }
html.fasl .cc-m .cc-b {
  border-radius: var(--r-3) !important;
  font-size: var(--t-body) !important;
  line-height: 1.5 !important;
}
html.fasl .cc-badge {
  background: var(--s-acc) !important;
  color: #fff !important;
  border-radius: var(--r-1) !important;
  font-size: var(--t-micro) !important;
}
html.fasl .cc-send button,
html.fasl .cc-send .btn {
  background: var(--p-action) !important;
  border-radius: var(--r-btn) !important;
}

/* ============================================================================
   9е. ОКНА (modal)

   Окно — часть облика платформы, а не белый прямоугольник поверх серого.
   Мягкое стекло, сезонная грань, крупный заголовок, поля собраны в группы.

   ЗДЕСЬ БЫЛ СЕЛЕКТОР .om-modal — И ЭТО БЫЛА ОШИБКА. om-modal — не класс
   окна, а метка, которую omor-dash.js ставит на <body>, пока окно открыто.
   Правило вешало стеклянное размытие на сам <body>, а backdrop-filter на
   предке превращает position:fixed в отсчёт от этого предка: окно, его
   шапка и затемнение оказывались у начала страницы, а не экрана. Маъмур,
   нажавший «Идора кардан» в середине страницы, окна не видел — приходилось
   листать вверх. Окно omor-dash красит сам, ему это правило не нужно.
   ========================================================================= */
html.fasl [class*="fixed"][class*="inset-0"] > [class*="rounded-2xl"],
html.fasl [class*="fixed"][class*="inset-0"] > [class*="rounded-3xl"] {
  background: color-mix(in srgb, var(--p-surface) 92%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--s-acc) 20%, var(--p-rule)) !important;
  border-radius: var(--r-4) !important;
  box-shadow: 0 24px 60px rgba(20, 48, 31, .22) !important;
}
/* ОГОҲӢ ВСЕГДА СВЕРХУ.

   Приложение показывает свои предупреждения и подтверждения одним окном
   (AppModal). Оно объявлено с z-index 100 — а слои платформы работают на
   порядок выше: затемнение окна маъмура стоит на 2147482000, само окно на
   2147482004, его шапка на 2147482005. Поэтому предупреждение, поднятое
   из окна маъмура, оказывалось ПОД всеми тремя: человек нажимал «Сохтан»
   с пустым полем, ответ появлялся — и был не виден.

   Ответ на действие обязан быть выше всего, что уже на экране, поэтому
   поднимаем его над всей нашей стопкой. Ниже он остаётся только нашего
   собственного диалога подтверждения (#eag-ask, 2147483650) — тот тоже
   ждёт ответа и перекрывать себя не должен.

   Правило стоит здесь, а не в слое маъмура: окно приложения одно на всю
   платформу, и накрыть его может любой слой, а не только тот. */
html.fasl [code-path^="src/components/AppModal.tsx:55:"] {
  z-index: 2147483000 !important;
}

/* Затемнение под окном — тёплое, а не чёрное: чёрная плёнка на кремовой
   бумаге выглядит дырой. */
html.fasl [class*="fixed"][class*="inset-0"][class*="bg-black"] {
  background: color-mix(in srgb, var(--p-forest) 55%, transparent) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ============================================================================
   9ж. КАТАЛОГ И СТРАНИЦА КУРСА
   ========================================================================= */
/* Плашки-фильтры каталога: одна строка, тихие, выбранная — зелень бренда. */
html.fasl .eag-subrow button,
html.fasl .eag-subcats button {
  border-radius: var(--r-btn) !important;
  font-size: var(--t-meta) !important;
  border: 1px solid var(--p-rule) !important;
  background: var(--p-surface) !important;
  color: var(--p-ink-2) !important;
  transition: border-color var(--p-micro) var(--p-ease), background var(--p-micro) var(--p-ease) !important;
}
html.fasl .eag-subrow button[aria-pressed="true"],
html.fasl .eag-subcats button.on {
  background: var(--p-forest) !important;
  border-color: var(--p-forest) !important;
  color: #fff !important;
}

/* Страница курса: снимок крупнее, сведения справа — стекло. */
html.fasl [code-path^="src/pages/CourseDetail"] img[class*="w-full"] {
  border-radius: var(--r-card) !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Сведения о курсе — ОДНО стекло на странице: это то, ради чего страницу
   открывали (сколько маводҳо, где я, что дальше). */
html.fasl [code-path^="src/pages/CourseDetail.tsx:88:"] {
  background: color-mix(in srgb, var(--p-surface) 84%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--s-acc) 24%, var(--p-rule)) !important;
  border-radius: var(--r-4) !important;
  box-shadow: var(--p-lift-3) !important;
}

/* ПЛАШКИ СТРАНИЦЫ КУРСА БЫЛИ ИЗ ТЁМНОЙ ТЕМЫ.

   Три подряд, и все разного цвета: мятная (bg-[#10B981]/20), зелёная
   (green-500/20) и — на светлой бумаге — БЕЛАЯ ПО БЕЛОМУ (bg-white/10,
   text-white/60). Последнюю на сомоне просто не было видно: «8 соат»
   читалось бледно-серым по кремовому. Это наследство шаблона с тёмным
   фоном, а не решение.

   Приводим к одному виду: тихая плашка на бумаге. Отличается только та,
   что говорит о ДОСТУПЕ («Дастрас», «Ройгон»), — она зелёная, потому что
   отвечает на вопрос «могу ли я». */
html.fasl [code-path^="src/pages/CourseDetail"] span[class*="rounded-full"] {
  background: var(--p-surface-sunk) !important;
  color: var(--p-ink-2) !important;
  border: 1px solid var(--p-rule) !important;
  border-radius: var(--r-1) !important;
  font-size: var(--t-meta) !important;
  font-weight: 600;
}
html.fasl [code-path^="src/pages/CourseDetail"] span[class*="green-500/20"],
html.fasl [code-path^="src/pages/CourseDetail"] span[class*="green-400"] {
  background: color-mix(in srgb, var(--p-green) 10%, transparent) !important;
  color: var(--p-green-deep) !important;
  border-color: color-mix(in srgb, var(--p-green) 26%, transparent) !important;
}

/* Главное действие курса — цвет сезона, как и все остальные. Бандл красит
   его золотом (#B8860B) круглый год, поэтому правило нужно. */
html.fasl [code-path^="src/pages/CourseDetail"] a[class*="bg-[#B8860B]"],
html.fasl [code-path^="src/pages/CourseDetail"] button[class*="bg-[#B8860B]"],
html.fasl [code-path^="src/pages/CourseDetail"] [class*="bg-[#B8860B]"] {
  background: var(--p-action) !important;
  color: #fff !important;
  border-radius: var(--r-btn) !important;
}

/* Каталог: три курса в ряд — но только там, где ряд их вмещает.

   Ширину карточки задаёт fasl.css: 463 пикселя, и она одна на все широкие
   экраны. Отсюда и порог. Три карточки требуют 463 × 3 + два зазора по 24 +
   поля страницы 64 = 1501, и берём 1504 — на треть пикселя больше, чем нужно
   ровно: при делении ряда на три доли остаток обязан идти в плюс, иначе
   карточка не дотянет до своей ширины и сожмётся. Раньше порог стоял на
   1100, и на обычном экране в 1280 три колонки делили ряд на 386 — карточка
   выходила уже, чем задумана.

   Ниже полутора тысяч в ряду две карточки той же ширины, разнесённые по
   центрам своих ячеек. Это воздух между ними, но воздух честнее, чем
   карточка, ужатая до размера, при котором на снимке ничего не разобрать.

   Ограничение страницы поднимаем туда же: у сборки стоит 1280, и без этого
   три колонки не получили бы своей ширины ни на каком мониторе. */
@media (min-width: 1504px) {
  html.fasl [code-path^="src/pages/Courses.tsx:29:"] {
    max-width: 1504px !important;
  }
  html.fasl [code-path^="src/pages/Courses"] [class*="grid-cols-2"]:not([class*="lg:grid-cols-3"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ============================================================================
   10. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ

   Раздел проявляется и поднимается на 14 точек. Ничего тяжелее: масштаб,
   поворот и «выезд сбоку» на длинной странице укачивают.
   ========================================================================= */
.p-rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--p-section) var(--p-ease),
              transform var(--p-section) var(--p-ease);
}
.p-rise.p-in {
  opacity: 1;
  transform: none;
}

/* ============================================================================
   11. ПРОСЬБА УБРАТЬ ДВИЖЕНИЕ

   Для части людей движущиеся элементы — причина головокружения, и система
   об этом знает. Убираем всё, кроме смены цвета.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.fasl *,
  html.fasl *::before,
  html.fasl *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .p-rise { opacity: 1; transform: none; }
}

/* ============================================================================
   10. СОМОНА ПО МАКЕТУ

   Владелец прислал макет из девяти экранов и сказал прямо: на сомоне его не
   видно. Он прав. Приложение я по этому макету собрал, а сомона осталась
   прежней — и рядом это выглядит как два разных продукта.

   Здесь сомона переводится на тот же язык. НЕ в приложение: разворот с видео,
   сезонные сцены, рассказ о платформе, три колонки на большом экране — всё
   это у сайта остаётся, потому что это и есть сайт. Меняется то, из чего
   макет и состоит: как устроена карточка, сколько места занимает заглавие,
   идут ли числа рядом или столбиком, где стоит главное действие.

   Разбор по экранам, что было и что стало:

     утоқ         357 точек заглавия и 213 столбика чисел ДО первого
                  действия. По макету наоборот: обращение одной строкой,
                  сразу карточка «идома диҳед», под ней числа в ряд;
     каталог      карточка в 500 точек высотой, одна на весь экран
                  телефона. По макету — горизонтальная, снимок справа,
                  пять штук видно разом;
     разделы      плашки в три ряда на 250 точек. По макету — одна строка
                  с прокруткой;
     курс         снимок в рамке с полями, метки в два ряда. По макету —
                  снимок во всю ширину, метки одной строкой.

   Всё, что ниже, — только про вид. Ни одной ссылки, ни одной кнопки, ни
   одного числа этот раздел не добавляет и не убирает.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   10.1 КАРТОЧКА «ИДОМА ДИҲЕД» — ГЛАВНОЕ, ЧТО ЕСТЬ В УТОҚЕ

   На всех ширинах, а не только на телефоне: это единственное место, где
   человеку говорят, что делать прямо сейчас, и оно обязано отличаться от
   соседних карточек. Плотная тёмная зелень, снимок курса справа, уходящий
   в неё без края, полоса пешрафта цветом сезона.
   ------------------------------------------------------------------------ */
#eag-stud-page .sd-go {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card) !important;
  background: linear-gradient(135deg, #1E4630 0%, var(--p-forest) 100%) !important;
  border: 0 !important;
  box-shadow: 0 2px 4px rgba(20, 48, 31, .14), 0 12px 34px rgba(20, 48, 31, .18);
}
/* Снимок справа, растворяется в зелени: жёсткий край делил бы карточку
   надвое, а она должна читаться одним куском. */
#eag-stud-page .sd-go > .pic {
  position: absolute !important;
  top: 0; right: 0; bottom: 0; left: auto !important;
  width: 46% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 58%);
  mask-image: linear-gradient(to right, transparent 0%, #000 58%);
}
#eag-stud-page .sd-go > .pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
#eag-stud-page .sd-go > .body {
  position: relative;
  z-index: 2;
  display: block !important;
  /* Текст держится левее снимка: на 46% ширины он бы наехал. */
  max-width: 62%;
  padding: var(--p-5) !important;
}
#eag-stud-page .sd-go .body h2 {
  color: #FFFFFF !important;
  font-size: 19px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: -.3px;
}
#eag-stud-page .sd-go .body .by,
#eag-stud-page .sd-go .body .last {
  color: rgba(255, 255, 255, .74) !important;
}
#eag-stud-page .sd-go .body .last b { color: #FFFFFF !important; }
#eag-stud-page .sd-go .pcline .bar {
  background: rgba(255, 255, 255, .22) !important;
}
#eag-stud-page .sd-go .pcline .bar > * ,
#eag-stud-page .sd-go .pcline .bar::after {
  background: var(--s-i3, var(--s-acc)) !important;
}
#eag-stud-page .sd-go .pcline b { color: #FFFFFF !important; }
/* Кнопка внутри тёмной карточки — светлый обвод, а не заливка: заливка
   сезонным цветом спорит со снимком, обвод читается и на нём. */
#eag-stud-page .sd-go .cta .btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: #FFFFFF !important;
  border-radius: var(--r-btn) !important;
  box-shadow: none !important;
}
#eag-stud-page .sd-go .cta .btn:hover {
  background: rgba(255, 255, 255, .12) !important;
}

/* ---------------------------------------------------------------------------
   10.2 ТЕЛЕФОН
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {

  /* ---- порядок: сначала действие, потом числа --------------------------
     Человек открывает утоқ, чтобы продолжить, а не чтобы посмотреть на свою
     статистику. Столбик чисел стоял выше карточки и отодвигал её за нижний
     край экрана: до неё надо было листать. Меняем местами. Базовый порядок
     задаём всем детям, иначе те, кому его не назначили, уедут наверх. */
  #eag-stud-page { display: flex; flex-direction: column; }
  #eag-stud-page > * { order: 5; }
  #eag-stud-page > .sd-hero { order: 1; }
  /* Ряд с карточкой «идома» — тот, что идёт сразу за числами. Не
     :first-of-type: тип у него DIV, и первым DIV в утоқе стоит заглавие,
     так что правило доставалось не тому. */
  #eag-stud-page > .sd-metrics + .sd-row { order: 2; }
  #eag-stud-page > .sd-metrics { order: 3; }

  /* ---- заглавие в одну строку ------------------------------------------
     Было: 357 точек — снимок сезона, инициалы, кикер, обращение, объяснение
     и кольцо, каждое своей строкой. Стало: обращение слева, кольцо справа,
     остальное убрано. Кольцо остаётся, потому что процент — настоящее число
     и в списке ниже его нет. */
  #eag-stud-page .sd-hero {
    display: flex !important;
    align-items: center;
    gap: var(--p-4);
    min-height: 0 !important;
    padding: var(--p-4) var(--p-5) !important;
  }
  #eag-stud-page .sd-hero .ava { display: none !important; }
  /* Своя нижняя граница ширины у .who — 240 точек: на экране в 320 она
     вместе с кольцом и полями не помещается и толкает заглавие за край. */
  #eag-stud-page .sd-hero .who { flex: 1 1 auto; min-width: 0 !important; }
  #eag-stud-page .sd-hero .who p { display: none !important; }
  #eag-stud-page .sd-hero .who h1 {
    font-size: 23px !important;
    line-height: 1.15 !important;
    margin: 2px 0 0 !important;
  }
  #eag-stud-page .sd-hero .ring {
    flex: 0 0 auto;
    margin: 0 !important;
    transform: scale(.78);
    transform-origin: right center;
  }
  #eag-stud-page .sd-hero .ring .cap { display: none !important; }

  /* ---- три числа в ряд --------------------------------------------------
     Было: три полосы одна под другой, 213 точек. Стало: три плитки рядом,
     как на макете, — 76 точек. Число крупное, подпись над ним мелкая. */
  #eag-stud-page .sd-metrics {
    display: flex !important;
    gap: var(--p-3) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  #eag-stud-page .sd-metrics .metric {
    flex: 1 1 0;
    min-width: 0;
    display: block !important;
    padding: var(--p-3) !important;
    background: var(--p-surface) !important;
    border: 1px solid var(--p-rule) !important;
    border-radius: var(--r-2, 14px) !important;
    text-align: left;
  }
  #eag-stud-page .sd-metrics .metric .box { display: none !important; }
  #eag-stud-page .sd-metrics .metric b,
  #eag-stud-page .sd-metrics .metric strong {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
  #eag-stud-page .sd-metrics .metric small,
  #eag-stud-page .sd-metrics .metric span > span {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }

  /* ---- карточка «идома» на телефоне ------------------------------------
     Снимок уже без края; текст занимает больше ширины, потому что экран
     узкий и держать 62% незачем. */
  #eag-stud-page .sd-go > .body { max-width: 72%; padding: var(--p-4) !important; }
  #eag-stud-page .sd-go .body h2 { font-size: 17.5px !important; }
  #eag-stud-page .sd-go > .pic { width: 42% !important; }

  /* ---- каталог: карточка ложится набок ---------------------------------
     Было: снимок в 500 точек и текст под ним — одна карточка на весь экран,
     шесть курсов это шесть экранов прокрутки. Стало: снимок справа
     квадратом, текст слева. Пять карточек видно разом, как на макете. */
  html.fasl .sb-card[code-path^="src/pages/Courses.tsx:53:"] {
    display: grid !important;
    grid-template-columns: 1fr 116px;
    align-items: stretch;
    min-height: 116px;
    /* h-full у сборки тянет карточку на всю высоту ячейки, а ячейку меряет
       снимок — получалось 240 точек пустоты вокруг двух строк текста.
       Снимаем растяжку и с карточки, и с её обёртки: высоту назначает текст. */
    height: auto !important;
  }
  html.fasl .relative[code-path^="src/pages/Courses.tsx:52:"] { height: auto !important; }
  /* СНИМОК — КВАДРАТ С ЗАДАННОЙ СТОРОНОЙ, И ЭТО НЕ УПРЯМСТВО.

     Пока обёртка снимка тянулась по строке (align-self:stretch), высота
     строки и высота обёртки определяли друг друга. Chrome выходит из этого
     круга числом 240 — то есть карточка вырастала втрое от нужного, а
     вокруг двух строк текста оставалась пустота. Проверено измерением:
     стоит снять растяжку, карточка становится 118 точек, как на макете.

     Поэтому: сторона 116, растяжки нет, а колонка с текстом получает ту же
     нижнюю границу — тогда у короткой карточки снимок и текст равны. */
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:54:"] {
    grid-column: 2; grid-row: 1;
    align-self: start;
    height: 116px !important;
    min-height: 0 !important;
  }
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:54:"] > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:57:"] {
    grid-column: 1; grid-row: 1;
    padding: var(--p-4) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 116px;
  }
  /* Описание на карточке телефона не помещается и не нужно: человек решает
     по названию, устоду и разделу, а подробности — на странице курса. */
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:67:"] { display: none !important; }
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:66:"] {
    font-size: 15.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:58:"] { margin: 0 0 2px !important; }
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:68:"] { margin: 2px 0 0 !important; }
  /* Стрелка в углу карточки на телефоне лишняя: карточка и так вся нажимаема,
     а стрелка отнимает место у имени устода. */
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:68:"] > svg { display: none !important; }

  /* ---- заглавие каталога влево -----------------------------------------
     Было: по центру, с подчёркиванием под ним. По макету — крупная строка у
     левого края, как у всех разделов приложения. */
  html.fasl [code-path^="src/pages/Courses.tsx:31:"] {
    text-align: left !important;
    font-size: 26px !important;
    margin-bottom: var(--p-3) !important;
  }
  html.fasl [code-path^="src/pages/Courses.tsx:31:"] + * { margin-left: 0 !important; }

  /* ---- разделы одной строкой -------------------------------------------
     Было: плашки переносились в три ряда и занимали четверть экрана. Стало:
     одна строка с прокруткой пальцем. Полосу прокрутки прячем — на телефоне
     её всё равно не видно, а место она занимает. */
  html.fasl [code-path^="src/pages/Courses.tsx:40:"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px var(--p-4) !important;
    padding: 2px 16px !important;
  }
  html.fasl [code-path^="src/pages/Courses.tsx:40:"]::-webkit-scrollbar { display: none; }
  html.fasl [code-path^="src/pages/Courses.tsx:42:"] {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ---- страница курса ---------------------------------------------------
     Снимок во всю ширину экрана, без полей и без рамки: на макете он
     упирается в края, и именно это делает страницу похожей на приложение,
     а не на документ. Метки — одной строкой с прокруткой. */
  html.fasl [code-path^="src/pages/CourseDetail.tsx:88:"] {
    /* Ровно на ширину поля страницы, а не на глаз: поле здесь 16 точек,
       и вычитать надо его же. С --p-5 (24) снимок вылезал на восемь точек
       за края и обрезался. */
    margin: 0 -16px var(--p-4) !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    border-radius: 0 !important;
    height: 232px !important;
  }
  html.fasl [code-path^="src/pages/CourseDetail.tsx:91:"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px var(--p-3) !important;
    padding: 0 16px !important;
  }
  html.fasl [code-path^="src/pages/CourseDetail.tsx:91:"]::-webkit-scrollbar { display: none; }
  html.fasl [code-path^="src/pages/CourseDetail.tsx:91:"] > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  html.fasl [code-path^="src/pages/CourseDetail.tsx:101:"] {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin-bottom: var(--p-3) !important;
  }
}