:root {
 --ac: #4f7df9; --ac-bg: rgba(79,125,249,0.08); --ac-glow: rgba(79,125,249,0.25);
 --pu: #7c3aed; --gn: #22c55e; --or: #f97316; --pk: ec4899;
 --dark: #0f172a; --text: #334155; --text-light: #64748b;
 --white: #fff; --bg: #f8fafc; --border: #e2e8f0;
 --gradient: linear-gradient(135deg, #4f7df9, #7c3aed);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans SC', sans-serif; color: var(--text); background: var(--bg); line-height: 1.8; }

@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.anim { opacity:0; }
.anim.visible { animation: fadeUp 0.5s ease forwards; }

/* ====================== 标题区域（白色背景 + 全屏干净） ====================== */
.detail-banner { padding: 60px 0; background:#fff; }
.detail-cnt {
  max-width: 1000px;
  margin: 0 auto;
/*  background: #fff;*/
  padding: 40px 50px;
  border-radius: 16px;
/*  box-shadow: 0 4px 15px rgba(0,0,0,0.04);*/
}
.detail-breadcrumb { font-size:13px; color:var(--text-light); margin-bottom:16px; }
.detail-breadcrumb a { color:var(--ac); text-decoration:none; }
.detail-cat { display:inline-flex; padding:6px 14px; background:var(--ac); color:var(--white); border-radius:6px; font-size:13px; font-weight:600; margin-bottom:16px; }
.detail-title { font-size:34px; font-weight:900; color:var(--dark); margin-bottom:18px; line-height:1.3; }
.detail-meta { display:flex; gap:24px; font-size:14px; color:var(--text-light); flex-wrap:wrap; }
.detail-meta span { display:flex; align-items:center; gap:5px; }

/* ====================== 内容区域（加宽 + 白色卡片 + 高级干净） ====================== */
.detail-body {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 50px;
    background: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: 10px;
}

/* 标题 */
.detail-body h1,
.detail-body h2,
.detail-body h3,
.detail-body h4,
.detail-body h5,
.detail-body h6 {
 font-weight: 700;
 color: var(--dark);
 margin: 32px 0 16px;
 line-height: 1.4;
}
.detail-body h1 { font-size: 28px; padding-left: 16px; border-left: 4px solid var(--ac); }
.detail-body h2 { font-size: 22px; padding-left: 16px; border-left: 4px solid var(--ac); }
.detail-body h3 { font-size: 18px; padding-left: 14px; border-left: 3px solid var(--pu); }
.detail-body h4 { font-size: 17px; }
.detail-body h5 { font-size: 16px; }
.detail-body h6 { font-size: 15px; color: var(--text); }

/* 段落 */
.detail-body p { font-size: 16px; line-height: 1.9; margin-bottom: 20px; }

/* 图片 */
.detail-body img {
 max-width: 100% !important;
 width: auto !important;
 height: auto !important;
 display: block;
 margin: 25px 0;
 border-radius: 12px;
}

/* 链接 */
.detail-body a { color: var(--ac); text-decoration: none; border-bottom: 1px dashed var(--ac); transition: all 0.3s; }
.detail-body a:hover { color: var(--pu); border-bottom-color: var(--pu); }

/* 列表 */
.detail-body ul,
.detail-body ol { padding-left: 24px; margin-bottom: 20px; }
.detail-body li { font-size: 15px; line-height: 1.9; margin-bottom: 6px; }
.detail-body li::marker { color: var(--ac); }

/* 引用 */
.detail-body blockquote { padding: 20px 24px; background: var(--bg); border-left: 4px solid var(--ac); border-radius: 0 10px 10px 0; margin: 24px 0; color: var(--text); }

/* 表格 */
.detail-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.detail-body table th { background: var(--ac); color: var(--white); padding: 12px 16px; text-align: left; font-weight: 600; }
.detail-body table td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.detail-body table tr:nth-child(even) td { background: var(--bg); }

/* 代码 */
.detail-body pre { background: #1e293b; color: #e2e8f0; padding: 20px 24px; border-radius: 12px; margin: 24px 0; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.detail-body code { background: var(--bg); color: var(--pu); padding: 2px 8px; border-radius: 4px; font-size: 14px; }

/* 分割线 */
.detail-body hr { border: none; height: 1px; background: var(--border); margin: 32px 0; }

/* 强调 */
.detail-body strong { color: var(--dark); font-weight: 700; }
.detail-body em { color: var(--pu); }

/* 视频/iframe */
.detail-body video,
.detail-body iframe { max-width: 100%; border-radius: 12px; margin: 20px 0; display: block; }

/* 文章标签 */
.detail-body .tags,
.detail-body .content-tags { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.detail-body .tags a,
.detail-body .content-tags a { display: inline-block; padding: 4px 12px; background: var(--bg); color: var(--text-light); border-radius: 20px; font-size: 12px; text-decoration: none; margin: 0 6px 8px 0; transition: all 0.3s; }
.detail-body .tags a:hover,
.detail-body .content-tags a:hover { background: var(--ac); color: var(--white); }

/* 相关新闻 */
.related { max-width:1000px; margin:0 auto; padding:0 48px 60px; }
.related h3 { font-size:20px; font-weight:700; color:var(--dark); margin-bottom:20px; }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.related-card { display:flex; gap:12px; padding:16px; background:var(--white); border-radius:12px; text-decoration:none; transition:all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.related-card:hover { background:var(--ac-bg); transform:translateY(-2px); }
.related-card img { width:80px; height:60px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.related-card h4 { font-size:14px; font-weight:600; color:var(--dark); line-height:1.4; }
.related-card span { font-size:12px; color:var(--text-light); }

/* 上下篇 */
.nav-news { display:flex; justify-content:space-between; max-width:1000px; margin:0 auto; padding:24px 48px 60px; gap:16px; border-top:1px solid var(--border); }
.nav-news-item { text-decoration:none; transition:all 0.3s; flex:1; }
.nav-news-item:hover .nav-news-title { color:var(--ac); }
.nav-news-label { font-size:12px; color:var(--text-light); }
.nav-news-title { font-size:14px; font-weight:600; color:var(--dark); }

/* CTA */
.cta { background:var(--gradient); padding:60px 48px; text-align:center; }
.cta h2 { font-size:28px; font-weight:900; color:var(--white); margin-bottom:16px; }
.cta p { font-size:15px; color:rgba(255,255,255,0.85); margin-bottom:24px; }
.cta-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:var(--white); color:var(--ac); border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; }

@media(max-width:768px){
 .detail-banner { padding: 40px 20px; }
 .detail-cnt { padding: 30px 20px; }
 .detail-title { font-size:24px; }
 .detail-body {
   padding: 30px 20px 40px;
   margin-left:20px;
   margin-right:20px;
   max-width: 100%;
 }
 .detail-body h1 { font-size:22px; }
 .detail-body h2 { font-size:20px; }
 .detail-body h3 { font-size:17px; }
 .related,.nav-news { padding-left:20px; padding-right:20px; }
 .related-grid { grid-template-columns:1fr; }
 .nav-news { flex-direction:column; }
 .cta { padding:40px 20px; }
 .cta h2 { font-size:22px; }
}