UI: доработано оформление — тени, анимации, градиенты, iOS-стиль

client/src/components/CatCard.tsx

@@ -22,7 +22,6 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
 
   const toggleLike = async () => {
     if (isOwner || !user) return;
-
     if (liked) {
       setLiked(false);
       setLikeCount((c) => c - 1);
@@ -47,13 +46,12 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
   return (
     <article className="animate-fade-in-up mb-4 last:mb-0">
       <div className="card overflow-hidden">
-        {/* Header */}
+        <div
-        <div className="flex items-center justify-between px-4 py-3">
+          className="flex items-center justify-between px-4 py-3 cursor-pointer group"
-          <div
+          onClick={() => onOpen(cat.id)}
-            className="flex items-center gap-3 cursor-pointer group"
+        >
-            onClick={() => onOpen(cat.id)}
+          <div className="flex items-center gap-3">
-          >
+            <Avatar className="h-10 w-10 ring-1 ring-[var(--border)]">
-            <Avatar className="h-10 w-10">
               <AvatarFallback className="text-sm avatar-initials">
                 {cat.username.charAt(0).toUpperCase()}
               </AvatarFallback>
@@ -62,28 +60,23 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
               <h3 className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">
                 @{cat.username}
               </h3>
-              <time className="text-[11px] text-[var(--foreground-tertiary)]">{timeAgo}</time>
+              <time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time>
             </div>
           </div>
         </div>
 
-        {/* Image */}
+        <figure className="cursor-pointer bg-[var(--secondary)] img-shimmer" onClick={() => onOpen(cat.id)}>
-        <figure
-          className="cursor-pointer bg-[var(--secondary)] img-loading"
-          onClick={() => onOpen(cat.id)}
-        >
           <img
             src={cat.image_url}
             alt={cat.caption || 'Фото кота'}
-            className="w-full max-h-[500px] object-contain select-none mx-auto transition-opacity"
+            className="w-full max-h-[520px] object-contain select-none mx-auto"
             draggable={false}
             loading="lazy"
           />
         </figure>
 
-        {/* Caption */}
         {cat.caption && (
-          <div className="px-4 pt-3 pb-1 cursor-pointer" onClick={() => onOpen(cat.id)}>
+          <div className="px-4 pt-3 pb-0.5 cursor-pointer" onClick={() => onOpen(cat.id)}>
             <p className="text-[15px] leading-[1.4]">
               <span className="font-semibold mr-1.5">@{cat.username}</span>
               {cat.caption}
@@ -91,7 +84,6 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
           </div>
         )}
 
-        {/* Actions */}
         <div className="flex items-center justify-between px-4 py-3">
           <div className="flex items-center gap-5">
             <button
@@ -99,31 +91,28 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
               disabled={isOwner || !user}
               className={`btn-icon flex items-center gap-1.5 text-[14px] font-medium ${
                 isOwner
-                  ? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
+                  ? 'text-[var(--fg-tertiary)] cursor-not-allowed'
                   : liked
                     ? 'text-[var(--danger)]'
-                    : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
+                    : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
               }`}
             >
-              <Heart
+              <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} />
-                className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
-              />
               {likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
             </button>
 
             <button
               onClick={() => onOpen(cat.id)}
-              className="btn-icon flex items-center gap-1.5 text-[14px] font-medium text-[var(--foreground-secondary)] hover:text-[var(--foreground)]"
+              className="btn-icon flex items-center gap-1.5 text-[14px] font-medium text-[var(--fg-secondary)] hover:text-[var(--fg)]"
             >
               <MessageCircle className="h-5 w-5 stroke-[1.5]" />
               <span className="hidden sm:inline text-[13px]">Комментарии</span>
             </button>
           </div>
 
-          <span className="flex items-center gap-1 text-[12px] text-[var(--foreground-tertiary)]">
+          <span className="flex items-center gap-1 text-[12px] text-[var(--fg-tertiary)]">
             <span>🏆</span>
             <span className="font-medium">{cat.user_points}</span>
-            <span className="hidden sm:inline">баллов</span>
           </span>
         </div>
       </div>

client/src/components/CatModal.tsx

@@ -26,10 +26,12 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
 
   useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
   useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
+  useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []);
   useEffect(() => {
-    document.body.style.overflow = 'hidden';
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    return () => { document.body.style.overflow = ''; };
+    window.addEventListener('keydown', handler);
-  }, []);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
 
   const cat = data?.cat;
   const isOwner = cat && user && cat.user_id === user.id;
@@ -37,17 +39,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   const toggleLike = async () => {
     if (isOwner || !user || !cat) return;
     if (liked) {
-      setLiked(false);
+      setLiked(false); setLikeCount((c) => c - 1);
-      setLikeCount((c) => c - 1);
       try {
         const res = await unlikeMutation.mutateAsync();
-        if (res.ownerPoints !== undefined && cat.user_id === user.id)
+        if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
-          updateUser({ ...user, points: res.ownerPoints });
         refetchLike();
       } catch { setLiked(true); setLikeCount((c) => c + 1); }
     } else {
-      setLiked(true);
+      setLiked(true); setLikeCount((c) => c + 1);
-      setLikeCount((c) => c + 1);
       toast('Нравится ❤️');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); setLikeCount((c) => c - 1); }
@@ -63,19 +62,12 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
     } catch { toast('Ошибка удаления', 'error'); }
   };
 
-  // Close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [onClose]);
-
   if (isLoading || !cat) {
     return (
       <div className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center" onClick={onClose}>
         <div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in">
           <div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
-          <span className="text-[14px] font-medium text-[var(--foreground-secondary)]">Загрузка...</span>
+          <span className="text-[14px] font-medium text-[var(--fg-secondary)]">Загрузка...</span>
         </div>
       </div>
     );
@@ -86,51 +78,37 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   });
 
   return (
-    <div
+    <div className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center" onClick={onClose}>
-      className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center"
-      onClick={onClose}
-    >
       <div
-        className="w-full sm:max-w-xl bg-white sm:rounded-xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
+        className="w-full sm:max-w-xl bg-white sm:rounded-2xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b shrink-0">
           <div className="flex items-center gap-3">
             <Avatar className="h-9 w-9">
-              <AvatarFallback className="text-sm avatar-initials">
+              <AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
-                {cat.username.charAt(0).toUpperCase()}
-              </AvatarFallback>
             </Avatar>
             <div>
               <span className="text-[15px] font-semibold">@{cat.username}</span>
-              <p className="text-[11px] text-[var(--foreground-tertiary)]">{dateStr}</p>
+              <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
             </div>
           </div>
           <div className="flex items-center gap-1">
             {isOwner && (
-              <button
+              <button onClick={handleDelete} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
-                onClick={handleDelete}
-                className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
-                title="Удалить"
-              >
                 <Trash2 className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
-            <button
+            <button onClick={onClose} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]">
-              onClick={onClose}
-              className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)]"
-            >
               <X className="h-5 w-5" strokeWidth={1.5} />
             </button>
           </div>
         </div>
 
-        {/* Image */}
         <div className="bg-[var(--secondary)] flex items-center justify-center shrink-0 relative">
           {!imageLoaded && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="h-8 w-8 rounded-full border-2 border-[var(--foreground-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
+              <div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
             </div>
           )}
           <img
@@ -141,13 +119,10 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
           />
         </div>
 
-        {/* Info */}
         <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
           <div className="flex items-start gap-3">
             <Avatar className="h-8 w-8 shrink-0 mt-0.5">
-              <AvatarFallback className="text-[10px] avatar-initials">
+              <AvatarFallback className="text-[10px] avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
-                {cat.username.charAt(0).toUpperCase()}
-              </AvatarFallback>
             </Avatar>
             <div>
               <p className="text-[15px] leading-[1.4]">
@@ -158,31 +133,26 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
           </div>
         </div>
 
-        {/* Actions */}
         <div className="border-t px-5 py-4 shrink-0">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-5">
+            <button
-              <button
+              onClick={toggleLike}
-                onClick={toggleLike}
+              disabled={isOwner || !user}
-                disabled={isOwner || !user}
+              className={`btn-icon flex items-center gap-1.5 text-[15px] font-medium ${
-                className={`btn-icon flex items-center gap-1.5 text-[15px] font-medium ${
+                isOwner
-                  isOwner
+                  ? 'text-[var(--fg-tertiary)] cursor-not-allowed'
-                    ? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
+                  : liked
-                    : liked
+                    ? 'text-[var(--danger)]'
-                      ? 'text-[var(--danger)]'
+                    : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
-                      : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
+              }`}
-                }`}
+            >
-              >
+              <Heart className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} />
-                <Heart
+              {likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
-                  className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
+            </button>
-                />
+            <span className="flex items-center gap-1.5 text-[13px] text-[var(--fg-secondary)]">
-                {likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
-              </button>
-            </div>
-            <span className="flex items-center gap-1.5 text-[13px] text-[var(--foreground-secondary)]">
               <span>🏆</span>
               <span className="font-semibold">{cat.user_points}</span>
-              <span>баллов</span>
+              <span className="text-[var(--fg-tertiary)]">баллов</span>
             </span>
           </div>
         </div>

client/src/components/FeedSidebar.tsx

@@ -4,6 +4,19 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Link } from 'react-router-dom';
 import { Trophy, Sparkles } from 'lucide-react';
 
+function MedalBadge({ rank }: { rank: number }) {
+  const colors = [
+    'bg-amber-100 text-amber-600 shadow-[0_0_0_1px_rgba(217,119,6,0.15)]',
+    'bg-gray-100 text-gray-500 shadow-[0_0_0_1px_rgba(107,114,128,0.15)]',
+    'bg-orange-100 text-orange-600 shadow-[0_0_0_1px_rgba(234,88,12,0.15)]',
+  ];
+  return (
+    <span className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${colors[rank] || 'text-[var(--fg-tertiary)]'}`}>
+      {rank + 1}
+    </span>
+  );
+}
+
 export default function FeedSidebar() {
   const { user } = useAuth();
   const { data } = useCats(1);
@@ -21,82 +34,46 @@ export default function FeedSidebar() {
     .slice(0, 5);
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-5">
-      {/* Current user */}
       {user && (
-        <Link
+        <Link to="/profile" className="card flex items-center gap-3 p-3 hover:shadow-md transition-all group">
-          to="/profile"
+          <Avatar className="h-11 w-11 ring-1 ring-[var(--border)]">
-          className="card flex items-center gap-3 p-3 hover:shadow-md transition-all group"
-        >
-          <Avatar className="h-11 w-11">
             <AvatarFallback className="text-sm font-semibold avatar-initials">
               {user.username.charAt(0).toUpperCase()}
             </AvatarFallback>
           </Avatar>
           <div className="min-w-0 flex-1">
-            <p className="text-[14px] font-semibold truncate group-hover:text-[var(--primary)] transition-colors">
+            <p className="text-[14px] font-semibold truncate group-hover:text-[var(--primary)] transition-colors">{user.username}</p>
-              {user.username}
+            <p className="text-[12px] text-[var(--fg-secondary)]">🏆 {user.points} баллов</p>
-            </p>
-            <p className="text-[12px] text-[var(--foreground-secondary)]">
-              🏆 {user.points} баллов
-            </p>
           </div>
         </Link>
       )}
 
-      {/* Top users */}
       <div className="card p-4">
         <div className="flex items-center gap-2 mb-4">
           <Trophy className="h-4 w-4 text-amber-500" strokeWidth={1.5} />
-          <h3 className="text-[12px] font-bold text-[var(--foreground-secondary)] uppercase tracking-widest">
+          <h3 className="text-[11px] font-bold text-[var(--fg-secondary)] uppercase tracking-[0.08em]">Лидеры</h3>
-            Лидеры
-          </h3>
         </div>
 
         {topUsers.length === 0 ? (
-          <p className="text-[13px] text-[var(--foreground-tertiary)] text-center py-4">
+          <p className="text-[13px] text-[var(--fg-tertiary)] text-center py-4">Пока нет пользователей</p>
-            Пока нет пользователей
-          </p>
         ) : (
-          <div className="space-y-3">
+          <div className="space-y-2.5">
             {topUsers.map(([id, u], i) => (
-              <Link
+              <Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
-                key={id}
+                <MedalBadge rank={i} />
-                to={`/profile/${id}`}
-                className="flex items-center gap-3 group"
-              >
-                <span
-                  className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${
-                    i === 0
-                      ? 'bg-amber-100 text-amber-600'
-                      : i === 1
-                        ? 'bg-gray-100 text-gray-500'
-                        : i === 2
-                          ? 'bg-orange-100 text-orange-600'
-                          : 'text-[var(--foreground-tertiary)]'
-                  }`}
-                >
-                  {i + 1}
-                </span>
                 <Avatar className="h-8 w-8">
-                  <AvatarFallback className="text-[10px] avatar-initials">
+                  <AvatarFallback className="text-[10px] avatar-initials">{u.username.charAt(0).toUpperCase()}</AvatarFallback>
-                    {u.username.charAt(0).toUpperCase()}
-                  </AvatarFallback>
                 </Avatar>
-                <span className="text-[14px] flex-1 truncate font-medium group-hover:text-[var(--primary)] transition-colors">
+                <span className="text-[14px] flex-1 truncate font-medium group-hover:text-[var(--primary)] transition-colors">{u.username}</span>
-                  {u.username}
+                <span className="text-[12px] font-semibold text-[var(--fg-secondary)] tabular-nums">{u.points}</span>
-                </span>
-                <span className="text-[12px] font-semibold text-[var(--foreground-secondary)] tabular-nums">
-                  {u.points}
-                </span>
               </Link>
             ))}
           </div>
         )}
       </div>
 
-      {/* Info */}
+      <div className="px-1 text-[11px] text-[var(--fg-tertiary)]">
-      <div className="px-1 text-[11px] text-[var(--foreground-tertiary)] space-y-1">
         <div className="flex items-center gap-1.5">
           <Sparkles className="h-3 w-3" strokeWidth={1.5} />
           <span>Catstagram · Сообщество котоводов</span>

client/src/components/Navbar.tsx

@@ -1,7 +1,6 @@
 import { Link, useLocation } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { House, Plus } from 'lucide-react';
 
 export default function Navbar() {
   const { user } = useAuth();
@@ -9,44 +8,19 @@ export default function Navbar() {
 
   if (!user) return null;
 
-  const navItems = [
-    { to: '/feed', label: 'Лента', icon: House },
-    { to: '/upload', label: 'Добавить', icon: Plus },
-  ];
-
   return (
-    <nav className="sticky top-0 z-50 bg-[var(--surface)]/90 backdrop-blur-xl border-b border-[var(--border)]">
+    <nav className="sticky top-0 z-50 bg-[var(--surface)]/80 backdrop-blur-xl border-b">
       <div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4">
-        <Link
+        <Link to="/feed" className="text-[19px] font-bold gradient-text tracking-tight">
-          to="/feed"
-          className="text-[18px] font-bold tracking-tight"
-          style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
-        >
           Catstagram
         </Link>
 
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-0.5">
-          {navItems.map((item) => {
+          <NavLink to="/feed" active={location.pathname === '/feed'} emoji="🏠" label="Лента" />
-            const Icon = item.icon;
+          <NavLink to="/upload" active={location.pathname === '/upload'} emoji="➕" label="Добавить" short />
-            const isActive = location.pathname === item.to;
-            return (
-              <Link
-                key={item.to}
-                to={item.to}
-                className={`flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13px] font-medium transition-all ${
-                  isActive
-                    ? 'bg-[var(--primary-light)] text-[var(--primary)]'
-                    : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)]'
-                }`}
-              >
-                <Icon className={`h-4 w-4 ${isActive ? 'stroke-[2.5]' : 'stroke-[1.5]'}`} />
-                <span className="hidden sm:inline">{item.label}</span>
-              </Link>
-            );
-          })}
 
-          <Link to="/profile" className="ml-1">
+          <Link to="/profile" className="ml-2">
-            <Avatar className="h-8 w-8 border-2 border-transparent hover:border-[var(--primary)] transition-all">
+            <Avatar className="h-8 w-8 ring-1 ring-[var(--border)] hover:ring-[var(--primary)] transition-all">
               <AvatarFallback className="text-[11px] avatar-initials">
                 {user.username.charAt(0).toUpperCase()}
               </AvatarFallback>
@@ -57,3 +31,19 @@ export default function Navbar() {
     </nav>
   );
 }
+
+function NavLink({ to, active, emoji, label, short }: { to: string; active: boolean; emoji: string; label: string; short?: boolean }) {
+  return (
+    <Link
+      to={to}
+      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] font-medium transition-all ${
+        active
+          ? 'bg-[var(--primary-soft)] text-[var(--primary)]'
+          : 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
+      }`}
+    >
+      <span className="text-[15px] leading-none">{emoji}</span>
+      {(!short || true) && <span className={short ? 'hidden sm:inline' : ''}>{label}</span>}
+    </Link>
+  );
+}

client/src/components/ProtectedRoute.tsx

@@ -1,20 +1,24 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
+import { Cat } from 'lucide-react';
 
 export default function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { user, isLoading } = useAuth();
 
   if (isLoading) {
     return (
-      <div className="flex h-screen items-center justify-center">
+      <div className="flex h-screen items-center justify-center bg-[var(--bg)]">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        <div className="flex flex-col items-center gap-4">
+          <div className="h-14 w-14 rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
+            <Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
+          </div>
+          <div className="h-6 w-6 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
+        </div>
       </div>
     );
   }
 
-  if (!user) {
+  if (!user) return <Navigate to="/login" replace />;
-    return <Navigate to="/login" replace />;
-  }
 
   return <>{children}</>;
 }

client/src/components/Toast.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
 
-type ToastType = 'success' | 'error' | 'like';
+type ToastType = 'success' | 'error';
 
 interface ToastItem { id: number; message: string; type: ToastType; }
 
@@ -25,10 +25,10 @@ export function ToastProvider({ children }: { children: ReactNode }) {
         {toasts.map((t) => (
           <div
             key={t.id}
-            className="animate-toast-in rounded-full px-6 py-2.5 text-[14px] font-medium shadow-lg pointer-events-auto"
+            className="animate-toast-in rounded-full px-5 py-2.5 text-[14px] font-medium shadow-lg pointer-events-auto"
             style={{
               background: t.type === 'error'
-                ? 'var(--danger)'
+                ? 'linear-gradient(135deg, #ff3b30, #ff6b6b)'
                 : 'linear-gradient(135deg, #007aff, #5856d6)',
               color: 'white',
             }}

client/src/index.css

@@ -2,39 +2,34 @@
 @plugin "tailwindcss-animate";
 
 :root {
-  --background: #f5f5f7;
+  --bg: #f2f2f7;
   --surface: #ffffff;
   --surface-hover: #f8f8fa;
-  --foreground: #1c1c1e;
+  --fg: #1c1c1e;
-  --foreground-secondary: #8a8a8e;
+  --fg-secondary: #8a8a8e;
-  --foreground-tertiary: #aeaeb2;
+  --fg-tertiary: #aeaeb2;
   --primary: #007aff;
-  --primary-hover: #0066d6;
+  --primary-hover: #0056cc;
   --primary-light: #e8f2ff;
-  --primary-foreground: #ffffff;
+  --primary-soft: rgba(0, 122, 255, 0.08);
   --secondary: #f2f2f5;
-  --secondary-foreground: #1c1c1e;
   --border: #e5e5ea;
-  --border-light: #f0f0f3;
   --danger: #ff3b30;
   --danger-hover: #d6342b;
   --danger-light: #ffe8e6;
   --success: #34c759;
   --success-light: #e8f8ed;
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
-  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
+  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
-  --radius-sm: 8px;
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
-  --radius-md: 14px;
-  --radius-lg: 20px;
-  --radius-full: 9999px;
 }
 
 * { border-color: var(--border); }
 
 body {
-  background: var(--background);
+  background: var(--bg);
-  color: var(--foreground);
+  color: var(--fg);
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -43,71 +38,56 @@ body {
   letter-spacing: -0.01em;
 }
 
-::selection { background: var(--primary); color: white; }
-
 /* ── Animations ── */
 
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
 @keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(6px); }
+  from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
 @keyframes scale-in {
   from { opacity: 0; transform: scale(0.96); }
   to { opacity: 1; transform: scale(1); }
 }
-@keyframes slide-up {
-  from { opacity: 0; transform: translateY(100%); }
-  to { opacity: 1; transform: translateY(0); }
-}
 @keyframes heart-bounce {
   0% { transform: scale(1); }
-  25% { transform: scale(1.3); }
+  25% { transform: scale(1.35); }
-  50% { transform: scale(0.95); }
+  50% { transform: scale(0.9); }
   75% { transform: scale(1.1); }
   100% { transform: scale(1); }
 }
-@keyframes spin-slow {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
 @keyframes toast-in {
-  from { opacity: 0; transform: translateY(12px) scale(0.96); }
+  from { opacity: 0; transform: translateY(16px) scale(0.95); }
   to { opacity: 1; transform: translateY(0) scale(1); }
 }
-@keyframes toast-out {
+@keyframes skeleton-pulse {
-  from { opacity: 1; transform: translateY(0) scale(1); }
+  0% { opacity: 0.6; }
-  to { opacity: 0; transform: translateY(-8px) scale(0.96); }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
 }
 
-.animate-fade-in { animation: fade-in 0.15s ease-out; }
+.animate-fade-in-up { animation: fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
-.animate-fade-in-up { animation: fade-in-up 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
-.animate-scale-in { animation: scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-heart { animation: heart-bounce 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
-.animate-slide-up { animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
-.animate-heart { animation: heart-bounce 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-skeleton { animation: skeleton-pulse 1.5s ease-in-out infinite; }
-.animate-spin-slow { animation: spin-slow 1s linear infinite; }
+.animate-float { animation: float 3s ease-in-out infinite; }
-.animate-toast-in { animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
 
-/* ── Shared UI ── */
+/* ── Card ── */
 
 .card {
   background: var(--surface);
-  border-radius: var(--radius-md);
+  border-radius: 16px;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-card);
   border: 1px solid var(--border);
-  transition: box-shadow 0.2s ease;
+  transition: box-shadow 0.2s, transform 0.15s;
-}
-.card:hover {
-  box-shadow: var(--shadow-md);
 }
 
+/* ── Avatar ── */
+
 .avatar-initials {
   border-radius: 50%;
   display: flex;
@@ -115,105 +95,68 @@ body {
   justify-content: center;
   font-weight: 600;
   color: white;
-  background: var(--primary);
+  background: linear-gradient(135deg, var(--primary), #5856d6);
   user-select: none;
 }
 
+/* ── Buttons ── */
+
 .btn-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-full);
+  border-radius: 9999px;
-  transition: background 0.15s ease, transform 0.1s ease;
-  cursor: pointer;
-  border: none;
-}
-.btn-icon:active {
-  transform: scale(0.92);
-}
-
-.link-blue {
-  color: var(--primary);
-  font-weight: 600;
-  transition: opacity 0.15s;
-}
-.link-blue:hover {
-  opacity: 0.8;
-  text-decoration: underline;
-}
-
-.text-secondary { color: var(--foreground-secondary); }
-.text-tertiary { color: var(--foreground-tertiary); }
-
-/* ── Utility ── */
-
-.skeleton-shimmer {
-  background: linear-gradient(90deg, #e8e8ec 25%, #f2f2f5 50%, #e8e8ec 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.2s ease-in-out infinite;
-}
-
-/* ── Modal backdrop ── */
-
-.backdrop-blur {
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-
-/* ── Button base ── */
-
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  border-radius: var(--radius-full);
-  background: var(--primary);
-  color: white;
   transition: background 0.15s, transform 0.1s;
   cursor: pointer;
   border: none;
 }
-.btn-primary:hover { background: var(--primary-hover); }
+.btn-icon:active { transform: scale(0.9); }
-.btn-primary:active { transform: scale(0.97); }
-.btn-primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
 
-.btn-outline {
+.link-accent {
-  display: inline-flex;
+  color: var(--primary);
-  align-items: center;
+  font-weight: 600;
-  justify-content: center;
+  transition: opacity 0.15s;
-  font-weight: 500;
-  border-radius: var(--radius-full);
-  background: transparent;
-  color: var(--foreground);
-  border: 1px solid var(--border);
-  transition: background 0.15s, border-color 0.15s;
-  cursor: pointer;
 }
-.btn-outline:hover { background: var(--secondary); border-color: var(--foreground-tertiary); }
+.link-accent:hover { opacity: 0.8; text-decoration: underline; }
-.btn-outline:active { transform: scale(0.97); }
 
-/* ── Scrollbar ── */
+/* ── Utilities ── */
+
+.text-secondary { color: var(--fg-secondary); }
+.text-tertiary { color: var(--fg-tertiary); }
 
 .scrollbar-none::-webkit-scrollbar { display: none; }
 .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
 
-/* ── Image loading ── */
+/* ── Image shimmer ── */
 
-.img-loading {
+.img-shimmer {
-  background: var(--secondary);
   position: relative;
   overflow: hidden;
 }
-.img-loading::after {
+.img-shimmer::after {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-  animation: shimmer 1.5s infinite;
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  background-size: 200% 100%;
+}
+
+/* ── Gradient text ── */
+
+.gradient-text {
+  background: linear-gradient(135deg, #007aff, #5856d6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ── Focus ring ── */
+
+.input-focus {
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.input-focus:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
+  outline: none;
 }

client/src/pages/CatPage.tsx

@@ -36,8 +36,7 @@ export default function CatPage() {
       setLiked(false);
       try {
         const res = await unlikeMutation.mutateAsync();
-        if (res.ownerPoints !== undefined && cat.user_id === user.id)
+        if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
-          updateUser({ ...user, points: res.ownerPoints });
         refetchLike();
       } catch { setLiked(true); }
     } else {
@@ -73,21 +72,13 @@ export default function CatPage() {
 
   if (isError || !cat) {
     return (
-      <div className="flex flex-col items-center justify-center py-24 animate-fade-in">
+      <div className="flex flex-col items-center justify-center py-24 animate-fade-in-up">
         <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]">
           <span className="text-2xl">🔍</span>
         </div>
         <p className="text-[17px] font-semibold mb-1.5">Кот не найден</p>
-        <p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
+        <p className="text-[14px] text-[var(--fg-secondary)] mb-6">Возможно, публикация была удалена</p>
-          Возможно, публикация была удалена
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
-        </p>
-        <Button
-          variant="outline"
-          onClick={() => navigate('/feed')}
-          className="rounded-full text-[13px]"
-        >
-          Перейти в ленту
-        </Button>
       </div>
     );
   }
@@ -97,59 +88,43 @@ export default function CatPage() {
   });
 
   return (
-    <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
+    <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in-up">
-      <button
+      <button onClick={() => navigate(-1)}
-        onClick={() => navigate(-1)}
+        className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group">
-        className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
-      >
         <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
         Назад
       </button>
 
       <div className="card overflow-hidden">
-        {/* Image */}
+        <div className="bg-[var(--secondary)] relative img-shimmer">
-        <div className="bg-[var(--secondary)] relative img-loading">
           {!imageLoaded && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="h-8 w-8 rounded-full border-2 border-[var(--foreground-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
+              <div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
             </div>
           )}
-          <img
+          <img src={cat.image_url} alt={cat.caption || 'Фото кота'}
-            src={cat.image_url}
-            alt={cat.caption || 'Фото кота'}
             className={`w-full max-h-[60vh] object-contain mx-auto transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
-            onLoad={() => setImageLoaded(true)}
+            onLoad={() => setImageLoaded(true)} />
-          />
         </div>
 
         <div className="p-5 space-y-4">
-          {/* Header */}
           <div className="flex items-start justify-between">
             <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
-              <Avatar className="h-10 w-10">
+              <Avatar className="h-10 w-10 ring-1 ring-[var(--border)]">
-                <AvatarFallback className="text-sm avatar-initials">
+                <AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
-                  {cat.username.charAt(0).toUpperCase()}
-                </AvatarFallback>
               </Avatar>
               <div>
-                <span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">
+                <span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span>
-                  @{cat.username}
+                <p className="text-[12px] text-[var(--fg-tertiary)]">{dateStr}</p>
-                </span>
-                <p className="text-[12px] text-[var(--foreground-tertiary)]">{dateStr}</p>
               </div>
             </Link>
             {isOwner && (
-              <button
+              <button onClick={handleDelete} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
-                onClick={handleDelete}
-                className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
-                title="Удалить"
-              >
                 <Trash2 className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
           </div>
 
-          {/* Caption */}
           {cat.caption && (
             <p className="text-[15px] leading-[1.4]">
               <span className="font-semibold mr-1.5">@{cat.username}</span>
@@ -157,44 +132,26 @@ export default function CatPage() {
             </p>
           )}
 
-          {/* Divider */}
+          <div className="border-t" />
-          <div className="border-t border-[var(--border)]" />
 
-          {/* Actions */}
           <div className="flex items-center gap-6">
-            <button
+            <button onClick={toggleLike} disabled={isOwner || !user}
-              onClick={toggleLike}
-              disabled={isOwner || !user}
               className={`btn-icon flex items-center gap-2 text-[15px] font-medium ${
-                isOwner
+                isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
-                  ? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
+              }`}>
-                  : liked
+              <Heart className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} />
-                    ? 'text-[var(--danger)]'
-                    : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
-              }`}
-            >
-              <Heart
-                className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
-              />
               {cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>}
             </button>
-
+            <span className="flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)]">
-            <span className="flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)]">
               <span>🏆</span>
               <span className="font-semibold">{cat.user_points}</span>
-              <span className="text-[var(--foreground-tertiary)]">баллов</span>
+              <span className="text-[var(--fg-tertiary)]">баллов</span>
             </span>
           </div>
 
-          {/* Back to feed button */}
+          <div className="pt-1">
-          <div className="pt-2">
+            <Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-full text-[12px] h-8 gap-1">
-            <Button
+              <ArrowLeft className="h-3.5 w-3.5" strokeWidth={1.5} /> В ленту
-              variant="outline"
-              size="sm"
-              onClick={() => navigate('/feed')}
-              className="rounded-full text-[12px] h-8"
-            >
-              ← В ленту
             </Button>
           </div>
         </div>

client/src/pages/FeedPage.tsx

@@ -4,7 +4,6 @@ import CatCard from '@/components/CatCard';
 import FeedSidebar from '@/components/FeedSidebar';
 import CatModal from '@/components/CatModal';
 import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
 import { ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react';
 
 function FeedSkeleton() {
@@ -13,16 +12,16 @@ function FeedSkeleton() {
       {Array.from({ length: 3 }).map((_, i) => (
         <div key={i} className="card overflow-hidden">
           <div className="flex items-center gap-3 px-4 py-3">
-            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="h-10 w-10 rounded-full bg-[var(--secondary)] animate-skeleton" />
-            <div className="space-y-1.5">
+            <div className="space-y-2">
-              <Skeleton className="h-4 w-28 rounded-full" />
+              <div className="h-3.5 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" />
-              <Skeleton className="h-3 w-16 rounded-full" />
+              <div className="h-2.5 w-16 rounded-full bg-[var(--secondary)] animate-skeleton" />
             </div>
           </div>
-          <Skeleton className="aspect-[4/3] w-full" />
+          <div className="aspect-[4/3] w-full bg-[var(--secondary)] animate-skeleton" />
           <div className="p-4 space-y-2">
-            <Skeleton className="h-4 w-40 rounded-full" />
+            <div className="h-3.5 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" />
-            <Skeleton className="h-4 w-20 rounded-full" />
+            <div className="h-3.5 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" />
           </div>
         </div>
       ))}
@@ -39,34 +38,23 @@ export default function FeedPage() {
     <div className="mx-auto max-w-[660px] px-4 py-4">
       <div className="flex gap-6">
         <main className="flex-1 min-w-0">
-          {/* Page indicator */}
           {data && data.totalPages > 0 && (
             <div className="flex items-center justify-between mb-4">
-              <h2 className="text-[13px] font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
+              <h2 className="text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-[0.08em]">Лента</h2>
-                Лента
+              <span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{data.total} публикаций</span>
-              </h2>
-              <span className="text-[12px] text-[var(--foreground-tertiary)] tabular-nums">
-                {data.total} публикаций
-              </span>
             </div>
           )}
 
           {isLoading && <FeedSkeleton />}
 
           {isError && (
-            <div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
+            <div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in-up">
               <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--danger-light)]">
                 <span className="text-2xl">😿</span>
               </div>
               <p className="text-[17px] font-semibold mb-1.5">Не удалось загрузить</p>
-              <p className="text-[14px] text-[var(--foreground-secondary)] mb-6 max-w-xs">
+              <p className="text-[14px] text-[var(--fg-secondary)] mb-6 max-w-xs">Проверьте подключение и попробуйте снова</p>
-                Проверьте подключение к интернету и попробуйте снова
+              <Button variant="outline" onClick={() => refetch()} className="rounded-full text-[13px] gap-1.5">
-              </p>
-              <Button
-                variant="outline"
-                onClick={() => refetch()}
-                className="rounded-full text-[13px] gap-1.5"
-              >
                 <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} />
                 Попробовать снова
               </Button>
@@ -74,18 +62,14 @@ export default function FeedPage() {
           )}
 
           {data && data.cats.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
+            <div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in-up">
               <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--primary-light)]">
                 <span className="text-2xl">🐱</span>
               </div>
               <p className="text-[17px] font-semibold mb-1.5">Пока нет котов</p>
-              <p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
+              <p className="text-[14px] text-[var(--fg-secondary)] mb-6">Будьте первым, кто загрузит фото кота</p>
-                Будьте первым, кто загрузит фото кота
+              <Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px]"
-              </p>
+                style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
-              <Button
-                onClick={() => window.location.href = '/upload'}
-                className="rounded-full text-[13px] bg-[var(--primary)] hover:bg-[var(--primary-hover)]"
-              >
                 Загрузить кота
               </Button>
             </div>
@@ -93,48 +77,32 @@ export default function FeedPage() {
 
           {data && data.cats.length > 0 && (
             <>
-              {data.cats.map((cat, index) => (
+              {data.cats.map((cat) => (
                 <CatCard key={cat.id} cat={cat} onOpen={setModalCatId} />
               ))}
 
               {data.totalPages > 1 && (
-                <nav className="flex items-center justify-center gap-4 mt-6 pb-6">
+                <nav className="flex items-center justify-center gap-3 mt-6 pb-6">
-                  <Button
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}
-                    variant="outline"
+                    className="rounded-full text-[13px] h-9 px-4 gap-0.5">
-                    size="sm"
+                    <ChevronLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
-                    onClick={() => setPage((p) => Math.max(1, p - 1))}
-                    disabled={page === 1}
-                    className="rounded-full text-[13px] h-9 px-4 gap-1"
-                  >
-                    <ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
-                    Назад
                   </Button>
 
                   <div className="flex gap-1.5">
                     {Array.from({ length: data.totalPages }, (_, i) => i + 1).map((p) => (
-                      <button
+                      <button key={p} onClick={() => setPage(p)}
-                        key={p}
-                        onClick={() => setPage(p)}
                         className={`h-8 w-8 rounded-full text-[13px] font-medium transition-all ${
-                          p === page
+                          p === page ? 'text-white shadow-md' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'
-                            ? 'bg-[var(--primary)] text-white'
-                            : 'text-[var(--foreground-secondary)] hover:bg-[var(--secondary)]'
                         }`}
-                      >
+                        style={p === page ? { background: 'linear-gradient(135deg, #007aff, #5856d6)' } : {}}>
                         {p}
                       </button>
                     ))}
                   </div>
 
-                  <Button
+                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages}
-                    variant="outline"
+                    className="rounded-full text-[13px] h-9 px-4 gap-0.5">
-                    size="sm"
+                    Вперёд <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
-                    onClick={() => setPage((p) => p + 1)}
-                    disabled={page >= data.totalPages}
-                    className="rounded-full text-[13px] h-9 px-4 gap-1"
-                  >
-                    Вперёд
-                    <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
                   </Button>
                 </nav>
               )}
@@ -143,9 +111,7 @@ export default function FeedPage() {
         </main>
 
         <aside className="hidden lg:block w-[240px] shrink-0">
-          <div className="sticky top-20">
+          <div className="sticky top-20"><FeedSidebar /></div>
-            <FeedSidebar />
-          </div>
         </aside>
       </div>
 

client/src/pages/LoginPage.tsx

@@ -26,22 +26,22 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
+    <div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
       <div className="w-full max-w-sm animate-fade-in-up">
         <div className="text-center mb-10">
-          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
+          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full animate-float"
             style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
             <Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
           </div>
-          <h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
+          <h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
-          <p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
+          <p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">
             Войдите, чтобы смотреть котов
           </p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-3.5">
+        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-1">
+          <div className="space-y-1.5">
-            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+            <label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">
               Имя пользователя
             </label>
             <Input
@@ -50,11 +50,11 @@ export default function LoginPage() {
               placeholder="your_cat_lover"
               required
               autoFocus
-              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+              className="h-12 text-[15px] rounded-xl bg-white border input-focus"
             />
           </div>
-          <div className="space-y-1">
+          <div className="space-y-1.5">
-            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+            <label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">
               Пароль
             </label>
             <Input
@@ -63,13 +63,13 @@ export default function LoginPage() {
               onChange={(e) => setPassword(e.target.value)}
               placeholder="••••••••"
               required
-              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+              className="h-12 text-[15px] rounded-xl bg-white border input-focus"
             />
           </div>
 
           {error && (
-            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up">
-              <span>⚠</span>
+              <span>⚠️</span>
               <span>{error}</span>
             </div>
           )}
@@ -77,7 +77,8 @@ export default function LoginPage() {
           <Button
             type="submit"
             disabled={loading}
-            className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
+            className="w-full h-12 rounded-xl text-[15px] font-semibold transition-all active:scale-[0.98]"
+            style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
           >
             {loading ? (
               <span className="flex items-center gap-2">
@@ -89,21 +90,15 @@ export default function LoginPage() {
         </form>
 
         <div className="relative my-8">
-          <div className="absolute inset-0 flex items-center">
+          <div className="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
-            <div className="w-full border-t border-[var(--border)]"></div>
-          </div>
           <div className="relative flex justify-center">
-            <span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
+            <span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
-              или
-            </span>
           </div>
         </div>
 
-        <p className="text-center text-[14px] text-[var(--foreground-secondary)]">
+        <p className="text-center text-[14px] text-[var(--fg-secondary)]">
           Нет аккаунта?{' '}
-          <Link to="/register" className="link-blue">
+          <Link to="/register" className="link-accent">Зарегистрироваться</Link>
-            Зарегистрироваться
-          </Link>
         </p>
       </div>
     </div>

client/src/pages/ProfilePage.tsx

@@ -13,7 +13,7 @@ export default function ProfilePage() {
   const navigate = useNavigate();
   const { user: me, logout } = useAuth();
   const [modalCatId, setModalCatId] = useState<number | null>(null);
-  const [tab, setTab] = useState<'photos' | 'likes'>('photos');
+  const [tab, setTab] = useState<'photos'>('photos');
 
   const profileUserId = paramId ? parseInt(paramId) : me?.id;
   const isMe = !paramId || (me && profileUserId === me.id);
@@ -37,9 +37,7 @@ export default function ProfilePage() {
           </div>
         </div>
         <div className="grid grid-cols-3 gap-2">
-          {Array.from({ length: 6 }).map((_, i) => (
+          {Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-xl" />))}
-            <Skeleton key={i} className="aspect-square rounded-xl" />
-          ))}
         </div>
       </div>
     );
@@ -47,14 +45,10 @@ export default function ProfilePage() {
 
   if (!profileUser && !isMe) {
     return (
-      <div className="flex flex-col items-center justify-center py-24 animate-fade-in">
+      <div className="flex flex-col items-center justify-center py-24 animate-fade-in-up">
-        <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]">
+        <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]"><span className="text-2xl">🔍</span></div>
-          <span className="text-2xl">🔍</span>
-        </div>
         <p className="text-[17px] font-semibold mb-1.5">Пользователь не найден</p>
-        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">Вернуться в ленту</Button>
-          Вернуться в ленту
-        </Button>
       </div>
     );
   }
@@ -64,21 +58,17 @@ export default function ProfilePage() {
   const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
 
   return (
-    <div className="mx-auto max-w-[660px] px-4 py-6">
+    <div className="mx-auto max-w-[660px] px-4 py-6 animate-fade-in-up">
       {!isMe && (
-        <button
+        <button onClick={() => navigate(-1)} className="mb-4 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group">
-          onClick={() => navigate(-1)}
+          <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
-          className="mb-4 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors"
-        >
-          <ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
           Назад
         </button>
       )}
 
-      {/* Profile header */}
       <div className="flex items-center gap-6 mb-8">
         <Avatar className="h-20 w-20 shrink-0 ring-2 ring-[var(--primary)]/20 ring-offset-2">
-          <AvatarFallback className="text-[26px] font-bold avatar-initials">
+          <AvatarFallback className="text-[26px] font-bold" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)', color: 'white', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
             {initials}
           </AvatarFallback>
         </Avatar>
@@ -86,11 +76,7 @@ export default function ProfilePage() {
           <div className="flex items-center gap-3 mb-2">
             <h1 className="text-[20px] font-bold truncate">@{profileUser?.username}</h1>
             {isMe && (
-              <button
+              <button onClick={logout} className="btn-icon h-8 w-8 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)] ml-auto" title="Выйти">
-                onClick={logout}
-                className="btn-icon h-8 w-8 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)] ml-auto"
-                title="Выйти"
-              >
                 <LogOut className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
@@ -99,21 +85,22 @@ export default function ProfilePage() {
           <div className="flex items-center gap-6 text-[14px] mb-3">
             <div className="text-center">
               <p className="font-bold text-[16px]">{cats.length}</p>
-              <p className="text-[12px] text-[var(--foreground-secondary)]">публикаций</p>
+              <p className="text-[11px] text-[var(--fg-secondary)]">публикаций</p>
             </div>
             <div className="text-center">
               <p className="font-bold text-[16px]">{totalLikes}</p>
-              <p className="text-[12px] text-[var(--foreground-secondary)]">лайков</p>
+              <p className="text-[11px] text-[var(--fg-secondary)]">лайков</p>
             </div>
             <div className="text-center">
               <p className="font-bold text-[16px]">🏆{profileUser?.points ?? 0}</p>
-              <p className="text-[12px] text-[var(--foreground-secondary)]">баллов</p>
+              <p className="text-[11px] text-[var(--fg-secondary)]">баллов</p>
             </div>
           </div>
 
           {isMe && (
             <Link to="/upload">
-              <Button size="sm" className="rounded-full text-[13px] h-8 bg-[var(--primary)] hover:bg-[var(--primary-hover)] gap-1.5">
+              <Button size="sm" className="rounded-full text-[13px] h-8 gap-1.5"
+                style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
                 <Plus className="h-3.5 w-3.5" strokeWidth={2} />
                 Новая публикация
               </Button>
@@ -122,84 +109,42 @@ export default function ProfilePage() {
         </div>
       </div>
 
-      {/* Tabs */}
+      <div className="flex gap-1 mb-5">
-      <div className="flex gap-1 mb-5 border-b border-[var(--border)]">
+        <button onClick={() => setTab('photos')}
-        <button
+          className={`px-5 py-2.5 text-[14px] font-medium rounded-lg transition-all ${
-          onClick={() => setTab('photos')}
+            tab === 'photos' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
-          className={`px-5 py-3 text-[14px] font-medium border-b-2 transition-all ${
+          }`}>
-            tab === 'photos'
-              ? 'border-[var(--primary)] text-[var(--primary)]'
-              : 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
-          }`}
-        >
           Фото
         </button>
-        <button
-          onClick={() => setTab('likes')}
-          className={`px-5 py-3 text-[14px] font-medium border-b-2 transition-all ${
-            tab === 'likes'
-              ? 'border-[var(--primary)] text-[var(--primary)]'
-              : 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
-          }`}
-        >
-          Избранное
-        </button>
       </div>
 
-      {/* Content */}
+      {cats.length === 0 ? (
-      {tab === 'photos' && (
+        <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in-up">
-        cats.length === 0 ? (
+          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--secondary)]"><span className="text-xl">📸</span></div>
-          <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in">
+          <p className="text-[15px] font-medium mb-1">Пока нет котов</p>
-            <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--secondary)]">
+          <p className="text-[13px] text-[var(--fg-secondary)] mb-5 max-w-xs">
-              <span className="text-xl">📸</span>
+            {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
-            </div>
-            <p className="text-[15px] font-medium mb-1">Пока нет котов</p>
-            <p className="text-[13px] text-[var(--foreground-secondary)] mb-5 max-w-xs">
-              {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
-            </p>
-            {isMe && (
-              <Link to="/upload">
-                <Button size="sm" className="rounded-full text-[13px] bg-[var(--primary)] hover:bg-[var(--primary-hover)]">
-                  Загрузить кота
-                </Button>
-              </Link>
-            )}
-          </div>
-        ) : (
-          <div className="grid grid-cols-3 gap-2">
-            {cats.map((cat) => (
-              <button
-                key={cat.id}
-                onClick={() => setModalCatId(cat.id)}
-                className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl"
-              >
-                <img
-                  src={cat.image_url}
-                  alt={cat.caption || 'Фото кота'}
-                  className="h-full w-full object-cover transition-all duration-300 group-hover:scale-105"
-                  loading="lazy"
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
-                  <div className="flex items-center gap-1.5 text-white text-[13px] font-semibold">
-                    <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
-                    <span>{cat.likes_count}</span>
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        )
-      )}
-
-      {tab === 'likes' && (
-        <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in">
-          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--primary-light)]">
-            <Heart className="h-6 w-6 text-[var(--primary)]" strokeWidth={1.5} />
-          </div>
-          <p className="text-[15px] font-medium mb-1">Скоро</p>
-          <p className="text-[13px] text-[var(--foreground-secondary)]">
-            Здесь появятся понравившиеся коты
           </p>
+          {isMe && (
+            <Link to="/upload"><Button size="sm" className="rounded-full text-[13px]"
+              style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>Загрузить кота</Button></Link>
+          )}
+        </div>
+      ) : (
+        <div className="grid grid-cols-3 gap-1.5">
+          {cats.map((cat) => (
+            <button key={cat.id} onClick={() => setModalCatId(cat.id)}
+              className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl shadow-sm">
+              <img src={cat.image_url} alt={cat.caption || 'Фото кота'}
+                className="h-full w-full object-cover transition-all duration-300 group-hover:scale-105" loading="lazy" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
+                <div className="flex items-center gap-1.5 text-white text-[13px] font-semibold drop-shadow-sm">
+                  <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
+                  <span>{cat.likes_count}</span>
+                </div>
+              </div>
+            </button>
+          ))}
         </div>
       )}
 

client/src/pages/RegisterPage.tsx

@@ -18,12 +18,7 @@ export default function RegisterPage() {
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError('');
-
+    if (password !== confirm) { setError('Пароли не совпадают'); return; }
-    if (password !== confirm) {
-      setError('Пароли не совпадают');
-      return;
-    }
-
     setLoading(true);
     try {
       await register(username, password);
@@ -33,73 +28,41 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
+    <div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
       <div className="w-full max-w-sm animate-fade-in-up">
         <div className="text-center mb-10">
-          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
+          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full animate-float"
             style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
             <Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
           </div>
-          <h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
+          <h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
-          <p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
+          <p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
-            Присоединяйтесь к сообществу
-          </p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-3.5">
+        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-1">
+          <div className="space-y-1.5">
-            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+            <label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Имя пользователя</label>
-              Имя пользователя
+            <Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="your_cat_lover" minLength={3} required autoFocus className="h-12 text-[15px] rounded-xl bg-white border input-focus" />
-            </label>
-            <Input
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder="your_cat_lover"
-              minLength={3}
-              required
-              autoFocus
-              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
-            />
           </div>
-          <div className="space-y-1">
+          <div className="space-y-1.5">
-            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+            <label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Пароль</label>
-              Пароль
+            <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Минимум 4 символа" minLength={4} required className="h-12 text-[15px] rounded-xl bg-white border input-focus" />
-            </label>
-            <Input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Минимум 4 символа"
-              minLength={4}
-              required
-              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
-            />
           </div>
-          <div className="space-y-1">
+          <div className="space-y-1.5">
-            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+            <label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Подтвердите пароль</label>
-              Подтвердите пароль
+            <Input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Повторите пароль" required className="h-12 text-[15px] rounded-xl bg-white border input-focus" />
-            </label>
-            <Input
-              type="password"
-              value={confirm}
-              onChange={(e) => setConfirm(e.target.value)}
-              placeholder="Повторите пароль"
-              required
-              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
-            />
           </div>
 
           {error && (
-            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up">
-              <span>⚠</span>
+              <span>⚠️</span><span>{error}</span>
-              <span>{error}</span>
             </div>
           )}
 
           <Button
-            type="submit"
+            type="submit" disabled={loading}
-            disabled={loading}
+            className="w-full h-12 rounded-xl text-[15px] font-semibold active:scale-[0.98] transition-all"
-            className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
+            style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
           >
             {loading ? (
               <span className="flex items-center gap-2">
@@ -111,21 +74,15 @@ export default function RegisterPage() {
         </form>
 
         <div className="relative my-8">
-          <div className="absolute inset-0 flex items-center">
+          <div className="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
-            <div className="w-full border-t border-[var(--border)]"></div>
-          </div>
           <div className="relative flex justify-center">
-            <span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
+            <span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
-              или
-            </span>
           </div>
         </div>
 
-        <p className="text-center text-[14px] text-[var(--foreground-secondary)]">
+        <p className="text-center text-[14px] text-[var(--fg-secondary)]">
           Уже есть аккаунт?{' '}
-          <Link to="/login" className="link-blue">
+          <Link to="/login" className="link-accent">Войти</Link>
-            Войти
-          </Link>
         </p>
       </div>
     </div>

client/src/pages/UploadPage.tsx

@@ -19,18 +19,13 @@ export default function UploadPage() {
 
   const onDrop = useCallback((accepted: File[]) => {
     const f = accepted[0];
-    if (f) {
+    if (f) { setFile(f); if (preview) URL.revokeObjectURL(preview); setPreview(URL.createObjectURL(f)); }
-      setFile(f);
-      if (preview) URL.revokeObjectURL(preview);
-      setPreview(URL.createObjectURL(f));
-    }
   }, [preview]);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] },
-    maxFiles: 1,
+    maxFiles: 1, maxSize: 10 * 1024 * 1024,
-    maxSize: 10 * 1024 * 1024,
   });
 
   const handleUpload = async () => {
@@ -38,129 +33,77 @@ export default function UploadPage() {
     const fd = new FormData();
     fd.append('image', file);
     fd.append('caption', caption);
-
     try {
       const result = await uploadMutation.mutateAsync(fd);
       if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
       toast('+10 баллов 🎉');
       navigate(`/cat/${result.cat.id}`);
-    } catch {
+    } catch { toast('Ошибка загрузки', 'error'); }
-      toast('Ошибка загрузки', 'error');
-    }
   };
 
-  const clearFile = () => {
+  const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); };
-    setFile(null);
-    if (preview) URL.revokeObjectURL(preview);
-    setPreview(null);
-  };
 
   return (
     <div className="mx-auto max-w-[580px] px-4 py-6">
-      <button
+      <button onClick={() => navigate(-1)}
-        onClick={() => navigate(-1)}
+        className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group">
-        className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
-      >
         <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
         Назад
       </button>
 
-      <h1 className="text-[22px] font-bold mb-6">Новая публикация</h1>
+      <h1 className="text-[22px] font-bold mb-6 gradient-text">Новая публикация</h1>
 
       {!preview ? (
-        <div
+        <div {...getRootProps()}
-          {...getRootProps()}
           className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all ${
-            isDragActive
+            isDragActive ? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]' : 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--fg-tertiary)]'
-              ? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]'
+          }`}>
-              : 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--foreground-tertiary)]'
-          }`}
-        >
           <input {...getInputProps()} />
           <div className="mb-5 flex justify-center">
             <div className="h-16 w-16 rounded-full bg-[var(--secondary)] flex items-center justify-center">
-              {isDragActive ? (
+              {isDragActive ? <Image className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.5} /> : <Upload className="h-7 w-7 text-[var(--fg-secondary)]" strokeWidth={1.5} />}
-                <Image className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.5} />
-              ) : (
-                <Upload className="h-7 w-7 text-[var(--foreground-secondary)]" strokeWidth={1.5} />
-              )}
             </div>
           </div>
-          <p className="text-[16px] font-semibold mb-1">
+          <p className="text-[16px] font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p>
-            {isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
+          <p className="text-[14px] text-[var(--fg-secondary)] mb-6">или нажмите, чтобы выбрать</p>
-          </p>
+          <Button variant="outline" size="sm" className="rounded-full text-[13px] px-6">Выбрать файл</Button>
-          <p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
+          <p className="mt-5 text-[12px] text-[var(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p>
-            или нажмите, чтобы выбрать
-          </p>
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-full text-[13px] px-6"
-          >
-            Выбрать файл
-          </Button>
-          <p className="mt-5 text-[12px] text-[var(--foreground-tertiary)]">
-            JPG, PNG, GIF, WebP · до 10 МБ
-          </p>
         </div>
       ) : (
         <div className="space-y-5 animate-fade-in-up">
-          {/* Preview */}
           <div className="relative bg-[var(--secondary)] rounded-2xl overflow-hidden shadow-sm">
-            <img
+            <img src={preview!} alt="Preview" className="max-h-[420px] w-full object-contain" />
-              src={preview!}
+            <button onClick={clearFile}
-              alt="Preview"
+              className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all backdrop-blur-sm">
-              className="max-h-[420px] w-full object-contain"
-            />
-            <button
-              onClick={clearFile}
-              className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all backdrop-blur-sm"
-            >
               <X className="h-4 w-4" strokeWidth={2} />
             </button>
           </div>
 
-          {/* Caption input */}
           <div className="flex items-start gap-3">
-            <Avatar className="h-9 w-9 shrink-0">
+            <Avatar className="h-9 w-9 shrink-0 ring-1 ring-[var(--border)]">
-              <AvatarFallback className="text-xs avatar-initials">
+              <AvatarFallback className="text-xs avatar-initials">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback>
-                {user?.username?.charAt(0).toUpperCase() || '?'}
-              </AvatarFallback>
             </Avatar>
             <div className="flex-1">
               <p className="text-[14px] font-semibold mb-1.5">{user?.username}</p>
-              <textarea
+              <textarea placeholder="Напишите подпись к фото..." value={caption} onChange={(e) => setCaption(e.target.value)}
-                placeholder="Напишите подпись к фото..."
+                maxLength={200} rows={3}
-                value={caption}
+                className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.4]" />
-                onChange={(e) => setCaption(e.target.value)}
-                maxLength={200}
-                rows={3}
-                className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--foreground-tertiary)] leading-[1.4]"
-              />
               <div className="flex items-center justify-between mt-1">
-                <span className="text-[11px] text-[var(--foreground-tertiary)]">
+                <span className="text-[11px] text-[var(--fg-tertiary)]">{caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}</span>
-                  {caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}
+                <span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{caption.length}/200</span>
-                </span>
-                <span className="text-[11px] text-[var(--foreground-tertiary)] tabular-nums">
-                  {caption.length}/200
-                </span>
               </div>
             </div>
           </div>
 
-          {/* Submit */}
+          <div className="flex items-center justify-between pt-3 border-t">
-          <div className="flex items-center justify-between pt-2 border-t border-[var(--border)]">
+            <div className="flex items-center gap-2 text-[13px] text-[var(--fg-secondary)]">
-            <div className="flex items-center gap-2 text-[13px] text-[var(--foreground-secondary)]">
               <span>🏆</span>
               <span className="font-medium">+10 баллов</span>
-              <span className="text-[var(--foreground-tertiary)]">за публикацию</span>
+              <span className="text-[var(--fg-tertiary)]">за публикацию</span>
             </div>
-            <Button
+            <Button onClick={handleUpload} disabled={uploadMutation.isPending}
-              onClick={handleUpload}
+              size="sm" className="rounded-full text-[14px] px-6 h-10 disabled:opacity-60"
-              disabled={uploadMutation.isPending}
+              style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
-              size="sm"
-              className="rounded-full text-[14px] bg-[var(--primary)] hover:bg-[var(--primary-hover)] px-6 h-10 disabled:opacity-60"
-            >
               {uploadMutation.isPending ? (
                 <span className="flex items-center gap-2">
                   <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
@@ -171,9 +114,8 @@ export default function UploadPage() {
           </div>
 
           {uploadMutation.isError && (
-            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up">
-              <span>⚠</span>
+              <span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span>
-              <span>Не удалось загрузить. Попробуйте снова.</span>
             </div>
           )}
         </div>