/* 1. 必须放在最顶部的字体引入 (网络请求必须在第一行) */
@import url('https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;700&family=Roboto+Mono&family=Merriweather:wght@400;700&display=swap');

/* 2. 利用 CSS 变量进行全局控制 (完全兼容 HTML) */
:root {
  --bs-body-font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --bs-body-color: #333;
  --bs-body-line-height: 1.6;
  --bs-link-color: #1a73e8;
  --bs-nav-pills-link-active-bg: #efc078;
}

/* 3. 正文基础设置 */
body {
  font-family: var(--bs-body-font-family);
  font-size: 16px;
  color: var(--bs-body-color);
  line-height: var(--bs-body-line-height);
}

/* 4. 标题层级配色与字体：层次分明 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', 'Noto Sans SC', 'PingFang SC', sans-serif;
  font-weight: 700;
}
h1 { color: #1a73e8; } /* Google 蓝，突出大标题 */
h2 { color: #2c3e50; } /* 深蓝灰，稳重 */
h3, h4, h5, h6 { color: #444; } /* 次级标题更柔和 */

/* 5. 代码块：用 Roboto Mono，稍微小一点，行距紧凑 */
pre {
  /* 新增这两行：防止长代码撑破正文容器，强制在代码块内部滚动 */
  max-width: 100%;
  overflow-x: auto;
}

pre code {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.98em;
  background-color: #f8f8f8;
  padding: 0.5em;
  border-radius: 4px;
  /* 确保代码块内部的文字不会强行换行，而是保持格式并允许滚动 */
  white-space: pre; 
}

/* 6. 行内代码：GitHub 极简风 */
:not(pre) > code {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.98em;
  background-color: rgba(175, 184, 193, 0.2); 
  padding: 0.2em 0.4em;
  border-radius: 4px;
  color: inherit; 
  /* 新增以下三行，强制允许长代码在词内断开换行 */
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal; 
}

/* 7. 链接样式优化 */
a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 8. 图片响应式与居中优化 */
img {
  max-width: 100%;
  height: auto;
}

.clipped {
  clip-path: circle();
}

.centre-it {
  margin-left: auto;
  margin-right: auto;
}

img.rounded {
  object-fit: cover;
  border-radius: 10% !important;
  height: 240px;
  width: 250px;
  margin-top: 18px;
}

@media screen and (max-width: 952px) {
  img.rounded {
    height: auto; /* 修复了原代码在移动端可能会拉伸变形的问题 */
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 图表标题呼应 LaTeX 的加粗设定 */
.figure-caption {
  text-align: center;
  font-size: 0.85em;
  font-weight: bold; 
  color: #555;
  margin-top: 8px;
}

/* 9. 输出区域滚动条美化 */
.output-scroll {
  max-height: 500px;
  overflow-y: auto; /* 从 scroll 改为 auto，不需要滚动时隐藏滚动条 */
  margin-bottom: 20px;
}
.output-scroll::-webkit-scrollbar {
  width: 8px;
}
.output-scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

/* 10. 侧边栏 Logo */
.sidebar-logo {
  max-width: 100% !important;
}

/* 11. 定义章节名言环境 (Chapter Quote) */
.chapquote {
  text-align: right;
  font-style: italic;
  color: #666;
  margin-top: 1em;
  margin-bottom: 2em;
  margin-left: auto;
  width: 80%;
}

/* 12. 表格优化：字体缩小，隔行背景 */
table {
  font-size: 0.95em; 
}

.small-table {
  font-size: 14px;
  line-height: 1.2;
}
.small-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.small-table th {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}