/* AIMaks Custom Styles */

/* Navigation Links */
.nav-link {
    @apply px-3 py-1.5 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800/50 transition-all;
}
.nav-link.active {
    @apply text-white bg-gray-800/50;
}

/* Feature Cards */
.feature-card {
    @apply p-6 rounded-2xl bg-gray-900/50 border border-gray-800/50 hover:border-gray-700/50 hover:bg-gray-900/80 transition-all;
}

/* Stat Cards */
.stat-card {
    @apply px-4 py-3 rounded-xl bg-gray-900/50 border border-gray-800/50;
}

/* Tags */
.tag {
    @apply px-2 py-0.5 rounded text-xs bg-gray-800/80 text-gray-400;
}

/* Step Dots for Onboarding */
.step-dot {
    @apply w-8 h-8 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center text-sm font-medium text-gray-500 transition-all;
}
.step-dot.active {
    @apply bg-brand-600 border-brand-500 text-white shadow-lg shadow-brand-600/25;
}

/* Line Clamp */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Smooth transitions */
* { scroll-behavior: smooth; }

/* Selection */
::selection { background: rgba(92, 124, 250, 0.3); }

/* Focus styles */
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(92, 124, 250, 0.3);
}

/* Animation utilities */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(92, 124, 250, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(92, 124, 250, 0); }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Code blocks */
code {
    @apply px-1.5 py-0.5 rounded bg-gray-800 text-sm font-mono;
}