:root {
  --product-header-height: 64px;
}

.product-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  height: var(--product-header-height);
  align-items: center;
  padding: 0 var(--page-gutter, clamp(16px, 2vw, 32px));
  border-bottom: 1px solid var(--c-border, #dce1e7);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: saturate(150%) blur(12px);
  color: var(--c-text, #20293b);
  font-family: var(--ff-sans, "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
}

.product-header__inner {
  display: flex;
  width: 100%;
  max-width: var(--layout-standard, 1200px);
  height: 100%;
  align-items: center;
  margin: 0 auto;
}

.product-header__brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-right: 24px;
  color: var(--c-text, #20293b);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}

.product-header__brand:hover { color: var(--c-text, #20293b); }
.product-header__brand .logo,
.product-header__mark {
  display: flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.product-header__brand .logo img,
.product-header__mark img { display: block; width: 100%; height: 100%; }
.product-header__brand small {
  color: var(--c-text-3, #5d6b80);
  font-size: 12px;
  font-weight: 400;
}

.product-header__nav {
  display: flex;
  height: 100%;
  align-self: stretch;
  gap: 4px;
}
.product-header__nav a {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 14px;
  border-bottom: 0;
  border-radius: 0;
  color: var(--c-text-2, #51607a);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.product-header__nav a:hover { color: var(--c-text, #20293b); }
.product-header__nav a.router-link-active,
.product-header__nav a.is-active {
  font-weight: 600;
  color: var(--c-primary, #3f5e8f);
}
.product-header__nav a > span { display: inline; }
.product-header__nav .nav-label--compact { display: none; }
.product-header__nav .product-header__guide { margin-left: 8px; }
.product-header__nav .product-header__admin { gap: 5px; }
.product-header__nav .product-header__admin em {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #b34b37;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

.product-header__spacer { flex: 1; }
.product-header__right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}
.product-header__user {
  max-width: 180px;
  overflow: hidden;
  color: var(--c-text-2, #51607a);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-header__action {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--c-border, #e4e9f1);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text, #20293b);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.product-header__action:hover {
  border-color: var(--c-border-strong, #b4becd);
  background: var(--c-bg-tint, #eaeef4);
  color: var(--c-text, #20293b);
}

@media (max-width: 860px) {
  .product-header { height: auto; min-height: 96px; padding: 0 14px; }
  .product-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 48px 48px;
  }
  .product-header__brand { grid-column: 1; grid-row: 1; min-height: 44px; margin-right: 0; }
  .product-header__spacer { display: none; }
  .product-header__right { grid-column: 3; grid-row: 1; }
  .product-header__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .product-header__nav.has-admin { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .product-header__nav a {
    min-width: 0;
    justify-content: center;
    padding: 0 6px;
    font-size: 12px;
  }
  .product-header__nav .product-header__guide { margin-left: 0; }
  .product-header__nav .product-header__guide::before { display: none; }
  .product-header__nav .nav-label--wide { display: none; }
  .product-header__nav .nav-label--compact { display: inline; }
  .product-header__user { display: none; }
  .product-header__action { min-height: 44px; }
}

/* Compact brand rail shared with the application and user guide. */
.product-header__brand{font-size:20px;font-weight:650;min-height:44px;color:#294568}
.product-header__nav a::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  background: transparent;
  content: '';
}
.product-header__nav a:is(.router-link-active, .is-active)::after { background: var(--c-primary, #3f5e8f); }
.product-header__nav a:focus-visible { outline: 2px solid var(--c-primary, #3f5e8f); outline-offset: -4px; }
@media (max-width: 760px) { .product-header__nav a::after { right: 6px; left: 6px; } }
@media(max-width:600px){.product-header{height:64px;min-height:64px}.product-header__inner{display:flex;gap:12px;min-height:64px}.product-header__brand{font-size:18px;margin-right:0}.product-header__right{margin-left:auto}.product-header__spacer{display:none}}

/* Shared continuity wordmark: the full name in headers, the y curve in favicons. */
.elys-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: #243e56; font-family: var(--ff-sans, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif); }
.elys-brand__wordmark { display: block; width: var(--brand-wordmark-width, 92px); height: auto; max-width: none; flex: 0 0 auto; }
.elys-brand__meta { display: grid; gap: 4px; padding-bottom: 4px; text-align: left; }
.elys-brand__name { color: #526e86; font-size: var(--brand-name-size, 18px); font-weight: 450; line-height: 1; letter-spacing: .16em; }
.elys-brand__field { color: #526e86; font-size: 8px; font-weight: 400; line-height: 1; letter-spacing: .09em; white-space: nowrap; }