/* ═══════════════════════════════════════════════════════════
   testers.css — публичная страница /testers (PAGE-TESTERS-2)
   Арт во весь экран под приглушением цвета темы, витрина тестеров
   одной строкой, стопка текущих тестирований, «как устроено», правила.
═══════════════════════════════════════════════════════════ */

/* ── Фон: арт во весь экран, приглушённый цветом темы ──────
   Лежит над живыми облаками (у них тоже z-index 0, но они раньше в DOM)
   и под контентом. Сила приглушения и размытия — переменными, чтобы
   подстраивать на глаз, не трогая правила. */
.tst-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --tst-bg-veil: .68;                /* было .8 — затемнение на 15% мягче */
  --tst-bg-blur: 4px;
}
html[data-theme="light"] .tst-bg { --tst-bg-veil: .51; }   /* было .85 — осветление на 40% слабее */
/* Точка фокуса (--tst-bg-pos) ставится кликом по превью в /admin/testers и
   остаётся в кадре на любом экране (TST-BG-CROP). От неё же растёт
   увеличение — иначе scale снова срезал бы край с нужной стороны. */
.tst-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--tst-bg-pos, 50% 25%);
  filter: blur(var(--tst-bg-blur));
  transform: scale(1.06);            /* размытие не оставляет светлой каймы по краю */
  transform-origin: var(--tst-bg-pos, 50% 25%);
}
.tst-bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--c-bg); opacity: var(--tst-bg-veil);
}

/* Подвал лежит внутри .tst-page, поэтому отступа снизу нет: 72 px под
   подвалом давали пустую полосу, сквозь которую просвечивал арт
   (TST-FOOTER-GAP). Место под нижнюю навигацию телефона держит сам подвал. */
.tst-page { position: relative; z-index: 1; }

/* Стеклянная подложка блоков поверх арта */
.tst-glass {
  background: var(--c-raised);
  background: color-mix(in srgb, var(--c-raised) 82%, transparent);
  border: 1px solid var(--c-stroke);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* ── Шапка «Постер» (TST-HERO, вариант A) ─────────────────
   Первая фраза крупно — главное сообщение; остальной текст тише справа,
   под ним кнопка правил; ниже — цифры программы (моно, как таймеры). */
.tst-hero { padding: var(--page-top) 0 clamp(36px, 4.4vw, 60px); }
/* В покое заголовок вдвое меньше прежнего: в заставке он набирается по
   центру вдвое крупнее (scale 2) и при переезде плавно уменьшается
   (TST-HERO-2). Низ — 28 px: ровно половина на телефоне (22) мелковата. */
.tst-title {
  font-size: clamp(28px, 3.75vw, 52px); font-weight: 900;
  letter-spacing: -.045em; line-height: .92; margin: 0;
}
/* Заголовок и меню управления — одной строкой. Кнопки прижаты к правому
   краю, поэтому при раскрытии группа растёт влево, а правый край стоит */
.tst-hero-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 8px 0 clamp(20px, 2.4vw, 32px);
}
.tst-hero-top .tst-title { flex: 0 1 auto; min-width: 0; }
/* Два блока текста одного кегля в акцентных рамках без заливки, 1:2 */
.tst-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(12px, 1.4vw, 20px); align-items: stretch;
}
.tst-box {
  margin: 0; padding: clamp(18px, 2.2vw, 30px);
  border: 1.5px solid var(--c-accent); border-radius: 22px;
}
.tst-lead, .tst-rest {
  font-size: clamp(19px, 1.9vw, 28px); line-height: 1.3; letter-spacing: -.012em; text-wrap: pretty;
}
.tst-lead { font-weight: 700; color: var(--c-text); }
.tst-rest { font-weight: 500; color: var(--c-text-2); }
.tst-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.tst-stat-of { color: var(--c-text-2); font-size: .6em; margin-left: 2px; }
.tst-stats { display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 5.5vw, 88px); margin: clamp(32px, 3.8vw, 56px) 0 0; }
.tst-stat { display: flex; flex-direction: column-reverse; }   /* число над подписью */
.tst-stat dd {
  margin: 0; font-family: var(--f-mono); font-weight: 700; line-height: 1;
  font-size: clamp(34px, 3.9vw, 56px); font-variant-numeric: tabular-nums; color: var(--c-text);
}
.tst-stat dt {
  margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-2);
}

/* ── Витрина тестеров — одна строка ─────────────────────── */
.tst-roster { margin-bottom: clamp(44px, 6vw, 76px); }
.tst-roster-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-2);
}
.tst-roster-head span { color: var(--c-accent); font-family: var(--f-mono); }
/* Ряд карточек: запас по краям — под свечение действующих; карточки не
   тянутся по высоте за соседом, у которого раскрыта статистика */
.tst-roster-row {
  display: flex; align-items: flex-start; gap: clamp(6px, .8vw, 12px); overflow-x: auto;
  padding: 12px 14px 26px; margin: 0 -14px;
  scroll-snap-type: x proximity; scroll-padding-inline: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* Край, за которым ещё есть тестеры, тает (классы ставит testers.js) */
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
.tst-roster-row::-webkit-scrollbar { display: none; }
/* Список не влез — по краям место под стрелки: карточка встаёт рядом со
   стрелкой, а не под ней (класс ставит testers.js) */
.tst-roster-row.is-scrollable { padding-inline: 58px; scroll-padding-inline: 58px; }
.tst-roster-row.has-prev { --fade-l: 58px; }
.tst-roster-row.has-next { --fade-r: 58px; }
/* Стрелки листания: по краям ряда, на высоте аватарок. Видны, только
   когда в ту сторону есть продолжение списка */
.tst-roster-wrap { position: relative; }
/* Полоса — во всю ширину экрана (владелец, 2026-10-10): карточки уходят за
   край, а не обрезаются полем страницы. --g — поле страницы (экран минус
   ширина контента пополам, 100cqw — ширина .tst-roster); первая карточка и
   стрелки — на линии контента */
.tst-roster { container-type: inline-size; }
.tst-roster-wrap { --g: max(0px, calc((100vw - 100cqw) / 2)); margin-inline: calc(-1 * var(--g)); }
.tst-roster-row, .tst-roster-row.is-scrollable { margin: 0; padding-inline: var(--g); scroll-padding-inline: var(--g); }
/* Стрелки — у краёв экрана, там, где ряд тает: на линии контента они
   наезжали на проезжающие под ними карточки */
.tst-roster-wrap .tst-roster-nav.is-prev { left: clamp(4px, 1.5vw, 24px); }
.tst-roster-wrap .tst-roster-nav.is-next { right: clamp(4px, 1.5vw, 24px); }
.tst-roster-wrap .tst-roster-row.has-prev { --fade-l: clamp(48px, 8vw, 140px); }
.tst-roster-wrap .tst-roster-row.has-next { --fade-r: clamp(48px, 8vw, 140px); }
.tst-roster-nav {
  position: absolute; z-index: 2; top: 56px; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--c-stroke-s); cursor: pointer;
  background: color-mix(in srgb, var(--c-raised) 72%, transparent); color: var(--c-text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .2s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.tst-roster-nav svg { width: 20px; height: 20px; }
.tst-roster-nav.is-prev { left: -10px; }
.tst-roster-nav.is-next { right: -10px; }
.tst-roster-nav:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tst-roster-nav:active { transform: scale(.92); }
.tst-roster-nav:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.tst-roster-nav[hidden] { display: inline-flex; opacity: 0; pointer-events: none; }
/* На время «падения» тестеров стрелок нет — появятся вместе с рядом */
/* Пока тестеры появляются, стрелок нет совсем — даже при наведении:
   ряд в это время двигает анимация. .is-ready ставит testers.js */
html.tst-intro .tst-roster-wrap:not(.is-ready) .tst-roster-nav {
  visibility: hidden; opacity: 0; pointer-events: none; transition: none;
}
/* Маска режет всё за рамкой ряда — на время интро снята, иначе обрезала
   бы «падающие» крупные карточки */
.tst-roster-row.is-intro, .tst-roster-row.is-intro-scroll { -webkit-mask-image: none; mask-image: none; }
/* TST-CARD-3: аватар крупно, под ним ★ рейтинг; справа — ник, статус,
   «сейчас тестирует». Подложки нет ни у кого (правка владельца): карточки
   прямо на фоне, читаемость держит мягкая тень под текстом. У действующих —
   эффект: аватар в акцентной обводке со свечением (ник — без градиента).
   Статистика — выпадашка под круглой кнопкой (testers.js). */
.tst-person {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; min-width: 260px; max-width: 360px;
  padding: 16px 12px 10px; border-radius: 24px;
}
.tst-pc-top { display: flex; align-items: flex-start; gap: 16px; }
.tst-pc-side { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
/* Ник — вровень с верхней кромкой аватарки */
.tst-pc-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tst-person .tst-ava { width: 100px; height: 100px; font-size: 36px; }
.tst-person.is-active .tst-ava {
  box-shadow: 0 0 0 3px var(--c-accent), 0 0 24px color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.tst-rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-weight: 700; }
/* Сворачиваемые блоки карточки: ник (виден, пока статистика закрыта) и
   сама статистика (наоборот) */
.tst-pc-fold { display: grid; grid-template-rows: 1fr; align-self: stretch;
  transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
.tst-pc-fold > div { overflow: hidden; min-height: 0; }
.tst-person.is-open .tst-pc-nickwrap { grid-template-rows: 0fr; opacity: 0; }
/* Круглая кнопка статистики — под статусом: видна при наведении на
   карточку (на сенсорных — всегда). Пока статистика раскрыта — спрятана и
   не занимает места; через 5 с testers.js закрывает выпадашку, и кнопка
   возвращается, только если курсор ещё на карточке — это решает :hover.
   Селектор с .tst-person — сильнее общего .tst-round-toggle ниже по файлу
   (там opacity .82 и свой transition) */
.tst-person .tst-pc-toggle {
  margin: 10px 0 0; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  opacity: 0; transform: scale(.8); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, height .3s ease, margin .3s ease;
}
.tst-person:not(.is-open):hover .tst-pc-toggle,
.tst-person:not(.is-open) .tst-pc-toggle:focus-visible { opacity: .82; transform: none; pointer-events: auto; }
.tst-person:not(.is-open) .tst-pc-toggle:hover { opacity: 1; }
.tst-pc-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.tst-person.is-open .tst-pc-toggle { height: 0; margin-top: 0; }
@media (hover: none) {
  .tst-person:not(.is-open) .tst-pc-toggle { opacity: .82; transform: none; pointer-events: auto; width: 44px; height: 44px; }
}
.tst-pc-drop { grid-template-rows: 0fr; opacity: 0; }
.tst-person.is-open .tst-pc-drop { grid-template-rows: 1fr; opacity: 1; }
.tst-pc-drop .tst-meta:first-child { margin-top: 10px; }
/* Внутри выпадашки тень под текстом не нужна — читалось как затемнение.
   Подпись белая и плотнее, первое слово — акцентом */
.tst-pc-drop .tst-meta { text-shadow: none; font-size: 14px; font-weight: 700; color: var(--c-text); }
.tst-pc-drop .tst-meta b { color: var(--c-accent); font-weight: 800; }
/* Бывших не приглушаем — у них строка статуса (TST-STATUS-LINE) */
.tst-status {
  margin-top: 0; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent);
}
.tst-status.is-retired { color: var(--c-muted); }
.tst-now { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
.tst-now b { color: var(--c-text); font-weight: 700; }
.tst-flame { width: 15px; height: 15px; color: var(--c-accent); fill: var(--c-accent); flex-shrink: 0; }
.tst-streak { display: inline-flex; align-items: center; gap: 2px; }
.tst-ava {
  position: relative;
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 24px; color: #fff;
}
/* Буква лежит под картинкой: не загрузилась аватарка — видна буква */
.tst-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tst-person .tst-nick, .tst-person .tst-status, .tst-person .tst-now,
.tst-person .tst-meta, .tst-person .tst-rate { text-shadow: 0 1px 14px var(--c-bg); }
/* Снизу запас под хвосты букв (y, g): обёртка ника режет всё за краем */
.tst-nick { font-weight: 800; font-size: 19px; line-height: 1.2; padding-bottom: 3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tst-streak { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--c-accent); }
.tst-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; white-space: nowrap;
  font-size: 13px; color: var(--c-text-2); font-family: var(--f-mono);
}
/* Звезда рейтинга — иконка lucide, залита акцентом; число — как было */
.tst-star { width: 14px; height: 14px; fill: var(--c-accent); stroke: var(--c-accent); flex-shrink: 0; }
.tst-rating { font-size: 14px; }
.tst-roster-empty { color: var(--c-muted); font-size: 14px; padding: 18px 20px; border-radius: 16px; }

/* Стопка тестирований (карточки, таймер, листание) — static/css/tst-deck.css:
   общая с главной (секция «Проверяем перед релизом»). */

/* ── Как это устроено ───────────────────────────────────── */
.tst-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0 clamp(52px, 7vw, 92px); }
.tst-how-item { padding: 24px 22px; border-radius: 20px; }
.tst-how-num { font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--c-accent); }
.tst-how-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 10px 0 8px; }
.tst-how-text { font-size: 13.5px; line-height: 1.65; color: var(--c-text-2); }

/* ── Правила: кнопка в шапке и шторка справа ────────────── */
/* В покое — круг со значком на акценте (13 + 18 + 13 = 44); при наведении,
   фокусе или когда блок раскрыт, разворачивается в подпись и сдвигает
   соседние кнопки вправо. Ширина auto не анимируется — тянем отступы и
   ширину подписи. */
.tst-rules-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-height: 44px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c-accent); background: var(--c-accent);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--c-text); white-space: nowrap;
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  /* Длительность здесь — закрытие: оно медленнее раскрытия, чтобы соседняя
     кнопка успевала раскрыться, пока эта сжимается */
  transition: padding .75s cubic-bezier(.22,1,.36,1), gap .75s cubic-bezier(.22,1,.36,1),
              background-color .75s ease, border-color .75s ease, color .75s ease,
              backdrop-filter .75s ease, -webkit-backdrop-filter .75s ease;
}
/* В покое круг акцентный в обеих темах — значок всегда белый: var(--c-text)
   на светлой теме тёмный и почти сливался с красным */
.tst-rules-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: #fff; transition: color .75s ease; }
/* Ширина подписи — доля грид-колонки: тянется ровно до ширины текста,
   в отличие от max-width, где видимая часть доезжала раньше конца анимации */
.tst-btn-text {
  display: grid; grid-template-columns: 0fr; opacity: 0;
  transition: grid-template-columns .75s cubic-bezier(.22,1,.36,1), opacity .45s ease;
}
.tst-btn-text > span { overflow: hidden; min-width: 0; }
.tst-rules-btn.is-open, .tst-rules-btn:focus-visible, .tst-rules-btn[aria-expanded="true"],
.tst-hero-actions:not(.tst-menu-js) .tst-rules-btn {
  gap: 10px; padding: 0 18px 0 14px; transition-duration: .7s;   /* раскрытие — чуть быстрее закрытия */
  background: color-mix(in srgb, var(--c-raised) 72%, transparent); border-color: var(--c-accent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tst-rules-btn.is-open svg, .tst-rules-btn:focus-visible svg,
.tst-rules-btn[aria-expanded="true"] svg,
.tst-hero-actions:not(.tst-menu-js) .tst-rules-btn svg { color: var(--c-accent); }
.tst-rules-btn.is-open .tst-btn-text, .tst-rules-btn:focus-visible .tst-btn-text,
.tst-rules-btn[aria-expanded="true"] .tst-btn-text,
.tst-hero-actions:not(.tst-menu-js) .tst-btn-text {
  grid-template-columns: 1fr; opacity: 1; transition-duration: .7s;
}
@media (hover: none) {
  /* Наведения нет — кнопки сразу развёрнуты, как были */
  .tst-rules-btn {
    gap: 10px; padding: 0 18px 0 14px;
    background: color-mix(in srgb, var(--c-raised) 72%, transparent); border-color: var(--c-stroke-s);
  }
  .tst-rules-btn svg { color: var(--c-accent); }
  .tst-btn-text { grid-template-columns: 1fr; opacity: 1; }
}
.tst-sheet { position: fixed; inset: 0; z-index: 1200; }
.tst-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s ease; }
.tst-sheet-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  display: flex; flex-direction: column; outline: none;
  background: var(--c-base); border-left: 1px solid var(--c-stroke-s);
  box-shadow: -30px 0 80px rgba(0,0,0,.35);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.tst-sheet.is-open .tst-sheet-backdrop { opacity: 1; }
.tst-sheet.is-open .tst-sheet-panel { transform: none; }
.tst-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--c-stroke);
}
.tst-sheet-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.tst-sheet-close {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-stroke-s); background: none; color: var(--c-text);
}
.tst-sheet-close:hover { border-color: var(--c-accent); }
.tst-sheet-close svg { width: 20px; height: 20px; }
.tst-sheet-body { padding: 22px 24px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
html.tst-sheet-lock { overflow: hidden; }

/* ── Меню управления (TST-CONTROLS): все кнопки — как «Правила» ── */
.tst-ctl-form { display: contents; }
a.tst-rules-btn, span.tst-rules-btn { color: var(--c-text); text-decoration: none; font-size: 14px; font-weight: 700; }
.tst-rules-btn.is-static { cursor: default; color: var(--c-text-2); }
.tst-rules-btn.is-static:hover { border-color: var(--c-stroke-s); }
.tst-rules-btn.is-static.is-open svg { color: var(--c-muted); }
.tst-rules-btn[aria-expanded="true"] { border-color: var(--c-accent); }

/* Окно подтверждения «Отойти от дел» (TST-RETIRE) */
.tst-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tst-modal[hidden] { display: none; }
.tst-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s ease; }
.tst-modal-box {
  position: relative; width: min(460px, 100%); padding: 26px 24px 20px; border-radius: 22px; outline: none;
  background: var(--c-base); border: 1px solid var(--c-stroke-s); box-shadow: 0 30px 80px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.tst-modal.is-open .tst-modal-backdrop { opacity: 1; }
.tst-modal.is-open .tst-modal-box { opacity: 1; transform: none; }
.tst-modal-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; }
.tst-modal-text { font-size: 14px; line-height: 1.65; color: var(--c-text-2); margin: 0 0 20px; }
.tst-modal-list { margin: 0 0 20px; padding-left: 20px; font-size: 14px; line-height: 1.8; }
.tst-modal-list a { color: var(--c-accent); text-decoration: none; }
.tst-modal-list a:hover { text-decoration: underline; }
.tst-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; }
/* Английских правил ещё нет — честно говорим, что текст русский */
.tst-rules-note {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--c-accent); background: var(--c-accent-s);
  font-size: 13px; line-height: 1.55; color: var(--c-text);
}
.tst-modal-actions .btn { min-height: 44px; }

/* Анкета (HOME-TESTERS) — в шторке; поля — как в форме отчёта Space */
.tst-apply-intro { font-size: 14px; line-height: 1.65; color: var(--c-text-2); margin: 0 0 18px; }
.tst-apply-form { display: flex; flex-direction: column; gap: 16px; }
.tst-apply-form .btn { align-self: flex-start; min-height: 44px; }

/* Личная цифра (TST-REWARDS-PANEL) — самая правая, в акцентной карточке;
   клик раскрывает панель наград во всю ширину под цифрами */
.tst-stat--me {
  position: relative; margin-left: auto; padding: 14px 18px 12px; border-radius: 18px;
  background: var(--c-accent); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--c-accent) 70%, transparent);
  transition: filter .18s ease;
}
.tst-stat--me dd, .tst-stat--me dt, .tst-stat--me .tst-stat-of { color: #fff; }
.tst-stat--me:hover { filter: brightness(1.07); }
.tst-stat-hit { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; border-radius: inherit; }
.tst-stat-hit:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
.tst-rewards-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); }
.tst-rewards-panel > div { overflow: hidden; min-height: 0; }
.tst-rewards-panel.is-open { grid-template-rows: 1fr; }
.tst-rewards-row { display: flex; gap: 14px; overflow-x: auto; padding: 18px 2px 6px; scroll-snap-type: x proximity; }
.tst-rw-card {
  position: relative; flex: 0 0 auto; width: 240px; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  display: flex; align-items: flex-end; text-decoration: none; color: var(--c-text); scroll-snap-align: start;
  background: var(--c-raised); border: 1px solid var(--c-stroke-s); transition: border-color .18s ease;
}
.tst-rw-card.is-due, .tst-rw-card:hover { border-color: var(--c-accent); }
.tst-rw-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tst-rw-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-bg) 90%, transparent) 22%, transparent 78%);
}
.tst-rw-body { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; }
.tst-rw-body b { font-size: 16px; font-weight: 800; line-height: 1.2; }
.tst-rw-body small { font-size: 12px; color: var(--c-text-2); }
.tst-rw-state {
  align-self: flex-start; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-2); border: 1px solid var(--c-stroke-s);
  background: color-mix(in srgb, var(--c-bg) 60%, transparent);
}
.tst-rw-state.is-due { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }

/* Архив (TST-ARCHIVE): отступы — как у стопки текущих; пока растёт
   акцентная полоса, карточки скрыты */
.tst-archive { margin-bottom: clamp(52px, 7vw, 92px); }
.tst-deck-stage.is-pending .tst-card, .tst-deck-stage.is-pending .tst-nav { opacity: 0 !important; }


/* ══ Tester's Space (/testers/<id>) ════════════════════════ */
.tsp-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: var(--page-top);
}
.tsp-eyebrow { margin: 0; }
.tsp-back {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 600; color: var(--c-text-2); text-decoration: none;
}
.tsp-back:hover { color: var(--c-accent); }
.tsp-head {
  position: relative; overflow: hidden; border-radius: 24px; margin: 8px 0 22px;
  min-height: clamp(260px, 32vw, 380px); display: flex; align-items: flex-end;
  background: var(--c-raised); border: 1px solid var(--c-stroke);
}
.tsp-head-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tsp-head-body {
  position: relative; width: 100%; padding: clamp(20px, 3.4vw, 40px);
  display: flex; flex-direction: column; gap: 10px;
}
.tsp-title {
  font-size: clamp(34px, 5.4vw, 72px); font-weight: 900; letter-spacing: -.04em;
  line-height: .98; margin: 0;
}
/* Нижний отступ — до футера: он лежит в .tst-page без своего отступа
   (TST-FOOTER-GAP), и без этого прилипал к ленте (TST-FEED-GAP) */
.tsp-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start;
  margin-bottom: clamp(48px, 6vw, 88px);
}
button.tsp-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit;
}
button.tsp-link:hover { text-decoration: underline; }
.tsp-main, .tsp-aside { display: flex; flex-direction: column; gap: 18px; }
.tsp-card { padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; }
.tsp-card-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; }
.tsp-text { font-size: 14px; line-height: 1.65; color: var(--c-text-2); margin: 0 0 10px; }
.tsp-muted { color: var(--c-muted); }
.tsp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tsp-actions form { margin: 0; }
.tsp-actions .btn { min-height: 44px; }
.tsp-danger { color: var(--c-accent); }
.tsp-role {
  display: inline-flex; padding: 6px 12px; border-radius: 999px; margin-bottom: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--c-high); color: var(--c-text); border: 1px solid var(--c-stroke-s);
}
.tsp-role--tester { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* Локер: идёт отбор, файлы закрыты */
.tsp-lock {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px;
  background: var(--c-high); border: 1px dashed var(--c-stroke-s);
}
.tsp-lock-icon { font-size: 22px; line-height: 1; }
.tsp-lock-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.tsp-inline-timer { font-size: 15px; display: inline; }

.tsp-file {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--c-stroke);
}
.tsp-file:first-of-type { border-top: none; }
.tsp-file-name { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 13px; word-break: break-all; }
.tsp-file-size { font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.tsp-file .btn { min-height: 44px; display: inline-flex; align-items: center; }
/* Копия участника собирается: вместо кнопки — полоса «подготовка файлов» */
.tsp-file-prep {
  display: none; position: relative; overflow: hidden; align-items: center; min-height: 44px;
  padding: 0 14px; border-radius: 10px; background: var(--c-high);
  font-size: 13px; font-weight: 600; color: var(--c-text-2); white-space: nowrap;
}
.tsp-file-prep::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%;
  background: var(--c-accent); animation: tspPrep 1.2s ease-in-out infinite;
}
@keyframes tspPrep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.tsp-file.is-preparing .tsp-file-prep { display: inline-flex; }
.tsp-file.is-preparing .btn { display: none; }
@media (prefers-reduced-motion: reduce) { .tsp-file-prep::after { animation: none; width: 100%; opacity: .35; } }
.tsp-rules { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.tsp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.tsp-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-accent); flex-shrink: 0; }
.tsp-check a { color: var(--c-accent); }
/* Правила прямо над галочкой — читаются, не уходя со страницы */
.tsp-rules-box {
  width: 100%; max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px; border-radius: 14px; font-size: 14px;
  background: var(--c-base); border: 1px solid var(--c-stroke-s);
}

/* Лента */
.tsp-ev { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-stroke); }
.tsp-ev:first-of-type { border-top: none; }
.tsp-ev-ava { width: 32px; height: 32px; font-size: 13px; }
.tsp-ev-ava--sys { background: var(--c-high); }
.tsp-ev-body { font-size: 14px; line-height: 1.5; color: var(--c-text-2); }
.tsp-ev-body b { color: var(--c-text); }
.tsp-ev-time { display: block; font-size: 11px; color: var(--c-muted); font-family: var(--f-mono); margin-top: 2px; }

/* ── Поля форм Space (3б) ── */
.tsp-input {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; box-sizing: border-box;
  background: var(--c-base); border: 1px solid var(--c-stroke-s); color: var(--c-text);
  font: inherit; font-size: 15px; line-height: 1.5; resize: vertical;
}
.tsp-input:focus { outline: none; border-color: var(--c-accent); }
.tsp-field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.tsp-field > span, .tsp-field > legend {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted); padding: 0;
}
.tsp-field > legend { margin-bottom: 8px; }
.tsp-field small { font-size: 12px; line-height: 1.5; }
.tsp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Звёзды: радиокнопки в обратном порядке + row-reverse, чтобы
   :checked ~ label красил все звёзды до выбранной */
.tsp-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.tsp-stars input, .tsp-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tsp-stars label {
  width: 44px; line-height: 44px; text-align: center; font-size: 30px;
  color: var(--c-stroke-s); cursor: pointer; transition: color .15s;
}
.tsp-stars label:hover, .tsp-stars label:hover ~ label, .tsp-stars input:checked ~ label { color: var(--c-accent); }
.tsp-stars input:focus-visible + label { outline: 2px solid var(--c-accent); outline-offset: -4px; border-radius: 10px; }
.tsp-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.tsp-seg label { position: relative; }
.tsp-seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--c-stroke-s); background: var(--c-base); font-size: 14px; font-weight: 600; cursor: pointer;
}
.tsp-seg input:checked + span { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tsp-seg input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ── Отчёты ── */
.tsp-report-new { margin-bottom: 6px; }
.tsp-report-new > summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.tsp-report-new > summary::-webkit-details-marker { display: none; }
.tsp-report-new[open] > summary { display: none; }
.tsp-report-form { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.tsp-report { padding: 16px 0; border-top: 1px solid var(--c-stroke); }
.tsp-report:first-of-type { border-top: none; }
.tsp-report-new + .tsp-report { border-top: 1px solid var(--c-stroke); }
.tsp-report-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; }
.tsp-report-head .tsp-ev-time { display: inline; margin: 0 0 0 auto; }
.tsp-report-stars { color: var(--c-accent); letter-spacing: 2px; font-size: 16px; }
.tsp-report-stars span { color: var(--c-stroke-s); }
.tsp-report-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 13px; }
.tsp-report-facts div { display: flex; gap: 6px; }
.tsp-report-facts dt { color: var(--c-muted); }
.tsp-report-facts dt::after { content: ':'; }
.tsp-report-facts dd { margin: 0; color: var(--c-text); font-weight: 600; }
.tsp-report-text {
  font-size: 14px; line-height: 1.65; color: var(--c-text-2); margin: 10px 0 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tsp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.tsp-photo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tsp-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; background: var(--c-high);
}
.tsp-photo form { margin: 0; }
.tsp-photo .btn { width: 100%; min-height: 44px; justify-content: center; }
.tsp-photo-in {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  font-size: 12px; font-weight: 700; color: var(--c-muted);
}

/* ── Итоги (4а): решение владельца по каждому тестеру ── */
.tsp-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 0; border-top: 1px solid var(--c-stroke);
}
.tsp-verdict:first-of-type { border-top: none; }
.tsp-verdict-who { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; font-size: 14px; }
.tsp-verdict-who span { font-size: 12px; font-family: var(--f-mono); color: var(--c-muted); }
.tsp-verdict-state {
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--c-text-2); border: 1px solid var(--c-stroke-s);
}
/* Зелёного на сайте нет: подтверждено — акцент, не засчитано — нейтрально */
.tsp-verdict-state.is-ok { color: #fff; border-color: var(--c-accent); background: var(--c-accent); }
.tsp-verdict-state.is-no { color: var(--c-muted); border-color: var(--c-stroke-s); }
.tsp-verdict-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; margin: 0; }
.tsp-verdict-form .btn { min-height: 44px; }
/* Итог для самого тестера — после подведения */
.tsp-verdict-me {
  display: inline-flex; padding: 8px 14px; margin: 4px 0 10px; border-radius: 12px;
  font-size: 14px; font-weight: 700; border: 1px solid var(--c-stroke-s);
}
.tsp-verdict-me.is-ok { color: var(--c-accent); border-color: var(--c-accent); background: var(--c-accent-s); }
.tsp-verdict-me.is-no { color: var(--c-text-2); border-color: var(--c-stroke-s); }
/* ── Награда (4в): выбор модели, мода или модпака ── */
.tsp-reward-form { display: flex; flex-direction: column; gap: 8px; }
.tsp-reward-group {
  margin: 10px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted);
}
.tsp-reward-opt {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid var(--c-stroke-s); background: var(--c-base); cursor: pointer;
}
.tsp-reward-opt:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-s); }
.tsp-reward-opt input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--c-accent); }
.tsp-reward-opt img { width: 56px; height: 42px; flex-shrink: 0; object-fit: cover; border-radius: 8px; background: var(--c-high); }
.tsp-reward-opt b { display: block; font-size: 14px; }
.tsp-reward-opt small { display: block; font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.tsp-reward-confirm { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-stroke); }
.tsp-reward-confirm .btn { min-height: 44px; }

/* Серия (4б): сейчас подряд, сколько даст этот тест, сколько до подписки */
.tsp-streak { font-size: 14px; line-height: 1.6; color: var(--c-text-2); margin: 0 0 10px; }
.tsp-streak b { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text); font-weight: 800; margin-right: 4px; }

/* ── Недочёты ── */
/* Новые недочёты — только в отчёте: в ленте кнопка к полям отчёта */
.tsp-issue-add-open, .tsp-issue-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.tsp-issue-add-open { margin-bottom: 6px; }
.tsp-issue-add-open svg, .tsp-issue-more svg { width: 16px; height: 16px; }
/* Поля недочётов в форме отчёта: «+» добавляет, «×» убирает */
.tsp-issue-rows { display: flex; flex-direction: column; gap: 8px; }
.tsp-issue-row { display: flex; gap: 8px; align-items: flex-start; }
.tsp-issue-row .tsp-input { flex: 1; min-width: 0; resize: vertical; }
.tsp-issue-del {
  flex: none; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-stroke-s); background: transparent; color: var(--c-text-2);
}
.tsp-issue-del:hover { color: var(--c-accent); border-color: var(--c-accent); }
.tsp-issue-del svg { width: 18px; height: 18px; }
.tsp-issue-del[hidden], .tsp-issue-more[hidden] { display: none; }
.tsp-issue-more { align-self: flex-start; }
/* Недочёты внутри показанного отчёта — ссылки на них в ленте */
.tsp-report-issues { margin-top: 12px; }
.tsp-report-issues-title {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted);
}
.tsp-report-issues ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--c-text-2); }
.tsp-report-issues a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--c-stroke-s); overflow-wrap: anywhere; }
.tsp-report-issues a:hover { color: var(--c-text); border-color: var(--c-accent); }
.tsp-issue:target { scroll-margin-top: 120px; }
/* Сворачиваемый блок (отчёты) — круглая кнопка, как категории /account */
.tsp-fold-head {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; cursor: pointer; font: inherit;
}
.tsp-fold-head:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 8px; }
.tst-round-toggle {
  flex: none; margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff; opacity: .82; transition: opacity .18s ease;
}
.tst-round-toggle svg { width: 18px; height: 18px; transition: transform .32s cubic-bezier(.22,1,.36,1); }
.tsp-fold-head:hover .tst-round-toggle { opacity: 1; }
.tsp-fold .tsp-card-title { margin-bottom: 8px; }
.tsp-fold-body { display: grid; grid-template-rows: 1fr; }
.tsp-fold-body > div { overflow: hidden; min-height: 0; }
.tsp-fold.is-ready .tsp-fold-body { transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.tsp-fold.is-collapsed .tsp-fold-body { grid-template-rows: 0fr; }
.tsp-fold.is-collapsed .tsp-card-title { margin-bottom: 0; }
.tsp-fold.is-collapsed .tst-round-toggle svg { transform: rotate(180deg); }
/* Файлы в узкой колонке: имя — строкой, размер и кнопка — под ним */
.tsp-aside .tsp-file { flex-wrap: wrap; gap: 8px 12px; }
.tsp-aside .tsp-file-name { flex: 1 1 100%; }
.tsp-aside .tsp-file .btn, .tsp-aside .tsp-file-prep { margin-left: auto; }
.tsp-issues-err { color: var(--c-accent); font-size: 13px; margin: 6px 0; }
.tsp-issue { position: relative; display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--c-stroke); }
.tsp-issue-main { flex: 1; min-width: 0; }
.tsp-issue-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.tsp-issue-name { font-size: 14px; color: var(--c-text); }
.tsp-issue-staff { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.tsp-issue-head .tsp-ev-time { display: inline; margin: 0; }
.tsp-issue-text {
  margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--c-text-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Пометки владельца. «Акцент» — ещё и полоса слева, чтобы важное
   находилось глазами при прокрутке */
.tsp-mark {
  margin-left: auto; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--c-high); color: var(--c-text); border: 1px solid var(--c-stroke-s);
}
.tsp-issue.is-fixed .tsp-mark::before { content: '✓ '; }
.tsp-issue.is-fixed > .tsp-issue-main > .tsp-issue-text { color: var(--c-muted); }
.tsp-issue.is-progress .tsp-mark { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.tsp-issue.is-notabug .tsp-mark { color: var(--c-muted); }
.tsp-issue.is-accent .tsp-mark { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tsp-issue.is-accent::before {
  content: ''; position: absolute; left: -14px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px; background: var(--c-accent);
}
.tsp-issue-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.tsp-metoo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--c-stroke-s); background: transparent; color: var(--c-text-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tsp-metoo:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-text); }
.tsp-metoo.on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tsp-metoo:disabled { cursor: default; opacity: .7; }
.tsp-metoo-n { font-family: var(--f-mono); }
.tsp-metoo-n:empty { display: none; }
.tsp-link-btn {
  min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--c-text-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tsp-link-btn:hover { color: var(--c-accent); }
.tsp-mark-select {
  margin-left: auto; min-height: 44px; padding: 0 10px; border-radius: 10px;
  background: var(--c-base); border: 1px solid var(--c-stroke-s); color: var(--c-text); font: inherit; font-size: 13px;
}
.tsp-replies { display: flex; flex-direction: column; }
.tsp-replies:not(:empty) { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--c-stroke); }
.tsp-reply { display: flex; gap: 10px; padding: 8px 0; }
.tsp-reply .tsp-ev-ava { width: 26px; height: 26px; font-size: 11px; }
.tsp-reply-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.tsp-reply-form .tsp-input { flex: 1; }
@media (max-width: 767px) {
  .tsp-row2 { grid-template-columns: 1fr; }
  .tsp-reply-form { flex-direction: column; align-items: stretch; }
  .tsp-issue.is-accent::before { left: -10px; }
}

/* Участники */
.tsp-people-head {
  display: flex; justify-content: space-between; margin: 12px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted);
}
.tsp-people-head:first-of-type { margin-top: 0; }
.tsp-people-head span { font-family: var(--f-mono); color: var(--c-accent); }
.tsp-people { display: flex; flex-wrap: wrap; gap: 8px; }
.tsp-person {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border-radius: 999px; background: var(--c-high); font-size: 13px; font-weight: 600;
}
.tsp-person-ava { width: 28px; height: 28px; font-size: 12px; }
/* TST-DECLINE / TST-SEL-EARLY: управление владельца в «Участниках» */
.tsp-person-tag { font-style: normal; font-size: 11px; color: var(--c-muted); }
.tsp-person-act { display: inline-flex; margin: 0 -4px 0 2px; }
.tsp-person-act button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: transparent; color: var(--c-muted); transition: background .15s ease, color .15s ease;
}
.tsp-person-act button:hover { background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); }
.tsp-person-act svg { width: 14px; height: 14px; }
.tsp-staff-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 14px; margin: 0 0 16px; border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--c-accent) 45%, transparent);
}
.tsp-staff-bar .tsp-text { margin: 0; flex: 1 1 220px; font-size: 13px; }
@media (hover: none) { .tsp-person-act button { width: 32px; height: 32px; } }
.tsp-how { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.65; color: var(--c-text-2); }
.tsp-how li + li { margin-top: 6px; }
.tsp-link { font-size: 13px; font-weight: 700; color: var(--c-accent); text-decoration: none; }

/* ══ Живой фон /testers (testers.js) ═══════════════════════
   Крестики на сетке 250×250 поверх арта, под контентом. Проявляется за
   0.25 с, когда заголовок встаёт на место. */
.tst-live {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.tst-live.is-on { opacity: 1; }

/* TST-INTRO-SKIP: подсказка «Пробел или Esc — пропустить» внизу экрана, пока идёт заставка */
.tst-skip {
  position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translate(-50%, 8px);
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--c-stroke-s); cursor: pointer;
  background: color-mix(in srgb, var(--c-raised) 86%, transparent); backdrop-filter: blur(10px);
  font: 600 12px/1.2 var(--f-mono); letter-spacing: .04em; color: var(--c-text-2);
  opacity: 0; transition: opacity .3s ease, transform .3s ease, color .2s ease, border-color .2s ease;
}
.tst-skip.is-on { opacity: 1; transform: translate(-50%, 0); }
.tst-skip:hover { color: var(--c-text); border-color: var(--c-accent-m); }

/* ══ Заставка /testers (testers.js) ════════════════════════
   html.tst-intro — страница ещё «собирается»: видно только арт. Каждый
   блок проявляется своим шагом, получая класс .tst-in. Без JS и при
   «уменьшить движение» класса нет — страница видна сразу. */
html.tst-intro .topbar:not(.tst-in),
html.tst-intro .topbar-compact:not(.tst-in),
html.tst-intro .bottom-nav:not(.tst-in),
html.tst-intro .tst-lead:not(.tst-in),
html.tst-intro .tst-rest:not(.tst-in),
html.tst-intro .tst-rules-btn:not(.tst-in),
html.tst-intro .tst-stats:not(.tst-in),
html.tst-intro .tst-roster-head:not(.tst-in),
html.tst-intro .tst-roster-empty:not(.tst-in),
html.tst-intro .tst-person:not(.tst-in),
html.tst-intro .tst-deck-section .section-title:not(.tst-in),
html.tst-intro .tst-nav:not(.tst-in),
html.tst-intro .tst-dots:not(.tst-in),
html.tst-intro .tst-how-section .section-title:not(.tst-in),
html.tst-intro .tst-how-item:not(.tst-in),
html.tst-intro .tst-rules-section:not(.tst-in) { opacity: 0; pointer-events: none; }
/* Футер из заставки исключён: он отрисован сразу, иначе до конца анимации
   внизу страницы было пустое место */
html.tst-intro .tst-lead:not(.tst-in),
html.tst-intro .tst-rest:not(.tst-in),
html.tst-intro .tst-stats:not(.tst-in),
html.tst-intro .tst-roster-empty:not(.tst-in),
html.tst-intro .section-title:not(.tst-in),
html.tst-intro .tst-rules-section:not(.tst-in) { transform: translateY(12px); }
html.tst-intro .tst-deck-stage:not(.tst-in) .tst-card { opacity: 0 !important; }
.tst-in { transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
/* Шапка раскрывается лесенкой: фраза → абзац → кнопка → цифры */
.tst-rest.tst-in { transition-delay: .08s; }
.tst-rules-btn.tst-in { transition-delay: .16s; }
.tst-stats.tst-in { transition-delay: .24s; }

/* Фон: сначала чистый арт, затем размытие и приглушение — вместе с набором */
.tst-bg img { transition: filter 1s ease; }
.tst-bg::after { transition: opacity 1s ease; }
html.tst-intro .tst-bg img { filter: none; }
html.tst-intro .tst-bg::after { opacity: calc(var(--tst-bg-veil) * .45); }
html.tst-intro.tst-blur .tst-bg img { filter: blur(var(--tst-bg-blur)); }
html.tst-intro.tst-blur .tst-bg::after { opacity: var(--tst-bg-veil); }

/* Пока идёт заставка, ничто «в полёте» не должно давать горизонтальную
   прокрутку на телефоне. clip, а не hidden: не создаёт контейнер прокрутки,
   sticky-топбар работает как обычно. Ряд тестеров листается своим скроллом. */
html.tst-intro { overflow-x: clip; }

/* Заголовок: набор по центру экрана, помеха, переезд на место */
.tst-title { width: -moz-fit-content; width: fit-content; position: relative; --tst-glitch: rgba(60, 220, 255, .8); }
html.tst-intro .tst-title:not(.is-typing):not(.tst-in) { opacity: 0; }
.tst-ch { visibility: hidden; }
.tst-ch.on, html:not(.tst-intro) .tst-ch { visibility: visible; }
/* По центру — вдвое крупнее (scale 2 от центра: центр остаётся на месте);
   переезд на место снимает и сдвиг, и увеличение — одним движением */
.tst-title.is-centered { transform: translate(var(--tst-dx, 0px), var(--tst-dy, 0px)) scale(2); }
.tst-title.is-moving { transition: transform .8s cubic-bezier(.65,0,.2,1); }
/* Помеха длится те же 0.5 с, но дёргается втрое чаще: три цикла по ~0.17 с */
.tst-title.is-glitch { animation: tstGlitch .167s steps(1, end) 3 both; }
@keyframes tstGlitch {
  0%   { transform: translate(calc(var(--tst-dx) - 6px), var(--tst-dy)) scale(2);
         text-shadow: 4px 0 var(--c-accent), -4px 0 var(--tst-glitch); clip-path: inset(10% 0 45% 0); }
  12%  { transform: translate(calc(var(--tst-dx) + 5px), var(--tst-dy)) scale(2);
         text-shadow: -5px 0 var(--c-accent), 5px 0 var(--tst-glitch); clip-path: inset(55% 0 5% 0); }
  24%  { transform: translate(var(--tst-dx), calc(var(--tst-dy) + 2px)) scale(2);
         text-shadow: 2px 0 var(--c-accent), -2px 0 var(--tst-glitch); clip-path: inset(0 0 0 0); }
  36%  { transform: translate(calc(var(--tst-dx) - 3px), var(--tst-dy)) scale(2);
         text-shadow: -6px 0 var(--c-accent), 6px 0 var(--tst-glitch); clip-path: inset(30% 0 30% 0); }
  48%  { transform: translate(calc(var(--tst-dx) + 8px), var(--tst-dy)) scale(2); clip-path: inset(70% 0 10% 0); }
  60%  { transform: translate(var(--tst-dx), var(--tst-dy)) scale(2);
         text-shadow: 3px 0 var(--c-accent), -3px 0 var(--tst-glitch); clip-path: inset(0 0 0 0); }
  72%  { transform: translate(calc(var(--tst-dx) - 4px), calc(var(--tst-dy) - 2px)) scale(2); clip-path: inset(15% 0 60% 0); }
  84%  { transform: translate(calc(var(--tst-dx) + 2px), var(--tst-dy)) scale(2);
         text-shadow: 1px 0 var(--c-accent), -1px 0 var(--tst-glitch); clip-path: inset(0 0 0 0); }
  100% { transform: translate(var(--tst-dx), var(--tst-dy)) scale(2); text-shadow: none; clip-path: none; }
}

/* Тестеры «падают» на места: крупно, с бликом по аватарке, быстро садятся */
.tst-person { position: relative; }
.tst-roster-row.is-intro { overflow: clip; overflow-clip-margin: 72px; }
/* Вторая волна — не влезшие в ряд: ряд прокручивается к каждому, так что
   клип (он запрещает прокрутку) снят, а геометрию ряда не трогаем — иначе
   ряд прыгает. Поэтому и падение мягче: сверху у ряда 12 px поля, карточка
   опускается с 10 px и не растёт — ничего не обрезается. Прилипание
   выключено: оно перетягивало бы ряд с нужного места */
.tst-roster-row.is-intro-scroll { scroll-snap-type: none; }
.tst-person.is-drop-in { animation: tstDropIn .36s cubic-bezier(.2,.8,.25,1) both; }
@keyframes tstDropIn {
  0%   { opacity: 0; transform: translateY(-10px) scale(.96); }
  100% { opacity: 1; transform: none; }
}
.tst-person.is-drop-in .tst-ava::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  animation: tstSheen .45s ease-out forwards;
}
.tst-person.is-drop { animation: tstDrop .45s cubic-bezier(.2,.8,.25,1) both; }
@keyframes tstDrop {
  0%   { opacity: 0; transform: translateY(-30px) scale(1.55); }
  55%  { opacity: 1; transform: translateY(2px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
/* Подложки больше нет — блик бежит по аватарке, а не по пустому месту */
.tst-person.is-drop .tst-ava::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  animation: tstSheen .45s ease-out forwards;
}
@keyframes tstSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); opacity: 0; } }

/* «Сейчас на тестировании»: акцентная полоса растёт вширь, потом вниз */
.tst-grow {
  position: absolute; inset: 0; z-index: 25; pointer-events: none;
  background: var(--c-accent); border-radius: 24px;
  clip-path: inset(0 50% calc(100% - 6px) 50% round 3px);
  animation: tstGrow .95s cubic-bezier(.65,0,.25,1) forwards;
  transition: opacity .45s ease;
}
.tst-grow.is-gone { opacity: 0; }
@keyframes tstGrow {
  0%   { clip-path: inset(0 50% calc(100% - 6px) 50% round 3px); }
  45%  { clip-path: inset(0 0 calc(100% - 6px) 0 round 3px); }
  100% { clip-path: inset(0 0 0 0 round 24px); }
}
/* X-блик по обложке */
.tst-card.is-xglare::after {
  content: ""; position: absolute; inset: -30% -60%; z-index: 7; pointer-events: none;
  background:
    linear-gradient(60deg, transparent 46%, rgba(255,255,255,.5) 50%, transparent 54%),
    linear-gradient(-60deg, transparent 46%, rgba(255,255,255,.5) 50%, transparent 54%);
  animation: tstXGlare .75s cubic-bezier(.3,.6,.3,1) forwards;
}
@keyframes tstXGlare { from { transform: translateX(-45%); opacity: 1; } to { transform: translateX(45%); opacity: 0; } }

/* «Как это устроено»: блок заливается акцентом, вспыхивает белым и
   растворяется до обычного вида */
.tst-how-item { position: relative; overflow: hidden; }
.tst-how-item::before, .tst-how-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.tst-how-item::before { background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; }   /* заливка слева направо */
.tst-how-item::after  { background: #fff; }
.tst-how-item.is-fill::before { opacity: 1; transform: scaleX(1); transition: transform .75s cubic-bezier(.4,0,.2,1); }
.tst-how-item.is-flash::before { opacity: 0; transition: none; }
.tst-how-item.is-flash::after { animation: tstFlash .45s ease-out forwards; }
@keyframes tstFlash { from { opacity: 1; } to { opacity: 0; } }

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tst-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tst-how { grid-template-columns: 1fr; }
  /* Блоки шапки — свайп-листалка: видна одна и край следующей */
  .tst-hero-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tst-hero-grid::-webkit-scrollbar { display: none; }
  .tst-hero-grid > .tst-box { flex: 0 0 86%; scroll-snap-align: start; }
  .tst-person { min-width: 0; width: min(320px, 82vw); }
  .tst-roster-nav { width: 38px; height: 38px; top: 59px; }
  /* Статистика в узкой карточке — с переносами (обрезалась краем) */
  .tst-pc-drop .tst-meta { white-space: normal; font-size: 13px; }
  .tst-person .tst-ava { width: 84px; height: 84px; font-size: 30px; }
  .tst-pc-top { gap: 12px; }
  .tst-roster-row.has-prev { --fade-l: 48px; }
  .tst-roster-row.has-next { --fade-r: 48px; }
  /* На телефоне меню — под заголовком и слева: строки там и так тесно */
  .tst-hero-top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tst-hero-actions { justify-content: flex-start; }
  .tst-stat--me { margin-left: 0; }
  .tst-rw-card { width: min(280px, 72vw); }
  /* Одна колонка: карточки обеих колонок — в общий поток; файлы — сразу
     за участием и наградой, а не в самом низу страницы */
  .tsp-grid { display: flex; flex-direction: column; gap: 18px; }
  .tsp-main, .tsp-aside { display: contents; }
  .tsp-grid #me, .tsp-grid #tasks, .tsp-grid #manual { order: 1; }     /* задачи — сразу за участием */
  /* Карточки обеих колонок — на всю ширину: «Отчёты» и «Участники»
     сжимались по содержимому и стояли узкими */
  .tsp-grid > .tsp-main > .tsp-card, .tsp-grid > .tsp-aside > .tsp-card { width: 100%; align-self: stretch; box-sizing: border-box; }
  /* Длинное название теста («ПП-19-01 — Проверка отдачи, извлечения…») — в
     шесть строк по 34px; на узком экране мельче */
  .tsp-title { font-size: clamp(24px, 7.4vw, 34px); line-height: 1.04; }
  #how .tsp-link { display: flex; }
  .tsp-grid #reward { order: 2; }
  .tsp-grid #rules-accept, .tsp-grid #files { order: 3; }
  .tsp-grid #issues { order: 4; }
  .tsp-grid #reports { order: 5; }
  .tsp-grid #verdicts { order: 6; }
  .tsp-grid #feed { order: 7; }
  .tsp-grid #people { order: 8; }
  .tsp-grid #how { order: 9; }
  .tsp-head { border-radius: 20px; }
  .tsp-actions .btn { width: 100%; justify-content: center; }
  .tsp-actions form { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tst-pc-fold, .tst-person .tst-pc-toggle, .tst-roster-nav { transition: none; }
  .tst-rules-btn, .tst-btn-text { transition: none; }
  .tst-rewards-panel, .tst-modal-box, .tst-modal-backdrop { transition: none; }
}

/* ══ TST-INTRO: экскурс первого тестирования ════════════════════════════
   Сцена — как иконки этапов «Как рождается модель» на главной: красная
   графика на подложке с мягким свечением; шаги сменяются наплывом */
.tsi-box { width: min(500px, 100%); padding: 22px 24px 18px; text-align: center; }
.tsi-x {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: transparent; border: 0; color: var(--c-muted); cursor: pointer;
  transition: color .15s, background .15s;
}
.tsi-x:hover { color: var(--c-text); background: var(--c-raised); }
.tsi-step { display: none; }
.tsi-step.is-on { display: block; animation: tsiIn .42s cubic-bezier(.22,1,.36,1); }
@keyframes tsiIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tsi-stage {
  position: relative; width: 168px; height: 168px; margin: 10px auto 14px; border-radius: 34px;
  display: grid; place-items: center; overflow: hidden; color: var(--c-accent);
  background: var(--c-raised); border: 1px solid var(--c-stroke);
}
.tsi-stage svg { position: relative; z-index: 1; width: 128px; height: 128px; overflow: visible; }
.tsi-glow {
  position: absolute; inset: 18%; border-radius: 50%; background: var(--c-accent); opacity: .16; filter: blur(26px);
  animation: tsiGlow 4s ease-in-out infinite;
}
@keyframes tsiGlow { 50% { opacity: .26; transform: scale(1.12); } }
.tsi-num { font: 600 11px var(--f-mono); letter-spacing: .12em; color: var(--c-muted); margin-bottom: 6px; }
.tsi-box .tst-modal-title { font-size: clamp(19px, 4.6vw, 22px); }
.tsi-box .tst-modal-text { min-height: 6.6em; margin-bottom: 14px; }
.tsi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tsi-dots { display: flex; gap: 2px; }
.tsi-dot {
  width: 28px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; position: relative;
}
.tsi-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 99px;
  transform: translate(-50%, -50%); background: var(--c-stroke-s); transition: width .25s, background .25s;
}
.tsi-dot.is-on::after { width: 20px; background: var(--c-accent); }
.tsi-nav { display: flex; gap: 8px; margin-left: auto; }
.tsi-btn { min-height: 48px; padding: 0 22px; border-radius: 999px; }
.tsi-btn:disabled { opacity: .35; pointer-events: none; }
@media (max-width: 480px) {
  .tsi-box { padding: 18px 16px 14px; }
  .tsi-stage { width: 140px; height: 140px; }
  .tsi-stage svg { width: 108px; height: 108px; }
  .tsi-foot { justify-content: center; }
  .tsi-nav { margin-left: 0; width: 100%; }
  .tsi-nav .tsi-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tsi-step.is-on, .tsi-glow { animation: none; }
}

/* ══ TST-TASKS: задачи тестирования ═════════════════════════════════════ */
.tsp-tasks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tsp-tasks-count { font: 700 14px var(--f-mono); color: var(--c-text-2); }
.tsp-tasks-bar { height: 6px; border-radius: 99px; background: var(--c-stroke); overflow: hidden; margin: -4px 0 14px; }
.tsp-tasks-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-ok); transition: width .5s cubic-bezier(.22,1,.36,1); }
.tsp-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tsp-task {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--c-raised); border: 1px solid var(--c-stroke);
  transition: background .2s, border-color .2s;
}
.tsp-task form { margin: 0; display: contents; }
.tsp-task-mark {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0;
  border: 2px solid var(--c-stroke-s); background: transparent; color: transparent;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
button.tsp-task-mark { cursor: pointer; position: relative; }
button.tsp-task-mark::before { content: ""; position: absolute; inset: -7px; }   /* палец попадает: 44px */
button.tsp-task-mark:hover { border-color: var(--c-ok); color: var(--c-ok); }
button.tsp-task-mark:active { transform: scale(.92); }
.tsp-task-n { font: 600 12px var(--f-mono); color: var(--c-muted); }
.tsp-task-body { font-size: 14px; line-height: 1.5; color: var(--c-text); overflow-wrap: anywhere; }
.tsp-task.is-done { background: transparent; border-color: color-mix(in srgb, var(--c-ok) 35%, transparent); }
.tsp-task.is-done .tsp-task-mark { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.tsp-task.is-done .tsp-task-body { color: var(--c-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-muted) 60%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* TST-TASK-CHECKS: «Проверил» тестера справа у задачи + покрытие для владельца */
.tsp-task { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.tsp-task-chk {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  font: 700 12px var(--f-ui); color: var(--c-text-2); background: transparent; border: 1px solid var(--c-stroke-s);
  cursor: pointer; white-space: nowrap; position: relative; transition: background .2s, border-color .2s, color .2s;
}
button.tsp-task-chk::before { content: ""; position: absolute; inset: -4px; }   /* зона нажатия ~44px */
.tsp-task-chk svg { opacity: .45; }
.tsp-task-chk b { font: 700 11px var(--f-mono); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: inline-grid; place-items: center; background: var(--c-raised); color: var(--c-text); }
button.tsp-task-chk:hover { border-color: var(--c-ok); color: var(--c-ok); }
.tsp-task-chk.is-on { background: color-mix(in srgb, var(--c-ok) 16%, transparent); border-color: var(--c-ok); color: var(--c-ok); }
.tsp-task-chk.is-on svg { opacity: 1; }
.tsp-task-chk.is-static { cursor: default; padding: 0 10px; }
.tsp-task-who { display: block; margin-top: 3px; font-size: 12px; color: var(--c-muted); text-decoration: none; }
.tsp-tasks-cov { margin: -6px 0 10px; font: 600 12px var(--f-mono); color: var(--c-text-2); }
@media (max-width: 480px) {
  .tsp-task { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tsp-task-n { display: none; }
  .tsp-task-chk span { display: none; }       /* на узком — только галочка и счётчик */
}

/* TST-MANUALS: карточка инструкции теста — обложка слева, «Открыть» */
.tsp-manuals { display: flex; flex-direction: column; gap: 12px; }
.tsp-man {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: center;
  padding: 24px 18px 14px 14px; border-radius: 16px; background: var(--c-raised); border: 1px solid var(--c-stroke);
  color: var(--c-text); text-decoration: none; transition: border-color .2s, transform .2s;
}
a.tsp-man:hover { text-decoration: none; border-color: var(--c-accent-m); transform: translateY(-2px); }
/* Обложка — стопка из /manuals (.man-stack): нижние листы выглядывают
   вверх-вправо, отсюда отступы карточки сверху и справа */
.tsp-man-cover { display: block; }
a.tsp-man:hover .man-sheet--2 { transform: translate(11px,-11px) rotate(2.4deg); opacity: .8; }
a.tsp-man:hover .man-sheet--3 { transform: translate(22px,-22px) rotate(4.6deg); opacity: .5; }
.tsp-man.is-locked .man-sheet--top img { filter: grayscale(.7) brightness(.55); }
.tsp-man-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; filter: none; }
.tsp-man-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.tsp-man-body b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.tsp-man-body > span:not(.btn) { font-size: 12px; color: var(--c-muted); }
.tsp-man-btn { margin-top: 4px; pointer-events: none; }
@media (max-width: 480px) {
  .tsp-man { grid-template-columns: 1fr; padding: 26px 26px 14px 14px; }
  .tsp-man-btn { width: 100%; justify-content: center; }
}

/* TST-FILE-UPDATE: «Файлы обновлены» — крупно, акцентом, над «Участием» */
.tsp-updated {
  border: 2px solid var(--c-accent); border-radius: 20px; padding: 20px 22px;
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-raised));
  box-shadow: 0 10px 34px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.tsp-updated-head { display: flex; gap: 14px; align-items: flex-start; }
.tsp-updated-head > svg { flex: none; width: 30px; height: 30px; color: var(--c-accent); margin-top: 2px; }
.tsp-updated-title { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.tsp-updated .tsp-text { margin: 0; }
.tsp-updated-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tsp-updated-list > li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 14px; background: var(--c-base); border: 1px solid var(--c-stroke);
}
.tsp-updated-list > li > div { min-width: 0; flex: 1 1 220px; }
.tsp-updated-list b { font-family: var(--f-mono); font-size: 13px; word-break: break-all; margin-right: 8px; }
.tsp-updated-list .tsp-muted { font-size: 12px; }
.tsp-updated-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--c-text); }
.tsp-file-upd { font-style: normal; font-size: 11px; font-weight: 700; color: var(--c-accent); white-space: nowrap; }
@media (max-width: 480px) { .tsp-updated-list .btn { width: 100%; justify-content: center; } }
.tsp-updated-diff { margin-top: 8px; }
.tsp-updated-diff summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--c-accent); list-style-position: inside;
  min-height: 32px; display: flex; align-items: center; gap: 6px;
}
/* Список изменений (баннер и история у файла) */
.tsp-diff { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.tsp-diff li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.tsp-diff li > span { display: flex; flex-direction: column; min-width: 0; }
.tsp-diff b { font-family: var(--f-mono); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; margin: 0; }
.tsp-diff small { font-size: 11px; color: var(--c-muted); overflow-wrap: anywhere; }
.tsp-diff em {
  flex: none; margin-top: 1px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
}
.tsp-diff .is-ch { color: var(--c-accent); }
.tsp-diff .is-add { color: var(--c-text); }
.tsp-diff .is-rm { color: var(--c-muted); }
/* История обновлений у файла в «Файлах теста» */
.tsp-file-hist { flex: 1 1 100%; margin-top: 2px; }
.tsp-file-hist summary {
  cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--c-accent);
}
.tsp-file-hist-item { padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: var(--c-base); border: 1px solid var(--c-stroke); }
.tsp-file-hist-when { font-size: 12px; font-weight: 700; color: var(--c-text-2); }
.tsp-diff .is-rv { color: var(--c-warn); }

/* Серия: пояснение про модули одной модели — отдельной строкой, тише */
.tsp-streak-note { display: block; margin-top: 4px; color: var(--c-muted); }

/* TST-TRANSLATE: подпись под переведённым текстом — «Перевод DeepL · Показать оригинал» */
.tsp-tr-toggle {
  display: inline-flex; align-items: baseline; gap: 4px; margin-top: 4px; padding: 6px 0; min-height: 28px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--c-muted);
}
.tsp-tr-toggle b { font-weight: 600; color: var(--c-text-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.tsp-tr-toggle:hover b { color: var(--c-accent); }

/* TST-REPORT-DELETE: удаление отчёта в два шага */
.tsp-report-acts { display: flex; justify-content: flex-end; margin-top: 4px; }
.tsp-report-del {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-stroke); background: transparent;
  color: var(--c-muted); font: 600 12.5px/1 var(--f-ui); cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.tsp-report-del:hover { color: var(--c-accent); border-color: var(--c-accent-m); background: var(--c-accent-s); }
/* скрытый отчёт у автора — пунктирная заглушка */
.tsp-report--hidden { padding: 14px 16px; border: 1px dashed var(--c-stroke-s); border-radius: 14px; }
.tsp-report--hidden .tsp-report-acts { justify-content: flex-start; }
/* у владельца: просьба автора — полоса над отчётом с двумя решениями */
.tsp-report-ask {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--c-accent-s); border: 1px solid var(--c-accent-m); font-size: 13.5px; font-weight: 600;
}
.tsp-report-ask > span { flex: 1 1 200px; }
.btn.is-busy { opacity: .6; pointer-events: none; }
@media (max-width: 767px) { .tsp-report-del { min-height: 44px; } }