:root { --hub-header-height: 76px; }
body { padding-top: var(--hub-header-height); }
.hub-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--hub-header-height);
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #090e1a;
  color: #eef3ff;
  z-index: 100;
}
.hub-header .header-inner { max-width: none; margin: 0; padding: 0; height: 100%; display: block; }
.hub-header .brand {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  max-width: calc(100vw - 560px);
  margin: 0;
  color: #eef3ff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.hub-header .brand > span, .hub-header .brand > div { overflow: hidden; text-overflow: ellipsis; }
.hub-header .brand small { display: none; }
.hub-header .brand img { display: block; width: 40px; height: 40px; flex: none; }
.hub-header .topbar { position: fixed; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; }
.hub-header .topbar a, .hub-header .topbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  background: #172438;
  color: #eef3ff;
  font: 700 14px/1.2 "Segoe UI", sans-serif;
  text-decoration: none;
}
.hub-header .topbar a:hover, .hub-header .topbar button:hover { background: #243650; }
.hub-header :focus-visible { outline: 3px solid #77baff; outline-offset: 3px; }
.account-welcome { text-align: right; }
.skip-link { z-index: 101; }
html { scroll-padding-top: calc(var(--hub-header-height) + 16px); }
@media (max-width: 960px) {
  :root { --hub-header-height: 132px; }
  .hub-header .brand { top: 76px; height: 40px; max-width: calc(100vw - 32px); font-size: 19px; }
}