.sc-header{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:16px;
padding:10px 18px;
background:var(--surf);
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:1000;
}

.sc-header__left{
justify-self:start;
display:flex;
align-items:center;
gap:14px;
}

.sc-header__nav{
justify-self:center;
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.sc-header__right{
justify-self:end;
display:flex;
align-items:center;
}

/* NAV LINKS */

.sc-header__link{
display:flex;
align-items:center;
gap:6px;
font-size:0.9rem;
color:var(--text);
padding:6px 10px;
border-radius:8px;
transition:.2s;
}

.sc-header__link:hover{
background:var(--glow);
color:var(--accent);
}

.sc-header__link.is-active{
background:var(--glow);
color:var(--accent);
}

/* MENU BUTTONS */

.menu-toggle,
.menu-close,
.theme-toggle{
background:none;
border:none;
color:var(--text);
font-size:1.1rem;
cursor:pointer;
padding:6px;
border-radius:6px;
transition:.2s;
}

.menu-toggle:hover,
.menu-close:hover,
.theme-toggle:hover{
background:var(--glow);
color:var(--accent);
}

/* CHIP LOGO */

.chip-heart{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:var(--glow);
color:var(--accent);
cursor:pointer;
}

/* SLOGAN */

.header-slogan{
font-size:.85rem;
color:var(--mute);
white-space:nowrap;
font-family:var(--font-mono);
letter-spacing:0.04em;
}

/* TYPEWRITER */

.typewriter{
border-right:2px solid var(--accent);
padding-right:4px;
animation:blink 1s infinite;
}

@keyframes blink{
0%{border-color:transparent}
50%{border-color:var(--accent)}
100%{border-color:transparent}
}

/* SIDEBAR */

.mobile-sidebar{
position:fixed;
top:0;
left:-320px;
width:260px;
height:100%;
background:var(--surf);
border-right:1px solid var(--border);
padding:18px;
transition:.35s;
z-index:2000;
display:flex;
flex-direction:column;
gap:18px;
}

.mobile-sidebar.is-active{
left:0;
}

.sidebar-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.sidebar-nav{
display:flex;
flex-direction:column;
gap:10px;
overflow-y:auto;
flex:1;
padding-bottom:12px;
}

.sidebar-link{
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:8px;
color:var(--text);
}

.sidebar-link:hover{
background:var(--glow);
color:var(--accent);
}

.sidebar-link.is-active{
background:var(--glow);
color:var(--accent);
}

/* OVERLAY */

.sidebar-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.4);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:1500;
}

.sidebar-overlay.is-active{
opacity:1;
visibility:visible;
}

/* RESPONSIVE */

@media (max-width:850px){

.pc-nav{
display:none;
}

.main-logo{
display:none;
}

}

/* DROPDOWNMENU */

.has-dropdown{
position:relative;
cursor:pointer;
}

.dropdown-menu{
position:absolute;
top:120%;
left:0;
min-width:200px;
background:var(--surf);
border:1px solid var(--border);
border-radius:10px;
padding:6px 0;
display:flex;
flex-direction:column;
gap:2px;
opacity:0;
visibility:hidden;
transform:translateY(6px);
transition:.2s ease;
z-index:2000;
}

.has-dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.dropdown-item{
display:flex;
align-items:center;
gap:10px;
padding:6px 14px;
font-size:.85rem;
color:var(--text);
white-space:nowrap;
}

.dropdown-item:hover{
background:var(--glow);
color:var(--accent);
}

.dropdown-label{
display:flex;
align-items:center;
gap:6px;
}

.drop-icon{
font-size:.7rem;
margin-left:4px;
opacity:.6;
transition:.2s;
}

.has-dropdown:hover .drop-icon{
transform:rotate(180deg);
}
/* SIDEBAR LINKS — kompakter */

.sidebar-link{
font-size:.85rem;
}

/* SIDEBAR SECTION LABELS */

.sidebar-section-label{
font-size:.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--mute);
padding:12px 10px 3px;
opacity:.55;
}

/* SUB-LINKS */

.sidebar-link--sub{
padding-left:24px;
font-size:.82rem;
opacity:.8;
}

.sidebar-link--sub:hover{
opacity:1;
}

/* HEADER RIGHT GAP */

.sc-header__right{
gap:8px;
}

/* RESPONSIVE — theme toggle always right */

@media(max-width:850px){
.sc-header{
grid-template-columns:auto 1fr auto;
}
}