/* ============================================================================
   ДВОРЕЦ ТВОРЧЕСТВА — современный молодёжный дизайн-систем 2026
   ─────────────────────────────────────────────────────────────────────
   Дизайн-философия:
   • Яркая electric-палитра: violet primary, lime accent, hot coral
   • Bento-grid композиции, asymmetric layouts
   • Glassmorphism + subtle 3D depth
   • Massive display typography (Unbounded variable)
   • Smooth motion — все интеракции через cubic-bezier
   • Полная адаптивность mobile-first
   ========================================================================= */

:root {
  /* ═══ Палитра «Дворец творчества на Стопани» ═══
     Тёплая акварельная гамма с логотипа: бирюза, золото, персик, олива */
  --c-bg:        #FBF8F1;   /* тёплый кремовый фон (акварельная бумага) */
  --c-surface:   #FFFFFF;
  --c-surface-2: #F5EFE2;   /* песочный */
  --c-surface-3: #EBE2CE;   /* тёплый беж */
  --c-ink:       #2C2925;   /* тёплые чернила (контур логотипа) */
  --c-ink-2:     #4A453D;
  --c-muted:     #6F6A5B;
  --c-line:      #EAE2D1;
  --c-line-2:    #DBCFB6;

  /* Primary: бирюза с логотипа (мятное пятно) */
  --c-primary:      #2E7C77; /* v39.21: тон глубже — белый текст на кнопках и тил-ссылки проходят WCAG AA (4.9:1) */
  --c-primary-2:    #27716C;
  --c-primary-3:    #266B66;
  --c-primary-soft: #DCEEEC;
  --c-primary-glow: rgba(46, 124, 119, 0.3);

  /* Accent: тёплый персик (стены замка) */
  --c-accent:      #EE9B7E;
  --c-accent-2:    #E3825F;
  --c-accent-soft: #FBE6DB;

  /* Дополнительные акценты — все из логотипа */
  --c-coral:    #F0A890;   /* персик-роза */
  --c-amber:    #ECC56B;   /* золото замка */
  --c-cyan:     #90C0C0;   /* мятная бирюза-фон */
  --c-pink:     #E3825F;   /* тёплый терракот */
  --c-lime:     #BBD089;   /* олива */
  --c-gold:     #ECC56B;

  /* Семантические — приглушённые под тёплую гамму */
  --c-success:  #5BA889;
  --c-warning:  #E0A93F;
  --c-danger:   #D9694F;
  --c-danger-soft: #FBE5E5; /* v39.21: мягкий фон ошибок (раньше хардкод в JS) */
  --c-info:     #5B9FA8;

  /* Градиенты — мягкие акварельные переходы */
  --grad-primary:  linear-gradient(135deg, #2E7C77 0%, #266B66 100%); /* v39.21: белый текст 4.9–6.2:1 */
  --grad-primary-soft: linear-gradient(135deg, #4FA8A3 0%, #90C0C0 100%); /* для тёмного текста (6.1–8.5:1) */
  --grad-accent:   linear-gradient(135deg, #EE9B7E 0%, #ECC56B 100%);
  --grad-warm:     linear-gradient(135deg, #ECC56B 0%, #F0A890 100%);
  --grad-cool:     linear-gradient(135deg, #90C0C0 0%, #4FA8A3 100%);
  --grad-sunset:   linear-gradient(135deg, #F0A890 0%, #EE9B7E 50%, #ECC56B 100%);
  --grad-mesh:     radial-gradient(at 20% 25%, rgba(144,192,192,0.18) 0px, transparent 55%),
                   radial-gradient(at 78% 28%, rgba(236,197,107,0.16) 0px, transparent 50%),
                   radial-gradient(at 50% 80%, rgba(240,168,144,0.15) 0px, transparent 55%);

  /* Typography */
  --ff-display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --ff-body:    'Onest', 'Inter', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Spacing — modular scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radius */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px;
  --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-full: 999px;

  /* Shadows — мягкие тёплые тени */
  --sh-1: 0 1px 2px rgba(44,41,37,.04), 0 0 0 1px rgba(234,226,209,.6);
  --sh-2: 0 4px 12px rgba(44,41,37,.06), 0 1px 3px rgba(44,41,37,.04);
  --sh-3: 0 12px 32px -8px rgba(44,41,37,.13), 0 4px 12px rgba(44,41,37,.07);
  --sh-4: 0 24px 64px -16px rgba(44,41,37,.18);
  --sh-glow: 0 0 0 4px var(--c-primary-glow);
  --sh-glow-accent: 0 0 0 4px rgba(238,155,126,0.3);

  /* Glass effect */
  --glass-bg: rgba(255, 253, 248, 0.7);
  --glass-blur: saturate(160%) blur(20px);
  --glass-border: 1px solid rgba(255,255,255,0.8);

  /* Animation */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ──────── BASE ──────── */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font: 400 16px/1.55 var(--ff-body);
  color: var(--c-ink);
  background: var(--c-bg);
  background-image: var(--grad-mesh);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 6px; }

::selection { background: var(--c-primary); color: white; }

.skip-link {
  position: absolute; top: -40px; left: var(--s-4);
  background: var(--c-primary); color: white;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 100;
}
.skip-link:focus { top: var(--s-4); }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}
@media (min-width: 768px) { .container { padding: 0 var(--s-6); } }
main { flex: 1; }

/* ──────── TYPOGRAPHY ──────── */
h1, h2, h3, h4, .display {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
h1 { font-size: clamp(2rem, 6vw, 4.5rem); margin: 0; }
h2 { font-size: clamp(1.75rem, 4.5vw, 3rem); margin: 0; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); line-height: 1.2; margin: 0; }
h4 { font-size: 1.1rem; line-height: 1.3; margin: 0; }
p  { margin: 0 0 var(--s-3); }

.display-xl {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.muted { color: var(--c-muted); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 12px;
  background: var(--c-primary-soft);
  color: var(--c-primary-3);
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ──────── HEADER ──────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  height: 72px;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  transition: transform 0.2s var(--ease-bounce);
}
.brand:hover { transform: scale(1.02); }

.brand__mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--grad-primary);
  color: white;
  font-family: var(--ff-display); font-weight: 700; font-size: 0.95rem;
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px var(--c-primary-glow);
  position: relative; overflow: hidden;
}
.brand__mark::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%);
}

.brand__logo {
  width: 48px; height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s var(--ease-bounce);
}
.brand:hover .brand__logo { transform: rotate(-4deg) scale(1.05); }
.brand--footer .brand__logo {
  width: 44px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong { font-family: var(--ff-display); font-weight: 600; font-size: 1rem; }
.brand__text small { color: var(--c-muted); font-size: 0.72rem; }

.main-nav { display: none; gap: var(--s-5); margin-inline: auto; }
.main-nav a {
  position: relative;
  font-size: 0.9rem; font-weight: 500;
  padding: var(--s-2) 0;
  color: var(--c-ink-2);
  transition: color 0.2s var(--ease);
}
.main-nav a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.main-nav a:hover { color: var(--c-primary); }
.main-nav a:hover::after,
.main-nav a.is-active::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--c-primary); }

.header-actions { display: none; gap: var(--s-3); margin-left: auto; align-items: center; }

.burger {
  margin-left: auto; display: flex; flex-direction: column; gap: 5px;
  padding: var(--s-3); border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.burger span {
  width: 22px; height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
.burger[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .main-nav, .header-actions { display: flex; }
  .burger { display: none; }
}

/* v31+v32.20+v32.22: Защита от наезда главного меню на иконки шапки.
 * С 9 пунктами (Направления, Расписание, Мероприятия, Каникулы, Долголетие,
 * Конкурсы, Мастер-классы, Пробные занятия, О нас) меню НЕ помещается
 * рядом с brand+actions на любом десктопе.
 *
 * Решение: на ВСЕХ десктопах (≥1024px) переключаем header на CSS Grid
 * с двумя строками: [brand | actions] сверху, nav на всю ширину снизу.
 * Используем !important чтобы перебить любые конфликтующие правила
 * (например, .site-header__inner { display: flex }), включая на
 * страницах /ticket/, /payment/ и других spa-роутах. */
@media (min-width: 1024px) {
  .site-header__inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "brand   .       actions"
      "nav     nav     nav"     !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    align-items: center !important;
    height: auto !important;
    min-height: 72px !important;
    padding: 10px 0 !important;
  }
  .site-header__inner > .brand          { grid-area: brand; }
  .site-header__inner > .main-nav       { grid-area: nav; }
  .site-header__inner > .header-actions { grid-area: actions; }

  .main-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  .main-nav a {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    padding: 4px 0 !important;
  }
  .main-nav a.is-active {
    padding: 4px 10px !important;
    margin: -4px -10px !important;
  }
  .header-actions { gap: 6px !important; }
}

/* Узкие десктопы — ещё компактнее nav */
@media (min-width: 1024px) and (max-width: 1279px) {
  .main-nav a       { font-size: 0.82rem !important; }
  .main-nav         { gap: 10px !important; }
  .header-actions   { gap: 4px !important; }
  .header-actions .icon-btn { padding: 5px !important; }
  .brand__text small { display: none !important; }
}

/* header-actions всегда не сжимается */
.header-actions { flex-shrink: 0; }

.mobile-menu {
  position: fixed; top: 72px; right: 0; left: 0; bottom: 0;
  background: var(--c-bg);
  padding: var(--s-6) var(--s-5);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  z-index: 40; overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--s-2); }
.mobile-menu nav a {
  font-family: var(--ff-display); font-size: 1.6rem; font-weight: 600;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.mobile-menu nav a:hover { color: var(--c-primary); padding-left: var(--s-3); }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--c-ink-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  transition: all 0.2s var(--ease);
}
.icon-btn:hover {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-color: var(--c-primary);
  transform: translateY(-1px);
}
.icon-btn.is-active {
  background: var(--c-primary); color: white;
  border-color: var(--c-primary);
}

.theme-ico-light, .theme-ico-dark { display: none; }
html[data-theme="light"] .theme-ico-dark,
html[data-theme="auto"] .theme-ico-dark { display: block; }
html[data-theme="dark"] .theme-ico-light { display: block; }

/* ──────── BUTTONS ──────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 12px 24px;
  border-radius: var(--r-full);
  font-weight: 600; font-size: 0.92rem;
  transition: all 0.25s var(--ease);
  white-space: nowrap; user-select: none;
  border: 1px solid transparent;
  position: relative; overflow: hidden;
}
.btn--primary {
  background: var(--grad-primary);
  color: white;
  box-shadow: 0 4px 14px var(--c-primary-glow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--c-primary-glow);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn--ghost:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn--accent {
  background: var(--c-accent);
  color: var(--c-ink);
  box-shadow: 0 4px 14px rgba(238,155,126,0.4);
}
.btn--accent:hover { background: var(--c-accent-2); transform: translateY(-2px); }

.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--sm { padding: 8px 16px; font-size: 0.85rem; }

.btn--icon-right svg { transition: transform 0.2s var(--ease); }
.btn--icon-right:hover svg { transform: translateX(4px); }

/* ──────── CARDS ──────── */
.card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.2s;
  position: relative; overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--c-primary);
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.card:hover::before { transform: scaleX(1); }

.card__category {
  display: inline-flex; align-self: flex-start;
  padding: 4px 12px;
  background: var(--c-surface-2);
  color: var(--c-primary-3); /* v39.21: 5.4:1 на песочном */
  border-radius: var(--r-full);
  font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--s-3);
}
.card__title {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.2rem; line-height: 1.25;
  margin: 0 0 var(--s-2);
}
.card__desc {
  font-size: 0.9rem; line-height: 1.5;
  color: var(--c-muted);
  margin: 0 0 var(--s-4);
  flex: 1;
}
.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  font-size: 0.8rem;
  margin-top: auto;
}
.card__pill {
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--c-surface-2);
  font-weight: 500;
}
.card__pill--budget { background: #E2F1E9; color: #2F6E55; } /* v39.21: пара 5.2:1 (была зелень на розовом 2.4:1) */
html[data-theme="dark"] .card__pill--budget { background: #1E3A2E; color: #9BD8BA; }
.card__pill--paid   { background: rgba(252,211,77,0.2); color: #92400E; }
.card__seats { color: var(--c-muted); }
.card__seats--full { color: #B6402F; font-weight: 600; /* v39.26: 5.6:1 на карточке, 4.7 в зоне вуали (danger давал 3.4–4.1) */ }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* ──────── HERO + BENTO HOME ──────── */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  position: relative;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--s-9); }
}
.hero__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: 0.95; letter-spacing: -0.04em;
  margin: var(--s-4) 0 var(--s-5);
}
.hero__lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--c-muted);
  max-width: 560px;
  margin-bottom: var(--s-6);
  line-height: 1.5;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}

/* Bento grid визуальная панель в hero */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 120px);
  gap: var(--s-3);
  position: relative;
}
.bento__cell {
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease);
}
.bento__cell:hover { transform: scale(1.03) rotate(-1deg); }
.bento__cell__icon { font-size: 1.8rem; }
.bento__cell__num {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}
.bento__cell__lbl {
  font-size: 0.78rem; font-weight: 500;
  opacity: 0.85;
}
.bento__cell--1 { grid-column: 1; grid-row: 1 / span 2;
  background: var(--grad-primary); color: white; }
.bento__cell--2 { grid-column: 2; grid-row: 1;
  background: var(--c-accent); color: var(--c-ink); }
.bento__cell--3 { grid-column: 2; grid-row: 2;
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); }
.bento__cell--4 { grid-column: 1; grid-row: 3;
  background: var(--c-amber); color: var(--c-ink); }
.bento__cell--5 { grid-column: 2; grid-row: 3;
  background: var(--grad-cool); color: white; }

/* ──────── SECTIONS ──────── */
.section { padding: var(--s-8) 0; }
.section--lg { padding: var(--s-9) 0; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.section__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  line-height: 1.05; letter-spacing: -0.025em;
  margin: var(--s-3) 0 0;
  max-width: 740px;
}
.section__subtitle {
  font-size: 1.05rem; color: var(--c-muted);
  max-width: 560px; margin-top: var(--s-3);
}

/* ──────── HORIZONTAL SCROLL CATEGORIES ──────── */
.cat-scroll {
  display: flex; gap: var(--s-4);
  overflow-x: auto; padding-bottom: var(--s-3);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cat-scroll::-webkit-scrollbar { height: 6px; }
.cat-scroll::-webkit-scrollbar-track { background: var(--c-surface-2); border-radius: 3px; }
.cat-scroll::-webkit-scrollbar-thumb { background: var(--c-primary); border-radius: 3px; }

.cat-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  min-height: 200px;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  transition: all 0.3s var(--ease);
}
.cat-card:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  border-color: transparent;
  box-shadow: var(--sh-3);
}
.cat-card__icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 1.6rem;
  margin-bottom: var(--s-4);
  transition: transform 0.3s var(--ease-bounce);
}
.cat-card:hover .cat-card__icon { transform: rotate(-8deg) scale(1.1); }

.cat-card__title {
  font-family: var(--ff-display); font-size: 1.15rem; font-weight: 600;
  margin: 0 0 var(--s-2);
}
.cat-card__count {
  font-size: 0.85rem; color: var(--c-muted);
  display: flex; align-items: center; gap: var(--s-2);
}
.cat-card__count::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-accent);
}

/* Палитра для категорий — каждой свой акцент */
.cat-card[data-cat="art"]      { --cc-bg: linear-gradient(135deg, #F0A890 0%, #ECC56B 100%); }
.cat-card[data-cat="tech"]     { --cc-bg: linear-gradient(135deg, #4FA8A3 0%, #90C0C0 100%); }
.cat-card[data-cat="sport"]    { --cc-bg: linear-gradient(135deg, #5BA889 0%, #EE9B7E 100%); }
.cat-card[data-cat="science"]  { --cc-bg: linear-gradient(135deg, #5B9FA8 0%, #4FA8A3 100%); }
.cat-card[data-cat="lang"]     { --cc-bg: linear-gradient(135deg, #E3825F 0%, #E0A93F 100%); }
.cat-card[data-cat="default"]  { --cc-bg: var(--grad-primary); }

.cat-card__icon[data-cat-bg] { background: var(--cc-bg, var(--c-primary-soft)); color: white; }

/* ──────── FILTERS ──────── */
.filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  background: var(--c-surface);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  margin-bottom: var(--s-6);
}
@media (min-width: 768px) {
  .filters { grid-template-columns: 1.2fr repeat(3, 1fr) auto; }
}

.filter label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--c-muted); margin-bottom: 4px; }
.filter input,
.filter select {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink); font-size: 0.92rem;
  font-family: inherit;
  transition: all 0.2s var(--ease);
}
.filter input:focus,
.filter select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
.filter select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237C3AED' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* ──────── PROGRAM HERO (детальная страница) ──────── */
.program-hero {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
  padding: var(--s-7) 0;
}
@media (min-width: 1024px) { .program-hero { grid-template-columns: 2fr 1fr; gap: var(--s-7); } }

.program-hero__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.025em;
  margin: var(--s-4) 0;
}

.program-side {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
  position: sticky; top: calc(72px + var(--s-4));
  height: max-content;
}
.program-side dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  font-size: 0.92rem;
}
.program-side dt { color: var(--c-muted); }
.program-side dd { margin: 0; font-weight: 500; }
.program-side hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-4) 0; }

.event-date {
  background: var(--grad-primary); color: white;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  font-family: var(--ff-display); font-weight: 600;
  text-align: center;
}

/* ──────── PANEL ──────── */
.panel {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.panel__title {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.1rem; margin: 0 0 var(--s-3);
}

/* ──────── EMPTY ──────── */
.empty {
  text-align: center; padding: var(--s-9) var(--s-5);
  background: var(--c-surface); border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
}
.empty h3 { margin: 0 0 var(--s-2); font-family: var(--ff-display); }

/* ──────── SCHEDULE WEEK GRID ──────── */
.week-schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (min-width: 980px) {
  .week-schedule {
    grid-template-columns: repeat(7, 1fr);
    gap: var(--s-2);
  }
}

.week-day {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  min-height: 200px;
  transition: border-color 0.2s var(--ease);
}
.week-day:hover { border-color: var(--c-primary); }
.week-day__title {
  font-family: var(--ff-display);
  /* v32.4: уменьшаем шрифт + разрешаем перенос на следующую строку,
     чтобы «ПОНЕДЕЛЬНИК» не обрезался в узких колонках */
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-line);
  margin-bottom: var(--s-3);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 4px;
  word-break: keep-all;
  line-height: 1.2;
}
.week-day__title.is-today {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.week-day__title.is-today::after {
  content: 'Сегодня'; font-size: 0.65rem;
  background: var(--c-primary); color: white;
  padding: 2px 8px; border-radius: var(--r-full);
  text-transform: none; letter-spacing: 0;
  flex-shrink: 0;
}
.week-day__lesson {
  display: block;
  padding: var(--s-3);
  font-size: 0.82rem; line-height: 1.4;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  margin-bottom: var(--s-2);
  border-left: 3px solid var(--c-primary);
  transition: all 0.2s var(--ease);
  text-decoration: none; color: inherit;
}
.week-day__lesson:hover {
  background: var(--c-primary-soft);
  transform: translateX(4px);
}
.week-day__lesson__time {
  font-family: var(--ff-display); font-weight: 600; font-size: 0.85rem;
  color: var(--c-primary-3);
  display: block;
  margin-bottom: 2px;
  word-break: break-word;
}

/* v32.26: Кнопка-toggle «Показать ещё N / Свернуть» в ячейке дня расписания.
 * Кликабельная, со стрелочкой, hover-эффектом. */
.week-day__more {
  display: block; width: 100%;
  padding: 8px 10px;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--c-line);
  border-radius: 8px;
  color: var(--c-primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.week-day__more:hover {
  background: rgba(78, 184, 174, 0.08);
  border-color: var(--c-primary);
  border-style: solid;
  color: var(--c-primary);
}
.week-day__more:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.week-day__more[aria-expanded="true"] {
  background: rgba(78, 184, 174, 0.06);
  border-style: solid;
}

/* Тёмная тема */
html[data-theme="dark"] .week-day__more {
  border-color: rgba(255, 255, 255, 0.15);
  color: #6FDDD0;
}
html[data-theme="dark"] .week-day__more:hover,
html[data-theme="dark"] .week-day__more[aria-expanded="true"] {
  background: rgba(78, 184, 174, 0.14);
  border-color: #6FDDD0;
  color: #8CE8DC;
}

/* Контейнер занятий в ячейке — для удобной поддержки expand */
.week-day__lessons {
  display: flex; flex-direction: column; gap: 6px;
}

/* v32.4: переключатель режимов в /schedule */
.schedule-mode-tabs {
  display: flex; gap: 8px; justify-content: center;
  margin: 24px 0 20px; flex-wrap: wrap;
}
.schedule-mode-tabs button {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--c-line); background: transparent;
  font-size: .9rem; cursor: pointer; transition: all .15s var(--ease);
  color: var(--c-ink-2);
}
.schedule-mode-tabs button.is-active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  font-weight: 600;
}
.schedule-mode-tabs button:not(.is-active):hover {
  background: var(--c-surface-2);
}

/* v32.4: фильтр дат + список по датам */
.schedule-date-filter {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin-bottom: 24px;
  padding: 14px 18px; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: 12px;
}
.schedule-date-filter label {
  display: flex; align-items: center; gap: 6px;
  font-size: .88rem; color: var(--c-ink-2);
}
.schedule-date-filter input[type="date"],
.schedule-date-filter input[type="month"] {
  padding: 6px 10px; border: 1px solid var(--c-line);
  border-radius: 6px; font-size: .9rem;
  background: var(--c-surface);
}
.schedule-date-filter .preset-btns {
  display: flex; gap: 4px;
}
.schedule-date-filter .preset-btns button {
  padding: 4px 10px; border: 1px solid var(--c-line);
  background: transparent; border-radius: 6px;
  font-size: .82rem; cursor: pointer;
}
.schedule-date-filter .preset-btns button:hover {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

.schedule-by-date__day {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
}
.schedule-by-date__date {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.05rem;
  color: var(--c-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
  text-transform: capitalize;
}
.schedule-by-date__event {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 0;
}
.schedule-by-date__time {
  font-family: monospace; font-weight: 600; font-size: .9rem;
  color: var(--c-ink-2);
}
.schedule-by-date__title {
  color: inherit; text-decoration: none; font-weight: 500;
}
.schedule-by-date__title:hover { color: var(--c-primary); }
.schedule-by-date__kind {
  font-size: .72rem; padding: 2px 8px; border-radius: 999px;
  background: var(--c-surface-2); white-space: nowrap;
}
.schedule-by-date__kind--event    { background: rgba(78,184,174,.15);  color: var(--c-primary); }
.schedule-by-date__kind--holiday  { background: rgba(255,168,82,.15);  color: #d97706; }
.schedule-by-date__kind--workshop { background: rgba(168,108,255,.15); color: #8b5cf6; }
.schedule-by-date__kind--longevity{ background: rgba(231,109,109,.15); color: #dc2626; }

/* ──────── CONTEST CARD ──────── */
.contest-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column;
  transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
}
.contest-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
}
.contest-card::before {
  content: ''; position: absolute; top: 0; right: -40px; width: 80px; height: 80px;
  background: var(--c-accent); opacity: 0.15; border-radius: 50%;
  transform: scale(0); transition: transform 0.4s var(--ease-bounce);
}
.contest-card:hover::before { transform: scale(1); }

.contest-card__type {
  display: inline-flex; align-self: flex-start;
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--c-primary); color: white;
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--s-3);
}
.contest-card__type--olympiad   { background: var(--c-primary); }
.contest-card__type--festival   { background: var(--c-pink); color: #4A1F0F; }
.contest-card__type--exhibition { background: var(--c-cyan); color: var(--c-ink); }
.contest-card__type--tournament { background: var(--c-success); color: #0F3527; }
.contest-card__type--competition{ background: var(--c-amber); color: var(--c-ink); }

.contest-card__level {
  font-size: 0.78rem; color: var(--c-muted);
  margin-top: var(--s-2);
}

.contest-deadline {
  background: var(--grad-warm);
  color: var(--c-ink);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: 0.85rem; font-weight: 600;
  text-align: center; margin-top: var(--s-3);
}

/* ──────── HOLIDAY CARD ──────── */
.holiday-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: all 0.3s var(--ease);
}
.holiday-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
}
.holiday-card__season {
  position: absolute; top: var(--s-4); right: var(--s-4);
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.holiday-card__dates {
  font-family: var(--ff-display); font-size: 1.05rem; font-weight: 600;
  color: var(--c-primary-3);
  margin: var(--s-3) 0;
  display: inline-block;
  padding: 6px 14px;
  background: var(--c-primary-soft);
  border-radius: var(--r-sm);
}
.holiday-card[data-season="autumn"]   { border-top: 4px solid #DD7B26; }
.holiday-card[data-season="winter"]   { border-top: 4px solid #5B7A96; }
.holiday-card[data-season="new_year"] { border-top: 4px solid #B85450; }
.holiday-card[data-season="spring"]   { border-top: 4px solid #5BAA7C; }
.holiday-card[data-season="summer"]   { border-top: 4px solid #E87A3E; }

/* ──────── BRANCH CARD ──────── */
.branch-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  transition: all 0.3s var(--ease);
}
.branch-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--sh-3);
  transform: translateY(-2px);
}
.branch-card__metro {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.85rem; color: var(--c-muted);
}
.branch-card__metro::before {
  content: 'M'; width: 20px; height: 20px;
  border-radius: 50%; background: var(--c-danger); color: white;
  font-weight: 700; font-size: 0.72rem;
  display: grid; place-items: center;
}
.branch-card__counts {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-size: 0.85rem; color: var(--c-muted);
}
.branch-card__counts strong { color: var(--c-ink); font-size: 1rem; font-family: var(--ff-display); }

/* ──────── INCLUSIVE BADGE ──────── */
.inclusive-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--c-info); color: white;
  font-size: 0.7rem; font-weight: 600;
}
.inclusive-badge::before { content: '♿'; }

/* ──────── BG ICONS ──────── */
.bg-icons {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.05;
  overflow: hidden;
}
.bg-icons__item {
  position: absolute;
  font-size: 32px; color: var(--c-primary);
  animation: float 60s linear infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(20px, -30px) rotate(8deg); }
  50%      { transform: translate(-10px, 20px) rotate(-5deg); }
  75%      { transform: translate(15px, 10px) rotate(12deg); }
}

/* ──────── FOOTER ──────── */
.site-footer {
  background: var(--c-ink);
  color: rgba(255,255,255,0.85);
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-9);
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; top: -50%; right: -10%;
  width: 600px; height: 600px;
  background: var(--grad-primary);
  opacity: 0.1;
  border-radius: 50%;
  filter: blur(80px);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  position: relative;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1.5fr repeat(3, 1fr); }
}
.site-footer__col h4 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 0.95rem; margin: 0 0 var(--s-3);
  color: white;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--s-2); }
.site-footer__col a {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  transition: color 0.2s var(--ease);
}
.site-footer__col a:hover { color: var(--c-accent); }
.site-footer__copy {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem; color: rgba(255,255,255,0.5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
}

.brand--footer .brand__mark { background: var(--grad-primary); }
.brand--footer .brand__text strong { color: white; }
.brand--footer .brand__text small { color: rgba(255,255,255,0.6); }

.social-links { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.social-links a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  transition: all 0.2s var(--ease);
}
.social-links a:hover { background: var(--c-primary); transform: translateY(-2px); }

/* ──────── TOAST ──────── */
.toast-host {
  position: fixed; bottom: var(--s-5); right: var(--s-5);
  z-index: 100; display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none;
}
.toast {
  background: var(--c-ink); color: white;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  box-shadow: var(--sh-3);
  animation: toastIn 0.3s var(--ease);
  max-width: 320px;
  pointer-events: auto;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* ──────── MODAL ──────── */
[data-modal] {
  border: 0; padding: 0;
  background: transparent;
  width: min(560px, 92vw);
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
  margin: auto;
}
[data-modal]::backdrop {
  background: rgba(11,11,20,0.55);
  backdrop-filter: blur(8px);
}
/* v39.21 (аудит): блокируем прокрутку фона, пока открыт нативный <dialog>
   (для .modal-backdrop аналог уже есть — body.modal-open). :has не поддержан → правило игнорируется. */
html:has([data-modal][open]), body:has([data-modal][open]) { overflow: hidden; }
.modal__inner {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Админ-формы добавляются прямо в <dialog> (без .modal__inner) — делаем шире (×2) */
[data-modal]:has(.admin-form),
[data-modal]:has(.modal-form-wide) { width: min(1040px, 96vw); }
/* v39.24: модалки с .modal__inner (записавшиеся, промокоды опросов и т.п.)
   упирались в width:560px самого <dialog> — инлайновый max-width:960px у inner
   не работал, таблицы сжимались до горизонтального скролла. Даём диалогу
   подстроиться под inner; для старых браузеров без :has остаётся база 560. */
[data-modal]:has(.modal__inner) { width: auto; max-width: 96vw; }
.modal__inner { min-width: min(560px, 92vw); }
/* Заголовки модалок — всегда основными чернилами темы (страховка обеих тем) */
[data-modal] h2, [data-modal] h3 { color: var(--c-ink); }
/* Плавающая кнопка закрытия, добавляемая в любой [data-modal] */
[data-modal] > .modal__close { position: absolute; top: 12px; right: 14px; z-index: 5; }

/* === Тёмная тема: единый контраст полей во всех формах/модалках === */
html[data-theme="dark"] .modal-card { color: var(--c-ink); }
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .trial-form input,
html[data-theme="dark"] .trial-form textarea,
html[data-theme="dark"] .trial-form select,
html[data-theme="dark"] .modal-card input,
html[data-theme="dark"] .modal-card textarea,
html[data-theme="dark"] .modal-card select,
html[data-theme="dark"] [data-modal] input,
html[data-theme="dark"] [data-modal] textarea,
html[data-theme="dark"] [data-modal] select,
html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .form-row textarea,
html[data-theme="dark"] .form-row select {
  background: var(--c-surface-2) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-line-2);
}
html[data-theme="dark"] .contact-form input::placeholder,
html[data-theme="dark"] .contact-form textarea::placeholder,
html[data-theme="dark"] .modal-card input::placeholder,
html[data-theme="dark"] .modal-card textarea::placeholder,
html[data-theme="dark"] [data-modal] input::placeholder,
html[data-theme="dark"] [data-modal] textarea::placeholder {
  color: var(--c-muted);
}
html[data-theme="dark"] .contact-form select option,
html[data-theme="dark"] .modal-card select option,
html[data-theme="dark"] [data-modal] select option {
  background: var(--c-surface-2);
  color: var(--c-ink);
}
/* <select> в форме записи получают такой же вид, как остальные поля */
.contact-form select {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  font-family: var(--ff-body); font-size: 1rem;
}
.modal__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-surface-2);
  font-size: 1.4rem; line-height: 1;
}
.modal__close:hover { background: var(--c-danger); color: white; }
.modal__title {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.4rem; margin: 0 0 var(--s-3);
}

/* ──────── FORMS ──────── */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } }

.form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row label { font-size: 0.85rem; font-weight: 500; color: var(--c-ink-2); }
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  transition: all 0.2s var(--ease);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
.form-row textarea { min-height: 80px; resize: vertical; }

/* v32.40: строки согласия (регистрация) */
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--c-ink-2);
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  cursor: pointer;
}
.consent-row a { color: var(--c-primary); text-decoration: underline; }

/* ──────── UTILS ──────── */
.text-center { text-align: center; }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

.flex { display: flex; gap: var(--s-3); }
.flex--wrap { flex-wrap: wrap; }
.flex--center { align-items: center; justify-content: center; }

/* Stat block — анимированные счётчики для главной/about */
.stat {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
  text-align: left;
}
.stat__num {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1; letter-spacing: -0.04em;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat__lbl {
  font-size: 0.92rem; color: var(--c-muted); margin-top: var(--s-2);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ──────── ABOUT PAGE ──────── */
.about-hero {
  padding: var(--s-9) 0 var(--s-7);
  position: relative;
}
.about-hero__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.95; letter-spacing: -0.04em;
  margin: var(--s-4) 0;
  max-width: 900px;
}
.values {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-6);
  transition: all 0.3s var(--ease);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--c-primary); }
.value-card__icon {
  width: 60px; height: 60px; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 1.6rem;
  margin-bottom: var(--s-4);
  background: var(--c-primary-soft); color: var(--c-primary);
  transition: transform 0.3s var(--ease-bounce);
}
.value-card:hover .value-card__icon { transform: rotate(-10deg) scale(1.1); }
.value-card h3 { margin: 0 0 var(--s-2); font-family: var(--ff-display); }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: var(--s-5); position: relative; padding-left: var(--s-5); }
.timeline::before {
  content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px; background: var(--c-line); border-radius: 1px;
}
.timeline__item { position: relative; padding-bottom: var(--s-4); }
.timeline__item::before {
  content: ''; position: absolute; left: -19px; top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-soft);
}
.timeline__year {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.4rem; color: var(--c-primary);
  display: block; margin-bottom: 4px;
}

/* ──────── DARK THEME ──────── */
html[data-theme="dark"] {
  --c-bg:        #16140F;
  --c-surface:   #211E18;
  --c-surface-2: #2B2720;
  --c-surface-3: #38332A;
  --c-ink:       #F6F1E6;
  --c-ink-2:     #DDD6C5;
  --c-muted:     #968E7C;
  --c-line:      #38332A;
  --c-line-2:    #48422F;
  --c-primary:      #6FC4BF;
  --c-primary-2:    #4FA8A3;
  --c-primary-3:    #9BD8D3; /* v39.21: текст-акценты на тёмном (8+:1); тёмный вариант для светлых плашек задаётся точечно */
  --c-primary-soft: #1E3937;
  --c-primary-glow: rgba(111, 196, 191, 0.3);
  --grad-primary: linear-gradient(135deg, #2E7C77 0%, #266B66 100%); /* v39.21: белый текст 4.9–6.2:1 */
  --grad-primary-soft: linear-gradient(135deg, #6FC4BF 0%, #ECC56B 100%);
  --c-danger-soft: #3A211C;
  --glass-bg: rgba(33, 30, 24, 0.7);
  --glass-border: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="dark"] body {
  background-image:
    radial-gradient(at 20% 30%, rgba(111,196,191,0.06) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(236,197,107,0.05) 0px, transparent 50%);
}
html[data-theme="dark"] .site-footer { background: #100E0A; }
html[data-theme="dark"] .filter select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236FC4BF' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
}
html[data-theme="dark"] .burger { background: var(--c-surface); }
html[data-theme="dark"] .burger span { background: var(--c-ink); }
html[data-theme="dark"] .icon-btn { background: var(--c-surface); border-color: var(--c-line); }

/* ──────── ACCESSIBILITY MODE ──────── */
html[data-aria="1"] {
  --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-surface-2: #F0F0F0;
  --c-ink: #000000; --c-ink-2: #000000; --c-muted: #1F1F1F;
  --c-line: #000000; --c-line-2: #000000;
  --c-primary: #000C5F; --c-primary-2: #000C5F; --c-primary-soft: #E8EAF8;
  --c-primary-glow: rgba(0, 12, 95, 0.4);
  --c-accent: #FFFF00; --c-accent-2: #DDDD00; --c-accent-soft: #FFFFCC;
  --grad-primary: #000C5F;
  --grad-primary-soft: #E8EAF8;
  --grad-accent: #FFFF00;
  --grad-warm: #FF8000;
  --glass-bg: rgba(255,255,255,1);
  font-size: 18px;
}
html[data-aria="1"] body {
  background: white !important;
  background-image: none !important;
}
html[data-aria="1"] * { letter-spacing: 0.02em !important; }
html[data-aria="1"] h1, html[data-aria="1"] h2, html[data-aria="1"] h3,
html[data-aria="1"] .display, html[data-aria="1"] .hero__title {
  font-family: var(--ff-body) !important; font-weight: 700 !important;
}
html[data-aria="1"] .card,
html[data-aria="1"] .panel,
html[data-aria="1"] .filters,
html[data-aria="1"] .program-side,
html[data-aria="1"] .week-day,
html[data-aria="1"] .contest-card,
html[data-aria="1"] .holiday-card,
html[data-aria="1"] .branch-card,
html[data-aria="1"] .stat,
html[data-aria="1"] .value-card,
html[data-aria="1"] .cat-card { border-width: 2px !important; }
html[data-aria="1"] a { text-decoration: underline; }
html[data-aria="1"] .btn { border-width: 2px; font-weight: 700; }
html[data-aria="1"] .bg-icons { display: none; }
html[data-aria="1"] .gradient-text { background: none; color: var(--c-ink) !important; -webkit-text-fill-color: var(--c-ink) !important; }

html[data-font="large"]  { font-size: 18px; }
html[data-font="xlarge"] { font-size: 20px; }

/* ──────── SEARCH DIALOG ──────── */
.search-dialog {
  border: 0; padding: 0; background: transparent;
  width: min(680px, 92vw);
  max-height: 80vh; border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
  margin-top: 8vh;
}
.search-dialog::backdrop {
  background: rgba(11,11,20,0.55);
  backdrop-filter: blur(8px);
}
.search-dialog__inner {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.search-dialog__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
}
.search-dialog__input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: 500 1.05rem/1.4 var(--ff-body);
  color: var(--c-ink);
  padding: var(--s-2) 0;
}
.search-dialog__results {
  overflow-y: auto;
  padding: var(--s-3);
}
.search-dialog__hint {
  padding: var(--s-5);
  text-align: center;
  color: var(--c-muted);
  font-size: 0.92rem;
}
.search-dialog__group { margin-bottom: var(--s-3); }
.search-dialog__group__title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  color: var(--c-primary);
  letter-spacing: 0.08em;
  padding: var(--s-2) var(--s-3);
}
.search-dialog__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3); border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: background 0.15s var(--ease);
}
.search-dialog__item:hover {
  background: var(--c-primary-soft);
}
.search-dialog__item__title { font-weight: 600; color: var(--c-ink); }
.search-dialog__item__sub { font-size: 0.82rem; color: var(--c-muted); }
.search-dialog__item__snippet {
  font-size: 0.85rem; color: var(--c-ink-2);
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 480px) {
  .search-dialog { margin-top: 0; max-height: 100vh; height: 100vh; width: 100vw; border-radius: 0; }
  .search-dialog__inner { border-radius: 0; max-height: 100vh; }
}

/* ──────── QUIZ ──────── */
.quiz {
  max-width: 720px; margin: 0 auto;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.quiz__progress {
  height: 6px; background: var(--c-surface-2);
  border-radius: 3px; margin-bottom: var(--s-5);
  overflow: hidden;
}
.quiz__progress__bar {
  height: 100%;
  background: var(--grad-primary);
  border-radius: 3px;
  transition: width 0.4s var(--ease);
}
.quiz__title { font-family: var(--ff-display); font-size: 1.6rem; line-height: 1.2; margin: 0 0 var(--s-3); }
.quiz__hint { color: var(--c-muted); margin-bottom: var(--s-5); }
.quiz__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.quiz__option {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-4);
  background: var(--c-surface-2);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-weight: 500; text-align: center; user-select: none;
}
.quiz__option:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.quiz__option.is-selected {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.quiz__option__emoji { font-size: 2rem; line-height: 1; }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; }
.quiz__counter { font-size: 0.85rem; color: var(--c-muted); }
.quiz__results-summary {
  background: var(--c-primary-soft); padding: var(--s-4);
  border-radius: var(--r-md); margin-bottom: var(--s-5);
  font-size: 0.95rem;
  color: var(--c-primary-3);
}
.quiz__results-empty { text-align: center; padding: var(--s-7); color: var(--c-muted); }
html[data-theme="dark"] .quiz__results-summary { color: var(--c-ink); }

@media print {
  .icon-btn, [data-theme-toggle], [data-aria-toggle], .burger, .bg-icons { display: none !important; }
}

/* ============================================================================
   v4 — Современный молодёжный дизайн: hero, направления, «О нас», анимации
   ========================================================================= */

/* ─── HERO для лендингов и подразделов ─── */
.hero-modern {
  position: relative;
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
.hero-modern__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grad-mesh);
}
.hero-modern__bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(79,168,163,0.06) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(238,155,126,0.06) 1px, transparent 1px);
  background-size: 50px 50px, 70px 70px;
  opacity: 0.7;
}
.hero-modern__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
  align-items: center; position: relative;
}
@media (min-width: 980px) {
  .hero-modern__inner { grid-template-columns: 1.2fr 0.9fr; gap: var(--s-7); }
}

.hero-modern__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--c-primary-soft); color: var(--c-primary-3);
  font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--s-4);
}
html[data-theme="dark"] .hero-modern__kicker {
  background: rgba(79,168,163,0.18); color: #A9DBD8;
}

.hero-modern__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
}
.hero-modern__title .accent {
  background: var(--grad-sunset);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-modern__lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55; color: var(--c-ink-2);
  max-width: 580px; margin: 0 0 var(--s-5);
}
.hero-modern__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ─── Кнопки v4 ─── */
.btn-modern {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; font-weight: 600; font-size: 0.95rem;
  border-radius: var(--r-md);
  text-decoration: none; cursor: pointer; border: 0;
  transition: all 0.25s var(--ease);
  position: relative; overflow: hidden;
  font-family: var(--ff-body);
}
.btn-modern--primary {
  background: var(--grad-primary); color: #fff;
  box-shadow: var(--sh-2);
}
.btn-modern--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3), 0 0 30px -8px var(--c-primary-glow);
}
.btn-modern--ghost {
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.btn-modern--ghost:hover {
  border-color: var(--c-ink); transform: translateY(-2px);
}
html[data-theme="dark"] .btn-modern--ghost {
  background: var(--c-surface); border-color: var(--c-line-2);
}

/* ─── Hero коллаж ─── */
.hero-collage {
  position: relative; aspect-ratio: 1; max-width: 460px;
  margin-left: auto; margin-right: 0;
}
.hero-collage__card {
  position: absolute;
  border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--sh-3);
  background: var(--c-surface); border: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 0.85rem;
  transition: transform 0.4s var(--ease);
}
.hero-collage__card:hover { transform: scale(1.06) rotate(0deg) !important; z-index: 10; }
.hero-collage__card--1 { top: 0; left: 0; width: 56%; transform: rotate(-4deg); }
.hero-collage__card--2 { top: 8%; right: 0; width: 50%; transform: rotate(6deg);
  background: var(--grad-warm); border-color: transparent; color: #3E2410; } /* v39.21: белый на тёплом был 1.7:1 */
.hero-collage__card--3 { bottom: 4%; left: 12%; width: 60%; transform: rotate(-2deg);
  background: var(--grad-cool); border-color: transparent; color: #142B29; } /* v39.21 */
.hero-collage__card--4 { bottom: 0; right: 5%; width: 46%; transform: rotate(8deg);
  background: var(--grad-primary); color: #fff; border-color: transparent; }
.hero-collage__card__emoji { font-size: 2rem; line-height: 1; }
.hero-collage__card__title { font-weight: 700; }
.hero-collage__card__sub { opacity: 0.85; font-size: 0.78rem; }

/* ─── Stats ─── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4); margin: var(--s-6) 0;
}
.stat {
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-line);
  transition: all 0.3s var(--ease);
}
.stat:hover {
  transform: translateY(-4px); box-shadow: var(--sh-3);
  border-color: var(--c-primary);
}
.stat__num {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; line-height: 1; margin-bottom: 6px;
}
.stat__label { font-size: 0.92rem; color: var(--c-ink-2); }

/* ─── Featured-tile (большая промо плитка) ─── */
.featured-tile {
  position: relative; padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: var(--grad-primary); color: #fff;
  display: flex; flex-direction: column; gap: var(--s-4);
  min-height: 320px; justify-content: space-between;
}
.featured-tile::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(400px 300px at 80% 90%, rgba(255,255,255,0.18), transparent 60%);
}
.featured-tile__title {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700; line-height: 1.1; margin: 0;
}
.featured-tile__btn {
  align-self: flex-start; background: #fff; color: var(--c-primary-3);
  padding: 12px 22px; border-radius: var(--r-md);
  font-weight: 600; text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.featured-tile__btn:hover { transform: translateY(-2px); }

/* ─── Section-modern ─── */
.section-modern { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.section-modern__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.section-modern__title {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.1; font-weight: 700; margin: 0;
}
.section-modern__title .accent {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ─── Card-modern ─── */
.card-modern {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
  position: relative; overflow: hidden;
  transition: all 0.35s var(--ease);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.card-modern::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-primary);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.card-modern:hover {
  transform: translateY(-6px); box-shadow: var(--sh-3);
  border-color: var(--c-primary);
}
.card-modern:hover::before { transform: scaleX(1); }

html[data-theme="dark"] .card-modern {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ─── Direction-tile (плитки направлений как на strogin.ru) ─── */
.directions-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
}
.direction-tile {
  position: relative; padding: var(--s-5);
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 1.15; display: flex; flex-direction: column; justify-content: end;
  text-decoration: none; color: inherit;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  isolation: isolate;
  background: var(--bg, var(--grad-primary)); /* v39.24: дублируем фон ::before на элемент — белый текст не «висит» на фоне страницы при сбое псевдо */
}
.direction-tile:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--sh-4);
}
.direction-tile::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--bg, var(--grad-primary));
}
.direction-tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, transparent 60%);
}
.direction-tile__icon {
  position: absolute; top: var(--s-4); right: var(--s-4);
  font-size: 2.2rem; opacity: 0.85; line-height: 1;
}
.direction-tile__title {
  color: #fff; font-family: var(--ff-display);
  font-size: 1.25rem; font-weight: 600; line-height: 1.2;
}
.direction-tile__count {
  color: rgba(255,255,255,0.85); font-size: 0.85rem; margin-top: 4px;
}

/* ─── Skeleton-loader ─── */
.skeleton {
  background: linear-gradient(90deg,
    var(--c-surface-2) 0%, var(--c-line) 50%, var(--c-surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--r-sm);
}
.skeleton-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Reveal-on-scroll ─── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Mega-search ─── */
.mega-search {
  background: var(--c-surface);
  border-radius: var(--r-lg); padding: var(--s-3);
  display: flex; gap: var(--s-2); align-items: center;
  box-shadow: var(--sh-2);
  border: 1px solid var(--c-line);
  max-width: 560px;
}
.mega-search__icon { color: var(--c-muted); padding: 0 var(--s-2); display: flex; }
.mega-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: 500 1rem var(--ff-body); color: var(--c-ink); padding: 8px 0;
  cursor: pointer;
}
.mega-search button {
  background: var(--grad-primary); color: #fff;
  padding: 12px 22px; border-radius: var(--r-md); border: 0;
  font-weight: 600; cursor: pointer; font-family: var(--ff-body);
  transition: transform 0.25s var(--ease);
}
.mega-search button:hover { transform: scale(1.03); }

/* ─── Socials ─── */
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.soc-ico, .btn-ico { display: inline-flex; align-items: center; justify-content: center; }
.soc-ico svg, .btn-ico svg, .socials__link svg, .contact-bar__socials a svg { width: 18px; height: 18px; display: block; }
.contact-bar__socials a { display: inline-flex; align-items: center; justify-content: center; }
.socials__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px;
  padding: 10px 16px; border-radius: var(--r-md);
  background: var(--c-surface-2); color: var(--c-ink) !important;
  text-decoration: none; font-weight: 600; font-size: 0.85rem;
  transition: all 0.2s var(--ease);
}
.socials__link:hover {
  background: var(--c-primary); color: #fff !important; transform: translateY(-2px);
}
/* Внутри тёмного футера — кнопки соцсетей яркие и контрастные */
.site-footer .socials__link {
  background: rgba(255,255,255,0.1);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
}
.site-footer .socials__link:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff !important;
  box-shadow: 0 6px 18px var(--c-primary-glow);
}

/* ─── About-hero ─── */
.about-hero {
  background: var(--grad-primary); color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 80px);
  margin-bottom: var(--s-6);
  position: relative; overflow: hidden;
}
.about-hero .hero__lead { color: rgba(255,255,255,0.92); } /* v39.21: muted перебивал белый на тиле (1.1:1) */
.about-hero::before {
  content: ''; position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.about-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700; line-height: 1.05;
  margin: 0 0 var(--s-4); max-width: 800px;
  position: relative;
}
.about-hero__lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 720px; opacity: 0.92; line-height: 1.55;
  position: relative; margin: 0;
}

/* ─── Values grid ─── */
.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.value-card {
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-line);
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.value-card:hover {
  transform: translateY(-4px); border-color: var(--c-primary);
}
.value-card__icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--c-primary-soft); color: var(--c-primary-3);
  display: grid; place-items: center; font-size: 1.8rem;
  margin-bottom: var(--s-3);
}
html[data-theme="dark"] .value-card__icon {
  background: rgba(79,168,163,0.2); color: #A9DBD8;
}
.value-card h3 {
  font-size: 1.2rem; margin: 0 0 8px;
  font-family: var(--ff-display); font-weight: 600;
}
.value-card p { color: var(--c-ink-2); margin: 0; line-height: 1.5; }

/* ─── Timeline (история) ─── */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: ''; position: absolute;
  left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: var(--c-line);
}
.timeline__item { position: relative; padding-bottom: var(--s-5); }
.timeline__item::before {
  content: ''; position: absolute;
  left: -32px; top: 4px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--c-primary);
  border: 3px solid var(--c-bg);
  box-shadow: 0 0 0 1px var(--c-primary);
}
.timeline__year {
  font-family: var(--ff-display);
  font-size: 1.1rem; font-weight: 700;
  color: var(--c-primary); margin-bottom: 4px;
}
.timeline__title { font-weight: 600; margin-bottom: 4px; }
.timeline__desc { color: var(--c-ink-2); font-size: 0.93rem; line-height: 1.5; }

/* ─── FAB (Подобрать кружок) ─── */
.fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  padding: 14px 22px; border-radius: var(--r-full);
  background: var(--grad-primary); color: #fff;
  font-weight: 600; font-size: 0.92rem;
  box-shadow: var(--sh-3), 0 0 30px -8px var(--c-primary-glow);
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.25s var(--ease);
  font-family: var(--ff-body);
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
@media (max-width: 767px) {
  .fab { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 0.85rem; }
  .fab span:not([data-keep]) { display: none; }
}

/* ─── Адаптивность ─── */
@media (max-width: 767px) {
  .hero-modern { padding: 32px 0 24px; }
  .hero-modern__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero-collage { max-width: 320px; aspect-ratio: 1.2; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .stat { padding: var(--s-4); }
  .stat__num { font-size: 1.6rem; }
  .stat__label { font-size: 0.8rem; }
  .section-modern__head { flex-direction: column; align-items: flex-start; }
  .featured-tile { padding: 24px; min-height: 240px; }
  .featured-tile__title { font-size: 1.3rem; }
  .timeline { padding-left: 28px; }
  .timeline__item::before { left: -28px; width: 16px; height: 16px; }
  .directions-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .direction-tile { aspect-ratio: 1; }
  .direction-tile__title { font-size: 1.05rem; }
  .direction-tile__icon { font-size: 1.6rem; top: 12px; right: 12px; }
}

@media (min-width: 1280px) {
  .hero-modern__title { font-size: 4.4rem; }
  .container { max-width: 1280px; }
}

/* ─── Hover-эффект 3D-карточек (опционально) ─── */
.card-3d {
  perspective: 1000px;
  transition: transform 0.3s var(--ease);
}
.card-3d:hover { transform: rotateY(2deg) rotateX(-2deg); }

/* ─── Магнитные кнопки (микро-эффект) ─── */
.btn-modern--primary, .btn-modern--ghost {
  will-change: transform;
}

/* ─── Animated underline для ссылок в header — убедимся ─── */
.main-nav a {
  position: relative;
  font-weight: 500;
}

/* v32.40: кнопка «Войти» в мобильном меню — по умолчанию скрыта,
   показывается только в выезжающем меню на мобиле (см. @media ниже). */
.main-nav__cta { display: none; }

/* ─── Мобильное burger-меню ─── */
@media (max-width: 979px) {
  .main-nav {
    position: fixed; top: 0; right: -100%;
    width: 80%; max-width: 320px; height: 100vh;
    background: var(--c-surface);
    box-shadow: var(--sh-4);
    flex-direction: column;
    padding: 80px var(--s-5) var(--s-5);
    gap: var(--s-3) !important;
    transition: right 0.35s var(--ease);
    z-index: 50;
    align-items: stretch;
  }
  .main-nav.is-open { right: 0; }
  .main-nav a {
    padding: var(--s-3) var(--s-2);
    border-bottom: 1px solid var(--c-line);
    font-size: 1.05rem;
    margin: 0;
  }
  .header-actions { display: flex !important; }
  .burger { display: flex !important; }
}

/* ─── Глобальный fix для корректного z-index burger menu ─── */
.burger { z-index: 51; }

/* ─── Сетки (cards) ─── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
}

/* ─── Animated counter (для stats при появлении) ─── */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── Safe-area для iOS PWA ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  .fab {
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(24px, env(safe-area-inset-right));
  }
}

/* ─── Accent border-glow для is-active ссылок в навигации ─── */
.main-nav a.is-active {
  background: var(--c-primary-soft);
  color: var(--c-primary-3);
  border-radius: var(--r-md);
  padding: 6px 12px;
  margin: -6px -12px;
}
html[data-theme="dark"] .main-nav a.is-active {
  background: rgba(79,168,163,0.18); color: #A9DBD8;
}

/* ─── Scroll progress indicator ─────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  width: 0; z-index: 200;
  background: var(--grad-primary);
  pointer-events: none;
  box-shadow: 0 0 12px var(--c-primary-glow);
  transition: width 0.05s linear;
}

/* ─── Backdrop для открытого мобильного меню ─────────────────── */
@media (max-width: 979px) {
  .main-nav.is-open::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
    z-index: -1;
    left: -100vw;
    width: 100vw;
  }
}

/* ─── Better focus styles for accessibility ─────────────────── */
*:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible {
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}

/* ─── Smooth transitions для cards ─────────────────────────── */
.cards .card-modern,
.cards .card,
.cards .holiday-card,
.cards .branch-card,
.cards .skeleton-card {
  animation: card-enter 0.5s var(--ease) backwards;
}
.cards > *:nth-child(1) { animation-delay: 0.05s; }
.cards > *:nth-child(2) { animation-delay: 0.1s; }
.cards > *:nth-child(3) { animation-delay: 0.15s; }
.cards > *:nth-child(4) { animation-delay: 0.2s; }
.cards > *:nth-child(5) { animation-delay: 0.25s; }
.cards > *:nth-child(6) { animation-delay: 0.3s; }
.cards > *:nth-child(7) { animation-delay: 0.35s; }
.cards > *:nth-child(8) { animation-delay: 0.4s; }
@keyframes card-enter {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cards > * { animation: none; }
}

/* ─── Гарантированный отступ под FAB на мобильных ─────────── */
@media (max-width: 767px) {
  body { padding-bottom: 80px; }
}

/* ─── Декоративный SVG-фон (если ещё не есть) ─────────────── */
.bg-icons {
  position: fixed; inset: 0; z-index: -10;
  pointer-events: none; overflow: hidden;
  opacity: 0.04;
}
html[data-theme="dark"] .bg-icons { opacity: 0.06; }
.bg-icons svg {
  position: absolute;
  width: 80px; height: 80px;
  fill: var(--c-primary);
  animation: float 20s linear infinite;
}
@keyframes float {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-30px) rotate(360deg); }
}

/* ─── Современная типографика для мобильных ─────────────────── */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .hero-modern__title { font-size: 1.8rem !important; }
  .section-modern__title { font-size: 1.4rem !important; }
  .hero-modern__lead { font-size: 0.95rem; }
}

/* ─── Tap highlight для мобильных ─────────────────────────── */
button, a, .card, .card-modern, .direction-tile {
  -webkit-tap-highlight-color: rgba(79,168,163,0.2);
}

/* ─── Sticky header с blur ─────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(229,229,238,0.5);
}
html[data-theme="dark"] .site-header {
  background: rgba(11,11,20,0.7);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ─── Печатная версия ─────────────────────────────────────── */
@media print {
  .scroll-progress, .fab, .burger, [data-search-open],
  [data-theme-toggle], [data-aria-toggle], .header-actions,
  .bg-icons, .site-footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ─── Финальные правки v6 ─── */

/* Шапка — пункты меню в одну строку, лучшее распределение пространства */
.main-nav a {
  white-space: nowrap;
}

/* Уменьшим gap в шапке для большей читаемости */
@media (min-width: 980px) {
  .main-nav { gap: var(--s-4); }
}

/* Hero-collage — спрячем переполнение, чтобы не обрезалось */
@media (min-width: 980px) {
  .hero-modern {
    overflow: visible;
  }
  .hero-modern__inner {
    overflow: visible;
  }
}
.hero-collage {
  margin-left: auto;
  margin-right: 16px;
  max-width: 360px;
  width: 100%;
}
/* Прижимаем самую правую карточку к правому краю коллажа */
.hero-collage__card--2 { right: 0 !important; }
.hero-collage__card--4 { right: 0 !important; }

/* На очень узких экранах коллаж скрываем для чистоты */
@media (max-width: 600px) {
  .hero-collage { display: none; }
}

/* ============================================================================
   v7 — Финальные фиксы: padding hero, мобильная шапка, burger, чистый контейнер
   ========================================================================= */

/* Контейнер всегда имеет горизонтальный padding — даже когда совмещён с другим классом */
section.container, div.container { 
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}
@media (min-width: 768px) {
  section.container, div.container {
    padding-left: var(--s-6);
    padding-right: var(--s-6);
  }
}

/* Hero-modern: оставляем только vertical padding, never override horizontal */
.hero-modern.container {
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* Hero-collage: ограничиваем чтобы не вылезал, на узких — скрываем */
.hero-collage {
  max-width: 380px;
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 1100px) {
  .hero-collage { max-width: 320px; }
}
@media (max-width: 900px) {
  .hero-collage { display: none; }
}

/* ─── МОБИЛЬНАЯ ШАПКА ─── */
@media (max-width: 1023px) {
  /* Убираем margin-left:auto с .burger чтобы он встал к header-actions */
  .burger { margin-left: 0; }
  
  /* На мобильных скрываем кнопку "Войти" в шапке — будет в меню */
  .header-actions [data-auth-link] { display: none; }
}

/* На очень узких — компактные actions */
@media (max-width: 480px) {
  .site-header__inner { gap: 8px; }
  .icon-btn { width: 36px; height: 36px; padding: 0; }
  .icon-btn svg { width: 18px; height: 18px; }
  .brand__text small { display: none; }
  .brand__mark { width: 36px; height: 36px; font-size: 0.85rem; }
  .brand__text strong { font-size: 0.92rem; }
  .header-actions { gap: 4px; }
}

/* ─── МОБИЛЬНОЕ SLIDE-IN МЕНЮ — улучшенное ─── */
@media (max-width: 1023px) {
  .main-nav {
    display: flex !important;
    position: fixed;
    top: 0; right: -100%;
    width: 85%; max-width: 340px; height: 100vh;
    background: var(--c-surface);
    box-shadow: var(--sh-4);
    flex-direction: column;
    padding: 80px var(--s-5) var(--s-5);
    gap: 4px;
    transition: right 0.35s var(--ease);
    z-index: 50;
    align-items: stretch;
    overflow-y: auto;
  }
  .main-nav.is-open { right: 0; }
  .main-nav a {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-line);
    font-size: 1.05rem;
    margin: 0;
    text-decoration: none;
    color: var(--c-ink);
    border-radius: var(--r-sm);
  }
  .main-nav a:hover { background: var(--c-primary-soft); color: var(--c-primary-3); }
  .main-nav a.is-active { background: var(--c-primary-soft); color: var(--c-primary-3); }

  /* v32.40: кнопка «Войти» в мобильном меню (на десктопе она в шапке).
     Полноширинная кнопка внизу списка ссылок. */
  .main-nav a.main-nav__cta {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    margin: 0 0 16px;
    padding: 13px 24px;
    border-bottom: none;
    border-radius: var(--r-full);
    background: var(--grad-primary);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 14px var(--c-primary-glow);
  }
  .main-nav a.main-nav__cta:hover { background: var(--grad-primary); color: #fff !important; }
  .main-nav a.main-nav__cta::after { display: none; }
  /* Дублирующую кнопку «Войти» в верхней панели на мобиле прячем (она уже в меню),
     чтобы не переполнять шапку. */
  .header-actions > [data-auth-link] { display: none !important; }
  
  /* Backdrop через ОТДЕЛЬНЫЙ <div class="menu-backdrop">.
     Раньше использовался body::before, но псевдоэлементы на iOS возвращают
     своего host (BODY) в elementsFromPoint и перехватывают touch-события,
     даже когда z-index меньше меню. Это блокировало клики по ссылкам меню.
     Реальный div решает однозначно: меню z-index 100, backdrop z-index 90. */
  body.menu-open { overflow: hidden; }
  .menu-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 18, 14, 0.45);
    z-index: 90;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }
  .menu-backdrop.is-open {
    opacity: 1; pointer-events: auto;
  }
  /* Поднимаем меню заметно выше backdrop, чтобы touch-события всегда
     попадали в меню при пересечении областей. */
  .main-nav { z-index: 100; }
}

/* На десктопе main-nav в строке (override v4) */
@media (min-width: 1024px) {
  .main-nav {
    display: flex !important;
    position: static;
    width: auto; max-width: none; height: auto;
    background: transparent;
    box-shadow: none;
    flex-direction: row;
    padding: 0;
    gap: var(--s-4);
    overflow: visible;
  }
  .main-nav a {
    border-bottom: 0;
    padding: 0;
    font-size: 0.95rem;
  }
}

/* Burger работает корректно */
@media (max-width: 1023px) {
  .burger { display: flex !important; }
}

/* Hero — текст никогда не выходит за контейнер */
.hero-modern__title,
.hero-modern__lead,
.hero-modern__kicker,
.hero-modern__ctas {
  max-width: 100%;
}

/* Мобильный hero: компактнее */
@media (max-width: 600px) {
  .hero-modern { padding-top: 24px; padding-bottom: 24px; }
  .hero-modern__title { font-size: 2rem !important; line-height: 1.05; }
  .hero-modern__kicker { font-size: 0.7rem; padding: 4px 10px; margin-bottom: 12px; }
  .hero-modern__lead { font-size: 0.95rem; }
  .hero-modern__ctas { flex-direction: column; gap: 8px; }
  .hero-modern__ctas .btn-modern { width: 100%; justify-content: center; }
}

/* About-hero на мобильных — компактнее */
@media (max-width: 600px) {
  .about-hero { padding: 28px 24px; border-radius: var(--r-lg); }
  .about-hero__title { font-size: 1.6rem; }
  .about-hero__lead { font-size: 0.95rem; }
}

/* Section на мобильных — меньше отступов */
@media (max-width: 600px) {
  .section-modern { padding-top: 32px; padding-bottom: 32px; }
  .section-modern__title { font-size: 1.4rem !important; }
}

/* Mega-search на мобильных — компактно */
@media (max-width: 600px) {
  .mega-search { padding: 8px; }
  .mega-search__icon { padding: 0 4px; }
  .mega-search input { font-size: 0.92rem; padding: 6px 0; }
  .mega-search button { padding: 10px 16px; font-size: 0.9rem; }
}

/* Stats: 2 колонки на узких */
@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 16px 12px; }
  .stat__num { font-size: 1.6rem; }
  .stat__label { font-size: 0.8rem; }
}

/* Cards — на мобильных одна колонка */
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; gap: 12px; }
}

/* Direction-tile mobile */
@media (max-width: 600px) {
  .directions-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .direction-tile { aspect-ratio: 1; padding: 16px; }
  .direction-tile__title { font-size: 0.95rem; }
  .direction-tile__count { font-size: 0.78rem; }
  .direction-tile__icon { font-size: 1.6rem; top: 10px; right: 10px; }
}

/* Week-schedule mobile: один столбец */
@media (max-width: 768px) {
  .week-schedule { grid-template-columns: 1fr !important; gap: 8px !important; }
  .week-day { padding: 16px !important; }
}

/* Featured-tile mobile */
@media (max-width: 600px) {
  .featured-tile { padding: 24px; min-height: 200px; }
  .featured-tile__title { font-size: 1.4rem !important; }
}

/* Timeline mobile */
@media (max-width: 600px) {
  .timeline { padding-left: 24px; }
  .timeline::before { left: 7px; }
  .timeline__item::before { left: -24px; width: 16px; height: 16px; }
  .timeline__year { font-size: 0.95rem; }
  .timeline__title { font-size: 0.95rem; }
  .timeline__desc { font-size: 0.85rem; }
}

/* Footer mobile */
@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr !important; gap: var(--s-4); }
  .site-footer__col h4 { font-size: 0.92rem; }
}
@media (max-width: 480px) {
  .site-footer__inner { grid-template-columns: 1fr !important; }
}

/* Quiz mobile */
@media (max-width: 600px) {
  .quiz { padding: 20px; }
  .quiz__title { font-size: 1.3rem; }
  .quiz__options { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .quiz__option { padding: 12px 8px; }
  .quiz__option__emoji { font-size: 1.5rem; }
}

/* FAB mobile — внизу, ниже safe area */
@media (max-width: 600px) {
  .fab { bottom: 12px; right: 12px; padding: 10px 14px; font-size: 0.82rem; }
}


/* ============================================================================
   v8 — Контактная форма + Admin панель
   ========================================================================= */

.contact-block {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  .contact-block { grid-template-columns: 1fr 1.3fr; }
}
.contact-block::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--grad-warm);
  opacity: 0.15;
  filter: blur(60px);
  pointer-events: none;
}
.contact-block__lead {
  font-size: 1.05rem; color: var(--c-ink-2); margin: var(--s-3) 0 var(--s-5);
}
.contact-block__perks {
  display: grid; gap: var(--s-3);
  margin-top: var(--s-4);
}
.contact-block__perk {
  display: flex; gap: var(--s-3); align-items: flex-start;
}
.contact-block__perk__icon {
  font-size: 1.6rem; line-height: 1;
  flex-shrink: 0;
}

.contact-form { display: grid; gap: var(--s-3); position: relative; }
.contact-form__row {}
.contact-form__row--two {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
}
@media (max-width: 600px) {
  .contact-form__row--two { grid-template-columns: 1fr; }
}
.contact-form__label {
  display: block; font-weight: 500; font-size: 0.88rem;
  color: var(--c-ink-2); margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
.contact-form textarea { resize: vertical; min-height: 80px; }
.contact-form__submit {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.contact-form__legal {
  font-size: 0.78rem; color: var(--c-muted); flex: 1; min-width: 200px;
}

/* Toasts */
.toasts {
  position: fixed; top: 24px; right: 24px;
  z-index: 200; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  padding: 12px 18px; border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-3);
  font-weight: 500;
  pointer-events: all;
  transition: opacity 0.5s, transform 0.5s;
  min-width: 240px; max-width: 380px;
}
.toast--success { border-color: var(--c-success); border-left: 4px solid var(--c-success); }
.toast--error   { border-color: var(--c-danger); border-left: 4px solid var(--c-danger); }
.toast--info    { border-left: 4px solid var(--c-primary); }

/* ─── Admin panel ─── */
.admin-page { padding: var(--s-6) var(--s-5); }
.admin-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-5); flex-wrap: wrap; gap: var(--s-3);
}
.admin-toolbar__title {
  font-family: var(--ff-display);
  font-size: 1.6rem; margin: 0;
}
.admin-toolbar__user {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--c-muted);
}
.admin-badge {
  background: var(--c-primary); color: #fff;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
}

/* v32.27: Группы табов в админке — 3 строки вместо одной длинной */
.admin-tabs {
  display: flex; flex-direction: column;
  gap: 4px;
  border-bottom: 2px solid var(--c-line);
  margin-bottom: var(--s-5);
  padding: 8px 0 0;
  overflow-x: hidden;
}
.admin-tabs__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.admin-tabs__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: -2px;  /* чтобы активный border-bottom лёг на линию */
}
.admin-tabs__row-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  margin-right: 8px;
  min-width: 90px;
  user-select: none;
}
.admin-tabs__btn {
  padding: 8px 14px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--ff-body); font-size: 0.88rem; font-weight: 500;
  color: var(--c-muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s;
}
.admin-tabs__btn:hover {
  color: var(--c-ink);
  background: rgba(78, 184, 174, 0.05);
}
.admin-tabs__btn.is-active {
  color: var(--c-primary);
  background: rgba(78, 184, 174, 0.10);
  border-bottom-color: var(--c-primary);
  font-weight: 600;
}

/* Тёмная тема для табов */
html[data-theme="dark"] .admin-tabs__row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .admin-tabs__btn.is-active {
  background: rgba(78, 184, 174, 0.18);
}

/* Мобильно — скрываем подписи групп, оставляем только кнопки */
@media (max-width: 640px) {
  .admin-tabs__row-label { display: none; }
  .admin-tabs__btn { padding: 6px 10px; font-size: 0.82rem; }
}

.admin-content { min-height: 300px; }
.admin-loading, .admin-empty {
  text-align: center; padding: 60px 20px; color: var(--c-muted);
}

.admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.admin-stat-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.admin-stat-card__num {
  font-family: var(--ff-display);
  font-size: 2.4rem; font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1; margin-bottom: 6px;
}
.admin-stat-card__lbl { color: var(--c-ink-2); font-size: 0.9rem; }

.admin-hint {
  background: var(--c-primary-soft); color: var(--c-primary-3);
  padding: var(--s-4); border-radius: var(--r-md);
  font-size: 0.92rem;
}
html[data-theme="dark"] .admin-hint {
  background: rgba(79,168,163,0.18); color: #A9DBD8;
}

.admin-list-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-4); flex-wrap: wrap; gap: var(--s-3);
}
.admin-list-head h2 { margin: 0; font-size: 1.4rem; }

.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.admin-table th, .admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.admin-table th {
  background: var(--c-surface-2);
  font-weight: 600; font-size: 0.82rem;
  color: var(--c-ink-2); text-transform: uppercase; letter-spacing: 0.04em;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--c-surface-2); }
.admin-table .small { font-size: 0.82rem; }
.admin-cell-narrow {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.88rem;
}

.admin-status-select {
  padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink);
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-icon {
  background: transparent; border: 1px solid var(--c-line);
  width: 32px; height: 32px; padding: 0;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 1rem; transition: all 0.2s;
  margin-right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--c-ink);
}
.btn-icon:hover { background: var(--c-surface-2); border-color: var(--c-primary); }
.btn-icon--danger:hover {
  background: rgba(239,68,68,0.1); border-color: var(--c-danger); color: var(--c-danger);
}

/* Admin form */
.admin-form {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.admin-form h3 { margin: 0 0 var(--s-4); font-size: 1.3rem; }

/* v32.25: Полная переработка сетки админ-формы для аккуратного layout
 * с явными колонками 2 / 3 и поддержкой full-width полей. */
.admin-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.admin-form__grid--2 { grid-template-columns: 1fr 1fr; }
.admin-form__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .admin-form__grid,
  .admin-form__grid--2,
  .admin-form__grid--3 { grid-template-columns: 1fr; }
}

.admin-form__row { margin-bottom: var(--s-3); }
.admin-form__field {
  display: flex; flex-direction: column;
  margin: 0;
}
.admin-form__field--full {
  grid-column: 1 / -1;  /* на всю ширину */
}
.admin-form__field__label {
  display: block; font-size: 0.85rem; font-weight: 500;
  color: var(--c-ink-2); margin-bottom: 6px;
}

/* v32.28: подсказка под полем формы (например, для autocomplete-инпутов) */
.admin-form__field-hint {
  font-size: 0.78rem;
  color: var(--c-muted);
  margin-top: 4px;
  line-height: 1.35;
}

/* v32.25: Секции формы (Основное / Когда и где / Участники / Фото) */
.admin-form__section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}
.admin-form__section:last-of-type {
  border-bottom: none;
  margin-bottom: 16px;
}
.admin-form__section h4 {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-ink);
  display: flex; align-items: center; gap: 8px;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-ink);
  font-family: var(--ff-body); font-size: 0.95rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(78,184,174,.12);
}
.admin-form textarea { resize: vertical; min-height: 80px; }
.admin-form__checks {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin: var(--s-3) 0;
}
.admin-form__checks label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.admin-form__check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 12px; background: rgba(78,184,174,.06); border-radius: 8px;
  border: 1px solid rgba(78,184,174,.2);
}
.admin-form__check input { width: auto; }
.admin-form__actions {
  display: flex; gap: var(--s-3); margin-top: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--c-line);
  justify-content: flex-end;
}

/* v32.25: Широкая модалка для форм с большим количеством полей.
 * Применяется через класс на самом <dialog data-modal> (т.к. dialog
 * имеет user-agent ограничение по ширине) и на .modal__inner. */
.modal-dialog--wide {
  max-width: 1000px !important;
  width: 96vw !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.modal-dialog--wide::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.modal__inner--wide {
  max-width: 100% !important;
  width: 100% !important;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 32px !important;
  position: relative;
}
@media (max-width: 768px) {
  .modal__inner--wide { padding: 20px !important; }
}
.admin-error {
  background: rgba(239,68,68,0.1); color: var(--c-danger);
  padding: var(--s-4); border-radius: var(--r-md);
}

@media (max-width: 768px) {
  .admin-table {
    display: block; overflow-x: auto;
  }
  .admin-table th, .admin-table td { white-space: nowrap; }
  .admin-cell-narrow { max-width: 200px; }
}


/* ============================================================================
   v9 — Пробные занятия, мастер-классы, педагоги, newsletter, contact bar
   ========================================================================= */

/* ─── Contact bar (тонкая полоса сверху с контактами + соцсети) ─── */
.contact-bar {
  background: var(--c-ink);
  color: rgba(255,255,255,0.92);
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="dark"] .contact-bar { background: #050510; }
.contact-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4); justify-content: flex-start;
}
.contact-bar__item {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none;
  transition: color 0.2s;
}
.contact-bar__item:hover { color: var(--c-accent); }
.contact-bar__icon { font-size: 0.9em; opacity: 0.85; }
.contact-bar__socials {
  display: flex; gap: 8px; margin-left: auto;
}
.contact-bar__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff; text-decoration: none;
  font-size: 0.8rem; font-weight: 600;
  transition: all 0.2s;
}
.contact-bar__socials a:hover {
  background: var(--c-primary); transform: translateY(-1px);
}
@media (max-width: 768px) {
  .contact-bar { padding: 6px 0; font-size: 0.78rem; }
  .contact-bar__inner { gap: 12px; }
  /* На мобильных скрываем длинный адрес */
  .contact-bar__item:nth-child(3) { display: none; }
}
@media (max-width: 480px) {
  .contact-bar__item:nth-child(2) { display: none; }
}

/* ─── Пробные занятия ─── */
.trial-filter {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 16px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.trial-filter__label {
  font-weight: 600; color: var(--c-ink-2); margin-right: 8px;
}
.trial-filter__btn {
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--c-surface-2); color: var(--c-ink);
  border: 1px solid transparent; cursor: pointer;
  font: 500 0.88rem var(--ff-body);
  transition: all 0.2s;
}
.trial-filter__btn:hover { background: var(--c-primary-soft); color: var(--c-primary-3); }
.trial-filter__btn.is-active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
html[data-theme="dark"] .trial-filter__btn:hover { background: rgba(79,168,163,0.18); color: #A9DBD8; }

.trial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}
.trial-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.trial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}
.trial-card__day {
  background: var(--grad-primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-3); text-align: center;
}
.trial-card__weekday {
  font-family: var(--ff-display);
  font-size: 1.6rem; font-weight: 700; line-height: 1;
}
.trial-card__time {
  font-size: 0.78rem; opacity: 0.92; margin-top: 4px;
}
.trial-card__body {
  padding: var(--s-3); display: flex; flex-direction: column; gap: 6px;
}
.trial-card__title { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.25; }
.trial-card__meta {
  font-size: 0.82rem; color: var(--c-muted);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.trial-card__price { font-weight: 600; margin-top: auto; }
.trial-card__free { color: var(--c-success); }
.trial-card .btn-modern {
  border-radius: 0;
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 12px 20px;
}

/* ─── Мастер-классы ─── */
.workshop-card {
  display: flex; flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
/* v32.29: кликабельная карточка ведёт на /workshops/:slug */
.workshop-card--clickable {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.workshop-card--clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  border-color: var(--c-primary);
}
.workshop-card--clickable:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
.workshop-card__photo {
  width: 100%; height: 180px;
  background-size: cover;
  background-position: center;
  background-color: rgba(78, 184, 174, 0.08);
}
.workshop-card__body {
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--s-5);
  flex: 1;
}
.workshop-card__date {
  font-size: 0.82rem; font-weight: 600;
  color: var(--c-primary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.workshop-card__title {
  font-family: var(--ff-display);
  font-size: 1.15rem; font-weight: 600;
  margin: 0; line-height: 1.25;
}
.workshop-card__desc {
  color: var(--c-ink-2); font-size: 0.92rem; margin: 0;
}
.workshop-card__meta {
  display: grid; gap: 4px;
  font-size: 0.85rem; color: var(--c-ink-2);
}
.workshop-card__price {
  font-weight: 600; padding: 8px 12px;
  background: var(--c-primary-soft);
  color: var(--c-primary-3);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}
html[data-theme="dark"] .workshop-card__price {
  background: rgba(79,168,163,0.18); color: #A9DBD8;
}
.workshop-card__actions {
  margin-top: auto;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.workshop-card__actions .btn { flex: 1; justify-content: center; }

/* v32.29: блок педагога на странице мастер-класса */
html[data-theme="dark"] .workshop-teacher-block {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ─── Педагоги ─── */
.teachers-grid { 
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.teacher-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}
.teacher-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-3);
}
.teacher-card__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  margin: 0 auto var(--s-3);
  background: var(--grad-primary); color: #fff;
  display: grid; place-items: center;
  overflow: hidden;
}
.teacher-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card__initials {
  font-family: var(--ff-display);
  font-size: 1.6rem; font-weight: 700;
}
.teacher-card__name {
  margin: 0 0 4px; font-size: 1.05rem; font-weight: 600;
}
.teacher-card__position {
  color: var(--c-primary); font-size: 0.85rem; font-weight: 500;
  margin-bottom: 8px;
}
.teacher-card__exp {
  font-size: 0.82rem; color: var(--c-muted); margin-bottom: 8px;
}
.teacher-card__bio {
  font-size: 0.85rem; color: var(--c-ink-2); margin: 8px 0 0;
}

/* ─── Newsletter форма ─── */
.newsletter-form { display: grid; gap: 8px; }
.newsletter-form__row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.newsletter-form__row input {
  flex: 1; min-width: 200px;
  padding: 12px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  font-family: var(--ff-body); font-size: 0.95rem;
}
.newsletter-form__row input:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
.newsletter-form__row button {
  flex-shrink: 0;
}
.newsletter-form__check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem; color: var(--c-muted); cursor: pointer;
}
.newsletter-form__check input {
  margin-top: 2px;
  flex-shrink: 0;
}
.newsletter-form__check a { color: var(--c-primary); }

.newsletter-block {
  background: var(--c-primary-soft);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  margin-top: var(--s-7);
  text-align: center;
}
html[data-theme="dark"] .newsletter-block { background: rgba(79,168,163,0.12); }
.newsletter-block .newsletter-form { max-width: 480px; margin: 0 auto; }

/* ─── Footer newsletter card ─── */
.site-footer__newsletter {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: var(--s-5) 0;
  background: rgba(255,255,255,0.02);
}
.footer-newsletter-card {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .footer-newsletter-card { grid-template-columns: 1fr 1.4fr; gap: var(--s-6); }
}
.footer-newsletter-card__text h3 {
  margin: 0 0 8px; font-size: 1.15rem; color: #fff;
}
.footer-newsletter-card__text p { margin: 0 0 6px; }
.footer-newsletter-card__more {
  color: var(--c-accent); font-weight: 500; text-decoration: none;
  font-size: 0.85rem;
}
.footer-newsletter-card__more:hover { text-decoration: underline; }
.footer-newsletter-card .newsletter-form__check {
  color: rgba(255,255,255,0.7);
}
.footer-newsletter-card .newsletter-form__check a { color: var(--c-accent); }

/* ─── Info mailing grid ─── */
.info-mailing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.info-mailing-grid .value-card ul {
  margin: 0; padding-left: 20px;
}
.info-mailing-grid .value-card li {
  margin-bottom: 4px; color: var(--c-ink-2);
}

/* ─── Modal (запись на пробное и мастер-класс) ─── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11,11,20,0.6);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 16px;
  animation: modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-card {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  max-width: 540px; width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: var(--sh-4);
  animation: modalSlideIn 0.3s var(--ease-bounce);
}
@keyframes modalSlideIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: var(--c-surface-2); color: var(--c-ink);
  border: 0; border-radius: 50%;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer; transition: all 0.2s;
}
.modal-close:hover { background: var(--c-primary); color: #fff; transform: rotate(90deg); }
.modal-title {
  margin: 0 0 16px; padding-right: 40px;
  font-family: var(--ff-display); font-size: 1.3rem;
}
.modal-trial-info {
  background: var(--c-primary-soft);
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}
html[data-theme="dark"] .modal-trial-info { background: rgba(79,168,163,0.15); }
.modal-trial-info strong {
  display: block; font-size: 1rem; margin-bottom: 4px;
  color: var(--c-primary-3);
}
html[data-theme="dark"] .modal-trial-info strong { color: #A9DBD8; }

body.modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .modal-card { padding: var(--s-4); max-height: 95vh; max-height: 95dvh; }
  .modal-title { font-size: 1.1rem; }
}

/* ============================================================================
   v10 — Профиль педагога, портфолио, форма «Задать вопрос»
   ========================================================================= */

.breadcrumbs {
  padding: var(--s-4) var(--s-5);
  font-size: 0.9rem;
}
.breadcrumbs a {
  color: var(--c-muted); text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--c-primary); }

/* ─── Hero профиля педагога ─── */
.teacher-profile-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 48px);
  margin-bottom: var(--s-5);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .teacher-profile-hero { grid-template-columns: 220px 1fr; }
}
.teacher-profile-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--grad-primary);
  opacity: 0.08;
  filter: blur(60px);
  pointer-events: none;
}
.teacher-profile-hero__avatar {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--grad-primary);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: var(--sh-3);
  margin: 0 auto;
}
.teacher-profile-hero__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.teacher-profile-hero__initials {
  font-family: var(--ff-display);
  font-size: 4rem; font-weight: 700; color: #fff;
}
.teacher-profile-hero__body { position: relative; }
.teacher-profile-hero__name {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700; line-height: 1.15;
  margin: 0 0 8px;
}
.teacher-profile-hero__position {
  color: var(--c-primary); font-size: 1.05rem; font-weight: 500;
  margin-bottom: var(--s-3);
}
.teacher-profile-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--s-3);
}
.teacher-profile-hero__meta .badge {
  background: var(--c-primary-soft); color: var(--c-primary-3);
  padding: 6px 12px; border-radius: var(--r-full);
  font-size: 0.85rem; font-weight: 500;
}
html[data-theme="dark"] .teacher-profile-hero__meta .badge {
  background: rgba(79,168,163,0.18); color: #A9DBD8;
}
.teacher-profile-hero__bio {
  color: var(--c-ink-2); font-size: 1rem; line-height: 1.6;
  margin: 0;
}

/* ─── Карточки портфолио ─── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}
.portfolio-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.portfolio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-primary);
}
.portfolio-card[data-kind="diploma"]::before     { background: #A855F7; }
.portfolio-card[data-kind="certificate"]::before { background: #4FA8A3; }
.portfolio-card[data-kind="award"]::before       { background: #E0A93F; }
.portfolio-card[data-kind="achievement"]::before { background: #5BA889; }
.portfolio-card[data-kind="publication"]::before { background: #5B9FA8; }
.portfolio-card[data-kind="course"]::before      { background: #E3825F; }

.portfolio-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-3);
}
.portfolio-card__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.portfolio-card__icon { font-size: 1.2rem; }
.portfolio-card__title {
  font-size: 1rem; font-weight: 600; margin: 4px 0 0;
  line-height: 1.3;
}
.portfolio-card__issuer {
  font-size: 0.88rem; color: var(--c-ink-2);
}
.portfolio-card__date {
  font-size: 0.82rem; color: var(--c-muted);
}
.portfolio-card__desc {
  font-size: 0.88rem; color: var(--c-ink-2);
  margin: 4px 0 0;
}
.portfolio-card__file {
  margin-top: auto; padding-top: 10px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--c-primary); text-decoration: none;
  display: inline-block;
}
.portfolio-card__file:hover { text-decoration: underline; }

/* ─── Форма «Задать вопрос» ─── */
.ask-teacher-block {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 40px);
  position: relative;
  overflow: hidden;
}
.ask-teacher-block::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: var(--grad-warm);
  opacity: 0.12;
  filter: blur(50px);
  pointer-events: none;
}
.ask-teacher-form {
  display: grid; gap: var(--s-3);
  max-width: 560px;
  position: relative;
  margin-top: var(--s-3);
}
.ask-teacher-form__title {
  font-size: 0.85rem; color: var(--c-muted);
  font-weight: 500;
}
.ask-teacher-form__field {
  display: block;
}
.ask-teacher-form__label {
  display: block; font-weight: 500; font-size: 0.92rem;
  color: var(--c-ink); margin-bottom: 6px;
}
.ask-teacher-form input,
.ask-teacher-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ask-teacher-form input:focus,
.ask-teacher-form textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
.ask-teacher-form textarea { resize: vertical; min-height: 100px; }
.ask-teacher-form__consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.92rem; color: var(--c-ink-2);
  cursor: pointer; line-height: 1.5;
  padding: 4px 0;
}
.ask-teacher-form__consent input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--c-primary);
}
.ask-teacher-form__consent a {
  color: var(--c-primary); text-decoration: underline;
}
.ask-teacher-form__consent a:hover { text-decoration: none; }
.ask-teacher-form__actions {
  margin-top: 4px;
}
.ask-teacher-form__actions .btn-modern {
  width: 100%; justify-content: center;
}
@media (min-width: 600px) {
  .ask-teacher-form__actions .btn-modern { width: auto; min-width: 180px; }
}
.ask-teacher-form__success {
  text-align: center;
  padding: var(--s-5);
}
.ask-teacher-form__success-icon {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--c-success); color: #fff;
  border-radius: 50%;
  font-size: 1.8rem; font-weight: 700;
  margin-bottom: var(--s-3);
}
.ask-teacher-form__success h3 {
  font-family: var(--ff-display);
  font-size: 1.4rem; margin: 0 0 8px;
  color: var(--c-success);
}
.ask-teacher-form__success p {
  color: var(--c-ink-2); margin: 0;
}

/* ─── Кликабельные карточки педагогов ─── */
.teacher-card--clickable {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.teacher-card--clickable:hover,
.teacher-card--clickable:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--c-primary);
  outline: none;
}
.teacher-card__cta {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: 0.85rem; font-weight: 500;
  color: var(--c-primary);
  transition: gap 0.2s;
}
.teacher-card--clickable:hover .teacher-card__cta {
  letter-spacing: 0.5px;
}

.card-modern--link {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card-modern--link:hover {
  transform: translateY(-3px); box-shadow: var(--sh-3);
  border-color: var(--c-primary);
}

/* ============================================================================
   v11 — Help-форма / Лист ожидания / Логотип / Аватарки
   ========================================================================= */

/* ─── Блок «Вам нужна помощь?» (на странице программы) ─── */
.program-help-block, .waitlist-block {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 32px);
  margin: var(--s-5) 0;
  position: relative;
  overflow: hidden;
}
.program-help-block::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: 0.07;
  filter: blur(40px);
  pointer-events: none;
}
.waitlist-block::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--c-warning, #E0A93F);
  opacity: 0.10;
  filter: blur(40px);
  pointer-events: none;
}
.program-help-block__head, .waitlist-block__head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-4);
  position: relative;
}
.program-help-block__icon-wrap, .waitlist-block__icon-wrap {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--c-primary-soft);
  border-radius: var(--r-md);
  font-size: 1.6rem;
}
.waitlist-block__icon-wrap {
  background: rgba(234, 179, 8, 0.15);
}
html[data-theme="dark"] .program-help-block__icon-wrap { background: rgba(79,168,163,0.18); }
html[data-theme="dark"] .waitlist-block__icon-wrap { background: rgba(234,179,8,0.20); }

.program-help-block__title, .waitlist-block__title {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 700; margin: 0 0 6px;
  line-height: 1.2;
}
.program-help-block__lead, .waitlist-block__lead {
  color: var(--c-ink-2);
  margin: 0; line-height: 1.5;
}

/* Формы */
.program-help-form, .waitlist-form {
  display: grid; gap: 12px;
  position: relative;
}
.program-help-form__row, .waitlist-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .program-help-form__row, .waitlist-form__row { grid-template-columns: 1fr; }
}
.program-help-form input,
.waitlist-form input {
  padding: 12px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.program-help-form input:focus,
.waitlist-form input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
.program-help-form .btn,
.waitlist-form .btn {
  align-self: start;
  min-width: 200px;
}

/* Success-состояние */
.program-help-block__success, .waitlist-block__success {
  text-align: center; padding: var(--s-4);
}
.program-help-block__icon, .waitlist-block__icon {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--c-success); color: #fff;
  border-radius: 50%;
  font-size: 1.5rem; font-weight: 700;
  margin-bottom: var(--s-3);
}
.program-help-block__success h3, .waitlist-block__success h3 {
  font-family: var(--ff-display);
  font-size: 1.3rem; margin: 0 0 8px;
  color: var(--c-success);
}
.program-help-block__success p, .waitlist-block__success p {
  color: var(--c-ink-2); margin: 0;
}

/* ─── Logo uploader в админке ─── */
.admin-form__section {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--c-surface-2, var(--c-surface));
}
.admin-form__section h4 {
  margin: 0 0 8px;
  font-family: var(--ff-display);
  font-size: 1.05rem;
}
.logo-uploader {
  display: grid; gap: 8px;
  margin-bottom: var(--s-3);
}
.logo-uploader__label {
  font-size: 0.88rem; font-weight: 500;
  color: var(--c-ink-2);
}
.logo-uploader__preview {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  min-height: 80px;
}
.logo-uploader__img {
  width: 64px; height: 64px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 4px;
}
.logo-uploader__placeholder {
  color: var(--c-muted);
  font-size: 0.88rem;
  font-style: italic;
}
.logo-uploader__remove {
  background: var(--c-danger, #D9694F);
  color: #fff; border: 0;
  padding: 6px 12px; border-radius: var(--r-sm);
  font-size: 0.85rem; cursor: pointer;
  margin-left: auto;
  transition: opacity 0.2s;
}
.logo-uploader__remove:hover { opacity: 0.85; }
.logo-uploader__btn {
  cursor: pointer;
  align-self: start;
}

/* ─── Логотип в шапке/футере (заменяет .brand__mark) ─── */
.brand__logo {
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* ============================================================================
   v12 — Каталог по бюджету/внебюджету
   ========================================================================= */

.catalog-actions {
  display: grid; gap: var(--s-4);
  margin-bottom: var(--s-5);
}
@media (min-width: 980px) {
  .catalog-actions { grid-template-columns: 1fr auto; align-items: end; }
}

.catalog-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.catalog-stat {
  display: flex; flex-direction: column;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md);
}
.catalog-stat--budget    { border-left-color: var(--c-success); }
.catalog-stat--paid      { border-left-color: var(--c-pink); }
.catalog-stat--pfdo      { border-left-color: var(--c-warning, #E0A93F); }
.catalog-stat--total     { border-left-color: var(--c-primary); }
.catalog-stat__num {
  font-family: var(--ff-display);
  font-size: 1.7rem; font-weight: 700; line-height: 1;
}
.catalog-stat__label {
  font-size: 0.78rem; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 6px;
}

.catalog-export {
  display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center;
}
.catalog-export__label {
  font-size: 0.88rem; color: var(--c-muted);
  margin-right: 4px;
}
.catalog-export .btn-modern { font-size: 0.88rem; }

/* Tabs */
.catalog-tabs {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 0;
}
.catalog-tab {
  background: transparent; border: 0;
  padding: 12px 18px;
  font: 500 0.95rem var(--ff-body);
  color: var(--c-ink-2);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.catalog-tab:hover { color: var(--c-primary); }
.catalog-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  font-weight: 600;
}
.catalog-tab__badge {
  background: var(--c-primary-soft);
  color: var(--c-primary-3);
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 0.78rem; font-weight: 600;
}
html[data-theme="dark"] .catalog-tab__badge {
  background: rgba(79,168,163,0.18); color: #A9DBD8;
}
.catalog-tab.is-active .catalog-tab__badge {
  background: var(--c-primary); color: #fff;
}

.catalog-section__title {
  font-family: var(--ff-display);
  font-size: 1.5rem; font-weight: 700;
  margin: 0 0 6px;
}
.catalog-section__lead {
  color: var(--c-muted); font-size: 0.95rem;
  margin: 0 0 var(--s-4);
}

/* Категории */
.catalog-category {
  margin-bottom: var(--s-5);
}
.catalog-category__title {
  font-family: var(--ff-display);
  font-size: 1.15rem; font-weight: 600;
  margin: var(--s-4) 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-primary-soft);
}
html[data-theme="dark"] .catalog-category__title {
  border-bottom-color: rgba(79,168,163,0.25);
}
.catalog-category__icon { font-size: 1.3rem; }
.catalog-category__count {
  font-size: 0.85rem; font-weight: 500;
  color: var(--c-muted);
}

/* Таблица программ */
.catalog-table {
  display: grid;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.catalog-table__head {
  display: grid;
  grid-template-columns: 50px 2fr 100px 1.3fr 1.1fr 80px 110px 130px;
  gap: 10px;
  padding: 12px 16px;
  background: var(--c-surface-2, var(--c-primary-soft));
  font-size: 0.78rem; font-weight: 600;
  color: var(--c-ink-2);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--c-line);
}
html[data-theme="dark"] .catalog-table__head {
  background: rgba(79,168,163,0.08);
}
.catalog-table__row {
  display: grid;
  grid-template-columns: 50px 2fr 100px 1.3fr 1.1fr 80px 110px 130px;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.92rem;
  align-items: center;
  transition: background 0.15s;
}
.catalog-table__row:last-child { border-bottom: 0; }
.catalog-table__row:hover { background: var(--c-surface-2, rgba(79,168,163,0.03)); }
.catalog-row__num {
  font-weight: 600; color: var(--c-muted);
}
.catalog-row__title a {
  color: var(--c-ink); text-decoration: none;
  font-weight: 500;
}
.catalog-row__title a:hover { color: var(--c-primary); text-decoration: underline; }
.catalog-row__desc {
  font-size: 0.82rem; color: var(--c-muted);
  margin-top: 2px; line-height: 1.3;
}
.catalog-row__addr {
  font-size: 0.8rem; color: var(--c-muted);
  margin-top: 2px;
}
.catalog-row__age,
.catalog-row__teacher {
  font-size: 0.88rem; color: var(--c-ink-2);
}
.catalog-row__price strong { color: var(--c-success); font-weight: 600; }
.catalog-section[data-section="paid"] .catalog-row__price strong { color: var(--c-pink); }
.catalog-row__seats {
  font-size: 0.88rem;
  text-align: center;
}
.catalog-row__status {
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: var(--r-full);
  text-align: center;
  white-space: nowrap;
}
.catalog-row__status--open {
  background: rgba(16,185,129,0.12); color: var(--c-success);
}
.catalog-row__status--waitlist {
  background: rgba(234,179,8,0.15); color: #B45309;
}
.catalog-row__status--closed {
  background: rgba(239,68,68,0.12); color: var(--c-danger);
}
html[data-theme="dark"] .catalog-row__status--waitlist { color: #ECC56B; }
html[data-theme="dark"] .catalog-row__status--closed { color: #FCA5A5; }

.btn-modern--sm {
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  border-radius: var(--r-sm) !important;
}

/* Адаптив для таблицы */
@media (max-width: 980px) {
  .catalog-table__head { display: none; }
  .catalog-table__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px;
  }
  .catalog-row__num {
    font-size: 0.78rem; color: var(--c-muted);
  }
  .catalog-row__num::before { content: '№ '; }
  .catalog-row__age::before { content: '👶 '; color: var(--c-muted); }
  .catalog-row__teacher::before { content: '👨‍🏫 '; color: var(--c-muted); }
  .catalog-row__price::before { content: '💰 '; color: var(--c-muted); }
  .catalog-row__seats::before { content: '🎟 Свободно: '; color: var(--c-muted); }
  .catalog-row__seats { text-align: left; }
  .catalog-row__action .btn-modern { width: 100%; justify-content: center; }
}

/* ============================================================================
   v13 — Каталог: раскрывающиеся блоки + расширенные кнопки выгрузки
   ========================================================================= */

/* Раскрывающиеся <details> по направленностям (как mskobr) */
details.catalog-category {
  margin-bottom: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
details.catalog-category[open] {
  box-shadow: var(--sh-2);
}
details.catalog-category > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  background: var(--c-surface);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-display);
  font-size: 1.05rem; font-weight: 600;
  user-select: none;
  transition: background 0.2s;
}
details.catalog-category > summary::-webkit-details-marker { display: none; }
details.catalog-category > summary:hover {
  background: var(--c-primary-soft);
}
html[data-theme="dark"] details.catalog-category > summary:hover {
  background: rgba(79,168,163,0.12);
}
.catalog-category__chevron {
  display: inline-block;
  transition: transform 0.2s;
  color: var(--c-primary);
  font-size: 0.9rem;
}
details.catalog-category[open] .catalog-category__chevron {
  transform: rotate(90deg);
}
.catalog-category__icon { font-size: 1.3rem; }
.catalog-category__name {
  flex: 1;
  border-bottom: 0;
  padding-bottom: 0;
}
.catalog-category__count {
  background: var(--c-primary-soft);
  color: var(--c-primary-3);
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 0.78rem; font-weight: 600;
  white-space: nowrap;
}
html[data-theme="dark"] .catalog-category__count {
  background: rgba(79,168,163,0.22); color: #DDD6FE;
}

/* Расширенная таблица — добавлена колонка Срок.
   v35: грид только для десктопа — раньше правило было вне медиа-запроса и,
   стоя позже по каскаду, перебивало мобильный grid-template-columns: 1fr
   (строка сжималась, название переносилось по одной букве). */
@media (min-width: 981px) {
  .catalog-table__head,
  .catalog-table__row {
    grid-template-columns: 44px 2fr 88px 1.2fr 1fr 100px 70px 105px 120px;
  }
}
.catalog-row__duration {
  font-size: 0.85rem;
  color: var(--c-ink-2);
}

@media (max-width: 980px) {
  .catalog-table__row { grid-template-columns: 1fr; }
  .catalog-row__title { min-width: 0; overflow-wrap: anywhere; }
  .catalog-row__duration::before {
    content: '⏱ Срок: '; color: var(--c-muted);
  }
}

/* Группы кнопок выгрузки */
.catalog-export {
  display: grid;
  gap: 12px;
}
.catalog-export__group {
  display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center;
}
.catalog-export__label {
  font-size: 0.85rem; font-weight: 500;
  color: var(--c-muted);
  margin-right: 4px;
}
.catalog-export .btn-modern { font-size: 0.85rem; }

.btn-modern--ghost {
  background: transparent;
  color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}
.btn-modern--ghost:hover {
  background: var(--c-surface);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* Подсказка для печатной версии */
.catalog-print-hint {
  font-size: 0.82rem;
  color: var(--c-muted);
  margin-top: 8px;
  font-style: italic;
}

/* ============================================================================
   v14 — Embed-режим (когда платформа во iframe)
   ========================================================================= */

/* По умолчанию ничего не скрываем — родитель видит полный сайт.
   Опционально, родитель может попросить через postMessage скрыть header,
   тогда добавляется класс .is-embedded--minimal */
html.is-embedded--minimal .site-header,
html.is-embedded--minimal .contact-bar,
html.is-embedded--minimal .site-footer {
  display: none !important;
}
html.is-embedded--minimal body {
  background: transparent;
}
html.is-embedded--minimal .container {
  padding-top: 0;
}

/* Лёгкая корректировка — нет горизонтальной прокрутки в iframe */
html.is-embedded body {
  overflow-x: hidden;
}

/* ============================================================================
   v14 — Embed-режим (страница встроена в iframe)
   ========================================================================= */

/* Спрятать шапку, футер, contact-bar, FAB — оставляем только основной контент */
body.is-embedded {
  background: transparent !important;
}
body.is-embedded > .contact-bar,
body.is-embedded > .site-header,
body.is-embedded > .site-footer,
body.is-embedded .fab,
body.is-embedded [data-fab],
body.is-embedded > a.skip-link {
  display: none !important;
}
body.is-embedded > main,
body.is-embedded > [data-app-root] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.is-embedded > main > section:first-child,
body.is-embedded > [data-app-root] > section:first-child {
  margin-top: 0 !important;
  padding-top: 16px !important;
}
/* Hero-блоки в embed чуть компактнее */
body.is-embedded .hero-modern { padding: 24px 0 !important; }
body.is-embedded .hero-modern__title { font-size: clamp(1.4rem, 3vw, 1.9rem) !important; }
body.is-embedded .hero-modern__lead { font-size: 0.95rem !important; }

/* Брендирование — компактная плашка с логотипом сверху (опционально) */
body.is-embedded .embed-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  font-size: 0.85rem;
  color: var(--c-muted);
}
body.is-embedded .embed-brand img {
  height: 28px;
}
body.is-embedded .embed-brand a {
  color: var(--c-primary);
  text-decoration: none;
  margin-left: auto;
}
body.is-embedded .embed-brand a:hover { text-decoration: underline; }

/* ============================================================================
   v14 — Embed-режим: страница используется внутри iframe школьного сайта
   ========================================================================= */

/* Применяется когда:
   - URL содержит ?embed=1
   - страница реально внутри iframe (выставляется JS)
   .is-embedded на html добавляет JS embedBridge,
   .is-embedded на body добавляется PHP при ?embed=1
*/

html.is-embedded,
body.is-embedded {
  /* Прозрачный фон позволяет родительскому сайту просвечивать */
  background: transparent !important;
}

/* Скрываем элементы платформы, которые дублируют шапку родительского сайта */
body.is-embedded .contact-bar,
body.is-embedded .site-header,
body.is-embedded .site-footer,
body.is-embedded .floating-action,
body.is-embedded .fab,
body.is-embedded [data-fab],
body.is-embedded .scroll-top {
  display: none !important;
}

/* Убираем большие отступы — внутри iframe нужна компактность */
body.is-embedded {
  padding: 0 !important;
  margin: 0 !important;
}

body.is-embedded main,
body.is-embedded [data-app-root] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.is-embedded .container {
  padding-left: clamp(12px, 2vw, 20px);
  padding-right: clamp(12px, 2vw, 20px);
}

/* hero-секция компактнее */
body.is-embedded .hero-modern {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  min-height: auto;
}
body.is-embedded .hero-modern__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

/* Конкретные view'ы (через ?view=catalog, ?view=teachers и т.д.) */
body[data-embed-view="catalog"] [data-app-root] > section:first-child {
  /* hero может быть ужат для каталога */
}

/* Подсветка focus в embed-режиме (важно для accessibility внутри iframe) */
body.is-embedded a:focus-visible,
body.is-embedded button:focus-visible,
body.is-embedded input:focus-visible,
body.is-embedded select:focus-visible,
body.is-embedded textarea:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Доменный «бейдж» — небольшая ссылка «открыть на платформе»
   в углу — для прозрачности кто провайдер */
body.is-embedded::after {
  content: '';
  position: fixed;
  bottom: 8px; right: 8px;
  z-index: 9000;
  pointer-events: none;
}

.embed-platform-badge {
  position: fixed;
  bottom: 8px;
  right: 8px;
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-line);
  text-decoration: none;
  z-index: 9001;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.embed-platform-badge:hover { opacity: 1; }
body:not(.is-embedded) .embed-platform-badge { display: none; }

/* ═══════════════════════════════════════════════════════════════
   v16 — Панель интеграции с ЕСЗ
   ═══════════════════════════════════════════════════════════════ */
.esz-panel { display: flex; flex-direction: column; gap: var(--s-5); }

.esz-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.esz-head__title {
  font-family: var(--ff-display); font-size: 1.5rem; font-weight: 700;
  margin: 0 0 4px; color: var(--c-ink);
}
.esz-head__sub { color: var(--c-muted); font-size: 0.9rem; margin: 0; }

.esz-badge {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--r-full);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.esz-badge--on   { background: rgba(91,168,137,0.15);  color: #3D7A5E; }
.esz-badge--off  { background: var(--c-surface-3);     color: var(--c-muted); }
.esz-badge--warn { background: rgba(224,169,63,0.18);  color: #9A6E1C; }
html[data-theme="dark"] .esz-badge--on   { background: rgba(91,168,137,0.22); color: #8FD3B3; }
html[data-theme="dark"] .esz-badge--warn { background: rgba(224,169,63,0.22);  color: #E8C56B; }

.esz-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
}
.esz-card__title {
  font-family: var(--ff-display); font-size: 1.1rem; font-weight: 600;
  margin: 0 0 var(--s-3); color: var(--c-ink);
}
.esz-card__hint {
  color: var(--c-muted); font-size: 0.88rem; line-height: 1.5;
  margin: 0 0 var(--s-4);
}
.esz-card__hint b { color: var(--c-ink-2); }

.esz-label {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--c-ink-2); margin: var(--s-3) 0 6px;
}
.esz-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-body); font-size: 0.92rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.esz-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
.esz-input--area { resize: vertical; font-family: var(--ff-mono); font-size: 0.82rem; }

.esz-actions {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4);
}

.esz-msg {
  margin-top: var(--s-3); padding: 0;
  font-size: 0.88rem; line-height: 1.5;
}
.esz-msg:empty { display: none; }
.esz-msg--ok  { padding: 10px 14px; border-radius: var(--r-sm);
  background: rgba(91,168,137,0.12); color: #3D7A5E; }
.esz-msg--err { padding: 10px 14px; border-radius: var(--r-sm);
  background: rgba(217,105,79,0.12); color: #B5462E; }
html[data-theme="dark"] .esz-msg--ok  { color: #8FD3B3; }
html[data-theme="dark"] .esz-msg--err { color: #F0A890; }

.esz-info {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 8px var(--s-4);
}
.esz-info__k { color: var(--c-muted); font-size: 0.86rem; }
.esz-info__v { color: var(--c-ink); font-size: 0.9rem; font-weight: 500; }

.esz-preview { margin-top: var(--s-4); }
.esz-preview__count {
  font-weight: 600; color: var(--c-primary-3);
  margin-bottom: var(--s-3); font-size: 0.92rem;
}
.esz-preview__more {
  margin-top: var(--s-3); color: var(--c-muted);
  font-size: 0.84rem; font-style: italic;
}

.esz-table {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.esz-table__head, .esz-table__row {
  display: grid;
  grid-template-columns: 2.4fr 2fr 0.9fr 1.1fr;
  gap: var(--s-3);
  padding: 10px 14px;
  align-items: center;
}
.esz-table--log .esz-table__head,
.esz-table--log .esz-table__row {
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr;
}
.esz-table__head {
  background: var(--c-surface-2);
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--c-muted);
}
.esz-table__row {
  border-top: 1px solid var(--c-line);
  font-size: 0.86rem;
}
.esz-table__row:nth-child(even) { background: var(--c-surface-2); }
.esz-table__name { font-weight: 600; color: var(--c-ink); }
.esz-table__cls  { color: var(--c-muted); font-size: 0.82rem; }

.esz-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 600;
}
.esz-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.esz-dot--on::before   { background: #5BA889; }
.esz-dot--off::before  { background: var(--c-muted); }
.esz-dot--warn::before { background: #E0A93F; }
.esz-dot--on   { color: #3D7A5E; }
.esz-dot--off  { color: var(--c-muted); }
.esz-dot--warn { color: #9A6E1C; }
html[data-theme="dark"] .esz-dot--on { color: #8FD3B3; }

@media (max-width: 700px) {
  .esz-table__head { display: none; }
  .esz-table__row {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px var(--s-3);
  }
  .esz-table__name { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════
   v17 — Оплата через Т-Банк (QR СБП + карта)
   ═══════════════════════════════════════════════════════════════ */
.workshop-price-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: var(--s-4);
  background: linear-gradient(135deg, rgba(236,197,107,0.15), rgba(238,155,126,0.12));
  border: 1px solid rgba(236,197,107,0.4);
  border-radius: var(--r-sm);
  font-weight: 500; color: var(--c-ink);
}
.workshop-price-banner__icon { font-size: 1.2rem; }

.radio-row { display: flex; gap: 10px; margin-top: 6px; }
.radio-tile {
  flex: 1; cursor: pointer;
  padding: 12px 14px;
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  text-align: center;
  font-size: 0.92rem;
  transition: all 0.2s var(--ease);
}
.radio-tile:hover { border-color: var(--c-primary); }
.radio-tile input { display: none; }
.radio-tile:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary-3);
  font-weight: 600;
}

.payment-modal {
  max-width: 520px;
}
.payment-summary {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: 16px;
  margin: var(--s-4) 0;
}
.payment-summary__title {
  font-weight: 600; color: var(--c-ink);
  margin-bottom: 10px;
}
.payment-summary__row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 4px 0;
  font-size: 0.92rem;
}
.payment-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 0.82rem; font-weight: 600;
}
.payment-status--awaiting {
  background: rgba(224,169,63,0.15); color: #9A6E1C;
}
.payment-status--paid {
  background: rgba(91,168,137,0.18); color: #2D6E50;
}
.payment-status--failed {
  background: rgba(217,105,79,0.15); color: #B5462E;
}

.payment-test-banner {
  margin: var(--s-3) 0;
  padding: 8px 14px;
  background: rgba(224,169,63,0.12);
  border-left: 3px solid var(--c-amber);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  color: #9A6E1C;
}

.payment-tabs {
  display: flex; gap: 4px;
  margin: var(--s-4) 0 var(--s-3);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: 4px;
}
.payment-tab {
  flex: 1;
  padding: 9px 14px;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  font-size: 0.9rem; font-weight: 500;
  font-family: var(--ff-body);
  color: var(--c-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.payment-tab:hover { color: var(--c-ink); }
.payment-tab.is-active {
  background: var(--c-surface);
  color: var(--c-primary-3);
  box-shadow: var(--sh-1);
}

.payment-panel { padding: 8px 0; }
.payment-qr-wrap {
  display: flex; justify-content: center;
  margin: var(--s-3) 0;
}
.payment-qr {
  width: 240px; height: 240px;
  border: 8px solid white;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  background: white;
}
.payment-hint {
  color: var(--c-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
  margin: var(--s-3) 0 0;
}
.payment-qr-fallback {
  padding: 16px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  text-align: center;
}
.payment-link {
  display: inline-block;
  word-break: break-all;
  padding: 8px 12px;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  color: var(--c-primary-3);
  text-decoration: none;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  margin-top: 8px;
}
.payment-pay-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: var(--s-4) 0;
}

.payment-foot {
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}

/* ───  Админка: вкладка платежей  ─── */
.payments-panel { display: flex; flex-direction: column; gap: var(--s-4); }
.payments-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
}
.payments-stat {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 14px 18px;
}
.payments-stat__num {
  font-family: var(--ff-display);
  font-size: 1.6rem; font-weight: 700;
  color: var(--c-ink);
}
.payments-stat__lbl {
  font-size: 0.78rem; text-transform: uppercase;
  color: var(--c-muted); letter-spacing: 0.04em;
}

.payments-table {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.payments-table__head, .payments-table__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 1.6fr 0.9fr 0.7fr;
  gap: var(--s-3);
  padding: 10px 16px;
  align-items: center;
  font-size: 0.86rem;
}
.payments-table__head {
  background: var(--c-surface-2);
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--c-muted);
}
.payments-table__row {
  border-top: 1px solid var(--c-line);
}
.payments-table__row:hover { background: var(--c-surface-2); }
.payments-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.payments-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--r-full);
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
}
.payments-status-badge--paid    { background: rgba(91,168,137,0.18); color: #2D6E50; }
.payments-status-badge--pending,
.payments-status-badge--awaiting_payment { background: rgba(224,169,63,0.15); color: #9A6E1C; }
.payments-status-badge--failed,
.payments-status-badge--cancelled { background: rgba(217,105,79,0.15); color: #B5462E; }
.payments-status-badge--refunded { background: rgba(91,159,168,0.18); color: #2D5F6B; }

/* TBank-настройки в админке */
.tbank-settings {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.tbank-settings__title {
  font-family: var(--ff-display);
  font-size: 1.1rem; font-weight: 600;
  margin: 0 0 var(--s-3);
}
.tbank-settings__hint {
  color: var(--c-muted);
  font-size: 0.88rem;
  margin: 0 0 var(--s-3);
}

@media (max-width: 700px) {
  .payments-table__head { display: none; }
  .payments-table__row {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px var(--s-3);
  }
  .payments-table__row > div:first-child { grid-column: 1 / -1; font-weight: 600; }
}

/* ═══════════════════════════════════════════════════════════════
   v18 — Inline CMS-редактор контента
   ═══════════════════════════════════════════════════════════════ */
.cms-edit .cms-editable {
  outline: 2px dashed rgba(79, 168, 163, 0.4);
  outline-offset: 3px;
  border-radius: 4px;
  cursor: text;
  transition: outline-color 0.15s ease;
  min-width: 12px;
  min-height: 1em;
}
.cms-edit .cms-editable:hover {
  outline-color: var(--c-primary);
  background: rgba(79, 168, 163, 0.06);
}
.cms-edit .cms-editable.cms-focus {
  outline: 2px solid var(--c-primary);
  background: rgba(79, 168, 163, 0.1);
  box-shadow: 0 0 0 4px rgba(79, 168, 163, 0.15);
}
.cms-edit .cms-editable.cms-changed {
  outline-color: var(--c-amber);
}
.cms-edit .cms-editable.cms-saved {
  outline-color: #5BA889;
  background: rgba(91, 168, 137, 0.15);
}
.cms-edit .cms-editable.cms-error {
  outline-color: var(--c-danger);
  background: rgba(217, 105, 79, 0.1);
}

/* Тулбар режима редактирования */
.cms-toolbar {
  position: fixed;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  background: var(--c-ink);
  color: white;
  border-radius: var(--r-full);
  padding: 10px 18px 10px 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  font-size: 0.86rem;
  max-width: 90vw;
}
.cms-toolbar__inner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cms-toolbar__dot {
  width: 10px; height: 10px;
  background: #5BA889;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(91,168,137,0.3);
  animation: cmsPulse 1.5s ease-in-out infinite;
}
@keyframes cmsPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(91,168,137,0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(91,168,137,0.1); }
}
.cms-toolbar__title { font-weight: 700; }
.cms-toolbar__hint { opacity: 0.8; font-size: 0.78rem; }
.cms-toolbar__btn {
  margin-left: auto;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.cms-toolbar__btn:hover { background: rgba(255,255,255,0.25); }

/* Не подсвечивать пустые редактируемые элементы внутри контейнеров */
.cms-edit .cms-editable:empty::before {
  content: '✎ Введите текст';
  color: var(--c-muted);
  opacity: 0.6;
}

/* Кнопка-переключатель режима для админа */
.cms-edit-toggle {
  position: fixed;
  bottom: 86px; right: 24px;
  z-index: 99997;
  background: var(--grad-primary);
  color: white;
  border: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  box-shadow: 0 6px 18px var(--c-primary-glow);
  cursor: pointer;
  font-size: 22px;
  transition: transform 0.2s var(--ease-bounce);
}
.cms-edit-toggle:hover { transform: scale(1.08) rotate(-5deg); }
.cms-edit-toggle:active { transform: scale(0.95); }

@media (max-width: 700px) {
  .cms-toolbar {
    bottom: 8px;
    padding: 8px 14px;
    font-size: 0.78rem;
  }
  .cms-toolbar__hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   v18 — Mobile UX-фиксы (iPhone)
   ═══════════════════════════════════════════════════════════════ */

/* Убираем серую подсветку iOS при тапе на ссылки/кнопки */
a, button, [role="button"], .burger, .icon-btn,
.btn, .btn-modern, .socials__link, .main-nav a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* На touch-устройствах — отключаем hover-эффекты, чтобы не было «залипающего» состояния
   после тапа (классическая проблема iOS, когда hover остаётся пока не тапнешь в другое место) */
@media (hover: none) and (pointer: coarse) {
  /* На touch стиль hover должен либо не сработать, либо мгновенно скрываться */
  .main-nav a:hover,
  .btn:hover,
  .btn-modern:hover,
  .icon-btn:hover,
  .socials__link:hover,
  .burger:hover {
    background: initial;
    transform: none;
    color: inherit;
  }
  /* Возвращаем правильные цвета для активных состояний */
  .main-nav a.is-active { color: var(--c-primary); }
  .icon-btn.is-active { background: var(--c-primary); color: white; border-color: var(--c-primary); }
}

/* Tap-area минимум 44×44px (рекомендация Apple HIG / Material) */
@media (max-width: 1023px) {
  .icon-btn, .burger, .header-actions a.btn, .socials__link {
    min-width: 44px;
    min-height: 44px;
  }
  /* Все ссылки в мобильном меню — большие */
  .main-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* Никаких CSS-touch конфликтов */
.main-nav, .mobile-menu, .modal-card, .modal-backdrop {
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════════
   v19 — Табы на странице программы
   ═══════════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-line);
  margin: var(--s-5) 0 var(--s-4);
  flex-wrap: wrap;
  position: relative;
}
.tab {
  background: transparent;
  border: 0;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink-2);
  cursor: pointer;
  border-radius: var(--r-md) var(--r-md) 0 0;
  position: relative;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
  white-space: nowrap;
  font-family: inherit;
}
.tab:hover {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.tab.is-active {
  color: var(--c-primary-3); /* v39.24: 4.75 на мятной вуали hero (было 3.77) */
  background: transparent;
}
.tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: -1px;
  height: 3px;
  background: var(--grad-primary);
  border-radius: 3px 3px 0 0;
}
.tab:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Контент таба: видим только активный */
.tab-panel {
  display: none;
  padding: var(--s-5) 0;
  animation: tabFadeIn 0.25s var(--ease);
}
.tab-panel.is-active {
  display: block;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Расписание программы */
.schedule-grid {
  display: grid;
  gap: 10px;
  margin-top: var(--s-3);
}
.schedule-row {
  display: grid;
  grid-template-columns: 140px 180px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: 14px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease);
}
.schedule-row:hover {
  border-color: var(--c-primary);
}
.schedule-row__day {
  font-weight: 600;
  color: var(--c-ink);
  font-size: 0.95rem;
}
.schedule-row__time {
  color: var(--c-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.schedule-row__room {
  color: var(--c-ink-2);
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .schedule-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }
  .schedule-row__day { font-size: 1rem; }
}

/* Отзывы */
.review {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.review__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
}
.review__author {
  font-weight: 600;
  color: var(--c-ink);
}
.review__stars {
  color: var(--c-amber);
  letter-spacing: 2px;
  font-size: 0.95rem;
}
.review__title {
  font-weight: 600;
  margin: 0 0 6px;
}

/* ═══════════════════════════════════════════════════════════════
   v20 — АНТИ-ОБРЕЗКА ТЕКСТА: глобальные правила
   ═══════════════════════════════════════════════════════════════
   Принцип: ни один текстовый элемент не должен обрезаться. Длинные
   слова и числа переносятся, контейнеры ужимаются ниже content-width
   когда нужно. Если контейнер flex/grid item — он должен иметь
   `min-width: 0` чтобы grid позволил сжать ниже min-content.
   ─────────────────────────────────────────────────────────────── */

/* Базовое правило для всех текстовых элементов:
   длинные слова переносятся вместо обрезки. */
body,
p, li, dd, dt, td, th, caption, blockquote, figcaption,
h1, h2, h3, h4, h5, h6,
small, label, summary,
a, button, span, strong, em, b, i {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Контейнеры с flex/grid — все потомки могут уменьшаться ниже content-width.
   Это решает большинство «обрезок» в каточках статистики/контактов/счётчиках. */
.stats > *, .stats-grid > *, .stat, .kpi, .kpi-grid > *,
.admin-stat-card, .admin-stats > *,
.directions-grid > *, .direction-tile,
.section-modern__head > *, .card, .card__inner,
.review, .schedule-row, .schedule-row > *,
.site-footer__col, .site-footer__inner > *,
.contact-bar > *, .contact-bar__socials,
.value-card, .values-grid > *,
.hero-modern__inner > *, .hero-modern__ctas > *,
.tabs > *, .program-side > *, .program-hero > *,
.featured-tile, .featured-tile > * {
  min-width: 0;
}

/* Счётчики — автоадаптивный шрифт.
   Использую CSS container queries: размер шрифта зависит от ширины СВОЕЙ
   карточки (.stat), а не от viewport. Это значит на узких карточках
   шрифт автоматически уменьшается, чтобы число поместилось ОДНОЙ строкой. */
.stat, .admin-stat-card, .kpi {
  container-type: inline-size;
  container-name: statcard;
}
.stat__num,
.admin-stat-card__num,
.kpi__num,
.about-stat__num {
  /* Базовый размер: 25% ширины контейнера, но не меньше 1.4rem и не больше 2.4rem.
     На 180px-карточке = 45px → 36px шрифт (max-2.4rem). "5 000+" поместится. */
  font-size: clamp(1.4rem, 22cqi, 2.4rem);
  line-height: 1.05;
  max-width: 100%;
  overflow-wrap: anywhere;
  /* Не разрешаем перенос внутри числа — лучше ужмём шрифт */
  white-space: nowrap;
  text-overflow: clip;
}
/* Fallback: браузеры без container queries (старые) — используем viewport-based */
@supports not (container-type: inline-size) {
  .stat__num, .admin-stat-card__num, .kpi__num, .about-stat__num {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    white-space: normal;
  }
}

/* Длинные слова в заголовках — переносим без дефиса (не подходит для цифр) */
h1, .program-hero__title, .hero-modern__title, .section-modern__title,
.section__title, .about-hero__title {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Длинные ссылки (email, URL) — не дают сломать карточку */
.site-footer__col a, .contact-bar a, .review p, .program-hero__lead a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Полноразмерные плитки с фиксированной шириной — позволяем уменьшаться */
.featured-tile, .hero-collage__card, .direction-tile {
  min-width: 0;
}

/* Карточки в гридах — гарантия что текст не лезет за рамки */
.card, .program-card, .event-card, .workshop-card, .teacher-card,
.contest-card, .holiday-card, .trial-card, .vacancy-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* В горизонтальных navigation/tabs списках элементы получают ellipsis
   если общая длина превышает контейнер */
.main-nav, .tabs, .admin-tabs {
  min-width: 0;
}

/* Когда контейнер слишком узкий, кнопки в формах ужимаются */
form button, form input, form select, form textarea {
  min-width: 0; max-width: 100%;
}

/* На мобиле статистика может стать одноколоночной, чтобы числа точно помещались */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat__num { font-size: clamp(1.4rem, 8vw, 2rem); }
}

/* Защита от горизонтального скролла страницы целиком */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ═══════════════════════════════════════════════════════════════
   v23 — Палитра для /schedule (холодная вместо персиковой)
   ═══════════════════════════════════════════════════════════════ */
.gradient-text--cool,
.accent--cool {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--c-primary);
}
.schedule-hero,
.page-schedule .hero-modern,
[data-app-root].page-schedule > section:first-child {
  /* Спокойный холодный градиент вместо персик-кремового */
  background: linear-gradient(135deg,
    rgba(78, 184, 174, 0.10) 0%,
    rgba(255, 255, 255, 0.95) 60%,
    rgba(78, 184, 174, 0.08) 100%);
}
.schedule-hero .kicker {
  background: rgba(78, 184, 174, 0.15);
  color: var(--c-primary-3);
}
/* v32.19: На светлом фоне schedule-hero текст "Когда заниматься?" должен быть тёмным
 * (раньше он наследовал белый из старых hero-стилей и сливался с фоном) */
.schedule-hero .about-hero__title {
  color: var(--c-ink, #2C2925);
}
.schedule-hero .hero__lead {
  color: var(--c-ink-2, #5C5648);
}
/* v32.19: page-schedule использует pageHero() → hero-modern — тот же фикс */
.page-schedule .hero-modern__title,
.page-schedule .hero-modern__kicker {
  color: var(--c-ink, #2C2925) !important;
}
.page-schedule .hero-modern__lead {
  color: var(--c-ink-2, #5C5648) !important;
}
.page-schedule .hero-modern__kicker {
  background: rgba(78, 184, 174, 0.15);
}

/* v32: Тёмная тема для блока «Когда удобно заниматься?» —
 * специальный градиент с приглушённой бирюзой и контрастным белым текстом. */
:root[data-theme='dark'] .schedule-hero,
:root[data-theme='dark'] .page-schedule .hero-modern,
:root[data-theme='dark'] [data-app-root].page-schedule > section:first-child {
  background: linear-gradient(135deg,
    rgba(78, 184, 174, 0.18) 0%,
    rgba(30, 40, 50, 0.7)    50%,
    rgba(78, 184, 174, 0.12) 100%);
  border-bottom: 1px solid rgba(78, 184, 174, 0.25);
}
:root[data-theme='dark'] .schedule-hero .kicker {
  background: rgba(78, 184, 174, 0.22);
  color: #6FDDD0;
}
:root[data-theme='dark'] .schedule-hero .gradient-text--cool {
  background: linear-gradient(90deg, #6FDDD0, #A8E6E1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme='dark'] .schedule-hero .hero__lead {
  color: rgba(255,255,255,0.78);
}

/* v32: Переключатель режима расписания (по дням / по датам) */
.schedule-mode-tabs {
  display: flex; gap: 6px; margin: 0 auto 24px; max-width: 540px;
  padding: 6px;
  background: var(--c-surface-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
}
.schedule-mode-tabs button {
  flex: 1; padding: 10px 16px;
  background: transparent; border: 0; border-radius: calc(var(--r-lg) - 6px);
  color: var(--c-ink-2); font-weight: 500; font-size: .92rem;
  cursor: pointer; transition: all .2s var(--ease);
}
.schedule-mode-tabs button.is-active {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(78, 184, 174, 0.3);
}

/* v32: Список «по датам» */
.schedule-by-date { display: flex; flex-direction: column; gap: 20px; }
.schedule-by-date__day {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 22px;
}
.schedule-by-date__date {
  font-weight: 700; font-size: 1.1rem;
  color: var(--c-primary);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 8px;
}
.schedule-by-date__events { display: flex; flex-direction: column; gap: 8px; }
.schedule-by-date__event {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px; align-items: center;
  padding: 8px 0;
  font-size: .94rem;
}
.schedule-by-date__time { font-family: monospace; color: var(--c-ink-2); }
.schedule-by-date__title { font-weight: 500; }
.schedule-by-date__kind {
  font-size: .78rem; color: #fff;
  padding: 3px 10px; border-radius: 999px;
  background: var(--c-primary);
}
.schedule-by-date__kind--workshop  { background: #B07AD9; }
.schedule-by-date__kind--longevity { background: #E8A04F; }
.schedule-by-date__kind--event     { background: #6FDDD0; color: #143A36; }

/* ═══════════════════════════════════════════════════════════════
   v23 — ЕСЗ bulk-таблица в админке
   ═══════════════════════════════════════════════════════════════ */
.esz-bulk-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px; margin-bottom: 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.esz-bulk-counter {
  font-weight: 600; color: var(--c-primary);
  margin-right: auto; font-size: 0.95rem;
}
.esz-bulk-grid {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.esz-bulk-row {
  display: grid;
  grid-template-columns: 32px 2fr 1.5fr 1fr 60px 80px 130px;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.92rem;
}
.esz-bulk-row:last-child { border-bottom: 0; }
.esz-bulk-row--head {
  background: var(--c-surface-2);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--c-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.esz-bulk-row a {
  color: var(--c-primary);
  text-decoration: none;
}
.esz-bulk-row a:hover { text-decoration: underline; }
.esz-bulk-row input[type="checkbox"] { transform: scale(1.2); cursor: pointer; }
.btn-modern--danger {
  background: rgba(220, 70, 70, 0.1);
  color: #d24343;
  border-color: rgba(220, 70, 70, 0.3);
}
.btn-modern--danger:hover {
  background: rgba(220, 70, 70, 0.2);
}

@media (max-width: 768px) {
  .esz-bulk-row {
    grid-template-columns: 32px 1fr;
    grid-auto-rows: auto;
  }
  .esz-bulk-row--head { display: none; }
  .esz-bulk-row > div:nth-child(n+3) {
    grid-column: 2;
    font-size: 0.85rem; color: var(--c-ink-2);
  }
}

/* ─── Группы (ServiceClass) на странице программы ─── */
.program-groups {
  margin-top: var(--s-5);
}
.program-group {
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.program-group__head {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.program-group__name { font-weight: 600; }
.program-group__seats {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.program-group__seats--full { color: #d24343; }
.program-group__seats--free { color: var(--c-primary-3); }
.program-group__sched {
  color: var(--c-ink-2);
  font-size: 0.9rem;
  margin: 4px 0;
}
.program-group__meta {
  color: var(--c-ink-2);
  font-size: 0.85rem;
}

/* v23: дополнительные стили для admin-секций (каникулы и т.д.) */
.form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) { .form-grid--2 { grid-template-columns: 1fr; } }
.admin-section__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-4); gap: var(--s-3); flex-wrap: wrap;
}
.admin-section__head h2 { margin: 0; }
/* v24: контейнер div.admin-table для каникул (grid-таблица).
   ВАЖНО: только div, чтобы не ломать table.admin-table в других вкладках. */
div.admin-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.admin-table__row {
  display: grid;
  grid-template-columns: 2fr 100px 1.5fr 80px 90px 110px 90px;
  gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--c-line);
  align-items: center;
  font-size: 0.92rem;
}
.admin-table__row:last-child { border-bottom: 0; }
.admin-table__row--head {
  background: var(--c-surface-2);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--c-ink-2);
  text-transform: uppercase;
}
.admin-table__actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn-icon {
  background: transparent; border: 1px solid var(--c-line);
  border-radius: var(--r-sm); padding: 6px 10px;
  cursor: pointer; transition: all 0.18s var(--ease);
}
.btn-icon:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.btn-icon--danger:hover { background: rgba(220, 70, 70, 0.1); border-color: #d24343; }
.form-row--inline { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row--inline label { display: flex; gap: 6px; align-items: center; cursor: pointer; }

@media (max-width: 768px) {
  .admin-table__row {
    grid-template-columns: 1fr auto;
  }
  .admin-table__row > div:not(:first-child):not(:last-child) {
    grid-column: 1; font-size: 0.85rem; color: var(--c-ink-2);
  }
  .admin-table__row--head { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   v27 — Блок «Записаться через mos.ru» с QR-кодом
   ═══════════════════════════════════════════════════════════════ */
.mosru-enroll {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: linear-gradient(135deg,
    rgba(78, 184, 174, 0.06) 0%,
    rgba(255, 255, 255, 0.92) 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mosru-enroll__head {
  display: flex; gap: 12px; align-items: center;
}
.mosru-enroll__icon {
  font-size: 1.6rem; flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(78, 184, 174, 0.12);
  border-radius: 50%;
}
.mosru-enroll__head strong {
  display: block;
  font-size: 0.98rem;
  color: var(--c-ink);
}
.mosru-enroll__hint {
  font-size: 0.78rem;
  color: var(--c-ink-2);
  margin-top: 2px;
}
.mosru-enroll__qr-wrap {
  display: flex; justify-content: center;
  padding: 8px;
  background: #fff;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
}
.mosru-enroll__qr {
  display: block; line-height: 0;
  max-width: 100%;
}
.mosru-enroll__qr svg {
  display: block; max-width: 100%; height: auto;
}
.mosru-enroll__btn {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  padding: 10px 14px;
}
/* Компактный (в боковой колонке программы) — QR немного меньше */
.mosru-enroll--compact { padding: var(--s-3); gap: 10px; }
.mosru-enroll--compact .mosru-enroll__icon { font-size: 1.4rem; width: 32px; height: 32px; }
.mosru-enroll--compact .mosru-enroll__head strong { font-size: 0.92rem; }
.mosru-enroll--compact .mosru-enroll__qr-wrap { padding: 6px; }

/* ═══════════════════════════════════════════════════════════════
   v30 — Раздел «Долголетие»: карточки программ + чипы
   ═══════════════════════════════════════════════════════════════ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}
.card--longevity {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card--longevity:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.card--longevity.card--featured {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.card__cover {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-surface-2);
}
.card__cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    rgba(78, 184, 174, 0.10),
    rgba(78, 184, 174, 0.02));
}
.card__body { padding: var(--s-4); }
.card__cat {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--c-ink-2);
  margin-bottom: 8px;
}
.card__title {
  font-size: 1.1rem;
  margin: 0 0 10px;
  line-height: 1.3;
}
.card__desc {
  font-size: 0.92rem;
  color: var(--c-ink-2);
  margin: 0 0 12px;
  line-height: 1.5;
}
.card__meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--c-ink-2);
}
.card__schedule {
  margin-top: 10px;
  font-size: 0.85rem;
}

/* Чипы фильтра категорий */
.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.18s var(--ease);
}
.chip:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
}
.chip.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* Страница программы Долголетия */
.program-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-5);
}
@media (max-width: 768px) {
  .program-grid { grid-template-columns: 1fr; }
}
.program-title { font-size: 2rem; margin: 8px 0 16px; line-height: 1.2; }
.program-lead { font-size: 1.1rem; color: var(--c-ink-2); margin-bottom: 24px; }
.program-desc p { margin: 0 0 16px; line-height: 1.65; }
.badge.badge--cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 600;
}
.program-aside {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  align-self: start;
}
.program-meta > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.92rem;
}
.program-meta > div:last-child { border-bottom: 0; }
.program-meta dt {
  color: var(--c-ink-2);
  font-size: 0.82rem;
  margin: 0;
}
.program-meta dd { margin: 0; }
.back-link {
  display: inline-block;
  color: var(--c-ink-2);
  text-decoration: none;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--c-primary); }

/* v32: блоки featured items на главной */
.home-feat-blocks { display: flex; flex-direction: column; gap: 16px; }
.home-feat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.home-feat__card {
  display: block; text-decoration: none; color: inherit;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.home-feat__card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.home-feat__cover {
  width: 100%; height: 140px;
  background-size: cover; background-position: center;
  background-color: var(--c-surface-2);
}
.home-feat__cover--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, rgba(78,184,174,.10), rgba(78,184,174,.02));
}
.home-feat__body { padding: 14px; }
.home-feat__title { font-size: 1rem; margin: 0 0 8px; line-height: 1.3; }
.home-feat__desc { font-size: .88rem; color: var(--c-ink-2); margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-feat__meta { font-size: .82rem; color: var(--c-ink-3); }

/* v32: Публичная страница оферты — компактные заголовки */
.offer-page__content article.offer,
.offer-page__content {
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--c-ink);
}
.offer-page__content h1,
.offer-page article.offer > h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  font-family: var(--ff-display, inherit);
}
.offer-page__content h2,
.offer-page article.offer h2 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  margin: 28px 0 10px;
  color: var(--c-primary-3);
  line-height: 1.3;
}
.offer-page__content h3,
.offer-page article.offer h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 18px 0 8px;
}
.offer-page__content p { margin: 0 0 10px; font-size: 0.95rem; }
.offer-page__content .muted { color: var(--c-ink-2); font-size: 0.85rem; }
.offer-page__content ul.offer__ps,
.offer-page__content ul {
  margin: 8px 0 14px;
  padding-left: 20px;
}
.offer-page__content section {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.offer-page__content section:last-child { border-bottom: 0; }

/* Аналогичные размеры в превью в админке */
.offer-preview h1 { font-size: 1.4rem !important; margin: 0 0 8px; line-height: 1.3; }
.offer-preview h2 { font-size: 1.05rem !important; margin: 20px 0 8px; color: var(--c-primary); }
.offer-preview h3 { font-size: 0.95rem !important; margin: 12px 0 6px; }
.offer-preview p  { font-size: 0.88rem; margin: 0 0 8px; }

/* ════════════════════════════════════════════════════════════════════
   v32.4: Заявки об отсутствии ребёнка — переработанный UI
   ════════════════════════════════════════════════════════════════════ */

/* Карточки заявок в списке */
.absence-card {
  display: flex; gap: 14px;
  padding: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.absence-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(78,184,174,.08);
}
.absence-card__main { flex: 1; min-width: 0; }
.absence-card__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.absence-card__child {
  font-weight: 600; font-size: 1rem; color: var(--c-ink);
}
.absence-card__status {
  font-size: .78rem; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap;
  font-weight: 500;
}
.absence-status--pending { background: rgba(255,168,82,.15); color: #d97706; }
.absence-status--ok      { background: rgba(34,197,94,.15); color: #16a34a; }
.absence-status--err     { background: rgba(239,68,68,.15); color: #dc2626; }

.absence-card__meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: .85rem; color: var(--c-ink-2);
  margin-bottom: 8px;
}
.absence-card__cert {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; color: var(--c-primary);
  text-decoration: none; margin-top: 4px;
  padding: 4px 10px; background: rgba(78,184,174,.08);
  border-radius: 6px; transition: background .15s;
}
.absence-card__cert:hover { background: rgba(78,184,174,.18); }
.absence-card__comment {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-primary);
  border-radius: 6px;
  font-size: .85rem;
  color: var(--c-ink-2);
}

/* Форма заявки в модалке */
.absence-form {
  display: flex; flex-direction: column;
  width: min(520px, 92vw);
  max-height: 86vh;
  background: var(--c-surface);
  border-radius: 16px;
  overflow: hidden;
}
.absence-form__header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--c-line);
}
.absence-form__title {
  margin: 0; font-size: 1.25rem; font-weight: 600;
  font-family: var(--ff-display);
}
.absence-form__subtitle {
  margin: 6px 0 0; color: var(--c-ink-2);
  font-size: .88rem; line-height: 1.5;
}
.absence-form__body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.absence-form__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.absence-form__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--c-line);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--c-surface);
}
.absence-field {
  display: flex; flex-direction: column; gap: 6px;
}
.absence-field > label {
  font-size: .85rem; color: var(--c-ink-2); font-weight: 500;
}
.absence-field__req { color: #dc2626; }
.absence-field__input {
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: .95rem;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.absence-field__input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(78,184,174,.15);
}
.absence-field textarea.absence-field__input {
  resize: vertical; min-height: 70px;
}

/* Drop-zone для файла */
.absence-dropzone {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 2px dashed var(--c-line);
  border-radius: 10px;
  background: var(--c-surface-2);
  transition: all .15s var(--ease);
  cursor: pointer;
}
.absence-dropzone.is-hover {
  border-color: var(--c-primary);
  background: rgba(78,184,174,.06);
}
.absence-dropzone.is-loading {
  opacity: .6; pointer-events: none;
}
.absence-dropzone__icon {
  font-size: 2rem; flex-shrink: 0;
}
.absence-dropzone__text { flex: 1; }
.absence-dropzone__browse {
  color: var(--c-primary); cursor: pointer;
  font-weight: 500; text-decoration: underline;
}
.absence-dropzone__browse:hover { text-decoration: none; }

/* Превью загруженного файла */
.absence-file-preview { margin-top: 8px; }
.absence-file-preview__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 8px;
}
.absence-file-preview__row--error {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.25);
  color: #dc2626;
}
.absence-file-preview__thumb {
  width: 44px; height: 44px;
  object-fit: cover; border-radius: 6px;
  flex-shrink: 0;
}
.absence-file-preview__remove {
  background: transparent; border: 0;
  font-size: 1.4rem; cursor: pointer;
  color: var(--c-ink-2); padding: 0 6px;
  border-radius: 6px;
}
.absence-file-preview__remove:hover {
  background: rgba(239,68,68,.1); color: #dc2626;
}

/* Мобильная адаптация */
@media (max-width: 540px) {
  .absence-form__grid { grid-template-columns: 1fr; }
  .absence-card { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   v32.10: Красивый билет с QR-кодом + print-разметка
   ════════════════════════════════════════════════════════════════════ */

.ticket-page {
  max-width: 560px;
  margin: 0 auto;
}
.ticket-page__head {
  text-align: center;
  margin-bottom: 28px;
}
.ticket-page__title {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  margin: 0 0 8px;
  color: var(--c-ink);
}

.ticket-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(44,41,37,.08);
  overflow: hidden;
  margin: 0 auto;
  max-width: 460px;
}
.ticket-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  background: #FBF8F1;
  border-bottom: 3px solid var(--c-primary);
}
.ticket-card__brand {
  display: flex; align-items: center; gap: 12px;
}
.ticket-card__logo {
  width: 48px; height: 48px; line-height: 48px;
  border-radius: 12px;
  background: var(--c-primary);
  color: #fff; text-align: center;
  font-family: Georgia, serif;
  font-size: 22px; font-weight: bold;
}
.ticket-card__brand-name {
  font-family: Georgia, serif;
  font-size: 1rem; font-weight: 600;
  color: var(--c-ink);
}
.ticket-card__brand-sub {
  font-family: Georgia, serif;
  font-size: .85rem;
  color: var(--c-ink-2);
  margin-top: 2px;
}
.ticket-card__badge {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em;
  background: var(--c-primary);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
}

.ticket-card__event {
  padding: 22px 28px;
  background: #fff;
  border-bottom: 1px dashed #EAE6DA;
}
.ticket-card__event-title {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  margin: 0 0 14px;
  color: var(--c-ink);
  line-height: 1.3;
}
.ticket-card__event-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 8px 0;
  font-size: .95rem;
  color: var(--c-ink);
}
.ticket-card__event-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ticket-card__qr-wrap {
  padding: 28px;
  background: #fff;
  text-align: center;
}
.ticket-card__qr {
  display: inline-block;
  padding: 16px;
  background: #fff;
  border: 1px solid #EAE6DA;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.ticket-card__qr svg {
  display: block;
  width: 240px; height: 240px;
}
.ticket-card__code {
  margin: 16px auto 0;
  font-family: monospace;
  font-size: .82rem;
  color: var(--c-ink-2);
  word-break: break-all;
  background: #FBF8F1;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 320px;
  letter-spacing: .03em;
}

.ticket-card__footer {
  padding: 16px 28px 22px;
  background: #FBF8F1;
  text-align: center;
}
.ticket-card__hint {
  margin: 0;
  font-size: .82rem;
  color: var(--c-ink-2);
  line-height: 1.55;
}

.ticket-actions {
  display: flex; gap: 12px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* v32.30: контейнер всех билетов (multi-ticket view) */
.ticket-cards-wrap {
  display: flex; flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}

/* v32.30: навигация между билетами группы (на экране) */
.ticket-nav-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center;
  padding: 12px;
  background: rgba(78, 184, 174, 0.05);
  border-radius: 10px;
  margin-bottom: 14px;
}
.ticket-nav-bar__btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--c-ink);
  font-size: 0.88rem;
  transition: all .15s;
}
.ticket-nav-bar__btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.ticket-nav-bar__btn.is-active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* v32.30: тип билета (взр./дет.) в header карточки */
.ticket-card__type {
  text-align: center;
  font-size: 0.88rem;
  color: var(--c-primary);
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(78, 184, 174, 0.08);
  border-radius: 999px;
  margin: -8px auto 12px;
  width: fit-content;
}

/* v32.30: блок суммы в модалках записи */
.ticket-sum-block {
  background: rgba(78, 184, 174, 0.08);
  border: 1px solid rgba(78, 184, 174, 0.25);
  border-radius: 10px;
  padding: 14px;
  margin: 14px 0;
}
.ticket-sum-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 0.92rem;
}
.ticket-sum-row--discount { color: #16a34a; font-size: 0.88rem; }
.ticket-sum-row--total { font-size: 1.08rem; margin-top: 4px; }
.ticket-sum-hr {
  margin: 8px 0;
  border: none;
  border-top: 1px solid rgba(78, 184, 174, 0.2);
}
.ticket-sum-final { color: var(--c-primary); }

/* v32.30: блок выбора количества (взр./дет.) */
.ticket-qty-block {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
.ticket-qty-block__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-ink-2);
  margin-bottom: 10px;
}
.ticket-qty-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ticket-qty-row input[type="number"] {
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
}
html[data-theme="dark"] .ticket-qty-block {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ───────── Print-разметка для билета ─────────
 * v32.23: Гарантируем что билет умещается на ОДНОМ листе A4.
 * v32.30: При множестве билетов — каждый на отдельном листе. */
@media print {
  /* Скрываем всё */
  body * { visibility: hidden; }
  /* Показываем только билеты */
  .ticket-cards-wrap, .ticket-cards-wrap *,
  .ticket-card, .ticket-card * { visibility: visible; }

  /* v32.30: контейнер билетов — обычный flow, чтобы page-break срабатывал */
  .ticket-cards-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  /* Каждый билет — на отдельном листе A4 */
  .ticket-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 160mm !important;
    box-shadow: none !important;
    border: 1px solid #DDD !important;
    border-radius: 12px !important;
    padding: 14mm 12mm !important;
    background: #fff !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: always !important;  /* v32.30: следующий билет — на новом листе */
    break-after: page !important;
    box-sizing: border-box !important;
  }
  /* Последний билет не должен переносить страницу */
  .ticket-card:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* Принудительно белый фон + сброс отступов */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  body {
    display: block !important;
  }

  /* Все элементы которые могут раздвинуть/перенести билет — скрываем.
   * ВАЖНО: .ticket-page НЕ скрываем целиком — это родитель .ticket-card. */
  .ticket-actions, .ticket-page__head, .ticket-nav-bar,
  .ticket-actions--screen, .ticket-page__head--screen,
  header, footer, nav, .site-header, .site-footer,
  [data-modal], .toast-container, .contact-bar, .scroll-progress,
  .fab, [data-fab], .toast {
    display: none !important;
  }

  /* Цвета — печатаем как есть, в т.ч. фоны и градиенты */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Внутренние блоки билета — компактные отступы, не разрываются */
  .ticket-card__header,
  .ticket-card__event,
  .ticket-card__qr-wrap,
  .ticket-card__footer,
  .ticket-card__type {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .ticket-card__header  { margin-bottom: 10mm !important; padding: 0 !important; background: transparent !important; }
  .ticket-card__type    { margin: 0 0 4mm !important; padding: 0 !important; font-size: 11pt !important;
                           font-weight: 600 !important; color: #4EB8AE !important; text-align: center !important; }
  .ticket-card__event   { margin-bottom: 8mm !important; padding: 0 !important; }
  .ticket-card__qr-wrap { margin-bottom: 6mm !important; padding: 0 !important; }
  .ticket-card__footer  { margin-top: 4mm !important; padding: 0 !important; }

  /* QR — фиксированный безопасный размер для одного листа */
  .ticket-card__qr {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 4mm !important;
  }
  .ticket-card__qr svg,
  .ticket-card__qr canvas,
  .ticket-card__qr img {
    width: 60mm !important;
    height: 60mm !important;
    max-width: 60mm !important;
    max-height: 60mm !important;
    display: block !important;
  }

  /* Цифровой код под QR — моноширинный, мелкий */
  .ticket-card__code {
    font-family: monospace !important;
    font-size: 9pt !important;
    text-align: center !important;
    color: #555 !important;
    word-break: break-all !important;
    margin: 0 !important;
  }

  /* Заголовки — компактные */
  .ticket-card__event-title { font-size: 14pt !important; margin: 0 0 4mm !important; }
  .ticket-card__event-row   { font-size: 10pt !important; margin: 1.5mm 0 !important; line-height: 1.3 !important; }
  .ticket-card__hint        { font-size: 9pt !important; color: #666 !important; text-align: center !important; margin: 0 !important; }

  /* Шапка билета — горизонтальная, компактная */
  .ticket-card__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 2px solid #4EB8AE !important;
    padding-bottom: 4mm !important;
  }
  .ticket-card__logo { font-size: 14pt !important; width: 12mm !important; height: 12mm !important; }
  .ticket-card__brand-name { font-size: 11pt !important; }
  .ticket-card__brand-sub  { font-size: 8pt !important; }
  .ticket-card__badge { font-size: 10pt !important; padding: 2mm 4mm !important; }

  /* A4 portrait с разумными полями */
  @page {
    size: A4 portrait;
    margin: 15mm;
  }
}

/* Мобильная адаптация */
@media (max-width: 480px) {
  .ticket-card__header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .ticket-card__qr svg {
    width: 200px; height: 200px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v32.10: Отзывы — список, форма, звёзды
   ════════════════════════════════════════════════════════════════════ */

.reviews-block {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 28px 0;
}
.reviews-block__title {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  margin: 0 0 18px;
  color: var(--c-ink);
}
.reviews-block__summary {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--c-surface-2);
  border-radius: 10px;
}
.reviews-block__avg {
  display: flex; align-items: center; gap: 10px;
}
.reviews-block__avg-value {
  font-family: var(--ff-display);
  font-size: 1.8rem; font-weight: 700;
  color: var(--c-ink);
}
.reviews-block__count {
  color: var(--c-ink-2); font-size: .9rem;
}
.reviews-block__list {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 20px;
}
.reviews-block__open {
  width: 100%; max-width: 320px;
  display: block; margin: 0 auto;
}
.reviews-block__success {
  text-align: center;
  padding: 22px;
  background: rgba(78,184,174,.06);
  border-radius: 10px;
  color: var(--c-ink);
}

.review-card {
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  transition: border-color .15s;
}
.review-card:hover { border-color: var(--c-primary); }
.review-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.review-card__author {
  display: flex; align-items: center; gap: 8px;
}
.review-card__name {
  font-weight: 600; color: var(--c-ink);
}
.review-card__badge {
  font-size: .72rem;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(78,184,174,.12);
  color: var(--c-primary-3);
  font-weight: 500;
}
.review-card__title {
  margin: 4px 0 6px;
  font-size: 1rem; font-weight: 600;
  color: var(--c-ink);
}
.review-card__body {
  margin: 0 0 6px;
  color: var(--c-ink);
  white-space: pre-wrap; line-height: 1.55;
}
.review-card__date {
  font-size: .8rem; color: var(--c-ink-2);
}

/* Звёзды */
.review-stars {
  display: inline-flex; gap: 2px;
}
.review-star {
  color: #D5CFB8;
  font-size: 1.05rem;
  background: none; border: 0; padding: 0; cursor: default;
  transition: color .15s, transform .12s;
}
.review-stars--input .review-star {
  cursor: pointer;
  font-size: 1.8rem; padding: 0 2px;
}
.review-star.is-active { color: #FFA852; }
.review-star.is-hover  { color: #FFB870; transform: scale(1.1); }
.review-stars--input .review-star:hover { transform: scale(1.15); }

/* Форма отзыва */
.review-form {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 22px 24px;
}
.review-form__title {
  margin: 0 0 4px;
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--c-ink);
}
.review-form__field { margin-bottom: 14px; }
.review-form__label {
  display: block; margin-bottom: 6px;
  font-size: .9rem; font-weight: 500;
  color: var(--c-ink-2);
}
.review-form__req { color: #dc2626; }
.review-form__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-family: inherit; font-size: .95rem;
  background: var(--c-surface); color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.review-form__input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(78,184,174,.15);
}
.review-form__guest {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-radius: 10px;
}
.review-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.review-form__actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 16px; flex-wrap: wrap;
}

/* Кликабельные ФИО педагогов */
.teacher-link {
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s;
}
.teacher-link:hover {
  border-bottom-color: var(--c-primary);
}

/* ════════════════════════════════════════════════════════════════════
   v32.20: ТЁМНАЯ ТЕМА для блока отзывов и формы «Написать отзыв»
   Соответствует общему dark-стилю платформы.
   ════════════════════════════════════════════════════════════════════ */

/* Блок с отзывами */
html[data-theme="dark"] .reviews-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .reviews-block__title,
html[data-theme="dark"] .reviews-block__avg-value {
  color: #ECE6D6;
}
html[data-theme="dark"] .reviews-block__summary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .reviews-block__count {
  color: rgba(236, 230, 214, 0.65);
}
html[data-theme="dark"] .reviews-block__success {
  background: rgba(78, 184, 174, 0.10);
  border: 1px solid rgba(78, 184, 174, 0.25);
  color: #ECE6D6;
}

/* Карточка отзыва */
html[data-theme="dark"] .review-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .review-card:hover {
  border-color: var(--c-primary);
  background: rgba(78, 184, 174, 0.05);
}
html[data-theme="dark"] .review-card__name,
html[data-theme="dark"] .review-card__title,
html[data-theme="dark"] .review-card__body {
  color: #ECE6D6;
}
html[data-theme="dark"] .review-card__badge {
  background: rgba(78, 184, 174, 0.22);
  color: #6FDDD0;
}
html[data-theme="dark"] .review-card__date {
  color: rgba(236, 230, 214, 0.55);
}

/* Звёзды — приглушённый fond, ярче active */
html[data-theme="dark"] .review-star {
  color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .review-star.is-active { color: #FFC178; }
html[data-theme="dark"] .review-star.is-hover  { color: #FFD8A0; }

/* Форма «Написать отзыв» — основное оформление */
html[data-theme="dark"] .review-form {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .review-form__title {
  color: #ECE6D6;
}
html[data-theme="dark"] .review-form__label {
  color: rgba(236, 230, 214, 0.75);
}
html[data-theme="dark"] .review-form__req {
  color: #FF8B7A;
}

/* Поля ввода — тёмные с явным контрастом */
html[data-theme="dark"] .review-form__input {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ECE6D6;
}
html[data-theme="dark"] .review-form__input::placeholder {
  color: rgba(236, 230, 214, 0.40);
}
html[data-theme="dark"] .review-form__input:focus {
  border-color: var(--c-primary);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(78, 184, 174, 0.25);
}

/* Блок гостевых полей (имя + email) */
html[data-theme="dark"] .review-form__guest {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Кликабельные ФИО педагогов в тёмной теме */
html[data-theme="dark"] .teacher-link {
  color: #6FDDD0;
}
html[data-theme="dark"] .teacher-link:hover {
  border-bottom-color: #6FDDD0;
}

/* Мобильно */
@media (max-width: 540px) {
  .review-form__row { grid-template-columns: 1fr; }
  .reviews-block { padding: 18px 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   v32.10: Архив — UI кнопки в админке + страница архива
   ════════════════════════════════════════════════════════════════════ */
.archive-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  color: var(--c-ink-2);
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
}
.archive-btn:hover {
  background: var(--c-line);
  color: var(--c-ink);
}
.archive-btn--restore {
  background: rgba(78,184,174,.1);
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.archive-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px dashed var(--c-line);
}
.archive-section__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.archive-section__title {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--c-ink-2);
  margin: 0;
}
.archive-section__badge {
  font-size: .75rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(140, 133, 118, .15);
  color: var(--c-ink-2);
}

/* Бейдж "В архиве" на карточке */
.is-archived-badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(180, 70, 46, .12);
  color: #B5462E;
  margin-left: 8px;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════
   v32.11: Hero мероприятия (компактный) + плашки стоимости
   ════════════════════════════════════════════════════════════════════ */

/* Компактный градиентный баннер с датой — если нет постера */
.event-hero-banner {
  position: relative;
  background: var(--grad-primary);
  color: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 80px;
  box-shadow: 0 4px 20px rgba(78,184,174,.25);
}
.event-hero-banner__date {
  font-family: var(--ff-display);
  font-size: 1.3rem; font-weight: 600;
}

/* Постер с overlay-плашкой */
.event-hero-poster {
  position: relative;
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.event-hero-poster__overlay {
  position: absolute; top: 14px; right: 14px;
}

/* Плашка стоимости — универсальная */
.event-price-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  z-index: 2;
}
.event-price-badge--free {
  background: var(--c-surface);
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
}
.event-price-badge--paid {
  background: #FFA852;
  color: #fff;
}

/* Уменьшил event-poster (если без явных стилей был aspect-ratio) */
.card .event-poster {
  font-family: var(--ff-display);
  font-weight: 700; font-size: 1.4rem;
  color: #fff;
  background: var(--grad-primary);
  border-radius: 12px;
  padding: 24px 18px;
  text-align: center;
  margin-bottom: 14px;
  min-height: auto !important;
  aspect-ratio: auto !important;
}

/* ════════════════════════════════════════════════════════════════════
   v32.11: Чекбоксы в админке — фикс выравнивания
   ════════════════════════════════════════════════════════════════════ */

/* Универсальный фикс для всех чекбоксов в админке */
.admin-form input[type="checkbox"],
.admin-form__row input[type="checkbox"],
label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--c-line, #EAE6DA);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 8px 0 0;
  position: relative;
  flex-shrink: 0;
  transition: all .15s;
}
.admin-form input[type="checkbox"]:checked,
.admin-form__row input[type="checkbox"]:checked,
label input[type="checkbox"]:checked {
  background: var(--c-primary, #4EB8AE);
  border-color: var(--c-primary, #4EB8AE);
}
.admin-form input[type="checkbox"]:checked::after,
.admin-form__row input[type="checkbox"]:checked::after,
label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Контейнеры с чекбоксами — flex для правильного выравнивания */
.admin-form label,
.admin-form__row label,
.checkbox-row,
.checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  cursor: pointer;
}
.admin-form label > span,
.admin-form__row label > span,
.checkbox-label > span {
  display: inline-block;
  line-height: 1.4;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════
   v32.11: Архив — UI кнопки + страница архива
   ════════════════════════════════════════════════════════════════════ */
.archive-page {
  padding: 24px 0;
}
.archive-page__head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.archive-tab-bar {
  display: flex; gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.archive-tab-bar button {
  padding: 10px 18px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 999px;
  cursor: pointer;
  color: var(--c-ink-2);
  font-size: .9rem;
  transition: all .15s;
}
.archive-tab-bar button.is-active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
  font-weight: 600;
}

/* v32.12: Поиск в расписании */
.schedule-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto 24px;
}
.schedule-search__input {
  width: 100%;
  padding: 12px 44px 12px 18px;
  font-size: 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: 0 2px 12px rgba(44,41,37,.04);
  transition: all .15s;
  font-family: inherit;
  box-sizing: border-box;
}
.schedule-search__input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(78,184,174,.12);
}
.schedule-search__clear {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: var(--c-line); border: 0;
  width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer;
  color: var(--c-ink-2);
  font-size: 14px; line-height: 1;
}
.schedule-search__clear:hover {
  background: var(--c-ink-2); color: #fff;
}
.schedule-search__info {
  position: absolute; right: 50px; top: 50%;
  transform: translateY(-50%);
  font-size: .82rem;
}

/* v32.12: Модалка списка записавшихся в админке */
.attendees-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 16px 0;
}
.attendees-summary__item {
  background: var(--c-surface-2);
  padding: 14px 18px;
  border-radius: 10px;
  text-align: center;
}
.attendees-summary__num {
  font-family: var(--ff-display, Georgia);
  font-size: 1.6rem; font-weight: 700;
  color: var(--c-primary);
}
.attendees-summary__lbl {
  font-size: .82rem; color: var(--c-ink-2);
  margin-top: 4px;
}
.attendees-actions {
  display: flex; gap: 10px; margin: 14px 0;
  justify-content: flex-end; flex-wrap: wrap;
}
.attendees-table-wrap {
  max-height: min(64vh, 720px); overflow-y: auto; /* v39.24: было 50vh — окно выглядело обрезанным */
  border: 1px solid var(--c-line);
  border-radius: 10px;
}
.attendees-table-wrap .admin-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
.attendees-table-wrap .admin-table th {
  background: var(--c-surface-2); padding: 10px 12px;
  text-align: left; position: sticky; top: 0;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
}
.attendees-table-wrap .admin-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--c-line);
}
.admin-actions { white-space: nowrap; }
.btn-icon--restore { background: rgba(78,184,174,.15) !important; }
.is-archived-row { opacity: .55; }
@media (max-width: 720px) {
  .attendees-summary { grid-template-columns: 1fr; }
}

/* v32.12: Архив-карточки */
.archive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.archive-card {
  display: block; padding: 18px 20px;
  background: var(--c-surface-2); border: 1px dashed var(--c-line);
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: all .15s;
  opacity: .85;
}
.archive-card:hover {
  opacity: 1;
  border-color: var(--c-primary);
  background: var(--c-surface);
  transform: translateY(-2px);
}
.archive-card__title {
  margin: 0 0 8px;
  font-family: var(--ff-display, Georgia);
  font-size: 1.1rem;
  color: var(--c-ink);
}
.archive-card__desc {
  margin: 0 0 8px;
  font-size: .88rem;
  color: var(--c-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-card__date {
  font-size: .78rem;
  margin: 8px 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   v32.13: Редизайн редактора рассылки
   ════════════════════════════════════════════════════════════════════ */

.np-modal {
  padding: 0;
  max-height: 92vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.np-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(380px, 1fr);
  gap: 0;
  height: 88vh;
  overflow: hidden;
}
.np-col {
  padding: 24px 28px;
  overflow-y: auto;
}
.np-col--left {
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
}
.np-col--right {
  background: var(--c-surface-2);
}
.np-col-title {
  font-family: var(--ff-display, Georgia);
  font-size: 1.2rem; margin: 0 0 16px;
  color: var(--c-ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-primary);
}
.np-field { display: block; margin-bottom: 14px; }
.np-field__label {
  display: block;
  font-size: .88rem; font-weight: 500;
  color: var(--c-ink-2); margin-bottom: 6px;
}
.np-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-family: inherit; font-size: .95rem;
  background: var(--c-surface); color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  resize: vertical;
}
.np-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(78,184,174,.12);
}
.np-actions {
  display: flex; gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.np-send {
  background: rgba(78,184,174,.05);
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(78,184,174,.2);
}

/* Picker (чекбоксы для выбора контента) */
.np-picker { margin-top: 24px; }
.np-section { margin-bottom: 20px; }
.np-section__title {
  margin: 0 0 8px;
  font-size: .95rem; font-weight: 600;
  color: var(--c-primary);
}
.np-items {
  display: flex; flex-direction: column; gap: 6px;
}
.np-item {
  display: flex !important; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--c-surface-2); border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.np-item:hover { background: rgba(78,184,174,.08); }
.np-item input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.np-item__body {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-width: 0;
}
.np-item__title {
  font-size: .9rem; font-weight: 500;
  color: var(--c-ink);
  line-height: 1.3;
}
.np-item__meta {
  display: flex; gap: 8px; align-items: center;
  font-size: .78rem;
  flex-wrap: wrap;
}
.np-item__date { color: var(--c-ink-2); }
.np-item__price {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 500;
}
.np-item__price--free {
  background: rgba(78,184,174,.12); color: var(--c-primary);
}
.np-item__price--paid {
  background: rgba(255,168,82,.15); color: #d97706;
}

/* Превью письма */
.np-preview-wrap {
  position: sticky; top: 0;
}
.np-preview__title {
  margin: 0 0 12px;
  font-family: var(--ff-display, Georgia);
  font-size: 1rem;
  color: var(--c-ink-2);
}
.newsletter-preview {
  background: #F4EFE2;
  border-radius: 12px;
  overflow: hidden;
  min-height: 400px;
}

@media (max-width: 900px) {
  .np-layout { grid-template-columns: 1fr; height: auto; }
  .np-col { padding: 18px 16px; }
}

/* v32.13: расширения admin-form для workshops CRUD */
.admin-form--wide { max-width: 720px; }
.admin-form__title {
  font-family: var(--ff-display, Georgia);
  font-size: 1.3rem; margin: 0 0 18px;
  color: var(--c-ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-primary);
}
.admin-form__grid--3 {
  grid-template-columns: repeat(3, 1fr) !important;
}
.admin-form__check {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 12px 14px;
  background: var(--c-surface-2); border-radius: 8px;
  margin: 14px 0;
}
.admin-form__check input[type="checkbox"] {
  flex-shrink: 0;
}
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-surface);
}
.admin-table-wrap .admin-table { margin: 0; }
.admin-table-wrap .admin-table th {
  background: var(--c-surface-2);
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
}
.admin-table-wrap .admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

/* ════════════════════════════════════════════════════════════════════
   v32.14: Карточки билетов в кабинете + диалог отмены
   ════════════════════════════════════════════════════════════════════ */

.tickets-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.ticket-mini {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 16px 18px;
  transition: all .15s;
}
.ticket-mini:hover {
  border-color: var(--c-primary);
  box-shadow: 0 2px 12px rgba(78,184,174,.08);
}
.ticket-mini__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.ticket-mini__type {
  font-size: .78rem;
  color: var(--c-ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ticket-mini__badge {
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.ticket-mini__badge--paid    { background: rgba(22,163,74,.12); color: #16a34a; }
.ticket-mini__badge--pending { background: rgba(255,168,82,.15); color: #d97706; }
.ticket-mini__badge--free    { background: rgba(78,184,174,.12); color: var(--c-primary); }
.ticket-mini__badge--refunded{ background: rgba(180,70,46,.12); color: #B5462E; }

.ticket-mini__title {
  display: block;
  font-size: 1rem; font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  margin-bottom: 8px;
  line-height: 1.3;
}
.ticket-mini__title:hover { color: var(--c-primary); }
.ticket-mini__meta {
  font-size: .82rem;
  color: var(--c-ink-2);
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 12px;
}
.ticket-mini__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Кнопка «Изменились планы» на странице билета */
.ticket-cancel-btn {
  color: #B5462E !important;
  border-color: rgba(180,70,46,.25) !important;
}
.ticket-cancel-btn:hover {
  background: rgba(180,70,46,.08) !important;
  border-color: #B5462E !important;
}

/* Cancel form */
.cancel-form .form-row {
  display: block;
  margin-bottom: 14px;
}
.cancel-form .form-row__label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--c-ink-2);
  font-size: .9rem;
}
.cancel-form .form-row__input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-family: inherit; font-size: .95rem;
  background: var(--c-surface); color: var(--c-ink);
  box-sizing: border-box;
}
.cancel-form .form-row__input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(78,184,174,.12);
}

/* v32.15: Уведомление "хотите оповестить участников?" внизу экрана */
.notify-change-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--c-surface);
  border: 1px solid var(--c-primary);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  max-width: 580px;
  width: 92vw;
  animation: notifyBarSlideUp .3s ease-out;
}
@keyframes notifyBarSlideUp {
  from { transform: translate(-50%, 100px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.notify-change-bar__inner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
}
.notify-change-bar__text { flex: 1; min-width: 0; }
.notify-change-bar__actions {
  display: flex; gap: 8px; flex-shrink: 0;
}

/* v32.15: бейдж "отменено" */
.is-cancelled-badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(181, 70, 46, .12);
  color: #B5462E;
  margin-left: 8px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .notify-change-bar__inner { flex-direction: column; align-items: stretch; }
  .notify-change-bar__actions { justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════════════
   v32.16: Страница /admin/checkin — сканер QR через камеру
   ════════════════════════════════════════════════════════════════════ */

.checkin-page {
  max-width: 720px;
  margin: 0 auto;
}
.checkin-page__head {
  text-align: center;
  margin-bottom: 24px;
}
.checkin-page__head h1 {
  font-family: var(--ff-display, Georgia);
}

/* Статусная плашка */
.checkin-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  margin: 16px 0;
  font-weight: 500;
}
.checkin-status__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C8C0AC;
  flex-shrink: 0;
}
.checkin-status--ready .checkin-status__dot { background: #C8C0AC; }
.checkin-status--scan .checkin-status__dot {
  background: var(--c-primary);
  animation: pulse 1.4s infinite;
}
.checkin-status--busy .checkin-status__dot {
  background: #FFA852;
  animation: pulse .8s infinite;
}
.checkin-status--ok .checkin-status__dot { background: #16a34a; }
.checkin-status--warn .checkin-status__dot { background: #FFA852; }
.checkin-status--err .checkin-status__dot { background: #B5462E; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}

/* Управление камерой */
.checkin-controls {
  display: flex; gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
}
.btn--lg {
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Окно сканера */
.checkin-scanner {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  margin: 0 auto 20px;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.checkin-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.checkin-scanner__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.checkin-scanner__frame {
  width: 65%;
  aspect-ratio: 1;
  border: 3px solid var(--c-primary);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
  position: relative;
}
.checkin-scanner__frame::before,
.checkin-scanner__frame::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--c-primary);
  box-shadow: 0 0 12px var(--c-primary);
  animation: scanLine 2s ease-in-out infinite;
}
.checkin-scanner__frame::before { top: 0; }
.checkin-scanner__frame::after  { bottom: 0; }
@keyframes scanLine {
  0% { opacity: .4; }
  50% { opacity: 1; }
  100% { opacity: .4; }
}

/* Результат проверки билета */
.checkin-result { margin: 18px 0; }
.checkin-card {
  display: flex; gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  align-items: flex-start;
  animation: cardSlideIn .25s ease-out;
}
@keyframes cardSlideIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.checkin-card--ok {
  background: #DCFCE7;
  border-left: 5px solid #16a34a;
}
.checkin-card--warn {
  background: #FEF3C7;
  border-left: 5px solid #FFA852;
}
.checkin-card--error {
  background: #FBE5E5;
  border-left: 5px solid #B5462E;
}
.checkin-card__icon {
  font-size: 2.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.checkin-card--ok .checkin-card__icon { color: #16a34a; }
.checkin-card--warn .checkin-card__icon { color: #FFA852; }
.checkin-card--error .checkin-card__icon { color: #B5462E; }
.checkin-card__body { flex: 1; min-width: 0; }
.checkin-card__body h3 {
  margin: 0 0 6px;
  font-family: var(--ff-display, Georgia);
  font-size: 1.2rem;
}
.checkin-card__title {
  font-weight: 600;
  margin: 4px 0;
  font-size: 1.02rem;
}

/* Ручной ввод (fallback) */
.checkin-manual {
  margin-top: 24px;
  padding-top: 24px;
}
.checkin-manual__divider {
  text-align: center;
  position: relative;
  margin-bottom: 18px;
}
.checkin-manual__divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  border-top: 1px solid var(--c-line);
}
.checkin-manual__divider span {
  position: relative;
  background: var(--c-bg, #F4EFE2);
  padding: 0 14px;
  color: var(--c-ink-2);
  font-size: .85rem;
}
.checkin-manual__row {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.checkin-manual-input {
  flex: 1; min-width: 200px;
  padding: 11px 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-family: monospace;
  font-size: .92rem;
}
.checkin-manual-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(78,184,174,.12);
}
.checkin-canvas { display: none; }

@media (max-width: 600px) {
  .checkin-scanner { max-width: 100%; }
  .checkin-status { font-size: .9rem; }
  .checkin-card { padding: 14px 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   v32.17: Аудит — восстановлены пропущенные стили
   ════════════════════════════════════════════════════════════════════ */

/* Утилитарные классы */
.gap-2 { gap: 8px; }
.mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; }
.mt-5 { margin-top: 24px; }

/* Личный кабинет */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.kpi {
  background: var(--c-surface-2);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: center;
}
.kpi__num {
  font-family: var(--ff-display, Georgia);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-primary);
}
.kpi__label {
  font-size: 0.85rem;
  color: var(--c-ink-2, #8C8576);
  margin-top: 4px;
}
.enr-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.enr-row:last-child { border-bottom: none; }
.enr-row__title { font-weight: 500; color: var(--c-ink); text-decoration: none; }
.enr-row__title:hover { color: var(--c-primary); }
.enr-row__meta { font-size: 0.78rem; color: var(--c-ink-2, #8C8576); }
.status {
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 500;
}
.status--new      { background: rgba(59,130,246,0.12); color: #2563eb; }
.status--review   { background: rgba(255,168,82,0.18); color: #d97706; }
.status--approved { background: rgba(22,163,74,0.13);  color: #15803d; }
.status--enrolled { background: rgba(78,184,174,0.15); color: #4EB8AE; }
.status--waitlist { background: rgba(168,85,247,0.12); color: #9333ea; }
.status--rejected { background: rgba(220,38,38,0.10);  color: #dc2626; }
.status--cancelled{ background: rgba(140,133,118,0.18); color: #6b6557; }

/* Mini-карточки билетов в кабинете */
.tickets-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.ticket-mini {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 16px 18px;
  transition: box-shadow .15s;
}
.ticket-mini:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ticket-mini__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.ticket-mini__type { font-size: 0.82rem; color: var(--c-ink-2, #8C8576); font-weight: 500; }
.ticket-mini__badge {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 500;
}
.ticket-mini__badge--paid     { background: rgba(22,163,74,0.13);  color: #15803d; }
.ticket-mini__badge--pending  { background: rgba(255,168,82,0.18); color: #d97706; }
.ticket-mini__badge--refunded { background: rgba(140,133,118,0.18); color: #6b6557; }
.ticket-mini__badge--free     { background: rgba(78,184,174,0.15); color: #4EB8AE; }
.ticket-mini__title {
  display: block;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  margin-bottom: 8px;
  line-height: 1.3;
}
.ticket-mini__title:hover { color: var(--c-primary); }
.ticket-mini__meta { font-size: 0.85rem; color: var(--c-ink-2, #8C8576); }
.ticket-mini__meta > div { margin: 3px 0; }
.ticket-mini__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}

/* Страница логина / регистрации */
.auth-page {
  max-width: 480px;
  margin: 48px auto;
  padding: 32px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.auth-page__switch {
  text-align: center;
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--c-ink-2, #8C8576);
}
.auth-page__switch a { color: var(--c-primary); text-decoration: none; }
.auth-page__switch a:hover { text-decoration: underline; }

/* Категории */
.cat-pills {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 24px;
}
.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--c-surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  color: var(--c-ink);
  font-size: 0.9rem;
  transition: all .15s;
  cursor: pointer;
}
.cat-pill:hover,
.cat-pill.is-active {
  background: var(--c-primary);
  color: #fff;
}
.cat-pill__count {
  font-size: 0.78rem;
  opacity: 0.7;
  font-weight: 600;
}

/* Прогресс-бар занятости мест */
.seats-bar {
  display: block;
  width: 100%;
  height: 6px;
  background: var(--c-surface-3);
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0;
}
.seats-bar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4EB8AE, #6BC8BE);
  border-radius: 3px;
  transition: width .3s;
}

/* Карточка программы — боковая колонка */
.program-main { min-width: 0; }
.program-side__price {
  font-family: var(--ff-display, Georgia);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-primary);
  margin: 4px 0;
}
.program-side__price-label {
  font-size: 0.8rem;
  color: var(--c-ink-2, #8C8576);
  margin-bottom: 8px;
}

/* Вакансии */
.vac-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: center;
}
.vac-row:last-child { border-bottom: none; }
.vac-row__title { font-weight: 600; color: var(--c-ink); text-decoration: none; }
.vac-row__title:hover { color: var(--c-primary); }
.vac-row__meta {
  font-size: 0.82rem;
  color: var(--c-ink-2, #8C8576);
  margin-top: 4px;
}
.vac-row__salary {
  font-weight: 600;
  color: var(--c-primary-3);
  white-space: nowrap;
}

/* Form helper / loading */
.form-helper {
  font-size: 0.82rem;
  color: var(--c-ink-2, #8C8576);
  margin-top: 4px;
}
.reviews-loading {
  padding: 24px;
  text-align: center;
  color: var(--c-ink-2, #8C8576);
}

/* Featured-плашка */
.card__pill--featured {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 10px;
  background: #FFA852; /* v39.21: solid + тёмный текст (6.1:1; на градиенте белый был 1.9:1) */
  color: #5C2A00;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  z-index: 2;
}
.card__rating {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 999px;
  z-index: 2;
}

/* Модалка overlay (fallback) */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 998;
  align-items: center; justify-content: center;
}
.modal-overlay--active { display: flex; }

/* Адаптив */
@media (max-width: 768px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* Доступность */
.btn:focus-visible,
.np-input:focus-visible,
.checkin-manual-input:focus-visible {
  outline: 3px solid rgba(78,184,174,0.4);
  outline-offset: 2px;
}

/* High-contrast support */
@media (prefers-reduced-motion: reduce) {
  .checkin-status__dot,
  .notify-change-bar { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * v32.31: Избранное — кнопка-сердечко + блок в кабинете
 * ═══════════════════════════════════════════════════════════════ */

/* Размещение заголовка + кнопки избранного рядом */
.page-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.page-title-row > h1 {
  flex: 1;
  margin: 0;
  min-width: 0;
}

/* Кнопка-сердечко */
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 2px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--c-ink-2);
  transition: all 0.18s ease;
  padding: 0;
  flex-shrink: 0;
}
.fav-btn:hover {
  border-color: #f59e0b;
  color: #f59e0b;
  transform: scale(1.05);
}
.fav-btn.is-active {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
.fav-btn.is-active .fav-btn__icon {
  color: #f59e0b;
}
.fav-btn:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.4);
  outline-offset: 2px;
}
.fav-btn--sm { width: 32px; height: 32px; font-size: 1rem; }
.fav-btn--lg { width: 52px; height: 52px; font-size: 1.6rem; }
.fav-btn--floating {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.fav-btn__icon {
  line-height: 1;
  font-weight: 400;
  font-style: normal;
}

/* Список избранного в кабинете */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 10px;
  transition: background-color 0.15s, border-color 0.15s;
}
.fav-item:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.4);
}
.fav-item__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.fav-item__type {
  font-size: 0.78rem;
  color: var(--c-muted);
  white-space: nowrap;
  background: var(--c-surface);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.fav-item__link {
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-item__link:hover { color: var(--c-primary); text-decoration: underline; }
.fav-item__remove { flex-shrink: 0; }

/* Тёмная тема */
html[data-theme="dark"] .fav-btn {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #d4d4d4;
}
html[data-theme="dark"] .fav-btn:hover,
html[data-theme="dark"] .fav-btn.is-active {
  border-color: #fbbf24;
  color: #fbbf24;
}
html[data-theme="dark"] .fav-item {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
html[data-theme="dark"] .fav-item__type {
  background: rgba(255, 255, 255, 0.06);
  color: #c4c4c4;
}

@media (max-width: 640px) {
  .fav-item { flex-wrap: wrap; }
  .fav-item__main { flex-basis: 100%; }
  .page-title-row > h1 { font-size: 1.8rem; }
}

/* v32.34: чекбокс в админ-форме (Способы оплаты) */
.admin-form__row--check {
  padding: 14px 16px;
  background: rgba(78,184,174,.04);
  border: 1px solid rgba(78,184,174,.15);
  border-radius: 10px;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.check-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--c-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.check-row__label {
  font-weight: 600;
  color: var(--c-ink);
  font-size: 0.96rem;
}
html[data-theme="dark"] .admin-form__row--check {
  background: rgba(78,184,174,.08);
  border-color: rgba(78,184,174,.2);
}

/* ═══════════════════════════════════════════════════════════════
 * v32.38: ИСПРАВЛЕНИЯ КОНТРАСТА В ТЁМНОЙ ТЕМЕ
 * «Бумажные» элементы (билеты, QR, превью) остаются白ыми и для
 * них принудительно задаётся ТЁМНЫЙ текст, чтобы не сливался.
 * ═══════════════════════════════════════════════════════════════ */

/* Билет — это «документ»: всегда белый фон + тёмный текст в обеих темах */
html[data-theme="dark"] .ticket-card,
html[data-theme="dark"] .ticket-card__event {
  background: #fff;
}
html[data-theme="dark"] .ticket-card__header { background: #FBF8F1; }
html[data-theme="dark"] .ticket-card__brand-name,
html[data-theme="dark"] .ticket-card__event-title { color: #2C2925; }
html[data-theme="dark"] .ticket-card__brand-sub,
html[data-theme="dark"] .ticket-card__event-row,
html[data-theme="dark"] .ticket-card__event-label,
html[data-theme="dark"] .ticket-card__event-value { color: #4A453D; }
html[data-theme="dark"] .ticket-card__qr-wrap,
html[data-theme="dark"] .ticket-card__qr { background: #fff; }

/* QR-обёртки оплаты — белый фон обязателен для сканирования */
html[data-theme="dark"] .payment-qr,
html[data-theme="dark"] .mosru-enroll__qr-wrap { background: #fff; }

/* Сертификат/диплом — это «документ» (как билет): светлый фон + тёмный текст
   в обеих темах, иначе в тёмной заголовки на кремовом фоне исчезали. */
html[data-theme="dark"] .cert-print { background: #fffdf7; color: #2C2925; }
html[data-theme="dark"] .cert-print h1,
html[data-theme="dark"] .cert-print h2,
html[data-theme="dark"] .cert-print h3,
html[data-theme="dark"] .cert-print strong { color: #2C2925; }

/* Превью логотипа — белый фон (логотип может быть прозрачным/светлым) */
html[data-theme="dark"] .logo-uploader__img { background: #fff; }

/* Чекбоксы — белый фон для контраста галочки */
html[data-theme="dark"] label input[type="checkbox"] { background: var(--c-surface); }

/* ═══════════════════════════════════════════════════════════════
 * v32.38: ПОДАРОЧНЫЙ СЕРТИФИКАТ — яркий праздничный дизайн
 * ═══════════════════════════════════════════════════════════════ */
.gift-cert-page { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }

.gift-cert {
  position: relative;
  border-radius: 24px;
  padding: 40px 36px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.18) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.12) 0, transparent 40%),
    linear-gradient(135deg, #4FA8A3 0%, #5BB5AE 35%, #ECC56B 100%);
  box-shadow: 0 20px 60px rgba(79,168,163,.35), inset 0 1px 0 rgba(255,255,255,.3);
  overflow: hidden;
}
.gift-cert::before {
  content: '🎁';
  position: absolute; top: -10px; right: 20px;
  font-size: 120px; opacity: .12; transform: rotate(-15deg);
  pointer-events: none;
}
.gift-cert__kicker {
  font-size: .85rem; letter-spacing: 2px; text-transform: uppercase;
  opacity: .85; margin-bottom: 8px; font-weight: 600;
}
.gift-cert__title {
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 2rem; margin: 0 0 24px; line-height: 1.1;
}
.gift-cert__amount {
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 3.4rem; line-height: 1; margin: 16px 0 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.gift-cert__amount-label { font-size: .9rem; opacity: .85; margin-bottom: 24px; }
.gift-cert__balance {
  display: inline-block; background: rgba(255,255,255,.22);
  border-radius: 12px; padding: 8px 16px; font-weight: 600;
  font-size: 1.05rem; margin-bottom: 20px;
  backdrop-filter: blur(4px);
}
.gift-cert__code-box {
  background: rgba(255,255,255,.95); color: #2C2925;
  border-radius: 14px; padding: 18px 24px; margin: 20px 0;
  text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.gift-cert__code-label { font-size: .8rem; color: #8C8576; margin-bottom: 6px; }
.gift-cert__code {
  font-family: 'Unbounded', monospace; font-weight: 700;
  font-size: 1.7rem; letter-spacing: 3px; color: #2E7C77;
}
.gift-cert__meta {
  display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 20px;
  font-size: .95rem;
}
.gift-cert__meta b { display: block; font-size: 1.05rem; margin-top: 2px; }
.gift-cert__message {
  background: rgba(255,255,255,.18); border-radius: 12px;
  padding: 14px 18px; margin-top: 20px; font-style: italic;
  border-left: 3px solid rgba(255,255,255,.6);
}
.gift-cert__status {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  font-size: .85rem; font-weight: 600; margin-top: 16px;
}
.gift-cert__status--active   { background: rgba(255,255,255,.9); color: #2E7C77; }
.gift-cert__status--used,
.gift-cert__status--expired  { background: rgba(0,0,0,.3); color: #fff; }
.gift-cert__status--pending  { background: rgba(255,200,80,.95); color: #6b4e00; }

.gift-cert-actions {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 28px; flex-wrap: wrap;
}

/* Форма покупки */
.gift-buy-hero {
  text-align: center; padding: 36px 16px 12px;
}
.gift-buy-amounts {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0;
}
.gift-buy-amounts button {
  flex: 1; min-width: 90px; padding: 12px; border-radius: 12px;
  border: 2px solid var(--c-line); background: var(--c-surface);
  color: var(--c-ink); font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.gift-buy-amounts button.is-active,
.gift-buy-amounts button:hover {
  border-color: var(--c-primary); background: var(--c-primary-soft);
  color: var(--c-primary-3);
}

/* Печать — только сертификат, без шапки/меню */
@media print {
  body * { visibility: hidden; }
  .gift-cert, .gift-cert * { visibility: visible; }
  .gift-cert {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .gift-cert-actions, .site-header, .site-footer { display: none !important; }
}

/* ─── Полиграфические услуги ─────────────────────────────────────── */
.print-tables h3 { margin: 18px 0 6px; font-size: 1.05rem; color: var(--c-ink); }
.print-tables .muted { font-weight: 400; font-size: .85rem; }
.ptbl { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: .92rem; }
.ptbl th, .ptbl td { border: 1px solid var(--c-line); padding: 7px 10px; text-align: center; }
.ptbl th { background: var(--c-surface-2, #F5F2E9); color: var(--c-ink); font-weight: 600; }
.ptbl td:first-child, .ptbl th:first-child { text-align: left; }
.ptbl tbody tr:nth-child(even) { background: rgba(0,0,0,.02); }
.print-params .fld, .fld { display: flex; flex-direction: column; gap: 3px; }
.print-params .fld span { font-size: .8rem; }
.print-cart, .print-files { margin-top: 6px; }
.btn--xs { padding: 2px 8px; font-size: .8rem; line-height: 1.4; }
@media (max-width: 600px) { .ptbl { font-size: .82rem; } .ptbl th, .ptbl td { padding: 5px 6px; } }

/* ─── Мерч (магазин) ─────────────────────────────────────────────── */
.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.merch-card { display: flex; flex-direction: column; gap: 8px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 12px; }
.merch-card__img { position: relative; display: block; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: var(--c-surface-2, #F5F2E9); }
.merch-card__img img { width: 100%; height: 100%; object-fit: cover; }
.merch-card__noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.4rem; opacity: .5; }
.merch-card__badge { position: absolute; top: 8px; left: 8px; background: #C0392B; color: #fff; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.merch-card__title { font-weight: 600; color: var(--c-ink); text-decoration: none; line-height: 1.25; }
.merch-card__price { display: flex; align-items: baseline; gap: 8px; }
.merch-card__price strong { font-size: 1.1rem; }
.merch-card__old { color: var(--c-muted); text-decoration: line-through; font-size: .85rem; }
.merch-detail { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 24px; align-items: start; }
.merch-detail__img { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; background: var(--c-surface-2, #F5F2E9); }
.merch-detail__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .merch-detail { grid-template-columns: 1fr; } }

/* v32.42: единые поля ввода (.input) для форм полиграфии/мерча — стиль как у .form-row,
   на CSS-переменных (адаптация к тёмной теме) + видимый фокус для слабовидящих (a11y). */
.input,
select.input,
textarea.input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm, 10px);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.input::placeholder,
textarea.input::placeholder { color: var(--c-muted); opacity: 1; }
.input:focus,
select.input:focus,
textarea.input:focus,
.input:focus-visible,
select.input:focus-visible,
textarea.input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
textarea.input { min-height: 80px; resize: vertical; }
/* подписи полей в формах полиграфии/мерча */
.fld span,
.print-params .fld span { color: var(--c-ink-2); font-weight: 500; }
/* контраст для слабовидящих: чуть толще рамка при наведении */
.input:hover { border-color: var(--c-line-2); }

/* ════════════════════════════════════════════════════════════════════
   v35: исправления по скриншотам (контраст, расписание, реферал,
   формы, тосты поверх модалок, cookie-баннер)
   ════════════════════════════════════════════════════════════════════ */

/* — Задача 5: мелкое конкретное расписание группы в карточке дня — */
.week-day__lesson__sched {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-primary);
  margin: 2px 0;
  letter-spacing: .01em;
}

/* — Задача 9: красивое поле реферальной ссылки — */
.referral-link {
  display: flex; align-items: stretch; gap: 0;
  margin: 12px 0;
  border: 1.5px solid var(--c-line-2, var(--c-line));
  border-radius: var(--r-md, 12px);
  background: var(--c-surface-2);
  overflow: hidden;
  max-width: 640px;
}
.referral-link__icon {
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-size: 1rem;
  background: rgba(127,127,127,.06);
  border-right: 1px solid var(--c-line);
}
.referral-link__input {
  flex: 1; min-width: 0;
  border: 0; outline: none;
  background: transparent;
  color: var(--c-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  padding: 11px 12px;
}
.referral-link__input:focus { box-shadow: none; }
.referral-link__copy {
  flex: 0 0 auto;
  border: 0; cursor: pointer;
  background: var(--grad-primary-soft, var(--c-primary-soft));
  color: #0b1f1e;
  font-weight: 700; font-size: .85rem;
  padding: 0 18px;
  transition: filter .15s var(--ease, ease);
  white-space: nowrap;
}
.referral-link__copy:hover { filter: brightness(1.05); }
@media (max-width: 520px) {
  .referral-link { flex-wrap: wrap; }
  .referral-link__input { flex-basis: 100%; }
  .referral-link__copy { flex-basis: 100%; padding: 11px 0; }
  .referral-link__icon { display: none; }
}

/* — Задачи 10 / 11a: читаемые подписи и заголовки во всех админ-формах — */
.admin-form h3 { color: var(--c-ink); }
.form-row__label,
.admin-form .form-row__label,
[data-modal] .form-row__label { color: var(--c-ink-2); }
/* жёсткие значения тёмной темы — гарантия читаемости независимо от наследования */
html[data-theme="dark"] .admin-form h3 { color: #F6F1E6; }
html[data-theme="dark"] .form-row__label,
html[data-theme="dark"] .admin-form .form-row__label,
html[data-theme="dark"] [data-modal] .form-row__label,
html[data-theme="dark"] [data-modal] .admin-form label,
html[data-theme="dark"] [data-modal] form > label { color: #DDD6C5; }

/* — Задача 13: уведомления (тосты) ПОВЕРХ модальных окон — */
.toasts { z-index: 100000; }                 /* выше .modal-backdrop (1000) и .modal-overlay (9999) */
.toasts--in-modal {
  position: fixed; top: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 2147483647;                        /* в top layer диалога — над контентом модалки */
  pointer-events: none;
  max-width: 380px;
}
.toasts--in-modal .toast { pointer-events: all; }

/* — Задача 6: закреплённый cookie-баннер — */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 99990;                             /* ниже тостов, выше обычного контента */
  margin: 0 auto;
  max-width: 880px;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line-2, var(--c-line));
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  animation: cookieUp .35s var(--ease, cubic-bezier(.2,.8,.2,1));
}
@keyframes cookieUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cookie-banner--hide { opacity: 0; transform: translateY(24px); transition: opacity .3s, transform .3s; }
.cookie-banner__text {
  margin: 0; flex: 1;
  font-size: .9rem; line-height: 1.5;
  color: var(--c-ink-2);
}
.cookie-banner__text a { color: var(--c-primary); text-decoration: underline; }
.cookie-banner__actions { flex: 0 0 auto; display: flex; gap: 8px; }
.cookie-banner__btn {
  cursor: pointer; border: 0; border-radius: 10px;
  padding: 10px 22px; font-weight: 700; font-size: .9rem;
  transition: filter .15s var(--ease, ease);
}
.cookie-banner__btn--primary { background: var(--grad-primary-soft, var(--c-primary-soft)); color: #0b1f1e; }
.cookie-banner__btn--primary:hover { filter: brightness(1.05); }
.cookie-banner__close {
  flex: 0 0 auto; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--c-line);
  background: transparent; color: var(--c-ink-2);
  font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cookie-banner__close:hover { background: var(--c-surface-2); }
@media (max-width: 600px) {
  .cookie-banner { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  .cookie-banner__text { flex-basis: 100%; font-size: .85rem; }
  .cookie-banner__actions { flex: 1; }
  .cookie-banner__btn--primary { flex: 1; }
}

/* — Задача 3: счётчик количества товара в карточке мерча — */
.merch-card__cart { margin-top: auto; }
.qty-stepper {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  background: var(--c-surface);
}
.qty-stepper__btn {
  flex: 0 0 auto; cursor: pointer; border: 0;
  width: 40px;
  background: var(--c-primary-soft, rgba(127,196,191,.12));
  color: var(--c-primary);
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease, ease);
}
.qty-stepper__btn:hover { background: var(--c-primary); color: #fff; }
.qty-stepper__btn:active { transform: scale(.94); }
.qty-stepper__val {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; color: var(--c-ink);
  min-width: 36px; user-select: none;
}

/* ─── v35: Видеовизитка на главной (вместо плиток hero-collage) ─── */
.hero-video {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.hero-video object,
.hero-video video,
.hero-video iframe {
  max-width: 100%;
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  background: #000;
}
@media (max-width: 767px) {
  .hero-video { min-height: 0; width: 100%; }
  .hero-video object,
  .hero-video video,
  .hero-video iframe { width: 100% !important; height: 220px !important; }
}

/* ═══════════ v35: ПОЧТА СОТРУДНИКОВ (/mail) ═══════════ */
.mail-app { display: flex; flex-direction: column; height: calc(100vh - 64px); min-height: 480px; }
.mail-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.mail-search { flex: 1; max-width: 560px; padding: 9px 14px; border-radius: var(--r-full); border: 1px solid var(--c-line); background: var(--c-surface-2, var(--c-bg)); color: var(--c-ink); font: inherit; }
.mail-search:focus { outline: 2px solid var(--c-primary); border-color: transparent; }
.mail-burger { display: none; }
.mail-cols { display: grid; grid-template-columns: 232px minmax(330px, 1fr) 1.4fr; flex: 1; min-height: 0; }

/* — левая панель — */
.mail-side { display: flex; flex-direction: column; border-right: 1px solid var(--c-line); background: var(--c-surface); overflow-y: auto; padding: 12px 8px; }
.mail-side__compose { margin: 0 8px 12px; justify-content: center; }
.mail-side__item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--r-full); cursor: pointer; font-size: 0.92rem; color: var(--c-ink); user-select: none; }
.mail-side__item:hover { background: var(--c-primary-soft); }
.mail-side__item.is-active { background: var(--c-primary-soft); font-weight: 600; color: var(--c-primary-3, var(--c-primary)); }
.mail-side__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-side__count { font-size: 0.78rem; font-weight: 700; color: var(--c-primary); min-width: 18px; text-align: right; }
.mail-side__sec { font-size: 0.72rem; letter-spacing: 0.06em; padding: 14px 12px 4px; }
.mail-side__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mail-side__item .mail-chip__x { opacity: 0; }
.mail-side__item:hover .mail-chip__x { opacity: 0.7; }

/* — список — */
.mail-listpane { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--c-line); background: var(--c-bg); }
.mail-toolbar { display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-bottom: 1px solid var(--c-line); background: var(--c-surface); flex-wrap: wrap; }
.mail-toolbar__sep { width: 1px; height: 18px; background: var(--c-line); margin: 0 4px; }
.mail-pages { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 0.82rem; }
.mail-ibtn { border: 0; background: transparent; cursor: pointer; padding: 6px 8px; border-radius: var(--r-sm); font-size: 0.95rem; color: var(--c-ink-2); line-height: 1; }
.mail-ibtn:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.mail-ibtn:disabled { opacity: 0.35; cursor: default; }
.mail-list { flex: 1; overflow-y: auto; }
.mail-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--c-line); cursor: pointer; background: var(--c-surface); }
.mail-row:hover { box-shadow: inset 3px 0 0 var(--c-primary); }
.mail-row--unread { background: var(--c-bg); }
.mail-row--unread .mail-row__from, .mail-row--unread .mail-row__subject { font-weight: 700; }
.mail-row--cursor { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.mail-row__cb { display: flex; align-items: center; }
.mail-star { border: 0; background: none; cursor: pointer; font-size: 1.05rem; color: var(--c-muted); padding: 2px; }
.mail-star.is-on { color: #E8B53E; }
.mail-ava { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; font-size: 0.95rem; }
.mail-row__main { flex: 1; min-width: 0; }
.mail-row__top { display: flex; justify-content: space-between; gap: 8px; }
.mail-row__from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.mail-row__date { font-size: 0.78rem; color: var(--c-muted); flex: none; }
.mail-row__sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.87rem; }
.mail-row__subject { color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 60%; }
.mail-row__snip { color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row__clip { margin-left: auto; }
.mail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 16px; text-align: center; }
.mail-chip { display: inline-flex; align-items: center; gap: 4px; color: #fff; border-radius: var(--r-full); padding: 1px 8px; font-size: 0.72rem; font-weight: 600; max-width: 140px; overflow: hidden; }
.mail-chip__x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 0.95em; padding: 0 2px; opacity: 0.8; }

/* — чтение — */
.mail-reader { overflow-y: auto; padding: 14px 20px 32px; background: var(--c-surface); min-width: 0; }
.mail-read__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; position: sticky; top: -14px; background: var(--c-surface); padding: 6px 0; z-index: 2; }
.mail-read__baracts { display: flex; gap: 2px; flex-wrap: wrap; }
.mail-read__subject { font-size: 1.3rem; margin: 4px 0 10px; }
.mail-read__meta { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 0.9rem; }
.mail-read__addr { font-size: 0.82rem; color: var(--c-ink-2); }
.mail-imgwarn { background: var(--c-primary-soft); border-radius: var(--r-sm); padding: 8px 10px; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mail-body { line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.mail-body img { max-width: 100%; height: auto; }
.mail-body blockquote { border-left: 3px solid var(--c-line); margin: 6px 0; padding-left: 10px; color: var(--c-ink-2); }
.mail-body table { max-width: 100%; }
.mail-atts { margin-top: 16px; border-top: 1px dashed var(--c-line); padding-top: 10px; }
.mail-att { display: inline-flex; align-items: center; gap: 4px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 6px 10px; margin: 0 8px 8px 0; text-decoration: none; color: var(--c-ink); font-size: 0.85rem; }
.mail-att:hover { border-color: var(--c-primary); }
.mail-thread__item { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--c-line); border-radius: var(--r-sm); margin-bottom: 6px; cursor: pointer; font-size: 0.86rem; }
.mail-thread__item:hover { border-color: var(--c-primary); }
.mail-thread__who { font-weight: 600; flex: none; }
.mail-thread__snip { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* — композер — */
.mail-comp { position: fixed; right: 22px; bottom: 0; width: min(620px, calc(100vw - 24px)); max-height: min(82vh, 720px); display: flex; flex-direction: column; background: var(--c-surface); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--sh-3); border: 1px solid var(--c-line); z-index: 240; }
.mail-comp.is-min .mail-comp__row, .mail-comp.is-min .mail-comp__toolbar, .mail-comp.is-min .mail-comp__editor,
.mail-comp.is-min .mail-comp__atts, .mail-comp.is-min .mail-comp__foot { display: none; }
.mail-comp__head { display: flex; justify-content: space-between; align-items: center; background: var(--grad-primary); color: #fff; padding: 8px 12px; border-radius: var(--r-md) var(--r-md) 0 0; cursor: default; }
.mail-comp__head .mail-ibtn { color: #fff; }
.mail-comp__row { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--c-line); padding: 4px 10px; flex-wrap: wrap; }
.mail-comp__lbl { color: var(--c-muted); font-size: 0.85rem; flex: none; width: 56px; }
.mail-comp__subj { flex: 1; border: 0; background: transparent; color: var(--c-ink); font: inherit; padding: 8px 2px; outline: none; }
.mail-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: relative; min-width: 160px; }
.mail-chip--addr { background: var(--c-primary-soft); color: var(--c-primary-3, var(--c-primary)); }
.mail-chips__in { border: 0; background: transparent; color: var(--c-ink); font: inherit; flex: 1; min-width: 120px; padding: 7px 2px; outline: none; }
.mail-sugg { position: absolute; top: 100%; left: 0; right: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--sh-2); z-index: 250; max-height: 200px; overflow-y: auto; }
.mail-sugg__item { padding: 8px 12px; cursor: pointer; font-size: 0.88rem; }
.mail-sugg__item:hover { background: var(--c-primary-soft); }
.mail-comp__toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.mail-comp__editor { flex: 1; min-height: 160px; overflow-y: auto; padding: 12px 14px; outline: none; line-height: 1.5; }
.mail-comp__atts { padding: 0 10px; }
.mail-att--chip { cursor: default; }
.mail-comp__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.mail-link { border: 0; background: none; color: var(--c-primary); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; }
.mail-link:hover { text-decoration: underline; }

/* — меню меток и настройки — */
.mail-menu { position: absolute; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--sh-3); z-index: 260; min-width: 220px; padding: 6px; }
.mail-menu__item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 0.88rem; }
.mail-settings-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 270; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mail-settings { background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 20px; width: min(560px, 100%); max-height: 86vh; overflow-y: auto; }
.mail-settings .mail-comp__editor { border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.mail-settings .input { width: 100%; }

/* — тёмная тема — */
html[data-theme="dark"] .mail-row--unread { background: rgba(79,168,163,0.07); }
html[data-theme="dark"] .mail-search { background: rgba(255,255,255,0.05); }

/* — мобильная адаптация — */
@media (max-width: 980px) {
  .mail-app { height: calc(100vh - 56px); }
  .mail-cols { grid-template-columns: 1fr; position: relative; }
  .mail-side { position: absolute; inset: 0 30% 0 0; z-index: 30; transform: translateX(-105%); transition: transform 0.22s var(--ease); box-shadow: var(--sh-3); }
  body[data-mail-side] .mail-side { transform: none; }
  .mail-burger { display: inline-flex; }
  .mail-listpane, .mail-reader { display: none; }
  body[data-mail-pane="list"] .mail-listpane { display: flex; }
  body[data-mail-pane="read"] .mail-reader { display: block; }
  .mail-comp { right: 0; width: 100vw; max-height: 92vh; border-radius: 0; }
  .mail-row__subject { max-width: none; }
}

/* — v35.1: WYSIWYG-тулбар композера — */
.mail-rt { position: relative; row-gap: 4px; }
.mail-rt__sel { border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); border-radius: var(--r-sm); font-size: 0.8rem; padding: 4px 4px; max-width: 116px; }
.mail-rt__colwrap { position: relative; overflow: hidden; }
.mail-rt__color { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mail-emoji { position: absolute; top: 100%; left: 8px; z-index: 260; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: 6px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.mail-emoji__b { border: 0; background: none; font-size: 1.05rem; cursor: pointer; padding: 3px 4px; border-radius: 4px; line-height: 1; }
.mail-emoji__b:hover { background: var(--c-primary-soft); }

/* — v35.1: настройки IMAP/SMTP и пароль приложения — */
.mail-imap { border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 5px; }
.mail-imap__row { display: flex; gap: 10px; font-size: 0.85rem; flex-wrap: wrap; align-items: baseline; }
.mail-imap__row > span { width: 132px; flex: none; }
.mail-imap__row code { background: var(--c-bg); padding: 1px 6px; border-radius: 4px; word-break: break-all; }
.mail-apppw { margin-top: 8px; }
.mail-apppw__val { display: flex; gap: 10px; align-items: center; background: var(--c-primary-soft); padding: 8px 12px; border-radius: var(--r-sm); margin-top: 4px; flex-wrap: wrap; }
.mail-apppw__val code { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.5px; }
.mail-ok { color: var(--c-success); font-weight: 600; }

/* ═══════════ v35: ЛК педагога — объединения и заявления ЕСЗ ═══════════ */
.esz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 16px; }
.esz-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.esz-card:hover { border-color: var(--c-primary); }
.esz-card.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-soft); }
.esz-card__title { font-weight: 700; margin-bottom: 2px; }
.esz-card__stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.esz-chip { display: inline-flex; align-items: center; border-radius: var(--r-full); padding: 2px 10px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.esz-chip--ok   { background: rgba(46, 125, 50, 0.12);  color: #2E7D32; }
.esz-chip--out  { background: rgba(198, 40, 40, 0.12);  color: #C62828; }
.esz-chip--new  { background: rgba(232, 122, 62, 0.14); color: #C75A1E; }
.esz-chip--wait { background: rgba(199, 135, 62, 0.14); color: #8a5a17; }
.esz-chip--mute { background: var(--c-bg); color: var(--c-muted); }
html[data-theme="dark"] .esz-chip--ok   { background: rgba(76, 175, 80, 0.18);  color: #81C784; }
html[data-theme="dark"] .esz-chip--out  { background: rgba(239, 83, 80, 0.18);  color: #E57373; }
html[data-theme="dark"] .esz-chip--wait { background: rgba(255, 183, 77, 0.16); color: #FFB74D; }
.esz-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.esz-toolbar .mail-pages { margin-left: auto; }
.esz-tablewrap { overflow-x: auto; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.esz-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.esz-table th { text-align: left; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.esz-table td { padding: 10px 14px; border-bottom: 1px solid var(--c-line); vertical-align: top; font-size: 0.92rem; }
.esz-table tbody tr:hover { background: var(--c-primary-soft); }
.esz-table tbody tr:last-child td { border-bottom: 0; }


/* ═══ v36: журналы МЭШ ДО ═══ */
.mes-bdg { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.mes-bdg--ok { background:#e7f5ec; color:#1b7a3d; }
.mes-bdg--warn { background:#fdeeec; color:#b3261e; }
.mes-list { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(20,40,38,.07); }
.mes-list th { text-align:left; font-size:12px; color:#6b7b78; padding:10px 12px; background:#f4f8f7; }
.mes-list td { padding:10px 12px; border-top:1px solid #eef3f2; font-size:14px; vertical-align:middle; }
.mes-list td.nm { white-space:nowrap; }
.mes-jwrap { overflow:auto; max-height:72vh; border:1px solid #e3ebeb; border-radius:12px; background:#fff; }
.mes-jt { border-collapse:separate; border-spacing:0; font-size:12px; }
.mes-jt th, .mes-jt td { border-right:1px solid #eef3f2; border-bottom:1px solid #eef3f2; padding:3px 6px; text-align:center; background:#fff; }
.mes-jt thead th { position:sticky; top:0; z-index:3; background:#f4f8f7; font-weight:600; }
.mes-jt thead tr:nth-child(2) th { top:25px; }
.mes-jt .mes-mh { color:#9a3b62; letter-spacing:.4px; }
.mes-jt .mes-dh { min-width:26px; color:#39514d; cursor:default; }
.mes-jt .sl, .mes-jt td.sl { position:sticky; left:0; z-index:2; text-align:left; white-space:nowrap; background:#fff; border-right:2px solid #dfe8e7; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.mes-jt thead .sl { z-index:4; background:#f4f8f7; }
.mes-cell { cursor:pointer; min-width:26px; height:24px; user-select:none; }
.mes-cell:hover { background:#f0f6f5; }
.mes-cell--n { color:#b3261e; font-weight:700; background:#fdecea; }
.mes-cell--b { color:#1565c0; font-weight:700; background:#e3f0fd; }
.mes-cell--bi { color:#b3261e; font-weight:700; background:#fde3f0; }
.mes-cnt { font-weight:700; color:#b3261e; background:#fbf6f6; }
.mes-cmp th { text-align:center; }
.mes-cmp td.mes-c { text-align:center; min-width:34px; }
.mes-mis { background:#fff7d6 !important; }
.mes-need { background:#ffe3e0 !important; }

/* ═══ v38.1: фильтр-бар — без горизонтального скролла на мобильных ═══ */
.public-filter-bar { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.public-filter-bar > div { min-width: 0; }
.public-filter-bar input { max-width: 100%; box-sizing: border-box; }
@media (max-width: 600px) {
  .public-filter-bar { gap: 8px; padding: 12px; }
  .public-filter-bar > div { flex: 1 1 calc(50% - 8px); }
  .public-filter-bar > div:first-child { flex: 1 1 100%; }
  .public-filter-bar input { width: 100%; min-width: 0 !important; }
  .public-filter-bar input[type="number"] { width: 100% !important; }
  .public-filter-bar > div:last-child { flex: 1 1 100%; }
  .public-filter-bar > div:last-child .btn-modern { flex: 1; }
}
.public-filter-bar .pfb-q { min-width: 200px; }
@media (max-width: 600px) { .public-filter-bar .pfb-q { min-width: 0; } }

/* ───────────────────────────────────────────────────────────────────
 * v39.14: базовый вид «голых» полей ввода (без класса/стилей).
 * Многие динамические формы (привести класс, кабинет, формы персонала)
 * создают <input> без класса — раньше они выглядели дефолтными белыми
 * прямоугольниками, не вписываясь в тему. Baseline через :where() имеет
 * НУЛЕВУЮ специфичность: его перекрывает ЛЮБОЕ конкретное правило
 * (.contact-form input, .form-row input, .filter input, .mega-search input,
 * .search-dialog__input и т.д.), а checkbox/radio/range/file не затрагиваются
 * (в списке только текстовые типы). width не задаём — чтобы не ломать
 * inline-раскладку (flex/width у конкретных полей).
 * ─────────────────────────────────────────────────────────────────── */
:where(input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
       input[type="search"], input[type="password"], input[type="url"], input[type="date"],
       input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
       input:not([type]), textarea, select) {
  padding: 10px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 0.98rem;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
:where(input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
       input[type="search"], input[type="password"], input[type="url"], input[type="date"],
       input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
       input:not([type]), textarea, select):focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-glow);
}
:where(input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
       input[type="search"], input[type="password"], input[type="url"], input[type="date"],
       input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
       input:not([type]), textarea, select)::placeholder {
  color: var(--c-muted);
  opacity: 1;
}
:where(html[data-theme="dark"]) :where(input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
       input[type="search"], input[type="password"], input[type="url"], input[type="date"],
       input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
       input:not([type]), textarea, select) {
  background: var(--c-surface-2);
  border-color: var(--c-line-2);
}

/* ════ v39.21 (аудит UI): минимальные стили для классов, использовавшихся
   в JS без определения в CSS (.empty-state, .page-title, .admin-section,
   .cabinet-section). Нейтрально, на токенах — без смены дизайна. ════ */
.empty-state {
  text-align: center;
  padding: var(--s-7, 40px) var(--s-5, 20px);
  color: var(--c-muted);
  background: var(--c-surface-2);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-lg, 16px);
  margin: var(--s-5, 20px) 0;
}
.empty-state p { margin: 0; }
.page-title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin: 0 0 var(--s-5, 20px);
}
.admin-section { margin: 0 0 var(--s-6, 28px); }
.admin-section__title {
  font-size: 1.25rem;
  margin: 0 0 var(--s-4, 14px);
  padding-bottom: var(--s-2, 8px);
  border-bottom: 1px solid var(--c-line);
}
.cabinet-section { margin: 0 0 var(--s-6, 28px); }

/* v39.21 (аудит контраста, тёмная тема):
   — сплошной --c-primary в тёмной теме светлый (#6FC4BF): белый текст 2.0:1 → тёмный (9.1:1);
     градиентные кнопки не трогаем — --grad-primary в тёмной теме теперь тёмный, белый текст ✓;
   — amber-плашки (дедлайн, даты на --grad-warm/--c-amber) — тёмный текст;
   — белые брендовые вставки (mos.ru) — тёмный текст внутри;
   — пилюля «Платно» и кнопка плитки — пары под тёмную тему. */
html[data-theme="dark"] .contest-card__type,
html[data-theme="dark"] .admin-badge,
html[data-theme="dark"] .skip-link,
html[data-theme="dark"] [style*="background:var(--c-primary)"],
html[data-theme="dark"] [style*="background: var(--c-primary)"] {
  color: #16140F !important;
}
html[data-theme="dark"] .contest-card__type--exhibition,
html[data-theme="dark"] .contest-card__type--competition { color: #16140F; }
html[data-theme="dark"] .contest-deadline { color: #2C2218; }
html[data-theme="dark"] .mosru-enroll {
  background: linear-gradient(135deg, rgba(111,196,191,0.06) 0%, rgba(33,30,24,0.92) 100%); /* v39.24: в светлой теме второй стоп — почти белый (0.92) — в тёмной давал «молочную вуаль» и нечитаемость шапки */
}
html[data-theme="dark"] .mosru-enroll strong,
html[data-theme="dark"] .mosru-enroll b { color: var(--c-ink); } /* v39.24: шапка блока лежит на тёмном — раньше красили тёмным «под белый фон» и текст пропадал */
html[data-theme="dark"] .mosru-enroll__hint { color: var(--c-muted); }
html[data-theme="dark"] .mosru-enroll__qr-wrap { color: #1C1A17; } /* подписи на белой подложке QR */
html[data-theme="dark"] .card__pill--paid { background: #4A3A12; color: #F4D58D; }
html[data-theme="dark"] .featured-tile__btn { color: #1F5F5A; }

/* v39.21 (аудит контраста): .muted рассчитан на светлый фон — в тёмном футере
   давал 2.7:1 (и 1.3:1 поверх фото-героев). Светлая пара 7.2:1. */
.site-footer .muted, .site-footer p.muted { color: rgba(255,255,255,0.72); }
.site-footer a { color: #9ED4CF; }
.site-footer a:hover { color: #C7E8E5; }

/* v39.21 (тёмная тема): активные чипы/переключатели со сплошным --c-primary
   (светлым в тёмной теме) получают тёмный текст. */
html[data-theme="dark"] .chip.is-active,
html[data-theme="dark"] .cat-pill.is-active,
html[data-theme="dark"] .cat-pill:hover,
html[data-theme="dark"] .trial-filter__btn.is-active,
html[data-theme="dark"] .icon-btn.is-active,
html[data-theme="dark"] .view-toggle button.is-active,
html[data-theme="dark"] .seg button.is-active,
html[data-theme="dark"] .schedule-mode-tabs button.is-active,
html[data-theme="dark"] .archive-tab-bar button.is-active {
  color: #16140F !important;
}
/* янтарный инлайн-чип (rgba(232,163,58,…)) — светлый текст в тёмной теме */
html[data-theme="dark"] [style*="rgba(232,163,58"] { color: #F4D58D !important; }

/* v39.24: лид на полупрозрачной мятной подложке program-hero — глубже (7.3:1, было 4.1) */
.program-hero .hero__lead { color: var(--c-ink-2); }
html[data-theme="dark"] .card__seats--full { color: #F0907F; } /* danger читаемый на тёмной карточке */