/* 前台文章列表与详情页样式 */
.article-body { background: #f5f6f8; min-height: 100vh; }
.article-header { background: #fff; border-bottom: 1px solid #eee; padding: 18px 0; }
.article-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.article-header .brand { font-size: 20px; font-weight: 700; color: #333; text-decoration: none; }
.article-header .brand:hover { color: #1890ff; }
.article-header .nav-links a { color: #666; margin-left: 20px; text-decoration: none; }
.article-header .nav-links a:hover { color: #1890ff; }

.article-main { padding: 30px 0 50px; }
.article-card { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 20px 24px; margin-bottom: 16px; transition: box-shadow .2s; }
.article-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.article-card-row { display: flex; gap: 16px; }
.article-card-thumb { flex-shrink: 0; width: 160px; height: 100px; overflow: hidden; border-radius: 4px; background: #f0f2f5; }
.article-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card-body { flex: 1; min-width: 0; }
@media (max-width: 640px) {
    .article-card-row { flex-direction: column; }
    .article-card-thumb { width: 100%; height: 180px; }
}
.article-card .article-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.article-card .article-title a { color: #333; text-decoration: none; }
.article-card .article-title a:hover { color: #1890ff; }
.article-card .article-meta { color: #999; font-size: 13px; margin-bottom: 10px; }
.article-card .article-meta span { margin-right: 16px; }
.article-card .article-excerpt { color: #666; font-size: 14px; line-height: 1.7; margin: 0; }
.article-card .article-tags { margin-top: 12px; }
.article-card .article-tags .tag { display: inline-block; background: #f0f5ff; color: #1890ff; font-size: 12px; padding: 2px 8px; border-radius: 3px; margin-right: 8px; text-decoration: none; }

/* 分页(匹配ThinkPHP默认分页结构 ul.pagination > li) */
.pagination { text-align: center; margin: 30px 0; padding: 0; list-style: none; }
.pagination li { display: inline-block; margin: 0 4px; }
.pagination li a, .pagination li span {
    display: inline-block; min-width: 34px; padding: 6px 10px;
    background: #fff; border: 1px solid #ddd; border-radius: 4px;
    color: #666; text-decoration: none; box-sizing: border-box; font-size: 14px;
}
.pagination li.active span { background: #1890ff; color: #fff; border-color: #1890ff; }
.pagination li.disabled span { color: #bbb; background: #fafafa; border-color: #eee; cursor: not-allowed; }
.pagination li a:hover { border-color: #1890ff; color: #1890ff; }

/* 详情页 */
.article-detail { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 30px 34px; }
.article-detail h1.article-detail-title { font-size: 26px; margin: 0 0 16px; color: #222; }
.article-detail .article-detail-meta { color: #999; font-size: 13px; border-bottom: 1px solid #eee; padding-bottom: 16px; margin-bottom: 22px; }
.article-detail .article-detail-meta span { margin-right: 18px; }
.article-detail .article-detail-meta a { color: #1890ff; text-decoration: none; }
.article-detail .article-detail-content { font-size: 15px; line-height: 1.9; color: #333; word-wrap: break-word; }
.article-detail .article-detail-content img { max-width: 100%; height: auto; }
.article-detail .article-detail-content h1,.article-detail .article-detail-content h2,.article-detail .article-detail-content h3,.article-detail .article-detail-content h4 { margin: 1.2em 0 .6em; }
.article-detail .article-detail-content p { margin: 0 0 1em; }
.article-detail .article-detail-content blockquote { border-left: 4px solid #1890ff; margin: 1em 0; padding: 8px 16px; background: #f7faff; color: #555; }
/* 代码块(块级):底色/边框/内边距由 pre 提供,code 只负责字体和着色 */
.article-detail .article-detail-content pre {
    background: #f6f8fa; border: 1px solid #e6e9ee; border-radius: 4px;
    padding: 14px 16px; margin: 0 0 1em; overflow: auto;
}
/* 额外的类名是必要的:highlight.js 主题里的 pre code.hljs 也定义了 padding/background */
.article-detail .article-detail-content pre code,
.article-detail .article-detail-content pre code.hljs {
    display: block; background: none; border: 0; padding: 0; margin: 0;
    color: #24292e; overflow-x: auto; white-space: pre;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px; line-height: 1.65;
}
/* 行内代码 */
.article-detail .article-detail-content code {
    background: #f0f2f5; padding: 2px 5px; border-radius: 3px;
    font-family: Consolas, Monaco, "Courier New", monospace; font-size: 13px;
}
.article-detail .article-detail-content a { color: #1890ff; }

.article-detail-nav { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid #eee; font-size: 14px; color: #999; }
.article-detail-nav a { color: #1890ff; text-decoration: none; }
.article-related { margin-top: 20px; }
.article-related h3 { font-size: 16px; color: #333; margin: 0 0 12px; }
.article-related ul { list-style: none; padding: 0; margin: 0; }
.article-related li { padding: 6px 0; border-bottom: 1px dashed #eee; }
.article-related li a { color: #666; text-decoration: none; font-size: 14px; }
.article-related li a:hover { color: #1890ff; }

.article-footer { background: #fff; border-top: 1px solid #eee; padding: 20px 0; text-align: center; color: #999; font-size: 13px; }
.article-search { display: flex; }
.article-search input { border: 1px solid #ddd; border-radius: 4px 0 0 4px; padding: 6px 10px; width: 180px; outline: none; }
.article-search button { border: 1px solid #1890ff; background: #1890ff; color: #fff; border-radius: 0 4px 4px 0; padding: 6px 14px; cursor: pointer; }
.sidebar { }
.sidebar .widget { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 18px; margin-bottom: 16px; }
.sidebar .widget h3 { font-size: 15px; color: #333; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; }
.sidebar .widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar .widget li { margin-bottom: 8px; }
.sidebar .widget li a { color: #666; text-decoration: none; font-size: 14px; }
.sidebar .widget li a:hover { color: #1890ff; }
.sidebar .widget li.active a { color: #1890ff; font-weight: 600; }