@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'neuro';
  src: url('../assets/fonts/neuropol.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  /* без unicode-range — шрифт применяется ко всем символам (в т.ч. кириллица) */
}

:root {
  --font-main: 'Montserrat', sans-serif;
  --font-headings: 'neuro', sans-serif;

  /* ФОНЫ */
  --color-bg-deep-space: #030712;
  --color-bg-panel: #111827;

  /* ЕДИНСТВЕННЫЙ АКЦЕНТ (НЕОНОВЫЙ СИНИЙ) */
  --color-accent: #1e90ff;
  --color-accent-hover: #a0e1f3;
  /* Акцент «cyan» для подсветок */
  --color-accent-cyan: #38bdf8;

  /* ТЕКСТ */
  --color-text-primary: #E0E0E0;
  --color-text-headings: #BBECFF;

  /* Служебные переменные */
  --color-bg-gradient-start: var(--color-bg-deep-space);
  --color-bg-gradient-end: #020617;
  --color-border-subtle: rgba(148, 163, 184, 0.45);
  --radius-panel: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 22px 45px rgba(0, 0, 0, 0.7);
  --transition-fast: 0.18s ease-out;
  --transition-med: 0.22s ease-out;

  /* Единые брейкпоинты: мобилка/планшет до 829px, десктоп от 830px */
  --layout-mobile-max: 829px;
  --layout-desktop-min: 830px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-main);
  color: var(--color-text-primary);
  background-color: #05050a;
  overflow: hidden;
}

/* Canvas-фон: частицы летят на зрителя (экран регистрации/входа) */
#space-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* =========================
   DASHBOARD LAYOUT
   ========================= */

body.dashboard-page {
  color: var(--color-text-primary);
  overflow-x: hidden;
  overflow-y: auto;
}

.dashboard-header,
.profile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Выше карточек кадета/чата (.cadet-air-chat-shell--page z-index, Instagram.exe внутренние слои) — иначе рамка и переписка «наезжают» на шапку при скролле */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  min-height: 72px;
  background-color: #000000;
  border-bottom: 1px solid #1e90ff;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(30, 144, 255, 0.35);
}

/* Раньше на странице профиля сдвигали блок с кнопками влево.
   Для一致ного поведения с дашбордом убираем этот сдвиг. */
.profile-page .profile-header .dashboard-nav {
  transform: none;
}

.dashboard-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-logo-image {
  height: 64px;
  width: auto;
  display: block;
}

.dashboard-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none; /* важно: AIRoWorld, а не все caps */
  transition: color var(--transition-fast);
}

.logo-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.dashboard-brand-icon {
  width: 32px;  /* иконка 24–32 px */
  height: 32px;
  display: block;
  animation: dashboard-sat-float 4s ease-in-out infinite;
}

.dashboard-brand-text {
  font-family: var(--font-headings);
  font-size: 20px;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: #1e90ff;
  text-decoration: none;
}

.dashboard-logo:hover .dashboard-brand-text,
.dashboard-logo.active .dashboard-brand-text {
  color: #a0e1f3;
}

.dashboard-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 0; /* острые углы в шапке */
  border: 1px solid #1e90ff;
  background-color: #020617;
  color: #1e90ff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.dashboard-nav-link:hover {
  background-color: #020617;
  border-color: #a0e1f3;
  color: #a0e1f3;
  box-shadow: 0 0 10px rgba(160, 225, 243, 0.8);
}

.dashboard-nav-link {
  animation: dashboard-nav-glow 6s ease-in-out infinite;
}

.dashboard-lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;  /* как было изначально на дашборде */
  padding-left: 12px;
  border-left: 1px solid rgba(30, 144, 255, 0.5);
}

/* В шапке (дашборд + профиль) — стиль как был изначально */
.dashboard-header .auth-lang-button,
.profile-header .auth-lang-button {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  background-color: transparent;
  border: 1px solid #1e90ff;
  color: #1e90ff;
}

.dashboard-header .auth-lang-button:hover,
.dashboard-header .auth-lang-button.active {
  border-color: #a0e1f3;
  color: #a0e1f3;
  box-shadow: 0 0 6px rgba(160, 225, 243, 0.55), 0 0 12px rgba(160, 225, 243, 0.25);
}

.dashboard-nav-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.dashboard-nav-label {
  color: inherit;
}

.dashboard-main {
  padding: 72px 0 0 0; /* отступ под фиксированную шапку */
  margin: 0;
}

/* Системный помощник (дашборд): правый нижний угол, поверх блока 1 и блока 2, без сдвига вёрстки */
body.dashboard-page .dashboard-assistant-mascot {
  position: fixed;
  /* 99: под шапкой (.dashboard-header 100), но над любым контентом main (острова/школы ~2) — на iOS иногда иначе «съедает» нижний fixed */
  z-index: 99;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: clamp(72px, 17vmin, 156px);
  max-height: min(30vh, 200px);
  min-width: 64px;
  min-height: 64px;
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
  overflow: visible;
}

body.dashboard-page .dashboard-assistant-mascot:focus-visible {
  outline: 2px solid rgba(160, 225, 243, 0.75);
  outline-offset: 3px;
}

body.dashboard-page .dashboard-assistant-mascot .profile-upload-wizard__emoji-webm {
  background-color: transparent !important;
  background: transparent !important;
  object-fit: contain;
  object-position: center center;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(30vh, 200px);
}

body.dashboard-page .dashboard-assistant-mascot__video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: min(30vh, 200px);
  object-fit: contain;
  object-position: center center;
  vertical-align: bottom;
  -webkit-touch-callout: none;
  /* Прозрачность задаётся файлом (HEVC+alpha mov); как мастер — без translateZ на emoji-webm */
  background-color: transparent !important;
  background: transparent !important;
}

body.dashboard-page .dashboard-assistant-mascot__video::-webkit-media-controls-start-playback-button,
body.dashboard-page .dashboard-assistant-mascot__video::-webkit-media-controls {
  display: none !important;
}

body.dashboard-page .dashboard-assistant-mascot__video::-webkit-media-controls-enclosure {
  background: transparent !important;
}

/* Apple touch (класс из dashboard): чёрный маттинг в роликах без альфы — смешивание с фоном (космос тёмный). Не замена HEVC+alpha. */
body.dashboard-page .dashboard-assistant-mascot--apple-touch .dashboard-assistant-mascot__video {
  mix-blend-mode: screen;
  -webkit-mix-blend-mode: screen;
}

/* Мобильный дашборд: без лишнего GPU-слоя у video/wrapper */
@media (max-width: 830px) {
  body.dashboard-page .dashboard-assistant-mascot {
    z-index: 120;
    -webkit-transform: none;
    transform: none;
  }

  body.dashboard-page .dashboard-assistant-mascot__video {
    min-width: 72px;
    min-height: 72px;
    -webkit-transform: none;
    transform: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
}

/* Маскот не скрываем при prefers-reduced-motion — иначе на части устройств «пропадает» целиком */

/* Блок 1: фон — под любой экран, без чёрных полос (cover) */
/* +72px по высоте, чтобы компенсировать шапку и не обрезать верх */
.dashboard-hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh + 72px);
  margin-bottom: 0;
  box-sizing: border-box;
  background-image: url('../assets/images/dashboard.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Мягкий переход внизу — скрывает шов и сливает блок островов с блоком школ */
.dashboard-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  min-height: 200px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(3, 7, 18, 0.25) 25%,
    rgba(3, 7, 18, 0.6) 55%,
    rgba(3, 7, 18, 0.95) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Контейнер сцены островов — выше градиента шва, чтобы подписи не размывались */
.dashboard-world {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}

.dashboard-world .dashboard-island {
  pointer-events: auto;
}

/* Остров: центрирование по точке + парение */
.dashboard-island.island {
  position: absolute;
  display: block;
  text-decoration: none;
  color: inherit;
  transform: translate(-50%, -50%);
  animation: island-float 6s ease-in-out infinite;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.dashboard-island.island img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  transition: filter 0.35s ease;
}

/* AIRoWorld Dashboard: базовая защита декоративных изображений */
.dashboard-island img,
.dashboard-school-img,
.dashboard-schools-bg-img,
.dashboard-logo-image,
.dashboard-brand-icon,
.dashboard-nav-icon,
.boys-school-card-img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Остров: подпись без плашки — только текст + неон и короткая черта снизу (не как у школ) */
.dashboard-island-strip {
  position: absolute;
  left: 50%;
  bottom: calc(-1.5em - 1vh);
  transform: translateX(-50%);
  padding: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  text-align: center;
}

.dashboard-island-strip::after {
  content: '';
  display: block;
  margin: 0.2em auto 0;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.8), transparent);
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
}

/* Только блок островов в hero: у креативности PNG с лишним прозрачным низом — подпись визуально ниже; сдвигаем к общей линии с остальными (школы внизу не трогаем) */
.dashboard-hero .dashboard-world > .dashboard-island.dashboard-island--kreativnost .dashboard-island-strip {
  bottom: calc(-1.5em - 1vh + 0.65rem);
}

@media (min-width: 830px) {
  /* Десктоп: подпись «Остров креативности» выше относительно острова (PNG с лишним низом); поднята дополнительно на 3% + 1% */
  .dashboard-hero .dashboard-world > .dashboard-island.dashboard-island--kreativnost .dashboard-island-strip {
    bottom: calc(-1.5em - 1vh + 0.65rem + 5% + 3% + 1%);
  }
}

.dashboard-island-label {
  font-family: var(--font-headings);
  font-weight: 300;
  font-size: clamp(0.58rem, 1.5vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-hover);
  text-shadow: 0 0 8px var(--color-accent-hover), 0 0 16px var(--color-accent);
}

@media (hover: hover) {
  .dashboard-island-strip {
    opacity: 0;
  }
  .dashboard-island:hover .dashboard-island-strip {
    opacity: 1;
  }
}

@media (hover: none) {
  .dashboard-island-strip {
    opacity: 1;
  }
  .dashboard-island-label {
    font-size: clamp(0.5rem, 2.8vw, 0.68rem);
  }
}

/* Свечение при наведении — только на устройствах с мышью (на тач-устройствах нет hover) */
@media (hover: hover) {
  .dashboard-island.island:hover img {
    filter: drop-shadow(0 0 15px var(--color-accent-hover));
  }
}

/* На мобилке: свечение при тапе (нажатии), чтобы остров «подсветился» */
@media (hover: none) {
  .dashboard-island.island:active img {
    filter: drop-shadow(0 0 12px var(--color-accent-hover));
  }
}

/* Композиция как «картинка в разных форматах»: размер от ширины экрана (vw), ничего не налезает */
/* min(..., 520px) — на больших мониторах не больше твоего «эталона»; на узких — пропорционально мельче */
.dashboard-island--sport     { width: min(27vw, 520px); }
.dashboard-island--znaniya   { width: min(24vw, 460px); }
.dashboard-island--logika    { width: min(26vw, 500px); }
/* Креативность: в PNG больше пустого поля вокруг арта — чуть шире контейнер; на десктопе (≥830px) «резина» +3% — блок ниже */
.dashboard-island--kreativnost { width: min(32vw, 600px); }
.dashboard-island--media     { width: min(27vw, 520px); }

@media (min-width: 830px) {
  .dashboard-island--kreativnost {
    width: min(calc(32vw * 1.03), calc(600px * 1.03));
  }
}

/* Парение: вверх-вниз */
@keyframes island-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-10px); }
}

/* Центральный остров (city) — scale 1.2 */
.island-city {
  animation-name: island-float-city;
}

@keyframes island-float-city {
  0%, 100% { transform: translate(-50%, -50%) scale(1.2) translateY(0); }
  50%      { transform: translate(-50%, -50%) scale(1.2) translateY(-10px); }
}

.dashboard-island.island:hover {
  animation: none;
}

.island-sport:hover  { transform: translate(-50%, -50%) translateY(-4px) scale(1.08); }
.island-media:hover  { transform: translate(-50%, -50%) translateY(-4px) scale(1.08); }
.island-school:hover { transform: translate(-50%, -50%) translateY(-4px) scale(1.08); }
.island-dome:hover   { transform: translate(-50%, -50%) translateY(-4px) scale(1.08); }
.island-city:hover   { transform: translate(-50%, -50%) scale(1.29) translateY(-4px); }

/* Композиция: Знания по центру чуть выше; Спорт и Логика на одной линии, симметрично; снизу два острова на одной линии, симметрично */
/* Каждый остров чуть подтянут к центральной точке экрана (50%, 50%), не к линии */
.island-sport {
  top: 38%;
  left: 22%;
}

.island-city {
  top: 30%;
  left: 50%;
}

.island-media {
  top: 38%;
  left: 77%;
}

.island-school {
  top: 70%;
  left: 34%;
}

.island-dome {
  top: 70%;
  left: 66%;
}

/* Звёзды на дашборде: как в небе — яркая точка и мягкое мерцание, без неоновых колец */
.dashboard-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.dashboard-stars span {
  position: absolute;
  border-radius: 50%;
  /* Белые светящиеся точки */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(220, 240, 255, 0.5) 25%,
    rgba(187, 236, 255, 0.15) 50%,
    transparent 70%
  );
  animation: dashboard-star-twinkle 3s ease-in-out infinite;
}

/* Синие неоновые (#1e90ff) */
.dashboard-stars span.star--neon {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(30, 144, 255, 0.95) 0%,
    rgba(30, 144, 255, 0.6) 25%,
    rgba(160, 225, 243, 0.25) 50%,
    transparent 70%
  );
}

/* Голубые неоновые (#a0e1f3) */
.dashboard-stars span.star--teal {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(160, 225, 243, 0.95) 0%,
    rgba(160, 225, 243, 0.55) 25%,
    rgba(187, 236, 255, 0.2) 50%,
    transparent 70%
  );
}

/* Крупные мерцающие звёзды (белые по умолчанию, синие и голубые через .star--neon / .star--teal) */
.dashboard-stars span.star--large {
  width: 5px;
  height: 5px;
}

/* Позиции только в «пустых» зонах — углы и края, острова не перекрывают (десктоп) */
/* 7 белых (1–7) */
.dashboard-stars span:nth-child(1)  { width: 2px; height: 2px; top: 6%;  left: 6%;  animation-delay: 0s;    animation-duration: 2.6s; }
.dashboard-stars span:nth-child(2)  { width: 3px; height: 3px; top: 10%; left: 12%; animation-delay: 0.4s;  animation-duration: 3.1s; }
.dashboard-stars span:nth-child(3)  { width: 1px; height: 1px; top: 14%; left: 5%;  animation-delay: 1s;    animation-duration: 2.4s; }
.dashboard-stars span:nth-child(4)  { width: 2px; height: 2px; top: 5%;  left: 88%; animation-delay: 0.2s;  animation-duration: 2.9s; }
.dashboard-stars span:nth-child(5)  { width: 3px; height: 3px; top: 10%; left: 92%; animation-delay: 0.7s;  animation-duration: 3.3s; }
.dashboard-stars span:nth-child(6)  { width: 2px; height: 2px; top: 16%; left: 86%; animation-delay: 1.3s;  animation-duration: 2.7s; }
.dashboard-stars span:nth-child(7)  { width: 2px; height: 2px; top: 18%; left: 50%; animation-delay: 0.5s;  animation-duration: 2.8s; }
/* 7 синих (8–14) */
.dashboard-stars span:nth-child(8)  { width: 2px; height: 2px; top: 86%; left: 6%;  animation-delay: 0.3s;  animation-duration: 3s;   }
.dashboard-stars span:nth-child(9)  { width: 3px; height: 3px; top: 90%; left: 10%; animation-delay: 0.9s;  animation-duration: 2.5s; }
.dashboard-stars span:nth-child(10) { width: 1px; height: 1px; top: 84%; left: 8%;  animation-delay: 1.5s;  animation-duration: 2.9s; }
.dashboard-stars span:nth-child(11) { width: 2px; height: 2px; top: 86%; left: 90%; animation-delay: 0.1s;  animation-duration: 3.2s; }
.dashboard-stars span:nth-child(12) { width: 3px; height: 3px; top: 92%; left: 88%; animation-delay: 0.6s;  animation-duration: 2.6s; }
.dashboard-stars span:nth-child(13) { width: 2px; height: 2px; top: 84%; left: 94%; animation-delay: 1.2s;  animation-duration: 3.4s; }
.dashboard-stars span:nth-child(14) { width: 2px; height: 2px; top: 50%; left: 4%;  animation-delay: 0.8s;  animation-duration: 2.7s; }
/* 7 голубых (15–21) */
.dashboard-stars span:nth-child(15) { width: 2px; height: 2px; top: 48%; left: 94%; animation-delay: 0.4s;  animation-duration: 3.1s; }
.dashboard-stars span:nth-child(16) { width: 3px; height: 3px; top: 52%; left: 92%; animation-delay: 1.1s;  animation-duration: 2.4s; }
.dashboard-stars span:nth-child(17) { width: 1px; height: 1px; top: 22%; left: 8%;  animation-delay: 0.2s;  animation-duration: 2.8s; }
.dashboard-stars span:nth-child(18) { width: 2px; height: 2px; top: 24%; left: 90%; animation-delay: 0.7s;  animation-duration: 3.3s; }
.dashboard-stars span:nth-child(19) { width: 2px; height: 2px; top: 76%; left: 6%;  animation-delay: 1.4s;  animation-duration: 2.5s; }
.dashboard-stars span:nth-child(20) { width: 3px; height: 3px; top: 78%; left: 92%; animation-delay: 0.5s;  animation-duration: 2.9s; }
.dashboard-stars span:nth-child(21) { width: 2px; height: 2px; top: 82%; left: 50%; animation-delay: 0.9s;  animation-duration: 3s;   }

/* Крупные звёзды (22–30): белые, синие, голубые — в пустых зонах */
.dashboard-stars span:nth-child(22) { width: 5px; height: 5px; top: 4%;  left: 20%; animation-delay: 0.2s;  animation-duration: 3.2s; }
.dashboard-stars span:nth-child(23) { width: 6px; height: 6px; top: 12%; left: 72%; animation-delay: 1s;    animation-duration: 2.7s; }
.dashboard-stars span:nth-child(24) { width: 5px; height: 5px; top: 20%; left: 15%; animation-delay: 0.6s;  animation-duration: 3.4s; }
.dashboard-stars span:nth-child(25) { width: 5px; height: 5px; top: 88%; left: 18%; animation-delay: 0.4s;  animation-duration: 2.9s; }
.dashboard-stars span:nth-child(26) { width: 6px; height: 6px; top: 92%; left: 78%; animation-delay: 1.2s;  animation-duration: 3.1s; }
.dashboard-stars span:nth-child(27) { width: 5px; height: 5px; top: 78%; left: 22%; animation-delay: 0.8s;  animation-duration: 2.6s; }
.dashboard-stars span:nth-child(28) { width: 5px; height: 5px; top: 8%;  left: 78%; animation-delay: 0.3s;  animation-duration: 3.3s; }
.dashboard-stars span:nth-child(29) { width: 6px; height: 6px; top: 56%; left: 6%;  animation-delay: 1.1s;  animation-duration: 2.8s; }
.dashboard-stars span:nth-child(30) { width: 5px; height: 5px; top: 44%; left: 92%; animation-delay: 0.5s;  animation-duration: 3s;   }

/* Мерцание: светятся и гаснут рандомно (разные delay/duration у каждой звезды) */
@keyframes dashboard-star-twinkle {
  0%, 100% { opacity: 0.4; }
  50%     { opacity: 1; }
}

/* Блок 2: школы — встык с блоком островов, без зазора и без заголовка (одно целое с островами) */
.dashboard-section--schools {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

/* Фон — <img> задаёт высоту блока; наложения в % от той же рамки → масштаб как одно целое с картинкой */
.dashboard-schools-hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.dashboard-schools-frame {
  position: relative;
  width: 100%;
  display: block;
  line-height: 0;
}

.dashboard-schools-bg-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.dashboard-schools-bg-img--mobile {
  display: none;
}

/* Десктоп: мягкий переход сверху — шов с островами */
.dashboard-schools-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  min-height: 200px;
  background: linear-gradient(
    to bottom,
    rgba(3, 7, 18, 0.98) 0%,
    rgba(3, 7, 18, 0.65) 45%,
    rgba(3, 7, 18, 0.2) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 829px) {
  .dashboard-schools-bg-img--desktop {
    display: none;
  }

  .dashboard-schools-bg-img--mobile {
    display: block;
  }

  .dashboard-schools-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10%;
    min-height: 48px;
    background: linear-gradient(
      to bottom,
      rgba(3, 7, 18, 0.4) 0%,
      rgba(3, 7, 18, 0.1) 60%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .dashboard-schools-frame::after {
    top: auto;
    bottom: 0;
    height: 10%;
    min-height: 48px;
    background: linear-gradient(
      to top,
      rgba(3, 7, 18, 0.4) 0%,
      rgba(3, 7, 18, 0.1) 60%,
      transparent 100%
    );
  }
}

.dashboard-schools-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* frame имеет line-height: 0 под img — без сброса подписи наследуют 0: каша на мобилке, «невидимый» садик, линия на тексте */
  line-height: normal;
}

.dashboard-schools-overlays .dashboard-school-link {
  pointer-events: auto;
}

/* Мобильная двухстрочная подпись — на десктопе скрыта */
.dashboard-school-mobile-caption {
  display: none;
}
/* Мобильные картинки зданий — на десктопе скрыты */
.dashboard-school-img--mobile {
  display: none;
}

.dashboard-school-link {
  position: absolute;
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
}

.dashboard-school-link .dashboard-school-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  transition: filter 0.35s ease;
}
.dashboard-school-link .dashboard-school-img--mobile {
  display: none;
}

/* Школа: без плашки, как у островов — только подпись и линия подчёркивания */
.dashboard-school-strip {
  position: absolute;
  left: 100%;
  margin-left: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  line-height: 1.35;
}

.dashboard-school-strip::after {
  content: '';
  display: block;
  flex-shrink: 0;
  margin: 0 auto;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.8), transparent);
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
}

.school-link--right .dashboard-school-strip {
  left: auto;
  right: 42.5%;
  margin-left: 0;
  margin-right: 10px;
  top: 16%;
}

.school-link--right .dashboard-school-label {
  color: #ff6b9d;
  text-shadow: 0 0 8px #ff6b9d, 0 0 16px #ff1493;
}

/* На средних/узких экранах (планшет, уменьшенный десктоп): надпись школы девочек — над крышей своей школы */
@media (max-width: 1100px) {
  .school-link--right .dashboard-school-strip {
    top: auto;
    bottom: 100%;
    left: 51%;
    right: auto;
    margin: 0 0 -14px 0;
    transform: translateX(-50%);
  }
}

.school-link--left .dashboard-school-strip {
  top: 17%;
  left: 71%;
}

/* Садик: по центру под зданием */
.school-link--center .dashboard-school-strip {
  left: 51.5%;
  top: 83%;
  margin-left: 0;
  margin-top: 8px;
  transform: translateX(-50%);
}

.school-link--center .dashboard-school-strip::after {
  background: linear-gradient(90deg, transparent, rgba(255, 158, 243, 0.7), transparent);
  box-shadow: 0 0 6px rgba(255, 200, 150, 0.5);
}

.school-link--center .dashboard-school-label {
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 200, 150, 0.8));
}

.dashboard-school-label {
  font-family: var(--font-headings);
  font-weight: 300;
  font-size: clamp(0.7rem, 1.3vw, 0.95rem);
  color: var(--color-accent-hover);
  text-shadow: 0 0 8px var(--color-accent-hover), 0 0 16px var(--color-accent);
}

@media (hover: hover) {
  .dashboard-section--schools .dashboard-school-strip {
    opacity: 0;
  }
  .dashboard-section--schools .dashboard-school-link:hover .dashboard-school-strip {
    opacity: 1;
  }
}

@media (hover: none) {
  .dashboard-section--schools .dashboard-school-strip {
    opacity: 1;
    font-size: clamp(0.6rem, 2.5vw, 0.85rem);
  }
  .dashboard-section--schools .dashboard-school-label {
    font-size: clamp(0.6rem, 2.5vw, 0.8rem);
  }
}

@media (hover: hover) {
  .dashboard-section--schools .dashboard-school-link:hover .dashboard-school-img {
    filter: drop-shadow(0 0 15px var(--color-accent-hover));
  }
}

@media (hover: none) {
  .dashboard-section--schools .dashboard-school-link:active .dashboard-school-img {
    filter: drop-shadow(0 0 12px var(--color-accent-hover));
  }
}

/* Голубое (мальчики) */
.school-link--left {
  top: 32%;
  left: 37.5%;
  width: 39%;
}

.school-link--center {
  top: 67.5%;
  left: 50.5%;
  width: 40%;
}

.school-link--right {
  top: 46.5%;
  left: 68.5%;
  width: 30.5%;
}

@keyframes dashboard-sat-float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2px) rotate(-4deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes dashboard-nav-glow {
  0% {
    box-shadow: 0 0 4px rgba(0, 229, 200, 0.3);
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 229, 200, 0.7);
  }
  100% {
    box-shadow: 0 0 4px rgba(0, 229, 200, 0.3);
  }
}

.dashboard-section {
  margin-bottom: 40px;
}

.dashboard-section--schools {
  margin-bottom: 0;
}

.dashboard-section-title {
  margin: 0 0 18px;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-headings);
  color: #a0e1f3;
}

.dashboard-islands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* Круги-заглушки только внутри сетки (не для островов на фоне hero) */
.dashboard-islands-grid .dashboard-island {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(30, 144, 255, 0.7);
  box-shadow:
    0 0 10px rgba(30, 144, 255, 0.45),
    0 0 22px rgba(30, 144, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  padding: 8px;
}

.dashboard-schools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.dashboard-school {
  width: 140px;
  height: 100px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(30, 144, 255, 0.7);
  box-shadow:
    0 0 10px rgba(30, 144, 255, 0.45),
    0 0 22px rgba(30, 144, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  padding: 8px;
}

/* ========== Дашборд: узкие экраны до 829px; от 830px — десктоп ========== */
@media (max-width: 829px) {
  /* Шапка: логотип (картинка) убираем — только летающая иконка + AIRoМир */
  .dashboard-header,
  .profile-header {
    padding: 8px 8px;   /* как было изначально на дашборде */
    min-height: 48px;
  }

  .dashboard-header-left {
    gap: 6px;
  }

  /* На мобилке лого (robot/logo-black) не показываем — только иконка мира и текст */
  .dashboard-logo-image {
    display: none;
  }

  .dashboard-brand-icon {
    width: 20px;
    height: 20px;
  }

  .dashboard-brand-text {
    font-size: 12px;
  }

  .dashboard-nav {
    gap: 4px;
  }

  .dashboard-lang-switch {
    margin-left: 8px;
    padding-left: 8px;
  }

  .dashboard-nav-links {
    gap: 2px;
  }

  /* Кнопки: только иконка по центру — подпись скрыта, чтобы не сдвигала центр */
  .dashboard-nav-link {
    padding: 0;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 32px;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
  }

  .dashboard-nav-link .dashboard-nav-label {
    display: none;
  }

  .dashboard-nav-link .dashboard-nav-icon {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    display: block;
    flex-shrink: 0;
    vertical-align: middle;
  }

  /* При нажатии пальцем — подсветка как при наведении мышой */
  .dashboard-nav-link:active {
    border-color: #a0e1f3;
    color: #a0e1f3;
    box-shadow: 0 0 10px rgba(160, 225, 243, 0.8);
  }

  .dashboard-header .auth-lang-button,
  .profile-header .auth-lang-button {
    padding: 4px 6px;   /* как на дашборде изначально */
    font-size: 10px;
  }

  .dashboard-main {
    padding-top: 48px;
  }

  /* Фон для мобилки — dashboard-mobile.jpg */
  .dashboard-hero {
    background-image: url('../assets/images/dashboard-mobile.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
  }

  .dashboard-hero::after {
    height: 40%;
    min-height: 200px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(3, 7, 18, 0.25) 25%,
      rgba(3, 7, 18, 0.6) 55%,
      rgba(3, 7, 18, 0.95) 100%
    );
  }

  .dashboard-world {
    min-height: 100vh;
  }

  /* Острова крупнее, сгруппированы ближе к центру */
  .dashboard-island--sport,
  .dashboard-island--znaniya,
  .dashboard-island--logika,
  .dashboard-island--media {
    width: 44vw;
    max-width: 180px;
  }

  .dashboard-island--kreativnost {
    width: 52vw;
    max-width: 220px;
  }

  /* Ближе к центру экрана (лесенкой), все острова на 3% выше */
  .island-city {
    top: 13%;
    left: 62%;
    animation-name: island-float;
  }
  .island-sport {
    top: 29%;
    left: 38%;
  }
  .island-media {
    top: 45%;
    left: 62%;
  }
  .island-school {
    top: 61%;
    left: 38%;
  }
  .island-dome {
    top: 77%;
    left: 62%;
  }

  /* Подписи островов: на мобилке все подписи подняты дополнительно на 1.5% + 1% */
  .dashboard-hero .dashboard-world > .dashboard-island--sport .dashboard-island-strip,
  .dashboard-hero .dashboard-world > .dashboard-island--znaniya .dashboard-island-strip,
  .dashboard-hero .dashboard-world > .dashboard-island--logika .dashboard-island-strip {
    bottom: calc(-1.5em - 1vh + 2% + 1.5% + 1%);
  }
  .dashboard-hero .dashboard-world > .dashboard-island.dashboard-island--kreativnost .dashboard-island-strip {
    bottom: calc(-1.5em - 1vh + 0.65rem + 2% + 3% + 1.5% + 1%);
  }
  .dashboard-hero .dashboard-world > .dashboard-island--media .dashboard-island-strip {
    bottom: calc(-1.5em - 1vh + 1.5% + 1%);
  }

  /* Остров Знаний: при нажатии/тапе такой же масштаб, как у остальных (не 1.29) */
  .island-city:hover,
  .island-city:active {
    transform: translate(-50%, -50%) translateY(-4px) scale(1.08);
  }

  /* При нажатии на остров — подсветка как при наведении на десктопе */
  .dashboard-island.island:active img {
    filter: drop-shadow(0 0 18px var(--color-accent-hover));
  }

  /* Звёзды на мобилке — только в углах и по краям, не перекрывают острова */
  .dashboard-stars span:nth-child(1)  { top: 4%;  left: 5%;   }
  .dashboard-stars span:nth-child(2)  { top: 8%;  left: 14%;  }
  .dashboard-stars span:nth-child(3)  { top: 12%; left: 4%;   }
  .dashboard-stars span:nth-child(4)  { top: 4%;  left: 92%;  }
  .dashboard-stars span:nth-child(5)  { top: 9%;  left: 96%;  }
  .dashboard-stars span:nth-child(6)  { top: 14%; left: 88%;  }
  .dashboard-stars span:nth-child(7)  { top: 6%;  left: 50%;  }
  .dashboard-stars span:nth-child(8)  { top: 90%; left: 6%;   }
  .dashboard-stars span:nth-child(9)  { top: 94%; left: 12%;  }
  .dashboard-stars span:nth-child(10) { top: 88%; left: 5%;   }
  .dashboard-stars span:nth-child(11) { top: 90%; left: 92%;  }
  .dashboard-stars span:nth-child(12) { top: 94%; left: 88%;  }
  .dashboard-stars span:nth-child(13) { top: 88%; left: 96%;  }
  .dashboard-stars span:nth-child(14) { top: 50%; left: 3%;   }
  .dashboard-stars span:nth-child(15) { top: 48%; left: 96%;  }
  .dashboard-stars span:nth-child(16) { top: 52%; left: 94%;  }
  .dashboard-stars span:nth-child(17) { top: 20%; left: 6%;   }
  .dashboard-stars span:nth-child(18) { top: 22%; left: 94%;  }
  .dashboard-stars span:nth-child(19) { top: 72%; left: 5%;   }
  .dashboard-stars span:nth-child(20) { top: 76%; left: 94%;  }
  .dashboard-stars span:nth-child(21) { top: 86%; left: 50%;  }
  .dashboard-stars span:nth-child(22) { top: 3%;  left: 18%;  }
  .dashboard-stars span:nth-child(23) { top: 10%; left: 82%;  }
  .dashboard-stars span:nth-child(24) { top: 18%; left: 12%;  }
  .dashboard-stars span:nth-child(25) { top: 88%; left: 15%;  }
  .dashboard-stars span:nth-child(26) { top: 94%; left: 82%;  }
  .dashboard-stars span:nth-child(27) { top: 74%; left: 20%;  }
  .dashboard-stars span:nth-child(28) { top: 6%;  left: 80%;  }
  .dashboard-stars span:nth-child(29) { top: 54%; left: 4%;   }
  .dashboard-stars span:nth-child(30) { top: 42%; left: 94%;  }

  /* Подпись сада (bottom: -52% от ссылки) не обрезается overflow hero */
  .dashboard-section--schools .dashboard-schools-hero {
    padding-bottom: clamp(36px, 11vw, 88px);
  }

  /* На мобилке: десктопные картинки скрыты, мобильные — видны */
  .dashboard-school-link .dashboard-school-img--desktop {
    display: none;
  }
  .dashboard-school-link .dashboard-school-img--mobile {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: filter 0.35s ease;
  }
  .dashboard-school-link:active .dashboard-school-img--mobile {
    filter: drop-shadow(0 0 12px var(--color-accent-hover));
  }
  .dashboard-school-link .dashboard-school-strip {
    display: none;
  }
  .dashboard-school-mobile-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.22em;
    line-height: 1.35;
    font-family: var(--font-headings);
    font-weight: 300;
    pointer-events: none;
  }
  .dashboard-school-mobile-caption::after {
    content: '';
    display: block;
    flex-shrink: 0;
    margin: 0.15em auto 0;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.8), transparent);
    box-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
  }
  .school-link--center .dashboard-school-mobile-caption::after {
    background: linear-gradient(90deg, transparent, rgba(255, 158, 243, 0.7), transparent);
    box-shadow: 0 0 6px rgba(255, 200, 150, 0.5);
  }
  .dashboard-school-label-line1,
  .dashboard-school-label-line2 {
    font-size: clamp(0.6rem, 3.2vw, 0.78rem);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .school-link--left .dashboard-school-label-line1,
  .school-link--left .dashboard-school-label-line2,
  .school-link--right .dashboard-school-label-line1,
  .school-link--right .dashboard-school-label-line2 {
    font-size: clamp(0.59rem, 3.15vw, 0.77rem);
  }
  .school-link--left .dashboard-school-mobile-caption .dashboard-school-label-line1,
  .school-link--left .dashboard-school-mobile-caption .dashboard-school-label-line2 {
    color: var(--color-accent-hover);
    text-shadow: 0 0 6px var(--color-accent-hover), 0 0 12px var(--color-accent);
  }
  .school-link--right .dashboard-school-mobile-caption .dashboard-school-label-line1,
  .school-link--right .dashboard-school-mobile-caption .dashboard-school-label-line2 {
    color: #ff6b9d;
    text-shadow: 0 0 6px #ff6b9d, 0 0 12px #ff1493;
  }
  .school-link--center .dashboard-school-mobile-caption .dashboard-school-label-line1 {
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 5px rgba(255, 200, 150, 0.8));
  }
  /* При нажатии на школу — подсветка как у островов */
  .dashboard-school-link:active .dashboard-school-mobile-caption .dashboard-school-label-line1,
  .dashboard-school-link:active .dashboard-school-mobile-caption .dashboard-school-label-line2 {
    filter: drop-shadow(0 0 10px currentColor);
  }
  .school-link--left:active .dashboard-school-mobile-caption .dashboard-school-label-line1,
  .school-link--left:active .dashboard-school-mobile-caption .dashboard-school-label-line2 {
    text-shadow: 0 0 10px var(--color-accent-hover), 0 0 20px var(--color-accent);
  }
  .school-link--right:active .dashboard-school-mobile-caption .dashboard-school-label-line1,
  .school-link--right:active .dashboard-school-mobile-caption .dashboard-school-label-line2 {
    text-shadow: 0 0 10px #ff6b9d, 0 0 20px #ff1493;
  }
  .school-link--center:active .dashboard-school-mobile-caption .dashboard-school-label-line1 {
    filter: drop-shadow(0 0 10px rgba(255, 200, 150, 0.9));
  }
  /* Расположение подписей на мобилке: мальчики — справа, девочки — по центру, AIRoДетки — внизу */
  .dashboard-schools-overlays {
    display: block;
    position: absolute;
    inset: 0;
  }
  .dashboard-school-link {
    position: absolute;
    width: 55%;
    max-width: none;
    padding: 0;
    transform: translate(-50%, -50%);
  }
  /* Мальчики (синяя школа) — верхняя часть фона */
  .school-link--left {
    top: 28%;
    left: 40%;
    right: auto;
    margin: 0;
    text-align: center;
    width: 60%;
  }
  /* Вторая строка (мальчики) по центру относительно «AIRoАкадемия» */
  .school-link--left .dashboard-school-mobile-caption {
    position: absolute;
    top: -5%;
    right: -23%;
    left: auto;
    align-items: center;
    text-align: center;
  }
  /* Девочки (розовая школа) — середина фона */
  .school-link--right {
    top: 49%;
    left: 65%;
    right: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 73%;
  }
  /* Вторая строка (девочки) по центру относительно «AIRoАкадемия» */
  .school-link--right .dashboard-school-mobile-caption {
    position: absolute;
    top: 41%;
    left: -31%;
    right: auto;
    align-items: center;
    text-align: center;
  }
  /* Садик — нижняя часть фона */
  .school-link--center {
    top: 68%;
    left: 53%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 77%;
  }
  .school-link--center .dashboard-school-mobile-caption {
    position: absolute;
    bottom: -52%;
    left: 58%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    align-items: center;
  }

  .dashboard-section--schools {
    padding: 0;
  }

  .dashboard-school {
    width: 120px;
    height: 90px;
  }
}

body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* Глобальный body { overflow: hidden } иначе режет анкету/настройки и ссылку «Вернуться в профиль» на iPhone */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.auth-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  width: 100%;
  max-width: 1120px;
  margin: 0;
  box-sizing: border-box;
}

/* Фон карточки один и тот же на всех брейкпоинтах (в т.ч. мобилка/десктоп) — отдельных правил по max-width для цвета нет. */
.auth-panel,
.auth-aside {
  background: rgba(10, 10, 18, 0.85);
  border-radius: 0; /* острые углы у карточки формы */
  border: 1px solid rgba(30, 144, 255, 0.35);
  backdrop-filter: blur(22px);
  box-shadow:
    0 0 18px rgba(30, 144, 255, 0.10),
    0 0 40px rgba(30, 144, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -10px 30px rgba(0, 0, 0, 0.55);
}

.auth-panel {
  padding: 18px 24px 26px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.auth-aside {
  padding: 18px 18px 20px;
}

.auth-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
  margin-bottom: 8px;
}

/*
 * Видео-логотип: как на рабочем сайте — object-fit: cover внутри рамки (иначе при height:auto cover не даёт эффекта).
 * Обёртка задаёт область; cover масштабирует ролик и обрезает типичные чёрные поля в кадре.
 */
.brand-logo-video-wrap {
  width: min(320px, 70vw);
  max-width: 70%;
  margin: 0 auto 10px;
  /* шире, чем 16/9 — обрезка по вертикали, если в webm чёрные полосы сверху/снизу */
  aspect-ratio: 2.4 / 1;
  overflow: hidden;
  position: relative;
}

.brand-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center center;
  background-color: rgba(10, 10, 18, 0.85);
  transform: translateZ(0);
}

body.questionnaire-page .brand-logo-video-wrap,
body.questionnaire-page .brand-logo-image {
  background-color: rgba(16, 16, 26, 0.94);
}

/* Мобилка: шапка того же тона, что .auth-panel (подложка под слой видео на iOS). */
@media (max-width: 829px) {
  body.auth-page .auth-panel > .auth-header:has(.brand-logo-video-wrap) {
    background: rgba(10, 10, 18, 0.85);
    box-shadow: none;
  }

  body.auth-page .auth-header .brand-logo-image {
    background-color: rgba(10, 10, 18, 0.85);
  }

  /* Анкета: тот же фон, что у всей .auth-panel на этой странице — см. .questionnaire-page .auth-panel */
  body.questionnaire-page .auth-panel > .auth-header:has(.brand-logo-video-wrap) {
    background: rgba(16, 16, 26, 0.94);
  }

  body.questionnaire-page .auth-header .brand-logo-image {
    background-color: rgba(16, 16, 26, 0.94);
  }
}

.auth-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.auth-tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(224, 224, 224, 0.86);
}

.lang-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  margin-bottom: 14px;
}

.auth-lang-switch {
  /* контейнер для кнопок RU/EN; сейчас без доп. рамки, только выравнивание через .lang-row */
}

/* Стиль для КАЖДОЙ кнопки (RU и EN) */
.auth-lang-button {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  background-color: transparent;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  box-shadow: 0 0 5px rgba(30, 144, 255, 0.7);
  border-radius: 0; /* острые углы на экранах auth */
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.3s ease;
}

/* Состояние при НАВЕДЕНИИ, а также для АКТИВНОЙ кнопки */
.auth-lang-button:hover,
.auth-lang-button.active {
  color: #a0e1f3;
  border-color: #a0e1f3;
  box-shadow: 0 0 10px rgba(160, 225, 243, 0.8);
}

.auth-title {
  margin: 4px 0 6px;   /* для страниц без .title-row */
  font-size: 24px;
  line-height: 1.2;
  font-family: 'neuro', sans-serif !important;
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a0e1f3;
}

/* Мобилка: заголовок страницы auth (например «Восстановление пароля») не вылезает из рамки */
@media (max-width: 829px) {
  body.auth-page {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  body.auth-page .auth-layout {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  body.auth-page .auth-panel {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  body.auth-page .auth-form,
  body.auth-page .auth-field,
  body.auth-page .auth-input-wrapper,
  body.auth-page .auth-input,
  body.auth-page .auth-button,
  body.auth-page .auth-checkbox-label {
    max-width: 100%;
    box-sizing: border-box;
  }

  body.auth-page .auth-button {
    width: min(280px, 100%);
  }

  .auth-page .auth-title {
    font-size: 21px;
    letter-spacing: 0.05em;
    word-break: break-word;
  }
}

.auth-subtitle {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(224, 224, 224, 0.78);
}

.auth-subtitle--muted {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  color: rgba(224, 224, 224, 0.6);
}

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 20px;
}

.auth-field--with-hint {
  gap: 0;
  margin-bottom: 14px;
}

.auth-field--with-hint .auth-label {
  margin-bottom: 8px;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-wrapper .auth-input {
  padding-right: 42px;
}

.auth-field--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e0e0e0;
}

.auth-input {
  width: 100%;
  padding: 10px 11px;
  border-radius: 0; /* острые углы у полей ввода */
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: #0a0f1a;
  font-size: 14px;
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.auth-input::placeholder {
  color: #8A8A9E;
}

input::placeholder {
  color: #888888;
  opacity: 1;
}

/* Фокус — голубой фон; после ввода текста — голубой только у полей с атрибутом placeholder */
.auth-input:focus,
.auth-input:active,
.auth-input:focus-visible {
  background: #a0e1f3;
  color: #0a0f1a;
}

.auth-input[placeholder]:not(:placeholder-shown) {
  background: #a0e1f3;
  color: #0a0f1a;
}

.auth-form input {
  color: #0a0f1a;
}

.auth-form input::placeholder {
  color: #8A8A9E;
}

/* Переопределение автозаполнения браузера: не белый фон */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
  -webkit-text-fill-color: #0a0f1a;
  -webkit-box-shadow: 0 0 0 1000px #a0e1f3 inset;
  box-shadow: 0 0 0 1000px #a0e1f3 inset;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-input.is-empty {
  border-color: #1e90ff;
  box-shadow:
    0 0 4px rgba(30, 144, 255, 0.45),
    0 0 10px rgba(30, 144, 255, 0.35);
}

.auth-input.is-valid {
  border-color: #1e90ff;
  box-shadow:
    0 0 6px #1e90ff,
    0 0 12px rgba(30, 144, 255, 0.6);
}

.auth-input:not(.is-empty):not(.is-valid) {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.auth-input:focus-visible {
  box-shadow:
    0 0 6px rgba(30, 144, 255, 0.35),
    0 0 12px rgba(30, 144, 255, 0.25);
}

/* Стили для текстовых подсказок под полями */
.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  transition: color 0.3s ease;
}

/* Цвет подсказки при ошибке */
.form-hint.invalid {
  color: #B08D57;
}

/* update-password.html: readonly while recovery session loads (Safari-safe vs disabled+autofill) */
[data-update-password-page][data-recovery-ready="false"] [data-update-password-form] .auth-input[readonly] {
  pointer-events: none;
  opacity: 0.65;
}

@keyframes airoUpdatePasswordAutofillStart {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

[data-update-password-page] .auth-input:-webkit-autofill {
  animation-name: airoUpdatePasswordAutofillStart;
  animation-duration: 0.01s;
}

.auth-email-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: #e0e0e0;
  white-space: pre-line;
}

@media (max-width: 829px) {
  .auth-email-hint {
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px;
  }
}

/* --- Стили для валидации полей (совпадение паролей) --- */

/* Состояние УСПЕХ (пароли совпадают) */
.auth-field .auth-input.valid {
  border-color: #00FF85;
  box-shadow: 0 2px 10px rgba(0, 255, 133, 0.5);
}

/* Состояние ОШИБКА (пароли не совпадают или пароль короткий) */
.form-group input.invalid,
.auth-field .auth-input.invalid {
  border-color: #B08D57; /* бронза ближе к хаки */
  box-shadow: 0 2px 10px rgba(176, 141, 87, 0.5);
}

.auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.auth-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-checkbox-mark {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid #1e90ff;
  background: rgba(2, 5, 24, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.auth-checkbox-mark::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: transparent;
  transition: background-color var(--transition-fast);
}

.auth-checkbox input:checked + .auth-checkbox-mark {
  border-color: #1e90ff;
  background: radial-gradient(circle at top left, rgba(30, 144, 255, 0.45), rgba(0, 0, 0, 0.9));
  box-shadow: 0 0 10px rgba(30, 144, 255, 0.7);
}

.auth-checkbox input:checked + .auth-checkbox-mark::after {
  background: #1e90ff;
}

.auth-checkbox-label {
  font-size: 11px;
  color: rgba(224, 224, 224, 0.7);
}

.auth-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(8, 14, 40, 0.9);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 224, 224, 0.8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.auth-password-toggle::before {
  content: '';
  width: 12px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(30, 144, 255, 0.75);
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.55);
}

.auth-password-toggle::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(30, 144, 255, 0.9);
}

.auth-password-toggle[data-visible="true"] {
  background: rgba(30, 144, 255, 0.15);
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 10px rgba(30, 144, 255, 0.55);
}

.auth-button {
  width: 60%;
  margin: 0 auto;
  border-radius: 0; /* острые углы у основной кнопки */
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: #000000;
  border: 1px solid rgba(30, 144, 255, 0.8);
  color: #1e90ff;
  box-shadow:
    0 0 6px rgba(30, 144, 255, 0.45),
    0 0 12px rgba(30, 144, 255, 0.25);
  transition: all 0.3s ease;
}

.auth-button:hover {
  background: #000000;
  border-color: #a0e1f3;
  color: #a0e1f3;
  box-shadow:
    0 0 8px rgba(160, 225, 243, 0.55),
    0 0 16px rgba(160, 225, 243, 0.25);
}

.auth-button:active {
  transform: scale(0.99);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.35),
    0 0 12px rgba(30, 144, 255, 0.3);
}

.auth-button:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

/* ===== ССЫЛКА "НАСТРОЙКИ АККАУНТА" (ПРОФИЛЬ) ===== */
.settings-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a0e1f3;
  text-decoration: none;
  margin-top: 20px;
  font-size: 13px;
}

.settings-link i {
  font-size: 18px; /* стандартная иконка-шестерёнка */
}

.auth-footer {
  margin-top: 16px;
}

.auth-footer-text {
  margin: 0;
  font-size: 13px;
  color: rgba(224, 224, 224, 0.8);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.auth-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  position: relative;
}

.auth-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(30, 144, 255, 0.8), transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.auth-link:hover::after {
  transform: scaleX(1);
}

/* Настройки + анкета: при hover только надпись — голубой неон; линия — как у .auth-link (без изменений) */
.settings-page .auth-footer .auth-link,
.questionnaire-page .auth-footer .auth-link {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.settings-page .auth-footer .auth-link:hover,
.questionnaire-page .auth-footer .auth-link:hover {
  color: #fff;
  text-shadow:
    0 0 8px var(--color-accent-hover),
    0 0 16px var(--color-accent),
    0 0 26px rgba(160, 225, 243, 0.55);
}

.auth-link--muted {
  font-size: 12px;
  color: rgba(224, 224, 224, 0.7);
}

.auth-aside {
  position: relative;
  overflow: hidden;
}

.auth-aside::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 15% 20%, rgba(30, 144, 255, 0.32), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.3), transparent 55%);
  opacity: 0.85;
  mix-blend-mode: screen;
  pointer-events: none;
}

.auth-aside-title,
.auth-aside-text {
  position: relative;
  z-index: 1;
}

.auth-aside-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
}

.auth-aside-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(224, 224, 224, 0.86);
}

@media (min-width: 830px) {
  .auth-panel {
    padding: 18px 22px 24px;
  }

  .auth-aside {
    padding: 20px 22px 22px;
  }

  .auth-title {
    font-size: 26px;
  }
}

@media (min-width: 768px) {
  .auth-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 32px 40px;
    gap: 24px;
  }

  .auth-panel {
    flex: 0 0 auto;
  }

  .auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .auth-layout {
    padding-block: 40px;
  }

  .auth-title {
    font-size: 28px;
  }

  .auth-subtitle {
    font-size: 14px;
  }
}

/* ===== ACTIVE NAV LINK (profile page) ===== */
.dashboard-nav-link.active {
  border-color: #a0e1f3;
  color: #a0e1f3;
  box-shadow: 0 0 6px rgba(160, 225, 243, 0.55), 0 0 12px rgba(160, 225, 243, 0.25);
  animation: none;
}

.dashboard-nav-link.active .dashboard-nav-icon {
  filter: brightness(1.6) drop-shadow(0 0 4px rgba(160, 225, 243, 0.6));
}

/* ===== MESSAGES NAV LINK — состояние «есть новые сообщения» =====
 * Активируется JS-флагом (data-airobo-msg-new="1" + класс) на кнопке «Сообщения»,
 * когда в Supabase есть непрочитанные диалоги; снимается после открытия переписки.
 *
 * Анимация НЕ затрагивает кнопку (фон, рамку, цвет текста, размеры, положение
 * элементов не меняются) и не конфликтует с состояниями навигации (active / hover).
 * Анимируется ТОЛЬКО иконка конверта: лёгкое «сердцебиение» (двойной импульс
 * scale 1 → 1.12 → 1 → 1.08 → 1) + золотисто-жёлтое неоновое свечение вокруг
 * конверта, затем пауза ~2.4s и повтор. transform-origin по центру — без сдвига.
 * Без тряски, вращения, прыжков, мигания и скачков прозрачности. transform не
 * влияет на поток → размеры кнопки и текста не меняются. Одинаково desktop/mobile.
 * Никаких точек, бейджей, цифр, кружков и значков поверх/рядом с кнопкой.
 */
.dashboard-nav-link.dashboard-nav-link--has-new-messages .dashboard-nav-icon {
  transform-origin: center center;
  animation: airobo-msg-icon-heartbeat 3.2s ease-in-out infinite;
  will-change: transform, filter;
}

/* «Сердцебиение» конверта: два коротких импульса (0–25% цикла), затем спокойная
 * пауза до конца. Масштаб синхронизирован с силой золотого halo. Базовое мягкое
 * свечение держится и в паузе — сигнал «есть непрочитанное» не пропадает. */
@keyframes airobo-msg-icon-heartbeat {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(255, 205, 70, 0.55))
      drop-shadow(0 0 4px rgba(255, 179, 0, 0.3));
  }
  6% {
    transform: scale(1.12);
    filter:
      drop-shadow(0 0 5px rgba(255, 205, 70, 0.95))
      drop-shadow(0 0 11px rgba(255, 179, 0, 0.6));
  }
  13% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(255, 205, 70, 0.55))
      drop-shadow(0 0 4px rgba(255, 179, 0, 0.3));
  }
  19% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 4px rgba(255, 205, 70, 0.85))
      drop-shadow(0 0 9px rgba(255, 179, 0, 0.5));
  }
  25%,
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(255, 205, 70, 0.55))
      drop-shadow(0 0 4px rgba(255, 179, 0, 0.3));
  }
}

/* prefers-reduced-motion — без «сердцебиения», оставляем мягкое статичное золотое свечение */
@media (prefers-reduced-motion: reduce) {
  .dashboard-nav-link.dashboard-nav-link--has-new-messages .dashboard-nav-icon {
    animation: none;
    transform: none;
    filter:
      drop-shadow(0 0 3px rgba(255, 205, 70, 0.7))
      drop-shadow(0 0 7px rgba(255, 179, 0, 0.4));
  }
}

/* Числовой индикатор непрочитанных: при unread>0 конверт скрывается, на его месте —
 * только цифра (голубой AIRoWorld-неон #a0e1f3 + «сердцебиение»). Без рамки, фона,
 * бейджа, кружка и коробки. Размеры кнопки не меняются. */
.dashboard-nav-count {
  display: none;
}

.dashboard-nav-link.dashboard-nav-link--show-count .dashboard-nav-icon {
  display: none;
}

.dashboard-nav-link.dashboard-nav-link--show-count .dashboard-nav-count {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #a0e1f3;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-shadow:
    0 0 6px rgba(160, 225, 243, 0.75),
    0 0 10px rgba(160, 225, 243, 0.4);
  transform-origin: center center;
  animation: airobo-msg-count-heartbeat 3.2s ease-in-out infinite;
  will-change: transform;
}

/* «Сердцебиение» числа: scale(1) → 1.15 → 1, два мягких импульса и спокойная пауза. */
@keyframes airobo-msg-count-heartbeat {
  0% {
    transform: scale(1);
  }
  7% {
    transform: scale(1.15);
  }
  14% {
    transform: scale(1);
  }
  21% {
    transform: scale(1.08);
  }
  28%,
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-nav-link.dashboard-nav-link--show-count .dashboard-nav-count {
    animation: none;
    transform: none;
  }
}

/* Мобилка: рамка кнопок шапки (Профиль и др.) — без внешнего свечения по углам.
 * Состояние «непрочитано» живёт только на иконке, поэтому кнопки сбрасываем как обычно. */
@media (max-width: 829px) {
  .dashboard-nav-link,
  .dashboard-nav-link:hover,
  .dashboard-nav-link:active,
  .dashboard-nav-link.active {
    animation: none !important;
    box-shadow: none !important;
  }

  /* Мобайл: слова «Сообщения» нет (label скрыт) — показываем только цифру,
     центрированную в кнопке 32×32. Без рамки/фона; «сердцебиение» на самой цифре. */
  .dashboard-nav-link.dashboard-nav-link--show-count .dashboard-nav-count {
    font-size: 14px;
    animation: airobo-msg-count-heartbeat 3.2s ease-in-out infinite !important;
  }

  .dashboard-nav-link.active {
    border-color: #a0e1f3;
    color: #a0e1f3;
  }

  .dashboard-nav-link.active .dashboard-nav-icon {
    filter: brightness(1.35) drop-shadow(0 0 2px rgba(160, 225, 243, 0.5));
  }
}

/* ===== CONSOLE DEVICE (Profile Page) ===== */

.console-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 88px 24px 24px;
  box-sizing: border-box;
}

.console-device {
  width: 100%;
  max-width: 960px;
}

/* --- Frame container --- */
.console-frame {
  position: relative;
  border-radius: 16px;
  padding: 28px;
  background: #030712;
}

/* --- SVG circuit-board frame overlay --- */
.frame-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.frame-traces {
  filter: drop-shadow(0 0 3px rgba(30, 144, 255, 0.5))
          drop-shadow(0 0 8px rgba(30, 144, 255, 0.25));
}

.frame-vias {
  filter: drop-shadow(0 0 5px rgba(160, 225, 243, 0.7))
          drop-shadow(0 0 12px rgba(30, 144, 255, 0.4));
}

.frame-leds {
  filter: drop-shadow(0 0 6px rgba(30, 144, 255, 0.7))
          drop-shadow(0 0 14px rgba(30, 144, 255, 0.4));
}

.frame-runners {
  filter: drop-shadow(0 0 6px rgba(160, 225, 243, 0.8))
          drop-shadow(0 0 14px rgba(30, 144, 255, 0.5))
          drop-shadow(0 0 24px rgba(30, 144, 255, 0.2));
}

/* --- Screen (inside the frame) --- */
.console-screen {
  position: relative;
  z-index: 1;
  background: #030712;
  border-radius: 6px;
  min-height: 380px;
  display: flex;
  align-items: flex-start;
  padding: 24px;
  overflow: hidden;
}

/* --- PCB detail traces in frame border zone --- */
.frame-pcb {
  filter: drop-shadow(0 0 2px rgba(30, 144, 255, 0.35))
          drop-shadow(0 0 6px rgba(30, 144, 255, 0.15));
}

.console-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(30, 144, 255, 0.012) 3px,
    rgba(30, 144, 255, 0.012) 6px
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 3;
}

/* --- Avatar photo (passport-style, left side) --- */
.console-avatar-photo {
  width: 180px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid rgba(30, 144, 255, 0.35);
  background: #0a0f1a;
  margin-top: 12%;
  box-shadow:
    0 0 14px rgba(30, 144, 255, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.console-avatar-photo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== CONSOLE — MOBILE ===== */
@media (max-width: 829px) {
  .console-viewport {
    padding: 56px 8px 12px;
    align-items: flex-start;
  }

  .console-frame {
    padding: 18px;
    border-radius: 14px;
  }

  .console-screen {
    min-height: 420px;
    padding: 16px;
  }

  .console-avatar-photo {
    width: 140px;
    margin-top: 10%;
  }
}

/* ===== PROFILE PAGE TITLE ("Личный кабинет") ===== */
.profile-page-title {
  margin: 24px auto 8px;
  text-align: center;
  font-family: 'neuro', system-ui, -apple-system, sans-serif;
  font-weight: 200;
  font-size: 28px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #38bdf8;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.9),
    0 0 16px rgba(56, 189, 248, 0.7),
    0 0 24px rgba(56, 189, 248, 0.5);
}

/* Скрываем дубликат заголовка внутри рамки */
.profile-page .content-container .nickname {
  display: none;
}

/* Корректируем кнопку "Настройки аккаунта" под ширину аватара */
.profile-page .settings-button {
  max-width: 200px;
  width: 100%;
}

/* Блок «Достижения» на вкладке «Имя»: карусель — см. profile.html + .profile-ach-carousel, js/main.js initProfileAchievementsCarousel */

/* --- Страница анкеты (questionnaire.html) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.questionnaire-page .auth-title--questionnaire {
  text-align: left;
  color: #a0e1f3;
  text-shadow: none;
}

/* Больше места снизу, чтобы селекты открывались вниз */
.questionnaire-page .auth-layout {
  padding-bottom: 64px;
}

.questionnaire-page .auth-panel {
  padding-bottom: 34px;
  /* В тон нейтральному блоку формы (.questionnaire-color-card--neutral), не rgba(10,10,18) как у остальных auth-страниц */
  background: rgba(16, 16, 26, 0.94);
}

/* Анкета — только мобилка: внешняя рамка (.auth-panel) и цветной блок по центру экрана */
@media (max-width: 829px) {
  .questionnaire-page .auth-layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .questionnaire-page .auth-panel {
    width: min(600px, calc(100vw - 32px));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    flex: 0 0 auto;
  }

  .questionnaire-page .questionnaire-form {
    width: 100%;
    align-items: stretch;
  }

  .questionnaire-page .questionnaire-color-card {
    width: 100%;
    box-sizing: border-box;
  }
}

.questionnaire-color-card {
  --q-accent: #1e90ff;
  border-radius: 0;
  padding: 16px 16px 14px;
  margin-bottom: 18px;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.questionnaire-color-card--neutral {
  background: rgba(16, 16, 26, 0.94);
  border: 1px solid rgba(30, 144, 255, 0.7);
  box-shadow:
    0 0 18px rgba(30, 144, 255, 0.28),
    inset 0 0 36px rgba(0, 0, 0, 0.45);
}

.questionnaire-color-card--male {
  background: linear-gradient(
    155deg,
    rgba(14, 116, 209, 0.42) 0%,
    rgba(56, 189, 248, 0.52) 45%,
    rgba(125, 211, 252, 0.38) 100%
  );
  border: 1px solid rgba(125, 211, 252, 0.95);
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.65),
    0 0 36px rgba(14, 165, 233, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.questionnaire-color-card--female {
  background: linear-gradient(
    155deg,
    rgba(190, 24, 93, 0.42) 0%,
    rgba(236, 72, 153, 0.52) 45%,
    rgba(244, 114, 182, 0.4) 100%
  );
  border: 1px solid rgba(244, 114, 182, 0.95);
  box-shadow:
    0 0 18px rgba(236, 72, 153, 0.6),
    0 0 34px rgba(219, 39, 119, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.questionnaire-color-card__inner .auth-label {
  color: rgba(248, 250, 252, 0.95);
}

.questionnaire-color-card__inner > .auth-field + .auth-field {
  margin-top: 18px;
}

.questionnaire-nickname-hint {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(224, 231, 255, 0.72);
}

.questionnaire-dob-block {
  margin-top: 0;
}

.questionnaire-color-card .auth-input {
  background: rgba(8, 12, 22, 0.92);
  color: #e2e8f0;
  border: 1px solid rgba(226, 232, 240, 0.18);
  box-shadow: none;
}

.questionnaire-color-card .auth-input::placeholder {
  color: rgba(226, 232, 240, 0.55);
}

/* В анкете фокус НЕ красит поле в #a0e1f3 (как на auth), оставляем тёмным */
.questionnaire-color-card .auth-input:focus,
.questionnaire-color-card .auth-input:active,
.questionnaire-color-card .auth-input:focus-visible,
.questionnaire-color-card .auth-input:not(:placeholder-shown) {
  background: rgba(8, 12, 22, 0.92);
  color: #e2e8f0;
  border-color: var(--q-accent);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--q-accent) 55%, transparent),
    0 0 14px color-mix(in srgb, var(--q-accent) 35%, transparent);
}

.questionnaire-color-card .auth-input.is-empty,
.questionnaire-color-card .auth-input.is-valid {
  border-color: var(--q-accent);
  box-shadow:
    0 0 5px color-mix(in srgb, var(--q-accent) 45%, transparent),
    0 0 12px color-mix(in srgb, var(--q-accent) 28%, transparent);
}

.questionnaire-dob-row--selects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
  align-items: flex-start;
}

.questionnaire-dob-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 92px;
  min-width: 0;
}

.questionnaire-dob-col .questionnaire-select {
  width: 100%;
  min-width: 0;
  background-color: rgba(8, 12, 22, 0.92);
  color: #e2e8f0;
  cursor: pointer;
  appearance: auto;
}

.questionnaire-dob-col .questionnaire-select option {
  background: #0f172a;
  color: #e2e8f0;
}

.custom-select {
  position: relative;
}

.custom-select__trigger {
  width: 100%;
  text-align: left;
  position: relative;
  padding-right: 28px;
}

.custom-select__trigger::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(226, 232, 240, 0.75);
  border-bottom: 2px solid rgba(226, 232, 240, 0.75);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.custom-select.is-open .custom-select__trigger::after {
  transform: translateY(-35%) rotate(-135deg);
}

.custom-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 220px;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid rgba(30, 144, 255, 0.48);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.65);
  z-index: 40;
  display: none;
}

.custom-select.is-open .custom-select__menu {
  display: block;
}

.custom-select__option {
  width: 100%;
  border: 0;
  background: transparent;
  color: #e2e8f0;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
}

.custom-select__option:hover,
.custom-select__option.is-active {
  background: rgba(30, 144, 255, 0.22);
}

.questionnaire-dob-caption {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  user-select: none;
}

.questionnaire-gender-fieldset {
  border: 0;
  margin: 22px 0 0;
  padding: 0;
}

.questionnaire-gender-legend {
  margin-bottom: 8px;
}

.questionnaire-gender-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.questionnaire-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: rgba(248, 250, 252, 0.95);
  user-select: none;
}

.questionnaire-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--q-accent);
  cursor: pointer;
}

.questionnaire-radio-label input:disabled + span {
  opacity: 0.75;
}

.questionnaire-radio:disabled {
  cursor: not-allowed;
}

.questionnaire-gender-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(224, 231, 255, 0.78);
}

.questionnaire-gender-note__attention {
  color: #B08D57;
}

.questionnaire-form-error {
  margin: 14px 0 14px;
  font-size: 13px;
  color: #B08D57;
  text-shadow: none;
}

.questionnaire-page .questionnaire-form .auth-button {
  width: 48%;
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: 0.07em;
  margin-top: 10px;
}

/* Поп-ап после сохранения анкеты */
.questionnaire-saved-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.questionnaire-saved-modal[hidden] {
  display: none !important;
}

.questionnaire-saved-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.questionnaire-saved-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  padding: 22px 20px 20px;
  background: rgba(10, 10, 18, 0.95);
  border: 1px solid rgba(30, 144, 255, 0.45);
  box-shadow:
    0 0 18px rgba(30, 144, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}

.questionnaire-saved-modal__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(224, 231, 255, 0.92);
}

.questionnaire-saved-modal__ok {
  width: auto;
  min-width: 120px;
  margin: 0 auto;
  padding: 8px 18px;
  font-size: 12px;
}

.questionnaire-confirm-modal__dialog {
  text-align: center;
}

.questionnaire-confirm-modal__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #1e90ff;
}

.questionnaire-confirm-modal__subtitle {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(224, 231, 255, 0.92);
}

.questionnaire-confirm-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.questionnaire-confirm-modal__confirm,
.questionnaire-confirm-modal__review {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 18px;
  font-size: 12px;
  box-sizing: border-box;
  background: #000000;
  border: 1px solid rgba(30, 144, 255, 0.8);
  color: #1e90ff;
  box-shadow:
    0 0 6px rgba(30, 144, 255, 0.45),
    0 0 12px rgba(30, 144, 255, 0.25);
  transition: all 0.3s ease;
}

.questionnaire-confirm-modal__confirm:hover,
.questionnaire-confirm-modal__review:hover {
  background: #000000;
  border-color: #a0e1f3;
  color: #a0e1f3;
  box-shadow:
    0 0 8px rgba(160, 225, 243, 0.55),
    0 0 16px rgba(160, 225, 243, 0.25);
}

.questionnaire-confirm-modal__confirm:active,
.questionnaire-confirm-modal__review:active {
  transform: scale(0.99);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.35),
    0 0 12px rgba(30, 144, 255, 0.3);
}

/* ============================================================
 * AIRoWorld auth modal (account already exists и др.)
 * glass + neon, согласован с .auth-panel / .auth-button.
 * ============================================================ */
.airo-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  animation: airoAuthModalFadeIn 180ms ease-out;
}

.airo-auth-modal[hidden] {
  display: none !important;
}

.airo-auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.airo-auth-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 32px));
  max-width: 100%;
  padding: 26px 24px 22px;
  box-sizing: border-box;
  background: rgba(10, 10, 18, 0.92);
  border: 1px solid rgba(30, 144, 255, 0.45);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 0 18px rgba(30, 144, 255, 0.18),
    0 0 40px rgba(30, 144, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -10px 30px rgba(0, 0, 0, 0.55);
  text-align: center;
  animation: airoAuthModalPop 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.airo-auth-modal__lang-row {
  /* Совпадает по стилю с .lang-row на register/login/forgot:
     переключатель прижат вправо, под заголовком модалки. */
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}

.airo-auth-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(160, 225, 243, 0.7);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.airo-auth-modal__close:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(160, 225, 243, 0.85);
}

.airo-auth-modal__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a0e1f3;
  text-shadow:
    0 0 6px rgba(30, 144, 255, 0.55),
    0 0 14px rgba(30, 144, 255, 0.25);
}

/* Success-mode email-change popup: один heading вместо title+text,
 * нормальный регистр (sentence case), мягче чем uppercase title. */
.airo-auth-modal--success .airo-auth-modal__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 4px 0 16px;
}
.airo-auth-modal--success .airo-auth-modal__email {
  margin-bottom: 20px;
}

.airo-auth-modal__text {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(224, 231, 255, 0.92);
}

.airo-auth-modal__email {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent, #1e90ff);
  word-break: break-all;
}

.airo-auth-modal__email[hidden] {
  display: none;
}

.airo-auth-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

.airo-auth-modal__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  max-width: 280px;
  min-width: 0;
  text-decoration: none;
  box-sizing: border-box;
}

.airo-auth-modal__forgot {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}

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

@keyframes airoAuthModalPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 480px) {
  .airo-auth-modal__dialog {
    padding: 22px 18px 18px;
  }
  .airo-auth-modal__title {
    font-size: 16px;
  }
  .airo-auth-modal__action {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .questionnaire-dob-row--selects {
    flex-direction: column;
  }
  .questionnaire-dob-col {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Settings (auth layout) — поле email и кнопки как на login.html (ширина поля 100%, кнопки 60%) */
.settings-page .settings-stack {
  width: 100%;
  margin-top: 6px;
}

.settings-page .settings-block--profile-id {
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(30, 144, 255, 0.22);
}

.settings-page .settings-readonly {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e2e8f0;
  word-break: break-word;
}

.settings-readonly--locked {
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-color: #1e90ff;
  background: #a0e1f3;
  color: #0a0f1a;
  box-shadow:
    0 0 6px #1e90ff,
    0 0 12px rgba(30, 144, 255, 0.6);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.settings-readonly--locked:focus,
.settings-readonly--locked:active,
.settings-readonly--locked:focus-visible {
  background: #a0e1f3;
  color: #0a0f1a;
}

/* Loading-skeleton: пока session ещё не восстановлена. Один источник
 * истины (getUser) ещё не ответил → показываем placeholder вместо
 * мигания "empty → old → new". */
.settings-page .settings-readonly--locked.is-loading {
  background: linear-gradient(
    90deg,
    rgba(160, 225, 243, 0.55) 0%,
    rgba(160, 225, 243, 0.85) 50%,
    rgba(160, 225, 243, 0.55) 100%
  );
  background-size: 200% 100%;
  animation: settingsEmailSkeleton 1.4s linear infinite;
  color: rgba(10, 15, 26, 0.5);
}

@keyframes settingsEmailSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Кнопки в loading/saving — приглушены и недоступны. */
.settings-page .auth-button.settings-btn.is-loading,
.settings-page .auth-button.settings-btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

.settings-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 144, 255, 0.22);
}

.settings-section--account {
  position: relative;
  z-index: 1;
}

.settings-section:first-of-type {
  border-top: 0;
  padding-top: 18px;
  margin-top: 0;
}

.settings-section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.settings-row--email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}

.settings-row__main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.settings-row__main .auth-label {
  display: block;
  margin-top: 6px;
  margin-bottom: 6px;
}

.settings-row__actions {
  width: 100%;
  margin-top: 2px;
}

/* Ширина как у поля «Текущий email» (100% колонки), высота/типографика как у .auth-button на login */
.settings-page .auth-button.settings-btn.settings-btn--column {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-sizing: border-box;
  text-align: center;
}

/* Только «Аккаунт»: выход и удаление — ширина как на login (60%), не как поле email */
.settings-page .settings-section--account .auth-button.settings-btn.settings-btn--column {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 829px) {
  /* Мобилка: выход и удаление — во всю ширину как «Изменить пароль» / «Тарифы» */
  .settings-page .settings-section--account .auth-button.settings-btn.settings-btn--column {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.settings-link-btn {
  flex: 0 0 auto;
  padding: 6px 0;
  border: 0;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(30, 144, 255, 0.55);
  color: rgba(59, 130, 246, 0.95);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.settings-link-btn:hover {
  color: #93c5fd;
  border-bottom-color: rgba(147, 197, 253, 0.75);
}

.settings-privacy-question {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.92);
}

.settings-privacy-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.settings-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
}

.settings-radio-row:last-child {
  margin-bottom: 0;
}

.settings-radio-row input[type='radio'] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #3b82f6;
}

.settings-btn {
  width: auto;
  min-width: 170px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  padding: 8px 14px;
  font-size: 12px;
}

.settings-btn--wide {
  margin-top: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.settings-btn--wide:first-of-type {
  margin-top: 0;
}

.settings-btn--danger {
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.95), rgba(127, 29, 29, 0.98));
  border-color: rgba(248, 113, 113, 0.45);
  color: #fef2f2;
}


.settings-btn--danger:hover {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.98), rgba(153, 27, 27, 1));
  border-color: rgba(252, 165, 165, 0.6);
  color: #fff;
}

.settings-modal[hidden] {
  display: none !important;
}

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.settings-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(430px, 94vw);
  padding: 20px;
  background: rgba(10, 10, 18, 0.96);
  border: 1px solid rgba(30, 144, 255, 0.45);
  box-shadow: 0 0 18px rgba(30, 144, 255, 0.25);
}

.settings-modal__title {
  margin: 0 0 14px;
  font-size: 18px;
  color: #e2e8f0;
}

.settings-modal__title--neon {
  font-family: 'neiro', 'neuro', sans-serif;
  color: #7dd3fc;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.45),
    0 0 14px rgba(56, 189, 248, 0.2);
}

.settings-modal__field {
  margin-bottom: 12px;
}

.settings-modal__field .auth-input-wrapper {
  width: 100%;
  box-sizing: border-box;
}

.settings-modal__actions {
  margin-top: 16px;
}

.settings-modal__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #cbd5e1;
}

.settings-modal__actions--split {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-modal--delete-account .settings-btn--modal-danger {
  margin-top: 0;
}

@media (min-width: 480px) {
  .settings-modal__actions--split {
    flex-direction: row;
    align-items: stretch;
  }

  .settings-modal__actions--split .settings-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* iPhone Safari fix:
 *
 * 1. `body.auth-page .auth-button { width: min(280px, 100%); }` (@media
 *    max-width:829px) ограничивает все .auth-button до 280px — в том
 *    числе Save-кнопку внутри settings modals. Из-за `margin: 0 auto`
 *    кнопка центрируется и оказывается уже input-а. На desktop и
 *    Android F12 правило не активно (либо ширина > 280px и совпадает).
 *
 * 2. <button> в iOS Safari по умолчанию имеет -webkit-appearance: button —
 *    нативное inner-padding ломает выравнивание даже при width:100%.
 *
 * Поднимаем специфичность через `body.auth-page` (0,3,0 > 0,2,0) и
 * явно сбрасываем appearance/margin/box-sizing. Аналогично для input,
 * чтобы оба элемента имели одинаковые left/right edges. */
body.auth-page .settings-modal__field .auth-input,
.settings-modal__field .auth-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

body.auth-page .settings-modal__actions .settings-btn,
.settings-modal__actions .settings-btn {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Модалка поста Instagram.exe: на profile.html стили продублированы inline (они сильнее). */
.ig-bm-modal[hidden] {
  display: none !important;
}

.ig-bm-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}

.ig-bm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 18, 0.8);
  backdrop-filter: blur(4px);
}

.ig-bm-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  max-height: min(92vh, 900px);
  overflow: hidden;
  background: linear-gradient(165deg, #14141c 0%, #0a0a10 100%);
  border: 1px solid rgba(30, 144, 255, 0.45);
  border-radius: 0;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  padding: 8px;
  box-sizing: border-box;
}

.ig-bm-modal__content {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  width: 320px;
  margin: 0 auto;
}

/* Cadet profile page */
.cadet-profile-page {
  align-items: center;
  justify-content: flex-start;
  padding-top: 86px;
  box-sizing: border-box;
}

.cadet-profile-page .auth-layout {
  padding: 12px 16px;
  box-sizing: border-box;
  /* Не тянем main на весь экран — иначе виджет с height: 100% раздувается почти на весь viewport */
  min-height: calc(100vh - 86px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
}

.cadet-profile-panel {
  width: 100%;
  max-width: 520px;
  padding-top: 12px;
  padding-bottom: 20px;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Кадет: без второй «рамки» вокруг Instagram.exe — на десктопе раньше оставалась общая
 * обводка .auth-panel (синяя hairline + glow), т.к. сброс был только в мобильном media-query.
 */
body.cadet-profile-page .cadet-profile-panel.auth-panel {
  border: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
}

/* Как .profile-main-tabs-content: только обёртка под вкладку */
.cadet-profile-page .cadet-profile-main-tabs-content {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* раньше — место под большой крестик панели; он скрыт, отступ уменьшен */
  padding-top: 12px;
  box-sizing: border-box;
}

/*
 * Большой ✕ у синей рамки дублирует штатный ✕ в шапке Instagram.exe — убираем только его.
 * Закрытие/назад — клик по .ig-exe-wc-close в title bar виджета (как раньше).
 */
.cadet-profile-page .cadet-profile-panel-head {
  display: none !important;
}

.cadet-profile-page .cadet-profile-panel__close {
  display: none !important;
}

/* В виджете .ig-exe-wc по умолчанию pointer-events: none — для ✕ закрытия нужен клик */
.cadet-profile-page .cadet-profile-panel .posts-instagram-exe-wrap .instagram .ig-exe-wc-close {
  pointer-events: auto;
  cursor: pointer;
}

/* Instagram.exe — те же 320×550, что .posts-feed .posts-instagram-exe-wrap на profile.html */
.cadet-profile-page .profile-main-tab-pane--posts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow: visible;
}

.cadet-profile-page .profile-main-tab-pane--posts .posts-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 16px;
  width: 100%;
  box-sizing: border-box;
}

.cadet-profile-page .profile-main-tab-pane--posts .posts-feed .posts-instagram-exe-wrap {
  flex: 0 0 auto;
  width: 320px;
  max-width: 320px;
  height: 550px;
  min-height: 550px;
  max-height: 550px;
}

@media (max-width: 829px) {
  .cadet-profile-page {
    padding-top: 80px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  /* Страница кадета фиксирована во весь видимый экран (как Cadet Chat после фикса):
     сама НЕ скроллится, шапка всегда сверху, карточка не заезжает под неё.
     dvh учитывает панели браузера/клавиатуру (vh давал «большой» viewport → page-scroll). */
  body.cadet-profile-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .cadet-profile-page .auth-layout {
    /* Область строго под фикс. шапкой = внутренний скролл-контейнер карточки.
       Page-scroll вокруг карточки отсутствует; прокрутка — только здесь и внутри виджета. */
    min-height: 0;
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    overflow-y: auto;
    /* Не clip: при узком viewport + padding карточка 320px не должна резаться (крестик недоступен) */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* safe center: центрируем, когда влезает; при нехватке высоты — прокрутка без обрезки сверху */
    justify-content: safe center;
    min-width: 0;
  }
  /* Слой панели ниже .profile-header (100): внутренние z-index Instagram.exe не «пробивают» шапку */
  .cadet-profile-page .cadet-profile-panel {
    z-index: 0;
    isolation: isolate;
    min-width: 0;
    max-width: 100%;
  }
  .cadet-profile-page .cadet-profile-main-tabs-content {
    min-width: 0;
    max-width: 100%;
  }
  .cadet-profile-page .profile-main-tab-pane--posts {
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
  }
  .cadet-profile-page .profile-main-tab-pane--posts .posts-feed {
    min-width: 0;
    container-type: inline-size;
    /*
      Вариант A — та же логика, что на profile.html (Мои публикации/Закладки):
      считаем ШИРИНУ карты (без деления длины на длину → работает и на старых Android WebView),
      ширина — приоритет, высота — только ограничитель, пропорции 320:550 зафиксированы.
        --ig-card-w-cap : потолок 320×1.2 = 384px (без transform, без искажений);
        --ig-card-w-byw : по доступной ширине (драйвер; cqw в @supports ниже);
        --ig-card-w-byh : по доступной высоте (svh − фикс. отступ шапки кадета) × 320 / 550.
      Контейнер кадета — inline-size, поэтому высоту берём от svh (cqh недоступен).
    */
    --ig-card-w-cap: 384px;
    --ig-card-w-byw: calc(100vw - 32px);
    --ig-card-w-byh: calc(
      (100svh - 6.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 320 / 550
    );
    --ig-card-w: min(var(--ig-card-w-cap), var(--ig-card-w-byw), var(--ig-card-w-byh));
  }
  /*
   * Instagram.exe: без min(320px,100%) в --ig-exe-window-w — на части Android % внутри
   * custom property давал слишком узкий max-width у .instagram («миниатюра» внутри рамки).
   * Рамка: width 100% + max-width 320px; переменная остаётся 320px из profile-instagram-exe.css.
   * Высота: не фиксировать 550px на коротких экранах / в Chrome DevTools — как на телефоне.
   */
  .cadet-profile-page .profile-main-tab-pane--posts .posts-feed .posts-instagram-exe-wrap {
    flex: 0 0 auto;
    min-width: 0;
    /* Ширина-приоритет, высота = ширина × 550 / 320 (пропорции 320:550 точные, без transform). */
    width: var(--ig-card-w);
    max-width: 100%;
    box-sizing: border-box;
    height: calc(var(--ig-card-w) * 550 / 320);
    min-height: calc(var(--ig-card-w) * 550 / 320);
    max-height: calc(var(--ig-card-w) * 550 / 320);
    --ig-exe-window-w: var(--ig-card-w);
    --ig-exe-window-h: calc(var(--ig-card-w) * 550 / 320);
    transform: none;
    margin: 0 auto;
  }
  .cadet-profile-page .posts-instagram-exe-wrap .instagram {
    max-width: 100%;
  }
}

@supports (width: 1cqw) {
  @media (max-width: 829px) {
    /* Драйвер ширины = реальная ширина контейнера (cqw) — одинаково на Android и iPhone */
    .cadet-profile-page .profile-main-tab-pane--posts .posts-feed {
      --ig-card-w-byw: 100cqw;
    }
  }
}

/* Страницы входа школ: фиксированный слой под шапкой; фон из assets/images (цепочка форматов) */
body.boys-school-entrance-page,
body.girls-school-entrance-page,
body.preschool-school-entrance-page {
  overflow-x: hidden;
}

.boys-school-entrance-bg,
.girls-school-entrance-bg,
.preschool-school-entrance-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-bg-deep-space);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* запас на мобильных браузерах с динамической высотой viewport */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* Видеофон школ (мальчики/девочки/детсад) — у каждой свои клипы в assets/video-bg, десктоп + мобилка */
body.boys-school-entrance-page .boys-school-entrance-bg,
body.girls-school-entrance-page .girls-school-entrance-bg,
body.preschool-school-entrance-page .preschool-school-entrance-bg {
  background-image: none;
  overflow: hidden;
}

body.boys-school-entrance-page .boys-school-entrance-bg__video,
body.girls-school-entrance-page .girls-school-entrance-bg__video,
body.preschool-school-entrance-page .preschool-school-entrance-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

body.boys-school-entrance-page .boys-school-entrance-bg__video--mobile,
body.girls-school-entrance-page .girls-school-entrance-bg__video--mobile,
body.preschool-school-entrance-page .preschool-school-entrance-bg__video--mobile {
  display: none;
}

/* Картинки-фолбэк (на случай блокировки автоплея и т.п.) — пути к будущим статичным версиям */
.girls-school-entrance-bg {
  background-image: url('../assets/images/girls-school-entrance.png'),
    url('../assets/images/girls-school-entrance.jpg'),
    url('../assets/images/girls-school-entrance.webp');
}

.preschool-school-entrance-bg {
  background-image: url('../assets/images/Entrance-preschool-school.png'),
    url('../assets/images/Entrance-preschool-school.jpg'),
    url('../assets/images/Entrance-preschool-school.webp');
}

body.boys-school-entrance-page .dashboard-main,
body.girls-school-entrance-page .dashboard-main,
body.preschool-school-entrance-page .dashboard-main {
  position: relative;
  z-index: 1;
}

.boys-school-entrance-main,
.girls-school-entrance-main,
.preschool-school-entrance-main {
  min-height: calc(100vh - 72px);
  margin: 0;
}

@media (max-width: 829px) {
  body.boys-school-entrance-page .boys-school-entrance-bg__video--desktop,
  body.girls-school-entrance-page .girls-school-entrance-bg__video--desktop,
  body.preschool-school-entrance-page .preschool-school-entrance-bg__video--desktop {
    display: none;
  }

  body.boys-school-entrance-page .boys-school-entrance-bg__video--mobile,
  body.girls-school-entrance-page .girls-school-entrance-bg__video--mobile,
  body.preschool-school-entrance-page .preschool-school-entrance-bg__video--mobile {
    display: block;
  }

  .girls-school-entrance-bg {
    background-image: url('../assets/images/girls-school-entrance-mobile.png'),
      url('../assets/images/girls-school-entrance-mobile.jpg'),
      url('../assets/images/girls-school-entrance-mobile.webp');
  }

  .preschool-school-entrance-bg {
    background-image: url('../assets/images/Entrance-preschool-school-mobile.png'),
      url('../assets/images/Entrance-preschool-school-mobile.jpg'),
      url('../assets/images/Entrance-preschool-school-mobile.webp');
  }

  /* Один слой cover по всему экрану; dvh — без «швов» при скрытии панелей браузера */
  .boys-school-entrance-bg,
  .girls-school-entrance-bg,
  .preschool-school-entrance-bg {
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  .boys-school-entrance-main,
  .girls-school-entrance-main,
  .preschool-school-entrance-main {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
  }

  /* Масштаб 3D-сцены; стрелки компенсируют scale отдельно — визуальный размер кнопок не «сжимается» вместе с дверями */
  body.boys-school-entrance-page,
  body.girls-school-entrance-page {
    --school-carousel-scene-scale: 0.86;
  }

  /* Контент не упирается в вырезы; запас по бокам под 3D-карусель и стрелки */
  body.boys-school-entrance-page .boys-school-entrance-main--cards,
  body.girls-school-entrance-page .girls-school-entrance-main--cards,
  body.preschool-school-entrance-page .preschool-school-entrance-main--cards {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  /*
   * Карусель дверей: scale только сцены; translateZ на мобилке — boys-school-entrance-cards.js (привязка к min(vw,vh)).
   */
  .boys-school-entrance-page .boys-school-carousel-container,
  .girls-school-entrance-page .boys-school-carousel-container,
  .preschool-school-entrance-page .boys-school-carousel-container {
    transform: scale(var(--school-carousel-scene-scale, 0.86));
    transform-origin: center center;
  }
}

/* Карусель карточек — boys-school-entrance.html, girls-school-entrance.html, preschool-school-entrance.html */
.boys-school-entrance-page,
.girls-school-entrance-page,
.preschool-school-entrance-page {
  /* чуть >1 — картинка крупнее прямоугольника карточки, края обрезаются overflow; меньше видно прозрачных полей PNG */
  --boys-card-door-zoom: 1.14;
  /* портал-кнопка: единое масштабирование всей геометрии Uiverse (рамка, углы, стрелки) */
  --school-entrance-portal-scale: 1.14;
}

.boys-school-entrance-page .boys-school-entrance-main--cards,
.girls-school-entrance-page .girls-school-entrance-main--cards,
.preschool-school-entrance-page .preschool-school-entrance-main--cards {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 72px 12px 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: visible;
}

.boys-school-entrance-page .boys-school-carousel-wrap,
.girls-school-entrance-page .boys-school-carousel-wrap,
.preschool-school-entrance-page .boys-school-carousel-wrap {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  flex: 0 0 auto;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: visible;
}

.boys-school-entrance-page .boys-school-portal-btn-wrap,
.girls-school-entrance-page .boys-school-portal-btn-wrap,
.preschool-school-entrance-page .boys-school-portal-btn-wrap {
  position: relative;
  z-index: 25;
  flex-shrink: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  transform: translateY(18px) scale(var(--school-entrance-portal-scale));
  transform-origin: center center;
  /* ближе к верхнему краю карусели с дверями; scale — «резиново» вся кнопка без сдвига пропорций */
}

/* From Uiverse.io by Navarog21 — рамка + тёмно-серый фон; цвет текста как у стрелок карусели; размер — исходный em, увеличение через scale на wrap */
.boys-school-entrance-page .boys-school-portal-btn,
.girls-school-entrance-page .boys-school-portal-btn,
.preschool-school-entrance-page .boys-school-portal-btn {
  position: relative;
  width: 11em;
  height: 4em;
  outline: none;
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
  background-color: transparent;
  border: none;
  font-family: var(--font-headings);
  font-size: calc(13px * 1.07);
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.boys-school-entrance-page .boys-school-portal-btn__label,
.girls-school-entrance-page .boys-school-portal-btn__label,
.preschool-school-entrance-page .boys-school-portal-btn__label {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.15;
  pointer-events: none;
  font-family: inherit;
  color: var(--color-accent);
  text-shadow: none;
}

.boys-school-entrance-page .boys-school-portal-btn__title,
.girls-school-entrance-page .boys-school-portal-btn__title,
.preschool-school-entrance-page .boys-school-portal-btn__title {
  display: block;
  font-size: 0.95em;
  font-family: inherit;
  color: inherit;
}

.boys-school-entrance-page .boys-school-portal-btn__grade,
.girls-school-entrance-page .boys-school-portal-btn__grade,
.preschool-school-entrance-page .boys-school-portal-btn__grade {
  display: block;
  font-size: 0.82em;
  font-weight: 500;
  font-family: inherit;
  color: inherit;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__label,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__label,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__label {
  color: var(--color-accent-hover);
  /* тонкая чёрная кайма по контуру букв (голубой залив читается на тёмном фоне кнопки) */
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.9);
  paint-order: stroke fill;
  text-shadow:
    0 0 8px var(--color-accent-hover),
    0 0 18px var(--color-accent),
    0 0 28px rgba(30, 144, 255, 0.55);
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__title,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__title,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__title {
  color: var(--color-accent-hover);
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__grade,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__grade,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__grade {
  color: var(--color-accent-hover);
}

.boys-school-entrance-page .boys-school-portal-btn:hover,
.girls-school-entrance-page .boys-school-portal-btn:hover,
.preschool-school-entrance-page .boys-school-portal-btn:hover {
  color: var(--color-accent-hover);
}

.boys-school-entrance-page .boys-school-portal-btn__clip,
.girls-school-entrance-page .boys-school-portal-btn__clip,
.preschool-school-entrance-page .boys-school-portal-btn__clip {
  --color: #2761c3;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    165deg,
    rgba(44, 48, 58, 0.94) 0%,
    rgba(36, 40, 48, 0.92) 48%,
    rgba(50, 54, 64, 0.9) 100%
  );
  border: 5px double var(--color);
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(30, 144, 255, 0.12),
    inset 0 0 22px rgba(39, 194, 159, 0.1);
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  z-index: 1;
  pointer-events: none;
}

.boys-school-entrance-page .boys-school-portal-btn__arrow,
.girls-school-entrance-page .boys-school-portal-btn__arrow,
.preschool-school-entrance-page .boys-school-portal-btn__arrow {
  position: absolute;
  transition: 0.2s;
  background-color: #2761c3;
  top: 35%;
  width: 11%;
  height: 30%;
  z-index: 2;
  pointer-events: none;
}

.boys-school-entrance-page .boys-school-portal-btn__arrow--left,
.girls-school-entrance-page .boys-school-portal-btn__arrow--left,
.preschool-school-entrance-page .boys-school-portal-btn__arrow--left {
  left: -13.5%;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.boys-school-entrance-page .boys-school-portal-btn__arrow--right,
.girls-school-entrance-page .boys-school-portal-btn__arrow--right,
.preschool-school-entrance-page .boys-school-portal-btn__arrow--right {
  -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
  clip-path: polygon(100% 49%, 0 0, 0 100%);
  left: 102%;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__arrow--right,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__arrow--right,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__arrow--right {
  background-color: #27c39f;
  left: -15%;
  animation: 0.6s ease-in-out both infinite alternate boysSchoolPortalRightArrow8;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__arrow--left,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__arrow--left,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__arrow--left {
  background-color: #27c39f;
  left: 103%;
  animation: 0.6s ease-in-out both infinite alternate boysSchoolPortalLeftArrow8;
}

.boys-school-entrance-page .boys-school-portal-btn__corner,
.girls-school-entrance-page .boys-school-portal-btn__corner,
.preschool-school-entrance-page .boys-school-portal-btn__corner {
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: #2761c3;
  box-shadow: inset 1px 1px 8px #2781c3;
  transform: scale(1) rotate(45deg);
  transition: 0.2s;
}

.boys-school-entrance-page .boys-school-portal-btn__corner--rightTop,
.girls-school-entrance-page .boys-school-portal-btn__corner--rightTop,
.preschool-school-entrance-page .boys-school-portal-btn__corner--rightTop {
  top: -1.98em;
  left: 91%;
}

.boys-school-entrance-page .boys-school-portal-btn__corner--leftTop,
.girls-school-entrance-page .boys-school-portal-btn__corner--leftTop,
.preschool-school-entrance-page .boys-school-portal-btn__corner--leftTop {
  top: -1.96em;
  left: -3em;
}

.boys-school-entrance-page .boys-school-portal-btn__corner--leftBottom,
.girls-school-entrance-page .boys-school-portal-btn__corner--leftBottom,
.preschool-school-entrance-page .boys-school-portal-btn__corner--leftBottom {
  top: 2.1em;
  left: -2.15em;
}

.boys-school-entrance-page .boys-school-portal-btn__corner--rightBottom,
.girls-school-entrance-page .boys-school-portal-btn__corner--rightBottom,
.preschool-school-entrance-page .boys-school-portal-btn__corner--rightBottom {
  top: 45%;
  left: 88%;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--leftTop,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--leftTop,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--leftTop {
  animation:
    0.1s ease-in-out 0.05s both boysSchoolPortalChangeColor8,
    0.2s linear 0.4s both boysSchoolPortalLightEffect8;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--rightTop,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--rightTop,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--rightTop {
  animation:
    0.1s ease-in-out 0.15s both boysSchoolPortalChangeColor8,
    0.2s linear 0.4s both boysSchoolPortalLightEffect8;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--rightBottom,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--rightBottom,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--rightBottom {
  animation:
    0.1s ease-in-out 0.25s both boysSchoolPortalChangeColor8,
    0.2s linear 0.4s both boysSchoolPortalLightEffect8;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--leftBottom,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--leftBottom,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner--leftBottom {
  animation:
    0.1s ease-in-out 0.35s both boysSchoolPortalChangeColor8,
    0.2s linear 0.4s both boysSchoolPortalLightEffect8;
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__corner {
  transform: scale(1.25) rotate(45deg);
}

.boys-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__clip,
.girls-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__clip,
.preschool-school-entrance-page .boys-school-portal-btn:hover .boys-school-portal-btn__clip {
  animation: 0.2s ease-in-out 0.55s both boysSchoolPortalGreenLight8;
  --color: #27c39f;
  background: linear-gradient(
    165deg,
    rgba(52, 56, 66, 0.96) 0%,
    rgba(42, 46, 56, 0.94) 42%,
    rgba(48, 52, 62, 0.92) 75%,
    rgba(36, 52, 58, 0.88) 100%
  );
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.32),
    inset 0 0 24px rgba(30, 144, 255, 0.18),
    inset 0 0 30px rgba(39, 194, 159, 0.26);
}

.boys-school-entrance-page .boys-school-portal-btn:focus-visible,
.girls-school-entrance-page .boys-school-portal-btn:focus-visible,
.preschool-school-entrance-page .boys-school-portal-btn:focus-visible {
  outline: 2px solid #27c39f;
  outline-offset: 3px;
}

@keyframes boysSchoolPortalChangeColor8 {
  from {
    background-color: #2781c3;
  }
  to {
    background-color: #27c39f;
  }
}

@keyframes boysSchoolPortalLightEffect8 {
  from {
    box-shadow: 1px 1px 5px #27c39f;
  }
  to {
    box-shadow: 0 0 2px #27c39f;
  }
}

@keyframes boysSchoolPortalGreenLight8 {
  from {
    box-shadow:
      inset 0 0 24px rgba(0, 0, 0, 0.38),
      inset 0 0 20px rgba(30, 144, 255, 0.12),
      inset 0 0 22px rgba(39, 194, 159, 0.12);
  }
  to {
    box-shadow:
      inset 0 0 26px rgba(0, 0, 0, 0.3),
      inset 0 0 28px rgba(30, 144, 255, 0.2),
      inset 0 0 30px rgba(39, 194, 159, 0.3);
  }
}

@keyframes boysSchoolPortalLeftArrow8 {
  from {
    transform: translate(0px);
  }
  to {
    transform: translateX(10px);
  }
}

@keyframes boysSchoolPortalRightArrow8 {
  from {
    transform: translate(0px);
  }
  to {
    transform: translateX(-10px);
  }
}

.boys-school-entrance-page .boys-school-carousel-container,
.girls-school-entrance-page .boys-school-carousel-container,
.preschool-school-entrance-page .boys-school-carousel-container {
  position: relative;
  width: 100%;
  max-width: 850px;
  height: 400px;
  perspective: 1500px;
  perspective-origin: center center;
  -webkit-perspective: 1500px;
  overflow: visible;
}

.boys-school-entrance-page .boys-school-carousel-inner,
.girls-school-entrance-page .boys-school-carousel-inner,
.preschool-school-entrance-page .boys-school-carousel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 1s ease;
  transform: rotateY(0deg);
}

/* Тест: режим очереди с глубиной только на странице с body.is-queue-mode, только desktop */
@media (min-width: 830px) {
  /* perspective СНЯТА с container — иначе он становится containing block для position:fixed
     и стрелки начинают прилипать к контейнеру (= лежат на двери). Переношу перспективу на inner. */
  body.is-queue-mode.boys-school-entrance-page .boys-school-carousel-container {
    perspective: none !important;
    -webkit-perspective: none !important;
  }

  body.is-queue-mode.boys-school-entrance-page .boys-school-carousel-inner {
    transform: none !important;
    transition: none !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    perspective: 1100px;
    perspective-origin: center center;
    -webkit-perspective: 1100px;
  }

  body.is-queue-mode.boys-school-entrance-page .boys-school-card {
    left: 50%;
    top: auto;
    /* Опускаем ВСЮ группу дверей одним смещением (~6% высоты экрана: было −3vh, опустили все разом на 3vh),
       не меняя относительных расстояний и перспективы внутри очереди. */
    bottom: -6vh;
    margin-left: 0;
    margin-top: 0;
    transform-origin: center bottom;
    transition:
      transform 0.52s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.52s ease;
  }

  /* Стрелки прижаты к самому низу экрана, под первой дверью */
  body.is-queue-mode.boys-school-entrance-page .boys-school-carousel-nav {
    position: fixed;
    top: auto;
    bottom: 18px;
    transform: none;
    z-index: 50;
  }

  body.is-queue-mode.boys-school-entrance-page .boys-school-carousel-nav--prev {
    left: calc(50% - 60px);
    right: auto;
  }

  body.is-queue-mode.boys-school-entrance-page .boys-school-carousel-nav--next {
    left: calc(50% + 12px);
    right: auto;
  }

  body.is-queue-mode.boys-school-entrance-page .boys-school-carousel-wrap {
    padding-bottom: 0;
  }

  /* Прижимаем всю карусель к низу — первая дверь оказывается прямо над стрелками */
  body.is-queue-mode.boys-school-entrance-page .boys-school-entrance-main--cards {
    justify-content: flex-end;
    padding-bottom: 124px;
  }
}

.boys-school-entrance-page .boys-school-card,
.girls-school-entrance-page .boys-school-card,
.preschool-school-entrance-page .boys-school-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 300px;
  margin-left: -100px;
  margin-top: -150px;
  transform-origin: center center;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
  transition: transform 1s ease;
  -webkit-tap-highlight-color: transparent;
  /* backface-visibility: hidden ломает отрисовку фона/контента в 3D в ряде браузеров */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  background-color: transparent;
}

.boys-school-entrance-page .boys-school-card-img,
.girls-school-entrance-page .boys-school-card-img,
.preschool-school-entrance-page .boys-school-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  object-position: center center;
  transform: scale(var(--boys-card-door-zoom));
  transform-origin: center center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* скругление даёт только .boys-school-card + overflow — картинка на весь прямоугольник без зазоров */
}

.boys-school-entrance-page .boys-school-carousel-nav,
.girls-school-entrance-page .boys-school-carousel-nav,
.preschool-school-entrance-page .boys-school-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(30, 144, 255, 0.5);
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  background-color: rgba(48, 52, 62, 0.92);
  color: var(--color-accent);
  box-sizing: border-box;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    text-shadow 0.2s ease;
}

.boys-school-entrance-page .boys-school-carousel-nav:hover,
.girls-school-entrance-page .boys-school-carousel-nav:hover,
.preschool-school-entrance-page .boys-school-carousel-nav:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  background-color: rgba(58, 62, 74, 0.95);
  text-shadow:
    0 0 8px var(--color-accent-hover),
    0 0 18px var(--color-accent),
    0 0 28px rgba(30, 144, 255, 0.55);
  box-shadow:
    0 0 12px rgba(160, 225, 243, 0.45),
    0 0 22px rgba(30, 144, 255, 0.35);
}

.boys-school-entrance-page .boys-school-carousel-nav:focus-visible,
.girls-school-entrance-page .boys-school-carousel-nav:focus-visible,
.preschool-school-entrance-page .boys-school-carousel-nav:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 2px;
}

.boys-school-entrance-page .boys-school-carousel-nav--prev,
.girls-school-entrance-page .boys-school-carousel-nav--prev,
.preschool-school-entrance-page .boys-school-carousel-nav--prev {
  left: -18px;
}

.boys-school-entrance-page .boys-school-carousel-nav--next,
.girls-school-entrance-page .boys-school-carousel-nav--next,
.preschool-school-entrance-page .boys-school-carousel-nav--next {
  right: -18px;
}

/* Мобилка: стрелки внутри карусели — иначе left/right -18px уезжают за край и режутся overflow-x на body */
@media (max-width: 829px) {
  /* 62×62 в макете; компенсация scale сцены — на экране снова ~62px, не «уменьшаются» вместе с дверями */
  .boys-school-entrance-page .boys-school-carousel-nav,
  .girls-school-entrance-page .boys-school-carousel-nav,
  .preschool-school-entrance-page .boys-school-carousel-nav {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    font-size: 28px;
    border-radius: 8px;
    transform: translateY(-50%) scale(calc(1 / var(--school-carousel-scene-scale, 0.86)));
  }

  /* Ещё ~5% экрана наружу (всего safe-area − 10px − 10vw) */
  .boys-school-entrance-page .boys-school-carousel-nav--prev,
  .girls-school-entrance-page .boys-school-carousel-nav--prev,
  .preschool-school-entrance-page .boys-school-carousel-nav--prev {
    left: calc(env(safe-area-inset-left, 0px) - 10px - 10vw);
  }

  .boys-school-entrance-page .boys-school-carousel-nav--next,
  .girls-school-entrance-page .boys-school-carousel-nav--next,
  .preschool-school-entrance-page .boys-school-carousel-nav--next {
    right: calc(env(safe-area-inset-right, 0px) - 10px - 10vw);
  }
}

/* preschool-school-entrance.html — две анимированные тематические карточки (дверь-подобные); стили только внутри .preschool-entrance-theme-cards */
.preschool-school-entrance-page .preschool-entrance-scale {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 6vw, 56px);
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card {
  position: relative;
  height: 300px;
  width: 230px;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .preschool-theme-card--girls .boxshadow {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid #ff5ec9;
  transform: scale(0.8);
  box-shadow:
    rgba(255, 0, 170, 0.85) 0px 30px 70px 0px,
    0 0 42px rgba(255, 45, 180, 0.55);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .preschool-theme-card--boys .boxshadow {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid #00d4ff;
  transform: scale(0.8);
  box-shadow:
    rgba(0, 200, 255, 0.85) 0px 30px 70px 0px,
    0 0 42px rgba(0, 180, 255, 0.55);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .preschool-theme-card--girls .main {
  width: 230px;
  height: 300px;
  overflow: hidden;
  background: linear-gradient(
    0deg,
    #2a0a22 0%,
    #ff1493 52%,
    #2a0a22 100%
  );
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 40px,
    100% calc(100% - 40px),
    calc(100% - 40px) 100%,
    40px 100%,
    0 calc(100% - 40px)
  );
  box-shadow:
    rgba(255, 20, 147, 0.65) 0px 7px 29px 0px,
    0 0 24px rgba(255, 80, 180, 0.45);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .preschool-theme-card--boys .main {
  width: 230px;
  height: 300px;
  overflow: hidden;
  background: linear-gradient(
    0deg,
    #051428 0%,
    #0099ff 52%,
    #051a33 100%
  );
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 40px,
    100% calc(100% - 40px),
    calc(100% - 40px) 100%,
    40px 100%,
    0 calc(100% - 40px)
  );
  box-shadow:
    rgba(0, 180, 255, 0.65) 0px 7px 29px 0px,
    0 0 24px rgba(0, 200, 255, 0.45);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .top {
  position: absolute;
  top: 0px;
  left: 0;
  width: 0px;
  height: 0px;
  z-index: 2;
  border-top: 115px solid black;
  border-left: 115px solid transparent;
  border-right: 115px solid transparent;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .side {
  position: absolute;
  width: 100%;
  top: 0;
  transform: translateX(-50%);
  height: 101%;
  background: black;
  clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .left {
  left: 0;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .right {
  right: 0;
  transform: translateX(50%) scale(-1, 1);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 74px;
  font-size: clamp(15px, 3.4vw, 20px);
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-out 0s;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  color: #e8fbff;
  font-family: 'neuro', sans-serif;
  font-weight: 200;
  text-shadow:
    0 0 12px rgba(0, 230, 255, 0.95),
    0 0 24px rgba(0, 180, 255, 0.65);
}

/* Кнопка внизу: узкая чёрная плашка по центру (не на край двери); шрифт подписи не трогаем — только размер полосы. */
.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .button-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 230px;
  height: 120px;
  pointer-events: none;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .button-container .button.preschool-theme-card-btn {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(104px, calc(100% - 48px));
  max-width: 104px;
  box-sizing: border-box;
  bottom: 300px;
  top: auto;
  padding: 6px 8px;
  min-width: 0;
  min-height: 36px;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: white;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  overflow: visible;
  transition: bottom 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.4s,
    transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.4s;
  transition-delay: 0.4s;
  cursor: pointer;
}

/* Трапеция и контур по всему периметру: SVG stroke (iOS/Android), не filter+clip-path на button */
.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .button-container .preschool-theme-card-btn__outline {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .button-container .preschool-theme-card-btn__outline .preschool-theme-card-btn__poly {
  fill: #000000;
  stroke-width: 4px;
  stroke-linejoin: miter;
  transition: stroke 0.2s ease;
}

.preschool-school-entrance-page .preschool-theme-card--girls .preschool-theme-card-btn__outline .preschool-theme-card-btn__poly {
  stroke: #ff5ec9;
}

.preschool-school-entrance-page .preschool-theme-card--boys .preschool-theme-card-btn__outline .preschool-theme-card-btn__poly {
  stroke: #00d4ff;
}

.preschool-school-entrance-page .preschool-theme-card--girls .preschool-theme-card-btn:hover .preschool-theme-card-btn__outline .preschool-theme-card-btn__poly {
  stroke: #ff8adb;
}

.preschool-school-entrance-page .preschool-theme-card--boys .preschool-theme-card-btn:hover .preschool-theme-card-btn__outline .preschool-theme-card-btn__poly {
  stroke: #4ddbff;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .button-container .preschool-theme-card-btn__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-main);
  font-size: clamp(12px, 3.1vw, 15px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-accent);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-align: center;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .button-container .button.preschool-theme-card-btn:hover .preschool-theme-card-btn__text {
  color: var(--color-accent-hover);
  text-shadow: 0 0 8px var(--color-accent-hover), 0 0 14px var(--color-accent);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main {
  transform: scale(1.1);
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .top {
  top: -50px;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .left {
  left: -50px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .right {
  right: -50px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .title {
  opacity: 1;
  transition: all 0.2s ease-out 1.3s;
}

.preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .button-container .button.preschool-theme-card-btn {
  bottom: 16px;
  transform: translateX(-50%);
  transition-delay: 0.8s;
}

@media (max-width: 829px) {
  .boys-school-entrance-page,
  .girls-school-entrance-page,
  .preschool-school-entrance-page {
    --boys-card-door-zoom: 1.16;
    --school-entrance-portal-scale: 1.06;
  }

  .boys-school-entrance-page .boys-school-entrance-main--cards,
  .girls-school-entrance-page .girls-school-entrance-main--cards,
  .preschool-school-entrance-page .preschool-school-entrance-main--cards {
    min-height: 100vh;
    padding-top: 48px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .boys-school-entrance-page .boys-school-carousel-wrap,
  .girls-school-entrance-page .boys-school-carousel-wrap,
  .preschool-school-entrance-page .boys-school-carousel-wrap {
    min-height: 340px;
  }

  .boys-school-entrance-page .boys-school-carousel-container,
  .girls-school-entrance-page .boys-school-carousel-container,
  .preschool-school-entrance-page .boys-school-carousel-container {
    height: 320px;
  }

  .boys-school-entrance-page .boys-school-card,
  .girls-school-entrance-page .boys-school-card,
  .preschool-school-entrance-page .boys-school-card {
    width: 160px;
    height: 240px;
    margin-left: -80px;
    margin-top: -120px;
  }

  .boys-school-entrance-page .boys-school-carousel-nav,
  .girls-school-entrance-page .boys-school-carousel-nav,
  .preschool-school-entrance-page .boys-school-carousel-nav {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .boys-school-entrance-page .boys-school-carousel-nav--prev,
  .girls-school-entrance-page .boys-school-carousel-nav--prev,
  .preschool-school-entrance-page .boys-school-carousel-nav--prev {
    left: -14px;
  }

  .boys-school-entrance-page .boys-school-carousel-nav--next,
  .girls-school-entrance-page .boys-school-carousel-nav--next,
  .preschool-school-entrance-page .boys-school-carousel-nav--next {
    right: -14px;
  }

  /*
   * Детский портал — мобилка: миниатюра десктопа.
   * Масштаб на обёртке .preschool-entrance-scale + дубль через transform: на части WebKit zoom на вложенном flex не даёт эффекта.
   */
  .preschool-school-entrance-page .preschool-entrance-scale {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    box-sizing: border-box;
    /* ~38–56%: читаемо на телефоне, не «микро» (раньше верх 0.14 был кошмаром) */
    transform: scale(clamp(0.38, calc((100vw - 40px) / 540), 0.56));
    transform-origin: top center;
    -webkit-transform: scale(clamp(0.38, calc((100vw - 40px) / 540), 0.56));
    -webkit-transform-origin: top center;
  }

  .preschool-school-entrance-page .preschool-entrance-scale .preschool-entrance-theme-cards {
    flex-shrink: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: clamp(18px, 5.5vw, 42px);
    width: auto;
    max-width: none;
    margin: 0;
  }

  .preschool-school-entrance-page .preschool-entrance-theme-cards .card {
    flex-shrink: 0;
  }

  .preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main {
    transform: scale(1.06);
  }

  .preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .top {
    top: -32px;
  }

  .preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .left {
    left: -26px;
  }

  .preschool-school-entrance-page .preschool-entrance-theme-cards .card:hover .main .right {
    right: -26px;
  }

  /* «AIRoПортал»: ниже чёрного «шпиля» .top; только мобилка, десктоп 74px не трогаем */
  .preschool-school-entrance-page .preschool-entrance-theme-cards .card .main .title {
    top: calc(74px + 4%);
  }

  body.preschool-school-entrance-page {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* --- Список кадетов — отдельная страница school-class-roster.html --- */
html:has(body.school-class-roster-page) {
  height: 100%;
  overflow: hidden;
}

body.school-class-roster-page {
  /* Как в a707a48b: calc(88px + clamp(32px, 7vw, 56px)); + safe-area сверху для iPhone с вырезом */
  --school-roster-main-pt: calc(env(safe-area-inset-top, 0px) + 88px + clamp(32px, 7vw, 56px));
  --school-roster-main-pb: clamp(32px, 6vw, 64px);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overflow-x: hidden;
  /* fallback до отрисовки canvas#space-background (initSpaceBackground в main.js) */
  background-color: #030712;
}

/* main с двумя классами перезаписывал padding у .dashboard-main — терялись 72px под шапку */
body.school-class-roster-page .dashboard-main.school-class-roster-page__main {
  position: relative;
  z-index: 1;
}

.school-class-roster-page .school-class-roster-page__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  /* Шапка фиксирована + запас; высота main = вьюпорт — скролл только внутри панели */
  padding-top: var(--school-roster-main-pt);
  padding-right: clamp(12px, 3vw, 28px);
  padding-bottom: var(--school-roster-main-pb);
  padding-left: clamp(12px, 3vw, 28px);
  box-sizing: border-box;
}

/* Как в CodePen: .content { width: 90vmin; } — не шире родителя */
.school-class-roster-page__panel {
  position: relative;
  z-index: 2;
  width: min(90vmin, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  flex: 1 1 auto;
  min-height: 0;
  background: linear-gradient(165deg, #14141c 0%, #0a0a10 100%);
  border: 1px solid rgba(30, 144, 255, 0.45);
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(30, 144, 255, 0.12),
    0 24px 56px rgba(0, 0, 0, 0.65),
    0 0 48px rgba(30, 144, 255, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(16px, 3vw, 24px) clamp(14px, 2.5vw, 22px) clamp(18px, 3vw, 26px);
  box-sizing: border-box;
}

/* Крестик — SVG внутри flex, геометрически по центру квадрата (без сдвига метрик шрифта) */
.school-class-roster-page__close {
  position: absolute;
  top: clamp(14px, 2.2vw, 22px);
  right: clamp(12px, 2.2vw, 22px);
  left: auto;
  z-index: 10;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 0;
  border: 1px solid rgba(30, 144, 255, 0.5);
  background: rgba(8, 14, 28, 0.95);
  color: #a0e1f3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: box-shadow 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  box-shadow:
    0 0 12px rgba(30, 144, 255, 0.25),
    inset 0 0 10px rgba(30, 144, 255, 0.06);
  -webkit-tap-highlight-color: transparent;
}

.school-class-roster-page__close-icon {
  display: block;
  flex-shrink: 0;
  margin: 0;
  pointer-events: none;
}

.school-class-roster-page__close:hover {
  border-color: rgba(160, 225, 243, 0.85);
  color: #fff;
  box-shadow: 0 0 18px rgba(30, 144, 255, 0.45);
}

.school-class-roster-page__close:active {
  transform: scale(0.94);
}

.school-class-roster-page__close:focus-visible {
  outline: 2px solid rgba(160, 225, 243, 0.9);
  outline-offset: 2px;
}

/* Скролл только здесь: арка фиксирована по высоте вьюпорта, карточки уходят вниз за нижний край рамки */
.school-class-roster-page__scroll {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: none; /* Firefox — без видимой полосы */
  -ms-overflow-style: none; /* старый Edge/IE */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  width: 100%;
  min-width: 0;
  padding: 52px clamp(8px, 2vw, 12px) clamp(20px, 5vw, 40px);
  padding-bottom: max(clamp(20px, 5vw, 40px), env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  box-shadow: inset 0 -28px 36px -28px rgba(5, 5, 10, 0.9);
}

.school-class-roster-page__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.school-roster-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(40vh, 280px);
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.school-roster-loading[hidden] {
  display: none !important;
}

.school-roster-loading__text {
  margin: 0;
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  color: rgba(220, 225, 240, 0.75);
  text-align: center;
  letter-spacing: 0.02em;
}

.school-roster-team {
  list-style: none;
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 2.25em clamp(1rem, 4vw, 2.5em);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Virtual roster: spacer rows preserve scroll height without card DOM */
.school-roster-team--virtualized {
  position: relative;
}

.school-roster-virtual-spacer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  flex-shrink: 0;
}

.school-roster-empty {
  list-style: none;
  align-self: stretch;
  width: 100%;
  max-width: min(90vmin, 36rem);
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-primary);
  font-family: var(--font-main);
  opacity: 0.85;
  box-sizing: border-box;
}

/*
 * CodePen Team Member List (codewithfaraz / CodePen tutorial).
 * Единственная подмена: --yellow → var(--color-accent), --dark → #0f172a.
 */
.school-roster-member {
  --roster-dark: #0f172a;
  --roster-trans: all 0.4s ease 0s;
  --thumb-deg: -86deg;
  /* высота блока аватара (квадрат + padding) — для выравнивания статуса по середине */
  --roster-avatar-box-h: calc(13vmin + 1em);
  margin: 1.65em 0 0.85em;
  padding: 0.55em 0.85em 0.4em;
  background: linear-gradient(
    83deg,
    var(--color-accent) 0 97%,
    transparent calc(97% + 1px) 100%
  );
  position: relative;
  list-style: none;
  display: block;
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  min-height: 0;
  transform: scale(0.85);
  transition: var(--roster-trans);
  border-radius: 0.25em;
  box-sizing: border-box;
}

.school-roster-member--even {
  text-align: right;
  background: linear-gradient(
    -83deg,
    var(--color-accent) 0 97%,
    transparent calc(97% + 1px) 100%
  );
}

.school-roster-member:hover {
  transform: scale(1);
  transition: var(--roster-trans);
  filter: drop-shadow(0 20px 10px rgba(0, 0, 0, 0.5));
}

.school-roster-member::after {
  content: '';
  display: table;
  clear: both;
}

.school-roster-member__thumb {
  width: 13vmin;
  height: 13vmin;
  float: left;
  margin-right: 1.25em;
  background: linear-gradient(
    var(--thumb-deg),
    var(--roster-dark) 0 70%,
    var(--color-accent) 0 100%
  );
  transform: rotate(-4deg);
  transition: var(--roster-trans);
  border-radius: 0;
  overflow: hidden;
  margin-left: -3em;
  padding: 0.5em;
  box-sizing: border-box;
}

.school-roster-member--even .school-roster-member__thumb {
  --thumb-deg: 86deg;
  float: right;
  margin-left: 2em;
  margin-right: -3em;
  transform: rotate(4deg);
}

.school-roster-member__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(1);
  background: var(--roster-dark);
  transition: var(--roster-trans);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.school-roster-member:hover .school-roster-member__thumb {
  padding: 0.1em;
  transition: var(--roster-trans);
  transform: rotate(-1deg);
  --thumb-deg: -89deg;
}

.school-roster-member--even:hover .school-roster-member__thumb {
  transform: rotate(1deg);
  --thumb-deg: 91deg;
}

.school-roster-member:hover .school-roster-member__thumb img {
  filter: none;
  transition: var(--roster-trans);
}

.school-roster-description {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-top: 0.25em;
  padding-bottom: 0.12em;
  /* резерв под absolute-колонку по высоте аватара */
  min-height: calc(var(--roster-avatar-box-h, calc(13vmin + 1em)) + 0.25em);
}

.school-roster-member--even .school-roster-description {
  text-align: right;
}

/* Имя сверху (absolute); статус с уровня ~середины аватара; @user внизу колонки (min-height + margin-top: auto) */
.school-roster-member__title-block {
  position: absolute;
  margin: 0;
  margin-top: -2.55em;
  left: 9vmin;
  right: auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
  width: max-content;
  max-width: calc(100% - 9vmin - 0.5rem);
  min-width: 0;
  min-height: var(--roster-avatar-box-h, calc(13vmin + 1em));
  box-sizing: border-box;
  justify-content: flex-start;
}

.school-roster-member--even .school-roster-member__title-block {
  left: auto;
  right: 9vmin;
  align-items: flex-end;
}

/* Бейдж Energy — по мотивам .co-funder::after из того же туториала */
.school-roster-member__badge {
  font-size: 0.75em;
  position: absolute;
  top: -2.35em;
  right: 2.25em;
  z-index: 4;
  background: var(--color-accent-hover);
  color: var(--roster-dark);
  padding: 0.35em 0.75em 0.5em;
  border-radius: 0;
  font-weight: bold;
  font-family: var(--font-main);
  transform: rotate(3deg);
  max-width: 12em;
  line-height: 1.2;
}

.school-roster-member--even .school-roster-member__badge {
  right: inherit;
  left: 2.25em;
  transform: rotate(-3deg);
}

.school-roster-member__badge-txt {
  margin-left: 0.28em;
}

.school-roster-member .school-roster-description h3.school-roster-member__name {
  background: var(--roster-dark);
  display: inline-block;
  transform: rotate(-2deg);
  position: relative;
  margin: 0;
  padding: 0.5em 0.85em 0.55em;
  color: var(--color-accent);
  border-radius: 0;
  font-size: 1.35em;
  font-family: var(--font-headings);
  font-weight: 300;
  transform-origin: left bottom;
  line-height: 1.15;
}

.school-roster-member--even .school-roster-description h3.school-roster-member__name {
  transform: rotate(2deg);
  transform-origin: right bottom;
  background: var(--roster-dark);
}

.school-roster-member:hover .school-roster-description h3.school-roster-member__name {
  transition: var(--roster-trans);
  transform: rotate(0deg);
  background: var(--roster-dark);
}

.school-roster-member--even:hover .school-roster-description h3.school-roster-member__name {
  transform: rotate(0deg);
  background: var(--roster-dark);
}

/* Статус между именем и @user; верх текста ~по середине аватара (см. margin-top) */
.school-roster-member__status {
  display: block;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1.45;
  /* Короткие статусы сохраняют прежнюю резервную высоту (2 строки); длинный
     90-символьный статус помещается целиком — потолок поднят до 3 строк. */
  min-height: calc(1.45em * 2);
  max-height: calc(1.45em * 3);
  width: 100%;
  /* Статус использует всю доступную ширину колонки (свободное место карточки),
     чтобы длинный текст занимал меньше строк (на десктопе 90 символов → 2 строки). */
  max-width: 100%;
  margin: 0;
  padding: 0;
  word-break: break-word;
  color: #0a0a0a;
  font-family: var(--font-main);
  font-size: 0.95em;
  flex-shrink: 0;
  /* Статус поднят выше (забираем лишний запас сверху): чуть меньше отступ от имени,
     чтобы 90-символьный статус полностью помещался в доступной области. */
  margin-top: clamp(
    0.15em,
    calc(0.5 * var(--roster-avatar-box-h, calc(13vmin + 1em)) - 3.35em),
    5rem
  );
}

.school-roster-member--even .school-roster-member__status {
  text-align: right;
}

/* AIRo Emoji в статусе участника (AIRo Portal / списки) — встроен в строку. */
.school-roster-member__status .cadet-airo-emoji {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  line-height: 0;
  background: transparent;
}

.school-roster-member__status .cadet-airo-emoji__img {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: middle;
  background: transparent;
  pointer-events: none;
}

.school-roster-member__title-block .school-roster-member__username {
  display: inline-block;
  flex-shrink: 0;
  margin: 0;
  margin-top: auto;
  align-self: flex-start;
  background: var(--roster-dark);
  color: var(--color-accent);
  padding: 0.28em 0.55em 0.32em;
  border-radius: 0;
  text-decoration: none;
  transition: var(--roster-trans);
}

.school-roster-member--even .school-roster-member__title-block .school-roster-member__username {
  align-self: flex-end;
}

.school-roster-member__title-block .school-roster-member__username:hover {
  transition: var(--roster-trans);
  color: var(--roster-dark);
  background: var(--color-accent);
  font-weight: bold;
}

/*
 * Тема карточек девочек: только когорта girls (cohort=girls), хук — href кнопки «назад».
 * Меняется ТОЛЬКО основной голубой фон карточки + голубой как цвет текста (AIRoИмя / AIRo ID).
 * Тёмные элементы, рамка аватара и её синяя подсветка остаются без изменений.
 */
body.school-class-roster-page:has(#school-roster-back[href*="girls-school-entrance"]) .school-roster-member {
  background: linear-gradient(
    83deg,
    #c98cff 0 97%,
    transparent calc(97% + 1px) 100%
  );
}

body.school-class-roster-page:has(#school-roster-back[href*="girls-school-entrance"]) .school-roster-member--even {
  background: linear-gradient(
    -83deg,
    #c98cff 0 97%,
    transparent calc(97% + 1px) 100%
  );
}

body.school-class-roster-page:has(#school-roster-back[href*="girls-school-entrance"])
  .school-roster-member
  .school-roster-description
  h3.school-roster-member__name {
  color: #c98cff;
}

body.school-class-roster-page:has(#school-roster-back[href*="girls-school-entrance"])
  .school-roster-member__title-block
  .school-roster-member__username {
  color: #c98cff;
}

body.school-class-roster-page:has(#school-roster-back[href*="girls-school-entrance"])
  .school-roster-member__title-block
  .school-roster-member__username:hover {
  background: #c98cff;
  color: var(--roster-dark);
}

/* Синяя акцентная полоса рамки аватара → розово-фиолетовая (тёмная часть и поворот не меняются) */
body.school-class-roster-page:has(#school-roster-back[href*="girls-school-entrance"]) .school-roster-member__thumb {
  background: linear-gradient(
    var(--thumb-deg),
    var(--roster-dark) 0 70%,
    #c98cff 0 100%
  );
}

/*
 * Мобилка, school-class-roster.html: шапка grid + панель/крестик/скролл.
 * Карточки: тот же макет, что на десктопе (float + absolute), только весь список чуть уменьшен zoom —
 * без пересборки вёрстки. Бейдж: только ⚡.
 */
@media (max-width: 829px) {
  body.school-class-roster-page .dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: unset;
    justify-content: unset;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    min-height: 48px;
  }

  body.school-class-roster-page .dashboard-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    flex: unset;
  }

  body.school-class-roster-page .dashboard-brand-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.school-class-roster-page .dashboard-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    flex-shrink: 0;
    min-width: max-content;
    width: auto;
  }

  body.school-class-roster-page .dashboard-nav-links {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 2px;
  }

  body.school-class-roster-page .dashboard-lang-switch {
    flex-shrink: 0;
    margin-left: 6px;
    padding-left: 6px;
  }

  body.school-class-roster-page {
    --school-roster-main-pt: calc(48px + env(safe-area-inset-top, 0px) + clamp(8px, 2.5vw, 20px));
    --school-roster-main-pb: clamp(18px, 5vw, 44px);
  }

  .school-class-roster-page .school-class-roster-page__main {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .school-class-roster-page__panel {
    padding: clamp(11px, 2.6vw, 17px) clamp(9px, 2vw, 15px) clamp(12px, 2.6vw, 18px);
  }

  .school-class-roster-page__close {
    z-index: 80;
    isolation: isolate;
    top: max(6px, env(safe-area-inset-top, 0px));
    right: max(6px, env(safe-area-inset-right, 0px));
    width: 30px;
    height: 30px;
    background: rgba(6, 12, 22, 0.98);
    box-shadow:
      0 0 10px rgba(30, 144, 255, 0.35),
      0 0 0 1px rgba(8, 14, 28, 0.98),
      inset 0 0 8px rgba(30, 144, 255, 0.08);
  }

  .school-class-roster-page__close .school-class-roster-page__close-icon {
    width: 16px;
    height: 16px;
  }

  .school-class-roster-page__scroll {
    z-index: 1;
    padding-top: clamp(78px, 19vw, 104px);
    padding-left: clamp(4px, 1.5vw, 10px);
    padding-right: clamp(4px, 1.5vw, 10px);
    padding-bottom: max(clamp(18px, 4vw, 36px), env(safe-area-inset-bottom, 0px));
  }

  body.school-class-roster-page .school-roster-team {
    padding: 2.25em clamp(1rem, 4vw, 2.5em);
    box-sizing: border-box;
    zoom: 0.88;
    zoom: clamp(0.78, calc(100vw / 428), 0.92);
  }

  body.school-class-roster-page .school-roster-member__badge-txt {
    display: none;
  }

  body.school-class-roster-page .school-roster-member__badge {
    padding: 0.32em 0.42em 0.38em;
  }

  /* Плашка только с именем: меньше, чтобы типичное имя помещалось в одну строку */
  body.school-class-roster-page .school-roster-member .school-roster-description h3.school-roster-member__name {
    font-size: 1.05em;
    padding: 0.32em 0.52em 0.36em;
    line-height: 1.12;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Мобилка: статус поднят выше (без доп. сдвига вниз), чтобы 90 символов влезали целиком.
     На узком экране ширины не хватает (статус уже во всю колонку), поэтому уплотняем
     межстрочный интервал и разрешаем до 4 строк в ТОЙ ЖЕ вертикальной высоте — так
     предельный статус (90 символов + 5 эмодзи) помещается без роста высоты карточки. */
  body.school-class-roster-page .school-roster-member__status {
    margin-top: clamp(
      0.15em,
      calc(0.5 * var(--roster-avatar-box-h, calc(13vmin + 1em)) - 3.35em),
      5rem
    );
    line-height: 1.2;
    max-height: calc(1.2em * 4);
  }

  /* Эмодзи в статусе чуть меньше ТОЛЬКО в мобильных карточках портала — чтобы при
     уплотнённой строке не распирали её по высоте (текст и его размер не меняем). */
  body.school-class-roster-page .school-roster-member__status .cadet-airo-emoji {
    width: 1.1em;
    height: 1.1em;
  }

  /* Touch scroll: без transition на filter/transform аватаров — иначе мигание при virtual scroll на iOS */
  body.school-class-roster-page .school-roster-member,
  body.school-class-roster-page .school-roster-member__thumb,
  body.school-class-roster-page .school-roster-member__thumb img {
    transition: none;
  }
}

/* Узкий экран: как на десктопе — лёгкая подтяжка аватаров к краю */
@media (max-width: 520px) {
  body.school-class-roster-page .school-roster-member__thumb {
    margin-left: -1.5em;
  }

  body.school-class-roster-page .school-roster-member--even .school-roster-member__thumb {
    margin-right: -1.5em;
  }
}

/* Очень узкая ширина: чуть меньше иконки в шапке только на странице списка — чтобы ряд не вылезал за экран */
@media (max-width: 360px) {
  body.school-class-roster-page .dashboard-nav-link {
    width: 28px;
    min-width: 28px;
    height: 28px;
  }

  body.school-class-roster-page .dashboard-nav-link .dashboard-nav-icon {
    width: 16px;
    height: 16px;
  }

  body.school-class-roster-page .dashboard-lang-switch {
    margin-left: 4px;
    padding-left: 4px;
    gap: 4px;
  }

  body.school-class-roster-page .auth-lang-button {
    padding: 3px 5px;
    font-size: 9px;
  }
}