body {
    font-family: 'Inter', sans-serif;
}

.visualizer {
    width: 100%;
    height: 80px;
    background: #f9fafb;
    border-radius: 12px;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
}

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

@layer components {
    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 text-white transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-md;
    }

    .input-field {
        @apply w-full p-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all bg-gray-50/50;
    }
}

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #E2E8F0;
    border-radius: 10px;
}