:root {
  --blue-950: #062b6f;
  --blue-900: #083d91;
  --blue-800: #0754bd;
  --blue-700: #0d6de4;
  --blue-100: #eaf4ff;
  --text: #14346e;
  --muted: #7085ab;
  --line: #dce8f7;
  --panel: #fff;
  --page: #f1f6fd;
  --green: #20b98a;
  --orange: #f59b2f;
  --red: #f15747;
  --cyan: #18bfd2;
  --violet: #865cf6;
  --shadow: 0 10px 30px rgba(31, 86, 154, 0.08);
  font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgba(42, 136, 242, 0.14), transparent 26rem),
    linear-gradient(180deg, #eef6ff 0%, var(--page) 30%, #f7faff 100%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

.hall-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 132px;
  padding: 24px clamp(20px, 4vw, 62px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(44, 167, 255, 0.48), transparent 15rem),
    linear-gradient(90deg, #062969 0%, #07469a 48%, #063174 100%);
}
.hall-header::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: -1px;
  width: 46%;
  height: 88px;
  opacity: 0.3;
  background: linear-gradient(0deg, rgba(79, 170, 255, 0.55), rgba(79, 170, 255, 0));
  clip-path: polygon(0 100%,0 64%,4% 64%,4% 42%,7% 42%,7% 100%,14% 100%,14% 32%,18% 32%,18% 100%,27% 100%,27% 54%,30% 54%,30% 24%,34% 24%,34% 100%,43% 100%,43% 40%,47% 40%,47% 14%,51% 40%,55% 40%,55% 100%,66% 100%,66% 48%,70% 48%,70% 30%,74% 30%,74% 100%,84% 100%,84% 38%,88% 38%,88% 22%,92% 38%,96% 38%,96% 100%,100% 100%);
}
.hall-brand,
.hall-time { position: relative; z-index: 1; }
.hall-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hall-brand img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 18, 65, 0.36));
}
.hall-brand strong {
  display: block;
  color: #fff;
  font-size: clamp(26px, 3.3vw, 44px);
  line-height: 1.1;
  font-weight: 900;
}
.hall-brand em {
  display: block;
  margin-top: 10px;
  color: rgba(232, 245, 255, 0.92);
  font-size: clamp(14px, 1.4vw, 18px);
  font-style: normal;
  font-weight: 700;
}
.hall-time {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: rgba(237, 248, 255, 0.95);
  text-align: right;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
}
.hall-time b { font-size: 20px; }

.hall-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  gap: 10px;
  padding: 14px clamp(18px, 3vw, 30px);
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(35, 82, 143, 0.08);
}
.hall-nav a {
  display: grid;
  place-items: center;
  min-height: 46px;
  color: #1d407c;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 800;
}
.hall-nav a:hover,
.hall-nav a:focus-visible,
.hall-nav .is-active {
  color: #fff;
  background: linear-gradient(180deg, #1d86f3, #075bcf);
  box-shadow: 0 8px 18px rgba(13, 109, 228, 0.22);
}

.hall-main {
  width: min(1380px, calc(100% - 36px));
  margin: 18px auto 28px;
}
.metric-grid {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.metric-grid.primary { grid-template-columns: repeat(6, 1fr); }
.metric-grid.secondary { grid-template-columns: repeat(5, 1fr); margin-top: 14px; padding: 12px 16px; }
.metric {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid #e8f0fb;
}
.metric:last-child { border-right: 0; }
.metric i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  color: #fff;
  border-radius: 13px;
  font-style: normal;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 12px 18px rgba(16, 83, 167, 0.16);
}
.metric p {
  margin: 0;
  min-width: 0;
  color: #244981;
  font-size: 13px;
  font-weight: 900;
}
.metric strong {
  display: block;
  margin-top: 7px;
  color: var(--blue-900);
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1;
  white-space: nowrap;
}
.metric small { color: #395f9d; font-size: 13px; }
.metric span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.metric.small i { width: 42px; height: 42px; border-radius: 50%; font-size: 20px; }
.metric.small strong { font-size: 24px; }
.blue i,.blue-bg { background: linear-gradient(180deg, #36a4ff, #0967df); }
.orange i { background: linear-gradient(180deg, #ffbc50, #f2762d); }
.green i,.green-bg { background: linear-gradient(180deg, #38d8ad, #13a372); }
.violet i { background: linear-gradient(180deg, #a57cff, #744be6); }
.cyan i,.cyan-bg { background: linear-gradient(180deg, #41d7ee, #0c9fc7); }
.teal i { background: linear-gradient(180deg, #33d6ca, #0c9c9f); }
.red i,.red-bg { background: linear-gradient(180deg, #ff7968, #f04438); }

.panel-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.panel {
  min-width: 0;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.map-panel,.supervision-panel { grid-column: span 7; }
.project-panel,.index-panel { grid-column: span 5; }
.work-panel { grid-column: span 4; }
.downloads-panel { grid-column: span 8; }
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.panel-title h2 { margin: 0; color: #12347a; font-size: 22px; }
.panel-title span,.panel-title a { color: var(--muted); font-size: 13px; font-weight: 800; }

.map-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: center;
}
.map-visual {
  position: relative;
  min-height: 360px;
  border-radius: 8px;
  background: radial-gradient(circle at 52% 45%, rgba(81, 180, 255, 0.16), transparent 13rem), linear-gradient(180deg, #f9fcff, #eff7ff);
}
.china-map {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 76%;
  height: 68%;
  background: linear-gradient(135deg, #7bc4ff, #2288ed 55%, #0d63c9);
  clip-path: polygon(6% 47%, 12% 32%, 25% 28%, 32% 17%, 44% 24%, 53% 14%, 65% 20%, 76% 13%, 88% 28%, 94% 44%, 84% 54%, 92% 66%, 78% 75%, 66% 70%, 57% 86%, 44% 78%, 33% 87%, 26% 73%, 13% 70%);
  filter: drop-shadow(0 16px 22px rgba(13, 102, 211, 0.26));
}
.china-map::before {
  content: "";
  position: absolute;
  inset: 10%;
  opacity: .55;
  background-image: linear-gradient(30deg, transparent 0 45%, rgba(255,255,255,.55) 45% 46%, transparent 46%), linear-gradient(115deg, transparent 0 50%, rgba(255,255,255,.42) 50% 51%, transparent 51%);
  background-size: 78px 62px;
}
.pin {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(255,255,255,.18), 0 0 18px currentColor;
}
.p1{left:68%;top:38%;color:#31d991;background:#31d991}.p2{left:76%;top:46%;color:#ffc24d;background:#ffc24d}.p3{left:61%;top:56%;color:#ff6b61;background:#ff6b61}.p4{left:50%;top:48%;color:#24d1de;background:#24d1de}.p5{left:41%;top:59%;color:#c28bff;background:#c28bff}.p6{left:30%;top:39%;color:#8ee66c;background:#8ee66c}.p7{left:82%;top:60%;color:#35a2ff;background:#35a2ff}.p8{left:70%;top:68%;color:#f9a33a;background:#f9a33a}
.legend {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #315b93;
  font-size: 12px;
  font-weight: 800;
}
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.l1{background:#16b47d}.l2{background:#1b8cff}.l3{background:#ffc048}.l4{background:#f26455}

.region-list,.notice-list,.score-list,.work-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.region-list li,.work-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #3e5e91;
  font-size: 14px;
  font-weight: 800;
}
.region-list strong,.work-list strong { color: #1b61bd; white-space: nowrap; }

.project-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.project-stats div {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 8px;
  background: #f7fbff;
  border: 1px solid #e8f1fc;
  border-radius: 8px;
}
.project-stats span { color: var(--muted); font-size: 12px; font-weight: 900; }
.project-stats strong { color: var(--blue-800); font-size: 24px; }
.project-stats div:first-child strong { color: var(--orange); }
.project-stats div:nth-child(3) strong { color: var(--red); }
.project-stats div:nth-child(4) strong { color: var(--green); }
.project-stats em { color: #6682ad; font-size: 12px; font-style: normal; font-weight: 800; }
.project-panel h3,.supervision-panel h3 { margin: 4px 0 14px; color: #173b7e; font-size: 17px; }
.notice-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  color: #2b4d85;
  font-size: 14px;
  font-weight: 800;
}
.notice-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-list span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--blue-700); border-radius: 50%; }
.notice-list b { padding: 4px 10px; color: #2380c8; background: #eaf6ff; border-radius: 999px; font-size: 12px; }
.notice-list time { color: var(--muted); font-size: 12px; }

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.mini-metrics div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  background: #f8fbff;
  border: 1px solid #e8f1fc;
  border-radius: 8px;
}
.mini-metrics i {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 42px;
  height: 42px;
  color: #fff;
  border-radius: 50%;
  font-style: normal;
}
.mini-metrics span { color: var(--muted); font-size: 12px; font-weight: 900; }
.mini-metrics strong { color: var(--blue-900); font-size: 18px; }
.bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 18px;
  min-height: 250px;
  padding: 24px 16px 12px;
  background: linear-gradient(#eef5fe 1px, transparent 1px) 0 0 / 100% 25%, linear-gradient(180deg, #fff, #f8fbff);
  border-radius: 8px;
}
.bars div { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; gap: 8px; height: 180px; }
.bars div::before,.bars div::after { content: ""; align-self: end; display: block; border-radius: 6px 6px 0 0; }
.bars div::before { height: var(--a); background: linear-gradient(180deg, #2688f2, #76bdff); }
.bars div::after { height: var(--b); background: linear-gradient(180deg, #21bb8a, #86e0bf); }
.bars span { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }

.index-content {
  display: grid;
  grid-template-columns: minmax(140px, .9fr) minmax(130px, 1fr);
  gap: 12px;
  align-items: center;
}
.radar {
  display: grid;
  place-items: center;
  min-height: 218px;
  background: radial-gradient(circle, transparent 0 25%, rgba(14,101,216,.08) 25% 26%, transparent 26% 50%, rgba(14,101,216,.08) 50% 51%, transparent 51%), conic-gradient(from 18deg, rgba(13,109,228,.22), transparent 20%, rgba(13,109,228,.16) 40%, transparent 60%, rgba(13,109,228,.16) 82%, transparent);
  border-radius: 8px;
}
.radar span { width: 122px; height: 122px; background: rgba(40,131,236,.22); border: 2px solid rgba(25,105,217,.72); clip-path: polygon(50% 3%, 95% 36%, 79% 90%, 20% 90%, 4% 36%); }
.score-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  color: #4c6894;
  border-bottom: 1px solid #edf3fb;
  font-size: 13px;
  font-weight: 800;
}
.score-list strong { color: var(--blue-800); white-space: nowrap; }
.score-total {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf3fb;
}
.score-total span,.score-total em { color: #315c98; font-style: normal; font-weight: 900; }
.score-total strong { color: var(--blue-800); font-size: 40px; }
.score-total small { font-size: 16px; }

.work-list li { padding: 10px 0; border-bottom: 1px solid #edf3fb; }
.work-panel p { margin: 18px 0 0; color: var(--muted); font-size: 13px; font-weight: 800; }
.download-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.download-grid button {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 116px;
  color: #1d4a86;
  background: linear-gradient(180deg, #f7fbff, #eef7ff);
  border: 1px solid #e5effc;
  border-radius: 8px;
  font-weight: 900;
}
.download-grid i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #fff;
  background: linear-gradient(180deg, #43c6ff, #146fe2);
  border-radius: 12px;
  font-size: 25px;
  font-style: normal;
}
.download-grid button:nth-child(3n + 2) i { background: linear-gradient(180deg, #38d8ad, #13a372); }
.download-grid button:nth-child(3n) i { background: linear-gradient(180deg, #ffbc50, #f2762d); }

.hall-footer {
  color: rgba(231, 242, 255, 0.9);
  background: linear-gradient(180deg, #073a8d, #052968);
}
.hall-footer nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 74px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hall-footer a {
  display: grid;
  place-items: center;
  font-weight: 900;
  border-left: 1px solid rgba(255,255,255,.12);
}
.hall-footer a:first-child { border-left: 0; }
.hall-footer p { margin: 0; padding: 18px; color: rgba(220,235,255,.74); text-align: center; font-size: 13px; font-weight: 700; }

@media (max-width: 900px) and (min-width: 761px) {
  .hall-header { padding-inline: 24px; }
  .hall-brand img { width: 62px; height: 62px; }
  .hall-time { font-size: 14px; }
  .hall-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 12px 14px; }
  .hall-nav a { min-width: 0; font-size: 14px; }
  .metric-grid { gap: 8px; padding: 14px 10px; }
  .metric-grid.secondary { gap: 6px; padding: 10px; }
  .metric { gap: 6px; padding: 7px 4px; }
  .metric i { width: 40px; height: 40px; font-size: 20px; }
  .metric p { font-size: 12px; }
  .metric strong { font-size: 20px; }
  .metric.small i { width: 36px; height: 36px; }
  .metric.small strong { font-size: 21px; }
  .panel { padding: 20px; }
  .project-stats { gap: 8px; }
  .project-stats div { padding-inline: 6px; }
  .mini-metrics { gap: 8px; }
  .mini-metrics div { grid-template-columns: 38px minmax(0, 1fr); padding: 9px 7px; }
  .mini-metrics i { width: 38px; height: 38px; }
}

@media (max-width: 760px) {
  .hall-header { align-items: flex-start; flex-direction: column; min-height: 0; padding: 18px; }
  .hall-brand { align-items: flex-start; }
  .hall-brand img { width: 56px; height: 56px; }
  .hall-brand strong { font-size: 25px; }
  .hall-brand em,.hall-time { white-space: normal; }
  .hall-time { justify-items: start; text-align: left; }
  .hall-nav,.metric-grid.primary,.metric-grid.secondary,.mini-metrics,.project-stats,.download-grid,.hall-footer nav { grid-template-columns: 1fr; }
  .hall-nav { position: static; }
  .hall-main { width: min(100% - 24px, 1380px); }
  .metric { border-right: 0; border-bottom: 1px solid #e8f0fb; }
  .metric:last-child { border-bottom: 0; }
  .map-panel,.project-panel,.supervision-panel,.index-panel,.work-panel,.downloads-panel { grid-column: 1 / -1; }
  .map-content,.index-content { grid-template-columns: 1fr; }
  .region-list { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: 17px; }
  .map-visual { min-height: 300px; }
  .notice-list { gap: 11px; }
  .notice-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .notice-list b { display: none; }
  .bars { gap: 10px; overflow-x: auto; }
  .bars div { min-width: 48px; }
  .score-total { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 520px) {
  .region-list { grid-template-columns: 1fr; }
}