/* ============================================================
   矩阵动态详细页 css
   ============================================================ */
   
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter','Segoe UI',system-ui,-apple-system,'Microsoft YaHei',sans-serif;
  background:#f5f5f5; color:#555; line-height:1.8; -webkit-font-smoothing:antialiased; padding:0 20px; }
.container { max-width:1400px; margin:0 auto; padding:20px 0 60px; }

.site-header { position:relative; padding:24px 40px; margin-bottom:30px; background:#0F3057;
  border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,.3); display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center; gap:18px; }
.brand .logo { font-size:1.8rem; font-weight:700; letter-spacing:1px; color:#fff; text-decoration:none; }
.brand .tagline { font-size:.8rem; color:#8a8a9e; margin-left:12px; letter-spacing:2px; font-weight:300;
  border-left:1px solid rgba(255,255,255,.08); padding-left:14px; }
.main-nav { display:flex; gap:28px; font-size:.95rem; font-weight:500; flex-wrap:wrap; }
.main-nav a { color:#b0c4db; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; transition:all .3s; }
.main-nav a:hover,.main-nav a.active { color:#fff; border-bottom-color:#dc0000; }

.breadcrumb { font-size:.85rem; color:#999; margin-bottom:18px; }
.breadcrumb a { color:#888; text-decoration:none; }
.breadcrumb a:hover { color:#0F3057; }
.breadcrumb span { margin:0 6px; color:#ccc; }

.art-wrap { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:40px 46px;
  margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,.03); }
.art-wrap h1 { font-size:1.95rem; font-weight:700; color:#1f1f1f; line-height:1.45; letter-spacing:.5px; }
.art-meta { display:flex; gap:22px; flex-wrap:wrap; font-size:.84rem; color:#aaa; margin:14px 0 18px;
  padding-bottom:16px; border-bottom:1px solid #f0f0f0; }
.art-meta i { margin-right:5px; }
.tagline-box { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tg { display:inline-block; background:#eef2f7; color:#0F3057; padding:3px 13px; border-radius:20px;
  font-size:.78rem; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tg.g { background:#fff4e5; color:#b26a00; max-width:none; white-space:normal; }
.tg.s { background:#eaf7ef; color:#1a7f45; }
.summary { background:#f7f9fc; border-left:4px solid #0F3057; border-radius:0 8px 8px 0;
  padding:16px 20px; margin-bottom:26px; font-size:.95rem; color:#666; }
.summary strong { color:#0F3057; }

.art-body { font-size:1.02rem; color:#444; }
.art-body h2 { font-size:1.35rem; color:#1f1f1f; margin:32px 0 14px; padding-left:12px; border-left:4px solid #0F3057; }
.art-body h3 { font-size:1.12rem; color:#1f1f1f; margin:22px 0 10px; }
.art-body p { margin-bottom:14px; }
.art-body ul,.art-body ol { margin:0 0 16px 22px; }
.art-body li { margin-bottom:8px; }
.art-body table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.94rem; }
.art-body th { background:#f7f9fc; padding:10px 12px; border:1px solid #e8edf4; text-align:left; }
.art-body td { padding:10px 12px; border:1px solid #eef2f7; }

.art-body img { max-width:100%; height:auto; border-radius:8px; margin:12px 0; }
.art-body blockquote { border-left:3px solid #dc0000; background:#fdf6f6; padding:10px 16px; margin:14px 0; color:#777; }
.art-body code { background:#f4f6f8; padding:2px 6px; border-radius:4px; font-size:.9em; }

/* ---------- 同步分发 ---------- */
.spread-box { margin-top: 34px; padding-top: 24px; border-top: 1px solid #f0f0f0; }
.spread-hd { font-size: 1.05rem; color: #1f1f1f; font-weight: 600; margin-bottom: 14px; }
.spread-hd i { color: #0F3057; margin-right: 8px; }
.spread-links { display: flex; gap: 10px; flex-wrap: wrap; }
.spread-item {
  display: inline-block; padding: 8px 16px; border: 1px solid #e0e6ee;
  border-radius: 22px; background: #f7f9fc; color: #0F3057;
  text-decoration: none; font-size: .88rem; transition: all .3s;
}
.spread-item:hover { background: #0F3057; color: #fff; border-color: #0F3057; }
.spread-item i { margin-left: 6px; font-size: .72rem; opacity: .75; }

.faq-box { margin-top:34px; border-top:1px solid #f0f0f0; padding-top:26px; }
.faq-box h2 { font-size:1.2rem; color:#1f1f1f; margin-bottom:14px; }
.faq-box h2 i { color:#0F3057; margin-right:8px; }
.faq-item { border:1px solid #eef2f7; border-radius:8px; margin-bottom:10px; background:#fbfcfd; }
.faq-item summary { padding:14px 18px; cursor:pointer; font-weight:600; color:#1f1f1f; font-size:.98rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'▾'; color:#0F3057; transition:transform .3s; }
.faq-item[open] summary::after { transform:rotate(180deg); }
.faq-item .ans { padding:0 18px 16px; color:#666; font-size:.96rem; }

.rel-box { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:26px 30px;
  margin-bottom:26px; box-shadow:0 2px 8px rgba(0,0,0,.03); }
.rel-box h2 { font-size:1.15rem; color:#1f1f1f; margin-bottom:14px; }
.rel-box h2 i { color:#0F3057; margin-right:8px; }
.rel-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.rel-list a { display:block; padding:14px 16px; border:1px solid #eef2f7; border-radius:8px;
  text-decoration:none; color:#444; font-size:.94rem; transition:all .3s; }
.rel-list a:hover { border-color:#0F3057; background:#fafcfe; color:#0F3057; }
.rel-list a span { display:block; font-size:.74rem; color:#aaa; margin-top:4px; }

.nav-prev-next { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px; }
.pn { background:#fff; border:1px solid #e8e8e8; border-radius:10px; padding:14px 18px;
  text-decoration:none; color:#666; font-size:.88rem; transition:all .3s; }
.pn:hover { border-color:#0F3057; color:#0F3057; }
.pn .t { display:block; font-size:.74rem; color:#aaa; margin-bottom:4px; }
.pn.next { text-align:right; }

.site-footer { margin-top:30px; border-top:1px solid #e8e8e8; padding:32px 0 20px; text-align:center; font-size:.85rem; color:#999; }
.site-footer .footer-links { margin-top:10px; }
.site-footer  a { color:#999; text-decoration:none; margin:0 10px; }
.site-footer  a:hover { color:#0F3057; }

@media (max-width:992px){
  .site-header { padding:20px 24px; flex-direction:column; align-items:stretch; gap:14px; }
  .brand .tagline { display:block; margin-left:0; padding-left:0; border-left:none; margin-top:2px; }
  .art-wrap { padding:28px 24px; }
  .art-wrap h1 { font-size:1.55rem; }
}
@media (max-width:768px){
  body { padding:0 12px; }
  .art-wrap { padding:22px 16px; }
  .art-wrap h1 { font-size:1.3rem; }
  .art-meta { gap:12px; font-size:.78rem; }
  .rel-box { padding:20px 16px; }
  .nav-prev-next { grid-template-columns:1fr; }
  .pn.next { text-align:left; }
}
/* ===== 返回顶部按钮 ===== */
.gotop {
  position: fixed; right: 28px; bottom: 34px;
  width: 50px; height: 50px; padding: 0; border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 18px rgba(15,48,87,.18);
  cursor: pointer; z-index: 9999;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.gotop.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.gotop-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gotop-bg { fill: none; stroke: #eceff4; stroke-width: 3; }
.gotop-bar { fill: none; stroke: #0F3057; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 119.38; stroke-dashoffset: 119.38; }
.gotop-arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; }
.gotop-arrow svg { width: 18px; height: 18px; fill: none;
  stroke: #0F3057; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gotop:hover { box-shadow: 0 6px 22px rgba(15,48,87,.28); }
.gotop:hover .gotop-arrow svg { stroke: #dc0000; }
.gotop:hover .gotop-bar { stroke: #dc0000; }
@media (max-width:768px){
  .gotop { right: 14px; bottom: 18px; width: 42px; height: 42px; }
  .gotop-arrow svg { width: 15px; height: 15px; }
}
/* ===== 移动端响应式补丁 · 矩阵动态详情页 ===== */
.nav-toggle{display:none;position:absolute;top:20px;right:20px;z-index:60;width:44px;height:44px;padding:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:768px){
  .site-header{position:relative}
  .brand{padding-right:60px}
  .nav-toggle{display:flex}
  .main-nav{display:none!important;width:100%;flex-direction:column;gap:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
  .main-nav.open{display:flex!important}
  .main-nav a{padding:13px 0;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .main-nav a:last-child{border-bottom:none}
  .art-wrap{padding:20px 14px}
  .art-wrap h1{font-size:1.25rem;line-height:1.4}
  .art-meta{gap:10px;font-size:.76rem}
  .summary{padding:12px 14px;font-size:.9rem}
  .art-body{font-size:.98rem}
  .art-body h2{font-size:1.12rem;margin:24px 0 10px}
  .art-body h3{font-size:1rem}
  .art-body table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .art-body th,.art-body td{white-space:nowrap;font-size:.85rem;padding:8px 10px}
  .spread-links{gap:8px}
  .spread-item{padding:7px 13px;font-size:.82rem}
  .faq-box h2{font-size:1.05rem}
  .faq-item summary{font-size:.92rem;padding:12px 14px}
  .faq-item .ans{font-size:.9rem;padding:0 14px 14px}
  .rel-box{padding:18px 14px}
  .rel-list{grid-template-columns:1fr}
  .nav-prev-next{grid-template-columns:1fr}
  .pn.next{text-align:left}
}
@media (max-width:400px){ .art-wrap h1{font-size:1.12rem} .tg{max-width:100%} }



/* ============================================================
   【补丁】Font Awesome 图标配色 —— 矩阵动态详细页
   2026-09-16 追加

   问题根因：图标是"字体字形"，颜色 = 继承父元素的 color。
     .art-meta { color:#aaa }   ← meta 行文字是灰的
   所以里面的 <i> 全部跟着变灰。这不是故障，是字体图标的正常特性。
   对比：本页 .faq-box h2 i 单独设过 color:#0F3057，那些就是蓝的。

   改色只需改下面 :root 里的变量值，全页图标统一生效。

   ⚠️ 配套必做（本 CSS 管不了，必须改 HTML 模板）：
   当前详细页 head 只有 jzdtxx.css 与 tsjz-mobile.css，
   【缺少】Font Awesome 样式表，图标根本不会渲染。
   必须在 jzdtxx.css 之前补一行：
     <link rel="stylesheet" href="/css/all.min.css" />
   帝国CMS：后台 → 模板 → 管理内容模板 → 搜 jzdtxx.css → 在它前面插入。
   ============================================================ */

:root{
  --ico-main:   #0F3057;   /* 主色：分类(fa-folder)、首发(fa-share-nodes)、FAQ(fa-circle-question) */
  --ico-accent: #dc0000;   /* 强调色：hover 提亮 */
  --ico-views:  #1a7f45;   /* 浏览量(fa-eye)：绿色，呼应 .tg.s */
  --ico-mute:   #8a97a8;   /* 次要灰：日期(fa-calendar) */
  --ico-opa:    .85;       /* 默认透明度，让图标比文字略轻 */
}

/* 文字保持原灰，只给图标上色 */
.art-meta { color:#aaa; }

.art-meta i {
  color: var(--ico-main);
  opacity: var(--ico-opa);
  transition: color .3s, opacity .3s;
}

/* 浏览量单独用绿色，一眼能区分 */
.art-meta .fa-eye { color: var(--ico-views); }

/* 日期图标低调处理 */
.art-meta .fa-calendar { color: var(--ico-mute); }

/* 以下几处原本已设过色，这里统一收进变量，日后一处修改全站生效 */
.faq-box h2 i  { color: var(--ico-main); }
.rel-box h2 i  { color: var(--ico-main); }
.spread-hd i   { color: var(--ico-main); }

/* 分发链接里的小箭头：跟随文字色，略淡 */
.spread-item i { opacity:.75; }

/* 可选：图标等宽，meta 行对齐更整齐（需同步给 HTML 加 fa-fw） */
.fa-fw,
.art-meta i[class*="fa-"] {
  display:inline-block;
  width:1.15em;
  text-align:center;
}

/* 移动端微调：小屏图标略收 */
@media (max-width:768px){
  .art-meta i { opacity:.9; }
}