/* ============================================================
   QUIZZER.TOP — Фирменная дизайн-система «Violet Cosmos»
   Глубокий фиолет · лаванда · фуксия/циан
   Шрифты: Unbounded (заголовки) + Inter (текст)
   ============================================================ */

:root {
  /* Фон и поверхности */
  --bg:          #130B28;
  --bg-deep:     #0D0719;
  --surface:     #1D1338;
  --surface-2:   #181030;
  --surface-3:   #271A4A;
  --line:        #3D2B72;
  --line-soft:   #332460;

  /* Акцент — сияющая лаванда */
  --accent:      #B892FF;
  --accent-hover:#A87DFF;
  --accent-soft: rgba(184, 146, 255, .14);
  --on-accent:   #230F4E;

  /* Дополнительная палитра бренда */
  --violet:      #8E6BFF;
  --fuchsia:     #E26BFF;
  --cyan:        #6FD8FF;
  --coral:       #FF6B8B;
  --amber:       #FFC94D;
  --mint:        #4DEBB8;
  --pink:        #FF7AD9;

  /* ВКонтакте: синий логотипа ВК, а не электрический #0077FF — на глубоком
     фиолете (#130B28) яркий VK-синий читался как «неоновая» заплатка.
     Тон приглушён под тёмную тему, белый текст держит контраст 4.8:1. */
  --vk:          #4C75A3;
  --vk-hover:    #3F6288;

  /* Текст */
  --text:        #F3F0FF;
  --muted:       #A99CCF;
  --muted-2:     #7A6BA6;

  /* Градиенты */
  --grad-accent: linear-gradient(135deg, #D6BCFF, #B892FF 45%, #8E5CFF);
  --grad-cool:   linear-gradient(135deg, var(--accent), var(--cyan));
  --grad-hero:   radial-gradient(1100px 520px at 85% -10%, rgba(142, 96, 255, .20), transparent 60%),
                 radial-gradient(900px 480px at -10% 25%, rgba(226, 107, 255, .11), transparent 60%),
                 radial-gradient(700px 420px at 55% 115%, rgba(111, 216, 255, .09), transparent 60%);
  --grad-text:   linear-gradient(92deg, #D6BCFF, #E26BFF 52%, #6FD8FF);

  /* Геометрия */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Тени */
  --shadow-1: 0 4px 18px rgba(6, 3, 14, .45);
  --shadow-2: 0 16px 44px rgba(6, 3, 14, .6);
  --glow:     0 8px 30px rgba(184, 146, 255, .25);
  --glow-v:   0 8px 30px rgba(142, 96, 255, .30);

  --nav-h: 70px;
  --container: 1200px;

  --font-display: "Unbounded", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Сброс и база ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.nav-locked, html.nav-locked body { overflow: hidden; }

/* Пока открыт мобильный drawer, декоративные анимации страницы останавливаем:
   под фиксированным слоем меню они продолжали бы перерисовываться каждый кадр
   (открытое меню на мобильных сильно грузило процессор). При закрытии меню
   анимации продолжаются с того же места — это только animation-play-state. */
html.nav-locked .ticker-track,
html.nav-locked .btn-pulse,
html.nav-locked .hero-sparkles .spark,
html.nav-locked .cta-banner::before,
html.nav-locked .cta-banner::after,
html.nav-locked .orb,
html.nav-locked .floatie,
html.nav-locked .notfound .astro,
html.nav-locked .notfound h1 .ico,
html.nav-locked .progress-bar::after { animation-play-state: paused !important; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Фоновый декор: аврора + звёздная сетка */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--grad-hero);
  pointer-events: none;
}
.bg-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(169, 156, 207, .13) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--on-accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #3A2B6E; border-radius: 8px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: #4E3A94; }

/* ---------- Горизонтальные «рельсы»: одна строка + тонкая полоса ----------
   .stat-chips (цифры на главной), .cat-grid (категории каталога) и .filter-rail
   (чипсы фильтров) — ленты, которые при нехватке ширины уезжают ВБОК.
   Важно: по правилу CSS «одна ось auto/scroll + вторая visible» вторая ось тоже
   вычисляется как auto, поэтому у таких лент появлялся ЛИШНИЙ ВЕРТИКАЛЬНЫЙ
   скролл — его вызывали даже ховер-подъём карточек и scale иконок (transform
   тоже входит в область прокрутки). Здесь вторая ось явно hidden, а «уехавшие»
   края компенсирует вертикальный padding. Полоса прокрутки — тонкая и в цветах
   сайта (--line, на наведении --accent), а не системная 10px. */
.stat-chips,
.cat-grid,
.filter-rail {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 6px 0 10px;
  scrollbar-width: thin;                            /* Firefox */
  scrollbar-color: rgba(184, 146, 255, .45) transparent;
}
.stat-chips::-webkit-scrollbar,
.cat-grid::-webkit-scrollbar,
.filter-rail::-webkit-scrollbar { width: 6px; height: 6px; }
.stat-chips::-webkit-scrollbar-track,
.cat-grid::-webkit-scrollbar-track,
.filter-rail::-webkit-scrollbar-track { background: transparent; }
.stat-chips::-webkit-scrollbar-thumb,
.cat-grid::-webkit-scrollbar-thumb,
.filter-rail::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 0;
  border-radius: 999px;
}
.stat-chips::-webkit-scrollbar-thumb:hover,
.cat-grid::-webkit-scrollbar-thumb:hover,
.filter-rail::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Иконки */
.ico { flex: none; display: inline-block; vertical-align: middle; }
.ico-inline { display: inline-flex; vertical-align: -0.18em; }

.hidden { display: none !important; }
/* Заголовок/подпись «только для поисковика и скринридера»: визуально скрыто,
   но текст в документе есть (не display:none — иначе это скрытый текст). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Текстовый градиент */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ============================================================
   ПОЛОСА ПРОГРЕССА СКРОЛЛА
   ============================================================ */
/* Дорожка — в цвет линий блоков (--line-soft), полоса — палитра сайта без
   свечения: полоска читается как тонкая рамка карточки, а не как неоновая
   заливка (раньше фон был «градиент текста» + glow на 12px). */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 300;
  background: var(--line-soft);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(92deg, var(--violet), var(--accent) 55%, var(--fuchsia));
  opacity: .85;
  box-shadow: none;
  border-radius: 0 2px 2px 0;
  transition: width .12s linear;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
}
/* Блюр на псевдоэлементе: backdrop-filter на самой шапке сделал бы
   fixed-drawer (потомок шапки) привязанным к шапке, а не к вьюпорту */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(19, 11, 40, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(6, 3, 14, .5); }
.site-header.is-scrolled::before { background: rgba(15, 9, 32, .92); }

.site-header .container {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--nav-h);
  min-width: 0;
}

/* Логотип — фирменная плитка Q */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  user-select: none;
  flex: none;
}
.logo-mark {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 11px;
  background: var(--grad-accent);
  display: grid;
  place-items: center;
  color: var(--on-accent);
  box-shadow: var(--glow);
  transition: transform .3s cubic-bezier(.3, 1.6, .4, 1), box-shadow .3s;
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.logo-text b { color: var(--accent); font-weight: 800; }
.logo:hover { filter: drop-shadow(0 0 14px rgba(184, 146, 255, .3)); }
/* Прежний (пропатченный) css/bootstrap.min.css содержит глобальное правило
   a:focus,a:hover{ color:#23527c; text-decoration:underline }. Оно специфичнее
   обычного a и перебивало вид логотипа: на страницах со старым слоем (контакты,
   политика, соглашение) логотип при наведении и по фокусу становился синим и
   подчёркнутым. Логотип — не текстовая ссылка, поэтому гасим оба эффекта
   точечно (.logo 0,2,0 > a:hover 0,1,1). */
.logo:focus, .logo:hover, .logo:active { color: inherit; text-decoration: none; }
.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* ---------- Десктоп-меню ---------- */
.main-nav { margin-left: auto; min-width: 0; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s;
}
.main-nav a .ico { opacity: .75; transition: transform .25s, opacity .2s; }
.main-nav a:hover { color: var(--text); background: rgba(142, 96, 255, .12); }
.main-nav a:hover .ico { color: var(--accent); opacity: 1; transform: translateY(-1px); }
.main-nav a.is-active {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--glow);
}
.main-nav a.is-active .ico { opacity: 1; color: var(--on-accent); }

/* Заголовок и подвал мобильного drawer'а */
.nav-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.nav-close {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--muted);
  transition: background .2s, color .2s, transform .2s;
}
.nav-close:hover { background: var(--coral); color: #fff; transform: rotate(90deg); }

.nav-extra { display: none; }

/* Бургер */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  transition: background .2s, border-color .2s;
}
.burger:hover { border-color: var(--accent); }
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s cubic-bezier(.3, 1.4, .4, 1), opacity .2s, background .2s;
}
.burger:hover span:nth-child(2) { background: var(--accent); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Оверлей drawer-меню (ниже шапки, чтобы шапка с drawer'ом были поверх).
   backdrop-filter здесь снят намеренно: полноэкранное размытие заставляло
   браузер пересобирать кадр каждый раз, пока меню открыто (на мобильных это
   заметная нагрузка на процессор). Плотность «стекла» даёт альфа-канал. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 5, 18, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s;
}
.nav-overlay.is-show { opacity: 1; pointer-events: auto; }

.header-actions { display: flex; align-items: center; gap: 9px; flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.icon-btn:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: .01em;
  transition: transform .2s cubic-bezier(.3, 1.3, .4, 1), box-shadow .2s, background .2s, border-color .2s, color .2s;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.98); }

.btn-accent {
  background: var(--grad-accent);
  color: var(--on-accent);
  box-shadow: var(--glow);
}
/* Блик, пробегающий по кнопке */
.btn-accent::after {
  content: "";
  position: absolute;
  top: -10px; bottom: -10px;
  left: -80%;
  width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-22deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-accent:hover::after { left: 135%; }
.btn-accent:hover { box-shadow: 0 10px 36px rgba(184, 146, 255, .38); transform: translateY(-2px); }

.btn-dark {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-dark:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px); box-shadow: var(--glow-v); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--line);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.btn-vk { background: var(--vk); color: #fff; }
.btn-vk:hover { background: var(--vk-hover); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(76, 117, 163, .38); }

.btn-success { background: linear-gradient(135deg, #4DEBB8, #17C98A); color: #0A2B1E; }
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(77, 235, 184, .35); }

.btn-danger { background: linear-gradient(135deg, #FF6B8B, #E5486C); color: #fff; }
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255, 107, 139, .35); }

.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 9px 16px; font-size: 12.5px; border-radius: 10px; }
.btn-block { width: 100%; }

/* Кнопка шапки («Профиль» / «Вход») — ровно в высоту бургера (44px), чтобы
   элементы .header-actions стояли одной линией. Вертикальные паддинги при этом
   не нужны — высоту задаёт height, а ширину держит padding-x варианта .btn-sm. */
.header-actions .btn { height: 44px; padding-top: 0; padding-bottom: 0; }
.header-actions .btn.btn-sm { border-radius: var(--r-sm); }

/* Пульсирующая кнопка-CTA на hero */
.btn-pulse { animation: btnPulse 2.6s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(184, 146, 255, .22); }
  50%      { box-shadow: 0 8px 40px rgba(184, 146, 255, .45); }
}

/* ============================================================
   БЕГУЩАЯ СТРОКА (ticker)
   ============================================================ */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(24, 16, 48, .55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  padding: 11px 0;
  animation: tick 26s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.ticker-track .ico { color: var(--accent); opacity: .8; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ============================================================
   HERO (главная)
   ============================================================ */
.hero { padding: 36px 0 8px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 22px;
  align-items: stretch;
}
/* Главная авторизованного: приветствие-«hero» убрано, карточка новостей стоит
   отдельным блоком — одна колонка вместо двух. */
.hero-grid--single { grid-template-columns: minmax(0, 640px); }

.hero-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(430px 210px at 88% -15%, rgba(142, 96, 255, .16), transparent 65%),
    radial-gradient(300px 200px at -8% 112%, rgba(111, 216, 255, .09), transparent 60%);
  pointer-events: none;
}

/* Парящие искры-детали */
.hero-sparkles { position: absolute; inset: 0; pointer-events: none; }
.hero-sparkles .spark {
  position: absolute;
  color: var(--accent);
  opacity: .55;
  animation: twinkle 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.hero-sparkles .spark.v2 { color: var(--violet); }
.hero-sparkles .spark.v3 { color: var(--cyan); }
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: translateY(0) scale(.7) rotate(0deg); }
  50%      { opacity: .9;  transform: translateY(-7px) scale(1.1) rotate(18deg); }
}

.hero-card > * { position: relative; z-index: 1; }

/* Ракета — просто фон карточки (раньше это был <img class="hero-illu">, а
   текст/форма сдвигались вправо на её ширину). Иллюстрация теперь лежит позади
   контента, а .hero-form-wrap занимает всю карточку. Фон статичен: анимировать
   background-position/size на большой площади нельзя — это перерисовка каждый
   кадр (см. «Производительность нового дизайна» в AGENTS.md). */
.hero-card {
  background-image: url("../../images/theme/rocket.svg");
  background-repeat: no-repeat;
  background-position: left -30px center;
  background-size: 220px auto;
}
/* Мягкая подложка под текст поверх ракеты: тот же цвет поверхности, что у
   карточки, слева направо — текст остаётся читаемым, а иллюстрация «дышит»
   справа. Слой лежит под контентом (.hero-card > * — z-index 1). */
.hero-card::before {
  background:
    linear-gradient(90deg, rgba(29, 19, 56, .85) 0, rgba(29, 19, 56, .4) 190px, transparent 300px),
    radial-gradient(430px 210px at 88% -15%, rgba(142, 96, 255, .16), transparent 65%),
    radial-gradient(300px 200px at -8% 112%, rgba(111, 216, 255, .09), transparent 60%);
}

.hero-form-wrap { padding-left: 0; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 33px);
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 8px;
}

.hero-sub { color: var(--muted); font-size: 15px; margin-bottom: 22px; }

/* Форма создания теста — на всю ширину карточки-героя (задачу «текст и форма на
   всю ширину блока» ограничение max-width больше не держит). */
.create-form { display: grid; gap: 16px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.input,
.select {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder { color: var(--muted-2); }
.input:hover, .select:hover { border-color: #4B3888; }
.input:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: #2A1C52;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A99CCF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.divider-or {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.divider-or::before, .divider-or::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

/* Карточка новости */
.news-card {
  background:
    radial-gradient(340px 180px at 90% 110%, rgba(142, 96, 255, .22), transparent 65%),
    var(--surface);
  border: 1px solid rgba(142, 96, 255, .45);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-v);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s, box-shadow .25s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 46px rgba(142, 96, 255, .34); }
.news-card .chip { align-self: flex-start; }
.news-title { font-size: 20px; font-weight: 800; line-height: 1.32; font-family: var(--font-display); font-weight: 700; }
.news-title a { transition: color .2s; }
.news-title a:hover { color: var(--violet); }
.news-date { color: var(--muted-2); font-size: 13px; display: flex; align-items: center; gap: 7px; }
/* Астронавт — тоже фоном карточки (был <img class="news-illu">). Карточка уже
   рисует радиальный градиент в background-шорткате, поэтому здесь задан полный
   список слоёв: картинка + тот же градиент + цвет поверхности. */
.news-card {
  background-image:
    url("../../images/theme/astronaut.svg"),
    radial-gradient(340px 180px at 90% 110%, rgba(142, 96, 255, .22), transparent 65%);
  background-repeat: no-repeat, no-repeat;
  background-position: right -18px bottom -26px, center;
  background-size: 165px auto, auto;
  background-color: var(--surface);
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Чип */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip--accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.chip--violet { color: #E6E0FF; background: rgba(142, 96, 255, .16); border-color: rgba(142, 96, 255, .5); }

/* ============================================================
   ЧИПСЫ-СТАТИСТИКА
   ============================================================ */
/* Лента цифр-статистики: одна строка, при нехватке ширины — горизонтальная
   прокрутка (общие правила ленты — в разделе «Сброс и база»). Ширину чипса
   задаёт .stat-chip ниже. */
.stat-chips {
  gap: 10px;
  margin: 18px 0 6px;
}

.stat-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  /* Ширина чипса: базовая 150px и растёт до заполнения строки; меньше — не
     сжимается, поэтому на узком экране лента уезжает в горизонтальную прокрутку
     (вертикальной нет — см. блок «горизонтальные рельсы»).
     Размеры компактные (задача владельца): чипс «ниже и уже», строки на главной
     встают плотнее. */
  flex: 1 1 150px;
  min-width: 138px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 8px 11px;
  position: relative;
  overflow: hidden;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.stat-chip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--grad-text);
  opacity: 0;
  transition: opacity .25s;
}
.stat-chip:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 146, 255, .4);
  box-shadow: var(--shadow-2);
}
.stat-chip:hover::before { opacity: 1; }
.stat-chip .sc-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-chip .sc-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  white-space: nowrap;
}
.stat-chip .sc-ico {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  color: var(--accent);
  transition: transform .3s cubic-bezier(.3, 1.6, .4, 1), background .3s;
}
.stat-chip:hover .sc-ico { transform: scale(1.12) rotate(-6deg); background: var(--accent-soft); }
.stat-chip .sc-ico.t-violet { color: var(--violet); }
.stat-chip .sc-ico.t-cyan { color: var(--cyan); }
.stat-chip .sc-ico.t-coral { color: var(--coral); }
.stat-chip .sc-ico.t-mint { color: var(--mint); }

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.section { padding: 44px 0 12px; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.section-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.25;
}
.section-title .chev {
  color: var(--accent);
  transform: translateY(-2px);
  transition: transform .25s;
}
.section-title a { transition: color .2s; }
.section-title a:hover { color: var(--accent); }
.section-title a:hover .chev { transform: translate(4px, -2px); }

.section-sub { color: var(--muted); font-size: 15px; margin-top: 7px; max-width: 640px; }

/* ============================================================
   КАРТОЧКИ ТЕСТОВ
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 22px;
}

.test-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.test-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(184, 146, 255, .55), rgba(142, 96, 255, .45) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
}
.test-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.test-card:hover::before { opacity: 1; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.test-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
}
.test-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.test-card:hover .test-cover img { transform: scale(1.07); }

/* Лёгкий градиент поверх обложки */
.test-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 11, 40, .08), transparent 35%, rgba(19, 11, 40, .34) 88%);
  pointer-events: none;
}

/* Корона популярности */
.crown {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(19, 11, 40, .68);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 146, 255, .4);
  color: var(--accent);
  animation: floaty 2.8s ease-in-out infinite;
}

/* Чип автора поверх обложки */
.author-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 9, 32, .8);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: #EDE7FB;
}
.author-chip .ava {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}
.author-chip .role {
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}

.test-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 0; }
.test-title { font-size: 16.5px; font-weight: 800; line-height: 1.35; margin-bottom: 8px; }
.test-title a { transition: color .2s; }
.test-card:hover .test-title a { color: var(--accent); }
.test-desc {
  color: var(--muted);
  font-size: 13.8px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}

.test-stats {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.test-stats .ts { display: inline-flex; align-items: center; gap: 6px; }
.test-stats .ts .ico { color: var(--muted-2); }
.test-stats .ts-rating { color: var(--accent); }
.test-stats .ts-rating .ico { color: var(--accent); }
.test-stats .spacer { margin-left: auto; display: inline-flex; gap: 8px; }
.test-stats .spacer .act {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted-2);
  transition: color .2s, background .2s, transform .2s;
}
.test-stats .spacer .act:hover { color: var(--accent); background: var(--accent-soft); transform: scale(1.12); }
.test-stats .spacer .act.is-liked { color: var(--coral); }
.test-stats .spacer .act.is-liked:hover { background: rgba(255, 107, 139, .12); }

/* ============================================================
   ШАГИ «КАК ЭТО РАБОТАЕТ»
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  position: relative;
}
/* Пунктирная связка между шагами */
.steps::before {
  content: "";
  position: absolute;
  top: 84px;
  left: 12%;
  right: 12%;
  border-top: 2px dashed rgba(142, 96, 255, .35);
  pointer-events: none;
}
.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.step-card:hover { transform: translateY(-6px); border-color: rgba(184, 146, 255, .4); box-shadow: var(--shadow-2); }
.step-num {
  position: absolute;
  right: 14px;
  top: 4px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(142, 96, 255, .4);
  line-height: 1;
}
.step-ico {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .3);
  color: var(--accent);
  margin-bottom: 16px;
  transition: transform .3s cubic-bezier(.3, 1.6, .4, 1);
}
.step-card:hover .step-ico { transform: rotate(-8deg) scale(1.1); }
.step-card:nth-child(2) .step-ico { background: rgba(111, 216, 255, .12); border-color: rgba(111, 216, 255, .35); color: var(--cyan); }
.step-card:nth-child(3) .step-ico { background: rgba(142, 96, 255, .13); border-color: rgba(142, 96, 255, .4); color: var(--violet); }
.step-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: 14px; }

/* ============================================================
   ЛИДЕРБОРДЫ
   ============================================================ */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 22px;
}
.board-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.board-head { padding: 20px 20px 14px; }
.board-head .bh-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 800;
}
.board-head .bh-title .ico { color: var(--accent); flex: none; }
.board-head .bh-sub { color: var(--muted-2); font-size: 13px; margin-top: 6px; }

.board-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  /* Строка — ссылка на профиль участника (главная): убираем подчёркивание и
     цвет ссылки, вид остался прежним, добавился только курсор. */
  color: inherit;
  text-decoration: none;
  transition: background .2s;
}
.board-row:hover { background: rgba(184, 146, 255, .045); }
.board-row:hover .br-name { color: var(--accent); }
.board-row .rank {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  background: var(--surface-3);
  color: var(--muted);
  transition: transform .25s cubic-bezier(.3, 1.6, .4, 1);
}
.board-row:hover .rank { transform: scale(1.14) rotate(-6deg); }
.board-row.r1 .rank { background: var(--grad-accent); color: var(--on-accent); box-shadow: 0 0 18px rgba(184, 146, 255, .45); }
.board-row.r2 .rank { background: #CBBBF0; color: #1D1338; }
.board-row.r3 .rank { background: #E0A96D; color: #2A1A0A; }

.board-row .br-name { font-weight: 700; font-size: 14.5px; }
.board-row .br-score {
  font-family: var(--font-display);
  color: var(--accent);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
}
.board-row .br-label { color: var(--muted-2); font-size: 11.5px; }
.board-row .br-ava {
  margin-left: auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--on-accent);
  background: var(--grad-cool);
  border: 2px solid rgba(142, 96, 255, .5);
  flex: none;
}

/* ============================================================
   SEO-БЛОК / ТЕКСТОВАЯ СТРАНИЦА
   ============================================================ */
.page-body { padding: 34px 0 30px; }

/* ВАЖНО: .page-body стоит ВМЕСТЕ с .container (<main class="page-body container">),
   а объявлено позже него — поэтому его `padding: 34px 0 30px` обнуляло боковые
   поля контейнера, и на мобильных текст (SEO-блок .lead, .section-head, карточки)
   лип к краям экрана. Возвращаем горизонтальные отступы контейнера. */
.container.page-body { padding-left: 20px; padding-right: 20px; }

.article-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 34px clamp(20px, 5vw, 48px);
}
.article-card h1 { font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 29px); font-weight: 700; margin-bottom: 18px; }
.article-card h2 { font-size: 19px; font-weight: 800; margin: 26px 0 10px; color: var(--accent); }
.article-card h3 { font-size: 16px; font-weight: 800; margin: 20px 0 8px; }
.article-card p, .article-card li { color: #CFC4F0; font-size: 15px; margin-bottom: 10px; }
.article-card ul { padding-left: 20px; list-style: disc; }
.article-card ol { padding-left: 20px; list-style: decimal; }
.article-card b { color: var(--text); }
.article-card a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.lead { color: var(--muted); font-size: 15.5px; max-width: 780px; }
.lead + .lead { margin-top: 10px; }

/* ============================================================
   КОНСТРУКТОР ТЕСТА (create)
   ============================================================ */
.quiz-topbar { padding: 26px 0 0; }

.quiz-progress-wrap {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  display: grid;
  gap: 12px;
}
.quiz-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.quiz-progress-label { font-weight: 800; font-size: 15.5px; }
.quiz-progress-label .accent { color: var(--accent); }
.quiz-progress-pct { color: var(--muted); font-size: 13.5px; font-weight: 700; }

.progress {
  height: 12px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--grad-accent);
  box-shadow: 0 0 16px rgba(184, 146, 255, .5);
  transition: width .5s cubic-bezier(.22, .9, .3, 1.15);
  position: relative;
  overflow: hidden;
}
/* Движущиеся полоски на прогрессе */
.progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(35, 15, 78, .16) 0 8px, transparent 8px 16px);
  animation: stripes .9s linear infinite;
}
@keyframes stripes { to { background-position: 22.6px 0; } }

.quiz-stage { padding: 26px 0 40px; }

.question-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  animation: cardIn .4s both;
  position: relative;
  overflow: hidden;
}
.question-card::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(142, 96, 255, .18), transparent 70%);
  pointer-events: none;
}
.question-badge {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .35);
  color: var(--accent);
  margin-bottom: 16px;
  animation: badgeSpinIn .6s cubic-bezier(.3, 1.6, .4, 1) both;
}
@keyframes badgeSpinIn {
  from { transform: scale(.4) rotate(-30deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.question-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 700;
  margin-bottom: 6px;
}
.question-hint { color: var(--muted-2); font-size: 13.5px; margin-bottom: 20px; }

.answers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.answer {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--surface-3);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  animation: cardIn .45s both;
}
.answer:hover { transform: translateY(-4px); border-color: rgba(184, 146, 255, .55); box-shadow: var(--glow); }
.answer .answer-ico {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(320px 170px at 30% 15%, rgba(255, 255, 255, .05), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .02), transparent 55%),
    var(--surface-3);
}
.answer .answer-ico .ico { width: clamp(50px, 6.5vw, 68px); height: clamp(50px, 6.5vw, 68px); stroke-width: 1.5; transition: transform .3s cubic-bezier(.3, 1.6, .4, 1); }
.answer:hover .answer-ico .ico { transform: scale(1.14) rotate(-5deg); }
/* Цветовые темы плиток ответов */
.answer .answer-ico.t-lime { color: var(--accent); }
.answer .answer-ico.t-violet { color: var(--violet); }
.answer .answer-ico.t-cyan { color: var(--cyan); }
.answer .answer-ico.t-coral { color: var(--coral); }
.answer .answer-ico.t-amber { color: var(--amber); }
.answer .answer-ico.t-mint { color: var(--mint); }
.answer .answer-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 16px 12px;
  background: linear-gradient(transparent, rgba(10, 6, 22, .92));
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  pointer-events: none;
}
.answer.is-selected { border-color: var(--accent); box-shadow: var(--glow); }
.answer.is-selected::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23230F4E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.8 4.8L19.4 7'/%3E%3C/svg%3E") center/16px no-repeat;
  border-radius: 50%;
  animation: pop .35s cubic-bezier(.3, 1.6, .4, 1) both;
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.quiz-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ============================================================
   СТРАНИЦА ШАРИНГА
   ============================================================ */
.share-hero { text-align: center; padding: 46px 0 10px; }
.share-badge {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  color: var(--accent);
  animation: pop .55s cubic-bezier(.3, 1.6, .5, 1) both;
}
.share-badge::before, .share-badge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(184, 146, 255, .35);
  animation: ring 2.4s ease-out infinite;
  pointer-events: none;
}
.share-badge::after { animation-delay: 1.2s; }
@keyframes ring {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.75); opacity: 0; }
}
.share-title { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 33px); font-weight: 700; }
.share-sub { color: var(--muted); margin-top: 9px; }

/* Панель ссылки — во всю ширину контента (раньше была 720px и выглядела
   «зауженной» рядом с рейтинговой таблицей на той же странице). */
.share-panel {
  max-width: none;
  margin: 26px auto 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-1);
  animation: cardIn .6s both;
  animation-delay: .15s;
}
.share-link-row { display: flex; gap: 12px; }
.share-link-row .input { flex: 1; font-weight: 700; letter-spacing: .02em; }

.socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.social-btn {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform .2s cubic-bezier(.3, 1.4, .4, 1), box-shadow .2s;
  position: relative;
}
.social-btn:hover { transform: translateY(-5px) scale(1.06); box-shadow: var(--shadow-2); }
.social-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  z-index: 5;
}
.sb-vk { background: var(--vk); }
.sb-tg { background: linear-gradient(135deg, #2AABEE, #1D86C7); }
.sb-wa { background: linear-gradient(135deg, #25D366, #1BA857); }
.sb-vb { background: linear-gradient(135deg, #7360F2, #5A48D6); }
.sb-ok { background: linear-gradient(135deg, #F7931E, #DD7A05); }
.sb-tw { background: linear-gradient(135deg, #474747, #1A1A1A); }
.sb-link { background: linear-gradient(135deg, #5A4899, #3A2B6E); }

/* Конфетти на share-странице */
.confetti {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  pointer-events: none;
  z-index: 400;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  top: -3vh;
  display: block;
  width: 9px;
  height: 14px;
  border-radius: 3px;
  opacity: .95;
  animation: confFall var(--t, 3s) ease-in var(--dl, 0s) both;
}
.confetti i.round { border-radius: 50%; width: 10px; height: 10px; }
@keyframes confFall {
  0%   { transform: translateY(0) rotate(0) translateX(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(var(--rot, 540deg)) translateX(var(--dx, 0)); opacity: 0; }
}

/* ============================================================
   ФОРМЫ / КОНТАКТ
   ============================================================ */
.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 30px;
  display: grid;
  gap: 18px;
}
textarea.input { min-height: 140px; resize: vertical; }

/* ============================================================
   ПРОФИЛЬ
   ============================================================ */
.profile-card {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.profile-card::before {
  content: "";
  position: absolute;
  top: -70px; left: -40px;
  width: 230px; height: 230px;
  background: radial-gradient(circle, rgba(184, 146, 255, .09), transparent 68%);
  pointer-events: none;
}
.profile-ava {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 900;
  color: var(--on-accent);
  background: var(--grad-cool);
  border: 3px solid rgba(142, 96, 255, .55);
  box-shadow: var(--glow-v);
  flex: none;
}
.profile-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-points { color: var(--accent); font-weight: 800; margin-top: 5px; display: inline-flex; align-items: center; gap: 6px; }
.profile-meta { color: var(--muted-2); font-size: 13.5px; margin-top: 4px; }
.profile-actions { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
/* Аватарка профиля: фото внутри кружка (если фото нет, в .profile-ava остаётся
   буква-заглушка из разметки — как в прототипе). */
.profile-card .profile-ava { overflow: hidden; }
.profile-card .profile-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-meta .ico { color: var(--muted-2); }

/* Слова, которыми друзья описали Вас («Какой ты для друзей?», picks):
   цвет плитки приходит из БД, поэтому он задан inline-style в шаблоне. */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.pick {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px 14px;
  border-radius: var(--r-md);
  color: #1D1338;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.3;
  box-shadow: var(--shadow-1);
  transition: transform .22s, box-shadow .22s;
}
.pick:hover { transform: translateY(-3px) rotate(-1.2deg); box-shadow: var(--shadow-2); }

.my-tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }

/* Плитка «создать новый тест» */
.new-test-card {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 26px 22px;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  background: rgba(29, 19, 56, .5);
  transition: border-color .25s, background .25s, transform .25s;
}
.new-test-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-4px); }
/* Внутренний блок ограничен по ширине: плюс, заголовок, подпись и кнопка стоят
   по одной оси — плитка выглядит симметрично и на десктопе, и на телефоне. */
.new-test-inner { display: block; width: 100%; max-width: 250px; text-align: center; }
.new-test-plus {
  width: 76px; height: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .35);
  color: var(--accent);
  margin: 0 auto 16px;
  transition: transform .3s cubic-bezier(.3, 1.6, .4, 1);
}
.new-test-card:hover .new-test-plus { transform: rotate(90deg) scale(1.1); }
.new-test-title { display: block; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.new-test-sub { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-bottom: 18px; }
/* Главная кнопка плитки — на всю её ширину (была мелкая .btn-sm внутри текста) */
.new-test-btn { width: 100%; padding: 14px 24px; font-size: 15px; }

/* ============================================================
   ВСТРЕЧА ДРУЗЕЙ (meet)
   ============================================================ */
.users-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.user-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 22px;
  text-align: center;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.user-card:hover { transform: translateY(-5px); border-color: rgba(184, 146, 255, .4); box-shadow: var(--shadow-2); }
.user-card .u-ava {
  width: 72px; height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  color: var(--on-accent);
  background: var(--grad-cool);
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.3, 1.5, .4, 1);
}
.user-card:hover .u-ava { transform: scale(1.08) rotate(4deg); }
/* Реальная аватарка внутри кружка (страница /meet) */
.user-card .u-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Место в рейтинге — «медаль» в левом верхнем углу карточки (/best, /friends).
   Круглый бейдж цвета места: золото → серебро → бронза (металлы, не оттенки
   бренда — так место узнаётся с первого взгляда). Раньше это был серый
   квадратик в углу, который читался как «случайная наклейка». */
.user-card .u-place {
  position: absolute;
  top: 14px; left: 14px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--line-soft);
  z-index: 2;
}
.user-card.pl-1 .u-place { background: linear-gradient(135deg, #FFE79B, #F7C948); color: #4A3306; border-color: transparent; box-shadow: 0 6px 18px rgba(247, 201, 72, .34); }
.user-card.pl-2 .u-place { background: linear-gradient(135deg, #F1F3FA, #C3C7D6); color: #2C303C; border-color: transparent; box-shadow: 0 6px 18px rgba(195, 199, 214, .30); }
.user-card.pl-3 .u-place { background: linear-gradient(135deg, #E9B287, #C1783F); color: #3A1F0A; border-color: transparent; box-shadow: 0 6px 18px rgba(193, 120, 63, .30); }
/* Зелёной точки «в сети» у аватарки больше нет: данных о присутствии движок не
   отдаёт, а точка читалась как «онлайн». Роль акцента играет кольцо медали
   вокруг аватарки (правила в разделе «ПЬЕДЕСТАЛ» ниже). */
.user-card h3 { font-size: 17px; font-weight: 800; line-height: 1.25; }
.user-card h3 a { transition: color .2s; }
.user-card h3 a:hover { color: var(--accent); }
.user-card .u-meta { color: var(--muted-2); font-size: 12.5px; margin: 5px 0 14px; display: inline-flex; align-items: center; gap: 5px; }
.user-card .u-meta .ico { color: var(--amber); }

/* ============================================================
   ДРУЗЬЯ (рейтинг)
   ============================================================ */
.friends-list { display: grid; gap: 12px; margin-top: 22px; max-width: 860px; }
.friend-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 18px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.friend-row:hover { transform: translateX(6px); border-color: rgba(184, 146, 255, .45); box-shadow: var(--shadow-1); }
.friend-row .rank {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  background: var(--surface-3);
  color: var(--muted);
}
.friend-row.r1 .rank { background: var(--grad-accent); color: var(--on-accent); box-shadow: 0 0 16px rgba(184, 146, 255, .4); }
.friend-row.r2 .rank { background: #CBBBF0; color: #1D1338; }
.friend-row.r3 .rank { background: #E0A96D; color: #2A1A0A; }
/* Строка списка друзей берёт те же классы, что строка доски (.board-row), но в
   прототипе правил под .friend-row не было — имя и баллы выводились системным
   шрифтом. Добавлено для /friends (theme/my_friends.php). */
.friend-row .br-name { font-weight: 700; font-size: 15px; }
.friend-row .br-name a { transition: color .2s; }
.friend-row .br-name a:hover { color: var(--accent); }
.friend-row .br-meta { color: var(--muted-2); font-size: 12.5px; }
.friend-row .br-score {
  font-family: var(--font-display);
  color: var(--accent);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
}
.friend-row .br-label { color: var(--muted-2); font-size: 11.5px; }
.friend-row .br-ava {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--on-accent);
  background: var(--grad-cool);
  border: 2px solid rgba(142, 96, 255, .5);
}
.friend-row .br-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   МОДАЛКИ / ТОСТЫ
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 18, .74);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
  padding: 20px;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-2);
  transform: translateY(18px) scale(.96);
  transition: transform .32s cubic-bezier(.3, 1.4, .4, 1);
}
.modal-overlay.is-open .modal { transform: none; }
.modal h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 18px; text-align: center; }
.modal .modal-actions { display: grid; gap: 10px; }
/* Иконка-«медальон» над заголовком (модалка удаления теста) */
.modal .modal-ico {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.modal .modal-ico--danger { background: rgba(255, 107, 139, .14); color: var(--coral); }
.modal .modal-text { margin: -4px 0 20px; text-align: center; color: var(--muted-2); font-size: 13.5px; line-height: 1.5; }
.modal .modal-text b { color: var(--text); }
.modal .modal-x {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--muted-2);
  transition: color .2s, background .2s, transform .25s;
}
.modal .modal-x:hover { color: var(--coral); background: rgba(255, 107, 139, .1); transform: rotate(90deg); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 90px) scale(.9);
  background: var(--surface-2);
  border: 1px solid rgba(184, 146, 255, .55);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-2), var(--glow);
  z-index: 600;
  opacity: 0;
  transition: transform .38s cubic-bezier(.3, 1.4, .4, 1), opacity .3s;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 480px);
}
.toast .toast-ico {
  width: 26px; height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.toast.is-show { transform: translate(-50%, 0) scale(1); opacity: 1; }

/* ============================================================
   ФИЛЬТРЫ КАТАЛОГА
   ============================================================ */
/* Панель фильтров (/create, /meet): чипсы — лентой в одну строку (.filter-rail,
   при нехватке ширины уезжает вбок), поле поиска — своей строкой во всю ширину.
   Компактнее прежнего: чипы одной высоты с чёткой подписью, поиск не сжимает
   их в «кашу». */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.filter-rail { gap: 8px; padding: 2px 0 8px; }
.filter-rail .filter-chip { flex: 0 0 auto; scroll-snap-align: start; }
.filter-chip {
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.filter-chip:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--glow);
}
.filter-spacer { flex: 1; }

.search-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  min-width: 220px;
  transition: border-color .2s, box-shadow .2s;
}
.search-inline:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-inline input {
  background: none;
  border: 0;
  outline: none;
  width: 100%;
  font-size: 14px;
}
.search-inline .ico { color: var(--muted-2); flex: none; }
/* Широкое поле поиска в фильтр-баре (/meet): раньше это был inline-style. */
.search-inline--wide { min-width: 260px; }

/* Подзаголовок секции меньшим кеглем (внутренние блоки страниц) */
.section-title--sm { font-size: 20px; }
/* Тот же размер и на мобильных (.section-title использует clamp, поэтому нужен
   явный override после него). */

/* Группа действий справа в .section-head (переключатели, кнопки) */
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Переключатель «Хочу друзей / Не хочу друзей» (/meet): пилюля вместо тяжёлой
   кнопки — включено = акцент, выключено = нейтральная поверхность. Ссылка и
   адрес (/meet/public) те же, что были у .btn. */
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s, border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.toggle-pill:hover { transform: translateY(-2px); color: var(--text); }
/* Состояние флага читается цветом: «Хочу друзей» (включён) — зелёный, «Не хочу
   друзей» (выключен) — красный. Раньше включённая пилюля была акцентно-
   фиолетовой, как любая кнопка, и по цвету понять флаг было нельзя. */
.toggle-pill.is-on {
  background: var(--mint);
  border-color: var(--mint);
  color: #06301F;
  box-shadow: 0 10px 26px rgba(77, 235, 184, .26);
}
.toggle-pill.is-on:hover { background: #6FF1C6; border-color: #6FF1C6; color: #06301F; }
.toggle-pill.is-off {
  background: rgba(255, 107, 139, .14);
  border-color: rgba(255, 107, 139, .5);
  color: var(--coral);
}
.toggle-pill.is-off:hover { background: var(--coral); border-color: var(--coral); color: #3A0A16; }

/* Панель-подсказка с действием (/meet, /friends): иконка + текст + кнопка.
   Заменяет прежний «голый» .section-head, где одна строка текста и кнопка. */
.hint-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.hint-bar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-accent);
}
.hint-bar .hb-ico {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .3);
  color: var(--accent);
}
.hint-bar .hb-text { flex: 1 1 260px; min-width: 0; }
.hint-bar .hb-title { font-weight: 800; font-size: 15px; }
.hint-bar .hb-sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.hint-bar .btn { margin-left: auto; }

/* Категории каталога */
/* Категории каталога — лента в одну строку (общие правила «рельсов» — в разделе
   базы): на широком экране 7 карточек делят строку, на узком лента уезжает
   вбок. Тянуть можно пальцем или зажатой мышью — js/theme/main.js. */
.cat-grid {
  gap: 12px;
  margin-top: 22px;
  cursor: grab;
}
.cat-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cat-card {
  flex: 1 1 132px;
  min-width: 128px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 12px;
  text-align: center;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.cat-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-1); }
.cat-card .cat-ico {
  width: 46px; height: 46px;
  margin: 0 auto 9px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  transition: transform .3s cubic-bezier(.3, 1.6, .4, 1), background .3s, border-color .3s;
}
.cat-card:hover .cat-ico { transform: scale(1.14) rotate(-8deg); background: var(--accent-soft); border-color: rgba(184, 146, 255, .4); }
.cat-card .cat-name {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

/* ============================================================
   404
   ============================================================ */
.notfound { text-align: center; padding: 64px 0 60px; position: relative; }
.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(84px, 15vw, 160px);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  letter-spacing: .04em;
  text-shadow: 0 0 70px rgba(184, 146, 255, .3);
}
.notfound-code em {
  font-style: normal;
  -webkit-text-stroke: 2px var(--violet);
}
.notfound h1 { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 25px); font-weight: 700; margin: 16px 0 10px; display: inline-flex; align-items: center; gap: 10px; }
.notfound h1 .ico { color: var(--accent); animation: floaty 3s ease-in-out infinite; }
.notfound p { color: var(--muted); max-width: 470px; margin: 0 auto 26px; }
.notfound .astro { width: 150px; margin: 30px auto 0; opacity: .92; animation: floaty 4.2s ease-in-out infinite; }

/* ============================================================
   CTA-БАННЕР
   ============================================================ */
.cta-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(520px 220px at 12% 15%, rgba(184, 146, 255, .12), transparent 60%),
    radial-gradient(420px 240px at 95% 90%, rgba(142, 96, 255, .2), transparent 62%),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px clamp(20px, 4vw, 50px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 40px 0;
}
.cta-banner::before, .cta-banner::after {
  content: "";
  position: absolute;
  color: var(--accent);
  opacity: .5;
  width: 26px; height: 26px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5c.7 4.1 2.4 5.8 7 6.5-4.6.7-6.3 2.4-7 6.5-.7-4.1-2.4-5.8-7-6.5 4.6-.7 6.3-2.4 7-6.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5c.7 4.1 2.4 5.8 7 6.5-4.6.7-6.3 2.4-7 6.5-.7-4.1-2.4-5.8-7-6.5 4.6-.7 6.3-2.4 7-6.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: twinkle 4s ease-in-out infinite;
}
.cta-banner::before { top: 18px; right: 26%; }
.cta-banner::after { bottom: 22px; left: 38%; width: 16px; height: 16px; animation-delay: 1.6s; }
.cta-banner h2 { font-family: var(--font-display); font-size: clamp(19px, 2.6vw, 27px); font-weight: 700; max-width: 640px; }
.cta-banner p { color: var(--muted); margin-top: 9px; max-width: 560px; }

/* ============================================================
   ФУТЕР
   ============================================================ */
.site-footer {
  margin-top: 60px;
  background: rgba(15, 9, 32, .8);
  border-top: 1px solid var(--line-soft);
  padding: 46px 0 26px;
}
/* Колонок в разметке четыре (о проекте + «Тесты» + «Инфо» + «Создать»), а треков
   было пять — последний пустой, из-за чего подвал смотрелся несимметричным. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.footer-about p { color: var(--muted-2); font-size: 13.5px; margin-top: 14px; max-width: 300px; }
.footer-col h4 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col a {
  color: var(--muted);
  font-size: 14px;
  position: relative;
  display: inline-block;
  transition: color .2s, transform .2s;
}
.footer-col a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transition: transform .25s;
}
.footer-col a:hover { color: var(--accent); transform: translateX(4px); }
.footer-col a:hover::before { transform: translateY(-50%) scale(1); }

.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: 13px;
}
/* Кнопка группы ВКонтакте в подвале — подписанная «пилюля» (значок + текст) в
   стиле сайта, а не безымянный квадрат 40×40: так она и читается, и симметрична
   логотипу/тексту колонки. */
.footer-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.footer-socials .social-btn { width: 40px; height: 40px; border-radius: 11px; }
.footer-socials .btn { padding: 10px 18px; font-size: 13.5px; border-radius: 999px; }

/* ============================================================
   COOKIE-БАННЕР
   ============================================================ */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(19, 11, 40, .96);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--accent);
  padding: 18px 20px;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.3, 1.2, .4, 1);
}
.cookie-bar.is-hidden { transform: translateY(110%); pointer-events: none; }
.cookie-bar p { font-size: 13.5px; color: var(--muted); max-width: 760px; }

/* Наверх */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--grad-accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  box-shadow: var(--glow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: all .3s;
}
.to-top.is-show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(184, 146, 255, .4); }

/* ============================================================
   REVEAL ПРИ СКРОЛЛЕ
   ============================================================ */
/* Stagger-появление сеток и секций (класс qz-anim ставит js) */
.qz-anim .test-card, .qz-anim .step-card, .qz-anim .board-card,
.qz-anim .stat-chip, .qz-anim .cat-card, .qz-anim .user-card,
.qz-anim .friend-row, .qz-anim .reveal {
  opacity: 0;
  transform: translateY(20px) scale(.99);
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}
.qz-anim .is-in { opacity: 1; transform: none; }
/* Карточки внутри лент (.stat-chips, .cat-grid) «выезжают» по ГОРИЗОНТАЛИ, а не
   снизу: вертикальный сдвиг (translateY) расширяет область прокрутки ленты по
   высоте, а вторая ось у ленты скрыта (overflow-y: hidden) — невидимые карточки
   «свисали» под нижним краем и добавляли ленте лишнюю высоту прокрутки.
   Специфичность та же, что у правила выше, поэтому это объявление идёт ПОСЛЕ. */
.qz-anim .stat-chip, .qz-anim .cat-card { transform: translateX(18px) scale(.99); }

/* ============================================================
   МИКРОАНИМАЦИИ И ДЕТАЛИ
   ============================================================ */

/* Рябь на кнопках (span.ripple добавляет js) */
.ripple {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  animation: rippleOut .55s ease-out forwards;
}
@keyframes rippleOut {
  to { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}

/* Прожектор за курсором на карточках (js ставит --mx/--my) */
.hero-card::after, .news-card::after, .test-card::after, .board-card::after,
.user-card::after, .cat-card::after, .form-card::after, .article-card::after,
.profile-card::after, .share-panel::after, .auth-card::after, .question-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 146, 255, .13), transparent 65%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 1;
}
.hero-card:hover::after, .news-card:hover::after, .test-card:hover::after,
.board-card:hover::after, .user-card:hover::after, .cat-card:hover::after,
.form-card:hover::after, .article-card:hover::after, .profile-card:hover::after,
.share-panel:hover::after, .auth-card:hover::after, .question-card:hover::after { opacity: 1; }
.hero-card > *, .test-card > *, .board-card > *, .question-card > *, .auth-card > * { position: relative; z-index: 2; }

/* Уголки-точки на текстовых карточках (деталь) */
.article-card::before, .form-card::before, .board-card::before, .share-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--r-lg) - 6px);
  background-image:
    radial-gradient(circle 2.5px at 0 0, rgba(184, 146, 255, .55) 2.5px, transparent 3px),
    radial-gradient(circle 2.5px at 100% 0, rgba(184, 146, 255, .55) 2.5px, transparent 3px),
    radial-gradient(circle 2.5px at 0 100%, rgba(184, 146, 255, .55) 2.5px, transparent 3px),
    radial-gradient(circle 2.5px at 100% 100%, rgba(184, 146, 255, .55) 2.5px, transparent 3px);
  background-size: 6px 6px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.article-card, .form-card, .board-card, .share-panel { position: relative; }

/* Точки-уголки как отдельный класс (для любых карточек) */
.deco-corners { position: relative; }
.deco-corners::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  background-image:
    radial-gradient(circle 2.5px at 0 0, rgba(184, 146, 255, .55) 2.5px, transparent 3px),
    radial-gradient(circle 2.5px at 100% 0, rgba(226, 107, 255, .45) 2.5px, transparent 3px),
    radial-gradient(circle 2.5px at 0 100%, rgba(226, 107, 255, .45) 2.5px, transparent 3px),
    radial-gradient(circle 2.5px at 100% 100%, rgba(184, 146, 255, .55) 2.5px, transparent 3px);
  background-size: 6px 6px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Живого градиентного свечения рамки у карточки новостей больше нет
   (задача владельца: убрать ::before на главной). Раньше здесь была анимированная
   градиентная рамка (.news-card::before + @keyframes borderFlow) — на авторизованной
   главной карточка новостей стоит отдельным блоком первой, и «бегущая» рамка
   перетягивала на себя внимание. Карточку теперь держат её фон (астронавт +
   радиальный градиент) и обычная граница. Детей поднимаем над «прожектором»
   ::after — у него z-index: 1. */
.news-card > * { position: relative; z-index: 3; }

/* Парящие световые пятна (декор секций) */
.orb {
  position: absolute;
  width: var(--size, 200px);
  height: var(--size, 200px);
  border-radius: 50%;
  background: var(--orb-c, var(--violet));
  filter: blur(52px);
  opacity: .3;
  pointer-events: none;
  animation: orbFloat 11s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(14px, -18px) scale(1.07); }
  66%      { transform: translate(-12px, 10px) scale(.95); }
}

/* Лайк: упругий «поп» + кольцо */
.test-stats .act { position: relative; }
.act.is-liked { animation: likedPop .45s cubic-bezier(.3, 1.6, .4, 1); }
.act.is-liked::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  animation: ring 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes likedPop {
  0%   { transform: scale(.4) rotate(-14deg); }
  55%  { transform: scale(1.4) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Счётчик символов под полем */
.field { position: relative; }
.input-counter {
  position: absolute;
  right: 2px;
  bottom: -17px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted-2);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.input-counter.is-show { opacity: 1; transform: none; }
.input-counter.is-limit { color: var(--coral); }

/* Тряска при ошибке валидации */
.shake { animation: shakeX .5s both; }
@keyframes shakeX {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ---------- Иконка-подсказка слева в полях ---------- */
.field-ico { position: relative; }
.field-ico .ico-lead {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
  transition: color .2s, transform .25s;
}
.field-ico .input { padding-left: 44px; }
.field-ico:focus-within .ico-lead { color: var(--accent); transform: translateY(-50%) scale(1.12); }

/* ---------- Кастомный чекбокс ---------- */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--surface-3);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--on-accent);
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.check .box svg { opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .4, 1); }
.check:hover .box { border-color: var(--accent); }
.check input:checked + .box { background: var(--grad-accent); border-color: transparent; box-shadow: var(--glow); }
.check input:checked + .box svg { opacity: 1; transform: scale(1) rotate(0); }
.check input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   СТРАНИЦА ВХОДА / РЕГИСТРАЦИИ (enter.html)
   ============================================================ */
.auth-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
  padding: 40px 0 10px;
}

.auth-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 32px clamp(22px, 4vw, 40px) 30px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 200px at 90% -12%, rgba(142, 96, 255, .16), transparent 65%),
    radial-gradient(300px 190px at -8% 110%, rgba(226, 107, 255, .08), transparent 60%);
  pointer-events: none;
}

.auth-head { text-align: center; margin-bottom: 22px; }
.auth-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}
.auth-sub { color: var(--muted); font-size: 14px; margin-top: 7px; }

/* ---------- Табы Вход / Регистрация ---------- */
.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 24px;
  isolation: isolate;
}
.auth-tab {
  position: relative;
  z-index: 2;
  padding: 12px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color .3s, transform .2s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab:active { transform: scale(.97); }
.auth-tab.is-active { color: var(--on-accent); }
.auth-tab .ico { transition: transform .3s cubic-bezier(.3, 1.6, .4, 1); }
.auth-tab.is-active .ico { transform: scale(1.12) rotate(-6deg); }
/* Скользящая «пилюля» под активным табом */
.auth-tab-pill {
  position: absolute;
  top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px);
  border-radius: 10px;
  background: var(--grad-accent);
  box-shadow: var(--glow);
  z-index: 1;
  transition: transform .42s cubic-bezier(.3, 1.25, .4, 1);
}
.auth-tabs[data-active="register"] .auth-tab-pill { transform: translateX(100%); }

/* ---------- Панели форм ---------- */
.auth-panel {
  display: none;
  animation: panelIn .45s cubic-bezier(.2, .8, .3, 1) both;
}
.auth-panel.is-on { display: block; }
.auth-panel.is-out { display: none; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
/* Направление появления: регистрация выезжает слева */
.auth-panel[data-panel="register"].is-on { animation-name: panelInR; }
@keyframes panelInR {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

.auth-form { display: grid; gap: 16px; }

/* Пароль + кнопка-глаз */
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 48px; }
.pass-toggle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--muted-2);
  transition: color .2s, background .2s, transform .2s;
}
.pass-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.pass-toggle:active { transform: translateY(-50%) scale(.88); }

/* Индикатор надёжности пароля */
.pass-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 9px;
  align-items: center;
}
.pass-meter i {
  height: 5px;
  border-radius: 4px;
  background: var(--surface-3);
  transition: background .3s, box-shadow .3s;
}
.pass-meter[data-lv="1"] i:nth-child(1) { background: var(--coral); box-shadow: 0 0 8px rgba(255, 107, 139, .5); }
.pass-meter[data-lv="2"] i:nth-child(-n+2) { background: var(--amber); box-shadow: 0 0 8px rgba(255, 201, 77, .45); }
.pass-meter[data-lv="3"] i:nth-child(-n+3) { background: var(--cyan); box-shadow: 0 0 8px rgba(111, 216, 255, .45); }
.pass-meter[data-lv="4"] i { background: var(--mint); box-shadow: 0 0 8px rgba(77, 235, 184, .5); }
.pass-note {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted-2);
  min-height: 15px;
}

/* Нижняя строка форм */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.forgot { font-size: 13px; font-weight: 700; color: var(--accent); position: relative; }
.forgot::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
}
.forgot:hover::after { transform: scaleX(1); transform-origin: left; }

.auth-alt { text-align: center; font-size: 13.5px; color: var(--muted); }
.auth-alt button {
  color: var(--accent);
  font-weight: 800;
  position: relative;
}
.auth-alt button::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
}
.auth-alt button:hover::after { transform: scaleX(1); transform-origin: left; }

/* Поле с ошибкой */
.input.is-error { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 139, .14); }

/* ---------- Правая колонка ---------- */
.auth-side {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(142, 96, 255, .45);
  background:
    radial-gradient(420px 260px at 85% 108%, rgba(226, 107, 255, .22), transparent 62%),
    radial-gradient(360px 240px at 12% -8%, rgba(142, 96, 255, .28), transparent 60%),
    linear-gradient(160deg, #241651, #1A0F3C 60%);
  box-shadow: var(--glow-v);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth-side .chip { align-self: flex-start; }
.auth-side h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
}
.auth-side h2 em { font-style: normal; color: var(--accent); }

.perk-list { display: grid; gap: 14px; margin-top: 4px; }
.perk { display: flex; align-items: flex-start; gap: 13px; }
.perk-ico {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(184, 146, 255, .12);
  border: 1px solid rgba(184, 146, 255, .32);
  color: var(--accent);
  transition: transform .3s cubic-bezier(.3, 1.6, .4, 1), background .3s;
}
.perk:hover .perk-ico { transform: rotate(-8deg) scale(1.1); background: rgba(184, 146, 255, .2); }
.perk:nth-child(2) .perk-ico { color: var(--fuchsia); border-color: rgba(226, 107, 255, .35); background: rgba(226, 107, 255, .1); }
.perk:nth-child(3) .perk-ico { color: var(--cyan); border-color: rgba(111, 216, 255, .35); background: rgba(111, 216, 255, .1); }
.perk:nth-child(4) .perk-ico { color: var(--mint); border-color: rgba(77, 235, 184, .35); background: rgba(77, 235, 184, .1); }
.perk b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.perk span { color: var(--muted); font-size: 13px; line-height: 1.5; }

.auth-illu {
  position: absolute;
  right: -20px; top: -26px;
  width: 150px;
  opacity: .8;
  pointer-events: none;
  animation: floaty 5s ease-in-out infinite;
}
.auth-stats {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.auth-stats .as {
  background: rgba(19, 11, 40, .55);
  border: 1px solid rgba(184, 146, 255, .22);
  border-radius: var(--r-md);
  padding: 12px 10px;
  text-align: center;
  transition: transform .25s, border-color .25s;
}
.auth-stats .as:hover { transform: translateY(-3px); border-color: rgba(184, 146, 255, .5); }
.auth-stats .as b {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  color: var(--accent);
}
.auth-stats .as span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1279px) {
  .main-nav a { padding: 10px 9px; font-size: 11.5px; letter-spacing: .04em; gap: 6px; }
  .main-nav a .ico { display: none; }
  .site-header .container { gap: 12px; }
  .logo-text { font-size: 15px; }
}

/* Drawer справа на планшетах и мобильных */
@media (max-width: 1080px) {
  .burger { display: flex; }

  /* Кнопка «Вход/Профиль» и бургер — всегда у правого края. На десктопе их
     отодвигало меню (.main-nav { margin-left: auto }), но на мобильных меню
     уходит в fixed-слой и места в строке не занимает. */
  .header-actions { margin-left: auto; }

  .main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 210;
    width: min(340px, 88vw);
    margin: 0;
    /* Непрозрачная панель вместо blur(18px): размытие поверх страницы
       пересобиралось каждый кадр, пока drawer открыт. */
    background: #150C2C;
    border-left: 1px solid var(--line);
    box-shadow: -30px 0 90px rgba(6, 3, 14, .6);
    padding: 20px 22px 26px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .42s cubic-bezier(.22, .9, .28, 1), visibility 0s .42s;
  }
  .main-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .42s cubic-bezier(.22, .9, .28, 1);
  }

  .nav-head { display: flex; }
  /* --on-accent (тёмные «чернила») годится только для акцентной заливки: на
     .btn-dark он делал подпись невидимой (тёмное на тёмном — «пустая» кнопка
     «Создать тест» в мобильном меню), а на .btn-vk почти нечитаемой. */
  .nav-extra .btn {
    padding: 13px 20px;
    font-size: 14.5px;
  }
  .nav-extra .btn-accent, .nav-extra .btn-accent:hover { color: var(--on-accent); }
  .nav-extra .btn-dark, .nav-extra .btn-dark:hover { color: var(--text); }
  .nav-extra {
    display: grid;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
  }
  .nav-extra .nav-note { color: var(--muted-2); font-size: 12px; line-height: 1.5; }
  /* Ссылка на группу ВК в ящике — такая же кнопка, как «Мой профиль»/«Создать
     тест» (раньше был мелкий квадрат-иконка без подписи). */
  .nav-socials { display: block; }
  .nav-socials .btn { width: 100%; }
  .nav-socials .social-btn { width: 42px; height: 42px; border-radius: 11px; }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: 5px; }
  .main-nav li {
    opacity: 0;
    transform: translateX(34px);
    transition: opacity .3s, transform .3s;
  }
  .main-nav.is-open li { opacity: 1; transform: none; }
  .main-nav.is-open li:nth-child(1) { transition-delay: .1s; }
  .main-nav.is-open li:nth-child(2) { transition-delay: .16s; }
  .main-nav.is-open li:nth-child(3) { transition-delay: .22s; }
  .main-nav.is-open li:nth-child(4) { transition-delay: .28s; }
  .main-nav.is-open li:nth-child(5) { transition-delay: .34s; }
  .main-nav.is-open li:nth-child(6) { transition-delay: .4s; }

  .main-nav ul a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    font-size: 14px;
    border-radius: var(--r-md);
    background: transparent;
  }
  .main-nav ul a .ico { display: block; width: 21px; height: 21px; }
  .main-nav ul a.is-active { background: var(--accent); }
  .main-nav ul a.is-active .ico { color: var(--on-accent); }

  .hero-grid { grid-template-columns: 1fr; }
  /* Иллюстрации-фоны на мобильных уводим в верхний правый угол карточки, чтобы
     они не лежали под текстом; размер меньше, чтобы не спорить с заголовком. */
  .hero-card { background-position: right -22px top 10px; background-size: 130px auto; }
  .news-card { background-position: right -14px bottom -18px; background-size: 120px auto; }
  .auth-wrap { grid-template-columns: 1fr; padding-top: 26px; }
  .auth-illu { width: 110px; right: -8px; top: -14px; opacity: .55; }
  /* Цифры-статистика и категории каталога — всегда лента в одну строку со
     скроллом вбок (базовые правила «рельсов» в разделе базы), поэтому здесь
     остаётся только число колонок сеток.
     .board-grid--podium (пьедестал /best, /friends) исключён — он держит три
     колонки на любой ширине, см. раздел «Пьедестал одной строкой». */
  .cards-grid, .board-grid:not(.board-grid--podium), .steps, .my-tests, .picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Подвал: две колонки, блок «о проекте» — во всю ширину */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-about p { max-width: 460px; }
  .steps::before { display: none; }
}

@media (max-width: 720px) {
  /* Текст не должен липнуть к краям экрана: .page-body обнулял боковые поля
     .container, здесь отступ чуть меньше десктопного (20px → 16px). */
  .container.page-body { padding-left: 16px; padding-right: 16px; }
  .container { padding: 0 16px; }
  /* Компактнее вертикальные ритмы: секции и «тело» страницы не должны
     раздувать экран телефона пустотами. */
  .section { padding: 32px 0 8px; }
  .page-body { padding: 26px 0 26px; }
  .cards-grid, .board-grid:not(.board-grid--podium), .steps, .my-tests { grid-template-columns: 1fr; gap: 16px; }
  .answers-grid { grid-template-columns: 1fr; }
  .users-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .share-link-row { flex-direction: column; }
  .quiz-actions { flex-direction: column; align-items: stretch; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Кнопка/переключатель в .section-head на мобильных — на всю ширину */
  .section-head > .btn,
  .section-head .head-actions,
  .section-head .head-actions .btn,
  .section-head .toggle-pill,
  .section-head .search-inline--wide { width: 100%; }
  .section-head .head-actions .btn,
  .section-head .toggle-pill { text-align: center; }
  /* Панель фильтров: чипсы остаются лентой в одну строку (скролл вбок — базовые
     «рельсы»), поиск — своей строкой на всю ширину. Растягивать чипы на весь
     экран больше не нужно: они уезжают вбок, а не переносятся столбиком. */
  .filter-bar .search-inline { min-width: 0; width: 100%; }
  .filter-bar .filter-chip { padding: 8px 14px; }
  /* Карточки «Найти друзей» — компактнее: в две колонки на телефоне помещается
     и аватарка, и имя, и подпись с баллами, и кнопка. */
  .user-card { padding: 16px 12px; }
  .user-card .u-ava { width: 60px; height: 60px; font-size: 21px; margin-bottom: 10px; }
  .user-card h3 { font-size: 14.5px; }
  .user-card .u-meta { font-size: 11.5px; margin: 4px 0 12px; }
  .user-card .btn { width: 100%; padding: 10px 12px; font-size: 12.5px; }
  .profile-actions { margin-left: 0; }
  .profile-actions .btn { flex: 1 1 auto; }
  .new-test-card { min-height: 260px; padding: 22px 18px; }
  .header-actions .btn span.btn-text { display: none; }
  .header-actions .btn { padding: 12px 14px; }
  .cta-banner { padding: 30px 22px; }
  /* Кнопки в баннере-CTA (/meet, главная) на телефоне — во всю ширину */
  .cta-banner .btn { width: 100%; }
  .hero-card { padding: 22px; }
  .question-card { padding: 20px; }
  .quiz-progress-wrap { padding: 16px 18px; }
  .auth-card { padding: 24px 18px; }
  .auth-side { padding: 24px 20px; }
  .auth-illu { display: none; }
  .auth-row { flex-direction: column; align-items: flex-start; }
  .orb { display: none; }
  /* Подвал: меньше вертикальных отступов, заголовки колонок ближе к списку */
  .site-footer { margin-top: 44px; padding: 34px 0 22px; }
  .footer-col h4 { margin-bottom: 12px; }
  .footer-bottom { margin-top: 26px; gap: 12px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-about { grid-column: auto; }
  .footer-socials .btn { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  /* .stat-chips здесь колонок не задаёт: это лента в одну строку со скроллом. */
  .logo-text { font-size: 14px; }
  .logo-mark { width: 32px; height: 32px; }
  .to-top { right: 14px; bottom: 14px; }
}

/* Очень узкие экраны: карточки «Найти друзей» — по одной в строке */
@media (max-width: 380px) {
  .users-grid { grid-template-columns: 1fr; }
  .filter-bar .filter-chip { font-size: 11px; letter-spacing: .04em; }
}

/* Доступность: уважаем снижение анимаций */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .qz-anim .test-card, .qz-anim .step-card, .qz-anim .board-card,
  .qz-anim .stat-chip, .qz-anim .cat-card, .qz-anim .user-card,
  .qz-anim .friend-row, .qz-anim .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   СТРАНИЦА СОЗДАНИЯ ТЕСТА (/create) — выбранная категория
   ============================================================ */
.cat-card.is-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-1); }
.cat-card.is-active .cat-ico { background: var(--accent-soft); border-color: rgba(184, 146, 255, .45); color: var(--accent); }

/* ============================================================
   ИЛЛЮСТРАЦИИ ГЕРОЯ И НОВОСТИ — ПРИГЛУШЕНЫ
   ============================================================ */
/* Ракета и астронавт — фон карточек, а не действующие лица: `multiply` с цветом
   поверхности убирает «мультяшную» яркость, и картинка читается как фактура,
   а не как отдельный персонаж. У .news-card слоёв два (картинка + радиальный
   градиент), поэтому и значений blend два. Фон статичен: анимировать
   background-position/size на большой площади нельзя (перерисовка каждый кадр,
   см. AGENTS.md «Производительность нового дизайна»). */
.hero-card {
  background-image: url("../../images/theme/rocket.svg");
  background-repeat: no-repeat;
  background-position: left -30px center;
  background-size: 220px auto;
  background-color: var(--surface);
  background-blend-mode: multiply;
}
.news-card {
  background-image:
    url("../../images/theme/astronaut.svg"),
    radial-gradient(340px 180px at 90% 110%, rgba(142, 96, 255, .22), transparent 65%);
  background-repeat: no-repeat, no-repeat;
  background-position: right -18px bottom -26px, center;
  background-size: 165px auto, auto;
  background-color: var(--surface);
  background-blend-mode: multiply, normal;
}

/* ============================================================
   ВЫБОР ПОЛА — СЕГМЕНТ-КОНТРОЛ (вместо системного select)
   ============================================================ */
/* Разметка: .seg > (input.seg__in[type=radio] + label[for]) ×2.
   Системный select в формах регистрации/входа больше не используется: он
   выпадал из дизайна (нативный вид + стрелка). Радио-кнопки скрыты, но остаются
   в потоке фокуса — клавиатура и скринридеры работают как с обычным списком. */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.seg__in {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.seg label .ico { opacity: .65; transition: opacity .2s, color .2s; }
.seg label:hover { border-color: #4B3888; color: var(--text); }
.seg input:checked + label {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.seg input:checked + label .ico { opacity: 1; color: var(--accent); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   КАРТОЧКА АВТОРИЗАЦИИ (главная для гостей, /register, /login)
   ============================================================ */
/* Один и тот же блок печатает blocks/theme/auth_card.php, поэтому нужные ему
   классы объявлены здесь, а не только в «мосте»: главная для гостей идёт без
   bridge.css ($theme_native = 1). */
.auth-forms { display: block; }
.auth-error {
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--coral);
  border-radius: var(--r-md);
  background: rgba(255, 107, 139, .12);
  color: var(--coral);
  font-size: 14.5px;
  font-weight: 600;
}
.auth-card__sub { margin-bottom: 16px; color: var(--muted); font-size: 14.5px; }
.auth-note { color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.auth-switch { text-align: center; font-size: 13.5px; color: var(--muted); }
.auth-switch a { color: var(--accent); font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }
.auth-alt { margin-top: 18px; }
.auth-switch { margin-top: 14px; }
.auth-note { margin-top: 10px; }
/* «или» между основной формой и кнопкой ВКонтакте (прежний класс .auth-or —
   до этих правок он нигде не был описан, и слово «или» печаталось как обычный
   текст между кнопками) */
.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--muted-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.auth-or::before, .auth-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
/* Пара полей «пароль / пароль ещё раз» — в две колонки, на телефоне в столбик */
.auth-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) {
  .auth-row { grid-template-columns: 1fr; }
}
/* Заголовок-«шапка» карточки авторизации внутри героя главной */
.hero-card .auth-tabs { margin-bottom: 20px; }
.hero-auth { margin-top: 4px; }
/* Поля формы авторизации: у полей без подписи placeholder — единственная
   подсказка, поэтому он чуть светлее обычного. */
.auth-form .input::placeholder { color: var(--muted-2); }

/* ============================================================
   ТОСТ (подсказки) — ВСЕ ТИПЫ В ОДНОМ МЕСТЕ
   ============================================================ */
/* База — правило .toast выше (fixed, bottom: 30px, центр, .is-show показывает).
   Здесь только то, что выбирает вид:
     типы     .toast--success | --error | --warn | --info | --violet | --loading
              | --plain (без иконки) | --dark (тёмная «плашка», без акцента)
     позиция  .toast--top | --center | --tr | --tl | --br | --bl (по умолчанию —
              низ по центру)
     части    .toast-ico (кружок с иконкой) | .toast-title/.toast-text
              | .toast-close (крестик) | .toast-bar (полоса автозакрытия)
   Разметка-пример:
     <div class="toast toast--success is-show" role="status">
       <span class="toast-ico"><svg class="ico" …>…</svg></span>
       <span><span class="toast-title">Готово</span><span class="toast-text">Ссылка скопирована</span></span>
     </div> */
.toast { flex-wrap: wrap; pointer-events: auto; }
.toast-title { display: block; font-weight: 800; font-size: 14px; line-height: 1.3; }
.toast-text { display: block; font-weight: 600; font-size: 13px; color: var(--muted); line-height: 1.35; }
.toast-close {
  margin-left: auto;
  width: 26px; height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted-2);
  transition: background .2s, color .2s;
}
.toast-close:hover { background: var(--surface-3); color: var(--text); }
.toast-bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  border-radius: 0 0 14px 14px;
  background: var(--accent);
  transform-origin: left;
  animation: toastBar 2.6s linear forwards;
}
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Тип → цвет кружка-иконки, рамки и полосы. По умолчанию .toast уже акцентный
   (лаванда) — это «нейтральный/успех» по умолчанию. */
.toast--success { border-color: rgba(77, 235, 184, .55); }
.toast--success .toast-ico { background: var(--mint); color: var(--on-accent); }
.toast--success .toast-bar { background: var(--mint); }
.toast--error, .toast--danger { border-color: rgba(255, 107, 139, .6); }
.toast--error .toast-ico, .toast--danger .toast-ico { background: var(--coral); color: #fff; }
.toast--error .toast-bar, .toast--danger .toast-bar { background: var(--coral); }
.toast--warn, .toast--warning { border-color: rgba(255, 201, 77, .55); }
.toast--warn .toast-ico, .toast--warning .toast-ico { background: var(--amber); color: var(--on-accent); }
.toast--warn .toast-bar, .toast--warning .toast-bar { background: var(--amber); }
.toast--info { border-color: rgba(111, 216, 255, .5); }
.toast--info .toast-ico { background: var(--cyan); color: var(--on-accent); }
.toast--info .toast-bar { background: var(--cyan); }
.toast--violet { border-color: rgba(142, 96, 255, .6); }
.toast--violet .toast-ico { background: var(--violet); color: #fff; }
.toast--violet .toast-bar { background: var(--violet); }
/* Загрузка: кружок нейтральный, иконка вертится (иконку ставит js) */
.toast--loading .toast-ico { background: var(--surface-3); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.toast--loading .toast-ico .ico { animation: toastSpin 1s linear infinite; }
@keyframes toastSpin { to { transform: rotate(360deg); } }
/* Без иконки и без акцента */
.toast--plain .toast-ico { display: none; }
.toast--dark { background: var(--bg-deep); border-color: var(--line); }
.toast--dark .toast-ico { background: var(--surface-3); color: var(--text); }

/* Позиции */
.toast--top { top: 30px; bottom: auto; transform: translate(-50%, -90px) scale(.9); }
.toast--top.is-show { transform: translate(-50%, 0) scale(1); }
.toast--center { top: 50%; bottom: auto; transform: translate(-50%, -50%) scale(.9); }
.toast--center.is-show { transform: translate(-50%, -50%) scale(1); }
.toast--tr, .toast--tl, .toast--br, .toast--bl { max-width: min(92vw, 360px); }
.toast--tr { left: auto; right: 26px; top: 26px; bottom: auto; transform: translateY(-24px) scale(.96); }
.toast--tl { left: 26px; right: auto; top: 26px; bottom: auto; transform: translateY(-24px) scale(.96); }
.toast--br { left: auto; right: 26px; bottom: 26px; transform: translateY(24px) scale(.96); }
.toast--bl { left: 26px; right: auto; bottom: 26px; transform: translateY(24px) scale(.96); }
.toast--tr.is-show, .toast--tl.is-show, .toast--br.is-show, .toast--bl.is-show { transform: none; opacity: 1; }
@media (max-width: 520px) {
  .toast--tr, .toast--tl, .toast--br, .toast--bl { left: 14px; right: 14px; max-width: none; }
  .toast--tr, .toast--tl { top: 14px; }
  .toast--br, .toast--bl { bottom: 84px; }
}

/* ============================================================
   ГОСТЕВЫЕ СТРАНИЦЫ (/friends, /meet, /profile/{uid})
   ============================================================ */
/* Подсказка «что тут будет после входа» — тот же язык, что .hint-bar, но текст
   разбит на абзацы, поэтому без колонок фиксированной ширины. */
.guest-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 14.5px;
}
.guest-note .ico { color: var(--accent); }
.guest-note b { color: var(--text); }
.guest-note--wide { margin-top: 22px; }
/* Блок авторизации на гостевых страницах: одна центрированная карточка
   (используется на /friends и /meet для гостя). */
.guest-auth {
  max-width: 560px;
  margin: 26px auto 0;
  padding: 28px clamp(20px, 4vw, 34px) 26px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.guest-auth h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}
.guest-auth__sub { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 20px; }
/* Пилюля-заголовок «Рейтинг друзей» / «Ваши друзья» на гостевой странице */
.guest-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .35);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* Три «шага» на гостевых страницах повторяют .steps с главной, поэтому своих
   правил не требуют — здесь только отступ от блока авторизации. */
.guest-steps { margin-top: 40px; }




/* ============================================================
   РЕЙТИНГ, РЕЗУЛЬТАТ, ШАРИНГ — доборка компонентов
   (blocks/theme/rating_table.php, blocks/theme/test_card.php,
   engine/theme/ajax/finish.php, engine/theme/show_result.php)
   ============================================================ */

/* «или» между кнопкой ВКонтакте и формами в блоке авторизации
   (blocks/theme/auth_card.php). Те же правила есть в css/theme/bridge.css —
   дублируем здесь, потому что гостевые страницы шаблона (.guest-auth на
   /profile/{uid}, /friends, странице теста) мост не подключают. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  color: var(--muted-2);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Строка рейтинговой таблицы: колонка результата справа и «своя» строка */
.friend-row .br-score-wrap { margin-left: auto; text-align: right; }
.friend-row .br-score a { color: inherit; }
.friend-row .br-score a:hover { color: var(--accent); }
.friend-row .br-score--link {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.friend-row .br-score--muted { color: var(--muted-2); }
.friend-row.is-me {
  border-color: rgba(184, 146, 255, .55);
  box-shadow: 0 0 0 1px rgba(184, 146, 255, .25) inset;
}
.friend-row.is-me .br-name { color: var(--accent); }

/* Пустая рейтинговая таблица («тест пока никто не проходил») */
.rating-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 14.5px;
}
.rating-empty .ico { color: var(--accent); flex: none; }
.rating-empty p { margin: 0; }

/* Блок «ответы к тесту» (blocks/answers_stats*.php) — обёртка вокруг карточек
   вопросов: сами .qq.qa печатает движок, поэтому даём им общую панель. */
.topic-stats {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-top: 22px;
}
.topic-stats .qq.qa {
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}

/* Уменьшенный бейдж-«медаль» на экране результата (прототип: 84 px) */
.share-badge--sm { width: 84px; height: 84px; margin-bottom: 14px; }

/* Подсказка под панелью ссылки на странице «Тест создан!» */
.share-tips {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.share-tips b { color: var(--text); }

/* Кнопка «Instagram» на экране шаринга (остальные .sb-* — выше) */
/* Кнопка «Instagram» на экране шаринга (остальные .sb-* — выше) */
.social-btn.sb-insta { background: linear-gradient(135deg, #E1306C, #C13584); }
/* MAX — национальный мессенджер: синий → фиолетовый, белая «M» */
.social-btn.sb-max { background: linear-gradient(135deg, #2E7BFF, #6C3BFF); }

/* ============================================================
   КАРТОЧКА ТЕСТА: вся карточка кликабельна + бейджи на обложке
   ============================================================ */

/* «Растянутая ссылка»: псевдоэлемент заголовка накрывает всю карточку, поэтому
   клик по обложке, описанию и пустому месту ведёт на тест.
   Два условия:
   1) .test-body не должен быть позиционирован — иначе inset:0 считается от него,
      а не от карточки (карточки получают position:relative;z-index:2 на все
      прямые дети — см. правило «.test-card > *» выше);
   2) наложению нужен z-index 2: столько же у .test-cover и .test-stats, но
      псевдоэлемент идёт после обложки в порядке отрисовки (член .test-body),
      поэтому перекрывает её, а подвал карточки — уже нет.
   Клик по подвалу тоже должен вести на тест, поэтому сама строка .test-stats
   кликов не ловит (pointer-events: none), а кнопки/ссылки внутри — ловят. */
.test-card > .test-body { position: static; }
.test-card .test-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.test-card .test-stats { pointer-events: none; }
.test-card .test-stats .btn,
.test-card .test-stats a,
.test-card .test-stats .act:not(.act--deco) { pointer-events: auto; }
/* Декоративная стрелка («открыть тест») никуда не ведёт — пропускаем клик
   сквозь неё на растянутую ссылку, иначе маленькая зона в правом нижнем углу
   карточки была бы «мёртвой». */
.test-card .test-stats .act--deco { pointer-events: none; }

/* Бейджи поверх обложки: тип теста («с картинками» / «текстовый») и метка
   черновика. Раньше тип печатался текстом в .test-stats внизу карточки. */
.cover-badges {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none;
}
.badge-media {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(15, 9, 32, .84);
  border: 1px solid rgba(184, 146, 255, .38);
  border-radius: 999px;
  color: #EDE7FB;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.badge-media .ico { color: var(--accent); flex: none; }
.badge-media--warn { border-color: rgba(255, 201, 77, .5); color: #FFE6B8; }
.badge-media--warn .ico { color: var(--amber); }
.badge-media--ok { border-color: rgba(77, 235, 184, .5); color: #CFFBEA; }
.badge-media--ok .ico { color: var(--mint); }
/* Метка «не завершён» = прежняя .crown внутри группы бейджей */
.cover-badges .crown {
  position: static;
  top: auto; right: auto;
  width: auto; height: auto;
  padding: 5px 10px;
  border-radius: 999px;
  animation: none;
}

/* ============================================================
   ЭКРАН «НАЧАТЬ ТЕСТ»
   ============================================================ */

.start-card { padding: 34px 28px 30px; }
.start-card .question-title a { color: var(--accent); }
.start-card .question-hint { max-width: 580px; margin: 0 auto 18px; }
/* Что ждёт игрока: автор, число вопросов, тип теста */
.start-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.start-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.start-chip .ico { color: var(--accent); flex: none; }
.start-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.anon-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.anon-toggle .checkbox-custom {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
  border-width: 2px;
  border-color: rgba(184, 146, 255, .6);
  border-radius: 8px;
}
/* Нативный чекбокс прячем, но оставляем в потоке фокуса: клавиатура и
   скринридеры работают как с обычной галочкой. */
.anon-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.anon-toggle:hover {
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 8px 26px rgba(184, 146, 255, .16);
}
/* Включённая анонимность — акцентная заливка (раньше состояние было почти
   незаметно: галка в маленьком сером квадратике) */
.anon-toggle:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.anon-toggle:has(input:checked) .checkbox-custom {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23230F4E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.8 4.8L19.4 7'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color: var(--accent);
}
.start-actions .btn-auth-qq { min-width: 300px; justify-content: center; }
.start-actions .auth-error { margin: 0; }

/* ============================================================
   ПАНЕЛЬ-ПОДСКАЗКА (.hint-bar) — «сырой» вариант разметки
   Иконка прямо в панели (svg.ico из [data-ico]) и текст в <div>.
   ============================================================ */
.hint-bar > .ico {
  width: 42px; height: 42px;
  flex: none;
  padding: 10px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .3);
  color: var(--accent);
}
.hint-bar > .ico ~ div { flex: 1 1 260px; min-width: 0; }
.hint-bar > div > b {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 720px) {
  .start-card { padding: 24px 18px 26px; }
  .start-chips { gap: 8px; }
  .start-chip { padding: 7px 12px; font-size: 12.5px; }
  .start-actions .btn-auth-qq { min-width: 0; width: 100%; }
  .hint-bar > .ico { width: 36px; height: 36px; padding: 8px; }
}

.social-btn.sb-insta { background: linear-gradient(135deg, #E1306C, #C13584); }


/* ============================================================
   РЕЙТИНГ И СПИСКИ ДРУЗЕЙ — ОБЩИЙ ВИД
   ============================================================
   Одинаковый язык для /best («Рейтинг участников»), /friends («Рейтинг Ваших
   друзей») и рейтинговой таблицы под тестом: 1–3 места — «пьедестал» с
   медальным бейджем, остальные — строками. Строка — ССЫЛКА на профиль, поэтому
   кликается целиком (раньше ссылкой было только имя). */
.friends-list { max-width: none; }
.friend-row { color: inherit; text-decoration: none; }
.friend-row:hover .br-name,
.friend-row:hover .br-score { color: var(--accent); }
/* 1–3 места: медальная подложка строки и увеличенный бейдж места */
.friend-row.r1, .friend-row.r2, .friend-row.r3 { border-color: rgba(184, 146, 255, .35); }
.friend-row.r1 { background: linear-gradient(90deg, rgba(184, 146, 255, .12), var(--surface) 45%); }
.friend-row.r2 { background: linear-gradient(90deg, rgba(203, 187, 240, .10), var(--surface) 45%); }
.friend-row.r3 { background: linear-gradient(90deg, rgba(224, 169, 109, .10), var(--surface) 45%); }
.friend-row.r1 .rank, .friend-row.r2 .rank, .friend-row.r3 .rank {
  width: 38px; height: 38px;
  border-radius: 11px;
  font-size: 15px;
}
/* Баллы — «чип» в стиле сайта: число в дисплейном шрифте на подложке, под ним
   подпись. Раньше это были просто две строки текста справа. */
.friend-row .br-score-wrap {
  margin-left: auto;
  flex: none;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.friend-row .br-score {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
}
.friend-row .br-label { color: var(--muted-2); font-size: 11px; letter-spacing: .02em; }
.friend-row.r1 .br-score-wrap { background: var(--accent-soft); border-color: rgba(184, 146, 255, .45); }
.friend-row.r1 .br-score { color: var(--accent-hover); }
.friend-row .br-score a { text-decoration: none; }
@media (max-width: 720px) {
  .friend-row { gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
  .friend-row .br-score-wrap { min-width: 84px; padding: 6px 10px; margin-left: auto; }
  .friend-row .br-score { font-size: 17px; }
  .friends-list { gap: 10px; }
}

/* ============================================================
   ПЬЕДЕСТАЛ (/best, /friends): карточка участника топ-3
   ============================================================
   Карточка — колонка (аватар → имя → подвал), поэтому подвал с баллами и
   кнопкой прижат к низу (margin-top: auto) и у всех трёх карточек стоит на
   одной линии, даже если имена разной длины (в сетке .board-grid карточки
   растянуты до одной высоты). Аватар обведён «медальным» кольцом цвета места
   — вместо прежней зелёной «точки онлайн», которая читалась как ошибка вёрстки
   и обещала данные, которых у движка нет. */
.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 20px;
}
/* Металл места: золото · серебро · бронза — цветом рамки карточки, кольца
   аватарки и подложки баллов (сам бейдж .u-place — в разделе «Встреча друзей»). */
.user-card.pl-1 { background: linear-gradient(180deg, rgba(247, 201, 72, .15), var(--surface) 46%); border-color: rgba(247, 201, 72, .40); }
.user-card.pl-2 { background: linear-gradient(180deg, rgba(195, 199, 214, .12), var(--surface) 46%); border-color: rgba(195, 199, 214, .34); }
.user-card.pl-3 { background: linear-gradient(180deg, rgba(193, 120, 63, .14), var(--surface) 46%); border-color: rgba(193, 120, 63, .38); }
.user-card .u-ava { width: 84px; height: 84px; font-size: 30px; border: 3px solid var(--line-soft); }
.user-card.pl-1 .u-ava { border-color: #F7C948; box-shadow: 0 0 0 6px rgba(247, 201, 72, .16), 0 8px 26px rgba(247, 201, 72, .26); }
.user-card.pl-2 .u-ava { border-color: #C3C7D6; box-shadow: 0 0 0 6px rgba(195, 199, 214, .14); }
.user-card.pl-3 .u-ava { border-color: #C1783F; box-shadow: 0 0 0 6px rgba(193, 120, 63, .16); }
.user-card h3 { margin-top: 14px; }
.user-card .u-meta { margin: 6px 0 0; }
.user-card .u-foot {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}
.user-card .u-foot .u-score {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.user-card .u-foot .u-score b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.user-card .u-foot .u-score span { color: var(--muted-2); font-size: 11px; letter-spacing: .02em; }
.user-card .u-foot .btn { flex: 1 1 54%; min-height: 46px; }
.user-card.pl-1 .u-foot .u-score { background: rgba(247, 201, 72, .14); border-color: rgba(247, 201, 72, .45); }

/* ---------- ПЬЕДЕСТАЛ ОДНОЙ СТРОКОЙ (/best, /friends) ----------
   .board-grid--podium — карточки топ-3 остаются в одну строку ДАЖЕ на телефоне
   и стоят «ступеньками»: 1-е место выше, 2-е чуть ниже, 3-е ещё ниже. В /meet
   тот же .user-card живёт в .users-grid, поэтому общий вид там не меняется.
   Карточка целиком — ссылка на профиль (<a class="user-card"> в разметке), так
   что кликабельны аватарка, имя, баллы и «кнопка» (кнопка — span: ссылка внутри
   ссылки недопустима). */
.board-grid--podium { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; }
/* Карточка = «стенд»: аватар и имя сверху, ступень подиума — внизу. Все три
   стенда стоят на одной линии (align-items: end), а ВЫСОТА СТУПЕНИ зависит от
   места, поэтому аватарки выстраиваются в пьедестал, а не в ровный ряд. */
.board-grid--podium .user-card {
  padding: 0;
  overflow: hidden;
  justify-content: flex-end;
  cursor: pointer;
}
.board-grid--podium .user-card:hover h3 { color: var(--accent); }
/* Только порядок: слева 2-е место, в центре победитель, справа 3-е. */
.board-grid--podium .user-card.pl-1 { order: 2; }
.board-grid--podium .user-card.pl-2 { order: 1; }
.board-grid--podium .user-card.pl-3 { order: 3; }
.board-grid--podium .user-card .u-place { width: 40px; height: 40px; font-size: 15px; top: 12px; left: 12px; }
.board-grid--podium .user-card .u-ava { width: 70px; height: 70px; font-size: 24px; margin: 22px 0 0; }
.board-grid--podium .user-card h3 { font-size: 14.5px; margin: 10px 0 14px; padding: 0 10px; text-align: center; }
/* Ступень подиума — подвал карточки: на ней стоят баллы и «Профиль». */
.board-grid--podium .user-card .u-foot {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  padding: 16px 10px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
}
/* Металл и высота ступени: золото выше серебра, серебро — бронзы. */
.board-grid--podium .user-card.pl-1 .u-foot { padding-top: 96px; background: linear-gradient(180deg, rgba(247, 201, 72, .30), rgba(247, 201, 72, .06)); border-top-color: rgba(247, 201, 72, .50); }
.board-grid--podium .user-card.pl-2 .u-foot { padding-top: 62px; background: linear-gradient(180deg, rgba(195, 199, 214, .26), rgba(195, 199, 214, .06)); border-top-color: rgba(195, 199, 214, .45); }
.board-grid--podium .user-card.pl-3 .u-foot { padding-top: 38px; background: linear-gradient(180deg, rgba(193, 120, 63, .28), rgba(193, 120, 63, .06)); border-top-color: rgba(193, 120, 63, .50); }
.board-grid--podium .user-card .u-foot .u-score { flex: none; width: 100%; flex-direction: row; gap: 6px; padding: 6px 10px; }
.board-grid--podium .user-card .u-foot .u-score b { font-size: 18px; }
.board-grid--podium .user-card .u-foot .btn { flex: none; width: 100%; min-height: 36px; padding: 8px 10px; font-size: 12px; }

/* На телефоне пьедестал компактнее: в сетке /meet карточки стоят по две,
   поэтому крупный аватар и подвал «на пол-карточки» выглядели бы громоздко. */
@media (max-width: 720px) {
  .user-card { padding: 20px 16px 16px; }
  .user-card .u-ava { width: 68px; height: 68px; font-size: 24px; margin-bottom: 8px; }
  .user-card.pl-1 .u-ava { box-shadow: 0 0 0 4px rgba(247, 201, 72, .18); }
  .user-card.pl-2 .u-ava { box-shadow: 0 0 0 4px rgba(195, 199, 214, .14); }
  .user-card.pl-3 .u-ava { box-shadow: 0 0 0 4px rgba(193, 120, 63, .16); }
  .user-card h3 { font-size: 15.5px; margin-top: 10px; }
  .user-card .u-place { width: 32px; height: 32px; font-size: 13.5px; top: 10px; left: 10px; }
  .user-card .u-foot { padding-top: 12px; gap: 8px; }
  .user-card .u-foot .u-score b { font-size: 19px; }
  .user-card .u-foot .btn { min-height: 42px; padding: 10px 12px; font-size: 12.5px; }
  /* Пьедестал: та же строка, только плотнее — три карточки на 360px делят
     ширину, поэтому уменьшены аватар, бейдж, ступеньки и подвал. */
  .board-grid--podium { gap: 8px; }
  .board-grid--podium .user-card { padding: 0; }
  .board-grid--podium .user-card .u-ava { width: 52px; height: 52px; font-size: 18px; margin: 16px 0 0; }
  .board-grid--podium .user-card h3 { font-size: 12.5px; margin: 8px 0 10px; padding: 0 6px; }
  .board-grid--podium .user-card .u-place { width: 26px; height: 26px; font-size: 11.5px; top: 8px; left: 8px; }
  /* Ступени ниже, но порядок тот же: золото > серебро > бронза. */
  .board-grid--podium .user-card.pl-1 .u-foot { padding-top: 62px; }
  .board-grid--podium .user-card.pl-2 .u-foot { padding-top: 40px; }
  .board-grid--podium .user-card.pl-3 .u-foot { padding-top: 24px; }
  .board-grid--podium .user-card .u-foot { padding: 10px 6px; gap: 5px; }
  .board-grid--podium .user-card .u-foot .u-score { padding: 5px 6px; gap: 4px; }
  .board-grid--podium .user-card .u-foot .u-score b { font-size: 15px; }
  .board-grid--podium .user-card .u-foot .u-score span { font-size: 10px; }
  .board-grid--podium .user-card .u-foot .btn { min-height: 30px; padding: 6px; font-size: 11px; gap: 5px; }
}

/* ============================================================
   «КАКОЙ Я ДЛЯ ДРУЗЕЙ» (picks) — АНИМАЦИЯ ВЫБОРА
   ============================================================
   Клик по слову уходит на сервер (js/main.js удаляет #pick_N), поэтому
   «улетающую» плитку рисует клон: js/theme/main.js клонирует .pick перед
   удалением, навешивает .is-added и бейдж +1. Так анимация не зависит от того,
   как быстро движок убрал оригинал. */
.pick { cursor: pointer; position: relative; }
.pick.is-added {
  pointer-events: none;
  animation: pickAway .55s cubic-bezier(.3, .9, .3, 1) forwards;
}
@keyframes pickAway {
  0%   { transform: none; opacity: 1; }
  35%  { transform: translateY(-6px) scale(1.04); opacity: 1; }
  100% { transform: translateY(-26px) scale(.82); opacity: 0; }
}
.pick-plus {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--mint);
  text-shadow: 0 2px 12px rgba(77, 235, 184, .55);
  pointer-events: none;
  animation: pickPlus .9s ease-out forwards;
}
@keyframes pickPlus {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.7); }
  25%  { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
.picks-grid.is-busy .pick:not(.is-added) { opacity: .55; }

/* ============================================================
   ВЫБОР ПОЛА (.seg) — ЦВЕТНЫЕ ВАРИАНТЫ
   ============================================================
   Раньше обе кнопки были одинаковые, отличалась только иконка. Теперь у каждой
   свой оттенок: «Жен» — розовый, «Муж» — циановый (цвет в --seg-tint, поэтому
   состояния checked/hover меняются одним правилом). */
.seg { --seg-tint: 184, 146, 255; }
.seg input:nth-of-type(1) + label { --seg-tint: 255, 122, 217; }
.seg input:nth-of-type(2) + label { --seg-tint: 111, 216, 255; }
.seg label {
  background: rgba(var(--seg-tint), .08);
  border-color: rgba(var(--seg-tint), .32);
  color: var(--text);
}
.seg label .ico { opacity: 1; color: rgb(var(--seg-tint)); }
.seg label:hover {
  border-color: rgba(var(--seg-tint), .65);
  background: rgba(var(--seg-tint), .14);
  transform: translateY(-1px);
}
.seg input:checked + label {
  background: rgba(var(--seg-tint), .22);
  border-color: rgb(var(--seg-tint));
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(var(--seg-tint), .18);
}
.seg input:checked + label .ico { color: rgb(var(--seg-tint)); }


/* ============================================================
   ПОЛЕ С ОШИБКОЙ (фокус ставит inline-скрипт блока авторизации)
   ============================================================ */
.input.is-error, input.is-error {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 139, .2) !important;
}

/* Кнопки-CTA на телефоне — во всю ширину */
@media (max-width: 720px) {
  .text-center > .btn.btn-lg,
  .quiz-actions--center > .btn { width: 100%; }
}

/* Ракета на карточке новостей: иллюстрация — фон карточки, режим multiply на
   тёмном фоне гасил её до еле заметного пятна. Отменяем только для ракеты. */
.news-card { background-blend-mode: normal, normal; }

/* ============================================================
   БЛОГ (/blog, /blog/{slug})
   ============================================================ */
.blog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(184, 146, 255, .45); box-shadow: var(--shadow-2); }
.blog-card .b-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 700;
}
.blog-card .b-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; }
.blog-card:hover .b-title { color: var(--accent); }
.blog-card .b-text { color: var(--muted); font-size: 14px; line-height: 1.6; }
.blog-card .b-more { color: var(--accent); font-weight: 700; font-size: 13.5px; margin-top: auto; }
.blog-post { max-width: 760px; }
.blog-post .bp-date { color: var(--muted-2); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.blog-post .bp-body p { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }
.blog-post .bp-body h2 { font-family: var(--font-display); font-size: 20px; margin: 26px 0 12px; }
.blog-post .bp-body ul { margin: 0 0 16px 20px; color: var(--muted); }
.blog-post .bp-body li { margin-bottom: 8px; line-height: 1.7; }
.blog-post .bp-body b { color: var(--text); }
@media (max-width: 720px) {
  .blog-list { grid-template-columns: 1fr; gap: 16px; }
  .blog-card { padding: 18px; }
}

/* Мини-новости на главной (карточка «новости сайта») */
.news-list { display: grid; gap: 12px; margin-top: 4px; }
.news-item {
  display: block;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
}
.news-item:hover { background: var(--surface-3); border-left-color: var(--fuchsia); transform: translateX(3px); }
.news-item .n-date { color: var(--muted-2); font-size: 11.5px; font-weight: 700; }
.news-item .n-title { font-weight: 800; font-size: 14.5px; margin: 2px 0 3px; }
.news-item:hover .n-title { color: var(--accent); }
.news-item .n-text { color: var(--muted); font-size: 12.8px; line-height: 1.5; }
.news-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent); font-weight: 700; font-size: 13.5px; }

/* ============================================================
   «КАК ОТВЕЧАЛИ ДРУГИЕ» НА СТРАНИЦЕ ОТВЕТОВ (картинки-варианты)
   ============================================================ */
/* Сетка 2×N как при прохождении; каждая плитка — вариант ответа со своей
   полосой «сколько выбрали». Хуки движка (.cssProgress/.progress3/.cssProgress-*)
   те же, поэтому цвета полос приходят из уже описанных правил. */
.answers-tiles .answer_image { margin: 0; }
.answers-tiles .answer_image .cssProgress { width: 100%; margin-top: 6px; padding: 0; }
.answers-tiles .answer_image .progress3 { height: 20px; }
.answers-tiles .answer_image .cssProgress-label {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  margin: 0;
  padding: 1px 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.answers-tiles .answer_image .cssProgress-label + span { display: none; }
.answers-q-mark {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 9, 32, .82);
  border: 1px solid rgba(184, 146, 255, .45);
  color: #EDE7FB;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.answers-q-mark .ico { color: var(--accent); }


/* Ряд кнопок-действий: центрирование классом, а не inline-стилем (native-страницы
   без bridge.css). */
.quiz-actions--center { justify-content: center; }