/* ukorpsy.ru — стили */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Cremona Sans';
  src: url('/assets/CremonaSans.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Akrobat'; src: url('/assets/Akrobat-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; }

:root {
  --font-display: 'Sora', sans-serif;
  --font-body: 'Akrobat', sans-serif;
  --font-name: 'Cremona Sans', sans-serif;
  --c1: #051f20;
  --c2: #235347;
  --c3: #daf1de;
  --c4: #daf1de;
  --dark: #051f20;
  --gray: #5a7a6e;
  --light: #f0f8f4;
  --white: #ffffff;
  --radius: 16px;
  --header-h: 108px;
  --shadow: 0 4px 20px rgba(5, 31, 32, 0.12);
  --shadow-lg: 0 8px 40px rgba(5, 31, 32, 0.18);
  --transition: all 0.3s ease;
  /* Единый боковой отступ страницы: full-bleed секции с комфортными полями.
     1920px → 96px, 3440px → 140px, 1280px → 64px, моб ≥24px. */
  --page-pad: clamp(24px, 5vw, 140px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* === Единая система иконок (mask + currentColor) ===
   Иконка наследует цвет через CSS color, масштабируется width/height.
   <span class="ic ic-undo" aria-hidden="true"></span> */
.ic {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.1em; height: 1.1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: middle;
}
.ic-undo { -webkit-mask-image: url(/assets/icons/undo-left.svg); mask-image: url(/assets/icons/undo-left.svg); }
.ic-arrow { -webkit-mask-image: url(/assets/icons/map-arrow-right.svg); mask-image: url(/assets/icons/map-arrow-right.svg); }
.ic-arrow-r { -webkit-mask-image: url(/assets/icons/square-arrow-right.svg); mask-image: url(/assets/icons/square-arrow-right.svg); }
.ic-darrow { -webkit-mask-image: url(/assets/icons/square-double-arrow-right.svg); mask-image: url(/assets/icons/square-double-arrow-right.svg); }
.ic-check { -webkit-mask-image: url(/assets/icons/check.svg); mask-image: url(/assets/icons/check.svg); }
.ic-pen { -webkit-mask-image: url(/assets/icons/pen-new.svg); mask-image: url(/assets/icons/pen-new.svg); }
.ic-share { -webkit-mask-image: url(/assets/icons/screen-share.svg); mask-image: url(/assets/icons/screen-share.svg); }
.ic-bin { -webkit-mask-image: url(/assets/school/paper-bin.svg); mask-image: url(/assets/school/paper-bin.svg); }
.ic-plus { -webkit-mask-image: url(/assets/icons/plus.svg); mask-image: url(/assets/icons/plus.svg); }

/* Единый шаблон кнопки с иконкой: flex-центрирование, осмысленный отступ */
.btn-ic, .cab-btn, .cab-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .42em;
}
.btn-ic .ic, .cab-btn .ic, .cab-btn-ghost .ic { width: 1.05em; height: 1.05em; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--light);
  color: var(--dark);
  line-height: 1.6;
}

/* === WYSIWYG Editor === */
.wy-toolbar { display: flex; gap: 4px; align-items: center; padding: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px 8px 0 0; flex-wrap: wrap; }
.wy-toolbar button { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; min-width: 32px; }
.wy-toolbar button:hover { background: #f1f5f9; }
.wy-divider { width: 1px; height: 24px; background: #e2e8f0; margin: 0 4px; }
.wy-editor { padding: 16px; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 8px 8px; font-size: 15px; line-height: 1.6; min-height: 200px; outline: none; color: var(--c1, #051f20); }
.wy-editor:focus { border-color: var(--c2, #235347); }
.wy-editor img { max-width: 100% !important; height: auto !important; border-radius: 8px; margin: 8px 0; }
.wy-editor h3 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; }
.wy-editor a { color: var(--c2, #235347); }
.wy-editor li { margin-left: 20px; }

/* === Cookie consent === */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  max-width: 480px; margin: 0 auto;
  background: var(--c1); color: var(--c3);
  padding: 16px 20px; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(5,31,32,0.25);
  display: flex; align-items: center; gap: 16px;
  z-index: 9000; font-size: 13px; line-height: 1.4;
}
.cookie-banner p { margin: 0; flex: 1; }
.cookie-banner a { color: var(--c3); }

/* === Шапка === */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  z-index: 1000;
  padding: 0 var(--page-pad);
}
@media (max-width: 700px) {
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.98); }
}

/* Трёхколоночная компоновка: логотип | навигация (2 строки) | иконка */
.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

/* Левая и правая колонки — по центру двух строк */
.header-side {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  align-self: center;
  padding: 8px 0;
}

.header-left {
  flex-direction: column;
  gap: 4px;
}

.logo-img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c1);
  letter-spacing: -0.5px;
}

/* Иконка кабинета */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 8px 0;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--c2), var(--c1));
  color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(5, 31, 32,0.25);
  transition: var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}

.header-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(5, 31, 32,0.35);
}

.header-logout {
  background: linear-gradient(135deg, #6b8a80, var(--gray));
  box-shadow: 0 2px 10px rgba(90,122,110,0.3);
}

.mobile-articles-btn { display: none; }

/* Гамбургер — только линии, без подложки */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 9px;
  align-self: center;
}

.mobile-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c1);
  border-radius: 2px;
  transition: var(--transition);
}

.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Центр — две строки навигации */
.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.nav {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid rgba(5, 31, 32,0.06);
}

.nav a {
  color: var(--dark);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}

.nav a:hover {
  background: var(--c4);
  color: var(--c1);
}

.nav a.active {
  background: linear-gradient(135deg, var(--c2), var(--c1));
  color: white;
}

/* Вторая строка — поднавигация */
.header-subnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* §5.6 — нижний промежуток визуально равен межэлементным верхним */
  padding: 6px 0 14px;
}

.nav-articles-btn {
  background: transparent;
  color: var(--c1) !important;
  font-weight: 600;
  padding: 7px 22px;
  border-radius: 10px;
  border: 2px solid var(--c1);
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.nav-articles-btn:hover {
  background: var(--c1);
  color: var(--c3) !important;
}


.mobile-toggle { display: none; }

/* === Главная === Визитка ===
   Зафиксированные правила:
   • Hero = один экран (100dvh).
   • Прямоугольник: отступы 20px справа, слева, снизу; верх — на 10px ниже имени.
   • ФИ: 10px ниже шапки и 10px выше прямоугольника, края = края прямоугольника.
   • Фото: снизу до низа прямоугольника, голова выходит за верх прямоугольника
     и немного перекрывает буквы Й и Ч.
   • Размер шрифта ФИ подбирается так, чтобы слова почти заполнили ширину
     (края к краям), остальное — масштабированием. */
.hero {
  background: #ffffff;
  position: relative;
  height: 100dvh;
  min-height: 520px;
  padding-top: var(--header-h, 108px);
  box-sizing: border-box;
  overflow: hidden;
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  container-type: size;
  /* Высота фото: от центра ФИ до низа прямоугольника (по высоте), но
     не шире, чем позволяет прямоугольник: левый край фото
     (35cqw − ширина/2) не должен заходить за его левый край (20px). */
  --ph: min(calc(100cqh - 26px - (100cqw - 70px) * 0.0788),
             calc((70cqw - 40px) * 1480 / 1153));
}

/* Имя + фамилия: разнесены по краям (space-between), 10px ниже шапки.
   Шрифт подбирается под ширину контейнера (≈ ширина прямоугольника),
   с ограничением по высоте как страховкой. */
.hero-name {
  position: relative;
  margin: calc(6px + (100cqw - 70px) * 0.0205) 20px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-name);
  font-size: clamp(28px, min(calc((100cqw - 70px) / 8.58), 42cqh), 440px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.01em;
  color: transparent;
  z-index: 1;
}
.hero-name-l, .hero-name-r { max-width: 49%; overflow: hidden; text-overflow: clip; }
@media (min-width: 701px) {
  .hero-name { overflow: hidden; }
}
@media (max-width: 700px) {
  .hero-name { overflow: visible !important; }
  .hero-name-l, .hero-name-r { max-width: none !important; overflow: visible !important; }
}
.velaris-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.velaris-mask-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Прямоугольник: flex:1, отступ 10px от имени, 20px по бокам и снизу.
   Углы — iOS-squircle (clip-path via JS). */
.hero-rect-wrap {
  position: relative;
  flex: 1 1 auto;
  margin: 10px 20px 20px 20px;
  z-index: 2;
}

.hero-rect {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  pointer-events: none;
}

/* Заголовки (клинический психолог * педагог-психолог) — блок шириной
   по самому длинному титулу (max-content): левый край блока ровно на
   40px от левого края прямоугольника — как верхний отступ (40px), —
   а звезда и вторая строка центрируются внутри блока. */
.hero-titles {
  position: absolute;
  left: 40px;
  width: max-content;
  top: 0;
  bottom: calc(0.72 * clamp(24px, calc((65cqw - 60px - var(--ph) * 1153 / 1480 / 2) / 3.84 * min(1, 100cqh / 1200px)), 600px) - 25px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 40px 0 0 0;
  text-align: center;
  color: #ffffff;
  font-family: var(--font-body);
  pointer-events: none;
}
.hero-t1, .hero-t2 {
  font-size: clamp(14px, 1.75cqw, 28px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hero-star {
  font-size: max(20px, min(calc(7 * clamp(26px, 3.2cqw, 60px)), calc(35cqw - var(--ph) * 1153 / 1480 / 2 - 20px)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: heroStarSpin 33s linear infinite;
}
.hero-star svg { width: 0.55em; height: 0.55em; display: block; }
@media (min-width: 701px) and (min-height: 541px) {
  .hero-star svg { width: 0.25em; height: 0.25em; }
}
@keyframes heroStarSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}
/* Теглайн — отцентрирован между верхним краем прямоугольника и кнопкой «Связаться». */
.hero-tagline-wrap {
  position: absolute;
  left: calc(35cqw + var(--ph) * 1153 / 1480 / 2 - 20px);
  right: 0;
  top: 0;
  bottom: calc(0.72 * clamp(24px, calc((65cqw - 60px - var(--ph) * 1153 / 1480 / 2) / 3.84 * min(1, 100cqh / 1200px)), 600px) - 25px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-body);
  pointer-events: none;
}
.hero-tagline {
  position: relative;
  display: inline-block;
  text-align: left;
  font-size: clamp(26px, 3.2cqw, 60px);
  font-weight: 400;
  line-height: 1.15;
  pointer-events: auto;
}
/* Декоративная кавычка (SVG, цвет через mask): висит по диагонали слева
   сверху от начала теглайна — левее первой строки и приподнята над ней.
   Все отступы в em, поэтому положение масштабируется вместе с теглайном;
   правый край кавычки не доходит до текста на ~0.15em и букв не касается. */
.hero-quote {
  position: absolute;
  left: -1.2em;
  top: -0.6em;
  width: 1.05em;
  height: 1.15em;
  background: #ffffff;
  -webkit-mask: url('/assets/quote.svg') center / contain no-repeat;
  mask: url('/assets/quote.svg') center / contain no-repeat;
  pointer-events: none;
  animation: heroQuoteBounce 2.4s ease-in-out infinite;
}
@keyframes heroQuoteBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-star { animation: none; }
  .hero-quote { animation: none; }
}
/* CTA-кнопка: привязана к нижнему краю прямоугольника. Ссылка — БЛОЧНЫЙ
   ребёнок wrap: в wrap не создаётся line box со strut (невидимой
   строкой-опорой), высота wrap = высоте ссылки, поэтому геометрия не
   зависит от наследованного line-height. При line-height 0.72 базовая
   линия «Связаться» (у слова нет выносных вниз) сидит ≈0.08em выше
   нижней границы бокса, и offset = 0.08em + 2px ставит видимый низ букв
   на пару пикселей ниже нижней границы прямоугольника при любом
   размере шрифта (em на wrap = размеру шрифта CTA). В браузерах
   с text-box-trim (блок @supports в конце файла) привязка точная
   по построению, без метрик шрифта. */
.hero-cta-wrap {
  position: absolute;
  left: calc(35cqw + var(--ph) * 1153 / 1480 / 2 - 20px);
  right: 0;
  bottom: calc(-0.08em - 2px);
  z-index: 2;
  text-align: center;
  font-size: clamp(24px, calc((65cqw - 60px - var(--ph) * 1153 / 1480 / 2) / 3.84 * min(1, 100cqh / 1200px)), 600px);
}
.hero-cta-text {
  display: block;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 700;
  line-height: 0.72;
  color: #ffffff;
  text-decoration: none;
  padding: 0;
  border: none;
  border-radius: 0;
  white-space: nowrap;
  transition: transform 0.28s ease;
}
.hero-cta-text:hover {
  transform: translateY(-6px);
}

/* Фото: без обрезки (ширина = высота × пропорция исходника), увеличено так,
   что верх — на центре ФИ, низ — у нижней границы прямоугольника.
   Центр ≈ 35% — там сходятся Й (конец ЮРИЙ) и Ч (начало ЧУХЛАНЦЕВ). */
.hero-photo {
  position: absolute;
  /* Низ фото на 1px ниже нижней границы прямоугольника (100cqh − 19px):
     у PNG снизу прозрачный запас, и без сдвига между видимым фото и
     краем остаётся зазор. Clip-path срезает нижний 1px картинки, поэтому
     видимый низ фото оказывается ровно на границе прямоугольника и
     за неё не выходит. При ограничении ширины (узкие/высокие вьюпорты)
     фото прижимается к нижней границе, а не повисает в середине. */
  top: calc(100cqh - 19px - var(--ph));
  left: calc(35cqw - var(--ph) * 1153 / 1480 / 2);
  width: calc(var(--ph) * 1153 / 1480);
  height: var(--ph);
  object-fit: cover;
  object-position: top;
  clip-path: inset(0 0 1px 0);
  -webkit-clip-path: inset(0 0 1px 0);
  z-index: 1;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--c2), var(--c1));
  color: white;
  padding: 14px 32px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(5, 31, 32, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5, 31, 32, 0.4);
}

/* Крупная кнопка заявки */
.btn-request {
  font-size: 22px;
  padding: 22px 50px;
  border-radius: 16px;
  white-space: nowrap;
}

/* === Секции === */
.section {
  padding: 60px var(--page-pad);
  scroll-margin-top: calc(var(--header-h, 108px) + 16px);
}

.section-title {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 52px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 80px; height: 5px;
  background: linear-gradient(90deg, var(--c1), var(--c3));
  border-radius: 2px;
}

/* Секция «Как проходит терапия» — компактные отступы */
#process { padding-top: 30px; }
#process .section-title { margin-bottom: 16px; line-height: 1.0; }

@media (max-width: 700px) {
  .section-title { font-size: clamp(26px, 6.5vw, 40px); margin-bottom: 30px; line-height: 1.1; }
  .section-title::after { width: 56px; height: 4px; bottom: -8px; }
  #process .section-title { margin-bottom: 14px; }
}

/* Карточки */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.card {
  background: white;
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid rgba(5, 31, 32, 0.06);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card h3 {
  font-size: 25px;
  margin-bottom: 14px;
  color: var(--c1);
}

.card p {
  color: var(--gray);
  font-size: 18px;
}

.card .price {
  font-size: 30px;
  font-weight: 700;
  color: var(--c1);
  margin: 0 0 5px;
  margin-top: auto;
  min-height: 2.4em;
  line-height: 1.1;
  display: flex;
  align-items: flex-end;
}

.card .duration {
  font-size: 16px;
  color: var(--gray);
  min-height: 3.2em;
  display: flex;
  align-items: flex-end;
}

/* Услуги: карточки заполняют всю ширину контентной области (пустые колонки
   схлопываются при любом количестве услуг) — цены на одном уровне */
#services .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 1100px) { #services .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { #services .cards { grid-template-columns: 1fr; } }

/* Списки с маркерами-ромашками */
.daisy-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.daisy-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  border-radius: 12px;
  font-size: 15px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.daisy-list li::before {
  content: '✿';
  color: var(--c2);
  font-size: 18px;
  flex-shrink: 0;
}

/* === С кем работаю: карусели скруглённых квадратов === */
.who-sub {
  color: var(--c1);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  margin-bottom: 44px;
  max-width: 70ch;
}
.who-block { margin-bottom: 56px; }
.who-block-title {
  font-size: clamp(19px, 2vw, 27px);
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
.who-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.who-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  justify-content: safe center;
}
.who-track::-webkit-scrollbar { display: none; }
.who-track { cursor: grab; }
.who-track.dragging { cursor: grabbing; user-select: none; }
.who-track.dragging .who-card { pointer-events: none; }
.who-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(260px, 28vw, 380px);
  min-height: 280px;
  background: #fff;
  border-radius: 32px;
  padding: 30px 26px;
  box-shadow: 0 6px 24px rgba(5,31,32,0.08);
  border: 1px solid rgba(5,31,32,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.who-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(5,31,32,0.16);
}
.who-card--green {
  background: linear-gradient(160deg, #235347, #1d463b);
  color: #daf1de;
}
.who-card--green .who-card-title { color: #daf1de; }
.who-card--green .who-card-desc { color: rgba(218,241,222,0.82); }
.who-card--green .who-card-num { color: #b7e4c0; }
.who-card--dark {
  background: linear-gradient(160deg, #051f20, #0a2e2f);
  color: #daf1de;
}
.who-card--dark .who-card-title { color: #daf1de; }
.who-card--dark .who-card-desc { color: rgba(218,241,222,0.8); }
.who-card--dark .who-card-num { color: #8fb3a8; }
.who-card-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--c2);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.who-card-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--c1);
  line-height: 1.25;
  margin-bottom: 14px;
}
.who-card-desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--gray);
}
.who-arrow {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--c1);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(5,31,32,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.who-arrow:hover { background: var(--c1); color: var(--c3); }
.who-arrow:disabled { opacity: 0.35; cursor: default; }
.who-arrow-prev { order: -1; }

@media (max-width: 700px) {
  .who-arrow { display: none; }
  .who-card { width: 78vw; }
  .who-block { margin-bottom: 28px; }
  .who-block:last-child { margin-bottom: 0; }
  .who-sub { margin-bottom: 26px; }
}

/* Принципы */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.principle {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--c4), white);
  border-radius: 12px;
}

.principle .num {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--c2), var(--c1));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Образование */
.education-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px;
}

.diploma {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  border: 2px dashed var(--c4);
  font-size: 17px;
  text-align: center;
  padding: 24px;
}

.diploma-img {
  border: none;
  padding: 0;
}

.diploma-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Контакты */
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.contact-item .icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--c2), var(--c1));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c3);
  flex-shrink: 0;
}
.contact-item .icon svg { width: 30px; height: 30px; }
.consent-label { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--gray); cursor: pointer; }
.consent-label input { margin-top: 1px; }

/* === Глобальный кастомный чекбокс (check.svg) === */
input[type=checkbox]{
  --cb-color: var(--cab-accent, var(--c2, #7459C2));
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; min-width:18px; min-height:18px;
  border:2px solid rgba(20,30,50,0.2); border-radius:5px;
  background:#fff; cursor:pointer; flex-shrink:0;
  transition:border-color .15s, background-color .15s;
  vertical-align:middle; position:relative; margin:0;
}
input[type=checkbox]:hover{ border-color:var(--cb-color); }
input[type=checkbox]:focus-visible{ outline:2px solid color-mix(in srgb,var(--cb-color) 40%,transparent); outline-offset:2px; }
input[type=checkbox]:checked{
  background-color:var(--cb-color); border-color:var(--cb-color);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.4933 6.93502C18.8053 7.20743 18.8374 7.68122 18.565 7.99325L10.7079 16.9933C10.5654 17.1564 10.3594 17.25 10.1429 17.25C9.9263 17.25 9.72031 17.1564 9.57788 16.9933L6.43502 13.3933C6.16261 13.0812 6.19473 12.6074 6.50677 12.335C6.8188 12.0626 7.29259 12.0947 7.565 12.4068L10.1429 15.3596L17.435 7.00677C17.7074 6.69473 18.1812 6.66261 18.4933 6.93502Z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
}

.contact-request {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  background: #051f20;
  border-radius: 20px;
  padding: 28px 32px;
}
.contact-request .velaris-canvas { border-radius: 20px; }
.contact-request-text, .contact-request .btn-request { position: relative; z-index: 1; }
.contact-request-text h3 { color: #daf1de; font-size: 24px; margin-bottom: 6px; }
.contact-request-text p { color: rgba(218,241,222,0.85); font-size: 16px; margin: 0; max-width: 62ch; }
@media (max-width: 600px) {
  .contact-request { flex-direction: column; align-items: flex-start; }
}

.contact-item a {
  color: var(--c1);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
}

.contact-item div > div:first-child {
  font-size: 16px;
}

/* === Статьи === */
.articles-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: calc(var(--header-h, 108px) + 28px) 24px 40px;
  max-width: 1280px;
  margin: 0 auto;
}
.sidebar-toggle { display: none; padding: 12px 16px; background: var(--c4); border: none; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--c1); cursor: pointer; margin-bottom: 16px; width: 100%; text-align: left; }

/* Mobile: symmetric padding */
@media (max-width: 700px) {
  .articles-layout { padding: calc(var(--header-h, 64px) + 16px) 16px 24px !important; }
  .articles-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  .article-body { max-width: 100% !important; overflow-wrap: break-word !important; word-wrap: break-word !important; }
  .article-body img, .article-body video, .article-body iframe, .article-body pre { max-width: 100% !important; height: auto !important; overflow-x: auto !important; }
  .article-body p, .article-body h1, .article-body h2, .article-body h3, .article-body li { max-width: 100% !important; overflow-wrap: break-word !important; }
  .section { padding: 36px 16px !important; }
  #therapy { border-radius: 16px !important; }
}

.articles-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c2) transparent;
}
.articles-sidebar::-webkit-scrollbar { width: 4px; }
.articles-sidebar::-webkit-scrollbar-track { background: transparent; }
.articles-sidebar::-webkit-scrollbar-thumb { background: var(--c2); border-radius: 2px; }

.sidebar-group {
  margin-bottom: 28px;
}

.sidebar-group h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  margin-bottom: 10px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a {
  color: var(--dark);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-count { font-size: 12px; color: var(--gray); background: var(--c4); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.cat-posts { display: none; flex-direction: column; gap: 2px; padding: 4px 0 8px 12px; }
.cat-posts.open { display: flex; }
.cat-post-link { font-size: 13px; color: var(--gray); text-decoration: none; padding: 5px 10px; border-radius: 8px; line-height: 1.3; }
.cat-post-link:hover { background: var(--c4); color: var(--c1); }

.sidebar-nav a:hover {
  background: var(--c4);
}

.sidebar-nav a.active {
  background: linear-gradient(135deg, var(--c2), var(--c1));
  color: white;
  font-weight: 600;
}

.tg-block {
  background: linear-gradient(135deg, var(--c4), var(--c3));
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c1);
  transition: var(--transition);
}
.tg-block:hover { transform: scale(1.02); }
.tg-block img { max-width: 32px; flex-shrink: 0; margin: 0; }
.tg-block span { font-size: 13px; font-weight: 600; text-align: left; line-height: 1.3; }

.article-card {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  gap: 18px;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.article-card-thumb {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.article-card-content { flex: 1; min-width: 0; }

.article-card h3 a {
  color: var(--dark);
  text-decoration: none;
  font-size: 20px;
}

.article-card-sub {
  font-size: 14px;
  color: var(--c2);
  margin-bottom: 8px;
  font-weight: 600;
}

.article-card-preview {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.article-card-link {
  display: inline-block;
  color: var(--c1);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.mobile-cat-toggle {
  display: none;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c2), var(--c1));
  color: #daf1de;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(5,31,32,0.4);
  align-items: center;
  justify-content: center;
}

.article-card h3 a:hover {
  color: var(--c1);
}

.article-preview {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
  text-decoration: none;
  color: var(--dark);
  transition: box-shadow 0.2s, transform 0.2s;
  border: 1px solid rgba(5,31,32,0.06);
}
.article-preview:hover { box-shadow: 0 6px 24px rgba(5,31,32,0.1); transform: translateY(-2px); }
.article-preview-img { flex: 0 0 120px; width: 120px; height: 80px; border-radius: 10px; overflow: hidden; }
.article-preview-img img { width: 100%; height: 100%; object-fit: cover; }
.article-preview-body { flex: 1; min-width: 0; }
.article-preview-body h3 { font-size: 17px; margin-bottom: 4px; color: var(--c1); }
.article-preview-sub { font-size: 14px; color: var(--c2); margin-bottom: 4px; }
.article-preview-text { font-size: 14px; color: var(--gray); line-height: 1.5; }
.mobile-cat-toggle {
  display: none;
  position: fixed;
  left: 12px;
  bottom: 16px;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c2), var(--c1));
  color: #daf1de;
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(5,31,32,0.3);
}
@media (max-width: 700px) {
  .mobile-cat-toggle { display: flex; }
  .article-card { flex-direction: column; }
  .article-card-thumb { width: 100%; height: 160px; }
  .articles-sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    background: var(--light) !important;
    z-index: 1001 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    transition: left 0.3s ease !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
  }
  .articles-sidebar.open { left: 0 !important; }
  .articles-content { width: 100% !important; }
  .sidebar-toggle { display: none !important; }
}

.article-card .meta {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--gray);
}

.article-card .tag {
  background: var(--c4);
  color: var(--c1);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.article-body {
  font-size: 16px;
  line-height: 1.8;
}

.article-body h3 {
  margin: 20px 0 10px;
  color: var(--c1);
}
.article-img { max-width: 100%; border-radius: 14px; margin: 16px 0; box-shadow: var(--shadow); }
  .article-body img[alt="emoji"], .article-body img[src*="/emoji/"] { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: middle; margin: 0 1px; border-radius: 0; box-shadow: none; }
  .article-body img[src*="/uploads/"]:not([alt="emoji"]) { max-width: 100%; border-radius: 14px; margin: 16px 0; box-shadow: var(--shadow); }
.article-subtitle { font-size: 19px; color: var(--gray); font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.article-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.article-nav-link { display: block; padding: 14px 20px; background: #fff; border-radius: 12px; text-decoration: none; color: var(--c1); font-weight: 600; font-size: 15px; box-shadow: var(--shadow); flex: 1; max-width: 45%; transition: transform 0.2s; }
.article-nav-link:hover { transform: translateY(-2px); }
.tg-post-link {
  display: inline-block; margin-top: 20px; padding: 11px 22px;
  background: linear-gradient(135deg, var(--c2), var(--c1)); color: #daf1de;
  border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 15px;
  transition: transform 0.2s;
}
.tg-post-link:hover { transform: translateY(-2px); }

/* === Статьи: аккордеон категорий === */
.articles-accordion { max-width: 900px; margin: 0 auto; padding: calc(var(--header-h, 108px) + 28px) 24px 60px; }
.acc-page-title { font-size: 36px; font-weight: 800; margin-bottom: 8px; }
.acc-intro { color: var(--gray); margin-bottom: 28px; font-size: 16px; }
.acc-item { border-radius: 14px; overflow: hidden; margin-bottom: 10px; border: 1px solid rgba(5,31,32,0.1); background: #fff; }
.acc-header { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: none; background: transparent; cursor: pointer; font-size: 18px; font-weight: 700; color: var(--c1); text-align: left; transition: background 0.2s; }
.acc-header:hover { background: var(--c4); }
.acc-label { flex: 1; }
.acc-count { background: var(--c4); color: var(--c1); border-radius: 999px; padding: 2px 12px; font-size: 14px; font-weight: 700; }
.acc-arrow { transition: transform 0.25s; color: var(--c2); font-size: 16px; }
.acc-item.open .acc-arrow { transform: rotate(180deg); }
.acc-body { display: none; padding: 6px 14px 14px; }
.acc-item.open .acc-body { display: block; }
.acc-article { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--dark); font-size: 15px; transition: background 0.15s; }
.acc-article:hover { background: var(--c4); color: var(--c1); }
.articles-accordion .tg-block { margin-top: 32px; }

/* === Личный кабинет === */
.cabinet-layout {
  padding: calc(var(--header-h, 108px) + 28px) 24px 40px;
  max-width: 1280px;
  margin: 0 auto;
}

.cabinet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.cabinet-header h1 {
  font-size: 28px;
  font-weight: 800;
}

.cabinet-header h1 span {
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.widget {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.widget h3 {
  font-size: 16px;
  color: var(--gray);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.widget-large {
  grid-column: span 2;
}

/* Прогресс-кольцо */
.progress-ring {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ring {
  width: 120px; height: 120px;
  position: relative;
}

.ring svg {
  transform: rotate(-90deg);
}

.ring .bg {
  fill: none;
  stroke: var(--c4);
  stroke-width: 8;
}

.ring .fg {
  fill: none;
  stroke: url(#grad);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.ring .label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 800;
  color: var(--c1);
}

/* График настроения */
.mood-chart {
  width: 100%;
  height: 160px;
  position: relative;
}

.mood-chart svg {
  width: 100%;
  height: 100%;
}

/* Цели */
.goal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0e8dc;
}

.goal-item:last-child {
  border-bottom: none;
}

.goal-bar {
  flex: 1;
  height: 8px;
  background: var(--c4);
  border-radius: 4px;
  overflow: hidden;
}

.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c2), var(--c1));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Привычки */
.habits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}

.habit-tile {
  aspect-ratio: 1;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.habit-tile.done {
  background: linear-gradient(135deg, var(--c3), var(--c2));
  color: white;
}

.habit-tile:not(.done) {
  background: var(--c4);
  color: var(--gray);
}

.habit-tile:hover {
  transform: scale(1.05);
}

.habit-tile .icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.habit-tile .name {
  font-size: 10px;
  text-align: center;
}

/* Quick actions */
.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--c4), white);
  border: 1px solid var(--c3);
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: var(--dark);
}

.quick-btn:hover {
  background: linear-gradient(135deg, var(--c3), var(--c2));
  color: white;
}

/* Модальные окна */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: white;
  border-radius: 20px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.modal h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--c4);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--c2);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* Слайдеры настроения */
.mood-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mood-slider label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--gray);
}

.mood-slider input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--c4);
  border-radius: 3px;
  outline: none;
}

.mood-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: linear-gradient(135deg, var(--c2), var(--c1));
  border-radius: 50%;
  cursor: pointer;
}

/* === Auth === */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--c4), var(--light));
}

.auth-card {
  background: white;
  border-radius: 24px;
  padding: 40px;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.auth-card h2 {
  font-size: 24px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-card .error {
  background: #fee;
  color: #c33;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 16px;
}

.auth-card .link {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
}

.auth-card .link a {
  color: var(--c1);
  text-decoration: none;
  font-weight: 600;
}

/* === Админка: TailAdmin-стиль === */
:root {
  --admin-sidebar-w: 260px;
  --admin-content-bg: #f4f7f6;
  --admin-card-bg: #fff;
  --admin-card-radius: 12px;
  --admin-text: #364153;
  --admin-text-muted: #64748b;
  --admin-border: #e2e8f0;
  --admin-accent: var(--c2);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.admin-layout {
  display: flex;
  padding: var(--header-h, 108px) 0 0 0;
  max-width: 100%;
  margin: 0;
  min-height: 100dvh;
  background: var(--admin-content-bg);
}

.admin-sidebar {
  width: var(--admin-sidebar-w);
  background: var(--c1);
  position: fixed;
  top: var(--header-h, 108px);
  left: 0;
  bottom: 0;
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
  transition: transform 200ms var(--ease-out);
}
.admin-sidebar::-webkit-scrollbar { width: 3px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.admin-sidebar-header {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  padding: 8px 12px 16px;
}
.admin-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.admin-sidebar-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-sidebar-item.active { background: var(--admin-accent); color: #fff; }
.admin-sidebar-item svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; }
.admin-sidebar-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  text-align: center;
}
.admin-sidebar-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 12px 0; }
.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms var(--ease-out);
}
.admin-sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-sidebar-link .ic { width: 16px; height: 16px; }

.admin-main {
  flex: 1;
  margin-left: var(--admin-sidebar-w);
  padding: 28px 32px 40px;
  min-width: 0;
}
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.admin-page-header h1 { font-size: 24px; font-weight: 700; color: var(--admin-text); }

.admin-card {
  background: var(--admin-card-bg);
  border-radius: var(--admin-card-radius);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid var(--admin-border);
  margin-bottom: 20px;
}
.admin-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--admin-border);
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.admin-form .full { grid-column: 1 / -1; }
.admin-form label { font-size: 13px; font-weight: 500; color: var(--admin-text-muted); margin-bottom: 6px; display: block; }
.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--admin-text);
  background: #fff;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  font-family: inherit;
  box-sizing: border-box;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: none;
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(35,83,71,0.1);
}

.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.admin-table th {
  padding: 10px 16px; text-align: left; color: var(--admin-text-muted);
  font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--admin-border);
}
.admin-table td { padding: 12px 16px; font-size: 13px; color: var(--admin-text); border-bottom: 1px solid var(--admin-border); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .actions { display: flex; gap: 6px; }

.admin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform 120ms var(--ease-out), background 150ms var(--ease-out);
}
.admin-btn:active { transform: scale(0.97); }
.admin-btn-primary { background: var(--admin-accent); color: #fff; }
.admin-btn-primary:hover { background: var(--c1); }

.btn-sm {
  padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform 120ms var(--ease-out), opacity 150ms var(--ease-out);
}
.btn-sm:active { transform: scale(0.97); }
.btn-edit { background: #e0f2fe; color: #0369a1; }
.btn-edit:hover { background: #bae6fd; }

.quick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid var(--admin-border);
  background: #fff; color: var(--admin-text);
  transition: transform 120ms var(--ease-out);
}
.quick-btn:active { transform: scale(0.97); }

.upload-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; cursor: pointer; color: #64748b; flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}
.upload-icon-btn:hover { background: #f1f5f9; color: #235347; }
.upload-icon-btn svg { width: 18px; height: 18px; }

.tab-badge {
  display: inline-block; margin-left: 6px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
  line-height: 18px; border-radius: 9px; padding: 0 5px; vertical-align: middle;
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.admin-mobile-toggle { display: none; }

@media (max-width: 900px) {
  .admin-sidebar { transform: translateX(-100%); z-index: 1001; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; padding: 20px 16px 32px; }
  .admin-form { grid-template-columns: 1fr; }
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-card { padding: 16px; }
  .admin-mobile-toggle { display: flex; }
}
@media (max-width: 600px) {
  .admin-main { padding: 16px 12px 24px; }
  .admin-table th, .admin-table td { padding: 6px 8px; font-size: 11px; }
}

.btn-delete { background: #fee2e2; color: #991b1b; }
.btn-delete:hover { background: #fecaca; }

/* === Footer === */
.footer {
  background: var(--dark);
  color: var(--c4);
  padding: 52px var(--page-pad);
  text-align: center;
  font-size: 17px;
}

.footer a {
  color: var(--c3);
  text-decoration: none;
}

/* === Адаптив === */
@media (max-width: 900px), (max-height: 540px) {
  :root { --header-h: 64px; }

  .articles-layout {
    grid-template-columns: 1fr;
  }
  .articles-sidebar {
    position: static;
  }
  .sidebar-toggle { display: block; }
  .widget-large {
    grid-column: span 1;
  }
  /* Мобильное меню */
  .mobile-toggle { display: flex; }
  .mobile-articles-btn {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--c1);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--c4);
    white-space: nowrap;
  }
  .header-center {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: #ffffff;
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
    box-shadow: var(--shadow);
    border-bottom: 1px solid rgba(5,31,32,0.08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    z-index: 999;
  }
  .header-center.open { max-height: 500px; opacity: 1; padding: 12px 16px 16px; }
  .header-center .nav {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(5,31,32,0.08);
    padding: 0 0 8px;
  }
  .header-center .nav a { padding: 12px 14px; }
  .header-subnav { flex-direction: column; gap: 8px; padding-top: 8px; }
  .header-subnav .nav-articles-btn { font-size: 14px; }
  .header-grid { grid-template-columns: auto auto auto 1fr auto; gap: 6px; }
  .header { padding: 0 12px; }
  .header-right { gap: 4px; justify-self: end; }
  .header-icon-btn { width: 36px; height: 36px; }
  .header-icon-btn svg, .header-icon-btn .header-ic { width: 18px; height: 18px; }
  .mobile-articles-btn { display: inline-block; }
}

/* Hero на ноутбуках/коротких вьюпортах: уменьшаем шрифт ФИ. */
@media (max-width: 1200px) and (min-width: 701px) {
  .hero-name {
    font-size: clamp(28px, min(calc((100cqw - 70px) / 9.5), 42cqh), 440px);
  }
}

/* Hero при 4:3 и уже: titles — базовая логика (блок на 40px от края),
   теги мельче. */
@media (max-aspect-ratio: 4/3) and (min-width: 701px) {
  .hero-t1, .hero-t2 {
    font-size: clamp(12px, 1.4cqw, 22px);
  }
  .hero-tagline-wrap {
    top: 30%;
    bottom: auto;
    left: calc(35cqw + var(--ph) * 1153 / 1480 / 2);
    right: 0;
    align-items: flex-start;
    justify-content: center;
  }
  .hero-cta-wrap {
    left: calc(35cqw + var(--ph) * 1153 / 1480 / 2 - 20px);
    right: 0;
    text-align: center;
    font-size: clamp(48px, 8cqw, 120px);
  }
}

/* Hero на iPad Air/Pro в альбоме (>4:3): отступ титлс слева, теглайн по центру между фото и правым краем */
@media (min-aspect-ratio: 7/5) and (min-width: 701px) and (max-width: 1200px) {
  .hero-tagline-wrap {
    top: 30%;
    bottom: auto;
    left: calc(35cqw + var(--ph) * 1153 / 1480 / 2);
    right: 0;
    align-items: flex-start;
    justify-content: center;
  }
  .hero-cta-wrap {
    left: calc(35cqw + var(--ph) * 1153 / 1480 / 2 - 20px);
    right: 0;
    text-align: center;
    font-size: clamp(48px, 8cqw, 120px);
  }
}

/* Hero при квадратном/портретном соотношении (но >700px) — портретные
   планшеты (iPad Air и т.п.): мобильная компоновка. Фото по центру,
   низ прижат к нижней границе прямоугольника; титулы сверху по центру,
   теглайн между ними и фото. */
@media (max-aspect-ratio: 1/1) and (min-width: 701px) {
  /* Размер фото: не шире 70% ширины и не выше, чем позволяет зона
     текста сверху (титулы + теглайн + зазоры ≈ 350px + нижний отступ). */
  .hero-stage {
    --ph: min(calc(70cqw * 1480 / 1153), calc(100cqh - 350px));
  }
  .hero-photo {
    left: calc(50cqw - var(--ph) * 1153 / 1480 / 2);
  }
  .hero-titles {
    left: 50%;
    top: 0;
    bottom: auto;
    width: auto;
    padding: 40px 0 0 0;
    align-items: center;
    transform: translateX(-50%);
  }
  .hero-t1, .hero-t2 {
    font-size: clamp(18px, 2.7cqw, 30px);
    font-weight: 600;
    text-align: center;
  }
  /* Базовая формула звезды привязана к фото с центром 35cqw — здесь
     фото центрировано, поэтому задаём масштаб явно. */
  .hero-star {
    font-size: clamp(64px, 10cqw, 140px);
  }
  .hero-tagline-wrap {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: calc(var(--ph) + 30px);
    width: auto;
    transform: none;
  }
  .hero-tagline {
    text-align: center;
    font-size: clamp(28px, 4cqw, 42px);
    font-weight: 500;
  }
  /* Ширины хватает на всю строку: принудительный перенос из вёрстки
     отключаем (как на мобиле), текст течёт в одну строку. */
  .hero-tagline br { display: none; }
  .hero-rect-wrap { overflow: hidden; clip-path: inset(0); }
  .hero { overflow: hidden; }
  .hero-cta-wrap {
    left: 20px;
    right: 20px;
    text-align: center;
    font-size: clamp(32px, 14cqw, 120px);
  }
}

/* Hero на телефоне: фото-бюст по центру сверху, текст и кнопка ниже на всю ширину.
   Теглайн переносится естественно (принудительный <br> отключён). */
@media (max-width: 700px) {
  .hero { min-height: min(700px, 100vh); min-height: min(700px, 100svh); height: auto; overflow: visible; display: flex; flex-direction: column; }
  .hero-stage { height: auto; container-type: normal; flex: 1; }
  .hero-name { margin: 16px 20px 0; font-size: clamp(30px, 10vw, 62px); line-height: 1.0; color: #051f20 !important; }
  .hero-rect { background: #051f20 !important; border-radius: 20px; overflow: hidden; }
  .velaris-canvas { display: none !important; }
  .velaris-mask-src { display: none !important; }
  .velaris-mob { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
  .hero-tagline br { display: none; }

  /* rect-wrap: тёмный прямоугольник, flex-колонка. overflow: hidden —
     прямоугольник сам обрезает всё, что выходит за его края (фото
     прижато к низу с запасом −4px): видимый низ фото всегда ровно
     на границе, ниже неё ничего не рисуется. Радиус повторяет
     скругление прямоугольника, чтобы клип шёл по его контуру. */
  .hero-rect-wrap {
    position: relative;
    flex: 1;
    margin: 10px 20px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
  }
  .hero-rect { position: absolute; inset: 0; z-index: 0; }

  /* Заголовки и теглайн над фото, без большого отступа */
  .hero-titles {
    position: relative;
    left: auto; top: auto; bottom: auto; width: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 14px 16px 4px; z-index: 1;
  }
  .hero-t1, .hero-t2 { font-size: clamp(13px, 3.8vw, 19px); line-height: 1.1; white-space: normal; }
  .hero-star { font-size: clamp(28px, 8.4vw, 42px); animation: heroStarSpin 33s linear infinite; }
  .hero-tagline-wrap {
    position: relative;
    left: auto; top: auto; bottom: auto; right: auto;
    display: block; padding: 0 16px 8px; z-index: 1; text-align: center;
  }
  .hero-tagline { display: inline-block; text-align: center; font-size: clamp(20px, 6vw, 30px); font-weight: 700; line-height: 1.2; margin-top: 20px; }
  /* Кавычка в потоке перед текстом: при центрированном теглайне с
     переносами она всегда у реального начала первой строки, а не у
     края блока; vertical-align приподнимает её по диагонали над строкой. */
  .hero-quote { position: static; display: inline-block; width: 0.5em; height: 0.55em; margin-right: 0.15em; vertical-align: 0.5em; animation: heroQuoteBounce 2.4s ease-in-out infinite; }

  /* Фото: в потоке, центрировано, нижняя часть перекрыта CTA.
     Третий предел ширины — по высоте вьюпорта: высота композиции без
     фото (шапка + имя + титулы + теглайн + отступы) ≈ 240px + 27vw,
     поэтому на низких экранах (iPhone SE и т.п.) фото сжимается так,
     чтобы CTA целиком помещался в видимую область (svh — с учётом
     адресной строки, vh — fallback для старых браузеров). */
  .hero-photo {
    position: relative;
    left: auto; top: auto; bottom: auto; transform: none;
    width: min(85%, 320px, max(150px, calc((100vh - 240px - 27vw) * 1153 / 1480)));
    width: min(85%, 320px, max(150px, calc((100svh - 240px - 27vw) * 1153 / 1480)));
    height: auto;
    aspect-ratio: 1153 / 1480;
    /* Разрешаем flex-усадку: при переполнении колонки (например,
       двухстрочный теглайн на узких экранах) фото сжимается ровно
       на величину переполнения, а не выдавливается за нижний край
       прямоугольника. margin-top: auto по-прежнему прижимает его
       к низу, object-fit: cover срезает лишнее снизу. */
    min-height: 0;
    margin: auto auto -4px;
    display: block;
    z-index: 1;
    clip-path: inset(0 0 4px 0);
    -webkit-clip-path: inset(0 0 4px 0);
  }

  /* CTA: абсолютная, точно на нижней границе прямоугольника: wrap
     обрезает контент по краю (overflow: hidden), поэтому текст
     не опускаем ниже границы — низ букв ровно на ней. */
  .hero-cta-wrap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: auto;
    z-index: 2;
    text-align: center;
    margin: 0;
    font-size: clamp(56px, 22vw, 92px);
  }
  .hero-cta-text {
    display: block;
    width: 100%;
    font-size: inherit;
    padding: 6px 0 0;
    border-radius: 0;
    line-height: 0.9;
    transition: transform 0.28s ease;
  }
  .hero-cta-text:active {
    transform: translateY(-4px);
  }
}

/* Hero в альбомном режиме телефона: десктоп-подобная компоновка на флексах
   (имя сверху, прямоугольник с Velaris, ряд: титулы | теглайн | фото, CTA внизу). */
@media (orientation: landscape) and (max-height: 540px) {
  .hero { height: 100dvh; min-height: 0; padding-top: 64px; overflow: hidden; display: flex; flex-direction: column; }
  .hero-stage { height: 100%; container-type: normal; flex: 1; display: flex; flex-direction: column; --ph: 0; }
  .hero-name { margin: 14px 20px 0; font-size: clamp(28px, 7vw, 54px); line-height: 1.0; color: #051f20 !important; transform: translateY(2px); }
  .hero-rect-wrap { position: relative; flex: 1 1 auto; margin: 6px 20px 18px; display: flex; flex-direction: row; align-items: stretch; border-radius: 20px; overflow: visible; }
  .hero-rect { position: absolute; inset: 0; z-index: 0; background: #051f20 !important; border-radius: 20px; overflow: hidden; }
  .velaris-canvas { display: none !important; }
  .velaris-mask-src { display: none !important; }
  .velaris-mob { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

  .hero-titles { position: relative; left: auto; top: auto; bottom: auto; width: auto; flex: 0 0 34%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; z-index: 1; }
  .hero-t1, .hero-t2 { font-size: clamp(11px, 2.4vw, 16px); white-space: normal; }
  .hero-star { font-size: clamp(20px, 5vw, 32px); animation: heroStarSpin 33s linear infinite; }

  .hero-tagline-wrap { position: relative; left: auto; top: auto; bottom: auto; right: auto; flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; padding: 6px 16px 6px 6px; z-index: 2; text-align: right; }
  .hero-tagline { display: inline-block; text-align: right; font-size: clamp(16px, 3.4vw, 26px); font-weight: 700; line-height: 1.15; margin-top: 0; }
  .hero-quote { position: static; display: inline-block; width: 0.85em; height: 0.93em; margin-right: 0.15em; vertical-align: 0.3em; animation: heroQuoteBounce 2.4s ease-in-out infinite; }

  .hero-photo { position: absolute; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%); width: auto; height: calc(100% + 36px); aspect-ratio: 1153 / 1480; margin: 0; object-fit: cover; object-position: top; clip-path: inset(0 0 1px 0); -webkit-clip-path: inset(0 0 1px 0); z-index: 1; }

  .hero-cta-wrap { position: absolute; left: 0; right: 0; bottom: calc(-0.01em - 2px); top: auto; z-index: 2; text-align: center; margin: 0; font-size: clamp(28px, 8vw, 56px); }
  .hero-cta-text { display: block; width: auto; font-size: inherit; line-height: 0.9; padding: 0; }
}

/* === Mobile articles sidebar === */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
}
.sidebar-overlay.active { display: block; }
@media (max-width: 700px) {
  .mobile-cat-toggle { display: flex !important; }
  .articles-sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 260px !important;
    background: var(--light) !important;
    z-index: 1001 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: left 0.3s ease !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
  }
  .articles-sidebar.open { left: 0 !important; }
  .articles-layout { grid-template-columns: 1fr !important; }
  .article-card { flex-direction: column !important; }
  .article-card-thumb { width: 100% !important; height: 160px !important; }
  .sidebar-toggle { display: none !important; }
  .article-feed-item .card { padding: 16px !important; margin-bottom: 16px !important; }
  .article-img { max-width: 100% !important; height: auto !important; }
  .article-body img { max-width: 100% !important; height: auto !important; }
}

/* Временная кнопка переключения дизайна */
/* === О психотерапии: вступление + 4 принципа === */
.therapy-intro {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.7;
  color: var(--gray);
  max-width: none;
  margin-bottom: 40px;
}

/* === О психотерапии — галерея-раскладушка ===
   Геометрия анимируется только flex-grow (раскрытие панели) и
   transform фото (GPU). Контент панели переключается кроссфейдом
   opacity: свёрнутая вертикальная подпись гаснет, развёрнутые
   заголовок и описание проявляются, когда панель почти раскрылась,
   — текст не перематывается на глазах, состояний display:none и
   мгновенных скачков writing-mode/font-size больше нет. */
.therapy-gallery { display: flex; gap: 10px; width: 100%; height: clamp(340px, 58vh, 660px); margin: 8px 0 0; }
.t-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 22px; cursor: pointer; transition: flex-grow 0.65s var(--ease-out, cubic-bezier(.23,1,.32,1)); box-shadow: 0 8px 30px rgba(5,31,32,.18); }
.t-panel.active { flex: 6 1 0; }
.t-panel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s var(--ease-out, cubic-bezier(.23,1,.32,1)); user-select: none; pointer-events: none; }
.t-panel.active .t-panel-bg { transform: scale(1.04); }
/* Затемнение: два слоя с кроссфейдом opacity — градиенты не
   интерполируются, переход background срезался бы щелчком. */
.t-panel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,31,32,.55), rgba(5,31,32,.4) 35%, rgba(5,31,32,.8)); pointer-events: none; }
.t-panel-shade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,31,32,.5) 0%, rgba(5,31,32,.22) 45%, rgba(5,31,32,.88) 100%); opacity: 0; transition: opacity 0.5s; }
.t-panel.active .t-panel-shade::after { opacity: 1; }
.t-panel-body { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #daf1de; }
.t-panel.active .t-panel-body { justify-content: flex-start; align-items: flex-start; padding: 32px; }
/* Развёрнутый заголовок: в потоке, до активации невидим; проявляется
   с задержкой — панель почти раскрыта, строки уже не перескакивают. */
.t-panel-title { margin: 0; font-size: clamp(48px, 4.5vw, 78px); font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.12s ease-out, transform 0.12s ease-out, visibility 0s 0.12s; }
.t-panel.active .t-panel-title { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease-out, cubic-bezier(.23,1,.32,1)) 0.3s, transform 0.35s var(--ease-out, cubic-bezier(.23,1,.32,1)) 0.3s, visibility 0s; }
/* Свёрнутая вертикальная подпись — дубликат заголовка (aria-hidden,
   чтобы скринридер не читал дважды); между состояниями кроссфейд,
   скачка writing-mode одного и того же элемента больше нет. */
.t-panel-title-side { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(18px, 2vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; white-space: nowrap; opacity: 1; transition: opacity 0.12s ease-out; pointer-events: none; }
.t-panel.active .t-panel-title-side { opacity: 0; }
.t-panel:not(.active) .t-panel-title-side { transition: opacity 0.25s ease-out; }
/* Описание: всегда в потоке, переключение через opacity/visibility —
   без display:none (мгновенное исчезновение) и без keyframes (при
   быстром переключении transition разворачивается с текущей фазы,
   а не перезапускается с нуля). */
.t-panel-desc { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; max-width: 80ch; width: 100%; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.12s ease-out, transform 0.12s ease-out, visibility 0s 0.12s; }
.t-panel.active .t-panel-desc { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease-out, cubic-bezier(.23,1,.32,1)) 0.38s, transform 0.3s var(--ease-out, cubic-bezier(.23,1,.32,1)) 0.38s, visibility 0s; }
.t-panel.active .t-panel-desc p { margin: 0; font-size: clamp(16px, 1.35vw, 22px); line-height: 1.6; color: rgba(218,241,222,.95); }
@media (max-width: 700px) {
  .therapy-gallery { height: clamp(360px, 56vh, 600px); gap: 4px; }
  .t-panel-body { padding: 8px; }
  .t-panel.active .t-panel-body { padding: 16px; }
  .t-panel-title-side { font-size: clamp(12px, 3.4vw, 17px); }
  .t-panel.active .t-panel-title { font-size: clamp(24px, 6vw, 34px); line-height: 1.1; }
  .t-panel.active .t-panel-desc p { font-size: 15px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .t-panel, .t-panel-bg, .t-panel-shade::after, .t-panel-title, .t-panel-title-side, .t-panel-desc { transition: none; }
  .t-panel.active .t-panel-bg { transform: none; }
}
/* Custom easing curves (Emil Kowalski design engineering skill) */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* === О психотерапии — карточки === */
.therapy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.therapy-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 4px 20px rgba(5,31,32,0.06);
  border: 1px solid rgba(5,31,32,0.05);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.therapy-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(5,31,32,0.12);
}
.therapy-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--c4);
}
.therapy-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--c2);
}
.therapy-card-head h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--c1);
}
.therapy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.therapy-list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray);
}
.therapy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23235347' d='M5 19c1-6 4-10 9-13 3-1.5 5-1.5 6-1 .8 1.2.5 4-1 6.5C16.5 17 11 20 5 19z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 700px) { .therapy-grid { grid-template-columns: 1fr; } }

/* === Mobile: articles sidebar slide-in === */
@media (max-width: 700px) {
  .mobile-cat-toggle { display: flex !important; }
  .articles-sidebar {
    display: block !important;
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    background: var(--light) !important;
    z-index: 1001 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    transition: left 0.3s ease !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
  }
  .articles-sidebar.open { left: 0 !important; }
  .articles-content { width: 100% !important; }
  .article-preview { flex-direction: column !important; }
  .article-preview-img { width: 100% !important; height: 160px !important; }
  .sidebar-toggle { display: none !important; }
}
/* === Образование: карусели === */
.edu-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.edu-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0 8px;
  flex: 1;
  min-width: 0;
  justify-content: safe center;
}
.edu-track::-webkit-scrollbar { display: none; }
.edu-track .edu-card, .edu-track .edu-cert {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.edu-track .edu-cert { flex: 0 0 240px; flex-direction: column; }
.edu-track .edu-cert .edu-thumb { margin-top: 0; }
.edu-track .edu-cert .edu-cert-text { margin-top: 10px; }
@media (max-width: 700px) {
  .edu-track .edu-card { flex: 0 0 280px; }
  .edu-track .edu-cert { flex: 0 0 200px; }
}

/* === Образование: дипломы + сертификаты + лайтбокс === */
.edu-intro {
  color: var(--gray);
  font-size: 18px;
  margin-bottom: 34px;
  max-width: 860px;
}
.edu-group-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--c1);
  margin: 40px 0 24px;
}
.edu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.edu-card {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  background: linear-gradient(160deg, #235347, #1d463b);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(5,31,32,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.edu-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(5,31,32,0.14); }
.edu-thumb {
  align-self: flex-start;
  margin-top: auto;
  width: 132px; height: 92px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(218,241,222,0.25);
  cursor: zoom-in;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.2s;
}
.edu-thumb:hover:not(:disabled) { transform: scale(1.05); }
.edu-thumb:disabled { cursor: default; }
.edu-thumb img { width: 100%; height: 100%; object-fit: cover; }
.edu-thumb-doc { font-size: 26px; color: #daf1de; text-align: center; line-height: 1.1; }
.edu-thumb-doc small { display: block; font-size: 11px; letter-spacing: 0.1em; color: rgba(218,241,222,0.8); }
.edu-thumb-ph { font-size: 12px; color: rgba(218,241,222,0.7); text-align: center; line-height: 1.4; }
.edu-card-body { width: 100%; }
.edu-card-title {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 800;
  color: #daf1de;
  line-height: 1.08;
  margin-bottom: 10px;
  width: 100%;
}
.edu-card-sub { font-size: 14px; color: #daf1de; font-weight: 700; line-height: 1.45; margin-bottom: 14px; }
.edu-card-text { font-size: 16px; line-height: 1.55; color: rgba(218,241,222,0.85); }
.edu-certs { grid-template-columns: repeat(2, 1fr); }
.edu-cert {
  display: flex;
  gap: 20px;
  background: linear-gradient(160deg, #235347, #1d463b);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(5,31,32,0.06);
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.edu-cert:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(5,31,32,0.12); }
.edu-cert .edu-thumb { margin-top: 0; flex: 0 0 auto; }
.edu-cert-text { font-size: 18px; line-height: 1.5; color: #daf1de; font-weight: 500; margin: 0; }
/* Лайтбокс */
.edu-lightbox {
  position: fixed; inset: 0;
  background: rgba(5,31,32,0.94);
  z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.edu-lightbox[hidden] { display: none; }
.edu-lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); background: #fff; }
.edu-lightbox-content img {
  max-width: 92vw; max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.edu-lightbox-content iframe {
  width: 90vw; height: 90vh; border: none;
  border-radius: 12px; background: #fff;
}
.edu-lightbox-close {
  position: fixed; top: 18px; right: 24px;
  width: 50px; height: 50px;
  border-radius: 50%; border: none;
  background: #fff; color: var(--c1);
  font-size: 30px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 6001;
}
@media (max-width: 1000px) {
  .edu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .edu-grid, .edu-certs { grid-template-columns: 1fr; }
  .edu-card { padding: 20px; min-height: 0; }
  .edu-cert { flex-direction: column; }
}

/* === Админка: загрузка файлов === */
.upload-drop {
  border: 2px dashed var(--c2);
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
  background: linear-gradient(135deg, var(--c4), var(--white));
  transition: var(--transition);
  cursor: pointer;
}

.upload-drop:hover,
.upload-drop.dragover {
  background: var(--c3);
  border-color: var(--c1);
}

.uploads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.upload-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(5, 31, 32, 0.06);
  display: flex;
  flex-direction: column;
}

.upload-thumb {
  aspect-ratio: 4/3;
  background: var(--c4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-file-ico {
  font-size: 40px;
}

/* OAuth-кнопки входа */
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1.5px solid var(--c1);
  border-radius: 12px;
  background: #fff;
  color: var(--c1);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s, background 0.2s, color 0.2s;
}
.oauth-btn:hover { background: var(--c1); color: var(--c3); transform: translateY(-1px); }
.oauth-btn:active { transform: translateY(0); }
.oauth-ico { width: 20px; height: 20px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
svg.oauth-ico { width: 20px; height: 20px; }

/* === Auth: тёмно-зелёная палитра + Limelight-табы === */
.auth-dark.auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 30% 18%, #235347 0%, #051f20 72%);
}
.auth-dark .auth-card {
  background: linear-gradient(160deg, rgba(35,83,71,0.55), rgba(5,31,32,0.88));
  border: 1px solid rgba(218,241,222,0.14);
  border-radius: 28px;
  padding: 36px 36px 30px;
  transform-style: preserve-3d;
  transition: transform .12s ease-out;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  color: #daf1de;
  box-sizing: border-box;
}
/* Limelight-табы */
.auth-tabs {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(218,241,222,0.12);
  background: rgba(5,31,32,0.4);
  padding: 0 8px;
  margin-bottom: 26px;
}
.auth-tab {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #daf1de;
  font-weight: 600;
  font-size: 15px;
  opacity: .4;
  transition: opacity .12s ease;
  user-select: none;
}
.auth-tab.active { opacity: 1; }
.auth-limelight {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 44px;
  height: 5px;
  border-radius: 9999px;
  background: #daf1de;
  box-shadow: 0 50px 15px rgba(218,241,222,0.5);
  left: -999px;
}
.auth-limelight.ready { transition: left .4s ease-in-out; }
.auth-limelight-beam {
  position: absolute;
  left: -30%;
  top: 5px;
  width: 160%;
  height: 56px;
  clip-path: polygon(5% 100%, 25% 0, 75% 0, 95% 100%);
  background: linear-gradient(to bottom, rgba(218,241,222,0.32), transparent);
  pointer-events: none;
}
/* Формы */
.auth-form[hidden] { display: none; }
.auth-subtitle { color: rgba(218,241,222,0.65); font-size: 14px; margin-bottom: 22px; }
.auth-dark .form-group label { color: rgba(218,241,222,0.7); }
.auth-dark .auth-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(218,241,222,0.2);
  background: rgba(5,31,32,0.5);
  color: #daf1de;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.auth-dark .auth-input::placeholder { color: rgba(218,241,222,0.4); }
.auth-dark .auth-input:focus { outline: none; border-color: #daf1de; box-shadow: 0 0 0 3px rgba(218,241,222,0.15); }
.auth-submit {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #daf1de;
  color: #051f20;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform .15s, box-shadow .2s;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(218,241,222,0.25); }
.auth-submit:active { transform: translateY(0); }
/* Ошибка */
.auth-dark .error { background: rgba(193,51,51,0.18); color: #ffb4b4; border: 1px solid rgba(193,51,51,0.4); padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; }
/* OAuth в тёмной теме */
.auth-dark .oauth-btn { background: transparent; border: 1.5px solid rgba(218,241,222,0.4); color: #daf1de; }
.auth-dark .oauth-btn:hover { background: rgba(218,241,222,0.12); color: #daf1de; transform: translateY(-1px); }
.oauth-btns { display: flex; flex-direction: column; gap: 10px; }
/* Разделитель «или» */
.auth-divider { display: flex; align-items: center; gap: 0; margin: 22px 0 10px; color: rgba(218,241,222,0.5); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(218,241,222,0.15); }
.auth-divider span { padding: 0 12px; }
/* Ссылка на главную */
.auth-home { margin-top: 18px; text-align: center; font-size: 13px; }
.auth-home a { color: rgba(218,241,222,0.6); text-decoration: none; transition: color .2s; }
.auth-home a:hover { color: #daf1de; }
@media (max-width: 480px) {
  .auth-dark .auth-card { padding: 26px 22px 24px; border-radius: 22px; }
}

/* === Auth: анимации (entrance + смена таба) === */
@keyframes authCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes authLimeIn { from { opacity: 0; transform: scaleX(.15); } to { opacity: 1; transform: scaleX(1); } }
@keyframes authFormIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-card-tilt { perspective: 1500px; max-width: 420px; width: 100%; animation: authCardIn .55s cubic-bezier(.16,1,.3,1) both; }
.auth-dark .auth-card.tilt-active { will-change: transform; }
.auth-limelight { opacity: 0; transform-origin: center; }
.auth-limelight.visible { animation: authLimeIn .45s cubic-bezier(.16,1,.3,1) .12s both; }
.auth-form.auth-form-in { animation: authFormIn .34s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .auth-card-tilt, .auth-limelight, .auth-form.auth-form-in { animation: none !important; }
  .auth-limelight { opacity: 1 !important; transform: none !important; }
  .auth-limelight.ready { transition: none !important; }
  .auth-dark .auth-card { transition: none !important; transform: none !important; }
}

/* === Auth: поля с иконками, кнопка shimmer/spinner/стрелка, ссылки, пульсация === */
.auth-field { position: relative; display: flex; align-items: center; margin-bottom: 14px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.auth-field:focus-within { transform: scale(1.015); }
.auth-field-ico { position: absolute; left: 14px; width: 18px; height: 18px; color: rgba(218,241,222,0.4); transition: color .2s; pointer-events: none; flex: 0 0 auto; }
.auth-field:focus-within .auth-field-ico { color: #daf1de; }
.auth-dark .auth-field .auth-input { padding-left: 40px; }
.auth-dark .auth-field.pass-field .auth-input { padding-right: 42px; }
.auth-pass-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(218,241,222,0.4); cursor: pointer; display: flex; padding: 4px; transition: color .2s; }
.auth-pass-toggle:hover { color: #daf1de; }
.auth-pass-toggle svg { width: 18px; height: 18px; }
/* Кнопка отправки: shimmer + спиннер + стрелка */
.auth-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.auth-submit-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(5,31,32,0.16) 50%, transparent 65%); transform: translateX(-130%); pointer-events: none; z-index: 0; }
.auth-submit:hover .auth-submit-shine { animation: authShine 1.1s ease; }
@keyframes authShine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.auth-submit-text, .auth-submit-spinner { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; }
.auth-submit-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(5,31,32,0.3); border-top-color: #051f20; border-radius: 50%; animation: authSpin .7s linear infinite; }
.auth-submit.loading { pointer-events: none; }
.auth-submit.loading .auth-submit-text { display: none; }
.auth-submit.loading .auth-submit-spinner { display: inline-block; }
@keyframes authSpin { to { transform: rotate(360deg); } }
.auth-submit-arrow { width: 15px; height: 15px; transition: transform .25s ease; }
.auth-submit:hover .auth-submit-arrow { transform: translateX(3px); }
/* Ссылка с анимированным подчёркиванием */
.auth-link { position: relative; display: inline-block; color: rgba(218,241,222,0.6); text-decoration: none; transition: color .2s; }
.auth-link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: #daf1de; transition: width .3s ease; }
.auth-link:hover { color: #daf1de; }
.auth-link:hover::after { width: 100%; }
/* Пульсация разделителя */
.auth-divider span { animation: authPulse 3s ease-in-out infinite; }
@keyframes authPulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .auth-field { transition: none !important; transform: none !important; }
  .auth-divider span { animation: none !important; }
  .auth-submit-shine { display: none !important; }
  .auth-submit-arrow { transition: none !important; }
}

/* === Auth: галочка согласия (анимированная) === */
.auth-consent { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px; font-size: 12px; line-height: 1.45; color: rgba(218,241,222,0.65); cursor: pointer; user-select: none; }
.auth-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-consent-box { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid rgba(218,241,222,0.3); background: rgba(5,31,32,0.5); transition: background .2s, border-color .2s, box-shadow .2s; }
.auth-consent-check { position: absolute; inset: 0; width: 100%; height: 100%; color: #051f20; transform: scale(0); transition: transform .22s cubic-bezier(.16,1,.3,1); }
.auth-consent input:checked + .auth-consent-box { background: #daf1de; border-color: #daf1de; }
.auth-consent input:checked + .auth-consent-box .auth-consent-check { transform: scale(1); }
.auth-consent input:focus-visible + .auth-consent-box { box-shadow: 0 0 0 3px rgba(218,241,222,0.2); border-color: #daf1de; }
.auth-consent-text a { color: #daf1de; text-decoration: none; border-bottom: 1px solid rgba(218,241,222,0.4); transition: border-color .2s; }
.auth-consent-text a:hover { border-color: #daf1de; }
@media (prefers-reduced-motion: reduce) {
  .auth-consent-check { transition: none !important; transform: scale(1); }
}

/* === Модал заявки (тёмно-зелёный, в стиле auth) === */
.modal-overlay { background: rgba(5,31,32,0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); perspective: 1500px; }
.modal-overlay.active { animation: overlayFade .25s ease; }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
.req-modal { background: linear-gradient(160deg, rgba(35,83,71,0.55), rgba(5,31,32,0.92)); border: 1px solid rgba(218,241,222,0.14); border-radius: 24px; color: #daf1de; box-shadow: 0 30px 80px rgba(0,0,0,0.5); transform-style: preserve-3d; transition: transform .12s ease-out; }
.modal-overlay.active .req-modal { animation: authCardIn .42s cubic-bezier(.16,1,.3,1) backwards; }
.req-modal h3.req-title { color: #daf1de; font-size: 22px; margin-bottom: 6px; }
.req-modal .req-sub { color: rgba(218,241,222,0.6); font-size: 13px; margin-bottom: 22px; }
.auth-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23daf1de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.auth-select option { background: #051f20; color: #daf1de; }
.auth-field--area { align-items: stretch; }
.auth-textarea { min-height: 84px; resize: vertical; padding-top: 14px; padding-bottom: 14px; line-height: 1.5; font-family: inherit; }
.req-result { margin-top: 14px; font-size: 14px; min-height: 18px; }
.req-result .req-ok { color: #9be7b8; }
.req-result .req-err { color: #ffb4b4; }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.active, .modal-overlay.active .req-modal { animation: none !important; }
  .req-modal { transition: none !important; transform: none !important; }
}

.upload-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-meta {
  font-size: 12px;
  color: var(--gray);
}

.upload-path {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.upload-path code {
  font-size: 12px;
  background: var(--c4);
  color: var(--c1);
  padding: 4px 8px;
  border-radius: 6px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* === Админка: Личные кабинеты (чат-дровер, inputs) === */
/* Time picker — neutral focus, shadow ring, no blue */
.admin-input{ padding:9px 12px; border:1px solid var(--admin-border,#d8dee6); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:#1c2330; box-sizing:border-box; }
.admin-input[type=time], .admin-input[type=date]{ accent-color:#5a6577; color-scheme:light; }
.admin-input[type=time]:focus, .admin-input[type=date]:focus{ border-color:rgba(20,30,50,0.2); box-shadow:0 0 0 3px rgba(20,30,50,0.08); outline:none; }
.admin-input[type=time]::-webkit-calendar-picker-indicator, .admin-input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(0.5); opacity:0.5; cursor:pointer; }
/* Custom time picker popup (shared) */
.tp-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:500;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,0.14);padding:10px;display:none;width:200px;}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tp-col{display:flex;flex-direction:column;gap:2px;}
.tp-col-label{text-align:center;font-size:10px;font-weight:600;color:#9aa5b1;padding:2px 0;}
.tp-vals{max-height:160px;overflow-y:auto;border:1px solid #f0f3f7;border-radius:8px;padding:2px;}
.tp-vals::-webkit-scrollbar{width:4px;}
.tp-vals::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px;}
.tp-val{border:none;border-radius:6px;padding:4px 0;font-size:12px;cursor:pointer;background:transparent;color:#3a4a5a;text-align:center;transition:all .1s;width:100%;}
.tp-val:hover{background:#f1f5f9;}
.tp-val.sel{background:#235347;color:#fff;font-weight:600;}
.tp-foot{display:flex;justify-content:flex-end;gap:6px;margin-top:8px;}
.tp-btn{border:1px solid #e2e8f0;background:#fff;border-radius:8px;padding:4px 12px;font-size:12px;cursor:pointer;color:#5a6577;}
.tp-btn:hover{border-color:#cbd5e1;background:#f8fafc;}
.tp-btn-go{background:#235347;color:#fff;border-color:#235347;}
.tp-btn-go:hover{background:#1a4438;}
.admin-chat-drawer{ position:fixed; right:0; top:0; bottom:0; width:380px; max-width:92vw; background:#fff; border-left:1px solid var(--admin-border,#d8dee6); box-shadow:-12px 0 40px rgba(0,0,0,0.12); z-index:3000; transform:translateX(110%); transition:transform .3s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; }
.admin-chat-drawer.open{ transform:none; }
.admin-chat-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--admin-border,#d8dee6); }
.admin-chat-close{ background:none; border:none; font-size:24px; cursor:pointer; color:#8a94a6; line-height:1; }
.admin-chat-list{ flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:8px; background:#f7f8fb; }
.admin-chat-msg{ max-width:84%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.4; word-break:break-word; }
.admin-chat-msg.user{ align-self:flex-end; background:#c25973; color:#fff; border-bottom-right-radius:5px; }
.admin-chat-msg.admin{ align-self:flex-start; background:#fff; border:1px solid #e6e9f0; color:#1c2330; border-bottom-left-radius:5px; }
.admin-chat-msg small{ display:block; font-size:10px; opacity:.6; margin-top:3px; }
.admin-chat-form{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--admin-border,#d8dee6); }
.admin-chat-form input{ flex:1; }

.velaris-canvas--fallback {
  background: linear-gradient(135deg, #051f20, #235347, #2f6b5a, #163d33, #051f20);
  background-size: 300% 300%;
  animation: velarisFallback 16s ease-in-out infinite;
}
@keyframes velarisFallback {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === Как проходит терапия — стикеры === */
#process { position: relative; }
.process-stage { position: relative; width: 100%; height: clamp(420px, 60vh, 600px); margin-top: 20px; background-image: linear-gradient(rgba(35,83,71,0.06) 1px, transparent 1px); background-size: 100% 34px; background-position: 0 6px; }
.process-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.process-path-mobile { display: none; }
.process-path path { animation: pDash 3s linear infinite; }
@keyframes pDash { to { stroke-dashoffset: -52; } }
.p-card { position: absolute; width: clamp(200px, 15vw, 260px); background: #fff; border: 1px solid rgba(5,31,32,0.08); border-radius: 22px; box-shadow: 0 14px 30px rgba(5,31,32,0.16); padding: 16px 18px 20px; box-sizing: border-box; transition: transform .3s var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.p-card:hover { transform: rotate(0deg) translateY(-6px) !important; z-index: 6; box-shadow: 0 20px 40px rgba(5,31,32,0.22); }
.p-pin { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; background: linear-gradient(135deg, var(--c2), var(--c1)); border-radius: 50%; box-shadow: 0 3px 8px rgba(5,31,32,.35), inset 0 2px 3px rgba(255,255,255,.4); }
.p-num { font-family: "Akrobat",sans-serif; font-size: clamp(28px,3vw,38px); font-weight: 700; color: var(--c2); display: block; line-height: 1; margin-bottom: 6px; }
.p-title { font-size: clamp(17px,1.5vw,21px); font-weight: 700; color: var(--c1); margin: 0 0 8px; line-height: 1.15; }
.p-desc { font-size: clamp(13px,1.05vw,15px); line-height: 1.5; color: #46584f; margin: 0; }
@media (max-width: 900px) {
  .process-stage { height: auto; display: flex; flex-direction: column; gap: 24px; padding: 10px 0 4px; overflow: visible; position: relative; background-image: none; }
  .process-path-desktop { display: none; }
  .process-path-mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .process-path-mobile path { animation: pDash 3s linear infinite; }
  .p-card { position: relative; z-index: 1; width: auto; max-width: 340px; margin: 0 auto; left: auto !important; top: auto !important; }
  .p-card:nth-child(odd) { transform: rotate(-1.5deg) !important; }
  .p-card:nth-child(even) { transform: rotate(1.5deg) !important; }
  .p-card:hover { transform: rotate(0deg) translateY(-3px) !important; }
  .p-pin { left: 50%; top: -11px; transform: translateX(-50%); }
}

/* === Услуги — карточки с анимированным градиентным краем === */
.svc-card { padding: 0; background: transparent; border: none; position: relative; overflow: hidden; display: block; }
.svc-card:hover { transform: translateY(-4px); }
.svc-inner { position: relative; z-index: 2; background: #fff; border-radius: calc(var(--radius) - 3px); margin: 3px; padding: 32px; height: calc(100% - 6px); display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(5,31,32,0.06); }
.svc-blob { position: absolute; top: 50%; left: 50%; width: 75%; height: 75%; border-radius: 50%; filter: blur(18px); z-index: 1; opacity: .95; background: linear-gradient(90deg, #1d463b, #235347, #daf1de, #2f6b5a, #1d463b); background-size: 300% 300%; animation: svcBlob 7s linear infinite, svcHue 9s linear infinite; }
@keyframes svcBlob {
  0%   { transform: translate(-50%, -50%) translate(-35%, -35%); }
  25%  { transform: translate(-50%, -50%) translate(35%, -35%); }
  50%  { transform: translate(-50%, -50%) translate(35%, 35%); }
  75%  { transform: translate(-50%, -50%) translate(-35%, 35%); }
  100% { transform: translate(-50%, -50%) translate(-35%, -35%); }
}
@keyframes svcHue { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .svc-blob { animation: none; } }

/* === Образование — круговая карусель === */
.edu-ring-wrap { display: flex; align-items: flex-start; gap: 28px; margin-top: 28px; box-sizing: border-box; }
.edu-ring { position: relative; width: 28%; min-width: 260px; height: clamp(340px, 50vh, 500px); flex-shrink: 0; align-self: center; }
.edu-ring::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(var(--glow-w, 220px) * 1.3); height: calc(var(--glow-h, 300px) * 1.3); background: radial-gradient(ellipse at center, rgba(35,83,71,0.1) 0%, transparent 65%); pointer-events: none; z-index: 0; transition: width .5s ease, height .5s ease; }
.edu-thumb { position: absolute; top: 50%; left: 50%; width: clamp(180px, 17vw, 220px); height: auto; aspect-ratio: 220 / 300; border: 1px solid rgba(5,31,32,0.06); border-radius: 10px; background: #fff; overflow: hidden; padding: 0; cursor: pointer; box-shadow: 0 6px 24px rgba(5,31,32,0.1); display: flex; align-items: center; justify-content: center; transform-origin: center center; transition: transform .5s ease, opacity .5s ease, box-shadow .4s ease, aspect-ratio .5s ease; will-change: transform, opacity; }
.edu-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.edu-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--gray); font-size: 13px; text-align: center; padding: 12px; box-sizing: border-box; }
.edu-thumb.is-active { box-shadow: 0 14px 44px rgba(5,31,32,0.16); cursor: zoom-in; }
.edu-thumb.is-active:hover { box-shadow: 0 20px 58px rgba(5,31,32,0.22); }
.edu-thumb:hover:not(:disabled) { filter: brightness(1.02); }
.edu-detail { flex: 1; min-width: 0; align-self: center; color: var(--c1); padding: 18px 8px; }
.edu-detail .edu-counter { font-size: 14px; color: var(--gray); letter-spacing: .14em; margin-bottom: 14px; }
.edu-detail h3 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; line-height: 1.12; margin: 0 0 12px; color: var(--c1); overflow-wrap: break-word; }
.edu-detail .edu-sub { font-size: clamp(15px, 1.3vw, 19px); color: var(--c2); font-weight: 700; margin: 0 0 16px; line-height: 1.35; overflow-wrap: break-word; }
.edu-detail .edu-text { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: #46584f; margin: 0; overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) { .edu-thumb { transition: opacity .2s ease !important; } }
/* === Solar-иконки (CSS mask, currentColor) === */
.ic{display:inline-block;width:20px;height:20px;background:currentColor;vertical-align:-4px;flex-shrink:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;}
.admin-sidebar-item .ic{width:20px;height:20px;}
h3 .ic,h4 .ic{width:22px;height:22px;vertical-align:-5px;margin-right:6px;}
.ic-content{-webkit-mask-image:url(/assets/admin-icons/content.svg);mask-image:url(/assets/admin-icons/content.svg);}
.ic-articles{-webkit-mask-image:url(/assets/admin-icons/articles.svg);mask-image:url(/assets/admin-icons/articles.svg);}
.ic-users{-webkit-mask-image:url(/assets/admin-icons/users.svg);mask-image:url(/assets/admin-icons/users.svg);}
.ic-files{-webkit-mask-image:url(/assets/admin-icons/files.svg);mask-image:url(/assets/admin-icons/files.svg);}
.ic-requests{-webkit-mask-image:url(/assets/admin-icons/requests.svg);mask-image:url(/assets/admin-icons/requests.svg);}
.ic-cabinet{-webkit-mask-image:url(/assets/admin-icons/cabinet.svg);mask-image:url(/assets/admin-icons/cabinet.svg);}
.ic-chart{-webkit-mask-image:url(/assets/admin-icons/chart.svg);mask-image:url(/assets/admin-icons/chart.svg);}.ic-ana-users{-webkit-mask-image:url(/assets/admin-icons/ana-users.svg);mask-image:url(/assets/admin-icons/ana-users.svg);}
.ic-ana-userplus{-webkit-mask-image:url(/assets/admin-icons/ana-userplus.svg);mask-image:url(/assets/admin-icons/ana-userplus.svg);}
.ic-ana-key{-webkit-mask-image:url(/assets/admin-icons/ana-key.svg);mask-image:url(/assets/admin-icons/ana-key.svg);}
.ic-ana-usercheck{-webkit-mask-image:url(/assets/admin-icons/ana-usercheck.svg);mask-image:url(/assets/admin-icons/ana-usercheck.svg);}
.ic-ana-doctext{-webkit-mask-image:url(/assets/admin-icons/ana-doctext.svg);mask-image:url(/assets/admin-icons/ana-doctext.svg);}
.ic-ana-smile{-webkit-mask-image:url(/assets/admin-icons/ana-smile.svg);mask-image:url(/assets/admin-icons/ana-smile.svg);}
.ic-ana-chatdots{-webkit-mask-image:url(/assets/admin-icons/ana-chatdots.svg);mask-image:url(/assets/admin-icons/ana-chatdots.svg);}
.ic-ana-chatline{-webkit-mask-image:url(/assets/admin-icons/ana-chatline.svg);mask-image:url(/assets/admin-icons/ana-chatline.svg);}
.ic-ana-eye{-webkit-mask-image:url(/assets/admin-icons/ana-eye.svg);mask-image:url(/assets/admin-icons/ana-eye.svg);}
/* Аналитика */
.analytics-periods{display:flex;gap:6px;}
.analytics-period{padding:7px 16px;border:1px solid var(--admin-border,#e2e8f0);background:#fff;color:var(--gray,#5a7a6e);border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:background .15s,color .15s;}
.analytics-period.active{background:var(--c2,#235347);color:#fff;border-color:var(--c2,#235347);}
.analytics-period:hover:not(.active){background:#f0f4ff;}
.analytics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.analytics-stat{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--admin-border,#e2e8f0);border-radius:12px;background:#fafbfc;}
.analytics-stat-ico{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#eef3f0;border-radius:10px;color:var(--c2,#235347);}.analytics-stat-ico .ic{width:22px;height:22px;vertical-align:0;}
.analytics-stat-val{font-size:26px;font-weight:800;color:var(--c1,#051f20);line-height:1.1;font-family:'Akrobat',sans-serif;}
.analytics-stat-label{font-size:12px;color:var(--gray,#5a7a6e);margin-top:2px;}
.analytics-chart{width:100%;min-height:280px;}
.analytics-chart svg{width:100%;height:auto;display:block;}
.ana-grid{stroke:rgba(20,30,50,0.1);stroke-width:1;stroke-dasharray:4 4;}
.ana-axis{fill:#9aa5b1;font-size:11px;font-family:'Akrobat',sans-serif;}
.ana-ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0.9;}
.analytics-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ana-leg{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid rgba(20,30,50,0.12);border-radius:999px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#1c2330;}
.ana-leg i{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid rgba(20,30,50,0.2);}
.ana-leg.off{opacity:0.4;text-decoration:line-through;}
.ana-leg:hover{background:#f0f4ff;}
.analytics-top-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--admin-border,#e2e8f0);border-radius:10px;margin-bottom:8px;}
.analytics-top-n{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--c2,#235347);color:#fff;border-radius:50%;font-size:13px;font-weight:700;}
.analytics-top-title{flex:1;font-size:14px;font-weight:600;color:var(--c1,#051f20);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.analytics-top-views{font-size:13px;color:var(--gray,#5a7a6e);font-weight:600;white-space:nowrap;}
@media(max-width:600px){.analytics-grid{grid-template-columns:1fr 1fr;}.analytics-periods{flex-wrap:wrap;}}
.ic-calendar{-webkit-mask-image:url(/assets/admin-icons/calendar.svg);mask-image:url(/assets/admin-icons/calendar.svg);}
.ic-chat{-webkit-mask-image:url(/assets/admin-icons/chat.svg);mask-image:url(/assets/admin-icons/chat.svg);}
.ic-diploma{-webkit-mask-image:url(/assets/admin-icons/diploma.svg);mask-image:url(/assets/admin-icons/diploma.svg);}
.ic-cert{-webkit-mask-image:url(/assets/admin-icons/cert.svg);mask-image:url(/assets/admin-icons/cert.svg);}
.ic-services{-webkit-mask-image:url(/assets/admin-icons/services.svg);mask-image:url(/assets/admin-icons/services.svg);}
.ic-contacts{-webkit-mask-image:url(/assets/admin-icons/contacts.svg);mask-image:url(/assets/admin-icons/contacts.svg);}
.ic-solar-phone{-webkit-mask-image:url(/assets/icons/solar/phone.svg);mask-image:url(/assets/icons/solar/phone.svg);}
.ic-solar-map-point{-webkit-mask-image:url(/assets/icons/solar/map-point.svg);mask-image:url(/assets/icons/solar/map-point.svg);}
.ic-solar-inbox{-webkit-mask-image:url(/assets/icons/solar/inbox-line.svg);mask-image:url(/assets/icons/solar/inbox-line.svg);}
.ic-solar-dialog{-webkit-mask-image:url(/assets/icons/solar/dialog.svg);mask-image:url(/assets/icons/solar/dialog.svg);}
.ic-solar-handshake{-webkit-mask-image:url(/assets/icons/solar/hand-shake.svg);mask-image:url(/assets/icons/solar/hand-shake.svg);}
.ic-solar-notes{-webkit-mask-image:url(/assets/icons/solar/notes.svg);mask-image:url(/assets/icons/solar/notes.svg);}
.ic-solar-clipboard-heart{-webkit-mask-image:url(/assets/icons/solar/clipboard-heart.svg);mask-image:url(/assets/icons/solar/clipboard-heart.svg);}
.ic-solar-clipboard-check{-webkit-mask-image:url(/assets/icons/solar/clipboard-check.svg);mask-image:url(/assets/icons/solar/clipboard-check.svg);}
.ic-solar-settings{-webkit-mask-image:url(/assets/icons/solar/settings.svg);mask-image:url(/assets/icons/solar/settings.svg);}
.ic-solar-ghost{-webkit-mask-image:url(/assets/icons/solar/ghost.svg);mask-image:url(/assets/icons/solar/ghost.svg);}
.ic-solar-logout3{-webkit-mask-image:url(/assets/icons/solar/logout-3.svg);mask-image:url(/assets/icons/solar/logout-3.svg);}
.header-ic{display:inline-block;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;width:22px;height:22px;}
.header-icon-btn .ic-solar-settings,.header-icon-btn .ic-solar-logout3{width:20px;height:20px;}
.ic-solar-logout3{transform:rotate(180deg);}
.ic-comments{-webkit-mask-image:url(/assets/icons/solar/comments.svg);mask-image:url(/assets/icons/solar/comments.svg);}
.ic-legal{-webkit-mask-image:url(/assets/admin-icons/legal.svg);mask-image:url(/assets/admin-icons/legal.svg);}
.ic-category{-webkit-mask-image:url(/assets/admin-icons/category.svg);mask-image:url(/assets/admin-icons/category.svg);}

/* === Образование: инфо-блоки (справа, в столбик) — дизайн как у блоков диагнозов === */
.edu-info-grid { display: flex; flex-direction: column; gap: 12px; flex: 0 0 clamp(300px, 44vw, 1415px); align-self: center; }
.edu-info-card { border-radius: 12px; padding: 16px 16px; border: none; }
.edu-info-card--dark { background: linear-gradient(160deg, #051f20, #0a2e2f); }
.edu-info-card--green { background: linear-gradient(160deg, #235347, #1d463b); }
.edu-info-ic { width: 28px; height: 28px; background: #daf1de; margin-bottom: 10px; display: inline-block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.edu-info-card h4 { font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; margin: 0 0 6px; color: #daf1de; line-height: 1.2; }
.edu-info-card p { font-size: clamp(12px, 0.9vw, 13.5px); line-height: 1.5; color: rgba(218,241,222,0.82); margin: 0; overflow-wrap: break-word; }
@media (max-width: 820px) {
  #education .section-title { margin-bottom: 10px; }
  .edu-ring-wrap { flex-direction: column; align-items: center; gap: 16px; margin-top: 4px; }
  .edu-intro { margin-bottom: 6px; }
  .edu-ring { width: 100%; max-width: 360px; min-width: 0; height: clamp(280px, 38vh, 360px); flex-shrink: 0; align-self: center; }
  .edu-thumb { width: 160px; height: auto; }
  .edu-detail { flex: none; width: 100%; max-width: 680px; padding: 4px 16px; text-align: center; align-self: center; }
  .edu-info-grid { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 10px; width: 100%; }
  .edu-info-card { flex: 1 1 100%; min-width: 0; }
}

/* === FAQ === */
.faq-section { padding: 60px var(--page-pad); }
.faq-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h, 108px) + 24px); }
.faq-sub { font-size: clamp(16px, 1.3vw, 20px); color: var(--gray); margin: 0 0 24px; line-height: 1.3; }
.faq-cta { font-size: 15px; color: var(--gray); line-height: 1.35; margin: 0; }
.faq-link { color: var(--c2); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--c3); transition: border-color .2s; }
.faq-link:hover { border-color: var(--c2); }

.faq-accordion { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--c3); }
.faq-item:first-child { border-top: 1px solid var(--c3); }
.faq-trigger { width: 100%; background: none; border: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: inherit; font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; color: var(--c1); text-align: left; transition: color .2s; }
.faq-trigger:hover { color: var(--c2); }
.faq-trigger[aria-expanded="true"] { color: var(--c2); }
.faq-q { flex: 1; min-width: 0; }
.faq-ic-wrap { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.faq-ic { position: absolute; top: 0; left: 0; width: 22px; height: 22px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; transition: opacity .35s ease, transform .35s ease; }
.faq-ic-open { -webkit-mask-image: url(/assets/icons/solar/faq-open.svg); mask-image: url(/assets/icons/solar/faq-open.svg); opacity: 1; transform: scale(1) rotate(0deg); }
.faq-ic-close { -webkit-mask-image: url(/assets/icons/solar/faq-close.svg); mask-image: url(/assets/icons/solar/faq-close.svg); opacity: 0; transform: scale(0.6) rotate(-90deg); }
.faq-trigger[aria-expanded="true"] .faq-ic-open { opacity: 0; transform: scale(0.6) rotate(90deg); }
.faq-trigger[aria-expanded="true"] .faq-ic-close { opacity: 1; transform: scale(1) rotate(0deg); }

.faq-content { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.faq-content-inner { padding: 0 30px 22px 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--gray); overflow-wrap: break-word; }
.faq-content-inner .faq-word { display: inline-block; }
.faq-content-inner .faq-char { display: inline-block; opacity: 0; filter: blur(8px); animation: faq-blur-in .35s ease forwards; }
@keyframes faq-blur-in { to { opacity: 1; filter: blur(0); } }

@media (max-width: 820px) {
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-intro { position: static; }
}

/* === Custom confirm modal === */
.confirm-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(20,20,19,0.4); }
.confirm-modal.open { display: flex; }
.confirm-modal-inner { background: #fff; border-radius: 16px; padding: 24px; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.confirm-modal-msg { font-size: 15px; color: #141413; margin: 0 0 20px; line-height: 1.5; text-align: center; }
.confirm-modal-btns { display: flex; gap: 10px; justify-content: center; }
.confirm-modal-btns button { border: none; border-radius: 10px; padding: 10px 24px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.confirm-modal-btns button:hover { opacity: 0.88; }
.confirm-modal-no { background: #e2e8f0; color: #475569; }
.confirm-modal-yes { background: #dc2626; color: #fff; }

/* === Hero CTA: точная привязка к нижнему краю прямоугольника ===
   text-box-trim (Chrome 133+, Safari 18.2+): текстовый бокс «Связаться»
   обрезается по видимым границам глифов — верх по заглавной «С»,
   низ по базовой линии (выносных вниз у слова нет). Ссылка блочная,
   поэтому нижний край wrap = базовой линии текста, и bottom: -2px
   ставит видимый низ букв ровно на 2px ниже нижней границы
   прямоугольника — на любом адаптиве и при любом размере шрифта,
   без метрик шрифта и em-констант. Блок размещён в конце файла,
   чтобы перекрыть bottom из мобильного и landscape-блоков;
   в браузерах без поддержки остаётся em-фолбэк из базового правила. */
@supports (text-box-trim: trim-both) or (-webkit-text-box-trim: trim-both) {
  .hero-cta-wrap { bottom: -2px; }
  .hero-cta-text {
    line-height: normal;
    -webkit-text-box-trim: trim-both;
    text-box-trim: trim-both;
    -webkit-text-box-edge: cap alphabetic;
    text-box-edge: cap alphabetic;
  }
  /* На мобильном портрете прямоугольник обрезает контент по краю
     (overflow: hidden), поэтому кнопка не опускается ниже границы,
     а встаёт точно на неё. Landscape-телефоны не затронуты. */
  @media (max-width: 700px) and (orientation: portrait) {
    .hero-cta-wrap { bottom: 0; }
  }
}