.shape-card {
    position: relative;
    width: 100%;
    height: 184rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    border: 2rpx solid #E8E8E8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    &:active {
        transform: scale(0.95);
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    }

    .color-box {
        position: absolute;
        top: 24rpx;
        left: 24rpx;
        width: 42rpx;
        height: 42rpx;
        border-radius: 50%;
        border: 4rpx solid #FFFFFF;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    }

    .shape-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        .shape-card-img {
            width: 140rpx;
            height: 140rpx;
            display: block;
        }
    }

    .delete-icon {
        position: absolute;
        top: -12rpx;
        right: -12rpx;
        width: 46rpx;
        height: 46rpx;
        background: #FF4757;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 32rpx;
        font-weight: bold;
        box-shadow: 0 2rpx 6rpx rgba(255, 71, 87, 0.3);
        transition: all 0.2s ease-in-out;

        &:active {
            transform: scale(0.9);
        }

        .delete-icon-inner {
            color: #FFFFFF !important;
        }
    }
}