Your Name
feat: UI improvements and error suppression - Enhanced dashboard and market pages with improved header buttons, logo, and currency symbol display - Stopped animated ticker - Removed pie chart legends - Added error suppressor for external service errors (SSE, Permissions-Policy warnings) - Improved header button prominence and icon appearance - Enhanced logo with glow effects and better design - Fixed currency symbol visibility in market tables
8b7b267
| /* Crypto Intelligence Hub - Enhanced Stylesheet */ | |
| :root { | |
| /* Primary Colors */ | |
| --primary: #667eea; | |
| --primary-dark: #764ba2; | |
| --primary-light: #8b9aff; | |
| --secondary: #f093fb; | |
| --accent: #ff6b9d; | |
| /* Status Colors */ | |
| --success: #10b981; | |
| --danger: #ef4444; | |
| --warning: #f59e0b; | |
| --info: #3b82f6; | |
| /* Background Colors */ | |
| --dark: #0a0e1a; | |
| --dark-card: #111827; | |
| --dark-hover: #1f2937; | |
| --dark-elevated: #1a1f35; | |
| /* Text Colors */ | |
| --text-primary: #f9fafb; | |
| --text-secondary: #9ca3af; | |
| --text-muted: #6b7280; | |
| /* UI Elements */ | |
| --border: rgba(255, 255, 255, 0.1); | |
| --border-light: rgba(255, 255, 255, 0.05); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4); | |
| --glow: 0 0 20px rgba(102, 126, 234, 0.3); | |
| /* Gradients */ | |
| --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| --gradient-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); | |
| --gradient-pink: linear-gradient(135deg, #f093fb 0%, #ff6b9d 100%); | |
| /* Transitions */ | |
| --transition-fast: 0.2s ease; | |
| --transition-normal: 0.3s ease; | |
| --transition-slow: 0.5s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, var(--dark) 0%, #1a1f35 50%, #0f1729 100%); | |
| background-attachment: fixed; | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Animated background particles */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.05) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .app-container { | |
| max-width: 1920px; | |
| margin: 0 auto; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Header - Enhanced Glassmorphism */ | |
| .app-header { | |
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.7) 0%, rgba(31, 41, 55, 0.5) 100%); | |
| backdrop-filter: blur(40px) saturate(180%); | |
| -webkit-backdrop-filter: blur(40px) saturate(180%); | |
| border-bottom: 1px solid var(--border); | |
| padding: 20px 30px; | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .logo-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient-purple); | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 28px; | |
| color: white; | |
| box-shadow: var(--glow); | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| .logo-text h1 { | |
| font-size: 28px; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .logo-text p { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .status-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| background: rgba(16, 185, 129, 0.15); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| border-radius: 12px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| background: var(--success); | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.2); } | |
| } | |
| .status-badge.error .status-dot { | |
| background: var(--danger); | |
| } | |
| .status-badge.warning .status-dot { | |
| background: var(--warning); | |
| } | |
| /* Navigation Tabs - Enhanced Glassmorphism */ | |
| .tabs-nav { | |
| display: flex; | |
| gap: 10px; | |
| padding: 20px 30px; | |
| background: rgba(17, 24, 39, 0.4); | |
| backdrop-filter: blur(20px) saturate(150%); | |
| -webkit-backdrop-filter: blur(20px) saturate(150%); | |
| border-bottom: 1px solid var(--border); | |
| overflow-x: auto; | |
| position: sticky; | |
| top: 100px; | |
| z-index: 90; | |
| } | |
| .tab-btn { | |
| padding: 12px 24px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { | |
| background: rgba(102, 126, 234, 0.1); | |
| border-color: var(--primary); | |
| color: var(--text-primary); | |
| } | |
| .tab-btn.active { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| border-color: var(--primary); | |
| color: white; | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| flex: 1; | |
| padding: 30px; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .section-header h2 { | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .stat-card { | |
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.6), rgba(31, 41, 55, 0.4)); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 25px; | |
| text-align: center; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| -webkit-backdrop-filter: blur(20px) saturate(180%); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| border-color: var(--primary); | |
| } | |
| .stat-icon { | |
| font-size: 40px; | |
| margin-bottom: 10px; | |
| } | |
| .stat-value { | |
| font-size: 36px; | |
| font-weight: 800; | |
| color: var(--primary); | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| } | |
| /* Cards - Enhanced Glassmorphism */ | |
| .card { | |
| background: rgba(17, 24, 39, 0.5); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 25px; | |
| margin-bottom: 20px; | |
| backdrop-filter: blur(20px) saturate(180%); | |
| -webkit-backdrop-filter: blur(20px) saturate(180%); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 48px 0 rgba(102, 126, 234, 0.3); | |
| border-color: rgba(102, 126, 234, 0.5); | |
| } | |
| .card h3 { | |
| font-size: 20px; | |
| margin-bottom: 20px; | |
| color: var(--text-primary); | |
| border-bottom: 2px solid var(--border); | |
| padding-bottom: 10px; | |
| } | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| } | |
| /* Buttons */ | |
| .btn-primary, .btn-refresh { | |
| padding: 12px 24px; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| border: none; | |
| border-radius: 10px; | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 14px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary:hover, .btn-refresh:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .btn-primary:active, .btn-refresh:active { | |
| transform: translateY(0); | |
| } | |
| .btn-primary:focus, .btn-refresh:focus { | |
| outline: 2px solid var(--primary-light); | |
| outline-offset: 2px; | |
| } | |
| .btn-refresh { | |
| background: rgba(102, 126, 234, 0.2); | |
| border: 1px solid var(--primary); | |
| } | |
| /* SVG icons in buttons */ | |
| .btn-primary svg, .btn-refresh svg { | |
| flex-shrink: 0; | |
| stroke-width: 2.5; | |
| } | |
| .btn-primary:disabled, .btn-refresh:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* Forms */ | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| width: 100%; | |
| padding: 12px 16px; | |
| background: rgba(31, 41, 55, 0.4); | |
| backdrop-filter: blur(10px) saturate(150%); | |
| -webkit-backdrop-filter: blur(10px) saturate(150%); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 14px; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .form-group input:hover, | |
| .form-group textarea:hover, | |
| .form-group select:hover { | |
| border-color: var(--primary-light); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| background: rgba(31, 41, 55, 0.8); | |
| } | |
| .form-group input:disabled, | |
| .form-group textarea:disabled, | |
| .form-group select:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| background: rgba(31, 41, 55, 0.4); | |
| } | |
| /* Form validation states */ | |
| .form-group input.error, | |
| .form-group textarea.error, | |
| .form-group select.error { | |
| border-color: var(--danger); | |
| } | |
| .form-group input.success, | |
| .form-group textarea.success, | |
| .form-group select.success { | |
| border-color: var(--success); | |
| } | |
| .form-group .error-message { | |
| color: var(--danger); | |
| font-size: 12px; | |
| margin-top: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .form-group .success-message { | |
| color: var(--success); | |
| font-size: 12px; | |
| margin-top: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .form-group .help-text { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-top: 6px; | |
| } | |
| /* Placeholder styling */ | |
| .form-group input::placeholder, | |
| .form-group textarea::placeholder { | |
| color: var(--text-muted); | |
| opacity: 0.7; | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| line-height: 1.6; | |
| } | |
| /* Tables */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| table th, | |
| table td { | |
| padding: 12px; | |
| text-align: right; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| table th { | |
| background: rgba(31, 41, 55, 0.6); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| table tr:hover { | |
| background: rgba(102, 126, 234, 0.05); | |
| } | |
| /* Loading States */ | |
| .loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| color: var(--text-secondary); | |
| min-height: 200px; | |
| } | |
| .spinner { | |
| border: 3px solid var(--border); | |
| border-top: 3px solid var(--primary); | |
| border-right: 3px solid var(--primary-light); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 0.8s linear infinite; | |
| margin: 0 auto 15px; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-top: 10px; | |
| } | |
| /* Skeleton Loading */ | |
| .skeleton { | |
| background: linear-gradient( | |
| 90deg, | |
| rgba(255, 255, 255, 0.05) 25%, | |
| rgba(255, 255, 255, 0.15) 50%, | |
| rgba(255, 255, 255, 0.05) 75% | |
| ); | |
| background-size: 200% 100%; | |
| animation: skeleton-loading 1.5s ease-in-out infinite; | |
| border-radius: 4px; | |
| } | |
| @keyframes skeleton-loading { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| .skeleton .stat-value, | |
| .skeleton .stat-label { | |
| opacity: 0; | |
| } | |
| /* Alerts & Notifications */ | |
| .alert { | |
| padding: 16px 20px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| border-left: 4px solid; | |
| animation: slideInDown 0.3s ease-out; | |
| } | |
| @keyframes slideInDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .alert-success { | |
| background: rgba(16, 185, 129, 0.15); | |
| border-color: var(--success); | |
| color: var(--success); | |
| } | |
| .alert-error { | |
| background: rgba(239, 68, 68, 0.15); | |
| border-color: var(--danger); | |
| color: var(--danger); | |
| } | |
| .alert-warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| border-color: var(--warning); | |
| color: var(--warning); | |
| } | |
| .alert-info { | |
| background: rgba(59, 130, 246, 0.15); | |
| border-color: var(--info); | |
| color: var(--info); | |
| } | |
| .alert strong { | |
| font-weight: 700; | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| .alert p { | |
| margin: 0; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| /* Footer */ | |
| .app-footer { | |
| background: rgba(17, 24, 39, 0.8); | |
| border-top: 1px solid var(--border); | |
| padding: 20px 30px; | |
| text-align: center; | |
| color: var(--text-secondary); | |
| } | |
| .app-footer a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| margin: 0 10px; | |
| } | |
| .app-footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Sentiment Badges */ | |
| .sentiment-badge { | |
| display: inline-block; | |
| padding: 6px 12px; | |
| border-radius: 8px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| margin: 5px 5px 5px 0; | |
| } | |
| .sentiment-badge.bullish { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--success); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| } | |
| .sentiment-badge.bearish { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--danger); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .sentiment-badge.neutral { | |
| background: rgba(156, 163, 175, 0.2); | |
| color: var(--text-secondary); | |
| border: 1px solid rgba(156, 163, 175, 0.3); | |
| } | |
| /* AI Result Cards */ | |
| .ai-result-card { | |
| background: rgba(17, 24, 39, 0.6); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin-top: 15px; | |
| transition: all 0.3s; | |
| } | |
| .ai-result-card:hover { | |
| border-color: var(--primary); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2); | |
| } | |
| .ai-result-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .ai-result-metric { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 15px; | |
| background: rgba(31, 41, 55, 0.6); | |
| border-radius: 10px; | |
| min-width: 120px; | |
| } | |
| .ai-result-metric-value { | |
| font-size: 28px; | |
| font-weight: 800; | |
| margin-bottom: 5px; | |
| } | |
| .ai-result-metric-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| } | |
| /* Model Status Indicators */ | |
| .model-status { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .model-status.available { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: var(--success); | |
| } | |
| .model-status.unavailable { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--danger); | |
| } | |
| .model-status.partial { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: var(--warning); | |
| } | |
| /* Form Improvements for AI Sections */ | |
| .form-group input[type="text"] { | |
| text-transform: uppercase; | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| /* Loading States */ | |
| .loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| color: var(--text-secondary); | |
| } | |
| .loading .spinner { | |
| margin-bottom: 15px; | |
| } | |
| /* Confidence Bar */ | |
| .confidence-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: rgba(31, 41, 55, 0.6); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-top: 5px; | |
| } | |
| .confidence-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--primary-dark)); | |
| transition: width 0.3s ease; | |
| } | |
| .confidence-fill.high { | |
| background: linear-gradient(90deg, var(--success), #059669); | |
| } | |
| .confidence-fill.low { | |
| background: linear-gradient(90deg, var(--danger), #dc2626); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 15px; | |
| } | |
| .header-actions { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .header-stats { | |
| display: none; /* Hide mini stats on mobile */ | |
| } | |
| .tabs-nav { | |
| padding: 15px; | |
| gap: 8px; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: thin; | |
| } | |
| .tabs-nav::-webkit-scrollbar { | |
| height: 4px; | |
| } | |
| .tab-btn { | |
| padding: 10px 16px; | |
| font-size: 13px; | |
| flex-shrink: 0; | |
| } | |
| .tab-btn span { | |
| display: none; /* Hide text labels on mobile, show only icons */ | |
| } | |
| .tab-btn i { | |
| margin: 0; | |
| } | |
| .main-content { | |
| padding: 15px; | |
| } | |
| .section-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .section-header h2 { | |
| font-size: 24px; | |
| } | |
| .section-header .btn-primary, | |
| .section-header .btn-refresh { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .grid-2 { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| gap: 15px; | |
| } | |
| .stat-card { | |
| padding: 20px; | |
| } | |
| .stat-icon { | |
| font-size: 32px; | |
| } | |
| .stat-value { | |
| font-size: 28px; | |
| } | |
| .ai-result-metric { | |
| min-width: 100px; | |
| padding: 10px; | |
| } | |
| .ai-result-metric-value { | |
| font-size: 20px; | |
| } | |
| .card { | |
| padding: 15px; | |
| } | |
| .card h3 { | |
| font-size: 18px; | |
| } | |
| /* Forms on mobile */ | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| font-size: 16px; /* Prevent zoom on iOS */ | |
| } | |
| /* Buttons stack on mobile */ | |
| .btn-primary, | |
| .btn-refresh { | |
| width: 100%; | |
| justify-content: center; | |
| padding: 14px 20px; | |
| } | |
| /* Tables scroll horizontally on mobile */ | |
| table { | |
| display: block; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| } | |
| /* Tablet and medium screens */ | |
| @media (min-width: 769px) and (max-width: 1024px) { | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .tabs-nav { | |
| gap: 8px; | |
| } | |
| .tab-btn { | |
| padding: 10px 20px; | |
| font-size: 13px; | |
| } | |
| } | |
| /* Large screens */ | |
| @media (min-width: 1440px) { | |
| .app-container { | |
| padding: 0 40px; | |
| } | |
| .main-content { | |
| padding: 40px; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| } | |
| } | |
| /* Enhanced Header Actions */ | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .header-stats { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .mini-stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 10px 15px; | |
| background: rgba(31, 41, 55, 0.4); | |
| backdrop-filter: blur(10px) saturate(150%); | |
| -webkit-backdrop-filter: blur(10px) saturate(150%); | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| min-width: 80px; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15); | |
| } | |
| .mini-stat:hover { | |
| background: rgba(31, 41, 55, 0.8); | |
| border-color: var(--primary); | |
| transform: translateY(-2px); | |
| } | |
| .mini-stat i { | |
| font-size: 18px; | |
| color: var(--primary); | |
| margin-bottom: 5px; | |
| } | |
| .mini-stat span { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .mini-stat small { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .theme-toggle { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| background: rgba(31, 41, 55, 0.6); | |
| border: 1px solid var(--border); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition-normal); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .theme-toggle:hover { | |
| background: var(--gradient-purple); | |
| border-color: var(--primary); | |
| transform: rotate(15deg); | |
| } | |
| /* Enhanced Stat Cards */ | |
| .stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%); | |
| opacity: 0; | |
| transition: var(--transition-normal); | |
| } | |
| .stat-card:hover::before { | |
| opacity: 1; | |
| } | |
| .stat-card.gradient-purple { | |
| border-left: 4px solid #667eea; | |
| } | |
| .stat-card.gradient-green { | |
| border-left: 4px solid #10b981; | |
| } | |
| .stat-card.gradient-blue { | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .stat-card.gradient-orange { | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .stat-card .stat-icon { | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 32px; | |
| flex-shrink: 0; | |
| } | |
| .stat-card.gradient-purple .stat-icon { | |
| background: var(--gradient-purple); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); | |
| } | |
| .stat-card.gradient-green .stat-icon { | |
| background: var(--gradient-green); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3); | |
| } | |
| .stat-card.gradient-blue .stat-icon { | |
| background: var(--gradient-blue); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3); | |
| } | |
| .stat-card.gradient-orange .stat-icon { | |
| background: var(--gradient-orange); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3); | |
| } | |
| .stat-content { | |
| flex: 1; | |
| } | |
| .stat-trend { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-top: 5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .stat-trend i { | |
| color: var(--success); | |
| } | |
| /* Enhanced Tab Buttons */ | |
| .tab-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .tab-btn i { | |
| font-size: 16px; | |
| } | |
| .tab-btn span { | |
| font-size: 14px; | |
| } | |
| /* Smooth Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--dark-card); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--gradient-purple); | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-light); | |
| } | |
| /* Loading Animation Enhancement */ | |
| .spinner { | |
| border: 3px solid var(--border); | |
| border-top: 3px solid var(--primary); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .spinner::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid var(--secondary); | |
| border-radius: 50%; | |
| animation: spin 0.5s linear infinite reverse; | |
| } | |
| /* Card Enhancements */ | |
| .card { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); | |
| transition: var(--transition-slow); | |
| } | |
| .card:hover::before { | |
| left: 100%; | |
| } | |
| /* Button Enhancements */ | |
| .btn-primary, .btn-refresh { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary::before, .btn-refresh::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .btn-primary:hover::before, .btn-refresh:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| /* Tooltip */ | |
| [title] { | |
| position: relative; | |
| } | |
| /* Focus States */ | |
| *:focus-visible { | |
| outline: 2px solid var(--primary); | |
| outline-offset: 2px; | |
| } | |
| /* Selection */ | |
| ::selection { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| /* Responsive Enhancements */ | |
| @media (max-width: 768px) { | |
| .header-stats { | |
| display: none; | |
| } | |
| .mini-stat { | |
| min-width: 60px; | |
| padding: 8px 10px; | |
| } | |
| .stat-card { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .stat-card .stat-icon { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 28px; | |
| } | |
| .tab-btn span { | |
| display: none; | |
| } | |
| .tab-btn { | |
| padding: 12px 16px; | |
| } | |
| } | |
| /* Light Theme */ | |
| body.light-theme { | |
| --dark: #f3f4f6; | |
| --dark-card: #ffffff; | |
| --dark-hover: #f9fafb; | |
| --dark-elevated: #e5e7eb; | |
| --text-primary: #111827; | |
| --text-secondary: #6b7280; | |
| --text-muted: #9ca3af; | |
| --border: rgba(0, 0, 0, 0.1); | |
| --border-light: rgba(0, 0, 0, 0.05); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15); | |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #d1d5db 100%); | |
| } | |
| body.light-theme::before { | |
| background-image: | |
| radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.08) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.08) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%); | |
| } | |
| body.light-theme .app-header { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.7) 100%); | |
| } | |
| body.light-theme .tabs-nav { | |
| background: rgba(255, 255, 255, 0.5); | |
| } | |
| body.light-theme .stat-card, | |
| body.light-theme .card { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| } | |
| body.light-theme .mini-stat { | |
| background: rgba(249, 250, 251, 0.8); | |
| } | |
| body.light-theme .theme-toggle { | |
| background: rgba(249, 250, 251, 0.8); | |
| } | |
| body.light-theme .form-group input, | |
| body.light-theme .form-group textarea, | |
| body.light-theme .form-group select { | |
| background: rgba(249, 250, 251, 0.8); | |
| } | |
| body.light-theme table th { | |
| background: rgba(249, 250, 251, 0.8); | |
| } | |
| body.light-theme ::-webkit-scrollbar-track { | |
| background: #e5e7eb; | |
| } | |