/* ==========================================================
   HEADER — Mockup Edition
   ========================================================== */

#header{
    display:flex;
    align-items:center;
    gap:var(--gap-xl);
    padding:0 var(--gap-xl);
}

/* ---------------- brand ---------------- */

#brand{display:flex;align-items:center;gap:14px;flex:none;}

.brand-wave{
    width:42px;height:28px;
    color:var(--color-accent);
    filter:drop-shadow(0 0 8px rgba(61,168,255,.55));
}

.brand-text h1{
    font-size:26px;
    font-weight:800;
    letter-spacing:.04em;
    line-height:1.1;
}
.brand-text h1 span{color:var(--color-accent);}

.brand-sub{
    display:block;
    color:var(--color-accent);
    font-size:12px;
    letter-spacing:.1em;
    margin-top:2px;
}

/* ---------------- nav ---------------- */

#main-nav{display:flex;gap:28px;margin-left:var(--gap-lg);margin-right:auto;}

#main-nav a{
    color:var(--color-text-secondary);
    font-size:15px;
    padding:6px 2px;
    position:relative;
    transition:color .2s;
}
#main-nav a:hover{color:var(--color-text);}

#main-nav a.active{color:var(--color-accent);}
#main-nav a.active::after{
    content:"";
    position:absolute;left:0;right:0;bottom:-4px;
    height:2px;border-radius:2px;
    background:var(--color-accent);
    box-shadow:0 0 8px rgba(61,168,255,.6);
}

/* ---------------- right side ---------------- */

#header-right{margin-left:auto;display:flex;align-items:center;gap:18px;}

#live-indicator{
    display:flex;align-items:center;gap:10px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:12px;
    padding:9px 14px;
}

#live-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--color-live);
    box-shadow:0 0 10px var(--color-live);
    animation:pulse 1.6s infinite;
}

.live-text{font-size:13px;letter-spacing:.14em;color:var(--color-text);}

/* мини-эквалайзер рядом с LIVE */
.eq{display:flex;align-items:flex-end;gap:2px;height:16px;}
.eq i{
    width:3px;border-radius:2px;height:25%;
    background:var(--color-accent);
    animation:eq 1s ease-in-out infinite;
    animation-play-state:paused;
    opacity:.45;
}
.eq i:nth-child(1){animation-delay:0s;   background:#42d77d;}
.eq i:nth-child(2){animation-delay:.12s; background:#42d77d;}
.eq i:nth-child(3){animation-delay:.24s; background:#3da8ff;}
.eq i:nth-child(4){animation-delay:.36s; background:#3da8ff;}
.eq i:nth-child(5){animation-delay:.48s; background:#61bbff;}
.eq i:nth-child(6){animation-delay:.6s;  background:#ff5d73;}
.eq i:nth-child(7){animation-delay:.72s; background:#ff4d4d;}

body.playing .eq i{animation-play-state:running;opacity:1;}

/* ---------------- listeners ---------------- */

#listeners-box{
    display:flex;align-items:center;gap:10px;
    color:var(--color-text-secondary);
}
.icon-users{width:20px;height:20px;flex:none;}
#listeners{display:block;color:var(--color-text);font-weight:700;font-size:16px;line-height:1;}
.listeners-label{font-size:12px;}

/* ---------------- anims ---------------- */

@keyframes eq{0%,100%{height:20%}50%{height:95%}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------- responsive ---------------- */

@media (max-width:1200px){
    #main-nav{display:none;}
}
@media (max-width:700px){
    .brand-sub,.listeners-label{display:none;}
}