Merge pull request 'claude/sleepy-shirley-adfe57' (#2 ) from claude/sleepy-shirley-adfe57 into main

Reviewed-on: #2
fix: remove duplicate size prop on Button in ProfilePage
2026-06-26 00:57:45 +03:00 · 2026-06-26 00:55:58 +03:00 · 2026-06-26 00:55:02 +03:00 · 2026-06-26 00:51:42 +03:00 · 2026-06-26 00:47:44 +03:00 · 2026-06-26 00:30:41 +03:00
15 changed files with 1529 additions and 522 deletions
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -5,6 +5,7 @@ import { ThemeProvider } from '@/hooks/useTheme';
 import { ToastProvider } from '@/components/Toast';
 import ProtectedRoute from '@/components/ProtectedRoute';
 import Navbar from '@/components/Navbar';
+import ThemeBubble from '@/components/ThemeBubble';
 import LoginPage from '@/pages/LoginPage';
 import RegisterPage from '@/pages/RegisterPage';
 import FeedPage from '@/pages/FeedPage';
@@ -107,6 +108,7 @@ export default function App() {
        <AuthProvider>
          <ToastProvider>
            <Navbar />
+            <ThemeBubble />
            <main>
              <AnimatedRoutes />
            </main>
--- a/client/src/components/CatCard.tsx
+++ b/client/src/components/CatCard.tsx
@@ -17,15 +17,15 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
  const { user } = useAuth();
  const [liked, setLiked] = useState(() => likedIds?.has(cat.id) ?? false);
  const [likeCount, setLikeCount] = useState(cat.likes_count);
-
-  useEffect(() => {
-    if (likedIds !== undefined) setLiked(likedIds.has(cat.id));
-  }, [likedIds, cat.id]);
  const { toast } = useToast();
  const likeMutation = useLikeCat(cat.id);
  const unlikeMutation = useUnlikeCat(cat.id);
  const isOwner = user && cat.user_id === user.id;

+  useEffect(() => {
+    if (likedIds !== undefined) setLiked(likedIds.has(cat.id));
+  }, [likedIds, cat.id]);
+
  const toggleLike = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (isOwner || !user) return;
@@ -48,62 +48,85 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
  return (
    <article className="animate-fade-up">
      <div className="cat-card" onClick={() => onOpen(cat.id)}>
-        <div className="flex items-center gap-3 px-5 pt-5 pb-3">
+        {/* Шапка */}
+        <div className="flex items-center gap-3 px-4 pt-4 pb-3">
          <Link to={`/profile/${cat.user_id}`} onClick={e => e.stopPropagation()}>
-            <UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-9 w-9" fallbackClassName="text-xs avatar-colored bg-[var(--accent)]" />
+            <UserAvatar
+              avatarUrl={cat.user_avatar_url}
+              username={cat.username}
+              className="h-9 w-9 ring-1 ring-[var(--border-light)]"
+              fallbackClassName="text-xs avatar-colored bg-[var(--accent)]"
+            />
          </Link>
          <div className="flex-1 min-w-0">
-            <Link to={`/profile/${cat.user_id}`} onClick={e => e.stopPropagation()} className="hover:text-[var(--accent)] transition-colors">
-              <h3 className="text-sm font-semibold truncate">@{cat.username}</h3>
+            <Link
+              to={`/profile/${cat.user_id}`}
+              onClick={e => e.stopPropagation()}
+              className="hover:text-[var(--accent)] transition-colors"
+            >
+              <h3 className="text-sm font-bold truncate leading-tight">@{cat.username}</h3>
            </Link>
            <time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time>
          </div>
+          <span className="flex items-center gap-1 text-[11px] text-[var(--fg-tertiary)] bg-[var(--border-light)] px-2.5 py-1 rounded-full">
+            <Trophy className="h-3 w-3 text-amber-500" strokeWidth={1.5} />
+            <span className="font-bold">{cat.user_points}</span>
+          </span>
        </div>

+        {/* Изображение */}
        <figure className="cat-card-image">
          <img
            src={cat.image_url}
            alt={cat.caption || 'Фото кота'}
-            className="w-full max-h-[520px] object-contain select-none mx-auto cat-card-img"
+            className="w-full max-h-[540px] object-contain select-none mx-auto cat-card-img"
            draggable={false}
            loading="lazy"
          />
        </figure>

-        <div className="px-5 pb-4 pt-3">
+        {/* Подпись и действия */}
+        <div className="px-4 pt-3 pb-4">
          {cat.caption && (
-            <p className="text-sm leading-[1.5] mb-3">
-              <span className="font-semibold mr-1">@{cat.username}</span>
-              {cat.caption}
+            <p className="text-sm leading-relaxed mb-3">
+              <span className="font-bold mr-1.5">@{cat.username}</span>
+              <span className="text-[var(--fg-secondary)]">{cat.caption}</span>
            </p>
          )}

-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <button
-                onClick={toggleLike}
-                disabled={isOwner || !user}
-                className={`action-btn flex items-center gap-1.5 text-sm font-medium ${
-                  isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed opacity-40' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)]'
+          <div className="flex items-center gap-2">
+            {/* Лайк */}
+            <button
+              onClick={toggleLike}
+              disabled={!!isOwner || !user}
+              className={`action-btn flex items-center gap-1.5 text-sm font-semibold ${
+                isOwner
+                  ? 'text-[var(--fg-tertiary)] cursor-not-allowed opacity-40'
+                  : liked
+                  ? 'text-red-500'
+                  : 'text-[var(--fg-secondary)]'
+              }`}
+            >
+              <Heart
+                className={`h-[18px] w-[18px] transition-all duration-200 ${
+                  liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'
                }`}
-              >
-                <Heart className={`h-[18px] w-[18px] transition-all duration-200 ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'} ${!isOwner && !liked ? 'group-hover:stroke-red-400' : ''}`} />
-                {likeCount > 0 && <span className="stat-value text-xs tabular-nums">{likeCount}</span>}
-              </button>
+              />
+              {likeCount > 0 && (
+                <span className="stat-value text-xs tabular-nums">{likeCount}</span>
+              )}
+            </button>

-              <button
-                onClick={e => { e.stopPropagation(); onOpen(cat.id); }}
-                className="action-btn flex items-center gap-1 text-sm text-[var(--fg-tertiary)]"
-              >
-                <MessageCircle className="h-[18px] w-[18px]" strokeWidth={1.5} />
-                {(cat.comments_count ?? 0) > 0 && <span className="stat-value text-xs tabular-nums">{cat.comments_count}</span>}
-              </button>
-            </div>
-
-            <span className="flex items-center gap-1 text-xs text-[var(--fg-tertiary)]">
-              <Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
-              <span className="font-semibold">{cat.user_points}</span>
-            </span>
+            {/* Комментарии */}
+            <button
+              onClick={e => { e.stopPropagation(); onOpen(cat.id); }}
+              className="action-btn flex items-center gap-1.5 text-sm text-[var(--fg-tertiary)]"
+            >
+              <MessageCircle className="h-[18px] w-[18px]" strokeWidth={1.5} />
+              {(cat.comments_count ?? 0) > 0 && (
+                <span className="stat-value text-xs tabular-nums">{cat.comments_count}</span>
+              )}
+            </button>
          </div>
        </div>
      </div>
--- a/client/src/components/CatModal.tsx
+++ b/client/src/components/CatModal.tsx
@@ -85,8 +85,8 @@ export default function CatModal({ catId, onClose }: CatModalProps) {

  if (isLoading || !cat) {
    return createPortal(
-      <div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center animate-fade-in" onClick={onClose}>
-        <div className="flex items-center gap-3 px-5 py-3 bg-[var(--surface)] rounded-2xl shadow-lg">
+      <div className="fixed inset-0 z-[60] modal-backdrop flex items-center justify-center animate-fade-in" onClick={onClose}>
+        <div className="flex items-center gap-3 px-6 py-4 bg-[var(--surface)] rounded-2xl shadow-xl">
          <div className="h-4 w-4 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
          <span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span>
        </div>
@@ -100,130 +100,199 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
  });

  return createPortal(
-    <div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center p-4 animate-fade-in" onClick={onClose}>
+    <div
+      className="fixed inset-0 z-[60] modal-backdrop flex items-center justify-center p-4 animate-fade-in"
+      onClick={onClose}
+    >
+      {/* Двухколоночный макет на десктопе, вертикальный на мобильном */}
      <div
-        className="w-full max-w-lg bg-[var(--surface)] rounded-2xl max-h-[85vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
+        className="w-full max-w-[860px] bg-[var(--surface)] rounded-2xl max-h-[90vh] flex flex-col md:flex-row overflow-hidden shadow-xl animate-scale-in"
        onClick={e => e.stopPropagation()}
      >
-        <div className="flex items-center justify-between px-5 py-4 shrink-0">
-          <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group" onClick={onClose}>
-            <UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-9 w-9" fallbackClassName="text-xs avatar-colored bg-[var(--accent)]" />
-            <div>
-              <span className="text-sm font-semibold group-hover:text-[var(--accent)] transition-colors">@{cat.username}</span>
-              <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
-            </div>
-          </Link>
-          <div className="flex items-center gap-1">
-            {isOwner && (
-              <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
-                <Trash2 className="h-4 w-4" strokeWidth={1.5} />
-              </button>
-            )}
-            <button onClick={onClose} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--fg)]">
-              <X className="h-5 w-5" strokeWidth={1.5} />
-            </button>
-          </div>
-        </div>
-
-        <div className="bg-[var(--bg)] flex items-center justify-center shrink-0 relative">
+        {/* Левая колонка — фото */}
+        <div className="md:w-[52%] md:max-h-[90vh] bg-[var(--bg)] flex items-center justify-center relative shrink-0">
          {!imageLoaded && (
            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="h-6 w-6 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
+              <div className="h-7 w-7 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
            </div>
          )}
          <img
            src={cat.image_url}
            alt={cat.caption || 'Фото кота'}
-            className={`w-full max-h-[45vh] object-contain transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+            className={`w-full h-full object-contain md:max-h-[90vh] max-h-[45vh] transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
            onLoad={() => setImageLoaded(true)}
          />
        </div>

-        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3 min-h-0">
-          {cat.caption && (
-            <div className="flex items-start gap-3">
-              <UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-7 w-7" fallbackClassName="text-[9px] avatar-colored bg-[var(--accent)]" />
-              <p className="text-sm leading-[1.5]">
-                <Link to={`/profile/${cat.user_id}`} onClick={onClose} className="font-semibold mr-1 hover:text-[var(--accent)] transition-colors">@{cat.username}</Link>
-                {cat.caption}
-              </p>
+        {/* Правая колонка — мета + комментарии */}
+        <div className="md:w-[48%] flex flex-col min-h-0 md:max-h-[90vh]">
+          {/* Шапка */}
+          <div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--border-light)] shrink-0">
+            <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-2.5 group" onClick={onClose}>
+              <UserAvatar
+                avatarUrl={cat.user_avatar_url}
+                username={cat.username}
+                className="h-9 w-9"
+                fallbackClassName="text-xs avatar-colored bg-[var(--accent)]"
+              />
+              <div>
+                <span className="text-sm font-semibold group-hover:text-[var(--accent)] transition-colors">
+                  @{cat.username}
+                </span>
+                <p className="text-[10px] text-[var(--fg-tertiary)]">{dateStr}</p>
+              </div>
+            </Link>
+            <div className="flex items-center gap-0.5">
+              {isOwner && (
+                <button
+                  onClick={handleDelete}
+                  className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
+                >
+                  <Trash2 className="h-4 w-4" strokeWidth={1.5} />
+                </button>
+              )}
+              <button onClick={onClose} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--fg)]">
+                <X className="h-5 w-5" strokeWidth={1.5} />
+              </button>
            </div>
-          )}
-
-          {comments.length > 0 && (
-            <div className="space-y-3 pt-1">
-              {comments.map(c => (
-                <div key={c.id} className="flex items-start gap-2.5 group">
-                  <Link to={`/profile/${c.user_id}`} onClick={onClose}>
-                    <UserAvatar avatarUrl={undefined} username={c.username} className="h-7 w-7" fallbackClassName="text-[9px] avatar-colored bg-[var(--fg-tertiary)]" />
-                  </Link>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm leading-[1.5]">
-                      <Link to={`/profile/${c.user_id}`} onClick={onClose} className="font-semibold mr-1 hover:text-[var(--accent)] transition-colors">@{c.username}</Link>
-                      {c.text}
-                    </p>
-                    <p className="text-[10px] text-[var(--fg-tertiary)] mt-0.5">
-                      {new Date(c.created_at).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}
-                    </p>
-                  </div>
-                  {(user && (c.user_id === user.id || user.is_admin)) && (
-                    <button
-                      onClick={() => handleDeleteComment(c.id)}
-                      className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-                    >
-                      <X className="h-3 w-3" strokeWidth={2} />
-                    </button>
-                  )}
-                </div>
-              ))}
-              <div ref={commentsEndRef} />
-            </div>
-          )}
-        </div>
-
-        <div className="border-t px-5 py-3 shrink-0 space-y-3">
-          <div className="flex items-center justify-between">
-            <button
-              onClick={toggleLike}
-              disabled={isOwner || !user}
-              className={`flex items-center gap-1.5 text-sm font-medium transition-all ${
-                isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)] hover:text-red-400'
-              }`}
-            >
-              <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'}`} />
-              {likeCount > 0 && <span className="stat-value">{likeCount}</span>}
-            </button>
-            <span className="flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)]">
-              <Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
-              <span className="font-semibold text-[var(--fg-secondary)]">{cat.user_points}</span>
-            </span>
          </div>

-          {user && (
-            <form
-              onSubmit={e => { e.preventDefault(); handleComment(); }}
-              className="flex items-center gap-2"
-            >
-              <input
-                type="text"
-                value={commentText}
-                onChange={e => setCommentText(e.target.value)}
-                placeholder="Комментарий..."
-                maxLength={500}
-                className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-[var(--surface)] placeholder:text-[var(--fg-tertiary)] focus-ring"
-              />
+          {/* Комментарии и подпись */}
+          <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3.5 min-h-0">
+            {cat.caption && (
+              <div className="flex items-start gap-2.5">
+                <UserAvatar
+                  avatarUrl={cat.user_avatar_url}
+                  username={cat.username}
+                  className="h-7 w-7 shrink-0 mt-0.5"
+                  fallbackClassName="text-[9px] avatar-colored bg-[var(--accent)]"
+                />
+                <p className="text-sm leading-relaxed">
+                  <Link
+                    to={`/profile/${cat.user_id}`}
+                    onClick={onClose}
+                    className="font-semibold mr-1.5 hover:text-[var(--accent)] transition-colors"
+                  >
+                    @{cat.username}
+                  </Link>
+                  {cat.caption}
+                </p>
+              </div>
+            )}
+
+            {comments.length > 0 && (
+              <div className="space-y-3.5">
+                {comments.map(c => (
+                  <div key={c.id} className="flex items-start gap-2.5 group">
+                    <Link to={`/profile/${c.user_id}`} onClick={onClose} className="shrink-0 mt-0.5">
+                      <UserAvatar
+                        avatarUrl={undefined}
+                        username={c.username}
+                        className="h-7 w-7"
+                        fallbackClassName="text-[9px] avatar-colored bg-[var(--fg-tertiary)]"
+                      />
+                    </Link>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm leading-relaxed">
+                        <Link
+                          to={`/profile/${c.user_id}`}
+                          onClick={onClose}
+                          className="font-semibold mr-1.5 hover:text-[var(--accent)] transition-colors"
+                        >
+                          @{c.username}
+                        </Link>
+                        {c.text}
+                      </p>
+                      <p className="text-[10px] text-[var(--fg-tertiary)] mt-0.5">
+                        {new Date(c.created_at).toLocaleDateString('ru-RU', {
+                          day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
+                        })}
+                      </p>
+                    </div>
+                    {(user && (c.user_id === user.id || user.is_admin)) && (
+                      <button
+                        onClick={() => handleDeleteComment(c.id)}
+                        className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                      >
+                        <X className="h-3 w-3" strokeWidth={2} />
+                      </button>
+                    )}
+                  </div>
+                ))}
+                <div ref={commentsEndRef} />
+              </div>
+            )}
+
+            {comments.length === 0 && !cat.caption && (
+              <p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Нет комментариев</p>
+            )}
+          </div>
+
+          {/* Нижняя панель */}
+          <div className="border-t border-[var(--border-light)] px-5 py-3.5 shrink-0 space-y-3">
+            {/* Лайк + очки */}
+            <div className="flex items-center justify-between">
              <button
-                type="submit"
-                disabled={!commentText.trim() || addCommentMutation.isPending}
-                className="btn-ghost h-9 w-9 text-[var(--accent)] hover:bg-[var(--accent-light)] disabled:opacity-30 disabled:cursor-not-allowed"
+                onClick={toggleLike}
+                disabled={!!isOwner || !user}
+                className={`flex items-center gap-2 text-sm font-semibold transition-all active:scale-95 ${
+                  isOwner
+                    ? 'text-[var(--fg-tertiary)] cursor-not-allowed'
+                    : liked
+                    ? 'text-red-500'
+                    : 'text-[var(--fg-secondary)] hover:text-red-400'
+                }`}
              >
-                <Send className="h-4 w-4" strokeWidth={1.5} />
+                <Heart
+                  className={`h-[22px] w-[22px] transition-all duration-200 ${
+                    liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'
+                  }`}
+                />
+                {likeCount > 0 && <span className="stat-value">{likeCount}</span>}
+                {!liked && !isOwner && user && (
+                  <span className="text-xs font-normal text-[var(--fg-tertiary)]">Нравится</span>
+                )}
              </button>
-            </form>
-          )}
+
+              <span className="flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] bg-[var(--border-light)] px-3 py-1.5 rounded-full">
+                <Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
+                <span className="font-semibold text-[var(--fg-secondary)]">{cat.user_points}</span>
+              </span>
+            </div>
+
+            {/* Поле комментария */}
+            {user && (
+              <form
+                onSubmit={e => { e.preventDefault(); handleComment(); }}
+                className="flex items-center gap-2"
+              >
+                <UserAvatar
+                  avatarUrl={user.avatar_url}
+                  username={user.username}
+                  className="h-7 w-7 shrink-0"
+                  fallbackClassName="text-[9px] avatar-colored bg-[var(--accent)]"
+                />
+                <input
+                  type="text"
+                  value={commentText}
+                  onChange={e => setCommentText(e.target.value)}
+                  placeholder="Написать комментарий..."
+                  maxLength={500}
+                  className="flex-1 h-9 px-3.5 text-sm rounded-xl border border-[var(--border)] bg-[var(--bg)] placeholder:text-[var(--fg-tertiary)] focus-ring"
+                />
+                <button
+                  type="submit"
+                  disabled={!commentText.trim() || addCommentMutation.isPending}
+                  className="btn-ghost h-9 w-9 text-[var(--accent)] hover:bg-[var(--accent-light)] disabled:opacity-30 disabled:cursor-not-allowed"
+                >
+                  <Send className="h-4 w-4" strokeWidth={1.5} />
+                </button>
+              </form>
+            )}
+          </div>
        </div>
      </div>
    </div>,
    document.body
  );
-}
+}
--- a/client/src/components/FeedSidebar.tsx
+++ b/client/src/components/FeedSidebar.tsx
@@ -2,13 +2,29 @@ import { useAuth } from '@/hooks/useAuth';
 import { useCats } from '@/hooks/useCats';
 import UserAvatar from '@/components/UserAvatar';
 import { Link } from 'react-router-dom';
-import { Trophy, Crown, Medal } from 'lucide-react';
+import { Trophy, Crown, Medal, Star } from 'lucide-react';

 function RankBadge({ rank }: { rank: number }) {
-  if (rank === 0) return <Crown className="h-4 w-4 text-amber-500" strokeWidth={1.5} />;
-  if (rank === 1) return <Medal className="h-4 w-4 text-stone-400" strokeWidth={1.5} />;
-  if (rank === 2) return <Medal className="h-4 w-4 text-amber-700" strokeWidth={1.5} />;
-  return <span className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold text-[var(--fg-tertiary)] bg-[var(--border-light)]">{rank + 1}</span>;
+  if (rank === 0) return (
+    <span className="h-6 w-6 rounded-lg flex items-center justify-center bg-amber-100 text-amber-600">
+      <Crown className="h-3.5 w-3.5" strokeWidth={2} />
+    </span>
+  );
+  if (rank === 1) return (
+    <span className="h-6 w-6 rounded-lg flex items-center justify-center bg-stone-100 text-stone-500">
+      <Medal className="h-3.5 w-3.5" strokeWidth={2} />
+    </span>
+  );
+  if (rank === 2) return (
+    <span className="h-6 w-6 rounded-lg flex items-center justify-center bg-orange-50 text-orange-500">
+      <Medal className="h-3.5 w-3.5" strokeWidth={2} />
+    </span>
+  );
+  return (
+    <span className="h-6 w-6 rounded-lg flex items-center justify-center text-[10px] font-bold text-[var(--fg-tertiary)] bg-[var(--border-light)]">
+      {rank + 1}
+    </span>
+  );
 }

 export default function FeedSidebar() {
@@ -27,41 +43,74 @@ export default function FeedSidebar() {
    .slice(0, 5);

  return (
-    <div className="space-y-4">
+    <div className="space-y-3">
+      {/* Карточка профиля */}
      {user && (
-        <Link to="/profile" className="card p-4 flex items-center gap-3.5 card-interactive group block">
-          <UserAvatar avatarUrl={user.avatar_url} username={user.username} className="h-11 w-11" fallbackClassName="text-sm font-bold avatar-colored bg-[var(--accent)]" />
+        <Link
+          to="/profile"
+          className="card p-4 flex items-center gap-3.5 card-interactive group block transition-all"
+        >
+          <UserAvatar
+            avatarUrl={user.avatar_url}
+            username={user.username}
+            className="h-11 w-11 ring-2 ring-[var(--border-light)]"
+            fallbackClassName="text-sm font-bold avatar-colored bg-[var(--accent)]"
+          />
          <div className="min-w-0 flex-1">
-            <p className="text-sm font-semibold truncate group-hover:text-[var(--accent)] transition-colors">{user.username}</p>
-            <p className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1">
-              <Trophy className="h-3 w-3" strokeWidth={1.5} /> {user.points} баллов
+            <p className="text-sm font-bold truncate group-hover:text-[var(--accent)] transition-colors">
+              @{user.username}
            </p>
+            <p className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1 mt-0.5">
+              <Trophy className="h-3 w-3 text-amber-500" strokeWidth={1.5} />
+              <span className="font-semibold">{user.points}</span>
+              <span>баллов</span>
+            </p>
+          </div>
+          <div className="text-[var(--fg-tertiary)] group-hover:text-[var(--accent)] transition-colors">
+            <Star className="h-4 w-4" strokeWidth={1.5} />
          </div>
        </Link>
      )}

+      {/* Таблица лидеров */}
      <div className="card p-4">
-        <h3 className="text-[11px] font-bold text-[var(--fg-tertiary)] uppercase tracking-widest mb-4 flex items-center gap-1.5">
-          <Trophy className="h-3 w-3" strokeWidth={2} /> Лидеры
+        <h3 className="text-[10px] font-extrabold text-[var(--fg-tertiary)] uppercase tracking-widest mb-4 flex items-center gap-1.5">
+          <Trophy className="h-3 w-3" strokeWidth={2} />
+          Лидеры недели
        </h3>

        {topUsers.length === 0 ? (
          <p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Пока никого нет</p>
        ) : (
-          <div className="space-y-2">
+          <div className="space-y-1.5">
            {topUsers.map(([id, u], i) => (
-              <Link key={id} to={`/profile/${id}`} className="flex items-center gap-2.5 group py-0.5">
+              <Link
+                key={id}
+                to={`/profile/${id}`}
+                className="flex items-center gap-2.5 group p-1.5 -mx-1.5 rounded-xl hover:bg-[var(--border-light)] transition-colors"
+              >
                <RankBadge rank={i} />
-                <UserAvatar avatarUrl={u.avatar_url} username={u.username} className="h-6 w-6" fallbackClassName="text-[8px] font-bold avatar-colored bg-[var(--fg-tertiary)]" />
-                <span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--accent)] transition-colors">{u.username}</span>
-                <span className="stat-value text-xs text-[var(--fg-secondary)]">{u.points}</span>
+                <UserAvatar
+                  avatarUrl={u.avatar_url}
+                  username={u.username}
+                  className="h-7 w-7"
+                  fallbackClassName="text-[8px] font-bold avatar-colored bg-[var(--fg-tertiary)]"
+                />
+                <span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--accent)] transition-colors">
+                  {u.username}
+                </span>
+                <span className="text-xs font-bold text-[var(--fg-tertiary)] tabular-nums">
+                  {u.points}
+                </span>
              </Link>
            ))}
          </div>
        )}
      </div>

-      <p className="px-1 text-[10px] text-[var(--fg-tertiary)] tracking-wide">Котограм · сообщество котоводов</p>
+      <p className="px-1 text-[10px] text-[var(--fg-tertiary)] tracking-wide text-center">
+        🐾 Котограм · сообщество котоводов
+      </p>
    </div>
  );
-}
+}
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -1,47 +1,53 @@
 import { Link, useLocation } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
-import { useTheme } from '@/hooks/useTheme';
 import UserAvatar from '@/components/UserAvatar';
-import { Home, PlusCircle, Shield, Sun, Moon, Monitor } from 'lucide-react';
+import { Home, PlusSquare, Shield } from 'lucide-react';

 export default function Navbar() {
  const { user } = useAuth();
-  const { theme, setTheme } = useTheme();
  const location = useLocation();

-  const cycleTheme = () => {
-    const next: Record<string, 'dark' | 'system' | 'light'> = { light: 'dark', dark: 'system', system: 'light' };
-    setTheme(next[theme]);
-  };
-  const ThemeIcon = theme === 'dark' ? Moon : theme === 'light' ? Sun : Monitor;
-
  if (!user) return null;

+  const isFeed   = location.pathname === '/feed' || location.pathname === '/';
+  const isUpload = location.pathname === '/upload';
+  const isProfile = location.pathname.startsWith('/profile');
+
  return (
-    <nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]" style={{ paddingTop: 3 }}>
-      <div className="nav-editorial-bar" />
-      <div className="mx-auto flex h-14 max-w-[900px] items-center justify-between px-5">
-        <Link to="/feed" className="wordmark flex items-center gap-1">
-          Котограм<span className="wordmark-dot" />
+    <nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]">
+      <div className="nav-accent-bar" />
+      <div className="mx-auto flex h-[58px] max-w-[900px] items-center justify-between px-5">
+
+        {/* Логотип */}
+        <Link to="/feed" className="wordmark flex items-center gap-2 group select-none">
+          <span className="text-xl">🐾</span>
+          <span className="group-hover:text-[var(--accent)] transition-colors duration-200">
+            Котограм<span className="wordmark-dot" />
+          </span>
        </Link>

+        {/* Навигация */}
        <div className="flex items-center gap-1">
-          <NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" />
-          <NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" />
-          <button
-            onClick={cycleTheme}
-            title={`Тема: ${theme}`}
-            className="flex items-center justify-center h-9 w-9 rounded-xl transition-all text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]"
-          >
-            <ThemeIcon className="h-[18px] w-[18px]" strokeWidth={1.5} />
-          </button>
+          <NavIcon to="/feed"   active={isFeed}   icon={Home}      label="Лента" />
+          <NavIcon to="/upload" active={isUpload} icon={PlusSquare} label="Добавить" />

-          <Link to="/profile" className="ml-1.5 relative flex items-center">
-            <div className={`flex items-center justify-center h-8 w-8 rounded-full transition-all ${
-              location.pathname.startsWith('/profile') ? 'ring-2 ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]' : ''
-            }`}>
-              <UserAvatar avatarUrl={user.avatar_url} username={user.username} className="h-8 w-8" fallbackClassName="text-[11px] avatar-colored bg-[var(--accent)]" />
-            </div>
+          {/* Аватар */}
+          <Link
+            to="/profile"
+            title="Профиль"
+            className={[
+              'relative ml-1 flex items-center rounded-full transition-all duration-200',
+              isProfile
+                ? 'ring-[2.5px] ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]'
+                : 'opacity-75 hover:opacity-100',
+            ].join(' ')}
+          >
+            <UserAvatar
+              avatarUrl={user.avatar_url}
+              username={user.username}
+              className="h-8 w-8"
+              fallbackClassName="text-[11px] avatar-colored bg-[var(--accent)]"
+            />
            {user.is_admin && (
              <span className="absolute -top-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-[var(--accent)] flex items-center justify-center ring-2 ring-[var(--bg)]">
                <Shield className="h-2 w-2 text-white" strokeWidth={3} />
@@ -54,18 +60,27 @@ export default function Navbar() {
  );
 }

-function NavIcon({ to, active, icon: Icon, label }: { to: string; active: boolean; icon: any; label: string }) {
+function NavIcon({
+  to, active, icon: Icon, label,
+}: {
+  to: string; active: boolean; icon: React.ComponentType<any>; label: string;
+}) {
  return (
    <Link
      to={to}
      title={label}
-      className={`flex items-center justify-center h-9 w-9 rounded-xl transition-all ${
+      className={[
+        'relative flex items-center justify-center h-9 w-9 rounded-xl',
+        'transition-all duration-200',
        active
-          ? 'bg-[var(--accent-soft)] text-[var(--accent)]'
-          : 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]'
-      }`}
+          ? 'text-[var(--accent)] bg-[var(--accent-soft)]'
+          : 'text-[var(--fg-tertiary)] hover:text-[var(--fg)] hover:bg-[var(--border-light)]',
+      ].join(' ')}
    >
-      <Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2 : 1.5} />
+      <Icon className="h-5 w-5" strokeWidth={active ? 2.2 : 1.7} />
+      {active && (
+        <span className="absolute -bottom-[11px] left-1/2 -translate-x-1/2 h-[2.5px] w-4 rounded-full bg-[var(--accent)]" />
+      )}
    </Link>
  );
-}
+}
--- a/client/src/components/ThemeBubble.tsx
+++ b/client/src/components/ThemeBubble.tsx
@@ -0,0 +1,31 @@
+import { Sun, Moon } from 'lucide-react';
+import { useTheme } from '@/hooks/useTheme';
+
+export default function ThemeBubble() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const isDark = resolvedTheme === 'dark';
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+      title={isDark ? 'Светлая тема' : 'Тёмная тема'}
+      aria-label="Переключить тему"
+      className={[
+        'fixed bottom-5 right-5 z-40',
+        'flex items-center gap-2 h-10 px-3.5 rounded-full',
+        'border border-[var(--border)]',
+        'bg-[var(--surface)] shadow-[0_4px_20px_rgba(0,0,0,0.18)]',
+        'text-[var(--fg-secondary)] text-xs font-semibold',
+        'transition-all duration-200 ease-out',
+        'hover:shadow-[0_6px_24px_rgba(0,0,0,0.25)] hover:-translate-y-0.5',
+        'active:scale-95 active:translate-y-0',
+        'select-none cursor-pointer backdrop-blur-sm',
+      ].join(' ')}
+    >
+      {isDark
+        ? <><Sun className="h-4 w-4 text-amber-400" strokeWidth={1.8} /><span className="hidden sm:inline">Светлая</span></>
+        : <><Moon className="h-4 w-4 text-indigo-400" strokeWidth={1.8} /><span className="hidden sm:inline">Тёмная</span></>
+      }
+    </button>
+  );
+}
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -4,22 +4,60 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  [
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold',
+    'select-none cursor-pointer',
+    'transition-all duration-150 ease-out',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)]',
+    'disabled:pointer-events-none disabled:opacity-40',
+    '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+    'active:scale-[0.96] active:brightness-95',
+  ].join(' '),
  {
    variants: {
      variant: {
-        default: 'bg-[var(--accent)] text-white shadow-sm hover:bg-[var(--accent-hover)]',
-        destructive: 'bg-red-500 text-white shadow-sm hover:bg-red-600',
-        outline: 'border border-[var(--border)] bg-[var(--surface)] shadow-sm hover:bg-[var(--surface-hover)] text-[var(--fg)]',
-        secondary: 'bg-[var(--border-light)] text-[var(--fg)] shadow-sm hover:bg-[var(--border)]',
-        ghost: 'hover:bg-[var(--border-light)] text-[var(--fg-secondary)]',
-        link: 'text-[var(--accent)] underline-offset-4 hover:underline',
+        // Основная — с градиентом и тенью
+        default: [
+          'bg-[var(--accent)] text-white',
+          'shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.15)]',
+          'hover:bg-[var(--accent-hover)] hover:shadow-[0_3px_10px_rgba(201,68,93,0.4)]',
+          'hover:-translate-y-px',
+        ].join(' '),
+
+        // Деструктивная
+        destructive: [
+          'bg-red-500 text-white',
+          'shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.12)]',
+          'hover:bg-red-600 hover:shadow-[0_3px_10px_rgba(239,68,68,0.4)]',
+          'hover:-translate-y-px',
+        ].join(' '),
+
+        // Обводка — хорошо видна и в тёмной теме
+        outline: [
+          'border-2 border-[var(--border)] bg-transparent text-[var(--fg)]',
+          'hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]',
+        ].join(' '),
+
+        // Вторичная — мягкая подложка
+        secondary: [
+          'bg-[var(--border-light)] text-[var(--fg-secondary)]',
+          'hover:bg-[var(--border)] hover:text-[var(--fg)]',
+        ].join(' '),
+
+        // Призрак
+        ghost: [
+          'bg-transparent text-[var(--fg-secondary)]',
+          'hover:bg-[var(--border-light)] hover:text-[var(--fg)]',
+        ].join(' '),
+
+        // Ссылка
+        link: 'bg-transparent text-[var(--accent)] underline-offset-4 hover:underline p-0 h-auto',
      },
      size: {
-        default: 'h-9 rounded-xl px-4 py-2',
-        sm: 'h-8 rounded-lg px-3 text-xs',
-        lg: 'h-10 rounded-xl px-6',
-        icon: 'h-9 w-9 rounded-xl',
+        default: 'h-10 rounded-xl px-5 py-2 text-sm',
+        sm:      'h-8  rounded-lg  px-3.5 text-xs',
+        lg:      'h-12 rounded-xl px-7 text-[15px]',
+        icon:    'h-9  w-9  rounded-xl text-sm',
      },
    },
    defaultVariants: {
@@ -38,9 +76,15 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button';
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
  }
 );
 Button.displayName = 'Button';

-export { Button, buttonVariants };
+export { Button, buttonVariants };
--- a/client/src/hooks/useTheme.tsx
+++ b/client/src/hooks/useTheme.tsx
@@ -1,28 +1,28 @@
 import { createContext, useContext, useEffect, useState, ReactNode } from 'react';

-type Theme = 'light' | 'dark' | 'system';
+type StoredTheme = 'light' | 'dark';

 interface ThemeContextValue {
-  theme: Theme;
  resolvedTheme: 'light' | 'dark';
-  setTheme: (t: Theme) => void;
+  setTheme: (t: StoredTheme) => void;
 }

 const ThemeContext = createContext<ThemeContextValue>({
-  theme: 'system',
-  resolvedTheme: 'light',
+  resolvedTheme: 'dark',
  setTheme: () => {},
 });

 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>(() => {
-    return (localStorage.getItem('theme') as Theme) ?? 'system';
-  });
-
  const [systemDark, setSystemDark] = useState(() =>
    window.matchMedia('(prefers-color-scheme: dark)').matches
  );

+  // null = пользователь ещё не выбирал → автоматически по системе
+  const [explicit, setExplicit] = useState<StoredTheme | null>(() => {
+    const saved = localStorage.getItem('theme');
+    return saved === 'light' || saved === 'dark' ? saved : null;
+  });
+
  useEffect(() => {
    const mq = window.matchMedia('(prefers-color-scheme: dark)');
    const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches);
@@ -30,21 +30,19 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
    return () => mq.removeEventListener('change', handler);
  }, []);

-  const resolvedTheme: 'light' | 'dark' =
-    theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+  const resolvedTheme: 'light' | 'dark' = explicit ?? (systemDark ? 'dark' : 'light');

  useEffect(() => {
-    const root = document.documentElement;
-    root.setAttribute('data-theme', resolvedTheme);
+    document.documentElement.setAttribute('data-theme', resolvedTheme);
  }, [resolvedTheme]);

-  const setTheme = (t: Theme) => {
+  const setTheme = (t: StoredTheme) => {
    localStorage.setItem('theme', t);
-    setThemeState(t);
+    setExplicit(t);
  };

  return (
-    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+    <ThemeContext.Provider value={{ resolvedTheme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,12 +1,12 @@
@import "tailwindcss";
@plugin "tailwindcss-animate";

-/* ── Светлая тема — тёплый пастель à la Instagram ── */
+/* ── Светлая тема ── */
 :root,
 [data-theme="light"] {
-  --bg: #FAFAFA;
+  --bg: #F5F5F5;
  --surface: #FFFFFF;
-  --surface-hover: #F7F7F7;
+  --surface-hover: #F9F9F9;
  --fg: #1A1A1A;
  --fg-secondary: #737373;
  --fg-tertiary: #B0B0B0;
@@ -15,7 +15,7 @@
  --accent-soft: rgba(201, 68, 93, 0.09);
  --accent-light: #FFF0F3;
  --secondary: #FAFAFA;
-  --border: #DBDBDB;
+  --border: #E0E0E0;
  --border-light: #EFEFEF;
  --danger: #C9445D;
  --danger-hover: #B03650;
@@ -23,45 +23,43 @@
  --success: #2E9E6B;
  --success-light: #EEF8F3;
  --radius: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 20px;
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
-  --shadow-lg: 0 10px 32px rgba(0,0,0,0.10);
-  --shadow-xl: 0 20px 56px rgba(0,0,0,0.14);
+  --radius-lg: 16px;
+  --radius-xl: 22px;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.03);
+  --shadow-lg: 0 12px 36px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
+  --shadow-xl: 0 24px 64px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.04);
 }

-/* ── Тёмная тема — Instagram dark ── */
+/* ── Тёмная тема ── */
 [data-theme="dark"] {
-  --bg: #000000;
-  --surface: #121212;
+  --bg: #0A0A0A;
+  --surface: #141414;
  --surface-hover: #1C1C1C;
-  --fg: #F5F5F5;
-  --fg-secondary: #A8A8A8;
-  --fg-tertiary: #555555;
+  --fg: #F0F0F0;
+  --fg-secondary: #A0A0A0;
+  --fg-tertiary: #4A4A4A;
  --accent: #E8687E;
  --accent-hover: #F07A8E;
  --accent-soft: rgba(232, 104, 126, 0.12);
-  --accent-light: #2A1018;
-  --secondary: #000000;
-  --border: #262626;
+  --accent-light: #2A0F16;
+  --secondary: #0A0A0A;
+  --border: #242424;
  --border-light: #1C1C1C;
  --danger: #E8687E;
  --danger-hover: #F07A8E;
-  --danger-light: #2A1018;
+  --danger-light: #2A0F16;
  --success: #48B884;
  --success-light: #0D2419;
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
-  --shadow-md: 0 4px 14px rgba(0,0,0,0.50);
-  --shadow-lg: 0 10px 36px rgba(0,0,0,0.60);
-  --shadow-xl: 0 20px 60px rgba(0,0,0,0.75);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
+  --shadow-md: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
+  --shadow-xl: 0 24px 72px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
 }

-* { border-color: var(--border); }
+* { border-color: var(--border); box-sizing: border-box; }

-html {
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
+html { transition: background-color 0.25s ease, color 0.25s ease; }

 body {
  background: var(--bg);
@@ -71,13 +69,20 @@ body {
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  letter-spacing: -0.01em;
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition: background-color 0.25s ease, color 0.25s ease;
 }

 ::selection { background: var(--accent); color: white; }

+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--fg-tertiary); }
+
+/* ── Анимации ── */
@keyframes fade-up {
-  from { opacity: 0; transform: translateY(8px); }
+  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
 }
@keyframes fade-in {
@@ -85,16 +90,16 @@ body {
  to { opacity: 1; }
 }
@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.96); }
-  to { opacity: 1; transform: scale(1); }
+  from { opacity: 0; transform: scale(0.95) translateY(4px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
 }
@keyframes pop {
  0% { transform: scale(1); }
-  50% { transform: scale(1.25); }
+  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
 }
@keyframes toast-in {
-  from { opacity: 0; transform: translateY(8px) scale(0.96); }
+  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
 }
@keyframes shimmer {
@@ -102,56 +107,69 @@ body {
  100% { background-position: 200% 0; }
 }
@keyframes slide-up {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
+  from { transform: translateY(100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@keyframes heart-burst {
+  0%   { transform: scale(0) rotate(-15deg); opacity: 1; }
+  50%  { transform: scale(1.4) rotate(5deg); opacity: 1; }
+  100% { transform: scale(1) rotate(0deg); opacity: 0; }
 }

-.animate-fade-up { animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
-.animate-fade-in { animation: fade-in 0.3s ease both; }
-.animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
-.animate-pop { animation: pop 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) both; }
-.animate-slide-up { animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.animate-fade-up      { animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.animate-fade-in      { animation: fade-in 0.25s ease both; }
+.animate-scale-in     { animation: scale-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.animate-pop          { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-toast-in     { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.animate-slide-up     { animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }

-.stagger-1 { animation-delay: 30ms; }
-.stagger-2 { animation-delay: 60ms; }
-.stagger-3 { animation-delay: 90ms; }
+.stagger-1 { animation-delay: 40ms; }
+.stagger-2 { animation-delay: 80ms; }
+.stagger-3 { animation-delay: 120ms; }
+.stagger-4 { animation-delay: 160ms; }

+/* ── Скелетон ── */
 .skeleton-shimmer {
-  background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
+  background: linear-gradient(90deg,
+    var(--border-light) 25%,
+    var(--border) 50%,
+    var(--border-light) 75%
+  );
  background-size: 200% 100%;
-  animation: shimmer 1.5s ease infinite;
+  animation: shimmer 1.6s ease infinite;
 }

+/* ── Карточки ── */
 .card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
-  transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.3s ease;
+  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.25s ease;
 }
 .card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
 }
 .card-interactive:hover {
+  background: var(--surface-hover);
  box-shadow: var(--shadow-md);
 }

-/* Product-ready card — без layout shift, плавное поднятие + тень */
+/* ── Пост-карточка ── */
 .cat-card {
  background: var(--surface);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition:
-    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, box-shadow;
 }
 .cat-card:hover {
  box-shadow: var(--shadow-lg);
-  transform: translateY(-3px);
+  transform: translateY(-4px);
 }
 .cat-card:active {
  transform: translateY(-1px);
@@ -159,19 +177,19 @@ body {
  transition-duration: 0.1s;
 }

-/* Изображение в карточке — зум при ховере */
 .cat-card-image {
  background: var(--bg);
  overflow: hidden;
 }
 .cat-card-img {
-  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
 }
 .cat-card:hover .cat-card-img {
-  transform: scale(1.03);
+  transform: scale(1.04);
 }

+/* ── Аватар ── */
 .avatar-colored {
  border-radius: 50%;
  display: flex;
@@ -182,117 +200,184 @@ body {
  user-select: none;
 }

+/* ── Кнопки ── */
 .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
-  transition: background 0.18s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  border: none;
  background: transparent;
 }
-.btn-ghost:hover { background: var(--border-light); transform: scale(1.08); }
-.btn-ghost:active { transform: scale(0.92); transition-duration: 0.08s; }
+.btn-ghost:hover { background: var(--border-light); transform: scale(1.1); }
+.btn-ghost:active { transform: scale(0.9); transition-duration: 0.08s; }

-/* Кнопки действий в карточке */
 .action-btn {
-  padding: 5px 8px;
-  border-radius: 8px;
+  padding: 6px 10px;
+  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
-    background 0.18s ease,
-    color 0.18s ease,
+    background 0.15s ease,
+    color 0.15s ease,
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .action-btn:hover {
  background: var(--border-light);
  color: var(--fg);
-  transform: scale(1.05);
+  transform: scale(1.06);
 }
 .action-btn:active {
-  transform: scale(0.95);
+  transform: scale(0.94);
  transition-duration: 0.08s;
 }

+/* ── Тег ── */
 .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
-  padding: 0.15rem 0.55rem;
+  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
-  letter-spacing: 0.01em;
+  letter-spacing: 0.02em;
 }

-.focus-ring {
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
+/* ── Focus ── */
+.focus-ring { transition: border-color 0.15s, box-shadow 0.15s; }
 .focus-ring:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
 }

-.text-secondary { color: var(--fg-secondary); }
-.text-tertiary { color: var(--fg-tertiary); }
+/* ── Утилиты ── */
+.text-secondary  { color: var(--fg-secondary); }
+.text-tertiary   { color: var(--fg-tertiary); }
+.divider { height: 1px; background: var(--border-light); width: 100%; }
+.stat-value { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }

+/* ── Навбар ── */
 .nav-glass {
-  background: rgba(250, 250, 250, 0.92);
-  backdrop-filter: blur(20px) saturate(1.6);
-  -webkit-backdrop-filter: blur(20px) saturate(1.6);
-  transition: background 0.3s ease;
+  background: rgba(245, 245, 245, 0.88);
+  backdrop-filter: blur(24px) saturate(1.8);
+  -webkit-backdrop-filter: blur(24px) saturate(1.8);
+  transition: background 0.25s ease;
 }
 [data-theme="dark"] .nav-glass {
-  background: rgba(0, 0, 0, 0.90);
+  background: rgba(10, 10, 10, 0.88);
 }

-.nav-editorial-bar {
-  height: 3px;
-  background: var(--accent);
+.nav-accent-bar {
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
+  opacity: 0.7;
 }

 .wordmark {
-  font-size: 13px;
+  font-size: 15px;
  font-weight: 800;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
+  line-height: 1;
 }
-
 .wordmark-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
-  margin-left: 1px;
-  margin-bottom: 1px;
+  margin-left: 2px;
+  margin-bottom: 2px;
  vertical-align: middle;
 }

-.divider {
-  height: 1px;
-  background: var(--border-light);
+/* ── Страница входа ── */
+.auth-bg-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.12;
+  pointer-events: none;
+}
+
+/* ── Профиль ── */
+.profile-stat-card {
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+/* ── Grid профиля ── */
+.profile-grid-item {
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--bg);
+  cursor: pointer;
+}
+.profile-grid-item img {
  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.profile-grid-item:hover img { transform: scale(1.07); }
+.profile-grid-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+}
+.profile-grid-item:hover .profile-grid-overlay { background: rgba(0,0,0,0.22); }
+
+/* ── Дроп-зона ── */
+.dropzone-idle {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--surface);
+  transition: border-color 0.2s, background 0.2s, transform 0.2s;
+  cursor: pointer;
+}
+.dropzone-idle:hover {
+  border-color: var(--fg-tertiary);
+  background: var(--surface-hover);
+}
+.dropzone-active {
+  border-color: var(--accent) !important;
+  background: var(--accent-light) !important;
+  transform: scale(1.01);
 }

-.stat-value {
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
-  letter-spacing: -0.02em;
+/* ── Модал ── */
+.modal-backdrop {
+  background: rgba(0,0,0,0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }

-.page-enter { opacity: 0; }
-.page-enter-active { opacity: 1; transition: opacity 0.2s ease; }
-
@media (max-width: 640px) {
-  .mobile-full { border-radius: 0 !important; margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
-}
+  .mobile-full {
+    border-radius: 0 !important;
+    margin-left: -1rem;
+    margin-right: -1rem;
+    width: calc(100% + 2rem);
+  }
+}
--- a/client/src/pages/FeedPage.tsx
+++ b/client/src/pages/FeedPage.tsx
@@ -80,7 +80,7 @@ export default function FeedPage() {
              </div>
              <p className="text-base font-semibold mb-1">Не удалось загрузить</p>
              <p className="text-sm text-[var(--fg-tertiary)] mb-5">Попробуйте снова</p>
-              <Button variant="outline" onClick={() => refetch()} className="rounded-xl text-xs gap-1.5 h-9 px-4">
+              <Button variant="outline" size="sm" onClick={() => refetch()} className="gap-1.5">
                <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать
              </Button>
            </div>
@@ -94,7 +94,7 @@ export default function FeedPage() {
              <p className="text-base font-semibold mb-1">Пока нет котов</p>
              <p className="text-sm text-[var(--fg-tertiary)] mb-5">Будьте первым</p>
              <Button onClick={() => window.location.href = '/upload'}
-                className="rounded-xl text-xs h-9 px-5 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">
+                size="sm">
                Загрузить кота
              </Button>
            </div>
--- a/client/src/pages/LoginPage.tsx
+++ b/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();
@@ -24,46 +23,73 @@ export default function LoginPage() {
  };

  return (
-    <div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
-      <div className="w-full max-w-[380px] animate-fade-up">
-        <div className="text-center mb-10">
-          <div className="mx-auto mb-5 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent)] shadow-sm">
-            <Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
+    <div className="relative flex min-h-screen items-center justify-center p-5 overflow-hidden bg-[var(--bg)]">
+      {/* Декоративные пятна */}
+      <div className="auth-bg-blob w-96 h-96 bg-[var(--accent)] -top-20 -left-20 absolute" />
+      <div className="auth-bg-blob w-72 h-72 bg-pink-300 bottom-10 right-5 absolute" />
+
+      <div className="relative w-full max-w-[380px] animate-fade-up">
+        {/* Логотип */}
+        <div className="text-center mb-8">
+          <div className="mx-auto mb-5 h-[72px] w-[72px] rounded-[22px] flex items-center justify-center bg-[var(--accent)] shadow-lg">
+            <span className="text-4xl select-none">🐾</span>
          </div>
-          <h1 className="text-2xl font-800 tracking-tight">Котограм</h1>
-          <p className="text-sm text-[var(--fg-tertiary)] mt-1">Войдите, чтобы смотреть котов</p>
+          <h1 className="text-2xl font-extrabold tracking-tight">Котограм</h1>
+          <p className="text-sm text-[var(--fg-tertiary)] mt-1.5">Войдите, чтобы смотреть котов</p>
        </div>

-        <form onSubmit={handleSubmit} className="space-y-3">
-          <Input value={username} onChange={e => setUsername(e.target.value)}
-            placeholder="Имя пользователя" required autoFocus
-            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
-          <Input type="password" value={password} onChange={e => setPassword(e.target.value)}
-            placeholder="Пароль" required
-            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--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-xs font-medium animate-fade-up">
-              {error}
+        {/* Форма */}
+        <div className="card p-6 space-y-3">
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <div className="space-y-2">
+              <Input
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+                placeholder="Имя пользователя"
+                required
+                autoFocus
+                autoComplete="username"
+                className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
+              />
+              <Input
+                type="password"
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                placeholder="Пароль"
+                required
+                autoComplete="current-password"
+                className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
+              />
            </div>
-          )}

-          <Button type="submit" disabled={loading}
-            className="w-full h-12 rounded-xl text-sm font-semibold bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white transition-all active:scale-[0.98]">
-            {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" />
-                Вход...
-              </span>
-            ) : 'Войти'}
-          </Button>
-        </form>
+            {error && (
+              <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-fade-up">
+                {error}
+              </div>
+            )}

-        <p className="mt-8 text-center text-sm text-[var(--fg-tertiary)]">
+            <Button
+              type="submit"
+              disabled={loading}
+              size="lg" className="w-full"
+            >
+              {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" />
+                  Вход...
+                </span>
+              ) : 'Войти'}
+            </Button>
+          </form>
+        </div>
+
+        <p className="mt-5 text-center text-sm text-[var(--fg-tertiary)]">
          Нет аккаунта?{' '}
-          <Link to="/register" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">Зарегистрироваться</Link>
+          <Link to="/register" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">
+            Зарегистрироваться
+          </Link>
        </p>
      </div>
    </div>
  );
-}
+}
--- a/client/src/pages/ProfilePage.tsx
+++ b/client/src/pages/ProfilePage.tsx
@@ -9,7 +9,7 @@ import CatModal from '@/components/CatModal';
 import UserAvatar from '@/components/UserAvatar';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy, Camera, X } from 'lucide-react';
+import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy, Camera, X, Grid3x3 } from 'lucide-react';
 import { PRESETS } from '@/lib/avatars';
 import { useToast } from '@/components/Toast';

@@ -31,7 +31,6 @@ export default function ProfilePage() {
  });

  const { data, isLoading } = useUserCats(profileUserId ?? 0);
-
  const profileUser = isMe ? me : userData;

  const fileInputRef = useRef<HTMLInputElement>(null);
@@ -60,16 +59,19 @@ export default function ProfilePage() {

  if (isLoading) {
    return (
-      <div className="mx-auto max-w-[540px] px-5 py-8">
-        <div className="flex items-center gap-5 mb-10">
-          <Skeleton className="h-20 w-20 rounded-full" />
+      <div className="mx-auto max-w-[600px] px-5 py-8">
+        <div className="flex items-center gap-5 mb-8">
+          <Skeleton className="h-24 w-24 rounded-full" />
          <div className="space-y-2.5 flex-1">
-            <Skeleton className="h-6 w-32 rounded-full" />
+            <Skeleton className="h-5 w-36 rounded-full" />
            <Skeleton className="h-4 w-48 rounded-full" />
+            <Skeleton className="h-4 w-24 rounded-full" />
          </div>
        </div>
-        <div className="grid grid-cols-3 gap-1.5">
-          {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="aspect-square rounded-xl" />)}
+        <div className="grid grid-cols-3 gap-1">
+          {Array.from({ length: 9 }).map((_, i) => (
+            <Skeleton key={i} className="aspect-square rounded-none first:rounded-tl-xl" />
+          ))}
        </div>
      </div>
    );
@@ -82,7 +84,9 @@ export default function ProfilePage() {
          <Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
        </div>
        <p className="text-base font-semibold mb-1">Пользователь не найден</p>
-        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-xl text-xs mt-2 h-9 px-4">В ленту</Button>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-xl text-xs mt-3 h-9 px-4">
+          В ленту
+        </Button>
      </div>
    );
  }
@@ -91,104 +95,134 @@ export default function ProfilePage() {
  const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);

  return (
-    <div className="mx-auto max-w-[540px] px-5 py-6 animate-fade-up">
+    <div className="mx-auto max-w-[600px] animate-fade-up">
      {!isMe && (
-        <button onClick={() => navigate(-1)} className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors">
-          <ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
-        </button>
+        <div className="px-5 pt-5">
+          <button
+            onClick={() => navigate(-1)}
+            className="mb-4 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors"
+          >
+            <ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
+          </button>
+        </div>
      )}

-      <div className="flex items-center gap-5 mb-8">
-        <div className="relative group">
-          <UserAvatar
-            avatarUrl={profileUser?.avatar_url}
-            username={profileUser?.username || '?'}
-            className="h-[72px] w-[72px]"
-            fallbackClassName="text-2xl font-800 avatar-colored bg-[var(--accent)]"
-          />
-          {isMe && (
-            <button
-              onClick={() => setShowAvatarPicker(true)}
-              className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/30 flex items-center justify-center transition-colors"
-            >
-              <Camera className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" strokeWidth={1.5} />
-            </button>
-          )}
-        </div>
+      {/* Шапка профиля */}
+      <div className="px-5 pt-6 pb-5">
+        <div className="flex items-start gap-6">
+          {/* Аватар */}
+          <div className="relative group shrink-0">
+            <UserAvatar
+              avatarUrl={profileUser?.avatar_url}
+              username={profileUser?.username || '?'}
+              className="h-[88px] w-[88px] ring-2 ring-[var(--border-light)] ring-offset-2 ring-offset-[var(--bg)]"
+              fallbackClassName="text-3xl font-extrabold avatar-colored bg-[var(--accent)]"
+            />
+            {isMe && (
+              <button
+                onClick={() => setShowAvatarPicker(true)}
+                className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/35 flex items-center justify-center transition-all"
+              >
+                <Camera className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow" strokeWidth={1.5} />
+              </button>
+            )}
+          </div>

-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-3">
-            <h1 className="text-lg font-800 truncate">@{profileUser?.username}</h1>
-            <div className="flex items-center gap-1 ml-auto">
+          {/* Инфо */}
+          <div className="flex-1 min-w-0 pt-1">
+            <div className="flex items-center gap-2 mb-1">
+              <h1 className="text-xl font-extrabold truncate tracking-tight">
+                @{profileUser?.username}
+              </h1>
              {isMe && me?.is_admin && (
-                <Link to="/admin" className="btn-ghost h-8 w-8 text-[var(--accent)]" title="Админ-панель">
-                  <Shield className="h-4 w-4" strokeWidth={1.5} />
+                <Link
+                  to="/admin"
+                  className="btn-ghost h-7 w-7 text-[var(--accent)] shrink-0"
+                  title="Админ-панель"
+                >
+                  <Shield className="h-3.5 w-3.5" strokeWidth={1.5} />
                </Link>
              )}
              {isMe && (
-                <button onClick={logout} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)]" title="Выйти">
-                  <LogOut className="h-4 w-4" strokeWidth={1.5} />
+                <button
+                  onClick={logout}
+                  className="btn-ghost h-7 w-7 text-[var(--fg-tertiary)] hover:text-[var(--danger)] ml-auto shrink-0"
+                  title="Выйти"
+                >
+                  <LogOut className="h-3.5 w-3.5" strokeWidth={1.5} />
                </button>
              )}
            </div>
-          </div>

-          <div className="flex items-center gap-5">
-            <div className="text-center">
-              <div className="stat-value text-base">{cats.length}</div>
-              <div className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider">фото</div>
+            {/* Статистика */}
+            <div className="flex items-center gap-5 mb-3">
+              <Stat value={cats.length} label="публикаций" />
+              <div className="w-px h-6 bg-[var(--border-light)]" />
+              <Stat value={totalLikes} label="лайков" icon={<Heart className="h-3 w-3 text-[var(--accent)]" strokeWidth={1.5} />} />
+              <div className="w-px h-6 bg-[var(--border-light)]" />
+              <Stat value={profileUser?.points ?? 0} label="баллов" icon={<Trophy className="h-3 w-3 text-amber-500" strokeWidth={1.5} />} />
            </div>
-            <div className="text-center">
-              <div className="stat-value text-base flex items-center justify-center gap-0.5">
-                <Heart className="h-3.5 w-3.5 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
-                {totalLikes}
-              </div>
-              <div className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider">лайков</div>
-            </div>
-            <div className="text-center">
-              <div className="stat-value text-base flex items-center justify-center gap-0.5">
-                <Trophy className="h-3.5 w-3.5 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
-                {profileUser?.points ?? 0}
-              </div>
-              <div className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider">баллов</div>
-            </div>
-          </div>

-          {isMe && (
-            <div className="mt-3">
+            {isMe && (
              <Link to="/upload">
-                <Button size="sm" className="rounded-xl text-xs h-8 gap-1.5 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white px-4">
-                  <Plus className="h-3.5 w-3.5" strokeWidth={2} /> Новая публикация
+                <Button
+                  size="sm" className="gap-1.5"
+                >
+                  <Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
+                  Новая публикация
                </Button>
              </Link>
-            </div>
-          )}
+            )}
+          </div>
        </div>
      </div>

+      {/* Разделитель с иконкой сетки */}
+      <div className="flex items-center gap-3 px-5 py-2 border-t border-[var(--border-light)]">
+        <Grid3x3 className="h-4 w-4 text-[var(--fg-secondary)]" strokeWidth={1.5} />
+        <span className="text-[11px] font-bold uppercase tracking-widest text-[var(--fg-tertiary)]">
+          Публикации
+        </span>
+      </div>
+
+      {/* Сетка фото */}
      {cats.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-up">
+        <div className="flex flex-col items-center justify-center py-16 text-center px-5 animate-fade-up">
          <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--border-light)]">
            <Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
          </div>
-          <p className="text-sm font-semibold mb-1">Пока нет котов</p>
-          <p className="text-xs text-[var(--fg-tertiary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p>
+          <p className="text-sm font-semibold mb-1">Пока нет публикаций</p>
+          <p className="text-xs text-[var(--fg-tertiary)] mb-5">
+            {isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}
+          </p>
          {isMe && (
            <Link to="/upload">
-              <Button size="sm" className="rounded-xl text-xs bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">Загрузить кота</Button>
+              <Button size="sm">
+                Загрузить кота
+              </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(--bg)] rounded-xl">
-              <img src={cat.image_url} alt={cat.caption || 'Фото кота'}
-                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" />
-              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
-                <span className="text-white text-xs font-semibold opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 drop-shadow-lg">
-                  <Heart className="h-3.5 w-3.5 fill-white" strokeWidth={0} /> {cat.likes_count}
+        <div className="grid grid-cols-3 gap-0.5">
+          {cats.map((cat, i) => (
+            <button
+              key={cat.id}
+              onClick={() => setModalCatId(cat.id)}
+              className={`profile-grid-item ${
+                i === 0 ? 'rounded-none' :
+                i === cats.length - 1 && cats.length % 3 === 1 ? 'rounded-none' : 'rounded-none'
+              }`}
+            >
+              <img
+                src={cat.image_url}
+                alt={cat.caption || 'Фото кота'}
+                loading="lazy"
+              />
+              <div className="profile-grid-overlay">
+                <span className="text-white text-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1.5 drop-shadow-lg">
+                  <Heart className="h-4 w-4 fill-white" strokeWidth={0} />
+                  {cat.likes_count}
                </span>
              </div>
            </button>
@@ -198,11 +232,18 @@ export default function ProfilePage() {

      {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}

+      {/* Пикер аватара */}
      {showAvatarPicker && createPortal(
-        <div className="fixed inset-0 z-[70] bg-black/30 flex items-center justify-center animate-fade-in" onClick={() => setShowAvatarPicker(false)}>
-          <div className="bg-[var(--surface)] rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4" onClick={e => e.stopPropagation()}>
+        <div
+          className="fixed inset-0 z-[70] modal-backdrop flex items-center justify-center animate-fade-in"
+          onClick={() => setShowAvatarPicker(false)}
+        >
+          <div
+            className="bg-[var(--surface)] rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4"
+            onClick={e => e.stopPropagation()}
+          >
            <div className="flex items-center justify-between mb-5">
-              <h2 className="text-base font-800">Выбрать аватар</h2>
+              <h2 className="text-base font-bold">Выбрать аватар</h2>
              <button onClick={() => setShowAvatarPicker(false)} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)]">
                <X className="h-5 w-5" strokeWidth={1.5} />
              </button>
@@ -213,8 +254,10 @@ export default function ProfilePage() {
                <button
                  key={emoji}
                  onClick={() => handlePreset(emoji)}
-                  className={`h-12 w-12 rounded-xl flex items-center justify-center text-2xl transition-all hover:bg-[var(--accent-light)] hover:scale-110 ${
-                    me?.avatar_url === `preset:${emoji}` ? 'ring-2 ring-[var(--accent)] bg-[var(--accent-light)]' : 'bg-[var(--border-light)]'
+                  className={`h-12 w-12 rounded-xl flex items-center justify-center text-2xl transition-all hover:scale-110 ${
+                    me?.avatar_url === `preset:${emoji}`
+                      ? 'ring-2 ring-[var(--accent)] bg-[var(--accent-light)] scale-105'
+                      : 'bg-[var(--border-light)] hover:bg-[var(--accent-light)]'
                  }`}
                >
                  {emoji}
@@ -242,4 +285,20 @@ export default function ProfilePage() {
      <input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />
    </div>
  );
-}
+}
+
+function Stat({
+  value, label, icon,
+}: {
+  value: number; label: string; icon?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-start">
+      <span className="flex items-center gap-1 stat-value text-base">
+        {icon}
+        {value}
+      </span>
+      <span className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider leading-tight">{label}</span>
+    </div>
+  );
+}
--- a/client/src/pages/RegisterPage.tsx
+++ b/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();
@@ -26,49 +25,79 @@ export default function RegisterPage() {
  };

  return (
-    <div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
-      <div className="w-full max-w-[380px] animate-fade-up">
-        <div className="text-center mb-10">
-          <div className="mx-auto mb-5 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent)] shadow-sm">
-            <Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
+    <div className="relative flex min-h-screen items-center justify-center p-5 overflow-hidden bg-[var(--bg)]">
+      <div className="auth-bg-blob w-96 h-96 bg-[var(--accent)] -bottom-20 -right-20 absolute" />
+      <div className="auth-bg-blob w-72 h-72 bg-pink-300 top-10 left-5 absolute" />
+
+      <div className="relative w-full max-w-[380px] animate-fade-up">
+        <div className="text-center mb-8">
+          <div className="mx-auto mb-5 h-[72px] w-[72px] rounded-[22px] flex items-center justify-center bg-[var(--accent)] shadow-lg">
+            <span className="text-4xl select-none">🐾</span>
          </div>
-          <h1 className="text-2xl font-800 tracking-tight">Котограм</h1>
-          <p className="text-sm text-[var(--fg-tertiary)] mt-1">Присоединяйтесь к сообществу</p>
+          <h1 className="text-2xl font-extrabold tracking-tight">Котограм</h1>
+          <p className="text-sm text-[var(--fg-tertiary)] mt-1.5">Присоединяйтесь к сообществу</p>
        </div>

-        <form onSubmit={handleSubmit} className="space-y-3">
-          <Input value={username} onChange={e => setUsername(e.target.value)}
-            placeholder="Имя пользователя" minLength={3} required autoFocus
-            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
-          <Input type="password" value={password} onChange={e => setPassword(e.target.value)}
-            placeholder="Пароль (мин. 4 символа)" minLength={4} required
-            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
-          <Input type="password" value={confirm} onChange={e => setConfirm(e.target.value)}
-            placeholder="Подтвердите пароль" required
-            className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
+        <div className="card p-6 space-y-3">
+          <form onSubmit={handleSubmit} className="space-y-2">
+            <Input
+              value={username}
+              onChange={e => setUsername(e.target.value)}
+              placeholder="Имя пользователя"
+              minLength={3}
+              required
+              autoFocus
+              autoComplete="username"
+              className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
+            />
+            <Input
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              placeholder="Пароль (мин. 4 символа)"
+              minLength={4}
+              required
+              autoComplete="new-password"
+              className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
+            />
+            <Input
+              type="password"
+              value={confirm}
+              onChange={e => setConfirm(e.target.value)}
+              placeholder="Подтвердите пароль"
+              required
+              autoComplete="new-password"
+              className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--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-xs font-medium animate-fade-up">
-              {error}
-            </div>
-          )}
+            {error && (
+              <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-fade-up">
+                {error}
+              </div>
+            )}

-          <Button type="submit" disabled={loading}
-            className="w-full h-12 rounded-xl text-sm font-semibold bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white transition-all active:scale-[0.98]">
-            {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" />
-                Создание...
-              </span>
-            ) : 'Создать аккаунт'}
-          </Button>
-        </form>
+            <Button
+              type="submit"
+              disabled={loading}
+              size="lg" className="w-full mt-1"
+            >
+              {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" />
+                  Создание...
+                </span>
+              ) : 'Создать аккаунт'}
+            </Button>
+          </form>
+        </div>

-        <p className="mt-8 text-center text-sm text-[var(--fg-tertiary)]">
+        <p className="mt-5 text-center text-sm text-[var(--fg-tertiary)]">
          Уже есть аккаунт?{' '}
-          <Link to="/login" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">Войти</Link>
+          <Link to="/login" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">
+            Войти
+          </Link>
        </p>
      </div>
    </div>
  );
-}
+}
--- a/client/src/pages/UploadPage.tsx
+++ b/client/src/pages/UploadPage.tsx
@@ -5,9 +5,11 @@ import { useUploadCat } from '@/hooks/useCats';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/components/Toast';
 import { Button } from '@/components/ui/button';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import UserAvatar from '@/components/UserAvatar';
 import { ArrowLeft, Upload, X, ImagePlus } from 'lucide-react';

+const ACCEPTED_FORMATS = 'JPG, PNG, GIF, WebP, HEIC, AVIF';
+
 export default function UploadPage() {
  const navigate = useNavigate();
  const { user, updateUser } = useAuth();
@@ -19,91 +21,147 @@ export default function UploadPage() {

  const onDrop = useCallback((accepted: File[]) => {
    const f = accepted[0];
-    if (f) { setFile(f); if (preview) URL.revokeObjectURL(preview); setPreview(URL.createObjectURL(f)); }
+    if (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, maxSize: 10 * 1024 * 1024,
+    onDrop,
+    accept: {
+      'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.heic', '.heif', '.avif'],
+    },
+    maxFiles: 1,
+    maxSize: 20 * 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) + 1 });
-      toast('+1 🎉');
+      toast('+1 балл 🎉');
      navigate(`/cat/${result.cat.id}`);
-    } catch { toast('Ошибка загрузки', 'error'); }
+    } catch (err: any) {
+      toast(err?.response?.data?.error || 'Ошибка загрузки', 'error');
+    }
  };

-  const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); };
+  const clearFile = () => {
+    setFile(null);
+    if (preview) URL.revokeObjectURL(preview);
+    setPreview(null);
+  };

  return (
    <div className="mx-auto max-w-[520px] px-5 py-6">
-      <button onClick={() => navigate(-1)}
-        className="mb-6 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors">
-        <ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
+      <button
+        onClick={() => navigate(-1)}
+        className="mb-6 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
+        Назад
      </button>

-      <h1 className="text-xl font-800 tracking-tight mb-6">Новая публикация</h1>
+      <h1 className="text-xl font-extrabold tracking-tight mb-6">Новая публикация</h1>

      {!preview ? (
-        <div {...getRootProps()}
-          className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-[var(--surface)] ${
-            isDragActive ? 'border-[var(--accent)] bg-[var(--accent-light)] scale-[1.01]' : 'border-[var(--border)] hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]'
-          }`}>
+        <div
+          {...getRootProps()}
+          className={`dropzone-idle text-center p-16 ${isDragActive ? 'dropzone-active' : ''}`}
+        >
          <input {...getInputProps()} />
-          <div className="mb-5 flex justify-center">
-            <div className="h-14 w-14 rounded-2xl bg-[var(--accent-light)] flex items-center justify-center">
-              <ImagePlus className="h-6 w-6 text-[var(--accent)]" strokeWidth={1.5} />
+          <div className="flex justify-center mb-5">
+            <div className={`h-16 w-16 rounded-2xl flex items-center justify-center transition-colors ${
+              isDragActive ? 'bg-[var(--accent)] text-white' : 'bg-[var(--accent-light)] text-[var(--accent)]'
+            }`}>
+              <ImagePlus className="h-7 w-7" strokeWidth={1.5} />
            </div>
          </div>
-          <p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p>
-          <p className="text-xs text-[var(--fg-tertiary)] mb-5">или нажмите, чтобы выбрать файл</p>
-          <Button variant="outline" size="sm" className="rounded-xl text-xs px-5 h-9">Выбрать файл</Button>
-          <p className="mt-4 text-[10px] text-[var(--fg-tertiary)] tracking-wide">JPG, PNG, GIF, WebP · до 10 МБ</p>
+          <p className="text-sm font-semibold mb-1.5">
+            {isDragActive ? 'Отпустите фото здесь' : 'Перетащите фото сюда'}
+          </p>
+          <p className="text-xs text-[var(--fg-tertiary)] mb-6">
+            или нажмите, чтобы выбрать файл
+          </p>
+          <Button variant="outline" size="sm" className="px-6">
+            Выбрать файл
+          </Button>
+          <p className="mt-5 text-[10px] text-[var(--fg-tertiary)] tracking-wide">
+            {ACCEPTED_FORMATS} · до 20 МБ
+          </p>
        </div>
      ) : (
        <div className="space-y-5 animate-fade-up">
-          <div className="relative bg-[var(--bg)] rounded-2xl 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-8 w-8 items-center justify-center rounded-xl bg-black/40 text-white hover:bg-black/60 transition-all">
+          {/* Превью */}
+          <div className="relative bg-[var(--bg)] rounded-2xl overflow-hidden shadow-sm">
+            <img
+              src={preview}
+              alt="Preview"
+              className="max-h-[440px] w-full object-contain"
+            />
+            <button
+              onClick={clearFile}
+              className="absolute right-3 top-3 h-8 w-8 flex items-center justify-center rounded-xl bg-black/50 text-white hover:bg-black/70 transition-all backdrop-blur-sm"
+            >
              <X className="h-4 w-4" strokeWidth={2} />
            </button>
+            {file && (
+              <div className="absolute bottom-3 left-3 px-2.5 py-1 rounded-lg bg-black/50 text-white text-[10px] font-medium backdrop-blur-sm">
+                {file.name}
+              </div>
+            )}
          </div>

-          <div className="flex items-start gap-3">
-            <Avatar className="h-9 w-9 shrink-0">
-              <AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
-                {user?.username?.charAt(0).toUpperCase() || '?'}
-              </AvatarFallback>
-            </Avatar>
+          {/* Подпись */}
+          <div className="card p-4 flex items-start gap-3">
+            <UserAvatar
+              avatarUrl={user?.avatar_url}
+              username={user?.username || '?'}
+              className="h-9 w-9 shrink-0"
+              fallbackClassName="text-xs avatar-colored bg-[var(--accent)]"
+            />
            <div className="flex-1">
-              <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-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.5]" />
+              <p className="text-sm font-semibold mb-1.5">@{user?.username}</p>
+              <textarea
+                placeholder="Добавьте подпись..."
+                value={caption}
+                onChange={e => setCaption(e.target.value)}
+                maxLength={500}
+                rows={3}
+                className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-relaxed"
+              />
              <div className="flex justify-end mt-1">
-                <span className="text-[10px] text-[var(--fg-tertiary)] stat-value">{caption.length}/200</span>
+                <span className={`text-[10px] stat-value ${caption.length > 450 ? 'text-[var(--danger)]' : 'text-[var(--fg-tertiary)]'}`}>
+                  {caption.length}/500
+                </span>
              </div>
            </div>
          </div>

          <div className="divider" />

-          <div className="flex items-center justify-between pt-1">
-            <span className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1">
-              <Upload className="h-3 w-3" strokeWidth={1.5} /> +1 балл
+          {/* Публикация */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1.5 bg-[var(--accent-light)] text-[var(--accent)] px-3 py-1.5 rounded-full font-semibold">
+              <Upload className="h-3 w-3" strokeWidth={1.5} />
+              +1 балл
            </span>
-            <Button onClick={handleUpload} disabled={uploadMutation.isPending}
-              size="sm" className="rounded-xl text-sm px-6 h-10 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white disabled:opacity-60">
+            <Button
+              onClick={handleUpload}
+              disabled={uploadMutation.isPending}
+              size="sm"
+              className="px-7"
+            >
              {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" />
-                  Публикация...
+                  Публикуем...
                </span>
              ) : 'Опубликовать'}
            </Button>
@@ -118,4 +176,4 @@ export default function UploadPage() {
      )}
    </div>
  );
-}
+}
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -14,6 +14,7 @@
        "helmet": "^8.2.0",
        "jsonwebtoken": "^9.0.2",
        "multer": "^1.4.5-lts.1",
+        "sharp": "^0.33.0",
        "sql.js": "^1.14.1"
      },
      "devDependencies": {
@@ -28,6 +29,16 @@
        "typescript": "^5.6.0"
      }
    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.28.0",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
@@ -470,6 +481,403 @@
        "node": ">=18"
      }
    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
    "node_modules/@types/bcryptjs": {
      "version": "2.4.6",
      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
@@ -759,6 +1167,47 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
    "node_modules/concat-stream": {
      "version": "1.6.2",
      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
@@ -861,6 +1310,15 @@
        "npm": "1.2.8000 || >= 1.4.16"
      }
    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/dotenv": {
      "version": "16.6.1",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -1263,6 +1721,12 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
    "node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -1700,6 +2164,45 @@
      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
      "license": "ISC"
    },
+    "node_modules/sharp": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.5",
+        "@img/sharp-darwin-x64": "0.33.5",
+        "@img/sharp-libvips-darwin-arm64": "1.0.4",
+        "@img/sharp-libvips-darwin-x64": "1.0.4",
+        "@img/sharp-libvips-linux-arm": "1.0.5",
+        "@img/sharp-libvips-linux-arm64": "1.0.4",
+        "@img/sharp-libvips-linux-s390x": "1.0.4",
+        "@img/sharp-libvips-linux-x64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+        "@img/sharp-linux-arm": "0.33.5",
+        "@img/sharp-linux-arm64": "0.33.5",
+        "@img/sharp-linux-s390x": "0.33.5",
+        "@img/sharp-linux-x64": "0.33.5",
+        "@img/sharp-linuxmusl-arm64": "0.33.5",
+        "@img/sharp-linuxmusl-x64": "0.33.5",
+        "@img/sharp-wasm32": "0.33.5",
+        "@img/sharp-win32-ia32": "0.33.5",
+        "@img/sharp-win32-x64": "0.33.5"
+      }
+    },
    "node_modules/side-channel": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -1772,6 +2275,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
    "node_modules/sql.js": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/sql.js/-/sql.js-1.14.1.tgz",
@@ -1819,6 +2331,13 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
    "node_modules/tsx": {
      "version": "4.22.3",
      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.22.3.tgz",
Author	SHA1	Message	Date
HeagBoKaT	99efe831b0	Merge pull request 'claude/sleepy-shirley-adfe57' (#2 ) from claude/sleepy-shirley-adfe57 into main Reviewed-on: #2	2026-06-26 00:57:45 +03:00
heagbokat	122d9e831f	fix: remove duplicate size prop on Button in ProfilePage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-26 00:55:58 +03:00
heagbokat	15a6323dfe	chore: update server package-lock.json (sharp dependency) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-26 00:55:02 +03:00
heagbokat	ae01ebdeea	feat: clean navbar icons, floating theme bubble, auto theme on first visit - Navbar: remove theme switcher, clean nav icons (no text labels), active state is accent dot underline + icon color — no pill bg - useTheme: drop 'system' from stored type; first visit = auto by system preference, stays unset until user explicitly clicks - ThemeBubble: fixed bottom-right pill with Sun/Moon icon + label, hover lift, click toggles light ↔ dark and persists to localStorage - App.tsx: render ThemeBubble inside ThemeProvider Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-26 00:51:42 +03:00
heagbokat	492bd1b4e1	fix: redesign buttons — depth, outline contrast, press effect - button.tsx: primary gets gradient + shadow + hover glow + -translate-y-px lift; outline gets border-2 for visibility on dark bg; all variants get active:scale-[0.96] press feel; lg size h-12 for auth forms - Remove hardcoded bg-[var(--accent)] overrides from Login, Register, Feed, Profile, Upload — variants now handle all coloring Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-26 00:47:44 +03:00
heagbokat	91ab44c6fb	feat: UI redesign — polished layout, modal, nav, profile - CSS: refined shadows with border ring, dark bg #0A0A0A, larger card radius (16/22px), modal-backdrop blur, scrollbar styling, new dropzone + profile-grid CSS classes - Navbar: paw emoji logo, labels under icons, accent gradient bar, active-state ring on avatar - Login / Register: auth card with decorative background blobs, form wrapped in card, cleaner spacing - CatModal: two-column layout on desktop (photo left, info right), modal-backdrop blur, comment input with user avatar, like label - ProfilePage: 88px avatar with camera overlay, inline stat bar with icons, grid section divider, Stat helper component - CatCard: points badge in header (amber), caption text secondary color, ring on avatar - FeedSidebar: color-coded rank badges, hover rows, star icon - UploadPage: new dropzone-idle/dropzone-active CSS classes, filename chip on preview, UserAvatar in caption row, HEIC/AVIF in accepted formats hint, 500-char counter Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-26 00:30:41 +03:00