/* 全局样式重置 & 基础布局：统一盒模型、清除默认边距，设置页面整体边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 盒模型：宽高包含内边距和边框 */
}
body {
  padding-top: 150px; /* 顶部留白：适配固定定位的顶部导航栏 */
  min-height: 100vh; /* 最小高度：占满视口高度，防止内容不足时布局塌陷 */
  background: #FFFFFF !important;
  font-family: sans-serif;
  line-height: 1.6;
  font-size: 14px;
}
/* 页面核心容器：左侧侧边栏 + 右侧内容区 横向布局 */
.app-container {
  display: flex; /* 弹性布局：实现左右并排 */
  width: 100%;
  min-height: calc(100vh);
  margin: 0 auto; /* 水平居中 */
}
/* 左侧侧边栏外层容器：固定宽度，防止被挤压 */
.sidebar-wrapper {
  width: 250px; /* 侧边栏固定宽度 */
  background: #FFF;
  min-height: 100vh;
  flex-shrink: 0; /* 弹性布局：不收缩，保持固定宽度 */
  position: relative;
}
/* 左侧侧边栏主体：与外层容器同宽，定位适配顶部留白 */
.sidebar {
  width: 250px;
  color: #181920; /* 文字基础颜色 */
  position: relative;
  top: 0; /* 顶部留白已由 body 的 padding-top:150px 统一处理，避免双重留白 */
  left: 0;
  height: 100%;
  flex-shrink: 0;
  background: #e9e9e9; /* PC端默认背景色，大屏会被外层容器覆盖 */
}
/* 通用过渡效果：所有菜单/箭头的hover/展开动画，统一过渡时长和曲线 */
.nav-item, .sub-item, .sub-third-item, .nav-arrow {
  transition: all 0.2s ease; /* 过渡：所有属性，0.2秒，缓动曲线（更自然） */
}
/* 一级菜单样式：基础导航项，带左侧激活边框 */
.nav-item {
  padding: 12px 20px; /* 内边距：上下15/左右20，保证点击区域 */
  cursor: pointer; /* 鼠标样式：手型，标识可点击 */
  border-left: 4px solid transparent; /* 左侧边框：默认透明，激活时显色 */
  background: #f3f3f3;
  display: flex; /* 弹性布局：文字左对齐，箭头右对齐 */
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
}
/* 一级菜单：hover悬浮状态 */
.nav-item:hover {
  background: #e9e9e9;
}
/* 外部跳出链接（新标签页打开）：整行可点，撑满宽度 */
.nav-item-external {
  cursor: default;
}
.nav-item-external > a {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.nav-item-external:hover {
  background: #e9e9e9;
}
/* 一级菜单：active激活状态（当前选中） */
.nav-item.active {
  background: #dbdbdb;
  border-left-color: #a6a6a6; /* 左侧激活边框颜色：灰色标识选中 */
}
/* 菜单箭头：一级/二级菜单展开/折叠标识 */
.nav-arrow {
  font-size: 12px; /* 箭头字号：小巧不突兀 */
}
/* 箭头：open展开状态，顺时针旋转90度 */
.nav-arrow.open {
  transform: rotate(90deg);
}
/* 二级菜单容器：默认隐藏，展开时显示，带左侧边框缩进 */
.submenu {
  display: none; /* 默认隐藏 */
  background: #ffffff;
  border-left: 2px solid #dbdbdb; /* 左侧边框：缩进标识层级，与一级激活边框呼应 */
}
/* 二级菜单容器：open展开状态 */
.submenu.open {
  display: block;
}
/* 二级菜单项：比一级菜单缩进，字号更小，同布局逻辑 */
.sub-item {
  padding: 8px 30px; /* 内边距：上下12/左右25，比一级缩进5px */
  cursor: pointer;
  background: #fbfbfb;
  font-size: 14px; /* 字号：14px，比一级小1px，区分层级 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 二级菜单：hover悬浮状态 */
.sub-item:hover {
  background: #e9e9e9;
}
/* 二级菜单：外部跳出链接（新标签页打开）：整行可点，撑满宽度 */
.sub-item-external {
  cursor: default;
}
.sub-item-external > a {
  display: block;
  width: 100%;
  color: #333;
  text-decoration: none;
}
.sub-item-external:hover {
  background: #e9e9e9;
}
/* 二级菜单：active激活状态 */
.sub-item.active {
  background: #dbdbdb;
  color: #000; /* 文字加深：强化选中状态 */
}
/* 三级菜单容器：默认隐藏，比二级再缩进，边框颜色更浅 */
.submenu-third {
  display: none; /* 默认隐藏 */
  background: #fafafa; /* 背景色：比二级更浅，区分层级 */
  border-left: 2px solid #e0e0e0; /* 左侧边框：颜色更浅，进一步缩进标识层级 */
}
/* 三级菜单容器：open展开状态 */
.submenu-third.open {
  display: block;
}
/* 三级菜单项：最细缩进，最小字号，无右侧箭头 */
.sub-third-item {
  padding: 8px 35px; /* 内边距：上下10/左右35，比二级再缩进10px */
  cursor: pointer;
  font-size: 13px; /* 字号：13px，最小，区分最底层级 */
}
/* 三级菜单：hover悬浮状态 */
.sub-third-item:hover {
  background: #eaeaea;
}
/* 三级菜单：active激活状态 */
.sub-third-item.active {
  background: #d5d5d5; /* 背景色：比二级激活色稍深，强化选中 */
}
/* 右侧主内容区：弹性占满剩余宽度，基础样式 */
.main-content {
  flex: 1; /* 弹性布局：占满容器剩余宽度 */
  min-width: 0; /* 关键：允许 flex 项收缩到小于内容宽度，否则宽表格会撑破布局 */
  padding: 0 5% 30px; /* 顶部留白统一由 body 的 padding-top:150px 提供（离导航栏150px），此处不再叠加 */
  background: #fff;
  height: 100%;
  min-height: 1200px !important;  /* 最小高度 = 屏幕高度 */
}
/* 内容区加载状态：居中显示，基础文字样式 */
.loading {
  text-align: center; /* 文字水平居中 */
  padding: 50px; /* 内边距：保证加载提示区域大小 */
  color: #333; /* 文字颜色：浅灰色，不刺眼 */
  font-size: 16px; /* 字号：常规阅读大小 */
}
/* 移动端适配：屏幕宽度≤768px时生效，改为垂直布局 */
@media (max-width: 768px) {
  body {
    padding-top: 70px; /* 移动端顶部留白缩小：适配较矮的移动端导航栏 */
  }
  .app-container {
    flex-direction: column; /* 弹性布局：改为上下垂直布局 */
  }
  .sidebar-wrapper {
    width: 100%; /* 占满屏幕宽度 */
    background: transparent; /* 透明背景：显示侧边栏主体背景 */
    min-height: auto; /* 高度自适应：跟随内容 */
  }
  .sidebar {
    width: 100%; /* 占满屏幕宽度 */
    height: auto; /* 高度自适应 */
    display: none; /* 默认隐藏：点击菜单按钮展开 */
    background: #cccccc; /* 移动端侧边栏背景色：加深，区分主内容 */
    top: 0; /* 重置偏移：移动端无顶部对齐需求 */
  }
  /* 移动端侧边栏：open展开状态 */
  .sidebar.open {
    display: block;
  }
  .main-content {
    width: 100%; /* 占满屏幕宽度 */
    padding: 20px; /* 重置内边距：移动端减小留白，适配小屏 */
    padding-top: 10px; /* 移动端顶部留白：body已提供70px，此处仅需小间距 */
  }
  /* 移动端菜单按钮：固定在右下角，悬浮按钮样式 */
  .menu-btn {
    display: block;
    position: fixed; /* 固定定位：随页面滚动不偏移 */
    bottom: 95px; /* 距底部：避开底部导航栏 */
    right: 15px; /* 距右侧：15px边距 */
    width: 56px; /* 按钮宽高：正方形 */
    height: 56px;
    border-radius: 50%; /* 圆角：圆形按钮 */
    background: #F27323; /* 按钮背景色：橙色，醒目 */
    color: white; /* 按钮文字/图标颜色：白色 */
    border: none; /* 清除默认边框 */
    font-size: 24px; /* 图标字号：保证箭头/叉号清晰 */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 阴影：增加立体感，区分页面 */
    z-index: 1000; /* 层级：最高，防止被其他元素遮挡 */
  }
  /* 移动端接口文档样式适配 */
  .api-doc .dataintable {
    min-width: 100%;
  }
}
/* 大屏适配：屏幕宽度≥769px时生效，隐藏移动端菜单按钮 */
@media (min-width: 769px) {
  .menu-btn {
    display: none; /* 隐藏移动端菜单按钮 */
  }
  .sidebar {
    background: transparent; /* 透明背景：显示外层容器的白色背景 */
  }
}
/* 一键返回顶部 */
#backToTop {
  position: fixed;
  bottom: 200px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #F27323;
  color: #fff;
  font-size: 30px;
  border: none;
  cursor: pointer;
  display: none; /* 默认隐藏 */
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
#backToTop:hover {
  background: #F0f0f0;
  color: #000;
}

/* ---------------------- 接口文档专属样式（做隔离，不污染原有布局） ---------------------- */
.api-doc h2 {
  font-size: 18px;
  margin: 15px 0 10px;
  color: #2c3e50;
}
.api-doc h3 {
  font-size: 16px;
  margin: 12px 0 8px;
  color: #34495e;
}
.api-doc p {
  margin: 8px 0;
  color: #333;
}
.api-doc ul,
.api-doc ol {
  padding-left: 1.2em;
  margin: 8px 0;
  list-style: none;
}
.api-doc li {
  position: relative;
}
.api-doc .table-container {
  width: 100%;
  overflow-x: auto;
  margin: 10px 0;
  -webkit-overflow-scrolling: touch;
}
/* 图片约束：限制在容器宽度内，防止流程图等大图撑破页面 */
.api-doc img {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  display: block;
}

/* 密钥工具页：图片按系统tab切换显示/隐藏。
   必须覆盖上面的 .api-doc img{display:block}（两者特异性相同，本规则在更后位置且特异性更高），
   否则 img[data-os] 的 display:none 默认隐藏会被覆盖，导致三张图始终同时显示、data-os 失效。 */
.api-doc img[data-os] {
  display: none !important;
}
.api-doc img[data-os].show {
  display: inline-block !important;
}

/* 移动端支付等：同一个 <li> 内的多张手机截图并列展示（一行排开，超出自动换行） */
.api-doc li:has(img) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.api-doc li:has(img) img {
  display: inline-block;
  max-height: 450px;
  max-width: 100%;
  width: auto;
  margin: 0;
}

.api-doc .dataintable {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.api-doc .dataintable th, .api-doc .dataintable td {
  padding: 8px 6px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 13px;
  color: #333 !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.api-doc .dataintable th {
  background-color: #e0e0e0;
  font-weight: bold;
  color: #222 !important;
}
.api-doc .code-wrap {
  width: 100%;
  overflow: hidden;
  margin: 10px 0;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f8f8f8;
  cursor: pointer;
}
.api-doc .code-header {
  padding: 8px 12px;
  background-color: #e0e0e0;
  font-weight: bold;
  font-size: 13px;
  color: #222 !important;
  margin: 0;
  border-bottom: none;
}
.api-doc .code-header-static {
  padding: 8px 12px;
  background-color: #e0e0e0;
  font-weight: bold;
  font-size: 13px;
  color: #222 !important;
  margin: 0;
  border-bottom: none;
}
.api-doc .code-content {
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  /* max-height: 500px; */
  overflow: auto;
  transition: max-height 0.3s ease;
  margin: 0 !important;
  border-top: 0;
  background: #f8f8f8;
  line-height: 1.5;
}
.api-doc .code-content.collapsed {
  max-height: 80px;
  overflow: hidden;
}
.api-doc .code-header::before {
  content: "▼ ";
  font-size: 12px;
}
.api-doc .code-header.collapsed::before {
  content: "▶ ";
}
.api-doc .code-content.collapsed::after {
  display: block;
  padding: 5px 0;
  color: #333;
  background: linear-gradient(to top, #f8f8f8 80%, transparent);
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
}
.api-doc .Tips {
  color: #e74c3c;
  font-size: 13px;
  margin: 10px 0;
}
.api-doc a,
.api-doc .dataintable a {
  color: #1d6fd6; /* 蓝色链接：DEMO/下载按钮 */
  text-decoration: none;
}
.api-doc a:hover,
.api-doc .dataintable a:hover {
  text-decoration: underline;
}

/* 表格行按系统tab切换显示/隐藏，默认隐藏由 switchTab() 控制 */
.os-row[data-os] {
  display: none;
}