/* 整体三栏布局 */
.xuexi-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 20px;
  overflow-x: hidden;
}

/* 文章主体样式 */
.article {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  min-width: 0;
}

.article h1,
.article h2,
.article h3 { font-weight: 800; color: #111827; }

.article h1 { font-size: 28px; margin: 0; }
.article .title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; margin-bottom: 12px; }
.article .rating { font-size: 16px; }
.article .time { font-size: 16px; color:#878d94}
.article h2 { font-size: 22px; margin: 22px 0 10px; }
.article h3 { font-size: 18px; margin: 16px 0 8px; }
.article p { font-size: 16px; line-height: 1.75; color: #374151; }

/* 列表：提升可读性，支持嵌套样式 */
.article ul,
.article ol {
  margin: 10px 0 16px;
  padding-left: 4ch; /* 一级缩进：4 个字符宽度，更符合“4缩进”的要求 */
  color: #334155; /* 文本颜色更清晰 */
}
.article li { margin: 6px 0; }

/* 无序列表不同层级的项目符号与颜色 */
.article ul { list-style-type: disc; }
.article ul ul { list-style-type: circle; }
.article ul ul ul { list-style-type: square; }
.article ul li::marker { color: #334155; }         /* 一级：蓝色较深 */
.article ul ul li::marker { color: #334155; }      /* 二级：蓝色稍亮 */
.article ul ul ul li::marker { color: #334155; }   /* 三级：青蓝 */

/* 有序列表不同层级的编号与颜色 */
.article ol { list-style-type: decimal; }
.article ol ol { list-style-type: lower-alpha; }
.article ol ol ol { list-style-type: lower-roman; }
.article ol li::marker { color: #334155; }
.article ol ol li::marker { color: #334155;}
.article ol ol ol li::marker { color: #334155;}

/* 代码块样式优化：默认 <code> 块级显示；<code class="same-line"> 行内显示 */
.article code {
  display: block; /* 默认换行显示 */
  position: relative;
  background: #f8fafc; /* 更干净的浅底 */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 16px 0 16px; /* 上下为 0，右侧微缩至 12px 更紧凑 */
  color: #0f172a; /* 深色文本 */
  white-space: pre-wrap; /* 保留换行 */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5; /* 减少行高，显著收紧上下空间 */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}
/* 忽略首尾行的“半行距”：
   - 通过 ::first-line 将首行行高设得更小
   - 通过 ::after 使用负 margin 裁剪尾行的额外留白（近似修剪） */
.article code::first-line { line-height: 1; }
.article code::after { content: ""; display: block; height: 0; margin-bottom: -0.25em; }
.article code::before {
  /* 左侧高亮竖条（更易分辨代码块）*/
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #f59e0b; /* amber-500 */
  border-radius: 8px 0 0 8px;
}

/* 行内代码：与文字同一行显示 */
.article code.line {
  display: inline;
  background: #eef0f1;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0 6px;
  white-space: normal; /* 允许在行内换行 */
}
.article code.line::before { display: none; }

.article a { color: #1a73e8; text-decoration: none; }
.article a:hover { text-decoration: underline; }

/* 统一 strong 在段落与代码块中的表现（粗细与颜色同步）*/
.article p strong,
.article code strong {
  font-weight: 800; /* 与正文强调一致的权重 */
  color: #111827;  /* 与标题文本一致的深色，突出强调 */
}

/* 单图：half 居中显示，all 铺满 */
.article img { display: block; height: auto; border-radius: 8px; }
.article img.half { width: 50%; margin: 10px auto; }
.article img.all { width: 100%; margin: 10px 0; }

/* 组合图片并排 */
.img-row { display: flex; gap: 12px; }
.img-row img { flex: 1; }

/* 右侧栏容器（在 you1/you2 中单独控制 sticky）*/
.right-side { display: flex; flex-direction: column; gap: 16px; }

.table-wrap { --col-w: 190px; width: 100%; max-width: calc((var(--col-w) + 24px) * 3); margin: 16px auto; overflow-x: auto; overflow-y: hidden; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; scrollbar-gutter: stable; background: #fff; }
.x-table { border-collapse: collapse; width: max-content; }
.x-table thead th { background: rgba(26,115,232,.12); font-weight: 800; color: #0f172a; }
.x-table th, .x-table td { text-align: left; padding: 10px 20px; min-width: var(--col-w); font-size: 14px; line-height: 1.75; color: #374151; }
.x-table td { font-weight: 400; }
.x-table tbody tr { border-top: 1px solid #e5e7eb; }

.table-line-bold .x-table tr > *:first-child { font-weight: 800; }