/* =========================================================
   内容详情页（文章/新闻/产品详情）样式
   设计语言与 index.css 一致：主色 #0e3a7a，点缀 #d9962f/#f2b95e
   依赖 index.css 中的 .page-banner / .crumb / .main-grid / .list-panel / .side-* 等
   ========================================================= */

/* 文章主体（复用 .list-panel 白卡片） */
.article{}
.article-title{font-size:28px;color:#0e3a7a;font-weight:800;line-height:1.4;margin-bottom:16px;word-break:break-word}
.article-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:#8a94a6;padding-bottom:18px;border-bottom:1px solid #f0f3f8;margin-bottom:26px}
.article-meta span{display:inline-flex;align-items:center;gap:6px}
.article-meta i{color:#d9962f;font-size:12px}
.article-meta a{color:#0e3a7a;transition:color .3s}
.article-meta a:hover{color:#d9962f}

/* 正文排版 */
.article-content{font-size:15px;color:#4a5468;line-height:1.95}
.article-content p{margin-bottom:18px;text-align:justify}
.article-content img{max-width:100%;height:auto;border-radius:8px;margin:12px auto;display:block}
.article-content h2,.article-content h3,.article-content h4{color:#0e3a7a;margin:28px 0 14px;font-weight:700;line-height:1.4}
.article-content h2{font-size:22px}
.article-content h3{font-size:19px}
.article-content h4{font-size:17px}
.article-content a{color:#0e3a7a;text-decoration:underline;text-underline-offset:2px}
.article-content a:hover{color:#d9962f}
.article-content strong,.article-content b{color:#0e3a7a}
.article-content blockquote{border-left:3px solid #d9962f;background:#fafcff;padding:12px 18px;margin:18px 0;color:#7a8498;border-radius:0 8px 8px 0;line-height:1.85}
.article-content ul,.article-content ol{margin:0 0 18px 22px}
.article-content ul{list-style:disc}
.article-content ol{list-style:decimal}
.article-content ul li,.article-content ol li{margin-bottom:8px}
.article-content table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14px}
.article-content table th,.article-content table td{border:1px solid #e3e9f2;padding:10px 12px;text-align:left}
.article-content table th{background:#f4f7fc;color:#0e3a7a}
.article-content hr{border:none;border-top:1px dashed #e3e9f2;margin:24px 0}
.article-content video{max-width:100%;border-radius:8px;margin:12px 0}

/* 标签 */
.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;padding-top:22px;border-top:1px dashed #e8edf4}
.article-tags > i{color:#d9962f;font-size:15px}
.article-tags a{display:inline-flex;align-items:center;padding:5px 14px;background:#f4f7fc;border-radius:999px;font-size:13px;color:#4a5468;transition:all .3s}
.article-tags a:hover{background:#0e3a7a;color:#fff}

/* 点赞 / 踩 */
.article-actions{display:flex;justify-content:center;gap:16px;margin:34px 0 6px}
.article-actions a{display:inline-flex;align-items:center;gap:8px;padding:11px 28px;border-radius:999px;font-size:14px;font-weight:600;transition:all .3s;border:1px solid #e3e9f2}
.article-actions b{font-weight:700;font-variant-numeric:tabular-nums}
.article-actions .like-btn{color:#0e3a7a;background:#f4f7fc}
.article-actions .like-btn:hover{background:#0e3a7a;color:#fff;border-color:#0e3a7a}
.article-actions .oppose-btn{color:#8a94a6;background:#f4f7fc}
.article-actions .oppose-btn:hover{background:#d94b4b;color:#fff;border-color:#d94b4b}

/* 上一篇 / 下一篇 */
.article-prevnext{display:flex;justify-content:space-between;gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid #f0f3f8}
.article-prevnext > div{flex:1;min-width:0}
.article-prevnext .pn-next{text-align:right}
.article-prevnext a{display:flex;align-items:center;gap:10px;color:#4a5468;padding:14px 18px;border-radius:12px;background:#f7faff;transition:all .3s}
.article-prevnext .pn-next a{justify-content:flex-end}
.article-prevnext a:hover{background:#0e3a7a;color:#fff}
.article-prevnext a:hover i{color:#fff}
.article-prevnext i{color:#d9962f;font-size:16px;flex:0 0 auto;transition:color .3s}
.article-prevnext span{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.article-prevnext em{font-style:normal;font-size:12px;color:#a3aac0;margin-bottom:3px}
.article-prevnext a:hover em{color:#cdd8ec}
.article-prevnext span:not(em){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:#0e3a7a}
.article-prevnext .pn-none{display:block;padding:14px 18px;color:#b3bcc9;font-size:13px}

/* 返回列表 */
.article-back{margin-top:24px}
.article-back a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#7a8498;transition:color .3s}
.article-back a:hover{color:#d9962f}

/* ===== 暗色模式 ===== */
html.dark .article-title{color:#e6ecf8}
html.dark .article-meta{color:#a3aac0;border-bottom-color:#2a3148}
html.dark .article-meta a{color:#e6ecf8}
html.dark .article-meta a:hover{color:#ffd98a}
html.dark .article-content{color:#cdd8ec}
html.dark .article-content h2,html.dark .article-content h3,html.dark .article-content h4{color:#e6ecf8}
html.dark .article-content a{color:#ffd98a}
html.dark .article-content strong,html.dark .article-content b{color:#e6ecf8}
html.dark .article-content blockquote{background:#1d2335;border-left-color:#f2b95e;color:#a3aac0}
html.dark .article-content table th,html.dark .article-content table td{border-color:#2a3148}
html.dark .article-content table th{background:#1d2335;color:#e6ecf8}
html.dark .article-tags{border-top-color:#2a3148}
html.dark .article-tags a{background:#2a3148;color:#cdd8ec}
html.dark .article-tags a:hover{background:#1657ad;color:#fff}
html.dark .article-actions a{border-color:#3a4359;background:#2a3148}
html.dark .article-prevnext{border-top-color:#2a3148}
html.dark .article-prevnext a{background:#1d2335;color:#cdd8ec}
html.dark .article-prevnext a:hover{background:#1657ad;color:#fff}
html.dark .article-prevnext .pn-none{color:#7a8498}
html.dark .article-back a{color:#a3aac0}

/* ===== 响应式 ===== */
@media (max-width: 768px){
  .article-title{font-size:22px;margin-bottom:12px}
  .article-meta{gap:10px 14px;font-size:12px;padding-bottom:14px;margin-bottom:20px}
  .article-content{font-size:14px;line-height:1.85}
  .article-content h2{font-size:19px}
  .article-content h3{font-size:17px}
  .article-actions{flex-direction:column;gap:12px}
  .article-actions a{justify-content:center}
  .article-prevnext{flex-direction:column;gap:12px}
  .article-prevnext .pn-next{text-align:left}
  .article-prevnext .pn-next a{justify-content:flex-start}
}
@media (max-width: 480px){
  .article-title{font-size:20px}
  .article-prevnext span:not(em){font-size:13px}
}