.section {
  max-width: none;
  margin: auto;
  padding: 108px max(calc((100vw - 1180px) / 2), 30px);
}

.goods-bg { background: #f1faf6; }
.creative-bg { background: #fff7ef; }
.traffic-bg { background: #f3f8ff; }

.section-title { margin-bottom: 30px; }
.section-title > div { position: relative; padding-left: 22px; }
.section-title > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 6px;
  border-radius: 6px;
  background: var(--blue);
}
.section-title span { left: -34px; top: 9px; }
.section-title h2 { margin: 0; }
.creative-bg .section-title > div::before { background: var(--orange); }
.creative-bg .section-title span { color: #d85d00; }
.goods-bg .section-title > div::before { background: var(--green); }
.goods-bg .section-title span { color: #11845b; }
.traffic-bg .section-title > div::before { background: var(--blue); }
.traffic-bg .section-title span { color: var(--blue); }

.topbar nav {
  gap: 10px;
}

.topbar nav a {
  padding: 9px 18px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}

.topbar nav a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 45, 80, .16);
}

.topbar nav a[href="#goods"] { background: #19a974; }
.topbar nav a[href="#creative"] { background: #f47b20; }
.topbar nav a[href="#traffic"] { background: #146df4; }

.topbar > button {
  margin-left: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #69778a;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
}

.topbar .search-site {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 26px;
  background: #f4f7fb;
  color: #5d6c80;
}

.topbar .contact-site {
  margin-left: 5px;
  color: #748195;
}

.topbar > button:hover { color: #26364b; }
.topbar .search-site:hover { background: #edf2f8; }

.search-icon {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
}

.search-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 5px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.hero-grid {
  grid-template-columns: minmax(0, 960px);
  justify-content: center;
  text-align: center;
}

.hero-grid > div > p {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 { color: var(--ink); }
.hero h1 .hero-goods { color: var(--green); }
.hero h1 .hero-creative { color: var(--orange); }
.hero h1 .hero-traffic { color: var(--blue); }

.hero-actions,
.update {
  justify-content: center;
}

@media (max-width: 820px) {
  .topbar { padding: 0 18px; }
  .brand small { display: none; }
  .topbar .search-site { margin-left: auto; }
  .topbar .search-site span:last-child { display: none; }
  .topbar .contact-site { margin-left: 2px; padding-right: 0; }
  .section { padding: 75px 20px; }
  .section-title span { position: absolute; left: auto; right: 0; top: 9px; }
}
.material-body p{white-space:pre-line}
.traffic-body p{margin:0;white-space:pre-wrap}
.traffic-body img{display:block;width:min(100%,720px);max-height:520px;object-fit:contain;margin:0 0 18px;border-radius:10px;background:#f5f8fc}

.issue-meta.has-document{padding:0;border-top:0}
.issue-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0 30px}
.issue-preview-card{display:flex;min-height:190px;flex-direction:column;padding:24px;border:1px solid #d7e7df;border-radius:14px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 10px 28px rgba(20,49,82,.05);transition:transform .18s ease,box-shadow .18s ease}
a.issue-preview-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,49,82,.1)}
.issue-preview-card small{color:#11845b;font-weight:800}
.issue-preview-card b{display:block;margin-top:10px;color:var(--ink);font-size:20px;line-height:1.45}
.issue-preview-card p{display:-webkit-box;overflow:hidden;margin:10px 0 16px;color:#68768a;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.issue-preview-card span{margin-top:auto;color:#11845b;font-size:13px;font-weight:700}
.creative-bg .issue-preview-card{border-color:#f3ddcb}
.creative-bg .issue-preview-card small,.creative-bg .issue-preview-card span{color:#d85d00}
.traffic-bg .issue-preview-card{border-color:#d3e1f7}
.traffic-bg .issue-preview-card small,.traffic-bg .issue-preview-card span{color:#146df4}
.document-entry{display:flex;justify-content:space-between;gap:28px;align-items:center;margin:28px 0 32px;padding:28px 30px;border:1px solid #cfe9de;border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(20,49,82,.06)}
.document-entry>div{min-width:0}
.document-entry small{display:block;margin-bottom:7px;color:#11845b;font-weight:800;letter-spacing:1px}
.document-entry b{display:block;color:var(--ink);font-size:24px;line-height:1.45}
.document-entry p{max-width:760px;margin:10px 0 0;color:#526176;font-size:15px;line-height:1.8;white-space:pre-wrap}
.document-entry span{display:block;margin-top:9px;color:#96a1b0;font-size:12px}
.document-entry a{flex:none;padding:13px 19px;border-radius:9px;background:#19a974;color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}
.document-entry a i{font-style:normal;margin-left:6px}
.creative-bg .document-entry{border-color:#f6d8bf}
.creative-bg .document-entry small{color:#d85d00}
.creative-bg .document-entry a{background:#f47b20}
.traffic-bg .document-entry{border-color:#cfe0fb}
.traffic-bg .document-entry small{color:#146df4}
.traffic-bg .document-entry a{background:#146df4}
.archive-item{text-decoration:none;color:inherit}
.archive-item span{display:block;margin-top:6px;color:#7e8b9d}

@media (max-width: 820px) {
  .issue-preview-grid{grid-template-columns:1fr;gap:12px;margin:20px 0 24px}
  .issue-preview-card{min-height:0;padding:20px}
  .document-entry{display:block;padding:22px;margin:22px 0 26px}
  .document-entry b{font-size:21px}
  .document-entry a{display:inline-block;margin-top:18px}
}

/* Contact QR: keep the homepage card compact even when a full portrait
   enterprise-WeChat card is uploaded. The dialog keeps the whole image. */
.contact-card .qr {
  flex: 0 0 145px;
  width: 145px;
  height: 145px;
  min-width: 145px;
  min-height: 145px;
  overflow: hidden;
}

.contact-card .qr img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}

.qr-stack{flex:0 0 145px;text-align:center}
.qr-caption{display:block;margin-top:10px;color:#6e7d92!important;font-size:12px!important;letter-spacing:0!important;white-space:nowrap}
.contact-copy{flex:1;min-width:0}
.wechat-id{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;padding:10px 10px 10px 14px;border:1px solid #e2e9f2;border-radius:9px;background:#f5f8fc;color:#46566d}
.wechat-id span{font-size:15px;font-weight:700;letter-spacing:.3px}
.contact-card .wechat-id button{padding:7px 11px;border:1px solid #d7e1ee;background:#fff;color:#66758a;font-size:12px;font-weight:700}
.contact-card .wechat-id button:hover{color:#146df4;border-color:#bdd1ef}

#contactDialog .large {
  width: min(360px, 72vw);
  height: min(520px, 66vh);
  overflow: hidden;
}

#contactDialog .large img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

@media (max-width: 820px) {
  .contact-card { align-items: center; text-align: center; }
  .contact-copy{width:100%}
  .wechat-id{max-width:290px;margin-left:auto;margin-right:auto;text-align:left}
}