/* 自定义样式 */
.nav-item {
    @apply flex items-center px-4 py-3 text-gray-600 rounded-lg transition-all duration-200 hover:bg-blue-50 hover:text-blue-600;
}

.nav-item.active {
    @apply bg-blue-100 text-blue-600 font-medium;
}

.nav-item:hover {
    @apply transform translate-x-1;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 transition-all duration-200 hover:shadow-md;
}

/* 按钮样式 */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium;
}

.btn-secondary {
    @apply bg-gray-100 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-200 transition-colors duration-200 font-medium;
}

.btn-success {
    @apply bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors duration-200 font-medium;
}

.btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium;
}

/* 进度条样式 */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply bg-blue-600 h-2 rounded-full transition-all duration-500 ease-out;
}

/* 状态标签 */
.status-tag {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-success {
    @apply bg-green-100 text-green-800;
}

.status-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.status-error {
    @apply bg-red-100 text-red-800;
}

.status-info {
    @apply bg-blue-100 text-blue-800;
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-item {
        @apply px-3 py-2 text-sm;
    }
}