@layer utilities {

    /* 渐变优化 */
    .bg-gradient-primary {
        background: linear-gradient(135deg, #0078FF 0%, #3BA0FF 100%);
    }

    .text-gradient-primary {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(135deg, #0078FF 0%, #3BA0FF 100%);
    }

        /* 导航栏样式 */
    .docs-nav {
        background: linear-gradient(90deg, #FFFFFF 0%, #F9FBFF 100%);
        border-bottom: 1px solid #E8F3FF;
        box-shadow: 0 1px 3px 0 rgba(0, 120, 255, 0.05);
        z-index: 50;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .dark .docs-nav {
        background: linear-gradient(90deg, #1a1a1a 0%, #222222 100%);
        border-bottom: 1px solid #333;
    }
    .docs-nav-item {
        position: relative;
        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 4px;
        display: inline-block;
    }
    .docs-nav-active {
        color: #0078FF;
        font-weight: 600;
    }
    .docs-nav-active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #0078FF 0%, #3BA0FF 100%);
        border-radius: 3px 3px 0 0;
        @apply md:block hidden;
    }
    .docs-nav-item:hover:not(.docs-nav-active) {
        color: #0078FF;
        background-color: rgba(0, 120, 255, 0.05);
        border-radius: 4px;
    }

    /* 顶级悬停动画 - 卡片/模块 */
    .hover-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 120, 0.05), 0 2px 4px -1px rgba(0, 0, 120, 0.03);
    }

    .hover-card:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 20px 25px -5px rgba(0, 120, 255, 0.1), 0 10px 10px -5px rgba(0, 120, 255, 0.04);
    }

    /* 按钮悬停动画 */
    .hover-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(0);
        box-shadow: 0 4px 6px -1px rgba(0, 120, 255, 0.15);
    }

    .hover-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 120, 255, 0.2);
    }

    .hover-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px -1px rgba(0, 120, 255, 0.1);
    }

    /* 文字/链接悬停动画 */
    .hover-link {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .hover-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: -2px;
        left: 0;
        background-color: #0078FF;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hover-link:hover::after {
        width: 100%;
    }

    /* 滚动渐入动画 */
    .animate-fade-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .animate-fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* 文字层级与显示优化 */
    .text-layer-1 {
        color: #111111;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .dark .text-layer-1 {
        color: #f5f5f5;
    }

    .text-layer-2 {
        color: #333333;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .dark .text-layer-2 {
        color: #e0e0e0;
    }

    .text-layer-3 {
        color: #666666;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .dark .text-layer-3 {
        color: #aaa;
    }

    .text-layer-4 {
        color: #999999;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .dark .text-layer-4 {
        color: #888;
    }

    /* 光影效果优化 */
    .shadow-soft {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    }

    .shadow-medium {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    }

    /* 移动端菜单样式 */
    .mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-smooth-custom;
    }

    .mobile-menu.open {
        max-height: 500px;
    }

    /* 返回顶部按钮 */
    .back-to-top {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-smooth-custom;
    }

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
    }

    /* Logo图片样式适配 */
    .logo-img {
        max-height: 40px;
        /* 控制logo高度适配导航栏 */
        width: auto;
        /* 保持宽高比 */
        object-fit: contain;
        /* 防止图片变形 */
    }

    .footer-logo-img {
        max-height: 30px;
        /* 页脚logo缩小适配 */
        width: auto;
        object-fit: contain;
    }
}