:root {
  --background: 226 100% 98%;
  --foreground: 224 27% 17%;
  --primary: 232 59% 54%;
  --secondary: 221 68% 95%;
  --muted: 223 35% 95%;
  --destructive: 0 73% 56%;
  --border: 225 28% 88%;
  --card: 0 0% 100%;
  --success: 147 45% 42%;
  --warning: 38 92% 50%;
  --shadow-sm: 0 8px 24px rgba(61, 83, 163, 0.08);
  --shadow-md: 0 16px 48px rgba(61, 83, 163, 0.12);
  --shadow-lg: 0 24px 64px rgba(29, 47, 108, 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
}

.dark {
  --background: 223 33% 11%;
  --foreground: 220 33% 95%;
  --primary: 229 72% 69%;
  --secondary: 223 27% 18%;
  --muted: 223 26% 16%;
  --destructive: 0 74% 62%;
  --border: 223 22% 24%;
  --card: 223 29% 14%;
  --success: 151 50% 48%;
  --warning: 39 93% 58%;
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 54px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.44);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, hsla(var(--primary), 0.17), transparent 28%),
    linear-gradient(180deg, hsla(var(--primary), 0.12), hsla(var(--background), 1) 30%, hsla(var(--background), 1) 100%);
}

.safe-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}

.glass-card {
  background: hsla(var(--card), 0.8);
  backdrop-filter: blur(18px);
  border: 1px solid hsla(var(--border), 0.7);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}

.soft-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px hsla(var(--primary), 0.18);
}

.pulse-dot {
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  background: hsla(var(--success), 0.24);
  animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.65); opacity: 0.8; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.bus-float {
  animation: bus-float 3.4s ease-in-out infinite;
}

@keyframes bus-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.slide-up {
  animation: slide-up 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.check-burst {
  animation: check-burst 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes check-burst {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.map-grid {
  background-image:
    linear-gradient(hsla(var(--primary), 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--primary), 0.08) 1px, transparent 1px),
    radial-gradient(circle at 24% 22%, hsla(var(--success), 0.12), transparent 18%),
    radial-gradient(circle at 78% 72%, hsla(var(--primary), 0.12), transparent 16%),
    linear-gradient(180deg, hsla(var(--secondary), 0.55), hsla(var(--background), 0.9));
  background-size: 24px 24px, 24px 24px, auto, auto, auto;
}

.route-dash {
  stroke-dasharray: 8 10;
  animation: route-flow 10s linear infinite;
}

@keyframes route-flow {
  to { stroke-dashoffset: -180; }
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}