/*  header-refactor.css — Phase3 首屏导航壳（已抽离 Command Palette）
 * 源归档：archive/header-css-phase3-sources/header-refactor.css
 * 生成：scripts/split-header-cmd-css.mjs（2026-07-24）
 * 重生成：node scripts/split-header-cmd-css.mjs
 * 暗黑双分支 / 833·834 断点保持源语义；禁止手改 .min.*
  *//* ============================================================
   Header 重构升级层 (header-refactor.css)
   ----------------------------------------------------------
   设计哲学：强化 Apple 风格 + 微交互 + 视觉层次
   - 增强的淘宝橙品牌色系统
   - 优化的阴影层次和立体感
   - 流畅的动画过渡效果
   - 强化的交互反馈
   - 优化的响应式布局

   本文件通过层级覆盖 modern-header.css 和 apple-header-overrides.css，
   不修改原文件，确保未来系统升级无缝兼容。
   ============================================================ */

/* ----- 一、增强的色彩系统 ----- */
.modern-header {
  /* 淘宝橙品牌色增强 */
  --mh-accent-primary: var(--husir-orange, var(--dm-accent, #c63f00));
  --mh-accent-secondary: color-mix(in srgb, var(--mh-accent-primary) 72%, #ffffff 28%);
  --mh-accent-tertiary: color-mix(in srgb, var(--mh-accent-primary) 52%, #ffffff 48%);
  --mh-accent-faint: color-mix(in srgb, var(--mh-accent-primary) 4%, transparent);
  --mh-accent-subtle: color-mix(in srgb, var(--mh-accent-primary) 6%, transparent);
  --mh-accent-border: color-mix(in srgb, var(--mh-accent-primary) 8%, transparent);
  --mh-accent-ring: color-mix(in srgb, var(--mh-accent-primary) 10%, transparent);
  --mh-accent-glow: var(--husir-orange-soft, var(--dm-accent-soft, rgba(255, 80, 0, 0.12)));
  --mh-accent-hover: color-mix(in srgb, var(--mh-accent-primary) 14%, transparent);
  --mh-accent-strong: var(--husir-orange-strong, var(--dm-accent-strong, rgba(255, 80, 0, 0.22)));
  --mh-accent-shadow-soft: color-mix(in srgb, var(--mh-accent-primary) 6%, transparent);
  --mh-accent-shadow: color-mix(in srgb, var(--mh-accent-primary) 15%, transparent);
  --mh-accent-progress-glow: color-mix(in srgb, var(--mh-accent-primary) 35%, transparent);
  --mh-accent-progress-soft: color-mix(in srgb, var(--mh-accent-primary) 25%, transparent);

  /* 阴影层次系统 */
  --mh-shadow-level-1: 
    0 0.5px 0 rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 8px 20px rgba(0, 0, 0, 0.02);
  
  --mh-shadow-level-2: 
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 12px 32px rgba(0, 0, 0, 0.04);
  
  --mh-shadow-level-3: 
    0 2px 0 rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.06);
  
  --mh-shadow-pill: 
    0 0.5px 0 rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 12px 32px rgba(0, 0, 0, 0.04);
  
  --mh-shadow-pill-hover: 
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.06);

  /* 圆角系统 */
  --mh-radius-sm: 8px;
  --mh-radius-md: 12px;
  --mh-radius-lg: 16px;
  --mh-radius-xl: 20px;
  --mh-radius-2xl: 24px;
  --mh-radius-3xl: 28px;
  --mh-radius-pill: 980px;

  /* 过渡动画 */
  --mh-transition-fast: 0.15s ease;
  --mh-transition-normal: 0.25s ease;
  --mh-transition-slow: 0.35s ease;
  --mh-transition-spring: cubic-bezier(0.25, 1, 0.5, 1);
  --mh-transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- 二、Header 容器增强 ----- */
.modern-header {
  /* 增强的背景效果 */
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  
  /* 优化的阴影 */
  box-shadow: var(--mh-shadow-level-1);
  
  /* 增强的过渡效果 */
  transition: 
    background 0.4s var(--mh-transition-smooth),
    box-shadow 0.4s var(--mh-transition-smooth),
    width 0.6s var(--mh-transition-spring),
    max-width 0.6s var(--mh-transition-spring),
    border-radius 0.6s var(--mh-transition-spring),
    margin-top 0.6s var(--mh-transition-spring);
}

/* 滚动状态增强 */
.modern-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--mh-shadow-level-2);
}

/* 紧凑模式增强 */
.modern-header.is-compact {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  backdrop-filter: blur(28px) saturate(2);
  box-shadow: var(--mh-shadow-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.modern-header.is-compact.is-scrolled {
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--mh-shadow-pill-hover);
  border-color: var(--mh-accent-border);
}

/* ----- 三、滚动进度条增强 ----- */
.mh-scroll-progress {
  /* 渐变保持静态，避免 background-position 无限动画持续触发绘制。 */
  background: linear-gradient(90deg,
    var(--mh-accent-primary) 0%,
    var(--mh-accent-secondary) 30%,
    var(--mh-accent-tertiary) 60%,
    var(--mh-accent-primary) 100%);
  background-size: 100% 100%;
  
  /* 优化的阴影效果 */
  box-shadow: 
    0 0 12px var(--mh-accent-progress-glow),
    0 0 4px var(--mh-accent-progress-soft);
}

/* ----- 四、Logo 区域增强 ----- */
.mh-logo-link {
  /* 增强的悬停效果 */
  transition: 
    opacity 0.3s var(--mh-transition-smooth),
    transform 0.4s var(--mh-transition-spring);
}

.mh-logo-link:hover {
  opacity: 0.85;
  transform: scale(0.97);
}

.mh-logo-link:active {
  transform: scale(0.95);
}

/* ----- 五、导航菜单增强 ----- */
.mh-nav-menu {
  /* 增强的背景效果：使用 CSS 变量，确保暗黑模式继承链完整 */
  background: var(--mh-nav-bg, rgba(0, 0, 0, 0.015));
  box-shadow: inset 0 0.5px 1px rgba(0, 0, 0, 0.02);
  
  /* 优化的圆角 */
  border-radius: var(--mh-radius-pill);
}

/* ----- 六、导航链接增强 ----- */
.mh-nav-link {
  /* 增强的字体效果 */
  font-weight: 560;
  letter-spacing: 0;
  
  /* 优化的过渡效果 */
  transition: 
    color 0.25s var(--mh-transition-smooth),
    background 0.25s var(--mh-transition-smooth),
    transform 0.35s var(--mh-transition-spring),
    box-shadow 0.25s var(--mh-transition-smooth);
}

/* 悬停状态增强 */
@media (hover: hover) {
  .mh-nav-link:hover:not(.on):not(.active) {
    color: var(--mh-accent-primary);
    background: var(--mh-accent-subtle);
    box-shadow: 0 0 0 1px var(--mh-accent-ring);
  }
}

/* 激活状态增强 */
.mh-nav-link.on,
.mh-nav-link.active,
.mh-nav-item.on > .mh-nav-link,
.mh-nav-item.active > .mh-nav-link {
  color: var(--mh-accent-primary);
  font-weight: 600;
  background: var(--mh-accent-border);
}

/* ----- 七、Mega Menu 增强 ----- */
.mh-mega-inner {
  /* 增强的背景效果 */
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  backdrop-filter: blur(40px) saturate(1.6);
  
  /* 优化的阴影效果 */
  box-shadow: 
    0 1px 0 rgba(0, 0, 0, 0.02),
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 24px 64px rgba(0, 0, 0, 0.08);
  
  /* 增强的圆角 */
  border-radius: var(--mh-radius-2xl);
  
  /* 优化的边框 */
  border: 0.5px solid rgba(0, 0, 0, 0.04);
}

/* Mega Card 增强 */
.mh-mega-card {
  /* 增强的过渡效果 */
  transition: 
    background 0.3s var(--mh-transition-smooth),
    transform 0.35s var(--mh-transition-spring),
    border-color 0.3s var(--mh-transition-smooth),
    box-shadow 0.3s var(--mh-transition-smooth),
    opacity 0.35s var(--mh-transition-smooth);
}

.mh-mega-card:hover {
  /* 增强的悬停效果 */
  background: var(--mh-accent-faint);
  border-left-color: var(--mh-accent-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px) translateX(2px);
}

/* Mega Card Icon 增强 */
.mh-mega-card-icon {
  /* 增强的背景效果 */
  background: linear-gradient(135deg,
    var(--mh-accent-border) 0%,
    var(--mh-accent-glow) 100%);
  
  /* 优化的过渡效果 */
  transition: 
    transform 0.3s var(--mh-transition-spring),
    background 0.25s var(--mh-transition-smooth),
    box-shadow 0.25s var(--mh-transition-smooth);
}

.mh-mega-card:hover .mh-mega-card-icon {
  /* 增强的悬停效果 */
  background: linear-gradient(135deg,
    var(--mh-accent-hover) 0%,
    var(--mh-accent-strong) 100%);
  transform: scale(1.1);
  box-shadow: 0 4px 12px var(--mh-accent-shadow);
}

/* Mega Footer Link 增强 */
.mh-mega-footer-link {
  /* 增强的过渡效果 */
  transition: 
    gap 0.25s var(--mh-transition-smooth),
    opacity 0.35s var(--mh-transition-smooth),
    transform 0.35s var(--mh-transition-smooth),
    color 0.25s var(--mh-transition-smooth);
}

.mh-mega-footer-link:hover {
  gap: 15px;
  color: var(--mh-accent-primary);
}

/* ----- 八、Action 按钮增强 ----- */
.mh-action-btn {
  /* 增强的字体效果 */
  font-weight: 540;
  letter-spacing: 0;
  
  /* 优化的过渡效果 */
  transition: 
    color 0.25s var(--mh-transition-smooth),
    background 0.25s var(--mh-transition-smooth),
    transform 0.3s var(--mh-transition-spring),
    box-shadow 0.25s var(--mh-transition-smooth);
}

/* 悬停状态增强 */
@media (hover: hover) {
  .mh-action-btn:hover {
    color: var(--mh-accent-primary);
    background: var(--mh-accent-subtle);
    box-shadow: 0 0 0 1px var(--mh-accent-ring);
    transform: scale(1.02);
  }
}

/* 激活状态增强 */
.mh-action-btn:active {
  transform: scale(0.98);
}

/* KBD 提示增强 */
.mh-kbd-hint {
  /* 增强的背景效果 */
  background: var(--mh-chip-bg);
  
  /* 优化的边框 */
  border: 1px solid var(--mh-command-border);
  
  /* 增强的过渡效果 */
  transition: 
    color 0.2s var(--mh-transition-smooth),
    border-color 0.2s var(--mh-transition-smooth),
    background 0.2s var(--mh-transition-smooth);
}

.mh-search-btn:hover .mh-kbd-hint {
  color: var(--mh-accent-primary);
  border-color: var(--mh-accent-shadow);
  background: var(--mh-accent-subtle);
}

/* 桌面与移动端统一触控热区，避免下拉菜单和搜索面板出现过小可聚焦项 */
.mh-mega-footer-link {
  min-height: 44px;
  align-items: center;
  line-height: 1.4;
}

/* ----- 十、暗黑模式增强 ----- */
/* modern-header 导航的 --nav-* 暗黑变量定义见本文件末尾（系统暗黑 @media + 手动暗黑 html.husir-dark）。
   其余全站暗黑基线（--dm-* 变量、body/卡片等）由 dark-mode-core.css 统一控制。 */

/* ----- 十一、响应式优化增强 ----- */

/* 1200-1399px：标准桌面自适应增强 */
@media (max-width: 1399px) and (min-width: 1200px) {
  .modern-header {
    --mh-radius-2xl: 22px;
  }
  
  .mh-mega-inner {
    border-radius: var(--mh-radius-2xl);
  }
}

/* 1000-1199px：小桌面/平板横屏自适应增强 */
@media (max-width: 1199px) and (min-width: 1000px) {
  .modern-header {
    --mh-radius-2xl: 20px;
  }
  
  .mh-mega-inner {
    border-radius: var(--mh-radius-2xl);
  }
}

/* 834-999px：iPad Pro 等横排菜单栏增强 */
@media (max-width: 999px) and (min-width: 834px) {
  .modern-header {
    --mh-radius-2xl: 18px;
  }
  
  .mh-mega-inner {
    border-radius: var(--mh-radius-2xl);
  }
}

/* ≤833px：移动端增强 */
@media (max-width: 833px) {
  .modern-header .mh-header-container {
    justify-content: space-between;
    gap: 0;
  }

  .modern-header .mh-header-logo {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
  }

  .modern-header .mh-logo-link {
    display: block;
    width: auto;
    max-width: none;
  }

  .modern-header .mh-logo-img {
    width: auto;
    max-width: none;
    height: 47px;
    max-height: none;
  }

  .modern-header {
    --mh-radius-2xl: 16px;
  }
  
  .mh-mega-inner {
    border-radius: var(--mh-radius-2xl);
  }
  
  /* 移动端导航菜单增强 */
  .mh-nav-menu {
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
  }
  
  /* 移动端导航链接增强 */
  .mh-nav-link {
    transition: 
      background 0.2s var(--mh-transition-smooth),
      transform 0.2s var(--mh-transition-smooth);
  }
  
  .mh-nav-link:active {
    background: var(--mh-accent-subtle);
    transform: scale(0.98);
  }
}

/* 移动端触控热区：补足搜索浮层的 44px 可点面积（内页顶条已移除） */
@media (max-width: 900px) {
  .mh-logo-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .mh-mega-footer-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
  }
}

/* ----- 十二、动画优化增强 ----- */

/* 减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .modern-header,
  .mh-scroll-progress,
  .mh-nav-link,
  .mh-chevron,
  .mh-mega-menu,
  .mh-mega-card,
  .mh-mega-footer-link,
  .mh-action-btn,
  .mh-logo-link {
    animation: none !important;
    transition: none !important;
  }
}

/* ----- 十三、性能优化增强 ----- */

/* 启用硬件加速 */
.modern-header,
.mh-scroll-progress,
.mh-mega-menu {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* 优化图片渲染 */
.modern-header img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 优化字体渲染 */
.modern-header {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- 十四、导航极简重构覆盖 ----- */
.modern-header {
  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-text: #18212f;
  --nav-border: rgba(18, 24, 32, 0.08);
  --nav-active-text: var(--dm-accent, #c63f00);
  --nav-active-bg: var(--dm-accent-soft, rgba(255, 80, 0, 0.12));
  --nav-active-border: var(--dm-accent-strong, rgba(255, 80, 0, 0.22));
  --nav-hover-bg: color-mix(in srgb, var(--dm-accent, #c63f00) 8%, transparent);
  --nav-shell-gap: clamp(14px, calc(0.8vw + 0.6cqw), 32px);
  --nav-item-gap: clamp(3px, 0.62cqw, 10px);
  --nav-link-pad-x: clamp(10px, calc(0.72cqw + 0.28vw), 20px);
  --nav-link-h: clamp(40px, calc(3.2cqw + 1.45vw), 54px);
  --nav-font-fluid: calc(14px + 0.48vw + 0.3cqw);
  --nav-font-size: clamp(16px, var(--nav-font-fluid), 22px);
}

.modern-header .mh-header-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nav-shell-gap);
  min-width: 0;
}

.modern-header .mh-header-actions {
  flex: 0 0 auto;
}

.modern-header .mh-header-logo {
  flex: 0 1 clamp(120px, 14.3vw, 218px);
  min-width: clamp(107px, 10.4vw, 161px);
  max-width: clamp(166px, 15.6vw, 234px);
}

.modern-header .mh-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.modern-header .mh-logo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(var(--mh-header-h) - 24px);
  aspect-ratio: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 834px) {
.modern-header .mh-header-nav {
  position: static;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  container-type: inline-size;
}

.modern-header .mh-nav-menu {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--nav-item-gap);
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.modern-header .mh-nav-menu::-webkit-scrollbar {
  display: none;
}

.modern-header .mh-nav-item {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

.modern-header .mh-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  min-height: var(--nav-link-h);
  padding: 0 clamp(12px, calc(0.82cqw + 0.3vw), 22px);
  color: var(--nav-text);
  font-size: var(--nav-font-size);
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  transform: none;
}

.modern-header .mh-nav-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.modern-header .mh-nav-link.on,
.modern-header .mh-nav-link.active,
.modern-header .mh-nav-item.on > .mh-nav-link,
.modern-header .mh-nav-item.active > .mh-nav-link {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  box-shadow: inset 0 0 0 1px var(--nav-active-border);
}

@media (hover: hover) {
  .modern-header .mh-nav-link:hover:not(.on):not(.active) {
    color: var(--nav-active-text);
    background: var(--nav-hover-bg);
    box-shadow: none;
    transform: none;
  }
}

.modern-header .mh-chevron,
.modern-header .mh-mega-menu {
  display: none !important;
}
}

@media (min-width: 834px) {
  .modern-header,
  .modern-header.is-compact {
    background: var(--nav-bg);
  }

  .modern-header .mh-header-nav {
    width: auto;
    pointer-events: auto;
    visibility: visible;
    transform: none;
  }

  .modern-header .mh-menu-toggle {
    display: none !important;
  }
}

@container (max-width: 620px) {
  .modern-header .mh-nav-link {
    min-height: clamp(36px, 7.5cqw, 44px);
    padding-inline: clamp(8px, 1.7cqw, 14px);
    font-size: clamp(13px, calc(10px + 0.72cqw), 16px);
  }

  .modern-header .mh-nav-menu {
    justify-content: flex-start;
  }
}

@media (max-width: 1120px) and (min-width: 834px) {
  .modern-header .mh-header-container {
    padding-inline: clamp(14px, 2.2vw, 24px);
  }

  .modern-header .mh-header-actions {
    gap: 4px;
  }

  .modern-header .mh-action-btn {
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    gap: 0;
    justify-content: center;
    border-radius: 22px;
  }

  .modern-header .mh-action-btn svg {
    width: 19px;
    height: 19px;
  }

  .modern-header .mh-search-text,
  .modern-header .mh-kbd-hint,
  .modern-header .mh-phone-text {
    display: none;
  }
}

@media (max-width: 833px) {
  .modern-header .mh-header-nav {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--mh-header-h));
    right: 0;
    bottom: 0;
    left: auto;
    z-index: var(--dm-z-dropdown, 10030);
    display: block;
    width: min(100%, 320px);
    max-width: 100%;
    margin: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--hs-motion-normal, 280ms) var(--hs-ease-out, ease-out), visibility var(--hs-motion-normal, 280ms);
  }

  html.mh-menu-open .modern-header .mh-header-nav {
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .modern-header .mh-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 12px 10px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0;
    background: var(--dm-bg-elevated);
    box-shadow: var(--dm-shadow-md);
  }

  .modern-header .mh-nav-item,
  .modern-header .mh-nav-link {
    width: 100%;
  }

  .modern-header .mh-nav-link {
    justify-content: flex-start;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--hs-radius-md, 8px);
  }

  .modern-header .mh-menu-toggle {
    display: inline-flex !important;
  }
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .modern-header {
    /* 暗黑导航壳体与页面主画布对齐，避免滚动后沿用纯黑玻璃色产生色差。 */
    --mh-bg: var(--dm-bg);
    --mh-bg-scrolled: var(--dm-bg);
    --mh-pill-bg: var(--dm-bg);
    --nav-bg: var(--dm-bg);
    --nav-text: #f5f5f7;
    --nav-border: rgba(245, 245, 247, 0.12);
    --nav-active-text: var(--dm-accent, #ff6200);
    --nav-active-bg: var(--dm-accent-soft, rgba(255, 98, 0, 0.18));
    --nav-active-border: var(--dm-accent-strong, rgba(255, 98, 0, 0.3));
    --nav-hover-bg: color-mix(in srgb, var(--dm-accent, #ff6200) 12%, transparent);
  }

  html:not(.husir-light) .modern-header.is-scrolled {
    background: var(--dm-bg);
  }

  html:not(.husir-light) .modern-header.is-compact {
    background: var(--dm-bg);
    border-color: var(--dm-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03),
      0 2px 8px rgba(0, 0, 0, 0.22),
      0 8px 24px rgba(0, 0, 0, 0.18);
  }

  html:not(.husir-light) .modern-header.is-compact.is-scrolled {
    background: var(--dm-bg);
    border-color: var(--dm-accent-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03),
      0 2px 8px rgba(0, 0, 0, 0.22),
      0 8px 24px rgba(0, 0, 0, 0.18);
  }
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .modern-header .mh-kbd-hint,
  html:not(.husir-light) .modern-header .mh-nav-menu {
    background: var(--dm-glass-pill);
    border-color: var(--dm-border);
    color: var(--dm-text);
  }
}

html.husir-dark .modern-header {
  /* 手动暗黑与系统暗黑使用同一主画布底色。 */
  --mh-bg: var(--dm-bg);
  --mh-bg-scrolled: var(--dm-bg);
  --mh-pill-bg: var(--dm-bg);
  --nav-bg: var(--dm-bg);
  --nav-text: #f5f5f7;
  --nav-border: rgba(245, 245, 247, 0.12);
  --nav-active-text: var(--dm-accent, #ff6200);
  --nav-active-bg: var(--dm-accent-soft, rgba(255, 98, 0, 0.18));
  --nav-active-border: var(--dm-accent-strong, rgba(255, 98, 0, 0.3));
  --nav-hover-bg: color-mix(in srgb, var(--dm-accent, #ff6200) 12%, transparent);
}

html.husir-dark .modern-header.is-scrolled {
  background: var(--dm-bg);
}

html.husir-dark .modern-header.is-compact {
  background: var(--dm-bg);
  border-color: var(--dm-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.18);
}

html.husir-dark .modern-header.is-compact.is-scrolled {
  background: var(--dm-bg);
  border-color: var(--dm-accent-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.18);
}

html.husir-dark .modern-header .mh-kbd-hint,
html.husir-dark .modern-header .mh-nav-menu {
  background: var(--dm-glass-pill);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* 浏览器批注收口：导航胶囊只保留 header 外层壳体，暗黑下去掉内部整条底板。 */
@media (prefers-color-scheme: dark) {
  html:not(.husir-light) .modern-header .mh-nav-menu {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

html.husir-dark .modern-header .mh-nav-menu {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ----- 十五、移动端悬浮玻璃岛最终覆盖 ----- */
@media (max-width: 833px) {
  /* 正式内页复用首页首屏逻辑：背景从视口顶部开始，胶囊悬浮在首模块内。 */
  body.mobile-header-overlay {
    padding-top: env(safe-area-inset-top, 0px);
  }

  :root {
    /* 50px 玻璃岛上下各留 10px，继续为 fixed 顶栏保留稳定布局高度。 */
    --mh-header-h: 70px;
    --mob-head-hd-offset: 70px;
  }

  .modern-header {
    --mh-header-h: 70px;
    --mh-mobile-glass: rgba(255, 255, 255, 0.32);
    --mh-mobile-glass-panel: rgba(255, 255, 255, 0.9);
    --mh-mobile-glass-control: rgba(255, 255, 255, 0.58);
    --mh-mobile-glass-border: rgba(255, 255, 255, 0.78);
    --mh-mobile-glass-line: rgba(24, 33, 47, 0.1);
    --mh-mobile-glass-shadow:
      0 1px 0 rgba(255, 255, 255, 0.72) inset,
      0 10px 30px rgba(24, 33, 47, 0.12);
    --mh-mobile-panel-shadow:
      0 1px 0 rgba(255, 255, 255, 0.68) inset,
      0 18px 48px rgba(24, 33, 47, 0.18);
  }

  .modern-header,
  .modern-header.is-compact,
  .modern-header.is-scrolled,
  .modern-header.is-compact.is-scrolled {
    left: 0;
    width: 100%;
    max-width: none;
    height: calc(env(safe-area-inset-top, 0px) + var(--mh-header-h));
    margin-top: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    /* 旧的 will-change: transform 会把 fixed 菜单/搜索困在 70px Header 内。 */
    will-change: auto;
  }

  .modern-header::after {
    display: none;
  }

  .modern-header .mh-header-container,
  .modern-header.is-compact .mh-header-container {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    left: 10px;
    z-index: var(--dm-z-header, 10020);
    display: flex;
    justify-content: space-between;
    gap: 6px;
    box-sizing: border-box;
    width: auto;
    height: 50px;
    min-width: 0;
    padding: 3px 4px 3px 10px;
    overflow: visible;
    border: 1px solid var(--mh-mobile-glass-border);
    border-radius: 24px;
    background: transparent;
    box-shadow: var(--mh-mobile-glass-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.mobile-header-overlay .modern-header .mh-header-container,
  body.mobile-header-overlay .modern-header.is-compact .mh-header-container {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }

  /* 收口文件后段的桌面 flex/min/max，避免移动端 logo 撑开玻璃岛。 */
  .modern-header .mh-header-logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .modern-header .mh-logo-link {
    display: inline-flex;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    min-height: 44px;
  }

  .modern-header .mh-logo-img {
    width: auto;
    max-width: min(24vw, 86px);
    height: auto;
    max-height: 38px;
    object-fit: contain;
  }

  .modern-header .mh-header-actions {
    flex: 0 0 auto;
    gap: 4px;
  }

  .modern-header .mh-menu-toggle,
  .modern-header .mh-action-btn {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    color: var(--mh-text);
    border: 1px solid var(--mh-mobile-glass-line);
    border-radius: 20px;
    background: var(--mh-mobile-glass-control);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) inset;
    -webkit-backdrop-filter: blur(14px) saturate(1.45);
    backdrop-filter: blur(14px) saturate(1.45);
  }

  .modern-header .mh-menu-toggle {
    gap: 5px;
  }

  /* 手机端在搜索右侧保留电话图标，号码文本由无障碍名称完整表达。 */
  .modern-header .mh-phone-btn {
    display: inline-flex;
  }

  .modern-header .mh-phone-text {
    display: none;
  }

  .modern-header .mh-menu-toggle:focus-visible,
  .modern-header .mh-action-btn:focus-visible {
    outline: 2px solid var(--mh-accent-primary);
    outline-offset: 2px;
  }

  .modern-header .mh-menu-toggle:active,
  .modern-header .mh-action-btn:active {
    background: var(--mh-accent-subtle);
    transform: scale(0.96);
  }

  html.mh-menu-open .modern-header .mh-menu-toggle,
  .modern-header .mh-search-btn[aria-expanded="true"] {
    color: var(--mh-accent-primary);
    border-color: var(--mh-accent-strong);
    background: var(--mh-accent-glow);
  }

  .modern-header .mh-header-nav {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--mh-header-h));
    right: 10px;
    bottom: auto;
    left: auto;
    z-index: var(--dm-z-dropdown, 10030);
    display: block;
    width: min(84vw, 340px);
    max-width: calc(100vw - 20px);
    /* 复用底部 Dock 的避让变量，菜单与底栏之间再保留 10px 呼吸区。 */
    height: calc(100vh - env(safe-area-inset-top, 0px) - var(--mh-header-h) - var(--mob-nav-page-reserve, 80px) - 20px);
    height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--mh-header-h) - var(--mob-nav-page-reserve, 80px) - 20px);
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    border: 1px solid var(--mh-mobile-glass-border);
    border-radius: 24px;
    background: var(--mh-mobile-glass-panel);
    box-shadow: var(--mh-mobile-panel-shadow);
    -webkit-backdrop-filter: blur(28px) saturate(1.7);
    backdrop-filter: blur(28px) saturate(1.7);
    transform: translateX(calc(100% + 10px));
    transition:
      transform var(--hs-motion-normal, 280ms) var(--hs-ease-out, ease-out),
      visibility var(--hs-motion-normal, 280ms);
  }

  html.mh-menu-open .modern-header .mh-header-nav {
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .modern-header .mh-nav-menu {
    width: 100%;
    height: 100%;
    padding: 12px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 23px;
    background: transparent;
    box-shadow: none;
  }

  .modern-header .mh-nav-link {
    border-radius: 14px;
  }
}

/* 竖屏平板玻璃岛增高收窄，内部控件随视口自适应放大，不影响手机、横屏及 834px 以上布局。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
  :root {
    --mh-header-h: 110px;
    --mob-head-hd-offset: 110px;
  }

  .modern-header {
    --mh-header-h: 110px;
    --mh-tablet-control-size: clamp(48px, 7vw, 56px);
  }

  .modern-header .mh-header-container,
  .modern-header.is-compact .mh-header-container {
    right: calc(clamp(24px, 4vw, 34px) + 15px);
    left: calc(clamp(24px, 4vw, 34px) + 15px);
    height: 90px;
    padding: 6px 35px;
    border-radius: 35px;
  }

  /* 模糊放在无子元素的材质层，避免改变菜单与搜索的 fixed 定位上下文。 */
  .modern-header .mh-header-container::before,
  .modern-header.is-compact .mh-header-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--mh-mobile-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }

  .modern-header .mh-logo-link {
    height: var(--mh-tablet-control-size);
  }

  .modern-header .mh-logo-img {
    max-width: 96px;
    max-height: clamp(44px, 6vw, 50px);
  }

  .modern-header .mh-menu-toggle,
  .modern-header .mh-action-btn {
    flex: 0 0 var(--mh-tablet-control-size);
    width: var(--mh-tablet-control-size);
    min-width: var(--mh-tablet-control-size);
    height: var(--mh-tablet-control-size);
  }

  .modern-header .mh-action-btn svg {
    width: clamp(30px, 4vw, 34px);
    height: clamp(30px, 4vw, 34px);
  }

  .modern-header .mh-menu-toggle__bar {
    width: clamp(30px, 4vw, 34px);
    height: 3px;
  }
}

/* 手机竖屏收紧 Logo 与操作区，避免顶部控件压住首屏主体。 */
@media (max-width: 599px) {
  /* 手机玻璃岛加高 15px，根预留和 Header 作用域必须同步。 */
  :root {
    --mh-header-h: 85px;
    --mob-head-hd-offset: 85px;
  }

  .modern-header {
    --mh-header-h: 85px;
  }

  .modern-header .mh-header-container,
  .modern-header.is-compact .mh-header-container {
    height: 65px;
    border-radius: 32px;
    background: var(--mh-mobile-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }

  .modern-header .mh-logo-img {
    transform: translateX(10px) scale(1.6);
  }

  .modern-header .mh-header-actions {
    margin-right: 15px;
  }

  .modern-header .mh-menu-toggle,
  .modern-header .mh-action-btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .modern-header .mh-menu-toggle__bar,
  .modern-header .mh-action-btn svg {
    width: 18px;
  }

  .modern-header .mh-action-btn svg {
    height: 18px;
  }
}

/* 系统暗黑与手动暗黑保持互补，移动玻璃材质只通过同一组变量消费。 */
@media (max-width: 833px) and (prefers-color-scheme: dark) {
  html:not(.husir-light) .modern-header {
    --mh-mobile-glass: rgba(24, 24, 26, 0.44);
    --mh-mobile-glass-panel: rgba(52, 45, 39, 0.88);
    --mh-mobile-glass-control: rgba(58, 58, 62, 0.58);
    --mh-mobile-glass-border: rgba(255, 255, 255, 0.16);
    --mh-mobile-glass-line: rgba(255, 255, 255, 0.13);
    --mh-mobile-glass-shadow:
      0 1px 0 rgba(255, 255, 255, 0.1) inset,
      0 12px 34px rgba(0, 0, 0, 0.34);
    --mh-mobile-panel-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 20px 54px rgba(0, 0, 0, 0.48);
  }

  /* dark-mode-core.css 的全站暗黑基线具体性更高，会重新给手机 Header 外壳
     铺整条底色和分隔阴影；此处只清空外壳，内部玻璃岛仍消费上方变量。 */
  html:not(.husir-light) .modern-header,
  html:not(.husir-light) .modern-header.is-compact,
  html:not(.husir-light) .modern-header.is-scrolled,
  html:not(.husir-light) .modern-header.is-compact.is-scrolled {
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 833px) {
  html.husir-dark .modern-header {
    --mh-mobile-glass: rgba(24, 24, 26, 0.44);
    --mh-mobile-glass-panel: rgba(52, 45, 39, 0.88);
    --mh-mobile-glass-control: rgba(58, 58, 62, 0.58);
    --mh-mobile-glass-border: rgba(255, 255, 255, 0.16);
    --mh-mobile-glass-line: rgba(255, 255, 255, 0.13);
    --mh-mobile-glass-shadow:
      0 1px 0 rgba(255, 255, 255, 0.1) inset,
      0 12px 34px rgba(0, 0, 0, 0.34);
    --mh-mobile-panel-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 20px 54px rgba(0, 0, 0, 0.48);
  }

  html.husir-dark .modern-header,
  html.husir-dark .modern-header.is-compact,
  html.husir-dark .modern-header.is-scrolled,
  html.husir-dark .modern-header.is-compact.is-scrolled {
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 833px) and (prefers-reduced-motion: reduce) {
  .modern-header .mh-header-nav,
  .modern-header .mh-menu-toggle,
  .modern-header .mh-action-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* Dock 样式只在紧凑媒体条件下加载，桌面同步隐藏 Dock 与独立 Cookie 入口。 */
.mob-bottom-nav,
.mob-consent-manage {
  display: none;
}