:root {
  --background: 216 42% 97%;
  --foreground: 218 36% 12%;
  --primary: 221 86% 56%;
  --secondary: 154 62% 42%;
  --muted: 214 28% 90%;
  --destructive: 6 82% 56%;
  --border: 214 26% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 30px rgba(8, 18, 38, 0.08);
  --shadow-md: 0 20px 60px rgba(6, 18, 44, 0.16);
  --shadow-lg: 0 30px 90px rgba(4, 14, 34, 0.24);
  --transition-fast: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-smooth: 420ms cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
}

.dark {
  --background: 225 35% 8%;
  --foreground: 210 24% 96%;
  --primary: 214 92% 64%;
  --secondary: 154 73% 49%;
  --muted: 226 24% 16%;
  --destructive: 5 82% 60%;
  --border: 221 20% 22%;
  --card: 225 30% 11%;
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 20%, hsla(214, 92%, 64%, 0.16), transparent 26%),
    radial-gradient(circle at 80% 10%, hsla(26, 90%, 58%, 0.12), transparent 20%),
    radial-gradient(circle at 70% 80%, hsla(154, 73%, 49%, 0.12), transparent 22%),
    hsl(var(--background));
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.glass {
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.12), hsla(0, 0%, 100%, 0.06));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  box-shadow: var(--shadow-md);
}

.surface {
  background: hsl(var(--card) / 0.72);
  border: 1px solid hsl(var(--border) / 0.55);
  box-shadow: var(--shadow-sm);
}

.premium-gradient {
  background: linear-gradient(135deg, hsla(214, 92%, 64%, 0.95), hsla(154, 73%, 49%, 0.9) 56%, hsla(26, 90%, 58%, 0.9));
}

.neon-ring {
  box-shadow:
    0 0 0 1px hsla(214, 92%, 64%, 0.18),
    0 0 40px hsla(214, 92%, 64%, 0.16),
    0 0 70px hsla(154, 73%, 49%, 0.12);
}

.card-tilt {
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.card-tilt:hover {
  transform: perspective(1100px) rotateX(7deg) rotateY(-7deg) translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.float-slow { animation: floatSlow 7s ease-in-out infinite; }
.float-delayed { animation: floatSlow 9s ease-in-out infinite 1.2s; }
.spin-slow { animation: spinSlow 32s linear infinite; }
.pulse-soft { animation: pulseSoft 2.8s ease-in-out infinite; }
.fade-up { animation: fadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.route-dash { stroke-dasharray: 8 10; animation: dashMove 18s linear infinite; }

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-14px) translateX(6px); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseSoft {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0px); }
}

@keyframes dashMove {
  to { stroke-dashoffset: -400; }
}

.scrollbar-thin::-webkit-scrollbar { width: 10px; height: 10px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 999px;
}

.map-grid {
  background-image:
    linear-gradient(hsla(0, 0%, 100%, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px hsla(214, 92%, 64%, 0.24);
  border-color: hsl(var(--primary));
}

::selection {
  background: hsl(var(--primary) / 0.24);
  color: hsl(var(--foreground));
}