/* --- 悬浮目录样式 (TOC) --- */

/* 1. 默认移动端/小屏幕：不改变，保持原样（目录在文章开头） */

/* 2. 大屏幕（宽屏）：将目录“拔”出来固定在右侧 */
@media screen and (min-width: 1300px) {
  .table-of-contents {
    position: fixed !important; /* 强制固定定位 */
    top: 100px;                 /* 距离顶部 100px */
    left: 50%;                  /* 以屏幕中心为基准 */
    margin-left: 450px;         /* 向右偏移：文章宽度的一半 + 间距 */
                                /* 这里的 450px 需要根据你的文章宽度调整 */
    
    width: 240px;               /* 目录宽度 */
    max-height: 80vh;           /* 最大高度，防止太长超出屏幕 */
    overflow-y: auto;           /* 内容过多时显示滚动条 */
    z-index: 999;               /* 保证显示在最上层 */
    
    /* 可选：美化外观 */
    background-color: var(--background); /* 保持背景色一致 */
    padding: 15px;
    border-left: 2px solid var(--accent); /* 左侧加一条主题色的竖线 */
    font-size: 0.9rem;
  }

  /* 调整目录标题 */
  .table-of-contents h2 {
    margin-top: 0;
    font-size: 1.1rem;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  /* 调整列表样式 */
  .table-of-contents ul {
    list-style: none;
    padding-left: 0;
  }

  .table-of-contents li {
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .table-of-contents a {
    text-decoration: none;
    color: var(--color);
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .table-of-contents a:hover {
    opacity: 1;
    color: var(--accent);
  }

  
}
/* 隐藏目录的标题 */
.table-of-contents h2 {
    display: none !important;
}

/* 亮色模式代码框优化 */
:root {
  --syntax-code-border-color: #d0d7de; /* 边框色 */
}

pre {
  background-color: #181e29 !important; /* GitHub 风格的浅灰背景 */
  border: 1px solid var(--syntax-code-border-color) !important;
  border-radius: 6px;
}
:root {
  --syntax-func-color: #e481b4;
  --syntax-var-color: #6f42c1;
  --syntax-value-color: #032f62;
  --syntax-punctuation-color: #24292e;
  --syntax-comment-color: #6a737d; 
}

/* --- 修改代码块的默认文字颜色 --- */
pre code {
  /* 这里的颜色是代码块的基础颜色 */
  /* 推荐： #abb2bf (Atom One Dark 风格灰白色) 或 #24292e (GitHub 风格深色) */
  color: hsl(216, 17%, 94%) !important; 
}

/* 使用 :not(pre code) 选择器，确保只修改行内代码，不影响大块的代码框 */
code:not(pre code) {
  
  /* 1. 修改背景颜色 */
  /* 默认是透明的主题色，这里可以改成你喜欢的颜色 */
  /* 推荐：浅灰色 #f3f4f4 或 浅红色背景 #fff5f5 */
  background-color: #c7e0f6 !important; 
  
  /* 2. 修改代码文字颜色 */
  /* 默认是主题色，这里可以改成深色或红色 */
  /* 推荐：红色 #c7254e 或 深灰 #333333 */
  color: #0c0c0c !important; 




}