/* =====================================================================
   theme.css — порт дизайн-спины brief/style.html (Б6) 1:1.
   Токены/компоненты/экраны взяты из канона; добавлены состояния «лендинг» и
   «думаю» строго из существующих токенов (см. docs/UI-DECISIONS.md UD-007).
   Стилизация из trello → светлая тема. Без эмодзи. Иконки — Lucide (инлайн-SVG).
   ===================================================================== */

:root{
  --accent:rgb(42,138,246); --accent-strong:rgb(26,116,224); --accent-soft:rgba(42,138,246,.12);
  --accent-secondary:rgb(168,83,186);
  --pink:rgb(233,42,103);
  --amber:rgb(240,165,24);
  --success:rgb(20,160,114); --success-soft:rgba(20,160,114,.13);

  --page-bg:#eaeefb;
  --surface:#ffffff; --surface-2:#f5f8fe; --surface-sunken:#eef2fb;
  --glass:rgba(255,255,255,.72);
  --ink:#0f172a; --ink-2:#334155; --ink-muted:#64748b; --ink-faint:#94a3b8;
  --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.14); --line-accent:rgba(42,138,246,.38);

  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem;
  --fs-3xl:clamp(2rem,3.4vw,2.75rem); --fs-4xl:clamp(2.6rem,4.4vw,3.8rem);
  --lh-tight:1.0; --lh-snug:1.25; --lh-base:1.6;
  --track-eyebrow:.2em; --track-tight:-.01em;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Вертикальный ритм лендинга (адаптивный): между секциями — просторно, группа заголовка →
     контент — заметный отступ; на узком экране ужимается до нижней границы. */
  --space-section: clamp(4rem, 8vw, 7rem);   /* 64 → 112px: между разными секциями */
  --space-group: clamp(2.5rem, 5vw, 4rem);   /* 40 → 64px: группа заголовка → контент */

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:28px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.05);
  --sh-2:0 12px 28px rgba(15,23,42,.10);
  --sh-lg:0 30px 60px rgba(15,23,42,.16);
  --focus-ring:0 0 0 3px rgba(42,138,246,.22);
  --glow-accent:0 14px 34px rgba(42,138,246,.22);

  --ease:cubic-bezier(.4,0,.2,1); --dur-1:.18s; --dur-2:.3s; --dur-3:.5s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink); line-height:var(--lh-base);
  background:
    radial-gradient(circle at top left, rgba(42,138,246,.10), transparent 34%),
    radial-gradient(circle at bottom right, rgba(168,83,186,.10), transparent 30%),
    var(--page-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0; letter-spacing:var(--track-tight); line-height:var(--lh-tight)}
p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--s5)}
.eyebrow{margin:0; color:var(--ink-faint); font-size:var(--fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-eyebrow)}
.ic{width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ic-lg{width:1.25em; height:1.25em}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}

/* ---------- КОМПОНЕНТЫ ---------- */
.btn{font:inherit; font-weight:600; font-size:var(--fs-base); border:1px solid transparent; cursor:pointer;
  min-height:48px; padding:0 var(--s5); border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:var(--s2);
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
  background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent-strong); box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--accent-strong); box-shadow:var(--glow-accent)}
.btn-primary:disabled{background:#cbd5e1; border-color:#cbd5e1; color:#fff; box-shadow:none; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--ink-muted); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.btn-soft{background:var(--surface); color:var(--accent-strong); border-color:var(--line-accent)}
.btn-soft:hover{background:var(--accent-soft)}

.input{font:inherit; width:100%; min-height:50px; padding:var(--s3) var(--s4); color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md);
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); resize:vertical}
.input::placeholder{color:var(--ink-faint)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus-ring)}

.chip{display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 12px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em;
  background:var(--accent-soft); color:var(--accent-strong); border:1px solid var(--line-accent)}
.chip-ok{background:var(--success-soft); color:var(--success); border-color:rgba(20,160,114,.3)}
.chip-amber{background:rgba(240,165,24,.14); color:#b9791a; border-color:rgba(240,165,24,.34)}
/* Fix 2: плашка нефатального уведомления (деградация/лимит) — не блокирует поток */
.notice-banner{margin-bottom:var(--s4); padding:var(--s3) var(--s4); border-radius:var(--r-2);
  background:rgba(240,165,24,.12); color:#b9791a; border:1px solid rgba(240,165,24,.34);
  font-size:var(--fs-sm,14px); animation:rise var(--dur-2) var(--ease)}
/* vB7: чипы видов этапов ленты схождения */
.chip-check{background:rgba(124,108,196,.12); color:#6b5bb0; border-color:rgba(124,108,196,.32)}
.chip-merge{background:rgba(42,138,246,.12); color:var(--accent-strong); border-color:var(--line-accent)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-1)}

.option{display:flex; gap:var(--s4); align-items:flex-start; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:var(--s4) var(--s5); cursor:pointer; font:inherit; position:relative; overflow:hidden;
  transition:border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease),
  box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease)}
.option::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; opacity:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-secondary)); transition:opacity var(--dur-2) var(--ease)}
.option:hover{transform:translateY(-2px); border-color:var(--line-accent); box-shadow:var(--sh-2)}
.option:hover::before{opacity:1}
.option:active{transform:translateY(0)}
.option .radio{flex:0 0 22px; width:22px; height:22px; border-radius:var(--r-pill);
  border:2px solid var(--line-2); margin-top:2px; position:relative; transition:border-color var(--dur-2) var(--ease)}
.option .otxt b{display:block; font-size:var(--fs-lg); font-weight:600; color:var(--ink)}
.option .otxt span{display:block; margin-top:3px; font-size:var(--fs-sm); color:var(--ink-muted); font-weight:400}
.option.is-selected{border-color:var(--accent); background:rgba(42,138,246,.06); box-shadow:var(--focus-ring)}
.option.is-selected::before{opacity:1}
.option.is-selected .radio{border-color:var(--accent)}
.option.is-selected .radio::after{content:""; position:absolute; inset:4px; border-radius:var(--r-pill);
  background:var(--accent); animation:pop var(--dur-2) var(--ease)}
.option .rec{margin-left:auto; align-self:center}

/* vB1: СВЕРКА фазы — список понятого + «Верно, дальше» (П8) */
.recap-list{list-style:none; margin:var(--s4) 0 var(--s5); padding:0; display:flex;
  flex-direction:column; gap:var(--s3)}
.recap-item{position:relative; padding:var(--s3) var(--s4) var(--s3) calc(var(--s5) + var(--s2));
  background:rgba(42,138,246,.05); border:1px solid var(--line); border-radius:var(--r-2);
  font-size:var(--fs-lg); color:var(--ink); animation:rise var(--dur-2) var(--ease)}
.recap-item::before{content:""; position:absolute; left:var(--s4); top:50%; width:9px; height:9px;
  margin-top:-4px; border-radius:var(--r-pill); background:var(--accent)}
.option.recap-ok{border-color:var(--line-accent); background:rgba(42,138,246,.06)}
.option.recap-ok .radio{border-color:var(--accent)}
.recap-q{display:block; font-weight:600; color:var(--ink); margin-bottom:var(--s3)}

/* vB2: грундинг — реальные похожие проекты + отстройка (П9) */
.similar-list{list-style:none; margin:var(--s4) 0; padding:0; display:flex;
  flex-direction:column; gap:var(--s3)}
.similar-item{padding:var(--s3) var(--s4); background:var(--surf); border:1px solid var(--line);
  border-radius:var(--r-2); display:flex; flex-direction:column; gap:2px;
  animation:rise var(--dur-2) var(--ease)}
.similar-name{display:inline-flex; align-items:center; gap:6px; color:var(--accent);
  text-decoration:none; font-size:var(--fs-lg)}
.similar-name:hover{text-decoration:underline}
.similar-what{font-size:var(--fs-sm); color:var(--ink-muted)}
.diff-block{max-width:720px; margin:var(--s5) auto 0; padding:var(--s4) var(--s5);
  background:rgba(168,83,186,.05); border:1px solid var(--line); border-radius:var(--r-3)}
.diff-block .eyebrow{display:flex; align-items:center; gap:6px; color:var(--accent-2, #a853ba)}
.diff-edges{margin:var(--s3) 0 0; padding-left:1.2em}
.diff-edges li{margin:.3em 0; font-size:var(--fs-lg); color:var(--ink)}
.diff-similar{margin-top:var(--s3)}
.diff-similar summary{cursor:pointer; font-size:var(--fs-sm); color:var(--ink-muted)}
/* vB3: форма — выбор референса и блок «как это выглядит» (П10) */
.ref-item{position:relative}
.ref-pick{margin-top:var(--s2); align-self:flex-start; padding:6px 12px; font-size:var(--fs-sm)}
/* backlog #3: оценка похожести (0–100) + быстрые кнопки + комментарий на каждый референс */
.ref-controls{display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3);
  padding-top:var(--s3); border-top:1px solid var(--line)}
.ref-score-row{display:flex; align-items:center; gap:var(--s3)}
.ref-score-cap{font-size:var(--fs-sm); color:var(--ink-muted); white-space:nowrap}
.ref-range{flex:1; min-width:0; height:6px; -webkit-appearance:none; appearance:none;
  background:var(--line-2); border-radius:var(--r-pill); outline:none; cursor:pointer}
.ref-range:focus{box-shadow:var(--focus-ring)}
.ref-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px;
  border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:var(--sh-2); cursor:pointer}
.ref-range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--accent);
  border:2px solid #fff; box-shadow:var(--sh-2); cursor:pointer}
.ref-score-val{min-width:2.5em; text-align:right; font-weight:600; color:var(--accent-strong);
  font-variant-numeric:tabular-nums}
.ref-quick{display:flex; gap:var(--s2); flex-wrap:wrap}
.ref-quick-btn{padding:4px 10px; font-size:var(--fs-sm); min-height:32px}
.ref-comment{min-height:38px}
.more-box{margin-top:var(--s3); display:flex; flex-direction:column; gap:var(--s2)}
.more-fix{margin-top:var(--s2)}
.form-block{background:rgba(42,138,246,.05)}
.form-character{margin:var(--s3) 0 0; font-size:var(--fs-lg); color:var(--ink); font-weight:600}
/* vB4: техника понятным выбором — карточки вариантов с «за/против» (разворот П7) */
.tech-options{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s4); margin:var(--s4) 0}
.tech-card{padding:var(--s4); background:var(--surf); border:1px solid var(--line); border-radius:var(--r-3); display:flex; flex-direction:column; animation:rise var(--dur-2) var(--ease)}
.tech-label{font-size:var(--fs-lg); margin-bottom:var(--s3); display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.tech-badge{font-size:var(--fs-xs,12px); font-weight:600; line-height:1; padding:4px 8px; border-radius:999px; color:#fff; background:var(--brand,#2a8af6); white-space:nowrap}
.tech-why{font-size:var(--fs-sm); color:var(--ink); margin:0 0 var(--s3); line-height:1.5}
.tech-pros{list-style:none; margin:0 0 var(--s2); padding:0; display:flex; flex-direction:column; gap:4px}
.tech-pros li{display:flex; align-items:flex-start; gap:6px; font-size:var(--fs-sm); color:var(--ink)}
.tech-pros li .ic{color:var(--ok,#2f9e6e); flex:0 0 auto; margin-top:2px}
.tech-cons{list-style:none; margin:0 0 var(--s3); padding:0; display:flex; flex-direction:column; gap:4px}
.tech-cons li{font-size:var(--fs-sm); color:var(--ink-muted)}
.tech-pick{margin-top:auto; align-self:flex-start}
.tech-block{background:rgba(47,158,110,.06)}
.tech-choice{margin:var(--s3) 0 0; font-size:var(--fs-lg); color:var(--ink); font-weight:600}
/* Б2.2а-уточнение (#1.5): уточнение конкретного цвета — плашки оттенков + нативный колорпикер */
.color-options{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s3); margin:var(--s4) 0}
.color-swatch{display:flex; align-items:center; gap:var(--s3); text-align:left; padding:var(--s3); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); animation:rise var(--dur-2) var(--ease)}
.color-swatch:hover{border-color:var(--line-accent); box-shadow:var(--focus-ring)}
.swatch-dot{flex:0 0 auto; width:36px; height:36px; border-radius:var(--r-pill); border:1px solid var(--line-2); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.swatch-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.swatch-name{font-size:var(--fs-md); color:var(--ink)}
.swatch-hex{font-size:var(--fs-xs,12px); color:var(--ink-muted); font-variant-numeric:tabular-nums; text-transform:uppercase}
.swatch-why{font-size:var(--fs-sm); color:var(--ink-muted); line-height:1.4}
.color-pick{margin-top:var(--s2)}
/* backlog #5: собственный колорпикер (SV-квадрат + ползунок тона + hex) вместо нативного
   <input type="color"> — единый вид во всех браузерах/ОС, паттерн Figma/Photoshop/Sketch. */
.color-picker{margin-top:var(--s2); max-width:280px; display:flex; flex-direction:column; gap:var(--s3)}
/* SV-квадрат: фон = чистый тон (из style), поверх бел→прозрач (S) и прозрач→чёрн (V). */
.cp-sv{position:relative; width:100%; aspect-ratio:1/1; max-height:200px; border-radius:var(--r-md); border:1px solid var(--line-2); cursor:crosshair; touch-action:none; box-shadow:var(--sh-1)}
.cp-sv::before,.cp-sv::after{content:""; position:absolute; inset:0; border-radius:inherit}
.cp-sv::before{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
.cp-sv::after{background:linear-gradient(to top,#000,rgba(0,0,0,0))}
.cp-sv-thumb{position:absolute; width:18px; height:18px; border-radius:var(--r-pill); border:2px solid #fff; box-shadow:var(--sh-2),0 0 0 1px rgba(15,23,42,.25); transform:translate(-50%,-50%); pointer-events:none; z-index:1}
/* Ползунок тона: радужный градиент по всем тонам. */
.cp-hue{position:relative; width:100%; height:14px; border-radius:var(--r-pill); cursor:pointer; touch-action:none; box-shadow:var(--sh-1) inset, 0 0 0 1px var(--line-2);
  background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}
.cp-hue-thumb{position:absolute; top:50%; width:18px; height:18px; border-radius:var(--r-pill); background:var(--surface); border:2px solid #fff; box-shadow:var(--sh-2),0 0 0 1px rgba(15,23,42,.25); transform:translate(-50%,-50%); pointer-events:none}
.cp-row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.cp-preview{flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--line-2); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.cp-hex{flex:0 1 110px; min-height:40px; min-width:0; width:110px; font-variant-numeric:tabular-nums; text-transform:uppercase; text-align:center}
/* vB6: карта рисков — что проверить первым (Б5) */
.risks-block{background:rgba(224,104,60,.05)}
.risks-list{list-style:none; margin:var(--s3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s3)}
.risk-item{padding:var(--s3) var(--s4); background:var(--surf); border:1px solid var(--line); border-radius:var(--r-2)}
.risk-title{font-size:var(--fs-lg)}
.risk-why{font-size:var(--fs-sm); color:var(--ink-muted); margin:2px 0 6px}
.risk-check{display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--ink)}
.risk-check .ic{color:var(--ok,#2f9e6e); flex:0 0 auto}

@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===================== ШАПКА (v5, добавлено из токенов) ===================== */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s3) var(--s6); background:var(--glass); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.topbar .brand .mark{width:30px; height:30px; flex:0 0 30px}
.topbar .brand .mark .ic{width:17px; height:17px}
.topbar .brand .bname{font-size:.98rem}
.topbar-actions{display:flex; align-items:center; gap:var(--s2)}
.topbar-actions .btn{min-height:38px; padding:0 var(--s4); font-size:var(--fs-sm)}
.topbar-email{font-size:var(--fs-sm); color:var(--ink-muted); margin-right:var(--s2)}

/* ===================== ИСТОРИЯ «МОИ ПЛАНЫ» (v5) ===================== */
.history{max-width:720px; margin:0 auto; padding:var(--s8) var(--s5) var(--s9); animation:rise var(--dur-3) var(--ease)}
.history .eyebrow{margin-bottom:var(--s3)}
.history-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s6); flex-wrap:wrap}
.history-title{font-size:var(--fs-3xl); font-weight:300}
.history-list{display:flex; flex-direction:column; gap:var(--s3)}
.history-list .option{cursor:pointer}
/* v5.1: незаконченные опросы — строка с текстом и кнопкой «Продолжить» */
.drafts-block{margin-bottom:var(--s6)}
.drafts-block .eyebrow{margin-bottom:var(--s3)}
.draft-row{align-items:center; cursor:default}
.draft-row .otxt{flex:1 1 auto}
.draft-row .btn-soft{margin-left:auto; align-self:center; flex:0 0 auto; white-space:nowrap}

/* ===================== ЛЕНДИНГ (добавлено из токенов, UD-007) ===================== */
.landing{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--s8) var(--s5); animation:rise var(--dur-3) var(--ease)}
.landing .eyebrow{margin-bottom:var(--s4)}
.landing h1{font-size:var(--fs-4xl); font-weight:300; max-width:18ch; margin-bottom:var(--s4); letter-spacing:-.02em}
.landing h1 b{font-weight:700;
  background:linear-gradient(92deg,var(--accent),var(--accent-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.landing .lead{font-size:var(--fs-lg); color:var(--ink-muted); max-width:54ch; margin-bottom:var(--s7)}
/* Базовая раскладка зоны ввода: колонка с зазором — общая для лендинга, витрины (try-now)
   и стены регистрации (раньше была только под .landing, поэтому в витрине кнопка липла к полю). */
.idea-box{width:100%; max-width:640px; display:flex; flex-direction:column; gap:var(--s4); align-items:center}
.landing textarea.input{min-height:96px; font-size:var(--fs-lg)}

/* ===================== ЭКРАН ВОПРОСА (канон q-screen) ===================== */
.screen{margin:var(--s5) auto; max-width:1120px; border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-lg); border:1px solid var(--line)}
.q-screen{background:var(--surface-sunken)}
.q-top{display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s6);
  background:var(--surface); border-bottom:1px solid var(--line)}
.brand{display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--ink); text-decoration:none}
.brand .mark{display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:12px;
  color:#fff; border:1px solid rgba(147,197,253,.5);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.6), transparent 36%),
    linear-gradient(135deg, var(--accent), var(--accent-secondary));
  box-shadow:0 8px 20px rgba(42,138,246,.28)}
.brand .mark .ic{width:20px; height:20px}
.brand .bname{font-weight:800; font-size:1.02rem; letter-spacing:0; line-height:1}
.progress{flex:1; height:6px; background:var(--surface-sunken); border-radius:var(--r-pill); overflow:hidden}
.progress > i{display:block; height:100%; width:34%; border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent-secondary)); transition:width var(--dur-3) var(--ease)}
.q-step{font-size:var(--fs-sm); font-weight:600; color:var(--ink-muted); white-space:nowrap}

.q-body{max-width:680px; margin:0 auto; padding:var(--s8) var(--s5) var(--s7); animation:rise var(--dur-3) var(--ease)}
.q-kicker{margin-bottom:var(--s3)}
.q-title{font-size:var(--fs-3xl); font-weight:300; margin:0 0 var(--s2); line-height:var(--lh-snug)}
.q-help{font-size:var(--fs-lg); color:var(--ink-muted); margin-bottom:var(--s6)}
.q-options{display:flex; flex-direction:column; gap:var(--s3)}
.q-aside{margin-top:var(--s4)}
.q-aside details{border:1px dashed var(--line-2); border-radius:var(--r-md); padding:var(--s3) var(--s4);
  background:var(--surface); transition:border-color var(--dur-2) var(--ease)}
.q-aside details[open]{border-color:var(--line-accent)}
.q-aside summary{display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600;
  color:var(--ink-muted); list-style:none}
.q-aside summary::-webkit-details-marker{display:none}
.q-aside textarea{margin-top:var(--s3); min-height:84px}
.q-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-top:var(--s7)}
.q-foot .hint{font-size:var(--fs-sm); color:var(--ink-faint); text-align:center}

/* ===================== СОСТОЯНИЕ «ДУМАЮ» (добавлено из токенов, UD-007) ===================== */
.thinking{min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s5); text-align:center; padding:var(--s8) var(--s5); animation:rise var(--dur-3) var(--ease)}
.spinner{width:46px; height:46px; border-radius:var(--r-pill); border:3px solid var(--accent-soft);
  border-top-color:var(--accent); animation:spin 1s linear infinite}
.thinking .what{font-size:var(--fs-xl); font-weight:600; color:var(--ink-2)}
.thinking .sub{font-size:var(--fs-sm); color:var(--ink-faint)}

/* ===================== ЭКРАН РЕЗУЛЬТАТА (канон r-screen) ===================== */
.r-screen{position:relative; padding:var(--s8) var(--s6) var(--s9); overflow:hidden;
  background:
    radial-gradient(900px 420px at 80% -6%, rgba(42,138,246,.20), transparent 60%),
    radial-gradient(720px 420px at 6% 2%, rgba(168,83,186,.16), transparent 58%),
    linear-gradient(180deg,#ffffff,#eef3fe)}
.r-screen::after{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-secondary),var(--amber))}
.r-head{max-width:760px; margin:0 auto var(--s7); text-align:center; animation:rise var(--dur-3) var(--ease)}
.r-badge{display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 16px; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; color:var(--accent-strong);
  background:var(--surface); border:1px solid var(--line-accent); box-shadow:var(--sh-1)}
.r-badge .ic{color:var(--amber)}
.r-title{font-size:var(--fs-4xl); font-weight:300; margin:var(--s5) 0 var(--s3); letter-spacing:-.02em;
  background:linear-gradient(92deg,var(--ink) 20%, var(--accent) 70%, var(--accent-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.r-sub{font-size:var(--fs-lg); color:var(--ink-muted)}
.r-idea{margin-top:var(--s5); display:inline-block; padding:var(--s3) var(--s5); border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2); font-size:var(--fs-base); box-shadow:var(--sh-1)}

.timeline{max-width:720px; margin:var(--s7) auto 0; position:relative; padding-left:48px}
.timeline::before{content:""; position:absolute; left:17px; top:10px; bottom:34px; width:2px;
  background:linear-gradient(var(--accent),rgba(42,138,246,.18))}
.node{position:relative; margin-bottom:var(--s4); animation:rise var(--dur-3) var(--ease) both}
.node:nth-child(2){animation-delay:.06s} .node:nth-child(3){animation-delay:.12s}
.node:nth-child(4){animation-delay:.18s} .node:nth-child(5){animation-delay:.24s}
.node:nth-child(6){animation-delay:.30s} .node:nth-child(7){animation-delay:.36s}
.node::before{content:""; position:absolute; left:-44px; top:4px; width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--surface); border:2px solid var(--accent); box-shadow:0 0 0 5px rgba(42,138,246,.12)}
/* check — гипотеза ещё не построена: пунктирный сиреневый кружок. */
.node.is-check::before{border-style:dashed; border-color:#7c6cc4; box-shadow:0 0 0 5px rgba(124,108,196,.12)}
/* merge — ступень схождения. */
.node.is-merge::before{border-color:var(--accent-strong); box-shadow:0 0 0 5px rgba(42,138,246,.16)}
.node.is-skeleton::before{background:var(--accent); box-shadow:0 0 0 6px rgba(42,138,246,.22)}
.node-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5);
  box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease)}
.node-card::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; opacity:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-secondary)); transition:opacity var(--dur-2) var(--ease)}
.node-card:hover{transform:translateY(-3px); border-color:var(--line-accent); box-shadow:var(--sh-2)}
.node-card:hover::before{opacity:1}
.node.is-skeleton .node-card{border-color:var(--line-accent); box-shadow:var(--glow-accent)}
.node.is-skeleton .node-card::before{opacity:1}
.node-tag{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s2); flex-wrap:wrap}
.vtag{font-weight:800; font-size:var(--fs-sm); letter-spacing:.06em; color:var(--accent-strong);
  padding:3px 10px; border-radius:var(--r-pill); background:var(--accent-soft); border:1px solid var(--line-accent)}
.node-card h3{font-size:var(--fs-xl); font-weight:600; color:var(--ink); margin-bottom:var(--s2)}
.node-card .node-desc{color:var(--ink-muted); font-size:var(--fs-sm)}
.node-run{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--success);
  margin-top:var(--s3); padding:6px 12px; border-radius:var(--r-pill);
  background:var(--success-soft); border:1px solid rgba(20,160,114,.28)}
.node-run b{color:var(--success); font-weight:700}
/* check: «Проверить …» — намеренно НЕ зелёная «Запускается», вид «ещё проверяем». */
.node-check{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:#6b5bb0;
  margin-top:var(--s3); padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(124,108,196,.1); border:1px solid rgba(124,108,196,.28)}
.node-check b{color:#6b5bb0; font-weight:700}
.r-actions{max-width:720px; margin:var(--s7) auto 0; display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center}

/* vB7: двухколоночный поток — слева опрос/результат, справа живые документы брифа. */
.flow-layout{display:flex; gap:var(--s5); align-items:flex-start; width:100%}
.flow-main{flex:1 1 auto; min-width:0}
.artifacts-panel{flex:0 0 360px; position:sticky; top:var(--s4); max-height:calc(100vh - var(--s7));
  overflow:auto; padding:var(--s4); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.artifacts-panel .eyebrow{margin-bottom:var(--s3)}
.artifacts-list{display:flex; flex-direction:column; gap:var(--s3)}
.artifact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s3) var(--s4); animation:rise var(--dur-2) var(--ease) both}
.artifact-name{font-size:var(--fs-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-strong); margin-bottom:var(--s2)}
.artifact-md{font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base); overflow-wrap:anywhere}
.artifact-md h1,.artifact-md h2,.artifact-md h3{color:var(--ink); font-weight:700; margin:var(--s3) 0 var(--s2); line-height:1.25}
.artifact-md h1{font-size:var(--fs-lg)} .artifact-md h2{font-size:var(--fs-base)} .artifact-md h3{font-size:var(--fs-sm)}
.artifact-md ul,.artifact-md ol{padding-left:1.2em; margin:var(--s2) 0}
.artifact-md li{margin:2px 0}
.artifact-md a{color:var(--accent-strong)}
.artifact-md code{background:var(--surface-sunken); padding:1px 5px; border-radius:6px; font-size:.85em}
.artifact-md pre{background:var(--surface-sunken); padding:var(--s3); border-radius:var(--r-sm); overflow:auto}
.artifact-frame{width:100%; height:420px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff}
@media (max-width:1024px){
  .flow-layout{flex-direction:column}
  .artifacts-panel{position:static; max-height:none; flex-basis:auto; width:100%}
}

.error-box{max-width:560px; margin:var(--s9) auto; text-align:center; display:flex; flex-direction:column; gap:var(--s4); align-items:center}
.error-box .chip-amber{font-size:var(--fs-sm)}
.footnote{padding:var(--s7) 0 var(--s8); color:var(--ink-faint); font-size:var(--fs-sm); text-align:center}

/* ─────────── Маркетинговая витрина (дом анонима) ─────────── */
/* overflow-x:clip — гасит горизонтальный «вылет» (напр. крупная повёрнутая галочка в герое),
   из-за которого на мобильном появлялся боковой скролл и шапка «уезжала». Не ломает sticky
   шапки (она вне .marketing) и не трогает вертикальную ось. */
.marketing{max-width:1080px; margin:0 auto; padding:0 var(--s5); overflow-x:clip}
.marketing section{padding:var(--space-section) 0}
.marketing .hero{position:relative; isolation:isolate; text-align:center; padding-top:clamp(5rem, 11vw, 9rem)}
/* Мягкий градиент-глоу за героем (как bg-gradient у upscayl). */
.marketing .hero::before{content:""; position:absolute; z-index:-1; left:50%; top:0; transform:translateX(-50%);
  width:min(900px,120%); height:520px; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 30%, var(--accent-soft), transparent 70%),
             radial-gradient(40% 40% at 75% 10%, rgba(168,83,186,.12), transparent 70%);
  filter:blur(8px)}
.marketing .hero h1{font-size:var(--fs-4xl); line-height:var(--lh-tight); letter-spacing:var(--track-tight); margin:var(--s3) 0}
.marketing .lead{max-width:640px; margin:0 auto; color:var(--ink-2); font-size:var(--fs-lg); line-height:var(--lh-base)}
.hero-cta{margin-top:var(--s5); display:flex; justify-content:center}

/* Герой «до/после»: слева провальный плоский план, справа — наш план деревом. */
.hero-compare{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:stretch;
  position:relative; max-width:900px; margin:var(--space-group) auto 0; text-align:left}
.compare-panel{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-1); min-height:300px;
  display:flex; flex-direction:column}
.compare-head{font-size:var(--fs-xs); letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  font-weight:700; color:var(--ink-muted); margin:0 0 var(--s4)}
.compare-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); color:var(--ink-muted)}
.compare-steps li{display:flex; align-items:center; gap:var(--s3)}
.compare-steps li::before{content:""; width:9px; height:9px; border-radius:var(--r-pill); background:var(--ink-faint); flex:0 0 auto}
.compare-cap{margin:auto 0 0; padding-top:var(--s4); font-size:var(--fs-sm); color:var(--ink-faint)}
/* Метка «>» в том же углу и того же видимого размера, что штамп «:(» на bad-панели. */
.compare-mark-ok{position:absolute; right:0px; bottom:-24px; font-size:8rem; font-weight:900;
  line-height:1; color:var(--success); transform:rotate(95deg); transform-origin:center;
  pointer-events:none; user-select:none}
/* Десктоп: вырез под шайбу «≠» в смежных границах карточек (радиус выреза = 2× радиуса шайбы). */
.compare-bad{
  -webkit-mask:radial-gradient(circle 44px at calc(100% + 12px) 50%, transparent 44px, #000 44px) no-repeat;
          mask:radial-gradient(circle 44px at calc(100% + 12px) 50%, transparent 44px, #000 44px) no-repeat}
.compare-good{border-color:var(--line-accent);
  box-shadow:0 20px 56px rgba(42,138,246,.38), 0 8px 22px rgba(42,138,246,.24);
  -webkit-mask:radial-gradient(circle 44px at -12px 50%, transparent 44px, #000 44px) no-repeat;
          mask:radial-gradient(circle 44px at -12px 50%, transparent 44px, #000 44px) no-repeat}
.compare-good .compare-head{color:var(--accent-strong)}
.compare-good .pf-tree{margin-top:0; flex:1 1 auto}
.compare-stamp{font-size:2.4rem; right:var(--s4); bottom:var(--s7)}
/* «≠» — центрированный бейдж на жёлобе, вне потока сетки → панели остаются равными. */
.compare-arrow{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px) saturate(135%); backdrop-filter:blur(10px) saturate(135%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 20px rgba(15,23,42,.18),
             inset 0 1px 1px rgba(255,255,255,.9),
             inset 0 -2px 6px rgba(15,23,42,.06);
  font-size:1.4rem; color:var(--ink-2)}

/* Subgrid: заголовки и тела двух карточек ложатся на общие ряды → выровнены при любой длине. */
.problem-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  grid-template-rows:auto auto; grid-auto-flow:column; gap:var(--s5); margin-top:var(--space-group)}
.problem-card{display:grid; grid-template-rows:subgrid; grid-row:span 2; align-content:start; gap:var(--s2);
  position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--sh-1)}
.problem-card h3{margin:0; font-size:var(--fs-xl)}
.problem-card p{color:var(--ink-2); line-height:var(--lh-base); margin:0; max-width:46ch}
/* Штамп «:(» в правом нижнем углу — как печать на документе (это провальные исходы). */
.problem-stamp{position:absolute; right:var(--s5); bottom:var(--s5); transform:rotate(45deg);
  font-size:3.4rem; font-weight:900; line-height:1; color:var(--accent);
  opacity:.16; pointer-events:none; user-select:none}

.solution{text-align:center}
.solution h2{font-size:var(--fs-3xl); margin:var(--s3) 0}
.solution-lead{max-width:720px; margin:0 auto; color:var(--ink-2); font-size:var(--fs-lg); line-height:var(--lh-base)}

.try-now{text-align:center; background:var(--surface-2); border-radius:var(--r-2xl); padding:clamp(3rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem)}
.try-now h2{font-size:var(--fs-2xl); margin:var(--s2) 0 var(--space-group)}
.try-now .idea-box{max-width:640px; margin:0 auto}

/* ─────────── Портфолио идея→план→стиль ─────────── */
.portfolio{text-align:center}
.portfolio-title{font-size:var(--fs-3xl); margin:var(--s3) 0}
.portfolio-lead{max-width:720px; margin:0 auto var(--space-group); color:var(--ink-2); font-size:var(--fs-lg); line-height:var(--lh-base)}
.pf-list{display:flex; flex-direction:column; gap:var(--s6)}
.pf-card{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:stretch; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s6); box-shadow:var(--sh-1)}
.pf-step{font-size:var(--fs-xs); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--accent); margin:var(--s4) 0 var(--s1); font-weight:700}
.pf-step:first-child{margin-top:0}
.pf-idea{font-size:var(--fs-lg); color:var(--ink); margin:0; line-height:var(--lh-snug)}
.pf-title{font-weight:700; margin:0}
/* Превью стиля заполняет высоту карточки (выровнено по более высокой колонке с деревом),
   оставляя стандартный отступ карточки снизу — без уродливого пустого места под iframe. */
.pf-style{display:flex; flex-direction:column}
.pf-frame{width:100%; flex:1 1 auto; min-height:360px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff}

/* Дерево плана: крона проверок → ходячий скелет → ствол версий (фишка алгоритма Б7). */
.pf-tree{margin-top:var(--s3); width:100%}
.pf-tree svg{width:100%; height:auto; overflow:visible; display:block}
.tree-branch{fill:none; stroke:var(--line-2); stroke-width:2}
.tree-spine{stroke:var(--line-2); stroke-width:2}
.tree-trunk{stroke:var(--accent); stroke-width:2.5}
.tree-check{fill:var(--page-bg); stroke:#7c6cc4; stroke-width:2; stroke-dasharray:3 2}
.tree-merge{fill:var(--surface); stroke:var(--accent-strong); stroke-width:2}
.tree-skeleton{fill:var(--accent); stroke:var(--accent-strong); stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(42,138,246,.45))}
.tree-version{fill:var(--accent); stroke:none}
.tree-label{font-size:10.5px; font-family:var(--font); fill:var(--ink-muted)}
.tree-check-label{text-anchor:middle; fill:#6b5bb0; font-weight:600}
.tree-vlabel{text-anchor:start; dominant-baseline:middle}
.tree-skeleton-label{fill:var(--accent-strong); font-weight:700}

/* ─────────── Стена регистрации ─────────── */
.wall-screen{max-width:640px; margin:var(--s8) auto; text-align:center}
.consent{display:flex; gap:var(--s2); align-items:flex-start; text-align:left; font-size:var(--fs-sm); color:var(--ink-2); cursor:pointer}
.consent input{margin-top:3px}

/* ─────────── Футер витрины ─────────── */
.site-footer{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:center; padding:var(--s6) 0; border-top:1px solid var(--line); margin-top:var(--space-section)}
.site-footer .btn{white-space:nowrap}

/* ─────────── Модалка «Написать нам» ─────────── */
.modal-overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:var(--s4)}
.modal{background:var(--surface); border-radius:var(--r-xl); padding:var(--s5); width:100%; max-width:460px; box-shadow:var(--sh-lg)}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s4)}
.modal-head h3{margin:0}
.modal-body{display:flex; flex-direction:column; gap:var(--s3)}

@media (max-width:768px){
  .problem-grid{grid-template-columns:1fr; grid-template-rows:auto; grid-auto-flow:row}
  .problem-card{grid-template-rows:none; grid-row:auto; display:block}
  .problem-card h3{margin-bottom:var(--s2)}
  .pf-card{grid-template-columns:1fr}
  .hero-compare{grid-template-columns:1fr}
  /* Бейдж «≠» возвращается в поток центрированным чипом между сложенными панелями. */
  .compare-arrow{position:static; transform:none; justify-self:center; margin:0 auto}
  .compare-bad, .compare-good{-webkit-mask:none; mask:none}
}
/* Узкий экран: топбар тесный — «Написать нам» делаем компактной иконкой (без подписи),
   имя бренда не переносим. */
@media (max-width:560px){
  .topbar-contact .btn-label{display:none}
  .topbar-actions .topbar-contact{padding:0; width:38px; justify-content:center}
  .topbar .brand .bname{white-space:nowrap}
}