style.css

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    scroll-behavior: smooth;
}

/* System Cards */
.system-card {
    @apply bg-gray-800/50 border border-gray-700 rounded-xl p-6 cursor-pointer transition-all hover:border-purple-500/50 hover:bg-gray-800/70;
}

.system-card h3 {
    @apply text-xl font-bold mt-4 mb-2;
}

.system-card p {
    @apply text-gray-400 text-sm;
}

.system-icon {
    @apply w-16 h-16 rounded-xl flex items-center justify-center text-white;
}

.system-icon i {
    @apply w-8 h-8;
}

.system-card:hover .system-icon {
    transform: scale(1.05);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}

.elements span {
    @apply inline-block px-3 py-1 rounded-full text-xs font-medium;
}

/* Modal Animation */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#systemModal[data-show="true"] > div {
    animation: modalFadeIn 0.3s ease-out forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .system-card {
        @apply p-4;
    }
    
    .system-card h3 {
        @apply text-lg;
    }
}