/* navbar.css (header + hamburger) */
.navbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.brand{font-weight:700;opacity:.95}
.hamburger{margin-left:auto;display:none;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer}
.hamburger span{width:22px;height:2px;background:#fff;display:block;border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.tab{background:#1f2937;color:#fff;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;cursor:pointer}
.tab.active{background:#4f46e5}
main{margin-top:10px}
@media (max-width:768px){
  .hamburger{display:flex}
  .nav-links{position:absolute;left:10px;right:10px;top:56px;background:rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;display:none;flex-direction:column;gap:8px}
  .nav-links.open{display:flex}
}