/*******************************
* 文件名：api-docs.css
* 创建时间：2026-09-25
* 作者：DHPro
* 功能描述：API 开放平台文档页独立样式（B 方案内容区）
*     蓝紫科技感（对齐 4dj 观感），挂载模板色彩变量 + 默认回退
*     适配深色（html[data-theme=dark]）与 480px 移动端
*******************************/
.apidocs-shell{
  --ad-primary: var(--moyu-primary, #165dff);
  --ad-primary-2: #6c5ce7;
  --ad-muted: var(--moyu-muted, #86909c);
  --ad-border: var(--moyu-border, #e2e8f0);
  --ad-panel: var(--moyu-panel, #ffffff);
  --ad-bg: #f6f8fa;
  --ad-text: #1f2329;
  --ad-code-bg: #0f172a;
  --ad-code-text: #e2e8f0;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-size: 14px;
  color: var(--ad-text);
  line-height: 1.7;
}
html[data-theme="dark"] .apidocs-shell{
  --ad-panel: #1e2633;
  --ad-bg: #141a24;
  --ad-text: #e6e8eb;
  --ad-border: #30394a;
  --ad-muted: #98a1af;
}

/* ---------- Hero ---------- */
.ad-hero{
  background: linear-gradient(135deg, var(--ad-primary), var(--ad-primary-2));
  color: #fff;
  border-radius: 14px;
  padding: 34px 30px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ad-hero-text{ flex: 1; min-width: 260px; }
.ad-hero h1{ margin: 0 0 8px; font-size: 26px; }
.ad-hero p{ margin: 0 0 18px; opacity: .92; font-size: 14px; }
.ad-hero-caps{ display: flex; flex-wrap: wrap; gap: 10px; }
.ad-cap{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
}
.ad-hero-act{ flex-shrink: 0; }
.ad-hero-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--ad-primary);
  padding: 11px 26px;
  border: 2px solid var(--ad-primary);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(10,20,40,.25);
  transition: all .25s;
}
.ad-hero-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }
.ad-hero-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,20,40,.32); color: var(--ad-primary); background: #ffffff; }
@media (max-width: 560px){
  .ad-hero{ padding: 26px 20px; }
  .ad-hero-btn{ width: 100%; justify-content: center; }
}

/* ---------- Tab 导航 ---------- */
.ad-tabs{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--ad-panel);
  border: 1px solid var(--ad-border);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(20,30,50,.06);
}
.ad-tab{
  padding: 7px 14px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ad-muted);
  cursor: pointer;
  white-space: nowrap;
}
.ad-tab:hover{ color: var(--ad-text); }
.ad-tab.on{ background: var(--ad-primary); color: #fff; }

/* ---------- 区块 ---------- */
.ad-section{ display: none; scroll-margin-top: 80px; }
.ad-section.on{ display: block; }
.ad-card{
  background: var(--ad-panel);
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.ad-card h2{ margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.ad-card h3{ margin: 18px 0 8px; font-size: 15px; }
.ad-muted{ color: var(--ad-muted); font-size: 13px; }
.ad-inline-link{ color: var(--ad-primary); text-decoration: none; font-weight: 600; }
.ad-inline-link:hover{ text-decoration: underline; }

/* ---------- 表格 ---------- */
.ad-table{ width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.ad-table th{ text-align: left; padding: 8px 10px; background: var(--ad-bg); color: var(--ad-muted); font-weight: 500; border-bottom: 1px solid var(--ad-border); }
.ad-table td{ padding: 8px 10px; border-bottom: 1px solid var(--ad-border); vertical-align: top; }
.ad-table code, .ad-inline-code{
  font-family: Consolas,Menlo,monospace;
  font-size: 12px;
  background: var(--ad-bg);
  padding: 1px 6px;
  border-radius: 4px;
}
.ad-tag{ display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--ad-bg); border: 1px solid var(--ad-border); margin-right: 6px; }
.ad-tag.required{ color: #e5484d; border-color: #f5c2c2; background: #fde8e8; }
html[data-theme="dark"] .ad-tag.required{ color: #f6a5a5; background: #3a2323; border-color: #5c3a3a; }

/* ---------- 代码块 ---------- */
.ad-code{
  background: var(--ad-code-bg);
  color: var(--ad-code-text);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: Consolas,Menlo,monospace;
  font-size: 12.5px;
  overflow-x: auto;
  margin: 10px 0;
  line-height: 1.6;
}
.ad-code .ad-code-comment{ color: #7d8ca0; }
.ad-code-tabs{ display: flex; gap: 4px; margin: 10px 0 0; }
.ad-code-tab{ padding: 4px 12px; border: 1px solid var(--ad-border); border-radius: 6px 6px 0 0; background: transparent; font-size: 12px; cursor: pointer; color: var(--ad-muted); }
.ad-code-tab.on{ background: var(--ad-code-bg); color: var(--ad-code-text); border-color: var(--ad-code-bg); }
.ad-code-wrap .ad-code{ margin-top: 0; border-radius: 0 0 10px 10px; }

/* ---------- 提示框 ---------- */
.ad-note{
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 10px 0;
  border: 1px solid;
}
.ad-note-info{ background: #e8f0fe; border-color: #b6cdf7; color: #1a56c9; }
.ad-note-warn{ background: #fff7e6; border-color: #f5dcad; color: #9a6700; }
html[data-theme="dark"] .ad-note-info{ background: #16263f; color: #8ab8ff; border-color: #2b4a70; }
html[data-theme="dark"] .ad-note-warn{ background: #332a17; color: #ffcf6e; border-color: #5c4a20; }

/* ---------- 套餐卡 ---------- */
.ad-plan-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.ad-plan{
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  position: relative;
  background: var(--ad-panel);
}
.ad-plan strong{ display: block; font-size: 26px; color: var(--ad-primary); }
.ad-plan .ad-plan-tag{
  position: absolute;
  top: -1px;
  right: 12px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--ad-primary), var(--ad-primary-2));
  padding: 2px 10px;
  border-radius: 0 0 8px 8px;
}
.ad-plan span{ display: block; color: var(--ad-muted); font-size: 12.5px; margin-top: 6px; }
.ad-plan-btn{
  display: inline-block;
  margin-top: 12px;
  padding: 7px 18px;
  border-radius: 20px;
  background: var(--ad-primary);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

/* ---------- FAQ ---------- */
.ad-faq details{ border-bottom: 1px solid var(--ad-border); padding: 10px 0; }
.ad-faq details summary{ cursor: pointer; font-weight: 500; }
.ad-faq details p{ margin: 8px 0 4px; color: var(--ad-muted); font-size: 13px; }

/* ---------- 在线调试 ---------- */
.ad-debug{
  background: var(--ad-panel);
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.ad-debug-head{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ad-debug-head h3{ margin: 0; font-size: 15px; }
.ad-debug-key{ font-size: 12px; color: var(--ad-muted); }
.ad-debug-key code{ font-family: Consolas,Menlo,monospace; }
.ad-debug-input{
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--ad-bg);
  color: var(--ad-text);
  outline: none;
  margin-bottom: 10px;
}
.ad-debug-input:focus{ border-color: var(--ad-primary); }
.ad-debug-select{
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--ad-bg);
  color: var(--ad-text);
  outline: none;
  cursor: pointer;
}
.ad-debug-select:focus{ border-color: var(--ad-primary); }
.ad-debug-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ad-debug-row input[type=number], .ad-debug-row input[type=file]{ flex: 1; min-width: 140px; }
.ad-btn{
  padding: 9px 22px;
  border: none;
  border-radius: 8px;
  background: var(--ad-primary);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.ad-btn:hover{ background: var(--ad-primary-2); }
.ad-result{
  margin-top: 10px;
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--ad-bg);
  font-family: Consolas,Menlo,monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;
  overflow-y: auto;
}
.ad-loading{ color: var(--ad-primary); }

/* ---------- 移动端 480px ---------- */
@media (max-width: 480px){
  .apidocs-shell{ padding: 14px 10px 36px; }
  .ad-hero{ padding: 24px 18px; }
  .ad-hero h1{ font-size: 21px; }
  .ad-plan-grid{ grid-template-columns: 1fr 1fr; }
  .ad-tabs{ overflow-x: auto; flex-wrap: nowrap; }
  .ad-table{ display: block; overflow-x: auto; }
}