/* 🌗 全局主题变量 */
:root {
  --bg: #0a0d12;
  --text: #eaeaea;
  --primary: #00eaff;
  --secondary: #0078ff;
  --card-bg: rgba(255,255,255,0.05);
  --footer-bg: rgba(10,13,18,0.9);
  --link-color: var(--primary);
  --nav-bg: rgba(10,13,18,0.7);
  --border-color: rgba(0,234,255,0.1);
  --highlighter-rouge:rgba(0,0,0,0.8);
}

/* 🌞 亮色主题变量 */
[data-theme='light'] {
  --bg: #f4f7fa;
  --text: #1a1a1a;
  --primary: #0078ff;
  --secondary: #00bfff;
  --card-bg: rgba(255,255,255,0.85);
  --footer-bg: rgba(240,243,248,0.9);
  --link-color: #0078ff;
  --nav-bg: rgba(255,255,255,0.75);
  --border-color: rgba(0,0,0,0.08);
  --highlighter-rouge:#f2f5fa;
}

/* =========================
   🌍 全局样式
   ========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
  font: 16px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}

/* =========================
   🧭 顶部导航栏
   ========================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
  transition: background 0.3s ease, border-color 0.3s ease;
}

header.scrolled {
  box-shadow: 0 2px 10px rgba(0, 234, 255, 0.1);
}

[data-theme='dark'] p.tips {
  color: var(--primary); /* 深色模式稍微亮一点 */
}
.tips-text-17 {
  font-size: 17px;
  color: var(--text); /* 比较通用的红 */
  font-weight: 600;
}
.tips-17 {
  font-size: 20px;
  color: var(--primary); /* 比较通用的红 */
  font-weight: 600;
}
.tips-14 {
  font-size: 14px;
  color: var(--primary); /* 比较通用的红 */
  font-weight: 600;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 60px;
  max-width: 1300px;
  margin: 0 auto;
}

.logo {
  display: inline-block;
  font-weight: 700;
  font-size: 1.4rem;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  transition: color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

nav a:hover {
  color: var(--primary);
}

nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--primary);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

nav a, .logo {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 包裹菜单链接的容器 */
nav .nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 汉堡按钮默认只在移动端显示，PC 隐藏 */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 1.1rem;
  color: var(--text);
  cursor: pointer;
}
.menu-toggle:focus,
.menu-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 🌗 主题切换按钮 */
.theme-toggle {
  cursor: pointer;
  font-size: 1.2rem;
  background: none;
  border: none;
  color: var(--text);
  transition: color 0.3s;
  margin-left: 20px;
}
.theme-toggle:hover {
  color: var(--primary);
}

/* =========================
   🖼️ 轮播区 Swiper
   ========================= */
.swiper {
  width: 100%;
  height: 90vh;
  margin-top: 70px;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, #00121a, #000);
  color: white;
  overflow: hidden;
  transition: background 0.5s ease;
}
[data-theme='light'] .swiper-slide {
  background: radial-gradient(circle at 50% 30%, #dfe9f3, #a8c0ff);
  color: #111;
}

.swiper-slide h2 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.swiper-slide p {
  color: var(--text);
  font-size: 1.1rem;
  max-width: 600px;
  line-height: 1.6;
  opacity: 0.85;
}

/* =========================
   📄 主内容区
   ========================= */
main {
  max-width: 1200px;
  margin: 100px auto;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.5s ease, color 0.5s ease;
}

h2 {
  color: var(--primary);
  border-left: 3px solid var(--primary);
  padding-left: 10px;
  margin-top: 40px;
}

/* =========================
   🧱 卡片与特性区
   ========================= */
section {
  max-width: 1100px;
  margin: 120px auto;
  text-align: center;
  padding: 0 30px;
}
section h2 {
  font-size: 2rem;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}
section p {
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.8;
  opacity: 0.85;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 60px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 300px;
  padding: 30px;
  transition: 0.4s;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: 0 0 25px rgba(0, 234, 255, 0.2);
}
.card h3 {
  color: var(--primary);
  margin-bottom: 15px;
}

/* =========================
   💻 代码块 (pre)
   ========================= */
pre {
  background: rgba(0,0,0,0.8);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  color: var(--primary);
  margin-top: 30px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
  transition: background 0.5s ease, color 0.5s ease;
}
[data-theme='light'] pre {
  background: #f2f5fa;
  color: #0050a0;
}

/* 🌿 基础分割线 */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border-color);
  margin: 40px 0;
  opacity: 0.6;
}
/* ✨ 渐变分割线 */
.divider-gradient {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border: none;
  border-radius: 1px;
  margin: 50px 0;
  opacity: 0.9;
}
/* 🧭 带标题的分割线 */
.divider-title {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 60px 0 40px;
  color: var(--text);
  opacity: 0.85;
  font-weight: 600;
  letter-spacing: 1px;
}
.divider-title::before,
.divider-title::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  margin: 0 10px;
}
/* ⚡ 发光分割线 */
.divider-glow {
  width: 100%;
  height: 2px;
  border: none;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  margin: 50px 0;
  border-radius: 1px;
  opacity: 0.8;
}

/* =========================
    API 手册分类块样式
   ========================= */

/* 每个分类模块整体容器 */
main h2 {
  margin-top: 60px;
  margin-bottom: 20px;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
}

/* 分类下的列表区域 */
main ul {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  border-left: 3px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 8px;
  padding: 15px 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.3s ease, border-color 0.3s ease;
}
[data-theme='light'] main ul {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 每个列表项 */
main ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.7;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition: color 0.3s ease, transform 0.2s ease;
}
main ul li:last-child {
  border-bottom: none;
}

/* 条目前的加粗符号或数字 */
main ul li b {
  color: var(--primary);
  min-width: 1.2em;
  text-align: right;
  font-weight: 600;
}

/* 悬停高亮 */
main ul li:hover {
  color: var(--primary);
  transform: translateX(5px);
}

/* 让“常见问题”、“限额说明”一类标题更显眼 */
main h2:nth-of-type(4),
main h2:nth-of-type(5) {
  color: var(--secondary);
  border-left-color: var(--secondary);
}

/* 表格样式微调（增强视觉一致性） */
main table.layui-table {
  margin-top: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
main table.layui-table th,
main table.layui-table td {
  border-color: var(--border-color);
  transition: background 0.3s ease;
}
main table.layui-table tr:hover {
  background: rgba(0,234,255,0.05);
}
[data-theme='light'] main p.api-note {
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

main p {
  background: var(--card-bg);
  padding: 0 0 0 24px;
  border-radius: 6px;
  line-height: 1.7;
  margin: 10px 0;
  transition: background 0.3s ease, border-color 0.3s ease;

  /* ✨ 新增以下三行，让 URL 自动换行 */
  word-break: break-all;        /* 允许在任意字符处断行 */
  overflow-wrap: anywhere;      /* 兼容更好，现代浏览器推荐 */
  white-space: normal;          /* 确保不会被禁止换行 */
}
main .highlighter-rouge {
  display: inline-block;          /* 保持内联感觉但允许多行 */
  border: 1px dashed #c9cdc9;
  padding: 5px 6px;
  background-color: var(--highlighter-rouge);
  border-radius: 5px;
  white-space: pre-wrap;          /* 保留原始空格并自动换行 */
  word-break: break-word;         /* 长单词或URL断行 */
  overflow-wrap: anywhere;        /* 兼容性更好的断行方式 */
  max-width: 100%;                /* 限制宽度不超过屏幕 */
  box-sizing: border-box;
}

[data-theme='light'] main table.layui-table tr:hover {
  background: rgba(0,120,255,0.05);
}
/* =========================
   🦶 页脚
   ========================= */
footer {
  margin-top: 100px;
  text-align: center;
  padding: 40px;
  border-top: 1px solid var(--border-color);
  background: var(--footer-bg);
  color: var(--text);
  transition: background 0.5s ease, color 0.5s ease;
}
footer a {
  color: var(--link-color);
  text-decoration: none;
}

/* =========================
   ✨ 动画
   ========================= */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   📱 移动端 / 平板响应式优化
   ========================= */
@media (max-width: 1024px) {

  /* 🌍 全局布局调整 */
  body {
    font-size: 15px;
    overflow-x: hidden;
  }

  main {
    margin: 80px 10px;
    padding: 15px;
    box-shadow: none;
    border-radius: 8px;
  }

  section {
    margin: 80px 10px;
    padding: 0 10px;
  }

  /* 🧭 导航栏调整 */
  header {
    padding: 8px 0;
  }

  .nav-container {
    flex-direction: column;
    padding: 10px 20px;
    align-items: flex-start;
    gap: 10px;
  }

  .logo {
    font-size: 1.2rem;
  }

  nav {
    flex-wrap: wrap;
    gap: 10px;
  }

  nav a {
    font-size: 0.95rem;
    display: inline-block;
    padding: 5px 8px;
  }

  .theme-toggle {
    font-size: 1.1rem;
    margin-top: 5px;
    margin-left: 0;
  }

  /* 🖼️ Swiper 区域调整 */
  .swiper {
    height: 60vh;
  }
  .swiper-slide h2 {
    font-size: 1.8rem;
  }
  .swiper-slide p {
    font-size: 1rem;
    padding: 0 15px;
  }

  /* 🧱 卡片显示为单列 */
  .features {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .card {
    width: 90%;
    padding: 20px;
  }

  /* 📄 主体文字优化 */
  main h2 {
    font-size: 1.3rem;
    margin-top: 40px;
  }

  main p {
    font-size: 0.95rem;
    padding: 6px 12px;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  /* 🔠 行内代码与代码块 */
  main .highlighter-rouge,
  pre code {
    font-size: 0.9rem;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  pre {
    font-size: 0.9rem;
    padding: 12px;
    line-height: 1.5;
    overflow-x: auto;
  }

  /* 🧾 表格优化 */
  table.layui-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.9rem;
  }

  table.layui-table th,
  table.layui-table td {
    padding: 8px 12px;
  }

  /* 🌿 分割线和页脚 */
  .divider-gradient,
  .divider-glow {
    margin: 30px 0;
  }

  footer {
    font-size: 0.9rem;
    padding: 25px 10px;
  }

}

/* =========================
   📱 超小屏幕 (≤ 600px)
   ========================= */
@media (max-width: 600px) {

  /* 🔝 顶部导航改为纵向布局 */
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 15px;
  }

  nav {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  nav a {
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
  }

  .theme-toggle {
    align-self: flex-end;
    margin-top: 5px;
  }

  /* 📄 内容字体再略缩小 */
  main p, li {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  main ul {
    padding: 10px 15px;
  }

  main ul li {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 🔠 URL与代码保证不溢出 */
  code,
  .highlighter-rouge,
  pre,
  p {
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    max-width: 100%;
  }

  /* 🧱 卡片与标题对齐 */
  .card {
    width: 100%;
  }

  h2 {
    font-size: 1.1rem;
  }

  .tips-17 {
    font-size: 1rem;
  }

  .tips-text-17 {
    font-size: 0.95rem;
  }

  /* 页脚缩小 */
  footer {
    padding: 20px 10px;
    font-size: 0.85rem;
  }
}

/* 📱 768px 以下使用汉堡菜单 */
@media (max-width: 768px) {
  header {
    padding: 6px 0;
  }

  .nav-container {
    padding: 8px 12px;
    max-width: 100%;
  }

  nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 显示汉堡按钮 */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 默认隐藏菜单项，只占一行高度 */
  nav .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    gap: 6px;
    display: none;             /* 关键：初始隐藏 */
    z-index: 99;
  }

  /* 打开菜单时才显示 */
  nav .nav-links.open {
    display: flex;
  }

  nav .nav-links a {
    width: 100%;
    padding: 6px 0;
    font-size: 0.95rem;
  }

  .theme-toggle {
    align-self: flex-end;
    margin-top: 4px;
  }
}

/* =========================
   📌 导航最终修正（请放在文件最后）
   ========================= */

/* 右侧按钮区域：☰ + 🌙 */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 桌面端：保持原来横向菜单，隐藏汉堡按钮 */
@media (min-width: 769px) {
  nav .nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
  }

  .menu-toggle {
    display: none;
  }

  .theme-toggle {
    display: inline-flex;
  }
}

/* 移动端（≤768px）：左 LOGO，右 ☰ + 🌙，菜单下拉 */
@media (max-width: 768px) {
  /* 让头部回到一行：左 logo 右按钮 */
  .nav-container {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px;
  }

  /* nav 独占一行，用来挂下拉菜单 */
  header + nav {
    position: relative;
    width: 100%;
  }

  /* 显示汉堡按钮 */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 1.1rem;
  }

  /* 主题按钮总是在右上角，不进菜单 */
  .theme-toggle {
    display: inline-flex;
    margin-left: 8px;
  }

  /* 下拉菜单样式 */
  nav .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    gap: 6px;
    display: none;           /* 默认隐藏 */
    z-index: 99;
  }

  /* 加上 .open 时显示菜单（由 JS 控制） */
  nav .nav-links.open {
    display: flex;
  }

  nav .nav-links a {
    width: 100%;
    padding: 8px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-color);
  }

  nav .nav-links a:last-child {
    border-bottom: none;
  }
}

/* 超小屏再稍微缩一点字 */
@media (max-width: 480px) {
  .logo {
    font-size: 1.1rem;
  }

  .menu-toggle,
  .theme-toggle {
    font-size: 1rem;
    padding: 5px 8px;
  }
}
/* 桌面端：让菜单和 logo 在同一行显示 */
@media (min-width: 769px) {
  header {
    display: flex;
    flex-direction: column;
  }

  /* 把 nav-links 放回导航栏主行 */
  header > nav {
    position: static;
    width: auto;
  }

  header .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 15px 60px;
  }

  /* PC 端：菜单横排 */
  header nav .nav-links {
    display: flex !important;
    flex-direction: row;
    gap: 20px;
    position: static;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  /* 隐藏汉堡按钮 */
  header .menu-toggle {
    display: none;
  }

  /* 右侧图标紧靠菜单右边 */
  .nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* 主题按钮稍微靠右一点 */
  .theme-toggle {
    margin-left: 15px;
  }
}
/* 桌面端导航布局修正 */
@media (min-width: 769px) {
  header .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 15px 60px;
  }

  .logo a {
    font-size: 1.3rem;
    font-weight: 700;
  }

  .nav-links {
    display: flex !important;
    gap: 25px;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .menu-toggle {
    display: none !important;
  }

  .mobile-menu {
    display: none !important;
  }
}

/* 移动端导航布局修正 */
@media (max-width: 768px) {
  header .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
  }

  .nav-links {
    display: none !important;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* 下拉菜单样式 */
  .mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 20px;
  }

  .mobile-menu.open {
    display: flex;
  }

  .mobile-menu a {
    padding: 10px 0;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-menu a:last-child {
    border-bottom: none;
  }
}
/* 🌍 PC端最终视觉修正版 */
@media (min-width: 769px) {
  /* 顶部导航整体 */
  header {
    display: block; /* 恢复正常块状，不强制 column 布局 */
  }

  /* 内层容器左右分布：LOGO | 菜单 | 右侧按钮 */
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 15px 80px; /* 两边留白多一点 */
  }

  /* LOGO 保持左对齐 */
  .logo {
    font-size: 1.4rem;
  }

  /* 菜单（nav-links）恢复横排、适当间距 */
  .nav-links {
    display: flex !important;
    align-items: center;
    gap: 35px; /* 菜单间距调宽 */
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 auto; /* 居中对齐 */
  }

  /* 菜单链接 hover 效果柔和一点 */
  .nav-links a {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s;
  }

  .nav-links a:hover {
    color: var(--primary);
  }

  /* 右侧按钮区（🌙）靠最右 */
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 80px;
  }

  /* 隐藏汉堡按钮 */
  .menu-toggle {
    display: none !important;
  }

  /* 去掉移动端下拉菜单 */
  .mobile-menu {
    display: none !important;
  }

  /* 主题切换按钮微调位置与尺寸 */
  .theme-toggle {
    font-size: 1.2rem;
    margin-left: 10px;
  }
}