page {
    background-color: #f6f6f6;
}

.page-container {
    background-color: #f6f6f6;
    padding: 0 24rpx;
    box-sizing: border-box;

    .empty {
        height: 120rpx;
    }

    .wrapper {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 36rpx 24rpx;
        box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
        margin: 30rpx 0;
        display: flex;
        flex-direction: column;

        .wrapper-title {
            font-size: 32rpx;
            color: #141414;
            margin-bottom: 36rpx;
            font-weight: bold;
            text-align: center;
        }
    }

    .btn-area {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 38rpx;
    }

    .shape-list {
        margin: 38rpx 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 38rpx;
    }

    .shape-list-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60rpx 40rpx;
        text-align: center;

        .empty-icon {
            width: 120rpx;
            height: 120rpx;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 32rpx;
            box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);

            .toy-icon {
                font-size: 48rpx;
                color: #3b82f6;
            }
        }

        .empty-title {
            font-size: 32rpx;
            font-weight: 600;
            color: #374151;
            margin-bottom: 16rpx;
            line-height: 1.4;
        }

        .empty-desc {
            font-size: 26rpx;
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 32rpx;
            max-width: 400rpx;
        }
    }
}

.canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    border: 2rpx dashed #dee2e6;
}

.canvas-content {
    max-width: 100%;
    border-radius: 8rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.bottom-btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
    padding: 0 24rpx;
    box-sizing: border-box;
    border-radius: 16rpx 16rpx 0 0;
}