.st-gpx-route-planner {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.st-gpx-route-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 12px;
}

.st-gpx-route-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.st-gpx-route-card p {
  margin: 0 0 8px;
  font-weight: 700;
  text-transform: capitalize;
}

.st-gpx-route-actions,
.st-gpx-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.st-gpx-open-map,
.st-gpx-tool,
.st-gpx-route-actions a {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  background: #111;
  color: #fff;
}

.st-gpx-route-actions a,
.st-gpx-tool {
  background: #f1f3f5;
  color: #111;
}

.st-gpx-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  margin: 0 0 12px;
  align-items: start;
}

.st-gpx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.st-gpx-stat,
.st-gpx-hover-stat {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 120px;
}

.st-gpx-stat span,
.st-gpx-route-name,
.st-gpx-elevation-note,
.st-gpx-hover-stat span,
.st-gpx-hover-heading {
  display: block;
  font-size: 12px;
  color: #666;
}

.st-gpx-stat strong,
.st-gpx-hover-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: #111;
}

.st-gpx-route-name {
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  text-transform: capitalize;
}

.st-gpx-elevation-note { margin-top: 4px; }

.st-gpx-hover-panel {
  grid-column: 1 / -1;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
}

.st-gpx-hover-heading {
  margin-bottom: 10px;
  font-weight: 600;
}

.st-gpx-hover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.st-gpx-map {
  width: 100%;
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef1f4;
  box-sizing: border-box;
}

.st-gpx-inline-message,
.st-gpx-message {
  padding: 18px;
  border-radius: 12px;
  background: #f6f7f8;
}

.st-gpx-route-planner.is-loading .st-gpx-map { opacity: .7; }

.st-gpx-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  border: 2px solid #fff;
}

.st-gpx-pin.is-start { background: #14ae5c; }
.st-gpx-pin.is-finish { background: #dc2626; }
.st-gpx-pin.is-waypoint { background: #2563eb; }

.st-gpx-arrow-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(17,17,17,.84);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

.st-gpx-hover-tooltip {
  background: rgba(17,17,17,.92);
  color: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  padding: 0;
}

.st-gpx-hover-tooltip .leaflet-tooltip-content {
  margin: 0;
}

.st-gpx-hover-tooltip-inner {
  padding: 8px 10px;
}

.st-gpx-hover-tooltip-inner strong,
.st-gpx-hover-tooltip-inner span {
  display: block;
  color: #fff;
}

.st-gpx-hover-tooltip-inner strong {
  font-size: 13px;
  font-weight: 700;
}

.st-gpx-hover-tooltip-inner span {
  margin-top: 2px;
  font-size: 11px;
  opacity: .9;
}

.st-gpx-route-planner.is-fullscreen {
  position: fixed;
  inset: 24px;
  z-index: 99999;
  margin: 0;
  overflow: hidden;
  background: #fff;
  padding: 16px;
  border-radius: 18px;
  box-sizing: border-box;
  width: auto;
  max-width: calc(100vw - 48px);
  max-width: calc(100dvw - 48px);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}

.st-gpx-route-planner.is-fullscreen::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: -1;
}

@media (max-width: 767px) {
  .st-gpx-toolbar { grid-template-columns: 1fr; }
  .st-gpx-stats,
  .st-gpx-hover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-gpx-route-planner.is-fullscreen { inset: 10px; padding: 12px; }
}


.st-gpx-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: start;
  margin: 10px 0 12px;
}

.st-gpx-tools {
  gap: 8px;
}

.st-gpx-units {
  display: inline-flex;
  gap: 6px;
  padding: 3px;
  border-radius: 999px;
  background: #f1f3f5;
}

.st-gpx-tool {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.15;
}

.st-gpx-tool.is-unit {
  background: transparent;
  color: #555;
}

.st-gpx-tool.is-unit.is-active {
  background: #111;
  color: #fff;
}

.st-gpx-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.st-gpx-stat,
.st-gpx-hover-stat {
  padding: 8px 10px;
  border-radius: 12px;
}

.st-gpx-stat span,
.st-gpx-hover-stat span {
  font-size: 11px;
}

.st-gpx-stat strong,
.st-gpx-hover-stat strong {
  font-size: 13px;
}

.st-gpx-hover-panel {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 8px 10px 6px;
  border-radius: 14px;
}

.st-gpx-hover-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.st-gpx-hover-chart {
  margin-top: 8px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(17,17,17,.05), rgba(17,17,17,.02));
  overflow: hidden;
}

.st-gpx-hover-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.st-gpx-hover-chart-line {
  fill: none;
  stroke: #111;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: .72;
}

.st-gpx-hover-chart-dot {
  fill: #111;
  stroke: #fff;
  stroke-width: .8;
  opacity: 0;
}

.st-gpx-hover-panel:not(.has-elevation-chart) .st-gpx-hover-chart {
  display: none;
}

.st-gpx-hover-footer {
  margin-top: 6px;
  font-size: 11px;
  color: #666;
}

@media (max-width: 767px) {
  .st-gpx-toolbar { grid-template-columns: 1fr; }
  .st-gpx-stats,
  .st-gpx-hover-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .st-gpx-tools { justify-content: space-between; }
}