/* Custom styles beyond Tailwind */
.gradient-text {
  background: linear-gradient(to right, #9333ea, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.upload-area {
  transition: all 0.3s ease;
}

.upload-area.dragging {
  background-color: rgba(147, 51, 234, 0.1);
  border-color: #9333ea;
}

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

.slide-up {
  animation: slideUp 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

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

/* Dark mode styles */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #111827;
  color: #f9fafb;
}

.dark .card {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .upload-area {
  background-color: rgba(31, 41, 55, 0.5);
  border-color: #4b5563;
}

.dark .upload-area.dragging {
  background-color: rgba(147, 51, 234, 0.2);
  border-color: #9333ea;
}

.dark input, 
.dark textarea, 
.dark select {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

.dark input::placeholder, 
.dark textarea::placeholder {
  color: #9ca3af;
}

.dark button {
  border-color: #4b5563;
}

.dark .bg-white {
  background-color: #1f2937;
}

.dark .bg-gray-50,
.dark .bg-gray-100 {
  background-color: #111827;
}

.dark .text-gray-500 {
  color: #9ca3af;
}

.dark .text-gray-600,
.dark .text-gray-700 {
  color: #d1d5db;
}

.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: #374151;
}

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

/* Prose styles for dark mode */
.dark .prose {
  color: #e5e7eb;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4 {
  color: #f9fafb;
}

.dark .prose a {
  color: #a78bfa;
}

.dark .prose strong {
  color: #f9fafb;
}

.dark .prose ul > li::before {
  background-color: #6b7280;
}

.dark .prose blockquote {
  border-left-color: #4b5563;
  color: #9ca3af;
}

.dark .prose hr {
  border-color: #4b5563;
}

.dark .prose code {
  color: #e5e7eb;
  background-color: #374151;
}