.app-header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    gap: var(--space-lg);
    z-index: 100;
}

.app-logo {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
}
.status-dot.offline { background: var(--accent-red); }

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
    padding: var(--space-sm) 0;
}

.nav-section {
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
}

.nav-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: var(--space-xs) 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    margin: 1px var(--space-sm);
    font-size: 0.85rem;
    transition: var(--transition-fast);
    border: none;
    background: none;
    width: calc(100% - var(--space-md));
    text-align: left;
}

.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active {
    background: rgba(59,130,246,.1);
    color: var(--accent-blue);
    font-weight: 500;
}

.nav-icon { width: 18px; text-align: center; font-size: 1rem; flex-shrink: 0; }

@media (max-width: 768px) {
    .sidebar { display: none; }
    .app-layout { flex-direction: column; }
}