/**
 * Zuowen Template - Complete Semantic CSS
 * Clean, SEO-friendly stylesheet
 */

/* ===== CSS Variables ===== */
:root {
    --primary: #ff6600;
    --primary-dark: #e55c00;
    --primary-light: #ff8533;
    --primary-lighter: #fff7f0;
    --text-dark: #1a1a1a;
    --text-base: #333;
    --text-secondary: #666;
    --text-muted: #999;
    --text-light: #ccc;
    --border-color: #f0f0f0;
    --bg-gray: #f5f5f5;
    --bg-white: #fff;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ===== Reset & Base ===== */
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text-base); line-height: 1.6; background: #f8f9fa; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ===== Layout ===== */
.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 1024px) { .wrap { padding: 0; } }

.page-main { max-width: 1400px; margin: 16px auto; padding: 0 16px 40px; }
@media (min-width: 1024px) { .page-main { margin-top: 24px; padding: 0 0 40px; } }

.page-row { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) { .page-row { flex-direction: row; } }

.page-content { flex: 1; min-width: 0; }

/* ===== Header Styles (from previous) ===== */
.header { background: #fff; position: relative; z-index: 50; box-shadow: 0 2px 15px rgba(0,0,0,.03); }
.header-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px; }
@media (min-width: 1024px) { .header-top { flex-wrap: nowrap; padding: 24px 0; gap: 40px; } }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #ff6600, #ff4500); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: bold; font-family: serif; box-shadow: 0 4px 12px rgba(255,102,0,.2); transition: transform .3s; }
.logo:hover .logo-icon { transform: scale(1.05); }
.logo-text h1 { font-size: 22px; font-weight: 800; color: #1a1a1a; line-height: 1.2; margin: 0; }
.logo-text p { font-size: 10px; color: #999; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
@media (min-width: 1024px) { .logo-icon { width: 44px; height: 44px; font-size: 24px; } .logo-text h1 { font-size: 26px; } }

.search-box { flex: 1; width: 100%; max-width: 600px; }
.search-form { display: flex; height: 40px; border: 1px solid #ff6600; border-radius: 6px; overflow: hidden; transition: box-shadow .3s; }
.search-form:hover { box-shadow: 0 4px 12px rgba(255,102,0,.15); }
.search-input { flex: 1; padding: 0 16px; border: none; outline: none; font-size: 14px; background: #fff; }
.search-btn { padding: 0 24px; background: #ff6600; color: #fff; font-weight: 500; border: none; cursor: pointer; transition: background .3s; }
.search-btn:hover { background: #e55c00; }

.header-actions { display: none; gap: 12px; }
@media (min-width: 1024px) { .header-actions { display: flex; } }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 4px; font-size: 15px; font-weight: 500; transition: all .3s; text-decoration: none; }
.action-btn svg { width: 20px; height: 20px; }
.action-btn.sitemap { border: 1px solid #4080ff; color: #4080ff; background: #fff; }
.action-btn.sitemap:hover { background: #f0f5ff; }
.action-btn.tags { border: 1px solid #00b368; color: #00b368; background: #f6fffa; position: relative; }
.action-btn.tags:hover { background: #eafff6; }
.action-btn.tags::after { content: ''; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%; border: 2px solid #fff; }

.mobile-actions { display: flex; gap: 8px; }
.mobile-actions a { text-decoration: none; }
.mobile-actions svg { width: 20px; height: 20px; color: #666; }
@media (min-width: 1024px) { .mobile-actions { display: none; } }

.nav { border-top: 1px solid #f0f0f0; }
.nav-list { display: flex; align-items: center; justify-content: center; height: 50px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; list-style: none; margin: 0; padding: 0; }
.nav-list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .nav-list { height: 56px; overflow: visible; } }
.nav-item { position: relative; height: 100%; flex-shrink: 0; display: none; }
.nav-item:nth-child(-n+12) { display: flex; }
.nav-item:last-child { display: flex; }
.nav-item > a, .nav-item > button { display: flex; align-items: center; height: 100%; padding: 0 16px; font-size: 15px; font-weight: 500; color: #333; white-space: nowrap; transition: color .3s; text-decoration: none; background: none; border: none; cursor: pointer; }
.nav-item > a:hover, .nav-item > button:hover { color: #ff6600; }
.nav-item.active > a { color: #ff6600; }
.nav-item > a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: #ff6600; border-radius: 3px 3px 0 0; transition: width .3s; }
.nav-item:hover > a::after, .nav-item.active > a::after { width: 20px; }
.nav-item svg { width: 12px; height: 12px; margin-left: 4px; opacity: .4; transition: all .3s; }
.nav-item:hover svg { opacity: 1; transform: rotate(180deg); }

.nav-dropdown { position: absolute; top: 100%; left: 0; padding-top: 4px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all .2s; z-index: 100; }
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-inner { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.12); border: 1px solid #f0f0f0; padding: 8px 0; min-width: 180px; max-height: 400px; overflow-y: auto; }
.nav-dropdown a { display: flex; align-items: center; padding: 10px 16px; font-size: 13px; color: #666; transition: all .2s; text-decoration: none; }
.nav-dropdown a:hover { color: #ff6600; background: #fff7f0; }
.nav-dropdown a svg { width: 12px; height: 12px; margin-right: 8px; color: #ccc; transform: none; opacity: 1; }

.nav-more { display: flex !important; }
.nav-more.hide { display: none !important; }
.nav-more .nav-dropdown { left: auto; right: 0; }

/* ===== Cards ===== */
.card { background: var(--bg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-p { padding: 16px; }
@media (min-width: 1024px) { .card-p { padding: 20px; } }

.card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 20px; }
.card-header-simple { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 16px; }

.card-icon { width: 28px; height: 28px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(255,102,0,.15); flex-shrink: 0; }
.card-icon svg { width: 14px; height: 14px; }
.card-icon-lg { width: 32px; height: 32px; }
.card-icon-lg svg { width: 16px; height: 16px; }

.card-title { font-size: 18px; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) { .card-title { font-size: 22px; } }
.card-title-sm { font-size: 17px; }
.card-title-lg { font-size: 20px; }

.card-more { color: var(--primary); font-size: 14px; display: flex; align-items: center; gap: 4px; transition: all .3s; }
.card-more:hover { text-decoration: underline; }
.card-more span { transition: transform .3s; }
.card-more:hover span { transform: translateX(2px); }

/* ===== Breadcrumb ===== */
.breadcrumb { display: flex; align-items: center; font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; background: var(--bg-white); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-sm); flex-wrap: wrap; gap: 4px; }
.breadcrumb a { color: var(--text-secondary); transition: color .3s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { width: 16px; height: 16px; margin: 0 4px; color: var(--text-light); flex-shrink: 0; }
.breadcrumb-current { color: var(--text-dark); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* ===== Featured Grid ===== */
.featured-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
@media (min-width: 768px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }

.featured-item { display: flex; gap: 16px; }
.featured-item:hover .featured-thumb { opacity: .9; }
.featured-item:hover .featured-title { color: var(--primary); }

.featured-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; box-shadow: var(--shadow-sm); transition: opacity .3s; }
@media (min-width: 1024px) { .featured-thumb { width: 160px; height: 100px; } }

.featured-info { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; overflow: hidden; }
.featured-title { font-size: 15px; font-weight: 700; color: var(--text-dark); line-height: 1.4; transition: color .3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1024px) { .featured-title { font-size: 17px; } }
.featured-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: none; }
@media (min-width: 640px) { .featured-desc { display: -webkit-box; font-size: 13px; } }

/* ===== Article List ===== */
.article-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .article-list { grid-template-columns: repeat(2, 1fr); gap: 16px 48px; } }
.article-list ul { display: flex; flex-direction: column; gap: 16px; }

.article-row { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.article-row-info { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.article-badge { background: var(--bg-gray); color: var(--text-secondary); border: 1px solid var(--border-color); font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm); flex-shrink: 0; }
.article-row a { color: var(--text-base); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.article-row a:hover { color: var(--primary); }
.article-row-date { color: var(--text-light); font-size: 12px; flex-shrink: 0; display: none; }
@media (min-width: 640px) { .article-row-date { display: block; } }

/* ===== Category Grid ===== */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }

.category-card { position: relative; border-radius: var(--radius-md); overflow: hidden; height: 120px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); transition: all .3s; }
@media (min-width: 1024px) { .category-card { height: 150px; } }
.category-card:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.category-card-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.category-card-bg svg { width: 48px; height: 48px; color: rgba(255,255,255,.3); }

.category-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; color: #fff; }
.category-card-name { font-size: 15px; font-weight: 700; }
@media (min-width: 1024px) { .category-card-name { font-size: 17px; } }

/* ===== Simple Article List ===== */
.simple-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .simple-list { grid-template-columns: repeat(2, 1fr); gap: 12px 48px; } }

.simple-item { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--bg-gray); }
.simple-item-info { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.simple-item-cat { color: var(--text-light); font-size: 12px; flex-shrink: 0; }
.simple-item a { color: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.simple-item a:hover { color: var(--primary); }
.simple-item-date { color: var(--text-light); font-size: 12px; flex-shrink: 0; display: none; }
@media (min-width: 640px) { .simple-item-date { display: block; } }

/* ===== Sidebar ===== */
.sidebar { width: 100%; }
@media (min-width: 1024px) { .sidebar { width: 380px; flex-shrink: 0; } }
.sidebar-sm { width: 100%; }
@media (min-width: 1024px) { .sidebar-sm { width: 320px; } }

.sidebar-box { background: var(--bg-white); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.sidebar-box + .sidebar-box { margin-top: 20px; }

/* ===== Rank List ===== */
.rank-list { display: flex; flex-direction: column; gap: 16px; }
.rank-item { display: flex; align-items: flex-start; gap: 12px; }
.rank-num { width: 20px; height: 20px; font-size: 12px; display: flex; align-items: center; justify-content: center; border-radius: 2px; flex-shrink: 0; margin-top: 1px; color: #fff; background: #e0e0e0; color: var(--text-secondary); transition: background .3s; }
.rank-num-1 { background: var(--primary); color: #fff; box-shadow: 0 2px 4px rgba(255,102,0,.2); }
.rank-num-2 { background: var(--primary-light); color: #fff; box-shadow: 0 2px 4px rgba(255,102,0,.15); }
.rank-num-3 { background: #f0ad4e; color: #fff; box-shadow: 0 2px 4px rgba(240,173,78,.2); }
.rank-item:hover .rank-num { background: #d0d0d0; }
.rank-item:hover .rank-num-1, .rank-item:hover .rank-num-2, .rank-item:hover .rank-num-3 { background: var(--primary); }

.rank-link { color: var(--text-secondary); font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; transition: color .3s; }
.rank-link:hover { color: var(--primary); }
.rank-link-clamp { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ===== Latest List ===== */
.latest-list { display: flex; flex-direction: column; gap: 12px; }
.latest-item { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--bg-gray); }
.latest-item:last-child { border-bottom: none; }
.latest-item a { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: 8px; transition: color .3s; }
.latest-item a:hover { color: var(--primary); }
.latest-item-date { color: var(--text-light); flex-shrink: 0; }

/* ===== Tag Cloud ===== */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--bg-gray); color: var(--text-secondary); font-size: 13px; border-radius: var(--radius-sm); transition: all .3s; }
.tag:hover { background: var(--primary); color: #fff; }
.tag-sm { padding: 2px 8px; font-size: 11px; }
.tag-lg { padding: 8px 16px; font-size: 14px; border-radius: var(--radius-md); }
.tag-active { background: var(--primary); color: #fff; }
.tag-outline { background: rgba(255,102,0,.05); color: var(--primary); }
.tag-outline:hover { background: var(--primary); color: #fff; }
.tag-pill { border-radius: 20px; }

/* ===== Article Card (with image) ===== */
.article-cards { display: flex; flex-direction: column; gap: 16px; }

.article-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--bg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .3s; }
@media (min-width: 640px) { .article-card { flex-direction: row; } }
.article-card:hover { box-shadow: var(--shadow-md); }

.article-card-thumb { display: block; position: relative; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; }
.article-card-thumb img { width: 100%; height: 140px; object-fit: cover; transition: transform .3s; }
@media (min-width: 640px) { .article-card-thumb img { width: 200px; } }
.article-card-thumb:hover img { transform: scale(1.05); }
.article-card-flag { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: var(--primary); color: #fff; font-size: 12px; border-radius: var(--radius-sm); }

.article-card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
.article-card-title { font-size: 17px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.article-card-title a { color: var(--text-dark); transition: color .3s; }
.article-card-title a:hover { color: var(--primary); }
@media (min-width: 1024px) { .article-card-title { font-size: 18px; } }

.article-card-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.article-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.article-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--text-light); }
.article-card-meta span { display: flex; align-items: center; gap: 4px; }
.article-card-meta svg { width: 16px; height: 16px; }

/* ===== Sub Categories ===== */
.sub-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-cat { padding: 6px 16px; font-size: 14px; border-radius: 20px; background: var(--bg-gray); color: var(--text-secondary); transition: all .3s; }
.sub-cat:hover { background: var(--primary); color: #fff; }
.sub-cat-active { background: var(--primary); color: #fff; }

/* ===== Pagination ===== */
.pagination-wrap { margin-top: 24px; display: flex; justify-content: center; }
.pagination { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 12px 16px; }

/* ===== Article Detail ===== */
.article-detail { background: var(--bg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }

.article-header { padding: 20px; border-bottom: 1px solid var(--border-color); }
@media (min-width: 1024px) { .article-header { padding: 32px; } }

.article-main-title { font-size: 22px; font-weight: 700; color: var(--text-dark); line-height: 1.4; margin-bottom: 16px; }
@media (min-width: 1024px) { .article-main-title { font-size: 28px; } }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--text-secondary); }
.article-meta span, .article-meta a { display: flex; align-items: center; gap: 6px; }
.article-meta svg { width: 16px; height: 16px; }
.article-meta a { transition: color .3s; }
.article-meta a:hover { color: var(--primary); }

.article-header-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.article-body { padding: 20px; }
@media (min-width: 1024px) { .article-body { padding: 32px; } }

.article-summary { background: rgba(255,102,0,.05); border-left: 4px solid var(--primary); padding: 16px; margin-bottom: 24px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-summary p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.article-summary strong { color: var(--primary); }

/* Article Content Prose Styles */
.article-content { font-size: 15px; color: var(--text-base); line-height: 1.8; }
.article-content h2 { font-size: 20px; font-weight: 700; color: var(--text-dark); margin: 32px 0 16px; padding-left: 12px; border-left: 4px solid var(--primary); }
.article-content h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin: 24px 0 12px; }
.article-content h4 { font-size: 16px; font-weight: 600; color: var(--text-dark); margin: 20px 0 10px; }
.article-content p { margin: 16px 0; }
.article-content a { color: var(--primary); }
.article-content a:hover { text-decoration: underline; }
.article-content img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: block; margin: 16px auto; }
.article-content blockquote { border-left: 4px solid var(--primary); background: var(--bg-gray); padding: 8px 16px; margin: 16px 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-content ul, .article-content ol { margin: 16px 0; padding-left: 20px; }
.article-content li { margin: 4px 0; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content code { background: var(--bg-gray); padding: 2px 4px; border-radius: 2px; color: var(--primary); font-size: 14px; }
.article-content pre { background: #2d3748; padding: 16px; border-radius: var(--radius-md); overflow-x: auto; }
.article-content pre code { background: none; color: #e2e8f0; padding: 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.article-content th, .article-content td { border: 1px solid var(--border-color); padding: 8px 12px; text-align: left; }
.article-content th { background: var(--bg-gray); font-weight: 600; }

.article-keywords { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.article-keywords strong { color: var(--text-base); margin-right: 4px; }
.keyword-link { color: var(--primary); transition: color .3s; }
.keyword-link:hover { color: var(--primary-dark); text-decoration: underline; }
.keyword-text { color: var(--text-secondary); }

.article-bottom-tags { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.article-bottom-tags-inner { display: flex; align-items: flex-start; gap: 8px; }
.article-bottom-tags-label { font-size: 13px; font-weight: 500; color: var(--text-base); flex-shrink: 0; }
.article-bottom-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }

.article-footer { padding: 20px; background: var(--bg-gray); border-top: 1px solid var(--border-color); }
@media (min-width: 1024px) { .article-footer { padding: 20px 32px; } }

/* Prev/Next Navigation */
.article-nav { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
@media (min-width: 640px) { .article-nav { flex-direction: row; } }

.article-nav-item { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-white); border-radius: var(--radius-md); transition: box-shadow .3s; }
.article-nav-item:hover { box-shadow: var(--shadow-md); }
.article-nav-item svg { width: 20px; height: 20px; color: var(--text-light); flex-shrink: 0; transition: color .3s; }
.article-nav-item:hover svg { color: var(--primary); }
.article-nav-info { flex: 1; overflow: hidden; }
.article-nav-label { font-size: 12px; color: var(--text-light); }
.article-nav-title { font-size: 14px; color: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.article-nav-item:hover .article-nav-title { color: var(--primary); }
.article-nav-next { text-align: right; }
.article-nav-next .article-nav-info { order: -1; }

/* Related Articles */
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(4, 1fr); } }

.related-item { display: block; }
.related-item:hover .related-thumb { transform: scale(1.05); }
.related-item:hover .related-title { color: var(--primary); }

.related-thumb-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 8px; }
.related-thumb { width: 100%; height: 100px; object-fit: cover; transition: transform .3s; }

.related-title { font-size: 14px; color: var(--text-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }

/* ===== Tags Page ===== */
.tags-all { display: flex; flex-wrap: wrap; gap: 12px; }
.tags-all-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-gray); color: var(--text-secondary); font-size: 14px; border-radius: var(--radius-md); transition: all .3s; }
.tags-all-item:hover { background: var(--primary); color: #fff; box-shadow: var(--shadow-md); }
.tags-all-item .hash { color: var(--primary); transition: color .3s; }
.tags-all-item:hover .hash { color: #fff; }
.tags-all-item .count { font-size: 12px; color: var(--text-light); transition: color .3s; }
.tags-all-item:hover .count { color: rgba(255,255,255,.7); }

.tags-hot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .tags-hot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tags-hot-grid { grid-template-columns: repeat(4, 1fr); } }

.tags-hot-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--bg-gray); border-radius: var(--radius-md); transition: background .3s; }
.tags-hot-item:hover { background: rgba(255,102,0,.05); }
.tags-hot-item span:first-child { font-size: 14px; color: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.tags-hot-item:hover span:first-child { color: var(--primary); }
.tags-hot-item span:last-child { font-size: 12px; color: var(--text-light); flex-shrink: 0; margin-left: 8px; }

/* ===== Search Page ===== */
.search-form-lg { display: flex; height: 48px; border: 2px solid var(--primary); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .3s; }
.search-form-lg:hover { box-shadow: 0 4px 12px rgba(255,102,0,.15); }
.search-form-lg-inner { flex: 1; display: flex; align-items: center; padding: 0 16px; background: var(--bg-white); }
.search-form-lg-inner svg { color: var(--primary); margin-right: 12px; width: 20px; height: 20px; flex-shrink: 0; }
.search-form-lg input { width: 100%; height: 100%; border: none; outline: none; font-size: 15px; color: var(--text-base); }
.search-form-lg input::placeholder { color: var(--text-light); }
.search-form-lg button { padding: 0 32px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 500; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .3s; }
.search-form-lg button:hover { background: var(--primary-dark); }
.search-form-lg button svg { width: 20px; height: 20px; }

.search-result-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.search-result-title { font-size: 18px; font-weight: 700; color: var(--text-dark); }
.search-result-title span { color: var(--primary); }
.search-result-count { font-size: 14px; color: var(--text-secondary); }
.search-result-count span { color: var(--primary); font-weight: 500; }

.search-result-list { display: flex; flex-direction: column; gap: 16px; }
.search-result-item { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--bg-gray); border-radius: var(--radius-md); transition: background .3s; }
@media (min-width: 640px) { .search-result-item { flex-direction: row; } }
.search-result-item:hover { background: rgba(255,102,0,.05); }

.search-result-thumb { flex-shrink: 0; }
.search-result-thumb img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-md); }
@media (min-width: 640px) { .search-result-thumb img { width: 180px; } }

.search-result-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.search-result-item-title { font-size: 17px; font-weight: 700; color: var(--text-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; transition: color .3s; }
.search-result-item-title:hover { color: var(--primary); }
.search-result-item-title mark { background: none; color: var(--primary); font-weight: 700; }

.search-result-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-result-desc mark { background: none; color: var(--primary); }

.search-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--text-light); }
.search-result-meta a { color: var(--primary); }

.search-no-result { text-align: center; padding: 48px 0; }
.search-no-result svg { width: 80px; height: 80px; color: var(--text-light); margin: 0 auto 16px; }
.search-no-result p { font-size: 16px; color: var(--text-secondary); margin-bottom: 16px; }
.search-no-result span { color: var(--primary); }
.search-tips { background: var(--bg-gray); border-radius: var(--radius-md); padding: 16px; max-width: 400px; margin: 0 auto; text-align: left; }
.search-tips h3 { font-size: 14px; font-weight: 500; color: var(--text-base); margin-bottom: 8px; }
.search-tips ul { font-size: 14px; color: var(--text-secondary); }
.search-tips li { margin: 4px 0; }

.recommend-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .recommend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .recommend-grid { grid-template-columns: repeat(3, 1fr); } }

.recommend-item { display: block; }
.recommend-item:hover .recommend-thumb { transform: scale(1.05); }
.recommend-item:hover .recommend-title { color: var(--primary); }

.recommend-thumb-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 8px; }
.recommend-thumb { width: 100%; height: 140px; object-fit: cover; transition: transform .3s; }

.recommend-title { font-size: 15px; font-weight: 500; color: var(--text-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; transition: color .3s; }
.recommend-meta { font-size: 13px; color: var(--text-light); }

/* ===== Sitemap Page ===== */
.sitemap-header { padding: 20px; border-bottom: 1px solid var(--border-color); }
.sitemap-header-inner { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .sitemap-header-inner { flex-direction: row; align-items: center; justify-content: space-between; } }

.sitemap-header-info { display: flex; align-items: center; gap: 12px; }
.sitemap-header-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(255,102,0,.15); }
.sitemap-header-icon svg { width: 20px; height: 20px; }
.sitemap-header-text h1 { font-size: 24px; font-weight: 700; color: var(--text-dark); }
.sitemap-header-text p { font-size: 14px; color: var(--text-secondary); }

.sitemap-formats { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sitemap-formats span { color: var(--text-secondary); }
.sitemap-formats a { padding: 4px 12px; border-radius: var(--radius-sm); transition: background .3s; }
.sitemap-formats a.xml { background: rgba(64,128,255,.1); color: #4080ff; }
.sitemap-formats a.xml:hover { background: rgba(64,128,255,.2); }
.sitemap-formats a.txt { background: rgba(0,179,104,.1); color: #00b368; }
.sitemap-formats a.txt:hover { background: rgba(0,179,104,.2); }

.sitemap-body { padding: 20px; }

.sitemap-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }

.sitemap-cat { background: var(--bg-gray); border-radius: var(--radius-md); padding: 16px; transition: background .3s; }
.sitemap-cat:hover { background: rgba(255,102,0,.05); }
.sitemap-cat h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sitemap-cat h3 svg { width: 20px; height: 20px; color: var(--primary); }
.sitemap-cat h3 a { font-size: 16px; font-weight: 700; color: var(--text-dark); transition: color .3s; }
.sitemap-cat h3 a:hover { color: var(--primary); }
.sitemap-cat ul { padding-left: 28px; }
.sitemap-cat li { margin: 6px 0; }
.sitemap-cat li a { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-secondary); transition: color .3s; }
.sitemap-cat li a:hover { color: var(--primary); }
.sitemap-cat li svg { width: 12px; height: 12px; color: var(--text-light); }

.sitemap-footer { padding: 20px; border-top: 1px solid var(--border-color); }
.sitemap-links { display: flex; flex-wrap: wrap; gap: 12px; }
.sitemap-link { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-gray); color: var(--text-secondary); font-size: 14px; border-radius: var(--radius-md); transition: all .3s; }
.sitemap-link svg { width: 16px; height: 16px; }
.sitemap-link:hover { background: var(--primary); color: #fff; }

/* ===== Footer Styles ===== */
.footer { margin-top: 40px; }
.friend-links { background: #fff; border-radius: 8px; padding: 20px 24px; margin-bottom: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.friend-links h3 { font-size: 18px; font-weight: 600; color: #333; padding-bottom: 12px; margin: 0 0 16px 0; border-bottom: 1px solid #f0f0f0; }
.friend-links-list { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.friend-links-list a { font-size: 14px; color: #666; transition: color .3s; text-decoration: none; }
.friend-links-list a:hover { color: #ff6600; text-decoration: underline; }

.copyright { background: #2d3237; color: #889097; padding: 24px 16px; text-align: center; font-size: 13px; }
.copyright p { margin: 0 0 8px 0; }
.copyright p:last-child { margin-bottom: 0; }
.copyright a { color: inherit; transition: color .3s; margin-left: 8px; text-decoration: none; }
.copyright a:hover { color: #fff; }
@media (min-width: 1024px) { .copyright { padding: 32px 16px; font-size: 14px; } }

.back-top { position: fixed; right: 16px; bottom: 16px; width: 48px; height: 48px; background: #ff6600; color: #fff; border-radius: 8px; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(255,102,0,.3); transition: all .3s; z-index: 999; border: none; cursor: pointer; }
.back-top:hover { background: #e55c00; transform: translateY(-4px); }
.back-top.show { display: flex; }
.back-top svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .back-top { right: 32px; } }

/* ===== Utility Classes ===== */
.mt-5 { margin-top: 20px; }
.mb-5 { margin-bottom: 20px; }
.gap-5 { gap: 20px; }
.text-center { text-align: center; }
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }