From 8ca6d8e3b7f3a807323072f34b04336e0a0b43b2 Mon Sep 17 00:00:00 2001
From: neo <neo@example.com>
Date: Sat, 20 Jun 2026 19:48:53 +0500
Subject: [PATCH] v3: 6 KPI (CPC, CAC, LTV, LTV/CAC, ROMI, ROI) + dual charts +
 ROMI bar + funnel + progress bars

---
 dashboard-mockup.html | 1372 ++++++++++++++++++-----------------------
 1 file changed, 585 insertions(+), 787 deletions(-)

diff --git a/dashboard-mockup.html b/dashboard-mockup.html
index 4d73eba..59ed710 100644
--- a/dashboard-mockup.html
+++ b/dashboard-mockup.html
@@ -8,1072 +8,870 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
-/* ============================================
-   DESIGN TOKENS
-   ============================================ */
-:root {
-  --color-bg: #0a0a0a;
-  --color-surface: #111111;
-  --color-surface-hover: #1a1a1a;
-  --color-border: rgba(255,255,255,0.06);
-  --color-border-hover: rgba(255,255,255,0.12);
-  --color-text-primary: #f5f5f5;
-  --color-text-secondary: #a1a1aa;
-  --color-text-muted: #52525b;
-  --accent: #22c55e;
-  --accent-hover: #16a34a;
-  --accent-dim: rgba(34,197,94,0.12);
-  --accent-secondary: #3b82f6;
-  --accent-secondary-dim: rgba(59,130,246,0.12);
-  --warning: #f59e0b;
-  --warning-dim: rgba(245,158,11,0.12);
-  --error: #ef4444;
-  --error-dim: rgba(239,68,68,0.12);
-  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --duration-normal: 300ms;
-}
-
-/* ============================================
-   RESET & BASE
-   ============================================ */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-body {
-  font-family: var(--font-primary);
-  background: var(--color-bg);
-  color: var(--color-text-primary);
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  overflow-x: hidden;
-  min-height: 100vh;
+:root {
+  --bg: #09090b;
+  --bg-card: #111113;
+  --bg-card-hover: #16161a;
+  --border: rgba(255,255,255,0.06);
+  --border-hover: rgba(255,255,255,0.1);
+  --text: #fafafa;
+  --text-sec: #a1a1aa;
+  --text-muted: #52525b;
+  --green: #22c55e;
+  --green-dim: rgba(34,197,94,0.12);
+  --blue: #3b82f6;
+  --blue-dim: rgba(59,130,246,0.12);
+  --amber: #f59e0b;
+  --amber-dim: rgba(245,158,11,0.12);
+  --red: #ef4444;
+  --red-dim: rgba(239,68,68,0.12);
+  --purple: #a855f7;
+  --purple-dim: rgba(168,85,247,0.12);
+  --cyan: #06b6d4;
+  --cyan-dim: rgba(6,182,212,0.12);
+  --mono: 'JetBrains Mono', monospace;
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Noise texture overlay */
+body {
+  font-family: 'Inter', -apple-system, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Ambient glow */
 body::before {
   content: '';
   position: fixed;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
+  top: -200px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 600px;
+  height: 400px;
+  background: radial-gradient(ellipse, rgba(34,197,94,0.04) 0%, transparent 70%);
   pointer-events: none;
-  z-index: 0;
 }
 
 /* ============================================
-   HEADER BAR
+   HEADER
    ============================================ */
-.dash-header {
+.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 24px;
-  background: rgba(17,17,17,0.8);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--color-border);
+  padding: 12px 28px;
+  background: rgba(17,17,19,0.85);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 100;
 }
 
-.dash-logo {
-  font-family: var(--font-mono);
+.logo {
+  font-family: var(--mono);
   font-weight: 700;
-  font-size: 16px;
-  letter-spacing: -0.5px;
+  font-size: 15px;
+  letter-spacing: -0.3px;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.dash-logo-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--accent);
+.logo-dot {
+  width: 8px; height: 8px;
+  background: var(--green);
   border-radius: 50%;
-  animation: pulse-dot 2s ease-in-out infinite;
+  animation: pulse 2s ease-in-out infinite;
+  box-shadow: 0 0 8px rgba(34,197,94,0.4);
 }
 
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
-  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,0.4); }
+  50% { box-shadow: 0 0 16px rgba(34,197,94,0.15); }
 }
 
-.dash-status {
+.header-right {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
   font-size: 12px;
-  color: var(--color-text-secondary);
 }
 
-.dash-status-dot {
-  width: 6px;
-  height: 6px;
-  background: var(--accent);
+.live-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--green);
+  font-weight: 600;
+}
+
+.live-dot {
+  width: 6px; height: 6px;
+  background: var(--green);
   border-radius: 50%;
-  animation: pulse-dot 2s ease-in-out infinite;
+  animation: pulse 2s ease-in-out infinite;
 }
 
-.dash-time {
-  font-family: var(--font-mono);
+.clock {
+  font-family: var(--mono);
+  color: var(--text-muted);
   font-size: 11px;
-  color: var(--color-text-muted);
 }
 
 /* ============================================
    SEGMENT SWITCHER
    ============================================ */
-.segment-switcher {
+.switcher-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 32px 24px 0;
+}
+
+.switcher {
   display: flex;
   gap: 4px;
-  padding: 6px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  margin: 24px auto;
-  max-width: 600px;
-  position: relative;
-  z-index: 1;
+  padding: 5px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
 }
 
-.segment-btn {
-  flex: 1;
-  padding: 10px 16px;
+.sw-btn {
+  padding: 10px 20px;
   border: none;
   background: transparent;
-  color: var(--color-text-secondary);
-  font-family: var(--font-primary);
-  font-size: 13px;
+  color: var(--text-sec);
+  font-family: var(--mono);
+  font-size: 12px;
   font-weight: 500;
-  border-radius: 8px;
+  border-radius: 10px;
   cursor: pointer;
-  transition: all var(--duration-normal) var(--ease-out);
-  position: relative;
-  z-index: 1;
+  transition: all 0.25s var(--ease);
   white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.segment-btn:hover {
-  color: var(--color-text-primary);
+.sw-btn:hover { color: var(--text); }
+
+.sw-btn.active {
+  background: var(--green-dim);
+  color: var(--green);
+  box-shadow: 0 0 0 1px rgba(34,197,94,0.2);
 }
 
-.segment-btn.active {
-  background: var(--accent-dim);
-  color: var(--accent);
-}
-
-.segment-btn .seg-icon {
-  margin-right: 6px;
-  font-size: 14px;
-}
+.sw-btn .icon { font-size: 15px; }
 
 /* ============================================
-   KPI CARDS
+   KPI GRID — 6 cards
    ============================================ */
 .kpi-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   gap: 12px;
-  padding: 0 24px;
-  max-width: 1200px;
+  padding: 24px 24px 0;
+  max-width: 1280px;
   margin: 0 auto;
 }
 
-.kpi-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
+.kpi {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 12px;
   padding: 16px;
-  transition: all var(--duration-normal) var(--ease-out);
   position: relative;
   overflow: hidden;
-}
-
-.kpi-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 3px;
-  height: 100%;
+  transition: all 0.25s var(--ease);
   opacity: 0;
-  transition: opacity var(--duration-normal) var(--ease-out);
+  transform: translateY(12px);
 }
 
-.kpi-card:hover {
-  border-color: var(--color-border-hover);
-  transform: translateY(-1px);
-}
-
-.kpi-card:hover::before {
+.kpi.visible {
   opacity: 1;
+  transform: translateY(0);
 }
 
-.kpi-card.positive::before { background: var(--accent); }
-.kpi-card.negative::before { background: var(--error); }
-.kpi-card.neutral::before { background: var(--accent-secondary); }
+.kpi:hover {
+  border-color: var(--border-hover);
+  transform: translateY(-2px);
+}
 
-.kpi-label {
-  font-size: 11px;
-  color: var(--color-text-muted);
+.kpi-accent {
+  position: absolute;
+  top: 0; left: 0;
+  width: 3px; height: 100%;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.kpi:hover .kpi-accent { opacity: 1; }
+
+.kpi-name {
+  font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
+  color: var(--text-muted);
   font-weight: 600;
   margin-bottom: 8px;
 }
 
-.kpi-value {
-  font-family: var(--font-mono);
-  font-size: 24px;
+.kpi-val {
+  font-family: var(--mono);
+  font-size: 22px;
   font-weight: 700;
   margin-bottom: 6px;
   line-height: 1.1;
 }
 
+.kpi-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+}
+
 .kpi-trend {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  font-size: 12px;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  font-family: var(--mono);
   font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 6px;
-  font-family: var(--font-mono);
+  font-size: 10px;
 }
 
-.kpi-trend.up {
-  color: var(--accent);
-  background: var(--accent-dim);
-}
+.kpi-trend.up { color: var(--green); background: var(--green-dim); }
+.kpi-trend.down { color: var(--red); background: var(--red-dim); }
+.kpi-trend.neutral { color: var(--blue); background: var(--blue-dim); }
 
-.kpi-trend.down {
-  color: var(--error);
-  background: var(--error-dim);
-}
-
-.kpi-trend.stable {
-  color: var(--accent-secondary);
-  background: var(--accent-secondary-dim);
+.kpi-period {
+  color: var(--text-muted);
+  font-size: 10px;
 }
 
 /* ============================================
-   CHART SECTIONS
+   CHART ROWS
    ============================================ */
-.charts-grid {
+.chart-row {
   display: grid;
-  grid-template-columns: 2fr 1fr;
   gap: 12px;
-  padding: 12px 24px;
-  max-width: 1200px;
+  padding: 16px 24px;
+  max-width: 1280px;
   margin: 0 auto;
 }
 
+.chart-row.two { grid-template-columns: 2fr 1fr; }
+.chart-row.three { grid-template-columns: 1fr 1fr 1fr; }
+
 .chart-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
   padding: 20px;
-  transition: all var(--duration-normal) var(--ease-out);
+  transition: border-color 0.25s;
 }
 
-.chart-card:hover {
-  border-color: var(--color-border-hover);
+.chart-card:hover { border-color: var(--border-hover); }
+
+.chart-head {
+  margin-bottom: 4px;
 }
 
 .chart-title {
   font-size: 13px;
   font-weight: 600;
-  margin-bottom: 4px;
-  color: var(--color-text-primary);
+  color: var(--text);
 }
 
-.chart-subtitle {
+.chart-sub {
   font-size: 11px;
-  color: var(--color-text-muted);
-  margin-bottom: 16px;
+  color: var(--text-muted);
 }
 
-.chart-container {
+.chart-dom {
   width: 100%;
-  height: 260px;
+  height: 280px;
 }
 
+.chart-dom.small { height: 200px; }
+
 /* ============================================
-   BOTTOM ROW
+   METRIC LIST
    ============================================ */
-.bottom-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 12px;
-  padding: 12px 24px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.bottom-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 20px;
-  transition: all var(--duration-normal) var(--ease-out);
-}
-
-.bottom-card:hover {
-  border-color: var(--color-border-hover);
-}
-
-.bottom-card .chart-container {
-  height: 200px;
-}
-
-/* ============================================
-   TOP CHANNELS TABLE
-   ============================================ */
-.top-channels {
+.metric-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   margin-top: 12px;
 }
 
-.channel-row {
+.metric-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--border);
+}
+
+.metric-item:last-child { border-bottom: none; }
+
+.metric-label {
   font-size: 12px;
-}
-
-.channel-row:last-child {
-  border-bottom: none;
-}
-
-.channel-name {
-  color: var(--color-text-secondary);
+  color: var(--text-sec);
   flex: 1;
 }
 
-.channel-value {
-  font-family: var(--font-mono);
+.metric-val {
+  font-family: var(--mono);
+  font-size: 12px;
   font-weight: 600;
-  color: var(--color-text-primary);
-  margin-right: 12px;
+  color: var(--text);
+  margin: 0 12px;
+  min-width: 60px;
+  text-align: right;
 }
 
-.channel-bar-wrap {
-  width: 80px;
-  height: 4px;
-  background: var(--color-border);
+.metric-bar {
+  width: 70px; height: 4px;
+  background: var(--border);
   border-radius: 2px;
   overflow: hidden;
 }
 
-.channel-bar {
+.metric-fill {
   height: 100%;
   border-radius: 2px;
-  background: var(--accent);
-  transition: width 0.8s var(--ease-out);
+  width: 0;
+  transition: width 1s var(--ease);
 }
 
 /* ============================================
-   SECTION TITLE (outside mockup)
+   SECTION HEADER
    ============================================ */
-.dash-section-title {
+.section-header {
   text-align: center;
-  padding: 48px 24px 24px;
+  padding: 40px 24px 20px;
 }
 
-.dash-section-title h2 {
-  font-size: clamp(1.8rem, 4vw, 2.5rem);
+.section-header h2 {
+  font-size: clamp(1.6rem, 4vw, 2.2rem);
   font-weight: 800;
-  margin-bottom: 8px;
   letter-spacing: -0.5px;
+  margin-bottom: 6px;
 }
 
-.dash-section-title p {
-  color: var(--color-text-secondary);
-  font-size: 15px;
+.section-header p {
+  color: var(--text-sec);
+  font-size: 14px;
 }
 
 /* ============================================
    RESPONSIVE
    ============================================ */
-@media (max-width: 768px) {
-  .kpi-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .charts-grid {
-    grid-template-columns: 1fr;
-  }
-  .bottom-grid {
-    grid-template-columns: 1fr;
-  }
-  .dash-header {
-    padding: 10px 16px;
-  }
-  .kpi-value {
-    font-size: 20px;
-  }
-  .segment-switcher {
-    margin: 16px;
-  }
-  .segment-btn {
-    padding: 8px 10px;
-    font-size: 12px;
-  }
-  .segment-btn .seg-icon {
-    display: none;
-  }
+@media (max-width: 1024px) {
+  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
+  .chart-row.two,
+  .chart-row.three { grid-template-columns: 1fr; }
 }
 
-@media (max-width: 480px) {
-  .kpi-grid {
-    grid-template-columns: 1fr;
-  }
+@media (max-width: 640px) {
+  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
+  .sw-btn { padding: 8px 12px; font-size: 11px; }
+  .sw-btn .label { display: none; }
 }
 </style>
 </head>
 <body>
 
-<!-- Section Title -->
-<div class="dash-section-title">
+<!-- HEADER -->
+<div class="header">
+  <div class="logo">
+    <span class="logo-dot"></span>
+    ROI24
+  </div>
+  <div class="header-right">
+    <div class="live-badge">
+      <span class="live-dot"></span>
+      Live
+    </div>
+    <div class="clock" id="clock">--:--:--</div>
+  </div>
+</div>
+
+<!-- SECTION HEADER -->
+<div class="section-header">
   <h2>Все ключевые цифры — в одном месте</h2>
-  <p>Выберите тип бизнеса, чтобы увидеть, как выглядит дашборд под ваш бизнес</p>
+  <p>Переключите бизнес, чтобы увидеть свой дашборд</p>
 </div>
 
-<!-- Segment Switcher -->
-<div class="segment-switcher" id="segment-switcher">
-  <button class="segment-btn active" data-segment="ecommerce" onclick="switchSegment('ecommerce')">
-    <span class="seg-icon">🛒</span>Интернет-магазин
-  </button>
-  <button class="segment-btn" data-segment="services" onclick="switchSegment('services')">
-    <span class="seg-icon">💼</span>Услуги
-  </button>
-  <button class="segment-btn" data-segment="production" onclick="switchSegment('production')">
-    <span class="seg-icon">🏭</span>Производство
-  </button>
+<!-- SWITCHER -->
+<div class="switcher-wrap">
+  <div class="switcher" id="switcher">
+    <button class="sw-btn active" data-seg="ecom">
+      <span class="icon">🛒</span>
+      <span class="label">Интернет-магазин</span>
+    </button>
+    <button class="sw-btn" data-seg="services">
+      <span class="icon">💼</span>
+      <span class="label">Услуги / Агентство</span>
+    </button>
+    <button class="sw-btn" data-seg="production">
+      <span class="icon">🏭</span>
+      <span class="label">Производство</span>
+    </button>
+  </div>
 </div>
 
-<!-- Dashboard Mockup -->
-<div id="dashboard-mockup">
-  <!-- Header -->
-  <div class="dash-header">
-    <div class="dash-logo">
-      <span class="dash-logo-dot"></span>
-      ROI24
-    </div>
-    <div class="dash-status">
-      <span class="dash-status-dot"></span>
-      <span>Live</span>
-      <span style="margin: 0 8px; color: var(--color-border);">|</span>
-      <span class="dash-time" id="dash-time"></span>
-    </div>
-  </div>
+<!-- DASHBOARD CONTAINER -->
+<div id="dash">
+  <!-- KPI Row -->
+  <div class="kpi-grid" id="kpi-grid"></div>
 
-  <!-- KPI Cards -->
-  <div class="kpi-grid" id="kpi-grid">
-    <!-- Populated by JS -->
-  </div>
-
-  <!-- Charts -->
-  <div class="charts-grid">
+  <!-- Row 1: Main + Side -->
+  <div class="chart-row two">
     <div class="chart-card">
-      <div class="chart-title" id="main-chart-title">Выручка</div>
-      <div class="chart-subtitle" id="main-chart-subtitle">12 месяцев с трендом</div>
-      <div class="chart-container" id="main-chart"></div>
+      <div class="chart-head">
+        <div class="chart-title" id="mc-title">Выручка</div>
+        <div class="chart-sub" id="mc-sub">12 месяцев · с трендом</div>
+      </div>
+      <div class="chart-dom" id="mc"></div>
     </div>
     <div class="chart-card">
-      <div class="chart-title" id="side-chart-title">Ключевые метрики</div>
-      <div class="chart-subtitle">Текущий период</div>
-      <div class="chart-container" id="side-chart"></div>
+      <div class="chart-head">
+        <div class="chart-title" id="sc-title">ROI по каналам</div>
+        <div class="chart-sub">Текущий период</div>
+      </div>
+      <div class="chart-dom" id="sc"></div>
     </div>
   </div>
 
-  <!-- Bottom Row -->
-  <div class="bottom-grid">
-    <div class="bottom-card">
-      <div class="chart-title">Каналы привлечения</div>
-      <div class="chart-subtitle">Доля в общем объёме</div>
-      <div class="chart-container" id="bottom-chart-1"></div>
+  <!-- Row 2: Three small -->
+  <div class="chart-row three">
+    <div class="chart-card">
+      <div class="chart-head">
+        <div class="chart-title">ROMI рекламных кампаний</div>
+        <div class="chart-sub">Возврат инвестиций в маркетинг</div>
+      </div>
+      <div class="chart-dom small" id="ch1"></div>
     </div>
-    <div class="bottom-card">
-      <div class="chart-title">Воронка</div>
-      <div class="chart-subtitle">Этапы конверсии</div>
-      <div class="chart-container" id="bottom-chart-2"></div>
+    <div class="chart-card">
+      <div class="chart-head">
+        <div class="chart-title">Воронка продаж</div>
+        <div class="chart-sub">Конверсия по этапам</div>
+      </div>
+      <div class="chart-dom small" id="ch2"></div>
     </div>
-    <div class="bottom-card">
-      <div class="chart-title">Топ-5 метрик</div>
-      <div class="chart-subtitle">Выполнение плана</div>
-      <div class="top-channels" id="top-metrics"></div>
+    <div class="chart-card">
+      <div class="chart-head">
+        <div class="chart-title">Выполнение плана</div>
+        <div class="chart-sub">Ключевые метрики</div>
+      </div>
+      <div class="metric-list" id="mlist"></div>
     </div>
   </div>
 </div>
 
-<!-- ECharts CDN -->
+<!-- ECharts -->
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
-
 <script>
 // ============================================
-// DATA FOR EACH SEGMENT
+// DATA
 // ============================================
-const segments = {
-  ecommerce: {
+const D = {
+  ecom: {
     kpis: [
-      { label: 'Выручка', value: '4.2М ₽', trend: '+12%', direction: 'up' },
-      { label: 'Конверсия', value: '3.8%', trend: '+0.5%', direction: 'up' },
-      { label: 'Ср. чек', value: '4 820 ₽', trend: '+3%', direction: 'up' },
-      { label: 'Возвраты', value: '4.2%', trend: '-0.8%', direction: 'up' }, // negative is good for returns
+      { name: 'Выручка', val: '4.2М ₽', trend: 12, trendTxt: '+12%', per: 'vs прошл. мес' },
+      { name: 'CPC', val: '42 ₽', trend: -15, trendTxt: '-15%', per: 'оптимизация' },
+      { name: 'Конверсия', val: '3.8%', trend: 0.5, trendTxt: '+0.5%', per: 'от клика до оплаты' },
+      { name: 'CAC', val: '680 ₽', trend: -8, trendTxt: '-8%', per: 'стоимость клиента' },
+      { name: 'LTV', val: '12 400 ₽', trend: 18, trendTxt: '+18%', per: 'за 6 мес' },
+      { name: 'LTV/CAC', val: '18.2x', trend: 28, trendTxt: '+28%', per: 'коэф. окупаемости' },
     ],
     mainChart: {
-      title: 'Выручка',
-      subtitle: '12 месяцев с трендом',
-      type: 'line',
-      data: [2.8, 3.1, 2.9, 3.4, 3.6, 3.2, 3.8, 4.0, 3.9, 4.2, 3.7, 4.2],
-      labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+      title: 'Выручка и реклама',
+      sub: '12 месяцев · выручка (зелёный) vs расход (синий)',
+      type: 'dual',
+      labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+      revenue: [2.8,3.1,2.9,3.4,3.6,3.2,3.8,4.0,3.9,4.2,3.7,4.2],
+      adSpend: [0.6,0.7,0.65,0.72,0.68,0.75,0.7,0.65,0.6,0.58,0.62,0.55],
     },
     sideChart: {
-      title: 'Маржинальность по категориям',
-      type: 'bar-vertical',
+      title: 'ROI по каналам',
+      type: 'bar-h',
       data: [
-        { name: 'Электроника', value: 18 },
-        { name: 'Одежда', value: 35 },
-        { name: 'Дом', value: 28 },
-        { name: 'Спорт', value: 22 },
-        { name: 'Красота', value: 42 },
-        { name: 'Детский', value: 30 },
+        { name: 'SEO', val: 340 },
+        { name: 'Email', val: 280 },
+        { name: 'Прямой', val: 210 },
+        { name: 'Контекст', val: 150 },
+        { name: 'Соцсети', val: 120 },
+        { name: 'Рефералы', val: 95 },
       ],
     },
-    bottomCharts: {
-      channels: {
-        title: 'Каналы привлечения',
-        type: 'pie',
-        data: [
-          { name: 'SEO', value: 35 },
-          { name: 'Контекст', value: 28 },
-          { name: 'Прямой', value: 22 },
-          { name: 'Email', value: 8 },
-          { name: 'Соцсети', value: 7 },
-        ],
-      },
-      funnel: {
-        title: 'Воронка продаж',
-        data: [
-          { name: 'Посетители', value: 45000 },
-          { name: 'Корзина', value: 8100 },
-          { name: 'Оформление', value: 4950 },
-          { name: 'Оплата', value: 2723 },
-        ],
-      },
-      topMetrics: [
-        { name: 'Выручка (план)', value: 4.2, max: 4.5, pct: 93 },
-        { name: 'Конверсия (план)', value: 3.8, max: 4.0, pct: 95 },
-        { name: 'Ср. чек (план)', value: 4820, max: 5000, pct: 96 },
-        { name: 'Повторные (план)', value: 32, max: 35, pct: 91 },
-        { name: 'NPS (план)', value: 68, max: 75, pct: 91 },
+    romiChart: {
+      type: 'bar-group',
+      labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+      romi: [180,210,195,240,260,220,280,310,290,320,270,340],
+    },
+    funnel: {
+      data: [
+        { name: 'Посетители', value: 45000 },
+        { name: 'Корзина', value: 8100 },
+        { name: 'Оформление', value: 4950 },
+        { name: 'Оплата', value: 2723 },
       ],
     },
+    metrics: [
+      { label: 'Выручка (план)', value: '4.2М', max: '4.5М', pct: 93, color: 'var(--green)' },
+      { label: 'Конверсия (план)', value: '3.8%', max: '4.0%', pct: 95, color: 'var(--green)' },
+      { label: 'CAC (план)', value: '680₽', max: '600₽', pct: 88, color: 'var(--amber)' },
+      { label: 'LTV (план)', value: '12.4К', max: '12К', pct: 104, color: 'var(--green)' },
+      { label: 'ROMI (план)', value: '290%', max: '250%', pct: 116, color: 'var(--green)' },
+    ],
   },
   services: {
     kpis: [
-      { label: 'Пайплайн', value: '12.8М ₽', trend: '+18%', direction: 'up' },
-      { label: 'Конверсия', value: '24%', trend: '+3%', direction: 'up' },
-      { label: 'Маржа проекта', value: '34%', trend: '+2%', direction: 'up' },
-      { label: 'Загрузка', value: '87%', trend: '0%', direction: 'stable' },
+      { name: 'Пайплайн', val: '12.8М ₽', trend: 18, trendTxt: '+18%', per: 'к прошлому мес' },
+      { name: 'CPC', val: '85 ₽', trend: -10, trendTxt: '-10%', per: 'контекст' },
+      { name: 'Конверсия', val: '24%', trend: 3, trendTxt: '+3%', per: 'лид→сделка' },
+      { name: 'CAC', val: '4 200 ₽', trend: -12, trendTxt: '-12%', per: 'стоимость лида' },
+      { name: 'LTV', val: '89 000 ₽', trend: 22, trendTxt: '+22%', per: 'за 12 мес' },
+      { name: 'ROMI', val: '245%', trend: 35, trendTxt: '+35%', per: 'маркетинг ROI' },
     ],
     mainChart: {
-      title: 'Пайплайн',
-      subtitle: '12 месяцев, млн ₽',
-      type: 'area',
-      data: [6.2, 7.0, 7.5, 8.1, 8.8, 9.2, 9.8, 10.5, 11.0, 11.5, 12.2, 12.8],
-      labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+      title: 'Пайплайн и доход',
+      sub: '12 месяцев · пайплайн (синий) vs закрытие (зелёный)',
+      type: 'dual',
+      labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+      pipeline: [6.2,7.0,7.5,8.1,8.8,9.2,9.8,10.5,11.0,11.5,12.2,12.8],
+      closed: [1.8,2.1,2.0,2.3,2.5,2.2,2.8,3.0,2.7,3.1,2.6,3.2],
     },
     sideChart: {
-      title: 'Маржинальность по проектам',
-      type: 'bar-vertical',
+      title: 'ROMI по услугам',
+      type: 'bar-h',
       data: [
-        { name: 'Консалтинг', value: 42 },
-        { name: 'Дизайн', value: 38 },
-        { name: 'Разработка', value: 31 },
-        { name: 'Маркетинг', value: 35 },
-        { name: 'SEO', value: 45 },
-        { name: 'Поддержка', value: 55 },
+        { name: 'SEO-контент', val: 420 },
+        { name: 'Рефералы', val: 380 },
+        { name: 'Консалтинг', val: 290 },
+        { name: 'Дизайн', val: 240 },
+        { name: 'Таргет', val: 160 },
+        { name: 'Холодные', val: 85 },
       ],
     },
-    bottomCharts: {
-      channels: {
-        title: 'Источники клиентов',
-        type: 'pie',
-        data: [
-          { name: 'Рефералы', value: 38 },
-          { name: 'Сайт', value: 27 },
-          { name: 'Telegram', value: 18 },
-          { name: 'Конференции', value: 10 },
-          { name: 'Холодные', value: 7 },
-        ],
-      },
-      funnel: {
-        title: 'Воронка продаж',
-        data: [
-          { name: 'Лиды', value: 320 },
-          { name: 'Квалификация', value: 224 },
-          { name: 'Предложение', value: 128 },
-          { name: 'Сделка', value: 77 },
-        ],
-      },
-      topMetrics: [
-        { name: 'Пайплайн (план)', value: 12.8, max: 15.0, pct: 85 },
-        { name: 'Конверсия (план)', value: 24, max: 25, pct: 96 },
-        { name: 'Маржа (план)', value: 34, max: 35, pct: 97 },
-        { name: 'Загрузка (план)', value: 87, max: 90, pct: 97 },
-        { name: 'NPS (план)', value: 72, max: 75, pct: 96 },
+    romiChart: {
+      type: 'bar-group',
+      labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+      romi: [120,145,160,180,200,190,220,250,235,260,215,280],
+    },
+    funnel: {
+      data: [
+        { name: 'Лиды', value: 320 },
+        { name: 'Квалификация', value: 224 },
+        { name: 'Предложение', value: 128 },
+        { name: 'Сделка', value: 77 },
       ],
     },
+    metrics: [
+      { label: 'Пайплайн (план)', value: '12.8М', max: '15М', pct: 85, color: 'var(--blue)' },
+      { label: 'Конверсия (план)', value: '24%', max: '25%', pct: 96, color: 'var(--green)' },
+      { label: 'CAC (план)', value: '4.2К', max: '4К', pct: 95, color: 'var(--green)' },
+      { label: 'ROMI (план)', value: '245%', max: '200%', pct: 123, color: 'var(--green)' },
+      { label: 'Загрузка (план)', value: '87%', max: '90%', pct: 97, color: 'var(--green)' },
+    ],
   },
   production: {
     kpis: [
-      { label: 'Объём выпуска', value: '15 420 шт', trend: '+8%', direction: 'up' },
-      { label: 'OEE', value: '78%', trend: '+4%', direction: 'up' },
-      { label: 'Брак', value: '2.1%', trend: '-0.5%', direction: 'up' },
-      { label: 'Запасы', value: '18.5М ₽', trend: '-5%', direction: 'down' },
+      { name: 'Выпуск', val: '15 420 шт', trend: 8, trendTxt: '+8%', per: 'к плану' },
+      { name: 'CPC (трафик)', val: '18 ₽', trend: -20, trendTxt: '-20%', per: 'SEO оптимизация' },
+      { name: 'OEE', val: '78%', trend: 4, trendTxt: '+4%', per: 'загрузка мощностей' },
+      { name: 'Брак', val: '2.1%', trend: -0.5, trendTxt: '-0.5%', per: 'снижение потерь' },
+      { name: 'Себестоимость', val: '3 200 ₽', trend: -3, trendTxt: '-3%', per: 'экономия сырья' },
+      { name: 'ROMI рекламы', val: '310%', trend: 45, trendTxt: '+45%', per: 'контекст + SEO' },
     ],
     mainChart: {
       title: 'План/факт выпуска',
-      subtitle: '12 месяцев, тыс. шт',
+      sub: '12 месяцев · план (пунктир) vs факт (сплошная)',
       type: 'bar-compare',
-      planData: [12, 13, 12.5, 14, 14.5, 13, 15, 15.5, 15, 15.5, 14, 16],
-      factData: [11.5, 12.8, 12.2, 13.8, 14.2, 12.5, 14.8, 15.2, 14.7, 15.0, 13.8, 15.4],
-      labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+      labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+      plan: [12,13,12.5,14,14.5,13,15,15.5,15,15.5,14,16],
+      fact: [11.5,12.8,12.2,13.8,14.2,12.5,14.8,15.2,14.7,15.0,13.8,15.4],
     },
     sideChart: {
-      title: 'Себестоимость по цехам',
-      type: 'bar-horizontal',
+      title: 'ROMI по каналам',
+      type: 'bar-h',
       data: [
-        { name: 'Цех №1', value: 2.4 },
-        { name: 'Цех №2', value: 3.1 },
-        { name: 'Цех №3', value: 1.8 },
-        { name: 'Цех №4', value: 2.7 },
-        { name: 'Цех №5', value: 1.5 },
+        { name: 'SEO', val: 380 },
+        { name: 'Прямые', val: 310 },
+        { name: 'Контекст', val: 210 },
+        { name: 'Каталоги', val: 170 },
+        { name: 'Таргет', val: 140 },
+        { name: 'Выставки', val: 110 },
       ],
     },
-    bottomCharts: {
-      channels: {
-        title: 'Структура затрат',
-        type: 'pie',
-        data: [
-          { name: 'Сырьё', value: 45 },
-          { name: 'Зарплата', value: 25 },
-          { name: 'Энергия', value: 12 },
-          { name: 'Логистика', value: 10 },
-          { name: 'Прочее', value: 8 },
-        ],
-      },
-      funnel: {
-        title: 'Качество (воронка)',
-        data: [
-          { name: 'Выпуск', value: 15420 },
-          { name: 'Контроль', value: 15200 },
-          { name: 'Брак', value: 324 },
-          { name: 'На доработку', value: 180 },
-        ],
-      },
-      topMetrics: [
-        { name: 'Выпуск (план)', value: 15.4, max: 16.0, pct: 96 },
-        { name: 'OEE (план)', value: 78, max: 85, pct: 92 },
-        { name: 'Брак (план)', value: 2.1, max: 2.0, pct: 105 },
-        { name: 'Запасы (план)', value: 18.5, max: 20.0, pct: 93 },
-        { name: 'OEE (план)', value: 78, max: 80, pct: 98 },
+    romiChart: {
+      type: 'bar-group',
+      labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+      romi: [180,200,220,250,280,260,290,310,300,330,290,350],
+    },
+    funnel: {
+      data: [
+        { name: 'Заказ', value: 15420 },
+        { name: 'Контроль', value: 15200 },
+        { name: 'Брак', value: 324 },
+        { name: 'Доработка', value: 180 },
       ],
     },
+    metrics: [
+      { label: 'Выпуск (план)', value: '15.4К', max: '16К', pct: 96, color: 'var(--green)' },
+      { label: 'OEE (план)', value: '78%', max: '85%', pct: 92, color: 'var(--amber)' },
+      { label: 'Брак (план)', value: '2.1%', max: '2.0%', pct: 95, color: 'var(--amber)' },
+      { label: 'ROMI (план)', value: '310%', max: '280%', pct: 111, color: 'var(--green)' },
+      { label: 'Себест. (план)', value: '3.2К', max: '3.0К', pct: 94, color: 'var(--blue)' },
+    ],
   },
 };
 
-// ============================================
-// STATE
-// ============================================
-let currentSegment = 'ecommerce';
-let mainChartInstance = null;
-let sideChartInstance = null;
-let bottomChart1Instance = null;
-let bottomChart2Instance = null;
+let charts = {};
+let current = 'ecom';
 
 // ============================================
-// RENDER FUNCTIONS
+// RENDER KPIs
 // ============================================
-function renderKPIs(segment) {
-  const grid = document.getElementById('kpi-grid');
-  const kpis = segment.kpis;
-
-  grid.innerHTML = kpis.map((kpi, i) => {
-    const trendClass = kpi.direction === 'up' ? 'up' : (kpi.direction === 'down' ? 'down' : 'stable');
-    const cardClass = kpi.direction === 'up' ? 'positive' : (kpi.direction === 'down' ? 'negative' : 'neutral');
-    const arrow = kpi.direction === 'up' ? '↑' : (kpi.direction === 'down' ? '↓' : '→');
-
-    return `
-      <div class="kpi-card ${cardClass}" style="opacity:0; transform: translateY(20px);">
-        <div class="kpi-label">${kpi.label}</div>
-        <div class="kpi-value">${kpi.value}</div>
-        <span class="kpi-trend ${trendClass}">${arrow} ${kpi.trend}</span>
+function renderKpis(seg) {
+  const g = document.getElementById('kpi-grid');
+  const k = seg.kpis;
+  g.innerHTML = k.map((d, i) => {
+    const tClass = d.trend > 0 ? 'up' : (d.trend < 0 && i === 0 ? 'up' : 'neutral');
+    const dir = d.trend > 0 ? '↑' : (d.trend < 0 && i === 0 ? '↓' : '→');
+    return `<div class="kpi" style="transition-delay:${i*80}ms">
+      <div class="kpi-accent" style="background:${i<3?'var(--green)':i<5?'var(--blue)':'var(--purple)'}"></div>
+      <div class="kpi-name">${d.name}</div>
+      <div class="kpi-val">${d.val}</div>
+      <div class="kpi-meta">
+        <span class="kpi-trend ${tClass}">${dir} ${d.trendTxt}</span>
+        <span class="kpi-period">${d.per}</span>
       </div>
-    `;
+    </div>`;
   }).join('');
 
-  // Animate in
   requestAnimationFrame(() => {
-    const cards = grid.querySelectorAll('.kpi-card');
-    cards.forEach((card, i) => {
-      setTimeout(() => {
-        card.style.transition = 'opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out)';
-        card.style.opacity = '1';
-        card.style.transform = 'translateY(0)';
-      }, i * 80);
-    });
+    g.querySelectorAll('.kpi').forEach(c => c.classList.add('visible'));
   });
 }
 
-function renderMainChart(segment) {
-  const cfg = segment.mainChart;
-  const dom = document.getElementById('main-chart');
-  if (!mainChartInstance) {
-    mainChartInstance = echarts.init(dom);
-  }
+// ============================================
+// MAIN CHART
+// ============================================
+function renderMain(seg) {
+  const c = seg.mainChart;
+  const el = document.getElementById('mc');
+  if (!charts.mc) charts.mc = echarts.init(el);
+  document.getElementById('mc-title').textContent = c.title;
+  document.getElementById('mc-sub').textContent = c.sub;
 
-  document.getElementById('main-chart-title').textContent = cfg.title;
-  document.getElementById('main-chart-subtitle').textContent = cfg.subtitle;
-
-  let option;
-
-  if (cfg.type === 'line' || cfg.type === 'area') {
-    option = {
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(17,17,17,0.95)',
-        borderColor: 'rgba(255,255,255,0.1)',
-        textStyle: { color: '#f5f5f5', fontSize: 12 },
-      },
-      grid: { left: 40, right: 20, top: 10, bottom: 30 },
-      xAxis: {
-        type: 'category',
-        data: cfg.labels,
-        axisLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } },
-        axisLabel: { color: '#52525b', fontSize: 10 },
-        axisTick: { show: false },
-      },
-      yAxis: {
-        type: 'value',
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.04)' } },
-        axisLabel: { color: '#52525b', fontSize: 10 },
-      },
-      series: [{
-        data: cfg.data,
-        type: cfg.type === 'area' ? 'line' : 'line',
-        smooth: 0.4,
-        symbol: 'none',
-        lineStyle: { width: 2.5, color: '#22c55e' },
-        areaStyle: cfg.type === 'area' ? {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(34,197,94,0.25)' },
-            { offset: 1, color: 'rgba(34,197,94,0.01)' },
-          ])
-        } : undefined,
-      }],
-      animationDuration: 600,
-      animationEasing: 'cubicOut',
-    };
-  } else if (cfg.type === 'bar-compare') {
-    option = {
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(17,17,17,0.95)',
-        borderColor: 'rgba(255,255,255,0.1)',
-        textStyle: { color: '#f5f5f5', fontSize: 12 },
-      },
-      legend: {
-        data: ['План', 'Факт'],
-        textStyle: { color: '#52525b', fontSize: 10 },
-        top: 0,
-        right: 0,
-      },
-      grid: { left: 40, right: 20, top: 30, bottom: 30 },
-      xAxis: {
-        type: 'category',
-        data: cfg.labels,
-        axisLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } },
-        axisLabel: { color: '#52525b', fontSize: 10 },
-        axisTick: { show: false },
-      },
-      yAxis: {
-        type: 'value',
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.04)' } },
-        axisLabel: { color: '#52525b', fontSize: 10 },
-      },
+  let opt;
+  if (c.type === 'dual') {
+    opt = {
+      tooltip: { trigger:'axis', backgroundColor:'#111', borderColor:'#222', textStyle:{color:'#fafafa',fontSize:11} },
+      legend: { data:['Доход','Расход'], textStyle:{color:'#52525b',fontSize:10}, top:0 },
+      grid: { left:44, right:16, top:28, bottom:28 },
+      xAxis: { type:'category', data:c.labels, axisLine:{lineStyle:{color:'#1e1e22'}}, axisLabel:{color:'#52525b',fontSize:10} },
+      yAxis: { type:'value', splitLine:{lineStyle:{color:'#1a1a1e'}}, axisLabel:{color:'#52525b',fontSize:10,formatter:'{value}М'} },
       series: [
-        {
-          name: 'План',
-          data: cfg.planData,
-          type: 'bar',
-          barWidth: '30%',
-          itemStyle: { color: 'rgba(59,130,246,0.2)', borderRadius: [4, 4, 0, 0] },
-        },
-        {
-          name: 'Факт',
-          data: cfg.factData,
-          type: 'bar',
-          barWidth: '30%',
-          itemStyle: { color: '#3b82f6', borderRadius: [4, 4, 0, 0] },
-        },
+        { name:'Доход', type:'line', data:c.pipeline||c.revenue, smooth:0.4, symbol:'none', lineStyle:{width:2.5,color:'#22c55e'}, areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(34,197,94,0.2)'},{offset:1,color:'rgba(34,197,94,0.01)'}])} },
+        { name:'Расход', type:'line', data:c.closed||c.adSpend, smooth:0.4, symbol:'none', lineStyle:{width:2,color:'#3b82f6',type:'dashed'}, areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(59,130,246,0.08)'},{offset:1,color:'rgba(59,130,246,0.01)'}])} },
+      ],
+      animationDuration: 600,
+    };
+  } else if (c.type === 'bar-compare') {
+    opt = {
+      tooltip: { trigger:'axis', backgroundColor:'#111', borderColor:'#222', textStyle:{color:'#fafafa',fontSize:11} },
+      legend: { data:['План','Факт'], textStyle:{color:'#52525b',fontSize:10}, top:0 },
+      grid: { left:44, right:16, top:28, bottom:28 },
+      xAxis: { type:'category', data:c.labels, axisLine:{lineStyle:{color:'#1e1e22'}}, axisLabel:{color:'#52525b',fontSize:10} },
+      yAxis: { type:'value', splitLine:{lineStyle:{color:'#1a1a1e'}}, axisLabel:{color:'#52525b',fontSize:10,formatter:'{value}К'} },
+      series: [
+        { name:'План', type:'bar', data:c.plan, barWidth:'35%', itemStyle:{color:'rgba(59,130,246,0.15)',borderRadius:[4,4,0,0]} },
+        { name:'Факт', type:'bar', data:c.fact, barWidth:'35%', itemStyle:{color:'#3b82f6',borderRadius:[4,4,0,0]} },
       ],
       animationDuration: 600,
-      animationEasing: 'cubicOut',
     };
   }
-
-  mainChartInstance.setOption(option, true);
+  charts.mc.setOption(opt, true);
 }
 
-function renderSideChart(segment) {
-  const cfg = segment.sideChart;
-  const dom = document.getElementById('side-chart');
-  if (!sideChartInstance) {
-    sideChartInstance = echarts.init(dom);
-  }
+// ============================================
+// SIDE CHART (bar horizontal)
+// ============================================
+function renderSide(seg) {
+  const c = seg.sideChart;
+  const el = document.getElementById('sc');
+  if (!charts.sc) charts.sc = echarts.init(el);
+  document.getElementById('sc-title').textContent = c.title;
 
-  document.getElementById('side-chart-title').textContent = cfg.title;
-
-  const data = cfg.data.map(d => d.value);
-  const names = cfg.data.map(d => d.name);
-
-  const colors = ['#22c55e', '#3b82f6', '#22c55e', '#3b82f6', '#22c55e', '#3b82f6'];
-
-  let option;
-
-  if (cfg.type === 'bar-vertical') {
-    option = {
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(17,17,17,0.95)',
-        borderColor: 'rgba(255,255,255,0.1)',
-        textStyle: { color: '#f5f5f5', fontSize: 12 },
-      },
-      grid: { left: 10, right: 10, top: 10, bottom: 40 },
-      xAxis: {
-        type: 'category',
-        data: names,
-        axisLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } },
-        axisLabel: { color: '#52525b', fontSize: 9, rotate: 0 },
-        axisTick: { show: false },
-      },
-      yAxis: {
-        type: 'value',
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.04)' } },
-        axisLabel: { color: '#52525b', fontSize: 9, formatter: '{value}%' },
-      },
-      series: [{
-        data: data.map((v, i) => ({
-          value: v,
-          itemStyle: { color: v >= 30 ? '#22c55e' : '#f59e0b', borderRadius: [3, 3, 0, 0] },
-        })),
-        type: 'bar',
-        barWidth: '45%',
-      }],
-      animationDuration: 600,
-      animationEasing: 'cubicOut',
-    };
-  } else if (cfg.type === 'bar-horizontal') {
-    option = {
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(17,17,17,0.95)',
-        borderColor: 'rgba(255,255,255,0.1)',
-        textStyle: { color: '#f5f5f5', fontSize: 12 },
-      },
-      grid: { left: 60, right: 30, top: 10, bottom: 10 },
-      xAxis: {
-        type: 'value',
-        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.04)' } },
-        axisLabel: { color: '#52525b', fontSize: 9, formatter: '{value}М' },
-      },
-      yAxis: {
-        type: 'category',
-        data: names.reverse(),
-        axisLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } },
-        axisLabel: { color: '#a1a1aa', fontSize: 10 },
-        axisTick: { show: false },
-      },
-      series: [{
-        data: cfg.data.map(d => d.value).reverse(),
-        type: 'bar',
-        barWidth: '40%',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: '#3b82f6' },
-            { offset: 1, color: '#22c55e' },
-          ]),
-          borderRadius: [0, 4, 4, 0],
-        },
-      }],
-      animationDuration: 600,
-      animationEasing: 'cubicOut',
-    };
-  }
-
-  sideChartInstance.setOption(option, true);
-}
-
-function renderBottomCharts(segment) {
-  const cfg = segment.bottomCharts;
-
-  // Channel pie chart
-  const pieDom = document.getElementById('bottom-chart-1');
-  if (!bottomChart1Instance) {
-    bottomChart1Instance = echarts.init(pieDom);
-  }
-  const pieData = cfg.channels.data.map(d => ({
-    name: d.name,
-    value: d.value,
-  }));
-  const pieColors = ['#22c55e', '#3b82f6', '#f59e0b', '#a855f7', '#ef4444'];
-
-  bottomChart1Instance.setOption({
-    tooltip: {
-      trigger: 'item',
-      backgroundColor: 'rgba(17,17,17,0.95)',
-      borderColor: 'rgba(255,255,255,0.1)',
-      textStyle: { color: '#f5f5f5', fontSize: 12 },
-    },
+  const colors = ['#22c55e','#06b6d4','#a855f7','#3b82f6','#f59e0b','#ef4444'];
+  const opt = {
+    tooltip: { trigger:'axis', backgroundColor:'#111', borderColor:'#222', textStyle:{color:'#fafafa',fontSize:11} },
+    grid: { left:80, right:30, top:10, bottom:10 },
+    xAxis: { type:'value', splitLine:{lineStyle:{color:'#1a1a1e'}}, axisLabel:{color:'#52525b',fontSize:9,formatter:'{value}%'} },
+    yAxis: { type:'category', data:c.data.map(d=>d.name).reverse(), axisLine:{lineStyle:{color:'#1e1e22'}}, axisLabel:{color:'#a1a1aa',fontSize:10} },
     series: [{
-      type: 'pie',
-      radius: ['45%', '70%'],
-      center: ['50%', '55%'],
-      avoidLabelOverlap: false,
-      itemStyle: { borderRadius: 6, borderColor: '#111111', borderWidth: 3 },
-      label: { show: false },
-      labelLine: { show: false },
-      data: pieData.map((d, i) => ({ ...d, itemStyle: { color: pieColors[i % pieColors.length] } })),
-      emphasis: {
-        itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.3)' },
-      },
+      type:'bar',
+      data: c.data.map(d=>d.value).reverse(),
+      barWidth:38,
+      itemStyle: {
+        borderRadius:[0,5,5,0],
+        color: function(params) {
+          const c = colors[params.dataIndex % colors.length];
+          return new echarts.graphic.LinearGradient(0,0,1,0,[
+            {offset:0, color: c+'88'},
+            {offset:1, color: c}
+          ]);
+        }
+      }
     }],
     animationDuration: 600,
-  }, true);
+  };
+  charts.sc.setOption(opt, true);
+}
 
-  // Funnel chart
-  const funnelDom = document.getElementById('bottom-chart-2');
-  if (!bottomChart2Instance) {
-    bottomChart2Instance = echarts.init(funnelDom);
-  }
-  const funnelData = cfg.funnel.data.map(d => ({ name: d.name, value: d.value }));
-  const funnelColors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444'];
+// ============================================
+// ROMI CHART (bar group)
+// ============================================
+function renderROMI(seg) {
+  const el = document.getElementById('ch1');
+  if (!charts.ch1) charts.ch1 = echarts.init(el);
+  const c = seg.romiChart;
 
-  bottomChart2Instance.setOption({
-    tooltip: {
-      trigger: 'item',
-      backgroundColor: 'rgba(17,17,17,0.95)',
-      borderColor: 'rgba(255,255,255,0.1)',
-      textStyle: { color: '#f5f5f5', fontSize: 12 },
-    },
+  const opt = {
+    tooltip: { trigger:'axis', backgroundColor:'#111', borderColor:'#222', textStyle:{color:'#fafafa',fontSize:11} },
+    grid: { left:44, right:16, top:16, bottom:28 },
+    xAxis: { type:'category', data:c.labels, axisLine:{lineStyle:{color:'#1e1e22'}}, axisLabel:{color:'#52525b',fontSize:10} },
+    yAxis: { type:'value', splitLine:{lineStyle:{color:'#1a1a1e'}}, axisLabel:{color:'#52525b',fontSize:9,formatter:'{value}%'} },
     series: [{
-      type: 'funnel',
-      left: '10%',
-      top: 5,
-      bottom: 5,
-      width: '80%',
-      min: 0,
-      max: funnelData[0].value,
-      minSize: '0%',
-      maxSize: '100%',
-      sort: 'descending',
-      gap: 4,
-      label: {
-        show: true,
-        position: 'inside',
-        color: '#fff',
-        fontSize: 11,
-        formatter: '{b}\n{c}',
-      },
-      labelLine: { show: false },
-      itemStyle: { borderColor: '#111', borderWidth: 2 },
-      data: funnelData.map((d, i) => ({
-        ...d,
-        itemStyle: { color: funnelColors[i % funnelColors.length] },
+      name:'ROMI %',
+      type:'bar',
+      data:c.romi,
+      barWidth:'55%',
+      itemStyle: {
+        borderRadius:[4,4,0,0],
+        color: function(params) {
+          return params.value >= 250 ? '#22c55e' : (params.value >= 200 ? '#06b6d4' : '#f59e0b');
+        }
+      }
+    }],
+    animationDuration: 600,
+  };
+  charts.ch1.setOption(opt, true);
+}
+
+// ============================================
+// FUNNEL
+// ============================================
+function renderFunnel(seg) {
+  const el = document.getElementById('ch2');
+  if (!charts.ch2) charts.ch2 = echarts.init(el);
+  const colors = ['#22c55e','#06b6d4','#a855f7','#ef4444'];
+
+  const opt = {
+    tooltip: { trigger:'item', backgroundColor:'#111', borderColor:'#222', textStyle:{color:'#fafafa',fontSize:11} },
+    series: [{
+      type:'funnel',
+      left:'10%', bottom:5, width:'80%',
+      min:0, max: seg.funnel.data[0].value,
+      minSize:'0%', maxSize:'100%',
+      sort:'descending', gap:4,
+      label: { show:true, position:'inside', color:'#fff', fontSize:11, formatter:'{b}\n{c} ({d}%)' },
+      labelLine: { show:false },
+      itemStyle: { borderColor:'#111', borderWidth:2 },
+      data: seg.funnel.data.map((d,i)=>({
+        name:d.name, value:d.value,
+        itemStyle: { color: colors[i%colors.length] }
       })),
     }],
     animationDuration: 600,
-  }, true);
+  };
+  charts.ch2.setOption(opt, true);
+}
 
-  // Top metrics bars
-  const metricsDom = document.getElementById('top-metrics');
-  metricsDom.innerHTML = cfg.topMetrics.map(m => {
-    const pctColor = m.pct >= 95 ? 'var(--accent)' : (m.pct >= 85 ? 'var(--accent-secondary)' : 'var(--warning)');
-    const valDisplay = m.name.includes('Брак') ? m.value + '%' :
-      (typeof m.value === 'number' && m.value > 100 ? m.value.toLocaleString('ru-RU') : m.value);
-    return `
-      <div class="channel-row">
-        <span class="channel-name">${m.name}</span>
-        <span class="channel-value">${valDisplay}</span>
-        <div class="channel-bar-wrap">
-          <div class="channel-bar" style="width:0%; background:${pctColor};" data-target="${m.pct}"></div>
-        </div>
-      </div>
-    `;
+// ============================================
+// METRICS LIST
+// ============================================
+function renderMetrics(seg) {
+  const el = document.getElementById('mlist');
+  el.innerHTML = seg.metrics.map(m => {
+    return `<div class="metric-item">
+      <span class="metric-label">${m.label}</span>
+      <span class="metric-val">${m.value}</span>
+      <div class="metric-bar"><div class="metric-fill" data-pct="${m.pct}" style="background:${m.color}"></div></div>
+    </div>`;
   }).join('');
 
-  // Animate bars
   requestAnimationFrame(() => {
     setTimeout(() => {
-      document.querySelectorAll('.channel-bar').forEach(bar => {
-        bar.style.width = bar.dataset.target + '%';
-      });
-    }, 200);
+      el.querySelectorAll('.metric-fill').forEach(f => f.style.width = f.dataset.pct + '%');
+    }, 100);
   });
 }
 
-function updateDashTime() {
-  const now = new Date();
-  const h = String(now.getHours()).padStart(2, '0');
-  const m = String(now.getMinutes()).padStart(2, '0');
-  const s = String(now.getSeconds()).padStart(2, '0');
-  document.getElementById('dash-time').textContent = `${h}:${m}:${s}`;
-}
-
 // ============================================
-// MAIN SWITCH FUNCTION
+// MASTER SWITCH
 // ============================================
-function switchSegment(segmentKey) {
-  const segment = segments[segmentKey];
-  if (!segment) return;
+function seg(key) {
+  current = key;
+  const s = D[key];
 
-  currentSegment = segmentKey;
-  renderKPIs(segment);
-  renderMainChart(segment);
-  renderSideChart(segment);
-  renderBottomCharts(segment);
-
-  // Update switcher buttons
-  document.querySelectorAll('.segment-btn').forEach(btn => {
-    btn.classList.toggle('active', btn.dataset.segment === segmentKey);
+  // Buttons
+  document.querySelectorAll('.sw-btn').forEach(b => {
+    b.classList.toggle('active', b.dataset.seg === key);
   });
+
+  renderKpis(s);
+  renderMain(s);
+  renderSide(s);
+  renderROMI(s);
+  renderFunnel(s);
+  renderMetrics(s);
 }
 
 // ============================================
 // INIT
 // ============================================
 document.addEventListener('DOMContentLoaded', () => {
-  // Expose to global scope for onclick handlers
-  window.switchSegment = switchSegment;
+  // Segment switcher — event delegation
+  document.getElementById('switcher').addEventListener('click', (e) => {
+    const btn = e.target.closest('.sw-btn');
+    if (!btn) return;
+    seg(btn.dataset.seg);
+  });
 
   // Initial render
-  switchSegment('ecommerce');
+  seg('ecom');
 
-  // Update time
-  updateDashTime();
-  setInterval(updateDashTime, 1000);
+  // Clock
+  function tick() {
+    const n = new Date();
+    document.getElementById('clock').textContent =
+      String(n.getHours()).padStart(2,'0') + ':' +
+      String(n.getMinutes()).padStart(2,'0') + ':' +
+      String(n.getSeconds()).padStart(2,'0');
+  }
+  tick();
+  setInterval(tick, 1000);
 
-  // Resize handler
-  window.addEventListener('resize', () => {
-    mainChartInstance?.resize();
-    sideChartInstance?.resize();
-    bottomChart1Instance?.resize();
-    bottomChart2Instance?.resize();
+  // Resize
+  const ro = new ResizeObserver(() => {
+    Object.values(charts).forEach(c => c.resize());
   });
+  ro.observe(document.getElementById('dash'));
 });
 </script>
 </body>