.mblnav_dock,
.mblnav_mask,
.mblnav_panel,
.mblnav_toast {
    display: none;
}
@media screen and (max-width: 768px) {
    .mblnav_dock {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 9999;
        align-items: center;
        background: rgba(40, 40, 45, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        height: auto;
        min-height: 50px;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
    }
    .mblnav_cell {
        position: relative;
    }
    .mblnav_cell:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
    }
    body {
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }
    .mblnav_cell {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        min-height: 38px;
        cursor: pointer;
        text-decoration: none;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
        transition: all 0.3s ease;
        box-sizing: border-box;
        line-height: 1;
    }
    .mblnav_cell:active { }
    .mblnav_ico {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 2px 0;
        transition: all 0.3s ease;
        height: 18px;
    }
    .mblnav_ico i { font-size: 18px; color: #fff; transition: all 0.3s ease; line-height: 1; }
    .mblnav_lbl {
        display: block;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.75);
        font-weight: 500;
        letter-spacing: 0.5px;
        line-height: 1;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
    }
    .mblnav_mask {
        display: block;
        position: fixed; top:0; left:0; right:0; bottom:0;
        background: rgba(0,0,0,0.5);
        z-index: 10000;
        opacity: 0; visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .mblnav_mask.mblnav_on { opacity:1; visibility:visible; }
    .mblnav_panel {
        display: block;
        position: fixed;
        left: 12px; right: 12px;
        bottom: calc(80px + env(safe-area-inset-bottom));
        z-index: 10001;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 10px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05);
        opacity: 0; visibility: hidden;
        transform: translateY(100%) scale(0.9);
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        overflow: hidden;
    }
    .mblnav_panel::before {
        content: ''; position: absolute; top: 0; left: 20px; right: 20px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
        z-index: 1;
    }
    .mblnav_panel.mblnav_on {
        opacity: 1; visibility: visible;
        transform: translateY(0) scale(1);
    }
    .mblnav_panel_hd {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 20px 12px;
        background: linear-gradient(135deg, #f8f9fa, #fff);
        border-bottom: 1px solid #f0f0f0;
    }
    .mblnav_panel_hd h3 {
        margin:0; font-size:18px; font-weight:600; color:#303133;
        display:flex; align-items:center; gap:10px;
    }
    .mblnav_panel_hd h3 i { font-size:22px; }
    .mblnav_panel_x {
        width:32px; height:32px; border-radius:50%; border:none;
        background:#f0f2f5; color:#909399; font-size:14px; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        transition: all 0.3s ease;
    }
    .mblnav_panel_x:active { background:#e4e6eb; color:#606266; transform:rotate(90deg); }
    .mblnav_panel_bd { padding: 6px 16px 18px; }
    .mblnav_qrbox { text-align:center; padding:10px 0; }
    .mblnav_qrbox img {
        display:block; margin:0 auto;
        width:200px; height:200px; object-fit:cover;
        border-radius:16px; border:4px solid #f0f2f5;
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }
    .mblnav_qrbox_nopic {
        width:200px; height:200px; margin:0 auto;
        border:3px dashed #e0e0e0; border-radius:16px;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        background: linear-gradient(135deg, #E8F8F0, #D4F0E4);
    }
    .mblnav_qrbox_nopic span { font-size:13px; color:#909399; font-weight:500; }
    .mblnav_wxid { margin:16px 0 0; text-align:center; line-height:1.8; }
    .mblnav_wxid span { display:block; font-size:14px; color:#909399; }
    .mblnav_wxid b { color:#303133; font-size:18px; font-weight:600; }
    .mblnav_cpbtn {
        display:block; width:100%; margin-top:14px; padding:14px 0;
        border:none; border-radius:14px;
        background: linear-gradient(135deg, #2ECC71, #27AE60);
        color:#fff; font-size:16px; font-weight:600;
        cursor:pointer; transition:all 0.25s ease; letter-spacing:2px;
        box-shadow: 0 4px 15px rgba(46,204,113,0.35);
    }
    .mblnav_cpbtn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(46,204,113,0.25); }
    .mblnav_mapitem {
        display:flex; align-items:center;
        padding:16px; margin-bottom:12px;
        border-radius:16px; background: linear-gradient(135deg, #FAFBFC, #F5F7F9);
        border: 1px solid #F0F2F5;
        text-decoration:none; color:inherit; transition:all 0.25s ease;
    }
    .mblnav_mapitem:last-child { margin-bottom:0; }
    .mblnav_mapitem:active { transform: scale(0.97); background: linear-gradient(135deg, #F0F2F5, #EBEDF0); }
    .mblnav_maplogo {
        width:48px; height:48px; border-radius:14px;
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-size:20px; margin-right:16px; flex-shrink:0;
        box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    }
    .mblnav_maptxt { flex:1; }
    .mblnav_maptxt h4 { margin:0 0 4px; font-size:16px; color:#303133; font-weight:600; }
    .mblnav_maptxt p  { margin:0; font-size:12px; color:#909399; }
    .mblnav_maparrow  { color:#c0c4cc; font-size:14px; }
    .mblnav_toast {
        display: block;
        position:fixed; top:50%; left:50%;
        transform:translate(-50%,-50%) scale(0.85);
        background:rgba(0,0,0,0.8); color:#fff;
        padding:14px 30px; border-radius:12px; font-size:15px;
        z-index:10002; opacity:0; visibility:hidden;
        transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
        pointer-events:none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .mblnav_toast.mblnav_on { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
    @media screen and (max-width:360px) {
        .mblnav_ico { width:40px; height:40px; }
        .mblnav_ico i { font-size:18px; }
        .mblnav_lbl { font-size:10px; }
        .mblnav_maplogo { width:44px; height:44px; font-size:18px; }
    }
    @media (prefers-color-scheme:dark) {
        .mblnav_dock {
            background: rgba(25, 25, 30, 0.97);
        }
        .mblnav_lbl { color: rgba(255,255,255,0.6); }
        .mblnav_ico i { color: #fff; }
        .mblnav_panel { background:#222; box-shadow: 0 10px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03); }
        .mblnav_panel::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
        .mblnav_panel_hd { background:linear-gradient(135deg, #282828, #222); border-color:#333; }
        .mblnav_panel_hd h3 { color:#e0e0e0; }
        .mblnav_panel_x { background:#333; color:#999; }
        .mblnav_qrbox img { border-color:#333; }
        .mblnav_mapitem { background:linear-gradient(135deg, #282828, #222); border-color:#333; }
        .mblnav_mapitem:active { background:linear-gradient(135deg, #303030, #2a2a2a); }
        .mblnav_maptxt h4 { color:#e0e0e0; }
        .mblnav_maptxt p { color:#999; }
        .mblnav_wxid span { display:block; font-size:14px; color:#909399; }
        .mblnav_wxid b { color:#e0e0e0; }
        .mblnav_qrbox_nopic { background:linear-gradient(135deg, #1a2a1f, #15251a); border-color:#2a3a2f; }
    }
}