:root {
  --orange: #f47b00;
  --orange-light: #f7a24b;
  --text: #333;
  --muted: #777;
  --line: #e6e6e6;
  --shadow: 0 3px 12px rgba(0, 0, 0, 0.13);
  --page-max: 1160px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

.report-page {
  width: min(100% - 64px, var(--page-max));
  margin: 33px auto 48px;
}

.report-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(480px, 100%);
  height: 56px;
  margin: 0 auto 64px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.report-tabs.is-hidden {
  display: none;
}

.tab {
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--line);
  color: #333;
  background: #fff;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.tab:last-child {
  border-right: 0;
}

.tab:hover,
.tab:focus-visible {
  background: #fff5eb;
}

.tab.is-active {
  color: #fff;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 70px 50px;
}

.report-card {
  min-width: 0;
  text-align: center;
}

.cover-link {
  display: block;
  outline-offset: 6px;
}

.cover {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 255 / 346;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report-title {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  transition: color 0.2s ease;
}

.report-card:hover .cover,
.report-card:focus-within .cover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.report-card:hover .report-title,
.report-card:focus-within .report-title {
  color: var(--orange);
}

.cover.theme-2024 {
  background:
    radial-gradient(circle at 60% 30%, rgba(255, 174, 29, 0.85) 0 16%, transparent 17%),
    radial-gradient(circle at 21% 67%, #f4c15d 0 20%, transparent 21%),
    linear-gradient(180deg, #fff 0%, #fff8ee 100%);
}

.cover.theme-2024 .cover-art::before {
  content: "";
  position: absolute;
  left: 42px;
  bottom: 78px;
  width: 100px;
  height: 118px;
  border-radius: 48% 48% 26% 26%;
  background: linear-gradient(#fed86a, #f7a826);
  box-shadow: 88px 18px 0 -16px #f6bd50, 132px 65px 0 -20px #d9d9d9;
}

.cover.theme-2023 {
  background:
    radial-gradient(circle at 78% 21%, transparent 0 11%, rgba(245, 245, 245, 0.95) 12% 13%, transparent 14%),
    linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

.cover.theme-2023 .cover-art::before {
  content: "";
  position: absolute;
  left: 33%;
  top: 24%;
  width: 34%;
  height: 45%;
  border: 6px solid #f8ad18;
  border-radius: 999px;
  background: linear-gradient(180deg, #d7efff, #ffffff 45%, #45aee8 46% 62%, #fff 63%);
  box-shadow: inset 0 0 0 3px #fff;
}

.cover.theme-2022 {
  background:
    linear-gradient(150deg, transparent 0 46%, rgba(255, 181, 43, 0.5) 46% 48%, transparent 49%),
    linear-gradient(180deg, #f7f7f7, #ededed);
}

.cover.theme-2022 .cover-art::before {
  content: "";
  position: absolute;
  left: 34px;
  bottom: 90px;
  width: 190px;
  height: 118px;
  background:
    linear-gradient(30deg, transparent 0 42%, #f7bd45 43% 55%, transparent 56%),
    linear-gradient(90deg, #ffffff 0 30%, #e6f7ff 30% 60%, #fff 60%);
  transform: skewY(-18deg);
  box-shadow: 0 34px 0 -10px rgba(34, 164, 210, 0.22);
}

.cover.theme-2021 {
  background:
    radial-gradient(circle at 56% 28%, rgba(234, 202, 141, 0.7), transparent 24%),
    linear-gradient(20deg, #fff 0 52%, #f5a323 53% 65%, #fff7eb 66%);
}

.cover.theme-2021 .cover-art::before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 82px;
  width: 154px;
  height: 100px;
  background: repeating-linear-gradient(90deg, rgba(204, 150, 74, 0.36) 0 4px, transparent 4px 16px);
  opacity: 0.8;
}

.cover.theme-2020 {
  background:
    linear-gradient(180deg, rgba(158, 212, 236, 0.7), transparent 38%),
    linear-gradient(135deg, #eef9f2 0 45%, #8db864 46% 100%);
}

.cover.theme-2020 .cover-art::before {
  content: "";
  position: absolute;
  left: 30px;
  bottom: 76px;
  width: 180px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  transform: rotate(-16deg);
}

.cover.theme-2019 {
  background:
    linear-gradient(90deg, #d9f1ff 0 49%, transparent 50%),
    linear-gradient(180deg, #dff7ff, #d8f1bd);
}

.cover.theme-2019 .cover-art::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 112px;
  width: 160px;
  height: 54px;
  background: linear-gradient(90deg, #ffffff 0 48%, #ffc23d 49% 68%, #fff 69%);
  border-radius: 28px;
  box-shadow: 40px 52px 0 -12px rgba(70, 70, 70, 0.22);
}

.cover.theme-2018 {
  background:
    radial-gradient(circle at 66% 34%, rgba(95, 164, 216, 0.64) 0 18%, transparent 19%),
    radial-gradient(circle at 34% 43%, rgba(95, 164, 216, 0.28) 0 12%, transparent 13%),
    linear-gradient(180deg, #fff, #fbfbfb);
}

.cover.theme-2018 .cover-art::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 72px;
  width: 140px;
  height: 140px;
  border: 2px solid #2d70bb;
  border-radius: 50%;
  box-shadow: 74px 34px 0 -38px rgba(247, 169, 36, 0.82);
}

.cover.theme-2017 {
  background:
    linear-gradient(90deg, #fff 0 63%, rgba(145, 81, 20, 0.95) 64%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 12px, transparent 12px 24px);
}

.cover.theme-2017 .cover-art::before {
  content: "责任坚守";
  position: absolute;
  right: 14px;
  top: 70px;
  width: 70px;
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  writing-mode: vertical-rl;
}

@media (max-width: 1024px) {
  .report-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 28px;
  }
}

@media (max-width: 760px) {
  .report-page {
    width: min(100% - 28px, var(--page-max));
    margin-top: 20px;
  }

  .report-tabs {
    height: 48px;
    margin-bottom: 36px;
  }

  .tab {
    font-size: 16px;
  }

  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
  }

  .report-title {
    font-size: 18px;
  }
}

@media (max-width: 460px) {
  .report-grid {
    grid-template-columns: 1fr;
  }
}