/* ==================== Sphinx Tabs 整体样式 ==================== */
/* 1. Tab容器：边框+留白+圆角+响应式基础 */
.sphinx-tabs {
  /* 基础分隔样式 */
  border-top: 1px solid #e0e0e0; 
  border-bottom: 1px solid #e0e0e0; 
  border-left: 1px solid #e0e0e0; 
  border-right: 1px solid #e0e0e0; 
  margin: 1em 0; /* 上下留白，与前后文本区隔开 */
  /* 圆角样式 */
  border-radius: 8px 8px 0 0; 
  overflow: hidden; 
  /* 响应式基础 
  display: flex;
  flex-direction: column;*/
}

/* 2. Tab标签按钮：基础样式+悬浮交互 */
.sphinx-tabs-tab {
  /* 基础布局 */
  padding: 8px 16px;
  margin: 0 2px; /* 按钮间留缝隙，避免拥挤 */
  /* 字体样式 */
  font-size: 15px;
  font-weight: 500;
  /* 视觉样式 */
  border: none;
  border-bottom: 2px solid transparent; /* 初始下划线透明 */
  border-radius: 6px 6px 0 0; /* 顶部圆角，与容器呼应 */
  background-color: #f8f9fa; /* Tab栏背景色，区分内容区 */
  /* 交互样式 */
  cursor: pointer;
  transition: all 0.2s ease; /* 统一过渡动画，更流畅 */
}

/* 3. Tab标签：悬浮效果（未选中状态） */
.sphinx-tabs-tab:not([aria-selected="true"]):hover {
  color: #007bff; /* 悬浮时文字变蓝 */
  background-color: #f0f7ff; /* 悬浮时背景浅蓝，增强反馈 */
}

/* 4. Tab标签：选中态强化（加粗+放大+小三角） */
.sphinx-tabs-tab[aria-selected="true"] {
  font-weight: 600;
  font-size: 15.5px; /* 比未选中大0.5px，突出焦点 */
  color: #007bff; /* 选中态文字蓝 */
  background-color: #ffffff; /* 选中Tab背景白色，对比更明显 */
  position: relative; /* 为小三角定位做准备 */
}

/* 5. 选中Tab：底部小三角装饰 */
.sphinx-tabs-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -2px; /* 对齐下划线位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #007bff; /* 与主题蓝一致 */
}

/* 6. Tab标签：系统图标装饰 */
/* MacOS & Linux Tab 图标 */
.sphinx-tabs-tab[aria-label="MacOS & Linux"]::before {
  content: "🖥️";
  margin-right: 4px;
}
/* Windows Tab 图标 */
.sphinx-tabs-tab[aria-label="Windows"]::before {
  content: "🪟";
  margin-right: 4px;
}

/* 7. Tab内容区：内边距+阴影，增强层级 */
.sphinx-tabs-panel {
  padding: 1.5em;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 轻微阴影，区分内容区和Tab栏 */
}

/* 8. 响应式适配：小屏幕自动换行 */
@media (max-width: 768px) {
  .sphinx-tabs > ul {
    flex-wrap: wrap; /* 小屏幕下Tab标签自动换行 */
  }
  .sphinx-tabs-tab {
    flex: 1 1 auto; /* 换行后Tab自动占满宽度，避免挤压 */
    min-width: 120px; /* 保证最小宽度，避免文字折行 */
    text-align: center; /* 居中显示，更美观 */
  }
}