/* FCC Header System v3: canonical runtime-rendered header */
.site-header {
  display: flex !important;
  flex-direction: column !important;
  gap: .65rem !important;
  padding-top: 3.2rem !important;
}
.topbar,
.topbar-shell {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10001 !important;
  background: linear-gradient(180deg, rgba(12,13,15,.96), rgba(12,13,15,.9)) !important;
  backdrop-filter: saturate(120%) blur(6px) !important;
  border-bottom: 1px solid var(--line) !important;
}
.topbar-content {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: .65rem 1.5rem !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}
.brand,
.brand a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.brand:hover,
.brand a:hover {
  color: var(--accent-2, var(--accent2)) !important;
  text-decoration: none !important;
}
.ecosystem-nav {
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}
.ecosystem-nav a,
.ecosystem-nav .active {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  padding: .35rem .45rem !important;
  border-radius: .45rem !important;
}
.ecosystem-nav a {
  color: var(--text-dim, var(--dim)) !important;
  text-decoration: none !important;
}
.ecosystem-nav a:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.05) !important;
}
.ecosystem-nav .active {
  color: #9ae6b4 !important;
  background: rgba(72,187,120,.16) !important;
  border: 1px solid rgba(72,187,120,.35) !important;
}
.fcc-preserved-controls {
  position: absolute !important;
  right: 1.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
@media (max-width: 640px) {
  .site-header { padding-top: 5.4rem !important; }
  .topbar-content {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: .4rem !important;
    min-height: 0 !important;
  }
  .ecosystem-nav {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: .1rem !important;
  }
  .ecosystem-nav a,
  .ecosystem-nav .active {
    white-space: nowrap !important;
  }
  .fcc-preserved-controls {
    position: static !important;
    transform: none !important;
    align-self: flex-end !important;
  }
}