/* ============================================================
   AI Product Discovery — веб-приложение (nr_marketing).

   Дизайн-язык унаследован от кабинета ИИ-стратегии (andre-ai-strategy,
   FR-W9/FR-W14/FR-PRC6): чёрный фон, JetBrains Mono, акценты #8854F3 /
   #F97316, композер-пилюля одного тона с фоном, круглая кнопка смены фона
   справа вверху, минимум рамок и теней.

   Экраны (FR-DSC-UI*):
     idle     — композер по центру страницы (FR-DSC-UI1)
     browse   — композер уехал наверх, ниже лента идей с фильтрами (FR-DSC-UI2)
     run      — композер наверху, ниже стадии исследования (FR-DSC-UI3)
   ============================================================ */

/* NFR-DSC-INFRA3: JetBrains Mono — свой файл (assets из andre-ai-strategy), без Google Fonts */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/vendor/fonts/JetBrainsMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/vendor/fonts/JetBrainsMono-Bold.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/static/vendor/fonts/JetBrainsMono-Bold.ttf') format('truetype'); }

:root {
  /* FR-W23 v4: тёмный фон и ВСЕ полупрозрачные фейды — из ОДНОГО чистого
     чёрного rgba(0,0,0,α): плёнка цвета фона поверх того же фона тождественна
     фону при любой альфе, полос быть не может. */
  --bg: #000000; --surface: #15151b; --surface-2: #1d1d25;
  --border: rgba(255,255,255,0.10);
  --purple: #8854F3; --purple-l: #a071ff; --orange: #F97316; --orange-l: #ff8a33;
  --green: #4ade80; --red: #f87171;
  --text: #E5E7EB; --dim: #94a3b8;
  --heading: #ffffff; --body2: #cbd5e1; --track: rgba(255,255,255,0.08);
  --btn-bg: #ffffff; --btn-fg: #000000; --input-bg: #0d0d12;
  --ctrl-bg: rgba(255,255,255,0.05); --ctrl-border: rgba(255,255,255,0.10);
  --fade: 0,0,0;                 /* rgb фейдов шапки и нижней панели */
  --line-strong: rgba(255,255,255,0.42);   /* NFR-DSC-FE8: контуры кружков выбора, полей, (i), «?» — ≥ 3:1 */
  --col: 68rem;                  /* ширина колонки контента (как кабинет) */
  --composer-w: 46rem;           /* ширина композера (как в кабинете) */
  --header-h: 5.6rem;
  --bar: 0px;                    /* резерв под липкую нижнюю кнопку (JS) */
  --ui-scale: 1;
}
/* светлая тема — та же, что в кабинете стратегии (FR-W14, html.light-cab) */
html.light-cab {
  --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0;
  --text: #1e293b; --dim: #64748b; --heading: #0f172a; --body2: #334155;
  --track: #eef2f7; --btn-bg: #0f172a; --btn-fg: #ffffff; --input-bg: #ffffff;
  --ctrl-bg: #f1f5f9; --ctrl-border: #e2e8f0;
  --fade: 248,250,252;
  /* NFR-DSC-FE7: акценты тёмной палитры на белом давали 1.3–3.3:1 — на свету темнее */
  --purple-l: #6d28d9; --orange-l: #c2410c; --green: #15803d; --red: #b91c1c;
  --line-strong: #64748b;
  color-scheme: light;
}

html, body {
  margin: 0; padding: 0; background: var(--bg); color-scheme: dark;
  font-family: 'JetBrains Mono', monospace; color: var(--text);
  width: 100%; min-height: 100vh; min-height: 100dvh;   /* NFR-FE8: vh-фолбэк */
  -webkit-tap-highlight-color: transparent;
}
html.light-cab body { color-scheme: light; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
/* hidden-атрибут всегда прячет элемент (NFR-W6) */
[hidden] { display: none !important; }
*:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
::selection { background: var(--purple); color: #fff; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img { max-width: 100%; }

@keyframes slideInPanel { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gradientShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.55); } 50% { box-shadow: 0 0 0 12px rgba(249,115,22,0); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes dots { 0%, 20% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
@keyframes bootFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes barSlide { 0% { left: -40%; } 100% { left: 110%; } }

/* ===== Boot-оверлей (FR-W16g): ничего не мелькает до первого рендера ===== */
#boot-cover { position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; background: var(--bg);
  animation: bootFailsafe 0s linear 12s forwards; }
.ui-spinner { width: 2rem; height: 2rem; border-radius: 999px;
  border: 2px solid var(--track); border-top-color: var(--purple);
  animation: spin 0.8s linear infinite; }

/* ===== Шапка — как в кабинете: лого слева, круглые кнопки справа ===== */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; pointer-events: none; padding: 1.1rem; }
@media (min-width: 1024px) { header { padding: 2rem; } }
/* FR-W21: деликатная подложка шапки, растворяется к 70% — контент листается под неё */
header::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--fade),0.88) 0%, rgba(var(--fade),0.5) 40%, rgba(var(--fade),0) 70%); }
.header-row { display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; min-height: clamp(2.85rem, 12vw, 3.7rem); }
@media (min-width: 1024px) { .header-row { min-height: 3.6rem; } }
.header-left { pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-shrink: 0; }
.header-right { pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; }
.logo-btn { cursor: pointer; flex-shrink: 0; }
.logo-img { display: block; width: clamp(2.85rem, 12vw, 3.7rem); height: clamp(2.85rem, 12vw, 3.7rem); object-fit: contain; }
@media (min-width: 1024px) { .logo-img { width: 3.6rem; height: 3.6rem; } }
/* круглая кнопка смены фона (sun/moon) — та же, что в кабинете (FR-W14) */
.ctrl-round { width: 2.6rem; height: 2.6rem; border-radius: 999px;
  border: 1px solid var(--ctrl-border); background: var(--ctrl-bg); color: var(--heading);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 15px; transition: all 0.25s ease; flex-shrink: 0; padding: 0; }
.ctrl-round:hover { border-color: var(--purple); }
.icon-flat { width: 2.6rem; height: 2.6rem; border: 0; background: transparent;
  color: var(--dim); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; border-radius: 0.6rem; transition: color 0.2s ease; }
.icon-flat:hover { color: var(--heading); }

/* ===== Кнопки — стиль главной ===== */
.btn-white { background: var(--btn-bg); color: var(--btn-fg); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
  font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; cursor: pointer; transition: all 0.3s ease; white-space: nowrap;
  padding: 0.72rem 1.35rem; font-size: calc(11.5px * var(--ui-scale)); letter-spacing: 0.15em; }
@media (hover: hover) {
  .btn-white:not(:disabled):hover { background: linear-gradient(100deg, var(--purple) 0%, var(--orange) 50%, var(--purple) 100%);
    background-size: 250% 250%; color: #fff; border-color: transparent;
    transform: translateY(-2px); animation: gradientShimmer 4.5s ease infinite; }
}
/* FR-DSC-UI7: неактивная кнопка — явно погашена, клики не проходят */
/* NFR-DSC-FE8: без opacity — сквозь погашенную кнопку не читаются карточки под ней */
.btn-white:disabled { background: var(--surface-2); color: var(--dim); border-color: var(--border); pointer-events: none; cursor: default; }
.btn-white.big { padding: 1.05rem 2.1rem; font-size: calc(12px * var(--ui-scale)); letter-spacing: 0.15em; gap: 0.75rem; }
.btn-white.alt { background: transparent; color: var(--heading); border-color: var(--border); }
.btn-ghost { background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--dim);
  padding: 0.62rem 1.15rem; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.25s ease; white-space: nowrap; }
@media (hover: hover) { .btn-ghost:hover { color: var(--heading); border-color: var(--purple); } }
.btn-ghost:disabled { opacity: 0.4; pointer-events: none; }
.btn-ghost.sm, .btn-white.sm { padding: 0.45rem 0.85rem; font-size: 11px; }
/* «Остановить» — оранжевый акцент (FR-DSC-UI6) */
.btn-stop { background: transparent; color: var(--orange-l); border: 1px solid rgba(249,115,22,0.55);
  border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; cursor: pointer;
  padding: 1.05rem 2.1rem; font-size: calc(12px * var(--ui-scale)); transition: all 0.25s ease;
  animation: recPulse 1.6s infinite; }
@media (hover: hover) { .btn-stop:hover { background: rgba(249,115,22,0.12); border-color: var(--orange); } }
.btn-link { background: none; border: 0; color: var(--purple-l); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; }
.btn-link:hover { text-decoration: underline; }

/* ===== Раскладка: одна центрированная колонка, страница листается нативно ===== */
.app { position: relative; z-index: 10; width: 100%; max-width: var(--col); margin: 0 auto;
  overflow-x: clip;   /* NFR-DSC-FE3: ничто внутри не расширяет документ вширь на телефоне */
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 1.2rem calc(var(--bar) + 2rem + env(safe-area-inset-bottom, 0px));
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .app { padding-top: calc(7rem + env(safe-area-inset-top, 0px)); } }

/* ===== Зона композера: по центру на старте, наверху дальше (FR-DSC-UI1/2) ===== */
.compose-zone { width: 100%; max-width: var(--composer-w); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  transform: translateY(var(--lift, 0px));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* в режиме поиска/стадий зона липнет под шапку с фейдом того же цвета */
body:not(.stage-idle) .compose-zone { position: sticky; top: 0; z-index: 25;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0.9rem; margin-top: calc(-1 * (var(--header-h) + env(safe-area-inset-top, 0px)));
  /* FR-DSC-UI18: фон непрозрачный на всю ширину окна (шире колонки композера),
     мягкий фейд — ниже зоны, а не под степпером */
  background: rgb(var(--fade)); box-shadow: 0 0 0 100vmax rgb(var(--fade)); clip-path: inset(0 -100vmax -1rem); }
body:not(.stage-idle) .compose-zone { margin-bottom: 1rem; }      /* в покое фейд лежит на пустом поле */
body:not(.stage-idle) .compose-zone::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; top: 100%; height: 1rem;
  background: linear-gradient(to bottom, rgba(var(--fade),1), rgba(var(--fade),0)); pointer-events: none; }
/* телефон: липкая шапка съедала до 40% экрана — там она уезжает вместе с контентом */
@media (max-width: 640px) {
  body:not(.stage-idle) .compose-zone { position: relative; }
  body:not(.stage-idle) header { position: absolute; }        /* и шапка с логотипом не висит над контентом */
}
@media (min-width: 1024px) {
  body:not(.stage-idle) .compose-zone { padding-top: calc(7rem + env(safe-area-inset-top, 0px));
    margin-top: calc(-1 * (7rem + env(safe-area-inset-top, 0px))); }
}
.hero-title { margin: 0; text-align: center; font-weight: 800; letter-spacing: -0.01em; line-height: 1.12;
  font-size: clamp(1.7rem, 5.2vw, 2.8rem); color: var(--heading); }
.hero-title .a1 { color: var(--purple-l); }
.hero-title .a2 { color: var(--orange-l); }
.hero-row { display: flex; align-items: flex-start; justify-content: center; gap: 0.4rem; }
.hero-row .help { margin-top: 0.3rem; }
body:not(.stage-idle) .hero-row { display: none; }

/* ===== «?» — пояснение по наведению/тапу вместо абзацев (FR-DSC-UI10) ===== */
.help { width: 1.35rem; height: 1.35rem; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--dim); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: help; vertical-align: middle;
  transition: color 0.2s ease, border-color 0.2s ease; }
.help:hover, .help.on { color: var(--purple-l); border-color: var(--purple); }
.tip-pinned { outline: 1px solid var(--purple); outline-offset: 2px; border-radius: 999px; }
/* на тач-экране цель пальца больше, чем кружок */
@media (hover: none) { .help { position: relative; } .help::after { content: ""; position: absolute; inset: -0.6rem; } }

/* ===== Композер — как в ChatGPT и кабинете (FR-PRC6): одного тона с фоном ===== */
.composer { display: flex; align-items: flex-end; gap: 0.5rem; width: 100%;
  background: var(--bg); border: 1px solid var(--ctrl-border); border-radius: 1.6rem;
  padding: 0.4rem 0.4rem 0.4rem 0.4rem; transition: border-color 0.25s ease; }
.composer:focus-within { border-color: var(--purple); }
.composer.recording { border-color: var(--orange); }
.composer-input { flex: 1; background: transparent; border: 0; resize: none; color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.55; padding: 0.55rem 0.2rem;
  min-height: 2.2rem; max-height: 11rem; overflow-y: auto; scrollbar-width: none; align-self: center; }
.composer-input::-webkit-scrollbar { display: none; }
.composer-input::placeholder { color: var(--dim); }
.composer-input:focus { outline: none; }
.composer-wave { flex: 1 1 0; min-width: 0; width: 100%; height: 2.4rem; align-self: center; overflow: hidden; }
.composer-btn { width: 2.7rem; height: 2.7rem; border-radius: 999px; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
  transition: all 0.25s ease; padding: 0; flex-shrink: 0; user-select: none; -webkit-user-select: none; }
/* слева — поиск по базе идей (FR-DSC-UI1): круглая мягкая кнопка */
.composer-search { background: var(--ctrl-bg); color: var(--dim); align-self: flex-end; }
@media (hover: hover) { .composer-search:hover { color: var(--heading); } }
.composer-search.on { color: var(--purple-l); background: rgba(136,84,243,0.16); }
.composer-mic { background: var(--ctrl-bg); color: var(--dim); }
@media (hover: hover) { .composer-mic:hover { color: var(--heading); } }
.composer-send { background: linear-gradient(120deg, var(--purple), var(--orange)); color: #fff; }
.composer-send:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .composer-send:not(:disabled):hover { transform: translateY(-1px); } }
.composer-cancel { background: var(--ctrl-bg); color: var(--dim); }
.composer-confirm { background: linear-gradient(120deg, var(--purple), var(--orange)); color: #fff; }
.composer.transcribing .composer-send i, .composer.sending .composer-send i { display: none; }
.composer.transcribing .composer-send::after, .composer.sending .composer-send::after { content: ""; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #ffffff; animation: spin 0.8s linear infinite; }
.composer-status { margin: 0.5rem 0 0; font-size: 12.5px; color: var(--red); min-height: 0; text-align: center; }
.composer-status:empty { display: none; }
/* подпись «идея из базы — можно править» над строкой ввода (FR-DSC-UI2c) */
.compose-note { width: 100%; display: flex; align-items: center; gap: 0.5rem; font-size: 12px; color: var(--dim);
  padding: 0 0.6rem; }
.compose-note i { color: var(--purple-l); }
.compose-note .ent-id { margin-left: auto; }
.compose-note .x { border: 0; background: transparent; color: var(--dim); cursor: pointer; padding: 0.1rem 0.3rem; font-size: 11px; line-height: 1; }
.compose-note .x i { color: inherit; }
.compose-note .x:hover { color: var(--text); }

/* FR-DSC-UI14: идея прогона — одна строка над стадией, тап раскрывает */
.run-idea { width: 100%; margin: 0 0 0.6rem; display: flex; gap: 0.6rem; align-items: baseline; font-size: 12.5px; color: var(--body2); cursor: pointer; }
.run-idea .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 800; flex-shrink: 0; }
.run-idea .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-idea.open .txt { white-space: normal; }

/* ===== Стадии: шаги-«хлебные крошки» (FR-DSC-UI3) ===== */
.stepper { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; padding: 0.15rem 0.1rem;
  /* шире композера (зона центрирует переполняющий элемент), на широком экране — по центру */
  width: min(calc(var(--col) - 2.4rem), calc(100vw - 2.4rem)); flex-shrink: 0; justify-content: safe center; }
.stepper::-webkit-scrollbar { display: none; }
.step { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap; cursor: default; }
.step b { font-weight: 700; }
.step i { font-size: 9px; }
.step.done { color: var(--purple-l); border-color: rgba(136,84,243,0.45); cursor: pointer; }
.step.active { color: var(--heading); border-color: var(--heading); }
.step.running { color: var(--orange-l); border-color: rgba(249,115,22,0.55); }
@media (hover: hover) { .step.done:hover { background: rgba(136,84,243,0.10); } }

/* ===== Контент стадии ===== */
.stage { width: 100%; animation: slideInPanel 0.45s ease; display: flex; flex-direction: column; gap: 1rem; padding-top: 0.6rem; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stage-title-row { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.stage-title-row .count { font-size: 12px; color: var(--dim); font-weight: 700; }
.stage-title { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--heading); }
.stage-title .h-accent { color: var(--purple); margin-right: 0.35rem; }
.stage-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.stage-tools .count { font-size: 12px; color: var(--dim); }
.section-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 0.4rem; flex-wrap: wrap; }
.h3-line { margin: 0; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--heading); }
.h-accent { color: var(--purple); margin-right: 0.35rem; }
.muted { color: var(--dim); font-size: 13px; }
.ent-id { font-size: 11px; color: var(--dim); opacity: 0.75; letter-spacing: 0.04em; white-space: nowrap; }
.empty { text-align: center; color: var(--dim); font-size: 13px; padding: 2rem 1rem; border: 1px dashed var(--border); border-radius: 1rem; }

/* ===== Фильтры ленты идей (FR-DSC-UI2b) ===== */
.filters { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; width: 100%; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; gap: 0.15rem; }
.seg button { border: 0; background: transparent; color: var(--dim); font-family: inherit; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 0.42rem 0.85rem; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; }
.seg button.on { background: var(--heading); color: var(--bg); }
.fld { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: 999px;
  padding: 0.35rem 0.9rem; min-height: 2.5rem; color: var(--dim); font-size: 12px; background: var(--bg); }
.fld i { font-size: 12px; color: var(--dim); }
.fld input, .fld select { background: transparent; border: 0; color: var(--text); font-family: inherit; font-size: 12.5px; min-width: 0; outline: none; }
.fld input::placeholder { color: var(--dim); }
.fld select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 0.2rem; }
.fld.q { flex: 1 1 11rem; }
.fld.q input { flex: 1; }
.fld.q input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; }
.fld.tags { flex: 1 1 16rem; }
.fld.tags input { flex: 1; }
.fld.date input[type="date"] { color-scheme: dark; }
html.light-cab .fld.date input[type="date"] { color-scheme: light; }
/* телефон: тип и дата — одной строкой, поиск и теги — под ними на всю ширину */
@media (max-width: 640px) {
  .filters .seg { order: 0; }
  .filters .fld.date { order: 1; flex: 1 1 auto; justify-content: center; }
  .filters .fld.q { order: 2; flex: 1 1 100%; }
  .filters .fld.tags { order: 3; flex: 1 1 100%; }
}
.fld .clear { border: 0; background: transparent; color: var(--dim); cursor: pointer; padding: 0 0.1rem; font-size: 12px; }
.fld .clear:hover { color: var(--heading); }
/* выпадающий список тегов: группы → листья, поиск по тексту, мультивыбор */
.tag-dd { position: absolute; left: 0; right: 0; top: calc(100% + 0.4rem); z-index: 40; max-height: 20rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.1rem;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tag-dd .grp { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); padding: 0.55rem 0.6rem 0.25rem; font-weight: 800; }
.tag-dd .opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.6rem; cursor: pointer; font-size: 12.5px; color: var(--text); }
.tag-dd .opt:hover { background: rgba(136,84,243,0.10); }
.tag-dd .opt .box { width: 1rem; height: 1rem; border-radius: 0.3rem; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; color: transparent; flex-shrink: 0; }
.tag-dd .opt .box i { color: inherit; font-size: 8px; }       /* .fld i не должен красить галочку невыбранных */
.tag-dd .opt.on .box { background: var(--purple); border-color: var(--purple); color: #fff; }
.tag-dd .opt .n { margin-left: auto; color: var(--dim); font-size: 11px; }
.tag-dd .none { padding: 0.6rem; color: var(--dim); font-size: 12px; }
.active-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }

/* ===== Чипы / теги / бейджи ===== */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { font-size: 11px; padding: 0.24rem 0.62rem; border-radius: 999px; border: 1px solid var(--border); color: var(--dim);
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; line-height: 1.3; max-width: 100%; }
/* длинные подписи (сегмент, боль, функция) переносятся — иначе чип шире экрана телефона */
.chip.seg-ref, .chip.feat, .chain .chip, .chip.tag { white-space: normal; }
.chip i { font-size: 9.5px; color: var(--purple-l); }
.chip.on { border-color: var(--purple); color: var(--purple-l); }
.chip.tag { cursor: pointer; }
@media (hover: hover) { .chip.tag:hover { border-color: var(--purple); color: var(--purple-l); } }
.chip .x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 0.1rem; font-size: 10px; line-height: 1; }
.chip.kind { border-color: rgba(255,255,255,0.18); color: var(--heading); font-weight: 700; letter-spacing: 0.08em; }
html.light-cab .chip.kind { border-color: rgba(15,23,42,0.25); }
.chip.src { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 11px; }
.chip.src-ph { border-color: rgba(249,115,22,0.5); color: var(--orange-l); }
.chip.src-ph i { color: var(--orange-l); }
.chip.src-yc { border-color: rgba(249,115,22,0.5); color: var(--orange-l); }
.chip.src-yc i { color: var(--orange-l); }
.chip.src-taaft { border-color: rgba(136,84,243,0.5); color: var(--purple-l); }
.chip.src-web { border-color: rgba(74,222,128,0.4); color: var(--green); }
.chip.src-web i { color: var(--green); }
.chip.src-db { border-color: rgba(136,84,243,0.5); color: var(--purple-l); }
.chip.potd { background: rgba(249,115,22,0.14); border-color: rgba(249,115,22,0.5); color: var(--orange-l); font-weight: 700; }
.chip.potd i { color: var(--orange-l); }
.chip.fund { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.4); color: var(--green); font-weight: 700; }
.chip.fund i { color: var(--green); }
.chip.feat { border-color: rgba(136,84,243,0.4); color: #c9b1ff; }
html.light-cab .chip.feat { color: #6d3fd6; }
.chip.feat i { color: var(--purple-l); }
.chip.syn { border-color: rgba(249,115,22,0.4); color: var(--orange-l); font-size: 11px; }
/* иконка без подписи (источник, synthetic, JTBD/ценность в цепочке) — подпись в подсказке */
.chip.ico { padding: 0.24rem 0.42rem; }
.chip.src.ico i, .chip.syn.ico i { margin: 0; }
.chip.syn i { color: var(--orange-l); }
.chip.seg-ref { border-color: rgba(136,84,243,0.4); color: var(--purple-l); }
.chip[data-tip], .prio-signal[data-tip], .cover[data-tip], .score-pill[data-tip], .rice[data-tip], .hyp-metric[data-tip],
.prod-h[data-tip], .merged, .jtbd-box .lbl[data-tip] { cursor: help; }
.chip.rel { font-weight: 700; color: var(--heading); }
.chip.rel .bar { width: 3rem; height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.chip.rel .bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--orange)); }
.chip.status-run { color: var(--orange-l); border-color: rgba(249,115,22,0.4); }
.chip.status-ok { color: var(--green); border-color: rgba(74,222,128,0.35); }
.chip.status-err { color: var(--red); border-color: rgba(248,113,113,0.4); }
.chip.status-stop { color: var(--dim); }
.spinner { width: 0.85rem; height: 0.85rem; border-radius: 999px; border: 2px solid transparent;
  border-top-color: currentColor; border-right-color: currentColor; animation: spin 0.8s linear infinite; display: inline-block; flex-shrink: 0; }

/* ===== Карточки — плитки в сетке (FR-DSC-UI13) =====
   Колонки считает сама сетка от ширины списка: ≈3 на десктопе, 2 на планшете,
   1 на телефоне; «широкие» списки (боли, гипотезы) — 2 / 1. Плитки в ряду —
   одной высоты, низ плитки (мета · действия) прижат ко дну. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
  gap: 0.8rem; width: 100%; align-items: stretch; }
.cards.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); align-items: start; }
.cards > .empty, .cards > .err-box, .cards > p { grid-column: 1 / -1; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 0.65rem; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 1.1rem; padding: 1rem 1.05rem;
  transition: border-color 0.25s ease, transform 0.25s ease; animation: cardIn 0.4s ease both; }
.pcard.selectable { cursor: pointer; }
@media (hover: hover) { .pcard:hover { border-color: rgba(136,84,243,0.5); } }
.pcard.on { border-color: var(--purple); }
.pcard.dim { opacity: 0.55; }
.tile-top { display: flex; align-items: flex-start; gap: 0.7rem; min-width: 0; }
.tile-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.1rem; }
.tile-sub { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-grow { flex: 1 1 auto; }
.tile-top .sel { margin-top: 0.15rem; }
.tile-badges, .tile-tags { gap: 0.3rem; }
.pcard-ico { width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--heading); font-weight: 800; font-size: 16px; }
.pcard-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-ico.round { border-radius: 999px; }
.pcard-ico.grad-1 { background: linear-gradient(135deg, #8854F3, #F97316); color: #fff; border: 0; }
.pcard-ico.grad-2 { background: linear-gradient(135deg, #2563eb, #8854F3); color: #fff; border: 0; }
.pcard-ico.grad-3 { background: linear-gradient(135deg, #F97316, #ef4444); color: #fff; border: 0; }
.pcard-ico.grad-4 { background: linear-gradient(135deg, #059669, #8854F3); color: #fff; border: 0; }
.pcard-ico.grad-5 { background: linear-gradient(135deg, #0ea5e9, #F97316); color: #fff; border: 0; }
.pcard-ico.ph { background: var(--surface-2); }
.pcard-name { font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--heading); overflow-wrap: anywhere; }
.pcard-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--body2); }
.pcard-text.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-text.clamp.c4 { -webkit-line-clamp: 4; }
.pcard-foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.15rem; }
.pcard-foot .meta { font-size: 11.5px; color: var(--dim); display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; min-width: 0; }
.pcard-foot .meta i { font-size: 10px; }
.pcard-foot .actions { margin-left: auto; display: flex; align-items: center; gap: 0.45rem; }
.pcard-foot .actions:empty, .pcard-foot .meta:empty { display: none; }
@media (max-width: 640px) {
  .pcard { padding: 0.95rem 1rem; }
  .pcard-ico { width: 2.5rem; height: 2.5rem; font-size: 15px; }
}
/* буллет выбора — как чекбокс точек автоматизации в кабинете */
.sel { width: 1.4rem; height: 1.4rem; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; cursor: pointer;
  flex-shrink: 0; margin-top: 0.75rem; transition: all 0.2s ease; padding: 0; }
.sel.sq { border-radius: 0.4rem; }
.pcard.on .sel, .sel.on, .pain-card.on > .tile-top > .sel { background: var(--purple); border-color: var(--purple); color: #fff; }
.value-card.on .sel { background: var(--orange); border-color: var(--orange); color: #fff; }
.sel:disabled { opacity: 0.35; cursor: default; }
/* FR-DSC-SEL3: выбор пройденной стадии зафиксирован — отмеченное видно, но не меняется */
.pcard.on .sel:disabled, .sel.on:disabled, .pain-card.on > .tile-top > .sel:disabled, .value-card.on .sel:disabled { opacity: 0.7; }
.pcard.selectable:has(.sel:disabled), .pain-card:has(> .tile-top > .sel:disabled) { cursor: default; }
.lock { color: var(--dim); font-size: 11px; cursor: help; padding: 0 0.2rem; }
/* (i) — подсказка/подробности (FR-DSC-UI8): наведение на десктопе, тап везде */
.info-btn { width: 1.65rem; height: 1.65rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10.5px; flex-shrink: 0; transition: all 0.2s ease; padding: 0; }
.info-btn:hover { color: var(--purple-l); border-color: var(--purple); }
a.info-btn { text-decoration: none; }
/* скелет — поля персоны/карточки «наполняются» в реальном времени */
.sk { display: block; height: 0.8rem; border-radius: 0.4rem; background: linear-gradient(90deg, var(--track) 25%, rgba(136,84,243,0.18) 50%, var(--track) 75%);
  background-size: 200% 100%; animation: skeleton 1.4s linear infinite; }
.sk.w40 { width: 40%; } .sk.w60 { width: 60%; } .sk.w80 { width: 80%; } .sk.w100 { width: 100%; }
.sk-lines { display: flex; flex-direction: column; gap: 0.45rem; }

/* ===== Трейс исполнения (FR-DSC-UI5): только наблюдаемые действия ===== */
.trace { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 1.1rem; padding: 1rem 1.15rem;
  display: flex; flex-direction: column; gap: 0.75rem; }
.trace-head { display: flex; align-items: center; gap: 0.6rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 800; }
.trace-head .spinner { color: var(--orange-l); }
.trace-head .toggle { margin-left: auto; }
.trace-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 900px) { .trace-grid { grid-template-columns: 1fr 1fr; } }
.tr-block { border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--bg); animation: cardIn 0.3s ease both; min-width: 0; }
.tr-block.full { grid-column: 1 / -1; }
.tr-block.done { border-color: rgba(74,222,128,0.25); }
.tr-title { display: flex; align-items: center; gap: 0.5rem; font-size: 12.5px; color: var(--heading); font-weight: 700; min-width: 0; }
.tr-title .q { color: var(--purple-l); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-title .spinner { color: var(--orange-l); }
.tr-title .ok { color: var(--green); font-size: 11px; }
.tr-title .n { margin-left: auto; font-size: 11px; color: var(--dim); font-weight: 500; white-space: nowrap; }
.tr-line { display: flex; align-items: center; gap: 0.45rem; font-size: 12px; color: var(--body2); min-width: 0; padding-left: 0.2rem; }
.tr-line .arr { color: var(--dim); }
.tr-line .ok { color: var(--green); font-size: 10px; }
.tr-line .dup { color: var(--dim); text-decoration: line-through; }
.tr-line .dupmark { color: var(--dim); font-size: 11px; }
.tr-line .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-line .spinner { width: 0.7rem; height: 0.7rem; color: var(--orange-l); }
.tr-steps { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; font-size: 11.5px; color: var(--dim); }
.tr-steps span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tr-steps span.ok { color: var(--green); }
.tr-steps span.run { color: var(--orange-l); }
.tr-queries { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.trace-sum { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); width: 100%;
  padding: 0 0.2rem; }
.trace-sum b { color: var(--heading); }
.trace-sum .ok { color: var(--green); }
.trace-sum .toggle { margin-left: auto; }

/* ===== Прогресс по продуктам (сравнение, FR-DSC-CMP1) ===== */
.prog-rows { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.prog-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.7rem; align-items: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.6rem 0.85rem; animation: cardIn 0.3s ease both; }
.prog-row .pcard-ico { width: 2rem; height: 2rem; border-radius: 0.5rem; font-size: 12px; }
.prog-row .nm { font-size: 13px; font-weight: 700; color: var(--heading); display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.prog-row .st { font-size: 11.5px; color: var(--dim); font-weight: 500; display: flex; align-items: center; gap: 0.4rem; }
.prog-row .st.ok { color: var(--green); }
.prog-row .st.err { color: var(--red); }
.prog-row .cnt { font-size: 16px; font-weight: 800; background: linear-gradient(100deg, var(--purple-l), var(--orange-l));
  -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 2rem; text-align: right; }
.prog-row .track { grid-column: 2 / -1; height: 3px; border-radius: 999px; background: var(--track); overflow: hidden; position: relative; }
.prog-row .track b { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--orange)); animation: barSlide 1.4s ease-in-out infinite; }
.prog-row .track.ok b { position: static; display: block; width: 100%; animation: none; }

/* ===== Таблица сравнения (FR-DSC-CMP2): sticky-фича слева, продукты листаются ===== */
.cmp-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border); border-radius: 1.1rem; background: var(--surface);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; animation: slideInPanel 0.5s ease; }
.cmp { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.cmp th, .cmp td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: center; white-space: nowrap; }
.cmp th { font-weight: 700; color: var(--heading); background: var(--surface); position: sticky; top: 0; z-index: 2; }
.cmp th.feat, .cmp td.feat { position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left; white-space: normal;
  min-width: 15rem; max-width: 20rem; border-right: 1px solid var(--border); }
.cmp th.feat { z-index: 4; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp td.feat { display: table-cell; }
.cmp .feat-in { display: flex; align-items: flex-start; gap: 0.6rem; }
.cmp .feat-in .sel { margin-top: 0.05rem; width: 1.2rem; height: 1.2rem; }
.cmp .feat-in .fn { font-size: 13px; color: var(--text); line-height: 1.45; }
.merged { display: inline-block; margin-left: 0.4rem; font-size: 11px; color: var(--dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 0.35rem; vertical-align: 1px; }
.cmp tr.on td.feat { box-shadow: inset 3px 0 0 var(--purple); }
.cmp tr.on td { background: rgba(136,84,243,0.06); }
.cmp tr.on td.feat { background: linear-gradient(rgba(136,84,243,0.06), rgba(136,84,243,0.06)), var(--surface); }
.cmp .prod-h { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 9rem; }
.cmp .prod-h .pcard-ico { width: 2.2rem; height: 2.2rem; border-radius: 0.55rem; font-size: 12px; }
.cmp .prod-h .pn { font-size: 12.5px; font-weight: 700; color: var(--heading); white-space: nowrap; }
.cmp .prod-h .pp { font-size: 11px; color: var(--orange-l); font-weight: 700; white-space: nowrap; }
.cmp .yes { color: var(--purple-l); font-size: 14px; }
.cmp .no { color: var(--dim); }          /* NFR-DSC-FE8: без opacity — «—» читается */
.cmp .cell { display: inline-flex; align-items: center; gap: 0.35rem; justify-content: center; }
.cmp .cell .info-btn { width: 1.35rem; height: 1.35rem; font-size: 9px; }


/* ===== Сегменты (FR-DSC-SEG1) ===== */
.cover { font-size: 11px; color: var(--dim); display: inline-flex; align-items: center; gap: 0.4rem; }
.cover .bar { width: 4.5rem; height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.cover .bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--orange)); }

/* ===== Респонденты (FR-DSC-RSP1) ===== */
.seg-group { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.seg-group-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.2rem 0.2rem 0; }
.seg-group-head .nm { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--heading); }
.seg-group-head .nm .h-accent { margin-right: 0.3rem; }
.seg-group-head .count { font-size: 11.5px; color: var(--dim); }
.avatar { width: 3rem; height: 3rem; border-radius: 999px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 15px; background: linear-gradient(135deg, var(--purple), var(--orange)); position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.pending { background: var(--surface-2); color: var(--dim); }
.avatar.pending .spinner { color: var(--purple-l); }
.avatar.failed { background: var(--surface-2); color: var(--dim); }
.avatar .st { position: absolute; right: -2px; bottom: -2px; width: 1rem; height: 1rem; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 7px; }
.avatar .st.ok { color: var(--green); }
.avatar .st.run { color: var(--orange-l); }

.prio-signal { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 11px; color: var(--dim); flex-wrap: wrap; }
.prio-signal b { color: var(--heading); }
.prio-signal .x { color: var(--dim); }

/* ===== Интервью (FR-DSC-INT1): Q&A появляются построчно ===== */
.qa { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.2rem; }
.qa .q, .qa .a { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; font-size: 13px; line-height: 1.55; animation: cardIn 0.3s ease both; }
.qa .q { color: var(--heading); font-weight: 700; }
.qa .q .lbl { color: var(--purple-l); }
.qa .a { color: var(--body2); }
.qa .a .lbl { color: var(--orange-l); font-weight: 700; }
.qa .typing { display: inline-flex; gap: 0.25rem; padding-left: 2.1rem; }
.qa .typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--dim); display: inline-block; animation: dots 1.2s infinite; }
.qa .typing i:nth-child(2) { animation-delay: 0.2s; } .qa .typing i:nth-child(3) { animation-delay: 0.4s; }
.findings { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; line-height: 1.55; color: var(--body2); }
.findings li::marker { color: var(--purple); }

/* ===== Карта болей → JTBD → Ценность (FR-DSC-PAIN1/JTBD1/VAL1) ===== */
.pain-card { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 1.1rem; padding: 1rem 1.05rem; transition: border-color 0.25s ease; animation: cardIn 0.4s ease both; cursor: pointer; }
.pain-card.on { border-color: var(--purple); }
.pain-card .tile-top { align-items: flex-start; }
.pain-card .tile-top .score-pill, .pain-card .tile-top .info-btn { flex-shrink: 0; }
.pain-stmt { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--heading); line-height: 1.45; }
.meters { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.meter { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11px; color: var(--dim); }
.meter .bar { width: 3.4rem; height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.meter .bar b { display: block; height: 100%; background: var(--purple); }
.meter.sev .bar b { background: var(--orange); }
.meter .num { color: var(--heading); font-weight: 700; }
.score-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 11px; padding: 0.25rem 0.6rem; border-radius: 999px;
  border: 1px solid rgba(249,115,22,0.45); color: var(--orange-l); font-weight: 800; }
.quote { margin: 0; padding: 0.1rem 0 0.1rem 0.8rem; border-left: 2px solid var(--purple);
  font-size: 12.5px; line-height: 1.55; color: var(--body2); font-style: italic; }
.quote .ref { font-style: normal; color: var(--dim); font-size: 11px; margin-right: 0.4rem; }
.quote .who { font-style: normal; font-size: 11px; color: var(--dim); margin-left: 0.4rem; white-space: nowrap; }
.modal-body .quote .who { white-space: normal; overflow-wrap: anywhere; }
.modal-body { overflow-x: hidden; }
.quote .who i { color: var(--orange-l); font-size: 10px; cursor: help; }
.jtbd-box { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 0.7rem; }
.jtbd-box .lbl { font-size: 11px; letter-spacing: 0.06em; color: var(--purple-l); font-weight: 800; margin-top: 0.2rem;
  border: 1px solid rgba(136,84,243,0.4); border-radius: 0.4rem; padding: 0.1rem 0.35rem; }
.jtbd-stmt { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
@media (max-width: 640px) {
  .jtbd-box { grid-template-columns: 1fr auto; row-gap: 0.35rem; }
  .jtbd-box .lbl { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
  .pain-card { padding: 0.9rem; }
}
.jtbd-stmt b { color: var(--heading); }
.forces .chip.push i { color: var(--orange-l); } .forces .chip.pull i { color: var(--green); }
.forces .chip.anx i { color: var(--red); } .forces .chip.habit i { color: var(--dim); }
/* цепочка «Боль → Механизм → Результат» — три шага со стрелками */
.vchain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0.5rem; align-items: stretch; }
.vchain .vstep { border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.65rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; background: var(--bg); min-width: 0; }
.vchain .vstep .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); font-weight: 800; }
.vchain .vstep .txt { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.vchain .vstep.mech { border-color: rgba(136,84,243,0.45); } .vchain .vstep.mech .lbl { color: var(--purple-l); }
.vchain .vstep.res { border-color: rgba(74,222,128,0.35); } .vchain .vstep.res .lbl { color: var(--green); }
.vchain .varr { display: flex; align-items: center; color: var(--dim); font-size: 12px; }
/* внутри плитки боли ценность — три строки «лейбл · текст», без вложенных рамок и стрелок */
.value-card .vchain { grid-template-columns: auto 1fr; gap: 0.3rem 0.65rem; align-items: baseline; }
.value-card .vchain .vstep { display: contents; }
.value-card .vchain .varr { display: none; }
@media (max-width: 640px) { .value-card .vchain { grid-template-columns: 1fr; row-gap: 0.15rem; } .value-card .vchain .vstep .txt { margin-bottom: 0.35rem; } }
@media (max-width: 700px) {
  .vchain { grid-template-columns: 1fr; }
  .vchain .varr { justify-content: center; transform: rotate(90deg); height: 1rem; }
}
.value-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; border: 1px solid var(--border);
  border-radius: 0.9rem; padding: 0.6rem 0.75rem; background: var(--bg); transition: all 0.25s ease; cursor: pointer; }
.value-card.on { border-color: var(--orange); }
/* NFR-DSC-FE8: неактивная ценность читается — отличие пунктиром, а не бледностью (FR-DSC-UI32: без прозрачности) */
.value-card.locked { opacity: 1; border-style: dashed; }
.value-card.locked .sel { opacity: 1; border-style: dashed; }
.value-card .sel { margin-top: 0; }
.value-card.locked { cursor: default; }
.value-card .vchain { min-width: 0; }
.vpc { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 640px) { .vpc { grid-template-columns: 1fr; } }
.vpc .col { border: 1px dashed var(--border); border-radius: 0.7rem; padding: 0.6rem 0.75rem; }
.vpc .col h6 { margin: 0 0 0.35rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.vpc .col ul { margin: 0; padding-left: 1rem; font-size: 12px; line-height: 1.5; color: var(--body2); }
.vpc .col li::marker { color: var(--purple); }

/* ===== Гипотезы + RICE (FR-DSC-HYP1/RICE1) ===== */
.hyp-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 1.1rem; padding: 1rem 1.05rem; animation: cardIn 0.4s ease both; }
.hyp-card .tile-top { align-items: center; }
.hyp-card .tile-top .rice { flex-direction: row; align-items: baseline; gap: 0.45rem; min-width: 0; }
.hyp-card .tile-top .rice .big { font-size: 1.5rem; }
.hyp-card.top { border-color: rgba(136,84,243,0.55); }
.rank { width: 2.2rem; height: 2.2rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: 13px; border: 1px solid var(--border); color: var(--dim); flex-shrink: 0; }
.rank.r1 { background: var(--purple); border-color: var(--purple); color: #fff; }
.rank.r2 { border-color: rgba(136,84,243,0.6); color: var(--purple-l); }
.rank.r3 { border-color: rgba(249,115,22,0.6); color: var(--orange-l); }
.hyp-stmt { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--heading); line-height: 1.45; }
.hyp-metric { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 11px; color: var(--dim); }
.chain .chip { font-size: 11px; padding: 0.18rem 0.5rem; }
.chain .arr { font-size: 9px; }
.rice { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; min-width: 5.5rem; }
.rice .big { font-size: 1.9rem; font-weight: 800; line-height: 1; background: linear-gradient(100deg, var(--purple-l), var(--orange-l));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.rice .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); font-weight: 800; }

/* ===== Lean Canvas — карусель (FR-DSC-LC1) ===== */
.lc-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; }
.lc-nav .mid { display: flex; align-items: center; gap: 0.7rem; min-width: 0; overflow: hidden; }
.lc-nav .ctrl-round { flex-shrink: 0; }
.lc-nav .pos { white-space: nowrap; }
.lc-nav.many .dots { display: none; }                 /* больше 7 канвасов — только «N / M» */
.lc-nav .dots { display: flex; gap: 0.35rem; }
.lc-nav .dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--track); display: inline-block; cursor: pointer; }
.lc-nav .dots i.on { background: var(--purple); }
.lc-nav .pos { font-size: 12px; color: var(--dim); }
.lc-track { width: 100%; overflow: hidden; transition: height 0.35s ease; touch-action: pan-y; overscroll-behavior-x: contain; }
.lc-strip { display: flex; align-items: flex-start; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lc-card { flex: 0 0 100%; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.9rem; }
.lc-head { display: flex; align-items: flex-start; gap: 0.9rem; flex-wrap: wrap; }
.lc-head .hyp-stmt { flex: 1 1 18rem; }
.lc-head .rice { flex-direction: row; align-items: center; gap: 0.6rem; }
.lc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0.55rem; }
.lc-box { border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.7rem 0.8rem; background: var(--bg); min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.lc-box h6 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--purple-l); font-weight: 800; display: flex; align-items: center; gap: 0.35rem; }
.lc-box h6 i { font-size: 9px; }
.lc-box.o h6 { color: var(--orange-l); }
.lc-box.g h6 { color: var(--green); }
.lc-box ul { margin: 0; padding-left: 0.95rem; font-size: 12px; line-height: 1.5; color: var(--body2); }
.lc-box li::marker { color: var(--purple); }
.lc-box p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--body2); }
.lc-box .unk { color: var(--dim); font-style: italic; }
.lc-box.tall { grid-row: span 2; }
.lc-box.wide { grid-column: span 2; }
.lc-box.wide3 { grid-column: span 3; }
.lc-box.full { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .lc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-box.tall { grid-row: auto; }
  .lc-box.wide, .lc-box.wide3 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .lc-grid { grid-template-columns: 1fr; }
  .lc-box.wide, .lc-box.wide3, .lc-box.full { grid-column: auto; }
  .lc-card { padding: 1rem; }
}
.lc-chain { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

/* ===== Липкая нижняя кнопка — ОДНО главное действие (FR-DSC-UI6) ===== */
.stage-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; pointer-events: none;
  padding: 1.6rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px));
  /* FR-DSC-UI6: под кнопками и подсказкой фон сплошной (контент не просвечивает), мягкий фейд — только над ними */
  background: linear-gradient(to top, rgba(var(--fade),1) calc(100% - 1.6rem), rgba(var(--fade),0) 100%); }
.stage-bar-in { pointer-events: auto; max-width: var(--composer-w); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
.stage-bar .hint { font-size: 12px; color: var(--dim); flex: 1 1 auto; min-width: 0; }
.stage-bar .btn-white.big, .stage-bar .btn-stop { min-width: 14rem; }
@media (max-width: 640px) {
  .stage-bar-in { flex-direction: column-reverse; gap: 0.5rem; }
  .stage-bar .btn-white.big, .stage-bar .btn-stop { width: 100%; }
  .stage-bar .hint { text-align: center; }
}
.sel-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ===== Модалка (i) — как в кабинете (FR-PRC8), но с прокруткой тела ===== */
.modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 1rem;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-card { background: var(--bg); border: 1px solid var(--border); border-radius: 1.1rem; width: 100%; max-width: 44rem; max-height: min(88vh, 88dvh);
  display: flex; flex-direction: column; animation: slideInPanel 0.3s ease; position: relative; }
.modal-head { display: flex; align-items: center; gap: 0.7rem; padding: 1.05rem 1.2rem 0.6rem; }
.modal-head h3 { margin: 0; font-size: 15px; color: var(--heading); flex: 1; min-width: 0; }
.modal-head .ent-id { margin-right: 0.4rem; }
.modal-close { width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-close:hover { color: var(--heading); border-color: var(--purple); }
.modal-body { padding: 0.2rem 1.2rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.8rem; font-size: 13px; line-height: 1.6; color: var(--body2);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.modal-body h5 { margin: 0.5rem 0 0.2rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--purple-l); }
.modal-body p { margin: 0; }
.modal-body ul { margin: 0; padding-left: 1.1rem; }
.modal-body .kv { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.25rem 0.9rem; font-size: 12.5px; }
.modal-body .kv .k { color: var(--dim); }
@media (max-width: 640px) { .modal-body .kv { grid-template-columns: 1fr; gap: 0.1rem 0; } .modal-body .kv .k { margin-top: 0.4rem; } }
/* hover-превью (i) на десктопе — компактная подсказка возле курсора */
.hover-tip { position: fixed; z-index: 95; max-width: 22rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.8rem;
  padding: 0.6rem 0.8rem; font-size: 12px; line-height: 1.5; color: var(--body2); pointer-events: none; animation: cardIn 0.15s ease; }
/* на тач-экране подсказку открывает только тап по «?» (hover там не срабатывает) */

/* ===== Ошибки стадии (локальные, FR-DSC-ERR1) ===== */
.err-box { border: 1px solid rgba(248,113,113,0.4); background: rgba(248,113,113,0.06); border-radius: 0.9rem; padding: 0.75rem 0.95rem; font-size: 12.5px; color: var(--red);
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.err-box .btn-ghost { margin-left: auto; }
.form-error { color: var(--red); font-size: 12.5px; margin: 0.5rem 0 0; text-align: center; }

/* ===== Адаптив ===== */
@media (max-width: 1023px) {
  /* мобилка: шаги на всю ширину экрана (align-self: stretch — иначе в flex-колонке
     width:auto = max-content, и лента шагов растягивала документ вширь) */
  .stepper { align-self: stretch; width: auto; margin-left: -1.2rem; margin-right: -1.2rem;
    padding-left: 1.2rem; padding-right: 1.2rem; justify-content: flex-start; }
  .cmp th.feat, .cmp td.feat { min-width: 11rem; max-width: 13rem; }
  .cmp th, .cmp td { padding: 0.6rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}

/* FR-DSC-UI16: на тач-экране зоны нажатия мелких кнопок шире самих значков (≈40px) */
@media (hover: none) {
  .info-btn, .sel, .btn-link.toggle, .lc-nav .dots i, .chip .x, .compose-note .x { position: relative; }
  .info-btn::after, .sel::after { content: ""; position: absolute; inset: -0.45rem; }
  .chip .x::after, .compose-note .x::after { content: ""; position: absolute; inset: -0.6rem -0.4rem; }
  .btn-link.toggle::after { content: ""; position: absolute; inset: -0.7rem -0.4rem; }
  .lc-nav .dots i::after { content: ""; position: absolute; inset: -0.75rem -0.3rem; }
  .step { padding: 0.45rem 0.75rem; }
}
/* FR-DSC-UI18: таблица шире экрана — справа тень «дальше есть ещё» */
#cm-table { position: relative; }
#cm-table.more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.2rem; pointer-events: none;
  border-radius: 0 1rem 1rem 0; background: linear-gradient(to right, rgba(var(--fade),0), rgba(var(--fade),0.85)); }
@media (max-width: 640px) {
  .cmp th.feat, .cmp td.feat { min-width: 8.5rem; max-width: 9.5rem; }
  .cmp .prod-h { min-width: 8rem; }
}

/* ===== NFR-DSC-FE7: доступность — фокус, контуры, клавиатура, зум ===== */
.sel, .info-btn, .help { border-color: var(--line-strong); }
.fld:focus-within { border-color: var(--purple); }
:focus-visible { outline: 2px solid var(--purple-l); outline-offset: 2px; }
.step[tabindex]:focus-visible, .opt:focus-visible, .pcard[tabindex]:focus-visible { outline: 2px solid var(--purple-l); outline-offset: 2px; }
.lc-nav .dots i:focus-visible { outline: 2px solid var(--purple-l); outline-offset: 3px; }
/* сфокусированный элемент не прячется под липкой шапкой и нижней кнопкой */
html { scroll-padding-bottom: calc(var(--bar) + 1rem); }
@media (min-width: 641px) { html:has(body:not(.stage-idle)) { scroll-padding-top: 15rem; } }
/* iOS увеличивает страницу при фокусе в поле мельче 16px — на таче поля 16px */
@media (hover: none) { .composer-input, .fld input, .fld select { font-size: 16px; } }
.hint.warn { color: var(--orange-l); }
/* FR-DSC-UI14: «Вернуться к исследованию» на старте */
.resume-run { margin: 0; font-size: 12.5px; color: var(--dim); text-align: center; }
.resume-run .btn-link { font-size: 12.5px; }
/* FR-DSC-UI19: звенья цепочки гипотезы — кнопки-чипы */
/* FR-DSC-UI31: тег-кнопка того же кегля, что чип (font: inherit давал 16px от body) */
button.chip { font-family: inherit; font-size: 11px; line-height: 1.3; background: transparent; cursor: pointer; text-align: left; }
.chip.link:hover, .chip.link:focus-visible { border-color: var(--purple); color: var(--heading); }

/* FR-DSC-UI18: низкий экран (альбомный телефон, планшет) — шапка не липнет,
   иначе вместе с нижней кнопкой она закрывала до 80% высоты */
@media (max-height: 640px) {
  body:not(.stage-idle) .compose-zone { position: relative; }
  body:not(.stage-idle) header { position: absolute; }
}
/* FR-DSC-UI18: большая таблица листается внутри себя и по вертикали — шапка с
   продуктами остаётся видна, горизонтальная прокрутка не уезжает на 2000px вниз */
.cmp-wrap { max-height: calc(100vh - 17rem); max-height: calc(100dvh - 17rem); overflow-y: auto; }
@media (max-width: 640px), (max-height: 640px) { .cmp-wrap { max-height: 75vh; max-height: 75dvh; } }
/* FR-DSC-UI13: широкий экран — колонка шире, плиток 4 в ряд, широких — 3 */
@media (min-width: 1800px) { :root { --col: 88rem; } }
/* FR-DSC-UI1c: запись — таймер и состояние словами */
.composer-status.rec { color: var(--orange-l); }
/* FR-DSC-RUN9: ошибка действия — у самой кнопки; шаг стадии в ошибке — красный */
.hint.err { color: var(--red); }
.step.err { border-color: var(--red); color: var(--red); }
/* FR-DSC-UI12: живой «ход работы» не выталкивает результаты за экран */
.trace-grid { max-height: 42vh; overflow-y: auto; }
/* FR-DSC-ERR6: «исследования недоступны» — спокойная подсказка, а не красная ошибка */
.composer-status.info { color: var(--dim); }
.composer-status .btn-link { font-size: inherit; }
/* FR-DSC-UI22: шкала оценки рядом с числом («47/50», «256/625») */
.of { font-weight: 500; opacity: 0.7; font-size: 0.92em; }
.prio-signal .of, .score-pill .of { margin-left: 0.05rem; }
/* NFR-DSC-AI3: синтетичность — словом; в модалке респондента — первой строкой */
.chip.syn { font-weight: 700; letter-spacing: 0.02em; }
.syn-note { margin: 0; font-size: 12.5px; color: var(--orange-l); display: flex; gap: 0.5rem; align-items: baseline; }
.syn-note i { font-size: 11px; }
/* FR-DSC-UI21: живой ход работы — строка счётчиков и три последних события */
.trace.live { padding: 0.7rem 1rem; gap: 0.45rem; }
.trace.live .trace-head { flex-wrap: wrap; row-gap: 0.25rem; }
.tr-count { font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: var(--heading); font-size: 11.5px; }
.trace-tick { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.trace-tick .tr-line { animation: cardIn 0.25s ease both; }
/* FR-DSC-UI20: финал — главная кнопка «Скопировать результат», рядом скачать / PDF / поделиться */
.stage-bar-in.final { max-width: 60rem; flex-wrap: nowrap; }
.stage-bar .bar-more { display: inline-flex; gap: 0.45rem; flex-shrink: 0; }
.stage-bar .bar-more .btn-ghost { background: rgb(var(--fade)); }
@media (max-width: 900px) {
  /* узко — значки без подписей, всё в одну строку с главной кнопкой */
  .stage-bar .bar-more .lbl { display: none; }
  .stage-bar .bar-more .btn-ghost { width: 3.1rem; height: 3.1rem; padding: 0; justify-content: center; font-size: 14px; }
}
@media (max-width: 640px) {
  .stage-bar-in.final { flex-direction: row; }
  .stage-bar-in.final .hint { display: none; }          /* итог уже в строке над стадией */
  .stage-bar-in.final .btn-white.big { width: auto; flex: 1 1 auto; min-width: 0; padding-left: 1rem; padding-right: 1rem; letter-spacing: 0.1em; }
}
.lbl-short { display: none; }
@media (max-width: 380px) { .lbl-long { display: none; } .lbl-short { display: inline; } }
/* FR-DSC-UI20: печать / PDF — только отчёт, светлый лист, канвасы целиком */
.print-report { display: none; }
@media print {
  html.print-on, html.print-on body { background: #fff !important; color: #111 !important; min-height: 0; }
  html.print-on body > *:not(#print-report) { display: none !important; }
  @page { margin: 14mm 12mm; }
  html.print-on #print-report { display: block; color: #111; font-size: 10.5pt; line-height: 1.5; padding: 0 4pt; }
  #print-report h1 { font-size: 17pt; margin: 0 0 4pt; color: #111; }
  #print-report h2 { font-size: 13pt; margin: 16pt 0 6pt; padding-bottom: 3pt; border-bottom: 1px solid #bbb; color: #111; page-break-after: avoid; }
  #print-report h3 { font-size: 11pt; margin: 10pt 0 4pt; color: #111; page-break-after: avoid; }
  #print-report .pr-idea { margin: 0 0 4pt; font-weight: 700; }
  #print-report .pr-meta, #print-report .pr-dim { color: #555; }
  #print-report .pr-syn { border-left: 3px solid #F97316; padding: 2pt 0 2pt 8pt; margin: 8pt 0; color: #333; }
  #print-report ol, #print-report ul { padding-left: 20pt; margin: 4pt 0; }
  #print-report li { margin: 3pt 0; page-break-inside: avoid; }
  #print-report .pr-lc { border: 1px solid #bbb; border-radius: 6pt; padding: 6pt 9pt; margin: 8pt 0; page-break-inside: avoid; }
  #print-report .pr-lc dl { display: grid; grid-template-columns: 34% 1fr; gap: 2pt 8pt; margin: 0; }
  #print-report .pr-lc dt { color: #555; font-weight: 700; }
  #print-report .pr-lc dd { margin: 0; }
}
/* FR-DSC-UI23: «Мои исследования» — где нужно действие, какой открыт */
.run-card { cursor: pointer; }
.run-card.on { border-color: var(--purple); }
.chip.status-wait { color: var(--orange-l); border-color: rgba(249,115,22,0.45); }
/* FR-DSC-UI25: тост над нижней кнопкой — коротко и со ссылкой */
.toast { position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(var(--bar) + 0.8rem + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: min(36rem, calc(100vw - 2rem));
  display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.75rem 0.65rem 1rem; border-radius: 0.9rem;
  background: var(--surface); border: 1px solid var(--border); color: var(--body2); font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35); animation: cardIn 0.25s ease; }
.toast .btn-link { font-size: inherit; }
.toast .x { border: 0; background: transparent; color: var(--dim); cursor: pointer; padding: 0.2rem 0.3rem; flex-shrink: 0; }
.toast .x:hover { color: var(--heading); }
/* FR-DSC-UI27: цитата → её ответ в стенограмме; вопрос — над цитатой */
.qa-pair { display: flex; flex-direction: column; gap: 0.55rem; border-radius: 0.6rem; padding: 0.15rem 0.3rem; margin: 0 -0.3rem; transition: background 0.3s ease; }
.qa-pair.hl { background: rgba(136,84,243,0.14); box-shadow: inset 3px 0 0 var(--purple); }
.quote .q-ref { display: block; font-style: normal; color: var(--dim); font-size: 11.5px; margin-bottom: 0.2rem; }
.modal-back { margin-right: 0.1rem; }
.btn-white.sm.chosen { background: transparent; color: var(--green); border-color: rgba(74,222,128,0.5); }
/* FR-DSC-UI28: теги по-русски (английское имя — мелко), «все теги сразу», пустая выдача с выходом */
.tag-dd .opt .nm { display: flex; flex-direction: column; min-width: 0; }
.tag-dd .opt .en { font-size: 11px; color: var(--dim); }
.and-note { font-size: 11.5px; color: var(--dim); align-self: center; }
.empty-acts { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin: 0.8rem 0 0; }
.fld.date .dl { font-size: 11.5px; color: var(--dim); margin: 0 0.15rem 0 0.35rem; }
@media (max-width: 640px) {
  .filters .fld.date { flex-wrap: wrap; border-radius: 1rem; row-gap: 0.3rem; }
  .filters #date-range { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 0.3rem; width: 100%; }
  .filters #date-range[hidden] { display: none; }
  .filters #date-range input { width: 100%; }
}
/* ===== FR-DSC-UI29 / NFR-DSC-FE8: телефон, клавиатура, контраст ===== */
/* поля и сегменты ленты — контур ≥ 3:1 к фону */
.fld, .seg { border-color: var(--line-strong); }
/* FR-DSC-UI29: длинная идея на телефоне — текст на всю ширину, кнопки рядом ниже */
@media (max-width: 640px) {
  .composer.multi { flex-wrap: wrap; border-radius: 1.3rem; row-gap: 0.2rem; }
  .composer.multi .composer-input { order: -1; flex: 1 1 100%; padding: 0.5rem 0.7rem 0.15rem; }
  .composer.multi .composer-search { margin-right: auto; }
}
/* текст длиннее окна — края прокрутки растворяются, видно, что есть ещё */
.composer-input.scrolls { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.7rem, #000 calc(100% - 0.7rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.7rem, #000 calc(100% - 0.7rem), transparent 100%); }
/* FR-DSC-UI29: под длинным канвасом на телефоне — те же «← N / M →» */
.lc-nav.bottom { display: none; }
@media (max-width: 640px) { .lc-nav.bottom { display: flex; justify-content: center; gap: 1.2rem; margin-top: 0.2rem; } }
/* FR-DSC-UI29: на узком телефоне кнопки выбора — значками (подпись — в aria-label) */
/* FR-DSC-UI32: до 400px — короткие подписи («Все», «Снять»), до 340px — только значки */
.sel-tools .l-short { display: none; }
@media (max-width: 400px) { .sel-tools .l-long { display: none; } .sel-tools .l-short { display: inline; } .sel-tools .btn-ghost.sm { padding: 0.45rem 0.75rem; } }
@media (max-width: 340px) { .sel-tools .btn-ghost.sm .lbl { display: none; } .sel-tools .btn-ghost.sm { padding: 0.45rem 0.7rem; } }
/* FR-DSC-UI29: боли — «кирпичная кладка» без дыр между плитками разной высоты */
@media (min-width: 641px) {
  .cards.masonry { display: block; column-width: 27rem; column-gap: 0.8rem; }
  .cards.masonry > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 0.8rem; width: 100%; }
}
/* NFR-DSC-FE8: фокус в таблице сравнения не прячется под залипающими ячейками */
.cmp-wrap { scroll-padding-left: 15.5rem; scroll-padding-top: 7rem; }
@media (max-width: 1023px) { .cmp-wrap { scroll-padding-left: 11.5rem; } }
@media (max-width: 640px) { .cmp-wrap { scroll-padding-left: 9rem; } }
/* NFR-DSC-FE8: «К действию» — первая остановка Tab, видна только в фокусе */
.skip-link { position: fixed; left: 1rem; top: 0.6rem; z-index: 99; transform: translateY(-200%);
  background: var(--btn-bg); color: var(--btn-fg); border: 0; border-radius: 999px; padding: 0.6rem 1.1rem;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease; }
.skip-link:focus, .skip-link:focus-visible { transform: none; }
.stage-title:focus { outline: none; }
.stage-title:focus-visible { outline: 2px solid var(--purple-l); outline-offset: 4px; border-radius: 0.3rem; }
/* текст только для скринридера (синтетичность, смысл значков) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* NFR-DSC-FE8: на тач-экране цели пальца ≥ 40px */
@media (hover: none) {
  .seg button { min-height: 2.5rem; }
  .fld select, .fld input[type="date"] { min-height: 2.4rem; }
  .btn-ghost.sm { min-height: 2.5rem; }
  .step { min-height: 2.5rem; }
  .help::after { inset: -0.5rem; }
  .lc-nav .dots { gap: 1.1rem; }
  .lc-nav .dots i::after { inset: -1rem -0.55rem; }
}
/* FR-DSC-UI29: итог стадии на узком экране — значок и текст в одной строке, «?» и «ход работы» ниже */
.trace-sum > span { flex: 1 1 12rem; min-width: 0; }
/* 320px: «Новая идея…» помещается в одну строку — композер не растёт вдвое */
@media (max-width: 340px) { .composer { gap: 0.3rem; } }
/* ===== FR-DSC-UI30: сравнение гипотез — вид, сегмент, шорт-лист ★, таблица ===== */
.hyp-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.hyp-tools .fld { min-height: 2.3rem; padding: 0.2rem 0.8rem; max-width: 16rem; }
.hyp-tools .fld select { max-width: 12.5rem; text-overflow: ellipsis; }
.hyp-tools .seg button { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (max-width: 640px) { .hyp-tools { margin-left: 0; width: 100%; } .hyp-tools .seg { margin-left: auto; } .hyp-tools .seg .lbl, .hyp-tools .star-filter .lbl { display: none; } }
.btn-ghost.on { color: var(--orange-l); border-color: rgba(249,115,22,0.55); }
.star-btn { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; padding: 0; flex-shrink: 0; transition: all 0.2s ease; }
.star-btn.on { color: var(--orange-l); border-color: var(--orange); background: rgba(249,115,22,0.12); }
@media (hover: hover) { .star-btn:hover { color: var(--orange-l); border-color: var(--orange); } }
@media (hover: none) { .star-btn { position: relative; } .star-btn::after { content: ""; position: absolute; inset: -0.4rem; } }
.hyp-card.short { border-color: rgba(249,115,22,0.5); }
.htab-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 1.1rem; background: var(--surface);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; scroll-padding-left: 6rem; }
.htab { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.htab th, .htab td { padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--border); text-align: right; vertical-align: top; white-space: nowrap; color: var(--body2); }
.htab th { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; vertical-align: bottom; }
.htab tr:last-child td { border-bottom: 0; }
.htab .c-st, .htab .c-seg { text-align: left; white-space: normal; }
.htab .c-st { min-width: 16rem; }
.htab .c-seg { min-width: 9rem; max-width: 14rem; }
.htab .c-star, .htab .c-rank { text-align: center; width: 1%; }
.htab .rank { width: 1.8rem; height: 1.8rem; font-size: 12px; }
.htab .st-link { display: block; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--heading); font-weight: 700; font-size: 13px; line-height: 1.45; }
@media (hover: hover) { .htab .st-link:hover { color: var(--purple-l); text-decoration: underline; } }
.htab .metric { font-size: 11.5px; color: var(--dim); margin-top: 0.25rem; line-height: 1.45; }
.htab .rice-n { font-weight: 800; font-size: 15px; color: var(--orange-l); }
.htab tr.short td { background: rgba(249,115,22,0.05); }
.th-sort { background: none; border: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
  padding: 0.2rem 0; display: inline-flex; gap: 0.3rem; align-items: center; }
.th-sort.on { color: var(--heading); }
/* телефон: формулировка — 4 строки, метрика — в карточках; цифры видны без прокрутки вбок */
@media (max-width: 640px) {
  .htab th, .htab td { padding: 0.55rem 0.45rem; }
  .htab .c-st { min-width: 10.5rem; }
  .htab .metric { display: none; }
  .htab .st-link { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
  .htab .of { display: none; }
  .htab .star-btn { width: 1.7rem; height: 1.7rem; }
}
/* FR-DSC-UI31: две кнопки внизу (стоп с готовым, ошибка) — одной строкой на десктопе */
.stage-bar-in.wide { max-width: 60rem; }
@media (min-width: 901px) { .stage-bar-in.wide { flex-wrap: nowrap; } }
/* ссылка «к ответу в стенограмме» в цитате — прямым, как все ссылки */
.quote .btn-link { font-style: normal; }
/* ===== FR-DSC-UI32: по повторному обходу ===== */
/* таблица сравнения помещается между липкой зоной и нижней кнопкой вместе с шапкой продуктов */
@media (min-width: 641px) and (min-height: 641px) {
  .cmp-wrap { max-height: max(16rem, calc(100vh - var(--zone, 15rem) - var(--bar) - 2.2rem));
    max-height: max(16rem, calc(100dvh - var(--zone, 15rem) - var(--bar) - 2.2rem)); }
}
/* лента поверх исследования — путь назад */
.browse-back { margin: 0 0 0.2rem; font-size: 12.5px; }
.browse-back .btn-link { font-size: 12.5px; display: inline-flex; gap: 0.45rem; align-items: center; text-align: left; }
/* старт: вход в ленту словами */
.idle-feed { margin: 0; font-size: 12.5px; color: var(--dim); text-align: center; }
.idle-feed .btn-link { font-size: inherit; }
/* микрофон без настроенного голоса — на месте, но приглушён */
.composer-mic.off { opacity: 0.45; }
/* светлая тема: шкалы «/625», «/50» — без бледности */
html.light-cab .of { opacity: 1; }
/* канвас: ссылка к списку гипотез */
.hyp-jump { font-size: 12px; white-space: nowrap; }
/* таблица гипотез шире экрана — тень справа, как у сравнения */
#hy-table { position: relative; }
#hy-table.more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.2rem; pointer-events: none;
  border-radius: 0 1rem 1rem 0; background: linear-gradient(to right, rgba(var(--fade),0), rgba(var(--fade),0.85)); }
/* подсказка не упирается в край узкого экрана */
.hover-tip { max-width: min(22rem, calc(100vw - 1.25rem)); }
/* карта болей на телефоне: формулировка — своей строкой во всю ширину */
@media (max-width: 640px) {
  .pain-card > .tile-top { flex-wrap: wrap; row-gap: 0.5rem; }
  .pain-card > .tile-top > .pain-stmt { order: 3; flex-basis: 100%; }
  .pain-card > .tile-top > .score-pill { margin-left: auto; }
}

/* ── FR-DSC-SEG4 / FR-DSC-HYP2 / FR-DSC-IDEA*: «не купят», критерий закрытия, стадия «Идеи» ── */
.pcard-ico.grad-skeptic { background: linear-gradient(135deg, #64748b, #334155); color: #fff; border: 0; }
.pcard-ico.grad-real { background: linear-gradient(135deg, #10b981, #0ea5e9); color: #fff; border: 0; }
.chip.skeptic { border-color: rgba(148,163,184,0.5); color: var(--dim); font-weight: 700; }
.chip.real { border-color: rgba(16,185,129,0.45); color: #10b981; font-size: 11px; }
.chip.real a { color: inherit; text-decoration: none; }
.chip.real a:hover { text-decoration: underline; }
.hyp-kill { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.hyp-kill i { color: var(--red); margin-right: 0.25rem; }
.idea-line { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.idea-line b { color: var(--text); font-weight: 600; }
.pcard h5 { margin: 0; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.risk { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.4rem 0; border-top: 1px solid var(--border); }
.risk:first-of-type { border-top: 0; }
.risk-reason { margin: 0; font-size: 13.5px; line-height: 1.45; }
.risk-reason .lk { color: var(--orange-l); letter-spacing: 0.05em; font-size: 11px; }
.pcard.voice .quote { margin: 0; font-size: 13px; line-height: 1.5; font-style: italic; color: var(--dim); overflow-wrap: anywhere; }
.comp-line { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-line i { color: var(--purple-l); margin-right: 0.2rem; }

/* ── FR-DSC-AUTH1: вход через Google — экран входа и кнопка учётки ── */
.login-gate { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: var(--bg); }
.login-gate[hidden] { display: none; }
.login-card { width: min(100%, 26rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.login-card .hero-title { margin: 0; }
.login-card p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.login-card .login-msg { color: var(--red); }
.login-card .login-msg:empty { display: none; }
.btn-google { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: #111; font: inherit; font-weight: 700;
  cursor: pointer; }
.btn-google:hover { filter: brightness(0.95); }
.btn-google:focus-visible { outline: 2px solid #8854F3; outline-offset: 3px; }
.btn-google i { font-size: 1.05rem; }
body.gated .app, body.gated .stage-bar, body.gated #runs-btn { display: none !important; }
.acct-btn { font-weight: 700; font-size: 13px; text-transform: uppercase; }