/* Add to existing CSS */

.idea-card {
    transition: transform 0.2s ease-in-out;
}

.idea-card:hover {
    transform: translateY(-2px);
}

.feature-list {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

.feature-item {
    margin-bottom: 0.25rem;
    position: relative;
}

.feature-item::before {
    content: "•";
    position: absolute;
    left: -1rem;
}


/* Add dark mode transitions */

.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}


/* Dark mode card hover effects */

.dark .idea-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}


/* Dark mode feature list styles */

.dark .feature-item::before {
    @apply text-gray-500;
}


/* Dark mode form focus styles */

.dark textarea:focus,
.dark select:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}


/* Dark mode scrollbar */

.dark textarea::-webkit-scrollbar-track {
    @apply bg-gray-700;
}

.dark textarea::-webkit-scrollbar-thumb {
    @apply bg-gray-600;
}

.dark textarea::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}


/* Add any additional custom styles you need */