/* ==========================================================================
   API 文档样式 —— 后台内嵌视图与独立分享页共用
   ========================================================================== */

.docs-wrap {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  /* 关键：必须用 minmax(0,1fr)。写 1fr 等于 minmax(auto,1fr)，
     会被代码块里最长的行撑宽，导致整页横向溢出。 */
  .docs-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------------- 左侧目录 ---------------- */
/* 让 grid/flex 子项可以收缩，代码块的横向滚动才会生效。
   注意：只写 min-width:0 不够 —— 实测 .docs-body 仍会被最长的 curl 示例行
   顶到 835px 宽；必须再加 max-width:100% 把它压回网格轨道的宽度。 */
.docs-body { min-width: 0; max-width: 100%; }
.ep, .ep-body { min-width: 0; }

.docs-nav {
  position: sticky;
  top: 72px;
  background: #fff;
  border: 1px solid var(--border, #e3e7ee);
  border-radius: 8px;
  padding: 12px 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  max-height: calc(100vh - 96px);
  overflow: auto;
}
@media (max-width: 900px) {
  .docs-nav { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; }
  .docs-nav-title { width: 100%; }
}
.docs-nav-title {
  font-size: 12px;
  color: var(--muted-2, #9aa3af);
  padding: 2px 8px 8px;
  font-weight: 600;
}
.docs-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted, #6b7280);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s;
}
.docs-nav a:hover { background: #f4f7fc; color: var(--text, #1f2430); text-decoration: none; }
.docs-nav a.active {
  background: #eaf1fe;
  color: var(--primary, #2f6fed);
  font-weight: 600;
  border-left-color: var(--primary, #2f6fed);
}
@media (max-width: 900px) {
  .docs-nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 5px 10px; }
  .docs-nav a.active { border-left: 0; border-bottom-color: var(--primary, #2f6fed); }
}

/* ---------------- 头部 ---------------- */
.docs-hero {
  background: linear-gradient(135deg, #f2f7ff 0%, #f7fbf8 100%);
  border: 1px solid #dbe7fb;
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.docs-hero h2 { margin: 0 0 6px; font-size: 17px; }
.docs-hero p { margin: 0; color: var(--muted, #6b7280); font-size: 13px; }
.docs-hero .url-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: #fff;
  border: 1px solid #d8e3f5;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  flex-wrap: wrap;          /* 窄屏时按钮换行，避免撑破容器 */
}
/* flex 子项默认 min-width:auto，长 URL 会把容器顶宽导致整页横向溢出 */
.docs-hero .url-box > * { min-width: 0; }
.docs-hero .url-box .u { word-break: break-all; flex: 1 1 200px; }
.docs-hero .url-box .k { color: var(--muted-2, #9aa3af); font-family: inherit; }
.docs-hero .key-line {
  margin-top: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.docs-hero .key-line code {
  background: #fff;
  border: 1px dashed var(--border, #e3e7ee);
  padding: 2px 8px;
  border-radius: 5px;
}

/* ---------------- 章节 ---------------- */
.docs-sec { scroll-margin-top: 76px; margin-bottom: 22px; }
.docs-sec > h3 {
  font-size: 15px;
  margin: 0 0 12px;
  padding: 0 0 0 10px;
  border-left: 3px solid var(--primary, #2f6fed);
  line-height: 1.2;
}
.docs-sec > h3 .num {
  color: var(--muted-2, #9aa3af);
  font-weight: 400;
  margin-right: 6px;
}

/* ---------------- 接口卡片 ---------------- */
.ep {
  background: #fff;
  border: 1px solid var(--border, #e3e7ee);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  margin-bottom: 14px;
  overflow: hidden;
}
.ep-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2, #eef1f6);
}
/* 完整接口地址一行 */
.ep-url {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ep-url .m {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e7f6ee;
  color: #0f9d58;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ep-url code {
  flex: 1 1 260px;
  min-width: 0;
  background: #f6f8fb;
  border: 1px solid var(--border, #e3e7ee);
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 12.5px;
  font-weight: 600;
  word-break: break-all;
  color: #22406e;
}
.ep-url button {
  flex: 0 0 auto;
  border: 1px solid var(--border, #e3e7ee);
  background: #fff;
  color: var(--muted, #6b7280);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}
.ep-url button:hover { background: #f4f7fc; color: var(--primary, #2f6fed); }
.ep-desc { color: var(--muted, #6b7280); font-size: 13px; margin-top: 7px; }

/* 卡片内的小标题 */
.sub-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2, #9aa3af);
  letter-spacing: .3px;
  margin: 18px 0 4px;
}
.sub-title:first-child { margin-top: 0; }
.ep-body { padding: 14px 16px; }
.ep-body > p:first-child { margin-top: 0; }
.ep-body > p:last-child { margin-bottom: 0; }

/* ---------------- 代码块 ---------------- */
.code {
  position: relative;
  margin: 10px 0;
}
.code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f9fc;
  border: 1px solid var(--border, #e3e7ee);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--muted-2, #9aa3af);
  letter-spacing: .3px;
}
.code-bar .lang { text-transform: uppercase; font-weight: 600; }
.code-bar .sp { flex: 1; }
.code-bar button {
  border: 0;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}
.code-bar button:hover { background: #e9eef6; color: var(--primary, #2f6fed); }
.code pre {
  margin: 0;
  background: #fbfcfe;
  border: 1px solid var(--border, #e3e7ee);
  border-radius: 0 0 6px 6px;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: #24292f;
  tab-size: 2;
}
.code pre code { background: none; padding: 0; font-size: inherit; }
/* 没有 bar 的时候自己带圆角 */
.code.no-bar pre { border-radius: 6px; }

/* 行内代码 */
.docs-wrap code,
.docs-hero code {
  background: #f2f5fa;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* ---------------- 参数表 ---------------- */
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.ptable th {
  text-align: left;
  color: var(--muted, #6b7280);
  font-weight: 600;
  background: #fafbfd;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #e3e7ee);
  font-size: 12px;
}
.ptable td { padding: 7px 10px; border-bottom: 1px solid var(--border-2, #eef1f6); vertical-align: top; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable td:first-child { white-space: nowrap; }

/* 类型列与"必填"标记 */
.ptable td.t {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted-2, #9aa3af);
  white-space: nowrap;
}
.ptable .req {
  display: inline-block;
  background: #fdeaea;
  color: #b3261e;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
}

/* ---------------- 提示块 ---------------- */
.callout {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 7px;
  font-size: 13px;
  margin: 12px 0;
  border: 1px solid;
  line-height: 1.6;
}
.callout .ico { flex: 0 0 auto; font-size: 15px; line-height: 1.4; }
.callout p { margin: 0; }
.callout.tip  { background: #f0f7ff; border-color: #cfe1fb; color: #1c4d8f; }
.callout.warn { background: #fff8e8; border-color: #f3e0b5; color: #7a5500; }
.callout.ok   { background: #f0faf4; border-color: #c8e9d6; color: #10643a; }

/* ---------------- 错误码表 ---------------- */
.errtable code { font-weight: 600; }
.err-0 { color: #0f9d58; }
.err-bad { color: #b3261e; }

/* ---------------- 步骤列表 ---------------- */
.docs-steps { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: st; }
.docs-steps li {
  position: relative;
  padding: 0 0 14px 34px;
  border-left: 2px solid var(--border-2, #eef1f6);
  margin-left: 11px;
  font-size: 13px;
}
.docs-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.docs-steps li::before {
  counter-increment: st;
  content: counter(st);
  position: absolute;
  left: -12px;
  top: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eaf1fe;
  color: var(--primary, #2f6fed);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.docs-steps li b { display: block; margin-bottom: 2px; }

/* ---------------- 代码示例切换 ---------------- */
.tabs-mini { display: flex; gap: 4px; margin: 14px 0 0; }
.tabs-mini button {
  border: 1px solid var(--border, #e3e7ee);
  background: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  cursor: pointer;
  font-family: inherit;
}
.tabs-mini button.active {
  background: #eaf1fe;
  border-color: #c9dcfb;
  color: var(--primary, #2f6fed);
  font-weight: 600;
}