/* 导航标签样式 */
.nav-tab {
    @apply px-4 py-2 text-sm font-medium text-gray-600 rounded-md transition-all duration-200 hover:text-gray-900 hover:bg-white/50;
}

.nav-tab.active {
    @apply bg-white text-blue-600 shadow-sm font-semibold;
}

/* 移动端导航样式 */
.mobile-nav-tab {
    @apply flex-1 flex flex-col items-center justify-center py-3 text-xs font-medium text-gray-600 transition-colors duration-200 hover:text-gray-900;
}

.mobile-nav-tab.active {
    @apply text-blue-600 bg-blue-50;
}

.mobile-nav-tab i {
    @apply text-lg mb-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;
    }
}