:root {
  --product-nav-brand: #2563eb;
  --product-nav-brand-dark: #1d4ed8;
  --product-nav-text: #0f172a;
  --product-nav-muted: #475569;
  --product-nav-line: rgba(226, 232, 240, .9);
  --product-nav-hover: #eff6ff;
  --product-nav-hover-line: #bfdbfe;
}

header:has(.top-nav),
.siteHeader {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--product-nav-line) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

header:has(.top-nav) {
  margin-bottom: 18px !important;
}

header:has(.top-nav) .container,
.siteHeader {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.site-left,
.siteLeft {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.site-right,
.siteRight {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.site-brand,
.siteBrand {
  color: var(--product-nav-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.site-brand:hover,
.siteBrand:hover {
  color: var(--product-nav-text) !important;
  text-decoration: none !important;
}

.top-nav,
.topNav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.top-nav a,
.topNav a {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--product-nav-muted) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.top-nav a:hover,
.topNav a:hover {
  color: var(--product-nav-brand) !important;
  background: var(--product-nav-hover) !important;
  border-color: var(--product-nav-hover-line) !important;
  text-decoration: none !important;
}

.top-nav a.active,
.topNav a.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--product-nav-brand), var(--product-nav-brand-dark)) !important;
  border-color: var(--product-nav-brand) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important;
}

header .stats,
.siteMeta {
  color: #64748b !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

@media (max-width: 820px) {
  header:has(.top-nav) .container,
  .siteHeader {
    min-height: 64px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .siteHeader {
    height: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-left,
  .site-right,
  .siteLeft,
  .siteRight {
    width: 100% !important;
  }

  .site-right,
  .siteRight {
    justify-content: space-between !important;
  }

  .top-nav,
  .topNav {
    width: 100% !important;
  }

  .top-nav a,
  .topNav a {
    height: 34px !important;
    padding: 0 11px !important;
    font-size: 13px !important;
  }

  header .stats,
  .siteMeta {
    font-size: 12px !important;
  }
}