/* =============================================================
   QUIZZER — «Violet Cosmos»: мост старой разметки (bridge)

   Шаблон сайта переведён на дизайн-систему css/theme/style.css
   (прототип new_theme, Violet Cosmos), но ~60 PHP-шаблонов движка
   (engine/theme/**, engine/blocks/**) остались прежними: они печатают
   классы старого дизайна — .bs, .btn-blue, .b-qa, .qq, .answer,
   .cssProgress*, .b-result, .rating_*, .table, .alert, .photo50/100 —
   и сетку bootstrap 3 (.row/.col-*). В дизайн-системе этого нет, а
   переписывать 60 шаблонов разом нельзя, поэтому между ними и шаблоном
   стоит этот файл.

   Порядок подключения (engine/blocks/css.php):
     css/bootstrap.min.css → css/theme/style.css → css/theme/bridge.css
   Мост идёт последним и перекрывает и bootstrap, и дизайн-систему.

   Происхождение: это порт css/neon/legacy.css (прежний слой «Neon-Pop»).
   Правила старых классов перенесены 1:1 (часть 3), а токены --neon-* /
   --panel / --edge / --ink переопределены ниже значениями Violet Cosmos —
   поэтому перекраска идёт без правки самих правил: то, что было жёлтым
   CTA, становится лавандовым акцентом, «кремовый контур» — фиолетовой
   линией, офсетная тень — мягкой тенью шаблона.

   Части файла:
     1. шкалы и алиасы токенов Neon-Pop → Violet Cosmos
     2. каркас страницы старого шаблона
     3. правила старых классов движка (порт legacy.css)
     4. разметка промежуточного слоя Neon-Pop (hero__*, quiz-card …)
     5. доборка bootstrap-компонентов и утилит
   ============================================================= */

/* ── 1. Шкалы и алиасы токенов ──────────────────────────────────
   Дизайн-система шаблона обходится своими --r-* и сырыми px, а мост и
   старые блоки написаны на шкалах Neon-Pop. Определяем недостающие имена. */
:root {
  --sp-0: 0;
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 900;
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.75;
  --ls-tight: -0.02em; --ls-wide: 0.08em;

  --r-xs: 6px; --r-2xl: 32px; --r-full: 9999px;

  --dur-fast: 160ms; --dur-mid: 320ms; --dur-slow: 640ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-bg: -1; --z-base: 1; --z-sticky: 50;
  --z-header: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400;

  /* Имена, которых нет в css/theme/style.css */
  --font-poster: "Unbounded", "Inter", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", Consolas, monospace;
  --container-max: var(--container);
  --header-h: var(--nav-h);

  /* ── Алиасы Neon-Pop → Violet Cosmos ─────────────────────── */
  --panel: var(--surface);          /* карточка */
  --panel-2: var(--surface-3);      /* поле ввода, hover кнопки */
  --edge: var(--line);              /* контур */
  --bw: 1px;                        /* в шаблоне контур 1px, а не 2.5px */
  --ink: var(--on-accent);          /* текст на акцентной заливке */
  --paper: var(--text);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted-2);
  --border-soft: rgba(184, 146, 255, 0.22);
  --border-strong: rgba(184, 146, 255, 0.5);
  --bg-elev-2: var(--surface-2);
  --bg-elev-3: var(--surface-3);

  /* Акценты: жёлтый CTA Neon-Pop → лаванда, розовый → фуксия, лайм → мята */
  --neon-violet: var(--violet);
  --neon-yellow: var(--accent);
  --neon-pink: var(--fuchsia);
  --neon-cyan: var(--cyan);
  --neon-lime: var(--mint);
  --neon-orange: var(--coral);

  --pop-lavender: var(--violet);
  --pop-cyan: var(--cyan);
  --pop-coral: var(--coral);
  --pop-amber: var(--amber);
  --pop-mint: var(--mint);
  --pop-pink: var(--pink);

  /* Заливки бренда: вместо двух прогонов краски — мягкий фиолетовый перелив */
  --grad-brand: var(--grad-accent);
  --grad-acid: var(--grad-cool);
  --grad-cosmic: var(--grad-accent);
  --grad-sunset: linear-gradient(135deg, var(--amber), var(--coral));

  /* Офсетных «непопаданий краски» в шаблоне нет — тени мягкие */
  --sh-hard-sm: var(--shadow-1);
  --sh-hard: var(--shadow-1);
  --sh-hard-lg: var(--shadow-2);
}

/* ── 2. Каркас страницы старого шаблона ─────────────────────────
   Шапка шаблона (.site-header) — position: sticky, то есть остаётся в
   потоке, и контенту старых страниц не нужен отступ сверху (в Neon-Pop
   шапка была fixed, и мост добавлял .wrapper{padding-top:--header-h} —
   здесь это дало бы лишнюю полосу). */
.wrapper { min-height: 100vh; padding-top: 0; }
main { display: block; padding: var(--sp-6) 0 var(--sp-9); }

/* Старый layout держит контейнер bootstrap 3 (990px) — приводим к шаблону */
.container-fluid { max-width: var(--container); padding-right: 20px; padding-left: 20px; }
main > .container-fluid > .row { margin-right: 0; margin-left: 0; }
main > .container-fluid > .row > [class*="col-"] { padding-right: 0; padding-left: 0; }
main .row > [class*="col-"] { padding-right: var(--sp-3); padding-left: var(--sp-3); }

/* ── Текст: гасим цвета прежнего сайта ─────────────────────────
   css/bootstrap.min.css — не «чистый» bootstrap 3: в него вклеен CSS старого
   сайта (тот же, что лежит отдельным файлом css/style.css). Оттуда приходят
       body,h1,h2 { color:#4c5356; line-height:1.4 }
       p          { font-size:16px; line-height:28px; color:#727e85; font-weight:200 }
   На фиолетовом фоне это давало «выцветшие» заголовки и абзацы: цвет у `body`
   переопределяет css/theme/style.css, а `h1`/`h2` и `p` — никто, потому что
   дизайн-система задаёт им только шрифт и размер (цвет они наследуют от body,
   но в файле выигрывает более позднее правило с той же специфичностью).
   Мост подключён последним, поэтому гасим оба правила здесь, а не в
   css/bootstrap.min.css: тот общий с subпроектами (lang/, quizzes/, popular/),
   где прежняя палитра ещё в ходу. `p{color:inherit}` возвращает абзацам
   наследование — внутри .alert-info они снова берут --ink, а в .b-info p
   по-прежнему перекрываются правилом моста. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); text-wrap: balance; }
p { color: inherit; }
h1 a, h2 a { color: var(--accent); }
h1 a:hover, h2 a:hover { color: var(--fuchsia); }

/* Прежний дизайн держал белые шапку и .nav: в пропатченном
   css/bootstrap.min.css остались header{background-color:#FFF;
   border-bottom:1px solid #e6e6e6;padding:20px 0} и .nav{background:#FFF}.
   Под фиолетовой шапкой первое давало белую полосу во всю ширину, второе —
   светлую панель внутри меню, где ссылки становились нечитаемыми. */
header { background: transparent; border-bottom: 0; padding: 0; }
.nav { background: transparent; }

/* ── 3. Правила старого дизайна (порт css/neon/legacy.css) ──────
   Перенесено 1:1, кроме шапки файла и блока :root с --fs-* (часть 1).
   ────────────────────────────────────────────────────────────── */

:root {
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  72px;
  --fs-5xl:  96px;
}

/* ── Поверхности: .bs (универсальная «карточка» старого дизайна) ── */
.bs {
  background: var(--panel);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--sh-hard);
}
.position-relative.bs { overflow: hidden; margin-bottom: var(--sp-4); }

/* ── Кнопки ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: 10px var(--sp-5);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--sh-hard-sm);
  /* Перенос строки обязателен: в neon-`.btn` стоит white-space: nowrap, а на
     legacy-страницах встречаются длинные подписи («👉 Зарегистрироваться по
     e-mail 👈») — на 390px они расширяли layout до 462px и телефон зумился. */
  white-space: normal;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sh-hard);
  background: var(--panel-2);
  color: var(--text-primary);
  text-decoration: none;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--neon-yellow); outline-offset: 2px; }

.btn.bs { background: var(--panel-2); } /* .bs не должен перебивать кнопку */
.btn-blue {
  background: var(--neon-yellow);
  border-color: var(--edge);
  color: var(--ink);
  font-size: var(--fs-lg) !important;
}
.btn-blue:hover { background: var(--neon-pink); color: #fff; }
/* Кнопки ВКонтакте: заливка — токен --vk (синий логотипа ВК, приглушённый
   под тёмный фиолет), контур — фиолетовая линия шаблона. Было захардкожено
   #07f/#0066e0 — «неоновый» синий, выпадавший из палитры. */
.btn-vk { background: var(--vk); border-color: var(--edge); color: #fff; }
.btn-vk:hover { background: var(--vk-hover); border-color: var(--edge); color: #fff; }
.btn-fb { background: #1877f2; border-color: var(--edge); color: #fff; }
.btn-insta, .insta_bg { background: var(--grad-sunset); border-color: var(--edge); color: var(--ink); }
.btn-transparent { background: transparent; }
.btn-primary, .btn-success { background: var(--neon-cyan); border-color: var(--edge); color: var(--ink); }
.btn-danger { background: var(--neon-pink); border-color: var(--edge); color: #fff; }
/* «Вариант» кнопки важнее нейтрального .btn.bs: у `.btn.bs` специфичность (0,2,0)
   выше, чем у `.btn-blue` (0,1,0), поэтому на старых страницах
   (<div class="btn btn-blue bs">) главный CTA оставался серым. */
.btn.bs.btn-blue {
  background: var(--neon-yellow);
  border-color: var(--edge);
  color: var(--ink);
}
.btn.bs.btn-blue:hover { background: var(--neon-pink); color: #fff; }
.btn.bs.btn-vk { background: var(--vk); border-color: var(--edge); color: #fff; }
.btn.bs.btn-fb { background: #1877f2; border-color: var(--edge); color: #fff; }
.btn.bs.btn-insta, .btn.bs.insta_bg { background: var(--grad-sunset); border-color: var(--edge); color: var(--ink); }
.btn.bs.btn-transparent { background: transparent; }

/* Варианты neon-кнопок на legacy-страницах: голый legacy `.btn` (0,1,0) перебивал
   `.btn--primary` (0,1,0) — главный CTA становился серым вместо жёлтого. */
.btn.btn--primary { background: var(--neon-yellow); border-color: var(--edge); color: var(--ink); }
.btn.btn--primary:hover { background: var(--neon-yellow); color: var(--ink); }
.btn.btn--acid { background: var(--neon-lime); border-color: var(--edge); color: var(--ink); }
.btn.btn--acid:hover { background: var(--neon-lime); color: var(--ink); }
.btn.btn--ghost { background: transparent; border-color: var(--edge); color: var(--text-primary); }
.btn.btn--ghost:hover { background: var(--panel-2); color: var(--text-primary); }
.btn.bs.btn-primary, .btn.bs.btn-success { background: var(--neon-cyan); border-color: var(--edge); color: var(--ink); }
.btn.bs.btn-danger { background: var(--neon-pink); border-color: var(--edge); color: #fff; }
.btn-add {
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--panel-2);
  border: 2px dashed var(--neon-lime);
  border-radius: var(--r-full);
  color: var(--neon-lime);
  font-size: var(--fs-xl);
  line-height: 40px;
}
.btn-circle { border-radius: var(--r-full); }
.btn-social-icon { width: 48px; height: 48px; padding: 0; border-radius: var(--r-full); }
.close { color: var(--text-secondary); opacity: 0.8; text-shadow: none; }
.close:hover, .close:focus { color: var(--neon-pink); opacity: 1; }

/* ── Формы ───────────────────────────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"], textarea, select {
  display: block;
  width: 100%;
  padding: 12px var(--sp-4);
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-muted); }
.form-control:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--edge);
  box-shadow: 0 0 0 3px var(--neon-yellow);
}
input:disabled, textarea:disabled, .form-control[disabled] { opacity: 0.6; cursor: not-allowed; }
label { color: var(--text-secondary); }
input[type="checkbox"], input[type="radio"], .checkbox { accent-color: var(--neon-pink); }
.checkbox-custom, ._checkbox-custom {
  display: inline-block;
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-xs);
}
._q_textarea, ._a_textarea {
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  padding: var(--sp-3);
}
._q_textarea:focus, ._a_textarea:focus {
  outline: none !important;
  border-color: var(--edge) !important;
  box-shadow: 0 0 0 3px var(--neon-yellow) !important;
}
/* Карточка вопроса редактора «свои вопросы и ответы» (creating_test2.php) и
   кнопки удаления: блоки, добавленные кнопкой «+», js/main.js вставляет тем же
   набором классов, поэтому стилизуем по классам, а не по конкретной разметке. */
._qa_block {
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
/* Строка варианта ответа: галочка «правильный» / поле / крестик */
._answers_list {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
._answers_list .display_table { display: block; }
._qa_del, ._answer_del {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin: 0 auto;
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  background: var(--panel-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
._qa_del i, ._answer_del i { color: var(--text-muted); }
._qa_del:hover, ._answer_del:hover { background: var(--neon-pink); }
._qa_del:hover i, ._answer_del:hover i { color: #fff; }
._qa_del .ico, ._answer_del .ico { color: var(--text-muted); }
._qa_del:hover .ico, ._answer_del:hover .ico { color: #fff; }
._quistion_n, ._question { color: var(--text-secondary); }
.a-list-item-answer, .a-list-item-del, .display_table { vertical-align: middle; }

/* ── Предупреждения / ошибки ─────────────────────────────── */
.alert {
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-hard-sm);
  color: var(--text-primary);
}
.alert-info { background: var(--neon-cyan); color: var(--ink); }
.alert-success { background: var(--neon-lime); color: var(--ink); }
.alert-warning { background: var(--neon-yellow); color: var(--ink); }
.alert-danger, .alert-error { background: var(--neon-pink); color: #fff; }
/* bootstrap-конвенция: .alert-link — это ссылка ВНУТРИ .alert, а не сам блок.
   См. комментарий у одноимённого правила в нижнем слое (Violet Cosmos). */
a.alert-link { color: var(--neon-cyan); font-weight: var(--fw-semi); }
.auth-error, .error { color: var(--neon-pink); font-weight: var(--fw-semi); }

/* ── Таблицы ─────────────────────────────────────────────── */
.table { width: 100%; margin-bottom: var(--sp-5); color: var(--text-primary); }
.table > thead > tr > th {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw) solid var(--edge);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-align: left;
}
.table > tbody > tr > td, .table > tbody > tr > th {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-soft);
  vertical-align: middle;
}
.table > tbody > tr:hover > td { background: var(--panel-2); }
.table-responsive { width: 100%; overflow-x: auto; }

/* ── Каталог тестов (.test / .author_qq / .mask) ─────────── */
.test {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: var(--sp-5);
  background-color: var(--bg-elev-2);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--sh-hard-sm);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.test::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 18, 0.15) 0%, rgba(11, 10, 18, 0.85) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.test > span { position: relative; z-index: 2; }
.author_qq { z-index: 2; }
.mask { background: rgba(7, 6, 13, 0.35); border-radius: inherit; z-index: 1; }
.position-relative.bs:hover .test { transform: scale(1.02); }
.test { transition: transform var(--dur-mid) var(--ease-out); }

/* ── Прохождение теста (.b-qa / .qq / .answer) ───────────── */
.b-qa {
  position: relative;
  margin: var(--sp-5) 0;
  padding: var(--sp-6);
  background: var(--panel);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--sh-hard);
}
.topic {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  /* Движок печатает блоки вопросов (.qq у прохождения/статистики, .qa у
     редактора) внутри .topic. Разрешаем перенос: на странице статистики
     видимы сразу все вопросы, и без wrap они сжимались в одну строку. */
  flex-wrap: wrap;
}
/* Вопрос занимает всю строку .topic — иначе грид-сетка вариантов внутри .qq
   считается по max-content и вылезает за контейнер. Редактор (.qa) не задет. */
.topic > .qq { flex: 1 1 100%; min-width: 0; }
.selected-now { color: var(--neon-lime); font-weight: var(--fw-bold); }
.selected-min { color: var(--text-secondary); }
.b-selected-min { color: var(--text-muted); }

.qq { position: relative; }
.question {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
@media (min-width: 768px) {
  /* Вопрос и варианты — сетка 2×N как в new_theme/5 (.answers-grid): «шапка»
     вопроса, сообщение об ошибке, картинка и кнопка «+» тянутся на обе
     колонки, варианты встают по два. Касается только .qq — редактор теста
     печатает блоки без этого класса (creating_test.php: class="qa") и
     остаётся одноколоночным. */
  .qq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
  .qq > .question,
  .qq > .error,
  .qq > .test-image,
  .qq > .btn-add { grid-column: 1 / -1; }
  /* Зазор в сетке даёт gap, а не margin шапки вопроса */
  .qq > .question { margin-bottom: 0; }
  .qq > .answer,
  .qq > .answer + .answer { margin-top: 0; } /* зазор даёт gap сетки */
}

/* Ответы — отдельные «наклейки» с зазором: список читается как строки плаката */
.answer {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-2);
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-hard-sm);
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.answer:first-of-type { border-radius: var(--r-sm); }
.answer + .answer { margin-top: var(--sp-2); }
.answer:last-of-type { border-radius: var(--r-sm); }
.answer:hover {
  background: var(--neon-yellow);
  border-color: var(--edge);
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--sh-hard);
  z-index: 2;
}
.answer.selected, .answer.is-correct {
  background: var(--pop-mint);
  border-color: var(--edge);
  color: var(--ink);
}
/* Отмеченный вариант в прохождении помечался глифом «✓ » — его начертание
   зависит от шрифта (на Windows подменяется эмодзи-шрифтом и съезжает с базовой
   линии). Теперь это круглый бейдж с SVG-галочкой, как в остальной системе. */
.answer.selected .text::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: var(--sp-2);
  vertical-align: -3px;
  border-radius: var(--r-full);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234DEBB8' 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/11px no-repeat;
}
.answer.is-wrong { background: var(--pop-coral); border-color: var(--edge); color: var(--ink); }

/* ── Плитки-картинки (.answer_image) ─────────────────────────
   Печатают: редактор теста «с картинками» и «правда/ложь» (theme/creating_test_image.php
   → .answer.answer_image.select_image, theme/creating_test_true_false.php → .select_tf)
   и прохождение этих же тестов (theme/pass_test_image.php → .answer_image.ckeck_image,
   theme/pass_test_tf.php → .ckeck_tf/.ckech_tf).

   Плитка = картинка в тонкой рамке 1px (единственный контур: раньше картинка
   была width:100% + max-height:240px + object-fit:cover → вертикальные кадры
   обрезались, а вокруг картинки стояла ещё одна рамка внутри рамки плитки —
   двойной контур читался как «толстый бордер»). Сама картинка масштабируется
   по ширине плитки в СВОИХ пропорциях (height: auto, object-fit: contain),
   а состояние выбора показывает РАМКА плитки: мята — выбрано/верно, коралл —
   ошибка, лаванда — наведение. Это заметно лучше читается, чем обводка вокруг
   изображения (её легко спутать с рамкой самой картинки на фото).
   Подпись варианта (`texts` в шаблоне теста) встаёт поверх низа картинки —
   .answer-cap, см. блок ниже. */
.answer_image {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px;
  text-align: center;
  cursor: pointer;
  background: var(--panel-2);
  border: var(--bw) solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-hard-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Наведение читается не хуже выбора: лавандовая рамка + мягкая подложка и
   свечение (раньше hover показывал только тонкую рамку и был почти незаметен). */
.answer_image:hover {
  transform: translateY(-3px);
  border-color: var(--pop-lavender);
  background: rgba(184, 146, 255, .12);
  box-shadow: 0 0 0 3px rgba(184, 146, 255, .22), var(--sh-hard);
}
.answer_image:hover img { transform: scale(1.02); }
.answer_image img {
  display: block;
  width: 100%;
  height: auto;          /* реальные пропорции, без обрезки */
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: calc(var(--r-md) - 6px);
  background: var(--panel-2);
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* «Правда / ложь»: картинка-иконка (а не кадр) + подпись под ней */
.answer_image.select_tf img,
.answer_image.ckeck_tf img,
.answer_image.ckech_tf img {
  width: auto;
  max-height: 96px;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}
.answer_image.select_tf::after,
.answer_image.ckeck_tf::after,
.answer_image.ckech_tf::after {
  content: 'Ложь';
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.answer_image.select_tf[data-answer="1"]::after,
.answer_image.ckeck_tf[data-answer="1"]::after,
.answer_image.ckech_tf[data-answer="1"]::after { content: 'Правда'; }
/* «Нравится / не нравится» (theme/creating_test_ld.php → .select_ld,
   theme/pass_test_ld.php → .ckeck_ld). Плитки те же, что у «правда/ложь», но
   подписи свои, и правила стоят НИЖЕ правил .select_tf/.ckeck_tf — при равной
   специфичности последнее правило и выигрывает («Ложь» → «Не нравится»).
   В конструкторе плитка несёт ОБА класса: .select_tf рабочий (его слушает
   js/main.js и шлёт выбор в /ajax/save/tf; движковый save_ld.php устроен точно
   так же, а селектора .select_ld в js/main.js нет), .select_ld — только подпись. */
.answer_image.select_ld img,
.answer_image.ckeck_ld img {
  width: auto;
  max-height: 96px;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}
.answer_image.select_ld::after,
.answer_image.ckeck_ld::after {
  content: 'Не нравится';
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.answer_image.select_ld[data-answer="1"]::after,
.answer_image.ckeck_ld[data-answer="1"]::after { content: 'Нравится'; }
/* Полосы распределения ответов прижаты к низу плитки */
.answer_image > .cssProgress { width: 100%; margin-top: auto; }
/* Состояния (классы ставит js/main.js: .select_image → .correct на выбранной
   плитке конструктора, .ckeck_image → .correct/.incorrect в прохождении):
   красим РАМКУ плитки, картинка остаётся собой. */
.answer_image.selected,
.answer_image.correct {
  border-color: var(--pop-mint);
  box-shadow: 0 0 0 3px rgba(77, 235, 184, .18);
}
.answer_image.incorrect {
  border-color: var(--pop-coral);
  box-shadow: 0 0 0 3px rgba(255, 107, 139, .18);
}
/* ── Подпись варианта-картинки (.answer-cap) ─────────────────
   Шаблон теста может задать текст к картинке:
       $test[$id][$ii]['texts'] = array('1.jpg' => 'Короткий текст', …);
   Печатает его theme_img_caption() (engine/blocks/theme/img_caption.php) —
   текст встаёт поверх нижнего края картинки на затемнении. Старые тесты поля
   `texts` не знают: блока просто нет, разметка и вид плитки не меняются. */
.answer_image .answer-cap {
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: auto;
  margin: -46px 6px 6px;
  padding: 26px 12px 8px;
  background: linear-gradient(180deg, rgba(19, 11, 40, 0) 0%, rgba(19, 11, 40, .55) 42%, rgba(19, 11, 40, .88) 100%);
  border-radius: 0 0 calc(var(--r-md) - 7px) calc(var(--r-md) - 7px);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}
/* У плиток «правда/ложь» подпись печатает ::after — .answer-cap там не нужен */
.answer_image.select_tf .answer-cap,
.answer_image.ckeck_tf .answer-cap,
.answer_image.ckech_tf .answer-cap { display: none; }

/* ── Редактор теста: карточка вопроса (.qa) ──────────────────
   Разметку печатает движок (theme/creating_test.php | _image | _true_false | 2.php),
   но блоки, добавленные кнопкой «+», js/main.js вставляет своей строкой HTML —
   без класса .question-card. Поэтому карточку рисуем по .b-qa .qa (одновременно
   для статичной разметки и для добавленных вопросов). */
.b-qa .qa {
  position: relative;
  margin-bottom: var(--sp-4);
  padding: var(--sp-5);
  background: var(--panel);
  border: 2px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.b-qa .qa > .question { margin-bottom: var(--sp-4); }
/* Редактор печатает карточки (.qa) внутри .topic — строки-вопросы прохождения
   (.qq) там не нужны: карточка занимает всю ширину, как .qq. */
.b-qa .topic > .qa { flex: 1 1 100%; min-width: 0; }
/* Кнопки вопроса («Пропустить» / «Изменить ответы») — прямые дети .qa (так их
   ищет js/main.js), поэтому отступы задаёт CSS, а не обёртка. */
.b-qa .qa > .btn-skip,
.b-qa .qa > .btn-edit { margin: 0 var(--sp-2) var(--sp-3) 0; }
/* Вариант ответа в конструкторе. ВНИМАНИЕ: шаблон печатает .select у ВСЕХ
   вариантов (движок по нему ловит клик), поэтому .select — нейтральный вид, а
   «правильный ответ» помечает класс .correct (см. блок «Конструктор теста» в
   конце файла). */
.b-qa .qa > .answer.select { background: var(--panel-2); border-color: var(--edge); color: var(--text-primary); }
/* Кнопка «убрать вариант» (.answer .btn-delete печатает движок) */
.b-qa .qa > .answer { position: relative; }
.b-qa .qa > .answer .btn-delete {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  background: var(--panel-2);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.b-qa .qa > .answer .btn-delete:hover { background: var(--neon-pink); color: #fff; }
/* Карточка конструктора встаёт сеткой в две колонки: класс .qa-image / .qa-tf
   стоит на обёртке .b-qa в шаблоне, а текстовая сборка (theme/creating_test.php)
   приходит с одним .qa-create. Сетка нужна, чтобы кнопки шага вставали в одну
   строку внизу карточки, а плитки-варианты — по две в ряд. */
@media (min-width: 640px) {
  .b-qa.qa-image .qa,
  .b-qa.qa-tf .qa,
  .b-qa.qa-create:not(.qa-image):not(.qa-tf) .qa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    align-items: start;
  }
  /* Всё «широкое» — на обе колонки */
  .b-qa.qa-image .qa > .question,
  .b-qa.qa-image .qa > .error,
  .b-qa.qa-image .qa > .quiz-actions,
  .b-qa.qa-image .qa > .btn-add,
  .b-qa.qa-tf .qa > .question,
  .b-qa.qa-tf .qa > .error,
  .b-qa.qa-tf .qa > .quiz-actions,
  .b-qa.qa-tf .qa > .btn-add,
  .b-qa.qa-create:not(.qa-image):not(.qa-tf) .qa > .question,
  .b-qa.qa-create:not(.qa-image):not(.qa-tf) .qa > .error,
  .b-qa.qa-create:not(.qa-image):not(.qa-tf) .qa > .quiz-actions,
  .b-qa.qa-create:not(.qa-image):not(.qa-tf) .qa > .btn-add,
  /* текстовые варианты ответа — тоже на всю ширину карточки */
  .b-qa.qa-create:not(.qa-image):not(.qa-tf) .qa > .answer { grid-column: 1 / -1; }
  .b-qa.qa-create .qa > .question { margin-bottom: 0; }   /* зазор даёт gap сетки */
  .b-qa.qa-image .qa > .answer,
  .b-qa.qa-image .qa > .answer + .answer,
  .b-qa.qa-tf .qa > .answer,
  .b-qa.qa-tf .qa > .answer + .answer { margin-top: 0; }
  /* «Изменить ответы» и «Пропустить» — одной строкой ВНИЗУ карточки. Обе кнопки
     обязаны остаться прямыми детьми .qa (js/main.js берёт их через
     $(this).parent()), поэтому место в сетке задаёт order + grid-column:
     левая колонка — «Изменить ответы», правая — «Пропустить». */
  .b-qa.qa-create .qa > .btn-edit { order: 9; grid-column: 1 / 2; margin: 0; }
  /* У .btn-skip grid-column НЕ задаём: абсолютный ребёнок грид-контейнера с
     явной grid-областью получает её как containing block, и bottom: -74px
     (вынос в общую полосу кнопок) считался бы не от карточки. Без
     grid-placement containing block — padding box самой карточки. */
  .b-qa.qa-create .qa > .btn-skip { order: 10; margin: 0; }
  /* Кнопки шага в «правда/ложь» и «нравится/не нравится» — на обе колонки:
     иначе они встают в колонку рядом с плиткой-ответом, и положение плитки
     (её иконки) зависело от длины подписи кнопки («Done» ↔ «Изменить
     ответы») — задача владельца. У .qa-image такие правила уже есть ниже. */
  .b-qa.qa-tf .qa > .btn-skip,
  .b-qa.qa-tf .qa > .btn-edit,
  .b-qa.qa-create.qa-ld .qa > .btn-skip,
  .b-qa.qa-create.qa-ld .qa > .btn-edit { grid-column: 1 / -1; }
}

/* ── Вариант ответа на страницах прохождения/статистики ─────
   Один вариант = ОДНА СТРОКА: текст слева, полоса «сколько выбрали» справа.
   Раньше это была плитка-иконка сверху (◆▲●■) с подписью под ней: на телефоне
   варианты вставали «квадратами» в две колонки, текст приходилось читать мелким,
   а в статистике такие же квадраты выглядели как «наклейки». Иконок и картинок
   здесь нет — только текст и цифры. Разметку печатает движок
   (.answer.ckeck > .text + .cssProgress). */
.answer.ckeck {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  overflow: visible;
  background: var(--panel);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-sm);
  box-shadow: none;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Иконок-плиток (◆▲●■) у вариантов больше нет */
.answer.ckeck::before { content: none; }
.answer.ckeck > .text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  text-align: left;
}
.answer.ckeck > .cssProgress {
  flex: 0 0 38%;
  margin: 0;
  padding: 0;
}
.answer.ckeck:hover {
  background: var(--panel-2);
  border-color: var(--pop-lavender);
  color: var(--text-primary);
}

/* Выбранный, но ещё не оценённый вариант — лавандовая рамка. Объявлено ДО
   correct/incorrect намеренно: движок не снимает класс select после проверки
   (js/main.js: d.addClass("select") → затем addClass("correct"|"incorrect")),
   специфичность правил одинаковая, поэтому чернильная рамка состояний ниже
   должна перебивать лавандовую. */
.answer.ckeck.select,
.answer.ckeck.selected {
  border-color: var(--pop-lavender);
  box-shadow: var(--sh-hard);
}

/* Метка выбора — не «наклейка» в углу, а место в самой строке (в строчной
   раскладке варианта иначе она висела бы поверх полосы распределения). */
.answer.ckeck.correct::after,
.answer.ckeck.is-correct::after,
.answer.ckeck.select::after,
.answer.ckeck.selected::after {
  content: '✓';
  position: static;
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 2px solid var(--edge);
  border-radius: var(--r-full);
  color: var(--pop-mint);
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.answer.ckeck.correct,
.answer.ckeck.is-correct {
  background: var(--pop-mint);
  border-color: var(--edge);
  color: var(--ink);
}
.answer.ckeck.correct > .text,
.answer.ckeck.is-correct > .text { color: var(--ink); }
.answer.ckeck.correct::before,
.answer.ckeck.is-correct::before { background: transparent; color: var(--ink); }
.answer.ckeck.incorrect,
.answer.ckeck.is-wrong {
  background: var(--pop-coral);
  border-color: var(--edge);
  color: var(--ink);
}
.answer.ckeck.incorrect > .text,
.answer.ckeck.is-wrong > .text { color: var(--ink); }
.answer.ckeck.incorrect::before,
.answer.ckeck.is-wrong::before { background: transparent; color: var(--ink); }
.answer.ckeck.incorrect::after,
.answer.ckeck.is-wrong::after {
  content: '✕';
  background: var(--ink);
  color: var(--pop-coral);
}
/* На мяте/коралле полосы распределения читаются «чернилами»: приглушённый
   текст страницы и панельный фон трека тут не подходят. */
.answer.ckeck.correct .progress3,
.answer.ckeck.is-correct .progress3,
.answer.ckeck.incorrect .progress3,
.answer.ckeck.is-wrong .progress3 {
  background: var(--paper);
  border-color: var(--ink);
}
.answer.ckeck.correct .cssProgress-label,
.answer.ckeck.is-correct .cssProgress-label,
.answer.ckeck.incorrect .cssProgress-label,
.answer.ckeck.is-wrong .cssProgress-label { color: var(--ink); }
.test-image {
  width: 100%;
  max-width: 100%;
  margin: var(--sp-4) 0;
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
}
.many-image { display: inline-block; max-width: 48%; margin: var(--sp-2); border-radius: var(--r-sm); }
/* ── Загрузчик (#loader) ────────────────────────────────────
   Пока идёт ajax-запрос (js/main.js: beforeSend show / complete hide + смена
   <main>) страница показывает оверлей. Раньше это был <img id="loader"> с
   images/loader.gif чужой расцветки. Теперь шаблоны печатают <div id="loader">,
   а кружок рисует CSS в палитре сайта: дорожка — линия карточек, дуга —
   акцент. ::after на img не работает (замещаемый элемент), поэтому разметку
   и меняли. jQuery .show() ставит display:block — центрируем не флексом, а
   text-align + padding-top, чтобы вид не зависел от display. */
#loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  padding-top: calc(50vh - 30px);
  text-align: center;
  background: rgba(19, 11, 40, .55);
  /* В bootstrap.min.css загрузчик скрыт по умолчанию — сохраняем поведение:
     показывает его jQuery (.show() → display: block). */
  display: none;
}
#loader::after {
  content: '';
  display: inline-block;
  width: 52px;
  height: 52px;
  border: 4px solid var(--line-soft);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  animation: qzSpin .9s linear infinite;
}
@keyframes qzSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #loader::after { animation-duration: 2.4s; }
}

/* ── Полосы прогресса ответа (cssProgress3) ──────────────── */
.cssProgress { margin-top: var(--sp-3); }
.progress3 {
  position: relative;
  height: 12px;
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  overflow: hidden;
}
.cssProgress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-acid);
  border-radius: var(--r-full);
  transition: width 0.8s ease-in-out;
}
.cssProgress-label {
  display: block;
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.btn-finish, .btn-finish-modal { margin-top: var(--sp-5); }

/* ── Результат теста ─────────────────────────────────────── */
.b-result {
  margin: var(--sp-5) 0;
  padding: var(--sp-6);
  background: var(--panel);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--sh-hard-lg);
}
.b-result .coins {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 1;
  background: var(--grad-acid);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.b-result .rank {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.b-result .comment { margin-top: var(--sp-2); color: var(--text-secondary); font-size: var(--fs-md); }
.range { width: 100%; color: var(--neon-lime); }
.range label[for='mood'] { font-family: var(--font-display); letter-spacing: var(--ls-wide); }

/* ── Профили, рейтинги, карточки людей ───────────────────── */
.white { background: var(--panel); border: var(--bw) solid var(--edge); border-radius: var(--r-md); box-shadow: var(--sh-hard-sm); }
.photo50, .photo100, .avatar {
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  box-shadow: var(--sh-hard-sm);
  object-fit: cover;
}
.photo50 { height: 50px; width: 50px; max-width: 50px; }
.photo100 { width: 100px; max-width: 100px; }
td img, p img, .answer img, .comment img { display: inline-block; }
.rating_place { color: var(--text-muted); font-family: var(--font-mono); font-weight: var(--fw-bold); }
.rating_place-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--grad-cosmic);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  box-shadow: var(--sh-hard-sm);
  color: var(--ink);
  font-family: var(--font-poster);
  font-weight: var(--fw-regular);
}
.rating_place--1, .rating_place--2, .rating_place--3 { color: var(--neon-yellow); }
.rating_photo { border-radius: var(--r-full); border: var(--bw) solid var(--edge); box-shadow: var(--sh-hard-sm); }
.rating_name { color: var(--text-primary); font-family: var(--font-display); font-weight: var(--fw-semi); }
.rating_coins { color: var(--neon-lime); font-family: var(--font-mono); font-weight: var(--fw-bold); }
.rating_all { line-height: 1.4; }
/* «ваша» строка в рейтинге: жёлтый прогон краски, как подсветка маркером */
.your_bg { background: var(--neon-yellow) !important; color: var(--ink) !important; }
.your_photo { border-color: var(--neon-pink) !important; }
.b-rating { margin: var(--sp-5) 0; }
.my_rank { color: var(--text-secondary); }

/* ── Выбор «какой/какая» на странице результата ──────────── */
.pick {
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-hard-sm);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pick:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-hard); }
.form_pick { margin: var(--sp-4) 0; }
.b-info { margin: var(--sp-6) 0 var(--sp-3); }
/* Описание — врезка-цитата: смысловой абзац с чернильной линией слева */
.b-info p {
  max-width: 70ch;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  padding-left: var(--sp-4);
  border-left: 4px solid var(--neon-pink);
}
.login {
  max-width: 480px;
  margin: var(--sp-5) auto;
  padding: var(--sp-5);
  background: var(--panel);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--sh-hard);
  /* bootstrap рисует у .alternative «растяжки» (::before/::after по 50% ширины с
     отрицательными полями) — без обрезки они вылезали за карточку. */
  overflow: hidden;
  text-align: center;
}
.login .btn { display: block; width: 100%; }
.login .alternative { margin: var(--sp-3) 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Bootstrap-компоненты на тёмном фоне ─────────────────── */
.progress { height: 10px; background: var(--panel-2); border: 1px solid var(--edge); border-radius: var(--r-full); overflow: hidden; }
.progress-bar { background: var(--neon-lime); color: var(--ink); }
.well, .panel, .jumbotron, .thumbnail, .list-group-item, .modal-content, .dropdown-menu, .popover {
  background: var(--panel);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  color: var(--text-primary);
  box-shadow: var(--sh-hard);
}
.modal-header, .modal-footer, .panel-heading, .panel-footer { border-color: var(--border-soft); }
.modal-title { color: var(--text-primary); font-family: var(--font-display); }
.modal-backdrop { background-color: rgba(7, 6, 13, 0.8); }
.dropdown-menu > li > a { color: var(--text-secondary); }
.dropdown-menu > li > a:hover, .dropdown-menu > .active > a {
  background: rgba(139, 92, 246, 0.18);
  color: var(--text-primary);
}
.nav-tabs > li > a, .nav-pills > li > a { color: var(--text-secondary); border-radius: var(--r-full); }
.nav-tabs > li.active > a, .nav-pills > li.active > a {
  background: rgba(139, 92, 246, 0.18);
  border-color: var(--border-soft);
  color: var(--text-primary);
}
.pagination > li > a { background: transparent; border-color: var(--border-soft); color: var(--text-secondary); }
.pagination > li > a:hover { background: rgba(139, 92, 246, 0.18); color: var(--text-primary); }
.pagination > .active > a { background: var(--grad-brand); border-color: transparent; color: #fff; }
.badge { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
.breadcrumb { background: transparent; color: var(--text-muted); }
.breadcrumb > li + li::before { color: var(--text-muted); }

/* ── Реклама: не даём блокам «прыгать» и липнуть к тексту ── */
[class*="adsbygoogle"], .ad, ins.adsbygoogle { margin: var(--sp-5) auto; max-width: 100%; }
ins.adsbygoogle { background: transparent; }

/* ── Утилиты старого дизайна ─────────────────────────────── */
.p-15 { padding: var(--sp-4); }
.plr0 { padding-right: 0; padding-left: 0; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.m-t-15 { margin-top: 15px; }
.m-b-15 { margin-bottom: 15px; }
.floatie { display: none; }

/* ── 4. Разметка промежуточного слоя Neon-Pop ───────────────────
   Часть страниц была переведена на слой Neon-Pop раньше остальных
   (theme/main.php, theme/tests.php, theme/no_auth/{main,login,register,
   preview_test}.php). Их разметка написана классами Neon-Pop
   (.hero__title, .quiz-card, .section-head__title, .timer-bar …), которых
   нет ни в bootstrap, ни в css/theme/style.css. Описываем их здесь — уже
   на токенах Violet Cosmos, чтобы такие страницы читались частью шаблона. */

/* Карточки и раскладка */
.card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.card--accent {
  padding: 22px;
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--accent-soft), rgba(29, 19, 56, 0) 62%), var(--surface);
  box-shadow: var(--shadow-1);
}
.glass {
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: rgba(29, 19, 56, 0.72);
}
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.flex { display: flex; align-items: center; gap: 12px; }
.flex--between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.container--narrow { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.clearfix::after { display: table; clear: both; content: ""; }
.text-center { text-align: center; }

/* Секции и их заголовки */
.section--tight { padding-top: 34px; padding-bottom: 34px; }
.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.section-head__title {
  margin: 8px 0 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.15;
}
.section-head__subtitle { max-width: 70ch; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* Первый экран (hero) */
.hero__inner { position: relative; z-index: var(--z-base); max-width: 780px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hero__title {
  margin-bottom: 16px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.08;
}
.hero__title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__subtitle { max-width: 62ch; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__stats > * { min-width: 130px; padding: 14px 18px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2); }
.hero__stat-num { display: block; color: var(--text); font-family: var(--font-display); font-size: 28px; }
.hero__stat-label { color: var(--muted); font-size: 13px; }

/* Оформление, которое в Neon-Pop давал JS (в шаблоне — статичное) */
.text-gradient { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tilt, .tilt__content { transform: none !important; }
/* Важно: гасим ПСЕВДОЭЛЕМЕНТ декорации, а не сам элемент-носитель.
   В Neon-Pop класс .spotlight был JS-хуком (растр под курсором) и стоял на
   карточках каталога: theme/tests.php, theme/main.php, theme/no_auth/main.php
   размечают карточки как .quiz-card.card--accent.spotlight. Прежнее правило
   .spotlight{display:none !important} перебивало .quiz-card{display:flex} и
   полностью съедало сетку /tests (и половину карточек на главных). */
.tilt__glare, .spotlight::before, .spotlight::after { display: none !important; content: none !important; }
.floatie--1, .floatie--2, .floatie--3 { display: none; }

/* Каталог тестов (theme/tests.php) */
.catalog-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.catalog-search {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
}
.catalog-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip--active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Карточка теста (theme/tests.php, theme/no_auth/main.php) */
.quiz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.quiz-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-2); }
.quiz-card__thumb { position: relative; display: grid; place-items: center; height: 150px; background: var(--grad-accent); }
.quiz-card__thumb-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(19, 11, 40, 0.3) 1.4px, transparent 1.5px);
  background-size: 10px 10px;
}
/* Фото-миниатюра теста (theme/tests.php ставит картинку inline-стилем).
   Базовый класс — это растровая заливка плиткой 10×10px, а inline
   background-image background-size НЕ сбрасывает (в отличие от сокращённого
   background:), поэтому фото рисовалось плиткой и превращалось в «сетку».
   Здесь размер задаём явно: картинка накрывает превью целиком. */
.quiz-card__thumb-bg--photo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.quiz-card__thumb-emoji { position: relative; font-size: 44px; line-height: 1; }
.quiz-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: rgba(19, 11, 40, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.quiz-card__title { padding: 14px 16px 6px; color: var(--text); font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
.quiz-card__meta { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 12px; color: var(--muted); font-size: 13px; }
.quiz-card__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.quiz-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--line-soft); }
.quiz-card__rating { color: var(--muted); font-size: 13px; }
.quiz-card__play { display: inline-flex; }
.quiz-card__play-btn { padding: 9px 16px; font-size: 15px; }

/* Ответы и таймер прохождения (theme/no_auth/preview_test.php) */
.play__answer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.play__answer:hover { border-color: var(--accent); background: var(--surface-3); }
.play__answer--correct { border-color: var(--mint); background: rgba(77, 235, 184, 0.12); }
.timer-bar { height: 10px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-3); }
.timer-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-accent); transition: width 0.3s linear; }

/* Шаги «как это работает» (theme/no_auth/main.php) */
.step { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.step__num {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
}

/* Вход и регистрация (theme/no_auth/{login,register}.php) */
.auth-section { padding: 44px 0 60px; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.auth-intro { max-width: 60ch; }
.auth-list { display: grid; gap: 14px; margin-top: 22px; }
.auth-list > li { display: flex; gap: 12px; color: var(--muted); }
.auth-list__ico { flex: 0 0 auto; font-size: 20px; line-height: 1.4; }
.auth-card__sub { margin-bottom: 16px; color: var(--muted); font-size: 15px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: var(--muted-2); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.auth-or::before, .auth-or::after { flex: 1; height: 1px; background: var(--line); content: ""; }
.auth-note { color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.auth-error { padding: 12px 16px; border: 1px solid var(--coral); border-radius: var(--r-md); background: rgba(255, 107, 139, 0.12); color: var(--coral); font-size: 15px; }
.auth-tab--active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

@media (max-width: 900px) {
  .auth-grid, .grid--2, .auth-row { grid-template-columns: 1fr; }
}

/* ── 5. Доборка bootstrap-компонентов и утилит ──────────────────
   bootstrap.min.css остаётся подключённым на страницах старого шаблона
   (структура и сетка берутся оттуда), но его светлую палитру добираем
   здесь. На страницах со слоем Neon-Pop bootstrap не подключён — эти же
   правила обслуживают и их. */

/* Кнопки: голый bootstrap .btn (0,1,0) перебивал бы .btn--* (0,1,0) */
.btn.btn--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.btn.btn--primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }
.btn.btn--acid { border-color: var(--mint); background: var(--mint); color: var(--on-accent); }
.btn.btn--ghost { border: 1px solid var(--line); background: transparent; color: var(--text); }
.btn.btn--ghost:hover { border-color: var(--accent); background: var(--surface-3); color: var(--text); }
.btn.btn--vk { border-color: var(--line); background: var(--vk); color: #fff; }
.btn.btn--vk:hover { border-color: var(--line); background: var(--vk-hover); color: #fff; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--lg { padding: 14px 28px; font-size: 18px; }

/* Формы bootstrap */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  box-shadow: none;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.form-control::placeholder { color: var(--muted-2); }
.form-control[disabled], .form-control[readonly] { background: var(--surface); color: var(--muted); }
.checkbox label, .radio label, .checkbox-inline, .radio-inline { color: var(--muted); font-size: 15px; }
.checkbox input, .radio input { margin-right: 8px; }
.help-block { color: var(--muted-2); font-size: 13px; }

/* Метки и значки */
.label { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.label-default { background: var(--surface-3); color: var(--muted); }
.label-success { background: rgba(77, 235, 184, 0.16); color: var(--mint); }
.label-danger { background: rgba(255, 107, 139, 0.16); color: var(--coral); }
.label-warning { background: rgba(255, 201, 77, 0.16); color: var(--amber); }
.label-info { background: rgba(111, 216, 255, 0.16); color: var(--cyan); }
.badge { background: var(--surface-3); color: var(--muted); }
.badge--violet { background: var(--accent-soft); color: var(--accent); }
.badge--pink { background: rgba(255, 122, 217, 0.16); color: var(--pink); }
.badge--cyan { background: rgba(111, 216, 255, 0.16); color: var(--cyan); }

/* Таблицы, предупреждения, модалки bootstrap */
.table { width: 100%; max-width: 100%; color: var(--text); }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td { padding: 10px 12px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.table > thead > tr > th { border-bottom: 2px solid var(--line); color: var(--muted); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2); }
.table-hover > tbody > tr:hover { background: var(--surface-3); }
.table-responsive { width: 100%; overflow-x: auto; }
.alert { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); }
.alert-info { border-color: var(--cyan); background: rgba(111, 216, 255, 0.12); }
.alert-success { border-color: var(--mint); background: rgba(77, 235, 184, 0.12); }
.alert-warning { border-color: var(--amber); background: rgba(255, 201, 77, 0.12); }
.alert-danger { border-color: var(--coral); background: rgba(255, 107, 139, 0.12); }
/* .alert-link — служебный класс ссылки внутри предупреждения (конвенция
   bootstrap: `.alert .alert-link`). Легаси-шаблоны вешают его на сам блок —
   <div class="alert alert-info alert-link alert-dismissible"> (20 мест:
   engine/theme/{best,my_profile,likes,meet,create}.php, no_auth/{likes,meet}.php,
   engine/blocks/prizes.php и зеркала в global/). Безусловный `.alert-link`
   красил акцентом ВЕСЬ текст предупреждения (color наследуется в <p>, <strong>,
   <small>), перебивая `.alert { color: var(--text) }` более поздним правилом
   с той же специфичностью. Ограничение селектора элементом `a` возвращает
   наследование от .alert, а настоящие ссылки остаются акцентными. */
a.alert-link { color: var(--accent); text-decoration: underline; }
.modal-content { border-radius: var(--r-lg); }
.modal-backdrop.in { opacity: 0.7; }

/* Группа «иконка + поле» (слой Neon-Pop) */
.input-group { position: relative; display: block; }
.input-group .input, .input-group input { padding-left: 46px; }
.input-group__icon { position: absolute; top: 50%; left: 16px; display: inline-flex; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════
   Конструктор теста: пошаговый шаг (.b-qa.qa-create)
   ──────────────────────────────────────────────────────────────────────
   Разметку шага печатают theme/creating_test.php | _image | _true_false.php
   (класс qa-create ставят они же; в creating_test2.php — свой редактор,
   пошаговости там нет).

   Движок после ответа помечает карточку вопроса классом .selected, но НЕ
   прячет её: в прохождении это правильно (там карточка показывает, как
   ответили друзья), а в конструкторе вопросы должны идти по очереди, поэтому
   отвеченную карточку прячем. Логику это не ломает: js/main.js ищет следующий
   вопрос через $('.qa:not(.selected)'), а счётчик .selected-now уже увеличен.
   ══════════════════════════════════════════════════════════════════════ */
.b-qa.qa-create .qa.selected { display: none !important; }

/* Внешняя панель .b-qa в конструкторе лишняя: видимая карточка одна, и она же
   панель. Убираем фон/рамку/тень и внутренние отступы (в прохождении .b-qa
   остаётся панелью, поэтому правило только под .qa-create). */
/* Внешняя панель .b-qa в конструкторе лишняя: видимая карточка одна, и она же
   панель. Убираем фон/рамку/тень и внутренние отступы (в прохождении .b-qa
   остаётся панелью, поэтому правило только под .qa-create).
   ВАЖНО: `.b-qa` — это ещё и `.container` (разметку печатает шаблон), а мост
   перебивает `.container` по специфичности. Поэтому центровку (`margin: 0 auto`)
   и боковые отступы контейнера (20px, на телефоне 16px) восстанавливаем здесь —
   иначе карточка вопроса прижималась к левому краю окна (x = 0 вместо x = 140
   у остальных блоков страницы). */
.b-qa.qa-create {
  position: relative;
  margin: 0 auto var(--sp-6);
  /* Нижний padding — полоса под общую строку кнопок шага («Пропустить» слева,
     «Завершить создание теста?» справа). Высота полосы = высота кнопок (46px)
     + зазор до карточки (26px) — см. правила ниже. */
  padding: 0 20px 72px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.b-qa.qa-create .topic { margin: 0; }
.b-qa.qa-create .qa { margin-bottom: 0; box-shadow: var(--sh-hard); }
/* Карточка вопроса из дизайн-системы обрезает содержимое
   (css/theme/style.css: .question-card { overflow: hidden } — так задуман её
   декоративный уголок-градиент). Но «Пропустить» вынесена в общую строку
   кнопок ПОД карточкой (правило ниже), и обрезка делала её невидимой.
   В конструкторе обрезку снимаем: ничего внутри карточки не выходит за её
   рамки, а вынесенной кнопке нужен видимый нижний край. */
.b-qa.qa-create .qa { overflow: visible; }

/* Кнопки шага. «Пропустить» — нейтральная, «Изменить ответы» — мята (в этой
   палитре зелёный = «правка/добавление»), в режиме правки надпись меняется на
   «Готово» и карточка получает класс .edited — тогда кнопка становится
   акцентной (лаванда = главный цвет действий). Кнопки — прямые дети .qa (так
   их ищет js/main.js), поэтому отступы задаём им, а не обёртке. */
.b-qa.qa-create .qa > .btn-skip,
.b-qa.qa-create .qa > .btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 var(--sp-5);
  margin: 0 var(--sp-2) var(--sp-4) 0;
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  box-shadow: var(--sh-hard-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1;
}
.b-qa.qa-create .qa > .btn-skip { background: var(--panel-2); color: var(--text-secondary); }
.b-qa.qa-create .qa > .btn-skip:hover { background: var(--panel); color: var(--text-primary); }
/* «Пропустить» и ряд действий («Завершить создание теста?», «+») стоят ОДНОЙ
   строкой: «Пропустить» слева, «Завершить…» справа. Кнопки лежат в разных
   контейнерах — js/main.js требует, чтобы .btn-skip был прямым ребёнком .qa
   (он берёт $(this).parent() и ищет по data-id), а .quiz-actions идёт братом
   .topic, — поэтому «Пропустить» вынимаем из потока.
   ВАЖНО: containing block абсолютной кнопки — САМА карточка (.b-qa .qa имеет
   position: relative), а не .b-qa. Поэтому bottom считаем от карточки:
   -74px = зарезервированная полоса (.b-qa: padding-bottom 72px) + рамка
   карточки (2px). В полосу же встаёт ряд действий (.quiz-actions: bottom 0 от
   .b-qa) — нижние края кнопок совпадают. Высота у кнопок одна (46px), так что
   «Пропустить» и «Завершить…» стоят на общей базовой линии.
   На телефоне правило отменяется: кнопки возвращаются в поток и встают
   в столбик (блок в конце файла). */
.b-qa.qa-create .qa > .btn-skip {
  position: absolute;
  left: 0;                 /* от .qa — совпадает с левым краем карточки */
  bottom: -74px;
  height: 46px;
  margin: 0;
  padding: 0 var(--sp-5);
  z-index: 2;
}
.b-qa.qa-create .qa > .btn-edit,
.b-qa.qa-create .qa > .btn-edit:focus { background: var(--pop-mint); color: var(--ink); }
.b-qa.qa-create .qa > .btn-edit:hover { background: var(--pop-mint); color: var(--ink); box-shadow: var(--sh-hard); }
.b-qa.qa-create .qa.edited > .btn-edit,
.b-qa.qa-create .qa.edited > .btn-edit:hover { background: var(--neon-yellow); color: var(--ink); }

/* «Добавить вариант». Движок печатает кнопку с текстом «+» (js/main.js вставляет
   такую же разметку для добавленных вопросов), поэтому кнопку рисуем по .btn-add:
   прячем глиф (font-size: 0) и печатаем «+ Добавить вариант» псевдоэлементами —
   разметку движка не трогаем. Кнопка тянется на всю ширину карточки, мята. */
.b-qa.qa-create .qa > .btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: auto;
  min-height: 46px;
  /* Плитки «с картинками»/«правда-ложь» до 640px — float'ы (патч bootstrap
     .answer_image{float:left;width:50%}), поэтому кнопка обязана очищать строку:
     иначе её подпись ложилась на последний ряд плиток. В grid-режиме (≥640px)
     clear для grid-элементов игнорируется — вреда нет. */
  clear: both;
  padding: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  background: transparent;
  border: 2px dashed var(--pop-mint);
  border-radius: var(--r-sm);
  box-shadow: none;
  color: var(--pop-mint);
  font-size: 0;
  line-height: 1;
}
.b-qa.qa-create .qa > .btn-add::before {
  content: '+';
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.b-qa.qa-create .qa > .btn-add::after {
  content: 'Добавить вариант';
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.b-qa.qa-create .qa > .btn-add:hover {
  background: var(--pop-mint);
  border-style: solid;
  color: var(--ink);
}

/* «Убрать вариант» — красная круглая кнопка с крестиком. Движок печатает внутри
   длинное тире (—), которое на Windows может подмениться эмодзи-шрифтом и
   «плывёт» по строке, поэтому текст прячем (font-size: 0), а крестик рисуем
   двумя полосками псевдоэлементов — вид не зависит от шрифтов вообще. */
.b-qa.qa-create .qa > .answer .btn-delete {
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: block;
  background: var(--pop-coral);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  box-shadow: var(--sh-hard-sm);
  color: #fff;
  font-size: 0;
  line-height: 1;
}
.b-qa.qa-create .qa > .answer .btn-delete::before,
.b-qa.qa-create .qa > .answer .btn-delete::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  margin: -1px 0 0 -6.5px;
  border-radius: 2px;
  background: currentColor;
}
.b-qa.qa-create .qa > .answer .btn-delete::before { transform: rotate(45deg); }
.b-qa.qa-create .qa > .answer .btn-delete::after { transform: rotate(-45deg); }
.b-qa.qa-create .qa > .answer .btn-delete:hover { background: var(--neon-pink); color: #fff; }
/* В режиме правки крестик перекрывал бы текст варианта — отступаем справа. */
.b-qa.qa-create .qa.edited > .answer { padding-right: 56px; }

/* Варианты ответа. Шаблон конструктора печатает класс .select у ВСЕХ вариантов
   (движок ловит по нему клик), поэтому «выбрано» рисуем не по .select, а по
   .correct — этот класс js/main.js ставит тому варианту, который записал
   правильным (/ajax/ckeck). Зелёная заливка = «это правильный ответ». */
.b-qa.qa-create .qa > .answer.correct:not(.answer_image) {
  padding-right: 56px;
  background: var(--pop-mint);
  border-color: var(--edge);
  color: var(--ink);
}
/* Галочка «правильный ответ» — тёмный кружок с мятой SVG-галочкой (та же иконка,
   что у .answer.is-selected в css/theme/style.css). Глиф ✓ не используем: его
   начертание зависит от шрифта. */
.b-qa.qa-create .qa > .answer.correct:not(.answer_image)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--sp-5);
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: var(--r-full);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234DEBB8' 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;
}
/* Наведение: правило .select выше (0,3,0) перебивает общий .answer:hover
   (0,2,0), поэтому задаём hover явно — акцентной заливкой; выбранный вариант
   (:not(.correct)) при наведении остаётся мятным. */
.b-qa.qa-create .qa > .answer.select:not(.correct):hover {
  background: var(--neon-yellow);
  border-color: var(--edge);
  color: var(--ink);
}

/* Плитки «правда / ложь» и «с картинками». Плитка — тоже .answer, поэтому
   «выбрано» движок помечает классом .correct (js/main.js: addClass после
   /ajax/save/tf и /ajax/save/image). Выбор показывает РАМКА плитки: она
   подсвечивается мятным и вокруг появляется мягкое свечение — так видно, что
   клик сработал (раньше подсветка шла обводкой вокруг самой картинки, и на
   фотографии её было легко не заметить). Бейдж-галочку тут не рисуем: на
   плитке-иконке «правда/ложь» в этом же ::after печатается подпись
   («Правда»/«Ложь») — см. блок «Плитки-картинки» выше. */
.b-qa.qa-create .answer_image.correct,
.b-qa.qa-create .answer_image.selected {
  border-color: var(--pop-mint);
  box-shadow: 0 0 0 3px rgba(77, 235, 184, .22);
  transform: translateY(-2px);
}

/* Нижний ряд шага («+» добавить вопрос и «Завершить создание теста?») — на той
   же строке, что и «Пропустить», у правого края карточки; высота кнопок — 46 px,
   вид — как у кнопок шага. Ряд вынут из потока (см. .btn-skip выше), поэтому
   `.b-qa.qa-create` держит под него padding-bottom. Inline-style из разметки
   убран, чтобы на телефоне ряд мог встать в столбик (блок в конце файла). */
.b-qa.qa-create .quiz-actions {
  position: absolute;
  right: 20px;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin: 0;
}
.b-qa.qa-create .quiz-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 var(--sp-5);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.b-qa.qa-create .quiz-actions .btn-circle { width: 46px; height: 46px; padding: 0; }
/* У `.btn-finish` есть свой `margin-top: var(--sp-5)` (на страницах прохождения
   он ставит кнопку под результатом) — в общем ряду конструктора из-за него
   «Завершить создание теста?» стояла на 24px ниже круглой «+». */
.b-qa.qa-create .quiz-actions .btn-finish { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Кнопки «шасси» страницы: шапка, drawer, подвал, cookie-полоса
   ──────────────────────────────────────────────────────────────────────
   Мост определяет базовый .btn (плоский вид: inline-block, квадратные углы,
   офсетная тень) и подключается ПОСЛЕ css/theme/style.css, поэтому на
   legacy-страницах кнопки шаблона теряли flex-центровку значка и подписи: в
   шапке «Профиль»/«Вход» выглядели криво (значок и текст на разных базовых
   линиях), а заливка становилась серой вместо акцентной. Возвращаем кнопкам
   шасси (шапка, drawer, подвал, cookie-полоса) вид шаблона.
   ══════════════════════════════════════════════════════════════════════ */
.site-header .btn, .main-nav .btn, .site-footer .btn, .cookie-bar .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 0;
  padding: 13px 26px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--text);
  box-shadow: none;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  transform: none;
}
.site-header .btn:hover, .main-nav .btn:hover, .site-footer .btn:hover, .cookie-bar .btn:hover {
  transform: translateY(-2px);
  box-shadow: none;
}
.site-header .btn-accent, .main-nav .btn-accent, .cookie-bar .btn-accent {
  background: var(--grad-accent);
  color: var(--on-accent);
  box-shadow: var(--glow);
}
.site-header .btn-dark, .main-nav .btn-dark, .site-footer .btn-dark {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--line);
}
.site-header .btn-vk, .main-nav .btn-vk, .site-footer .btn-vk { background: var(--vk); color: #fff; }
.site-header .btn-sm, .main-nav .btn-sm, .site-footer .btn-sm { padding: 9px 16px; font-size: 12.5px; border-radius: 10px; }
.main-nav .btn-block, .site-footer .btn-block { width: 100%; }
/* Кнопка шапки — ровно в высоту бургера (44px), как в style.css */
.header-actions .btn, .header-actions .btn.btn-sm {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: var(--r-sm);
}
/* В drawer кнопки одного размера и во всю ширину панели */
.main-nav .nav-extra .btn { padding: 13px 20px; font-size: 14.5px; }

/* ══════════════════════════════════════════════════════════════════════
   Модалка завершения создания теста (bootstrap #confirmation)
   ──────────────────────────────────────────────────────────────────────
   ГЛАВНАЯ ГРАБЛЯ. css/theme/style.css объявляет .modal для СВОЕЙ модалки
   (.modal-overlay > .modal): position: relative, width: 100%, max-width: 460px,
   заливка-карточка, border-radius, transform. Класс совпал с классом bootstrap,
   а style.css подключается раньше bridge.css — поэтому bootstrap-окно получало
   вид карточки И position: relative: вместо полноэкранной подложки посреди
   страницы появлялся блок ~460px (в потоке, у левого края), а .modal-backdrop
   ложился ПОД ним. Сайтовая модалка при этом цела: у `.modal-overlay .modal`
   специфичность (0,2,0) выше любого правила с одним классом, поэтому карточку
   ведут правила style.css.
   Возвращаем bootstrap-модалке полноэкранную подложку и центрируем окно по
   обеим осям штатным для BS3 приёмом (inline-block + ::before во всю высоту).
   `display` здесь НЕ трогаем: bootstrap показывает окно, ставя inline
   display:block, иначе модалка была бы видна всегда.
   ══════════════════════════════════════════════════════════════════════ */
/* Тема-страницы (blocks/theme/head.php) подключают ТОЛЬКО style.css + bridge.css —
   bootstrap.min.css здесь нет, поэтому скрытое состояние окна, затемнение и
   «замок» прокрутки объявляем сами (в bootstrap это делают его же правила, а
   без них модалка стояла видимой в потоке страницы всегда). */
.modal {
  display: none; /* окно показывает bootstrap, добавляя класс .in */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 24px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  overflow-y: auto;
  text-align: center;
}
/* Сайтовая модалка из style.css — это НЕ bootstrap: у неё своя подложка
   .modal-overlay, показ через .is-open. display: none её бы убил, возвращаем. */
.modal-overlay .modal { display: block; }
/* Появление/затухание (в bootstrap — класс .fade, здесь он же, но под .modal). */
.modal.fade { opacity: 0; transition: opacity .2s linear; }
.modal.fade.in { opacity: 1; }
/* Пока окно открыто, страница под ним не прокручивается (bootstrap ставит
   body.modal-open). */
.modal-open { overflow: hidden; }
/* Затемнение под окном: bootstrap создаёт .modal-backdrop, но без bootstrap.min.css
   он оставался в потоке (position: static) — то есть его не было видно. */
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; }
.modal-backdrop.fade { opacity: 0; transition: opacity .2s linear; }
/* Правило нужно из-за порядка: базовый `.modal-backdrop.in` (opacity .7) объявлен
   в файле ВЫШЕ, и селектор `.modal-backdrop.fade` той же специфичности его глушил —
   затемнение появлялось, но оставалось прозрачным. */
.modal-backdrop.fade.in { opacity: 0.7; }
/* Показ окна: bootstrap помечает .modal классом .in, поэтому центрируем именно
   по нему. Раскладка — flex, а не «inline-block + ::before» (приём BS3): на узком
   экране .modal-dialog шириной 100% не помещался рядом с псевдоэлементом и
   уезжал на вторую строку — под нижний край окна. */
.modal.in { display: flex !important; }
.modal-dialog {
  position: relative;
  width: 100%;
  /* 600px — штатная ширина окна в bootstrap; у модалки завершения сборки теста
     (единственной, что стоит в шаблонах конструктора) своя ширина — 440px. */
  max-width: 600px;
  /* auto-отступы центрируют окно по обеим осям и не обрезают верх, если окно
     выше экрана (в отличие от align-items: center) — подложка прокручивается. */
  margin: auto;
  text-align: left;
}
#confirmation .modal-dialog { max-width: 440px; }
.modal.fade .modal-dialog, .modal.in .modal-dialog { transform: none; }
.modal-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  color: var(--text);
}
.modal-header { position: relative; padding: 20px 52px 14px 22px; border-bottom: 1px solid var(--line-soft); }
.modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.35; }
.modal-body { padding: 20px 22px 24px; }
/* Модалка завершения сборки теста: ответы «Да!» и «Хочу ответить на все вопросы»
   — в столбик, одного размера и во всю ширину окна. «Да!» — главное действие
   (циан шаблона), «Хочу ответить…» — второстепенное (нейтральная панель):
   красная «опасность» здесь ни к чему, это не удаление. */
#confirmation .modal-body { display: grid; gap: 10px; }
#confirmation .modal-body .btn {
  width: 100%;
  /* Высота не фиксированная: на телефоне «Хочу ответить на все вопросы»
     переносится на две строки, а фиксированные 46px обрезали вторую. */
  height: auto;
  min-height: 46px;
  margin: 0;
  padding: 11px var(--sp-4);
  border-radius: var(--r-sm);
  line-height: 1.3;
  font-size: var(--fs-base);
}
#confirmation .btn-finish-modal-no,
#confirmation .btn-finish-modal-no:focus {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--text);
}
#confirmation .btn-finish-modal-no:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--text);
}
.modal-header .close { position: absolute; top: 10px; right: 12px; margin: 0; padding: 4px 8px; }

/* ══════════════════════════════════════════════════════════════════════
   Конструктор теста на мобильных: кнопки шага — во всю ширину
   ──────────────────────────────────────────────────────────────────────
   Ряд «Пропустить» (внизу карточки) и нижний ряд («+» вопрос и «Завершить
   создание теста?») на телефоне встают в столбик и тянутся на всю ширину —
   подписи длинные, иначе кнопки шли в две строки. Исключение — круглая «+»:
   в разметке у неё одна иконка, и растянутая во всю ширину она выглядела
   пустой пилюлей (одинокий «+» по центру), поэтому на телефоне подпись
   печатает ::after, а её текст берётся с обёртки (.b-qa.qa-tf = «правда/ложь»).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Отступ .container на телефоне — 16px (как в css/theme/style.css). */
  .b-qa.qa-create { padding: 0 16px; }
  /* Нижняя строка кнопок: на телефоне «Пропустить» и «Завершить создание
     теста?» в одну линию не помещаются — возвращаем кнопки в поток: skip
     остаётся внизу карточки на всю ширину, ряд действий встаёт под карточкой. */
  .b-qa.qa-create { padding-bottom: 0; }
  .b-qa.qa-create .qa > .btn-skip {
    position: static;
    left: auto;
    bottom: auto;
  }
  .b-qa.qa-create .quiz-actions {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: var(--sp-5);
  }
  .b-qa.qa-create .qa > .btn-skip,
  .b-qa.qa-create .qa > .btn-edit { width: 100%; margin-right: 0; }
  .b-qa.qa-create .quiz-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .b-qa.qa-create .quiz-actions .btn,
  .b-qa.qa-create .quiz-actions .btn-circle { width: 100%; height: 46px; }
  .b-qa.qa-create .quiz-actions .btn-circle {
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
  }
  .b-qa.qa-create .quiz-actions .btn-circle::after { content: 'Добавить вопрос'; }
  .b-qa.qa-create.qa-tf .quiz-actions .btn-circle::after { content: 'Добавить утверждение'; }
}

/* ══════════════════════════════════════════════════════════════════════
   Конструктор «свои вопросы и ответы» (theme/creating_test2.php)
   ──────────────────────────────────────────────────────────────────────
   Разметку печатают ДВА источника: шаблон (вопросы из БД) и js/main.js
   (кнопки «Добавить вопрос» / «Добавить вариант» вставляют ту же структуру
   классов). Поэтому стилизуем классы, а не конкретную разметку:
   ._qa_block — карточка вопроса, ._quistion_n — «Вопрос N», ._qa_del — крестик
   удаления вопроса, ._answers_list — строка варианта (галочка / поле / крестик),
   .checkbox + .checkbox-custom — «правильный вариант», ._answer_add — добавить.
   ══════════════════════════════════════════════════════════════════════ */
._qa_blocks { display: block; }
._qa_block {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 22px var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-4);
}
/* «Вопрос N» — пилюля в левом верхнем углу карточки. inline-flex, чтобы пилюля
   сжалась по тексту (в разметке у неё .text-center: на блочном элементе он
   растягивал подпись на всю ширину карточки). */
._quistion_n {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 5px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .35);
  border-radius: var(--r-full);
  color: var(--accent);
  font-size: 12px;
  font-weight: var(--fw-black);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.6;
}
/* Крестик удаления вопроса — в правом верхнем углу карточки (в статичном
   шаблоне ._qa_del идёт первым ребёнком блока, js/main.js вставляет так же). */
._qa_del {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted-2);
}
._qa_del:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
._qa_del i, ._qa_del .ico { color: inherit; }
/* Поля вопроса и вариантов — как .input дизайн-системы: мост печатает их раньше
   (с «жёлтой» рамкой фокуса Neon-Pop), здесь уточняем цвета шаблона. */
._q_textarea, ._a_textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  resize: none;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
._q_textarea { font-weight: var(--fw-semi); }
._q_textarea:focus, ._a_textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
/* Галочка «правильный вариант»: нативный чекбокс прячем (он остаётся в потоке
   фокуса и работает с клавиатуры), квадратик рисует .checkbox-custom из
   разметки движка — он есть и в шаблоне, и в блоке, что добавляет js/main.js. */
/* Порядок в строке варианта — [× удалить] [поле ответа] [✓ «правильный»]:
   галочку переносим вправо, крестик — влево. Место в сетке задаём колонками,
   а не порядком разметки: так вид одинаков и у строк, напечатанных шаблоном,
   и у строк, которые добавляет js/main.js (там разметка идёт в прежнем
   порядке галочка → поле → крестик). */
._answers_list .a-list-item-del { grid-column: 1; grid-row: 1; }
._answers_list .a-list-item-answer { grid-column: 2; grid-row: 1; }
._answers_list .answer_ckeck { grid-column: 3; grid-row: 1; }
._answers_list input.checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
._answers_list .checkbox-custom {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
._answers_list .checkbox-custom:hover { border-color: var(--pop-mint); }
._answers_list input.checkbox:checked + .checkbox-custom {
  background: var(--pop-mint) 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(--pop-mint);
  box-shadow: 0 0 0 3px rgba(77, 235, 184, .18);
}
._answers_list input.checkbox:focus-visible + .checkbox-custom { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Крестик «убрать вариант» */
._answer_del { background: var(--panel); border: 1px solid var(--line); color: var(--muted-2); }
._answer_del:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
._answer_del i, ._answer_del .ico { color: inherit; }
/* «Добавить вариант» — призрачная кнопка с пунктиром на всю ширину карточки.
   padding/margin обнуляем: у кнопки в разметке ещё и класс .bs (карточка старого
   дизайна), из-за его отступов пунктирная кнопка была «толще» остальных. */
._answer_add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0 var(--sp-4);
  background: transparent;
  border: 2px dashed var(--pop-mint);
  border-radius: var(--r-sm);
  color: var(--pop-mint);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
._answer_add:hover { background: var(--pop-mint); border-style: solid; color: var(--ink); }
/* Отступ кнопки «Добавить вариант» от последнего варианта ответа: строки
   вариантов и кнопка лежат в одном контейнере (#all_answers_N), поэтому
   достаточно margin-top у обёртки, которую печатает шаблон. */
.qa-answer-add { margin-top: var(--sp-4); }
/* Нижний ряд редактора («Добавить вопрос» / «Создать тест») */
._qa_blocks .quiz-actions { margin-top: var(--sp-5); }
@media (max-width: 720px) {
  ._qa_block { padding: 18px 16px 20px; }
  ._qa_del { top: 12px; right: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Кнопки дизайн-системы на legacy-страницах
   ──────────────────────────────────────────────────────────────────────
   Мост подключается последним и его базовый `.btn` (0,1,0) перебивал
   `.btn-accent` / `.btn-dark` из css/theme/style.css (тоже 0,1,0): кнопка
   «Создать аккаунт» на /register и /login становилась серой панелью, а
   «Создать тест» — прозрачной. Здесь вариантам возвращаем вид шаблона
   (специфичность селекторов — 0,2,0, поэтому порядок файлов больше не важен).
   ══════════════════════════════════════════════════════════════════════ */
.btn.btn-accent { background: var(--accent); border: 0; color: var(--on-accent); }
.btn.btn-accent:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.btn-dark { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.btn-dark:hover { border-color: var(--violet); color: var(--violet); }
.btn.btn-block { display: flex; width: 100%; justify-content: center; }
.btn.btn-lg { padding: 16px 30px; font-size: 17px; }
/* Сегмент-контрол пола в формах авторизации (/register, /login, главная для
   гостей): сетку и состояния задаёт css/theme/style.css, здесь только сброс
   отступов, которые могли прийти из старых правил формы. */
.auth-card .seg { margin: 0; }


/* ══════════════════════════════════════════════════════════════════════
   Пошаговое прохождение теста + анимация результата ответа
   ──────────────────────────────────────────────────────────────────────
   Логику смены вопросов держит blocks/theme/quiz_step.php: он ставит на
   контейнер [data-quiz-stage] класс .qa-pass, отвеченной карточке — .qa-out,
   а затем .qa-done, и .qa-in — той, которая вышла на экран. Здесь только вид.

   Почему класс-маркер, а не правка шаблонов: прохождение приходит и статикой
   (theme/pass_test*.php), и ajax-ом (theme/ajax/start*.php) — маркер ставит
   скрипт, поэтому правило одинаково для всех типов тестов.
   ══════════════════════════════════════════════════════════════════════ */
.qa-pass { position: relative; }
/* Уезжающая карточка ВЫНУТА ИЗ ПОТОКА. Иначе, пока играет анимация ухода
   (0.3 с), она всё ещё занимает своё место, и следующая карточка стоит НИЖЕ
   неё, а получив .qa-done — «прыгает» вверх на всю её высоту. Именно это видел
   владелец: «блок следующего вопроса на секунду съезжает вниз и потом
   возвращается» (правда/ложь, лайк/дизлайк). Теперь карточки просто
   перекрещиваются: уезжающая тает поверх въезжающей. */
.qa-pass .qa.qa-out {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  margin: 0;
  pointer-events: none;
}
.qa-pass .qa.qa-in { animation: qaStepIn .42s var(--ease-out) both; }
@keyframes qaStepIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.qa-pass .qa.qa-out { animation: qaStepOut .3s var(--ease-out) both; }
@keyframes qaStepOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-14px) scale(.985); }
}
.qa-pass .qa.qa-done { display: none !important; }

/* Результат ответа: верный чуть «подпрыгивает», неверный подрагивает.
   Без animation-fill-mode: иначе transform из последнего кадра остался бы на
   элементе навсегда и :hover (сдвиг «наклейки») перестал бы работать. */
.qa-pass .answer.ckeck.correct,
.qa-pass .answer.ckeck.is-correct { animation: qaAnswerRight .34s var(--ease-spring); }
@keyframes qaAnswerRight {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.qa-pass .answer.ckeck.incorrect,
.qa-pass .answer.ckeck.is-wrong { animation: qaAnswerWrong .42s ease-in-out; }
@keyframes qaAnswerWrong {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}
/* Бейдж-галочка/крестик в углу карточки — всплывает (класс ставит js/main.js) */
.qa-pass .answer.ckeck.correct::after,
.qa-pass .answer.ckeck.incorrect::after {
  animation: qaBadgePop .34s var(--ease-spring);
}
@keyframes qaBadgePop {
  from { transform: scale(.35); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Плитки «правда/ложь», «картинки», «нравится/не нравится»: обводка выбора
   проявляется мягко, а не «включается» (классы ставит js/main.js). */
.qa-pass .answer_image.correct,
.qa-pass .answer_image.incorrect,
.qa-pass .answer_image.selected { animation: qaTilePop .3s var(--ease-spring); }
@keyframes qaTilePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}


/* ══════════════════════════════════════════════════════════════════════
   Результат прохождения: рейтинг, «какой я для друзей», статистика ответов
   ──────────────────────────────────────────────────────────────────────
   Эти три блока печатают ОБА входа: ajax-фрагмент (theme/ajax/end.php после
   ответа на последний вопрос) и полная страница по ссылке
   (theme/show_result.php / theme/main/show_result.php). Правила ниже общие,
   поэтому результат после перезагрузки страницы выглядит так же, как сразу
   после прохождения.
   ══════════════════════════════════════════════════════════════════════ */

/* Рейтинговая таблица (blocks/rating.php → blocks/theme/rating_table.php).
   На десктопе список занимает всю ширину страницы: у .friends-list общий
   max-width 860px (он хорош для /friends и /best), и в колонке рейтинга под
   тестом между именем и баллами образовывалась «дыра», а баллы уезжали к
   правому краю страницы. */
@media (min-width: 900px) {
  .b-rating .friends-list { max-width: none; }
}

/* «Какой/Какая … для друзей» (#picks > .picks-grid > .pick). Цвет плитки
   приходит из БД inline-стилем, поэтому здесь только геометрия: плоская
   заливка, контур и тень — как у плиток в «Моей страничке». Раньше мост
   рисовал .pick панелью с нижним отступом и белым текстом (плитка-«карточка»
   старого дизайна), и блок выглядел чужим на фоне нового шаблона. */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.picks-grid > div { min-width: 0; }
.picks-grid .pick {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 16px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 14.5px;
  line-height: 1.3;
  text-align: center;
  box-shadow: var(--sh-hard-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.picks-grid .pick:hover { transform: translateY(-3px); box-shadow: var(--sh-hard); }
@media (max-width: 720px) {
  .picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Статистика ответов (blocks/answers_stats*.php) — секция «Ответы к тесту …».
   Разметка: .topic-stats > .topic > .qq.qa > (.question + .answer.ckeck +
   .cssProgress). В прохождении .answer.ckeck — «наклейка» с картинкой-значком
   сверху и полосами под низом; в статистике это строки-ответы под вопросом,
   поэтому переводим их в строку: текст слева, доля голосов полосой справа.
   Значок (::before) убираем — без data-answer он всегда ◆ и ничего не значит,
   состояние и так видно по заливке строки и по полосе. */
.topic-stats .qq.qa { margin: 0 0 var(--sp-4); }
.topic-stats .qq.qa:last-child { margin-bottom: 0; }
.topic-stats .question {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  text-align: left;
}
.topic-stats .answer.ckeck {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}
.topic-stats .answer.ckeck::before,
.topic-stats .answer.ckeck::after { content: none; }
.topic-stats .answer.ckeck > .text {
  flex: 1 1 auto;
  width: auto;
  padding: 0;
  font-size: var(--fs-base);
  text-align: left;
}
.topic-stats .answer.ckeck > .cssProgress { flex: 0 0 42%; margin: 0; padding: 0; }
.topic-stats .progress3 {
  height: 24px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  overflow: hidden;
}
.topic-stats .progress3.cssProgress-bg-success .cssProgress-bar,
.topic-stats .progress3 .cssProgress-success { background: var(--pop-mint); }
.topic-stats .progress3.cssProgress-bg-danger .cssProgress-bar,
.topic-stats .progress3 .cssProgress-danger { background: var(--pop-coral); }
.topic-stats .cssProgress-bar { border-radius: var(--r-full); }
/* Проценты: движок печатает .cssProgress-label ВНУТРИ полосы, а сама полоса —
   height:12px + overflow:hidden, из-за чего подпись обрезалась. Ставим её
   таблеткой у правого края: читается и на заливке, и на пустой дорожке. */
.topic-stats .cssProgress-label {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  margin: 0;
  padding: 1px 8px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .topic-stats { padding: 16px; }
  .topic-stats .qq.qa { padding: 14px; }
  .topic-stats .answer.ckeck { flex-direction: column; align-items: stretch; }
  .topic-stats .answer.ckeck > .cssProgress { flex: 1 1 auto; }
}


/* ============================================================
   ТЕЛЕФОН: КАРТИНКИ-ВАРИАНТЫ ПО ДВЕ В РЯД
   ============================================================
   Раньше на узком экране плитки-картинки вставали в столбик, и одна плитка
   занимала всю ширину с полями контейнера и карточки, то есть картинка была
   мелкой в «рамке». Теперь и в прохождении (theme/pass_test_image.php,
   theme/ajax/start_image.php — класс .qa-tiles/.qa-tiles-stage), и в сборке
   (theme/creating_test_image.php — .b-qa.qa-image) плитки встают по две в ряд,
   а боковые поля сведены к 6–8px: картинка занимает почти половину экрана. */
@media (max-width: 720px) {
  /* Контейнер страницы прохождения и сама карточка вопроса — тонкие поля */
  .qa-tiles-stage { padding-left: 6px; padding-right: 6px; }
  .b-qa.qa-create.qa-image { padding-left: 6px; padding-right: 6px; }
  .qq.qa-tiles { padding: 8px; }
  .b-qa.qa-image .qa { padding: 8px; }

  /* Сетка 2×N: шапка вопроса и «+» — на обе колонки, плитки — по две.
     .answers-tiles — страница «Ответы к тесту» для тестов с картинками:
     там плитки-варианты должны стоять так же, как при прохождении. */
  .qq.qa-tiles,
  .answers-tiles .qq,
  .b-qa.qa-image .qa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }
  .qq.qa-tiles > .question,
  .qq.qa-tiles > .error,
  .qq.qa-tiles > .btn-add,
  .answers-tiles .qq > .question,
  .b-qa.qa-image .qa > .question,
  .b-qa.qa-image .qa > .error,
  .b-qa.qa-image .qa > .btn-add,
  /* «Пропустить» — прямой ребёнок .qa (так её ищет js/main.js) */
  .b-qa.qa-image .qa > .btn-skip,
  .b-qa.qa-image .qa > .btn-edit { grid-column: 1 / -1; }
  .qq.qa-tiles > .question,
  .b-qa.qa-image .qa > .question { margin-bottom: 0; }
  .qq.qa-tiles > .answer_image,
  .b-qa.qa-image .qa > .answer_image { margin-top: 0; }

  /* Плитка — минимум «воздуха» внутри */
  .answer_image { padding: 4px; gap: 4px; }
}

/* ============================================================
   ПРОХОЖДЕНИЕ: ПОЛОСЫ «КАК ОТВЕЧАЛИ ДРУГИЕ»
   ============================================================
   js/main.js после ответа показывает .cssProgress нужного вопроса и красит
   полосу (#bar_…) классами cssProgress-success / cssProgress-danger, а в
   #l_… печатает проценты. Тонкая полоска 12px с серой подписью под ней читалась
   плохо — теперь это широкая дорожка, цвет полосы = верно/неверно, а процент
   вынесен «таблеткой» к правому краю дорожки. */
.qa-pass .progress3 {
  position: relative;
  height: 22px;
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  overflow: hidden;
}
.qa-pass .progress3.cssProgress-bg-success { border-color: var(--pop-mint); }
.qa-pass .progress3.cssProgress-bg-danger { border-color: var(--pop-coral); }
.qa-pass .cssProgress-bar.cssProgress-success { background: var(--pop-mint); }
.qa-pass .cssProgress-bar.cssProgress-danger { background: var(--pop-coral); }
.qa-pass .cssProgress-label {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  margin: 0;
  padding: 1px 8px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  white-space: nowrap;
}
/* В плитке-картинке полоса идёт от края до края */
.qa-pass .answer_image > .cssProgress { width: 100%; margin-top: 0; }

/* ── Статистика «Ответы к тесту» для тестов с картинками ─────
   blocks/answers_stats_image.php печатает выбор отвечавшего картинкой внутри
   .topic-stats: держим кадр компактным и по центру карточки вопроса.
   .select — «это его выбор» (право видеть правильный ответ есть не у всех,
   тогда правильные ответы не подсвечиваем). */
.topic-stats .answer_image.answers_a {
  max-width: 340px;
  margin: 0 auto var(--sp-3);
}
.topic-stats .answers-tiles .answer_image.answers_a { max-width: none; margin: 0; }
.topic-stats .answer_image.select { border-color: var(--pop-lavender); }

/* ============================================================
   «СВОИ ВОПРОСЫ»: ПЛАВАЮЩАЯ КНОПКА СОЗДАНИЯ ТЕСТА
   ============================================================
   theme/creating_test2.php печатает #create_test с классом .fixed-cta, а <main>
   получает .has-fixed-cta (нижний отступ, чтобы кнопка не закрывала последний
   вопрос). На телефоне — полоса во всю ширину внизу экрана, на ПК — по центру,
   шириной 420px. */
.has-fixed-cta { padding-bottom: 128px; }
#create_test.fixed-cta {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 90;
  width: min(420px, calc(100% - 32px));
  margin: 0;
  justify-content: center;
  box-shadow: 0 14px 40px rgba(6, 3, 14, .6);
}
@media (max-width: 720px) {
  .has-fixed-cta { padding-bottom: 104px; }
  #create_test.fixed-cta {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
  }
}

/* ============================================================
   ТЕЛЕФОН: ДЕКОР КАРТОЧКИ КОНСТРУКТОРА ЛОМАЛ ШИРИНУ ЭКРАНА
   ============================================================
   У карточки вопроса есть декоративный уголок — .question-card::before
   (radial-gradient, right: -60px). В конструкторе мост снимает с карточки
   обрезку (.b-qa.qa-create .qa { overflow: visible }), иначе не видно
   вынесенную вниз кнопку «Пропустить». Вместе с этим уголок выезжает за правый
   край экрана и расширяет layout-вьюпорт телефона: innerWidth становится 432–442
   вместо 390, из-за чего ВСЯ страница (и плитки-картинки) рисуется «мельче»
   и с полями. На узком экране декор не нужен — гасим его. */
@media (max-width: 720px) {
  .b-qa.qa-create .qa::before { content: none; }
}


/* ============================================================
   ПРОХОЖДЕНИЕ: ПОЛОСА ПРОГРЕССА И СТРОКИ ОТВЕТОВ
   ============================================================
   Полоса прогресса теста стала крупнее, а процент — «таблеткой» в палитре
   сайта; полосы распределения ответов лежат в строке варианта и не обрезают
   подпись процента. */
.quiz-progress-wrap { padding: 18px 22px; }
.quiz-progress-label { font-size: 16px; }
.quiz-progress-pct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .35);
  border-radius: var(--r-full);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
}
.quiz-topbar .progress { height: 16px; margin-top: 12px; }
.answer.ckeck > .cssProgress .progress3 {
  position: relative;
  height: 22px;
  background: var(--panel-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-full);
  overflow: hidden;
}
.answer.ckeck .cssProgress-label {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: block;
  margin: 0;
  padding: 1px 8px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  white-space: nowrap;
}
.answer.ckeck .progress3.cssProgress-bg-success .cssProgress-bar,
.answer.ckeck .cssProgress-bar.cssProgress-success { background: var(--pop-mint); }
.answer.ckeck .progress3.cssProgress-bg-danger .cssProgress-bar,
.answer.ckeck .cssProgress-bar.cssProgress-danger { background: var(--pop-coral); }
@media (max-width: 720px) {
  /* На телефоне текст и полоса в одну строку не влезают: полоса уезжает вниз,
     метка выбора остаётся рядом с текстом */
  .answer.ckeck { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .answer.ckeck > .cssProgress { flex: 1 1 100%; }
  .quiz-progress-wrap { padding: 14px 16px; }
  .quiz-progress-pct { font-size: 11.5px; padding: 4px 10px; }
}

/* ============================================================
   КОНСТРУКТОР «СВОИ ВОПРОСЫ»: ДОБАВЛЕННЫЙ ВОПРОС И ЧЕКБОКС
   ============================================================
   Блок, который js/main.js вставляет кнопкой «+», отличается от серверного
   только обёрткой «Добавить вариант»: у серверного это .qa-answer-add (с
   отступом), у вставленного — голый .text-center. Отступ задаём по самой кнопке,
   чтобы добавленный вопрос выглядел точно как остальные. */
._qa_block ._answer_add { margin-top: var(--sp-4); }
._qa_block ._answers_list + ._answers_list { margin-top: var(--sp-2); }

/* Чекбокс «это верный вариант» — заметнее: крупнее, в рамке и с подписью.
   Раньше это был маленький серый квадратик, который легко было не заметить. */
._answers_list .answer_ckeck { width: 78px; }
._answers_list .answer_ckeck label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
._answers_list .checkbox-custom {
  width: 30px;
  height: 30px;
  border-width: 2px;
  border-color: rgba(184, 146, 255, .5);
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 3px rgba(184, 146, 255, .08);
}
._answers_list .answer_ckeck label::after {
  content: 'верный';
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
._answers_list .answer_ckeck:has(input.checkbox:checked) .checkbox-custom {
  background: var(--pop-mint);
  border-color: var(--pop-mint);
  box-shadow: 0 0 0 4px rgba(77, 235, 184, .22);
}
._answers_list .answer_ckeck:has(input.checkbox:checked) label::after { color: var(--pop-mint); }

@media (max-width: 720px) {
  /* На телефоне подпись «верный» делала строку варианта на 5px шире экрана
     (innerWidth 395 вместо 390 — страница рисовалась «мельче»): убираем подпись
     и сужаем клетку, сам квадратик остаётся 30px. */
  ._answers_list .answer_ckeck { width: 62px; }
  ._answers_list .answer_ckeck label::after { content: none; }
}

/* ============================================================
   КНОПКА «СОЗДАТЬ ТЕСТ» НА СВОИХ ВОПРОСАХ — В ПАЛИТРЕ САЙТА
   ============================================================ */
#create_test.fixed-cta {
  background: var(--grad-accent);
  color: var(--on-accent);
  border-color: transparent;
  font-weight: var(--fw-bold);
}

/* Ряд кнопок результата: ровные отступы (в разметке задавался inline-стилем).
   Раньше отбивка была 4px и кнопки разной высоты: у .btn-accent мост снимает
   рамку (border: 0), а у .btn-dark она есть — нижние края не совпадали.
   Теперь у кнопок ряда общая высота 52px и внутренняя центровка «иконка+текст». */
.quiz-actions { margin-top: 22px; margin-bottom: 6px; row-gap: 12px; }
.quiz-actions--center {
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
  margin-bottom: 8px;
}
.b-result + .quiz-actions { margin-top: 24px; }
.quiz-actions--center > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   ПРАВДА / ЛОЖЬ В КОНСТРУКТОРЕ — ЦВЕТНЫЕ ПЛИТКИ (задача владельца)
   ──────────────────────────────────────────────────────────────────────
   В конструкторе обе плитки были одинаковыми (тёмная панель + иконка и
   серая подпись «Правда»/«Ложь»), различались только текстом. Теперь
   «Ложь» — коралловая, «Правда» — мятная: пара читается мгновенно,
   а выбранная плитка по-прежнему получает мятную заливку и рамку
   (класс .correct ставит js/main.js после /ajax/save/tf).
   ВАЖНО: правила только под .b-qa.qa-create. В прохождении (.ckeck_tf)
   цвета несут классы .correct/.incorrect, и подсказывать ответ заранее
   нельзя — там плитки остаются нейтральными. */
.b-qa.qa-create .answer_image.select_tf[data-answer="0"] {
  background: rgba(255, 107, 139, .12);
  border-color: rgba(255, 107, 139, .55);
}
.b-qa.qa-create .answer_image.select_tf[data-answer="0"]::after { color: var(--pop-coral); }
.b-qa.qa-create .answer_image.select_tf[data-answer="0"]:hover {
  border-color: var(--pop-coral);
  background: rgba(255, 107, 139, .18);
  box-shadow: 0 0 0 3px rgba(255, 107, 139, .22), var(--sh-hard);
}
.b-qa.qa-create .answer_image.select_tf[data-answer="1"] {
  background: rgba(77, 235, 184, .12);
  border-color: rgba(77, 235, 184, .55);
}
.b-qa.qa-create .answer_image.select_tf[data-answer="1"]::after { color: var(--pop-mint); }
.b-qa.qa-create .answer_image.select_tf[data-answer="1"]:hover {
  border-color: var(--pop-mint);
  background: rgba(77, 235, 184, .18);
  box-shadow: 0 0 0 3px rgba(77, 235, 184, .22), var(--sh-hard);
}
/* Выбранная плитка: js/main.js ставит .correct. У правил с [data-answer]
   специфичность выше, чем у .answer_image.correct, поэтому «выбор»
   подтверждаем отдельным правилом — иначе коралловая плитка «Ложь»
   осталась бы коралловой после ответа. */
.b-qa.qa-create .answer_image.select_tf.correct[data-answer] {
  background: rgba(77, 235, 184, .22);
  border-color: var(--pop-mint);
  box-shadow: 0 0 0 3px rgba(77, 235, 184, .22), var(--sh-hard);
}

/* ══════════════════════════════════════════════════════════════════════
   «ИЗМЕНИТЬ ОТВЕТЫ» НА ПК — КОМПАКТНАЯ ПИЛЮЛЯ ВВЕРХУ КАРТОЧКИ
   ──────────────────────────────────────────────────────────────────────
   Кнопка — первый ребёнок .qa (её ищет js/main.js через $(this).parent()),
   но в сетке карточки (см. блок «Конструктор теста») она получала
   grid-column 1/2 и растягивалась на половину ширины карточки. Теперь на ПК
   это маленькая пилюля в правом верхнем углу — «действие карточки», как в
   остальных блоках сайта; текст вопроса отступает от неё.
   grid-column/grid-row сбрасываем в auto: у абсолютного ребёнка
   грид-контейнера с явной grid-областью containing block — эта самая
   область, и right/top считались бы от неё, а не от карточки (та же грабля,
   что у .btn-skip в блоке «Пошаговое прохождение»). На телефоне (≤720px)
   правило не работает — там кнопки растянуты во всю ширину. */
@media (min-width: 721px) {
  .b-qa.qa-create .qa > .btn-edit {
    position: absolute;
    top: 16px;
    right: 20px;
    left: auto;
    grid-column: auto;
    grid-row: auto;
    order: 0;
    width: auto;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: var(--fs-xs);
    z-index: 3;
  }
  /* Текст вопроса не должен заезжать под кнопку (у «правда/ложь» и «своих
     вопросах» вопрос короткий, у текстовой сборки бывает длинным). */
  .b-qa.qa-create .qa > .question { padding-right: 178px; }
}

/* ══════════════════════════════════════════════════════════════════════
   КНОПКА «ДА!» В МОДАЛКЕ ЗАВЕРШЕНИЯ СБОРКИ — В ПАЛИТРЕ САЙТА
   ──────────────────────────────────────────────────────────────────────
   Кнопка приходит из bootstrap с классом .btn-success (зелёная) и выбивалась
   из оформления модалки. Теперь это акцентная кнопка сайта: тот же градиент
   и текст, что у .btn-accent (см. css/theme/style.css). */
#confirmation .btn-finish-modal,
#confirmation .btn-finish-modal:focus {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--glow);
}
#confirmation .btn-finish-modal:hover {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 10px 36px rgba(184, 146, 255, .38);
}

/* ══════════════════════════════════════════════════════════════════════
   ОТВЕТЫ НА РЕЗУЛЬТАТЕ И НА СТРАНИЦЕ «ОТВЕТЫ К ТЕСТУ»: СТРОКИ / ПАРЫ
   ──────────────────────────────────────────────────────────────────────
   Задача владельца: в результатах прохождения
     • текстовые варианты — каждый на новой строке (уже так, см. выше), но
       выглядели «плоско»: теперь у строки цветная грань слева (верно — мята,
       ошибка — коралл, свой выбор — лаванда) и мягкий перелив фона;
     • варианты-картинки — по ДВЕ в строке (не только на телефоне);
     • «правда/ложь» и «нравится/не нравится» — два блока в одной строке.
   Разметку печатают blocks/answers_stats*.php, поэтому у блоков появились
   классы-модификаторы .topic-stats--text / --tf. */

/* 1. Текстовые варианты: строка-карточка с цветной гранью. */
.topic-stats .answer.ckeck {
  padding: 14px 16px 14px 18px;
  border-left: 6px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 46%),
              var(--panel);
}
.topic-stats .answer.ckeck:hover { background: linear-gradient(90deg, rgba(184, 146, 255, .14),
    rgba(255, 255, 255, 0) 46%), var(--panel-2); }

/* Текст варианта и «таблетка» процента в статистике ВСЕГДА светлые.
   Правила «наклеек» прохождения (.answer.ckeck.correct|.incorrect, выше в файле)
   красят текст в --ink — на тёмной панели статистики он сливался с фоном («шрифт
   сливается на кнопках правды», задача владельца). Специфичность та же, наши
   правила ниже — значит выигрывают. */
.topic-stats .answer.ckeck > .text {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}
.topic-stats .answer.ckeck .cssProgress-label { color: var(--text-primary); }

/* Метка состояния — «таблетка» перед вариантом: верно / ошибка / выбор.
   У гостя и у того, кто ещё не проходил этот тест, $show_correct = 0, поэтому
   единственная метка — «выбор»: правильный ответ не подсказываем. */
.topic-stats .answer.ckeck.correct::before,
.topic-stats .answer.ckeck.incorrect::before,
.topic-stats .answer.ckeck.select::before {
  content: '';
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 11px;
  background: var(--ink);
  border: 2px solid var(--edge);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.topic-stats .answer.ckeck.correct {
  border-left-color: var(--pop-mint);
  background: linear-gradient(90deg, rgba(77, 235, 184, .2), rgba(255, 255, 255, 0) 54%),
              var(--panel);
}
.topic-stats .answer.ckeck.correct::before { content: 'верно'; color: var(--pop-mint); }
.topic-stats .answer.ckeck.incorrect {
  border-left-color: var(--pop-coral);
  background: linear-gradient(90deg, rgba(255, 107, 139, .2), rgba(255, 255, 255, 0) 54%),
              var(--panel);
}
.topic-stats .answer.ckeck.incorrect::before { content: 'ошибка'; color: var(--pop-coral); }
.topic-stats .answer.ckeck.select {
  border-left-color: var(--pop-lavender);
  background: linear-gradient(90deg, rgba(184, 146, 255, .22), rgba(255, 255, 255, 0) 54%),
              var(--panel);
}
.topic-stats .answer.ckeck.select::before { content: 'выбор'; color: var(--pop-lavender); }

/* 2. Картинки-варианты: две в ряд на любой ширине экрана. */
.topic-stats .answers-tiles .qq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.topic-stats .answers-tiles .qq > .question { grid-column: 1 / -1; }
/* Полоса «сколько выбрали» — таблетка процента уже описана выше; кадры в
   статистике не растягиваем: пусть будут в своих пропорциях. */
.topic-stats .answers-tiles .answer_image.answers_a { width: 100%; }
.topic-stats .answers-tiles .answer_image.answers_a img { max-height: 320px; object-fit: contain; }

/* 3. «Правда/ложь» (и «нравится/не нравится»): два ответа в одной строке плюс
   чип типа теста над вопросом — пара «Ложь/Правда» читается как два равных
   варианта, а не как «правильный/неправильный». */
.topic-stats--tf .qq.qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.topic-stats--tf .qq.qa > .question { grid-column: 1 / -1; }
.topic-stats--tf .answer.ckeck { margin-top: 0; }
.topic-stats--tf .question { display: flex; flex-direction: column; gap: 8px; }
.topic-stats--tf .question::after {
  content: 'правда или ложь';
  align-self: flex-start;
  padding: 3px 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(184, 146, 255, .35);
  border-radius: var(--r-full);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topic-stats--ld .question::after { content: 'нравится или не нравится'; }

@media (max-width: 720px) {
  .topic-stats .answers-tiles .qq { gap: 8px; }
  /* На телефоне две пары «верно/ошибка» в строку не читаются — встаём в столбик */
  .topic-stats--tf .qq.qa { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .topic-stats .answer.ckeck { padding: 12px 12px 12px 14px; }
}

/* ============================================================
   ЯЗЫКОВЫЕ ПОДПИСИ ПЛИТОК И ЧИПОВ (html[lang="…"])
   ============================================================
   Слова «Ложь / Правда», «Не нравится / Нравится» и подпись типа теста над
   вопросом рисует CSS (content:), а не шаблон. Русские значения — выше; блок
   языковых версий стоит В КОНЦЕ файла, поэтому у них приоритет (селектор с
   html[lang] специфичнее). Английский — «False / True», немецкий —
   «Falsch / Wahr», французский — «Faux / Vrai», итальянский — «Falso / Vero». */
html[lang="en"] .answer_image.select_tf::after, html[lang="en"] .answer_image.ckeck_tf::after, html[lang="en"] .answer_image.ckech_tf::after { content: 'False'; }
html[lang="en"] .answer_image.select_tf[data-answer="1"]::after, html[lang="en"] .answer_image.ckeck_tf[data-answer="1"]::after, html[lang="en"] .answer_image.ckech_tf[data-answer="1"]::after { content: 'True'; }
html[lang="de"] .answer_image.select_tf::after, html[lang="de"] .answer_image.ckeck_tf::after, html[lang="de"] .answer_image.ckech_tf::after { content: 'Falsch'; }
html[lang="de"] .answer_image.select_tf[data-answer="1"]::after, html[lang="de"] .answer_image.ckeck_tf[data-answer="1"]::after, html[lang="de"] .answer_image.ckech_tf[data-answer="1"]::after { content: 'Wahr'; }
html[lang="fr"] .answer_image.select_tf::after, html[lang="fr"] .answer_image.ckeck_tf::after, html[lang="fr"] .answer_image.ckech_tf::after { content: 'Faux'; }
html[lang="fr"] .answer_image.select_tf[data-answer="1"]::after, html[lang="fr"] .answer_image.ckeck_tf[data-answer="1"]::after, html[lang="fr"] .answer_image.ckech_tf[data-answer="1"]::after { content: 'Vrai'; }
html[lang="it"] .answer_image.select_tf::after, html[lang="it"] .answer_image.ckeck_tf::after, html[lang="it"] .answer_image.ckech_tf::after { content: 'Falso'; }
html[lang="it"] .answer_image.select_tf[data-answer="1"]::after, html[lang="it"] .answer_image.ckeck_tf[data-answer="1"]::after, html[lang="it"] .answer_image.ckech_tf[data-answer="1"]::after { content: 'Vero'; }
html[lang="en"] .answer_image.select_ld::after, html[lang="en"] .answer_image.ckeck_ld::after { content: 'Dislike'; }
html[lang="en"] .answer_image.select_ld[data-answer="1"]::after, html[lang="en"] .answer_image.ckeck_ld[data-answer="1"]::after { content: 'Like'; }
html[lang="de"] .answer_image.select_ld::after, html[lang="de"] .answer_image.ckeck_ld::after { content: 'Mag ich nicht'; }
html[lang="de"] .answer_image.select_ld[data-answer="1"]::after, html[lang="de"] .answer_image.ckeck_ld[data-answer="1"]::after { content: 'Mag ich'; }
html[lang="fr"] .answer_image.select_ld::after, html[lang="fr"] .answer_image.ckeck_ld::after { content: 'Je n\'aime pas'; }
html[lang="fr"] .answer_image.select_ld[data-answer="1"]::after, html[lang="fr"] .answer_image.ckeck_ld[data-answer="1"]::after { content: 'J\'aime'; }
html[lang="it"] .answer_image.select_ld::after, html[lang="it"] .answer_image.ckeck_ld::after { content: 'Non mi piace'; }
html[lang="it"] .answer_image.select_ld[data-answer="1"]::after, html[lang="it"] .answer_image.ckeck_ld[data-answer="1"]::after { content: 'Mi piace'; }
html[lang="en"] .topic-stats--tf .question::after { content: 'true or false'; }
html[lang="de"] .topic-stats--tf .question::after { content: 'wahr oder falsch'; }
html[lang="fr"] .topic-stats--tf .question::after { content: 'vrai ou faux'; }
html[lang="it"] .topic-stats--tf .question::after { content: 'vero o falso'; }
html[lang="en"] .topic-stats--ld .question::after { content: 'like or dislike'; }
html[lang="de"] .topic-stats--ld .question::after { content: 'mag ich oder nicht'; }
html[lang="fr"] .topic-stats--ld .question::after { content: 'j\'aime ou pas'; }
html[lang="it"] .topic-stats--ld .question::after { content: 'mi piace o no'; }