body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
.card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
#modal-backdrop { transition: opacity 0.3s ease; }
#modal-content { transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(20px) scale(0.95); opacity: 0; }
#modal-content.show { transform: translateY(0) scale(1); opacity: 1; }
.toast { visibility: hidden; min-width: 250px; margin-left: -125px; color: #fff; text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 1000; left: 50%; bottom: 30px; opacity: 0; transition: visibility 0s, opacity 0.5s linear; }
.toast.show { visibility: visible; opacity: 1; }
.form-input { margin-top: 1px; width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; }
.dynamic-row { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }