redesign: modern dark dashboard with gradients and animations

- New color system: deep #0a0a0f bg with indigo/violet/emerald accents
- Sidebar redesign: gradient DH badge, improved active state, cleaner typography
- Card system: .card class with colored top-border accents, hover glow
- WeatherWidget: large temperature display, gradient bg, better 7-day grid
- CalendarWidget: gradient today highlight, violet accents, improved events panel
- TasksWidget: priority dots, hover states, max-height scroll
- System page: circular SVG gauges with glow, accent cards, better bars
- Bookmarks page: hover lift effect, colored category headers
- Claude widgets: gradient badge headers, accent borders
- DashboardHeader: live clock, gradient greeting text
- ServicesGrid: pulsing online indicator (animate-ping), card lift on hover
- globals.css: Inter font, custom scrollbar, card/glass-card, gradient-text helper
- tailwind.config.ts: dash colors, gradient BG images, glow/float animations

src/components/layout/Sidebar.tsx

@@ -2,7 +2,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { signOut } from "next-auth/react";
-import { Home, Server, Bookmark, LogOut, LayoutDashboard } from "lucide-react";
+import { LayoutDashboard, Server, Bookmark, LogOut } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const navItems = [
@@ -17,20 +17,26 @@ export function Sidebar({ userName }: { userName?: string | null }) {
   return (
     <aside className="sidebar w-64 min-h-screen flex flex-col fixed left-0 top-0 z-50">
       {/* Logo */}
-      <div className="p-6 border-b border-indigo-500/10">
+      <div className="p-5 border-b border-white/5">
         <Link href="/" className="flex items-center gap-3 group">
-          <div className="w-9 h-9 rounded-xl bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center group-hover:bg-indigo-500/30 transition-colors">
-            <Home className="w-5 h-5 text-indigo-400" />
+          <div
+            className="w-9 h-9 rounded-xl flex items-center justify-center text-sm font-bold text-white flex-shrink-0"
+            style={{ background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)" }}
+          >
+            DH
           </div>
           <div>
             <div className="text-sm font-bold text-white">Digital Home</div>
-            <div className="text-xs text-slate-500">Dashboard</div>
+            <div className="text-[10px] text-slate-500 uppercase tracking-wider">Dashboard</div>
           </div>
         </Link>
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 p-4 space-y-1">
+      <nav className="flex-1 p-3 space-y-0.5 mt-2">
+        <div className="px-3 mb-2">
+          <span className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest">Navigation</span>
+        </div>
         {navItems.map((item) => {
           const Icon = item.icon;
           const isActive = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
@@ -39,35 +45,36 @@ export function Sidebar({ userName }: { userName?: string | null }) {
               key={item.href}
               href={item.href}
               className={cn(
-                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all",
+                "flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all",
                 isActive
-                  ? "bg-indigo-500/20 text-indigo-300 border border-indigo-500/20"
-                  : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/50"
+                  ? "bg-gradient-to-r from-indigo-500/20 to-violet-500/10 border-l-2 border-indigo-500 text-white pl-[10px]"
+                  : "text-slate-500 hover:text-slate-300 hover:bg-white/5"
               )}
             >
-              <Icon className="w-4 h-4 shrink-0" />
+              <Icon className={cn("w-4 h-4 shrink-0", isActive ? "text-indigo-400" : "")} />
               {item.label}
             </Link>
           );
         })}
       </nav>
 
-      {/* User */}
-      <div className="p-4 border-t border-slate-800">
-        <div className="flex items-center gap-3 px-2 mb-2">
-          <div className="w-8 h-8 rounded-full bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center">
-            <span className="text-xs font-bold text-indigo-400">
-              {userName?.[0]?.toUpperCase() ?? "D"}
-            </span>
+      {/* User section */}
+      <div className="p-3 border-t border-white/5">
+        <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl mb-1">
+          <div
+            className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
+            style={{ background: "linear-gradient(135deg, #6366f1, #8b5cf6)" }}
+          >
+            {userName?.[0]?.toUpperCase() ?? "D"}
           </div>
           <div className="flex-1 min-w-0">
             <div className="text-sm font-medium text-white truncate">{userName ?? "Daniil"}</div>
-            <div className="text-xs text-slate-500">Administrator</div>
+            <div className="text-[10px] text-slate-500">Administrator</div>
           </div>
         </div>
         <button
           onClick={() => signOut({ callbackUrl: "/auth/signin" })}
-          className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-all"
+          className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-all"
         >
           <LogOut className="w-4 h-4" />
           Выйти