.map-dashboard {
  display: grid;
  grid-template-columns: minmax(320px, 36%) minmax(0, 64%);
  gap: 20px;
  align-items: stretch;
}

.map-side { display: flex; flex-direction: column; gap: 18px; }
.map-test-block { padding: 18px; background: #f5f8f8; border: 1px solid #dce6e4; border-radius: 10px; }
.map-test-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.map-test-head small { color: #079d87; font-weight: 800; letter-spacing: 1.1px; }
.map-test-head h3 { margin: 5px 0 0; font-size: 20px; }
.map-test-head > strong { font-size: 18px; white-space: nowrap; }
.map-test-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.map-test-metrics div { min-width: 0; padding: 9px; background: #fff; border-radius: 7px; }
.map-test-metrics small, .map-test-metrics b { display: block; }
.map-test-metrics small { margin-bottom: 4px; color: #6b7e80; font-size: 10px; }
.map-test-metrics b { overflow-wrap: anywhere; font-size: 13px; }
.map-canvas { min-width: 0; display: flex; align-items: stretch; }
.map-canvas .test-map { width: 100%; height: 100%; align-content: center; }
.map-side .legend { margin-top: auto; flex-wrap: wrap; }
.test-map i.reading { background: #f3bd31; box-shadow: 0 0 8px rgba(243, 189, 49, .85); }
.legend i.reading { background: #f3bd31; }

@media (max-width: 1000px) {
  .map-dashboard { grid-template-columns: 1fr; }
  .map-canvas .test-map { min-height: 360px; }
}

@media (max-width: 600px) {
  .map-test-block { padding: 14px; }
}