:root {
  --background: 236 38% 96%;
  --foreground: 234 24% 9%;
  --primary: 174 96% 46%;
  --primary-foreground: 230 35% 5%;
  --secondary: 278 94% 63%;
  --secondary-foreground: 0 0% 100%;
  --muted: 232 16% 45%;
  --muted-foreground: 232 16% 35%;
  --destructive: 352 88% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 232 18% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(236 38% 12% / 0.08);
  --shadow-md: 0 16px 42px hsl(236 38% 12% / 0.14);
  --shadow-lg: 0 28px 70px hsl(236 38% 12% / 0.22);
  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 235 38% 5%;
  --foreground: 222 38% 96%;
  --primary: 174 96% 50%;
  --primary-foreground: 230 40% 5%;
  --secondary: 278 94% 66%;
  --secondary-foreground: 0 0% 100%;
  --muted: 230 16% 63%;
  --muted-foreground: 230 14% 70%;
  --destructive: 352 88% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 231 21% 17%;
  --card: 234 31% 9%;
  --shadow-sm: 0 8px 24px hsl(0 0% 0% / 0.25);
  --shadow-md: 0 18px 50px hsl(0 0% 0% / 0.35);
  --shadow-lg: 0 30px 90px hsl(0 0% 0% / 0.48);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 50% -10%, hsl(var(--secondary) / 0.18), transparent 34rem),
    radial-gradient(circle at 15% 22%, hsl(var(--primary) / 0.12), transparent 19rem),
    hsl(var(--background));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button, input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

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

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

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

.glass-card {
  background: linear-gradient(180deg, hsl(var(--card) / 0.88), hsl(var(--card) / 0.68));
  border: 1px solid hsl(var(--border) / 0.86);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px);
}

.profile-orb {
  background:
    radial-gradient(circle at 30% 24%, hsl(0 0% 100% / 0.96), transparent 0.52rem),
    radial-gradient(circle at 72% 25%, hsl(var(--primary) / 0.85), transparent 1.05rem),
    radial-gradient(circle at 25% 82%, hsl(var(--secondary) / 0.96), transparent 1.55rem),
    linear-gradient(135deg, hsl(224 83% 53%), hsl(278 94% 62%) 47%, hsl(174 96% 48%));
}

.nav-shell {
  background: linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--card) / 0.96));
  border-top: 1px solid hsl(var(--border) / 0.92);
  box-shadow: 0 -18px 50px hsl(0 0% 0% / 0.42);
  backdrop-filter: blur(24px);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: hsl(var(--border) / 0.42);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.08), transparent);
  animation: shimmer 1.25s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (min-width: 640px) {
  body {
    background:
      radial-gradient(circle at 50% -18%, hsl(var(--secondary) / 0.22), transparent 40rem),
      radial-gradient(circle at 20% 22%, hsl(var(--primary) / 0.12), transparent 24rem),
      hsl(var(--background));
  }
}