/* ============================================================
   声量月报详细页 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:#666; line-height:1.7; -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:26px; 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-head { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:34px 36px;
  margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,.03); }
.art-head h1 { font-size:2rem; font-weight:700; color:#1f1f1f; letter-spacing:1px; line-height:1.4; }
.art-meta { margin-top:12px; font-size:.85rem; color:#999; display:flex; gap:20px; flex-wrap:wrap; }
.art-meta i { margin-right:5px; }
.divider { height:1px; background:#f0f0f0; margin:18px 0; }
.art-head .lead { font-size:.98rem; color:#777; }

.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin-bottom:24px; }
.kpi { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:24px 22px;
  box-shadow:0 2px 8px rgba(0,0,0,.03); position:relative; overflow:hidden; }
.kpi::before { content:''; position:absolute; left:0; top:0; width:4px; height:100%; background:#0F3057; opacity:.75; }
.kpi .lab { font-size:.85rem; color:#999; letter-spacing:1px; }
.kpi .num { font-size:2.3rem; font-weight:700; color:#0F3057; line-height:1.25; margin:4px 0 2px; }
.kpi .num small { font-size:.9rem; font-weight:400; color:#999; margin-left:4px; }
.kpi .cmp { font-size:.78rem; }
.kpi .cmp.up { color:#1a9c5b; }
.kpi .cmp.down { color:#c9302c; }
.kpi .cmp.flat { color:#aaa; }

.panel { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:26px 28px;
  margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,.03); }
.panel h2 { font-size:1.2rem; font-weight:600; color:#1f1f1f; margin-bottom:16px;
  padding-left:12px; border-left:4px solid #0F3057; }
.chart-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.chart { width:100%; height:300px; }
.chart-empty { text-align:center; color:#aaa; padding:60px 0; font-size:.92rem; }

.arch-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.arch-table th { background:#f7f9fc; text-align:left; padding:12px 14px; font-weight:600;
  color:#2c3e50; border-bottom:2px solid #e8edf4; }
.arch-table td { padding:12px 14px; border-bottom:1px solid #eef2f7; }
.arch-table tr:hover { background:#fafcfe; }
.arch-table td a { color:#1f1f1f; text-decoration:none; font-weight:500; }
.arch-table td a:hover { color:#0F3057; }
.badge { display:inline-block; background:#eef2f7; color:#0F3057; padding:2px 12px;
  border-radius:20px; font-size:.75rem; }

.art-body { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:32px 36px;
  margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,.03); font-size:1rem; color:#555; }
.art-body h3 { font-size:1.1rem; color:#1f1f1f; margin:22px 0 10px; }
.art-body h3:first-child { margin-top:0; }
.art-body p { margin-bottom:12px; }
.art-body ul { margin:0 0 12px 20px; }
.art-body li { margin-bottom:6px; }

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

.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-head h1 { font-size:1.6rem; }
  .chart-2 { grid-template-columns:1fr; }
}
@media (max-width:768px){
  body { padding:0 12px; }
  .art-head,.art-body,.panel { padding:22px 18px; }
  .art-head h1 { font-size:1.35rem; }
  .nav-prev-next { grid-template-columns:1fr; }
  .arch-table { min-width:600px; }
  .panel { overflow-x:auto; }
}
/* ===== 返回顶部按钮 ===== */
.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)}
  .art-head{padding:20px 16px}
  .art-head h1{font-size:1.28rem}
  .art-meta{gap:8px;font-size:.78rem;flex-direction:column}
  .art-head .lead{font-size:.92rem}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:16px 14px}
  .kpi .num{font-size:1.6rem}
  .kpi .lab{font-size:.78rem}
  .panel{padding:18px 14px}
  .panel h2{font-size:1.05rem}
  .chart{height:240px}
  .arch-table{min-width:520px;font-size:.85rem}
  .arch-table th,.arch-table td{padding:10px 8px}
  .art-body{padding:20px 16px;font-size:.95rem}
  .nav-prev-next{grid-template-columns:1fr}
  .pn.next{text-align:left}
}