body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f7f7f9;
  color: #222;
}
.page {
  max-width: 1120px;
  margin: 24px auto;
  background: white;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
}
h1 { margin: 0 0 6px 0; }
.subtle { color: #4b5563; margin: 0; }
.controls { margin: 18px 0 12px; }
.checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 8px 18px;
  margin-bottom: 14px;
}
.check-item { display: flex; align-items: flex-start; gap: 8px; }
button {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: #2563eb;
  color: white;
}
.status {
  margin: 10px 0 14px;
  min-height: 20px;
  color: #374151;
}
.chart-wrap {
  height: 420px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
}
#chartSvg {
  width: 100%;
  height: 100%;
  display: block;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 12px 0 8px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.legend-swatch {
  width: 16px;
  height: 4px;
  border-radius: 999px;
  display: inline-block;
}
.error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 12px 0;
}
.detail-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.detail-card {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 12px;
  background: #fafafa;
}
.detail-card h3 { margin-top: 0; }
.source { color: #4b5563; font-size: 13px; }
@media (max-width: 900px) {
  .checklist, .detail-list { grid-template-columns: 1fr; }
}