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/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AuthProvider } from '@/hooks/useAuth';
+import { ThemeProvider } from '@/hooks/useTheme';
 import { ToastProvider } from '@/components/Toast';
 import ProtectedRoute from '@/components/ProtectedRoute';
 import Navbar from '@/components/Navbar';
@@ -102,6 +103,7 @@ export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
+        <ThemeProvider>
         <AuthProvider>
           <ToastProvider>
             <Navbar />
@@ -110,6 +112,7 @@ export default function App() {
             </main>
           </ToastProvider>
         </AuthProvider>
+        </ThemeProvider>
       </BrowserRouter>
     </QueryClientProvider>
   );

client/src/components/CatCard.tsx

@@ -43,7 +43,7 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
 
   return (
     <article className="animate-fade-up">
-      <div className="card overflow-hidden cursor-pointer card-interactive" onClick={() => onOpen(cat.id)}>
+      <div className="cat-card" onClick={() => onOpen(cat.id)}>
         <div className="flex items-center gap-3 px-5 pt-5 pb-3">
           <Link to={`/profile/${cat.user_id}`} onClick={e => e.stopPropagation()}>
             <UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-9 w-9" fallbackClassName="text-xs avatar-colored bg-[var(--accent)]" />
@@ -56,11 +56,11 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
           </div>
         </div>
 
-        <figure className="bg-[var(--bg)]">
+        <figure className="cat-card-image">
           <img
             src={cat.image_url}
             alt={cat.caption || 'Фото кота'}
-            className="w-full max-h-[520px] object-contain select-none mx-auto"
+            className="w-full max-h-[520px] object-contain select-none mx-auto cat-card-img"
             draggable={false}
             loading="lazy"
           />
@@ -79,20 +79,20 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
               <button
                 onClick={toggleLike}
                 disabled={isOwner || !user}
-                className={`flex items-center gap-1.5 text-sm font-medium transition-all ${
+                className={`action-btn flex items-center gap-1.5 text-sm font-medium ${
-                  isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)] hover:text-red-400'
+                  isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed opacity-40' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)]'
                 }`}
               >
-                <Heart className={`h-[18px] w-[18px] transition-all ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'}`} />
+                <Heart className={`h-[18px] w-[18px] transition-all duration-200 ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'} ${!isOwner && !liked ? 'group-hover:stroke-red-400' : ''}`} />
-                {likeCount > 0 && <span className="stat-value text-xs">{likeCount}</span>}
+                {likeCount > 0 && <span className="stat-value text-xs tabular-nums">{likeCount}</span>}
               </button>
 
               <button
-                onClick={() => onOpen(cat.id)}
+                onClick={e => { e.stopPropagation(); onOpen(cat.id); }}
-                className="flex items-center gap-1 text-sm text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] transition-colors"
+                className="action-btn flex items-center gap-1 text-sm text-[var(--fg-tertiary)]"
               >
                 <MessageCircle className="h-[18px] w-[18px]" strokeWidth={1.5} />
-                {(cat.comments_count ?? 0) > 0 && <span className="stat-value text-xs">{cat.comments_count}</span>}
+                {(cat.comments_count ?? 0) > 0 && <span className="stat-value text-xs tabular-nums">{cat.comments_count}</span>}
               </button>
             </div>
 

client/src/components/CatModal.tsx

@@ -86,7 +86,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   if (isLoading || !cat) {
     return createPortal(
       <div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center animate-fade-in" onClick={onClose}>
-        <div className="flex items-center gap-3 px-5 py-3 bg-white rounded-2xl shadow-lg">
+        <div className="flex items-center gap-3 px-5 py-3 bg-[var(--surface)] rounded-2xl shadow-lg">
           <div className="h-4 w-4 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
           <span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span>
         </div>
@@ -102,7 +102,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   return createPortal(
     <div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center p-4 animate-fade-in" onClick={onClose}>
       <div
-        className="w-full max-w-lg bg-white rounded-2xl max-h-[85vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
+        className="w-full max-w-lg bg-[var(--surface)] rounded-2xl max-h-[85vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
         onClick={e => e.stopPropagation()}
       >
         <div className="flex items-center justify-between px-5 py-4 shrink-0">
@@ -115,7 +115,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
           </Link>
           <div className="flex items-center gap-1">
             {isOwner && (
-              <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
+              <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
                 <Trash2 className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
@@ -210,7 +210,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
                 onChange={e => setCommentText(e.target.value)}
                 placeholder="Комментарий..."
                 maxLength={500}
-                className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-white placeholder:text-[var(--fg-tertiary)] focus-ring"
+                className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-[var(--surface)] placeholder:text-[var(--fg-tertiary)] focus-ring"
               />
               <button
                 type="submit"

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 ${

client/src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-[var(--accent)] text-white shadow-sm hover:bg-[var(--accent-hover)]',
         destructive: 'bg-red-500 text-white shadow-sm hover:bg-red-600',
-        outline: 'border border-[var(--border)] bg-white shadow-sm hover:bg-[var(--surface-hover)] text-[var(--fg)]',
+        outline: 'border border-[var(--border)] bg-[var(--surface)] shadow-sm hover:bg-[var(--surface-hover)] text-[var(--fg)]',
         secondary: 'bg-[var(--border-light)] text-[var(--fg)] shadow-sm hover:bg-[var(--border)]',
         ghost: 'hover:bg-[var(--border-light)] text-[var(--fg-secondary)]',
         link: 'text-[var(--accent)] underline-offset-4 hover:underline',

client/src/components/ui/input.tsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-xl border border-[var(--border)] bg-white px-3.5 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--fg-tertiary)] focus-visible:outline-none focus-visible:border-[var(--accent)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-xl border border-[var(--border)] bg-[var(--surface)] px-3.5 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--fg-tertiary)] focus-visible:outline-none focus-visible:border-[var(--accent)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

client/src/hooks/useTheme.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeContextValue {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (t: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'system',
+  resolvedTheme: 'light',
+  setTheme: () => {},
+});
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    return (localStorage.getItem('theme') as Theme) ?? 'system';
+  });
+
+  const [systemDark, setSystemDark] = useState(() =>
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  const resolvedTheme: 'light' | 'dark' =
+    theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute('data-theme', resolvedTheme);
+  }, [resolvedTheme]);
+
+  const setTheme = (t: Theme) => {
+    localStorage.setItem('theme', t);
+    setThemeState(t);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

client/src/index.css

@@ -1,36 +1,68 @@
 @import "tailwindcss";
 @plugin "tailwindcss-animate";
 
-:root {
+/* ── Светлая тема — тёплый пастель à la Instagram ── */
-  --bg: #F5F3EE;
+:root,
+[data-theme="light"] {
+  --bg: #FAFAFA;
   --surface: #FFFFFF;
-  --surface-hover: #F9F7F3;
+  --surface-hover: #F7F7F7;
-  --fg: #1C1917;
+  --fg: #1A1A1A;
-  --fg-secondary: #78716C;
+  --fg-secondary: #737373;
-  --fg-tertiary: #A8A29E;
+  --fg-tertiary: #B0B0B0;
-  --accent: #C2410C;
+  --accent: #C9445D;
-  --accent-hover: #9A3412;
+  --accent-hover: #B03650;
-  --accent-soft: rgba(194, 65, 12, 0.07);
+  --accent-soft: rgba(201, 68, 93, 0.09);
-  --accent-light: #FFF7ED;
+  --accent-light: #FFF0F3;
-  --secondary: #F5F3EE;
+  --secondary: #FAFAFA;
-  --border: #E7E5E4;
+  --border: #DBDBDB;
-  --border-light: #F0EDE8;
+  --border-light: #EFEFEF;
-  --danger: #DC2626;
+  --danger: #C9445D;
-  --danger-hover: #B91C1C;
+  --danger-hover: #B03650;
-  --danger-light: #FEF2F2;
+  --danger-light: #FFF0F3;
-  --success: #15803D;
+  --success: #2E9E6B;
-  --success-light: #F0FDF4;
+  --success-light: #EEF8F3;
-  --radius: 12px;
+  --radius: 10px;
-  --radius-lg: 16px;
+  --radius-lg: 14px;
-  --radius-xl: 24px;
+  --radius-xl: 20px;
-  --shadow-sm: 0 1px 2px rgba(28,25,23,0.04);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
-  --shadow-md: 0 2px 8px rgba(28,25,23,0.06);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
-  --shadow-lg: 0 8px 24px rgba(28,25,23,0.08);
+  --shadow-lg: 0 10px 32px rgba(0,0,0,0.10);
-  --shadow-xl: 0 16px 48px rgba(28,25,23,0.12);
+  --shadow-xl: 0 20px 56px rgba(0,0,0,0.14);
+}
+
+/* ── Тёмная тема — Instagram dark ── */
+[data-theme="dark"] {
+  --bg: #000000;
+  --surface: #121212;
+  --surface-hover: #1C1C1C;
+  --fg: #F5F5F5;
+  --fg-secondary: #A8A8A8;
+  --fg-tertiary: #555555;
+  --accent: #E8687E;
+  --accent-hover: #F07A8E;
+  --accent-soft: rgba(232, 104, 126, 0.12);
+  --accent-light: #2A1018;
+  --secondary: #000000;
+  --border: #262626;
+  --border-light: #1C1C1C;
+  --danger: #E8687E;
+  --danger-hover: #F07A8E;
+  --danger-light: #2A1018;
+  --success: #48B884;
+  --success-light: #0D2419;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
+  --shadow-md: 0 4px 14px rgba(0,0,0,0.50);
+  --shadow-lg: 0 10px 36px rgba(0,0,0,0.60);
+  --shadow-xl: 0 20px 60px rgba(0,0,0,0.75);
 }
 
 * { border-color: var(--border); }
 
+html {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
 body {
   background: var(--bg);
   color: var(--fg);
@@ -39,6 +71,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.6;
   letter-spacing: -0.01em;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 ::selection { background: var(--accent); color: white; }
@@ -94,16 +127,51 @@ body {
   background: var(--surface);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.3s ease;
 }
 .card-hover:hover {
   box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
 }
 .card-interactive:hover {
   box-shadow: var(--shadow-md);
 }
 
+/* Product-ready card — без layout shift, плавное поднятие + тень */
+.cat-card {
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  cursor: pointer;
+  transition:
+    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform, box-shadow;
+}
+.cat-card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-3px);
+}
+.cat-card:active {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+  transition-duration: 0.1s;
+}
+
+/* Изображение в карточке — зум при ховере */
+.cat-card-image {
+  background: var(--bg);
+  overflow: hidden;
+}
+.cat-card-img {
+  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform;
+}
+.cat-card:hover .cat-card-img {
+  transform: scale(1.03);
+}
+
 .avatar-colored {
   border-radius: 50%;
   display: flex;
@@ -119,13 +187,35 @@ body {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: background 0.15s, transform 0.1s;
+  transition: background 0.18s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
   cursor: pointer;
   border: none;
   background: transparent;
 }
-.btn-ghost:active { transform: scale(0.9); }
+.btn-ghost:hover { background: var(--border-light); transform: scale(1.08); }
-.btn-ghost:hover { background: var(--border-light); }
+.btn-ghost:active { transform: scale(0.92); transition-duration: 0.08s; }
+
+/* Кнопки действий в карточке */
+.action-btn {
+  padding: 5px 8px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition:
+    background 0.18s ease,
+    color 0.18s ease,
+    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.action-btn:hover {
+  background: var(--border-light);
+  color: var(--fg);
+  transform: scale(1.05);
+}
+.action-btn:active {
+  transform: scale(0.95);
+  transition-duration: 0.08s;
+}
 
 .tag {
   display: inline-flex;
@@ -151,9 +241,41 @@ body {
 .text-tertiary { color: var(--fg-tertiary); }
 
 .nav-glass {
-  background: rgba(245, 243, 238, 0.85);
+  background: rgba(250, 250, 250, 0.92);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px) saturate(1.6);
-  -webkit-backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px) saturate(1.6);
+  transition: background 0.3s ease;
+}
+[data-theme="dark"] .nav-glass {
+  background: rgba(0, 0, 0, 0.90);
+}
+
+.nav-editorial-bar {
+  height: 3px;
+  background: var(--accent);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.wordmark {
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--fg);
+}
+
+.wordmark-dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-left: 1px;
+  margin-bottom: 1px;
+  vertical-align: middle;
 }
 
 .divider {

client/src/pages/AdminPage.tsx

@@ -94,7 +94,7 @@ function TabBtn({ active, onClick, children }: { active: boolean; onClick: () =>
   return (
     <button onClick={onClick}
       className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
-        active ? 'bg-white text-[var(--fg)] shadow-sm' : 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)]'
+        active ? 'bg-[var(--surface)] text-[var(--fg)] shadow-sm' : 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)]'
       }`}>
       {children}
     </button>
@@ -127,7 +127,7 @@ function UserRow({ u, onDelete, qc }: { u: any; onDelete: () => void; qc: any })
           <div className="flex items-center gap-1.5 mt-1">
             <input type="number" value={points} min={0} onChange={e => setPoints(Math.max(0, parseInt(e.target.value) || 0))}
               className="w-20 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus />
-            <button onClick={savePoints} className="btn-ghost h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
+            <button onClick={savePoints} className="btn-ghost h-7 w-7 text-green-600 hover:bg-[var(--success-light)]"><Save className="h-3.5 w-3.5" /></button>
             <button onClick={() => { setEditing(false); setPoints(u.points); }} className="btn-ghost h-7 w-7 text-[var(--fg-tertiary)]"><X className="h-3.5 w-3.5" /></button>
           </div>
         ) : (
@@ -143,7 +143,7 @@ function UserRow({ u, onDelete, qc }: { u: any; onDelete: () => void; qc: any })
             <Edit3 className="h-3.5 w-3.5" strokeWidth={1.5} />
           </button>
           <button onClick={() => { if (confirm('Удалить пользователя и все его фото?')) onDelete(); }}
-            className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
+            className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
             <Trash2 className="h-3.5 w-3.5" strokeWidth={1.5} />
           </button>
         </div>
@@ -174,7 +174,7 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
             <input type="text" value={caption} onChange={e => setCaption(e.target.value)}
               className="flex-1 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus
               onKeyDown={e => { if (e.key === 'Enter') saveCaption(); if (e.key === 'Escape') { setEditing(false); setCaption(c.caption || ''); } }} />
-            <button onClick={saveCaption} className="btn-ghost h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
+            <button onClick={saveCaption} className="btn-ghost h-7 w-7 text-green-600 hover:bg-[var(--success-light)]"><Save className="h-3.5 w-3.5" /></button>
             <button onClick={() => { setEditing(false); setCaption(c.caption || ''); }} className="btn-ghost h-7 w-7 text-[var(--fg-tertiary)]"><X className="h-3.5 w-3.5" /></button>
           </div>
         ) : (
@@ -187,7 +187,7 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
           <Edit3 className="h-3.5 w-3.5" strokeWidth={1.5} />
         </button>
         <button onClick={() => { if (confirm('Удалить этот пост?')) onDelete(); }}
-          className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
+          className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
           <Trash2 className="h-3.5 w-3.5" strokeWidth={1.5} />
         </button>
       </div>

client/src/pages/CatPage.tsx

@@ -129,7 +129,7 @@ export default function CatPage() {
               </div>
             </Link>
             {isOwner && (
-              <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
+              <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
                 <Trash2 className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
@@ -180,7 +180,7 @@ export default function CatPage() {
                   {(user && (c.user_id === user.id || user.is_admin)) && (
                     <button
                       onClick={() => handleDeleteComment(c.id)}
-                      className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                      className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-[var(--danger)] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
                     >
                       <X className="h-3 w-3" strokeWidth={2} />
                     </button>
@@ -199,7 +199,7 @@ export default function CatPage() {
                 onChange={e => setCommentText(e.target.value)}
                 placeholder="Написать комментарий..."
                 maxLength={500}
-                className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-white placeholder:text-[var(--fg-tertiary)] focus-ring"
+                className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-[var(--surface)] placeholder:text-[var(--fg-tertiary)] focus-ring"
               />
               <button
                 type="submit"

client/src/pages/FeedPage.tsx

@@ -61,7 +61,7 @@ export default function FeedPage() {
 
           {isError && (
             <div className="flex flex-col items-center justify-center py-20 text-center animate-fade-up">
-              <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-red-50">
+              <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--danger-light)]">
                 <Cat className="h-7 w-7 text-red-400" strokeWidth={1.5} />
               </div>
               <p className="text-base font-semibold mb-1">Не удалось загрузить</p>

client/src/pages/LoginPage.tsx

@@ -37,13 +37,13 @@ export default function LoginPage() {
         <form onSubmit={handleSubmit} className="space-y-3">
           <Input value={username} onChange={e => setUsername(e.target.value)}
             placeholder="Имя пользователя" required autoFocus
-            className="h-12 text-sm rounded-xl bg-white border-[var(--border)] focus-ring" />
+            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
           <Input type="password" value={password} onChange={e => setPassword(e.target.value)}
             placeholder="Пароль" required
-            className="h-12 text-sm rounded-xl bg-white border-[var(--border)] focus-ring" />
+            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
 
           {error && (
-            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-red-50 text-red-600 text-xs font-medium animate-fade-up">
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-fade-up">
               {error}
             </div>
           )}

client/src/pages/ProfilePage.tsx

@@ -126,7 +126,7 @@ export default function ProfilePage() {
                 </Link>
               )}
               {isMe && (
-                <button onClick={logout} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-red-500" title="Выйти">
+                <button onClick={logout} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)]" title="Выйти">
                   <LogOut className="h-4 w-4" strokeWidth={1.5} />
                 </button>
               )}
@@ -200,7 +200,7 @@ export default function ProfilePage() {
 
       {showAvatarPicker && createPortal(
         <div className="fixed inset-0 z-[70] bg-black/30 flex items-center justify-center animate-fade-in" onClick={() => setShowAvatarPicker(false)}>
-          <div className="bg-white rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4" onClick={e => e.stopPropagation()}>
+          <div className="bg-[var(--surface)] rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4" onClick={e => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-5">
               <h2 className="text-base font-800">Выбрать аватар</h2>
               <button onClick={() => setShowAvatarPicker(false)} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)]">

client/src/pages/RegisterPage.tsx

@@ -39,16 +39,16 @@ export default function RegisterPage() {
         <form onSubmit={handleSubmit} className="space-y-3">
           <Input value={username} onChange={e => setUsername(e.target.value)}
             placeholder="Имя пользователя" minLength={3} required autoFocus
-            className="h-12 text-sm rounded-xl bg-white border-[var(--border)] focus-ring" />
+            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
           <Input type="password" value={password} onChange={e => setPassword(e.target.value)}
             placeholder="Пароль (мин. 4 символа)" minLength={4} required
-            className="h-12 text-sm rounded-xl bg-white border-[var(--border)] focus-ring" />
+            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
           <Input type="password" value={confirm} onChange={e => setConfirm(e.target.value)}
             placeholder="Подтвердите пароль" required
-            className="h-12 text-sm rounded-xl bg-white border-[var(--border)] focus-ring" />
+            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
 
           {error && (
-            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-red-50 text-red-600 text-xs font-medium animate-fade-up">
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-fade-up">
               {error}
             </div>
           )}

client/src/pages/UploadPage.tsx

@@ -51,7 +51,7 @@ export default function UploadPage() {
 
       {!preview ? (
         <div {...getRootProps()}
-          className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-white ${
+          className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-[var(--surface)] ${
             isDragActive ? 'border-[var(--accent)] bg-[var(--accent-light)] scale-[1.01]' : 'border-[var(--border)] hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]'
           }`}>
           <input {...getInputProps()} />
@@ -110,7 +110,7 @@ export default function UploadPage() {
           </div>
 
           {uploadMutation.isError && (
-            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-red-50 text-red-600 text-xs font-medium animate-fade-up">
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-fade-up">
               Не удалось загрузить. Попробуйте снова.
             </div>
           )}