:root {
  --color-primary: #C8102E;
  --color-bg: #0f0f0f;
  --color-surface: #1c1c1e;
  color-scheme: dark;
}

html,
body {
  min-height: 100%;
  background: var(--color-bg);
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app-shell {
  height: 100dvh;
  overflow: hidden;
}

.map-fullscreen {
  height: calc(100dvh - 64px);
  width: 100%;
}

.line-map {
  height: 40dvh;
  min-height: 280px;
}

.bottom-sheet {
  position: fixed;
  right: 0.75rem;
  bottom: calc(4.75rem + env(safe-area-inset-bottom));
  left: 0.75rem;
  z-index: 600;
  max-height: 44dvh;
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1.5rem 1.5rem 1rem 1rem;
  background: rgb(28 28 30 / 94%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
  backdrop-filter: blur(18px);
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.nav-btn.is-active {
  color: white;
  background: rgb(200 16 46 / 18%);
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.7);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

.user-marker {
  position: relative;
}

.user-marker span {
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid white;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 8px rgb(37 99 235 / 20%);
}

.user-marker::after {
  position: absolute;
  inset: -4px;
  display: block;
  border-radius: 999px;
  background: rgb(37 99 235 / 50%);
  animation: pulse 1.8s infinite;
  content: '';
}

.user-marker--offline span {
  background: #737373;
  box-shadow: 0 0 0 8px rgb(115 115 115 / 20%);
}

.user-marker--offline::after {
  background: rgb(115 115 115 / 45%);
}

.bus-marker svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 45%));
}

.bus-marker--offline svg {
  opacity: 0.55;
  filter: grayscale(1);
}

.stop-marker span {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #d4d4d8;
  border-radius: 999px;
  background: #71717a;
  box-shadow: 0 0 0 7px rgb(113 113 122 / 18%);
}

.eta-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.eta-badge--green {
  background: rgb(34 197 94 / 18%);
  color: #86efac;
}

.eta-badge--yellow {
  background: rgb(250 204 21 / 18%);
  color: #fde68a;
}

.eta-badge--red {
  background: rgb(239 68 68 / 18%);
  color: #fca5a5;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #18181b;
  color: white;
}

.leaflet-container {
  background: #09090b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}