| |
| |
| |
| |
|
|
| |
| |
| |
|
|
| .background-effects { |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| z-index: 0; |
| overflow: hidden; |
| } |
|
|
| .gradient-orb { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(100px); |
| opacity: 0.25; |
| animation: float 25s ease-in-out infinite; |
| } |
|
|
| .orb-1 { |
| width: 600px; |
| height: 600px; |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, transparent 70%); |
| top: -300px; |
| left: -200px; |
| animation-delay: 0s; |
| } |
|
|
| .orb-2 { |
| width: 500px; |
| height: 500px; |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%); |
| bottom: -250px; |
| right: -150px; |
| animation-delay: 8s; |
| } |
|
|
| .orb-3 { |
| width: 400px; |
| height: 400px; |
| background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 70%); |
| top: 40%; |
| left: 60%; |
| transform: translate(-50%, -50%); |
| animation-delay: 16s; |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translate(0, 0) scale(1); } |
| 33% { transform: translate(40px, -40px) scale(1.05); } |
| 66% { transform: translate(-30px, 30px) scale(0.95); } |
| } |
|
|
| |
| |
| |
|
|
| .page-header.glass-panel { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: var(--space-6); |
| background: rgba(17, 24, 39, 0.7); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: var(--radius-xl); |
| margin-bottom: var(--space-6); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .page-header.glass-panel::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6, #22d3ee); |
| } |
|
|
| .page-title { |
| display: flex; |
| align-items: center; |
| gap: var(--space-4); |
| } |
|
|
| .title-icon { |
| width: 60px; |
| height: 60px; |
| background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); |
| border-radius: var(--radius-lg); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); |
| animation: pulse-glow 3s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse-glow { |
| 0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); } |
| 50% { box-shadow: 0 4px 30px rgba(139, 92, 246, 0.6); } |
| } |
|
|
| .title-content h1 { |
| font-family: 'Space Grotesk', sans-serif; |
| font-size: var(--font-size-2xl); |
| font-weight: 700; |
| background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| margin: 0; |
| } |
|
|
| .page-subtitle { |
| font-size: var(--font-size-sm); |
| color: var(--text-muted); |
| margin-top: var(--space-1); |
| } |
|
|
| .page-actions { |
| display: flex; |
| align-items: center; |
| gap: var(--space-4); |
| } |
|
|
| .btn-gradient { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-2); |
| padding: var(--space-3) var(--space-5); |
| background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); |
| color: white; |
| border: none; |
| border-radius: var(--radius-md); |
| font-weight: 600; |
| font-size: var(--font-size-sm); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); |
| } |
|
|
| .btn-gradient:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5); |
| } |
|
|
| .btn-gradient.large { |
| padding: var(--space-4) var(--space-6); |
| font-size: var(--font-size-base); |
| } |
|
|
| .btn-secondary { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-2); |
| padding: var(--space-3) var(--space-5); |
| background: rgba(255, 255, 255, 0.1); |
| color: var(--text-secondary); |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| border-radius: var(--radius-md); |
| font-weight: 600; |
| font-size: var(--font-size-sm); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .btn-secondary:hover { |
| background: rgba(255, 255, 255, 0.15); |
| border-color: rgba(255, 255, 255, 0.25); |
| } |
|
|
| .last-update { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| padding: var(--space-2) var(--space-3); |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: var(--radius-sm); |
| } |
|
|
| |
| |
| |
|
|
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: var(--space-4); |
| margin-bottom: var(--space-6); |
| } |
|
|
| .stat-card.glass-card { |
| display: flex; |
| align-items: flex-start; |
| gap: var(--space-4); |
| padding: var(--space-5); |
| background: rgba(17, 24, 39, 0.6); |
| backdrop-filter: blur(15px); |
| -webkit-backdrop-filter: blur(15px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-xl); |
| transition: all 0.3s ease; |
| } |
|
|
| .stat-card.glass-card:hover { |
| transform: translateY(-4px); |
| border-color: rgba(255, 255, 255, 0.15); |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .stat-icon { |
| width: 50px; |
| height: 50px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-lg); |
| flex-shrink: 0; |
| } |
|
|
| .stat-icon.models-icon { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); |
| color: #a78bfa; |
| } |
|
|
| .stat-icon.success-icon { |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%); |
| color: #4ade80; |
| } |
|
|
| .stat-icon.warning-icon { |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); |
| color: #fbbf24; |
| } |
|
|
| .stat-icon.info-icon { |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); |
| color: #60a5fa; |
| } |
|
|
| .stat-content { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .stat-value { |
| font-family: 'Space Grotesk', sans-serif; |
| font-size: var(--font-size-2xl); |
| font-weight: 700; |
| color: var(--text-strong); |
| line-height: 1; |
| margin-bottom: var(--space-1); |
| } |
|
|
| .stat-label { |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| margin-bottom: var(--space-2); |
| } |
|
|
| .stat-trend { |
| font-size: var(--font-size-xs); |
| padding: var(--space-1) var(--space-2); |
| border-radius: var(--radius-xs); |
| display: inline-block; |
| } |
|
|
| .stat-trend.success { |
| background: rgba(34, 197, 94, 0.15); |
| color: #4ade80; |
| } |
|
|
| .stat-trend.warning { |
| background: rgba(245, 158, 11, 0.15); |
| color: #fbbf24; |
| } |
|
|
| .stat-trend.info { |
| background: rgba(59, 130, 246, 0.15); |
| color: #60a5fa; |
| } |
|
|
| .stat-trend.neutral { |
| background: rgba(148, 163, 184, 0.15); |
| color: #94a3b8; |
| } |
|
|
| |
| |
| |
|
|
| .tabs-container.glass-panel { |
| background: rgba(17, 24, 39, 0.6); |
| backdrop-filter: blur(15px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-xl); |
| padding: var(--space-2); |
| margin-bottom: var(--space-6); |
| } |
|
|
| .tabs { |
| display: flex; |
| gap: var(--space-2); |
| } |
|
|
| .tab-btn { |
| display: flex; |
| align-items: center; |
| gap: var(--space-2); |
| padding: var(--space-3) var(--space-5); |
| background: transparent; |
| color: var(--text-muted); |
| border: none; |
| border-radius: var(--radius-md); |
| font-weight: 600; |
| font-size: var(--font-size-sm); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .tab-btn:hover { |
| background: rgba(255, 255, 255, 0.05); |
| color: var(--text-secondary); |
| } |
|
|
| .tab-btn.active { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); |
| color: white; |
| box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2); |
| } |
|
|
| .tab-content { |
| display: none; |
| } |
|
|
| .tab-content.active { |
| display: block; |
| animation: fadeIn 0.3s ease; |
| } |
|
|
| @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: var(--space-5); |
| } |
|
|
| .section-header h2 { |
| font-family: 'Space Grotesk', sans-serif; |
| font-size: var(--font-size-xl); |
| font-weight: 700; |
| color: var(--text-strong); |
| margin: 0; |
| } |
|
|
| .filter-controls { |
| display: flex; |
| gap: var(--space-3); |
| } |
|
|
| .select-modern { |
| padding: var(--space-2) var(--space-4); |
| padding-right: var(--space-8); |
| background: rgba(17, 24, 39, 0.8); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| cursor: pointer; |
| appearance: none; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 12px center; |
| transition: all 0.3s ease; |
| } |
|
|
| .select-modern:hover { |
| border-color: rgba(139, 92, 246, 0.5); |
| } |
|
|
| .select-modern:focus { |
| outline: none; |
| border-color: #8b5cf6; |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); |
| } |
|
|
| .select-modern.large { |
| padding: var(--space-3) var(--space-5); |
| padding-right: var(--space-10); |
| font-size: var(--font-size-base); |
| } |
|
|
| |
| |
| |
|
|
| .models-grid { |
| display: grid; |
| |
| grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); |
| gap: var(--space-5); |
| |
| width: 100%; |
| max-width: 100%; |
| } |
|
|
| .model-card { |
| background: rgba(17, 24, 39, 0.7); |
| backdrop-filter: blur(15px); |
| -webkit-backdrop-filter: blur(15px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-xl); |
| overflow: hidden; |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| position: relative; |
| display: flex; |
| |
| min-height: 320px; |
| max-width: 100%; |
| flex-direction: column; |
| } |
|
|
| .model-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6); |
| transform: scaleX(0); |
| transform-origin: left; |
| transition: transform 0.4s ease; |
| } |
|
|
| .model-card:hover { |
| transform: translateY(-6px); |
| border-color: rgba(139, 92, 246, 0.3); |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); |
| } |
|
|
| .model-card:hover::before { |
| transform: scaleX(1); |
| } |
|
|
| .model-card.loaded::before { |
| background: linear-gradient(90deg, #22c55e, #10b981); |
| transform: scaleX(1); |
| } |
|
|
| .model-card.failed::before { |
| background: linear-gradient(90deg, #ef4444, #f97316); |
| transform: scaleX(1); |
| } |
|
|
| |
| .model-details { |
| padding: var(--space-4); |
| flex: 1; |
| } |
|
|
| .detail-row { |
| display: flex; |
| gap: var(--space-4); |
| margin-bottom: var(--space-3); |
| } |
|
|
| .detail-item { |
| flex: 1; |
| } |
|
|
| .detail-label { |
| display: block; |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| margin-bottom: var(--space-1); |
| } |
|
|
| .detail-value { |
| display: block; |
| font-size: var(--font-size-sm); |
| color: var(--text-strong); |
| font-weight: var(--font-weight-semibold); |
| } |
|
|
| .detail-value.status-success { |
| color: #4ade80; |
| } |
|
|
| .detail-value.status-warning { |
| color: #fbbf24; |
| } |
|
|
| .detail-value.status-info { |
| color: #60a5fa; |
| } |
|
|
| .model-description { |
| padding: var(--space-4); |
| border-top: 1px solid rgba(255, 255, 255, 0.05); |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| line-height: 1.5; |
| } |
|
|
| .model-actions { |
| padding: var(--space-4); |
| border-top: 1px solid rgba(255, 255, 255, 0.05); |
| display: flex; |
| gap: var(--space-2); |
| background: rgba(0, 0, 0, 0.15); |
| } |
|
|
| .model-actions .btn { |
| flex: 1; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--space-2); |
| padding: var(--space-2) var(--space-3); |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .model-actions .btn:hover:not(:disabled) { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); |
| border-color: rgba(139, 92, 246, 0.5); |
| color: white; |
| } |
|
|
| .model-actions .btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| .model-actions .btn-primary { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); |
| border-color: rgba(139, 92, 246, 0.5); |
| color: white; |
| } |
|
|
| .model-actions .btn-secondary { |
| background: rgba(255, 255, 255, 0.05); |
| border-color: rgba(255, 255, 255, 0.1); |
| color: var(--text-secondary); |
| } |
|
|
| .model-header { |
| display: flex; |
| align-items: center; |
| gap: var(--space-4); |
| padding: var(--space-5); |
| background: rgba(0, 0, 0, 0.2); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
| } |
|
|
| .model-icon { |
| width: 48px; |
| height: 48px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%); |
| border-radius: var(--radius-lg); |
| color: #a78bfa; |
| transition: all 0.3s ease; |
| } |
|
|
| .model-card:hover .model-icon { |
| transform: scale(1.1) rotate(5deg); |
| } |
|
|
| .model-info { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .model-name { |
| font-family: 'Space Grotesk', sans-serif; |
| font-size: var(--font-size-base); |
| font-weight: 700; |
| color: var(--text-strong); |
| margin: 0 0 var(--space-1) 0; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .model-type { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .model-status { |
| padding: var(--space-1) var(--space-3); |
| border-radius: var(--radius-full); |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .model-status.loaded { |
| background: rgba(34, 197, 94, 0.2); |
| color: #4ade80; |
| } |
|
|
| .model-status.available { |
| background: rgba(59, 130, 246, 0.2); |
| color: #60a5fa; |
| } |
|
|
| .model-status.failed { |
| background: rgba(239, 68, 68, 0.2); |
| color: #f87171; |
| } |
|
|
| .model-status.cooldown { |
| background: rgba(245, 158, 11, 0.2); |
| color: #fbbf24; |
| } |
|
|
| .model-body { |
| padding: var(--space-5); |
| } |
|
|
| .model-id { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| background: rgba(0, 0, 0, 0.3); |
| padding: var(--space-2) var(--space-3); |
| border-radius: var(--radius-sm); |
| margin-bottom: var(--space-4); |
| word-break: break-all; |
| } |
|
|
| .model-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: var(--space-3); |
| } |
|
|
| .meta-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-1); |
| padding: var(--space-1) var(--space-3); |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: var(--radius-sm); |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| } |
|
|
| .meta-badge svg { |
| width: 12px; |
| height: 12px; |
| } |
|
|
| .model-footer { |
| padding: var(--space-4) var(--space-5); |
| background: rgba(0, 0, 0, 0.15); |
| border-top: 1px solid rgba(255, 255, 255, 0.05); |
| display: flex; |
| gap: var(--space-2); |
| } |
|
|
| .model-footer .btn { |
| flex: 1; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--space-2); |
| padding: var(--space-2) var(--space-3); |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .model-footer .btn:hover { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); |
| border-color: rgba(139, 92, 246, 0.5); |
| color: white; |
| } |
|
|
| .model-footer .btn.reinit { |
| background: rgba(245, 158, 11, 0.1); |
| border-color: rgba(245, 158, 11, 0.3); |
| color: #fbbf24; |
| } |
|
|
| .model-footer .btn.reinit:hover { |
| background: rgba(245, 158, 11, 0.2); |
| } |
|
|
| |
| |
| |
|
|
| .test-panel.glass-panel, |
| .health-panel.glass-panel, |
| .catalog-panel.glass-panel { |
| background: rgba(17, 24, 39, 0.7); |
| backdrop-filter: blur(15px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-xl); |
| padding: var(--space-6); |
| } |
|
|
| .test-header, |
| .health-header, |
| .catalog-header { |
| margin-bottom: var(--space-6); |
| } |
|
|
| .test-header h2, |
| .health-header h2, |
| .catalog-header h2 { |
| font-family: 'Space Grotesk', sans-serif; |
| font-size: var(--font-size-xl); |
| font-weight: 700; |
| color: var(--text-strong); |
| margin: 0 0 var(--space-2) 0; |
| } |
|
|
| .test-header p, |
| .health-header p, |
| .catalog-header p { |
| color: var(--text-muted); |
| font-size: var(--font-size-sm); |
| margin: 0; |
| } |
|
|
| .health-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| flex-wrap: wrap; |
| gap: var(--space-4); |
| } |
|
|
| .test-form { |
| max-width: 800px; |
| } |
|
|
| .form-group { |
| margin-bottom: var(--space-5); |
| } |
|
|
| .form-label { |
| display: block; |
| font-weight: 600; |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| margin-bottom: var(--space-2); |
| } |
|
|
| .textarea-modern { |
| width: 100%; |
| padding: var(--space-4); |
| background: rgba(0, 0, 0, 0.3); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: var(--radius-md); |
| color: var(--text-strong); |
| font-family: inherit; |
| font-size: var(--font-size-base); |
| resize: vertical; |
| transition: all 0.3s ease; |
| } |
|
|
| .textarea-modern:focus { |
| outline: none; |
| border-color: #8b5cf6; |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); |
| } |
|
|
| .test-actions { |
| display: flex; |
| gap: var(--space-3); |
| margin-bottom: var(--space-6); |
| } |
|
|
| .example-texts { |
| padding: var(--space-4); |
| background: rgba(0, 0, 0, 0.2); |
| border-radius: var(--radius-lg); |
| } |
|
|
| .example-label { |
| font-size: var(--font-size-sm); |
| color: var(--text-muted); |
| margin-bottom: var(--space-3); |
| } |
|
|
| .example-buttons { |
| display: flex; |
| flex-wrap: wrap; |
| gap: var(--space-2); |
| } |
|
|
| .example-btn { |
| padding: var(--space-2) var(--space-4); |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .example-btn:hover { |
| background: rgba(139, 92, 246, 0.2); |
| border-color: rgba(139, 92, 246, 0.4); |
| color: white; |
| } |
|
|
| |
| .test-result { |
| margin-top: var(--space-6); |
| padding: var(--space-6); |
| background: linear-gradient(180deg, rgba(2, 6, 23, 0.55), rgba(0, 0, 0, 0.35)); |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| border-radius: var(--radius-xl); |
| box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); |
| position: relative; |
| overflow: hidden; |
| animation: fadeIn 0.4s ease; |
| } |
|
|
| .test-result::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| background: radial-gradient(900px 220px at 20% 0%, rgba(139, 92, 246, 0.18), transparent 60%), |
| radial-gradient(900px 220px at 80% 0%, rgba(34, 211, 238, 0.14), transparent 60%); |
| opacity: 0.9; |
| } |
|
|
| .test-result.hidden { |
| display: none; |
| } |
|
|
| .result-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: var(--space-4); |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .result-header h3 { |
| font-size: var(--font-size-lg); |
| font-weight: 700; |
| color: var(--text-strong); |
| margin: 0; |
| } |
|
|
| .result-time { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| padding: 6px 10px; |
| border-radius: var(--radius-full); |
| background: rgba(255, 255, 255, 0.06); |
| border: 1px solid rgba(255, 255, 255, 0.10); |
| } |
|
|
| .result-body { |
| display: grid; |
| grid-template-columns: minmax(260px, 360px) 1fr; |
| gap: var(--space-5); |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .sentiment-display { |
| --accent-rgb: 96 165 250; |
| text-align: left; |
| padding: var(--space-6); |
| background: linear-gradient(135deg, rgba(var(--accent-rgb) / 0.14) 0%, rgba(255, 255, 255, 0.04) 65%); |
| border: 1px solid rgba(255, 255, 255, 0.10); |
| border-radius: var(--radius-xl); |
| display: grid; |
| grid-template-columns: 76px 1fr; |
| grid-template-rows: auto auto; |
| column-gap: var(--space-4); |
| row-gap: var(--space-2); |
| } |
|
|
| .sentiment-display[data-sentiment="bullish"], |
| .sentiment-display[data-sentiment="positive"], |
| .sentiment-display[data-sentiment="buy"] { --accent-rgb: 34 197 94; } |
|
|
| .sentiment-display[data-sentiment="bearish"], |
| .sentiment-display[data-sentiment="negative"], |
| .sentiment-display[data-sentiment="sell"] { --accent-rgb: 239 68 68; } |
|
|
| .sentiment-display[data-sentiment="neutral"], |
| .sentiment-display[data-sentiment="hold"] { --accent-rgb: 59 130 246; } |
|
|
| .sentiment-display[data-sentiment="unknown"] { --accent-rgb: 148 163 184; } |
|
|
| .sentiment-emoji { |
| grid-row: 1 / span 2; |
| grid-column: 1; |
| width: 76px; |
| height: 76px; |
| display: grid; |
| place-items: center; |
| font-size: 42px; |
| border-radius: 18px; |
| background: rgba(var(--accent-rgb) / 0.16); |
| border: 1px solid rgba(var(--accent-rgb) / 0.28); |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); |
| } |
|
|
| .sentiment-label { |
| grid-column: 2; |
| grid-row: 1; |
| font-family: 'Space Grotesk', sans-serif; |
| font-size: clamp(22px, 2.2vw, 30px); |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| margin: 0; |
| line-height: 1.1; |
| color: rgb(var(--accent-rgb)); |
| } |
|
|
| .sentiment-label.bullish, |
| .sentiment-label.positive, |
| .sentiment-label.buy { color: rgb(34, 197, 94); } |
|
|
| .sentiment-label.bearish, |
| .sentiment-label.negative, |
| .sentiment-label.sell { color: rgb(239, 68, 68); } |
|
|
| .sentiment-label.neutral, |
| .sentiment-label.hold { color: rgb(59, 130, 246); } |
|
|
| .sentiment-label.unknown { color: rgb(148, 163, 184); } |
|
|
| .sentiment-confidence { |
| grid-column: 2; |
| grid-row: 2; |
| font-size: var(--font-size-sm); |
| color: rgba(226, 232, 240, 0.85); |
| padding: 10px 12px; |
| border-radius: var(--radius-lg); |
| border: 1px solid rgba(255, 255, 255, 0.10); |
| background: |
| linear-gradient( |
| 90deg, |
| rgba(var(--accent-rgb) / 0.25) 0 var(--confidence, 0%), |
| rgba(255, 255, 255, 0.06) var(--confidence, 0%) 100% |
| ); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); |
| } |
|
|
| .result-details { |
| background: rgba(0, 0, 0, 0.38); |
| border: 1px solid rgba(255, 255, 255, 0.10); |
| border-radius: var(--radius-md); |
| padding: var(--space-4); |
| overflow: auto; |
| max-height: 300px; |
| } |
|
|
| .result-json { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 12px; |
| color: rgba(226, 232, 240, 0.92); |
| white-space: pre-wrap; |
| margin: 0; |
| line-height: 1.55; |
| } |
|
|
| @media (max-width: 900px) { |
| .result-body { |
| grid-template-columns: 1fr; |
| } |
| .sentiment-display { |
| grid-template-columns: 64px 1fr; |
| padding: var(--space-5); |
| } |
| .sentiment-emoji { |
| width: 64px; |
| height: 64px; |
| font-size: 36px; |
| border-radius: 16px; |
| } |
| } |
|
|
| |
| |
| |
|
|
| .health-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); |
| gap: var(--space-4); |
| } |
|
|
| .health-card { |
| background: rgba(0, 0, 0, 0.3); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-lg); |
| padding: var(--space-4); |
| transition: all 0.3s ease; |
| } |
|
|
| .health-card:hover { |
| border-color: rgba(255, 255, 255, 0.15); |
| } |
|
|
| .health-card.healthy { |
| border-left: 3px solid #4ade80; |
| } |
|
|
| .health-card.degraded { |
| border-left: 3px solid #fbbf24; |
| } |
|
|
| .health-card.unavailable { |
| border-left: 3px solid #f87171; |
| } |
|
|
| .health-card.unknown { |
| border-left: 3px solid #94a3b8; |
| } |
|
|
| .health-header-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| margin-bottom: var(--space-3); |
| } |
|
|
| .health-model-name { |
| font-weight: 600; |
| color: var(--text-strong); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .health-status-badge { |
| padding: var(--space-1) var(--space-2); |
| border-radius: var(--radius-sm); |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| text-transform: uppercase; |
| } |
|
|
| .health-status-badge.healthy { |
| background: rgba(34, 197, 94, 0.2); |
| color: #4ade80; |
| } |
|
|
| .health-status-badge.degraded { |
| background: rgba(245, 158, 11, 0.2); |
| color: #fbbf24; |
| } |
|
|
| .health-status-badge.unavailable { |
| background: rgba(239, 68, 68, 0.2); |
| color: #f87171; |
| } |
|
|
| .health-status-badge.unknown { |
| background: rgba(148, 163, 184, 0.2); |
| color: #94a3b8; |
| } |
|
|
| .health-stats { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: var(--space-2); |
| margin-bottom: var(--space-3); |
| } |
|
|
| .health-stat { |
| text-align: center; |
| padding: var(--space-2); |
| background: rgba(255, 255, 255, 0.03); |
| border-radius: var(--radius-sm); |
| } |
|
|
| .health-stat-value { |
| font-size: var(--font-size-lg); |
| font-weight: 700; |
| color: var(--text-strong); |
| } |
|
|
| .health-stat-label { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| } |
|
|
| .health-error { |
| font-size: var(--font-size-xs); |
| color: #f87171; |
| background: rgba(239, 68, 68, 0.1); |
| padding: var(--space-2); |
| border-radius: var(--radius-sm); |
| margin-bottom: var(--space-3); |
| word-break: break-word; |
| } |
|
|
| .health-actions { |
| display: flex; |
| gap: var(--space-2); |
| } |
|
|
| .health-actions .btn { |
| flex: 1; |
| padding: var(--space-2); |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: var(--radius-sm); |
| color: var(--text-secondary); |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .health-actions .btn:hover { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); |
| color: white; |
| } |
|
|
| |
| |
| |
|
|
| .catalog-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); |
| gap: var(--space-5); |
| } |
|
|
| .catalog-category { |
| background: rgba(0, 0, 0, 0.25); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-xl); |
| overflow: hidden; |
| } |
|
|
| .category-header { |
| display: flex; |
| align-items: center; |
| gap: var(--space-3); |
| padding: var(--space-4) var(--space-5); |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); |
| } |
|
|
| .category-header.crypto { |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); |
| } |
|
|
| .category-header.financial { |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%); |
| } |
|
|
| .category-header.social { |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); |
| } |
|
|
| .category-header.trading { |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); |
| } |
|
|
| .category-header.generation { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); |
| } |
|
|
| .category-header.summarization { |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.1) 100%); |
| } |
|
|
| .category-icon { |
| font-size: 24px; |
| } |
|
|
| .category-header h3 { |
| font-size: var(--font-size-base); |
| font-weight: 700; |
| color: var(--text-strong); |
| margin: 0; |
| } |
|
|
| .category-models { |
| padding: var(--space-4); |
| } |
|
|
| .catalog-model { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: var(--space-3); |
| background: rgba(255, 255, 255, 0.03); |
| border-radius: var(--radius-md); |
| margin-bottom: var(--space-2); |
| transition: all 0.3s ease; |
| } |
|
|
| .catalog-model:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .catalog-model:hover { |
| background: rgba(255, 255, 255, 0.08); |
| } |
|
|
| .catalog-model-name { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: var(--font-size-xs); |
| color: var(--text-secondary); |
| word-break: break-all; |
| } |
|
|
| .catalog-model-badge { |
| padding: var(--space-1) var(--space-2); |
| border-radius: var(--radius-xs); |
| font-size: 10px; |
| font-weight: 600; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
|
|
| .catalog-model-badge.public { |
| background: rgba(34, 197, 94, 0.2); |
| color: #4ade80; |
| } |
|
|
| .catalog-model-badge.auth { |
| background: rgba(245, 158, 11, 0.2); |
| color: #fbbf24; |
| } |
|
|
| |
| |
| |
|
|
| .loading-state { |
| grid-column: 1 / -1; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: var(--space-16); |
| text-align: center; |
| } |
|
|
| .loading-spinner { |
| width: 50px; |
| height: 50px; |
| border: 4px solid rgba(139, 92, 246, 0.2); |
| border-top-color: #8b5cf6; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| margin-bottom: var(--space-4); |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| .loading-text { |
| color: var(--text-muted); |
| font-size: var(--font-size-base); |
| } |
|
|
| .empty-state { |
| grid-column: 1 / -1; |
| text-align: center; |
| padding: var(--space-16); |
| color: var(--text-muted); |
| } |
|
|
| .empty-icon { |
| font-size: 64px; |
| margin-bottom: var(--space-4); |
| opacity: 0.3; |
| } |
|
|
| |
| |
| |
|
|
| @media (max-width: 1200px) { |
| .stats-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .page-header.glass-panel { |
| flex-direction: column; |
| text-align: center; |
| gap: var(--space-4); |
| } |
| |
| .page-title { |
| flex-direction: column; |
| } |
| |
| .stats-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .tabs { |
| flex-wrap: wrap; |
| } |
| |
| .tab-btn { |
| flex: 1; |
| justify-content: center; |
| min-width: 120px; |
| } |
| |
| .models-grid, |
| .health-grid, |
| .catalog-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .section-header { |
| flex-direction: column; |
| gap: var(--space-3); |
| } |
| |
| .filter-controls { |
| width: 100%; |
| } |
| |
| .filter-controls select { |
| flex: 1; |
| } |
| } |
|
|
