:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: 42 40% 96%;
  --foreground: 220 34% 13%;
  --card: 40 44% 99%;
  --card-foreground: 220 34% 13%;
  --popover: 40 44% 99%;
  --popover-foreground: 220 34% 13%;
  --primary: 218 78% 43%;
  --primary-foreground: 42 40% 98%;
  --secondary: 37 44% 88%;
  --secondary-foreground: 220 34% 18%;
  --muted: 39 30% 89%;
  --muted-foreground: 219 18% 38%;
  --accent: 178 55% 36%;
  --accent-foreground: 42 40% 98%;
  --destructive: 0 72% 42%;
  --destructive-foreground: 42 40% 98%;
  --success: 148 55% 31%;
  --success-foreground: 42 40% 98%;
  --warning: 32 88% 38%;
  --warning-foreground: 42 40% 98%;
  --info: 203 82% 36%;
  --info-foreground: 42 40% 98%;
  --border: 220 18% 82%;
  --input: 220 18% 78%;
  --ring: 218 78% 43%;
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px hsl(var(--foreground) / 0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground) / 0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground) / 0.12);
  --shadow-elegant: 0 20px 64px hsl(var(--primary) / 0.18);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: 222 38% 8%;
  --foreground: 42 34% 94%;
  --card: 222 32% 12%;
  --card-foreground: 42 34% 94%;
  --popover: 222 32% 12%;
  --popover-foreground: 42 34% 94%;
  --primary: 211 92% 62%;
  --primary-foreground: 222 38% 8%;
  --secondary: 219 24% 18%;
  --secondary-foreground: 42 34% 94%;
  --muted: 219 24% 18%;
  --muted-foreground: 220 14% 72%;
  --accent: 174 70% 43%;
  --accent-foreground: 222 38% 8%;
  --destructive: 0 74% 58%;
  --destructive-foreground: 42 34% 94%;
  --success: 148 58% 44%;
  --success-foreground: 222 38% 8%;
  --warning: 36 92% 55%;
  --warning-foreground: 222 38% 8%;
  --info: 203 92% 62%;
  --info-foreground: 222 38% 8%;
  --border: 219 22% 26%;
  --input: 219 22% 30%;
  --ring: 211 92% 62%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 10% 0%, hsl(var(--primary) / 0.13), transparent 30rem),
    radial-gradient(circle at 90% 10%, hsl(var(--accent) / 0.14), transparent 28rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

input,
select {
  font-size: max(16px, 1rem);
}

.glass-shell {
  background: hsl(var(--background) / 0.82);
  backdrop-filter: blur(18px);
}

.atlas-map {
  position: relative;
  min-height: 28rem;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid hsl(var(--border));
  background:
    radial-gradient(circle at 52% 48%, hsl(var(--accent) / 0.16), transparent 12rem),
    linear-gradient(135deg, hsl(var(--primary) / 0.12), hsl(var(--card)), hsl(var(--accent) / 0.10));
  box-shadow: var(--shadow-elegant);
}

.atlas-map::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: calc(var(--radius) + 4px);
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.05) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
}

.continent-blob {
  position: absolute;
  border-radius: 45% 55% 55% 45%;
  background: hsl(var(--secondary) / 0.78);
  border: 1px solid hsl(var(--border));
  box-shadow: inset 0 1px 0 hsl(var(--card) / 0.7);
}

.blob-americas-north {
  width: 23%;
  height: 28%;
  left: 10%;
  top: 18%;
  transform: rotate(-14deg);
}

.blob-americas-south {
  width: 13%;
  height: 27%;
  left: 27%;
  top: 51%;
  transform: rotate(18deg);
}

.blob-europe-africa {
  width: 20%;
  height: 38%;
  left: 47%;
  top: 27%;
  transform: rotate(8deg);
}

.blob-asia {
  width: 25%;
  height: 31%;
  left: 64%;
  top: 24%;
  transform: rotate(-8deg);
}

.blob-oceania {
  width: 12%;
  height: 10%;
  left: 78%;
  top: 66%;
  transform: rotate(8deg);
}

.marker-pulse {
  animation: markerPulse 2.4s ease-in-out infinite;
}

@keyframes markerPulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.22); }
  50% { box-shadow: 0 0 0 0.75rem hsl(var(--primary) / 0); }
}

.safe-bottom {
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
}

@media (max-width: 639px) {
  .atlas-map {
    min-height: 24rem;
  }
}