Redesign p1

REDESIGN_PLAN.md

@@ -0,0 +1,389 @@
+# План редизайна фронтенда Game Marathon
+
+## Концепция дизайна
+
+**Стиль:** Минималистичный геймерский дизайн
+- Темная база с неоновыми акцентами (cyan/purple/pink градиенты)
+- Glitch эффекты на заголовках и при hover
+- Glassmorphism для карточек (blur + transparency)
+- Subtle grain/noise текстура на фоне
+- Геометрические паттерны и линии
+- Микро-анимации везде
+
+**Цветовая палитра:**
+```
+Background:    #0a0a0f (почти черный с синим оттенком)
+Surface:       #12121a (карточки)
+Border:        #1e1e2e (границы)
+Primary:       #00f0ff (cyan неон)
+Secondary:     #a855f7 (purple)
+Accent:        #f0abfc (pink)
+Success:       #22c55e
+Error:         #ef4444
+Text:          #e2e8f0
+Text Muted:    #64748b
+```
+
+---
+
+## Фаза 1: Базовая инфраструктура
+
+### 1.1 Обновление Tailwind Config
+- [ ] Новая цветовая палитра (neon colors)
+- [ ] Кастомные анимации:
+  - `glitch` - glitch эффект для текста
+  - `glow-pulse` - пульсация свечения
+  - `float` - плавное парение
+  - `slide-in-left/right/up/down` - слайды
+  - `scale-in` - появление с масштабом
+  - `shimmer` - блик на элементах
+- [ ] Кастомные backdrop-blur классы
+- [ ] Градиентные утилиты
+
+### 1.2 Глобальные стили (index.css)
+- [ ] CSS переменные для цветов
+- [ ] Glitch keyframes анимация
+- [ ] Noise/grain overlay
+- [ ] Glow эффекты (box-shadow неон)
+- [ ] Custom scrollbar (неоновый)
+- [ ] Selection стили (выделение текста)
+
+### 1.3 Новые UI компоненты
+- [ ] `GlitchText` - текст с glitch эффектом
+- [ ] `NeonButton` - кнопка с неоновым свечением
+- [ ] `GlassCard` - карточка с glassmorphism
+- [ ] `AnimatedCounter` - анимированные числа
+- [ ] `ProgressBar` - неоновый прогресс бар
+- [ ] `Badge` - бейджи со свечением
+- [ ] `Skeleton` - скелетоны загрузки
+- [ ] `Tooltip` - тултипы
+- [ ] `Tabs` - табы с анимацией
+- [ ] `Modal` - переработанная модалка
+
+---
+
+## Фаза 2: Layout и навигация
+
+### 2.1 Новый Header
+- [ ] Sticky header с blur при скролле
+- [ ] Логотип с glitch эффектом при hover
+- [ ] Анимированная навигация (underline slide)
+- [ ] Notification bell с badge
+- [ ] User dropdown с аватаром
+- [ ] Mobile hamburger menu с slide-in
+
+### 2.2 Sidebar (новый компонент)
+- [ ] Collapsible sidebar для desktop
+- [ ] Иконки с tooltip
+- [ ] Active state с неоновой подсветкой
+- [ ] Quick stats внизу
+
+### 2.3 Footer
+- [ ] Минималистичный footer
+- [ ] Social links
+- [ ] Version info
+
+---
+
+## Фаза 3: Страницы
+
+### 3.1 HomePage (полный редизайн)
+```
+┌─────────────────────────────────────────────┐
+│  HERO SECTION                               │
+│  ┌─────────────────────────────────────┐   │
+│  │  Animated background (particles/    │   │
+│  │  geometric shapes)                  │   │
+│  │                                     │   │
+│  │  GAME <glitch>MARATHON</glitch>    │   │
+│  │                                     │   │
+│  │  Tagline with typing effect        │   │
+│  │                                     │   │
+│  │  [Start Playing] [Watch Demo]      │   │
+│  └─────────────────────────────────────┘   │
+├─────────────────────────────────────────────┤
+│  FEATURES SECTION (3 glass cards)          │
+│  ┌───────┐ ┌───────┐ ┌───────┐            │
+│  │ Icon  │ │ Icon  │ │ Icon  │  hover:    │
+│  │ Title │ │ Title │ │ Title │  lift +    │
+│  │ Desc  │ │ Desc  │ │ Desc  │  glow      │
+│  └───────┘ └───────┘ └───────┘            │
+├─────────────────────────────────────────────┤
+│  HOW IT WORKS (timeline style)             │
+│  ○───────○───────○───────○                 │
+│  1       2       3       4                  │
+│  Create  Add     Spin    Win               │
+├─────────────────────────────────────────────┤
+│  LIVE STATS (animated counters)            │
+│  [ 1,234 Marathons ] [ 5,678 Challenges ]  │
+├─────────────────────────────────────────────┤
+│  CTA SECTION                               │
+│  Ready to compete? [Join Now]              │
+└─────────────────────────────────────────────┘
+```
+
+### 3.2 Login/Register Pages
+- [ ] Centered card с glassmorphism
+- [ ] Animated background (subtle)
+- [ ] Form inputs с glow при focus
+- [ ] Password strength indicator
+- [ ] Social login buttons (future)
+- [ ] Smooth transitions между login/register
+
+### 3.3 MarathonsPage (Dashboard)
+```
+┌─────────────────────────────────────────────┐
+│  Header: "My Marathons" + Create button    │
+├─────────────────────────────────────────────┤
+│  Quick Stats Bar                           │
+│  [Active: 2] [Completed: 5] [Total Wins: 3]│
+├─────────────────────────────────────────────┤
+│  Filters/Tabs: All | Active | Completed    │
+├─────────────────────────────────────────────┤
+│  Marathon Cards Grid (2-3 columns)         │
+│  ┌──────────────────┐ ┌──────────────────┐ │
+│  │ Cover image/     │ │                  │ │
+│  │ gradient         │ │                  │ │
+│  │ ────────────     │ │                  │ │
+│  │ Title            │ │                  │ │
+│  │ Status badge     │ │                  │ │
+│  │ Participants     │ │                  │ │
+│  │ Progress bar     │ │                  │ │
+│  └──────────────────┘ └──────────────────┘ │
+├─────────────────────────────────────────────┤
+│  Join by Code (expandable section)         │
+└─────────────────────────────────────────────┘
+```
+
+### 3.4 MarathonPage (Detail)
+```
+┌─────────────────────────────────────────────┐
+│  Hero Banner                               │
+│  ┌─────────────────────────────────────┐   │
+│  │ Background gradient + pattern       │   │
+│  │ Marathon Title (large)              │   │
+│  │ Status | Dates | Participants       │   │
+│  │ [Play] [Leaderboard] [Settings]     │   │
+│  └─────────────────────────────────────┘   │
+├─────────────────────────────────────────────┤
+│  Event Banner (if active) - animated      │
+├────────────────────┬────────────────────────┤
+│  Main Content      │  Sidebar              │
+│  ┌──────────────┐  │  ┌──────────────────┐ │
+│  │ Your Stats   │  │  │ Activity Feed   │ │
+│  │ Points/Streak│  │  │ (scrollable)    │ │
+│  └──────────────┘  │  │                  │ │
+│  ┌──────────────┐  │  │                  │ │
+│  │ Quick Actions│  │  │                  │ │
+│  └──────────────┘  │  │                  │ │
+│  ┌──────────────┐  │  │                  │ │
+│  │ Games List   │  │  │                  │ │
+│  │ (collapsible)│  │  │                  │ │
+│  └──────────────┘  │  └──────────────────┘ │
+└────────────────────┴────────────────────────┘
+```
+
+### 3.5 PlayPage (Game Screen) - ГЛАВНАЯ СТРАНИЦА
+```
+┌─────────────────────────────────────────────┐
+│  Top Bar: Points | Streak | Event Timer    │
+├─────────────────────────────────────────────┤
+│  ┌─────────────────────────────────────┐   │
+│  │         SPIN WHEEL                  │   │
+│  │    (redesigned, neon style)         │   │
+│  │         ┌─────────┐                 │   │
+│  │         │  WHEEL  │                 │   │
+│  │         │         │                 │   │
+│  │         └─────────┘                 │   │
+│  │         [SPIN BUTTON]               │   │
+│  └─────────────────────────────────────┘   │
+├─────────────────────────────────────────────┤
+│  Active Challenge Card (если есть)         │
+│  ┌─────────────────────────────────────┐   │
+│  │ Game: [Title] | Difficulty: [★★★]  │   │
+│  │ ─────────────────────────────────── │   │
+│  │ Challenge Title                     │   │
+│  │ Description...                      │   │
+│  │ ─────────────────────────────────── │   │
+│  │ Points: 100 | Time: ~2h             │   │
+│  │ ─────────────────────────────────── │   │
+│  │ Proof Upload Area                   │   │
+│  │ [File] [URL] [Comment]              │   │
+│  │ ─────────────────────────────────── │   │
+│  │ [Complete ✓] [Skip ✗]              │   │
+│  └─────────────────────────────────────┘   │
+├─────────────────────────────────────────────┤
+│  Mini Leaderboard (top 3 + you)            │
+└─────────────────────────────────────────────┘
+```
+
+### 3.6 LeaderboardPage
+- [ ] Animated podium для top 3
+- [ ] Table с hover эффектами
+- [ ] Highlight для текущего пользователя
+- [ ] Streak fire animation
+- [ ] Sorting/filtering
+
+### 3.7 ProfilePage
+```
+┌─────────────────────────────────────────────┐
+│  Profile Header                            │
+│  ┌─────────────────────────────────────┐   │
+│  │ Avatar (large, glow border)         │   │
+│  │ Nickname [Edit]                     │   │
+│  │ Member since: Date                  │   │
+│  └─────────────────────────────────────┘   │
+├─────────────────────────────────────────────┤
+│  Stats Cards (animated counters)           │
+│  [Marathons] [Wins] [Challenges] [Points]  │
+├─────────────────────────────────────────────┤
+│  Achievements Section (future)             │
+├─────────────────────────────────────────────┤
+│  Telegram Connection Card                  │
+├─────────────────────────────────────────────┤
+│  Security Section (password change)        │
+└─────────────────────────────────────────────┘
+```
+
+### 3.8 LobbyPage
+- [ ] Step-by-step wizard UI
+- [ ] Game cards grid с preview
+- [ ] Challenge preview с difficulty badges
+- [ ] AI generation progress animation
+- [ ] Launch countdown
+
+---
+
+## Фаза 4: Специальные компоненты
+
+### 4.1 SpinWheel (полный редизайн)
+- [ ] 3D perspective эффект
+- [ ] Неоновые сегменты с названиями игр
+- [ ] Particle effects при кручении
+- [ ] Glow trail за указателем
+- [ ] Sound effects (optional)
+- [ ] Confetti при выигрыше
+
+### 4.2 EventBanner (переработка)
+- [ ] Pulsating glow border
+- [ ] Countdown timer с flip animation
+- [ ] Event-specific icons/colors
+- [ ] Dismiss animation
+
+### 4.3 ActivityFeed (переработка)
+- [ ] Timeline style
+- [ ] Avatar circles
+- [ ] Type-specific icons
+- [ ] Hover для деталей
+- [ ] New items animation (slide-in)
+
+### 4.4 Challenge Cards
+- [ ] Difficulty stars/badges
+- [ ] Progress indicator
+- [ ] Expandable details
+- [ ] Proof preview thumbnail
+
+---
+
+## Фаза 5: Анимации и эффекты
+
+### 5.1 Page Transitions
+- [ ] Framer Motion page transitions
+- [ ] Fade + slide between routes
+- [ ] Loading skeleton screens
+
+### 5.2 Micro-interactions
+- [ ] Button press effects
+- [ ] Input focus glow
+- [ ] Success checkmark animation
+- [ ] Error shake animation
+- [ ] Loading spinners (custom)
+
+### 5.3 Background Effects
+- [ ] Animated gradient mesh
+- [ ] Floating particles (optional)
+- [ ] Grid pattern overlay
+- [ ] Noise texture
+
+### 5.4 Special Effects
+- [ ] Glitch text на заголовках
+- [ ] Neon glow на важных элементах
+- [ ] Shimmer effect на loading
+- [ ] Confetti на achievements
+
+---
+
+## Фаза 6: Responsive и Polish
+
+### 6.1 Mobile Optimization
+- [ ] Touch-friendly targets
+- [ ] Swipe gestures
+- [ ] Bottom navigation (mobile)
+- [ ] Collapsible sections
+
+### 6.2 Accessibility
+- [ ] Keyboard navigation
+- [ ] Focus indicators
+- [ ] Screen reader support
+- [ ] Reduced motion option
+
+### 6.3 Performance
+- [ ] Lazy loading images
+- [ ] Code splitting
+- [ ] Animation optimization
+- [ ] Bundle size check
+
+---
+
+## Порядок реализации
+
+### Sprint 1: Фундамент (2-3 дня)
+1. Tailwind config + colors
+2. Global CSS + animations
+3. Base UI components (Button, Card, Input)
+4. GlitchText component
+5. Updated Layout/Header
+
+### Sprint 2: Core Pages (3-4 дня)
+1. HomePage с hero
+2. Login/Register
+3. MarathonsPage dashboard
+4. Profile page
+
+### Sprint 3: Game Flow (3-4 дня)
+1. MarathonPage detail
+2. SpinWheel redesign
+3. PlayPage
+4. LeaderboardPage
+
+### Sprint 4: Polish (2-3 дня)
+1. LobbyPage
+2. Event components
+3. Activity feed
+4. Animations & transitions
+
+### Sprint 5: Finalization (1-2 дня)
+1. Mobile testing
+2. Performance optimization
+3. Bug fixes
+4. Final polish
+
+---
+
+## Референсы для вдохновления
+
+- Cyberpunk 2077 UI
+- Discord dark theme
+- Valorant game UI
+- Steam profile pages
+- Twitch streaming UI
+- Epic Games Store
+
+---
+
+## Технические заметки
+
+**Framer Motion:** Использовать для page transitions и сложных анимаций
+**CSS:** Использовать для простых transitions и hover эффектов
+**Tailwind:** Основной инструмент для стилей
+**Custom Hooks:** useAnimation, useGlitch для переиспользования логики

frontend/src/components/ActivityFeed.tsx

@@ -2,13 +2,12 @@ import { useState, useEffect, useCallback, useRef, useImperativeHandle, forwardR
 import { useNavigate } from 'react-router-dom'
 import { feedApi } from '@/api'
 import type { Activity, ActivityType } from '@/types'
-import { Loader2, ChevronDown, Bell, ExternalLink, AlertTriangle } from 'lucide-react'
+import { Loader2, ChevronDown, Activity as ActivityIcon, ExternalLink, AlertTriangle, Sparkles, Zap } from 'lucide-react'
 import { UserAvatar } from '@/components/ui'
 import {
   formatRelativeTime,
   getActivityIcon,
   getActivityColor,
-  getActivityBgClass,
   isEventActivity,
   formatActivityMessage,
 } from '@/utils/activity'
@@ -100,52 +99,66 @@ export const ActivityFeed = forwardRef<ActivityFeedRef, ActivityFeedProps>(
 
     if (isLoading) {
       return (
-        <div className={`bg-gray-800/50 rounded-xl border border-gray-700/50 p-4 flex flex-col ${className}`}>
+        <div className={`glass rounded-2xl border border-dark-600 flex flex-col ${className}`}>
-          <div className="flex items-center gap-2 mb-4">
+          <div className="flex items-center gap-3 px-5 py-4 border-b border-dark-600">
-            <Bell className="w-5 h-5 text-primary-500" />
+            <div className="w-8 h-8 rounded-lg bg-neon-500/20 flex items-center justify-center">
-            <h3 className="font-medium text-white">Активность</h3>
+              <ActivityIcon className="w-4 h-4 text-neon-400" />
+            </div>
+            <h3 className="font-semibold text-white">Активность</h3>
           </div>
-          <div className="flex-1 flex items-center justify-center">
+          <div className="flex-1 flex items-center justify-center py-12">
-            <Loader2 className="w-6 h-6 animate-spin text-gray-500" />
+            <Loader2 className="w-8 h-8 animate-spin text-neon-500" />
           </div>
         </div>
       )
     }
 
     return (
-      <div className={`bg-gray-800/50 rounded-xl border border-gray-700/50 flex flex-col ${className}`}>
+      <div className={`glass rounded-2xl border border-dark-600 flex flex-col overflow-hidden ${className}`}>
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700/50 flex-shrink-0">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-dark-600 flex-shrink-0">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
-            <Bell className="w-5 h-5 text-primary-500" />
+            <div className="w-8 h-8 rounded-lg bg-neon-500/20 flex items-center justify-center">
-            <h3 className="font-medium text-white">Активность</h3>
+              <Zap className="w-4 h-4 text-neon-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-white">Активность</h3>
+              {total > 0 && (
+                <p className="text-xs text-gray-500">{total} событий</p>
+              )}
+            </div>
           </div>
-          {total > 0 && (
+          <div className="w-2 h-2 rounded-full bg-neon-500 animate-pulse" />
-            <span className="text-xs text-gray-500">{total}</span>
-          )}
         </div>
 
         {/* Activity list */}
         <div className="flex-1 overflow-y-auto min-h-0 custom-scrollbar">
           {activities.length === 0 ? (
-            <div className="px-4 py-8 text-center text-gray-500 text-sm">
+            <div className="px-5 py-12 text-center">
-              Пока нет активности
+              <div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-dark-700 flex items-center justify-center">
+                <Sparkles className="w-6 h-6 text-gray-600" />
+              </div>
+              <p className="text-gray-400 text-sm">Пока нет активности</p>
             </div>
           ) : (
-            <div className="divide-y divide-gray-700/30">
+            <div className="divide-y divide-dark-600/50">
-              {activities.map((activity) => (
+              {activities.map((activity, index) => (
-                <ActivityItem key={activity.id} activity={activity} />
+                <ActivityItem
+                  key={activity.id}
+                  activity={activity}
+                  isNew={index === 0}
+                />
               ))}
             </div>
           )}
 
           {/* Load more button */}
           {hasMore && (
-            <div className="p-3 border-t border-gray-700/30">
+            <div className="p-4 border-t border-dark-600/50">
               <button
                 onClick={handleLoadMore}
                 disabled={isLoadingMore}
-                className="w-full py-2 text-sm text-gray-400 hover:text-white transition-colors flex items-center justify-center gap-2"
+                className="w-full py-2.5 text-sm text-gray-400 hover:text-neon-400 transition-colors flex items-center justify-center gap-2 rounded-lg hover:bg-neon-500/5"
               >
                 {isLoadingMore ? (
                   <Loader2 className="w-4 h-4 animate-spin" />
@@ -168,13 +181,13 @@ ActivityFeed.displayName = 'ActivityFeed'
 
 interface ActivityItemProps {
   activity: Activity
+  isNew?: boolean
 }
 
-function ActivityItem({ activity }: ActivityItemProps) {
+function ActivityItem({ activity, isNew }: ActivityItemProps) {
   const navigate = useNavigate()
   const Icon = getActivityIcon(activity.type)
   const iconColor = getActivityColor(activity.type)
-  const bgClass = getActivityBgClass(activity.type)
   const isEvent = isEventActivity(activity.type)
   const { title, details, extra } = formatActivityMessage(activity)
 
@@ -187,21 +200,58 @@ function ActivityItem({ activity }: ActivityItemProps) {
     ? activityData.dispute_status
     : null
 
+  // Determine accent color based on activity type
+  const getAccentConfig = () => {
+    switch (activity.type) {
+      case 'spin':
+        return { border: 'border-l-accent-500', bg: 'bg-accent-500/5' }
+      case 'complete':
+        return { border: 'border-l-green-500', bg: 'bg-green-500/5' }
+      case 'drop':
+        return { border: 'border-l-red-500', bg: 'bg-red-500/5' }
+      case 'start_marathon':
+      case 'event_start':
+        return { border: 'border-l-yellow-500', bg: 'bg-yellow-500/5' }
+      case 'finish_marathon':
+      case 'event_end':
+        return { border: 'border-l-gray-500', bg: 'bg-gray-500/5' }
+      case 'swap':
+      case 'rematch':
+        return { border: 'border-l-neon-500', bg: 'bg-neon-500/5' }
+      default:
+        return { border: 'border-l-dark-600', bg: '' }
+    }
+  }
+
+  const accent = getAccentConfig()
+
   if (isEvent) {
     return (
-      <div className={`px-4 py-3 ${bgClass} border-l-2 ${activity.type === 'event_start' ? 'border-l-yellow-500' : 'border-l-gray-600'}`}>
+      <div className={`
-        <div className="flex items-center gap-2 mb-1">
+        px-5 py-4 border-l-2 transition-colors
-          <Icon className={`w-4 h-4 ${iconColor}`} />
+        ${accent.border} ${accent.bg}
-          <span className={`text-sm font-medium ${activity.type === 'event_start' ? 'text-yellow-400' : 'text-gray-400'}`}>
+        hover:bg-dark-700/30
+      `}>
+        <div className="flex items-center gap-2 mb-1.5">
+          <div className={`w-6 h-6 rounded-md flex items-center justify-center ${
+            activity.type === 'event_start' ? 'bg-yellow-500/20' : 'bg-gray-500/20'
+          }`}>
+            <Icon className={`w-3.5 h-3.5 ${iconColor}`} />
+          </div>
+          <span className={`text-sm font-semibold ${
+            activity.type === 'event_start' ? 'text-yellow-400' : 'text-gray-400'
+          }`}>
             {title}
           </span>
         </div>
         {details && (
-          <div className={`text-sm ${activity.type === 'event_start' ? 'text-yellow-200' : 'text-gray-500'}`}>
+          <div className={`text-sm ml-8 ${
+            activity.type === 'event_start' ? 'text-yellow-200/80' : 'text-gray-500'
+          }`}>
             {details}
           </div>
         )}
-        <div className="text-xs text-gray-500 mt-1">
+        <div className="text-xs text-gray-600 mt-2 ml-8">
           {formatRelativeTime(activity.created_at)}
         </div>
       </div>
@@ -209,39 +259,53 @@ function ActivityItem({ activity }: ActivityItemProps) {
   }
 
   return (
-    <div className={`px-4 py-3 hover:bg-gray-700/20 transition-colors ${bgClass}`}>
+    <div className={`
+      px-5 py-4 border-l-2 transition-all duration-200
+      ${accent.border} ${isNew ? accent.bg : ''}
+      hover:bg-dark-700/30 group
+    `}>
       <div className="flex items-start gap-3">
         {/* Avatar */}
-        <div className="flex-shrink-0">
+        <div className="flex-shrink-0 relative">
           <UserAvatar
             userId={activity.user.id}
             hasAvatar={!!activity.user.avatar_url}
             nickname={activity.user.nickname}
             size="sm"
           />
+          {/* Activity type badge */}
+          <div className={`
+            absolute -bottom-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center
+            border-2 border-dark-800
+            ${activity.type === 'complete' ? 'bg-green-500' :
+              activity.type === 'drop' ? 'bg-red-500' :
+              activity.type === 'spin' ? 'bg-accent-500' :
+              'bg-neon-500'}
+          `}>
+            <Icon className="w-2.5 h-2.5 text-white" />
+          </div>
         </div>
 
         {/* Content */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-sm font-medium text-white truncate">
+            <span className="text-sm font-semibold text-white group-hover:text-neon-400 transition-colors">
               {activity.user.nickname}
             </span>
-            <span className="text-xs text-gray-500">
+            <span className="text-xs text-gray-600">
               {formatRelativeTime(activity.created_at)}
             </span>
           </div>
-          <div className="flex items-center gap-1.5 mt-0.5">
+          <div className="flex items-center gap-1.5 mt-1">
-            <Icon className={`w-3.5 h-3.5 flex-shrink-0 ${iconColor}`} />
             <span className="text-sm text-gray-300">{title}</span>
           </div>
           {details && (
-            <div className="text-sm text-gray-400 mt-1">
+            <div className="text-sm text-gray-500 mt-1">
               {details}
             </div>
           )}
           {extra && (
-            <div className="text-xs text-gray-500 mt-0.5">
+            <div className="text-xs text-gray-600 mt-1">
               {extra}
             </div>
           )}
@@ -250,19 +314,19 @@ function ActivityItem({ activity }: ActivityItemProps) {
             <div className="flex items-center gap-3 mt-2">
               <button
                 onClick={() => navigate(`/assignments/${assignmentId}`)}
-                className="text-xs text-primary-400 hover:text-primary-300 flex items-center gap-1"
+                className="text-xs text-neon-400 hover:text-neon-300 flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-neon-500/10 transition-colors"
               >
                 <ExternalLink className="w-3 h-3" />
                 Детали
               </button>
               {disputeStatus === 'open' && (
-                <span className="text-xs text-orange-400 flex items-center gap-1">
+                <span className="text-xs text-orange-400 flex items-center gap-1.5 px-2 py-1 rounded-md bg-orange-500/10">
                   <AlertTriangle className="w-3 h-3" />
                   Оспаривается
                 </span>
               )}
               {disputeStatus === 'valid' && (
-                <span className="text-xs text-red-400 flex items-center gap-1">
+                <span className="text-xs text-red-400 flex items-center gap-1.5 px-2 py-1 rounded-md bg-red-500/10">
                   <AlertTriangle className="w-3 h-3" />
                   Отклонено
                 </span>

frontend/src/components/EventBanner.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Clock } from 'lucide-react'
+import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Clock, Sparkles } from 'lucide-react'
 import type { ActiveEvent, EventType } from '@/types'
 import { EVENT_INFO } from '@/types'
 
@@ -17,13 +17,55 @@ const EVENT_ICONS: Record<EventType, React.ReactNode> = {
   game_choice: <Gamepad2 className="w-5 h-5" />,
 }
 
-const EVENT_COLORS: Record<EventType, string> = {
+const EVENT_COLORS: Record<EventType, {
-  golden_hour: 'from-yellow-500/20 to-yellow-600/20 border-yellow-500/50 text-yellow-400',
+  gradient: string
-  common_enemy: 'from-red-500/20 to-red-600/20 border-red-500/50 text-red-400',
+  border: string
-  double_risk: 'from-purple-500/20 to-purple-600/20 border-purple-500/50 text-purple-400',
+  text: string
-  jackpot: 'from-green-500/20 to-green-600/20 border-green-500/50 text-green-400',
+  glow: string
-  swap: 'from-blue-500/20 to-blue-600/20 border-blue-500/50 text-blue-400',
+  iconBg: string
-  game_choice: 'from-orange-500/20 to-orange-600/20 border-orange-500/50 text-orange-400',
+}> = {
+  golden_hour: {
+    gradient: 'from-yellow-500/20 via-yellow-500/10 to-transparent',
+    border: 'border-yellow-500/50',
+    text: 'text-yellow-400',
+    glow: 'shadow-[0_0_30px_rgba(234,179,8,0.3)]',
+    iconBg: 'bg-yellow-500/20',
+  },
+  common_enemy: {
+    gradient: 'from-red-500/20 via-red-500/10 to-transparent',
+    border: 'border-red-500/50',
+    text: 'text-red-400',
+    glow: 'shadow-[0_0_30px_rgba(239,68,68,0.3)]',
+    iconBg: 'bg-red-500/20',
+  },
+  double_risk: {
+    gradient: 'from-purple-500/20 via-purple-500/10 to-transparent',
+    border: 'border-purple-500/50',
+    text: 'text-purple-400',
+    glow: 'shadow-[0_0_30px_rgba(168,85,247,0.3)]',
+    iconBg: 'bg-purple-500/20',
+  },
+  jackpot: {
+    gradient: 'from-green-500/20 via-green-500/10 to-transparent',
+    border: 'border-green-500/50',
+    text: 'text-green-400',
+    glow: 'shadow-[0_0_30px_rgba(34,197,94,0.3)]',
+    iconBg: 'bg-green-500/20',
+  },
+  swap: {
+    gradient: 'from-neon-500/20 via-neon-500/10 to-transparent',
+    border: 'border-neon-500/50',
+    text: 'text-neon-400',
+    glow: 'shadow-[0_0_30px_rgba(0,240,255,0.3)]',
+    iconBg: 'bg-neon-500/20',
+  },
+  game_choice: {
+    gradient: 'from-orange-500/20 via-orange-500/10 to-transparent',
+    border: 'border-orange-500/50',
+    text: 'text-orange-400',
+    glow: 'shadow-[0_0_30px_rgba(249,115,22,0.3)]',
+    iconBg: 'bg-orange-500/20',
+  },
 }
 
 function formatTime(seconds: number): string {
@@ -68,42 +110,53 @@ export function EventBanner({ activeEvent, onRefresh }: EventBannerProps) {
   const event = activeEvent.event
   const info = EVENT_INFO[event.type]
   const icon = EVENT_ICONS[event.type]
-  const colorClass = EVENT_COLORS[event.type]
+  const colors = EVENT_COLORS[event.type]
 
   return (
     <div
       className={`
-        relative overflow-hidden rounded-xl border p-4
+        relative overflow-hidden rounded-2xl border p-5
-        bg-gradient-to-r ${colorClass}
+        glass ${colors.border} ${colors.glow}
         animate-pulse-slow
       `}
     >
-      {/* Animated background effect */}
+      {/* Background gradient */}
+      <div className={`absolute inset-0 bg-gradient-to-r ${colors.gradient}`} />
+
+      {/* Animated shimmer effect */}
       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full animate-shimmer" />
 
-      <div className="relative flex items-center justify-between">
+      {/* Grid pattern */}
-        <div className="flex items-center gap-3">
+      <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:20px_20px]" />
-          <div className="p-2 rounded-lg bg-white/10">
+
+      <div className="relative flex items-center justify-between gap-4 flex-wrap">
+        <div className="flex items-center gap-4">
+          <div className={`p-3 rounded-xl ${colors.iconBg} ${colors.text}`}>
             {icon}
           </div>
           <div>
-            <h3 className="font-bold text-lg">{info.name}</h3>
+            <div className="flex items-center gap-2 mb-1">
-            <p className="text-sm opacity-80">{info.description}</p>
+              <h3 className={`font-bold text-lg ${colors.text}`}>{info.name}</h3>
+              <Sparkles className={`w-4 h-4 ${colors.text} animate-pulse`} />
+            </div>
+            <p className="text-sm text-gray-400">{info.description}</p>
           </div>
         </div>
 
-        {timeRemaining !== null && timeRemaining > 0 && (
+        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2 text-lg font-mono font-bold">
+          {activeEvent.effects.points_multiplier !== 1.0 && (
-            <Clock className="w-4 h-4" />
+            <div className={`px-4 py-2 rounded-xl ${colors.iconBg} font-bold ${colors.text} border ${colors.border}`}>
-            {formatTime(timeRemaining)}
+              x{activeEvent.effects.points_multiplier}
-          </div>
+            </div>
-        )}
+          )}
 
-        {activeEvent.effects.points_multiplier !== 1.0 && (
+          {timeRemaining !== null && timeRemaining > 0 && (
-          <div className="px-3 py-1 rounded-full bg-white/10 font-bold">
+            <div className={`flex items-center gap-2 px-4 py-2 rounded-xl bg-dark-700/50 border border-dark-600 font-mono font-bold ${colors.text}`}>
-            x{activeEvent.effects.points_multiplier}
+              <Clock className="w-4 h-4" />
-          </div>
+              {formatTime(timeRemaining)}
-        )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )

frontend/src/components/EventControl.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Play, Square } from 'lucide-react'
+import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Play, Square, Sparkles } from 'lucide-react'
-import { Button } from '@/components/ui'
+import { NeonButton } from '@/components/ui'
 import { eventsApi } from '@/api'
 import type { ActiveEvent, EventType, Challenge } from '@/types'
 import { EVENT_INFO } from '@/types'
@@ -24,12 +24,21 @@ const EVENT_TYPES: EventType[] = [
 ]
 
 const EVENT_ICONS: Record<EventType, React.ReactNode> = {
-  golden_hour: <Zap className="w-4 h-4" />,
+  golden_hour: <Zap className="w-5 h-5" />,
-  common_enemy: <Users className="w-4 h-4" />,
+  common_enemy: <Users className="w-5 h-5" />,
-  double_risk: <Shield className="w-4 h-4" />,
+  double_risk: <Shield className="w-5 h-5" />,
-  jackpot: <Gift className="w-4 h-4" />,
+  jackpot: <Gift className="w-5 h-5" />,
-  swap: <ArrowLeftRight className="w-4 h-4" />,
+  swap: <ArrowLeftRight className="w-5 h-5" />,
-  game_choice: <Gamepad2 className="w-4 h-4" />,
+  game_choice: <Gamepad2 className="w-5 h-5" />,
+}
+
+const EVENT_COLORS: Record<EventType, { selected: string; icon: string }> = {
+  golden_hour: { selected: 'border-yellow-500/50 bg-yellow-500/10', icon: 'text-yellow-400' },
+  common_enemy: { selected: 'border-red-500/50 bg-red-500/10', icon: 'text-red-400' },
+  double_risk: { selected: 'border-purple-500/50 bg-purple-500/10', icon: 'text-purple-400' },
+  jackpot: { selected: 'border-green-500/50 bg-green-500/10', icon: 'text-green-400' },
+  swap: { selected: 'border-neon-500/50 bg-neon-500/10', icon: 'text-neon-400' },
+  game_choice: { selected: 'border-orange-500/50 bg-orange-500/10', icon: 'text-orange-400' },
 }
 
 // Default durations for events (in minutes)
@@ -107,54 +116,81 @@ export function EventControl({
   }
 
   if (activeEvent.event) {
+    const colors = EVENT_COLORS[activeEvent.event.type]
     return (
-      <div className="p-4 bg-gray-800 rounded-xl">
+      <div className={`glass rounded-xl p-4 border ${colors.selected}`}>
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-4 flex-wrap">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
-            {EVENT_ICONS[activeEvent.event.type]}
+            <div className={`p-2 rounded-lg bg-white/10 ${colors.icon}`}>
-            <span className="font-medium">
+              {EVENT_ICONS[activeEvent.event.type]}
-              Активно: {EVENT_INFO[activeEvent.event.type].name}
+            </div>
-            </span>
+            <div>
+              <span className="font-semibold text-white">
+                {EVENT_INFO[activeEvent.event.type].name}
+              </span>
+              <span className="text-gray-400 text-sm ml-2">активно</span>
+            </div>
           </div>
-          <Button
+          <NeonButton
-            variant="danger"
+            variant="outline"
             size="sm"
             onClick={handleStop}
             isLoading={isStopping}
+            className="border-red-500/50 text-red-400 hover:bg-red-500/10"
+            icon={<Square className="w-4 h-4" />}
           >
-            <Square className="w-4 h-4 mr-1" />
             Остановить
-          </Button>
+          </NeonButton>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="p-4 bg-gray-800 rounded-xl space-y-4">
+    <div className="glass rounded-xl p-5 space-y-5">
-      <h3 className="font-bold text-white">Запустить событие</h3>
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
+          <Sparkles className="w-5 h-5 text-accent-400" />
+        </div>
+        <div>
+          <h3 className="font-semibold text-white">Запустить событие</h3>
+          <p className="text-sm text-gray-400">Выберите тип и настройте параметры</p>
+        </div>
+      </div>
 
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-        {EVENT_TYPES.map((type) => (
+        {EVENT_TYPES.map((type) => {
-          <button
+          const colors = EVENT_COLORS[type]
-            key={type}
+          const isSelected = selectedType === type
-            onClick={() => handleTypeChange(type)}
+          return (
-            className={`
+            <button
-              p-3 rounded-lg border-2 transition-all text-left
+              key={type}
-              ${selectedType === type
+              onClick={() => handleTypeChange(type)}
-                ? 'border-primary-500 bg-primary-500/10'
+              className={`
-                : 'border-gray-700 hover:border-gray-600'}
+                relative p-4 rounded-xl border-2 transition-all duration-300 text-left
-            `}
+                ${isSelected
-          >
+                  ? `${colors.selected} shadow-lg`
-            <div className="flex items-center gap-2 mb-1">
+                  : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
-              {EVENT_ICONS[type]}
+                }
-              <span className="font-medium text-sm">{EVENT_INFO[type].name}</span>
+              `}
-            </div>
+            >
-            <p className="text-xs text-gray-400 line-clamp-2">
+              <div className={`flex items-center gap-2 mb-2 ${isSelected ? colors.icon : 'text-gray-400'}`}>
-              {EVENT_INFO[type].description}
+                {EVENT_ICONS[type]}
-            </p>
+                <span className={`font-semibold text-sm ${isSelected ? 'text-white' : 'text-gray-300'}`}>
-          </button>
+                  {EVENT_INFO[type].name}
-        ))}
+                </span>
+              </div>
+              <p className="text-xs text-gray-500 line-clamp-2">
+                {EVENT_INFO[type].description}
+              </p>
+              {isSelected && (
+                <div className="absolute top-2 right-2">
+                  <div className={`w-2 h-2 rounded-full ${colors.icon.replace('text-', 'bg-')} animate-pulse`} />
+                </div>
+              )}
+            </button>
+          )
+        })}
       </div>
 
       {/* Duration setting */}
@@ -170,9 +206,9 @@ export function EventControl({
             min={1}
             max={480}
             placeholder={`По умолчанию: ${DEFAULT_DURATIONS[selectedType]}`}
-            className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white"
+            className="input w-full"
           />
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-gray-500 mt-1.5">
             Оставьте пустым для значения по умолчанию ({DEFAULT_DURATIONS[selectedType]} мин)
           </p>
         </div>
@@ -186,7 +222,7 @@ export function EventControl({
           <select
             value={selectedChallengeId || ''}
             onChange={(e) => setSelectedChallengeId(e.target.value ? Number(e.target.value) : null)}
-            className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white"
+            className="input w-full"
           >
             <option value="">— Выберите челлендж —</option>
             {challenges.map((c) => (
@@ -198,15 +234,15 @@ export function EventControl({
         </div>
       )}
 
-      <Button
+      <NeonButton
         onClick={handleStart}
         isLoading={isStarting}
         disabled={selectedType === 'common_enemy' && !selectedChallengeId}
         className="w-full"
+        icon={<Play className="w-4 h-4" />}
       >
-        <Play className="w-4 h-4 mr-2" />
         Запустить {EVENT_INFO[selectedType].name}
-      </Button>
+      </NeonButton>
     </div>
   )
 }

frontend/src/components/SpinWheel.tsx

@@ -1,5 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import type { Game } from '@/types'
+import { Gamepad2, Loader2, Sparkles } from 'lucide-react'
+import { NeonButton } from './ui'
 
 interface SpinWheelProps {
   games: Game[]
@@ -82,8 +84,11 @@ export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheel
 
   if (games.length === 0) {
     return (
-      <div className="text-center py-12 text-gray-400">
+      <div className="glass rounded-2xl p-12 text-center">
-        Нет доступных игр для прокрутки
+        <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-700 flex items-center justify-center">
+          <Gamepad2 className="w-8 h-8 text-gray-600" />
+        </div>
+        <p className="text-gray-400">Нет доступных игр для прокрутки</p>
       </div>
     )
   }
@@ -91,119 +96,172 @@ export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheel
   const containerHeight = VISIBLE_ITEMS * ITEM_HEIGHT
   const currentIndex = Math.round(offset / ITEM_HEIGHT) % games.length
 
-  // Calculate opacity based on distance from center
+  // Calculate opacity and scale based on distance from center
-  const getItemOpacity = (itemIndex: number) => {
+  const getItemStyle = (itemIndex: number) => {
     const itemPosition = itemIndex * ITEM_HEIGHT - offset
     const centerPosition = containerHeight / 2 - ITEM_HEIGHT / 2
     const distanceFromCenter = Math.abs(itemPosition - centerPosition)
     const maxDistance = containerHeight / 2
-    const opacity = Math.max(0, 1 - (distanceFromCenter / maxDistance) * 0.8)
+    const normalizedDistance = distanceFromCenter / maxDistance
-    return opacity
+
+    const opacity = Math.max(0.15, 1 - normalizedDistance * 0.85)
+    const scale = Math.max(0.85, 1 - normalizedDistance * 0.15)
+
+    return { opacity, scale }
   }
 
   return (
     <div className="flex flex-col items-center gap-6">
       {/* Wheel container */}
-      <div className="relative w-full max-w-md">
+      <div className="relative w-full max-w-lg">
-        {/* Selection indicator */}
+        {/* Outer glow effect */}
-        <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-[100px] border-2 border-primary-500 rounded-lg bg-primary-500/10 z-20 pointer-events-none">
+        <div className={`absolute -inset-1 rounded-2xl transition-all duration-300 ${
-          <div className="absolute -left-3 top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent border-r-primary-500" />
+          isSpinning
-          <div className="absolute -right-3 top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-l-8 border-t-transparent border-b-transparent border-l-primary-500" />
+            ? 'bg-gradient-to-r from-neon-500 via-accent-500 to-neon-500 opacity-50 blur-xl animate-pulse'
-        </div>
+            : 'bg-gradient-to-r from-neon-500/20 to-accent-500/20 opacity-0'
+        }`} />
 
-        {/* Items container */}
+        {/* Main container with glass effect */}
-        <div
+        <div className="relative glass rounded-2xl border border-dark-600 overflow-hidden">
-          ref={containerRef}
+          {/* Selection indicator - center highlight */}
-          className="relative overflow-hidden"
+          <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-[100px] z-20 pointer-events-none">
-          style={{ height: containerHeight }}
+            {/* Neon border glow */}
-        >
+            <div className={`absolute inset-0 border-2 rounded-lg transition-all duration-300 ${
+              isSpinning
+                ? 'border-neon-400 shadow-[0_0_20px_rgba(0,240,255,0.5),inset_0_0_20px_rgba(0,240,255,0.1)]'
+                : 'border-neon-500/50 shadow-[0_0_10px_rgba(0,240,255,0.2)]'
+            }`} />
+
+            {/* Side arrows */}
+            <div className="absolute -left-1 top-1/2 -translate-y-1/2">
+              <div className={`w-3 h-6 transition-all duration-300 ${
+                isSpinning ? 'bg-neon-400' : 'bg-neon-500/70'
+              }`} style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 50%)' }} />
+            </div>
+            <div className="absolute -right-1 top-1/2 -translate-y-1/2">
+              <div className={`w-3 h-6 transition-all duration-300 ${
+                isSpinning ? 'bg-neon-400' : 'bg-neon-500/70'
+              }`} style={{ clipPath: 'polygon(0 0, 0 100%, 100% 50%)' }} />
+            </div>
+
+            {/* Inner glow */}
+            <div className={`absolute inset-0 rounded-lg transition-all duration-300 ${
+              isSpinning
+                ? 'bg-neon-500/10'
+                : 'bg-neon-500/5'
+            }`} />
+          </div>
+
+          {/* Top fade gradient */}
+          <div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-dark-800 via-dark-800/80 to-transparent z-10 pointer-events-none" />
+
+          {/* Bottom fade gradient */}
+          <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-dark-800 via-dark-800/80 to-transparent z-10 pointer-events-none" />
+
+          {/* Items container */}
           <div
-            className="absolute w-full transition-none"
+            ref={containerRef}
-            style={{
+            className="relative overflow-hidden"
-              transform: `translateY(${containerHeight / 2 - ITEM_HEIGHT / 2 - offset}px)`,
+            style={{ height: containerHeight }}
-            }}
           >
-            {extendedGames.map((game, index) => {
+            <div
-              const realIndex = index % games.length
+              className="absolute w-full"
-              const isSelected = !isSpinning && realIndex === currentIndex
+              style={{
-              const opacity = getItemOpacity(index)
+                transform: `translateY(${containerHeight / 2 - ITEM_HEIGHT / 2 - offset}px)`,
+              }}
+            >
+              {extendedGames.map((game, index) => {
+                const realIndex = index % games.length
+                const isSelected = !isSpinning && realIndex === currentIndex
+                const { opacity, scale } = getItemStyle(index)
 
-              return (
+                return (
-                <div
+                  <div
-                  key={`${game.id}-${index}`}
+                    key={`${game.id}-${index}`}
-                  className={`flex items-center gap-4 px-4 transition-transform duration-200 ${
+                    className="px-4 transition-transform duration-200"
-                    isSelected ? 'scale-105' : ''
+                    style={{
-                  }`}
+                      height: ITEM_HEIGHT,
-                  style={{ height: ITEM_HEIGHT, opacity }}
+                      opacity,
-                >
+                      transform: `scale(${scale})`,
-                  {/* Game cover */}
+                    }}
-                  <div className="w-16 h-16 rounded-lg overflow-hidden bg-gray-700 flex-shrink-0">
+                  >
-                    {game.cover_url ? (
+                    <div className={`
-                      <img
+                      flex items-center gap-4 h-full px-4 rounded-xl
-                        src={game.cover_url}
+                      transition-all duration-300
-                        alt={game.title}
+                      ${isSelected
-                        className="w-full h-full object-cover"
+                        ? 'bg-neon-500/10 border border-neon-500/30'
-                      />
+                        : 'bg-transparent border border-transparent'
-                    ) : (
+                      }
-                      <div className="w-full h-full flex items-center justify-center text-2xl">
+                    `}>
-                        🎮
+                      {/* Game cover */}
+                      <div className={`
+                        w-16 h-16 rounded-xl overflow-hidden flex-shrink-0
+                        border transition-all duration-300
+                        ${isSelected
+                          ? 'border-neon-500/50 shadow-[0_0_15px_rgba(0,240,255,0.3)]'
+                          : 'border-dark-600'
+                        }
+                      `}>
+                        {game.cover_url ? (
+                          <img
+                            src={game.cover_url}
+                            alt={game.title}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-full h-full bg-gradient-to-br from-dark-700 to-dark-800 flex items-center justify-center">
+                            <Gamepad2 className={`w-7 h-7 ${isSelected ? 'text-neon-400' : 'text-gray-600'}`} />
+                          </div>
+                        )}
                       </div>
-                    )}
-                  </div>
 
-                  {/* Game info */}
+                      {/* Game info */}
-                  <div className="flex-1 min-w-0">
+                      <div className="flex-1 min-w-0">
-                    <h3 className="font-bold text-white truncate text-lg">
+                        <h3 className={`
-                      {game.title}
+                          font-bold truncate text-lg transition-colors duration-300
-                    </h3>
+                          ${isSelected ? 'text-neon-400' : 'text-white'}
-                    {game.genre && (
+                        `}>
-                      <p className="text-sm text-gray-400 truncate">{game.genre}</p>
+                          {game.title}
-                    )}
+                        </h3>
+                        {game.genre && (
+                          <p className="text-sm text-gray-400 truncate">{game.genre}</p>
+                        )}
+                      </div>
+
+                      {/* Selected indicator */}
+                      {isSelected && (
+                        <div className="flex-shrink-0">
+                          <Sparkles className="w-5 h-5 text-neon-400 animate-pulse" />
+                        </div>
+                      )}
+                    </div>
                   </div>
-                </div>
+                )
-              )
+              })}
-            })}
+            </div>
           </div>
         </div>
+
+        {/* Spinning indicator lines */}
+        {isSpinning && (
+          <>
+            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-neon-500/50 to-transparent animate-pulse" />
+            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent animate-pulse" style={{ transform: 'translateY(-50px)' }} />
+            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent animate-pulse" style={{ transform: 'translateY(50px)' }} />
+          </>
+        )}
       </div>
 
       {/* Spin button */}
-      <button
+      <NeonButton
         onClick={handleSpin}
         disabled={isSpinning || disabled}
-        className={`
+        size="lg"
-          relative px-12 py-4 text-xl font-bold rounded-full
+        className="px-12 text-xl"
-          transition-all duration-300 transform
+        icon={isSpinning ? <Loader2 className="w-6 h-6 animate-spin" /> : <Sparkles className="w-6 h-6" />}
-          ${isSpinning || disabled
-            ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
-            : 'bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:scale-105 hover:shadow-lg hover:shadow-primary-500/30 active:scale-95'
-          }
-        `}
       >
-        {isSpinning ? (
+        {isSpinning ? 'Крутится...' : 'КРУТИТЬ!'}
-          <span className="flex items-center gap-2">
+      </NeonButton>
-            <svg className="animate-spin w-6 h-6" viewBox="0 0 24 24">
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-                fill="none"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-            Крутится...
-          </span>
-        ) : (
-          'КРУТИТЬ!'
-        )}
-      </button>
     </div>
   )
 }

frontend/src/components/layout/Layout.tsx

@@ -1,42 +1,88 @@
-import { Outlet, Link, useNavigate } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+import { Outlet, Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/auth'
-import { Gamepad2, LogOut, Trophy, User } from 'lucide-react'
+import { Gamepad2, LogOut, Trophy, User, Menu, X } from 'lucide-react'
 import { TelegramLink } from '@/components/TelegramLink'
+import { clsx } from 'clsx'
 
 export function Layout() {
   const { user, isAuthenticated, logout } = useAuthStore()
   const navigate = useNavigate()
+  const location = useLocation()
+  const [isScrolled, setIsScrolled] = useState(false)
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setIsMobileMenuOpen(false)
+  }, [location])
 
   const handleLogout = () => {
     logout()
     navigate('/login')
   }
 
+  const isActiveLink = (path: string) => location.pathname === path
+
   return (
     <div className="min-h-screen flex flex-col">
       {/* Header */}
-      <header className="bg-gray-800 border-b border-gray-700">
+      <header
+        className={clsx(
+          'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
+          isScrolled
+            ? 'bg-dark-900/80 backdrop-blur-lg border-b border-dark-600/50 shadow-lg'
+            : 'bg-transparent'
+        )}
+      >
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
-          <Link to="/" className="flex items-center gap-2 text-xl font-bold text-white">
+          {/* Logo */}
-            <Gamepad2 className="w-8 h-8 text-primary-500" />
+          <Link
-            <span>Игровой Марафон</span>
+            to="/"
+            className="flex items-center gap-3 group"
+          >
+            <div className="relative">
+              <Gamepad2 className="w-8 h-8 text-neon-500 transition-all duration-300 group-hover:text-neon-400 group-hover:drop-shadow-[0_0_8px_rgba(0,240,255,0.8)]" />
+            </div>
+            <span className="text-xl font-bold text-white font-display tracking-wider glitch-hover">
+              МАРАФОН
+            </span>
           </Link>
 
-          <nav className="flex items-center gap-4">
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-6">
             {isAuthenticated ? (
               <>
                 <Link
                   to="/marathons"
-                  className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors"
+                  className={clsx(
+                    'flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200',
+                    isActiveLink('/marathons')
+                      ? 'text-neon-400 bg-neon-500/10'
+                      : 'text-gray-300 hover:text-white hover:bg-dark-700'
+                  )}
                 >
                   <Trophy className="w-5 h-5" />
                   <span>Марафоны</span>
                 </Link>
 
-                <div className="flex items-center gap-3 ml-4 pl-4 border-l border-gray-700">
+                <div className="flex items-center gap-3 ml-2 pl-4 border-l border-dark-600">
                   <Link
                     to="/profile"
-                    className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors"
+                    className={clsx(
+                      'flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200',
+                      isActiveLink('/profile')
+                        ? 'text-neon-400 bg-neon-500/10'
+                        : 'text-gray-300 hover:text-white hover:bg-dark-700'
+                    )}
                   >
                     <User className="w-5 h-5" />
                     <span>{user?.nickname}</span>
@@ -46,7 +92,7 @@ export function Layout() {
 
                   <button
                     onClick={handleLogout}
-                    className="p-2 text-gray-400 hover:text-white transition-colors"
+                    className="p-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-200"
                     title="Выйти"
                   >
                     <LogOut className="w-5 h-5" />
@@ -55,27 +101,114 @@ export function Layout() {
               </>
             ) : (
               <>
-                <Link to="/login" className="text-gray-300 hover:text-white transition-colors">
+                <Link
+                  to="/login"
+                  className="text-gray-300 hover:text-white transition-colors px-4 py-2"
+                >
                   Войти
                 </Link>
-                <Link to="/register" className="btn btn-primary">
+                <Link
+                  to="/register"
+                  className="px-4 py-2 bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold rounded-lg transition-all duration-200 shadow-[0_0_15px_rgba(0,240,255,0.3)] hover:shadow-[0_0_25px_rgba(0,240,255,0.5)]"
+                >
                   Регистрация
                 </Link>
               </>
             )}
           </nav>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="md:hidden p-2 text-gray-300 hover:text-white rounded-lg hover:bg-dark-700 transition-colors"
+          >
+            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
         </div>
+
+        {/* Mobile Menu */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden bg-dark-800/95 backdrop-blur-lg border-t border-dark-600 animate-slide-in-down">
+            <div className="container mx-auto px-4 py-4 space-y-2">
+              {isAuthenticated ? (
+                <>
+                  <Link
+                    to="/marathons"
+                    className={clsx(
+                      'flex items-center gap-3 px-4 py-3 rounded-lg transition-all',
+                      isActiveLink('/marathons')
+                        ? 'text-neon-400 bg-neon-500/10'
+                        : 'text-gray-300 hover:text-white hover:bg-dark-700'
+                    )}
+                  >
+                    <Trophy className="w-5 h-5" />
+                    <span>Марафоны</span>
+                  </Link>
+                  <Link
+                    to="/profile"
+                    className={clsx(
+                      'flex items-center gap-3 px-4 py-3 rounded-lg transition-all',
+                      isActiveLink('/profile')
+                        ? 'text-neon-400 bg-neon-500/10'
+                        : 'text-gray-300 hover:text-white hover:bg-dark-700'
+                    )}
+                  >
+                    <User className="w-5 h-5" />
+                    <span>{user?.nickname}</span>
+                  </Link>
+                  <div className="pt-2 border-t border-dark-600">
+                    <button
+                      onClick={handleLogout}
+                      className="flex items-center gap-3 w-full px-4 py-3 text-red-400 hover:bg-red-500/10 rounded-lg transition-all"
+                    >
+                      <LogOut className="w-5 h-5" />
+                      <span>Выйти</span>
+                    </button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <Link
+                    to="/login"
+                    className="block px-4 py-3 text-gray-300 hover:text-white hover:bg-dark-700 rounded-lg transition-all"
+                  >
+                    Войти
+                  </Link>
+                  <Link
+                    to="/register"
+                    className="block px-4 py-3 text-center bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold rounded-lg transition-all"
+                  >
+                    Регистрация
+                  </Link>
+                </>
+              )}
+            </div>
+          </div>
+        )}
       </header>
 
+      {/* Spacer for fixed header */}
+      <div className="h-[72px]" />
+
       {/* Main content */}
       <main className="flex-1 container mx-auto px-4 py-8">
         <Outlet />
       </main>
 
       {/* Footer */}
-      <footer className="bg-gray-800 border-t border-gray-700 py-4">
+      <footer className="bg-dark-800/50 border-t border-dark-600/50 py-6">
-        <div className="container mx-auto px-4 text-center text-gray-500 text-sm">
+        <div className="container mx-auto px-4">
-          Игровой Марафон &copy; {new Date().getFullYear()}
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-2 text-gray-500">
+              <Gamepad2 className="w-5 h-5 text-neon-500/50" />
+              <span className="text-sm">
+                Игровой Марафон &copy; {new Date().getFullYear()}
+              </span>
+            </div>
+            <div className="flex items-center gap-4 text-sm text-gray-500">
+              <span className="text-neon-500/50">v1.0</span>
+            </div>
+          </div>
         </div>
       </footer>
     </div>

frontend/src/components/ui/Button.tsx

@@ -15,13 +15,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={disabled || isLoading}
         className={clsx(
-          'inline-flex items-center justify-center font-medium rounded-lg transition-colors',
+          'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {
-            'bg-primary-600 hover:bg-primary-700 text-white': variant === 'primary',
+            'bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold shadow-[0_0_10px_rgba(0,240,255,0.3)] hover:shadow-[0_0_20px_rgba(0,240,255,0.5)]': variant === 'primary',
-            'bg-gray-700 hover:bg-gray-600 text-white': variant === 'secondary',
+            'bg-dark-600 hover:bg-dark-500 text-white border border-dark-500': variant === 'secondary',
             'bg-red-600 hover:bg-red-700 text-white': variant === 'danger',
-            'bg-transparent hover:bg-gray-800 text-gray-300': variant === 'ghost',
+            'bg-transparent hover:bg-dark-700 text-gray-300 hover:text-white': variant === 'ghost',
             'px-3 py-1.5 text-sm': size === 'sm',
             'px-4 py-2 text-base': size === 'md',
             'px-6 py-3 text-lg': size === 'lg',

frontend/src/components/ui/Card.tsx

@@ -4,11 +4,18 @@ import { clsx } from 'clsx'
 interface CardProps {
   children: ReactNode
   className?: string
+  hover?: boolean
 }
 
-export function Card({ children, className }: CardProps) {
+export function Card({ children, className, hover = false }: CardProps) {
   return (
-    <div className={clsx('bg-gray-800 rounded-xl p-6 shadow-lg', className)}>
+    <div
+      className={clsx(
+        'bg-dark-800 rounded-xl p-6 border border-dark-600',
+        hover && 'transition-all duration-300 hover:-translate-y-1 hover:border-neon-500/30 hover:shadow-[0_10px_40px_rgba(0,240,255,0.1)]',
+        className
+      )}
+    >
       {children}
     </div>
   )

frontend/src/components/ui/GlassCard.tsx

@@ -0,0 +1,211 @@
+import { type ReactNode, type HTMLAttributes } from 'react'
+import { clsx } from 'clsx'
+
+interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  variant?: 'default' | 'dark' | 'neon' | 'gradient'
+  hover?: boolean
+  glow?: boolean
+  className?: string
+}
+
+export function GlassCard({
+  children,
+  variant = 'default',
+  hover = false,
+  glow = false,
+  className,
+  ...props
+}: GlassCardProps) {
+  const variantClasses = {
+    default: 'glass',
+    dark: 'glass-dark',
+    neon: 'glass-neon',
+    gradient: 'gradient-border',
+  }
+
+  return (
+    <div
+      className={clsx(
+        'rounded-xl p-6',
+        variantClasses[variant],
+        hover && 'card-hover cursor-pointer',
+        glow && 'neon-glow-pulse',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Stats card variant
+interface StatsCardProps {
+  label: string
+  value: string | number
+  icon?: ReactNode
+  trend?: {
+    value: number
+    isPositive: boolean
+  }
+  color?: 'neon' | 'purple' | 'pink' | 'default'
+  className?: string
+}
+
+export function StatsCard({
+  label,
+  value,
+  icon,
+  trend,
+  color = 'default',
+  className,
+}: StatsCardProps) {
+  const colorClasses = {
+    neon: 'border-neon-500/30 hover:border-neon-500/50',
+    purple: 'border-accent-500/30 hover:border-accent-500/50',
+    pink: 'border-pink-500/30 hover:border-pink-500/50',
+    default: 'border-dark-600 hover:border-dark-500',
+  }
+
+  const iconColorClasses = {
+    neon: 'text-neon-500 bg-neon-500/10',
+    purple: 'text-accent-500 bg-accent-500/10',
+    pink: 'text-pink-500 bg-pink-500/10',
+    default: 'text-gray-400 bg-dark-700',
+  }
+
+  const valueColorClasses = {
+    neon: 'text-neon-400',
+    purple: 'text-accent-400',
+    pink: 'text-pink-400',
+    default: 'text-white',
+  }
+
+  return (
+    <div
+      className={clsx(
+        'glass rounded-xl p-4 border transition-all duration-300',
+        colorClasses[color],
+        'hover:-translate-y-0.5',
+        className
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm text-gray-400 mb-1">{label}</p>
+          <p className={clsx('text-2xl font-bold', valueColorClasses[color])}>
+            {value}
+          </p>
+          {trend && (
+            <p
+              className={clsx(
+                'text-xs mt-1',
+                trend.isPositive ? 'text-green-400' : 'text-red-400'
+              )}
+            >
+              {trend.isPositive ? '+' : ''}{trend.value}%
+            </p>
+          )}
+        </div>
+        {icon && (
+          <div
+            className={clsx(
+              'w-12 h-12 rounded-lg flex items-center justify-center',
+              iconColorClasses[color]
+            )}
+          >
+            {icon}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Feature card variant
+interface FeatureCardProps {
+  title: string
+  description: string
+  icon: ReactNode
+  color?: 'neon' | 'purple' | 'pink'
+  className?: string
+}
+
+export function FeatureCard({
+  title,
+  description,
+  icon,
+  color = 'neon',
+  className,
+}: FeatureCardProps) {
+  const colorClasses = {
+    neon: {
+      icon: 'text-neon-500 bg-neon-500/10 group-hover:bg-neon-500/20',
+      border: 'group-hover:border-neon-500/50',
+      glow: 'group-hover:shadow-[0_0_30px_rgba(0,240,255,0.15)]',
+    },
+    purple: {
+      icon: 'text-accent-500 bg-accent-500/10 group-hover:bg-accent-500/20',
+      border: 'group-hover:border-accent-500/50',
+      glow: 'group-hover:shadow-[0_0_30px_rgba(168,85,247,0.15)]',
+    },
+    pink: {
+      icon: 'text-pink-500 bg-pink-500/10 group-hover:bg-pink-500/20',
+      border: 'group-hover:border-pink-500/50',
+      glow: 'group-hover:shadow-[0_0_30px_rgba(236,72,153,0.15)]',
+    },
+  }
+
+  const colors = colorClasses[color]
+
+  return (
+    <div
+      className={clsx(
+        'group glass rounded-xl p-6 border border-dark-600 transition-all duration-300',
+        'hover:-translate-y-1',
+        colors.border,
+        colors.glow,
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          'w-14 h-14 rounded-xl flex items-center justify-center mb-4 transition-colors',
+          colors.icon
+        )}
+      >
+        {icon}
+      </div>
+      <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
+      <p className="text-gray-400 text-sm">{description}</p>
+    </div>
+  )
+}
+
+// Interactive card with animated border
+interface AnimatedBorderCardProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  className?: string
+}
+
+export function AnimatedBorderCard({
+  children,
+  className,
+  ...props
+}: AnimatedBorderCardProps) {
+  return (
+    <div className={clsx('relative group', className)} {...props}>
+      {/* Animated gradient border */}
+      <div
+        className="absolute -inset-0.5 bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500 rounded-xl opacity-30 group-hover:opacity-60 blur transition-opacity duration-300"
+        style={{
+          backgroundSize: '200% 200%',
+          animation: 'gradient-flow 3s linear infinite',
+        }}
+      />
+      {/* Card content */}
+      <div className="relative glass-dark rounded-xl p-6">{children}</div>
+    </div>
+  )
+}

frontend/src/components/ui/GlitchText.tsx

@@ -0,0 +1,116 @@
+import { type ReactNode, type HTMLAttributes } from 'react'
+import { clsx } from 'clsx'
+
+interface GlitchTextProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode
+  as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p'
+  intensity?: 'low' | 'medium' | 'high'
+  color?: 'neon' | 'purple' | 'pink' | 'white'
+  hover?: boolean
+  className?: string
+}
+
+export function GlitchText({
+  children,
+  as: Component = 'span',
+  intensity = 'medium',
+  color = 'neon',
+  hover = false,
+  className,
+  ...props
+}: GlitchTextProps) {
+  const text = typeof children === 'string' ? children : ''
+
+  const colorClasses = {
+    neon: 'text-neon-500',
+    purple: 'text-accent-500',
+    pink: 'text-pink-500',
+    white: 'text-white',
+  }
+
+  const glowClasses = {
+    neon: 'neon-text',
+    purple: 'neon-text-purple',
+    pink: '[text-shadow:0_0_10px_#ec4899,0_0_20px_#ec4899,0_0_30px_#ec4899]',
+    white: '[text-shadow:0_0_10px_rgba(255,255,255,0.5),0_0_20px_rgba(255,255,255,0.3)]',
+  }
+
+  const intensityClasses = {
+    low: 'animate-[glitch-skew_2s_infinite_linear_alternate-reverse]',
+    medium: '',
+    high: 'animate-glitch',
+  }
+
+  if (hover) {
+    return (
+      <Component
+        className={clsx(
+          colorClasses[color],
+          'relative inline-block cursor-pointer transition-all duration-300',
+          'hover:' + glowClasses[color],
+          'glitch-hover',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Component>
+    )
+  }
+
+  return (
+    <Component
+      className={clsx(
+        'glitch relative inline-block',
+        colorClasses[color],
+        glowClasses[color],
+        intensityClasses[intensity],
+        className
+      )}
+      data-text={text}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
+
+// Simpler glitch effect for headings
+interface GlitchHeadingProps {
+  children: ReactNode
+  level?: 1 | 2 | 3 | 4
+  className?: string
+  gradient?: boolean
+}
+
+export function GlitchHeading({
+  children,
+  level = 1,
+  className,
+  gradient = false,
+}: GlitchHeadingProps) {
+  const text = typeof children === 'string' ? children : ''
+
+  const sizeClasses = {
+    1: 'text-4xl md:text-5xl lg:text-6xl font-bold',
+    2: 'text-3xl md:text-4xl font-bold',
+    3: 'text-2xl md:text-3xl font-semibold',
+    4: 'text-xl md:text-2xl font-semibold',
+  }
+
+  const Component = `h${level}` as keyof JSX.IntrinsicElements
+
+  return (
+    <Component
+      className={clsx(
+        'glitch relative inline-block',
+        sizeClasses[level],
+        gradient ? 'gradient-neon-text' : 'text-white neon-text',
+        className
+      )}
+      data-text={text}
+    >
+      {children}
+    </Component>
+  )
+}

frontend/src/components/ui/Input.tsx

@@ -11,7 +11,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="w-full">
         {label && (
-          <label htmlFor={id} className="block text-sm font-medium text-gray-300 mb-1">
+          <label htmlFor={id} className="block text-sm font-medium text-gray-300 mb-1.5">
             {label}
           </label>
         )}
@@ -19,15 +19,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           id={id}
           className={clsx(
-            'w-full px-4 py-2 bg-gray-800 border rounded-lg text-white placeholder-gray-500',
+            'w-full px-4 py-3 bg-dark-800 border rounded-lg text-white placeholder-gray-500',
-            'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
+            'focus:outline-none focus:border-neon-500',
-            'transition-colors',
+            'focus:shadow-[0_0_0_3px_rgba(0,240,255,0.1),0_0_10px_rgba(0,240,255,0.2)]',
-            error ? 'border-red-500' : 'border-gray-700',
+            'transition-all duration-200',
+            error ? 'border-red-500' : 'border-dark-600',
             className
           )}
           {...props}
         />
-        {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+        {error && <p className="mt-1.5 text-sm text-red-400">{error}</p>}
       </div>
     )
   }

frontend/src/components/ui/NeonButton.tsx

@@ -0,0 +1,166 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { Loader2 } from 'lucide-react'
+
+interface NeonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'neon' | 'purple' | 'pink'
+  isLoading?: boolean
+  icon?: ReactNode
+  iconPosition?: 'left' | 'right'
+  glow?: boolean
+  pulse?: boolean
+}
+
+export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
+  (
+    {
+      className,
+      variant = 'primary',
+      size = 'md',
+      color = 'neon',
+      isLoading,
+      icon,
+      iconPosition = 'left',
+      glow = true,
+      pulse = false,
+      children,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const colorMap = {
+      neon: {
+        primary: 'bg-neon-500 hover:bg-neon-400 text-dark-900',
+        secondary: 'bg-dark-600 hover:bg-dark-500 text-neon-400 border border-neon-500/30',
+        outline: 'bg-transparent border-2 border-neon-500 text-neon-500 hover:bg-neon-500 hover:text-dark-900',
+        ghost: 'bg-transparent hover:bg-neon-500/10 text-neon-400',
+        danger: 'bg-red-600 hover:bg-red-700 text-white',
+        glow: '0 0 20px rgba(0, 240, 255, 0.5)',
+        glowHover: '0 0 30px rgba(0, 240, 255, 0.7)',
+      },
+      purple: {
+        primary: 'bg-accent-500 hover:bg-accent-400 text-white',
+        secondary: 'bg-dark-600 hover:bg-dark-500 text-accent-400 border border-accent-500/30',
+        outline: 'bg-transparent border-2 border-accent-500 text-accent-500 hover:bg-accent-500 hover:text-white',
+        ghost: 'bg-transparent hover:bg-accent-500/10 text-accent-400',
+        danger: 'bg-red-600 hover:bg-red-700 text-white',
+        glow: '0 0 20px rgba(168, 85, 247, 0.5)',
+        glowHover: '0 0 30px rgba(168, 85, 247, 0.7)',
+      },
+      pink: {
+        primary: 'bg-pink-500 hover:bg-pink-400 text-white',
+        secondary: 'bg-dark-600 hover:bg-dark-500 text-pink-400 border border-pink-500/30',
+        outline: 'bg-transparent border-2 border-pink-500 text-pink-500 hover:bg-pink-500 hover:text-white',
+        ghost: 'bg-transparent hover:bg-pink-500/10 text-pink-400',
+        danger: 'bg-red-600 hover:bg-red-700 text-white',
+        glow: '0 0 20px rgba(236, 72, 153, 0.5)',
+        glowHover: '0 0 30px rgba(236, 72, 153, 0.7)',
+      },
+    }
+
+    const sizeClasses = {
+      sm: 'px-3 py-1.5 text-sm gap-1.5',
+      md: 'px-4 py-2.5 text-base gap-2',
+      lg: 'px-6 py-3 text-lg gap-2.5',
+    }
+
+    const iconSizes = {
+      sm: 'w-4 h-4',
+      md: 'w-5 h-5',
+      lg: 'w-6 h-6',
+    }
+
+    const colors = colorMap[color]
+
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || isLoading}
+        className={clsx(
+          'inline-flex items-center justify-center font-semibold rounded-lg',
+          'transition-all duration-300 ease-out',
+          'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none',
+          'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-900',
+          color === 'neon' && 'focus:ring-neon-500',
+          color === 'purple' && 'focus:ring-accent-500',
+          color === 'pink' && 'focus:ring-pink-500',
+          colors[variant],
+          sizeClasses[size],
+          pulse && 'neon-glow-pulse',
+          className
+        )}
+        style={{
+          boxShadow: glow && !disabled && variant !== 'ghost' ? colors.glow : undefined,
+        }}
+        onMouseEnter={(e) => {
+          if (glow && !disabled && variant !== 'ghost') {
+            e.currentTarget.style.boxShadow = colors.glowHover
+          }
+          props.onMouseEnter?.(e)
+        }}
+        onMouseLeave={(e) => {
+          if (glow && !disabled && variant !== 'ghost') {
+            e.currentTarget.style.boxShadow = colors.glow
+          }
+          props.onMouseLeave?.(e)
+        }}
+        {...props}
+      >
+        {isLoading && <Loader2 className={clsx(iconSizes[size], 'animate-spin')} />}
+        {!isLoading && icon && iconPosition === 'left' && (
+          <span className={iconSizes[size]}>{icon}</span>
+        )}
+        {children}
+        {!isLoading && icon && iconPosition === 'right' && (
+          <span className={iconSizes[size]}>{icon}</span>
+        )}
+      </button>
+    )
+  }
+)
+
+NeonButton.displayName = 'NeonButton'
+
+// Gradient button variant
+interface GradientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'sm' | 'md' | 'lg'
+  isLoading?: boolean
+  icon?: ReactNode
+}
+
+export const GradientButton = forwardRef<HTMLButtonElement, GradientButtonProps>(
+  ({ className, size = 'md', isLoading, icon, children, disabled, ...props }, ref) => {
+    const sizeClasses = {
+      sm: 'px-3 py-1.5 text-sm gap-1.5',
+      md: 'px-4 py-2.5 text-base gap-2',
+      lg: 'px-6 py-3 text-lg gap-2.5',
+    }
+
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || isLoading}
+        className={clsx(
+          'relative inline-flex items-center justify-center font-semibold rounded-lg',
+          'bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500',
+          'text-white transition-all duration-300',
+          'hover:shadow-[0_0_30px_rgba(168,85,247,0.5)]',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          'focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-dark-900',
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      >
+        {isLoading && <Loader2 className="w-5 h-5 animate-spin" />}
+        {!isLoading && icon && <span className="w-5 h-5">{icon}</span>}
+        {children}
+      </button>
+    )
+  }
+)
+
+GradientButton.displayName = 'GradientButton'

frontend/src/components/ui/index.ts

@@ -4,3 +4,8 @@ export { Card, CardHeader, CardTitle, CardContent } from './Card'
 export { ToastContainer } from './Toast'
 export { ConfirmModal } from './ConfirmModal'
 export { UserAvatar, clearAvatarCache } from './UserAvatar'
+
+// New design system components
+export { GlitchText, GlitchHeading } from './GlitchText'
+export { NeonButton, GradientButton } from './NeonButton'
+export { GlassCard, StatsCard, FeatureCard, AnimatedBorderCard } from './GlassCard'

frontend/src/index.css

@@ -2,11 +2,118 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
+/* ========================================
-  @apply bg-gray-900 text-gray-100 min-h-screen;
+   CSS Variables
+   ======================================== */
+:root {
+  /* Base colors */
+  --color-dark-950: #050508;
+  --color-dark-900: #0a0a0f;
+  --color-dark-800: #12121a;
+  --color-dark-700: #1a1a24;
+  --color-dark-600: #1e1e2e;
+  --color-dark-500: #2a2a3a;
+
+  /* Neon cyan (primary) */
+  --color-neon-500: #00f0ff;
+  --color-neon-400: #22d3ee;
+  --color-neon-600: #00d4e4;
+
+  /* Purple accent */
+  --color-accent-500: #a855f7;
+  --color-accent-600: #9333ea;
+  --color-accent-700: #7c3aed;
+
+  /* Pink highlight */
+  --color-pink-500: #ec4899;
+
+  /* Glow colors */
+  --glow-neon: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
+  --glow-neon-lg: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff;
+  --glow-purple: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 20px #a855f7;
+  --glow-pink: 0 0 5px #ec4899, 0 0 10px #ec4899, 0 0 20px #ec4899;
+
+  /* Text glow */
+  --text-glow-neon: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff;
+  --text-glow-purple: 0 0 10px #a855f7, 0 0 20px #a855f7, 0 0 30px #a855f7;
 }
 
-/* Custom scrollbar styles */
+/* ========================================
+   Base Styles
+   ======================================== */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply bg-dark-900 text-gray-100 min-h-screen antialiased;
+  font-family: 'Inter', system-ui, sans-serif;
+  background-image:
+    linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
+  background-size: 50px 50px;
+  background-attachment: fixed;
+}
+
+/* Noise overlay - can be added to any element */
+.noise-overlay::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.03;
+  pointer-events: none;
+  z-index: 9999;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+}
+
+/* ========================================
+   Selection Styles
+   ======================================== */
+::selection {
+  background: rgba(0, 240, 255, 0.3);
+  color: #fff;
+}
+
+::-moz-selection {
+  background: rgba(0, 240, 255, 0.3);
+  color: #fff;
+}
+
+/* ========================================
+   Custom Scrollbar (Neon Style)
+   ======================================== */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-dark-800);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, var(--color-neon-500), var(--color-accent-500));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, var(--color-neon-400), var(--color-accent-600));
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--color-dark-800);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neon-500) var(--color-dark-800);
+}
+
+/* Custom scrollbar class for specific elements */
 .custom-scrollbar::-webkit-scrollbar {
   width: 6px;
 }
@@ -16,46 +123,450 @@ body {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #4b5563;
+  background: var(--color-dark-500);
   border-radius: 3px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
+  background: var(--color-neon-500);
 }
 
-/* Firefox */
+/* ========================================
-.custom-scrollbar {
+   Glitch Effect
-  scrollbar-width: thin;
+   ======================================== */
-  scrollbar-color: #4b5563 transparent;
+.glitch {
+  position: relative;
+  animation: glitch-skew 1s infinite linear alternate-reverse;
 }
 
+.glitch::before,
+.glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.glitch::before {
+  left: 2px;
+  text-shadow: -2px 0 #ff00ff;
+  clip: rect(44px, 450px, 56px, 0);
+  animation: glitch-anim 5s infinite linear alternate-reverse;
+}
+
+.glitch::after {
+  left: -2px;
+  text-shadow: -2px 0 #00ffff, 2px 2px #ff00ff;
+  clip: rect(44px, 450px, 56px, 0);
+  animation: glitch-anim2 5s infinite linear alternate-reverse;
+}
+
+@keyframes glitch-anim {
+  0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.85deg); }
+  5% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.07deg); }
+  10% { clip: rect(29px, 9999px, 24px, 0); transform: skew(0.22deg); }
+  15% { clip: rect(69px, 9999px, 63px, 0); transform: skew(0.52deg); }
+  20% { clip: rect(13px, 9999px, 71px, 0); transform: skew(0.72deg); }
+  25% { clip: rect(39px, 9999px, 89px, 0); transform: skew(0.24deg); }
+  30% { clip: rect(87px, 9999px, 98px, 0); transform: skew(0.63deg); }
+  35% { clip: rect(63px, 9999px, 16px, 0); transform: skew(0.15deg); }
+  40% { clip: rect(92px, 9999px, 4px, 0); transform: skew(0.83deg); }
+  45% { clip: rect(67px, 9999px, 72px, 0); transform: skew(0.19deg); }
+  50% { clip: rect(43px, 9999px, 21px, 0); transform: skew(0.74deg); }
+  55% { clip: rect(75px, 9999px, 54px, 0); transform: skew(0.28deg); }
+  60% { clip: rect(17px, 9999px, 86px, 0); transform: skew(0.91deg); }
+  65% { clip: rect(51px, 9999px, 32px, 0); transform: skew(0.46deg); }
+  70% { clip: rect(29px, 9999px, 69px, 0); transform: skew(0.38deg); }
+  75% { clip: rect(84px, 9999px, 11px, 0); transform: skew(0.67deg); }
+  80% { clip: rect(38px, 9999px, 82px, 0); transform: skew(0.12deg); }
+  85% { clip: rect(61px, 9999px, 47px, 0); transform: skew(0.54deg); }
+  90% { clip: rect(22px, 9999px, 91px, 0); transform: skew(0.33deg); }
+  95% { clip: rect(79px, 9999px, 28px, 0); transform: skew(0.79deg); }
+  100% { clip: rect(56px, 9999px, 65px, 0); transform: skew(0.41deg); }
+}
+
+@keyframes glitch-anim2 {
+  0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.63deg); }
+  5% { clip: rect(52px, 9999px, 74px, 0); transform: skew(0.29deg); }
+  10% { clip: rect(79px, 9999px, 85px, 0); transform: skew(0.84deg); }
+  15% { clip: rect(43px, 9999px, 27px, 0); transform: skew(0.17deg); }
+  20% { clip: rect(16px, 9999px, 92px, 0); transform: skew(0.56deg); }
+  25% { clip: rect(88px, 9999px, 36px, 0); transform: skew(0.39deg); }
+  30% { clip: rect(32px, 9999px, 68px, 0); transform: skew(0.71deg); }
+  35% { clip: rect(71px, 9999px, 13px, 0); transform: skew(0.23deg); }
+  40% { clip: rect(24px, 9999px, 57px, 0); transform: skew(0.92deg); }
+  45% { clip: rect(83px, 9999px, 41px, 0); transform: skew(0.48deg); }
+  50% { clip: rect(19px, 9999px, 79px, 0); transform: skew(0.35deg); }
+  55% { clip: rect(67px, 9999px, 23px, 0); transform: skew(0.76deg); }
+  60% { clip: rect(45px, 9999px, 96px, 0); transform: skew(0.14deg); }
+  65% { clip: rect(91px, 9999px, 51px, 0); transform: skew(0.58deg); }
+  70% { clip: rect(28px, 9999px, 83px, 0); transform: skew(0.87deg); }
+  75% { clip: rect(76px, 9999px, 19px, 0); transform: skew(0.26deg); }
+  80% { clip: rect(53px, 9999px, 67px, 0); transform: skew(0.69deg); }
+  85% { clip: rect(14px, 9999px, 89px, 0); transform: skew(0.43deg); }
+  90% { clip: rect(62px, 9999px, 34px, 0); transform: skew(0.81deg); }
+  95% { clip: rect(37px, 9999px, 76px, 0); transform: skew(0.52deg); }
+  100% { clip: rect(86px, 9999px, 48px, 0); transform: skew(0.31deg); }
+}
+
+@keyframes glitch-skew {
+  0% { transform: skew(-2deg); }
+  10% { transform: skew(1deg); }
+  20% { transform: skew(-1deg); }
+  30% { transform: skew(0deg); }
+  40% { transform: skew(2deg); }
+  50% { transform: skew(-1deg); }
+  60% { transform: skew(1deg); }
+  70% { transform: skew(0deg); }
+  80% { transform: skew(-2deg); }
+  90% { transform: skew(1deg); }
+  100% { transform: skew(0deg); }
+}
+
+/* Simpler glitch for hover states */
+.glitch-hover:hover {
+  animation: glitch-simple 0.3s ease;
+}
+
+@keyframes glitch-simple {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(-2px, -2px); }
+  60% { transform: translate(2px, 2px); }
+  80% { transform: translate(2px, -2px); }
+}
+
+/* ========================================
+   Neon Glow Effects
+   ======================================== */
+.neon-glow {
+  box-shadow: var(--glow-neon);
+}
+
+.neon-glow-lg {
+  box-shadow: var(--glow-neon-lg);
+}
+
+.neon-glow-purple {
+  box-shadow: var(--glow-purple);
+}
+
+.neon-glow-pink {
+  box-shadow: var(--glow-pink);
+}
+
+.neon-text {
+  text-shadow: var(--text-glow-neon);
+}
+
+.neon-text-purple {
+  text-shadow: var(--text-glow-purple);
+}
+
+/* Animated glow */
+.neon-glow-pulse {
+  animation: neon-pulse 2s ease-in-out infinite;
+}
+
+@keyframes neon-pulse {
+  0%, 100% {
+    box-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
+  }
+  50% {
+    box-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff;
+  }
+}
+
+/* ========================================
+   Glass Effect (Glassmorphism)
+   ======================================== */
+.glass {
+  background: rgba(18, 18, 26, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-dark {
+  background: rgba(10, 10, 15, 0.8);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.glass-neon {
+  background: rgba(18, 18, 26, 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 240, 255, 0.2);
+  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.05);
+}
+
+/* ========================================
+   Gradient Utilities
+   ======================================== */
+.gradient-neon {
+  background: linear-gradient(135deg, #00f0ff, #a855f7);
+}
+
+.gradient-neon-text {
+  background: linear-gradient(135deg, #00f0ff, #a855f7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-pink-purple {
+  background: linear-gradient(135deg, #ec4899, #a855f7);
+}
+
+.gradient-dark {
+  background: linear-gradient(180deg, var(--color-dark-900), var(--color-dark-950));
+}
+
+/* Animated gradient border */
+.gradient-border {
+  position: relative;
+  background: var(--color-dark-800);
+  border-radius: 12px;
+}
+
+.gradient-border::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  background: linear-gradient(90deg, #00f0ff, #a855f7, #ec4899, #00f0ff);
+  background-size: 300% 300%;
+  border-radius: 14px;
+  z-index: -1;
+  animation: gradient-flow 3s linear infinite;
+}
+
+@keyframes gradient-flow {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* ========================================
+   Shimmer Effect
+   ======================================== */
+.shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.shimmer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  100% { left: 100%; }
+}
+
+/* ========================================
+   Component Layer
+   ======================================== */
 @layer components {
+  /* Buttons */
   .btn {
-    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-700 text-white;
+    @apply bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold;
+    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+  }
+
+  .btn-primary:hover {
+    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
   }
 
   .btn-secondary {
-    @apply bg-gray-700 hover:bg-gray-600 text-white;
+    @apply bg-dark-600 hover:bg-dark-500 text-white border border-dark-500;
   }
 
   .btn-danger {
     @apply bg-red-600 hover:bg-red-700 text-white;
   }
 
+  .btn-ghost {
+    @apply bg-transparent hover:bg-dark-700 text-gray-300 hover:text-white;
+  }
+
+  .btn-neon {
+    @apply relative bg-transparent border-2 border-neon-500 text-neon-500 font-semibold overflow-hidden;
+    transition: all 0.3s ease;
+  }
+
+  .btn-neon:hover {
+    @apply text-dark-900;
+    background: var(--color-neon-500);
+    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
+  }
+
+  /* Inputs */
   .input {
-    @apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+    @apply w-full px-4 py-3 bg-dark-800 border border-dark-600 rounded-lg text-white placeholder-gray-500 transition-all duration-200;
   }
 
+  .input:focus {
+    @apply outline-none border-neon-500;
+    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1), 0 0 10px rgba(0, 240, 255, 0.2);
+  }
+
+  /* Cards */
   .card {
-    @apply bg-gray-800 rounded-xl p-6 shadow-lg;
+    @apply bg-dark-800 rounded-xl p-6 border border-dark-600;
   }
 
+  .card-glass {
+    @apply rounded-xl p-6;
+    background: rgba(18, 18, 26, 0.7);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .card-hover {
+    @apply transition-all duration-300;
+  }
+
+  .card-hover:hover {
+    @apply -translate-y-1;
+    box-shadow: 0 10px 40px rgba(0, 240, 255, 0.1);
+    border-color: rgba(0, 240, 255, 0.3);
+  }
+
+  /* Links */
   .link {
-    @apply text-primary-400 hover:text-primary-300 transition-colors;
+    @apply text-neon-500 hover:text-neon-400 transition-colors;
+  }
+
+  /* Badges */
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .badge-neon {
+    @apply bg-neon-500/20 text-neon-400 border border-neon-500/30;
+  }
+
+  .badge-purple {
+    @apply bg-accent-500/20 text-accent-400 border border-accent-500/30;
+  }
+
+  .badge-pink {
+    @apply bg-pink-500/20 text-pink-400 border border-pink-500/30;
+  }
+
+  /* Dividers */
+  .divider {
+    @apply border-t border-dark-600;
+  }
+
+  .divider-glow {
+    @apply border-t border-neon-500/30;
+    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
+  }
+}
+
+/* ========================================
+   Utility Animations
+   ======================================== */
+.hover-lift {
+  @apply transition-transform duration-300;
+}
+
+.hover-lift:hover {
+  @apply -translate-y-1;
+}
+
+.hover-glow {
+  @apply transition-shadow duration-300;
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
+}
+
+.hover-border-glow {
+  @apply transition-all duration-300;
+}
+
+.hover-border-glow:hover {
+  border-color: rgba(0, 240, 255, 0.5);
+  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
+}
+
+/* Stagger children animations */
+.stagger-children > * {
+  @apply animate-slide-in-up;
+  animation-fill-mode: both;
+}
+
+.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
+.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
+.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
+.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
+.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
+.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
+.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
+
+/* ========================================
+   Skeleton Loading
+   ======================================== */
+.skeleton {
+  @apply relative overflow-hidden bg-dark-700 rounded;
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.05),
+    transparent
+  );
+  animation: skeleton-pulse 1.5s infinite;
+}
+
+@keyframes skeleton-pulse {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* ========================================
+   Focus States (Accessibility)
+   ======================================== */
+.focus-ring {
+  @apply focus:outline-none focus:ring-2 focus:ring-neon-500 focus:ring-offset-2 focus:ring-offset-dark-900;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }

frontend/src/pages/AssignmentDetailPage.tsx

@@ -2,13 +2,13 @@ import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { assignmentsApi } from '@/api'
 import type { AssignmentDetail } from '@/types'
-import { Card, CardContent, Button } from '@/components/ui'
+import { GlassCard, NeonButton } from '@/components/ui'
 import { useAuthStore } from '@/store/auth'
 import { useToast } from '@/store/toast'
 import {
   ArrowLeft, Loader2, ExternalLink, Image, MessageSquare,
   ThumbsUp, ThumbsDown, AlertTriangle, Clock, CheckCircle, XCircle,
-  Send, Flag
+  Send, Flag, Gamepad2, Zap, Trophy
 } from 'lucide-react'
 
 export function AssignmentDetailPage() {
@@ -142,373 +142,412 @@ export function AssignmentDetailPage() {
     return `${hours}ч ${minutes}м`
   }
 
-  const getStatusBadge = (status: string) => {
+  const getStatusConfig = (status: string) => {
     switch (status) {
       case 'completed':
-        return (
+        return {
-          <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
+          color: 'bg-green-500/20 text-green-400 border-green-500/30',
-            <CheckCircle className="w-4 h-4" /> Выполнено
+          icon: <CheckCircle className="w-4 h-4" />,
-          </span>
+          text: 'Выполнено',
-        )
+        }
       case 'dropped':
-        return (
+        return {
-          <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
+          color: 'bg-red-500/20 text-red-400 border-red-500/30',
-            <XCircle className="w-4 h-4" /> Пропущено
+          icon: <XCircle className="w-4 h-4" />,
-          </span>
+          text: 'Пропущено',
-        )
+        }
       case 'returned':
-        return (
+        return {
-          <span className="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-sm flex items-center gap-1">
+          color: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
-            <AlertTriangle className="w-4 h-4" /> Возвращено
+          icon: <AlertTriangle className="w-4 h-4" />,
-          </span>
+          text: 'Возвращено',
-        )
+        }
       default:
-        return (
+        return {
-          <span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm">
+          color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
-            Активно
+          icon: <Zap className="w-4 h-4" />,
-          </span>
+          text: 'Активно',
-        )
+        }
     }
   }
 
   if (isLoading) {
     return (
-      <div className="flex justify-center py-12">
+      <div className="flex flex-col items-center justify-center py-24">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка...</p>
       </div>
     )
   }
 
   if (error || !assignment) {
     return (
-      <div className="max-w-2xl mx-auto text-center py-12">
+      <div className="max-w-2xl mx-auto">
-        <p className="text-red-400 mb-4">{error || 'Задание не найдено'}</p>
+        <GlassCard className="text-center py-12">
-        <Button onClick={() => navigate(-1)}>Назад</Button>
+          <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-red-500/10 border border-red-500/30 flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-400" />
+          </div>
+          <p className="text-gray-400 mb-6">{error || 'Задание не найдено'}</p>
+          <NeonButton variant="outline" onClick={() => navigate(-1)}>
+            Назад
+          </NeonButton>
+        </GlassCard>
       </div>
     )
   }
 
   const dispute = assignment.dispute
+  const status = getStatusConfig(assignment.status)
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="max-w-2xl mx-auto space-y-6">
       {/* Header */}
-      <div className="flex items-center gap-4 mb-6">
+      <div className="flex items-center gap-4">
-        <button onClick={() => navigate(-1)} className="text-gray-400 hover:text-white">
+        <button
-          <ArrowLeft className="w-6 h-6" />
+          onClick={() => navigate(-1)}
+          className="w-10 h-10 rounded-xl bg-dark-700 border border-dark-600 flex items-center justify-center text-gray-400 hover:text-white hover:border-neon-500/30 transition-all"
+        >
+          <ArrowLeft className="w-5 h-5" />
         </button>
-        <h1 className="text-xl font-bold text-white">Детали выполнения</h1>
+        <div>
+          <h1 className="text-xl font-bold text-white">Детали выполнения</h1>
+          <p className="text-sm text-gray-400">Просмотр доказательства</p>
+        </div>
       </div>
 
       {/* Challenge info */}
-      <Card className="mb-6">
+      <GlassCard variant="neon">
-        <CardContent>
+        <div className="flex items-start justify-between mb-4">
-          <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-4">
+            <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/20 flex items-center justify-center">
+              <Gamepad2 className="w-7 h-7 text-neon-400" />
+            </div>
             <div>
               <p className="text-gray-400 text-sm">{assignment.challenge.game.title}</p>
               <h2 className="text-xl font-bold text-white">{assignment.challenge.title}</h2>
             </div>
-            {getStatusBadge(assignment.status)}
           </div>
+          <span className={`px-3 py-1.5 rounded-full text-sm font-medium border flex items-center gap-1.5 ${status.color}`}>
+            {status.icon}
+            {status.text}
+          </span>
+        </div>
 
-          <p className="text-gray-300 mb-4">{assignment.challenge.description}</p>
+        <p className="text-gray-300 mb-4">{assignment.challenge.description}</p>
 
-          <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex flex-wrap gap-2 mb-4">
-            <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">
+          <span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
-              +{assignment.challenge.points} очков
+            <Trophy className="w-4 h-4" />
+            +{assignment.challenge.points} очков
+          </span>
+          <span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600">
+            {assignment.challenge.difficulty}
+          </span>
+          {assignment.challenge.estimated_time && (
+            <span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600 flex items-center gap-1.5">
+              <Clock className="w-4 h-4" />
+              ~{assignment.challenge.estimated_time} мин
             </span>
-            <span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
+          )}
-              {assignment.challenge.difficulty}
+        </div>
-            </span>
-            {assignment.challenge.estimated_time && (
-              <span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
-                ~{assignment.challenge.estimated_time} мин
-              </span>
-            )}
-          </div>
 
-          <div className="text-sm text-gray-400 space-y-1">
+        <div className="pt-4 border-t border-dark-600 text-sm text-gray-400 space-y-1">
+          <p>
+            <span className="text-gray-500">Выполнил:</span>{' '}
+            <span className="text-white">{assignment.participant.nickname}</span>
+          </p>
+          {assignment.completed_at && (
             <p>
-              <strong>Выполнил:</strong> {assignment.participant.nickname}
+              <span className="text-gray-500">Дата:</span>{' '}
+              <span className="text-white">{formatDate(assignment.completed_at)}</span>
             </p>
-            {assignment.completed_at && (
+          )}
-              <p>
+          {assignment.points_earned > 0 && (
-                <strong>Дата:</strong> {formatDate(assignment.completed_at)}
+            <p>
-              </p>
+              <span className="text-gray-500">Получено очков:</span>{' '}
-            )}
+              <span className="text-neon-400 font-semibold">{assignment.points_earned}</span>
-            {assignment.points_earned > 0 && (
+            </p>
-              <p>
+          )}
-                <strong>Получено очков:</strong> {assignment.points_earned}
+        </div>
-              </p>
+      </GlassCard>
-            )}
-          </div>
-        </CardContent>
-      </Card>
 
       {/* Proof section */}
-      <Card className="mb-6">
+      <GlassCard>
-        <CardContent>
+        <div className="flex items-center gap-3 mb-4">
-          <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
+          <div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
-            <Image className="w-5 h-5" />
+            <Image className="w-5 h-5 text-accent-400" />
-            Доказательство
+          </div>
-          </h3>
+          <div>
+            <h3 className="font-semibold text-white">Доказательство</h3>
+            <p className="text-sm text-gray-400">Пруф выполнения задания</p>
+          </div>
+        </div>
 
-          {/* Proof media (image or video) */}
+        {/* Proof media (image or video) */}
-          {assignment.proof_image_url && (
+        {assignment.proof_image_url && (
-            <div className="mb-4">
+          <div className="mb-4 rounded-xl overflow-hidden border border-dark-600">
-              {proofMediaBlobUrl ? (
+            {proofMediaBlobUrl ? (
-                proofMediaType === 'video' ? (
+              proofMediaType === 'video' ? (
-                  <video
+                <video
-                    src={proofMediaBlobUrl}
+                  src={proofMediaBlobUrl}
-                    controls
+                  controls
-                    className="w-full rounded-lg max-h-96 bg-gray-900"
+                  className="w-full max-h-96 bg-dark-900"
-                    preload="metadata"
+                  preload="metadata"
-                  />
+                />
-                ) : (
-                  <img
-                    src={proofMediaBlobUrl}
-                    alt="Proof"
-                    className="w-full rounded-lg max-h-96 object-contain bg-gray-900"
-                  />
-                )
               ) : (
-                <div className="w-full h-48 bg-gray-900 rounded-lg flex items-center justify-center">
+                <img
-                  <Loader2 className="w-8 h-8 animate-spin text-gray-500" />
+                  src={proofMediaBlobUrl}
-                </div>
+                  alt="Proof"
-              )}
+                  className="w-full max-h-96 object-contain bg-dark-900"
-            </div>
+                />
-          )}
+              )
+            ) : (
+              <div className="w-full h-48 bg-dark-900 flex items-center justify-center">
+                <Loader2 className="w-8 h-8 animate-spin text-gray-500" />
+              </div>
+            )}
+          </div>
+        )}
 
-          {/* Proof URL */}
+        {/* Proof URL */}
-          {assignment.proof_url && (
+        {assignment.proof_url && (
-            <div className="mb-4">
+          <div className="mb-4">
-              <a
+            <a
-                href={assignment.proof_url}
+              href={assignment.proof_url}
-                target="_blank"
+              target="_blank"
-                rel="noopener noreferrer"
+              rel="noopener noreferrer"
-                className="flex items-center gap-2 text-primary-400 hover:text-primary-300"
+              className="flex items-center gap-2 text-neon-400 hover:text-neon-300 transition-colors"
-              >
+            >
-                <ExternalLink className="w-4 h-4" />
+              <ExternalLink className="w-4 h-4" />
-                {assignment.proof_url}
+              {assignment.proof_url}
-              </a>
+            </a>
-            </div>
+          </div>
-          )}
+        )}
 
-          {/* Proof comment */}
+        {/* Proof comment */}
-          {assignment.proof_comment && (
+        {assignment.proof_comment && (
-            <div className="p-3 bg-gray-900 rounded-lg">
+          <div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600">
-              <p className="text-sm text-gray-400 mb-1">Комментарий:</p>
+            <p className="text-sm text-gray-400 mb-1">Комментарий:</p>
-              <p className="text-white">{assignment.proof_comment}</p>
+            <p className="text-white">{assignment.proof_comment}</p>
-            </div>
+          </div>
-          )}
+        )}
 
-          {!assignment.proof_image_url && !assignment.proof_url && (
+        {!assignment.proof_image_url && !assignment.proof_url && (
-            <p className="text-gray-500 text-center py-4">Пруф не предоставлен</p>
+          <div className="text-center py-8">
-          )}
+            <div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-dark-700 flex items-center justify-center">
-        </CardContent>
+              <Image className="w-6 h-6 text-gray-600" />
-      </Card>
+            </div>
+            <p className="text-gray-500">Пруф не предоставлен</p>
+          </div>
+        )}
+      </GlassCard>
 
       {/* Dispute button */}
       {assignment.can_dispute && !dispute && !showDisputeForm && (
-        <Button
+        <NeonButton
-          variant="danger"
+          variant="outline"
-          className="w-full mb-6"
+          className="w-full border-red-500/50 text-red-400 hover:bg-red-500/10"
           onClick={() => setShowDisputeForm(true)}
+          icon={<Flag className="w-4 h-4" />}
         >
-          <Flag className="w-4 h-4 mr-2" />
           Оспорить выполнение
-        </Button>
+        </NeonButton>
       )}
 
       {/* Dispute creation form */}
       {showDisputeForm && !dispute && (
-        <Card className="mb-6 border-red-500/50">
+        <GlassCard className="border-red-500/30">
-          <CardContent>
+          <div className="flex items-center gap-3 mb-4">
-            <h3 className="text-lg font-bold text-red-400 mb-4 flex items-center gap-2">
+            <div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
-              <AlertTriangle className="w-5 h-5" />
+              <AlertTriangle className="w-5 h-5 text-red-400" />
-              Оспорить выполнение
-            </h3>
-
-            <p className="text-gray-400 text-sm mb-4">
-              Опишите причину оспаривания. После создания у участников будет 24 часа для голосования.
-            </p>
-
-            <textarea
-              className="input w-full min-h-[100px] resize-none mb-4"
-              placeholder="Причина оспаривания (минимум 10 символов)..."
-              value={disputeReason}
-              onChange={(e) => setDisputeReason(e.target.value)}
-            />
-
-            <div className="flex gap-3">
-              <Button
-                variant="danger"
-                className="flex-1"
-                onClick={handleCreateDispute}
-                isLoading={isCreatingDispute}
-                disabled={disputeReason.trim().length < 10}
-              >
-                Оспорить
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={() => {
-                  setShowDisputeForm(false)
-                  setDisputeReason('')
-                }}
-              >
-                Отмена
-              </Button>
             </div>
-          </CardContent>
+            <div>
-        </Card>
+              <h3 className="font-semibold text-red-400">Оспорить выполнение</h3>
+              <p className="text-sm text-gray-400">У участников будет 24 часа для голосования</p>
+            </div>
+          </div>
+
+          <textarea
+            className="input w-full min-h-[100px] resize-none mb-4"
+            placeholder="Причина оспаривания (минимум 10 символов)..."
+            value={disputeReason}
+            onChange={(e) => setDisputeReason(e.target.value)}
+          />
+
+          <div className="flex gap-3">
+            <NeonButton
+              className="flex-1 border-red-500/50 bg-red-500/10 hover:bg-red-500/20 text-red-400"
+              onClick={handleCreateDispute}
+              isLoading={isCreatingDispute}
+              disabled={disputeReason.trim().length < 10}
+            >
+              Оспорить
+            </NeonButton>
+            <NeonButton
+              variant="outline"
+              onClick={() => {
+                setShowDisputeForm(false)
+                setDisputeReason('')
+              }}
+            >
+              Отмена
+            </NeonButton>
+          </div>
+        </GlassCard>
       )}
 
       {/* Dispute section */}
       {dispute && (
-        <Card className={`mb-6 ${dispute.status === 'open' ? 'border-yellow-500/50' : ''}`}>
+        <GlassCard className={dispute.status === 'open' ? 'border-yellow-500/30' : ''}>
-          <CardContent>
+          <div className="flex items-start justify-between mb-4">
-            <div className="flex items-start justify-between mb-4">
+            <div className="flex items-center gap-3">
-              <h3 className="text-lg font-bold text-yellow-400 flex items-center gap-2">
+              <div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
-                <AlertTriangle className="w-5 h-5" />
+                <AlertTriangle className="w-5 h-5 text-yellow-400" />
-                Оспаривание
+              </div>
-              </h3>
+              <h3 className="font-semibold text-yellow-400">Оспаривание</h3>
+            </div>
 
-              {dispute.status === 'open' ? (
+            {dispute.status === 'open' ? (
-                <span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm flex items-center gap-1">
+              <span className="px-3 py-1.5 bg-yellow-500/20 text-yellow-400 rounded-lg text-sm font-medium border border-yellow-500/30 flex items-center gap-1.5">
-                  <Clock className="w-4 h-4" />
+                <Clock className="w-4 h-4" />
-                  {getTimeRemaining(dispute.expires_at)}
+                {getTimeRemaining(dispute.expires_at)}
-                </span>
+              </span>
-              ) : dispute.status === 'valid' ? (
+            ) : dispute.status === 'valid' ? (
-                <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
+              <span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
-                  <CheckCircle className="w-4 h-4" />
+                <CheckCircle className="w-4 h-4" />
-                  Пруф валиден
+                Пруф валиден
-                </span>
+              </span>
-              ) : (
+            ) : (
-                <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
+              <span className="px-3 py-1.5 bg-red-500/20 text-red-400 rounded-lg text-sm font-medium border border-red-500/30 flex items-center gap-1.5">
-                  <XCircle className="w-4 h-4" />
+                <XCircle className="w-4 h-4" />
-                  Пруф невалиден
+                Пруф невалиден
-                </span>
+              </span>
+            )}
+          </div>
+
+          <div className="mb-4 text-sm text-gray-400">
+            <p>
+              Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
+            </p>
+            <p>
+              Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
+            </p>
+          </div>
+
+          <div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600 mb-4">
+            <p className="text-sm text-gray-400 mb-1">Причина:</p>
+            <p className="text-white">{dispute.reason}</p>
+          </div>
+
+          {/* Voting section */}
+          {dispute.status === 'open' && (
+            <div className="mb-6 p-4 bg-dark-700/30 rounded-xl border border-dark-600">
+              <h4 className="text-sm font-semibold text-white mb-4">Голосование</h4>
+
+              <div className="flex items-center gap-6 mb-4">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
+                    <ThumbsUp className="w-4 h-4 text-green-400" />
+                  </div>
+                  <span className="text-green-400 font-bold text-lg">{dispute.votes_valid}</span>
+                  <span className="text-gray-500 text-sm">валидно</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center">
+                    <ThumbsDown className="w-4 h-4 text-red-400" />
+                  </div>
+                  <span className="text-red-400 font-bold text-lg">{dispute.votes_invalid}</span>
+                  <span className="text-gray-500 text-sm">невалидно</span>
+                </div>
+              </div>
+
+              <div className="flex gap-3">
+                <NeonButton
+                  className={`flex-1 ${dispute.my_vote === true ? 'bg-green-500/20 border-green-500/50 text-green-400' : ''}`}
+                  variant="outline"
+                  onClick={() => handleVote(true)}
+                  isLoading={isVoting}
+                  disabled={isVoting}
+                  icon={<ThumbsUp className="w-4 h-4" />}
+                >
+                  Валидно
+                </NeonButton>
+                <NeonButton
+                  className={`flex-1 ${dispute.my_vote === false ? 'bg-red-500/20 border-red-500/50 text-red-400' : ''}`}
+                  variant="outline"
+                  onClick={() => handleVote(false)}
+                  isLoading={isVoting}
+                  disabled={isVoting}
+                  icon={<ThumbsDown className="w-4 h-4" />}
+                >
+                  Невалидно
+                </NeonButton>
+              </div>
+
+              {dispute.my_vote !== null && (
+                <p className="text-sm text-gray-500 mt-3 text-center">
+                  Вы проголосовали: <span className={dispute.my_vote ? 'text-green-400' : 'text-red-400'}>
+                    {dispute.my_vote ? 'валидно' : 'невалидно'}
+                  </span>
+                </p>
               )}
             </div>
+          )}
 
-            <div className="mb-4">
+          {/* Comments section */}
-              <p className="text-sm text-gray-400">
+          <div>
-                Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
+            <div className="flex items-center gap-2 mb-4">
-              </p>
+              <MessageSquare className="w-4 h-4 text-gray-400" />
-              <p className="text-sm text-gray-400">
+              <h4 className="text-sm font-semibold text-white">
-                Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
+                Обсуждение ({dispute.comments.length})
-              </p>
+              </h4>
             </div>
 
-            <div className="p-3 bg-gray-900 rounded-lg mb-4">
+            {dispute.comments.length > 0 && (
-              <p className="text-sm text-gray-400 mb-1">Причина:</p>
+              <div className="space-y-3 mb-4 max-h-60 overflow-y-auto custom-scrollbar">
-              <p className="text-white">{dispute.reason}</p>
+                {dispute.comments.map((comment) => (
-            </div>
+                  <div key={comment.id} className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
-
+                    <div className="flex items-center justify-between mb-1">
-            {/* Voting section */}
+                      <span className={`font-medium ${comment.user.id === user?.id ? 'text-neon-400' : 'text-white'}`}>
-            {dispute.status === 'open' && (
+                        {comment.user.nickname}
-              <div className="mb-4">
+                        {comment.user.id === user?.id && ' (Вы)'}
-                <h4 className="text-sm font-medium text-gray-300 mb-3">Голосование</h4>
+                      </span>
-
+                      <span className="text-xs text-gray-500">
-                <div className="flex items-center gap-4 mb-3">
+                        {formatDate(comment.created_at)}
-                  <div className="flex items-center gap-2">
+                      </span>
-                    <ThumbsUp className="w-5 h-5 text-green-500" />
+                    </div>
-                    <span className="text-green-400 font-medium">{dispute.votes_valid}</span>
+                    <p className="text-gray-300 text-sm">{comment.text}</p>
-                    <span className="text-gray-500 text-sm">валидно</span>
                   </div>
-                  <div className="flex items-center gap-2">
+                ))}
-                    <ThumbsDown className="w-5 h-5 text-red-500" />
-                    <span className="text-red-400 font-medium">{dispute.votes_invalid}</span>
-                    <span className="text-gray-500 text-sm">невалидно</span>
-                  </div>
-                </div>
-
-                <div className="flex gap-3">
-                  <Button
-                    variant={dispute.my_vote === true ? 'primary' : 'secondary'}
-                    className="flex-1"
-                    onClick={() => handleVote(true)}
-                    isLoading={isVoting}
-                    disabled={isVoting}
-                  >
-                    <ThumbsUp className="w-4 h-4 mr-2" />
-                    Валидно
-                  </Button>
-                  <Button
-                    variant={dispute.my_vote === false ? 'danger' : 'secondary'}
-                    className="flex-1"
-                    onClick={() => handleVote(false)}
-                    isLoading={isVoting}
-                    disabled={isVoting}
-                  >
-                    <ThumbsDown className="w-4 h-4 mr-2" />
-                    Невалидно
-                  </Button>
-                </div>
-
-                {dispute.my_vote !== null && (
-                  <p className="text-sm text-gray-500 mt-2 text-center">
-                    Вы проголосовали: {dispute.my_vote ? 'валидно' : 'невалидно'}
-                  </p>
-                )}
               </div>
             )}
 
-            {/* Comments section */}
+            {/* Add comment form */}
-            <div>
+            {dispute.status === 'open' && (
-              <h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center gap-2">
+              <div className="flex gap-2">
-                <MessageSquare className="w-4 h-4" />
+                <input
-                Обсуждение ({dispute.comments.length})
+                  type="text"
-              </h4>
+                  className="input flex-1"
-
+                  placeholder="Написать комментарий..."
-              {dispute.comments.length > 0 && (
+                  value={commentText}
-                <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
+                  onChange={(e) => setCommentText(e.target.value)}
-                  {dispute.comments.map((comment) => (
+                  onKeyDown={(e) => {
-                    <div key={comment.id} className="p-3 bg-gray-900 rounded-lg">
+                    if (e.key === 'Enter' && !e.shiftKey) {
-                      <div className="flex items-center justify-between mb-1">
+                      e.preventDefault()
-                        <span className={`font-medium ${comment.user.id === user?.id ? 'text-primary-400' : 'text-white'}`}>
+                      handleAddComment()
-                          {comment.user.nickname}
+                    }
-                          {comment.user.id === user?.id && ' (Вы)'}
+                  }}
-                        </span>
+                />
-                        <span className="text-xs text-gray-500">
+                <NeonButton
-                          {formatDate(comment.created_at)}
+                  onClick={handleAddComment}
-                        </span>
+                  isLoading={isAddingComment}
-                      </div>
+                  disabled={!commentText.trim()}
-                      <p className="text-gray-300 text-sm">{comment.text}</p>
+                  icon={<Send className="w-4 h-4" />}
-                    </div>
+                />
-                  ))}
+              </div>
-                </div>
+            )}
-              )}
+          </div>
-
+        </GlassCard>
-              {/* Add comment form */}
-              {dispute.status === 'open' && (
-                <div className="flex gap-2">
-                  <input
-                    type="text"
-                    className="input flex-1"
-                    placeholder="Написать комментарий..."
-                    value={commentText}
-                    onChange={(e) => setCommentText(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault()
-                        handleAddComment()
-                      }
-                    }}
-                  />
-                  <Button
-                    onClick={handleAddComment}
-                    isLoading={isAddingComment}
-                    disabled={!commentText.trim()}
-                  >
-                    <Send className="w-4 h-4" />
-                  </Button>
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
       )}
     </div>
   )

frontend/src/pages/CreateMarathonPage.tsx

@@ -4,8 +4,8 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { marathonsApi } from '@/api'
-import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
+import { NeonButton, Input, GlassCard } from '@/components/ui'
-import { Globe, Lock, Users, UserCog, ArrowLeft } from 'lucide-react'
+import { Globe, Lock, Users, UserCog, ArrowLeft, Gamepad2, AlertCircle, Sparkles, Calendar, Clock } from 'lucide-react'
 import type { GameProposalMode } from '@/types'
 
 const createSchema = z.object({
@@ -64,25 +64,38 @@ export function CreateMarathonPage() {
   }
 
   return (
-    <div className="max-w-lg mx-auto">
+    <div className="max-w-xl mx-auto">
       {/* Back button */}
-      <Link to="/marathons" className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
+      <Link
-        <ArrowLeft className="w-4 h-4" />
+        to="/marathons"
+        className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
+      >
+        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
         К списку марафонов
       </Link>
 
-      <Card>
+      <GlassCard variant="neon">
-        <CardHeader>
+        {/* Header */}
-          <CardTitle>Создать марафон</CardTitle>
+        <div className="flex items-center gap-4 mb-8">
-        </CardHeader>
+          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/30">
-        <CardContent>
+            <Gamepad2 className="w-7 h-7 text-neon-400" />
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          </div>
-            {error && (
+          <div>
-              <div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
+            <h1 className="text-2xl font-bold text-white">Создать марафон</h1>
-                {error}
+            <p className="text-gray-400 text-sm">Настройте свой игровой марафон</p>
-              </div>
+          </div>
-            )}
+        </div>
 
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {error && (
+            <div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
+              <AlertCircle className="w-5 h-5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          {/* Basic info */}
+          <div className="space-y-4">
             <Input
               label="Название"
               placeholder="Введите название марафона"
@@ -91,132 +104,209 @@ export function CreateMarathonPage() {
             />
 
             <div>
-              <label className="block text-sm font-medium text-gray-300 mb-1">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
                 Описание (необязательно)
               </label>
               <textarea
                 className="input min-h-[100px] resize-none"
-                placeholder="Введите описание"
+                placeholder="Расскажите о вашем марафоне..."
                 {...register('description')}
               />
             </div>
+          </div>
 
-            <Input
+          {/* Date and duration */}
-              label="Дата начала"
+          <div className="grid grid-cols-2 gap-4">
-              type="datetime-local"
-              error={errors.start_date?.message}
-              {...register('start_date')}
-            />
-
-            <Input
-              label="Длительность (дней)"
-              type="number"
-              error={errors.duration_days?.message}
-              {...register('duration_days', { valueAsNumber: true })}
-            />
-
-            {/* Тип марафона */}
             <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+              <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-                Тип марафона
+                <Calendar className="w-4 h-4 text-neon-400" />
+                Дата начала
               </label>
-              <div className="grid grid-cols-2 gap-3">
+              <input
-                <button
+                type="datetime-local"
-                  type="button"
+                className="input w-full"
-                  onClick={() => setValue('is_public', false)}
+                {...register('start_date')}
-                  className={`p-3 rounded-lg border-2 transition-all ${
+              />
-                    !isPublic
+              {errors.start_date && (
-                      ? 'border-primary-500 bg-primary-500/10'
+                <p className="text-red-400 text-xs mt-1">{errors.start_date.message}</p>
-                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
+              )}
-                  }`}
-                >
-                  <Lock className={`w-5 h-5 mx-auto mb-1 ${!isPublic ? 'text-primary-400' : 'text-gray-400'}`} />
-                  <div className={`text-sm font-medium ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
-                    Закрытый
-                  </div>
-                  <div className="text-xs text-gray-500 mt-1">
-                    Вход по коду
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setValue('is_public', true)}
-                  className={`p-3 rounded-lg border-2 transition-all ${
-                    isPublic
-                      ? 'border-primary-500 bg-primary-500/10'
-                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
-                  }`}
-                >
-                  <Globe className={`w-5 h-5 mx-auto mb-1 ${isPublic ? 'text-primary-400' : 'text-gray-400'}`} />
-                  <div className={`text-sm font-medium ${isPublic ? 'text-white' : 'text-gray-300'}`}>
-                    Открытый
-                  </div>
-                  <div className="text-xs text-gray-500 mt-1">
-                    Виден всем
-                  </div>
-                </button>
-              </div>
             </div>
 
-            {/* Кто может предлагать игры */}
             <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+              <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-                Кто может предлагать игры
+                <Clock className="w-4 h-4 text-accent-400" />
+                Длительность (дней)
               </label>
-              <div className="grid grid-cols-2 gap-3">
+              <input
-                <button
+                type="number"
-                  type="button"
+                className="input w-full"
-                  onClick={() => setValue('game_proposal_mode', 'all_participants')}
+                min={1}
-                  className={`p-3 rounded-lg border-2 transition-all ${
+                max={365}
-                    gameProposalMode === 'all_participants'
+                {...register('duration_days', { valueAsNumber: true })}
-                      ? 'border-primary-500 bg-primary-500/10'
+              />
-                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
+              {errors.duration_days && (
-                  }`}
+                <p className="text-red-400 text-xs mt-1">{errors.duration_days.message}</p>
-                >
+              )}
-                  <Users className={`w-5 h-5 mx-auto mb-1 ${gameProposalMode === 'all_participants' ? 'text-primary-400' : 'text-gray-400'}`} />
-                  <div className={`text-sm font-medium ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
-                    Все участники
-                  </div>
-                  <div className="text-xs text-gray-500 mt-1">
-                    С модерацией
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setValue('game_proposal_mode', 'organizer_only')}
-                  className={`p-3 rounded-lg border-2 transition-all ${
-                    gameProposalMode === 'organizer_only'
-                      ? 'border-primary-500 bg-primary-500/10'
-                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
-                  }`}
-                >
-                  <UserCog className={`w-5 h-5 mx-auto mb-1 ${gameProposalMode === 'organizer_only' ? 'text-primary-400' : 'text-gray-400'}`} />
-                  <div className={`text-sm font-medium ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
-                    Только организатор
-                  </div>
-                  <div className="text-xs text-gray-500 mt-1">
-                    Без модерации
-                  </div>
-                </button>
-              </div>
             </div>
+          </div>
 
-            <div className="flex gap-3 pt-4">
+          {/* Marathon type */}
-              <Button
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3">
+              Тип марафона
+            </label>
+            <div className="grid grid-cols-2 gap-3">
+              <button
                 type="button"
-                variant="secondary"
+                onClick={() => setValue('is_public', false)}
-                className="flex-1"
+                className={`
-                onClick={() => navigate('/marathons')}
+                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
+                  ${!isPublic
+                    ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
+                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                  }
+                `}
               >
-                Отмена
+                <div className={`
-              </Button>
+                  w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
-              <Button type="submit" className="flex-1" isLoading={isLoading}>
+                  ${!isPublic ? 'bg-neon-500/20' : 'bg-dark-600'}
-                Создать
+                `}>
-              </Button>
+                  <Lock className={`w-5 h-5 ${!isPublic ? 'text-neon-400' : 'text-gray-400'}`} />
+                </div>
+                <div className={`font-semibold mb-1 ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
+                  Закрытый
+                </div>
+                <div className="text-xs text-gray-500">
+                  Вход только по коду приглашения
+                </div>
+                {!isPublic && (
+                  <div className="absolute top-3 right-3">
+                    <Sparkles className="w-4 h-4 text-neon-400" />
+                  </div>
+                )}
+              </button>
+
+              <button
+                type="button"
+                onClick={() => setValue('is_public', true)}
+                className={`
+                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
+                  ${isPublic
+                    ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_20px_rgba(168,85,247,0.1)]'
+                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                  }
+                `}
+              >
+                <div className={`
+                  w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
+                  ${isPublic ? 'bg-accent-500/20' : 'bg-dark-600'}
+                `}>
+                  <Globe className={`w-5 h-5 ${isPublic ? 'text-accent-400' : 'text-gray-400'}`} />
+                </div>
+                <div className={`font-semibold mb-1 ${isPublic ? 'text-white' : 'text-gray-300'}`}>
+                  Открытый
+                </div>
+                <div className="text-xs text-gray-500">
+                  Виден всем пользователям
+                </div>
+                {isPublic && (
+                  <div className="absolute top-3 right-3">
+                    <Sparkles className="w-4 h-4 text-accent-400" />
+                  </div>
+                )}
+              </button>
             </div>
-          </form>
+          </div>
-        </CardContent>
+
-      </Card>
+          {/* Game proposal mode */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3">
+              Кто может предлагать игры
+            </label>
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                onClick={() => setValue('game_proposal_mode', 'all_participants')}
+                className={`
+                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left
+                  ${gameProposalMode === 'all_participants'
+                    ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
+                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                  }
+                `}
+              >
+                <div className={`
+                  w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
+                  ${gameProposalMode === 'all_participants' ? 'bg-neon-500/20' : 'bg-dark-600'}
+                `}>
+                  <Users className={`w-5 h-5 ${gameProposalMode === 'all_participants' ? 'text-neon-400' : 'text-gray-400'}`} />
+                </div>
+                <div className={`font-semibold mb-1 ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
+                  Все участники
+                </div>
+                <div className="text-xs text-gray-500">
+                  С модерацией организатором
+                </div>
+                {gameProposalMode === 'all_participants' && (
+                  <div className="absolute top-3 right-3">
+                    <Sparkles className="w-4 h-4 text-neon-400" />
+                  </div>
+                )}
+              </button>
+
+              <button
+                type="button"
+                onClick={() => setValue('game_proposal_mode', 'organizer_only')}
+                className={`
+                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left
+                  ${gameProposalMode === 'organizer_only'
+                    ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_20px_rgba(168,85,247,0.1)]'
+                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                  }
+                `}
+              >
+                <div className={`
+                  w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
+                  ${gameProposalMode === 'organizer_only' ? 'bg-accent-500/20' : 'bg-dark-600'}
+                `}>
+                  <UserCog className={`w-5 h-5 ${gameProposalMode === 'organizer_only' ? 'text-accent-400' : 'text-gray-400'}`} />
+                </div>
+                <div className={`font-semibold mb-1 ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
+                  Только организатор
+                </div>
+                <div className="text-xs text-gray-500">
+                  Без модерации
+                </div>
+                {gameProposalMode === 'organizer_only' && (
+                  <div className="absolute top-3 right-3">
+                    <Sparkles className="w-4 h-4 text-accent-400" />
+                  </div>
+                )}
+              </button>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-4 border-t border-dark-600">
+            <NeonButton
+              type="button"
+              variant="outline"
+              className="flex-1"
+              onClick={() => navigate('/marathons')}
+            >
+              Отмена
+            </NeonButton>
+            <NeonButton
+              type="submit"
+              className="flex-1"
+              isLoading={isLoading}
+              icon={<Sparkles className="w-4 h-4" />}
+            >
+              Создать
+            </NeonButton>
+          </div>
+        </form>
+      </GlassCard>
     </div>
   )
 }

frontend/src/pages/HomePage.tsx

@@ -1,113 +1,269 @@
 import { Link } from 'react-router-dom'
 import { useAuthStore } from '@/store/auth'
-import { Button } from '@/components/ui'
+import { NeonButton, GradientButton, FeatureCard } from '@/components/ui'
-import { Gamepad2, Users, Trophy, Sparkles } from 'lucide-react'
+import { Gamepad2, Users, Trophy, Sparkles, Zap, Target, Crown, ArrowRight } from 'lucide-react'
 
 export function HomePage() {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
 
   return (
-    <div className="max-w-4xl mx-auto text-center">
+    <div className="-mt-8">
-      {/* Hero */}
+      {/* Hero Section */}
-      <div className="py-12">
+      <section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
-        <div className="flex justify-center mb-6">
+        {/* Animated background */}
-          <Gamepad2 className="w-20 h-20 text-primary-500" />
+        <div className="absolute inset-0 overflow-hidden">
-        </div>
+          {/* Gradient orbs */}
-        <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
+          <div className="absolute top-1/4 -left-20 w-96 h-96 bg-neon-500/20 rounded-full blur-[100px] animate-float" />
-          Игровой Марафон
+          <div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-accent-500/20 rounded-full blur-[100px] animate-float" style={{ animationDelay: '-3s' }} />
-        </h1>
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-pink-500/10 rounded-full blur-[120px]" />
-        <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
-          Соревнуйтесь с друзьями в игровых челленджах. Крутите колесо, выполняйте задания, зарабатывайте очки и станьте чемпионом!
-        </p>
 
-        <div className="flex gap-4 justify-center">
+          {/* Grid lines */}
-          {isAuthenticated ? (
+          <div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:100px_100px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,black_40%,transparent_100%)]" />
-            <Link to="/marathons">
+        </div>
-              <Button size="lg">К марафонам</Button>
+
-            </Link>
+        {/* Content */}
-          ) : (
+        <div className="relative z-10 max-w-5xl mx-auto text-center px-4">
-            <>
+          {/* Logo */}
-              <Link to="/register">
+          <div className="flex justify-center mb-8">
-                <Button size="lg">Начать</Button>
+            <div className="relative">
+              <Gamepad2 className="w-24 h-24 text-neon-500 animate-float drop-shadow-[0_0_30px_rgba(0,240,255,0.5)]" />
+              <div className="absolute inset-0 bg-neon-500/20 blur-2xl rounded-full" />
+            </div>
+          </div>
+
+          {/* Title with glitch effect */}
+          <h1 className="relative mb-6">
+            <span className="block text-5xl md:text-7xl font-bold font-display tracking-wider text-white">
+              ИГРОВОЙ
+            </span>
+            <span
+              className="glitch block text-5xl md:text-7xl font-bold font-display tracking-wider text-neon-500 neon-text"
+              data-text="МАРАФОН"
+            >
+              МАРАФОН
+            </span>
+          </h1>
+
+          {/* Subtitle with typing effect */}
+          <p className="text-xl md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
+            Соревнуйтесь с друзьями в{' '}
+            <span className="text-neon-400">игровых челленджах</span>.
+            <br className="hidden md:block" />
+            Крутите колесо, выполняйте задания, станьте{' '}
+            <span className="text-accent-400">чемпионом</span>!
+          </p>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            {isAuthenticated ? (
+              <Link to="/marathons">
+                <GradientButton size="lg" icon={<ArrowRight className="w-5 h-5" />}>
+                  К марафонам
+                </GradientButton>
               </Link>
-              <Link to="/login">
+            ) : (
-                <Button size="lg" variant="secondary">Войти</Button>
+              <>
-              </Link>
+                <Link to="/register">
-            </>
+                  <GradientButton size="lg" icon={<Zap className="w-5 h-5" />}>
-          )}
+                    Начать играть
-        </div>
+                  </GradientButton>
-      </div>
+                </Link>
-
+                <Link to="/login">
-      {/* Features */}
+                  <NeonButton size="lg" variant="outline" color="neon">
-      <div className="grid md:grid-cols-3 gap-8 py-12">
+                    Войти
-        <div className="card text-center">
+                  </NeonButton>
-          <div className="flex justify-center mb-4">
+                </Link>
-            <Sparkles className="w-12 h-12 text-yellow-500" />
+              </>
+            )}
+          </div>
+
+          {/* Stats */}
+          <div className="flex flex-wrap justify-center gap-8 mt-16">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-neon-400">100+</div>
+              <div className="text-sm text-gray-500">Марафонов</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-accent-400">500+</div>
+              <div className="text-sm text-gray-500">Игроков</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-pink-400">2000+</div>
+              <div className="text-sm text-gray-500">Челленджей</div>
+            </div>
           </div>
-          <h3 className="text-xl font-bold text-white mb-2">Случайные челленджи</h3>
-          <p className="text-gray-400">
-            Крутите колесо, чтобы получить случайную игру и задание. Проверьте свои навыки неожиданным способом!
-          </p>
         </div>
 
-        <div className="card text-center">
+        {/* Scroll indicator */}
-          <div className="flex justify-center mb-4">
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
-            <Users className="w-12 h-12 text-green-500" />
+          <div className="w-6 h-10 border-2 border-gray-600 rounded-full flex justify-center pt-2">
+            <div className="w-1 h-2 bg-neon-500 rounded-full animate-pulse" />
           </div>
-          <h3 className="text-xl font-bold text-white mb-2">Играйте с друзьями</h3>
-          <p className="text-gray-400">
-            Создавайте приватные марафоны и приглашайте друзей. Каждый добавляет свои любимые игры.
-          </p>
         </div>
+      </section>
 
-        <div className="card text-center">
+      {/* Features Section */}
-          <div className="flex justify-center mb-4">
+      <section className="py-24 relative">
-            <Trophy className="w-12 h-12 text-primary-500" />
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+              Почему <span className="gradient-neon-text">Игровой Марафон</span>?
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              Уникальный способ играть с друзьями. Случайные челленджи, честная конкуренция, незабываемые моменты.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6 stagger-children">
+            <FeatureCard
+              icon={<Sparkles className="w-7 h-7" />}
+              title="Случайные челленджи"
+              description="Крутите колесо и получайте уникальные задания. ИИ генерирует челленджи специально под ваши игры."
+              color="neon"
+            />
+            <FeatureCard
+              icon={<Users className="w-7 h-7" />}
+              title="Играйте с друзьями"
+              description="Создавайте приватные марафоны. Каждый добавляет свои игры, все соревнуются на равных."
+              color="purple"
+            />
+            <FeatureCard
+              icon={<Trophy className="w-7 h-7" />}
+              title="Зарабатывайте очки"
+              description="Выполняйте задания, собирайте серии побед. Бонусные множители за стрики!"
+              color="pink"
+            />
           </div>
-          <h3 className="text-xl font-bold text-white mb-2">Соревнуйтесь за очки</h3>
-          <p className="text-gray-400">
-            Выполняйте задания, чтобы зарабатывать очки. Собирайте серии для бонусных множителей!
-          </p>
         </div>
-      </div>
+      </section>
 
       {/* How it works */}
-      <div className="py-12">
+      <section className="py-24 relative">
-        <h2 className="text-2xl font-bold text-white mb-8">Как это работает</h2>
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-dark-800/50 to-transparent" />
-        <div className="grid md:grid-cols-4 gap-6 text-left">
+
-          <div className="relative">
+        <div className="max-w-6xl mx-auto px-4 relative z-10">
-            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">1</div>
+          <div className="text-center mb-16">
-            <div className="relative z-10 pt-6">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
-              <h4 className="font-bold text-white mb-2">Создайте марафон</h4>
+              Как это работает
-              <p className="text-gray-400 text-sm">Начните новый марафон и пригласите друзей по уникальному коду</p>
+            </h2>
-            </div>
+            <p className="text-gray-400">
+              Четыре простых шага до победы
+            </p>
           </div>
 
+          {/* Timeline */}
           <div className="relative">
-            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">2</div>
+            {/* Connection line */}
-            <div className="relative z-10 pt-6">
+            <div className="hidden md:block absolute top-12 left-0 right-0 h-0.5 bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500" />
-              <h4 className="font-bold text-white mb-2">Добавьте игры</h4>
-              <p className="text-gray-400 text-sm">Все добавляют игры, в которые хотят играть. ИИ генерирует задания</p>
-            </div>
-          </div>
 
-          <div className="relative">
+            <div className="grid md:grid-cols-4 gap-8">
-            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">3</div>
+              {[
-            <div className="relative z-10 pt-6">
+                {
-              <h4 className="font-bold text-white mb-2">Крутите и играйте</h4>
+                  step: 1,
-              <p className="text-gray-400 text-sm">Крутите колесо, получите задание, выполните его и отправьте доказательство</p>
+                  icon: <Gamepad2 className="w-6 h-6" />,
-            </div>
+                  title: 'Создайте марафон',
-          </div>
+                  desc: 'Начните новый марафон и пригласите друзей по коду',
+                  color: 'neon',
+                },
+                {
+                  step: 2,
+                  icon: <Target className="w-6 h-6" />,
+                  title: 'Добавьте игры',
+                  desc: 'Каждый добавляет игры. ИИ генерирует задания',
+                  color: 'neon',
+                },
+                {
+                  step: 3,
+                  icon: <Zap className="w-6 h-6" />,
+                  title: 'Крутите и играйте',
+                  desc: 'Крутите колесо, выполняйте задания',
+                  color: 'accent',
+                },
+                {
+                  step: 4,
+                  icon: <Crown className="w-6 h-6" />,
+                  title: 'Победите!',
+                  desc: 'Зарабатывайте очки и станьте чемпионом',
+                  color: 'pink',
+                },
+              ].map((item, index) => (
+                <div key={item.step} className="relative text-center group">
+                  {/* Step circle */}
+                  <div
+                    className={`
+                      relative z-10 w-24 h-24 mx-auto mb-6 rounded-2xl
+                      bg-dark-800 border-2 transition-all duration-300
+                      flex items-center justify-center
+                      group-hover:-translate-y-2
+                      ${item.color === 'neon' ? 'border-neon-500/50 group-hover:border-neon-500 group-hover:shadow-[0_0_30px_rgba(0,240,255,0.3)]' : ''}
+                      ${item.color === 'accent' ? 'border-accent-500/50 group-hover:border-accent-500 group-hover:shadow-[0_0_30px_rgba(168,85,247,0.3)]' : ''}
+                      ${item.color === 'pink' ? 'border-pink-500/50 group-hover:border-pink-500 group-hover:shadow-[0_0_30px_rgba(236,72,153,0.3)]' : ''}
+                    `}
+                    style={{ animationDelay: `${index * 100}ms` }}
+                  >
+                    <div className={`
+                      ${item.color === 'neon' ? 'text-neon-500' : ''}
+                      ${item.color === 'accent' ? 'text-accent-500' : ''}
+                      ${item.color === 'pink' ? 'text-pink-500' : ''}
+                    `}>
+                      {item.icon}
+                    </div>
+                    <div className={`
+                      absolute -top-2 -right-2 w-8 h-8 rounded-full
+                      flex items-center justify-center text-sm font-bold
+                      ${item.color === 'neon' ? 'bg-neon-500 text-dark-900' : ''}
+                      ${item.color === 'accent' ? 'bg-accent-500 text-white' : ''}
+                      ${item.color === 'pink' ? 'bg-pink-500 text-white' : ''}
+                    `}>
+                      {item.step}
+                    </div>
+                  </div>
 
-          <div className="relative">
+                  <h4 className="text-lg font-semibold text-white mb-2">
-            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">4</div>
+                    {item.title}
-            <div className="relative z-10 pt-6">
+                  </h4>
-              <h4 className="font-bold text-white mb-2">Победите!</h4>
+                  <p className="text-gray-400 text-sm">
-              <p className="text-gray-400 text-sm">Зарабатывайте очки, поднимайтесь в таблице лидеров, станьте чемпионом!</p>
+                    {item.desc}
+                  </p>
+                </div>
+              ))}
             </div>
           </div>
         </div>
-      </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-24 relative">
+        <div className="max-w-4xl mx-auto px-4 text-center">
+          <div className="glass-neon rounded-2xl p-12 relative overflow-hidden">
+            {/* Background glow */}
+            <div className="absolute inset-0 bg-gradient-to-r from-neon-500/5 via-accent-500/5 to-pink-500/5" />
+
+            <div className="relative z-10">
+              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+                Готовы к соревнованиям?
+              </h2>
+              <p className="text-gray-300 mb-8 max-w-xl mx-auto">
+                Присоединяйтесь к сотням игроков, которые уже соревнуются в игровых челленджах
+              </p>
+
+              {isAuthenticated ? (
+                <Link to="/marathons">
+                  <GradientButton size="lg" icon={<ArrowRight className="w-5 h-5" />}>
+                    Перейти к марафонам
+                  </GradientButton>
+                </Link>
+              ) : (
+                <Link to="/register">
+                  <GradientButton size="lg" icon={<Zap className="w-5 h-5" />}>
+                    Создать аккаунт бесплатно
+                  </GradientButton>
+                </Link>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   )
 }

frontend/src/pages/InvitePage.tsx

@@ -3,8 +3,8 @@ import { useParams, useNavigate, Link } from 'react-router-dom'
 import { marathonsApi } from '@/api'
 import type { MarathonPublicInfo } from '@/types'
 import { useAuthStore } from '@/store/auth'
-import { Button, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
+import { NeonButton, GlassCard } from '@/components/ui'
-import { Users, Loader2, Trophy, UserPlus, LogIn } from 'lucide-react'
+import { Users, Loader2, Trophy, UserPlus, LogIn, Gamepad2, AlertCircle, Sparkles, Crown } from 'lucide-react'
 
 export function InvitePage() {
   const { code } = useParams<{ code: string }>()
@@ -63,8 +63,9 @@ export function InvitePage() {
 
   if (isLoading) {
     return (
-      <div className="flex justify-center py-12">
+      <div className="flex flex-col items-center justify-center py-24">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка приглашения...</p>
       </div>
     )
   }
@@ -72,97 +73,154 @@ export function InvitePage() {
   if (error || !marathon) {
     return (
       <div className="max-w-md mx-auto">
-        <Card>
+        <GlassCard className="text-center py-12">
-          <CardContent className="text-center py-8">
+          <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-red-500/10 border border-red-500/30 flex items-center justify-center">
-            <div className="text-red-400 mb-4">{error || 'Марафон не найден'}</div>
+            <AlertCircle className="w-8 h-8 text-red-400" />
-            <Link to="/marathons">
+          </div>
-              <Button variant="secondary">К списку марафонов</Button>
+          <h2 className="text-xl font-bold text-white mb-2">Ошибка</h2>
-            </Link>
+          <p className="text-gray-400 mb-6">{error || 'Марафон не найден'}</p>
-          </CardContent>
+          <Link to="/marathons">
-        </Card>
+            <NeonButton variant="outline">К списку марафонов</NeonButton>
+          </Link>
+        </GlassCard>
       </div>
     )
   }
 
-  const statusText = {
+  const getStatusConfig = (status: string) => {
-    preparing: 'Подготовка',
+    switch (status) {
-    active: 'Активен',
+      case 'preparing':
-    finished: 'Завершён',
+        return {
-  }[marathon.status]
+          color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+          text: 'Подготовка',
+          dot: 'bg-yellow-500',
+        }
+      case 'active':
+        return {
+          color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
+          text: 'Активен',
+          dot: 'bg-neon-500 animate-pulse',
+        }
+      case 'finished':
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: 'Завершён',
+          dot: 'bg-gray-500',
+        }
+      default:
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: status,
+          dot: 'bg-gray-500',
+        }
+    }
+  }
+
+  const status = getStatusConfig(marathon.status)
 
   return (
-    <div className="max-w-md mx-auto">
+    <div className="min-h-[70vh] flex items-center justify-center px-4">
-      <Card>
+      {/* Background effects */}
-        <CardHeader className="text-center">
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
-          <CardTitle className="flex items-center justify-center gap-2">
+        <div className="absolute top-1/4 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
-            <Trophy className="w-6 h-6 text-primary-500" />
+        <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
-            Приглашение в марафон
+      </div>
-          </CardTitle>
+
-        </CardHeader>
+      <div className="relative w-full max-w-md">
-        <CardContent className="space-y-6">
+        <GlassCard variant="neon" className="animate-scale-in">
-          {/* Marathon info */}
+          {/* Header */}
-          <div className="text-center">
+          <div className="text-center mb-8">
-            <h2 className="text-2xl font-bold text-white mb-2">{marathon.title}</h2>
+            <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/30 flex items-center justify-center">
-            {marathon.description && (
+              <Trophy className="w-10 h-10 text-neon-400" />
-              <p className="text-gray-400 text-sm mb-4">{marathon.description}</p>
-            )}
-            <div className="flex items-center justify-center gap-4 text-sm text-gray-400">
-              <span className="flex items-center gap-1">
-                <Users className="w-4 h-4" />
-                {marathon.participants_count} участников
-              </span>
-              <span className={`px-2 py-0.5 rounded text-xs ${
-                marathon.status === 'active' ? 'bg-green-900/50 text-green-400' :
-                marathon.status === 'preparing' ? 'bg-yellow-900/50 text-yellow-400' :
-                'bg-gray-700 text-gray-400'
-              }`}>
-                {statusText}
-              </span>
             </div>
-            <p className="text-gray-500 text-xs mt-2">
+            <h1 className="text-xl font-bold text-white mb-1">Приглашение в марафон</h1>
-              Организатор: {marathon.creator_nickname}
+            <p className="text-gray-400 text-sm">Вас пригласили присоединиться</p>
-            </p>
           </div>
 
+          {/* Marathon info */}
+          <div className="glass rounded-xl p-5 mb-6">
+            <div className="flex items-start gap-4">
+              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/20 flex-shrink-0">
+                <Gamepad2 className="w-7 h-7 text-neon-400" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h2 className="text-xl font-bold text-white mb-1 truncate">{marathon.title}</h2>
+                {marathon.description && (
+                  <p className="text-gray-400 text-sm line-clamp-2 mb-3">{marathon.description}</p>
+                )}
+                <div className="flex flex-wrap items-center gap-3">
+                  <span className={`px-2.5 py-1 rounded-full text-xs font-medium border flex items-center gap-1.5 ${status.color}`}>
+                    <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
+                    {status.text}
+                  </span>
+                  <span className="flex items-center gap-1.5 text-sm text-gray-400">
+                    <Users className="w-4 h-4" />
+                    {marathon.participants_count}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Organizer */}
+            <div className="mt-4 pt-4 border-t border-dark-600 flex items-center gap-2 text-sm text-gray-500">
+              <Crown className="w-4 h-4 text-yellow-500" />
+              <span>Организатор:</span>
+              <span className="text-gray-300">{marathon.creator_nickname}</span>
+            </div>
+          </div>
+
+          {/* Actions */}
           {marathon.status === 'finished' ? (
-            <div className="text-center text-gray-400">
+            <div className="text-center">
-              Этот марафон уже завершён
+              <div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-gray-500/10 flex items-center justify-center">
+                <AlertCircle className="w-6 h-6 text-gray-400" />
+              </div>
+              <p className="text-gray-400 mb-4">Этот марафон уже завершён</p>
+              <Link to="/marathons">
+                <NeonButton variant="outline" className="w-full">
+                  К списку марафонов
+                </NeonButton>
+              </Link>
             </div>
           ) : isAuthenticated ? (
-            /* Authenticated - show join button */
+            <NeonButton
-            <Button
               className="w-full"
+              size="lg"
               onClick={handleJoin}
               isLoading={isJoining}
+              icon={<Sparkles className="w-5 h-5" />}
             >
-              <UserPlus className="w-4 h-4 mr-2" />
+              Присоединиться
-              Присоединиться к марафону
+            </NeonButton>
-            </Button>
           ) : (
-            /* Not authenticated - show login/register options */
+            <div className="space-y-4">
-            <div className="space-y-3">
               <p className="text-center text-gray-400 text-sm">
                 Чтобы присоединиться, войдите или зарегистрируйтесь
               </p>
-              <Button
+              <NeonButton
                 className="w-full"
+                size="lg"
                 onClick={() => handleAuthRedirect('/login')}
+                icon={<LogIn className="w-5 h-5" />}
               >
-                <LogIn className="w-4 h-4 mr-2" />
                 Войти
-              </Button>
+              </NeonButton>
-              <Button
+              <NeonButton
-                variant="secondary"
+                variant="outline"
                 className="w-full"
                 onClick={() => handleAuthRedirect('/register')}
+                icon={<UserPlus className="w-5 h-5" />}
               >
-                <UserPlus className="w-4 h-4 mr-2" />
                 Зарегистрироваться
-              </Button>
+              </NeonButton>
             </div>
           )}
-        </CardContent>
+        </GlassCard>
-      </Card>
+
+        {/* Decorative elements */}
+        <div className="absolute -top-4 -left-4 w-24 h-24 border border-neon-500/20 rounded-2xl -z-10" />
+        <div className="absolute -bottom-4 -right-4 w-32 h-32 border border-accent-500/20 rounded-2xl -z-10" />
+      </div>
     </div>
   )
 }

frontend/src/pages/LeaderboardPage.tsx

@@ -2,9 +2,9 @@ import { useState, useEffect } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import { marathonsApi } from '@/api'
 import type { LeaderboardEntry } from '@/types'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
+import { GlassCard } from '@/components/ui'
 import { useAuthStore } from '@/store/auth'
-import { Trophy, Flame, ArrowLeft, Loader2 } from 'lucide-react'
+import { Trophy, Flame, ArrowLeft, Loader2, Crown, Medal, Award, Star, Zap, Target } from 'lucide-react'
 
 export function LeaderboardPage() {
   const { id } = useParams<{ id: string }>()
@@ -28,92 +28,254 @@ export function LeaderboardPage() {
     }
   }
 
-  const getRankIcon = (rank: number) => {
+  const getRankConfig = (rank: number) => {
     switch (rank) {
       case 1:
-        return <Trophy className="w-6 h-6 text-yellow-500" />
+        return {
+          icon: <Crown className="w-6 h-6" />,
+          color: 'text-yellow-400',
+          bg: 'bg-yellow-500/20',
+          border: 'border-yellow-500/30',
+          glow: 'shadow-[0_0_20px_rgba(234,179,8,0.3)]',
+          gradient: 'from-yellow-500/20 via-transparent to-transparent',
+        }
       case 2:
-        return <Trophy className="w-6 h-6 text-gray-400" />
+        return {
+          icon: <Medal className="w-6 h-6" />,
+          color: 'text-gray-300',
+          bg: 'bg-gray-400/20',
+          border: 'border-gray-400/30',
+          glow: 'shadow-[0_0_15px_rgba(156,163,175,0.2)]',
+          gradient: 'from-gray-400/10 via-transparent to-transparent',
+        }
       case 3:
-        return <Trophy className="w-6 h-6 text-amber-700" />
+        return {
+          icon: <Award className="w-6 h-6" />,
+          color: 'text-amber-600',
+          bg: 'bg-amber-600/20',
+          border: 'border-amber-600/30',
+          glow: 'shadow-[0_0_15px_rgba(217,119,6,0.2)]',
+          gradient: 'from-amber-600/10 via-transparent to-transparent',
+        }
       default:
-        return <span className="text-gray-500 font-mono w-6 text-center">{rank}</span>
+        return {
+          icon: <span className="text-gray-500 font-mono font-bold">{rank}</span>,
+          color: 'text-gray-500',
+          bg: 'bg-dark-700',
+          border: 'border-dark-600',
+          glow: '',
+          gradient: '',
+        }
     }
   }
 
+  // Top 3 for podium
+  const topThree = leaderboard.slice(0, 3)
+
+  // Calculate stats
+  const totalPoints = leaderboard.reduce((acc, e) => acc + e.total_points, 0)
+  const maxStreak = Math.max(...leaderboard.map(e => e.current_streak), 0)
+
   if (isLoading) {
     return (
-      <div className="flex justify-center py-12">
+      <div className="flex flex-col items-center justify-center py-24">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка рейтинга...</p>
       </div>
     )
   }
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="max-w-3xl mx-auto">
+      {/* Header */}
       <div className="flex items-center gap-4 mb-8">
-        <Link to={`/marathons/${id}`} className="text-gray-400 hover:text-white">
+        <Link
-          <ArrowLeft className="w-6 h-6" />
+          to={`/marathons/${id}`}
+          className="w-10 h-10 rounded-xl bg-dark-700 border border-dark-600 flex items-center justify-center text-gray-400 hover:text-white hover:border-neon-500/30 transition-all"
+        >
+          <ArrowLeft className="w-5 h-5" />
         </Link>
-        <h1 className="text-2xl font-bold text-white">Таблица лидеров</h1>
+        <div>
+          <h1 className="text-2xl font-bold text-white">Таблица лидеров</h1>
+          <p className="text-gray-400 text-sm">Рейтинг участников марафона</p>
+        </div>
       </div>
 
-      <Card>
+      {leaderboard.length === 0 ? (
-        <CardHeader>
+        <GlassCard className="text-center py-16">
-          <CardTitle className="flex items-center gap-2">
+          <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-dark-700 flex items-center justify-center">
-            <Trophy className="w-5 h-5 text-yellow-500" />
+            <Trophy className="w-10 h-10 text-gray-600" />
-            Рейтинг
+          </div>
-          </CardTitle>
+          <h3 className="text-xl font-semibold text-white mb-2">Пока нет участников</h3>
-        </CardHeader>
+          <p className="text-gray-400">Станьте первым в рейтинге!</p>
-        <CardContent>
+        </GlassCard>
-          {leaderboard.length === 0 ? (
+      ) : (
-            <p className="text-center text-gray-400 py-8">Пока нет участников</p>
+        <>
-          ) : (
+          {/* Podium for top 3 */}
-            <div className="space-y-2">
+          {topThree.length >= 3 && (
-              {leaderboard.map((entry) => (
+            <div className="mb-8">
-                <div
+              <div className="flex items-end justify-center gap-4 mb-4">
-                  key={entry.user.id}
+                {/* 2nd place */}
-                  className={`flex items-center gap-4 p-4 rounded-lg ${
+                <div className="flex flex-col items-center animate-slide-in-up" style={{ animationDelay: '100ms' }}>
-                    entry.user.id === user?.id
+                  <div className={`
-                      ? 'bg-primary-500/20 border border-primary-500/50'
+                    w-20 h-20 rounded-2xl mb-3 flex items-center justify-center
-                      : 'bg-gray-900'
+                    bg-gray-400/10 border border-gray-400/30
-                  }`}
+                    shadow-[0_0_20px_rgba(156,163,175,0.2)]
-                >
+                  `}>
-                  <div className="flex items-center justify-center w-8">
+                    <span className="text-3xl font-bold text-gray-300">2</span>
-                    {getRankIcon(entry.rank)}
                   </div>
-
+                  <div className="glass rounded-xl p-4 text-center w-28">
-                  <div className="flex-1">
+                    <Medal className="w-6 h-6 text-gray-300 mx-auto mb-2" />
-                    <div className="font-medium text-white">
+                    <p className="text-sm font-medium text-white truncate">{topThree[1].user.nickname}</p>
-                      {entry.user.nickname}
+                    <p className="text-xs text-gray-400">{topThree[1].total_points} очков</p>
-                      {entry.user.id === user?.id && (
-                        <span className="ml-2 text-xs text-primary-400">(Вы)</span>
-                      )}
-                    </div>
-                    <div className="text-sm text-gray-400">
-                      {entry.completed_count} выполнено, {entry.dropped_count} пропущено
-                    </div>
-                  </div>
-
-                  {entry.current_streak > 0 && (
-                    <div className="flex items-center gap-1 text-yellow-500">
-                      <Flame className="w-4 h-4" />
-                      <span className="text-sm">{entry.current_streak}</span>
-                    </div>
-                  )}
-
-                  <div className="text-right">
-                    <div className="text-xl font-bold text-primary-400">
-                      {entry.total_points}
-                    </div>
-                    <div className="text-xs text-gray-500">очков</div>
                   </div>
                 </div>
-              ))}
+
+                {/* 1st place */}
+                <div className="flex flex-col items-center animate-slide-in-up" style={{ animationDelay: '0ms' }}>
+                  <div className={`
+                    w-24 h-24 rounded-2xl mb-3 flex items-center justify-center
+                    bg-yellow-500/20 border border-yellow-500/30
+                    shadow-[0_0_30px_rgba(234,179,8,0.4)]
+                  `}>
+                    <Crown className="w-10 h-10 text-yellow-400" />
+                  </div>
+                  <div className="glass-neon rounded-xl p-4 text-center w-32">
+                    <Star className="w-6 h-6 text-yellow-400 mx-auto mb-2" />
+                    <p className="font-semibold text-white truncate">{topThree[0].user.nickname}</p>
+                    <p className="text-sm text-neon-400 font-bold">{topThree[0].total_points} очков</p>
+                  </div>
+                </div>
+
+                {/* 3rd place */}
+                <div className="flex flex-col items-center animate-slide-in-up" style={{ animationDelay: '200ms' }}>
+                  <div className={`
+                    w-20 h-20 rounded-2xl mb-3 flex items-center justify-center
+                    bg-amber-600/10 border border-amber-600/30
+                    shadow-[0_0_20px_rgba(217,119,6,0.2)]
+                  `}>
+                    <span className="text-3xl font-bold text-amber-600">3</span>
+                  </div>
+                  <div className="glass rounded-xl p-4 text-center w-28">
+                    <Award className="w-6 h-6 text-amber-600 mx-auto mb-2" />
+                    <p className="text-sm font-medium text-white truncate">{topThree[2].user.nickname}</p>
+                    <p className="text-xs text-gray-400">{topThree[2].total_points} очков</p>
+                  </div>
+                </div>
+              </div>
             </div>
           )}
-        </CardContent>
+
-      </Card>
+          {/* Stats row */}
+          <div className="grid grid-cols-3 gap-4 mb-8">
+            <div className="glass rounded-xl p-4 text-center">
+              <Trophy className="w-6 h-6 text-neon-400 mx-auto mb-2" />
+              <p className="text-2xl font-bold text-white">{leaderboard.length}</p>
+              <p className="text-xs text-gray-400">Участников</p>
+            </div>
+            <div className="glass rounded-xl p-4 text-center">
+              <Zap className="w-6 h-6 text-accent-400 mx-auto mb-2" />
+              <p className="text-2xl font-bold text-white">{totalPoints}</p>
+              <p className="text-xs text-gray-400">Всего очков</p>
+            </div>
+            <div className="glass rounded-xl p-4 text-center">
+              <Flame className="w-6 h-6 text-orange-400 mx-auto mb-2" />
+              <p className="text-2xl font-bold text-white">{maxStreak}</p>
+              <p className="text-xs text-gray-400">Макс. серия</p>
+            </div>
+          </div>
+
+          {/* Full leaderboard */}
+          <GlassCard>
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 rounded-xl bg-neon-500/20 flex items-center justify-center">
+                <Target className="w-5 h-5 text-neon-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Полный рейтинг</h3>
+                <p className="text-sm text-gray-400">Все участники марафона</p>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              {leaderboard.map((entry, index) => {
+                const isCurrentUser = entry.user.id === user?.id
+                const rankConfig = getRankConfig(entry.rank)
+
+                return (
+                  <div
+                    key={entry.user.id}
+                    className={`
+                      relative flex items-center gap-4 p-4 rounded-xl
+                      transition-all duration-300 group
+                      ${isCurrentUser
+                        ? 'bg-neon-500/10 border border-neon-500/30 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
+                        : `${rankConfig.bg} border ${rankConfig.border} hover:border-neon-500/20`
+                      }
+                    `}
+                    style={{ animationDelay: `${index * 50}ms` }}
+                  >
+                    {/* Gradient overlay for top 3 */}
+                    {entry.rank <= 3 && (
+                      <div className={`absolute inset-0 bg-gradient-to-r ${rankConfig.gradient} rounded-xl pointer-events-none`} />
+                    )}
+
+                    {/* Rank */}
+                    <div className={`
+                      relative w-10 h-10 rounded-xl flex items-center justify-center
+                      ${rankConfig.bg} ${rankConfig.color} ${rankConfig.glow}
+                    `}>
+                      {rankConfig.icon}
+                    </div>
+
+                    {/* User info */}
+                    <div className="relative flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className={`font-semibold truncate ${isCurrentUser ? 'text-neon-400' : 'text-white'}`}>
+                          {entry.user.nickname}
+                        </span>
+                        {isCurrentUser && (
+                          <span className="px-2 py-0.5 text-xs font-medium bg-neon-500/20 text-neon-400 rounded-full border border-neon-500/30">
+                            Вы
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-3 text-sm text-gray-400">
+                        <span className="flex items-center gap-1">
+                          <span className="w-1.5 h-1.5 bg-green-500 rounded-full" />
+                          {entry.completed_count} выполнено
+                        </span>
+                        {entry.dropped_count > 0 && (
+                          <span className="flex items-center gap-1">
+                            <span className="w-1.5 h-1.5 bg-red-500 rounded-full" />
+                            {entry.dropped_count} пропущено
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Streak */}
+                    {entry.current_streak > 0 && (
+                      <div className="relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-orange-500/10 border border-orange-500/20">
+                        <Flame className="w-4 h-4 text-orange-400" />
+                        <span className="text-sm font-semibold text-orange-400">{entry.current_streak}</span>
+                      </div>
+                    )}
+
+                    {/* Points */}
+                    <div className="relative text-right">
+                      <div className={`text-xl font-bold ${isCurrentUser ? 'text-neon-400' : 'text-white'}`}>
+                        {entry.total_points}
+                      </div>
+                      <div className="text-xs text-gray-500">очков</div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </GlassCard>
+        </>
+      )}
     </div>
   )
 }

frontend/src/pages/LobbyPage.tsx

@@ -2,13 +2,13 @@ import { useState, useEffect } from 'react'
 import { useParams, useNavigate, Link } from 'react-router-dom'
 import { marathonsApi, gamesApi } from '@/api'
 import type { Marathon, Game, Challenge, ChallengePreview } from '@/types'
-import { Button, Input, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
+import { NeonButton, Input, GlassCard, StatsCard } from '@/components/ui'
 import { useAuthStore } from '@/store/auth'
 import { useToast } from '@/store/toast'
 import { useConfirm } from '@/store/confirm'
 import {
   Plus, Trash2, Sparkles, Play, Loader2, Gamepad2, X, Save, Eye,
-  ChevronDown, ChevronUp, Edit2, Check, CheckCircle, XCircle, Clock, User, ArrowLeft
+  ChevronDown, ChevronUp, Edit2, Check, CheckCircle, XCircle, Clock, User, ArrowLeft, Zap
 } from 'lucide-react'
 
 export function LobbyPage() {
@@ -72,17 +72,14 @@ export function LobbyPage() {
       const marathonData = await marathonsApi.get(parseInt(id))
       setMarathon(marathonData)
 
-      // Load games - organizers see all, participants see approved + own
       const gamesData = await gamesApi.list(parseInt(id))
       setGames(gamesData)
 
-      // If organizer, load pending games separately
       if (marathonData.my_participation?.role === 'organizer' || user?.role === 'admin') {
         try {
           const pending = await gamesApi.listPending(parseInt(id))
           setPendingGames(pending)
         } catch {
-          // If not authorized, just ignore
           setPendingGames([])
         }
       }
@@ -175,7 +172,6 @@ export function LobbyPage() {
 
     setExpandedGameId(gameId)
 
-    // Load challenges if we haven't loaded them yet
     if (!gameChallenges[gameId]) {
       setLoadingChallenges(gameId)
       try {
@@ -183,7 +179,6 @@ export function LobbyPage() {
         setGameChallenges(prev => ({ ...prev, [gameId]: challenges }))
       } catch (error) {
         console.error('Failed to load challenges:', error)
-        // Set empty array to prevent repeated attempts
         setGameChallenges(prev => ({ ...prev, [gameId]: [] }))
       } finally {
         setLoadingChallenges(null)
@@ -210,7 +205,6 @@ export function LobbyPage() {
         proof_hint: newChallenge.proof_hint.trim() || undefined,
       })
       toast.success('Задание добавлено')
-      // Reset form
       setNewChallenge({
         title: '',
         description: '',
@@ -222,7 +216,6 @@ export function LobbyPage() {
         proof_hint: '',
       })
       setAddingChallengeToGameId(null)
-      // Refresh challenges
       const challenges = await gamesApi.getChallenges(gameId)
       setGameChallenges(prev => ({ ...prev, [gameId]: challenges }))
       await loadData()
@@ -246,10 +239,9 @@ export function LobbyPage() {
 
     try {
       await gamesApi.deleteChallenge(challengeId)
-      // Refresh challenges for this game
       const challenges = await gamesApi.getChallenges(gameId)
       setGameChallenges(prev => ({ ...prev, [gameId]: challenges }))
-      await loadData() // Refresh game counts
+      await loadData()
     } catch (error) {
       console.error('Failed to delete challenge:', error)
     }
@@ -283,7 +275,7 @@ export function LobbyPage() {
       const result = await gamesApi.saveChallenges(parseInt(id), previewChallenges)
       setGenerateMessage(result.message)
       setPreviewChallenges(null)
-      setGameChallenges({}) // Clear cache to reload
+      setGameChallenges({})
       await loadData()
     } catch (error) {
       console.error('Failed to save challenges:', error)
@@ -337,8 +329,9 @@ export function LobbyPage() {
 
   if (isLoading || !marathon) {
     return (
-      <div className="flex justify-center py-12">
+      <div className="flex flex-col items-center justify-center py-24">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка лобби...</p>
       </div>
     )
   }
@@ -351,21 +344,21 @@ export function LobbyPage() {
     switch (status) {
       case 'approved':
         return (
-          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-green-900/50 text-green-400">
+          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30">
             <CheckCircle className="w-3 h-3" />
             Одобрено
           </span>
         )
       case 'pending':
         return (
-          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-yellow-900/50 text-yellow-400">
+          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-lg bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
             <Clock className="w-3 h-3" />
             На модерации
           </span>
         )
       case 'rejected':
         return (
-          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-red-900/50 text-red-400">
+          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30">
             <XCircle className="w-3 h-3" />
             Отклонено
           </span>
@@ -376,11 +369,11 @@ export function LobbyPage() {
   }
 
   const renderGameCard = (game: Game, showModeration = false) => (
-    <div key={game.id} className="bg-gray-900 rounded-lg overflow-hidden">
+    <div key={game.id} className="glass rounded-xl overflow-hidden border border-dark-600">
       {/* Game header */}
       <div
         className={`flex items-center justify-between p-4 ${
-          (game.status === 'approved') ? 'cursor-pointer hover:bg-gray-800/50' : ''
+          (game.status === 'approved') ? 'cursor-pointer hover:bg-dark-700/50 transition-colors' : ''
         }`}
         onClick={() => game.status === 'approved' && handleToggleGameChallenges(game.id)}
       >
@@ -394,14 +387,22 @@ export function LobbyPage() {
               )}
             </span>
           )}
+          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/20 flex items-center justify-center flex-shrink-0">
+            <Gamepad2 className="w-5 h-5 text-neon-400" />
+          </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              <h4 className="font-medium text-white">{game.title}</h4>
+              <h4 className="font-semibold text-white">{game.title}</h4>
               {getStatusBadge(game.status)}
             </div>
             <div className="text-sm text-gray-400 flex items-center gap-3 flex-wrap">
               {game.genre && <span>{game.genre}</span>}
-              {game.status === 'approved' && <span>{game.challenges_count} заданий</span>}
+              {game.status === 'approved' && (
+                <span className="flex items-center gap-1">
+                  <Sparkles className="w-3 h-3 text-accent-400" />
+                  {game.challenges_count} заданий
+                </span>
+              )}
               {game.proposed_by && (
                 <span className="flex items-center gap-1 text-gray-500">
                   <User className="w-3 h-3" />
@@ -414,49 +415,43 @@ export function LobbyPage() {
         <div className="flex items-center gap-2 shrink-0" onClick={(e) => e.stopPropagation()}>
           {showModeration && game.status === 'pending' && (
             <>
-              <Button
+              <button
-                variant="ghost"
-                size="sm"
                 onClick={() => handleApproveGame(game.id)}
                 disabled={moderatingGameId === game.id}
-                className="text-green-400 hover:text-green-300"
+                className="p-2 rounded-lg text-green-400 hover:bg-green-500/10 transition-colors disabled:opacity-50"
               >
                 {moderatingGameId === game.id ? (
                   <Loader2 className="w-4 h-4 animate-spin" />
                 ) : (
                   <CheckCircle className="w-4 h-4" />
                 )}
-              </Button>
+              </button>
-              <Button
+              <button
-                variant="ghost"
-                size="sm"
                 onClick={() => handleRejectGame(game.id)}
                 disabled={moderatingGameId === game.id}
-                className="text-red-400 hover:text-red-300"
+                className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-50"
               >
                 <XCircle className="w-4 h-4" />
-              </Button>
+              </button>
             </>
           )}
           {(isOrganizer || game.proposed_by?.id === user?.id) && (
-            <Button
+            <button
-              variant="ghost"
-              size="sm"
               onClick={() => handleDeleteGame(game.id)}
-              className="text-red-400 hover:text-red-300"
+              className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors"
             >
               <Trash2 className="w-4 h-4" />
-            </Button>
+            </button>
           )}
         </div>
       </div>
 
       {/* Expanded challenges list */}
       {expandedGameId === game.id && (
-        <div className="border-t border-gray-800 p-4 space-y-2">
+        <div className="border-t border-dark-600 p-4 space-y-2 bg-dark-800/30">
           {loadingChallenges === game.id ? (
             <div className="flex justify-center py-4">
-              <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+              <Loader2 className="w-5 h-5 animate-spin text-neon-400" />
             </div>
           ) : (
             <>
@@ -464,24 +459,24 @@ export function LobbyPage() {
                 gameChallenges[game.id].map((challenge) => (
                   <div
                     key={challenge.id}
-                    className="flex items-start justify-between gap-3 p-3 bg-gray-800 rounded-lg"
+                    className="flex items-start justify-between gap-3 p-3 bg-dark-700/50 rounded-lg border border-dark-600"
                   >
                     <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 mb-1">
+                      <div className="flex items-center gap-2 mb-1 flex-wrap">
-                        <span className={`text-xs px-2 py-0.5 rounded ${
+                        <span className={`text-xs px-2 py-0.5 rounded-lg border ${
-                          challenge.difficulty === 'easy' ? 'bg-green-900/50 text-green-400' :
+                          challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
-                          challenge.difficulty === 'medium' ? 'bg-yellow-900/50 text-yellow-400' :
+                          challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
-                          'bg-red-900/50 text-red-400'
+                          'bg-red-500/20 text-red-400 border-red-500/30'
                         }`}>
                           {challenge.difficulty === 'easy' ? 'Легко' :
                            challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
                         </span>
-                        <span className="text-xs text-primary-400 font-medium">
+                        <span className="text-xs text-neon-400 font-semibold">
                           +{challenge.points}
                         </span>
                         {challenge.is_generated && (
-                          <span className="text-xs text-gray-500">
+                          <span className="text-xs text-gray-500 flex items-center gap-1">
-                            <Sparkles className="w-3 h-3 inline" /> ИИ
+                            <Sparkles className="w-3 h-3" /> ИИ
                           </span>
                         )}
                       </div>
@@ -489,19 +484,17 @@ export function LobbyPage() {
                       <p className="text-xs text-gray-400 mt-1">{challenge.description}</p>
                     </div>
                     {isOrganizer && (
-                      <Button
+                      <button
-                        variant="ghost"
-                        size="sm"
                         onClick={() => handleDeleteChallenge(challenge.id, game.id)}
-                        className="text-red-400 hover:text-red-300 shrink-0"
+                        className="p-1.5 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors shrink-0"
                       >
                         <Trash2 className="w-3 h-3" />
-                      </Button>
+                      </button>
                     )}
                   </div>
                 ))
               ) : (
-                <p className="text-center text-gray-500 py-2 text-sm">
+                <p className="text-center text-gray-500 py-4 text-sm">
                   Нет заданий
                 </p>
               )}
@@ -509,8 +502,11 @@ export function LobbyPage() {
               {/* Add challenge form */}
               {isOrganizer && game.status === 'approved' && (
                 addingChallengeToGameId === game.id ? (
-                  <div className="mt-4 p-4 bg-gray-800 rounded-lg space-y-3 border border-gray-700">
+                  <div className="mt-4 p-4 glass rounded-xl space-y-3 border border-neon-500/20">
-                    <h4 className="font-medium text-white text-sm">Новое задание</h4>
+                    <h4 className="font-semibold text-white text-sm flex items-center gap-2">
+                      <Plus className="w-4 h-4 text-neon-400" />
+                      Новое задание
+                    </h4>
                     <Input
                       placeholder="Название задания"
                       value={newChallenge.title}
@@ -520,7 +516,7 @@ export function LobbyPage() {
                       placeholder="Описание (что нужно сделать)"
                       value={newChallenge.description}
                       onChange={(e) => setNewChallenge(prev => ({ ...prev, description: e.target.value }))}
-                      className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm resize-none"
+                      className="input w-full resize-none"
                       rows={2}
                     />
                     <div className="grid grid-cols-2 gap-2">
@@ -529,7 +525,7 @@ export function LobbyPage() {
                         <select
                           value={newChallenge.type}
                           onChange={(e) => setNewChallenge(prev => ({ ...prev, type: e.target.value }))}
-                          className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm"
+                          className="input w-full"
                         >
                           <option value="completion">Прохождение</option>
                           <option value="no_death">Без смертей</option>
@@ -544,7 +540,7 @@ export function LobbyPage() {
                         <select
                           value={newChallenge.difficulty}
                           onChange={(e) => setNewChallenge(prev => ({ ...prev, difficulty: e.target.value }))}
-                          className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm"
+                          className="input w-full"
                         >
                           <option value="easy">Легко (20-40 очков)</option>
                           <option value="medium">Средне (45-75 очков)</option>
@@ -575,11 +571,11 @@ export function LobbyPage() {
                     </div>
                     <div className="grid grid-cols-2 gap-2">
                       <div>
-                        <label className="text-xs text-gray-400 mb-1 block">Тип доказательства</label>
+                        <label className="text-xs text-gray-400 mb-1 block">Тип пруфа</label>
                         <select
                           value={newChallenge.proof_type}
                           onChange={(e) => setNewChallenge(prev => ({ ...prev, proof_type: e.target.value }))}
-                          className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm"
+                          className="input w-full"
                         >
                           <option value="screenshot">Скриншот</option>
                           <option value="video">Видео</option>
@@ -589,44 +585,42 @@ export function LobbyPage() {
                       <div>
                         <label className="text-xs text-gray-400 mb-1 block">Подсказка</label>
                         <Input
-                          placeholder="Что должно быть на пруфе"
+                          placeholder="Что на пруфе"
                           value={newChallenge.proof_hint}
                           onChange={(e) => setNewChallenge(prev => ({ ...prev, proof_hint: e.target.value }))}
                         />
                       </div>
                     </div>
                     <div className="flex gap-2">
-                      <Button
+                      <NeonButton
                         size="sm"
                         onClick={() => handleCreateChallenge(game.id)}
                         isLoading={isCreatingChallenge}
                         disabled={!newChallenge.title || !newChallenge.description}
+                        icon={<Plus className="w-4 h-4" />}
                       >
-                        <Plus className="w-4 h-4 mr-1" />
                         Добавить
-                      </Button>
+                      </NeonButton>
-                      <Button
+                      <NeonButton
-                        variant="ghost"
+                        variant="outline"
                         size="sm"
                         onClick={() => setAddingChallengeToGameId(null)}
                       >
                         Отмена
-                      </Button>
+                      </NeonButton>
                     </div>
                   </div>
                 ) : (
-                  <Button
+                  <button
-                    variant="ghost"
-                    size="sm"
                     onClick={() => {
                       setAddingChallengeToGameId(game.id)
                       setExpandedGameId(game.id)
                     }}
-                    className="w-full mt-2 border border-dashed border-gray-700 text-gray-400 hover:text-white hover:border-gray-600"
+                    className="w-full mt-2 p-3 rounded-lg border-2 border-dashed border-dark-600 text-gray-400 hover:text-neon-400 hover:border-neon-500/30 transition-all flex items-center justify-center gap-2"
                   >
-                    <Plus className="w-4 h-4 mr-1" />
+                    <Plus className="w-4 h-4" />
                     Добавить задание вручную
-                  </Button>
+                  </button>
                 )
               )}
             </>
@@ -639,14 +633,18 @@ export function LobbyPage() {
   return (
     <div className="max-w-4xl mx-auto">
       {/* Back button */}
-      <Link to={`/marathons/${id}`} className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
+      <Link
-        <ArrowLeft className="w-4 h-4" />
+        to={`/marathons/${id}`}
+        className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
+      >
+        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
         К марафону
       </Link>
 
-      <div className="flex justify-between items-center mb-8">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
         <div>
-          <h1 className="text-2xl font-bold text-white">{marathon.title}</h1>
+          <h1 className="text-2xl font-bold text-white mb-1">{marathon.title}</h1>
           <p className="text-gray-400">
             {isOrganizer
               ? 'Настройка - Добавьте игры и сгенерируйте задания'
@@ -655,296 +653,306 @@ export function LobbyPage() {
         </div>
 
         {isOrganizer && (
-          <Button onClick={handleStartMarathon} isLoading={isStarting} disabled={approvedGames.length === 0}>
+          <NeonButton
-            <Play className="w-4 h-4 mr-2" />
+            onClick={handleStartMarathon}
+            isLoading={isStarting}
+            disabled={approvedGames.length === 0}
+            icon={<Play className="w-4 h-4" />}
+          >
             Запустить марафон
-          </Button>
+          </NeonButton>
         )}
       </div>
 
-      {/* Stats - только для организаторов */}
+      {/* Stats */}
       {isOrganizer && (
         <div className="grid grid-cols-2 gap-4 mb-8">
-          <Card>
+          <StatsCard
-            <CardContent className="text-center py-4">
+            label="Игр одобрено"
-              <div className="text-2xl font-bold text-white">{approvedGames.length}</div>
+            value={approvedGames.length}
-              <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
+            icon={<Gamepad2 className="w-6 h-6" />}
-                <Gamepad2 className="w-4 h-4" />
+            color="neon"
-                Игр одобрено
+          />
-              </div>
+          <StatsCard
-            </CardContent>
+            label="Заданий"
-          </Card>
+            value={totalChallenges}
-
+            icon={<Sparkles className="w-6 h-6" />}
-          <Card>
+            color="purple"
-            <CardContent className="text-center py-4">
+          />
-              <div className="text-2xl font-bold text-white">{totalChallenges}</div>
-              <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
-                <Sparkles className="w-4 h-4" />
-                Заданий
-              </div>
-            </CardContent>
-          </Card>
         </div>
       )}
 
-      {/* Pending games for moderation (organizers only) */}
+      {/* Pending games for moderation */}
       {isOrganizer && pendingGames.length > 0 && (
-        <Card className="mb-8 border-yellow-900/50">
+        <GlassCard className="mb-8 border-yellow-500/30">
-          <CardHeader>
+          <div className="flex items-center gap-3 mb-4">
-            <CardTitle className="flex items-center gap-2 text-yellow-400">
+            <div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
-              <Clock className="w-5 h-5" />
+              <Clock className="w-5 h-5 text-yellow-400" />
-              На модерации ({pendingGames.length})
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              {pendingGames.map((game) => renderGameCard(game, true))}
             </div>
-          </CardContent>
+            <div>
-        </Card>
+              <h3 className="font-semibold text-yellow-400">На модерации</h3>
+              <p className="text-sm text-gray-400">{pendingGames.length} игр ожидают</p>
+            </div>
+          </div>
+          <div className="space-y-3">
+            {pendingGames.map((game) => renderGameCard(game, true))}
+          </div>
+        </GlassCard>
       )}
 
-      {/* Generate challenges button */}
+      {/* Generate challenges */}
       {isOrganizer && approvedGames.length > 0 && !previewChallenges && (
-        <Card className="mb-8">
+        <GlassCard className="mb-8">
-          <CardContent>
+          <div className="flex items-center justify-between gap-4 flex-wrap">
-            <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
+                <Zap className="w-5 h-5 text-accent-400" />
+              </div>
               <div>
-                <h3 className="font-medium text-white">Генерация заданий</h3>
+                <h3 className="font-semibold text-white">Генерация заданий</h3>
                 <p className="text-sm text-gray-400">
-                  Используйте ИИ для генерации заданий для одобренных игр без заданий
+                  ИИ создаст задания для игр без заданий
                 </p>
               </div>
-              <Button onClick={handleGenerateChallenges} isLoading={isGenerating} variant="secondary">
-                <Sparkles className="w-4 h-4 mr-2" />
-                Сгенерировать
-              </Button>
             </div>
-            {generateMessage && (
+            <NeonButton
-              <p className="mt-3 text-sm text-primary-400">{generateMessage}</p>
+              onClick={handleGenerateChallenges}
-            )}
+              isLoading={isGenerating}
-          </CardContent>
+              variant="outline"
-        </Card>
+              color="purple"
+              icon={<Sparkles className="w-4 h-4" />}
+            >
+              Сгенерировать
+            </NeonButton>
+          </div>
+          {generateMessage && (
+            <p className="mt-4 text-sm text-neon-400 p-3 bg-neon-500/10 rounded-lg border border-neon-500/20">
+              {generateMessage}
+            </p>
+          )}
+        </GlassCard>
       )}
 
-      {/* Challenge preview with editing */}
+      {/* Challenge preview */}
       {previewChallenges && previewChallenges.length > 0 && (
-        <Card className="mb-8">
+        <GlassCard className="mb-8 border-accent-500/30">
-          <CardHeader className="flex flex-row items-center justify-between">
+          <div className="flex items-center justify-between mb-4 flex-wrap gap-4">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-3">
-              <Eye className="w-5 h-5 text-primary-400" />
+              <div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
-              <CardTitle>Предпросмотр заданий ({previewChallenges.length})</CardTitle>
+                <Eye className="w-5 h-5 text-accent-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Предпросмотр заданий</h3>
+                <p className="text-sm text-gray-400">{previewChallenges.length} заданий</p>
+              </div>
             </div>
             <div className="flex gap-2">
-              <Button onClick={handleCancelPreview} variant="ghost" size="sm">
+              <NeonButton onClick={handleCancelPreview} variant="outline" size="sm" icon={<X className="w-4 h-4" />}>
-                <X className="w-4 h-4 mr-1" />
                 Отмена
-              </Button>
+              </NeonButton>
-              <Button onClick={handleSaveChallenges} isLoading={isSaving} size="sm">
+              <NeonButton onClick={handleSaveChallenges} isLoading={isSaving} size="sm" icon={<Save className="w-4 h-4" />}>
-                <Save className="w-4 h-4 mr-1" />
                 Сохранить все
-              </Button>
+              </NeonButton>
             </div>
-          </CardHeader>
+          </div>
-          <CardContent>
+          <div className="space-y-3 max-h-[60vh] overflow-y-auto custom-scrollbar">
-            <div className="space-y-3 max-h-[60vh] overflow-y-auto">
+            {previewChallenges.map((challenge, index) => (
-              {previewChallenges.map((challenge, index) => (
+              <div
-                <div
+                key={index}
-                  key={index}
+                className="p-4 bg-dark-700/50 rounded-xl border border-dark-600"
-                  className="p-4 bg-gray-900 rounded-lg border border-gray-800"
+              >
-                >
+                {editingIndex === index ? (
-                  {editingIndex === index ? (
+                  <div className="space-y-3">
-                    // Edit mode
+                    <span className="text-xs px-2 py-0.5 rounded-lg bg-dark-600 text-gray-400">
-                    <div className="space-y-3">
+                      {challenge.game_title}
-                      <div className="flex items-center gap-2">
+                    </span>
-                        <span className="text-xs px-2 py-0.5 rounded bg-gray-800 text-gray-400">
+                    <Input
+                      value={challenge.title}
+                      onChange={(e) => handleUpdatePreviewChallenge(index, 'title', e.target.value)}
+                      placeholder="Название"
+                    />
+                    <textarea
+                      value={challenge.description}
+                      onChange={(e) => handleUpdatePreviewChallenge(index, 'description', e.target.value)}
+                      placeholder="Описание"
+                      className="input w-full resize-none"
+                      rows={2}
+                    />
+                    <div className="grid grid-cols-3 gap-2">
+                      <select
+                        value={challenge.difficulty}
+                        onChange={(e) => handleUpdatePreviewChallenge(index, 'difficulty', e.target.value)}
+                        className="input"
+                      >
+                        <option value="easy">Легко</option>
+                        <option value="medium">Средне</option>
+                        <option value="hard">Сложно</option>
+                      </select>
+                      <Input
+                        type="number"
+                        value={challenge.points}
+                        onChange={(e) => handleUpdatePreviewChallenge(index, 'points', parseInt(e.target.value) || 0)}
+                        placeholder="Очки"
+                      />
+                      <select
+                        value={challenge.proof_type}
+                        onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_type', e.target.value)}
+                        className="input"
+                      >
+                        <option value="screenshot">Скриншот</option>
+                        <option value="video">Видео</option>
+                        <option value="steam">Steam</option>
+                      </select>
+                    </div>
+                    <Input
+                      value={challenge.proof_hint || ''}
+                      onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_hint', e.target.value)}
+                      placeholder="Подсказка для пруфа"
+                    />
+                    <div className="flex gap-2">
+                      <NeonButton size="sm" onClick={() => setEditingIndex(null)} icon={<Check className="w-4 h-4" />}>
+                        Готово
+                      </NeonButton>
+                      <NeonButton
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleRemovePreviewChallenge(index)}
+                        className="text-red-400 border-red-500/30 hover:bg-red-500/10"
+                        icon={<Trash2 className="w-4 h-4" />}
+                      >
+                        Удалить
+                      </NeonButton>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1 flex-wrap">
+                        <span className="text-xs px-2 py-0.5 rounded-lg bg-dark-600 text-gray-400">
                           {challenge.game_title}
                         </span>
+                        <span className={`text-xs px-2 py-0.5 rounded-lg border ${
+                          challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
+                          challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
+                          'bg-red-500/20 text-red-400 border-red-500/30'
+                        }`}>
+                          {challenge.difficulty === 'easy' ? 'Легко' :
+                           challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
+                        </span>
+                        <span className="text-xs text-neon-400 font-semibold">
+                          +{challenge.points} очков
+                        </span>
                       </div>
-                      <Input
+                      <h4 className="font-medium text-white mb-1">{challenge.title}</h4>
-                        value={challenge.title}
+                      <p className="text-sm text-gray-400">{challenge.description}</p>
-                        onChange={(e) => handleUpdatePreviewChallenge(index, 'title', e.target.value)}
+                      {challenge.proof_hint && (
-                        placeholder="Название"
+                        <p className="text-xs text-gray-500 mt-2">
-                        className="bg-gray-800"
+                          Пруф: {challenge.proof_hint}
-                      />
+                        </p>
-                      <textarea
+                      )}
-                        value={challenge.description}
-                        onChange={(e) => handleUpdatePreviewChallenge(index, 'description', e.target.value)}
-                        placeholder="Описание"
-                        className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm resize-none"
-                        rows={2}
-                      />
-                      <div className="grid grid-cols-3 gap-2">
-                        <select
-                          value={challenge.difficulty}
-                          onChange={(e) => handleUpdatePreviewChallenge(index, 'difficulty', e.target.value)}
-                          className="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm"
-                        >
-                          <option value="easy">Легко</option>
-                          <option value="medium">Средне</option>
-                          <option value="hard">Сложно</option>
-                        </select>
-                        <Input
-                          type="number"
-                          value={challenge.points}
-                          onChange={(e) => handleUpdatePreviewChallenge(index, 'points', parseInt(e.target.value) || 0)}
-                          placeholder="Очки"
-                          className="bg-gray-800"
-                        />
-                        <select
-                          value={challenge.proof_type}
-                          onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_type', e.target.value)}
-                          className="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm"
-                        >
-                          <option value="screenshot">Скриншот</option>
-                          <option value="video">Видео</option>
-                          <option value="steam">Steam</option>
-                        </select>
-                      </div>
-                      <Input
-                        value={challenge.proof_hint || ''}
-                        onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_hint', e.target.value)}
-                        placeholder="Подсказка для подтверждения"
-                        className="bg-gray-800"
-                      />
-                      <div className="flex gap-2">
-                        <Button size="sm" onClick={() => setEditingIndex(null)}>
-                          <Check className="w-4 h-4 mr-1" />
-                          Готово
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleRemovePreviewChallenge(index)}
-                          className="text-red-400 hover:text-red-300"
-                        >
-                          <Trash2 className="w-4 h-4 mr-1" />
-                          Удалить
-                        </Button>
-                      </div>
                     </div>
-                  ) : (
+                    <div className="flex gap-1 shrink-0">
-                    // View mode
+                      <button
-                    <div className="flex items-start justify-between gap-4">
+                        onClick={() => setEditingIndex(index)}
-                      <div className="flex-1 min-w-0">
+                        className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
-                        <div className="flex items-center gap-2 mb-1">
+                      >
-                          <span className="text-xs px-2 py-0.5 rounded bg-gray-800 text-gray-400">
+                        <Edit2 className="w-4 h-4" />
-                            {challenge.game_title}
+                      </button>
-                          </span>
+                      <button
-                          <span className={`text-xs px-2 py-0.5 rounded ${
+                        onClick={() => handleRemovePreviewChallenge(index)}
-                            challenge.difficulty === 'easy' ? 'bg-green-900/50 text-green-400' :
+                        className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors"
-                            challenge.difficulty === 'medium' ? 'bg-yellow-900/50 text-yellow-400' :
+                      >
-                            'bg-red-900/50 text-red-400'
+                        <X className="w-4 h-4" />
-                          }`}>
+                      </button>
-                            {challenge.difficulty === 'easy' ? 'Легко' :
-                             challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
-                          </span>
-                          <span className="text-xs text-primary-400 font-medium">
-                            +{challenge.points} очков
-                          </span>
-                        </div>
-                        <h4 className="font-medium text-white mb-1">{challenge.title}</h4>
-                        <p className="text-sm text-gray-400">{challenge.description}</p>
-                        {challenge.proof_hint && (
-                          <p className="text-xs text-gray-500 mt-2">
-                            Подтверждение: {challenge.proof_hint}
-                          </p>
-                        )}
-                      </div>
-                      <div className="flex gap-1 shrink-0">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => setEditingIndex(index)}
-                          className="text-gray-400 hover:text-white"
-                        >
-                          <Edit2 className="w-4 h-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleRemovePreviewChallenge(index)}
-                          className="text-red-400 hover:text-red-300"
-                        >
-                          <X className="w-4 h-4" />
-                        </Button>
-                      </div>
                     </div>
-                  )}
+                  </div>
-                </div>
+                )}
-              ))}
+              </div>
-            </div>
+            ))}
-          </CardContent>
+          </div>
-        </Card>
+        </GlassCard>
       )}
 
       {/* Games list */}
-      <Card>
+      <GlassCard>
-        <CardHeader className="flex flex-row items-center justify-between">
+        <div className="flex items-center justify-between mb-6">
-          <CardTitle>Игры</CardTitle>
+          <div className="flex items-center gap-3">
-          {/* Показываем кнопку если: all_participants ИЛИ (organizer_only И isOrganizer) */}
+            <div className="w-10 h-10 rounded-xl bg-neon-500/20 flex items-center justify-center">
-          {(marathon.game_proposal_mode === 'all_participants' || isOrganizer) && (
+              <Gamepad2 className="w-5 h-5 text-neon-400" />
-            <Button size="sm" onClick={() => setShowAddGame(!showAddGame)}>
-              <Plus className="w-4 h-4 mr-1" />
-              {isOrganizer ? 'Добавить игру' : 'Предложить игру'}
-            </Button>
-          )}
-        </CardHeader>
-        <CardContent>
-          {/* Add game form */}
-          {showAddGame && (
-            <div className="mb-6 p-4 bg-gray-900 rounded-lg space-y-3">
-              <Input
-                placeholder="Название игры"
-                value={gameTitle}
-                onChange={(e) => setGameTitle(e.target.value)}
-              />
-              <Input
-                placeholder="Ссылка для скачивания"
-                value={gameUrl}
-                onChange={(e) => setGameUrl(e.target.value)}
-              />
-              <Input
-                placeholder="Жанр (необязательно)"
-                value={gameGenre}
-                onChange={(e) => setGameGenre(e.target.value)}
-              />
-              <div className="flex gap-2">
-                <Button onClick={handleAddGame} isLoading={isAddingGame} disabled={!gameTitle || !gameUrl}>
-                  {isOrganizer ? 'Добавить' : 'Предложить'}
-                </Button>
-                <Button variant="ghost" onClick={() => setShowAddGame(false)}>
-                  Отмена
-                </Button>
-              </div>
-              {!isOrganizer && (
-                <p className="text-xs text-gray-500">
-                  Ваша игра будет отправлена на модерацию организаторам
-                </p>
-              )}
             </div>
+            <h3 className="font-semibold text-white">Игры</h3>
+          </div>
+          {(marathon.game_proposal_mode === 'all_participants' || isOrganizer) && (
+            <NeonButton
+              size="sm"
+              onClick={() => setShowAddGame(!showAddGame)}
+              icon={<Plus className="w-4 h-4" />}
+            >
+              {isOrganizer ? 'Добавить' : 'Предложить'}
+            </NeonButton>
           )}
+        </div>
 
-          {/* Games */}
+        {/* Add game form */}
-          {(() => {
+        {showAddGame && (
-            // Организаторы: показываем только одобренные (pending в секции модерации)
+          <div className="mb-6 p-4 glass rounded-xl space-y-3 border border-neon-500/20">
-            // Участники: показываем одобренные + свои pending
+            <Input
-            const visibleGames = isOrganizer
+              placeholder="Название игры"
-              ? games.filter(g => g.status !== 'pending')
+              value={gameTitle}
-              : games.filter(g => g.status === 'approved' || (g.status === 'pending' && g.proposed_by?.id === user?.id))
+              onChange={(e) => setGameTitle(e.target.value)}
+            />
+            <Input
+              placeholder="Ссылка для скачивания"
+              value={gameUrl}
+              onChange={(e) => setGameUrl(e.target.value)}
+            />
+            <Input
+              placeholder="Жанр (необязательно)"
+              value={gameGenre}
+              onChange={(e) => setGameGenre(e.target.value)}
+            />
+            <div className="flex gap-2">
+              <NeonButton
+                onClick={handleAddGame}
+                isLoading={isAddingGame}
+                disabled={!gameTitle || !gameUrl}
+              >
+                {isOrganizer ? 'Добавить' : 'Предложить'}
+              </NeonButton>
+              <NeonButton variant="outline" onClick={() => setShowAddGame(false)}>
+                Отмена
+              </NeonButton>
+            </div>
+            {!isOrganizer && (
+              <p className="text-xs text-gray-500">
+                Игра будет отправлена на модерацию организаторам
+              </p>
+            )}
+          </div>
+        )}
 
-            return visibleGames.length === 0 ? (
+        {/* Games */}
-              <p className="text-center text-gray-400 py-8">
+        {(() => {
+          const visibleGames = isOrganizer
+            ? games.filter(g => g.status !== 'pending')
+            : games.filter(g => g.status === 'approved' || (g.status === 'pending' && g.proposed_by?.id === user?.id))
+
+          return visibleGames.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-700 flex items-center justify-center">
+                <Gamepad2 className="w-8 h-8 text-gray-600" />
+              </div>
+              <p className="text-gray-400">
                 {isOrganizer ? 'Пока нет игр. Добавьте игры, чтобы начать!' : 'Пока нет одобренных игр. Предложите свою!'}
               </p>
-            ) : (
+            </div>
-              <div className="space-y-3">
+          ) : (
-                {visibleGames.map((game) => renderGameCard(game, false))}
+            <div className="space-y-3">
-              </div>
+              {visibleGames.map((game) => renderGameCard(game, false))}
-            )
+            </div>
-          })()}
+          )
-        </CardContent>
+        })()}
-      </Card>
+      </GlassCard>
     </div>
   )
 }

frontend/src/pages/LoginPage.tsx

@@ -5,7 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useAuthStore } from '@/store/auth'
 import { marathonsApi } from '@/api'
-import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
+import { NeonButton, Input } from '@/components/ui'
+import { Gamepad2, LogIn, AlertCircle } from 'lucide-react'
 
 const loginSchema = z.object({
   login: z.string().min(3, 'Логин должен быть не менее 3 символов'),
@@ -52,16 +53,33 @@ export function LoginPage() {
   }
 
   return (
-    <div className="max-w-md mx-auto">
+    <div className="min-h-[80vh] flex items-center justify-center px-4 -mt-8">
-      <Card>
+      {/* Background effects */}
-        <CardHeader>
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
-          <CardTitle className="text-center">Вход</CardTitle>
+        <div className="absolute top-1/4 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
-        </CardHeader>
+        <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
-        <CardContent>
+      </div>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+
+      <div className="relative w-full max-w-md">
+        {/* Card */}
+        <div className="glass-neon rounded-2xl p-8 animate-scale-in">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="flex justify-center mb-4">
+              <div className="w-16 h-16 rounded-2xl bg-neon-500/10 border border-neon-500/30 flex items-center justify-center">
+                <Gamepad2 className="w-8 h-8 text-neon-500" />
+              </div>
+            </div>
+            <h1 className="text-2xl font-bold text-white mb-2">Добро пожаловать!</h1>
+            <p className="text-gray-400">Войдите, чтобы продолжить</p>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
             {(submitError || error) && (
-              <div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
+              <div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
-                {submitError || error}
+                <AlertCircle className="w-5 h-5 flex-shrink-0" />
+                <span>{submitError || error}</span>
               </div>
             )}
 
@@ -69,6 +87,7 @@ export function LoginPage() {
               label="Логин"
               placeholder="Введите логин"
               error={errors.login?.message}
+              autoComplete="username"
               {...register('login')}
             />
 
@@ -77,22 +96,39 @@ export function LoginPage() {
               type="password"
               placeholder="Введите пароль"
               error={errors.password?.message}
+              autoComplete="current-password"
               {...register('password')}
             />
 
-            <Button type="submit" className="w-full" isLoading={isLoading}>
+            <NeonButton
+              type="submit"
+              className="w-full"
+              size="lg"
+              isLoading={isLoading}
+              icon={<LogIn className="w-5 h-5" />}
+            >
               Войти
-            </Button>
+            </NeonButton>
+          </form>
 
-            <p className="text-center text-gray-400 text-sm">
+          {/* Footer */}
+          <div className="mt-6 pt-6 border-t border-dark-600 text-center">
+            <p className="text-gray-400 text-sm">
               Нет аккаунта?{' '}
-              <Link to="/register" className="link">
+              <Link
+                to="/register"
+                className="text-neon-400 hover:text-neon-300 transition-colors font-medium"
+              >
                 Зарегистрироваться
               </Link>
             </p>
-          </form>
+          </div>
-        </CardContent>
+        </div>
-      </Card>
+
+        {/* Decorative elements */}
+        <div className="absolute -top-4 -right-4 w-24 h-24 border border-neon-500/20 rounded-2xl -z-10" />
+        <div className="absolute -bottom-4 -left-4 w-32 h-32 border border-accent-500/20 rounded-2xl -z-10" />
+      </div>
     </div>
   )
 }

frontend/src/pages/MarathonPage.tsx

@@ -2,15 +2,20 @@ import { useState, useEffect, useRef } from 'react'
 import { useParams, useNavigate, Link } from 'react-router-dom'
 import { marathonsApi, eventsApi, challengesApi } from '@/api'
 import type { Marathon, ActiveEvent, Challenge } from '@/types'
-import { Button, Card, CardContent } from '@/components/ui'
+import { NeonButton, GlassCard, StatsCard } from '@/components/ui'
 import { useAuthStore } from '@/store/auth'
 import { useToast } from '@/store/toast'
 import { useConfirm } from '@/store/confirm'
 import { EventBanner } from '@/components/EventBanner'
 import { EventControl } from '@/components/EventControl'
 import { ActivityFeed, type ActivityFeedRef } from '@/components/ActivityFeed'
-import { Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2, Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft, Zap, Flag } from 'lucide-react'
+import {
+  Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2,
+  Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft, Zap, Flag,
+  Star, Target, TrendingDown, ChevronDown, ChevronUp, Link2
+} from 'lucide-react'
 import { format } from 'date-fns'
+import { ru } from 'date-fns/locale'
 
 export function MarathonPage() {
   const { id } = useParams<{ id: string }>()
@@ -39,12 +44,10 @@ export function MarathonPage() {
       const data = await marathonsApi.get(parseInt(id))
       setMarathon(data)
 
-      // Load event data if marathon is active
       if (data.status === 'active' && data.my_participation) {
         const eventData = await eventsApi.getActive(parseInt(id))
         setActiveEvent(eventData)
 
-        // Load challenges for event control if organizer
         if (data.my_participation.role === 'organizer') {
           try {
             const challengesData = await challengesApi.list(parseInt(id))
@@ -67,7 +70,6 @@ export function MarathonPage() {
     try {
       const eventData = await eventsApi.getActive(parseInt(id))
       setActiveEvent(eventData)
-      // Refresh activity feed when event changes
       activityFeedRef.current?.refresh()
     } catch (error) {
       console.error('Failed to refresh event:', error)
@@ -153,8 +155,9 @@ export function MarathonPage() {
 
   if (isLoading || !marathon) {
     return (
-      <div className="flex justify-center py-12">
+      <div className="flex flex-col items-center justify-center py-24">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка марафона...</p>
       </div>
     )
   }
@@ -164,265 +167,257 @@ export function MarathonPage() {
   const isCreator = marathon.creator.id === user?.id
   const canDelete = isCreator || user?.role === 'admin'
 
+  const statusConfig = {
+    active: { color: 'text-neon-400', bg: 'bg-neon-500/20', border: 'border-neon-500/30', label: 'Активен' },
+    preparing: { color: 'text-yellow-400', bg: 'bg-yellow-500/20', border: 'border-yellow-500/30', label: 'Подготовка' },
+    finished: { color: 'text-gray-400', bg: 'bg-gray-500/20', border: 'border-gray-500/30', label: 'Завершён' },
+  }
+  const status = statusConfig[marathon.status as keyof typeof statusConfig] || statusConfig.finished
+
   return (
     <div className="max-w-7xl mx-auto">
       {/* Back button */}
-      <Link to="/marathons" className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
+      <Link
-        <ArrowLeft className="w-4 h-4" />
+        to="/marathons"
+        className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
+      >
+        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
         К списку марафонов
       </Link>
 
-      <div className="flex flex-col lg:flex-row gap-6">
+      {/* Hero Banner */}
-        {/* Main content */}
+      <div className="relative rounded-2xl overflow-hidden mb-8">
-        <div className="flex-1 min-w-0">
+        {/* Background */}
-          {/* Header */}
+        <div className="absolute inset-0 bg-gradient-to-br from-neon-500/10 via-dark-800 to-accent-500/10" />
-          <div className="flex justify-between items-start mb-8">
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px]" />
-            <div>
+
-              <div className="flex items-center gap-3 mb-2">
+        <div className="relative p-8">
-                <h1 className="text-3xl font-bold text-white">{marathon.title}</h1>
+          <div className="flex flex-col md:flex-row justify-between items-start gap-6">
-                <span className={`flex items-center gap-1 text-xs px-2 py-1 rounded ${
+            {/* Title & Description */}
+            <div className="flex-1">
+              <div className="flex flex-wrap items-center gap-3 mb-3">
+                <h1 className="text-3xl md:text-4xl font-bold text-white">{marathon.title}</h1>
+                <span className={`flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border ${
                   marathon.is_public
-                    ? 'bg-green-900/50 text-green-400'
+                    ? 'bg-green-500/20 text-green-400 border-green-500/30'
-                    : 'bg-gray-700 text-gray-300'
+                    : 'bg-dark-700 text-gray-300 border-dark-600'
                 }`}>
-                  {marathon.is_public ? (
+                  {marathon.is_public ? <Globe className="w-3 h-3" /> : <Lock className="w-3 h-3" />}
-                    <><Globe className="w-3 h-3" /> Открытый</>
+                  {marathon.is_public ? 'Открытый' : 'Закрытый'}
-                  ) : (
+                </span>
-                    <><Lock className="w-3 h-3" /> Закрытый</>
+                <span className={`flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border ${status.bg} ${status.color} ${status.border}`}>
-                  )}
+                  <span className={`w-2 h-2 rounded-full ${marathon.status === 'active' ? 'bg-neon-500 animate-pulse' : marathon.status === 'preparing' ? 'bg-yellow-500' : 'bg-gray-500'}`} />
+                  {status.label}
                 </span>
               </div>
               {marathon.description && (
-                <p className="text-gray-400">{marathon.description}</p>
+                <p className="text-gray-400 max-w-2xl">{marathon.description}</p>
               )}
             </div>
 
-            <div className="flex gap-2 flex-wrap justify-end">
+            {/* Action Buttons */}
-              {/* Кнопка присоединиться для открытых марафонов */}
+            <div className="flex flex-wrap gap-2">
               {marathon.is_public && !isParticipant && marathon.status !== 'finished' && (
-                <Button onClick={handleJoinPublic} isLoading={isJoining}>
+                <NeonButton onClick={handleJoinPublic} isLoading={isJoining} icon={<UserPlus className="w-4 h-4" />}>
-                  <UserPlus className="w-4 h-4 mr-2" />
                   Присоединиться
-                </Button>
+                </NeonButton>
               )}
 
-              {/* Настройка для организаторов */}
               {marathon.status === 'preparing' && isOrganizer && (
                 <Link to={`/marathons/${id}/lobby`}>
-                  <Button variant="secondary">
+                  <NeonButton variant="secondary" icon={<Settings className="w-4 h-4" />}>
-                    <Settings className="w-4 h-4 mr-2" />
                     Настройка
-                  </Button>
+                  </NeonButton>
                 </Link>
               )}
 
-              {/* Предложить игру для участников (не организаторов) если разрешено */}
               {marathon.status === 'preparing' && isParticipant && !isOrganizer && marathon.game_proposal_mode === 'all_participants' && (
                 <Link to={`/marathons/${id}/lobby`}>
-                  <Button variant="secondary">
+                  <NeonButton variant="secondary" icon={<Gamepad2 className="w-4 h-4" />}>
-                    <Gamepad2 className="w-4 h-4 mr-2" />
                     Предложить игру
-                  </Button>
+                  </NeonButton>
                 </Link>
               )}
 
               {marathon.status === 'active' && isParticipant && (
                 <Link to={`/marathons/${id}/play`}>
-                  <Button>
+                  <NeonButton icon={<Play className="w-4 h-4" />}>
-                    <Play className="w-4 h-4 mr-2" />
                     Играть
-                  </Button>
+                  </NeonButton>
                 </Link>
               )}
 
               <Link to={`/marathons/${id}/leaderboard`}>
-                <Button variant="secondary">
+                <NeonButton variant="outline" icon={<Trophy className="w-4 h-4" />}>
-                  <Trophy className="w-4 h-4 mr-2" />
                   Рейтинг
-                </Button>
+                </NeonButton>
               </Link>
 
               {marathon.status === 'active' && isOrganizer && (
-                <Button
+                <NeonButton
                   variant="secondary"
                   onClick={handleFinish}
                   isLoading={isFinishing}
-                  className="text-yellow-400 hover:text-yellow-300 hover:bg-yellow-900/20"
+                  icon={<Flag className="w-4 h-4" />}
+                  className="!text-yellow-400 !border-yellow-500/30 hover:!bg-yellow-500/10"
                 >
-                  <Flag className="w-4 h-4 mr-2" />
                   Завершить
-                </Button>
+                </NeonButton>
               )}
 
               {canDelete && (
-                <Button
+                <NeonButton
                   variant="ghost"
                   onClick={handleDelete}
                   isLoading={isDeleting}
-                  className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
+                  className="!text-red-400 hover:!bg-red-500/10"
-                >
+                  icon={<Trash2 className="w-4 h-4" />}
-                  <Trash2 className="w-4 h-4" />
+                />
-                </Button>
               )}
             </div>
           </div>
+        </div>
+      </div>
 
+      <div className="flex flex-col lg:flex-row gap-6">
+        {/* Main content */}
+        <div className="flex-1 min-w-0 space-y-6">
           {/* Stats */}
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-            <Card>
+            <StatsCard
-              <CardContent className="text-center py-4">
+              label="Участников"
-                <div className="text-2xl font-bold text-white">{marathon.participants_count}</div>
+              value={marathon.participants_count}
-                <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
+              icon={<Users className="w-5 h-5" />}
-                  <Users className="w-4 h-4" />
+              color="neon"
-                  Участников
+            />
-                </div>
+            <StatsCard
-              </CardContent>
+              label="Игр"
-            </Card>
+              value={marathon.games_count}
-
+              icon={<Gamepad2 className="w-5 h-5" />}
-            <Card>
+              color="purple"
-              <CardContent className="text-center py-4">
+            />
-                <div className="text-2xl font-bold text-white">{marathon.games_count}</div>
+            <StatsCard
-                <div className="text-sm text-gray-400">Игр</div>
+              label="Начало"
-              </CardContent>
+              value={marathon.start_date ? format(new Date(marathon.start_date), 'd MMM', { locale: ru }) : '-'}
-            </Card>
+              icon={<Calendar className="w-5 h-5" />}
-
+              color="default"
-            <Card>
+            />
-              <CardContent className="text-center py-4">
+            <StatsCard
-                <div className="text-2xl font-bold text-white">
+              label="Конец"
-                  {marathon.start_date ? format(new Date(marathon.start_date), 'd MMM') : '-'}
+              value={marathon.end_date ? format(new Date(marathon.end_date), 'd MMM', { locale: ru }) : '-'}
-                </div>
+              icon={<CalendarCheck className="w-5 h-5" />}
-                <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
+              color="default"
-                  <Calendar className="w-4 h-4" />
+            />
-                  Начало
+            <StatsCard
-                </div>
+              label="Статус"
-              </CardContent>
+              value={status.label}
-            </Card>
+              icon={<Target className="w-5 h-5" />}
-
+              color={marathon.status === 'active' ? 'neon' : marathon.status === 'preparing' ? 'default' : 'default'}
-            <Card>
+            />
-              <CardContent className="text-center py-4">
-                <div className="text-2xl font-bold text-white">
-                  {marathon.end_date ? format(new Date(marathon.end_date), 'd MMM') : '-'}
-                </div>
-                <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
-                  <CalendarCheck className="w-4 h-4" />
-                  Конец
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardContent className="text-center py-4">
-                <div className={`text-2xl font-bold ${
-                  marathon.status === 'active' ? 'text-green-500' :
-                  marathon.status === 'preparing' ? 'text-yellow-500' : 'text-gray-400'
-                }`}>
-                  {marathon.status === 'active' ? 'Активен' : marathon.status === 'preparing' ? 'Подготовка' : 'Завершён'}
-                </div>
-                <div className="text-sm text-gray-400">Статус</div>
-              </CardContent>
-            </Card>
           </div>
 
           {/* Active event banner */}
           {marathon.status === 'active' && activeEvent?.event && (
-            <div className="mb-8">
+            <EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
-              <EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
-            </div>
           )}
 
           {/* Event control for organizers */}
           {marathon.status === 'active' && isOrganizer && (
-            <Card className="mb-8">
+            <GlassCard>
-              <CardContent>
+              <button
-                <div className="flex items-center justify-between mb-4">
+                onClick={() => setShowEventControl(!showEventControl)}
-                  <h3 className="font-medium text-white flex items-center gap-2">
+                className="w-full flex items-center justify-between"
-                    <Zap className="w-5 h-5 text-yellow-500" />
+              >
-                    Управление событиями
+                <div className="flex items-center gap-3">
-                  </h3>
+                  <div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
-                  <Button
+                    <Zap className="w-5 h-5 text-yellow-400" />
-                    variant="ghost"
+                  </div>
-                    size="sm"
+                  <div className="text-left">
-                    onClick={() => setShowEventControl(!showEventControl)}
+                    <h3 className="font-semibold text-white">Управление событиями</h3>
-                  >
+                    <p className="text-sm text-gray-400">Активируйте бонусы для участников</p>
-                    {showEventControl ? 'Скрыть' : 'Показать'}
+                  </div>
-                  </Button>
                 </div>
-                {showEventControl && activeEvent && (
+                {showEventControl ? (
+                  <ChevronUp className="w-5 h-5 text-gray-400" />
+                ) : (
+                  <ChevronDown className="w-5 h-5 text-gray-400" />
+                )}
+              </button>
+              {showEventControl && activeEvent && (
+                <div className="mt-6 pt-6 border-t border-dark-600">
                   <EventControl
                     marathonId={marathon.id}
                     activeEvent={activeEvent}
                     challenges={challenges}
                     onEventChange={refreshEvent}
                   />
-                )}
+                </div>
-              </CardContent>
+              )}
-            </Card>
+            </GlassCard>
           )}
 
           {/* Invite link */}
           {marathon.status !== 'finished' && (
-            <Card className="mb-8">
+            <GlassCard>
-              <CardContent>
+              <div className="flex items-center gap-3 mb-4">
-                <h3 className="font-medium text-white mb-3">Ссылка для приглашения</h3>
+                <div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
-                <div className="flex items-center gap-3">
+                  <Link2 className="w-5 h-5 text-accent-400" />
-                  <code className="flex-1 px-4 py-2 bg-gray-900 rounded-lg text-primary-400 font-mono text-sm overflow-hidden text-ellipsis">
-                    {getInviteLink()}
-                  </code>
-                  <Button variant="secondary" onClick={copyInviteLink}>
-                    {copied ? (
-                      <>
-                        <Check className="w-4 h-4 mr-2" />
-                        Скопировано!
-                      </>
-                    ) : (
-                      <>
-                        <Copy className="w-4 h-4 mr-2" />
-                        Копировать
-                      </>
-                    )}
-                  </Button>
                 </div>
-                <p className="text-sm text-gray-500 mt-2">
+                <div>
-                  Поделитесь этой ссылкой с друзьями, чтобы они могли присоединиться к марафону
+                  <h3 className="font-semibold text-white">Пригласить друзей</h3>
-                </p>
+                  <p className="text-sm text-gray-400">Поделитесь ссылкой</p>
-              </CardContent>
+                </div>
-            </Card>
+              </div>
+              <div className="flex items-center gap-3">
+                <code className="flex-1 px-4 py-3 bg-dark-700 rounded-xl text-neon-400 font-mono text-sm overflow-hidden text-ellipsis border border-dark-600">
+                  {getInviteLink()}
+                </code>
+                <NeonButton variant="secondary" onClick={copyInviteLink} icon={copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}>
+                  {copied ? 'Скопировано!' : 'Копировать'}
+                </NeonButton>
+              </div>
+            </GlassCard>
           )}
 
           {/* My stats */}
           {marathon.my_participation && (
-            <Card>
+            <GlassCard variant="neon">
-              <CardContent>
+              <h3 className="font-semibold text-white mb-4 flex items-center gap-2">
-                <h3 className="font-medium text-white mb-4">Ваша статистика</h3>
+                <Star className="w-5 h-5 text-yellow-500" />
-                <div className="grid grid-cols-3 gap-4 text-center">
+                Ваша статистика
-                  <div>
+              </h3>
-                    <div className="text-2xl font-bold text-primary-500">
+              <div className="grid grid-cols-3 gap-4">
-                      {marathon.my_participation.total_points}
+                <div className="text-center p-4 bg-dark-700/50 rounded-xl border border-dark-600">
-                    </div>
+                  <div className="text-3xl font-bold text-neon-400">
-                    <div className="text-sm text-gray-400">Очков</div>
+                    {marathon.my_participation.total_points}
-                  </div>
-                  <div>
-                    <div className="text-2xl font-bold text-yellow-500">
-                      {marathon.my_participation.current_streak}
-                    </div>
-                    <div className="text-sm text-gray-400">Серия</div>
-                  </div>
-                  <div>
-                    <div className="text-2xl font-bold text-gray-400">
-                      {marathon.my_participation.drop_count}
-                    </div>
-                    <div className="text-sm text-gray-400">Пропусков</div>
                   </div>
+                  <div className="text-sm text-gray-400 mt-1">Очков</div>
                 </div>
-              </CardContent>
+                <div className="text-center p-4 bg-dark-700/50 rounded-xl border border-dark-600">
-            </Card>
+                  <div className="text-3xl font-bold text-yellow-400 flex items-center justify-center gap-1">
+                    {marathon.my_participation.current_streak}
+                    {marathon.my_participation.current_streak > 0 && (
+                      <span className="text-lg">🔥</span>
+                    )}
+                  </div>
+                  <div className="text-sm text-gray-400 mt-1">Серия</div>
+                </div>
+                <div className="text-center p-4 bg-dark-700/50 rounded-xl border border-dark-600">
+                  <div className="text-3xl font-bold text-gray-400 flex items-center justify-center gap-1">
+                    {marathon.my_participation.drop_count}
+                    <TrendingDown className="w-5 h-5" />
+                  </div>
+                  <div className="text-sm text-gray-400 mt-1">Пропусков</div>
+                </div>
+              </div>
+            </GlassCard>
           )}
         </div>
 
         {/* Activity Feed - right sidebar */}
         {isParticipant && (
           <div className="lg:w-96 flex-shrink-0">
-            <div className="lg:sticky lg:top-4">
+            <div className="lg:sticky lg:top-24">
               <ActivityFeed
                 ref={activityFeedRef}
                 marathonId={marathon.id}

frontend/src/pages/MarathonsPage.tsx

@@ -2,9 +2,10 @@ import { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { marathonsApi } from '@/api'
 import type { MarathonListItem } from '@/types'
-import { Button, Card, CardContent } from '@/components/ui'
+import { NeonButton, GlassCard, StatsCard } from '@/components/ui'
-import { Plus, Users, Calendar, Loader2 } from 'lucide-react'
+import { Plus, Users, Calendar, Loader2, Trophy, Gamepad2, ChevronRight, Hash, Sparkles } from 'lucide-react'
 import { format } from 'date-fns'
+import { ru } from 'date-fns/locale'
 
 export function MarathonsPage() {
   const [marathons, setMarathons] = useState<MarathonListItem[]>([])
@@ -12,6 +13,7 @@ export function MarathonsPage() {
   const [joinCode, setJoinCode] = useState('')
   const [joinError, setJoinError] = useState<string | null>(null)
   const [isJoining, setIsJoining] = useState(false)
+  const [showJoinSection, setShowJoinSection] = useState(false)
 
   useEffect(() => {
     loadMarathons()
@@ -36,6 +38,7 @@ export function MarathonsPage() {
     try {
       await marathonsApi.join(joinCode.trim())
       setJoinCode('')
+      setShowJoinSection(false)
       await loadMarathons()
     } catch (err: unknown) {
       const error = err as { response?: { data?: { detail?: string } } }
@@ -45,112 +48,217 @@ export function MarathonsPage() {
     }
   }
 
-  const getStatusColor = (status: string) => {
+  const getStatusConfig = (status: string) => {
     switch (status) {
       case 'preparing':
-        return 'bg-yellow-500/20 text-yellow-500'
+        return {
+          color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+          text: 'Подготовка',
+          dot: 'bg-yellow-500',
+        }
       case 'active':
-        return 'bg-green-500/20 text-green-500'
+        return {
+          color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
+          text: 'Активен',
+          dot: 'bg-neon-500 animate-pulse',
+        }
       case 'finished':
-        return 'bg-gray-500/20 text-gray-400'
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: 'Завершён',
+          dot: 'bg-gray-500',
+        }
       default:
-        return 'bg-gray-500/20 text-gray-400'
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: status,
+          dot: 'bg-gray-500',
+        }
     }
   }
 
-  const getStatusText = (status: string) => {
+  // Stats
-    switch (status) {
+  const activeCount = marathons.filter(m => m.status === 'active').length
-      case 'preparing':
+  const completedCount = marathons.filter(m => m.status === 'finished').length
-        return 'Подготовка'
+  const totalParticipants = marathons.reduce((acc, m) => acc + m.participants_count, 0)
-      case 'active':
-        return 'Активен'
-      case 'finished':
-        return 'Завершён'
-      default:
-        return status
-    }
-  }
 
   if (isLoading) {
     return (
-      <div className="flex justify-center py-12">
+      <div className="flex flex-col items-center justify-center py-24">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка марафонов...</p>
       </div>
     )
   }
 
   return (
-    <div className="max-w-4xl mx-auto">
+    <div className="max-w-5xl mx-auto">
-      <div className="flex justify-between items-center mb-8">
+      {/* Header */}
-        <h1 className="text-2xl font-bold text-white">Мои марафоны</h1>
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
-        <Link to="/marathons/create">
+        <div>
-          <Button>
+          <h1 className="text-3xl font-bold text-white mb-2">Мои марафоны</h1>
-            <Plus className="w-4 h-4 mr-2" />
+          <p className="text-gray-400">Управляйте своими игровыми соревнованиями</p>
-            Создать марафон
+        </div>
-          </Button>
+        <div className="flex gap-3">
-        </Link>
+          <NeonButton
+            variant="outline"
+            onClick={() => setShowJoinSection(!showJoinSection)}
+            icon={<Hash className="w-4 h-4" />}
+          >
+            По коду
+          </NeonButton>
+          <Link to="/marathons/create">
+            <NeonButton icon={<Plus className="w-4 h-4" />}>
+              Создать
+            </NeonButton>
+          </Link>
+        </div>
       </div>
 
+      {/* Stats */}
+      {marathons.length > 0 && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          <StatsCard
+            label="Всего"
+            value={marathons.length}
+            icon={<Gamepad2 className="w-6 h-6" />}
+            color="default"
+          />
+          <StatsCard
+            label="Активных"
+            value={activeCount}
+            icon={<Sparkles className="w-6 h-6" />}
+            color="neon"
+          />
+          <StatsCard
+            label="Завершено"
+            value={completedCount}
+            icon={<Trophy className="w-6 h-6" />}
+            color="purple"
+          />
+          <StatsCard
+            label="Участников"
+            value={totalParticipants}
+            icon={<Users className="w-6 h-6" />}
+            color="pink"
+          />
+        </div>
+      )}
+
       {/* Join marathon */}
-      <Card className="mb-8">
+      {showJoinSection && (
-        <CardContent>
+        <GlassCard className="mb-8 animate-slide-in-down" variant="neon">
-          <h3 className="font-medium text-white mb-3">Присоединиться к марафону</h3>
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
+              <Hash className="w-5 h-5 text-accent-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-white">Присоединиться к марафону</h3>
+              <p className="text-sm text-gray-400">Введите код приглашения</p>
+            </div>
+          </div>
           <div className="flex gap-3">
             <input
               type="text"
               value={joinCode}
-              onChange={(e) => setJoinCode(e.target.value)}
+              onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
-              placeholder="Введите код приглашения"
+              onKeyDown={(e) => e.key === 'Enter' && handleJoin()}
-              className="input flex-1"
+              placeholder="XXXXXX"
+              className="input flex-1 font-mono text-center tracking-widest uppercase"
+              maxLength={10}
             />
-            <Button onClick={handleJoin} isLoading={isJoining}>
+            <NeonButton
+              onClick={handleJoin}
+              isLoading={isJoining}
+              color="purple"
+            >
               Присоединиться
-            </Button>
+            </NeonButton>
           </div>
-          {joinError && <p className="mt-2 text-sm text-red-500">{joinError}</p>}
+          {joinError && (
-        </CardContent>
+            <p className="mt-3 text-sm text-red-400 flex items-center gap-2">
-      </Card>
+              <span className="w-1.5 h-1.5 bg-red-500 rounded-full" />
+              {joinError}
+            </p>
+          )}
+        </GlassCard>
+      )}
 
       {/* Marathon list */}
       {marathons.length === 0 ? (
-        <Card>
+        <GlassCard className="text-center py-16">
-          <CardContent className="text-center py-8">
+          <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-dark-700 flex items-center justify-center">
-            <p className="text-gray-400 mb-4">У вас пока нет марафонов</p>
+            <Gamepad2 className="w-10 h-10 text-gray-600" />
+          </div>
+          <h3 className="text-xl font-semibold text-white mb-2">Нет марафонов</h3>
+          <p className="text-gray-400 mb-6 max-w-sm mx-auto">
+            Создайте свой первый марафон или присоединитесь к существующему по коду
+          </p>
+          <div className="flex gap-3 justify-center">
+            <NeonButton
+              variant="outline"
+              onClick={() => setShowJoinSection(true)}
+              icon={<Hash className="w-4 h-4" />}
+            >
+              Ввести код
+            </NeonButton>
             <Link to="/marathons/create">
-              <Button>Создать первый марафон</Button>
+              <NeonButton icon={<Plus className="w-4 h-4" />}>
+                Создать марафон
+              </NeonButton>
             </Link>
-          </CardContent>
+          </div>
-        </Card>
+        </GlassCard>
       ) : (
         <div className="space-y-4">
-          {marathons.map((marathon) => (
+          {marathons.map((marathon, index) => {
-            <Link key={marathon.id} to={`/marathons/${marathon.id}`}>
+            const status = getStatusConfig(marathon.status)
-              <Card className="hover:bg-gray-700/50 transition-colors cursor-pointer">
+            return (
-                <CardContent className="flex items-center justify-between">
+              <Link key={marathon.id} to={`/marathons/${marathon.id}`}>
-                  <div>
+                <div
-                    <h3 className="text-lg font-medium text-white mb-1">
+                  className="group glass rounded-xl p-5 border border-dark-600 transition-all duration-300 hover:border-neon-500/30 hover:-translate-y-0.5 hover:shadow-[0_10px_40px_rgba(0,240,255,0.1)]"
-                      {marathon.title}
+                  style={{ animationDelay: `${index * 50}ms` }}
-                    </h3>
+                >
-                    <div className="flex items-center gap-4 text-sm text-gray-400">
+                  <div className="flex items-center justify-between">
-                      <span className="flex items-center gap-1">
+                    <div className="flex items-center gap-4">
-                        <Users className="w-4 h-4" />
+                      {/* Icon */}
-                        {marathon.participants_count} участников
+                      <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/20 group-hover:border-neon-500/40 transition-colors">
+                        <Gamepad2 className="w-7 h-7 text-neon-400" />
+                      </div>
+
+                      {/* Info */}
+                      <div>
+                        <h3 className="text-lg font-semibold text-white group-hover:text-neon-400 transition-colors mb-1">
+                          {marathon.title}
+                        </h3>
+                        <div className="flex flex-wrap items-center gap-4 text-sm text-gray-400">
+                          <span className="flex items-center gap-1.5">
+                            <Users className="w-4 h-4" />
+                            {marathon.participants_count}
+                          </span>
+                          {marathon.start_date && (
+                            <span className="flex items-center gap-1.5">
+                              <Calendar className="w-4 h-4" />
+                              {format(new Date(marathon.start_date), 'd MMM yyyy', { locale: ru })}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Status & Arrow */}
+                    <div className="flex items-center gap-4">
+                      <span className={`px-3 py-1.5 rounded-full text-sm font-medium border flex items-center gap-2 ${status.color}`}>
+                        <span className={`w-2 h-2 rounded-full ${status.dot}`} />
+                        {status.text}
                       </span>
-                      {marathon.start_date && (
+                      <ChevronRight className="w-5 h-5 text-gray-600 group-hover:text-neon-400 transition-colors" />
-                        <span className="flex items-center gap-1">
-                          <Calendar className="w-4 h-4" />
-                          {format(new Date(marathon.start_date), 'MMM d, yyyy')}
-                        </span>
-                      )}
                     </div>
                   </div>
-                  <span className={`px-3 py-1 rounded-full text-sm ${getStatusColor(marathon.status)}`}>
+                </div>
-                    {getStatusText(marathon.status)}
+              </Link>
-                  </span>
+            )
-                </CardContent>
+          })}
-              </Card>
-            </Link>
-          ))}
         </div>
       )}
     </div>

frontend/src/pages/NotFoundPage.tsx

@@ -1,33 +1,62 @@
 import { Link } from 'react-router-dom'
-import { Button } from '@/components/ui'
+import { NeonButton } from '@/components/ui'
-import { Gamepad2, Home, Ghost } from 'lucide-react'
+import { Gamepad2, Home, Ghost, Sparkles } from 'lucide-react'
 
 export function NotFoundPage() {
   return (
-    <div className="min-h-[60vh] flex flex-col items-center justify-center text-center px-4">
+    <div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
-      {/* Иконка с анимацией */}
+      {/* Background effects */}
-      <div className="relative mb-8">
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
-        <Ghost className="w-32 h-32 text-gray-700 animate-bounce" />
+        <div className="absolute top-1/3 -left-32 w-96 h-96 bg-accent-500/5 rounded-full blur-[100px]" />
-        <Gamepad2 className="w-12 h-12 text-primary-500 absolute -bottom-2 -right-2" />
+        <div className="absolute bottom-1/3 -right-32 w-96 h-96 bg-neon-500/5 rounded-full blur-[100px]" />
       </div>
 
-      {/* Заголовок */}
+      {/* Icon */}
-      <h1 className="text-7xl font-bold text-white mb-4">404</h1>
+      <div className="relative mb-8 animate-float">
-      <h2 className="text-2xl font-semibold text-gray-400 mb-2">
+        <div className="w-32 h-32 rounded-3xl bg-dark-700/50 border border-dark-600 flex items-center justify-center">
+          <Ghost className="w-20 h-20 text-gray-600" />
+        </div>
+        <div className="absolute -bottom-2 -right-2 w-12 h-12 rounded-xl bg-neon-500/20 border border-neon-500/30 flex items-center justify-center">
+          <Gamepad2 className="w-6 h-6 text-neon-400" />
+        </div>
+        {/* Glitch effect dots */}
+        <div className="absolute -top-2 -left-2 w-3 h-3 rounded-full bg-accent-500/50 animate-pulse" />
+        <div className="absolute top-4 -right-4 w-2 h-2 rounded-full bg-neon-500/50 animate-pulse" style={{ animationDelay: '0.5s' }} />
+      </div>
+
+      {/* 404 text with glitch effect */}
+      <div className="relative mb-4">
+        <h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon-400 via-accent-400 to-pink-400">
+          404
+        </h1>
+        <div className="absolute inset-0 text-8xl font-bold text-neon-500/20 blur-xl">
+          404
+        </div>
+      </div>
+
+      <h2 className="text-2xl font-bold text-white mb-3">
         Страница не найдена
       </h2>
-      <p className="text-gray-500 mb-8 max-w-md">
+      <p className="text-gray-400 mb-8 max-w-md">
         Похоже, эта страница ушла на марафон и не вернулась.
-        Попробуй начать с главной.
+        <br />
+        <span className="text-gray-500">Попробуй начать с главной.</span>
       </p>
 
-      {/* Кнопка */}
+      {/* Button */}
       <Link to="/">
-        <Button size="lg" className="flex items-center gap-2">
+        <NeonButton size="lg" icon={<Home className="w-5 h-5" />}>
-          <Home className="w-5 h-5" />
           На главную
-        </Button>
+        </NeonButton>
       </Link>
+
+      {/* Decorative sparkles */}
+      <div className="absolute top-1/4 left-1/4 opacity-20">
+        <Sparkles className="w-6 h-6 text-neon-400 animate-pulse" />
+      </div>
+      <div className="absolute bottom-1/3 right-1/4 opacity-20">
+        <Sparkles className="w-4 h-4 text-accent-400 animate-pulse" style={{ animationDelay: '1s' }} />
+      </div>
     </div>
   )
 }

frontend/src/pages/ProfilePage.tsx

@@ -7,15 +7,15 @@ import { usersApi, telegramApi, authApi } from '@/api'
 import type { UserStats } from '@/types'
 import { useToast } from '@/store/toast'
 import {
-  Button, Input, Card, CardHeader, CardTitle, CardContent, clearAvatarCache
+  NeonButton, Input, GlassCard, StatsCard, clearAvatarCache
 } from '@/components/ui'
 import {
   User, Camera, Trophy, Target, CheckCircle, Flame,
   Loader2, MessageCircle, Link2, Link2Off, ExternalLink,
-  Eye, EyeOff, Save, KeyRound
+  Eye, EyeOff, Save, KeyRound, Shield
 } from 'lucide-react'
 
-// Схемы валидации
+// Schemas
 const nicknameSchema = z.object({
   nickname: z.string().min(2, 'Минимум 2 символа').max(50, 'Максимум 50 символов'),
 })
@@ -36,7 +36,7 @@ export function ProfilePage() {
   const { user, updateUser } = useAuthStore()
   const toast = useToast()
 
-  // Состояние
+  // State
   const [stats, setStats] = useState<UserStats | null>(null)
   const [isLoadingStats, setIsLoadingStats] = useState(true)
   const [isUploadingAvatar, setIsUploadingAvatar] = useState(false)
@@ -53,7 +53,7 @@ export function ProfilePage() {
 
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  // Формы
+  // Forms
   const nicknameForm = useForm<NicknameForm>({
     resolver: zodResolver(nicknameSchema),
     defaultValues: { nickname: user?.nickname || '' },
@@ -64,7 +64,7 @@ export function ProfilePage() {
     defaultValues: { current_password: '', new_password: '', confirm_password: '' },
   })
 
-  // Загрузка статистики
+  // Load stats
   useEffect(() => {
     loadStats()
     return () => {
@@ -72,7 +72,7 @@ export function ProfilePage() {
     }
   }, [])
 
-  // Загрузка аватарки через API
+  // Load avatar via API
   useEffect(() => {
     if (user?.id && user?.avatar_url) {
       loadAvatar(user.id)
@@ -98,7 +98,7 @@ export function ProfilePage() {
     }
   }
 
-  // Обновляем форму никнейма при изменении user
+  // Update nickname form when user changes
   useEffect(() => {
     if (user?.nickname) {
       nicknameForm.reset({ nickname: user.nickname })
@@ -116,7 +116,7 @@ export function ProfilePage() {
     }
   }
 
-  // Обновление никнейма
+  // Update nickname
   const onNicknameSubmit = async (data: NicknameForm) => {
     try {
       const updatedUser = await usersApi.updateNickname(data)
@@ -127,7 +127,7 @@ export function ProfilePage() {
     }
   }
 
-  // Загрузка аватара
+  // Upload avatar
   const handleAvatarClick = () => {
     fileInputRef.current?.click()
   }
@@ -136,7 +136,6 @@ export function ProfilePage() {
     const file = e.target.files?.[0]
     if (!file) return
 
-    // Валидация
     if (!file.type.startsWith('image/')) {
       toast.error('Файл должен быть изображением')
       return
@@ -150,9 +149,7 @@ export function ProfilePage() {
     try {
       const updatedUser = await usersApi.uploadAvatar(file)
       updateUser({ avatar_url: updatedUser.avatar_url })
-      // Перезагружаем аватарку через API
       if (user?.id) {
-        // Очищаем старый blob URL и глобальный кэш
         if (avatarBlobUrl) {
           URL.revokeObjectURL(avatarBlobUrl)
         }
@@ -167,7 +164,7 @@ export function ProfilePage() {
     }
   }
 
-  // Смена пароля
+  // Change password
   const onPasswordSubmit = async (data: PasswordForm) => {
     try {
       await usersApi.changePassword({
@@ -184,7 +181,7 @@ export function ProfilePage() {
     }
   }
 
-  // Telegram функции
+  // Telegram functions
   const startPolling = () => {
     setIsPolling(true)
     let attempts = 0
@@ -245,265 +242,285 @@ export function ProfilePage() {
   }
 
   const isLinked = !!user?.telegram_id
-  // Приоритет: загруженная аватарка (blob) > телеграм аватарка
   const displayAvatar = avatarBlobUrl || user?.telegram_avatar_url
 
   return (
-    <div className="max-w-2xl mx-auto space-y-6">
+    <div className="max-w-3xl mx-auto space-y-6">
-      <h1 className="text-2xl font-bold text-white">Мой профиль</h1>
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-white mb-2">Мой профиль</h1>
+        <p className="text-gray-400">Настройки вашего аккаунта</p>
+      </div>
 
-      {/* Карточка профиля */}
+      {/* Profile Card */}
-      <Card>
+      <GlassCard variant="neon">
-        <CardContent className="pt-6">
+        <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
-          <div className="flex items-start gap-6">
+          {/* Avatar */}
-            {/* Аватар */}
+          <div className="relative group flex-shrink-0">
-            <div className="relative group flex-shrink-0">
+            {isLoadingAvatar ? (
-              {isLoadingAvatar ? (
+              <div className="w-28 h-28 rounded-2xl bg-dark-700 skeleton" />
-                <div className="w-24 h-24 rounded-full bg-gray-700 animate-pulse" />
+            ) : (
-              ) : (
+              <button
-                <button
+                onClick={handleAvatarClick}
-                  onClick={handleAvatarClick}
+                disabled={isUploadingAvatar}
-                  disabled={isUploadingAvatar}
+                className="relative w-28 h-28 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 hover:border-neon-500 transition-all group-hover:shadow-[0_0_30px_rgba(0,240,255,0.3)]"
-                  className="relative w-24 h-24 rounded-full overflow-hidden bg-gray-700 hover:opacity-80 transition-opacity"
+              >
-                >
+                {displayAvatar ? (
-                  {displayAvatar ? (
+                  <img
-                    <img
+                    src={displayAvatar}
-                      src={displayAvatar}
+                    alt={user?.nickname}
-                      alt={user?.nickname}
+                    className="w-full h-full object-cover"
-                      className="w-full h-full object-cover"
+                  />
-                    />
+                ) : (
-                  ) : (
+                  <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-neon-500/20 to-accent-500/20">
-                    <div className="w-full h-full flex items-center justify-center">
+                    <User className="w-12 h-12 text-gray-500" />
-                      <User className="w-12 h-12 text-gray-500" />
-                    </div>
-                  )}
-                  <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                    {isUploadingAvatar ? (
-                      <Loader2 className="w-6 h-6 text-white animate-spin" />
-                    ) : (
-                      <Camera className="w-6 h-6 text-white" />
-                    )}
                   </div>
-                </button>
+                )}
-              )}
+                <div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-              <input
+                  {isUploadingAvatar ? (
-                ref={fileInputRef}
+                    <Loader2 className="w-8 h-8 text-neon-500 animate-spin" />
-                type="file"
+                  ) : (
-                accept="image/*"
+                    <Camera className="w-8 h-8 text-neon-500" />
-                onChange={handleAvatarChange}
+                  )}
-                className="hidden"
-              />
-            </div>
-
-            {/* Форма никнейма */}
-            <div className="flex-1">
-              <form onSubmit={nicknameForm.handleSubmit(onNicknameSubmit)} className="space-y-4">
-                <Input
-                  label="Никнейм"
-                  {...nicknameForm.register('nickname')}
-                  error={nicknameForm.formState.errors.nickname?.message}
-                />
-                <Button
-                  type="submit"
-                  size="sm"
-                  isLoading={nicknameForm.formState.isSubmitting}
-                  disabled={!nicknameForm.formState.isDirty}
-                >
-                  <Save className="w-4 h-4 mr-2" />
-                  Сохранить
-                </Button>
-              </form>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Статистика */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Trophy className="w-5 h-5 text-yellow-500" />
-            Статистика
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {isLoadingStats ? (
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              {[...Array(4)].map((_, i) => (
-                <div key={i} className="bg-gray-900 rounded-lg p-4 text-center">
-                  <div className="w-6 h-6 bg-gray-700 rounded mx-auto mb-2 animate-pulse" />
-                  <div className="h-8 w-12 bg-gray-700 rounded mx-auto mb-2 animate-pulse" />
-                  <div className="h-4 w-16 bg-gray-700 rounded mx-auto animate-pulse" />
                 </div>
-              ))}
+              </button>
-            </div>
+            )}
-          ) : stats ? (
+            <input
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              ref={fileInputRef}
-              <div className="bg-gray-900 rounded-lg p-4 text-center">
+              type="file"
-                <Target className="w-6 h-6 text-blue-400 mx-auto mb-2" />
+              accept="image/*"
-                <div className="text-2xl font-bold text-white">{stats.marathons_count}</div>
+              onChange={handleAvatarChange}
-                <div className="text-sm text-gray-400">Марафонов</div>
+              className="hidden"
+            />
+          </div>
+
+          {/* Nickname Form */}
+          <div className="flex-1 w-full sm:w-auto">
+            <form onSubmit={nicknameForm.handleSubmit(onNicknameSubmit)} className="space-y-4">
+              <Input
+                label="Никнейм"
+                {...nicknameForm.register('nickname')}
+                error={nicknameForm.formState.errors.nickname?.message}
+              />
+              <NeonButton
+                type="submit"
+                size="sm"
+                isLoading={nicknameForm.formState.isSubmitting}
+                disabled={!nicknameForm.formState.isDirty}
+                icon={<Save className="w-4 h-4" />}
+              >
+                Сохранить
+              </NeonButton>
+            </form>
+          </div>
+        </div>
+      </GlassCard>
+
+      {/* Stats */}
+      <div>
+        <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
+          <Trophy className="w-5 h-5 text-yellow-500" />
+          Статистика
+        </h2>
+        {isLoadingStats ? (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="glass rounded-xl p-4">
+                <div className="w-12 h-12 bg-dark-700 rounded-lg mb-3 skeleton" />
+                <div className="h-8 w-16 bg-dark-700 rounded mb-2 skeleton" />
+                <div className="h-4 w-20 bg-dark-700 rounded skeleton" />
               </div>
-              <div className="bg-gray-900 rounded-lg p-4 text-center">
+            ))}
-                <Trophy className="w-6 h-6 text-yellow-500 mx-auto mb-2" />
+          </div>
-                <div className="text-2xl font-bold text-white">{stats.wins_count}</div>
+        ) : stats ? (
-                <div className="text-sm text-gray-400">Побед</div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              </div>
+            <StatsCard
-              <div className="bg-gray-900 rounded-lg p-4 text-center">
+              label="Марафонов"
-                <CheckCircle className="w-6 h-6 text-green-500 mx-auto mb-2" />
+              value={stats.marathons_count}
-                <div className="text-2xl font-bold text-white">{stats.completed_assignments}</div>
+              icon={<Target className="w-6 h-6" />}
-                <div className="text-sm text-gray-400">Заданий</div>
+              color="neon"
-              </div>
+            />
-              <div className="bg-gray-900 rounded-lg p-4 text-center">
+            <StatsCard
-                <Flame className="w-6 h-6 text-orange-500 mx-auto mb-2" />
+              label="Побед"
-                <div className="text-2xl font-bold text-white">{stats.total_points_earned}</div>
+              value={stats.wins_count}
-                <div className="text-sm text-gray-400">Очков</div>
+              icon={<Trophy className="w-6 h-6" />}
-              </div>
+              color="purple"
-            </div>
+            />
-          ) : (
+            <StatsCard
-            <p className="text-gray-400 text-center">Не удалось загрузить статистику</p>
+              label="Заданий"
-          )}
+              value={stats.completed_assignments}
-        </CardContent>
+              icon={<CheckCircle className="w-6 h-6" />}
-      </Card>
+              color="neon"
+            />
+            <StatsCard
+              label="Очков"
+              value={stats.total_points_earned}
+              icon={<Flame className="w-6 h-6" />}
+              color="pink"
+            />
+          </div>
+        ) : (
+          <GlassCard className="text-center py-8">
+            <p className="text-gray-400">Не удалось загрузить статистику</p>
+          </GlassCard>
+        )}
+      </div>
 
       {/* Telegram */}
-      <Card>
+      <GlassCard>
-        <CardHeader>
+        <div className="flex items-center gap-3 mb-6">
-          <CardTitle className="flex items-center gap-2">
+          <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
-            <MessageCircle className="w-5 h-5 text-blue-400" />
+            <MessageCircle className="w-6 h-6 text-blue-400" />
-            Telegram
+          </div>
-          </CardTitle>
+          <div>
-        </CardHeader>
+            <h2 className="text-lg font-semibold text-white">Telegram</h2>
-        <CardContent>
+            <p className="text-sm text-gray-400">
-          {isLinked ? (
+              {isLinked ? 'Аккаунт привязан' : 'Привяжите для уведомлений'}
-            <div className="space-y-4">
+            </p>
-              <div className="flex items-center gap-4 p-4 bg-gray-900 rounded-lg">
+          </div>
-                <div className="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center overflow-hidden">
+        </div>
-                  {user?.telegram_avatar_url ? (
+
-                    <img
+        {isLinked ? (
-                      src={user.telegram_avatar_url}
+          <div className="space-y-4">
-                      alt="Telegram avatar"
+            <div className="flex items-center gap-4 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
-                      className="w-full h-full object-cover"
+              <div className="w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center overflow-hidden border border-blue-500/30">
-                    />
+                {user?.telegram_avatar_url ? (
-                  ) : (
+                  <img
-                    <Link2 className="w-6 h-6 text-blue-400" />
+                    src={user.telegram_avatar_url}
-                  )}
+                    alt="Telegram avatar"
-                </div>
+                    className="w-full h-full object-cover"
-                <div className="flex-1">
+                  />
-                  <p className="text-white font-medium">
+                ) : (
-                    {user?.telegram_first_name} {user?.telegram_last_name}
+                  <Link2 className="w-7 h-7 text-blue-400" />
-                  </p>
+                )}
-                  {user?.telegram_username && (
-                    <p className="text-blue-400 text-sm">@{user.telegram_username}</p>
-                  )}
-                </div>
-                <Button
-                  variant="danger"
-                  size="sm"
-                  onClick={handleUnlinkTelegram}
-                  isLoading={telegramLoading}
-                >
-                  <Link2Off className="w-4 h-4 mr-2" />
-                  Отвязать
-                </Button>
               </div>
+              <div className="flex-1">
+                <p className="text-white font-medium">
+                  {user?.telegram_first_name} {user?.telegram_last_name}
+                </p>
+                {user?.telegram_username && (
+                  <p className="text-blue-400 text-sm">@{user.telegram_username}</p>
+                )}
+              </div>
+              <NeonButton
+                variant="danger"
+                size="sm"
+                onClick={handleUnlinkTelegram}
+                isLoading={telegramLoading}
+                icon={<Link2Off className="w-4 h-4" />}
+              >
+                Отвязать
+              </NeonButton>
             </div>
-          ) : (
+          </div>
-            <div className="space-y-4">
+        ) : (
-              <p className="text-gray-400">
+          <div className="space-y-4">
-                Привяжи Telegram для получения уведомлений о событиях и марафонах.
+            <p className="text-gray-400">
-              </p>
+              Привяжите Telegram для получения уведомлений о событиях и марафонах.
-              {isPolling ? (
+            </p>
-                <div className="p-4 bg-blue-500/20 border border-blue-500/50 rounded-lg">
+            {isPolling ? (
-                  <div className="flex items-center gap-3">
+              <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
-                    <Loader2 className="w-5 h-5 text-blue-400 animate-spin" />
+                <div className="flex items-center gap-3">
-                    <p className="text-blue-400">Ожидание привязки...</p>
+                  <Loader2 className="w-5 h-5 text-blue-400 animate-spin" />
-                  </div>
+                  <p className="text-blue-400">Ожидание привязки...</p>
                 </div>
-              ) : (
-                <Button onClick={handleLinkTelegram} isLoading={telegramLoading}>
-                  <ExternalLink className="w-4 h-4 mr-2" />
-                  Привязать Telegram
-                </Button>
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Смена пароля */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <KeyRound className="w-5 h-5 text-gray-400" />
-            Безопасность
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {!showPasswordForm ? (
-            <Button variant="secondary" onClick={() => setShowPasswordForm(true)}>
-              Сменить пароль
-            </Button>
-          ) : (
-            <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4">
-              <div className="relative">
-                <Input
-                  label="Текущий пароль"
-                  type={showCurrentPassword ? 'text' : 'password'}
-                  {...passwordForm.register('current_password')}
-                  error={passwordForm.formState.errors.current_password?.message}
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
-                  className="absolute right-3 top-8 text-gray-400 hover:text-white"
-                >
-                  {showCurrentPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
-                </button>
               </div>
+            ) : (
+              <NeonButton
+                onClick={handleLinkTelegram}
+                isLoading={telegramLoading}
+                icon={<ExternalLink className="w-4 h-4" />}
+              >
+                Привязать Telegram
+              </NeonButton>
+            )}
+          </div>
+        )}
+      </GlassCard>
 
-              <div className="relative">
+      {/* Security */}
-                <Input
+      <GlassCard>
-                  label="Новый пароль"
+        <div className="flex items-center gap-3 mb-6">
-                  type={showNewPassword ? 'text' : 'password'}
+          <div className="w-12 h-12 rounded-xl bg-accent-500/20 flex items-center justify-center">
-                  {...passwordForm.register('new_password')}
+            <Shield className="w-6 h-6 text-accent-400" />
-                  error={passwordForm.formState.errors.new_password?.message}
+          </div>
-                />
+          <div>
-                <button
+            <h2 className="text-lg font-semibold text-white">Безопасность</h2>
-                  type="button"
+            <p className="text-sm text-gray-400">Управление паролем</p>
-                  onClick={() => setShowNewPassword(!showNewPassword)}
+          </div>
-                  className="absolute right-3 top-8 text-gray-400 hover:text-white"
+        </div>
-                >
-                  {showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
-                </button>
-              </div>
 
+        {!showPasswordForm ? (
+          <NeonButton
+            variant="secondary"
+            onClick={() => setShowPasswordForm(true)}
+            icon={<KeyRound className="w-4 h-4" />}
+          >
+            Сменить пароль
+          </NeonButton>
+        ) : (
+          <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4">
+            <div className="relative">
               <Input
-                label="Подтвердите новый пароль"
+                label="Текущий пароль"
-                type={showNewPassword ? 'text' : 'password'}
+                type={showCurrentPassword ? 'text' : 'password'}
-                {...passwordForm.register('confirm_password')}
+                {...passwordForm.register('current_password')}
-                error={passwordForm.formState.errors.confirm_password?.message}
+                error={passwordForm.formState.errors.current_password?.message}
               />
+              <button
+                type="button"
+                onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                className="absolute right-3 top-9 text-gray-400 hover:text-white transition-colors"
+              >
+                {showCurrentPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+              </button>
+            </div>
 
-              <div className="flex gap-2">
+            <div className="relative">
-                <Button type="submit" isLoading={passwordForm.formState.isSubmitting}>
+              <Input
-                  Сменить пароль
+                label="Новый пароль"
-                </Button>
+                type={showNewPassword ? 'text' : 'password'}
-                <Button
+                {...passwordForm.register('new_password')}
-                  type="button"
+                error={passwordForm.formState.errors.new_password?.message}
-                  variant="ghost"
+              />
-                  onClick={() => {
+              <button
-                    setShowPasswordForm(false)
+                type="button"
-                    passwordForm.reset()
+                onClick={() => setShowNewPassword(!showNewPassword)}
-                  }}
+                className="absolute right-3 top-9 text-gray-400 hover:text-white transition-colors"
-                >
+              >
-                  Отмена
+                {showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
-                </Button>
+              </button>
-              </div>
+            </div>
-            </form>
+
-          )}
+            <Input
-        </CardContent>
+              label="Подтвердите новый пароль"
-      </Card>
+              type={showNewPassword ? 'text' : 'password'}
+              {...passwordForm.register('confirm_password')}
+              error={passwordForm.formState.errors.confirm_password?.message}
+            />
+
+            <div className="flex gap-3">
+              <NeonButton
+                type="submit"
+                isLoading={passwordForm.formState.isSubmitting}
+                icon={<Save className="w-4 h-4" />}
+              >
+                Сменить пароль
+              </NeonButton>
+              <NeonButton
+                type="button"
+                variant="ghost"
+                onClick={() => {
+                  setShowPasswordForm(false)
+                  passwordForm.reset()
+                }}
+              >
+                Отмена
+              </NeonButton>
+            </div>
+          </form>
+        )}
+      </GlassCard>
     </div>
   )
 }

frontend/src/pages/RegisterPage.tsx

@@ -5,7 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useAuthStore } from '@/store/auth'
 import { marathonsApi } from '@/api'
-import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
+import { NeonButton, Input } from '@/components/ui'
+import { Gamepad2, UserPlus, AlertCircle } from 'lucide-react'
 
 const registerSchema = z.object({
   login: z
@@ -68,16 +69,33 @@ export function RegisterPage() {
   }
 
   return (
-    <div className="max-w-md mx-auto">
+    <div className="min-h-[80vh] flex items-center justify-center px-4 -mt-8">
-      <Card>
+      {/* Background effects */}
-        <CardHeader>
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
-          <CardTitle className="text-center">Регистрация</CardTitle>
+        <div className="absolute top-1/3 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
-        </CardHeader>
+        <div className="absolute bottom-1/3 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
-        <CardContent>
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Card */}
+        <div className="glass-neon rounded-2xl p-8 animate-scale-in">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="flex justify-center mb-4">
+              <div className="w-16 h-16 rounded-2xl bg-accent-500/10 border border-accent-500/30 flex items-center justify-center">
+                <Gamepad2 className="w-8 h-8 text-accent-500" />
+              </div>
+            </div>
+            <h1 className="text-2xl font-bold text-white mb-2">Создать аккаунт</h1>
+            <p className="text-gray-400">Присоединяйтесь к игровому марафону</p>
+          </div>
+
+          {/* Form */}
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             {(submitError || error) && (
-              <div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
+              <div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
-                {submitError || error}
+                <AlertCircle className="w-5 h-5 flex-shrink-0" />
+                <span>{submitError || error}</span>
               </div>
             )}
 
@@ -85,12 +103,13 @@ export function RegisterPage() {
               label="Логин"
               placeholder="Придумайте логин"
               error={errors.login?.message}
+              autoComplete="username"
               {...register('login')}
             />
 
             <Input
               label="Никнейм"
-              placeholder="Придумайте никнейм"
+              placeholder="Как вас называть?"
               error={errors.nickname?.message}
               {...register('nickname')}
             />
@@ -100,6 +119,7 @@ export function RegisterPage() {
               type="password"
               placeholder="Придумайте пароль"
               error={errors.password?.message}
+              autoComplete="new-password"
               {...register('password')}
             />
 
@@ -108,22 +128,40 @@ export function RegisterPage() {
               type="password"
               placeholder="Повторите пароль"
               error={errors.confirmPassword?.message}
+              autoComplete="new-password"
               {...register('confirmPassword')}
             />
 
-            <Button type="submit" className="w-full" isLoading={isLoading}>
+            <NeonButton
+              type="submit"
+              className="w-full"
+              size="lg"
+              color="purple"
+              isLoading={isLoading}
+              icon={<UserPlus className="w-5 h-5" />}
+            >
               Зарегистрироваться
-            </Button>
+            </NeonButton>
+          </form>
 
-            <p className="text-center text-gray-400 text-sm">
+          {/* Footer */}
+          <div className="mt-6 pt-6 border-t border-dark-600 text-center">
+            <p className="text-gray-400 text-sm">
               Уже есть аккаунт?{' '}
-              <Link to="/login" className="link">
+              <Link
+                to="/login"
+                className="text-accent-400 hover:text-accent-300 transition-colors font-medium"
+              >
                 Войти
               </Link>
             </p>
-          </form>
+          </div>
-        </CardContent>
+        </div>
-      </Card>
+
+        {/* Decorative elements */}
+        <div className="absolute -top-4 -left-4 w-24 h-24 border border-accent-500/20 rounded-2xl -z-10" />
+        <div className="absolute -bottom-4 -right-4 w-32 h-32 border border-neon-500/20 rounded-2xl -z-10" />
+      </div>
     </div>
   )
 }

frontend/src/pages/UserProfilePage.tsx

@@ -3,10 +3,10 @@ import { useParams, useNavigate, Link } from 'react-router-dom'
 import { useAuthStore } from '@/store/auth'
 import { usersApi } from '@/api'
 import type { UserProfilePublic } from '@/types'
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
+import { GlassCard, StatsCard } from '@/components/ui'
 import {
   User, Trophy, Target, CheckCircle, Flame,
-  Loader2, ArrowLeft, Calendar
+  Loader2, ArrowLeft, Calendar, Zap
 } from 'lucide-react'
 
 export function UserProfilePage() {
@@ -82,8 +82,9 @@ export function UserProfilePage() {
 
   if (isLoading) {
     return (
-      <div className="flex justify-center py-12">
+      <div className="flex flex-col items-center justify-center py-24">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка профиля...</p>
       </div>
     )
   }
@@ -91,17 +92,17 @@ export function UserProfilePage() {
   if (error || !profile) {
     return (
       <div className="max-w-2xl mx-auto">
-        <Card>
+        <GlassCard className="py-12 text-center">
-          <CardContent className="py-12 text-center">
+          <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-dark-700 flex items-center justify-center">
-            <User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+            <User className="w-10 h-10 text-gray-600" />
-            <h2 className="text-xl font-bold text-white mb-2">
+          </div>
-              {error || 'Пользователь не найден'}
+          <h2 className="text-xl font-bold text-white mb-2">
-            </h2>
+            {error || 'Пользователь не найден'}
-            <Link to="/" className="text-primary-400 hover:text-primary-300">
+          </h2>
-              Вернуться на главную
+          <Link to="/" className="text-neon-400 hover:text-neon-300 transition-colors">
-            </Link>
+            Вернуться на главную
-          </CardContent>
+          </Link>
-        </Card>
+        </GlassCard>
       </div>
     )
   }
@@ -111,18 +112,18 @@ export function UserProfilePage() {
       {/* Кнопка назад */}
       <button
         onClick={() => navigate(-1)}
-        className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
+        className="flex items-center gap-2 text-gray-400 hover:text-neon-400 transition-colors group"
       >
-        <ArrowLeft className="w-5 h-5" />
+        <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
         Назад
       </button>
 
       {/* Профиль */}
-      <Card>
+      <GlassCard variant="neon">
-        <CardContent className="pt-6">
+        <div className="flex items-center gap-6">
-          <div className="flex items-center gap-6">
+          {/* Аватар */}
-            {/* Аватар */}
+          <div className="relative">
-            <div className="w-24 h-24 rounded-full overflow-hidden bg-gray-700 flex-shrink-0">
+            <div className="w-24 h-24 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 shadow-[0_0_20px_rgba(0,240,255,0.2)]">
               {avatarBlobUrl ? (
                 <img
                   src={avatarBlobUrl}
@@ -130,67 +131,69 @@ export function UserProfilePage() {
                   className="w-full h-full object-cover"
                 />
               ) : (
-                <div className="w-full h-full flex items-center justify-center">
+                <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-dark-700 to-dark-800">
                   <User className="w-12 h-12 text-gray-500" />
                 </div>
               )}
             </div>
-
+            {/* Online indicator effect */}
-            {/* Инфо */}
+            <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-lg bg-neon-500/20 border border-neon-500/30 flex items-center justify-center">
-            <div>
+              <Zap className="w-3 h-3 text-neon-400" />
-              <h1 className="text-2xl font-bold text-white mb-2">
-                {profile.nickname}
-              </h1>
-              <div className="flex items-center gap-2 text-gray-400 text-sm">
-                <Calendar className="w-4 h-4" />
-                <span>Зарегистрирован {formatDate(profile.created_at)}</span>
-              </div>
             </div>
           </div>
-        </CardContent>
+
-      </Card>
+          {/* Инфо */}
+          <div>
+            <h1 className="text-2xl font-bold text-white mb-2">
+              {profile.nickname}
+            </h1>
+            <div className="flex items-center gap-2 text-gray-400 text-sm">
+              <Calendar className="w-4 h-4 text-accent-400" />
+              <span>Зарегистрирован {formatDate(profile.created_at)}</span>
+            </div>
+          </div>
+        </div>
+      </GlassCard>
 
       {/* Статистика */}
-      <Card>
+      <GlassCard>
-        <CardHeader>
+        <div className="flex items-center gap-3 mb-6">
-          <CardTitle className="flex items-center gap-2">
+          <div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
-            <Trophy className="w-5 h-5 text-yellow-500" />
+            <Trophy className="w-5 h-5 text-yellow-400" />
-            Статистика
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="bg-gray-900 rounded-lg p-4 text-center">
-              <Target className="w-6 h-6 text-blue-400 mx-auto mb-2" />
-              <div className="text-2xl font-bold text-white">
-                {profile.stats.marathons_count}
-              </div>
-              <div className="text-sm text-gray-400">Марафонов</div>
-            </div>
-            <div className="bg-gray-900 rounded-lg p-4 text-center">
-              <Trophy className="w-6 h-6 text-yellow-500 mx-auto mb-2" />
-              <div className="text-2xl font-bold text-white">
-                {profile.stats.wins_count}
-              </div>
-              <div className="text-sm text-gray-400">Побед</div>
-            </div>
-            <div className="bg-gray-900 rounded-lg p-4 text-center">
-              <CheckCircle className="w-6 h-6 text-green-500 mx-auto mb-2" />
-              <div className="text-2xl font-bold text-white">
-                {profile.stats.completed_assignments}
-              </div>
-              <div className="text-sm text-gray-400">Заданий</div>
-            </div>
-            <div className="bg-gray-900 rounded-lg p-4 text-center">
-              <Flame className="w-6 h-6 text-orange-500 mx-auto mb-2" />
-              <div className="text-2xl font-bold text-white">
-                {profile.stats.total_points_earned}
-              </div>
-              <div className="text-sm text-gray-400">Очков</div>
-            </div>
           </div>
-        </CardContent>
+          <div>
-      </Card>
+            <h2 className="font-semibold text-white">Статистика</h2>
+            <p className="text-sm text-gray-400">Достижения игрока</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <StatsCard
+            label="Марафонов"
+            value={profile.stats.marathons_count}
+            icon={<Target className="w-6 h-6" />}
+            color="neon"
+          />
+          <StatsCard
+            label="Побед"
+            value={profile.stats.wins_count}
+            icon={<Trophy className="w-6 h-6" />}
+            color="purple"
+          />
+          <StatsCard
+            label="Заданий"
+            value={profile.stats.completed_assignments}
+            icon={<CheckCircle className="w-6 h-6" />}
+            color="default"
+          />
+          <StatsCard
+            label="Очков"
+            value={profile.stats.total_points_earned}
+            icon={<Flame className="w-6 h-6" />}
+            color="pink"
+          />
+        </div>
+      </GlassCard>
     </div>
   )
 }

frontend/tailwind.config.js

@@ -7,25 +7,91 @@ export default {
   theme: {
     extend: {
       colors: {
+        // Base dark colors
+        dark: {
+          950: '#050508',
+          900: '#0a0a0f',
+          800: '#12121a',
+          700: '#1a1a24',
+          600: '#1e1e2e',
+          500: '#2a2a3a',
+        },
+        // Neon cyan (primary)
+        neon: {
+          50: '#ecfeff',
+          100: '#cffafe',
+          200: '#a5f3fc',
+          300: '#67e8f9',
+          400: '#22d3ee',
+          500: '#00f0ff',
+          600: '#00d4e4',
+          700: '#00a8b8',
+          800: '#007c8a',
+          900: '#005a64',
+        },
+        // Purple accent
+        accent: {
+          50: '#faf5ff',
+          100: '#f3e8ff',
+          200: '#e9d5ff',
+          300: '#d8b4fe',
+          400: '#c084fc',
+          500: '#a855f7',
+          600: '#9333ea',
+          700: '#7c3aed',
+          800: '#6b21a8',
+          900: '#581c87',
+        },
+        // Pink highlight
+        pink: {
+          400: '#f472b6',
+          500: '#ec4899',
+          600: '#db2777',
+        },
+        // Keep primary for backwards compatibility
         primary: {
-          50: '#f0f9ff',
+          50: '#ecfeff',
-          100: '#e0f2fe',
+          100: '#cffafe',
-          200: '#bae6fd',
+          200: '#a5f3fc',
-          300: '#7dd3fc',
+          300: '#67e8f9',
-          400: '#38bdf8',
+          400: '#22d3ee',
-          500: '#0ea5e9',
+          500: '#00f0ff',
-          600: '#0284c7',
+          600: '#00d4e4',
-          700: '#0369a1',
+          700: '#00a8b8',
-          800: '#075985',
+          800: '#007c8a',
-          900: '#0c4a6e',
+          900: '#005a64',
-          950: '#082f49',
         },
       },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+        display: ['Orbitron', 'sans-serif'],
+      },
       animation: {
+        // Existing
         'spin-slow': 'spin 3s linear infinite',
         'wheel-spin': 'wheel-spin 4s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards',
-        'fade-in': 'fade-in 0.3s ease-out',
+        'fade-in': 'fade-in 0.3s ease-out forwards',
-        'slide-up': 'slide-up 0.3s ease-out',
+        'slide-up': 'slide-up 0.3s ease-out forwards',
+        // New animations
+        'glitch': 'glitch 1s linear infinite',
+        'glitch-1': 'glitch-1 0.5s infinite linear alternate-reverse',
+        'glitch-2': 'glitch-2 0.5s infinite linear alternate-reverse',
+        'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
+        'float': 'float 6s ease-in-out infinite',
+        'shimmer': 'shimmer 2s linear infinite',
+        'slide-in-right': 'slide-in-right 0.3s ease-out forwards',
+        'slide-in-left': 'slide-in-left 0.3s ease-out forwards',
+        'slide-in-up': 'slide-in-up 0.4s ease-out forwards',
+        'slide-in-down': 'slide-in-down 0.3s ease-out forwards',
+        'scale-in': 'scale-in 0.2s ease-out forwards',
+        'bounce-in': 'bounce-in 0.5s ease-out forwards',
+        'pulse-neon': 'pulse-neon 2s ease-in-out infinite',
+        'border-flow': 'border-flow 3s linear infinite',
+        'typing': 'typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite',
+        'counter': 'counter 2s ease-out forwards',
+        'shake': 'shake 0.5s ease-in-out',
+        'confetti': 'confetti 1s ease-out forwards',
       },
       keyframes: {
         'wheel-spin': {
@@ -40,6 +106,119 @@ export default {
           '0%': { opacity: '0', transform: 'translateY(10px)' },
           '100%': { opacity: '1', transform: 'translateY(0)' },
         },
+        'glitch': {
+          '0%, 100%': { transform: 'translate(0)' },
+          '20%': { transform: 'translate(-2px, 2px)' },
+          '40%': { transform: 'translate(-2px, -2px)' },
+          '60%': { transform: 'translate(2px, 2px)' },
+          '80%': { transform: 'translate(2px, -2px)' },
+        },
+        'glitch-1': {
+          '0%': { clipPath: 'inset(20% 0 60% 0)' },
+          '100%': { clipPath: 'inset(50% 0 30% 0)' },
+        },
+        'glitch-2': {
+          '0%': { clipPath: 'inset(60% 0 20% 0)' },
+          '100%': { clipPath: 'inset(30% 0 50% 0)' },
+        },
+        'glow-pulse': {
+          '0%, 100%': {
+            boxShadow: '0 0 5px var(--glow-color, #00f0ff), 0 0 10px var(--glow-color, #00f0ff), 0 0 20px var(--glow-color, #00f0ff)'
+          },
+          '50%': {
+            boxShadow: '0 0 10px var(--glow-color, #00f0ff), 0 0 20px var(--glow-color, #00f0ff), 0 0 40px var(--glow-color, #00f0ff)'
+          },
+        },
+        'float': {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        'shimmer': {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+        'slide-in-right': {
+          '0%': { opacity: '0', transform: 'translateX(20px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        'slide-in-left': {
+          '0%': { opacity: '0', transform: 'translateX(-20px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        'slide-in-up': {
+          '0%': { opacity: '0', transform: 'translateY(30px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-in-down': {
+          '0%': { opacity: '0', transform: 'translateY(-20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'scale-in': {
+          '0%': { opacity: '0', transform: 'scale(0.9)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        'bounce-in': {
+          '0%': { opacity: '0', transform: 'scale(0.3)' },
+          '50%': { transform: 'scale(1.05)' },
+          '70%': { transform: 'scale(0.9)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        'pulse-neon': {
+          '0%, 100%': {
+            textShadow: '0 0 5px var(--neon-color, #00f0ff), 0 0 10px var(--neon-color, #00f0ff)'
+          },
+          '50%': {
+            textShadow: '0 0 10px var(--neon-color, #00f0ff), 0 0 20px var(--neon-color, #00f0ff), 0 0 30px var(--neon-color, #00f0ff)'
+          },
+        },
+        'border-flow': {
+          '0%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+          '100%': { backgroundPosition: '0% 50%' },
+        },
+        'typing': {
+          'from': { width: '0' },
+          'to': { width: '100%' },
+        },
+        'blink-caret': {
+          'from, to': { borderColor: 'transparent' },
+          '50%': { borderColor: '#00f0ff' },
+        },
+        'shake': {
+          '0%, 100%': { transform: 'translateX(0)' },
+          '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' },
+          '20%, 40%, 60%, 80%': { transform: 'translateX(5px)' },
+        },
+        'confetti': {
+          '0%': { transform: 'translateY(0) rotate(0deg)', opacity: '1' },
+          '100%': { transform: 'translateY(100vh) rotate(720deg)', opacity: '0' },
+        },
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'neon-glow': 'linear-gradient(90deg, #00f0ff, #a855f7, #00f0ff)',
+        'cyber-grid': `
+          linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px)
+        `,
+      },
+      backgroundSize: {
+        'grid': '50px 50px',
+      },
+      boxShadow: {
+        'neon': '0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff',
+        'neon-lg': '0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff',
+        'neon-purple': '0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 20px #a855f7',
+        'neon-pink': '0 0 5px #ec4899, 0 0 10px #ec4899, 0 0 20px #ec4899',
+        'inner-glow': 'inset 0 0 20px rgba(0, 240, 255, 0.1)',
+        'glass': '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
+      },
+      backdropBlur: {
+        'xs': '2px',
+      },
+      transitionDuration: {
+        '400': '400ms',
       },
     },
   },