.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
animation: scan 3s linear infinite;
}
@keyframes scan {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.titleSection {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
}
.logo {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.bracket {
color: var(--accent-green);
}
.title {
color: var(--text-primary);
text-shadow: 0 0 10px var(--accent-green);
}
.subtitle {
font-size: 0.875rem;
color: var(--text-secondary);
letter-spacing: 0.3em;
text-transform: uppercase;
}
.statusSection {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.statusIndicator {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.statusDot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.connected {
background: var(--accent-green);
box-shadow: 0 0 10px var(--accent-green);
}
.disconnected {
background: var(--accent-yellow);
box-shadow: 0 0 10px var(--accent-yellow);
}
.statusText {
font-size: 0.75rem;
color: var(--text-secondary);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.classificationBadge {
font-size: 0.625rem;
padding: var(--spacing-xs) var(--spacing-sm);
background: transparent;
border: 1px solid var(--accent-purple);
color: var(--accent-purple);
letter-spacing: 0.1em;
text-transform: uppercase;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@media (max-width: 768px) {
.header {
padding: var(--spacing-md);
}
.titleSection {
flex-direction: column;
gap: 0;
}
.logo {
white-space: nowrap;
font-size: 1.25rem;
}
.title {
white-space: nowrap;
}
.subtitle {
font-size: 0.75rem;
}
/* Hide connection text and classification on mobile as requested */
.statusText,
.classification {
display: none;
}
.statusSection {
gap: 0;
}
}
