/**
 * 官网文档 / 文章 — 大厂文档站风格
 */
.docs-page {
  --docs-w: 1120px;
  --docs-accent: #2468f2;
  --docs-text: #0f172a;
  --docs-muted: #64748b;
  --docs-line: #e2e8f0;
  background: #fff;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding-bottom: 72px;
}
.docs-wrap { width: var(--docs-w); max-width: calc(100% - 48px); margin: 0 auto; }

.docs-hero, .docs-article-hero {
  padding: 56px 0 40px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid var(--docs-line);
}
.docs-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--docs-accent);
  background: #eff6ff;
  border-radius: 999px;
}
.docs-hero h1, .docs-article-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--docs-text);
}
.docs-lead { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--docs-muted); }
.docs-crumb { margin-bottom: 16px; font-size: 13px; color: var(--docs-muted); }
.docs-crumb a { color: var(--docs-muted); }
.docs-crumb a:hover { color: var(--docs-accent); }
.docs-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--docs-muted); }
.docs-meta-tag { padding: 2px 8px; border-radius: 4px; background: #f1f5f9; color: #475569; }

.docs-list { padding: 32px 0 0; display: grid; gap: 16px; }
.docs-card { border: 1px solid var(--docs-line); border-radius: 12px; transition: box-shadow .2s, border-color .2s; }
.docs-card:hover { border-color: #bfdbfe; box-shadow: 0 8px 24px rgba(36, 104, 242, .08); }
.docs-card-link { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px; color: inherit; }
.docs-card-body time { display: block; font-size: 12px; color: var(--docs-muted); margin-bottom: 8px; }
.docs-card-body h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--docs-text); }
.docs-card-body p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--docs-muted); }
.docs-card-tag { flex-shrink: 0; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #f8fafc; color: #64748b; border: 1px solid var(--docs-line); }
.docs-empty { padding: 48px; text-align: center; color: var(--docs-muted); border: 1px dashed var(--docs-line); border-radius: 12px; }

.docs-article-layout { padding: 40px 0 0; }
.docs-prose {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.85;
  color: #334155;
}
.docs-prose h2, .docs-prose h3 { color: var(--docs-text); margin: 1.6em 0 .6em; line-height: 1.35; }
.docs-prose h2 { font-size: 24px; }
.docs-prose h3 { font-size: 20px; }
.docs-prose p { margin: 0 0 1em; }
.docs-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.2em 0; }
.docs-prose ul, .docs-prose ol { margin: 0 0 1em 1.2em; }
.docs-prose code { padding: .15em .45em; border-radius: 4px; background: #f1f5f9; font-size: .92em; }
.docs-prose pre { padding: 16px; border-radius: 8px; background: #0f172a; color: #e2e8f0; overflow: auto; }
.docs-prose blockquote { margin: 1.2em 0; padding: 12px 16px; border-left: 4px solid var(--docs-accent); background: #f8fafc; color: #475569; }

.docs-paywall {
  margin-top: 28px;
  max-width: 480px;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}
.docs-paywall h3 { margin: 0 0 8px; font-size: 18px; }
.docs-paywall p { margin: 0 0 16px; color: var(--docs-muted); font-size: 14px; }
.docs-paywall-price { font-size: 32px; font-weight: 700; color: #dc2626; }
.docs-paywall-hint { color: var(--docs-muted); font-size: 14px; }
.docs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 140px; height: 42px; padding: 0 20px; border-radius: 8px;
  font-size: 14px; font-weight: 600; border: none; cursor: pointer; text-decoration: none;
}
.docs-btn--primary { background: var(--docs-accent); color: #fff !important; }
.docs-btn--primary:hover { opacity: .92; }
.docs-btn--ghost { border: 1px solid var(--docs-line); background: #fff; color: var(--docs-text) !important; }
.docs-attach { margin-top: 24px; }
.docs-alert { margin: 16px 0; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.docs-alert--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.docs-alert--ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* ===== 树形侧边栏 + 正文双栏布局 ===== */
.docs-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  min-height: calc(100vh - 120px);
  border-top: 1px solid var(--docs-line);
}

.docs-sidebar {
  position: sticky;
  top: 64px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow: auto;
  padding: 24px 16px 32px 0;
  border-right: 1px solid var(--docs-line);
  background: #fafbfc;
}

.docs-sidebar-head { padding: 0 12px 16px; border-bottom: 1px solid var(--docs-line); margin-bottom: 12px; }
.docs-sidebar-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--docs-accent); text-transform: uppercase; letter-spacing: .04em; }
.docs-sidebar-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--docs-text); line-height: 1.4; }

.docs-tree { padding: 4px 0; }
.docs-tree-empty { padding: 12px; font-size: 13px; color: var(--docs-muted); }

.docs-tree-list { list-style: none; margin: 0; padding: 0; }
.docs-tree-list--child { display: none; padding-left: 12px; margin-top: 2px; }
.docs-tree-item--group.is-open > .docs-tree-list--child { display: block; }

.docs-tree-item { margin: 2px 0; }

.docs-tree-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.docs-tree-toggle:hover { background: #eef2ff; color: var(--docs-accent); }

.docs-tree-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  position: relative;
}
.docs-tree-chevron::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(-45deg);
  transition: transform .2s;
}
.docs-tree-item--group.is-open > .docs-tree-toggle .docs-tree-chevron::before {
  transform: rotate(45deg);
  top: 4px;
}

.docs-tree-link {
  display: block;
  padding: 7px 10px 7px 28px;
  border-radius: 8px;
  font-size: 14px;
  color: #475569;
  text-decoration: none !important;
  line-height: 1.45;
}
.docs-tree-link:hover { background: #f1f5f9; color: var(--docs-accent); }
.docs-tree-item--page.is-active > .docs-tree-link {
  background: #eff6ff;
  color: var(--docs-accent);
  font-weight: 600;
}

.docs-main {
  padding: 32px 0 48px 40px;
  min-width: 0;
}

.docs-article-head {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--docs-line);
}
.docs-article-head h1 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--docs-text);
}

.docs-main-empty { padding: 24px 0; }
.docs-main-empty h1 { margin: 0 0 12px; font-size: 28px; }
.docs-main-empty p { margin: 0 0 10px; color: var(--docs-muted); line-height: 1.7; }
.docs-muted { color: var(--docs-muted); }

.docs-page--hub .docs-main,
.docs-page--article .docs-main .docs-prose {
  max-width: 820px;
}

@media (max-width: 960px) {
  .docs-shell { grid-template-columns: 1fr; width: calc(100% - 32px); }
  .docs-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--docs-line);
    padding: 20px 0;
  }
  .docs-main { padding: 24px 0 40px; }
}

@media (max-width: 768px) {
  .docs-card-link { flex-direction: column; }
}

/* ===== 开发文档站（对齐微信小程序 / 腾讯云文档树形侧栏） ===== */
.docs-page--devdocs {
  --docs-accent: #07c160;
  --docs-accent-soft: rgba(7, 193, 96, 0.08);
  --docs-text: #353535;
  --docs-muted: #888;
  --docs-line: #ededed;
  --docs-sidebar-bg: #f7f8f7;
  --docs-sidebar-w: 260px;
  background: #fff;
  min-height: calc(100vh - 64px);
}

.docs-page--devdocs .docs-shell {
  grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr);
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: calc(100vh - 64px);
  border-top: none;
}

.docs-page--devdocs .docs-sidebar {
  top: 64px;
  max-height: calc(100vh - 64px);
  padding: 16px 0 32px;
  border-right: 1px solid var(--docs-line);
  background: var(--docs-sidebar-bg);
}

.docs-page--devdocs .docs-sidebar-head {
  margin: 0 0 8px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--docs-line);
}

.docs-page--devdocs .docs-sidebar-brand {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--docs-text);
  text-decoration: none !important;
}

.docs-page--devdocs .docs-sidebar-brand:hover {
  color: var(--docs-accent);
}

.docs-page--devdocs .docs-tree {
  padding: 8px 0 0;
}

.docs-page--devdocs .docs-tree-empty {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
}

.docs-page--devdocs .docs-tree-list--child {
  padding-left: 0;
  margin-top: 0;
}

.docs-page--devdocs .docs-tree-item {
  margin: 0;
}

.docs-page--devdocs .docs-tree-toggle {
  gap: 4px;
  padding: 8px 16px 8px 12px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--docs-text);
  line-height: 22px;
}

.docs-page--devdocs .docs-tree-toggle:hover {
  background: transparent;
  color: var(--docs-accent);
}

.docs-page--devdocs .docs-tree-chevron::before {
  border-color: #b2b2b2;
}

.docs-page--devdocs .docs-tree-link {
  padding: 8px 16px 8px 28px;
  border-radius: 0;
  border-left: 3px solid transparent;
  font-size: 14px;
  line-height: 22px;
  color: var(--docs-text);
}

.docs-page--devdocs .docs-tree-list[data-depth="2"] .docs-tree-link {
  padding-left: 40px;
}

.docs-page--devdocs .docs-tree-list[data-depth="3"] .docs-tree-link {
  padding-left: 52px;
}

.docs-page--devdocs .docs-tree-list[data-depth="4"] .docs-tree-link {
  padding-left: 64px;
}

.docs-page--devdocs .docs-tree-link:hover {
  background: var(--docs-accent-soft);
  color: var(--docs-accent);
}

.docs-page--devdocs .docs-tree-item--page.is-active > .docs-tree-link {
  background: var(--docs-accent-soft);
  border-left-color: var(--docs-accent);
  color: var(--docs-accent);
  font-weight: 500;
}

.docs-page--devdocs .docs-tree-item--group.is-open > .docs-tree-toggle {
  color: var(--docs-text);
}

.docs-page--devdocs .docs-main {
  padding: 32px 48px 64px;
  background: #fff;
}

.docs-page--devdocs .docs-article-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--docs-line);
}

.docs-page--devdocs .docs-article-head h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--docs-text);
}

.docs-page--devdocs .docs-lead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--docs-muted);
}

.docs-page--devdocs .docs-crumb {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--docs-muted);
}

.docs-page--devdocs .docs-crumb a {
  color: var(--docs-muted);
}

.docs-page--devdocs .docs-crumb a:hover {
  color: var(--docs-accent);
}

.docs-page--devdocs .docs-meta {
  margin-top: 12px;
  font-size: 12px;
  color: var(--docs-muted);
}

.docs-page--devdocs .docs-prose {
  max-width: 900px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--docs-text);
}

.docs-page--devdocs .docs-prose h2 {
  margin-top: 1.8em;
  font-size: 22px;
  font-weight: 700;
  color: var(--docs-text);
}

.docs-page--devdocs .docs-prose h3 {
  margin-top: 1.4em;
  font-size: 18px;
  font-weight: 600;
}

.docs-page--devdocs .docs-prose code {
  background: #f5f5f5;
  color: #c7254e;
}

.docs-page--devdocs .docs-prose pre {
  background: #f5f5f5;
  color: #353535;
  border: 1px solid var(--docs-line);
}

.docs-page--devdocs .docs-prose blockquote {
  border-left-color: var(--docs-accent);
  background: #fafafa;
}

.docs-page--devdocs .docs-btn--primary {
  background: var(--docs-accent);
}

.docs-page--devdocs .docs-index-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--docs-line);
  border-radius: 4px;
  overflow: hidden;
}

.docs-page--devdocs .docs-index-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--docs-line);
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.docs-page--devdocs .docs-index-item:last-child {
  border-bottom: none;
}

.docs-page--devdocs .docs-index-item:hover {
  background: var(--docs-accent-soft);
}

.docs-page--devdocs .docs-index-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--docs-text);
}

.docs-page--devdocs .docs-index-item:hover .docs-index-title {
  color: var(--docs-accent);
}

.docs-page--devdocs .docs-index-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--docs-muted);
}

.docs-page--devdocs .docs-main-empty p {
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 960px) {
  .docs-page--devdocs .docs-shell {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .docs-page--devdocs .docs-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--docs-line);
  }

  .docs-page--devdocs .docs-main {
    padding: 24px 16px 48px;
  }
}