feat: enhance trading bot interface design with modern UI/UX

- Redesigned automation-v2 page with premium visual hierarchy
- Added gradient backgrounds and glass morphism effects
- Enhanced button styling with hover animations and scale effects
- Improved timeframe selection with interactive cards and checkmarks
- Upgraded trading mode selection with large visual cards
- Enhanced balance slider with custom styling and progress indicators
- Added professional AI analysis panel with standby state
- Improved sidebar with enhanced status cards and visual feedback
- Added custom CSS animations (floating, pulse, gradient shifts)
- Implemented responsive grid layout with better spacing
- Enhanced color scheme with blue, purple, cyan gradients
- Added neon glow effects and backdrop blur styling
- Improved typography with gradient text and better hierarchy
- Created modern card designs with rounded corners and shadows

The interface now provides a significantly more appealing and professional
user experience while maintaining all original functionality.

app/globals.css

@@ -53,43 +53,193 @@ body {
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }
 
-/* Custom range slider styling */
+/* Enhanced range slider styling */
-input[type="range"] {
+.slider {
   -webkit-appearance: none;
   appearance: none;
-  height: 8px;
+  height: 12px;
-  background: linear-gradient(to right, #3B82F6 0%, #3B82F6 30%, #374151 30%, #374151 100%);
+  border-radius: 6px;
-  border-radius: 4px;
   outline: none;
   cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-input[type="range"]::-webkit-slider-thumb {
+.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 20px;
+  width: 24px;
-  height: 20px;
+  height: 24px;
-  background: #3B82F6;
+  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
   border-radius: 50%;
   cursor: pointer;
-  border: 2px solid #1e40af;
+  border: 3px solid #ffffff;
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 0 0 0 rgba(59, 130, 246, 0.7);
+  transition: all 0.3s ease;
 }
 
-input[type="range"]::-moz-range-thumb {
+.slider::-moz-range-thumb {
-  width: 20px;
+  width: 24px;
-  height: 20px;
+  height: 24px;
-  background: #3B82F6;
+  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
   border-radius: 50%;
   cursor: pointer;
-  border: 2px solid #1e40af;
+  border: 3px solid #ffffff;
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
 }
 
-input[type="range"]:focus::-webkit-slider-thumb {
+.slider:hover::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6), 0 0 0 8px rgba(59, 130, 246, 0.1);
 }
 
-input[type="range"]:focus::-moz-range-thumb {
+.slider:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6), 0 0 0 12px rgba(59, 130, 246, 0.2);
+}
+
+.slider:active::-webkit-slider-thumb {
+  transform: scale(0.95);
+}
+
+/* Glass morphism effects */
+.glass {
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.glass-dark {
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Enhanced card hover effects */
+.enhanced-card {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-style: preserve-3d;
+}
+
+.enhanced-card:hover {
+  transform: translateY(-4px) rotateX(5deg);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.4),
+    0 0 50px rgba(139, 92, 246, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* Gradient text animations */
+.gradient-text {
+  background: linear-gradient(270deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6);
+  background-size: 400% 400%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradientShift 6s ease infinite;
+}
+
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Pulse effects for status indicators */
+.pulse-green {
+  animation: pulseGreen 2s infinite;
+}
+
+.pulse-red {
+  animation: pulseRed 2s infinite;
+}
+
+@keyframes pulseGreen {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+  }
+}
+
+@keyframes pulseRed {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+  }
+}
+
+/* Floating animation for standby elements */
+.float {
+  animation: floating 3s ease-in-out infinite;
+}
+
+@keyframes floating {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+
+/* Enhanced button effects */
+.btn-enhanced {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.btn-enhanced::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.btn-enhanced:hover::before {
+  left: 100%;
+}
+
+/* Neon glow effects */
+.neon-blue {
+  box-shadow: 
+    0 0 10px rgba(59, 130, 246, 0.5),
+    0 0 20px rgba(59, 130, 246, 0.3),
+    0 0 30px rgba(59, 130, 246, 0.1);
+}
+
+.neon-purple {
+  box-shadow: 
+    0 0 10px rgba(139, 92, 246, 0.5),
+    0 0 20px rgba(139, 92, 246, 0.3),
+    0 0 30px rgba(139, 92, 246, 0.1);
+}
+
+.neon-green {
+  box-shadow: 
+    0 0 10px rgba(34, 197, 94, 0.5),
+    0 0 20px rgba(34, 197, 94, 0.3),
+    0 0 30px rgba(34, 197, 94, 0.1);
+}
+
+/* Typing animation for loading states */
+.typing {
+  overflow: hidden;
+  border-right: 2px solid #3B82F6;
+  white-space: nowrap;
+  animation: typing 2s steps(40, end), blink 1s infinite;
+}
+
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes blink {
+  0%, 50% { border-color: transparent; }
+  51%, 100% { border-color: #3B82F6; }
 }