*, *::before, *::after { box-sizing: border-box; }
:root {
        --brand-primary: #12a0ad;
        --brand-secondary: #2DA77A;
        --brand-soft: #f4fbfb;
        --text-main: #2d3748;
        --text-muted: #718096;
        --bg-body: #f7fafc;
    }
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background-color: var(--bg-body);
        margin: 0; padding: 0; line-height: 1.6;
    }
    .container {padding: 0 16px; }
/* 双栏响应式结构 */
.layout-grid { display: block; margin-top: 24px; }
@media(min-width: 1024px) {
    .layout-grid { display: table; width: 100%; table-layout: fixed; }
    .main-content { display: table-cell; width: 68%; vertical-align: top; padding-right: 32px; }
    .sidebar { display: table-cell; width: 32%; vertical-align: top; }
}

.breadcrumbs { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-primary); }

.card { background: #ffffff; border-radius: 16px; padding: 24px; border: 1px solid #edf2f7; margin-bottom: 24px; }
.category-header h1 { font-size: 24px; color: #1a202c; margin: 0 0 8px 0; }
.category-header p { font-size: 14px; color: var(--text-muted); margin: 0; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { font-size: 12px; padding: 4px 12px; background: #f7fafc; color: #4a5568; border-radius: 9999px; text-decoration: none; border: 1px solid #e2e8f0; }
.tag.active { background: var(--brand-soft); color: var(--brand-primary); border-color: rgba(18,160,173,0.3); }

/* 文章列表项 - 纯表格布局解决 flex 在老旧爬虫上的碎裂问题 */
.article-item { background: #ffffff; border-radius: 16px; padding: 16px; border: 1px solid #edf2f7; margin-bottom: 16px; display: block; text-decoration: none; color: inherit; }
.article-item:hover { border-color: var(--brand-primary); }
.article-table { display: table; width: 100%; }
.article-img-cell { display: table-cell; width: 100px; vertical-align: top; }
@media(min-width: 768px) { .article-img-cell { width: 160px; } }
.article-img { width: 100%; height: 75px; background-size: cover; background-position: center; border-radius: 12px; background-color: #e2e8f0; }
@media(min-width: 768px) { .article-img { height: 110px; } }
.article-info-cell { display: table-cell; vertical-align: top; padding-left: 16px; }
.article-item h2 { font-size: 16px; margin: 0 0 8px 0; color: #1a202c; line-height: 1.4; }
@media(min-width: 768px) { .article-item h2 { font-size: 18px; } }
.article-item p { display: none; font-size: 14px; color: var(--text-muted); margin: 0 0 8px 0; }
@media(min-width: 768px) { .article-item p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
.article-meta { font-size: 12px; color: #a0aec0; }
.article-meta span { margin-right: 12px; }

/* 分页 */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 32px 0; }
.page-btn { padding: 8px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; color: #4a5568; font-size: 14px; }
.page-btn.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); font-weight: bold; }

/* 侧边栏 */
.sidebar-title { font-size: 16px; font-weight: bold; margin-top: 0; margin-bottom: 16px; display: flex; align-items: center; }
.sidebar-title::before { content: ""; display: inline-block; width: 4px; height: 16px; background: var(--brand-primary); border-radius: 2px; margin-right: 8px; }
.hot-list { list-style: none; padding: 0; margin: 0; }
.hot-list li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid #f7fafc; font-size: 14px; }
.hot-list li::before { position: absolute; left: 0; top: 10px; width: 18px; height: 18px; background: #edf2f7; color: #718096; font-size: 11px; font-weight: bold; border-radius: 4px; text-align: center; line-height: 18px; }
.hot-list li:nth-child(1)::before { background: #fff5f5; color: #e53e3e; content: "1"; }
.hot-list li:nth-child(2)::before { background: #fffaf0; color: #dd6b20; content: "2"; }
.hot-list li:nth-child(3)::before { background: #f0fff4; color: #38a169; content: "3"; }
.hot-list a { color: #4a5568; text-decoration: none; }
.hot-list a:hover { color: var(--brand-primary); }

.promo-box { background: linear-gradient(135deg, var(--brand-secondary), #248a63); color: #ffffff; border-radius: 16px; padding: 24px; text-align: center; margin-top: 24px; }
.promo-box h3 { margin: 0 0 8px 0; font-size: 18px; }
.promo-box p { font-size: 13px; color: rgba(255,255,255,0.85); margin: 0 0 16px 0; }
.promo-btn { display: block; width: 100%; background: #ffffff; color: var(--brand-secondary); font-weight: bold; padding: 10px; border-radius: 12px; text-decoration: none; font-size: 14px; }

footer { background: #ffffff; border-top: 1px solid #e2e8f0; padding: 24px 0; font-size: 12px; color: var(--text-muted); margin-top: 48px; text-align: center; }