From dd2c9ae9fd1f7bfd07f3f762425c1ad403acad11 Mon Sep 17 00:00:00 2001
From: tore <ekazhman@gmail.com>
Date: Sun, 13 Sep 2026 15:19:01 +0000
Subject: [PATCH] =?UTF-8?q?v2:=20=D0=BF=D0=B5=D1=80=D0=B5=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B8=D0=BB=20=D0=BD=D0=B0=20=D0=94=D0=A1=20KT=20A?=
 =?UTF-8?q?I=20=E2=80=94=20=D0=BA=D0=BB=D0=B0=D1=81=D1=81=D1=8B=20kt-ai-*,?=
 =?UTF-8?q?=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B=20var(--kt-ai-=E2=80=A6?=
 =?UTF-8?q?),=20=D0=B5=D0=B4=D0=B8=D0=BD=D1=8B=D0=B9=20=D1=81=D1=82=D0=B0?=
 =?UTF-8?q?=D1=82=D1=83=D1=81=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 58 ++++++++++++++++++++++++------------------------------
 1 file changed, 26 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index 06b008d..d1f80fe 100644
--- a/index.html
+++ b/index.html
@@ -9,27 +9,14 @@
 <link rel="stylesheet" href="./design-system/kt-ai-components.css">
 <link rel="stylesheet" href="./design-system/kt-ai-page.css">
 <style>
-body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
-.kt-ai-app-header { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-3) 0; border-bottom: 1px solid var(--kt-ai-border); }
-.kt-ai-app-title { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); }
 .kt-ai-filters-bar { display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--kt-ai-space-5); }
 .kt-ai-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
-.kt-ai-kpi { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-4); }
-.kt-ai-kpi .value { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-bold); font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg); }
-.kt-ai-kpi .label { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-1); }
-.kt-ai-kpi .hint { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); margin-top: var(--kt-ai-space-2); }
-.kt-ai-chart-wrap { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
 .kt-ai-chart { height: 200px; display: flex; align-items: flex-end; gap: 8px; }
 .kt-ai-chart-bar { flex: 1; background: var(--kt-ai-chart-blue); border-radius: 2px 2px 0 0; position: relative; min-width: 20px; max-width: 28px; }
 .kt-ai-chart-bar[data-kt-tip] { cursor: pointer; }
 .kt-ai-chart-bar:hover { opacity: 0.85; }
-.kt-ai-table-wrap { overflow-x: auto; margin-bottom: var(--kt-ai-space-6); }
-.kt-ai-table { width: 100%; border-collapse: collapse; font-size: var(--kt-ai-text-sm); }
-.kt-ai-table th { text-align: left; padding: var(--kt-ai-space-2) var(--kt-ai-space-3); border-bottom: 1px solid var(--kt-ai-border-strong); color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); }
-.kt-ai-table td { padding: var(--kt-ai-space-2) var(--kt-ai-space-3); border-bottom: 1px solid var(--kt-ai-border); color: var(--kt-ai-fg); }
-.kt-ai-table td.num { text-align: right; font-family: var(--kt-ai-font-mono); tabular-nums: lining; }
 .kt-ai-insights { background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
-.kt-ai-insights h3 { font-size: var(--kt-ai-text-base); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-3); }
+.kt-ai-insights h3 { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-3); }
 .kt-ai-insights p { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-3); line-height: 1.5; }
 .kt-ai-recommendations { margin-top: var(--kt-ai-space-4); }
 .kt-ai-recommendations h4 { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-2); }
@@ -42,16 +29,18 @@ body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
 </head>
 <body data-kt-data-mode="demo">
 
-<header class="kt-ai-wrap">
-  <div class="kt-ai-app-header">
-    <img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
-    <span class="kt-ai-app-title">Бизнес-метрики</span>
+<header class="kt-ai-pagehead">
+  <div class="kt-ai-wrap kt-ai-pagehead-in">
+    <div style="display:flex;align-items:center;gap:var(--kt-ai-space-3)">
+      <img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
+      <strong>Бизнес-метрики</strong>
+    </div>
     <span class="kt-ai-spacer"></span>
     <span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
   </div>
 </header>
 
-<main class="kt-ai-wrap" style="flex:1; padding-top: var(--kt-ai-space-5);">
+<main class="kt-ai-wrap" style="padding-top:var(--kt-ai-space-5)">
 
   <div class="kt-ai-filters-bar">
     <div class="kt-ai-field">
@@ -81,7 +70,7 @@ body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
     </div>
     <div class="kt-ai-field">
       <label>
-        <input type="checkbox" id="toggle-data" style="margin-right: var(--kt-ai-space-2)">
+        <input type="checkbox" id="toggle-data" style="margin-right:var(--kt-ai-space-2)">
         Нет данных
       </label>
     </div>
@@ -110,11 +99,11 @@ body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
     </div>
   </div>
 
-  <div data-kt-region="chart" class="kt-ai-chart-wrap">
+  <div data-kt-region="chart" class="kt-ai-card" style="padding:var(--kt-ai-space-4);margin-bottom:var(--kt-ai-space-6)">
     <div id="chart" class="kt-ai-chart"></div>
   </div>
 
-  <div data-kt-region="table" class="kt-ai-table-wrap">
+  <div class="kt-ai-table-wrap" data-kt-region="table" style="margin-bottom:var(--kt-ai-space-6)">
     <table class="kt-ai-table">
       <thead>
         <tr>
@@ -133,7 +122,7 @@ body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
   <div data-kt-region="insights" class="kt-ai-insights">
     <h3>Объяснение отклонений</h3>
     <p id="insights-text">Загрузка...</p>
-    <div class="kt-ai-recommendations">
+    <div data-kt-region="recommendations" class="kt-ai-recommendations">
       <h4>Рекомендации</h4>
       <ul id="recommendations-list"></ul>
     </div>
@@ -262,18 +251,23 @@ function render(view) {
   document.documentElement.dataset.ktDataState = view.status;
   
   const emptyRegion = document.querySelector('[data-kt-region="empty"]');
+  const kpiRegion = document.querySelector('[data-kt-region="kpi"]');
+  const chartRegion = document.querySelector('[data-kt-region="chart"]');
+  const tableRegion = document.querySelector('[data-kt-region="table"]');
+  const insightsRegion = document.querySelector('[data-kt-region="insights"]');
+  
   if (view.status === "empty") {
     emptyRegion.style.display = "block";
-    document.querySelector('[data-kt-region="kpi"]').style.display = "none";
-    document.querySelector('[data-kt-region="chart"]').style.display = "none";
-    document.querySelector('[data-kt-region="table"]').style.display = "none";
-    document.querySelector('[data-kt-region="insights"]').style.display = "none";
+    kpiRegion.style.display = "none";
+    chartRegion.parentElement.style.display = "none";
+    tableRegion.parentElement.style.display = "none";
+    insightsRegion.style.display = "none";
   } else {
     emptyRegion.style.display = "none";
-    document.querySelector('[data-kt-region="kpi"]').style.display = "grid";
-    document.querySelector('[data-kt-region="chart"]').style.display = "block";
-    document.querySelector('[data-kt-region="table"]').style.display = "block";
-    document.querySelector('[data-kt-region="insights"]').style.display = "block";
+    kpiRegion.style.display = "grid";
+    chartRegion.parentElement.style.display = "block";
+    tableRegion.parentElement.style.display = "block";
+    insightsRegion.style.display = "block";
 
     document.getElementById("kpi-conversion").textContent = view.kpis.conversion || "—";
     document.getElementById("kpi-satisfaction").textContent = view.kpis.satisfaction || "—";
@@ -336,7 +330,6 @@ document.addEventListener("DOMContentLoaded", function() {
   document.querySelectorAll('[data-kt-tip]').forEach(el => {
     el.addEventListener("mouseenter", function() {
       const tip = document.createElement("div");
-      tip.className = "kt-ai-chart-tip";
       tip.textContent = this.getAttribute("data-kt-tip");
       tip.style.position = "absolute";
       tip.style.background = "var(--kt-ai-bg)";
@@ -345,6 +338,7 @@ document.addEventListener("DOMContentLoaded", function() {
       tip.style.borderRadius = "var(--kt-ai-radius-md)";
       tip.style.fontSize = "var(--kt-ai-text-xs)";
       tip.style.pointerEvents = "none";
+      tip.style.zIndex = "var(--kt-ai-z-tooltip)";
       document.body.appendChild(tip);
       const rect = this.getBoundingClientRect();
       tip.style.left = (rect.left + rect.width/2 - tip.offsetWidth/2) + "px";