/* 八个模块共用的导航外壳。密度只跟视口变化，不跟当前模块变化。 */
@view-transition { navigation: auto; }

body > .szh {
  --szh-height: 112px;
  --szh-pad-y: 12px;
  --szh-pad-x: 28px;
  --szh-logo: 60px;
  --szh-title: clamp(19px, 1.6vw, 25px);
  --szh-nav-font: 14px;
  --szh-nav-y: 7px;
  --szh-nav-x: 17px;
  --szh-right-gap: 8px;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  line-height: 1.5;
  padding: var(--szh-pad-y) var(--szh-pad-x);
  view-transition-name: szzf-header;
}
body > .szh > .szh-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
body > .szh > .szh-gravity-particles { image-rendering: auto; }
body > .szh .szh-mark { width: var(--szh-logo); height: var(--szh-logo); }
body > .szh .szh-copy { flex: 0 1 auto; min-width: 0; }
body > .szh .szh-copy h1 {
  font-size: var(--szh-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body > .szh .szh-right { gap: var(--szh-right-gap); }
body > .szh .szh-status { min-height: 32px; line-height: 1.5; }
body > .szh .szh-hbtn {
  box-sizing: border-box;
  min-height: 32px;
  justify-content: center;
  padding: 4px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
body > .szh #wxLogin { min-width: 0; min-height: 32px; flex: none; justify-content: flex-end; }
body > .szh #wxLogin .wxprofile { box-sizing: border-box; min-height: 32px; padding: 4px 11px 4px 5px; gap: 6px; }
body > .szh #wxLogin .wxav { box-sizing: border-box; width: 22px; height: 22px; }
body > .szh .szh-nav {
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  line-height: 20px;
  text-align: center;
  view-transition-name: szzf-navigation;
}
body > .szh .szh-nav a {
  position: relative;
  z-index: 1;
  font-size: var(--szh-nav-font);
  line-height: 20px;
  padding: var(--szh-nav-y) var(--szh-nav-x);
  transition: background-color 120ms ease;
}
body > .szh .szh-nav a:focus-visible { outline: 2px solid #9cddff; outline-offset: -2px; }
body > .szh .szh-nav[data-indicator] a.on { background: transparent; }
body > .szh .szh-nav a.is-pending { background: rgba(102, 166, 255, .22); }
body > .szh .szh-nav[data-indicator]::before {
  content: "";
  position: absolute;
  left: var(--szh-active-x);
  top: var(--szh-active-y);
  width: var(--szh-active-w);
  height: var(--szh-active-h);
  border-radius: 8px;
  background: #2160d3;
  pointer-events: none;
  view-transition-name: szzf-nav-selection;
}
/* 等待新页面时保留原有内容，细线提供反馈；不遮挡导航或锁住点击。 */
body > .szh::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: #74c7ff;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
body > .szh.szh-navigating::after { animation: szh-navigation-wait 8s ease-out both; }
@keyframes szh-navigation-wait { from { transform: scaleX(.08); } to { transform: scaleX(.88); } }
.szh-navigation-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1460px) { body > .szh { --szh-nav-x: 12px; } }
@media (max-width: 1280px) { body > .szh { --szh-pad-x: 18px; } }
@media (min-width: 1201px) {
  body > .szh { height: var(--szh-height); }
  body > .szh .szh-right { flex: 0 0 auto; align-items: stretch; }
  /* 两排共享左右边界；五个状态控件均匀分布，账号随内容取宽。 */
  body > .szh .szh-status { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  body > .szh .szh-status > .szh-sslot { display: contents; }
}
/* 从首页移出的共用密度档，保留首页三段式布局的可用高度。 */
@media (min-width: 1201px) and (max-height: 960px) {
  body > .szh { --szh-height: 106px; --szh-pad-y: 9px; --szh-logo: 54px; }
}
@media (min-width: 1201px) and (max-height: 820px) {
  body > .szh {
    --szh-height: 92px; --szh-pad-y: 7px; --szh-pad-x: 22px; --szh-logo: 46px;
    --szh-title: 20px; --szh-nav-font: 13px; --szh-nav-y: 4px; --szh-nav-x: 13px; --szh-right-gap: 5px;
  }
  body > .szh .szh-status { font-size: 12px; }
}
@media (min-width: 1201px) and (max-height: 700px) {
  body > .szh {
    --szh-height: 86px; --szh-pad-y: 5px; --szh-pad-x: 18px; --szh-logo: 40px;
    --szh-title: 18px; --szh-nav-font: 12.5px; --szh-nav-y: 3px; --szh-nav-x: 11px; --szh-right-gap: 4px;
  }
  body > .szh .szh-status { font-size: 11.5px; }
}
@media (max-width: 1200px) {
  body > .szh { flex-wrap: wrap; gap: 10px 12px; --szh-logo: 48px; --szh-title: 18px; }
  body > .szh .szh-copy { flex: 1 1 0; }
  body > .szh .szh-right { flex: 1 1 100%; min-width: 0; max-width: 100%; align-items: stretch; }
  body > .szh .szh-status { justify-content: flex-end; flex-wrap: wrap; }
  body > .szh .szh-nav { order: -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  body > .szh .szh-nav a { text-align: center; --szh-nav-font: 13px; --szh-nav-x: 4px; }
  body > .szh .szh-slot, body > .szh.szh-noslot .szh-slot {
    flex: 1 1 100%; order: 9; opacity: 1; margin-left: 0; visibility: visible; pointer-events: auto;
  }
}
@media (max-width: 800px) {
  body > .szh { --szh-logo: 42px; --szh-pad-y: 10px; --szh-pad-x: 14px; }
  body > .szh .szh-sub { display: none; }
  body > .szh .szh-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body > .szh .szh-nav a { --szh-nav-y: 12px; }
  body > .szh .szh-status { gap: 6px 9px; }
}
/* 导航和品牌条不整块交叉闪动；只让正文淡入、蓝色选中块移动。 */
::view-transition-group(szzf-header), ::view-transition-group(szzf-navigation) { animation: none; }
::view-transition-old(szzf-header), ::view-transition-old(szzf-navigation) { animation: none; opacity: 0; }
::view-transition-new(szzf-header), ::view-transition-new(szzf-navigation) { animation: none; opacity: 1; }
::view-transition-group(szzf-nav-selection) { animation-duration: 180ms; animation-timing-function: ease-out; }
::view-transition-old(szzf-nav-selection), ::view-transition-new(szzf-nav-selection) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
@media (prefers-reduced-motion: reduce) {
  body > .szh .szh-nav a { transition: none; }
  body > .szh.szh-navigating::after { animation: none; transform: scaleX(.35); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 正文 frame 保留父页完整视口尺寸；品牌占位由外层裁去，分类控件留在正文顶部。 */
html.szh-managed-content body > .szh {
  display: block; height: auto !important; min-height: var(--szh-parent-height, 112px);
  padding: var(--szh-parent-height, 112px) 0 0 !important; margin: 0;
  border: 0; box-shadow: none; view-transition-name: none;
}
html.szh-managed-content body > .szh > .szh-mark,
html.szh-managed-content body > .szh > .szh-copy,
html.szh-managed-content body > .szh > .szh-right,
html.szh-managed-content body > .szh > .szh-navigation-status,
html.szh-managed-content body > .szh::after { display: none; }
html.szh-managed-content body > .szh > .szh-slot {
  display: block; opacity: 1; visibility: visible; pointer-events: auto;
  margin: 0; padding: 6px 22px; width: 100%; overflow: auto;
}
html.szh-managed-content body > .szh > .szh-slot:empty { display: none; }
@media (max-width: 800px) {
  html.szh-managed-content body > .szh > .szh-slot { padding: 6px 14px; }
}

/* 正文弹窗、抽屉和跳转入口始终位于常驻页头下方。 */
html.szh-managed-content :is(.overlay, .share-mask, .utility-dialog-backdrop, .data-loading, .pdfview, .wxguard-ov) {
  top: var(--szh-parent-height, 112px);
  height: calc(100% - var(--szh-parent-height, 112px));
}
html.szh-managed-content .utility-dialog { max-height: calc(100dvh - var(--szh-parent-height, 112px) - 32px); }
html.szh-managed-content .skip-link { top: calc(var(--szh-parent-height, 112px) + 12px); }
html.szh-managed-content body > .szh > .szh-slot { padding: 6px 22px !important; }

html.szh-managed-content .target-customer-matrix .matrix-detail {
  max-height: min(72dvh, calc(100dvh - var(--szh-parent-height, 112px) - 24px), 680px);
}
@media (max-width: 800px) {
  html.szh-managed-content body > .szh > .szh-slot { padding: 6px 14px !important; }
}