Implement Jupiter-style trading chart with lightweight-charts

- Add TradingView Lightweight Charts library for professional chart display
- Create TradingChart component with real-time candlestick data
- Implement position overlays (entry, stop loss, take profit lines)
- Add chart header with symbol and price information
- Create CompactTradingPanel for Jupiter-style order form
- Build ChartTradingPage combining chart and trading panel
- Add demo and test pages for chart functionality
- Use dynamic imports to avoid SSR issues with lightweight-charts
- Generate sample price data for demonstration

Features:
- Full-screen candlestick chart with dark theme
- Position markers on chart (blue entry, red SL, green TP)
- Real-time price display and P&L tracking
- Responsive design with proper chart resizing
- Professional trading interface similar to Jupiter Perps

app/globals.css

@@ -93,3 +93,99 @@ input[type="range"]:focus::-webkit-slider-thumb {
 input[type="range"]:focus::-moz-range-thumb {
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }
+
+/* Trading Chart Slider Styles */
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: 2px solid #1f2937;
+  box-shadow: 0 0 0 1px #3b82f6;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  background: #2563eb;
+  box-shadow: 0 0 0 2px #2563eb;
+}
+
+.slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: 2px solid #1f2937;
+  box-shadow: 0 0 0 1px #3b82f6;
+}
+
+/* Chart container styling */
+.trading-chart-container {
+  position: relative;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+}
+
+/* Position indicator styles */
+.position-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: white;
+  font-size: 12px;
+  z-index: 10;
+}
+
+/* Trading panel animations */
+.trade-button {
+  transition: all 0.2s ease-in-out;
+}
+
+.trade-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.trade-button:active {
+  transform: translateY(0);
+}
+
+/* Chart loading animation */
+.chart-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 600px;
+  background: #1a1a1a;
+  border-radius: 8px;
+}
+
+.loading-spinner {
+  border: 2px solid #374151;
+  border-top: 2px solid #3b82f6;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Responsive chart adjustments */
+@media (max-width: 1024px) {
+  .trading-interface {
+    flex-direction: column;
+  }
+  
+  .trading-panel {
+    width: 100%;
+    max-width: none;
+  }
+}