/* 页面头部 */
.page-header {background: linear-gradient(135deg, #1e7038 0%, #1976d2 100%);color: white;padding: 40px 0;margin-bottom: 30px;}
.header-content {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20px;}
.page-title h1 {font-size: 2.5rem;font-weight: 700;margin-bottom: 10px;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}
.page-subtitle {font-size: 1.1rem;opacity: 0.9;margin: 0;}
.search-section {flex: 1;max-width: 400px;margin-left: auto;}
.search-box {position: relative;display: flex;background: rgba(255, 255, 255, 0.1);border-radius: 25px;padding: 8px;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);}
.search-box i {position: absolute;left: 15px;top: 50%;transform: translateY(-50%);color: rgba(255, 255, 255, 0.7);z-index: 2;}
.search-box input {flex: 1;background: transparent;border: none;outline: none;color: white;padding: 12px 15px 12px 45px;font-size: 16px;}
.search-box input::placeholder {color: rgba(255, 255, 255, 0.7);}
.search-btn {background: rgba(255, 255, 255, 0.2);border: none;color: white;padding: 12px 20px;border-radius: 20px;cursor: pointer;font-weight: 500;transition: all 0.3s ease;}
.search-btn:hover {background: rgba(255, 255, 255, 0.3);transform: translateY(-1px);}

/* 面包屑导航（仅移动端显示） */
.breadcrumb {display: none;background: #fff;border-bottom: 1px solid #e8eaec;padding: 12px 0;}
.breadcrumb .container {max-width: 1200px;margin: 0 auto;padding: 0 20px;}
.breadcrumb-nav {display: flex;align-items: center;flex-wrap: wrap;gap: 6px 8px;font-size: 14px;line-height: 1.5;color: #666;}
.breadcrumb-nav .current {color: #333;font-weight: 500;flex-shrink: 0;}
.breadcrumb-nav a {color: #666;text-decoration: none;transition: color 0.3s ease;}
.breadcrumb-nav a:hover {color: #1e7038;}
.breadcrumb-nav .separator {color: #999;font-size: 12px;flex-shrink: 0;}

/* 分类导航 */
.category-nav {background: white;border-bottom: 1px solid #e8eaec;margin-bottom: 30px;}
.nav-tabs {display: flex;gap: 0;overflow-x: auto;padding: 0;}
.nav-tab {display: block;padding: 15px 20px;color: #666;text-decoration: none;font-weight: 500;border-bottom: 3px solid transparent;transition: all 0.3s ease;white-space: nowrap;position: relative;}
.nav-tab:hover {color: #1e7038;background: #f8f9fa;}
.nav-tab.active {color: #1e7038;border-bottom-color: #1e7038;background: #f8f9fa;}

/* 内容布局 */
.content-layout {display: grid;grid-template-columns: 1fr 300px;gap: 30px;align-items: start;}

/* 文章列表 */
.article-list {background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);overflow: hidden;}
.list-header {display: flex;justify-content: space-between;align-items: center;padding: 20px;border-bottom: 1px solid #e8eaec;background: #f8f9fa;}
.sort-options {display: flex;align-items: center;gap: 15px;}
.sort-label {color: #666;font-weight: 500;}
.sort-option {color: #666;text-decoration: none;padding: 5px 10px;border-radius: 4px;transition: all 0.3s ease;}
.sort-option:hover, .sort-option.active {color: #1e7038;background: rgba(33, 150, 243, 0.1);}
.view-mode {display: flex;gap: 5px;}
.view-btn {background: none;border: 1px solid #ddd;padding: 8px 12px;cursor: pointer;color: #666;transition: all 0.3s ease;}
.view-btn:first-child {border-radius: 4px 0 0 4px;}
.view-btn:last-child {border-radius: 0 4px 4px 0;}
.view-btn.active {background: #1e7038;color: white;border-color: #1e7038;}

/* 文章项 */
.articles-container {padding: 0;}
.article-item {padding: 25px;border-bottom: 1px solid #f0f0f0;transition: all 0.3s ease;}
.article-item:hover {background: #fafbfc;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.article-item:last-child {border-bottom: none;}

/* 文章布局 */
.article-layout {display: flex;gap: 20px;align-items: flex-start;}
.article-thumbnail {flex-shrink: 0;width: 200px;height: 140px;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;}
.article-thumbnail:hover {transform: scale(1.02);box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);}
.article-thumbnail a {display: block;width: 100%;height: 100%;}
.article-thumbnail img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.article-thumbnail:hover img {transform: scale(1.05);}
.article-content {flex: 1;min-width: 0;}
.article-meta {display: flex;align-items: center;gap: 15px;margin-bottom: 12px;font-size: 14px;color: #666;}
.article-category {background: linear-gradient(135deg, #667eea, #764ba2);color: white;padding: 4px 12px;border-radius: 12px;font-size: 12px;font-weight: 500;}
.article-date {color: #999;}
.article-views {display: flex;align-items: center;gap: 5px;color: #999;}
.article-title {margin: 0 0 15px 0;font-size: 1.2rem;font-weight: 600;line-height: 1.4;}
.article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.article-title a:hover {color: #1e7038;}
.article-excerpt {color: #666;line-height: 1.6;margin-bottom: 15px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.article-tags {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 15px;}
.tag {background: #f0f0f0;color: #666;padding: 4px 10px;border-radius: 12px;font-size: 12px;text-decoration: none;transition: all 0.3s ease;}
.tag:hover {background: #1e7038;color: white;}
.article-footer {display: flex;justify-content: space-between;align-items: center;}
.author-info {display: flex;align-items: center;gap: 10px;}
.author-avatar {width: 32px;height: 32px;border-radius: 50%;object-fit: cover;}
.author-name {color: #666;font-size: 14px;}
.article-stats {display: flex;gap: 15px;}
.stat-item {display: flex;align-items: center;gap: 5px;color: #999;font-size: 14px;}

/* 分页 */
.pagination-wrapper {padding: 30px;text-align: center;background: #f8f9fa;}
.pagination {display: flex;justify-content: center;align-items: center;}
.nav-links {display: flex;justify-content: center;align-items: center;gap: 5px;}
.page-numbers {display: inline-block;min-width: 40px;height: 40px;line-height: 40px;text-align: center;background: white;border: 1px solid #ddd;border-radius: 6px;color: #666;text-decoration: none;transition: all 0.3s ease;padding: 0 10px;}
.page-numbers:hover {background: #1e7038;color: white;border-color: #1e7038;transform: translateY(-1px);}
.page-numbers.current {background: #1e7038;color: white;border-color: #1e7038;font-weight: 600;}
.page-numbers.prev, .page-numbers.next {padding: 0 15px;font-weight: 500;}
.page-numbers.prev:hover, .page-numbers.next:hover {background: #1e7038;color: white;border-color: #1e7038;transform: translateY(-1px);}

/* 侧边栏 */
.sidebar {display: flex;flex-direction: column;gap: 20px;}
.sidebar-widget {background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);overflow: hidden;}
.widget-title {display: flex;align-items: center;gap: 8px;padding: 15px 20px;margin: 0;background: linear-gradient(135deg, #1e7038, #1976d2);color: white;font-size: 16px;font-weight: 600;}
.widget-title i {font-size: 14px;}

/* 置顶文章 */
.top-articles {padding: 0;}
.top-article-item {display: flex;gap: 12px;padding: 15px 20px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;position: relative;}
.top-article-item:hover {background: #f8f9fa;}
.top-article-item:last-child {border-bottom: none;}
.top-article-item::before {content: none;}
.top-article-thumb {flex-shrink: 0;width: 85px;height: 60px;border-radius: 4px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.top-article-thumb img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.top-article-item:hover .top-article-thumb img {transform: scale(1.05);}
.top-article-content {flex: 1;min-width: 0;}
.top-article-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;font-weight: 600;}
.top-article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.top-article-title a:hover {color: #1e7038;}
.top-article-meta {display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #999;}
.top-article-views {display: flex;align-items: center;gap: 3px;}

/* 热门文章 */
.hot-articles {padding: 0;}
.hot-article-item {display: flex;align-items: flex-start;gap: 12px;padding: 15px 20px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;}
.hot-article-item:hover {background: #f8f9fa;}
.hot-article-item:last-child {border-bottom: none;}
.hot-article-rank {flex-shrink: 0;width: 24px;height: 24px;line-height: 24px;text-align: center;background: #1e7038;color: white;border-radius: 50%;font-size: 12px;font-weight: 600;}
.hot-article-rank:nth-child(1) {background: #ff6b6b;}
.hot-article-rank:nth-child(2) {background: #ffa726;}
.hot-article-rank:nth-child(3) {background: #66bb6a;}
.hot-article-content {flex: 1;min-width: 0;}
.hot-article-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;}
.hot-article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.hot-article-title a:hover {color: #1e7038;}
.hot-article-meta {display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #999;}
.hot-article-views {display: flex;align-items: center;gap: 3px;}

/* 最新文章 */
.latest-articles {padding: 0;}
.latest-article-item {display: flex;gap: 12px;padding: 15px 20px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;}
.latest-article-item:hover {background: #f8f9fa;}
.latest-article-item:last-child {border-bottom: none;}
.latest-article-thumb {flex-shrink: 0;width: 60px;height: 45px;border-radius: 4px;overflow: hidden;}
.latest-article-thumb img {width: 100%;height: 100%;object-fit: cover;}
.latest-article-content {flex: 1;min-width: 0;}
.latest-article-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;}
.latest-article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.latest-article-title a:hover {color: #667eea;}
.latest-article-meta {font-size: 12px;color: #999;}

/* 标签云 */
.tag-cloud {padding: 20px;display: flex;flex-wrap: wrap;gap: 8px;}
.tag-item {display: inline-block;padding: 6px 12px;background: #f0f0f0;color: #666;text-decoration: none;border-radius: 15px;font-size: 13px;transition: all 0.3s ease;}
.tag-item:hover {background: #1e7038;color: white;transform: translateY(-1px);}

/* 推荐阅读 */
.recommended-articles {padding: 0;}
.recommended-article-item {display: flex;gap: 12px;padding: 15px 20px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;}
.recommended-article-item:hover {background: #f8f9fa;}
.recommended-article-item:last-child {border-bottom: none;}
.rec-article-thumb {flex-shrink: 0;width: 85px;height: 60px;border-radius: 4px;overflow: hidden;}
.rec-article-thumb img {width: 100%;height: 100%;object-fit: cover;}
.rec-article-content {flex: 1;min-width: 0;}
.rec-article-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;}
.rec-article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.rec-article-title a:hover {color: #1e7038;}
.rec-article-meta {display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #999;}
.rec-article-category {background: #e3f2fd;color: #1976d2;padding: 2px 8px;border-radius: 10px;font-size: 11px;}
.rec-article-views {display: flex;align-items: center;gap: 3px;}

/* 响应式设计 */

@media (max-width: 768px) {
.breadcrumb {display: block;padding: 10px 0;}
.breadcrumb .container {padding: 0 15px;}
.breadcrumb-nav {font-size: 13px;gap: 4px 6px;}
.content-layout {grid-template-columns: 1fr;gap: 20px;}
.header-content {flex-direction: column;text-align: center;}
.search-section {max-width: 100%;margin-left: 0;}
.page-title h1 {font-size: 2rem;}
.nav-tabs {padding: 0 10px;}
.nav-tab {padding: 12px 15px;font-size: 14px;}
.list-header {flex-direction: column;gap: 15px;align-items: flex-start;}
.article-item {padding: 20px;}
.article-layout {flex-direction: column;gap: 15px;}
.article-thumbnail {width: 100%;height: 200px;}
.article-title {font-size: 1.2rem;}
.article-footer {flex-direction: column;gap: 10px;align-items: flex-start;}
.pagination {flex-wrap: wrap;}
.nav-links {flex-wrap: wrap;gap: 3px;}
.page-numbers {min-width: 35px;height: 35px;line-height: 35px;font-size: 14px;}
.page-numbers.prev, .page-numbers.next {padding: 0 10px;font-size: 13px;}
}

@media (max-width: 480px) {
.breadcrumb {padding: 8px 0;}
.breadcrumb .container {padding: 0 12px;}
.breadcrumb-nav {font-size: 12px;gap: 4px;}
.breadcrumb-nav .separator {font-size: 11px;}
.page-header {padding: 30px 0;}
.page-title h1 {font-size: 1.8rem;}
.search-box {flex-direction: column;gap: 10px;}
.search-box input {padding: 12px 15px;}
.search-btn {border-radius: 6px;}
.article-meta {flex-wrap: wrap;gap: 8px;}
.article-stats {gap: 10px;}
}