.gpx-map-panel {
  padding: clamp(20px, 3vw, 34px);
  border-bottom: 1px solid #e3e6eb;
  background: linear-gradient(145deg, #f8f5ed, #eef2f7);
}
.gpx-map-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gpx-map-heading small { color: #7b8495; font: 800 11px Arial, sans-serif; letter-spacing: .16em; }
.gpx-map-heading h3 { margin: 4px 0 0; color: #101828; font-size: clamp(22px, 2.3vw, 34px); }
.gpx-download { padding: 10px 15px; border: 1px solid #101828; color: #101828; font-size: 15px; font-weight: 700; white-space: nowrap; }
.gpx-download:hover, .gpx-download:focus-visible { background: #101828; color: #fff; }
[data-route-map] { display: block; width: 100%; height: clamp(300px, 42vw, 560px); margin-top: 20px; touch-action: pan-y; }
.gpx-map-legend { display: flex; justify-content: center; gap: 24px; color: #596274; font-size: 14px; }
.gpx-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.gpx-dot { width: 10px; height: 10px; border-radius: 50%; background: #14804a; }
.gpx-dot.finish { background: #ff5a1f; }
@media (max-width: 560px) {
  .gpx-map-heading { align-items: flex-start; flex-direction: column; }
  .gpx-download { width: 100%; text-align: center; }
  [data-route-map] { height: 340px; }
}