/* ==========================================================================
   Markdown 正文样式 · Docusaurus 简约文档风格
   渲染结构见 src/markdown.js
   亮色语法高亮 = Prism github ；暗色 = vsDark
   ========================================================================== */

.md-body {
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child { margin-bottom: 0; }

/* ------------------------------- 标题 ---------------------------------- */

.md-body h1,
.md-body h2,
.md-body h3,
.md-body h4,
.md-body h5,
.md-body h6 {
  position: relative;
  margin: 1.7em 0 0.6em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  scroll-margin-top: calc(var(--header-h, 68px) + 20px);
}
.md-body h1 { font-size: 2rem; }
.md-body h2 { font-size: 1.5rem; }
.md-body h3 { font-size: 1.25rem; }
.md-body h4 { font-size: 1rem; }
.md-body h5 { font-size: 0.875rem; }
.md-body h6 { font-size: 0.85rem; color: var(--muted); }

/* 标题锚点（hover 时出现 # 图标） */
.md-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -1.1em;
  width: 1.1em;
  color: var(--muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease;
}
.md-body h1:hover .md-anchor,
.md-body h2:hover .md-anchor,
.md-body h3:hover .md-anchor,
.md-body h4:hover .md-anchor { opacity: 1; }
.md-anchor:hover { color: var(--primary); }
.md-anchor-icon { font-size: 0.82em; font-weight: 700; }

/* ------------------------------- 段落 / 列表 ---------------------------- */

.md-body p { margin: 0 0 1rem; }

.md-body ul,
.md-body ol { margin: 0 0 1rem; padding-left: 1.6em; }
.md-body li { margin-bottom: 0.35em; }
.md-body li > ul,
.md-body li > ol { margin: 0.35em 0; }
.md-body li::marker { color: var(--muted); }
.md-body ul.contains-task-list { list-style: none; padding-left: 0.4em; }
.md-body .task-list-item { display: flex; align-items: flex-start; gap: 8px; }
.md-body .task-list-item input { margin-top: 5px; accent-color: var(--primary); }

/* ------------------------------- 引用 / 分割线 -------------------------- */

.md-body blockquote {
  margin: 1.2em 0;
  padding: 0.6rem 1rem;
  border-left: 4px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--surface-2);
  color: var(--muted);
}
.md-body blockquote > *:last-child { margin-bottom: 0; }
.md-body blockquote p { margin-bottom: 0.5em; }

.md-body hr { border: 0; height: 1px; background: var(--border); margin: 2em 0; }

/* ------------------------------- 链接 / 强调 ---------------------------- */

.md-body a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.md-body a:hover { color: var(--primary-dark); text-decoration: underline; }
.md-body .md-link-external::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 4px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-0.1em);
  opacity: 0.65;
}
.md-body strong { font-weight: 700; color: var(--text); }
.md-body em { font-style: italic; }
.md-body del { color: var(--muted); }
.md-body mark {
  background: rgba(255, 214, 0, 0.32);
  color: inherit;
  border-radius: 0.2rem;
  padding: 0 3px;
}

/* 行内代码 */
.md-body :not(pre) > code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.88em;
  padding: 0.12rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--code-inline-bg, rgba(0, 0, 0, 0.06));
  border: 0;
  color: inherit;
  white-space: break-spaces;
}

/* ------------------------------- 代码块 -------------------------------- */

.md-code {
  margin: 1.3em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background: #f6f8fa;
}
.md-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--border) 32%, transparent);
  border-bottom: 1px solid var(--border);
}
.md-code-lang {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.md-code-copy {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  padding: 3px 10px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.md-code-copy:hover { color: var(--primary); background: var(--hover-bg); }
.md-code-copy.is-done { color: var(--primary); }

.md-pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13.5px;
  line-height: 1.65;
  background: transparent;
  color: #24292e;
  tab-size: 4;
}
.md-pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

/* --------------------------- 语法高亮 · 亮色 (Prism github) -------------- */

.hljs { background: transparent; color: #24292e; }
.hljs-comment,
.hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-doctag,
.hljs-type,
.hljs-literal { color: #d73a49; }
.hljs-string,
.hljs-regexp,
.hljs-meta .hljs-string { color: #032f62; }
.hljs-number,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-attr,
.hljs-selector-pseudo { color: #005cc5; }
.hljs-title,
.hljs-section,
.hljs-title.class_,
.hljs-title.function_ { color: #6f42c1; font-weight: 600; }
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-built_in,
.hljs-symbol,
.hljs-bullet,
.hljs-attr,
.hljs-attribute { color: #22863a; }
.hljs-meta,
.hljs-tag { color: #6a737d; }
.hljs-params { color: #24292e; }
.hljs-deletion { color: #b31d28; background: #ffeef0; }
.hljs-addition { color: #22863a; background: #f0fff4; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* --------------------------- 语法高亮 · 暗色 (vsDark) -------------------- */

html[data-theme="dark"] .md-code { background: #212121; }
html[data-theme="dark"] .md-code-head {
  background: color-mix(in srgb, #ffffff 6%, transparent);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .md-pre { color: #d4d4d4; }

html[data-theme="dark"] .hljs { background: transparent; color: #d4d4d4; }
html[data-theme="dark"] .hljs-comment,
html[data-theme="dark"] .hljs-quote { color: #6a9955; font-style: italic; }
html[data-theme="dark"] .hljs-keyword,
html[data-theme="dark"] .hljs-selector-tag,
html[data-theme="dark"] .hljs-doctag,
html[data-theme="dark"] .hljs-literal { color: #569cd6; }
html[data-theme="dark"] .hljs-type { color: #4ec9b0; }
html[data-theme="dark"] .hljs-string,
html[data-theme="dark"] .hljs-regexp,
html[data-theme="dark"] .hljs-meta .hljs-string { color: #ce9178; }
html[data-theme="dark"] .hljs-number,
html[data-theme="dark"] .hljs-variable,
html[data-theme="dark"] .hljs-template-variable,
html[data-theme="dark"] .hljs-selector-attr,
html[data-theme="dark"] .hljs-selector-pseudo { color: #b5cea8; }
html[data-theme="dark"] .hljs-title,
html[data-theme="dark"] .hljs-section,
html[data-theme="dark"] .hljs-title.class_,
html[data-theme="dark"] .hljs-title.function_ { color: #dcdcaa; font-weight: 600; }
html[data-theme="dark"] .hljs-name,
html[data-theme="dark"] .hljs-selector-id,
html[data-theme="dark"] .hljs-selector-class,
html[data-theme="dark"] .hljs-tag { color: #569cd6; }
html[data-theme="dark"] .hljs-built_in,
html[data-theme="dark"] .hljs-symbol,
html[data-theme="dark"] .hljs-bullet,
html[data-theme="dark"] .hljs-attr,
html[data-theme="dark"] .hljs-attribute { color: #9cdcfe; }
html[data-theme="dark"] .hljs-meta { color: #808080; }
html[data-theme="dark"] .hljs-params { color: #d4d4d4; }
html[data-theme="dark"] .hljs-deletion { color: #f48771; background: rgba(248, 81, 73, 0.12); }
html[data-theme="dark"] .hljs-addition { color: #b5cea8; background: rgba(63, 185, 80, 0.12); }

/* ------------------------------- 表格 ---------------------------------- */

.md-table-wrap {
  margin: 1.3em 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
}
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 420px;
}
.md-table th,
.md-table td {
  padding: 9px 14px;
  text-align: left;
  border-right: 1px solid var(--border);
  vertical-align: top;
}
.md-table th:last-child,
.md-table td:last-child { border-right: 0; }
.md-table thead th {
  background: var(--surface-2);
  font-weight: 700;
  white-space: nowrap;
}
.md-table tbody tr + tr td { border-top: 1px solid var(--border); }
.md-table tbody tr:nth-child(2n) { background: var(--surface-2); }

/* ------------------------------- 提示框 -------------------------------- */

.md-body .admonition,
.md-body .alert {
  margin: 1.2em 0;
  padding: 12px 16px;
  border-radius: var(--radius, 6px);
  border-left: 4px solid var(--primary);
  background: var(--surface-2);
}
.md-body .admonition > *:last-child,
.md-body .alert > *:last-child { margin-bottom: 0; }
.md-body .admonition-title,
.md-body .alert-heading { font-weight: 700; margin-bottom: 6px; }

.md-body .admonition-tip,
.md-body .alert--success { border-left-color: #2e8555; background: rgb(230, 246, 230); }
.md-body .admonition-info,
.md-body .admonition-note,
.md-body .alert--info { border-left-color: #3578e5; background: rgb(238, 249, 253); }
.md-body .admonition-warning,
.md-body .admonition-caution,
.md-body .alert--warning { border-left-color: #d98600; background: rgb(255, 248, 230); }
.md-body .admonition-danger,
.md-body .alert--danger { border-left-color: #d1242f; background: rgb(255, 235, 236); }

html[data-theme="dark"] .md-body .admonition,
html[data-theme="dark"] .md-body .alert { color: var(--text); }
html[data-theme="dark"] .md-body .admonition-tip,
html[data-theme="dark"] .md-body .alert--success { background: rgba(46, 133, 85, 0.16); }
html[data-theme="dark"] .md-body .admonition-info,
html[data-theme="dark"] .md-body .admonition-note,
html[data-theme="dark"] .md-body .alert--info { background: rgba(53, 120, 229, 0.16); }
html[data-theme="dark"] .md-body .admonition-warning,
html[data-theme="dark"] .md-body .admonition-caution,
html[data-theme="dark"] .md-body .alert--warning { background: rgba(217, 134, 0, 0.16); }
html[data-theme="dark"] .md-body .admonition-danger,
html[data-theme="dark"] .md-body .alert--danger { background: rgba(209, 36, 47, 0.18); }

/* ------------------------------- 图片 ---------------------------------- */

.md-body img.md-image,
.md-body p > img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--border);
  cursor: zoom-in;
  margin: 0;
}
.md-figure {
  margin: 1.5em 0;
  text-align: center;
}
.md-figure img.md-image { display: block; margin: 0 auto; }
.md-figure figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ------------------------------- 图片灯箱 ------------------------------ */

.md-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  cursor: zoom-out;
}
.md-lightbox.is-open { opacity: 1; visibility: visible; }
.md-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius, 6px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.md-lightbox.is-open img { transform: scale(1); }

/* ------------------------------- 目录偏移 ------------------------------ */

.md-body :is(h1, h2, h3, h4, h5, h6):target { color: var(--primary); }

/* ------------------------------- 响应式 -------------------------------- */

@media (max-width: 720px) {
  .md-body { font-size: 15.5px; }
  .md-body h1 { font-size: 1.7rem; }
  .md-body h2 { font-size: 1.35rem; }
  .md-body h3 { font-size: 1.15rem; }
  .md-pre { font-size: 12.5px; padding: 13px 14px; }
  .md-anchor { display: none; }
}