/* ============================================================================
   Дизайн-система Mini App (PRD v2.0, раздел «Рекомендации по дизайну»).

   Слои токенов:
     1. `--*-fallback` — фирменная палитра из ТЗ (светлая и тёмная схемы);
     2. `--bg`, `--surface`, ... — рабочие переменные приложения;
     3. тема `default` берёт цвета из Telegram (`var(--tg-theme-*)`),
        кастомные темы из data/themes.json подставляются инлайном в :root.
   ========================================================================== */

/* ── 1. Палитра и токены ─────────────────────────────────────────────────── */
:root {
  /* Светлая схема (ТЗ, таблица «Цветовая палитра») */
  --bg-fallback: #f7f9fc;
  --surface-fallback: #ffffff;
  --surface-2-fallback: #f1f3f7;
  --text-fallback: #1a1a1a;
  --text-secondary-fallback: #6b7280;
  --divider-fallback: #e5e7eb;
  --accent-blue-fallback: #0052cc;
  --accent-red-fallback: #e52420;

  /* Фирменные акценты одинаковы в двух темах */
  --badge-lecture: #e52420;
  --badge-practice: #0052cc;
  --badge-lab: #b45309;
  --badge-neutral: #6b7280;

  /* Модуль отступов 8px и радиусы из ТЗ */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --radius-card: 16px;
  --radius-sheet: 24px;
  --radius-pill: 100px;

  --font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Тайминги анимаций из ТЗ */
  --duration-swipe: 250ms;
  --duration-sheet: 300ms;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  --shadow-fallback: 0 2px 12px rgba(15, 23, 42, 0.07);
  --gradient-fallback: linear-gradient(135deg, #0052cc 0%, #e52420 100%);
  --bg-image-fallback: none;
  /* ТЗ: затемнение под шторкой — 40% чёрного */
  --sheet-overlay: rgba(0, 0, 0, 0.4);
}

:root[data-scheme="dark"] {
  /* Тёмная схема (ТЗ) */
  --bg-fallback: #0d1117;
  --surface-fallback: #161b22;
  --surface-2-fallback: #1c232c;
  --text-fallback: #ffffff;
  --text-secondary-fallback: #8b949e;
  --divider-fallback: #30363d;
  --accent-blue-fallback: #4cabff;
  --accent-red-fallback: #ff6b6b;

  --badge-lecture: #ff6b6b;
  --badge-practice: #4cabff;
  --badge-lab: #f0a04b;
  --badge-neutral: #8b949e;

  --shadow-fallback: 0 2px 14px rgba(0, 0, 0, 0.45);
  --gradient-fallback: linear-gradient(135deg, #4cabff 0%, #ff6b6b 100%);
  --sheet-overlay: rgba(0, 0, 0, 0.4);
}

/* Рабочие переменные: по умолчанию фирменная палитра */
:root {
  --bg: var(--bg-fallback);
  --surface: var(--surface-fallback);
  --surface-2: var(--surface-2-fallback);
  --text: var(--text-fallback);
  --text-secondary: var(--text-secondary-fallback);
  --divider: var(--divider-fallback);
  --accent-blue: var(--accent-blue-fallback);
  --accent-red: var(--accent-red-fallback);
  --shadow: var(--shadow-fallback);
  --gradient-accent: var(--gradient-fallback);
  --bg-image: var(--bg-image-fallback);
}

/* Тема «Системная»: цвета отдаёт Telegram, чтобы приложение выглядело нативно */
:root[data-theme="default"] {
  --bg: var(--tg-theme-bg-color, var(--bg-fallback));
  --surface: var(--tg-theme-secondary-bg-color, var(--surface-fallback));
  --surface-2: var(--tg-theme-section-bg-color, var(--surface-2-fallback));
  --text: var(--tg-theme-text-color, var(--text-fallback));
  --text-secondary: var(--tg-theme-hint-color, var(--text-secondary-fallback));
  --divider: var(--tg-theme-section-separator-color, var(--divider-fallback));
  --accent-blue: var(--tg-theme-button-color, var(--accent-blue-fallback));
  --accent-red: var(--tg-theme-destructive-text-color, var(--accent-red-fallback));
}

/* ── 2. База ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  /*: Вбок страница не «резинится»: от этого содержимое шторок уезжало в сторону. */
  overscroll-behavior-x: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ТЗ: типографика */
.h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
.h3 { margin: 0; font-size: 16px; font-weight: 500; }
.muted { margin: 0; font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.muted--small { font-size: 12px; }

.bg-image {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
}
.bg-image:empty { background-image: none; }

/* ── 3. Каркас ───────────────────────────────────────────────────────────── */
.main {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) calc(120px + env(safe-area-inset-bottom, 0px));
}

.screen { display: flex; flex-direction: column; gap: var(--space-2); }
.screen--center { min-height: 60vh; justify-content: center; align-items: center; text-align: center; }
.screen__footer { display: flex; justify-content: center; }
.bottom-spacer { height: 8px; }

/* ── 4. Шапка ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--space-1) + env(safe-area-inset-top, 0px)) var(--space-2) var(--space-1);
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  transition: background var(--duration-swipe) var(--ease-out);
}

.topbar__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.topbar__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__meta { display: flex; align-items: center; gap: var(--space-1); min-height: 22px; }
.topbar__sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__actions { display: flex; align-items: center; gap: var(--space-1); }

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out);
}
.icon-button:active { transform: scale(0.97); }
.icon-button--flat { width: 36px; height: 36px; background: transparent; box-shadow: none; font-size: 22px; color: var(--text-secondary); }

/* ── 5. Чипсы и бейджи ───────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* ТЗ: фон — 15% прозрачности акцента, текст — 100% акцента */
.pill--lecture { color: var(--badge-lecture); background: color-mix(in srgb, var(--badge-lecture) 15%, transparent); }
.pill--practice { color: var(--badge-practice); background: color-mix(in srgb, var(--badge-practice) 15%, transparent); }
.pill--lab { color: var(--badge-lab); background: color-mix(in srgb, var(--badge-lab) 15%, transparent); }
.pill--neutral { color: var(--badge-neutral); background: color-mix(in srgb, var(--badge-neutral) 15%, transparent); }
.pill--editor { color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 15%, transparent); }
.pill--warning { color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 15%, transparent); }
.pill--blue { color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 15%, transparent); }

/* ── 6. Онбординг ────────────────────────────────────────────────────────── */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); padding: var(--space-3) var(--space-1) var(--space-1); }
.hero__emoji { font-size: 44px; line-height: 1; }
.hero .muted { max-width: 34ch; }

.cards { display: flex; flex-direction: column; gap: 12px; }

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: var(--space-2);
  text-align: left;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 120ms var(--ease-out);
}
.card:active { transform: scale(0.97); }
.card__badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  background: var(--accent-blue);
}
.card__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card__title { font-size: 16px; font-weight: 500; }
.card__meta { font-size: 14px; font-weight: 400; color: var(--text-secondary); }

.step { display: flex; flex-direction: column; gap: var(--space-2); }
.step__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }

.link-button { padding: 6px 2px; font-size: 14px; font-weight: 600; color: var(--accent-blue); }
.link-button:active { opacity: 0.6; }

/* ── 6.1 Недели и дни (референс: крупный номер недели + чипсы, строка дней) ── */
.weekbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.weekbar__current { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.weekbar__number {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text);
}
.weekbar__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}
.weekbar__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.weekbar__tabs::-webkit-scrollbar { display: none; }

.weektab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--surface-2);
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out);
}
.weektab:active { transform: scale(0.97); }
/* Текущая неделя цикла — красная, выбранная — синяя (как в референсе) */
.weektab--current { color: #ffffff; background: var(--accent-red); }
.weektab[aria-selected="true"] { color: #ffffff; background: var(--accent-blue); }

.weekbar__range {
  margin: 6px 2px 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
}

.daystrip {
  display: flex;
  gap: 8px;
  margin-top: var(--space-2);
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.daystrip::-webkit-scrollbar { display: none; }

.daytab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.daytab:active { transform: scale(0.97); }
.daytab__label { font-size: 13px; font-weight: 500; color: var(--text); }
.daytab__date { font-size: 11px; font-weight: 400; color: var(--text-secondary); }
.daytab[aria-selected="true"] { background: var(--accent-blue); }
.daytab[aria-selected="true"] .daytab__label,
.daytab[aria-selected="true"] .daytab__date { color: #ffffff; }
.daytab--today .daytab__label::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent-red);
  vertical-align: middle;
}
.daytab[aria-selected="true"].daytab--today .daytab__label::after { background: #ffffff; }

/* ── 7. Карточка пары ────────────────────────────────────────────────────── */
/*: Лента дней: три панели в ряд, сдвиг следует за пальцем — как домашний экран
 *: телефона. Соседние панели стоят вплотную, поэтому в момент сдвига видно оба
 *: дня: уходящий уезжает за край, приходящий выезжает из-за другого края. */
.schedule-viewport {
  overflow: hidden;
  margin: 12px calc(-1 * var(--space-2)) 0;
  touch-action: pan-y;
}
.schedule {
  display: flex;
  align-items: flex-start;
  will-change: transform;
  backface-visibility: hidden;
}
.schedule--animating { transition: transform var(--duration-swipe) var(--ease-out); }
.schedule__pane {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--space-2);
  /*: Панель перерисовывается отдельно от соседних — свайп не тормозит. */
  contain: layout style;
}
.schedule__hint { padding: 32px 0; text-align: center; }

.lesson {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 120ms var(--ease-out), opacity 200ms var(--ease-out);
}
.lesson:active { transform: scale(0.97); }
.lesson::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--type-color, var(--badge-neutral));
}
.lesson[data-kind="lecture"] { --type-color: var(--badge-lecture); }
.lesson[data-kind="practice"] { --type-color: var(--badge-practice); }
.lesson[data-kind="lab"] { --type-color: var(--badge-lab); }
.lesson[data-kind="neutral"] { --type-color: var(--badge-neutral); }

/* ТЗ: время слева, шрифт Body Secondary, цвет Accent Blue */
.lesson__time { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.lesson__time-start { font-size: 15px; font-weight: 700; color: var(--text); }
.lesson__time-end { font-size: 13px; font-weight: 400; color: var(--text-secondary); }

.lesson__time { border-right: 1px solid var(--divider); padding-right: 12px; }
/* Кабинет: между временем и описанием, без дополнительной разделительной полосы. */
.lesson__room {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent-blue);
  overflow-wrap: anywhere;
}
.lesson__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.lesson__subject { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.lesson__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lesson__note { font-size: 12px; font-weight: 400; color: var(--accent-red); }

/* Состояния пары: отмена, замена, добавление */
.lesson[data-state="cancelled"] { opacity: 0.65; }
.lesson[data-state="cancelled"] .lesson__subject { text-decoration: line-through; }
.lesson[data-state="replaced"] { box-shadow: var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--accent-red) 45%, transparent); }
.lesson[data-state="added"] { box-shadow: var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--accent-blue) 45%, transparent); }

/* ── 7.1 Праздничные украшения темы ──────────────────────────────────────── */
/* Украшение — водяной знак под содержимым карточки: его рисует decor.js, а
   текст (время и тело пары) всегда выше, поэтому расписание читается как
   обычно. Набор задаётся полем "decor" в data/themes.json. */
.lesson__decor {
  position: absolute;
  bottom: 0;
  z-index: 0;
  font-size: 38px;
  line-height: 1;
  opacity: 0.26;
  pointer-events: none;
  user-select: none;
}
.lesson__decor--left { left: 4px; transform: rotate(-10deg); }
.lesson__decor--right { right: 4px; transform: rotate(8deg); }
.lesson__time, .lesson__body { position: relative; z-index: 1; }

/* Киберпанк: не значками, а неоновой подсветкой — карточка подсвечена по контуру,
   полоса типа пары светится своим цветом, время и кабинет — цветом акцента. */
[data-theme="cyberpunk"] .lesson {
  box-shadow: var(--shadow),
              inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 20%, transparent),
              0 0 26px -12px color-mix(in srgb, var(--accent-blue) 80%, transparent);
}
[data-theme="cyberpunk"] .lesson::before { box-shadow: 0 0 12px 1px var(--type-color, var(--badge-neutral)); }
[data-theme="cyberpunk"] .lesson__time-start {
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent-blue) 50%, transparent);
}
[data-theme="cyberpunk"] .lesson__room {
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent-blue) 65%, transparent);
}

/* Дополнение набора: паутина в свободном нижнем углу экрана. */
[data-decor="halloween"] .bg-image::after {
  content: '🕸️';
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 72px;
  line-height: 1;
  opacity: 0.3;
}

/* ── 7.2 Меню и юридическая информация ───────────────────────────────────── */
.menu { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-2); }
.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-align: left;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  transition: transform 120ms var(--ease-out);
}
.menu__item:active { transform: scale(0.98); }
.menu__icon { font-size: 22px; line-height: 1; }
.menu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu__title { font-size: 16px; font-weight: 600; color: var(--text); }
.menu__hint { font-size: 12px; color: var(--text-secondary); }

.legal { border-bottom: 1px solid var(--divider); padding: 10px 0; }
.legal:last-of-type { border-bottom: 0; }
.legal__summary { font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; }
.legal__body { padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.legal__body p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.legal__body b { color: var(--text); font-weight: 600; }
.legal__body code { font-size: 13px; color: var(--text); }
.legal__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ── 8. Нижний бар и шторки ──────────────────────────────────────────────── */
.bottombar-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.bottombar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.08);
  color: var(--text);
  pointer-events: auto;
  transition: transform 120ms var(--ease-out);
}
.bottombar:active { transform: scale(0.97); }
.bottombar__date { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
.bottombar__chevron { color: var(--accent-blue); }

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--sheet-overlay);
  animation: overlayIn 200ms var(--ease-out) both;
}
@media (min-width: 560px) { .sheet-backdrop { align-items: center; padding: 20px; } }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--space-2) var(--space-2) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.24);
  animation: sheetIn var(--duration-sheet) var(--ease-spring) both;
}
@media (min-width: 560px) { .sheet { border-radius: var(--radius-sheet); } }
.sheet--narrow { max-width: 420px; }
.sheet--calendar { padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); }

@keyframes sheetIn {
  from { transform: translateY(24%) scale(0.99); }
  60% { transform: translateY(-1%) scale(1); }
  to { transform: none; }
}

.sheet__grip {
  width: 40px;
  height: 4px;
  margin: -4px auto var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--divider);
  cursor: grab;
}
.sheet__actions { display: flex; gap: 10px; margin-top: var(--space-2); }
.sheet__actions > .button { flex: 1; }
.sheet__actions--stack { flex-direction: column; }

.infolist { margin: var(--space-2) 0 0; display: flex; flex-direction: column; }
.infolist__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.infolist__row:last-child { border-bottom: none; }
.infolist dt { font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.infolist dd { margin: 0; font-size: 16px; font-weight: 500; text-align: right; }

/* ── 9. Календарь ────────────────────────────────────────────────────────── */
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin: var(--space-1) 0 var(--space-2); }
.calendar__month { font-size: 18px; font-weight: 600; }
.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
}
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar__cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out);
}
.calendar__cell:active { transform: scale(0.97); }
.calendar__cell--muted { color: var(--text-secondary); opacity: 0.5; }
.calendar__cell--weekend { color: var(--accent-red); }
.calendar__cell--today { color: #ffffff; background: var(--accent-blue); font-weight: 700; }
.calendar__cell--selected { box-shadow: inset 0 0 0 2px var(--accent-blue); }
.calendar__cell--marked::after {
  content: "";
  position: absolute;
  margin-top: 26px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-red);
}
.calendar__cell { position: relative; }
.calendar__today { margin: var(--space-2) auto 0; }

/* ── 10. Кнопки, формы, уведомления ──────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 14px;
  color: var(--text);
  background: var(--surface-2);
  transition: transform 120ms var(--ease-out), opacity 160ms var(--ease-out);
}
.button:active { transform: scale(0.97); }
.button:disabled { opacity: 0.5; pointer-events: none; }
.button--primary { color: #ffffff; background: var(--accent-blue); }
.button--ghost { background: transparent; color: var(--accent-blue); }
.button--danger { color: #ffffff; background: var(--accent-red); }
.button--dashed { width: 100%; color: var(--accent-blue); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-blue) 45%, transparent); }

.notice {
  margin: var(--space-2) 0 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: var(--accent-red);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-red) 12%, transparent);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 40px var(--space-3);
  margin-top: var(--space-3);
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.empty__emoji { font-size: 40px; }
.empty__title { font-size: 18px; font-weight: 600; }
.empty__text { font-size: 14px; font-weight: 400; color: var(--text-secondary); max-width: 28ch; }

.skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-3); }
.skeleton__row, .skeleton__card {
  border-radius: var(--radius-card);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.skeleton__row { height: 24px; width: 45%; }
.skeleton__card { height: 88px; }
.skeleton__card--short { height: 88px; opacity: 0.7; }

@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  pointer-events: none;
}
.toast {
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border-radius: var(--radius-pill);
  color: #ffffff;
  background: #1f2937;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.28);
  animation: toastIn 200ms var(--ease-out) both;
}
.toast--success { background: #12864b; }
.toast--error { background: #b3261e; }
.toast--leaving { animation: toastOut 180ms ease both; }

@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ── 12. Настройки: выбор темы и режима ──────────────────────────────────── */
.settings__label {
  margin: var(--space-2) 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.themes { display: flex; flex-wrap: wrap; gap: 8px; }

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out);
}
.theme-option:active { transform: scale(0.97); }
.theme-option[aria-pressed="true"] { background: var(--accent-blue); color: #ffffff; }

.theme-option__preview { display: inline-flex; gap: 3px; }
.theme-option__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.theme-option__check { font-size: 13px; }

/* ── 11. Адаптивность и доступность ──────────────────────────────────────── */
@media (max-width: 360px) {
  .lesson { grid-template-columns: 66px minmax(0, 1fr); gap: 10px; }
  .topbar__title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── Подсказки при первом запуске ───────────────────────────────────────────
 *: Затемнение сделано тенью «окна» вокруг нужного элемента: один слой вместо
 *: отдельной маски, поэтому подсветка двигается вместе с ней одной анимацией. */
.coach {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.coach[hidden] {
  display: none;
}

.coach__spot {
  position: absolute;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 9999px rgba(4, 8, 16, 0.62);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}

.coach__card {
  position: absolute;
  width: min(330px, calc(100vw - 24px));
  padding: 16px 16px 12px;
  border-radius: 16px;
  background: var(--tg-theme-secondary-bg-color, #1c1f26);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  animation: coach-in 0.2s ease;
}

@keyframes coach-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.coach__step {
  display: block;
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 4px;
}

.coach__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.coach__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.85;
}

.coach__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.coach__actions .button {
  width: auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* ── Шторки: жесты по горизонтали ──────────────────────────────────────────
 *: Внутри шторки горизонтальные движения ничего не сдвигают: содержимое от этого
 *: уезжало вбок, а прокрутка нужна только вертикальная. Ряды, которые листаются
 *: вбок осознанно (чипсы, темы), сохраняют своё поведение. */
.sheet {
  overflow-x: hidden;
  touch-action: pan-y;
}

.sheet-backdrop { overscroll-behavior: contain; }

.sheet .chips,
.sheet .themes {
  /*: pan-x pan-y, а не только pan-x: иначе вертикальная прокрутка шторки,
     начатая на этом ряду, не работала бы вовсе. */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

/* ── Админ-панель: статистика посещений ───────────────────────────────────── */
.stats__heading {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.75;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stats__tile {
  padding: 12px 6px;
  border-radius: 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.stats__value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.stats__label {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.6;
}

/*: Столбцы наследуют цвет текста темы — палитра не задаётся жёстко. */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 92px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.chart__bar {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent-blue, currentColor);
  opacity: 0.85;
}

.chart--hours .chart__bar {
  opacity: 0.55;
}

.ranks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranks__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ranks__empty {
  padding: 6px 0;
  font-size: 14px;
  opacity: 0.6;
}

/* ── Узкие экраны: ряды кнопок в шторках ───────────────────────────────────
 *: Кнопки переносятся на следующую строку. Без этого ряд выходил за ширину
 *: экрана — и всю шторку можно было увести вбок жестом. */
.sheet__actions {
  flex-wrap: wrap;
}

.sheet__actions .button {
  flex: 1 1 auto;
  min-width: 140px;
}