@layer components {
    .glass-card {
        @apply bg-white/10 backdrop-blur-md border border-white/5 shadow-xl;
    }
    
    .input-premium {
        @apply w-full bg-slate-900/50 border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-500 transition-all duration-300;
        @apply focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500;
        @apply hover:border-white/20;
    }

    .btn-primary {
        @apply w-full py-3.5 rounded-xl font-semibold text-sm tracking-wide text-white shadow-lg shadow-brand-500/20 transition-all duration-300;
        @apply bg-gradient-to-r from-brand-600 to-brand-500;
        @apply hover:from-brand-500 hover:to-brand-400 hover:shadow-brand-500/40 hover:-translate-y-0.5;
        @apply active:scale-[0.98] active:translate-y-0;
        @apply disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-steam {
        @apply w-full py-3.5 rounded-xl font-semibold text-sm tracking-wide text-white shadow-lg transition-all duration-300 flex items-center justify-center gap-3;
        @apply bg-[#171a21] border border-white/10;
        @apply hover:bg-[#1b2838] hover:border-white/20 hover:shadow-xl hover:-translate-y-0.5;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0f172a; 
}
::-webkit-scrollbar-thumb {
    background: #334155; 
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569; 
}

/* Loading Spinner */
.loader {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0ea5e9;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}