UI: modern editorial redesign — stone palette, blue-purple gradient, clean typography

client/src/pages/AdminPage.tsx

@@ -8,15 +8,12 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { ArrowLeft, Trash2, Shield, Edit3, Save, X, Search } from 'lucide-react';
 import { useToast } from '@/components/Toast';
 
-type Tab = 'users' | 'cats';
-
 export default function AdminPage() {
   const { user } = useAuth();
   const navigate = useNavigate();
   const { toast } = useToast();
   const qc = useQueryClient();
-  const [tab, setTab] = useState<Tab>('users');
-  const [searchUser, setSearchUser] = useState('');
+  const [tab, setTab] = useState<'users' | 'cats'>('users');
 
   const usersQuery = useQuery({
     queryKey: ['admin', 'users'],
@@ -33,23 +30,23 @@ export default function AdminPage() {
   const deleteUserMut = useMutation({
     mutationFn: (id: number) => adminDeleteUser(id),
     onSuccess: () => { qc.invalidateQueries({ queryKey: ['admin'] }); toast('Пользователь удалён'); },
-    onError: () => toast('Ошибка удаления', 'error'),
+    onError: () => toast('Ошибка', 'error'),
   });
 
   const deleteCatMut = useMutation({
     mutationFn: (id: number) => adminDeleteCat(id),
     onSuccess: () => { qc.invalidateQueries({ queryKey: ['admin'] }); toast('Пост удалён'); },
-    onError: () => toast('Ошибка удаления', 'error'),
+    onError: () => toast('Ошибка', 'error'),
   });
 
   if (!user?.is_admin) {
     return (
       <div className="flex flex-col items-center justify-center py-24">
-        <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]">
-          <Shield className="h-8 w-8 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
+        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]">
+          <Shield className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
         </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>
+        <p className="text-base font-semibold mb-1">Доступ запрещён</p>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">Вернуться в ленту</Button>
       </div>
     );
   }
@@ -57,111 +54,83 @@ export default function AdminPage() {
   const users = usersQuery.data?.users ?? [];
   const cats = catsQuery.data?.cats ?? [];
 
-  const filteredUsers = users.filter((u: any) =>
-    u.username.toLowerCase().includes(searchUser.toLowerCase())
-  );
-
   return (
-    <div className="mx-auto max-w-[700px] px-4 py-6 animate-fade-in-up">
+    <div className="mx-auto max-w-[700px] px-4 py-6 animate-rise">
       <button 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">
-        <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
-        Назад
+        className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
+        <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
       </button>
 
       <div className="flex items-center gap-3 mb-6">
-        <Shield className="h-6 w-6 text-[var(--primary)]" strokeWidth={1.5} />
-        <h1 className="text-[22px] font-bold">Админ-панель</h1>
+        <div className="h-10 w-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
+          <Shield className="h-5 w-5 text-white" strokeWidth={1.5} />
+        </div>
+        <h1 className="text-xl font-bold">Админ-панель</h1>
       </div>
 
-      {/* Tabs */}
-      <div className="flex gap-1 mb-5">
-        <button onClick={() => setTab('users')}
-          className={`px-4 py-2 rounded-lg text-[14px] font-medium transition-all ${tab === 'users' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'}`}>
-          Пользователи ({users.length})
-        </button>
-        <button onClick={() => setTab('cats')}
-          className={`px-4 py-2 rounded-lg text-[14px] font-medium transition-all ${tab === 'cats' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'}`}>
-          Посты ({cats.length})
-        </button>
+      <div className="flex gap-2 mb-5">
+        <TabBtn active={tab === 'users'} onClick={() => setTab('users')}>Пользователи ({users.length})</TabBtn>
+        <TabBtn active={tab === 'cats'} onClick={() => setTab('cats')}>Посты ({cats.length})</TabBtn>
       </div>
 
       {tab === 'users' && (
-        <>
-          <div className="relative mb-4">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
-            <input value={searchUser} onChange={e => setSearchUser(e.target.value)}
-              placeholder="Поиск пользователя..."
-              className="w-full h-10 pl-9 pr-4 text-[14px] rounded-xl bg-white border input-focus" />
-          </div>
-
-          <div className="card divide-y">
-            <div className="px-4 py-2.5 text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-widest">
-              <span>Пользователи</span>
-            </div>
-            {filteredUsers.length === 0 && (
-              <div className="px-4 py-8 text-center text-[14px] text-[var(--fg-tertiary)]">Нет пользователей</div>
-            )}
-            {filteredUsers.map((u: any) => (
-              <UserRow key={u.id} u={u} onDelete={() => deleteUserMut.mutate(u.id)} qc={qc} />
-            ))}
-          </div>
-        </>
+        <div className="card border divide-y">
+          <div className="px-4 py-2.5 text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Пользователи</div>
+          {users.length === 0 && <div className="px-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет пользователей</div>}
+          {users.map((u: any) => <UserRow key={u.id} u={u} onDelete={() => deleteUserMut.mutate(u.id)} qc={qc} />)}
+        </div>
       )}
 
       {tab === 'cats' && (
-        <div className="card divide-y">
-          <div className="px-4 py-2.5 text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-widest">
-            <span>Все посты</span>
-          </div>
-          {cats.length === 0 && (
-            <div className="px-4 py-8 text-center text-[14px] text-[var(--fg-tertiary)]">Нет постов</div>
-          )}
-          {cats.map((c: any) => (
-            <CatRow key={c.id} c={c} onDelete={() => deleteCatMut.mutate(c.id)} qc={qc} />
-          ))}
+        <div className="card border divide-y">
+          <div className="px-4 py-2.5 text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Все посты</div>
+          {cats.length === 0 && <div className="px-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет постов</div>}
+          {cats.map((c: any) => <CatRow key={c.id} c={c} onDelete={() => deleteCatMut.mutate(c.id)} qc={qc} />)}
         </div>
       )}
     </div>
   );
 }
 
+function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button onClick={onClick}
+      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${active ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'}`}>
+      {children}
+    </button>
+  );
+}
+
 function UserRow({ u, onDelete, qc }: { u: any; onDelete: () => void; qc: any }) {
   const [editing, setEditing] = useState(false);
   const [points, setPoints] = useState(u.points);
   const { toast } = useToast();
 
   const savePoints = async () => {
-    try {
-      await adminSetPoints(u.id, points);
-      qc.invalidateQueries({ queryKey: ['admin'] });
-      setEditing(false);
-      toast('Баллы обновлены');
-    } catch { toast('Ошибка', 'error'); }
+    try { await adminSetPoints(u.id, points); qc.invalidateQueries({ queryKey: ['admin'] }); setEditing(false); toast('Готово'); }
+    catch { toast('Ошибка', 'error'); }
   };
 
   return (
     <div className="flex items-center gap-3 px-4 py-3">
-      <Avatar className="h-10 w-10 ring-1 ring-[var(--border)]">
-        <AvatarFallback className="text-sm avatar-initials">{u.username.charAt(0).toUpperCase()}</AvatarFallback>
+      <Avatar className="h-10 w-10 border">
+        <AvatarFallback className="text-xs avatar">{u.username.charAt(0).toUpperCase()}</AvatarFallback>
       </Avatar>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="text-[15px] font-semibold truncate">@{u.username}</span>
-          {u.is_admin && <span className="text-[10px] px-2 py-0.5 rounded-full bg-[var(--primary-light)] text-[var(--primary)] font-semibold">Админ</span>}
-        </div>
-        <div className="flex items-center gap-2 text-[12px] text-[var(--fg-secondary)]">
-          {editing ? (
-            <div className="flex items-center gap-1.5">
-              <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-[13px] rounded-lg border input-focus" autoFocus />
-              <button onClick={savePoints} className="btn-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
-              <button onClick={() => { setEditing(false); setPoints(u.points); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button>
-            </div>
-          ) : (
-            <span>🏆 {u.points} баллов</span>
-          )}
+          <span className="text-sm font-semibold truncate">@{u.username}</span>
+          {u.is_admin && <span className="tag bg-[var(--primary-light)] text-[var(--primary)]">Админ</span>}
         </div>
+        {editing ? (
+          <div className="flex items-center gap-1.5 mt-0.5">
+            <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-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
+            <button onClick={() => { setEditing(false); setPoints(u.points); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button>
+          </div>
+        ) : (
+          <span className="text-xs text-[var(--fg-secondary)]">🏆 {u.points} баллов</span>
+        )}
       </div>
       {!u.is_admin && (
         <div className="flex items-center gap-1">
@@ -185,12 +154,8 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
   const { toast } = useToast();
 
   const saveCaption = async () => {
-    try {
-      await adminUpdateCaption(c.id, caption);
-      qc.invalidateQueries({ queryKey: ['admin'] });
-      setEditing(false);
-      toast('Описание обновлено');
-    } catch { toast('Ошибка', 'error'); }
+    try { await adminUpdateCaption(c.id, caption); qc.invalidateQueries({ queryKey: ['admin'] }); setEditing(false); toast('Готово'); }
+    catch { toast('Ошибка', 'error'); }
   };
 
   return (
@@ -199,17 +164,17 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
         <img src={c.image_url} alt="" className="h-full w-full object-cover" />
       </div>
       <div className="flex-1 min-w-0">
-        <span className="text-[14px] font-semibold">@{c.username}</span>
+        <span className="text-sm font-semibold">@{c.username}</span>
         {editing ? (
           <div className="flex items-center gap-1.5 mt-0.5">
             <input type="text" value={caption} onChange={e => setCaption(e.target.value)}
-              className="flex-1 h-7 px-2 text-[13px] rounded-lg border input-focus" autoFocus
+              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-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
             <button onClick={() => { setEditing(false); setCaption(c.caption || ''); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button>
           </div>
         ) : (
-          <p className="text-[12px] text-[var(--fg-secondary)] truncate">{c.caption || 'Без подписи'}</p>
+          <p className="text-xs text-[var(--fg-secondary)] truncate">{c.caption || 'Без подписи'}</p>
         )}
       </div>
       <div className="flex items-center gap-1">

client/src/pages/CatPage.tsx

@@ -38,7 +38,7 @@ export default function CatPage() {
       catch { setLiked(true); }
     } else {
       setLiked(true);
-      toast('Нравится ❤️');
+      toast('❤️');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); }
     }
@@ -46,22 +46,19 @@ export default function CatPage() {
 
   const handleDelete = async () => {
     if (!isOwner || !cat) return;
-    try {
-      await deleteMutation.mutateAsync(cat.id);
-      toast('Удалено');
-      navigate('/feed');
-    } catch { toast('Ошибка удаления', 'error'); }
+    try { await deleteMutation.mutateAsync(cat.id); toast('Удалено'); navigate('/feed'); }
+    catch { toast('Ошибка удаления', 'error'); }
   };
 
   if (isLoading) {
     return (
       <div className="mx-auto max-w-[580px] px-4 py-8">
-        <Skeleton className="mb-4 h-5 w-20 rounded-full" />
-        <Skeleton className="aspect-[4/3] w-full rounded-2xl" />
+        <Skeleton className="mb-4 h-4 w-20 rounded-lg" />
+        <Skeleton className="aspect-[4/3] w-full rounded-xl" />
         <div className="mt-5 space-y-3">
-          <Skeleton className="h-5 w-32 rounded-full" />
-          <Skeleton className="h-4 w-48 rounded-full" />
-          <Skeleton className="h-4 w-24 rounded-full" />
+          <Skeleton className="h-4 w-32 rounded-lg" />
+          <Skeleton className="h-3 w-48 rounded-lg" />
+          <Skeleton className="h-3 w-24 rounded-lg" />
         </div>
       </div>
     );
@@ -69,13 +66,12 @@ export default function CatPage() {
 
   if (isError || !cat) {
     return (
-      <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 className="flex flex-col items-center justify-center py-24 animate-rise">
+        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]">
+          <span className="text-xl">🔍</span>
         </div>
-        <p className="text-[17px] font-semibold mb-1.5">Кот не найден</p>
-        <p className="text-[14px] text-[var(--fg-secondary)] mb-6">Возможно, публикация была удалена</p>
-        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
+        <p className="text-base font-semibold mb-1">Кот не найден</p>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">В ленту</Button>
       </div>
     );
   }
@@ -85,15 +81,14 @@ export default function CatPage() {
   });
 
   return (
-    <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in-up">
+    <div className="mx-auto max-w-[580px] px-4 py-6 animate-rise">
       <button 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">
-        <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
-        Назад
+        className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
+        <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
       </button>
 
-      <div className="card overflow-hidden">
-        <div className="bg-[var(--secondary)] relative img-shimmer">
+      <div className="card border overflow-hidden">
+        <div className="bg-[var(--secondary)] relative">
           {!imageLoaded && (
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
@@ -107,12 +102,12 @@ export default function CatPage() {
         <div className="p-5 space-y-4">
           <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 ring-1 ring-[var(--border)]">
-                <AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
+              <Avatar className="h-10 w-10 border">
+                <AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
               </Avatar>
               <div>
-                <span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span>
-                <p className="text-[12px] text-[var(--fg-tertiary)]">{dateStr}</p>
+                <span className="text-sm font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span>
+                <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
               </div>
             </Link>
             {isOwner && (
@@ -123,7 +118,7 @@ export default function CatPage() {
           </div>
 
           {cat.caption && (
-            <p className="text-[15px] leading-[1.4]">
+            <p className="text-sm leading-[1.45]">
               <span className="font-semibold mr-1.5">@{cat.username}</span>
               {cat.caption}
             </p>
@@ -131,26 +126,23 @@ export default function CatPage() {
 
           <div className="border-t" />
 
-          <div className="flex items-center gap-6">
+          <div className="flex items-center justify-between">
             <button onClick={toggleLike} disabled={isOwner || !user}
-              className={`btn-icon flex items-center gap-2 text-[15px] font-medium ${
+              className={`flex items-center gap-2 text-sm font-medium transition-all ${
                 isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
               }`}>
-              <Heart className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} />
+              <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : '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-xs text-[var(--fg-secondary)]">
               <span>🏆</span>
               <span className="font-semibold">{cat.user_points}</span>
-              <span className="text-[var(--fg-tertiary)]">баллов</span>
             </span>
           </div>
 
-          <div className="pt-1">
-            <Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-full text-[12px] h-8 gap-1">
-              <ArrowLeft className="h-3.5 w-3.5" strokeWidth={1.5} /> В ленту
-            </Button>
-          </div>
+          <Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-lg text-xs h-8">
+            <ArrowLeft className="h-3.5 w-3.5 mr-1" strokeWidth={1.5} /> В ленту
+          </Button>
         </div>
       </div>
     </div>

client/src/pages/FeedPage.tsx

@@ -10,18 +10,18 @@ function FeedSkeleton() {
   return (
     <div className="space-y-4">
       {Array.from({ length: 3 }).map((_, i) => (
-        <div key={i} className="card overflow-hidden">
-          <div className="flex items-center gap-3 px-4 py-3">
-            <div className="h-10 w-10 rounded-full bg-[var(--secondary)] animate-skeleton" />
+        <div key={i} className="card border overflow-hidden">
+          <div className="flex items-center gap-3 px-4 pt-4 pb-2">
+            <div className="h-9 w-9 rounded-full bg-[var(--secondary)] animate-skeleton" />
             <div className="space-y-2">
-              <div className="h-3.5 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" />
+              <div className="h-3 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" />
               <div className="h-2.5 w-16 rounded-full bg-[var(--secondary)] animate-skeleton" />
             </div>
           </div>
           <div className="aspect-[4/3] w-full bg-[var(--secondary)] animate-skeleton" />
           <div className="p-4 space-y-2">
-            <div className="h-3.5 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" />
-            <div className="h-3.5 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" />
+            <div className="h-3 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" />
+            <div className="h-3 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" />
           </div>
         </div>
       ))}
@@ -40,7 +40,7 @@ export default function FeedPage() {
         <main className="flex-1 min-w-0">
           {data && data.totalPages > 0 && (
             <div className="flex items-center justify-between mb-4">
-              <h2 className="text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-[0.08em]">Лента</h2>
+              <h2 className="text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Лента</h2>
               <span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{data.total} публикаций</span>
             </div>
           )}
@@ -48,28 +48,27 @@ export default function FeedPage() {
           {isLoading && <FeedSkeleton />}
 
           {isError && (
-            <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 className="flex flex-col items-center justify-center py-24 text-center animate-rise">
+              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--danger-light)]">
+                <span className="text-xl">😿</span>
               </div>
-              <p className="text-[17px] font-semibold mb-1.5">Не удалось загрузить</p>
-              <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">
-                <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} />
-                Попробовать снова
+              <p className="text-base font-semibold mb-1">Не удалось загрузить</p>
+              <p className="text-sm text-[var(--fg-secondary)] mb-5">Попробуйте снова</p>
+              <Button variant="outline" onClick={() => refetch()} className="rounded-lg text-xs gap-1.5">
+                <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать снова
               </Button>
             </div>
           )}
 
           {data && data.cats.length === 0 && (
-            <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 className="flex flex-col items-center justify-center py-24 text-center animate-rise">
+              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--primary-light)]">
+                <span className="text-xl">🐱</span>
               </div>
-              <p className="text-[17px] font-semibold mb-1.5">Пока нет котов</p>
-              <p className="text-[14px] text-[var(--fg-secondary)] mb-6">Будьте первым, кто загрузит фото кота</p>
-              <Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px]"
-                style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
+              <p className="text-base font-semibold mb-1">Пока нет котов</p>
+              <p className="text-sm text-[var(--fg-secondary)] mb-5">Будьте первым, кто загрузит фото кота</p>
+              <Button onClick={() => window.location.href = '/upload'} className="rounded-lg text-xs"
+                style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
                 Загрузить кота
               </Button>
             </div>
@@ -84,24 +83,24 @@ export default function FeedPage() {
               {data.totalPages > 1 && (
                 <nav className="flex items-center justify-center gap-3 mt-6 pb-6">
                   <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}
-                    className="rounded-full text-[13px] h-9 px-4 gap-0.5">
+                    className="rounded-lg text-xs h-9 px-4">
                     <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) => (
+                  <div className="flex gap-1">
+                    {Array.from({ length: Math.min(data.totalPages, 7) }, (_, i) => i + 1).map((p) => (
                       <button key={p} onClick={() => setPage(p)}
-                        className={`h-8 w-8 rounded-full text-[13px] font-medium transition-all ${
-                          p === page ? 'text-white shadow-md' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'
+                        className={`h-8 w-8 rounded-lg text-xs font-medium transition-all ${
+                          p === page ? 'text-white shadow-sm' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'
                         }`}
-                        style={p === page ? { background: 'linear-gradient(135deg, #007aff, #5856d6)' } : {}}>
+                        style={p === page ? { background: 'linear-gradient(135deg, #2563eb, #7c3aed)' } : {}}>
                         {p}
                       </button>
                     ))}
                   </div>
 
                   <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages}
-                    className="rounded-full text-[13px] h-9 px-4 gap-0.5">
+                    className="rounded-lg text-xs h-9 px-4">
                     Вперёд <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
                   </Button>
                 </nav>

client/src/pages/LoginPage.tsx

@@ -3,7 +3,6 @@ import { Link, Navigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Cat } from 'lucide-react';
 
 export default function LoginPage() {
   const { user, login } = useAuth();
@@ -18,68 +17,43 @@ export default function LoginPage() {
     e.preventDefault();
     setError('');
     setLoading(true);
-    try {
-      await login(username, password);
-    } catch (err: any) {
-      setError(err.response?.data?.error || 'Ошибка входа');
-    } finally { setLoading(false); }
+    try { await login(username, password); }
+    catch (err: any) { setError(err.response?.data?.error || 'Ошибка входа'); }
+    finally { setLoading(false); }
   };
 
   return (
-    <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="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
+      <div className="w-full max-w-sm animate-rise">
         <div className="text-center mb-10">
-          <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 className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-xl shadow-sm"
+            style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
+            <svg className="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
+              <path d="M12 2C7.58 2 4 5.58 4 10c0 3.78 2.58 7.02 6 8.12V20h4v-1.88c3.42-1.1 6-4.34 6-8.12 0-4.42-3.58-8-8-8z" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
           </div>
-          <h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
-          <p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">
-            Войдите, чтобы смотреть котов
-          </p>
+          <h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
+          <p className="text-sm text-[var(--fg-secondary)] mt-1.5">Войдите, чтобы смотреть котов</p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-1.5">
-            <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"
-              required
-              autoFocus
-              className="h-12 text-[15px] rounded-xl bg-white border input-focus"
-            />
-          </div>
-          <div className="space-y-1.5">
-            <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="••••••••"
-              required
-              className="h-12 text-[15px] rounded-xl bg-white border input-focus"
-            />
-          </div>
+          <Input value={username} onChange={(e) => setUsername(e.target.value)}
+            placeholder="Имя пользователя" required autoFocus
+            className="h-12 text-sm rounded-xl bg-white 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 focus-ring" />
 
           {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-up">
-              <span>⚠️</span>
-              <span>{error}</span>
+            <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-rise">
+              <span>⚠️</span><span>{error}</span>
             </div>
           )}
 
-          <Button
-            type="submit"
-            disabled={loading}
-            className="w-full h-12 rounded-xl text-[15px] font-semibold transition-all active:scale-[0.98]"
-            style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
-          >
+          <Button type="submit" disabled={loading}
+            className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
+            style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
             {loading ? (
               <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" />
@@ -89,16 +63,9 @@ export default function LoginPage() {
           </Button>
         </form>
 
-        <div className="relative my-8">
-          <div className="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
-          <div className="relative flex justify-center">
-            <span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
-          </div>
-        </div>
-
-        <p className="text-center text-[14px] text-[var(--fg-secondary)]">
+        <p className="mt-8 text-center text-sm text-[var(--fg-secondary)]">
           Нет аккаунта?{' '}
-          <Link to="/register" className="link-accent">Зарегистрироваться</Link>
+          <Link to="/register" className="font-semibold text-[var(--primary)] hover:opacity-80 transition-opacity">Зарегистрироваться</Link>
         </p>
       </div>
     </div>

client/src/pages/ProfilePage.tsx

@@ -6,14 +6,13 @@ import CatModal from '@/components/CatModal';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { ArrowLeft, Plus, LogOut, Heart, Shield } from 'lucide-react';
+import { ArrowLeft, Plus, LogOut, Shield } from 'lucide-react';
 
 export default function ProfilePage() {
   const { id: paramId } = useParams<{ id?: string }>();
   const navigate = useNavigate();
   const { user: me, logout } = useAuth();
   const [modalCatId, setModalCatId] = useState<number | null>(null);
-  const [tab, setTab] = useState<'photos'>('photos');
 
   const profileUserId = paramId ? parseInt(paramId) : me?.id;
   const isMe = !paramId || (me && profileUserId === me.id);
@@ -45,10 +44,10 @@ export default function ProfilePage() {
 
   if (!profileUser && !isMe) {
     return (
-      <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>
-        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">Вернуться в ленту</Button>
+      <div className="flex flex-col items-center justify-center py-24 animate-rise">
+        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"><span className="text-xl">🔍</span></div>
+        <p className="text-base font-semibold mb-1">Пользователь не найден</p>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">Вернуться в ленту</Button>
       </div>
     );
   }
@@ -58,23 +57,22 @@ 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 animate-fade-in-up">
+    <div className="mx-auto max-w-[660px] px-4 py-6 animate-rise">
       {!isMe && (
-        <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">
-          <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
-          Назад
+        <button onClick={() => navigate(-1)} className="mb-4 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
+          <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
         </button>
       )}
 
       <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" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)', color: 'white', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
+        <Avatar className="h-20 w-20 shrink-0">
+          <AvatarFallback className="text-2xl font-bold avatar" style={{ borderRadius: '50%' }}>
             {initials}
           </AvatarFallback>
         </Avatar>
         <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-3 mb-2">
-            <h1 className="text-[20px] font-bold truncate">@{profileUser?.username}</h1>
+          <div className="flex items-center gap-3 mb-3">
+            <h1 className="text-xl font-bold truncate">@{profileUser?.username}</h1>
             <div className="flex items-center gap-1 ml-auto">
               {isMe && me?.is_admin && (
                 <Link to="/admin" className="btn-icon h-8 w-8 text-[var(--primary)] hover:bg-[var(--primary-light)]" title="Админ-панель">
@@ -89,66 +87,44 @@ export default function ProfilePage() {
             </div>
           </div>
 
-          <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-[11px] text-[var(--fg-secondary)]">публикаций</p>
-            </div>
-            <div className="text-center">
-              <p className="font-bold text-[16px]">{totalLikes}</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-[11px] text-[var(--fg-secondary)]">баллов</p>
-            </div>
+          <div className="flex items-center gap-6">
+            <div><span className="font-bold">{cats.length}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">фото</span></div>
+            <div><span className="font-bold">{totalLikes}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">❤️</span></div>
+            <div><span className="font-bold">🏆{profileUser?.points ?? 0}</span></div>
           </div>
 
           {isMe && (
-            <Link to="/upload">
-              <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>
-            </Link>
+            <div className="mt-3">
+              <Link to="/upload">
+                <Button size="sm" className="rounded-lg text-xs h-8 gap-1.5"
+                  style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
+                  <Plus className="h-3.5 w-3.5" strokeWidth={2} /> Новая публикация
+                </Button>
+              </Link>
+            </div>
           )}
         </div>
       </div>
 
-      <div className="flex gap-1 mb-5">
-        <button onClick={() => setTab('photos')}
-          className={`px-5 py-2.5 text-[14px] font-medium rounded-lg transition-all ${
-            tab === 'photos' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
-          }`}>
-          Фото
-        </button>
-      </div>
-
       {cats.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in-up">
-          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--secondary)]"><span className="text-xl">📸</span></div>
-          <p className="text-[15px] font-medium mb-1">Пока нет котов</p>
-          <p className="text-[13px] text-[var(--fg-secondary)] mb-5 max-w-xs">
-            {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
-          </p>
+        <div className="flex flex-col items-center justify-center py-16 text-center animate-rise">
+          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"><span className="text-xl">📸</span></div>
+          <p className="text-sm font-medium mb-1">Пока нет котов</p>
+          <p className="text-xs text-[var(--fg-secondary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p>
           {isMe && (
-            <Link to="/upload"><Button size="sm" className="rounded-full text-[13px]"
-              style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>Загрузить кота</Button></Link>
+            <Link to="/upload"><Button size="sm" className="rounded-lg text-xs"
+              style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>Загрузить кота</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">
+              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 drop-shadow-sm">
-                  <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
-                  <span>{cat.likes_count}</span>
-                </div>
+              <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2.5">
+                <span className="text-white text-xs font-semibold drop-shadow">❤️ {cat.likes_count}</span>
               </div>
             </button>
           ))}

client/src/pages/RegisterPage.tsx

@@ -3,7 +3,6 @@ import { Link, Navigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Cat } from 'lucide-react';
 
 export default function RegisterPage() {
   const { user, register } = useAuth();
@@ -20,50 +19,46 @@ export default function RegisterPage() {
     setError('');
     if (password !== confirm) { setError('Пароли не совпадают'); return; }
     setLoading(true);
-    try {
-      await register(username, password);
-    } catch (err: any) {
-      setError(err.response?.data?.error || 'Ошибка регистрации');
-    } finally { setLoading(false); }
+    try { await register(username, password); }
+    catch (err: any) { setError(err.response?.data?.error || 'Ошибка регистрации'); }
+    finally { setLoading(false); }
   };
 
   return (
-    <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="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
+      <div className="w-full max-w-sm animate-rise">
         <div className="text-center mb-10">
-          <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 className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-xl shadow-sm"
+            style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
+            <svg className="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
+              <path d="M12 2C7.58 2 4 5.58 4 10c0 3.78 2.58 7.02 6 8.12V20h4v-1.88c3.42-1.1 6-4.34 6-8.12 0-4.42-3.58-8-8-8z" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
           </div>
-          <h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
-          <p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
+          <h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
+          <p className="text-sm text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-1.5">
-            <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" />
-          </div>
-          <div className="space-y-1.5">
-            <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" />
-          </div>
-          <div className="space-y-1.5">
-            <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" />
-          </div>
+          <Input value={username} onChange={(e) => setUsername(e.target.value)}
+            placeholder="Имя пользователя" minLength={3} required autoFocus
+            className="h-12 text-sm rounded-xl bg-white 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 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 focus-ring" />
 
           {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-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-rise">
               <span>⚠️</span><span>{error}</span>
             </div>
           )}
 
-          <Button
-            type="submit" disabled={loading}
-            className="w-full h-12 rounded-xl text-[15px] font-semibold active:scale-[0.98] transition-all"
-            style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
-          >
+          <Button type="submit" disabled={loading}
+            className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
+            style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
             {loading ? (
               <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" />
@@ -73,16 +68,9 @@ export default function RegisterPage() {
           </Button>
         </form>
 
-        <div className="relative my-8">
-          <div className="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
-          <div className="relative flex justify-center">
-            <span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
-          </div>
-        </div>
-
-        <p className="text-center text-[14px] text-[var(--fg-secondary)]">
+        <p className="mt-8 text-center text-sm text-[var(--fg-secondary)]">
           Уже есть аккаунт?{' '}
-          <Link to="/login" className="link-accent">Войти</Link>
+          <Link to="/login" className="font-semibold text-[var(--primary)] hover:opacity-80 transition-opacity">Войти</Link>
         </p>
       </div>
     </div>

client/src/pages/UploadPage.tsx

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