/* ============================================================
   ZINRO 公共导航样式（抽离自 about.html 原生导航）
   独立成文件，所有页面通过 <link> 引入，file:// 双击打开也能加载
   严格按用户要求：
   .pc-menu 默认 display:flex；媒体查询以 834px 分界
   >834px（min-width:835px）：展示PC导航、隐藏汉堡
   ≤834px（max-width:834px）：隐藏PC导航、显示汉堡
   ============================================================ */

html{ 
  scroll-behavior:smooth;
  font-family: -apple-system, BlinkMacSystemFont, "HarmonyOS Sans SC", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}
/* ---------- 导航基础 ---------- */
header.nav-bar{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:999;
  background-color:rgba(255,255,255,0.36);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  transform:translateZ(0);
  border-bottom:1px solid rgba(0,0,0,0.08);
  transition: background-color 0.3s ease;
}
header.nav-bar.scrolled{
  background-color:rgba(255,255,255,0.36);
}

.logo{
  display:flex;
  align-items:center;
  height:100%;
  text-decoration:none;
  flex-shrink:0;
}
.logo-text{
  font-size:19px;
  font-weight:500;
  letter-spacing:-0.5px;
  color:#5a5a5a;
}

.nav-wrap{
  width:100%;
  height:50px;
  margin:0 auto;
  padding:0 16px;
}
.nav-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
}

/* ---------- 中英文切换按钮（全套样式，与 about.html 一致） ---------- */
.lang-btn{
  font-size:12px;
  background:none;
  border:1px solid #aaa;
  border-radius:3px;
  padding:2px 5px;
  cursor:pointer;
  color:#1d1d1f;
  margin-left:8px;
  font-family:inherit;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.lang-btn:hover{ background:#eee; border-color:#888; }
.lang-btn:active{ background:#ddd; opacity:0.8; }

/* ---------- 搜索覆盖层 ---------- */
.search-overlay{
  position:fixed;
  top:50px; left:0;
  width:100%;
  background-color:rgba(255,255,255,0.36);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:none;
  z-index:998 !important;
  padding:28px 16px;
  display:none;
  max-height:calc(100vh - 50px);
  overflow-y:auto;
}
.search-overlay.open{ display:block; }
.search-inner{ max-width:720px; margin:0 auto; }
.search-input-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.search-icon-svg{
  width:17px; height:17px;
  stroke:#1d1d1f; stroke-width:1.5; fill:none;
  opacity:0.75;
  flex-shrink:0;
}
#searchInput{
  all:unset;
  flex:1;
  font-size:17px;
  color:#1d1d1f;
}
#searchInput::placeholder{ color:#86868b; }
.search-result-list{ list-style:none; }
.search-result-item{
  padding:10px 8px;
  border-radius:6px;
  cursor:pointer;
}
.search-result-item:hover{ background:rgba(255,255,255,0.36); }
.search-result-title{ font-size:15px; color:#1d1d1f; }
.search-empty{
  font-size:14px;
  color:#86868b;
  padding:12px 8px;
}

/* ============ 【关键：大屏显示规则 —— 宽度 >834px，即 min-width:835px 】 ============ */
@media(min-width:835px){
  .nav-inner{ justify-content:center; gap:40px; }
  .nav-group{
    display:flex;
    align-items:center;
    gap:40px;
  }
  .mobile-logo,
  .mobile-icons{
    display:none !important;
  }
  /* 大屏：隐藏汉堡按钮 */
  .menu-btn{
    display:none !important;
  }
}

/* ============ 【关键：PC菜单默认 display:flex；绝不写 display:none 隐藏】 ============ */
.pc-menu{
  display:flex;
  height:100%;
  list-style:none;
  align-items:center;
  gap:32px;
}
.pc-menu > li{
  height:100%;
  cursor:pointer;
  display:flex;
  align-items:center;
  position:static;
}
.pc-menu > li::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:40px;
  pointer-events:none;
}
.pc-menu > li > .pc-main-title{
  height:100%;
  display:flex;
  align-items:center;
  color:#1d1d1f;
  text-decoration:none;
  font-size:15px;
  opacity:0.82;
}
.pc-menu > li:hover > .pc-main-title{
  opacity:0.92;
  color:#1d1d1f;
}

/* ---------- PC 下拉面板 ---------- */
.pc-dropdown{
  position:fixed;
  top:50px; left:0;
  width:100%;
  background-color:rgba(255,255,255,0.36);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:none;
  padding:28px 16px;
  display:none;
  z-index:998;
}
.pc-dropdown-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:48px;
  flex-wrap:wrap;
}
.pc-dropdown a{
  display:block;
  padding:8px 14px;
  font-size:14px;
  color:#1d1d1f;
  text-decoration:none;
  white-space:nowrap;
  background:transparent !important;
  outline:none !important;
  box-shadow:none !important;
  transition: opacity 0.22s ease;
}
.pc-dropdown a:hover{ opacity:0.55; background:transparent !important; }
.pc-dropdown a:active{ opacity:0.55; background:transparent !important; }
.pc-dropdown a:focus{ opacity:0.55; background:transparent !important; outline:none !important; box-shadow:none !important; }

/* ---------- 右侧图标区 ---------- */
.nav-icon-wrap{
  display:flex;
  align-items:center;
  gap:22px;
  flex-shrink:0;
  height:100%;
}
.nav-icon{
  cursor:pointer;
  opacity:0.82;
  display:flex;
  align-items:center;
  height:100%;
  position:relative;
}
.nav-icon svg{
  width:20px; height:20px;
  stroke:#1d1d1f; stroke-width:1.5; fill:none;
}

/* ============ 汉堡按钮（仅 ≤834px 显示，大屏靠上面 min-width 隐藏） ============ */
.menu-btn{
  background:none;
  border:none;
  color:#1d1d1f;
  cursor:pointer;
  flex-shrink:0;
  margin:0;
  height:100%;
  box-sizing:border-box;
  display:none;
  justify-content:center;
  align-items:center;
  font-size:30px;
  line-height:1;
  padding:0 4px 2px 4px;
  transform: translateY(-2px);
  font-family:inherit;
}

/* ---------- 移动端 汉堡下拉面板 ---------- */
.mobile-menu-panel{
  position:fixed;
  top:50px; left:0;
  width:100%;
  height:0;
  overflow:hidden;
  background-color:rgba(255,255,255,0.36);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition:height 0.32s ease-out;
  z-index:997;
}
.mobile-menu-panel.open{ height:calc(100vh - 50px); }
.mobile-inner{
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px 24px;
}
.mobile-menu-list{ list-style:none; }
.mobile-menu-item{ border-bottom:1.5px solid rgba(0,0,0,0.36); }
.mobile-menu-btn{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  font-size:18px;
  padding:14px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#1d1d1f;
  cursor:pointer;
  font-family:inherit;
}
.mobile-arrow{
  font-size:16px;
  transition:transform 0.2s;
}
.mobile-arrow.rotate{ transform:rotate(180deg); }
.mobile-sub{
  height:0;
  overflow:hidden;
  transition:height 0.25s ease;
}
.mobile-sub-inner{ padding:2px 0 14px 16px; }
.mobile-sub-inner a{
  display:block;
  font-size:16px;
  color:#1d1d1f;
  text-decoration:none;
  padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.mobile-sub-inner a.mobile-parent-link{
  font-size:16px;
  color:#1d1d1f;
  text-decoration:none;
  padding:11px 0 9px 0;
  border-bottom:1px solid rgba(0,0,0,0.36);
}

/* ============ 【关键：移动端适配 —— 宽度 ≤ 834px max-width:834px】 ============ */
@media(max-width:834px){
  .nav-inner{ justify-content:space-between !important; }
  .nav-group{ display:none !important; }
  /* 小屏：隐藏PC导航 */
  .pc-menu{ display:none !important; }
  .mobile-logo,
  .mobile-icons{ display:flex !important; }
  /* 小屏：显示汉堡按钮 */
  .menu-btn{ display:flex !important; }
  .nav-icon-wrap{
    height:100%;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .nav-icon-wrap svg{ width:22px; height:22px; }
  .lang-btn{ margin-left:4px; }
}