/* 阅读进度条 */
.reading-progress {position:fixed;top:0;left:0;width:0;height:3px;background:#f97316;z-index:1001;transition:width .3s}

/* 面包屑 */
.breadcrumb {background:#fff;padding:20px 0;border-bottom:1px solid #e2e8f0}
.breadcrumb-content {font-size:14px;color:#64748b}
.breadcrumb-content a {color:#1e3a8a}
.breadcrumb-content span {color:#94a3b8}

/* 页面标题 */
.page-header {background:linear-gradient(135deg,#3b82f6 0%,#1e3a8a 100%);color:#fff;padding:60px 0;text-align:center}
.page-header h1 {font-size:36px;margin-bottom:15px;font-weight:700}
.page-header p {font-size:18px;opacity:.95}

/* 分类标签栏 */
.category-nav {background:#fff;padding:20px 0;box-shadow:0 2px 10px rgba(0,0,0,.05);position:sticky;top:60px;z-index:100}
.category-tags {display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.cat-tag {padding:10px 25px;background:#f1f5f9;color:#475569;border-radius:25px;font-size:14px;cursor:pointer;transition:.3s;border:1px solid #e2e8f0;font-weight:500}
.cat-tag:hover {background:#e2e8f0}
.cat-tag.active {background:#f97316;color:#fff;border-color:#f97316}

/* 主内容区 */
.news-section {padding:50px 0}
.news-container {display:flex;gap:40px}
.news-main {flex:1}

/* 文章卡片 */
.article-card {background:#fff;border-radius:12px;padding:30px;margin-bottom:25px;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:.3s}
.article-card:hover {transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.article-header {display:flex;gap:25px;margin-bottom:20px}
.article-image {width:260px;height:180px;object-fit:cover;border-radius:8px;flex-shrink:0}
.article-content {flex:1}
.article-category {display:inline-block;padding:5px 15px;background:#f97316;color:#fff;border-radius:15px;font-size:12px;margin-bottom:10px}
.article-title {font-size:24px;margin-bottom:15px;color:#1e293b;font-weight:600;line-height:1.4}
.article-title a {color:inherit}
.article-title a:hover {color:#f97316}
.article-meta {display:flex;gap:20px;font-size:14px;color:#94a3b8;margin-bottom:15px}
.article-desc {font-size:15px;color:#475569;line-height:1.8;margin-bottom:15px}
.article-tags {display:flex;gap:10px;flex-wrap:wrap}
.article-tag {padding:4px 12px;background:#f1f5f9;color:#475569;border-radius:15px;font-size:12px}
.read-more {color:#f97316;font-weight:600;display:inline-flex;align-items:center;gap:5px;margin-top:10px}

/* 侧边栏 */
.sidebar {width:320px;flex-shrink:0}
.sidebar-section {background:#fff;padding:25px;border-radius:12px;margin-bottom:25px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.sidebar-title {font-size:18px;margin-bottom:20px;color:#1e293b;font-weight:600;border-left:4px solid #f97316;padding-left:15px}

/* 热门文章 */
.hot-article {display:flex;gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #f1f5f9}
.hot-article img {width:80px;height:60px;object-fit:cover;border-radius:6px}
.hot-article-info {flex:1}
.hot-article-title {font-size:14px;color:#1e293b;margin-bottom:5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hot-article-meta {font-size:12px;color:#94a3b8}

/* 资料下载 */
.download-item {display:flex;align-items:center;gap:15px;padding:15px;background:#f8fafc;border-radius:8px;margin-bottom:15px;cursor:pointer;transition:.3s}
.download-item:hover {background:#e0f2fe}
.download-icon {font-size:24px;color:#f97316}
.download-info h4 {font-size:14px;color:#1e293b;margin-bottom:5px}
.download-info p {font-size:12px;color:#94a3b8}

/* 订阅表单 */
.subscribe-form {display:flex;flex-direction:column;gap:15px}
.subscribe-form input {padding:12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px}
.subscribe-form button {padding:12px;background:#f97316;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}

/* 分页 */
.pagination {display:flex;justify-content:center;gap:10px;margin:40px 0}
.page-btn {padding:10px 15px;background:#fff;border:1px solid #e2e8f0;color:#475569;border-radius:8px;cursor:pointer;transition:.3s}
.page-btn:hover {background:#f97316;color:#fff;border-color:#f97316}
.page-btn.active {background:#f97316;color:#fff}

/* 响应式 */
@media(max-width:768px){
	.news-container {flex-direction:column}
	.sidebar {width:100%}
	.article-header {flex-direction:column}
	.article-image {width:100%;height:auto}
	.category-tags {justify-content:flex-start;overflow-x:auto;padding-bottom:10px}
	
}