Spaces:
Runtime error
Runtime error
| /* ============================================ | |
| FINESE 2 — Modern Light Theme with Creative Enhancements | |
| ============================================ */ | |
| :root { | |
| --bg-primary: #FFFFFF; | |
| --bg-secondary: #F8FAFC; | |
| --bg-tertiary: #F1F5F9; | |
| --bg-elevated: #FFFFFF; | |
| --surface-default: #FFFFFF; | |
| --surface-hover: #F8FAFC; | |
| --surface-active: #F1F5F9; | |
| --surface-selected: #EEF2FF; | |
| --border-subtle: #E2E8F0; | |
| --border-default: #CBD5E1; | |
| --border-strong: #94A3B8; | |
| --text-primary: #0F172A; | |
| --text-secondary: #475569; | |
| --text-tertiary: #94A3B8; | |
| --text-inverse: #FFFFFF; | |
| --primary-50: #EEF2FF; | |
| --primary-100: #E0E7FF; | |
| --primary-200: #C7D2FE; | |
| --primary-300: #A5B4FC; | |
| --primary-400: #818CF8; | |
| --primary-500: #6366F1; | |
| --primary-600: #4F46E5; | |
| --primary-700: #4338CA; | |
| --success-50: #F0FDF4; | |
| --success-500: #22C55E; | |
| --success-600: #16A34A; | |
| --warning-50: #FFFBEB; | |
| --warning-500: #EAB308; | |
| --warning-600: #CA8A04; | |
| --danger-50: #FEF2F2; | |
| --danger-500: #EF4444; | |
| --danger-600: #DC2626; | |
| --data-blue: #3B82F6; | |
| --data-indigo: #6366F1; | |
| --data-violet: #8B5CF6; | |
| --data-pink: #EC4899; | |
| --data-rose: #F43F5E; | |
| --data-orange: #F97316; | |
| --data-amber: #F59E0B; | |
| --data-emerald: #10B981; | |
| --data-cyan: #06B6D4; | |
| --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05); | |
| --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08); | |
| --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08); | |
| --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.08); | |
| --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.08), 0 8px 10px -6px rgb(15 23 42 / 0.08); | |
| --radius-sm: 6px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-xl: 16px; | |
| --radius-2xl: 20px; | |
| --radius-full: 9999px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 14px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%); | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| overflow: hidden; | |
| } | |
| /* ============================================ | |
| Layout | |
| ============================================ */ | |
| .app-layout { | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .sidebar { | |
| width: 280px; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-right: 1px solid var(--border-subtle); | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| flex-shrink: 0; | |
| box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05); | |
| } | |
| .main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| min-width: 0; | |
| } | |
| .content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 32px; | |
| background: transparent; | |
| } | |
| /* ============================================ | |
| Sidebar Enhancements | |
| ============================================ */ | |
| .sidebar-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 20px 24px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); | |
| color: white; | |
| } | |
| .brand-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: pulse-glow 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.5)); } | |
| 50% { filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.8)); } | |
| } | |
| .brand-text { | |
| font-size: 20px; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| } | |
| .sidebar-section { | |
| padding: 20px 24px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-section:hover { | |
| background: var(--bg-secondary); | |
| } | |
| .sidebar-label { | |
| display: block; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-tertiary); | |
| margin-bottom: 12px; | |
| } | |
| /* Upload Zone with Animation */ | |
| .upload-zone { | |
| border: 2px dashed var(--border-default); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .upload-zone::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); | |
| transition: left 0.5s; | |
| } | |
| .upload-zone:hover::before { | |
| left: 100%; | |
| } | |
| .upload-zone:hover { | |
| border-color: var(--primary-500); | |
| background: var(--primary-50); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15); | |
| } | |
| .upload-zone.dragover { | |
| border-color: var(--primary-500); | |
| background: var(--primary-50); | |
| transform: scale(1.02); | |
| box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2); | |
| } | |
| .upload-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-secondary); | |
| } | |
| .upload-content svg { | |
| color: var(--text-tertiary); | |
| transition: transform 0.3s ease; | |
| } | |
| .upload-zone:hover .upload-content svg { | |
| transform: translateY(-4px); | |
| color: var(--primary-500); | |
| } | |
| .upload-text { | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| .upload-hint { | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| } | |
| .upload-status { | |
| margin-top: 8px; | |
| font-size: 12px; | |
| min-height: 18px; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .upload-status.success { | |
| color: var(--success-600); | |
| font-weight: 600; | |
| } | |
| .upload-status.error { | |
| color: var(--danger-600); | |
| font-weight: 600; | |
| } | |
| /* Dataset Card */ | |
| .dataset-card { | |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); | |
| border-radius: var(--radius-md); | |
| padding: 12px; | |
| border: 1px solid var(--border-subtle); | |
| transition: all 0.3s ease; | |
| } | |
| .dataset-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .dataset-empty { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-tertiary); | |
| font-size: 13px; | |
| } | |
| .dataset-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .dataset-name { | |
| font-weight: 600; | |
| font-size: 13px; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .dataset-meta { | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| } | |
| .dataset-shape { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 8px; | |
| } | |
| .shape-badge { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-sm); | |
| padding: 2px 8px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| transition: all 0.2s ease; | |
| } | |
| .shape-badge:hover { | |
| background: var(--primary-50); | |
| border-color: var(--primary-500); | |
| color: var(--primary-700); | |
| } | |
| /* Shape Control */ | |
| .shape-control { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .shape-control label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .shape-control input { | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| font-size: 13px; | |
| font-family: inherit; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| transition: all 0.2s; | |
| } | |
| .shape-control input:focus { | |
| outline: none; | |
| border-color: var(--primary-500); | |
| box-shadow: 0 0 0 3px var(--primary-100); | |
| transform: translateY(-1px); | |
| } | |
| /* ============================================ | |
| Top Bar | |
| ============================================ */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 32px; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border-subtle); | |
| flex-shrink: 0; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| .topbar-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .page-title { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| letter-spacing: -0.5px; | |
| background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .dataset-badge { | |
| background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%); | |
| color: var(--primary-700); | |
| padding: 4px 12px; | |
| border-radius: var(--radius-full); | |
| font-size: 12px; | |
| font-weight: 600; | |
| border: 1px solid var(--primary-200); | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateX(-10px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .topbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-icon:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--primary-600); | |
| transform: rotate(15deg); | |
| } | |
| /* ============================================ | |
| Tab Bar with Active Indicator Animation | |
| ============================================ */ | |
| .tab-bar { | |
| display: flex; | |
| gap: 4px; | |
| padding: 0 32px; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border-subtle); | |
| flex-shrink: 0; | |
| overflow-x: auto; | |
| } | |
| .tab-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 16px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -1px; | |
| white-space: nowrap; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| } | |
| .tab-item::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-500); | |
| transition: all 0.3s ease; | |
| transform: translateX(-50%); | |
| } | |
| .tab-item:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-secondary); | |
| } | |
| .tab-item.active { | |
| color: var(--primary-600); | |
| font-weight: 600; | |
| } | |
| .tab-item.active::after { | |
| width: 100%; | |
| } | |
| .tab-item svg { | |
| flex-shrink: 0; | |
| transition: transform 0.3s ease; | |
| } | |
| .tab-item:hover svg { | |
| transform: scale(1.1); | |
| } | |
| /* ============================================ | |
| Cards & Surfaces with Hover Effects | |
| ============================================ */ | |
| .card { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .card:hover { | |
| box-shadow: var(--shadow-lg); | |
| transform: translateY(-2px); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| font-weight: 600; | |
| font-size: 14px; | |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); | |
| } | |
| .card-body { | |
| padding: 20px; | |
| } | |
| .card-footer { | |
| padding: 12px 20px; | |
| border-top: 1px solid var(--border-subtle); | |
| background: var(--bg-secondary); | |
| } | |
| /* ============================================ | |
| Health Hero Card - Centerpiece | |
| ============================================ */ | |
| .health-hero-card { | |
| background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%); | |
| border: 2px solid var(--primary-200); | |
| box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1); | |
| } | |
| .health-score-circle { | |
| position: relative; | |
| width: 160px; | |
| height: 160px; | |
| } | |
| .health-score-text { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| } | |
| .score-value { | |
| font-size: 42px; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| line-height: 1; | |
| } | |
| .score-label { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| margin-top: 4px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* ============================================ | |
| Enhanced Metric Cards with Icons | |
| ============================================ */ | |
| .metric-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 24px; | |
| } | |
| .metric-card { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .metric-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary-500), var(--primary-400)); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .metric-card:hover { | |
| box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15); | |
| transform: translateY(-4px); | |
| border-color: var(--primary-300); | |
| } | |
| .metric-card:hover::before { | |
| opacity: 1; | |
| } | |
| .metric-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius-md); | |
| background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .metric-card:hover .metric-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2); | |
| } | |
| .metric-label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-tertiary); | |
| margin-bottom: 8px; | |
| } | |
| .metric-value { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| line-height: 1.2; | |
| letter-spacing: -1px; | |
| } | |
| .metric-sublabel { | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| margin-top: 4px; | |
| } | |
| .metric-delta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| margin-top: 8px; | |
| padding: 4px 10px; | |
| border-radius: var(--radius-sm); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .metric-delta.positive { | |
| background: var(--success-50); | |
| color: var(--success-600); | |
| } | |
| .metric-delta.negative { | |
| background: var(--danger-50); | |
| color: var(--danger-600); | |
| } | |
| /* ============================================ | |
| Quality Metrics with Animated Bars | |
| ============================================ */ | |
| .quality-metric { | |
| padding: 16px; | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| transition: all 0.3s ease; | |
| } | |
| .quality-metric:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .quality-label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .quality-bar-container { | |
| height: 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| margin-bottom: 8px; | |
| } | |
| .quality-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary-500), var(--primary-400)); | |
| border-radius: var(--radius-full); | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); | |
| } | |
| .quality-bar.uniqueness { | |
| background: linear-gradient(90deg, var(--data-emerald), var(--data-cyan)); | |
| } | |
| .quality-bar.validity { | |
| background: linear-gradient(90deg, var(--data-violet), var(--data-pink)); | |
| } | |
| .quality-bar.consistency { | |
| background: linear-gradient(90deg, var(--data-orange), var(--data-amber)); | |
| } | |
| .quality-value { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| text-align: right; | |
| } | |
| /* ============================================ | |
| Smart Insights Panel | |
| ============================================ */ | |
| .insights-card { | |
| border: 2px solid var(--primary-200); | |
| background: linear-gradient(135deg, #FFFFFF 0%, var(--primary-50) 100%); | |
| } | |
| .insight-item { | |
| display: flex; | |
| gap: 12px; | |
| padding: 16px; | |
| margin-bottom: 12px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--bg-primary); | |
| transition: all 0.3s ease; | |
| animation: slideInRight 0.5s ease; | |
| } | |
| @keyframes slideInRight { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .insight-item:hover { | |
| transform: translateX(4px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .insight-item.insight-warning { | |
| border-left: 4px solid var(--warning-500); | |
| } | |
| .insight-item.insight-info { | |
| border-left: 4px solid var(--primary-500); | |
| } | |
| .insight-item.insight-success { | |
| border-left: 4px solid var(--success-500); | |
| } | |
| .insight-icon { | |
| font-size: 24px; | |
| flex-shrink: 0; | |
| } | |
| .insight-content strong { | |
| display: block; | |
| margin-bottom: 4px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .insight-content p { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| /* ============================================ | |
| Section Titles | |
| ============================================ */ | |
| .section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 16px; | |
| } | |
| .section-title svg { | |
| color: var(--primary-500); | |
| } | |
| /* ============================================ | |
| Preview Cards | |
| ============================================ */ | |
| .preview-card { | |
| border: 2px solid var(--border-subtle); | |
| transition: all 0.3s ease; | |
| } | |
| .preview-card:hover { | |
| border-color: var(--primary-300); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.1); | |
| } | |
| /* ============================================ | |
| Buttons with Ripple Effect | |
| ============================================ */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 10px 18px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| font-family: inherit; | |
| border-radius: var(--radius-md); | |
| border: 1px solid transparent; | |
| cursor: pointer; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| white-space: nowrap; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .btn:active::after { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); | |
| color: var(--text-inverse); | |
| border-color: var(--primary-500); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); | |
| border-color: var(--primary-600); | |
| box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-primary); | |
| color: var(--text-secondary); | |
| border-color: var(--border-default); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: var(--bg-tertiary); | |
| border-color: var(--border-strong); | |
| color: var(--text-primary); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .btn-success { | |
| background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); | |
| color: var(--text-inverse); | |
| border-color: var(--success-500); | |
| box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); | |
| } | |
| .btn-success:hover:not(:disabled) { | |
| background: linear-gradient(135deg, var(--success-600) 0%, #15803D 100%); | |
| border-color: var(--success-600); | |
| box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| .btn-danger { | |
| background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%); | |
| color: var(--text-inverse); | |
| border-color: var(--danger-500); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border-color: transparent; | |
| } | |
| .btn-ghost:hover:not(:disabled) { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .btn-sm { | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| } | |
| .btn-lg { | |
| padding: 12px 24px; | |
| font-size: 14px; | |
| } | |
| /* ============================================ | |
| Forms | |
| ============================================ */ | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 16px; | |
| } | |
| .form-label { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .form-control { | |
| padding: 10px 14px; | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| font-size: 13px; | |
| font-family: inherit; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| transition: all 0.2s; | |
| width: 100%; | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary-500); | |
| box-shadow: 0 0 0 3px var(--primary-100); | |
| transform: translateY(-1px); | |
| } | |
| .form-control::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| textarea.form-control { | |
| resize: vertical; | |
| min-height: 80px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| } | |
| select.form-control { | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 12px center; | |
| padding-right: 36px; | |
| } | |
| /* ============================================ | |
| Tables | |
| ============================================ */ | |
| .table-container { | |
| overflow-x: auto; | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| } | |
| .table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| } | |
| .table thead { | |
| background: var(--bg-secondary); | |
| } | |
| .table th { | |
| padding: 12px 16px; | |
| text-align: left; | |
| font-weight: 600; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-tertiary); | |
| border-bottom: 1px solid var(--border-subtle); | |
| white-space: nowrap; | |
| } | |
| .table td { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| color: var(--text-secondary); | |
| } | |
| .table tbody tr { | |
| transition: all 0.2s ease; | |
| } | |
| .table tbody tr:hover { | |
| background: var(--bg-secondary); | |
| transform: scale(1.01); | |
| } | |
| .table tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* ============================================ | |
| Badges | |
| ============================================ */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 12px; | |
| border-radius: var(--radius-full); | |
| font-size: 11px; | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| } | |
| .badge:hover { | |
| transform: scale(1.05); | |
| } | |
| .badge-primary { | |
| background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%); | |
| color: var(--primary-700); | |
| border: 1px solid var(--primary-200); | |
| } | |
| .badge-success { | |
| background: linear-gradient(135deg, var(--success-50) 0%, #DCFCE7 100%); | |
| color: var(--success-600); | |
| border: 1px solid rgb(34 197 94 / 0.2); | |
| } | |
| .badge-warning { | |
| background: linear-gradient(135deg, var(--warning-50) 0%, #FEF3C7 100%); | |
| color: var(--warning-600); | |
| border: 1px solid rgb(234 179 8 / 0.2); | |
| } | |
| .badge-danger { | |
| background: linear-gradient(135deg, var(--danger-50) 0%, #FEE2E2 100%); | |
| color: var(--danger-600); | |
| border: 1px solid rgb(239 68 68 / 0.2); | |
| } | |
| .badge-secondary { | |
| background: var(--bg-tertiary); | |
| color: var(--text-secondary); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| /* ============================================ | |
| Alerts | |
| ============================================ */ | |
| .alert { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px 20px; | |
| border-radius: var(--radius-lg); | |
| font-size: 13px; | |
| margin-bottom: 20px; | |
| animation: slideDown 0.3s ease; | |
| } | |
| @keyframes slideDown { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .alert-info { | |
| background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%); | |
| border: 1px solid var(--primary-200); | |
| color: var(--primary-700); | |
| } | |
| .alert-success { | |
| background: linear-gradient(135deg, var(--success-50) 0%, #DCFCE7 100%); | |
| border: 1px solid rgb(34 197 94 / 0.2); | |
| color: var(--success-600); | |
| } | |
| .alert-warning { | |
| background: linear-gradient(135deg, var(--warning-50) 0%, #FEF3C7 100%); | |
| border: 1px solid rgb(234 179 8 / 0.2); | |
| color: var(--warning-600); | |
| } | |
| .alert-danger { | |
| background: linear-gradient(135deg, var(--danger-50) 0%, #FEE2E2 100%); | |
| border: 1px solid rgb(239 68 68 / 0.2); | |
| color: var(--danger-600); | |
| } | |
| /* ============================================ | |
| Progress | |
| ============================================ */ | |
| .progress { | |
| height: 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary-500), var(--primary-400)); | |
| border-radius: var(--radius-full); | |
| transition: width 0.3s ease; | |
| box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); | |
| } | |
| /* ============================================ | |
| Empty States | |
| ============================================ */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 60px 20px; | |
| text-align: center; | |
| color: var(--text-tertiary); | |
| } | |
| .empty-state svg { | |
| margin-bottom: 16px; | |
| opacity: 0.5; | |
| } | |
| .empty-state h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .empty-state p { | |
| font-size: 13px; | |
| max-width: 320px; | |
| } | |
| /* ============================================ | |
| Toast Notifications with Slide Animation | |
| ============================================ */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| z-index: 1000; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 20px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-xl); | |
| font-size: 13px; | |
| min-width: 300px; | |
| animation: toastSlide 0.3s ease; | |
| pointer-events: all; | |
| } | |
| .toast-success { | |
| border-left: 4px solid var(--success-500); | |
| background: linear-gradient(135deg, #FFFFFF 0%, var(--success-50) 100%); | |
| } | |
| .toast-error { | |
| border-left: 4px solid var(--danger-500); | |
| background: linear-gradient(135deg, #FFFFFF 0%, var(--danger-50) 100%); | |
| } | |
| .toast-warning { | |
| border-left: 4px solid var(--warning-500); | |
| background: linear-gradient(135deg, #FFFFFF 0%, var(--warning-50) 100%); | |
| } | |
| @keyframes toastSlide { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| /* ============================================ | |
| Chat Interface | |
| ============================================ */ | |
| .chat-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: calc(100vh - 200px); | |
| min-height: 400px; | |
| } | |
| .chat-history { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .chat-message { | |
| display: flex; | |
| gap: 12px; | |
| max-width: 80%; | |
| animation: messageSlide 0.3s ease; | |
| } | |
| @keyframes messageSlide { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .chat-message.user { | |
| align-self: flex-end; | |
| flex-direction: row-reverse; | |
| } | |
| .chat-avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 12px; | |
| font-weight: 700; | |
| transition: transform 0.2s ease; | |
| } | |
| .chat-message:hover .chat-avatar { | |
| transform: scale(1.1); | |
| } | |
| .chat-avatar.user { | |
| background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); | |
| color: white; | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); | |
| } | |
| .chat-avatar.assistant { | |
| background: var(--bg-tertiary); | |
| color: var(--text-secondary); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .chat-bubble { | |
| padding: 12px 16px; | |
| border-radius: var(--radius-lg); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .chat-message.user .chat-bubble { | |
| background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); | |
| color: white; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .chat-message.assistant .chat-bubble { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-subtle); | |
| border-bottom-left-radius: 4px; | |
| } | |
| .chat-input-bar { | |
| display: flex; | |
| gap: 8px; | |
| padding: 16px 20px; | |
| border-top: 1px solid var(--border-subtle); | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| } | |
| /* ============================================ | |
| Grid Layout Utilities | |
| ============================================ */ | |
| .row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin: -8px; | |
| } | |
| .col { padding: 8px; flex: 1; } | |
| .col-3 { padding: 8px; width: 25%; } | |
| .col-4 { padding: 8px; width: 33.333%; } | |
| .col-6 { padding: 8px; width: 50%; } | |
| .col-8 { padding: 8px; width: 66.666%; } | |
| .col-9 { padding: 8px; width: 75%; } | |
| .col-12 { padding: 8px; width: 100%; } | |
| .gap-2 { gap: 8px; } | |
| .gap-3 { gap: 16px; } | |
| .gap-4 { gap: 24px; } | |
| .mb-2 { margin-bottom: 8px; } | |
| .mb-3 { margin-bottom: 16px; } | |
| .mb-4 { margin-bottom: 24px; } | |
| .mt-2 { margin-top: 8px; } | |
| .mt-3 { margin-top: 16px; } | |
| .mt-4 { margin-top: 24px; } | |
| /* ============================================ | |
| AG-Grid Customization | |
| ============================================ */ | |
| .ag-theme-alpine { | |
| --ag-font-family: 'Inter', system-ui, sans-serif; | |
| --ag-font-size: 13px; | |
| --ag-border-color: var(--border-subtle); | |
| --ag-header-background-color: var(--bg-secondary); | |
| --ag-odd-row-background-color: var(--bg-primary); | |
| --ag-row-hover-color: var(--bg-secondary); | |
| --ag-selected-row-background-color: var(--primary-50); | |
| --ag-range-selection-border-color: var(--primary-500); | |
| --ag-checkbox-checked-color: var(--primary-500); | |
| --ag-alpine-active-color: var(--primary-500); | |
| } | |
| /* ============================================ | |
| Scrollbar with Gradient | |
| ============================================ */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-full); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%); | |
| border-radius: var(--radius-full); | |
| border: 2px solid var(--bg-secondary); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); | |
| } | |
| /* ============================================ | |
| Animations | |
| ============================================ */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .loading-pulse { | |
| animation: pulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| .bounce { | |
| animation: bounce 1s ease-in-out infinite; | |
| } | |
| /* ============================================ | |
| Responsive | |
| ============================================ */ | |
| @media (max-width: 1024px) { | |
| .sidebar { width: 240px; } | |
| .metric-grid { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| @media (max-width: 768px) { | |
| .app-layout { flex-direction: column; } | |
| .sidebar { width: 100%; height: auto; max-height: 40vh; } | |
| .metric-grid { grid-template-columns: repeat(2, 1fr); } | |
| .content { padding: 16px; } | |
| .tab-bar { padding: 0 16px; } | |
| .topbar { padding: 12px 16px; } | |
| } | |
| /* ============================================ | |
| New Feature Styles - Auto Insights & AI Report | |
| ============================================ */ | |
| .btn-purple { | |
| background: linear-gradient(135deg, #8B5CF6, #A855F7); | |
| color: white; | |
| border: none; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-purple:hover { | |
| background: linear-gradient(135deg, #7C3AED, #9333EA); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); | |
| } | |
| .btn-gradient { | |
| background: linear-gradient(135deg, #6366F1, #EC4899); | |
| color: white; | |
| border: none; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-gradient:hover { | |
| background: linear-gradient(135deg, #4F46E5, #DB2777); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); | |
| } | |
| .border-purple { | |
| border-color: #8B5CF6 ; | |
| } | |
| .bg-purple-light { | |
| background-color: #F3E8FF ; | |
| color: #7C3AED ; | |
| } | |
| .bg-gradient-primary { | |
| background: linear-gradient(135deg, #6366F1, #8B5CF6) ; | |
| } | |
| .border-gradient { | |
| border: 2px solid transparent; | |
| background-image: linear-gradient(white, white), linear-gradient(135deg, #6366F1, #EC4899); | |
| background-origin: border-box; | |
| background-clip: content-box, border-box; | |
| } | |
| .markdown-content { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| } | |
| .markdown-content h1, .markdown-content h2, .markdown-content h3 { | |
| margin-top: 1.5em; | |
| margin-bottom: 0.5em; | |
| color: #0F172A; | |
| } | |
| .markdown-content p { | |
| margin-bottom: 1em; | |
| } | |
| .markdown-content code { | |
| background-color: #F1F5F9; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9em; | |
| } | |
| .markdown-content pre { | |
| background-color: #1E293B; | |
| color: #E2E8F0; | |
| padding: 16px; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| } | |
| .markdown-content table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 1em 0; | |
| } | |
| .markdown-content th, .markdown-content td { | |
| border: 1px solid #E2E8F0; | |
| padding: 8px 12px; | |
| text-align: left; | |
| } | |
| .markdown-content th { | |
| background-color: #F8FAFC; | |
| font-weight: 600; | |
| } | |