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

/* 项目信息卡片 */
.project-info {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;background:#f8fafc;padding:25px;border-radius:12px;margin:30px 0}
.info-item {text-align:center}
.info-value {font-size:24px;font-weight:bold;color:#f97316}
.info-label {font-size:14px;color:#64748b;margin-top:5px}

/* 文章标题区 */
.article-header {background:#fff;padding:40px 0;border-bottom:1px solid #e2e8f0}
.article-meta-bar {display:flex;gap:30px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.article-category {display:inline-block;padding:6px 18px;background:#f97316;color:#fff;border-radius:20px;font-size:14px;font-weight:500}
.article-meta {display:flex;gap:25px;font-size:15px;color:#64748b}
.article-meta-item {display:flex;align-items:center;gap:5px}
.article-title {font-size:42px;line-height:1.4;color:#1e293b;margin-bottom:25px;font-weight:700}
.article-share {display:flex;gap:15px;align-items:center}
.share-btn {padding:8px 16px;background:#f1f5f9;color:#475569;border-radius:8px;font-size:14px;cursor:pointer;transition:.3s;border:1px solid #e2e8f0}
.share-btn:hover {background:#f97316;color:#fff;border-color:#f97316}

/* 文章内容区 */
.article-container {display:flex;gap:40px;padding:50px 0}
.article-main {flex:1;background:#fff;padding:50px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);width: 830px;float: left;margin-right: 20px;}
/*.article-container{display:flex;gap:30px;padding:50px 15px;max-width:1200px;margin:0 auto;} /**/
/*.article-main{flex:1 1 0%;min-width:0;background:#fff;padding:clamp(25px,3vw,50px);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);}/**/
.article-content {font-size:17px;color:#334155}
.article-content h2 {font-size:28px;color:#1e293b;margin:40px 0 20px;padding-bottom:10px;border-bottom:2px solid #f97316;margin-top:-180px;padding-top:180px;}
.article-content h3 {font-size:22px;color:#1e293b;margin:30px 0 15px}
.article-content p {margin-bottom:20px}
.article-content ul, .article-content ol {margin:20px 0;padding-left:30px}
.article-content li {margin-bottom:10px}
.article-content img {width:100%;border-radius:8px;margin:25px 0;box-shadow:0 4px 15px rgba(0,0,0,.1)}
.article-content .image-caption {text-align:center;font-size:14px;color:#64748b;margin:-20px 0 25px}
.article-content a {color:#f97316;text-decoration:underline}
.article-content a:hover {color:#ea580c}
.article-content blockquote {background:#f8fafc;border-left:4px solid #f97316;padding:20px;margin:25px 0;color:#475569}

/* 防止图片/表格撑破 */
.article-content img,.article-content table{max-width:100%;} /**/
/*.article-content table{display:block;overflow-x:auto;}*/ /**/

/* 文中CTA */
.in-article-cta {background:linear-gradient(135deg,#fef3e2 0%,#fed7aa 100%);border:1px solid #fbbf24;border-radius:12px;padding:25px;margin:35px 0;text-align:center}
.in-article-cta h4 {font-size:20px;color:#92400e;margin-bottom:10px}
.in-article-cta p {color:#78350f;margin-bottom:20px}
.in-article-cta button {padding:12px 35px;background:#f97316;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:.3s}
.in-article-cta button:hover {background:#ea580c;transform:translateY(-2px)}

/* 标签云 */
.article-tags {display:flex;gap:10px;flex-wrap:wrap;margin:0px 0;padding:20px 0;border-top:1px solid #e2e8f0}
.tag-link {padding:8px 16px;background:#f1f5f9;color:#475569;border-radius:20px;font-size:14px;text-decoration:none;transition:.3s}
.tag-link:hover {background:#f97316;color:#fff}

/* 相关推荐 */
.related-section {margin-top:50px;padding-top:40px;border-top:2px solid #f1f5f9}
.related-title {font-size:24px;color:#1e293b;margin-bottom:25px;font-weight:600}
.related-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.related-card {background:#f8fafc;padding:20px;border-radius:8px;transition:.3s}
.related-card:hover {background:#e0f2fe;transform:translateY(-3px)}
.related-card h4 {font-size:16px;color:#1e293b;margin-bottom:8px}
.related-card p {font-size:14px;color:#64748b;margin-bottom:10px}
.related-card a {color:#f97316;font-size:14px;font-weight:500}

/* 作者信息 */
.author-box {background:#f8fafc;padding:30px;border-radius:12px;margin:40px 0;display:flex;gap:25px;align-items:center}
.author-avatar {width:80px;height:80px;border-radius:50%;object-fit:cover}
.author-info h4 {font-size:18px;color:#1e293b;margin-bottom:8px}
.author-info p {font-size:15px;color:#475569;margin-bottom:10px}
.author-social {display:flex;gap:10px}
.author-social a {padding:5px 12px;background:#e2e8f0;color:#475569;border-radius:15px;font-size:12px;text-decoration:none}

/* 订阅表单 */
.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}

/* 评论区 */
.comment-section {margin-top:50px;padding-top:40px;border-top:2px solid #f1f5f9}
.comment-title {font-size:24px;color:#1e293b;margin-bottom:25px}
.comment-form {background:#f8fafc;padding:30px;border-radius:12px;margin-bottom:30px}
.comment-form textarea {width:100%;padding:15px;border:1px solid #e2e8f0;border-radius:8px;min-height:120px;margin-bottom:15px}
.comment-form input {padding:12px;border:1px solid #e2e8f0;border-radius:8px;width:48%}
.comment-form button {padding:12px 35px;background:#f97316;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}

/* 侧边栏 */
.sidebar {width:320px;flex-shrink:0;float: right;position: sticky;top: 150px;}
.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}

/* 资料下载 */
.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}
		
/* 相关案例 */
.case-item {display:flex;gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #f1f5f9;}
.case-item img {width:80px;height:60px;object-fit:cover;border-radius:6px; float:left; margin-right:10px;}
.case-item-info { float:right;}
.case-item-info h4 {font-size:14px;color:#1e293b;margin-bottom:5px}
.case-item-info p {font-size:12px;color:#94a3b8}

/* 目录导航 */
.toc {background:#f8fafc;padding:20px;border-radius:8px;margin-bottom:20px}
.toc h4 {font-size:16px;color:#1e293b;margin-bottom:15px}
.toc ul {list-style:none;padding-left:0}
.toc li {margin-bottom:8px}
.toc a {color:#475569;font-size:14px;text-decoration:none}
.toc a:hover {color:#f97316}

/* 倒计时 */
.djs {width: 250px;float: right;position: relative;bottom: 200px;font-size: 24px;font-weight: bolder;text-align: center;border: 1px #b9adad dashed; border-radius: 20px;}
.djsml {width: 250px;float: right;position: relative;bottom: 100px;font-size: 24px;font-weight: bolder;text-align: center;border: 1px #b9adad dashed; border-radius: 20px;}
#countdown { font-size:28px; color:#FF0000;}

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

/* 响应式 */
/*@media(max-width:768px){
	.article-container {flex-direction:column}
	.sidebar {width:100%;order:2}
	.article-main {padding:25px}
	.article-title {font-size:28px}
	.article-meta-bar {flex-direction:column;align-items:flex-start;gap:15px}
	.author-box {flex-direction:column;text-align:center}
}
*/

/* 手机端响应式：<768px 改为上下堆叠 */
@media(max-width:768px){
	.article-container{flex-direction:column;padding:20px 0px;}
	.sidebar{width:100%;order:2;}
	.article-main{padding:15px; width:100%;margin-bottom: 20px;}
	.article-title{font-size:28px}
	.article-content h2{font-size:24px}
	.article-content h3{font-size:20px}
	.in-article-cta button,
	.comment-form button,
	.sidebar-section button{padding:10px 20px;font-size:14px;}
	form[style*="display:flex"]{flex-direction:column;}
	form input,form button{width:100%!important;}
	.article-meta-bar {flex-direction:column;align-items:flex-start;gap:15px}
	.author-box {flex-direction:column;text-align:center}
	.toc {display: flex;flex-direction: column;}
	.djs {position:unset;}
	.project-info {display: flex;flex-wrap: wrap;}
	.mulu {display:none;}
	.minglu table{ font-size:14px;}
	.djsml {position:unset;}
	#sidebarToc { display: none;}
}