/* =========================================================
   components/ui.css —— 通用 UI 元素（按钮 / 渐变文字 / 动画）
   ========================================================= */
/* ===== 通用按钮 ===== */
.btn-primary {
    color: white;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.25);
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.3);
}
.btn-blue {
    background: linear-gradient(135deg, #3A70EE 0%, #6366F1 100%);
}
.btn-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}
.btn-orange {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
}
.btn-teal {
    background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
}

/* 渐变文字 */
.gradient-text-blue {
    background: linear-gradient(135deg, #2F5CCB 0%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-orange {
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-cyan {
    background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== 通用动画 ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}