/* Animation styles */
.app-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Smooth transitions */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.dark ::-webkit-scrollbar-track {
    background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

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

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

/* Light/Dark mode backgrounds and text */
html, body {
    background-color: #f9fafb;
    color: #1a202c;
}

.dark html, .dark body {
    background-color: #111827;
    color: #f3f4f6;
}

/* Card backgrounds */
.app-card {
    background: #fff;
    color: #1a202c;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.dark .app-card {
    background: #1f2937;
    color: #f3f4f6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Header backgrounds */
header {
    background: #fff;
    color: #1a202c;
}

.dark header {
    background: #1f2937;
    color: #f3f4f6;
}