/* ===== 移动端 App 风格快捷导航 ===== */
.mobile-nav-grid {
    display: none;
}

@media (max-width: 768px) {
    .mobile-nav-grid {
        display: block;
        background-color: #fff;
        padding: 16px 0 8px;
    }

    .mobile-nav-grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 6px 0;
        color: #333;
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-item i {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        color: #fff;
        margin-bottom: 7px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    }

    /* 四个入口不同配色，类似 App 金刚区 */
    .mobile-nav-item:nth-child(1) i {
        background: linear-gradient(135deg, #4facfe 0%, #0066cc 100%);
    }

    .mobile-nav-item:nth-child(2) i {
        background: linear-gradient(135deg, #ffb75e 0%, #ff8c00 100%);
    }

    .mobile-nav-item:nth-child(3) i {
        background: linear-gradient(135deg, #43e97b 0%, #12a86b 100%);
    }

    .mobile-nav-item:nth-child(4) i {
        background: linear-gradient(135deg, #a18cd1 0%, #7b5fd0 100%);
    }

    .mobile-nav-item:active i,
    .mobile-nav-item:hover i {
        transform: scale(0.9);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }

    .mobile-nav-item:active span,
    .mobile-nav-item:hover span {
        color: var(--primary-color);
    }
}

@media (max-width: 576px) {
    .mobile-nav-grid {
        padding: 12px 0 6px;
    }

    .mobile-nav-item {
        font-size: 0.72rem;
    }

    .mobile-nav-item i {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 1.2rem;
        margin-bottom: 6px;
    }
}