:root {
        /* --- 尺寸设定 --- */
        --nav-h: 70px;
        --icon-size: 28px;
        --text-size: 11px;
        --center-btn-size: 54px; /* 稍微调小一点点，更精致 */
        
        --nav-bg: rgba(255, 255, 255, 0.98);
        --nav-border: rgba(0, 0, 0, 0.05);
        
        /* --- 核心配色：梦幻紫罗兰 (Violet Gradient) --- */
        /* 这种紫色渐变非常有质感，且不刺眼 */
        --gradient-primary: linear-gradient(135deg, #b721ff 0%, #21d4fd 100%); 
        /* 或者纯紫风格: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%); */
        
        --shadow-primary: rgba(130, 50, 255, 0.35); /* 紫色系投影 */
        --text-inactive: #999999;
    }

    /* 暗黑模式适配 */
    @media (prefers-color-scheme: dark) {
        :root {
            --nav-bg: rgba(25, 25, 25, 0.98);
            --nav-border: rgba(255, 255, 255, 0.1);
            --text-inactive: #666;
        }
    }

    /* 1. 导航栏容器 - 贴底通栏 */
    .fluid-nav-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(var(--nav-h) + env(safe-area-inset-bottom));
        background: var(--nav-bg);
        border-top: 1px solid var(--nav-border);
        box-shadow: 0 -5px 20px rgba(0,0,0,0.02); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .fluid-nav-bar ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--nav-h);
        margin: 0;
        padding: 0 15px;
        list-style: none;
        position: relative;
    }

    .fluid-nav-bar li {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    /* 2. 链接样式 */
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--text-inactive);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        transition: all 0.2s;
    }

    /* 图标 */
    .nav-icon {
        font-size: var(--icon-size);
        margin-bottom: 4px;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 文字 */
    .nav-text {
        font-size: var(--text-size);
        font-weight: 500;
        transform: scale(0.95);
        transition: all 0.3s;
    }

    /* --- 3. 激活状态 (紫色渐变) --- */
    .nav-item.active .nav-icon,
    .nav-item.active .nav-text {
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        font-weight: 700;
        transform: scale(1);
    }
    
    .nav-item.active .nav-icon {
        transform: translateY(-2px);
        /* 激活时加一点点紫色滤镜阴影，增加发光感 */
        filter: drop-shadow(0 2px 4px rgba(183, 33, 255, 0.2));
    }

    /* --- 4. 中间悬浮按钮 (位置下沉优化) --- */
    .fluid-nav-bar li:nth-child(3) .nav-item {
        overflow: visible;
    }

    .fluid-nav-bar li:nth-child(3) .nav-icon {
        position: absolute;
        
        /* 核心修改：位置下沉，不再那么突兀 */
        top: -12px; 
        
        width: var(--center-btn-size);
        height: var(--center-btn-size);
        
        background: var(--gradient-primary);
        -webkit-text-fill-color: #fff;
        color: #fff;
        
        /* 形状：保持超椭圆 */
        border-radius: 20px; 
        transform: rotate(45deg); 
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        box-shadow: 0 6px 20px var(--shadow-primary);
        
        /* 边框加宽，利用背景色遮挡，制造“镶嵌”感 */
        border: 5px solid var(--nav-bg); 
        
        font-size: 26px;
        z-index: 10;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    }

    /* 内部图标反向旋转 */
    .fluid-nav-bar li:nth-child(3) .nav-icon i {
        transform: rotate(-45deg); 
    }

    /* 隐藏中间文字 */
    .fluid-nav-bar li:nth-child(3) .nav-text { display: none; }

    /* 中间按钮点击特效 */
    .fluid-nav-bar li:nth-child(3) .nav-item:active .nav-icon {
        transform: rotate(45deg) scale(0.9);
        box-shadow: 0 4px 12px var(--shadow-primary);
    }

    /* 普通点击反馈 */
    .nav-item:not(.active):active .nav-icon {
        transform: scale(0.9);
        opacity: 0.8;
    }