/* ── 三站共用顶栏（2026-10-17 统一）─────────────────────────────────────
   引用方：接口文档静态页（中文 + 23 语种，跟着 docs.css 一起加载）、
           /guide/、/studio-guide/ 两个 docsify 外壳。
   桌面端沿用 /docs/ 那套旧顶栏：品牌标 + 5 个栏目 + 语言 + 右侧动作组
   （在线生成音乐 / 联系客服 / 复制本页 / 下载文档）；≤900px 换成紧凑版
   （收起三个次要按钮，导航横向滚动）。一份 DOM、两种模式、一份样式，
   改这里三站同时生效，不会再出现"改一处漏一处"。

   颜色带兜底：教程站用的是 docsify 的 vue.css，没有 --link 变量。
   品牌标用 /favicon.png（橙→蓝音符，和落地页 .brand-mark 同一枚）；
   旧的绿色六边形 /logo.png 已不再被任何页面引用。 */
header.site-header{border-bottom:1px solid #eee;background:#fff;
position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.05)}
/* docsify 的 vue.css 里写的是 body{overflow-x:hidden}——那会把 body 变成滚动容器，
   顶栏的 position:sticky 于是只相对 body 的滚动端口生效，页面一滚（滚的是 window）
   顶栏就被带走了。clip 同样裁掉横向溢出，但**不会**创建滚动容器，sticky 恢复正常。 */
body{overflow-x:clip}
/* docsify 的排版把 body 压成正好一屏高、正文用绝对定位撑开（实测 body 高 900、
   文档高 6016），sticky 只能在 body 的盒子里生效，所以滚一屏顶栏就没了。
   这两个外壳改用 fixed（和旧的 .custom-navbar 一样），再把侧栏/正文下移 61px。 */
body.has-docsify .site-header{position:fixed;inset-inline:0;top:0;z-index:50}
body.has-docsify .sidebar{top:61px}
/* 旧顶栏是满宽（docsify 的 .custom-navbar 没有 max-width），这里跟随：
   长语种（ru 单行导航 1343px）才有足够空间。 */
.site-header .inner{display:flex;align-items:center;gap:22px;max-width:none;
margin:0 auto;padding:0 20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:#333;font-size:19px;
flex:0 0 auto;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{width:28px;height:28px;border-radius:8px;display:block;flex:0 0 auto}
.brand-name{white-space:nowrap}
/* .brand-mark 仍被 landing / 场景页当作纯 CSS 品牌标使用，保持原样。
   橙色 → 蓝色渐变刻意不引用主题变量：品牌标是产品标识，不该跟着主题换色。 */
.brand-mark{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
background:linear-gradient(135deg,#ff7a45,#2d8cff);color:#fff;font-size:14px}
.site-nav{display:flex;align-items:center;gap:22px;flex:1 1 auto;min-width:0;
flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{color:#555;font-size:15px;white-space:nowrap;text-decoration:none}
.site-nav a:hover{color:var(--link,#4f46e5);text-decoration:none}
.site-nav a[aria-current]{color:var(--link,#4f46e5);font-weight:500}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-actions .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0;
border-radius:6px;font-size:14px;line-height:1.2;white-space:nowrap;cursor:pointer;
font-family:inherit;text-decoration:none}
.nav-actions .btn:hover{text-decoration:none}
.nav-actions .btn-secondary{background:#f3f4f6;color:#333}
.nav-actions .btn-secondary:hover{background:#e9ebf0}
.nav-actions .btn-highlight{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;font-weight:600}
.nav-actions .btn-highlight:hover{box-shadow:0 4px 12px rgba(79,70,229,.35)}
.nav-actions svg{flex:0 0 auto}
.nav-actions .lang-menu{position:relative}

/* 语言切换器（页头 <details> 下拉）。结构与落地页一致，颜色按浅色主题重写。
   颜色带兜底：教程站的 vue.css 没有 --line/--link。 */
.lang-menu{position:relative;flex:0 0 auto}
.lang-menu>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;
padding:0 10px;cursor:pointer;list-style:none;border:1px solid var(--line,#e8eaef);
border-radius:8px;color:#666;font-size:14px;white-space:nowrap}
/* 关掉浏览器默认的 ▶ 展开箭头（docs 页与教程站都要） */
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu>summary:hover,.lang-menu[open]>summary{color:var(--link,#4f46e5);border-color:#cfd3e0}
.lang-menu-panel{position:absolute;z-index:60;inset-inline-end:0;margin-top:8px;
width:min(320px,calc(100vw - 40px));max-height:340px;overflow-y:auto;padding:10px;
border:1px solid var(--line,#e8eaef);border-radius:12px;background:#fff;
box-shadow:0 12px 28px rgba(16,24,40,.14);
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
.lang-menu-panel a{padding:6px 8px;border-radius:8px;color:#505d6b;font-size:13px;
text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-menu-panel a:hover{color:var(--link,#4f46e5);background:#f1f2fb;text-decoration:none}
.lang-menu-panel a[aria-current]{color:var(--link,#4f46e5);font-weight:600}

/* 桌面端变窄：两个次要按钮先只留图标，长语种（nl 单行导航 769px）才不会把
   主按钮挤出顶栏；文字标签在 title 里保留，鼠标悬停仍能看到。
   1200px 以上保留完整文字——中文页在 1272px 下与旧顶栏截图完全一致。 */
@media(max-width:1199px){
  .nav-actions .btn-copy .btn-label,.nav-actions .btn-download .btn-label{display:none}
  .nav-actions .btn-copy,.nav-actions .btn-download{padding:8px 10px}
}
/* 加了「博客」之后栏目变成 6 条；长语种（ru 575px、nl 557px）在 1200–1400 之间
   会挤出可视区。这一档把栏目间距和字号收紧一点，让六个入口都能完整显示。 */
@media(max-width:1400px){
  .site-nav{gap:12px}
  .site-nav a{font-size:14px}
  .site-header .inner{gap:16px}
}
/* 1280 附近的桌面：右侧动作组再收一点内边距，保证 6 个栏目 + 4 个按钮都完整可见。 */
@media(max-width:1300px){
  .site-nav{gap:10px}
  .nav-actions{gap:8px}
  .nav-actions .btn{padding-left:10px;padding-right:10px}
  .lang-menu>summary{padding:0 8px;font-size:13.5px}
}
@media(max-width:1099px){
  .nav-actions .btn-contact .btn-label{display:none}
  .nav-actions .btn-contact{padding:8px 10px}
}
/* 抽屉按钮只在窄屏出现；CTA 的短文案同理。 */
.drawer-toggle{display:none}
.cta-short{display:none}
/* 只给窄屏用的抽屉容器（定价页没有文档目录，用它装站点导航）。
   宽屏下不能占位，否则会在顶栏和正文之间留出一条空白。 */
.drawer-shell{display:none}

/* 窄屏顶栏（2026-10-17 二次简化）：只留 LOGO（不带文字）、语言、在线使用、
   菜单按钮。栏目条与客服/复制/下载都搬进左侧抽屉（docs-chrome.js 移动节点，
   不复制 DOM），抽屉里再放本文档的目录。 */
@media(max-width:900px){
  .drawer-shell{display:block}
  .site-header .inner{gap:10px;padding:0 12px}
  .brand-logo{width:30px;height:30px}
  .site-nav{display:none}
  .nav-utils{display:none}
  .nav-actions{margin-left:auto;gap:8px}
  .cta-full{display:none}
  .cta-short{display:inline}
  .nav-actions .btn-highlight{padding:7px 12px;font-size:13px}
  .drawer-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:36px;padding:0;border:1px solid var(--line,#e8eaef);border-radius:8px;
  background:#fff;color:#333;cursor:pointer;flex:0 0 auto}
  .drawer-toggle:hover{border-color:#cfd3e0;color:var(--link,#4f46e5)}
  /* 抽屉里的栏目与动作按钮重新排版：竖排、可整行点击。 */
  .docs-drawer .site-nav,
  .sidebar .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;
  margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line,#e8eaef);
  overflow:visible;white-space:normal}
  .docs-drawer .site-nav a,
  .sidebar .site-nav a{padding:9px 10px;border-radius:8px;font-size:15px}
  .docs-drawer .site-nav a[aria-current],
  .sidebar .site-nav a[aria-current]{background:#f1f2fb}
  .docs-drawer .nav-utils,
  .sidebar .nav-utils{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;
  padding-top:14px;border-top:1px solid var(--line,#e8eaef)}
  .docs-drawer .nav-utils .btn-label,
  .sidebar .nav-utils .btn-label{display:inline}
  /* 静态页：<aside> 变成右侧抽屉（RTL 下用逻辑属性自动镜像到另一侧） */
  aside.docs-drawer{position:fixed;inset-block:61px 0;inset-inline-start:auto;inset-inline-end:0;
  width:min(310px,86vw);margin:0;padding:16px 16px 48px;background:#fff;display:block;
  overflow-y:auto;border-inline-start:1px solid var(--line,#e8eaef);
  box-shadow:0 12px 32px rgba(16,24,40,.18);z-index:40;
  transform:translateX(100%);transition:transform .22s ease;visibility:hidden}
  body.drawer-open aside.docs-drawer{transform:none;visibility:visible}
  html[dir="rtl"] aside.docs-drawer{transform:translateX(-100%)}
  html[dir="rtl"] body.drawer-open aside.docs-drawer{transform:none}
  /* docsify 外壳：把它的 .sidebar 也放到右侧当抽屉用，开合完全由我们控制
     （不再点 docsify 自带的按钮，避免两边状态打架）。 */
  body.has-docsify .sidebar{left:auto;right:0;top:61px;bottom:0;
  z-index:40;background:#fff;
  border-right:0;border-left:1px solid var(--line,#e8eaef);
  transform:translateX(100%);transition:transform .22s ease}
  body.has-docsify.drawer-open .sidebar{transform:none}
  html[dir="rtl"] body.has-docsify .sidebar{transform:translateX(-100%)}
  html[dir="rtl"] body.has-docsify.drawer-open .sidebar{transform:none}
  body.drawer-open{overflow:hidden}
  .drawer-backdrop{position:fixed;inset-block:61px 0;inset-inline:0;background:rgba(16,24,40,.28);
  z-index:35;display:none}
  body.drawer-open .drawer-backdrop{display:block}
  /* docsify 的侧栏默认从视口顶部开始，会被 sticky 顶栏盖住；下移到顶栏下方。 */
  .sidebar{top:61px;padding-top:16px;padding-bottom:24px}
  /* 正文两侧留白：docsify 走 .markdown-section，静态页走 .layout/main（见 docs.css）。 */
  .content{left:0;padding:0}
  /* 窄屏下 docsify 的 .content 是 static，顶栏又是 fixed，这里补出顶栏高度。 */
  body.has-docsify .content{padding-top:61px}
  .markdown-section{max-width:none;margin:0;padding:20px 18px 40px}
  /* docsify 自带的左下角菜单按钮不要了，改用顶栏的抽屉按钮。 */
  .sidebar-toggle{display:none!important}
  /* 窄屏滚动条：悬浮、不占宽度、平时隐藏、滚动时才出现（工作台那套的"悬浮版"）。
     做法是彻底关掉原生滚动条，由 docs-chrome.js 画一条 5px 的胶囊滑块：
       · position:fixed，只占 5px，不挤占页面宽度；
       · 顶端从 61px（顶栏下沿）开始，不会盖到顶栏；
       · 静止时 opacity:0，滚动时淡入，停手 700ms 后淡出。 */
  :is(html,body){scrollbar-width:none}
  :is(html,body)::-webkit-scrollbar{width:0;height:0;display:none}
  :is(aside.docs-drawer,.sidebar){scrollbar-width:none}
  :is(aside.docs-drawer,.sidebar)::-webkit-scrollbar{width:0;height:0;display:none}
  .scroll-thumb{position:fixed;top:0;inset-inline-end:3px;width:5px;border-radius:999px;
  background:rgba(82,82,91,.6);opacity:0;transition:opacity .22s ease;
  pointer-events:none;z-index:60;will-change:transform}
  .scroll-thumb.is-visible{opacity:1}
  .scroll-thumb.is-inside{position:absolute;inset-inline-end:3px}
}
@media(max-width:640px){
  .brand{font-size:15px}
  .brand-logo{width:26px;height:26px}
  .site-nav a{font-size:13.5px}
  .nav-actions .btn-highlight{padding:7px 12px;font-size:13px}
}

/* ── 文末「下一篇」卡片（2026-10-17）────────────────────────────────────
   替代原来那一片"热门接口"链接：读完一页的人多数想接着读下一篇，
   所以文末只留一个显眼的下一步。静态页由构建脚本生成，docsify 外壳由
   docs-chrome.js 按侧栏顺序插入。 */
.next-doc{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin:36px 0 0;padding:16px 20px;border:1px solid #e3e6ee;border-radius:12px;
background:#fafbff;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.next-doc:hover{background:#f3f4ff;border-color:#c9cdf0;text-decoration:none}
.next-doc-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.next-doc-label{font-size:12.5px;color:#6b7280;letter-spacing:.06em}
.next-doc-title{font-size:18px;font-weight:600;color:#4f46e5;line-height:1.35}
.next-doc-arrow{font-size:22px;color:#4f46e5;flex:0 0 auto}
@media(max-width:640px){
  .next-doc{margin-top:28px;padding:14px 16px}
  .next-doc-title{font-size:16px}
}
/* 窄屏：语言面板改成整行面板，锚在固定顶栏正下方（绝对定位会被横向滚动的
   .site-nav 裁掉；面板按 320px 宽右对齐到按钮也会伸到视口外）。 */
@media(max-width:940px){
  .lang-menu>summary{padding:0 8px}
  .lang-menu-panel{position:fixed;inset-inline:8px;top:64px;margin-top:0;
  width:auto;max-height:60vh}
}
@media(max-width:640px){
  .lang-menu>summary span:not([aria-hidden]){display:none}
}