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

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

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

client/src/index.css

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