:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #172033;
  background: #f4f6fa;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { width: min(1080px, calc(100% - 40px)); margin: 56px auto; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: white; background: #315efb; font-weight: 750; letter-spacing: -1px; }
h1 { margin: 0 0 5px; font-size: 26px; letter-spacing: -.5px; }
header p, .result-heading p { margin: 0; color: #687287; font-size: 14px; }
.query-card, .panel, .summary-grid article { background: #fff; border: 1px solid #e4e8f0; box-shadow: 0 6px 24px rgba(30, 45, 75, .04); }
.query-card { padding: 24px; border-radius: 18px; }
form { display: grid; grid-template-columns: minmax(160px, .65fr) minmax(390px, 1.35fr) 130px; gap: 16px; align-items: end; }
label span, legend { display: block; margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 600; color: #505b70; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.date-range { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; }
.date-separator { color: #8992a3; font-size: 13px; text-align: center; }
input { width: 100%; height: 44px; border: 1px solid #d8deea; border-radius: 10px; padding: 0 13px; font: inherit; color: inherit; background: #fff; outline: none; }
input:focus { border-color: #315efb; box-shadow: 0 0 0 3px rgba(49, 94, 251, .12); }
button { height: 44px; border: 0; border-radius: 10px; color: white; background: #315efb; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { background: #244de0; }
button:disabled { opacity: .65; cursor: wait; }
.presets { display: flex; gap: 8px; margin-top: 16px; }
.presets button { width: auto; height: 32px; padding: 0 12px; border: 1px solid #dfe4ed; color: #687287; background: #f8f9fc; font-size: 12px; font-weight: 500; }
.presets button:hover { color: #315efb; border-color: #b9c7f6; background: #f1f4ff; }
.presets button.active { color: #244de0; border-color: #c4d0fa; background: #eaf0ff; }
#status { margin: 14px 0 -5px; font-size: 14px; }
#status.error { color: #c93434; }
#result { margin-top: 30px; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
h2 { margin: 0 0 6px; font-size: 22px; }
#matched-keys { padding: 6px 10px; border-radius: 8px; background: #e8edfb; color: #465675; font-size: 12px; white-space: nowrap; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.summary-grid article { padding: 20px; border-radius: 14px; }
.summary-grid span { display: block; color: #687287; font-size: 13px; margin-bottom: 10px; }
.summary-grid strong { display: block; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.2; letter-spacing: -.5px; overflow-wrap: anywhere; }
.details-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; margin-top: 14px; }
.panel { padding: 22px; border-radius: 14px; min-width: 0; }
h3 { margin: 0 0 18px; font-size: 16px; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf0f5; font-size: 13px; }
dl div:last-child { border: 0; }
dt { color: #687287; }
dd { margin: 0; font-weight: 600; text-align: right; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 8px; text-align: right; border-bottom: 1px solid #edf0f5; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: #687287; font-weight: 500; }
.footnote { color: #818a9b; font-size: 12px; text-align: center; margin: 22px 0 0; }

@media (max-width: 760px) {
  main { width: min(100% - 24px, 560px); margin: 28px auto; }
  form { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .details-grid { grid-template-columns: 1fr; }
  .query-card { padding: 18px; }
}

@media (max-width: 420px) {
  .summary-grid { grid-template-columns: 1fr; }
  .result-heading { align-items: flex-start; flex-direction: column; }
}