#navbar{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);transition:all .3s ease}
#navbar.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
body.dark #navbar.scrolled{background:rgba(15,23,42,.92)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.logo{font-size:1.4rem;font-weight:800}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 14px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;color:var(--text-secondary);transition:all .2s;position:relative}
.nav-links a:hover{color:var(--text);background:var(--bg-alt)}
.nav-links a.active{color:var(--accent)}
.nav-links a.active::after{content:'';position:absolute;bottom:4px;left:14px;right:14px;height:2px;background:var(--accent);border-radius:2px}
.nav-actions{display:flex;align-items:center;gap:8px}
#themeToggle{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s}
#themeToggle:hover{border-color:var(--accent);color:var(--accent)}
body.dark .icon-sun{display:block}body.dark .icon-moon{display:none}
body:not(.dark) .icon-sun{display:none}body:not(.dark) .icon-moon{display:block}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--card);border-bottom:1px solid var(--border);flex-direction:column;padding:16px;gap:4px;display:none;box-shadow:var(--shadow-lg);z-index:99}
  body.dark .nav-links{background:#0f172a}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 16px}
  .nav-links a.active::after{display:none}
  .hamburger{display:flex}
}
@media(max-width:400px){
  .logo{font-size:1.1rem}
  .container{padding:0 16px}
}