/* =============================================
   HEADER
   ============================================= */
.header { position:sticky; top:0; z-index:100; background:var(--bg-card); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--border); padding:0 2rem; display:flex; align-items:center; height:60px; gap:1rem; }
.header-logo { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.1rem; white-space:nowrap; }
.header-logo .kite { font-size:1.4rem; }
.header-nav { display:flex; gap:.25rem; flex:1; justify-content:center; overflow-x:auto; }
.header-nav button { background:none; border:none; color:var(--text-secondary); font:500 .8rem var(--font); padding:.5rem .75rem; border-radius:8px; cursor:pointer; transition:all .2s; white-space:nowrap; }
.header-nav button:hover { color:var(--text-primary); background:var(--bg-card-hover); }
.header-nav button.active { color:var(--orange); background:rgba(247,148,29,0.1); }
.header-right { display:flex; align-items:center; gap:1rem; white-space:nowrap; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.theme-toggle { background:none; border:1px solid var(--border); color:var(--text-secondary); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.theme-toggle:hover { border-color:var(--border-hover); color:var(--text-primary); }
.clock { font-size:.8rem; color:var(--text-secondary); font-variant-numeric:tabular-nums; }