:root {
  --bg-deep: #06030d;
  --bg-surface: #0e071c;
  --bg-card: rgba(15, 7, 31, 0.65);
  
  --neon-purple: #a855f7;
  --neon-purple-glow: rgba(168, 85, 247, 0.45);
  --lilac: #d8b4fe;
  --lilac-soft: #f3e8ff;
  
  --border-subtle: rgba(147, 51, 234, 0.25);
  --border-focus: rgba(216, 180, 254, 0.8);
}

body {
  background-color: var(--bg-deep);
  color: var(--lilac-soft);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.bg-mesh-pattern {
  background-image: 
    radial-gradient(at 0% 0%, rgba(126, 34, 206, 0.22) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(88, 28, 135, 0.25) 0px, transparent 50%),
    radial-gradient(#1c0f33 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 30px 30px;
}

.card-glass {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

.card-glass:hover {
  border-color: var(--border-focus);
}