From eb168fcb9d451a4ae7533eb4ddcc55ac2ed8d502 Mon Sep 17 00:00:00 2001
From: arys <abiev@gmail.com>
Date: Tue, 14 Apr 2026 09:10:29 +0500
Subject: [PATCH] feat: implement targetologist dashboard module with
 competitor analysis and campaign management tools

---
 .qwen/settings.json                           |   3 +-
 .qwen/settings.json.orig                      |   7 +
 .../marketing/MarketingBriefWizardV3.vue      |   4 +-
 .../dashboard-v3/v4/V4Competitors.vue         | 331 +++++++-----
 src/router/index.js                           |   6 +
 src/views/pages/marketing/MarketingMain.vue   | 479 +++++++++---------
 .../pages/marketing/MarketingStrategyV3.vue   | 321 ++++++++++--
 .../targetologist/CampaignInsightsDetail.vue  |  63 +--
 .../targetologist/CampaignWizard.vue          |  14 +-
 .../targetologist/TargetologistDashboard.vue  | 257 ++++------
 .../components/CampaignInsights.vue           |  83 +--
 .../components/CampaignMetrics.vue            |  36 +-
 .../components/CampaignPrediction.vue         | 237 ++++++---
 .../components/OAuthConnectionWidget.vue      |  76 +--
 14 files changed, 1113 insertions(+), 804 deletions(-)
 create mode 100644 .qwen/settings.json.orig

diff --git a/.qwen/settings.json b/.qwen/settings.json
index 1204668..f3907f1 100644
--- a/.qwen/settings.json
+++ b/.qwen/settings.json
@@ -3,5 +3,6 @@
     "allow": [
       "Bash(npm run *)"
     ]
-  }
+  },
+  "$version": 3
 }
\ No newline at end of file
diff --git a/.qwen/settings.json.orig b/.qwen/settings.json.orig
new file mode 100644
index 0000000..1204668
--- /dev/null
+++ b/.qwen/settings.json.orig
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run *)"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/components/marketing/MarketingBriefWizardV3.vue b/src/components/marketing/MarketingBriefWizardV3.vue
index c2d5450..4217fa8 100644
--- a/src/components/marketing/MarketingBriefWizardV3.vue
+++ b/src/components/marketing/MarketingBriefWizardV3.vue
@@ -430,8 +430,8 @@ export default {
                         <div class="flex items-center gap-3">
                             <div class="kai-logo">KAI</div>
                             <div>
-                                <h1 class="kai-section-title">Создание ИИ-Брифа</h1>
-                                <p class="kai-section-sub">KAI Prime · Intelligent Onboarding</p>
+                                <h1 class="kai-section-title">Бриф маркетингового анализа</h1>
+                                <p class="kai-section-sub">KAI Intelligence · Сбор данных для стратегии</p>
                             </div>
                         </div>
                         <Button icon="pi pi-times" text rounded size="small" class="text-surface-500" @click="$router.push('/marketing-analysis')" />
diff --git a/src/components/marketing/dashboard-v3/v4/V4Competitors.vue b/src/components/marketing/dashboard-v3/v4/V4Competitors.vue
index 358b81c..063ed98 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Competitors.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Competitors.vue
@@ -1,6 +1,6 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed, ref } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: [Array, Object] });
 
@@ -26,61 +26,72 @@ const platColor = (p) => PLAT_COLORS[p] || '#808080';
 
 const sorted = computed(() => [...normalizedData.value].sort((a, b) => b.followersVal - a.followersVal));
 
-// Scatter data
-const scatter = computed(() => normalizedData.value.map((c, i) => ({ 
-  x: c.postsVal || 0, 
-  y: c.erVal || 0, 
-  r: Math.max(Math.sqrt((c.followersVal || 0) / 1000) * 5, 4), 
-  name: c.name, 
-  color: platColor(c.platform) 
-})));
-const maxX = computed(() => Math.max(Math.max(...scatter.value.map(d => d.x)) * 1.1, 10));
-const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) * 1.2, 5));
+// New Summary Metrics
+const topFollowers = computed(() => sorted.value.length > 0 ? sorted.value[0] : null);
+const topEr = computed(() => {
+  if (!normalizedData.value.length) return null;
+  return [...normalizedData.value].sort((a, b) => b.erVal - a.erVal)[0];
+});
+const avgPosts = computed(() => {
+  if (!normalizedData.value.length) return 0;
+  const sum = normalizedData.value.reduce((acc, c) => acc + c.postsVal, 0);
+  return Math.round(sum / normalizedData.value.length);
+});
+const avgRating = computed(() => {
+  if (!normalizedData.value.length) return 0;
+  const sum = normalizedData.value.reduce((acc, c) => acc + c.ratingVal, 0);
+  return (sum / normalizedData.value.length).toFixed(1);
+});
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Карта конкурентов" subtitle="Позиционирование игроков: Активность vs Вовлечённость" num="3">
+  <SectionWrapper :id="id" title="Анализ конкурентов" subtitle="Главные игроки на рынке и их показатели" num="3">
 
-    <!-- Scatter plot -->
-    <div class="competitor-plot-card">
-      <div class="plot-header">
-        <span class="plot-axis-label">Активность (посты/мес) ➔</span>
-        <span class="plot-axis-label vertical">Вовлечённость (ER %) ↑</span>
-        <i class="pi pi-info-circle kai-term-icon" v-tooltip.right="'Лидеры (справа вверху) делают много постов и получают высокий отклик.'"></i>
+    <!-- Summary Cards -->
+    <div class="summary-cards" v-if="normalizedData.length > 0">
+      <div class="summary-card">
+        <div class="card-icon blue"><i class="pi pi-users" /></div>
+        <div class="card-info">
+          <span class="card-label">Лидер рынка</span>
+          <span class="card-value">{{ topFollowers?.name || '—' }}</span>
+          <span class="card-desc">{{ fmtNum(topFollowers?.followersVal) }} подписчиков</span>
+        </div>
       </div>
       
-      <div class="plot-leader-zone">ЛИДЕРЫ</div>
+      <div class="summary-card">
+        <div class="card-icon green"><i class="pi pi-heart-fill" /></div>
+        <div class="card-info">
+          <span class="card-label">Самый вовлекающий (ER)</span>
+          <span class="card-value">{{ topEr?.name || '—' }}</span>
+          <span class="card-desc" :style="{ color: topEr ? erColor(topEr.erVal) : '' }">{{ fmtPct(topEr?.erVal) }} ER</span>
+        </div>
+      </div>
       
-      <div class="plot-container">
-        <svg class="plot-svg" :viewBox="`0 0 500 220`" preserveAspectRatio="none">
-          <!-- Grid -->
-          <line x1="50" y1="10" x2="50" y2="200" class="plot-grid-line"/>
-          <line x1="50" y1="200" x2="490" y2="200" class="plot-grid-line"/>
-          
-          <!-- Leader quadrant -->
-          <rect x="270" y="10" width="220" height="100" class="plot-leader-rect" rx="8"/>
-          
-          <!-- Data points -->
-          <g v-for="(pt, i) in scatter" :key="i" class="plot-point-group">
-            <circle
-              :cx="50 + (pt.x / maxX) * 440"
-              :cy="195 - (pt.y / maxY) * 185"
-              :r="Math.max(pt.r, 5)"
-              :fill="pt.color"
-              class="plot-point"
-            />
-            <text
-              :x="50 + (pt.x / maxX) * 440"
-              :y="195 - (pt.y / maxY) * 185 - Math.max(pt.r, 5) - 6"
-              class="plot-point-text"
-            >{{ pt.name }}</text>
-          </g>
-        </svg>
+      <div class="summary-card">
+        <div class="card-icon yellow"><i class="pi pi-calendar" /></div>
+        <div class="card-info">
+          <span class="card-label">Средняя активность</span>
+          <span class="card-value">{{ avgPosts }}</span>
+          <span class="card-desc">постов в месяц</span>
+        </div>
+      </div>
+      
+      <div class="summary-card">
+        <div class="card-icon purple"><i class="pi pi-star-fill" /></div>
+        <div class="card-info">
+          <span class="card-label">Средний рейтинг</span>
+          <span class="card-value text-yellow-500">★ {{ avgRating }}</span>
+          <span class="card-desc">по отзывам клиентов</span>
+        </div>
       </div>
     </div>
 
     <!-- Table -->
     <div class="table-container">
+      <div class="table-header">
+        <h4 class="table-title">Подробная таблица</h4>
+        <span class="table-count">{{ sorted.length }} конкурентов</span>
+      </div>
       <table class="kai-table">
         <thead>
           <tr>
@@ -96,8 +107,13 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
         </thead>
         <tbody>
           <template v-for="(c, i) in sorted" :key="c.name">
-            <tr :class="{ 'top-row': i < 3 }" :style="i < 3 ? { '--top-color': ['#F59E0B','#939393','#CD7F32'][i] } : {}">
-              <td class="row-num">{{ String(i+1).padStart(2,'0') }}</td>
+            <tr :class="{ 'top-row': i < 3 }" :style="i < 3 ? { '--top-color': ['#F59E0B','#9CA3AF','#D97706'][i] } : {}">
+              <td class="row-num">
+                <span v-if="i === 0" class="medal gold">🥇</span>
+                <span v-else-if="i === 1" class="medal silver">🥈</span>
+                <span v-else-if="i === 2" class="medal bronze">🥉</span>
+                <span v-else>{{ String(i+1).padStart(2,'0') }}</span>
+              </td>
               <td>
                 <div class="brand-cell">
                   <div class="brand-avatar" :style="{ background: platColor(c.platform) + '20', color: platColor(c.platform), borderColor: platColor(c.platform) + '40' }">
@@ -117,23 +133,35 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
                 </button>
               </td>
             </tr>
-            
+
             <!-- Expanded content -->
             <tr v-if="expanded === c.name" class="expanded-row">
               <td colspan="8">
                 <div class="expand-content">
                   <div class="sw-grid">
                     <div class="sw-col">
-                      <div class="sw-title green">Сильные стороны</div>
+                      <div class="sw-title green">
+                        <i class="pi pi-check-circle"></i>
+                        Сильные стороны
+                      </div>
                       <ul class="sw-list">
-                        <li v-for="(s, si) in (c.strengths||[])" :key="si">{{ s }}</li>
+                        <li v-for="(s, si) in (c.strengths||[])" :key="si">
+                          <span class="sw-icon green">+</span>
+                          {{ s }}
+                        </li>
                         <li v-if="!c.strengths?.length" class="empty-sw">Нет данных</li>
                       </ul>
                     </div>
                     <div class="sw-col">
-                      <div class="sw-title red">Слабые стороны</div>
+                      <div class="sw-title red">
+                        <i class="pi pi-times-circle"></i>
+                        Слабые стороны
+                      </div>
                       <ul class="sw-list">
-                        <li v-for="(w, wi) in (c.weaknesses||[])" :key="wi">{{ w }}</li>
+                        <li v-for="(w, wi) in (c.weaknesses||[])" :key="wi">
+                          <span class="sw-icon red">−</span>
+                          {{ w }}
+                        </li>
                         <li v-if="!c.weaknesses?.length" class="empty-sw">Нет данных</li>
                       </ul>
                     </div>
@@ -142,7 +170,12 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
               </td>
             </tr>
           </template>
-          <tr v-if="!sorted.length"><td colspan="8" class="empty-table">Нет данных</td></tr>
+          <tr v-if="!sorted.length"><td colspan="8" class="empty-table">
+            <div class="empty-state">
+              <i class="pi pi-search text-4xl mb-3"></i>
+              <p>Данные о конкурентах не найдены</p>
+            </div>
+          </td></tr>
         </tbody>
       </table>
     </div>
@@ -150,80 +183,78 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
 </template>
 
 <style scoped>
-.competitor-plot-card {
+/* ==================== SUMMARY CARDS ==================== */
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.summary-card {
   background: var(--kai-bg2);
   border: 1px solid var(--kai-border);
-  border-radius: 20px;
-  padding: 24px;
-  margin-bottom: 32px;
-  position: relative;
-  overflow: hidden;
-}
-
-.plot-header {
+  border-radius: 16px;
+  padding: 20px;
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
+  gap: 16px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.plot-axis-label {
-  font-size: 9.5px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--kai-txt3);
+.summary-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 
-.plot-leader-zone {
-  position: absolute;
-  top: 60px;
-  right: 40px;
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  color: var(--kai-blue);
-  opacity: 0.4;
-  letter-spacing: 0.2em;
-  pointer-events: none;
+html[data-theme='light'] .summary-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
 }
 
-.plot-container {
-  padding-left: 20px;
+.card-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
 }
 
-.plot-grid-line {
-  stroke: var(--kai-border);
-  stroke-width: 1;
+.card-icon.blue { background: rgba(45,123,255,0.1); color: #2D7BFF; }
+.card-icon.green { background: rgba(16,185,129,0.1); color: #10B981; }
+.card-icon.yellow { background: rgba(245,158,11,0.1); color: #F59E0B; }
+.card-icon.purple { background: rgba(139,92,246,0.1); color: #8B5CF6; }
+
+.card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.plot-leader-rect {
-  fill: rgba(var(--kai-blue-rgb), 0.05);
-}
-
-.plot-point {
-  fill-opacity: 0.8;
-  stroke: rgba(255,255,255,0.2);
-  stroke-width: 1;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.plot-point-group:hover .plot-point {
-  fill-opacity: 1;
-  r: 10;
-  stroke-width: 2;
-  filter: drop-shadow(0 0 8px currentColor);
-}
-
-.plot-point-text {
-  font-size: 8px;
+.card-label {
+  font-size: 11px;
   font-weight: 700;
-  fill: var(--kai-txt2);
-  text-anchor: middle;
-  pointer-events: none;
+  text-transform: uppercase;
+  color: var(--kai-txt3);
+  letter-spacing: 0.05em;
 }
 
-/* Table Stylings */
+.card-value {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--kai-txt);
+  line-height: 1.2;
+}
+
+.card-desc {
+  font-size: 11px;
+  color: var(--kai-txt2);
+}
+
+/* ==================== TABLE ==================== */
 .table-container {
   border-radius: 16px;
   overflow: hidden;
@@ -231,6 +262,31 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
   border: 1px solid var(--kai-border);
 }
 
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--kai-border);
+}
+
+.table-title {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--kai-txt);
+  margin: 0;
+}
+
+.table-count {
+  font-size: 11px;
+  color: var(--kai-txt3);
+  background: var(--kai-border);
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-weight: 600;
+}
+
 .top-row {
   background: linear-gradient(to right, rgba(var(--kai-blue-rgb), 0.03), transparent);
   border-left: 3px solid var(--top-color);
@@ -241,7 +297,12 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
   font-size: 9px;
   font-weight: 800;
   color: var(--kai-txt3);
-  opacity: 0.6;
+  text-align: center;
+}
+
+.medal {
+  font-size: 16px;
+  display: block;
 }
 
 .brand-cell {
@@ -304,6 +365,9 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .sw-title.green { color: var(--kai-green); }
@@ -315,7 +379,7 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .sw-list li {
@@ -326,13 +390,16 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
   gap: 10px;
 }
 
-.sw-list li::before {
-  content: '→';
-  color: var(--kai-txt3);
-  font-size: 10px;
-  margin-top: 1px;
+.sw-icon {
+  font-weight: 800;
+  font-size: 14px;
+  line-height: 1.4;
+  flex-shrink: 0;
 }
 
+.sw-icon.green { color: var(--kai-green); }
+.sw-icon.red { color: var(--kai-red); }
+
 .empty-sw {
   color: var(--kai-txt3) !important;
   font-style: italic;
@@ -345,4 +412,36 @@ const maxY = computed(() => Math.max(Math.max(...scatter.value.map(d => d.y)) *
   padding: 40px;
   font-size: 12px;
 }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--kai-txt3);
+}
+
+.empty-state i {
+  opacity: 0.3;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 12px;
+}
+
+/* ==================== RESPONSIVE ==================== */
+@media (max-width: 768px) {
+  .summary-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .sw-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .expand-content {
+    padding: 16px;
+  }
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 0dda433..4063947 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -308,6 +308,12 @@ const router = createRouter({
             component: () => import('@/views/pages/marketing/MarketingStrategyV3.vue'),
             meta: { requiresAuth: true }
         },
+        {
+            path: '/marketing-analysis/ai-strategy',
+            name: 'marketing-ai-strategy',
+            component: () => import('@/views/pages/marketing/AIStrategyGeneratorPage.vue'),
+            meta: { requiresAuth: true }
+        },
         {
             path: '/marketing-analysis/v3/:id',
             name: 'marketing-v3-analysis',
diff --git a/src/views/pages/marketing/MarketingMain.vue b/src/views/pages/marketing/MarketingMain.vue
index 6097051..ae33435 100644
--- a/src/views/pages/marketing/MarketingMain.vue
+++ b/src/views/pages/marketing/MarketingMain.vue
@@ -8,9 +8,10 @@ const navExternal = (url) => window.open(url, '_blank');
 <template>
     <div class="mkt-hub">
 
-        <!-- AMBIENT GLOW -->
+        <!-- AMBIENT GLOW (Premium Soft Mesh) -->
         <div class="mkt-hub__glow1"></div>
         <div class="mkt-hub__glow2"></div>
+        <div class="mkt-hub__glow3"></div>
 
         <div class="mkt-hub__inner">
 
@@ -21,7 +22,7 @@ const navExternal = (url) => window.open(url, '_blank');
                     KAI Intelligence · Платформа 2026
                 </div>
                 <h1 class="mkt-hub__title">Маркетинг-Хаб</h1>
-                <p class="mkt-hub__sub">Автономное управление маркетингом: от глубоких исследований рынка до генерации контента и запуска рекламных кампаний.</p>
+                <p class="mkt-hub__sub">Исследования рынка, генерация стратегий и управление рекламными кампаниями — всё в одном месте. Управляйте ростом вашего бизнеса легко и эффективно.</p>
             </div>
 
             <!-- GRID -->
@@ -48,14 +49,14 @@ const navExternal = (url) => window.open(url, '_blank');
                 </div>
 
                 <!-- Сгенерировать стратегию -->
-                <div class="mkt-card mkt-card--accent" @click="nav('/marketing-analysis/v3')">
-                    <div class="mkt-card__accent-glow"></div>
-                    <div class="mkt-card__icon" style="background:rgba(0,212,139,0.15);color:#00D48B;">
+                <div class="mkt-card mkt-card--green" @click="nav('/marketing-analysis/v3/new')">
+                    <div class="mkt-card__glow"></div>
+                    <div class="mkt-card__icon" style="background:rgba(16,185,129,0.15);color:#10B981;">
                         <i class="pi pi-bolt"></i>
                     </div>
                     <h3 class="mkt-card__title">Сгенерировать стратегию</h3>
                     <p class="mkt-card__desc">Контент-фабрика. ИИ выберет соцсети, напишет посты и отрисует картинки на основе анализа</p>
-                    <div class="mkt-card__tag">Требуется анализ</div>
+                    <div class="mkt-card__tag mkt-card__tag--green">Требуется анализ</div>
                 </div>
 
                 <!-- Мои стратегии -->
@@ -68,48 +69,32 @@ const navExternal = (url) => window.open(url, '_blank');
                     <div class="mkt-card__arrow"><i class="pi pi-arrow-right"></i></div>
                 </div>
 
-                <!-- ИИ-Таргетолог -->
-                <div class="mkt-card mkt-card--blue" @click="navExternal('https://call-center.konturai.kz')">
+                <!-- ИИ-Таргетолог (внутренний) - Поменяли местами, теперь идет перед CRM -->
+                <div class="mkt-card mkt-card--blue" @click="nav('/marketing-analysis/v3/targetologist/dashboard')">
+                    <div class="mkt-card__glow"></div>
                     <div class="mkt-card__icon" style="background:rgba(45,123,255,0.15);color:#2D7BFF;">
                         <i class="pi pi-bullseye"></i>
                     </div>
                     <h3 class="mkt-card__title">ИИ-Таргетолог</h3>
                     <p class="mkt-card__desc">Развёртывание рекламных кампаний — ИИ создаст аудитории, оптимизирует бюджет и запустит рекламу в Facebook, Instagram и TikTok</p>
-                    <div class="mkt-card__tag">Бета-режим API</div>
+                    <div class="mkt-card__tag mkt-card__tag--blue">Бета-режим API</div>
+                    <div class="mkt-card__arrow"><i class="pi pi-arrow-right"></i></div>
                 </div>
 
-                <!-- CRM -->
-                <div class="mkt-card mkt-card--teal" @click="nav('/crm')">
+                <!-- CRM-система (внешняя ссылка) - Поменяли местами, теперь в конце -->
+                <div class="mkt-card mkt-card--teal" @click="navExternal('https://call-center.konturai.kz/')">
+                    <div class="mkt-card__glow"></div>
                     <div class="mkt-card__icon" style="background:rgba(20,184,166,0.15);color:#14B8A6;">
                         <i class="pi pi-users"></i>
                     </div>
                     <h3 class="mkt-card__title">CRM-система</h3>
                     <p class="mkt-card__desc">Управление клиентской базой, сделками и воронкой продаж в едином пространстве</p>
-                    <div class="mkt-card__arrow" style="background:rgba(20,184,166,0.1);color:#14B8A6;"><i class="pi pi-arrow-right"></i></div>
-                </div>
-
-            </div>
-
-            <!-- AI TARGETOLOGIST — full-width banner -->
-            <div class="mkt-banner" @click="nav('/marketing-analysis/v3/targetologist/dashboard')">
-                <div class="mkt-banner__glow"></div>
-                <div class="mkt-banner__left">
-                    <div class="mkt-banner__icon">
-                        <i class="pi pi-bullseye"></i>
-                    </div>
-                    <div>
-                        <div class="mkt-banner__label">
-                            <span class="mkt-banner__dot"></span>
-                            Бета-режим API
-                        </div>
-                        <h2 class="mkt-banner__title">ИИ-Таргетолог</h2>
-                        <p class="mkt-banner__desc">Развёртывание рекламных кампаний — ИИ создаст аудитории, оптимизирует бюджет и запустит рекламу в Facebook, Instagram и TikTok</p>
+                    <div class="mkt-card__external-badge">
+                        <i class="pi pi-external-link"></i>
+                        Внешний сервис
                     </div>
                 </div>
-                <div class="mkt-banner__cta">
-                    <span>Открыть кабинет</span>
-                    <i class="pi pi-arrow-right"></i>
-                </div>
+
             </div>
 
         </div>
@@ -119,36 +104,54 @@ const navExternal = (url) => window.open(url, '_blank');
 <style scoped>
 /* ───── Page layout ───── */
 .mkt-hub {
-    background: #F5F8FF;
+    background: #F8FAFC; /* Clean, slightly cool white */
     min-height: 100vh;
-    font-family: 'Onest', sans-serif;
+    font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
     position: relative;
     overflow: hidden;
-    padding: 48px 24px 80px;
+    padding: 80px 32px 100px;
     color: #0F172A;
 }
 
+/* Ambient premium mesh background effects */
 .mkt-hub__glow1 {
     position: absolute;
-    top: -120px;
-    right: -100px;
+    top: -150px;
+    left: -100px;
     width: 600px;
     height: 600px;
-    background: radial-gradient(circle, rgba(45,123,255,0.08) 0%, transparent 70%);
+    background: radial-gradient(circle, rgba(45, 123, 255, 0.08) 0%, transparent 70%);
     pointer-events: none;
+    animation: float-glow 15s ease-in-out infinite alternate;
 }
 .mkt-hub__glow2 {
     position: absolute;
-    bottom: -80px;
-    left: -60px;
-    width: 400px;
-    height: 400px;
-    background: radial-gradient(circle, rgba(0,212,139,0.06) 0%, transparent 70%);
+    top: 20%;
+    right: -200px;
+    width: 800px;
+    height: 800px;
+    background: radial-gradient(circle, rgba(168, 85, 247, 0.06) 0%, transparent 60%);
     pointer-events: none;
+    animation: float-glow 20s ease-in-out infinite alternate-reverse;
+}
+.mkt-hub__glow3 {
+    position: absolute;
+    bottom: -100px;
+    left: 20%;
+    width: 700px;
+    height: 700px;
+    background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
+    pointer-events: none;
+    animation: float-glow 18s ease-in-out infinite alternate;
+}
+
+@keyframes float-glow {
+    0% { transform: translate(0, 0) scale(1); }
+    100% { transform: translate(40px, -40px) scale(1.1); }
 }
 
 .mkt-hub__inner {
-    max-width: 1100px;
+    max-width: 1200px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
@@ -157,52 +160,59 @@ const navExternal = (url) => window.open(url, '_blank');
 /* ───── Header ───── */
 .mkt-hub__header {
     text-align: center;
-    margin-bottom: 52px;
+    margin-bottom: 72px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .mkt-hub__badge {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    padding: 4px 12px;
+    gap: 8px;
+    padding: 6px 18px;
     border-radius: 999px;
-    border: 1px solid rgba(45,123,255,0.18);
-    background: rgba(45,123,255,0.08);
-    font-size: 9px;
-    font-weight: 800;
-    font-family: 'Unbounded', sans-serif;
+    border: 1px solid rgba(45,123,255,0.2);
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    font-size: 11px;
+    font-weight: 700;
+    font-family: 'Onest', sans-serif;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.12em;
     color: #2D7BFF;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
+    box-shadow: 0 4px 12px rgba(45,123,255,0.05);
 }
+
 .mkt-hub__badge-dot {
-    width: 5px;
-    height: 5px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
     background: #2D7BFF;
-    box-shadow: 0 0 8px #2D7BFF;
-    animation: pulse-dot 2s infinite;
+    box-shadow: 0 0 10px rgba(45,123,255,0.6);
+    animation: pulse-dot 2s ease-in-out infinite;
 }
 @keyframes pulse-dot {
-    0%,100% { opacity:1; transform: scale(1); }
-    50% { opacity:0.5; transform: scale(0.8); }
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.85); }
 }
 
 .mkt-hub__title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 32px;
-    font-weight: 900;
+    font-family: 'Onest', sans-serif;
+    font-size: 52px;
+    font-weight: 800;
     color: #0F172A;
     letter-spacing: -0.03em;
     line-height: 1.1;
-    margin-bottom: 12px;
+    margin-bottom: 20px;
 }
 
 .mkt-hub__sub {
-    font-size: 13px;
-    color: #334155;
-    max-width: 500px;
+    font-size: 16px;
+    color: #475569;
+    max-width: 620px;
     margin: 0 auto;
     line-height: 1.6;
     font-weight: 400;
@@ -212,243 +222,226 @@ const navExternal = (url) => window.open(url, '_blank');
 .mkt-hub__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 16px;
-    margin-bottom: 16px;
+    gap: 24px;
+    margin-bottom: 24px;
 }
-@media (max-width: 900px) {
-    .mkt-hub__grid { grid-template-columns: repeat(2, 1fr); }
+@media (max-width: 1024px) {
+    .mkt-hub__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
 }
 @media (max-width: 640px) {
     .mkt-hub__grid { grid-template-columns: 1fr; }
+    .mkt-hub { padding: 40px 20px 70px; }
+    .mkt-hub__title { font-size: 36px; }
+    .mkt-hub__header { margin-bottom: 40px; }
 }
 
-/* ───── Cards ───── */
+/* ───── Glassmorphism Cards ───── */
 .mkt-card {
-    background: #FFFFFF;
-    border: 1px solid rgba(45,123,255,0.18);
-    border-radius: 20px;
-    padding: 28px;
+    background: rgba(255, 255, 255, 0.75);
+    border: 1px solid rgba(255, 255, 255, 1);
+    backdrop-filter: blur(20px);
+    border-radius: 28px;
+    padding: 36px;
     cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba(45,123,255,0.05);
+    box-shadow:
+        0 4px 6px rgba(0, 0, 0, 0.02),
+        0 12px 24px rgba(0, 0, 0, 0.03);
+    display: flex;
+    flex-direction: column;
+    min-height: 250px;
 }
+
+/* Card hover overlay */
 .mkt-card::before {
     content: '';
     position: absolute;
     inset: 0;
     opacity: 0;
-    transition: opacity 0.3s;
-    border-radius: 20px;
+    transition: opacity 0.4s;
+    border-radius: 28px;
     pointer-events: none;
+    z-index: 0;
+}
+.mkt-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, transparent, currentColor, transparent);
+    opacity: 0;
+    transition: opacity 0.4s;
 }
 .mkt-card:hover {
-    transform: translateY(-4px);
-    border-color: rgba(45,123,255,0.35);
-    background: #F8FBFF;
-    box-shadow: 0 16px 36px rgba(15,23,42,0.1), 0 0 28px rgba(45,123,255,0.12);
+    transform: translateY(-8px);
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 
+        0 24px 48px rgba(0, 0, 0, 0.06),
+        0 12px 20px rgba(0, 0, 0, 0.04);
 }
 .mkt-card:hover::before { opacity: 1; }
+.mkt-card:hover::after { opacity: 1; }
 
-.mkt-card--blue::before   { background: radial-gradient(circle at top right, rgba(45,123,255,0.1), transparent 60%); }
-.mkt-card--purple::before { background: radial-gradient(circle at top right, rgba(168,85,247,0.1), transparent 60%); }
-.mkt-card--orange::before { background: radial-gradient(circle at top right, rgba(255,122,45,0.1), transparent 60%); }
-.mkt-card--accent::before { background: radial-gradient(circle at top right, rgba(0,212,139,0.1), transparent 60%); }
-.mkt-card--teal::before   { background: radial-gradient(circle at top right, rgba(20,184,166,0.12), transparent 60%); }
+/* Card color variants */
+.mkt-card--blue { color: #2D7BFF; }
+.mkt-card--blue::before { background: radial-gradient(circle at top right, rgba(45,123,255,0.06), transparent 70%); }
+
+.mkt-card--purple { color: #8B5CF6; }
+.mkt-card--purple::before { background: radial-gradient(circle at top right, rgba(139,92,246,0.06), transparent 70%); }
+
+.mkt-card--green { color: #10B981; }
+.mkt-card--green::before { background: radial-gradient(circle at top right, rgba(16,185,129,0.06), transparent 70%); }
+
+.mkt-card--orange { color: #F97316; }
+.mkt-card--orange::before { background: radial-gradient(circle at top right, rgba(249,115,22,0.06), transparent 70%); }
+
+.mkt-card--teal { color: #14B8A6; }
+.mkt-card--teal::before { background: radial-gradient(circle at top right, rgba(20,184,166,0.06), transparent 70%); }
+
+/* Card content */
+.mkt-card > * { position: relative; z-index: 2; }
+
+.mkt-card__glow {
+    position: absolute;
+    top: -40px;
+    right: -40px;
+    width: 160px;
+    height: 160px;
+    background: radial-gradient(circle, currentColor, transparent 70%);
+    opacity: 0.05;
+    pointer-events: none;
+    transition: opacity 0.4s, transform 0.4s;
+    z-index: 1;
+}
+.mkt-card:hover .mkt-card__glow {
+    opacity: 0.12;
+    transform: scale(1.3);
+}
 
 .mkt-card__icon {
-    width: 52px;
-    height: 52px;
-    border-radius: 14px;
+    width: 64px;
+    height: 64px;
+    border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 22px;
-    margin-bottom: 20px;
-    transition: transform 0.3s;
+    font-size: 28px;
+    margin-bottom: 28px;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
+}
+.mkt-card:hover .mkt-card__icon { 
+    transform: scale(1.1) rotate(-5deg); 
 }
-.mkt-card:hover .mkt-card__icon { transform: scale(1.1) rotate(3deg); }
 
 .mkt-card__title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 14px;
+    font-family: 'Onest', sans-serif;
+    font-size: 20px;
     font-weight: 700;
     color: #0F172A;
-    margin-bottom: 8px;
-    line-height: 1.25;
+    margin-bottom: 14px;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
 }
 
 .mkt-card__desc {
-    font-size: 11.5px;
-    color: #334155;
-    line-height: 1.55;
+    font-size: 14px;
+    color: #475569;
+    line-height: 1.7;
     font-weight: 400;
 }
 
 .mkt-card__arrow {
     position: absolute;
-    bottom: 24px;
-    right: 24px;
-    width: 32px;
-    height: 32px;
+    bottom: 32px;
+    right: 32px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
-    background: rgba(45,123,255,0.1);
+    background: rgba(0,0,0,0.03);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--kai-blue);
-    font-size: 13px;
+    color: currentColor;
+    font-size: 16px;
     opacity: 0;
-    transform: translateX(-6px);
-    transition: all 0.3s;
+    transform: translateX(-12px);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .mkt-card:hover .mkt-card__arrow {
     opacity: 1;
     transform: translateX(0);
-}
-
-.mkt-card__accent-glow {
-    position: absolute;
-    top: -30px;
-    right: -30px;
-    width: 120px;
-    height: 120px;
-    background: radial-gradient(circle, rgba(0,212,139,0.15), transparent 70%);
-    pointer-events: none;
+    background: currentColor;
+    color: #FFFFFF;
 }
 
 .mkt-card__tag {
-    display: inline-block;
-    margin-top: 12px;
-    padding: 2px 8px;
-    border-radius: 999px;
-    border: 1px solid rgba(16,185,129,0.25);
-    background: rgba(16,185,129,0.07);
-    color: #10B981;
-    font-size: 8.5px;
-    font-weight: 800;
-    font-family: 'Unbounded', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-/* ───── Targetologist Banner ───── */
-.mkt-banner {
-    background: linear-gradient(135deg, rgba(45,123,255,0.08) 0%, rgba(139,92,246,0.05) 100%);
-    border: 1px solid rgba(45,123,255,0.18);
-    border-radius: 20px;
-    padding: 24px 32px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 24px;
-    cursor: pointer;
-    transition: all 0.3s;
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 4px 16px rgba(45,123,255,0.06);
-}
-.mkt-banner:hover {
-    border-color: rgba(45,123,255,0.6);
-    background: linear-gradient(135deg, rgba(45,123,255,0.18) 0%, rgba(99,51,220,0.12) 100%);
-    transform: translateY(-2px);
-    box-shadow: 0 24px 60px rgba(45,123,255,0.15);
-}
-.mkt-banner__glow {
-    position: absolute;
-    top: 0;
-    right: -60px;
-    width: 300px;
-    height: 200px;
-    background: radial-gradient(circle, rgba(45,123,255,0.15), transparent 70%);
-    pointer-events: none;
-}
-
-.mkt-banner__left {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    flex: 1;
-    min-width: 0;
-}
-
-.mkt-banner__icon {
-    width: 64px;
-    height: 64px;
-    border-radius: 18px;
-    background: rgba(45,123,255,0.15);
-    border: 1px solid rgba(45,123,255,0.3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 28px;
-    color: var(--kai-blue);
-    flex-shrink: 0;
-    transition: transform 0.3s;
-}
-.mkt-banner:hover .mkt-banner__icon { transform: scale(1.08) rotate(3deg); }
-
-.mkt-banner__label {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 6px;
-    font-size: 9px;
-    font-weight: 800;
-    font-family: 'Unbounded', sans-serif;
+    margin-top: auto;
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--kai-blue);
-    margin-bottom: 4px;
+    letter-spacing: 0.08em;
+    align-self: flex-start;
 }
-.mkt-banner__dot {
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    background: var(--kai-blue);
-    animation: pulse-dot 2s infinite;
+.mkt-card__tag--green {
+    border: 1px solid rgba(16,185,129,0.3);
+    background: rgba(16,185,129,0.1);
+    color: #10B981;
+}
+.mkt-card__tag--blue {
+    border: 1px solid rgba(45,123,255,0.3);
+    background: rgba(45,123,255,0.1);
+    color: #2D7BFF;
 }
 
-.mkt-banner__title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 20px;
-    font-weight: 900;
-    color: #0F172A;
-    margin-bottom: 6px;
-    line-height: 1.2;
-}
-
-.mkt-banner__desc {
-    font-size: 12px;
-    color: #334155;
-    line-height: 1.5;
-    max-width: 520px;
-}
-
-.mkt-banner__cta {
-    display: flex;
+.mkt-card__external-badge {
+    display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 10px 20px;
-    border-radius: 10px;
-    background: var(--kai-blue);
-    color: #fff;
-    font-size: 11.5px;
-    font-weight: 800;
-    font-family: 'Unbounded', sans-serif;
-    white-space: nowrap;
-    flex-shrink: 0;
+    margin-top: auto;
+    padding: 8px 14px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(15, 23, 42, 0.1);
+    color: #475569;
+    font-size: 11px;
+    font-weight: 600;
+    align-self: flex-start;
     transition: all 0.3s;
 }
-.mkt-banner:hover .mkt-banner__cta {
-    background: #1a6bff;
-    box-shadow: 0 0 24px rgba(45,123,255,0.45);
-    transform: translateX(4px);
+.mkt-card:hover .mkt-card__external-badge {
+    background: #0F172A;
+    color: #FFFFFF;
+    border-color: #0F172A;
 }
 
-@media (max-width: 768px) {
-    .mkt-banner { flex-direction: column; align-items: flex-start; }
-    .mkt-banner__cta { align-self: stretch; justify-content: center; }
-    .mkt-hub { padding: 32px 16px 60px; }
+/* Card entrance animation */
+@keyframes card-enter {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
+.mkt-card {
+    animation: card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+.mkt-card:nth-child(1) { animation-delay: 0.05s; }
+.mkt-card:nth-child(2) { animation-delay: 0.1s; }
+.mkt-card:nth-child(3) { animation-delay: 0.15s; }
+.mkt-card:nth-child(4) { animation-delay: 0.2s; }
+.mkt-card:nth-child(5) { animation-delay: 0.25s; }
+.mkt-card:nth-child(6) { animation-delay: 0.3s; }
 </style>
diff --git a/src/views/pages/marketing/MarketingStrategyV3.vue b/src/views/pages/marketing/MarketingStrategyV3.vue
index fa8754e..1ddc3a5 100644
--- a/src/views/pages/marketing/MarketingStrategyV3.vue
+++ b/src/views/pages/marketing/MarketingStrategyV3.vue
@@ -783,17 +783,6 @@ onUnmounted(() => {
                     </div>
                 </div>
 
-                <div class="quick-actions-bar">
-                    <Button label="Опубликовать в Facebook" icon="pi pi-facebook"
-                            class="prime-action-btn fb"
-                            :loading="isAutoPublishing"
-                            @click="autoPublishFirstPost" />
-
-                    <Button label="Запустить ИИ Таргет" icon="pi pi-bolt" 
-                            class="prime-action-btn target" 
-                            @click="openTargetingWizard" />
-                </div>
-
                 <!-- Weekly Sprints -->
                 <div v-if="strategyData.weeklyPlans?.length" class="sprints-section">
                     <div class="section-title-row">
@@ -902,31 +891,24 @@ onUnmounted(() => {
                                             @click="handlePublishNow(post)" />
                                     <div v-else class="card-status-label published"><i class="pi pi-check"></i> OK</div>
                                 </div>
-
-                                <button class="card-target-btn" @click="launchPostTarget(post)">
-                                    <i class="pi pi-bolt"></i> Запустить таргет
-                                </button>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <!-- Actions Footer -->
-                <div class="results-footer-bar">
-                    <Button label="Сохранить как PDF" icon="pi pi-file-pdf" class="footer-btn pdf-btn" />
-                    
-                    <Button
-                        v-if="!isAutoPostingStarted"
-                        class="footer-btn main-run-btn"
-                        @click="handleStartStrategy"
-                        :loading="startingStrategy"
-                    >
-                        <i class="pi pi-rocket"></i>
-                        <span>Активировать стратегию продвижения</span>
-                    </Button>
-                    <div v-else class="footer-success-status">
-                        <i class="pi pi-check-circle"></i>
-                        <span>Стратегия успешно активирована</span>
+                <!-- Bottom Action: Launch Targeting -->
+                <div class="bottom-action-section">
+                    <div class="bottom-action-card">
+                        <div class="bottom-action-icon">
+                            <i class="pi pi-bullseye"></i>
+                        </div>
+                        <div class="bottom-action-text">
+                            <h4>Готовы запустить рекламу?</h4>
+                            <p>ИИ создаст аудитории, оптимизирует бюджет и запустит рекламу в Facebook, Instagram и TikTok</p>
+                        </div>
+                        <Button label="Запустить ИИ Таргет" icon="pi pi-rocket"
+                                class="bottom-action-btn"
+                                @click="openTargetingWizard" />
                     </div>
                 </div>
             </div>
@@ -1932,6 +1914,243 @@ onUnmounted(() => {
     border-radius: 12px;
 }
 
+/* ───── WEEKLY SPRINTS (План реализации по неделям) ───── */
+.sprints-section {
+    margin-top: 48px;
+    margin-bottom: 48px;
+}
+
+.sprints-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.sprint-item {
+    background: var(--kai-bg2);
+    border: 1px solid var(--kai-border);
+    border-radius: 16px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.sprint-item:hover {
+    border-color: var(--kai-blue);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.sprint-item.is-active {
+    border-color: var(--kai-blue);
+    background: rgba(var(--kai-blue-rgb), 0.03);
+}
+
+.sprint-summary {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 20px 24px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+}
+
+.sprint-summary:hover {
+    background: rgba(var(--kai-blue-rgb), 0.05);
+}
+
+.week-num {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--kai-blue), var(--kai-green));
+    color: #fff;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Unbounded', sans-serif;
+    font-size: 16px;
+    font-weight: 800;
+    flex-shrink: 0;
+}
+
+.week-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.week-title {
+    font-family: 'Unbounded', sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--kai-txt);
+    margin: 0 0 8px 0;
+}
+
+.week-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.week-tag {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--kai-txt2);
+    background: rgba(var(--kai-blue-rgb), 0.08);
+    border: 1px solid rgba(var(--kai-blue-rgb), 0.15);
+    padding: 4px 10px;
+    border-radius: 6px;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+}
+
+.week-tag:hover {
+    background: rgba(var(--kai-blue-rgb), 0.15);
+    border-color: var(--kai-blue);
+    color: var(--kai-blue);
+}
+
+.chevron {
+    font-size: 14px;
+    color: var(--kai-txt3);
+    transition: transform 0.3s ease;
+    flex-shrink: 0;
+}
+
+/* Expand animation */
+.expand-enter-active,
+.expand-leave-active {
+    transition: all 0.3s ease;
+    max-height: 500px;
+    overflow: hidden;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+    max-height: 0;
+    opacity: 0;
+}
+
+.sprint-details {
+    padding: 0 24px 24px;
+    border-top: 1px solid var(--kai-border);
+}
+
+.details-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    padding-top: 20px;
+}
+
+.detail-col label {
+    display: block;
+    font-size: 10px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--kai-txt3);
+    margin-bottom: 12px;
+}
+
+.themes-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.cloud-tag {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--kai-txt2);
+    background: rgba(var(--kai-green-rgb), 0.08);
+    border: 1px solid rgba(var(--kai-green-rgb), 0.15);
+    padding: 6px 12px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+.cloud-tag:hover {
+    background: rgba(var(--kai-green-rgb), 0.15);
+    border-color: var(--kai-green);
+    color: var(--kai-green);
+}
+
+/* ───── BOTTOM ACTION (Запуск таргета) ───── */
+.bottom-action-section {
+    margin-top: 64px;
+    margin-bottom: 32px;
+}
+
+.bottom-action-card {
+    background: linear-gradient(135deg, rgba(var(--kai-blue-rgb), 0.08) 0%, rgba(var(--kai-green-rgb), 0.08) 100%);
+    border: 1px solid rgba(var(--kai-blue-rgb), 0.2);
+    border-radius: 24px;
+    padding: 40px;
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    transition: all 0.3s ease;
+}
+
+.bottom-action-card:hover {
+    border-color: var(--kai-blue);
+    box-shadow: 0 12px 40px rgba(var(--kai-blue-rgb), 0.15);
+    transform: translateY(-4px);
+}
+
+.bottom-action-icon {
+    width: 72px;
+    height: 72px;
+    background: linear-gradient(135deg, var(--kai-blue), var(--kai-green));
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #fff;
+    flex-shrink: 0;
+    box-shadow: 0 8px 24px rgba(var(--kai-blue-rgb), 0.3);
+}
+
+.bottom-action-text {
+    flex: 1;
+}
+
+.bottom-action-text h4 {
+    font-family: 'Unbounded', sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--kai-txt);
+    margin: 0 0 8px 0;
+}
+
+.bottom-action-text p {
+    font-size: 13px;
+    color: var(--kai-txt2);
+    line-height: 1.6;
+    margin: 0;
+}
+
+.bottom-action-btn {
+    font-size: 14px !important;
+    font-weight: 800 !important;
+    padding: 14px 32px !important;
+    border-radius: 16px !important;
+    background: linear-gradient(135deg, var(--kai-blue), var(--kai-green)) !important;
+    border: none !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: 0 8px 24px rgba(var(--kai-blue-rgb), 0.3) !important;
+    transition: all 0.3s ease !important;
+    flex-shrink: 0;
+}
+
+.bottom-action-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 32px rgba(var(--kai-blue-rgb), 0.4) !important;
+}
+
 /* ───── POST CALENDAR ───── */
 .calendar-section { margin-top: 48px; }
 .calendar-header { margin-bottom: 24px; border-bottom: 1px solid var(--kai-border); padding-bottom: 16px; }
@@ -1962,13 +2181,23 @@ onUnmounted(() => {
 
 .post-media {
     position: relative;
-    aspect-ratio: 4/5;
-    background: #000;
+    min-height: 200px;
+    max-height: 400px;
+    background: var(--kai-bg3);
     cursor: pointer;
     overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.preview-obj { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
+.preview-obj {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: transform 0.6s;
+    background: transparent;
+}
 .post-card:hover .preview-obj { transform: scale(1.05); }
 
 .preview-overlay {
@@ -2042,21 +2271,6 @@ onUnmounted(() => {
 
 .card-status-label { font-size: 9px; font-weight: 900; color: var(--kai-green); display: flex; align-items: center; gap: 4px; text-transform: uppercase; }
 
-.card-target-btn {
-    width: 100%; margin-top: 12px; background: var(--kai-bg3); border: 1px solid var(--kai-border);
-    padding: 10px; border-radius: 12px; color: var(--kai-txt2); font-size: 10px; font-weight: 800;
-    text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px;
-    transition: all 0.2s; cursor: pointer;
-}
-.card-target-btn:hover { background: var(--kai-blue); color: #fff; border-color: var(--kai-blue); }
-
-/* ───── FOOTER ───── */
-.results-footer-bar { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--kai-border); display: flex; gap: 16px; }
-.footer-btn { border-radius: 18px !important; font-family: 'Unbounded', sans-serif !important; text-transform: uppercase; font-size: 11px !important; font-weight: 800 !important; padding: 16px 32px !important; }
-.pdf-btn { background: var(--kai-bg2) !important; border: 1px solid var(--kai-border) !important; color: var(--kai-txt) !important; }
-.main-run-btn { flex: 1; background: linear-gradient(135deg, var(--kai-green), #10b981) !important; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3); border: none !important; }
-.footer-success-status { flex: 1; background: rgba(var(--kai-green-rgb), 0.1); border: 1px solid var(--kai-green); border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--kai-green); font-weight: 800; text-transform: uppercase; font-size: 11px; }
-
 /* ───── MODAL ───── */
 .premium-modal { 
     :deep(.p-dialog-content) { background: transparent !important; }
@@ -2084,7 +2298,14 @@ onUnmounted(() => {
 
 @media (max-width: 768px) {
     .strategy-page { padding: 16px; }
-    .results-footer-bar { flex-direction: column; }
     .posts-grid { grid-template-columns: 1fr; }
+    .bottom-action-card {
+        flex-direction: column;
+        text-align: center;
+        padding: 32px 24px;
+    }
+    .bottom-action-btn {
+        width: 100% !important;
+    }
 }
 </style>
diff --git a/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue b/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue
index 03d231c..9c995b3 100644
--- a/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue
+++ b/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue
@@ -362,7 +362,7 @@ onMounted(() => {
                                 {{ sm(statusRef).label }}
                             </div>
                         </div>
-                        <div class="flex flex-wrap items-center gap-4 text-sm" style="color: var(--kai-txt2);">
+                        <div class="flex flex-wrap items-center gap-4 text-sm" style="color: #64748B;">
                             <span><i class="pi pi-calendar mr-1"></i> {{ formatDateTime(campaign.createdAt) }}</span>
                             <span v-if="campaign.objective"><i class="pi pi-bullseye mr-1"></i> {{ objectiveLabel(campaign.objective) }}</span>
                             <span class="flex items-center gap-2">
@@ -381,37 +381,6 @@ onMounted(() => {
                             <i :class="publishingCampaign ? 'pi pi-spin pi-spinner' : 'pi pi-facebook'"></i>
                             Запустить стратегию
                         </button>
-
-                        <button
-                            class="mkt-banner__cta"
-                            style="border:none;"
-                            :disabled="launchTargetDisabled"
-                            :style="{ opacity: launchTargetDisabled ? 0.6 : 1 }"
-                            @click="launchTarget"
-                        >
-                            <i :class="launchingTarget ? 'pi pi-spin pi-spinner' : (launchTargetDisabled ? 'pi pi-check' : 'pi pi-play')"></i>
-                            {{ launchTargetLabel }}
-                        </button>
-                        <template v-if="statusRef === 'ACTIVE'">
-                            <button class="wiz-btn-sec" style="padding: 10px 20px;" @click="pauseCampaign">
-                                <i class="pi pi-pause"></i> Пауза
-                            </button>
-                            <button class="mkt-banner__cta" style="border:none;" @click="openInMeta">
-                                Meta Ads <i class="pi pi-external-link"></i>
-                            </button>
-                        </template>
-
-                        <button v-else-if="statusRef === 'PAUSED'" class="mkt-banner__cta" style="border:none; background: var(--kai-green);" @click="resumeCampaign">
-                            <i class="pi pi-play"></i> Возобновить
-                        </button>
-
-                        <button v-else-if="statusRef === 'FAILED'" class="mkt-banner__cta" style="border:none; background: var(--kai-red);" @click="retryCampaign">
-                            <i class="pi pi-refresh"></i> Повторить запуск
-                        </button>
-
-                        <button v-if="statusRef === 'ACTIVE'" class="wiz-btn-sec" style="padding: 10px 20px;" @click="syncInsights" :disabled="actionLoading">
-                            <i :class="actionLoading ? 'pi pi-spin pi-spinner' : 'pi pi-sync'"></i>
-                        </button>
                     </div>
                 </div>
 
@@ -427,8 +396,8 @@ onMounted(() => {
                 </div>
 
                 <div v-else-if="statusRef === 'ACTIVE'" class="mkt-card" style="margin-bottom: 32px; padding: 12px 24px; border-color: rgba(0,212,139,0.3); background: rgba(0,212,139,0.05); display: flex; align-items: center; gap: 12px;">
-                    <i class="pi pi-check-circle" style="color: var(--kai-green); font-size: 20px;"></i>
-                    <span style="font-weight: 700; color: var(--kai-green);">Кампания успешно запущена {{ formatDateTime(launchTimestamp) }}</span>
+                    <i class="pi pi-check-circle" style="color: #10B981; font-size: 20px;"></i>
+                    <span style="font-weight: 700; color: #10B981;">Кампания успешно запущена {{ formatDateTime(launchTimestamp) }}</span>
                 </div>
 
                 <!-- KPI GRID -->
@@ -453,21 +422,21 @@ onMounted(() => {
 
                 <!-- MAIN CONTENT -->
                 <div class="mkt-card td-main-tabs" style="padding: 12px;">
-                    <TabView v-model:activeIndex="activeTab">
-                        <TabPanel header="Метрики" value="0">
-                            <CampaignMetrics :performance-metrics="campaign.performanceMetrics" :predicted-metrics="predictionMetrics" />
+                    <TabView v-model:activeIndex="activeTab" :lazy="true">
+                        <TabPanel header="Метрики">
+                            <CampaignMetrics v-if="activeTab === 0" :performance-metrics="campaign.performanceMetrics" :predicted-metrics="predictionMetrics" />
                         </TabPanel>
-                        <TabPanel header="ИИ Предсказание" value="1">
-                            <CampaignPrediction :campaign-id="campaignId" />
+                        <TabPanel header="ИИ Предсказание">
+                            <CampaignPrediction v-if="activeTab === 1" :campaign-id="campaignId" />
                         </TabPanel>
-                        <TabPanel header="Инсайты" value="2">
-                            <CampaignInsights :campaign-id="campaignId" />
+                        <TabPanel header="Инсайты">
+                            <CampaignInsights v-if="activeTab === 2" :campaign-id="campaignId" />
                         </TabPanel>
-                        <TabPanel header="Аудитория" value="3">
-                            <div class="grid gap-6 md:grid-cols-2 p-4">
+                        <TabPanel header="Аудитория">
+                            <div v-if="activeTab === 3" class="grid gap-6 md:grid-cols-2 p-4">
                                 <div class="mkt-card" style="background: rgba(45,123,255,0.02);">
                                     <h3 class="wiz-label" style="opacity:0.8"><i class="pi pi-users"></i> Профиль аудитории</h3>
-                                    <div class="space-y-3 pt-4 text-sm" style="color: var(--kai-txt2);">
+                                    <div class="space-y-3 pt-4 text-sm" style="color: #64748B;">
                                         <div><span class="info-label">Сегмент</span> {{ audienceProfile?.primarySegment || '—' }}</div>
                                         <div class="grid grid-cols-2 gap-4">
                                             <div><span class="info-label">Возраст</span> {{ audienceProfile?.ageRange || '—' }}</div>
@@ -479,7 +448,7 @@ onMounted(() => {
                                 </div>
                                 <div class="mkt-card" style="background: rgba(45,123,255,0.02);">
                                     <h3 class="wiz-label" style="opacity:0.8"><i class="pi pi-th-large"></i> Плейсменты и форматы</h3>
-                                    <div class="space-y-3 pt-4 text-sm" style="color: var(--kai-txt2);">
+                                    <div class="space-y-3 pt-4 text-sm" style="color: #64748B;">
                                         <div><span class="info-label">Рекомендованные площадки</span> {{ formatArrayField(recommendation?.recommendedPlacements ?? null) }}</div>
                                         <div><span class="info-label">Форматы</span> {{ formatArrayField(recommendation?.recommendedAdFormats ?? null) }}</div>
                                         <div><span class="info-label">Тип таргетинга</span> {{ targetingTypeLabel(recommendation?.recommendedType ?? null) }}</div>
@@ -487,8 +456,8 @@ onMounted(() => {
                                 </div>
                             </div>
                         </TabPanel>
-                        <TabPanel header="Структура" value="4">
-                            <CampaignAdSets :ad-sets="campaign.adSets" />
+                        <TabPanel header="Структура">
+                            <CampaignAdSets v-if="activeTab === 4" :ad-sets="campaign.adSets" />
                         </TabPanel>
                     </TabView>
                 </div>
diff --git a/src/views/pages/marketing/targetologist/CampaignWizard.vue b/src/views/pages/marketing/targetologist/CampaignWizard.vue
index 8ec1e54..1658dad 100644
--- a/src/views/pages/marketing/targetologist/CampaignWizard.vue
+++ b/src/views/pages/marketing/targetologist/CampaignWizard.vue
@@ -98,10 +98,10 @@ const isError = ref(false);
 const errorMessage = ref('');
 
 const orchestratorPhases = [
-    { code: 'ORCHESTRATING', label: 'ИИ рассчитывает сегменты таргета...', icon: 'pi pi-microchip-ai' },
-    { code: 'MAPPING', label: 'Собираем группы объявлений по стратегии...', icon: 'pi pi-sitemap' },
-    { code: 'PUBLISHING', label: 'Публикуем в Meta/TikTok...', icon: 'pi pi-send' },
-    { code: 'ACTIVE', label: 'Готово: кампания запущена.', icon: 'pi pi-check-circle' }
+    { code: 'ORCHESTRATING', label: 'Анализ аудитории и создание сегментов', icon: 'pi pi-microchip-ai' },
+    { code: 'MAPPING', label: 'Формирование групп объявлений', icon: 'pi pi-sitemap' },
+    { code: 'PUBLISHING', label: 'Запуск рекламы в Facebook, Instagram и TikTok', icon: 'pi pi-send' },
+    { code: 'ACTIVE', label: 'Кампания успешно запущена', icon: 'pi pi-check-circle' }
 ];
 
 const startGeneration = async () => {
@@ -295,7 +295,7 @@ const togglePlat = (val) => {
                                 <div class="wiz-check"><i class="pi pi-check" v-if="selectedPlatforms.includes('FB_IG')"></i></div>
                             </div>
                             <div class="wiz-platform" :class="{ 'wiz-platform--active': selectedPlatforms.includes('TIKTOK') }" @click="togglePlat('TIKTOK')">
-                                <i class="pi pi-tiktok" style="color: #fff;"></i>
+                                <i class="pi pi-tiktok" style="color: #010101;"></i>
                                 <span class="font-bold">TikTok</span>
                                 <div class="wiz-check"><i class="pi pi-check" v-if="selectedPlatforms.includes('TIKTOK')"></i></div>
                             </div>
@@ -332,8 +332,8 @@ const togglePlat = (val) => {
                         <div class="wiz-loading-orb"></div>
                         
                         <div class="text-center mb-10 relative z-10">
-                            <div class="wiz-loading-icon"><i class="pi pi-bolt"></i></div>
-                            <h2 class="wiz-loading-title">Запуск Машины</h2>
+                            <div class="wiz-loading-icon"><i class="pi pi-sparkles"></i></div>
+                            <h2 class="wiz-loading-title">Запуск рекламной кампании</h2>
                         </div>
 
                         <div v-if="isError" class="wiz-error">
diff --git a/src/views/pages/marketing/targetologist/TargetologistDashboard.vue b/src/views/pages/marketing/targetologist/TargetologistDashboard.vue
index 881d05a..47eee0c 100644
--- a/src/views/pages/marketing/targetologist/TargetologistDashboard.vue
+++ b/src/views/pages/marketing/targetologist/TargetologistDashboard.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { onMounted, ref } from 'vue';
-import { useTargeting } from './composables/useTargeting';
 import TargetingService from '@/service/TargetingService';
-import { useToast } from 'primevue/usetoast';
 import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
+import { onMounted, ref } from 'vue';
 import OAuthConnectionWidget from './components/OAuthConnectionWidget.vue';
+import { useTargeting } from './composables/useTargeting';
 
 const { state, fetchCampaigns, connectAccount, formatCurrency } = useTargeting();
 const toast = useToast();
@@ -17,12 +17,12 @@ onMounted(async () => {
 });
 
 const STATUS_META = {
-    ACTIVE:     { color: '#10B981',  bg: 'rgba(16,185,129,0.1)',  border: 'rgba(16,185,129,0.28)',  icon: 'pi pi-bolt',                 label: 'АКТИВНА',   accent: '#10B981' },
-    PAUSED:     { color: '#F59E0B',  bg: 'rgba(245,158,11,0.1)',  border: 'rgba(245,158,11,0.28)',  icon: 'pi pi-pause',                label: 'НА ПАУЗЕ ', accent: '#F59E0B' },
-    FAILED:     { color: '#EF4444',  bg: 'rgba(239,68,68,0.1)',   border: 'rgba(239,68,68,0.28)',   icon: 'pi pi-exclamation-triangle', label: 'ОШИБКА',    accent: '#EF4444' },
-    GENERATING: { color: '#2D7BFF',  bg: 'rgba(45,123,255,0.1)',  border: 'rgba(45,123,255,0.28)',  icon: 'pi pi-spin pi-cog',          label: 'ЗАПУСК',    accent: '#2D7BFF' },
+    ACTIVE:     { color: '#10B981',  bg: 'rgba(16,185,129,0.1)',  border: 'rgba(16,185,129,0.25)',  icon: 'pi pi-bolt',                 label: 'АКТИВНА',   accent: '#10B981' },
+    PAUSED:     { color: '#F59E0B',  bg: 'rgba(245,158,11,0.1)',  border: 'rgba(245,158,11,0.25)',  icon: 'pi pi-pause',                label: 'НА ПАУЗЕ',  accent: '#F59E0B' },
+    FAILED:     { color: '#EF4444',  bg: 'rgba(239,68,68,0.1)',   border: 'rgba(239,68,68,0.25)',   icon: 'pi pi-exclamation-triangle', label: 'ОШИБКА',    accent: '#EF4444' },
+    GENERATING: { color: '#2D7BFF',  bg: 'rgba(45,123,255,0.1)',  border: 'rgba(45,123,255,0.25)',  icon: 'pi pi-spin pi-cog',          label: 'ЗАПУСК',    accent: '#2D7BFF' },
 };
-const sm = s => STATUS_META[(s||'').toUpperCase()] || { color: '#64748B', bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.2)', icon: 'pi pi-circle', label: s || '—', accent: '#64748B' };
+const sm = s => STATUS_META[(s||'').toUpperCase()] || { color: '#64748B', bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.15)', icon: 'pi pi-circle', label: s || '—', accent: '#64748B' };
 
 const totalBudget = () => campaigns.value.reduce((sum, c) => sum + (c.budgetKzt || 0), 0);
 const totalSpent  = () => campaigns.value.reduce((sum, c) => sum + (c.spentKzt || 0), 0);
@@ -54,7 +54,7 @@ const filteredCampaigns = () => campaigns.value.filter(c =>
     <div class="td-page">
         <Toast />
         <div class="td-glow td-glow--blue"></div>
-        <div class="td-glow td-glow--purple"></div>
+        <div class="td-glow td-glow--green"></div>
 
         <div class="td-inner">
 
@@ -85,47 +85,47 @@ const filteredCampaigns = () => campaigns.value.filter(c =>
             <!-- KPI CARDS -->
             <div class="td-kpi-grid">
                 <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(45,123,255,0.12); color: #2D7BFF;">
+                    <div class="td-kpi-card__icon" style="background: rgba(45,123,255,0.1); color: #2D7BFF;">
                         <i class="pi pi-list"></i>
                     </div>
                     <div class="td-kpi-card__body">
                         <div class="td-kpi-card__num">{{ campaigns.length }}</div>
                         <div class="td-kpi-card__label">Всего кампаний</div>
                     </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(45,123,255,0.06);"></div>
+                    <div class="td-kpi-card__accent" style="background: rgba(45,123,255,0.05);"></div>
                 </div>
 
                 <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(16,185,129,0.12); color: #10B981;">
+                    <div class="td-kpi-card__icon" style="background: rgba(16,185,129,0.1); color: #10B981;">
                         <i class="pi pi-bolt"></i>
                     </div>
                     <div class="td-kpi-card__body">
                         <div class="td-kpi-card__num" style="color: #10B981;">{{ activeCnt() }}</div>
                         <div class="td-kpi-card__label">Активно сейчас</div>
                     </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(16,185,129,0.06);"></div>
+                    <div class="td-kpi-card__accent" style="background: rgba(16,185,129,0.05);"></div>
                 </div>
 
                 <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(249,115,22,0.12); color: #F97316;">
+                    <div class="td-kpi-card__icon" style="background: rgba(249,115,22,0.1); color: #F97316;">
                         <i class="pi pi-dollar"></i>
                     </div>
                     <div class="td-kpi-card__body">
                         <div class="td-kpi-card__num">{{ formatCurrency(totalSpent()) }}</div>
                         <div class="td-kpi-card__label">Потрачено</div>
                     </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(249,115,22,0.06);"></div>
+                    <div class="td-kpi-card__accent" style="background: rgba(249,115,22,0.05);"></div>
                 </div>
 
                 <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(139,92,246,0.12); color: #8B5CF6;">
+                    <div class="td-kpi-card__icon" style="background: rgba(139,92,246,0.1); color: #8B5CF6;">
                         <i class="pi pi-wallet"></i>
                     </div>
                     <div class="td-kpi-card__body">
                         <div class="td-kpi-card__num">{{ formatCurrency(totalBudget()) }}</div>
                         <div class="td-kpi-card__label">Общий лимит</div>
                     </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(139,92,246,0.06);"></div>
+                    <div class="td-kpi-card__accent" style="background: rgba(139,92,246,0.05);"></div>
                 </div>
             </div>
 
@@ -298,92 +298,75 @@ const filteredCampaigns = () => campaigns.value.filter(c =>
 </template>
 
 <style scoped>
-/* ──────────────────── PAGE ──────────────────── */
+/* ──────────────────── PAGE (СВЕТЛАЯ ТЕМА, КАК В МАРКЕТИНГЕ) ──────────────────── */
 .td-page {
-    background: #F5F8FF;
-    background-image:
-        radial-gradient(at 10% 0%, rgba(45,123,255,0.07) 0px, transparent 50%),
-        radial-gradient(at 90% 100%, rgba(139,92,246,0.05) 0px, transparent 50%);
+    background: linear-gradient(180deg, #F8FAFF 0%, #F0F4FF 100%);
     min-height: 100vh;
     font-family: 'Onest', sans-serif;
     padding: 40px 24px 100px;
     position: relative;
     overflow-x: hidden;
+    color: #0F172A;
 }
+
 .td-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
-.td-glow--blue  { top: -180px; right: -120px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(45,123,255,0.08) 0%, transparent 70%); }
-.td-glow--purple{ bottom: -100px; left: -80px;  width: 400px; height: 400px; background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 70%); }
+.td-glow--blue  { top: -180px; right: -120px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(45,123,255,0.08) 0%, transparent 70%); animation: float-glow 20s ease-in-out infinite; }
+.td-glow--green { bottom: -100px; left: -80px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, transparent 70%); animation: float-glow 25s ease-in-out infinite reverse; }
+@keyframes float-glow { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.1); } }
+
 .td-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
 
 /* ──────────────────── HEADER ──────────────────── */
 .td-header { margin-bottom: 40px; }
-.td-header__top {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 20px;
-}
+.td-header__top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
+
 .td-back-btn {
     width: 40px; height: 40px; border-radius: 12px;
-    border: 1px solid rgba(45,123,255,0.2); background: #fff; color: #64748B;
+    border: 1px solid rgba(45,123,255,0.15); background: #fff; color: #64748B;
     display: flex; align-items: center; justify-content: center; cursor: pointer;
-    transition: all 0.2s; box-shadow: 0 2px 8px rgba(45,123,255,0.06); flex-shrink: 0;
+    transition: all 0.2s; box-shadow: 0 2px 8px rgba(45,123,255,0.05); flex-shrink: 0;
 }
-.td-back-btn:hover { background: rgba(45,123,255,0.06); color: #2D7BFF; border-color: rgba(45,123,255,0.35); transform: translateX(-2px); }
+.td-back-btn:hover { background: rgba(45,123,255,0.06); color: #2D7BFF; border-color: rgba(45,123,255,0.3); transform: translateX(-2px); }
 
 .td-badge {
     display: inline-flex; align-items: center; gap: 7px;
     padding: 5px 14px; border-radius: 999px;
-    border: 1px solid rgba(45,123,255,0.25); background: rgba(45,123,255,0.07);
-    font-size: 10px; font-weight: 800; font-family: 'Unbounded', sans-serif;
+    border: 1px solid rgba(45,123,255,0.2);
+    background: linear-gradient(135deg, rgba(45,123,255,0.08) 0%, rgba(45,123,255,0.04) 100%);
+    font-size: 10px; font-weight: 700; font-family: 'Onest', sans-serif;
     text-transform: uppercase; letter-spacing: 0.08em; color: #2D7BFF;
 }
 .td-badge__dot {
     width: 6px; height: 6px; border-radius: 50%; background: #2D7BFF;
     box-shadow: 0 0 8px rgba(45,123,255,0.5); animation: td-blink 2s infinite;
 }
-@keyframes td-blink { 0%,100%{opacity:1}50%{opacity:0.4} }
+@keyframes td-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
+
+.td-header__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
 
-.td-header__main {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 20px;
-    flex-wrap: wrap;
-}
 .td-title {
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     font-size: clamp(22px, 3.5vw, 32px);
     font-weight: 900;
     color: #0F172A;
     letter-spacing: -0.02em;
     line-height: 1.15;
-    margin-bottom: 8px;
-}
-.td-subtitle {
-    font-size: 14px;
-    color: #64748B;
-    line-height: 1.55;
-    max-width: 480px;
+    margin: 0 0 8px 0;
 }
+.td-subtitle { font-size: 14px; color: #64748B; line-height: 1.55; max-width: 480px; margin: 0; }
 
 .td-launch-btn {
     display: inline-flex; align-items: center; gap: 9px;
     padding: 13px 24px; border-radius: 14px;
     background: #2D7BFF; color: #fff;
-    font-size: 13px; font-weight: 700; font-family: 'Unbounded', sans-serif;
+    font-size: 13px; font-weight: 700; font-family: 'Onest', sans-serif;
     border: none; cursor: pointer; transition: all 0.3s;
-    box-shadow: 0 6px 24px rgba(45,123,255,0.35); white-space: nowrap; flex-shrink: 0;
+    box-shadow: 0 6px 24px rgba(45,123,255,0.3); white-space: nowrap; flex-shrink: 0;
 }
-.td-launch-btn:hover { background: #1a6bff; box-shadow: 0 10px 36px rgba(45,123,255,0.5); transform: translateY(-3px); }
+.td-launch-btn:hover { background: #1a6bff; box-shadow: 0 10px 36px rgba(45,123,255,0.4); transform: translateY(-3px); }
 
 /* ──────────────────── KPI GRID ──────────────────── */
-.td-kpi-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 14px;
-    margin-bottom: 40px;
-}
+.td-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
 @media (max-width: 900px) { .td-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 480px) { .td-kpi-grid { grid-template-columns: 1fr; } }
 
@@ -391,100 +374,73 @@ const filteredCampaigns = () => campaigns.value.filter(c =>
     background: #fff;
     border: 1px solid rgba(45,123,255,0.12);
     border-radius: 18px;
-    padding: 22px 20px;
+    padding: 24px;
     position: relative;
     overflow: hidden;
     transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
-    box-shadow: 0 2px 10px rgba(45,123,255,0.05);
-}
-.td-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(45,123,255,0.12); }
-.td-kpi-card__accent {
-    position: absolute;
-    top: 0; right: 0;
-    width: 80px; height: 80px;
-    border-radius: 0 18px 0 80px;
+    box-shadow: 0 4px 12px rgba(45,123,255,0.05);
 }
+.td-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(45,123,255,0.1); border-color: rgba(45,123,255,0.25); }
+.td-kpi-card__accent { position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-radius: 0 18px 0 80px; }
 .td-kpi-card__icon {
-    width: 44px; height: 44px; border-radius: 12px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 18px; margin-bottom: 16px; position: relative; z-index: 1;
-    transition: transform 0.3s;
+    width: 48px; height: 48px; border-radius: 14px;
+    display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;
+    position: relative; z-index: 1; transition: transform 0.3s;
 }
-.td-kpi-card:hover .td-kpi-card__icon { transform: scale(1.12) rotate(5deg); }
+.td-kpi-card:hover .td-kpi-card__icon { transform: scale(1.1); }
 .td-kpi-card__body { position: relative; z-index: 1; }
-.td-kpi-card__num {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 22px; font-weight: 900; color: #0F172A; line-height: 1; margin-bottom: 6px;
-}
-.td-kpi-card__label {
-    font-size: 10px; color: #94A3B8; font-weight: 700;
-    text-transform: uppercase; letter-spacing: 0.07em;
-}
+.td-kpi-card__num { font-family: 'Onest', sans-serif; font-size: 24px; font-weight: 900; color: #0F172A; line-height: 1; margin-bottom: 6px; }
+.td-kpi-card__label { font-size: 10px; color: #94A3B8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
 
 /* ──────────────────── SECTION HEADER ──────────────────── */
 .td-section-header { margin-bottom: 16px; }
 .td-section-label {
     display: flex; align-items: center; gap: 8px;
-    font-size: 11px; font-weight: 800; font-family: 'Unbounded', sans-serif;
-    text-transform: uppercase; letter-spacing: 0.1em; color: #94A3B8;
+    font-size: 11px; font-weight: 700; font-family: 'Onest', sans-serif;
+    text-transform: uppercase; letter-spacing: 0.1em; color: #64748B;
 }
 .td-section-label i { font-size: 12px; }
 
 /* ──────────────────── INTEGRATIONS ──────────────────── */
-.td-integrations-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 14px;
-    margin-bottom: 40px;
-}
+.td-integrations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
 @media (max-width: 640px) { .td-integrations-grid { grid-template-columns: 1fr; } }
 
 /* ──────────────────── CAMPAIGNS HEADER ──────────────────── */
-.td-campaigns-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 16px;
-    flex-wrap: wrap;
-}
+.td-campaigns-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
 .td-search { position: relative; }
-.td-search__icon {
-    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
-    color: #94A3B8; font-size: 13px; pointer-events: none;
-}
+.td-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 13px; pointer-events: none; }
 .td-search__input {
     padding: 10px 38px 10px 42px; border-radius: 12px;
-    background: #fff; border: 1px solid rgba(45,123,255,0.16); color: #0F172A;
+    background: #fff; border: 1px solid rgba(45,123,255,0.15); color: #0F172A;
     font-size: 13.5px; font-family: 'Onest', sans-serif; outline: none;
-    width: 280px; transition: all 0.2s; box-shadow: 0 2px 8px rgba(45,123,255,0.05);
+    width: 280px; transition: all 0.2s; box-shadow: 0 2px 8px rgba(45,123,255,0.04);
 }
-.td-search__input:focus { border-color: rgba(45,123,255,0.4); width: 320px; box-shadow: 0 0 0 3px rgba(45,123,255,0.08); }
+.td-search__input:focus { border-color: #2D7BFF; width: 320px; box-shadow: 0 0 0 3px rgba(45,123,255,0.1); }
 .td-search__input::placeholder { color: #94A3B8; }
 .td-search__clear {
     position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
     width: 22px; height: 22px; border-radius: 50%; border: none;
-    background: rgba(100,116,139,0.12); color: #64748B;
+    background: rgba(100,116,139,0.1); color: #64748B;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer; font-size: 10px; transition: all 0.2s;
 }
-.td-search__clear:hover { background: rgba(239,68,68,0.12); color: #EF4444; }
+.td-search__clear:hover { background: rgba(239,68,68,0.1); color: #EF4444; }
 
 /* ──────────────────── SKELETON ──────────────────── */
 .td-skeleton-list { display: flex; flex-direction: column; gap: 12px; }
 .td-skeleton-item {
-    display: flex; background: #fff;
-    border: 1px solid rgba(45,123,255,0.1); border-radius: 18px; overflow: hidden; height: 130px;
+    display: flex; background: #fff; border: 1px solid rgba(45,123,255,0.1);
+    border-radius: 18px; overflow: hidden; height: 130px;
 }
-.td-skeleton-stripe { width: 5px; flex-shrink: 0; background: rgba(45,123,255,0.1); }
+.td-skeleton-stripe { width: 5px; flex-shrink: 0; background: rgba(45,123,255,0.08); }
 .td-skeleton-body { flex: 1; padding: 22px 24px; }
-.td-skeleton-line { height: 12px; border-radius: 6px; background: rgba(45,123,255,0.07); }
+.td-skeleton-line { height: 12px; border-radius: 6px; background: rgba(45,123,255,0.06); }
 .td-skeleton-metrics { display: flex; gap: 24px; margin-top: 16px; }
-.td-skeleton-metric { width: 80px; height: 40px; border-radius: 10px; background: rgba(45,123,255,0.07); }
+.td-skeleton-metric { width: 80px; height: 40px; border-radius: 10px; background: rgba(45,123,255,0.06); }
 .shimmer { position: relative; overflow: hidden; }
 .shimmer::after {
     content: ''; position: absolute; inset: 0;
-    background: linear-gradient(90deg, transparent, rgba(45,123,255,0.07), transparent);
+    background: linear-gradient(90deg, transparent, rgba(45,123,255,0.06), transparent);
     animation: shimmer 1.6s infinite;
 }
 @keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@@ -492,100 +448,73 @@ const filteredCampaigns = () => campaigns.value.filter(c =>
 /* ──────────────────── EMPTY ──────────────────── */
 .td-empty {
     text-align: center; padding: 80px 24px; background: #fff;
-    border: 1px solid rgba(45,123,255,0.14); border-radius: 24px;
+    border: 1px solid rgba(45,123,255,0.12); border-radius: 24px;
     box-shadow: 0 4px 24px rgba(45,123,255,0.06);
     display: flex; flex-direction: column; align-items: center; gap: 16px;
 }
 .td-empty__visual { position: relative; width: 84px; height: 84px; }
 .td-empty__ring {
     position: absolute; inset: -7px; border-radius: 50%;
-    border: 2px solid rgba(45,123,255,0.12); animation: spin-slow 8s linear infinite;
+    border: 2px solid rgba(45,123,255,0.1); animation: spin-slow 8s linear infinite;
 }
 @keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
 .td-empty__icon {
     width: 84px; height: 84px; border-radius: 22px;
-    background: rgba(45,123,255,0.08); border: 1px solid rgba(45,123,255,0.18);
+    background: rgba(45,123,255,0.08); border: 1px solid rgba(45,123,255,0.15);
     display: flex; align-items: center; justify-content: center; font-size: 34px; color: #2D7BFF;
 }
-.td-empty__title { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; color: #0F172A; }
-.td-empty__desc { font-size: 13.5px; color: #64748B; max-width: 420px; line-height: 1.65; }
+.td-empty__title { font-family: 'Onest', sans-serif; font-size: 20px; font-weight: 800; color: #0F172A; margin: 0; }
+.td-empty__desc { font-size: 13.5px; color: #64748B; max-width: 420px; line-height: 1.65; margin: 0; }
 
 /* ──────────────────── CAMPAIGN LIST ──────────────────── */
 .td-campaign-list { display: flex; flex-direction: column; gap: 12px; }
 
 .td-campaign {
-    display: flex;
-    background: #fff;
+    display: flex; background: #fff;
     border: 1px solid rgba(45,123,255,0.12);
-    border-radius: 18px;
-    cursor: pointer;
-    overflow: hidden;
+    border-radius: 18px; cursor: pointer; overflow: hidden;
     transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
-    box-shadow: 0 2px 10px rgba(45,123,255,0.05);
+    box-shadow: 0 2px 10px rgba(45,123,255,0.04);
 }
-.td-campaign:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(45,123,255,0.12); border-color: rgba(45,123,255,0.28); }
+.td-campaign:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(45,123,255,0.1); border-color: rgba(45,123,255,0.25); }
 
 .td-campaign__stripe { width: 5px; flex-shrink: 0; transition: width 0.2s; }
 .td-campaign:hover .td-campaign__stripe { width: 6px; }
 
 .td-campaign__body { flex: 1; padding: 22px 24px; }
-
 .td-campaign__top { margin-bottom: 18px; }
-.td-campaign__name-row {
-    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
-}
-.td-campaign__name {
-    font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; line-height: 1.3; flex: 1;
-}
+.td-campaign__name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
+.td-campaign__name { font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; line-height: 1.3; flex: 1; margin: 0; }
 .td-campaign__status {
     display: inline-flex; align-items: center; gap: 5px;
     padding: 4px 12px; border-radius: 999px; border: 1px solid;
-    font-size: 9.5px; font-weight: 800; font-family: 'Unbounded', sans-serif;
-    text-transform: uppercase; letter-spacing: 0.07em; flex-shrink: 0;
+    font-size: 9.5px; font-weight: 700; font-family: 'Onest', sans-serif;
+    text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
 }
 .td-campaign__status i { font-size: 9px; }
 
-.td-campaign__meta {
-    display: flex; align-items: center; gap: 10px; font-size: 12px; color: #94A3B8; flex-wrap: wrap;
-}
+.td-campaign__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #64748B; flex-wrap: wrap; }
 .td-campaign__meta i { font-size: 11px; margin-right: 3px; }
 .td-plat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
-.td-plat-chip {
-    display: inline-flex; align-items: center; gap: 4px;
-    padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 600;
-}
+.td-plat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 600; }
 .td-plat-chip i { font-size: 10px; }
 
-.td-campaign__metrics {
-    display: flex;
-    align-items: center;
-    gap: 28px;
-    flex-wrap: wrap;
-}
-
+.td-campaign__metrics { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
 .td-metric { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
-.td-metric__label {
-    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #94A3B8;
-}
-.td-metric__val {
-    font-family: 'Unbounded', sans-serif; font-size: 17px; font-weight: 900; color: #0F172A; line-height: 1;
-}
-.td-metric__bar {
-    height: 4px; background: rgba(45,123,255,0.1); border-radius: 999px; overflow: hidden; margin-top: 4px;
-}
-.td-metric__bar-fill {
-    height: 100%; border-radius: 999px; transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
-}
+.td-metric__label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94A3B8; }
+.td-metric__val { font-family: 'Onest', sans-serif; font-size: 17px; font-weight: 900; color: #0F172A; line-height: 1; }
+.td-metric__bar { height: 4px; background: rgba(45,123,255,0.08); border-radius: 999px; overflow: hidden; margin-top: 4px; }
+.td-metric__bar-fill { height: 100%; border-radius: 999px; transition: width 0.9s cubic-bezier(0.4,0,0.2,1); }
 
 .td-campaign__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
 .td-act-btn {
     width: 36px; height: 36px; border-radius: 10px;
-    border: 1px solid rgba(45,123,255,0.14); background: rgba(45,123,255,0.04);
+    border: 1px solid rgba(45,123,255,0.12); background: rgba(45,123,255,0.04);
     color: #64748B; display: flex; align-items: center; justify-content: center;
     cursor: pointer; transition: all 0.2s; font-size: 13px;
 }
 .td-act-btn:hover { transform: scale(1.08); }
-.td-act-btn--pause:hover { background: rgba(245,158,11,0.1); color: #F59E0B; border-color: rgba(245,158,11,0.3); }
-.td-act-btn--play:hover  { background: rgba(16,185,129,0.1); color: #10B981; border-color: rgba(16,185,129,0.3); }
-.td-act-btn--open:hover  { background: rgba(45,123,255,0.1); color: #2D7BFF; border-color: rgba(45,123,255,0.3); }
+.td-act-btn--pause:hover { background: rgba(245,158,11,0.1); color: #F59E0B; border-color: rgba(245,158,11,0.25); }
+.td-act-btn--play:hover  { background: rgba(16,185,129,0.1); color: #10B981; border-color: rgba(16,185,129,0.25); }
+.td-act-btn--open:hover  { background: rgba(45,123,255,0.1); color: #2D7BFF; border-color: rgba(45,123,255,0.25); }
 </style>
diff --git a/src/views/pages/marketing/targetologist/components/CampaignInsights.vue b/src/views/pages/marketing/targetologist/components/CampaignInsights.vue
index 3650a02..c9b6a7e 100644
--- a/src/views/pages/marketing/targetologist/components/CampaignInsights.vue
+++ b/src/views/pages/marketing/targetologist/components/CampaignInsights.vue
@@ -59,7 +59,7 @@ onMounted(() => { void loadInsights(); });
             <div v-for="i in 4" :key="i" class="ci-skeleton"></div>
         </div>
 
-        <div v-else-if="insights.length === 0" class="ci-empty">
+        <div v-else-if="!(insights?.length)" class="ci-empty">
             <i class="pi pi-microchip-ai ci-empty__icon"></i>
             <p>ИИ анализирует кампанию. Первые инсайты появятся через 24–48 часов после запуска.</p>
             <button class="ci-empty__btn" @click="syncInsights" :disabled="loading">
@@ -70,7 +70,7 @@ onMounted(() => { void loadInsights(); });
 
         <div v-else class="ci-grid">
             <article
-                v-for="insight in insights"
+                v-for="insight in (insights || []).filter(i => i)"
                 :key="insight.id"
                 class="ci-card"
                 :style="{ background: insightMeta(insight.type).bg, borderColor: insightMeta(insight.type).border }"
@@ -108,16 +108,16 @@ onMounted(() => { void loadInsights(); });
             header="Действие по инсайту"
             :style="{ width: '32rem' }"
             :pt="{
-                root: { style: 'background:#0F1628;border:1px solid rgba(45,123,255,0.2);border-radius:20px;' },
-                header: { style: 'background:#0F1628;border-bottom:1px solid rgba(45,123,255,0.15);color:rgba(255,255,255,0.9);font-family:Unbounded,sans-serif;' },
-                content: { style: 'background:#0F1628;' }
+                root: { style: 'background:#FFFFFF;border:1px solid rgba(45,123,255,0.2);border-radius:24px;box-shadow: 0 10px 40px rgba(0,0,0,0.1);' },
+                header: { style: 'background:#FFFFFF;border-bottom:1px solid rgba(45,123,255,0.1);color:#0F172A;font-family:Onest,sans-serif;' },
+                content: { style: 'background:#FFFFFF;padding:24px;' }
             }"
         >
             <div v-if="selectedInsight" class="ci-modal">
                 <h4 class="ci-modal__title">{{ selectedInsight.title }}</h4>
                 <p class="ci-modal__desc">{{ selectedInsight.description }}</p>
                 <div class="ci-modal__action">
-                    <i class="pi pi-check-circle" style="color:#00D48B; flex-shrink:0;"></i>
+                    <i class="pi pi-check-circle" style="color:#10B981; flex-shrink:0;"></i>
                     {{ selectedInsight.suggestedAction || 'Рекомендация будет добавлена позже.' }}
                 </div>
             </div>
@@ -146,11 +146,12 @@ onMounted(() => { void loadInsights(); });
     display: flex;
     overflow: hidden;
     transition: transform 0.2s, box-shadow 0.2s;
+    background: #fff;
 }
 
 .ci-card:hover {
     transform: translateY(-2px);
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 20px rgba(45, 123, 255, 0.08);
 }
 
 .ci-card__stripe {
@@ -176,10 +177,10 @@ onMounted(() => { void loadInsights(); });
 }
 
 .ci-card__title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 13px;
+    font-family: 'Onest', sans-serif;
+    font-size: 14px;
     font-weight: 700;
-    color: rgba(255, 255, 255, 0.92);
+    color: #0F172A;
     flex: 1;
     line-height: 1.3;
 }
@@ -187,7 +188,7 @@ onMounted(() => { void loadInsights(); });
 .ci-card__type {
     font-size: 9px;
     font-weight: 700;
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     padding: 3px 10px;
@@ -198,7 +199,7 @@ onMounted(() => { void loadInsights(); });
 
 .ci-card__desc {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.6);
+    color: #64748B;
     line-height: 1.6;
     margin-bottom: 14px;
 }
@@ -207,10 +208,10 @@ onMounted(() => { void loadInsights(); });
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 700;
-    font-family: 'Unbounded', sans-serif;
-    background: transparent;
+    font-family: 'Onest', sans-serif;
+    background: #fff;
     border: 1px solid;
     border-radius: 10px;
     padding: 6px 16px;
@@ -230,10 +231,10 @@ onMounted(() => { void loadInsights(); });
     gap: 12px;
     padding: 48px 24px;
     border-radius: 18px;
-    background: rgba(255, 255, 255, 0.03);
+    background: #fff;
     border: 1px solid rgba(45, 123, 255, 0.12);
     text-align: center;
-    color: rgba(255, 255, 255, 0.45);
+    color: #64748B;
     font-size: 13px;
     line-height: 1.6;
 }
@@ -250,11 +251,11 @@ onMounted(() => { void loadInsights(); });
     gap: 8px;
     padding: 10px 16px;
     border-radius: 12px;
-    border: 1px solid rgba(45, 123, 255, 0.25);
-    background: rgba(45, 123, 255, 0.08);
-    color: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(45, 123, 255, 0.2);
+    background: rgba(45, 123, 255, 0.05);
+    color: #0F172A;
     font-weight: 700;
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     cursor: pointer;
     transition: transform 0.2s, opacity 0.2s;
 }
@@ -266,46 +267,48 @@ onMounted(() => { void loadInsights(); });
 
 .ci-empty__btn:not(:disabled):hover {
     transform: translateY(-1px);
+    background: rgba(45, 123, 255, 0.08);
 }
 
 .ci-skeleton {
     height: 100px;
     border-radius: 18px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(45, 123, 255, 0.1);
+    background: #fff;
+    border: 1px solid rgba(45, 123, 255, 0.08);
     animation: ci-pulse 2s infinite;
 }
 
 @keyframes ci-pulse {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 0.3; }
+    0%, 100% { opacity: 0.8; }
+    50% { opacity: 0.4; }
 }
 
 .ci-modal__title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.92);
-    margin-bottom: 10px;
+    font-family: 'Onest', sans-serif;
+    font-size: 18px;
+    font-weight: 800;
+    color: #0F172A;
+    margin-bottom: 12px;
 }
 
 .ci-modal__desc {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.6);
+    font-size: 14px;
+    color: #475569;
     line-height: 1.6;
-    margin-bottom: 16px;
+    margin-bottom: 20px;
 }
 
 .ci-modal__action {
     display: flex;
     align-items: flex-start;
-    gap: 10px;
-    padding: 14px;
-    border-radius: 12px;
-    background: rgba(0, 212, 139, 0.07);
-    border: 1px solid rgba(0, 212, 139, 0.2);
-    font-size: 13px;
-    color: rgba(0, 212, 139, 0.9);
+    gap: 12px;
+    padding: 16px;
+    border-radius: 16px;
+    background: rgba(16, 185, 129, 0.08);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    font-size: 14px;
+    color: #065F46;
     line-height: 1.5;
+    font-weight: 500;
 }
 </style>
diff --git a/src/views/pages/marketing/targetologist/components/CampaignMetrics.vue b/src/views/pages/marketing/targetologist/components/CampaignMetrics.vue
index b4a0b00..c52cff2 100644
--- a/src/views/pages/marketing/targetologist/components/CampaignMetrics.vue
+++ b/src/views/pages/marketing/targetologist/components/CampaignMetrics.vue
@@ -129,11 +129,11 @@ const trendLabel = (trend: MetricTrend): string => {
     gap: 10px;
     padding: 12px 20px;
     border-radius: 14px;
-    background: rgba(45, 123, 255, 0.07);
+    background: rgba(45, 123, 255, 0.08);
     border: 1px solid rgba(45, 123, 255, 0.2);
     font-size: 13px;
-    font-weight: 500;
-    color: rgba(45, 123, 255, 0.9);
+    font-weight: 600;
+    color: #2D7BFF;
     margin-bottom: 20px;
 }
 
@@ -153,13 +153,14 @@ const trendLabel = (trend: MetricTrend): string => {
 }
 
 .cm-card {
-    background: rgba(255, 255, 255, 0.04);
+    background: #fff;
     border: 1px solid rgba(45, 123, 255, 0.15);
     border-radius: 18px;
     padding: 20px;
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
+    box-shadow: 0 4px 12px rgba(45, 123, 255, 0.04);
 }
 
 .cm-card::before {
@@ -167,15 +168,16 @@ const trendLabel = (trend: MetricTrend): string => {
     position: absolute;
     inset: 0;
     opacity: 0;
-    background: radial-gradient(circle at top right, rgba(45, 123, 255, 0.08), transparent 60%);
+    background: radial-gradient(circle at top right, rgba(45, 123, 255, 0.06), transparent 60%);
     pointer-events: none;
     transition: opacity 0.3s;
 }
 
 .cm-card:hover {
-    border-color: rgba(45, 123, 255, 0.35);
-    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(45, 123, 255, 0.3);
+    background: #fff;
     transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(45, 123, 255, 0.08);
 }
 
 .cm-card:hover::before {
@@ -192,10 +194,10 @@ const trendLabel = (trend: MetricTrend): string => {
 .cm-card__name {
     font-size: 11px;
     font-weight: 700;
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: rgba(255, 255, 255, 0.45);
+    color: #64748B;
 }
 
 .cm-card__trend {
@@ -204,31 +206,33 @@ const trendLabel = (trend: MetricTrend): string => {
 }
 
 .cm-card__val {
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     font-size: 24px;
     font-weight: 900;
-    color: rgba(255, 255, 255, 0.92);
+    color: #0F172A;
     line-height: 1;
     margin-bottom: 6px;
 }
 
 .cm-card__val--empty {
-    color: rgba(255, 255, 255, 0.25);
+    color: #CBD5E1;
 }
 
 .cm-card__range {
     font-size: 11px;
-    color: rgba(255, 255, 255, 0.35);
+    color: #94A3B8;
     margin-bottom: 4px;
+    font-weight: 500;
 }
 
 .cm-card__helper {
     font-size: 11px;
     color: #F59E0B;
+    font-weight: 500;
 }
 
 .cm-skel {
-    background: rgba(255, 255, 255, 0.05);
+    background: #F1F5F9;
     border-radius: 8px;
     margin-bottom: 8px;
     animation: cm-pulse 2s infinite;
@@ -245,7 +249,7 @@ const trendLabel = (trend: MetricTrend): string => {
 }
 
 @keyframes cm-pulse {
-    0%, 100% { opacity: 0.5; }
-    50% { opacity: 0.25; }
+    0%, 100% { opacity: 0.8; }
+    50% { opacity: 0.4; }
 }
 </style>
diff --git a/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue b/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue
index 5e19e46..42e56fc 100644
--- a/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue
+++ b/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import { format } from 'date-fns';
 import { ru } from 'date-fns/locale';
@@ -107,23 +107,23 @@ const weeklyChartOptions = {
             type: 'linear',
             position: 'left',
             beginAtZero: true,
-            ticks: { color: 'rgba(255,255,255,0.4)', font: { family: 'Onest' } },
-            grid: { color: 'rgba(255,255,255,0.06)' }
+            ticks: { color: '#64748B', font: { family: 'Onest', size: 10 } },
+            grid: { color: 'rgba(45,123,255,0.06)' }
         },
         y1: {
             type: 'linear',
             position: 'right',
             beginAtZero: true,
-            ticks: { color: 'rgba(255,255,255,0.4)', font: { family: 'Onest' } },
+            ticks: { color: '#64748B', font: { family: 'Onest', size: 10 } },
             grid: { drawOnChartArea: false }
         },
         x: {
-            ticks: { color: 'rgba(255,255,255,0.4)', font: { family: 'Onest' } },
-            grid: { color: 'rgba(255,255,255,0.04)' }
+            ticks: { color: '#64748B', font: { family: 'Onest', size: 10 } },
+            grid: { color: 'rgba(45,123,255,0.04)' }
         }
     },
     plugins: {
-        legend: { labels: { color: 'rgba(255,255,255,0.6)', font: { family: 'Onest', size: 12 } } }
+        legend: { labels: { color: '#0F172A', font: { family: 'Onest', size: 12, weight: '700' } } }
     }
 };
 
@@ -164,7 +164,7 @@ const priorityMeta = (priority: string): { color: string; bg: string; border: st
     const v = priority.toUpperCase();
     if (v === 'HIGH') return { color: '#EF4444', bg: 'rgba(239,68,68,0.1)', border: 'rgba(239,68,68,0.25)' };
     if (v === 'MEDIUM') return { color: '#F59E0B', bg: 'rgba(245,158,11,0.1)', border: 'rgba(245,158,11,0.25)' };
-    return { color: 'rgba(255,255,255,0.4)', bg: 'rgba(255,255,255,0.04)', border: 'rgba(255,255,255,0.1)' };
+    return { color: '#64748B', bg: '#f1f5f9', border: '#e2e8f0' };
 };
 
 const marketSaturationMeta = computed(() => {
@@ -281,7 +281,7 @@ onMounted(() => { void hydratePrediction(); });
                     <div class="cp-score-wrap">
                         <svg width="160" height="160" viewBox="0 0 190 190" class="cp-gauge">
                             <g transform="translate(95,95)">
-                                <circle r="70" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="12" />
+                                <circle r="70" fill="none" stroke="rgba(45,123,255,0.06)" stroke-width="12" />
                                 <circle
                                     r="70"
                                     fill="none"
@@ -297,14 +297,14 @@ onMounted(() => { void hydratePrediction(); });
                         </svg>
                         <div class="cp-score-inner">
                             <div class="cp-score-val" :style="{ color: scoreColor }">{{ score }}</div>
-                            <div class="cp-score-sub">/100</div>
+                            <div class="cp-score-sub" style="color: #64748B;">/100</div>
                         </div>
                     </div>
                     <div class="cp-score-label" :style="{ color: scoreColor }">{{ predictionLabel }}</div>
-                    <div class="cp-score-conf">Уверенность: <b>{{ confidence }}%</b></div>
+                    <div class="cp-score-conf" style="color: #64748B;">Уверенность: <b style="color: #0F172A;">{{ confidence }}%</b></div>
                     <div class="cp-score-date">Обновлено: {{ formatDateTime(lastUpdated) }}</div>
                     <button class="cp-btn-secondary mt-3" @click="refreshPrediction" :disabled="loading || generationRunning">
-                        <i :class="generationRunning ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'"></i>
+                        <i :class="generationRunning ? 'pi pi-spin pi-spinner' : 'pi pi-sync'"></i>
                         Обновить
                     </button>
                 </div>
@@ -327,7 +327,7 @@ onMounted(() => { void hydratePrediction(); });
             <!-- WEEKLY CHART -->
             <div class="cp-card mb-4">
                 <div class="cp-card__label">Прогноз по неделям</div>
-                <div class="cp-chart-wrap">
+                <div v-if="weeklyLabels.length" class="cp-chart-wrap">
                     <Chart type="bar" :data="weeklyChartData" :options="weeklyChartOptions" style="height:100%;" />
                 </div>
                 <div v-if="weeklyPhases.length" class="cp-phases-grid mt-4">
@@ -341,16 +341,16 @@ onMounted(() => { void hydratePrediction(); });
             <!-- STRENGTHS & RISKS -->
             <div class="cp-grid-2 mb-4">
                 <div class="cp-card cp-card--green">
-                    <div class="cp-card__label" style="color:#00D48B;">Сильные стороны</div>
+                    <div class="cp-card__label" style="color:#059669;">Сильные стороны</div>
                     <ul class="cp-factor-list">
                         <li v-for="(factor, idx) in prediction?.strengthFactors ?? []" :key="`s-${idx}`">
-                            <i class="pi pi-check" style="color:#00D48B;"></i> {{ factor }}
+                            <i class="pi pi-check" style="color:#10B981;"></i> {{ factor }}
                         </li>
                         <li v-if="!(prediction?.strengthFactors?.length)" class="cp-factor-empty">—</li>
                     </ul>
                 </div>
                 <div class="cp-card cp-card--amber">
-                    <div class="cp-card__label" style="color:#F59E0B;">Риски</div>
+                    <div class="cp-card__label" style="color:#D97706;">Риски</div>
                     <ul class="cp-factor-list">
                         <li v-for="(factor, idx) in prediction?.riskFactors ?? []" :key="`r-${idx}`">
                             <i class="pi pi-exclamation-triangle" style="color:#F59E0B;"></i> {{ factor }}
@@ -415,8 +415,8 @@ onMounted(() => { void hydratePrediction(); });
                     </div>
                 </div>
                 <div class="cp-cpl-reduction">
-                    <i class="pi pi-arrow-down-right" style="color:#00D48B;"></i>
-                    Потенциальное снижение CPL: <b>{{ budgetOptimization.potentialCplReduction || '—' }}</b>
+                    <i class="pi pi-arrow-down-right" style="color:#059669;"></i>
+                    Потенциальное снижение CPL: <b style="color: #059669;">{{ budgetOptimization.potentialCplReduction || '—' }}</b>
                 </div>
             </div>
 
@@ -427,7 +427,7 @@ onMounted(() => { void hydratePrediction(); });
                     <div class="cp-comp-gauge">
                         <svg width="144" height="144" viewBox="0 0 190 190">
                             <g transform="translate(95,95)">
-                                <circle r="70" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="12" />
+                                <circle r="70" fill="none" stroke="rgba(45,123,255,0.06)" stroke-width="12" />
                                 <circle
                                     r="70"
                                     fill="none"
@@ -446,12 +446,12 @@ onMounted(() => { void hydratePrediction(); });
                     <div class="cp-comp-info">
                         <div class="cp-comp-saturation">
                             Насыщенность рынка:
-                            <span :style="{ color: marketSaturationMeta.color, fontWeight: '700' }">{{ marketSaturationMeta.label }}</span>
+                            <span :style="{ color: marketSaturationMeta.color, fontWeight: '800' }">{{ marketSaturationMeta.label }}</span>
                         </div>
                         <div class="cp-card__label mt-3" style="margin-bottom:8px;">Конкурентные преимущества</div>
                         <ul class="cp-factor-list">
                             <li v-for="(advantage, index) in competitiveAdvantages" :key="`adv-${index}`">
-                                <i class="pi pi-check" style="color:#2D7BFF;"></i> {{ advantage }}
+                                <i class="pi pi-check-circle" style="color:#2D7BFF;"></i> {{ advantage }}
                             </li>
                             <li v-if="!competitiveAdvantages.length" class="cp-factor-empty">—</li>
                         </ul>
@@ -470,25 +470,26 @@ onMounted(() => { void hydratePrediction(); });
 
 /* ─── Cards ─── */
 .cp-card {
-    background: rgba(255, 255, 255, 0.04);
+    background: #fff;
     border: 1px solid rgba(45, 123, 255, 0.15);
     border-radius: 20px;
     padding: 24px;
     position: relative;
     overflow: hidden;
-    transition: border-color 0.3s;
+    transition: all 0.3s;
+    box-shadow: 0 4px 12px rgba(45, 123, 255, 0.04);
 }
 
-.cp-card--green { border-color: rgba(0, 212, 139, 0.2); background: rgba(0, 212, 139, 0.04); }
+.cp-card--green { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.04); }
 .cp-card--amber { border-color: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.04); }
 
 .cp-card__label {
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: rgba(255, 255, 255, 0.35);
+    color: #64748B;
     margin-bottom: 16px;
 }
 
@@ -547,29 +548,29 @@ onMounted(() => { void hydratePrediction(); });
 }
 
 .cp-score-val {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 36px;
+    font-family: 'Onest', sans-serif;
+    font-size: 42px;
     font-weight: 900;
     line-height: 1;
 }
 
 .cp-score-sub {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.35);
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .cp-score-label {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 13px;
-    font-weight: 700;
+    font-family: 'Onest', sans-serif;
+    font-size: 14px;
+    font-weight: 800;
     margin-bottom: 4px;
 }
 
 .cp-score-conf, .cp-score-date {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.4);
+    font-size: 11px;
     margin-bottom: 2px;
+    font-weight: 500;
+    color: #64748B;
 }
 
 /* ─── Metrics ─── */
@@ -587,27 +588,27 @@ onMounted(() => { void hydratePrediction(); });
 }
 
 .cp-metric-name {
-    font-size: 12px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.65);
+    font-size: 13px;
+    font-weight: 700;
+    color: #475569;
 }
 
 .cp-metric-icon {
     font-size: 12px;
     margin-right: 8px;
-    opacity: 0.85;
+    color: #2D7BFF;
 }
 
 .cp-metric-range {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 11px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.85);
+    font-family: 'Onest', sans-serif;
+    font-size: 12px;
+    font-weight: 800;
+    color: #0F172A;
 }
 
 :deep(.cp-progress .p-progressbar) {
     height: 6px !important;
-    background: rgba(255, 255, 255, 0.06) !important;
+    background: #F1F5F9 !important;
     border-radius: 999px !important;
     border: none !important;
 }
@@ -619,10 +620,11 @@ onMounted(() => { void hydratePrediction(); });
 
 /* ─── Chart ─── */
 .cp-chart-wrap {
-    height: 260px;
-    background: rgba(255, 255, 255, 0.02);
+    height: 280px;
+    background: rgba(45, 123, 255, 0.02);
     border-radius: 14px;
-    padding: 12px;
+    padding: 16px;
+    border: 1px dashed rgba(45, 123, 255, 0.1);
 }
 
 .cp-phases-grid {
@@ -637,7 +639,7 @@ onMounted(() => { void hydratePrediction(); });
 
 .cp-phase-item {
     padding: 10px 14px;
-    background: rgba(255, 255, 255, 0.03);
+    background: #fff;
     border: 1px solid rgba(45, 123, 255, 0.12);
     border-radius: 12px;
 }
@@ -646,15 +648,16 @@ onMounted(() => { void hydratePrediction(); });
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: rgba(255, 255, 255, 0.35);
+    color: #94A3B8;
     margin-bottom: 4px;
+    font-weight: 700;
 }
 
 .cp-phase-val {
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     font-size: 13px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.85);
+    font-weight: 800;
+    color: #0F172A;
 }
 
 /* ─── Factors ─── */
@@ -672,13 +675,14 @@ onMounted(() => { void hydratePrediction(); });
     align-items: flex-start;
     gap: 8px;
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.65);
+    color: #475569;
     line-height: 1.5;
+    font-weight: 500;
 }
 
 .cp-factor-empty {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.25);
+    color: #94A3B8;
 }
 
 /* ─── Recommendations ─── */
@@ -690,14 +694,15 @@ onMounted(() => { void hydratePrediction(); });
 
 .cp-rec-item {
     padding: 18px;
-    background: rgba(255, 255, 255, 0.03);
+    background: #fff;
     border: 1px solid rgba(45, 123, 255, 0.12);
     border-radius: 16px;
-    transition: border-color 0.2s;
+    transition: all 0.2s;
 }
 
 .cp-rec-item:hover {
     border-color: rgba(45, 123, 255, 0.3);
+    box-shadow: 0 4px 15px rgba(45, 123, 255, 0.06);
 }
 
 .cp-rec-badges {
@@ -709,8 +714,8 @@ onMounted(() => { void hydratePrediction(); });
 
 .cp-rec-priority {
     font-size: 9px;
-    font-weight: 700;
-    font-family: 'Unbounded', sans-serif;
+    font-weight: 800;
+    font-family: 'Onest', sans-serif;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     padding: 3px 10px;
@@ -723,27 +728,27 @@ onMounted(() => { void hydratePrediction(); });
     align-items: center;
     gap: 4px;
     font-size: 11px;
-    font-weight: 600;
-    color: rgba(45, 123, 255, 0.8);
-    background: rgba(45, 123, 255, 0.1);
+    font-weight: 700;
+    color: #2D7BFF;
+    background: rgba(45, 123, 255, 0.08);
     border-radius: 999px;
     padding: 3px 10px;
 }
 
 .cp-rec-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 13px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.9);
-    margin-bottom: 6px;
+    font-family: 'Onest', sans-serif;
+    font-size: 15px;
+    font-weight: 800;
+    color: #0F172A;
+    margin-bottom: 8px;
     line-height: 1.4;
 }
 
 .cp-rec-desc {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.55);
+    color: #64748B;
     line-height: 1.6;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
 }
 
 .cp-rec-impact {
@@ -751,21 +756,22 @@ onMounted(() => { void hydratePrediction(); });
     align-items: center;
     gap: 6px;
     font-size: 12px;
-    font-weight: 600;
-    color: #00D48B;
+    font-weight: 800;
+    color: #059669;
 }
 
 /* ─── Info ─── */
 .cp-info-text {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.65);
+    font-size: 14px;
+    color: #475569;
     line-height: 1.6;
+    font-weight: 500;
 }
 
 .cp-info-block {
     padding: 14px;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(45, 123, 255, 0.1);
+    background: rgba(248, 250, 252, 0.8);
+    border: 1px solid #E2E8F0;
     border-radius: 12px;
 }
 
@@ -773,15 +779,16 @@ onMounted(() => { void hydratePrediction(); });
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: rgba(255, 255, 255, 0.35);
+    color: #94A3B8;
     margin-bottom: 6px;
-    font-weight: 700;
+    font-weight: 800;
 }
 
 .cp-info-block__val {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.75);
+    color: #1E293B;
     line-height: 1.5;
+    font-weight: 600;
 }
 
 .cp-cpl-reduction {
@@ -790,15 +797,79 @@ onMounted(() => { void hydratePrediction(); });
     gap: 8px;
     margin-top: 12px;
     padding: 12px 16px;
-    background: rgba(0, 212, 139, 0.07);
-    border: 1px solid rgba(0, 212, 139, 0.2);
+    background: rgba(16, 185, 129, 0.08);
+    border: 1px solid rgba(16, 185, 129, 0.2);
     border-radius: 12px;
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.7);
+    color: #065F46;
+    font-weight: 600;
 }
 
-.cp-cpl-reduction b {
-    color: #00D48B;
+/* ─── Competitive ─── */
+.cp-comp-row {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.cp-comp-gauge {
+    position: relative;
+    width: 144px;
+    height: 144px;
+}
+
+.cp-comp-gauge__val {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Onest', sans-serif;
+    font-size: 20px;
+    font-weight: 900;
+    color: #0F172A;
+}
+
+.cp-comp-saturation {
+    font-size: 14px;
+    color: #64748B;
+    margin-bottom: 8px;
+}
+
+/* ─── Misc ─── */
+.cp-empty {
+    padding: 60px 40px;
+    text-align: center;
+    background: #fff;
+    border-radius: 24px;
+    border: 1px dashed rgba(45, 123, 255, 0.3);
+}
+
+.cp-empty__icon { font-size: 40px; color: #E2E8F0; margin-bottom: 20px; }
+.cp-empty__title { font-family: 'Onest', sans-serif; font-size: 20px; font-weight: 900; color: #0F172A; margin-bottom: 8px; }
+.cp-empty__sub { font-size: 14px; color: #94A3B8; margin-bottom: 24px; }
+
+.cp-btn-primary {
+    display: inline-flex; align-items: center; gap: 10px;
+    padding: 12px 28px; border-radius: 12px; border: none;
+    background: #2D7BFF; color: #fff; font-weight: 800;
+    font-family: 'Onest', sans-serif; cursor: pointer; transition: all 0.2s;
+}
+.cp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(45,123,255,0.4); }
+
+.cp-btn-secondary {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 10px 20px; border-radius: 10px; border: 1px solid #E2E8F0;
+    background: #fff; color: #475569; font-weight: 700;
+    font-family: 'Onest', sans-serif; font-size: 12px; cursor: pointer; transition: all 0.2s;
+}
+.cp-btn-secondary:hover { border-color: #2D7BFF; color: #2D7BFF; }
+
+.cp-skel-block {
+    background: #F8FAFF !important;
+    animation: cm-pulse 2s infinite;
+}
+</style>    color: #00D48B;
 }
 
 /* ─── Competitive ─── */
diff --git a/src/views/pages/marketing/targetologist/components/OAuthConnectionWidget.vue b/src/views/pages/marketing/targetologist/components/OAuthConnectionWidget.vue
index ad14a90..41e7fa8 100644
--- a/src/views/pages/marketing/targetologist/components/OAuthConnectionWidget.vue
+++ b/src/views/pages/marketing/targetologist/components/OAuthConnectionWidget.vue
@@ -154,8 +154,13 @@ const handleAccountSelection = async () => {
 
 <style scoped>
 .oauth-card {
+    background: #fff;
+    border: 1px solid rgba(45,123,255,0.12);
+    border-radius: 24px;
     padding: 32px;
+    position: relative;
     overflow: hidden;
+    box-shadow: 0 4px 12px rgba(45,123,255,0.05);
 }
 
 .oauth-glow {
@@ -165,40 +170,41 @@ const handleAccountSelection = async () => {
     width: 140px;
     height: 140px;
     filter: blur(40px);
-    opacity: 0.3;
+    opacity: 0.15;
     transition: opacity 0.5s;
     pointer-events: none;
 }
-.group:hover .oauth-glow { opacity: 0.5; }
+.group:hover .oauth-glow { opacity: 0.25; }
 
-.oauth-glow.blue-glow { background: var(--kai-blue); }
-.oauth-glow.rose-glow { background: #ff2d55; }
+.oauth-glow.blue { background: #2D7BFF; }
+.oauth-glow.rose { background: #EF4444; }
 
 .oauth-icon {
     width: 64px;
     height: 64px;
     border-radius: 20px;
-    background: rgba(255,255,255,0.03);
-    border: 1px solid var(--kai-border);
+    background: #fff;
+    border: 1px solid rgba(45,123,255,0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     transition: all 0.3s;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
 }
-.oauth-icon.blue-glow { color: #1877F2; }
-.oauth-icon.rose-glow { color: #fff; }
+.oauth-icon.blue { color: #1877F2; }
+.oauth-icon.rose { color: #000; }
 
 .oauth-title {
-    font-family: 'Unbounded', sans-serif;
+    font-family: 'Onest', sans-serif;
     font-size: 20px;
     font-weight: 800;
-    color: #fff;
+    color: #0F172A;
     margin-bottom: 4px;
 }
 .oauth-sub {
     font-size: 13px;
-    color: var(--kai-txt3);
+    color: #64748B;
     font-weight: 500;
 }
 
@@ -207,33 +213,33 @@ const handleAccountSelection = async () => {
     align-items: center;
     gap: 12px;
     padding: 10px 16px;
-    background: rgba(0,212,139,0.08);
-    border: 1px solid rgba(0,212,139,0.2);
+    background: rgba(16,185,129,0.08);
+    border: 1px solid rgba(16,185,129,0.2);
     border-radius: 14px;
-    color: var(--kai-green);
+    color: #10B981;
 }
 .oauth-connected i { font-size: 18px; }
 
 .oauth-dialog :deep(.p-dialog-header) {
-    background: var(--kai-card);
-    color: #fff;
-    font-family: 'Unbounded', sans-serif;
+    background: #fff;
+    color: #0F172A;
+    font-family: 'Onest', sans-serif;
     font-size: 18px;
     padding: 24px;
 }
 .oauth-dialog :deep(.p-dialog-content) {
-    background: var(--kai-card);
+    background: #fff;
     padding: 0 24px 24px;
 }
 .oauth-dialog :deep(.p-dialog-footer) {
-    background: var(--kai-card);
-    border-top: 1px solid var(--kai-border);
+    background: #fff;
+    border-top: 1px solid #f1f5f9;
     padding: 16px 24px;
 }
 
 .oauth-dialog-sub {
     font-size: 13px;
-    color: var(--kai-txt3);
+    color: #64748B;
     margin-bottom: 20px;
     line-height: 1.5;
 }
@@ -243,47 +249,47 @@ const handleAccountSelection = async () => {
     align-items: center;
     gap: 12px;
     padding: 14px;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid var(--kai-border);
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
     border-radius: 14px;
     cursor: pointer;
     transition: all 0.2s;
 }
 .oauth-acc-item:hover {
-    background: rgba(255,255,255,0.04);
-    border-color: var(--kai-border-hover);
+    background: #f1f5f9;
+    border-color: #cbd5e1;
 }
 .oauth-acc-item--active {
     background: rgba(45,123,255,0.08);
-    border-color: var(--kai-blue);
+    border-color: #2D7BFF;
 }
 .oauth-acc-id {
     font-size: 10px;
-    background: rgba(255,255,255,0.05);
+    background: rgba(0,0,0,0.05);
     padding: 2px 6px;
     border-radius: 4px;
-    color: var(--kai-txt3);
+    color: #64748B;
 }
 
 /* Reuse from global/others */
 .td-launch-btn {
-    background: #fff;
-    color: #000;
-    font-family: 'Unbounded', sans-serif;
+    background: #f1f5f9;
+    color: #0F172A;
+    font-family: 'Onest', sans-serif;
     font-weight: 700;
     font-size: 12px;
     padding: 12px 24px;
     border-radius: 12px;
-    border: none;
+    border: 1px solid #e2e8f0;
     cursor: pointer;
     transition: all 0.3s;
 }
 .td-launch-btn:hover:not(:disabled) {
+    background: #e2e8f0;
     transform: translateY(-2px);
-    box-shadow: 0 0 20px rgba(255,255,255,0.2);
 }
 .td-launch-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
-.wiz-btn-pri { background: #fff; color: #000; border: none; font-family: 'Unbounded', sans-serif; font-weight: 700; border-radius: 8px; cursor: pointer; }
-.wiz-btn-sec { background: transparent; border: 1px solid var(--kai-border); color: var(--kai-txt2); font-weight: 600; border-radius: 8px; cursor: pointer; }
+.wiz-btn-pri { background: #2D7BFF; color: #fff; border: none; font-family: 'Onest', sans-serif; font-weight: 700; border-radius: 8px; cursor: pointer; }
+.wiz-btn-sec { background: transparent; border: 1px solid #e2e8f0; color: #64748B; font-weight: 600; border-radius: 8px; cursor: pointer; }
 </style>