* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  color: #1f2937;
  background: #f3f4f6;
  line-height: 1.7;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 24px 20px 48px; }

header { padding: 28px 32px; background: #fff; border-radius: 10px; margin-bottom: 20px; border-left: 5px solid #2563eb; }
header h1 { font-size: 26px; font-weight: 700; color: #111827; }
header .sub { font-size: 14px; color: #6b7280; margin-top: 8px; }
header .warn-sub { color: #92400e; background: #fef3c7; border-left: 3px solid #d97706;
  padding: 8px 12px; border-radius: 4px; line-height: 1.6; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card { background: #fff; border-radius: 10px; padding: 20px; border-top: 3px solid #2563eb; }
.card .v { font-size: 27px; font-weight: 700; color: #111827; }
.card .k { font-size: 14px; color: #6b7280; margin-top: 4px; }
.card .n { font-size: 14px; color: #9ca3af; margin-top: 6px; }
.card.warn { border-top-color: #dc2626; }
.card.warn .v { color: #dc2626; }
.card.ok { border-top-color: #059669; }

.box { background: #fff; border-radius: 10px; padding: 24px 28px 20px; margin-bottom: 20px; }
.box .t { font-size: 18px; font-weight: 700; color: #111827; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
.box .d { font-size: 14px; color: #6b7280; margin: 12px 0 4px; }

.box.note { border-left: 4px solid #d97706; background: #fffbeb; }
.box.note ul { margin: 12px 0 4px 20px; }
.box.note li { font-size: 14px; color: #57534e; margin-bottom: 6px; }

.chart { height: 420px; width: 100%; }
.chart.tall { height: 620px; }

footer { text-align: center; font-size: 14px; color: #9ca3af; padding-top: 16px; }

@media (max-width: 760px) {
  .wrap { padding: 14px 12px 32px; }
  header { padding: 20px; }
  .box { padding: 18px 16px 14px; }
  .chart { height: 340px; }
  .chart.tall { height: 520px; }
}