From 72728df2ef7dfa54bbfb9fc8ee22ea1f67d428c0 Mon Sep 17 00:00:00 2001
From: tore <ekazhman@gmail.com>
Date: Mon, 7 Sep 2026 11:37:56 +0000
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BF=D1=83=D1=82=D0=B8=20=D0=BA=20=D0=94?=
 =?UTF-8?q?=D0=A1:=20=D0=BE=D1=82=D0=BD=D0=BE=D1=81=D0=B8=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20./design-system/...,=20=D1=83?=
 =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=BD=D1=8B=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BE?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=BA=D0=BB=D0=B0=D1=81=D1=81=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 199 ++++++++++++-----------------------------------------
 1 file changed, 45 insertions(+), 154 deletions(-)

diff --git a/index.html b/index.html
index 6304b13..b4d4b27 100644
--- a/index.html
+++ b/index.html
@@ -4,117 +4,31 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>OKR Дашборд</title>
-<script data-kt-ai-base-resolver>
-(function () {
-  var корень = document.documentElement;
-  function норм(значение) {
-    значение = (значение || "").trim();
-    if (!значение || значение === "/") return "";
-    if (значение.charAt(0) !== "/") значение = "/" + значение;
-    return значение.replace(/\/+$/, "");
-  }
-  var база = норм(корень.getAttribute("data-kt-ai-base"));
-  var папка = норм(корень.getAttribute("data-kt-ai-static")) || "/design-system";
-  window.ktAiBase = база;
-  window.ktAiAsset = function (имя) {
-    return /^([a-z][a-z0-9+.-]*:|\/\/)/i.test(имя) ? имя : база + папка + "/" + имя;
-  };
-})();
-</script>
-<script data-kt-ai-boot="css">
-["kt-ai-tokens.css", "kt-ai-components.css"].forEach(function (файл) {
-  var ссылка = document.createElement("link");
-  ссылка.rel = "stylesheet";
-  ссылка.href = window.ktAiAsset(файл);
-  document.head.appendChild(ссылка);
-});
-</script>
+<link rel="stylesheet" href="./design-system/kt-ai-fonts.css">
+<link rel="stylesheet" href="./design-system/kt-ai-tokens.css">
+<link rel="stylesheet" href="./design-system/kt-ai-components.css">
+<link rel="stylesheet" href="./design-system/kt-ai-page.css">
 <style>
-@layer product {
-  *, *::before, *::after { box-sizing: border-box; }
-  body { margin: 0; }
-  .shell-topbar-burger { display: none; }
-  @media (max-width: 831.98px) { .shell-topbar-burger { display: inline-flex; } }
-  .sb-top { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: 2px 4px 12px; }
-  .sb-top img { width: 28px; height: 28px; border-radius: var(--kt-ai-radius-xl); flex-shrink: 0; }
-  .sb-top .nm { font-weight: var(--kt-ai-weight-semibold); font-size: var(--kt-ai-text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-  .sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
-  .sb-bottom .badge { margin-left: auto; font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); border-radius: var(--kt-ai-radius-full); padding: 0 6px; }
-  .sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--kt-ai-space-4); }
-  .sb-bottom button { background: none; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
-  .kt-ai-shell[data-rail="true"] .sb-tour { justify-content: center; padding: var(--kt-ai-space-3); }
-  .kt-ai-shell[data-rail="true"] .sb-tour .tx { display: none; }
-  .topbar-ai {
-    display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); flex-shrink: 0;
-    height: 32px; padding: 0 var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-full);
-    border: 1px solid var(--kt-ai-border-strong); background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg);
-    cursor: pointer; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium);
-    transition: background var(--kt-ai-dur-fast);
-  }
-  .topbar-ai:hover { background: var(--kt-ai-bg-hover); }
-  @media (max-width: 639.98px) { .topbar-ai { padding: 0; width: 32px; justify-content: center; } .topbar-ai .ai-label { display: none; } }
-  .topbar-title { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); min-width: 0; }
-  .topbar-title .t { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .topbar-title .sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; }
-  @media (max-width: 639.98px) { .topbar-title .sub { display: none; } }
-  .kt-ai-topbar .kt-ai-search-field:not([data-compact="true"]) { max-width: 240px; }
-  @media (max-width: 767.98px) { .kt-ai-topbar .kt-ai-search-field:not([data-compact="true"]) { max-width: 176px; } }
-  #view { width: 100%; max-width: var(--kt-ai-content-table); margin-inline: auto; padding: var(--kt-ai-stack-region) var(--kt-ai-stack-region) var(--kt-ai-space-11); }
-  @media (max-width: 639.98px) { #view { padding: var(--kt-ai-stack-group) var(--kt-ai-space-6) var(--kt-ai-space-10); } }
-  .page-hero { display: flex; align-items: flex-start; gap: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-stack-group); }
-  .page-hero .ph-text { flex: 1; min-width: 0; }
-  .page-hero h1 { margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; line-height: 1.15; }
-  .page-hero .sub { margin-top: var(--kt-ai-space-3); font-size: var(--kt-ai-text-md); color: var(--kt-ai-fg-muted); }
-  .page-hero .ph-action { flex-shrink: 0; }
-  @media (max-width: 639.98px) { .page-hero { flex-direction: column; gap: var(--kt-ai-space-5); } .page-hero h1 { font-size: var(--kt-ai-text-2xl); } }
-  .shell-panel-toggle { display: inline-flex; }
-  @media (max-width: 831.98px) { .shell-panel-toggle { display: none; } }
-  .sb-new { margin: 0 4px var(--kt-ai-space-5); }
-  .sb-new .kt-ai-btn { width: 100%; justify-content: center; }
-  .kt-ai-shell[data-rail="true"] .sb-new .kt-ai-btn { padding: 0; }
-  .sb-bottom .kt-ai-nav-item > .kt-icon { flex: 0 0 20px; }
-  .sb-bottom .kt-ai-avatar { width: 20px; height: 20px; font-size: 8px; flex: 0 0 20px; }
-  .sb-bottom > div:last-child { padding: var(--kt-ai-space-3) var(--kt-ai-space-4) 0; }
-  .case-steps { margin-bottom: var(--kt-ai-space-6); overflow-x: auto; padding-bottom: 2px; }
-  .case-file { margin-top: var(--kt-ai-space-4); }
-  .menu-user { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); }
-  .menu-user .nm { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); }
-  .menu-user .role { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
-  .notif-menu { min-width: 300px; max-width: 340px; padding: 0; }
-  .notif-menu .head { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-semibold); border-bottom: 1px solid var(--kt-ai-divider); }
-  .toolbar-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; padding: 0 0 var(--kt-ai-stack-block); }
-  .toolbar-row .spacer { flex: 1; }
-  .drawer-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
-  .drawer-head .t { flex: 1; }
-  .drawer-flags { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); margin: var(--kt-ai-space-6) 0; }
-  .drawer-actions { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-8); }
-  .kt-ai-card .drawer-actions { flex-direction: row-reverse; justify-content: flex-start; }
-  .kt-ai-card .drawer-actions .kt-ai-btn { width: auto; }
-  @media (max-width: 639.98px) { .kt-ai-card .drawer-actions { flex-direction: column; } }
-  .section-stub { margin-top: var(--kt-ai-space-10); }
-  .proto-label { margin-left: auto; }
-  td .kt-ai-checkbox input, th .kt-ai-checkbox input { margin: 0; }
-  .topbar-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--kt-ai-primary); }
-  .kt-ai-topbar .kt-ai-menu { right: 0; left: auto; top: calc(100% + 6px); }
-  .progress-cell { display: flex; align-items: center; gap: var(--kt-ai-space-3); }
-  .progress-bar { flex: 1; height: 8px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-sunken); overflow: hidden; }
-  .progress-bar > span { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-chart-blue); }
-  .progress-bar.ok > span { background: var(--kt-ai-chart-green); }
-  .progress-bar.warn > span { background: var(--kt-ai-chart-orange); }
-  .progress-bar.risk > span { background: var(--kt-ai-chart-red); }
-  .progress-pct { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); min-width: 42px; text-align: right; }
-  .chart-container { height: 220px; margin-top: var(--kt-ai-space-6); }
-  .chart-bars { display: flex; align-items: flex-end; gap: var(--kt-ai-space-4); height: 180px; padding: var(--kt-ai-space-4) 0; }
-  .chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-2); }
-  .chart-bar .bar { width: 100%; max-width: 48px; border-radius: var(--kt-ai-radius-md) var(--kt-ai-radius-md) 0 0; background: var(--kt-ai-chart-blue); transition: height 0.3s ease; }
-  .chart-bar .bar.ok { background: var(--kt-ai-chart-green); }
-  .chart-bar .bar.warn { background: var(--kt-ai-chart-orange); }
-  .chart-bar .bar.risk { background: var(--kt-ai-chart-red); }
-  .chart-bar .label { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); text-align: center; }
-  .chart-bar .value { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg); }
-  .owner-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); display: inline-flex; align-items: center; justify-content: center; font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-semibold); margin-right: var(--kt-ai-space-2); }
-  .kt-ai-kpi-strip { margin-bottom: var(--kt-ai-stack-block); }
-}
+.page-hero { margin-bottom: var(--kt-ai-stack-group); }
+.toolbar-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; padding: 0 0 var(--kt-ai-stack-block); }
+.toolbar-row .spacer { flex: 1; }
+.progress-cell { display: flex; align-items: center; gap: var(--kt-ai-space-3); }
+.progress-bar { flex: 1; height: 8px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-sunken); overflow: hidden; }
+.progress-bar > span { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-chart-blue); }
+.progress-bar.ok > span { background: var(--kt-ai-chart-green); }
+.progress-bar.warn > span { background: var(--kt-ai-chart-orange); }
+.progress-bar.risk > span { background: var(--kt-ai-chart-red); }
+.progress-pct { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); min-width: 42px; text-align: right; }
+.chart-container { height: 220px; margin-top: var(--kt-ai-space-6); }
+.chart-bars { display: flex; align-items: flex-end; gap: var(--kt-ai-space-4); height: 180px; padding: var(--kt-ai-space-4) 0; }
+.chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-2); }
+.chart-bar .bar { width: 100%; max-width: 48px; border-radius: var(--kt-ai-radius-md) var(--kt-ai-radius-md) 0 0; background: var(--kt-ai-chart-blue); transition: height 0.3s ease; }
+.chart-bar .bar.ok { background: var(--kt-ai-chart-green); }
+.chart-bar .bar.warn { background: var(--kt-ai-chart-orange); }
+.chart-bar .bar.risk { background: var(--kt-ai-chart-red); }
+.chart-bar .label { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); text-align: center; }
+.chart-bar .value { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg); }
+.owner-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); display: inline-flex; align-items: center; justify-content: center; font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-semibold); margin-right: var(--kt-ai-space-2); }
 </style>
 </head>
 <body class="kt-ai-app">
@@ -188,32 +102,9 @@
 }
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
-  <symbol id="dashboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></symbol>
-  <symbol id="trophy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></symbol>
-  <symbol id="users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
-  <symbol id="chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 16h8"/><path d="M7 11h12"/><path d="M7 6h3"/></symbol>
-  <symbol id="search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></symbol>
-  <symbol id="filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></symbol>
-  <symbol id="settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5H3"/><path d="M12 19H3"/><path d="M14 3v4"/><path d="M16 17v4"/><path d="M21 12h-9"/><path d="M21 19h-5"/><path d="M21 5h-7"/><path d="M8 10v4"/></symbol>
-  <symbol id="help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></symbol>
-  <symbol id="bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></symbol>
-  <symbol id="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></symbol>
-  <symbol id="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></symbol>
-  <symbol id="panelLeftClose" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></symbol>
-  <symbol id="panelLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></symbol>
-  <symbol id="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></symbol>
-  <symbol id="x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></symbol>
-  <symbol id="chevronRight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></symbol>
-  <symbol id="more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></symbol>
-  <symbol id="plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5v14"/></symbol>
-</svg>
-
 <div id="shell-root"></div>
 
-<script src="design-system/kt-ai-composer.js"></script>
-<script src="design-system/kt-ai-feedback.js"></script>
-<script src="design-system/kt-ai-chart-tip.js"></script>
+<script src="./design-system/kt-ai-chart-tip.js"></script>
 <script>
 (function () {
   var CFG = JSON.parse(document.getElementById('kt-app-config').textContent);
@@ -284,29 +175,29 @@
     var html = '';
     html += '<div class="kt-ai-shell" data-rail="false">';
     html += '<aside class="kt-ai-sidebar">';
-    html += '<div class="sb-top"><img src="data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'%3E%3Ctext y=\'.9em\' font-size=\'90\'%3E🎯%3C/text%3E%3C/svg%3E" alt=""><span class="nm">OKR Дашборд</span></div>';
-    html += '<nav class="kt-ai-nav">';
+    html += '<div class="kt-ai-sidebar-header"><div class="kt-ai-sidebar-brand"><svg class="kt-icon" style="width:22px;height:22px"><use href="#trophy"></use></svg><span class="kt-ai-sidebar-brand-name">OKR Дашборд</span></div></div>';
+    html += '<nav class="kt-ai-sidebar-nav">';
     CFG.nav.forEach(function (item, i) {
       html += '<a class="kt-ai-nav-item' + (i === 0 ? ' active' : '') + '" href="#"><svg class="kt-icon"><use href="#' + (item.icon || 'dashboard') + '"></use></svg><span>' + item.label + '</span></a>';
     });
     html += '</nav>';
-    html += '<div class="sb-bottom">';
+    html += '<div class="kt-ai-sidebar-footer">';
     html += '<button class="kt-ai-nav-item" id="themeToggle"><svg class="kt-icon"><use href="#sun"></use></svg><span>Тема</span></button>';
     html += '<button class="kt-ai-nav-item"><svg class="kt-icon"><use href="#help"></use></svg><span>Помощь</span></button>';
-    html += '<div class="kt-ai-nav-item"><div class="kt-ai-avatar">' + initials(CFG.user.name) + '</div><span>' + CFG.user.name + '</span><span class="badge">' + CFG.user.role + '</span></div>';
+    html += '<div class="kt-ai-nav-item"><div class="kt-ai-avatar">' + initials(CFG.user.name) + '</div><span>' + CFG.user.name + '</span></div>';
     html += '</div>';
     html += '</aside>';
     
     html += '<div class="kt-ai-canvas">';
     html += '<header class="kt-ai-topbar">';
-    html += '<div class="kt-ai-topbar-start"><button class="kt-ai-icon-button shell-topbar-burger" id="burgerBtn"><svg class="kt-icon"><use href="#panelLeft"></use></svg></button>';
-    html += '<div class="topbar-title"><span class="t">Исполнение OKR</span><span class="sub">Q3 2026</span></div></div>';
+    html += '<div class="kt-ai-topbar-start"><button class="kt-ai-icon-button kt-ai-topbar-burger" id="burgerBtn"><svg class="kt-icon"><use href="#panelLeft"></use></svg></button>';
+    html += '<div class="kt-ai-topbar-title"><span class="t">Исполнение OKR</span><span class="sub">Q3 2026</span></div></div>';
     html += '<div class="kt-ai-topbar-end">';
     html += '<div class="kt-ai-search-field"><input class="kt-ai-search" placeholder="Поиск OKR…" id="searchInput"><svg class="kt-icon"><use href="#search"></use></svg></div>';
     html += '</div></header>';
     
     html += '<main id="view">';
-    html += '<div class="page-hero"><div class="ph-text"><h1>Дашборд исполнения OKR</h1><p class="sub">Отслеживайте прогресс по целям и ключевым результатам компании</p></div></div>';
+    html += '<div class="page-hero"><div class="kt-ai-page-head"><h1>Дашборд исполнения OKR</h1><p class="kt-ai-page-subtitle">Отслеживайте прогресс по целям и ключевым результатам компании</p></div></div>';
     
     html += '<div class="kt-ai-kpi-strip" data-cards="true">';
     CFG.kpis.forEach(function (kpi) {
@@ -318,7 +209,7 @@
     html += '<div class="kt-ai-chip-group">';
     var statusLabels = { all: 'Все', on-track: 'В графике', at-risk: 'Риск', off-track: 'Отставание', completed: 'Выполнено' };
     ['all', 'on-track', 'at-risk', 'off-track', 'completed'].forEach(function (s) {
-      html += '<button class="kt-ai-chip' + (state.filterStatus === s ? ' active' : '') + '" data-status="' + s + '">' + statusLabels[s] + ' <span class="proto-label">' + statusCounts[s] + '</span></button>';
+      html += '<button class="kt-ai-chip' + (state.filterStatus === s ? ' active' : '') + '" data-status="' + s + '">' + statusLabels[s] + ' <span class="kt-ai-chip-count">' + statusCounts[s] + '</span></button>';
     });
     html += '</div>';
     html += '<div class="kt-ai-select-wrap"><select class="kt-ai-select" id="ownerFilter"><option value="all">Все владельцы</option>';
@@ -340,12 +231,12 @@
       var tone = getStatusTone(r.status);
       var progressTone = getProgressTone(r.progress);
       html += '<tr data-obj="' + r.objective.replace(/"/g, '&quot;') + '">';
-      html += '<td><div><div class="cell-title">' + r.objective + '</div>' + (r._kr ? '<div class="cell-sub">' + r._kr + '</div>' : '') + '</div></td>';
+      html += '<td><div><div class="kt-ai-table-cell-title">' + r.objective + '</div>' + (r._kr ? '<div class="kt-ai-table-cell-sub">' + r._kr + '</div>' : '') + '</div></td>';
       html += '<td><span class="owner-avatar">' + initials(r.owner) + '</span>' + r.owner + '</td>';
       html += '<td><div class="progress-cell"><div class="progress-bar ' + progressTone + '"><span style="width:' + r.progress + '%"></span></div><span class="progress-pct">' + r.progress + '%</span></div></td>';
       html += '<td>' + r.quarter + '</td>';
       html += '<td><span class="kt-ai-chip' + (tone ? ' data-tone="' + tone + '"' : '') + '>' + statusDef.label + '</span></td>';
-      html += '<td class="row-act"><button class="kt-ai-icon-button row-kebab"><svg class="kt-icon"><use href="#more"></use></svg></button></td>';
+      html += '<td class="kt-ai-table-cell-actions"><button class="kt-ai-icon-button"><svg class="kt-icon"><use href="#more"></use></svg></button></td>';
       html += '</tr>';
     });
     
@@ -384,10 +275,10 @@
     });
     
     document.getElementById('themeToggle').addEventListener('click', function () {
-      var html = document.documentElement;
-      var cur = html.getAttribute('data-theme');
+      var htmlEl = document.documentElement;
+      var cur = htmlEl.getAttribute('data-theme');
       var next = cur === 'light' ? 'dark' : 'light';
-      html.setAttribute('data-theme', next);
+      htmlEl.setAttribute('data-theme', next);
       var icon = this.querySelector('use');
       if (icon) icon.setAttribute('href', next === 'light' ? '#sun' : '#moon');
     });
@@ -427,14 +318,14 @@
       });
     }
     
-    drawer.innerHTML = '<div class="drawer-head"><div class="t"><div style="font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-semibold);margin-bottom:var(--kt-ai-space-2)">' + row.objective + '</div><span class="kt-ai-chip' + (getStatusTone(row.status) ? ' data-tone="' + getStatusTone(row.status) + '"' : '') + '">' + statusDef.label + '</span></div><button class="kt-ai-icon-button" id="closeDrawer"><svg class="kt-icon"><use href="#x"></use></svg></button></div>';
-    drawer.innerHTML += '<div class="drawer-flags"><strong style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Ключевые результаты</strong>' + krHtml + '</div>';
-    drawer.innerHTML += '<div class="drawer-sec"><div style="display:grid;gap:var(--kt-ai-space-4)">' +
-      '<div><span style="font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-muted)">Владелец</span><div style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">' + row.owner + '</div></div>' +
-      '<div><span style="font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-muted)">Квартал</span><div style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">' + row.quarter + '</div></div>' +
-      '<div><span style="font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-muted)">Прогресс</span><div class="progress-cell" style="margin-top:var(--kt-ai-space-2)"><div class="progress-bar ' + getProgressTone(row.progress) + '" style="flex:1"><span style="width:' + row.progress + '%"></span></div><span class="progress-pct">' + row.progress + '%</span></div></div>' +
+    drawer.innerHTML = '<div class="kt-ai-drawer-header"><div class="kt-ai-drawer-title"><div style="font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-semibold);margin-bottom:var(--kt-ai-space-2)">' + row.objective + '</div><span class="kt-ai-chip' + (getStatusTone(row.status) ? ' data-tone="' + getStatusTone(row.status) + '"' : '') + '">' + statusDef.label + '</span></div><button class="kt-ai-icon-button" id="closeDrawer"><svg class="kt-icon"><use href="#x"></use></svg></button></div>';
+    drawer.innerHTML += '<div class="kt-ai-drawer-section"><strong class="kt-ai-drawer-section-label">Ключевые результаты</strong>' + krHtml + '</div>';
+    drawer.innerHTML += '<div class="kt-ai-drawer-section"><div style="display:grid;gap:var(--kt-ai-space-4)">' +
+      '<div><span class="kt-ai-form-label">Владелец</span><div style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">' + row.owner + '</div></div>' +
+      '<div><span class="kt-ai-form-label">Квартал</span><div style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">' + row.quarter + '</div></div>' +
+      '<div><span class="kt-ai-form-label">Прогресс</span><div class="progress-cell" style="margin-top:var(--kt-ai-space-2)"><div class="progress-bar ' + getProgressTone(row.progress) + '" style="flex:1"><span style="width:' + row.progress + '%"></span></div><span class="progress-pct">' + row.progress + '%</span></div></div>' +
       '</div></div>';
-    drawer.innerHTML += '<div class="drawer-actions"><button class="kt-ai-btn" data-variant="primary">Редактировать</button><button class="kt-ai-btn">Закрыть</button></div>';
+    drawer.innerHTML += '<div class="kt-ai-drawer-actions"><button class="kt-ai-btn" data-variant="primary">Редактировать</button><button class="kt-ai-btn">Закрыть</button></div>';
     
     document.body.appendChild(overlay);
     document.body.appendChild(drawer);