/* ============================================================
   探索号 · 移动端抽屉菜单（共享组件）
   由 mobile-nav.js 自动注入，页面无需编写任何 HTML。
   状态类挂在 <html> 上：
     html.mnav-on    当前处于移动断点，显示汉堡按钮
     html.mnav-open  抽屉处于打开状态
   断点由引用处的 <script src="..." data-bp="720"> 控制，默认 760。
   ============================================================ */

/* --- 汉堡按钮 --- */
.mnav-btn {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid rgba(127, 127, 127, .28);
  border-radius: 9px;
  background: #fff;
  color: #1f2329;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mnav-btn:hover { border-color: rgba(127, 127, 127, .55); }
.mnav-btn:active { background: #f3f4f6; }
html.mnav-on .mnav-btn { display: inline-flex; }
.mnav-btn svg { width: 20px; height: 20px; display: block; }

/* --- 遮罩 --- */
.mnav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(15, 23, 42, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
html.mnav-open .mnav-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

/* --- 抽屉面板 --- */
.mnav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: min(82vw, 330px);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -10px 0 36px rgba(0, 0, 0, .16);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s;
}
html.mnav-open .mnav-panel {
  transform: none;
  visibility: visible;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

/* 打开时锁定页面滚动 */
html.mnav-lock, html.mnav-lock body { overflow: hidden; }

/* --- 面板头部 --- */
.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 13px 20px;
  border-bottom: 1px solid #e5e7eb;
  flex: 0 0 auto;
}
.mnav-title {
  font-weight: 700;
  font-size: 15px;
  color: #1f2329;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mnav-close {
  appearance: none;
  width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(127, 127, 127, .28);
  border-radius: 9px;
  background: #fff;
  color: #1f2329;
  cursor: pointer;
}
.mnav-close svg { width: 18px; height: 18px; display: block; }

/* --- 链接列表 --- */
.mnav-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
}
.mnav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  border-radius: 10px;
  font-size: 15px;
  color: #1f2329;
  transition: background .15s;
}
.mnav-list a:hover { background: #f3f4f6; }
.mnav-list a:active { background: #eef1f5; }
.mnav-list a.mnav-cur {
  color: var(--mnav-accent, #2563eb);
  background: var(--mnav-accent-soft, #eff6ff);
  font-weight: 700;
}

/* --- 底部主操作 --- */
.mnav-foot {
  flex: 0 0 auto;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e5e7eb;
}
.mnav-foot a {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: #1f2329;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.mnav-foot a:active { opacity: .88; }

/* ============================================================
   各站点顶部栏在移动端的小屏适配（与抽屉按钮共存不溢出）
   ============================================================ */

/* 主站 / 商户管理站：.site-nav（品牌 + 语言 + CTA + 汉堡） */
@media (max-width: 480px) {
  .site-nav .brand { font-size: 15px; white-space: nowrap; }
}
/* 极窄屏隐藏顶栏 CTA（抽屉底部承接同名按钮），避免顶栏溢出换行 */
@media (max-width: 420px) {
  .site-nav .nav-cta { display: none; }
}

/* 个人套件站：.topbar（小屏隐藏 CTA，抽屉底部承接） */
@media (max-width: 560px) {
  .topbar nav a.cta { display: none; }
  .topbar .brand span { font-size: .95rem; }
}

/* AI 办公站：.nav（小屏隐藏「在线使用」按钮，抽屉底部承接，避免顶栏溢出） */
@media (max-width: 640px) {
  .nav .nav-inner { gap: 14px; }
  .nav .nav-cta a.btn { display: none; }
  .nav .logo { font-size: 19px; }
  .nav .lang .lang-i { padding: 3px 9px; }
}
/* 菜单链接隐藏后靠 space-between 把语言胶囊与汉堡按钮推到右侧 */
@media (max-width: 900px) {
  .nav .nav-inner { justify-content: space-between; }
}