/*
 * 文章列表/详情页样式（article.css）
 * 适用页面：/article（列表，body 需加 class="page-article-list"）
 *           /article/:id（详情，body 需加 class="page-article-detail"）
 * 内容：文章卡片、元信息、分类徽章、富文本内容排版、分页、页脚
 * 说明：白色科技风，白色卡片 + 浅灰边框，正文深色，代码块深底。
 */
/* ===== 文章列表页 ===== */
body.page-article-list .main { max-width: 900px; margin: 0 auto; padding: 40px 24px 60px; }
body.page-article-list .list-title { font-size: 28px; font-weight: 800; margin-bottom: 26px; color: #0f172a; }

body.page-article-list .article-card {
  display: flex; align-items: center; gap: 16px; padding: 22px 26px;
  border-radius: 14px; margin-bottom: 14px;
  background: #fff;
  border: 1px solid rgba(100,116,139,.14);
  box-shadow: 0 6px 20px rgba(15,23,42,.05);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body.page-article-list .article-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 12px 32px rgba(59,130,246,.16);
}
body.page-article-list .article-main { flex: 1; min-width: 0; }
body.page-article-list .article-title { font-size: 18px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-article-list .article-excerpt { font-size: 13px; color: #64748b; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-article-list .article-meta { font-size: 12px; color: #94a3b8; margin-top: 10px; display: flex; align-items: center; }
body.page-article-list .article-meta .layui-icon { font-size: 12px; margin-right: 2px; }
body.page-article-list .article-meta span { margin-right: 16px; }
body.page-article-list .cate-tag {
  color: #2563eb; padding: 2px 10px; border-radius: 10px; font-size: 12px;
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25);
}
body.page-article-list .article-arrow { color: #94a3b8; font-size: 20px; flex-shrink: 0; }

body.page-article-list .empty { text-align: center; color: #94a3b8; padding: 90px 0; font-size: 15px; }
body.page-article-list .pagination { text-align: center; margin-top: 30px; color: #94a3b8; font-size: 14px; }
body.page-article-list .pagination a { color: #2563eb; margin: 0 10px; }

/* ===== 文章详情页 ===== */
body.page-article-detail .main { max-width: 820px; margin: 0 auto; padding: 46px 24px 60px; }
body.page-article-detail .back-link { color: #2563eb; font-size: 14px; margin-bottom: 24px; display: inline-block; }
body.page-article-detail .back-link:hover { color: #3b82f6; }

body.page-article-detail .article-box {
  padding: 44px 48px; border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(100,116,139,.14);
  box-shadow: 0 16px 50px rgba(15,23,42,.08);
}
body.page-article-detail .article-box h1 { margin: 0 0 16px; font-size: 30px; font-weight: 800; color: #0f172a; line-height: 1.4; }
body.page-article-detail .article-meta { font-size: 13px; color: #94a3b8; padding-bottom: 22px; border-bottom: 1px solid rgba(100,116,139,.14); display: flex; align-items: center; flex-wrap: wrap; }
body.page-article-detail .article-meta span { margin-right: 20px; }
body.page-article-detail .article-meta .layui-icon { font-size: 13px; margin-right: 3px; }
body.page-article-detail .cate-tag {
  color: #2563eb; padding: 3px 12px; border-radius: 11px; font-size: 12px;
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25);
}
body.page-article-detail .article-content { padding-top: 26px; font-size: 15px; line-height: 1.9; color: #334155; word-break: break-word; }
body.page-article-detail .article-content p { margin: 0 0 16px; }
body.page-article-detail .article-content h1, body.page-article-detail .article-content h2, body.page-article-detail .article-content h3, body.page-article-detail .article-content h4 { color: #0f172a; margin: 22px 0 12px; }
body.page-article-detail .article-content h1 { font-size: 24px; } body.page-article-detail .article-content h2 { font-size: 20px; }
body.page-article-detail .article-content h3 { font-size: 17px; } body.page-article-detail .article-content h4 { font-size: 15px; }
body.page-article-detail .article-content ul, body.page-article-detail .article-content ol { padding-left: 26px; margin: 0 0 16px; }
body.page-article-detail .article-content li { margin-bottom: 6px; }
body.page-article-detail .article-content img { max-width: 100%; border-radius: 10px; }
body.page-article-detail .article-content a { color: #2563eb; }
body.page-article-detail .article-content pre { background: #0f172a; padding: 14px; border-radius: 10px; overflow-x: auto; margin: 0 0 16px; color: #e2e8f0; }
body.page-article-detail .article-content code { background: rgba(100,116,139,.12); padding: 2px 6px; border-radius: 4px; font-size: 13px; color: #be185d; }
body.page-article-detail .article-content pre code { background: transparent; padding: 0; color: inherit; }
body.page-article-detail .article-content blockquote { border-left: 3px solid #3b82f6; margin: 0 0 16px; padding: 8px 16px; color: #64748b; background: rgba(59,130,246,.06); border-radius: 0 8px 8px 0; }
body.page-article-detail .article-content hr { border: none; border-top: 1px solid rgba(100,116,139,.18); margin: 20px 0; }

/* ===== 两页共用 ===== */
footer { text-align: center; color: #94a3b8; font-size: 13px; padding: 30px 0 44px; }

@media (max-width: 640px) {
  body.page-article-detail .article-box { padding: 26px 22px; }
  body.page-article-detail .article-box h1 { font-size: 24px; }
}