/* 全局样式重置 & 基础布局：统一盒模型、清除默认边距，设置页面整体边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 盒模型：宽高包含内边距和边框 */
}
body {
  padding-top: 150px; /* 顶部留白：适配顶部导航栏高度 */
  padding-bottom: 80px; /* 底部留白：适配底部导航栏高度 */
  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: 150px; /* 向下偏移：匹配body顶部留白，对齐右侧内容 */
  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;
}
/* 一级菜单：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;
}
/* 二级菜单：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; /* 弹性布局：占满容器剩余宽度 */
  padding: 150px 5%; /* 内边距：上下左右150，保证内容留白 */
  background: #fff;
  height: 100%;
  min-height: 1200px !important;  /* 👈 关键：最小高度 = 屏幕高度 */
  padding-bottom: 30px;          /* 底部留点空白更美观 */
}
/* 内容区加载状态：居中显示，基础文字样式 */
.loading {
  text-align: center; /* 文字水平居中 */
  padding: 50px; /* 内边距：保证加载提示区域大小 */
  color: #333; /* 文字颜色：浅灰色，不刺眼 */
  font-size: 16px; /* 字号：常规阅读大小 */
}
/* 移动端适配：屏幕宽度≤768px时生效，改为垂直布局 */
@media (max-width: 768px) {
  .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: 150px; /* 保留顶部留白：适配移动端顶部导航 */
  }
  /* 移动端菜单按钮：固定在右下角，悬浮按钮样式 */
  .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 .table-container {
  width: 100%;
  overflow-x: auto;
  margin: 10px 0;
  -webkit-overflow-scrolling: touch;
}
.api-doc .dataintable {
  width: 100%;
  min-width: 600px;
  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;
}
.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 {
  color: #000080
}