| | |
| | |
| | |
| | |
| |
|
| | |
| | |
| | |
| |
|
| | .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; |
| | } |
| | } |
| |
|
