/* ========================================
   Markdown渲染组件样式文件 (MarkdownRenderer.css)
   用途：定义内容区域布局和Markdown元素的渲染样式
   ======================================== */

/* ========================================
   内容区域主容器
   ======================================== */

/* 内容区域基础布局 - 使用毛玻璃效果 */
.content-area {
  flex: 1;                                /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  /* 毛玻璃背景效果 */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--color-text);
  width: 100%;
  max-width: 100%;
  height: 100vh;                          /* 全屏高度 */
  overflow: hidden;                       /* 防止内容溢出 */
}

/* 带侧边栏的内容区域 - 添加左边框 */
.content-area.with-sidebar {
  border-left: 1px solid var(--color-border);
}

/* ========================================
   内容头部区域
   ======================================== */

/* 内容头部 - 粘性定位的标题栏 */
.content-header {
  position: sticky;                       /* 粘性定位 */
  top: 0;
  z-index: 10;                           /* 确保在内容之上 */
  padding: 1.75rem clamp(2rem, 5vw, 3rem) 1.25rem;
  /* 毛玻璃头部效果 */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 3px 14px rgba(45, 60, 115, 0.15);
  /* 添加flex布局以支持按钮定位 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 面包屑导航 */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;                        /* 允许换行 */
  gap: 0.45rem;                          /* 项目间距 */
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.8rem;
}

/* 面包屑项目 */
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* 面包屑分隔符 */
.breadcrumb-separator {
  color: rgba(31, 42, 68, 0.3);
}

/* 面包屑文本样式 - 胶囊形状 */
.breadcrumb-text {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;                  /* 完全圆角 */
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(45, 60, 115, 0.12);
}

/* 内容标题 */
.content-title {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 2.6rem); /* 响应式字体大小 */
  font-weight: 600;
  color: var(--color-text);
  flex: 1;                               /* 占据剩余空间 */
  text-align: center;
}

/* ========================================
   功能按钮样式
   ======================================== */

/* 功能按钮容器 */
.action-buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* 功能按钮基础样式 */
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  /* 毛玻璃按钮效果 */
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  color: rgba(31, 42, 68, 0.75);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(45, 60, 115, 0.14);
  outline: none;
}

/* 功能按钮悬停效果 */
.action-button:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(125, 167, 242, 0.4);
  color: var(--color-accent);
  box-shadow: 0 6px 16px rgba(45, 60, 115, 0.18);
  transform: translateY(-1px);
}

/* 功能按钮激活效果 */
.action-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(45, 60, 115, 0.16);
}

/* 成功状态样式 */
.action-button.success {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

/* 错误状态样式 */
.action-button.error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* ========================================
   内容主体区域
   ======================================== */

/* 内容主体 - 滚动容器 */
.content-body {
  flex: 1;                               /* 占据剩余空间 */
  overflow-y: auto;                      /* 垂直滚动 */
  overflow-x: hidden;                    /* 隐藏水平滚动 */
  display: flex;
  justify-content: center;               /* 水平居中 */
  padding: clamp(2rem, 6vw, 3.5rem);    /* 响应式内边距 */
  height: 0;                             /* 配合 flex: 1 实现正确的滚动 */
  min-height: 0;
}

/* Markdown 内容面板 */
.markdown-pane {
  width: min(860px, 100%);               /* 最大宽度限制 */
}

/* ========================================
   Markdown 基础样式
   ======================================== */

/* Markdown 内容容器 */
.markdown-content {
  line-height: 1.75;                     /* 良好的行高 */
  font-size: 1rem;
}

/* 第一个元素去除上边距 */
.markdown-content > *:first-child {
  margin-top: 0;
}

/* ========================================
   Markdown 标题样式
   ======================================== */

/* 所有标题的通用样式 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin: 2rem 0 1rem;                   /* 标题间距 */
  font-weight: 600;
  color: var(--color-text);
  position: relative;                    /* 为锚点定位做准备 */
}

/* 一级标题 - 带下边框 */
.markdown-content h1 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  border-bottom: 2px solid rgba(31, 42, 68, 0.08);
  padding-bottom: 0.6rem;
}

/* 二级标题 - 带下边框 */
.markdown-content h2 {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  border-bottom: 1px solid rgba(31, 42, 68, 0.08);
  padding-bottom: 0.45rem;
}

/* 三级标题 */
.markdown-content h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

/* 四级标题 */
.markdown-content h4 {
  font-size: 1.1rem;
  letter-spacing: 0.01em;                /* 轻微字母间距 */
}

/* 五级标题 */
.markdown-content h5 {
  font-size: 1.05rem;
}

/* 六级标题 */
.markdown-content h6 {
  font-size: 1rem;
}

/* 标题锚点 - 悬停时显示 */
.heading-anchor {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: rgba(31, 42, 68, 0.35);
  opacity: 0;                            /* 默认隐藏 */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 标题悬停时显示锚点 */
.markdown-content h1:hover .heading-anchor,
.markdown-content h2:hover .heading-anchor,
.markdown-content h3:hover .heading-anchor,
.markdown-content h4:hover .heading-anchor {
  opacity: 1;
  transform: translate(-4px, -50%);      /* 向左移动并显示 */
}

/* ========================================
   Markdown 段落和列表样式
   ======================================== */

/* 段落、列表、引用、代码块、表格的间距 */
.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content table {
  margin: 0 0 1.35rem;
}

/* 列表缩进 */
.markdown-content ul,
.markdown-content ol {
  padding-left: 1.5rem;
}

/* 列表项间距 */
.markdown-content li + li {
  margin-top: 0.4rem;
}

/* ========================================
   Markdown 链接样式
   ======================================== */

/* 链接样式 - 带下划线 */
.markdown-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;        /* 下划线粗细 */
  text-underline-offset: 3px;            /* 下划线偏移 */
}

/* ========================================
   Markdown 代码样式
   ======================================== */

/* 行内代码 - 毛玻璃效果 */
.inline-code {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: var(--color-text);
  font-size: 0.95em;
  box-shadow: 0 2px 6px rgba(45, 60, 115, 0.12);
}

/* ========================================
   代码块样式 - 桌面端
   ======================================== */

/* 桌面端代码块容器 */
@media (min-width: 769px) {
  .code-block-wrapper {
    width: clamp(85%, 90%, calc(100vw - 4rem));
    max-width: min(1200px, calc(100vw - 4rem));
    margin: 1.5rem auto;
    background: rgba(246, 248, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 8px 25px rgba(45, 60, 115, 0.18);
    position: relative;
  }
}

/* 代码块头部 - 模拟终端窗口 */
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem 0.75rem 5rem;   /* 左侧留空给窗口按钮 */
  background: rgba(125, 167, 242, 0.12);
  color: var(--color-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;                /* 字母间距 */
  text-transform: uppercase;             /* 大写字母 */
  position: relative;
}

/* 代码块头部装饰 - 占位符 */
.code-block-header::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

/* 代码块头部 - 模拟 macOS 窗口按钮 */
.code-block-header::after {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;                   /* 红色关闭按钮 */
  box-shadow: 
    20px 0 0 #ffbd2e,                   /* 黄色最小化按钮 */
    40px 0 0 #28ca42,                   /* 绿色最大化按钮 */
    0 0 0 1px rgba(0, 0, 0, 0.1),
    20px 0 0 1px rgba(0, 0, 0, 0.1),
    40px 0 0 1px rgba(0, 0, 0, 0.1);
}

/* 代码块头部的复制按钮 */
.code-block-header .code-copy-button {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* 代码复制按钮样式 */
.code-copy-button {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-muted);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  box-shadow: 0 3px 10px rgba(45, 60, 115, 0.16);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 复制按钮悬停状态 */
.code-copy-button:hover {
  color: var(--color-accent);
  border-color: rgba(125, 167, 242, 0.5);
}

/* 复制按钮已复制状态 */
.code-copy-button.copied {
  color: var(--color-accent);
  border-color: rgba(125, 167, 242, 0.65);
}

/* 预格式化文本样式 */
pre {
  margin: 0;
  padding: 1.1rem 1.35rem;
  width: 100%;
  overflow-x: auto;                      /* 水平滚动 */
  overflow-y: auto;                      /* 垂直滚动 */
  font-size: 0.95rem;
  box-sizing: border-box;
  max-width: 100%;
  white-space: pre;                      /* 保持空白字符 */
  line-height: 1.6;
  /* 隐藏滚动条 - 提供更清洁的外观 */
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;              /* IE and Edge */
}

/* 隐藏 WebKit 浏览器的滚动条 */
pre::-webkit-scrollbar {
  display: none;
}

/* 代码块内的代码样式 */
pre code {
  background: transparent !important;
  color: #1f2a44;
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: pre;
  line-height: inherit;
}

/* ========================================
   Markdown 图片样式
   ======================================== */

/* 图片容器 */
.markdown-image {
  margin: 1.6rem 0;
  text-align: center;
}

/* 图片样式 - 毛玻璃边框效果 */
.markdown-image img {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 30px rgba(45, 60, 115, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 图片说明文字 */
.markdown-image figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ========================================
   Markdown 引用样式
   ======================================== */

/* 引用块样式 - 左侧彩色边框 */
.markdown-content blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid rgba(125, 167, 242, 0.5);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0 14px 14px 0;          /* 右侧圆角 */
  color: var(--color-text);
  box-shadow: 0 4px 12px rgba(45, 60, 115, 0.14);
}

/* ========================================
   Markdown 分隔线样式
   ======================================== */

/* 水平分隔线 */
.markdown-content hr {
  border: none;
  border-top: 1px dashed rgba(31, 42, 68, 0.12);
  margin: 2.25rem 0;
}

/* ========================================
   Markdown 表格样式
   ======================================== */

/* 表格容器 - 响应式滚动 */
.table-wrapper {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(45, 60, 115, 0.16);
}

/* 表格基础样式 */
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;                      /* 最小宽度确保可读性 */
}

/* 表格单元格样式 */
.table-wrapper th,
.table-wrapper td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(31, 42, 68, 0.1);
  text-align: left;
}

/* 表格头部样式 */
.table-wrapper th {
  color: var(--color-muted);
  font-weight: 600;
}

/* 最后一行去除下边框 */
.table-wrapper tr:last-child td {
  border-bottom: none;
}

/* ========================================
   外部链接样式
   ======================================== */

/* 外部链接容器 */
.external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* 外部链接图标 */
.external-link-icon {
  font-size: 0.8rem;
}

/* ========================================
   加载状态样式
   ======================================== */

/* 加载内容容器 */
.loading-content {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 3rem 0;
  color: var(--color-muted);
}

/* 加载动画 - 旋转圆圈 */
.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(111, 123, 146, 0.25);
  border-top: 2px solid var(--color-accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;   /* 无限旋转动画 */
}

/* 旋转动画关键帧 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   欢迎页面样式
   ======================================== */

/* 欢迎消息容器 */
.welcome-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem);
  min-height: calc(100vh - 7rem);
}

/* 欢迎内容卡片 */
.welcome-content {
  text-align: center;
  max-width: 520px;
  padding: 2.4rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 20px 36px rgba(45, 60, 115, 0.2);
}

/* 欢迎页标题 */
.welcome-content h1 {
  margin-bottom: 0.9rem;
  font-size: clamp(2.1rem, 3.2vw, 2.6rem);
}

/* 欢迎页描述文字 */
.welcome-content p {
  margin: 0 auto 1.6rem;
  color: var(--color-muted);
}

/* 功能特性网格 */
.welcome-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
}

/* 功能特性项目 */
.feature-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(31, 42, 68, 0.75);
  box-shadow: 0 4px 10px rgba(45, 60, 115, 0.16);
  transition: all 0.3s ease;
}

/* 功能特性项目悬停效果 */
.feature-item:hover {
  transform: translateY(-2px);           /* 向上浮动 */
  box-shadow: 0 7px 16px rgba(45, 60, 115, 0.22);
  background: rgba(255, 255, 255, 0.22);
}

/* 功能特性图标 */
.feature-icon {
  font-size: 1.1rem;
}

/* ========================================
   字数统计样式
   ======================================== */

/* 字数统计容器 */
.word-count-container {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px dashed rgba(31, 42, 68, 0.12);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 字数统计信息 */
.word-count-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  /* 毛玻璃效果 */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(45, 60, 115, 0.14);
  transition: all 0.3s ease;
}

/* 字数统计图标 */
.word-count-icon {
  font-size: 1rem;
  opacity: 0.8;
}

/* 字数统计文本 */
.word-count-text {
  color: rgba(31, 42, 68, 0.75);
  letter-spacing: 0.02em;
}

/* 悬停效果 */
.word-count-info:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(125, 167, 242, 0.3);
  box-shadow: 0 6px 16px rgba(45, 60, 115, 0.18);
  transform: translateY(-1px);
}

/* ========================================
   响应式设计 - 移动端适配
   ======================================== */

/* 手机屏幕适配 (768px 以下) */
@media (max-width: 768px) {
  /* 移动端内容区域优化 */
  .content-area {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 移动端内容头部优化 */
  .content-header {
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 移动端 Markdown 面板优化 */
  .markdown-pane {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 移动端隐藏标题锚点 */
  .heading-anchor {
    display: none;
  }

  /* 移动端面包屑导航优化 - 增大1.3倍 */
  .breadcrumbs {
    font-size: 1.105rem;                   /* 原来是 0.85rem */
    gap: 0.585rem;                         /* 原来是 0.45rem */
    margin-bottom: 1.04rem;                /* 原来是 0.8rem */
  }

  /* 移动端面包屑项目间距增大 */
  .breadcrumb-item {
    gap: 0.52rem;                          /* 原来是 0.4rem */
  }

  /* 移动端面包屑文本样式增大 */
  .breadcrumb-text {
    padding: 0.26rem 0.715rem;             /* 原来是 0.2rem 0.55rem */
  }

  /* 移动端内容标题优化 - 增大1.3倍 */
  .content-title {
    font-size: clamp(1.463rem, 4.55vw, 1.788rem); /* 原来是 clamp(1.125rem, 3.5vw, 1.375rem) */
    line-height: 1.2;
    margin-bottom: 0.488rem;               /* 原来是 0.375rem */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 移动端内容主体优化 */
  .content-body {
    padding: clamp(0.5rem, 1.5vw, 0.75rem) 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 移动端 Markdown 内容优化 - 增大1.3倍 */
  .markdown-content {
    font-size: clamp(1.04rem, 2.86vw, 1.17rem); /* 原来是 clamp(0.8rem, 2.2vw, 0.9rem) */
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 移动端标题尺寸调整 - 增大1.3倍 */
  .markdown-content h1 {
    font-size: clamp(1.788rem, 5.85vw, 2.275rem); /* 原来是 clamp(1.375rem, 4.5vw, 1.75rem) */
    line-height: 1.1;
    margin: 1.625rem 0 1.138rem 0;         /* 原来是 1.25rem 0 0.875rem 0 */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .markdown-content h2 {
    font-size: clamp(1.463rem, 4.55vw, 1.95rem); /* 原来是 clamp(1.125rem, 3.5vw, 1.5rem) */
    line-height: 1.2;
    margin: 1.3rem 0 0.813rem 0;           /* 原来是 1rem 0 0.625rem 0 */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .markdown-content h3 {
    font-size: clamp(1.3rem, 3.9vw, 1.625rem); /* 原来是 clamp(1rem, 3vw, 1.25rem) */
    line-height: 1.2;
    margin: 1.138rem 0 0.65rem 0;          /* 原来是 0.875rem 0 0.5rem 0 */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .markdown-content h4 {
    font-size: clamp(1.235rem, 3.64vw, 1.463rem); /* 原来是 clamp(0.95rem, 2.8vw, 1.125rem) */
    line-height: 1.3;
    margin: 0.975rem 0 0.488rem 0;         /* 原来是 0.75rem 0 0.375rem 0 */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .markdown-content h5 {
    font-size: clamp(1.17rem, 3.25vw, 1.3rem); /* 原来是 clamp(0.9rem, 2.5vw, 1rem) */
    line-height: 1.3;
    margin: 0.813rem 0 0.488rem 0;         /* 原来是 0.625rem 0 0.375rem 0 */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .markdown-content h6 {
    font-size: clamp(1.105rem, 2.86vw, 1.235rem); /* 原来是 clamp(0.85rem, 2.2vw, 0.95rem) */
    line-height: 1.3;
    margin: 0.65rem 0 0.325rem 0;          /* 原来是 0.5rem 0 0.25rem 0 */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 移动端段落优化 - 增大1.3倍 */
  .markdown-content p {
    margin: 0.813rem 0;                    /* 原来是 0.625rem 0 */
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 移动端列表项优化 - 增大1.3倍 */
  .markdown-content li {
    margin: 0.325rem 0;                    /* 原来是 0.25rem 0 */
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 移动端引用块优化 - 增大1.3倍 */
  .markdown-content blockquote {
    margin: 1.138rem 0;                    /* 原来是 0.875rem 0 */
    padding: 0.813rem 1.138rem;            /* 原来是 0.625rem 0.875rem */
    font-size: clamp(1.04rem, 2.86vw, 1.17rem); /* 原来是 clamp(0.8rem, 2.2vw, 0.9rem) */
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 移动端代码块容器优化 - 增大1.3倍 */
  .code-block-wrapper {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    margin: 1.138rem 0 1.138rem 0;         /* 原来是 0.875rem 0 0.875rem 0 */
    background: rgba(246, 248, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 7.8px;                  /* 原来是 6px */
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 8px 25px rgba(45, 60, 115, 0.18);
    position: relative;
  }

  /* 移动端代码块头部优化 - 增大1.3倍 */
  .code-block-header {
    padding: 0.488rem 0.65rem;             /* 原来是 0.375rem 0.5rem */
    font-size: 0.91rem;                    /* 原来是 0.7rem */
  }

  /* 移动端代码块控制按钮优化 - 增大1.3倍 */
  .code-block-controls button {
    padding: 0.26rem 0.52rem;              /* 原来是 0.2rem 0.4rem */
    font-size: 0.845rem;                   /* 原来是 0.65rem */
  }

  /* 移动端复制按钮优化 - 增大1.3倍 */
  .copy-button {
    width: 31.2px;                         /* 原来是 24px */
    height: 31.2px;                        /* 原来是 24px */
    font-size: 13px;                       /* 原来是 10px */
    top: 0.488rem;                         /* 原来是 0.375rem */
    right: 0.488rem;                       /* 原来是 0.375rem */
  }

  /* 移动端预格式化文本优化 - 增大1.3倍 */
  .markdown-content pre {
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre;
    line-height: 1.4;
    padding: 0.78rem 1.04rem;             /* 原来是 0.6rem 0.8rem */
    font-size: 0.975rem;                  /* 原来是 0.75rem */
    /* 隐藏移动端滚动条 */
    scrollbar-width: none;               /* Firefox */
    -ms-overflow-style: none;            /* IE and Edge */
  }

  /* 移动端行内代码优化 - 增大1.3倍 */
  .inline-code {
    padding: 0.195rem 0.52rem;            /* 原来是 0.15rem 0.4rem */
    border-radius: 7.8px;                 /* 原来是 6px */
    font-size: 1.235em;                   /* 原来是 0.95em */
  }

  /* 移动端表格横向滚动优化 */
  .table-wrapper {
    /* 确保表格容器可以横向滚动 */
    overflow-x: auto;
    overflow-y: hidden;
    /* 添加滚动提示 */
    position: relative;
    /* 优化滚动体验 */
    -webkit-overflow-scrolling: touch;
    /* 调整边距以适应移动端 */
    margin: 1.3rem 0;                     /* 增大1.3倍 */
    border-radius: 10.4px;                /* 增大1.3倍，原来是 8px */
  }

  .table-wrapper::after {
    content: "← 滑动查看更多 →";
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--color-muted);
    opacity: 0.7;
    white-space: nowrap;
    pointer-events: none;
  }

  .table-wrapper table {
    /* 确保表格有足够的最小宽度 */
    min-width: 600px;                     /* 移动端增加最小宽度 */
  }

  /* 移动端表格滚动条样式优化 */
  .table-wrapper::-webkit-scrollbar {
    height: 6px;                          /* 滚动条高度 */
  }

  .table-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  .table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
  }

  .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  /* Firefox 滚动条样式 */
  .table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
  }

  /* 隐藏移动端 WebKit 浏览器的滚动条 */
  .markdown-content pre::-webkit-scrollbar {
    display: none;
  }

  /* 移动端图片优化 - 增大1.3倍 */
  .markdown-content img {
    margin: 1.138rem auto;                 /* 原来是 0.875rem auto */
    border-radius: 7.8px;                  /* 原来是 6px */
    max-width: calc(100vw - 1rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* 移动端表格优化 - 增大1.3倍 */
  .markdown-content table {
    font-size: 1.04rem;                   /* 原来是 0.8rem */
    width: 100%;
    max-width: calc(100vw - 1rem);
    overflow-x: auto;
    display: block;
  }

  /* 移动端表格单元格优化 - 增大1.3倍 */
  .markdown-content th,
  .markdown-content td {
    padding: 0.488rem 0.65rem;            /* 原来是 0.375rem 0.5rem */
    min-width: 104px;                      /* 原来是 80px */
  }

  /* 移动端内容头部布局优化 */
  .content-header {
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
  }

  /* 移动端标题样式调整 */
  .content-header .content-title {
    flex: 1;
    text-align: left;
    font-size: 1.5rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 移动端功能按钮适配 */
  .action-buttons {
    gap: 0.6rem;
  }

  .action-button {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  /* 移动端功能特性项目优化 */
  .feature-item {
    flex-direction: column;              /* 垂直排列 */
  }

  /* 移动端字数统计适配 */
  .word-count-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .word-count-info {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    gap: 0.4rem;
  }

  .word-count-icon {
    font-size: 0.9rem;
  }
}

/* ========================================
   桌面端样式优化 - 缩小标题和导航栏
   ======================================== */

/* 桌面端媒体查询 - 屏幕宽度大于768px */
@media (min-width: 769px) {
  /* 桌面端内容标题缩小0.5倍 */
  .content-title {
    font-size: clamp(1rem, 1.75vw, 1.3rem); /* 原来是 clamp(2rem, 3.5vw, 2.6rem) */
  }

  /* 桌面端面包屑导航缩小0.5倍 */
  .breadcrumbs {
    font-size: 0.425rem;                 /* 原来是 0.85rem */
    gap: 0.225rem;                       /* 原来是 0.45rem */
    margin-bottom: 0.4rem;               /* 原来是 0.8rem */
  }

  /* 桌面端面包屑项目间距缩小 */
  .breadcrumb-item {
    gap: 0.2rem;                         /* 原来是 0.4rem */
  }

  /* 桌面端面包屑文本样式缩小 */
  .breadcrumb-text {
    padding: 0.1rem 0.275rem;            /* 原来是 0.2rem 0.55rem */
  }
}