.mtb-card-route {
  background: var(--mtb-bg-2);
  border-radius: var(--mtb-radius-lg);
  box-shadow: var(--mtb-shadow-card);
  padding: var(--mtb-space-4);
  display: grid;
  gap: var(--mtb-space-3);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.mtb-card-route:hover {
  transform: translateY(-2px);
  box-shadow: var(--mtb-shadow-hover);
}
.mtb-card-route.is-selected {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--mtb-bg-2), var(--mtb-bg-2)) padding-box,
    var(--mtb-grad-teal-yellow) border-box;
}

.mtb-card-stat {
  background: var(--mtb-bg-2);
  border-radius: var(--mtb-radius-md);
  padding: var(--mtb-space-4);
  display: grid;
  gap: var(--mtb-space-2);
  box-shadow: var(--mtb-shadow-card);
  align-items: center;
}
.mtb-card-stat .metric {
  font-size: var(--mtb-fs-xl);
  font-weight: 600;
  color: var(--mtb-text-white);
}
.mtb-card-stat .label {
  font-size: var(--mtb-fs-sm);
  color: var(--mtb-text-muted);
}

.mtb-panel-sidebar {
  width: 360px;
  max-width: 420px;
  background: var(--mtb-glass-dark);
  backdrop-filter: var(--mtb-blur);
  border-radius: var(--mtb-radius-lg);
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.75)),
    var(--mtb-grad-teal-yellow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--mtb-shadow-glass);
  padding: var(--mtb-space-4);
  display: grid;
  gap: var(--mtb-space-4);
}