/* SpacePay 开发者文档站
 * 结构参考 DeepSeek 开放平台：顶部导航、左侧分组侧栏、正文 + 页内目录、代码语言标签、
 * 上一页 / 下一页。颜色与排版复用主应用的设计令牌（/styles.css）。 */

.doc-body { background: var(--bg); }
.doc-header { position: sticky; top: 0; z-index: 40; height: 60px; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.doc-header .brand img { height: 22px; display: block; }
.doc-header .topnav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-4); }
.doc-header .topnav a { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--text-sm); }
.doc-header .topnav a:hover { background: var(--surface-2); color: var(--text-1); }
.doc-header .topnav a.active { color: var(--brand); background: var(--brand-soft); font-weight: var(--weight-medium); }
.doc-header .spacer { flex: 1; }
.doc-header .actions { display: flex; align-items: center; gap: var(--space-2); }
.doc-header .icon-btn { width: 34px; height: 34px; }

.doc-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); max-width: 1280px; margin: 0 auto; }
.doc-side { position: sticky; top: 60px; align-self: start; height: calc(100vh - 60px); overflow: auto; padding: var(--space-5) var(--space-3) var(--space-6); border-right: 1px solid var(--border); }
.doc-search { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); margin: 0 var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.doc-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text-1); font: inherit; font-size: var(--text-sm); }
.doc-search svg { color: var(--text-3); flex: none; }
.doc-nav { display: flex; flex-direction: column; gap: 2px; }
.doc-nav .grp { padding: var(--space-4) var(--space-3) var(--space-1); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: var(--weight-semibold); }
.doc-nav a { display: block; padding: 7px var(--space-3); border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--text-sm); }
.doc-nav a:hover { background: var(--surface-2); color: var(--text-1); }
.doc-nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: var(--weight-medium); }
.doc-nav .empty { padding: var(--space-3); color: var(--text-3); font-size: var(--text-sm); }

.doc-main { min-width: 0; padding: var(--space-6) var(--space-7) 80px; }
.doc-article { max-width: 800px; }
.doc-article h1 { font-size: 30px; letter-spacing: -.02em; margin-bottom: var(--space-2); }
.doc-article .lede { color: var(--text-2); font-size: 15px; line-height: 1.75; margin-bottom: var(--space-5); }
.doc-article h2 { font-size: 21px; margin: var(--space-7) 0 var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); scroll-margin-top: 76px; position: relative; }
.doc-article h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--space-5); }
.doc-article h3 { font-size: 16px; margin: var(--space-5) 0 var(--space-2); scroll-margin-top: 76px; }
.doc-article p { color: var(--text-2); line-height: 1.8; margin: 0 0 var(--space-3); }
.doc-article ul, .doc-article ol { color: var(--text-2); line-height: 1.85; margin: 0 0 var(--space-4); padding-left: 22px; }
.doc-article li { margin-bottom: 2px; }
.doc-article a { color: var(--brand); }
.doc-article strong { color: var(--text-1); font-weight: var(--weight-semibold); }
.doc-article code { font: 12.5px var(--font-mono); background: var(--surface-3); border-radius: 4px; padding: 1px 5px; color: var(--text-1); }
.doc-article .anchor { margin-left: 8px; opacity: 0; color: var(--text-3); font-size: 15px; text-decoration: none; transition: opacity .15s; }
.doc-article h2:hover .anchor, .doc-article h3:hover .anchor { opacity: 1; }

.doc-toc { position: fixed; top: 60px; right: max(24px, calc((100vw - 1280px) / 2 + 24px)); width: 200px; max-height: calc(100vh - 100px); overflow: auto; padding: var(--space-5) 0; display: none; }
.doc-toc .title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.doc-toc a { display: block; padding: 4px 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; border-left: 2px solid transparent; padding-left: 10px; }
.doc-toc a:hover { color: var(--text-1); }
.doc-toc a.lvl-3 { padding-left: 22px; }
.doc-toc a.active { color: var(--brand); border-left-color: var(--brand); }
@media (min-width: 1240px) { .doc-toc { display: block; } .doc-shell { max-width: 1280px; padding-right: 224px; } }
@media (min-width: 1240px) and (max-width: 1500px) { .doc-toc { right: 24px; } }

/* 接口标题 */
.endpoint { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin: var(--space-3) 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.endpoint .method { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 24px; padding: 0 8px; border-radius: 5px; font: 600 11px var(--font-mono); letter-spacing: .03em; }
.endpoint .method.get { background: var(--brand-soft); color: var(--brand); }
.endpoint .method.post { background: var(--success-bg); color: var(--success); }
.endpoint .path { font: 13.5px var(--font-mono); color: var(--text-1); word-break: break-all; }
.endpoint .note { color: var(--text-3); font-size: var(--text-xs); margin-left: auto; }

/* 表格 */
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-3) 0 var(--space-5); }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); line-height: 1.65; }
.doc-table th { color: var(--text-3); font-weight: var(--weight-medium); background: var(--surface-2); white-space: nowrap; }
.doc-table td { color: var(--text-2); }
.doc-table td:first-child { white-space: nowrap; }
.doc-table code { white-space: nowrap; }
.doc-table .req { color: var(--danger); font-size: 11px; font-weight: 500; margin-left: 4px; }
.doc-table .opt { color: var(--text-3); font-size: 11px; margin-left: 4px; }

/* 代码块 */
.codeblock { margin: var(--space-3) 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #0E1726; }
.codeblock .code-head { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; background: rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.08); }
.codeblock .lang-tabs { display: flex; gap: 2px; }
.codeblock .lang-tabs button { height: 26px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: #9AA6B8; font: 12px var(--font-sans); cursor: pointer; }
.codeblock .lang-tabs button:hover { color: #D9E1EE; }
.codeblock .lang-tabs button.active { background: rgba(255,255,255,.1); color: #fff; }
.codeblock .copy { margin-left: auto; height: 26px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: transparent; color: #C7D2E0; font-size: 11px; cursor: pointer; }
.codeblock .copy:hover { background: rgba(255,255,255,.08); }
.codeblock pre { margin: 0; padding: 14px 16px; overflow: auto; color: #D9E1EE; font: 12.5px/1.7 var(--font-mono); tab-size: 2; }
.codeblock pre[hidden] { display: none; }
.codeblock .filename { color: #8B95A3; font: 11px var(--font-mono); margin-left: 8px; }

/* 提示块 */
.callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); margin: var(--space-3) 0 var(--space-5); font-size: var(--text-sm); line-height: 1.75; }
.callout .ico { flex: none; font-weight: 700; }
.callout.info { background: var(--brand-soft); color: var(--text-1); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); }
.callout.tip { background: var(--success-bg); color: var(--text-1); border: 1px solid color-mix(in srgb, var(--success) 20%, transparent); }
.callout.warn { background: var(--warning-bg); color: var(--text-1); border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent); }
.callout.danger { background: var(--danger-bg); color: var(--text-1); border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); }
.callout code { background: color-mix(in srgb, var(--text-1) 8%, transparent); }

/* 步骤 */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0 var(--space-5); }
.steps .step { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); align-items: start; }
.steps .step::before { counter-increment: step; content: counter(step); display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; margin-top: 3px; }
.steps .step b { color: var(--text-1); font-weight: var(--weight-semibold); }
.steps .step p { margin: 2px 0 0; }

/* 状态徽标 */
.pillrow { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-3) 0 var(--space-5); }
.pillrow .st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font: 12px var(--font-mono); }
.pillrow .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pillrow .st.ok { background: var(--success-bg); color: var(--success); }
.pillrow .st.warn { background: var(--warning-bg); color: var(--warning); }
.pillrow .st.bad { background: var(--danger-bg); color: var(--danger); }
.pillrow .st.info { background: var(--brand-soft); color: var(--brand); }

/* 上一页 / 下一页 */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.prevnext a { display: block; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.prevnext a:hover { border-color: var(--brand); }
.prevnext a .dir { display: block; color: var(--text-3); font-size: var(--text-xs); margin-bottom: 2px; }
.prevnext a .t { color: var(--text-1); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.prevnext a.next { text-align: right; }
.prevnext a.empty { visibility: hidden; }

/* 移动端 */
.doc-menu-btn { display: none; }
@media (max-width: 1000px) {
  .doc-header { padding: 0 var(--space-4); gap: var(--space-3); }
  .doc-header .topnav { display: none; }
  .doc-menu-btn { display: inline-flex; }
  .doc-shell { grid-template-columns: 1fr; }
  .doc-side { position: fixed; inset: 60px auto 0 0; z-index: 50; width: 280px; height: calc(100vh - 60px); background: var(--surface); transform: translateX(-102%); transition: transform .22s var(--ease); box-shadow: var(--shadow-overlay); }
  .doc-side.open { transform: none; }
  .doc-scrim { position: fixed; inset: 60px 0 0; z-index: 45; background: var(--scrim); display: none; }
  .doc-scrim.open { display: block; }
  .doc-main { padding: var(--space-5) var(--space-4) 64px; }
  .doc-article h1 { font-size: 25px; }
  .doc-article h2 { font-size: 19px; }
  .doc-table { display: block; overflow-x: auto; }
  .prevnext { grid-template-columns: 1fr; }
  .doc-toc { display: none; }
}
@media (min-width: 1001px) { .doc-scrim { display: none !important; } }