body { font-family: 'Sarabun', sans-serif; background-color: #f8fafc; }
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.nav-btn, .filter-btn { padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; border-radius: 0.5rem; transition: all 0.2s ease-in-out; }
.nav-btn.active, .filter-btn.active { background-color: #4f46e5; color: white; }
.nav-btn:not(.active), .filter-btn:not(.active) { color: #4338ca; background-color: #eef2ff; }
.nav-btn:not(.active):hover, .filter-btn:not(.active):hover { background-color: #e0e7ff; }
.status-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.modal-backdrop { backdrop-filter: blur(4px); }
.admin-navbar-link { display: flex; align-items: center; padding: 0.5rem 0; margin: 0 1rem; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; font-weight: 500; color: #475569; }
.admin-navbar-link:hover { color: #1e293b; }
.admin-navbar-link.active { color: #4338ca; border-bottom-color: #4338ca; }
.admin-navbar-link i { font-size: 1.1rem; margin-right: 0.5rem; }
.swal2-input { width: calc(100% - 1.5rem) !important; margin: 0.5rem auto !important; }
.mobile-nav-link { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 500; color: #334155; }
.mobile-nav-link:hover { background-color: #f1f5f9; }
.mobile-nav-link.active { background-color: #eef2ff; color: #4338ca; }
/* Enhanced upload animations */
.upload-zone-hover {
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.image-upload-preview {
    animation: slideInUp 0.3s ease-out;
}

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