/* Раздел психотестов Chronos (/tests/). Префикс .tq-.
   Опирается на общий слой chronos-ui.css (грузится раньше, см. header.php):
   шрифт PT Serif, цвета и шкалы --ch-*, кнопки .ch-btn, крошки .ch-crumbs,
   аккордеон .ch-accordion, .ch-eyebrow, .ch-prose, .ch-lift. Правила памятки —
   в шапке chronos-ui.css. Здесь только сетка раздела и его блоки.

   Литералы разрешены только в токенах ниже и в постере .tq-poster__* (он же
   картинка для html2canvas: px, Arial, без var и градиент-текста). */

.tq-page {
    /* сетка раздела */
    --tq-container: 1160px;
    --tq-gutter: 20px;
    --tq-aside: 340px;
    --tq-gap-cols: var(--ch-sp-7);
    --tq-col-main: 772px;          /* = container − aside − gap: колонка интро, квиза, FAQ, источников */
    --tq-step-min: 250px;          /* высота шага квиза, чтобы экран не прыгал */
    --tq-radio: 22px;
    --tq-art: 150px;
    --tq-modal-w: 420px;
    --tq-orbit: 200px;
    --tq-star: 64px;
    --tq-map: 360px;               /* карта 2×2 в результате */
    --tq-dot: 16px;

    /* цвета раздела (всё общее — в --ch-*) */
    --tq-navy: #0e3a8a;
    --tq-navy-2: #122a6e;
    --tq-line-strong: #C7C1D0;
    --tq-rose-line: #F3D3DE;
    --tq-on-navy: #fff;
    --tq-on-navy-muted: #cdd6f0;
    --tq-on-navy-accent: #d8c8ff;
    --tq-on-navy-eyebrow: #c5b3ff;
    --tq-on-navy-bonus: #ffd7a8;
    --tq-on-navy-line: rgba(255, 255, 255, .16);
    --tq-on-navy-glass: rgba(255, 255, 255, .09);
    --tq-violet-glow: rgba(136, 88, 216, .42);
    --tq-spark: #ffb47c;
    --tq-backdrop: rgba(20, 15, 30, .5);
    --tq-shadow-navy: 0 28px 80px rgba(14, 58, 138, .2);

    --tq-grad-navy: linear-gradient(150deg, var(--tq-navy), var(--tq-navy-2));
    --tq-grad-violet: linear-gradient(92deg, var(--ch-violet), var(--ch-blue));
    --tq-meter: linear-gradient(90deg, #8fe4b0, #ffe08a, #f2a6b8);
    --tq-wash:
        radial-gradient(60% 130% at 12% 0%, rgba(242, 222, 240, .6), transparent 60%),
        radial-gradient(56% 120% at 92% 5%, rgba(223, 216, 240, .6), transparent 58%),
        radial-gradient(40% 90% at 78% 0%, rgba(255, 214, 171, .35), transparent 60%);
    --tq-spark-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%200c1%208%203%2011%2012%2012-9%201-11%203-12%2012-1-9-3-11-12-12%209-1%2011-3%2012-12z'%20fill='%23E3DDEA'/%3E%3C/svg%3E");

    padding-bottom: var(--ch-sp-8);
    background: var(--ch-paper);
    color: var(--ch-ink);
    font-family: var(--ch-sans);
    font-size: var(--ch-fs-base);
    line-height: var(--ch-lh-base);
}
@media (max-width: 600px) {
    .tq-page { --tq-gutter: 16px; }
}

.tq-page [hidden] { display: none !important; }
/* colors.css (асинхронный) красит h1–h6 в #000 — возвращаем цвет контекста */
.tq-page :is(h1, h2, h3, h4) { color: inherit; }

/* на время вопросов нижние блоки прячем, на результате они возвращаются */
.tq-page[data-tq-view="quiz"] .tq-after { display: none; }

/* ---------- каркас ---------- */
.tq-container { width: min(100% - var(--tq-gutter) * 2, var(--tq-container)); margin-inline: auto; }
.tq-section { padding-top: var(--ch-section-gap); }
.tq-section__title {
    margin: 0 0 var(--ch-sp-5);
    font-family: var(--ch-serif);
    font-size: var(--ch-fs-2xl);
    font-weight: 400;
    line-height: var(--ch-lh-snug);
}
.tq-section__title em { font-style: italic; }
.tq-panel { padding: var(--ch-sp-5); background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: var(--ch-r-lg); }
.tq-wash { padding: var(--ch-sp-4) var(--ch-sp-5); border-radius: var(--ch-r-md); }
.tq-note { color: var(--ch-muted); font-size: var(--ch-fs-sm); }

.tq-link:link,
.tq-link:visited { color: var(--ch-ink); text-decoration: underline; text-decoration-color: var(--ch-line); text-underline-offset: 3px; }
.tq-link:hover { color: var(--ch-violet); text-decoration-color: currentColor; }

/* ---------- верх: крошки + hero на пастельном фоне ---------- */
.tq-top { position: relative; overflow: hidden; padding-top: var(--ch-sp-5); background: var(--tq-wash); }
.tq-top--hub::after {
    content: "";
    position: absolute;
    top: var(--ch-sp-5);
    right: 6%;
    width: var(--tq-star);
    height: var(--tq-star);
    background: var(--tq-spark-svg) center / contain no-repeat;
    pointer-events: none;
}
.tq-crumbs, .tq-hero { position: relative; z-index: 1; }
.tq-hero { padding: var(--ch-sp-6) 0; }

.tq-hero__title {
    margin: 0;
    font-family: var(--ch-serif);
    font-size: var(--ch-fs-display);
    font-weight: 400;
    line-height: var(--ch-lh-tight);
    text-wrap: balance;
}
.tq-hero__title em { font-style: italic; }
.tq-hero--hub .tq-hero__title { max-width: 16ch; }
.tq-hero__lead { max-width: var(--ch-measure); margin: var(--ch-sp-4) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-lg); }
.tq-hero__byline { margin: var(--ch-sp-4) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-sm); }

.tq-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--ch-sp-5); align-items: start; }
.tq-hero__side { display: flex; flex-direction: column; gap: var(--ch-sp-5); }
.tq-hero__side-lead { margin: 0; color: var(--ch-muted); font-size: var(--ch-fs-md); line-height: var(--ch-lh-base); }
.tq-hero__panel-spark { display: block; margin: 0 0 var(--ch-sp-3); color: var(--ch-violet); font-size: var(--ch-fs-2xl); line-height: 1; }
.tq-hero__facts { margin: 0; padding: 0; list-style: none; }
.tq-hero__facts li { padding: var(--ch-sp-3) 0; border-top: 1px solid var(--ch-line); color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-hero__facts li:first-child { padding-top: 0; border-top: 0; }
.tq-hero__facts b { color: var(--ch-ink); font-size: var(--ch-fs-md); font-weight: 700; }

@media (min-width: 900px) {
    .tq-hero__grid { position: relative; grid-template-columns: minmax(0, 1fr) var(--tq-aside); gap: var(--tq-gap-cols); }
    /* правая колонка выше заголовка: пусть не растягивает hero, а продолжается
       рядом с интро ниже. Колонка интро и квиза шириной --tq-col-main, с ней не пересекается */
    .tq-top--detail { overflow: visible; }
    .tq-hero--detail .tq-hero__side { position: absolute; top: 0; right: 0; width: var(--tq-aside); }
}
@media (max-width: 899px) {
    /* панель фактов на мобиле — ряд чипов */
    .tq-hero__panel { padding: 0; background: none; border: 0; }
    .tq-hero__panel-spark { display: none; }
    .tq-hero__facts { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); }
    .tq-hero__facts li,
    .tq-hero__facts li:first-child { padding: var(--ch-sp-2) var(--ch-sp-3); background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: var(--ch-r-pill); }
    .tq-hero__facts b { font-size: inherit; }
}

/* ---------- индекс ---------- */
.tq-hubnav { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); margin: 0 0 var(--ch-sp-5); }
.tq-hubnav .ch-btn.ch-btn--chip:link,
.tq-hubnav .ch-btn.ch-btn--chip:visited { color: var(--ch-ink); text-decoration: none; }
.tq-hubnav__count { color: var(--ch-muted); font-variant-numeric: tabular-nums; }

.tq-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ch-sp-2); margin: 0 0 var(--ch-sp-6); }
.tq-filter__label { margin-right: var(--ch-sp-1); color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-filter .ch-btn.ch-btn--chip.is-active { background: var(--ch-ink); border-color: var(--ch-ink); color: var(--ch-surface); }

.tq-index__group { scroll-margin-top: var(--ch-sp-5); }
.tq-index__group + .tq-index__group { margin-top: var(--ch-sp-7); }
.tq-index__head { max-width: var(--tq-col-main); margin: 0 0 var(--ch-sp-4); }
.tq-index__theme { margin: 0; font-family: var(--ch-serif); font-size: var(--ch-fs-2xl); font-weight: 400; line-height: var(--ch-lh-snug); }
.tq-index__theme-link:link,
.tq-index__theme-link:visited { color: inherit; text-decoration: underline; text-decoration-color: var(--ch-line); text-underline-offset: 5px; }
.tq-index__theme-link:hover { color: var(--ch-violet); text-decoration-color: currentColor; }
.tq-index__lead { max-width: var(--ch-measure); margin: var(--ch-sp-2) 0 0; color: var(--ch-muted); }
.tq-index__empty { margin: 0; color: var(--ch-muted); }
.tq-index__disclaimer { max-width: var(--ch-measure); margin: var(--ch-sp-6) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-sm); }

/* ---------- страница темы ---------- */
.tq-theme-body__text { max-width: var(--tq-col-main); }
.tq-theme-body__text .tq-section__title { margin-top: var(--ch-sp-6); }
.tq-theme-body__text .tq-section__title:first-child { margin-top: 0; }

.tq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ch-sp-5); }
.tq-card {
    display: flex;
    flex-direction: column;
    gap: var(--ch-sp-2);
    padding: var(--ch-sp-5);
    background: var(--ch-c-blue);
    border-radius: var(--ch-r-lg);
    text-decoration: none;
}
.tq-card:link, .tq-card:visited, .tq-card:hover { color: var(--ch-ink); text-decoration: none; }
.tq-card:nth-child(6n+2) { background: var(--ch-c-purple); }
.tq-card:nth-child(6n+3) { background: var(--ch-c-green); }
.tq-card:nth-child(6n+4) { background: var(--ch-c-pink); }
.tq-card:nth-child(6n+5) { background: var(--ch-c-cream); }
.tq-card:nth-child(6n+6) { background: var(--ch-c-teal); }
.tq-card__badge {
    align-self: flex-start;
    padding: var(--ch-sp-1) var(--ch-sp-3);
    background: var(--ch-surface);
    border-radius: var(--ch-r-pill);
    color: var(--ch-violet);
    font-size: var(--ch-fs-xs);
    font-weight: 600;
    letter-spacing: var(--ch-ls-caps);
    text-transform: uppercase;
}
.tq-card__title { font-size: var(--ch-fs-lg); font-weight: 600; line-height: var(--ch-lh-snug); }
.tq-card__lead { color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-card__meta { margin-top: auto; padding-top: var(--ch-sp-2); color: var(--ch-muted); font-size: var(--ch-fs-xs); }

/* ---------- перед тестом ---------- */
.tq-landing__col { max-width: var(--tq-col-main); }
/* интро продолжает hero: полный отступ секции здесь лишний */
.tq-top--detail + .tq-landing { padding-top: var(--ch-sp-5); }
.tq-landing__intro { margin: 0 0 var(--ch-sp-5); }
.tq-intro__title { margin: 0 0 var(--ch-sp-3); font-family: var(--ch-serif); font-size: var(--ch-fs-xl); font-weight: 400; line-height: var(--ch-lh-snug); }
.tq-intro__text { max-width: var(--ch-measure); margin: 0; }
.tq-intro__method { max-width: var(--ch-measure); margin: var(--ch-sp-5) 0 0; background: var(--ch-violet-soft); font-size: var(--ch-fs-sm); }
.tq-intro__start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ch-sp-4); margin-top: var(--ch-sp-5); }
.tq-intro__privacy { max-width: 34ch; color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-intro__disclaimer { max-width: var(--ch-measure); margin: var(--ch-sp-4) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-landing__notice { max-width: var(--ch-measure); margin: 0 0 var(--ch-sp-5); padding: var(--ch-sp-3) var(--ch-sp-4); background: var(--ch-c-cream); border-radius: var(--ch-r-md); color: var(--ch-ink); }

/* черновик: «Продолжить с вопроса N» */
.tq-resume { margin-top: var(--ch-sp-5); padding: var(--ch-sp-4) var(--ch-sp-5); background: var(--ch-violet-soft); border-radius: var(--ch-r-md); }
.tq-resume__text { margin: 0 0 var(--ch-sp-3); font-size: var(--ch-fs-sm); }
.tq-resume__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ch-sp-3); }

/* ---------- квиз ---------- */
.tq-quiz__bar, .tq-quiz__track, .tq-quiz__form { max-width: var(--tq-col-main); }
.tq-quiz__bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--ch-sp-6); margin-bottom: var(--ch-sp-3); }
.tq-quiz__back { padding: var(--ch-sp-1) 0; background: none; border: 0; color: var(--ch-muted); font: inherit; font-size: var(--ch-fs-sm); cursor: pointer; }
.tq-quiz__back:disabled { opacity: .35; cursor: default; }
.tq-quiz__progress { color: var(--ch-muted); font-size: var(--ch-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.tq-quiz__track { height: var(--ch-sp-1); margin: 0 0 var(--ch-sp-5); overflow: hidden; background: var(--ch-line); border-radius: var(--ch-r-pill); }
.tq-quiz__track-fill { display: block; width: 0; height: 100%; background: var(--tq-grad-violet); border-radius: var(--ch-r-pill); transition: width .3s ease; }
.tq-quiz__step { min-height: var(--tq-step-min); margin: 0; padding: 0; border: 0; }
.tq-quiz__question { display: block; width: 100%; margin: 0 0 var(--ch-sp-5); padding: 0; }
.tq-quiz__group { display: block; margin-bottom: var(--ch-sp-2); color: var(--ch-muted); font-size: var(--ch-fs-xs); font-weight: 600; letter-spacing: var(--ch-ls-caps); text-transform: uppercase; }
.tq-quiz__stem { display: block; margin-bottom: var(--ch-sp-2); color: var(--ch-violet); font-size: var(--ch-fs-sm); font-weight: 600; }
.tq-quiz__text { display: block; font-family: var(--ch-serif); font-size: var(--ch-fs-xl); font-weight: 400; line-height: var(--ch-lh-snug); }
.tq-quiz__options { display: flex; flex-direction: column; gap: var(--ch-sp-3); }
.tq-quiz__option {
    display: flex;
    align-items: center;
    gap: var(--ch-sp-4);
    padding: var(--ch-sp-4) var(--ch-sp-5);
    background: var(--ch-surface);
    border: 1.5px solid var(--ch-line);
    border-radius: var(--ch-r-md);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.tq-quiz__option:hover { border-color: var(--ch-violet); }
.tq-quiz__option input {
    position: relative;
    flex: 0 0 var(--tq-radio);
    width: var(--tq-radio);
    height: var(--tq-radio);
    margin: 0;
    border: 2px solid var(--tq-line-strong);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.tq-quiz__option input:checked { border-color: var(--ch-violet); }
.tq-quiz__option input:checked::after { content: ""; position: absolute; inset: 3px; background: var(--ch-violet); border-radius: 50%; }
.tq-quiz__option input:focus-visible { outline: 3px solid var(--ch-violet); outline-offset: 2px; }
.tq-quiz__option:has(input:checked) { background: var(--ch-violet-soft); border-color: var(--ch-violet); }
.tq-quiz__option-label { font-size: var(--ch-fs-md); }
.tq-quiz__next { max-width: var(--tq-col-main); margin-top: var(--ch-sp-5); }
.tq-quiz__error { max-width: var(--tq-col-main); margin: var(--ch-sp-4) 0 0; padding: var(--ch-sp-3) var(--ch-sp-4); background: var(--ch-rose-soft); border-radius: var(--ch-r-md); color: var(--ch-ink); }

/* ---------- результат ---------- */
.tq-result__grid { display: grid; grid-template-columns: 1fr; gap: var(--ch-sp-6); }
.tq-result__aside { display: flex; flex-direction: column; gap: var(--ch-sp-4); }
@media (min-width: 900px) {
    .tq-result__grid { grid-template-columns: minmax(0, 1fr) var(--tq-aside); gap: var(--tq-gap-cols); align-items: start; }
    .tq-result__aside { position: sticky; top: var(--ch-sp-5); }
}

.tq-result__eyebrow { display: inline-flex; margin-bottom: var(--ch-sp-4); padding: var(--ch-sp-1) var(--ch-sp-3); background: var(--ch-violet-soft); border-radius: var(--ch-r-pill); }
.tq-result__title { margin: 0 0 var(--ch-sp-5); font-family: var(--ch-serif); font-size: var(--ch-fs-display); font-weight: 400; line-height: var(--ch-lh-tight); text-wrap: balance; }
.tq-result__meterwrap { margin: 0 0 var(--ch-sp-5); }
.tq-result__meterhead { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--ch-sp-2); }
.tq-result__meterlabel { color: var(--ch-muted); font-size: var(--ch-fs-xs); font-weight: 600; letter-spacing: var(--ch-ls-caps); text-transform: uppercase; }
.tq-result__meterval { font-size: var(--ch-fs-lg); font-weight: 700; }
.tq-result__meter { position: relative; height: var(--ch-sp-4); overflow: hidden; background: var(--tq-meter); border-radius: var(--ch-r-pill); }
.tq-result__meter-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-right: 3px solid var(--ch-ink); }
.tq-result__art { display: block; max-width: var(--tq-art); height: auto; margin: 0 0 var(--ch-sp-5); }
.tq-result__interpretation { margin: 0 0 var(--ch-sp-5); }

.tq-result__callout { max-width: var(--tq-col-main); margin: 0 0 var(--ch-sp-4); padding: var(--ch-sp-4) var(--ch-sp-5); border-left: 4px solid; border-radius: var(--ch-r-md); }
.tq-result__callout--not { background: var(--ch-rose-soft); border-left-color: var(--ch-rose); }
.tq-result__callout--steps { background: var(--ch-c-green); border-left-color: var(--ch-green); }
.tq-result__callout-label { display: block; margin: 0 0 var(--ch-sp-3); color: var(--ch-muted); font-size: var(--ch-fs-xs); font-weight: 600; letter-spacing: var(--ch-ls-caps); text-transform: uppercase; }
.tq-result__list { display: flex; flex-direction: column; gap: var(--ch-sp-2); margin: 0; padding-left: var(--ch-sp-5); list-style: disc; font-family: var(--ch-serif); font-size: var(--ch-fs-md); line-height: var(--ch-lh-base); }

/* блок помощи стоит сразу под заголовком, до балла */
.tq-result__crisis { max-width: var(--tq-col-main); margin: 0 0 var(--ch-sp-5); padding: var(--ch-sp-4) var(--ch-sp-5); background: var(--ch-rose-soft); border: 1px solid var(--tq-rose-line); border-radius: var(--ch-r-md); }
.tq-result__crisis-title { margin: 0 0 var(--ch-sp-3); font-family: var(--ch-serif); font-size: var(--ch-fs-md); }
.tq-result__crisis-list { display: grid; gap: var(--ch-sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--ch-fs-sm); }
.tq-result__crisis-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ch-sp-3); }
.tq-result__crisis-list span { color: var(--ch-muted); }
.tq-result__crisis a:link,
.tq-result__crisis a:visited { color: var(--ch-rose); font-size: var(--ch-fs-lg); font-weight: 700; white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }

.tq-result__secondary { max-width: var(--ch-measure); margin: 0 0 var(--ch-sp-5); color: var(--ch-muted); }
.tq-result__secondary b { color: var(--ch-ink); }

/* готовый первый вопрос для бота (продуктовый тест) */
.tq-result__prompt { max-width: var(--tq-col-main); margin: 0 0 var(--ch-sp-5); background: var(--ch-violet-soft); }
.tq-result__prompt-label { margin: 0 0 var(--ch-sp-2); color: var(--ch-muted); font-size: var(--ch-fs-xs); font-weight: 600; letter-spacing: var(--ch-ls-caps); text-transform: uppercase; }
.tq-result__prompt-text { margin: 0 0 var(--ch-sp-3); font-family: var(--ch-serif); font-size: var(--ch-fs-md); }

/* профиль: строка на шкалу */
.tq-profile { display: grid; gap: var(--ch-sp-4); max-width: var(--tq-col-main); margin: 0 0 var(--ch-sp-5); }
.tq-profile__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ch-sp-3); margin: 0 0 var(--ch-sp-2); }
.tq-profile__name { font-weight: 600; }
.tq-profile__value { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tq-profile__bar { height: var(--ch-sp-2); overflow: hidden; background: var(--ch-line); border-radius: var(--ch-r-pill); }
.tq-profile__fill { display: block; width: 0; height: 100%; background: var(--tq-grad-violet); border-radius: var(--ch-r-pill); }
.tq-profile__band { margin: var(--ch-sp-1) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-profile__row.is-top .tq-profile__name::after { content: " · ведущая"; color: var(--ch-violet); font-weight: 400; }

/* карта 2×2: граница клеток проходит по порогу (ставит движок) */
.tq-grid-map { position: relative; max-width: var(--tq-map); margin: 0 0 var(--ch-sp-5); padding: 0 0 var(--ch-sp-5) var(--ch-sp-5); }
.tq-grid-map__area { position: relative; display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; aspect-ratio: 1; max-width: 100%; overflow: hidden; border: 1px solid var(--ch-line); border-radius: var(--ch-r-md); }
.tq-grid-map__cell { background: var(--ch-surface); }
.tq-grid-map__cell--lh, .tq-grid-map__cell--hl { background: var(--ch-c-blue); }
.tq-grid-map__cell.is-active { background: var(--ch-violet-soft); }
.tq-grid-map__dot { position: absolute; width: var(--tq-dot); height: var(--tq-dot); margin: 0 0 calc(var(--tq-dot) / -2) calc(var(--tq-dot) / -2); background: var(--ch-violet); border: 3px solid var(--ch-surface); border-radius: 50%; box-shadow: var(--ch-shadow-card); }
.tq-grid-map__axis { position: absolute; bottom: 0; left: var(--ch-sp-5); margin: 0; color: var(--ch-muted); font-size: var(--ch-fs-xs); }
.tq-grid-map__axis--y { top: 0; bottom: auto; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); }

.tq-result__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ch-sp-3); margin-top: var(--ch-sp-6); padding-top: var(--ch-sp-5); border-top: 1px solid var(--ch-line); }
.tq-result__alt { max-width: var(--ch-measure); margin: var(--ch-sp-3) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-sm); }

/* постер — он же картинка для шаринга (html2canvas): простые px, Arial, литералы */
.tq-poster { display: block; }
.tq-poster__card {
    box-sizing: border-box;
    width: 340px;
    max-width: 100%;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(158deg, #0e3a8a 0%, #3a2a7a 54%, #8858d8 100%);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}
.tq-poster__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.tq-poster__brand { color: #cdd9ff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.tq-poster__badge { padding: 3px 11px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; color: #e6dbff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tq-poster__test { margin: 0 0 10px; color: #b8c2e8; font-size: 15px; }
.tq-poster__title { margin: 0 0 14px; font-size: 30px; font-weight: 800; line-height: 1.12; }
.tq-poster__score { margin: 0 0 12px; color: #ffcf8f; font-size: 40px; font-weight: 800; line-height: 1; }
.tq-poster__meter { position: relative; height: 12px; margin: 0 0 18px; overflow: hidden; background: linear-gradient(90deg, #86efac, #fde047, #fca5a5); border-radius: 999px; }
.tq-poster__meter-fill { position: absolute; top: 0; left: 0; width: 0; height: 100%; border-right: 3px solid #fff; }
.tq-poster__bars { margin: 0 0 18px; }
.tq-poster__bar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.tq-poster__bar-name { flex: 0 0 104px; overflow: hidden; color: #dfe3f5; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.tq-poster__bar-track { position: relative; flex: 1 1 auto; height: 8px; overflow: hidden; background: rgba(255, 255, 255, .18); border-radius: 999px; }
.tq-poster__bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: #ffcf8f; border-radius: 999px; }
.tq-poster__secondary { margin: 0 0 12px; color: #ffcf8f; font-size: 15px; font-weight: 700; }
.tq-poster__interp { margin: 0 0 26px; color: #dfe3f5; font-size: 15px; line-height: 1.5; }
.tq-poster__foot { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); color: #9fabd8; font-size: 13px; }

/* сохранить и поделиться */
.tq-share__label { margin: 0 0 var(--ch-sp-3); color: var(--ch-muted); font-size: var(--ch-fs-xs); font-weight: 600; letter-spacing: var(--ch-ls-caps); text-transform: uppercase; }
.tq-share__primary { display: grid; gap: var(--ch-sp-2); }
.tq-share__secondary { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); margin-top: var(--ch-sp-3); }
.tq-share__msg { min-height: var(--ch-sp-4); margin: var(--ch-sp-2) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-share__note { margin: var(--ch-sp-2) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-xs); }

.tq-friend { max-width: var(--tq-col-main); margin-top: var(--ch-sp-5); background: var(--ch-c-cream); }
.tq-friend__title { margin: 0; font-family: var(--ch-serif); font-size: var(--ch-fs-md); }
.tq-friend__text { margin: var(--ch-sp-1) 0 var(--ch-sp-3); color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.tq-friend__row { display: flex; flex-wrap: wrap; gap: var(--ch-sp-2); }

/* ---------- как устроен тест ---------- */
.tq-explainer__text { margin: 0 0 var(--ch-sp-5); }
.tq-explainer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ch-sp-5); max-width: var(--tq-col-main); }
.tq-explainer__card { padding: var(--ch-sp-5); background: var(--ch-c-green); border-radius: var(--ch-r-lg); }
.tq-explainer__card--no { background: var(--ch-c-pink); }
.tq-explainer__h { margin: 0 0 var(--ch-sp-3); font-size: var(--ch-fs-md); font-weight: 600; }
.tq-explainer__list { display: grid; gap: var(--ch-sp-2); margin: 0; padding-left: var(--ch-sp-5); list-style: disc; font-size: var(--ch-fs-sm); line-height: var(--ch-lh-base); }
.tq-explainer__cite { max-width: var(--tq-col-main); margin: var(--ch-sp-5) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-xs); }

/* ---------- какие бывают результаты ---------- */
.tq-outcomes__lead { max-width: var(--ch-measure); margin: 0 0 var(--ch-sp-5); color: var(--ch-muted); }
.tq-outcomes__list { display: grid; gap: var(--ch-sp-4); max-width: var(--tq-col-main); margin: 0; padding: 0; list-style: none; }
.tq-outcomes__item { padding: var(--ch-sp-4) 0 0; border-top: 1px solid var(--ch-line); }
.tq-outcomes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ch-sp-1) var(--ch-sp-3); margin: 0 0 var(--ch-sp-1); }
.tq-outcomes__title { font-family: var(--ch-serif); font-size: var(--ch-fs-lg); }
.tq-outcomes__range { color: var(--ch-muted); font-size: var(--ch-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tq-outcomes__text { max-width: var(--ch-measure); margin: 0; color: var(--ch-muted); }

/* ---------- FAQ (аккордеон — .ch-accordion) ---------- */
.tq-faq__col { max-width: var(--tq-col-main); }
.tq-faq .ch-accordion__body p { margin: 0 0 var(--ch-sp-3); }
.tq-faq .ch-accordion__body p:last-child { margin-bottom: 0; }

/* ---------- источники ---------- */
.tq-sources__col { max-width: var(--tq-col-main); }
.tq-sources__list { display: grid; gap: var(--ch-sp-4); margin: 0; padding-left: var(--ch-sp-5); list-style: decimal; }
.tq-sources__list li::marker { color: var(--ch-muted); font-variant-numeric: tabular-nums; }
.tq-sources__type {
    display: inline-block;
    margin-right: var(--ch-sp-2);
    padding: 0 var(--ch-sp-2);
    background: var(--ch-violet-soft);
    border-radius: var(--ch-r-pill);
    color: var(--ch-violet);
    font-size: var(--ch-fs-xs);
    font-weight: 600;
    vertical-align: 1px;
}
.tq-sources__link:link,
.tq-sources__link:visited { color: var(--ch-ink); text-decoration: underline; text-decoration-color: var(--ch-line); text-underline-offset: 3px; }
.tq-sources__link:hover { color: var(--ch-violet); text-decoration-color: currentColor; }
.tq-sources__meta { display: block; margin-top: var(--ch-sp-1); color: var(--ch-muted); font-size: var(--ch-fs-sm); }

/* ---------- что дальше ---------- */
.tq-related__articles { max-width: var(--tq-col-main); margin-top: var(--ch-sp-5); }
.tq-related__subtitle { margin: 0 0 var(--ch-sp-3); color: var(--ch-muted); font-size: var(--ch-fs-xs); font-weight: 600; letter-spacing: var(--ch-ls-caps); text-transform: uppercase; }
.tq-related__list { display: grid; gap: var(--ch-sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--ch-fs-md); }
.tq-related__all { margin: var(--ch-sp-5) 0 0; }

/* ---------- апселл ИИ-астролога (как синий AI-hero главной) ---------- */
.tq-ai__banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ch-sp-6);
    padding: clamp(var(--ch-sp-6), 4vw, var(--ch-sp-7));
    overflow: hidden;
    background: radial-gradient(120% 150% at 86% 0%, var(--tq-violet-glow), transparent 56%), var(--tq-grad-navy);
    border-radius: var(--ch-r-xl);
    box-shadow: var(--tq-shadow-navy);
    color: var(--tq-on-navy);
}
.tq-ai__eyebrow { color: var(--tq-on-navy-eyebrow); }
.tq-ai__title { max-width: var(--ch-measure); margin: 0 0 var(--ch-sp-3); font-family: var(--ch-serif); font-size: var(--ch-fs-2xl); font-weight: 400; line-height: var(--ch-lh-snug); }
.tq-ai__title em { color: var(--tq-on-navy-accent); font-style: italic; }
.tq-ai__text { max-width: var(--ch-measure); margin: 0 0 var(--ch-sp-4); color: var(--tq-on-navy-muted); }
.tq-ai__bonus {
    display: inline-flex;
    gap: var(--ch-sp-2);
    margin: 0 0 var(--ch-sp-5);
    padding: var(--ch-sp-1) var(--ch-sp-3);
    background: var(--tq-on-navy-glass);
    border: 1px solid var(--tq-on-navy-line);
    border-radius: var(--ch-r-pill);
    color: var(--tq-on-navy-bonus);
    font-size: var(--ch-fs-sm);
}
.tq-ai__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ch-sp-4); }
/* тёмная кнопка на синем не читается — в баннере она светлая */
.tq-ai__banner .ch-btn.tq-ai__btn,
.tq-ai__banner .ch-btn.tq-ai__btn:hover { background: var(--ch-surface); color: var(--ch-ink); }
.tq-ai__banner .ch-btn.tq-ai__btn:hover { background: var(--ch-violet-soft); }
.tq-ai__alt:link,
.tq-ai__alt:visited { color: var(--tq-on-navy-muted); font-size: var(--ch-fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.tq-ai__alt:hover { color: var(--tq-on-navy); }
.tq-ai__visual { position: relative; display: none; min-height: var(--tq-orbit); }
.tq-ai__orbit { position: absolute; inset: 0; width: var(--tq-orbit); height: var(--tq-orbit); margin: auto; border: 1px solid var(--tq-on-navy-line); border-radius: 50%; }
.tq-ai__orbit--inner { width: calc(var(--tq-orbit) * .64); height: calc(var(--tq-orbit) * .64); }
.tq-ai__spark { position: absolute; top: var(--ch-sp-5); right: var(--ch-sp-5); color: var(--tq-spark); font-size: var(--ch-fs-2xl); }
@media (min-width: 900px) {
    .tq-ai__banner { grid-template-columns: minmax(0, 1fr) var(--tq-orbit); align-items: center; }
    .tq-ai__visual { display: block; }
}

/* ---------- модалка почты ---------- */
.tq-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--ch-sp-4); }
.tq-modal__backdrop { position: absolute; inset: 0; background: var(--tq-backdrop); }
.tq-modal__box { position: relative; width: 100%; max-width: var(--tq-modal-w); padding: var(--ch-sp-6); background: var(--ch-surface); border-radius: var(--ch-r-lg); box-shadow: var(--ch-shadow-pop); }
.tq-modal__close { position: absolute; top: var(--ch-sp-3); right: var(--ch-sp-3); background: none; border: 0; color: var(--ch-muted); font-size: var(--ch-fs-xl); line-height: 1; cursor: pointer; }
.tq-modal__title { margin: 0 0 var(--ch-sp-2); font-family: var(--ch-serif); font-size: var(--ch-fs-xl); font-weight: 400; }
.tq-modal__text { margin: 0 0 var(--ch-sp-4); color: var(--ch-muted); font-size: var(--ch-fs-sm); }
/* 16px литералом: меньше — iOS зумит страницу при фокусе */
.tq-modal__input { box-sizing: border-box; width: 100%; margin: 0 0 var(--ch-sp-3); padding: var(--ch-sp-4); border: 1.5px solid var(--ch-line); border-radius: var(--ch-r-sm); font-family: var(--ch-sans); font-size: 16px; }
.tq-modal__input:focus { outline: none; border-color: var(--ch-violet); }
.tq-modal__check { display: flex; align-items: flex-start; gap: var(--ch-sp-2); margin: 0 0 var(--ch-sp-4); color: var(--ch-muted); font-size: var(--ch-fs-sm); cursor: pointer; }
.tq-modal__check input { margin-top: 3px; }
.tq-modal__msg { min-height: var(--ch-sp-4); margin: var(--ch-sp-3) 0 0; color: var(--ch-muted); font-size: var(--ch-fs-sm); }

@media (max-width: 600px) {
    .tq-result__cta-row .ch-btn--lg { flex: 1 1 100%; }
    .tq-share__secondary .ch-btn { flex: 1 1 auto; }
}