From 9bf3b87f369528b0842137911c7c27fc776c9670 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Sat, 14 Feb 2026 12:38:46 +0700
Subject: [PATCH] Update HR flow UI

---
 app/app.vue             | 1080 ++++++++++++++++++++++-----------------
 app/assets/css/main.css |   92 +++-
 package-lock.json       |   39 ++
 package.json            |    2 +
 4 files changed, 725 insertions(+), 488 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 7aefc8e..feba5bd 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,27 +1,20 @@
 <template>
-  <div data-theme="acid" class="min-h-screen">
+  <div data-theme="acid" class="min-h-screen bg-mesh text-base-content">
     <NuxtRouteAnnouncer />
     <aside
-      class="glass-card fixed left-4 top-4 z-20 flex h-[calc(100vh-2rem)] w-[320px] flex-col rounded-3xl p-5"
+      class="glass-card fixed left-4 top-4 z-20 flex h-[calc(100vh-2rem)] w-[360px] flex-col rounded-3xl p-5"
     >
-          <div class="mb-4 flex items-center justify-between">
-            <div>
-              <h2 class="font-display text-lg font-semibold">Навигатор вакансии</h2>
-            </div>
-          </div>
-
-          <div class="glass-pane mb-4 rounded-2xl p-4">
-            <div class="flex items-center gap-3">
-              <div class="avatar">
-                <div class="w-12 rounded-full bg-gradient-to-br from-fuchsia-400 via-violet-400 to-cyan-400 p-[2px]">
-                  <div class="flex h-full w-full items-center justify-center rounded-full bg-base-100">
-                    <span class="text-lg">🤖</span>
+          <div class="card glass-pane mb-3 rounded-2xl">
+            <div class="card-body py-4">
+              <div class="flex items-center gap-3">
+                <div class="avatar">
+                  <div class="w-12 rounded-full bg-gradient-to-br from-fuchsia-400 via-violet-400 to-cyan-400 p-[2px]">
+                    <div class="flex h-full w-full items-center justify-center rounded-full bg-base-100">
+                      <span class="text-lg">🤖</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div>
-                <p class="text-sm font-semibold">Хантик</p>
-                <p class="text-xs text-slate-400">AI-ассистент вакансии</p>
+                <span class="text-sm font-semibold text-left">Хантик</span>
               </div>
             </div>
           </div>
@@ -34,31 +27,44 @@
               :class="message.from === 'ai' ? 'chat-start' : 'chat-end'"
             >
               <div v-if="message.from === 'ai'" class="chat-image avatar">
-                <div class="w-8 rounded-full bg-slate-800">
-                  <span class="flex h-full items-center justify-center text-xs">AI</span>
+                <div class="w-8 rounded-full bg-gradient-to-br from-fuchsia-400 via-violet-400 to-cyan-400 p-[1px]">
+                  <div class="flex h-full w-full items-center justify-center rounded-full bg-base-100">
+                    <span class="text-xs">🤖</span>
+                  </div>
                 </div>
               </div>
               <div
                 class="chat-bubble text-sm"
                 :class="message.from === 'ai' ? 'glass-pane' : 'bg-sky-500/20'"
-                @click="message.step !== undefined && (currentStep = message.step)"
+                @click="message.step !== undefined && goToStep(message.step)"
               >
                 {{ message.text }}
               </div>
             </div>
           </div>
 
-          <div class="mt-5">
-            <label class="input input-bordered glass-pane flex items-center gap-2 rounded-xl">
-              <span class="text-xs text-slate-400">Вы:</span>
-              <input class="grow text-base" placeholder="Напишите уточнение" />
-              <button class="btn btn-primary btn-lg">Отправить</button>
-            </label>
+        <div class="mt-5">
+          <div class="card glass-pane rounded-2xl">
+            <div class="card-body p-3">
+              <div class="join w-full">
+                <input class="input input-bordered input-lg join-item w-full" placeholder="Напишите сообщение" />
+                <button
+                  class="btn btn-primary btn-lg join-item"
+                  type="button"
+                  aria-label="Отправить"
+                >
+                  <svg viewBox="0 0 24 24" class="h-5 w-5" fill="currentColor" aria-hidden="true">
+                    <path d="M3.4 20.6 22 12 3.4 3.4l1.9 6.4L16 12 5.3 14.2z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
           </div>
+        </div>
         </aside>
 
     <main
-      class="min-h-screen w-full px-4 py-6 md:px-8 lg:pl-[360px]"
+      class="min-h-screen w-full px-4 py-6 md:px-8 lg:pl-[400px]"
     >
       <section class="glass-card flex min-h-[calc(100vh-3rem)] flex-col gap-6 rounded-3xl p-6">
           <div class="flex flex-wrap items-center justify-between gap-4">
@@ -66,128 +72,190 @@
               <h1 class="section-title">{{ steps[currentStep].title }}</h1>
             </div>
           </div>
-
-          <div v-if="currentStep === 0" class="grid gap-4">
-            <div class="glass-pane rounded-2xl p-5">
-              <div class="flex flex-wrap items-center justify-between gap-3">
+          <div class="w-full">
+            <div class="steps steps-horizontal w-full">
+              <button
+                v-for="(step, index) in steps"
+                :key="step.id"
+                class="step cursor-pointer"
+                :class="index <= currentStep ? 'step-primary' : ''"
+                type="button"
+                @click="goToStep(index)"
+              >
+                <span class="sr-only">{{ step.title }}</span>
+              </button>
+            </div>
+          </div>
+          <div v-if="currentStep === 0" class="grid gap-4 lg:grid-cols-[3fr_1fr]">
+            <div class="space-y-6 text-[18px] leading-relaxed text-slate-900">
+                <input class="input input-bordered input-lg w-full text-base text-slate-900" value="Head of Growth" />
                 <div>
-                  <h3 class="font-display text-lg font-semibold">Должностная инструкция</h3>
+                  <p class="text-lg font-semibold text-slate-900">Общее описание</p>
+                      <p class="mt-3 text-slate-900">
+                        Мы ищем Head of Growth, который построит и масштабирует систему роста продукта: от активации и
+                        первого успеха пользователя до удержания и расширения выручки. В роли нужно соединять продукт,
+                        маркетинг, аналитику и продажи в единую growth‑машину, которая стабильно генерирует результат.
+                      </p>
+                      <p class="mt-3 text-slate-900">
+                        Это позиция для человека, который умеет превращать хаотичные идеи в управляемый pipeline
+                        экспериментов, и не боится ответственности за цифры: активацию, конверсию, NRR и LTV.
+                      </p>
+                    </div>
+
+                    <div>
+                      <p class="text-lg font-semibold text-slate-900">Ключевые зоны ответственности</p>
+                      <p class="mt-3 text-slate-900">
+                        Построить backlog гипотез и систему их приоритизации, запустить регулярные спринты
+                        growth‑экспериментов и довести их до измеримого эффекта. Настроить единый аналитический контур
+                        (события, воронки, когорты, атрибуция) и дать команде прозрачный обзор того, где теряются
+                        пользователи и деньги.
+                      </p>
+                      <p class="mt-3 text-slate-900">
+                        Объединить product‑маркетинг, performance и product‑аналитику вокруг одного North Star и
+                        превратить его в рабочий инструмент для всех команд. Отвечать за рост ключевых метрик на уровне
+                        квартала и года.
+                      </p>
+                    </div>
+
+                    <div>
+                      <p class="text-lg font-semibold text-slate-900">Основные цели на 90 дней</p>
+                      <p class="mt-3 text-slate-900">
+                        Развернуть growth‑плейбук: определить метрики, собрать список гипотез, настроить процесс
+                        экспериментов и выдать первые устойчивые инкременты в активации и удержании. Сформировать
+                        отчётность и ритм, который позволит команде видеть эффект каждую неделю.
+                      </p>
+                    </div>
+
+                    <div>
+                      <p class="text-lg font-semibold text-slate-900">Взаимодействие с командами</p>
+                      <p class="mt-3 text-slate-900">
+                        Эта роль работает на пересечении продукта, маркетинга, продаж и CX. Вам нужно держать единый
+                        контекст по воронке, предлагать решения, которые одинаково хорошо живут и в продукте, и в
+                        каналах привлечения.
+                      </p>
+                    </div>
+
+                    <div>
+                      <p class="text-lg font-semibold text-slate-900">Пример рабочего дня</p>
+                      <p class="mt-3 text-slate-900">
+                        Утро — разбор когорт и планирование новых экспериментов с продактом. Днём — синки с маркетингом и
+                        аналитикой, согласование приоритетов и ресурса. Вечером — фиксация результатов спринта,
+                        подготовка гипотез на следующую итерацию и обновление roadmap.
+                      </p>
+                    </div>
+
+                    <div>
+                      <p class="text-lg font-semibold text-slate-900">Каким мы видим кандидата</p>
+                      <p class="mt-3 text-slate-900">
+                        Опыт в продуктовой или growth‑роли с измеримым вкладом в метрики, сильные навыки работы с
+                        данными, умение строить эксперименты и убеждать кросс‑функциональные команды работать на один
+                        результат.
+                      </p>
+                    </div>
+
+                    <div>
+                      <p class="text-lg font-semibold text-slate-900">О компании и продукте</p>
+                      <p class="mt-3 text-slate-900">
+                        Мы — B2B SaaS с международной аудиторией, продуктом пользуются тысячи команд в Европе и США.
+                        Сейчас фокус на масштабировании выручки и усилении ретеншна. Роль — ключевая, напрямую влияет на
+                        стратегию роста компании.
+                      </p>
+                    </div>
+            </div>
+
+            <div class="space-y-4">
+              <div class="glass-card relative cursor-pointer rounded-2xl p-5">
+                <button class="btn btn-ghost btn-circle btn-sm absolute right-4 top-4">▶</button>
+                <div class="voice-wave">
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
+                  <span class="voice-bar"></span>
                 </div>
-                <button class="btn btn-lg btn-ghost">Пройти голосовое интервью</button>
+                <p class="mt-4 text-sm text-slate-300">
+                  Пройдите голосовое интервью — мы заполним всё за вас.
+                </p>
               </div>
-              <div class="mt-5 space-y-4">
-                <label class="form-control">
-                  <span class="label-text text-xs uppercase tracking-[0.2em] text-slate-400">Роль</span>
-                  <input class="input input-bordered glass-pane" value="Head of Growth" />
-                </label>
-
-                <div class="glass-card rounded-2xl p-4">
-                  <div class="flex flex-wrap items-center justify-between gap-3">
-                    <div>
-                      <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Голосовое интервью</p>
-                    </div>
-                  </div>
-                  <div class="mt-4 rounded-2xl border border-sky-300/30 bg-gradient-to-br from-slate-900/70 via-slate-800/40 to-slate-900/80 p-4">
-                    <div class="flex items-center justify-between">
-                      <div class="space-y-1">
-                        <p class="text-sm font-semibold">Сессия интервью</p>
-                      </div>
-                      <span class="text-xs text-slate-400">00:00</span>
-                    </div>
-                    <div class="mt-4 grid gap-2">
-                      <div class="h-2 w-full overflow-hidden rounded-full bg-slate-800/80">
-                        <div class="h-full w-2/5 rounded-full bg-gradient-to-r from-sky-400 to-cyan-300"></div>
-                      </div>
-                    </div>
-                    <div class="mt-4 flex items-center justify-center">
-                      <button class="btn btn-ghost btn-circle btn-lg">▶</button>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="glass-pane rounded-2xl p-5">
-                  <div class="mt-4 space-y-4">
-                    <div>
-                      <p class="text-sm font-semibold">Общее описание</p>
-                      <p class="text-sm text-slate-300">
-                        Роль отвечает за системный рост продуктовой воронки от активации до удержания. Основной фокус —
-                        масштабируемые эксперименты, которые увеличивают выручку и улучшают ключевые метрики продукта.
-                      </p>
-                    </div>
-                    <div>
-                      <p class="text-sm font-semibold">Основные цели</p>
-                      <ul class="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
-                        <li>Запускать 3–5 гипотез в месяц и доводить их до измеримых результатов.</li>
-                        <li>Синхронизировать маркетинг, продукт и продажи вокруг единого North Star.</li>
-                        <li>Настроить аналитическую систему, которая показывает, где теряем пользователей.</li>
-                      </ul>
-                    </div>
-                    <div>
-                      <p class="text-sm font-semibold">Пример рабочего дня</p>
-                      <p class="text-sm text-slate-300">
-                        Утро — разбор когорт и планирование экспериментов с продактом. Днем — созвоны с командами
-                        маркетинга и аналитики, согласование приоритетов. Вечером — подготовка отчета по результатам
-                        спринта и формирование гипотез на следующую неделю.
-                      </p>
-                    </div>
-                  </div>
+              <div class="glass-card rounded-2xl p-5">
+                <h3 class="font-display text-base font-semibold sr-only">Целевой профиль кандидата</h3>
+                <div class="mt-4">
+                  <ClientOnly>
+                    <div ref="vacancyChartEl" class="h-64 w-full"></div>
+                  </ClientOnly>
                 </div>
               </div>
             </div>
           </div>
 
           <div v-else-if="currentStep === 1" class="grid gap-4">
-            <div class="glass-pane rounded-2xl p-5">
-              <h3 class="font-display text-lg font-semibold">Видео по сценарию</h3>
-              <ol class="mt-4 list-decimal space-y-2 pl-5 text-sm text-slate-300">
-                <li>Контекст продукта и стадии роста.</li>
-                <li>Что значит успех для роли в первые 90 дней.</li>
-                <li>Как выглядит идеальное взаимодействие в команде.</li>
-              </ol>
-              <div class="mt-5 rounded-2xl border border-dashed border-white/20 p-6 text-center">
-                <p class="text-sm text-slate-300">Перетащите видео (до 3 минут) или загрузите вручную</p>
-                <button class="btn btn-lg btn-ghost mt-3">Загрузить видео</button>
-              </div>
-              <div class="mt-6">
-                <h4 class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">Видео команды</h4>
-                <div class="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-                  <div class="glass-card rounded-2xl p-4">
-                    <div class="flex items-start justify-between">
-                      <div>
-                        <p class="text-sm font-semibold">Аня · Product</p>
-                        <p class="text-xs text-slate-400">1:12 · Вовлеченность</p>
+              <div class="mt-2 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+                <div class="glass-card rounded-2xl p-6 min-h-[180px]">
+                  <div class="flex h-full flex-col items-center justify-center gap-4">
+                    <div class="avatar">
+                      <div class="w-16 rounded-full">
+                        <img
+                          alt="Аня"
+                          src="https://i.pravatar.cc/160?img=12"
+                          class="h-full w-full rounded-full object-cover"
+                          loading="lazy"
+                        />
                       </div>
-                      <span class="badge badge-outline">Готово</span>
                     </div>
-                    <div class="mt-3 h-24 rounded-xl bg-gradient-to-br from-slate-800/60 to-slate-900/80"></div>
+                    <p class="text-sm font-semibold">Аня · Product</p>
                   </div>
-                  <div class="glass-card rounded-2xl p-4">
-                    <div class="flex items-start justify-between">
-                      <div>
-                        <p class="text-sm font-semibold">Сергей · Growth</p>
-                        <p class="text-xs text-slate-400">1:48 · Фокус</p>
+                </div>
+                <div class="glass-card rounded-2xl p-6 min-h-[180px]">
+                  <div class="flex h-full flex-col items-center justify-center gap-4">
+                    <div class="avatar">
+                      <div class="w-16 rounded-full">
+                        <img
+                          alt="Сергей"
+                          src="https://i.pravatar.cc/160?img=32"
+                          class="h-full w-full rounded-full object-cover"
+                          loading="lazy"
+                        />
                       </div>
-                      <span class="badge badge-outline">Готово</span>
                     </div>
-                    <div class="mt-3 h-24 rounded-xl bg-gradient-to-br from-slate-800/60 to-slate-900/80"></div>
+                    <p class="text-sm font-semibold">Сергей · Growth</p>
                   </div>
-                  <div class="glass-card rounded-2xl p-4">
-                    <div class="flex items-start justify-between">
-                      <div>
-                        <p class="text-sm font-semibold">Кира · Ops</p>
-                        <p class="text-xs text-slate-400">0:56 · Структура</p>
+                </div>
+                <div class="glass-card rounded-2xl p-6 min-h-[180px]">
+                  <div class="flex h-full flex-col items-center justify-center gap-4">
+                    <div class="avatar">
+                      <div class="w-16 rounded-full">
+                        <img
+                          alt="Кира"
+                          src="https://i.pravatar.cc/160?img=47"
+                          class="h-full w-full rounded-full object-cover"
+                          loading="lazy"
+                        />
                       </div>
-                      <span class="badge badge-outline">Готово</span>
                     </div>
-                    <div class="mt-3 h-24 rounded-xl bg-gradient-to-br from-slate-800/60 to-slate-900/80"></div>
+                    <p class="text-sm font-semibold">Кира · Ops</p>
+                  </div>
+                </div>
+                <div class="glass-card rounded-2xl border border-dashed border-white/20 p-4">
+                  <div class="flex h-full flex-col justify-between">
+                    <div class="flex flex-1 items-center justify-center">
+                      <button class="btn btn-ghost btn-sm">Добавить видео</button>
+                    </div>
+                    <div class="mt-4 flex w-full items-center justify-between gap-3">
+                      <input class="input input-bordered input-sm flex-1" value="https://hr.example/team-video" />
+                      <button class="btn btn-ghost btn-sm">Поделиться</button>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
           </div>
 
           <div v-else-if="currentStep === 2" class="grid gap-4">
-            <div class="glass-pane rounded-2xl p-5">
+            <div class="glass-card rounded-2xl p-5">
               <div class="flex items-center justify-between">
                 <h3 class="font-display text-lg font-semibold">Анализ видео</h3>
               </div>
@@ -196,134 +264,79 @@
                 <progress class="progress progress-info w-48" value="72" max="100"></progress>
               </div>
             </div>
-            <div class="glass-pane rounded-2xl p-5">
-              <h3 class="font-display text-lg font-semibold">Карточка коллектива</h3>
-              <div class="mt-4 grid gap-4 md:grid-cols-[1.1fr_0.9fr]">
-                <div class="space-y-3">
-                  <div class="flex items-center justify-between">
-                    <span class="text-sm">Тональность</span>
-                    <div class="badge badge-outline">Дружелюбная + прямолинейная</div>
-                  </div>
-                  <div class="flex items-center justify-between">
-                    <span class="text-sm">Частота синков</span>
-                    <div class="badge badge-outline">2-3 раза в неделю</div>
-                  </div>
-                  <div class="flex items-center justify-between">
-                    <span class="text-sm">Решения</span>
-                    <div class="badge badge-outline">Через эксперименты</div>
-                  </div>
-                </div>
-                <div class="glass-card rounded-2xl p-4">
-                  <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Группа</p>
-                  <p class="mt-2 text-lg font-semibold">Growth Core</p>
-                  <p class="text-xs text-slate-400">4 участника · Ритм 2-3 синка</p>
-                  <div class="mt-3 flex flex-wrap gap-2">
-                    <span class="badge badge-outline">Темп</span>
-                    <span class="badge badge-outline">Эксперименты</span>
-                    <span class="badge badge-outline">Прямота</span>
-                  </div>
-                </div>
+            <div class="glass-card rounded-2xl p-8">
+              <div class="flex flex-wrap items-center justify-between gap-3">
+                <h3 class="font-display text-lg font-semibold sr-only">Требования на основе команды</h3>
+              </div>
+              <div class="mt-6">
+                <ClientOnly>
+                  <div ref="teamChartEl" class="h-80 w-full"></div>
+                </ClientOnly>
               </div>
             </div>
           </div>
 
           <div v-else-if="currentStep === 3" class="space-y-4">
-            <div class="glass-pane rounded-2xl p-5">
-              <div class="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <h3 class="font-display text-lg font-semibold">Рекомендации кандидатов</h3>
-                </div>
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h3 class="font-display text-lg font-semibold">Критерии совпадений</h3>
               </div>
-            </div>
-
-            <div class="glass-pane rounded-2xl p-5">
-              <div class="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <h3 class="font-display text-lg font-semibold">Методология совпадений</h3>
-                </div>
-                <div class="tabs tabs-boxed bg-transparent">
-                  <a
-                    v-for="method in methodologies"
-                    :key="method.id"
-                    class="tab"
-                    :class="currentMethodology === method.id ? 'tab-active' : ''"
-                    @click="currentMethodology = method.id"
-                  >
-                    {{ method.label }}
-                  </a>
-                </div>
-              </div>
-
-              <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-                <div
-                  v-for="candidate in currentCandidates"
-                  :key="candidate.id"
-                  class="glass-card rounded-2xl p-4"
+              <div class="join rounded-full border border-white/10 p-1">
+                <button
+                  v-for="method in methodologies"
+                  :key="method.id"
+                  class="btn btn-sm join-item"
+                  :class="currentMethodology === method.id ? 'btn-primary' : 'btn-ghost'"
+                  @click="currentMethodology = method.id"
                 >
-                  <div class="flex items-start justify-between">
-                    <div>
-                      <h4 class="font-display text-lg font-semibold">{{ candidate.name }}</h4>
-                      <p class="text-sm text-slate-300">{{ candidate.role }}</p>
-                      <p class="text-xs text-slate-400">{{ candidate.location }}</p>
-                    </div>
-                    <div class="radial-progress text-sky-300" :style="`--value:${candidate.match}; --size:3.2rem;`">
-                      <span class="text-xs text-slate-100">{{ candidate.match }}%</span>
-                    </div>
-                  </div>
+                  {{ method.label }}
+                </button>
+              </div>
+            </div>
 
-                  <div class="mt-4 grid grid-cols-[90px_1fr] gap-3">
-                    <svg viewBox="0 0 100 100" class="h-24 w-24">
-                      <circle cx="50" cy="50" r="38" fill="none" stroke="rgba(148, 163, 184, 0.2)" />
-                      <circle cx="50" cy="50" r="24" fill="none" stroke="rgba(148, 163, 184, 0.2)" />
-                      <circle cx="50" cy="50" r="10" fill="none" stroke="rgba(148, 163, 184, 0.2)" />
-                      <g v-for="(axis, index) in radarAxes" :key="axis">
-                        <line
-                          :x1="50"
-                          :y1="50"
-                          :x2="axisPoints[index].x"
-                          :y2="axisPoints[index].y"
-                          stroke="rgba(148, 163, 184, 0.25)"
-                        />
-                      </g>
-                      <polygon
-                        :points="radarPoints(candidate.values)"
-                        fill="rgba(125, 211, 252, 0.35)"
-                        stroke="rgba(125, 211, 252, 0.9)"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                    <div class="space-y-2">
-                      <div class="flex flex-wrap gap-2">
-                        <span v-for="tag in candidate.tags" :key="tag" class="badge badge-outline">
-                          {{ tag }}
-                        </span>
+            <transition-group name="reorder" tag="div" class="grid gap-4 md:grid-cols-2">
+              <div
+                v-for="candidate in sortedCandidates"
+                :key="candidate.id"
+                class="glass-card min-h-[320px] rounded-2xl p-4"
+              >
+                <div class="flex items-start justify-between">
+                  <div>
+                    <div class="flex items-center gap-3">
+                      <div class="avatar">
+                        <div class="w-10 rounded-full">
+                          <img
+                            :alt="candidate.name"
+                            :src="candidate.avatar"
+                            class="h-full w-full rounded-full object-cover"
+                            loading="lazy"
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <h4 class="font-display text-lg font-semibold">{{ candidate.name }}</h4>
                       </div>
-                      <p class="text-xs text-slate-400">Сильнее всего: {{ candidate.highlight }}</p>
                     </div>
                   </div>
-
-                  <div class="mt-4 flex items-center justify-between">
-                    <div class="flex gap-2">
-                      <button class="btn btn-lg btn-ghost">Профиль</button>
-                      <button class="btn btn-lg btn-ghost">Сравнить</button>
-                    </div>
-                    <button class="btn btn-lg btn-ghost">Запросить интро</button>
+                  <div class="text-sm font-semibold text-fuchsia-600">
+                    {{ candidate.match }}%
                   </div>
                 </div>
+                <div class="mt-4">
+                  <ClientOnly>
+                    <div
+                      class="h-56 w-full"
+                      :ref="setCandidateChartRef(candidate.id)"
+                    ></div>
+                  </ClientOnly>
+                </div>
               </div>
+            </transition-group>
 
-            </div>
           </div>
 
           <div v-else class="space-y-4">
-            <div class="glass-pane rounded-2xl p-5">
-              <div class="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <h3 class="font-display text-lg font-semibold">Мэтчи и диалоги</h3>
-                </div>
-                <button class="btn btn-lg btn-ghost">Сгенерировать ссылку для встреч</button>
-              </div>
-              <div class="mt-5 space-y-3">
+              <div class="space-y-3">
                 <div class="glass-card rounded-2xl p-4">
                   <div class="flex items-center justify-between gap-4">
                     <div class="flex items-center gap-3">
@@ -334,15 +347,22 @@
                       </div>
                       <div>
                         <p class="text-sm font-semibold">Ирина Соколова · Head of Growth</p>
-                        <p class="text-xs text-slate-400">Последнее: «Готова к короткому созвону» · 2ч назад</p>
                       </div>
                     </div>
-                    <span class="badge badge-success badge-outline">Match 91%</span>
                   </div>
-                  <div class="mt-3 flex flex-wrap gap-2">
-                    <button class="btn btn-lg btn-ghost">Открыть диалог</button>
-                    <button class="btn btn-lg btn-ghost">Назначить встречу</button>
-                    <button class="btn btn-lg btn-ghost">Предложить слоты</button>
+                  <div class="mt-3 flex flex-wrap items-center gap-3">
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-1" class="radio radio-sm" />
+                      Сегодня 16:00
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-1" class="radio radio-sm" />
+                      Завтра 11:30
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-1" class="radio radio-sm" />
+                      Ср 15:00
+                    </label>
                   </div>
                 </div>
                 <div class="glass-card rounded-2xl p-4">
@@ -355,15 +375,22 @@
                       </div>
                       <div>
                         <p class="text-sm font-semibold">Кира Дуброва · Product Growth</p>
-                        <p class="text-xs text-slate-400">Последнее: «Вижу слоты на четверг» · 5ч назад</p>
                       </div>
                     </div>
-                    <span class="badge badge-success badge-outline">Match 92%</span>
                   </div>
-                  <div class="mt-3 flex flex-wrap gap-2">
-                    <button class="btn btn-lg btn-ghost">Открыть диалог</button>
-                    <button class="btn btn-lg btn-ghost">Назначить встречу</button>
-                    <button class="btn btn-lg btn-ghost">Предложить слоты</button>
+                  <div class="mt-3 flex flex-wrap items-center gap-3">
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-2" class="radio radio-sm" />
+                      Сегодня 18:00
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-2" class="radio radio-sm" />
+                      Чт 12:00
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-2" class="radio radio-sm" />
+                      Пт 10:30
+                    </label>
                   </div>
                 </div>
                 <div class="glass-card rounded-2xl p-4">
@@ -376,21 +403,30 @@
                       </div>
                       <div>
                         <p class="text-sm font-semibold">Алексей Марков · Growth Manager</p>
-                        <p class="text-xs text-slate-400">Последнее: «Можно быстро согласовать календарь» · 1д назад</p>
                       </div>
                     </div>
-                    <span class="badge badge-success badge-outline">Match 88%</span>
                   </div>
-                  <div class="mt-3 flex flex-wrap gap-2">
-                    <button class="btn btn-lg btn-ghost">Открыть диалог</button>
-                    <button class="btn btn-lg btn-ghost">Назначить встречу</button>
-                    <button class="btn btn-lg btn-ghost">Предложить слоты</button>
+                  <div class="mt-3 flex flex-wrap items-center gap-3">
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-3" class="radio radio-sm" />
+                      Ср 14:30
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-3" class="radio radio-sm" />
+                      Чт 16:00
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                      <input type="radio" name="meet-3" class="radio radio-sm" />
+                      Пт 09:30
+                    </label>
                   </div>
                 </div>
+                <div class="flex justify-center">
+                  <button class="btn btn-primary btn-lg">Запланировать встречу</button>
+                </div>
               </div>
-            </div>
           </div>
-        <div class="mt-auto flex justify-end">
+        <div class="mt-auto flex justify-end" v-if="currentStep !== steps.length - 1">
           <button class="btn btn-primary btn-lg" @click="nextStep">
             Далее
           </button>
@@ -401,259 +437,357 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, nextTick, ref, watch } from 'vue'
 
 const steps = [
   {
     id: 'requirements',
-    title: 'Функциональные требования к вакансии',
+    title: 'Сформируйте требования к вакансии',
   },
   {
     id: 'video',
-    title: 'Видео по сценарию',
+    title: 'Загрузите информацию о команде',
   },
   {
     id: 'fingerprint',
-    title: 'AI-отпечаток коллектива',
+    title: 'Требования на основе команды',
   },
   {
     id: 'recommendations',
-    title: 'Рекомендации кандидатов',
+    title: 'Ознакомьтесь с кандидатами',
   },
   {
     id: 'matches',
-    title: 'Мэтчи и чат',
+    title: 'Запланируйте встречу',
   }
 ]
 
+const route = typeof useRoute === 'function' ? useRoute() : null
+const router = typeof useRouter === 'function' ? useRouter() : null
 const currentStep = ref(0)
 const chatHistory = computed(() => chatByStep.slice(0, currentStep.value + 1).flat())
+const goToStep = (index: number) => {
+  currentStep.value = Math.min(Math.max(index, 0), steps.length - 1)
+}
+
 const nextStep = () => {
-  currentStep.value = Math.min(currentStep.value + 1, steps.length - 1)
+  goToStep(currentStep.value + 1)
 }
 
 const methodologies = [
-  { id: 'coaching', label: 'Бизнес-коучинг' },
-  { id: 'therapy', label: 'Психотерапия' },
-  { id: 'product', label: 'Продуктовый мэтч' }
+  { id: 'structured', label: 'Структурированный разбор' },
+  { id: 'situational', label: 'Ситуационный мэтч' },
+  { id: 'role', label: 'Ролевой профиль' }
 ]
 
-const candidatesByMethodology = {
-  coaching: [
-    {
-      id: 1,
-      name: 'Ирина Соколова',
-      role: 'Growth Lead · B2B SaaS',
-      location: 'Берлин / Remote',
-      match: 91,
-      values: [88, 62, 79, 71, 66],
-      tags: ['Experimentation', 'B2B', 'Lifecycle'],
-      highlight: 'темп запуска'
-    },
-    {
-      id: 2,
-      name: 'Максим Орлов',
-      role: 'Head of Growth',
-      location: 'Лондон / Remote',
-      match: 87,
-      values: [76, 58, 82, 68, 73],
-      tags: ['SQL', 'Funnels', 'Team Lead'],
-      highlight: 'структура'
-    },
-    {
-      id: 3,
-      name: 'Лия Вернер',
-      role: 'Revenue Strategist',
-      location: 'Амстердам',
-      match: 85,
-      values: [72, 74, 65, 70, 81],
-      tags: ['PLG', 'Retention', 'Ops'],
-      highlight: 'удержание'
-    },
-    {
-      id: 4,
-      name: 'Алексей Нестеров',
-      role: 'Growth Manager',
-      location: 'Барселона',
-      match: 83,
-      values: [70, 60, 78, 64, 69],
-      tags: ['Paid', 'Analytics', 'B2B'],
-      highlight: 'скорость экспериментов'
-    },
-    {
-      id: 5,
-      name: 'Анна Прайс',
-      role: 'Lifecycle Director',
-      location: 'Прага',
-      match: 81,
-      values: [68, 72, 59, 66, 84],
-      tags: ['CRM', 'Email', 'Segmentation'],
-      highlight: 'процессы'
-    },
-    {
-      id: 6,
-      name: 'Давид Клайн',
-      role: 'Growth Partner',
-      location: 'Цюрих',
-      match: 79,
-      values: [66, 64, 73, 62, 70],
-      tags: ['Strategy', 'OKR', 'B2B'],
-      highlight: 'стратегия'
-    }
+const axisLabelsByMethodology = {
+  structured: [
+    'Коммуникация/ясность',
+    'Решение проблем',
+    'Взаимодействие',
+    'Ownership/ответственность',
+    'Профессиональный опыт'
   ],
-  therapy: [
-    {
-      id: 1,
-      name: 'Юлия Ланская',
-      role: 'Growth Coach',
-      location: 'Варшава',
-      match: 89,
-      values: [70, 86, 60, 75, 78],
-      tags: ['Care', 'Leadership', 'Empathy'],
-      highlight: 'эмпатия'
-    },
-    {
-      id: 2,
-      name: 'Николай Протасов',
-      role: 'Team Therapist',
-      location: 'Мюнхен',
-      match: 86,
-      values: [64, 82, 58, 72, 83],
-      tags: ['Feedback', 'Culture', 'People'],
-      highlight: 'культура'
-    },
-    {
-      id: 3,
-      name: 'Леа Хольм',
-      role: 'Org Development',
-      location: 'Копенгаген',
-      match: 84,
-      values: [62, 80, 61, 69, 79],
-      tags: ['Mentoring', 'Soft Skills', 'Sync'],
-      highlight: 'синхронизация'
-    },
-    {
-      id: 4,
-      name: 'Роман Игнатьев',
-      role: 'Leadership Coach',
-      location: 'Рига',
-      match: 82,
-      values: [66, 78, 63, 67, 74],
-      tags: ['Coaching', 'Trust', 'Care'],
-      highlight: 'поддержка'
-    },
-    {
-      id: 5,
-      name: 'София Брукс',
-      role: 'Culture Partner',
-      location: 'Лиссабон',
-      match: 80,
-      values: [60, 76, 57, 70, 77],
-      tags: ['Culture', 'Energy', 'Rhythm'],
-      highlight: 'тональность'
-    },
-    {
-      id: 6,
-      name: 'Тимур Аббасов',
-      role: 'People Growth',
-      location: 'Стамбул',
-      match: 78,
-      values: [62, 74, 56, 68, 72],
-      tags: ['Well-being', 'Coaching', 'Values'],
-      highlight: 'ценности'
-    }
+  situational: [
+    'Конфликт-менеджмент',
+    'Переговоры',
+    'Командная работа',
+    'Межличностные навыки',
+    'Решение проблем в контексте роли'
   ],
-  product: [
-    {
-      id: 1,
-      name: 'Кира Дуброва',
-      role: 'Product Growth',
-      location: 'Стокгольм',
-      match: 92,
-      values: [84, 64, 78, 76, 71],
-      tags: ['PLG', 'Activation', 'Metrics'],
-      highlight: 'продуктовый мэтч'
-    },
-    {
-      id: 2,
-      name: 'Сергей Пак',
-      role: 'Growth PM',
-      location: 'Хельсинки',
-      match: 88,
-      values: [80, 62, 74, 72, 69],
-      tags: ['Experiment', 'North Star', 'Team'],
-      highlight: 'структура роста'
-    },
-    {
-      id: 3,
-      name: 'Мария Йенс',
-      role: 'Product Strategy',
-      location: 'Вена',
-      match: 86,
-      values: [78, 66, 69, 74, 70],
-      tags: ['Insight', 'Journey', 'B2B'],
-      highlight: 'customer insight'
-    },
-    {
-      id: 4,
-      name: 'Эмиль Громов',
-      role: 'Lifecycle PM',
-      location: 'Таллин',
-      match: 84,
-      values: [74, 60, 71, 68, 73],
-      tags: ['Retention', 'PLG', 'SQL'],
-      highlight: 'ретеншн'
-    },
-    {
-      id: 5,
-      name: 'Дарья Нор',
-      role: 'Growth Analyst',
-      location: 'Краков',
-      match: 82,
-      values: [70, 58, 75, 66, 68],
-      tags: ['Analytics', 'BI', 'Funnels'],
-      highlight: 'данные'
-    },
-    {
-      id: 6,
-      name: 'Феликс Штайн',
-      role: 'Growth Ops',
-      location: 'Женева',
-      match: 80,
-      values: [68, 56, 73, 64, 66],
-      tags: ['Process', 'Automation', 'B2B'],
-      highlight: 'операционка'
-    }
-  ]
+  role: ['Знания', 'Навыки', 'Умения', 'Рабочие активности', 'Контекст/условия роли']
 } as const
 
-const currentMethodology = ref<keyof typeof candidatesByMethodology>('coaching')
-const currentCandidates = computed(() => candidatesByMethodology[currentMethodology.value])
+const vacancyProfile = {
+  labels: [
+    'Коммуникация/ясность',
+    'Решение проблем',
+    'Ownership/ответственность',
+    'Взаимодействие',
+    'Темп/инициатива'
+  ],
+  values: [80, 78, 82, 74, 76]
+}
+const teamProfile = {
+  labels: [
+    'Командная работа',
+    'Конфликт-менеджмент',
+    'Межличностные навыки',
+    'Взаимодействие',
+    'Контекст/условия роли'
+  ],
+  values: [81, 73, 77, 75, 74]
+}
 
-const radarAxes = ['Стратегия', 'Эмпатия', 'Темп', 'Креатив', 'Стабильность']
-
-const axisPoints = radarAxes.map((_, index) => {
-  const angle = (-90 + (360 / radarAxes.length) * index) * (Math.PI / 180)
-  const radius = 38
-  return {
-    x: 50 + radius * Math.cos(angle),
-    y: 50 + radius * Math.sin(angle)
+const candidateProfiles = [
+  {
+    id: 1,
+    name: 'Ирина Соколова',
+    role: 'Growth Lead · B2B SaaS',
+    location: 'Берлин / Remote',
+    avatar: 'https://i.pravatar.cc/120?img=5',
+    tags: ['Experimentation', 'B2B', 'Lifecycle'],
+    highlight: 'темп запуска',
+    matchByMethodology: { structured: 91, situational: 84, role: 83 },
+    valuesByMethodology: {
+      structured: [88, 62, 79, 71, 66],
+      situational: [70, 86, 60, 75, 78],
+      role: [84, 64, 78, 76, 71]
+    }
+  },
+  {
+    id: 2,
+    name: 'Максим Орлов',
+    role: 'Head of Growth',
+    location: 'Лондон / Remote',
+    avatar: 'https://i.pravatar.cc/120?img=15',
+    tags: ['SQL', 'Funnels', 'Team Lead'],
+    highlight: 'структура',
+    matchByMethodology: { structured: 87, situational: 91, role: 90 },
+    valuesByMethodology: {
+      structured: [76, 58, 82, 68, 73],
+      situational: [64, 82, 58, 72, 83],
+      role: [80, 62, 74, 72, 69]
+    }
+  },
+  {
+    id: 3,
+    name: 'Лия Вернер',
+    role: 'Revenue Strategist',
+    location: 'Амстердам',
+    avatar: 'https://i.pravatar.cc/120?img=36',
+    tags: ['PLG', 'Retention', 'Ops'],
+    highlight: 'удержание',
+    matchByMethodology: { structured: 85, situational: 79, role: 77 },
+    valuesByMethodology: {
+      structured: [72, 74, 65, 70, 81],
+      situational: [62, 80, 61, 69, 79],
+      role: [78, 66, 69, 74, 70]
+    }
+  },
+  {
+    id: 4,
+    name: 'Алексей Нестеров',
+    role: 'Growth Manager',
+    location: 'Барселона',
+    avatar: 'https://i.pravatar.cc/120?img=51',
+    tags: ['Paid', 'Analytics', 'B2B'],
+    highlight: 'скорость экспериментов',
+    matchByMethodology: { structured: 83, situational: 88, role: 88 },
+    valuesByMethodology: {
+      structured: [70, 60, 78, 64, 69],
+      situational: [66, 78, 63, 67, 74],
+      role: [74, 60, 71, 68, 73]
+    }
+  },
+  {
+    id: 5,
+    name: 'Анна Прайс',
+    role: 'Lifecycle Director',
+    location: 'Прага',
+    avatar: 'https://i.pravatar.cc/120?img=64',
+    tags: ['CRM', 'Email', 'Segmentation'],
+    highlight: 'процессы',
+    matchByMethodology: { structured: 81, situational: 82, role: 92 },
+    valuesByMethodology: {
+      structured: [68, 72, 59, 66, 84],
+      situational: [60, 76, 57, 70, 77],
+      role: [70, 58, 75, 66, 68]
+    }
+  },
+  {
+    id: 6,
+    name: 'Давид Клайн',
+    role: 'Growth Partner',
+    location: 'Цюрих',
+    avatar: 'https://i.pravatar.cc/120?img=68',
+    tags: ['Strategy', 'OKR', 'B2B'],
+    highlight: 'стратегия',
+    matchByMethodology: { structured: 79, situational: 86, role: 81 },
+    valuesByMethodology: {
+      structured: [66, 64, 73, 62, 70],
+      situational: [62, 74, 56, 68, 72],
+      role: [68, 56, 73, 64, 66]
+    }
   }
+] as const
+
+const currentMethodology = ref<'structured' | 'situational' | 'role'>('structured')
+const currentCandidates = computed(() =>
+  candidateProfiles.map((candidate) => ({
+    ...candidate,
+    match: candidate.matchByMethodology[currentMethodology.value],
+    values: candidate.valuesByMethodology[currentMethodology.value]
+  }))
+)
+const sortedCandidates = computed(() =>
+  [...currentCandidates.value].sort((a, b) => b.match - a.match)
+)
+
+const currentCandidateAxisLabels = computed(
+  () => axisLabelsByMethodology[currentMethodology.value]
+)
+
+const vacancyChartEl = ref<HTMLDivElement | null>(null)
+const teamChartEl = ref<HTMLDivElement | null>(null)
+const candidateChartEls = new Map<number, HTMLDivElement>()
+const candidateCharts = new Map<number, any>()
+let vacancyChart: any = null
+let teamChart: any = null
+let echarts: any = null
+
+const setCandidateChartRef = (id: number) => (el: HTMLDivElement | null) => {
+  if (el) {
+    candidateChartEls.set(id, el)
+    return
+  }
+  candidateChartEls.delete(id)
+}
+
+const buildRadarOption = (labels: string[], values: number[]) => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: (params: { value: number[] }) =>
+      labels.map((label, index) => `${label}: ${params.value[index]}%`).join('<br/>')
+  },
+  radar: {
+    indicator: labels.map((label) => ({ name: label, max: 100 })),
+    splitNumber: 4,
+    axisName: { color: '#0f172a', fontSize: 10, fontWeight: 600 },
+    axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.3)' } },
+    splitLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.2)' } },
+    splitArea: {
+      areaStyle: {
+        color: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.6)']
+      }
+    }
+  },
+  series: [
+    {
+      type: 'radar',
+      data: [
+        {
+          value: values,
+          areaStyle: { color: 'rgba(56, 189, 248, 0.35)' },
+          lineStyle: { color: 'rgba(56, 189, 248, 0.9)', width: 2 },
+          symbol: 'circle',
+          symbolSize: 4
+        }
+      ]
+    }
+  ]
 })
 
-const radarPoints = (values: number[]) => {
-  const radius = 38
-  return values
-    .map((value, index) => {
-      const angle = (-90 + (360 / values.length) * index) * (Math.PI / 180)
-      const r = (value / 100) * radius
-      const x = 50 + r * Math.cos(angle)
-      const y = 50 + r * Math.sin(angle)
-      return `${x.toFixed(1)},${y.toFixed(1)}`
-    })
-    .join(' ')
+const ensureEcharts = async () => {
+  if (echarts) return
+  const mod = await import('echarts')
+  echarts = mod.default ?? mod
 }
 
+const renderVacancyChart = () => {
+  if (!echarts || !vacancyChartEl.value) return
+  if (!vacancyChart) {
+    vacancyChart = echarts.init(vacancyChartEl.value)
+  }
+  vacancyChart.setOption(buildRadarOption(vacancyProfile.labels, vacancyProfile.values))
+}
+
+const renderTeamChart = () => {
+  if (!echarts || !teamChartEl.value) return
+  if (!teamChart) {
+    teamChart = echarts.init(teamChartEl.value)
+  }
+  teamChart.setOption(buildRadarOption(teamProfile.labels, teamProfile.values))
+}
+
+const renderCandidateCharts = () => {
+  if (!echarts) return
+  const labels = currentCandidateAxisLabels.value
+  const candidateIds = new Set(sortedCandidates.value.map((candidate) => candidate.id))
+
+  for (const [id, chart] of candidateCharts) {
+    if (!candidateIds.has(id)) {
+      chart.dispose()
+      candidateCharts.delete(id)
+    }
+  }
+
+  sortedCandidates.value.forEach((candidate) => {
+    const el = candidateChartEls.get(candidate.id)
+    if (!el) return
+    const existing = candidateCharts.get(candidate.id)
+    if (existing) {
+      existing.setOption(buildRadarOption(labels, candidate.values))
+      return
+    }
+    const chart = echarts.init(el)
+    chart.setOption(buildRadarOption(labels, candidate.values))
+    candidateCharts.set(candidate.id, chart)
+  })
+}
+
+const syncStepFromRoute = () => {
+  if (!route) return
+  const raw = Array.isArray(route.query.step) ? route.query.step[0] : route.query.step
+  const parsed = Number(raw)
+  if (!Number.isNaN(parsed)) {
+    goToStep(parsed - 1)
+  }
+}
+
+const handleResize = () => {
+  vacancyChart?.resize()
+  teamChart?.resize()
+  candidateCharts.forEach((chart) => chart.resize())
+}
+
+onMounted(async () => {
+  syncStepFromRoute()
+  await ensureEcharts()
+  renderVacancyChart()
+  renderTeamChart()
+  renderCandidateCharts()
+  window.addEventListener('resize', handleResize)
+})
+
+watch(
+  [currentMethodology, currentStep, sortedCandidates],
+  async () => {
+    await nextTick()
+    renderVacancyChart()
+    renderTeamChart()
+    renderCandidateCharts()
+  },
+  { flush: 'post' }
+)
+
+watch(
+  () => route?.query?.step,
+  () => {
+    syncStepFromRoute()
+  }
+)
+
+watch(
+  () => currentStep.value,
+  (value) => {
+    if (!route || !router) return
+    const step = String(value + 1)
+    if (route.query.step !== step) {
+      router.replace({ query: { ...route.query, step } })
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  vacancyChart?.dispose()
+  teamChart?.dispose()
+  candidateCharts.forEach((chart) => chart.dispose())
+  candidateCharts.clear()
+})
+
 const chatByStep = [
   [
     { id: 'r1', from: 'ai', text: 'Опиши требования к вакансии. Заполни форму.', step: 0 },
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 054aab9..f9b2fe0 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -43,31 +43,35 @@ body,
 
 body {
   font-family: "IBM Plex Sans", sans-serif;
-  background:
-    radial-gradient(1200px 600px at 10% 10%, rgba(219, 39, 119, 0.16), transparent 60%),
-    radial-gradient(900px 500px at 90% 15%, rgba(250, 204, 21, 0.2), transparent 55%),
-    radial-gradient(900px 700px at 50% 100%, rgba(74, 222, 128, 0.12), transparent 60%),
-    oklch(98% 0 0);
+  background: #f9f6ef;
 }
 
 .glass-card {
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
-  backdrop-filter: blur(18px);
+  background: rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow:
+    0 24px 40px rgba(27, 32, 58, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(24px) saturate(140%);
 }
 
 .glass-pane {
-  background: rgba(255, 255, 255, 0.55);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(18px);
+  background: rgba(255, 255, 255, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  box-shadow:
+    0 16px 28px rgba(27, 32, 58, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(16px) saturate(130%);
 }
 
 .section-title {
   font-family: "Space Grotesk", sans-serif;
-  font-size: 1.5rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-size: 2.1rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  color: rgb(15 23 42);
+  text-shadow: 0 6px 20px rgba(99, 102, 241, 0.18);
 }
 
 .radar-label {
@@ -76,3 +80,61 @@ body {
   text-transform: uppercase;
   color: rgb(100 116 139);
 }
+
+.voice-wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 96px;
+}
+
+.voice-bar {
+  width: 6px;
+  height: 32px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.3));
+  animation: voice-wave 1.6s ease-in-out infinite;
+}
+
+.voice-bar:nth-child(2) { animation-delay: -1.4s; height: 26px; }
+.voice-bar:nth-child(3) { animation-delay: -1.2s; height: 40px; }
+.voice-bar:nth-child(4) { animation-delay: -1.0s; height: 54px; }
+.voice-bar:nth-child(5) { animation-delay: -0.8s; height: 68px; }
+.voice-bar:nth-child(6) { animation-delay: -0.6s; height: 52px; }
+.voice-bar:nth-child(7) { animation-delay: -0.4s; height: 38px; }
+.voice-bar:nth-child(8) { animation-delay: -0.2s; height: 28px; }
+.voice-bar:nth-child(9) { animation-delay: -0.1s; height: 44px; }
+.voice-bar:nth-child(10) { animation-delay: -0.05s; height: 34px; }
+
+@keyframes voice-wave {
+  0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
+  50% { transform: scaleY(1.2); opacity: 1; }
+}
+
+.bg-mesh {
+  background-image:
+    radial-gradient(1200px 600px at 10% -10%, rgba(67, 56, 118, 0.2), transparent 60%),
+    radial-gradient(900px 500px at 90% 10%, rgba(230, 184, 92, 0.18), transparent 60%),
+    linear-gradient(180deg, #f9f6ef 0%, #f2efe7 55%, #ebe8df 100%);
+}
+
+.reorder-move {
+  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
+  will-change: transform;
+}
+
+.reorder-enter-active,
+.reorder-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.reorder-enter-from {
+  opacity: 0;
+  transform: translateY(14px) scale(0.98);
+}
+
+.reorder-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.98);
+}
diff --git a/package-lock.json b/package-lock.json
index 8bb6d3a..0a9d3fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,8 @@
       "name": "hr",
       "hasInstallScript": true,
       "dependencies": {
+        "@formkit/auto-animate": "^0.9.0",
+        "echarts": "^6.0.0",
         "nuxt": "^4.3.1",
         "vue": "^3.5.28",
         "vue-router": "^4.6.4"
@@ -966,6 +968,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.9.0.tgz",
+      "integrity": "sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==",
+      "license": "MIT"
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@@ -5570,6 +5578,22 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -10630,6 +10654,21 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }
diff --git a/package.json b/package.json
index 8f455ec..b700c63 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.9.0",
+    "echarts": "^6.0.0",
     "nuxt": "^4.3.1",
     "vue": "^3.5.28",
     "vue-router": "^4.6.4"