/* Additional custom styles for Karmacide */
.container {
    max-width: 1200px;
}

/* Smooth transitions */
* {
    transition: all 0.2s ease-in-out;
}

/* Custom focus styles */
textarea:focus,
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Loading animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    .bg-white {
        padding: 1rem;
    }
}

/* Custom gradient background */
body {
    background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 100%);
    min-height: 100vh;
}

/* Card hover effects */
.bg-white:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Button loading state */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error state styling */
.border-red-200 {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Success state styling */
.border-green-400 {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
}

.border-yellow-400 {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, transparent 100%);
}

.border-red-400 {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
}