nav { display: flex; align-items: center; height: 52px; padding: 0 2rem; margin: -2rem -2rem 1.5rem; background: #fff; border-bottom: 1px solid #e1e4e8; box-shadow: 0 1px 2px rgba(31, 40, 51, 0.04); position: sticky; top: 0; z-index: 10; }
nav .brand { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 1.5rem 0 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: #1f2833; text-decoration: none; }
nav .brand img { width: 24px; height: 24px; }
nav .tabs { display: flex; align-self: stretch; }
nav .tabs a { display: flex; align-items: center; padding: 0 0.9rem; margin-bottom: -1px; font-size: 0.85rem; color: #57606b; text-decoration: none; border-bottom: 2px solid transparent; }
nav .tabs a:hover { color: #1f2833; }
nav .tabs a.active { color: #0969da; font-weight: 600; border-bottom-color: #0969da; }
nav .status { margin: 0 0 0 1rem; font-size: 0.75rem; }
nav .spacer { flex: 1; }
nav #search { font: inherit; font-size: 0.8rem; padding: 5px 10px; width: 200px; border: 1px solid #d0d7de; border-radius: 6px; }
nav #search:focus { outline: none; border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15); }
nav .login { margin-left: 0.75rem; padding: 5px 12px; font-size: 0.8rem; color: #1f2833; text-decoration: none; border: 1px solid #d0d7de; border-radius: 6px; }
nav .login:hover { background: #f6f8fa; }

@media (max-width: 640px) {
  nav { flex-wrap: wrap; height: auto; padding: 0.5rem 1rem 0; margin: -1rem -1rem 1rem; gap: 0.5rem; }
  nav .brand { margin: 0; }
  nav .spacer { order: 1; }
  nav #search { order: 2; flex: 1 1 100%; width: auto; }
  nav .login { order: 1; margin-left: 0; }
  nav .tabs { order: 3; flex: 1 1 100%; align-self: auto; height: 40px; }
  nav .status { display: none; }
}