/**
 * 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: flex-start; 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; color: #333; white-space: nowrap; transition: color .3s; text-decoration: none; background: none; border: none; cursor: pointer; }
.nav-item:first-child > a { padding: 0; width: 56px; height: 56px; justify-content: center; }
.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); 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; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; font-size: 14px; border-radius: var(--radius-sm); transition: all .3s; text-decoration: none; }
.pagination a { color: var(--text-primary); background: var(--bg-light); }
.pagination a:hover { background: var(--primary); color: #fff; }
.pagination .current { background: var(--primary); color: #fff; font-weight: 600; }
.pagination .disabled { color: var(--text-light); background: var(--bg-light); cursor: not-allowed; }
.pagination .ellipsis { background: transparent; min-width: auto; padding: 0 4px; }

/* ===== 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; } }

/* ===== Icon System ===== */
.icon { display: inline-block; width: 16px; height: 16px; background: currentColor; vertical-align: middle; flex-shrink: 0; }
.icon-sm { width: 12px; height: 12px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* Icon masks */
.icon-chevron-right { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-chevron-down { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-chevron-up { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 15l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 15l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-user { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-calendar { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-eye { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-tag { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-search { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-folder { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-fire { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z'/%3E%3Cpath d='M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z'/%3E%3Cpath d='M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-clock { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-map { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-doc { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-home { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-chevron-left { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-bolt { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-pen { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-newspaper { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-thumbs-up { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-link { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ===== 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; }