/* ── HEADER.CSS v1.1.2 — white/grey text ── */
#header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         9px 14px;
    background:      #0d1117;
    border-bottom:   1px solid var(--border);
    flex-shrink:     0;
    gap:             10px;
}

#hamburgerBtn {
    background:    transparent;
    border:        1px solid var(--border);
    color:         var(--text-mid);
    font-size:     1.3em;
    padding:       6px 12px;
    border-radius: 5px;
    cursor:        pointer;
    flex-shrink:   0;
    font-family:   var(--font-ui);
    transition:    all 0.2s;
    min-width:     44px;
    min-height:    38px;
}
#hamburgerBtn:active { background: rgba(255,255,255,0.06); }

/* Logo — keep brand colors */
.logo {
    font-family:    'Orbitron', monospace;
    font-weight:    900;
    font-size:      1.15em;
    letter-spacing: 3px;
    flex:           1;
    text-align:     center;
    line-height:    1;
}
.logo-lab   { color: #ffb300; }
.logo-scope { color: #00e5ff; }
.logo-pro {
    font-family:    'Share Tech Mono', monospace;
    font-size:      0.55em;
    font-weight:    400;
    letter-spacing: 2px;
    padding:        2px 7px;
    border-radius:  10px;
    border:         1px solid rgba(255,255,255,0.2);
    background:     rgba(255,255,255,0.06);
    color:          rgba(255,255,255,0.7);
    margin-left:    6px;
    vertical-align: middle;
}

.header-right {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

/* Signal badge — white/grey, no color */
.sig-badge {
    font-family:    var(--font-display);
    font-size:      0.65em;
    font-weight:    700;
    letter-spacing: 1.5px;
    padding:        4px 9px;
    border-radius:  4px;
    border:         1px solid var(--border);
    color:          var(--text-mid);
    background:     var(--panel);
    transition:     all 0.3s;
    min-width:      64px;
    text-align:     center;
}
/* Only LIVE signal types get subtle color hint — very muted */
.sig-badge.sine     { color: var(--text-main); border-color: var(--border-bright); }
.sig-badge.square   { color: var(--text-main); border-color: var(--border-bright); }
.sig-badge.triangle { color: var(--text-main); border-color: var(--border-bright); }
.sig-badge.sawtooth { color: var(--text-main); border-color: var(--border-bright); }
.sig-badge.noise    { color: var(--text-dim); }
.sig-badge.dc       { color: var(--text-main); border-color: var(--border-bright); }

.status-label {
    font-size:      0.7em;
    color:          var(--text-dim);
    letter-spacing: 1px;
    font-family:    var(--font-ui);
}

/* Status dot — only dot keeps color (it's an indicator, not label) */
.status-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--border-bright);
    transition:    all 0.3s;
    flex-shrink:   0;
}
.status-dot.active {
    background: #00ff41;
    box-shadow: 0 0 6px rgba(0,255,65,0.5);
    animation:  dot-pulse 1.2s infinite;
}
.status-dot.sim {
    background: var(--cyan);
    box-shadow: 0 0 6px rgba(0,229,255,0.4);
    animation:  dot-pulse 1.2s infinite;
}
@keyframes dot-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}