@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #0F172A;
  --foreground: #F8FAFC;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--foreground);
  background: var(--background);
  font-family: 'Inter', sans-serif;
}

@layer components {
  .glass-card {
    @apply bg-glass-gradient backdrop-blur-md border border-border rounded-2xl;
  }
}
\n@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }\n@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } }\n.pulse-glow { animation: pulseGlow 2s infinite; }

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}