/* ========== 全局变量 ========== */
:root {
    --primary: #c62828; --primary-dark: #a31515; --primary-light: #ffebee;
    --accent: #ff6600; --text: #222; --text-light: #555; --text-muted: #999;
    --bg: #f5f5f5; --card: #fff; --border: #e8e8e8; --radius: 6px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06); --max-width: 1200px;
    --font: 'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }

/* ========== 顶部工具栏 ========== */
.top-bar { background:#1a1a1a; color:#ccc; font-size:0.8em; padding:4px 0; }
.top-bar-inner { max-width:var(--max-width); margin:0 auto; display:flex; justify-content:space-between; padding:0 20px; }
.top-divider { margin:0 8px; color:#555; }
.top-right a { color:#ccc; margin-left:15px; }
.top-right a:hover { color:#fff; }

/* ========== 主导航 ========== */
.main-header { background:var(--primary); color:#fff; position:sticky; top:0; z-index:1000; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.header-inner { max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; height:56px; padding:0 20px; }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-icon { width:38px; height:38px; background:#fff; color:var(--primary); border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.3em; }
.brand-text { display:flex; flex-direction:column; }
.logo-text { font-size:1.3em; font-weight:700; color:#fff; line-height:1.1; }
.logo-sub { font-size:0.7em; opacity:0.8; }
.main-nav { display:flex; margin-left:30px; }
.nav-item { color:rgba(255,255,255,0.85); padding:8px 14px; font-size:0.95em; border-radius:4px; transition:all 0.2s; white-space:nowrap; }
.nav-item:hover, .nav-item.active { background:rgba(255,255,255,0.15); color:#fff; }
.header-actions { margin-left:auto; }

/* ========== 搜索 ========== */
.search-trigger { background:none; border:none; color:#fff; font-size:1.2em; cursor:pointer; padding:6px; }
.search-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:2000; display:none; flex-direction:column; align-items:center; padding-top:100px; }
.search-overlay.active { display:flex; }
.search-box { display:flex; width:600px; max-width:90vw; }
.search-box input { flex:1; padding:14px 18px; border:none; border-radius:6px 0 0 6px; font-size:1.1em; outline:none; }
.search-box button { padding:14px 22px; border:none; background:#fff; color:var(--text); border-radius:0 6px 6px 0; cursor:pointer; font-size:1.2em; }
.search-results { width:600px; max-width:90vw; max-height:60vh; overflow-y:auto; margin-top:8px; background:var(--card); border-radius:6px; }
.search-item { display:block; padding:14px 18px; border-bottom:1px solid var(--border); color:var(--text); }
.search-item:hover { background:#f9f9f9; }
.search-item h4 { font-size:1em; margin-bottom:4px; }
.search-item p { font-size:0.85em; color:var(--text-light); }

/* ========== 页面容器 ========== */
.page-wrapper { max-width:var(--max-width); margin:0 auto; padding:20px; }

/* 英雄区 */
.hero-section { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:24px; }
.hero-featured { position:relative; display:block; border-radius:var(--radius); overflow:hidden; }
.hero-img-wrap img { width:100%; height:420px; object-fit:cover; }
.hero-overlay { position:absolute; bottom:0; left:0; right:0; padding:30px 24px; background:linear-gradient(transparent,rgba(0,0,0,0.75)); color:#fff; }
.hero-tag { display:inline-block; background:var(--accent); font-size:0.8em; padding:3px 10px; border-radius:3px; margin-bottom:10px; }
.hero-overlay h1 { font-size:1.5em; margin-bottom:8px; }
.hero-overlay p { font-size:0.9em; opacity:0.9; }
.hero-time { font-size:0.8em; opacity:0.7; }
.hero-side { display:flex; flex-direction:column; gap:12px; }
.hero-side-item { display:flex; gap:12px; background:var(--card); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow); }
.hero-side-item img { width:100px; height:70px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.hero-side-text h3 { font-size:0.95em; line-height:1.4; }
.hero-side-time { font-size:0.75em; color:var(--text-muted); }

/* 通用区块 */
.section-block { margin-bottom:28px; }
.section-head { display:flex; justify-content:space-between; align-items:center; border-left:4px solid var(--primary); padding-left:14px; margin-bottom:18px; }
.section-head h2 { font-size:1.25em; }
.section-more { font-size:0.85em; color:var(--text-muted); }
.card-grid-6 { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
.card-grid-3 { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.card-sm { background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:all 0.2s; display:block; }
.card-sm:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.card-sm-img img { width:100%; height:170px; object-fit:cover; }
.card-sm-body { padding:12px; }
.card-sm-body h3 { font-size:0.95em; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-sm-time { font-size:0.75em; color:var(--text-muted); margin-top:6px; display:block; }

/* 双栏 */
.content-row { display:grid; grid-template-columns:1fr 320px; gap:24px; }
.content-main { min-width:0; }
.content-sidebar { display:flex; flex-direction:column; gap:20px; }

/* 文章流 */
.article-feed { display:flex; flex-direction:column; gap:16px; }
.feed-item { display:flex; gap:18px; background:var(--card); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow); }
.feed-item:hover { box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.feed-img { flex-shrink:0; width:220px; height:150px; overflow:hidden; border-radius:4px; }
.feed-img img { width:100%; height:100%; object-fit:cover; }
.feed-content { flex:1; display:flex; flex-direction:column; }
.feed-content h3 { font-size:1.1em; margin-bottom:8px; line-height:1.5; }
.feed-content p { font-size:0.9em; color:var(--text-light); flex:1; }
.feed-meta { font-size:0.8em; color:var(--text-muted); margin-top:10px; display:flex; gap:15px; }

/* 侧边栏 */
.sidebar-card { background:var(--card); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow); }
.sidebar-card h3 { font-size:1.05em; margin-bottom:14px; border-bottom:2px solid var(--primary); padding-bottom:10px; }
.rank-list { list-style:none; }
.rank-list li { margin-bottom:12px; }
.rank-list li a { display:flex; align-items:flex-start; gap:10px; font-size:0.9em; }
.rank-num { display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; background:#e0e0e0; color:#666; border-radius:3px; font-size:0.75em; font-weight:700; flex-shrink:0; }
.rank-num.top-1 { background:var(--primary); color:#fff; }
.rank-num.top-2 { background:var(--accent); color:#fff; }
.rank-num.top-3 { background:#ffaa00; color:#fff; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-item { background:#f0f0f0; padding:5px 12px; border-radius:20px; font-size:0.8em; color:var(--text-light); transition:all 0.2s; }
.tag-item:hover { background:var(--primary); color:#fff; }
.channel-list { list-style:none; }
.channel-list li { margin-bottom:8px; }
.channel-list a { display:block; padding:8px 12px; background:#f9f9f9; border-radius:4px; font-size:0.9em; transition:all 0.2s; }
.channel-list a:hover { background:var(--primary-light); color:var(--primary); }
.author-card { text-align:center; }
.author-avatar { font-size:3em; margin-bottom:10px; }
.author-card h4 { font-size:1.1em; margin-bottom:6px; }
.author-card p { font-size:0.85em; color:var(--text-light); }

/* 内页详情 */
.breadcrumb { font-size:0.85em; color:var(--text-muted); margin-bottom:18px; }
.breadcrumb a { color:var(--text-light); }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb span { margin:0 6px; }
.article-detail { background:var(--card); padding:30px; border-radius:var(--radius); box-shadow:var(--shadow); }
.detail-header h1 { font-size:1.6em; margin-bottom:14px; }
.detail-meta { font-size:0.85em; color:var(--text-muted); margin-bottom:20px; display:flex; gap:20px; }
.detail-featured-img { margin-bottom:24px; border-radius:var(--radius); overflow:hidden; }
.detail-featured-img img { width:100%; max-height:420px; object-fit:cover; }
.detail-body { font-size:1.05em; line-height:1.9; color:#444; }
.detail-body p { margin-bottom:18px; }
.article-inline-img { margin:16px auto; border-radius:4px; max-width:100%; }
.detail-footer { margin-top:30px; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; }
.detail-tags { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.detail-tags span { font-size:0.9em; color:var(--text-light); }
.detail-tag { background:#f0f0f0; padding:4px 12px; border-radius:16px; font-size:0.85em; }
.detail-tag:hover { background:var(--primary); color:#fff; }
.detail-share { display:flex; gap:10px; align-items:center; }
.detail-share span { font-size:0.9em; color:var(--text-light); }
.share-link { font-size:0.85em; color:var(--primary); }

/* 分页 */
.pagination-bar { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:28px; flex-wrap:wrap; }
.page-btn,.btn-more { display:inline-block; padding:8px 16px; background:var(--card); border:1px solid var(--border); border-radius:4px; font-size:0.9em; }
.page-btn:hover,.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.page-info { font-size:0.85em; color:var(--text-muted); margin-left:10px; }
.btn-more { background:var(--primary); color:#fff; border-color:var(--primary); padding:10px 28px; }
.empty-state { text-align:center; padding:60px 0; color:var(--text-muted); }
.list-count { font-size:0.85em; color:var(--text-muted); }

/* 底部 */
.site-footer { background:#1a1a1a; color:#bbb; margin-top:40px; padding:40px 0 20px; }
.footer-inner { max-width:var(--max-width); margin:0 auto; padding:0 20px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:30px; margin-bottom:30px; }
.footer-col h4 { color:#fff; margin-bottom:14px; }
.footer-col p,.footer-col a { font-size:0.85em; line-height:1.8; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:6px; }
.footer-links a { color:#999; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid #333; padding-top:20px; text-align:center; font-size:0.8em; color:#777; }

/* 移动端菜单 */
.mobile-menu-btn { display:none; position:fixed; top:8px; right:16px; z-index:2000; background:var(--primary); color:#fff; border:none; width:40px; height:40px; border-radius:6px; font-size:1.3em; cursor:pointer; }
.mobile-nav { display:none; position:fixed; top:56px; left:0; right:0; z-index:1999; background:var(--primary); padding:12px; flex-direction:column; }
.mobile-nav.show { display:flex; }
.mobile-nav a { color:#fff; padding:10px 16px; border-radius:4px; }
.mobile-nav a:hover { background:rgba(255,255,255,0.15); }

@media (max-width:1024px) {
    .hero-section { grid-template-columns:1fr; }
    .hero-img-wrap img { height:280px; }
    .hero-side { display:grid; grid-template-columns:1fr 1fr; }
    .content-row { grid-template-columns:1fr; }
    .content-sidebar { display:none; }
    .card-grid-6 { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
    .card-grid-3 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width:768px) {
    .main-nav { display:none; }
    .mobile-menu-btn { display:block; }
    .feed-item { flex-direction:column; }
    .feed-img { width:100%; height:200px; }
    .hero-side { grid-template-columns:1fr; }
    .hero-overlay h1 { font-size:1.2em; }
    .detail-header h1 { font-size:1.3em; }
    .article-detail { padding:18px; }
}