html.dark body { background-color: #000000; color: #e5e5e5; }
html.dark .surface { background-color: #121212; border-color: #2a2a2a; }
html.dark .input-field { background-color: #000000; border-color: #333; color: white; }

html:not(.dark) body { background-color: #f3f4f6; color: #111827; }
html:not(.dark) .surface { background-color: #ffffff; border-color: #e5e7eb; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
html:not(.dark) .input-field { background-color: #f9fafb; border-color: #d1d5db; color: #111827; }

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

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

.animate-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.fill-mode-forwards {
    animation-fill-mode: forwards;
}