/* 修复布局和功能的额外样式 */

/* 确保代码块按钮可点击 */
.code-block {
  position: relative !important;
}

.code-copy-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.code-copy-btn:hover {
  color: #409EFF !important;
  border-color: #409EFF !important;
}

/* 响应式布局修复 */
@media (max-width: 768px) {
  .container {
    padding: 0 16px !important;
  }
  
  /* 导航栏响应式 */
  .navbar ul {
    gap: 16px !important;
    font-size: 13px !important;
  }
  
  /* Banner 标题响应式 */
  h1 {
    font-size: 32px !important;
  }
  
  /* 页面标题响应式 */
  section > .container > h1 {
    font-size: 32px !important;
  }
  
  /* 3步快速上手响应式 */
  section > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* 统计数据响应式 */
  section > .container > div[style*="grid-template-columns: repeat"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* 核心特性网格响应式 */
  section > .container > div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  
  /* 代码示例网格响应式 */
  section > .container > div[style*="grid-template-columns: repeat(auto-fit, minmax(350px"] {
    grid-template-columns: 1fr !important;
  }
  
  /* 文档页面布局响应式 */
  .docs-layout {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  
  .docs-sidebar {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 24px !important;
    max-height: none !important;
  }
  
  .docs-content {
    padding: 24px !important;
  }
  
  .docs-content h2 {
    font-size: 24px !important;
  }
  
  .docs-content h3 {
    font-size: 20px !important;
  }
  
  /* 对比表格响应式 */
  table {
    font-size: 12px !important;
  }
  
  th, td {
    padding: 8px !important;
  }
  
  /* 按钮响应式 */
  .btn-primary,
  .btn-secondary,
  a.btn-primary,
  a.btn-secondary {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
  
  /* Banner 区域响应式 */
  section[style*="padding: 120px"] {
    padding: 60px 0 40px !important;
  }
  
  /* 代码块响应式 */
  .code-block {
    font-size: 12px !important;
    padding: 12px !important;
  }
  
  .code-copy-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  
  /* 表格响应式 */
  .xai-table,
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* 导航栏响应式 */
  .navbar {
    padding: 12px 0 !important;
  }
  
  .navbar .container > div {
    flex-wrap: wrap !important;
  }
  
  .navbar ul {
    margin-top: 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* 确保代码块内容可滚动 */
.code-block pre {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* 修复按钮 hover 效果 */
.btn-primary:hover,
a.btn-primary:hover {
  background-color: #409EFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.btn-secondary:hover,
a.btn-secondary:hover {
  border-color: #409EFF !important;
  color: #409EFF !important;
  transform: translateY(-2px) !important;
}

/* 核心特性图标容器 hover 效果 */
section .container > div[style*="grid-template-columns"] > div:hover > div[style*="border-radius: 50%"] {
  background-color: #EEEEEE !important;
  border-color: #DDDDDD !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

section .container > div[style*="grid-template-columns"] > div:hover > div[style*="border-radius: 50%"] svg {
  transform: scale(1.1) !important;
  transition: transform 0.3s ease !important;
}