Merge branch 'main' of https://gittea.biveki.ru/Sfera/sfera

src/app/globals.css

@@ -177,6 +177,180 @@
       oklch(0.15 0.12 330) 100%);
   }
   
+  .gradient-sunset {
+    background: linear-gradient(135deg, 
+      oklch(0.75 0.25 45) 0%, 
+      oklch(0.70 0.28 25) 30%,
+      oklch(0.68 0.30 355) 70%, 
+      oklch(0.65 0.32 320) 100%);
+  }
+  
+  .gradient-ocean {
+    background: linear-gradient(135deg, 
+      oklch(0.65 0.22 220) 0%, 
+      oklch(0.68 0.25 200) 30%,
+      oklch(0.70 0.28 180) 70%, 
+      oklch(0.72 0.30 160) 100%);
+  }
+  
+  .gradient-emerald {
+    background: linear-gradient(135deg, 
+      oklch(0.70 0.28 150) 0%, 
+      oklch(0.72 0.30 140) 30%,
+      oklch(0.68 0.25 160) 70%, 
+      oklch(0.65 0.22 170) 100%);
+  }
+  
+  .gradient-cosmic {
+    background: linear-gradient(135deg, 
+      oklch(0.45 0.35 270) 0%, 
+      oklch(0.55 0.40 300) 25%,
+      oklch(0.65 0.30 330) 50%,
+      oklch(0.50 0.35 250) 75%,
+      oklch(0.40 0.30 280) 100%);
+  }
+  
+  .gradient-fire {
+    background: linear-gradient(135deg, 
+      oklch(0.70 0.35 40) 0%, 
+      oklch(0.75 0.40 20) 30%,
+      oklch(0.80 0.35 10) 60%,
+      oklch(0.65 0.30 50) 100%);
+  }
+  
+  .gradient-aurora {
+    background: linear-gradient(135deg, 
+      oklch(0.60 0.25 180) 0%, 
+      oklch(0.70 0.30 160) 20%,
+      oklch(0.75 0.35 140) 40%,
+      oklch(0.65 0.28 200) 60%,
+      oklch(0.55 0.32 220) 80%,
+      oklch(0.60 0.25 180) 100%);
+  }
+  
+  /* Кастомные варианты на основе космического градиента */
+  .gradient-corporate {
+    background: linear-gradient(135deg, 
+      oklch(0.25 0.15 240) 0%, 
+      oklch(0.30 0.18 220) 30%,
+      oklch(0.35 0.20 200) 70%, 
+      oklch(0.28 0.16 260) 100%);
+  }
+  
+  .gradient-nebula {
+    background: linear-gradient(135deg, 
+      oklch(0.20 0.40 290) 0%, 
+      oklch(0.35 0.45 310) 20%,
+      oklch(0.50 0.35 330) 40%,
+      oklch(0.40 0.40 270) 60%,
+      oklch(0.25 0.38 250) 80%,
+      oklch(0.15 0.35 280) 100%);
+  }
+  
+  .gradient-galaxy {
+    background: linear-gradient(135deg, 
+      oklch(0.15 0.25 270) 0%, 
+      oklch(0.25 0.30 300) 15%,
+      oklch(0.45 0.35 320) 30%,
+      oklch(0.20 0.28 250) 45%,
+      oklch(0.35 0.32 280) 60%,
+      oklch(0.10 0.20 290) 75%,
+      oklch(0.18 0.25 260) 100%);
+  }
+  
+  .gradient-starfield {
+    background: linear-gradient(135deg, 
+      oklch(0.08 0.15 270) 0%, 
+      oklch(0.12 0.20 290) 25%,
+      oklch(0.20 0.25 310) 50%,
+      oklch(0.15 0.18 250) 75%,
+      oklch(0.05 0.12 280) 100%);
+  }
+  
+  .gradient-quantum {
+    background: linear-gradient(135deg, 
+      oklch(0.40 0.38 280) 0%, 
+      oklch(0.55 0.42 260) 20%,
+      oklch(0.70 0.35 240) 40%,
+      oklch(0.45 0.40 300) 60%,
+      oklch(0.30 0.35 320) 80%,
+      oklch(0.50 0.38 270) 100%);
+  }
+  
+  .gradient-void {
+    background: linear-gradient(135deg, 
+      oklch(0.05 0.08 270) 0%, 
+      oklch(0.08 0.12 290) 30%,
+      oklch(0.12 0.15 250) 60%,
+      oklch(0.06 0.10 310) 100%);
+  }
+  
+  .gradient-supernova {
+    background: linear-gradient(135deg, 
+      oklch(0.65 0.40 280) 0%, 
+      oklch(0.80 0.35 260) 20%,
+      oklch(0.75 0.45 300) 40%,
+      oklch(0.85 0.38 240) 60%,
+      oklch(0.60 0.42 320) 80%,
+      oklch(0.70 0.40 270) 100%);
+  }
+  
+  /* Утонченные варианты с акцентами */
+  .gradient-corporate-accent {
+    background: linear-gradient(135deg, 
+      oklch(0.25 0.08 240) 0%, 
+      oklch(0.28 0.10 220) 100%);
+  }
+  
+  .gradient-nebula-accent {
+    background: linear-gradient(135deg, 
+      oklch(0.30 0.20 290) 0%, 
+      oklch(0.35 0.25 310) 100%);
+  }
+  
+  .gradient-galaxy-accent {
+    background: linear-gradient(135deg, 
+      oklch(0.25 0.15 270) 0%, 
+      oklch(0.30 0.18 300) 50%,
+      oklch(0.28 0.16 250) 100%);
+  }
+  
+  .gradient-starfield-accent {
+    background: linear-gradient(135deg, 
+      oklch(0.15 0.08 270) 0%, 
+      oklch(0.18 0.12 290) 100%);
+  }
+  
+  .gradient-quantum-accent {
+    background: linear-gradient(135deg, 
+      oklch(0.35 0.20 280) 0%, 
+      oklch(0.40 0.25 260) 100%);
+  }
+  
+  .gradient-void-accent {
+    background: linear-gradient(135deg, 
+      oklch(0.12 0.05 270) 0%, 
+      oklch(0.15 0.08 290) 100%);
+  }
+  
+  .gradient-supernova-accent {
+    background: linear-gradient(135deg, 
+      oklch(0.45 0.25 280) 0%, 
+      oklch(0.50 0.30 260) 100%);
+  }
+  
+  /* Восхитительный премиум градиент */
+  .gradient-ethereal {
+    background: linear-gradient(135deg, 
+      oklch(0.15 0.08 270) 0%, 
+      oklch(0.20 0.12 290) 15%,
+      oklch(0.25 0.15 310) 30%,
+      oklch(0.18 0.10 250) 45%,
+      oklch(0.22 0.14 330) 60%,
+      oklch(0.16 0.09 280) 75%,
+      oklch(0.12 0.06 260) 100%);
+  }
+  
   .text-gradient-bright {
     background: linear-gradient(135deg, 
       oklch(0.85 0.35 315) 0%, 

src/components/admin/ui-kit/colors-demo.tsx

@@ -206,6 +206,150 @@ export function ColorsDemo() {
                   <div className="text-white text-xs font-mono">bg-gradient-smooth</div>
                   <div className="text-white/60 text-xs">Темный градиент для фона</div>
                 </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-sunset rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-sunset</div>
+                  <div className="text-white/60 text-xs">Закатный оранжево-розовый градиент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-ocean rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-ocean</div>
+                  <div className="text-white/60 text-xs">Океанический сине-бирюзовый градиент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-emerald rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-emerald</div>
+                  <div className="text-white/60 text-xs">Изумрудно-зеленый градиент</div>
+                </div>
+              </div>
+            </div>
+            
+            {/* Новые креативные градиенты */}
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Креативные градиенты</h4>
+              <div className="space-y-4">
+                <div>
+                  <div className="h-16 w-full gradient-cosmic rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-cosmic</div>
+                  <div className="text-white/60 text-xs">Космический фиолетово-синий градиент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-fire rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-fire</div>
+                  <div className="text-white/60 text-xs">Огненный красно-оранжевый градиент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-aurora rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-aurora</div>
+                  <div className="text-white/60 text-xs">Северное сияние - многоцветный градиент</div>
+                </div>
+              </div>
+            </div>
+            
+            {/* Космические кастомные градиенты */}
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Космические кастомные градиенты</h4>
+              <div className="space-y-4">
+                <div>
+                  <div className="h-16 w-full gradient-corporate rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-corporate</div>
+                  <div className="text-white/60 text-xs">Корпоративный космос - строгий деловой стиль</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-nebula rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-nebula</div>
+                  <div className="text-white/60 text-xs">Туманность - яркие космические цвета</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-galaxy rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-galaxy</div>
+                  <div className="text-white/60 text-xs">Галактика - сложный многоцветный переход</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-starfield rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-starfield</div>
+                  <div className="text-white/60 text-xs">Звездное поле - темный минималистичный</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-quantum rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-quantum</div>
+                  <div className="text-white/60 text-xs">Квантовый - энергичный научный стиль</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-void rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-void</div>
+                  <div className="text-white/60 text-xs">Пустота - ультра-темный космос</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-supernova rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-supernova</div>
+                  <div className="text-white/60 text-xs">Сверхновая - яркий взрывной градиент</div>
+                </div>
+              </div>
+            </div>
+            
+            {/* Утонченные космические акценты */}
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Утонченные космические акценты</h4>
+              <div className="space-y-4">
+                <div>
+                  <div className="h-16 w-full gradient-corporate-accent rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-corporate-accent</div>
+                  <div className="text-white/60 text-xs">Сдержанный корпоративный акцент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-nebula-accent rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-nebula-accent</div>
+                  <div className="text-white/60 text-xs">Мягкий туманный акцент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-galaxy-accent rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-galaxy-accent</div>
+                  <div className="text-white/60 text-xs">Элегантный галактический акцент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-starfield-accent rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-starfield-accent</div>
+                  <div className="text-white/60 text-xs">Тонкий звездный акцент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-quantum-accent rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-quantum-accent</div>
+                  <div className="text-white/60 text-xs">Умеренный квантовый акцент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-void-accent rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-void-accent</div>
+                  <div className="text-white/60 text-xs">Глубокий пустотный акцент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-supernova-accent rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-supernova-accent</div>
+                  <div className="text-white/60 text-xs">Приглушенный взрывной акцент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-ethereal rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-ethereal</div>
+                  <div className="text-white/60 text-xs">Восхитительный эфирный градиент</div>
+                </div>
               </div>
             </div>
 

src/components/admin/ui-kit/layouts-demo.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from '@/components/ui/badge'
+import { Badge } from "@/components/ui/badge";
-import { Button } from '@/components/ui/button'
+import { Button } from "@/components/ui/button";
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { 
+import {
-  Layout, 
+  Layout,
-  Sidebar as SidebarIcon, 
+  Sidebar as SidebarIcon,
-  Monitor, 
+  Monitor,
   Smartphone,
   Menu,
   ChevronRight,
@@ -16,8 +16,8 @@ import {
   Users,
   MessageCircle,
   Building,
-  Plus
+  Plus,
-} from 'lucide-react'
+} from "lucide-react";
 
 export function LayoutsDemo() {
   return (
@@ -30,7 +30,9 @@ export function LayoutsDemo() {
         <CardContent className="space-y-6">
           {/* Sidebar Layout */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Sidebar Layout</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Sidebar Layout
+            </h4>
             <div className="bg-white/5 rounded-lg p-4 border border-white/10">
               <div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
                 {/* Sidebar */}
@@ -66,7 +68,9 @@ export function LayoutsDemo() {
 
           {/* Full Sidebar Layout */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar Layout</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Full Sidebar Layout
+            </h4>
             <div className="bg-white/5 rounded-lg p-4 border border-white/10">
               <div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
                 {/* Full Sidebar */}
@@ -113,7 +117,9 @@ export function LayoutsDemo() {
 
           {/* Grid Layout */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Grid Layout</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Grid Layout
+            </h4>
             <div className="bg-white/5 rounded-lg p-4 border border-white/10">
               <div className="h-32 bg-white/5 rounded-lg border border-white/10 p-3">
                 <div className="grid grid-cols-3 gap-2 h-full">
@@ -133,7 +139,9 @@ export function LayoutsDemo() {
 
           {/* Split Layout */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Split Layout (Мессенджер)</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Split Layout (Мессенджер)
+            </h4>
             <div className="bg-white/5 rounded-lg p-4 border border-white/10">
               <div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
                 {/* Left Panel */}
@@ -141,7 +149,10 @@ export function LayoutsDemo() {
                   <div className="h-3 bg-white/30 rounded mb-3"></div>
                   <div className="space-y-2">
                     {[1, 2, 3, 4].map((item) => (
-                      <div key={item} className="flex items-center space-x-2 p-2 bg-white/5 rounded">
+                      <div
+                        key={item}
+                        className="flex items-center space-x-2 p-2 bg-white/5 rounded"
+                      >
                         <div className="w-8 h-8 bg-primary/30 rounded-full"></div>
                         <div className="flex-1">
                           <div className="h-2 bg-white/30 rounded mb-1"></div>
@@ -188,8 +199,12 @@ export function LayoutsDemo() {
               {/* Left Side - Branding */}
               <div className="w-1/2 p-6 flex flex-col justify-center">
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-gradient-bright mb-2">SferaV</div>
+                  <div className="text-2xl font-bold text-gradient-bright mb-2">
-                  <div className="text-white/70 text-sm mb-4">Управление бизнесом</div>
+                    SferaV
+                  </div>
+                  <div className="text-white/70 text-sm mb-4">
+                    Управление бизнесом
+                  </div>
                   <div className="space-y-2">
                     <div className="bg-white/10 rounded p-2 text-xs text-white/70">
                       🚚 Фулфилмент
@@ -239,10 +254,14 @@ export function LayoutsDemo() {
             <div className="bg-white/5 rounded-lg p-4 border border-white/10">
               <div className="h-32 bg-white/5 rounded-lg border border-white/10 flex">
                 <div className="w-56 bg-white/10 border-r border-white/10 p-2">
-                  <div className="text-xs text-white/60 text-center">Sidebar</div>
+                  <div className="text-xs text-white/60 text-center">
+                    Sidebar
+                  </div>
                 </div>
                 <div className="flex-1 p-2">
-                  <div className="text-xs text-white/60 text-center">Main Content</div>
+                  <div className="text-xs text-white/60 text-center">
+                    Main Content
+                  </div>
                   <div className="grid grid-cols-3 gap-1 mt-2 h-20">
                     <div className="bg-white/10 rounded"></div>
                     <div className="bg-white/10 rounded"></div>
@@ -297,25 +316,41 @@ export function LayoutsDemo() {
         <CardContent className="space-y-6">
           {/* Mini Sidebar */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Mini Sidebar</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Mini Sidebar
+            </h4>
             <div className="bg-white/5 rounded-lg p-4 border border-white/10">
               <div className="w-16 glass-sidebar rounded-lg p-2 space-y-2">
                 <div className="flex items-center justify-center">
                   <Avatar className="h-8 w-8 bg-primary/30">
-                    <AvatarFallback className="bg-primary/30 text-white text-xs">SF</AvatarFallback>
+                    <AvatarFallback className="bg-primary/30 text-white text-xs">
+                      SF
+                    </AvatarFallback>
                   </Avatar>
                 </div>
                 <div className="space-y-1">
                   <Button variant="glass" size="icon" className="w-12 h-10">
                     <Home className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="w-12 h-10 text-white/60"
+                  >
                     <Users className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="w-12 h-10 text-white/60"
+                  >
                     <MessageCircle className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="w-12 h-10 text-white/60"
+                  >
                     <Settings className="h-4 w-4" />
                   </Button>
                 </div>
@@ -328,41 +363,62 @@ export function LayoutsDemo() {
 
           {/* Full Sidebar */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Full Sidebar
+            </h4>
             <div className="bg-white/5 rounded-lg p-4 border border-white/10">
               <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4">
                 {/* Profile */}
                 <div className="flex items-center space-x-3 pb-4 border-b border-white/10">
                   <Avatar className="h-10 w-10 bg-primary/30">
-                    <AvatarFallback className="bg-primary/30 text-white">SF</AvatarFallback>
+                    <AvatarFallback className="bg-primary/30 text-white">
+                      SF
+                    </AvatarFallback>
                   </Avatar>
                   <div className="flex-1">
-                    <div className="text-white font-medium text-sm">SferaV Inc</div>
+                    <div className="text-white font-medium text-sm">
-                    <Badge variant="outline" className="border-primary/50 text-primary text-xs">
+                      SferaV Inc
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className="border-primary/50 text-primary text-xs"
+                    >
                       Фулфилмент
                     </Badge>
                   </div>
                 </div>
-                
+
                 {/* Navigation */}
                 <div className="space-y-1">
                   <Button variant="glass" className="w-full justify-start h-10">
                     <Home className="h-4 w-4 mr-3" />
                     Главная
                   </Button>
-                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/70"
+                  >
                     <Users className="h-4 w-4 mr-3" />
                     Сотрудники
                   </Button>
-                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/70"
+                  >
                     <MessageCircle className="h-4 w-4 mr-3" />
                     Мессенджер
                   </Button>
-                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/70"
+                  >
                     <Building className="h-4 w-4 mr-3" />
                     Партнеры
                   </Button>
-                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/70"
+                  >
                     <Settings className="h-4 w-4 mr-3" />
                     Настройки
                   </Button>
@@ -376,6 +432,1134 @@ export function LayoutsDemo() {
         </CardContent>
       </Card>
 
+      {/* Новые градиентные сайдбары */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Градиентные сайдбары</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Cosmic Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Космический градиент
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-cosmic rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      CS
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Cosmic Space
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Космос
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Галактика
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Экипаж
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Связь
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-cosmic с космической темой
+              </div>
+            </div>
+          </div>
+
+          {/* Fire Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Огненный градиент
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-fire rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      FR
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Fire Studio
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Креатив
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Студия
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Команда
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Plus className="h-4 w-4 mr-3" />
+                    Проекты
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-fire с огненной энергией
+              </div>
+            </div>
+          </div>
+
+          {/* Aurora Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Северное сияние
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-aurora rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      AR
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Aurora Labs
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Инновации
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Лаборатория
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Ученые
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Исследования
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-aurora с многоцветным сиянием
+              </div>
+            </div>
+          </div>
+
+          {/* Ocean Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Океанический градиент
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-ocean rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      OC
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Ocean Deep
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Морской
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Океан
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Экипаж
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Навигация
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-ocean с морской глубиной
+              </div>
+            </div>
+          </div>
+
+          {/* Emerald Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Изумрудный градиент
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-emerald rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      EM
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Emerald Tech
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Эко
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Главная
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Команда
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Проекты
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-emerald с природной энергией
+              </div>
+            </div>
+          </div>
+
+          {/* Sunset Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Закатный градиент
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-sunset rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      SN
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Sunset Co
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Дизайн
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Студия
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Дизайнеры
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Портфолио
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-sunset с теплым закатом
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Кастомные космические сайдбары */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Кастомные космические сайдбары</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Corporate Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Корпоративный космос
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-corporate rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      CP
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Corporate Space Ltd
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Бизнес
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Дашборд
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Сотрудники
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Building className="h-4 w-4 mr-3" />
+                    Отчеты
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-corporate - строгий деловой стиль
+              </div>
+            </div>
+          </div>
+
+          {/* Nebula Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Туманность
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-nebula rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      NB
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Nebula Creative
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Креатив
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Вдохновение
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Художники
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Галерея
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-nebula - яркие космические цвета
+              </div>
+            </div>
+          </div>
+
+          {/* Galaxy Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Галактика
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-galaxy rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      GX
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Galaxy Explorer
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Исследования
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Экспедиции
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Исследователи
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Открытия
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-galaxy - сложный многоцветный переход
+              </div>
+            </div>
+          </div>
+
+          {/* Starfield Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Звездное поле
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-starfield rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      SF
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Starfield Observatory
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Наблюдения
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Телескоп
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Астрономы
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Каталог
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-starfield - темный минималистичный
+              </div>
+            </div>
+          </div>
+
+          {/* Quantum Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Квантовый
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-quantum rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      QM
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Quantum Mechanics Lab
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Наука
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Эксперименты
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Физики
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Теории
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-quantum - энергичный научный стиль
+              </div>
+            </div>
+          </div>
+
+          {/* Void Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Пустота
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-void rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      VD
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Void Walker
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Минимализм
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Медитация
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Философы
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Пустота
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-void - ультра-темный космос
+              </div>
+            </div>
+          </div>
+
+          {/* Supernova Gradient Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Сверхновая
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 gradient-supernova rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      SN
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Supernova Studios
+                    </div>
+                    <Badge className="bg-white/20 text-white border-white/30 text-xs">
+                      Энергия
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
+                    <Home className="h-4 w-4 mr-3" />
+                    Взрыв
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Users className="h-4 w-4 mr-3" />
+                    Команда
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Plus className="h-4 w-4 mr-3" />
+                    Проекты
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                gradient-supernova - яркий взрывной градиент
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Утонченные космические сайдбары с акцентами */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Утонченные космические сайдбары</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Corporate Refined Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Корпоративный утонченный
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile with accent */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <div className="relative">
+                    <Avatar className="h-10 w-10 bg-white/10 border-2 border-white/20">
+                      <AvatarFallback className="bg-white/10 text-white font-semibold">
+                        CP
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="absolute -top-1 -right-1 w-4 h-4 gradient-corporate-accent rounded-full border border-white/30"></div>
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Corporate Elite
+                    </div>
+                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs">
+                      Премиум
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation with subtle accents */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative overflow-hidden">
+                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent"></div>
+                    <Home className="h-4 w-4 mr-3 ml-2" />
+                    Дашборд
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Users className="h-4 w-4 mr-3 ml-2" />
+                    Сотрудники
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Building className="h-4 w-4 mr-3 ml-2" />
+                    Отчеты
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Settings className="h-4 w-4 mr-3 ml-2" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                Утонченный корпоративный с акцентами
+              </div>
+            </div>
+          </div>
+
+          {/* Nebula Refined Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Туманность утонченная
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile with nebula accent */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
+                  <div className="relative">
+                    <Avatar className="h-10 w-10 bg-white/10 border-2 border-white/20">
+                      <AvatarFallback className="bg-white/10 text-white font-semibold">
+                        NB
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="absolute inset-0 gradient-nebula-accent opacity-20 rounded-full"></div>
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Nebula Refined
+                    </div>
+                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs">
+                      Креатив
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation with glow effects */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative">
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full"></div>
+                    <Home className="h-4 w-4 mr-3" />
+                    Вдохновение
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Users className="h-4 w-4 mr-3" />
+                    Художники
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Галерея
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                Мягкие акценты с точечными индикаторами
+              </div>
+            </div>
+          </div>
+
+          {/* Galaxy Refined Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Галактика элегантная
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Profile with gradient border */}
+                <div className="flex items-center space-x-3 pb-4 relative">
+                  <div className="absolute bottom-0 left-0 right-0 h-px gradient-galaxy-accent"></div>
+                  <Avatar className="h-10 w-10 bg-white/10 border border-white/20">
+                    <AvatarFallback className="bg-white/10 text-white font-semibold">
+                      GX
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Galaxy Elegant
+                    </div>
+                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs">
+                      Исследования
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation with underline accents */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative">
+                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent"></div>
+                    <Home className="h-4 w-4 mr-3" />
+                    Экспедиции
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Users className="h-4 w-4 mr-3" />
+                    Исследователи
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Открытия
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
+                  >
+                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                Элегантные подчеркивания и границы
+              </div>
+            </div>
+          </div>
+
+          {/* Ethereal Premium Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Восхитительный эфирный ✨
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20 relative overflow-hidden">
+                {/* Subtle ethereal background */}
+                <div className="absolute inset-0 gradient-ethereal opacity-10"></div>
+                
+                {/* Profile with ethereal glow */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/20 relative z-10">
+                  <div className="relative">
+                    <Avatar className="h-10 w-10 bg-white/10 border border-white/20">
+                      <AvatarFallback className="bg-white/10 text-white font-semibold">
+                        ET
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="absolute inset-0 gradient-ethereal opacity-30 rounded-full blur-sm"></div>
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-white font-medium text-sm">
+                      Ethereal Cosmos
+                    </div>
+                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs relative">
+                      <div className="absolute inset-0 gradient-ethereal opacity-20 rounded"></div>
+                      <span className="relative">Премиум</span>
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Navigation with ethereal effects */}
+                <div className="space-y-1 relative z-10">
+                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative overflow-hidden group">
+                    <div className="absolute inset-0 gradient-ethereal opacity-20 group-hover:opacity-30 transition-opacity"></div>
+                    <Home className="h-4 w-4 mr-3 relative z-10" />
+                    <span className="relative z-10">Пространство</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
+                  >
+                    <div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
+                    <Users className="h-4 w-4 mr-3 relative z-10" />
+                    <span className="relative z-10">Путешественники</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
+                  >
+                    <div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
+                    <MessageCircle className="h-4 w-4 mr-3 relative z-10" />
+                    <span className="relative z-10">Измерения</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
+                  >
+                    <div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
+                    <Settings className="h-4 w-4 mr-3 relative z-10" />
+                    <span className="relative z-10">Настройки</span>
+                  </Button>
+                </div>
+                
+                {/* Floating particles effect */}
+                <div className="absolute inset-0 pointer-events-none">
+                  <div className="absolute top-4 left-8 w-1 h-1 gradient-ethereal rounded-full animate-pulse"></div>
+                  <div className="absolute top-12 right-6 w-0.5 h-0.5 gradient-ethereal rounded-full animate-pulse" style={{animationDelay: '0.5s'}}></div>
+                  <div className="absolute bottom-8 left-12 w-1 h-1 gradient-ethereal rounded-full animate-pulse" style={{animationDelay: '1s'}}></div>
+                  <div className="absolute bottom-16 right-10 w-0.5 h-0.5 gradient-ethereal rounded-full animate-pulse" style={{animationDelay: '1.5s'}}></div>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                Восхитительный эфирный с плавающими частицами
+              </div>
+            </div>
+          </div>
+
+          {/* Void Refined Sidebar */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Пустота минималистичная
+            </h4>
+            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
+                {/* Minimal profile */}
+                <div className="flex items-center space-x-3 pb-4 border-b border-white/10">
+                  <Avatar className="h-10 w-10 bg-white/5 border border-white/10">
+                    <AvatarFallback className="bg-white/5 text-white/80 font-semibold">
+                      VD
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="text-white/90 font-medium text-sm">
+                      Void Minimal
+                    </div>
+                    <Badge className="bg-white/5 text-white/60 border-white/10 text-xs">
+                      Минимализм
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Ultra minimal navigation */}
+                <div className="space-y-1">
+                  <Button className="w-full justify-start h-10 bg-white/5 hover:bg-white/8 border-white/10 text-white/90 relative">
+                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent"></div>
+                    <Home className="h-4 w-4 mr-3" />
+                    Медитация
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
+                  >
+                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Users className="h-4 w-4 mr-3" />
+                    Философы
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
+                  >
+                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <MessageCircle className="h-4 w-4 mr-3" />
+                    Пустота
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
+                  >
+                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <Settings className="h-4 w-4 mr-3" />
+                    Настройки
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-2 text-xs text-white/60 font-mono">
+                Ультра-минималистичный с тонкими акцентами
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
       {/* Spacing and Structure */}
       <Card className="glass-card border-white/10">
         <CardHeader>
@@ -384,14 +1568,22 @@ export function LayoutsDemo() {
         <CardContent className="space-y-6">
           {/* Container */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Container Patterns</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Container Patterns
+            </h4>
             <div className="space-y-4">
               <div className="bg-white/5 rounded-lg p-6 border border-white/10">
-                <div className="text-xs text-white/60 mb-2">p-6 (24px padding)</div>
+                <div className="text-xs text-white/60 mb-2">
+                  p-6 (24px padding)
+                </div>
                 <div className="bg-white/10 rounded p-4">
-                  <div className="text-xs text-white/60 mb-2">p-4 (16px padding)</div>
+                  <div className="text-xs text-white/60 mb-2">
+                    p-4 (16px padding)
+                  </div>
                   <div className="bg-white/20 rounded p-2">
-                    <div className="text-xs text-white/60">p-2 (8px padding)</div>
+                    <div className="text-xs text-white/60">
+                      p-2 (8px padding)
+                    </div>
                   </div>
                 </div>
               </div>
@@ -400,7 +1592,9 @@ export function LayoutsDemo() {
 
           {/* Spacing */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Space Patterns</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Space Patterns
+            </h4>
             <div className="space-y-6">
               <div className="bg-white/5 rounded-lg p-4 border border-white/10">
                 <div className="text-xs text-white/60 mb-3">space-y-6</div>
@@ -423,5 +1617,5 @@ export function LayoutsDemo() {
         </CardContent>
       </Card>
     </div>
-  )
+  );
-} 
+}

src/components/admin/ui-kit/navigation-demo.tsx

@@ -55,7 +55,7 @@ import {
   Smartphone,
   Monitor,
   Tablet,
-  Clock
+  Clock,
 } from "lucide-react";
 
 export function NavigationDemo() {
@@ -651,6 +651,347 @@ export function NavigationDemo() {
               </div>
             </div>
           </div>
+
+          {/* Компактные градиентные сайдбары */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Компактные градиентные сайдбары
+            </h4>
+            <div className="flex space-x-4 flex-wrap gap-4">
+              {/* Cosmic Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-cosmic rounded-full"></div>
+                  <span className="text-white/60 text-xs">Cosmic</span>
+                </div>
+                <div className="w-14 gradient-cosmic rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Fire Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-fire rounded-full"></div>
+                  <span className="text-white/60 text-xs">Fire</span>
+                </div>
+                <div className="w-14 gradient-fire rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Aurora Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-aurora rounded-full"></div>
+                  <span className="text-white/60 text-xs">Aurora</span>
+                </div>
+                <div className="w-14 gradient-aurora rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Ocean Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-ocean rounded-full"></div>
+                  <span className="text-white/60 text-xs">Ocean</span>
+                </div>
+                <div className="w-14 gradient-ocean rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Emerald Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-emerald rounded-full"></div>
+                  <span className="text-white/60 text-xs">Emerald</span>
+                </div>
+                <div className="w-14 gradient-emerald rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Sunset Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-sunset rounded-full"></div>
+                  <span className="text-white/60 text-xs">Sunset</span>
+                </div>
+                <div className="w-14 gradient-sunset rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Кастомные космические мини-сайдбары */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Кастомные космические мини-сайдбары
+            </h4>
+            <div className="grid grid-cols-4 gap-4">
+              {/* Corporate Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-corporate rounded-full"></div>
+                  <span className="text-white/60 text-xs">Corporate</span>
+                </div>
+                <div className="w-14 gradient-corporate rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Building className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Nebula Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-nebula rounded-full"></div>
+                  <span className="text-white/60 text-xs">Nebula</span>
+                </div>
+                <div className="w-14 gradient-nebula rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Galaxy Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-galaxy rounded-full"></div>
+                  <span className="text-white/60 text-xs">Galaxy</span>
+                </div>
+                <div className="w-14 gradient-galaxy rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Starfield Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-starfield rounded-full"></div>
+                  <span className="text-white/60 text-xs">Starfield</span>
+                </div>
+                <div className="w-14 gradient-starfield rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Quantum Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-quantum rounded-full"></div>
+                  <span className="text-white/60 text-xs">Quantum</span>
+                </div>
+                <div className="w-14 gradient-quantum rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Void Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-void rounded-full"></div>
+                  <span className="text-white/60 text-xs">Void</span>
+                </div>
+                <div className="w-14 gradient-void rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Supernova Mini */}
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2 mb-2">
+                  <div className="w-3 h-3 gradient-supernova rounded-full"></div>
+                  <span className="text-white/60 text-xs">Supernova</span>
+                </div>
+                <div className="w-14 gradient-supernova rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
+                  <Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
+                    <Home className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Users className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
         </CardContent>
       </Card>
 
@@ -772,32 +1113,38 @@ export function NavigationDemo() {
         <CardContent className="space-y-6">
           {/* Enhanced Tabs */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные табы</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
-            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              Улучшенные табы
+            </h4>
+            <Tabs
+              value={activeTab}
+              onValueChange={setActiveTab}
+              className="w-full"
+            >
               <TabsList className="grid w-full grid-cols-4 bg-white/5 backdrop-blur border-white/10 p-1 rounded-xl h-12">
-                <TabsTrigger 
+                <TabsTrigger
-                  value="nav" 
+                  value="nav"
                   className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                 >
                   <Home className="h-4 w-4 mr-2" />
                   Навигация
                 </TabsTrigger>
-                <TabsTrigger 
+                <TabsTrigger
-                  value="forms" 
+                  value="forms"
                   className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                 >
                   <FileText className="h-4 w-4 mr-2" />
                   Формы
                 </TabsTrigger>
-                <TabsTrigger 
+                <TabsTrigger
-                  value="data" 
+                  value="data"
                   className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                 >
                   <Database className="h-4 w-4 mr-2" />
                   Данные
                 </TabsTrigger>
-                <TabsTrigger 
+                <TabsTrigger
-                  value="settings" 
+                  value="settings"
                   className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                 >
                   <Settings className="h-4 w-4 mr-2" />
@@ -812,17 +1159,23 @@ export function NavigationDemo() {
                     </div>
                     <div>
                       <h5 className="text-white font-semibold">Навигация</h5>
-                      <p className="text-white/60 text-sm">Компоненты для навигации по приложению</p>
+                      <p className="text-white/60 text-sm">
+                        Компоненты для навигации по приложению
+                      </p>
                     </div>
                   </div>
                   <div className="space-y-3">
                     <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                       <span className="text-white/80 text-sm">Сайдбары</span>
-                      <Badge className="bg-green-500/20 text-green-300">Готово</Badge>
+                      <Badge className="bg-green-500/20 text-green-300">
+                        Готово
+                      </Badge>
                     </div>
                     <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                       <span className="text-white/80 text-sm">Меню</span>
-                      <Badge className="bg-blue-500/20 text-blue-300">В работе</Badge>
+                      <Badge className="bg-blue-500/20 text-blue-300">
+                        В работе
+                      </Badge>
                     </div>
                   </div>
                 </div>
@@ -835,7 +1188,9 @@ export function NavigationDemo() {
                     </div>
                     <div>
                       <h5 className="text-white font-semibold">Формы</h5>
-                      <p className="text-white/60 text-sm">Элементы для ввода и обработки данных</p>
+                      <p className="text-white/60 text-sm">
+                        Элементы для ввода и обработки данных
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -848,7 +1203,9 @@ export function NavigationDemo() {
                     </div>
                     <div>
                       <h5 className="text-white font-semibold">Данные</h5>
-                      <p className="text-white/60 text-sm">Компоненты для отображения данных</p>
+                      <p className="text-white/60 text-sm">
+                        Компоненты для отображения данных
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -861,7 +1218,9 @@ export function NavigationDemo() {
                     </div>
                     <div>
                       <h5 className="text-white font-semibold">Настройки</h5>
-                      <p className="text-white/60 text-sm">Элементы управления настройками</p>
+                      <p className="text-white/60 text-sm">
+                        Элементы управления настройками
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -871,18 +1230,30 @@ export function NavigationDemo() {
 
           {/* Pill Tabs */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Табы-пилюли</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Табы-пилюли
+            </h4>
             <div className="flex space-x-1 glass-card p-2 rounded-xl border border-white/10 w-fit">
               <Button variant="glass" size="sm" className="rounded-full px-4">
                 <Package className="h-4 w-4 mr-2" />
                 Товары
-                <Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs">234</Badge>
+                <Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs">
+                  234
+                </Badge>
               </Button>
-              <Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="rounded-full px-4 text-white/70 hover:text-white"
+              >
                 <Users className="h-4 w-4 mr-2" />
                 Клиенты
               </Button>
-              <Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="rounded-full px-4 text-white/70 hover:text-white"
+              >
                 <Truck className="h-4 w-4 mr-2" />
                 Доставка
               </Button>
@@ -891,17 +1262,27 @@ export function NavigationDemo() {
 
           {/* Segmented Control */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Сегментированный контрол</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Сегментированный контрол
+            </h4>
             <div className="inline-flex glass-card rounded-xl p-1 border border-white/10">
               <Button variant="glass" size="sm" className="rounded-lg">
                 <Eye className="h-4 w-4 mr-2" />
                 Просмотр
               </Button>
-              <Button variant="ghost" size="sm" className="rounded-lg text-white/70">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="rounded-lg text-white/70"
+              >
                 <FileText className="h-4 w-4 mr-2" />
                 Редактирование
               </Button>
-              <Button variant="ghost" size="sm" className="rounded-lg text-white/70">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="rounded-lg text-white/70"
+              >
                 <Settings className="h-4 w-4 mr-2" />
                 Настройки
               </Button>
@@ -910,25 +1291,39 @@ export function NavigationDemo() {
 
           {/* Vertical Tabs */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Вертикальные табы</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Вертикальные табы
+            </h4>
             <div className="flex space-x-6">
               <div className="w-56 space-y-2">
-                <Button variant="glass" className="w-full justify-start h-11 font-medium">
+                <Button
+                  variant="glass"
+                  className="w-full justify-start h-11 font-medium"
+                >
                   <Home className="h-4 w-4 mr-3" />
                   Главная панель
                   <ChevronRight className="h-4 w-4 ml-auto" />
                 </Button>
-                <Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
+                <Button
+                  variant="ghost"
+                  className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
+                >
                   <Users className="h-4 w-4 mr-3" />
                   Управление пользователями
                   <ChevronRight className="h-4 w-4 ml-auto" />
                 </Button>
-                <Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
+                <Button
+                  variant="ghost"
+                  className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
+                >
                   <BarChart3 className="h-4 w-4 mr-3" />
                   Аналитика и отчеты
                   <ChevronRight className="h-4 w-4 ml-auto" />
                 </Button>
-                <Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
+                <Button
+                  variant="ghost"
+                  className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
+                >
                   <Settings className="h-4 w-4 mr-3" />
                   Настройки системы
                   <ChevronRight className="h-4 w-4 ml-auto" />
@@ -940,17 +1335,27 @@ export function NavigationDemo() {
                     <Home className="h-6 w-6 text-primary" />
                   </div>
                   <div>
-                    <h5 className="text-white font-semibold text-lg">Главная панель</h5>
+                    <h5 className="text-white font-semibold text-lg">
-                    <p className="text-white/60">Обзор системы и быстрый доступ к функциям</p>
+                      Главная панель
+                    </h5>
+                    <p className="text-white/60">
+                      Обзор системы и быстрый доступ к функциям
+                    </p>
                   </div>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                   <div className="glass-card border-white/10 p-4 rounded-lg text-center">
-                    <div className="text-2xl font-bold text-white mb-1">2,847</div>
+                    <div className="text-2xl font-bold text-white mb-1">
-                    <div className="text-white/60 text-sm">Всего пользователей</div>
+                      2,847
+                    </div>
+                    <div className="text-white/60 text-sm">
+                      Всего пользователей
+                    </div>
                   </div>
                   <div className="glass-card border-white/10 p-4 rounded-lg text-center">
-                    <div className="text-2xl font-bold text-green-400 mb-1">156</div>
+                    <div className="text-2xl font-bold text-green-400 mb-1">
+                      156
+                    </div>
                     <div className="text-white/60 text-sm">Активных сессий</div>
                   </div>
                 </div>
@@ -1308,23 +1713,34 @@ export function NavigationDemo() {
         <CardContent className="space-y-6">
           {/* Enhanced Breadcrumbs */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные breadcrumbs</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Улучшенные breadcrumbs
+            </h4>
             <div className="glass-card p-4 rounded-xl border border-white/10">
               <nav className="flex items-center space-x-2 text-sm">
                 <div className="flex items-center space-x-2">
                   <div className="w-6 h-6 bg-primary/20 rounded-lg flex items-center justify-center">
                     <Home className="h-3 w-3 text-primary" />
                   </div>
-                  <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
+                  <Button
+                    variant="link"
+                    className="text-white/70 hover:text-white p-0 h-auto font-medium"
+                  >
                     Главная
                   </Button>
                 </div>
                 <ChevronRight className="h-4 w-4 text-white/40" />
-                <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
+                <Button
+                  variant="link"
+                  className="text-white/70 hover:text-white p-0 h-auto font-medium"
+                >
                   Маркетплейс
                 </Button>
                 <ChevronRight className="h-4 w-4 text-white/40" />
-                <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
+                <Button
+                  variant="link"
+                  className="text-white/70 hover:text-white p-0 h-auto font-medium"
+                >
                   Товары
                 </Button>
                 <ChevronRight className="h-4 w-4 text-white/40" />
@@ -1332,7 +1748,9 @@ export function NavigationDemo() {
                   <div className="w-6 h-6 bg-orange-500/20 rounded-lg flex items-center justify-center">
                     <Package className="h-3 w-3 text-orange-400" />
                   </div>
-                  <span className="text-white font-semibold">iPhone 15 Pro Max</span>
+                  <span className="text-white font-semibold">
+                    iPhone 15 Pro Max
+                  </span>
                 </div>
               </nav>
             </div>
@@ -1340,7 +1758,9 @@ export function NavigationDemo() {
 
           {/* Interactive Breadcrumbs */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Интерактивные breadcrumbs</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Интерактивные breadcrumbs
+            </h4>
             <div className="glass-card p-4 rounded-xl border border-white/10">
               <div className="flex items-center justify-between mb-3">
                 <nav className="flex items-center space-x-2 text-sm">
@@ -1349,11 +1769,17 @@ export function NavigationDemo() {
                     Назад
                   </Button>
                   <div className="border-l border-white/20 h-6 mx-3"></div>
-                  <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
+                  <Button
+                    variant="link"
+                    className="text-white/70 hover:text-white p-0 h-auto"
+                  >
                     Склад
                   </Button>
                   <ChevronRight className="h-4 w-4 text-white/40" />
-                  <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
+                  <Button
+                    variant="link"
+                    className="text-white/70 hover:text-white p-0 h-auto"
+                  >
                     Категории
                   </Button>
                   <ChevronRight className="h-4 w-4 text-white/40" />
@@ -1364,10 +1790,16 @@ export function NavigationDemo() {
                 </Button>
               </div>
               <div className="flex items-center space-x-2">
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300"
+                >
                   234 товара
                 </Badge>
-                <Badge variant="outline" className="border-white/20 text-white/60">
+                <Badge
+                  variant="outline"
+                  className="border-white/20 text-white/60"
+                >
                   Обновлено 2ч назад
                 </Badge>
               </div>
@@ -1384,13 +1816,17 @@ export function NavigationDemo() {
         <CardContent className="space-y-6">
           {/* Enhanced Pagination */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Улучшенная пагинация</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Улучшенная пагинация
+            </h4>
             <div className="glass-card p-4 rounded-xl border border-white/10">
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-4">
                   <div className="text-white/70 text-sm">
-                    Показано <span className="text-white font-medium">1-25</span> из{' '}
+                    Показано{" "}
-                    <span className="text-white font-medium">1,247</span> записей
+                    <span className="text-white font-medium">1-25</span> из{" "}
+                    <span className="text-white font-medium">1,247</span>{" "}
+                    записей
                   </div>
                   <div className="flex items-center space-x-2">
                     <span className="text-white/60 text-sm">Показать:</span>
@@ -1405,12 +1841,38 @@ export function NavigationDemo() {
                     Пред
                   </Button>
                   <div className="flex items-center space-x-1">
-                    <Button variant="glass" size="sm" className="h-8 w-8">1</Button>
+                    <Button variant="glass" size="sm" className="h-8 w-8">
-                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">2</Button>
+                      1
-                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">3</Button>
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 text-white/70"
+                    >
+                      2
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 text-white/70"
+                    >
+                      3
+                    </Button>
                     <span className="text-white/40 px-2">...</span>
-                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">49</Button>
+                    <Button
-                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">50</Button>
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 text-white/70"
+                    >
+                      49
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 text-white/70"
+                    >
+                      50
+                    </Button>
                   </div>
                   <Button variant="outline" size="sm" className="h-8">
                     След
@@ -1423,7 +1885,9 @@ export function NavigationDemo() {
 
           {/* Compact Pagination */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Компактная пагинация</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Компактная пагинация
+            </h4>
             <div className="glass-card p-3 rounded-xl border border-white/10">
               <div className="flex items-center justify-center space-x-4">
                 <Button variant="outline" size="sm" disabled className="h-8">
@@ -1432,9 +1896,27 @@ export function NavigationDemo() {
                 <div className="flex items-center space-x-2">
                   <span className="text-white/70 text-sm">Страница</span>
                   <div className="flex items-center space-x-1 glass-card p-1 rounded-lg border border-white/10">
-                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs">1</Button>
+                    <Button
-                    <Button variant="glass" size="sm" className="h-6 w-6 p-0 text-xs">2</Button>
+                      variant="ghost"
-                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs">3</Button>
+                      size="sm"
+                      className="h-6 w-6 p-0 text-xs"
+                    >
+                      1
+                    </Button>
+                    <Button
+                      variant="glass"
+                      size="sm"
+                      className="h-6 w-6 p-0 text-xs"
+                    >
+                      2
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0 text-xs"
+                    >
+                      3
+                    </Button>
                   </div>
                   <span className="text-white/70 text-sm">из 24</span>
                 </div>
@@ -1447,7 +1929,9 @@ export function NavigationDemo() {
 
           {/* Load More Pattern */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Паттерн &quot;Загрузить еще&quot;</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Паттерн &quot;Загрузить еще&quot;
+            </h4>
             <div className="glass-card p-4 rounded-xl border border-white/10 text-center">
               <div className="space-y-3">
                 <div className="text-white/70 text-sm">
@@ -1472,7 +1956,9 @@ export function NavigationDemo() {
         <CardContent className="space-y-6">
           {/* Advanced Filter Bar */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Расширенная панель фильтров</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Расширенная панель фильтров
+            </h4>
             <div className="glass-card p-4 rounded-xl border border-white/10">
               <div className="flex items-center justify-between mb-4">
                 <div className="flex items-center space-x-3">
@@ -1498,7 +1984,7 @@ export function NavigationDemo() {
                 <div className="flex items-center space-x-2">
                   <div className="relative">
                     <Search className="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40" />
-                    <input 
+                    <input
                       className="bg-white/5 border border-white/10 rounded-lg pl-10 pr-4 py-2 text-white text-sm placeholder-white/40 focus:outline-none focus:border-primary/50 w-64"
                       placeholder="Поиск товаров..."
                     />
@@ -1509,19 +1995,32 @@ export function NavigationDemo() {
                 </div>
               </div>
               <div className="flex items-center space-x-2 flex-wrap">
-                <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
+                <Badge
+                  variant="outline"
+                  className="border-primary/30 text-primary bg-primary/10"
+                >
                   Электроника
                   <X className="h-3 w-3 ml-2 cursor-pointer hover:text-primary" />
                 </Badge>
-                <Badge variant="outline" className="border-green-500/30 text-green-300 bg-green-500/10">
+                <Badge
+                  variant="outline"
+                  className="border-green-500/30 text-green-300 bg-green-500/10"
+                >
                   В наличии
                   <X className="h-3 w-3 ml-2 cursor-pointer hover:text-green-300" />
                 </Badge>
-                <Badge variant="outline" className="border-blue-500/30 text-blue-300 bg-blue-500/10">
+                <Badge
+                  variant="outline"
+                  className="border-blue-500/30 text-blue-300 bg-blue-500/10"
+                >
                   Сегодня
                   <X className="h-3 w-3 ml-2 cursor-pointer hover:text-blue-300" />
                 </Badge>
-                <Button variant="ghost" size="sm" className="h-6 text-xs text-white/60 hover:text-white">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 text-xs text-white/60 hover:text-white"
+                >
                   Очистить все
                 </Button>
               </div>
@@ -1530,7 +2029,9 @@ export function NavigationDemo() {
 
           {/* Quick Filters */}
           <div>
-            <h4 className="text-white/90 text-sm font-medium mb-3">Быстрые фильтры</h4>
+            <h4 className="text-white/90 text-sm font-medium mb-3">
+              Быстрые фильтры
+            </h4>
             <div className="glass-card p-3 rounded-xl border border-white/10">
               <div className="flex items-center space-x-2 flex-wrap">
                 <Button variant="glass" size="sm" className="h-8">