:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: 226 52% 7%;
  --foreground: 214 38% 96%;
  --card: 226 42% 11%;
  --card-foreground: 214 38% 96%;
  --popover: 226 44% 10%;
  --popover-foreground: 214 38% 96%;
  --primary: 172 74% 52%;
  --primary-foreground: 222 47% 8%;
  --secondary: 258 52% 24%;
  --secondary-foreground: 240 40% 96%;
  --muted: 225 30% 18%;
  --muted-foreground: 218 18% 73%;
  --accent: 286 82% 65%;
  --accent-foreground: 222 47% 8%;
  --destructive: 0 78% 61%;
  --destructive-foreground: 0 0% 100%;
  --success: 151 68% 44%;
  --success-foreground: 150 80% 6%;
  --warning: 38 92% 56%;
  --warning-foreground: 32 90% 8%;
  --info: 205 88% 62%;
  --info-foreground: 214 65% 8%;
  --border: 222 28% 24%;
  --input: 222 28% 24%;
  --ring: 172 74% 52%;
  --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 24px 80px hsl(var(--primary) / 0.20);
  --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: 224 48% 6%;
  --foreground: 214 38% 97%;
  --card: 226 44% 10%;
  --card-foreground: 214 38% 97%;
  --popover: 226 46% 9%;
  --popover-foreground: 214 38% 97%;
  --primary: 172 78% 56%;
  --primary-foreground: 222 47% 7%;
  --secondary: 262 48% 22%;
  --secondary-foreground: 240 40% 96%;
  --muted: 225 30% 16%;
  --muted-foreground: 218 18% 74%;
  --accent: 286 82% 68%;
  --accent-foreground: 222 47% 8%;
  --destructive: 0 78% 62%;
  --destructive-foreground: 0 0% 100%;
  --success: 151 68% 48%;
  --success-foreground: 150 80% 6%;
  --warning: 38 92% 58%;
  --warning-foreground: 32 90% 8%;
  --info: 205 88% 66%;
  --info-foreground: 214 65% 8%;
  --border: 222 28% 25%;
  --input: 222 28% 25%;
  --ring: 172 78% 56%;
}

* { box-sizing: border-box; }
html { font-family: var(--font-sans); background: hsl(var(--background)); color: hsl(var(--foreground)); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0%, hsl(var(--secondary) / 0.52), transparent 34rem), hsl(var(--background)); }
button, input { font: inherit; }
input { font-size: max(16px, 1rem); }

.safe-main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.bottom-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }

.nebula-panel {
  background: linear-gradient(145deg, hsl(var(--card) / 0.96), hsl(var(--secondary) / 0.28));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
}

.orb-stage {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, hsl(var(--primary) / 0.28), transparent 9rem),
    radial-gradient(circle at 30% 20%, hsl(var(--accent) / 0.20), transparent 8rem),
    hsl(var(--card));
  overflow: hidden;
}

.orb-stage::before,
.orb-stage::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 9999px;
  border: 1px solid hsl(var(--primary) / 0.28);
  animation: pulse-ring 3s ease-in-out infinite;
}

.orb-stage::after {
  inset: 22%;
  border-color: hsl(var(--accent) / 0.32);
  animation-delay: 1s;
}

.mining-orb {
  position: relative;
  z-index: 1;
  width: 9rem;
  height: 9rem;
  border-radius: 9999px;
  background: radial-gradient(circle at 38% 30%, hsl(var(--foreground) / 0.95), hsl(var(--primary)) 28%, hsl(var(--accent)) 62%, hsl(var(--secondary)) 100%);
  box-shadow: 0 0 64px hsl(var(--primary) / 0.34), inset 0 -18px 42px hsl(var(--background) / 0.34);
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(0.95); opacity: 0.55; }
  50% { transform: scale(1.06); opacity: 1; }
}

.route-enter { animation: route-in var(--transition-smooth) both; }
@keyframes route-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.reduced-motion * { animation: none !important; transition: none !important; }