.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5rem 1rem;
  padding-left: 88px; /* space for logo + controls */
  background: var(--glass-1);
  border-radius: 999px;
  border: 1px solid var(--muted-border-2);
  backdrop-filter: blur(8px);
  max-width: calc(var(--container-max-width) - 40px);
  width: calc(100% - 40px);
}

.nav-link { color: var(--text-on-primary); padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.95rem; position: relative; transition: color 0.2s, transform 0.2s; }
.nav-link::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); border-radius: 2px; transition: width 0.25s ease; }
.nav-link:hover { color: var(--accent-color); transform: translateY(-2px); }
.nav-link:hover::after, .nav-link.active::after { width: 60%; }
.nav-link.active { color: var(--accent-color); }

/* Brand logo */
.nav-brand { display: inline-flex; align-items: center; justify-content: center; }
.nav-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; display: block; }

.mobile-menu-btn { display: none; background: transparent; border: none; color: var(--text-color); font-size: 1.25rem; padding: 0.5rem; border-radius: 8px; width: 44px; height: 44px; align-items: center; justify-content: center; display: inline-flex; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

.mobile-menu-btn .bar { display: block; width: 20px; height: 2px; background: currentColor; margin: 3px 0; transition: transform 0.28s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease; }

.mobile-menu-btn.open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-btn.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav { left: 50%; transform: translateX(-50%); width: calc(100% - 24px); padding: 0.5rem 0.75rem; justify-content: space-between; padding-left: 0.5rem; }
  .nav-link { display: none; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 12px; top: 12px; transform: none; }

  /* When menu is open, display links in a right-side panel to remain readable */
  .nav.open { position: fixed; top: 12px; right: 12px; left: auto; transform: none; padding: 1rem; flex-direction: column; gap: 0.25rem; align-items: stretch; border-radius: 12px; width: min(320px, calc(100% - 24px)); max-width: 90%; z-index: 10040; background: var(--glass-1); box-shadow: 0 12px 30px rgba(2,6,23,0.08); animation: slideInRight 260ms cubic-bezier(.2,.9,.2,1); }
  .nav.open .nav-link { display: block; padding: 0.75rem 1rem; background: var(--bg-color); color: var(--text-color); border-radius: 8px; margin: 0.25rem 0; box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
  .nav.open .mobile-menu-btn { align-self: flex-end; }

  /* ensure nav links are keyboard focusable in open state */
  .nav.open .nav-link:focus { outline: 2px solid rgba(99,102,241,0.3); }

  /* revert nav-left positioning on small screens */
  .nav-left { position: static; transform: none; margin-right: 0; }
}

#header { position: fixed; top: 8px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; z-index: 1200; pointer-events: none; padding: 8px 12px; }

/* ensure nav inside header is centered and clickable */
#header .nav { position: relative; left: auto !important; transform: none !important; pointer-events: all; }

/* Keep logo group to the left inside the centered nav */
.nav-left { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.75rem; }

/* Theme toggle button styling */
.theme-toggle { background: transparent; border: 1px solid transparent; padding: 0.25rem; font-size: 1rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.theme-toggle:hover { background: rgba(0,0,0,0.04); }

/* When theme-toggle is inside the nav, avoid global fixed positioning from main.css */
.nav .theme-toggle { position: static; right: auto; bottom: auto; display: inline-flex; color: var(--text-color); background: transparent; }

/* Accessibility: ensure mobile menu and header are interactable */
.mobile-menu-btn, .nav .nav-link, .nav .theme-toggle { pointer-events: all; }

/* Ensure header layout reverts on very small screens */
@media (max-width: 420px) {
  #header { padding: 6px 8px; }
  .nav-left { left: 8px; }
}