:root {
  --background: 290 28% 98%;
  --foreground: 268 24% 13%;
  --primary: 321 79% 54%;
  --secondary: 266 65% 58%;
  --muted: 290 18% 92%;
  --destructive: 2 78% 56%;
  --border: 282 18% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px rgba(95, 47, 108, 0.08);
  --shadow-md: 0 16px 40px rgba(95, 47, 108, 0.14);
  --shadow-lg: 0 30px 80px rgba(95, 47, 108, 0.22);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 263 28% 9%;
  --foreground: 296 20% 95%;
  --primary: 321 85% 63%;
  --secondary: 266 78% 68%;
  --muted: 264 19% 17%;
  --destructive: 2 84% 63%;
  --border: 264 14% 24%;
  --card: 264 20% 12%;
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.48);
}

* { 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 top left, hsla(var(--primary), 0.10), transparent 28%),
    radial-gradient(circle at top right, hsla(var(--secondary), 0.12), transparent 30%),
    hsl(var(--background));
}

a { color: inherit; text-decoration: none; }
button, input, textarea {
  font: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

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

.glass-bar {
  background: hsla(var(--card), 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsla(var(--border), 0.8);
}

.soft-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.soft-scroll::-webkit-scrollbar-thumb {
  background: hsla(var(--secondary), 0.35);
  border-radius: 999px;
}
.soft-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.fade-in {
  animation: fadeIn var(--transition-smooth) both;
}

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

.pulse-skeleton {
  background: linear-gradient(90deg, hsla(var(--muted), 0.95), hsla(var(--foreground), 0.05), hsla(var(--muted), 0.95));
  background-size: 200% 100%;
  animation: pulse 1.4s linear infinite;
}

@keyframes pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}