/* =========================
   PC左侧全高导航
   与当前首页深色玻璃拟态配色统一
========================= */
@media(min-width:851px){
    body{
        padding-left:96px !important;
        box-sizing:border-box;
    }

    .mobile-nav{
        position:fixed !important;
        z-index:99999 !important;
        left:0 !important;
        top:0 !important;
        bottom:0 !important;
        transform:none !important;
        width:96px;
        height:100vh;
        padding:28px 10px;
        box-sizing:border-box;
        background:rgba(20,18,30,.55);
        border:none;
        border-right:1px solid rgba(255,255,255,.14);
        border-radius:0;
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        box-shadow:6px 0 28px rgba(0,0,0,.25);
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:center;
        gap:14px;
    }

    .mobile-nav a{
        position:relative;
        min-height:64px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border-radius:14px;
        font-size:11px;
        color:rgba(255,255,255,.55);
        text-decoration:none;
        transition:.2s;
    }

    .mobile-nav a:hover{
        background:rgba(255,255,255,.08);
        color:#fff;
    }

    .mobile-nav a.active{
        background:linear-gradient(135deg,#7567f7,#3AA7C4);
        color:#fff;
        font-weight:700;
        box-shadow:0 6px 16px rgba(117,103,247,.35);
    }

    .mobile-icon{
        font-size:22px;
        line-height:22px;
    }

    .cart-badge{
        position:absolute;
        top:9px;
        margin-left:27px;
        min-width:17px;
        height:17px;
        padding:0 4px;
        box-sizing:border-box;
        background:#ef4c4c;
        color:#fff;
        border-radius:10px;
        font-size:10px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
}

/* =========================
   手机端底部导航
========================= */
@media(max-width:850px){
    .mobile-nav{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        top:auto !important;
        width:100% !important;
        height:64px !important;
        padding:5px 0 !important;
        box-sizing:border-box !important;
        background:rgba(20,18,30,.72) !important;
        border-top:1px solid rgba(255,255,255,.14) !important;
        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;
        box-shadow:0 -6px 24px rgba(0,0,0,.25) !important;
        z-index:99999 !important;
        display:flex !important;
        flex-direction:row !important;
        gap:0 !important;
    }

    .mobile-nav a{
        position:relative !important;
        flex:1 !important;
        min-width:0 !important;
        min-height:54px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:3px !important;
        border-radius:10px !important;
        font-size:11px !important;
        color:rgba(255,255,255,.55) !important;
        text-decoration:none !important;
    }

    .mobile-nav a.active{
        background:linear-gradient(135deg,#7567f7,#3AA7C4) !important;
        color:#fff !important;
        font-weight:700 !important;
    }

    .mobile-icon{
        font-size:21px !important;
        line-height:21px !important;
    }

    .cart-badge{
        position:absolute !important;
        top:5px !important;
        margin-left:25px !important;
        min-width:16px !important;
        height:16px !important;
        padding:0 4px !important;
        box-sizing:border-box !important;
        background:#ef4c4c !important;
        color:#fff !important;
        border-radius:10px !important;
        font-size:9px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body{
        padding-bottom:70px !important;
    }
}


/* “我的”入口：未读系统通知红点 */
.mobile-nav .system-notice-dot {
    position: absolute;
    top: 8px;
    left: calc(50% + 10px);
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: #ff4655;
    box-shadow: 0 0 0 2px rgba(20, 18, 30, .9), 0 0 8px rgba(255, 70, 85, .45);
    pointer-events: none;
}