@layer utilities {

    .scroll-mt-mobile {
        scroll-margin-top: 80px; /* 移动端导航栏高度 */
    }

    .scroll-mt-desktop {
        scroll-margin-top: 60px; /* PC端导航栏高度 */
    }

    .content-auto {
        content-visibility: auto;
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .bg-gradient-blue {
        background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
    }

    .transition-all-300 {
        transition: all 0.3s ease;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .upload-hover {
        @apply border-primary bg-primary/5;
    }

    .toast-appear {
        animation: toast-in 0.5s ease forwards;
    }

    .toast-disappear {
        animation: toast-out 0.5s ease forwards;
    }

    @keyframes toast-in {
        0% {
            transform: translateX(100%);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes toast-out {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    .fade-in {
        animation: fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes fade-in {
        0% {
            opacity: 0;
            transform: scale(0.9) translateY(10px);
        }
        50% {
            opacity: 0.7;
            transform: scale(0.98) translateY(2px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .placeholder-fade-out {
        animation: placeholder-fade-out 0.4s ease-out forwards;
    }

    @keyframes placeholder-fade-out {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale(0.95);
        }
    }

    .nav-link.active {
        @apply text-primary;
        position: relative;
    }

    .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background: linear-gradient(90deg, #165DFF, #0FC6C2);
        border-radius: 1px;
        animation: nav-indicator 0.3s ease-out;
    }

    @keyframes nav-indicator {
        0% {
            width: 0;
            opacity: 0;
        }
        100% {
            width: 20px;
            opacity: 1;
        }
    }
}