объединение CT, KPS, OID и дашборда в один портал

Перенос, декомпозиция и перекраска форм CT/KPS/OID на @tnsu/ui-kit,
config-driven дашборд-реестр по трём типам документов. Из отслеживания
исключены артефакты сборки (lib-commonjs/jest-output/release) — забыты
в .gitignore ранее.

src/styles/_design-tokens.scss

@@ -0,0 +1,162 @@
+// ============================================
+// Tansu Construction — Design Tokens (V5: Executive Premium)
+// ЗЕРКАЛО токенов пакета @tnsu/ui-kit (src/tokens/_tokens.scss).
+// Источник правды — ui-kit; здесь локальная копия для SPFx-сборки (heft не
+// резолвит scss из node_modules через ~). При изменении токенов в ui-kit —
+// синхронизировать этот файл. Импортируется в *.module.scss:
+//   @import '<путь>/styles/design-tokens';
+// Без блока :root — чтобы импорт в десятки модулей не дублировал CSS.
+// ============================================
+
+// ---- Navy (Primary) ----
+$navy-950: #0A1B30;
+$navy-900: #0F2440;
+$navy-800: #1B3A5C;
+$navy-700: #244B73;
+$navy-600: #2D5C8A;
+$navy-100: #E8EEF4;
+$navy-50:  #F4F7FA;
+
+// ---- Gold (Accent) ----
+$gold-600: #B8881A;
+$gold-500: #D4A01E;
+$gold-400: #E5B635;
+$gold-300: #F0CC5E;
+$gold-100: #FDF5E0;
+$gold-50:  #FEFBF0;
+
+// ---- Gray (Neutral) ----
+$gray-900: #111827;
+$gray-700: #374151;
+$gray-500: #6B7280;
+$gray-400: #9CA3AF;
+$gray-300: #D1D5DB;
+$gray-200: #E5E7EB;
+$gray-100: #F3F4F6;
+$gray-50:  #F9FAFB;
+
+// ---- Semantic ----
+$red-500:   #DC2626;
+$red-50:    #FEF2F2;
+$green-600: #15803D;
+$green-50:  #F0FDF4;
+$blue-600:  #2563EB;
+$blue-50:   #EFF6FF;
+$amber-700: #854D0E;
+$amber-50:  #FBF1D9; // светлый янтарный фон предупреждений (пара к $amber-700)
+
+$white: #fff;
+
+// ---- Typography ----
+$font-serif: 'Lora', Georgia, serif;
+$font-sans:  'Inter', -apple-system, 'Segoe UI', sans-serif;
+
+$fs-page-title:    24px;
+$fs-form-title:    22px;
+$fs-section-title: 15px;
+$fs-body:          14px;
+$fs-sm:            13px;
+$fs-label:         12px;
+$fs-caption:       11px;
+$fs-overline:      10.5px;
+
+// ---- Radius ----
+$r-sm: 6px;
+$r-md: 10px;
+$r-lg: 14px;
+$r-full: 100px;
+
+// ---- Shadows ----
+$sh-1: 0 1px 2px rgba(15,36,64,.04), 0 1px 3px rgba(15,36,64,.06);
+$sh-2: 0 4px 16px rgba(15,36,64,.07);
+$sh-3: 0 12px 32px rgba(15,36,64,.10);
+$sh-gold: 0 4px 20px rgba(212,160,30,.18);
+$sh-modal: 0 24px 70px rgba(10,27,48,.25);
+
+// ---- Gradients (фирменные) ----
+$grad-header:   linear-gradient(135deg, $navy-950 0%, $navy-800 85%);
+$grad-gold:     linear-gradient(135deg, $gold-400, $gold-500);
+$grad-gold-v:   linear-gradient(180deg, $gold-400, $gold-600);
+$grad-hairline: linear-gradient(90deg, $gold-400, transparent 70%);
+
+// ---- Spacing ----
+$sp-1: 4px;  $sp-2: 8px;  $sp-3: 12px;
+$sp-4: 16px; $sp-5: 20px; $sp-6: 24px;
+$sp-7: 28px; $sp-8: 32px;
+
+// ---- Готовые миксины ----
+@mixin page-header {
+  background: $grad-header;
+  border-radius: $r-lg;
+  padding: 26px 30px;
+  position: relative;
+  overflow: hidden;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; bottom: 0;
+    height: 2px;
+    background: linear-gradient(90deg, $gold-500, transparent 60%);
+  }
+}
+
+@mixin card-hover-gold {
+  transition: .22s;
+  &:hover {
+    box-shadow: $sh-3;
+    transform: translateY(-2px);
+    border-color: $gold-300;
+  }
+}
+
+@mixin btn-accent {
+  background: $grad-gold;
+  color: $navy-950;
+  font-weight: 600;
+  border: 1px solid $gold-500;
+  &:hover { box-shadow: $sh-gold; transform: translateY(-1px); }
+}
+
+@mixin input-focus-gold {
+  &:focus {
+    outline: 0;
+    border-color: $gold-500;
+    box-shadow: 0 0 0 3px rgba(212,160,30,.12);
+  }
+}
+
+@mixin readonly-field($sel) {
+  &#{$sel},
+  &#{$sel}:focus {
+    background: $gray-50;
+    color: $gray-500;
+    border-color: $gray-200;
+    box-shadow: none;
+    cursor: default;
+  }
+}
+
+@mixin hairline {
+  height: 1px;
+  background: $grad-hairline;
+  border: 0;
+}
+
+// ---- Брейкпоинты (адаптивность) ----
+$bp-xs: 350px;
+$bp-sm: 640px;
+$bp-md: 768px;
+$bp-lg: 1024px;
+$bp-xl: 1280px;
+
+@mixin below($bp) {
+  @media (max-width: $bp) {
+    @content;
+  }
+}
+
+@mixin above($bp) {
+  @media (min-width: ($bp + 1)) {
+    @content;
+  }
+}