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