feat: redesign UI with pastel theme, dark mode and smooth animations

- Add light/dark/system theme switcher with localStorage persistence
  and automatic prefers-color-scheme detection
- New pastel Instagram-inspired palette: rose accent (#C9445D light,
  #E8687E dark), clean #FAFAFA / #000000 backgrounds
- Replace all hardcoded bg-white / red-* colors with CSS variables
  so every page and modal respects the active theme
- Smooth card hover: translateY elevation + image zoom (no layout shift)
- Micro-animations on action buttons with spring cubic-bezier
- Editorial navbar: 3px accent top bar, uppercase wordmark
- Theme toggle button (sun/moon/monitor) added to navbar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/components/Navbar.tsx

@@ -1,24 +1,40 @@
 import { Link, useLocation } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
+import { useTheme } from '@/hooks/useTheme';
 import UserAvatar from '@/components/UserAvatar';
-import { Home, PlusCircle, Shield } from 'lucide-react';
+import { Home, PlusCircle, Shield, Sun, Moon, Monitor } from 'lucide-react';
 
 export default function Navbar() {
   const { user } = useAuth();
+  const { theme, setTheme } = useTheme();
   const location = useLocation();
 
+  const cycleTheme = () => {
+    const next: Record<string, 'dark' | 'system' | 'light'> = { light: 'dark', dark: 'system', system: 'light' };
+    setTheme(next[theme]);
+  };
+  const ThemeIcon = theme === 'dark' ? Moon : theme === 'light' ? Sun : Monitor;
+
   if (!user) return null;
 
   return (
-    <nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]">
+    <nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]" style={{ paddingTop: 3 }}>
+      <div className="nav-editorial-bar" />
       <div className="mx-auto flex h-14 max-w-[900px] items-center justify-between px-5">
-        <Link to="/feed" className="text-[15px] font-800 tracking-tight text-[var(--fg)]">
-          Котограм
+        <Link to="/feed" className="wordmark flex items-center gap-1">
+          Котограм<span className="wordmark-dot" />
         </Link>
 
         <div className="flex items-center gap-1">
           <NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" />
           <NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" />
+          <button
+            onClick={cycleTheme}
+            title={`Тема: ${theme}`}
+            className="flex items-center justify-center h-9 w-9 rounded-xl transition-all text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]"
+          >
+            <ThemeIcon className="h-[18px] w-[18px]" strokeWidth={1.5} />
+          </button>
 
           <Link to="/profile" className="ml-1.5 relative flex items-center">
             <div className={`flex items-center justify-center h-8 w-8 rounded-full transition-all ${